/* Hallmark · genre: atmospheric · macrostructure: Catalogue + inserted manifesto beat (stakes) · theme: custom-tuned (brand-anchored: Botvatar ink #0D0503 / orange #FF6900) · enrichment: E-lit-case · nav: N5 floating pill · footer: Ft5 statement
 * pre-emit critique: P5 H5 E4 S5 R4 V5
 * type: display+body Space Grotesk · technical/label register Space Mono (established brand pair, preserved from existing site — mono is a systematic label face here, not a decorative outlier)
 * contrast: pass (gates 40–41) · no invented metrics (gate 46) · no re-drawn chrome (gate 47)
 */

/* ============ TOKENS ============ */
:root{
  /* paper — warm near-blacks derived from brand ink #0D0503, never zero-chroma */
  --color-paper:    #120806;
  --color-paper-2:  #1B0F0B;
  --color-paper-3:  #241611;
  --color-paper-4:  #33211A;
  --color-ink:      #0D0503;

  /* type on dark */
  --color-cream:    #F8F7F3;
  --color-peach:    #F9E9DA;
  --color-muted:    #C6B2A6;
  --color-muted-2:  #9A867C;

  /* accents */
  --color-accent:   #FF6900;
  --color-accent-soft: #FFA463;
  --color-green:    #3ECB78;

  /* lines */
  --line-hair:  rgba(248,247,243,.10);
  --line-hair-2:rgba(248,247,243,.16);
  --line-accent:rgba(255,105,0,.34);

  /* surfaces */
  --surface-1:  rgba(248,247,243,.035);
  --surface-2:  rgba(248,247,243,.06);
  --color-focus:#FFA463;

  /* type */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Space Grotesk", system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;

  --text-xs:  12px;
  --text-sm:  13.5px;
  --text-base:16px;
  --text-md:  17.5px;
  --text-lg:  clamp(19px, 1.1vw + 15px, 22px);
  --text-xl:  clamp(24px, 1.6vw + 17px, 31px);
  --text-2xl: clamp(28px, 2.5vw + 15px, 41px);
  --text-3xl: clamp(33px, 3.2vw + 15px, 52px);

  --lh-tight: 1.03;
  --lh-snug:  1.16;
  --lh-body:  1.58;

  /* space — 4px scale */
  --space-3xs: 4px;  --space-2xs: 8px;  --space-xs: 12px;
  --space-sm: 16px;  --space-md: 24px;  --space-lg: 32px;
  --space-xl: 48px;  --space-2xl: 64px; --space-3xl: 96px;
  --space-4xl: 128px;--space-5xl: 176px;

  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px;

  --wrap: 1180px;

  --z-sticky-nav: 300;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============ RESET ============ */
*{box-sizing:border-box;margin:0}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{
  background:var(--color-paper);
  color:var(--color-cream);
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-style:normal;overflow-wrap:anywhere;min-width:0;font-weight:700;letter-spacing:-.028em}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:var(--radius-sm)}

/* two fixed warm blooms — the atmospheric canvas */
body::before,body::after{
  content:"";position:fixed;pointer-events:none;z-index:0;
}
body::before{
  top:-18vh;right:-14vw;width:74vw;height:74vw;max-width:1080px;max-height:1080px;
  background:radial-gradient(circle at center, rgba(255,105,0,.20) 0%, rgba(255,105,0,.07) 34%, rgba(255,105,0,0) 66%);
}
body::after{
  bottom:-26vh;left:-20vw;width:64vw;height:64vw;max-width:900px;max-height:900px;
  background:radial-gradient(circle at center, rgba(249,233,218,.10) 0%, rgba(249,233,218,.03) 40%, rgba(249,233,218,0) 68%);
}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--space-md);position:relative;z-index:1}

/* ============ SHARED BITS ============ */
.kicker{
  font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent);
  line-height:1.4;margin-bottom:var(--space-sm);
}
.lede{color:var(--color-muted);font-size:var(--text-md);line-height:var(--lh-body);max-width:56ch}
.mono{font-family:var(--font-mono)}

/* section head — eyebrow stacked directly above heading, single column (gate 54) */
.head{display:block;max-width:64ch;margin-bottom:var(--space-xl)}
.head h2{font-size:var(--text-2xl);line-height:var(--lh-snug)}
.head .lede{margin-top:var(--space-sm)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2xs);
  font-family:var(--font-body);font-weight:700;font-size:var(--text-sm);
  line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;
  padding:14px 22px;border-radius:var(--radius-pill);border:1px solid transparent;
  transition:background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn-lg{padding:17px 28px;font-size:var(--text-md)}
