/* salonsuite.tech — "Suite" design system (DESIGN_BRIEF "Precision tool for a creative industry"), used by every page since v0.2.0.
   Rules (.claude/rules/styling.md): colours ONLY in the :root token block · mobile-first 768 / 1024 / 1440 ·
   animate transform/opacity only · every animation has a prefers-reduced-motion fallback · self-hosted fonts only. */

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-latin-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/assets/fonts/space-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces & text (WCAG checked in /verify: text ≥ 4.5:1, UI ≥ 3:1 on bg / surface / surface-2) */
  --bg: #0b0c0e;
  --surface: #131519;
  --surface-2: #1b1e24;
  --text: #f3efe8;
  --text-muted: #a7a39b;
  --line: rgba(243, 239, 232, .10);
  --line-strong: rgba(243, 239, 232, .42);
  --focus: #f3efe8;

  /* Product accents — one per lifecycle step (not the Salon Sign / Salon Scout UI palettes) */
  --scout: #f2a45c;
  --sign: #3ed3c3;
  --supply: #ad93ff;
  --learn: #c3ec5f;
  --scout-a12: rgba(242, 164, 92, .12);
  --scout-a30: rgba(242, 164, 92, .30);
  --sign-a12: rgba(62, 211, 195, .12);
  --supply-a12: rgba(173, 147, 255, .12);
  --learn-a12: rgba(195, 236, 95, .12);
  --glow: rgba(243, 239, 232, .06);
  --suite: linear-gradient(100deg, var(--scout) 0%, var(--sign) 38%, var(--supply) 70%, var(--learn) 100%);

  --display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --maxw: 76rem;
  --pad-x: clamp(1rem, 4vw, 2.5rem);
  --sec-y: clamp(4.5rem, 11vw, 8.5rem);
  --r: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }

