/* Home page — layout and motion specific to index.html. Colours come only
   from theme tokens (styles.css + shared/ic-theme.css), so both themes work. */

/* ---------- nav ---------- */
.nav .ic-logo { justify-self: start; }
.nav__end { gap: 10px; }
.nav__login { font-size: 15px; }
.menu-btn { display: none; width: 44px; height: 44px; position: relative; }
.menu-btn i { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--text); transition: transform .45s var(--spring), top .45s var(--spring); }
.menu-btn i:first-child { top: 16px; } .menu-btn i:last-child { top: 23px; }
.menu-btn[aria-expanded="true"] i:first-child { top: 19.5px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] i:last-child { top: 19.5px; transform: rotate(-45deg); }
.sheet { position: fixed; inset: 64px 0 0 0; z-index: 49; padding: 24px var(--pad) 32px; display: flex; flex-direction: column; justify-content: space-between; background: rgba(var(--bg-rgb), .96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.sheet[hidden] { display: none; }
.sheet nav { display: grid; }
.sheet nav a { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 22px; letter-spacing: -.03em; display: grid; gap: 2px; }
.sheet nav small { font-size: 13px; letter-spacing: 0; color: var(--mute); }
.sheet .sq { width: 100%; }

/* ---------- hero: copy sits in the optical middle of the viewport ---------- */
.hero__left { justify-content: flex-start; padding-top: 76px; }
.hero__copy { margin-block: auto; padding: 28px 0; }
.themes { margin-top: 0; padding-top: 12px; }
.hero__title { margin-top: 26px; }
/* line-by-line mask reveal. The metal finish lives on each LINE (the element
   that moves), not on the heading: Safari drops background-clip:text for
   children that are transformed, which made the headline invisible. */
.hero__title.is-split, .phero__title.is-split { background: none; -webkit-text-fill-color: currentColor; }
.hero__title .ln, .phero__title .ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero__title .ln > span, .phero__title .ln > span {
  display: block;
  background-image: linear-gradient(105deg, transparent 38%, rgba(var(--on), .9) 50%, transparent 62%), var(--metal);
  background-size: 260% 100%, 100% 100%; background-position: 130% 0, 0 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.is-lit .ln > span { animation: sheen 2.2s cubic-bezier(.45,.05,.2,1) forwards; }
.is-lit .ln:nth-child(2) > span { animation-delay: .12s; }
.is-lit .ln:nth-child(3) > span { animation-delay: .24s; }
@keyframes sheen { from { background-position: 130% 0, 0 0; } to { background-position: -30% 0, 0 0; } }
.hero__horizon { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; font-size: 14.5px; color: var(--text); }
.hero__horizon b { font-weight: 400; white-space: nowrap; }
.hero__horizon span { color: var(--dim); margin-right: 4px; }
.hero__horizon i { width: 3px; height: 3px; border-radius: 50%; background: var(--dim); }
.hero__panel svg { color: var(--text); }

/* ---------- insights ---------- */
.ins { margin-top: 56px; display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ins__card { background: var(--bg); padding: 22px 22px 28px; display: flex; flex-direction: column; gap: 10px; transition: background .4s; }
.ins__card:hover { background: var(--surface); }
.ins__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 8px; background: var(--surface); }
.ins__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--spring); filter: saturate(.85); }
.ins__card:hover .ins__img img { transform: scale(1.04); }
.ins__meta { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.ins__card b { font-size: 20px; font-weight: 500; letter-spacing: -.03em; line-height: 1.2; }
.ins__card--lead b { font-size: 24px; }
.ins__dek { font-size: var(--t-read); line-height: 1.55; color: var(--mute); }
.ins__card--text { justify-content: flex-start; }
.ins__card--text b + .ins__dek { margin-bottom: 18px; }
.ins__all { margin-top: auto; font-size: 14.5px; font-weight: 500; }

/* ---------- team teaser ---------- */
.team-teaser__row { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; }
.faces { list-style: none; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.faces li { background: var(--bg); padding: 16px 20px; display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; align-items: center; }
.faces__img { grid-row: span 2; width: 56px; height: 56px; object-fit: cover; object-position: 50% 18%; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-2); }
.faces span { grid-row: span 2; width: 48px; height: 48px; display: grid; place-items: center; font-weight: 500; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.faces b { font-size: 17.5px; font-weight: 500; }
.faces small { font-size: 14px; color: var(--mute); }

@media (max-width: 1080px) {
  .nav__login { display: none; }
  .menu-btn { display: block; }
  .ins, .team-teaser__row { grid-template-columns: minmax(0, 1fr); }
  .hero__left { min-height: 100svh; }
}
@media (max-width: 640px) {
  .nav__end .sq { display: none; }
  .hero__horizon { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .is-lit .ln > span { animation: none; } }

/* ==========================================================================
   CINEMATIC HERO (motionsites-style): full-bleed film, headline anchored
   low-left, one floating product card, facts + themes along the bottom.
   The hero is always a dark, cinematic block — in light mode too — so the
   film stays legible; tokens are re-scoped to dark inside it.
   ========================================================================== */
.cine { --on: 255,255,255; --text: #F2F1EE; --mute: rgba(242,241,238,.72); --dim: rgba(242,241,238,.5); --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --metal: linear-gradient(180deg, #FFFFFF 0%, #ECEBE7 42%, #B4B2AD 82%, #8E8C88 100%);
  --btn-grad: linear-gradient(180deg, #fff, #E4E4E2); --btn-fg: #0A0A0B; --btn-bg: #fff; --signal: #D9E4A6;
  position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; color: var(--text); background: #060606; overflow: hidden; isolation: isolate; }
.cine__media { position: absolute; inset: 0; z-index: -1; }
.cine__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; transform: scale(1.04); transform-origin: 70% 60%; }
.cine__shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(6,6,6,.88) 0%, rgba(6,6,6,.62) 34%, rgba(6,6,6,.12) 62%, rgba(6,6,6,.2) 100%),
  linear-gradient(0deg, rgba(6,6,6,.95) 0%, rgba(6,6,6,.4) 26%, rgba(6,6,6,0) 48%),
  linear-gradient(180deg, rgba(6,6,6,.6) 0%, rgba(6,6,6,0) 20%); }
.cine .sprinkle { z-index: 3; }
.cine__body { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: end; gap: 40px; padding: 150px var(--pad) 40px; max-width: 1560px; width: 100%; margin: 0 auto; }
.cine__copy { max-width: 980px; }
.cine__title { margin-top: 24px; font-size: clamp(44px, 5.7vw, 96px); line-height: .98; letter-spacing: -.055em; text-align: left; }
.cine__sub { margin-top: 24px; max-width: 520px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; color: var(--mute); }
.cine__btns { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; }
.cine__card { justify-self: end; width: min(340px, 100%); margin-bottom: 8px; }
.cine__card .gcard, html[data-theme="light"] .cine__card .gcard { background: linear-gradient(180deg, rgba(40,40,42,.55), rgba(14,14,16,.72)); color: #F2F1EE; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -24px rgba(0,0,0,.85); }
html[data-theme="light"] .cine .ring::after, html[data-theme="light"] .cine .timeline li.on i::after { background: #fff; }
.cine__title .ln { white-space: nowrap; }
.cine__card .gcard__big { font-size: 30px; margin-top: 12px; }
.cine__foot { position: relative; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 36px; padding: 22px var(--pad) 26px; border-top: 1px solid var(--line); max-width: 1560px; width: 100%; margin: 0 auto; }
.cine__facts { display: flex; gap: 34px; }
.cine__facts dt { font-size: 12px; color: var(--dim); }
.cine__facts dd { margin-top: 2px; font-size: 15.5px; font-weight: 500; white-space: nowrap; }
.cine .themes { padding: 0; margin: 0; }
.cine .marquee { margin: 0; }
.cine .marquee__track span { font-size: 17px; color: rgba(242,241,238,.4); }
.cine__cue { width: 34px; height: 54px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); position: relative; }
.cine__cue i { position: absolute; left: 50%; top: 12px; width: 2px; height: 10px; margin-left: -1px; border-radius: 2px; background: var(--text); animation: cue 2.2s cubic-bezier(.6,0,.2,1) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 80% { transform: translateY(20px); opacity: 0; } 100% { opacity: 0; } }
/* nav sits over the film: force light-on-dark until you scroll past it */
.nav.over-cine:not(.is-solid) { --text: #F2F1EE; --on: 255,255,255; --btn-grad: linear-gradient(180deg, #fff, #E4E4E2); --btn-fg: #0A0A0B; --line-2: rgba(255,255,255,.2); --surface-2: rgba(255,255,255,.08); --bg: #0B0B0C; color: #F2F1EE; }
.nav.over-cine:not(.is-solid) .nav__links a, .nav.over-cine:not(.is-solid) .nav__login { color: rgba(242,241,238,.72); }
.nav.over-cine:not(.is-solid) .nav__links a:hover { color: #fff; }

@media (max-width: 1080px) {
  .cine__body { grid-template-columns: minmax(0, 1fr); padding-top: 130px; }
  .cine__card { justify-self: start; }
  .cine__foot { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cine__cue { display: none; }
  .cine__shade { background: linear-gradient(0deg, rgba(6,6,6,.96) 0%, rgba(6,6,6,.7) 45%, rgba(6,6,6,.25) 75%, rgba(6,6,6,.55) 100%); }
}
@media (max-width: 640px) {
  .cine__card { display: none; }
  .cine__facts { flex-wrap: wrap; gap: 14px 24px; }
  .cine__title { font-size: clamp(34px, 9.6vw, 42px); }
}
@media (prefers-reduced-motion: reduce) { .cine__cue i { animation: none; } }

/* ---------- hero headline: two voices ----------
   Line 1 is the setup — light weight, quiet tone. Lines 2–3 are the promise —
   medium weight in brushed metal. Tracking tightens as size grows (Apple type
   guidance: large display type wants negative tracking; leading tightens too). */
.hero__title--duo { font-size: clamp(46px, 5.3vw, 88px); line-height: .97; letter-spacing: -.054em; font-weight: 500; font-feature-settings: "kern", "liga"; text-rendering: optimizeLegibility; font-optical-sizing: auto; }
.hero__title--duo .ln:first-child > span { font-weight: 300; letter-spacing: -.046em; }
.hero__title--duo .soft { -webkit-text-fill-color: var(--duo-soft); color: var(--duo-soft); }
.hero__title--duo .ln + .ln { margin-top: .02em; }
:root { --duo-soft: #7E7C78; }
html[data-theme="light"] { --duo-soft: #8E8B85; }
@media (max-width: 640px) { .hero__title--duo { font-size: clamp(40px, 11.2vw, 50px); letter-spacing: -.05em; } }

/* Nav collapses to the menu sheet below 1200px so the five global links
   never crowd the controls (iPad Pro landscape included). */
.nav__login { white-space: nowrap; }
@media (max-width: 1200px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__links, .nav__login { display: none; }
  .menu-btn { display: block; }
}

/* Tablet + phone hero: no forced full-height blocks (they left big empty
   bands on iPad portrait). Copy, themes and panel sit in natural rhythm. */
@media (max-width: 1080px) {
  .hero__left { min-height: 0 !important; padding: 150px var(--pad) 0; }
  .hero__copy { margin-block: 0; padding: 0 0 8px; }
  .themes { padding: 48px 0 40px; }
  .hero__panel { min-height: 0 !important; padding: 72px var(--pad) 72px; }
}
@media (min-width: 641px) and (max-width: 1080px) {
  .hero__title--duo { font-size: clamp(58px, 8.2vw, 84px); }
  .hero .lede { font-size: 19px; max-width: 580px; }
}
@media (max-width: 640px) {
  .hero__left { padding-top: 124px; }
  .themes { padding: 40px 0 32px; }
  .hero__panel { padding: 56px var(--pad); }
}

/* Legibility: a soft top scrim keeps nav links readable where they cross
   the bright hero panel (before the nav turns solid on scroll). */
.nav::before { content: ""; position: absolute; inset: 0 0 -28px 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(var(--bg-rgb), .78), rgba(var(--bg-rgb), 0)); transition: opacity .5s; }
.nav.is-solid::before { opacity: 0; }

/* ==========================================================================
   60-second film band
   Sits directly under the hero: the hero makes the claim, the film proves it.
   Uses only existing tokens, no new colour. Click to play rather than
   autoplay, because the CLEAR scroll film is the next section and two moving
   pictures competing reads as noise.
   ========================================================================== */
.filmband { padding-top: clamp(56px, 6vw, 88px); }
.filmband__wrap {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.filmband__copy .chip { margin-bottom: 18px; }
.filmband__copy .lede { margin-top: 16px; }
.filmband__list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
}
.filmband__list li {
  position: relative;
  padding-left: 22px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--mute);
}
.filmband__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 10px; height: 1px;
  background: var(--line-2);
}

.filmband__player { margin: 0; display: grid; gap: 12px; }

.filmband__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line-2);
  aspect-ratio: 16 / 9;
}
.filmband__btn img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s var(--spring), opacity .4s;
}
.filmband__btn:hover img { transform: scale(1.02); opacity: .85; }
.filmband__btn::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.15), transparent 40%, rgba(0,0,0,.6));
}

/* the play affordance: a square, matching .sq, not a rounded media button */
.filmband__cue {
  position: absolute;
  left: 20px; bottom: 20px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 20px;
  background: var(--btn-grad);
  color: var(--btn-fg);
  font-size: 15.5px;
  font-weight: 500;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.12), 0 10px 30px -12px rgba(var(--on), .25);
  transition: transform .45s var(--spring);
}
.filmband__btn:hover .filmband__cue { transform: translateY(-2px); }
.filmband__btn:active .filmband__cue { transform: scale(.97); transition-duration: .1s; }
.filmband__cue i {
  width: 0; height: 0;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.filmband__cue small { font-size: 13.5px; opacity: .64; font-variant-numeric: tabular-nums; }

.filmband__player video[hidden] { display: none; }   /* a bare display:block beats [hidden] */
.filmband__btn[hidden] { display: none; }
.filmband__player video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: #000;
  box-shadow: 0 0 0 1px var(--line-2);
}
.filmband__player figcaption { margin: 0; }

@media (max-width: 1080px) {
  .filmband__wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .filmband__list { margin-top: 20px; }
}
@media (pointer: coarse) {
  .filmband__cue { min-height: 48px; }
}


/* the stats line now anchors the bottom of the hero's left column, taking the
   role the themes marquee used to play, without its six chips of extra reading */
.hero__horizon { margin-top: auto; padding-bottom: 6px; }
@media (max-width: 1080px) { .hero__horizon { margin-top: 24px; padding-bottom: 0; } }

/* the stats band keeps its full-bleed width (72px figures need it) but is no
   longer headless, which is what made it read as an orphan */
.numbers__eyebrow { margin-bottom: 22px; }


/* The first section after a full-height hero does not need the standard
   128px lead-in: the hero's own bottom padding is already doing that work,
   and the two stacked gaps read as a hole. */
#products { padding-top: clamp(56px, 6vw, 84px); }

/* ---------- hero SEBI badge: one line on wide screens, two tidy lines on phones ---------- */
.chip--reg { white-space: nowrap; }
@media (max-width: 600px) {
  .chip--reg { height: auto; flex-wrap: wrap; justify-content: center; column-gap: 8px; row-gap: 3px; padding: 8px 14px; line-height: 1.35; font-size: 11px; letter-spacing: .07em; white-space: normal; text-align: center; margin-inline: auto; }
  .chip--reg .chip__sep { display: none; }
  .chip--reg .chip__no { flex-basis: 100%; color: rgba(var(--on), .62); font-variant-numeric: tabular-nums; letter-spacing: .1em; }
}

