/* ===================================================================
   Use-case CARD STACK — ported verbatim from the GenUI Kit page
   (public/resources/genui-kit/exp.css) for /genui-accelerator/.

   The component is a deliberate copy, not a refactor: same 9 demo cards,
   same static-vs-GenUI phone pairs, same gsap controller (initUseStack in
   src/scripts/genui-gsap.ts, which keys off `#clUse .uc-deck`, so the
   section keeps that id here). The `.kit-*` phone-mock rules and the
   `--kit-*` variables it all sits on already ship in shift.css, and
   shift.js fills the `i.kit-ic[data-ph]` icons document-wide, so only the
   `.uc-*` layer and the three `.vcard*` card surfaces had to come over.

   If a rule here needs changing, check whether the Kit page wants the
   same change. The two copies are independent on purpose (the Kit page
   is a dark carve, this is a light section on a design-system page), but
   they were identical on the day this file was created.
   =================================================================== */

/* SectionHeading paints its label with --th-accent-text and its subtitle with
   --th-text-muted, both tuned for the page's own background. This section brings
   the Kit page's light-blue gradient with it, and on that ground the label lands
   at 2.9:1 and the subtitle at 3.8:1. Restate both with the values the Kit uses
   on its own light sections (.cl-eyebrow and .cl-sec-sub): VGV Blue, and Navy at
   62% for body copy. The label is the only <p> before the h2, the subtitle the
   only one after it. */
#clUse .uc-head > p:first-child{ color:#2A48DE; }
#clUse .uc-head > p:last-child{ color:rgba(12,20,48,0.62); }

/* The card-surface tokens the .vcard* rules read. On the Kit page these sit on
   :where(.cx-root); this page has no carve root, so they are scoped to the
   section rather than leaked into the design system. */
#clUse{
  --vc-r:22px;
  --vc-bg:rgba(255,255,255,0.045);
  --vc-line:rgba(255,255,255,0.10);
  --vc-line-h:rgba(157,182,248,0.34);
  --vc-mesh:
    radial-gradient(125% 100% at 4% -18%, rgba(94,134,255,0.30) 0%, rgba(94,134,255,0.10) 34%, transparent 64%),
    radial-gradient(90% 90% at 108% 116%, rgba(42,72,222,0.32) 0%, rgba(42,72,222,0.08) 44%, transparent 70%),
    linear-gradient(158deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 42%);
  --vc-shadow:0 22px 46px -26px rgba(3,7,20,0.80);
  --vc-shadow-h:0 34px 66px -28px rgba(3,7,20,0.92), 0 0 42px -14px rgba(94,134,255,0.30);
}

.vcard{ position:relative;
    border:1px solid var(--vc-line);
    border-radius:var(--vc-r);
    background:var(--vc-mesh), var(--vc-bg);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), var(--vc-shadow);
    transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease; }

.vcard:hover{ border-color:var(--vc-line-h);
    transform:translateY(-4px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.20), var(--vc-shadow-h); }

@media (prefers-reduced-motion:reduce){
  .vcard, .vcard:hover{transition:none; transform:none;}
}

