/**
 * @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 picture { height: 100%; }
.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; }

/* ---------- 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; } }
.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: 2rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.offer-usage { display: grid; gap: 2px; padding-block: 16px; border-bottom: 1px solid var(--hair); }
.offer-usage b { font-weight: 600; }
.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; }
/* « États-Unis », a thin-lined « ou », « France »: the same divider as the app's sign-in page (DIR-0136). */
.places-or { align-items: center; gap: 8px; }
.places-or .or { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.8125rem; }
.places-or .or::before, .places-or .or::after { content: ""; width: 14px; height: 1px; background: var(--hair-strong); }
.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); } }

/* ------------------------------------------------------------------ Pass 7 motion (DIR-0138, Téo, 2026-11-12)
   Lines: on hover the line enters from the left; when the pointer leaves it exits to the right (the origin flips
   from right to left on hover, so the shrink always travels rightwards). One rule for every underlined link, so a
   link never draws a line wider than its own text (the FAQ « Contact » link used to stretch to its column). */
.link, a.u, .footer ul a, .eyebrow a, .prose a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat;
  transition: background-size var(--t-menu) var(--ease-out);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
a.u, .prose a { background-size: 100% 1px; background-position: 0 100%; }
.link:hover, .link:focus-visible, .footer ul a:hover, .footer ul a:focus-visible, .eyebrow a:hover, .eyebrow a:focus-visible {
  background-position: 0 100%; background-size: 100% 1px; text-decoration: none;
}
/* Links underlined at rest (inside text) redraw their line: it leaves to the right, then comes back from the left. */
@media (prefers-reduced-motion: no-preference) {
  a.u:hover, .prose a:hover { animation: line-swap 520ms var(--ease-out); }
}
@keyframes line-swap {
  0% { background-position: 100% 100%; background-size: 100% 1px; }
  45% { background-position: 100% 100%; background-size: 0 1px; }
  46% { background-position: 0 100%; background-size: 0 1px; }
  100% { background-position: 0 100%; background-size: 100% 1px; }
}
.link { width: fit-content; justify-self: start; align-self: start; }

/* The tour's pause control carries its own progress ring, so the control's line advances with the step. */
.tour-ctrl button .ring { width: 16px; height: 16px; transform: rotate(-90deg); }
.tour-ctrl button .ring circle { fill: none; stroke-width: 1.5; }
.tour-ctrl button .ring .track { stroke: var(--hair-strong); }
.tour-ctrl button .ring .run { stroke: var(--text); stroke-dasharray: 1; stroke-dashoffset: 1; }
.tour.is-auto .tour-ctrl .ring .run { animation: ring 7500ms linear both; }
.tour.is-auto.is-held .tour-ctrl .ring .run { animation-play-state: paused; }
@keyframes ring { to { stroke-dashoffset: 0; } }

/* Reveals: the block rises 28 px and comes into focus over 700 ms (expo out), children 70 ms apart; headings unmask
   from below. Only transform, opacity, filter and clip-path animate, so layout never shifts (CLS 0). */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal].is-pending { opacity: 0; transform: translateY(28px); filter: blur(4px); }
  [data-reveal].is-shown { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out), filter 700ms var(--ease-out); }
  [data-reveal].is-pending .h2 { clip-path: inset(0 0 100% 0); }
  [data-reveal].is-shown .h2 { clip-path: inset(0 0 0 0); transition: clip-path 800ms var(--ease-out) 60ms; }
  [data-stagger].is-pending > * { opacity: 0; transform: translateY(24px); }
  [data-stagger].is-shown > * { transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out); }
  [data-stagger].is-shown > :nth-child(2) { transition-delay: 70ms; }
  [data-stagger].is-shown > :nth-child(3) { transition-delay: 140ms; }
  [data-stagger].is-shown > :nth-child(4) { transition-delay: 210ms; }
  [data-stagger].is-shown > :nth-child(5) { transition-delay: 280ms; }
  [data-stagger].is-shown > :nth-child(6) { transition-delay: 350ms; }
  [data-stagger].is-shown > :nth-child(n+7) { transition-delay: 420ms; }
}

/* Parallax, scroll driven (no script, compositor only): photos drift slower than the page and screens float a
   little faster; drawings settle. Browsers without scroll-driven animations and reduced motion get a still page. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .stage-photo img { animation: drift linear both; animation-timeline: view(); animation-range: cover; scale: 1.14; }
    .stage-in .screen, .view .screen, .panel-shot .screen { animation: float linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
    .drawing svg { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
}
@keyframes drift { from { transform: translateY(-6%); } to { transform: translateY(6%); } }
@keyframes float { from { transform: translateY(48px); } to { transform: translateY(0); } }
@keyframes settle { from { transform: translateY(16px) scale(0.96); opacity: 0.4; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------------ Pass 7 components (DIR-0138)
   The label that introduces what is delivered during the founding firms programme; spot drawings in the product's
   pen; cards of surfaces; the connectors band (monograms, never a third party logo); the programme block; photo
   cards (a drawing on a white card over a facade photograph). Only transform and opacity animate. */
.tag-when { display: inline-flex; align-items: center; gap: 8px; width: fit-content; font-size: 0.8125rem; font-weight: 600; line-height: 1.4; color: #1f4a47; background: var(--accent-soft); border-radius: 999px; padding: 4px 12px 4px 10px; }
.tag-when::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }
.eyebrow-row .tag-when { margin: 0; }
.head-split > div:first-child { display: grid; gap: 18px; justify-items: start; }
.head-wide { max-width: 60rem; }

