/* ==========================================================================
   Ornool — marketing site
   One font family (Geist), light by default, dark mode that works.
   ========================================================================== */
/* DM Sans, self-hosted (variable font, weights 400-600, Latin). Downloaded from Google Fonts on 12 Oct 2026; SIL Open Font License. */
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #f7f6f2;
  --bg-2: #efede7;
  --surface: #ffffff;
  --surface-2: #fbfaf7;
  --ink: #0c0e13;
  --ink-2: #2a2e38;
  --muted: #5d6372;
  --faint: #8d92a0;
  --line: #e3e0d8;
  --line-2: #d4d0c6;
  --accent: #2b59ff;
  --accent-ink: #ffffff;
  --accent-soft: #e8edff;
  --accent-line: #b9c8ff;
  --good: #11875d;
  --good-soft: #e3f5ec;
  --warn: #b86e00;
  --warn-soft: #fdf0dc;
  --bad: #d23c3c;
  --bad-soft: #fde6e6;
  --shadow-sm: 0 1px 2px rgba(12, 14, 19, .05), 0 1px 1px rgba(12, 14, 19, .03);
  --shadow: 0 1px 2px rgba(12, 14, 19, .04), 0 8px 24px -8px rgba(12, 14, 19, .10);
  --shadow-lg: 0 2px 4px rgba(12, 14, 19, .04), 0 24px 60px -18px rgba(12, 14, 19, .22);
  --grid: rgba(12, 14, 19, .045);
  --glow: rgba(43, 89, 255, .16);
  --heading-grad: linear-gradient(90deg, #022640 0%, #2d5676 55%, #5584a8 100%);

  --radius: 14px;
  /* One spacing value for every section, site-wide: the gap between two sections is twice this. */
  --section-pad: clamp(22px, 2.6vw, 34px);
  --radius-lg: 22px;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #08090c;
  --bg-2: #0e1015;
  --surface: #12141a;
  --surface-2: #0f1116;
  --ink: #f1f0ec;
  --ink-2: #d5d6dc;
  --muted: #9a9fad;
  --faint: #6c7180;
  --line: #22252e;
  --line-2: #2e323d;
  --accent: #5b7fff;
  --accent-ink: #ffffff;
  --accent-soft: rgba(91, 127, 255, .14);
  --accent-line: rgba(91, 127, 255, .45);
  --good: #3ccf91;
  --good-soft: rgba(60, 207, 145, .12);
  --warn: #f2b34c;
  --warn-soft: rgba(242, 179, 76, .12);
  --bad: #ff6b6b;
  --bad-soft: rgba(255, 107, 107, .12);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -10px rgba(0, 0, 0, .6);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 30px 70px -20px rgba(0, 0, 0, .8);
  --grid: rgba(255, 255, 255, .035);
  --glow: rgba(91, 127, 255, .22);
  --heading-grad: linear-gradient(90deg, #f3f6fa 0%, #c3d5e8 55%, #86abcf 100%);
  color-scheme: dark;
}
/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
img,
svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
h1,
h2,
h3,
h4 { margin: 0; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.num { font-variant-numeric: tabular-nums; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 860px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
/* ---------- Type scale ---------- */
.display { font-size: clamp(2.6rem, 6.6vw, 5.4rem); font-weight: 600; letter-spacing: -0.045em; line-height: .98; }
.h1 { font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: -0.04em; line-height: 1.02; }
.h2 { font-size: clamp(1.9rem, 3.8vw, 3.1rem); letter-spacing: -0.035em; line-height: 1.04; }
.h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); letter-spacing: -0.02em; line-height: 1.2; }
.lede { font-size: clamp(1.08rem, 1.6vw, 1.3rem); color: var(--muted); line-height: 1.55; max-width: 62ch; }
.muted { color: var(--muted); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--muted);
  text-transform: none;
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .6; }
.eyebrow.accent { color: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  --b: var(--ink); --c: var(--bg);
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 22px; border-radius: 999px;
  background: var(--b); color: var(--c);
  font-size: 15.5px; font-weight: 500; letter-spacing: -0.01em;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .25s;
  overflow: hidden; isolation: isolate;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.28), transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -10px var(--glow), var(--shadow); }
