/* Safqos marketing site v3. One stylesheet. Dark is the default theme; light overrides live under [data-theme="light"]. */

/* Self-hosted variable fonts, Latin subset (both SIL OFL, see /fonts/*-OFL.txt). */
@font-face { font-family: "Host Grotesk"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("/fonts/host-grotesk-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/inter-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #0B0F14;
  --bg-2: #0E131A;
  --surface: #141B22;
  --surface-2: #171F27;
  --ink: #EAF1F5;
  --muted: #A8B4BE;
  --faint: #8693A0;
  --stroke: rgba(255, 255, 255, 0.08);
  --stroke-strong: rgba(255, 255, 255, 0.14);
  --green: #16C784;
  --green-ink: #16C784;
  --green-on-tint: #16C784; /* green text sitting ON a green tint: light theme needs the deeper green to stay >= 4.5:1 */
  --green-soft: #7DE2A7;
  --green-tint: rgba(22, 199, 132, 0.12);
  --green-glow: rgba(22, 199, 132, 0.5);
  --glow-opacity: 1;
  --grain-opacity: 0.07;
  --warning: #F5A524;
  --danger: #EF4444;
  --founder: #7A5AF8;
  --owner: #4A72FF;
  --investor: #A78BFA;
  --glass: rgba(11, 15, 20, 0.72);
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
  --shadow-soft: 0 6px 14px rgba(0, 0, 0, 0.22);
  --selection: rgba(22, 199, 132, 0.3);
  --radius: 20px;
  --radius-md: 12px;
  --font-display: "Host Grotesk", "Inter", -apple-system, "SF Pro Display", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, "SF Pro Text", system-ui, sans-serif;
  --nav-h: 68px;
  --gutter: 16px;
  --wrap: 1200px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 160ms;
  --dur-med: 280ms;
  --dur-slow: 420ms;
  --ease-expo: cubic-bezier(.16, 1, .3, 1); /* confident arrivals: reveals, indicators, pops */
  --section-y: clamp(72px, 9vw, 128px);
  --lift: 0 14px 30px -14px rgba(0, 0, 0, 0.6);
  --green-lift: 0 10px 24px -10px color-mix(in srgb, var(--green) 65%, transparent);
  interpolate-size: allow-keywords;
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #FFFFFF;
  --bg-2: #F7F9FA;
  --surface: #F3F5F7;
  --surface-2: #FFFFFF;
  --ink: #0B0F14;
  --muted: #4B5563;
  --faint: #59616D;
  --stroke: rgba(11, 15, 20, 0.1);
  --stroke-strong: rgba(11, 15, 20, 0.18);
  --green-ink: #0B7A51;
  --green-on-tint: #09674A;
  --green-tint: rgba(22, 199, 132, 0.14);
  --green-glow: rgba(22, 199, 132, 0.2);
  --glow-opacity: 0.55;
  --grain-opacity: 0.025;
  --warning: #9A6200;
  --danger: #B91C1C;
  --founder: #5B3FD6;
  --owner: #2F58E8;
  --investor: #7C5BD6;
  --glass: rgba(255, 255, 255, 0.78);
  --shadow: 0 18px 48px rgba(11, 15, 20, 0.12);
  --shadow-soft: 0 6px 14px rgba(11, 15, 20, 0.08);
  --selection: rgba(22, 199, 132, 0.35);
  --lift: 0 14px 30px -14px rgba(11, 15, 20, 0.22);
  color-scheme: light;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--selection); color: var(--ink); }

a { color: inherit; text-decoration: none; }
p a, li a, .legal a { color: var(--green-ink); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
p a:hover, li a:hover, .legal a:hover { text-decoration-thickness: 2px; }

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a, button, summary, label, input { -webkit-tap-highlight-color: transparent; }
a, button, summary, label { touch-action: manipulation; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
:where(a, summary, input, label):focus-visible { border-radius: 6px; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
/* One H1 scale for every page type (heroes and interior pages): 40px on phones up to 72px from 1385px wide. */
:root { --h1-size: clamp(2.5rem, 5.2vw, 4.5rem); }
h1 { font-size: var(--h1-size); letter-spacing: -0.035em; line-height: 0.98; }
h2 { font-size: clamp(2rem, 3.8vw, 3.4rem); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); letter-spacing: -0.02em; line-height: 1.2; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.lede { font-size: clamp(1.125rem, 1.4vw, 1.3rem); line-height: 1.5; color: var(--muted); max-width: 36em; }
.muted { color: var(--muted); }
.small { font-size: 0.9375rem; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left)); }
@media (min-width: 768px) { :root { --gutter: 32px; } }

section { padding: var(--section-y) 0; }
section + section { padding-top: 0; }
/* A bordered, tinted band ends with a line; the next section needs its own top space. */
.notify + section { padding-top: var(--section-y); }

.section-head { max-width: 42rem; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head .lede { margin-top: 0.75rem; }

.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--green); color: #0B0F14; padding: 10px 14px; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* ---------- Buttons, badges, pills ---------- */

.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: var(--radius-md);
  font-weight: 600; font-size: 1rem; line-height: 1; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.97); transition-duration: 80ms; }
.btn-primary { background: var(--green); color: #0B0F14; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset; }
/* Sheen: a soft diagonal highlight sweeps across the primary button once per hover or keyboard focus (transform only). */
.btn-primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.42) 50%, transparent 70%);
  transform: translateX(-120%);
}
.btn-primary:focus-visible::before { animation: btn-sheen 700ms var(--ease-expo); }
@media (hover: hover) {
  .btn-primary:hover { background: #22d692; transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, var(--green-lift); }
  .btn-primary:hover::before { animation: btn-sheen 700ms var(--ease-expo); }
  .btn-primary:hover:active { transform: scale(0.97); }
  .btn-secondary:hover { border-color: var(--green); transform: translateY(-1px); }
  .btn-secondary:hover:active { transform: scale(0.97); }
}
@keyframes btn-sheen { to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .btn-primary:hover::before, .btn-primary:focus-visible::before { animation: none; } }
.btn-secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--stroke-strong); }
/* Outlined secondary: green-edged box; the arrow sits angled up-right and swings to point right on hover/focus/press. */
.btn-ghost {
  color: var(--ink); min-height: 48px; padding: 0 18px 0 20px;
  border: 1px solid color-mix(in srgb, var(--green) 55%, transparent);
  background: color-mix(in srgb, var(--green) 6%, transparent);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-ghost svg { transform: rotate(-45deg); transition: transform 380ms cubic-bezier(.34,1.56,.64,1); }
.btn-ghost:hover, .btn-ghost:focus-visible, .btn-ghost:active {
  color: var(--green-on-tint); border-color: var(--green); background: var(--green-tint);
}
.btn-ghost:hover svg, .btn-ghost:focus-visible svg, .btn-ghost:active svg { transform: rotate(0deg) translateX(2px); }
@media (prefers-reduced-motion: reduce) { .btn-ghost svg { transition: none; } }
.btn svg { width: 18px; height: 18px; }

.btn-sm { min-height: 44px; padding: 0 16px; font-size: 0.925rem; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.06); color: var(--ink); border: 1px solid var(--stroke);
}

.pill-investor { background: rgba(167, 139, 250, 0.18); color: #DCCFFF; border-color: rgba(167, 139, 250, 0.4); }

[data-theme="light"] .pill-investor { color: #6A48C8; }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- Nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.nav.is-scrolled { border-bottom-color: var(--stroke); }
.nav-inner { height: var(--nav-h); display: flex; align-items: center; gap: 24px; }
.logo { display: flex; align-items: center; height: 44px; }
.logo img { height: 22px; width: auto; }
[data-theme="light"] .logo img, [data-theme="light"] .footer-logo img { filter: invert(1) hue-rotate(180deg) brightness(0.3); }

.nav-links { display: none; align-items: center; gap: 4px; margin-left: 8px; }
.nav-links a {
  position: relative; padding: 10px 12px; border-radius: 8px; font-size: 0.95rem; font-weight: 500; color: var(--muted);
}
.nav-links a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--green); border-radius: 2px;
  transform: scaleX(0); transform-origin: right center; transition: transform 320ms var(--ease-expo);
}
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) {
  .nav-links a:hover { color: var(--ink); }
  .nav-links a:hover::after { transform: scaleX(1); transform-origin: left center; }
  .nav-links a[aria-current="page"]:hover::after { transform: scaleX(1); }
}
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-actions .nav-cta { white-space: nowrap; }

.icon-btn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; color: var(--muted); border: 1px solid transparent;
}
.icon-btn:hover { color: var(--ink); border-color: var(--stroke); }
.icon-btn svg { width: 20px; height: 20px; }
.theme-toggle .sun { display: none; }
[data-theme="light"] .theme-toggle .sun { display: block; }
[data-theme="light"] .theme-toggle .moon { display: none; }
.menu-btn { position: relative; }
.menu-btn svg { position: absolute; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.menu-btn .close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.nav.menu-open .menu-btn .close { opacity: 1; transform: none; }
.nav.menu-open .menu-btn .open { opacity: 0; transform: rotate(90deg) scale(.6); }

/* Mobile menu: slides open to its real height (grid 0fr -> 1fr), links stagger in. */
.mobile-menu {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  border-top: 1px solid transparent; background: var(--bg);
  transition: grid-template-rows 360ms cubic-bezier(.2,.8,.2,1), border-color var(--dur-fast) var(--ease-out), visibility 0s linear 360ms;
}
.mm-inner { min-height: 0; overflow: hidden; padding: 0 var(--gutter); transition: padding 360ms cubic-bezier(.2,.8,.2,1); }
.nav.menu-open .mobile-menu {
  grid-template-rows: 1fr; visibility: visible; border-top-color: var(--stroke);
  max-height: calc(100svh - var(--nav-h)); overflow-y: auto;
  transition: grid-template-rows 420ms cubic-bezier(.2,.8,.2,1), border-color var(--dur-fast) var(--ease-out), visibility 0s;
}
.nav.menu-open .mm-inner { padding: 12px var(--gutter) 24px; transition-duration: 420ms; }
.mobile-menu a { opacity: 0; transform: translateY(-6px); transition: opacity 180ms ease, transform 180ms ease; }
.nav.menu-open .mobile-menu a { opacity: 1; transform: none; transition: opacity 260ms ease, transform 320ms cubic-bezier(.2,.8,.2,1), background-color var(--dur-fast) var(--ease-out); }
.nav.menu-open .mm-inner > a:nth-child(1) { transition-delay: 60ms; }
.nav.menu-open .mm-inner > a:nth-child(2) { transition-delay: 90ms; }
.nav.menu-open .mm-inner > a:nth-child(3) { transition-delay: 120ms; }
.nav.menu-open .mm-inner > a:nth-child(4) { transition-delay: 150ms; }
.nav.menu-open .mm-inner > a:nth-child(5) { transition-delay: 180ms; }
.nav.menu-open .mm-inner > a:nth-child(6) { transition-delay: 210ms; }
.nav.menu-open .mm-inner > a:nth-child(7) { transition-delay: 240ms; }
.nav.menu-open .mm-inner > a:nth-child(8) { transition-delay: 270ms; }
@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .nav.menu-open .mobile-menu, .mm-inner, .mobile-menu a, .nav.menu-open .mobile-menu a, .menu-btn svg { transition: none !important; }
}
.mobile-menu a { display: block; padding: 14px 4px; font-size: 1.125rem; font-weight: 500; border-bottom: 1px solid var(--stroke); }
.mobile-menu a[aria-current="page"] { color: var(--green-ink); }
.mobile-menu a:not(.mobile-menu-cta) { border-radius: 8px; }
.mobile-menu a:not(.mobile-menu-cta):active { background: var(--green-tint); }
.mobile-menu .mobile-menu-cta:active { transform: scale(0.97); }

