/* ============================================================
   TEARDOWNS INDEX — "The Index"
   A printed contents sheet torn out of the same publication as the
   teardown pages. Dark masthead zone (kicker + headline + deck + stat
   tiles) tears down into a light cream paper zone holding 19 typographic
   dossier cards, which tears up into a dark sourced footer.

   House law compliance:
   • ONE blue (#42b1ff) — lives only on the DARK zones (kicker, prog bar,
     footer source links). Anywhere the ground is white paper or cream the
     mark is INK, never a darkened blue: that includes the stat units and
     the headline emphasis, which is now a white tape strip rather than a
     blue underline under blue text.
   • FLBold headlines / kicker / numerals, WeHaas labels & eyebrows. No
     monospace anywhere. Every ink tint is checked to AA at its own size.
   • Dark side owns every tear (.tstrip strips are children of dark zones),
     and clearance around a tear comes from the --tear-* system below, never
     from a hand-tuned pixel value.
   • Textures: the two paper stocks and the speck PNGs come from
     theme.liquid :root; the procedural paper, the tear tiles and the stamp
     ink are declared here as data-URIs (no CDN wiring needed for those).
   ============================================================ */

:root{
  --idx-hand:"FLBold","Arial Black",sans-serif;
  --idx-mono:"WeHaas","Neue Haas Display","Helvetica Neue",sans-serif;
  --idx-sans:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  --bg:#05070a;--ink:#f7f8fa;--soft:#f7f8fa;--dim:#f7f8fa;
  --panel:#0b0f16;--panel-2:#0d1219;
  --line:rgba(255,255,255,.1);--line-soft:rgba(255,255,255,.06);
  --blue:#42b1ff;--brand:#42b1ff;
  --max:1180px;
  /* shadow / tear tokens (mirrors teardown-rhode.css) */
  --sh-rgb:0,0,0;
  /* Tier 1 as a FILTER, not a box-shadow: the card's torn edge is a mask, and
     a mask clips a box-shadow square. drop-shadow() has no spread parameter,
     so rhode's `0 16px 34px -20px` cannot be transcribed — these are re-tuned
     by eye to the same visual weight, or the cards sit in a dark halo. */
  --shadow-1-d:drop-shadow(0 1px 2px rgba(var(--sh-rgb),.17)) drop-shadow(0 9px 14px rgba(var(--sh-rgb),.17));
  --shadow-1-d-hover:drop-shadow(0 2px 3px rgba(var(--sh-rgb),.2)) drop-shadow(0 17px 23px rgba(var(--sh-rgb),.22));
  --slip-shadow:drop-shadow(0 1px 1px rgba(var(--sh-rgb),.18)) drop-shadow(0 10px 16px rgba(var(--sh-rgb),.26));
  --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)));
  --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));

  /* ---- TEAR SPACING SYSTEM (see the note above .tear-clear-* below) ----
     --tear-h        rag depth of a full page-boundary tear
     --tear-gap-dark breathing room a DARK surface keeps above its own bottom
                     edge (its strip hangs OUTSIDE the box, so the tear height
                     must NOT be added here)
     --tear-gap-light breathing room a CREAM surface keeps clear of the deepest
                     rag point (the strip overlaps INTO the box, so the tear
                     height MUST be added here)
     --tear-amp      extra padding an ARTIFACT reserves on a torn side       */
  --tear-h:112px;--tear-gap-dark:44px;--tear-gap-light:58px;--tear-amp:26px;

  /* ---- PROCEDURAL PAPER (verbatim from teardown-rhode.css:1-6) ----
     White paper = the two layers multiply-blended over #fff.
     Black paper = the two layers screen-blended over #14120d.
     Per-element --pp-sp / --pp-gp offsets de-duplicate the pattern between
     neighbours. Pure data-URIs, so no theme.liquid :root wiring is needed. */
  --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;

  /* ---- ARTIFACT TEAR TILES (verbatim from teardown-rhode.css:817-828) ----
     Seamless repeating tiles: 300px along the edge, 48px band. Rag density is
     therefore identical on a 90px chip and a 1200px strip. The --tx tiles tear
     a horizontal edge, the --tv-l / --tv-r tiles a vertical one. */
  --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-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");

  /* ---- RUBBER-STAMP BROKEN INK ----
     Net-new per BRAND-SYSTEM-INDEX §10 ("a real rubber stamp is net-new work;
     the --pp-speck-* threshold noise is the obvious ingredient"). Same recipe
     as --pp-speck-*, but the discrete transfer runs on the ALPHA channel so it
     works as a plain alpha mask (no mask-mode:luminance needed) — it punches
     ~10% of the impression away, which is what a dry stamp pad looks like. */
  --stamp-ink:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='k'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.42'%20numOctaves='3'%20seed='19'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='discrete'%20tableValues='0%200%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23k)'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}

