:root{
  --pp-grain-w:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27220%27%20height%3D%27220%27%3E%3Cfilter%20id%3D%27g%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.95%27%20numOctaves%3D%272%27%20seed%3D%277%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%271.0%27%20intercept%3D%270.5%27%2F%3E%3CfeFuncG%20type%3D%27linear%27%20slope%3D%271.0%27%20intercept%3D%270.5%27%2F%3E%3CfeFuncB%20type%3D%27linear%27%20slope%3D%271.0%27%20intercept%3D%270.5%27%2F%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%270%27%20intercept%3D%270.52%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23g%29%27%2F%3E%3C%2Fsvg%3E");
  --pp-speck-w:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27s%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.46%27%20numOctaves%3D%273%27%20seed%3D%2710%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27discrete%27%20tableValues%3D%270%200%200%200%200%200%200%200%200%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%27%2F%3E%3CfeFuncG%20type%3D%27discrete%27%20tableValues%3D%270%200%200%200%200%200%200%200%200%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%27%2F%3E%3CfeFuncB%20type%3D%27discrete%27%20tableValues%3D%270%200%200%200%200%200%200%200%200%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%27%2F%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%270%27%20intercept%3D%270.64%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23s%29%27%2F%3E%3C%2Fsvg%3E");
  --pp-grain-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27220%27%20height%3D%27220%27%3E%3Cfilter%20id%3D%27g%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%271.8%27%20numOctaves%3D%274%27%20seed%3D%277%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%271.0%27%20intercept%3D%27-0.5%27%2F%3E%3CfeFuncG%20type%3D%27linear%27%20slope%3D%271.0%27%20intercept%3D%27-0.5%27%2F%3E%3CfeFuncB%20type%3D%27linear%27%20slope%3D%271.0%27%20intercept%3D%27-0.5%27%2F%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%270%27%20intercept%3D%270.32%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23g%29%27%2F%3E%3C%2Fsvg%3E");
  --pp-speck-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27s%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.52%27%20numOctaves%3D%274%27%20seed%3D%271%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27discrete%27%20tableValues%3D%271%201%201%201%201%201%201%201%201%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%27%2F%3E%3CfeFuncG%20type%3D%27discrete%27%20tableValues%3D%271%201%201%201%201%201%201%201%201%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%27%2F%3E%3CfeFuncB%20type%3D%27discrete%27%20tableValues%3D%271%201%201%201%201%201%201%201%201%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%27%2F%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%270%27%20intercept%3D%270.34%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23s%29%27%2F%3E%3C%2Fsvg%3E");
  --pp-g-size:304px 304px;--pp-s-size:280px 280px;--pp-gb-size:304px 304px;--pp-sb-size:800px 800px}
