: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:"HEXCLAD";position:absolute;left:-34px;top:-58px;z-index:0;font-size:clamp(3.1rem,6vw,5rem);font-weight:800;letter-spacing:.08em;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 hexclad 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-hexclad-halftone) —
     relative asset refs inside CSS do NOT resolve on the Fluid CDN */
  background:var(--we-hexclad-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))}}

/* ============================================================
   HEXCLAD (net-new): set-wide harmonization overrides, appended
   after the shared We-Commerce brand layer (which stays byte-identical
   to teardown-rhode.css). Standard block adopted verbatim from the
   sibling sheets (innosupps precedent) — mirror these uniformly.
   ============================================================ */

/* ---- 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  (hexclad)
   ------------------------------------------------------------
   Append-only overrides after the shared We-Commerce layer, per
   .restyle-2026-07/TEARDOWN-PATTERN-PATCHES.md. Ported from the
   arrae pilot; per-page geometry noted where it differs.
   ============================================================ */

/* ---- P1 · IMAGE POP-IN: blurred → sharp (SET-WIDE) ----------
   Was: a --mat gray-blue placeholder under the page-wide grain,
   then the decoded image SNAPS in (transform was the only
   transition anywhere). Now it arrives out of focus and resolves.
   FILTER/OPACITY ONLY — .browser.zoom, the card hovers and the
   .rv reveal system all own transform (gotcha 6). */
.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 (SET-WIDE) -------------------
   The hero print is a CSS background on .hero-bg-img, not an
   <img>, so the P1 loader never touches it — this is the pop-in
   Chey was actually watching. --hz-blur already exists, so the
   print simply starts out of focus and resolves. .hero-bg-img is
   NOT an .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}
}

/* ---- P2 · THE CHART ON THIS PAGE IS THE BAR LADDER -----------
   Unlike arrae/drsquatch this page plots revenue as .lrow/.lb
   horizontal bars, not an area chart — so there is no .area wash
   and no .dlab labels to straddle. The dot-SIZE halftone for the
   bars is already live (the .zone--light .lrow .lb generator in
   the page JS, rhode's implementation): tone is carried by dot
   radius on a staggered grid, zero alpha, per the
   halftone-fade-fills doctrine / gotcha 17. The .chart rules
   below are kept for the dead .chart CSS in the shared layer, so
   a future chart on this page inherits the same doctrine. */
.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}
}
.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 MUST NOT COVER THE LADDER -------
   .receipt-row is pulled up ~60px so the black slips hang over the
   card's torn bottom edge — on the area-chart pages that landed on
   the x-axis labels. Here the nearest content is the last bar row,
   so reserve the same lane. (SET-WIDE instance of: a floating card
   must never cover content.) */
.zone--light .receipts .chart-wrap{padding-bottom:58px}
.zone--light .receipts .ladder{padding-bottom:26px}

/* ---- P3 · NO CARD-IN-CARD (this page's instance) -------------
   No .artifact here; the card-in-card is .pm-img — a bordered,
   rounded, panel-filled figure with a border-topped caption,
   sitting inside the black photocopy play card. Same disease,
   different name. Flattened to a plain run of content: the image
   goes full-bleed, the caption becomes a source line underneath
   instead of a strip welded to a panel. */
.zone--light #plays .pc-top .pm-img{background:none;border:0;border-radius:4px;overflow:visible}
.zone--light #plays .pc-top .pm-img img{border-radius:4px}
.zone--light #plays .pc-top .pm-cap{padding:12px 0 0;border-top:0;
  font-family:var(--mono);font-size:.62rem;line-height:1.6;color:#c9ced6;max-width:66ch}
.pm-img{border:0;border-radius:4px;background:none;overflow:visible}
.pm-cap{padding:12px 0 0;border-top:0;max-width:66ch}

/* ---- P6 · CARD-HOVER CLEANUP (SET-WIDE, gotcha 11) ----------
   The legacy dark-mode hover block (~35 lines above the "de-glow
   the chassis" rule) still paints a BLUE-TINTED GLOW plus a hard
   border-colour stroke. Drop 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 automatically (gotcha 12). */
.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}
/* the hero jar frame carried the same blue glow in its resting shadow */
.jar-frame{box-shadow:var(--shadow-1),0 60px 120px -60px rgba(0,0,0,.8)}

/* ---- P7 · FOOTER TEXTURE (SET-WIDE, RECON §6) ---------------
   .footer painted flat var(--bg) over a body canvas that is
   var(--bg) PLUS --we-paper-dark. Any trailing strip below it
   exposed textured paper against flat black and read as a gap
   (measured row-mean luminance 8.0 vs 23.2). Same stock, and the
   seam cannot be seen whatever the platform wrapper does below. */
