/* ---------- BRAND TOKENS ---------- */
  :root{
    --white:#f0eeea;
    --white-pure:#ffffff;
    --black:#070707;
    --black-deep:#000000;
    --black-surface:#141414;
    --grey:#c2bfb8;
    --grey-60:#76746f;
    --grey-80:#3f3d3a;
    --line:rgba(248,248,247,0.07);
    --line-strong:rgba(248,248,247,0.16);
    --purple:#ee6bcf;
    --orange:#fcc24c;
    --grad: linear-gradient(115deg, #ee6bcf 0%, #f59494 45%, #fcc24c 100%);
    --mono: 'Roboto Mono', ui-monospace, Menlo, monospace;
    --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* Aitemz Sans — humanist grotesque, rendered via Helvetica Neue proxy until
       the licensed outlines ship. Always set at light weight per the specimen. */
    --aitemz: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }

  /* Aitemz Sans utility — wordmark + display use */
  .aitemz-sans{
    font-family:var(--aitemz);
    font-weight:300;
    letter-spacing:-0.02em;
    text-transform:none;
  }

  *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  /* anchor offset so jump targets clear the fixed nav + sticky ticker */
  section[id], header[id]{scroll-margin-top:var(--sticky-offset, 130px)}
  body{
    background:var(--black);
    color:var(--white);
    font-family:var(--sans);
    font-weight:400;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    letter-spacing:-0.005em;
    /* hide page scrollbar — page still scrolls, just no visible track */
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  body::-webkit-scrollbar,
  html::-webkit-scrollbar{display:none}
  html{scrollbar-width:none;-ms-overflow-style:none}

  ::selection{background:var(--white);color:var(--black)}

  /* subtle 5-col grid guide */
  .grid-guide{
    position:fixed;inset:0;
    pointer-events:none;
    z-index:1;
    max-width:1440px;
    margin:0 auto;
    padding:0 40px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    left:50%;transform:translateX(-50%);
    width:100%;
  }
  .grid-guide span{
    border-left:1px solid rgba(248,248,247,0.03);
    height:100%;
  }
  .grid-guide span:last-child{border-right:1px solid rgba(248,248,247,0.03)}

  /* ambient grain — dropped mix-blend-mode:overlay (forces full-viewport
     recomposite every scroll frame). Lower opacity + lighter sample keeps
     the texture present without the per-frame paint cost. */
  body::after{
    content:'';
    position:fixed;inset:0;
    pointer-events:none;z-index:200;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    opacity:.18;
  }

  /* ---------- NAV ---------- */
  nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    padding:22px 40px;
    display:flex;justify-content:space-between;align-items:center;
    transition:background .4s, border-color .4s, backdrop-filter .4s;
    border-bottom:1px solid transparent;
  }
  nav.scrolled{
    background:rgba(21,21,21,0.86);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom-color:var(--line);
  }
  .brand{
    display:flex;align-items:center;gap:12px;
    text-decoration:none;color:var(--white);
    line-height:1;
  }
  .brand-mark{
    width:36px;height:18px;display:inline-flex;align-items:center;justify-content:center;
    position:relative;
  }
  .brand-mark svg{width:100%;height:100%;display:block;color:var(--white)}
  /* Wordmark — optically centered against the asterisk-cross mark.
     Mark stroke-width is 8/100 ≈ 8% — that maps to font-weight ~300/350 in
     Helvetica Neue. We use 350 + a tiny baseline nudge so the visual mass of
     the letters sits on the mark's horizontal axis (cap-height vs x-height
     correction; otherwise the wordmark reads visually higher). */
  .brand-word{
    font-family:var(--aitemz);font-weight:350;font-size:22px;
    letter-spacing:-0.025em;text-transform:none;
    line-height:1;
    display:inline-block;
    transform:translateY(0.06em); /* optical baseline correction */
  }
  .nav-links{display:flex;gap:32px;align-items:center}
  .nav-link{
    font-family:var(--mono);font-size:11px;font-weight:400;
    letter-spacing:0.16em;text-transform:uppercase;
    color:var(--white);text-decoration:none;
    opacity:.65;transition:opacity .25s;
  }
  .nav-link:hover{opacity:1}
  .nav-cta{
    font-family:var(--mono);font-size:11px;font-weight:500;
    letter-spacing:0.16em;text-transform:uppercase;
    color:var(--white);text-decoration:none;
    padding:10px 18px;
    border:1px solid var(--line-strong);
    border-radius:999px;
    transition:all .3s ease;
    display:inline-flex;align-items:center;gap:8px;
    background:transparent;
  }
  .nav-cta::before{
    content:"";width:6px;height:6px;border-radius:50%;
    background:var(--grad);
    display:inline-block;
  }
  .nav-cta:hover{background:var(--white);color:var(--black);border-color:var(--white)}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    /* leave room for the ticker so it lands at the bottom of the first viewport.
       --ticker-h is set in JS once the marquee mounts. */
    min-height:calc(100vh - var(--ticker-h, 60px));
    max-height:calc(100vh - var(--ticker-h, 60px));
    padding:calc(var(--nav-h, 62px) + 28px) 40px 32px;
    width:100%;
    margin:0;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    /* Rows: meta(top) · flex spacer · title · foot · flex spacer
       The two 1fr rows above and below the title/foot pair center the pair
       vertically in the available space while keeping the meta pinned top. */
    grid-template-rows:auto 1fr auto auto 1fr;
    gap:24px;
    align-items:end;
    overflow:hidden;
    z-index:2;
  }

  /* hero ambient sweep — replaces the title light sweep, lives in the background.
     Dropped mix-blend-mode:screen for perf (the gradient stops are already
     additive against the dark canvas — visual cost is negligible). */
  .hero::before{
    content:"";
    position:absolute;inset:-10% -20%;
    background:linear-gradient(
      105deg,
      transparent 0%,
      transparent 35%,
      rgba(238,107,207,0.10) 46%,
      rgba(252,194,76,0.12) 50%,
      rgba(245,148,148,0.10) 54%,
      transparent 65%,
      transparent 100%
    );
    background-size:260% 100%;
    background-position:-30% 50%;
    pointer-events:none;
    z-index:0;
    animation:bgSweep 14s 1.5s ease-in-out infinite;
  }
  @keyframes bgSweep{
    0%,8%{background-position:-40% 50%}
    55%{background-position:140% 50%}
    100%{background-position:140% 50%}
  }

  /* drifting refraction orbs
     Perf notes: dropped mix-blend-mode:screen (bumped raw opacity instead so
     the orbs still read at similar luminance) and reduced the filter:blur
     radius. Both changes cut the per-frame composite cost considerably —
     screen-blending huge blurred layers was the single most expensive thing
     on the page, especially while the hero parallax animates the hero's
     opacity (which forced the orbs to recomposite every scroll frame).
     translateZ promotes each orb to its own GPU layer. */
  .orb{
    position:absolute;
    width:900px;height:900px;
    right:-220px;top:-180px;
    border-radius:50%;
    background:radial-gradient(circle, #ee6bcf 0%, #f59494 45%, #fcc24c 80%, transparent 100%);
    filter:blur(110px);
    opacity:.50;
    z-index:-1;
    animation:drift1 18s ease-in-out infinite alternate;
    will-change:transform;
    transform:translateZ(0);
  }
  .orb.two{
    left:-300px;bottom:-320px;top:auto;right:auto;
    width:760px;height:760px;
    background:radial-gradient(circle, #fcc24c 0%, #f59494 50%, #ee6bcf 90%, transparent 100%);
    opacity:.36;
    animation:drift2 24s ease-in-out infinite alternate;
    animation-delay:-6s;
  }
  .orb.three{
    width:520px;height:520px;
    left:38%;top:30%;
    background:radial-gradient(circle, #ee6bcf 0%, transparent 70%);
    opacity:.24;
    filter:blur(100px);
    animation:drift3 20s ease-in-out infinite alternate;
    animation-delay:-3s;
  }
  @keyframes drift1{
    0%{transform:translate(0,0) scale(1)}
    33%{transform:translate(-140px,80px) scale(1.15)}
    66%{transform:translate(80px,-60px) scale(.92)}
    100%{transform:translate(-40px,140px) scale(1.08)}
  }
  @keyframes drift2{
    0%{transform:translate(0,0) scale(1)}
    50%{transform:translate(120px,-100px) scale(1.18)}
    100%{transform:translate(-60px,60px) scale(.94)}
  }
  @keyframes drift3{
    0%{transform:translate(0,0) scale(1)}
    50%{transform:translate(-180px,140px) scale(1.25)}
    100%{transform:translate(220px,-80px) scale(.85)}
  }
  /* keep generic 'drift' for waitlist bg */
  @keyframes drift{
    0%{transform:translate(0,0) scale(1)}
    50%{transform:translate(-60px,40px) scale(1.08)}
    100%{transform:translate(40px,-30px) scale(.96)}
  }

  .hero-meta{
    grid-column:1 / span 5;
    grid-row:1;                /* top */
    display:flex;justify-content:flex-end;align-items:flex-start;
    margin-bottom:0;
    opacity:0;transform:translateY(12px);
    animation:rise .9s .1s forwards cubic-bezier(.2,.7,.2,1);
  }
  .hero-meta .tag{
    display:inline-flex;align-items:center;gap:10px;
    padding:8px 14px;
    border:1px solid var(--line-strong);
    border-radius:999px;
    background:rgba(248,248,247,0.03);
    backdrop-filter:blur(6px);
    font-family:var(--mono);font-size:11px;font-weight:400;
    letter-spacing:0.16em;text-transform:uppercase;
    color:var(--white);
  }
  .hero-meta .tag .dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--grad);
    animation:pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{transform:scale(1);opacity:1}
    50%{transform:scale(1.6);opacity:.5}
  }
  .hero-meta .status{
    font-family:var(--mono);font-size:10px;font-weight:400;
    letter-spacing:0.18em;text-transform:uppercase;
    color:var(--grey-60);text-align:right;line-height:1.8;
  }

  .hero-title{
    grid-column:1 / span 5;
    grid-row:3;                /* sandwiched between two 1fr spacers → centered */
    align-self:end;
    font-family:var(--aitemz);
    font-weight:300;
    /* Size against BOTH viewport width and height so the headline never
       outgrows the available hero space. min() picks the smaller of the
       two intrinsic sizes; clamp keeps a sane floor and a sane ceiling. */
    font-size:clamp(40px, min(9vw, 13vh), 128px);
    line-height:0.94;
    letter-spacing:-0.04em;
    color:var(--white);
    position:relative;
  }
  .hero-title .line{display:block;overflow:hidden}
  .hero-title .line > span{
    display:block;
    transform:translateY(110%);
    animation:riseText 1.2s forwards cubic-bezier(.2,.7,.2,1);
  }
  .hero-title .line.l2 > span{animation-delay:.15s}
  .hero-title .line.l3 > span{animation-delay:.3s}

  .reveal-word{
    display:inline-block;
    position:relative;
    background:var(--grad);
    background-size:200% 100%;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    font-style:italic;
    font-weight:500;
    animation:shimmer 8s linear infinite;
  }
  @keyframes shimmer{
    0%{background-position:0% 50%}
    100%{background-position:200% 50%}
  }
  @keyframes riseText{
    from{transform:translateY(110%)}
    to{transform:translateY(0)}
  }

  /* light sweep removed from title — lives on .hero::before now */

  .hero-foot{
    grid-column:1 / span 5;
    grid-row:4;                /* immediately under the title */
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:24px;
    margin-top:clamp(24px, 4vh, 56px);
    align-items:end;
    opacity:0;transform:translateY(12px);
    animation:rise 1s 1s forwards cubic-bezier(.2,.7,.2,1);
  }
  .hero-sub{
    grid-column:1 / span 3;
    font-family:var(--aitemz);
    font-weight:300;
    font-size:clamp(19px, min(1.8vw, 2.9vh), 26px);
    line-height:1.4;
    color:var(--grey);
    max-width:62ch;
    letter-spacing:-0.012em;
  }
  .hero-sub strong{color:var(--white);font-weight:500}
  .hero-actions{
    grid-column:4 / span 2;
    display:flex;gap:12px;justify-content:flex-end;
    flex-wrap:wrap;
  }
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--mono);font-size:12px;font-weight:500;
    letter-spacing:0.14em;text-transform:uppercase;
    padding:16px 26px;
    border-radius:999px;
    text-decoration:none;
    transition:all .3s ease;
    cursor:pointer;border:1px solid transparent;
  }
  .btn-primary{
    background:var(--white);color:var(--black);
  }
  .btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 40px -14px rgba(238,107,207,.45);
  }
  .btn-ghost{
    background:transparent;color:var(--white);
    border-color:var(--line-strong);
  }
  .btn-ghost:hover{border-color:var(--white)}

  @keyframes rise{to{opacity:1;transform:translateY(0)}}

  /* ---------- MARQUEE / TICKER NAV ----------
     Behavior:
       - sits at the bottom of the first viewport (hero is sized to leave room).
       - position:sticky pins it to top:0 once the user scrolls past it,
         landing flush against the fixed nav.
       - on hover the auto-scroll pauses so users can click individual links. */
  .marquee{
    display:none;
    overflow:hidden;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:18px 0;
    position:sticky;
    /* nav is ~62px tall (22px padding + 18px content) — match it */
    top:62px;
    z-index:90;            /* below nav (z:100), above page content */
    background:rgba(7,7,7,0.92);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    transition:background .35s ease, border-color .35s ease;
  }
  /* When stuck against the nav, tighten the chrome to match a unified header bar */
  .marquee.stuck{
    background:rgba(21,21,21,0.94);
    border-top-color:transparent;
    border-bottom-color:var(--line);
  }
  .marquee-track{
    display:flex;gap:48px;width:max-content;
    animation:marquee 60s linear infinite;
    will-change:transform;
  }
  .marquee:hover .marquee-track,
  .marquee:focus-within .marquee-track{
    animation-play-state:paused;
  }
  .marquee-track .item{
    font-family:var(--mono);font-size:12px;font-weight:400;
    letter-spacing:0.22em;text-transform:uppercase;
    white-space:nowrap;
    display:inline-flex;align-items:center;gap:48px;
  }
  .marquee-track .item a{
    color:var(--white);text-decoration:none;
    transition:color .25s ease, opacity .25s ease;
    opacity:.9;
    /* expand hit target without changing visual rhythm */
    padding:6px 0;
  }
  .marquee-track .item a:hover{
    color:#fcc24c;
    opacity:1;
  }
  .marquee-track .item .star{color:var(--grey-60);font-size:10px;pointer-events:none}
  .marquee-track .item.accent a{
    background:var(--grad);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
  }
  .marquee-track .item.accent a:hover{
    background:var(--white);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
  }
  @keyframes marquee{
    0%{transform:translateX(0)}
    100%{transform:translateX(-50%)}
  }

  /* ---------- SECTION WRAPPER ----------
     Full-bleed background, content centered + capped at 1360px.
     padding-left/right resolve to:
       viewport ≤ 1440:  40px       → content = viewport - 80px
       viewport >  1440:  (vw-1360)/2 → content = 1360px (same as old 1440 max-width minus 40px gutters)
     Background fills the viewport so adjacent sections (hero, principle) which
     are also full-bleed line up cleanly with no side strips. */
  section.block{
    max-width:none;margin:0;
    padding:140px max(40px, calc((100vw - 1360px) / 2));
    position:relative;z-index:2;
  }

  .section-head{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:24px;
    margin-bottom:80px;
    align-items:end;
  }
  .section-label{
    grid-column:1 / span 1;
    font-family:var(--mono);font-size:11px;font-weight:400;
    letter-spacing:0.18em;text-transform:uppercase;
    color:var(--grey-60);
    display:flex;align-items:center;gap:10px;
  }
  .section-label::before{
    content:"";width:20px;height:1px;background:var(--white);
  }
  .section-heading{
    grid-column:2 / span 4;
    font-family:var(--aitemz);
    font-weight:300;
    font-size:clamp(32px,4.4vw,64px);
    line-height:1.02;
    letter-spacing:-0.03em;
    color:var(--white);
  }
  .section-heading em{
    font-style:italic;
    background:var(--grad);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    font-weight:500;
  }

  /* ---------- CAPABILITIES ---------- */
  .caps{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:0;
    border-top:1px solid var(--line);
    margin-top:32px;
    position:relative;
  }
  /* 4-column variant for the colorful refresh */
  .caps.caps-4{grid-template-columns:repeat(4,1fr)}
  /* Subtle brand gradient hairline atop the row — gives the whole strip a
     warmer entrance and visually ties it to the gradient italic in the heading. */
  .caps::after{
    content:"";
    position:absolute;
    left:0;right:0;top:-1px;height:1px;
    background:linear-gradient(90deg,
      transparent 0%,
      rgba(238,107,207,0) 8%,
      rgba(238,107,207,0.55) 30%,
      rgba(245,148,148,0.55) 50%,
      rgba(252,194,76,0.55) 70%,
      rgba(252,194,76,0) 92%,
      transparent 100%);
    opacity:.65;
    pointer-events:none;
  }
  .cap{
    grid-column:span 1;
    padding:32px 24px 36px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:transparent;
    position:relative;
    transition:background .4s;
    min-height:320px;
    display:flex;flex-direction:column;
  }
  .cap:hover{background:rgba(248,248,247,0.025)}
  .cap::before{
    content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
    background:var(--grad);
    transform:scaleX(0);transform-origin:left;
    transition:transform .6s cubic-bezier(.2,.7,.2,1);
  }
  .cap:hover::before{transform:scaleX(1)}
  .cap:last-child{border-right:none}
  .cap-num{
    font-family:var(--mono);font-size:11px;letter-spacing:.18em;
    color:var(--grey-60);margin-bottom:48px;
  }
  .cap-title{
    font-family:var(--sans);font-size:22px;font-weight:500;
    letter-spacing:-0.015em;line-height:1.15;
    color:var(--white);margin-bottom:14px;
  }
  .cap-desc{
    font-size:13.5px;line-height:1.55;color:var(--grey-60);
    flex:1;
  }
  .cap-arrow{
    margin-top:20px;
    font-family:var(--mono);font-size:10px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--white);
    display:inline-flex;align-items:center;gap:6px;
    opacity:.5;transition:opacity .3s,gap .3s;
  }
  .cap:hover .cap-arrow{opacity:1;gap:10px}

  /* Eyebrow tag with gradient dot — used by the colorful capabilities refresh.
     Replaces the old arrow CTA at the bottom of each card. */
  .cap-tag{
    margin-top:20px;
    font-family:var(--mono);font-size:10px;font-weight:500;
    letter-spacing:.22em;text-transform:uppercase;
    color:var(--grey-60);
    display:inline-flex;align-items:center;gap:10px;
    transition:color .3s ease;
  }
  .cap-tag .d{
    width:6px;height:6px;border-radius:50%;
    background:var(--grad);
    box-shadow:0 0 10px rgba(238,107,207,0.45);
    flex-shrink:0;
  }
  .cap:hover .cap-tag{color:var(--white)}

  /* ---------- QUOTE / PRINCIPLE ----------
     Two stacked headings. The second ("It reveals itself.") starts hidden
     and animates in on scroll — when the viewer scrolls past the first line,
     the punchline lands. Both are oversized so they read as the moment of
     the page. Generous bottom padding sets up breathing room before the
     next section. */
  .principle{
    padding:80px max(40px, calc((100vw - 1360px) / 2)) 120px;
    max-width:none;margin:0;
    text-align:left;
    display:grid;grid-template-columns:repeat(5,1fr);gap:24px;
    row-gap:48px;
    position:relative;z-index:2;
    background:var(--black);   /* explicit — no shimmering "card" effect */
  }
  .principle .q{
    grid-column:1 / span 5;
    font-family:var(--aitemz);
    font-weight:300;
    font-size:clamp(56px,9.2vw,148px);
    line-height:0.96;
    letter-spacing:-0.045em;
    color:var(--white);
  }
  .principle .q-2{
    /* indented slightly so the second line reads as a response */
    padding-left:8%;
  }
  .principle .q em{
    font-style:italic;
    background:var(--grad);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
  }

  /* ---------- STATS ---------- */
  .stats{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .stat{
    padding:56px 28px;
    border-right:1px solid var(--line);
    text-align:left;
    display:flex;flex-direction:column;gap:14px;
    position:relative;
  }
  .stat:last-child{border-right:none}
  .stats{grid-template-columns:repeat(3,1fr)}
  .stat{grid-column:span 1}

  /* Expandable KPIs --
     hover OR keyboard/tap activates the open state. The trigger is the whole
     card on pointer devices; the explicit button below the label gives the
     accessible affordance for keyboard + screen readers + touch. */
  .stat.expandable{
    cursor:pointer;
    transition:background .35s ease;
  }
  .stat.expandable:hover{background:rgba(248,248,247,0.025)}
  .stat-toggle{
    margin-top:18px;
    align-self:flex-start;
    background:transparent;
    border:1px solid var(--line-strong);
    border-radius:999px;
    padding:8px 14px 8px 12px;
    color:var(--white);
    font-family:var(--mono);
    font-size:10px;
    font-weight:500;
    letter-spacing:.18em;
    text-transform:uppercase;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:border-color .25s ease, background .25s ease, color .25s ease;
  }
  .stat-toggle:hover{
    border-color:var(--white);
    background:rgba(248,248,247,0.04);
  }
  .stat-toggle-icon{
    position:relative;
    width:10px;height:10px;
    display:inline-block;
  }
  .stat-toggle-icon::before,
  .stat-toggle-icon::after{
    content:"";
    position:absolute;
    background:currentColor;
    border-radius:1px;
    transition:transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s ease;
  }
  .stat-toggle-icon::before{
    left:0;right:0;top:50%;height:1.5px;
    transform:translateY(-50%);
  }
  .stat-toggle-icon::after{
    top:0;bottom:0;left:50%;width:1.5px;
    transform:translateX(-50%);
  }
  .stat.is-open .stat-toggle-icon::after{
    transform:translateX(-50%) scaleY(0);
    opacity:0;
  }
  .stat-detail{
    /* grid-row trick for smooth height animation without measuring */
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1), margin-top .45s ease, opacity .35s ease;
    opacity:0;
    margin-top:0;
  }
  .stat-detail > p{
    overflow:hidden;
    font-size:13.5px;
    line-height:1.55;
    color:var(--grey);
    border-top:1px solid var(--line);
    padding-top:18px;
    max-width:38ch;
  }
  .stat.is-open .stat-detail{
    grid-template-rows:1fr;
    opacity:1;
    margin-top:22px;
  }
  .stat.is-open .stat-toggle{
    border-color:var(--white);
    background:rgba(248,248,247,0.06);
  }
  .stat-num{
    font-family:var(--aitemz);
    font-weight:300;
    font-size:clamp(44px,5.4vw,84px);
    line-height:1;
    letter-spacing:-0.045em;
    color:var(--white);
  }
  .stat-num sup, .stat-num sup *, .stat-num span{
    -webkit-text-fill-color:var(--grey-60);
    background:none;
  }
  .stat-num sup{
    font-size:.45em;vertical-align:top;font-weight:400;
    color:var(--grey-60);margin-left:4px;
  }
  .stat-label{
    font-family:var(--mono);font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--grey-60);
    line-height:1.5;
  }

  /* ---------- COMPARE — TWO-COLUMN, ICON-LED ----------
     Replaces the old grid table. Two side-by-side columns: traditional
     (left, dimmed) and AITEM (right, full presence). Each row is an icon
     + bold lead phrase + descriptive line. Mobile collapses to a stacked
     two-section card list. */
  .compare-two{
    display:grid;
    grid-template-columns:1fr 1fr;
    margin-top:8px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    position:relative;
  }
  .compare-two::before{
    content:"";
    position:absolute;
    top:0;bottom:0;left:50%;width:1px;
    background:var(--line);
    pointer-events:none;
  }
  .cmp-col{
    padding:56px 48px 64px;
    display:flex;flex-direction:column;
    gap:36px;
    position:relative;
  }
  .cmp-col.aitem{
    background:
      radial-gradient(ellipse 80% 60% at 80% 0%, rgba(238,107,207,0.05), transparent 60%),
      radial-gradient(ellipse 60% 50% at 20% 100%, rgba(252,194,76,0.04), transparent 60%);
  }
  .cmp-col-head{
    display:flex;flex-direction:column;gap:14px;
    /* Stick the column header to the top of the viewport while the column's
       rows scroll past underneath. Negative margins + padding absorb the
       column's outer padding so the sticky bg fills the column edge-to-edge.
       The head only contains h3 + progress rail in flow — the eyebrow is
       position:absolute so it doesn't contribute to head height, keeping the
       sticky band compact and leaving the first rows visible when pinned.
       A bottom gradient fade softens the line where rows scroll under. */
    position:sticky;
    top:var(--nav-h, 62px);
    z-index:5;
    margin:-56px -48px 44px;
    padding:32px 48px 14px;
    /* the eyebrow lives between h3 and progress at rest-state-1, so we add a
       little reserved space below h3 (room for it visually) */
    background:linear-gradient(to bottom, var(--black) 0%, var(--black) 88%, transparent 100%);
  }
  .cmp-col.aitem .cmp-col-head{
    background:linear-gradient(to bottom, #0c0a09 0%, #0c0a09 88%, transparent 100%);
  }

  /* h3 sits at the top of the sticky head, with a solid background so it
     visually covers the eyebrow as it slides from above-rest to below-rest
     during the scroll-driven transition. */
  .cmp-col-head h3{
    order:1;
    position:relative;
    z-index:2;
    background:var(--black);
  }
  .cmp-col.aitem .cmp-col-head h3{background:#0c0a09}

  /* Progress rail sits at the bottom of the sticky head. Extra margin-top
     reserves room above it where the eyebrow lands at the end of the
     transition (eyebrow is absolute so this gap is its visual home). */
  .cmp-col-head .cmp-progress{order:2;margin-top:34px}

  /* The eyebrow is taken out of flow so the sticky head can be short. It
     animates between two absolute positions:
       --eye-prog 0 → "above h3" rest state, tucked into the head padding-top
       --eye-prog 1 → "below h3" docked state, sitting in the reserved gap
     The actual baseline (top) is the docked position; translateY pulls it
     UP by the full travel distance when eye-prog is 0. h3's z-index +
     solid background hide the eyebrow as it slides under it mid-transit. */
  .cmp-col-head .cmp-col-eyebrow{
    position:absolute;
    left:48px;
    /* docked-state baseline: just below h3 with a small offset */
    top:calc(32px + var(--cmp-h3-h, 130px) + 12px);
    z-index:1;
    /* travel distance from above-h3 rest to docked-state.
       Starts well above h3 (~24px clear of h3 top) at prog 0. */
    transform:translateY(calc((var(--eye-prog, 0) - 1) * (var(--cmp-h3-h, 130px) + 38px)));
    will-change:transform;
  }

  /* Gradient progress bar — sits flush along the bottom of the sticky header,
     fills horizontally based on the section's scroll progress (driven by JS
     setting --cmp-progress on .compare-two). The traditional column uses a
     muted greyscale fill; the aitem column uses the brand gradient. */
  .cmp-progress{
    position:relative;
    height:2px;width:100%;
    background:rgba(255,255,255,0.06);
    overflow:hidden;
    border-radius:2px;
  }
  .cmp-progress-fill{
    position:absolute;inset:0 auto 0 0;
    width:calc(var(--cmp-progress, 0) * 100%);
    background:linear-gradient(90deg, rgba(255,255,255,0.16), rgba(255,255,255,0.42));
    transition:width .15s linear;
  }
  .cmp-col.aitem .cmp-progress-fill{
    background:var(--grad);
    opacity:.85;
  }
  .cmp-col-eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--mono);font-size:11px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--grey-60);
  }
  .cmp-col.aitem .cmp-col-eyebrow{color:var(--white)}
  .cmp-col-eyebrow .d{
    width:6px;height:6px;border-radius:50%;
    background:var(--grad);
  }
  .cmp-col.traditional .cmp-col-eyebrow .d{
    background:var(--grey-80);
  }
  .cmp-col h3{
    font-family:var(--aitemz);font-weight:300;
    font-size:clamp(36px, 4.4vw, 60px);
    line-height:1.02;letter-spacing:-0.035em;
    color:var(--white);
  }
  .cmp-col.traditional h3{color:var(--grey-60)}
  .cmp-col h3 em{
    font-style:italic;
    background:var(--grad);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
  }
  .cmp-col.traditional h3 em{
    background:none;-webkit-text-fill-color:var(--grey);color:var(--grey);
  }
  /* Each row */
  .cmp-row{
    display:grid;
    grid-template-columns:52px 1fr;
    gap:24px;
    align-items:flex-start;
  }
  .cmp-row .cmp-icon{
    width:52px;height:52px;flex-shrink:0;
    border:1px solid var(--line-strong);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:var(--white);
    transition:border-color .35s ease, background .35s ease;
  }
  .cmp-col.traditional .cmp-icon{
    color:var(--grey-60);
    border-color:var(--line);
    background:transparent;
  }
  .cmp-col.aitem .cmp-icon{
    color:var(--white);
    border-color:var(--line-strong);
    background:rgba(238,107,207,0.04);
  }
  .cmp-col.aitem .cmp-row:hover .cmp-icon{
    border-color:rgba(238,107,207,0.55);
    background:rgba(238,107,207,0.08);
  }
  .cmp-icon svg{
    width:24px;height:24px;
    fill:none;stroke:currentColor;
    stroke-width:1.25;
    stroke-linecap:butt;
    stroke-linejoin:round;
  }
  .cmp-body .cmp-title{
    font-family:var(--aitemz);font-weight:400;
    font-size:21px;line-height:1.2;letter-spacing:-0.018em;
    color:var(--white);
    margin-bottom:6px;
  }
  .cmp-col.traditional .cmp-body .cmp-title{color:var(--grey)}
  .cmp-col.aitem .cmp-body .cmp-title em{
    font-style:italic;
    background:var(--grad);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
  }
  .cmp-body .cmp-desc{
    font-size:14.5px;line-height:1.55;
    color:var(--grey-60);
    max-width:38ch;
  }
  .cmp-body .cmp-desc strong{color:var(--white);font-weight:500}

  @media (max-width:1024px){
    .cmp-col{padding:40px 32px 48px;gap:28px}
    .cmp-col-head{margin:-40px -32px 8px;padding:28px 32px 20px}
    .cmp-col h3{font-size:clamp(32px,5vw,44px)}
  }
  @media (max-width:780px){
    .compare-two{
      grid-template-columns:1fr;
    }
    .compare-two::before{
      left:0;right:0;top:50%;bottom:auto;
      width:100%;height:1px;
    }
    .cmp-col{padding:36px 4px 44px;gap:24px}
    .cmp-col-head{
      /* mobile: cols stack vertically, sticky would conflict — reset. */
      position:relative;top:auto;z-index:auto;
      margin:0 0 4px;padding:0;
      background:none;
    }
    .cmp-col-head h3{background:none}
    .cmp-col-head .cmp-progress{display:none}
    .cmp-col-head .cmp-col-eyebrow{
      /* mobile: drop the absolute positioning + transform; show eyebrow above
         h3 in normal flow. */
      position:static;
      transform:none;
      margin-bottom:8px;
    }
    .cmp-col h3{font-size:clamp(30px,8vw,44px)}
    .cmp-row{grid-template-columns:44px 1fr;gap:18px}
    .cmp-row .cmp-icon{width:44px;height:44px}
    .cmp-icon svg{width:21px;height:21px}
    .cmp-body .cmp-title{font-size:19px}
    .cmp-body .cmp-desc{font-size:14px}
  }

  /* ---------- WHAT-WE-DO PARALLAX OVERLAP ----------
     As the visitor finishes the comparison section, lift the entire block
     upward at a slower-than-page rate so the next section appears to slide
     up over it. Drives off --wwd-lift (set by the same scroll handler that
     powers the eyebrow + progress rail). The next section needs an opaque
     background + higher z-index so it visually covers the lifting block. */
  .what-we-do{
    position:relative;
    z-index:2;
    transform:translate3d(0, var(--wwd-lift, 0px), 0);
    will-change:transform;
  }

  /* ---------- LIVE STUDIO — SCROLLYTELLING ----------
     A sticky two-column stage: phone on the left, dashboard cards on the
     right. The phone's inner content scrolls vertically as the visitor
     scrolls the page; dashboard cards animate in one by one at staged
     progress thresholds. Scroll progress is driven by a single rAF-throttled
     handler in the page script. */
  .studio-scroll{
    position:relative;
    z-index:3;
    height:520vh;
    background:var(--black);
  }
  .studio-stage{
    position:sticky;top:0;
    height:100vh;min-height:620px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    align-items:stretch;
    max-width:1440px;margin:0 auto;
    padding:88px 40px 60px;
    overflow:hidden;
  }
  .studio-stage::before, .studio-stage::after{
    content:"";position:absolute;width:60px;height:60px;
    border:1px solid var(--line);
    pointer-events:none;
  }
  .studio-stage::before{top:24px;left:24px;border-right:0;border-bottom:0}
  .studio-stage::after{bottom:24px;right:24px;border-left:0;border-top:0}

  .studio-eyebrow{
    position:absolute;
    top:32px;left:50%;transform:translateX(-50%);
    display:inline-flex;align-items:center;gap:10px;
    padding:8px 16px;
    border:1px solid var(--line-strong);border-radius:999px;
    background:rgba(248,248,247,0.03);backdrop-filter:blur(8px);
    font-family:var(--mono);font-size:10px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--grey-60);
    z-index:5;white-space:nowrap;
  }
  .studio-eyebrow .d{
    width:6px;height:6px;border-radius:50%;background:var(--grad);
    animation:pulse 2.4s ease-in-out infinite;
  }
  .studio-eyebrow b{color:var(--white);font-weight:500}

  .studio-progress{
    position:absolute;left:0;right:0;bottom:0;
    height:1px;background:var(--line);
  }
  .studio-progress::after{
    content:"";display:block;height:100%;width:0;
    background:var(--grad);
    transition:width .15s linear;
  }

  /* ===== PHONE ===== */
  .studio-phone-wrap{
    display:flex;align-items:flex-start;justify-content:flex-end;
    padding-right:24px;
    height:100%;
  }
  .studio-phone{
    position:relative;
    width:300px;
    /* Responsive: never exceeds the visible stage. 144px = stage padding 88+60 - some buffer. */
    height:min(620px, calc(100vh - 160px));
    max-height:calc(100vh - 160px);
    border-radius:46px;
    background:#0a0a0a;
    border:1px solid rgba(248,248,247,0.18);
    padding:8px;
    box-shadow:
      0 30px 80px -20px rgba(0,0,0,0.65),
      inset 0 1px 0 rgba(255,255,255,0.05);
    flex-shrink:0;
  }
  .studio-phone::before{
    content:"";position:absolute;
    top:18px;left:50%;transform:translateX(-50%);
    width:90px;height:24px;border-radius:14px;
    background:#000;z-index:3;
  }
  .studio-phone::after{
    content:"";position:absolute;
    top:25px;right:50%;margin-right:-30px;
    width:8px;height:8px;border-radius:50%;
    background:#222;
    box-shadow:0 0 0 1px #000, inset 0 0 0 2px rgba(238,107,207,0.4);
    z-index:4;
  }
  .studio-phone-screen{
    position:relative;width:100%;height:100%;
    border-radius:38px;overflow:hidden;
    background:#f0eeea;
    color:#070707;
  }
  .studio-statusbar{
    position:absolute;top:0;left:0;right:0;z-index:2;
    height:44px;padding:14px 28px 0;
    display:flex;justify-content:space-between;align-items:flex-start;
    font-family:-apple-system, system-ui, var(--sans);
    font-size:13px;font-weight:600;color:#070707;
  }
  .studio-statusbar .right{display:flex;align-items:center;gap:5px}
  .studio-statusbar .battery{
    width:24px;height:11px;border:1.2px solid #070707;border-radius:3px;position:relative;
  }
  .studio-statusbar .battery::after{
    content:"";position:absolute;right:-3px;top:3px;
    width:1.5px;height:5px;background:#070707;border-radius:0 1px 1px 0;
  }
  .studio-statusbar .battery::before{
    content:"";position:absolute;inset:1.5px;width:70%;
    background:#070707;border-radius:1px;
  }

  /* inner scrolling tape — multi-screen vertical strip */
  .studio-tape{
    position:absolute;top:0;left:0;right:0;
    will-change:transform;
    transform:translateY(0);
    transition:transform .12s linear;
    padding-top:44px;
  }
  .studio-screen{
    width:100%;padding:14px 16px 18px;
    border-bottom:1px solid rgba(7,7,7,0.06);
    background:#f0eeea;
  }
  .studio-screen.dark{background:#070707;color:#f0eeea}
  .studio-screen-eyebrow{
    display:flex;align-items:center;gap:6px;
    font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;
    text-transform:uppercase;color:#76746f;margin-bottom:8px;
  }
  .studio-screen-eyebrow .d{
    width:5px;height:5px;border-radius:50%;background:var(--grad);
  }

  /* SCREEN 1 — QR scan (module-based, similar to the page intro) */
  .ph-scan{
    background:#070707;color:#f0eeea;
    min-height:540px;position:relative;
    padding:56px 16px 22px;
    display:flex;flex-direction:column;align-items:center;gap:18px;
  }
  .ph-qr-frame{
    position:relative;
    width:188px;aspect-ratio:1/1;
    padding:14px;
  }
  .ph-qr-frame .corner{
    position:absolute;width:22px;height:22px;
    border:1.5px solid #ee6bcf;
  }
  .ph-qr-frame .corner.tl{top:-2px;left:-2px;border-right:0;border-bottom:0}
  .ph-qr-frame .corner.tr{top:-2px;right:-2px;border-left:0;border-bottom:0}
  .ph-qr-frame .corner.bl{bottom:-2px;left:-2px;border-right:0;border-top:0}
  .ph-qr-frame .corner.br{bottom:-2px;right:-2px;border-left:0;border-top:0}
  .ph-qr-grid{
    position:absolute;inset:14px;
    display:grid;
    grid-template-columns:repeat(25,1fr);
    grid-template-rows:repeat(25,1fr);
    gap:1px;
  }
  .ph-qr-grid i{
    background:transparent;opacity:0;transform:scale(.2);
    animation:phQrIn .5s forwards cubic-bezier(.2,.7,.2,1);
    animation-delay:calc(var(--d, 0) * 1ms);
  }
  .ph-qr-grid i.on{background:#f0eeea}
  @keyframes phQrIn{to{opacity:1;transform:scale(1)}}
  .ph-qr-frame .scanline{
    position:absolute;left:6px;right:6px;
    height:1.5px;background:linear-gradient(90deg,transparent,#ee6bcf 35%,#fcc24c 65%,transparent);
    box-shadow:0 0 12px rgba(238,107,207,.7);
    animation:phScan 5s 1.4s ease-in-out infinite;pointer-events:none;
  }
  @keyframes phScan{
    0%   {top:6px;opacity:0}
    4%   {opacity:1}
    42%  {top:calc(100% - 8px);opacity:1}
    50%  {opacity:0;top:calc(100% - 8px)}
    88%  {opacity:0;top:6px}
    92%  {opacity:1}
    100% {top:6px;opacity:1}
  }
  /* corner reticles flash to amber at completion */
  .ph-qr-frame .corner{
    animation:phCorner 5s ease-in-out 1.4s infinite;
  }
  @keyframes phCorner{
    0%, 50%, 88%, 100% {border-color:#ee6bcf}
    56%, 80%           {border-color:#fcc24c}
  }
  /* completion: radial burst + gradient check medallion */
  .ph-qr-complete-bg{
    position:absolute;inset:-14px;border-radius:10px;
    background:radial-gradient(circle, rgba(238,107,207,0.45), rgba(252,194,76,0.2) 45%, transparent 78%);
    opacity:0;pointer-events:none;z-index:2;
    animation:phCompleteBg 5s ease-in-out 1.4s infinite;
    mix-blend-mode:screen;
  }
  @keyframes phCompleteBg{
    0%, 48%   {opacity:0;transform:scale(0.7)}
    54%       {opacity:1;transform:scale(1.15)}
    62%, 78%  {opacity:0.7;transform:scale(1)}
    88%, 100% {opacity:0;transform:scale(1.18)}
  }
  .ph-qr-complete{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    opacity:0;z-index:3;pointer-events:none;
    animation:phComplete 5s ease-in-out 1.4s infinite;
  }
  @keyframes phComplete{
    0%, 48%   {opacity:0}
    54%, 78%  {opacity:1}
    88%, 100% {opacity:0}
  }
  .ph-qr-complete-check{
    width:54px;height:54px;border-radius:50%;
    background:linear-gradient(135deg,#ee6bcf 0%,#f59494 50%,#fcc24c 100%);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 26px rgba(238,107,207,0.55), 0 0 0 4px rgba(7,7,7,0.65);
    transform:scale(0);
    animation:phCheckIn 5s cubic-bezier(.2,.7,.2,1) 1.4s infinite;
  }
  @keyframes phCheckIn{
    0%, 48%   {transform:scale(0) rotate(-12deg)}
    56%       {transform:scale(1.18) rotate(0)}
    62%, 78%  {transform:scale(1) rotate(0)}
    88%, 100% {transform:scale(0.7) rotate(0);opacity:0}
  }
  .ph-qr-complete-check svg{
    width:26px;height:26px;
    stroke:#070707;stroke-width:3;
    fill:none;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:22;
    stroke-dashoffset:22;
    animation:phCheckDraw 5s ease-in-out 1.4s infinite;
  }
  @keyframes phCheckDraw{
    0%, 54%   {stroke-dashoffset:22}
    66%, 80%  {stroke-dashoffset:0}
    88%, 100% {stroke-dashoffset:22}
  }
  /* label crossfade between "Reading" and "Authenticated" */
  .ph-scan .label{
    position:relative;min-height:36px;
    width:100%;text-align:center;
  }
  .ph-scan .label .state{
    position:absolute;left:50%;top:0;transform:translateX(-50%);
    width:max-content;
  }
  .ph-scan .label .state.s1{animation:phLblA 5s ease-in-out 1.4s infinite}
  .ph-scan .label .state.s2{opacity:0;animation:phLblB 5s ease-in-out 1.4s infinite}
  .ph-scan .label .state.s2 b{
    background:linear-gradient(115deg,#ee6bcf 0%,#f59494 45%,#fcc24c 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  @keyframes phLblA{
    0%, 48%   {opacity:1}
    54%, 80%  {opacity:0}
    88%, 100% {opacity:1}
  }
  @keyframes phLblB{
    0%, 48%   {opacity:0}
    54%, 80%  {opacity:1}
    88%, 100% {opacity:0}
  }
  .ph-scan .label{
    text-align:center;
    font-family:var(--mono);font-size:10px;letter-spacing:.22em;
    text-transform:uppercase;color:#c2bfb8;
  }
  .ph-scan .label b{color:#f0eeea;font-weight:500;display:block;margin-top:4px;letter-spacing:.16em}

  /* SCREEN 2 — product passport (jacket) */
  .ph-passport{padding:56px 16px 22px}
  .ph-product{
    background:#e6e2dc;border-radius:18px;
    padding:18px;display:flex;flex-direction:column;align-items:center;gap:8px;
    position:relative;overflow:hidden;
  }
  .ph-product::before{
    content:"";position:absolute;inset:auto -30% -40% auto;width:140%;height:60%;
    background:radial-gradient(ellipse, rgba(238,107,207,.18), transparent 70%);
    pointer-events:none;
  }
  .ph-product .product-svg{
    width:108px;height:128px;display:block;flex-shrink:0;
    filter:drop-shadow(0 6px 12px rgba(0,0,0,.18));
    position:relative;z-index:1;
  }
  .ph-product .name{
    font-family:'Times New Roman', serif;font-style:italic;
    font-size:18px;font-weight:400;color:#070707;line-height:1.1;
    margin-top:4px;position:relative;z-index:1;
  }
  .ph-product .sku{
    font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;
    text-transform:uppercase;color:#76746f;position:relative;z-index:1;
  }
  .ph-passport .row-list{margin-top:14px;display:flex;flex-direction:column;gap:8px}
  .ph-passport .row-item{
    display:flex;justify-content:space-between;align-items:center;
    padding:10px 12px;background:#e6e2dc;border-radius:10px;font-size:11px;
  }
  .ph-passport .row-item .k{color:#76746f;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;font-size:9px}
  .ph-passport .row-item .v{color:#070707;font-weight:500}
  .ph-cta{
    margin-top:14px;text-align:center;padding:12px;
    background:#070707;color:#f0eeea;border-radius:999px;
    font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  }

  /* SCREEN 3 — outfits + carousels */
  .ph-looks{padding:56px 16px 22px;display:flex;flex-direction:column;gap:18px}
  .ph-looks h4{
    font-family:var(--aitemz);font-weight:400;
    font-size:17px;letter-spacing:-0.02em;color:#070707;line-height:1.2;
  }
  .ph-looks h4 em{font-style:italic;color:#76746f}
  /* 3 outfit cards across, each showing jacket + matching piece */
  .outfit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .outfit{
    aspect-ratio:0.78/1;background:#e6e2dc;border-radius:10px;
    position:relative;overflow:hidden;padding:8px;
    display:flex;flex-direction:column;justify-content:space-between;
  }
  .outfit .outfit-art{
    position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;
    padding:8px 6px 18px;gap:-6px;
  }
  .outfit .outfit-art svg{width:36px;height:auto;display:block}
  .outfit .outfit-art svg + svg{margin-left:-6px}
  .outfit b{
    font-family:var(--mono);font-size:8px;letter-spacing:.18em;
    text-transform:uppercase;color:#070707;z-index:1;position:relative;
  }
  .outfit .price{
    font-family:var(--mono);font-size:8px;letter-spacing:.1em;color:#76746f;z-index:1;position:relative;
  }
  /* Carousels: horizontal scroll strips of matching items */
  .ph-carousel{display:flex;flex-direction:column;gap:8px}
  .ph-carousel .ph-c-head{
    display:flex;justify-content:space-between;align-items:baseline;
    font-family:var(--mono);font-size:9px;letter-spacing:.2em;
    text-transform:uppercase;color:#76746f;
  }
  .ph-carousel .ph-c-head b{color:#070707;font-weight:500;letter-spacing:.16em}
  .ph-carousel .ph-c-track{
    display:flex;gap:6px;overflow-x:auto;
    padding-bottom:2px;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .ph-carousel .ph-c-track::-webkit-scrollbar{display:none}
  .ph-carousel .ph-c-item{
    flex:0 0 auto;width:62px;aspect-ratio:1/1;
    background:#e6e2dc;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    padding:6px;
  }
  .ph-carousel .ph-c-item svg{max-width:100%;max-height:100%;display:block}

  /* SCREEN 4 — claim your aitem */
  .ph-claim{
    padding:56px 16px 22px;background:#070707;color:#f0eeea;min-height:540px;
    display:flex;flex-direction:column;gap:14px;
  }
  .ph-claim h4{
    font-family:var(--aitemz);font-weight:300;
    font-size:24px;letter-spacing:-0.025em;line-height:1.05;color:#f0eeea;
  }
  .ph-claim h4 em{font-style:italic;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .ph-claim .lead{
    font-size:12px;line-height:1.5;color:#c2bfb8;max-width:34ch;
  }
  /* mini receipt summarising what's being claimed */
  .claim-summary{
    margin-top:6px;padding:14px;border:1px solid rgba(248,248,247,0.12);border-radius:14px;
    display:flex;gap:12px;align-items:center;background:rgba(248,248,247,0.02);
  }
  .claim-summary .product-svg{width:56px;height:64px;flex-shrink:0}
  .claim-summary .info{display:flex;flex-direction:column;gap:3px;min-width:0}
  .claim-summary .info .nm{
    font-family:'Times New Roman', serif;font-style:italic;
    font-size:15px;font-weight:400;color:#f0eeea;line-height:1.1;
  }
  .claim-summary .info .sku{
    font-family:var(--mono);font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:#76746f;
  }
  .claim-summary .info .pill{
    margin-top:4px;display:inline-flex;align-items:center;gap:5px;
    padding:3px 7px;border:1px solid rgba(248,248,247,0.16);border-radius:999px;
    font-family:var(--mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;
    color:#f0eeea;width:fit-content;
  }
  .claim-summary .info .pill .d{width:4px;height:4px;border-radius:50%;background:var(--grad)}

  .ph-claim-actions{
    margin-top:auto;display:flex;flex-direction:column;gap:8px;
  }
  .ph-claim-btn{
    width:100%;padding:13px 16px;
    border-radius:999px;
    font-family:var(--mono);font-size:10px;letter-spacing:.18em;
    text-transform:uppercase;font-weight:500;
    text-align:center;
    display:flex;align-items:center;justify-content:center;gap:8px;
  }
  .ph-claim-btn.primary{
    background:var(--grad);color:#070707;
  }
  .ph-claim-btn.secondary{
    background:transparent;color:#f0eeea;
    border:1px solid rgba(248,248,247,0.22);
  }
  .ph-claim-btn .ico{
    width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;
  }
  .ph-claim-btn .ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4}
  .ph-claim-foot{
    font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;
    text-transform:uppercase;color:#76746f;text-align:center;
    display:flex;align-items:center;justify-content:center;gap:8px;
  }
  .ph-claim-foot .d{width:4px;height:4px;border-radius:50%;background:var(--grad)}

  /* === legacy ph-lead retained for back-compat but unused === */
  .ph-lead{padding:48px 16px 22px;background:#070707;color:#f0eeea;min-height:540px}
  .ph-lead h4{
    font-family:var(--aitemz);font-weight:300;
    font-size:22px;letter-spacing:-0.025em;line-height:1.1;color:#f0eeea;margin-bottom:14px;
  }
  .ph-lead h4 em{font-style:italic;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .ph-lead .field{
    margin-top:10px;padding:12px 14px;
    border:1px solid rgba(248,248,247,0.16);border-radius:10px;
    font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:#c2bfb8;
  }
  .ph-lead .field.filled{color:#f0eeea;border-color:rgba(238,107,207,.5)}
  .ph-lead .field .lbl{font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:#76746f;margin-bottom:4px}
  .ph-lead .submit{
    margin-top:14px;padding:14px;text-align:center;
    background:var(--grad);color:#070707;border-radius:999px;
    font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  }

  /* ===== CARDS column ===== */
  .studio-cards{
    position:relative;height:100%;
    display:flex;flex-direction:column;justify-content:flex-start;
    padding-left:24px;padding-top:4px;
    overflow:hidden;min-height:0;
  }
  .studio-cards-intro{margin-bottom:20px;max-width:440px;flex-shrink:0}
  .studio-cards-intro .lbl{
    font-family:var(--mono);font-size:10px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--grey-60);
    display:inline-flex;align-items:center;gap:10px;margin-bottom:12px;
  }
  .studio-cards-intro .lbl .d{
    width:5px;height:5px;border-radius:50%;background:var(--grad);
  }
  .studio-cards-intro h3{
    font-family:var(--aitemz);font-weight:300;
    font-size:clamp(22px, 2.4vw, 32px);line-height:1.05;letter-spacing:-0.025em;
    color:var(--white);
  }
  .studio-cards-intro h3 em{
    font-style:italic;background:var(--grad);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .studio-cards-intro p{
    margin-top:10px;font-size:13px;line-height:1.55;
    color:var(--grey-60);max-width:38ch;
  }

  .studio-card-deck{
    position:relative;width:100%;max-width:460px;
    flex:1;min-height:0;
    overflow:hidden;
    /* fades at top/bottom so cards drift in/out softly */
    mask-image:linear-gradient(180deg, transparent 0, #000 6%, #000 88%, transparent 100%);
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 6%, #000 88%, transparent 100%);
  }
  .studio-card-deck-inner{
    position:relative;
    transition:transform .12s linear;
    will-change:transform;
    padding-bottom:24px;
  }
  .studio-card{
    background:rgba(20,20,20,0.85);
    backdrop-filter:blur(10px);
    border:1px solid var(--line-strong);
    padding:14px 18px;margin-bottom:10px;
    opacity:0;
    transform:translateY(22px) scale(0.97);
    transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
    will-change:opacity,transform;
  }
  .studio-card.in{opacity:1;transform:translateY(0) scale(1)}
  .studio-card .card-head{
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:12px;
    font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--grey-60);
  }
  .studio-card .card-head .d{
    width:5px;height:5px;border-radius:50%;background:var(--grad);
    animation:pulse 2.4s ease-in-out infinite;
  }
  .studio-card .num{
    font-family:var(--aitemz);font-weight:300;
    font-size:32px;letter-spacing:-0.035em;line-height:1;color:var(--white);
  }
  .studio-card .num sup{
    font-size:.45em;color:var(--grey-60);font-weight:400;margin-left:4px;vertical-align:top;
  }
  .studio-card .delta{
    font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
    color:#7ed99a;margin-top:6px;
    display:inline-flex;align-items:center;gap:6px;
  }
  .studio-card .delta::before{content:"↑";font-size:11px}
  .studio-card .delta.neg{color:#f59494}
  .studio-card .delta.neg::before{content:"↓"}

  .studio-spark{
    display:flex;align-items:flex-end;gap:3px;height:30px;margin-top:10px;
  }
  .studio-spark .bar{
    flex:1;background:var(--white);opacity:.45;border-radius:1px;min-height:2px;
  }
  .studio-spark .bar.peak{opacity:1;background:var(--grad)}

  .studio-card .loc-row{
    display:flex;justify-content:space-between;align-items:center;
    padding:7px 0;border-bottom:1px solid var(--line);font-size:12px;
  }
  .studio-card .loc-row:last-child{border-bottom:0}
  .studio-card .loc-row .city{color:var(--white)}
  .studio-card .loc-row .city .ix{
    font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--grey-80);margin-right:8px;
  }
  .studio-card .loc-row .v{font-family:var(--mono);font-size:10.5px;color:var(--grey)}

  .studio-card.alert{
    border-color:rgba(238,107,207,.4);
    background:linear-gradient(135deg, rgba(238,107,207,0.08), rgba(20,20,20,0.85) 60%);
  }
  .studio-card.alert .card-head{color:#ee6bcf}
  .studio-card .lead-body{
    font-family:var(--aitemz);font-weight:300;
    font-size:15px;line-height:1.3;letter-spacing:-0.015em;color:var(--white);
  }
  .studio-card .lead-body em{font-style:italic;color:var(--grey)}

  .studio-card .pair-row{
    display:flex;justify-content:space-between;align-items:center;
    padding:6px 0;font-size:12px;
  }
  .studio-card .pair-row .pair{display:flex;align-items:center;gap:8px;color:var(--white)}
  .studio-card .pair-row .pair span:nth-child(2){color:var(--grey-60);font-size:11px}
  .studio-card .pair-row .v{font-family:var(--mono);font-size:10.5px;color:var(--grey)}

  @media (max-width:1024px){
    .studio-scroll{height:500vh}
    .studio-stage{padding:32px;gap:32px}
    .studio-phone{width:260px;height:540px}
    .studio-cards-intro h3{font-size:30px}
  }
  @media (max-width:780px){
    /* Keep scrollytelling on mobile too — sticky stage, page scroll drives the
       phone tape AND the card-deck reveal. Phone now claims the entire first
       sticky viewport; the cards deck appears below it as the visitor scrolls. */
    .studio-scroll{height:500vh;background:none}
    .studio-stage{
      position:sticky;top:0;height:100vh;min-height:600px;
      grid-template-columns:1fr;
      /* eyebrow · phone (fills) · cards (auto, sits at bottom of viewport) */
      grid-template-rows:auto 1fr auto;
      gap:8px;padding:54px 14px 14px;
      overflow:hidden;align-items:stretch;
    }
    .studio-stage::before,.studio-stage::after{display:none}
    .studio-eyebrow{
      position:relative;top:0;left:0;transform:none;
      align-self:center;justify-self:center;white-space:normal;
      font-size:9px;letter-spacing:.16em;padding:6px 12px;
      grid-row:1;
      max-width:90%;text-align:center;
    }
    .studio-progress{display:block}
    .studio-phone-wrap{
      grid-row:2;justify-content:center;padding:0;
      align-items:center;
    }
    /* Phone is the centerpiece — fills the available vertical band so the
       device frame reads at "showroom" scale before the cards stage in. */
    .studio-phone{
      width:min(300px, 78vw);
      height:min(640px, calc(78vh - 70px));
      max-height:calc(78vh - 70px);
    }
    .studio-phone::before{width:84px;height:22px;border-radius:13px;top:18px}
    .studio-phone::after{top:24px;width:8px;height:8px;margin-right:-28px}
    .studio-statusbar{padding:14px 24px 0;font-size:13px;height:42px}
    .studio-tape{padding-top:42px}

    /* Cards section: sits in the bottom band of the stage. Hidden at rest
       (translated down + faded). JS adds .cards-on once scroll progress
       enters the cards phase — they slide up and become readable. */
    .studio-cards{
      grid-row:3;padding:0;height:auto;min-height:0;
      opacity:0;
      transform:translateY(24px);
      transition:opacity .45s ease, transform .55s cubic-bezier(.2,.7,.2,1);
      will-change:opacity,transform;
    }
    .studio-cards.cards-on{
      opacity:1;
      transform:translateY(0);
    }
    .studio-cards-intro{margin-bottom:6px;max-width:none}
    .studio-cards-intro .lbl{margin-bottom:4px;font-size:9px}
    .studio-cards-intro h3{font-size:16px;line-height:1.15}
    .studio-cards-intro p{display:none}
    .studio-card-deck{max-width:none;max-height:30vh}
    .studio-card{padding:10px 13px;margin-bottom:6px}
    .studio-card .num{font-size:24px}
    .studio-card .lead-body{font-size:12.5px;line-height:1.35}
    .studio-card .card-head{font-size:8.5px;letter-spacing:.16em;margin-bottom:8px}
  }
  @media (prefers-reduced-motion: reduce){
    .ph-scan .viewfinder .scanline{animation:none;top:50%}
    .studio-tape{transition:none}
    .studio-card{transition:opacity .25s ease}
  }

  /* ---------- COMPARE (old grid table, retained but unused) ---------- */
  .compare{
    /* 4 column grid: dim label | item cell | gutter | trad cell. */
    display:grid;
    grid-template-columns:minmax(180px, 1fr) 1.4fr 1.4fr;
    margin-top:8px;
    position:relative;
  }
  /* divider down the middle */
  .compare::before{
    content:"";
    position:absolute;
    top:0;bottom:0;
    left:calc((100% - (100%/3.4*2.8)) + (100%/3.4*1.4));
    width:1px;
    background:var(--line);
    pointer-events:none;
  }
  .compare-head{
    grid-column:span 1;
    padding:24px 24px 24px;
    border-bottom:1px solid var(--line);
    display:flex;flex-direction:column;gap:6px;
  }
  .compare-head.item{grid-column:2 / span 1; border-left:1px solid var(--line)}
  .compare-head.trad{grid-column:3 / span 1; border-left:1px solid var(--line)}
  .compare-tag{
    font-family:var(--mono);font-size:12px;font-weight:500;
    letter-spacing:.22em;text-transform:uppercase;color:var(--white);
    display:inline-flex;align-items:center;gap:8px;
  }
  .compare-tag .d{
    width:6px;height:6px;border-radius:50%;background:var(--grad);
  }
  .compare-tag.muted{color:var(--grey-60)}
  .compare-tag-sub{
    font-family:var(--mono);font-size:10px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--grey-60);
  }
  .compare-tag-sub.muted{color:var(--grey-80)}

  /* one row = three rendered cells (dim, item, trad). */
  .compare-dim{
    grid-column:1 / span 1;
    padding:28px 24px;
    border-bottom:1px solid var(--line);
    border-right:1px solid var(--line);
    font-family:var(--mono);font-size:11px;font-weight:500;
    letter-spacing:.18em;text-transform:uppercase;
    color:var(--white);
    display:flex;align-items:center;
  }
  .compare-cell{
    padding:28px 24px;
    border-bottom:1px solid var(--line);
    display:flex;align-items:flex-start;gap:14px;
    font-size:14.5px;line-height:1.55;
    transition:background .35s ease;
  }
  .compare-cell p{margin:0}
  .compare-cell strong{color:var(--white);font-weight:500}
  .compare-cell.yes{
    grid-column:2 / span 1;
    color:var(--white);
    border-left:1px solid var(--line);
    background:rgba(248,248,247,0.015);
  }
  .compare-cell.yes:hover{background:rgba(248,248,247,0.04)}
  .compare-cell.no{
    grid-column:3 / span 1;
    color:var(--grey-60);
    border-left:1px solid var(--line);
  }
  .compare-cell .mark-y,
  .compare-cell .mark-n{
    flex:0 0 22px;width:22px;height:22px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:600;
    margin-top:1px;
  }
  .compare-cell .mark-y{
    background:var(--grad);color:var(--black);
  }
  .compare-cell .mark-n{
    border:1px solid var(--line-strong);
    color:var(--grey-60);
    background:transparent;
  }
    display:grid;
    grid-template-columns:1fr 1.4fr 1.4fr;
    border-top:1px solid var(--line);
    margin-top:8px;
    position:relative;
  }

  /* ---------- WHY NOW ----------
     Editorial split: left rail = headline + lede + 3 numbered cards,
     right rail = a system diagram showing one physical product feeding
     three modules (DPP / AI experience / CRM + analytics). A single
     full-width takeaway band closes the section. */
  .whynow{padding:140px 0 120px}
  .whynow .label-strip{
    max-width:var(--maxw, 1440px);margin:0 auto 56px;
    padding:0 var(--pad, 40px);
    display:flex;align-items:center;gap:14px;
    font-family:var(--mono);font-size:11px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--grey-60);
  }
  .whynow .label-strip::before{
    content:"";width:22px;height:1px;background:var(--white);
  }
  .whynow .label-strip b{color:var(--white);font-weight:500}

  .whynow-stage{
    max-width:var(--maxw, 1440px);margin:0 auto;
    padding:0 var(--pad, 40px);
    display:grid;
    grid-template-columns:1.05fr 1fr;
    gap:72px;
    align-items:center;
    min-height:560px;
  }
  /* LEFT — headline + lede */
  .whynow-head h2{
    font-family:var(--aitemz);font-weight:300;
    font-size:clamp(40px, 5.4vw, 76px);
    line-height:1;letter-spacing:-0.038em;
    color:var(--white);
    text-wrap:balance;
  }
  .whynow-head h2 em{
    font-style:italic;
    background:var(--grad);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
  }
  .whynow-head p{
    margin-top:28px;max-width:46ch;
    font-family:var(--aitemz);font-weight:300;
    font-size:clamp(16px, 1.3vw, 19px);
    line-height:1.5;color:var(--grey);
    letter-spacing:-0.008em;
  }
  .whynow-head p strong{color:var(--white);font-weight:500}

  /* RIGHT — system diagram */
  .whynow-diagram{
    position:relative;
    aspect-ratio:1.05/1;
    width:100%;
    max-width:640px;
    margin-left:auto;
  }
  /* grid backdrop lives on a pseudo-element so the radial fade doesn't
     bleed into the module cards along the right edge. */
  .whynow-diagram::before{
    content:"";
    position:absolute;inset:0;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:48px 48px;
    background-position:center center;
    mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 90%);
    -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 90%);
    pointer-events:none;
    z-index:0;
  }
  .whynow-diagram svg{
    position:absolute;inset:0;width:100%;height:100%;
    overflow:visible;
  }
  /* connecting lines: subtle by default, glow when their data dot passes */
  .whynow-diagram .conn{
    stroke:rgba(248,248,247,0.18);
    stroke-width:1;fill:none;
    stroke-dasharray:3 4;
  }
  .whynow-diagram .conn-pulse{
    stroke-width:1.5;fill:none;
    stroke-linecap:round;
  }

  /* the central product node — pulses softly */
  .whynow-product{
    position:absolute;left:18%;top:50%;transform:translate(-50%,-50%);
    width:140px;height:140px;border-radius:50%;
    border:1px solid var(--line-strong);
    background:rgba(248,248,247,0.025);
    display:flex;align-items:center;justify-content:center;
    backdrop-filter:blur(6px);
  }
  .whynow-product::before{
    content:"";position:absolute;inset:-12px;border-radius:50%;
    border:1px solid rgba(238,107,207,0.32);
    animation:whynowPing 3.4s ease-out infinite;
  }
  .whynow-product::after{
    content:"";position:absolute;inset:-24px;border-radius:50%;
    border:1px solid rgba(252,194,76,0.18);
    animation:whynowPing 3.4s ease-out 1.1s infinite;
  }
  @keyframes whynowPing{
    0%  {transform:scale(0.85);opacity:1}
    100%{transform:scale(1.4); opacity:0}
  }
  .whynow-product svg{position:relative;width:74px;height:74px;color:var(--white)}
  .whynow-product .tag{
    position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
    font-family:var(--mono);font-size:10px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--grey-60);white-space:nowrap;
  }
  .whynow-product .tag b{color:var(--white);font-weight:500}

  /* tiny carrier chips around the product (QR / NFC / SKU) */
  .whynow-chip{
    position:absolute;
    padding:5px 10px;
    border:1px solid var(--line-strong);border-radius:999px;
    background:#0c0c0b;
    font-family:var(--mono);font-size:9px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--white);
    display:inline-flex;align-items:center;gap:6px;
    z-index:2;
  }
  .whynow-chip .d{
    width:5px;height:5px;border-radius:50%;background:var(--grad);
  }
  .whynow-chip.qr {left:6%;  top:24%}
  .whynow-chip.nfc{left:6%;  top:72%}
  .whynow-chip.sku{left:24%; top:14%}

  /* the three module nodes */
  .whynow-mod{
    position:absolute;
    right:4%;
    width:46%;min-width:240px;
    padding:18px 20px;
    border:1px solid var(--line-strong);
    background:#0c0c0b;
    display:flex;flex-direction:column;gap:6px;
    z-index:2;
    opacity:0;transform:translateX(20px);
    transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),border-color .35s ease;
  }
  .whynow-mod.in{opacity:1;transform:translateX(0)}
  .whynow-mod.m1{top:7%}
  .whynow-mod.m2{top:38%}
  .whynow-mod.m3{top:69%}
  .whynow-mod.m1.in{transition-delay:.05s}
  .whynow-mod.m2.in{transition-delay:.18s}
  .whynow-mod.m3.in{transition-delay:.31s}
  .whynow-mod .ix{
    font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--grey-60);
    display:flex;align-items:center;gap:8px;
  }
  .whynow-mod .ix .d{
    width:5px;height:5px;border-radius:50%;background:var(--grad);
    animation:pulse 2.4s ease-in-out infinite;
  }
  .whynow-mod h4{
    font-family:var(--aitemz);font-weight:300;
    font-size:20px;letter-spacing:-0.022em;line-height:1.1;color:var(--white);
  }
  .whynow-mod h4 em{
    font-style:italic;background:var(--grad);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .whynow-mod .desc{
    font-size:12.5px;line-height:1.45;color:var(--grey);max-width:30ch;
  }
  /* data dot pulses when each module receives */
  .whynow-mod.live{
    border-color:rgba(238,107,207,0.55);
    box-shadow:0 0 0 1px rgba(238,107,207,0.18), 0 12px 40px -10px rgba(238,107,207,0.18);
  }

  /* numbered cards below the headline */
  .whynow-cards{
    grid-column:1 / -1;
    margin-top:88px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    border-top:1px solid var(--line);
  }
  .whynow-card{
    padding:36px 32px 40px;
    border-right:1px solid var(--line);
    display:flex;flex-direction:column;gap:14px;
    position:relative;
    transition:background .35s ease;
    opacity:0;transform:translateY(18px);
    transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),background .35s ease;
  }
  .whynow-card.in{opacity:1;transform:translateY(0)}
  .whynow-card.c2.in{transition-delay:.1s}
  .whynow-card.c3.in{transition-delay:.2s}
  .whynow-card:last-child{border-right:none}
  .whynow-card:hover{background:rgba(248,248,247,0.02)}
  .whynow-card .num{
    font-family:var(--mono);font-size:10px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--grey-60);
  }
  .whynow-card h3{
    font-family:var(--aitemz);font-weight:300;
    font-size:28px;letter-spacing:-0.025em;line-height:1.05;color:var(--white);
  }
  .whynow-card h3 em{
    font-style:italic;background:var(--grad);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .whynow-card p{
    font-size:13.5px;line-height:1.55;color:var(--grey);max-width:32ch;
  }
  .whynow-card .meta{
    margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
    font-family:var(--mono);font-size:10px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--grey-60);
    display:flex;justify-content:space-between;
  }
  .whynow-card .meta b{color:var(--white);font-weight:500}

  /* takeaway band */
  .whynow-takeaway{
    max-width:var(--maxw, 1440px);margin:96px auto 0;
    padding:48px var(--pad, 40px) 0;
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:auto 1fr;
    gap:48px;align-items:end;
  }
  .whynow-takeaway .corner{
    font-family:var(--mono);font-size:11px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--grey-60);
    display:flex;align-items:center;gap:10px;
    padding-bottom:8px;
  }
  .whynow-takeaway .corner::before{
    content:"";width:6px;height:6px;border-radius:50%;background:var(--grad);
    animation:pulse 2.4s ease-in-out infinite;
  }
  .whynow-takeaway p{
    font-family:var(--aitemz);font-weight:300;
    font-size:clamp(24px, 2.9vw, 38px);
    line-height:1.25;letter-spacing:-0.025em;
    color:var(--white);max-width:32ch;text-wrap:balance;
  }
  .whynow-takeaway p em{
    font-style:italic;background:var(--grad);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  /* Typewriter reveal — each line types itself on scroll. Lines are split
     into spans by the runtime; each carries a clip-path that expands left
     to right (mimicking text being typed). A blinking caret rides the end
     of the currently-typing line. */
  .whynow-takeaway .tw-line{
    display:block;
    position:relative;
    overflow:hidden;
  }
  .whynow-takeaway .tw-line .tw-inner{
    display:inline-block;
    clip-path:inset(0 100% 0 0);
    -webkit-clip-path:inset(0 100% 0 0);
    transition:clip-path 1.4s steps(48, end), -webkit-clip-path 1.4s steps(48, end);
  }
  .whynow-takeaway .tw-line.typed .tw-inner{
    clip-path:inset(0 0 0 0);
    -webkit-clip-path:inset(0 0 0 0);
  }
  .whynow-takeaway .tw-line.typing::after{
    content:"";
    display:inline-block;
    width:0.5ch;height:0.95em;
    margin-left:4px;
    background:var(--white);
    vertical-align:-0.08em;
    animation:twCaret 0.7s steps(1,end) infinite;
  }
  @keyframes twCaret{50%{opacity:0}}
  /* delays per line so they cascade */
  .whynow-takeaway .tw-line.l2 .tw-inner{transition-delay:1.4s;transition-duration:1.6s}
  .whynow-takeaway .tw-line.l3 .tw-inner{transition-delay:3.0s;transition-duration:1.4s}

  /* sources strip */
  .whynow-sources{
    max-width:var(--maxw, 1440px);margin:48px auto 0;
    padding:0 var(--pad, 40px);
    display:flex;flex-wrap:wrap;gap:10px;
    font-family:var(--mono);font-size:10px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--grey-60);
  }
  .whynow-sources span:first-child{color:var(--white)}

  @media (max-width:1024px){
    .whynow-stage{grid-template-columns:1fr;gap:48px}
    .whynow-diagram{aspect-ratio:1.15/1;max-width:none;margin:0 auto}
    .whynow-takeaway{grid-template-columns:1fr;gap:18px}
  }

  /* ---------- WAITLIST (FULL-BLEED, TALLER) ---------- */
  .waitlist{
    position:relative;
    z-index:2;
    padding:0;
    margin:140px 0 0;
    min-height:92vh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-top:1px solid var(--line);
  }
  .waitlist-bg{
    position:absolute;inset:0;
    z-index:0;
    overflow:hidden;
  }
  /* drifting waitlist orbs — mirror the hero, but slower & softer.
     Colors come from the brand gradient stops via JS so the section reacts
     to global palette changes alongside the hero orbs. */
  .waitlist-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(100px);
    pointer-events:none;
    will-change:transform,opacity;
    transform:translateZ(0);
    background:radial-gradient(circle, var(--w-c1, #ee6bcf) 0%, var(--w-c2, #f59494) 50%, var(--w-c3, #fcc24c) 85%, transparent 100%);
  }
  /* TOP-RIGHT: hot/pink side */
  .waitlist-orb.w1{
    width:880px;height:880px;
    right:-220px;top:-260px;
    opacity:.34;
    background:radial-gradient(circle, var(--w-c1, #ee6bcf) 0%, var(--w-c1, #ee6bcf) 25%, transparent 75%);
    animation:wlDrift1 22s ease-in-out infinite alternate;
  }
  /* BOTTOM-LEFT: warm/amber side */
  .waitlist-orb.w2{
    width:820px;height:820px;
    left:-260px;bottom:-300px;
    opacity:.30;
    background:radial-gradient(circle, var(--w-c3, #fcc24c) 0%, var(--w-c3, #fcc24c) 22%, transparent 75%);
    animation:wlDrift2 28s ease-in-out infinite alternate;
    animation-delay:-8s;
  }
  /* CENTER: blend bridge between the two */
  .waitlist-orb.w3{
    width:520px;height:520px;
    left:50%;top:50%;
    transform:translate(-50%,-50%);
    opacity:.14;
    background:radial-gradient(circle, var(--w-c2, #f59494) 0%, transparent 70%);
    filter:blur(120px);
    animation:wlDrift3 24s ease-in-out infinite alternate;
    animation-delay:-4s;
  }
  @keyframes wlDrift1{
    0%  {transform:translate(0,0) scale(1)}
    50% {transform:translate(-160px,90px) scale(1.18)}
    100%{transform:translate(60px,-40px) scale(.94)}
  }
  @keyframes wlDrift2{
    0%  {transform:translate(0,0) scale(1)}
    50% {transform:translate(140px,-90px) scale(1.2)}
    100%{transform:translate(-50px,50px) scale(.92)}
  }
  @keyframes wlDrift3{
    0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.16}
    50%    {transform:translate(-30%,-65%) scale(1.3); opacity:.24}
  }
  /* gradient sweep across the waitlist — same idea as .hero::before */
  .waitlist::before{
    content:"";
    position:absolute;inset:-10% -20%;
    background:linear-gradient(
      105deg,
      transparent 0%,
      transparent 35%,
      rgba(238,107,207,0.08) 46%,
      rgba(252,194,76,0.10) 50%,
      rgba(245,148,148,0.08) 54%,
      transparent 65%,
      transparent 100%
    );
    background-size:260% 100%;
    background-position:-30% 50%;
    pointer-events:none;
    z-index:0;
    animation:bgSweep 16s 2s ease-in-out infinite;
  }
  .waitlist-grid{
    position:absolute;inset:0;z-index:1;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity:.5;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%);
  }
  .waitlist-inner{
    position:relative;z-index:2;
    max-width:1100px;
    width:100%;
    padding:140px 40px;
    text-align:center;
    display:flex;flex-direction:column;align-items:center;
    gap:32px;
  }
  .waitlist-label{
    font-family:var(--mono);font-size:11px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--grey-60);
    display:inline-flex;align-items:center;gap:10px;
    padding:8px 16px;border:1px solid var(--line-strong);
    border-radius:999px;
    background:rgba(248,248,247,0.03);
    backdrop-filter:blur(8px);
  }
  .waitlist-label .d{
    width:6px;height:6px;border-radius:50%;
    background:var(--grad);
    animation:pulse 2.4s ease-in-out infinite;
  }
  .waitlist h2{
    font-family:var(--aitemz);font-weight:300;
    font-size:clamp(48px,8vw,128px);
    line-height:.96;letter-spacing:-0.04em;
    color:var(--white);
    max-width:12ch;
  }
  .waitlist h2 em{
    font-style:italic;
    background:var(--grad);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
  }
  .waitlist p{
    font-size:18px;line-height:1.55;
    color:var(--grey-60);
    max-width:540px;
    margin-top:-8px;
  }

  .wform{
    display:flex;
    border:1px solid var(--line-strong);
    border-radius:999px;
    overflow:hidden;
    background:rgba(248,248,247,0.04);
    backdrop-filter:blur(10px);
    transition:border-color .3s, box-shadow .3s;
    width:100%;
    max-width:540px;
    margin-top:16px;
  }
  .wform:focus-within{
    border-color:var(--white);
    box-shadow:0 0 40px -10px rgba(238,107,207,.4);
  }
  .wform input{
    flex:1;
    background:transparent;border:none;outline:none;
    padding:20px 26px;
    font-family:var(--mono);font-size:12px;
    letter-spacing:.08em;
    color:var(--white);
    text-transform:uppercase;
  }
  .wform input::placeholder{color:rgba(248,248,247,.35);text-transform:uppercase;letter-spacing:.14em}
  .wform button{
    font-family:var(--mono);font-size:11px;font-weight:500;
    letter-spacing:.18em;text-transform:uppercase;
    padding:0 30px;
    background:var(--white);color:var(--black);
    border:none;cursor:pointer;
    transition:background .3s, color .3s;
    display:inline-flex;align-items:center;gap:10px;
  }
  .wform button:hover{
    background:var(--grad);
    color:var(--black);
  }
  .wform-note{
    font-family:var(--mono);font-size:10px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--grey-60);
    display:flex;align-items:center;gap:8px;margin-top:8px;
  }
  .wform-note .d{
    width:6px;height:6px;border-radius:50%;
    background:var(--grad);
    animation:pulse 2.4s ease-in-out infinite;
  }

  .wsuccess{display:none;flex-direction:column;align-items:center;gap:16px;margin-top:16px}
  .wsuccess.visible{display:flex}
  .wform.hidden{display:none}
  .wsuccess .check{
    width:52px;height:52px;border-radius:50%;
    background:rgba(248,248,247,.08);
    border:1px solid var(--white);
    display:flex;align-items:center;justify-content:center;
    color:var(--white);font-size:18px;
  }
  .wsuccess .t{
    font-family:var(--aitemz);font-weight:300;font-size:26px;
    letter-spacing:-0.025em;color:var(--white);
  }

  /* perimeter credentials strip — sits BELOW the waitlist section as its own band */
  .waitlist-perim{
    position:relative;z-index:3;
    display:flex;justify-content:space-between;align-items:center;
    padding:20px 40px;
    max-width:1440px;margin:0 auto;
    font-family:var(--mono);font-size:10px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--grey-60);
    border-top:1px solid var(--line);
    background:transparent;
  }
  .waitlist-perim span{display:flex;align-items:center;gap:8px}
  .waitlist-perim .d{width:5px;height:5px;border-radius:50%;background:var(--grad)}

  /* ---------- FOOTER ---------- */
  footer{
    padding:60px 40px 40px;
    max-width:1440px;margin:0 auto;
    position:relative;z-index:2;
    display:grid;grid-template-columns:repeat(5,1fr);gap:24px;
    overflow:hidden;
  }
  /* very subtle ambient wash behind the footer — picks up the brand gradient */
  footer::before{
    content:"";
    position:absolute;
    left:-10%; right:-10%; bottom:-40%;
    height:80%;
    background:radial-gradient(ellipse 60% 50% at 30% 100%, rgba(238,107,207,.06), transparent 70%),
               radial-gradient(ellipse 50% 50% at 80% 100%, rgba(252,194,76,.05), transparent 70%);
    z-index:0;
    pointer-events:none;
    animation:footWash 22s ease-in-out infinite alternate;
    will-change:transform,opacity;
  }
  @keyframes footWash{
    0%  {transform:translate(0,0) scale(1);   opacity:.85}
    100%{transform:translate(40px,-10px) scale(1.06); opacity:1}
  }
  footer > *{position:relative;z-index:1}
  .foot-brand{grid-column:1 / span 2}
  .foot-brand .mark{display:flex;align-items:center;gap:10px;margin-bottom:16px;line-height:1}
  .foot-brand .mark .w{font-family:var(--aitemz);font-weight:350;font-size:22px;letter-spacing:-0.025em;text-transform:none;color:var(--white);line-height:1;display:inline-block;transform:translateY(0.06em)}
  .foot-brand .tag{
    font-family:var(--mono);font-size:11px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--grey-60);
    max-width:260px;line-height:1.6;
  }
  .foot-cols{
    grid-column:3 / span 3;
    display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  }
  .foot-col h4{
    font-family:var(--mono);font-size:10px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--grey-60);margin-bottom:16px;
    font-weight:400;
  }
  .foot-col a{
    display:block;
    font-family:var(--mono);font-size:11px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--white);
    text-decoration:none;padding:4px 0;
    opacity:.7;transition:opacity .3s;
  }
  .foot-col a:hover{opacity:1}

  .foot-bottom{
    grid-column:1 / span 5;
    margin-top:60px;padding-top:24px;
    border-top:1px solid var(--line);
    display:flex;justify-content:space-between;align-items:center;
    font-family:var(--mono);font-size:10px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--grey-60);
  }

  /* reveal on scroll */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:translateY(0)}

  /* Second principle line: dramatic delayed reveal.
     Starts further offscreen and waits for its OWN element to be well within
     the viewport (not just the parent section). The wider initial offset and
     longer transition let the line "rise into view" as the user scrolls,
     producing a pronounced reveal moment. */
  .principle .q-2.reveal{
    opacity:0;
    transform:translateY(80px);
    transition:opacity 1.2s cubic-bezier(.2,.7,.2,1) .15s, transform 1.2s cubic-bezier(.2,.7,.2,1) .15s;
  }
  .principle .q-2.reveal.in{
    opacity:1;
    transform:translateY(0);
  }

  /* ============================================================
     RESPONSIVE — TABLET  (≤1024px)
     Slightly tighten gutters and type before the full mobile collapse.
  ============================================================ */
  @media (max-width:1024px){
    nav{padding:18px 28px}
    .nav-links{gap:24px}
    .hero{padding:140px 28px 48px;gap:18px}
    section.block{padding:110px 28px}
    .principle{padding:60px 28px 100px}
    footer{padding:50px 28px 32px}
    .section-head{margin-bottom:64px;gap:18px}
    .compare{grid-template-columns:minmax(140px, 0.8fr) 1.2fr 1.2fr}
    .compare-dim,.compare-cell,.compare-head{padding:22px 18px}
    .cap{padding:28px 20px 32px;min-height:280px}
    .stat{padding:44px 22px}
    .pillar{padding:32px 24px 36px}
  }

  /* ============================================================
     RESPONSIVE — MOBILE  (≤780px)
     The heavy lifting. The desktop grid is built on 5 columns + a
     fixed nav + sticky marquee + many side-by-side comparisons —
     all of which need to collapse cleanly into a single column.
  ============================================================ */
  @media (max-width:780px){
    /* --- foundation --- */
    body{letter-spacing:-0.003em}
    .grid-guide{display:none}
    /* turn down the ambient grain — it's heavier on small screens at high DPI */
    body::after{opacity:.35}

    /* --- NAV ---
       Compact bar, just brand + CTA pill. Hide secondary links.
       Tighten the CTA so it doesn't crowd the wordmark. */
    nav{padding:14px 18px}
    .nav-links{gap:0}
    .nav-links .nav-link{display:none}
    .nav-cta{padding:9px 14px;font-size:10px;letter-spacing:.14em;gap:6px}
    .nav-cta::before{width:5px;height:5px}
    .brand-mark{width:30px;height:15px}
    .brand-word{font-size:19px}

    /* --- MARQUEE / TICKER ---
       Slow it down, drop padding, make sure it stays sticky under the nav. */
    .marquee{padding:13px 0;top:54px}
    .marquee-track{gap:32px;animation-duration:42s}
    .marquee-track .item{gap:32px;font-size:11px;letter-spacing:.18em}

    /* --- HERO ---
       Single column, generous vertical breathing room, taller min-height
       so the marquee still lands at the bottom of the first viewport. */
    .hero{
      padding:120px 20px 56px;
      grid-template-columns:1fr;
      /* reset the desktop 5-row template — mobile flows naturally */
      grid-template-rows:auto auto auto;
      gap:0;
      min-height:calc(100svh - var(--ticker-h, 54px));
      align-items:start;
    }
    .hero-meta,.hero-title,.hero-foot{grid-column:1}
    .hero-meta{grid-row:1}
    .hero-title{grid-row:2}
    .hero-foot{grid-row:3}
    .hero-meta{margin-bottom:64px;justify-content:flex-start}
    .hero-meta .status{text-align:left;font-size:9.5px;letter-spacing:.16em}
    .hero-title{
      /* clamp goes wider here so very small phones don't crush the type */
      font-size:clamp(48px, 13.5vw, 92px);
      line-height:0.95;
      letter-spacing:-0.035em;
    }
    .hero-foot{
      grid-template-columns:1fr;
      margin-top:48px;
      gap:28px;
      align-items:start;
    }
    .hero-sub,.hero-actions{grid-column:1;max-width:none}
    .hero-sub{font-size:17px;line-height:1.5;letter-spacing:-0.008em;max-width:none}
    .hero-actions{justify-content:flex-start;width:100%}
    .hero-actions .btn{
      width:100%;justify-content:center;
      padding:18px 24px;
      font-size:11px;
    }

    /* hero ambient — soften orbs so they don't wash out small text */
    .orb{filter:blur(120px);opacity:.28 !important}
    .orb.two{opacity:.20 !important}
    .orb.three{opacity:.14 !important;width:380px;height:380px}

    /* --- SECTION SCAFFOLD --- */
    section.block{padding:80px 20px}
    .section-head{
      grid-template-columns:1fr;
      gap:18px;
      margin-bottom:48px;
      align-items:start;
    }
    .section-label{grid-column:1;font-size:10px;letter-spacing:.16em}
    .section-heading{
      grid-column:1;
      font-size:clamp(30px,7.6vw,44px);
      line-height:1.05;
      letter-spacing:-0.025em;
    }
    /* drop manual <br> so headings wrap naturally on small screens */
    .section-heading br{display:none}

    /* --- CAPABILITIES — MOBILE CAROUSEL ---
       Horizontal scroll-snap carousel. Each cap becomes a card sized to ~82vw
       so the next card peeks in from the right (a strong affordance for swipe).
       The 5th "highlighted" cap is included as the final slide.
       Dot indicators below are driven by IntersectionObserver in JS. */
    .caps-wrap{
      position:relative;
      margin:24px -20px 0;          /* full-bleed inside the section padding */
      padding:0;
    }
    .caps{
      grid-template-columns:none;
      display:flex;
      flex-wrap:nowrap;
      gap:14px;
      overflow-x:auto;
      overflow-y:hidden;
      scroll-snap-type:x mandatory;
      scroll-padding-left:20px;
      padding:0 20px 4px;
      border-top:none;
      /* hide scrollbar but keep functionality */
      scrollbar-width:none;
      -webkit-overflow-scrolling:touch;
    }
    .caps::-webkit-scrollbar{display:none}
    .cap{
      grid-column:auto;
      flex:0 0 82%;
      min-height:340px;
      scroll-snap-align:start;
      scroll-snap-stop:always;
      padding:26px 22px 28px;
      border:1px solid var(--line);
      border-radius:18px;
      background:rgba(248,248,247,0.02);
    }
    .cap-num{margin-bottom:36px}
    .cap-title{font-size:20px;margin-bottom:12px}
    .cap-desc{font-size:14px}
    /* the inline-styled 5th cap (background tint) — promote it as the
       "summary" card without breaking layout */
    .cap[style]{
      background:rgba(248,248,247,0.05) !important;
      border-right:1px solid var(--line) !important;
    }
    /* the moving accent hairline doesn't read inside a rounded card — kill it */
    .cap::before{display:none}

    /* dot indicators */
    .caps-dots{
      display:flex;justify-content:center;gap:8px;
      margin-top:20px;padding:0 20px;
    }
    .caps-dot{
      width:6px;height:6px;border-radius:50%;
      background:var(--line-strong);
      border:none;padding:0;cursor:pointer;
      transition:background .25s ease, transform .25s ease, width .25s ease;
    }
    .caps-dot.is-active{
      background:var(--white);
      width:24px;border-radius:3px;
    }

    /* --- PRINCIPLE / QUOTE --- */
    .principle{
      padding:60px 20px 100px;
      grid-template-columns:1fr;
      gap:24px;
      row-gap:32px;
    }
    /* Kill the animated radial glows on mobile — they were creating a
       visible tinted band behind the quote on small screens. */
    .principle::before,
    .principle::after{display:none}
    .principle .q{
      grid-column:1;
      font-size:clamp(48px,12vw,84px);
      line-height:0.96;
    }
    .principle .q-2{padding-left:6%}

    /* --- STATS ---
       Stack 3-up to 1-up, full-width cards, native tap-to-expand. */
    .stats{
      grid-template-columns:1fr;
      border-top:1px solid var(--line);
    }
    .stat{
      grid-column:1 !important;
      border-right:none;
      border-bottom:1px solid var(--line);
      padding:40px 4px 44px;
    }
    .stat:last-child{border-bottom:none}
    .stat-num{font-size:clamp(56px,15vw,84px)}
    .stat-toggle{padding:9px 14px 9px 12px;font-size:9.5px}

    /* --- COMPARE TABLE ---
       The 3-column desktop comparison would be illegible on mobile. We turn it
       into a stacked card list: each dimension becomes a section with the AITEM
       row first (highlighted) and the traditional row immediately under it. */
    .compare{
      grid-template-columns:1fr;
      border-top:1px solid var(--line);
      margin-top:16px;
    }
    .compare::before{display:none}
    .compare-head,
    .compare-head.item,
    .compare-head.trad{
      grid-column:1 / -1;
      border-left:none;
      padding:18px 16px;
    }
    .compare-head.item{
      background:rgba(248,248,247,0.03);
      border-top:1px solid var(--line);
    }
    .compare-dim{
      grid-column:1 / -1;
      padding:22px 16px 8px;
      border-right:none;
      border-bottom:none;
      font-size:10px;
      letter-spacing:.18em;
      color:var(--grey-60);
      background:transparent;
    }
    .compare-cell{
      grid-column:1 / -1;
      padding:14px 16px;
      border-left:none;
      font-size:14px;
      gap:12px;
    }
    .compare-cell.yes{
      border-bottom:none;
      background:rgba(248,248,247,0.025);
    }
    .compare-cell.no{
      border-bottom:1px solid var(--line);
      padding-top:14px;
    }
    .compare-cell .mark-y,
    .compare-cell .mark-n{
      flex:0 0 20px;width:20px;height:20px;font-size:10px;
    }

    /* --- WHY NOW --- */
    .whynow{padding:80px 0}
    .whynow .label-strip{margin-bottom:32px;font-size:9.5px;letter-spacing:.18em}
    .whynow-stage{gap:36px}
    .whynow-head p{font-size:14.5px;margin-top:18px}
    .whynow-diagram{
      aspect-ratio:1/1.1;background-size:36px 36px;
      margin:0 -10px;
    }
    .whynow-product{
      left:50%;top:18%;
      width:96px;height:96px;
    }
    .whynow-product svg{width:50px;height:50px}
    .whynow-product .tag{font-size:9px;top:calc(100% + 10px)}
    .whynow-chip{font-size:8px;letter-spacing:.16em;padding:4px 8px}
    .whynow-chip.qr {left:6%; top:8%}
    .whynow-chip.nfc{left:auto;right:6%;top:8%}
    .whynow-chip.sku{left:50%;top:35%;transform:translateX(-50%)}
    .whynow-mod{
      right:auto;left:0;width:100%;min-width:0;
      padding:14px 16px;
    }
    .whynow-mod.m1{top:48%}
    .whynow-mod.m2{top:65%}
    .whynow-mod.m3{top:82%}
    .whynow-mod h4{font-size:17px}
    .whynow-mod .desc{font-size:12px}
    .whynow-cards{
      grid-template-columns:1fr;
      margin-top:48px;
      gap:0;
    }
    /* Roomier cards so the body copy actually breathes on small screens */
    .whynow-card{
      padding:32px 4px 36px;
      border-right:none;
      border-bottom:1px solid var(--line);
      gap:16px;
    }
    .whynow-card:last-child{border-bottom:none}
    .whynow-card .num{font-size:10.5px;letter-spacing:.20em}
    .whynow-card h3{font-size:26px;line-height:1.08;letter-spacing:-0.022em}
    .whynow-card p{
      font-size:15px;
      line-height:1.55;
      color:var(--grey);
      max-width:none;
    }
    .whynow-card .meta{
      padding-top:18px;
      font-size:10.5px;
      letter-spacing:.18em;
    }
    .whynow-takeaway{
      margin-top:56px;padding-top:32px;gap:14px;
    }
    .whynow-takeaway p{font-size:22px;line-height:1.2;max-width:none}
    .whynow-sources{margin-top:24px;font-size:9px;letter-spacing:.16em}

    /* legacy why-now selectors retained as no-ops */
    .why-lede,.pillars,.pillar,.pillar-list,.why-sources{margin:0;padding:0}

    /* --- WAITLIST ---
       Drop the full-bleed grid texture intensity and shrink the giant H2.
       Form switches to a stacked input + button (the inline pill is too
       cramped for thumb targets at this width). */
    .waitlist{min-height:auto;margin-top:80px;border-top:1px solid var(--line)}
    .waitlist-inner{padding:88px 20px 120px;gap:24px}
    .waitlist-grid{
      background-size:48px 48px;
      opacity:.32;
    }
    .waitlist h2{
      font-size:clamp(44px,11vw,72px);
      line-height:0.98;
      max-width:none;
    }
    .waitlist p{font-size:15.5px;line-height:1.55;max-width:none}
    .waitlist-label{font-size:9.5px;letter-spacing:.18em;padding:7px 14px}

    .wform{
      flex-direction:column;
      border-radius:20px;
      padding:6px;
      gap:6px;
      max-width:none;
    }
    .wform input{
      width:100%;
      padding:18px 20px;
      font-size:13px;
      text-align:center;
      border-radius:14px;
      letter-spacing:.06em;
    }
    .wform button{
      width:100%;
      padding:16px 20px;
      border-radius:14px;
      justify-content:center;
      font-size:11px;
    }

    .waitlist-perim{
      position:relative;
      flex-direction:column;
      gap:8px;
      text-align:center;
      padding:18px 20px;
      font-size:9px;
      letter-spacing:.16em;
    }
    .waitlist-perim span{justify-content:center}

    /* --- FOOTER --- */
    footer{
      padding:48px 20px 32px;
      grid-template-columns:1fr;
      gap:32px;
    }
    .foot-brand,.foot-cols{grid-column:1}
    .foot-cols{
      grid-template-columns:repeat(2,1fr);
      gap:24px 16px;
    }
    .foot-bottom{
      grid-column:1;
      flex-direction:column;
      gap:10px;
      text-align:center;
      margin-top:32px;
      font-size:9.5px;
    }
  }

  /* ============================================================
     RESPONSIVE — SMALL PHONES  (≤420px)
     Last-mile tuning for narrow viewports (iPhone SE, small Androids).
  ============================================================ */
  @media (max-width:420px){
    nav{padding:12px 16px}
    .brand-word{font-size:17px}
    .nav-cta{padding:8px 12px;font-size:9.5px}
    /* hide the leading dot on the CTA — it eats too much space at this width */
    .nav-cta::before{display:none}

    .hero{padding:104px 16px 48px}
    .hero-title{font-size:clamp(40px,12vw,56px);letter-spacing:-0.03em}
    .hero-meta{margin-bottom:48px}
    .hero-foot{margin-top:36px}
    .hero-sub{font-size:16px;line-height:1.5}

    section.block{padding:64px 16px}
    .principle{padding:48px 16px 80px;row-gap:24px}
    .principle .q{font-size:clamp(40px,11vw,64px)}
    .principle .q-2{padding-left:4%}

    .section-head{margin-bottom:36px}
    .section-heading{font-size:clamp(26px,8vw,36px)}

    .cap-title{font-size:18px}
    .cap-desc{font-size:13.5px}
    .stat-num{font-size:clamp(48px,14vw,72px)}
    .pillar-title{font-size:22px}

    .waitlist{margin-top:60px}
    .waitlist-inner{padding:72px 16px 96px}
    .waitlist h2{font-size:clamp(36px,10vw,56px)}
    .waitlist p{font-size:14.5px}

    footer{padding:40px 16px 28px}
    .foot-cols{grid-template-columns:1fr;gap:24px}
  }

  /* ============================================================
     TOUCH DEVICES — replace hover affordances with persistent UI.
     Hover-only reveals (cap-arrow opacity, stat hover-preview) are
     unreliable on touch. Show them by default.
  ============================================================ */
  @media (hover:none){
    .cap-arrow{opacity:.85}
    .cap:hover::before{transform:scaleX(0)} /* let the ambient drift handle it */
    .stat.expandable:hover{background:transparent}
  }

  /* ============================================================
     SUBTLE AMBIENT MOTION  (rest of page)
     — kept on the slow side, low contrast, never distracting.
     Respects prefers-reduced-motion at the end of this block.
  ============================================================ */

  /* Section label: hairline that gently grows + breathes */
  .section-label::before{
    transform-origin:left center;
    animation:lblPulse 4.6s ease-in-out infinite;
  }
  @keyframes lblPulse{
    0%,100%{transform:scaleX(1);opacity:.55}
    50%{transform:scaleX(1.6);opacity:1}
  }

  /* Capability cards: faint top hairline that drifts across — */
  .cap{position:relative;overflow:hidden}
  .cap::before{
    content:"";
    position:absolute;left:0;right:0;top:0;height:1px;
    background:linear-gradient(90deg,
      transparent 0%,
      rgba(238,107,207,0) 30%,
      rgba(238,107,207,.55) 50%,
      rgba(252,194,76,.55) 65%,
      transparent 90%);
    transform:translateX(-100%);
    animation:capLine 7s ease-in-out infinite;
    pointer-events:none;
  }
  .cap:nth-child(2)::before{animation-delay:1.2s}
  .cap:nth-child(3)::before{animation-delay:2.4s}
  .cap:nth-child(4)::before{animation-delay:3.6s}
  .cap:nth-child(5)::before{animation-delay:4.8s}
  @keyframes capLine{
    0%   {transform:translateX(-100%)}
    50%  {transform:translateX(100%)}
    100% {transform:translateX(100%)}
  }

  /* Capability arrow: subtle idle drift  */
  .cap-arrow{animation:arrowIdle 5s ease-in-out infinite}
  @keyframes arrowIdle{
    0%,100%{transform:translateX(0)}
    50%{transform:translateX(3px)}
  }
  .cap:hover .cap-arrow{animation:none}

  /* Principle: quiet drifting glow behind the quote */
  .principle::before{
    content:"";position:absolute;inset:0;
    background:radial-gradient(420px 320px at 70% 40%,
      rgba(238,107,207,.07),
      transparent 70%);
    z-index:0;pointer-events:none;
    animation:principleDrift 18s ease-in-out infinite alternate;
    will-change:transform;
  }
  .principle::after{
    content:"";position:absolute;inset:0;
    background:radial-gradient(380px 280px at 20% 80%,
      rgba(252,194,76,.05),
      transparent 70%);
    z-index:0;pointer-events:none;
    animation:principleDrift2 22s ease-in-out infinite alternate;
    will-change:transform;
  }
  .principle > *{position:relative;z-index:1}
  @keyframes principleDrift{
    0%  {transform:translate(0,0) scale(1)}
    100%{transform:translate(-60px,30px) scale(1.08)}
  }
  @keyframes principleDrift2{
    0%  {transform:translate(0,0) scale(1)}
    100%{transform:translate(40px,-20px) scale(1.05)}
  }
  .principle .q em{
    background:var(--grad);
    background-size:200% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:shimmer 11s linear infinite;
  }

  /* Stats: numbers shimmer (gradient passes once every ~10s) */
  .stat-num{
    background:linear-gradient(90deg, var(--white) 0%, var(--white) 40%, #fcc24c 50%, var(--white) 60%, var(--white) 100%);
    background-size:300% 100%;
    background-position:0% 50%;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    animation:statSheen 9s ease-in-out infinite;
  }
  .stat:nth-child(2) .stat-num{animation-delay:1s}
  .stat:nth-child(3) .stat-num{animation-delay:2s}
  @keyframes statSheen{
    0%, 60%, 100%{background-position:0% 50%}
    30%          {background-position:-100% 50%}
  }

  /* Waitlist heading em: shimmer at a different cadence than hero */
  .waitlist h2 em{
    background-size:200% 100%;
    animation:shimmer 7s linear infinite;
  }

  /* Waitlist orbs: gentle breathing pulse on top of drift */
  .waitlist-orb{animation-fill-mode:both}
  .waitlist-grid{
    animation:wlGridShift 30s linear infinite;
  }
  @keyframes wlGridShift{
    0%  {background-position:0 0, 0 0}
    100%{background-position:80px 80px, 80px 80px}
  }

  /* Footer brand wordmark: very faint gradient sheen, drifting slowly */
  .foot-brand .mark .w{
    position:relative;
    background:linear-gradient(
      90deg,
      var(--white) 0%, var(--white) 40%,
      var(--purple) 50%,
      var(--white) 60%, var(--white) 100%
    );
    background-size:300% 100%;
    background-position:0% 50%;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    animation:footSheen 14s ease-in-out infinite;
  }
  @keyframes footSheen{
    0%, 70%, 100%{background-position:0% 50%}
    35%          {background-position:-100% 50%}
  }
  /* Brand mark glyph: barely-there scale breathe */
  .foot-brand .mark .brand-mark{
    display:inline-block;
    animation:footMarkBreathe 8s ease-in-out infinite;
    transform-origin:center;
  }
  @keyframes footMarkBreathe{
    0%,100%{transform:scale(1);   opacity:.92}
    50%    {transform:scale(1.04);opacity:1}
  }
  /* Footer column links: stagger a faint opacity ripple on idle */
  .foot-col a{animation:footLinkIdle 9s ease-in-out infinite}
  .foot-col a:nth-child(2){animation-delay:.4s}
  .foot-col a:nth-child(3){animation-delay:.8s}
  .foot-col a:nth-child(4){animation-delay:1.2s}
  .foot-col a:nth-child(5){animation-delay:1.6s}
  @keyframes footLinkIdle{
    0%,100%{opacity:.7}
    50%    {opacity:.92}
  }
  .foot-col a:hover{animation:none;opacity:1}
  /* Bottom rule: gradient hairline that drifts horizontally */
  .foot-bottom{position:relative}
  .foot-bottom::before{
    content:"";
    position:absolute; top:-1px; left:0; right:0; height:1px;
    background:linear-gradient(90deg,
      transparent 0%,
      rgba(238,107,207,0) 30%,
      rgba(238,107,207,.45) 50%,
      rgba(252,194,76,.45) 65%,
      transparent 90%);
    transform:translateX(-100%);
    animation:footRule 12s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes footRule{
    0%   {transform:translateX(-100%)}
    50%  {transform:translateX(100%)}
    100% {transform:translateX(100%)}
  }

  /* Marquee accent items: idle gradient slide (very subtle) */
  .marquee-track .item.accent{
    background-size:200% 100% !important;
    -webkit-background-clip:text;background-clip:text;
    animation:shimmer 9s linear infinite;
  }

  @media (prefers-reduced-motion: reduce){
    .section-label::before,
    .cap::before,
    .cap-arrow,
    .principle::before,
    .principle::after,
    .principle .q em,
    .stat-num,
    .waitlist h2 em,
    .waitlist-orb,
    .waitlist-grid,
    .waitlist::before,
    .marquee-track .item.accent,
    footer::before,
    .foot-brand .mark .w,
    .foot-brand .mark .brand-mark,
    .foot-col a,
    .foot-bottom::before{
      animation:none !important;
    }
    .stat-num{
      -webkit-text-fill-color:var(--white);
      color:var(--white);
    }
    .foot-brand .mark .w{
      -webkit-text-fill-color:var(--white);
      color:var(--white);
      background:none;
    }
  }

  /* ============================================================
     QR INTRO — "scan to activate"
     Plays once per session. Skippable. Reduced-motion shows a brief
     static frame and then fades. Sits above everything (z:1000).
  ============================================================ */
  .qr-intro{
    position:fixed;inset:0;z-index:1000;
    background:#070707;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    gap:36px;
    overflow:hidden;
    opacity:1;
    transition:opacity .6s ease;
  }
  .qr-intro.done{opacity:0;pointer-events:none}
  /* lock the body underneath so nothing peeks through */
  body.qr-locked{overflow:hidden}

  /* same grain as the rest of the page so the intro feels continuous */
  .qr-intro::before{
    content:'';position:absolute;inset:0;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    mix-blend-mode:overlay;opacity:.4;pointer-events:none;
  }

  /* radial flash on activation — born from the QR center, expands and fades */
  .qr-intro .qr-flash{
    position:absolute;left:50%;top:50%;
    width:40px;height:40px;border-radius:50%;
    transform:translate(-50%,-50%) scale(0);
    background:radial-gradient(circle, rgba(238,107,207,.85), rgba(252,194,76,.45) 35%, transparent 70%);
    pointer-events:none;opacity:0;
    mix-blend-mode:screen;
    will-change:transform,opacity;
  }
  .qr-intro.activate .qr-flash{
    animation:qrFlash 1s forwards cubic-bezier(.2,.6,.3,1);
  }
  @keyframes qrFlash{
    0%  {transform:translate(-50%,-50%) scale(0);  opacity:0}
    25% {opacity:1}
    100%{transform:translate(-50%,-50%) scale(60); opacity:0}
  }

  /* The QR stage — a square that holds the grid + corners + scan line */
  .qr-stage{
    position:relative;
    width:min(340px, 62vw);
    aspect-ratio:1/1;
    will-change:transform,opacity;
  }
  .qr-intro.activate .qr-stage{
    animation:qrBurst .8s forwards cubic-bezier(.4,0,.6,1);
  }
  @keyframes qrBurst{
    0%  {transform:scale(1);   opacity:1}
    40% {transform:scale(1.06);opacity:1}
    100%{transform:scale(.92); opacity:0}
  }

  /* Camera-style corner reticles around the QR */
  .qr-corners span{
    position:absolute;width:28px;height:28px;
    border:1.5px solid #ee6bcf;
    opacity:0;
    animation:qrCornerIn .5s .15s forwards;
  }
  .qr-corners span:nth-child(1){top:-14px;left:-14px;  border-right:0;border-bottom:0}
  .qr-corners span:nth-child(2){top:-14px;right:-14px; border-left:0; border-bottom:0}
  .qr-corners span:nth-child(3){bottom:-14px;left:-14px;border-right:0;border-top:0}
  .qr-corners span:nth-child(4){bottom:-14px;right:-14px;border-left:0;border-top:0}
  @keyframes qrCornerIn{to{opacity:1}}

  /* The 25x25 module grid — populated by JS */
  .qr-grid{
    position:absolute;inset:0;
    display:grid;
    grid-template-columns:repeat(25,1fr);
    grid-template-rows:repeat(25,1fr);
    gap:1px;
    padding:18px;            /* breathing room inside the corner reticles */
  }
  .qr-grid i{
    background:transparent;
    opacity:0;
    transform:scale(.2);
    animation:qrModuleIn .5s forwards cubic-bezier(.2,.7,.2,1);
    animation-delay:calc(var(--d, 0) * 1ms);
  }
  .qr-grid i.on{background:#f0eeea}
  @keyframes qrModuleIn{to{opacity:1;transform:scale(1)}}

  /* Scan line — top → bottom, gradient-tinted, soft glow */
  .qr-scan{
    position:absolute;left:-12px;right:-12px;top:0;
    height:2px;
    background:linear-gradient(90deg, transparent, #ee6bcf 30%, #fcc24c 70%, transparent);
    box-shadow:0 0 24px rgba(238,107,207,.55), 0 0 8px rgba(252,194,76,.6);
    opacity:0;
    animation:qrScan 1.1s 1.3s forwards cubic-bezier(.5,0,.5,1);
    pointer-events:none;
  }
  @keyframes qrScan{
    0%  {opacity:0; top:0}
    12% {opacity:1}
    88% {opacity:1}
    100%{opacity:0; top:100%}
  }

  /* Status pill — label updates with timed JS */
  .qr-label{
    display:inline-flex;align-items:center;gap:10px;
    padding:10px 18px;
    border:1px solid rgba(248,248,247,0.16);
    border-radius:999px;
    background:rgba(248,248,247,0.03);
    backdrop-filter:blur(8px);
    font-family:var(--mono);font-size:11px;letter-spacing:.22em;
    text-transform:uppercase;color:#f0eeea;
    opacity:0;
    animation:qrFadeIn .5s .35s forwards;
  }
  .qr-label .d{
    width:6px;height:6px;border-radius:50%;
    background:var(--grad);
    animation:pulse 1.6s ease-in-out infinite;
  }
  .qr-label .t{transition:opacity .25s ease}
  .qr-label .t.swap{opacity:0}
  @keyframes qrFadeIn{to{opacity:1}}

  /* Bottom meta strip — read like a real product passport readout */
  .qr-meta{
    position:absolute;left:0;right:0;bottom:0;
    display:flex;justify-content:space-between;align-items:center;
    padding:22px 32px;
    border-top:1px solid var(--line);
    font-family:var(--mono);font-size:10px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--grey-60);
    opacity:0;
    animation:qrFadeIn .5s .55s forwards;
  }
  .qr-meta .left,.qr-meta .right{display:flex;align-items:center;gap:14px}
  .qr-meta .d{width:5px;height:5px;border-radius:50%;background:var(--grad)}

  /* Top-right skip — small, present, never demanding */
  .qr-skip{
    position:absolute;top:22px;right:24px;
    background:transparent;
    border:1px solid rgba(248,248,247,0.16);
    color:#f0eeea;
    padding:8px 14px;border-radius:999px;
    font-family:var(--mono);font-size:10px;letter-spacing:.18em;
    text-transform:uppercase;cursor:pointer;
    opacity:.55;transition:opacity .25s, border-color .25s;
    animation:qrFadeIn .5s .8s forwards;
  }
  .qr-skip:hover{opacity:1;border-color:#f0eeea}

  @media (max-width:780px){
    .qr-stage{width:min(280px, 72vw)}
    .qr-meta{padding:16px 18px;font-size:9px;letter-spacing:.18em;gap:10px}
    .qr-meta .right{display:none}
    .qr-skip{top:16px;right:16px}
  }

  @media (prefers-reduced-motion: reduce){
    .qr-grid i, .qr-scan, .qr-corners span, .qr-label, .qr-meta, .qr-skip,
    .qr-intro.activate .qr-stage, .qr-intro.activate .qr-flash{
      animation:none !important;
    }
    .qr-grid i{opacity:1;transform:none}
    .qr-corners span,.qr-label,.qr-meta,.qr-skip{opacity:1}
  }

  /* ---------- LOCAL OVERRIDES (replace prior inline styles) ---------- */
  /* Sections that abut directly under the section above don't repeat top padding */
  .stats-block,
  .what-we-do-block{padding-top:0}

  /* Capabilities "summary" card (5th) */
  .cap-summary{
    background:rgba(248,248,247,0.04);
    border-right:none;
  }
  .cap-num-muted{color:var(--grey-60)}

  /* Phone screen eyebrows on dark screens use a softer grey */
  .studio-screen-eyebrow.studio-screen-eyebrow-dark{color:#9a9892}

  /* Studio cards: keep <strong> bright on alert cards */
  .studio-card.alert .lead-body strong{color:#f0eeea;font-weight:500}
  .studio-card .lead-body strong{color:#f0eeea;font-weight:500}
  .studio-card .delta.delta-alert{color:#ee6bcf;margin-top:14px}

  /* Why-now: ensure +4,700% / Vogue strongs read white */
  .whynow-card p strong{color:var(--white)}