/* PROCEDURAL PAPER (baked from Chey's dialed values 2026-07-21): two SVG
   noise layers — clamped grain + hard-threshold specks. White paper:
   multiply (dark dots). Black paper: screen (white dots). Per-element
   background-position offsets de-dupe the pattern. */
    :root{
      --hand:"FluidHand",Inter,-apple-system,sans-serif;
      --bg:#05070a;--panel:#0b0f16;--panel-2:#0d1219;--ink:#f7f8fa;--soft:var(--ink);--dim:var(--ink);--faint:var(--ink);
      --line:rgba(255,255,255,.1);--line-soft:rgba(255,255,255,.06);
      --blue:#42b1ff;--blue-2:var(--brand-soft);--cyan:var(--brand-soft);--green:#6ce1ad;--orange:#ff9474;--yellow:#ffd36c;
      --brand:#42b1ff;--brand-soft:#42b1ff; /* default blue accent */
      --max:1180px;--col:740px;
      --sans:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
      --mono:"WeHaas","Neue Haas Display","Helvetica Neue",sans-serif;
      --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth;background:var(--bg);-webkit-text-size-adjust:100%}
    body{margin:0;background:var(--bg);color:var(--soft);font-family:var(--sans);font-size:17px;line-height:1.65;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
    a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
    img,svg{display:block;max-width:100%}
    .wrap{width:min(var(--col),calc(100% - 44px));margin-inline:auto}
    .wide{width:min(var(--max),calc(100% - 44px));margin-inline:auto}
    strong{color:var(--ink);font-weight:640}
    .k{color:var(--blue-2);font-weight:640}
    .num{font-family:var(--mono);font-variant-numeric:tabular-nums}

    /* reveals — hidden state only applies when JS has stamped .js on <html> */
    .js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.65,.25,1),transform .7s cubic-bezier(.2,.65,.25,1)}
    .js .rv.in{opacity:1;transform:none}
    .js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}
    @media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

    /* ---- consistent drop-shadow tiers — tunable live via the shadow panel in
       teardown-rhode.js. Tier 1 = solid card on the page background (box-shadow,
       two-layer contact+ambient, darker & tighter). Tier 2 = torn-paper slip
       overlapping other content (filter drop-shadow, softer & a touch lighter). */
    :root{
      /* --sh-rgb is the shadow tint; re-scoped warm inside .zone--light so every
         tier casts a warm shadow on cream and a neutral one on dark, while the
         panel keeps global control of the offsets/blur/alpha. */
      --sh-rgb:0,0,0;
      --sh1-y:16px;--sh1-blur:34px;--sh1-spread:-20px;--sh1-aa:.5;--sh1-ca:.28;
      --shadow-1:0 2px 3px rgba(var(--sh-rgb),var(--sh1-ca)),0 var(--sh1-y) var(--sh1-blur) var(--sh1-spread) rgba(var(--sh-rgb),var(--sh1-aa));
      --sh2-x:2px;--sh2-y:9px;--sh2-blur:12px;--sh2-a:.5;--sh2-cy:3px;--sh2-cblur:3px;--sh2-ca:.3;
      --slip-shadow:drop-shadow(0 var(--sh2-cy) var(--sh2-cblur) rgba(var(--sh-rgb),var(--sh2-ca))) drop-shadow(var(--sh2-x) var(--sh2-y) var(--sh2-blur) rgba(var(--sh-rgb),var(--sh2-a)));
      /* hover variants — the same tiers lifted proportionally, so the panel drives them too */
      --shadow-1-hover:0 2px 3px rgba(var(--sh-rgb),var(--sh1-ca)),0 calc(var(--sh1-y) + 8px) calc(var(--sh1-blur) + 8px) calc(var(--sh1-spread) + 4px) rgba(var(--sh-rgb),calc(var(--sh1-aa) + .12));
      --slip-shadow-hover:drop-shadow(0 var(--sh2-cy) var(--sh2-cblur) rgba(var(--sh-rgb),var(--sh2-ca))) drop-shadow(calc(var(--sh2-x) + 1px) calc(var(--sh2-y) + 4px) calc(var(--sh2-blur) + 4px) rgba(var(--sh-rgb),calc(var(--sh2-a) + .15)));
      /* Tier 3 — paper-tear transition shadows (tstrip / zone masks). */
      --t3-y:2px;--t3-blur:3px;--t3-a:.24;
      --tear-sh:drop-shadow(0 var(--t3-y) var(--t3-blur) rgba(var(--sh-rgb),var(--t3-a)));
      --tear-sh-up:drop-shadow(0 calc(0px - var(--t3-y)) var(--t3-blur) rgba(var(--sh-rgb),var(--t3-a)));
      --tear-sh-strong:drop-shadow(0 var(--t3-y) var(--t3-blur) rgba(var(--sh-rgb),calc(var(--t3-a) * 1.7)));
      /* drop-shadow form of Tier 1 — for solid cards that are mask-clipped and
         cast their shadow from an unmasked wrapper (e.g. the receipts card). */
      --shadow-1-d:drop-shadow(0 2px 3px rgba(var(--sh-rgb),var(--sh1-ca))) drop-shadow(0 var(--sh1-y) calc(var(--sh1-blur) * .7) rgba(var(--sh-rgb),var(--sh1-aa)));
      /* Tier 3 forms for chunkier tear pieces (the black torn strips) and for the
         nav's scroll lift (a box-shadow), both scaled off the tear params. */
      --tear-slip:drop-shadow(0 var(--t3-y) var(--t3-blur) rgba(var(--sh-rgb),calc(var(--t3-a) * .7))) drop-shadow(0 calc(var(--t3-y) * 3.5) calc(var(--t3-blur) * 4) rgba(var(--sh-rgb),calc(var(--t3-a) * 1.4)));
      --tear-box:0 calc(var(--t3-y) + 6px) calc(var(--t3-blur) * 6) calc(-1 * (var(--t3-blur) + 8px)) rgba(var(--sh-rgb),calc(var(--t3-a) * 2.2));
    }

    /* nav — dark-paper bar with a torn bottom edge (.tstrip--nav). Carries the
       same paper-dark stock as the body/tstrip (fixed attachment aligns the
       texture) plus a light darkening veil for text legibility, so the bar reads
       as a torn strip of the same paper the tear hangs off. */
    .nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:box-shadow .3s,border-color .3s;
      background-color:var(--bg,#05070a);
      background-image:linear-gradient(rgba(5,7,10,.34),rgba(5,7,10,.52)),var(--we-paper-dark);
      background-size:cover;background-position:center;background-attachment:fixed;
      border-bottom:1px solid transparent}
    .nav.scrolled{border-bottom-color:var(--line);box-shadow:var(--tear-box)}
    .nav-inner{max-width:1120px;margin:0 auto;padding:0 24px;height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px}
    .brand{display:flex;align-items:center;flex:0 0 auto;height:68px}
    .brand img{display:block;width:auto;height:36px;max-width:208px;object-fit:contain}
    .nav-actions{display:flex;align-items:center;gap:30px}
    .nav-link{color:var(--dim);font-size:.92rem;transition:color .18s ease}
    .nav-link:hover{color:var(--ink)}
    .btn-cta{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:4px;font-size:.85rem;font-weight:700;letter-spacing:-.01em;background:var(--blue);color:#050a12;white-space:nowrap;box-shadow:2px 2px 0 rgba(0,0,0,.5);transform:rotate(-.6deg);transition:box-shadow .18s ease,transform .18s ease}
    .btn-cta:hover{box-shadow:3px 4px 0 rgba(0,0,0,.55);transform:rotate(-.6deg) translateY(-1px)}
    .dd{position:relative}
    .dd-trigger{display:inline-flex;align-items:center;gap:7px;color:var(--dim);font-size:.92rem;transition:color .18s ease}
    .dd-trigger:hover,.dd:hover .dd-trigger,.dd.open .dd-trigger,.dd:focus-within .dd-trigger{color:#fff}
    .dd-trigger svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s ease}
    .dd:hover .dd-trigger svg,.dd.open .dd-trigger svg,.dd:focus-within .dd-trigger svg{transform:rotate(180deg)}
    .dd-panel{position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;width:302px;padding:8px;border:1px solid var(--line);border-radius:12px;background:rgba(11,15,21,.98);box-shadow:0 30px 70px -30px #000,0 0 0 1px rgba(66,177,255,.06);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:70}
    .dd:hover .dd-panel,.dd.open .dd-panel,.dd:focus-within .dd-panel{opacity:1;visibility:visible;transform:translateY(0)}
    .dd-panel::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
    .dd-head{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding:8px 12px 6px}
    .dd-item{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;border-radius:9px;transition:background .18s ease}
    .dd-item:hover{background:rgba(66,177,255,.1)}
    .dd-item .ic{flex:0 0 26px;height:26px;border-radius:7px;display:grid;place-items:center;background:linear-gradient(150deg,#123a63,#0a1a2e);border:1px solid rgba(66,177,255,.28);color:var(--cyan);font-family:var(--mono);font-size:.62rem;font-weight:700;margin-top:1px}
    .dd-item .tt{display:block;color:var(--ink);font-size:.86rem;font-weight:560;line-height:1.25}
    .dd-item .ds{display:block;color:var(--dim);font-size:.72rem;line-height:1.3;margin-top:3px}
    .dd-item.soon{opacity:.55;cursor:default}
    .dd-item.soon:hover{background:none}
    .dd-item.soon .ic{background:rgba(255,255,255,.04);border-color:var(--line);color:var(--dim)}
    .button{min-height:44px;padding:0 22px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;gap:9px;background:#fff;color:#07101a;font-weight:700;font-size:.85rem;box-shadow:3px 3px 0 rgba(0,0,0,.5);transform:rotate(-.6deg);transition:transform .22s ease,box-shadow .22s ease}
    .button:hover{transform:rotate(-.6deg) translateY(-2px);box-shadow:4px 5px 0 rgba(0,0,0,.55)}
    .button.ghost{background:rgba(255,255,255,.04);color:#fff;border:1px solid rgba(255,255,255,.2);box-shadow:none;transform:none}.button.ghost:hover{transform:translateY(-2px);box-shadow:none}
    @media(max-width:880px){.nav-actions .nav-link,.nav-actions .dd{display:none}}
    @media(max-width:480px){.brand img{height:28px;max-width:158px}.btn-cta{padding:9px 14px;font-size:.82rem}}

    /* hero */
    /* overflow-x clips the RHODE watermark horizontally; overflow-y stays
       visible so .hero-bg (top:-140px) can paint up under any platform
       wrapper offset above the section — see Fix 4 in the tear block. */
    .hero{position:relative;isolation:isolate;padding:136px 0 30px;overflow:clip visible}
    .hero::before{content:"";position:absolute;inset:0;z-index:-2;background-image:radial-gradient(circle at 12% 20%,rgba(213,233,255,.5) 0 1px,transparent 1.5px),radial-gradient(circle at 38% 74%,rgba(139,187,239,.4) 0 1px,transparent 1.5px),radial-gradient(circle at 62% 14%,rgba(244,242,229,.45) 0 1px,transparent 1.5px),radial-gradient(circle at 84% 60%,rgba(164,205,250,.4) 0 1px,transparent 1.5px);background-size:340px 340px,420px 420px,380px 380px,470px 470px;opacity:.4}
    .hero::after{content:"";position:absolute;z-index:-1;right:-12%;top:-16%;width:min(60vw,880px);aspect-ratio:1.15;background:radial-gradient(ellipse at center,rgba(25,104,196,.2),rgba(8,36,71,.07) 42%,transparent 70%);filter:blur(14px)}
    .hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center}
    @media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:38px}}
    .hand-kick{font-family:var(--hand);font-weight:700;font-size:clamp(1.25rem,2.5vw,1.75rem);line-height:1;color:var(--cyan);margin:0 0 22px;transform:rotate(-1.4deg);transform-origin:left;display:inline-block;text-shadow:0 0 34px rgba(66,177,255,.35)}
    h1{font-weight:690;font-size:clamp(2.7rem,5.7vw,4.35rem);line-height:1;letter-spacing:-.028em;color:var(--ink);text-wrap:balance;margin:0 0 22px}
    h1 em{font-style:normal;color:var(--blue-2)}
    .deck{font-size:clamp(1.08rem,2vw,1.28rem);line-height:1.55;color:var(--soft);max-width:46ch;margin:0 0 26px}
    .hero-meta{display:flex;flex-wrap:wrap;gap:8px}
    .chip{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);border:1px solid var(--line);border-radius:999px;padding:7px 13px;background:rgba(255,255,255,.025)}
    .chip b{color:var(--cyan);font-weight:600}

    .hero-art{position:relative}
    .jar-frame{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:linear-gradient(165deg,#101722,#080c12);box-shadow:var(--shadow-1),0 60px 120px -60px rgba(66,177,255,.45)}
    .jar-frame img{width:100%;height:auto}
    .jar-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(66,177,255,.12),transparent 40%)}
    .float-chip{position:absolute;z-index:3;padding:10px 14px;border:1px solid rgba(66,177,255,.3);border-radius:10px;background:rgba(7,12,19,.92);box-shadow:0 18px 44px -18px #000;backdrop-filter:blur(6px)}
    .float-chip .fc-n{font-family:var(--hand);font-size:1.45rem;font-weight:700;color:var(--ink);letter-spacing:0;line-height:1}
    .float-chip .fc-n i{font-style:normal;color:var(--blue-2)}
    .float-chip .fc-l{font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-top:2px}
    .fc-1{left:-26px;top:16%}
    .fc-2{right:-20px;top:52%}
    .fc-3{left:8%;bottom:-20px}
    @media(max-width:940px){.fc-1{left:8px}.fc-2{right:8px}.fc-3{bottom:8px}}

    /* stat bar */
    .statbar{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:44px}
    @media(max-width:860px){.statbar{grid-template-columns:repeat(3,1fr)}}
    @media(max-width:520px){.statbar{grid-template-columns:repeat(2,1fr)}}
    .stat{background:var(--panel);padding:18px 16px}
    .stat .n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:clamp(1.2rem,2.4vw,1.6rem);font-weight:600;color:var(--ink);letter-spacing:-.02em}
    .stat .n .u{color:var(--blue)}
    .stat .l{font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-top:5px;line-height:1.4}

    /* sections */
    section{padding:38px 0}
    .hand-note{font-family:var(--hand);font-weight:700;font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1;color:var(--cyan);margin:0 0 12px;display:inline-block;transform:rotate(-1.3deg);transform-origin:left}
    .hand-note.warn{color:var(--orange)}
    h2{font-weight:650;font-size:clamp(1.8rem,3.9vw,2.6rem);line-height:1.1;letter-spacing:-.025em;color:var(--ink);text-wrap:balance;margin:0 0 18px}
    p{margin:0 0 18px}
    p:last-child{margin-bottom:0}
    .lead{font-size:1.16rem;line-height:1.6;color:var(--ink)}
    hr.rule{border:0;border-top:1px solid var(--line-soft);margin:8px 0}
    .pull{border-left:2px solid var(--blue);padding:2px 0 2px 20px;margin:26px 0;font-family:var(--serif);font-style:italic;font-size:1.34rem;line-height:1.4;color:var(--ink);max-width:60ch}
    .pull cite{display:block;font-family:var(--mono);font-style:normal;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-top:12px}

    /* receipts chart */
    .receipts{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 26px 20px;box-shadow:0 40px 90px -60px rgba(66,177,255,.35)}
    .receipts-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
    .receipts-head h3{font-size:1.5rem;font-weight:650;color:var(--ink);letter-spacing:-.01em;margin:0}
    .receipts-head span{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
    .chart-wrap{overflow-x:auto}
    .chart{width:100%;min-width:520px;height:auto}
    .chart .grid{stroke:rgba(255,255,255,.07);stroke-width:1}
    .chart .glab{fill:var(--faint);font-family:var(--mono);font-size:10.5px}
    .chart .xlab{fill:var(--dim);font-family:var(--mono);font-size:10.5px}
    .chart .area{fill:url(#tdArea)}
    .chart .line{fill:none;stroke:var(--blue-2);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(66,177,255,.5))}
    .chart .dot{fill:#eaf5ff;stroke:var(--blue);stroke-width:2}
    .chart .dlab{fill:var(--cyan);font-family:var(--mono);font-size:11px;font-weight:600}
    .js .chart .area{opacity:0;transition:opacity .8s ease .55s}
    .js .chart .line{stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 1.4s cubic-bezier(.3,.6,.2,1) .15s}
    .js .chart .dot{opacity:0;transition:opacity .4s ease .9s}
    .js .chart .dlab{opacity:0;transition:opacity .4s ease 1s}
    .js .receipts.in .chart .line{stroke-dashoffset:0}
    .js .receipts.in .chart .area,.js .receipts.in .chart .dot,.js .receipts.in .chart .dlab{opacity:1}
    @media(prefers-reduced-motion:reduce){.js .chart .line{stroke-dasharray:none;stroke-dashoffset:0}.js .chart .area,.js .chart .dot,.js .chart .dlab{opacity:1;transition:none}}
    .receipt-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
    @media(max-width:640px){.receipt-row{grid-template-columns:1fr}}
    .receipt{border:1px solid var(--line);border-radius:11px;background:var(--panel-2);padding:13px 15px}
    .receipt b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);font-size:1.35rem;font-weight:650;display:block}
    .receipt span{font-size:.95rem;color:var(--dim);line-height:1.4;display:block;margin-top:3px}

    /* storefront evidence — centered browser with on-image callouts */
    #exhibit .exhibit-h{text-align:center;margin:0 0 6px}
    #exhibit .exhibit-hint{text-align:center;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0 0 26px}
    .evidence{position:relative;width:min(1000px,100%);margin-inline:auto}
    .browser{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0a0e14;box-shadow:var(--shadow-1)}
    .browser-bar{position:relative;z-index:3;display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line-soft);background:#0d1218}
    .browser-bar i{width:9px;height:9px;border-radius:50%;background:#2a3340;display:block}
    .browser-bar i:nth-child(1){background:#ff5f57}.browser-bar i:nth-child(2){background:#febc2e}.browser-bar i:nth-child(3){background:#28c840}
    .browser-url{flex:1;margin-left:6px;font-family:var(--mono);font-size:.66rem;color:var(--dim);background:rgba(255,255,255,.045);border:1px solid var(--line-soft);border-radius:6px;padding:5px 10px}
    .browser-url b{color:var(--soft);font-weight:500}
    .browser-shot{position:relative;aspect-ratio:1500/1513;overflow:hidden}
    /* transform-origin lives on the BASE rule so zoom-out animates from the
       same origin it zoomed in on (origin on .zoom only = snap-to-center bug) */
    .browser-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;transform-origin:var(--zx,center) var(--zy,center);transition:transform .55s cubic-bezier(.33,.12,.2,1);will-change:transform}
    .browser.zoom .browser-shot img{transform:scale(1.75)}

    /* callout layer overlaying the shot */
    .anno-layer{position:absolute;inset:0;z-index:4;pointer-events:none}
    /* .anno = stationary positioning + hover hit area. .card = the visible chip.
       On zoom only the .card translates, so the cursor never leaves the .anno
       box and the hover can't cancel itself. */
    .anno{position:absolute;left:var(--x);top:var(--y);width:clamp(170px,21vw,224px);pointer-events:auto;
      rotate:var(--rot,-1deg);transform-origin:center;
      transition:rotate .3s ease,opacity .35s ease}
    .anno .card{display:grid;grid-template-columns:20px 1fr;gap:9px;align-items:start;
      padding:10px 12px 11px 10px;border-radius:11px;
      border:1px solid color-mix(in srgb,var(--brand) 32%,var(--line));
      background:rgba(8,12,19,.78);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
      box-shadow:0 16px 38px -20px #000;
      transition:translate .45s ease,border-color .3s ease,box-shadow .3s ease,background .3s ease}
    .anno i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
      background:color-mix(in srgb,var(--brand) 20%,transparent);
      border:1px solid color-mix(in srgb,var(--brand-soft) 55%,transparent);
      color:var(--brand-soft);font-style:normal;font-family:var(--mono);font-size:.6rem;font-weight:700;margin-top:1px}
    .anno b{display:block;color:var(--ink);font-size:.8rem;font-weight:640;line-height:1.24}
    .anno span{display:block;color:var(--soft);font-size:.72rem;line-height:1.42;margin-top:5px}
    .anno:hover,.anno:focus-within{rotate:0deg;z-index:8}
    .anno:hover .card,.anno:focus-within .card{background:rgba(8,12,19,.92);
      border-color:color-mix(in srgb,var(--brand-soft) 72%,transparent);box-shadow:0 22px 48px -18px rgba(0,0,0,.75)}
    /* .up chips anchor by their BOTTOM edge (--y = bottom), sitting just above
       the feature they label. Uses the standalone translate/rotate properties:
       the .rv reveal system sets transform:none with higher specificity, so
       transform is unusable here. */
    .anno.up{translate:0 -100%}
    /* while zoomed, the image relocates the target to center — lift the hovered
       chip's CARD clear so it never covers what it points at (the .anno hit box
       stays put, so the lift can't end its own hover) */
    .browser.zoom .anno.up:hover .card,.browser.zoom .anno.up:focus-within .card{translate:0 -84px}
    @media(min-width:760px){
      .browser.zoom .anno:not(:hover):not(:focus-within){opacity:.16}
    }
    @media(prefers-reduced-motion:reduce){
      .browser.zoom .browser-shot img{transform:none}
      .browser-shot img{transition:none}
    }

    /* mobile fallback: chips reflow into a stacked card list below the shot */
    @media(max-width:759px){
      .evidence{width:100%}
      #exhibit .exhibit-hint{display:none}
      .browser-shot{aspect-ratio:auto;overflow:visible}
      .browser-shot img{height:auto;object-fit:fill}
      .browser.zoom .browser-shot img{transform:none}
      .anno-layer{position:static;pointer-events:auto;display:grid}
      .anno,.anno.up{position:static;width:auto;transform:none;translate:none;rotate:none}
      .anno .card{border-radius:0;border:0;border-top:1px solid var(--line-soft);background:var(--panel-2);
        backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;
        grid-template-columns:24px 1fr;gap:12px;padding:14px 16px}
      .anno:first-of-type .card{border-top:0}
      .anno i{width:24px;height:24px;font-size:.62rem}
      .anno b{font-size:.9rem}
      .anno span{margin-top:4px;color:var(--dim);font-size:.78rem}
    }

    /* plays */
    .play{display:grid;grid-template-columns:60px 1fr;gap:6px 24px;padding:34px 0;border-top:1px solid var(--line-soft)}
    .play .pn{grid-row:1 / span 4}
    .play .pn b{font-family:var(--hand);font-size:2.6rem;font-weight:700;color:var(--blue-2);line-height:1;display:block;letter-spacing:0;transform:rotate(-2deg)}
    .play .pn small{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
    .play h3{font-size:1.42rem;font-weight:670;color:var(--ink);margin:0 0 12px;letter-spacing:-.015em;line-height:1.16;text-wrap:balance}
    .play p{font-size:16px}
    @media(max-width:560px){.play{grid-template-columns:1fr;gap:8px}.play .pn{grid-row:auto;display:flex;align-items:baseline;gap:9px}.play .pn b{font-size:1.65rem}}
    .steal{display:block;position:relative;background:rgba(66,177,255,.06);border:1px dashed rgba(66,177,255,.45);border-radius:13px;padding:17px 19px 15px;margin-top:20px;transition:border-color .25s ease,background .25s ease,transform .25s ease}
    .steal:hover{border-color:rgba(66,177,255,.8);background:rgba(66,177,255,.09);transform:rotate(-.4deg)}
    .steal .tag{display:inline-block;font-family:var(--hand);font-size:1.45rem;line-height:1;color:var(--cyan);background:none;padding:0;margin:0 0 9px;font-weight:700;letter-spacing:0;text-transform:none;transform:rotate(-1.6deg);transform-origin:left;text-shadow:0 0 26px rgba(66,177,255,.4)}
    .steal .tag::after{content:"  →"}
    .steal p{margin:0;font-size:14.5px;line-height:1.55;color:var(--soft)}
    .steal p em{color:var(--ink);font-style:normal;font-weight:600}
    .quote-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
    .qc{font-family:var(--mono);font-size:.7rem;color:var(--cyan);border:1px solid rgba(66,177,255,.3);background:rgba(66,177,255,.06);border-radius:8px;padding:8px 12px}
    .name-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
    .nc{font-size:.8rem;font-weight:620;color:var(--ink);border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:8px 16px}
    .nc i{font-style:normal;color:var(--dim);font-weight:400;font-size:.7rem;margin-left:6px}

    .play-media{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 4px;align-items:start}
    @media(max-width:640px){.play-media{grid-template-columns:1fr}}
    .pm-img{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
    .pm-img img{width:100%;height:auto}
    .pm-cap{font-family:var(--mono);font-size:.62rem;color:var(--dim);padding:9px 12px;border-top:1px solid var(--line-soft);line-height:1.5}
    .pm-cap b{color:var(--soft);font-weight:600}

    /* price ladder */
    .ladder{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:20px 20px 16px;margin:18px 0 4px}
    .ladder-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px}
    .ladder-head b{color:var(--ink);font-size:.95rem;font-weight:650}
    .ladder-head span{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
    .lrow{display:grid;grid-template-columns:170px 1fr 76px;gap:12px;align-items:center;padding:6px 0}
    @media(max-width:560px){.lrow{grid-template-columns:110px 1fr 52px}}
    .lrow .ln{font-size:1rem;color:var(--soft);line-height:1.2}
    .lrow .lb{height:12px;border-radius:6px;background:linear-gradient(90deg,rgba(66,177,255,.4),var(--blue-2));width:var(--w);min-width:8px;box-shadow:0 0 14px rgba(66,177,255,.3);transform-origin:left}
    .js .lrow .lb{transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.7,.2,1) var(--dl,0s)}
    .js .ladder.in .lrow .lb{transform:scaleX(1)}
    @media(prefers-reduced-motion:reduce){.js .lrow .lb{transform:none;transition:none}}
    .lrow .lv{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.05rem;color:var(--ink);text-align:right;font-weight:600}
    .lrow.hot .lb{background:linear-gradient(90deg,rgba(255,148,116,.5),var(--orange));box-shadow:0 0 14px rgba(255,148,116,.32)}
    .ladder-note{font-family:var(--mono);font-size:.62rem;color:var(--dim);margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft);line-height:1.6}

    /* hooks triptych */
    .triptych{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0 6px}
    @media(max-width:640px){.triptych{grid-template-columns:1fr}}
    .hook-card{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);box-shadow:0 30px 70px -40px #000}
    .hook-card img{width:100%;height:auto;aspect-ratio:9/13;object-fit:cover}
    .hook-card figcaption{position:absolute;left:10px;right:10px;bottom:10px;padding:10px 12px;border-radius:9px;background:rgba(5,8,12,.86);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px)}
    .hook-card figcaption b{display:block;color:var(--ink);font-size:.76rem;font-weight:640;line-height:1.35}
    .hook-card figcaption span{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);margin-top:4px}
    .trip-note{display:flex;align-items:center;gap:12px;border:1px solid rgba(66,177,255,.28);background:rgba(66,177,255,.06);border-radius:11px;padding:13px 16px;margin-top:14px}
    .trip-note b{font-family:var(--hand);font-size:1.75rem;color:var(--cyan);font-weight:700;white-space:nowrap;transform:rotate(-1.5deg)}
    .trip-note span{font-size:.82rem;color:var(--soft);line-height:1.45}

    /* escalator */
    .esc{display:grid;gap:10px;margin:18px 0 4px}
    .rung{display:grid;grid-template-columns:118px 1fr;gap:16px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:14px 17px}
    .rung .stg{font-family:var(--mono);font-size:.82rem;font-weight:640;color:var(--cyan);font-variant-numeric:tabular-nums}
    .rung .stg small{display:block;color:var(--dim);font-weight:400;letter-spacing:.05em;text-transform:uppercase;font-size:.54rem;margin-top:3px}
    .rung .mv{font-size:14.5px;line-height:1.45;color:var(--soft)}
    .rung.r1{margin-right:90px}.rung.r2{margin-right:45px}
    @media(max-width:620px){.rung{grid-template-columns:1fr;gap:5px}.rung.r1,.rung.r2{margin-right:0}}

    /* cadence */
    .cadence{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 20px;margin:18px 0 4px}
    .days{display:flex;flex-wrap:wrap;gap:8px}
    .day{flex:1 1 92px;min-width:86px;border:1px solid var(--line);border-radius:10px;padding:10px 11px;background:var(--panel-2)}
    .day .dn{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan)}
    .day .dl{font-size:.73rem;color:var(--soft);line-height:1.32;margin-top:4px}
    .cadence .note{font-family:var(--mono);font-size:.66rem;color:var(--dim);margin:15px 0 0;padding-top:13px;border-top:1px solid var(--line-soft);line-height:1.65}

    /* risk / recap / cta */
    .risk{background:rgba(255,148,116,.07);border:1px solid rgba(255,148,116,.32);border-radius:14px;padding:26px}
    .risk h3{font-size:1.32rem;font-weight:660;color:var(--ink);margin:8px 0 12px;letter-spacing:-.01em}
    .risk p{color:var(--soft);font-size:15px}
    .recap{background:linear-gradient(160deg,#0c1c31,#070b12);border:1px solid rgba(66,177,255,.28);border-radius:16px;padding:32px 30px;box-shadow:0 40px 90px -50px rgba(66,177,255,.5)}
    .recap h2{margin:8px 0 22px}
    .recap ol{margin:0;padding:0;list-style:none;counter-reset:r;display:grid;gap:13px}
    .recap li{counter-increment:r;display:grid;grid-template-columns:30px 1fr;gap:13px;align-items:baseline;font-size:15px;line-height:1.45;color:var(--soft)}
    .recap li::before{content:counter(r,decimal-leading-zero);font-family:var(--hand);font-size:1.05rem;color:var(--blue-2);font-weight:700}
    .recap li b{color:var(--ink);font-weight:640}
    .cta{text-align:center;padding:26px 0 8px}
    .cta .big{font-size:clamp(1.5rem,3.6vw,2.1rem);font-weight:690;color:var(--ink);letter-spacing:-.02em;margin:0 0 12px;text-wrap:balance}
    .cta p{margin:0 auto;color:var(--dim);font-size:15px;max-width:54ch}
    .cta .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}

    /* footer */
    .footer{border-top:1px solid var(--line-soft);margin-top:30px;padding:34px 0 60px;background:var(--bg)}
    .footer-inner{width:min(var(--col),calc(100% - 44px));margin-inline:auto}
    .footer .cols{display:grid;grid-template-columns:1.2fr 1fr;gap:26px;margin-bottom:26px}
    @media(max-width:620px){.footer .cols{grid-template-columns:1fr}}
    .footer h4{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:0 0 8px}
    .footer p{font-size:12.5px;color:var(--dim);line-height:1.65;margin:0}
    .footer a.src{color:var(--blue-2);border-bottom:1px solid rgba(66,177,255,.3)}
    .footer .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:22px;border-top:1px solid var(--line-soft);flex-wrap:wrap}
    .footer .bar img{width:132px}
    .footer .bar small{font-family:var(--mono);font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
    :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

    /* ---- award layer ---- */
    ::selection{background:var(--blue);color:#fff}
    body::after{content:"";position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:.3;mix-blend-mode:overlay;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='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E")}
    .prog{position:fixed;left:0;top:0;height:2px;width:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));transform-origin:left;transform:scaleX(0);z-index:2100;pointer-events:none}
    h1 em{font-family:var(--hand);font-weight:700;letter-spacing:0;line-height:.92;background:linear-gradient(95deg,#42b1ff 10%,#42b1ff 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
    .hero-art::before{content:"DOLLAR SHAVE CLUB";position:absolute;left:-34px;top:-58px;z-index:0;font-size:clamp(2rem,4vw,3.2rem);font-weight:800;letter-spacing:.05em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.09);pointer-events:none}
    .jar-frame{z-index:1}
    .ticker{border-block:1px solid var(--line-soft);background:rgba(255,255,255,.014);padding:13px 0;overflow:hidden}
    .ticker-track{display:flex;align-items:center;gap:38px;width:max-content;white-space:nowrap;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);animation:tick 42s linear infinite}
    .ticker-track i{font-style:normal;color:var(--blue-2)}
    @keyframes tick{to{transform:translateX(-50%)}}
    @media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}
    .play{position:relative}
    .play::after{content:attr(data-n);position:absolute;right:-8px;top:14px;z-index:0;font-family:var(--hand);font-size:clamp(5.2rem,10vw,8.6rem);font-weight:700;line-height:1;color:rgba(255,255,255,.045);pointer-events:none;transform:rotate(-3deg)}
    .play>div{position:relative;z-index:1}
    .rail{position:fixed;left:26px;top:50%;translate:0 -50%;z-index:90;display:grid;gap:15px}
    @media(max-width:1280px){.rail{display:none}}
    .rail a{display:flex;align-items:center;gap:11px;color:var(--faint)}
    .rail i{width:7px;height:7px;border-radius:50%;background:currentColor;display:block;flex:0 0 auto;transition:transform .2s ease}
    .rail span{font-family:var(--mono);font-size:.54rem;letter-spacing:.13em;text-transform:uppercase;opacity:0;transform:translateX(-6px);transition:opacity .2s ease,transform .2s ease}
    .rail a:hover span,.rail a.act span{opacity:1;transform:none}
    .rail a.act{color:var(--cyan)}
    .rail a.act i{transform:scale(1.5);box-shadow:0 0 12px rgba(66,177,255,.7)}
    .receipt,.day,.rung{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
    .receipt:hover,.rung:hover{transform:translateY(-3px);border-color:rgba(66,177,255,.42);box-shadow:0 20px 44px -26px rgba(66,177,255,.45)}
    .hook-card{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
    .hook-card:hover{transform:translateY(-6px) scale(1.012);box-shadow:0 44px 90px -44px rgba(66,177,255,.4)}
    .jar-frame{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
    .hero-art:hover .jar-frame{transform:translateY(-4px)}
    @media(prefers-reduced-motion:reduce){.receipt,.day,.rung,.hook-card,.jar-frame{transition:none}}

    /* ============================================================
       We-Commerce brand layer — SHARED across the five teardowns
       (identical byte-for-byte; only :root --brand + the hero
       watermark differ per page). Editorial accents flow from
       --blue-2/--cyan (aliased to --brand-soft in :root); this
       block handles the hard literals: paper base, de-glowed
       chassis, brand-tinted fills, the hero em painted-underline
       treatment, and the FLBold kicker conversions. --blue stays
       as the system/CTA blue on purpose (nav button).
       ============================================================ */

    /* paper texture beneath the flat bg (film grain already lives in body::after) */
    body{background-color:var(--bg);background-image:var(--we-paper-dark);background-size:cover;background-attachment:fixed}

    /* hero headline: solid brand (was blue→cyan background-clip); painted underline via .we-underline in markup */
    h1 em{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:var(--brand);color:var(--brand)}

    /* editorial accents still carried on --blue → repoint to brand */
    .stat .n .u{color:var(--brand-soft)}
    .pull{border-left-color:var(--brand)}
    .chart .dot{stroke:var(--brand)}

    /* chart: flatten the line glow, brand-tint the area wash */
    .chart .line{filter:none}
    .chart .area{fill:color-mix(in srgb,var(--brand) 22%,transparent)}

    /* price-ladder bars → solid brand, de-glowed */
    .lrow .lb{background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 45%,transparent),var(--brand));box-shadow:none}

    /* de-glow the chassis: blue glow box-shadows → neutral-dark ambient (depth kept) */
    .btn-cta{box-shadow:0 10px 30px -12px rgba(0,0,0,.7)}
    .btn-cta:hover{box-shadow:0 14px 36px -12px rgba(0,0,0,.85)}
    .receipts{box-shadow:0 40px 90px -60px rgba(0,0,0,.7)}
    .recap{box-shadow:0 40px 90px -55px rgba(0,0,0,.7);border-color:color-mix(in srgb,var(--brand) 30%,transparent)}

    /* interaction tints that were hard-blue → brand */
    .dd-item:hover{background:color-mix(in srgb,var(--brand) 10%,transparent)}
    .steal{background:color-mix(in srgb,var(--brand) 6%,transparent);border-color:color-mix(in srgb,var(--brand) 45%,transparent)}
    .steal:hover{background:color-mix(in srgb,var(--brand) 9%,transparent);border-color:color-mix(in srgb,var(--brand) 75%,transparent)}
    ::selection{background:var(--brand);color:#05070a}
    .prog{background:linear-gradient(90deg,var(--brand),var(--brand-soft))}

    /* editorial kickers → FLBold, brand, slight tilt (data labels stay mono) */
    .play .pn small{font-family:"FLBold","Arial Black",sans-serif;color:var(--brand);letter-spacing:.02em;font-size:.72rem;transform:rotate(-1.5deg);transform-origin:left;display:inline-block}
    .dd-head{font-family:"FLBold","Arial Black",sans-serif;color:var(--brand);letter-spacing:.02em;font-size:.74rem;transform:rotate(-.6deg);display:inline-block}

    /* hand-text: drop the neon halo (was cyan text-shadow), keep the hand-drawn face */
    .hand-kick,.hand-note,.steal .tag,.trip-note b{text-shadow:none}

    /* motion (spec 7): reveals only on headings + cards; paragraphs settle instantly */
    .js p.rv{opacity:1;transform:none;transition:none}
/* ---- recap: tear-off infographic sheet (Arrae-style framing) ---- */
.recap{position:relative}
.recap--sheet{padding:32px 30px 24px}
.recap-stamp{position:absolute;top:22px;right:24px;font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-soft);border:1.5px solid color-mix(in srgb,var(--brand) 50%,transparent);border-radius:6px;padding:6px 10px;transform:rotate(4deg);opacity:.85;pointer-events:none}
.recap--sheet h2{margin:2px 0 18px}
.recap-sheet{margin:0}
.recap-sheet a{display:block;transform:rotate(-.7deg);transition:transform .25s ease}
.recap-sheet a:hover{transform:rotate(0deg) translateY(-2px)}
.recap-sheet img{width:100%;height:auto;border-radius:10px;border:1px solid rgba(255,255,255,.14);box-shadow:0 34px 80px -34px rgba(0,0,0,.8)}
.recap-foot{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft)}
.rf-label{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-right:4px}
.share-btn{font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;color:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 38%,transparent);background:color-mix(in srgb,var(--brand) 7%,transparent);border-radius:4px;padding:8px 15px;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.share-btn:hover{background:color-mix(in srgb,var(--brand) 14%,transparent);border-color:color-mix(in srgb,var(--brand) 70%,transparent);transform:translateY(-1px)}
.share-btn.copied{color:var(--green);border-color:rgba(108,225,173,.6)}