/* Phones and tablets: theme toggle left, logo centred, menu right; the sticky bar carries the CTA */
@media (max-width: 1023px) {
  :root { --nav-h: 66px; }
  /* Floating pill, same glass as desktop; the first section runs up underneath it. */
  .nav { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0;
    padding: 8px max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left)); margin-bottom: calc(-1 * var(--nav-h)); }
  .nav.is-scrolled { border-bottom: 0; }
  .nav-inner { display: grid; grid-template-columns: 44px 1fr 44px; gap: 8px;
    height: 58px; max-width: none; margin: 0; padding: 0 7px; border-radius: 999px;
    background: var(--nav-glass); border: 1px solid var(--stroke-strong);
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 12px 28px -12px rgba(0,0,0,0.55); }
  [data-theme="light"] .nav-inner { box-shadow: 0 10px 24px -12px rgba(11,15,20,0.18); }
  .theme-toggle, .menu-btn { border-radius: 999px; }
  main > .hero:first-child { padding-top: calc(var(--nav-h) + var(--hero-pad)); min-height: 100vh; min-height: 100svh; }
  main > .page-hero:not(.hero):first-child { padding-top: calc(var(--nav-h) + clamp(40px, 6vw, 80px)); }
  /* The menu opens as a floating glass panel under the pill. */
  .mobile-menu { position: absolute; left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); top: calc(var(--nav-h) + 8px); border-radius: 22px; border: 1px solid transparent; background: var(--menu-glass);
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }
  .nav.menu-open .mobile-menu { border-color: var(--stroke-strong); max-height: calc(100svh - var(--nav-h) - 24px);
    box-shadow: 0 18px 40px -16px rgba(0,0,0,0.6); }
  .nav-actions { display: contents; }
  .nav-actions .nav-cta { display: none; }
  .theme-toggle { grid-column: 1; grid-row: 1; }
  .logo { grid-column: 2; grid-row: 1; justify-self: center; }
  .menu-btn { grid-column: 3; grid-row: 1; }
  .logo img { height: 27px; }
  .mobile-menu a.mobile-menu-cta { display: flex; justify-content: center; margin-top: 20px; border-bottom: 0; padding: 14px; font-size: 1rem; }
}
@media (min-width: 1024px) {
  .mobile-menu-cta { display: none; }
  .nav-links { display: flex; }
  .menu-btn { display: none; }
  .mobile-menu, .nav.menu-open .mobile-menu { display: none; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative; overflow: hidden; isolation: isolate;
  --hero-pad: 24px;
  padding: var(--hero-pad) 0;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  display: flex; align-items: center;
  --ph: max(176px, min(560px, calc(100vh - var(--nav-h) - 475px)));
  --ph: max(176px, min(560px, calc(100svh - var(--nav-h) - 475px)));
}
@media (min-width: 900px) {
  .hero { --hero-pad: clamp(24px, 4vh, 64px); --ph: min(624px, calc(100svh - var(--nav-h) - 2 * var(--hero-pad) - 36px)); }
}
@media (max-width: 899px) and (max-height: 720px) {
  .hero { --ph: max(176px, min(560px, calc(100svh - var(--nav-h) - 400px))); }
  .hero .hero-note, .hero .shot-caption { display: none; }
  .hero .lede { font-size: 0.95rem; }
  .hero h1 { font-size: 2rem; } /* short viewports only: the hero has to fit */
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 50% at 18% 30%, rgba(22, 199, 132, 0.10), transparent 70%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size: 160px 160px; mix-blend-mode: overlay;
}
.hero-grid > div:first-child { position: relative; }
.hero-grid > div:first-child::before {
  content: ""; position: absolute; left: -120px; top: -60px; width: 520px; height: 420px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(22, 199, 132, 0.16), transparent 72%); filter: blur(40px); opacity: var(--glow-opacity);
}
.hero-grid { display: grid; gap: 20px; align-items: center; width: 100%; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 48px; } }
.hero h1 { margin-top: 16px; }
.hero .lede { margin-top: 12px; font-size: clamp(1rem, min(1.4vw, 2.6svh), 1.3rem); }
.hero .cta-row { margin-top: 24px; }
.hero-note { margin-top: 16px; font-size: 0.9rem; color: var(--faint); }
/* Three doors under the hero CTAs: one per audience, each to its own page. */
.hero-doors { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 18px; }
.hero-doors a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--muted); }
.hero-doors a svg { width: 15px; height: 15px; color: var(--green-ink); transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) { .hero-doors a:hover { color: var(--ink); } .hero-doors a:hover svg { transform: translate(2px, -2px); } }
.hero-doors a:active svg { transform: translate(2px, -2px); }
@media (max-width: 899px) { .hero-doors { gap: 0 18px; margin-top: 10px; } }
@media (min-width: 900px) { .hero h1 { margin-top: 20px; } .hero .cta-row { margin-top: 32px; } }

/* Switch with a sliding indicator (shared by EVERY switch on the site: hero role toggle, chart tabs, comparison picker).
   Markup: <div class="pswitch ..."> with N sibling buttons, the active one marked aria-pressed="true" or aria-selected="true".
   site.js ("pswitch") measures the active button and writes --sw-x/--sw-y/--sw-w/--sw-h; the pill slides by transform only. */
.pswitch {
  --sw-pad: 4px; --sw-gap: 2px; --sw-x: 0px; --sw-y: 0px; --sw-w: 0px; --sw-h: 0px;
  position: relative; isolation: isolate; max-width: 100%;
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: var(--sw-pad); gap: var(--sw-gap);
  border-radius: 999px; background: var(--surface); border: 1px solid var(--stroke);
}
.pswitch::before {
  content: ""; position: absolute; z-index: -1; left: 0; top: 0; width: var(--sw-w); height: var(--sw-h); border-radius: 999px; opacity: 0;
  background: var(--green-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 55%, transparent), 0 6px 16px -8px color-mix(in srgb, var(--green) 60%, transparent);
  transform: translate(var(--sw-x), var(--sw-y));
  transition: transform 460ms var(--ease-expo), opacity var(--dur-fast) var(--ease-out);
}
.pswitch.sw-ready::before { opacity: 1; }
.pswitch.sw-snap::before { transition: none; } /* resize / first paint: jump, never glide */
/* Before the script has placed the pill (or without it) the active button carries the tint itself. */
.pswitch:not(.sw-ready) > :is([aria-pressed="true"], [aria-selected="true"]) { background: var(--green-tint); }
.pswitch > button {
  padding: 8px 16px; min-height: 44px; border-radius: 999px; font-size: 0.9rem; font-weight: 600; color: var(--muted); line-height: 1.2;
  transition: color var(--dur-med) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.pswitch > :is([aria-pressed="true"], [aria-selected="true"]) { color: var(--green-on-tint); }
.pswitch > button:active { transform: scale(0.95); }
@media (hover: hover) { .pswitch > button:hover { color: var(--ink); } .pswitch > :is([aria-pressed="true"], [aria-selected="true"]):hover { color: var(--green-on-tint); } }
.pswitch > button:focus-visible { outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .pswitch::before { transition: none; } }

.hero-stage { position: relative; display: flex; justify-content: center; min-width: 0; }
.glow {
  position: absolute; inset: 0; margin: auto; width: 640px; height: 640px; max-width: 140%;
  border-radius: 50%; background: radial-gradient(closest-side, var(--green-glow), rgba(22, 199, 132, 0.08) 45%, transparent 72%);
  filter: blur(34px); pointer-events: none; opacity: var(--glow-opacity);
}
.hero-stage .phone { --ph: inherit; }

/* ---------- Phone frame ---------- */

.phone {
  --ph: 624px;
  position: relative; height: var(--ph); width: calc(var(--ph) * 0.4808); flex: none;
  border-radius: calc(var(--ph) * 0.0737); padding: calc(var(--ph) * 0.0192);
  background: #0d1117;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow), inset 0 0 0 2px #05070a, inset 0 0 0 3px rgba(255, 255, 255, 0.06);
  transform-style: preserve-3d;
}
.phone::before {
  content: ""; position: absolute; top: calc(var(--ph) * 0.032); left: 50%; transform: translateX(-50%);
  width: calc(var(--ph) * 0.147); height: calc(var(--ph) * 0.0417); border-radius: 999px; background: #05070a; z-index: 3;
}
.phone-screen {
  position: relative; width: 100%; height: 100%; border-radius: calc(var(--ph) * 0.0577); overflow: hidden;
  background: #0B0F14;
}
.phone-screen { font-size: 0; }
.capture { display: block; width: 100%; height: 100%; object-fit: contain; object-position: top center; background: #0B0F14; }
.phone.small { transform: scale(0.84); transform-origin: top center; margin-bottom: -100px; }
.shot-caption { margin: 12px 0 0; text-align: center; font-size: 0.875rem; color: var(--faint); letter-spacing: 0.02em; }
.hero-stage { flex-direction: column; align-items: center; }
.hero-stage .shot-caption { position: relative; z-index: 1; }

/* Hero deck of real Brief captures */
/* Card region of the same-device Brief captures: top 220px and height 840px of a 600x1304 frame. */
.deck { position: absolute; left: 0; right: 0; top: 16.87%; height: 64.42%; }
.shot-card { position: absolute; inset: 0; overflow: hidden; background: #0B0F14; will-change: transform; transform-origin: 50% 100%; }
.shot-card .card-img { position: absolute; left: 0; top: -26.19%; width: 100%; height: auto; display: block; }

/* Row lists used by the criteria boards */
.ps-list { display: flex; flex-direction: column; gap: 8px; }
.ps-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--stroke);
}
.ps-row .ico { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(127, 127, 127, 0.1); flex: none; }
.ps-row .ico svg { width: 15px; height: 15px; }
.ps-row .txt { flex: 1; min-width: 0; }
.ps-row .txt .t { font-weight: 600; font-size: 12.5px; }
.ps-row .txt .d { color: var(--muted); font-size: 10.5px; }
.ps-row .state { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.ps-row .state.open, .ps-row.open .ico { color: var(--green-ink); }
.ps-row.open .ico { background: var(--green-tint); }
.ps-row.locked .ico { color: var(--muted); }

/* ---------- Trust strip ---------- */

/* Four steps of a deal (find, judge, share, meet) on one rail: glass nodes on a hairline track that fills green in
   order when the strip comes into view. Vertical (one segment per step) on narrow screens, one horizontal track from 860px. */
.trust-strip { padding: 0; }
.trust-strip + section { padding-top: var(--section-y); }
.trust-strip .row {
  --node: 40px; --gap: 24px; position: relative; list-style: none; margin: 0; padding: clamp(28px, 4vw, 40px) 0;
  display: grid; gap: var(--gap); border-top: 1px solid var(--stroke); border-bottom: 1px solid var(--stroke);
}
.trust-strip .item { position: relative; display: grid; grid-template-columns: var(--node) 1fr; gap: 16px; align-items: start; align-content: start; }
/* vertical segments: from this node's centre to the next node */
.trust-strip .item:not(:last-child)::before, .trust-strip .item:not(:last-child)::after {
  content: ""; position: absolute; left: calc(var(--node) / 2 - 1px); width: 2px; top: calc(var(--node) / 2); bottom: calc(var(--gap) * -1 - var(--node) / 2);
}
.trust-strip .item::before { background: var(--stroke-strong); }
.trust-strip .item::after { background: var(--green); transform-origin: top; }
.trust-strip .ts-node {
  position: relative; z-index: 1; width: var(--node); height: var(--node); border-radius: 50%; display: grid; place-items: center;
  color: var(--green-ink); background: var(--lg-fill);
  border: 1px solid color-mix(in srgb, var(--green) 55%, var(--lg-edge));
  -webkit-backdrop-filter: blur(10px) saturate(1.6); backdrop-filter: blur(10px) saturate(1.6);
  box-shadow: inset 0 1px 1px var(--lg-rim-top), inset 0 -1px 1px var(--lg-rim-bot), 0 8px 20px -10px color-mix(in srgb, var(--green) 55%, transparent);
  transition: border-color 500ms var(--ease-out), box-shadow 500ms var(--ease-out), color 500ms var(--ease-out);
}
.trust-strip .ts-node svg { width: 19px; height: 19px; }
.trust-strip .ts-copy { padding-top: 2px; }
.trust-strip .ts-copy span { display: block; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.trust-strip .ts-copy small { display: block; margin-top: 6px; font-size: 0.92rem; line-height: 1.5; color: var(--muted); max-width: 30ch; text-wrap: pretty; }
/* Animation (armed by JS, never under reduced motion): unlit nodes are neutral glass until the fill reaches them. */
.trust-strip .row.rail-ready:not(.in) .ts-node { color: var(--muted); border-color: var(--lg-edge); box-shadow: inset 0 1px 1px var(--lg-rim-top), inset 0 -1px 1px var(--lg-rim-bot), 0 8px 18px -10px rgba(0, 0, 0, 0.5); }
.trust-strip .row.rail-ready.in .ts-node { transition-delay: calc(var(--k, 0) * 280ms + 120ms); }
.trust-strip .row.rail-ready .item::after { transform: scaleY(0); }
.trust-strip .row.rail-ready.in .item::after { transform: none; transition: transform 300ms linear calc(var(--k, 0) * 280ms + 140ms); }
@media (min-width: 860px) {
  .trust-strip .row { --gap: clamp(20px, 3vw, 40px); grid-template-columns: repeat(4, 1fr); }
  .trust-strip .item { grid-template-columns: 1fr; gap: 18px; }
  .trust-strip .ts-copy { padding-top: 0; }
  /* one horizontal track, first node centre to last node centre */
  .trust-strip .item:not(:last-child)::before, .trust-strip .item:not(:last-child)::after { content: none; }
  .trust-strip .row::before, .trust-strip .row::after {
    content: ""; position: absolute; height: 2px; top: calc(clamp(28px, 4vw, 40px) + var(--node) / 2 - 1px);
    left: calc(var(--node) / 2); right: calc((100% - 3 * var(--gap)) / 4 - var(--node) / 2);
  }
  .trust-strip .row::before { background: var(--stroke-strong); }
  .trust-strip .row::after { background: var(--green); transform-origin: left; }
  .trust-strip .row.rail-ready::after { transform: scaleX(0); }
  .trust-strip .row.rail-ready.in::after { transform: none; transition: transform 960ms cubic-bezier(.45, 0, .55, 1) 120ms; }
}
@media (prefers-reduced-transparency: reduce) { .trust-strip .ts-node { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); } }

/* ---------- Pain stories ---------- */

.stories { display: grid; gap: 18px; }
@media (min-width: 900px) { .stories { grid-template-columns: repeat(3, 1fr); } }
.story {
  position: relative; padding: 28px 26px 30px; border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--stroke); display: flex; flex-direction: column; gap: 14px;
}
.story .who { font-size: 0.9rem; font-weight: 600; color: var(--green-ink); }
.story h3 { margin: 4px 0 0; font-size: 1.55rem; }
.story p { color: var(--muted); }
.story .answer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--stroke); color: var(--ink); font-weight: 500; display: flex; gap: 10px; align-items: flex-start; }
.story .answer svg { width: 20px; height: 20px; color: var(--green-ink); flex: none; margin-top: 2px; }

