/**
 * @file site.css
 * @brief The whole stylesheet of the public website (stackeo.ai), light only (DIR-0053), self contained so the built
 *        folder deploys as is (no link to ../auth.css: production cannot reach the prototypes folder).
 * @remarks Colour values restate the light tokens of prototypes/auth.css (validated sign in recipe, D-0029) and the
 *          brand direction of D-0020 (smoke white, obsidian, the cube's teal). Type is Satoshi, self hosted under the
 *          ITF FFL (branding/fonts/satoshi/README.md). Motion follows the study of README.md section 1: expo out
 *          (.16,1,.3,1) for things that arrive, Harvey's in out (.7,0,.3,1) for crossfades, linear only for progress.
 *          Rules that keep the page stable: only `transform`, `opacity` and `clip-path` are animated, nothing is
 *          hidden unless script runs and motion is allowed, and every animation has a reduced motion branch.
 *          No inline style attribute exists in the HTML (the CSP forbids them), so staggers use :nth-child.
 */

@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #fafaf9;
  --surface: #ffffff;
  --surface-2: #f3f3f1;
  --text: #121212;
  --muted: #5b605f;
  --hair: rgb(18 18 18 / 0.08);
  --hair-strong: rgb(18 18 18 / 0.16);
  --edge: #737877;
  --ink: #121212;
  --on-ink: #ffffff;
  --accent: #2b6461;
  --accent-soft: #e6efee;
  --obsidian: #141615;
  --on-dark: #f4f4f2;
  --on-dark-muted: #b9bebc;
  --glass: rgb(250 250 249 / 0.78);
  --shadow-1: 0 1px 2px rgb(18 18 18 / 0.05);
  --shadow-2: 0 1px 2px rgb(18 18 18 / 0.05), 0 18px 48px rgb(18 18 18 / 0.08);
  --shadow-menu: 0 1px 2px rgb(18 18 18 / 0.06), 0 12px 32px rgb(18 18 18 / 0.12);
  --radius: 16px;
  --radius-s: 10px;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1280px;
  --max-wide: 1376px;
  --section: clamp(88px, 10vw, 152px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.7, 0, 0.3, 1);
  --ease-soft: cubic-bezier(0.3, 0.3, 0.3, 1);
  --t-hover: 180ms;
  --t-menu: 360ms;
  --t-fade: 500ms;
  --t-reveal: 300ms;
  --ease-reveal: cubic-bezier(0.2, 0, 0, 1);
  --f-display: clamp(2.6rem, 1.45rem + 4.1vw, 4.75rem);
  --f-h2: clamp(2rem, 1.35rem + 2.2vw, 3.25rem);
  --f-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --f-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  --header-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 420;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 540; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent-soft); }

.skip {
  position: absolute; left: 12px; top: -64px; z-index: 100;
  background: var(--ink); color: var(--on-ink); padding: 10px 16px; border-radius: 999px; text-decoration: none;
}
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.wrap-wide { width: min(100% - 2 * var(--gutter), var(--max-wide)); margin-inline: auto; }
.section { padding-block: var(--section) 0; }
.section:last-of-type { padding-bottom: var(--section); }