/* ---------- hero horizon row: on phones, a 3-up stat row instead of a wrapping dotted line ---------- */
@media (max-width: 600px) {
  .hero__horizon { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 0; max-width: 420px; margin-inline: auto; padding-bottom: 14px; }
  .hero__horizon i { display: none; }
  .hero__horizon b { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 6px; white-space: normal; text-align: center; line-height: 1.3; }
  .hero__horizon span { margin-right: 0; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
}


/* =========================================================
   Type roles (3 Oct typography pass). Display sizes are untouched;
   these govern reading text so supporting content is comfortable.
   ========================================================= */
:root {
  --t-hero: clamp(17px, calc(0.625vw + 10px), 22px);   /* 17 phone · 18 @1280 · 22 @1920 */
  --t-read: 17px;            /* explanatory paragraphs and product bullets */
  --t-read-lh: 1.6;
  --t-intro: clamp(17px, calc(0.31vw + 14px), 19px);    /* section intros */
  --t-support: 15.5px;       /* benefits, list captions, secondary lines */
  --t-label: 14px;           /* labels the visitor needs to understand */
  --t-micro: 13px;           /* short markers, dates, legends */
  --c-ink-2: #55534E;        /* body on white cards (≈7.3:1) */
  --c-ink-3: #6B6964;        /* labels on white cards (≈5.4:1) */
}

/* =========================================================
   Hero film card: the 1-minute film as a silent loop in a glass
   frame; the full film (with sound) opens in a dialog.
   ========================================================= */
.herofilm { position: relative; z-index: 2; width: min(520px, 100%); margin: 0; }
.herofilm__btn { position: relative; display: block; width: 100%; padding: 0; border-radius: 16px; overflow: hidden; background: #0b0b0d; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(255,255,255,.08), 0 40px 80px -30px rgba(0,0,0,.9); transition: transform .6s var(--spring); }
.herofilm__btn:hover { transform: translateY(-3px) scale(1.01); }
.herofilm__btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.herofilm__loop { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.herofilm__cue { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px 0 12px; background: rgba(255,255,255,.94); color: #0A0A0B; font-size: 14.5px; font-weight: 500; border-radius: 2px; box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); }
.herofilm__cue i { width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.herofilm__cue small { font-size: 12.5px; color: rgba(10,10,11,.55); font-variant-numeric: tabular-nums; }
.herofilm figcaption { margin-top: 18px; text-align: center; }
.herofilm figcaption b { display: block; font-size: 21px; font-weight: 500; letter-spacing: -.03em; }
.herofilm figcaption small { display: block; margin: 8px auto 0; max-width: 340px; font-size: 14px; color: rgba(var(--on), .68); }

.filmdlg { position: fixed; inset: 0; margin: auto; width: min(1180px, 92vw); max-height: 96vh; padding: 0; border: 0; background: transparent; color: #ECECEA; overflow: visible; }
.filmdlg::backdrop { background: rgba(0,0,0,.86); backdrop-filter: blur(10px); }
.filmdlg__frame { position: relative; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 60px 140px rgba(0,0,0,.8); transform-origin: center; }
.filmdlg video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.filmdlg__play { position: absolute; inset: 0 0 56px; display: grid; place-items: center; cursor: pointer; }
.filmdlg__play i { width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.94); opacity: 0; transform: scale(.85); transition: opacity .3s, transform .45s var(--spring); }
.filmdlg__play i::before { content: ""; display: block; margin: 25px 0 0 31px; border-left: 20px solid #000; border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.filmdlg.is-paused .filmdlg__play i { opacity: 1; transform: none; }
.filmdlg__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 18px; background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,0)); opacity: 0; transition: opacity .35s; }
.filmdlg__frame:hover .filmdlg__bar, .filmdlg.is-paused .filmdlg__bar, .filmdlg__bar:focus-within { opacity: 1; }
.filmdlg__pp { width: 28px; height: 28px; display: grid; place-items: center; }
.filmdlg__pp i { width: 10px; height: 13px; border-left: 3px solid #fff; border-right: 3px solid #fff; }
.filmdlg.is-paused .filmdlg__pp i { width: 0; height: 0; border-right: 0; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.filmdlg__track { position: relative; flex: 1; height: 4px; border-radius: 999px; background: rgba(255,255,255,.22); cursor: pointer; }
.filmdlg__track::before { content: ""; position: absolute; inset: -10px 0; }
.filmdlg__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: #fff; }
.filmdlg__time { font-size: 13px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.75); white-space: nowrap; }
.filmdlg__mute { font-size: 13px; color: rgba(255,255,255,.85); padding: 6px 10px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; }
.filmdlg__chapters { list-style: none; display: flex; gap: 6px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; }
.filmdlg__chapters button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 128px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); color: rgba(255,255,255,.6); font-size: 13.5px; text-align: left; transition: background .3s, color .3s, border-color .3s; }
.filmdlg__chapters button b { font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.4); }
.filmdlg__chapters button:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.filmdlg__chapters button.on { background: #fff; color: #000; border-color: #fff; }
.filmdlg__chapters button.on b { color: rgba(0,0,0,.5); }
.filmdlg__fine { margin-top: 10px; font-size: 12px; color: rgba(255,255,255,.45); }
.filmdlg__x { position: absolute; top: -52px; right: 0; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 24px; line-height: 1; transition: background .25s; }
.filmdlg__x:hover { background: rgba(255,255,255,.2); }
.filmdlg :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 640px) { .filmdlg { width: 94vw; } .filmdlg__x { top: -48px; } .filmdlg__mute { display: none; } }

/* =========================================================
   Products: pinned scroll story (wide) / stacked tabs (narrow)
   ========================================================= */
.pstory { position: relative; height: 320vh; border-top: 1px solid var(--line); background: var(--bg); }
.pstory__pin { position: sticky; top: 0; height: 100vh; min-height: 680px; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding: 72px var(--pad) 40px; max-width: 1440px; margin-inline: auto; }
.pstory__copy .h2 { margin-top: 18px; }
.pstory__tabs { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 34px; border-bottom: 1px solid var(--line-2); }
.pstory__tabs button { display: flex; align-items: baseline; gap: 8px; padding: 12px 0 14px; font-size: 15.5px; color: var(--dim); text-align: left; transition: color .4s; }
.pstory__tabs button span { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--dim); }
.pstory__tabs button[aria-selected="true"] { color: var(--text); }
.pstory__tabs button[aria-selected="true"] span { color: var(--gold); }
.pstory__tabs button:focus-visible { outline: 1px solid rgba(var(--on), .6); outline-offset: 2px; }
.pstory__bar { position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; pointer-events: none; }
.pstory__bar b { display: block; width: 33.333%; height: 100%; background: var(--gold); transition: transform .7s var(--spring); }
.pstory__panels { margin-top: 30px; min-height: 380px; }
.pstory__tag { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.pstory__p h3 { margin-top: 12px; font-size: clamp(34px, 3.4vw, 50px); font-weight: 400; letter-spacing: -.045em; line-height: 1.02; }
.pstory__for { margin-top: 14px; font-size: 18px; line-height: 1.5; color: var(--text); max-width: 34ch; }
.pstory__get { list-style: none; margin-top: 18px; display: grid; gap: 8px; }
.pstory__get li { position: relative; padding-left: 22px; font-size: 15.5px; color: rgba(var(--on), .7); }
.pstory__get li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: var(--gold); }
.pstory__p dl { display: flex; gap: 34px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.pstory__p dt { font-size: 12.5px; color: var(--dim); }
.pstory__p dd { margin-top: 2px; font-size: 15.5px; font-weight: 500; }
.pstory__p .sq { margin-top: 24px; }
.pstory__stage { position: relative; height: min(70vh, 640px); }
.pstory__shot { position: absolute; inset: 0; margin: 0; border-radius: 18px; overflow: hidden; background: #0b0b0d; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgba(255,255,255,.07), 0 50px 100px -40px rgba(0,0,0,.95); opacity: 0; transform: translateY(40px) scale(.96); transition: opacity .8s var(--spring), transform 1s var(--spring); }
.pstory__shot.is-on { opacity: 1; transform: translateY(calc(var(--pp, .5) * -18px + 9px)) scale(1); }
.pstory__shot img { width: 100%; height: 100%; object-fit: cover; }
.pstory__note { position: absolute; left: 0; bottom: -30px; font-size: 12.5px; color: var(--dim); }
html[data-theme="light"] .pstory__shot { box-shadow: 0 0 0 1px rgba(14,12,10,.08), 0 50px 100px -40px rgba(40,38,34,.45); }

@media (max-width: 1080px) {
  .pstory { height: auto; }
  .pstory__pin { position: relative; height: auto; min-height: 0; grid-template-columns: 1fr; padding: 80px var(--pad) 72px; }
  .pstory__stage { order: 2; height: auto; aspect-ratio: 4 / 3; }
  .pstory__copy { order: 1; }
  .pstory__panels { min-height: 0; }
  .pstory__note { position: static; margin-top: 10px; }
  .pstory__stage { margin-bottom: 30px; }
}
@media (max-width: 640px) {
  .pstory__tabs button { font-size: 14px; gap: 6px; }
  .pstory__p dl { gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .pstory { height: auto; }
  .pstory__pin { position: relative; height: auto; }
}

/* CLEAR: the reading panel leads, the funnel supports.
   A big plain-English question per filter carries the eye to the left;
   the film is toned down a touch so it frames rather than competes. */
.film__detail .film__q { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; font-size: clamp(24px, 2.1vw, 32px); line-height: 1.18; letter-spacing: -.03em; color: var(--text); font-weight: 400; }
.film__detail .film__q b { flex: none; font-size: 1.5em; line-height: .8; font-weight: 500; color: var(--gold); }
.film__detail p:not(.film__q) { font-size: 15px; }
.film__viz .cf-film { opacity: .8; transition: opacity .6s; }
.film__stages .film__stage { padding: 9px 0; }
@media (min-width: 1081px) { .film__copy { width: min(500px, 38vw); } .film__viz { left: calc(var(--pad) + min(500px, 38vw) + 3vw); } .film__note { left: calc(var(--pad) + min(500px, 38vw) + 3vw); } }
@media (max-width: 1080px) { .film__detail .film__q { font-size: 24px; } }

/* products on shorter laptop screens */
.pstory .h2 { font-size: clamp(36px, 4vw, 60px); }
@media (min-width: 1081px) and (max-height: 860px) {
  .pstory .h2 { font-size: clamp(32px, 3.2vw, 46px); }
  .pstory__tabs { margin-top: 22px; }
  .pstory__panels { margin-top: 20px; }
  .pstory__p h3 { font-size: clamp(30px, 2.8vw, 40px); }
  .pstory__for { font-size: 16.5px; }
  .pstory__get { margin-top: 12px; gap: 5px; }
  .pstory__p dl { margin-top: 14px; padding-top: 12px; }
  .pstory__p .sq { margin-top: 16px; }
}
.pstory__shot img { object-fit: contain; }

/* Community band: real Mumbai photography under a dark scrim */
.community { position: relative; overflow: hidden; border-top: 1px solid var(--line); padding: clamp(96px, 14vh, 160px) 0; background: #050506; color: #ECECEA; }
.community__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.community::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,5,6,.94) 0%, rgba(5,5,6,.78) 45%, rgba(5,5,6,.35) 100%), linear-gradient(0deg, rgba(5,5,6,.7), transparent 40%); }
.community__in { position: relative; z-index: 1; }
.community .h2 { margin-top: 18px; }
.community .lede { margin-top: 20px; max-width: 52ch; color: rgba(236,236,234,.78); }
.community__list { list-style: none; margin-top: 34px; display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); gap: 26px; }
.community__list li { padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); }
.community__list b { display: block; font-weight: 500; font-size: 17px; }
.community__list span { display: block; margin-top: 4px; font-size: var(--t-support); color: rgba(236,236,234,.74); }
.community__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.community .sq--line { color: #ECECEA; border-color: rgba(255,255,255,.3); }
.community .chip { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.04); }
.community__fine { margin-top: 18px; font-size: 12.5px; color: rgba(236,236,234,.5); }
@media (max-width: 760px) { .community__list { grid-template-columns: 1fr; gap: 16px; } .community::after { background: linear-gradient(0deg, rgba(5,5,6,.95), rgba(5,5,6,.7)); } }
.film__note { color: rgba(var(--on), .58); }

/* =========================================================
   Welcome (dezerv-style): a quiet line on black, then the page.
   ========================================================= */
.welcome { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #000; pointer-events: none; animation: welcome-out .6s cubic-bezier(.4,0,.2,1) 1.55s forwards; }
.welcome p { font-size: 15px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: #fff; }
.welcome p span { opacity: 0; animation: welcome-ch .5s ease-out forwards; animation-delay: calc(var(--i) * 28ms + 120ms); }
@keyframes welcome-ch { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: none; } }
@keyframes welcome-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .welcome { display: none; } }