.btn:hover::after { opacity: 1; }
.btn:active { transform: translateY(0) scale(.98); }
.btn .arrow { transition: transform .35s var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-accent { --b: var(--accent); --c: var(--accent-ink); }
.btn-ghost { --b: transparent; --c: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--surface); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--accent); }
.link-arrow svg { transition: transform .3s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(3px); }
/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background-color .35s, border-color .35s, backdrop-filter .35s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom-color: var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 19px; letter-spacing: -0.03em; }
.brand-mark { width: 28px; height: 28px; border-radius: 7px; }
:root[data-theme="dark"] .brand-mark { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  position: relative; display: block; padding: 8px 14px; border-radius: 999px;
  font-size: 15px; color: var(--muted); transition: color .2s, background-color .2s;
}
.nav-links a:hover { color: var(--ink); background: var(--bg-2); }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); transform: translateX(-50%);
}
.nav-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; cursor: pointer; color: var(--muted);
  transition: color .2s, background-color .2s, transform .4s var(--ease-out);
}
.icon-btn:hover { color: var(--ink); background: var(--surface); }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
.menu-btn { display: none; }
.mobile-menu {
  position: fixed; inset: 72px 0 auto 0; z-index: 49;
  background: var(--bg); border-bottom: 1px solid var(--line);
  padding: 12px var(--gutter) 24px; display: none;
  transform-origin: top; animation: drop .35s var(--ease-out);
}
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: 14px 4px; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; border-bottom: 1px solid var(--line); }
.mobile-menu .btn { margin-top: 18px; width: 100%; justify-content: center; }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 880px) {
  .nav-links,
.nav-actions .btn { display: none; }
  .menu-btn { display: inline-grid; }
}
/* ---------- Sections ---------- */
main { display: block; }
.section { padding-block: var(--section-pad); position: relative; }
.section-tight { padding-block: var(--section-pad); }
.section-head { display: grid; gap: 12px; margin-bottom: clamp(20px, 2.5vw, 32px); max-width: 780px; }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.bg-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%);
}
.bg-glow {
  position: absolute; pointer-events: none; z-index: 0; border-radius: 50%;
  width: 900px; height: 600px; left: 50%; top: -240px; transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--glow), transparent);
  filter: blur(20px);
}
.section > .wrap { position: relative; z-index: 1; }
/* ---------- Hero ---------- */
.hero { padding-top: clamp(96px, 8.5vw, 116px); padding-bottom: var(--section-pad); position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(40px, 5vw, 72px); align-items: center; }
.hero-copy { display: grid; gap: 28px; }
/* Hero heading: SF Pro Display semibold (Inter elsewhere), navy-to-steel gradient — from Images/Heading.png */
.hero .display {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  font-weight: 600; font-size: clamp(2rem, 3.9vw, 3.5rem); line-height: 1.07; letter-spacing: -0.015em;
  font-optical-sizing: auto;
}
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.hero-note { font-size: 14.5px; color: var(--muted); max-width: 30ch; line-height: 1.45; }
.pill {
  display: inline-flex; align-items: center; gap: 10px; width: fit-content;
  padding: 6px 14px 6px 6px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 13.5px; color: var(--muted); box-shadow: var(--shadow-sm);
}
.pill b { font-weight: 500; color: var(--ink); background: var(--accent-soft); color: var(--accent); padding: 2px 10px; border-radius: 999px; }
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .conflict { aspect-ratio: auto; height: 520px; }
}
/* Split headline animation */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .16em; margin-bottom: -.16em; }
.split .w > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease-out); transition-delay: calc(var(--i) * 45ms + 100ms); }
.split.in .w > span { transform: none; }
/* ---------- Conflict visual (hero) ---------- */
.conflict { position: relative; aspect-ratio: 1 / 1.14; max-width: 560px; width: 100%; margin-inline: auto; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-size: 13px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #6d83ff, #2b59ff);
}
.avatar.b { background: linear-gradient(135deg, #f0a35e, #d2643c); }
.avatar.c { background: linear-gradient(135deg, #55c79a, #11875d); }
.avatar.d { background: linear-gradient(135deg, #b48cff, #7a4fe0); }
.avatar.e { background: linear-gradient(135deg, #f37b9b, #c93a63); }
.avatar.sm { width: 26px; height: 26px; font-size: 10.5px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
}
.chip.acc { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.chip.good { background: var(--good-soft); border-color: transparent; color: var(--good); }
.chip.warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.chip.bad { background: var(--bad-soft); border-color: transparent; color: var(--bad); }

.phase-label {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  display: inline-flex; gap: 6px; padding: 5px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); font-size: 12.5px; z-index: 5;
}
.phase-label button { border: 0; background: transparent; padding: 6px 12px; border-radius: 999px; cursor: pointer; color: var(--muted); transition: background-color .3s, color .3s; }
.phase-label button.on { background: var(--ink); color: var(--bg); }
/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay: var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal-scale { opacity: 0; transform: scale(.96) translateY(20px); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--d, 0ms); }
.js .reveal-scale.in { opacity: 1; transform: none; }
/* ---------- Problem beats ---------- */
.beats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.beat { background: var(--surface); padding: clamp(28px, 3vw, 40px); display: grid; gap: 14px; align-content: start; position: relative; min-height: 300px; }
.beat-n { font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; }
.beat h3 { font-size: 1.35rem; }
.beat p { color: var(--muted); }
.beat-visual { height: 96px; margin-bottom: 8px; position: relative; }
@media (max-width: 900px) {
  .beats { grid-template-columns: 1fr; }
  .beat { min-height: 0; }
}
/* small beat visuals */
.bv-sys { display: flex; gap: 10px; align-items: center; height: 100%; }
.bv-box { flex: 1; height: 54px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); display: grid; place-items: center; font-size: 12px; color: var(--muted); position: relative; }
.bv-box b { font-weight: 600; color: var(--ink); }
.bv-vs { font-size: 12px; color: var(--bad); font-weight: 600; }
.in .bv-vs { animation: shake 2.6s 1s infinite; }
@keyframes shake { 0%, 90%, 100% { transform: none; } 92% { transform: translateX(-2px); } 94% { transform: translateX(2px); } 96% { transform: translateX(-2px); } }
.bv-sheet { display: grid; grid-template-columns: 1.2fr 1fr 1fr .75fr .8fr .75fr; gap: 3px; height: 100%; align-content: center; }
.bv-sheet i { height: 17px; border-radius: 3px; background: var(--bg-2); font-style: normal; font-size: 9.5px; line-height: 17px; padding: 0 5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.bv-sheet i.hd { background: transparent; color: var(--faint); font-weight: 600; letter-spacing: .3px; padding-left: 5px; }
.bv-sheet i.h { color: var(--warn); font-weight: 600; }
.bv-sheet i.x { color: var(--bad); font-weight: 600; text-align: center; }
.bv-sheet i.ok { color: var(--good); font-weight: 600; text-align: center; }
.bv-sheet i.h { background: var(--warn-soft); outline: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.in .bv-sheet i { animation: cellPulse 3s infinite; animation-delay: calc(var(--k) * 90ms); }
@keyframes cellPulse { 0%, 70%, 100% { opacity: 1; } 80% { opacity: .35; } }
.bv-late { position: relative; display: flex; align-items: stretch; gap: 6px; height: 100%; padding-top: 4px; }
.bv-late .bl { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; min-width: 0; }
.bv-late em { font-style: normal; font-size: 9.5px; font-weight: 600; color: var(--muted); text-align: center; line-height: 1; margin-bottom: 3px; opacity: 0; transition: opacity .5s; transition-delay: calc(var(--k) * 120ms + 900ms); }
.bv-late i { display: block; border-radius: 4px 4px 0 0; background: var(--bg-2); height: var(--h); max-height: calc(100% - 26px); transform-origin: bottom; transform: scaleY(0); transition: transform 1s var(--ease-out); transition-delay: calc(var(--k) * 120ms + 300ms); }
.bv-late small { font-size: 9.5px; color: var(--faint); text-align: center; margin-top: 3px; line-height: 1; }
.bv-late .bl.x em { color: var(--bad); font-size: 10.5px; }
.bv-late .bl.x i { background: var(--bad-soft); outline: 1px solid color-mix(in srgb, var(--bad) 40%, transparent); }
.bv-late .bl.x small { color: var(--bad); font-weight: 600; }
.in .bv-late i { transform: none; }
.in .bv-late em { opacity: 1; }
.in .bv-late .bl.x i { animation: lateHit .7s 1.4s var(--ease-out) 1 both; }
@keyframes lateHit { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 45%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.bl-tag { position: absolute; right: calc(100% / 6 + 6px); top: 2px; font-size: 9.5px; font-weight: 600; color: var(--bad); background: var(--bad-soft); padding: 2px 7px; border-radius: 99px; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .5s 2s, transform .5s 2s; }
.in .bl-tag { opacity: 1; transform: none; }
/* ---------- Thread diagram ---------- */

/* ---------- Feature cards ---------- */
.cards-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 860px) {
  .cards-4 { grid-template-columns: 1fr; }
}
.card {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px); display: grid; gap: 14px; align-content: start; overflow: hidden;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s;
}
.card::before,
.glow-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 0;
  background: radial-gradient(420px circle at var(--mx, -100px) var(--my, -100px), var(--accent-soft), transparent 45%);
  opacity: 0; transition: opacity .4s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-2); }
.card:hover::before,
.glow-card:hover::before { opacity: 1; }
.card > *,
.glow-card > * { position: relative; z-index: 1; }
/* Cards that join the shared glow need a positioning box and clipped corners. */
.glow-card { position: relative; overflow: hidden; isolation: isolate; }
.card h3 { font-size: 1.4rem; }
.card p { color: var(--muted); }
.card-ui { height: 214px; margin: -4px -4px 10px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); padding: 16px; overflow: hidden; position: relative; }
.card-tag { font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
/* mini UIs inside cards */
.mini-rows { display: grid; gap: 8px; }
.mini-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; }
.mini-bar { height: 8px; border-radius: 99px; background: var(--bg-2); position: relative; overflow: hidden; }
.mini-bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-out); transition-delay: var(--dl, 0s); }
.mini-bar i.warn { background: var(--warn); }
.in .mini-bar i { transform: scaleX(1); }
.flow { display: flex; align-items: center; gap: 8px; height: 100%; justify-content: space-between; }
.flow-step { flex: 1; text-align: center; font-size: 11.5px; color: var(--muted); display: grid; gap: 8px; justify-items: center; }
.flow-dot { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--ink); transition: background-color .4s, border-color .4s, color .4s; }
.flow-step.on .flow-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.flow-line { flex: .5; height: 2px; background: var(--line); position: relative; overflow: hidden; margin-bottom: 24px; }
.flow-line::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: translateX(-100%); }
.in .flow-line::after { animation: flowLine 4s infinite; animation-delay: var(--dl); }
@keyframes flowLine { 0% { transform: translateX(-100%); } 20%, 100% { transform: translateX(100%); } }
.rate-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rate-table td { padding: 7px 4px; border-bottom: 1px solid var(--line); }
.rate-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.inv-lines { display: grid; gap: 6px; font-size: 12.5px; }
.inv-line { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 6px 8px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); align-items: center; }
.inv-line .num { font-weight: 500; }
.stamp { position: absolute; right: 14px; bottom: 14px; transform: rotate(-8deg) scale(1.4); opacity: 0; border: 2px solid var(--good); color: var(--good); border-radius: 8px; padding: 2px 10px; font-weight: 600; font-size: 13px; letter-spacing: .06em; transition: transform .6s var(--ease-out) 1.2s, opacity .4s 1.2s; background: var(--surface); }
.in .stamp { opacity: 1; transform: rotate(-8deg) scale(1); }
/* ---------- The one that sells it (roll-off) ---------- */
.sells { background: var(--ink); color: var(--bg); overflow: hidden; }
:root[data-theme="dark"] .sells { background: #0d1017; color: var(--ink); border-block: 1px solid var(--line); }
.sells .muted,
.sells .lede { color: color-mix(in srgb, currentColor 62%, transparent); }
.sells .eyebrow { color: color-mix(in srgb, currentColor 60%, transparent); }
.sells-quote { font-size: clamp(2.1rem, 5.4vw, 4.6rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1.04; max-width: 21ch; }
.sells-quote .hl { color: #8aa4ff; }
.sells-grid { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3vw, 36px); }
.sells-copy { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.sells-copy p { font-size: 1.15rem; line-height: 1.6; }
.sells-copy .aside { font-size: 1rem; padding-left: 20px; border-left: 2px solid #8aa4ff; }
@media (max-width: 860px) {
  .sells-copy { grid-template-columns: 1fr; }
}
.gantt {
  --cols: 10;
  position: relative; border-radius: var(--radius-lg); padding: clamp(18px, 3vw, 32px);
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1);
  color: #e9eaee; font-size: 13.5px;
}
.gantt-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.gantt-title { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.gantt-title span { color: rgba(233, 234, 238, .55); font-weight: 400; }
.gantt-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12.5px; color: rgba(233, 234, 238, .7); }
.gantt-legend span { display: inline-flex; align-items: center; gap: 8px; }
.gantt-legend i { width: 14px; height: 8px; border-radius: 3px; }
.g-row { display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: 16px; height: 50px; }
.g-head { height: 28px; color: rgba(233, 234, 238, .5); font-size: 12px; }
.g-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.g-who span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-who small { display: block; font-size: 11.5px; color: rgba(233, 234, 238, .5); }
.g-track { position: relative; height: 100%; display: grid; grid-template-columns: repeat(var(--cols), 1fr); }
.g-track > b { border-left: 1px dashed rgba(255, 255, 255, .08); }
.g-weeks { display: grid; grid-template-columns: repeat(var(--cols), 1fr); }
.g-weeks span { padding-left: 6px; border-left: 1px solid rgba(255,255,255,.1); }
.g-bar {
  position: absolute; top: 12px; height: 26px; left: calc(var(--s) * 10%); width: calc((var(--e) - var(--s)) * 10%);
  border-radius: 7px; background: rgba(138, 164, 255, .28); border: 1px solid rgba(138, 164, 255, .5);
  display: flex; align-items: center; padding: 0 10px; font-size: 12px; white-space: nowrap; overflow: hidden; color: #fff;
  clip-path: inset(0 100% 0 0 round 7px); transition: clip-path 1.2s var(--ease-out); transition-delay: calc(var(--k) * 90ms + 200ms);
}
.g-bar.next { background: rgba(60, 207, 145, .25); border-color: rgba(60, 207, 145, .6); }
.g-bar.gap {
  background: repeating-linear-gradient(-45deg, rgba(242, 179, 76, .22) 0 6px, rgba(242, 179, 76, .08) 6px 12px);
  border: 1px dashed rgba(242, 179, 76, .7); color: #f6c877;
}
.gantt.in .g-bar { clip-path: inset(0 0 0 0 round 7px); }
.g-end { position: absolute; top: 8px; width: 2px; height: 34px; left: calc(var(--e) * 10%); background: #fff; opacity: 0; transition: opacity .4s; transition-delay: calc(var(--k) * 90ms + 1.2s); border-radius: 2px; }
.gantt.in .g-end { opacity: .9; }
.g-now,
.g-horizon { position: absolute; top: 22px; bottom: 0; width: 0; z-index: 2; pointer-events: none; }
.g-now { left: 186px; border-left: 1.5px solid rgba(255,255,255,.55); }
.g-horizon { left: calc(186px + (100% - 186px) * .6); }
.g-now::before,
.g-horizon::before {
  content: attr(data-label); position: absolute; top: -2px; transform: translate(-50%, -100%);
  font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; padding: 3px 8px; border-radius: 999px;
}
.g-now::before { background: rgba(255,255,255,.14); color: #fff; }
.g-horizon { border-left: 2px dashed #8aa4ff; opacity: 0; transition: opacity .6s 1.6s; }
.g-horizon::before { background: #8aa4ff; color: #0c0e13; }
.gantt.in .g-horizon { opacity: 1; }
.g-body { position: relative; padding-top: 22px; }
.g-summary { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.g-stat { padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.g-stat b { display: block; font-size: 1.9rem; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: #fff; }
.g-stat span { font-size: 12.5px; color: rgba(233, 234, 238, .6); }
.g-stat.warn b { color: #f6c877; }
.g-stat.good b { color: #6ee0ac; }
@media (max-width: 760px) {
  .g-row { grid-template-columns: 96px 1fr; gap: 10px; }
  .g-who .avatar { display: none; }
  .g-now { left: 106px; }
  .g-horizon { left: calc(106px + (100% - 106px) * .6); }
  .g-bar { font-size: 0; padding: 0; }
  .g-summary { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .g-stat { padding: 12px; }
  .g-stat b { font-size: 1.5rem; }
  .g-stat span { font-size: 11.5px; line-height: 1.35; display: block; }
  .gantt-scroll { overflow-x: auto; }
}
/* ---------- Honesty ---------- */
.honest { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
@media (max-width: 900px) {
  .honest { grid-template-columns: 1fr; }
}
.gaps { display: grid; gap: 10px; }
.gap-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
}
.gap-item .status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--warn); white-space: nowrap; }
.gap-item .status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 2px solid currentColor; }
.gap-item.written .status { color: var(--accent); }
.gap-item.written .status::before { background: currentColor; box-shadow: 0 0 0 3px var(--accent-soft); }
/* ---------- Pricing teaser ---------- */
.price-strip {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center;
  padding: clamp(28px, 5vw, 56px); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--surface), var(--surface-2)); border: 1px solid var(--line); box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.price-strip .big { font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 600; letter-spacing: -0.05em; line-height: .9; }
.price-strip .big small { font-size: .28em; letter-spacing: -0.01em; color: var(--muted); font-weight: 500; margin-left: 8px; }
.seat-viz { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.seat { aspect-ratio: 1; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--line); transform: scale(.4); opacity: 0; transition: transform .5s var(--ease-out), opacity .5s, background-color .3s; transition-delay: calc(var(--k) * 18ms); }
.in .seat { transform: none; opacity: 1; }
.seat.full { background: var(--ink); border-color: var(--ink); }
.seat.free { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.seat-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; font-size: 13px; color: var(--muted); }
.seat-legend span { display: inline-flex; align-items: center; gap: 8px; }
.seat-legend i { width: 12px; height: 12px; border-radius: 4px; }
@media (max-width: 860px) {
  .price-strip { grid-template-columns: 1fr; }
}
/* ---------- Close CTA ---------- */
.close-cta { text-align: center; position: relative; overflow: hidden; }
.close-cta .display { max-width: 15ch; margin-inline: auto; }
.close-cta .lede { margin: 20px auto 28px; }
.orbit { position: absolute; left: 50%; top: 50%; width: 1100px; height: 1100px; transform: translate(-50%, -50%); pointer-events: none; z-index: 0; opacity: .6; }
.orbit circle { fill: none; stroke: var(--line); }
.orbit .sat { fill: var(--accent); stroke: none; }
.orbit g { transform-origin: 550px 550px; animation: spin 60s linear infinite; }
.orbit g:nth-child(2) { animation-duration: 90s; animation-direction: reverse; }
.orbit g:nth-child(3) { animation-duration: 130s; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 44px 28px; font-size: 14.5px; color: var(--muted); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.foot-grid h4, .foot-grid .foot-h { font-size: 13px; color: var(--ink); font-weight: 500; letter-spacing: 0; margin-bottom: 14px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.foot-grid a:hover { color: var(--ink); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; }
.wordmark-xl { font-size: clamp(5rem, 22vw, 18rem); font-weight: 600; letter-spacing: -0.07em; line-height: .8; color: transparent; -webkit-text-stroke: 1px var(--line-2); margin-top: 24px; user-select: none; text-align: center; }
@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
}
/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding-top: clamp(100px, 9vw, 124px); padding-bottom: var(--section-pad); position: relative; overflow: hidden; }
.page-hero .wrap { position: relative; z-index: 1; display: grid; gap: 24px; }
.page-hero .h1 { max-width: 18ch; }
/* ---------- Product page ---------- */
.subnav {
  position: sticky; top: 72px; z-index: 40; background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-block: 1px solid var(--line);
}
.subnav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 10px 0; overflow-x: auto; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: block; padding: 8px 14px; border-radius: 999px; font-size: 14px; color: var(--muted); white-space: nowrap; transition: background-color .25s, color .25s; }
.subnav a:hover { color: var(--ink); }
.subnav a.active { background: var(--ink); color: var(--bg); }
.feature { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 6vw, 88px); align-items: center; }
.feature.flip > :first-child { order: 2; }
@media (max-width: 960px) {
  .feature,
.feature.flip { grid-template-columns: 1fr; }
  .feature.flip > :first-child { order: 0; }
}
.feature-copy { display: grid; gap: 20px; }
.ticks { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 14px; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; color: var(--ink-2); line-height: 1.5; }
.ticks li::before {
  content: ""; width: 20px; height: 20px; margin-top: 2px; border-radius: 6px; background: var(--accent-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%232b59ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.note {
  font-size: 15px; color: var(--muted); padding: 16px 18px; border-radius: 12px; background: var(--surface); border: 1px dashed var(--line-2);
}
.note strong { color: var(--ink); font-weight: 500; }
/* App window frame */
.app {
  border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  overflow: hidden; font-size: 13px; position: relative;
}
.app-bar { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.app-dots { display: flex; gap: 6px; }
.app-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.app-crumb { font-size: 12.5px; color: var(--muted); }
.app-crumb b { color: var(--ink); font-weight: 500; }
.app-body { padding: 18px; }
.app-tabs { display: flex; gap: 4px; margin-bottom: 14px; }
.app-tabs span { padding: 5px 10px; border-radius: 8px; font-size: 12px; color: var(--muted); }
.app-tabs span.on { background: var(--bg-2); color: var(--ink); font-weight: 500; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-weight: 500; font-size: 11.5px; color: var(--faint); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.r,
.tbl th.r { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tr { transition: background-color .3s; }
.tbl tbody tr:hover { background: var(--surface-2); }
.who { display: flex; align-items: center; gap: 10px; }
.tbl tr.flash { animation: rowflash 2.4s var(--ease) 1; }
@keyframes rowflash { 0%, 100% { background: transparent; } 30% { background: var(--accent-soft); } }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-top: 8px; }
.bars .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; height: 100%; font-size: 11px; color: var(--faint); }
.bars .b { width: 100%; border-radius: 6px 6px 2px 2px; background: var(--accent-soft); border: 1px solid var(--accent-line); height: var(--h); transform: scaleY(0); transform-origin: bottom; transition: transform 1s var(--ease-out); transition-delay: calc(var(--k) * 70ms); position: relative; }
.bars .b.hot { background: var(--accent); border-color: var(--accent); }
.in .bars .b { transform: none; }
.bars .v { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.kcol { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: grid; gap: 8px; align-content: start; min-height: 230px; }
.kcol h5, .kcol .kh { margin: 0 0 2px; font-size: 11.5px; font-weight: 500; color: var(--muted); display: flex; justify-content: space-between; }
.kcard { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 9px; font-size: 12px; box-shadow: var(--shadow-sm); display: grid; gap: 6px; }
.kcard .src { font-size: 10.5px; color: var(--faint); }
.kcard.mover { border-color: var(--accent-line); }
.kcard.hired { border-color: color-mix(in srgb, var(--good) 50%, transparent); background: var(--good-soft); }
@media (max-width: 560px) {
  .kanban { grid-template-columns: repeat(2, 1fr); }
}
.drift { display: grid; gap: 10px; }
.drift-row { display: grid; grid-template-columns: 1.4fr .8fr .8fr 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.drift-row.head { background: transparent; border: 0; font-size: 11.5px; color: var(--faint); padding-block: 0; }
.drift-row .num { text-align: right; }
.delta { justify-self: end; font-size: 11.5px; font-weight: 500; padding: 3px 8px; border-radius: 999px; }
.delta.under { color: var(--bad); background: var(--bad-soft); }
.delta.on { color: var(--good); background: var(--good-soft); }
.floor-meter { height: 6px; border-radius: 99px; background: var(--bg-2); position: relative; margin-top: 4px; }
.floor-meter i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--good); width: var(--w); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-out) .3s; }
.floor-meter i.low { background: var(--bad); }
.floor-meter::after { content: ""; position: absolute; top: -4px; bottom: -4px; width: 2px; left: var(--floor, 30%); background: var(--ink); border-radius: 2px; }
.in .floor-meter i { transform: none; }
.invoice { display: grid; gap: 14px; }
.inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.inv-head .big { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.inv-days { display: grid; gap: 6px; }
.inv-day { display: grid; grid-template-columns: 90px 1fr 60px 80px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); font-size: 12.5px; cursor: pointer; transition: border-color .25s, background-color .25s; }
.inv-day:hover,
.inv-day.sel { border-color: var(--accent); background: var(--accent-soft); }
.inv-day .num { text-align: right; }
.trace-pop { border-radius: 12px; border: 1px solid var(--accent-line); background: var(--surface-2); padding: 12px; display: grid; gap: 6px; font-size: 12.5px; }
.trace-step { display: flex; align-items: center; gap: 10px; opacity: 0; transform: translateX(-6px); animation: traceIn .45s var(--ease-out) forwards; animation-delay: calc(var(--k) * 110ms); }
.trace-step i { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; background: var(--accent); color: #fff; font-style: normal; font-size: 10px; flex: none; }
.trace-step span { color: var(--muted); }
.trace-step b { font-weight: 500; }
@keyframes traceIn { to { opacity: 1; transform: none; } }
/* State table */
.state { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.state-row { display: grid; grid-template-columns: 180px 1fr 1fr; border-bottom: 1px solid var(--line); }
.state-row:last-child { border-bottom: 0; }
.state-row > div { padding: 22px 24px; }
.state-row > div + div { border-left: 1px solid var(--line); }
.state-row.head > div { padding-block: 14px; font-size: 13px; color: var(--muted); background: var(--surface-2); font-weight: 500; }
.state-row .area { font-weight: 600; letter-spacing: -0.01em; }
.state-row .built { color: var(--ink-2); }
.state-row .gap { color: var(--muted); }
.state-row .gap.none { color: var(--faint); }
.state-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.state-dot.g { background: var(--good); }
.state-dot.w { background: var(--warn); }
@media (max-width: 760px) {
  .state-row { grid-template-columns: 1fr; }
  .state-row > div + div { border-left: 0; border-top: 1px dashed var(--line); }
  .state-row.head { display: none; }
  .state-row .built::before { content: "Built and in use"; display: block; font-size: 12px; color: var(--good); margin-bottom: 6px; }
  .state-row .gap::before { content: "Not built"; display: block; font-size: 12px; color: var(--warn); margin-bottom: 6px; }
}
/* ---------- Pricing page ---------- */
.seat-model { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) {
  .seat-model { grid-template-columns: 1fr; }
}
.seat-card { padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); display: grid; gap: 14px; align-content: start; }
.seat-card .price { font-size: 2.6rem; font-weight: 600; letter-spacing: -0.04em; }
.seat-card .price small { font-size: 15px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.seat-card.free { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 30%, transparent); }
.seat-card.free .price { color: var(--good); }
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); overflow: hidden; box-shadow: var(--shadow); }
.calc-in { padding: clamp(24px, 3vw, 40px); display: grid; gap: 26px; align-content: start; }
.calc-out { padding: clamp(24px, 3vw, 40px); background: var(--ink); color: var(--bg); display: grid; gap: 18px; align-content: space-between; position: relative; overflow: hidden; }
:root[data-theme="dark"] .calc-out { background: #161a24; color: var(--ink); }
@media (max-width: 860px) {
  .calc { grid-template-columns: 1fr; }
}
.field { display: grid; gap: 10px; }
.field-top { display: flex; justify-content: space-between; align-items: baseline; }
.field label { font-size: 14.5px; font-weight: 500; }
.field output { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; background: linear-gradient(to right, var(--accent) var(--p, 50%), var(--bg-2) var(--p, 50%)); outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); box-shadow: var(--shadow); cursor: grab; transition: transform .2s; }
input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); cursor: grab; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg-2); position: relative; }
.seg button { position: relative; z-index: 1; border: 0; background: transparent; padding: 10px 8px; border-radius: 9px; cursor: pointer; font-size: 14px; color: var(--muted); transition: color .3s; }
.seg button.on { color: var(--ink); }
.seg .thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 16px) / 3); border-radius: 9px; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .45s var(--ease-out); }
.toggle { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14.5px; user-select: none; }
.toggle input { position: absolute; opacity: 0; }
.toggle .sw { width: 44px; height: 26px; border-radius: 99px; background: var(--line-2); position: relative; transition: background-color .3s; }
.toggle .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .35s var(--ease-out); }
.toggle input:checked + .sw { background: var(--accent); }
.toggle input:checked + .sw::after { transform: translateX(18px); }
.toggle input:focus-visible + .sw { outline: 2px solid var(--accent); outline-offset: 3px; }
.toggle em { font-style: normal; font-size: 12px; color: var(--good); background: var(--good-soft); padding: 2px 8px; border-radius: 99px; }
.total { font-size: clamp(3rem, 6vw, 4.6rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.total small { font-size: 16px; font-weight: 400; letter-spacing: 0; opacity: .6; }
.calc-lines { display: grid; gap: 10px; font-size: 14.5px; }
.calc-lines div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.1); }
:root:not([data-theme="dark"]) .calc-lines div { border-bottom-color: rgba(255,255,255,.12); }
.calc-lines span:first-child { opacity: .65; }
.calc-lines .num { font-variant-numeric: tabular-nums; }
.calc-note { font-size: 13.5px; opacity: .7; line-height: 1.5; }
.calc-note.over { color: #f6c877; opacity: 1; }
.tiers { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.tiers > div { padding: 15px 18px; border-bottom: 1px solid var(--line); font-size: 14.5px; display: flex; align-items: center; }
.tiers > div:not(.feat) { justify-content: center; text-align: center; }
.tiers .feat { color: var(--ink-2); }
.tiers .th { padding-block: 26px; flex-direction: column; gap: 6px; align-items: center; justify-content: flex-start; background: var(--surface-2); }
.tiers .th.feat { align-items: flex-start; justify-content: flex-end; }
.tiers .th .tn { font-weight: 600; font-size: 16px; }
.tiers .th .tp { font-size: 30px; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.tiers .th .tp small { font-size: 13px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.tiers .th .tp.talk { font-size: 18px; letter-spacing: -0.02em; padding-block: 8px; }
.tiers .col-hl { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
.tiers .th.col-hl { background: var(--accent-soft); }
.tiers .badge { font-size: 11px; font-weight: 500; color: var(--accent); border: 1px solid var(--accent-line); border-radius: 99px; padding: 2px 8px; }
.yes { width: 20px; height: 20px; border-radius: 50%; background: var(--good-soft); display: inline-grid; place-items: center; color: var(--good); }
.no { color: var(--muted); }
.tiers .last { border-bottom: 0; }
.tiers-scroll { overflow-x: auto; border-radius: var(--radius-lg); }
@media (max-width: 860px) {
  .tiers { min-width: 760px; }
}
.fine { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.fine > div { padding: 22px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 15px; }
.fine strong { display: block; color: var(--ink); font-weight: 500; margin-bottom: 6px; }
@media (max-width: 860px) {
  .fine { grid-template-columns: 1fr; }
}
.faq { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 22px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { width: 22px; height: 22px; position: relative; flex: none; }
.faq summary .pm::before,
.faq summary .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; background: currentColor; transform: translate(-50%, -50%); transition: transform .35s var(--ease-out); }
.faq summary .pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] summary .pm::after { transform: translate(-50%, -50%) rotate(0); }
.faq .ans { padding: 0 22px 22px; color: var(--muted); display: grid; gap: 10px; }
/* ---------- Security page ---------- */
.sec-grid { display: grid; grid-template-columns: 260px 1fr; gap: clamp(32px, 6vw, 80px); }
@media (max-width: 900px) {
  .sec-grid { grid-template-columns: 1fr; }
  .sec-toc { display: none; }
}
.sec-toc { position: sticky; top: 110px; align-self: start; display: grid; gap: 4px; font-size: 14.5px; }
.sec-toc a { padding: 8px 12px; border-radius: 10px; color: var(--muted); border-left: 2px solid transparent; transition: all .25s; }
.sec-toc a.active { color: var(--ink); background: var(--surface); border-left-color: var(--accent); }
.sec-block { padding-bottom: clamp(28px, 3.5vw, 44px); display: grid; gap: 22px; }
.sec-block h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.claim { display: grid; grid-template-columns: 42px 1fr; gap: 18px; padding: 24px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.claim .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.claim h3 { font-size: 1.12rem; letter-spacing: -0.015em; margin-bottom: 6px; line-height: 1.35; }
.claim p { color: var(--muted); font-size: 15.5px; }
.roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 760px) {
  .roles { grid-template-columns: repeat(2, 1fr); }
}
.role { border-radius: 14px; border: 1px solid var(--line); padding: 16px; background: var(--surface); display: grid; gap: 10px; font-size: 13.5px; position: relative; overflow: hidden; }
.role b { font-size: 14.5px; font-weight: 600; }
.role .rls { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--good); }
.role.mig .rls { color: var(--warn); }
.role.mig { border-style: dashed; }
.role .muted { font-size: 12.5px; line-height: 1.45; }
.db-shield { position: relative; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); padding: 24px; overflow: hidden; }
.db-layers { display: grid; gap: 8px; }
.db-layer { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); font-size: 14px; }
.db-layer.lock { border-color: var(--accent-line); background: var(--accent-soft); }
.db-layer .chip { font-size: 11.5px; }
.notclaim { border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 44px); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-soft); display: grid; gap: 16px; }
.notclaim h2 { color: var(--ink); }
.notclaim p { color: var(--ink-2); }
/* ---------- About ---------- */
.about-hero .display { max-width: 14ch; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) {
  .principles { grid-template-columns: 1fr; }
}
.principle { padding: 30px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); display: grid; gap: 12px; align-content: start; }
.principle .k { font-size: 13px; color: var(--accent); font-weight: 500; }
.principle p { color: var(--muted); }
.not-list { display: flex; flex-wrap: wrap; gap: 10px; }
.not-list span { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 15px; color: var(--muted); }
.not-list span s { text-decoration-color: var(--bad); text-decoration-thickness: 2px; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.stat-row > div { background: var(--surface); padding: 30px; display: grid; gap: 4px; }
.stat-row b { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-row span { color: var(--muted); font-size: 15px; }
@media (max-width: 700px) {
  .stat-row { grid-template-columns: 1fr; }
}
/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 6vw, 88px); align-items: start; }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.form { display: grid; gap: 18px; padding: clamp(24px, 4vw, 40px); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}
.input { display: grid; gap: 8px; }
.input label { font-size: 14px; font-weight: 500; }
.input label span { color: var(--faint); font-weight: 400; }
.input input,
.input textarea,
.input select {
  width: 100%; font: inherit; font-size: 15.5px; color: var(--ink);
  padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.input textarea { min-height: 130px; resize: vertical; }
.input input:focus,
.input textarea:focus,
.input select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); background: var(--surface); }
.input .err { font-size: 13px; color: var(--bad); display: none; }
.input.invalid input,
.input.invalid textarea { border-color: var(--bad); }
.input.invalid .err { display: block; }
.radio-set { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-set label { cursor: pointer; position: relative; }
.radio-set input { position: absolute; opacity: 0; }
.radio-set span { display: inline-block; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; transition: all .2s; }
.radio-set input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.radio-set input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-done { display: none; text-align: center; padding: 40px 10px; gap: 14px; justify-items: center; }
.form.sent > :not(.form-done) { display: none; }
.form.sent .form-done { display: grid; }
.check-anim { width: 64px; height: 64px; }
.check-anim circle { fill: none; stroke: var(--good); stroke-width: 3; stroke-dasharray: 190; stroke-dashoffset: 190; animation: draw .8s var(--ease-out) forwards; }
.check-anim path { fill: none; stroke: var(--good); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .5s .6s var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.agenda { display: grid; gap: 0; border-left: 2px solid var(--line); margin-left: 6px; }
.agenda-step { position: relative; padding: 0 0 28px 26px; display: grid; gap: 4px; }
.agenda-step::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); }
.agenda-step b { font-weight: 500; }
.agenda-step span { color: var(--muted); font-size: 15px; }
.agenda-step .t { font-size: 12.5px; color: var(--accent); font-variant-numeric: tabular-nums; }
/* ---------- Marquee of real terms ---------- */
.ticker { overflow: hidden; padding-block: 10px 4px; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ticker-track { display: flex; width: max-content; will-change: transform; }
.tk {
  --g: 0; position: relative; padding: 22px 28px 0; white-space: nowrap;
  font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 17px; line-height: 1.3;
  color: color-mix(in srgb, var(--heading-teal, #087e78) calc(var(--g) * 100%), var(--muted));
}
.tk::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--accent-line); }
.tk b {
  position: absolute; left: 50%; top: 0; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%;
  background: color-mix(in srgb, var(--heading-teal, #087e78) calc(var(--g) * 100%), var(--bg));
  border: 1.5px solid color-mix(in srgb, var(--heading-teal, #087e78) calc(var(--g) * 100%), var(--line-2));
  box-shadow: 0 0 0 calc(var(--g) * 5px) color-mix(in srgb, var(--heading-teal, #087e78) calc(var(--g) * 18%), transparent),
              0 0 calc(var(--g) * 14px) color-mix(in srgb, var(--heading-teal, #087e78) calc(var(--g) * 45%), transparent);
}

/* ---------- Scroll progress ---------- */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); z-index: 60; }
/* ---------- Utilities ---------- */
.mt-s { margin-top: 16px; }
.mt-m { margin-top: 32px; }
.center { text-align: center; }
.row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/* ==========================================================================
   Living thread (home "thread" section)
   ========================================================================== */
.thread-section .section-head { margin-bottom: clamp(0px, 1vw, 12px); }
.tstage { position: relative; z-index: 1; height: clamp(260px, 24vw, 320px); margin-top: clamp(4px, 1vw, 16px); touch-action: pan-y; }
.tstage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tn {
  position: absolute; left: 0; top: 0; z-index: 2; transform: translate(-50%, -50%);
  font: inherit; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
  padding: 10px 16px; border-radius: 12px; cursor: default; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow);
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.tn .short { display: none; }
.tn.key { background: var(--accent-soft); border-color: var(--accent); }
.tn.hit { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow); }
.tn.trace { border-color: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft), var(--shadow); }
.tn-tip {
  position: absolute; left: 50%; bottom: calc(100% + 12px); width: 220px; z-index: 5;
  display: grid; gap: 4px; padding: 11px 13px; border-radius: 12px; text-align: left; white-space: normal;
  font-size: 12.5px; font-weight: 400; line-height: 1.45; letter-spacing: 0;
  background: var(--ink); color: var(--bg); box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transform: translate(-50%, 6px); transition: opacity .25s, transform .3s var(--ease-out);
}
.tn-tip b { font-weight: 600; font-size: 13px; }
.tn:hover .tn-tip,
.tn:focus-visible .tn-tip { opacity: 1; transform: translate(-50%, 0); }
.tn:last-of-type .tn-tip { left: auto; right: -8px; transform: translate(0, 6px); }
.tn:last-of-type:hover .tn-tip,
.tn:last-of-type:focus-visible .tn-tip { transform: none; }
.tsys {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none;
  font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap;
  padding: 3px 9px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line);
}
.tloop-label { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; font-size: 13.5px; font-weight: 500; color: var(--accent); white-space: nowrap; }
.tlegend { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px 26px; margin-top: 0; font-size: 13.5px; color: var(--muted); }
.tlegend span { display: inline-flex; align-items: center; gap: 9px; }
.tlegend i { width: 24px; height: 0; }
.tlegend .l-twin { border-top: 1.6px solid var(--faint); }
.tlegend .l-one { border-top: 2.5px solid var(--accent); }
.tlegend .l-loop { border-top: 2px dashed var(--accent); }
.tlegend .l-trace { width: 10px; height: 10px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.tlegend .hint { color: var(--faint); }
@media (hover: none) {
  .tlegend .hint { display: none; }
}
@media (max-width: 640px) {
  .tn { font-size: 11.5px; padding: 6px 8px; border-radius: 9px; }
  .tn .full { display: none; }
  .tn .short { display: inline; }
  .tn-tip { width: 180px; }
  .tn:first-of-type .tn-tip { left: -8px; transform: translate(0, 6px); }
  .tn:first-of-type:hover .tn-tip,
.tn:first-of-type:focus-visible .tn-tip { transform: none; }
  .tloop-label { font-size: 11.5px; }
  .tsys { font-size: 10.5px; padding: 2px 7px; }
  .tlegend .hint { display: none; }
}
/* ==========================================================================
   Roll-off radar (home hero)
   ========================================================================== */
.radar {
  --who: 118px; --gap: 12px;
  width: 100%; max-width: 560px; margin-inline: auto;
  border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  padding: 16px; font-size: 13px; position: relative;
}
.radar-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.radar-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 12px; background: var(--bg-2); }
.radar-seg button { position: relative; z-index: 1; border: 0; background: transparent; cursor: pointer; padding: 7px 12px; border-radius: 9px; font-size: 12.5px; color: var(--muted); white-space: nowrap; transition: color .3s; }
.radar-seg button.on { color: var(--ink); font-weight: 500; }
.radar-seg .thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 9px; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .5s var(--ease-out); }
.radar-week { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.radar[data-view="kader"] .radar-week { color: var(--accent); }
.radar-views { display: grid; }
.radar-view { grid-area: 1 / 1; display: grid; gap: 14px; align-content: start; transition: opacity .5s var(--ease), transform .6s var(--ease-out), visibility .5s; }
.radar[data-view="bench"] .radar-kader,
.radar[data-view="kader"] .radar-bench { opacity: 0; visibility: hidden; transform: translateY(10px) scale(.985); }
.rb-big { display: flex; align-items: baseline; gap: 12px; }
.rb-big b { font-size: 3.4rem; font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.rb-big span { color: var(--muted); font-size: 15px; }
.rb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rb-list li { display: grid; grid-template-columns: 26px 1fr auto 18px; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.rb-list li span:not(.avatar) { color: var(--faint); font-size: 12px; }
.rb-list li i { font-style: normal; color: var(--good); font-weight: 600; }
.rb-note { color: var(--faint); font-size: 12.5px; }
.rk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rk-stats > div { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); display: grid; }
.rk-stats b { font-size: 1.7rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; }
.rk-stats span { font-size: 11.5px; color: var(--muted); }
.rk-stats .good b { color: var(--good); }
.rk-stats .warn b { color: var(--warn); }
.rk-chart { position: relative; display: grid; gap: 4px; padding: 26px 0 16px; }
.rk-weeks { display: grid; grid-template-columns: var(--who) 1fr; gap: var(--gap); font-size: 10.5px; color: var(--faint); }
.rk-weeks div { display: grid; grid-template-columns: repeat(10, 1fr); }
.rk-weeks i { font-style: normal; padding-left: 3px; border-left: 1px solid var(--line); }
.rk-row { display: grid; grid-template-columns: var(--who) 1fr; gap: var(--gap); align-items: center; height: 28px; }
.rk-who { display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; font-size: 12.5px; transition: color .3s; }
.rk-who .avatar { width: 22px; height: 22px; font-size: 9px; }
.rk-track { position: relative; height: 100%; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--line) calc(10% - 1px) 10%); }
.rk-track i { position: absolute; top: 6px; bottom: 6px; border-radius: 6px; font-style: normal; font-size: 10.5px; display: flex; align-items: center; padding: 0 7px; white-space: nowrap; overflow: hidden; }
.rk-cur { left: 0; width: calc(min(var(--end), 10) * 10%); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.rk-after { left: calc(var(--end) * 10% + 2px); width: calc((var(--to) - var(--end)) * 10% - 2px); clip-path: inset(0 100% 0 0 round 6px); transition: clip-path .6s var(--ease-out); }
.rk-after.gap { background: repeating-linear-gradient(-45deg, var(--warn-soft) 0 5px, transparent 5px 10px); border: 1px dashed var(--warn); color: var(--warn); }
.rk-after.next { background: var(--good-soft); border: 1px solid color-mix(in srgb, var(--good) 50%, transparent); color: var(--good); }
.rk-row.passed .rk-after { clip-path: inset(0 0 0 0 round 6px); }
.rk-row.passed .rk-who { color: var(--ink); font-weight: 500; }
.rk-row.passed .rk-cur { border-color: var(--accent); }
.rk-overlay { position: absolute; top: 22px; bottom: 12px; left: calc(var(--who) + var(--gap)); right: 0; cursor: ew-resize; touch-action: pan-y; }
.rk-horizon { position: absolute; top: 0; bottom: 0; left: 60%; border-left: 1.5px dashed var(--accent); opacity: .5; pointer-events: none; }
.rk-horizon::before { content: attr(data-label); position: absolute; bottom: -15px; left: 4px; font-size: 10px; color: var(--accent); white-space: nowrap; }
.rk-head { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-left: 2px solid var(--ink); outline: none; }
.rk-head b {
  position: absolute; top: -6px; left: 0; transform: translate(-50%, -100%);
  font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--ink); color: var(--bg); white-space: nowrap;
  box-shadow: var(--shadow); cursor: grab;
}
.rk-head:focus-visible b { outline: 2px solid var(--accent); outline-offset: 2px; }
.rk-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; min-height: 122px; align-content: start; }
.rk-feed li { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 10px; font-size: 12.5px; border: 1px solid var(--line); background: var(--surface-2); animation: feedIn .45s var(--ease-out); }
.rk-feed li b { font-weight: 600; font-size: 11px; padding: 2px 7px; border-radius: 999px; }
.rk-feed li.good b { background: var(--good-soft); color: var(--good); }
.rk-feed li.warn b { background: var(--warn-soft); color: var(--warn); }
.rk-feed li span { color: var(--muted); }
@keyframes feedIn { from { opacity: 0; transform: translateY(-6px); } }
.rk-quote { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; opacity: 0; transform: translateY(6px); transition: opacity .6s, transform .6s var(--ease-out); }
.rk-quote span { color: var(--accent); }
.rk-quote.on { opacity: 1; transform: none; }
@media (max-width: 560px) {
  .radar { --who: 84px; --gap: 8px; padding: 12px; }
  .rk-who .avatar { display: none; }
  .rk-track i { font-size: 0; padding: 0; }
  .rb-big b { font-size: 2.6rem; }
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
*::before,
*::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .reveal,
.reveal-scale,
.split .w > span { opacity: 1; transform: none; }
}
/* Strips that sit between sections (word ticker, product sub-menu) keep the same 2× --section-pad
   distance to the content above and below them as any two sections do. */
.ticker { margin-block: calc(var(--section-pad) - 10px) calc(var(--section-pad) - 4px); }
.subnav { margin-block: calc(var(--section-pad) - 11px); }


/* ##########################################################################
   SUNRISE SKIN — the site's look (colours, fonts, headings, section labels).
   Merged in from skin.css on 11 Oct 2026 (tracker 12). It stays at the end of the
   file on purpose: these rules override the base styles above.
   ########################################################################## */

/* ==========================================================================
   Ornool — Sunrise skin (live). Loaded on every page after styles.css.
   Colours and typography from the approved reference (data-design="sunrise"):
   DM Sans text, Georgia two-tone hero heading, warm paper, rust accents, teal highlights.
   styles.css keeps layout and animation; this file sets the look.
   ========================================================================== */

:root {
  /* Reference palette */
  --bg: #fff5e8;            /* --paper */
  --bg-2: #fbe8d0;          /* --pale (problem band) */
  --surface: #fffaf3;       /* .forecast card */
  --surface-2: #fff0d8;     /* .forecast-detail */
  --ink: #43291e;           /* --ink */
  --ink-2: #5a3a2c;
  --muted: #765849;         /* --muted */
  --faint: #836b5d;           /* darkened 11 Oct for WCAG AA (4.6:1 on paper) */
  --line: #e7cbb0;          /* --line */
  --line-2: #dcb594;
  --accent: #af4324;        /* --blue (rust in sunrise) */
  --accent-ink: #fffaf3;    /* --blue-ink */
  --accent-soft: #fce7c6;   /* .forecast-top */
  --accent-line: #e3a37f;
  --good: #356046;          /* --green */
  --good-soft: #e1eed7;     /* --green-bg */
  --warn: #82521b;          /* --orange */
  --warn-soft: #ffe9bc;     /* --orange-bg */
  --bad: #b3261e;
  --bad-soft: #fbe1dc;
  --grid: transparent;
  --glow: rgba(255, 207, 141, .52);
  --shadow: 0 1px 2px rgba(67, 41, 30, .04), 0 18px 50px rgba(152, 87, 40, .075);
  --shadow-lg: 0 2px 4px rgba(67, 41, 30, .04), 0 24px 60px -18px rgba(152, 87, 40, .22);
  --shadow-sm: 0 1px 2px rgba(67, 41, 30, .06);
  --radius: 16px;
  --radius-lg: 16px;
  --heading-ink: #17252d;   /* hero heading, line 1 */
  --heading-teal: #087e78;  /* hero heading, line 2 */
  --font: "DM Sans", Arial, sans-serif;
}

/* The reference has no dark mode; this is a warm dusk version of the same palette. */
:root[data-theme="dark"] {
  --bg: #1c120d;
  --bg-2: #24170f;
  --surface: #2a1b13;
  --surface-2: #231610;
  --ink: #fbeee0;
  --ink-2: #f0dcc8;
  --muted: #c9a892;
  --faint: #8f7362;
  --line: #3d2a1f;
  --line-2: #4e3628;
  --accent: #e2774f;
  --accent-ink: #1c120d;
  --accent-soft: rgba(226, 119, 79, .16);
  --accent-line: rgba(226, 119, 79, .45);
  --good: #7fc29a;
  --good-soft: rgba(127, 194, 154, .14);
  --warn: #e9b46a;
  --warn-soft: rgba(233, 180, 106, .14);
  --glow: rgba(226, 119, 79, .18);
  --heading-ink: #fbeee0;
  --heading-teal: #4fc7bd;
}

/* ---------- Type: DM Sans body, DM Sans Medium headings ---------- */
body { font-family: var(--font); font-size: 16px; line-height: 1.65; }
h1, h2, h3, h4, .h1, .h2, .h3, .display { font-family: var(--font); font-weight: 500; letter-spacing: -0.035em; line-height: 1.1; color: var(--ink); }
.h1 { font-size: clamp(2.65rem, 4.15vw, 4rem); }
.h2 { font-size: clamp(2rem, 3vw, 3rem); }
.h3, .card h3, .beat h3, .principle h3 { font-size: 1.4rem; line-height: 1.2; }
.display { font-size: clamp(2.65rem, 4.15vw, 4rem); }
p, .lede, .muted { color: var(--muted); }
.lede { font-size: 17px; line-height: 1.8; }
.eyebrow, .eyebrow.accent { gap: 12px;
  font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent);
}

/* ---------- Hero heading: Georgia, two tones, from the reference ---------- */
.hero .display {
  font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-style: normal;
  font-size: 48px; line-height: 1.08; letter-spacing: -1.15px; color: var(--heading-ink);
}
@media (max-width: 600px) { .hero .display { font-size: 36px; } }
/* Replace the gradient with the reference's two tones: the second line in teal. */
.grad-heading .w > span { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--heading-ink); }
.grad-heading .line-2 .w > span { color: var(--heading-teal); }
html:not(.js) .grad-heading { background: none; color: var(--heading-ink); }
html:not(.js) .grad-heading .line-2 { color: var(--heading-teal); }