/* ---------- Type ---------- */
.display { font-size: var(--f-display); line-height: 1.02; letter-spacing: -0.038em; font-weight: 540; }
.h2 { font-size: var(--f-h2); line-height: 1.06; letter-spacing: -0.032em; }
.h3 { font-size: var(--f-h3); line-height: 1.2; letter-spacing: -0.015em; }
.lead { font-size: var(--f-lead); line-height: 1.5; color: var(--muted); max-width: 40rem; }
.eyebrow { font-size: 0.875rem; font-weight: 560; color: var(--muted); letter-spacing: 0; margin-bottom: 18px; }
.eyebrow a { text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }
.two-tone .soft { color: var(--muted); }
.small { font-size: 0.875rem; color: var(--muted); }
.link {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 560; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--t-menu) var(--ease-out);
  padding-bottom: 2px;
}
.link:hover, .link:focus-visible { background-size: 100% 1px; }
.link .arr { transition: transform var(--t-menu) var(--ease-out); }
.link:hover .arr, .link:focus-visible .arr { transform: translateX(3px); }
.u { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- Buttons ---------- */
.btn {
  --h: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 8px 0 20px; border-radius: 999px;
  font-weight: 560; font-size: 0.9875rem; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--t-hover) var(--ease-soft), border-color var(--t-hover) var(--ease-soft), color var(--t-hover) var(--ease-soft);
}
.btn-ink { background: var(--ink); color: var(--on-ink); }
.btn-ink:hover { background: #2a2a2a; }
.btn-line { background: var(--surface); border-color: var(--hair-strong); color: var(--text); padding: 0 20px; }
.btn-line:hover { border-color: var(--edge); }
.btn-light { background: var(--on-dark); color: var(--obsidian); }
.btn-light:hover { background: #ffffff; }
.btn-s { --h: 38px; font-size: 0.9375rem; padding: 0 6px 0 16px; }
.chip {
  position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; overflow: hidden;
  background: rgb(255 255 255 / 0.14);
}
.btn-light .chip { background: rgb(18 18 18 / 0.08); }
.btn-s .chip { width: 26px; height: 26px; }
.chip svg { width: 14px; height: 14px; transition: transform var(--t-menu) var(--ease-out); }
.chip svg + svg { position: absolute; transform: translateX(-160%); }
.btn:hover .chip svg:first-child, .btn:focus-visible .chip svg:first-child { transform: translateX(160%); }
.btn:hover .chip svg + svg, .btn:focus-visible .chip svg + svg { transform: translateX(0); }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  transition: transform 640ms var(--ease-out);
}
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--glass); backdrop-filter: blur(16px) saturate(1.35); -webkit-backdrop-filter: blur(16px) saturate(1.35);
  border-bottom: 1px solid transparent; transition: border-color var(--t-menu) var(--ease-soft);
}
.header.is-scrolled::before { border-bottom-color: var(--hair); }
.header.is-away { transform: translateY(-100%); }
.header-in { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 1.1875rem; letter-spacing: -0.02em; }
.brand img { width: 26px; height: 26px; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav > li { list-style: none; position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; border-radius: 999px;
  border: 0; background: none; cursor: pointer; text-decoration: none; font-size: 0.9375rem; font-weight: 500; color: var(--text);
  transition: background-color var(--t-hover) var(--ease-soft);
}
.nav-link:hover, .nav-link[aria-expanded="true"] { background: rgb(18 18 18 / 0.05); }
.nav-link[aria-current="page"] { font-weight: 620; }
.nav-link .chev { width: 12px; height: 12px; transition: transform var(--t-menu) var(--ease-out); }
.nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }
.header-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.lang {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 8px; border-radius: 999px;
  text-decoration: none; font-size: 0.875rem; font-weight: 560; border: 1px solid var(--hair-strong); background: var(--surface);
  transition: border-color var(--t-hover) var(--ease-soft);
}
.lang:hover { border-color: var(--edge); }
.flag { width: 18px; height: 18px; border-radius: 999px; overflow: hidden; flex: none; box-shadow: 0 0 0 1px rgb(18 18 18 / 0.1); }
.signin { font-size: 0.9375rem; font-weight: 520; text-decoration: none; padding: 0 10px; height: 36px; display: inline-flex; align-items: center; border-radius: 999px; }
.signin:hover { background: rgb(18 18 18 / 0.05); }
.header .menu-btn { display: none; }

/* Dropdown: opaque (DIR-0046), opened on click or Enter, never on hover (D-0033). */
.drop {
  position: absolute; top: calc(100% + 10px); left: -8px; min-width: 300px; padding: 8px;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; box-shadow: var(--shadow-menu);
}
.drop[hidden] { display: none; }
.drop a { display: grid; grid-template-columns: 28px 1fr; gap: 2px 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; }
.drop a:hover, .drop a:focus-visible { background: var(--surface-2); }
.drop .ico { grid-row: span 2; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); }
.drop .ico svg { width: 16px; height: 16px; }
.drop b { font-weight: 560; font-size: 0.9375rem; }
.drop span:not(.ico) { font-size: 0.8125rem; color: var(--muted); line-height: 1.4; }

