/* ===========================================================================
   Use-case landing pages — only what the homepage RC does not already ship.
   Tokens, .wrap, .blk, .card, .btn*, .chip, .eyebrow, .lead, .h2, the header
   and the footer all come from index.html's critical CSS + styles.css. What is
   here is the page-specific furniture ported from the design artboard, mapped
   onto the RC's token names (artboard --tint = RC --peach, artboard --peach =
   RC --focus-border, artboard --ok/--ok-bg = RC --success-fg/--success-bg).
   =========================================================================== */

:root{
  --orange-ink:#B23A12;      /* text-on-tint orange, darker than --orange for contrast */
  --orange-strong:#D14212;   /* pressed state of a primary action */
  --uc-green:#10B981;
  --shadow-lg:0 22px 44px -20px rgba(35,38,42,.38),0 3px 8px rgba(35,38,42,.08);
  --rv-ease:cubic-bezier(0,0,.58,1);
}

/* ---------------------------------------------------------------------------
   Entrance reveals (the artboard's .rv system, Attio recipe).
   The hidden start state hangs off `html.js`, which the page script adds only
   when it is going to animate — so the raw HTML, a JS-less browser and
   prefers-reduced-motion all render the finished state.
   --------------------------------------------------------------------------- */
.rv{transition:opacity 600ms var(--rv-ease),transform 600ms var(--rv-ease),filter 600ms var(--rv-ease);transition-delay:calc(var(--i,0)*68ms)}
.js .rv{opacity:0;transform:translateY(16px);filter:blur(2.5px)}
.js .rv.k{transform:translateY(8px) scale(.94);filter:blur(2px);transition-duration:460ms}
.js .rv.is-in{opacity:1;transform:none;filter:none}

/* ---------------------------------------------------------------------------
   Shared page furniture
   --------------------------------------------------------------------------- */
/* .uc-head only adds the rhythm and the centred variant; the flex column, the gap
   and the measure come from the RC's own .sec-head. */
.uc-head{margin-bottom:40px}
.uc-head.mid{margin-inline:auto;text-align:center;align-items:center}
.uc-body{font-size:15px;line-height:24px;color:var(--ink-600)}
.uc-h3{font-size:18px;line-height:26px;font-weight:600;margin:0}
.uc-lbl{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500)}
.uc-code{font-family:var(--mono);font-size:12px;background:var(--orange-100);color:var(--orange-ink);padding:1px 7px;border-radius:6px}

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */
.uc-hero{padding-top:56px}
/* The left column carries the H1, which must not need a fourth line at 1280 or
   1440. Measured with the longest one ("Email popups that grow your list, designed
   by an AI agent"): 1.2fr/1fr with a 44px gap holds every page to three lines down
   to 1024px. */
.uc-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:44px;align-items:center}
.uc-hero h1{margin-top:16px;text-wrap:balance}
.uc-hero .lead{margin-top:20px;max-width:54ch}

/* the domain field — the admin's input style, shared by the hero and the closing CTA */
.uc-dom{margin-top:32px;max-width:520px}
.uc-domrow{display:flex;gap:8px;flex-wrap:wrap}
.uc-fld{flex:1 1 220px;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border-radius:var(--r-btn);background:var(--white);border:1px solid var(--gray-200);box-shadow:var(--shadow);transition:border-color 140ms ease,box-shadow 140ms ease}
.uc-fld:hover{border-color:var(--gray-300)}
.uc-fld:focus-within{border-color:var(--focus-border);box-shadow:0 0 0 2px var(--focus-ring)}
.uc-fld svg{flex-shrink:0;color:var(--ink-500)}
.uc-fld input{flex:1;min-width:0;border:0;background:transparent;outline:0;font:inherit;font-size:16px;color:var(--ink)}
.uc-fld input::placeholder{color:var(--ink-500)}
/* the field box carries the focus ring (:focus-within above); the page-wide :focus-visible ring on the bare input drew a second, inner one */
.uc-fld input:focus-visible{outline:none;box-shadow:none;border-radius:0}
.uc-err{font-size:13px;color:var(--orange-ink);padding-top:6px}
.uc-promise{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;font-size:14px;color:var(--ink-600)}
.uc-promise span{display:inline-flex;align-items:center;gap:6px}
.uc-promise svg{color:var(--orange)}

/* the fan of phones. One overlay button is the whole control: click anywhere on
   the stack, or Tab to it and press Enter, and the deck deals the next card. */
