: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:"E.L.F.";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 elf 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-elf-halftone) —
     relative asset refs inside CSS do NOT resolve on the Fluid CDN */
  background:var(--we-elf-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))}}

/* ============================================================
   e.l.f. (net-new): set-wide harmonization overrides, appended
   after the shared We-Commerce brand layer (which stays byte-identical
   to teardown-rhode.css). Two cross-clone fixes applied uniformly to all
   teardowns — mirror these in the sibling sheets.
   ============================================================ */

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

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

/* ============================================================
   RESTYLE 2026-07 — WE-COMMERCE PATCH BLOCK  (e.l.f.)
   ------------------------------------------------------------
   Ported from the arrae pilot. Every rule is an OVERRIDE appended
   after the shared layer, so cascade order does the work and no
   drifted rule has to be hunted down and rewritten in place.
   See .restyle-2026-07/TEARDOWN-PATTERN-PATCHES.md
   ============================================================ */

/* ---- P1 · IMAGE POP-IN: blurred → sharp (SET-WIDE) ----------
   Was: a gray-blue --mat placeholder under the page grain, then
   the decoded image SNAPS in (transform was the only transition).
   Now the incoming image arrives out of focus and resolves.
   FILTER + OPACITY ONLY — .rv sets transform:none at higher
   specificity, and the storefront zoom already owns transform. */
.js .we-imgload{filter:blur(18px);opacity:.28;
  transition:filter .6s cubic-bezier(.2,.65,.25,1),opacity .5s ease,transform .55s cubic-bezier(.33,.12,.2,1)}
.js .we-imgload.is-loaded{filter:blur(0);opacity:1}
@media(prefers-reduced-motion:reduce){
  .js .we-imgload{filter:none;opacity:1;transition:none}
}

/* ---- P14 · HERO HALFTONE POP-IN (SET-WIDE) -------------------
   The hero print is a CSS background on .hero-bg-img, not an
   <img>, so P1's loader never touches it — and it is the image
   Chey actually watched snap in. .hero-bg-img is NOT an .rv
   element, so transform is safe here. */
.js .hero-bg-img{--hz-blur:30px;opacity:.2;transform:scale(1.09);
  transition:filter .85s cubic-bezier(.2,.65,.25,1),
             transform .95s cubic-bezier(.2,.65,.25,1),
             opacity .65s ease}
.js .hero-bg.is-loaded .hero-bg-img{--hz-blur:0px;opacity:1;
  transform:scale(var(--hz-scale,1.03))}
@media(prefers-reduced-motion:reduce){
  .js .hero-bg-img{--hz-blur:0px;opacity:1;transform:scale(var(--hz-scale,1.03));transition:none}
}

/* ---- P2a · CHART FILL: alpha ramp → dot-SIZE ramp -----------
   The area was fill:url(#tdArea), a transparent blue wash. Tone
   is now carried entirely by dot AREA (50% at the ink edge →
   10% at the baseline) in solid #42b1ff with zero alpha, per
   gotcha 17 / the halftone-fade-fills skill. .area survives as
   geometry only — it is the clip source, and the no-JS fallback
   keeps the old wash. */
.js .chart .area{fill:none}
.chart .halftone{fill:#42b1ff}
.js .chart .halftone{opacity:0;transition:opacity .8s ease .55s}
.js .receipts.in .chart .halftone{opacity:1}
@media(prefers-reduced-motion:reduce){
  .js .chart .halftone{opacity:1;transition:none}
}

/* ---- P2b · DATA LABELS STRADDLE THE INK EDGE ----------------
   They sat clear above the plot line and covered the chart. Each
   label's vertical centre now sits ON the line, so half prints
   over ink and half over paper. Half the glyph lands on solid
   ink, so it needs a hairline paper halo to stay legible without
   going grey. */
.zone--light .chart .dlab{fill:#141109;paint-order:stroke;
  stroke:rgba(255,255,255,.72);stroke-width:2.6px;stroke-linejoin:round}

/* ---- P2c · RECEIPT SLIPS WERE COVERING THE BOTTOM ROW -------
   e.l.f.'s receipts artifact is the .ladder bar chart, not the
   SVG line chart the siblings use, so the lane to reserve is the
   ladder's — the slips are pulled up ~60px and landed on the FY26
   row. Reserve it instead of moving the slips. (Set-wide instance
   of: a floating card must never cover content.) */
.zone--light .receipts .chart-wrap{padding-bottom:58px}
.zone--light .receipts #engbars{padding-bottom:34px}

/* ---- P3 · NO CARD-IN-CARD, AND THE ARTIFACT FOLLOWS THE SOURCE
   (banner item 8) ------------------------------------------------
   Was: a filled, rounded, bordered `.pm-img` plate inside the black
   photocopy play card — a card in a card, with the panel chrome the
   most visible thing about it. The source here is a transparent-background product cut-out, so
   per the rule the artifact is a WHITE PAPER CUTTING: the product
   printed on paper stock, torn along the bottom edge and tilted, as
   if pasted onto the card. Exactly one card edge remains, the outer
   one.
   `.pm-w` is the UNMASKED wrapper — it carries the tilt and casts
   the shadow, because a mask clips the element's own drop-shadow
   (gotcha 4). Sizing lives here with `width:min()` and never
   `min-width`: a grid track's automatic minimum is min-content, so
   a min-constraint anywhere in the .pm-img -> .pc-top -> .pc -> 1fr
   chain would propagate up and blow the play card past the viewport
   (banner item 11). */
.zone--light #plays .pc-top .pm-w{width:min(344px,68%);margin:28px 0 12px;
  rotate:-1.4deg;filter:var(--slip-shadow)}
