/* ============================================================================
   jobhacki-kit.css — EXTRACTED component kit (the Declassified Dossier set)
   Assembled 2026-06-11 from repos we OWN. Zero from-scratch generation:
   every block cites the source file it was mined from.

   SOURCES (see site_server/kit/COMPONENTS.md + VISUAL_DNA.md + IDENTITY_SPEC.md):
   - design_refs/OS_design-directory/src/lib/motion-tokens.ts
   - design_refs/OS_design-directory/src/components/Headline.tsx
   - design_refs/OS_design-directory/src/components/landing/DecryptedText.tsx
   - design_refs/OS_design-directory/src/components/landing/FlipCounter.tsx
   - design_refs/OS_design-directory/src/components/card-view/ResourceCard.tsx
   - design_refs/OS_design-directory/src/components/card-view/ResourceMosaic.tsx
   - design_refs/OS_design-directory/src/components/card-view/CategoryCard.tsx
   - design_refs/OS_design-directory/src/components/card-view/SubcategoryRow.tsx
   - design_refs/OS_design-directory/src/components/ui/InspoTable.tsx
   - design_refs/OS_design-directory/src/styles/tokens.css
   - design_refs/linktree-alternative/src/components/ShuffleText.tsx
   - /Users/workflow/orbital/backend/orbital/orchestrator/assembler.py (grid-bg,
     reveal + safety net, img shimmer, overflow clamps, ::selection)
   - site_server/landing.html lines 29-36 (canonical JobHacki tokens) and the
     proof-honest gold-rule pattern (line 225) kept per IDENTITY_SPEC §6.

   EXCLUDED ON PURPOSE — IDENTITY_SPEC.md §3 bans (Master's anti-template order):
   - COMPONENTS.md §1 jh-mesh / §1a mesh-bg ........ C1 radial-glow wash
   - COMPONENTS.md §3 jh-pill ...................... C3 999px status pill
   - COMPONENTS.md §4 jh-btn-primary glow + lift ... C5 glow-shadow levitation
   - COMPONENTS.md §18 starfield ................... not allowed behind copy
   Zero radial washes, zero 999px pill radii, zero hover lift transforms,
   zero red glow shadows in this file — verified by grep before ship.
   ========================================================================== */

