/* vitls public website — the one stylesheet (CSP-locked: no external requests, system fonts).
   Midnight design system. Dark is the default; calm-light via prefers-color-scheme. */

:root {
  /* Midnight — Dark (default) */
  --bg: oklch(0.185 0.012 255);
  --surface: oklch(0.225 0.014 255);
  --inset: oklch(0.285 0.016 255);
  --ink: oklch(0.93 0.008 255);
  --muted: oklch(0.66 0.012 255);
  --line: oklch(0.31 0.012 255);
  --accent: oklch(0.75 0.085 248);
  --accent-mid: oklch(0.5 0.04 251);
  --accent-text: oklch(0.81 0.08 250);
  --on-accent: oklch(0.20 0.03 250);
  --good: oklch(0.72 0.06 150);
  --accent-halo: oklch(0.75 0.085 248 / 0.20);
  --meter-fill: oklch(0.62 0.012 255);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  --num: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  --step-hero: clamp(2.6rem, 1.4rem + 5.4vw, 5rem);
  --step-h2: clamp(1.5rem, 1.15rem + 1.6vw, 2.1rem);
  --step-lead: clamp(1.075rem, 1rem + 0.5vw, 1.3rem);

  --edge: clamp(20px, 5vw, 64px);
  --maxw: 1160px;
  --measure: 68ch;
}

@media (prefers-color-scheme: light) {
  :root {
    /* Midnight — Light (calm variant) */
    --bg: oklch(0.965 0.007 255);
    --surface: oklch(0.995 0.004 255);
    --inset: oklch(0.915 0.010 255);
    --ink: oklch(0.255 0.012 255);
    --muted: oklch(0.50 0.014 255);
    --line: oklch(0.88 0.010 255);
    --accent: oklch(0.60 0.115 250);
    --accent-mid: oklch(0.55 0.09 251);
    --accent-text: oklch(0.50 0.11 252);
    --on-accent: oklch(0.98 0.01 250);
    --good: oklch(0.52 0.07 150);
    --accent-halo: oklch(0.60 0.115 250 / 0.16);
    --meter-fill: oklch(0.58 0.012 255);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--edge); }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--surface); color: var(--ink); padding: 10px 16px; border: 1px solid var(--line);
  border-radius: 8px;
}
.skip-link:focus { left: var(--edge); top: 10px; }

/* ---------- The gauge mark (fading arc) ---------- */
/* Theme-aware gradient: the stops recolor via CSS custom properties. */
.gstop-track { stop-color: var(--inset); }
.gstop-mid { stop-color: var(--accent-mid); }
.gstop-accent { stop-color: var(--accent); }
.mark { display: block; }
.mark .ring-track { stroke: var(--inset); stroke-width: 9; stroke-linecap: round; }
.mark .ring-fill { stroke-width: 9; stroke-linecap: round; }
.mark .ring-tip { fill: var(--accent); }

/* ---------- Header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.site-head[data-scrolled="true"] { border-bottom-color: var(--line); }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); }
.brand .mark { width: 26px; height: 26px; }
.brand .word { font-size: 1.16rem; font-weight: 640; letter-spacing: -0.015em; }
nav.primary { display: flex; align-items: center; gap: clamp(var(--s-4), 2.5vw, var(--s-6)); }
nav.primary a {
  color: var(--muted); font-size: 0.95rem; font-weight: 500;
  padding: 6px 2px; position: relative; transition: color .18s ease;
}
nav.primary a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .22s cubic-bezier(.2,.7,.2,1);
}
nav.primary a:hover { color: var(--ink); }
nav.primary a:hover::after { transform: scaleX(1); }
nav.primary a[aria-current="page"] { color: var(--ink); }
nav.primary a[aria-current="page"]::after { transform: scaleX(1); background: var(--line); }

main { flex: 1 0 auto; }

/* ---------- Hero (asymmetric) ---------- */
.hero { padding-top: clamp(var(--s-5), 4.5vh, var(--s-7)); padding-bottom: var(--s-8); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center; gap: clamp(var(--s-6), 6vw, var(--s-9));
}
.status {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--accent-text); text-transform: uppercase;
  padding: 6px 12px 6px 10px; border-radius: 999px;
  background: var(--accent-halo);
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
}
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
h1.title { margin-top: var(--s-5); font-size: var(--step-hero); line-height: 1.02; letter-spacing: -0.03em; font-weight: 660; max-width: 15ch; }
h1.title .soft { color: var(--muted); font-weight: 560; }
.lead { margin-top: var(--s-5); font-size: var(--step-lead); color: var(--muted); max-width: 46ch; }
.lead strong { color: var(--ink); font-weight: 600; }
.hero-cta { margin-top: var(--s-6); display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.soon { display: inline-flex; align-items: baseline; gap: 10px; font-size: 0.95rem; color: var(--muted); }
.soon .k { font-family: var(--num); font-size: 0.82rem; letter-spacing: 0.04em; color: var(--accent-text); font-weight: 600; }
.hero-note { font-size: 0.9rem; color: var(--muted); }
.hero-note a { color: var(--accent-text); border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); padding-bottom: 1px; }
.hero-note a:hover { color: var(--ink); }

