: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:"ARRAE";position:absolute;left:-34px;top:-58px;z-index:0;font-size:clamp(4rem,8vw,6.6rem);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 arrae 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-arrae-halftone) —
     relative asset refs inside CSS do NOT resolve on the Fluid CDN */
  background:var(--we-arrae-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))}}

/* ============================================================
   ARRAE-ONLY ARTIFACTS — net-new rules appended after the shared
   We-Commerce brand layer (which stays byte-identical to
   teardown-rhode.css). These style arrae's bespoke evidence
   artifacts (search autocomplete, SKU-war, Ad-Library panel, the
   daily-sales chart, hot-row + escalator accents) so they sit
   correctly inside rhode's cream light zones. Colours use the
   palette vars (re-scoped per zone), plus a consolidated house-rule
   block that routes any brand-blue TEXT that would fail AA on cream
   to black — never darkened blue.
   ============================================================ */

/* evidence-slot frame (plays 01–03) */
.artifact{position:relative;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,var(--panel),var(--panel-2));padding:26px 20px 18px;margin:22px 0 4px;box-shadow:var(--shadow-1)}
.art-tag{position:absolute;top:-13px;left:16px;font-family:var(--hand);font-size:1.25rem;line-height:1;font-weight:700;color:var(--brand-soft);background:var(--bg);padding:0 9px;transform:rotate(-1.6deg);white-space:nowrap;text-shadow:none}
.art-note{font-family:var(--mono);font-size:.62rem;color:var(--dim);line-height:1.6;margin-top:14px;padding-top:11px;border-top:1px solid var(--line-soft)}

/* play 01 — the 9pm query (autocomplete) */
.sb-box{display:flex;align-items:center;gap:11px;background:#f4f6f9;border-radius:999px;padding:13px 18px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.sb-box svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:#5f6b7a;stroke-width:2.2;stroke-linecap:round}
.sb-type{font-size:15.5px;font-weight:560;color:#111827;letter-spacing:.01em;min-height:1.3em}
.sb-caret{width:1.5px;height:1.15em;background:var(--brand);animation:sbcaret 1s steps(1) infinite}
@keyframes sbcaret{50%{opacity:0}}
.sb-suggest{margin-top:10px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.sb-row{display:flex;align-items:baseline;gap:2px;padding:10px 15px;font-size:13.5px;border-top:1px solid var(--line-soft);transition:background .15s ease}
.sb-row:first-child{border-top:0}
.sb-row:hover{background:color-mix(in srgb,var(--brand) 8%,transparent)}
.sb-row b{color:var(--ink);font-weight:620}
.sb-row span{color:var(--dim)}
.sb-row.hot{background:color-mix(in srgb,var(--brand) 7%,transparent)}
.sb-row.hot i{margin-left:auto;font-style:normal;font-family:var(--hand);font-size:1.05rem;color:var(--green)}
.sb-note{font-family:var(--mono);font-size:.62rem;color:var(--dim);margin-top:11px}
.searchbar .name-chips{margin:16px 0 0}

/* play 02 — catalog discipline (SKU war) */
.skurow{display:grid;grid-template-columns:96px 1fr auto;gap:12px;align-items:center;padding:7px 0}
.skun{font-family:var(--mono);font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.skubar-wrap{display:block;height:14px}
.skubar{display:block;height:14px;border-radius:7px;background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 45%,transparent),var(--brand));width:var(--w);min-width:10px;transform-origin:left}
.skubar.dim{background:color-mix(in srgb,var(--ink) 20%,transparent)}
.js .skubar{transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.7,.2,1) .15s}
.js .skuwar.in .skubar{transform:scaleX(1)}
.skuv{font-family:var(--mono);font-size:.72rem;color:var(--soft);white-space:nowrap}
.skuv b{color:var(--ink);font-weight:650}
.skuv em{font-style:normal;color:var(--brand-soft)}
.skuchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.skchip{font-size:.72rem;font-weight:600;color:var(--soft);border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:6px 13px}
.skchip.killed{position:relative;color:var(--faint);border-style:dashed;text-decoration:line-through;text-decoration-color:rgba(255,148,116,.7)}
.skchip.killed i{position:absolute;top:-11px;right:-8px;font-style:normal;font-family:var(--mono);font-size:.5rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);border:1.5px solid rgba(255,148,116,.65);border-radius:5px;padding:2px 5px;background:var(--bg);transform:rotate(7deg)}
@media(max-width:560px){.skurow{grid-template-columns:78px 1fr auto;gap:9px}.skuv{font-size:.62rem}}
@media(prefers-reduced-motion:reduce){.js .skubar{transform:none;transition:none}}