/* ---------- Header and nav ---------- */
.site-header { background: color-mix(in srgb, var(--bg) 96%, transparent); border-bottom-color: var(--line); }
.site-header.scrolled { background: color-mix(in srgb, var(--bg) 92%, transparent); }
.brand { font-size: 26px; font-weight: 600; letter-spacing: -1.2px; }
.brand-mark { width: 32px; height: 32px; }
.nav-links a { font-size: 13px; color: var(--ink); }
.nav-links a:hover { background: var(--bg-2); }

/* ---------- Buttons: rust pills ---------- */
.btn { --b: var(--accent); --c: var(--accent-ink); font-size: 14px; font-weight: 500; padding: 0 23px; border-radius: 30px; }
.btn-sm { font-size: 13px; padding: 0 18px; }
.btn-ghost { --b: transparent; --c: var(--ink); border-color: var(--line-2); }
.link-arrow { color: var(--accent); }

/* Hero radar: reference forecast colours */
.radar { background: #fffaf3; }
.radar-seg { background: #fce7c6; }
.rk-cur { background: rgba(218, 108, 53, .8); border-color: transparent; }
:root[data-theme="dark"] .radar { background: var(--surface); }
:root[data-theme="dark"] .radar-seg { background: var(--bg-2); }

/* Tick icons in product lists */
.ticks li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23af4324' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ==========================================================================
   One skin throughout: every section uses the hero's look —
   warm paper, a soft sun-glow, slate + teal headings, rust accents.
   ========================================================================== */
.bg-grid, .bg-glow { display: none; }
body { background: var(--bg); }
main > section, .site-footer { background: transparent; border: 0; }
/* The sun-glow, alternating sides so long pages feel continuous rather than tiled */
.hero, .page-hero, main > section:nth-of-type(odd) { background: radial-gradient(ellipse at 74% 42%, rgba(255, 207, 141, .52), transparent 65%); }
main > section:nth-of-type(even):not(.hero):not(.page-hero) { background: radial-gradient(ellipse at 22% 50%, rgba(255, 207, 141, .34), transparent 62%); }
:root[data-theme="dark"] .hero, :root[data-theme="dark"] .page-hero, :root[data-theme="dark"] main > section:nth-of-type(odd) { background: radial-gradient(ellipse at 74% 42%, rgba(226, 119, 79, .14), transparent 65%); }
:root[data-theme="dark"] main > section:nth-of-type(even):not(.hero):not(.page-hero) { background: radial-gradient(ellipse at 22% 50%, rgba(226, 119, 79, .10), transparent 62%); }
/* Sections that set their own background inline (product "state", about "talk to us") follow the skin too */
main > section[style*="background"] { background: radial-gradient(ellipse at 22% 50%, rgba(255, 207, 141, .34), transparent 62%) !important; }
.subnav { background: color-mix(in srgb, var(--bg) 90%, transparent); border-color: var(--line); }

/* Section heading accent: the hero's teal for highlighted words */
.sells-quote, .close-cta .display { color: var(--heading-ink); }
.sells-quote .hl { color: var(--heading-teal); }

/* "The one that sells it": light skin instead of a dark band */
.sells { color: var(--ink); }
.sells .eyebrow { color: var(--accent); }
.sells p, .sells .lede { color: var(--muted); }
.sells-copy .aside { border-left-color: var(--accent); color: var(--muted); }
.gantt { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: var(--shadow); }
.gantt-title span, .gantt-legend, .g-head, .g-who small, .g-stat span { color: var(--muted); }
.g-track > b { border-left-color: var(--line); }
.g-weeks span { border-left-color: var(--line); }
.g-bar { background: rgba(218, 108, 53, .8); border-color: transparent; color: #fffaf3; }
.g-bar.next { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 45%, transparent); color: var(--good); }
.g-bar.gap { background: repeating-linear-gradient(-45deg, var(--warn-soft) 0 6px, transparent 6px 12px); border-color: var(--warn); color: var(--warn); }
.g-end { background: var(--ink); }
.g-now { border-left-color: var(--ink); }
.g-now::before { background: var(--ink); color: var(--bg); }
.g-horizon { border-left-color: var(--heading-teal); }
.g-horizon::before { background: var(--heading-teal); color: #fff; }
.g-stat { background: var(--surface-2); border-color: var(--line); }
.g-stat b { color: var(--ink); }
.g-stat.good b { color: var(--good); }
.g-stat.warn b { color: var(--warn); }
.gantt-legend span:nth-child(1) i { background: rgba(218, 108, 53, .8) !important; }
.gantt-legend span:nth-child(2) i { background: var(--good-soft) !important; outline: 1px solid var(--good); }
.gantt-legend span:nth-child(3) i { background: repeating-linear-gradient(-45deg, var(--warn) 0 3px, transparent 3px 6px) !important; }

/* Closing section: light skin, rust button */
.close-cta { color: var(--ink); }
.close-cta .display { font-size: clamp(2rem, 3vw, 3rem); max-width: 18ch; }
.close-cta .display .w > span { color: var(--heading-ink); }
.close-cta .lede { color: var(--muted); }
.close-cta .orbit circle { stroke: var(--line); }
.close-cta .orbit .sat { fill: var(--accent); }

/* Pricing estimate panel: light card in the same skin */
.calc-out { background: var(--accent-soft); color: var(--ink); }
.calc-lines div { border-bottom-color: var(--line) !important; }
.calc-lines span:first-child, .calc-note { color: var(--muted); opacity: 1; }
.calc-note.over { color: var(--warn); }
.total small { color: var(--muted); opacity: 1; }

/* Section labels: a dot with a soft, gently pulsing halo instead of a line */
.eyebrow::before {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 1; flex: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent);
  animation: eyebrowHalo 2.8s ease-in-out infinite;
}
@keyframes eyebrowHalo {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 24%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 8%, transparent); }
}
/* Paused while scrolled out of view (main.js adds .loop-off), so off-screen labels and the orbit cost nothing. */
.eyebrow.loop-off::before, .orbit.loop-off g { animation-play-state: paused; }