.btn-primary{background:var(--color-accent);color:var(--color-ink);box-shadow:0 0 0 rgba(255,105,0,0)}
.btn-primary:hover{background:var(--color-accent-soft);box-shadow:0 8px 34px rgba(255,105,0,.30)}
.btn-primary:active{background:var(--color-accent);box-shadow:none}
.btn-ghost{background:transparent;color:var(--color-cream);border-color:var(--line-hair-2)}
.btn-ghost:hover{border-color:var(--color-cream);background:var(--surface-1)}
.btn-ghost:active{background:var(--surface-2)}
.btn-cream{background:var(--color-cream);color:var(--color-ink)}
.btn-cream:hover{background:var(--color-peach)}
.btn-cream:active{background:var(--color-cream)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed;box-shadow:none}

/* ============ NAV — N5 floating pill ============ */
.nav-shell{position:sticky;top:0;z-index:var(--z-sticky-nav);padding:var(--space-sm) var(--space-md);pointer-events:none}
.nav{
  pointer-events:auto;
  max-width:var(--wrap);margin-inline:auto;
  display:flex;align-items:center;gap:var(--space-md);
  padding:10px 10px 10px 20px;
  background:rgba(18,8,6,.72);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--line-hair);border-radius:var(--radius-pill);
}
.wordmark{
  font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.03em;
  text-decoration:none;color:var(--color-cream);line-height:1;display:inline-flex;align-items:baseline;gap:1px;
}
.wordmark .tld{font-family:var(--font-mono);font-weight:400;font-size:13px;color:var(--color-accent)}
.nav-links{display:flex;align-items:center;gap:var(--space-md);margin-left:auto}
.nav-links a{
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-muted);text-decoration:none;white-space:nowrap;line-height:1;
  transition:color .16s var(--ease);
}
.nav-links a:hover{color:var(--color-cream)}
.nav .btn{padding:11px 18px}

/* ============ HERO — the lit case ============ */
.hero{padding-block:var(--space-xl) var(--space-4xl)}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  gap:var(--space-xl);align-items:center;
}
.hero h1{font-size:var(--text-3xl);line-height:var(--lh-tight);text-wrap:balance}
.hero h1 .mark{color:var(--color-accent-soft);position:relative;white-space:nowrap}
.hero h1 .mark::after{
  content:"";position:absolute;left:0;right:0;bottom:-.14em;height:2px;
  background:var(--color-accent);border-radius:2px;
}
.hero .lede{margin-top:var(--space-md);font-size:var(--text-lg);max-width:50ch}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs);margin-top:var(--space-lg)}
.hero-note{
  font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted-2);
  margin-top:var(--space-sm);line-height:1.6;
}
.hero-note b{color:var(--color-muted);font-weight:700}

/* the case: character on a lit plinth */
.case{position:relative;display:grid;place-items:end center;min-height:430px;isolation:isolate}
.case::before{ /* key light */
  content:"";position:absolute;inset:auto 0 8% 0;height:88%;z-index:-2;
  background:radial-gradient(ellipse 62% 58% at 50% 78%, rgba(255,164,99,.24) 0%, rgba(255,105,0,.08) 44%, rgba(255,105,0,0) 72%);
}
.case::after{ /* floor pool */
  content:"";position:absolute;left:50%;translate:-50% 0;bottom:6%;z-index:-1;
  width:min(78%,420px);height:56px;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,164,99,.32) 0%, rgba(255,105,0,.10) 46%, rgba(255,105,0,0) 74%);
  filter:blur(6px);
}
.case-shelf{
  position:absolute;left:50%;translate:-50% 0;bottom:6%;width:min(88%,520px);height:1px;
  background:linear-gradient(90deg,rgba(255,164,99,0),rgba(255,164,99,.46),rgba(255,164,99,0));
}
.case img{
  position:relative;width:min(104%,392px);
  filter:drop-shadow(0 30px 30px rgba(0,0,0,.66));
  animation:hover-bob 6.4s ease-in-out infinite;
}
@keyframes hover-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* the brief that made it — a typed spec, not fake UI chrome */
.brief{
  margin-top:var(--space-lg);border:1px solid var(--line-hair);border-radius:var(--radius-md);
  background:var(--surface-1);padding:var(--space-md);max-width:440px;
}
.brief-label{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--color-muted-2);margin-bottom:var(--space-xs);
}
.brief dl{display:grid;gap:var(--space-2xs);margin:0}
.brief dl > div{display:grid;grid-template-columns:66px minmax(0,1fr);gap:var(--space-sm);align-items:baseline}
.brief dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent)}
.brief dd{margin:0;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-muted);line-height:1.5}

/* ============ FACT RAIL ============ */
.rail{border-block:1px solid var(--line-hair);background:rgba(248,247,243,.02)}
.rail-inner{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--space-md);
}
.rail-item{padding:var(--space-md) var(--space-md) var(--space-md) 0;border-left:1px solid var(--line-hair);padding-left:var(--space-md)}
.rail-item:first-child{border-left:0;padding-left:0}
.rail-item b{display:block;font-size:var(--text-md);font-weight:700;letter-spacing:-.02em;line-height:1.3}
.rail-item span{
  display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-muted-2);margin-top:var(--space-3xs);
}

