/* Hylē v4 · base: reset, type classes, layout primitives, ambient field. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body);
  color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}
::selection { background: var(--selection); }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: var(--z-review); display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--r-sm); background: var(--ink); color: #fff; font-size: var(--fs-ui); transition: top var(--d-2) var(--ease-out); }
.skip-link:focus { top: 12px; }

/* ---------- Type classes (the only way to size text) ---------- */
.t-hero    { font-family: var(--font-brand); font-weight: 500; font-size: var(--fs-hero); line-height: var(--lh-hero); letter-spacing: var(--ls-hero); text-wrap: balance; }
.t-display { font-family: var(--font-brand); font-weight: 500; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-wrap: balance; }
.t-title   { font-family: var(--font-brand); font-weight: 500; font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: var(--ls-title); text-wrap: balance; }
.t-heading { font-family: var(--font-sans); font-weight: var(--fw-heading); font-size: var(--fs-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); text-wrap: balance; }
.t-lead    { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: var(--ls-lead); text-wrap: pretty; }
.t-body    { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); text-wrap: pretty; }
.t-ui      { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-ui); line-height: var(--lh-ui); letter-spacing: var(--ls-ui); }
.t-row     { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-row); line-height: var(--lh-row); letter-spacing: var(--ls-row); color: var(--ink); }
/* Descriptions, hints, sublabels, captions: anything a user must read. ink-2, never 13px, never ink-3. */
.t-desc    { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-desc); line-height: var(--lh-desc); letter-spacing: var(--ls-desc); color: var(--ink-2); text-wrap: pretty; }
/* Metadata only: timestamps, counts, legends, footers. Readable sentences use .t-desc. */
.t-small   { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: var(--ls-small); }
.t-mono    { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-mono); line-height: var(--lh-mono); letter-spacing: var(--ls-mono); font-variant-numeric: tabular-nums; }
.t-eyebrow { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.t-brand   { font-family: var(--font-brand); font-weight: 500; letter-spacing: -.03em; }
/* Numbers that carry a decision (prices, stats, counts): Inter, never Goodly. Size from the title or heading step. */
.t-stat    { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-title); line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.t-stat.is-heading { font-size: var(--fs-heading); letter-spacing: -.015em; }
/* Goodly ships one cut (500). It is never synthesised bolder, lighter or oblique. */
.t-hero, .t-display, .t-title, .t-brand, .wordmark { font-synthesis: none; font-style: normal; }
.w-400 { font-weight: 400; } .w-500 { font-weight: 500; } .w-600 { font-weight: 600; }
.ink-2 { color: var(--ink-2); } .ink-3 { color: var(--ink-3); } .accent-ink { color: var(--accent-ink); }
.num { font-variant-numeric: tabular-nums; }
.measure { max-width: 62ch; }
::placeholder { color: var(--ink-3); opacity: 1; }
/* Inline code is an identifier: Geist Mono at the mono step (never the UA "monospace" fallback). */
code, kbd, samp { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0; }

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: calc(var(--page-max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); } .gap-6 { gap: var(--s-6); }
.grow { flex: 1 1 auto; min-width: 0; }
.wordmark { font-family: var(--font-brand); font-weight: 500; font-size: var(--fs-wordmark); line-height: 1; letter-spacing: -.035em; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; }

/* ---------- Ambient brand field (deployed blue→orange; CSS fallback + optional WebGPU) ---------- */
.field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: var(--brand-night); }
.field .fb { position: absolute; inset: -10%; background: var(--brand-gradient); opacity: .9; filter: blur(24px); transition: opacity 1s ease; }
.field .fb::before { content: ""; position: absolute; inset: -15%; background: radial-gradient(ellipse 65% 70% at 20% 80%, rgba(18,117,216,.95) 0%, rgba(0,102,255,.6) 45%, transparent 75%); animation: fieldA 20s ease-in-out infinite alternate; }
.field .fb::after { content: ""; position: absolute; inset: -15%; background: radial-gradient(ellipse 60% 65% at 85% 20%, rgba(225,145,54,.9) 0%, rgba(209,209,209,.38) 40%, transparent 75%); animation: fieldB 24s ease-in-out infinite alternate; }
.field .shader-mount { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.field.live .shader-mount { opacity: 1; }
.field.live .fb { opacity: 0; }
.field .grain { position: absolute; inset: 0; opacity: .09; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Veil: keeps white type AA where it sits (nav strip, centre column, lower-left); the orange stays vivid at the edges. */
.field .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,18,40,.44) 0, rgba(8,18,40,.14) 112px, rgba(8,18,40,0) 220px), radial-gradient(ellipse 50% 44% at 50% 40%, rgba(8,18,40,.3) 0%, rgba(8,18,40,.14) 55%, rgba(8,18,40,0) 100%), linear-gradient(180deg, rgba(8,18,40,.14) 0%, rgba(8,18,40,.04) 45%, rgba(8,18,40,.16) 100%); }
@keyframes fieldA { 0% { transform: translate3d(-3%, 2%, 0) scale(1.02); } 100% { transform: translate3d(4%, -3%, 0) scale(1.1); } }
@keyframes fieldB { 0% { transform: translate3d(3%, -2%, 0) scale(1.05); } 100% { transform: translate3d(-4%, 3%, 0) scale(1.12); } }

/* ---------- Reveal contract: content is visible unless motion is allowed AND motion.js is running ---------- */
html.motion-ok [data-reveal], html.motion-ok [data-split] { visibility: hidden; }
html.motion-ok.motion-ready [data-reveal], html.motion-ok.motion-ready [data-split] { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .field .fb::before, .field .fb::after { animation: none !important; }
}

/* Shared binding disclaimer and preview vocabulary. */
.v31-site-footer { margin-top: var(--s-8); padding: var(--s-5) 0; border-top: 1px solid var(--hairline-strong); }
.v31-site-disclaimer, .v31-preview-label { color: var(--ink-2); font-family: var(--font-sans); font-size: var(--fs-desc); line-height: var(--lh-desc); overflow-wrap: anywhere; }
.v31-site-disclaimer { position: relative; z-index: 1; background: var(--paper); border-radius: var(--r-md); flex: 1 1 100%; max-width: 78ch; padding: var(--s-4); }
.v31-preview-label { position: relative; z-index: 1; padding: var(--s-3) var(--s-4); background: var(--paper); border-bottom: 1px solid var(--hairline); }
.focus-foot { flex-wrap: wrap; }
.v31-plan-step .nr-head { min-height: 0; padding-top: var(--s-4); padding-bottom: var(--s-4); }
.v31-plan-step .nr-head .t-title { font-size: var(--fs-heading); line-height: var(--lh-heading); }
@media (max-width: 640px) { .v31-site-footer { margin-bottom: var(--safe-bottom, 0px); } }