/* ---- 0. TOKENS — landing.html:29-36 (canonical) + motion-tokens.ts ------- */
:root{
  --red:#E10600;--red-2:#ff2419;--gold:#FFC400;--black:#0a0a0a;--ink:#070707;
  --white:#ffffff;--mut:rgba(255,255,255,.66);--mut-2:rgba(255,255,255,.45);
  --line:rgba(255,255,255,.10);--card:rgba(255,255,255,.035);--card-2:rgba(255,255,255,.06);
  --font-display:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif;
  --font-text:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* motion-tokens.ts DURATION/EASING/STAGGER (COMPONENTS.md §13) */
  --dur-fast:.15s;--dur-normal:.2s;--dur-slow:.3s;--dur-slower:.5s;--dur-cine:.8s;
  --ease-smooth:cubic-bezier(.4,0,.2,1);   /* EASING.smooth */
  --ease-spring:cubic-bezier(.16,1,.3,1);  /* EASING.spring — "the expensive decel" */
  --stagger-fast:30ms;--stagger-normal:50ms;--stagger-slow:100ms;
}
/* ::selection brand detail — assembler.py:567 */
::selection{background:var(--red);color:#fff}

/* ---- 1. DISPLAY HEADLINE — Headline.tsx:32-47 (COMPONENTS.md §19) -------- */
.jh-display{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(40px,8vw,96px);
  letter-spacing:-0.03em;line-height:0.9;
  color:var(--white);opacity:.95;
  text-shadow:0 4px 12px rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.3);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.jh-display-2{font-family:var(--font-display);font-weight:800;
  font-size:clamp(28px,4.2vw,52px);letter-spacing:-.025em;line-height:.95;color:var(--white)}

/* ---- 2. FILE HEADER + DOT LEADER — IDENTITY_SPEC §1b (Linear waypoint
        device through the dossier lens; Label token = COPY_DNA §4: 12px
        UPPERCASE +0.5px, the only positive tracking; mono per fonts.css
        Offbit role). Dot leader is TYPED characters, not a border. --------- */
.jh-filehead{
  display:flex;align-items:baseline;gap:14px;
  border-top:1px solid var(--line);            /* hairline rule above — §1b */
  padding-top:14px;margin-bottom:40px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.5px;
  text-transform:uppercase;font-weight:700;color:var(--mut-2);
}
.jh-filehead .fno{color:var(--gold)}
.jh-filehead .lead{flex:1;overflow:hidden;white-space:nowrap;color:rgba(255,255,255,.18);
  letter-spacing:3px;user-select:none}
.jh-filehead .status{color:var(--mut-2);white-space:nowrap}
.jh-label{font-family:var(--font-mono);font-size:12px;letter-spacing:.5px;
  text-transform:uppercase;font-weight:700;color:var(--gold)}

/* ---- 3. THE STAMP (M3) — IDENTITY_SPEC §2 + §4 M3: mono, uppercase, gold,
        1.5px gold border, 2deg rotation (the ONLY rotation on the page).
        Landing: scale 1.15→1 + opacity 0→1 in ~140ms, SPRING.snappy
        (motion-tokens.ts:74). Max 3 per page. Replaces every pill. --------- */
.jh-stamp{
  display:inline-block;font-family:var(--font-mono);font-size:12px;
  letter-spacing:.5px;text-transform:uppercase;font-weight:700;color:var(--gold);
  border:1.5px solid var(--gold);padding:6px 12px;border-radius:3px;
  transform:rotate(-2deg);
}
.jh-stamp.red{color:var(--red-2);border-color:var(--red-2)}
.jh-stamp.jh-m3{opacity:0;transform:rotate(-2deg) scale(1.15);
  transition:opacity .14s var(--ease-spring),transform .14s var(--ease-spring)}
.jh-stamp.jh-m3.in{opacity:1;transform:rotate(-2deg) scale(1)}

/* ---- 4. DECRYPT / REDACTION BARS (M1) — DecryptedText.tsx (252 lines:
        interval scramble, revealDirection start, animateOn view, sr-only
        a11y text) + ShuffleText.tsx stagger discipline. Pre-reveal state =
        solid gold redaction bars (IDENTITY_SPEC §1a/§4 M1). JS: jhDecrypt. - */
.jh-decrypt .w{display:inline-block;white-space:pre}
.jh-decrypt:not(.done) .w.bar{background:var(--gold);color:transparent;border-radius:2px}
.jh-decrypt .scramble{color:var(--gold)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);border:0;padding:0}

/* ---- 5. SHUFFLE TEXT — ShuffleText.tsx (per-char data-char slot machine,
        50ms shuffle, .09s stagger, hover replay). Wordmark ONLY. ----------- */
.jh-shuffle{letter-spacing:-0.02em}

/* ---- 6. ODOMETER (M2 ROLL) — FlipCounter.tsx (171 lines: per-digit rolling
        columns, flip-clock top/bottom gradients, clamp() sizing). Live
        numbers only — member count (member_stats.json feed). -------------- */
.jh-odometer{display:inline-flex;gap:5px;vertical-align:middle}
.jh-odometer .digit{
  position:relative;overflow:hidden;
  height:clamp(40px,6vw,52px);width:clamp(30px,5vw,38px);
  font:700 clamp(24px,4.5vw,34px)/1 var(--font-mono);color:var(--white);
  border-radius:6px;background:var(--card-2);border:1px solid var(--line);
}
.jh-odometer.big .digit{height:clamp(56px,9vw,88px);width:clamp(42px,7vw,64px);
  font-size:clamp(34px,6vw,56px);color:var(--gold)}
.jh-odometer .col{transition:transform .9s var(--ease-spring)}
.jh-odometer .col span{display:flex;align-items:center;justify-content:center;
  height:clamp(40px,6vw,52px)}
.jh-odometer.big .col span{height:clamp(56px,9vw,88px)}
/* flip-clock shading — FlipCounter.tsx lines 135-163 */
.jh-odometer .digit::before,.jh-odometer .digit::after{
  content:"";position:absolute;left:0;right:0;height:28%;z-index:2;pointer-events:none}
.jh-odometer .digit::before{top:0;background:linear-gradient(to bottom,var(--black),transparent);opacity:.5}
.jh-odometer .digit::after{bottom:0;background:linear-gradient(to top,var(--black),transparent);opacity:.5}
.jh-odometer .sep{font:700 clamp(24px,4.5vw,34px)/1 var(--font-mono);color:var(--mut-2);
  align-self:center}
