/* ==========================================================================
   stusyn.com — "Built on the sales floor"
   Paper, ink, lime highlighter, ballpoint notes, receipts and stickers.
   Every class here starts with h- so it never collides with the older
   site.css (still used by the careers pages, Hiring HQ and the resume pages).
   ========================================================================== */

@font-face {
  font-family: 'Bricolage';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin-opsz.woff2) format('woff2-variations'), url(../fonts/bricolage-grotesque-latin-opsz.woff2) format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/caveat-latin-700.woff2) format('woff2');
}

:root {
  --paper: #f3eee3;
  --paper-2: #e9e2d2;
  --card: #fffdf7;
  --ink: #141412;
  --ink-2: #3a3934;
  --mute: #66635a;
  --line: rgba(20, 20, 18, .16);
  --line-2: rgba(20, 20, 18, .08);
  --lime: #c6ff3d;
  --lime-2: #b3f01f;
  --pink: #ff5c8a;
  --pen: #2340b0;          /* ballpoint blue */
  --blue-print: #1b2a4a;
  --display: 'Bricolage', 'Inter Tight', system-ui, sans-serif;
  --body: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --hand: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive;
  --r: 14px;
  --shadow: 4px 4px 0 var(--ink);
  --wrap: 1180px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* aliases so the older careers styles (careers.css) read well on paper */
  --bg: var(--paper); --bg-2: var(--paper-2); --panel: var(--card); --panel-2: var(--paper-2);
  --text: var(--ink); --muted: var(--mute); --dim: #8a867b; --accent: var(--ink); --accent-ink: var(--lime);
  --border: var(--line); --border-2: rgba(20,20,18,.24);
  --serif: 'Instrument Serif', Georgia, serif; --sans: var(--body);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.h-body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* paper grain */
body.h-body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.07 0 0 0 0 0.05 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.h-body > main, body.h-body > footer { position: relative; z-index: 1; }
.h-top { z-index: 50; }
html:has(body.h-body) { overflow-x: clip; }
img, svg { max-width: 100%; }
a { color: inherit; }
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 3px solid var(--pen); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.h-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--lime); padding: 10px 16px; border-radius: 10px; font-weight: 600; text-decoration: none; }
.h-skip:focus { top: 12px; }

.h-wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
@media (min-width: 720px) { .h-wrap { width: min(var(--wrap), 100% - 64px); } }

/* ---------- Type ---------- */
.h-display, .h-h1, .h-h2, .h-h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.035em; line-height: .95; margin: 0; font-variation-settings: 'opsz' 96; }
.h-h1 { font-size: clamp(48px, 10.5vw, 132px); letter-spacing: -.05em; line-height: .88; font-weight: 800; }
.h-h2 { font-size: clamp(36px, 6vw, 76px); letter-spacing: -.045em; }
.h-h3 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -.03em; line-height: 1.05; font-variation-settings: 'opsz' 32; }
.h-lede { font-size: clamp(18px, 2.1vw, 22px); line-height: 1.5; color: var(--ink-2); max-width: 36em; margin: 22px 0 0; }
.h-lede b, .h-lede strong { color: var(--ink); font-weight: 600; }
.h-p { color: var(--ink-2); margin: 14px 0 0; max-width: 40em; }
.h-mono { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.h-muted { color: var(--mute); }
.h-kicker { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 18px; }
.h-kicker::before { content: ''; width: 22px; height: 2px; background: var(--ink); }
.h-serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; }

/* Highlighter: a marker stroke that sweeps in */
.h-hl { position: relative; white-space: nowrap; z-index: 0; }
.h-hl::before {
  content: ''; position: absolute; z-index: -1; left: -.08em; right: -.1em; top: .52em; bottom: .02em;
  background: var(--lime); border-radius: .12em .3em .18em .35em; transform: rotate(-1.4deg) scaleX(var(--hl, 1)); transform-origin: left center;
  transition: transform .9s var(--ease) .25s;
}
.js .h-hl:not(.in)::before { --hl: 0; }
.h-hl.pink::before { background: var(--pink); opacity: .55; }
.h-hl.thin::before { top: .62em; }

.h-strike { text-decoration: line-through; text-decoration-thickness: .08em; text-decoration-color: var(--pink); }

/* Ballpoint margin notes */
.h-note { font-family: var(--hand); font-weight: 700; color: var(--pen); font-size: clamp(22px, 2.6vw, 28px); line-height: 1.05; display: inline-block; transform: rotate(-3deg); }
.h-note svg { display: block; width: 70px; height: 40px; color: var(--pen); }
.h-note.r { transform: rotate(2.5deg); }

/* ---------- Buttons ---------- */
.h-btn {
  --bg: var(--ink); --fg: var(--paper);
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 20px;
  border-radius: 999px; border: 2px solid var(--ink); background: var(--bg); color: var(--fg);
  font: 600 16px/1 var(--body); text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: 3px 3px 0 var(--ink); transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s;
}
.h-btn svg { width: 16px; height: 16px; flex: none; transition: transform .2s var(--ease); }
.h-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.h-btn:hover svg { transform: translateX(3px); }
.h-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.h-btn.lime { --bg: var(--lime); --fg: var(--ink); }
.h-btn.paper { --bg: var(--card); --fg: var(--ink); }
.h-btn.pink { --bg: var(--pink); --fg: var(--ink); }
.h-btn.sm { min-height: 40px; padding: 8px 16px; font-size: 15px; }
.h-btn[disabled] { opacity: .6; cursor: wait; }
.h-ink .h-btn { --bg: var(--lime); --fg: var(--ink); border-color: var(--lime); box-shadow: 3px 3px 0 var(--paper); }
.h-ink .h-btn:hover { box-shadow: 5px 5px 0 var(--paper); }
.h-ink .h-btn.paper { --bg: transparent; --fg: var(--paper); border-color: var(--paper); }
.h-link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--lime-2); }
.h-link:hover { background: var(--lime); text-decoration-color: var(--ink); }
.h-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 32px; }