/* The deck is inset from the right of its column: the RC container is wider than the
   artboard's, so without it the outermost card runs past the viewport edge and
   `overflow-x: clip` chops its rounded corner. The narrower column the wider H1 leaves
   needs a deeper inset. Measured (rotated bounding box of the outermost card): it ends
   at 1420/1440, 1269/1280, 1066/1100 and 991/1024. */
.uc-fan{position:relative;height:580px}
.uc-fan-deck{position:absolute;inset:0 9% 0 2%}
.uc-phone{position:absolute;left:50%;top:50%;width:min(236px,46%);display:block;overflow:hidden;border-radius:26px;border:5px solid var(--ink);background:var(--ink);box-shadow:var(--shadow-lg);aspect-ratio:1/2;transition:transform 900ms var(--ease)}
.uc-phone img{display:block;width:100%;height:100%;object-fit:cover}
.uc-fan-next{position:absolute;inset:0;z-index:6;width:100%;background:none;border:0;cursor:pointer;border-radius:var(--r-card)}

/* ---------------------------------------------------------------------------
   How it works — three cards, each with a looping mini demo
   --------------------------------------------------------------------------- */
.uc-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.uc-step{padding:28px;display:flex;flex-direction:column;gap:10px}
.uc-n{font-family:var(--mono);font-size:12px;color:var(--orange-ink)}
.uc-mini{margin-top:10px;border:1px solid var(--gray-200);border-radius:var(--r-input);background:var(--admin-page);padding:14px;height:232px;overflow:hidden;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:20px}

/* step 1 — the admin composer typing a domain, then the thread's own step rows */
.uc-adm{display:flex;gap:8px;align-items:center}
.uc-adm .uc-in{flex:1;min-width:0;height:40px;display:flex;align-items:center;padding:0 12px;background:var(--white);border:1px solid var(--gray-200);border-radius:9px;font-size:14px;white-space:nowrap;overflow:hidden}
.uc-adm .uc-in.foc{border-color:var(--focus-border);box-shadow:0 0 0 2px var(--focus-ring)}
.uc-caret{display:inline-block;width:1.5px;height:16px;background:var(--ink);margin-left:1px;animation:ucBlink 1s steps(1) infinite}
@keyframes ucBlink{50%{opacity:0}}
.uc-send{width:32px;height:32px;flex-shrink:0;border-radius:9px;background:var(--gray-200);color:#fff;display:flex;align-items:center;justify-content:center;transition:background 160ms ease,transform 160ms ease}
.uc-send.on{background:var(--orange)}
.uc-send.hit{transform:scale(.88);background:var(--orange-strong)}
.uc-tls{display:flex;flex-direction:column;gap:8px}
.uc-tl{display:flex;align-items:center;gap:8px;font-weight:500;animation:ucTlIn 360ms var(--rv-ease) both}
@keyframes ucTlIn{from{opacity:0;transform:translateY(6px)}}
.uc-tl em{font-style:normal;font-weight:400;font-size:12px;color:var(--ink-400);margin-left:auto;white-space:nowrap}
.uc-tl .uc-ic{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--ink-400)}
.uc-tl .uc-ok{color:var(--uc-green);margin-left:auto;display:flex}
.uc-spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--focus-ring);border-top-color:var(--orange);animation:ucSpin 700ms linear infinite}
@keyframes ucSpin{to{transform:rotate(360deg)}}
.uc-shim{background:linear-gradient(90deg,var(--ink) 35%,var(--ink-400) 50%,var(--ink) 65%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ucShim 1.6s linear infinite}
@keyframes ucShim{from{background-position:120% 0}to{background-position:-100% 0}}

/* step 2 — the selection ring hopping between the four concepts */
.uc-four{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:auto 0}
.uc-four span{position:relative;display:block;border-radius:8px}
.uc-four img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:8px;border:1px solid var(--gray-200)}
.uc-four span::after{content:"";position:absolute;inset:-3px;border-radius:10px;border:2px solid var(--orange);opacity:0;transform:scale(1.04);transition:opacity 260ms ease,transform 260ms var(--ease)}
.uc-four span.sel::after{opacity:1;transform:none}