/* ============ CATALOGUE ============ */
.catalogue{padding-block:var(--space-4xl) var(--space-2xl)}
.cat-meta{
  display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-md);align-items:center;
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-muted-2);padding-bottom:var(--space-sm);border-bottom:1px solid var(--line-hair-2);
  margin-bottom:var(--space-xl);
}
.cat-meta .tick{color:var(--color-green)}
.cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.spec{
  position:relative;padding:var(--space-lg) var(--space-md) var(--space-xl);
  border-top:1px solid var(--line-hair);border-left:1px solid var(--line-hair);
  transition:background-color .2s var(--ease);
}
.spec:nth-child(3n+1){border-left:0}
.spec:nth-child(-n+3){border-top:0}
.spec:hover{background:var(--surface-1)}
.spec:hover .spec-stage img{transform:translateY(-8px)}
.spec:hover .spec-stage::after{opacity:1}
.spec-stage{position:relative;display:grid;place-items:end center;height:300px;margin-bottom:var(--space-md)}
.spec-stage::before{
  content:"";position:absolute;inset:auto 0 10% 0;height:76%;
  background:radial-gradient(ellipse 58% 56% at 50% 80%, rgba(249,233,218,.13) 0%, rgba(249,233,218,0) 68%);
}
.spec-stage::after{
  content:"";position:absolute;left:50%;translate:-50% 0;bottom:9%;
  width:64%;height:26px;border-radius:50%;opacity:.55;
  background:radial-gradient(ellipse at center, rgba(255,164,99,.34) 0%, rgba(255,105,0,0) 70%);
  filter:blur(4px);transition:opacity .2s var(--ease);
}
.spec-stage img{
  position:relative;max-height:282px;width:auto;
  filter:drop-shadow(0 20px 20px rgba(0,0,0,.58));
  transition:transform .28s var(--ease);
}
.spec-no{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--color-muted-2);
  position:absolute;top:var(--space-md);left:var(--space-md);
}
.spec:nth-child(3n+1) .spec-no{left:0}
.spec h3{font-size:var(--text-lg);line-height:1.2}
.spec dl{margin-top:var(--space-2xs);display:grid;gap:2px}
.spec dl > div{display:grid;grid-template-columns:52px minmax(0,1fr);gap:var(--space-2xs)}
.spec dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted-2);padding-top:3px}
.spec dd{margin:0;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-muted);line-height:1.5}

/* ============ SIGNED ============ */
.signed{border-block:1px solid var(--line-hair);background:rgba(248,247,243,.02);padding-block:var(--space-3xl)}
.signed-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-3xl);align-items:center}
.stamp{
  border:1px solid var(--line-accent);border-radius:var(--radius-md);padding:var(--space-md);
  background:rgba(255,105,0,.05);font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.9;
  color:var(--color-muted);
}
.stamp .row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-sm)}
.stamp .k{color:var(--color-muted-2);letter-spacing:.1em;text-transform:uppercase;font-size:11px;padding-top:5px}
.stamp .ok{color:var(--color-green);font-weight:700}

/* ============ PRICING ============ */
.pricing{padding-block:var(--space-4xl)}
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md);margin-top:var(--space-xl)}
.tier{
  display:flex;flex-direction:column;
  border:1px solid var(--line-hair);border-radius:var(--radius-lg);padding:var(--space-lg);
  background:var(--surface-1);
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.tier:hover{border-color:var(--line-hair-2)}
.tier.featured{border-color:var(--line-accent);background:rgba(255,105,0,.055)}
.tier-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-sm)}
.tier-name{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-muted)}
.tier.featured .tier-name{color:var(--color-accent)}
.tier-badge{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-ink);background:var(--color-accent);border-radius:var(--radius-pill);padding:4px 9px;line-height:1;
}
.tier-price{font-size:var(--text-2xl);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-top:var(--space-sm)}
.tier-price em{font-style:normal;font-family:var(--font-mono);font-size:var(--text-sm);font-weight:400;color:var(--color-muted-2);letter-spacing:0}
.tier ul{list-style:none;padding:0;margin:var(--space-md) 0 var(--space-lg);display:grid;gap:var(--space-2xs)}
.tier li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-2xs);
  font-size:var(--text-sm);color:var(--color-muted);line-height:1.55;
}
.tier li::before{content:"—";color:var(--color-accent);font-family:var(--font-mono)}
.tier .btn{margin-top:auto;width:100%}
.pricing-foot{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted-2);margin-top:var(--space-md)}