/* ---------- Numbers ---------- */
.numbers { display: grid; gap: 18px; }
@media (min-width: 900px) { .numbers { grid-template-columns: repeat(3, 1fr); } }
.numbers-card { min-width: 0; padding: 26px 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--stroke); display: flex; flex-direction: column; }
.numbers-card h3 { font-size: 1.2rem; }
.numbers-card .big { font-family: var(--font-display); font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin: 8px 0 14px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.numbers-card .big small { font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; letter-spacing: 0; color: var(--muted); max-width: 12em; line-height: 1.3; }
.funnel, .stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.funnel li, .stats li { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--stroke); color: var(--muted); font-size: 0.95rem; }
.funnel li .num, .stats li .num { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--ink); letter-spacing: -0.02em; }
/* Sources sit in a native <details>: collapsed by default, every citation still in the page. */
.cite { margin-top: auto; padding-top: 8px; font-size: 0.875rem; line-height: 1.55; color: var(--faint); }
.cite summary { display: flex; align-items: center; gap: 6px; min-height: 44px; width: fit-content; cursor: pointer; list-style: none; color: var(--muted); font-weight: 500; }
.cite summary::-webkit-details-marker { display: none; }
.cite summary::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform var(--dur-fast) var(--ease-out); }
.cite[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.cite summary:hover { color: var(--ink); }
.cite p { margin: 0; padding-bottom: 8px; }
.cite a { color: var(--muted); }

.stat-row { display: grid; gap: 14px; margin-top: 24px; }
@media (min-width: 640px) { .stat-row { grid-template-columns: repeat(3, 1fr); } }
.stat { padding: 18px 20px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--stroke); }
.stat .n { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.stat .l { color: var(--muted); font-size: 0.9rem; margin-top: 6px; }

.note { font-size: 0.9rem; color: var(--muted); max-width: 60em; margin-top: 18px; }

/* ---------- Signals (Fit + Risk) ---------- */

/* ---------- Notify form ---------- */
.notify { scroll-margin-top: var(--nav-h); background: var(--bg-2); border-top: 1px solid var(--stroke); border-bottom: 1px solid var(--stroke); padding: clamp(64px, 8vw, 112px) 0 !important; }
.notify-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .notify-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.notify-form { position: relative; display: grid; gap: 18px; padding: 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--stroke); }
.notify-form .field { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.notify-form label, .notify-form legend { font-weight: 600; font-size: 0.95rem; padding: 0; }
.notify-form .opt { font-weight: 400; color: var(--faint); font-size: 0.85rem; }
.notify-form .req { color: var(--green-ink); }
.notify-form input[type="email"], .notify-form input[type="text"] {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: var(--radius-md); font: inherit; font-size: 16px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--stroke-strong); transition: border-color var(--dur-fast) var(--ease-out);
}
.notify-form input::placeholder { color: var(--faint); }
.notify-form input:focus-visible { outline: 2px solid var(--green); outline-offset: 0; border-color: var(--green); }
.notify-form input[aria-invalid="true"] { border-color: var(--danger); }
.field-row { display: grid; gap: 18px; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
/* Choice tiles: each option is its own bordered tile with a radio/checkbox mark, so options read as separate. */
.seg { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 560px) { .seg { grid-template-columns: 1fr 1fr; } }
.seg label { position: relative; margin: 0; min-width: 0; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px;
  border-radius: 12px; background: var(--bg); border: 1px solid var(--stroke-strong);
  font-size: 0.95rem; font-weight: 500; color: var(--ink); line-height: 1.2; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.seg span::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--stroke-strong); background: transparent center / 12px no-repeat;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.seg label:hover span { border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.seg input:checked + span {
  border-color: var(--green); background: var(--green-tint);
  box-shadow: 0 0 0 1px var(--green) inset;
}
.seg input:checked + span::before { border-color: var(--green); background-color: var(--green); box-shadow: inset 0 0 0 3.5px var(--bg); }
.seg input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.seg[aria-invalid="true"] span { border-color: var(--danger); }
.notify-form .err { margin: 0; font-size: 0.875rem; color: var(--danger); }
.notify-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notify-form .btn { justify-self: stretch; min-height: 52px; }
.notify-form .btn[disabled] { opacity: 0.6; cursor: wait; }
.form-status { margin: 0; font-size: 0.95rem; color: var(--muted); }
.form-status.ok { color: var(--green-ink); font-weight: 600; }
.form-status.bad { color: var(--danger); }
.form-status:empty { display: none; }
.notify-form.is-done .field, .notify-form.is-done .field-row, .notify-form.is-done .btn { display: none; }
.notify-form.is-done .form-status { font-size: 1.1rem; }
@media (max-width: 560px) {
  .notify-form { padding: 22px 18px; }
}

.callout {
  margin-top: 28px; padding: 18px 20px; border-radius: var(--radius-md); background: var(--green-tint); border: 1px solid rgba(22, 199, 132, 0.3);
  color: var(--ink); font-size: 0.95rem;
}
.callout strong { color: var(--green-ink); }

/* ---------- Audience split ---------- */

.split { display: grid; gap: 18px; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.split-card {
  display: flex; flex-direction: column; gap: 14px; padding: 32px 28px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--stroke); transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.split-card:hover { border-color: var(--green); }
.split-card h2, .split-card h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.2; letter-spacing: -0.02em; }
.split-card ul { margin: 0; padding: 0; list-style: none; color: var(--muted); display: grid; gap: 8px; }
.split-card li { display: flex; gap: 10px; }
.split-card li svg { width: 20px; height: 20px; color: var(--green-ink); flex: none; margin-top: 3px; }

/* ---------- Houston / beta ---------- */

.beta-grid { display: grid; gap: 18px; }
@media (min-width: 900px) { .beta-grid { grid-template-columns: 1.2fr 0.8fr; } }
.beta-card { padding: 32px 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--stroke); }
.beta-card h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.2; letter-spacing: -0.02em; }
.beta-card p { color: var(--muted); }
.beta-card .big { font-family: var(--font-display); font-size: clamp(3rem, 6vw, 5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--ink); margin: 6px 0 10px; }
.beta-card .big em { font-style: normal; color: var(--green-ink); }
.price-rows { margin: 18px 0 0; padding: 0; list-style: none; }
.price-rows li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--stroke); }
.price-rows li span:first-child { color: var(--muted); }
.price-rows li span:last-child { font-weight: 600; text-align: right; }

/* ---------- FAQ ---------- */

.faq-list { max-width: 820px; border-top: 1px solid var(--stroke); }
.faq-list details { border-bottom: 1px solid var(--stroke); }
.faq-list summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 20px 4px; font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary svg { width: 20px; height: 20px; flex: none; color: var(--muted); transition: transform var(--dur-med) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.faq-list details[open]:not(.is-closing) summary svg { transform: rotate(45deg); color: var(--green-ink); }
.faq-list summary:hover { color: var(--green-ink); }
.faq-list .a { padding: 0 4px 22px; color: var(--muted); max-width: 42em; }
.faq-more { margin-top: 24px; font-weight: 600; }
.faq-more a { color: var(--green-ink); display: inline-flex; align-items: center; gap: 6px; }
.faq-more a svg { width: 16px; height: 16px; }

/* FAQ page: category jump nav + grouped accordions */
.faq-layout { display: grid; gap: 28px; }
.faq-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.faq-nav a {
  padding: 8px 14px; border: 1px solid var(--stroke); border-radius: 999px; font-size: 0.9rem; font-weight: 600;
  color: var(--text); background: var(--surface, transparent); line-height: 1.2;
}
.faq-nav a:hover { color: var(--green-ink); border-color: var(--green-ink); }
.faq-cat { scroll-margin-top: calc(var(--nav-h) + 16px); margin-bottom: 48px; }
.faq-cat:last-child { margin-bottom: 0; }
.faq-cat h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0 0 16px; }
.faq-body .faq-list { max-width: 820px; }
.faq-list summary:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 2px; border-radius: 6px; }
@media (min-width: 960px) {
  .faq-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; }
  .faq-nav { position: sticky; top: calc(var(--nav-h) + 24px); flex-direction: column; flex-wrap: nowrap; gap: 4px; }
  .faq-nav a { border: 0; border-radius: 8px; padding: 9px 12px; background: none; }
  .faq-nav a:hover { background: var(--bg-2); }
}

/* ---------- Final CTA ---------- */

.final { position: relative; text-align: center; overflow: hidden; }
.final .glow { width: 720px; height: 420px; opacity: 0.55; }
.final h2 { font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing: -0.04em; }
.final .lede { margin: 0 auto 32px; }
.final h2 + .cta-row { margin-top: 32px; }
.final .cta-row { justify-content: center; }
.final .contact { margin-top: 28px; color: var(--muted); font-size: 0.95rem; }

/* ---------- Footer ---------- */

.footer { border-top: 1px solid var(--stroke); padding: 56px 0 36px; font-size: 0.95rem; }
.footer-top { display: grid; gap: 32px; }
@media (min-width: 768px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; } }
.footer-logo img { height: 20px; width: auto; }
.footer-tag { margin-top: 14px; color: var(--muted); max-width: 22em; }
.footer-col strong { display: block; margin-bottom: 12px; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); }
.footer-col a { display: block; padding: 5px 0; color: var(--muted); }
.footer-col a:hover { color: var(--ink); }
.disclosure { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--stroke); color: var(--faint); font-size: 0.85rem; line-height: 1.6; max-width: 72em; }
.footer-bottom { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; color: var(--faint); font-size: 0.85rem; }
@media (max-width: 640px) { .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0; } }
.footer-bottom a { color: var(--muted); }

/* ---------- Inner pages ---------- */

.page-hero { padding: clamp(40px, 6vw, 80px) 0 clamp(48px, 6vw, 80px); overflow: hidden; }
.page-hero .who { display: inline-block; font-weight: 600; color: var(--green-ink); margin-bottom: 20px; }
.page-hero h1 { max-width: 12em; }
.page-hero .lede { margin-top: 18px; }
.page-hero .cta-row { margin-top: 28px; }
.page-hero.hero { padding: var(--hero-pad) 0; }
.page-hero.hero .who { margin-bottom: 0; }
.page-hero.hero h1 { max-width: 12em; margin-top: 16px; }
@media (min-width: 900px) { .page-hero.hero h1 { margin-top: 20px; } }

/* Mobile hero v2: the phone is the visual anchor (82% of viewport, cap 360px), right under the CTAs, peeking above the fold. Note moves below it. */
@media (max-width: 899px) {
  .hero { --hero-pad: 8px; --ph: calc(min(82vw, 360px) / 0.4808); min-height: 0; align-items: flex-start; padding-bottom: 32px; }
  .hero-grid { gap: 0; }
  .hero-grid > div:first-child { display: contents; }
  .hero-grid > div:first-child::before { display: none; }
  .hero h1 { margin-top: 4px; }
  .hero .lede { margin-top: 8px; }
  .hero .cta-row { margin-top: 16px; }
  .hero .hero-stage { order: 2; margin-top: 20px; }
  .hero .hero-note, .hero .hero-stage .shot-caption { display: block; }
  .hero .hero-note { order: 3; margin-top: 16px; }
  .hero .glow { width: 120vw; height: 120vw; }
}

.feature-rows { display: grid; gap: 0; }
.feature-row > * { min-width: 0; }
.feature-row { display: grid; gap: 24px; padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid var(--stroke); align-items: center; }
@media (min-width: 900px) { .feature-row { grid-template-columns: 1fr 1fr; gap: 64px; } .feature-row.flip .feature-text { order: 2; } }
.feature-row.vault-row { margin-top: 32px; border-top: 0; padding-bottom: 0; }
.feature-text h2, .feature-text h3 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.2; letter-spacing: -0.02em; }
.feature-text p { color: var(--muted); max-width: 32em; }
.feature-text ul { margin: 14px 0 0; padding: 0; list-style: none; color: var(--muted); display: grid; gap: 8px; }
.feature-text li { display: flex; gap: 10px; }
.feature-text li svg { width: 20px; height: 20px; color: var(--green-ink); flex: none; margin-top: 3px; }
.feature-visual { display: flex; justify-content: center; }
.feature-visual.stack { flex-direction: column; align-items: center; }
.feature-visual.stack .shot-caption { margin-top: 0; }
.feature-row.solo { grid-template-columns: 1fr; }
.feature-row.solo .feature-text p, .feature-row.solo .feature-text ul { max-width: 40em; }
.feature-visual .phone.small { transform: scale(0.84); }
.vid-wrap { display: flex; flex-direction: column; align-items: center; }
@media (max-width: 300px) { .feature-visual .phone.small { --ph: calc((100vw - 2 * var(--gutter)) / 0.4808); } } /* folded foldables: the phone frame must fit the gutter */
.vid-ctl { display: flex; gap: 12px; margin-top: 14px; }
.feature-visual .board {
  width: 100%; max-width: 440px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--stroke); padding: 20px; color: var(--ink);
}
.board .title { font-weight: 700; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.board .title .pill { font-size: 0.7rem; }

/* Before / after vault table */
.gate-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.gate-table th, .gate-table td { text-align: left; padding: 14px 12px; border-top: 1px solid var(--stroke); vertical-align: top; }
.gate-table th { font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); font-weight: 600; border-top: 0; }
.gate-table td:first-child { font-weight: 600; }
.gate-table td .d { display: block; color: var(--muted); font-weight: 400; font-size: 0.875rem; }
.gate-table .st { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.gate-table .st svg { width: 16px; height: 16px; }
.gate-table .st.lock { color: var(--muted); }
.gate-table .st.open { color: var(--green-ink); }
.gate-table .st.vis { color: var(--ink); }
.gate-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--stroke); background: var(--surface); padding: 8px 12px; }
@media (max-width: 640px) { .gate-table th:nth-child(1), .gate-table td:nth-child(1) { min-width: 180px; } }

/* Goodbye pairs */
.pairs { display: grid; gap: 14px; }
@media (min-width: 768px) { .pairs { grid-template-columns: 1fr 1fr; } }
.pair-card { padding: 22px 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--stroke); display: grid; gap: 12px; }
.pair-card .was { color: var(--faint); }
.pair-card .was strong { display: block; color: var(--muted); text-decoration: line-through; text-decoration-color: var(--danger); font-weight: 600; }
.pair-card .now { padding-top: 12px; border-top: 1px solid var(--stroke); }
.pair-card .now strong { display: block; color: var(--ink); font-weight: 600; }
.pair-card .now span, .pair-card .was span { color: var(--muted); font-size: 0.95rem; }

/* Trust page */
.not-list { display: grid; gap: 14px; }
@media (min-width: 768px) { .not-list { grid-template-columns: 1fr 1fr; } }
.not-item { display: flex; gap: 14px; padding: 20px 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--stroke); }
.not-item svg { width: 22px; height: 22px; color: var(--danger); flex: none; margin-top: 3px; }
.not-item strong { display: block; }
.not-item span { color: var(--muted); font-size: 0.95rem; }