.zone--light #plays .pc-top .pm-img{position:relative;overflow:visible;
  background:var(--pp-speck-w) 120px 70px/var(--pp-s-size) repeat,
             var(--pp-grain-w) 40px 150px/var(--pp-g-size) repeat #fff;
  background-blend-mode:multiply,multiply;
  border:0;border-radius:0;margin:0;box-shadow:none;
  padding:13px 13px calc(18px + var(--tear-amp));
  -webkit-mask-image:var(--tx2),linear-gradient(#000,#000);
          mask-image:var(--tx2),linear-gradient(#000,#000);
  -webkit-mask-repeat:repeat-x,no-repeat;mask-repeat:repeat-x,no-repeat;
  -webkit-mask-size:300px 48px,100% calc(100% - 46px);
          mask-size:300px 48px,100% calc(100% - 46px);
  -webkit-mask-position:bottom left,top;mask-position:bottom left,top}
.zone--light #plays .pc-top .pm-img img{display:block;width:100%;height:auto;
  border-radius:0;mix-blend-mode:multiply}
/* Trap B: the shared `#plays .pc-top strong,em{color:#fff}` rule and the
   existing white `.pm-cap b` would print white-on-white on paper stock.
   Paper inks, hardcoded. */
.zone--light #plays .pc-top .pm-cap{border-top:0;padding:12px 2px 0;margin:0;
  color:#2a2318;font-size:.68rem;line-height:1.55;background:none}
.zone--light #plays .pc-top .pm-cap b{color:#141109}
/* a photocopy speck rides the cutting's outer edge, half cropped by the mask */
.zone--light #plays .pc-top .pm-img::after{content:"";position:absolute;
  pointer-events:none;z-index:2;right:-38px;top:14%;width:104px;height:86px;
  background:var(--we-tex-speck-6) center/contain no-repeat;
  opacity:.28;mix-blend-mode:multiply}

/* ---- P6 · CARD-HOVER CLEANUP (SET-WIDE) ---------------------
   The legacy dark-mode hover block still painted a blue-tinted
   glow plus a hard border-colour stroke, ~35 lines above the
   "de-glow the chassis" rule that was meant to replace it. Both
   were live. Drop the stroke and the blue; keep the lift and a
   neutral shadow. --sh-rgb is re-scoped warm inside .zone--light,
   so one rule casts neutral on dark and warm on cream. */
.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 on a fixed attachment. Any
   trailing strip below it exposed textured paper against flat
   black and read as a gap (row-mean luminance 8.0 vs 23.2). Same
   stock, no seam, whatever the platform wrapper puts below. */
.footer{border-top:none;margin-top:0;
  padding:calc(var(--tear-h) * .55 + 10px) 0 60px;
  background-color:var(--bg);background-image:var(--we-paper-dark);
  background-size:cover;background-position:center;background-attachment:fixed}