/* ---------- Language (html[lang] set by /assets/js/boot.js before first paint) ---------- */
html:not([lang="de"]) .lang-de, html:not([lang="de"]) .lang-de-inline { display: none !important; }
html[lang="de"] .lang-en, html[lang="de"] .lang-en-inline { display: none !important; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text); font-family: var(--display);
  font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; font-feature-settings: "ss01";
}
main { flex: 1; }
h1, h2, h3 { line-height: 1.04; margin: 0 0 1rem; font-weight: 600; letter-spacing: -.035em; overflow-wrap: break-word; hyphens: auto; }
p { margin: 0 0 1rem; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }
[id] { scroll-margin-top: 4.5rem; }
.mono { font-family: var(--mono); }
.skip { position: absolute; left: -999px; top: .5rem; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; background: var(--text); color: var(--bg); padding: 0 1rem; border-radius: 8px; }
.skip:focus { left: .5rem; }
.eyebrow { font-family: var(--mono); font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.5rem; }
.preview-flag {
  position: fixed; right: .75rem; bottom: .75rem; z-index: 50; font-family: var(--mono); font-size: .75rem;
  color: var(--bg); background: var(--learn); padding: .35rem .7rem; border-radius: 999px; pointer-events: none;
}

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; font-weight: 600; letter-spacing: -.02em; text-decoration: none; min-height: 44px; font-size: 1.0625rem; }
.brand-mark { width: 1.75rem; height: 1.75rem; }
.brand-mark .t { fill: none; stroke: var(--line-strong); stroke-width: 1.4; }
.brand-mark .d1 { fill: var(--scout); } .brand-mark .d2 { fill: var(--sign); } .brand-mark .d3 { fill: var(--supply); } .brand-mark .d4 { fill: var(--learn); }
.nav { display: flex; align-items: center; gap: .35rem; }
.nav-menu { order: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 .15rem; }
.nav .lang-toggle { order: 2; }
.nav-toggle { order: 3; }
.nav-menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .65rem; color: var(--text-muted); text-decoration: none; font-size: .9375rem; }
.nav-menu a:hover, .nav-menu a[aria-current] { color: var(--text); }
.nav-menu a[aria-current] { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .45em; }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: var(--text); cursor: pointer; padding: 0; place-items: center; }
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after { display: block; width: 16px; height: 1.5px; background: currentColor; border-radius: 2px; position: relative; transition: transform .25s var(--ease), opacity .2s var(--ease); }
.nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle .bars::before { top: -5px; } .nav-toggle .bars::after { top: 5px; }
.nav.open .nav-toggle .bars { background: transparent; }
.nav.open .nav-toggle .bars::before { transform: translateY(5px) rotate(45deg); }
.nav.open .nav-toggle .bars::after { transform: translateY(-5px) rotate(-45deg); }
/* Mobile-first: with JS the menu is a disclosure panel; from 1024 px it is inline (without JS it simply wraps) */
.js .nav-toggle { display: grid; }
.js .nav-menu {
  display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0;
  background: var(--bg); border-bottom: 1px solid var(--line); padding: .5rem var(--pad-x) 1rem;
}
.js .nav.open .nav-menu { display: flex; }
.js .nav-menu a { width: 100%; font-size: 1.0625rem; color: var(--text); border-bottom: 1px solid var(--line); }
@media (min-width: 1024px) {
  .js .nav-toggle { display: none; }
  .js .nav-menu { display: flex; position: static; flex-direction: row; background: none; border: 0; padding: 0; gap: 0 .15rem; }
  .js .nav-menu a { width: auto; font-size: .9375rem; color: var(--text-muted); border: 0; }
  .js .nav-menu a:hover, .js .nav-menu a[aria-current] { color: var(--text); }
}
.lang-toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px; margin-left: .35rem; }
.lang-toggle button {
  font: inherit; font-family: var(--mono); font-size: .8125rem; color: var(--text-muted); background: none; border: 0;
  min-width: 44px; min-height: 44px; border-radius: 999px; cursor: pointer;
}
.lang-toggle button[aria-pressed="true"] { background: var(--text); color: var(--bg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: 0 1.35rem;
  border-radius: 999px; border: 1px solid var(--text); background: var(--text); color: var(--bg);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn-ghost { background: none; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--text); }
.btn .arrow { font-family: var(--mono); font-weight: 400; }
.ctas { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(3rem, 8vw, 5.5rem) 0 var(--sec-y); overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 6.4vw, 4.25rem); max-width: 18ch; margin-bottom: 1.5rem; }
.hero h1 .grad { background: var(--suite); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .sub { font-size: clamp(1.125rem, 2.1vw, 1.3125rem); color: var(--text-muted); max-width: 36rem; margin-bottom: 2.25rem; }

/* ---------- Lifecycle loop ---------- */
.loop { position: relative; width: 100%; max-width: 34rem; aspect-ratio: 1; margin: 0 auto; }
.loop-svg, .loop-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.loop-halo { fill: none; stroke: var(--line-strong); stroke-width: .8; stroke-dasharray: 1 7; stroke-linecap: round; }
.loop-halo-g { transform-origin: 200px 200px; animation: spin 140s linear infinite; }
.loop-track { fill: none; stroke: var(--line); stroke-width: 1.2; }
.loop-core { fill: var(--glow); }
.loop-node { transform-box: fill-box; transform-origin: center; transition: transform .6s var(--ease); }
.loop-node.n1 { fill: var(--scout); } .loop-node.n2 { fill: var(--sign); } .loop-node.n3 { fill: var(--supply); } .loop-node.n4 { fill: var(--learn); }
.loop-ring { fill: none; stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .6s var(--ease), transform .6s var(--ease); transform: scale(.6); }
.loop-ring.n1 { stroke: var(--scout); } .loop-ring.n2 { stroke: var(--sign); } .loop-ring.n3 { stroke: var(--supply); } .loop-ring.n4 { stroke: var(--learn); }
.loop-node.is-active { transform: scale(1.35); }
.loop-ring.is-active { opacity: 1; transform: scale(1); }

.loop-steps { list-style: none; margin: 0; padding: 0; }
.step-btn {
  position: absolute; z-index: 2; display: flex; flex-direction: column; gap: .15rem; min-width: 44px; min-height: 44px; padding: .35rem .25rem;
  background: none; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; border-radius: 8px;
  width: 28%; transition: opacity .4s var(--ease);
}
.step-btn .tag { font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.step-btn .name { font-size: clamp(.875rem, 2.9vw, 1.0625rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.s1 .step-btn { left: 0; top: 0; }
.s2 .step-btn { right: 0; top: 0; text-align: right; align-items: flex-end; }
.s3 .step-btn { right: 0; bottom: 0; text-align: right; align-items: flex-end; }
.s4 .step-btn { left: 0; bottom: 0; }
.s1 .tag .v { color: var(--scout); } .s2 .tag .v { color: var(--sign); } .s3 .tag .v { color: var(--supply); } .s4 .tag .v { color: var(--learn); }
.badge-dev {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .2rem; font-family: var(--mono); font-size: .6875rem; color: var(--supply);
}
.badge-dev::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--supply); animation: pulse 2.4s var(--ease) infinite; }

.step-desc {
  position: absolute; left: 50%; top: 50%; width: 52%; transform: translate(-50%, -46%); text-align: center; margin: 0;
  font-size: clamp(.8125rem, 2.6vw, 1.0625rem); line-height: 1.4; color: var(--text); opacity: 0; transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
.step-desc .k { display: block; font-family: var(--mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .45rem; }
.s1 .step-desc .k { color: var(--scout); } .s2 .step-desc .k { color: var(--sign); } .s3 .step-desc .k { color: var(--supply); } .s4 .step-desc .k { color: var(--learn); }
.step.is-active .step-desc { opacity: 1; transform: translate(-50%, -50%); }

/* ---------- Product section ---------- */
.product { padding: var(--sec-y) 0; border-bottom: 1px solid var(--line); position: relative; }
.p-head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.p-eyebrow { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; font-family: var(--mono); font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.scout .p-eyebrow .v { color: var(--scout); }
.badge-live {
  display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .6rem; border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: .6875rem; letter-spacing: .1em; color: var(--text);
}
.badge-live::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--learn); }
.p-head h2 { font-size: clamp(2.4rem, 7vw, 4.75rem); margin: 0; }
.p-lead { font-size: clamp(1.125rem, 2.2vw, 1.375rem); color: var(--text-muted); max-width: 40rem; margin: 0; }

.facts { list-style: none; margin: 0 0 clamp(3rem, 7vw, 5rem); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.facts li { padding: 1.25rem 0 1.25rem; border-bottom: 1px solid var(--line); display: grid; gap: .25rem; }
.facts li:nth-child(odd) { padding-right: 1rem; }
.facts li:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--line); }
.fact-num { font-family: var(--mono); font-size: clamp(2.25rem, 6vw, 3.5rem); line-height: 1; color: var(--acc, var(--scout)); font-variant-numeric: tabular-nums; }
.fact-label { color: var(--text-muted); font-size: .9375rem; }

.p-grid { display: grid; gap: clamp(3rem, 6vw, 4.5rem); align-items: start; }
.workflow h3 { font-size: 1.375rem; margin-bottom: 1.5rem; letter-spacing: -.02em; }
.steps { list-style: none; margin: 0; padding: 0 0 0 2.75rem; position: relative; counter-reset: s; }
.steps::before { content: ""; position: absolute; left: .95rem; top: .5rem; bottom: .5rem; width: 1px; background: var(--line-strong); transform-origin: top; }
.steps li { position: relative; padding: .55rem 0 .95rem; counter-increment: s; }
.steps li::before {
  content: counter(s, decimal-leading-zero); position: absolute; left: -2.75rem; top: .45rem; width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
  font-family: var(--mono); font-size: .6875rem; color: var(--bg); background: var(--acc, var(--scout)); border-radius: 50%;
}
.steps .st { font-weight: 600; display: block; line-height: 1.35; }

/* Illustration (fictional data, FACTS D7) */
.mock { margin: 0; }
.mock-win { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.mock-bar { display: flex; align-items: center; gap: .4rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
.mock-bar i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--line-strong); }
.mock-tabs { display: flex; gap: .35rem; margin-left: .75rem; font-family: var(--mono); font-size: .6875rem; }
.mock-tabs span { padding: .25rem .55rem; border-radius: 999px; color: var(--text-muted); }
.mock-tabs .on { background: var(--scout-a12); color: var(--scout); }
.mock-body { display: grid; gap: 1px; background: var(--line); }
.mock-map { background: var(--surface-2); padding: .75rem; }
.mock-map svg { width: 100%; height: auto; display: block; }
.map-grid { stroke: var(--line); stroke-width: 1; }
.map-route { fill: none; stroke: var(--scout); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 520; stroke-dashoffset: 0; }
.map-stop { fill: var(--surface); stroke: var(--scout); stroke-width: 2; }
.map-stop-n { fill: var(--text); font-family: var(--mono); font-size: 9px; text-anchor: middle; dominant-baseline: central; }
.map-here { fill: var(--scout); transform-box: fill-box; transform-origin: center; animation: pulse 2.4s var(--ease) infinite; }
.mock-list { background: var(--surface); padding: .9rem; display: grid; gap: .6rem; }
.row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; padding: .55rem .65rem; border-radius: 10px; background: var(--surface-2); }
.row .dot { width: .6rem; height: .6rem; border-radius: 50%; }
.row .bars { display: grid; gap: .3rem; }
.row .bars i { display: block; height: .4rem; border-radius: 4px; background: var(--line-strong); }
.row .bars i + i { width: 60%; background: var(--line); }
.row .chip { font-family: var(--mono); font-size: .625rem; color: var(--text-muted); border: 1px solid var(--line); border-radius: 999px; padding: .1rem .5rem; }
.d-a { background: var(--scout); } .d-m { background: var(--line-strong); }
.stages { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; margin-top: .2rem; }
.stages i { height: .35rem; border-radius: 2px; background: var(--line); }
.stages i.f { background: var(--scout); }
.checkin { display: inline-flex; align-items: center; gap: .45rem; justify-self: start; font-family: var(--mono); font-size: .75rem; color: var(--bg); background: var(--scout); border-radius: 999px; padding: .35rem .8rem; }
.mock figcaption { margin-top: .75rem; font-family: var(--mono); font-size: .75rem; color: var(--text-muted); }

/* ---------- Generic section head ---------- */
.section { padding: var(--sec-y) 0; border-bottom: 1px solid var(--line); }
.s-head { display: grid; gap: 1rem; margin-bottom: clamp(2.5rem, 6vw, 4rem); max-width: 48rem; }
.s-label { font-family: var(--mono); font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.s-head h2, .why-text h2, .about h2, .contact-grid h2, .teaser h2 { font-size: clamp(2rem, 5.2vw, 3.5rem); margin: 0; }
.s-label + h2 { margin-top: 1rem; }
.why-text h2, .contact-grid h2 { margin-bottom: 1.25rem; }
.s-lead { font-size: clamp(1.0625rem, 2vw, 1.25rem); color: var(--text-muted); margin: 0; }

/* ---------- Placeholder for open decisions (FACTS D5/D6) — deliberately visible ---------- */
mark.tbd {
  display: inline-flex; align-items: center; gap: .35rem; font-family: var(--mono); font-size: .75rem; letter-spacing: .04em;
  color: var(--text); background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: 6px; padding: .15rem .5rem;
}
mark.tbd::before { content: "TBD"; font-size: .625rem; letter-spacing: .12em; color: var(--bg); background: var(--learn); border-radius: 3px; padding: 0 .3rem; }

/* ---------- Suite cards (home: lifecycle + products) ---------- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.card {
  --acc: var(--text); position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: .9rem; padding: 1.5rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; isolation: isolate;
  transition: border-color .3s var(--ease), transform .4s var(--ease);
}
.card::before { /* pointer spotlight (suite.js sets --mx/--my; pointer devices only) */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s var(--ease);
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 0%), var(--glow), transparent 70%);
}
.card:hover { border-color: var(--line-strong); }
.card:hover::before { opacity: 1; }
.card.c-scout { --acc: var(--scout); } .card.c-sign { --acc: var(--sign); } .card.c-supply { --acc: var(--supply); } .card.c-learn { --acc: var(--learn); }
.card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.card-top .v { color: var(--acc); }
.card h3 { font-size: clamp(1.5rem, 3vw, 1.875rem); margin: 0; }
.card p { color: var(--text-muted); margin: 0; }
.card .chips { display: flex; flex-wrap: wrap; gap: .4rem; align-self: end; }
.chip { display: inline-flex; align-items: center; min-height: 1.75rem; font-family: var(--mono); font-size: .75rem; color: var(--text); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 .65rem; }
.card-link { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; font-weight: 600; text-decoration: none; color: var(--text); justify-self: start; }
.card-link::after { content: "→"; font-family: var(--mono); color: var(--acc); transition: transform .25s var(--ease); }
.card-link:hover::after { transform: translateX(4px); }
.card-link::before { content: ""; position: absolute; inset: 0; } /* whole card clickable, one link in the a11y tree */
.status { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--line-strong); border-radius: 999px; padding: .15rem .55rem; font-size: .6875rem; letter-spacing: .1em; color: var(--text); }
.status::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--learn); }
.status.dev::before { background: var(--supply); animation: pulse 2.4s var(--ease) infinite; }
.mini { height: 5.5rem; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.mini svg { width: 100%; height: 100%; display: block; }
.mini .ln { stroke: var(--line-strong); stroke-width: 2; stroke-linecap: round; fill: none; }
.mini .ac { fill: var(--acc); } .mini .acs { stroke: var(--acc); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mini .mu { fill: var(--line-strong); } .mini .bgf { fill: var(--surface); }
.card.c-scout .card-link { view-transition-name: vt-scout; }
.card.c-sign .card-link { view-transition-name: vt-sign; }
.card.c-supply .card-link { view-transition-name: vt-supply; }
.card.c-learn .card-link { view-transition-name: vt-learn; }

/* ---------- Why / principles / about ---------- */
.why-grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
.why-text p:not(.s-label) { font-size: clamp(1.0625rem, 2vw, 1.25rem); color: var(--text-muted); max-width: 40rem; }
.principles { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.principles li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.principles .ic { width: 2.5rem; height: 2.5rem; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--text); }
.principles .ic svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.principles h3 { font-size: 1.125rem; margin: .1rem 0 .25rem; letter-spacing: -.01em; }
.principles p { margin: 0; color: var(--text-muted); font-size: .9375rem; }
.about { display: grid; gap: 1.25rem; }
.about > * { max-width: 46rem; }
.about p:not(.s-label) { font-size: clamp(1.125rem, 2.2vw, 1.375rem); color: var(--text-muted); margin: 0; }
.about .btn { justify-self: start; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: 2.5rem; }
.contact-lead { color: var(--text-muted); font-size: clamp(1.125rem, 2.2vw, 1.375rem); }
.mail-link { font-family: var(--mono); display: inline-flex; align-items: center; min-height: 44px; }
.form { display: grid; gap: 1rem; }
.field { display: grid; gap: .35rem; }
.field label { font-size: .9375rem; color: var(--text-muted); }
.field input, .field textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 10px; padding: .8rem .9rem; min-height: 48px;
}
.field textarea { min-height: 10rem; resize: vertical; }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.6em; margin: 0; }
.form-status.ok { color: var(--learn); }
.form-status.err { color: var(--scout); }