/* Drawings: strokes take the accent; fills and accents come from two custom properties the SVG files read. */
.drawing { color: var(--accent); --draw-fill: var(--accent-soft); --draw-accent: #1f4d4a; }
.drawing svg { display: block; width: 100%; height: auto; overflow: visible; }
.drawing [fill^="var(--draw-fill"] { fill: var(--draw-fill); }
.drawing [fill^="var(--draw-accent"] { fill: var(--draw-accent); }
.drawing [stroke^="var(--draw-fill"] { stroke: var(--draw-fill); }
.drawing [stroke^="var(--draw-accent"] { stroke: var(--draw-accent); }
.drawing .draw-move { transform-box: fill-box; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .drawing .draw-move { transition: transform 420ms var(--ease-out); }
  .surface:hover .draw-move, .surface:focus-within .draw-move, .feature:hover .draw-move, .photo-card:hover .draw-move,
  .connect-head:hover .draw-move, .trust-head:hover .draw-move, .programme:hover .draw-move, .head-visual:hover .draw-move {
    transform: translate(3px, -3px) rotate(-4deg);
  }
}

.surfaces { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 4vw, 56px); }
.surfaces-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.surface { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius); padding: 14px 14px 24px; display: grid; gap: 8px; align-content: start; transition: border-color var(--t-hover) var(--ease-soft), box-shadow var(--t-menu) var(--ease-out); }
.surface:hover { border-color: var(--hair-strong); box-shadow: var(--shadow-2); }
.surface .drawing { background: var(--surface-2); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
.surface .drawing svg { height: 132px; }
.surface h3, .surface p { padding-inline: 8px; }
.surface h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.surface p { color: var(--muted); font-size: 0.9375rem; }

.photo-card { position: relative; border-radius: var(--radius); overflow: hidden; isolation: isolate; background: #dfe2e0; padding: clamp(28px, 5vw, 64px); display: grid; place-items: center; min-height: 320px; }
.photo-card .stage-photo::after { content: ""; position: absolute; inset: 0; background: rgb(20 22 21 / 0.16); }
.photo-card-in { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-2); padding: clamp(18px, 2.6vw, 32px); width: min(100%, 360px); }
.feature-text > div { display: grid; gap: 14px; justify-items: start; }
.hero-visual { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: center; }

.connect { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius); padding: clamp(24px, 4vw, 56px); }
.connect-head { display: grid; gap: 18px; justify-items: start; }
.connect-head .drawing { width: 168px; }
.cx-tiles { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cx-tile { border: 1px solid var(--hair); border-radius: 14px; padding: 16px; display: grid; gap: 4px; align-content: start; background: var(--bg); }
.cx-tile .mono { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 620; background: var(--surface); border: 1px solid var(--hair-strong); margin-bottom: 8px; }
.cx-tile .mono-logo img { width: 22px; height: 22px; }
.cx-tile b { font-weight: 600; font-size: 0.9375rem; line-height: 1.3; }
.cx-tile span { font-size: 0.8125rem; color: var(--muted); line-height: 1.4; }
.cx-tile .when { margin-top: 6px; font-weight: 560; }
.cx-tile.is-today { border-color: rgb(43 100 97 / 0.35); background: var(--accent-soft); }
.cx-tile.is-today span { color: #2f3f3d; }
.cx-tile.is-today .when { color: #1f4a47; }
.cx-note { margin-top: 14px; }

.programme { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.programme-text { display: grid; gap: 18px; justify-items: start; }
.checks { list-style: none; display: grid; gap: 8px; }
.checks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: #2f3332; }
.checks svg { width: 16px; height: 16px; margin-top: 5px; color: var(--accent); }

.head-visual { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 32px; align-items: center; max-width: none; }
.head-visual > div { display: grid; gap: 18px; }
.trust-head .drawing { width: 150px; }
.panel .panel-note { color: #c9cfcc; }
.tour-ctrl .small { margin-left: auto; }
.btn-line-dark { background: transparent; color: var(--on-dark); border-color: rgb(244 244 242 / 0.4); padding: 0 20px; }
.btn-line-dark:hover { border-color: var(--on-dark); }
.uses-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* The header carries one more link (Vision) and the longer primary action: the menu button takes over earlier. */
@media (max-width: 1160px) {
  .nav, .header-end .sign-in, .header-end .btn { display: none; }
  .header .menu-btn { display: grid; }
}
@media (max-width: 1080px) {
  .surfaces, .surfaces-4, .uses-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .connect, .programme, .hero-visual { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .cx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .head-visual { grid-template-columns: minmax(0, 1fr); }
  .head-visual .drawing { width: 160px; }
  .photo-card { min-height: 0; }
}
@media (max-width: 560px) {
  .surfaces, .surfaces-4, .uses-4 { grid-template-columns: minmax(0, 1fr); }
  /* On a phone a card puts its drawing beside the text, so eight surfaces stay one short scroll. */
  .surface { grid-template-columns: 88px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 12px 14px 16px 12px; }
  .surface .drawing { grid-row: span 2; margin: 0; padding: 8px; align-self: start; }
  .surface .drawing svg { height: 66px; }
  .surface h3, .surface p { padding-inline: 0; }
  .surface h3 { padding-top: 4px; }
}