/* ============ CLOSE ============ */
.close{padding-block:var(--space-2xl) var(--space-4xl)}
.close-card{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  border:1px solid var(--line-hair);background:var(--color-paper-2);
  padding:var(--space-3xl) var(--space-xl);text-align:center;
}
.close-card::before{
  content:"";position:absolute;inset:auto 0 -60% 0;height:150%;
  background:radial-gradient(ellipse 46% 60% at 50% 100%, rgba(255,105,0,.24) 0%, rgba(255,105,0,0) 70%);
}
.close-card > *{position:relative}
.close-card h2{font-size:var(--text-2xl);line-height:var(--lh-snug);max-width:20ch;margin-inline:auto}
.close-card .lede{margin:var(--space-sm) auto 0;max-width:46ch}
.close-card .btn{margin-top:var(--space-lg)}
.close-cast{
  display:flex;justify-content:center;align-items:flex-end;gap:var(--space-md);
  margin-top:var(--space-2xl);opacity:.9;
}
.close-cast img{height:132px;width:auto;filter:drop-shadow(0 12px 14px rgba(0,0,0,.55))}

/* ============ FOOTER — Ft5 statement ============ */
footer{border-top:1px solid var(--line-hair);padding-block:var(--space-2xl) var(--space-xl)}
.foot-statement{font-size:var(--text-xl);line-height:var(--lh-snug);max-width:22ch;font-weight:700;letter-spacing:-.028em}
.foot-bar{
  display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-md);align-items:center;
  margin-top:var(--space-2xl);padding-top:var(--space-md);border-top:1px solid var(--line-hair);
  font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted-2);
}
.foot-bar a{text-decoration:none;white-space:nowrap;transition:color .16s var(--ease)}
.foot-bar a:hover{color:var(--color-cream)}
.foot-bar .sep{color:var(--color-accent)}
.foot-bar .push{margin-left:auto}


/* ============ STAKES — the argument, in plain words ============ */
.stakes{
  border-block:1px solid var(--line-hair);
  background:var(--color-paper-2);
  padding-block:var(--space-3xl);
}
.stakes-inner{}
.stakes p{
  font-size:var(--text-2xl);line-height:var(--lh-snug);font-weight:700;
  letter-spacing:-.028em;color:var(--color-muted);max-width:30ch;
  overflow-wrap:anywhere;min-width:0;
}
.stakes p + p{margin-top:var(--space-md);color:var(--color-cream)}
.stakes p .hit{color:var(--color-accent-soft)}

/* ============ ANATOMY — portrait outside, credential inside ============ */
.anatomy{padding-block:var(--space-4xl)}
.anatomy-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:var(--space-3xl);align-items:center}
.anatomy .body{color:var(--color-muted);font-size:var(--text-md);line-height:var(--lh-body);max-width:56ch;margin-top:var(--space-md)}
.anatomy .body b{color:var(--color-cream);font-weight:700}
.inline-link{
  display:inline-block;margin-top:var(--space-lg);color:var(--color-accent-soft);
  font-weight:700;font-size:var(--text-sm);text-decoration:none;
  border-bottom:1px solid var(--line-accent);padding-bottom:2px;
  transition:color .16s var(--ease),border-color .16s var(--ease);
}
.inline-link:hover{color:var(--color-accent);border-color:var(--color-accent)}

.card-x{position:relative}
.card-x-stage{position:relative;display:grid;place-items:end center;height:300px}
.card-x-stage::before{
  content:"";position:absolute;inset:auto 0 8% 0;height:80%;
  background:radial-gradient(ellipse 58% 56% at 50% 80%, rgba(255,164,99,.18) 0%, rgba(255,105,0,0) 70%);
}
.card-x-stage img{position:relative;max-height:280px;width:auto;filter:drop-shadow(0 22px 22px rgba(0,0,0,.6))}
.manifest{
  margin-top:var(--space-md);border:1px solid var(--line-accent);border-radius:var(--radius-md);
  background:rgba(255,105,0,.05);padding:var(--space-md);display:grid;gap:var(--space-3xs);
}
.manifest > div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--space-sm);align-items:baseline}
.manifest dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--color-muted-2)}
.manifest dd{margin:0;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-muted);overflow-wrap:anywhere}
.manifest dd .ok{color:var(--color-green);font-weight:700}
.manifest-note{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--color-muted-2);
  margin-top:var(--space-2xs);line-height:1.6;
}

/* ============ LOOP — the real asset, shown as a specimen plate ============ */
.loopsec{border-block:1px solid var(--line-hair);background:var(--color-paper-2);padding-block:var(--space-4xl)}
.loop-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--space-3xl);align-items:center}
.plate{position:relative;display:grid;place-items:center;min-height:400px;margin:0}
.plate::before{
  content:"";position:absolute;inset:auto 0 12% 0;height:74%;
  background:radial-gradient(ellipse 56% 54% at 50% 80%, rgba(255,164,99,.20) 0%, rgba(255,105,0,0) 70%);
}
.plate::after{
  content:"";position:absolute;left:50%;translate:-50% 0;bottom:14%;width:52%;height:26px;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,164,99,.30) 0%, rgba(255,105,0,0) 70%);filter:blur(5px);
}
.plate video{position:relative;width:100%;max-width:390px;height:auto;display:block;
  filter:drop-shadow(0 20px 20px rgba(0,0,0,.5))}