/* All page and section headings follow the hero's first line ("Connect your tools."):
   Georgia regular, slate ink, 48px (36px on phones). Card titles (h3) stay in DM Sans. */
h1, h2, .h1, .h2, .display, .sells-quote, .close-cta .display, .sec-block h2, .notclaim h2 {
  font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-style: normal;
  font-size: 48px; line-height: 1.08; letter-spacing: -1.15px; color: var(--heading-ink);
}
.split .w > span { color: inherit; }
.sells-quote .hl { color: var(--heading-teal); }
@media (max-width: 600px) {
  h1, h2, .h1, .h2, .display, .sells-quote, .close-cta .display, .sec-block h2, .notclaim h2 { font-size: 36px; }
}

/* Section and page headings a step smaller than the hero (hero heading stays 48px / 36px). */
h1:not(.hero h1), h2, .h1, .h2, .display:not(.hero .display), .sells-quote, .close-cta .display, .sec-block h2, .notclaim h2 {
  font-size: 38px; letter-spacing: -0.9px;
}
@media (max-width: 600px) {
  h1:not(.hero h1), h2, .h1, .h2, .display:not(.hero .display), .sells-quote, .close-cta .display, .sec-block h2, .notclaim h2 { font-size: 30px; }
}

/* Only DM Sans 400/500/600 are loaded: map bold text to 600 so browsers never synthesise a fake bold. */
b, strong { font-weight: 600; }