.jh-odometer.big .sep{font-size:clamp(34px,6vw,56px);color:var(--gold)}

/* ---- 7. CARD WALL (hero evidence wall) — geometry from ResourceCard.tsx
        lines 34-39 (aspect-square, rounded-lg, hairline border) packed per
        ResourceMosaic.tsx; dimmed ~22%; vignette = the CategoryCard.tsx
        176-188 FOUR DIRECTIONAL INSET BOX-SHADOW trick (no radial mask,
        no overlay div) per IDENTITY_SPEC §1a. ------------------------------ */
.jh-cardwall{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.jh-cardwall .wall{
  display:grid;grid-template-columns:repeat(8,1fr);gap:10px;
  opacity:.22;padding:10px;transform:rotate(0deg);
}
.jh-cardwall .wc{aspect-ratio:1;border-radius:8px;border:1px solid var(--line);
  overflow:hidden;background:var(--card)}
.jh-cardwall .wc img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.4) brightness(.8)}
/* plain-black vignette — CategoryCard.tsx 176-188 inset shadows, 10,10,10 = --black */
.jh-cardwall::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 140px 0 160px -30px rgba(10,10,10,1),inset -140px 0 160px -30px rgba(10,10,10,1),
             inset 0 150px 170px -30px rgba(10,10,10,1),inset 0 -150px 170px -30px rgba(10,10,10,1)}
@media (max-width:880px){.jh-cardwall .wall{grid-template-columns:repeat(4,1fr)}}

/* ---- 8. MOSAIC / VAULT MANIFEST — ResourceMosaic.tsx grid + ResourceCard.tsx
        scale .8→1 spring entrance, index*STAGGER.fast delay, hover border
        swaps to the CATEGORY color (line 60 — never one uniform accent).
        Category hues: OS tokens.css:13-19. Tags are RECTANGULAR mono
        (IDENTITY_SPEC File 05 — not 999px pills). ------------------------- */
.jh-mosaic{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.jh-mosaic{grid-template-columns:repeat(3,1fr)}}
.jh-mosaic .cell{
  border-radius:8px;background:var(--ink);border:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;transform:scale(.8);
  transition:opacity .45s var(--ease-spring),transform .45s var(--ease-spring),
             border-color var(--dur-normal),box-shadow var(--dur-normal);
  transition-delay:calc(var(--i) * 30ms);   /* STAGGER.fast = 0.03s */
}
.jh-mosaic.in .cell{opacity:1;transform:scale(1)}
.jh-mosaic .cell:hover{transform:scale(1.02);transition-delay:0s;
  border-color:var(--cat,var(--gold));
  box-shadow:0 8px 30px color-mix(in srgb,var(--cat,var(--gold)) 8%,transparent)}
.jh-mosaic .cell .shot{aspect-ratio:1/1;overflow:hidden;border-bottom:1px solid var(--line);
  background:var(--ink)}