.plate-tag{
  position:absolute;top:0;left:0;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--color-muted-2);border:1px solid var(--line-hair);border-radius:var(--radius-pill);
  padding:5px 10px;line-height:1;
}

/* ============ AGENT RAIL — x402 / AP2, said in English first ============ */
.agentrail{padding-block:var(--space-4xl)}
.tracks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md);margin-top:var(--space-xl)}
.track{border:1px solid var(--line-hair);border-radius:var(--radius-lg);padding:var(--space-lg);background:var(--surface-1)}
.track.next{border-color:var(--line-accent);background:rgba(255,105,0,.045)}
.track-head{
  display:flex;align-items:center;gap:var(--space-2xs);
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-muted);margin-bottom:var(--space-md);
}
.pip{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.pip.live{background:var(--color-green)}
.pip.soon{background:var(--color-accent)}
.track.next .track-head{color:var(--color-accent)}
.feat{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-md)}
.feat li{display:grid;gap:var(--space-3xs)}
.feat strong{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs);
  font-size:var(--text-base);line-height:1.3;letter-spacing:-.015em;
}
.feat span{color:var(--color-muted);font-size:var(--text-sm);line-height:1.6}
.proto{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  color:var(--color-accent);border:1px solid var(--line-accent);border-radius:var(--radius-pill);
  padding:3px 8px;line-height:1;
}
.notlive{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-muted-2);border:1px solid var(--line-hair-2);border-radius:var(--radius-pill);
  padding:3px 8px;line-height:1;
}
.wire{
  margin-top:var(--space-lg);border:1px solid var(--line-hair);border-radius:var(--radius-md);
  background:rgba(248,247,243,.03);padding:var(--space-md);overflow-x:auto;
}
.wire code{
  font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.9;color:var(--color-muted);
  white-space:pre;display:block;
}
.wire .in{color:var(--color-accent-soft)}
.wire .out{color:var(--color-green)}
.wire-note{font-family:var(--font-mono);font-size:11px;color:var(--color-muted-2);margin-top:var(--space-2xs)}