/* step 3 / feature card 1 — prize rows whose odds bars swing, then settle */
.uc-prs{display:flex;flex-direction:column;gap:8px;margin:auto 0}
.uc-pr{display:grid;grid-template-columns:1fr auto 72px;gap:10px;align-items:center;background:var(--white);border:1px solid var(--gray-200);border-radius:9px;padding:9px 12px;font-size:14px}
.uc-wt{height:6px;border-radius:3px;background:var(--gray-200);overflow:hidden}
.uc-wt i{display:block;height:100%;width:var(--w);border-radius:3px;background:var(--orange)}
.is-in .uc-wt i,.uc-running .uc-wt i{animation:ucOdds 9s var(--rv-ease) infinite;animation-delay:calc(var(--i,0)*120ms)}
@keyframes ucOdds{0%{width:0}6%{width:calc(var(--w) + 26%)}11%{width:calc(var(--w) - 16%)}16%{width:calc(var(--w) + 11%)}21%{width:calc(var(--w) - 6%)}26%,100%{width:var(--w)}}

/* ---------------------------------------------------------------------------
   Library grid
   --------------------------------------------------------------------------- */
.uc-lib{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.uc-lib a{display:block;border-radius:var(--r-input);overflow:hidden;border:1px solid var(--gray-200);background:var(--white);box-shadow:var(--shadow)}
.uc-lib a img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform 500ms var(--ease)}
.uc-lib a:hover img{transform:scale(1.03)}
/* hover / focus: the homepage gallery's "Preview" pill (.shot-cta in styles.css); a click opens the library lightbox */
.uc-lib a{position:relative}
.uc-lib a::after{content:"";position:absolute;inset:0;background:rgba(26,28,31,.38);opacity:0;transition:opacity 160ms ease;pointer-events:none}
.uc-lib a:hover::after,.uc-lib a:focus-visible::after{opacity:1}
.uc-lib a:hover .shot-cta,.uc-lib a:focus-visible .shot-cta{opacity:1;transform:translate(-50%,-50%)}
.uc-lib a:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.uc-more{display:flex;justify-content:center;margin-top:36px}

/* ---------------------------------------------------------------------------
   What the agent sets up — three illustrated cards
   --------------------------------------------------------------------------- */