/* Phone sheet (a native dialog: focus trap and Escape come with it). */
.sheet {
  width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--bg); color: var(--text);
}
.sheet::backdrop { background: transparent; }
.sheet-in { display: flex; flex-direction: column; height: 100%; padding: 0 var(--gutter) 24px; }
.sheet-top { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; }
.sheet nav ul { list-style: none; display: grid; gap: 2px; margin-top: 16px; }
.sheet nav a { display: block; padding: 10px 0; font-size: 1.75rem; font-weight: 540; letter-spacing: -0.025em; text-decoration: none; }
.sheet nav .sub a { font-size: 1.125rem; font-weight: 480; color: var(--muted); padding: 6px 0 6px 16px; }
.sheet-end { margin-top: auto; display: grid; gap: 10px; }
.sheet-end .btn { width: 100%; }
.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--hair-strong);
  background: var(--surface); cursor: pointer;
}
.icon-btn svg { width: 18px; height: 18px; }

/* ---------- Hero ---------- */
.hero { padding-top: calc(var(--header-h) + clamp(48px, 7vw, 104px)); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: end; }
.hero-side { display: grid; gap: 28px; justify-items: start; padding-bottom: 8px; }
.hero-side .lead { color: #3d4241; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-note { font-size: 0.875rem; color: var(--muted); }
.hero-solo { max-width: 52rem; display: grid; gap: 24px; justify-items: start; }

/* The product shown over a photograph, cropped at the bottom (study: Harvey's hero and solution panels). */
.stage {
  position: relative; margin-top: clamp(40px, 6vw, 72px); border-radius: var(--radius); overflow: hidden;
  background: #dfe2e0; isolation: isolate;
}
.stage-photo { position: absolute; inset: 0; z-index: -1; }
.stage-photo img { width: 100%; height: 100%; object-fit: cover; }
.stage-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(20 22 21 / 0.18), rgb(20 22 21 / 0.04)); }
.stage-in { padding: clamp(20px, 4.6vw, 64px) clamp(16px, 4.6vw, 64px) 0; }
.screen {
  position: relative; border-radius: 12px 12px 0 0; overflow: hidden; background: var(--surface);
  box-shadow: 0 0 0 1px rgb(18 18 18 / 0.08), 0 24px 64px rgb(18 18 18 / 0.22);
  aspect-ratio: 2880 / 1560;
}
.screen picture { display: block; height: 100%; }
.screen img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.screen.crop { aspect-ratio: 16 / 10; }
.stage-h { aspect-ratio: auto; }
.stage-crop .screen { aspect-ratio: 2880 / 1240; }

/* ---------- Section heads ---------- */
.head { display: grid; gap: 18px; max-width: 46rem; }
.head-center { margin-inline: auto; text-align: center; justify-items: center; }
.head-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 48px; align-items: end; max-width: none; }

/* ---------- Built on (proof of providers, C46) ---------- */
.built {
  background: var(--obsidian); color: var(--on-dark); border-radius: var(--radius);
  padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 32px; align-items: center;
}
.built h2 { font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1.25; }
.built p { color: var(--on-dark-muted); font-size: 0.9375rem; margin-top: 10px; }
/* A wrapping row whose items grow: every line is full, so no empty cell can appear at any width. */
.built ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1px; background: rgb(255 255 255 / 0.1); border-radius: 12px; overflow: hidden; }
.built li { flex: 1 1 110px; background: var(--obsidian); min-height: 92px; display: grid; place-content: center; gap: 4px; padding: 14px 12px; text-align: center; }
.built li b { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--on-dark); }
.built li span { font-size: 0.8125rem; color: var(--on-dark-muted); line-height: 1.35; }

/* ---------- Two panels (accounting and law) ---------- */
.panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.panel {
  position: relative; border-radius: var(--radius); overflow: hidden; isolation: isolate; color: var(--on-dark);
  display: flex; flex-direction: column; min-height: 640px; background: var(--obsidian);
}
.panel-photo { position: absolute; inset: 0; z-index: -1; }
.panel-photo img { width: 100%; height: 100%; object-fit: cover; }