/* play 03 — Meta Ad Library panel */
.al-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.al-title{display:flex;align-items:center;gap:8px}
.al-live{width:7px;height:7px;border-radius:50%;background:var(--brand);animation:alpulse 2.2s ease-in-out infinite}
@keyframes alpulse{0%,100%{opacity:1}50%{opacity:.35}}
.al-count b{color:var(--brand-soft);font-weight:650;font-size:.86rem}
.al-rows{display:grid;gap:8px}
.al-row{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--ink) 4%,transparent);padding:10px 13px;transition:border-color .2s ease,background .2s ease}
.al-row:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line));background:color-mix(in srgb,var(--brand) 5%,transparent)}
.al-row>i{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:0 0 auto;opacity:.85}
.al-q{font-family:var(--mono);font-size:.72rem;color:var(--brand-soft);flex:1;line-height:1.4}
.al-m{font-family:var(--mono);font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.al-foot{font-family:var(--mono);font-size:.6rem;color:var(--dim);margin-top:12px}
@media(prefers-reduced-motion:reduce){.al-live{animation:none}}

/* play 04 — hot-row tag + sheen on the ladder's #1 SKU */
.hot-tag{font-style:normal;font-family:var(--mono);font-size:.52rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--orange);border:1px solid rgba(255,148,116,.5);border-radius:999px;padding:2px 7px;margin-left:7px;vertical-align:1px;white-space:nowrap}
.lrow.hot .lb{position:relative;overflow:hidden}
.lrow.hot .lb::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-100%);animation:alshimmer 2.8s ease-in-out 2s infinite}
@keyframes alshimmer{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.lrow.hot .lb::after{animation:none;display:none}}

