: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:"LIQUID I.V.";position:absolute;left:-34px;top:-58px;z-index:0;font-size:clamp(2.6rem,5.2vw,4.2rem);font-weight:800;letter-spacing:.04em;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 liquidiv 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-liquidiv-halftone) —
     relative asset refs inside CSS do NOT resolve on the Fluid CDN */
  background:var(--we-liquidiv-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))}}

/* ============================================================
   LIQUID I.V. (net-new): set-wide harmonization overrides, appended
   after the shared We-Commerce brand layer (which stays byte-identical
   to teardown-rhode.css). Standard cross-clone block (identical to the
   sibling sheets): tweak-panel suppression, the cream-zone blue→ink text
   rule, and the current-nav-item treatment. The revenue chart artifact
   in #receipts reuses the shared .chart styles already in teardown-rhode.css
   (lines ~167-181, 414-418) — no net-new chart rules required.
   ============================================================ */

/* ---- 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)}


/* ============================================================
   RESTYLE 2026-07 — WE-COMMERCE PATCH BLOCK  (liquidiv)
   ------------------------------------------------------------
   Appended AFTER the shared We-Commerce layer so every rule here
   wins by cascade order — no line-number surgery in a drifted
   clone. Ported from the arrae pilot; see
   .restyle-2026-07/TEARDOWN-PATTERN-PATCHES.md
   ============================================================ */

/* ---- P1 · IMAGE POP-IN: blurred → sharp -----------------------
   Was: the --mat gradient placeholder + the page-wide body::after
   grain read as gray noise, then the decoded image SNAPPED in —
   the only transition on it is `transform`. Now the image arrives
   out of focus and resolves. FILTER-ONLY on purpose: the
   storefront zoom, the card hovers and the .rv reveal system all
   already own `transform` (.rv sets transform:none at higher
   specificity and wins). The class is added by JS and only to
   images that have NOT decoded, so a cached image never flashes
   blurred. */
.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}
}

/* ---- P14 · HERO HALFTONE POP-IN -------------------------------
   The image Chey watched snap in is the hero halftone, and it is a
   CSS background on .hero-bg-img — not an <img> — so the P1 loader
   never touches it. The blur knob already exists (--hz-blur), so
   the print simply starts out of focus and scaled up, and resolves
   when the file lands. .hero-bg-img is NOT a .rv element, so
   `transform` is safe here. */
.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}
}

/* ---- P2a · CHART FILL: opacity ramp → dot-SIZE ramp -----------
   The fill under the plot line was linearGradient(rgba(66,177,255,
   .28) → rgba(66,177,255,0)) in the markup and a color-mix alpha
   wash in the brand layer. Both are ALPHA ramps, which gotcha 17
   and the halftone-fade-fills skill reject outright: tone is
   carried by dot SIZE, never by transparency. Chey's "50% at the
   top down to 10% at the bottom" is now coverage — each dot's AREA
   equals the local tone, so the ink is solid #42b1ff with zero
   alpha anywhere. .area survives with fill:none as the clip
   geometry (and as the no-JS fallback wash). */
.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}
}

/* ---- P2b · DATA LABELS STRADDLE THE INK EDGE ------------------
   They sat clear above the plot line and covered the chart. Each
   label's vertical CENTRE now sits ON the line, so half of it
   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. The baked y values in the markup are the
   no-JS fallback; the page JS recomputes them 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}

/* ---- P2c · THE RECEIPT SLIPS WERE COVERING THE X-AXIS ---------
   .receipt-row is pulled up ~60px so the black slips hang over the
   card's torn bottom edge — landing on top of the chart's day
   labels. Same disease as "a floating card must never cover
   content": reserve the lane instead of moving the slips. */
.zone--light .receipts .chart-wrap{padding-bottom:58px}

/* ---- P3 · NO CARD-IN-CARD ------------------------------------
   Any bespoke evidence panel inside the black photocopy play card
   becomes a flat run of content, and its hand tag becomes a normal
   heading instead of a notch punched through a border. This page
   carries no .artifact-shaped panel in its markup, so these are
   guards — the .pm-img figure is already flattened upstream, and
   the rules below keep it that way if the shared layer moves. */
.artifact{position:relative;border:0;border-radius:0;background:none;
  box-shadow:none;padding:0;margin:26px 0 6px}
.art-tag{position:static;top:auto;left:auto;display:inline-block;
  background:none;padding:0;margin:0 0 14px}
.art-note{margin-top:16px}
.zone--light #plays .ladder,
.zone--light #plays .cadence{background:none;border:0;border-radius:0;
  padding:0;margin:22px 0 6px}
.zone--light #plays .cadence .note{margin-top:16px}
.zone--light #plays .pc-top .pm-img{border:0;border-radius:4px;box-shadow:none}

/* ---- P4 · BIG NUMBERS GET FL-BOLD SCALE ----------------------
   Stage/step numerals set in .82rem mono inside a fixed narrow
   column and yet another bordered panel read as tiny and gappy.
   No panel (P3 doctrine), numerals at display scale in the FL
   face, hairline rules instead of boxes, and the staircase carried
   by padding-left. This page has no escalator in its markup;
   kept so the recipe travels with the file. */
