/* Neuralang — tokens and shared components.
   Look assembled from four Refero references (see design/README.md): Apple Watch Ultra 4 (carbon canvas,
   black exhibition bays, 28px tiles, no shadows), WHOOP (carved display type with tight tracking, pill buttons,
   black/white band alternation, one violet), Cassette (mono UI chrome, outlined badges, bordered lattice grid),
   Alveos One (spotlit product pool, wide-tracked micro labels). One committed theme: dark with late white bands. */
/* Colour and style: Cassette (warm ink-black canvas, bone text, one hi-vis yellow, mono chrome, 900px pills, flat, grain).
   Design: Apple Watch Ultra 4 (product staged on pure black, centered display statement, 28px cinematic tiles,
   close-look module, accordion pill rows, one pale tile late in the page). */
:root {
  --canvas: #19181a; --stage: #000000; --control: #2a292b; --control-2: #353436; --hair: #272727; --hair-2: #3b3a3c;
  --bone: #f5f4f0; --sand: #d9d7ce; --steel: #8b8986; --vis: #f0e226; --vis-ink: #f0e226;
  --white: #ffffff; --graphite: #1d1d1f; --fog: #6e6e73; --mist: #e2e2e6;
  --bg: var(--canvas); --fg: var(--bone); --fg-2: var(--sand); --fg-3: var(--steel); --line: var(--hair); --tile: var(--stage);
  --display: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r-tile: 28px; --r-pill: 900px; --ease: cubic-bezier(.2, .7, .2, 1); --section: 120px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;
}
.band-light { --bg: var(--white); --fg: var(--graphite); --fg-2: #3a3a3f; --fg-3: var(--fog); --line: var(--mist); --tile: var(--white); color-scheme: light; }
.band-black { --bg: var(--stage); --tile: #0a0a0b; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; } }
body { margin: 0; background: var(--canvas); color: var(--bone); font: 400 17px/1.47 var(--display); letter-spacing: -.005em; -webkit-font-smoothing: antialiased; }
a { color: var(--vis); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .18em; }
:focus-visible { outline: 2px solid var(--vis); outline-offset: 3px; border-radius: 4px; }
img, svg { max-width: 100%; }
code, kbd, pre { font-family: var(--mono); }
h1, h2, h3 { margin: 0; font-family: var(--display); text-wrap: balance; }
p { margin: 0; }
button { font: inherit; color: inherit; }

.wrap { max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
.band { background: var(--bg); color: var(--fg); padding-block: var(--section); }
.band + .band { border-top: 1px solid var(--line); }
.band-light + .band, .band + .band-light { border-top: 0; }

/* Type */
.display { font-size: clamp(46px, 8vw, 108px); line-height: .92; letter-spacing: -.045em; font-weight: 600; }
.h-lg { font-size: clamp(34px, 4.4vw, 56px); line-height: 1; letter-spacing: -.035em; font-weight: 600; }
.h-md { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.12; letter-spacing: -.025em; font-weight: 600; }
.lede { font-size: 19px; line-height: 1.42; letter-spacing: -.012em; color: var(--fg-2); max-width: 32em; }
.body-lg { font-size: 20px; line-height: 1.35; letter-spacing: -.015em; }
.small { font-size: 14px; line-height: 1.5; color: var(--fg-3); }
.label { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--fg-3); }
.micro { font: 500 10px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .44em; color: var(--fg-3); }

/* Badge (Cassette section stamp) */
.badge { display: inline-grid; gap: 3px; border: 1px solid var(--vis); color: var(--vis); border-radius: 900px; padding: 9px 15px; font: 500 11px/1.1 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.badge span:last-child { color: var(--fg-3); }
.band-light .badge { color: var(--vis); }
.section-head { display: grid; gap: 22px; justify-items: start; max-width: 820px; margin-bottom: 56px; }

/* Pills (Cassette 900px pills in mono; Apple compact sizing) */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-pill); padding: 13px 22px; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; border: 1px solid transparent; cursor: pointer; white-space: nowrap; position: relative; transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease); }
.pill:hover { text-decoration: none; transform: translateY(-1px); }
.pill.vis { background: var(--vis); color: #000; border-color: var(--vis); overflow: hidden; }
.pill.vis::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .28; mix-blend-mode: multiply; pointer-events: none; }
.pill.outline { background: transparent; color: var(--vis); border-color: var(--vis); }
.pill.outline:hover { background: rgba(240, 226, 38, .08); }
.pill.ghost { background: transparent; color: var(--fg); border-color: var(--hair-2); }
.band-light .pill.vis { background: var(--graphite); color: var(--white); border-color: var(--graphite); }
.band-light .pill.vis::after { display: none; }
.band-light .pill.outline { color: var(--graphite); border-color: var(--graphite); }
.pill.sm { padding: 9px 16px; font-size: 11px; }