/* Short laptop screens (820px tall or less, e.g. 1366×768): compact hero radar so the whole card fits above the fold.
   Taller screens are unchanged. Approved 12 Oct 2026 (tracker 34). */
@media (min-width: 981px) and (max-height: 820px) {
  .hero { padding-top: 92px; }
  .radar { padding: 12px 14px; }
  .radar .rk-feed { display: none; }                 /* the roll-off list: the chart already shows it */
  .radar-bar { margin-bottom: 10px; }
  .rolling-tiles div { padding: 8px 10px; }
  .rolling-tiles b { font-size: 19px; }
  .rk-row { height: 24px; }
  .rk-chart { padding: 20px 0 12px; }
  .rk-quote { font-size: 14px !important; }
  .radar-bench { gap: 10px; }
  .rb-big b { font-size: 2.6rem; }
  .rb-list { gap: 4px; }
  .rb-list li { padding: 5px 10px; }
  .rb-list li:nth-child(n+5) { display: none; }   /* bench report: first four people are enough to make the point */
}

/* ---------- Privacy policy page ---------- */
.policy .sec-block p { max-width: 70ch; color: var(--ink-2); line-height: 1.7; }
.policy .sec-block p strong { color: var(--ink); font-weight: 600; }
.policy-list { margin: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.policy-list > div { display: grid; grid-template-columns: 220px 1fr; gap: 18px; padding: 14px 18px; background: var(--surface); }
.policy-list dt { font-weight: 600; color: var(--ink); }
.policy-list dd { margin: 0; color: var(--muted); line-height: 1.6; }
.policy-table { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.pt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 13px 18px; border-top: 1px solid var(--line); color: var(--ink-2); }
.pt-row:first-child { border-top: 0; }
.pt-head { background: var(--surface-2); font-size: 13px; font-weight: 600; color: var(--muted); }
.draft-notice { padding: 12px 16px; border-radius: 12px; border: 1px dashed var(--warn); background: var(--warn-soft); color: var(--ink); font-size: 14px; }
.draft-notice b { color: var(--warn); }
@media (max-width: 700px) { .policy-list > div, .pt-row { grid-template-columns: 1fr; gap: 4px; } }

/* Deal screen on the Product page (Sales and pipeline) */
.deal-head { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.deal-head div { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface); }
.deal-head small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.deal-head b { font-size: 16px; font-weight: 650; letter-spacing: -0.02em; color: var(--ink); }
.deal-warn { margin-top: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--accent-line); background: var(--accent-soft); font-size: 12.5px; color: var(--ink); display: grid; gap: 2px; }
.deal-warn b { font-weight: 600; color: var(--accent); }
@media (max-width: 900px) and (min-width: 701px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .deal-head { grid-template-columns: repeat(2, 1fr); } }