.esc{display:grid;gap:0;margin:22px 0 4px}
.rung{display:grid;grid-template-columns:minmax(0,auto) 1fr;gap:6px 24px;
  align-items:center;background:none;border:0;border-top:1px solid var(--line);
  border-radius:0;padding:20px 0 18px;transition:none}
.rung:first-child{border-top:0;padding-top:2px}
.rung.r1{margin-right:0}
.rung.r2{margin-right:0;padding-left:24px}
.rung.r3{margin-right:0;padding-left:48px}
.rung .stg{font-family:"FLBold","Arial Black",sans-serif;font-weight:700;
  font-size:clamp(2.1rem,4.6vw,3.05rem);line-height:.9;letter-spacing:-.015em;
  color:var(--brand-soft);white-space:nowrap;font-variant-numeric:tabular-nums;
  transform:rotate(-1.4deg);transform-origin:left}
.rung .stg small{display:block;font-family:var(--mono);font-weight:400;
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-top:9px;transform:rotate(1.4deg);transform-origin:left}
.rung .mv{font-size:15px;line-height:1.5;color:var(--soft)}
.rung:hover{transform:none;border-color:var(--line);box-shadow:none}
@media(max-width:620px){
  .rung{grid-template-columns:minmax(0,1fr);gap:10px;padding:18px 0 16px}
  .rung.r2,.rung.r3{padding-left:0}
  .rung .stg{font-size:2.1rem}
}

/* ---- P6 · CARD-HOVER CLEANUP: drop the stroke, keep the shadow -
   The legacy dark-mode hover block (~35 lines above the "de-glow
   the chassis" rule that was meant to replace it) still painted a
   blue-tinted glow plus a hard border-colour stroke. Both rulesets
   are live. Remove the stroke and the blue; keep the lift and a
   NEUTRAL shadow. --sh-rgb is re-scoped warm inside .zone--light,
   so one rule casts neutral on dark and warm on cream. */
.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}

/* ---- P7 · FOOTER TEXTURE (RECON §6) --------------------------
   .footer painted flat var(--bg) over a body canvas that is
   var(--bg) PLUS --we-paper-dark with background-attachment:fixed.
   Any trailing strip below the footer — from its own margin-top,
   from the Fluid section wrapper, or from a short page — exposed
   textured paper against flat black and read as a gap (measured at
   row-mean luminance 8.0 vs 23.2). Same stock on the footer makes
   the seam invisible whatever the platform wrapper does below it;
   margin-top and border-top were the other two contributors. */
.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}

/* ---- P8 · SCREENSHOT SLOT TAKES THE CAPTURE'S ASPECT ----------
   The slot was aspect-ratio:1500/1513 (near square) with
   object-fit:cover, so this brand's 2880×3300 capture lost
   12% of its height off the top and bottom and rendered
   soft at w-1500 into a ~1000px slot. The rule, and it is the
   generalizable half: the slot takes the capture's aspect ratio,
   never the other way round. Then object-fit:cover crops nothing,
   and the markup now asks ImageKit for w-2200 so the slot is sharp
   at 2×. */
.browser-shot{aspect-ratio:2880/3300}
@media(max-width:759px){.browser-shot{aspect-ratio:auto}}

/* ---- P10 · CALLOUT CAPTIONS MUST NOT COVER THE CREATIVE -------
   A figcaption absolutely positioned over the bottom of a 9:13
   creator video wraps to five lines at three-up widths and buries
   the frame. Same family as "a floating card covers the content".
   Guard rules — this page ships no hook cards. */
.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}

/* ---- P9/P16 · REAL-CAPTURE SLOT, LEGIBLE ON A PHONE ----------
   A real screenshot beats rebuilt UI, full-bleed inside the parent
   card with no nested panel chrome. Below 700px a wide capture
   keeps a legible intrinsic width and the slot scrolls instead of
   squeezing to mush — the affordance .chart-wrap already uses.
   --shot-min is set per capture in the markup. */
.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)}
}

/* ---- P5 · PRE-HOVER STATES: never clipped, never covering -----
   Roomier slips wrap to fewer lines, which is usually what makes a
   callout fit at all; and lifting the frame out of the rag buys
   the bottom callout clearance from the torn edge without losing
   the tear. Per-callout geometry is measured, not guessed — see
   the --x/--y values in the markup. Never `transform:` on .anno
   (gotcha 6, it lives inside the .rv system); use translate:/rotate:. */
/* CORRECTION 1 (spec banner): this MUST be scoped. Appended blocks land after
   the shared layer, so a bare `.anno{width:…}` also outranks the shared
   @media(max-width:759px) rule that unstacks the callouts to full-width static
   list items — pinning every phone callout to a ~180px ribbon. Match the scope
   of the rule you are extending. */
@media(min-width:760px){
  .anno{width:clamp(180px,22vw,262px)}
}