/* ---- P8 · THE SLOT TAKES THE CAPTURE'S ASPECT RATIO ---------
   The slot was aspect-ratio:1500/1513 against a 1500x1719 source,
   so object-fit:cover silently ate the bottom ~12% of the
   storefront — which is where the values ticker lived, and is a
   large part of why callout 2 could not sit next to the thing it
   describes (the 44:55 note). 1500px was also under 2x for a
   ~918px slot, so it rendered soft. The exhibit is now a fresh
   2400px capture (2400x3116, no promo modal, no cookie panel) and
   the slot matches it exactly, so nothing is cropped. The plate is
   framed so the values ticker lands at ~64-68% of frame height
   with real content above AND below it, instead of jammed against
   the bottom edge where callout 2 could not sit next to it — which
   was the substance of the 44:55 note. The rule generalises: the
   slot takes the capture's ratio, never the other way round. */
.browser-shot{aspect-ratio:2400/3116}
@media(max-width:759px){.browser-shot{aspect-ratio:auto}}

/* ---- P5 · PRE-HOVER STATES: VISIBLE, IN-FRAME, NOT COVERING -
   #zone-dark-1 is mask-clipped for the torn browser bite, so the
   bottom ~9-10% of the shot is eaten by the rag and anything
   parked there is cut off BEFORE anyone hovers. Roomier slips
   also wrap to fewer lines, which is usually what makes a callout
   fit at all. Never transform: on .anno — it is inside the .rv
   system (gotcha 6). */
@media(min-width:760px){
  .anno{width:clamp(180px,22vw,262px)}
}
/* Below 760px the shared layer drops the callouts out of absolute
   positioning into a stacked list under the capture. The width
   clamp above MUST NOT leak into that layout (equal specificity,
   later in the file, so it would win and squeeze every slip to a
   180px ribbon). */
@media(max-width:759px){
  .anno,.anno.up{width:auto}
}

/* ---- P5b · CLEAR THE RAG WITH PADDING, NOT MARGIN ------------
   The zone's torn bottom mask eats roughly the last 120px, and this
   capture carries type right down to its bottom edge. `margin-bottom`
   on `.evidence` does NOTHING about it — it collapses out through the
   section and the zone. Measured before this rule: the margin asked
   for 8px and the real clearance from the capture's bottom to the
   masked zone bottom was **1px**, i.e. the whole bottom row was in
   the teeth. Padding on the SECTION cannot collapse, and deriving it
   from --tear-h keeps it correct at both breakpoints (126px desktop,
   86px where the token drops to 72px). */
#exhibit{padding-bottom:calc(var(--tear-h) + 14px)}
#exhibit .evidence{margin-bottom:0}

/* ---- P10 · CALLOUT CAPTIONS MUST NOT COVER THE CREATIVE -----
   Inert on olipop (no .hook-card here) but kept so the block
   stays portable and a later creative row inherits the fix. */
.hook-card{display:flex;flex-direction:column;background:#0f1116}
.hook-card img{aspect-ratio:9/12}
.hook-card figcaption{position:static;left:auto;right:auto;bottom:auto;
  padding:12px 13px 13px;border-radius:0;background:none;border:0;
  border-top:1px solid var(--line-soft);
  backdrop-filter:none;-webkit-backdrop-filter:none}
.hook-card figcaption b{font-size:.74rem}

/* ---- P16 · WIDE CAPTURES STAY LEGIBLE ON PHONES -------------
   A wide capture squeezed into a 340px column is mush. Below
   700px it keeps a legible intrinsic width and the slot scrolls
   instead — the affordance .chart-wrap already uses. */
.we-shot{position:relative;display:block;margin:0;border-radius:5px;
  overflow:hidden;background:#fff;box-shadow:var(--shadow-1)}
.we-shot img{display:block;width:100%;height:auto}
.we-cap{font-family:var(--mono);font-size:.62rem;color:var(--dim);
  line-height:1.6;margin-top:12px;max-width:66ch}
@media(max-width:700px){
  .we-shot{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .we-shot img{min-width:var(--shot-min,0px)}
}

/* ---- BLUE RULE (DECISIONS) ----------------------------------
   One blue, #42b1ff. Where it fails contrast on cream the answer
   is ink — never a darkened blue, which is what --brand-ink's
   color-mix(#42b1ff 58%, #0f3350) was (gotcha 10). Killing the
   var at the source retires every remaining darkened-blue TEXT
   use in one line; the two literal color-mixes that don't read
   the var are handled underneath. Pure #42b1ff survives only as
   a GRAPHICAL fill (chart ink, painted underline, float chips,
   bars, and every accent on the dark photocopy cards). */
.zone--light{--brand-ink:var(--ink)}
.zone--light .play .pn b{color:var(--ink)}
.zone--light #plays .play .pn b{color:#141109}
.zone--light .pull{border-left-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}}

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

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

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

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

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

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

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