.facts { display: grid; gap: 0; border-top: 1px solid var(--stroke); }
.facts .fact-row { display: grid; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--stroke); }
@media (min-width: 768px) { .facts .fact-row { grid-template-columns: 240px 1fr; gap: 32px; } }
.facts .fact-row strong { font-size: 1.1rem; letter-spacing: -0.01em; }
.facts .fact-row p { color: var(--muted); }

/* About timeline */
.timeline { display: grid; gap: 14px; }
@media (min-width: 768px) { .timeline { grid-template-columns: repeat(3, 1fr); } }
.tl { padding: 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--stroke); }
.tl .when { font-weight: 700; color: var(--green-ink); margin-bottom: 8px; }
.tl.dim .when { color: var(--muted); }
.tl h3 { font-size: 1.05rem; letter-spacing: -0.01em; line-height: 1.3; }
.tl p { color: var(--muted); font-size: 0.95rem; }

.prose { max-width: 42em; }
.prose p { color: var(--muted); }
.prose p strong { color: var(--ink); }

/* Legal pages */
.legal { max-width: 760px; }
.legal .updated { color: var(--faint); font-size: 0.9rem; }
.legal h2 { font-size: 1.45rem; margin: 2.2em 0 0.6em; letter-spacing: -0.015em; }
.legal p, .legal li { color: var(--muted); }
.legal strong { color: var(--ink); }
.legal .toc { margin: 24px 0 8px; padding: 18px 22px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--stroke); }
.legal .toc ol { margin: 0; padding-left: 22px; columns: 1; font-size: 0.95rem; }
@media (min-width: 640px) { .legal .toc ol { columns: 2; column-gap: 32px; } }
.legal .toc li { padding: 3px 0; break-inside: avoid; }
.legal .callout { margin: 16px 0; }
.legal .callout p { color: var(--ink); }
.legal ul, .legal ol { padding-left: 22px; }
.legal li { margin: 6px 0; }
.legal table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.legal th, .legal td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--stroke); vertical-align: top; }
.legal th { color: var(--ink); }

/* ---------- Tilt ---------- */
[data-tilt] { transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); transform-style: preserve-3d; }
[data-tilt]:hover { box-shadow: var(--shadow-soft); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Utility */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Flow strips and phone pairs (real app captures, no scaling hacks) */
.flow { display: grid; gap: 40px 24px; margin-top: 36px; justify-items: center; }
.feature-row.solo .flow { margin-top: 8px; }
.flow .phone, .pair .phone { transform: none; margin: 0; }
.flow .phone { --ph: 460px; }
.flow-step { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 300px; text-align: center; }
.flow-step figcaption { display: flex; flex-direction: column; gap: 6px; font-size: 0.92rem; color: var(--muted); line-height: 1.5; }
.flow-step figcaption strong { color: var(--ink); font-size: 1rem; display: inline-flex; gap: 8px; align-items: center; justify-content: center; }
.flow-step .n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #04140d; font-size: 0.78rem; font-weight: 700; }
.flow-one { margin-top: 32px; }
.pair { gap: 16px; align-items: flex-start; }
.pair .phone { --ph: min(480px, calc(90vw - 20px)); }
@media (min-width: 900px) { .flow { grid-template-columns: repeat(3, 1fr); } .feature-row.solo .flow { max-width: 1000px; } }
@media (max-width: 899px) { .flow .phone { --ph: min(460px, calc(120vw - 40px)); } }

/* ---------- Where the time goes (home): role tabs; steps today vs with Safqos; each stage expands ---------- */
.tchart { --c-today: #7B8794; --c-now: var(--green); padding: clamp(18px, 3vw, 32px); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--stroke); }
[data-theme="light"] .tchart { --c-today: #8B96A3; }
.tc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.tc-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; color: var(--muted); }
.tc-legend li { display: inline-flex; align-items: center; gap: 8px; }
.sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.sw.today { background: var(--c-today); }
.sw.now { background: var(--c-now); }
.tc-panel { margin-top: 16px; }
.tc-panel[hidden] { display: none; }
.tc-panel:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.pb-head { display: flex; align-items: center; gap: 16px; margin: 4px 0 12px; font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.pb-big { font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 3.6rem); font-weight: 700; line-height: 1; color: var(--green-ink); letter-spacing: -0.02em; }
.pb-sub { font-size: 0.875rem; font-weight: 500; color: var(--muted); }
.pb-row { border-top: 1px solid var(--stroke); }
.pb-row summary { display: grid; grid-template-columns: minmax(200px, 0.9fr) 2fr 92px 24px; grid-template-rows: auto auto; column-gap: 20px; row-gap: 6px; align-items: center; padding: 16px 8px; margin: 0 -8px; border-radius: 12px; list-style: none; cursor: pointer; transition: background-color var(--dur-med, 200ms) ease; }
.pb-row summary::-webkit-details-marker { display: none; }
.pb-row summary:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.pb-row summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.pb-stage { grid-row: span 2; display: flex; flex-direction: column; gap: 4px; }
.pb-title { font-size: 0.98rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.pb-desc { font-size: 0.84rem; line-height: 1.45; color: var(--muted); }
.pb-line { display: flex; align-items: center; gap: 12px; }
.pb-stage + .pb-line { align-self: end; }
.pb-line + .pb-line { align-self: start; }
.pb-track { flex: 1; }
.pb-bar { display: flex; gap: 3px; width: var(--w); height: 22px; transform-origin: left; }
.pb-bar i { flex: 1; background: var(--c); }
.pb-bar i:first-child { border-radius: 6px 0 0 6px; }
.pb-bar i:last-child { border-radius: 0 6px 6px 0; }
.pb-bar i:only-child { border-radius: 6px; }
.pb-bar.today { --c: var(--c-today); }
.pb-bar.now { --c: var(--c-now); }
.pb-n { width: 4.5em; font-size: 0.82rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.pb-line + .pb-line .pb-n { color: var(--green-ink); }
.pb-cut { grid-row: 1 / span 2; grid-column: 3; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.pb-cut .num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--green-ink); }
.pb-cl { font-size: 0.75rem; color: var(--muted); }
.pb-chev { grid-row: 1 / span 2; grid-column: 4; display: grid; place-items: center; width: 24px; height: 24px; color: var(--muted); }
.pb-chev svg { width: 18px; height: 18px; transition: transform 250ms ease; }
.pb-row[open]:not(.is-closing) .pb-chev svg { transform: rotate(180deg); color: var(--green-ink); }
.pb-detail { padding: 2px 0 18px; }
.pb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pb-cols > div { padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 3%, transparent); border: 1px solid var(--stroke); }
.pb-cols > .now { border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.pb-cols h5 { margin: 0 0 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.pb-cols .now h5 { color: var(--green-ink); }
.pb-cols ol { margin: 0; padding-left: 20px; font-size: 0.875rem; line-height: 1.55; color: var(--muted); }
.pb-cols .now ol { color: var(--ink); }
.pb-facts { margin: 12px 0 0; padding: 0; list-style: none; font-size: 0.875rem; color: var(--muted); }
.pb-facts li + li { margin-top: 4px; }
.pb-fk { display: inline-block; min-width: 7.5em; font-weight: 600; color: var(--ink); }
.pb-fs { color: var(--faint); }
.tchart .note { font-size: 0.9rem; color: var(--muted); margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--stroke); }
.tchart .cite { margin-top: 12px; }
/* Grow-in: armed by JS on scroll and on tab change, never under reduced motion. */
.tchart.anim-ready .pb-bar { transform: scaleX(0); }
.tchart.anim-ready.in .pb-bar { transform: none; transition: transform 800ms cubic-bezier(.2, .7, .2, 1); }
.tchart.anim-ready.in .pb-bar.now { transition-delay: 250ms; }
@media (max-width: 760px) {
  .pb-row summary { grid-template-columns: 1fr 80px 20px; }
  .pb-stage + .pb-line, .pb-line + .pb-line { align-self: center; }
  .pb-cl { white-space: nowrap; }
  .pb-stage { grid-row: auto; grid-column: 1 / -1; margin-bottom: 4px; }
  .pb-line { grid-column: 1; }
  .pb-cut { grid-row: 2 / span 2; grid-column: 2; }
  .pb-cut .num { font-size: 1.3rem; }
  .pb-chev { grid-row: 2 / span 2; grid-column: 3; width: 20px; }
  .pb-bar { height: 18px; }
  .pb-n { width: 4em; font-size: 0.78rem; }
  .pb-cols { grid-template-columns: 1fr; gap: 10px; }
  .tc-tabs button { padding: 8px 12px; }
}

/* ---------- Founding members, founder note, next steps ---------- */
.founding { padding: clamp(56px, 7vw, 96px) 0; }
.founding-card { position: relative; overflow: hidden; display: grid; gap: 28px; padding: clamp(28px, 4vw, 52px); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--stroke-strong); }
.founding-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 100% 0%, var(--green-tint), transparent 70%); pointer-events: none; }
.founding-card > * { position: relative; }
.founding-head h2 { margin: 0 0 10px; }
.founding-head .lede { margin: 0; max-width: 36em; }
.founding-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--stroke); }
@media (min-width: 760px) { .founding-list { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.founding-list li { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--stroke); }
.f-ico { flex: none; width: 28px; height: 44px; display: grid; place-items: center; color: var(--green-ink); }
.f-ico svg { width: 22px; height: 22px; }
.founding-list h3 { margin: 0 0 4px; font-size: 1.1rem; }
.founding-list p { margin: 0; color: var(--muted); }
.founding-fine { margin: 0; font-size: 0.9rem; color: var(--faint); }
.founding-card .btn { justify-self: start; }
.next-steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 0; position: relative; }
.next-steps li { display: flex; gap: 14px; padding: 0 0 20px; position: relative; }
.next-steps li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 1px; background: var(--stroke-strong); }
.next-steps .n { flex: none; width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 0.9rem; background: var(--green-tint); color: var(--green-ink); border: 1px solid var(--green); }
.next-steps strong { display: block; }
.next-steps span:not(.n) { color: var(--muted); font-size: 0.95rem; }
.final-perk { margin: 18px 0 0; color: var(--muted); }
.founder-note { padding: clamp(48px, 6vw, 88px) 0; }
.fn-card { margin: 0 auto; max-width: 820px; display: grid; gap: 24px; align-items: start; }
/* Founder photo: a small circle beside the signature. Decorative only: not a link, no drag, no iOS long-press preview. */
.fn-photo { width: 88px; height: 88px; flex: none; border-radius: 50%; object-fit: cover; background: var(--surface-2); border: 1px solid var(--stroke-strong);
  pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.fn-body h2 { margin: 0 0 14px; font-size: clamp(1.5rem, 2.2vw, 2rem); }
.fn-body blockquote { margin: 0; display: grid; gap: 12px; color: var(--muted); }
.fn-body blockquote p { margin: 0; }
.fn-body figcaption { margin-top: 24px; display: flex; align-items: center; gap: 18px; }
.fn-sig { display: flex; flex-direction: column; gap: 2px; font-size: 1.0625rem; }
.fn-sig span { color: var(--faint); font-size: 0.9rem; }

/* ---------- Home walkthrough video ---------- */
.walk-grid { display: grid; gap: 24px; justify-items: center; }
.walk-stage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; }
.walk-stage { --ph: clamp(380px, 62svh, 520px); }
.walk .phone { --ph: inherit; }
.walk-stage .shot-caption { margin: 0; text-align: center; }
.walk-seek {
  --p: 0%; appearance: none; -webkit-appearance: none; display: block; margin: 0; padding: 0; cursor: pointer;
  width: calc(var(--ph) * 0.4808); height: 44px; background: transparent; border-radius: 4px; /* 44px hit area, 4px track */
}
.walk-seek::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--green) var(--p), var(--stroke-strong) var(--p));
}
.walk-seek::-moz-range-track { height: 4px; border-radius: 4px; background: var(--stroke-strong); }
.walk-seek::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--green); }
.walk-seek::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; border: 0; background: var(--ink); }
.walk-seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; border: 0; background: var(--ink); }
.walk-seek:focus-visible, .walk-play:focus-visible, .walk-speed button:focus-visible, .walk-steps button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.walk-ctl { display: flex; align-items: center; gap: 12px; }
.walk-play {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--ink);
  background: var(--glass); border: 1px solid var(--stroke-strong); backdrop-filter: blur(8px);
}
.walk-play:hover { color: var(--green-ink); }
.walk-play svg { width: 18px; height: 18px; }
.walk-play .i-play, .walk-play .i-replay { display: none; }
.vid-toggle.is-paused .i-pause { display: none; }
.vid-toggle.is-paused .i-play { display: block; }
.walk-play.is-paused .i-pause, .walk-play.is-ended .i-pause { display: none; }
.walk-play.is-paused .i-play, .walk-play.is-ended .i-replay { display: block; }
.walk-speed { display: inline-flex; border: 1px solid var(--stroke-strong); border-radius: 999px; padding: 2px; }
.walk-speed button {
  font: inherit; font-size: 0.875rem; font-weight: 600; min-width: 44px; height: 44px; padding: 0 10px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); cursor: pointer;
}
/* The speed control is a .pswitch: the glass track and sliding pill come from there. Before the script places the pill, the active speed carries the tint itself. */
.walk-speed:not(.sw-ready) button[aria-pressed="true"] { background: var(--green-tint); }
.walk-speed button[aria-pressed="true"] { color: var(--ink); }
.walk-steps-wrap { width: 100%; min-width: 0; }
.walk-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.walk-steps button {
  font: inherit; color: var(--muted); cursor: pointer; text-align: left; width: 100%; height: 100%;
  position: relative; overflow: hidden; min-height: 44px; padding: 8px 12px; border-radius: 12px;
  border: 1px solid var(--stroke-strong); background: var(--surface);
}
.walk-steps strong { font-weight: 600; letter-spacing: -0.01em; font-size: 0.9375rem; }
.walk-steps small { display: none; }
.walk-steps button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--green);
  transform: scaleX(0); transform-origin: 0 50%; opacity: 0;
}
.walk-steps button.is-active { color: var(--ink); border-color: var(--green); background: var(--green-tint); }
.walk-steps button.is-active::after { opacity: 1; transform: scaleX(var(--cp, 0)); }
.walk-steps button.is-done { border-color: rgba(22, 199, 132, 0.35); }
.walk-line { margin: 14px 0 0; color: var(--muted); min-height: 5em; text-align: left; }
.walk-line b { display: block; font-family: var(--font-display); font-size: 1.125rem; color: var(--ink); margin-bottom: 2px; }
.walk-now { display: none; }
@media (max-width: 899px) {
  /* Mobile: big centred phone, rolling chapter label, 8 progress segments (the chapter buttons), controls */
  .walk-grid {
    --ph: min(calc(min(78vw, 340px, 100vw - 120px) / 0.4808), 66svh);
    grid-template-columns: minmax(0, 1fr); gap: 10px 0; justify-items: center; position: relative;
  }
  .walk-stage { --ph: inherit; display: contents; }
  .walk-steps-wrap { display: contents; }
  .walk-stage .phone { grid-row: 1; }
  .walk-now { grid-row: 2; display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-top: 4px; }
  .walk-roll { position: relative; display: block; height: 1.5em; min-width: 9ch; overflow: hidden; font-family: var(--font-display); font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.5; color: var(--ink); text-align: right; }
  .walk-roll span { display: block; white-space: nowrap; }
  .walk-roll .out { position: absolute; inset: 0 0 auto auto; animation: walk-out 400ms var(--ease-out) forwards; }
  .walk-roll .in { animation: walk-in 400ms var(--ease-out) both; }
  .walk-count { font-size: 0.875rem; color: var(--faint); font-variant-numeric: tabular-nums; }
  .walk-steps { grid-row: 3; width: min(352px, 100vw); display: flex; gap: 0; } /* 8 x 44px; shrinks only below 352px (folds, 320px Androids) so the page never scrolls sideways */
  .walk-steps li { flex: 1 1 0; min-width: 0; display: flex; }
  .walk-steps button {
    padding: 0; min-height: 44px; border: 0; border-radius: 0; background: transparent; position: relative; overflow: visible;
  }
  .walk-steps button::before, .walk-steps button::after {
    content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px;
  }
  .walk-steps button::before { background: var(--stroke-strong); }
  .walk-steps button::after { bottom: auto; background: var(--green); transform: scaleX(0); opacity: 1; }
  .walk-steps button.is-done::after { transform: scaleX(1); }
  .walk-steps button.is-active, .walk-steps button.is-done { background: transparent; border: 0; }
  .walk-steps button.is-active::after { transform: scaleX(var(--cp, 0)); }
  .walk-steps strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .walk-seek { grid-row: 4; width: min(100%, 340px); }
  /* Phone stays centred on the chapter label; play + speed stack in the side space */
  .walk-ctl {
    grid-row: 1; grid-column: 1; position: absolute; top: 50%; transform: translateY(-50%);
    left: calc(50% - var(--gutter) / 2 + var(--ph) * 0.2404 + 8px); /* abs-pos box starts at the content edge, ends at the padding edge */ flex-direction: column; gap: 10px;
  }
  .walk-speed { flex-direction: column; border-radius: 26px; }
  .walk-speed.pswitch::before { border-radius: 22px; }
  .walk-speed button { padding: 0 2px; min-width: 44px; }
  .walk-stage .shot-caption { grid-row: 7; }
  .walk-line { display: none; } /* can't read it while watching; the rolling chapter label carries the step */
}
@keyframes walk-out { to { transform: translateY(-100%); opacity: 0; } }
@keyframes walk-in { from { transform: translateY(100%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .walk-roll .out { display: none; } .walk-roll .in { animation: none; } }
@media (min-width: 900px) {
  .walk-stage { --ph: clamp(440px, 72svh, 600px); }
  .walk-grid { grid-template-columns: auto minmax(0, 28rem); gap: clamp(40px, 7vw, 96px); justify-content: center; align-items: center; }
  .walk-line { display: none; } /* the description now lives inside the active chapter */
  /* Chapter rail: numbered nodes on a vertical line that fills with playback; the active chapter opens inline.
     min-height reserves the tallest open state so the list never shifts as chapters change. */
  .walk-steps { display: block; counter-reset: ch; min-height: 31rem; }
  .walk-steps li { position: relative; }
  .walk-steps li::before { /* track */
    content: ""; position: absolute; left: 15px; width: 2px; top: 26px; bottom: -26px; background: var(--stroke-strong); border-radius: 2px;
  }
  .walk-steps li:last-child::before { display: none; }
  .walk-steps button {
    counter-increment: ch; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 18px; align-items: start;
    position: relative; overflow: visible; min-height: 52px; padding: 10px 8px 10px 0; border: 0; border-radius: 12px; background: transparent; color: var(--muted);
  }
  .walk-steps button::before { /* chapter node */
    content: counter(ch); grid-row: 1 / span 2; position: relative; z-index: 1; box-sizing: border-box;
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--faint);
    background: var(--bg); border: 1.5px solid var(--stroke-strong);
  }
  .walk-steps button::after { /* playback fill, runs from this node down to the next */
    content: ""; position: absolute; left: 15px; width: 2px; top: 26px; height: 100%; z-index: 0; border-radius: 2px; bottom: auto; right: auto;
    background: var(--green); opacity: 1; transform: scaleY(0); transform-origin: 50% 0;
  }
  .walk-steps li:last-child button::after { display: none; }
  .walk-steps button.is-done::after { transform: scaleY(1); }
  .walk-steps button.is-active::after { transform: scaleY(var(--cp, 0)); }
  .walk-steps strong { align-self: center; min-height: 32px; display: flex; align-items: center; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
  .walk-steps small {
    display: block; grid-column: 2; max-height: 0; overflow: hidden; opacity: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--muted);
    transition: max-height 420ms var(--ease-out), opacity 280ms var(--ease-out);
  }
  .walk-steps button:hover { color: var(--ink); }
  .walk-steps button:hover::before { border-color: var(--green); }
  .walk-steps button.is-done { border: 0; }
  .walk-steps button.is-done::before { content: "\2713"; background: var(--green); border-color: var(--green); color: #0B0F14; font-size: 0.875rem; }
  .walk-steps button.is-active { background: transparent; border: 0; color: var(--ink); }
  .walk-steps button.is-active::before { content: counter(ch); color: var(--green-ink); border-color: var(--green); background: color-mix(in srgb, var(--green) 14%, var(--bg)); box-shadow: 0 0 0 5px var(--green-tint); }
  .walk-steps button.is-active strong { font-size: 1.375rem; }
  .walk-steps button.is-active small { max-height: 8em; opacity: 1; padding: 2px 0 6px; }
  .walk-steps button.is-done strong { color: var(--muted); }
  .walk-steps button:focus-visible { outline-offset: -2px; }
}
@media (min-width: 900px) and (prefers-reduced-motion: reduce) { .walk-steps small { transition: none; } .walk-steps button::after { transition: none; } }

/* Final CTA: own vertical padding (section + section zeroes it), content centred */
section.final { padding: clamp(112px, 14vw, 184px) 0; }
.hl { color: var(--green-ink); }

/* ---------- Comparison table (Home) ---------- */
.cmp-wrap { position: relative; overflow-x: auto; border: 1px solid var(--stroke); border-radius: var(--radius); background: var(--bg-2); -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; min-width: 880px; border-collapse: separate; border-spacing: 0; font-size: 0.95rem; }
.cmp th, .cmp td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--stroke); line-height: 1.4; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp thead th { font-family: var(--font-display); font-weight: 600; color: var(--muted); font-size: 0.9rem; vertical-align: bottom; background: var(--bg-2); }
.cmp tbody th { font-weight: 600; color: var(--ink); width: 210px; min-width: 210px; background: var(--bg-2); }
.cmp th:first-child { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--stroke); }
.cmp td { color: var(--muted); }
.cmp td.y, .cmp td.n, .cmp td.p { display: table-cell; }
.cmp-mark { display: inline-flex; width: 26px; height: 26px; flex: none; }
.cmp-mark svg { width: 26px; height: 26px; stroke-width: 2.5; }
.cmp td.y .cmp-mark { color: var(--green-ink); }
.cmp td.n .cmp-mark { color: var(--danger); }
.cmp td.p .cmp-mark { color: var(--warning); }
.cmp td.y { color: var(--ink); }
.cmp thead th.cmp-us { color: var(--green-on-tint); background: var(--green-tint); border-top: 2px solid var(--green); }
.cmp td:nth-child(2) { background: var(--green-tint); color: var(--ink); font-weight: 500; }
.cmp-note { margin-top: 16px; color: var(--faint); font-size: 0.875rem; max-width: 46rem; }
.cmp-hint { display: none; margin-top: 10px; color: var(--faint); font-size: 0.85rem; }

