/* ===========================================================================
   hero — the pinned trilogy (Decode / Brand Memory / Vira).

   One flat ground: --hr-bg. The fixed nav takes the same colour while the hero
   is on screen (base.css, body.hr-nav-dark, toggled by hero.js). Each slide is
   three things: the word, one line, the picture. Pictures sit free on the ground
   with a soft shadow; no frames, no bars, no per-slide colour — the one
   exception is Brand Memory's panel, which is meant to read as a piece of the
   product's own UI.

   Geometry. .showcase is 100svh + 3 x --sh-panel tall; .pinned sticks at top:0
   for 100svh. Section height minus pinned height is exactly the scrub distance,
   so the pinned box releases flush with the section's bottom edge and the next
   section (logos) starts with zero gap (shell.css zeroes logos' own margin).
   Below 640px of height, or with reduced motion, the three slides stack.

   Motion. The scroll scrub is transform-only (hero.js writes --in / --out).
   Slide content plays once per activation: leader lines draw with
   stroke-dashoffset, chips rise; nothing loops. The one continuously moving
   thing is Decode's clip, and hero.js stops that whenever nobody is watching.
   =========================================================================== */

.showcase{
 /* ---- the ground (RD round 7: "the current hero background is very flat and
    dull", against a reference of near-black with a violet bloom out of the
    top-left corner and a cooler glow answering it on the right).

    What made the old one flat was contrast, not colour: a #131217 ground is
    already mid-dark, so a #4d2f79 bloom on top of it had barely two stops to
    travel and the whole frame sat in one narrow band. This drops the ground
    to near-black and puts the light in four layers instead of one, each with
    its own falloff:

      1. the corner bloom — saturated violet, hottest right at the top-left
         corner and gone by two thirds across, which is the reference's move;
      2. a tall, narrow run down the left edge, so the purple bleeds along the
         side rather than stopping in a circle;
      3. a cool indigo glow low on the right, the counterweight that keeps the
         frame from reading as one purple wash;
      4. a dark ellipse under the floor, so the bottom of the frame stays black
         behind the tabs and the ads read against it.

    Every layer is an rgba ramp to `transparent` rather than to a colour, which
    is what keeps the blend smooth: ramping between two opaque darks is what
    bands on an 8-bit panel. ---- */
 --hr-bg:#0a0717;            /* near-black, but violet-tinted: a NEUTRAL black
                               is what read as dull — there was no colour in
                               the frame except inside the bloom itself */
 /* Six layers, hot enough to see. The previous pass put two faint blooms in
    the corners and left the middle of the frame dead black, which is exactly
    what "flat" means: one value across two thirds of the picture.

      1. the corner bloom, saturated and twice the reach it had;
      2. a wide band across the top, so the purple crosses the frame rather
         than sitting in the corner;
      3. a halo BEHIND the panels, centre-right — the reference has one under
         its card, and it is what stops the white panels looking pasted on;
      4. a second violet bloom low on the right, answering the corner one
         (it was indigo — RD: one purple, not two colours);
      5. a small violet lift at the bottom-left, under the copy;
      6. the floor darkener, so the tab bar still has black behind it.

    Every ramp ends at `transparent`, never at another opaque dark: ramping
    dark-to-dark is what bands on an 8-bit panel. */
 --hr-bloom:
  radial-gradient(ellipse 66% 62% at -6% -14%,#a855f76b 0%,#8b5cf647 30%,#5f28c426 52%,transparent 76%),
  radial-gradient(ellipse 96% 46% at 36% -22%,#7c3aed3d 0%,#6d34d41f 42%,transparent 70%),
  radial-gradient(ellipse 48% 44% at 70% 46%,#7c5cff29 0%,#5b3ad614 46%,transparent 74%),
  radial-gradient(ellipse 52% 54% at 100% 74%,#8b5cf657 0%,#6d34d44a 40%,#4a1f9422 60%,transparent 80%),
  radial-gradient(ellipse 34% 34% at 2% 98%,#8b5cf62e 0%,#6d34d414 48%,transparent 74%),
  radial-gradient(ellipse 82% 44% at 50% 124%,#05030ceb 0%,#05030c8a 44%,transparent 76%);
 --hr-ground:var(--hr-bloom),linear-gradient(158deg,#1a1030 0%,#120c22 38%,var(--hr-bg) 72%),var(--hr-bg);
 --hr-nav:76px;              /* .topnav height, base.css */
 --hr-ease:cubic-bezier(.16,1,.3,1);
 --hr-ink:#fff;
 --hr-ink-2:#d3c9e6;
 --hr-ink-3:#a595bd;
 --hr-accent:#b48cff;
 --hr-shadow:0 44px 90px -32px #000000b3,0 14px 30px -18px #00000099;
 /* Scroll distance per chapter; hero.js maps progress to 3 units.
    50svh took too long for the chapter bar to fill (RD), 34 was then short
    enough that the slide — which now runs over 55% of a chapter rather than
    25% — had only ~80px of wheel to travel in, and that reads as a lurch.
    40 gives the transition about 22svh of travel and still leaves ~18svh of
    dwell on each chapter. */
 --sh-panel:40svh;
 position:relative;
 height:calc(100svh + var(--sh-panel) * 3);
 background:var(--hr-ground);
 color:var(--hr-ink);
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.showcase .pinned{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--hr-ground)}
/* RD: the hero has to be ONE background.
   Every one of these paints var(--hr-ground): .showcase, .pinned, and each
   .product. A gradient's stops are percentages of the element's OWN box, so
   three different boxes meant three different renderings of the same recipe —
   which is why the strip under the nav, the strip behind the tab bar and each
   sliding panel were all subtly different colours, with a visible vertical
   seam down the middle mid-scrub where two panels met.

   The deck therefore fills the frame exactly (inset:0) and the room the nav
   and the tab bar need moves into the panels' own padding below. Same layout,
   but now .product's box is .pinned's box, so the ground is pixel-identical
   across the panels and the frame and there is nothing left to see a seam in. */
.showcase .deck{position:absolute;inset:0;isolation:isolate}

/* ---- a slide ------------------------------------------------------------ */
.product{
 position:absolute;inset:0;
 /* was the deck's top/bottom inset (see the note on .deck): the nav's height
    plus 14px above, the tab bar's 100px below */
 padding:calc(var(--hr-nav) + 14px) 0 100px;
 display:grid;grid-template-columns:minmax(0,37%) minmax(0,1fr);
 background:var(--hr-ground);   /* same ground (gradient), so the slide-over reads as a clean wipe */
 will-change:transform;backface-visibility:hidden;
}
.product:not(:first-child):not(.is-active){visibility:hidden}
.product.is-active{visibility:visible}
.product-copy{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:0 clamp(20px,3vw,48px) 6vh 5vw}
.product h2{font-size:clamp(56px,6.4vw,100px);line-height:.96;letter-spacing:-.05em;font-weight:600;color:var(--hr-ink)}
.period{color:var(--hr-accent)}
.hr-line{margin-top:clamp(14px,1.6vw,22px);font-size:clamp(16px,1.35vw,21px);line-height:1.35;color:var(--hr-ink-2);max-width:22ch;text-wrap:balance}

/* content enters with the slide, then settles */
.showcase .product-copy{opacity:0;transform:translateX(-16px);transition:opacity .35s,transform .45s var(--hr-ease)}
.showcase .is-active .product-copy{opacity:1;transform:none;transition:opacity .5s .05s,transform .6s var(--hr-ease) .05s}

/* the picture area: sized by container units so every piece scales with the stage */
.hr-stage{position:relative;margin:0;min-width:0;min-height:0;container-type:size}
.hr-shot,.hr-ad-thumb,.hr-ad{border-radius:14px;background:#3a2a52;box-shadow:var(--hr-shadow)}
.hr-ad-thumb>img,.hr-ad>img{width:100%;height:100%;border-radius:inherit}

/* ---- Decode: one continuous shot of a creator holding the product, with the
   three signals the decode read off it called out ---------------------------
   The clip fills the shot box exactly as a still did, so the % callout anchors
   below still land on the same places in the frame. No overflow:hidden here —
   two of the three chips deliberately sit outside the photo. */
.hr-shot{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(54cqw,72cqh);aspect-ratio:4/5}
.hr-clip{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.hr-shot-signals{position:absolute;inset:0}
.hr-leaders{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hr-lead{stroke:#fff;stroke-opacity:.9;stroke-width:1.5;stroke-linecap:round;fill:none;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:none}
.hr-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;translate:-50% -50%;box-shadow:0 0 0 3px #221934b3,0 0 0 4.5px #ffffff80;opacity:0}
/* .hr-callout is the measured, static box; .hr-chip inside it is what animates */
.hr-callout{position:absolute;left:calc(var(--cx) * 1%);top:calc(var(--cy) * 1%);translate:var(--tx,0) -50%}
.hr-chip{
 display:flex;flex-direction:column;gap:4px;padding:10px 14px 11px;
 background:#fff;color:#24202d;border-radius:12px;white-space:nowrap;
 font-size:13px;font-weight:500;letter-spacing:-.01em;line-height:1;
 box-shadow:0 20px 40px -18px #000000b3;opacity:0;
}
.hr-chip small{font:600 9px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:#8655c6}
/* Chip positions, % of the image box; negative / >100 is outside the photo.
   The anchors track the clip, not the old still: her face, the bottle she holds
   up beside it, and the lit room behind her. Hook goes left so its line does not
   have to cross the bottle to reach a chip. */
.hr-c1{--cx:-7;--cy:30;--tx:-100%;--d:.25s}
.hr-c2{--cx:107;--cy:48;--d:.8s}
.hr-c3{--cx:107;--cy:8;--d:1.35s}
/* RD round 7: three more tags. They alternate sides down the frame so the
   leader lines never cross, and the stagger stays tight enough that all six
   are up well before the chapter hands over. */
.hr-c4{--cx:-7;--cy:66;--tx:-100%;--d:.5s}
.hr-c5{--cx:107;--cy:82;--d:1.05s}
.hr-c6{--cx:-7;--cy:6;--tx:-100%;--d:1.6s}
.hr-dot-1{--d:.25s}.hr-dot-2{--d:.8s}.hr-dot-3{--d:1.35s}
.hr-dot-4{--d:.5s}.hr-dot-5{--d:1.05s}.hr-dot-6{--d:1.6s}
.hr-lead-1{--d:.25s}.hr-lead-2{--d:.8s}.hr-lead-3{--d:1.35s}
.hr-lead-4{--d:.5s}.hr-lead-5{--d:1.05s}.hr-lead-6{--d:1.6s}
/* sequence per callout: dot, then the line draws out from it, then the chip.
   They play once when the panel arrives and then stay up for as long as it is
   the live chapter — there is only one shot now, so nothing has to cycle. */
.is-active .hr-dot{animation:hr-pop .5s var(--hr-ease) var(--d) both}
.is-active .hr-lead{stroke-dashoffset:0;transition:stroke-dashoffset .55s var(--hr-ease) calc(var(--d) + .1s)}
.is-active .hr-chip{animation:hr-rise .55s var(--hr-ease) calc(var(--d) + .45s) both}

/* ---- the shared app-window band ------------------------------------------
   Prove and Create both sit in a window: squared corners, a thin titled bar on
   a hairline. Same language as .lo-panel / .lo-bar in loop.css. */
.hr-mem-bar{flex:none;display:flex;align-items:center;gap:12px;height:34px;padding:0 14px;
 border-bottom:1px solid #17121f12;border-radius:6px 6px 0 0;background:#faf8fe}
.hr-mem-dots{flex:none;width:8px;height:8px;margin-right:26px;border-radius:50%;background:#e3dfea;
 box-shadow:13px 0 0 #e3dfea,26px 0 0 #e3dfea}
.hr-mem-bar-t{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8d84a0}
.hr-mem-src{margin-left:auto;font-family:ui-monospace,Menlo,monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#a79ec0}
.hr-memory-head{display:flex;align-items:center;gap:8px;padding:0 2px clamp(8px,1.1cqw,14px);
 font:600 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:#7c6b90}

/* ---- Prove: two ads for the same product, priced ------------------------
   RD on the call: "दो ads आ जाएगा — do this more and do less this. So that is
   your proof." Each ad carries what it costs per order and the three decoded
   attributes that put it there, so the chapter answers why one worked and why
   the other didn't with the creative in view rather than in a table.

   Sized off the container's HEIGHT first (52cqh) and its width second
   (34cqw): the stage is wider than it is tall, so two 4:5 images driven by
   width alone overflow the frame vertically. --w is shared by the shot and its
   caption so the column is one measure and the numbers line up under the ad.
   Red is dearer per order, green is cheaper — the site's only two signal
   colours (README). */
.hr-pf{position:absolute;left:50%;top:50%;translate:-50% -50%;
 display:flex;align-items:flex-start;justify-content:center;
 gap:clamp(16px,2.6cqw,40px);width:min(94cqw,100%);max-height:98cqh}
.hr-pf-ad{--w:min(34cqw,52cqh);
 display:flex;flex-direction:column;align-items:flex-start;gap:clamp(8px,1cqh,12px);
 margin:0;min-width:0;opacity:0}
.hr-pf-verdict{
 display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;
 font:700 clamp(9px,.92cqw,11px)/1 ui-monospace,Menlo,monospace;
 letter-spacing:.14em;text-transform:uppercase;color:#fff;
}
.hr-pf-v-no{background:#d9435e}
.hr-pf-v-yes{background:#1e9678}
.hr-pf-shot{position:relative;width:var(--w);aspect-ratio:4/5;
 border-radius:14px;overflow:hidden;background:#3a2a52;box-shadow:var(--hr-shadow)}
.hr-pf-shot img{width:100%;height:100%;object-fit:cover}
.hr-pf-cap{width:var(--w);margin:0}
/* the money, big enough to be the thing you read first */
.hr-pf-cpo{display:flex;align-items:baseline;gap:8px}
.hr-pf-cpo b{font-size:clamp(24px,2.6cqw,38px);font-weight:700;letter-spacing:-.035em;line-height:1}
.hr-pf-cpo span{font:600 clamp(9px,.9cqw,11px)/1 ui-monospace,Menlo,monospace;
 letter-spacing:.12em;text-transform:uppercase;color:var(--hr-ink-3)}
.hr-pf-less .hr-pf-cpo b{color:#ff8fa3}
.hr-pf-more .hr-pf-cpo b{color:#6fe3c0}
/* and under it, the three attributes that made that number */
.hr-pf-why{list-style:none;margin:clamp(8px,1.1cqh,14px) 0 0;padding:0;display:grid;gap:clamp(5px,.7cqh,9px)}
.hr-pf-why li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
 padding-bottom:clamp(5px,.7cqh,9px);border-bottom:1px solid #ffffff14;
 font-size:clamp(12px,1.15cqw,15px);line-height:1.2;color:var(--hr-ink-2);opacity:0}
.hr-pf-why li:last-child{border-bottom:0;padding-bottom:0}
.hr-pf-why em{flex:none;font-style:normal;font-weight:700;letter-spacing:-.01em;
 font-size:clamp(11px,1.05cqw,13.5px)}
.hr-pf-less .hr-pf-why em{color:#ff8fa3}
.hr-pf-more .hr-pf-why em{color:#6fe3c0}
/* the loser arrives first and the winner answers it */
.hr-pf-less{--d:.12s}
.hr-pf-more{--d:.34s}
.hr-pf-less .hr-pf-why li:nth-child(1){--rd:.5s}
.hr-pf-less .hr-pf-why li:nth-child(2){--rd:.58s}
.hr-pf-less .hr-pf-why li:nth-child(3){--rd:.66s}
.hr-pf-more .hr-pf-why li:nth-child(1){--rd:.72s}
.hr-pf-more .hr-pf-why li:nth-child(2){--rd:.8s}
.hr-pf-more .hr-pf-why li:nth-child(3){--rd:.88s}
.is-active .hr-pf-ad{animation:hr-rise .65s var(--hr-ease) var(--d) both}
.is-active .hr-pf-why li{animation:hr-rise .45s var(--hr-ease) var(--rd) both}

/* ---- Create: the formula, then the two ads built from it ------------------
   RD round 7, note 5. The formula panel is the same app surface as Prove; the
   two ads sit beside it on the ground, the way the ads in Remember used to. */
.hr-mk{position:absolute;left:50%;top:50%;translate:-50% -50%;
 display:flex;align-items:stretch;gap:clamp(10px,1.6cqw,22px);width:min(88cqw,100%);max-height:98cqh}
.hr-mk-panel{display:flex;flex-direction:column;flex:1 1 52%;min-width:0;
 border-radius:6px;background:#fff;color:#24202d;
 box-shadow:inset 0 0 0 1px #17121f14,0 18px 44px -30px #000000a6;opacity:0}
.hr-mk-body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:safe center;padding:clamp(10px,1.5cqw,20px) clamp(12px,1.8cqw,24px)}
.hr-mk-rows{list-style:none;margin:0;padding:0;display:grid}
.hr-mk-rows li{display:grid;grid-template-columns:1fr minmax(48px,26%) auto;align-items:center;gap:clamp(8px,1.2cqw,16px);
 padding:clamp(8px,1.15cqw,14px) 2px;border-top:1px solid #ece7f2;opacity:0}
.hr-mk-rows li:first-child{border-top:0}
.hr-mk-rows b{font-size:clamp(12.5px,1.25cqw,16px);font-weight:600;letter-spacing:-.015em;line-height:1.15;color:#201a2c;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hr-mk-bar{height:5px;border-radius:3px;background:#efe9f8;overflow:hidden;position:relative}
.hr-mk-bar:after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,50%);border-radius:3px;
 background:linear-gradient(90deg,#8b52e7,#b48cff)}
.hr-mk-rows em{font-style:normal;font-size:clamp(11.5px,1.1cqw,14px);font-weight:700;letter-spacing:-.01em;color:#1e9678;white-space:nowrap}
/* two ads, not three: "this is your formula, and these are the two ads" */
.hr-mk-ads{flex:0 0 auto;display:flex;align-items:center;gap:clamp(8px,1.2cqw,16px)}
.hr-mk-ads .hr-ad{position:relative;width:min(21cqw,44cqh);aspect-ratio:4/5;margin:0;opacity:0}
.hr-mk-ad-1{--d:.62s}
.hr-mk-ad-2{--d:.74s}
.hr-mk-r1{--d:.34s}.hr-mk-r2{--d:.42s}.hr-mk-r3{--d:.5s}.hr-mk-r4{--d:.58s}.hr-mk-r5{--d:.66s}
.is-active .hr-mk-panel{animation:hr-rise .6s var(--hr-ease) .1s both}
.is-active .hr-mk-rows li{animation:hr-rise .45s var(--hr-ease) var(--d) both}
.is-active .hr-mk-ads .hr-ad{animation:hr-rise .7s var(--hr-ease) var(--d) both}

@keyframes hr-rise{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes hr-pop{from{opacity:0;scale:.5}60%{scale:1.15}to{opacity:1;scale:1}}

/* ---- story nav on the bottom edge --------------------------------------- */
.story-nav{position:absolute;left:5vw;right:5vw;bottom:24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.scroll-cue{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--hr-ink-3);white-space:nowrap}
.scroll-cue>span{font-size:18px;color:var(--hr-accent)}
.product-tabs{display:flex;gap:6px;padding:5px;background:#ffffff0f;border:1px solid #ffffff14;border-radius:14px}
.product-tabs button{
 position:relative;display:flex;align-items:center;gap:10px;padding:11px 18px;min-width:0;
 border:0;border-radius:10px;background:none;color:var(--hr-ink-2);font-size:13px;overflow:hidden;
 transition:background-color .25s,color .25s,transform .16s var(--hr-ease);
}
.product-tabs button:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.product-tabs button:not(.active):hover{background:#ffffff10;color:#fff}}
.product-tabs button.active{background:#fff;color:#29193b}
.tab-number{font:500 10px/1 ui-monospace,Menlo,monospace;color:var(--hr-ink-3)}
.active .tab-number{color:#8655c6}
.tab-copy strong{font-weight:550}
.product-tabs i{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--hr-accent);transform:scaleX(0);transform-origin:left}
.story-count{font-size:15px;color:var(--hr-ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.story-count i{font-size:12px;font-style:normal;color:var(--hr-ink-3)}

/* ---- scroll scrub (hero.js sets --in / --out while pinned) --------------
   The next slide slides in over the current one (--in 1 -> 0); the covered
   slide's content drifts left a touch (--out 0 -> 1). Transform only. */
.showcase.scrub .product{visibility:visible;pointer-events:none;contain:paint;
 transform:translateX(calc(var(--in,0) * 104%))}
/* a soft shade on the incoming slide's leading edge, only while it is arriving
   (a box-shadow would leak above and below the slide onto the ground) */
.showcase.scrub .product::before{content:"";position:absolute;left:0;top:0;bottom:0;width:72px;z-index:5;pointer-events:none;
 background:linear-gradient(90deg,#00000047,transparent);opacity:var(--in,0)}
.showcase.scrub .product.is-active{pointer-events:auto}
.showcase.scrub .product>*{transform:translateX(calc(var(--out,0) * -40px))}
.showcase.scrub .product-copy{opacity:1;transition:none}
.showcase.scrub .product-tabs i{transition:none}

/* ---- narrow: word and line on top, picture below ------------------------ */
@media(max-width:760px){
 .showcase{--hr-nav:62px}
 .product{padding:calc(var(--hr-nav) + 10px) 0 78px}
 /* RD (phone): "the hero has a lot of spacing and gaps". The stage row was
    minmax(0,1fr) — it took every pixel the copy did not — and its contents
    are centred at 50%, so on a 950px-tall phone the picture floated in the
    middle of a ~700px stage with a hole between it and the copy above.
    Now the stage is a fixed share of the viewport, its contents fill it, and
    the copy + stage are centred TOGETHER as one group, so the spare height
    lands evenly above and below the pair instead of in the middle of it. */
 .product{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;row-gap:clamp(10px,2.4vh,22px)}
 .hr-stage{height:clamp(300px,54svh,470px)}
 .product-copy{padding:8px 5vw 0;justify-content:flex-start}
 .product h2{font-size:clamp(38px,11vw,48px)}
 .hr-line{margin-top:8px;font-size:15px;max-width:none}
 .hr-shot{width:min(84cqw,72cqh);top:47%}
 .hr-chip{padding:8px 10px 9px;font-size:11px;gap:3px;border-radius:9px}
 .hr-chip small{font-size:8px}
 /* no room beside the photo here, so the chips sit on it; the dots stay on
    the face, the bottle and the room behind her either way */
 .hr-c1{--cx:5;--cy:70;--tx:0}
 .hr-c2{--cx:95;--cy:54;--tx:-100%}
 .hr-c3{--cx:95;--cy:5;--tx:-100%}
 /* six chips will not fit on a phone frame; the three the eye needs stay */
 .hr-c4,.hr-c5,.hr-c6,.hr-dot-4,.hr-dot-5,.hr-dot-6,.hr-lead-4,.hr-lead-5,.hr-lead-6{display:none}
 /* Phone: Prove's two sides stack into one column per attribute — three
    columns of money across 380px is unreadable — and Create puts its two ads
    under the formula instead of beside it. */
 .hr-mem-bar{height:30px;padding:0 12px}
 .hr-mem-dots{margin-right:22px}
 .hr-memory-head{padding-bottom:9px}
 .hr-pf{gap:10px;width:min(96cqw,440px)}
 .hr-pf-ad{--w:min(46cqw,42cqh);gap:6px}
 .hr-pf-why li{font-size:11.5px;padding-bottom:5px}
 .hr-pf-why em{font-size:11px}
 .hr-pf-cpo b{font-size:22px}
 .hr-mk{flex-direction:column;align-items:center;gap:10px;width:min(94cqw,420px)}
 .hr-mk-panel{width:100%;flex:none}
 .hr-mk-body{padding:10px 14px}
 .hr-mk-rows li{padding:7px 2px}
 .hr-mk-ads .hr-ad{width:min(34cqw,26cqh)}
 .story-nav{left:5vw;right:5vw;bottom:14px;gap:8px}
 .scroll-cue,.story-count{display:none}
 .product-tabs{width:100%;gap:4px;border-radius:12px}
 .product-tabs button{flex:1;justify-content:center;padding:11px 6px;font-size:11px;gap:6px}
 .tab-number{display:none}
}

/* ---- laptop widths: the chips come onto the photo ------------------------
   Between the narrow layout and about 1100px the stage is still two columns,
   but the margin either side of the shot is thinner than a chip, so a chip
   hung outside the photo ran off the window's right edge. */
@media(min-width:761px) and (max-width:1100px){
 .hr-c1{--cx:4;--cy:28;--tx:0}
 .hr-c2{--cx:96;--cy:50;--tx:-100%}
 .hr-c3{--cx:96;--cy:6;--tx:-100%}
 .hr-c4{--cx:4;--cy:70;--tx:0}
 .hr-c5{--cx:96;--cy:84;--tx:-100%}
 .hr-c6{--cx:4;--cy:6;--tx:0}
}

/* ---- short screens and reduced motion: the three slides stack ----------- */
@media(prefers-reduced-motion:reduce),(max-height:639px){
 .showcase{height:auto}
 .showcase .pinned{position:relative;height:auto;overflow:visible}
 .showcase .deck{position:relative;inset:auto;padding:calc(var(--hr-nav) + 28px) 0 32px;display:grid;gap:12px}
 .product,.product:not(:first-child):not(.is-active){position:relative;inset:auto;padding-block:0;visibility:visible!important;opacity:1;transform:none!important;pointer-events:auto;min-height:560px;scroll-margin-top:85px}
 .showcase .product-copy,.showcase.scrub .product>*{opacity:1;transform:none;transition:none}
 .hr-stage{min-height:480px}
 .story-nav{display:none}
 .hr-chip,.hr-dot,.hr-pf-ad,.hr-pf-why li,.hr-mk-panel,.hr-mk-rows li,.hr-ad{animation:none!important;opacity:1}
 .hr-lead{stroke-dashoffset:0;transition:none}
 .showcase .product{box-shadow:none}
}
@media(prefers-reduced-motion:reduce){
 .product-tabs button,.showcase .product-copy{transition:none}
 /* Decode's clip is left on its poster frame — hero.js drops the autoplay
    attribute and never calls play() when this query matches. */
}

/* scroll targets only — never painted */
.showcase .hr-anchor{position:absolute;left:0;top:34%;width:1px;height:1px;opacity:0;pointer-events:none}
.showcase .hr-anchor-3{top:88%}

/* ---- Decode's drop-out curve ---------------------------------------------
   RD round 7, note 3b. A glass strip along the bottom of the frame: the shape
   of the fall, then the three numbers that name it. It sits INSIDE the shot,
   over the clip, because the curve belongs to that clip and nothing else. */
.hr-drop{position:absolute;left:0;right:0;bottom:0;padding:clamp(7px,1.1cqw,12px) clamp(9px,1.3cqw,15px) clamp(8px,1.2cqw,13px);
 border-radius:0 0 14px 14px;
 background:linear-gradient(180deg,#0f0c1700,#0f0c17b8 38%,#0f0c17e6);
 -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
 opacity:0;--d:1.9s}
.hr-drop-t{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
 font:600 9px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:#cbbfe0}
.hr-drop-t span{color:#9d8ab6}
.hr-drop-svg{display:block;width:100%;height:clamp(26px,3.4cqw,40px);margin:6px 0 4px;overflow:visible}
.hr-drop-fill{fill:#b48cff;fill-opacity:.16}
.hr-drop-line{fill:none;stroke:#b48cff;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;
 stroke-dasharray:1;stroke-dashoffset:1}
.hr-drop-marks{display:flex;justify-content:space-between;gap:8px}
.hr-drop-marks span{display:flex;align-items:baseline;gap:5px;font:600 9px/1 ui-monospace,Menlo,monospace;letter-spacing:.1em;color:#9d8ab6}
.hr-drop-marks b{font-family:Inter,sans-serif;font-size:clamp(11px,1.15cqw,13.5px);font-weight:700;letter-spacing:-.01em;color:#fff}
.is-active .hr-drop{animation:hr-rise .55s var(--hr-ease) var(--d) both}
.is-active .hr-drop-line{stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--hr-ease) calc(var(--d) + .2s)}
@media(max-width:760px){.hr-drop{padding:6px 9px 7px}.hr-drop-svg{height:24px}}
@media(prefers-reduced-motion:reduce),(max-height:639px){
 .hr-drop{animation:none!important;opacity:1}
 .hr-drop-line{stroke-dashoffset:0;transition:none}
}

/* ---- grain -----------------------------------------------------------------
   A single still frame of fractal noise over the whole pinned frame at 4%,
   soft-light. Large flat gradients on an 8-bit panel read as plastic — the eye
   picks up the smoothness itself — and a few percent of grain is what film
   and every dark hero worth copying uses to break it up. It is one inline SVG
   (no request, no animation, no repaint) and it sits over everything including
   the panels, which is the point: it ties the white windows to the ground
   instead of leaving them pasted on top of it. */
.showcase .pinned::after{
 content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
 opacity:.045;mix-blend-mode:soft-light;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
 background-size:180px 180px;
}
@media(prefers-reduced-motion:reduce),(max-height:639px){
 /* the stacked fallback has no pinned frame to cover */
 .showcase .pinned::after{display:none}
}