/* hero facts: close to the buttons, not floating at the bottom */
.hero__facts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 26px; font-size: var(--t-support); color: rgba(var(--on), .72); }
.hero__facts li { display: inline-flex; align-items: center; gap: 8px; }
.hero__facts li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: rgba(var(--on), .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
html[data-theme="light"] .hero__facts li::before { filter: invert(1); }

/* =========================================================
   Products: three cards in a row, each with a drawn diagram
   (Factor-style line art) that assembles when the row arrives.
   ========================================================= */
.pcards { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pcard { display: flex; flex-direction: column; background: #0E0E10; border: 1px solid rgba(255,255,255,.08); border-radius: 20px; overflow: hidden; transition: border-color .4s, transform .6s var(--spring); }
.pcard:hover { border-color: rgba(255,255,255,.2); transform: translateY(-4px); }
.pcard__art { position: relative; aspect-ratio: 5 / 3; border-bottom: 1px solid rgba(255,255,255,.07); background: radial-gradient(circle, rgba(255,255,255,.085) 1px, transparent 1.4px) 0 0 / 16px 16px, linear-gradient(180deg, #121215, #0B0B0D); }
.pcard__art .dg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dg text { font-family: var(--f); fill: rgba(255,255,255,.62); }
.dg__t { font-size: 13px; font-weight: 500; fill: #fff !important; }
.dg__s { font-size: 11.5px; }
.dg__node rect, .dg__node circle { fill: #17171A; stroke: rgba(255,255,255,.22); stroke-width: 1; }
.dg__node--hi rect, .dg__node--hi circle { fill: #fff; stroke: #fff; }
.dg__node--hi text { fill: rgba(10,10,11,.6) !important; }
.dg__node--hi .dg__t { fill: #0A0A0B !important; }
.dg__pill { fill: rgba(255,255,255,.04) !important; }
.dg__icon { fill: none; stroke: rgba(255,255,255,.7); stroke-width: 1.2; }
.dg__tick { stroke: rgba(255,255,255,.28); stroke-width: 1.4; stroke-linecap: round; fill: none; }
.dg__dot { fill: #fff; }
.dg__ln { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 1.2; stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 1.2s cubic-bezier(.6,0,.2,1) .35s; }
.dg__ln--dash { stroke-dasharray: 3 4; stroke-dashoffset: 0; opacity: 0; transition: opacity .6s 1.2s; }
.dg__pulse { fill: #fff; opacity: 0; transition: opacity .6s 1.4s; }
.dg__node { opacity: 0; transform: translateY(8px); transform-box: fill-box; transition: opacity .6s ease calc(.15s + var(--d) * .14s), transform .8s var(--spring) calc(.15s + var(--d) * .14s); }
.pcard.is-in .dg__ln { stroke-dashoffset: 0; }
.pcard.is-in .dg__ln--dash, .pcard.is-in .dg__pulse { opacity: 1; }
.pcard.is-in .dg__node { opacity: 1; transform: none; }
/* the three cards come together as the row arrives */
.pcards:not(.is-in) .pcard:nth-child(1) { transform: translateX(-28px) rotate(-1.2deg); opacity: 0; }
.pcards:not(.is-in) .pcard:nth-child(2) { transform: translateY(36px); opacity: 0; }
.pcards:not(.is-in) .pcard:nth-child(3) { transform: translateX(28px) rotate(1.2deg); opacity: 0; }
.pcards .pcard { transition: opacity .9s ease, transform 1.1s var(--spring), border-color .4s; }
.pcards .pcard:nth-child(2) { transition-delay: .08s; } .pcards .pcard:nth-child(3) { transition-delay: .16s; }
.pcard__body { display: flex; flex-direction: column; flex: 1; padding: 26px 26px 28px; }
.pcard__tag { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.pcard h3 { margin-top: 12px; font-size: clamp(28px, 2.4vw, 34px); font-weight: 400; letter-spacing: -.04em; line-height: 1.05; }
.pcard__for { margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--text); }
.pcard__get { list-style: none; margin-top: 16px; display: grid; gap: 7px; }
.pcard__get li { position: relative; padding-left: 18px; font-size: 16px; color: rgba(var(--on), .66); }
.pcard__get li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 1px; background: rgba(var(--on), .5); }
.pcard dl { display: flex; gap: 28px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.pcard dt { font-size: 12px; color: var(--dim); }
.pcard dd { margin-top: 2px; font-size: 15px; font-weight: 500; }
.pcard .sq { margin-top: auto; align-self: flex-start; }
.pcard dl + .sq { margin-top: 24px; }
html[data-theme="light"] .pcard { background: #fff; border-color: rgba(14,12,10,.08); }
@media (max-width: 1080px) { .pcards { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .pcards .pcard, .dg__node, .dg__ln { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; transition: none !important; } }

/* =========================================================
   CLEAR: dezerv-style numbered timeline of white cards.
   Each card = the question in plain words + a small worked example.
   ========================================================= */
.clr { position: relative; padding: clamp(110px, 16vh, 180px) 0 clamp(90px, 12vh, 140px); border-top: 1px solid var(--line); background: #000; }
.clr__head { text-align: center; max-width: 760px; margin: 0 auto clamp(56px, 9vh, 96px); }
.clr__head .chip { margin-inline: auto; }
.clr__head .h2 { margin-top: 18px; font-size: clamp(44px, 6vw, 92px); line-height: .98; }
.clr__head .lede { margin: 22px auto 0; max-width: 48ch; }
.clr__steps { list-style: none; position: relative; max-width: 1060px; margin-inline: auto; display: grid; gap: 40px; padding-left: 76px; }
.clr__steps::before { content: ""; position: absolute; left: 21px; top: 30px; bottom: 30px; width: 1px; background: rgba(255,255,255,.14); }
.clr__steps::after { content: ""; position: absolute; left: 21px; top: 30px; width: 1px; height: calc((100% - 60px) * var(--prog, 0)); background: #fff; }
.clr__step { position: relative; opacity: 0; transform: translateY(46px) scale(.97); transition: opacity .9s ease, transform 1.1s var(--spring); }
.clr__step.is-in { opacity: 1; transform: none; }
.clr__n { position: absolute; left: -76px; top: 26px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-logo); font-weight: 700; font-size: 16px; color: rgba(255,255,255,.6); background: #111; border: 1px solid rgba(255,255,255,.16); transition: background .5s, color .5s, border-color .5s; }
.clr__step.is-in .clr__n { background: #fff; color: #000; border-color: #fff; }
.clr__card { display: grid; grid-template-columns: 1fr 1fr; background: #fff; color: #0B0B0C; border-radius: 22px; overflow: hidden; position: relative; z-index: 1; }
.clr__copy { padding: clamp(28px, 3.2vw, 44px); background: #F4F4F3; }
.clr__k { font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #6B6A66; }
.clr__copy h3 { margin-top: 14px; font-size: clamp(26px, 2.5vw, 36px); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; }
.clr__copy p:not(.clr__k) { margin-top: 14px; font-size: var(--t-read); line-height: var(--t-read-lh); color: #55534E; }
.clr__ui { padding: clamp(24px, 2.8vw, 36px); display: flex; flex-direction: column; justify-content: center; }
.clr__mean { margin: -22px 0 0; padding: 40px clamp(28px, 3.2vw, 44px) 24px; background: #141416; border-radius: 0 0 22px 22px; font-size: 15px; color: rgba(255,255,255,.62); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.clr__count { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: #fff; color: #000; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .clr__steps { padding-left: 0; gap: 28px; } .clr__steps::before, .clr__steps::after { display: none; } .clr__card { grid-template-columns: 1fr; } }

/* worked-example UI pieces (monochrome) */
.ui__cap { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 500; color: #3A3935; }
.ui__cap span { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #8A8780; border: 1px solid #E2E1DD; border-radius: 999px; padding: 3px 8px; }
.ui__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ui__chips li { padding: 8px 12px; border-radius: 999px; border: 1px solid #E2E1DD; font-size: 14px; color: #55534E; opacity: .45; transition: opacity .5s, background .5s, color .5s, border-color .5s; }
.is-in .ui__chips li { opacity: 1; }
.is-in .ui__chips li.pick { background: #0B0B0C; color: #fff; border-color: #0B0B0C; transition-delay: .9s; }
.ui__one { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: #F4F4F3; font-size: 15px; line-height: 1.5; color: #2A2925; min-height: 92px; }
.ui__one b { display: block; font-size: 12px; font-weight: 600; color: #8A8780; margin-bottom: 4px; }
.ui__one span::after { content: "▍"; margin-left: 1px; opacity: .5; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.ui__band { position: relative; height: 14px; margin-top: 26px; border-radius: 999px; background: linear-gradient(90deg, #E9E8E5, #D6D5D1 50%, #BEBDB8); }
.ui__band .zone { position: absolute; left: 0; top: -6px; bottom: -6px; width: 34%; border-radius: 10px; border: 1.5px dashed #0B0B0C; }
.ui__band .mark { position: absolute; top: 50%; left: 88%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #0B0B0C; box-shadow: 0 0 0 5px rgba(11,11,12,.12); transition: left 2.2s cubic-bezier(.45,0,.2,1) .5s; }
.is-in .ui__band .mark { left: 22%; }
.ui__band-l { display: flex; justify-content: space-between; margin-top: 12px; font-size: var(--t-micro); color: var(--c-ink-3); }
.ui__note { margin-top: 18px; font-size: 15px; color: #2A2925; }
.ui__bars { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; gap: 12px; height: 150px; margin-top: 20px; border-bottom: 1px solid #E2E1DD; }
.ui__bars i { display: block; height: 100%; border-radius: 6px 6px 0 0; background: #0B0B0C; transform-origin: bottom; transform: scaleY(0); transition: transform 1s var(--spring); }
.ui__bars i:nth-child(n) { transform: scaleY(0); }
.is-in .ui__bars i { transform: scaleY(var(--h)); }
.is-in .ui__bars i:nth-child(2) { transition-delay: .1s; } .is-in .ui__bars i:nth-child(3) { transition-delay: .2s; } .is-in .ui__bars i:nth-child(4) { transition-delay: .3s; } .is-in .ui__bars i:nth-child(5) { transition-delay: .4s; }
.ui__bars .bar15 { position: absolute; left: 0; right: 0; bottom: 46%; border-top: 1.5px dashed #8A8780; }
.ui__bars .bar15 span { position: absolute; right: 0; top: -22px; font-size: 11.5px; font-weight: 500; color: #55534E; background: #fff; padding: 0 4px; }
.ui__bars-l { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 8px; font-size: var(--t-micro); color: var(--c-ink-3); text-align: center; }
.ui__score { list-style: none; display: grid; gap: 10px; margin-top: 16px; }
.ui__score li { display: grid; grid-template-columns: 1fr 90px 30px; gap: 12px; align-items: center; font-size: 14.5px; color: #3A3935; }
.ui__score i { height: 6px; border-radius: 999px; background: #EDECE9; position: relative; overflow: hidden; }
.ui__score i::after { content: ""; position: absolute; inset: 0; background: #0B0B0C; border-radius: inherit; transform-origin: left; transform: scaleX(0); transition: transform 1s var(--spring) .2s; }
.is-in .ui__score i::after { transform: scaleX(var(--v)); }
.ui__score b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui__total { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin-top: 20px; padding: 14px 16px; border-radius: 14px; background: #F4F4F3; font-size: 13.5px; font-weight: 500; }
.ui__meter { position: relative; height: 10px; border-radius: 999px; background: #E2E1DD; }
.ui__meter > i { position: absolute; inset: 0; border-radius: inherit; background: #0B0B0C; transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--spring) .6s; }
.is-in .ui__meter > i { transform: scaleX(.71); }
.ui__meter .min { position: absolute; left: 65%; top: -8px; bottom: -8px; border-left: 1.5px dashed #6B6A66; }
.ui__meter .min span { position: absolute; left: -36px; top: -20px; font-size: 11px; font-weight: 500; color: #6B6A66; white-space: nowrap; }
.ui__num { font-family: var(--f); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui__rr { display: grid; gap: 16px; margin-top: 22px; }
.ui__rr div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: center; font-size: 14.5px; color: #3A3935; }
.ui__rr i { height: 22px; border-radius: 6px; transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--spring) .3s; }
.ui__rr .up { background: #0B0B0C; } .ui__rr .down { background: #C9C8C3; transition-delay: .6s; }
.is-in .ui__rr .up { transform: scaleX(1); } .is-in .ui__rr .down { transform: scaleX(.42); }
.ui__ratio { margin-top: 18px; font-size: 15px; color: #55534E; }
.ui__ratio b { font-size: 22px; color: #0B0B0C; margin-right: 6px; }
@media (prefers-reduced-motion: reduce) { .clr__step { opacity: 1; transform: none; } .clr__step * { transition: none !important; } .ui__band .mark { left: 22%; } .ui__bars i { transform: scaleY(var(--h)); } .ui__score i::after { transform: scaleX(var(--v)); } .ui__meter > i { transform: scaleX(.71); } .ui__rr .up { transform: scaleX(1); } .ui__rr .down { transform: scaleX(.42); } .ui__chips li { opacity: 1; font-size: 14px; } }

/* =========================================================
   PRODUCTS — dezerv-style stack. The heading holds the centre;
   white product cards rise over it and stack (GSAP dims and
   scales the card underneath as the next one arrives).
   ========================================================= */
.pstack { position: relative; background: #000; border-top: 1px solid var(--line); }
.pstack__head { height: 86vh; }
.pstack__head-in { position: sticky; top: 30vh; text-align: center; padding: 0 var(--pad); }
.pstack__head-in .chip { margin-inline: auto; }
.pstack__head-in .h2 { margin-top: 20px; font-size: clamp(52px, 7.4vw, 116px); line-height: .96; letter-spacing: -.05em; }
.pstack__cards { position: relative; z-index: 2; width: min(1280px, 100% - var(--pad) * 2); margin: -44vh auto 0; padding-bottom: 14vh; display: grid; gap: 7vh; }
.scard { position: sticky; top: calc(92px + var(--i) * 16px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 64px); align-items: center; min-height: min(74vh, 640px); padding: clamp(28px, 4vw, 60px); border-radius: 30px; background: #fff; color: #0B0B0C; box-shadow: 0 -24px 80px rgba(0,0,0,.55); transform-origin: 50% 0; will-change: transform; }
.scard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: var(--shade, 0); pointer-events: none; }
.scard__eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #6E6D69; }
.scard h3 { margin-top: 14px; font-size: clamp(30px, 3.1vw, 48px); font-weight: 500; letter-spacing: -.04em; line-height: 1.04; max-width: 15ch; }
.scard__ticks { list-style: none; margin-top: 26px; border-left: 2px solid #E6E5E1; display: grid; }
.scard__ticks li { position: relative; padding: 8px 0 8px 18px; font-size: var(--t-read); color: #6E6D69; }
.scard__ticks li:first-child { color: #0B0B0C; font-weight: 500; }
.scard__ticks li:first-child::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: #0B0B0C; }
.scard__price { margin-top: 22px; font-size: 16px; color: #6E6D69; }
.scard__price b { color: #0B0B0C; font-weight: 600; }
.scard__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.sq--dark { background: #0B0B0C; color: #fff; border-radius: 999px; }
.sq--dark:hover { background: #2A2A2C; }
.sq--ghost { border: 1px solid #D9D8D4; color: #0B0B0C; border-radius: 999px; }
.sq--ghost:hover { background: #F2F2F0; }
.scard__ui { align-self: stretch; display: grid; place-items: center; padding: clamp(18px, 2.4vw, 34px); border-radius: 22px; background: #F2F2F0; }

/* product screens (built in HTML so they stay sharp) */
.mui { width: min(440px, 100%); padding: 22px; border-radius: 20px; background: #fff; box-shadow: 0 1px 0 #E6E5E1, 0 30px 60px -30px rgba(0,0,0,.28); font-size: 14px; color: #2A2925; }
.mui__top { display: flex; align-items: center; gap: 10px; }
.mui__top b { font-weight: 600; font-size: 15px; color: #0B0B0C; }
.mui__top em { margin-left: auto; font-style: normal; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #8A8780; border: 1px solid #E6E5E1; border-radius: 999px; padding: 3px 8px; }
.mui__dot { width: 8px; height: 8px; border-radius: 50%; background: #0B0B0C; box-shadow: 0 0 0 4px #EDEDEA; }
.mui__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.mui__kpis div { padding: 10px 12px; border-radius: 12px; background: #F5F5F3; }
.mui__kpis small { display: block; font-size: var(--t-micro); color: var(--c-ink-3); }
.mui__kpis b { font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: #0B0B0C; font-variant-numeric: tabular-nums; }
.mui__rows { list-style: none; display: grid; gap: 10px; margin-top: 18px; }
.mui__rows li { display: grid; grid-template-columns: 104px 1fr 40px; gap: 10px; align-items: center; font-size: 14.5px; }
.mui__rows i { height: 8px; border-radius: 999px; background: #EDEDEA; position: relative; overflow: hidden; }
.mui__rows i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #0B0B0C; transform-origin: left; transform: scaleX(0); transition: transform 1s var(--spring); }
.mui__rows li.more i::after { background: #B9B8B3; }
.scard.is-in .mui__rows i::after { transform: scaleX(var(--w)); }
.scard.is-in .mui__rows li:nth-child(2) i::after { transition-delay: .08s; } .scard.is-in .mui__rows li:nth-child(3) i::after { transition-delay: .16s; } .scard.is-in .mui__rows li:nth-child(4) i::after { transition-delay: .24s; } .scard.is-in .mui__rows li:nth-child(5) i::after { transition-delay: .32s; }
.mui__rows b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.mui__ok { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: #F5F5F3; font-size: 14.5px; }
.mui__ok span { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #0B0B0C; color: #fff; font-size: 11px; }
.mui__theme { margin-top: 16px; font-size: 13.5px; } .mui__theme span { display: inline-block; margin-right: 8px; font-size: 11px; color: #8A8780; text-transform: uppercase; letter-spacing: .06em; }
.mui__thesis { margin-top: 8px; font-size: 17px; line-height: 1.4; letter-spacing: -.01em; color: #0B0B0C; font-weight: 500; }
.mui__range { margin-top: 18px; } .mui__range small { font-size: 11.5px; color: #8A8780; }
.mui__band { position: relative; height: 8px; margin-top: 10px; border-radius: 999px; background: #EDEDEA; }
.mui__band i { position: absolute; top: 0; bottom: 0; left: 30%; width: 0; border-radius: inherit; background: #0B0B0C; transition: width 1.2s var(--spring) .2s; }
.scard.is-in .mui__band i { width: 34%; }
.mui__band-l { display: flex; justify-content: space-between; margin-top: 8px; font-size: var(--t-micro); color: var(--c-ink-3); }
.mui__band-l span:nth-child(2) { color: #0B0B0C; font-weight: 500; }
.mui__fals { list-style: none; margin-top: 16px; border-top: 1px solid #EDEDEA; }
.mui__fals li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #EDEDEA; font-size: 14.5px; }
.mui__fals em { font-style: normal; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: #F5F5F3; color: #55534E; }
.mui__goals { list-style: none; display: grid; gap: 12px; margin-top: 16px; }
.mui__goals li { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #F5F5F3; }
.mui__goals svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.mui__goals circle { fill: none; stroke: #E2E1DD; stroke-width: 4; }
.mui__goals circle.p { stroke: #0B0B0C; stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: 113.1; transition: stroke-dashoffset 1.4s var(--spring) .2s; }
.scard.is-in .mui__goals circle.p { stroke-dashoffset: calc(113.1 * (1 - var(--p))); }
.mui__goals b { display: block; font-weight: 600; color: #0B0B0C; }
.mui__goals small { font-size: var(--t-micro); color: var(--c-ink-3); }
.mui__goals span { font-size: 11.5px; color: #55534E; }
@media (max-width: 960px) {
  .scard { grid-template-columns: 1fr; min-height: 0; border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) { .mui__rows i::after { transform: scaleX(var(--w)); } .mui__band i { width: 34%; } .mui__goals circle.p { stroke-dashoffset: calc(113.1 * (1 - var(--p))); } }

/* CLEAR: dezerv-style VS card under each white card */
.clr__vs { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; margin-top: -22px; padding: 46px clamp(28px, 3.2vw, 44px) 26px; border-radius: 0 0 22px 22px; background: #141416; }
.clr__vsb { position: absolute; left: clamp(28px, 3.2vw, 44px); top: 22px; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #000; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .04em; border: 2px solid #141416; z-index: 2; }
.clr__vs p { font-size: var(--t-read); line-height: 1.45; color: rgba(255,255,255,.55); }
.clr__vs p b { display: block; margin-bottom: 2px; font-size: 15px; font-weight: 500; color: #fff; }
/* VS strip sits above the card so its badge can sit on the seam; its dark fill starts below the card's edge */
.clr__vs { z-index: 2; background: linear-gradient(transparent 22px, #141416 22px); }
@media (max-width: 960px) { .pstack__cards { width: auto; margin-inline: var(--pad); } .scard { padding: 26px 22px; } .scard__ui { padding: 14px; } .mui { padding: 16px; } .mui__rows li { grid-template-columns: 92px 1fr 36px; font-size: 14.5px; } }
@media (max-width: 960px) { .scard { width: 100%; } }
@media (max-width: 960px) { .pstack__cards { grid-template-columns: minmax(0, 1fr); } .scard { grid-template-columns: minmax(0, 1fr); min-width: 0; } .scard__copy, .scard__ui { min-width: 0; } }

/* ===== Phones: keep the stacking cards and the CLEAR markers (tuned, not removed) ===== */
@media (max-width: 960px) {
  .pstack__head { height: 62vh; padding: 0; }
  .pstack__head-in { position: sticky; top: 24vh; }
  .pstack__head-in .h2 { font-size: clamp(42px, 12vw, 60px); }
  .pstack__cards { margin-top: -30vh; gap: 4vh; padding-bottom: 8vh; }
  .scard { position: sticky; top: calc(68px + var(--i) * 10px); transform: none; box-shadow: 0 -16px 50px rgba(0,0,0,.6); }
  .scard__ticks li { font-size: var(--t-read); padding: 6px 0 6px 14px; }
  .scard h3 { font-size: 27px; }
  .clr__n { display: grid; left: auto; right: 16px; top: -18px; width: 38px; height: 38px; font-size: 14px; z-index: 3; }
  .clr__steps { padding-left: 0; }
  .clr__step { padding-top: 18px; }
}
@media (max-width: 960px) { .scard { transform: none; } }
@media (max-width: 960px) { .scard { top: var(--stick, 68px); } }

/* =========================================================
   PORTFOLIO SCAN — pinned scroll story (GSAP, scrubbed).
   A pile of holdings → read line by line → a written review.
   ========================================================= */
.scan { position: relative; height: 340vh; background: #000; border-top: 1px solid var(--line); }
.scan__pin { position: sticky; top: 0; height: 100vh; min-height: 640px; overflow: hidden; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 72px); align-items: center; max-width: 1440px; margin-inline: auto; padding: 80px var(--pad) 56px; }
.scan__copy { position: relative; z-index: 3; }
.scan__lines { position: relative; margin-top: 26px; min-height: 360px; }
.scan__line { position: absolute; inset: 0 0 auto; opacity: 0; transform: translateY(30px); filter: blur(8px); transition: opacity .6s, transform .8s var(--spring), filter .6s; pointer-events: none; }
.scan__line.is-on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.scan__n { font-size: 13px; font-weight: 600; letter-spacing: .14em; color: rgba(var(--on),.4); font-variant-numeric: tabular-nums; }
.scan__line .h2 { margin-top: 10px; font-size: clamp(38px, 4.2vw, 64px); line-height: 1.02; }
.scan__line .h2 span { color: rgba(var(--on),.45); -webkit-text-fill-color: rgba(var(--on),.45); }
.scan__sub { margin-top: 18px; font-size: var(--t-read); line-height: 1.55; color: rgba(var(--on),.66); max-width: 40ch; }
.scan__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.scan__prog { display: flex; gap: 8px; margin-top: 8px; }
.scan__prog i { width: 34px; height: 3px; border-radius: 2px; background: rgba(var(--on),.16); overflow: hidden; position: relative; }
.scan__prog i::after { content: ""; position: absolute; inset: 0; background: var(--text); transform-origin: left; transform: scaleX(var(--f, 0)); }
.scan__stage { position: relative; height: min(76vh, 680px); }
.scan__card { position: absolute; left: 50%; top: 50%; width: min(460px, 92%); height: min(620px, 100%); transform: translate(-50%, -50%); padding: 22px; border-radius: 26px; background: #fff; color: #0B0B0C; box-shadow: 0 50px 120px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.1); overflow: hidden; opacity: 0; }
.scan__head { position: relative; display: flex; align-items: center; gap: 10px; height: 28px; }
.scan__head b { position: absolute; left: 20px; font-size: 15.5px; font-weight: 600; transition: opacity .4s, transform .5s var(--spring); }
.scan__head .t-b { opacity: 0; transform: translateY(8px); }
.scan__card.is-report .t-a { opacity: 0; transform: translateY(-8px); }
.scan__card.is-report .t-b { opacity: 1; transform: none; }
.scan__head em { margin-left: auto; font-style: normal; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #8A8780; border: 1px solid #E6E5E1; border-radius: 999px; padding: 3px 8px; }
.scan__dot { width: 8px; height: 8px; border-radius: 50%; background: #0B0B0C; box-shadow: 0 0 0 4px #EDEDEA; }
.scan__rows { margin-top: 14px; display: grid; gap: 6px; }
.scan__rows div { height: 36px; border-radius: 10px; background: #F5F5F3; }
.scan__beam { position: absolute; left: 0; right: 0; top: 64px; height: 90px; background: linear-gradient(180deg, rgba(11,11,12,0), rgba(11,11,12,.07) 70%, rgba(11,11,12,.0)); border-bottom: 1.5px solid rgba(11,11,12,.55); opacity: 0; pointer-events: none; z-index: 3; }
.scan__report { position: absolute; inset: 62px 22px 22px; opacity: 0; transform: translateY(24px); }
.scan__rk { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8A8780; margin-top: 6px; }
.scan__rk + ul { list-style: none; margin: 10px 0 18px; display: grid; gap: 8px; }
.scan__report li { padding: 12px 14px; border-radius: 12px; background: #F5F5F3; }
.scan__report li b { display: block; font-size: 16px; font-weight: 600; }
.scan__report li span { font-size: 14.5px; color: #6E6D69; }
.scan__q { margin-top: 8px; font-size: 15px; color: #3A3935; }
.scan__by { display: flex; align-items: center; gap: 10px; position: absolute; left: 0; bottom: 0; font-size: 13.5px; font-weight: 500; }
.scan__by img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.scan__by small { font-weight: 400; color: #8A8780; }
.scan__chips { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.hchip { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border-radius: 10px; background: #fff; color: #0B0B0C; font-size: 13.5px; font-weight: 500; white-space: nowrap; box-shadow: 0 14px 34px -14px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.06); will-change: transform; }
.hchip small { font-size: 11px; font-weight: 400; color: #8A8780; }
.hchip b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.hchip i { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; padding: 3px 7px; border-radius: 999px; background: #0B0B0C; color: #fff; opacity: 0; transform: scale(.6); }
.scan__fine { position: absolute; left: var(--pad); bottom: 18px; font-size: 12px; color: rgba(var(--on),.62); }   /* disclaimer: ≥4.5:1 in both themes */
@media (max-width: 960px) {
  .scan { height: 320vh; }
  .scan__pin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; gap: 10px; padding: 72px var(--pad) 40px; }
  .scan__copy { order: 2; } .scan__stage { order: 1; height: 50vh; min-height: 360px; }
  .scan__lines { margin-top: 12px; min-height: 230px; }
  .scan__copy .chip { display: none; }
  .scan__line .h2 { font-size: 32px; }
  .scan__sub { font-size: var(--t-read); margin-top: 10px; }
  .scan__card { width: min(340px, 96%); padding: 16px; border-radius: 20px; }
  .scan__rows { gap: 4px; } .scan__rows div { height: 26px; }
  .hchip { height: 26px; font-size: 11.5px; padding: 0 9px; gap: 6px; } .hchip small { display: none; }
  .scan__report { inset: 52px 16px 16px; } .scan__report li { padding: 8px 10px; } .scan__report li b { font-size: 16px; } .scan__report li span { font-size: 14.5px; }
  .scan__rk + ul { gap: 5px; margin-bottom: 10px; } .scan__q { display: none; font-size: 15px; }
  .scan__fine { bottom: 10px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .scan { height: auto; } .scan__pin { position: relative; height: auto; } }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 960px) {
  .scan__rows div { height: 24px; } .scan__rows { gap: 3px; margin-top: 10px; } .hchip { height: 24px; }
  .scan__by { position: static; margin-top: 10px; } .scan__by img { width: 28px; height: 28px; }
  .scan__fine { position: static; order: 3; margin-top: 6px; }
  .scan__lines { min-height: 210px; }
  .scan__pin { grid-template-rows: auto 1fr auto; }
}

/* laptop widths: keep the header links clear of the controls (matches shared/ic-nav.css) */
@media (min-width: 1201px) and (max-width: 1360px) { .nav__links { gap: 20px; } .nav__links a, .nav__login { font-size: 14px; } .nav__end { gap: 6px; } }
/* one bar at a time for the older .nav header (home / insights / team) */
.nav { transition: height .4s var(--spring), background .35s, box-shadow .35s, transform .55s var(--spring); }
html.hdr-up .nav { transform: translateY(-100%); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }

/* =========================================================
   HERO 2 — centred claim + white "tip vs story" panel
   ========================================================= */
.hero2 { position: relative; padding: calc(72px + clamp(32px, 6vh, 56px)) var(--pad) 40px; overflow: hidden; background: #000; }
.hero2__bg { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(42% 38% at var(--mx, 50%) var(--my, 42%), rgba(255,255,255,.085), transparent 70%), radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1.5px) 0 0 / 22px 22px;
  mask-image: radial-gradient(70% 60% at 50% 45%, #000 40%, transparent); -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000 40%, transparent); }
.hero2__copy { position: relative; z-index: 2; text-align: center; max-width: 900px; margin-inline: auto; }
.hero2__copy .chip { margin-inline: auto; }
.hero2__h { margin-top: 20px; font-size: clamp(46px, 6.8vw, 98px); line-height: .96; letter-spacing: -.05em; font-weight: 500; color: var(--text); }
.hero2__h .w { display: inline-block; opacity: 0; transform: translateY(.6em) rotate(1.5deg); transform-origin: 0 100%; }
.hero2__h .soft { color: rgba(var(--on), .42); font-weight: 300; }
.hero2__sub { margin: 20px auto 0; max-width: 60ch; font-size: var(--t-hero); line-height: 1.6; color: rgba(var(--on), .72); }
.hero2__btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero2 .hero__facts { margin-top: 16px; }
.hero2__stage { position: relative; z-index: 2; margin: clamp(28px, 5vh, 44px) auto 0; width: min(1120px, 100%); perspective: 1600px; }
.hero2__panel { position: relative; border-radius: 28px; background: #fff; color: #0B0B0C; padding: clamp(20px, 2.6vw, 36px); box-shadow: 0 60px 140px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.08); transform-origin: 50% 100%; will-change: transform, opacity; }
.hp { display: grid; grid-template-columns: minmax(0, .82fr) auto minmax(0, 1.18fr); gap: clamp(16px, 2.4vw, 32px); align-items: stretch; }
.hp__k { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8A8780; }
.hp__k em { font-style: normal; font-size: 10.5px; letter-spacing: .06em; padding: 3px 8px; border: 1px solid #E6E5E1; border-radius: 999px; color: #8A8780; }
.hp__tip { display: flex; flex-direction: column; padding: 4px; }
.hp__chat { display: grid; gap: 8px; margin-top: 16px; align-content: start; }
.bub { position: relative; justify-self: start; max-width: 92%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: #F1F1EF; color: #2A2925; font-size: 14.5px; line-height: 1.4; opacity: 0; transform: translateY(10px) scale(.96); transform-origin: 0 100%; }
.bub::after { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; height: 1.5px; background: #0B0B0C; transform: scaleX(0); transform-origin: left; }
.bub.is-x { color: #A09E99; }
.bub.is-x::after { transform: scaleX(1); transition: transform .5s cubic-bezier(.6,0,.2,1); }
.hp__verdict { margin-top: auto; padding-top: 16px; font-size: 14px; color: #6E6D69; opacity: 0; }
.hp__mid { display: grid; place-items: center; }
.hp__vs { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #0B0B0C; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: 0; transform: scale(.5); }
.hnote { margin-top: 14px; padding: 18px 20px 16px; border-radius: 18px; background: #F5F5F3; box-shadow: inset 0 0 0 1px #E6E5E1; }
.hnote__t { font-size: 12px; font-weight: 600; color: #8A8780; }
.hnote__one { margin-top: 8px; min-height: 2.6em; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.35; font-weight: 500; letter-spacing: -.015em; color: #0B0B0C; }
.hnote__one.typing::after { content: "▍"; margin-left: 1px; opacity: .5; animation: caret 1s steps(1) infinite; }
.hnote__clear { list-style: none; margin-top: 14px; display: grid; gap: 6px; }
.hnote__clear li { display: grid; grid-template-columns: 22px 1fr auto 18px; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 10px; background: #fff; font-size: 13.5px; color: #2A2925; opacity: 0; transform: translateX(-10px); }
.hnote__clear b { font-weight: 600; color: #0B0B0C; }
.hnote__clear span { color: #8A8780; font-size: 12.5px; }
.hnote__clear i { width: 18px; height: 18px; border-radius: 50%; background: #0B0B0C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; transform: scale(0); }
.hnote__foot { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #E6E5E1; font-size: 12.5px; color: #8A8780; opacity: 0; }
.hnote__foot b { color: #0B0B0C; font-weight: 600; }
.hp__film { position: absolute; right: 22px; bottom: -22px; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 14px; border-radius: 999px; background: #0B0B0C; color: #fff; font-size: 14.5px; font-weight: 500; box-shadow: 0 16px 40px -14px rgba(0,0,0,.9); transition: transform .4s var(--spring); }
.hp__film:hover { transform: translateY(-2px); }
.hp__film i { width: 0; height: 0; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.hp__film small { color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; }
.hero2__fine { margin-top: 40px; text-align: center; font-size: 12px; color: rgba(var(--on), .42); }
html[data-theme="light"] .hero2 { background: var(--bg); }
html[data-theme="light"] .hero2__bg { background: radial-gradient(42% 38% at var(--mx, 50%) var(--my, 42%), rgba(14,12,10,.06), transparent 70%), radial-gradient(circle, rgba(14,12,10,.09) 1px, transparent 1.5px) 0 0 / 22px 22px; }
@media (max-width: 860px) {
  .hero2 { padding-top: calc(62px + 40px); }
  .hp { grid-template-columns: 1fr; gap: 10px; }
  .hp__mid { height: 40px; }
  .hp__chat { grid-template-columns: 1fr 1fr; }
  .bub { max-width: 100%; font-size: 13px; padding: 8px 11px; }
  .hp__verdict { padding-top: 10px; font-size: 13px; }
  .hnote__clear li { grid-template-columns: 20px 1fr 18px; } .hnote__clear span { display: none; }
  .hp__film { right: 14px; bottom: -20px; height: 42px; font-size: 13.5px; }
  .hero2__fine { margin-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero2__h .w, .bub, .hp__verdict, .hp__vs, .hnote__clear li, .hnote__foot { opacity: 1 !important; transform: none !important; }
  .hnote__clear i { transform: scale(1); } .bub.is-x::after { transition: none; }
}

/* hero noise: blurred tip phrases drifting behind the claim; they part around the cursor and dissolve on scroll */
.hero2__noise { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero2__noise span { position: absolute; left: 0; top: 0; white-space: nowrap; font-family: var(--f-display); font-weight: 600; letter-spacing: -.02em; color: rgba(var(--on), .19); will-change: transform, opacity, filter; }
html[data-theme="light"] .hero2__noise span { color: rgba(14,12,10,.12); }
@media (prefers-reduced-motion: reduce) { .hero2__noise { display: none; } }

/* jargon helper: dotted terms explain themselves on hover / tap */
.jg { border-bottom: 1.5px dotted rgba(var(--on), .5); cursor: help; color: inherit; }
.jg:focus-visible { outline: 1.5px solid var(--text); outline-offset: 2px; border-radius: 3px; }
.jgpop { position: fixed; z-index: 300; max-width: 300px; padding: 12px 14px 13px; border-radius: 14px; background: #fff; color: #0B0B0C; font-size: 14px; line-height: 1.45; letter-spacing: -.005em; box-shadow: 0 20px 50px -14px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.06); pointer-events: none; opacity: 0; transform-origin: var(--ox, 50%) 100%; }
.jgpop b { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8A8780; }

/* =========================================================
   LEARN — "New to investing? Start here." pinned horizontal scroll
   ========================================================= */
.learn { position: relative; height: 380vh; background: #000; border-top: 1px solid var(--line); }
.learn__pin { position: sticky; top: 0; height: 100vh; min-height: 620px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: clamp(22px, 4vh, 40px); }
.learn__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 0 var(--pad); max-width: 1440px; width: 100%; margin-inline: auto; }
.learn__h { margin-top: 16px; font-size: clamp(38px, 5vw, 76px); line-height: 1; letter-spacing: -.045em; font-weight: 600; color: var(--text); }
.learn__h span { display: block; font-weight: 400; color: rgba(var(--on), .42); }
.learn__prog { display: flex; gap: 8px; padding-bottom: 10px; }
.learn__prog i { position: relative; width: 44px; height: 3px; border-radius: 2px; background: rgba(var(--on), .16); overflow: hidden; }
.learn__prog i::after { content: ""; position: absolute; inset: 0; background: var(--text); transform-origin: left; transform: scaleX(var(--f, 0)); }
.learn__track { display: flex; gap: clamp(16px, 2vw, 28px); padding: 0 var(--pad); width: max-content; will-change: transform; }
.lcard { flex: none; width: min(1040px, 82vw); height: min(58vh, 520px); min-height: 400px; display: grid; grid-template-columns: 1.05fr .95fr; border-radius: 30px; overflow: hidden; background: #fff; color: #0B0B0C; }
.lcard__art { position: relative; display: grid; place-items: center; padding: clamp(18px, 3vw, 40px); background: #F2F2F0; }
.lcard__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 3.4vw, 52px); }
.lcard__n { font-size: 13px; font-weight: 600; letter-spacing: .14em; color: #8A8780; }
.lcard h3 { margin-top: 12px; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.08; letter-spacing: -.035em; font-weight: 600; }
.lcard__copy > p:not(.lcard__n) { margin-top: 16px; font-size: var(--t-read); line-height: var(--t-read-lh); color: #55534E; max-width: 40ch; }
.lcard .jg { border-bottom-color: rgba(11,11,12,.45); }
.lcard__go { margin-top: 24px; align-self: flex-start; background: #0B0B0C !important; color: #fff !important; }

/* 01 business made of slices */
.biz { position: relative; width: min(380px, 100%); padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0 30px 60px -30px rgba(0,0,0,.3); }
.biz__name { font-size: 13px; color: #8A8780; } .biz__name b { display: block; font-size: 16px; color: #0B0B0C; }
.biz__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin-top: 14px; }
.biz__grid i { aspect-ratio: 1; border-radius: 5px; background: #E4E3DF; }
.biz__grid i.mine { background: #0B0B0C; }
.biz__you { position: absolute; right: -14px; bottom: -14px; padding: 7px 13px; border-radius: 999px; background: #0B0B0C; color: #fff; font-size: 13px; font-weight: 600; opacity: 0; }
/* 02 noisy price vs calm business */
.noisy { width: min(440px, 100%); height: auto; overflow: visible; }
.noisy path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.noisy__jit { stroke: #B9B8B3; stroke-width: 1.6; }
.noisy__calm { stroke: #0B0B0C; stroke-width: 3.2; }
.noisy text { font-family: var(--f-ui); font-size: 13px; }
.noisy__l1 { fill: #9A9893; } .noisy__l2 { fill: #0B0B0C; font-weight: 600; }
/* 03 locker */
.locker { display: grid; gap: 18px; width: min(360px, 100%); }
.locker__box { display: grid; gap: 6px; padding: 20px; border-radius: 20px; background: #0B0B0C; color: #fff; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.locker__lbl { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.locker__box b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.locker__sh { display: flex; gap: 6px; margin-top: 8px; } .locker__sh i { width: 26px; height: 34px; border-radius: 5px; background: rgba(255,255,255,.18); transform: translateY(14px); opacity: 0; }
.locker__key { margin-top: 8px; font-size: 13px; color: rgba(255,255,255,.75); }
.locker__us { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; font-size: 13.5px; color: #3A3935; }
.locker__us span { padding: 6px 12px; border-radius: 999px; border: 1px solid #D9D8D4; background: #fff; font-weight: 600; }
.locker__us i { height: 0; border-top: 1.5px dashed #9A9893; position: relative; }
.locker__us i::after { content: "✕"; position: absolute; right: -2px; top: -11px; font-style: normal; font-size: 13px; color: #0B0B0C; }
.locker__us em { grid-column: 1 / -1; font-style: normal; font-size: 12.5px; color: #8A8780; }
/* 04 sieve */
.sieve { width: min(400px, 100%); }
.sieve__dots { display: grid; grid-template-columns: repeat(12, 1fr); gap: 7px; }
.sieve__dots i { aspect-ratio: 1; border-radius: 50%; background: #C9C8C3; }
.sieve__dots i.keep { background: #0B0B0C; }
.sieve__cap { margin-top: 18px; display: flex; align-items: baseline; gap: 10px; }
.sieve__n { font-size: 34px; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.sieve__l { font-size: 14px; color: #6E6D69; }
@media (max-width: 860px) {
  .learn { height: 420vh; }
  .learn__pin { justify-content: flex-start; padding-top: 84px; gap: 18px; }
  .learn__top { flex-direction: column; align-items: flex-start; gap: 12px; }
  .learn__h { font-size: 34px; }
  .lcard { width: 86vw; height: auto; min-height: 0; grid-template-columns: 1fr; grid-template-rows: 220px auto; border-radius: 24px; }
  .lcard__art { padding: 16px; }
  .lcard__copy { padding: 20px 20px 24px; }
  .lcard h3 { font-size: 24px; } .lcard__copy > p:not(.lcard__n) { font-size: var(--t-read); margin-top: 10px; line-height: var(--t-read-lh); }
  .biz { padding: 14px; } .biz__grid { gap: 4px; }
  .locker { gap: 12px; } .locker__box { padding: 14px; } .locker__box b { font-size: 18px; }
  .sieve__dots { gap: 5px; } .sieve__n { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .learn { height: auto; } .learn__pin { position: relative; height: auto; padding: 96px 0; }
  .learn__track { flex-direction: column; width: auto; } .lcard { width: auto; }
  .biz__you, .locker__sh i { opacity: 1; transform: none; }
}

.sieve__dots { grid-template-columns: repeat(18, 1fr); gap: 6px; }
@media (max-width: 860px) {
  .sieve__dots { grid-template-columns: repeat(18, 1fr); gap: 4px; }
  .lcard { grid-template-rows: 230px auto; }
  .lcard__art { overflow: hidden; }
  .hero2__noise span { opacity: .5; }
}

/* hero noise v2: transforms come from JS (lanes + focus lens) */
.hero2__noise { -webkit-mask-image: radial-gradient(38% 34% at 50% 42%, rgba(0,0,0,.18) 30%, #000 85%); mask-image: radial-gradient(38% 34% at 50% 42%, rgba(0,0,0,.18) 30%, #000 85%); }
.hero2__noise span { will-change: transform, filter, opacity; }
.hero2__noise span.lit { color: #fff; text-shadow: 0 0 24px rgba(255,255,255,.35); }
html[data-theme="light"] .hero2__noise span.lit { color: #0B0B0C; text-shadow: none; }
.hero2 { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; }
.hero2__copy { margin-top: -2vh; }

/* =========================================================
   FILM showcase — sells the 1-minute explainer
   ========================================================= */
.filmx { position: relative; padding: clamp(64px, 10vh, 120px) var(--pad) clamp(70px, 10vh, 120px); background: #000; border-top: 1px solid var(--line); }
.filmx__head { max-width: 760px; margin: 0 auto; text-align: center; }
.filmx__head .chip { margin-inline: auto; }
.filmx__h { margin-top: 18px; font-size: clamp(36px, 4.8vw, 72px); line-height: 1.02; letter-spacing: -.045em; font-weight: 600; color: var(--text); }
.filmx__sub { margin: 18px auto 0; max-width: 58ch; font-size: var(--t-intro); line-height: 1.6; color: rgba(var(--on), .68); }
.filmx__frame { position: relative; width: min(1240px, 100%); margin: clamp(36px, 6vh, 56px) auto 0; aspect-ratio: 16 / 9; border-radius: 30px; overflow: hidden; background: #0A0A0B; box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 70px 160px -50px rgba(0,0,0,1); transform-origin: 50% 30%; will-change: transform; }
.filmx__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.filmx__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.08) 26%, rgba(0,0,0,0) 42%); pointer-events: none; }
.filmx__now { position: absolute; left: clamp(18px, 2.4vw, 32px); top: clamp(16px, 2.2vw, 28px); display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; border-radius: 999px; background: rgba(0,0,0,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; font-size: 13.5px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.filmx__now i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: filmxLive 1.6s ease-in-out infinite; }
@keyframes filmxLive { 50% { opacity: .25; } }
.filmx__now span { color: rgba(255,255,255,.6); }
.filmx__now b { font-weight: 600; }
.filmx__play { position: absolute; left: clamp(18px, 2.4vw, 32px); bottom: clamp(24px, 3vw, 40px); display: inline-flex; align-items: center; gap: 16px; padding: 10px 26px 10px 10px; border-radius: 999px; background: #fff; color: #0B0B0C; box-shadow: 0 20px 50px -16px rgba(0,0,0,.8); transition: transform .45s var(--spring), box-shadow .45s; text-align: left; }
.filmx__play:hover { transform: translateY(-2px) scale(1.02); }
.filmx__play:active { transform: scale(.97); transition-duration: .1s; }
.filmx__pb { position: relative; width: 56px; height: 56px; border-radius: 50%; background: #0B0B0C; display: grid; place-items: center; }
.filmx__pb::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgba(11,11,12,.25); animation: filmxRing 2.4s cubic-bezier(.2,.9,.25,1) infinite; }
@keyframes filmxRing { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.filmx__pb i { margin-left: 4px; width: 0; height: 0; border-left: 15px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.filmx__pt b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.filmx__pt small { font-size: 13px; color: #6E6D69; }
.filmx__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.14); }
.filmx__bar i { display: block; height: 100%; width: 0; background: #fff; }
.filmx__ch { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; width: min(1240px, 100%); margin: 16px auto 0; }
.filmx__ch button { display: grid; gap: 8px; width: 100%; padding: 6px; border-radius: 16px; background: transparent; color: rgba(var(--on), .55); text-align: left; transition: background .35s, color .35s; }
.filmx__ch img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; opacity: .55; filter: grayscale(1); transition: opacity .35s, transform .5s var(--spring); }
.filmx__ch span { display: grid; gap: 1px; padding: 0 4px 4px; font-size: 14.5px; line-height: 1.3; }
.filmx__ch b { font-size: var(--t-micro); font-weight: 500; color: rgba(var(--on), .4); font-variant-numeric: tabular-nums; }
.filmx__ch button:hover img { opacity: .9; transform: scale(1.02); }
.filmx__ch button.on { background: rgba(var(--on), .07); color: var(--text); }
.filmx__ch button.on img { opacity: 1; }
.filmx__ch button:focus-visible { outline: 1.5px solid var(--text); outline-offset: 2px; }
.filmx__fine { margin-top: 18px; text-align: center; font-size: 13.5px; color: rgba(var(--on), .58); }
@media (max-width: 860px) {
  .filmx__frame { border-radius: 20px; }
  .filmx__play { left: 50%; bottom: 50%; transform: translate(-50%, 50%); padding: 8px 20px 8px 8px; gap: 12px; }
  .filmx__play:hover { transform: translate(-50%, 50%); }
  .filmx__pb { width: 46px; height: 46px; } .filmx__pt b { font-size: 15px; } .filmx__pt small { font-size: 12px; }
  .filmx__now { font-size: 12px; padding: 6px 11px 6px 10px; } .filmx__now span { display: none; }
  .filmx__ch { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding: 0 var(--pad); }
  .filmx__ch li { flex: none; width: 42vw; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .filmx__now i, .filmx__pb::before { animation: none; } }

.filmx__pt b, .filmx__pt small { white-space: nowrap; }
@media (max-width: 860px) { .filmx__play { padding-right: 18px; } }

/* homepage hero on the shared one-screen system (ic-hero.css); the noise layer + word motion stay ours */
.hero2.xhero { min-height: 560px; height: 100vh; height: 100svh; padding-bottom: 64px; display: grid; place-items: center; }
.hero2 .xhero__in { margin-top: 0; max-width: none; }
.hero2 .hero2__h.xhero__h { font-size: clamp(44px, min(10.4vw, 15.5vh), 168px); line-height: .94; letter-spacing: -.055em; font-weight: 600; margin-top: clamp(14px, 2.4vh, 26px); }
.hero2 .hero2__sub.xhero__sub { max-width: 50ch; font-size: var(--t-hero); margin-top: clamp(14px, 2.8vh, 28px); }
.hero2 .hero2__btns.xhero__btns { margin-top: clamp(20px, 3.6vh, 36px); }
.hero2 .hero__facts.xhero__facts { margin-top: clamp(14px, 2.4vh, 24px); }
@media (max-width: 760px) {
  .hero2 .hero2__h.xhero__h { font-size: clamp(40px, min(12.6vw, 8.6vh), 64px); }
  .hero2 .hero2__btns.xhero__btns { width: 100%; flex-direction: column; } .hero2 .hero2__btns.xhero__btns > * { width: 100%; }
}
@media (min-width: 761px) and (max-aspect-ratio: 4/5) { .hero2 .hero2__h.xhero__h { font-size: clamp(60px, 11.2vw, 140px); } .hero2 .hero2__sub.xhero__sub { font-size: var(--t-hero); max-width: 50ch; } }
@media (max-width: 860px) { .clr__vs { grid-template-columns: 1fr; gap: 12px; padding-top: 44px; } .clr__vs .clr__count { justify-self: start; } .clr__vs p { font-size: var(--t-read); } }

/* =========================================================
   PHONES — layouts that never depend on the screen being tall
   ========================================================= */
@media (max-width: 760px) {
  /* Learn: native swipe carousel instead of a pinned sideways scroll */
  .learn.is-swipe { height: auto; padding: 72px 0 64px; }
  .learn.is-swipe .learn__pin { position: relative; height: auto; min-height: 0; padding: 0; overflow: visible; gap: 22px; }
  .learn.is-swipe .learn__track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 20px 8px; scroll-padding: 0 20px; gap: 12px; }
  .learn.is-swipe .learn__track::-webkit-scrollbar { display: none; }
  .learn.is-swipe .lcard { width: calc(100vw - 52px); scroll-snap-align: start; grid-template-rows: auto auto; }
  .learn.is-swipe .lcard__art { min-height: 200px; padding: 18px 16px; }
  .learn.is-swipe .lcard__copy { padding: 18px 18px 22px; }
  .learn.is-swipe .biz__grid i { border-radius: 4px; }
  .learn.is-swipe .biz__you { right: 6px; bottom: 6px; }
  .learn.is-swipe .learn__prog { padding: 0; }
  .learn.is-swipe .learn__top::after { content: "Swipe →"; font-size: 13px; color: rgba(var(--on), .5); }

  /* Scan: sticky card on top, the three steps scroll underneath (no fixed-height frame) */
  .scan.is-phone { height: auto; padding: 64px 0 40px; }
  .scan.is-phone .scan__pin { position: relative; height: auto; min-height: 0; display: block; padding: 0 20px; overflow: visible; }
  .scan.is-phone .scan__stage { position: sticky; top: 64px; z-index: 1; height: min(56svh, 420px); min-height: 300px; margin: 0 -4px; }
  .scan.is-phone .scan__card { width: 100%; height: 100%; }
  .scan.is-phone .scan__copy { position: relative; z-index: 2; margin-top: 18px; }
  .scan.is-phone .scan__lines { min-height: 0; margin-top: 0; }
  .scan.is-phone .scan__line { position: relative; inset: auto; min-height: 62svh; padding: 22px 18px 24px; margin-top: 12px; border-radius: 20px; background: rgba(12,12,13,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 0 0 1px rgba(255,255,255,.08); opacity: .35; filter: none; transform: none; display: flex; flex-direction: column; justify-content: flex-start; }
  .scan.is-phone .scan__line.is-on { opacity: 1; }
  .scan.is-phone .scan__line:last-child { min-height: 0; }
  .scan.is-phone .scan__prog { display: none; }
  .scan.is-phone .scan__fine { position: static; margin: 16px 20px 0; }
  .scan.is-phone .scan__q { display: block; font-size: 12.5px; }
  .scan.is-phone .scan__cta { flex-direction: column; } .scan.is-phone .scan__cta > * { width: 100%; justify-content: center; }
}
@media (max-width: 760px) {
  /* the card stays on top; each step scrolls up beneath it and is read in the lower half */
  .scan.is-phone .scan__stage { z-index: 3; }
  .scan.is-phone .scan__stage::after { content: ""; position: absolute; left: -20px; right: -20px; top: 100%; height: 28px; background: linear-gradient(#000, transparent); pointer-events: none; }
  .scan.is-phone .scan__copy { z-index: 1; }
  .scan.is-phone .scan__line { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 18px 2px; min-height: 48svh; }
  .scan.is-phone .scan__stage { background: #000; padding: 8px 0 0; margin-top: -8px; }
}
@media (max-width: 760px) {
  .scan.is-phone .scan__pin { display: flex; flex-direction: column; }
  .scan.is-phone .scan__stage { order: 1; } .scan.is-phone .scan__copy { order: 2; } .scan.is-phone .scan__fine { order: 3; }
}
@media (max-width: 760px) { .scan.is-phone .scan__stage, .scan.is-phone .scan__copy { width: 100%; align-self: stretch; } .scan.is-phone .scan__stage { width: calc(100% + 8px); } }
@media (max-width: 760px) { .scan.is-phone .scan__stage { overflow: hidden; border-radius: 22px; } }
@media (max-width: 760px) and (max-height: 700px) {
  .scan.is-phone .scan__rows div { height: 19px; } .scan.is-phone .scan__rows { gap: 2px; margin-top: 8px; }
  .scan.is-phone .hchip { height: 19px; font-size: 10.5px; border-radius: 6px; }
  .scan.is-phone .scan__card { padding: 12px 14px; } .scan.is-phone .scan__report { inset: 44px 14px 12px; }
  .scan.is-phone .scan__report li { padding: 6px 9px; } .scan.is-phone .scan__report li span { display: none; }
}

/* scroll length: pinned stories trimmed so the page moves at a natural pace */
@media (prefers-reduced-motion: no-preference) { .learn { height: 300vh; } .scan { height: 190vh; } }

/* one vertical rhythm for every content section: 72 phone → ~92 tablet → 128 desktop */
:root { --sec: clamp(72px, calc(8vw + 24px), 128px); }
.filmx, .clr, .community, main > .section { padding-top: var(--sec); padding-bottom: var(--sec); }
.clr__head { margin-bottom: clamp(44px, 6vw, 80px); }
.filmx__frame { margin-top: clamp(32px, 4vw, 52px); }
@media (max-width: 760px) { .learn.is-swipe, .scan.is-phone { padding-top: var(--sec); padding-bottom: calc(var(--sec) * .75); } }
/* typography pass: tight pinned frames on phones keep the review card legible but compact */
@media (max-width: 860px) { .scan__report li b { font-size: 14px; } .scan__report li span { font-size: 13px; } .scan__q { font-size: 13.5px; } }
/* very wide screens: reading text grows a touch with the layout */
@media (min-width: 1600px) { :root { --t-read: 18px; } }
/* typography pass — let containers grow with the larger text */
.lcard { height: auto; min-height: min(58vh, 520px); }
/* scan card: the 12 holding rows share the card's real height instead of a fixed 36px each */
.scan__card { container-type: size; }
.scan__rows div { height: clamp(16px, calc((100cqh - 92px) / 12 - 6px), 36px); }
.scan__rows { gap: clamp(2px, 0.6cqh, 6px); }
.scan__report { overflow: auto; scrollbar-width: none; }
.scan__report::-webkit-scrollbar { display: none; }
@media (max-width: 1099px) { .scan__rows div { height: clamp(14px, calc((100cqh - 110px) / 12 - 4px), 30px); } }

/* =========================================================
   Film dialogs — fit the whole dialog (close, video, controls,
   chapters, note) inside the visible viewport. --chrome is the
   measured height of everything except the video (set in JS).
   ========================================================= */
.filmdlg { --gut: max(12px, env(safe-area-inset-left)); --chrome: 190px;
  width: min(1180px, calc(100vw - var(--gut) * 2), max(280px, calc((100dvh - var(--chrome)) * 16 / 9)));
  max-width: none; max-height: calc(100dvh - 16px); margin: auto; padding: max(8px, env(safe-area-inset-top)) 0 max(8px, env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.filmdlg::-webkit-scrollbar { display: none; }
.filmdlg__top { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.filmdlg__top .filmdlg__x { position: static; width: 44px; height: 44px; font-size: 26px; }
.filmdlg video { max-height: none; object-fit: contain; }
.filmdlg__fine { font-size: 13px; color: rgba(255,255,255,.6); }
.filmdlg__pp { width: 44px; height: 44px; margin-left: -8px; }
.filmdlg__mute { min-height: 36px; }
/* touch screens have no hover: keep the controls visible */
@media (hover: none) { .filmdlg__bar { opacity: 1; background: linear-gradient(0deg, rgba(0,0,0,.9), rgba(0,0,0,.35)); } .filmdlg__play { inset: 0 0 60px; } }
@media (max-width: 640px) { .filmdlg { width: min(calc(100vw - 24px), max(280px, calc((100dvh - var(--chrome)) * 16 / 9))); } .filmdlg__mute { display: inline-flex; align-items: center; padding: 6px 10px; } .filmdlg__time { display: none; } .filmdlg__bar { gap: 10px; padding: 0 12px; } }
/* very short screens (landscape phones): give the height to the video; chapters return when there is room */
@media (max-height: 520px) {
  .filmdlg__chapters { display: none; }
  .filmdlg__top { margin-bottom: 4px; } .filmdlg__top .filmdlg__x { width: 40px; height: 40px; }
  .filmdlg__fine { margin-top: 6px; }
}

/* reduced motion: no pinning or scroll-length; every card and stage in plain reading order */
@media (prefers-reduced-motion: reduce) {
  .learn, .scan, .pstack { height: auto !important; }
  .learn__pin { position: relative; height: auto; min-height: 0; overflow: visible; padding: var(--sec) 0; }
  .learn__track { flex-direction: column; width: auto; transform: none !important; padding: 0 var(--pad); gap: 16px; }
  .lcard { width: auto; max-width: 1040px; height: auto; min-height: 0; transform: none !important; opacity: 1 !important; }
  .scan__pin { position: relative; height: auto; min-height: 0; overflow: visible; padding-top: var(--sec); padding-bottom: var(--sec); align-items: start; }
  .scan__lines { min-height: 0; }
  .scan__line { position: relative; inset: auto; opacity: 1; transform: none; filter: none; margin-top: 28px; }
  .scan__line:first-child { margin-top: 0; }
  .scan__prog { display: none; }
  .scan__stage { position: sticky; top: 90px; }
  .scan__fine { position: static; margin-top: 24px; }
  .hero2__noise { display: none; }
}
/* review card: the signature follows the content (it collided once the text grew) */
.scan__report { display: flex; flex-direction: column; }
.scan__report .scan__by { position: static; margin-top: auto; padding-top: 14px; }

/* product stack: sticky offset is measured per card (core.js sets --stick on every width) */
.scard { top: var(--stick, calc(92px + var(--i) * 16px)); }
@media (max-width: 960px) { .scard { top: var(--stick, calc(68px + var(--i) * 10px)); } }

/* LEARN — space recovered on short phones before any layout change */
@media (max-width: 860px) and (max-height: 820px) {
  .learn__pin { padding-top: 72px; gap: 14px; }
  .learn__h { font-size: 30px; margin-top: 10px; }
  .learn__top { gap: 8px; }
  .lcard { grid-template-rows: 168px auto; }
  .lcard__art { padding: 12px; }
  .lcard__copy { padding: 16px 18px 20px; }
  .lcard h3 { margin-top: 6px; }
  .lcard__copy > p:not(.lcard__n) { margin-top: 8px; }
  .biz { padding: 12px; } .biz__grid { margin-top: 8px; gap: 3px; }
  .locker { gap: 10px; } .locker__box { padding: 12px; gap: 3px; } .locker__sh i { height: 24px; }
  .sieve__dots { gap: 3px; } .sieve__cap { margin-top: 8px; }
}
/* LEARN — flow layout when a whole card cannot fit on screen (short phones, landscape, zoom) */
.learn.is-flow { height: auto !important; }
.learn.is-flow .learn__pin { position: relative; height: auto; min-height: 0; overflow: visible; padding: var(--sec) 0; justify-content: flex-start; }
.learn.is-flow .learn__track { flex-direction: column; width: auto; transform: none !important; padding: 0 var(--pad); gap: 16px; }
.learn.is-flow .lcard { width: auto; max-width: 1040px; height: auto; min-height: 0; margin-inline: auto; }
.learn.is-flow .learn__prog { display: none; }
@media (min-width: 861px) { .learn.is-flow .lcard { grid-template-columns: 1fr 1fr; } }
/* the pinned frame never exceeds the screen (a 620px minimum overflowed 600px laptops) */
.learn__pin { min-height: 0; }

/* PORTFOLIO SCAN — the pinned frame never exceeds the screen */
.scan__pin { min-height: 0; }
/* space recovered on short phones before changing the interaction */
@media (max-width: 960px) and (max-height: 820px) {
  .scan__pin { padding-top: 64px; padding-bottom: 24px; gap: 8px; }
  .scan__stage { height: 44vh; min-height: 290px; }
  .scan__lines { min-height: 0; margin-top: 8px; }
  .scan__line .h2 { font-size: 28px; }
  .scan__sub { margin-top: 8px; }
}
/* PORTFOLIO SCAN — flowing version: the card sticks, the three steps scroll past it */
.scan.is-flow { height: auto !important; }
.scan.is-flow .scan__pin { position: relative; height: auto; overflow: visible; align-items: start; padding-top: var(--sec); padding-bottom: var(--sec); }
.scan.is-flow .scan__stage { position: sticky; top: 80px; height: min(calc(100svh - 120px), 620px); }
.scan.is-flow .scan__lines { min-height: 0; }
.scan.is-flow .scan__line { position: relative; inset: auto; min-height: 38svh; opacity: .28; filter: none; transform: none; padding-top: 8px; transition: opacity .5s; }
.scan.is-flow .scan__line.is-on { opacity: 1; }
.scan.is-flow .scan__line:last-child { min-height: 0; padding-bottom: 8px; }
.scan.is-flow .scan__prog { display: none; }
.scan.is-flow .scan__fine { position: static; margin-top: 24px; }
@media (max-width: 960px) {
  .scan.is-flow .scan__pin { display: flex; flex-direction: column; padding-top: 56px; }
  .scan.is-flow .scan__stage { order: 1; position: sticky; top: 8px; z-index: 3; width: 100%; height: min(48svh, 400px); min-height: 280px; background: #000; padding-top: 8px; }
  .scan.is-flow .scan__copy { order: 2; position: relative; z-index: 1; width: 100%; }
  .scan.is-flow .scan__fine { order: 3; }
  .scan.is-flow .scan__line { min-height: 30svh; }
}
.clr__n { z-index: 3; }   /* the rail line passes behind the letter circles */
@media (max-width: 960px) {
  /* flowing scan on phones: a taller card holds the complete review; steps fade in under it */
  .scan.is-flow .scan__stage { height: min(64svh, 470px); min-height: 360px; }
  .scan.is-flow .scan__stage::after { content: ""; position: absolute; left: -20px; right: -20px; top: 100%; height: 36px; background: linear-gradient(#000, rgba(0,0,0,0)); pointer-events: none; }
  .scan.is-flow .scan__line { min-height: 28svh; }
}
/* review card: when the card is short, tighten spacing (not type) so the whole review and signature fit */
@container (max-height: 560px) {
  .scan__report { inset: 50px 18px 14px; }
  .scan__rk { margin-top: 2px; }
  .scan__rk + ul { margin: 6px 0 10px; gap: 5px; }
  .scan__report li { padding: 8px 12px; }
  .scan__q { margin-top: 4px; }
  .scan__report .scan__by { padding-top: 8px; }
  .scan__by img { width: 30px; height: 30px; }
}
@container (max-height: 470px) {
  .scan__report li span { font-size: 13.5px; line-height: 1.35; }
  .scan__report li { padding: 7px 11px; }
}
@media (max-width: 960px) and (max-height: 720px) { .scan.is-flow .scan__stage { height: min(72svh, 500px); } }
/* landscape phones: too short to keep a complete card on screen — it scrolls with the page at full size */
@media (max-height: 500px) {
  .scan.is-flow .scan__stage { position: relative; top: auto; height: 470px; min-height: 0; }
  .scan.is-flow .scan__stage::after { display: none; }
  .scan.is-flow .scan__line { min-height: 0; padding: 18px 0; opacity: 1; }
}

/* phone menu: scrolls on short/landscape screens instead of spilling past the fold */
.sheet { overflow-y: auto; overscroll-behavior: contain; }
.sheet nav a { flex-shrink: 0; }
@media (max-height: 520px) { .sheet nav a { padding: 11px 0; font-size: 19px; } .sheet { gap: 18px; } }

/* the "what deserves your attention" heading always keeps its line; the card has room for it */
.scan__report .scan__q { display: block; }
@container (max-height: 470px) { .scan__report .scan__q { font-size: 13px; margin-top: 3px; } }

/* first-visit welcome: one step up so it reads as a moment, not a caption */
.welcome p { font-size: clamp(18px, calc(0.5vw + 13px), 22px); letter-spacing: .22em; text-align: center; padding-inline: 16px; }
@media (max-width: 420px) { .welcome p { font-size: 17px; letter-spacing: .12em; } }
@media (max-width: 360px) { .welcome p { font-size: 15px; letter-spacing: .08em; } }

/* ── homepage hero, Oct 2026 copy: "Invest in the story. / Not the market noise." ──
   Two deliberate sentences, one per line on desktop; each sentence balances on its own when a phone wraps it.
   The shorter copy needs a smaller cap than the old three-line headline; the space it frees goes to breathing room,
   not to a bigger headline. The hero grows (and scrolls) on short screens instead of clipping. */
.hero2.xhero { height: auto; min-height: 100vh; min-height: 100svh; }
.hero2 .hero2__h.xhero__h { font-size: clamp(42px, min(7.4vw, 12.5vh), 128px); line-height: .98; max-width: 14em; margin-inline: auto; }
.hero2__l { display: block; text-wrap: balance; }
.hero2 .hero2__sub.xhero__sub { margin-top: clamp(20px, 3.4vh, 34px); }
.hero2 .hero2__btns.xhero__btns { margin-top: clamp(24px, 4.2vh, 42px); }
.hero2 .hero__facts.xhero__facts { display: flex; margin-top: clamp(16px, 2.8vh, 28px); }
@media (max-width: 760px) {
  .hero2 .hero2__h.xhero__h { font-size: clamp(38px, min(11.4vw, 8vh), 60px); line-height: 1; }
}

/* ── landing journey (Oct 2026): products dropdown, compact CLEAR, beginner path in the review ── */

.clr--compact .clr__steps { gap: 18px; max-width: 900px; }
.clr--compact .clr__card { grid-template-columns: 1fr; }
.clr--compact .clr__copy { display: grid; grid-template-columns: 1fr auto; column-gap: 24px; align-items: start; padding: clamp(22px, 2.4vw, 32px) clamp(24px, 2.8vw, 36px); background: #F4F4F3; }
.clr--compact .clr__copy > * { grid-column: 1; }
.clr--compact .clr__copy h3 { margin-top: 10px; font-size: clamp(22px, 2vw, 28px); }
.clr--compact .clr__copy p:not(.clr__k) { margin-top: 8px; }
.clr--compact .clr__count { grid-column: 2; grid-row: 1 / span 3; align-self: center; background: #0B0B0C; color: #fff; white-space: nowrap; }
.clr--compact .clr__n { top: 50%; margin-top: -22px; }
.clr__more { text-align: center; margin-top: clamp(36px, 5vh, 56px); }
@media (max-width: 860px) {
  .clr--compact .clr__copy { grid-template-columns: 1fr; }
  .clr--compact .clr__count { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 14px; }
  .clr--compact .clr__n { top: -18px; margin-top: 0; }
}
.scan__new { margin-top: 16px; font-size: 15.5px; color: rgba(var(--on), .62); }
.scan__new a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
/* how-we-choose page: the full CLEAR section opens the page, below the fixed header */
.hwc .hwc__clr { padding-top: calc(72px + clamp(48px, 9vh, 96px)); border-top: 0; }
.hero2__more { display: inline-block; margin-top: 14px; font-size: 15px; color: rgba(var(--on), .62); text-decoration: underline; text-decoration-color: rgba(var(--on), .25); text-underline-offset: 4px; transition: color .2s; }
.hero2__more:hover { color: var(--text); }

/* ── client experience (testimonials). Preview-only until approved content exists; see tools/release_sync.py ── */
.proof { padding: clamp(80px, 12vh, 130px) 0; border-top: 1px solid var(--line); background: #000; }
.proof__head { text-align: center; max-width: 760px; margin: 0 auto; }
.proof__head .chip { margin-inline: auto; }
.proof__head .h2 { margin-top: 18px; }
.proof__flag { max-width: 720px; margin: 22px auto 0; padding: 10px 14px; border: 1px dashed rgba(255,255,255,.35); border-radius: 10px; text-align: center; font-size: 14px; color: rgba(var(--on), .8); }
.proof__grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; max-width: 1120px; margin: clamp(36px, 6vh, 56px) auto 0; align-items: start; }
.proof__item { display: flex; flex-direction: column; gap: 22px; padding: clamp(24px, 2.6vw, 32px); border-radius: 20px; background: #0E0E10; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.proof__q { margin: 0; }
.proof__q p { font-size: var(--t-read); line-height: var(--t-read-lh); color: rgba(var(--on), .86); max-width: 46ch; }
.proof__who { display: grid; gap: 2px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); font-size: 14.5px; }
.proof__who b { font-weight: 500; color: var(--text); }
.proof__who span { color: rgba(var(--on), .6); }
.proof__note { max-width: 760px; margin: 28px auto 0; text-align: center; font-size: 13.5px; line-height: 1.55; color: rgba(var(--on), .55); }

/* ═════ LIGHT THEME (Oct 2026) — the same brand in daylight, not an inversion ═════
   Sections that were hard-coded black move to the page tones; their white cards gain a hairline + soft shadow.
   The film stage and the community band stay deliberately dark (cinema bands) with dark tokens set locally. */
[data-theme="light"] {
  --card-edge: 0 0 0 1px rgba(14,12,10,.07), 0 24px 50px -30px rgba(40,38,34,.32);
}
[data-theme="light"] .hero2 { background: var(--bg); }
[data-theme="light"] .learn, [data-theme="light"] .pstack, [data-theme="light"] .scan { background: var(--bg); }
[data-theme="light"] .clr { background: var(--bg-2); }
[data-theme="light"] .lcard, [data-theme="light"] .scard, [data-theme="light"] .clr__card, [data-theme="light"] .scan__card { box-shadow: var(--card-edge); }
[data-theme="light"] .scard::after { background: var(--bg); }
[data-theme="light"] .clr__steps::before { background: rgba(14,12,10,.14); }
[data-theme="light"] .clr__steps::after { background: #0E0C0A; }
[data-theme="light"] .clr__n { background: var(--bg-2); color: rgba(14,12,10,.6); border-color: rgba(14,12,10,.18); }
[data-theme="light"] .clr__step.is-in .clr__n { background: #0E0C0A; color: #fff; border-color: #0E0C0A; }
[data-theme="light"] .clr--compact .clr__copy { background: #FFFFFF; }
/* cinema bands stay dark in both themes */
[data-theme="light"] .filmx, [data-theme="light"] .community, [data-theme="light"] .filmdlg {
  --on: 255,255,255; --text: #F2F1EE; --mute: rgba(242,241,238,.72); --dim: rgba(242,241,238,.55);
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --bg: #08080A; --bg-2: #0E0E11; --surface: #121215; --surface-2: #18181C;
  --btn-bg: #FFFFFF; --btn-fg: #0A0A0B; --btn-grad: linear-gradient(180deg, #fff, #E4E4E2);
  --metal: linear-gradient(180deg, #FFFFFF 0%, #ECEBE7 42%, #B4B2AD 82%, #8E8C88 100%); color: var(--text);
}
/* hero trust line on phones: the long registration item wraps beside its tick instead of stranding it */
@media (max-width: 760px) {
  .hero2 .hero__facts.xhero__facts li { display: grid; grid-template-columns: auto auto; justify-content: center; column-gap: 8px; text-align: left; }
  .hero2 .hero__facts.xhero__facts li::before { margin-top: .25em; }
}
@media (max-width: 760px) { .hero2 .hero__facts.xhero__facts li { grid-template-columns: auto fit-content(26ch); } }

/* ── homepage CLEAR preview (Oct 2026): AlphaLeap's five-filter strip, no scroll sequence; the full version is on /process/ ── */
.clrp { padding: clamp(88px, 13vh, 140px) 0; border-top: 1px solid var(--line); background: #000; --card: #FFFFFF; --ink: #0B0B0C; --ink-mute: #6B6A66; --fg-rgb: 255 255 255; }
[data-theme="light"] .clrp { background: var(--bg-2); --fg-rgb: 14 12 10; }
.clrp__head { text-align: center; max-width: 760px; margin: 0 auto clamp(36px, 6vh, 60px); }
.clrp__head .chip { margin-inline: auto; }
.clrp__head .h2 { margin-top: 18px; }
.clrp__head .lede { margin: 18px auto 0; max-width: 44ch; }
.clrp .cl { list-style: none; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; max-width: 1180px; margin-inline: auto; }
.clrp .cl::before { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 1px; background: rgb(var(--fg-rgb) / .3); }
.clrp .cl__i { position: relative; display: flex; flex-direction: column; gap: 18px; }
.clrp .cl__n { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: "Poppins", "Geist", system-ui, sans-serif; font-weight: 700; font-size: 16px; background: var(--text); color: var(--bg); }
.clrp .cl__card { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 20px; border-radius: 22px; background: var(--card); color: var(--ink); }
[data-theme="light"] .clrp .cl__card { box-shadow: 0 0 0 1px rgba(14,12,10,.07), 0 18px 40px -26px rgba(40,38,34,.3); }
.clrp .cl__k { font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.clrp .cl__card h3 { font-size: 20px; font-weight: 500; letter-spacing: -.03em; line-height: 1.15; margin-bottom: 14px; }
.clrp .cl__count { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.clrp__more { text-align: center; margin-top: clamp(32px, 5vh, 52px); }
@media (max-width: 1100px) {
  .clrp .cl { grid-template-columns: minmax(0, 1fr); padding-left: 60px; gap: 10px; max-width: 640px; }
  .clrp .cl::before { left: 22px; right: auto; top: 22px; bottom: 22px; width: 1px; height: auto; }
  .clrp .cl__i { display: block; }
  .clrp .cl__n { position: absolute; left: -60px; top: 50%; margin-top: -22px; }
  .clrp .cl__card { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 16px 18px; }
  .clrp .cl__k { grid-column: 1; } .clrp .cl__card h3 { grid-column: 1; margin: 2px 0 0; font-size: 18px; }
  .clrp .cl__count { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: center; }
}
@media (max-width: 480px) { .clrp .cl { padding-left: 50px; } .clrp .cl__n { left: -50px; width: 38px; height: 38px; font-size: 14px; margin-top: -19px; } .clrp .cl::before { left: 19px; } .clrp .cl__count { font-size: 12px; padding: 0 10px; } }

/* ── Process page: the full CLEAR sequence (moved from the homepage) ── */
.proc .proc__clr { border-top: 1px solid var(--line); scroll-margin-top: 72px; }
.proc .proc__clr .clr__head .proc__k { text-align: center; }
.clr__pf { display: grid; gap: 6px; margin-top: 16px !important; padding-top: 14px; border-top: 1px solid rgba(11,11,12,.1); font-size: 15.5px !important; line-height: 1.5 !important; color: #55534E; }
.clr__pf b { display: inline-block; min-width: 96px; font-weight: 600; color: #0B0B0C; }

/* hero registration: one plain line, no tick */
.hero2__reg { margin-top: clamp(18px, 3vh, 28px); font-size: 14.5px; color: rgba(var(--on), .6); text-align: center; }
@media (max-width: 760px) { .hero2__reg { font-size: 13.5px; } }

/* Start here, compact: four short cards in one screen, no pinned scroll. Detail lives on /process/. */
.learn.is-grid { height: auto !important; padding: var(--sec) 0 calc(var(--sec) * .8); }
.learn.is-grid .learn__pin { position: relative; height: auto; min-height: 0; overflow: visible; padding: 0; gap: clamp(24px, 4vh, 40px); justify-content: flex-start; }
.learn.is-grid .learn__h { font-size: clamp(34px, 4vw, 60px); }
.learn.is-grid .learn__more { padding-bottom: 8px; font-size: 15px; color: rgba(var(--on), .72); border-bottom: 1px solid rgba(var(--on), .3); white-space: nowrap; transition: color .2s, border-color .2s; }
.learn.is-grid .learn__more:hover { color: var(--text); border-color: var(--text); }
.learn.is-grid .learn__track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: auto; max-width: 1440px; margin-inline: auto; transform: none !important; }
.learn.is-grid .lcard { width: auto; height: auto; min-height: 0; max-width: none; margin: 0; grid-template-columns: 1fr; grid-template-rows: 190px auto; border-radius: 22px; }
.learn.is-grid .lcard__art { padding: 16px; overflow: hidden; }
.learn.is-grid .lcard__copy { justify-content: flex-start; padding: 20px 22px 24px; }
.learn.is-grid .lcard h3 { margin-top: 8px; font-size: clamp(19px, 1.45vw, 23px); line-height: 1.15; letter-spacing: -.025em; }
.learn.is-grid .lcard__copy > p:not(.lcard__n) { margin-top: 10px; font-size: 15px; line-height: 1.5; }
.learn.is-grid .lcard__link { margin-top: 14px; align-self: flex-start; font-size: 14.5px; font-weight: 600; color: #0B0B0C; border-bottom: 1px solid rgba(11,11,12,.35); }
.learn.is-grid .biz__grid i { border-radius: 3px; }
@media (max-width: 1100px) { .learn.is-grid .learn__track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .learn.is-grid .learn__top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .learn.is-grid .learn__track { display: flex; flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px var(--pad) 8px; scroll-padding: 0 var(--pad); gap: 12px; }
  .learn.is-grid .learn__track::-webkit-scrollbar { display: none; }
  .learn.is-grid .lcard { flex: none; width: 80vw; scroll-snap-align: start; grid-template-rows: 170px auto; }
}
.nw { white-space: nowrap; }

/* Community → closing panel: the photo fades out instead of ending on a hard edge, and the panel gets room to breathe */
.community__bg { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 62%, transparent 100%); }
html:not([data-theme="light"]) .community { background: var(--bg); border-top: 0; }
html:not([data-theme="light"]) .community::after { background: linear-gradient(90deg, rgba(5,5,6,.9) 0%, rgba(5,5,6,.6) 45%, rgba(5,5,6,.15) 100%); }
.community + .cta, .community ~ .cta { padding-top: clamp(64px, 9vw, 128px); }
html:not([data-theme="light"]) .community::after { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 62%, transparent 100%); }

/* ===== Community: built to get people to join (WhatsApp) =====
   Copy and one big action on the left; on the right an example community feed that fills in
   message by message as it scrolls into view, ending with "You joined" and a new node linking
   into the network behind it. */
html body .community.cm2::after { display: none !important; }
.cm2 { padding: clamp(96px, 14vh, 150px) 0; overflow: hidden; }
.cm2__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.cm2 .community__list { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none !important; }
.cm2__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 36px; }
.cm2__join { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 26px 0 22px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 17px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; box-shadow: 0 18px 40px -18px rgba(var(--on), .55); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; position: relative; }
.cm2__join:hover { transform: translateY(-2px); box-shadow: 0 24px 48px -18px rgba(var(--on), .65); }
.cm2__join:active { transform: scale(.98); }
.cm2__join .cm2__wa { width: 22px; height: 22px; flex: none; }
.cm2__join::before { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 1px solid rgba(var(--on), .35); opacity: 0; animation: cm2ring 2.8s ease-out infinite; }
@keyframes cm2ring { 0% { opacity: .7; transform: scale(.96); } 80%, 100% { opacity: 0; transform: scale(1.12); } }
.cm2__alt { font-size: 15px; color: rgba(var(--on), .7); text-decoration: underline; text-underline-offset: .25em; }
.cm2__alt:hover { color: var(--text); }

.cm2__vis { position: relative; margin: 0; min-height: 520px; display: grid; place-items: center; }
.cm2__net { position: absolute; inset: 0; width: 100%; height: 100%; }
.cm2__net line { stroke: rgba(var(--on), .16); stroke-width: 1; }
.cm2__net circle { fill: rgba(var(--on), .35); }
.cm2__net circle.lit { fill: rgba(var(--on), .8); }
.cm2__net .cm2__link { stroke: rgba(var(--on), .6); stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset 1s ease .2s; }
.cm2__net .cm2__younode { fill: var(--text); opacity: 0; transform-origin: 200px 335px; transform: scale(.2); transition: opacity .4s ease, transform .6s cubic-bezier(.3,1.6,.5,1); }

.cm2__phone { position: relative; z-index: 1; width: min(380px, 100%); border-radius: 28px; padding: 16px; background: #FFFFFF; color: #0E0C0A; box-shadow: 0 0 0 1px rgba(14,12,10,.06), 0 40px 90px -40px rgba(0,0,0,.6); }
html:not([data-theme="light"]) .cm2__phone { background: #141416; color: #F2F1EE; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 90px -40px rgba(0,0,0,.9); }
.cm2__top { display: flex; align-items: center; gap: 12px; padding: 4px 4px 14px; border-bottom: 1px solid rgba(127,127,127,.18); }
.cm2__top b { display: block; font-size: 15px; } .cm2__top small { font-size: 12.5px; opacity: .6; }
.cm2__top em { margin-left: auto; font-style: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(127,127,127,.3); opacity: .75; }
.cm2__av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: currentColor; }
.cm2__av { color: inherit; background: rgba(127,127,127,.18); }
.cm2__feed { list-style: none; display: grid; gap: 10px; padding: 16px 2px 6px; min-height: 330px; align-content: start; }
.cm2__msg { position: relative; max-width: 88%; padding: 10px 12px 18px; border-radius: 14px 14px 14px 4px; background: rgba(127,127,127,.12); font-size: 14px; line-height: 1.45; }
.cm2__msg b { display: block; font-size: 12.5px; margin-bottom: 2px; }
.cm2__msg time { position: absolute; right: 10px; bottom: 4px; font-size: 11px; opacity: .55; font-variant-numeric: tabular-nums; }
.cm2__msg--in { justify-self: end; border-radius: 14px 14px 4px 14px; background: rgba(127,127,127,.22); }
.cm2__sys { justify-self: center; font-size: 12px; padding: 5px 12px; border-radius: 999px; background: rgba(127,127,127,.12); opacity: .85; }
.cm2__you { font-weight: 600; opacity: 1; background: var(--text); color: var(--bg); }
.cm2__cardjoin { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; margin-top: 8px; border-radius: 14px; background: #0E0C0A; color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; }
html:not([data-theme="light"]) .cm2__cardjoin { background: #F2F1EE; color: #0E0C0A; }
.cm2__cardjoin .cm2__wa { width: 18px; height: 18px; }

/* the feed fills in as it arrives on screen */
.cm2.is-armed .cm2__feed > li { opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.cm2.is-armed .cm2__feed > li.on { opacity: 1; transform: none; }
.cm2.is-joined .cm2__net .cm2__link { stroke-dashoffset: 0; }
.cm2.is-joined .cm2__net .cm2__younode { opacity: 1; transform: scale(1); }
.cm2__typing { justify-self: start; display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 14px; background: rgba(127,127,127,.12); }
.cm2__typing i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .4; animation: cm2dot 1s infinite; }
.cm2__typing i:nth-child(2) { animation-delay: .15s; } .cm2__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cm2dot { 50% { opacity: 1; transform: translateY(-2px); } }

@media (max-width: 960px) {
  .cm2__in { grid-template-columns: 1fr; }
  .cm2__vis { min-height: 0; padding: 20px 0; }
  .cm2 .community__list { grid-template-columns: 1fr; }
}
@media (max-width: 760px) { .cm2__join { width: 100%; justify-content: center; } .cm2__btns { gap: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .cm2__join::before { animation: none; }
  .cm2.is-armed .cm2__feed > li { opacity: 1; transform: none; transition: none; }
  .cm2__net .cm2__link { stroke-dashoffset: 0; } .cm2__net .cm2__younode { opacity: 1; transform: none; }
}

/* ===== Community card as a real WhatsApp group (both themes follow WhatsApp's own light / dark) ===== */
.wa { --wa-bg: #EFEAE2; --wa-bar: #F0F2F5; --wa-in: #FFFFFF; --wa-out: #D9FDD3; --wa-ink: #111B21; --wa-sub: #667781; --wa-green: #008069; --wa-sys: #FFF5C4;
  width: min(390px, 100%); padding: 0; overflow: hidden; border-radius: 40px; background: var(--wa-bg) !important; color: var(--wa-ink) !important;
  box-shadow: 0 0 0 10px #0B0B0C, 0 0 0 11px rgba(255,255,255,.12), 0 50px 100px -40px rgba(0,0,0,.65) !important; }
html:not([data-theme="light"]) .wa { --wa-bg: #0B141A; --wa-bar: #202C33; --wa-in: #202C33; --wa-out: #005C4B; --wa-ink: #E9EDEF; --wa-sub: #8696A0; --wa-green: #00A884; --wa-sys: #182229; }
.wa::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(circle at 12px 12px, rgba(127,127,127,.18) 1.2px, transparent 1.6px) 0 0 / 26px 26px, radial-gradient(circle at 0 0, rgba(127,127,127,.12) 1px, transparent 1.4px) 13px 13px / 26px 26px; }
.wa > * { position: relative; z-index: 1; }
.wa__status { display: flex; justify-content: space-between; align-items: center; padding: 12px 26px 4px; background: var(--wa-bar); font-size: 13px; font-weight: 600; }
.wa__icons { display: flex; gap: 5px; align-items: center; } .wa__icons i { width: 15px; height: 9px; border-radius: 2px; background: currentColor; opacity: .8; } .wa__icons b { width: 22px; height: 10px; border-radius: 3px; border: 1.5px solid currentColor; }
.wa__bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px 10px; background: var(--wa-bar); }
.wa__back { font-size: 26px; line-height: 1; color: var(--wa-green); }
.wa__gav { display: flex; } .wa__gav img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid var(--wa-bar); margin-left: -10px; } .wa__gav img:first-child { margin-left: 0; }
.wa__title { min-width: 0; flex: 1; } .wa__title b { display: block; font-size: 15.5px; } .wa__sub { display: block; font-size: 12px; color: var(--wa-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa__ex { font-style: normal; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 99px; border: 1px solid currentColor; opacity: .5; }
.wa__feed { padding: 10px 10px 8px !important; gap: 6px !important; min-height: 420px !important; }
.wa__day { justify-self: center; font-size: 11.5px; padding: 4px 10px; border-radius: 8px; background: var(--wa-bar); color: var(--wa-sub); }
.wa__sys { justify-self: center; max-width: 92%; text-align: center; font-size: 11.5px; line-height: 1.4; padding: 6px 10px; border-radius: 8px; background: var(--wa-sys); color: var(--wa-sub); opacity: 1 !important; }
.wa__m { display: flex; align-items: flex-start; gap: 6px; max-width: 88% !important; padding: 0 !important; background: none !important; border-radius: 0 !important; }
.wa__av { width: 28px; height: 28px; flex: none; border-radius: 50%; object-fit: cover; margin-top: 2px; }
.wa__av--txt { display: grid; place-items: center; font-size: 12px; font-weight: 700; background: #6B7C85; color: #fff; }
.wa__m > div { position: relative; padding: 6px 9px 18px; border-radius: 0 10px 10px 10px; background: var(--wa-in); font-size: 13.5px; line-height: 1.4; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.wa__m > div b { display: block; font-size: 12.5px; margin-bottom: 1px; }
.wa__m[data-who="s"] > div b { color: #1F7AEC; } .wa__m[data-who="k"] > div b { color: #C2185B; } .wa__m[data-who="n"] > div b { color: #E65100; } .wa__m[data-who="m"] > div b { color: #6A1B9A; }
html:not([data-theme="light"]) .wa__m[data-who="s"] > div b { color: #53BDEB; } html:not([data-theme="light"]) .wa__m[data-who="k"] > div b { color: #FF72A1; } html:not([data-theme="light"]) .wa__m[data-who="n"] > div b { color: #FFB74D; } html:not([data-theme="light"]) .wa__m[data-who="m"] > div b { color: #C792EA; }
.wa__m time { position: absolute; right: 8px; bottom: 3px; font-size: 10.5px; color: var(--wa-sub); opacity: 1 !important; }
.wa__doc { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; margin-top: 6px; padding: 8px; border-radius: 8px; background: rgba(127,127,127,.12); font-size: 12.5px; }
.wa__doc i { grid-row: span 2; font-style: normal; font-size: 10px; font-weight: 700; color: #fff; background: #E53935; padding: 6px 5px; border-radius: 4px; }
.wa__doc small { font-size: 11px; color: var(--wa-sub); }
.cm2__you.wa__sys { background: var(--wa-sys) !important; color: var(--wa-sub) !important; font-weight: 500; }
.wa__input { display: flex; align-items: center; gap: 8px; margin: 2px 10px 0; } .wa__input span { flex: 1; padding: 9px 14px; border-radius: 99px; background: var(--wa-in); color: var(--wa-sub); font-size: 14px; } .wa__input i { width: 38px; height: 38px; border-radius: 50%; background: var(--wa-green); }
.wa__join { margin: 10px !important; border-radius: 99px !important; background: var(--wa-green) !important; color: #fff !important; }
.wa .cm2__typing { background: var(--wa-in); }
/* animation: bubbles pop like WhatsApp (scale from their tail corner) */
.cm2.is-armed .wa__feed > li { transform-origin: top left; transform: translateY(10px) scale(.92); }
.cm2.is-armed .wa__feed > li.on { transform: none; }

/* WhatsApp card in the site's own palette (monochrome + warm grey), admin-only broadcast */
.wa { --wa-bg: #F3F2EF; --wa-bar: #FFFFFF; --wa-in: #FFFFFF; --wa-ink: #0E0C0A; --wa-sub: #7A7874; --wa-green: #0E0C0A; --wa-sys: #E8E6E1; }
html:not([data-theme="light"]) .wa { --wa-bg: #0E0E10; --wa-bar: #17171A; --wa-in: #1C1C20; --wa-ink: #F2F1EE; --wa-sub: #8E8C88; --wa-green: #F2F1EE; --wa-sys: #1C1C20; }
.wa .wa__m[data-who] > div b { color: var(--wa-ink) !important; }
.wa__logo { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; gap: 2px; background: #0B0B0C; color: #fff; font-size: 11px; font-weight: 700; }
html:not([data-theme="light"]) .wa__logo { box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
.wa__logo i { width: 1.5px; height: 12px; background: #C9A24A; }
.wa__back { color: var(--wa-ink); opacity: .7; }
.wa__cta { display: table; margin-top: 8px; padding: 6px 12px; border-radius: 99px; border: 1px solid rgba(127,127,127,.35); font-size: 12px; font-weight: 600; }
.wa__lock { margin: 4px 12px 0; padding: 10px; text-align: center; font-size: 12px; color: var(--wa-sub); border-top: 1px solid rgba(127,127,127,.18); }
.wa__join { background: var(--wa-ink) !important; color: var(--wa-bg) !important; }
.wa__feed { min-height: 380px !important; }

/* WhatsApp card always fits the screen: capped to the viewport, compact type, feed fills the middle */
.cm2 { padding-block: clamp(72px, 10vh, 120px); }
.cm2__vis { min-height: 0; }
.wa { display: flex; flex-direction: column; height: min(720px, calc(100svh - 150px)); min-height: 560px; }
.wa__status { padding: 10px 24px 2px; font-size: 12px; }
.wa__bar { padding: 6px 12px 8px; }
.wa__title b { font-size: 14.5px; }
.wa__feed { flex: 1; min-height: 0 !important; overflow: hidden; display: flex !important; flex-direction: column; justify-content: flex-end; gap: 5px !important; }
.wa__m > div { font-size: 12.5px; line-height: 1.38; padding: 5px 8px 16px; }
.wa__m > div b { font-size: 12px; }
.wa__doc { margin-top: 5px; padding: 6px; font-size: 11.5px; }
.wa__cta { margin-top: 6px; padding: 4px 10px; font-size: 11.5px; }
.wa__av { width: 24px; height: 24px; }
.wa__lock { padding: 7px; font-size: 11px; }
.wa__join { min-height: 42px !important; margin: 6px 10px 10px !important; font-size: 14px !important; }
@media (max-width: 960px) { .wa { height: auto; min-height: 0; } .wa__feed { overflow: visible; } }

/* iPhone hardware look: titanium frame, Dynamic Island, side buttons, home indicator */
.wa { border-radius: 54px !important; box-shadow: 0 0 0 9px #1A1A1C, 0 0 0 10px #3A3A3D, 0 0 0 11px #0E0E10, 0 60px 120px -40px rgba(0,0,0,.7) !important; }
html[data-theme="light"] .wa { box-shadow: 0 0 0 9px #1A1A1C, 0 0 0 10px #B9B7B2, 0 0 0 11px #8E8C88, 0 60px 120px -40px rgba(40,38,34,.45) !important; }
.wa__status { position: relative; padding: 16px 30px 6px !important; font-size: 13px !important; }
.wa__status::after { content: ""; position: absolute; left: 50%; top: 10px; width: 108px; height: 30px; transform: translateX(-50%); border-radius: 20px; background: #000; }
.cm2__vis { position: relative; }
.cm2__phone.wa::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 120px; height: 4px; transform: translateX(-50%); border-radius: 4px; background: var(--wa-ink); opacity: .55; z-index: 2; }
.cm2__vis .wa__btns { position: absolute; inset: 0; pointer-events: none; }
.wa__feed { justify-content: flex-start !important; padding-top: 14px !important; gap: 8px !important; }
.wa__feed > .wa__day, .wa__feed > .wa__sys { align-self: center; }
.wa__feed > .wa__m { align-self: flex-start; }


/* ===== Phone polish (iOS Safari + Android) ===== */
@media (max-width: 640px) {
  .learn__more, .cm2__alt { display: inline-flex; align-items: center; min-height: 44px; }
  .hero2__more { display: inline-flex; align-items: center; min-height: 44px; }
}
/* labels inside example cards: never below 12.5px on phones */
@media (max-width: 760px) { :where(.mui, .scan__card, .scard__ui) :where(small, span, p, li, em) { font-size: max(12.5px, 1em); } .scan__fine, .filmx__fine { font-size: 12.5px; } }
@media (max-width: 760px) { .filmx__frame { transform: none !important; width: 100% !important; border-radius: 18px; } .filmx { padding-inline: 16px; } }


/* ===== Phones: "Start here" is a contained card scroller, never wider than the page ===== */
@media (max-width: 640px) {
  .learn.is-grid .learn__pin { width: 100%; min-width: 0; align-items: stretch; }
  .learn.is-grid .learn__top { min-width: 0; }
  .learn.is-grid .learn__track { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; align-self: stretch;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .learn.is-grid .lcard { flex: 0 0 auto; width: min(82%, 330px); scroll-snap-align: start; }
  .learn.is-grid .learn__top::after { content: "Swipe →"; font-size: 13px; color: rgba(var(--on), .55); }
}

/* ===== Phones: the free-review section as a reading layout =====
   Heading → 01 → 02 → the card (its own space, plays once) → 03 + the review button → fine print.
   .scan__copy and .scan__lines become display:contents so every block is one flex column, with one copy of the text. */
@media (max-width: 760px) {
  html body #scan.scan { height: auto !important; min-height: 0 !important; padding: var(--sec, 96px) 0 calc(var(--sec, 96px) * .75) !important; background: var(--bg) !important; overflow: visible; }
  html body #scan .scan__pin { position: relative !important; top: auto !important; height: auto !important; min-height: 0 !important; overflow: visible !important;
    display: flex !important; flex-direction: column; gap: 30px; padding: 0 20px !important; }
  html body #scan :is(.scan__copy, .scan__lines) { display: contents !important; }
  html body #scan .chip, html body #scan .scan__prog { display: none !important; }
  html body #scan #scan-h { position: static; width: auto; height: auto; margin: 0; clip: auto; clip-path: none; overflow: visible; white-space: normal; order: 0;
    font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--on), .6); }
  html body #scan .scan__line { position: relative !important; inset: auto !important; opacity: 1 !important; visibility: visible !important; filter: none !important; transform: none !important;
    min-height: 0 !important; padding: 0 !important; margin: 0 !important; background: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; pointer-events: auto; }
  html body #scan .scan__line[data-k="0"] { order: 1; }
  html body #scan .scan__line[data-k="1"] { order: 2; }
  html body #scan .scan__stage { order: 3; }
  html body #scan .scan__line[data-k="2"] { order: 4; }
  html body #scan .scan__fine { order: 5; position: static !important; margin: 0 !important; }
  html body #scan .scan__sub { color: rgba(var(--on), .72); }
  html body #scan .scan__cta { margin-top: 22px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  html body #scan .scan__cta .sq { justify-content: center; min-height: 48px; }
  /* the illustration: in flow, contained, theme-aware, never on top of anything */
  html body #scan .scan__stage { position: relative !important; top: auto !important; z-index: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important;
    margin: 0 !important; padding: 0 !important; background: none !important; pointer-events: none; }
  html body #scan .scan__stage::before, html body #scan .scan__stage::after { display: none !important; }
  html body #scan .scan__chips { display: none !important; }
  html body #scan .scan__card { position: relative !important; left: auto !important; top: auto !important; transform: none !important; width: 100% !important; height: auto !important; max-height: none !important;
    opacity: 1 !important; filter: none !important; display: grid !important; grid-template-columns: minmax(0, 1fr); padding: 16px !important; }
  html body #scan .scan__head { grid-area: 1 / 1; }
  html body #scan .scan__rows { grid-area: 2 / 1; position: static !important; display: grid; gap: 6px; margin-top: 12px; visibility: visible !important; }
  html body #scan .scan__report { grid-area: 2 / 1; position: static !important; inset: auto !important; margin-top: 12px; }
  html body #scan .scan__card:not(.is-report) .scan__report { opacity: 0; }
  html body #scan .scan__card.is-report .scan__rows { visibility: hidden !important; }
  html body #scan .scan__beam { top: 56px; }
  html body #scan .hrow { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; background: rgba(14,12,10,.045); font-size: 13.5px; color: #0E0C0A; }
  html body #scan .hrow span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html body #scan .hrow small { margin-left: 6px; font-size: 12px; color: #6E6D69; }
  html body #scan .hrow i { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: #0E0C0A; color: #fff; }
  html body #scan.is-m .hrow i { opacity: 0; transform: scale(.6); }
  html body #scan .hrow b { font-variant-numeric: tabular-nums; font-weight: 600; }
  html body #scan .scan__report :is(li span, .scan__q, small) { font-size: 13.5px; }
}
/* reduced motion on phones: the finished review, no reveal */
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  html body #scan .scan__card .scan__report { opacity: 1 !important; transform: none !important; }
  html body #scan .scan__card .scan__rows { visibility: hidden !important; }
}
@media (max-width: 760px) {
  html body #scan .scan__card { container-type: inline-size !important; }
  html body #scan .scan__report { overflow: visible !important; }
  html body #scan #scan-h.vh { position: static !important; width: auto !important; height: auto !important; clip: auto !important; clip-path: none !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; white-space: normal !important;
    font-size: 13px !important; letter-spacing: .14em; line-height: 1.4; }
}

/* "How can Investace help you?" reads as one line on laptops and desktops */
@media (min-width: 900px) { .pstack__h1l { white-space: nowrap; } }
.pstack__h1l { text-wrap: balance; }

/* ===== Free-review scan, desktop polish (9 Oct 2026) =====
   Step counter + bars sit right above the headline; balanced headline wrap; the hidden flag tags take no width in the pile;
   the review card answers "what deserves your attention" with example questions. */
.scan__step { display: flex; align-items: center; gap: 14px; margin-top: 22px; font-size: 13px; font-weight: 600; letter-spacing: .14em; color: rgba(var(--on), .5); font-variant-numeric: tabular-nums; }
.scan__count b { color: var(--text); font-weight: 600; }
.scan__count i { font-style: normal; margin-left: 6px; }
.scan__step .scan__prog { margin-top: 0; }
.scan__lab { letter-spacing: .1em; text-transform: uppercase; font-size: 12px; }
.scan__line .scan__n { display: none; }
.scan__line .h2 { margin-top: 0; text-wrap: balance; }
.scan__lines { margin-top: 18px; }
.hchip i { position: absolute; right: 52px; top: 50%; margin-top: -10px; line-height: 14px; }
.scan__qs { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; counter-reset: q; }
.scan__qs li { counter-increment: q; display: flex; gap: 10px; align-items: baseline; padding: 0 !important; background: none !important; font-size: 15px; font-weight: 500; color: #0B0B0C; }
.scan__qs li::before { content: counter(q); flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #D9D8D4; font-size: 11px; font-weight: 600; color: #6E6D69; transform: translateY(-1px); }
.scan__report .scan__q { margin-top: 10px; font-size: 13px; color: #8A8780; }
.scan__rk + ul { margin-bottom: 14px; }
.scan__report li { padding: 10px 14px; }
@media (max-width: 760px) {
  html body #scan .scan__step { display: none !important; }
  html body #scan .scan__line .scan__n { display: block; }
  html body #scan .scan__qs li { font-size: 13.5px; }
}

/* Homepage hero background = the product-page background (16 Oct 2026): shared/ic-hero.js adds the faint dot grid
   (brighter only around the cursor) and the soft light that glides after it (drifts on its own on touch screens).
   The older always-bright dot layer is retired. The hero keeps its pure black. */
.hero2 > .hero2__bg { display: none; }

/* ===== Free review section, desktop clarity (16 Oct 2026) =====
   A visible label says what this is from the first frame; the button and terms stay visible through all three steps
   (they used to appear only at step 3); the pinned scroll is shorter. Phones use the separate .sm block. */
.scan__kicker { display: none; }
@media (min-width: 761px) {
  .scan__kicker { display: block; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
  .scan__kicker span { color: rgba(var(--on), .5); font-weight: 500; letter-spacing: .08em; }
  html body #scan .scan__step { margin-top: 14px; }
  .scan__copy > .scan__cta { margin-top: 30px; }
  .scan__terms { margin-top: 12px; font-size: 14px; color: rgba(var(--on), .6); }
}
@media (min-width: 961px) { .scan { height: 260vh; } }