@media (min-width: 900px) { .cmp { min-width: 0; } }
@media (max-width: 767px) { .cmp tbody th { width: 150px; min-width: 150px; } .cmp th, .cmp td { padding: 12px; } }

/* ---------- Sticky mobile CTA: a floating dock with one full-width button ---------- */
.sticky-cta { display: none; }
@media (max-width: 1023px) {
  .sticky-cta { border-radius: 24px;
    display: flex; align-items: center;
    position: fixed; z-index: 45;
    left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    max-width: 560px; margin-inline: auto;
    padding: 8px;
    background: var(--nav-glass);
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--stroke-strong);
    box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 14px 36px -8px rgba(0,0,0,0.55), 0 4px 10px rgba(0,0,0,0.25);
    opacity: 0; visibility: hidden; transform: translateY(calc(100% + 24px)) scale(0.98);
    transition: opacity 240ms ease, transform 520ms cubic-bezier(.16,1,.3,1), visibility 0s linear 520ms;
  }
  [data-theme="light"] .sticky-cta {
    background: var(--nav-glass);
    box-shadow: 0 14px 36px -10px rgba(11,15,20,0.22), 0 3px 8px rgba(11,15,20,0.08);
  }
  .sticky-cta.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .sticky-cta .btn { flex: 1; justify-content: center; white-space: nowrap; min-height: 48px; padding: 0 18px; border-radius: 16px; gap: 8px;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--green) 70%, transparent); }
  .sticky-cta .btn svg { width: 16px; height: 16px; transition: transform 200ms cubic-bezier(.16,1,.3,1); }
  .sticky-cta .btn:active { transform: scale(0.97); }
  .sticky-cta .btn:hover svg { transform: translateX(2px); }
  /* bar = 8 + 48 + 8 + 2 border, floating 12px above the edge: keep the last legal line clear of it */
  body:has(.sticky-cta) .footer { padding-bottom: calc(36px + 78px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: opacity var(--dur-fast) var(--ease-out), visibility 0s; transform: none; } }

/* Comparison table: icons only, centred, with a key */
.cmp td { text-align: center; vertical-align: middle; }
.cmp thead th:not(.cmp-corner) { text-align: center; }
.cmp tbody th { vertical-align: middle; }
.cmp-key { list-style: none; display: flex; flex-wrap: wrap; gap: 20px; margin: 0 0 16px; padding: 0; color: var(--muted); font-size: 0.95rem; }
.cmp-key li { display: inline-flex; align-items: center; gap: 8px; }
.cmp-key .cmp-mark, .cmp-key .cmp-mark svg { width: 20px; height: 20px; }
.cmp-key .y .cmp-mark { color: var(--green-ink); } .cmp-key .n .cmp-mark { color: var(--danger); } .cmp-key .p .cmp-mark { color: var(--warning); }
.cmp { table-layout: fixed; width: 100%; }
.cmp thead th.cmp-corner, .cmp tbody th { width: 24%; }
/* Phones: one competitor at a time beside Safqos, picked from chips, so the table fits without sideways scrolling. */
.cmp-pick { display: none; }
@media (max-width: 899px) {
  .cmp-pick { display: grid; gap: 10px; margin: 0 0 14px; }
  .cmp-pick-label { font-size: 0.875rem; font-weight: 600; color: var(--muted); }
  .cmp-pick-opts { grid-template-columns: 1fr 1fr; grid-auto-flow: row; border-radius: 26px; }
  .cmp-pick-opts > button { padding: 8px 12px; text-align: center; }
  .cmp-wrap { overflow: hidden; }
  .cmp, .cmp { width: 100%; min-width: 0; }
  .cmp thead th.cmp-corner, .cmp tbody th { width: 46%; min-width: 0; }
  .cmp thead th:not(.cmp-corner) { width: 27%; }
  .cmp th:first-child { position: static; box-shadow: none; }
  .cmp th, .cmp td { padding: 12px 10px; }
  .cmp tbody th { font-size: 0.9rem; }
  .cmp thead th { font-size: 0.85rem; }
  .cmp-hint { display: none !important; }
  .cmp-wrap[data-vs="3"] :is(th, td):not(:nth-child(1), :nth-child(2), :nth-child(3)) { display: none; }
  .cmp-wrap[data-vs="4"] :is(th, td):not(:nth-child(1), :nth-child(2), :nth-child(4)) { display: none; }
  .cmp-wrap[data-vs="5"] :is(th, td):not(:nth-child(1), :nth-child(2), :nth-child(5)) { display: none; }
  .cmp-wrap[data-vs="6"] :is(th, td):not(:nth-child(1), :nth-child(2), :nth-child(6)) { display: none; }
}

/* Home: audience links under the stories, chart under the stat cards */
.audience-links { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px 28px; font-weight: 600; }
.audience-links a { color: var(--green-ink); display: inline-flex; align-items: center; gap: 6px; }
.audience-links a svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.audience-links a:hover svg { transform: translateX(3px); }
.numbers-chart { margin-top: 40px; }