/* ============ CONTROL STRIP — folded down from a full section ============ */
.strip{
  margin-top:var(--space-2xl);padding-top:var(--space-lg);border-top:1px solid var(--line-hair);
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:var(--space-2xl);align-items:start;
}
.strip-block .brief-label{margin-bottom:var(--space-xs)}
.finish-row{display:flex;gap:var(--space-md);flex-wrap:wrap}
.finish-row div{display:flex;align-items:center;gap:var(--space-2xs)}
.finish-row span{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted)}
.chipdot{width:26px;height:26px;border-radius:var(--radius-sm);border:1px solid var(--line-hair-2);flex:0 0 auto}
.chipdot.gloss{background:linear-gradient(150deg,#F0D9C4 0%,#8C6A55 42%,#2A1913 100%)}
.chipdot.matte{background:linear-gradient(150deg,#6B5A50 0%,#4A3B34 60%,#2A211D 100%)}
.swatches{display:flex;gap:var(--space-2xs);flex-wrap:wrap}
.sw{display:flex;align-items:center;gap:var(--space-2xs)}
.sw-fill{width:26px;height:26px;border-radius:var(--radius-sm);border:1px solid var(--line-hair-2);flex:0 0 auto}
.sw-name{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted)}
.sw-charcoal{background:linear-gradient(150deg,#54514C 0%,#2E2C29 55%,#1A1917 100%)}
.sw-jade{background:linear-gradient(150deg,#3FD98A 0%,#12A45C 52%,#0A5A33 100%)}
.sw-ember{background:linear-gradient(150deg,#FFA463 0%,#FF6900 52%,#8A3300 100%)}
.sw-cobalt{background:linear-gradient(150deg,#5B93FF 0%,#1E48C7 52%,#0F2160 100%)}
.sw-putty{background:linear-gradient(150deg,#E6D8C0 0%,#BDA98A 52%,#7A6B54 100%)}
.sw-jet{background:linear-gradient(150deg,#4A4441 0%,#221E1C 55%,#100E0D 100%)}

/* ============ PRICING additions ============ */
.tier li.off{color:var(--color-muted-2)}
.tier li.off::before{content:"·";color:var(--color-muted-2)}
.tier li b{color:var(--color-cream)}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .anatomy-grid,.loop-grid,.signed-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-2xl)}
  .tracks{grid-template-columns:minmax(0,1fr)}
  .strip{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}
  .hero-grid{gap:var(--space-lg)}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .case{min-height:360px;margin-top:var(--space-lg)}
  .case img{width:min(72%,300px)}
  .brief{max-width:none}
  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spec:nth-child(3n+1){border-left:1px solid var(--line-hair)}
  .spec:nth-child(2n+1){border-left:0}
  .spec:nth-child(2n+1) .spec-no{left:0}
  .spec:nth-child(3){border-top:1px solid var(--line-hair)}
  .rail-inner{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rail-item:nth-child(3){border-left:0;padding-left:0}
  .rail-item:nth-child(-n+2){border-bottom:1px solid var(--line-hair)}
  .tiers{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  :root{--space-4xl:88px;--space-3xl:64px}
  .nav{padding-left:var(--space-sm)}
  .nav-links{gap:var(--space-sm)}
  .nav-links{display:none}
  .nav .btn{margin-left:auto}
  .cat-grid{grid-template-columns:minmax(0,1fr)}
  .spec{border-left:0!important;padding-inline:0}
  .spec .spec-no{left:0!important}
  .spec:nth-child(n){border-top:1px solid var(--line-hair)}
  .spec:first-child{border-top:0}
  .swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat-meta{display:grid;gap:var(--space-3xs)}
  .wire code{font-size:11px;line-height:1.85}
  .stakes p{max-width:none}
  .cat-meta .sep{display:none}
  .rail-inner{grid-template-columns:minmax(0,1fr)}
  .rail-item{border-left:0!important;padding-left:0!important;border-bottom:1px solid var(--line-hair)}
  .rail-item:last-child{border-bottom:0}
  .case{min-height:300px}
  .case img{width:min(78%,252px)}
  .close-cast img{height:76px}
  .close-card{padding-inline:var(--space-md)}
  .foot-bar .push{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .case img{animation:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .spec:hover .spec-stage img{transform:none}
}

/* ============ WHAT YOU GET — output + entitlement spec ============ */
.spec-table{
  margin-top:var(--space-xl);border:1px solid var(--line-hair);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--surface-1);
}
.spec-row{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line-hair);
}
.spec-row:first-child{border-top:0}
.spec-row > *{padding:var(--space-sm) var(--space-md);display:flex;align-items:center;min-width:0}
.spec-row .lbl{
  font-size:var(--text-sm);color:var(--color-cream);font-weight:700;letter-spacing:-.01em;
  border-right:1px solid var(--line-hair);
}
.spec-row .val{
  font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-muted);
  border-right:1px solid var(--line-hair);overflow-wrap:anywhere;
}
.spec-row .val:last-child{border-right:0}
.spec-row.headrow{background:rgba(248,247,243,.05)}
.spec-row.headrow .val,.spec-row.headrow .lbl{
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-muted-2);font-weight:700;
}
.spec-row.headrow .val.hi{color:var(--color-accent)}
.val .yes{color:var(--color-green);font-weight:700}
.val .no{color:var(--color-muted-2)}
.spec-foot{
  font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted-2);
  margin-top:var(--space-md);line-height:1.7;
}

/* ============ STYLE SYSTEM ============ */
.styles{border-block:1px solid var(--line-hair);background:var(--color-paper-2);padding-block:var(--space-4xl)}
.style-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2xl);margin-top:var(--space-xl)}
.style-block .brief-label{margin-bottom:var(--space-sm)}
.finish-cards{display:grid;gap:var(--space-sm)}
.finish-cards li{
  list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-sm);
  border:1px solid var(--line-hair);border-radius:var(--radius-md);padding:var(--space-md);
  background:var(--surface-1);align-items:start;
}
.finish-cards strong{display:block;font-size:var(--text-base);line-height:1.3}
.finish-cards span.d{display:block;color:var(--color-muted-2);font-size:var(--text-sm);line-height:1.55;margin-top:2px}
.forms-cloud{display:flex;flex-wrap:wrap;gap:var(--space-2xs);margin-top:var(--space-sm);margin-bottom:var(--space-md)}
.form-chip{
  font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted);
  border:1px solid var(--line-hair);border-radius:var(--radius-pill);padding:6px 11px;line-height:1;
}
.form-chip.own{border-color:var(--line-accent);color:var(--color-accent)}

/* ============ PROTOCOL LINKS ============ */
a.proto-link{
  text-decoration:none;border-bottom:1px solid transparent;
  transition:color .16s var(--ease),border-color .16s var(--ease),background-color .16s var(--ease);
}
a.proto-link:hover{background:rgba(255,105,0,.12);border-color:var(--color-accent)}
.readmore{
  display:inline-flex;align-items:center;gap:6px;margin-top:var(--space-2xs);
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.06em;
  color:var(--color-accent-soft);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid var(--line-accent);padding-bottom:1px;
  transition:color .16s var(--ease),border-color .16s var(--ease);
}
.readmore:hover{color:var(--color-accent);border-color:var(--color-accent)}

/* ============ DOC PAGES (Long Document macrostructure) ============ */
/* Hallmark · macrostructure: Long Document · genre: atmospheric · theme: same custom-tuned tokens
 * Deliberately NOT Catalogue — sub-pages must not share the landing page's fingerprint. */
.doc{max-width:760px;margin-inline:auto;padding:var(--space-2xl) var(--space-md) var(--space-4xl)}
.doc-crumb{
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-muted-2);margin-bottom:var(--space-lg);display:flex;flex-wrap:wrap;gap:var(--space-2xs);
}
.doc-crumb a{color:var(--color-muted-2);text-decoration:none;white-space:nowrap}
.doc-crumb a:hover{color:var(--color-cream)}
.doc-crumb .sep{color:var(--color-accent)}
.doc h1{font-size:var(--text-2xl);line-height:var(--lh-snug);margin-bottom:var(--space-sm)}
.doc .standfirst{
  font-size:var(--text-lg);line-height:1.5;color:var(--color-cream);
  padding-bottom:var(--space-lg);border-bottom:1px solid var(--line-hair-2);margin-bottom:var(--space-xl);
  max-width:60ch;
}
.doc-status{
  display:inline-flex;align-items:center;gap:var(--space-2xs);margin-bottom:var(--space-md);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  border-radius:var(--radius-pill);padding:5px 10px;line-height:1;
}
.doc-status.live{color:var(--color-green);border:1px solid rgba(62,203,120,.4);background:rgba(62,203,120,.07)}
.doc-status.soon{color:var(--color-accent);border:1px solid var(--line-accent);background:rgba(255,105,0,.06)}
.doc h2{
  font-size:var(--text-xl);line-height:var(--lh-snug);
  margin:var(--space-2xl) 0 var(--space-sm);
}
.doc h3{font-size:var(--text-md);line-height:1.35;margin:var(--space-lg) 0 var(--space-2xs);color:var(--color-cream)}
.doc p{color:var(--color-muted);font-size:var(--text-md);line-height:var(--lh-body);margin-bottom:var(--space-md);max-width:66ch}
.doc p b,.doc li b{color:var(--color-cream);font-weight:700}
.doc ul,.doc ol{margin:0 0 var(--space-md);padding-left:0;list-style:none;display:grid;gap:var(--space-2xs);max-width:66ch}
.doc ul li{position:relative;padding-left:22px;color:var(--color-muted);font-size:var(--text-md);line-height:1.6}
.doc ul li::before{content:"—";position:absolute;left:0;top:0;color:var(--color-accent);font-family:var(--font-mono)}
.doc ol{counter-reset:step}
.doc ol li{
  position:relative;padding-left:40px;
  color:var(--color-muted);font-size:var(--text-md);line-height:1.6;counter-increment:step;
}
.doc ol li::before{
  content:counter(step,decimal-leading-zero);position:absolute;left:0;top:2px;
  font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-accent);
}
.doc p code,.doc li code,.doc .standfirst code,.doc .callout code{
  font-family:var(--font-mono);font-size:.88em;color:var(--color-accent-soft);
  background:rgba(255,105,0,.09);border-radius:5px;padding:2px 5px;overflow-wrap:anywhere;
}
.callout{
  border:1px solid var(--line-accent);background:rgba(255,105,0,.05);
  border-radius:var(--radius-md);padding:var(--space-md);margin:var(--space-lg) 0;max-width:66ch;
}
.callout p{margin:0;color:var(--color-muted);font-size:var(--text-sm)}
.callout .ct{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-accent);margin-bottom:var(--space-2xs);display:block;
}
.sources{
  margin-top:var(--space-2xl);padding-top:var(--space-lg);border-top:1px solid var(--line-hair);
}
.sources ul{display:grid;gap:var(--space-2xs);max-width:none}
.sources li{display:block;font-family:var(--font-mono);font-size:var(--text-sm)}
.sources li::before{content:none}
.sources a{color:var(--color-muted);text-decoration:none;border-bottom:1px solid var(--line-hair-2);overflow-wrap:anywhere}
.sources a:hover{color:var(--color-accent-soft);border-color:var(--color-accent)}
.doc-next{
  margin-top:var(--space-2xl);padding-top:var(--space-lg);border-top:1px solid var(--line-hair);
  display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center;
}

/* protocol index cards */
.plist{display:grid;gap:var(--space-md);margin-top:var(--space-xl)}
.pcard{
  display:block;text-decoration:none;border:1px solid var(--line-hair);border-radius:var(--radius-lg);
  padding:var(--space-lg);background:var(--surface-1);
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.pcard:hover{border-color:var(--line-accent);background:rgba(255,105,0,.045)}
.pcard-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs);margin-bottom:var(--space-2xs)}
.pcard h2{font-size:var(--text-lg);line-height:1.25;margin:0}
.pcard p{margin:var(--space-2xs) 0 0;color:var(--color-muted);font-size:var(--text-sm);line-height:1.6;max-width:64ch}

@media (max-width:900px){
  .spec-row{grid-template-columns:minmax(0,1fr)}
  .spec-row > *{border-right:0!important;padding-block:var(--space-2xs)}
  .spec-row .lbl{padding-top:var(--space-sm);border-bottom:0}
  .spec-row .val{padding-left:var(--space-md)}
  .spec-row .val::before{content:attr(data-tier) "\00a0\00a0·\00a0\00a0";color:var(--color-muted-2);font-size:var(--text-xs)}
  .spec-row.headrow{display:none}
  .style-cols{grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}
}

/* ============ RANGE STRIP — proof the form isn't only objects ============ */
.range{margin-top:var(--space-3xl);padding-top:var(--space-xl);border-top:1px solid var(--line-hair-2)}
.range-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg);margin-top:var(--space-lg)}
.range-item{position:relative;text-align:center}
.range-stage{position:relative;display:grid;place-items:end center;height:320px}
.range-stage::before{
  content:"";position:absolute;inset:auto 0 8% 0;height:74%;
  background:radial-gradient(ellipse 56% 54% at 50% 82%, rgba(255,164,99,.16) 0%, rgba(255,105,0,0) 70%);
}
.range-stage::after{
  content:"";position:absolute;left:50%;translate:-50% 0;bottom:7%;width:56%;height:22px;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,164,99,.30) 0%, rgba(255,105,0,0) 70%);filter:blur(4px);
}
.range-stage img{position:relative;max-height:300px;width:auto;filter:drop-shadow(0 18px 18px rgba(0,0,0,.55))}
.range-item h4{font-size:var(--text-base);font-weight:700;letter-spacing:-.015em;margin-top:var(--space-sm);line-height:1.3}
.range-item p{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted-2);line-height:1.6;margin-top:var(--space-3xs)}
@media (max-width:760px){
  .range-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-md)}
  .range-stage{height:280px}
}