/* ---------- Product pages ---------- */
.p-hero { padding: clamp(3rem, 8vw, 5.5rem) 0 var(--sec-y); border-bottom: 1px solid var(--line); }
.p-hero-grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
.p-hero h1 { font-size: clamp(2.75rem, 8vw, 5.25rem); margin: 1.25rem 0 1.25rem; }
.p-hero .p-lead { margin-bottom: 2rem; }
.pg-scout { --acc: var(--scout); } .pg-sign { --acc: var(--sign); } .pg-supply { --acc: var(--supply); } .pg-learn { --acc: var(--learn); }
.pg-scout .p-hero h1 { view-transition-name: vt-scout; } .pg-sign .p-hero h1 { view-transition-name: vt-sign; }
.pg-supply .p-hero h1 { view-transition-name: vt-supply; } .pg-learn .p-hero h1 { view-transition-name: vt-learn; }
.p-eyebrow .v { color: var(--acc); }
.problems { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.problems li { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--text-muted); }
.problems li::before { content: "—"; display: block; font-family: var(--mono); color: var(--acc); margin-bottom: .5rem; }
.caps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; counter-reset: c; }
.caps li { background: var(--surface); padding: 1.25rem 1.25rem 1.4rem; counter-increment: c; display: grid; gap: .45rem; align-content: start; }
.caps li::before { content: counter(c, decimal-leading-zero); font-family: var(--mono); font-size: .75rem; color: var(--acc); }
.caps .opt { font-family: var(--mono); font-size: .6875rem; color: var(--text-muted); }
.access { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.next { display: grid; gap: .5rem; padding: clamp(2rem, 5vw, 3rem); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); text-decoration: none; position: relative; }
.next .s-label .v { color: var(--acc); }
.next strong { font-size: clamp(1.75rem, 4.5vw, 2.75rem); letter-spacing: -.03em; font-weight: 600; line-height: 1.1; }
.next strong::after { content: " →"; font-family: var(--mono); font-weight: 400; color: var(--acc); }
.next:hover { border-color: var(--line-strong); }
.teaser { display: grid; gap: 1.5rem; }
.teaser > * { max-width: 46rem; }
.teaser p:not(.s-label) { font-size: clamp(1.125rem, 2.2vw, 1.375rem); color: var(--text-muted); margin: 0; }
.tbd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.tbd-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.tbd-list .k { font-weight: 600; min-width: 8rem; }