/* Narrowest phones (folded foldables, 320px): keep pill groups inside the gutter. */
@media (max-width: 359px) {
  .tc-tabs button { padding: 8px 6px; font-size: 0.85rem; }
}
@media (max-width: 959px) { .faq-nav a { display: inline-flex; align-items: center; min-height: 44px; } }

.fn-body blockquote p:first-child { color: var(--ink); font-size: 1.125em; font-weight: 500; line-height: 1.45; }

/* Desktop: the header floats as a long glass pill. */
@media (min-width: 1024px) {
  :root { --nav-h: 84px; }
  .nav { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; padding-top: 12px; height: var(--nav-h); }
  .nav.is-scrolled { border-bottom: 0; }
  .nav-inner {
    height: 62px; max-width: min(1200px, calc(100% - 48px)); padding: 0 10px 0 26px;
    border-radius: 999px; border: 1px solid var(--stroke-strong);
    background: var(--nav-glass);
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 12px 32px -12px rgba(0,0,0,0.55);
    transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }
  [data-theme="light"] .nav-inner { background: var(--nav-glass); box-shadow: 0 10px 28px -12px rgba(11,15,20,0.18); }
  /* The pill floats over the first section, so that section runs up under it. */
  .nav { margin-bottom: calc(-1 * var(--nav-h)); }
  main > .hero:first-child { padding-top: calc(var(--nav-h) + var(--hero-pad)); min-height: 100vh; min-height: 100svh; }
  main > .page-hero:not(.hero):first-child { padding-top: calc(var(--nav-h) + clamp(40px, 6vw, 80px)); }
  .logo img { height: 27px; }
  .nav-actions .nav-cta { border-radius: 999px; padding: 0 20px; }
  .theme-toggle { border-radius: 999px; }
}

/* Header glass: darker than the page so it reads as a tinted layer, still translucent. */
:root { --nav-glass: rgba(4, 7, 10, 0.5); }
:root[data-theme="light"] { --nav-glass: rgba(255, 255, 255, 0.55); }
/* Header: Liquid Glass, after the web recipe at namethatui.com/styles/liquid-glass (capsule, heavy blur + saturation,
   inner specular rims top and bottom; the web cannot refract, so no lensing). Light = clear glass; dark = Apple's tinted
   variant. Fill is the minimum that keeps nav text >= 4.5:1 over the darkest thing that scrolls under it (the phone
   screens). Reduced-transparency and no-blur fallbacks further down still win. */
:root { --lg-fill: rgba(10, 13, 17, 0.64); --lg-rim-top: rgba(255, 255, 255, 0.28); --lg-rim-bot: rgba(255, 255, 255, 0.1);
  --lg-edge: rgba(255, 255, 255, 0.14); --lg-drop: 0 12px 32px -12px rgba(0, 0, 0, 0.6); }
:root[data-theme="light"] { --lg-fill: rgba(255, 255, 255, 0.42); --lg-rim-top: rgba(255, 255, 255, 0.95); --lg-rim-bot: rgba(255, 255, 255, 0.5);
  --lg-edge: rgba(255, 255, 255, 0.6); --lg-drop: 0 10px 30px -12px rgba(11, 15, 20, 0.18); }