/* ---- BLUE RULE (DECISIONS) -----------------------------------
   ONE blue, #42b1ff. Where it fails contrast on cream the fallback
   is INK — never a darkened blue. That kills the --brand-ink
   color-mix (gotcha 10) and the two hardcoded #0f3350 mixes, and
   the darkened-blue steal-cta arrow on its white hover fill. Pure
   #42b1ff survives only as a GRAPHICAL fill: the painted-underline
   mask under the play numeral, the chart halftone, and blue on
   dark surfaces, all untouched. */
.zone--light{--brand-ink:var(--ink)}
.zone--light .k{color:var(--ink)}
.zone--light .pull{border-left-color:var(--ink)}
.zone--light .play .pn b{color:var(--ink)}
.zone--light .play .pn small{color:var(--ink)}
.zone--light .steal .tag{color:var(--ink)}
.zone--light #plays .steal-cta:hover::before{color:#141109}

/* ---- CORRECTION 8 · .pm-img BECOMES A WHITE PAPER CUTTING ------
   The treatment follows what the source image IS. This play's shot
   is a light-ground product photo, so it mounts as paper — not as
   the hard-edged rectangle it was, floating on the photocopy grain
   with its own inline background fighting the card.
   The old rule also printed the caption in the DARK-panel inks
   (#c9ced6 on a light gradient) — near-invisible. Paper inks now,
   hardcoded, because .pc-top re-scopes --ink/--dim to a dark
   surface (gotcha 12 / the §B trap).
   .pm-w is the UNMASKED wrapper: it carries the tilt and casts the
   shadow, because a mask clips the element's own drop-shadow
   (gotcha 4). Tear tile, tilt, texture offsets and edge-rider speck
   are all picked per page so no two cuttings in the set match. */
.zone--light #plays .pc-top .pm-w{width:min(392px,74%);margin:28px 0 12px;
  rotate:-1deg;filter:var(--slip-shadow)}
.zone--light #plays .pc-top .pm-img{position:relative;overflow:visible;
  background:var(--pp-speck-w) 60px 200px/var(--pp-s-size) repeat,
             var(--pp-grain-w) 240px 90px/var(--pp-g-size) repeat #fff;
  background-blend-mode:multiply,multiply;
  border:0;border-radius:0;margin:0;box-shadow:none;
  padding:13px 13px calc(10px + 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}
/* the source carries its own type top and bottom — a packaging-change
   banner and a sustainability disclaimer, neither of which is what
   this play is about. A 5:4 window at 42% keeps both sticks whole
   and crops both lines away. */
.zone--light #plays .pc-top .pm-img img{display:block;width:100%;height:auto;
  border-radius:0;aspect-ratio:5/4;object-fit:cover;object-position:50% 42%}
.zone--light #plays .pc-top .pm-cap{border-top:0;padding:12px 2px 0;margin:0;
  color:#2a2318;font-size:.68rem;line-height:1.55;background:none}
.zone--light #plays .pc-top .pm-cap b{color:#141109}
.zone--light #plays .pc-top .pm-cap em,
.zone--light #plays .pc-top .pm-cap strong{color:#141109}
/* a photocopy speck rides the cutting's outer edge, half cropped by the mask */
.zone--light #plays .pc-top .pm-img::after{content:"";position:absolute;
  pointer-events:none;z-index:2;right:-34px;bottom:-30px;width:100px;height:84px;
  background:var(--we-tex-speck-7) center/contain no-repeat;
  opacity:.28;mix-blend-mode:multiply;}

/* ---- CORRECTION 4 · grid auto-minimum guard (set-wide form) ----
   A grid track's automatic minimum is min-content, so any capture
   with a --shot-min (or an intrinsically wide image) propagates up
   .pm-img/.we-shot -> .pc-top -> .pc -> the 1fr track and lays the
   whole play card out past the viewport, where body{overflow-x:clip}
   eats it silently — nothing scrolls, so the scroll probe reads
   clean and only a screenshot shows it. */
@media(max-width:700px){
  .zone--light #plays .play>*,
  .zone--light #plays .pc-top,
  #plays .pc{min-width:0}
  .pm-img{min-width:0;max-width:100%}
  .zone--light #plays .pc-top .pm-w{width:100%;margin:24px 0 10px}
}

/* ---- CORRECTION 7 · THE RAG WAS EATING THE CAPTURE'S BOTTOM TYPE
   Measured: the shot's bottom sits 1px above #zone-dark-1's bottom,
   and the zone is mask-clipped ~120px up by the torn edge — so the
   rag cut straight through the red promo band, slicing the
   "LIQUID I.V." wordmark's baseline and the word beneath it.
   `margin-bottom` on .evidence does NOT fix this: it collapses out
   through the section and the zone (measured gap stayed 1px, not
   8px). Clear the rag with padding on the SECTION instead.
   Glossier and armra do NOT need this — their captures end in white
   space and the rag bites nothing. */
#exhibit{padding-bottom:126px}
#exhibit .evidence{margin-bottom:0}

/* ---- 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)}