/* ---------- Stickers, tape, stamps ---------- */
.h-sticker {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: var(--card); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-2deg);
}
.h-sticker i { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); border: 1.5px solid var(--ink); }
.h-sticker.lime { background: var(--lime); }
.h-sticker.pink { background: var(--pink); }
.h-sticker.r { transform: rotate(2deg); }
.h-tape { position: absolute; top: -14px; left: 50%; width: 110px; height: 28px; transform: translateX(-50%) rotate(-3deg);
  background: rgba(198, 255, 61, .55); border-left: 2px dashed rgba(20,20,18,.08); border-right: 2px dashed rgba(20,20,18,.08); mix-blend-mode: multiply; }
.h-tape.pink { background: rgba(255, 92, 138, .4); }
.h-tape.l { left: 18%; transform: translateX(-50%) rotate(4deg); }

.h-stamp { display: inline-grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; border: 3px solid currentColor; color: var(--pink);
  font: 800 30px/1 var(--display); letter-spacing: -.03em; transform: rotate(-12deg); text-align: center; position: relative; }
.h-stamp small { display: block; font: 600 10px/1.2 var(--mono); letter-spacing: .14em; margin-top: 4px; }
.h-stamp::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 1.5px dashed currentColor; }

/* ---------- Header ---------- */
.h-top { position: sticky; top: 0; z-index: 50; padding: 12px 0; transition: background .2s, box-shadow .2s; }
.h-top.scrolled { background: rgba(243, 238, 227, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.h-top-in { display: flex; align-items: center; gap: 16px; }
.h-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.h-mark { width: 38px; height: 38px; flex: none; transition: transform .4s var(--ease); }
.h-brand:hover .h-mark { transform: rotate(-12deg) scale(1.06); }
.h-brand-name { font: 800 21px/1 var(--display); letter-spacing: -.04em; }
.h-brand-name small { display: block; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-top: 4px; }
.h-nav { display: none; gap: 4px; align-items: center; }
.h-nav a { padding: 9px 13px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 15.5px; position: relative; }
.h-nav a:hover { background: var(--paper-2); }
.h-nav a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.h-nav a.ext::after { content: '↗'; font-size: 12px; margin-left: 3px; opacity: .6; }
.h-cmdk-btn { display: none; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line); background: transparent; font: 500 13px var(--body); color: var(--ink-2); cursor: pointer; }
.h-cmdk-btn:hover { border-color: var(--ink); color: var(--ink); }
kbd { font: 500 11px/1 var(--mono); padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); }
.h-menu-btn { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--ink); background: var(--card); display: grid; place-items: center; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
.h-menu-btn span, .h-menu-btn span::before { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; transition: transform .25s var(--ease); }
.h-menu-btn span::before { content: ''; position: absolute; top: 6px; }
.h-menu-btn span { transform: translateY(-3px); }
.h-menu-btn[aria-expanded="true"] span { transform: rotate(45deg); }
.h-menu-btn[aria-expanded="true"] span::before { transform: translateY(-6px) rotate(-90deg); }
.h-top-cta { display: none; }
@media (min-width: 980px) {
  .h-nav { display: flex; }
  .h-cmdk-btn { display: inline-flex; }
  .h-top-cta { display: inline-flex; }
  .h-menu-btn { display: none; }
}
.h-mobile { position: fixed; inset: 0; z-index: 49; background: var(--lime); padding: 96px 24px 32px; display: flex; flex-direction: column; gap: 4px;
  clip-path: circle(0 at calc(100% - 44px) 34px); transition: clip-path .5s var(--ease); visibility: hidden; overflow-y: auto; }
.h-mobile.open { clip-path: circle(150% at calc(100% - 44px) 34px); visibility: visible; }
.h-mobile a { font: 800 clamp(38px, 11vw, 56px)/1.05 var(--display); letter-spacing: -.045em; text-decoration: none; padding: 4px 0; }
.h-mobile a small { font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-left: 10px; vertical-align: middle; }
.h-mobile .h-mobile-foot { margin-top: auto; padding-top: 28px; font-family: var(--mono); font-size: 13px; display: grid; gap: 6px; }
.h-mobile .h-mobile-foot a { font: 500 15px var(--body); letter-spacing: 0; text-decoration: underline; }
body.menu-open { overflow: hidden; }
body.menu-open .h-top { background: transparent; box-shadow: none; backdrop-filter: none; }

/* ---------- Sections ---------- */
.h-sec { padding: clamp(72px, 11vw, 140px) 0; position: relative; }
.h-sec.tight { padding: clamp(48px, 7vw, 88px) 0; }
.h-ink { background: var(--ink); color: var(--paper); }
.h-ink .h-lede, .h-ink .h-p { color: rgba(243, 238, 227, .78); }
.h-ink .h-kicker { color: rgba(243, 238, 227, .8); }
.h-ink .h-kicker::before { background: var(--lime); }
.h-ink .h-hl::before { background: var(--lime); }
.h-ink .h-hl { color: var(--ink); }
.h-ink .h-note { color: var(--lime); }
.h-ink .h-muted { color: rgba(243, 238, 227, .6); }
.h-lime { background: var(--lime); }
.h-grid-paper {
  background-color: var(--paper);
  background-image: linear-gradient(rgba(35, 64, 176, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(35, 64, 176, .09) 1px, transparent 1px);
  background-size: 28px 28px;
}
.h-ruled { background-image: repeating-linear-gradient(transparent 0 31px, rgba(35,64,176,.13) 31px 32px); }
.h-head { display: grid; gap: 16px; margin-bottom: clamp(36px, 5vw, 60px); }
@media (min-width: 900px) { .h-head.split { grid-template-columns: 1.2fr 1fr; align-items: end; gap: 48px; } .h-head.split .h-p { margin: 0; } }

/* torn edge between sections */
.h-tear { height: 22px; background: var(--paper); position: relative; z-index: 2;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 22px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 22px 100%; margin-bottom: -22px; }
.h-tear.up { -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 22px 100%; mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 22px 100%; margin: -22px 0 0; }

/* ---------- Reveal ---------- */
.js .h-rv { opacity: 0; transform: translateY(18px) rotate(var(--rot, 0deg)); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .h-rv.in { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)); }
.h-rv.d1 { transition-delay: .08s; } .h-rv.d2 { transition-delay: .16s; } .h-rv.d3 { transition-delay: .24s; }