.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/P12 · STOREFRONT SLOT TAKES THE CAPTURE'S RATIO ------
   The slot was aspect-ratio:1500/1513 while the capture is
   2880x3300 (0.873) — so the markup had to fight it with an
   inline object-fit:contain, letterboxing the shot against a dark
   mat and throwing away slot width. The slot now matches the
   capture exactly, so cover crops nothing and the letterbox is
   gone. PATTERN (set-wide): the slot takes the capture's aspect
   ratio, never the other way round.
   NOTE: the 2026-07 re-capture pair for hexclad is unusable (the
   hero <video> had not painted and the Shop-by-Category tiles are
   empty placeholders), so this page keeps its existing capture,
   re-served at 2400px instead of 1500px for a sharp 2x. Flagged
   for re-capture in the handoff. */
.browser-shot{aspect-ratio:2880/3300}
@media(max-width:759px){.browser-shot{aspect-ratio:auto}}

/* ---- BLUE RULE (DECISIONS) ----------------------------------
   --brand-ink is a DARKENED blue (color-mix #42b1ff 58% + #0f3350)
   used on cream in 4 places. The rule is: one blue #42b1ff, and
   where it fails contrast on a light background the fallback is
   BLACK — never a darkened blue (gotcha 10; teardowns-index.css
   is the correct model). Re-point the var at the cream ink and
   every consumer follows; the two inline color-mix darkened blues
   are overridden below it. Pure #42b1ff survives only as a
   GRAPHICAL fill (the painted-underline mask, the halftone dots)
   and on dark surfaces, never as small text on cream. */
.zone--light{--brand-ink:var(--ink)}
.zone--light .play .pn b{color:var(--ink)}
.zone--light .pull{border-left-color:#42b1ff}
/* The blue $/+ accent glyphs on white paper (.statbar .stat .n .u and
   .float-chip .fc-n i, ~2.3:1) are DELIBERATELY NOT fixed here — spec banner
   correction 9 (F6): they are identical in all 19 stylesheets and fixing them
   on some pages desyncs the set, so it is one scripted decision in the global
   pass. I had both overrides here and pulled them: the .float-chip one worked
   and created exactly that desync, and the statbar one was dead code anyway
   (.statbar .stat .n .u at ~line 879 is (0,3,0) and outranks a (0,2,0)
   override, so the glyph stayed #42b1ff regardless — verified by computed
   style, not by reading the cascade). */

/* ---- P16 · WIDE CAPTURES STAY LEGIBLE ON PHONES (SET-WIDE) ---
   A wide capture squeezed into a ~340px column is mush. Below
   700px the image keeps a legible intrinsic width and the slot
   scrolls horizontally instead — the same affordance .chart-wrap
   already uses. --shot-min is set per capture in the markup. */
@media(max-width:700px){
  /* .play is a grid whose content track is 1fr; a grid track's automatic
     minimum size is min-content, so --shot-min on the image propagates all
     the way up and blows the whole play card past the viewport (measured:
     card 776px wide in a 390px viewport, headline and body truncated).
     min-width:0 lets the track shrink so the scroll container does its job. */
  .zone--light #plays .play>*,.zone--light #plays .pc-top{min-width:0}
  .pm-img{min-width:0;max-width:100%;overflow-x:auto;
    overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .pm-img img{min-width:var(--shot-min,0px);max-width:none}
}


/* ---- P17 · THE TEAR RAG WAS EATING THE CAPTURE'S BOTTOM TYPE ---
   (spec-banner correction 7, F6 — confirmed live HERE by looking, the rag cut through the "TAKE IT OUTSIDE" headline and the two shop buttons)
   #zone-dark-1 is mask-clipped for the torn "browser bite" and the rag eats
   its bottom ~120px. That bite is DELIBERATE (the shared layer's own comment:
   "pull the zone bottom up so the rag bites ~50px into the browser frame"),
   and the doctrine is that teeth may bite IMAGERY but never TEXT. Measured
   clearance from capture bottom to masked zone bottom was 0px, and the rag
   was landing on type.
   The fix must be PADDING ON THE SECTION. margin-bottom on .evidence collapses
   out through the section and the zone and does nothing — its -16px was live
   and inert the whole time, which is why removing it BUYS 16px rather than
   costing any. 128 + 16 = the 144px clearance F3/F6 both landed on. */
#exhibit{padding-bottom:calc(var(--tear-h) + 16px)}
#exhibit .evidence{margin-bottom:0}
@media(max-width:640px){#exhibit{padding-bottom:calc(var(--tear-h) * .72 + 14px)}}

/* ---- 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. Alpha measured, not guessed: the .42 the index
   shipped composites to rgb(156,155,152) on white = 2.78:1, which misses
   AA Large (3:1); .47 gives 3.20:1 and is indistinguishable by eye. The
   same value now ships in all 19 teardown sheets and the index.
   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. 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 vertical 1em is zeroed below 760px where the exhibit
   stacks. Replayed set-wide from handoff/f1-figure-margin.md. */
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 hang off ONE variable, --nav-tear-h, declared on
      .nav and inherited by the strip, so the bar re-derives from one place.
      Measured after: 13 above / 12 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}
/* line-height pinned so the CTA is the same height on every page. */
@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 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)}