/* ---------- Hero gauge (fading arc) ---------- */
.gauge-stage { display: grid; place-items: center; }
.gauge { width: min(420px, 78vw); height: auto; display: block; filter: drop-shadow(0 1px 40px var(--accent-halo)); }
.g-track { fill: none; stroke: var(--inset); stroke-width: 7; stroke-linecap: round; }
.g-fill { fill: none; stroke-width: 7; stroke-linecap: round; }
.g-tick { stroke: var(--line); stroke-width: 2; stroke-linecap: round; }
.g-tip { fill: var(--accent); }
.g-tip-halo { fill: var(--accent-halo); }
.g-read { font-family: var(--num); fill: var(--ink); font-size: 30px; font-weight: 600; letter-spacing: -0.5px; }
.g-read .unit { fill: var(--muted); font-size: 13px; }
.g-label { font-family: var(--font); fill: var(--muted); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---------- Readout ---------- */
.readout { margin-top: var(--s-8); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); }
.readout .cell { padding: var(--s-5) var(--s-4); }
.readout .cell + .cell { border-left: 1px solid var(--line); }
.readout .rv { font-family: var(--num); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.readout .rv .u { color: var(--muted); font-size: 0.9rem; margin-left: 2px; }
.readout .rl { margin-top: 6px; font-size: 0.82rem; color: var(--muted); }
.readout .rv.pos { color: var(--good); }

/* ---------- Ethos ---------- */
.ethos { padding-block: clamp(var(--s-8), 12vh, var(--s-9)); }
.ethos h2 { font-size: var(--step-h2); letter-spacing: -0.02em; font-weight: 640; max-width: 20ch; }
.ethos .sub { margin-top: var(--s-4); color: var(--muted); max-width: 60ch; font-size: var(--step-lead); }
.lines { margin-top: var(--s-7); display: grid; gap: var(--s-6); grid-template-columns: repeat(3, 1fr); }
.line .n { font-family: var(--num); font-size: 0.8rem; color: var(--accent-text); letter-spacing: 0.08em; }
.line h3 { margin-top: var(--s-3); font-size: 1.14rem; font-weight: 620; letter-spacing: -0.01em; }
.line p { margin-top: var(--s-2); color: var(--muted); font-size: 0.98rem; max-width: 34ch; }

/* ---------- Privacy strip ---------- */
.privacy { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: var(--s-8); }
.privacy .row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.privacy h2 { font-size: var(--step-h2); letter-spacing: -0.02em; font-weight: 640; max-width: 18ch; }
.privacy > .row > div > p { margin-top: var(--s-4); color: var(--muted); font-size: var(--step-lead); max-width: 52ch; }
.privacy .aside { font-size: 0.95rem; color: var(--muted); }
.privacy .aside a { color: var(--accent-text); border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); }
.privacy .aside a:hover { color: var(--ink); }
.privacy ul { list-style: none; display: grid; gap: var(--s-3); }
.privacy .aside .more { margin-top: var(--s-5); }
.privacy li { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--ink); font-size: 0.98rem; }
.privacy li svg { flex: none; margin-top: 3px; }
.tick { stroke: var(--good); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; fill: none; }