/* Nav (Apple local product bar, Cassette colours) */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(25, 24, 26, .88); backdrop-filter: saturate(1.2) blur(12px); border-bottom: 1px solid var(--hair); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 56px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--bone); font: 600 17px/1 var(--display); letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand svg { width: 22px; height: 22px; }
.nav-links { display: flex; gap: 24px; margin-left: 8px; }
.nav-links a { color: var(--steel); font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--bone); text-decoration: none; }
.nav .spacer { flex: 1; }
.nav .ver { font: 500 11px/1 var(--mono); color: var(--steel); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.nav-toggle { display: none; }
@media (max-width: 860px) {
  .nav .wrap { gap: 14px; }
  .nav-links { display: none; }
  .nav.open .nav-links { display: flex; position: absolute; left: 0; right: 0; top: 56px; flex-direction: column; gap: 0; background: var(--canvas); border-bottom: 1px solid var(--hair); padding: 8px 24px 16px; }
  .nav.open .nav-links a { padding: 14px 0; border-top: 1px solid var(--hair); }
  .nav-toggle { display: inline-flex; background: none; border: 1px solid var(--hair-2); color: var(--bone); border-radius: var(--r-pill); padding: 9px 14px; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }
  .nav .ver { display: none; }
}

/* Install line */
.install { display: flex; align-items: center; gap: 10px; max-width: 100%; border: 1px solid var(--hair-2); border-radius: var(--r-pill); background: rgba(255, 255, 255, .03); padding: 10px 10px 10px 18px; font: 400 13px/1.4 var(--mono); color: var(--bone); }
.install code { flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.install code::before { content: "$ "; color: var(--steel); }
.install button { flex: none; background: none; border: 1px solid var(--hair-2); border-radius: var(--r-pill); padding: 7px 12px; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; cursor: pointer; color: var(--steel); }
.install button:hover { color: var(--bone); border-color: var(--bone); }
.band-light .install { background: var(--white); border-color: var(--mist); color: var(--graphite); }
.band-light .install button { color: var(--fog); border-color: var(--mist); }
.band-light .install button:hover { color: var(--graphite); border-color: var(--graphite); }
@media (max-width: 560px) { .install code { white-space: normal; word-break: break-all; } .install { border-radius: 22px; } }

/* Tiles */
.tile { background: var(--tile); border: 1px solid var(--line); border-radius: var(--r-tile); overflow: hidden; }
.tile-rows > div { display: grid; grid-template-columns: 1fr; gap: 10px 32px; padding: 28px 32px; border-top: 1px solid var(--line); }
.tile-rows > div:first-child { border-top: 0; }
.tile-rows h3 { font: 500 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--fg-3); padding-top: 4px; }
.tile-rows p { font-size: 19px; line-height: 1.4; letter-spacing: -.012em; color: var(--fg); max-width: 36em; }
@media (min-width: 760px) { .tile-rows > div { grid-template-columns: 220px 1fr; } }
@media (max-width: 560px) { .tile-rows > div { padding: 22px 20px; } }

/* Grain (Cassette) */
.grain { position: relative; }
.grain::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .32; mix-blend-mode: multiply; pointer-events: none; border-radius: inherit; }

/* Code */
pre.code { margin: 0; background: var(--stage); color: var(--bone); border: 1px solid var(--hair-2); border-radius: 20px; padding: 22px 24px; font-size: 13.5px; line-height: 1.6; overflow-x: auto; tab-size: 2; }
pre.code .kw { color: var(--vis); }
pre.code .str { color: var(--bone); }
pre.code .cm { color: var(--steel); }
pre.code .id { color: var(--sand); }
pre.code .pr { color: var(--steel); }
pre.code .ok { color: var(--vis); }
.code-cap { display: flex; justify-content: space-between; gap: 12px; font: 500 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--fg-3); padding: 0 6px 10px; }
.inline { font-family: var(--mono); font-size: .9em; background: rgba(127, 127, 140, .14); border: 1px solid var(--line); border-radius: 6px; padding: .08em .4em; }