/* ============ EXAMPLES ============ */
.more-link-row{margin-top:var(--space-lg);padding-top:var(--space-md);border-top:1px solid var(--line-hair)}

/* hover-to-animate: the still is the poster, the loop plays over it */
.spec-stage,.range-stage,.ex-stage{position:relative}
.has-loop{cursor:pointer}
.loop-layer{
  position:absolute;left:50%;bottom:0;translate:-50% 0;height:100%;width:auto;
  opacity:0;transition:opacity .22s var(--ease);pointer-events:none;
}
.has-loop.playing .loop-layer{opacity:1}
.has-loop.playing > img{opacity:0;transition:opacity .22s var(--ease)}
.loop-badge{
  position:absolute;top:6px;right:6px;z-index:2;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-accent);border:1px solid var(--line-accent);border-radius:var(--radius-pill);
  padding:3px 7px;line-height:1;background:rgba(18,8,6,.7);
  opacity:.75;transition:opacity .2s var(--ease);
}
.has-loop:hover .loop-badge{opacity:0}

/* examples gallery */
.ex-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-md);margin-top:var(--space-xl)}
.ex-card{
  border:1px solid var(--line-hair);border-radius:var(--radius-lg);background:var(--surface-1);
  padding:var(--space-sm) var(--space-sm) var(--space-md);
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.ex-card:hover{border-color:var(--line-hair-2);background:var(--surface-2)}
.ex-stage{display:grid;place-items:end center;height:220px;margin-bottom:var(--space-sm)}
.ex-stage::before{
  content:"";position:absolute;inset:auto 0 8% 0;height:74%;
  background:radial-gradient(ellipse 56% 54% at 50% 82%, rgba(249,233,218,.11) 0%, rgba(249,233,218,0) 70%);
}
.ex-stage::after{
  content:"";position:absolute;left:50%;translate:-50% 0;bottom:7%;width:58%;height:18px;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,164,99,.28) 0%, rgba(255,105,0,0) 70%);filter:blur(4px);
}
.ex-stage img{position:relative;max-height:206px;width:auto;filter:drop-shadow(0 14px 14px rgba(0,0,0,.5))}
.ex-card h3{font-size:var(--text-base);line-height:1.25}
.ex-card p{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted-2);line-height:1.6;margin-top:2px}
@media (max-width:1080px){ .ex-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){ .ex-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .ex-stage{height:180px} .ex-stage img{max-height:168px} }
@media (max-width:420px){ .ex-grid{grid-template-columns:minmax(0,1fr)} }
@media (prefers-reduced-motion:reduce){ .has-loop.playing .loop-layer{opacity:0} .has-loop.playing > img{opacity:1} }