/* ---------- Footer ---------- */
.site-foot { padding-block: var(--s-8); color: var(--muted); }
.foot-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-6); flex-wrap: wrap; }
.foot-brand { display: inline-flex; align-items: center; gap: var(--s-3); }
.foot-brand .mark { width: 22px; height: 22px; }
.foot-brand .word { font-weight: 620; color: var(--ink); }
.foot-links { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.foot-links a { color: var(--muted); font-size: 0.92rem; }
.foot-links a:hover { color: var(--ink); }
.foot-meta { margin-top: var(--s-5); font-size: 0.85rem; display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center; }
.foot-meta .mail { color: var(--accent-text); }
.foot-meta .sep { color: var(--line); }

/* ---------- Long-form legal / content pages ---------- */
.page { padding-block: clamp(var(--s-7), 7vh, var(--s-8)) var(--s-9); }
.page-head { max-width: var(--measure); }
.page-head .eyebrow { font-family: var(--num); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); }
.page-head h1 { margin-top: var(--s-3); font-size: var(--step-h2); letter-spacing: -0.02em; font-weight: 660; }
.page-head .meta { margin-top: var(--s-3); font-size: 0.9rem; color: var(--muted); }
.draft-banner {
  margin-top: var(--s-5); max-width: var(--measure);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--line));
  background: var(--accent-halo); border-radius: 12px; padding: var(--s-4) var(--s-5);
  font-size: 0.92rem; color: var(--ink);
}
.draft-banner strong { color: var(--accent-text); }
.prose { max-width: var(--measure); margin-top: var(--s-7); }
.prose h2 { margin-top: var(--s-7); font-size: 1.35rem; font-weight: 640; letter-spacing: -0.015em; }
.prose h3 { margin-top: var(--s-5); font-size: 1.08rem; font-weight: 620; }
.prose p { margin-top: var(--s-3); color: var(--muted); }
.prose p strong, .prose li strong { color: var(--ink); font-weight: 600; }
.prose ul { margin-top: var(--s-3); padding-left: var(--s-5); display: grid; gap: var(--s-2); color: var(--muted); }
.prose a { color: var(--accent-text); border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); }
.prose a:hover { color: var(--ink); }
.prose .placeholder { color: var(--accent-text); font-family: var(--num); font-size: 0.9em; }

/* Support / FAQ */
.faq { max-width: var(--measure); margin-top: var(--s-7); display: grid; gap: var(--s-6); }
.faq .q { font-size: 1.08rem; font-weight: 620; }
.faq .a { margin-top: var(--s-2); color: var(--muted); }
.contact-card {
  max-width: var(--measure); margin-top: var(--s-7);
  border: 1px solid var(--line); border-radius: 14px; padding: var(--s-5) var(--s-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
}
.contact-card .mail { font-family: var(--num); font-size: 1.05rem; color: var(--accent-text); }

/* 404 */
.notfound { flex: 1 0 auto; display: grid; place-items: center; text-align: center; padding: var(--s-9) var(--edge); }
.notfound .code { font-family: var(--num); font-size: 0.8rem; letter-spacing: 0.2em; color: var(--accent-text); text-transform: uppercase; }
.notfound h1 { margin-top: var(--s-4); font-size: var(--step-h2); font-weight: 640; letter-spacing: -0.02em; }
.notfound p { margin-top: var(--s-3); color: var(--muted); max-width: 44ch; }
.notfound .links { margin-top: var(--s-6); display: flex; gap: var(--s-5); flex-wrap: wrap; justify-content: center; }
.notfound .links a { color: var(--accent-text); }
.notfound .links a:hover { color: var(--ink); }

/* ---------- Motion ---------- */
.reveal { opacity: 0; transform: translateY(14px); animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
.d1 { animation-delay: .05s; } .d2 { animation-delay: .13s; } .d3 { animation-delay: .21s; }
.d4 { animation-delay: .29s; } .d5 { animation-delay: .37s; }
@keyframes rise { to { opacity: 1; transform: none; } }
.g-fill { opacity: 0; animation: fadein .7s ease .35s forwards; }
.g-tip, .g-tip-halo { opacity: 0; animation: fadein .5s cubic-bezier(.2,.7,.2,1) .9s forwards; }
@keyframes fadein { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .reveal, .g-fill, .g-tip, .g-tip-halo { animation: none !important; opacity: 1 !important; transform: none !important; }
  .site-head { backdrop-filter: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .gauge-stage { order: -1; }
  .gauge { width: min(340px, 70vw); }
  .privacy .row { grid-template-columns: 1fr; gap: var(--s-6); }
  .lines { grid-template-columns: 1fr; gap: var(--s-6); }
}
@media (max-width: 640px) {
  nav.primary { gap: var(--s-4); }
  nav.primary a { font-size: 0.9rem; }
  .readout { grid-template-columns: repeat(2, 1fr); }
  .readout .cell:nth-child(3) { border-left: none; }
  .readout .cell:nth-child(3), .readout .cell:nth-child(4) { border-top: 1px solid var(--line); }
  .foot-row { flex-direction: column; align-items: flex-start; }
}

/* ---------- Print (legal pages) ---------- */
@media print {
  .site-head, .site-foot, .draft-banner { border-color: #ccc; }
  body { background: #fff; color: #111; }
  .prose p, .prose ul { color: #333; }
  nav.primary { display: none; }
}