/* ============================================================
   RHODE LIGHT/DARK RESTRUCTURE — alternating paper zones with
   torn-paper transitions, echoing the live We-Commerce site.
   ============================================================ */

/* ---- HERO: blurred Rhode-brand image + tint + grain (replaces
        the starfield + haze atmosphere) ---- */
.hero::before,.hero::after{display:none!important}
/* top:-140px extends the halftone print above the section so it paints under
   any platform wrapper offset (production shows a flat strip behind the nav
   without this); left/right/bottom pinned to the section edges. */
.hero-bg{position:absolute;top:-140px;left:0;right:0;bottom:0;z-index:-1;overflow:hidden}
/* All hero-atmosphere knobs are CSS custom properties so the on-page tweak
   panel (teardown-rhode.js) can drive them live. Bake final values here. */
/* Background = dark monochrome halftone print of the dollarshaveclub collage
   (gemini-3-pro-image via AI gateway, darkened to ~38% in post). */
.hero-bg-img{position:absolute;inset:0;
  /* image URL resolved via asset_url in theme.liquid (:root --we-dollarshaveclub-halftone) —
     relative asset refs inside CSS do NOT resolve on the Fluid CDN */
  background:var(--we-dollarshaveclub-halftone) center/cover no-repeat;
  filter:blur(var(--hz-blur,0px)) brightness(var(--hz-bright,1)) saturate(var(--hz-sat,1)) contrast(var(--hz-con,1));
  transform:scale(var(--hz-scale,1.03))}
.hero-bg-tint{position:absolute;inset:0;opacity:var(--hz-tint,.85);
  background:
    linear-gradient(90deg,rgba(5,7,10,.55) 0%,rgba(5,7,10,.25) 38%,transparent 60%),
    radial-gradient(120% 90% at 20% 12%,rgba(66,177,255,.08),transparent 55%),
    linear-gradient(180deg,rgba(5,7,10,.35) 0%,rgba(5,7,10,.5) 52%,rgba(5,7,10,.88) 100%)}
/* grain: soft-light preserves the black point (overlay lifts blacks to gray) */
.hero-bg-grain{position:absolute;inset:0}
/* grain defaults = the codified we-grain-heavy recipe (overlay, full op,
   freq 1.0, tile 264) — see .we-grain-heavy in we-layer.css */