.jh-mosaic .cell .shot img{width:100%;height:100%;object-fit:contain}
.jh-mosaic .cell .meta{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.jh-mosaic .idx{font-family:var(--font-mono);font-size:11px;letter-spacing:.5px;
  font-weight:700;color:var(--mut-2);text-transform:uppercase}
.jh-tagr{display:inline-block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.5px;
  text-transform:uppercase;font-weight:700;padding:3px 8px;border-radius:3px;border:1px solid}
.jh-tagr.free{color:var(--gold);border-color:rgba(255,196,0,.5)}
.jh-tagr.access{color:var(--red-2);border-color:rgba(255,36,25,.55)}
.jh-tagr.soon{color:var(--mut);border-color:var(--line)}
.jh-mosaic h3{font-size:17px;font-weight:760;letter-spacing:-.01em;color:var(--white)}
.jh-mosaic .cell p{font-size:13.5px;color:var(--mut)}
.jh-mosaic .go{margin-top:auto;padding-top:8px;font-family:var(--font-mono);font-size:12px;
  letter-spacing:.5px;text-transform:uppercase;font-weight:700;color:var(--gold)}

/* ---- 9. LEDGER / CHARGE SHEET — dense mono table-row treatment of
        InspoTable.tsx (IDENTITY_SPEC File 02): full-width rows, hairline
        rules between, mono left column, plain-text right column. ----------- */
.jh-ledger{border-top:1px solid var(--line)}
.jh-ledger .lrow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:10px 32px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
.jh-ledger .lkey{font-family:var(--font-mono);font-size:13px;letter-spacing:.5px;
  text-transform:uppercase;font-weight:700;color:var(--white);
  display:flex;align-items:baseline;gap:12px;min-width:0}
.jh-ledger .lkey .cno{color:var(--gold)}
.jh-ledger .lkey .ld{flex:1;overflow:hidden;white-space:nowrap;
  color:rgba(255,255,255,.18);letter-spacing:3px;user-select:none}
.jh-ledger .lkey .st{color:var(--red-2);white-space:nowrap;font-size:11px}
.jh-ledger .lbody{font-size:14.5px;color:var(--mut)}
.jh-ledger .lbody b{color:var(--white)}
@media (max-width:700px){.jh-ledger .lrow{grid-template-columns:1fr;gap:8px}}

/* ---- 10. EXHIBIT FRAME — IDENTITY_SPEC §1c: straight-cropped screenshot,
        1px hairline frame, mono caption strip, small gold corner tab.
        Never floating in a glow, never tilted. ----------------------------- */
.jh-exhibit{position:relative;border:1px solid var(--line);background:var(--ink)}
.jh-exhibit::before{content:"";position:absolute;top:-1px;right:-1px;width:26px;height:26px;
  background:var(--gold);clip-path:polygon(100% 0,0 0,100% 100%)}  /* gold corner tab */
.jh-exhibit .shot{display:block;overflow:hidden}
.jh-exhibit .shot img{width:100%;height:auto;display:block}
.jh-exhibit .cap{display:flex;justify-content:space-between;gap:10px;
  border-top:1px solid var(--line);padding:9px 12px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.5px;
  text-transform:uppercase;font-weight:700;color:var(--mut-2)}
.jh-exhibit .cap .gold{color:var(--gold)}
.jh-exhibit.framed-gold{border-color:rgba(255,196,0,.5)}

/* ---- 11. RECEIPT — IDENTITY_SPEC File 06: the anchor table as a typed
        receipt. Mono columns, typed dot leaders, struck prices, totals row. */
.jh-receipt{max-width:780px;margin:0 auto;border:1px solid var(--line);
  background:var(--ink);padding:26px 28px}
.jh-receipt .rrow{display:flex;align-items:baseline;gap:12px;padding:10px 0;min-width:0}
.jh-receipt .ritem{font-family:var(--font-mono);font-size:13.5px;font-weight:700;
  color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jh-receipt .ritem small{display:block;font-family:var(--font-text);font-weight:600;
  color:var(--mut-2);font-size:12px;letter-spacing:0;text-transform:none;white-space:normal}
.jh-receipt .rdots{flex:1;overflow:hidden;white-space:nowrap;
  color:rgba(255,255,255,.18);letter-spacing:3px;font-family:var(--font-mono);user-select:none}
.jh-receipt .rprice{font-family:var(--font-mono);font-size:13.5px;font-weight:700;
  color:var(--mut);white-space:nowrap}
.jh-receipt .rprice s{color:var(--mut-2)}
.jh-receipt .rtotal{border-top:1px solid var(--line);margin-top:8px;padding-top:14px}
.jh-receipt .rtotal .ritem,.jh-receipt .rtotal .rprice{font-size:15px;color:var(--white)}
.jh-receipt .rcollapse{border-top:1px dashed rgba(255,255,255,.18);margin-top:14px;
  padding-top:22px;text-align:center}
.jh-price-big{font-family:var(--font-mono);font-weight:700;color:var(--gold);
  font-size:clamp(48px,8vw,76px);letter-spacing:-.03em;line-height:1}
@media (max-width:560px){.jh-receipt{padding:20px 14px}.jh-receipt .ritem{white-space:normal}}

/* ---- 12. SLAB CTA — IDENTITY_SPEC §3 C5 replacement: SOLID slab, 1-frame
        press state (INTERACTION tap scale .98, motion-tokens.ts 81-105),
        no glow, no levitation. Text on gold = near-black (VISUAL_DNA §2). -- */
.jh-slab{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:16px;
  font-family:var(--font-text);padding:16px 30px;border-radius:4px;cursor:pointer;
  border:1px solid transparent;white-space:nowrap;line-height:1.25;
  transition:background var(--dur-fast) var(--ease-smooth)}
.jh-slab:active{transform:scale(.98)}
.jh-slab.red{background:var(--red);color:#fff}
.jh-slab.red:hover{background:var(--red-2)}
.jh-slab.gold{background:var(--gold);color:var(--black)}
.jh-slab.gold:hover{background:#ffd23d}
.jh-slab.ghost{background:transparent;border-color:var(--line);color:var(--white)}
.jh-slab.ghost:hover{border-color:rgba(255,255,255,.3)}
.jh-alt-link{font-size:14px;color:var(--mut);text-decoration:underline;
  text-underline-offset:3px}
.jh-alt-link:hover{color:var(--white)}

/* ---- 13. SCROLL REVEAL + NO-JS SAFETY NET — assembler.py 672-696 + 732-739
        ("if GSAP fails to load … the site below the hero stays invisible
        forever"). Entrances once per SECTION (design-principles §4). ------- */
.jh-reveal{opacity:0;transform:translateY(18px);
  transition:opacity .7s ease,transform .7s ease;
  animation:jh-safety-reveal 1.6s ease .8s forwards}  /* JS sets animation:none */
.jh-reveal.in{opacity:1;transform:none}
@keyframes jh-safety-reveal{0%,50%{opacity:0}100%{opacity:1;transform:none}}

/* ---- 14. BLUEPRINT GRID BG — assembler.py 583-588 (linear hairlines only,
        no radial). The one allowed engineered texture outside the hero. ---- */
.jh-grid-bg{
  background-image:
    linear-gradient(color-mix(in srgb,var(--white) 6%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--white) 6%,transparent) 1px,transparent 1px);
  background-size:32px 32px;
}

/* ---- 15. MEMO — the gold-left-rule survivor (landing.html proof-honest
        pattern, line 225 — kept by IDENTITY_SPEC §6/File 07). -------------- */
.jh-memo{border-left:3px solid var(--gold);background:var(--card);
  padding:16px 20px;color:var(--mut);font-size:14.5px}
.jh-memo b{color:var(--white)}

/* ---- 16. TYPED CHECKLIST — IDENTITY_SPEC File 07: two typed checklists
        separated by ONE vertical hairline, no yes/no card boxes. ----------- */
.jh-checklists{display:grid;grid-template-columns:1fr 1px 1fr;gap:0 36px;margin-top:8px}
.jh-checklists .vr{background:var(--line)}
.jh-checklist h3{font-size:18px;font-weight:780;margin-bottom:14px;color:var(--white);
  display:flex;align-items:center;gap:10px}
.jh-checklist h3 .mk{font-family:var(--font-mono);font-weight:700}
.jh-checklist h3 .mk.y{color:var(--gold)}
.jh-checklist h3 .mk.n{color:var(--mut-2)}
.jh-checklist ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0;padding:0}
.jh-checklist li{font-size:15px;display:flex;gap:12px;align-items:flex-start;color:var(--mut)}
.jh-checklist.yes li{color:var(--white)}
.jh-checklist li .tick{flex:0 0 auto;font-family:var(--font-mono);font-weight:700;margin-top:1px}
.jh-checklist.yes li .tick{color:var(--gold)}
.jh-checklist.no li .tick{color:var(--mut-2)}
@media (max-width:760px){.jh-checklists{grid-template-columns:1fr}
  .jh-checklists .vr{height:1px;margin:24px 0}}

/* ---- 17. FAQ INDEX CARDS — IDENTITY_SPEC File 09: keep <details>, restyle
        as index cards — mono Q numbers, hairline separators, NO card
        backgrounds, gold + → × tick only. ---------------------------------- */
.jh-faq{max-width:780px;margin:0 auto;border-top:1px solid var(--line)}
.jh-faq details{border-bottom:1px solid var(--line);padding:0}
.jh-faq summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;
  gap:16px;font-weight:740;font-size:16px;padding:18px 0;color:var(--white)}
.jh-faq summary::-webkit-details-marker{display:none}
.jh-faq summary .qno{font-family:var(--font-mono);font-size:12px;letter-spacing:.5px;
  font-weight:700;color:var(--gold);flex:0 0 auto}
.jh-faq summary .tick{margin-left:auto;flex:0 0 auto;color:var(--gold);
  font-family:var(--font-mono);font-weight:700;transition:transform var(--dur-normal) var(--ease-smooth)}
.jh-faq details[open] summary .tick{transform:rotate(45deg)}
.jh-faq .a{padding:0 0 20px 44px;color:var(--mut);font-size:14.5px;max-width:680px}
.jh-faq .a b{color:var(--white)}

/* ---- 18. EXPAND ROW — SubcategoryRow.tsx 55-75 (height 0→auto, spring ease,
        opacity delayed +0.05s so content fades AFTER the space exists).
        JS: jhExpand(). ----------------------------------------------------- */
.jh-expand-panel{overflow:hidden;
  transition:height var(--dur-slow) var(--ease-spring),opacity var(--dur-normal) ease .05s}

/* ---- 19. IMG SHIMMER — assembler.py 698-716 (110deg sweep, killed by
        .jh-loaded). Linear gradients only. --------------------------------- */
img.jh-shimmer{transition:opacity .4s ease;
  background:linear-gradient(110deg,rgba(255,255,255,.02) 8%,
    rgba(255,255,255,.06) 18%,rgba(255,255,255,.02) 33%) 0 0/200% 100%;
  animation:jh-shimmer-kf 1.4s linear infinite}
@keyframes jh-shimmer-kf{0%{background-position:200% 0}100%{background-position:-200% 0}}
img.jh-loaded{animation:none;background:transparent}

/* ---- 20. OVERFLOW CLAMPS — assembler.py 555-566, 634-638 (kills the
        letter-stacked-button bug). ----------------------------------------- */
.jh-page section{max-width:100vw;overflow-x:clip}
.jh-page [class*="grid"]>*,.jh-page .flexrow>*{min-width:0}

/* ============================================================================
   PRODUCT-PAGE RESKIN LAYER — dossier surface treatment for /product/*.html
   (lighter touch per task: kill C1 radial washes, C5 glow-lift buttons and
   999px pill LOOK; keep copy, comparisons (cmp2), layout intact).
   These selectors only match the legacy product-page classes.
   ========================================================================== */
/* C1 kill: hero + final radial washes → flat black + blueprint grid hairlines
   (assembler.py 583-588 texture replaces the wash) */
.hero::before{background:
  linear-gradient(color-mix(in srgb,var(--white) 4%,transparent) 1px,transparent 1px),
  linear-gradient(90deg,color-mix(in srgb,var(--white) 4%,transparent) 1px,transparent 1px) !important;
  background-size:32px 32px !important;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 86%);
  mask-image:linear-gradient(180deg,#000,transparent 86%)}
.final::before{background:none !important}
.hero-visual .glow{display:none !important}
/* C5 kill: no hover levitation, no red glow shadows; 1-frame press instead */
.btn{border-radius:4px !important}
.btn:hover{transform:none !important}
.btn:active{transform:scale(.98)}
.btn-red{box-shadow:none !important}
.btn-red:hover{box-shadow:none !important;background:var(--red-2)}
.btn-gold-solid{box-shadow:none !important}
/* C3 look-kill: badges/tags → rectangular mono stamps (border-radius 3px) */
.badge,.imp-tag{border-radius:3px !important;font-family:var(--font-mono) !important;
  letter-spacing:.5px !important}
.badge .dot{border-radius:1px !important;box-shadow:none !important}
/* eyebrow → the Label token (COPY_DNA §4: +0.5px is the only positive tracking) */
.eyebrow{font-family:var(--font-mono) !important;letter-spacing:.5px !important}
/* exhibit treatment for the product hero art (IDENTITY_SPEC §1c): hairline
   frame + gold corner tab + mono caption strip via data-exhibit attr */
.hero-visual .art-box{border-radius:0 !important;position:relative;
  box-shadow:none !important;border:1px solid var(--line) !important}
.hero-visual .art-box::before{content:"";position:absolute;top:-1px;right:-1px;
  width:26px;height:26px;z-index:2;background:var(--gold);
  clip-path:polygon(100% 0,0 0,100% 100%)}
.hero-visual .art-box::after{content:attr(data-exhibit);position:absolute;left:0;right:0;
  bottom:0;z-index:2;border-top:1px solid var(--line);background:rgba(10,10,10,.92);
  padding:8px 12px;font-family:var(--font-mono);font-size:11px;letter-spacing:.5px;
  text-transform:uppercase;font-weight:700;color:var(--mut-2);text-align:left}
.hero-visual img{border-radius:0 !important;box-shadow:none !important}
/* upsell / improve: flatten the leftover radial-tinted panels */
.upsell{background:var(--card) !important}
.improve{background:var(--card) !important;border-radius:0 !important}
.feat-card{border-radius:0 !important;background:var(--ink) !important}
.feat-card .num{border-radius:3px !important;font-family:var(--font-mono)}

/* ---- REDUCED MOTION — global, non-optional (ResourceCard.tsx:17,
        CategoryCard.tsx:53, landing.html:138-142 pattern). M1–M3 collapse
        to final state. ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .jh-reveal,.jh-mosaic .cell{opacity:1 !important;transform:none !important;
    transition:none !important;animation:none !important}
  .jh-stamp.jh-m3{opacity:1 !important;transform:rotate(-2deg) !important;transition:none !important}
  .jh-odometer .col{transition:none !important}
  .jh-decrypt .w.bar{background:none !important;color:inherit !important}
  img.jh-shimmer{animation:none !important;background:transparent !important}
  .jh-expand-panel{transition:none !important}
}

/* ============================================================================
   ROUND-3 RESTYLE LAYER — Master's spec, 2026-06-11 ("break the all-black
   monotony"). Master EXPLICITLY approved for this batch: deep-violet /
   electric-blue ambient atmosphere, glow accents, hover lift+glow, one warm
   light section, Archivo Black display + Instrument Serif italic accents,
   blur-glow image frames, social-proof toasts. Where this layer adds glow or
   lift it does so on Master's direct order — it supersedes the IDENTITY_SPEC
   §3 C1/C5 bans ONLY for the surfaces Master named. Brand red/gold still owns
   every CTA and identity mark.
   ========================================================================== */
:root{
  --violet:#7C3AED;--eblue:#3B82F6;--cream:#FAF3E7;--cream-ink:#171207;
  --font-big:"Archivo Black",var(--font-display);
  --font-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
}

/* ---- R3.1 BIG PERSONALITY DISPLAY — Archivo Black carries the hero and
        section heads (single weight 400; size does the shouting). ---------- */
.jh-display{font-family:var(--font-big);font-weight:400;letter-spacing:-.015em;line-height:.95}
.jh-big{font-family:var(--font-big);font-weight:400;letter-spacing:-.01em}

/* ---- R3.2 SERIF PULL-QUOTE — Instrument Serif italic, the emotional
        counter-voice to the mono evidence layer. --------------------------- */
.jh-quote{font-family:var(--font-serif);font-style:italic;font-weight:400;
  font-size:clamp(20px,2.6vw,30px);line-height:1.25;color:var(--gold);letter-spacing:0}
.jh-quote .wq{color:var(--white)}

/* ---- R3.3 BLUR-GLOW POP FRAME — blurred enlarged copy of the SAME image
        behind it (Master spec item 6: blur(28px) saturate(1.4) scale(1.15),
        opacity .55). Apply to the .shot wrapper, never to .jh-exhibit itself
        (its ::before is the gold corner tab). ------------------------------ */
.jh-pop{position:relative;overflow:hidden;isolation:isolate}
.jh-pop::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:var(--img);background-size:cover;background-position:center;
  filter:blur(28px) saturate(1.4);transform:scale(1.15);opacity:.55}
.jh-pop>img{position:relative;z-index:1}

/* ---- R3.4 GLOW FRAME — "inside the vault" screenshot treatment
        (violet/blue ambient ring, Master spec item 5). --------------------- */
.jh-exhibit.jh-glow{border-color:rgba(124,58,237,.45);
  box-shadow:0 0 44px rgba(124,58,237,.22),0 0 110px rgba(59,130,246,.14)}
.jh-exhibit.jh-glow:hover{box-shadow:0 0 64px rgba(124,58,237,.34),0 0 150px rgba(59,130,246,.20)}

/* ---- R3.5 HOVER LIFT+GLOW — Master spec item 7 (steps strip + frames). --- */
.jh-lift{transition:transform .25s var(--ease-spring),box-shadow .25s var(--ease-spring)}
.jh-lift:hover{transform:translateY(-4px);
  box-shadow:0 14px 44px rgba(124,58,237,.20),0 4px 18px rgba(59,130,246,.14)}

/* ---- R3.6 ATMOSPHERE ORBS — deep-violet / electric-blue ambient glows
        (parent must be position:relative; orbs sit behind copy). ----------- */
.jh-orbs{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.jh-orb{position:absolute;border-radius:50%;filter:blur(70px)}
.jh-orb.v{background:rgba(124,58,237,.22)}
.jh-orb.b{background:rgba(59,130,246,.16)}
.jh-orb.r{background:rgba(225,6,0,.16)}

/* ---- R3.7 WARM LIGHT SECTION — the one cream contrast band mid-page. ----- */
.jh-light{background:linear-gradient(180deg,#fff8ec 0%,var(--cream) 55%,#f3e7d2 100%);
  color:var(--cream-ink)}
.jh-light .h2,.jh-light h2,.jh-light h3{color:var(--cream-ink)}
.jh-light .sec-sub{color:rgba(23,18,7,.66)}
.jh-light .jh-filehead{border-top-color:rgba(23,18,7,.22);color:rgba(23,18,7,.52)}
.jh-light .jh-filehead .fno{color:#a16207}
.jh-light .jh-filehead .lead{color:rgba(23,18,7,.20)}
.jh-light .jh-filehead .status{color:rgba(23,18,7,.52)}
.jh-light .jh-receipt{background:#fffdf7;border-color:rgba(23,18,7,.16);
  box-shadow:0 24px 70px rgba(23,18,7,.18)}
.jh-light .jh-receipt .rdots{color:rgba(23,18,7,.22)}
.jh-light .jh-receipt .rcollapse{border-top-color:rgba(23,18,7,.25)}
.jh-light .jh-price-big{color:var(--red)}
.jh-light .price-per,.jh-light .price-why{color:rgba(23,18,7,.70)}
.jh-light .price-why b{color:var(--cream-ink)}
.jh-light .price-fine{color:rgba(23,18,7,.50)}
.jh-light .price-caps{color:#8a6200}
.jh-light .price-caps .best{background:var(--gold);color:var(--cream-ink)}
.jh-light .jh-stamp{color:#b45309;border-color:#b45309}

/* ---- R3.8 SOCIAL-PROOF TOASTS — Master spec item 8. REAL events only
        (config/joins_feed.json, 1:1 Whop membership rows); relative times
        computed client-side from the real `when`; bottom-left; max 300px;
        dismissible; hidden while the final CTA section is on screen so it
        can never overlap a CTA; reduced motion = one static line. ---------- */
#jh-toasts{position:fixed;left:16px;bottom:16px;z-index:70;max-width:300px;pointer-events:none}
.jh-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;max-width:300px;
  background:rgba(13,12,18,.92);border:1px solid rgba(124,58,237,.35);
  border-left:3px solid var(--gold);border-radius:8px;padding:11px 12px;color:var(--white);
  box-shadow:0 10px 34px rgba(0,0,0,.5),0 0 24px rgba(124,58,237,.14);
  backdrop-filter:blur(8px);
  opacity:0;transform:translateY(10px);
  transition:opacity .4s var(--ease-spring),transform .4s var(--ease-spring)}
.jh-toast.in{opacity:1;transform:none}
.jh-toast .tdot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--gold);
  margin-top:5px;box-shadow:0 0 10px rgba(255,196,0,.8)}
.jh-toast .tmsg{font-size:13px;font-weight:600;line-height:1.35;min-width:0}
.jh-toast .twhen{display:block;margin-top:3px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.5px;text-transform:uppercase;font-weight:700;color:var(--mut-2)}
.jh-toast .tx{flex:0 0 auto;margin-left:auto;background:none;border:none;color:var(--mut-2);
  cursor:pointer;font-size:14px;line-height:1;padding:2px;font-family:var(--font-mono)}
.jh-toast .tx:hover{color:#fff}
@media (max-width:560px){#jh-toasts{left:10px;bottom:10px;max-width:280px}}

/* ---- R3 REDUCED MOTION ---------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .jh-toast{transition:none !important;opacity:1 !important;transform:none !important}
  .jh-lift,.jh-lift:hover{transition:none !important;transform:none !important}
}