/* Lattice (Cassette logo grid) */
.lattice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.lattice > div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 22px 26px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.lattice .g { width: 40px; height: 40px; border: 1px solid var(--hair-2); border-radius: 12px; display: grid; place-items: center; color: var(--fg); }
.lattice .g svg { width: 24px; height: 24px; }
.lattice .n { font: 500 13px/1.3 var(--mono); color: var(--fg); }
.lattice .t { font: 500 13px/1.3 var(--mono); color: var(--vis); }
.lattice .d { font-size: 14px; line-height: 1.45; color: var(--fg-3); }
@media (min-width: 1000px) { .lattice { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.glyph-icon { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Metrics (Apple display-metric) */
.metrics { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
.metrics > div { display: grid; gap: 10px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.metrics .v { font: 600 clamp(48px, 6vw, 72px)/1 var(--display); letter-spacing: -.04em; color: var(--fg); font-variant-numeric: tabular-nums; }
.metrics .k { font-size: 16px; line-height: 1.45; color: var(--fg-2); max-width: 30em; }
@media (min-width: 760px) { .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .metrics > div { border-bottom: 0; } }

/* FAQ (Apple accordion pill rows) */
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { background: var(--control); border-radius: 36px; border: 1px solid var(--hair); overflow: hidden; transition: border-radius .3s var(--ease); }
.faq details[open] { border-radius: 24px; }
.faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 16px; padding: 18px 22px; font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: rgba(255, 255, 255, .85); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--vis); color: var(--vis); display: grid; place-items: center; font: 400 15px/1 var(--mono); color: var(--bone); }
.faq details[open] summary::before { content: "–"; }
.faq .a { padding: 0 22px 22px 64px; color: var(--sand); font-size: 16px; line-height: 1.5; max-width: 60ch; }
@media (max-width: 560px) { .faq .a { padding-left: 22px; } }

/* Footer */
.footer { background: var(--stage); color: var(--steel); padding-block: 48px 64px; font-size: 13px; border-top: 1px solid var(--hair); }
.footer .wrap { display: grid; gap: 24px; }
.footer .cols { display: flex; flex-wrap: wrap; gap: 12px 28px; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.footer a { color: var(--bone); }
.footer .fine { max-width: 76ch; line-height: 1.5; }

/* Doc pages */
.doc { padding-block: 64px var(--section); }
.doc-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.toc { display: none; }
@media (min-width: 980px) {
  .doc-grid { grid-template-columns: 220px minmax(0, 1fr); gap: 72px; }
  .toc { display: block; position: sticky; top: 88px; align-self: start; }
}
.toc .label { margin-bottom: 14px; }
.toc a { display: block; padding: 7px 0; color: var(--steel); font: 500 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.toc a:hover { color: var(--bone); text-decoration: none; }
.doc-body { max-width: 72ch; }
.doc-body h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1; letter-spacing: -.04em; font-weight: 600; margin: 18px 0 20px; }
.doc-body h2 { font-size: 28px; line-height: 1.14; letter-spacing: -.025em; font-weight: 600; margin: 64px 0 16px; padding-top: 28px; border-top: 1px solid var(--hair); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.doc-body h3 { font-size: 18px; font-weight: 600; letter-spacing: -.015em; margin: 28px 0 8px; }
.doc-body p { margin: 0 0 14px; color: var(--sand); }
.doc-body p.lede { margin-bottom: 28px; }
.doc-body pre.code { margin: 14px 0 22px; }
.doc-body ul, .doc-body ol { margin: 0 0 14px; padding-left: 22px; color: var(--sand); }
.doc-body li { margin: 6px 0; }
.doc-body li::marker { color: var(--steel); }
.doc-body em { color: var(--bone); }
.doc-body table { border-collapse: collapse; width: 100%; font-size: 14.5px; margin: 10px 0 22px; color: var(--sand); }
.doc-body th, .doc-body td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.doc-body th { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--steel); }
.doc-body td code { font-size: 13px; color: var(--bone); }
.note { border-left: 2px solid var(--vis); padding: 4px 0 4px 18px; color: var(--sand); font-size: 15px; margin: 20px 0; }
.status { font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; padding: 7px 11px; border-radius: 900px; border: 1px solid var(--hair-2); color: var(--steel); white-space: nowrap; }
.status.on { color: var(--vis); border-color: var(--vis); }
.status.soon { color: var(--sand); border-color: var(--sand); }

@media (max-width: 760px) { :root { --section: 80px; } body { font-size: 16px; } .lede { font-size: 17px; } .section-head { margin-bottom: 40px; } }