/* Sign illustration */
.doc { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1; }
.doc-ln { stroke: var(--line-strong); stroke-width: 3; stroke-linecap: round; }
.doc-ln.s { stroke: var(--line); }
.sig { fill: none; stroke: var(--sign); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 260; stroke-dashoffset: 0; }
.seal { fill: var(--sign); } .seal-ck { fill: none; stroke: var(--bg); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.scan-hit { fill: var(--sign); } .scan-row { fill: var(--surface-2); }
/* Supply illustration */
.stock-bar { fill: var(--supply); } .stock-bg { fill: var(--surface-2); }

.h3like { font-size: 1.375rem; margin-bottom: 1.5rem; letter-spacing: -.02em; }
.sign-chip { background: var(--sign); }
.mini-lg { height: auto; aspect-ratio: 16 / 9; width: 100%; max-width: 34rem; justify-self: center; }

/* ---------- Legal pages & 404 ---------- */
.legal { padding: clamp(3rem, 8vw, 5rem) 0 var(--sec-y); }
.legal .container { max-width: 48rem; }
.legal h1 { font-size: clamp(1.75rem, 6.5vw, 3.25rem); margin-bottom: 2rem; }
.legal h2 { font-size: 1.25rem; margin: 2rem 0 .6rem; letter-spacing: -.01em; }
.legal p { color: var(--text-muted); }
.legal-note { border-left: 2px solid var(--line-strong); padding-left: 1rem; }
.nf { padding: var(--sec-y) 0; }
.nf h1 { font-size: clamp(2.4rem, 7vw, 4.5rem); }
.nf p { color: var(--text-muted); max-width: 36rem; }

/* ---------- Scroll-driven reveals (CSS first, IntersectionObserver fallback in suite.js) ---------- */
@supports (animation-timeline: view()) {
  .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
  .steps::before { animation: draw linear both; animation-timeline: view(); animation-range: entry 10% cover 55%; }
  .map-route { animation: route linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  .sig { animation: sig linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
}
@supports not (animation-timeline: view()) {
  .js .reveal { transform: translateY(18px); transition: transform .7s var(--ease); }
  .js .reveal.in { transform: none; }
}

@keyframes rise { from { transform: translateY(28px); } to { transform: none; } } /* movement only: text is never semi-transparent (WCAG contrast at any scroll position) */
@keyframes draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes route { from { stroke-dashoffset: 520; } to { stroke-dashoffset: 0; } }
@keyframes sig { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } }

/* ---------- Footer ---------- */
.site-footer { padding: 2.25rem 0; color: var(--text-muted); font-size: .9375rem; }
.site-footer .container { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; align-items: center; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.site-footer .credit { flex-basis: 100%; }

/* ---------- Breakpoints ---------- */
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .problems { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .principles li { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr 1.2fr; gap: 4rem; }
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .facts li, .facts li:nth-child(odd), .facts li:nth-child(even) { padding: 1.5rem 1.25rem; border-left: 1px solid var(--line); }
  .facts li:first-child { border-left: 0; padding-left: 0; }
  .mock-body { grid-template-columns: 1.1fr 1fr; }
  .site-footer .credit { flex-basis: auto; margin-left: auto; }
}
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .caps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-hero-grid { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: .9fr 1.1fr; align-items: start; }
  .hero-grid { grid-template-columns: 1.2fr 1fr; }
  .p-head { grid-template-columns: 1fr auto; align-items: end; column-gap: 3rem; }
  .p-head > * { grid-column: 1; }
  .p-head > .btn { grid-column: 2; grid-row: 1 / span 4; align-self: end; }
  .p-grid { grid-template-columns: .9fr 1.1fr; }
}
@media (min-width: 1440px) {
  :root { --maxw: 84rem; }
}

/* ---------- Reduced motion: static final states, no loops, no smooth scroll ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}