/* ---------- Hero ---------- */
.h-hero { padding: clamp(28px, 5vw, 56px) 0 clamp(64px, 9vw, 120px); position: relative; }
.h-hero-grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 1000px) { .h-hero-grid { grid-template-columns: 1.25fr .85fr; gap: 56px; } }
.h-hero .h-stickers { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.h-hero-note { margin-top: 26px; display: flex; align-items: flex-start; gap: 6px; }
.h-hero-note svg { width: 84px; height: 46px; margin-top: 6px; }


/* ---------- Receipt ---------- */
.h-receipt-wrap { position: relative; justify-self: center; width: min(400px, 100%); }
.h-receipt-wrap::before { /* the printer slot */
  content: ''; position: absolute; left: -14px; right: -14px; top: -10px; height: 22px; border-radius: 12px; background: var(--ink); box-shadow: 0 6px 0 -2px rgba(0,0,0,.25); z-index: 2; }
.h-receipt {
  position: relative; background: #fffef9; color: #1d1d1a; font: 400 13px/1.55 var(--mono); padding: 30px 24px 34px;
  box-shadow: 0 30px 40px -24px rgba(20,20,18,.45), 0 2px 0 rgba(20,20,18,.05);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
  transform: rotate(1.4deg); transform-origin: top center;
}
.h-receipt::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.05), transparent 12%, transparent 85%, rgba(0,0,0,.03)); }
.h-receipt .c { text-align: center; }
.h-receipt .big { font: 800 26px/1 var(--display); letter-spacing: -.03em; text-transform: none; }
.h-receipt hr { border: 0; border-top: 1.5px dashed #1d1d1a; margin: 12px 0; opacity: .5; }
.h-receipt .row { display: flex; gap: 10px; justify-content: space-between; }
.h-receipt .row span:first-child { flex: 1; }
.h-receipt .row .q { width: 4.5em; text-align: right; flex: none; font-weight: 500; }
.h-receipt .row.total { font-weight: 500; font-size: 15px; }
.h-receipt .row.total .q { width: auto; }
.h-receipt .small { font-size: 11px; opacity: .7; }
.h-receipt .hl { background: var(--lime); padding: 0 3px; }
.h-receipt .bar { height: 46px; margin: 16px auto 6px; width: 86%;
  background: repeating-linear-gradient(90deg, #1d1d1a 0 2px, transparent 2px 4px, #1d1d1a 4px 5px, transparent 5px 8px, #1d1d1a 8px 11px, transparent 11px 12px, #1d1d1a 12px 13px, transparent 13px 16px); }
.js .h-receipt [data-line] { opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s; }
.js .h-receipt [data-line].on { opacity: 1; transform: none; }
.h-receipt-wrap .h-sticker { position: absolute; z-index: 3; }
.h-receipt-wrap .s1 { right: -12px; bottom: 150px; transform: rotate(-6deg); }
.h-receipt-wrap .s2 { left: -18px; bottom: 54px; transform: rotate(-7deg); }
.h-receipt-cap { font: 500 11px/1.4 var(--mono); color: var(--mute); text-align: center; margin: 22px 0 0; letter-spacing: .02em; }

/* ---------- Doors (index cards) ---------- */
.h-doors { display: grid; gap: 28px; }
@media (min-width: 900px) { .h-doors { grid-template-columns: repeat(3, 1fr); gap: 26px; } }
.h-door { position: relative; display: flex; flex-direction: column; text-decoration: none; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r);
  padding: 34px 26px 24px; min-height: 360px; box-shadow: var(--shadow); transform: rotate(var(--rot, 0deg)); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.h-door:hover { transform: rotate(0deg) translate(-3px, -6px); box-shadow: 8px 10px 0 var(--ink); }
.h-door:nth-child(1) { --rot: -1.2deg; } .h-door:nth-child(2) { --rot: .8deg; } .h-door:nth-child(3) { --rot: -.5deg; }
.h-door .num { font: 500 12px var(--mono); letter-spacing: .12em; color: var(--mute); }
.h-door h3 { font: 800 clamp(30px, 3.4vw, 40px)/.95 var(--display); letter-spacing: -.045em; margin: 14px 0 12px; }
.h-door p { margin: 0; color: var(--ink-2); font-size: 16px; }
.h-door ul { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.h-door li { font: 500 12px/1 var(--mono); padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 999px; }
.h-door .go { margin-top: auto; padding-top: 26px; display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
.h-door .go .arr { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--lime); display: grid; place-items: center; transition: transform .3s var(--ease); }
.h-door:hover .go .arr { transform: rotate(-35deg); background: var(--lime); color: var(--ink); }
.h-door .go .arr svg { width: 18px; height: 18px; }
.h-door .doodle { position: absolute; right: 18px; top: 22px; width: 64px; height: 64px; color: var(--ink); }
.h-door.lime { background: var(--lime); }
.h-door.pink { background: #ffd1de; }

/* ---------- The machine (blueprint) ---------- */
.h-machine { position: relative; }
.h-bp { background: var(--blue-print); color: #e8eefc; border-radius: 22px; padding: clamp(20px, 3vw, 36px); position: relative; overflow: hidden; border: 2px solid var(--ink); box-shadow: var(--shadow);
  background-image: linear-gradient(rgba(232,238,252,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(232,238,252,.07) 1px, transparent 1px);
  background-size: 24px 24px; }
.h-bp-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin-bottom: 14px; }
.h-bp-top b { color: var(--lime); font-weight: 500; }
.h-bp-scroll { overflow-x: auto; margin: 0 -8px; padding: 8px; scrollbar-width: thin; }
.h-bp svg.h-map { width: 100%; min-width: 620px; height: auto; display: block; overflow: visible; }
.h-bp-swipe { display: none; font: 700 20px var(--hand); color: var(--lime); margin: 4px 0 0; }
@media (max-width: 700px) { .h-bp-swipe { display: block; } }
.h-map .wire { fill: none; stroke: rgba(232,238,252,.4); stroke-width: 2; stroke-dasharray: 6 6; }
.h-map .wire.on { stroke: var(--lime); stroke-dasharray: none; }
.h-map .node { cursor: pointer; }
.h-map .node rect { fill: #24365e; stroke: #e8eefc; stroke-width: 2; rx: 12; transition: fill .2s; }
.h-map .node.human rect { stroke: var(--pink); }
.h-map .node.agent rect { stroke: var(--lime); stroke-dasharray: 5 4; }
.h-map .node text { fill: #e8eefc; font: 700 24px var(--display); letter-spacing: -.02em; pointer-events: none; }
.h-map .node text.k { font: 500 14px var(--mono); letter-spacing: .1em; fill: rgba(232,238,252,.65); }
.h-map .node:hover rect, .h-map .node.sel rect { fill: #31477a; }
.h-map .node.sel rect { stroke: var(--lime); stroke-width: 3; stroke-dasharray: none; }
.h-map .node:focus { outline: none; }
.h-map .node:focus-visible rect { stroke: var(--lime); stroke-width: 4; }
.h-map .packet { fill: var(--lime); filter: drop-shadow(0 0 6px var(--lime)); }
.h-bp-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.h-bp-legend span { display: inline-flex; align-items: center; gap: 8px; }
.h-bp-legend i { width: 18px; height: 12px; border-radius: 4px; border: 2px solid #e8eefc; }
.h-bp-legend i.a { border-color: var(--lime); border-style: dashed; }
.h-bp-legend i.h { border-color: var(--pink); }
.h-machine-grid { display: grid; gap: 28px; }
@media (min-width: 1000px) { .h-machine-grid { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.h-step-card { background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); padding: 26px; box-shadow: var(--shadow); position: relative; min-height: 270px; }
.h-step-card .who { display: inline-block; font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border-radius: 6px; background: var(--paper-2); }
.h-step-card .who.agent { background: var(--lime); }
.h-step-card .who.human { background: var(--pink); }
.h-step-card h3 { font: 800 30px/1 var(--display); letter-spacing: -.04em; margin: 14px 0 10px; }
.h-step-card p { margin: 0; color: var(--ink-2); }
.h-step-card .ctl { display: flex; gap: 8px; margin-top: 22px; align-items: center; }
.h-step-card .ctl button { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--ink); background: var(--card); cursor: pointer; font: 700 16px var(--body); }
.h-step-card .ctl button:hover { background: var(--lime); }
.h-step-card .ctl span { font: 500 12px var(--mono); color: var(--mute); margin-left: auto; }
.h-steps-list { display: none; }
.no-js .h-steps-list, .h-steps-list.show { display: block; }

/* ---------- Rules (notebook cards) ---------- */
.h-rules { display: grid; gap: 22px; counter-reset: rule; }
@media (min-width: 720px) { .h-rules { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .h-rules { grid-template-columns: repeat(4, 1fr); } }
.h-rule { position: relative; background: var(--card); padding: 30px 22px 26px 46px; border-radius: 4px; box-shadow: 0 1px 0 var(--line), 0 18px 30px -22px rgba(20,20,18,.4);
  background-image: linear-gradient(90deg, transparent 32px, rgba(255,92,138,.45) 32px 34px, transparent 34px), repeating-linear-gradient(transparent 0 27px, rgba(35,64,176,.12) 27px 28px);
  transform: rotate(var(--rot, 0deg)); }
.h-rule:nth-child(odd) { --rot: -.8deg; } .h-rule:nth-child(even) { --rot: .9deg; }
.h-rule::before { counter-increment: rule; content: counter(rule, decimal-leading-zero); position: absolute; left: 8px; top: 30px; font: 500 11px var(--mono); color: var(--pink); }
.h-rule h3 { font: 800 24px/1.05 var(--display); letter-spacing: -.035em; margin: 0 0 10px; }
.h-rule p { margin: 0; font-size: 15.5px; color: var(--ink-2); line-height: 1.6; }

/* ---------- Quote / proof ---------- */
.h-proof { display: grid; gap: 34px; align-items: center; }
@media (min-width: 960px) { .h-proof { grid-template-columns: 1.3fr 1fr; gap: 56px; } }
.h-quote { position: relative; color: var(--ink); background: #fff7a8; padding: 44px 34px 30px; box-shadow: 0 26px 30px -20px rgba(20,20,18,.45); transform: rotate(-1.6deg); }
.h-quote blockquote { margin: 0; font: 600 clamp(24px, 2.8vw, 32px)/1.2 var(--display); letter-spacing: -.025em; }
.h-quote figcaption { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; font: 500 13px var(--mono); }
.h-quote figcaption a { font-weight: 600; }
.h-gmv { display: grid; gap: 18px; justify-items: start; }
.h-gmv .h-stamp { width: 168px; height: 168px; font-size: 40px; }
.h-big-num { margin: 0; font: 800 clamp(72px, 12vw, 150px)/.85 var(--display); letter-spacing: -.06em; }

/* ---------- Lab / cards grid ---------- */
.h-cards { display: grid; gap: 22px; }
@media (min-width: 720px) { .h-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .h-cards.four { grid-template-columns: repeat(4, 1fr); } .h-cards.three { grid-template-columns: repeat(3, 1fr); } }
.h-card { position: relative; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); padding: 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
a.h-card:hover { transform: translate(-3px, -4px); box-shadow: 7px 8px 0 var(--ink); }
.h-card h3 { font: 800 25px/1 var(--display); letter-spacing: -.035em; margin: 16px 0 8px; }
.h-card p { margin: 0; font-size: 15.5px; color: var(--ink-2); }
.h-card .tag { align-self: flex-start; font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border-radius: 6px; background: var(--paper-2); }
.h-card .foot { margin-top: auto; padding-top: 18px; font: 600 14px var(--body); display: flex; justify-content: space-between; align-items: center; }
.h-card .art { height: 130px; margin: -24px -24px 6px; border-bottom: 2px solid var(--ink); border-radius: 12px 12px 0 0; overflow: hidden; position: relative; background: var(--ink); }
.h-card .honest { font: 700 19px/1.1 var(--hand); color: var(--pen); margin-top: 12px; }
.h-ink .h-card { color: var(--ink); }

/* lab art (pure CSS) */
.h-card .art-os { background: radial-gradient(circle at 50% 50%, rgba(198,255,61,.9) 0 2px, transparent 3px) 0 0 / 14px 14px, var(--ink); animation: drift 14s linear infinite; }
.h-card .art-os::after { content: 'GRADY.OS'; position: absolute; inset: 0; display: grid; place-items: center; font: 800 34px var(--display); color: var(--paper); letter-spacing: -.04em; mix-blend-mode: difference; }
.h-card .art-sift { background: var(--paper-2); }
.h-card .art-sift i { position: absolute; bottom: 18px; width: 12%; background: var(--ink); border-radius: 3px 3px 0 0; animation: bars 3s var(--ease) infinite alternate; }
.h-card .art-llm { background: var(--ink); color: var(--lime); font: 500 12px/1.5 var(--mono); padding: 14px 16px; white-space: pre; }
.h-card .art-llm b { color: var(--paper); font-weight: 500; }
.h-card .art-walk { background: linear-gradient(transparent 76%, #2b2a25 76% 78%, var(--paper-2) 78%); }
.h-card .art-walk svg { position: absolute; left: 0; bottom: 24px; width: 100%; height: 80px; }
@keyframes drift { to { background-position: 140px 70px; } }
@keyframes bars { from { height: 20%; } to { height: 70%; } }
@media (prefers-reduced-motion: reduce) { .art-os, .h-card .art-sift i { animation: none; } }

/* ---------- Case files ---------- */
.h-case { display: grid; gap: 34px; padding: clamp(32px, 5vw, 56px) 0; border-top: 2px solid var(--ink); }
@media (min-width: 960px) { .h-case { grid-template-columns: 300px 1fr; gap: 56px; } }
.h-case-side { position: relative; }
@media (min-width: 960px) { .h-case-side { position: sticky; top: 100px; align-self: start; } }
.h-case-id { font: 500 12px var(--mono); letter-spacing: .14em; color: var(--mute); }
.h-case-side h2 { font: 800 clamp(34px, 4vw, 48px)/.92 var(--display); letter-spacing: -.045em; margin: 10px 0 14px; }
.h-facts { list-style: none; padding: 0; margin: 18px 0 0; border-top: 1.5px dashed var(--line); }
.h-facts li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1.5px dashed var(--line); font-size: 14.5px; }
.h-facts li span:first-child { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding-top: 3px; }
.h-facts li span:last-child { text-align: right; font-weight: 600; }
.h-case-body > * + * { margin-top: 22px; }
.h-case-body h3 { font: 800 26px/1.05 var(--display); letter-spacing: -.035em; margin-top: 34px; }
.h-case-body p { color: var(--ink-2); margin: 10px 0 0; max-width: 42em; }
.h-case-body ul.h-ticks { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.h-ticks { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.h-ticks li { position: relative; padding-left: 32px; color: var(--ink-2); }
.h-ticks li::before { content: ''; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 6px; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5 8.5 14 15 6.5' fill='none' stroke='%23141412' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; border: 1.5px solid var(--ink); }
.h-ticks li b { color: var(--ink); }
.h-nums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 2px solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--card); box-shadow: var(--shadow); }
@media (min-width: 720px) { .h-nums { grid-template-columns: repeat(4, 1fr); } }
.h-nums div { padding: 20px 18px; border-right: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); }
.h-nums b { display: block; font: 800 clamp(30px, 3.4vw, 42px)/1 var(--display); letter-spacing: -.045em; }
.h-nums span { display: block; font-size: 13.5px; color: var(--mute); margin-top: 6px; line-height: 1.35; }
.h-pipe { display: grid; gap: 10px; counter-reset: p; margin: 18px 0 0; padding: 0; list-style: none; }
.h-pipe li { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 15px; }
.h-pipe li::before { counter-increment: p; content: counter(p); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); font: 600 12px var(--mono); }
.h-pipe li em { font-style: normal; font: 600 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; background: var(--paper-2); }
.h-pipe li em.agent { background: var(--lime); } .h-pipe li em.human { background: var(--pink); }
.h-shot { border: 2px solid var(--ink); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); background: var(--card); }
.h-shot img { display: block; width: 100%; height: auto; }

/* ---------- Polaroid ---------- */
.h-polaroid { position: relative; background: #fff; padding: 14px 14px 56px; box-shadow: 0 28px 36px -24px rgba(20,20,18,.55); transform: rotate(-2.5deg); width: min(360px, 88vw); margin: 0 auto; }
.h-polaroid img { display: block; width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; filter: contrast(1.03) saturate(.95); }
.h-polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font: 700 26px/1 var(--hand); color: var(--ink-2); }

/* ---------- Timeline ---------- */
.h-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.h-timeline::before { content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: repeating-linear-gradient(var(--ink) 0 6px, transparent 6px 12px); }
.h-timeline li { position: relative; padding: 0 0 34px 48px; }
.h-timeline li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--card); border: 2.5px solid var(--ink); }
.h-timeline li.now::before { background: var(--lime); box-shadow: 0 0 0 6px rgba(198,255,61,.35); }
.h-timeline .y { font: 600 12px var(--mono); letter-spacing: .12em; color: var(--mute); }
.h-timeline h3 { font: 800 26px/1.05 var(--display); letter-spacing: -.035em; margin: 6px 0 6px; }
.h-timeline p { margin: 0; color: var(--ink-2); max-width: 36em; }

/* ---------- Two-col utility ---------- */
.h-split { display: grid; gap: 40px; align-items: start; }
@media (min-width: 960px) { .h-split { grid-template-columns: 1fr 1fr; gap: 64px; } .h-split.wide-l { grid-template-columns: 1.3fr 1fr; } .h-split.wide-r { grid-template-columns: .9fr 1.2fr; } .h-split.center { align-items: center; } }

/* ---------- Ticket (Creator Ops) ---------- */
.h-ticket { position: relative; display: grid; grid-template-columns: 1fr auto; background: var(--pink); border: 2px solid var(--ink); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; transform: rotate(-2deg); max-width: 460px; }
.h-ticket .main { padding: 26px 24px; }
.h-ticket .main .h-mono { font-size: 11px; }
.h-ticket .price { font: 800 74px/.9 var(--display); letter-spacing: -.06em; margin: 10px 0 6px; }
.h-ticket .price small { font-size: 22px; letter-spacing: -.02em; }
.h-ticket .stub { border-left: 2px dashed var(--ink); padding: 18px 14px; display: grid; place-items: center; background: #ffd1de; }
.h-ticket .stub span { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.h-ticket::before, .h-ticket::after { content: ''; position: absolute; right: 52px; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); transform: translateX(50%); }
.h-ticket::before { top: -15px; } .h-ticket::after { bottom: -15px; }

.h-topics { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.h-topics li { list-style: none; display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 22px 0; border-bottom: 2px solid var(--ink); align-items: baseline; }
@media (min-width: 900px) { .h-topics li { grid-template-columns: 80px 1fr 1.2fr; } }
.h-topics .n { font: 500 13px var(--mono); }
.h-topics h3 { font: 800 clamp(24px, 2.6vw, 32px)/1 var(--display); letter-spacing: -.04em; margin: 0; }
.h-topics p { margin: 0; color: var(--ink-2); grid-column: 2; }
@media (min-width: 900px) { .h-topics p { grid-column: auto; } }
.h-topics li:hover h3 { background: var(--lime); display: inline; }

.h-faq details { border-bottom: 2px solid var(--ink); }
.h-faq details:first-child { border-top: 2px solid var(--ink); }
.h-faq summary { cursor: pointer; list-style: none; padding: 22px 48px 22px 0; position: relative; font: 700 20px/1.25 var(--display); letter-spacing: -.02em; }
.h-faq summary::-webkit-details-marker { display: none; }
.h-faq summary::after { content: '+'; position: absolute; right: 4px; top: 16px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--ink); font: 600 20px/1 var(--body); transition: transform .25s var(--ease), background .2s; }
.h-faq details[open] summary::after { transform: rotate(45deg); background: var(--lime); }
.h-faq details p { margin: 0 0 22px; color: var(--ink-2); max-width: 44em; }

/* ---------- Big CTA ---------- */
.h-cta { text-align: center; }
.h-cta .h-h2 { font-size: clamp(44px, 9vw, 120px); }
.h-cta .h-ctas { justify-content: center; }
.h-cta .h-note { margin-top: 26px; }

/* ---------- Forms ---------- */
.h-pad { position: relative; background: #fff8b8; padding: 40px clamp(20px, 4vw, 40px) 30px; box-shadow: 0 30px 40px -28px rgba(20,20,18,.5); border-radius: 2px;
  background-image: repeating-linear-gradient(transparent 0 35px, rgba(35,64,176,.16) 35px 36px); transform: rotate(.6deg); }
.h-pad::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 18px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 22px) 12px 0 / auto 100%; opacity: .25; }
.h-field { display: grid; gap: 6px; margin-bottom: 18px; }
.h-field label, .h-legend { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.h-field input, .h-field textarea {
  width: 100%; font: 500 18px/1.4 var(--body); color: var(--ink); background: rgba(255,255,255,.6); border: 2px solid var(--ink); border-radius: 10px; padding: 12px 14px; }
.h-field textarea { min-height: 160px; resize: vertical; }
.h-field input:focus, .h-field textarea:focus { outline: none; background: #fff; box-shadow: 3px 3px 0 var(--ink); }
.h-row2 { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .h-row2 { grid-template-columns: 1fr 1fr; } }
.h-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 22px; padding: 0; border: 0; }
.h-chips input { position: absolute; opacity: 0; pointer-events: none; }
.h-chips label { cursor: pointer; padding: 9px 14px; border-radius: 999px; border: 2px solid var(--ink); background: rgba(255,255,255,.65); font: 600 14.5px/1 var(--body); text-transform: none; letter-spacing: 0; transition: transform .15s; }
.h-chips label:hover { transform: rotate(-2deg); }
.h-chips input:checked + label { background: var(--ink); color: var(--lime); }
.h-chips input:focus-visible + label { outline: 3px solid var(--pen); outline-offset: 2px; }
.h-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.h-form-foot { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.h-form-note { margin: 0; font-size: 14px; color: var(--ink-2); max-width: 30em; }
.h-form-note.bad { color: #b0002f; font-weight: 600; }
.h-sent { text-align: center; padding: 24px 0; }
.h-sent .h-stamp { color: var(--ink); background: var(--lime); }
.h-sent h2 { font: 800 40px/1 var(--display); letter-spacing: -.04em; margin: 22px 0 10px; }

/* ---------- Legal ---------- */
.h-legal { display: grid; gap: 40px; }
@media (min-width: 980px) { .h-legal { grid-template-columns: 250px 1fr; gap: 64px; } }
.h-legal-toc { font-size: 14.5px; }
@media (min-width: 980px) { .h-legal-toc { position: sticky; top: 100px; align-self: start; } }
.h-legal-toc nav { display: grid; gap: 2px; margin-top: 12px; }
.h-legal-toc a { text-decoration: none; padding: 6px 10px; border-radius: 8px; color: var(--ink-2); }
.h-legal-toc a:hover { background: var(--lime); color: var(--ink); }
.h-doc { background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); padding: clamp(22px, 4vw, 48px); box-shadow: var(--shadow); max-width: 820px; }
.h-doc section + section { margin-top: 36px; padding-top: 30px; border-top: 1.5px dashed var(--line); }
.h-doc h2 { font: 800 28px/1.1 var(--display); letter-spacing: -.035em; margin: 0 0 12px; }
.h-doc h3 { font: 700 19px/1.25 var(--display); margin: 22px 0 6px; }
.h-doc p, .h-doc li { color: var(--ink-2); }
.h-doc a { font-weight: 600; text-decoration-color: var(--lime-2); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.h-doc table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 14px 0; display: block; overflow-x: auto; }
.h-doc th, .h-doc td { text-align: left; padding: 10px 12px; border-bottom: 1.5px solid var(--line); vertical-align: top; }
.h-doc th { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.h-doc .callout, .h-doc .note { background: var(--paper); border-left: 4px solid var(--lime-2); padding: 14px 16px; border-radius: 8px; }
.h-crumbs { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.h-crumbs a { color: var(--ink); }
.h-crumbs i { font-style: normal; opacity: .5; }
.h-legal-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 40px; }
.h-legal-links a { font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 9px 12px; border: 1.5px solid var(--ink); border-radius: 999px; text-decoration: none; }
.h-legal-links a:hover { background: var(--lime); }

/* ---------- Footer ---------- */
.h-foot { background: var(--ink); color: var(--paper); padding: 80px 0 30px; overflow: hidden; position: relative; }
.h-foot a { text-decoration: none; }
.h-foot-top { display: grid; gap: 40px; }
@media (min-width: 900px) { .h-foot-top { grid-template-columns: 1.3fr 2fr; gap: 64px; } }
.h-foot-say { font: 800 clamp(40px, 6vw, 72px)/.92 var(--display); letter-spacing: -.05em; margin: 0; }
.h-foot-say a { font-size: clamp(28px, 3.4vw, 46px); letter-spacing: -.04em; color: var(--lime); text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 8px; word-break: break-word; }
.h-foot-say a:hover { background: var(--lime); color: var(--ink); text-decoration: none; }
.h-foot-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
@media (min-width: 720px) { .h-foot-cols { grid-template-columns: repeat(4, 1fr); } }
.h-foot-cols h2 { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(243,238,227,.55); margin: 0 0 14px; }
.h-foot-cols a, .h-foot-cols button { display: block; color: var(--paper); padding: 5px 0; font: 500 15.5px/1.35 var(--body); background: none; border: 0; cursor: pointer; text-align: left; }
.h-foot-cols a:hover, .h-foot-cols button:hover { color: var(--lime); }
.h-hq { margin-top: 26px; display: inline-flex; align-items: center; gap: 12px; max-width: 100%; font: 500 12px/1.4 var(--mono); letter-spacing: .06em; color: rgba(243,238,227,.75); border: 1.5px solid rgba(243,238,227,.25); border-radius: 14px; padding: 10px 14px; }
.h-hq i { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(198,255,61,.2); flex: none; }
.h-hq.late i { background: var(--pink); box-shadow: 0 0 0 4px rgba(255,92,138,.2); }
.h-wordmark { font: 800 clamp(70px, 21vw, 300px)/.8 var(--display); letter-spacing: -.07em; margin: 60px 0 0; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(243,238,227,.3); user-select: none; text-align: center; transition: color .5s; }
.h-wordmark:hover { color: var(--lime); -webkit-text-stroke-color: var(--lime); }
.h-foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(243,238,227,.15); font-size: 13px; color: rgba(243,238,227,.6); }

/* ---------- Cookie banner + dialogs ---------- */
.h-cookie { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; max-width: 560px; background: var(--card); border: 2px solid var(--ink); border-radius: 16px; box-shadow: var(--shadow); padding: 18px; display: grid; gap: 14px; }
@media (min-width: 700px) { .h-cookie { left: 20px; bottom: 20px; } }
.h-cookie p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.h-cookie p b { color: var(--ink); }
.h-cookie .acts { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.h-dialog { position: fixed; inset: 0; z-index: 80; background: rgba(20,20,18,.55); display: none; place-items: start center; padding: 10vh 14px 14px; backdrop-filter: blur(3px); }
.h-dialog.open { display: grid; }
.h-dialog-box { width: min(620px, 100%); background: var(--card); border: 2px solid var(--ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--ink); overflow: hidden; animation: pop .25s var(--ease); }
@keyframes pop { from { transform: translateY(10px) scale(.98); opacity: 0; } }
.h-dialog h2 { font: 800 28px/1 var(--display); letter-spacing: -.035em; margin: 0 0 8px; }
.h-opts { padding: 8px 22px; }
.h-opt { display: flex; gap: 16px; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1.5px dashed var(--line); }
.h-opt b { display: block; }
.h-opt span { font-size: 14px; color: var(--mute); }
.h-switch { appearance: none; -webkit-appearance: none; flex: none; width: 50px; height: 28px; border-radius: 999px; background: var(--paper-2); border: 2px solid var(--ink); position: relative; cursor: pointer; transition: background .2s; }
.h-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); transition: transform .2s var(--ease); }
.h-switch:checked { background: var(--lime); }
.h-switch:checked::after { transform: translateX(22px); }
.h-switch:disabled { opacity: .5; }
.h-dialog-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; background: var(--paper); border-top: 2px solid var(--ink); flex-wrap: wrap; }
.h-always { font: 600 11px var(--mono); letter-spacing: .1em; background: var(--lime); padding: 6px 9px; border-radius: 6px; border: 1.5px solid var(--ink); white-space: nowrap; }

/* command palette */
.h-ck-in { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 2px solid var(--ink); }
.h-ck-in svg { width: 18px; height: 18px; flex: none; }
.h-ck-in input { flex: 1; border: 0; background: none; font: 600 20px var(--display); color: var(--ink); outline: none; min-width: 0; }
.h-ck-list { list-style: none; margin: 0; padding: 8px; max-height: 52vh; overflow-y: auto; }
.h-ck-list a { display: flex; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.h-ck-list a span:last-child { font: 500 12px var(--mono); color: var(--mute); text-align: right; }
.h-ck-list li.sel a { background: var(--lime); }
.h-ck-list li.sel a span:last-child { color: var(--ink); }
.h-ck-empty { padding: 16px; color: var(--mute); font-family: var(--hand); font-size: 24px; }
.h-ck-foot { display: flex; gap: 16px; justify-content: space-between; padding: 10px 18px; border-top: 1.5px dashed var(--line); font: 500 12px var(--mono); color: var(--mute); }

/* toast */
.h-toast { position: fixed; left: 50%; bottom: 24px; z-index: 90; visibility: hidden; transform: translate(-50%, 160px) rotate(-2deg); background: var(--lime); border: 2px solid var(--ink); box-shadow: var(--shadow); padding: 12px 18px; border-radius: 12px; font: 700 22px/1.1 var(--hand); max-width: calc(100% - 32px); transition: transform .4s var(--ease); }
.h-toast.show { visibility: visible; transform: translate(-50%, 0) rotate(-2deg); }

/* marquee */
.h-marquee { overflow: hidden; border-block: 2px solid var(--ink); background: var(--lime); transform: rotate(-1.2deg); margin: 0 -20px; }
.h-marquee-track { display: flex; width: max-content; animation: marq 38s linear infinite; }
.h-marquee span { font: 800 clamp(22px, 3vw, 34px)/1 var(--display); letter-spacing: -.035em; padding: 16px 22px; white-space: nowrap; display: inline-flex; align-items: center; gap: 22px; }
.h-marquee span::after { content: '✳'; font-size: .8em; }
@keyframes marq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .h-marquee-track { animation: none; } }

/* 404 */
.h-404 { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 60px 0; }
.h-404 .h-receipt { transform: rotate(-3deg); max-width: 360px; margin: 0 auto 30px; text-align: left; }
.h-void { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.h-void span { font: 800 72px/1 var(--display); color: var(--pink); border: 6px solid var(--pink); padding: 0 16px; transform: rotate(-18deg); opacity: .85; letter-spacing: -.04em; }

@media print {
  .h-top, .h-foot, .h-cookie, .h-dialog, .h-toast, body.h-body::before { display: none !important; }
  .js .h-rv { opacity: 1 !important; transform: none !important; }
}

/* ---------- Name tags (Grady's background) ---------- */
.h-tags { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.h-nametag { background: var(--card); border: 2px solid var(--ink); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); transform: rotate(var(--rot, 0deg)); }
.h-nametag:nth-child(3n+1) { --rot: -1.5deg; } .h-nametag:nth-child(3n+2) { --rot: 1deg; } .h-nametag:nth-child(3n) { --rot: -.4deg; }
.h-nametag .hd { background: var(--pink); color: var(--ink); text-align: center; padding: 10px 8px 8px; border-bottom: 2px solid var(--ink); }
.h-nametag.lime .hd { background: var(--lime); }
.h-nametag .hd b { display: block; font: 800 26px/1 var(--display); letter-spacing: .02em; }
.h-nametag .hd small { font: 600 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.h-nametag .bd { padding: 16px 16px 18px; text-align: center; }
.h-nametag .bd .nm { font: 700 34px/1 var(--hand); color: var(--pen); }
.h-nametag .bd .rl { font: 700 17px/1.2 var(--display); margin-top: 8px; letter-spacing: -.01em; }
.h-nametag .bd .at { font-size: 14px; color: var(--mute); margin-top: 4px; }
.h-nametag .bd .win { display: inline-block; margin-top: 10px; font: 600 11px var(--mono); letter-spacing: .06em; background: var(--lime); padding: 5px 8px; border-radius: 6px; }

/* ---------- Agent cards ---------- */
.h-agent { background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.h-agent .top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.h-agent .when { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.h-agent .st { font: 600 11px/1 var(--mono); letter-spacing: .08em; padding: 6px 8px; border-radius: 6px; background: var(--lime); border: 1.5px solid var(--ink); }
.h-agent .st.off { background: var(--paper-2); }
.h-agent h3 { font: 800 25px/1 var(--display); letter-spacing: -.035em; margin: 4px 0 0; }
.h-agent p { margin: 0; font-size: 15.5px; color: var(--ink-2); }
.h-agent .leash { margin-top: auto; padding-top: 12px; border-top: 1.5px dashed var(--line); font-size: 14px; }
.h-agent .leash b { font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; display: block; margin-bottom: 4px; color: var(--pink); }
.h-loop { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: lp; }
@media (min-width: 900px) { .h-loop { grid-template-columns: repeat(5, 1fr); } }
.h-loop li { position: relative; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); padding: 20px 18px; }
.h-loop li::before { counter-increment: lp; content: counter(lp); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--lime); font: 700 14px var(--mono); margin-bottom: 12px; }
.h-loop li.me::before { background: var(--pink); color: var(--ink); }
.h-loop li.ai::before { background: var(--lime); color: var(--ink); border: 2px solid var(--ink); }
.h-loop h3 { font: 800 21px/1.05 var(--display); letter-spacing: -.03em; margin: 0 0 6px; }
.h-loop p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.h-loop small { display: block; margin-top: 10px; font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.h-spec { background: #fffef9; font: 400 14px/1.6 var(--mono); padding: 24px; border: 2px solid var(--ink); border-radius: 6px; box-shadow: var(--shadow); }
.h-spec dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; }
.h-spec dt { color: var(--mute); text-transform: uppercase; font-size: 11.5px; letter-spacing: .08em; padding-top: 3px; }
.h-spec dd { margin: 0; font-weight: 500; }
.h-ink .h-hl { transition: color .3s .55s; }
.js .h-ink .h-hl:not(.in) { color: var(--paper); }

.h-hero .h-h1 { font-size: clamp(54px, 8vw, 112px); }

.h-ink .h-hl::before { top: .1em; bottom: -.02em; }
.h-ink .h-h2 { line-height: 1.02; }
@media (min-width: 900px) { .h-tags { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .h-loop.six { grid-template-columns: repeat(3, 1fr); } }

/* Legal pages: let grid columns shrink below their widest child (tables, long words) */
.h-legal > *, .h-split > *, .h-case > *, .h-hero-grid > *, .h-machine-grid > *, .h-proof > * { min-width: 0; }
.h-doc { overflow-wrap: break-word; }
.h-doc a { overflow-wrap: anywhere; }
.h-doc table { max-width: 100%; }
@media (max-width: 640px) {
  .h-doc table.h-stack { display: block; overflow: visible; }
  .h-doc table.h-stack thead { display: none; }
  .h-doc table.h-stack tbody, .h-doc table.h-stack tr, .h-doc table.h-stack td { display: block; width: 100%; }
  .h-doc table.h-stack tr { border: 1.5px solid var(--line); border-radius: 10px; padding: 6px 12px; margin: 0 0 12px; background: var(--paper); }
  .h-doc table.h-stack td { border: 0; padding: 6px 0; }
  .h-doc table.h-stack td + td { border-top: 1px dashed var(--line); }
  .h-doc table.h-stack td[data-label]::before { content: attr(data-label); display: block; font: 600 10.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-bottom: 2px; }
  .h-doc table.h-stack td:first-child { font-weight: 600; color: var(--ink); }
}
@media (max-width: 480px) {
  .h-quote { padding: 38px 20px 22px; }
  .h-quote blockquote { font-size: 21px !important; overflow-wrap: break-word; }
}