.panel-text { padding: clamp(24px, 3.4vw, 40px); display: grid; gap: 14px; justify-items: start; max-width: 32rem; }
.panel-text p { color: #dfe3e1; }
.panel-shot { margin-top: auto; padding-left: clamp(24px, 3.4vw, 40px); }
.panel .stage-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(14 16 15 / 0.92) 0%, rgb(14 16 15 / 0.8) 42%, rgb(14 16 15 / 0.5) 100%); }
.panel-shot .screen { border-radius: 12px 0 0 0; }
.panel .btn { margin-top: 6px; }

/* ---------- Tour (accordion with a progress line, study: Harvey's 7.5 s) ---------- */
.tour { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); gap: clamp(28px, 4vw, 64px); margin-top: clamp(40px, 5vw, 64px); align-items: start; }
.steps { display: grid; border-top: 1px solid var(--hair-strong); }
.step-btn {
  position: relative; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--hair-strong); cursor: pointer;
  padding: 20px 0; display: flex; align-items: baseline; gap: 14px; font-size: var(--f-h3); font-weight: 540; letter-spacing: -0.015em; color: var(--muted);
  transition: color var(--t-hover) var(--ease-soft);
}
.step-btn .n { font-size: 0.875rem; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 560; }
.step-btn:hover, .step-btn.is-active { color: var(--text); }
.captions { display: grid; margin-top: 22px; }
.caption { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--t-fade) var(--ease-in-out), transform 700ms var(--ease-out), visibility 0s linear var(--t-fade); }
.caption.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.caption p { color: #3d4241; max-width: 30rem; }
.bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--text); transform-origin: left; transform: scaleX(0); }
.tour-ctrl { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.tour-ctrl button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--hair-strong); background: var(--surface); height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer; font-size: 0.875rem; font-weight: 520; }
.tour-ctrl button svg { width: 14px; height: 14px; }
.views { position: relative; display: grid; border-radius: var(--radius); overflow: hidden; background: #dfe2e0; isolation: isolate; }
.views .stage-photo::after { background: rgb(20 22 21 / 0.12); }
.view { grid-area: 1 / 1; padding: clamp(18px, 3vw, 40px) 0 0 clamp(18px, 3vw, 40px); transition: opacity var(--t-fade) var(--ease-in-out), transform 700ms var(--ease-out), visibility 0s linear var(--t-fade); }
.view:not(.is-active) { opacity: 0; visibility: hidden; transform: scale(0.985); }
.view.is-active { transition-delay: 0s; }
.view .screen { border-radius: 12px 0 0 0; aspect-ratio: 16 / 10; }

/* Connectors view: a static recreation of prototypes/workspace Customize, Connectors (README section 3). */
.screen { container-type: inline-size; }
.cx { position: absolute; inset: 0; padding: clamp(12px, 3.4cqi, 28px); font-size: clamp(8.5px, 1.75cqi, 13px); line-height: 1.45; color: var(--text); background: var(--surface); overflow: hidden; }
.cx-title { font-size: 1.7em; font-weight: 560; letter-spacing: -0.02em; }
.cx-sub { color: var(--muted); margin-top: 2px; }
.cx-tabs { display: flex; gap: 18px; margin: 14px 0 12px; border-bottom: 1px solid var(--hair); font-weight: 520; color: var(--muted); }
.cx-tabs span { padding-bottom: 8px; white-space: nowrap; }
.cx-tabs span:first-child { color: var(--text); box-shadow: inset 0 -2px 0 var(--text); }
.cx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cx-card { border: 1px solid var(--hair); border-radius: 12px; padding: 0.9em; display: grid; grid-template-columns: 2.3em 1fr; gap: 2px 10px; }
.cx-mono { grid-row: span 3; width: 2.3em; height: 2.3em; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; font-weight: 620; font-size: 13px; border: 1px solid var(--hair); }
.cx-name { font-weight: 600; }
.cx-by { color: var(--muted); font-size: 0.92em; }
.cx-state { grid-column: 2; display: flex; gap: 6px; align-items: center; color: #2b5e45; font-size: 0.92em; margin-top: 4px; }
.cx-state svg { width: 1em; height: 1em; flex: none; }
.cx-card.err { border-color: #e7c4bf; background: #fdf7f6; }
.cx-card.err .cx-state { color: #9e3326; }
.cx-fix { grid-column: 2; justify-self: start; margin-top: 6px; border: 1px solid var(--hair-strong); border-radius: 999px; padding: 3px 10px; font-weight: 560; font-size: 0.92em; background: var(--surface); }

/* ---------- Pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); margin-top: clamp(40px, 5vw, 64px); list-style: none; }
.pillars li { border-top: 1px solid var(--hair-strong); padding-top: 22px; display: grid; gap: 10px; align-content: start; }
.pillars p { color: #3d4241; }
.icon { width: 28px; height: 28px; color: var(--accent); }
.icon path, .icon circle, .icon rect, .icon line, .icon polyline { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* ---------- Use cases (how firms use it) ---------- */
.uses { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(32px, 4vw, 56px); }
.use { background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; padding: 22px; display: grid; gap: 8px; align-content: start; transition: border-color var(--t-hover) var(--ease-soft), box-shadow var(--t-menu) var(--ease-out); }
.use:hover { border-color: var(--hair-strong); box-shadow: var(--shadow-2); }
.use h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.use p { color: var(--muted); font-size: 0.9375rem; }
.use .tag { font-size: 0.75rem; font-weight: 600; color: var(--accent); }

/* ---------- Feature rows (product page) ---------- */
.feature { display: grid; grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(48px, 6vw, 96px); }
.feature:nth-child(even) { grid-template-columns: minmax(0, 0.6fr) minmax(0, 0.4fr); }
.feature:nth-child(even) .feature-text { order: 2; }
.feature-text { display: grid; gap: 14px; justify-items: start; }
.feature-text p { color: #3d4241; }
.feature-text ul { list-style: none; display: grid; gap: 8px; margin-top: 4px; }
.feature-text li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 0.9375rem; color: #3d4241; }
.feature-text li svg { width: 16px; height: 16px; margin-top: 4px; color: var(--accent); }
.feature .views { min-height: 0; }

/* ---------- Security list (study: Harvey's certification rows; ours are facts gated by the register) ---------- */
.trust { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.trust-head { display: grid; gap: 18px; justify-items: start; position: sticky; top: calc(var(--header-h) + 32px); }
.facts { list-style: none; border-top: 1px solid var(--hair-strong); }
.facts li { border-bottom: 1px solid var(--hair-strong); display: grid; grid-template-columns: 40px 1fr; gap: 4px 16px; padding: 20px 0; }
.facts .icon { grid-row: span 2; width: 26px; height: 26px; margin-top: 2px; }
.facts b { font-weight: 600; letter-spacing: -0.01em; }
.facts span { color: var(--muted); font-size: 0.9375rem; }

/* ---------- Data path (security page): the line grows to the step in view ---------- */
.path { list-style: none; position: relative; margin-top: clamp(40px, 5vw, 64px); display: grid; gap: 0; max-width: 52rem; }
.path::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 1px; background: var(--hair-strong); }
.path-line { position: absolute; left: 19px; top: 20px; bottom: 20px; width: 1px; background: var(--accent); transform-origin: top; transform: scaleY(1); transition: transform 700ms var(--ease-out); }
.path li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 20px; padding: 0 0 36px; }
.path .dot { width: 40px; height: 40px; border-radius: 999px; background: var(--surface); border: 1px solid var(--hair-strong); display: grid; place-items: center; font-weight: 600; font-size: 0.875rem; position: relative; z-index: 1; transition: background-color var(--t-fade) var(--ease-soft), color var(--t-fade) var(--ease-soft), border-color var(--t-fade) var(--ease-soft); }
.path li.is-on .dot { background: var(--accent); color: #fff; border-color: var(--accent); }
.path h3 { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; padding-top: 7px; }
.path p { color: #3d4241; margin-top: 6px; max-width: 40rem; }
.path .where { display: inline-block; margin-top: 10px; font-size: 0.8125rem; font-weight: 560; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 3px 10px; }

/* ---------- FAQ (study: NewGenesis's FAQ motion principles, our own component) ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq-groups { display: grid; gap: 36px; }
.faq-group h3 { font-size: 0.875rem; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.qa { border-bottom: 1px solid var(--hair-strong); }
.qa:first-of-type { border-top: 1px solid var(--hair-strong); }
.qa summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; gap: 16px; align-items: center;
  padding: 18px 0; font-weight: 560; font-size: 1.0625rem; letter-spacing: -0.01em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa .pm { width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--hair-strong); display: grid; place-items: center; transition: background-color var(--t-hover) var(--ease-soft), transform var(--t-menu) var(--ease-out); }
.qa .pm svg { width: 12px; height: 12px; }
.qa .pm .v { transform-origin: center; transition: transform var(--t-menu) var(--ease-out); }
.qa[open] .pm { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.qa[open] .pm .v { transform: scaleY(0); }
.qa summary:hover .pm { border-color: var(--edge); }
.qa-a { overflow: hidden; }
.qa-a > div { padding: 0 44px 22px 0; color: #3d4241; display: grid; gap: 10px; }

/* ---------- Closing band ---------- */
.closing { position: relative; border-radius: var(--radius); overflow: hidden; isolation: isolate; color: var(--on-dark); background: var(--obsidian); }
.closing .stage-photo::after { background: linear-gradient(90deg, rgb(14 16 15 / 0.9) 0%, rgb(14 16 15 / 0.7) 55%, rgb(14 16 15 / 0.42) 100%); }
.closing-in { padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px); display: grid; gap: 22px; justify-items: start; max-width: 44rem; }
.closing p { color: #dfe3e1; }

.prose { max-width: 46rem; }
.prose h2 { font-size: 1.75rem; letter-spacing: -0.025em; line-height: 1.15; margin: 56px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.1875rem; margin: 28px 0 8px; }
.prose p, .prose li { color: #2f3332; }
.prose p + p { margin-top: 14px; }
.prose ul, .prose ol { padding-left: 20px; display: grid; gap: 8px; margin: 12px 0; }
.prose .tw { overflow-x: auto; margin: 16px 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.prose th { font-weight: 600; }
.prose code { font-size: 0.875em; background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }
.prose .note { background: var(--surface-2); border-radius: 12px; padding: 14px 16px; margin-bottom: 24px; }
.posts { list-style: none; display: grid; gap: 0; margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--hair-strong); }
.post { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--hair-strong); }
.post time { color: var(--muted); font-size: 0.9375rem; }
.post h2 { font-size: 1.75rem; letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 12px; }
.post .prose p { color: #3d4241; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.expect { list-style: none; display: grid; gap: 18px; margin-top: 32px; }
.expect li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; }
.expect .num { width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--hair-strong); display: grid; place-items: center; font-size: 0.875rem; font-weight: 600; }
.expect p { color: var(--muted); font-size: 0.9375rem; }
.book { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius); padding: clamp(20px, 3vw, 36px); box-shadow: var(--shadow-1); }
/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--hair); padding: 56px 0 32px; font-size: 0.9375rem; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 0.6fr)); gap: 32px; }
.footer-top p { color: var(--muted); max-width: 22rem; margin-top: 12px; }
.footer h2 { font-size: 0.8125rem; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.footer ul { list-style: none; display: grid; gap: 8px; }
.footer ul a { text-decoration: none; }
.footer ul a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-end { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; color: var(--muted); font-size: 0.8125rem; }

/* ---------- Review aids (never in the published look) ---------- */
.claims-on [data-claim] { outline: 1px dashed #b26b00; outline-offset: 2px; position: relative; }
.claims-on [data-claim]::after { content: attr(data-claim); position: absolute; top: -10px; right: -6px; font: 600 10px/1 ui-monospace, monospace; background: #b26b00; color: #fff; padding: 2px 4px; border-radius: 4px; z-index: 5; }

/* ---------- Motion ----------
   Hero on load: words rise out of masks, then the lead and the actions appear, then the stage settles. CSS only,
   so it runs before any script and never waits for one. Below the fold: [data-reveal] elements are hidden by
   site.js only when they start below the viewport and motion is allowed, then shown once by an observer. */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.w > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .hero-anim .w > span { animation: rise 500ms var(--ease-reveal) both; }
  .hero-anim .w:nth-child(1) > span { animation-delay: 0ms; }
  .hero-anim .w:nth-child(2) > span { animation-delay: 30ms; }
  .hero-anim .w:nth-child(3) > span { animation-delay: 60ms; }
  .hero-anim .w:nth-child(4) > span { animation-delay: 90ms; }
  .hero-anim .w:nth-child(5) > span { animation-delay: 120ms; }
  .hero-anim .w:nth-child(6) > span { animation-delay: 150ms; }
  .hero-anim .w:nth-child(7) > span { animation-delay: 180ms; }
  .hero-anim .w:nth-child(8) > span { animation-delay: 210ms; }
  .hero-anim .w:nth-child(9) > span { animation-delay: 240ms; }
  .hero-anim .w:nth-child(n+10) > span { animation-delay: 270ms; }
  .hero-anim .fade-1 { animation: appear 300ms var(--ease-reveal) 120ms both; }
  .hero-anim .fade-2 { animation: appear 300ms var(--ease-reveal) 180ms both; }
  .hero-anim .fade-3 { animation: appear 300ms var(--ease-reveal) 240ms both; }
  .hero-anim .settle { animation: appear-scale 300ms var(--ease-reveal) 120ms both; }

  [data-reveal].is-pending { opacity: 0; transform: scale(0.97); }
  [data-reveal].is-shown { transition: opacity var(--t-reveal) var(--ease-reveal), transform var(--t-reveal) var(--ease-reveal); }
  [data-stagger].is-pending > * { opacity: 0; transform: scale(0.97); }
  [data-stagger].is-shown > * { transition: opacity var(--t-reveal) var(--ease-reveal), transform var(--t-reveal) var(--ease-reveal); }
  [data-stagger].is-shown > :nth-child(2) { transition-delay: 40ms; }
  [data-stagger].is-shown > :nth-child(3) { transition-delay: 80ms; }
  [data-stagger].is-shown > :nth-child(4) { transition-delay: 120ms; }
  [data-stagger].is-shown > :nth-child(5) { transition-delay: 160ms; }
  [data-stagger].is-shown > :nth-child(6) { transition-delay: 200ms; }
  [data-stagger].is-shown > :nth-child(n+7) { transition-delay: 240ms; }

  .drop.is-opening { animation: unroll var(--t-menu) var(--ease-out) both; }
  .drop.is-opening a { animation: rise-s 420ms var(--ease-out) both; }
  .drop.is-opening a:nth-child(2) { animation-delay: 35ms; }
  .drop.is-opening a:nth-child(3) { animation-delay: 70ms; }
  .drop.is-opening a:nth-child(4) { animation-delay: 105ms; }
  .sheet[open] .sheet-in { animation: unroll 480ms var(--ease-out) both; }
  .sheet[open] nav li { animation: rise-s 560ms var(--ease-out) both; }
  .sheet[open] nav li:nth-child(2) { animation-delay: 40ms; }
  .sheet[open] nav li:nth-child(3) { animation-delay: 80ms; }
  .sheet[open] nav li:nth-child(4) { animation-delay: 120ms; }
  .sheet[open] nav li:nth-child(5) { animation-delay: 160ms; }
  .sheet[open] nav li:nth-child(n+6) { animation-delay: 200ms; }

  /* Icons on hover or focus of their row: the SVG itself turns slightly and lifts, 200 ms (never a stroke redraw,
     Téo's icon rule, MEGA_PROMPT section 4). */
  .redraw .icon { transition: transform 200ms var(--ease-reveal); transform-origin: 50% 50%; }
  .redraw:hover .icon, .redraw:focus-within .icon { transform: rotate(-8deg) scale(1.08); }
}
@keyframes rise { from { transform: translateY(105%); } }
@keyframes rise-s { from { opacity: 0; transform: translateY(8px); } }
@keyframes appear { from { opacity: 0; transform: translateY(10px); } }
@keyframes appear-scale { from { opacity: 0; transform: scale(0.97); } }
@keyframes unroll { from { clip-path: inset(0 0 100% 0 round 14px); } to { clip-path: inset(0 0 0 0 round 14px); } }
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tour.is-auto .step-btn.is-active .bar { animation: progress 7500ms linear both; }
.tour.is-auto.is-held .step-btn.is-active .bar { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .view, .caption, .header, .path-line { transition: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav, .header-end .signin, .header-end .btn { display: none; }
  .header .menu-btn { display: grid; }
  .hero-grid, .head-split, .trust, .faq, .contact, .tour, .feature, .built { grid-template-columns: minmax(0, 1fr); }
  .feature:nth-child(even) .feature-text { order: 0; }
  .trust-head { position: static; }
  .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-top > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .panels, .uses, .pillars, .terms { grid-template-columns: minmax(0, 1fr); }
  .panel { min-height: 0; }
  .panel-shot { margin-top: 8px; }
  .stage .screen, .stage-crop .screen { aspect-ratio: 16 / 10; }
  .post { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lang .code-long { display: none; }
  .stage-crop .screen { aspect-ratio: 4 / 3; }
  .qa-a > div { padding-right: 0; }
}

/* Added with the build: tight sections, the example note under a product view. */
.section-tight { padding-top: clamp(24px, 3vw, 48px); }
.section-tight:last-of-type { padding-bottom: var(--section); }
.caption-note { margin-top: 12px; }
.hero-solo .brand { margin-bottom: 8px; }
.btn .flag { width: 18px; height: 18px; }
.terms-h { margin-top: clamp(72px, 8vw, 120px); }
.terms + .actions { margin-top: 32px; }
main > .hero:last-child { padding-bottom: var(--section); }
.other { margin-top: 28px; max-width: 34rem; }
.hero-grid { row-gap: 28px; }
@media (max-width: 760px) { .hero-grid { gap: 24px; } }
.badge { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; color: #1f4a47; background: var(--accent-soft); border-radius: 999px; padding: 4px 12px 4px 10px; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }
.eyebrow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; }
.eyebrow-row .eyebrow { margin: 0; }
.never { list-style: none; display: grid; gap: 0; margin-top: 32px; border-top: 1px solid var(--hair-strong); max-width: 52rem; }
.never li { border-bottom: 1px solid var(--hair-strong); padding: 16px 0; color: #2f3332; }
.terms-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.terms-cta { margin-top: 40px; }
.mail-cta { margin: 28px 0 14px; }
.contact .book .expect { margin-top: 0; }
.facts-table th { width: 32%; }
@media (max-width: 760px) { .terms-3 { grid-template-columns: minmax(0, 1fr); } .facts-table th { width: auto; } }
@media (max-width: 560px) {
  .built li { flex-basis: 100%; min-height: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: left; padding: 14px 16px; }
  .built li span { text-align: right; }
}

/* ---------- Offers and where the AI runs (DIR-0095) ----------
   Three cards of equal height; Max carries the ink button because the onboarding recommends it (D-0049). The country
   is always written beside its flag. One column under 900 px, where three cards would squeeze the place names. */
.offers { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
.offer { display: flex; flex-direction: column; gap: 20px; background: var(--surface); border: 1px solid var(--hair-strong); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-1); }
.offer-top p { color: var(--muted); margin-top: 6px; }
.offer-price { display: grid; gap: 2px; padding-block: 16px; border-block: 1px solid var(--hair); }
.offer-price b { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.offer-where { display: grid; gap: 16px; margin: 0; }
.offer-where div { display: grid; gap: 6px; }
.offer-where dt { font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.offer-where dd { margin: 0; display: grid; gap: 6px; }
.places { display: flex; flex-wrap: wrap; gap: 8px; }
.place { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px 4px 7px; border-radius: 999px; background: var(--surface-2); font-size: 0.9375rem; font-weight: 560; }
.place .flag { width: 18px; height: 18px; }
.offer-cta { margin-top: auto; padding-top: 4px; }
.offer-cta .btn { width: 100%; justify-content: space-between; }
.offer-rules { display: flex; align-items: center; gap: 10px; margin-top: 24px; color: #2f3332; }
.offer-rules .icon { width: 22px; height: 22px; flex: none; color: var(--accent); }
.offer-note { margin-top: 10px; }
.offers-compact { margin-top: 28px; }
.offer-compact { gap: 14px; padding: 22px; box-shadow: none; }
.offers-compact + .offer-note + p { margin-top: 18px; }
@media (max-width: 900px) { .offers { grid-template-columns: minmax(0, 1fr); } }