/* base — paper-dark stock under everything so no zone gap ever shows white
   (this page does not load the teardown body background, so set it here) */
html{scroll-behavior:smooth;background:#05070a}
body{margin:0;font-family:var(--idx-sans);background:#05070a;background-image:var(--we-paper-dark);background-size:cover;background-position:center}

.wide{width:min(var(--max),calc(100% - 44px));margin-inline:auto}

/* scroll progress */
.prog{position:fixed;left:0;top:0;height:2px;width:100%;background:linear-gradient(90deg,var(--blue),var(--brand));transform-origin:left;transform:scaleX(0);z-index:2100;pointer-events:none}

/* ---------- reveals ---------- */
.js .rv{opacity:0;transform:translateY(24px);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}
@media (prefers-reduced-motion:reduce){
  .js .rv{transition:none;opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   NAV — cloned from the teardown pages (paper bar + torn bottom edge)
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:box-shadow .3s,border-color .3s;
  background-color:var(--bg);
  background-image:linear-gradient(rgba(5,7,10,.34),rgba(5,7,10,.52)),var(--we-paper-dark);
  background-size:cover;background-position:center;
  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;text-decoration:none;transition:color .18s ease}
.nav-link:hover,.nav-link:focus-visible{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;text-decoration:none;box-shadow:0 10px 30px -12px rgba(0,0,0,.7);transform:rotate(-.6deg);transition:box-shadow .18s ease,transform .18s ease}
.btn-cta:hover,.btn-cta:focus-visible{box-shadow:0 14px 36px -12px rgba(0,0,0,.85);transform:rotate(-.6deg) translateY(-1px)}

/* teardowns dropdown */
.dd{position:relative}
/* `font:inherit` must come BEFORE font-size — as a shorthand it resets font-size,
   and sitting after it here it silently put the trigger back to the button's
   16px while its sibling .nav-links stayed at .92rem (V6-2). */
.dd-trigger{display:inline-flex;align-items:center;gap:7px;color:var(--dim);background:none;border:0;padding:0;font:inherit;font-size:.92rem;cursor:pointer;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}
/* one combined rule, matching the other 24 stylesheets. The split version
   dropped :focus-within from the PANEL while keeping it on the trigger, so
   tabbing to Intelligence turned the label white and rotated the chevron
   over a panel that stayed hidden — a half-open affordance (V6-3). */
.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(--idx-hand);color:var(--brand);letter-spacing:.02em;font-size:.74rem;text-transform:uppercase;padding:8px 12px 6px;transform:rotate(-.6deg);display:inline-block}
.dd-item{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;border-radius:9px;text-decoration:none;transition:background .18s ease}
.dd-item:hover,.dd-item:focus-visible{background:color-mix(in srgb,var(--brand) 10%,transparent)}
.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(--blue);font-family:var(--idx-mono);font-size:.62rem;font-weight:700;margin-top:1px}
.dd-item .tt{display:block;color:var(--ink);font-size:.86rem;font-weight:600;line-height:1.25}
.dd-item .ds{display:block;color:var(--dim);opacity:.72;font-size:.72rem;line-height:1.3;margin-top:3px}

/* ============================================================
   TORN-PAPER TRANSITIONS — dark strips own every boundary
   ============================================================ */
.zone{position:relative}
.zone--light{z-index:2}
.zone--dark{z-index:3}

/* ---- TEAR CLEARANCE — the rule, not a per-element nudge ----
   A .tstrip is absolutely positioned OUTSIDE the box of the dark zone that
   owns it (top:100% / bottom:100%), so the two sides of a tear have
   asymmetric clearance needs and MUST NOT use the same formula:

   • the DARK side's strip hangs away from its own content, so dark content
     only reserves --tear-gap-dark. Adding --tear-h here double-counts and
     opens a dead black band (the bug on this page's masthead).
   • the CREAM side is overlapped by up to --tear-h of that strip, so cream
     content must reserve --tear-h + --tear-gap-light or the rag bites it
     (the bug on "The Index" — 90px of clearance under a 112px tear).

   Anything that abuts a page-boundary tear declares its side and inherits the
   right number; nothing hard-codes a pixel value against a tear again.        */
.tear-clear-top{padding-top:calc(var(--tear-h) + var(--tear-gap-light))}
.tear-clear-bottom{padding-bottom:calc(var(--tear-h) + var(--tear-gap-light))}
.tear-edge-bottom{padding-bottom:var(--tear-gap-dark)}
.tear-edge-top{padding-top:var(--tear-gap-dark)}

.tstrip{position:absolute;left:0;right:0;height:var(--tear-h);pointer-events:none;z-index:5;
  background:#05070a var(--we-paper-dark) center/cover;
  -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}

/* nav bottom — micro-perforation, rag DOWN onto the dark masthead */
.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")}

/* masthead bottom — full tear, opaque TOP (dark), rag DOWN into cream */
.tstrip--down{top:100%;height:var(--tear-h);margin-top:-1px;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.015%200.005'%20numOctaves='4'%20seed='23'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='35'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-120,-30%201320,-30%201320,58%20-120,96'%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='23'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='35'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-120,-30%201320,-30%201320,58%20-120,96'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E")}

/* footer top — full tear, opaque BOTTOM (dark), rag UP into cream */
.tstrip--up{bottom:100%;height:var(--tear-h);margin-bottom:-1px;filter:var(--tear-sh-up);
  -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,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='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,60%201320,18%201320,150'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E")}

/* ============================================================
   MASTHEAD — dark zone
   ============================================================ */
.zone--dark{background-color:var(--bg);color:var(--ink)}
#zone-masthead{background-color:var(--bg);background-image:var(--we-paper-dark);background-size:cover;background-position:center}

.idx-hero{padding-top:150px}
.idx-hero-grid{display:block}
/* rotate:, not transform:rotate() — .hand-kick is itself an .rv element and
   `.js .rv.in{transform:none}` (0,3,0) outranks `.hand-kick` (0,1,0), so the
   old transform was silently discarded and the kicker rendered dead level. */
.hand-kick{font-family:var(--idx-hand);font-weight:700;font-size:clamp(1.15rem,2.4vw,1.6rem);line-height:1;color:var(--blue);text-transform:none;margin:0 0 20px;rotate:-1.4deg;transform-origin:left;display:inline-block;letter-spacing:.005em}
/* line-height has to leave room for the tape's own box, or its torn top edge
   crops the descenders and comma of the line above */
.idx-hero h1{font-family:var(--idx-sans);font-weight:690;font-size:clamp(2.5rem,5.6vw,4.2rem);line-height:1.16;letter-spacing:-.028em;color:var(--ink);text-wrap:balance;margin:0 0 26px;max-width:16ch}

/* WHITE TAPE — the emphasised phrase is a torn strip of white paper laid over
   the dark masthead, ink-on-tape. It replaces a blue painted underline that
   sat under blue text (color-on-color, forbidden by §7's annotation rule); the
   tape is the annotation now, so the mark can never be the same hue as its
   ground. Torn on both short ends (the .statbar recipe, §1b) with the slip
   shadow cast by the unmasked .tape-sh wrapper — a mask clips its own
   drop-shadow (gotcha 4). */
.tape-sh{display:inline-block;filter:var(--slip-shadow);--sh-rgb:0,0,0}
.idx-hero h1 em.idx-tape{
  display:inline-block;font-style:normal;white-space:nowrap;line-height:1;
  color:#141109;
  background:var(--pp-speck-w) var(--pp-sp,150px 60px)/var(--pp-s-size) repeat,
             var(--pp-grain-w) var(--pp-gp,70px 20px)/var(--pp-g-size) repeat #fff;
  background-blend-mode:multiply,multiply;
  padding:.11em calc(.1em + var(--tear-amp)) .16em;
  margin-inline:calc(-1 * var(--tear-amp)) calc(-1 * var(--tear-amp) + .12em);
  rotate:-1.15deg;
  -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}
.deck{font-family:var(--idx-sans);font-size:clamp(1.06rem,1.9vw,1.24rem);line-height:1.55;color:var(--soft);max-width:52ch;margin:0 0 34px}

/* STAT TILES — one long torn white-paper strip, not a rounded dark panel with
   a hairline grid. Same treatment the teardown heroes use (§1b/§2), which is
   what makes the index read as a page out of the same publication. */
/* the torn tile eats ~24px of the --tear-amp padding, so the wrapper is pulled
   left by that much and the STRIP's paper edge — not its box — lines up with
   the headline column */
.idx-statwrap{display:block;width:calc(100% + var(--tear-amp));max-width:840px;margin-left:calc(-1 * var(--tear-amp));position:relative;filter:var(--slip-shadow);--sh-rgb:0,0,0}
.statbar{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:6px;
  border:0;border-radius:0;overflow:visible;position:relative;
  background:var(--pp-speck-w) var(--pp-sp,0 0)/var(--pp-s-size) repeat,
             var(--pp-grain-w) var(--pp-gp,0 0)/var(--pp-g-size) repeat #fff;
  background-blend-mode:multiply,multiply;
  rotate:-.45deg;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}
.stat{background:none;padding:19px 20px;position:relative}
.stat + .stat::before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;background:rgba(30,22,10,.16)}
.stat .n{font-family:var(--idx-hand);font-variant-numeric:tabular-nums;font-size:clamp(1.55rem,3vw,2.05rem);font-weight:700;color:#141109;letter-spacing:-.02em;line-height:1}
/* the blue would fail contrast on white paper → ink, never a darkened blue
   (§6 blue rule). Blue stays full-strength on the dark ground only.
   Alpha measured, not guessed: .42 composites to rgb(156,155,152) on the
   white stock = 2.78:1, which misses AA Large (3:1). .47 → 3.20:1 and is
   indistinguishable by eye. Same value now ships in all 19 teardown
   stylesheets so the family is uniform. */
.stat .n .u{color:#141109;opacity:.47}
.stat .l{font-family:var(--idx-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:#4a4234;margin-top:8px;line-height:1.4}
/* photocopy grime riding the strip's edge — half of it cropped away, on the
   unmasked wrapper because the strip's own mask would clip a pseudo (§2). */
.idx-statwrap::after{content:"";position:absolute;pointer-events:none;z-index:0;left:12%;bottom:-52px;
  width:112px;height:88px;background:var(--we-tex-speck-5) center/contain no-repeat;
  opacity:.22;mix-blend-mode:multiply}

/* ============================================================
   INDEX — light cream paper zone (all ink, no blue)
   ============================================================ */
.zone--light{
  --bg:#f5f0e8;--ink:#17140e;--soft:#17140e;--dim:#17140e;
  --panel:#fcf9f3;--panel-2:#f1eadd;
  --line:rgba(30,22,10,.14);--line-soft:rgba(30,22,10,.08);
  --sh-rgb:30,22,10;
  background:linear-gradient(rgba(245,240,232,.55),rgba(245,240,232,.55)),var(--bg) var(--we-paper-light) center/cover;
  background-attachment:scroll;
  color:var(--ink);
  /* no padding here — tear clearance is the section's job, and an arbitrary
     block padding on the zone silently offset every clearance calculation. */
  padding-block:0;
}
.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}

/* clearance comes from .tear-clear-top / .tear-clear-bottom in the markup */
.idx-seclabel{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.idx-seclabel h2{font-family:var(--idx-hand);font-weight:700;font-size:clamp(1.9rem,4vw,2.7rem);line-height:1;letter-spacing:-.02em;color:var(--ink);margin:0;rotate:-.5deg;transform-origin:left}
.idx-seclabel span{font-family:var(--idx-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);opacity:.62}

/* FILTER TABS — paper tabs, no keyline. The old 1.5px solid-ink outline was
   the heavy black line Chey flagged; a torn-off tab is separated from the
   cream by its own stock and shadow, so it needs no stroke at all.
   Inactive = white paper · active = black paper. Still no blue on cream. */
.idx-filter{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:38px}
.idx-chip{font-family:var(--idx-mono);font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:#2a2318;border:0;border-radius:2px;padding:10px 15px;cursor:pointer;
  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:0 1px 0 rgba(30,22,10,.09),0 8px 13px -9px rgba(30,22,10,.62);
  transition:box-shadow .16s ease,translate .16s ease}
/* hand-varied, per §1b: no two slips share a rotation or a texture origin */
.idx-chip:nth-child(1){rotate:-1.1deg;--pp-sp:0 0;--pp-gp:0 0}
.idx-chip:nth-child(2){rotate:.7deg;--pp-sp:130px 70px;--pp-gp:40px 150px}
.idx-chip:nth-child(3){rotate:-.5deg;--pp-sp:210px 20px;--pp-gp:120px 60px}
.idx-chip:nth-child(4){rotate:1deg;--pp-sp:60px 190px;--pp-gp:200px 100px}
.idx-chip:nth-child(5){rotate:-.8deg;--pp-sp:170px 130px;--pp-gp:90px 210px}
/* .62, not .5 — the count is real information at 11px and has to clear AA */
.idx-chip i{font-style:normal;opacity:.62;margin-left:6px;font-variant-numeric:tabular-nums}
.idx-chip:hover{translate:0 -2px;box-shadow:0 1px 0 rgba(30,22,10,.12),0 13px 19px -10px rgba(30,22,10,.66)}
.idx-chip.is-on{color:#f4f0e7;
  background:var(--pp-speck-b) var(--pp-sp,0 0)/var(--pp-sb-size) repeat,
             var(--pp-grain-b) var(--pp-gp,0 0)/var(--pp-gb-size) repeat #14120d;
  background-blend-mode:screen,screen}
.idx-chip.is-on i{opacity:.68}
.idx-chip:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* the 19-card grid */
.idx-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:22px;row-gap:34px}

.idx-card[hidden]{display:none}
/* THE CARD IS PAPER, NOT A CHASSIS.
   The old card was a 6px-radius panel with a 1px keyline, repeated 19 times on
   a perfect grid — the machine-made look Chey called out. Now: a mounted photo
   print sitting on a slip of white stock that is torn along its bottom edge,
   with the tear tile, the paper-texture origin and the tilt all cycling so no
   two neighbours are the same sheet.
   The card itself stays UNMASKED and casts the drop-shadow; the mask lives on
   .idx-body one level down. That way the shadow hugs the rag instead of being
   clipped square by it (gotcha 4) and no extra wrapper markup is needed. */
.idx-card{position:relative;display:flex;flex-direction:column;overflow:visible;text-decoration:none;
  background:none;border:0;border-radius:0;box-shadow:none;
  filter:var(--shadow-1-d);
  transition:filter .22s ease,translate .22s cubic-bezier(.2,.65,.25,1)}
/* hover: lift + a deeper shadow. No stroke — the border-colour step this used
   to add read as a dark outline snapping on. */
.idx-card:hover{translate:0 -5px;filter:var(--shadow-1-d-hover)}
.idx-card:focus-visible{outline:2.5px solid var(--ink);outline-offset:4px}
.idx-card:nth-child(5n+1){rotate:-.3deg}
.idx-card:nth-child(5n+2){rotate:.22deg}
.idx-card:nth-child(5n+3){rotate:-.14deg}
.idx-card:nth-child(5n+4){rotate:.32deg}
.idx-card:nth-child(5n){rotate:-.24deg}

/* MOUNTED PHOTO PRINT — one identical chassis on all 19 cards; the brand's own
   photography/colour stays distinct inside it. A full-bleed 16:10 slot, cover-cropped
   to a consistent frame + crop position, so 19 different source shots read as one
   printed system. The per-brand gradient (--mat) mats behind the image (shows only
   through PNG transparency / before load). A hairline ink keyline + a soft bottom
   inset ground the print so even light-background photos read as framed, never floating.
   Decorative (aria-hidden) — the card link already carries the accessible name. */
/* THE MAT IS PAPER STOCK, NOT A SLAB.
   --mat used to be a per-brand linear-gradient (7 of them navy→black, one
   cyan→teal), which meant the load state was a grid of dark AI gradients
   mounted on white paper. It is now a flat STOCK COLOUR with the same
   procedural paper printed over it, so the slot reads as an unprinted patch
   of the card's own sheet until the photo arrives.
   It is not only a placeholder: six of the nineteen images are transparent
   PNGs (ag1, olipop, drsquatch, olaplex, dollarshaveclub, elf) and the mat is
   what they sit on permanently — a cut-out pasted onto the page. Two of those
   are light products that vanish on white stock, so they declare the kraft
   stock (--mat:#e8dfcd) inline. Everything else takes the white default. */
.idx-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-bottom:0;
  background-color:var(--mat,#fff);
  background-image:var(--pp-speck-w),var(--pp-grain-w);
  background-position:var(--pp-sp,0 0),var(--pp-gp,0 0);
  background-size:var(--pp-s-size),var(--pp-g-size);
  background-repeat:repeat,repeat;
  background-blend-mode:multiply,multiply}
/* blur→sharp on load instead of gray-noise→snap (§12). The load state owns
   `filter` AND the base scale; hover only re-scales an image already .is-loaded,
   so the two never fight over `transform`. */
.idx-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 42%);display:block;
  filter:blur(14px);transform:scale(1.06);
  transition:filter .5s ease,transform .55s cubic-bezier(.2,.65,.25,1)}
.idx-media img.is-loaded{filter:none;transform:none}
.idx-card:hover .idx-media img.is-loaded{transform:scale(1.045)}
@media (prefers-reduced-motion:reduce){
  .idx-media img{transition:none}
  .idx-card:hover .idx-media img.is-loaded{transform:none}
}
.idx-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(30,22,10,.14),inset 0 -30px 36px -30px rgba(30,22,10,.45)}

/* white paper stock + the torn bottom edge; --tear-amp of extra bottom padding
   so no rag point can eat the footer row (§1b) */
.idx-body{position:relative;z-index:1;display:flex;flex-direction:column;flex:1;
  padding:17px 20px calc(17px + var(--tear-amp));
  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;
  -webkit-mask-image:var(--tx,var(--tx1)),linear-gradient(#000,#000);
          mask-image:var(--tx,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}
/* the texture origin is set on the CARD so the mat and the body are the same
   sheet of stock; only the tear tile is per-piece */
.idx-card:nth-child(4n+1){--pp-sp:0 0;--pp-gp:0 0}
.idx-card:nth-child(4n+2){--pp-sp:130px 70px;--pp-gp:40px 150px}
.idx-card:nth-child(4n+3){--pp-sp:210px 20px;--pp-gp:120px 60px}
.idx-card:nth-child(4n)  {--pp-sp:60px 190px;--pp-gp:200px 100px}
.idx-card:nth-child(4n+1) .idx-body{--tx:var(--tx1)}
.idx-card:nth-child(4n+2) .idx-body{--tx:var(--tx2)}
.idx-card:nth-child(4n+3) .idx-body{--tx:var(--tx3)}
.idx-card:nth-child(4n)   .idx-body{--tx:var(--tx4)}

/* filing header — the catalogue number is STAMPED, the category is just filed
   type. Previously both the number and the brand name were FLBold at nearly
   the same size, so the card had two competing headlines. */
.idx-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}
.idx-num{display:inline-block;font-family:var(--idx-mono);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;line-height:1;
  color:rgba(30,22,10,.8);border:1.5px solid rgba(30,22,10,.42);border-radius:3px;
  padding:6px 8px 5px;rotate:-4.6deg;
  -webkit-mask-image:var(--stamp-ink);mask-image:var(--stamp-ink);
  -webkit-mask-size:140px 140px;mask-size:140px 140px;
  -webkit-mask-repeat:repeat;mask-repeat:repeat}
.idx-card:nth-child(3n+2) .idx-num{rotate:3.5deg;-webkit-mask-position:40px 22px;mask-position:40px 22px}
.idx-card:nth-child(3n) .idx-num{rotate:-2.4deg;-webkit-mask-position:88px 61px;mask-position:88px 61px}
.idx-cat{font-family:var(--idx-mono);font-size:.56rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(30,22,10,.72);border:0;border-radius:0;padding:0;background:none;white-space:nowrap}

.idx-brand{font-family:var(--idx-hand);font-weight:700;font-size:clamp(1.35rem,2.4vw,1.65rem);line-height:1.04;letter-spacing:-.015em;color:#141109;margin:0 0 7px;text-wrap:balance}
.idx-angle{font-family:var(--idx-sans);font-size:.92rem;line-height:1.42;color:#2a2318;margin:0 0 16px;max-width:34ch}

.idx-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;
  border-top:1px dashed rgba(30,22,10,.26)}
.idx-stat{font-family:var(--idx-hand);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;color:#141109;font-variant-numeric:tabular-nums}
.idx-read{display:inline-flex;align-items:center;gap:6px;font-family:var(--idx-mono);font-size:.64rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#2a2318;white-space:nowrap}
.idx-read svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;transition:translate .22s ease}
.idx-card:hover .idx-read svg{translate:4px 0}

.idx-empty{font-family:var(--idx-sans);font-size:1rem;color:var(--ink);opacity:.7;text-align:center;padding:40px 0}

/* ============================================================
   FOOTER — dark zone, sourced
   ============================================================ */
/* the footer's own tear hangs ABOVE its box, so it reserves --tear-gap-dark,
   not the tear height. Texture (not flat #05070a) is what closes the gap under
   the footer — RECON §6. */
.footer{position:relative;z-index:3;border-top:none;margin-top:0;padding:var(--tear-gap-dark) 0 60px;
  background-color:#05070a;background-image:var(--we-paper-dark);background-size:cover;background-position:center;color:var(--ink)}
.footer-inner{width:min(740px,calc(100% - 44px));margin-inline:auto}
.footer .cols{display:grid;grid-template-columns:1.2fr 1fr;gap:26px;margin-bottom:26px}
.footer h4{font-family:var(--idx-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);opacity:.7;margin:0 0 8px}
.footer p{font-family:var(--idx-sans);font-size:12.5px;color:var(--dim);opacity:.72;line-height:1.65;margin:0}
.footer a.src{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(66,177,255,.3)}
.footer a.src:hover,.footer a.src:focus-visible{border-bottom-color:var(--blue)}
.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(--idx-mono);font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);opacity:.7}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:920px){
  .idx-grid{grid-template-columns:repeat(2,1fr)}
  .statbar{grid-template-columns:repeat(2,1fr)}
  .statbar .stat:nth-child(3)::before{display:none}
}
@media (max-width:680px){
  .idx-hero{padding-top:120px}
}
@media (max-width:640px){
  /* the tear scales down on mobile, so every clearance derived from it does
     too — one place to change, per the tear-clearance note above */
  :root{--tear-h:72px;--tear-gap-dark:38px;--tear-gap-light:34px;--tear-amp:18px}
}
@media (max-width:560px){
  .idx-grid{grid-template-columns:1fr;row-gap:28px}
  .footer .cols{grid-template-columns:1fr}
  .idx-seclabel{gap:8px}
  /* the tape is one unbreakable word plus two tear allowances — at the old
     clamp floor it ran past the viewport edge. Smaller floor, and wrapping
     allowed as a backstop so a font-metric change can never overflow again. */
  .idx-hero h1{font-size:clamp(1.9rem,8.4vw,2.5rem)}
  .idx-hero h1 em.idx-tape{white-space:normal}
}


/* current page in the nav dropdown (this page = the teardowns index → the
   "See all teardowns" item). Dark nav panel, brand-blue on dark is
   high-contrast. Mirrors the teardown pages' .dd-item.now rule; this file
   defines --brand only (no --brand-soft), same #42b1ff value. */
.dd-item.now{background:color-mix(in srgb,var(--brand) 10%,transparent)}
.dd-item.now .tt{color:var(--brand)}
.dd-item.now .ic{border-color:color-mix(in srgb,var(--brand) 60%,transparent)}

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

/* ---- GLOBAL PASS · canonical nav breakpoints (V6-1 / V2-F1) ----
   This file substituted its own 920px/680px nav rules for the canonical
   880px/480px pair that the other 24 nav stylesheets carry. Net effect at
   390: `.dd` stayed laid out and the brand/CTA never shrank, so `.nav-inner`
   measured 425px inside a 390px viewport and "Book a demo" was clipped to
   "Book a de…". Invisible to document-level overflow probes, because the nav
   is position:fixed — the clip happens inside .nav-inner and never extends
   the document scroll width. Ported verbatim from teardown-rhode.css:107-108. */
@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}}

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