/* receipts — live badge + pulsing live dot + (dormant) crosshair/tooltip */
.live-badge{display:inline-flex;align-items:center;gap:7px}
.live-badge i{width:7px;height:7px;border-radius:50%;background:var(--brand);animation:alpulse 2.2s ease-in-out infinite}
.chart .xhair-line{stroke:color-mix(in srgb,var(--brand) 50%,transparent);stroke-width:1;stroke-dasharray:3 4}
.chart .xhair-dot{fill:#eaf5ff;stroke:var(--brand-soft);stroke-width:2.5}
.chart .xhair{transition:opacity .18s ease}
.chart .dot-live{animation:livedot 2.2s ease-in-out infinite}
@keyframes livedot{0%,100%{opacity:1}50%{opacity:.5}}
.chart-tip{position:absolute;z-index:5;pointer-events:none;opacity:0;transform:translate(-50%,calc(-100% - 14px));transition:opacity .15s ease;background:rgba(5,8,12,.94);border:1px solid color-mix(in srgb,var(--brand) 35%,transparent);border-radius:9px;padding:8px 12px;text-align:center;white-space:nowrap;box-shadow:0 16px 40px -16px #000}
.chart-tip.on{opacity:1}
.chart-tip b{display:block;font-family:var(--mono);font-size:.92rem;font-weight:650;color:var(--brand-soft)}
.chart-tip span{display:block;font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:#c9ced6;margin-top:2px}
.chart-wrap{position:relative}
@media(prefers-reduced-motion:reduce){.live-badge i,.chart .dot-live,.al-live{animation:none}}

/* staggered reveal of artifact children (containers get .in from the shared
   reveal observer because they carry .rv in the markup) */
.js .al-rows .al-row,.js .skuchips .skchip,.js .sb-suggest .sb-row{opacity:0;transform:translateY(9px);transition:opacity .45s ease,transform .45s ease}
.js .adlib.in .al-row,.js .skuwar.in .skchip,.js .sb-suggest.in .sb-row{opacity:1;transform:none}
.js .al-rows .al-row:nth-child(2),.js .skuchips .skchip:nth-child(2),.js .sb-suggest .sb-row:nth-child(2){transition-delay:.08s}
.js .al-rows .al-row:nth-child(3),.js .skuchips .skchip:nth-child(3),.js .sb-suggest .sb-row:nth-child(3){transition-delay:.16s}
.js .al-rows .al-row:nth-child(4),.js .skuchips .skchip:nth-child(4),.js .sb-suggest .sb-row:nth-child(4){transition-delay:.24s}
.js .skuchips .skchip:nth-child(5){transition-delay:.32s}
.js .skuchips .skchip:nth-child(n+6){transition-delay:.4s}
@media(prefers-reduced-motion:reduce){.js .al-rows .al-row,.js .skuchips .skchip,.js .sb-suggest .sb-row{opacity:1;transform:none;transition:none}}

/* ---- The #plays cards are DARK "photocopy" cards even inside the cream
        zone (rhode paints .pc-top/.pc-bottom #0c0d10 with #fff/#e7eaef copy).
        Re-scope the palette to a dark surface inside them so every arrae
        artifact — which is authored against the palette vars — renders as
        the original dark evidence panel: dark card, light copy, blue
        accents. The receipts CHART is NOT in #plays (it sits on the white
        receipts card in zone-light-1), so it keeps the cream treatment. ---- */
.zone--light #plays .pc-top,.zone--light #plays .pc-bottom{
  --bg:#0c0d10;--panel:#13161c;--panel-2:#0e1116;
  --ink:#f7f8fa;--soft:#e7eaef;--dim:#aeb6c1;--faint:#8791a0;
  --line:rgba(255,255,255,.12);--line-soft:rgba(255,255,255,.07)}
/* the shared block hardcodes the receipts-ladder labels dark (#2a2318/#141109)
   for the WHITE receipts card; arrae's play-04 price ladder reuses .lrow on the
   DARK photocopy card, so re-light the labels here (id beats the shared rule). */
.zone--light #plays .lrow .ln{color:var(--soft)}
.zone--light #plays .lrow .lv{color:var(--ink)}

/* ---- 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)}
/* receipts chart sits on the white card — dark labels + visible grid */
.zone--light .chart .dlab{fill:var(--ink)}
.zone--light .chart .grid{stroke:rgba(30,22,10,.12)}

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

/* Play 06 triptych overflow at ≤390w: the hook-card images push the 1fr grid
   tracks past the viewport (1fr defaults to min-width:auto), blowing the play
   grid to ~419px. Cap the play + triptych tracks to minmax(0,1fr) and let the
   triptych items collapse below their content width so the width:100% images
   shrink to fit. Play-grid override scoped to ≤560 (where the grid is already
   single-column) so the 561–640 two-column layout is untouched; triptych
   scoped to ≤640 (where it stacks). */
@media(max-width:560px){
  .play,
  .zone--light #plays .play{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
  .triptych{grid-template-columns:minmax(0,1fr)}
  .triptych,.triptych>*{min-width:0}
}


/* ============================================================
   RESTYLE 2026-07 — WE-COMMERCE PATCH BLOCK  (arrae pilot)
   ------------------------------------------------------------
   Every rule below is an OVERRIDE appended after the shared
   layer, so it can be copy-pasted verbatim into a drifted clone
   without hunting line numbers. Rules marked ARRAE-ONLY depend
   on arrae's bespoke artifact markup; everything else is
   set-wide. See .restyle-2026-07/TEARDOWN-PATTERN-PATCHES.md.
   ============================================================ */

/* ---- P1 · IMAGE POP-IN: blurred → sharp (SET-WIDE) ----------
   Was: gray-blue --mat placeholder + page grain, then the decoded
   image SNAPS in (no opacity/filter transition anywhere).
   Now: the incoming image arrives out of focus and resolves.
   FILTER-ONLY on purpose — .browser-shot img, .hook-card and
   .jar-frame all animate `transform` for zoom/hover, and .rv sets
   transform:none at higher specificity. Touching transform here
   would fight both. The class is applied by JS (no markup edit),
   and only to images that are NOT already decoded, so a cached
   image never flashes blurred. */
.js .we-imgload{filter:blur(18px);opacity:.28;
  transition:filter .6s cubic-bezier(.2,.65,.25,1),opacity .5s ease,transform .55s cubic-bezier(.33,.12,.2,1)}
.js .we-imgload.is-loaded{filter:blur(0);opacity:1}
@media(prefers-reduced-motion:reduce){
  .js .we-imgload{filter:none;opacity:1;transition:none}
}

/* ---- P2 · CHART: halftone fill + labels straddling the tear ---
   (SET-WIDE pattern; the geometry is per-page)
   2a. The area fill was `linear-gradient(rgba(66,177,255,.28) →
       rgba(66,177,255,0))` / a color-mix alpha wash — an OPACITY
       ramp, which gotcha 17 + the halftone-fade-fills skill both
       reject. It is now a dot-SIZE ramp: JS paints solid #42b1ff
       circles whose AREA equals the local tone (50% at the ink
       edge → 10% at the baseline). Zero alpha in the ink. */
.js .chart .area{fill:none}                 /* geometry only — the clip source */
.chart .halftone{fill:#42b1ff}
.js .chart .halftone{opacity:0;transition:opacity .8s ease .55s}
.js .receipts.in .chart .halftone{opacity:1}
@media(prefers-reduced-motion:reduce){
  .js .chart .halftone{opacity:1;transition:none}
}
/* 2b. Data labels sat ABOVE the plot line and covered the chart.
   They now straddle the ink edge: vertical centre ON the line, so
   half the label prints over ink and half over paper. Baked y
   values below are the no-JS fallback; straddleChartLabels() in
   the page JS recomputes them exactly from the polyline. */
.zone--light .chart .dlab{fill:#141109;paint-order:stroke;
  stroke:rgba(255,255,255,.72);stroke-width:2.6px;stroke-linejoin:round}

/* 2c. The three black receipt slips are pulled up 60px and were
   covering the chart's x-axis day labels. Reserve their lane.
   (SET-WIDE instance of: floating cards must not cover content.) */
.zone--light .receipts .chart-wrap{padding-bottom:58px}

/* ---- P3 · NO CARD-IN-CARD (SET-WIDE) -------------------------
   `.artifact` painted a bordered, filled, shadowed panel INSIDE
   the black photocopy play card — a card in a card. It is now a
   flat run of content in the parent card, with the hand tag as a
   normal heading instead of a notch punched through a border.
   Pure CSS: no markup change needed in any clone. */
.artifact{position:relative;border:0;border-radius:0;background:none;
  box-shadow:none;padding:0;margin:26px 0 6px}
.art-tag{position:static;top:auto;left:auto;display:inline-block;
  background:none;padding:0;margin:0 0 14px}
.art-note{margin-top:16px}

/* ---- P4 · REAL-CAPTURE SCREENSHOT SLOT (SET-WIDE) ------------
   Replaces hand-rebuilt fake UI (search bars, ad-library panels,
   dashboards) with the real screenshot. Full-bleed inside the
   parent card — no nested panel chrome, nothing cropped. */
.we-shot{position:relative;display:block;margin:0;border-radius:5px;
  overflow:hidden;background:#fff;box-shadow:var(--shadow-1)}
.we-shot img{display:block;width:100%;height:auto}
.we-cap{font-family:var(--mono);font-size:.62rem;color:var(--dim);
  line-height:1.6;margin-top:12px}

/* ---- P5 · BIG NUMBERS GET FL-BOLD SCALE (SET-WIDE) -----------
   The channel-escalator stages were .82rem mono in a 118px column
   inside yet another bordered panel: tiny, gappy, and the panel
   chrome crowded them. Now: no panel (P3 doctrine), FL-bold
   numerals at display scale, and a progressive indent so the three
   stages still read as steps on an escalator. */
.esc{display:grid;gap:0;margin:22px 0 4px}
.rung{display:grid;grid-template-columns:minmax(0,auto) 1fr;gap:6px 24px;
  align-items:center;background:none;border:0;border-top:1px solid var(--line);
  border-radius:0;padding:20px 0 18px;transition:none}
.rung:first-child{border-top:0;padding-top:2px}
.rung.r1{margin-right:0}
.rung.r2{margin-right:0;padding-left:24px}
.rung.r3{margin-right:0;padding-left:48px}
.rung .stg{font-family:"FLBold","Arial Black",sans-serif;font-weight:700;
  font-size:clamp(2.1rem,4.6vw,3.05rem);line-height:.9;letter-spacing:-.015em;
  color:var(--brand-soft);white-space:nowrap;font-variant-numeric:tabular-nums;
  transform:rotate(-1.4deg);transform-origin:left}
.rung .stg small{display:block;font-family:var(--mono);font-weight:400;
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-top:9px;transform:rotate(1.4deg);transform-origin:left}
.rung .mv{font-size:15px;line-height:1.5;color:var(--soft)}
.rung:hover{transform:none;border-color:var(--line);box-shadow:none}
@media(max-width:620px){
  .rung{grid-template-columns:minmax(0,1fr);gap:10px;padding:18px 0 16px}
  .rung.r2,.rung.r3{padding-left:0}
  .rung .stg{font-size:2.1rem}
}

/* ---- P6 · CARD-HOVER CLEANUP (SET-WIDE) ----------------------
   Legacy dark-mode hovers (the block ~20 lines above the "de-glow
   the chassis" rule) still painted a BLUE-TINTED GLOW plus a
   hard border-colour stroke on hover. Drop the stroke and the
   blue; keep the lift and a neutral shadow. */
.receipt:hover,.rung:hover,.day:hover{border-color:var(--line);
  box-shadow:0 18px 40px -26px rgba(var(--sh-rgb),.55)}
.hook-card:hover{box-shadow:0 38px 82px -44px rgba(0,0,0,.75)}
.zone--light .receipt:hover{border-color:var(--line);
  box-shadow:0 18px 40px -26px rgba(30,22,10,.4)}
.zone--light .receipt-row .receipt:hover{box-shadow:none;border:0}

/* ---- P7 · FOOTER TEXTURE (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 the
   footer exposed the textured canvas against flat black and read
   as a gap. Give the footer the same stock and the seam cannot
   be seen, whatever the platform wrapper does below it. */
.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 · HOOK-CARD CAPTIONS STOPPED COVERING THE CREATIVE ---
   (SET-WIDE instance of: floating cards must not cover content.)
   The caption was absolutely positioned over the bottom of a 9:13
   creator video and, at three-up widths, wrapped to five lines
   that buried the frame. It now sits under the image, in flow. */
.hook-card{display:flex;flex-direction:column;background:#0f1116}
.hook-card img{aspect-ratio:9/12}
.hook-card figcaption{position:static;left:auto;right:auto;bottom:auto;
  padding:12px 13px 13px;border-radius:0;background:none;border:0;
  border-top:1px solid var(--line-soft);
  backdrop-filter:none;-webkit-backdrop-filter:none}

/* ---- P9 · ARRAE-ONLY: catalog discipline → two paper cards ----
   The two-bar "SKU war" chart carried no information a number
   couldn't: one 5%-wide dot vs one full bar. Replaced with two
   white torn-paper cards and the count set at FL-bold display
   scale — the comparison is the numbers, so show the numbers. */
.skucards{display:grid;grid-template-columns:1fr 1fr;gap:14px 30px;margin:2px 0 4px}
@media(max-width:560px){.skucards{grid-template-columns:1fr;gap:22px}}
.skucard{position:relative;
  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;padding:20px 22px 22px}
.sk-l{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:#4a4234}
.sk-n{display:block;font-family:"FLBold","Arial Black",sans-serif;font-weight:700;
  font-size:clamp(3.6rem,9vw,5.6rem);line-height:.82;letter-spacing:-.03em;
  color:#141109;margin:10px 0 4px;font-variant-numeric:tabular-nums}
.sk-s{display:block;font-family:var(--mono);font-size:.74rem;color:#2a2318;line-height:1.5}
.sk-s em{font-style:normal;font-weight:650;color:#141109}
/* arrae's number carries the blue painted underline (a graphical
   brand fill, so it keeps the blue); the category norm does not */
.skucard--win .sk-n{position:relative;display:inline-block}
.skucard--win .sk-n::after{content:"";position:absolute;left:-2%;right:-4%;bottom:2px;height:17px;
  background:#42b1ff;-webkit-mask:var(--paint-underline) center/100% 100% no-repeat;
  mask:var(--paint-underline) center/100% 100% no-repeat;
  transform:rotate(-1.4deg);pointer-events:none}
.skucard--norm .sk-n{color:#8d8474}
.skucard--norm .sk-s em{color:#4a4234}
/* torn on opposite vertical edges, each its own tile + tilt + texture offset */
.sk-w1 .skucard{rotate:-1.4deg;padding-left:calc(22px + var(--tear-amp));--pp-sp:120px 70px;--pp-gp:40px 150px;
  -webkit-mask-image:var(--tv-l1),linear-gradient(#000,#000);mask-image:var(--tv-l1),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}
.sk-w2 .skucard{rotate:1.1deg;padding-right:calc(22px + var(--tear-amp));--pp-sp:200px 130px;--pp-gp:150px 30px;
  -webkit-mask-image:var(--tv-r2),linear-gradient(#000,#000);mask-image:var(--tv-r2),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}
/* photocopy edge-riders, one per slip */
.sk-w1 .skucard::before{content:"";position:absolute;pointer-events:none;z-index:0;right:-40px;top:14%;
  width:104px;height:86px;background:var(--we-tex-speck-5) center/contain no-repeat;
  opacity:.28;mix-blend-mode:multiply}
.sk-w2 .skucard::before{content:"";position:absolute;pointer-events:none;z-index:0;left:12%;bottom:-32px;
  width:96px;height:80px;background:var(--we-tex-speck-2) center/contain no-repeat;
  opacity:.26;mix-blend-mode:multiply;transform:scaleX(-1)}

/* ---- P10 · ARRAE-ONLY: "1 shoot → 3 ads" → torn paper strip ---
   Was a blue-tinted rounded box with the ratio at 1.75rem. Now a
   white paper strip torn on its right edge, ratio at FL-bold
   display scale. Shadow lives on the .slip-sh wrapper (a mask
   clips the element's own drop-shadow). */
.trip-note{display:grid;grid-template-columns:minmax(0,auto) 1fr;align-items:center;
  gap:10px 24px;margin-top:20px;rotate:-.7deg;
  background:var(--pp-speck-w) 30px 210px/var(--pp-s-size) repeat,
             var(--pp-grain-w) 220px 80px/var(--pp-g-size) repeat #fff;
  background-blend-mode:multiply,multiply;
  border:0;border-radius:0;padding:20px calc(22px + var(--tear-amp)) 21px 22px;
  -webkit-mask-image:var(--tv-r3),linear-gradient(#000,#000);mask-image:var(--tv-r3),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}
.trip-note b{font-family:"FLBold","Arial Black",sans-serif;font-weight:700;
  font-size:clamp(1.95rem,4.4vw,2.85rem);line-height:.92;letter-spacing:-.015em;
  color:#141109;white-space:nowrap;transform:rotate(-1.1deg);transform-origin:left;text-shadow:none}
.trip-note span{font-size:.84rem;line-height:1.5;color:#2a2318}
@media(max-width:560px){.trip-note{grid-template-columns:minmax(0,1fr)}}

/* ---- P11 · ARRAE-ONLY: the 9pm-query slot is a real capture ---
   Google's own autocomplete replaces the hand-rebuilt search UI,
   so the old .sb-* chrome is retired. Name chips keep their
   spacing under the new slot. */
.searchbar .name-chips{margin:16px 0 0}

/* ---- P12 · ARRAE-ONLY: storefront capture is full-width + uncut -
   The slot was aspect-ratio 1500/1513 (near square) with
   object-fit:cover, so a 3:2 storefront capture lost both sides
   and rendered soft. The slot now matches the capture's own 8:5,
   so nothing is cropped and the 2400px source is sharp at 2x.
   PATTERN (set-wide): the screenshot slot takes the capture's
   aspect ratio — never the other way round. */
.browser-shot{aspect-ratio:8/5}
@media(max-width:759px){.browser-shot{aspect-ratio:auto}}

/* ---- P13 · round-2 corrections after visual review ------------
   a) The shared dark-card rule `.zone--light #plays .pc-top em`
      forces em to #fff — which made "$100M"/"dilution" invisible
      on the new WHITE paper chits. Match its specificity.
      (Trap for every clone that puts white paper on a play card.) */
.zone--light #plays .pc-top .sk-s em{color:#141109}
.zone--light #plays .pc-top .skucard--norm .sk-s em{color:#4a4234}
/* b) the chits are content-width paper, not full-bleed panels —
      the number is the object, so it sets the width */
.skucards{display:flex;flex-wrap:wrap;align-items:flex-start;gap:22px 36px}
.skucard{min-width:192px}
.sk-n{font-size:clamp(4.2rem,10vw,6.4rem)}
.skucard--win .sk-n::after{left:-5%;right:-7%;bottom:.02em;height:.19em}
.skuchips{gap:15px 7px}
/* c) source captions read as captions, not as a wall of label type */
.we-cap{max-width:66ch}
/* d) the ratio strip: headline on its own line, note in a
      comfortable measure underneath */
.trip-note{grid-template-columns:minmax(0,1fr);gap:13px}
.trip-note b{font-size:clamp(2.3rem,5.4vw,3.6rem)}
.trip-note span{max-width:66ch}
/* e) roomier callout slips wrap to fewer lines, which is what
      keeps callout 3 clear of BOTH the press bar it must not
      cover and the torn bottom edge it must not fall through.
      MUST stay behind min-width:760px. The shared layer unstacks
      the callouts into a full-width card list at max-width:759px
      via `.anno,.anno.up{position:static;width:auto}`; an
      unscoped width here is equal specificity and later in the
      file, so it wins and the phone list renders as a ~180px
      ribbon inside a full-width card. The widening is only ever
      wanted while the chips float over the screenshot. */
@media(min-width:760px){
  .anno{width:clamp(180px,22vw,262px)}
}
#exhibit .evidence{margin-bottom:0}  /* BATCH: +8px replaced by section padding (V3-F2) */
.hook-card figcaption b{font-size:.74rem}
/* f) the painted underline hangs off the numeral's baseline, not
      the FL face's very deep line box */
.skucard--win .sk-n::after{bottom:.05em}

/* ---- P14 · HERO HALFTONE POP-IN (SET-WIDE) -------------------
   The image Chey was actually watching snap in is the hero
   halftone — a CSS background on .hero-bg-img, not an <img>, so
   the <img> loader in P1 never touched it. The blur knob already
   exists (--hz-blur, wired for the dev tweak panel), so the print
   simply starts out of focus and resolves when the file lands.
   .hero-bg-img is NOT a .rv element, so transform is safe here. */
.js .hero-bg-img{--hz-blur:30px;opacity:.2;transform:scale(1.09);
  transition:filter .85s cubic-bezier(.2,.65,.25,1),
             transform .95s cubic-bezier(.2,.65,.25,1),
             opacity .65s ease}
.js .hero-bg.is-loaded .hero-bg-img{--hz-blur:0px;opacity:1;
  transform:scale(var(--hz-scale,1.03))}
@media(prefers-reduced-motion:reduce){
  .js .hero-bg-img{--hz-blur:0px;opacity:1;transform:scale(var(--hz-scale,1.03));transition:none}
}

/* ---- P15 · SWEEP: the remaining card-in-card panels ----------
   Same disease as P3, found by sweeping the page: the price
   ladder (play 04) and the launch cadence (play 05) were also
   bordered, filled panels sitting inside the black photocopy
   card. Flattened to content. The .day chips inside the cadence
   stay boxed — a grid of small labelled cells reads as data, not
   as a card. (SET-WIDE wherever a clone puts a panel in a card.) */
.zone--light #plays .ladder,
.zone--light #plays .cadence{background:none;border:0;border-radius:0;
  padding:0;margin:22px 0 6px}
.zone--light #plays .cadence .note{margin-top:16px}

/* ---- P16 · WIDE CAPTURES STAY LEGIBLE ON PHONES (SET-WIDE) ---
   A 4-up Ad Library grid squeezed into a 340px column is mush.
   Below 700px the capture keeps a legible intrinsic width and the
   slot scrolls horizontally instead — the same affordance
   .chart-wrap already uses for the sales chart. --shot-min is set
   per capture in the markup. */
@media(max-width:700px){
  .we-shot{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .we-shot img{min-width:var(--shot-min,0px)}
}

/* ---- PARITY (DECISIONS §10) · retire the darkened blue at source -
   The pilot's house-rule block above routed .k and .pn small to ink
   but deliberately left the play numerals on the shared darkened
   blue, flagged for the lead. That decision is now made: gotcha 10
   wins — one blue #42b1ff, and blue text that fails on cream
   becomes INK, never a dimmed blue. Pure #42b1ff survives only as a
   GRAPHICAL fill (the chart halftone, the painted underline mask,
   the pull rule). Retiring --brand-ink at its source is correct in
   both scopes because --ink is dark on cream and light inside the
   dark photocopy cards. Applied identically on rhode, medicube and
   im8 so the four files stay in lockstep. */
.zone--light{--brand-ink:var(--ink)}
.zone--light .pull{border-left-color:#42b1ff}
.zone--light .play .pn b{color:var(--ink)}
.zone--light .steal .tag{color:var(--ink)}
.zone--light #plays .play .pn b{color:#141109}
.zone--light #plays .steal .tag{color:#42b1ff}

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

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

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

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

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

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

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

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

/* ---- BATCH · mobile rag ate the last callout's text (V3-F2 / V5-F5) ----
   Below 760px the callouts unstack into full-width text rows and the last
   one ran under the ~72px rag: measured 15px from the last text baseline to
   the section's bottom edge, against 101px on elf and 141px on rhode. The
   fix goes on the SECTION, never on `.evidence` — a margin there collapses
   through the section and silently does nothing (banner item 7), which is
   how a callout limit got tuned against a margin that never applied.
   DESKTOP IS DELIBERATELY UNTOUCHED: this page's desktop rag measures clean
   and, where it bites, it bites imagery rather than type — the exemption
   that holds at 1440 does not transfer to stacked mobile text. */
@media(max-width:759px){#exhibit{padding-bottom:calc(var(--tear-h) + 16px)}}

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

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

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

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

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

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

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