.uc-feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.uc-feat{overflow:hidden;display:flex;flex-direction:column}
.uc-ill{background:var(--admin-page);border-bottom:1px solid var(--gray-200);padding:22px;height:280px;display:flex;flex-direction:column;justify-content:center;gap:10px;font-size:14px;line-height:20px}
.uc-ftxt{padding:24px 28px 28px;display:flex;flex-direction:column;gap:8px}
.uc-chips{display:flex;flex-wrap:wrap;gap:6px}
.uc-chips .chip{min-height:32px;padding:4px 12px;font-size:13px}
.uc-chips .chip.on{background:var(--ink);border-color:var(--ink);color:var(--white)}
.uc-ab{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.uc-abv{display:flex;flex-direction:column;gap:6px;background:var(--white);border:1px solid var(--gray-200);border-radius:12px;padding:8px}
.uc-abv.win{border-color:var(--orange);box-shadow:0 0 0 2px var(--focus-ring)}
.uc-abv img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:6px}
.uc-abv .uc-row{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.uc-abv b{font-size:22px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.uc-bar2{height:6px;border-radius:3px;background:var(--gray-200);overflow:hidden}
/* the bar sits at its final width by default — only an animating page starts it at
   zero, so a JS-less render never leaves an empty track behind */
.uc-bar2 i{display:block;height:100%;width:var(--w);background:var(--ink-400);border-radius:3px;transition:width 1100ms var(--ease) 300ms}
.uc-abv.win .uc-bar2 i{background:var(--orange)}
.js .uc-bar2 i{width:0}
.js .is-in .uc-bar2 i{width:var(--w)}
.uc-winchip{font-size:11px;font-weight:600;padding:1px 8px;border-radius:var(--r-pill);background:var(--success-bg);color:var(--success-fg)}
.uc-uplift{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:var(--ink-600)}
.uc-uplift b{font-size:15px;color:var(--success-fg)}

/* ---------------------------------------------------------------------------
   Prompts
   --------------------------------------------------------------------------- */
.uc-prompts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.uc-chat{padding:20px;display:flex;flex-direction:column;gap:14px;background:var(--white);color:var(--ink)}
.uc-chat:hover{color:var(--ink)}
.uc-who{font-size:12px;color:var(--ink-500);text-align:right}
.uc-bub{align-self:flex-end;max-width:92%;background:var(--peach);border-radius:16px 16px 6px 16px;padding:10px 16px;font-size:15px;line-height:23px}
.uc-agent{font-size:15px;line-height:24px;color:var(--ink-600);display:flex;align-items:center;gap:8px}
.uc-go{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--gray-300);border-radius:12px;padding:6px 6px 6px 14px;font-size:14px;font-weight:500;transition:border-color 140ms ease,box-shadow 140ms ease}
.uc-chat:hover .uc-go{border-color:var(--focus-border);box-shadow:0 0 0 2px var(--focus-ring)}
.uc-go .uc-send{background:var(--orange)}
.uc-works{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:center;margin-top:32px;color:var(--ink-600)}
.uc-works a{display:inline-flex;align-items:center;gap:6px;font-weight:500;color:var(--ink)}
.uc-works a:hover{color:var(--orange-ink)}
.uc-works img{width:18px;height:18px}

/* ---------------------------------------------------------------------------
   Compare — the table, and the live demo that sits above it
   --------------------------------------------------------------------------- */
.uc-tw{overflow-x:auto}
.uc-table{border-collapse:separate;border-spacing:0;width:100%;min-width:640px;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden}
.uc-table td{text-align:left;padding:14px 20px;border-bottom:1px solid var(--gray-200);vertical-align:top;width:40%}
.uc-table td:first-child{width:20%;color:var(--ink-600);font-weight:500}
.uc-table tr:last-child td{border-bottom:0}
/* the two columns are named once, in the same words as the demo's tabs */
.uc-table th{width:40%;text-align:left;padding:14px 20px;border-bottom:1px solid var(--gray-200);background:var(--admin-page);font-weight:600;font-size:14px;color:var(--ink-600)}
.uc-table thead td{background:var(--admin-page);border-bottom:1px solid var(--gray-200)}
.uc-res{font-size:14px;min-height:24px;color:var(--ink-600)}
.uc-res b{color:var(--ink)}

/* ---------------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------------- */
.uc-faq{max-width:820px;margin-inline:auto}
.uc-faq details{border-bottom:1px solid var(--gray-200);padding-block:18px}
.uc-faq summary{font-weight:600;font-size:17px;cursor:pointer}
.uc-faq details p{margin-top:8px;color:var(--ink-600);max-width:68ch}

/* ---------------------------------------------------------------------------
   More use cases — pen-sketch cards
   --------------------------------------------------------------------------- */
.uc-sib{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
/* the reveal stagger comes from the position in the row, not from the markup: which
   five of the six cards a page shows depends on which page it is */
.uc-sib a:nth-child(2){--i:1}.uc-sib a:nth-child(3){--i:2}
.uc-sib a:nth-child(4){--i:3}.uc-sib a:nth-child(5){--i:4}
.uc-sib a{display:flex;flex-direction:column;overflow:hidden;color:var(--ink);transition:transform 200ms var(--ease),border-color 160ms ease}
.uc-sib a:hover{transform:translateY(-3px);border-color:var(--gray-300);color:var(--ink)}
.uc-sk{display:block;width:100%;height:auto;background:#FFF7F2;border-bottom:1px solid var(--gray-200)}
.uc-sib .uc-tx{padding:16px 18px 18px;display:flex;flex-direction:column;gap:2px;font-weight:600;font-size:16px}
.uc-sib .uc-tx span{font-weight:400;font-size:14px;color:var(--ink-600)}

/* ---------------------------------------------------------------------------
   Closing CTA
   --------------------------------------------------------------------------- */
.uc-cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.uc-cta .h2{max-width:760px;text-wrap:balance}
.uc-cta .uc-dom{width:100%;max-width:520px}
.uc-cta .uc-promise{justify-content:center}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media (max-width:1199px){
  .uc-phone{width:min(200px,40%)}
}
@media (max-width:900px){
  .uc-hero-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .uc-fan{height:440px}
  .uc-fan-deck{inset:0}
  .uc-phone{width:min(190px,44%)}
  .uc-lib{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media (max-width:767px){
  .uc-hero{padding-top:32px}
  .uc-head{margin-bottom:28px}
  .uc-step{padding:22px}
  .uc-ftxt{padding:20px 22px 22px}
}
@media (max-width:520px){
  .uc-lib{grid-template-columns:minmax(0,1fr)}
  /* nine stacked mockups is a very long scroll on a phone: show six, the button leads to the rest */
  .uc-lib a:nth-child(n+7){display:none}
}

/* Everything stands still: prefers-reduced-motion, and `?still=1`, the review switch
   the page script mirrors onto <html> so a screenshot catches the end state. */
.uc-still .rv,.uc-still .uc-phone,.uc-still .uc-bar2 i,.uc-still .uc-wheel{transition:none!important}
.uc-still .uc-shim,.uc-still .uc-spin,.uc-still .uc-caret,.uc-still .uc-tl,
.uc-still .is-in .uc-wt i,.uc-still .uc-running .uc-wt i{animation:none!important}
.uc-still .uc-shim{-webkit-background-clip:initial;background-clip:initial;background:none;color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .rv{transition:none!important}
  .uc-shim,.uc-spin,.uc-caret,.uc-tl{animation:none!important}
  .uc-shim{-webkit-background-clip:initial;background-clip:initial;background:none;color:var(--ink)}
  .uc-wheel{transition:none}
  .is-in .uc-wt i,.uc-running .uc-wt i{animation:none}
  .uc-phone{transition:none}
  .uc-bar2 i{transition:none}
}

/* ===========================================================================
   Pages 2–6: the page-specific Step 3 minis, first feature illustrations and
   "Try it" demos. Same vocabulary as above — admin-gray stages, 1px gray-200
   frames, 9/12/16px radii, orange for the selected thing.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Panes.
   The seasonal switcher ships all four season panes in the markup, so a browser
   without JS scrolls through every one. `html.uc-js` is set by one line in <head>,
   before first paint, and is what turns that stack into a tabbed switcher. It is
   also what swaps the live demos' no-JS poster for the iframe.
   --------------------------------------------------------------------------- */
.uc-pane{margin-bottom:18px}
.uc-js .uc-pane{display:none;margin-bottom:0}
.uc-js .uc-pane.is-on{display:block}

/* ---------------------------------------------------------------------------
   Small parts shared by several of the new blocks
   --------------------------------------------------------------------------- */
.uc-okc{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;border-radius:50%;background:var(--success-bg);color:var(--success-fg)}
.uc-okc-lg{width:36px;height:36px;margin-bottom:10px}
.uc-tick{font-size:11px;font-weight:600;padding:1px 8px;border-radius:var(--r-pill);background:var(--success-bg);color:var(--success-fg)}
.uc-code-lg{font-size:16px;padding:6px 14px;border-radius:9px;letter-spacing:.04em}
.uc-codewrap{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:12px 0}
.uc-fine{font-size:12px;color:var(--ink-500);margin-top:12px}
.uc-link{background:none;border:0;padding:4px 2px;font:inherit;font-size:14px;color:var(--ink-600);text-decoration:underline;text-underline-offset:3px;cursor:pointer;border-radius:6px}
.uc-link:hover{color:var(--orange-ink)}
.uc-link:focus-visible,.uc-tile:focus-visible,.uc-tab:focus-visible,.uc-x:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.uc-cap{caption-side:top;text-align:left;font-weight:600;font-size:17px;padding:16px 20px 14px;color:var(--ink)}

/* ---------------------------------------------------------------------------
   Step 3, email — the address types itself, then the code slides in
   --------------------------------------------------------------------------- */
.uc-two{display:flex;flex-direction:column;gap:12px;margin:auto 0}
.uc-two-b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--white);border:1px solid var(--gray-200);border-radius:9px;padding:10px 12px;font-size:14px;opacity:0;transform:translateY(8px);transition:opacity 320ms var(--ease),transform 320ms var(--ease)}
.uc-two-b.is-on{opacity:1;transform:none}

/* ---------------------------------------------------------------------------
   Step 3, exit — three setting rows tick on, then the preview line
   --------------------------------------------------------------------------- */
.uc-sets{display:flex;flex-direction:column;gap:8px;margin:auto 0}
.uc-set{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--white);border:1px solid var(--gray-200);border-radius:9px;padding:10px 12px;font-size:14px;transition:border-color 200ms ease,box-shadow 200ms ease}
.uc-set .uc-okc{opacity:0;transform:scale(.6);transition:opacity 200ms ease,transform 260ms var(--ease)}
.uc-set.on{border-color:var(--orange);box-shadow:0 0 0 2px var(--focus-ring)}
.uc-set.on .uc-okc{opacity:1;transform:none}
.uc-ready{font-size:13px;color:var(--success-fg);font-weight:500;opacity:0;transition:opacity 260ms ease}
.uc-ready.is-on{opacity:1}

/* ---------------------------------------------------------------------------
   Step 3, upsell — catalog rows get picked, then the cart rule
   --------------------------------------------------------------------------- */
.uc-cats{display:flex;flex-direction:column;gap:8px;margin:auto 0}
.uc-cat{display:grid;grid-template-columns:28px 1fr auto 20px;gap:10px;align-items:center;background:var(--white);border:1px solid var(--gray-200);border-radius:9px;padding:8px 12px;font-size:14px;transition:border-color 200ms ease}
.uc-cat.on{border-color:var(--orange)}
.uc-cat .uc-okc{opacity:0;transform:scale(.6);transition:opacity 200ms ease,transform 260ms var(--ease)}
.uc-cat.on .uc-okc{opacity:1;transform:none}
.uc-cthumb{width:28px;height:28px;border-radius:6px;background:var(--gray-200)}
.uc-cprice{color:var(--ink-600);font-variant-numeric:tabular-nums}
.uc-rule{align-self:flex-start;opacity:0;transform:translateX(-10px);transition:opacity 300ms ease,transform 300ms var(--ease)}
.uc-rule.is-on{opacity:1;transform:none}

/* ---------------------------------------------------------------------------
   Step 3, quiz — the question list builds up row by row
   --------------------------------------------------------------------------- */
.uc-qrows{display:flex;flex-direction:column;gap:7px;margin:auto 0}
.uc-qrow{display:flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--gray-200);border-radius:9px;padding:8px 12px;font-size:13px;opacity:0;transform:translateY(6px);transition:opacity 260ms ease,transform 260ms var(--ease)}
.uc-qrow.on{opacity:1;transform:none}
.uc-qn{width:18px;height:18px;flex-shrink:0;border-radius:50%;background:var(--orange-100);color:var(--orange-ink);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center}
.uc-qt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uc-qa{font-size:12px;color:var(--ink-500);white-space:nowrap}

/* ---------------------------------------------------------------------------
   Step 3 / feature 1, seasonal — the countdown
   --------------------------------------------------------------------------- */
.uc-cdwrap{display:flex;flex-direction:column;align-items:center;gap:10px;margin:auto 0;text-align:center}
.uc-cd{display:flex;gap:8px}
.uc-cdbox{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:52px;padding:8px 6px;background:var(--white);border:1px solid var(--gray-200);border-radius:9px}
.uc-cdbox b{font-size:22px;line-height:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.uc-cdbox i{font-style:normal;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500)}
.uc-cdend{font-size:13px;color:var(--ink-600)}
.uc-cdwrap-lg{margin-top:20px}
.uc-cdwrap-lg .uc-cdbox{min-width:64px}
.uc-cdwrap-lg .uc-cdbox b{font-size:26px;line-height:32px}

/* ---------------------------------------------------------------------------
   Feature 1, email — the offer card and its success state
   --------------------------------------------------------------------------- */
.uc-flow{display:flex;align-items:center;justify-content:center;gap:10px;margin:auto 0}
.uc-flow .uc-arrow{flex-shrink:0;color:var(--ink-400)}
.uc-pop{background:var(--white);border:1px solid var(--gray-200);border-radius:16px;box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:8px}
.uc-flow .uc-pop{flex:1 1 0;min-width:0;align-items:flex-start}
.uc-pop-h{display:block;width:70%;height:9px;border-radius:5px;background:var(--ink)}
.uc-pop-r{display:block;width:90%;height:6px;border-radius:3px;background:var(--gray-200)}
.uc-pop-in{display:block;width:100%;padding:7px 10px;border:1px solid var(--gray-300);border-radius:9px;font-size:12px;color:var(--ink-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uc-pop-btn{display:block;width:100%;padding:8px 10px;border-radius:9px;background:var(--orange);color:var(--white);font-size:12px;font-weight:600;text-align:center}
.uc-pop-ok{align-items:center!important;text-align:center}
.uc-pop-ok b{font-size:15px}

/* ---------------------------------------------------------------------------
   The browser window mock — feature 1 on the exit page, and its demo
   --------------------------------------------------------------------------- */
.uc-browser{position:relative;background:var(--white);border:1px solid var(--gray-300);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.uc-browser-sm{width:100%;max-width:300px;margin:auto;aspect-ratio:22/13}
.uc-bbar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--admin-page);border-bottom:1px solid var(--gray-200)}
.uc-bdot{width:8px;height:8px;border-radius:50%;background:var(--gray-300)}
.uc-addr{flex:1;margin-left:8px;padding:3px 10px;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--gray-200);font-size:12px;color:var(--ink-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uc-bbody{padding:14px;display:flex;flex-direction:column;gap:8px}
.uc-bline{display:block;height:8px;border-radius:4px;background:var(--gray-200)}
.uc-bline.w70{width:70%}.uc-bline.w60{width:60%}.uc-bline.w45{width:45%}.uc-bline.w40{width:40%}.uc-bline.w25{width:25%}
.uc-bblock{display:block;flex:1;min-height:40px;border-radius:8px;background:var(--gray-100)}
.uc-btrail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.uc-cursor{position:absolute;left:0;top:0;pointer-events:none;z-index:4;opacity:0;filter:drop-shadow(0 2px 3px rgba(35,38,42,.3));transition:transform 1500ms var(--ease),opacity 300ms ease}
.uc-cursor.is-on{opacity:1}
.uc-bpop{position:absolute;left:50%;top:52%;width:62%;transform:translate(-50%,-50%);background:var(--white);border:1px solid var(--gray-200);border-radius:12px;box-shadow:var(--shadow-lg);padding:12px;display:flex;flex-direction:column;gap:7px;opacity:0;transition:opacity 260ms ease,transform 300ms var(--ease)}
.uc-bpop.is-on{opacity:1}
/* ---------------------------------------------------------------------------
   Product cards — feature 1 on the upsell page, and its demo shelf
   --------------------------------------------------------------------------- */
.uc-prods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:auto 0}
.uc-prod{position:relative;display:flex;flex-direction:column;gap:5px;background:var(--white);border:1px solid var(--gray-200);border-radius:12px;padding:8px;font-size:12px;text-align:center}
.uc-prod.sel::after{content:"";position:absolute;inset:-3px;border-radius:14px;border:2px solid var(--orange)}
.uc-pimg{display:block;width:100%;aspect-ratio:1;border-radius:8px;background:var(--gray-100)}
.uc-pname{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uc-pprice{display:block;color:var(--ink-600);font-variant-numeric:tabular-nums}
.uc-pbtn{display:block;padding:5px;border:1px solid var(--gray-300);border-radius:8px;font-weight:500}

/* ---------------------------------------------------------------------------
   Quiz card — feature 1 on the quiz page
   --------------------------------------------------------------------------- */
.uc-qcard{background:var(--white);border:1px solid var(--gray-200);border-radius:16px;box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:10px;margin:auto 0}
.uc-dots{display:flex;gap:6px;justify-content:center}
.uc-dots span{width:7px;height:7px;border-radius:50%;background:var(--gray-300);transition:background 200ms ease,transform 200ms ease}
.uc-dots span.on{background:var(--orange);transform:scale(1.15)}
.uc-qq{font-size:14px;font-weight:600}
.uc-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.uc-tile{position:relative;display:block;width:100%;padding:12px 10px;background:var(--white);border:1px solid var(--gray-200);border-radius:12px;font:inherit;font-size:14px;font-weight:500;color:var(--ink);text-align:center;cursor:pointer;transition:border-color 160ms ease,box-shadow 160ms ease,transform 160ms var(--ease)}
.uc-tile:hover{border-color:var(--gray-300);transform:translateY(-1px)}
.uc-tiles-ill .uc-tile{font-size:12px;padding:10px 8px;cursor:default}
.uc-tile.sel{border-color:var(--orange);box-shadow:0 0 0 2px var(--focus-ring)}

/* ---------------------------------------------------------------------------
   "Try it" demos — the shared stage
   --------------------------------------------------------------------------- */
.uc-demo{display:flex;flex-direction:column;align-items:center;gap:14px;background:var(--admin-page);border:1px solid var(--gray-200);border-radius:var(--r-card);padding:32px 24px}
/* only a page that still puts a table under the demo needs the gap; everywhere else
   the section's own --section-gap is the whole rhythm */
.uc-demo + .uc-tw{margin-top:36px}

/* ---------------------------------------------------------------------------
   The seasonal switcher — tabs over a drifting strip of that season's mockups.
   Same recipe as the homepage gallery (styles.css: .marquee / .track / @keyframes
   marq): the track carries its content twice and slides to -50%, so the loop is
   seamless; hovering parks it; the two edges fade into the card.
   --------------------------------------------------------------------------- */
.uc-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.uc-tab{padding:8px 16px;min-height:38px;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r-pill);font:inherit;font-size:14px;font-weight:500;color:var(--ink-600);cursor:pointer;transition:background 160ms ease,color 160ms ease,border-color 160ms ease}
.uc-tab:hover{border-color:var(--gray-300);color:var(--ink)}
.uc-tab.is-on{background:var(--ink);border-color:var(--ink);color:var(--white)}
.uc-seasonbody{width:100%}
.uc-mq{position:relative;overflow:hidden;width:100%;padding:6px 0}
.uc-mqt{display:flex;gap:16px;width:max-content;animation:ucMarq 46s linear infinite;will-change:transform}
.uc-mq:hover .uc-mqt{animation-play-state:paused}
@keyframes ucMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* the hero deck's phone frame, at strip scale */
.uc-mqc{display:block;flex-shrink:0;width:178px;overflow:hidden;border-radius:22px;border:4px solid var(--ink);background:var(--ink);box-shadow:var(--shadow-lg);aspect-ratio:1/2}
.uc-mqc img{display:block;width:100%;height:100%;object-fit:cover}
/* the strip runs out into the card, not into a hard edge */
.uc-mq::before,.uc-mq::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.uc-mq::before{left:0;background:linear-gradient(90deg,var(--admin-page),rgba(249,250,251,0))}
.uc-mq::after{right:0;background:linear-gradient(270deg,var(--admin-page),rgba(249,250,251,0))}
/* a tab change cross-fades the strip that belongs to the new season */
.uc-js .uc-seasonbody .uc-pane.is-on .uc-mq{animation:ucMqIn 400ms var(--ease) both}
@keyframes ucMqIn{from{opacity:0;transform:translateY(10px)}}
.uc-when{display:block;font-size:13px;color:var(--ink-500)}
.uc-when:empty{display:none}

/* ---------------------------------------------------------------------------
   Live demos — a popup the agent actually built, in an iframe
   The frame is a browser window in the same language as the mock on the exit page.
   The aspect box is fixed, so a lazy iframe never shifts the layout, and its width
   decides which variant the frozen page shows: over 640px it renders the popup's
   desktop build, under it the mobile one.
   --------------------------------------------------------------------------- */
.uc-live{display:flex;flex-direction:column;align-items:center;gap:14px;background:var(--admin-page);border:1px solid var(--gray-200);border-radius:var(--r-card);padding:26px 24px}
.uc-live + .uc-tw{margin-top:36px}
.uc-browser-live{width:100%;max-width:1040px;border-radius:16px}
/* --ar is the desktop ratio the frozen popup needs; the New Balance card loses its
   bottom line of small print in anything shorter than 3:2 */
.uc-liveframe{position:relative;width:100%;aspect-ratio:var(--ar,3/2);background:#F9FAFB;overflow:hidden}
.uc-liveif{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#F9FAFB}
.uc-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* With JS the iframe is the demo and paints over the poster; without JS it has no src
   at all, so the poster is what stands there. Leaving the poster underneath also means
   the box is never an empty grey rectangle while the frame is still arriving. */
.uc-liveif{display:none}
.uc-js .uc-liveif{display:block}
.uc-liverow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;width:100%;max-width:1040px}
.uc-liverow .uc-fine{margin-top:0;margin-right:auto}
.uc-live .uc-tabs{margin-bottom:4px}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media (max-width:767px){
  .uc-demo{padding:22px 14px}
  .uc-cdbox{min-width:46px;padding:6px 4px}
  .uc-cdbox b{font-size:19px}
}
@media (max-width:767px){
  .uc-mqc{width:124px;border-width:3px;border-radius:16px}
  .uc-mqt{gap:10px}
  .uc-mq::before,.uc-mq::after{width:44px}
}
@media (max-width:600px){
  /* under 600 the iframe is narrower than the popup's own 640px breakpoint, so the
     frozen page renders its mobile build — the box turns portrait to match */
  .uc-liveframe{aspect-ratio:390/844;max-width:360px;margin-inline:auto}   /* mobile build */
  .uc-live{padding:18px 12px}
  .uc-liverow{justify-content:center}
  .uc-liverow .uc-fine{margin-right:0;width:100%;text-align:center}
}
@media (max-width:420px){
  .uc-tiles{grid-template-columns:minmax(0,1fr)}
}

/* Everything stands still: the new loops obey the same two switches. */
.uc-still .uc-two-b,.uc-still .uc-set,.uc-still .uc-set .uc-okc,.uc-still .uc-ready,
.uc-still .uc-cat,.uc-still .uc-cat .uc-okc,.uc-still .uc-rule,.uc-still .uc-qrow,
.uc-still .uc-cursor,.uc-still .uc-bpop,.uc-still .uc-tile,.uc-still .uc-dots span{transition:none!important}
.uc-still .uc-mqt,.uc-still .uc-seasonbody .uc-pane.is-on .uc-mq{animation:none!important}

@media (prefers-reduced-motion:reduce){
  .uc-two-b,.uc-set,.uc-set .uc-okc,.uc-ready,.uc-cat,.uc-cat .uc-okc,.uc-rule,
  .uc-qrow,.uc-cursor,.uc-bpop,.uc-tile,.uc-dots span{transition:none!important}
  .uc-mqt,.uc-seasonbody .uc-pane.is-on .uc-mq{animation:none!important}
}