/* Phones: six stops on the thread need tighter boxes */
@media (max-width: 640px) { .tn { font-size: 11px; padding: 5px 6px; } }

/* Footer: programmes and recognition (NVIDIA Inception, DPIIT). Tracker 47. */
.rec-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding-top: 16px; margin-top: 24px; border-top: 1px solid var(--line); }
.rec-badges + .foot-bottom { margin-top: 16px; }
.rb-label { font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.rb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.rb-nv { height: 46px; width: auto; display: block; }
.rb-txt { height: 46px; display: inline-flex; align-items: center; gap: 10px; padding: 0 14px; border: 1.5px solid #17252d; border-radius: 6px; background: #fff; color: #17252d; line-height: 1.15; }
.rb-txt b { font-size: 15px; font-weight: 600; letter-spacing: .06em; padding-right: 10px; border-right: 1px solid currentColor; }
.rb-txt > span { display: flex; flex-direction: column; font-size: 12.5px; font-weight: 500; }
.rb-txt small { font-size: 10.5px; font-weight: 400; color: #5a4a40; }
/* Dark mode: the NVIDIA badge keeps its own white box (NVIDIA's artwork, shown unaltered);
   the DPIIT text badge matches it so the two sit together as a pair. */
:root[data-theme="dark"] .rb-txt { background: #fff; color: #17252d; border-color: #fff; }


/* ==========================================================================
   SPOOL LOGO (live 24 Oct 2026; option D). Symbol and wordmark sit on a panel:
   the brand's dark panel (#0B0A16) with dark-background artwork on light pages,
   a light panel with light-background artwork in dark mode. The wordmark is set
   about 1.1x the symbol's height so its letters match the spiral's ring.
   ========================================================================== */
.spool-brand { gap: 0; }
.spool-panel { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 12px; border-radius: 12px; background: #0B0A16;
  box-shadow: 0 1px 2px rgba(11, 10, 22, .25), 0 10px 24px -12px rgba(11, 10, 22, .55); }
:root[data-theme="dark"] .spool-panel { background: #fff5e8; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); }
.spool-panel .sym, .spool-panel .wm { display: block; }
.spool-brand img, .spool-xl img { display: block; height: 100%; width: auto; }
.spool-brand .on-dark, .spool-xl .on-dark { display: none; }
:root[data-theme="dark"] .spool-brand .on-light, :root[data-theme="dark"] .spool-xl .on-light { display: none; }
:root[data-theme="dark"] .spool-brand .on-dark, :root[data-theme="dark"] .spool-xl .on-dark { display: block; }
.site-header .spool-panel .sym { height: 36px; }
.site-header .spool-panel .wm { height: 40px; }
.site-footer .spool-panel { padding: 10px 20px 10px 14px; border-radius: 14px; }
.site-footer .spool-panel .sym { height: 44px; }
.site-footer .spool-panel .wm { height: 49px; }
.spool-tagline { margin: 10px 0 0; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
/* Centre the tagline under ORNOOL (not under the whole panel): it starts after the panel padding, symbol and gap
   (14 + 44 x 1.14 + 10 = 74px) and spans the wordmark (49 x 4.62 = 226px). text-indent balances the trailing letter-spacing. */
.site-footer .spool-tagline { display: flex; justify-content: center; width: 226px; margin-left: 74px; white-space: nowrap; text-indent: .22em; }
.wordmark-xl.spool-xl { -webkit-text-stroke: 0; color: inherit; display: flex; justify-content: center; margin-top: 28px; }
.spool-xl img { width: min(100%, 1100px); height: auto; opacity: .13; }
:root[data-theme="dark"] .spool-xl img { opacity: .18; }
@media (max-width: 600px) {
  .site-header .spool-panel { padding: 5px 12px 5px 9px; border-radius: 10px; }
  .site-header .spool-panel .sym { height: 28px; }
  .site-header .spool-panel .wm { height: 31px; }
}

/* ==========================================================================
   DARK MODE CONTRAST (24 Oct 2026). In dark mode --bg-2 and --surface-2 come out
   darker than the cards they sit on, so bars, cells, switches and table header
   rows that use them disappeared. Dark mode only: give them a lighter warm fill
   and a fine edge. Light mode is untouched.
   ========================================================================== */
:root[data-theme="dark"] {
  --dk-fill: rgba(251, 238, 224, .10);      /* cells, tracks, header rows */
  --dk-fill-strong: rgba(251, 238, 224, .17);
  --dk-edge: rgba(251, 238, 224, .2);
}
/* Home · The problem: the monthly cost bars and the spreadsheet cells */
:root[data-theme="dark"] .bv-late i { background: var(--dk-fill-strong); outline: 1px solid var(--dk-edge); outline-offset: -1px; }
:root[data-theme="dark"] .bv-late .bl.x i { background: rgba(226, 85, 70, .22); outline: 1px solid rgba(240, 110, 95, .6); }
:root[data-theme="dark"] .bv-sheet i:not(.hd):not(.h) { background: var(--dk-fill); outline: 1px solid rgba(251, 238, 224, .12); outline-offset: -1px; }
/* Pricing · the plan switch in the calculator */
:root[data-theme="dark"] .seg { background: var(--dk-fill); box-shadow: inset 0 0 0 1px rgba(251, 238, 224, .12); }
:root[data-theme="dark"] .seg .thumb { background: rgba(251, 238, 224, .2); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
/* Table header rows: pricing tiers, product "what is built", privacy tables */
:root[data-theme="dark"] .tiers .th, :root[data-theme="dark"] .state-row.head > div, :root[data-theme="dark"] .pt-head { background: var(--dk-fill); }
/* Pricing · the highlighted Growth column */
:root[data-theme="dark"] .tiers .col-hl { background: rgba(226, 119, 79, .12); }
:root[data-theme="dark"] .tiers .th.col-hl { background: rgba(226, 119, 79, .24); }
/* Pricing strip · the spare (unused) seats in the seat grid */
:root[data-theme="dark"] .seat:not(.full):not(.free) { background: var(--dk-fill); border-color: var(--dk-edge); }
/* Footer: logo block on the right on desktop, so it never sits under the pinned header logo (24 Oct 2026). */
@media (min-width: 901px) {
  .foot-grid { grid-template-columns: 1fr 1fr 1.6fr; }
  .foot-grid > :first-child { order: 3; display: grid; justify-items: end; text-align: right; }
  .foot-grid > :first-child .mt-s { margin-left: auto; }
  .site-footer .spool-tagline { margin-left: 0; margin-right: 20px; }
}

/* Footer: registered office block */
.foot-addr { line-height: 1.55; }
.foot-cin { font-size: 12px; color: var(--muted); letter-spacing: .02em; }

/* Contact form honeypot: off-screen, never seen by people */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Logo (25 Oct 2026): pre-rendered lockup images at exact pixel sizes per screen scaling,
   snapped to whole screen pixels by main.js, so Chrome never redraws or resamples the curves. */
.spool-panel img.lk { width: 240px; height: 36px; }
.site-footer .spool-panel img.lk { width: 296px; height: 44px; }

/* Contact form: email fallback message while no form endpoint is set (tracker item 2) */
.form-done .done-mail, .form.via-mail .form-done .done-sent { display: none; }
.form.via-mail .form-done .done-mail { display: block; }