/* /creators + /advertisers below the story hero: the live pages' sections and words, in the new style (build/live_pages.py) */
.lv-center { text-align: center; }
.purple { --tone: var(--purple); --on: #fff; } .pink { --tone: var(--pink); --on: var(--ink); } .orange { --tone: var(--orange); --on: #fff; }
.yellow { --tone: var(--yellow); --on: var(--ink); } .green { --tone: var(--green); --on: var(--ink); }

/* /advertisers: like the homepage EASY, the first section rises from below while "at the click of a button" is still
   swelling over it (the words sit above it, the white wash below it) — its heading is on screen before the orange is gone,
   so there is never an empty white screen. Hero scroll = 220vh desktop / 160vh phone. */
.sh-zoomv + .lv-done { position: relative; z-index: 3; margin-top: -70vh; padding-top: 56px; }
@media (max-width: 640px) { .sh-zoomv + .lv-done { margin-top: -58vh; } }
/* Alex 09-28: centred, "SO FAR" in caps on its own line (the markup keeps the plain words for search) */
.lv-done-t { text-align: center; text-wrap: balance; }
.lv-done-t .c-orange { text-transform: uppercase; }

/* Empower Your Creativity */
.lv-empower .lv-center { max-width: 920px; margin: 0 auto; }
.lv-empower .lede { max-width: 36em; margin: 18px auto 0; }
.lv-empower .ctas { justify-content: center; margin-top: 30px; }

/* one-line statement banners (Unlock new revenue… / Following these steps…) */
.lv-banner { text-align: center; padding: clamp(84px, 11vw, 170px) 0; }
.lv-banner.orange { background: var(--orange); color: #fff; }
.lv-banner.navy { background: var(--navy); color: var(--white); }
.lv-banner .big { max-width: 15em; margin: 0 auto; text-wrap: balance; }
.lv-banner.navy .big { font-size: clamp(34px, 5vw, 78px); max-width: 19em; }

/* step rows: picture and text alternate sides, like the live pages */
.lv-rows { list-style: none; display: flex; flex-direction: column; gap: clamp(32px, 5vw, 80px); margin-top: clamp(40px, 5vw, 84px); }
.lv-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5.5vw, 96px); align-items: center; }
.lv-row.flip .lv-fig { order: 2; }
.lv-fig { margin: 0; min-height: clamp(380px, 40vw, 560px); padding: clamp(26px, 3vw, 48px); border-radius: clamp(28px, 3vw, 44px); background: var(--tone); display: grid; place-items: center; overflow: hidden; }
.lv-phone { width: min(60%, 290px); height: auto; border-radius: 12.8% / 6%; box-shadow: 0 28px 50px rgba(0, 0, 0, .28); transform: rotate(-3deg); } /* not filter: drop-shadow — Safari tints a box around it */
.lv-row.flip .lv-phone { transform: rotate(3deg); }
.lv-phone[src*="/assets/live/"] { border: 9px solid #121214; border-radius: 38px; background: #fff; } /* the live mockups are bare screens */
.lv-wide { width: 100%; height: auto; border-radius: 20px; background: #fff; box-shadow: 0 26px 60px rgba(0, 0, 0, .22); }
.lv-n { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: var(--tone); color: var(--on); font-size: 20px; font-weight: 600; }
.lv-txt h3 { font-size: clamp(26px, 2.6vw, 42px); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; margin-top: 18px; text-wrap: balance; }
.lv-txt > p { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; margin-top: 16px; opacity: .8; }
.lv-txt .ctas { margin-top: 26px; }
.lv-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.lv-list li { position: relative; padding-left: 32px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.45; }
.lv-list li::before { content: ""; position: absolute; left: 0; top: .28em; width: 20px; height: 20px; border-radius: 7px; background: var(--tone, var(--orange)); }
.lv-row .lv-txt { --tone: inherit; }
.lv-row:has(.lv-n.purple) .lv-list li::before { background: var(--purple); } .lv-row:has(.lv-n.pink) .lv-list li::before { background: var(--pink); }
.lv-row:has(.lv-n.orange) .lv-list li::before { background: var(--orange); } .lv-row:has(.lv-n.yellow) .lv-list li::before { background: var(--yellow); }
.lv-row:has(.lv-n.green) .lv-list li::before { background: var(--green); }

/* advertisers: real checkout crops in a desktop browser window */
.lv-row:has(.lv-desk) { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.lv-row.flip:has(.lv-desk) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.lv-fig:has(.lv-desk) { min-height: 0; padding: clamp(22px, 3vw, 48px) clamp(18px, 2.4vw, 40px); }
.lv-fig .lv-desk { width: 100%; margin: 0; transform: rotate(-1.2deg); box-shadow: 0 30px 60px rgba(0, 0, 0, .25); }
.lv-row.flip .lv-fig .lv-desk { transform: rotate(1.2deg); }
.lv-desk img { background: #f5f3ef; }
/* checkout cards: flat (no tilt — rotation softens the text), shadow is part of the image */
.lv-row:has(.lv-ui-card) { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.lv-row.flip:has(.lv-ui-card) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.lv-fig:has(.lv-ui-card) { min-height: 0; padding: clamp(10px, 1.6vw, 26px); }
.lv-ui-card { display: block; width: 100%; height: auto; }

/* brief types + creator kinds (the live pages' tooltips, shown as a list) */
.lv-briefs, .lv-kinds { display: grid; gap: 8px; margin-top: 18px; }
.lv-briefs > div, .lv-kinds > div { padding: 12px 16px; border-radius: 16px; background: #f4f4f7; }
.lv-briefs dt, .lv-kinds dt { font-size: 16px; font-weight: 600; }
.lv-briefs dd em { display: inline-block; white-space: nowrap; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .03em; line-height: 1.5; padding: 2px 8px; margin-left: 6px; border-radius: 999px; background: var(--orange); color: #fff; vertical-align: 1px; } /* one pill, never split across lines */
.lv-briefs dd, .lv-kinds dd { font-size: 14px; line-height: 1.45; opacity: .75; margin-top: 4px; }
.lv-briefs dd small { display: block; margin-top: 6px; font-size: 12.5px; font-style: italic; }

/* small phone mockups for the targeting steps (the live page draws these in HTML too) */
.lv-ui { width: min(64%, 300px); padding: 9px; border-radius: 40px; background: #121214; box-shadow: 0 28px 50px rgba(0, 0, 0, .28); transform: rotate(3deg); }
.lv-row:not(.flip) .lv-ui { transform: rotate(-3deg); }
.lv-ui-in { display: flex; flex-direction: column; gap: 10px; padding: 36px 18px 30px; border-radius: 32px; background: #efece6; color: var(--ink); font-size: 14px; }
.lv-ui b { font-size: 13px; font-weight: 600; margin-top: 6px; }
.lv-sel { padding: 11px 13px; border-radius: 12px; background: #fff; color: #9a9aa3; }
.lv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lv-chips i { font-style: normal; font-size: 13px; padding: 7px 12px; border-radius: 999px; background: #fff; }
.lv-chips i.on { background: var(--purple); color: #fff; }

/* Here's what we've done so far */
.lv-stats { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 4vw, 56px); }
.lv-stats li { min-height: clamp(180px, 16vw, 240px); padding: clamp(22px, 2.4vw, 34px); border-radius: 30px; background: var(--tone); color: var(--on); display: flex; flex-direction: column; justify-content: space-between; }
.lv-stats b { font-size: clamp(46px, 5.2vw, 84px); font-weight: 600; letter-spacing: -.055em; line-height: .9; }
.lv-stats span { font-size: 18px; font-weight: 600; }

/* How it works */
.lv-sub { max-width: 30em; }
.lv-cards { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 4vw, 52px); }
.lv-cards li { min-height: clamp(200px, 18vw, 260px); padding: clamp(26px, 3vw, 44px); border-radius: 32px; background: var(--tone); color: var(--on); }
.lv-cards h3 { font-size: clamp(26px, 2.6vw, 42px); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.lv-cards p { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.45; margin-top: 12px; max-width: 24em; opacity: .9; }
.lv-works .ctas { margin-top: 32px; }

/* Dashboard: tabs advance on their own (progress line under the active one); panels are live HTML */
.lv-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: max-content; max-width: 100%; margin: 28px auto 0; padding: 5px; border-radius: 999px; background: #fff; box-shadow: 0 6px 18px rgba(20, 20, 60, .06); }
.lv-tabs button { position: relative; overflow: hidden; border: 0; background: transparent; color: var(--ink); font-size: 15px; font-weight: 500; padding: 12px 18px; border-radius: 999px; }
.lv-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.lv-tabs button i { position: absolute; left: 18px; right: 18px; bottom: 6px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, .25); opacity: 0; }
.lv-tabs button i::after { content: ""; position: absolute; inset: 0; width: var(--prog, 0%); background: var(--yellow); border-radius: 1px; }
.lv-tabs.auto button[aria-selected="true"] i { opacity: 1; }
.lv-panels { max-width: 1120px; margin: 28px auto 0; }
.dpanel { background: #fff; border-radius: 32px; padding: clamp(22px, 3vw, 44px); box-shadow: 0 22px 60px rgba(20, 20, 60, .1); animation: dIn .6s cubic-bezier(.2, .8, .2, 1); }
.dpanel[hidden] { display: none; }
/* all tabs in one cell: the tallest panel sets the height, so switching never moves the page (QA 09-28) */
.lv-panels.stack { display: grid; }
.lv-panels.stack > .dpanel { grid-area: 1 / 1; transition: opacity .35s, visibility .35s; }
.lv-panels.stack > .dpanel:not(.on) { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes dIn { from { opacity: 0; transform: translateY(18px) scale(.985); } }
.dh3 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.035em; }
.dsub { font-size: 14px; color: rgba(27, 27, 31, .55); margin-top: 4px; }
.dtiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.dt { display: flex; flex-direction: column; gap: 8px; min-height: 120px; padding: 16px; border-radius: 18px; background: #f2f2f4; }
.dt span { font-size: 13px; line-height: 1.25; color: rgba(27, 27, 31, .7); }
.dt b { font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.dchart { margin-top: 28px; }
.dh4 { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.dchart svg { display: block; width: 100%; height: clamp(150px, 18vw, 220px); margin-top: 12px; overflow: visible; }
.dchart line { stroke: #e3e3e8; stroke-width: 2; }
.dl { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; vector-effect: non-scaling-stroke; }
.dl1 { stroke: #f0574d; } .dl2 { stroke: var(--yellow); }
.dpanel.play .dl { transition: stroke-dashoffset 2s cubic-bezier(.4, 0, .2, 1); stroke-dashoffset: 0; } .dpanel.play .dl2 { transition-delay: .35s; }
.dlegend { display: flex; gap: 18px; justify-content: center; font-size: 13px; font-weight: 600; margin-top: 12px; }
.dlegend span::before { content: ""; display: inline-block; width: 18px; height: 3px; border-radius: 2px; margin-right: 7px; vertical-align: 3px; background: currentColor; }
.dlegend .c1 { color: #f0574d; } .dlegend .c2 { color: #d9a800; }
.dmap { margin-top: 20px; overflow: hidden; clip-path: inset(0 100% 0 0); }
.dmap img { display: block; width: 100%; height: auto; }
.dpanel.play .dmap { transition: clip-path 1.6s cubic-bezier(.6, 0, .2, 1); clip-path: inset(0 0 0 0); }
.dscale { display: flex; align-items: center; gap: 10px; justify-content: flex-end; font-size: 12.5px; color: rgba(27, 27, 31, .6); margin-top: 10px; }
.dscale i { width: 120px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #ffd6b4, #ff7f1e 55%, #d64e04); } /* the map's orange views scale */
.dmap.cv { clip-path: none !important; } .dmap.cv img { display: none; } .dmap canvas { display: block; width: 100%; height: auto; }
.dtable { overflow-x: auto; }
.dr { display: grid; grid-template-columns: 1.5fr 1fr repeat(5, minmax(0, .8fr)); gap: 10px; align-items: center; min-width: 720px; padding: 12px 6px; border-bottom: 1px solid #f0f0f3; font-size: 15px; font-variant-numeric: tabular-nums; }
.dr > span:nth-child(n+3) { text-align: right; }
.dhead { font-size: 12.5px; font-weight: 600; color: rgba(27, 27, 31, .55); padding-top: 0; }
.dtotal { font-weight: 600; background: #f6f6f8; border-radius: 12px; border-bottom: 0; }
.dr em { display: inline-block; width: 22px; font-style: normal; font-weight: 600; color: rgba(27, 27, 31, .45); }
.dblur { display: inline-block; width: 110px; height: 14px; border-radius: 7px; vertical-align: -1px; background: #d9d9e0; filter: blur(2.5px); } /* handles hidden: no creator names */
.dlink { color: var(--purple); font-weight: 500; }
.anim .dpanel .dr:not(.dhead):not(.dtotal) { opacity: 0; transform: translateX(-16px); }
.dpanel.play .dr:not(.dhead):not(.dtotal) { opacity: 1; transform: none; transition: opacity .45s ease var(--d, 0s), transform .6s cubic-bezier(.2, .8, .2, 1) var(--d, 0s); }
@media (max-width: 900px) { .dtiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .lv-tabs { width: 100%; border-radius: 22px; } .lv-tabs button { flex: 1 1 100%; }
  .dtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dt { min-height: 96px; }
  .dpanel { border-radius: 24px; }
  .dr { min-width: 0; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); font-size: 14px; gap: 8px; }
  .dr > span:nth-child(2), .dr > span:nth-child(6), .dr > span:nth-child(7) { display: none; } /* phones: creator · followers · views · likes */
  .dblur { width: 64px; }
}
@media (prefers-reduced-motion: reduce) { .dl { stroke-dashoffset: 0; } .dmap { clip-path: none; } .dpanel .dr { opacity: 1 !important; transform: none !important; } }

/* During your campaign, our team is here for you */
.sec.pink { background: var(--pink); color: var(--ink); }
.lv-team-in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(18px, 2vw, 28px); padding-block: clamp(20px, 4vw, 60px); }
.lv-team-t { max-width: 26em; font-size: clamp(20px, 2vw, 30px); font-weight: 500; letter-spacing: -.02em; line-height: 1.3; text-wrap: balance; }
.lv-team-t a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }

@media (max-width: 900px) {
  .lv-row, .lv-row:has(.lv-desk), .lv-row.flip:has(.lv-desk), .lv-row:has(.lv-ui-card), .lv-row.flip:has(.lv-ui-card) { grid-template-columns: minmax(0, 1fr); }
  .lv-row.flip .lv-fig { order: 0; }
  .lv-fig { min-height: 0; }
  .lv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lv-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .lv-tabs { width: 100%; border-radius: 22px; }
  .lv-tabs button { flex: 1 1 100%; }
  .lv-stats li { min-height: 150px; border-radius: 24px; }
}

/* ---------- "How to start": live mini controls (build/live_pages.py MC_*) ---------- */
.lv-fig:has(.mc) { min-height: clamp(360px, 36vw, 520px); padding: clamp(28px, 3.4vw, 56px); place-items: center stretch; }
.lv-row:has(.mc) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.lv-row.flip:has(.mc) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.mc { --lab: rgba(27, 27, 31, .6); width: 100%; min-width: 0; max-width: 640px; margin: 0 auto; color: var(--ink); }
.lv-fig:has(.mc) { grid-template-columns: minmax(0, 1fr); } /* the typed sound link must not widen the card */
.lv-fig.orange .mc, .lv-fig.purple .mc { --lab: rgba(255, 255, 255, .82); }
.mc-l { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lab); margin: 22px 0 10px; }
.mc > .mc-l:first-child { margin-top: 0; }
.mc-row { display: flex; flex-wrap: wrap; gap: 10px; }
.mc-pill { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 20px; border-radius: 99px; background: #fff; font-size: clamp(15px, 1.25vw, 18px); font-weight: 500; white-space: nowrap;
  transition: background-color .35s ease, color .35s ease, transform .35s cubic-bezier(.2, 1.5, .4, 1); }
.mc-pill svg { width: 20px; height: 20px; flex: none; }
.mc-pill.on, .mc-tile.on, .mc-size.on, .mc-brief.on { background: var(--ink); color: #fff; }
.mc-pill.on { transform: scale(1.04); }
.mc-tile { flex: 1 1 0; display: grid; place-items: center; height: clamp(64px, 6vw, 84px); min-width: 0; border-radius: 20px; background: #fff; font-size: clamp(20px, 2vw, 30px); font-weight: 600; letter-spacing: -.04em;
  transition: background-color .4s ease, color .4s ease, transform .45s cubic-bezier(.2, 1.5, .4, 1); }
.mc-tile.on { transform: translateY(-4px) scale(1.04); box-shadow: 0 12px 24px rgba(0, 0, 0, .18); }
/* location flags pop in one by one */
.mc-flag img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; margin-left: -8px; }
.mc-more { background: rgba(255, 255, 255, .5); }
.anim .mc-flag { opacity: 0; transform: translateY(14px) scale(.85); }
.mc.in .mc-flag { animation: mcPop .55s cubic-bezier(.2, 1.5, .4, 1) var(--d, 0s) forwards; }
@keyframes mcPop { to { opacity: 1; transform: none; } }
/* creator size */
.mc-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mc-size { position: relative; display: flex; flex-direction: column; gap: 6px; justify-content: flex-end; min-height: clamp(110px, 10vw, 150px); padding: 18px; border-radius: 22px; background: #fff; transition: background-color .4s, color .4s; }
.mc-size b { font-size: clamp(17px, 1.5vw, 22px); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.mc-size small { font-size: 13.5px; opacity: .65; line-height: 1.3; }
.mc-size i { position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); color: var(--ink); display: grid; place-items: center; opacity: 0; transform: scale(.5); transition: opacity .3s, transform .4s cubic-bezier(.2, 1.6, .4, 1); }
.mc-size i svg { width: 15px; height: 15px; }
.mc-size.on i { opacity: 1; transform: none; }
.mc-range { color: #fff; }
.mc-track { position: relative; display: block; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .25); margin: 14px 12px 0; }
.mc-track i { position: absolute; top: 0; bottom: 0; left: var(--a, 12%); right: calc(100% - var(--b, 58%)); border-radius: 5px; background: #fff; transition: left 1.2s cubic-bezier(.4, 0, .2, 1), right 1.2s cubic-bezier(.4, 0, .2, 1); }
.mc-track b { position: absolute; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--yellow); box-shadow: 0 4px 12px rgba(0, 0, 0, .25); transition: left 1.2s cubic-bezier(.4, 0, .2, 1); }
.mc-track .k1 { left: var(--a, 12%); } .mc-track .k2 { left: var(--b, 58%); }
.mc-ends { display: flex; justify-content: space-between; font-size: 14px; font-weight: 500; opacity: .85; margin-top: 16px; }
/* sound link + brief tiles */
.mc-field { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 20px; border-radius: 18px; background: #fff; font-size: clamp(15px, 1.3vw, 18px); font-weight: 500; }
.mc-field > svg { width: 22px; height: 22px; flex: none; }
.mc-type { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
.mc-type::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -3px; background: var(--ink); animation: mcCaret 1s steps(1) infinite; }
@keyframes mcCaret { 50% { opacity: 0; } }
.mc-ok { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: 14px; font-weight: 600; color: #0b6b3a; background: rgba(91, 254, 158, .35); padding: 6px 12px; border-radius: 99px; opacity: 0; transform: scale(.8); transition: opacity .3s, transform .4s cubic-bezier(.2, 1.6, .4, 1); }
.mc-ok svg { width: 14px; height: 14px; }
.mc-field.found .mc-ok { opacity: 1; transform: none; }
.mc-briefs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mc-brief { display: flex; flex-direction: column; gap: 10px; justify-content: space-between; min-height: 96px; padding: 14px; border-radius: 18px; background: #fff; transition: background-color .35s, color .35s, transform .4s cubic-bezier(.2, 1.5, .4, 1); }
.mc-brief svg { width: 24px; height: 24px; }
.mc-brief b { font-size: clamp(13px, 1.1vw, 15px); font-weight: 600; line-height: 1.2; }
.mc-brief.on { transform: scale(1.05); }
/* our team checks each video */
.mc-videos { display: flex; flex-direction: column; gap: 10px; }
.mc-video { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 20px; background: #fff; }
.mc-thumb { flex: none; display: grid; place-items: center; width: 52px; height: 68px; border-radius: 12px; color: #fff; font-size: 16px; }
.mc-thumb.t0 { background: var(--pink); } .mc-thumb.t1 { background: var(--purple); } .mc-thumb.t2 { background: var(--orange); }
.mc-vt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mc-vt b { font-size: clamp(15px, 1.3vw, 18px); font-weight: 600; } .mc-vt small { font-size: 13.5px; opacity: .6; }
.mc-status { position: relative; flex: none; width: 118px; height: 38px; }
.mc-status > span { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 99px; font-size: 14px; font-weight: 600; transition: opacity .35s, transform .45s cubic-bezier(.2, 1.6, .4, 1); }
.s-wait { background: #f1f1f4; color: rgba(27, 27, 31, .6); }
.s-ok { background: var(--ink); color: #fff; opacity: 0; transform: scale(.7); }
.s-ok svg { width: 15px; height: 15px; color: var(--green); }
.mc-video.done .s-wait { opacity: 0; } .mc-video.done .s-ok { opacity: 1; transform: none; }
.mc-bars { display: flex; align-items: flex-end; gap: 6px; height: 90px; padding: 14px 16px 0; border-radius: 20px; background: #fff; }
.mc-bars i { flex: 1; height: 6%; border-radius: 6px 6px 2px 2px; background: var(--ink); transition: height 1s cubic-bezier(.2, .8, .2, 1) var(--d, 0s); }
.mc.in .mc-bars i { height: var(--h); }
@media (max-width: 900px) {
  .lv-row:has(.mc), .lv-row.flip:has(.mc) { grid-template-columns: minmax(0, 1fr); }
  .lv-fig:has(.mc) { min-height: 0; padding: 24px 18px; }
}
@media (max-width: 560px) {
  .mc-tile { flex: 1 1 calc(50% - 5px); }
  .mc-sizes { grid-template-columns: minmax(0, 1fr); } .mc-size { min-height: 0; }
  .mc-briefs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mc-brief { min-height: 78px; }
  .mc-pill { height: 44px; padding: 0 16px; }
  .mc-status { width: 104px; }
  .mc-field { padding: 0 14px; gap: 10px; } .mc-ok { font-size: 0; gap: 0; padding: 7px; } /* phones: just the tick */
}
@media (prefers-reduced-motion: reduce) { .mc-flag { opacity: 1 !important; transform: none !important; } .mc-bars i { height: var(--h); } .mc-video .s-ok { opacity: 1; transform: none; } .mc-video .s-wait { opacity: 0; } }

/* /creators "Get Started" mini controls */
.lv-fig:has(.mc-phone) { place-items: center; }
.mc-phone { width: min(62%, 290px); margin: 0 auto; }
.mc-app { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px; border-radius: 24px; background: #fff; }
.mc-icon { display: grid; place-items: center; width: clamp(64px, 6vw, 84px); aspect-ratio: 1; border-radius: 22%; background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); } /* the real iOS app icon (sound-me-mobile AppIcon 1024) */
.mc-icon img { display: block; width: 100%; height: 100%; }
.mc-app-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mc-app-t b { font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; letter-spacing: -.02em; } .mc-app-t small { font-size: 14px; opacity: .65; }
.mc-stars { font-size: 13px; color: #f5a623; letter-spacing: 1px; margin-top: 4px; } .mc-stars em { font-style: normal; color: rgba(27, 27, 31, .55); letter-spacing: 0; }
.mc-get { position: relative; display: grid; width: 86px; height: 40px; }
.mc-get > span { grid-area: 1 / 1; display: grid; place-items: center; border-radius: 99px; background: #eef0ff; color: var(--purple); font-size: 15px; font-weight: 700; opacity: 0; transform: scale(.8); transition: opacity .25s, transform .35s cubic-bezier(.2, 1.6, .4, 1); }
.mc-get > span.on { opacity: 1; transform: none; }
.mc-get > span:last-child { background: var(--purple); color: #fff; }
.mc-load { background: transparent !important; } .mc-load i { width: 32px; height: 32px; border-radius: 50%; border: 3px solid #e3e6ff; border-top-color: var(--purple); animation: mcSpin .8s linear infinite; }
@keyframes mcSpin { to { transform: rotate(360deg); } }
.mc-checks { display: flex; flex-direction: column; gap: 10px; }
.mc-check { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: #fff; font-size: clamp(15px, 1.25vw, 18px); font-weight: 500; }
.mc-check i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 2px #e4e4ea; color: transparent; transition: background-color .3s, color .3s, box-shadow .3s, transform .4s cubic-bezier(.2, 1.7, .4, 1); }
.mc-check i svg { width: 16px; height: 16px; }
.mc-check.done i { background: var(--ink); box-shadow: none; color: var(--green); transform: scale(1.1); }
.mc-post { margin-top: 16px; }
.mc-wallet { padding: 22px; border-radius: 24px; background: #fff; }
.mc-wl { font-size: 14px; font-weight: 600; opacity: .6; }
.mc-wallet > b { display: block; font-size: clamp(44px, 4.6vw, 64px); font-weight: 600; letter-spacing: -.05em; line-height: 1; margin-top: 8px; font-variant-numeric: tabular-nums; }
.mc-wrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.mc-wrow > span { padding: 12px 14px; border-radius: 16px; background: #f2f2f4; display: flex; flex-direction: column; gap: 2px; }
.mc-wrow small { font-size: 13px; opacity: .6; } .mc-wrow b { font-size: 22px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mc-paid { margin-top: 18px; }
.mc-btn { position: relative; display: grid; height: 56px; border-radius: 99px; background: var(--purple); color: #fff; font-size: 17px; font-weight: 600; overflow: hidden; transition: background-color .35s; }
.mc-btn > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: opacity .3s, transform .45s cubic-bezier(.2, 1.4, .4, 1); }
.mc-btn svg { width: 18px; height: 18px; color: var(--green); }
.mc-btn .b2 { opacity: 0; transform: translateY(100%); }
.mc-paid > .done { background: var(--ink); } .mc-paid > .done .b1 { opacity: 0; transform: translateY(-100%); } .mc-paid > .done .b2 { opacity: 1; transform: none; }
.mc-note { font-size: 14px; font-weight: 500; color: var(--lab); margin-top: 14px; }
@media (max-width: 560px) { .mc-app { grid-template-columns: auto minmax(0, 1fr); } .mc-get { grid-column: 1 / -1; width: 100%; } .mc-phone { width: min(78%, 280px); } }

.lv-more { margin-top: clamp(28px, 3vw, 44px); text-align: center; font-size: 15px; opacity: .8; }
.lv-more a { text-decoration: underline; text-underline-offset: 3px; }