.nav-inner {
  background: var(--lg-fill);
  border: 1px solid var(--lg-edge);
  -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: inset 0 1px 1px var(--lg-rim-top), inset 0 -1px 1px var(--lg-rim-bot), var(--lg-drop);
}
:root[data-theme="light"] .nav-inner { /* same specificity as the earlier light-theme pill rules, so this wins */
  background: var(--lg-fill);
  box-shadow: inset 0 1px 1px var(--lg-rim-top), inset 0 -1px 1px var(--lg-rim-bot), var(--lg-drop);
}
:root[data-theme="light"] .nav-links a { color: #2E343C; }

/* Switches share the header's Liquid Glass: the track is a glass capsule (same --lg-* tokens, lighter blur), the sliding
   pill is a green-tinted glass droplet with its own specular rims. The pill is not blurred itself (no nested backdrop filters). */
.pswitch {
  background: var(--lg-fill); border: 1px solid var(--lg-edge);
  -webkit-backdrop-filter: blur(10px) saturate(1.6); backdrop-filter: blur(10px) saturate(1.6);
  box-shadow: inset 0 1px 1px var(--lg-rim-top), inset 0 -1px 1px var(--lg-rim-bot), 0 6px 18px -10px rgba(0, 0, 0, 0.45);
}
:root[data-theme="light"] .pswitch { box-shadow: inset 0 1px 1px var(--lg-rim-top), inset 0 -1px 1px var(--lg-rim-bot), 0 6px 18px -10px rgba(11, 15, 20, 0.14); }
.pswitch::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%),
    color-mix(in srgb, var(--green) 20%, transparent);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 -1px 1px rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px color-mix(in srgb, var(--green) 50%, transparent),
    0 6px 16px -8px color-mix(in srgb, var(--green) 55%, transparent);
}
:root[data-theme="light"] .pswitch::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.25) 60%),
    color-mix(in srgb, var(--green) 16%, transparent);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 1), inset 0 -1px 1px rgba(255, 255, 255, 0.6),
    inset 0 0 0 1px color-mix(in srgb, var(--green) 45%, transparent),
    0 6px 14px -8px color-mix(in srgb, var(--green) 45%, transparent);
}
:root:not([data-theme="light"]) .nav-links a { color: #C9D2DA; }

@media (hover: none) { .icon-btn:hover { border-color: transparent; color: var(--muted); } }
:root { --menu-glass: rgba(6, 9, 13, 0.95); }
:root[data-theme="light"] { --menu-glass: rgba(255, 255, 255, 0.97); }

/* Footer social icons: each carries its brand tint (--soc). Hover/focus lifts and tints, the glyph tilts with a spring; press squishes;
   a click (site.js adds .is-pop on pointerdown) sends a ring outward. Hover effects only on hover devices; touch gets the press + ring. */
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  --soc: var(--ink);
  position: relative; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px;
  color: var(--muted); border: 1px solid var(--stroke); background: var(--gl-fill-inner);
  transition: transform 340ms var(--ease-expo), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.footer-social .soc-ig { --soc: #FF8FB1; }
.footer-social .soc-x { --soc: #EAF1F5; }
.footer-social .soc-in { --soc: #6DB3F2; }
[data-theme="light"] .footer-social .soc-ig { --soc: #C2185B; }
[data-theme="light"] .footer-social .soc-x { --soc: #0B0F14; }
[data-theme="light"] .footer-social .soc-in { --soc: #0A66C2; }
.footer-social svg { width: 18px; height: 18px; transition: transform 420ms cubic-bezier(.34, 1.56, .64, 1); }
.footer-social a::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--soc); opacity: 0; pointer-events: none;
}
.footer-social a:focus-visible {
  color: var(--soc); border-color: color-mix(in srgb, var(--soc) 60%, transparent); background: color-mix(in srgb, var(--soc) 14%, transparent);
}
@media (hover: hover) {
  .footer-social a:hover {
    color: var(--soc); border-color: color-mix(in srgb, var(--soc) 60%, transparent); background: color-mix(in srgb, var(--soc) 14%, transparent);
    transform: translateY(-3px); box-shadow: 0 12px 22px -12px color-mix(in srgb, var(--soc) 70%, transparent);
  }
  .footer-social a:hover svg, .footer-social a:focus-visible svg { transform: scale(1.14) rotate(-8deg); }
}
.footer-social a:active { transform: scale(0.9); transition-duration: 80ms; color: var(--soc); background: color-mix(in srgb, var(--soc) 18%, transparent); }
.footer-social a.is-pop::after { animation: soc-ring 560ms var(--ease-expo); }
.footer-social a.is-pop svg { animation: soc-pop 420ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes soc-ring { from { opacity: 0.75; transform: scale(0.92); } to { opacity: 0; transform: scale(1.7); } }
@keyframes soc-pop { 40% { transform: scale(1.3) rotate(-12deg); } }
@media (prefers-reduced-motion: reduce) {
  .footer-social a.is-pop svg { animation: none; }
  .footer-social a.is-pop::after { animation: soc-ring-rm 300ms linear; }
  @keyframes soc-ring-rm { from { opacity: 0.6; } to { opacity: 0; } }
}

/* Touch targets: 44px rows for footer and menu links on phones. */
@media (max-width: 767px) {
  .footer-col a, .footer-bottom a { display: flex; align-items: center; min-height: 44px; padding-block: 0; }
  .footer-logo, .audience-links a, .faq-more a { display: inline-flex; align-items: center; min-height: 44px; }
}
.mobile-menu a { min-height: 44px; display: flex; align-items: center; }
.mobile-menu a.mobile-menu-cta { justify-content: center; }

/* Phones: the first section's eyebrow or role toggle clears the floating nav pill by 34px (heroes, role pages and interior pages alike). */
@media (max-width: 1023px) {
  main > .hero:first-child { padding-top: calc(var(--nav-h) + 34px); }
}

/* ---------- Motion: every state change eases instead of snapping ---------- */

/* FAQ + Sources disclosures: Chromium animates the native details content (height + opacity); other engines use the WAAPI fallback in site.js. */
@supports (interpolate-size: allow-keywords) and (selector(::details-content)) {
  .faq-list details::details-content, details.cite::details-content, details.pb-row::details-content {
    block-size: 0; opacity: 0; overflow: clip;
    transition: block-size var(--dur-slow) var(--ease-out), opacity var(--dur-med) var(--ease-out), content-visibility var(--dur-slow) allow-discrete;
  }
  .faq-list details[open]::details-content, details.cite[open]::details-content, details.pb-row[open]::details-content { block-size: auto; opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .faq-list details::details-content, details.cite::details-content, details.pb-row::details-content { transition: none; } }
}
.faq-list summary { transition: color var(--dur-fast) var(--ease-out); }
.faq-nav a { transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }

/* Hover, focus and pressed states */
.nav-links a, .footer-col a { transition: color var(--dur-fast) var(--ease-out); }
.notify-form .btn[disabled] { transition: opacity var(--dur-med) var(--ease-out); }
.notify-form .btn { transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out); }
.notify-form .err, .form-status { transition: color var(--dur-fast) var(--ease-out); }
p a, li a { transition: text-decoration-thickness var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }

/* Walkthrough: chapter highlight, controls, progress edge */
.walk-steps button { transition: color var(--dur-med) var(--ease-out), background-color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out); }
.walk-steps button::after { transition: opacity var(--dur-med) var(--ease-out); }
.walk-speed button { transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.walk-speed button:hover { color: var(--ink); }
/* Video buttons (walkthrough + every recording) share the header's Liquid Glass: same --lg-* tokens as .pswitch. */
.walk-play {
  background: var(--lg-fill); border: 1px solid var(--lg-edge);
  -webkit-backdrop-filter: blur(10px) saturate(1.6); backdrop-filter: blur(10px) saturate(1.6);
  box-shadow: inset 0 1px 1px var(--lg-rim-top), inset 0 -1px 1px var(--lg-rim-bot), 0 6px 18px -10px rgba(0, 0, 0, 0.45);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
:root[data-theme="light"] .walk-play { box-shadow: inset 0 1px 1px var(--lg-rim-top), inset 0 -1px 1px var(--lg-rim-bot), 0 6px 18px -10px rgba(11, 15, 20, 0.14); }
.walk-play:active { transform: scale(0.94); }
.walk-play:hover { border-color: color-mix(in srgb, var(--green) 55%, var(--lg-edge)); }

/* Theme switch: whole-page crossfade via View Transitions (site.js). theme-fade below is the fallback for browsers without it. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 450ms; animation-timing-function: ease-in-out; }
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after {
  transition: background-color var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out), fill var(--dur-slow) var(--ease-out), stroke var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out) !important;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after { transition: none !important; }
}

/* ---------- Glass hints ----------
   Quiet frosted surfaces on content cards, reusing the nav pill's idea (translucent fill, blur, hairline). Never on prose,
   legal pages, the walkthrough or the phone frames. Faint green washes sit behind sections so the frost has colour to pick up. */
:root {
  --gl-fill: rgba(20, 27, 34, 0.64);
  --gl-fill-inner: rgba(23, 31, 39, 0.5);
  --gl-edge: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --gl-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.5);
  --gl-bf: blur(14px) saturate(140%);
  --gl-wash: rgba(22, 199, 132, 0.16);
  --gl-sheen: rgba(255, 255, 255, 0.075); /* diagonal light across the top of a card: reads as glass even over plain dark */
  --gl-line: rgba(255, 255, 255, 0.11);
}
:root[data-theme="light"] {
  --gl-fill: rgba(255, 255, 255, 0.66);
  --gl-fill-inner: rgba(255, 255, 255, 0.55);
  --gl-edge: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --gl-shadow: 0 8px 24px -14px rgba(11, 15, 20, 0.16);
  --gl-bf: blur(14px) saturate(160%);
  --gl-wash: rgba(22, 199, 132, 0.14);
  --gl-sheen: rgba(255, 255, 255, 0.85);
  --gl-line: rgba(11, 15, 20, 0.09);
}
/* Lighter blur on phones; fewer, cheaper layers. */
@media (max-width: 767px) { :root { --gl-bf: blur(6px) saturate(125%); } }

.story, .numbers-card, .notify-form, .split-card, .beta-card, .feature-visual .board, .not-item, .pair-card, .tl, .stat, .gate-wrap, .founding-card, .tchart, .btn-secondary {
  background: linear-gradient(155deg, var(--gl-sheen) 0%, transparent 52%), var(--gl-fill);
  border-color: var(--gl-line);
  -webkit-backdrop-filter: var(--gl-bf); backdrop-filter: var(--gl-bf);
  box-shadow: var(--gl-edge), var(--gl-shadow);
}
/* Rows inside a board sit on the board's frost: tint only, no second blur. */
.ps-row { background: var(--gl-fill-inner); box-shadow: var(--gl-edge); }
/* Wide scrolling table keeps opaque cells (sticky column), so it only gets the edge light and shadow. */
.cmp-wrap { box-shadow: var(--gl-edge), var(--gl-shadow); }
.sticky-cta { box-shadow: var(--gl-edge), 0 14px 36px -8px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.25); }
[data-theme="light"] .sticky-cta { box-shadow: var(--gl-edge), 0 14px 36px -10px rgba(11, 15, 20, 0.22), 0 3px 8px rgba(11, 15, 20, 0.08); }

/* Ambient washes: plain radial gradients on the section background (no filter, no extra layers, no layout). */
section:not(.hero):not(.page-hero):not(.walk):not(.final):not(.faq-cat):nth-of-type(3n+1) {
  background-image: radial-gradient(520px 380px at 28% 45%, var(--gl-wash), transparent 70%), radial-gradient(460px 320px at 78% 70%, var(--gl-wash), transparent 70%);
}
section:not(.hero):not(.page-hero):not(.walk):not(.final):not(.faq-cat):nth-of-type(3n+2) {
  background-image: radial-gradient(520px 380px at 72% 40%, var(--gl-wash), transparent 70%), radial-gradient(460px 320px at 22% 72%, var(--gl-wash), transparent 70%);
}
@media (max-width: 767px) {
  section:not(.hero):not(.page-hero):not(.walk):not(.final):not(.faq-cat):nth-of-type(3n+1),
  section:not(.hero):not(.page-hero):not(.walk):not(.final):not(.faq-cat):nth-of-type(3n+2) {
    background-image: radial-gradient(320px 280px at 30% 35%, var(--gl-wash), transparent 70%), radial-gradient(300px 260px at 75% 70%, var(--gl-wash), transparent 70%);
  }
}

/* Solid fallbacks: no backdrop-filter support, or the user asked for less transparency. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --gl-bf: none; --gl-fill: var(--surface); --gl-fill-inner: var(--surface-2); --nav-glass: rgba(4, 7, 10, 0.96); }
  :root[data-theme="light"] { --gl-fill: #FFFFFF; --gl-fill-inner: #FFFFFF; --nav-glass: rgba(255, 255, 255, 0.97); }
  :root[data-theme="light"] .nav-inner { background: var(--nav-glass); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --gl-sheen: transparent; --gl-bf: none; --gl-fill: var(--surface); --gl-fill-inner: var(--surface-2); --nav-glass: rgba(4, 7, 10, 0.97); }
  :root[data-theme="light"] { --gl-fill: #FFFFFF; --gl-fill-inner: #FFFFFF; --nav-glass: rgba(255, 255, 255, 0.98); }
  .sticky-cta, .nav-inner, .mobile-menu, .pswitch, .walk-play { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pswitch, .walk-play { background: var(--surface); }
  :root[data-theme="light"] .nav-inner { background: var(--nav-glass); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* =====================================================================================================
   PASS 1 SHARED COMPONENTS (reusable on every page; see scratchpad/upgrade/pass1-components.md)
   Utilities: .bar-ready/.in (grow-in).
   Cards below light their outline on hover. Motion: transform/opacity only, ease-expo, all reduced under prefers-reduced-motion.
   ===================================================================================================== */

/* Glass cards: the outline lights up green on hover (fine pointer only). No cursor-following glow (founder: reads as "AI"). */
:is(.story, .numbers-card, .split-card, .beta-card, .pair-card, .tl, .stat, .not-item, .feature-visual .board) { position: relative; isolation: isolate; }
:is(.story, .numbers-card, .split-card, .beta-card, .pair-card, .tl, .stat, .not-item, .feature-visual .board) {
  transition: border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  :is(.story, .numbers-card, .split-card, .beta-card, .pair-card, .tl, .stat, .not-item, .feature-visual .board):hover { border-color: color-mix(in srgb, var(--green) 32%, var(--gl-line)); }

}

/* Icon chip (feature/benefit glyph holder). */
.f-ico {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--green-ink);
  background: var(--green-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 35%, transparent);
  transition: transform 420ms cubic-bezier(.34, 1.56, .64, 1), background-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { .founding-list li:hover .f-ico { transform: translateY(-2px) scale(1.06); } }

/* Faint institutional grid, masked to fade out; static, no filter. */
.final::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.55;
  background-image: linear-gradient(var(--stroke) 1px, transparent 1px), linear-gradient(90deg, var(--stroke) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(55% 70% at 50% 50%, #000, transparent 78%); mask-image: radial-gradient(55% 70% at 50% 50%, #000, transparent 78%);
}
.final .wrap { position: relative; z-index: 1; }

/* Funnel: each row carries a bar sized to its share of 101 (--w set in the markup), growing in once on first view. */
.funnel li { row-gap: 7px; }
.funnel li::before, .funnel li::after { content: ""; grid-column: 1 / -1; grid-row: 2; height: 4px; border-radius: 4px; }
.funnel li::before { background: var(--stroke-strong); }
.funnel li::after { background: linear-gradient(90deg, var(--green), var(--green-soft)); transform-origin: left center; transform: scaleX(var(--w, 0)); transition: transform 900ms var(--ease-expo); transition-delay: calc(var(--k, 0) * 90ms); }
.funnel.bar-ready:not(.in) li::after { transform: scaleX(0); }
.numbers-card .big .count { display: inline-block; font-variant-numeric: tabular-nums; }

/* Comparison table: row hover, Safqos column edge, check marks pop in once. */
@media (hover: hover) {
  .cmp tbody tr:hover > th, .cmp tbody tr:hover > td:not(:nth-child(2)) { background: color-mix(in srgb, var(--ink) 4%, var(--bg-2)); }
  .cmp tbody tr:hover > td:nth-child(2) { background: color-mix(in srgb, var(--green) 20%, transparent); }
}
.cmp tbody th, .cmp td { transition: background-color var(--dur-fast) var(--ease-out); }
.cmp td:nth-child(2) { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--green) 25%, transparent), inset -1px 0 0 color-mix(in srgb, var(--green) 25%, transparent); }
.cmp-mark { transition: opacity 360ms var(--ease-out), transform 520ms cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--r, 0) * 45ms); }
.cmp-wrap.anim-ready:not(.in) .cmp tbody .cmp-mark { opacity: 0; transform: scale(0.5); }

/* Next steps: the connecting rule is a soft gradient. */
.next-steps li:not(:last-child)::before { background: linear-gradient(var(--green), var(--stroke-strong)); opacity: 0.6; }

/* Waitlist form */
.notify-form { transition: border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.notify-form:focus-within { border-color: color-mix(in srgb, var(--green) 38%, var(--gl-line)); }
.notify-form input[type="email"], .notify-form input[type="text"] {
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-size 260ms var(--ease-expo);
  background-repeat: no-repeat; background-position: right 14px center; background-size: 0 0;
}
.notify-form input:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 22%, transparent); }
.notify-form input[aria-invalid="true"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent); animation: field-shake 360ms var(--ease-out); }
.seg[aria-invalid="true"] { animation: field-shake 360ms var(--ease-out); }
@keyframes field-shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@supports selector(:user-valid) {
  .notify-form input:user-valid:not(:placeholder-shown) {
    padding-right: 42px; background-size: 18px 18px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316C784' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>");
  }
}
.seg input:checked + span::before { animation: radio-pop 340ms var(--ease-expo); }
@keyframes radio-pop { from { transform: scale(0.55); } 60% { transform: scale(1.12); } to { transform: scale(1); } }
.seg label:active span { transform: scale(0.985); }
.seg span { transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
/* Sending: a small spinner joins the label. */
.notify-form .btn[disabled]::after { content: ""; width: 14px; height: 14px; margin-left: 2px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Success: the card settles into a confirmation. A glass badge whose check draws itself, one ring pulse, then who signed up. */
.notify-form.is-done { justify-items: center; text-align: center; padding-block: 40px; }
.notify-form.is-done .form-status { display: grid; justify-items: center; gap: 0; width: 100%; color: var(--ink); font-weight: 400; font-size: 1rem; }
.done-badge {
  position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: var(--green-ink);
  background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--green) 26%, transparent), color-mix(in srgb, var(--green) 8%, transparent) 70%);
  border: 1px solid color-mix(in srgb, var(--green) 55%, var(--lg-edge));
  box-shadow: inset 0 1px 1px var(--lg-rim-top), inset 0 -1px 1px var(--lg-rim-bot), 0 12px 28px -14px color-mix(in srgb, var(--green) 70%, transparent);
  animation: success-pop 620ms var(--ease-expo) both;
}
.done-badge svg { width: 34px; height: 34px; }
.done-check { stroke-dasharray: 30; stroke-dashoffset: 0; animation: check-draw 520ms cubic-bezier(.65, 0, .35, 1) 260ms both; }
.done-badge::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--green); opacity: 0; animation: ring-out 900ms var(--ease-out) 420ms both; }
.done-title { margin: 20px 0 0; font-family: var(--font-display); font-size: clamp(1.25rem, 2.4vw, 1.5rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; overflow-wrap: anywhere; }
.done-card { margin: 18px 0 0; width: 100%; max-width: 380px; padding: 4px 16px; border-radius: 14px; text-align: left; background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px solid var(--stroke); }
.done-row { display: grid; grid-template-columns: 4.5rem 1fr; gap: 12px; padding: 11px 0; }
.done-row + .done-row { border-top: 1px solid var(--stroke); }
.done-row dt { margin: 0; font-size: 0.85rem; color: var(--muted); }
.done-row dd { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.done-note { margin: 16px 0 0; max-width: 34em; font-size: 0.9rem; line-height: 1.55; color: var(--muted); }
@keyframes success-pop { from { opacity: 0; transform: scale(0.5); } 55% { opacity: 1; transform: scale(1.08); } to { transform: scale(1); } }
@keyframes check-draw { from { stroke-dashoffset: 30; } }
@keyframes ring-out { from { opacity: 0.6; transform: scale(1); } to { opacity: 0; transform: scale(1.55); } }
@media (prefers-reduced-motion: reduce) { .done-badge, .done-check, .done-badge::after { animation: none; } }
.notify-form.is-done .done-title, .notify-form.is-done .done-card, .notify-form.is-done .done-note { animation: done-rise 520ms var(--ease-expo) both; }
.notify-form.is-done .done-card { animation-delay: 80ms; } .notify-form.is-done .done-note { animation-delay: 140ms; }
@keyframes done-rise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .notify-form.is-done .done-title, .notify-form.is-done .done-card, .notify-form.is-done .done-note { animation: none; } }
/* Errors: an icon leads each message; the form-level message is a tinted callout; an invalid field stays red while focused. */
.notify-form .err:not([hidden]), .form-status.bad { display: flex; align-items: flex-start; gap: 8px; }
.notify-form .err::before, .form-status.bad::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 7.5v5.5M12 16.5h.01'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 7.5v5.5M12 16.5h.01'/></svg>") center / contain no-repeat;
}
.form-status.bad { padding: 12px 14px; border-radius: 12px; font-size: 0.92rem; font-weight: 500; background: color-mix(in srgb, var(--danger) 10%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
.notify-form input[aria-invalid="true"], .notify-form input[aria-invalid="true"]:focus-visible { border-color: var(--danger); outline-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent); }

/* Footer: hairline top edge that fades in from the middle, links nudge on hover. */
.footer { position: relative; border-top: 0; }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--green) 40%, var(--stroke-strong)) 50%, transparent); }
@media (hover: hover) and (min-width: 768px) {
  .footer-col a { transition: color var(--dur-fast) var(--ease-out), transform var(--dur-med) var(--ease-expo); }
  .footer-col a:hover { transform: translateX(3px); }
}
.footer-col a:active { color: var(--green-ink); }
@media (min-width: 768px) { .footer { padding-top: 72px; } }
/* Phones: link columns sit two across under the brand block instead of one long list. */
@media (max-width: 767px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer-top > div:first-child { grid-column: 1 / -1; }
  .footer-col a { overflow-wrap: anywhere; }
}

/* Touch: no sticky hover tints after a tap. */
@media (hover: none) {
  .btn-secondary:hover { border-color: var(--stroke-strong); }
  .split-card:hover { border-color: var(--gl-line); }
  .seg label:hover span { border-color: var(--stroke-strong); }
}
@media (prefers-reduced-motion: reduce) {
  .funnel li::after { transition: none; }
  .notify-form input[aria-invalid="true"], .seg[aria-invalid="true"] { animation: none; }

}

/* =====================================================================================================
   PASS 2: inner pages (everything is scoped under body.inner so the homepage is untouched).
   Reuses Pass 1 tokens (--ease-expo, --green-on-tint, --gl-*, --lift), grow-in (.in).
   Motion: transform/opacity only, <= 520ms, ease-expo; hover effects only on hover devices; all of it off under reduced motion.
   ===================================================================================================== */