.vcard-solid{ background:var(--vc-mesh), #0A1530; }

.vcard-l{ background:#fff;
    border:1px solid rgba(12,20,48,0.08);
    border-radius:var(--vc-r);
    box-shadow:0 22px 52px -30px rgba(12,20,48,0.26);
    transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease; }

.vcard-l:hover{ border-color:rgba(12,20,48,0.15); transform:translateY(-3px); box-shadow:0 34px 68px -30px rgba(12,20,48,0.34); }

@media (prefers-reduced-motion:reduce){
  .vcard-l, .vcard-l:hover{transition:none; transform:none;}
}

#clUse > .cl-wave{ top:-58px; height:82px; }

@media (max-width:640px){
  #clUse > .cl-wave{top:-34px; height:52px;}
}

#clUse{ position:relative; z-index:2; background:linear-gradient(180deg,#e2eaf8,#eef3fc); color:#0c1430; }

.uc-sec{ margin:0 auto; padding:96px 40px 116px; text-align:center; }

.uc-sec{ max-width:1180px; }

.uc-vert{ font-family:'Poppins',system-ui,sans-serif; font-weight:600; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:#2A48DE; margin-bottom:10px; }

.uc-card{ display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center; background:#ffffff; border:1px solid rgba(12,20,48,0.10); border-radius:26px; padding:32px 40px; box-shadow:0 34px 66px -30px rgba(12,20,48,0.5); }

.uc-deck{ display:flex; flex-direction:column; gap:28px; margin-top:60px; }

.uc-deck > .uc-card{ width:100%; }

.uc-deck.is-live{ display:block; position:relative; height:var(--uc-deck-h,540px); margin-top:52px; perspective:1600px; cursor:pointer; }

.uc-deck.is-live > .uc-card{ position:absolute; top:0; left:50%; width:min(1040px,100%); margin:0; pointer-events:none; will-change:transform,opacity; transform-origin:50% 12%; backface-visibility:hidden; }

.uc-deck.is-live > .uc-card.is-front{ pointer-events:auto; }

.uc-deck.is-live:focus-visible{ outline:2px solid #2A48DE; outline-offset:10px; border-radius:30px; }

.uc-deck-ctrl{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:30px; }

.uc-nav{ width:42px; height:42px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid rgba(12,20,48,0.18); background:rgba(255,255,255,0.7); color:#0c1430; cursor:pointer; transition:border-color .2s, background .2s, transform .15s; }

.uc-nav svg{ width:18px; height:18px; display:block; }

.uc-nav:hover{ border-color:rgba(42,72,222,0.5); background:#fff; }

.uc-nav:active{ transform:scale(0.92); }

.uc-dots{ display:flex; align-items:center; gap:9px; }

.uc-dot{ width:9px; height:9px; padding:0; border:none; border-radius:50%; background:rgba(12,20,48,0.22); cursor:pointer; transition:background .25s, width .25s, border-radius .25s; }

.uc-dot:hover{ background:rgba(12,20,48,0.42); }

.uc-dot.on{ width:26px; border-radius:5px; background:#2A48DE; }

@media (max-width:860px){
  .uc-card{grid-template-columns:1fr; gap:26px; padding:26px;}
  .uc-deck.is-live{height:auto; perspective:none; cursor:default;}
  .uc-deck.is-live > .uc-card{position:relative; left:auto; width:100%; display:none; pointer-events:auto;}
  .uc-deck.is-live > .uc-card.is-front{display:grid; animation:ucFront .4s ease;}
}

/* The fade the mobile card swap above animates with. It lives in the Kit's exp.css
   right after .uc-dot.on and was missed on the first pass of this port, which left
   `animation:ucFront` naming nothing, so phones swapped cards with a hard cut
   instead of a fade. Caught in review. */
@keyframes ucFront{ from{ opacity:0; } to{ opacity:1; } }

@media (prefers-reduced-motion:reduce){
  .uc-card{box-shadow:0 20px 44px -30px rgba(12,20,48,0.35);}
}

.uc-tag{ display:flex; align-items:center; gap:10px; font-family:'Poppins',system-ui,sans-serif; font-weight:600; font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(12,20,48,0.58); margin-bottom:14px; }

.uc-tag-n{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; flex:none; border-radius:8px; background:#0c1430; color:#fff; font-size:11px; letter-spacing:0.04em; }

.uc-copy{ text-align:left; }

.uc-copy h3{ font-size:24px; font-weight:700; color:#0c1430; letter-spacing:-0.015em; margin:0 0 11px; line-height:1.15; }

.uc-copy p{ font-size:15px; line-height:1.55; color:rgba(12,20,48,0.62); margin:0; max-width:40ch; }

.uc-in{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:16px; }

.uc-in > span{ font-family:'Poppins',system-ui,sans-serif; font-weight:600; font-size:9px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(12,20,48,0.42); margin-right:3px; }

.uc-in i{ font-style:normal; font-family:'Poppins',system-ui,sans-serif; font-size:10.5px; color:rgba(12,20,48,0.62); background:rgba(12,20,48,0.03); border:1px solid rgba(12,20,48,0.14); border-radius:999px; padding:4px 11px; white-space:nowrap; }

.uc-stat{ display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-items:center; margin-top:22px; padding:19px 22px 17px; }

.uc-stat-n{ font-size:40px; font-weight:700; letter-spacing:-0.03em; color:#0c1430; line-height:1; }

.uc-stat-l{ font-size:13px; line-height:1.45; color:rgba(12,20,48,0.68); max-width:32ch; }

.uc-stat-src{ grid-column:1 / -1; margin-top:10px; padding-top:8px; border-top:1px solid rgba(12,20,48,0.06); font-family:'Poppins',system-ui,sans-serif; font-weight:600; font-size:9px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(12,20,48,0.4); }

.uc-ev{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin:80px auto 0; max-width:980px; padding-top:40px; border-top:1px solid rgba(12,20,48,0.08); text-align:left; }

.uc-ev-ic{ display:block; width:19px; height:19px; color:rgba(12,20,48,0.35); margin-bottom:12px; }

.uc-ev-ic svg{ width:19px; height:19px; display:block; }

.uc-ev-i b{ display:block; font-size:31px; font-weight:700; letter-spacing:-0.02em; color:#0c1430; line-height:1; }

.uc-ev-i s{ display:block; text-decoration:none; font-size:12.5px; line-height:1.5; color:rgba(12,20,48,0.62); margin-top:9px; max-width:30ch; }

.uc-ev-i > i:last-child{ display:block; font-style:normal; font-family:'Poppins',system-ui,sans-serif; font-weight:600; font-size:9px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(12,20,48,0.4); margin-top:11px; }

.uc-never{ margin:52px auto 0; max-width:660px; padding:30px 34px 32px; text-align:center; }

.uc-never-tag{ display:inline-flex; align-items:center; gap:8px; font-family:'Poppins',system-ui,sans-serif; font-weight:600; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:#8FA3FF; white-space:nowrap; margin-bottom:14px; }

.uc-never-tag svg{ width:13px; height:13px; }

.uc-never p{ margin:0 auto; max-width:56ch; font-size:14px; line-height:1.7; color:rgba(255,255,255,0.78); }

@media (max-width:760px){
  .uc-ev{grid-template-columns:1fr; gap:28px; text-align:center;}
  .uc-ev-i s{margin-left:auto; margin-right:auto;}
  .uc-ev-ic{margin-left:auto; margin-right:auto;}
  .uc-never{padding:28px 24px 30px;}
}

.uc-cta{ margin:64px auto 0; max-width:980px; text-align:center; }

.uc-cta p{ margin:0 0 20px; font-size:15.5px; color:rgba(12,20,48,0.72); }

.uc-cta b{ color:#0c1430; }

.uc-pairwrap{ display:flex; justify-content:center; min-width:0; }

.uc-pair{ display:flex; gap:18px; justify-content:center; align-items:flex-start; width:max-content; }

.uc-col{ display:flex; flex-direction:column; align-items:center; gap:13px; flex:none; width:194px; }

.uc-lgtxt{ font-family:'Poppins',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:-0.01em; color:#0c1430; white-space:nowrap; }

.uc-lgtxt.w{ color:#fff; }

.uc-cap{ font-family:'Poppins',system-ui,sans-serif; font-weight:600; font-size:10.5px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(12,20,48,0.4); }

.uc-cap.g{ color:#2A48DE; }

.uc-phone{ position:relative; width:100%; border-radius:24px; padding:0; background:none; box-shadow:0 26px 56px -30px rgba(12,20,48,0.42); transition:transform .3s ease, box-shadow .3s ease; }

.uc-phone.s:hover{ transform:translateY(-4px) scale(1.03); box-shadow:0 34px 64px -30px rgba(12,20,48,0.5); }

.uc-phone.g{ transition:transform .38s cubic-bezier(.34,1.56,.64,1), box-shadow .38s ease; }

.uc-phone.g:hover{ transform:translateY(-5px) scale(1.03); box-shadow:0 36px 68px -28px rgba(12,20,48,0.55), 0 0 44px -8px rgba(42,72,222,0.28); }

.uc-phone.g .uc-hero, .uc-phone.g .uc-body > *{ transition:transform .42s cubic-bezier(.34,1.56,.64,1); }

.uc-phone.g:hover .uc-hero{ transform:translateY(-2px) scale(1.015); transition-delay:.02s; }

.uc-phone.g:hover .uc-body > :nth-child(1){ transform:translateY(-3px) scale(1.03); transition-delay:.07s; }

.uc-phone.g:hover .uc-body > :nth-child(2){ transform:translateY(-3px) scale(1.03); transition-delay:.12s; }

.uc-phone.g:hover .uc-body > :nth-child(3){ transform:translateY(-3px) scale(1.025); transition-delay:.17s; }

.uc-phone.g:hover .uc-body > :nth-child(4){ transform:translateY(-2px) scale(1.02); transition-delay:.22s; }

@media (prefers-reduced-motion:reduce){
  .uc-phone.s:hover, .uc-phone.g:hover{transform:none;}
  .uc-phone.g .uc-hero, .uc-phone.g .uc-body > *{transition:none;}
  .uc-phone.g:hover .uc-hero, .uc-phone.g:hover .uc-body > *{transform:none;}
}

.uc-phone.g{ box-shadow:0 26px 58px -28px rgba(42,72,222,0.42); }

.uc-phone.s{ box-shadow:none; }

.uc-notch{ display:none; }

.uc-phone.s .uc-scr{ border:1px solid rgba(12,20,48,0.12); }

.uc-phone.g .uc-scr{ border:1px solid rgba(42,72,222,0.22); }

.uc-scr{ position:relative; border-radius:24px; overflow:hidden; background:#fbfcfe; height:412px; display:flex; flex-direction:column; text-align:left; }

.uc-phone .uc-hd{ padding-top:16px; }

.uc-phone .uc-hero{ padding-top:16px; }

.uc-hd{ display:flex; align-items:center; justify-content:space-between; padding:23px 14px 12px; border-bottom:1px solid #eef1f7; }

.uc-lg{ height:15px; width:auto; }

.uc-bell2{ width:14px; height:14px; color:#aeb6c4; }

.uc-hero{ position:relative; padding:23px 14px 13px; min-height:84px; display:flex; flex-direction:column; justify-content:flex-end; background-size:cover; background-position:center; color:#fff; }

.uc-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,13,29,0.32) 0%,rgba(8,13,29,0.8) 100%); }

.uc-hero > *{ position:relative; z-index:1; }

.uc-hero-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }

.uc-hero .uc-lg{ filter:brightness(0) invert(1); }

.uc-spark{ width:13px; height:13px; color:#9DB6F8; }

.uc-hero-t{ font-size:14.5px; font-weight:700; letter-spacing:-0.01em; }

.uc-body{ flex:1; padding:13px 14px; display:flex; flex-direction:column; min-height:0; }

.uc-body.uc-kit{ --kit-scale:0.52; --kit-r-card:10px; --kit-r-chip:7px; --kit-fs-micro:7.5px; --kit-fs-label:8.5px; --kit-fs-body:10.5px; gap:0; }

.uc-body.uc-kit > *{ flex-shrink:0; }

.uc-body.uc-kit .kit-balance{ box-shadow:0 10px 24px -12px rgba(10,21,48,.45); margin-bottom:10px; padding:10px 12px; }

.uc-body.uc-kit .kit-balance-amt{ font-size:15px; margin-top:2px; }

.uc-body.uc-kit .kit-balance-delta{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; margin-top:4px; }

.uc-body.uc-kit .kit-balance-delta svg{ margin-right:3px; vertical-align:-1px; }

.uc-body.uc-kit .hs-metrics{ margin-bottom:12px; }

.uc-body.uc-kit .kit-metric{ padding:7px 5px 6px; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--kit-accent) 12%, transparent); }

.uc-body.uc-kit .kit-metric s{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

.uc-body.uc-kit .kit-metric b, .uc-body.uc-kit .kit-metric s{ white-space:nowrap; text-align:center; align-self:center; }

.uc-body.uc-kit .kit-metric s{ text-transform:uppercase; letter-spacing:.04em; font-size:6.5px; margin-top:2px; }

.uc-body.uc-kit .kit-card{ padding:10px 12px 0; margin-bottom:12px; background:color-mix(in srgb, var(--kit-accent) 6%, var(--kit-bg)); }

.uc-body.uc-kit .kit-card .hs-lab{ display:flex; justify-content:space-between; align-items:baseline; }

.uc-body.uc-kit .kit-spark{ height:46px; margin:5px -12px 0; width:calc(100% + 24px); }

.uc-body.uc-kit .kit-row{ padding:5px 0; }

.uc-body.uc-kit .kit-row-lead{ background:color-mix(in srgb, var(--kit-accent) 8%, var(--kit-bg)); color:var(--kit-accent-ink); }

.uc-body.uc-kit .kit-row-lead .kit-ic{ font-size:12px; }

.uc-body.uc-kit .hs-lab{ font-size:7px; letter-spacing:.1em; }

.uc-body.uc-kit .uc-btn{ margin-top:auto; }

.uc-hero-k{ font-family:'Poppins',system-ui,sans-serif; font-weight:600; font-size:7px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-bottom:4px; }

.uc-tab{ display:flex; justify-content:space-around; align-items:center; padding:9px 6px 11px; border-top:1px solid #eef1f7; background:#fff; }

.uc-tab svg{ width:15px; height:15px; display:block; color:#bcc4d2; }

.uc-tab .on svg{ color:#2A48DE; }

.uc-h{ font-size:13.5px; font-weight:700; color:#0c1430; margin-bottom:10px; }

.uc-step{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:13px; }

.uc-step span{ font-family:'Poppins',system-ui,sans-serif; font-size:9px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:#9aa3b5; white-space:nowrap; }

.uc-step i{ display:flex; gap:4px; flex:1; max-width:84px; }

.uc-step i b{ flex:1; height:3px; border-radius:2px; background:rgba(12,20,48,0.12); }

.uc-step i b.on{ background:#9aa3b5; }

.uc-chips{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:11px; }

.uc-chips span{ font-size:9.5px; color:#6b7689; background:#fff; border:1px solid #d9dee8; border-radius:999px; padding:3px 9px; }

.uc-chips span.on{ background:#606a7e; border-color:#606a7e; color:#fff; }

.uc-li{ display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid #eef1f7; font-size:11.5px; }

.uc-li:first-of-type{ border-top:none; }

.uc-li b{ color:#1d2740; font-weight:600; flex:1; }

.uc-li s{ text-decoration:none; color:#7a8499; font-family:'Poppins',system-ui,sans-serif; font-size:11px; }

.uc-li.mut{ opacity:0.45; }

.uc-check{ width:15px; height:15px; border:1.6px solid #c5cdda; border-radius:4px; flex:none; }

.uc-radio{ position:relative; width:14px; height:14px; border:1.6px solid #c5cdda; border-radius:50%; flex:none; }

.uc-radio.on{ border-color:#606a7e; }

.uc-radio.on::after{ content:''; position:absolute; inset:3px; border-radius:50%; background:#606a7e; }

.uc-radios{ display:flex; gap:18px; margin:4px 0 2px; font-size:11px; color:#6b7689; }

.uc-radios > span{ display:flex; align-items:center; gap:7px; }

.uc-todo{ display:flex; align-items:center; gap:10px; padding:9px 0; font-size:11.5px; color:#39435a; border-top:1px solid #eef1f7; }

.uc-todo:first-of-type{ border-top:none; }

.uc-fl{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }

.uc-fl label{ font-size:10.5px; color:#4b5468; }

.uc-sel{ font-size:10px; color:#8f97a9; background:#fff; border:1px solid #d6dbe5; border-radius:6px; padding:5px 9px; min-width:84px; text-align:right; }

.uc-inp{ font-size:10px; color:#a3abbc; background:#fff; border:1px solid #d6dbe5; border-radius:6px; padding:5px 9px; min-width:84px; text-align:left; }

.uc-cell{ display:flex; align-items:center; gap:9px; padding:7px 0; border-top:1px solid #e9edf3; }

.uc-cell:first-of-type{ border-top:none; }

.uc-cell-b{ flex:1; min-width:0; }

.uc-cell-b b{ display:block; font-size:10.5px; font-weight:600; color:#252d42; line-height:1.25; }

.uc-cell-b s{ display:block; text-decoration:none; font-size:8.5px; color:#8a93a6; margin-top:1px; }

.uc-thumb{ width:27px; height:18px; flex:none; border-radius:3.5px; background:linear-gradient(135deg,#cdd3df,#adb5c6); position:relative; }

.uc-thumb::after{ content:''; position:absolute; left:4px; top:4px; width:7px; height:5px; border-radius:1.5px; background:rgba(255,255,255,.55); }

.uc-chev{ flex:none; width:6px; height:6px; margin-right:2px; border-right:1.6px solid #b6bdcc; border-bottom:1.6px solid #b6bdcc; transform:rotate(-45deg); }

.uc-note2{ font-size:7.5px; line-height:1.5; color:#9aa2b2; margin:8px 0 10px; }

.uc-alert{ display:flex; gap:9px; align-items:flex-start; background:#f1f3f8; border:1px solid #e6eaf1; border-radius:8px; padding:9px 10px; margin-bottom:11px; }

.uc-alert-ic{ flex:none; width:22px; height:22px; border-radius:50%; background:#e2e6ee; display:flex; align-items:center; justify-content:center; color:#7d8698; }

.uc-alert-ic svg{ width:11px; height:11px; }

.uc-alert b{ display:block; font-size:10.5px; font-weight:600; color:#252d42; line-height:1.3; }

.uc-alert s{ display:block; text-decoration:none; font-size:8.5px; color:#8a93a6; margin-top:1px; }

.uc-ti{ display:flex; align-items:center; gap:9px; padding:7px 0; font-size:11.5px; color:#1d2740; border-top:1px solid #eef1f7; }

.uc-ti:first-of-type{ border-top:none; }

.uc-ti i{ font-family:'Poppins',system-ui,sans-serif; font-size:10.5px; font-weight:600; color:#2A48DE; font-style:normal; min-width:34px; }

.uc-big{ font-size:15px; font-weight:700; color:#0c1430; margin-bottom:3px; }

.uc-big em{ font-style:normal; font-size:10px; font-weight:600; color:#178F86; background:rgba(23,143,134,0.12); padding:2px 7px; border-radius:999px; margin-left:4px; vertical-align:middle; }

.uc-sub2{ font-size:11px; color:#7a8499; margin-bottom:11px; }

.uc-note{ display:flex; align-items:center; gap:9px; font-size:11.5px; color:#1d2740; background:#eef3fb; border-radius:10px; padding:9px 11px; margin-bottom:11px; }

.uc-note-ic{ flex:none; display:flex; color:#5b6b8a; }

.uc-note-ic svg{ width:18px; height:18px; }

.uc-row2{ display:flex; align-items:flex-start; gap:11px; padding:7px 0; border-top:1px solid #eef1f7; }

.uc-row2:first-of-type{ border-top:none; }

.uc-row2-ic{ width:28px; height:28px; border-radius:8px; flex:none; display:flex; align-items:center; justify-content:center; background:rgba(94,134,255,0.12); color:#2A48DE; }

.uc-row2-ic svg{ width:15px; height:15px; }

.uc-row2-ic.moved{ background:rgba(200,132,28,0.16); color:#C8841C; }

.uc-row2-ic.held{ background:rgba(23,143,134,0.16); color:#178F86; }

.uc-row2 b{ display:block; font-size:12px; font-weight:600; color:#1d2740; line-height:1.3; }

.uc-row2 s{ text-decoration:none; display:block; font-size:10.5px; color:#8893a6; margin-top:2px; }

.uc-btn{ margin-top:auto; text-align:center; font-size:11.5px; font-weight:600; color:#fff; background:linear-gradient(135deg,#4F7CFF,#2A48DE); border-radius:10px; padding:9px; }

.uc-btn.mut{ color:#9aa3b5; background:#eef1f7; border:1px solid #e3e8f0; }

.uc-tight .uc-hero{ min-height:74px; padding-top:18px; padding-bottom:11px; }

.uc-tight .uc-big{ font-size:13.5px; }

.uc-tight .uc-sub2{ font-size:10px; margin-bottom:8px; }

.uc-tight .uc-row2{ padding:5px 0; }

.uc-tight .uc-row2-ic{ width:24px; height:24px; }

.uc-tight .uc-row2-ic svg{ width:13px; height:13px; }

.uc-tight .uc-row2 b{ font-size:10.5px; line-height:1.22; }

.uc-tight .uc-row2 s{ font-size:9.5px; margin-top:1px; }

.uc-tight .uc-btn{ font-size:11px; padding:8px; }

.uc-bell{ width:34px; height:34px; border-radius:10px; background:#eef1f7; display:flex; align-items:center; justify-content:center; color:#9aa3b5; margin-bottom:10px; }

.uc-bell svg{ width:18px; height:18px; }

@media (max-width:640px){
  .uc-row{padding:20px;}
  .uc-pairwrap{width:100vw; margin-left:calc(50% - 50vw);}
  .uc-stat{grid-template-columns:1fr; row-gap:7px;}
  .uc-stat-n{font-size:30px;}
}

#clChat, #clPick, #clShift, #clUse, #clHow, #clTrust, #clProof, #clVision, #clTeam, #clStart{ scroll-margin-top:1px; }

#clKitWhat, #clPick, #clUse, #clGet, #clTrust, #clFaq{ scroll-margin-top:96px; }

.uc-body.uc-kit .kit-feature{ height:80px; flex:none; margin-bottom:12px; }

.uc-body.uc-kit .kit-feature.is-tall{ height:120px; }

.uc-body.uc-kit .kit-feature-ov{ padding:9px 11px 10px; }

.uc-body.uc-kit .kit-feature-ov h3{ font-size:12.5px; }

.uc-body.uc-kit .kit-feature-sub{ font-size:7.5px; margin-top:3px; }

.uc-body.uc-kit .kit-timeline{ height:24px; margin:7px 0 3px; }

.uc-body.uc-kit .kit-timeline-line{ top:4px; }

.uc-body.uc-kit .kit-timeline-dot{ width:7px; height:7px; top:1px; box-shadow:0 0 0 2px rgba(6,12,26,.35); }

.uc-body.uc-kit .kit-timeline-dot.is-on{ width:9px; height:9px; top:0; }

.uc-body.uc-kit .kit-timeline-lab{ font-size:6.5px; top:12px; letter-spacing:.03em; }

.uc-body.uc-kit .kit-tile-row{ --kit-screen-pad:14px; margin-bottom:12px; }

.uc-body.uc-kit .kit-tile{ flex-basis:96px; }

.uc-body.uc-kit .kit-tile-img{ aspect-ratio:1.5; }

.uc-body.uc-kit .kit-tile-info{ padding:7px 8px 8px; }

.uc-body.uc-kit .kit-pass{ margin-bottom:12px; }

.uc-body.uc-kit .kit-pass-main{ padding:11px 12px; }

.uc-body.uc-kit .kit-pass-main b{ font-size:13px; margin-top:3px; }

.uc-body.uc-kit .kit-pass-bars{ width:5px; }

.uc-body.uc-kit .kit-tier-row{ margin-bottom:12px; }

.uc-body.uc-kit .kit-tier{ padding:9px 6px; }

.uc-body.uc-kit .hs-lab{ margin:0 0 7px; }

#clChat .uc-ev{ text-align:center; margin:72px auto 0; }

#clChat .uc-ev-ic{ margin-left:auto; margin-right:auto; }

#clChat .uc-ev-i s{ margin-left:auto; margin-right:auto; }