.hero-bg-grain::after{content:"";position:absolute;inset:0;pointer-events:none;
  mix-blend-mode:var(--hz-grain-blend,overlay);opacity:var(--hz-grain-op,1);
  background-size:var(--hz-grain-size,264px) var(--hz-grain-size,264px);
  background-image:var(--hz-grain-img,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='nh'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nh)'/%3E%3C/svg%3E"))}

/* ---- ZONE stacking: light bands always paint above dark bands so
        a light zone's tear can overlap the dark zone that follows
        it in the DOM. Fixed nav (100) / rail (90) stay on top. ---- */
.zone{position:relative}
/* v3 tear system: the DARK side owns every tear, so dark zones paint ABOVE
   cream (their dark-filled tear strips overlap onto the continuous cream). */
.zone--dark{z-index:3}
.zone--light{z-index:2}

/* ---- LIGHT ZONE palette: invert the dark custom properties to a
        warm cream/ink set; components inherit, then get fixed by eye. */
.zone--light{
  --bg:#f5f0e8;
  --ink:#17140e;
  --soft:var(--ink);
  --dim:var(--ink);
  --faint:var(--ink);
  --panel:#fcf9f3;
  --panel-2:#f1eadd;
  --line:rgba(30,22,10,.14);
  --line-soft:rgba(30,22,10,.08);
  --sh-rgb:30,22,10;
  /* darkened blue that survives on cream (brand blue is ~2:1 on cream) */
  --brand-ink:color-mix(in srgb,#42b1ff 58%,#0f3350);
  /* cream veil over the paper texture: keeps the tooth but pulls the tone
     to #f5f0e8 so the flat-cream tear bands meet the zone without a seam */
  background:linear-gradient(rgba(245,240,232,.55),rgba(245,240,232,.55)),var(--bg) var(--we-paper-light) center/cover;
  color:var(--soft);
  padding-block:16px;
}
/* keep the grain film subtle over cream */
.zone--light::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  mix-blend-mode:multiply;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='ng'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ng)'/%3E%3C/svg%3E")}
.zone--light>*{position:relative;z-index:1}

/* small blue inline text → darkened blue for contrast on cream */
.zone--light .k{color:var(--brand-ink)}
.zone--light .pull{border-left-color:color-mix(in srgb,#42b1ff 72%,#0f3350)}
.zone--light .pull cite{color:var(--dim)}

/* receipts card → white card on cream */
.zone--light .receipts{background:var(--panel);border-color:var(--line);
  box-shadow:0 30px 70px -50px rgba(30,22,10,.5),0 2px 0 rgba(30,22,10,.04)}
.zone--light .receipts-head h3{color:var(--ink)}
.zone--light .receipt{background:var(--panel-2);border-color:var(--line)}
.zone--light .receipt b{color:var(--ink)}
.zone--light .receipt:hover{border-color:color-mix(in srgb,#42b1ff 40%,var(--line));
  box-shadow:0 18px 40px -26px rgba(30,22,10,.4)}
.zone--light .lrow .ln{color:var(--soft)}
.zone--light .lrow .lv{color:var(--ink)}

/* plays: numerals, kickers, ghost watermark, steal panels, media */
.zone--light .play{border-top-color:var(--line)}
.zone--light .play::after{color:rgba(30,22,10,.05)}
.zone--light .play h3{color:var(--ink)}
.zone--light .play .pn b{color:color-mix(in srgb,#42b1ff 80%,#0f3350)}
.zone--light .play .pn small{color:var(--brand-ink)}
.zone--light .steal{background:color-mix(in srgb,#42b1ff 8%,#fff);
  border-color:color-mix(in srgb,#42b1ff 42%,var(--line))}
.zone--light .steal:hover{background:color-mix(in srgb,#42b1ff 12%,#fff);
  border-color:color-mix(in srgb,#42b1ff 66%,transparent)}
.zone--light .steal .tag{color:var(--brand-ink)}
.zone--light .steal p{color:var(--soft)}
.zone--light .steal p em{color:var(--ink)}
.zone--light .pm-img{background:var(--panel);border-color:var(--line)}
.zone--light .pm-cap{border-top-color:var(--line-soft)}
.zone--light .pm-cap b{color:var(--soft)}
.zone--light strong{color:var(--ink)}
.zone--light ::selection{background:#42b1ff;color:#fff}

/* ============================================================
   TORN-PAPER TRANSITION SYSTEM v3.1 — reusable across teardown pages
   ------------------------------------------------------------
   v3.1 changes:
    • BITE (boundary 3): no understudy strip. The contour shadow is a
      drop-shadow FILTER on #exhibit itself, so it hugs the masked rag
      exactly — the old .tstrip--bite-shadow could misalign and showed a
      ghost rag below the edge (deleted, markup + CSS).
    • SHADOW-ON-CREAM rule: a rag's shadow falling on cream is soft
      (0 ±2px 3px .22); heavier reads as a gray ghost-tear. Applied to
      up2/up4/perf and the #exhibit bite filter. Shadow onto dark may
      stay heavier.
    • SPACING SCHEMA: two tokens (--tear-gap-light / --tear-gap-dark) own
      every boundary's clearance; boundary paddings derive from them (see
      the tokens block below). Future per-section knobs for the split.
   ------------------------------------------------------------
   THE DARK SIDE OWNS EVERY TEAR. The cream zones are CONTINUOUS —
   their paper texture runs unbroken under every boundary; nothing
   cream is ever cut or duplicated (that was v2's fatal seam: a flat
   cream fill meeting the textured cream zone always showed a straight
   tonal joint). Instead every boundary is carved by a DARK-filled,
   mask-shaped strip (.tstrip) that sits ON TOP of the cream. Because
   the dark page background is flat (#05070a), a dark strip's flush
   (opaque) edge abuts the adjacent dark section invisibly — dark-on-
   dark by construction — while its ragged, turbulence-displaced edge
   bites into the cream. No straight line is possible.

   STACKING: .zone--dark is z-index:3 (above .zone--light z-index:2)
   so a dark zone's strips paint over the cream of the neighbouring
   light zone. Each strip is a child of the DARK zone at the boundary
   (except the notepad perforation, which lives at the cream sheet's
   own top over the ticker gap).

   VARIANT A — dark torn strip (default): a full-width strip filled
   #05070a, shaped by an SVG alpha-MASK (opaque on the dark-section
   side, transparent on the cream side, ragged between). filter:
   drop-shadow points INTO the cream and, because it follows the
   MASK's alpha contour, hugs the ragged edge — never a straight band.
     • rag faces UP   (cream above, dark below): drop-shadow(0 -4px …)
     • rag faces DOWN (dark above, cream below): drop-shadow(0  4px …)
   The flush edge overlaps 1px INTO its dark section to kill hairlines.

   VARIANT B — masked section edge + shadow understudy (exhibit→plays
   "browser bite" only): #exhibit's OWN bottom edge is clipped by a
   multi-layer mask (tear SVG at bottom ∪ solid gradient above) so the
   section — storefront browser included — tears along the rag,
   revealing the continuous cream of zone-light-2 (pulled up to
   underlap). v3.1: the contour shadow is a drop-shadow FILTER on #exhibit
   itself — filter applies to the already-masked result, so the shadow
   follows the clipped rag exactly (no separate understudy strip that
   could misalign and show a ghost rag below the edge).

   CLEARANCE: a section edge that RECEIVES teeth reserves ~tear-h of
   padding on that side so no rag point comes within ~40px of text —
   .tear-clear-top on the dark receivers, extra padding-bottom on the
   cream zones the up-teeth bite into. Sanctioned exception: teeth may
   bite IMAGERY (the storefront browser), never text.

   NOTEPAD-TOP: the ticker is the notepad's cardboard bar; a small
   dark gap (#zone-light-1 margin-top) shows below it, then the perf
   strip's micro-ragged BOTTOM edge is the torn top of the paper sheet.
   Each strip carries a unique turbulence seed so no two edges match.
   ============================================================ */
/* v3.1 SPACING SCHEMA — two tokens own every boundary's clearance. These are
   the FUTURE per-section knobs: when this page is split into true sections,
   each boundary's on/off tear + gap becomes a section property reading these.
   Keep each boundary's markup self-contained so that split stays cheap.
     --tear-gap-light : cream content  → rag edge (cream side of a boundary)
     --tear-gap-dark  : rag edge → first dark content (dark side)
   Measured to the rag's AVERAGE midline; the boundary paddings below subtract
   the fixed "rag overhang" (tear-h * (1 - rag-fraction) ≈ 74px) so the RENDERED
   distance equals the token. Cream-into-TEXT boundaries (zone-light-1 bottom)
   keep extra clearance so no tooth lands within ~40px of text. */
:root{--tear-h:112px;--tear-gap-light:64px;--tear-gap-dark:140px}
.tstrip{position:absolute;left:0;right:0;height:var(--tear-h);pointer-events:none;z-index:5;
  /* MUST match the body's paper-dark texture (dark zones are transparent to
     body). fixed attachment aligns the strip's texture with the body's. */
  background:var(--bg,#05070a) var(--we-paper-dark) center/cover;background-attachment:fixed;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-position:0 0;mask-position:0 0}

/* boundary 1 — notepad perforation: rag DOWN, opaque TOP. Child of the
   cream sheet; its dark opaque top continues the ticker gap, its micro-
   ragged bottom is the perforation. Overlaps 1px up to kill a hairline. */
.tstrip--perf{top:-1px;height:22px;
  filter:var(--tear-sh);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20120'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='-5%25'%20y='-50%25'%20width='110%25'%20height='200%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.04%200.02'%20numOctaves='3'%20seed='2'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='14'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-120,-30%201320,-30%201320,70%20-120,64'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20120'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='-5%25'%20y='-50%25'%20width='110%25'%20height='200%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.04%200.02'%20numOctaves='3'%20seed='2'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='14'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-120,-30%201320,-30%201320,70%20-120,64'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E")}

/* NAV bottom edge — same micro-perforation as the ticker's .tstrip--perf
   (rag DOWN, opaque TOP), hung just below the fixed nav so the dark-paper bar
   tears onto the dark hero. Dark-on-dark, so a slightly heavier shadow than the
   cream perf. 1px overlap up kills the hairline. Unique seed. */
.tstrip--nav{top:100%;height:24px;margin-top:-1px;
  filter:var(--tear-sh-strong);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20120'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='-5%25'%20y='-50%25'%20width='110%25'%20height='200%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.04%200.02'%20numOctaves='3'%20seed='31'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='14'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-120,-30%201320,-30%201320,70%20-120,64'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20120'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='-5%25'%20y='-50%25'%20width='110%25'%20height='200%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.04%200.02'%20numOctaves='3'%20seed='31'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='14'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-120,-30%201320,-30%201320,70%20-120,64'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E")}

/* boundary 2 & 4 — big tear at a CREAM zone's BOTTOM: rag UP into the
   cream above, opaque BOTTOM at the boundary (merges dark-on-dark into the
   dark zone that follows, which paints below it).
   v3.2 SYSTEM RULE: a tear strip MUST be a child of an UNMASKED zone. A
   masked element (mask-image / -webkit-mask) clips to its own border box,
   so a strip that overflows a masked parent is CLIPPED — its rag vanishes
   and the boundary reads as a clean straight line (this was the regression
   on #zone-dark-1, which is masked for the browser bite). So up2/up4 live
   at the BOTTOM of their (unmasked) cream zone: position:absolute; bottom:-1px
   (1px overlap kills the hairline). No transform — the .rv system would win
   over transform anyway; absolute bottom needs none. */
/* v3.1: shadow-on-cream rule — a rag's shadow falling on CREAM is soft
   (0 ±2px 3px .22); heavier reads as a gray ghost-tear on light paper. */
.tstrip--up2,.tstrip--up4{position:absolute;bottom:-1px;top:auto;transform:none;
  filter:var(--tear-sh-up)}
.tstrip--up2{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20120'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='-5%25'%20y='-50%25'%20width='110%25'%20height='200%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.015%200.005'%20numOctaves='4'%20seed='11'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='35'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-120,150%20-120,60%201320,18%201320,150'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20120'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='-5%25'%20y='-50%25'%20width='110%25'%20height='200%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.015%200.005'%20numOctaves='4'%20seed='11'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='35'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-120,150%20-120,60%201320,18%201320,150'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E")}
.tstrip--up4{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20120'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='-5%25'%20y='-50%25'%20width='110%25'%20height='200%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.015%200.005'%20numOctaves='4'%20seed='17'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='35'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-120,150%20-120,58%201320,26%201320,150'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20120'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='-5%25'%20y='-50%25'%20width='110%25'%20height='200%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.015%200.005'%20numOctaves='4'%20seed='17'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='35'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-120,150%20-120,58%201320,26%201320,150'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E")}

/* boundary 3 — VARIANT B browser bite. #exhibit's own bottom clips along the
   rag (SVG band at bottom ∪ opaque gradient above). v3.1: the drop-shadow is a
   FILTER on #exhibit — filter runs on the masked result, so the shadow hugs the
   clipped rag exactly. No understudy strip (was .tstrip--bite-shadow, deleted):
   a separate strip could never coincide with the mask contour and showed a
   ghost rag below the edge. filter also creates a containing block — the .anno
   layer is absolute (unaffected) and no fixed-position descendants live here. */
#exhibit{position:relative;z-index:1}
/* the tear treatment must live on the FULL-WIDTH zone wrapper, not the
   centered .wide section — a width-constrained box leaves the underlapping
   cream visible at its own straight edges in the page margins. The zone
   also MUST carry the dark bg itself (transparent-to-body would tear only
   the content, not the ground). */
#zone-dark-1{
  background:var(--bg,#05070a) var(--we-paper-dark) center/cover;
  filter:var(--tear-sh-strong);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20120'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='-5%25'%20y='-50%25'%20width='110%25'%20height='200%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.015%200.005'%20numOctaves='4'%20seed='23'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='40'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-120,-30%201320,-30%201320,72%20-120,66'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E"),linear-gradient(#000,#000);
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20120'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='-5%25'%20y='-50%25'%20width='110%25'%20height='200%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.015%200.005'%20numOctaves='4'%20seed='23'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='40'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-120,-30%201320,-30%201320,72%20-120,66'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E"),linear-gradient(#000,#000);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 120px,100% calc(100% - 119px);mask-size:100% 120px,100% calc(100% - 119px);
  -webkit-mask-position:bottom,top;mask-position:bottom,top}
/* zone-light-2 pulled up so its continuous cream underlaps #exhibit's
   torn bottom (revealed through the notches); padding-top re-clears the
   plays content. z-index:2 keeps it beneath the z-index:3 dark zone. */
#zone-light-2{margin-top:-120px;padding-top:168px}
/* pull the zone bottom up so the rag bites ~50px into the browser frame */
#exhibit{padding-bottom:0}
#exhibit .evidence{margin-bottom:-16px}

/* v3.1 clearance — driven by the two gap tokens. Dark receivers of an UP tear
   (boundaries 2 & 4) subtract the ~76px rag overhang so rag→dark-content lands
   on --tear-gap-dark. zone-light-2's bottom is a cream-into-CARD boundary
   (the up4 teeth bite the steal card, sanctioned) tuned to --tear-gap-light. */
.tear-clear-top{padding-top:calc(var(--tear-gap-dark) - var(--tear-h) * 0.66)}
.tear-clear-bottom{padding-bottom:calc(var(--tear-gap-dark) - var(--tear-h) * 0.66)}
/* zone-light-1 bottom is a cream-into-TEXT boundary (up2 teeth bite the .pull
   quote) — the ~40px-from-teeth rule needs more room than --tear-gap-light, so
   this keeps extra clearance on purpose (the one sanctioned overshoot). */
#zone-light-1{margin-top:14px;padding-bottom:var(--tear-h)}
/* cream-2 now ends with the up4 tear biting up toward the recap card —
   reserve a full tear-h so no tooth lands on the card (card-bite sanctioned
   but kept clear here for the recap's black slip). */
#zone-light-2{padding-bottom:var(--tear-h)}

@media(max-width:640px){
  :root{--tear-h:72px;--tear-gap-light:40px;--tear-gap-dark:90px}
  .tstrip--perf{height:16px}
  .tstrip--nav{height:18px}
  #zone-dark-1{-webkit-mask-size:100% 84px,100% calc(100% - 83px);mask-size:100% 84px,100% calc(100% - 83px)}
  #zone-light-2{margin-top:-84px;padding-top:120px}
}


/* ---- steal-this: copy-prompt CTA + modal ---- */
    .steal-cta{display:inline-block;margin-top:14px;padding:10px 15px 9px;border-radius:9px;border:1px solid color-mix(in srgb,var(--brand) 45%,transparent);background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--ink);font-size:.84rem;font-weight:650;letter-spacing:-.01em;transition:background .2s ease,border-color .2s ease,transform .2s ease;text-align:left}
    .steal-cta::before{content:"→ ";color:var(--brand-soft)}
    .steal-cta:hover{background:color-mix(in srgb,var(--brand) 18%,transparent);border-color:color-mix(in srgb,var(--brand) 70%,transparent);transform:translateY(-1px)}
    .steal-cta .sc-sub{display:block;margin-top:3px;font-family:var(--mono);font-size:.56rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
    .steal:hover .steal-cta{border-color:color-mix(in srgb,var(--brand) 60%,transparent)}

    .steal-modal{position:fixed;inset:0;z-index:2300;display:grid;place-items:center;padding:20px}
    .steal-modal[hidden]{display:none}
    .sm-backdrop{position:absolute;inset:0;background:rgba(3,5,8,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
    .sm-card{position:relative;width:min(480px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:30px 28px 22px;box-shadow:var(--shadow-1),0 0 0 1px color-mix(in srgb,var(--brand) 10%,transparent)}
    .js .sm-card{animation:smIn .32s cubic-bezier(.2,.8,.25,1)}
    @keyframes smIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
    @media(prefers-reduced-motion:reduce){.js .sm-card{animation:none}}
    .sm-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--dim);transition:color .18s ease,background .18s ease}
    .sm-x:hover{color:var(--ink);background:rgba(255,255,255,.06)}
    .sm-x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
    .sm-kick{font-family:var(--hand);font-weight:700;font-size:1.35rem;line-height:1;color:var(--cyan);margin:0 0 10px;transform:rotate(-1.4deg);transform-origin:left;display:inline-block}
    .sm-card h3{font-size:1.3rem;font-weight:670;color:var(--ink);letter-spacing:-.015em;line-height:1.2;margin:0 0 10px;text-wrap:balance}
    .sm-sub{font-size:.86rem;line-height:1.55;color:var(--soft);margin:0 0 20px}
    .sm-sub em{color:var(--ink);font-style:normal;font-weight:600}
    .sm-form{display:grid;gap:12px}
    .sm-field{display:grid;gap:6px}
    .sm-field span{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
    .sm-field input{width:100%;min-height:44px;padding:0 14px;border-radius:9px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font:inherit;font-size:.9rem;transition:border-color .18s ease,box-shadow .18s ease}
    .sm-field input::placeholder{color:var(--faint)}
    .sm-field input:focus{outline:none;border-color:color-mix(in srgb,var(--brand) 60%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}
    .sm-err{margin:0;font-size:.76rem;color:var(--orange);line-height:1.4}
    .sm-go{min-height:46px;margin-top:4px;border-radius:999px;background:#fff;color:#07101a;font-weight:700;font-size:.86rem;display:inline-flex;align-items:center;justify-content:center;transition:transform .2s ease,box-shadow .2s ease}
    .sm-go:hover{transform:translateY(-1px);box-shadow:0 16px 40px -22px rgba(255,255,255,.6)}
    .sm-done{display:grid;gap:12px}
    .sm-form[hidden],.sm-done[hidden],.sm-err[hidden]{display:none}
    .sm-copied{display:flex;align-items:center;gap:9px;margin:0;font-size:.95rem;font-weight:650;color:var(--green)}
    .sm-copied svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
    .sm-copied b{color:var(--ink);font-weight:650}
    .sm-paste{margin:0;font-size:.8rem;color:var(--dim)}
    .sm-open{display:grid;grid-template-columns:1fr 1fr;gap:9px}
    @media(max-width:420px){.sm-open{grid-template-columns:1fr}}
    .sm-open a{min-height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);font-size:.8rem;font-weight:620;transition:border-color .18s ease,background .18s ease}
    .sm-open a:hover{border-color:color-mix(in srgb,var(--brand) 60%,transparent);background:color-mix(in srgb,var(--brand) 10%,transparent)}
    .sm-next{margin:4px 0 0;font-size:.78rem;line-height:1.5;color:var(--soft);border-top:1px solid var(--line-soft);padding-top:14px}
    .sm-next a{color:var(--brand-soft);font-weight:620;border-bottom:1px solid color-mix(in srgb,var(--brand) 40%,transparent)}
    .sm-fine{margin:18px 0 0;font-family:var(--mono);font-size:.56rem;letter-spacing:.05em;color:var(--faint);line-height:1.6}
    body.sm-lock{overflow:hidden}

/* ============================================================
   PRINTED-PAPER LAYER v2 — Rhode teardown physical-artifact round
   ------------------------------------------------------------
   Everything the reader sees is a printed / cut / torn paper object.
   v2 refinements (owner critique round):

   TILED TEARS — torn edges are SEAMLESS REPEATING TILES, not one SVG
     stretched over the whole edge. Fixed physical tile (300px along the
     edge, 48px band) with feTurbulence stitchTiles='stitch' so the noise
     is periodic => the rag returns to the same coord at both tile ends
     (no repeat seam). mask-repeat repeat-x (horizontal, --tx1..4) or
     repeat-y (vertical, --tv-l1..3 / --tv-r1..3), mask-size FIXED px on
     the edge axis => rag DENSITY is identical on a 90px slip and a 1200px
     card. Variants assigned per class / nth-of-type for variety.
   TEAR-AMP — a torn side reserves --tear-amp of extra padding so no rag
     point ever eats content (rag amplitude ~ band/2).
   HALFTONE RAMP — the receipts ladder bar IS the gradient rendered as
     halftone: solid ink #42b1ff masked by (dot-grid INTERSECT left->right
     fade) so the dots shrink to nothing toward the left = a printed ink
     ramp, not a bar with dots on it.
   TWO-PIECE SPLIT — each play card + the recap are TWO black pieces
     (.pc-top / .pc-bottom) inside a transparent .pc wrapper, joined by a
     .pc-cut perforation. Hover the bottom piece => it translate/rotates
     down (NOT transform — the .rv reveal wins over transform), opening a
     cream gap; each piece has its own shadow so the split reads physical.
   CUT LINE — full-bleed dashed rule, small scissors (~14px) fully to one
     side of the line near the left end; no "CUT HERE" caption.
   TEXTURES — nano-banana generated: (image fills RETIRED — procedural layers above;
     edge-rider speck PNGs remain the only image textures)
     --we-tex-speck-1..4 photocopy flecks near outer edges. Wired as :root
     vars in theme.liquid (CDN relative-path gotcha => vars only).
   ============================================================ */
:root{
  --tx1:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%2048'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='300'%20height='48'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.02%200.052'%20numOctaves='3'%20seed='131'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='19'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-4,-12%20304,-12%20304,24%20-4,24'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  --tx2:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%2048'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='300'%20height='48'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.017%200.045'%20numOctaves='3'%20seed='137'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='20'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-4,-12%20304,-12%20304,24%20-4,24'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  --tx3:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%2048'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='300'%20height='48'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.025%200.05'%20numOctaves='3'%20seed='149'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='18'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-4,-12%20304,-12%20304,24%20-4,24'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  --tx4:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%2048'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='300'%20height='48'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.019%200.06'%20numOctaves='3'%20seed='151'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='19'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-4,-12%20304,-12%20304,24%20-4,24'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  --tv-r1:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%20300'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='48'%20height='300'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.052%200.02'%20numOctaves='3'%20seed='211'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='19'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-12,-4%2024,-4%2024,304%20-12,304'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  --tv-r2:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%20300'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='48'%20height='300'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.045%200.017'%20numOctaves='3'%20seed='223'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='20'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-12,-4%2024,-4%2024,304%20-12,304'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  --tv-r3:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%20300'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='48'%20height='300'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.05%200.025'%20numOctaves='3'%20seed='227'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='18'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-12,-4%2024,-4%2024,304%20-12,304'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  --tv-l1:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%20300'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='48'%20height='300'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.052%200.02'%20numOctaves='3'%20seed='251'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='19'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='24,-4%2060,-4%2060,304%2024,304'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  --tv-l2:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%20300'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='48'%20height='300'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.045%200.017'%20numOctaves='3'%20seed='263'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='20'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='24,-4%2060,-4%2060,304%2024,304'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  --tv-l3:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%20300'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='48'%20height='300'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.05%200.025'%20numOctaves='3'%20seed='267'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='18'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='24,-4%2060,-4%2060,304%2024,304'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  --tear-amp:26px;
  --scissors-sm:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='34'%20height='16'%20viewBox='0%200%2034%2016'%3E%3Cg%20fill='none'%20stroke='%23fff'%20stroke-width='1.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='5'%20cy='5'%20r='2.6'/%3E%3Ccircle%20cx='5'%20cy='11'%20r='2.6'/%3E%3Cpath%20d='M7%206.4%20L20%2011%20M7%209.6%20L20%205'/%3E%3Cpath%20d='M20%208%20L30%208'/%3E%3C/g%3E%3C/svg%3E");
  --paint-underline-1:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%2016'%20preserveAspectRatio='none'%3E%3Cpath%20d='M5%2010%20C64%204,124%2013,184%208%20C236%204,286%2012,315%208'%20fill='none'%20stroke='%23fff'%20stroke-width='5'%20stroke-linecap='round'/%3E%3C/svg%3E");
  --paint-underline:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%2018'%20preserveAspectRatio='none'%3E%3Cpath%20d='M4%2011%20C60%205,120%2014,180%209%20C230%205,280%2013,316%208'%20fill='none'%20stroke='%23fff'%20stroke-width='5.5'%20stroke-linecap='round'/%3E%3Cpath%20d='M10%2015%20C70%2011,150%2017,230%2013%20C270%2011,300%2015,312%2013'%20fill='none'%20stroke='%23fff'%20stroke-width='2.5'%20stroke-linecap='round'%20opacity='0.55'/%3E%3C/svg%3E");
}

/* ---- 1. HERO float chips -> white torn-paper slips, one torn side ---- */
/* .fc-sh wrapper carries the position + shadow (mask on .float-chip would clip
   its own drop-shadow); the chip itself sits static inside. */
.fc-sh{position:absolute;z-index:3}
.fc-sh>.float-chip{position:static;z-index:auto}
.float-chip{padding:11px 16px 12px;border:0;border-radius:0;
  background:var(--pp-speck-w) var(--pp-sp,0 0)/var(--pp-s-size) repeat,var(--pp-grain-w) var(--pp-gp,0 0)/var(--pp-g-size) repeat #fff;background-blend-mode:multiply,multiply;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  -webkit-mask-repeat:repeat-y,no-repeat;mask-repeat:repeat-y,no-repeat;
  -webkit-mask-size:48px 300px,calc(100% - 46px) 100%;mask-size:48px 300px,calc(100% - 46px) 100%}
.float-chip .fc-n{font-size:1.9rem;color:#141109;line-height:.94}
.float-chip .fc-n i{color:var(--blue)}
.float-chip .fc-l{color:#4a4234;font-size:.6rem;margin-top:3px}
.fc-1{rotate:-2deg;padding-left:calc(16px + var(--tear-amp));
  -webkit-mask-image:var(--tv-l1),linear-gradient(#000,#000);mask-image:var(--tv-l1),linear-gradient(#000,#000);
  -webkit-mask-position:left top,right;mask-position:left top,right}
.fc-2{rotate:1.6deg;padding-right:calc(16px + var(--tear-amp));
  -webkit-mask-image:var(--tv-r2),linear-gradient(#000,#000);mask-image:var(--tv-r2),linear-gradient(#000,#000);
  -webkit-mask-position:right top,left;mask-position:right top,left}
.fc-3{rotate:-1.2deg;padding-right:calc(16px + var(--tear-amp));
  -webkit-mask-image:var(--tv-r3),linear-gradient(#000,#000);mask-image:var(--tv-r3),linear-gradient(#000,#000);
  -webkit-mask-position:right top,left;mask-position:right top,left}

/* ---- 2. STATBAR -> one long white torn-paper strip, torn short ends ---- */
/* PROCEDURAL PAPER (pilot: statbar). Two generated SVG layers over white:
   fine clamped grain + hard-thresholded sparse specks. Driven live by the
   #pxTweak panel via --px-* vars; bake final values once dialed. */
/* unmasked wrappers cast the slip shadow — a mask on the slip clips its own
   drop-shadow to the slip box, so the shadow must live on the wrapper. */
.slip-sh{filter:var(--slip-shadow)}       /* Tier 2 — paper slips */
.card-sh{filter:var(--shadow-1-d)}        /* Tier 1 — solid cards (masked) */
.tear-sh-w{filter:var(--tear-slip)}       /* Tier 3 — torn paper strips */
.receipt-row .slip-sh,.receipt-row .card-sh,.receipt-row .tear-sh-w{display:flex}
.receipt-row .slip-sh>.receipt,.receipt-row .card-sh>.receipt,.receipt-row .tear-sh-w>.receipt{flex:1;min-width:0}
.statbar{gap:0;
  background:var(--pp-speck-w) var(--pp-sp,0 0)/var(--pp-s-size) repeat,var(--pp-grain-w) var(--pp-gp,0 0)/var(--pp-g-size) repeat #fff;background-blend-mode:multiply,multiply;border:0;border-radius:0;overflow:visible;box-shadow:none;position:relative;
  rotate:-.4deg;padding-inline:var(--tear-amp);
  -webkit-mask-image:var(--tv-l2),var(--tv-r1),linear-gradient(#000,#000);
  mask-image:var(--tv-l2),var(--tv-r1),linear-gradient(#000,#000);
  -webkit-mask-repeat:repeat-y,repeat-y,no-repeat;mask-repeat:repeat-y,repeat-y,no-repeat;
  -webkit-mask-size:48px 300px,48px 300px,calc(100% - 92px) 100%;mask-size:48px 300px,48px 300px,calc(100% - 92px) 100%;
  -webkit-mask-position:left top,right top,center;mask-position:left top,right top,center}
.statbar .stat{background:none;padding:18px 20px;position:relative}
.statbar .stat + .stat::before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;background:rgba(30,22,10,.16)}
.statbar .stat .n{color:#141109;font-size:clamp(1.45rem,2.7vw,1.85rem)}
.statbar .stat .n .u{color:var(--blue)}
.statbar .stat .l{color:#4a4234;font-size:.6rem}

/* ---- 3. RECEIPTS -> white card, rounded top, torn bottom; halftone-ramp
        bars; black sub-slips hang IN FRONT of the torn edge (z-order) ---- */
.zone--light .receipts{background:var(--pp-speck-w) var(--pp-sp,0 0)/var(--pp-s-size) repeat,var(--pp-grain-w) var(--pp-gp,0 0)/var(--pp-g-size) repeat #fff;background-blend-mode:multiply,multiply;border:0;border-radius:11px 11px 0 0;
  padding:26px 28px calc(40px + var(--tear-amp));position:relative;z-index:1;box-shadow:none;
  -webkit-mask-image:var(--tx1),linear-gradient(#000,#000);mask-image:var(--tx1),linear-gradient(#000,#000);
  -webkit-mask-repeat:repeat-x,no-repeat;mask-repeat:repeat-x,no-repeat;
  -webkit-mask-size:300px 48px,100% calc(100% - 46px);mask-size:300px 48px,100% calc(100% - 46px);
  -webkit-mask-position:bottom left,top;mask-position:bottom left,top}
.zone--light .receipts-head h3{color:#141109}
/* halftone printed-ink RAMP: solid ink under a dot screen that dissolves
   toward the left through the fade (dot-grid INTERSECT left->right fade) */
/* TRUE HALFTONE bars: JS (halftoneBars in teardown-rhode.js) fills each .lb
   with inline <circle> grids — dot RADIUS ramps along the bar (solid ink at
   the right, pinpricks at the left). No masks, no alpha — pure pointillism. */
.zone--light .lrow .lb,.zone--light .lrow.hot .lb{background:none;box-shadow:none;border-radius:7px;overflow:hidden;height:14px}
.zone--light .lrow .lb svg{display:block;width:100%;height:100%}
.zone--light .lrow .ln{color:#2a2318}
.zone--light .lrow .lv{color:#141109}

/* black receipt sub-slips — IN FRONT of the card's torn bottom (z-index:3),
   printed-then-cut, each torn on one edge */
.receipt-row{grid-template-columns:repeat(3,1fr);gap:15px;margin-top:calc(-34px - var(--tear-amp));position:relative;z-index:3}
.zone--light .receipt-row .receipt{background:var(--pp-speck-b) var(--pp-sp,0 0)/var(--pp-sb-size,var(--pp-s-size)) repeat,var(--pp-grain-b) var(--pp-gp,0 0)/var(--pp-gb-size,var(--pp-g-size)) repeat #0c0d10;background-blend-mode:screen,screen;border:0;border-radius:0;
  padding:15px 17px 16px;color:#f7f8fa;box-shadow:none}
.zone--light .receipt-row .receipt b{color:#fff;font-size:1.02rem}
.zone--light .receipt-row .receipt span{color:#e6e9ee;margin-top:4px}
.zone--light .receipt-row .receipt:hover{border:0;box-shadow:none;translate:0 -3px}
.receipt-row .tear-sh-w:nth-child(1) .receipt{rotate:-1.6deg;padding-right:calc(17px + var(--tear-amp));
  -webkit-mask-image:var(--tv-r1),linear-gradient(#000,#000);mask-image:var(--tv-r1),linear-gradient(#000,#000);
  -webkit-mask-repeat:repeat-y,no-repeat;mask-repeat:repeat-y,no-repeat;
  -webkit-mask-size:48px 300px,calc(100% - 46px) 100%;mask-size:48px 300px,calc(100% - 46px) 100%;
  -webkit-mask-position:right top,left;mask-position:right top,left;--pp-sp:120px 70px;--pp-gp:40px 150px}
.receipt-row .tear-sh-w:nth-child(2) .receipt{rotate:1.1deg;padding-left:calc(17px + var(--tear-amp));
  -webkit-mask-image:var(--tv-l3),linear-gradient(#000,#000);mask-image:var(--tv-l3),linear-gradient(#000,#000);
  -webkit-mask-repeat:repeat-y,no-repeat;mask-repeat:repeat-y,no-repeat;
  -webkit-mask-size:48px 300px,calc(100% - 46px) 100%;mask-size:48px 300px,calc(100% - 46px) 100%;
  -webkit-mask-position:left top,right;mask-position:left top,right;--pp-sp:200px 130px;--pp-gp:150px 30px}
.receipt-row .tear-sh-w:nth-child(3) .receipt{rotate:-.8deg;padding-bottom:calc(16px + var(--tear-amp));
  -webkit-mask-image:var(--tx3),linear-gradient(#000,#000);mask-image:var(--tx3),linear-gradient(#000,#000);
  -webkit-mask-repeat:repeat-x,no-repeat;mask-repeat:repeat-x,no-repeat;
  -webkit-mask-size:300px 48px,100% calc(100% - 46px);mask-size:300px 48px,100% calc(100% - 46px);
  -webkit-mask-position:bottom left,top;mask-position:bottom left,top}

/* ---- 4. STOREFRONT .anno callouts -> white torn-paper slips (desktop) ---- */
@media(min-width:760px){
  /* shadow cast from the unmasked .anno wrapper — a mask on .card clips its own
     drop-shadow to the card box, so the slip shadow must live on the wrapper. */
  .anno{filter:var(--slip-shadow)}
  .anno .card{background:var(--pp-speck-w) var(--pp-sp,0 0)/var(--pp-s-size) repeat,var(--pp-grain-w) var(--pp-gp,0 0)/var(--pp-g-size) repeat #fff;background-blend-mode:multiply,multiply;border:0;border-radius:0;
    backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;
    padding:11px 13px 12px 11px;grid-template-columns:22px 1fr;gap:10px;
    -webkit-mask-repeat:repeat-y,no-repeat;mask-repeat:repeat-y,no-repeat;
    -webkit-mask-size:48px 300px,calc(100% - 46px) 100%;mask-size:48px 300px,calc(100% - 46px) 100%}
  .anno b{color:#141109;font-size:.85rem}
  .anno span{color:#3a3226;font-size:.74rem}
  .anno i{background:#141109;border:0;color:#fff;width:22px;height:22px}
  .anno:hover,.anno:focus-within{filter:var(--slip-shadow-hover)}
  .anno:hover .card,.anno:focus-within .card{background:var(--pp-speck-w) var(--pp-sp,0 0)/var(--pp-s-size) repeat,var(--pp-grain-w) var(--pp-gp,0 0)/var(--pp-g-size) repeat #fff;background-blend-mode:multiply,multiply;border:0}
  .anno.c1 .card,.anno.c3 .card{padding-left:calc(11px + var(--tear-amp));
    -webkit-mask-image:var(--tv-l1),linear-gradient(#000,#000);mask-image:var(--tv-l1),linear-gradient(#000,#000);
    -webkit-mask-position:left top,right;mask-position:left top,right}
  .anno.c2 .card{padding-right:calc(13px + var(--tear-amp));
    -webkit-mask-image:var(--tv-r2),linear-gradient(#000,#000);mask-image:var(--tv-r2),linear-gradient(#000,#000);
    -webkit-mask-position:right top,left;mask-position:right top,left}
}

/* ---- shared: cut-line perforation + small scissors (plays + recap) ---- */
.zone--light .pc-cut{position:relative;height:0;background:none;z-index:2}
.zone--light .pc-cut::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;transform:translateY(-1px);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 9px,transparent 9px 17px)}
.zone--light .pc-cut .pc-sc{position:absolute;left:22px;top:0;transform:translateY(calc(-50% - 12px));
  width:30px;height:14px;background:var(--scissors-sm) left center/28px 14px no-repeat}

/* ---- 5. PLAYS -> two-piece black split card, number in the cream margin ---- */
.zone--light #plays .play{grid-template-columns:92px 1fr;gap:0 8px;border-top:0;padding:24px 0}
.zone--light #plays .play::after{display:none}
.zone--light #plays .play .pn{position:relative;text-align:right;padding-right:2px;align-self:start;padding-top:2px}
.zone--light #plays .play .pn b{font-family:var(--hand);font-size:4.7rem;color:#141109;line-height:.8;
  display:block;position:relative;z-index:1;transform:rotate(-2deg)}
.zone--light #plays .play .pn small{color:var(--brand-ink);display:block;margin-bottom:2px}
/* hand-drawn blue accent (painted underline, mask-recolor) under the numeral */
.zone--light #plays .play .pn::after{content:"";position:absolute;right:0;bottom:1px;width:74px;height:20px;z-index:0;
  background:#42b1ff;-webkit-mask:var(--paint-underline) right center/contain no-repeat;mask:var(--paint-underline) right center/contain no-repeat;
  opacity:.92;pointer-events:none;transform:rotate(-1.5deg)}
/* the two black pieces */
.zone--light #plays .pc-top,.zone--light #plays .pc-bottom{
  --ink:#f7f8fa;--soft:#f2f4f7;--dim:#c9ced6;--faint:#aab2bd;color:#f2f4f7;position:relative}
.zone--light #plays .pc-top{background:var(--pp-speck-b) var(--pp-sp,0 0)/var(--pp-sb-size,var(--pp-s-size)) repeat,var(--pp-grain-b) var(--pp-gp,0 0)/var(--pp-gb-size,var(--pp-g-size)) repeat #0c0d10;background-blend-mode:screen,screen;
  border-radius:6px 6px 0 0;padding:24px 28px 26px;
  box-shadow:var(--shadow-1)}
.zone--light #plays .pc-bottom{background:var(--pp-speck-b) var(--pp-sp,0 0)/var(--pp-sb-size,var(--pp-s-size)) repeat,var(--pp-grain-b) var(--pp-gp,0 0)/var(--pp-gb-size,var(--pp-g-size)) repeat #0c0d10;background-blend-mode:screen,screen;--pp-sp:90px 40px;--pp-gp:60px 110px;
  border:0;border-radius:0 0 6px 6px;margin-top:0;padding:24px 28px 22px;transform:none;
  box-shadow:var(--shadow-1);
  transition:translate .35s cubic-bezier(.2,.7,.2,1),rotate .35s cubic-bezier(.2,.7,.2,1)}
.zone--light #plays .play:nth-of-type(3n+2) .pc-top{--pp-sp:120px 70px;--pp-gp:40px 150px}
.zone--light #plays .play:nth-of-type(3n+2) .pc-bottom,.zone--light #plays .play:nth-of-type(3n+2) .pc-cut{--pp-sp:200px 130px;--pp-gp:150px 30px}
.zone--light #plays .play:nth-of-type(3n) .pc-top{--pp-sp:200px 130px;--pp-gp:150px 30px}
.zone--light #plays .play:nth-of-type(3n) .pc-bottom,.zone--light #plays .play:nth-of-type(3n) .pc-cut{--pp-sp:30px 210px;--pp-gp:220px 80px}
.zone--light #plays .pc-top h3{color:#fff}
.zone--light #plays .pc-top p{color:#e7eaef}
.zone--light #plays .pc-top strong,.zone--light #plays .pc-top em{color:#fff}
.zone--light #plays .pc-top .pm-img{background:#15171c;border:0;border-radius:4px}
.zone--light #plays .pc-top .pm-cap{color:#c9ced6;border-top-color:rgba(255,255,255,.12)}
.zone--light #plays .pc-top .pm-cap b{color:#fff}
/* steal block == the bottom piece */
.zone--light #plays .steal.pc-bottom{background:var(--pp-speck-b) var(--pp-sp,0 0)/var(--pp-sb-size,var(--pp-s-size)) repeat,var(--pp-grain-b) var(--pp-gp,0 0)/var(--pp-gb-size,var(--pp-g-size)) repeat #0c0d10;background-blend-mode:screen,screen}
.zone--light #plays .steal .tag{color:#42b1ff;text-shadow:none}
.zone--light #plays .steal p{color:#e7eaef}
.zone--light #plays .steal p em{color:#fff}
/* hover the bottom piece: it tears down + tilts, opening a cream gap */
.zone--light #plays .pc-bottom:hover{background-color:#0c0d10;transform:none;translate:0 16px;rotate:.8deg;
  box-shadow:var(--shadow-1-hover)}
@media(prefers-reduced-motion:reduce){.zone--light #plays .pc-bottom{transition:none}.zone--light #plays .pc-bottom:hover{translate:0;rotate:0}}
/* Copy prompt button on black card — white outline, fill on hover (markup untouched) */
.zone--light #plays .steal-cta{background:transparent;border:1.5px solid rgba(255,255,255,.6);color:#fff}
.zone--light #plays .steal-cta::before{color:#42b1ff}
.zone--light #plays .steal-cta .sc-sub{color:#c2c8d2}
.zone--light #plays .steal:hover .steal-cta{border-color:rgba(255,255,255,.85)}
.zone--light #plays .steal-cta:hover{background:#fff;border-color:#fff;color:#0c0d10;transform:translateY(-1px)}
.zone--light #plays .steal-cta:hover::before{color:#1663a0}
.zone--light #plays .steal-cta:hover .sc-sub{color:#4a4a4a}
@media(max-width:560px){
  .zone--light #plays .play{grid-template-columns:1fr;gap:6px}
  .zone--light #plays .play .pn{grid-row:auto;display:flex;align-items:baseline;gap:9px;text-align:left}
  .zone--light #plays .play .pn b{font-size:2.4rem}
  .zone--light #plays .play .pn::after{display:none}
}

/* ---- 6. FINEPRINT -> printed on the cream; black hanging kicker, one
        ORANGE painted underline, no arrow ---- */
.zone--light #fineprint .risk{background:none;border:0;padding:0;box-shadow:none;position:relative}
.zone--light #fineprint .hand-note.warn{color:#141109;display:block;margin-left:-84px;margin-bottom:14px}
.zone--light #fineprint h3{color:#141109;position:relative;display:inline-block;padding-bottom:14px;margin-bottom:8px}
.zone--light #fineprint h3::after{content:"";position:absolute;left:0;right:0;bottom:0;height:15px;
  background:#ff9474;-webkit-mask:var(--paint-underline-1) left bottom/100% 14px no-repeat;mask:var(--paint-underline-1) left bottom/100% 14px no-repeat}
.zone--light #fineprint .risk>p:last-child{color:#2a2318;max-width:62ch}
.zone--light #fineprint .risk::after{display:none}
@media(max-width:920px){.zone--light #fineprint .hand-note.warn{margin-left:0}}

/* ---- 7. RECAP -> two-piece black split: header/share on top, cut line,
        then the infographic (full-width flush) as the bottom piece ---- */
.zone--light .recap,.zone--light .recap--sheet{
  --ink:#f7f8fa;--soft:#f2f4f7;--dim:#c9ced6;
  background:none;border:0;border-radius:0;padding:0;position:relative;box-shadow:none}
.zone--light .recap .pc-top{background:var(--pp-speck-b) var(--pp-sp,0 0)/var(--pp-sb-size,var(--pp-s-size)) repeat,var(--pp-grain-b) var(--pp-gp,0 0)/var(--pp-gb-size,var(--pp-g-size)) repeat #0c0d10;background-blend-mode:screen,screen;
  border-radius:6px 6px 0 0;padding:30px 32px 26px;
  box-shadow:var(--shadow-1)}
.zone--light .recap h2{color:#fff;margin:2px 0 18px}
.zone--light .recap .hand-note{color:#42b1ff}
.zone--light .recap-stamp{color:#42b1ff;border-color:rgba(66,177,255,.5)}
.zone--light .recap-foot{border-top:0;padding-top:0;margin-top:20px;gap:11px}
.zone--light .recap-foot .rf-label{color:#c9ced6}
.zone--light .recap .share-btn{display:inline-flex;align-items:center;gap:8px;
  background:transparent;border:1.5px solid rgba(255,255,255,.55);color:#fff;
  border-radius:4px;padding:10px 16px;font-size:.72rem;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}
.zone--light .recap .share-btn:hover{background:#fff;border-color:#fff;color:#0c0d10;transform:translateY(-1px)}
.zone--light .recap .share-btn.copied{color:#0c0d10;background:#6ce1ad;border-color:#6ce1ad}
.zone--light .recap .share-btn .sh-ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.zone--light .recap .share-btn .sh-ic.sh-fill{fill:currentColor;stroke:none}
/* the infographic is the bottom piece — full-width flush, no rest tilt */
.zone--light .recap .recap-sheet.pc-bottom{margin:0;padding:0;border-radius:0 0 6px 6px;overflow:hidden;
  background:var(--pp-speck-b) var(--pp-sp,0 0)/var(--pp-sb-size,var(--pp-s-size)) repeat,var(--pp-grain-b) var(--pp-gp,0 0)/var(--pp-gb-size,var(--pp-g-size)) repeat #0c0d10;background-blend-mode:screen,screen;--pp-sp:90px 40px;--pp-gp:60px 110px;transform:none;
  box-shadow:var(--shadow-1);
  transition:translate .35s cubic-bezier(.2,.7,.2,1),rotate .35s cubic-bezier(.2,.7,.2,1)}
.zone--light .recap .recap-sheet.pc-bottom a{display:block;transform:none;transition:none}
.zone--light .recap .recap-sheet.pc-bottom a:hover{transform:none}
.zone--light .recap .recap-sheet.pc-bottom img{width:100%;height:auto;border-radius:0;border:0;box-shadow:none}
.zone--light .recap .recap-sheet.pc-bottom:hover{translate:0 16px;rotate:.6deg;box-shadow:var(--shadow-1-hover)}
@media(prefers-reduced-motion:reduce){.zone--light .recap .recap-sheet.pc-bottom{transition:none}.zone--light .recap .recap-sheet.pc-bottom:hover{translate:0;rotate:0}}

/* ---- 5. PHOTOCOPY SPECKLE — faint toner flecks in the OUTER-EDGE whitespace
        of the white/cream paper (black flecks read on light only). Low-opacity,
        kept in corners off the text; pseudo is clipped by the slip's torn mask
        so flecks stay on the paper. Concentrated clusters (speck-1/4) only. */
/* Speck deployment: clusters RIDE the paper edges — centered ON the edge so
   roughly half the cluster is cropped by the artifact's border/mask, like
   real photocopy edge grime. One or two per white artifact, varied assets
   + edges + flips per element. Opacity ~.3, multiply. */
.statbar::after{content:"";position:absolute;pointer-events:none;z-index:0;left:9%;bottom:-38px;
  width:120px;height:96px;background:var(--we-tex-speck-1) center/contain no-repeat;opacity:.3;mix-blend-mode:multiply}
.statbar::before{content:"";position:absolute;pointer-events:none;z-index:0;right:4%;top:-34px;
  width:104px;height:84px;background:var(--we-tex-speck-6) center/contain no-repeat;opacity:.28;mix-blend-mode:multiply;transform:scaleX(-1)}
/* hero float slips — one edge-rider each, different asset/edge/flip */
.float-chip::after{content:"";position:absolute;pointer-events:none;z-index:0;
  width:96px;height:80px;background:var(--sp,var(--we-tex-speck-5)) center/contain no-repeat;opacity:.3;mix-blend-mode:multiply}
.fc-1::after{--sp:var(--we-tex-speck-5);left:-44px;top:22%}
.fc-2::after{--sp:var(--we-tex-speck-2);right:-40px;bottom:-30px;transform:rotate(120deg)}
.fc-3::after{--sp:var(--we-tex-speck-6);left:14%;top:-32px;transform:scaleY(-1)}
/* receipts card — two riders on the big white sheet */
.zone--light .receipts::before{content:"";position:absolute;pointer-events:none;z-index:0;right:-52px;top:16%;
  width:128px;height:104px;background:var(--we-tex-speck-5) center/contain no-repeat;opacity:.26;mix-blend-mode:multiply;transform:rotate(90deg)}
.zone--light .receipts::after{content:"";position:absolute;pointer-events:none;z-index:0;left:-48px;bottom:24%;
  width:110px;height:90px;background:var(--we-tex-speck-7) center/contain no-repeat;opacity:.3;mix-blend-mode:multiply}
/* storefront callout slips */
.anno.c1 .card::after{content:"";position:absolute;pointer-events:none;z-index:0;left:-38px;bottom:-26px;
  width:88px;height:72px;background:var(--we-tex-speck-1) center/contain no-repeat;opacity:.28;mix-blend-mode:multiply;transform:rotate(45deg)}
.anno.c2 .card::after{content:"";position:absolute;pointer-events:none;z-index:0;right:-36px;top:-24px;
  width:84px;height:70px;background:var(--we-tex-speck-6) center/contain no-repeat;opacity:.26;mix-blend-mode:multiply}
.anno.c3 .card::after{content:"";position:absolute;pointer-events:none;z-index:0;left:22%;bottom:-30px;
  width:92px;height:76px;background:var(--we-tex-speck-2) center/contain no-repeat;opacity:.28;mix-blend-mode:multiply;transform:scaleX(-1)}

/* mobile: single-column stack for the black receipt sub-slips */
@media(max-width:640px){.receipt-row{grid-template-columns:1fr;gap:16px;margin-top:calc(-30px - var(--tear-amp))}}

/* ============================================================
   DOLLAR SHAVE CLUB (net-new): set-wide harmonization overrides,
   appended after the shared We-Commerce brand layer (which stays
   byte-identical to teardown-rhode.css). Same two cross-clone fixes
   applied uniformly to all teardowns.
   ============================================================ */

/* ---- HOUSE RULE — cream surfaces only: brand-blue TEXT that fails AA on
        cream renders as var(--ink), never darkened blue. --ink is dark on
        the cream zones and light inside the dark photocopy cards, so the
        same rule reads correctly on both. Graphical brand fills (bars,
        chart line/area, dots, float chips) and the blue accents on the dark
        cards keep the blue. The oversized decorative play numerals (.pn b)
        keep the shared darkened-blue treatment — flagged for the lead. ---- */
.zone--light .k,
.zone--light .play .pn small{color:var(--ink)}
.zone--light #plays .play .pn small{color:var(--ink)}

/* current teardown in the nav dropdown — dark nav panel, so brand-blue
   on dark reads high-contrast. Matches medicube's .dd-item.now treatment. */
.dd-item.now{background:color-mix(in srgb,var(--brand) 10%,transparent)}
.dd-item.now .tt{color:var(--brand-soft)}
.dd-item.now .ic{border-color:color-mix(in srgb,var(--brand) 60%,transparent)}
.zone--light{--brand-ink:var(--ink)}
.zone--light .play .pn b{color:var(--ink)}
.zone--light .pull{border-left-color:var(--ink)}

.js .we-imgload{filter:blur(18px);opacity:.28;
  transition:filter .6s cubic-bezier(.2,.65,.25,1),opacity .5s ease,transform .55s cubic-bezier(.33,.12,.2,1)}
.js .we-imgload.is-loaded{filter:blur(0);opacity:1}
@media(prefers-reduced-motion:reduce){
  .js .we-imgload{filter:none;opacity:1;transition:none}
}

.js .hero-bg-img{--hz-blur:30px;opacity:.2;transform:scale(1.09);
  transition:filter .85s cubic-bezier(.2,.65,.25,1),
             transform .95s cubic-bezier(.2,.65,.25,1),
             opacity .65s ease}
.js .hero-bg.is-loaded .hero-bg-img{--hz-blur:0px;opacity:1;
  transform:scale(var(--hz-scale,1.03))}
@media(prefers-reduced-motion:reduce){
  .js .hero-bg-img{--hz-blur:0px;opacity:1;transform:scale(var(--hz-scale,1.03));transition:none}
}

.receipt:hover,.rung:hover,.day:hover{border-color:var(--line);
  box-shadow:0 18px 40px -26px rgba(var(--sh-rgb),.55)}
.hook-card:hover{box-shadow:0 38px 82px -44px rgba(0,0,0,.75)}
.zone--light .receipt:hover{border-color:var(--line);
  box-shadow:0 18px 40px -26px rgba(30,22,10,.4)}
.zone--light .receipt-row .receipt:hover{box-shadow:none;border:0}

.footer{border-top:none;margin-top:0;
  padding:calc(var(--tear-h) * .55 + 10px) 0 60px;
  background-color:var(--bg);background-image:var(--we-paper-dark);
  background-size:cover;background-position:center;background-attachment:fixed}

@media(min-width:760px){.browser-shot{aspect-ratio:var(--shot-ar,48/55)}}

/* CORRECTION 1: unscoped, this outranks the shared @media(max-width:759px)
   unstack (same specificity, later in the file) and pins phone callouts to a
   ~180px ribbon. Appended blocks land after the shared layer, so a bare
   declaration overrides the shared mobile rules too — always match the scope
   of the rule you are extending. */
@media(min-width:760px){
  .anno{width:clamp(180px,22vw,262px)}
}
/* CORRECTION 7: the ~120px rag eats type at the bottom of the capture, and
   `margin-bottom` on `.evidence` does NOTHING — it collapses out through the
   section and the zone. All three F2 captures are text-dense at the bottom
   (DSC's SUBSCRIBE row, Inno Supps' doctor copy, Lemme's SHOP NOW buttons),
   so clear the rag with padding on the SECTION, never margin on the child. */
#exhibit{padding-bottom:126px}
#exhibit .evidence{margin-bottom:0}

.hook-card{display:flex;flex-direction:column;background:#0f1116}
.hook-card img{aspect-ratio:9/12}
.hook-card figcaption{position:static;left:auto;right:auto;bottom:auto;
  padding:12px 13px 13px;border-radius:0;background:none;border:0;
  border-top:1px solid var(--line-soft);
  backdrop-filter:none;-webkit-backdrop-filter:none}
.hook-card figcaption b{font-size:.74rem}

.we-shot{position:relative;display:block;margin:0;border-radius:5px;
  overflow:hidden;background:#fff;box-shadow:var(--shadow-1)}
.we-shot img{display:block;width:100%;height:auto}
.we-cap{font-family:var(--mono);font-size:.62rem;color:var(--dim);
  line-height:1.6;margin-top:12px;max-width:66ch}
@media(max-width:700px){
  .we-shot{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .we-shot img{min-width:var(--shot-min,0px)}
}

/* ============================================================
   PER-PAGE — DOLLAR SHAVE CLUB
   ============================================================ */

/* ---- P2 · CHART: halftone fill + labels straddling the tear ---
   2a. The area fill was a linearGradient from rgba(66,177,255,.28)
   to transparent, plus a color-mix alpha wash on cream — both
   OPACITY ramps, which gotcha 17 and the halftone-fade-fills skill
   reject outright: tone is carried by dot SIZE, never by
   transparency. It is now a dot-size ramp painted by the page JS
   into <g class="halftone">, clipped to the area path. The ink is
   a single solid #42b1ff with zero alpha anywhere. The opacity
   below is the ENTRANCE animation only — it replaces the identical
   one that used to sit on .area. .area survives with fill:none
   under .js as the geometry source for the clip, and keeps the old
   wash as the no-JS fallback. */
.js .chart .area{fill:none}
.chart .halftone{fill:#42b1ff}
.js .chart .halftone{opacity:0;transition:opacity .8s ease .55s}
.js .receipts.in .chart .halftone{opacity:1}
@media(prefers-reduced-motion:reduce){
  .js .chart .halftone{opacity:1;transition:none}
}
/* 2b. The value labels sat clear above the plot line and covered
   the chart behind them. Their vertical centre now sits ON the
   line, so half of each label prints over ink and half over paper
   — the relationship a torn edge has with anything crossing it.
   Half the label lands on solid ink, so it needs a hairline paper
   halo to stay legible without going grey. (Baked x/y in the
   markup are the no-JS fallback; the JS recomputes y from the
   polyline.) */
.zone--light .chart .dlab{fill:#141109;paint-order:stroke;
  stroke:rgba(255,255,255,.72);stroke-width:2.6px;stroke-linejoin:round}
/* 2c. The three black receipt slips are pulled up 60px and were
   landing on the chart's year labels. Reserve their lane rather
   than moving the slips. */
.zone--light .receipts .chart-wrap{padding-bottom:58px}

/* ---- P8 · this capture is 2880x3300 --------------------------- */
.browser-shot{--shot-ar:48/55}

/* ---- THE $4,500 VIDEO IS THE EVIDENCE ------------------------
   Play 01 is "lead with one unforgettable piece of content" and it
   was illustrated with a product photo of razor cartridges — the
   one thing on this page that is NOT the content in question. The
   actual 2012 launch video now sits there as a lite embed: a white
   torn-paper mount carrying the real YouTube still, a hand-drawn
   play affordance, the caption UNDER the frame, and a source line.
   Nothing third-party loads until the visitor clicks; the click
   swaps the still for a youtube-nocookie iframe.
   The mount is WHITE paper on a BLACK play card, which trips the
   trap in the shared layer (`.zone--light #plays .pc-top strong,
   … em{color:#fff}`, specificity 0,4,2) — every ink below is
   hardcoded paper ink and matches that specificity where needed. */
.vid-sh{display:block;margin:22px 0 4px;filter:var(--slip-shadow)}
.vid-mount{position:relative;margin:0;rotate:-.7deg;
  background:var(--pp-speck-w) 60px 30px/var(--pp-s-size) repeat,
             var(--pp-grain-w) 180px 120px/var(--pp-g-size) repeat #fff;
  background-blend-mode:multiply,multiply;
  border:0;border-radius:0;
  padding:16px 16px calc(16px + var(--tear-amp));
  -webkit-mask-image:var(--tx2),linear-gradient(#000,#000);
          mask-image:var(--tx2),linear-gradient(#000,#000);
  -webkit-mask-repeat:repeat-x,no-repeat;mask-repeat:repeat-x,no-repeat;
  -webkit-mask-size:300px 48px,100% calc(100% - 46px);
          mask-size:300px 48px,100% calc(100% - 46px);
  -webkit-mask-position:bottom left,top;mask-position:bottom left,top}
/* a photocopy speck rides the mount's edge, half cropped by the mask */
.vid-mount::after{content:"";position:absolute;pointer-events:none;z-index:0;
  right:-38px;top:12%;width:104px;height:86px;
  background:var(--we-tex-speck-6) center/contain no-repeat;
  opacity:.26;mix-blend-mode:multiply}
.vid-play{display:block;position:relative;width:100%;padding:0;border:0;
  border-radius:2px;overflow:hidden;background:#0a0d12;cursor:pointer;
  line-height:0;box-shadow:none;
  transition:filter .22s ease}
.vid-play img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
/* the affordance is drawn, not stamped: an off-round ring and a
   slightly crooked triangle, the same hand the rest of the page uses */
.vid-play .vid-btn{position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:80px;height:80px;display:grid;place-items:center;
  border-radius:50%;background:rgba(10,12,16,.62);
  transition:background .2s ease,scale .2s ease}
.vid-play .vid-btn svg{width:80px;height:80px;overflow:visible}
.vid-play .vb-ring{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round}
.vid-play .vb-tri{fill:#fff;stroke:#fff;stroke-width:2.4;stroke-linejoin:round}
.vid-play:hover .vid-btn,.vid-play:focus-visible .vid-btn{background:rgba(10,12,16,.82);scale:1.06}
.vid-play:focus-visible{outline:2.5px solid #141109;outline-offset:3px}
.vid-frame{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:2px;background:#000}
.vid-cap{display:block;font-size:.8rem;line-height:1.5;color:#2a2318;margin-top:13px}
.vid-cap b{font-weight:650;color:#141109}
/* `.play p{font-size:16px}` (0,1,1) outranks a lone class — the source
   line needs two classes to read as a source line and not as body copy */
.play .vid-src{font-family:var(--mono);font-size:.62rem;line-height:1.6;
  color:#c9ced6;margin:18px 0 6px;max-width:66ch}
/* beat `.zone--light #plays .pc-top strong,…em{color:#fff}` (0,4,2) —
   white-on-white is how this trap always presents */
.zone--light #plays .pc-top .vid-cap b{color:#141109}
.zone--light #plays .pc-top .vid-cap{color:#2a2318}
@media(max-width:560px){
  .vid-play .vid-btn,.vid-play .vid-btn svg{width:60px;height:60px}
}
@media(prefers-reduced-motion:reduce){
  .vid-play,.vid-play .vid-btn{transition:none}
}

/* ---- P5 · this page's callout geometry -----------------------
   Callout 3 is the only one whose lane is genuinely tight: the
   "SUBSCRIBE TO SHAVE TIME & MONEY" heading runs x 23-77% of the
   capture, the three-column copy above it ends at y 72%, and the
   torn zone edge starts eating at y ~89%. A 22%-wide slip is the
   one size that clears the heading horizontally AND stays short
   enough to fit between the copy and the rag. */
@media(min-width:760px){
  .anno.c3{width:clamp(180px,22%,212px)}
}

/* ---- GLOBAL PASS · banner item 9 — blue unit glyphs on white paper ----
   `.statbar .stat .n .u` and `.float-chip .fc-n i` painted #42b1ff on the
   white paper stock (~2.3:1). The one-blue rule resolves a contrast
   failure on a light ground to INK, never to a darkened blue, so both go
   to ink at reduced alpha — the same resolution teardowns-index.css:259
   already ships, so the whole family reads identically.
   SPECIFICITY: the source rule is the full `.statbar .stat .n .u` (0,4,0)
   at ~line 879; a shorter `.stat .n .u` appended here silently loses to
   it. Both selectors are listed so either DOM shape is covered. */
.statbar .stat .n .u,.stat .n .u{color:#141109;opacity:.47}
.float-chip .fc-n i{color:#141109;opacity:.47}

/* ---- GLOBAL PASS · the UA figure margin was eating the mobile exhibit ----
   Neither `figure.browser` (the storefront plate) nor `figure.jar-frame`
   (the hero product shot) carries a margin rule anywhere in this
   stylesheet, so the UA's `figure{margin:1em 40px}` is live. At a 390px
   viewport that spends 80px — 23% of the screen — on empty gutters either
   side of the page's central piece of evidence, which is why the product
   names, prices and review counts the callouts cite were unreadable on a
   phone. Desktop hides it: `.evidence` is width:min(1000px,100%) inside a
   wider column, so the 80px comes out of slack instead of out of the
   image. margin-inline only at all widths (the tear system spaces these
   regions vertically itself); the vertical 1em is zeroed below 760px
   where the exhibit stacks. Replayed set-wide from handoff/f1. */
figure.browser,figure.jar-frame{margin-inline:0}
@media(max-width:759px){figure.browser,figure.jar-frame{margin-block:0}}

/* ---- GLOBAL PASS · nav optical padding + strip colour (Chey 01:29 / 02:18) ----
   Applied identically in all 26 section stylesheets; the nav CSS is
   duplicated per page, so this is a sweep, not a shared-layer edit.

   1. PADDING. The torn strip hangs at the nav's full height (top:100%,
      margin-top:-1px) and its rag averages ~56% down its own box, so the
      paper's visual bottom edge sat at ~80px while the content is centred
      in a 68px box — 13px of air above the CTA, 25px below it. Balance
      wants the rag's average midline ON the content box's bottom edge.
      The strip cannot simply be dragged up: the nav paints its own box, so
      a raised strip has its upper teeth clamped flat by the bar's own
      background (measured — the tear read as a straight line). Instead the
      nav's PAINTED box is shortened and .nav-inner keeps its 68px content
      box, overflowing it; the raised strip supplies the last stretch of
      paper, which is invisible because (2) makes it the same stock.
      CONTENT DOES NOT MOVE — brand 16..52, CTA 13..55, exactly as before.
      Height is derived, not eyeballed. The rag's average midline sits
      .558 down the strip's own box, so midline = navH - 1 + .558 * stripH,
      and balance wants it at the 68px content edge → navH = 69 - .558 *
      stripH. Both heights therefore hang off ONE variable, --nav-tear-h,
      declared on .nav and inherited by the strip: change it in one place
      and the bar re-derives. That also forces the mobile strip height to
      agree across the family — the index shipped 24px at 390 while the
      teardowns shipped 18px, which is exactly the kind of per-file drift
      two hardcoded pixel values would have preserved.
      Measured after: 13 above / 12.4 below at 1440, 13.4 / 12.4 at 390.

   2. COLOUR. .tstrip carries the bare paper stock while .nav carries the
      same stock PLUS a darkening veil for text legibility, so the strip
      rendered ~7 levels lighter than the bar and lost its blue cast
      (measured rgb(23,23,23) against the bar's rgb(16,17,18)) — Chey's
      "the strip is lighter". Giving the strip the nav's exact background
      stack fixes it at the source. background-attachment:fixed on BOTH
      layers is load-bearing: it registers the veil and the paper to the
      viewport rather than to each element, so the strip is a true pixel
      continuation of the bar (measured after: within 0.2 of a level).

   3. .nav-inner is lifted above the strip (z-index 6 vs the strip's 5) so
      the raised strip's opaque top cannot cover the CTA's hard offset
      shadow. */
.nav{--nav-tear-h:24px;height:calc(69px - .558 * var(--nav-tear-h));line-height:1.65}
/* pinned so the CTA is the same height on every page: .btn-cta has no
   line-height of its own, so it inherited each page's body metric and
   measured 34px on the index, 38.4 on home, 40.4 here. */
@media(max-width:640px){.nav{--nav-tear-h:18px}}
.nav-inner{height:68px;position:relative;z-index:6}
.tstrip--nav{height:var(--nav-tear-h);
  background-color:var(--bg,#05070a);
  background-image:linear-gradient(rgba(5,7,10,.34),rgba(5,7,10,.52)),var(--we-paper-dark);
  background-size:cover;background-position:center;background-attachment:fixed}

/* ---- BATCH · the phone scrolls sideways 18px (V3-F1 / V4-F1 / V5-F3) ----
   `.zone--light .receipts::before` is a decorative photocopy speck hung at
   right:-52px. On a 390 viewport that 52px of overhang is real document
   width: measured realScrollX 18 on every page in the set — a true scroll,
   not a scrollWidth artifact. It reads clean to a naive probe because
   body{overflow-x:clip} clips the PAINT while the document still scrolls,
   and because a synchronous scrollX read under smooth scrolling returns a
   false 0 (force scroll-behavior:auto to see it).
   Clipping the card rather than deleting the speck keeps the artifact on
   desktop, where there is slack for it to hang into. */
@media(max-width:759px){.zone--light .receipts{overflow-x:clip}}

/* ---- BATCH · hero .jar-frame kept the legacy blue glow (V6-4) ----
   The source rule (~:128) still casts
   `0 60px 120px -60px rgba(66,177,255,.45)` behind the product frame —
   the de-glow-the-chassis rule 30 lines later never covered it. Only 3 of
   19 pages had shipped this override, so 16 heroes still glowed blue.
   Same tier and geometry, neutral-dark ink. */
.jar-frame{box-shadow:var(--shadow-1),0 60px 120px -60px rgba(0,0,0,.75)}

/* ---- BATCH · the chart's terminal value was hidden at 390 (V5-F2) ----
   Below 760px `svg.chart` keeps min-width:520px inside a ~290px `.chart-wrap`.
   The scroller worked, but it opened at the LEFT — so the figure the hero had
   just promised sat off the right edge with nothing to say it was there
   ($400M drsquatch, ~$150M armra, $850M liquidiv). Set-wide: 12 of the 19
   pages carry a chart and every one clipped at 390.

   The fix opens the scroller at the END instead of adding an overlay. A
   right-edge fade was built and rejected on evidence: a pseudo cannot be
   erased by a background (backgrounds paint behind content), so the cue could
   not hide itself once you reached the end — and while it was up it washed out
   "2024" and "~$150M", i.e. it covered the exact number it existed to reveal.

   `direction:rtl` starts a horizontal scroller at its right extreme with no
   JS and nothing painted over the data; the child is set back to ltr so the
   chart itself is unaffected. The payoff is now the first thing on screen and
   the line running off the LEFT edge is what signals the history is back
   there. Desktop is untouched. */
@media(max-width:759px){
  .chart-wrap{direction:rtl}
  .chart-wrap>.chart{direction:ltr}
}

/* ---- BATCH · the Intelligence dropdown was the last navy AI card (V1-F3) ----
   `.dd-panel` shipped as rgba(11,15,21,.98) with a 12px radius, a hairline
   stroke and a blue inner ring; its `.ic` chips were 26px navy-gradient tiles.
   Only surviving navy + AI-gradient element in the theme, and it rode on
   EVERY page. V1 puts the 03:13 screenshot ring precisely on "Intelligence",
   so this is plausibly what that task was pointing at.

   It becomes a torn piece of the same dark paper the nav bar is printed on:
   `--we-paper-dark` from theme.liquid :root, which every page already has, so
   this needs no new tokens and is byte-identical in all 25 nav stylesheets.

   Three mechanics worth keeping straight:
   - the tear is the REPEATING 300x48 tile, not the full-width strip mask. The
     strip mask is a 1200x120 viewBox stretched with preserveAspectRatio:none;
     squeezed into a 28px band it renders ~1.6px of rag, i.e. a straight line
     (measured — it is the same squeeze V2-F5 raised about the nav strip).
   - the shadow is a FILTER, not a box-shadow. A mask clips an element's own
     box-shadow to its box (gotcha 4); drop-shadow() runs on the masked result
     and hugs the torn contour.
   - the bottom padding clears the rag, so the tear eats paper rather than the
     "See all teardowns" row.
   The panel hangs off a fixed nav and is not inside a masked parent, so the
   tear survives here (unlike a .tstrip in a masked zone, gotcha 5). */
.dd-panel{
  border:0;border-radius:0;
  background-color:#14120d;
  background-image:var(--we-paper-dark);
  background-size:cover;background-position:center;
  padding:10px 8px 46px;
  box-shadow:none;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)) drop-shadow(0 20px 34px rgba(0,0,0,.5));
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%2048'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='300'%20height='48'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.02%200.052'%20numOctaves='3'%20seed='131'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='19'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-4,-12%20304,-12%20304,24%20-4,24'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E"),linear-gradient(#000,#000);
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%2048'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='300'%20height='48'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.02%200.052'%20numOctaves='3'%20seed='131'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='19'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-4,-12%20304,-12%20304,24%20-4,24'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E"),linear-gradient(#000,#000);
  -webkit-mask-repeat:repeat-x,no-repeat;mask-repeat:repeat-x,no-repeat;
  -webkit-mask-size:300px 48px,100% calc(100% - 46px);
  mask-size:300px 48px,100% calc(100% - 46px);
  -webkit-mask-position:bottom left,top;mask-position:bottom left,top;
}
/* numerals become little white paper tabs with ink on them — the house
   artifact — instead of navy gradient tiles with cyan type. */
.dd-item .ic{
  background:#f4f2e9;border:0;border-radius:2px;
  color:#141109;font-family:"FLBold","Arial Black",sans-serif;
  font-size:.68rem;letter-spacing:0;rotate:-1.5deg;
}
.dd-item:nth-child(odd) .ic{rotate:1.2deg}
/* the current-page row was a blue-tinted rounded slab, which reads as another
   soft UI card on paper. It becomes a torn-off paper marker instead: the row
   keeps the stock, the numeral tab goes full white, and the title takes the
   brand blue (legal here — the ground is dark). */
.dd-item.now{background:rgba(255,255,255,.06);border-radius:0}
.dd-item.now .ic{background:#fff;color:#141109}
.dd-item:hover{border-radius:0}

/* ---- BATCH · nav CTA lost the hard offset shadow (V1-F5) ----
   The de-glow pass replaced the brand's blur-free offset with a soft ambient
   `0 10px 30px -12px`, which BRAND-SYSTEM-INDEX §8 already flags as "worth
   revisiting" — it made the nav CTA the only button in the theme without the
   analog signature. Restored to the §8 nav-CTA spec exactly (2px 2px 0, and
   3px 4px 0 on hover — the small-button values, not the larger `.button`'s).
   Radius and tilt unchanged. */
.btn-cta{box-shadow:2px 2px 0 rgba(0,0,0,.5)}
.btn-cta:hover{box-shadow:3px 4px 0 rgba(0,0,0,.55);transform:rotate(-.6deg) translateY(-1px)}