@keyframes p2-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Page heroes without a phone: a faint masked grid and a soft wash, content rises in once on load. */
.inner .page-hero:not(.hero) { position: relative; isolation: isolate; }
.inner .page-hero:not(.hero)::before, .inner .page-hero:not(.hero)::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.inner .page-hero:not(.hero)::before {
  opacity: 0.5; background-image: linear-gradient(var(--stroke) 1px, transparent 1px), linear-gradient(90deg, var(--stroke) 1px, transparent 1px); background-size: 56px 56px; background-position: right top;
  -webkit-mask-image: radial-gradient(60% 90% at 88% 0%, #000, transparent 75%); mask-image: radial-gradient(60% 90% at 88% 0%, #000, transparent 75%);
}
.inner .page-hero:not(.hero)::after { background: radial-gradient(520px 300px at 8% 0%, var(--gl-wash), transparent 70%); }
.inner .page-hero:not(.hero) .wrap > *, .inner .page-hero .hero-grid > div:first-child > *, .inner .page-hero .hero-stage { animation: p2-rise 520ms var(--ease-expo) both; }
.inner .page-hero .wrap > :nth-child(2), .inner .page-hero .hero-grid > div:first-child > :nth-child(2) { animation-delay: 70ms; }
.inner .page-hero .wrap > :nth-child(3), .inner .page-hero .hero-grid > div:first-child > :nth-child(3) { animation-delay: 140ms; }
.inner .page-hero .hero-grid > div:first-child > :nth-child(n+4) { animation-delay: 210ms; }
.inner .page-hero .hero-stage { animation-delay: 120ms; animation-duration: 640ms; }

/* Section rhythm: a hairline that fades at both ends, with a short green segment at its centre, sits in the gap between content sections. */
.inner main > section:not(.hero):not(.page-hero) + section:not(.final) { position: relative; }
.inner main > section:not(.hero):not(.page-hero) + section:not(.final)::before {
  content: ""; position: absolute; top: calc(var(--section-y) / -2); left: 50%; transform: translateX(-50%); pointer-events: none;
  width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--wrap) - 2 * var(--gutter)); height: 1px;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--green) 70%, transparent), transparent) center / 120px 1px no-repeat,
    linear-gradient(90deg, transparent, var(--stroke-strong) 18%, var(--stroke-strong) 82%, transparent);
}

/* Pills: role-typed dot, tabular, same family as the switch. */
.inner .pill { padding: 4px 11px 4px 9px; }
.inner .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.inner .pill-investor::before { background: var(--investor); }

/* List glyphs become small chips (green for what it does, red for what it does not). */
.inner :is(.feature-text, .split-card) li > svg {
  box-sizing: content-box; width: 14px; height: 14px; padding: 4px; margin-top: 2px; border-radius: 50%; flex: none;
  background: var(--green-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 32%, transparent);
}
.inner .split-card:nth-child(2) li > svg { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 30%, transparent); }
.inner .split-card:nth-child(2) li > svg + span { color: var(--muted); }

/* "What Safqos is not": the glyph sits in a red-tinted chip; it tips a little on hover. */
.inner .not-item { align-items: flex-start; }
.inner .not-item > svg {
  box-sizing: content-box; width: 20px; height: 20px; padding: 10px; margin-top: 0; border-radius: 12px; flex: none;
  background: color-mix(in srgb, var(--danger) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 30%, transparent);
  transition: transform 420ms cubic-bezier(.34, 1.56, .64, 1);
}
@media (hover: hover) { .inner .not-item:hover > svg { transform: rotate(-8deg) scale(1.06); } }

/* Timeline (About): each card carries a rail that reads Now -> Next -> Later, drawn in once. */
.inner .tl { padding-top: 32px; }
.inner .tl::after {
  content: ""; position: absolute; z-index: 1; left: 24px; right: 24px; top: 0; height: 3px; border-radius: 0 0 3px 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--green), var(--green-soft)); transform-origin: left center;
  transition: transform 900ms var(--ease-expo); transition-delay: calc(var(--k, 0) * 140ms);
}
.inner .tl.dim::after { background: linear-gradient(90deg, color-mix(in srgb, var(--green) 45%, transparent), var(--stroke-strong)); }
.inner .tl.dim ~ .tl.dim::after { background: var(--stroke-strong); }
.inner .timeline.rows-ready:not(.in) .tl::after { transform: scaleX(0); }
.inner .tl .when {
  display: inline-flex; align-items: center; gap: 8px; padding: 3px 11px 3px 9px; border-radius: 999px; font-size: 0.8125rem; letter-spacing: 0.02em;
  color: var(--green-on-tint); background: var(--green-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 35%, transparent);
}
.inner .tl .when::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); }
.inner .tl.dim .when { color: var(--muted); background: color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: inset 0 0 0 1px var(--stroke); }
.inner .tl.dim .when::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint); }

/* Comparison columns (Startups, Businesses): the Safqos column is edged in green; rows light up on hover. */

.inner .stat .n { font-variant-numeric: tabular-nums; }
.inner .stat .n.count { display: inline-block; }

/* Tables: status pills, a tinted "after" column, row hover, quiet scrollbar. */
.inner .gate-wrap { scrollbar-width: thin; scrollbar-color: var(--stroke-strong) transparent; }
.inner .gate-table th { color: var(--faint); }
.inner .gate-table thead th:nth-child(3) { color: var(--green-on-tint); }
.inner .gate-table :is(th, td):nth-child(3) { background: color-mix(in srgb, var(--green) 5%, transparent); }
.inner .gate-table td { transition: background-color var(--dur-fast) var(--ease-out); }
.inner .gate-table .st { padding: 4px 12px 4px 9px; border-radius: 999px; font-size: 0.875rem; background: color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: inset 0 0 0 1px var(--stroke); }
.inner .gate-table .st.vis { color: var(--ink); }
.inner .gate-table .st.lock { color: var(--muted); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.inner .gate-table .st.open { color: var(--green-on-tint); background: var(--green-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 35%, transparent); }

@media (hover: hover) {
  .inner .gate-table tbody tr:hover td { background: color-mix(in srgb, var(--ink) 4%, transparent); }
  .inner .gate-table tbody tr:hover td:nth-child(3) { background: color-mix(in srgb, var(--green) 10%, transparent); }

}

/* Phones: the gate table fits the screen (pills wrap) instead of scrolling sideways. */
@media (max-width: 640px) {
  .inner .gate-wrap { padding: 4px 8px; }
  .inner .gate-table th, .inner .gate-table td { padding: 12px 6px; }
  .inner .gate-table th:nth-child(1), .inner .gate-table td:nth-child(1) { min-width: 0; width: 38%; }
  .inner .gate-table th { font-size: 0.7rem; letter-spacing: 0.02em; }
  .inner .gate-table .st { white-space: normal; align-items: flex-start; font-size: 0.875rem; line-height: 1.3; padding: 5px 9px 5px 7px; border-radius: 14px; }
  .inner .gate-table .st svg { margin-top: 2px; flex: none; }
}

/* Fact rows (Trust & safety): a small marker, and the row tints on hover. */
.inner .facts .fact-row { margin: 0 -12px; padding: 22px 12px; transition: background-color var(--dur-med) var(--ease-out); }
.inner .facts .fact-row strong::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--green); vertical-align: 3px; }
@media (hover: hover) { .inner .facts .fact-row:hover { background: color-mix(in srgb, var(--green) 5%, transparent); } }

/* Criteria boards: legible rows, state pills, rows rise in once, hover nudges. */
.inner .ps-row { border-color: var(--gl-line); transition: transform var(--dur-med) var(--ease-expo), border-color var(--dur-fast) var(--ease-out); }
.inner .ps-row .txt .t { font-size: 13.5px; }
.inner .ps-row .txt .d { font-size: 12px; }
.inner .ps-row .state { padding: 3px 9px; border-radius: 999px; font-size: 10.5px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.inner .ps-row .state.open { color: var(--green-on-tint); background: var(--green-tint); }
.inner .ps-row.open .ico { color: var(--green-on-tint); }
@media (hover: hover) { .inner .ps-row:hover { transform: translateX(3px); border-color: color-mix(in srgb, var(--green) 32%, var(--gl-line)); } }
.inner .ps-list.rows-ready:not(.in) .ps-row { opacity: 0; }
.inner .ps-list.rows-ready.in .ps-row { animation: p2-rise 520ms var(--ease-expo) backwards; animation-delay: calc(var(--k, 0) * 80ms); }

/* Flow steps: a chevron chip links one step to the next (sideways on desktop, down on phones). */
.inner .flow-step { position: relative; }
.inner .flow-step + .flow-step::before {
  content: ""; position: absolute; width: 28px; height: 28px; border-radius: 50%; pointer-events: none;
  background: var(--gl-fill) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316C784' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>") center / 14px no-repeat;
  box-shadow: inset 0 0 0 1px var(--gl-line), var(--gl-shadow);
  left: 50%; top: -34px; margin-left: -14px; transform: rotate(90deg);
}
@media (min-width: 900px) {
  .inner .flow { container-type: inline-size; }
  .inner .flow-step + .flow-step::before { top: 216px; margin-left: 0; transform: none; left: calc(-1 * ((100cqw - 48px) / 3 - 276px) / 2 - 14px); }
}
.inner .flow-step .n { box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 20%, transparent); }

/* Goodbye pairs: a small arrow chip sits on the rule between what goes and what replaces it. */
.inner .pair-card .now { position: relative; margin-top: 4px; }
.inner .pair-card .now::before {
  content: ""; position: absolute; left: 0; top: -12px; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--gl-line);
  background: var(--green-tint) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316C784' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 6v12M7 13l5 5 5-5'/></svg>") center / 13px no-repeat;
}
.inner .pair-card .now { padding-top: 22px; }
/* The rule starts after the chip: the chip's tint is translucent, so a full-width border showed through it. */
.inner .pair-card .now { border-top: 0; }
.inner .pair-card .now::after { content: ""; position: absolute; left: 34px; right: 0; top: -1px; height: 1px; background: var(--stroke); }
.inner .price-rows li { margin: 0 -10px; padding: 12px 10px; transition: background-color var(--dur-fast) var(--ease-out); }
@media (hover: hover) { .inner .price-rows li:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); } }

/* About: the opening paragraph reads as a lead. */
.inner .prose > p:first-child { font-size: 1.1875rem; line-height: 1.6; }

/* FAQ page: calm accordions that become a quiet panel when open; the category nav follows the reader. */
.inner .faq-body .faq-list { border-top: 0; display: grid; gap: 6px; }
.inner .faq-body .faq-list details { border: 1px solid transparent; border-radius: 16px; transition: background-color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out); }
.inner .faq-body .faq-list details[open] { background: var(--gl-fill-inner); border-color: var(--gl-line); }
.inner .faq-body .faq-list summary { padding: 16px 16px; min-height: 56px; border-radius: 16px; }
.inner .faq-body .faq-list .a { padding: 0 16px 20px; }
.inner .faq-body .faq-list summary svg { box-sizing: content-box; width: 14px; height: 14px; padding: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--stroke-strong); transition: transform var(--dur-med) var(--ease-expo), color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.inner .faq-body .faq-list details[open]:not(.is-closing) summary svg { background: var(--green-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 45%, transparent); color: var(--green-on-tint); }
@media (hover: hover) { .inner .faq-body .faq-list details:not([open]):hover { background: color-mix(in srgb, var(--ink) 3%, transparent); } }
.inner .faq-nav a { transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.inner .faq-nav a:active { transform: scale(0.97); }
.inner .faq-nav a[aria-current="true"] { color: var(--green-on-tint); border-color: color-mix(in srgb, var(--green) 55%, transparent); background: var(--green-tint); }
@media (min-width: 960px) { .inner .faq-nav a[aria-current="true"] { border-color: transparent; } }

/* Legal pages (Terms, Privacy, Support, Delete account): calm and readable. A measure of about 68 characters, generous leading,
   numbered contents with a quiet underline on hover, section rules, no motion beyond link states. */
.inner .legal { max-width: 46rem; }
.inner .legal :is(p, li) { color: color-mix(in srgb, var(--ink) 82%, var(--bg)); line-height: 1.72; }
.inner .legal strong { color: var(--ink); }
.inner .legal h2 { scroll-margin-top: calc(var(--nav-h) + 20px); margin: 2.4em 0 0.7em; padding-top: 1.5em; border-top: 1px solid var(--stroke); font-size: 1.375rem; }
.inner .legal h2:first-child, .inner .legal .toc + h2 { margin-top: 1.6em; }
.inner .legal .updated { display: inline-flex; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--stroke); font-size: 0.875rem; color: var(--muted); }
.inner .legal .toc { padding: 22px 26px; border-radius: var(--radius); }
.inner .legal .toc li::marker { color: var(--green-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.inner .legal .toc a {
  color: var(--ink); text-decoration: none; background: linear-gradient(var(--green), var(--green)) 0 100% / 0 1px no-repeat; transition: background-size 280ms var(--ease-expo), color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { .inner .legal .toc a:hover { background-size: 100% 1px; color: var(--green-ink); } }
.inner .legal .callout { padding: 16px 20px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--green) 7%, transparent); border: 1px solid color-mix(in srgb, var(--green) 25%, var(--stroke)); }
.inner .legal .callout p { margin: 0; }
.inner .legal table { font-variant-numeric: tabular-nums; }
.inner .legal tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.inner .legal-task ol:not(.toc ol) { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 10px; counter-reset: step; }
.inner .legal-task ol > li {
  counter-increment: step; position: relative; margin: 0; padding: 14px 16px 14px 58px; border-radius: 14px; background: var(--gl-fill-inner); border: 1px solid var(--gl-line);
}
.inner .legal-task ol > li::before {
  content: counter(step); position: absolute; left: 14px; top: 12px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  background: var(--green-tint); color: var(--green-on-tint); font-weight: 700; font-size: 0.875rem; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 35%, transparent);
}

/* 404: an outlined numeral behind the copy. */
.inner .nf .wrap { position: relative; }
.inner .nf .wrap::after {
  content: "404" / ""; position: absolute; right: var(--gutter); bottom: -0.1em; z-index: -1; pointer-events: none; font: 700 clamp(5.5rem, 19vw, 14rem) / 0.8 var(--font-display); letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--green) 24%, transparent); animation: p2-rise 800ms var(--ease-expo) 120ms both;
}

@media (prefers-reduced-motion: reduce) {
  .inner .page-hero .wrap > *, .inner .page-hero .hero-grid > div:first-child > *, .inner .page-hero .hero-stage, .inner .nf .wrap::after, .inner .ps-list.rows-ready.in .ps-row { animation: none !important; }
  .inner .tl::after, .inner .not-item > svg, .inner .ps-row { transition: none; }
  .inner .timeline.rows-ready:not(.in) .tl::after { transform: none; }
  .inner .ps-list.rows-ready:not(.in) .ps-row { opacity: 1; }
}