/* ═══════════════════════════════════════════════════════════════
   HERARX — LANDING DESIGN SYSTEM v2
   Geist · Amber accent · Ink dark
   All landing + auth pages.
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens ────────────────────────────────────────────────── */
:root {
  /* Palette */
  --ink:        oklch(10.0% 0.015 255);
  --ink-1:      oklch(14.2% 0.013 255);
  --ink-2:      oklch(18.8% 0.011 255);
  --ink-3:      oklch(23.5% 0.010 255);
  --ink-4:      oklch(29.0% 0.009 255);

  /* Text ramp */
  --t-hi:   oklch(95.5% 0.005 95);
  --t-mid:  oklch(74.0% 0.007 255);
  --t-lo:   oklch(55.0% 0.008 255);
  --t-xlo:  oklch(40.0% 0.008 255);

  /* Amber — the ONE emphasis color */
  --amber:       oklch(74.0% 0.165 68);
  --amber-lo:    oklch(60.0% 0.12  68);
  --amber-bg:    oklch(14.5% 0.04  68);
  --amber-line:  oklch(40.0% 0.10  68);

  /* Amber variants for light surfaces — default to bright amber (dark zone fallback) */
  --amber-text:  var(--amber);   /* remapped inside .page-body to pass 4.5:1 */
  --amber-icon:  var(--amber);   /* remapped inside .page-body to pass 3:1   */

  /* Borders */
  --border:   oklch(22.0% 0.012 255);
  --border-2: oklch(30.0% 0.010 255);

  /* Status */
  --ok:  oklch(68% 0.18 145);
  --err: oklch(60% 0.22  25);

  /* Typography */
  --font: 'Geist', 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* Fluid type scale */
  --tx-xs:  clamp(0.688rem, 0.5vw + 0.58rem, 0.75rem);
  --tx-sm:  clamp(0.813rem, 0.6vw + 0.69rem, 0.875rem);
  --tx-md:  clamp(0.938rem, 0.7vw + 0.80rem, 1.0rem);
  --tx-lg:  clamp(1.063rem, 0.9vw + 0.88rem, 1.125rem);
  --tx-xl:  clamp(1.25rem,  1.2vw + 1.0rem,  1.375rem);
  --tx-2xl: clamp(1.5rem,   2.0vw + 1.1rem,  1.875rem);
  --tx-3xl: clamp(1.875rem, 3.0vw + 1.2rem,  2.5rem);
  --tx-4xl: clamp(2.25rem,  4.0vw + 1.3rem,  3.25rem);
  --tx-5xl: clamp(2.75rem,  5.0vw + 1.5rem,  4.5rem);

  /* Spacing */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;
  --s-4: 16px;  --s-5: 20px;  --s-6: 24px;
  --s-8: 32px;  --s-10: 40px; --s-12: 48px;
  --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* Radii */
  --r-1: 3px;  --r-2: 6px;  --r-3: 10px;  --r-4: 16px;

  /* Easing */
  --expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index */
  --z-nav:   200;
  --z-panel: 300;
  --z-modal: 400;

  /* Layout */
  --max-w: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
}

/* ── Minimal reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: oklch(10.0% 0.015 255); }
img, picture, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul[class] { list-style: none; }

/* ── Base ──────────────────────────────────────────────────── */
.landing {
  font-family: var(--font);
  font-size: var(--tx-md);
  line-height: 1.6;
  color: var(--t-hi);
  background: var(--ink);
  overflow-x: hidden;
  min-height: 100vh;
}

/* ── Layout ────────────────────────────────────────────────── */
.l-wrap {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.l-section { padding-block: clamp(64px, 8vw, 120px); }
.l-section--dense { padding-block: clamp(40px, 5vw, 72px); }
.l-section--panel {
  background: var(--ink-1);
  border-block: 1px solid var(--border);
}

/* ── Announce bar ──────────────────────────────────────────── */
.lp-announce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: 9px var(--gutter);
  font-size: var(--tx-xs);
  font-weight: 500;
  color: var(--t-mid);
  background: var(--ink-1);
  border-bottom: 1px solid var(--border);
}
.lp-announce-dot {
  width: 6px; height: 6px;
  background: var(--amber);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-dot 2.5s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.lp-announce-link {
  color: var(--amber);
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.15s;
}
.lp-announce-link:hover { opacity: 0.75; }

/* ── Navigation ────────────────────────────────────────────── */
.lp-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: 56px;
  background: oklch(10.0% 0.015 255 / 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s;
}
.lp-nav--scrolled { border-color: var(--border); }
.lp-nav-inner {
  display: flex;
  align-items: center;
  height: 56px;
  gap: var(--s-4);
}
.lp-nav-brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  color: var(--t-hi);
  flex-shrink: 0;
  font-weight: 700;
  font-size: var(--tx-md);
  letter-spacing: -0.02em;
}
.lp-nav-logo { width: 30px; height: 30px; }
.lp-nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  margin-inline: auto;
}
.lp-nav-link {
  font-size: var(--tx-sm);
  font-weight: 500;
  color: var(--t-lo);
  text-decoration: none;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-1);
  transition: color 0.15s;
  white-space: nowrap;
}
.lp-nav-link:hover, .lp-nav-link.active { color: var(--t-hi); }
.lp-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}
.lp-cta-signin {
  font-size: var(--tx-sm);
  font-weight: 500;
  color: var(--t-lo);
  text-decoration: none;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-1);
  transition: color 0.15s;
  white-space: nowrap;
}
.lp-cta-signin:hover { color: var(--t-hi); }

/* ── "More" nav dropdown (CSS-only: hover + focus-within) ──── */
.lp-nav-dd { position: relative; }
.lp-nav-dd .lp-nav-link { display: inline-flex; align-items: center; gap: 5px; }
/* the trigger is a <button> so it needs the anchor look explicitly */
button.lp-nav-dd-trigger { background: none; border: 0; cursor: pointer; font-family: var(--font); }
.lp-nav-dd-chev { font-size: 8px; transition: transform 0.15s var(--expo); }
.lp-nav-dd:hover .lp-nav-dd-chev,
.lp-nav-dd:focus-within .lp-nav-dd-chev { transform: rotate(180deg); }
.lp-nav-dd-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  min-width: 236px;
  padding: 6px;
  background: var(--ink-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-3);
  box-shadow: 0 18px 44px -18px oklch(0% 0 0 / 0.7);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) scale(0.97);
  transform-origin: top center;
  transition: opacity 0.15s var(--expo), transform 0.15s var(--expo), visibility 0.15s;
  z-index: var(--z-panel);
}
/* invisible bridge so the pointer can cross the gap under the trigger */
.lp-nav-dd-menu::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -10px;
  height: 10px;
}
.lp-nav-dd:hover .lp-nav-dd-menu,
.lp-nav-dd:focus-within .lp-nav-dd-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
}
.lp-nav-dd-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--r-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s;
}
.lp-nav-dd-item:hover { background: var(--ink-2); }
.lp-nav-dd-item > i { width: 17px; text-align: center; color: var(--amber); font-size: 14px; flex-shrink: 0; }
.lp-nav-dd-item > span { display: flex; flex-direction: column; gap: 1px; }
.lp-nav-dd-title { font-size: var(--tx-sm); font-weight: 550; color: var(--t-hi); }
.lp-nav-dd-sub { font-size: 11px; color: var(--t-lo); }
@media (prefers-reduced-motion: reduce) {
  .lp-nav-dd-menu { transition: opacity 0.15s; transform: translateX(-50%) scale(1); }
  .lp-nav-dd-chev { transition: none; }
}

/* ── Hamburger ─────────────────────────────────────────────── */
.lp-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  background: none;
  border: 1px solid var(--border-2);
  border-radius: var(--r-1);
  cursor: pointer;
  flex-shrink: 0;
}
.lp-hamburger span {
  display: block; width: 14px; height: 1.5px;
  background: var(--t-mid); border-radius: 1px;
  transition: all 0.2s;
}
.lp-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.lp-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.lp-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.lp-mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--ink-1);
  border-bottom: 1px solid var(--border);
  padding: var(--s-4) var(--gutter) var(--s-5);
}
.lp-mobile-nav.open { display: flex; }
.lp-mobile-link {
  font-size: var(--tx-md);
  font-weight: 500;
  color: var(--t-mid);
  text-decoration: none;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  transition: color 0.15s;
}
.lp-mobile-link:last-of-type { border-bottom: none; }
.lp-mobile-link:hover, .lp-mobile-link.active { color: var(--t-hi); }
.lp-mobile-actions {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
.lp-mobile-auth-link {
  flex: 1; text-align: center;
  padding: 10px var(--s-4);
  border-radius: var(--r-2);
  font-size: var(--tx-sm); font-weight: 600;
  color: var(--t-mid);
  text-decoration: none;
  border: 1px solid var(--border-2);
  transition: all 0.15s;
}
.lp-mobile-auth-link:hover { color: var(--t-hi); background: var(--ink-2); }
.lp-mobile-auth-btn {
  flex: 1; text-align: center;
  padding: 10px var(--s-4);
  border-radius: var(--r-2);
  font-size: var(--tx-sm); font-weight: 600;
  background: var(--amber);
  color: oklch(12% 0.02 68);
  text-decoration: none;
  transition: background 0.15s;
}
.lp-mobile-auth-btn:hover { background: oklch(78% 0.17 68); }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font);
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s var(--expo);
  line-height: 1;
}
.btn--sm  { font-size: var(--tx-sm); padding: var(--s-2) var(--s-4); border-radius: var(--r-2); }
.btn--md  { font-size: var(--tx-md); padding: 10px var(--s-5);       border-radius: var(--r-2); }
.btn--lg  { font-size: var(--tx-md); padding: 13px var(--s-6);       border-radius: var(--r-2); }
.btn--xl  { font-size: var(--tx-lg); padding: 15px var(--s-8);       border-radius: var(--r-2); }

.btn--primary { background: var(--amber); color: oklch(12% 0.02 68); }
.btn--primary:hover { background: oklch(78% 0.17 68); transform: translateY(-1px); color: oklch(10% 0.02 68); }
.btn--ghost  { background: transparent; color: var(--t-mid); border: 1px solid var(--border-2); }
.btn--ghost:hover { color: var(--t-hi); border-color: var(--border-2); background: var(--ink-2); }

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: clamp(40px, 6vw, 80px);
  padding-block: clamp(72px, 10vw, 120px) clamp(64px, 8vw, 100px);
  position: relative;
}

/* Subtle dot-grid: structural, not decorative */
.hero::before {
  content: '';
  position: absolute;
  inset: -30% -5%;
  background-image: radial-gradient(oklch(32% 0.012 255) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 70% 70% at 40% 40%, black 30%, transparent 80%);
}

.hero__copy {
  position: relative;
  z-index: 1;
  padding-top: var(--s-4);
}

.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--tx-xs);
  font-weight: 600;
  color: var(--amber);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: var(--s-6);
}
.hero__tag::before {
  content: '';
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--amber-lo);
}

.hero h1 {
  font-size: var(--tx-5xl);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--t-hi);
  margin-bottom: var(--s-6);
  text-wrap: balance;
}

.hero__lede {
  font-size: var(--tx-lg);
  line-height: 1.72;
  color: var(--t-mid);
  max-width: 46ch;
  margin-bottom: clamp(var(--s-8), 4vw, var(--s-10));
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}

.hero__caption {
  font-size: var(--tx-xs);
  color: var(--t-xlo);
  line-height: 1.55;
}
.hero__caption a {
  color: var(--t-lo);
  text-decoration: none;
  transition: color 0.15s;
}
.hero__caption a:hover { color: var(--t-mid); }

/* Hero visual */
.hero__visual { position: relative; z-index: 1; }
.hero__frame {
  background: var(--ink-1);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow:
    0 1px 0 var(--border-2),
    0 24px 64px oklch(5% 0.02 255 / 0.8),
    0 4px 16px oklch(5% 0.02 255 / 0.5);
}
.hero__frame img { display: block; width: 100%; height: auto; }

/* ── Signal strip ──────────────────────────────────────────── */
.signal-strip {
  padding-block: var(--s-5);
  border-block: 1px solid var(--border);
  overflow: hidden;
}
.signal-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--s-6), 4vw, var(--s-12));
  flex-wrap: nowrap;
}
.signal-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--tx-sm);
  font-weight: 500;
  color: var(--t-lo);
  white-space: nowrap;
  flex-shrink: 0;
}
.signal-item i { color: var(--amber); font-size: 11px; }

/* ── Marquee ───────────────────────────────────────────────── */
.marquee-section {
  overflow: hidden;
  border-block: 1px solid var(--border);
  padding-block: var(--s-3);
  background: var(--ink-1);
}
.marquee-track {
  display: flex;
  gap: var(--s-3);
  animation: marquee 42s linear infinite;
  width: max-content;
}
.marquee-item {
  font-size: var(--tx-xs);
  font-weight: 600;
  color: var(--t-xlo);
  white-space: nowrap;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  flex-shrink: 0;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Audience: horizontal definition rows (not cards) ──────── */
.audience-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  align-items: baseline;
  gap: clamp(var(--s-8), 4vw, var(--s-16));
  padding-block: clamp(var(--s-8), 4vw, var(--s-12));
  border-bottom: 1px solid var(--border);
}
.audience-row:first-child { border-top: 1px solid var(--border); }
.audience-name {
  font-size: var(--tx-2xl);
  font-weight: 600;
  color: var(--t-hi);
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.audience-desc {
  font-size: var(--tx-md);
  line-height: 1.72;
  color: var(--t-mid);
  max-width: 58ch;
  margin-bottom: var(--s-3);
}
.audience-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--tx-sm);
  font-weight: 600;
  color: var(--amber);
  text-decoration: none;
  transition: gap 0.18s var(--expo);
}
.audience-link:hover { gap: var(--s-3); }

/* ── Section heads ─────────────────────────────────────────── */
.section-head { margin-bottom: clamp(var(--s-10), 5vw, var(--s-16)); }
.section-head--center { text-align: center; }
.section-head h2 {
  font-size: var(--tx-4xl);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.07;
  color: var(--t-hi);
  margin-bottom: var(--s-4);
  text-wrap: balance;
}
.section-head p {
  font-size: var(--tx-lg);
  line-height: 1.65;
  color: var(--t-mid);
  max-width: 54ch;
}
.section-head--center p { margin-inline: auto; }

/* ── Security: numbered spec sheet ────────────────────────── */
.security-spec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  overflow: hidden;
}
.security-item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: var(--s-5);
  padding: clamp(var(--s-6), 3vw, var(--s-8));
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: var(--ink-1);
  transition: background 0.15s;
}
.security-item:hover { background: var(--ink-2); }
.security-item:nth-child(2n)       { border-right: none; }
.security-item:nth-last-child(-n+2) { border-bottom: none; }
.security-num {
  font-size: var(--tx-sm);
  font-weight: 700;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
  flex-shrink: 0;
}
.security-content h3 {
  font-size: var(--tx-md);
  font-weight: 600;
  color: var(--t-hi);
  margin-bottom: var(--s-2);
  letter-spacing: -0.01em;
}
.security-content p {
  font-size: var(--tx-sm);
  line-height: 1.65;
  color: var(--t-mid);
}

/* ── Screenshot tabs ───────────────────────────────────────── */
.ss-group { display: flex; flex-direction: column; gap: var(--s-4); }
.ss-tabs { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.ss-tabs--center { justify-content: center; }
.ss-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 7px var(--s-4);
  border-radius: var(--r-2);
  font-size: var(--tx-sm);
  font-weight: 500;
  color: var(--t-lo);
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.15s;
}
.ss-tab:hover { color: var(--t-hi); border-color: var(--border-2); background: var(--ink-2); }
.ss-tab.active {
  color: var(--t-hi);
  border-color: var(--amber-line);
  background: var(--amber-bg);
}
.ss-tab i { font-size: 11px; }
.ss-panel { display: none; }
.ss-panel.active { display: block; }

.ss-frame {
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--ink-1);
  box-shadow: 0 16px 40px oklch(5% 0.02 255 / 0.5);
}
.ss-frame img { display: block; width: 100%; height: auto; }
/* All product screenshots are captured at a uniform 16:10, so panels stay the
   same height across tab switches; object-fit guards any odd-sized straggler. */
.ss-frame--clip img { aspect-ratio: 16 / 10; height: auto; object-fit: cover; object-position: top; }

.ss-meta {
  margin-top: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--ink-1);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
}
.ss-meta-title {
  font-size: var(--tx-sm);
  font-weight: 600;
  color: var(--t-hi);
  margin-bottom: var(--s-1);
}
.ss-meta p {
  font-size: var(--tx-sm);
  line-height: 1.6;
  color: var(--t-mid);
}

/* ── Showcase split ────────────────────────────────────────── */
.showcase-split {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(var(--s-10), 6vw, var(--s-20));
  align-items: start;
}
.showcase-split--flip .showcase-copy  { order: 2; }
.showcase-split--flip .showcase-visual { order: 1; }

.showcase-copy h2 {
  font-size: var(--tx-3xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--t-hi);
  margin-bottom: var(--s-4);
  text-wrap: balance;
}
.showcase-copy > p {
  font-size: var(--tx-md);
  line-height: 1.72;
  color: var(--t-mid);
  margin-bottom: var(--s-6);
}
.feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-8);
}
.feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--tx-sm);
  color: var(--t-mid);
  line-height: 1.55;
}
.feature-item i { color: var(--amber); font-size: 10px; margin-top: 4px; flex-shrink: 0; }

/* ── Phone strip ───────────────────────────────────────────── */
.phone-strip {
  display: flex;
  gap: var(--s-6);
  overflow-x: auto;
  padding: var(--s-2) var(--s-1) var(--s-5);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  scroll-snap-type: x proximity;
}
/* Centre the strip when it fits the viewport; scroll from the left edge when it doesn't */
.phone-strip > .phone-item:first-child { margin-left: auto; }
.phone-strip > .phone-item:last-child { margin-right: auto; }
.phone-strip::-webkit-scrollbar { height: 3px; }
.phone-strip::-webkit-scrollbar-track { background: transparent; }
.phone-strip::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.phone-item { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; scroll-snap-align: center; }
.phone-frame {
  width: 220px;
  border-radius: 32px;
  overflow: hidden;
  /* Visible bezel that reads as a phone frame */
  border: 6px solid oklch(28% 0.012 255);
  box-shadow:
    0 0 0 1px oklch(18% 0.010 255),
    0 0 0 2px oklch(36% 0.012 255),
    0 24px 52px oklch(4% 0.02 255 / 0.9),
    inset 0 1px 0 oklch(44% 0.010 255 / 0.5);
  background: oklch(6% 0.01 255);
}
.phone-frame img { display: block; width: 100%; height: auto; }
/* Backward-compat for old .phone-mockup class */
.phone-mockup {
  border-radius: 32px; overflow: hidden;
  border: 6px solid oklch(28% 0.012 255);
  box-shadow: 0 0 0 1px oklch(18% 0.01 255), 0 20px 44px oklch(4% 0.02 255 / 0.85);
}
.phone-label {
  margin-top: var(--s-3);
  font-size: var(--tx-xs);
  font-weight: 500;
  color: var(--t-xlo);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Steps ─────────────────────────────────────────────────── */
.steps-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-8);
  position: relative;
}
.steps-row::before {
  content: '';
  position: absolute;
  top: 21px;
  left: calc(12.5% + 10px);
  right: calc(12.5% + 10px);
  height: 1px;
  background: var(--border);
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-4);
}
.step-num {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  background: var(--ink-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--tx-sm);
  font-weight: 700;
  color: var(--t-lo);
  position: relative;
  z-index: 1;
  transition: all 0.2s;
}
.step:hover .step-num { border-color: var(--amber-line); background: var(--amber-bg); color: var(--amber); }
.step-title { font-size: var(--tx-sm); font-weight: 600; color: var(--t-hi); }
.step p     { font-size: var(--tx-sm); line-height: 1.6; color: var(--t-mid); }

/* ── Origin quote ──────────────────────────────────────────── */
.origin {
  padding-block: clamp(var(--s-16), 8vw, var(--s-32));
  text-align: center;
}
.origin blockquote {
  font-size: clamp(1.25rem, 2.5vw + 0.8rem, 1.875rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  color: var(--t-hi);
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: var(--s-5);
  letter-spacing: -0.01em;
  quotes: none;
  text-wrap: balance;
}
.origin cite {
  font-size: var(--tx-sm);
  font-style: normal;
  color: var(--t-xlo);
  display: block;
}

/* ── Pricing (homepage summary) ────────────────────────────── */
.pricing-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.pc {
  padding: clamp(var(--s-6), 3vw, var(--s-8));
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--ink-1);
  transition: border-color 0.15s;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.pc:hover { border-color: var(--border-2); }
.pc--featured {
  border-color: var(--amber-line);
  background: var(--ink-2);
}
.pc--featured:hover { border-color: var(--amber); }
.pc-tier {
  font-size: var(--tx-xs);
  font-weight: 700;
  color: var(--t-xlo);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pc--featured .pc-tier { color: var(--amber-lo); }
.pc-popular {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  color: oklch(12% 0.02 68);
  background: var(--amber);
  padding: 2px var(--s-3);
  border-radius: var(--r-1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  align-self: flex-start;
}
.pc-price {
  font-size: var(--tx-4xl);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--t-hi);
  line-height: 1;
}
.pc-period { font-size: var(--tx-sm); color: var(--t-lo); margin-top: var(--s-1); }
.pc-lines  { display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.pc-line {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--tx-sm);
  color: var(--t-mid);
  line-height: 1.45;
}
.pc-line i { color: var(--amber); font-size: 10px; margin-top: 3px; flex-shrink: 0; }

/* ── Full pricing page ─────────────────────────────────────── */
.pricing-tabs {
  display: none;
  border-radius: var(--r-2);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: var(--s-6);
}
.pricing-tab {
  flex: 1;
  padding: var(--s-3) var(--s-3);
  border: none;
  border-right: 1px solid var(--border);
  background: var(--ink-1);
  font-size: var(--tx-sm); font-weight: 600;
  color: var(--t-lo);
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.15s;
}
.pricing-tab:last-child { border-right: none; }
.pricing-tab.active { background: var(--amber-bg); color: var(--amber); }

.pricing-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  align-items: start;
}
.pcard {
  padding: var(--s-8);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--ink-1);
  position: relative;
  overflow: hidden;
}
.pcard--featured { border-color: var(--amber-line); background: var(--ink-2); }
.pcard--featured::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--amber);
}
.pcard-tier {
  font-size: var(--tx-xs); font-weight: 700;
  color: var(--t-xlo); letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.pcard--featured .pcard-tier { color: var(--amber-lo); }
.pcard-popular {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700;
  color: oklch(12% 0.02 68); background: var(--amber);
  padding: 2px var(--s-3); border-radius: var(--r-1);
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.pcard-price { font-size: var(--tx-5xl); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--t-hi); }
.pcard--featured .pcard-price { color: var(--amber); }
.pcard-period { font-size: var(--tx-sm); color: var(--t-lo); margin-top: var(--s-1); margin-bottom: var(--s-5); }
.pcard-desc   { font-size: var(--tx-sm); color: var(--t-mid); line-height: 1.6; margin-bottom: var(--s-6); }
.pcard-features { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-6); }
.pcard-feature {
  display: flex; align-items: flex-start; gap: var(--s-2);
  font-size: var(--tx-sm); color: var(--t-mid); line-height: 1.5;
}
.pcard-feature i { color: var(--amber); font-size: 10px; margin-top: 3px; flex-shrink: 0; }
.pcard-feature.locked { color: var(--t-xlo); }
.pcard-feature.locked i { color: var(--t-xlo); }
.pcard-more { display: none; flex-direction: column; gap: var(--s-3); margin-top: var(--s-3); }
.pcard-more.open { display: flex; }
.pcard-toggle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--tx-xs); font-weight: 600; color: var(--t-lo);
  background: none; border: none; cursor: pointer; font-family: var(--font);
  padding: 0; margin-bottom: var(--s-5); transition: color 0.15s;
}
.pcard-toggle:hover { color: var(--t-mid); }
.pcard[data-plan] { display: block; }

/* What's always free */
.commit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
  max-width: 800px;
  margin-inline: auto;
}
.commit-item {
  padding: var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--ink-1);
}
.commit-item i { font-size: 18px; color: var(--amber); margin-bottom: var(--s-4); display: block; }
.commit-item h3 { font-size: var(--tx-md); font-weight: 600; color: var(--t-hi); margin-bottom: var(--s-3); }
.commit-item p  { font-size: var(--tx-sm); color: var(--t-mid); line-height: 1.65; }

/* ── FAQ ───────────────────────────────────────────────────── */
.faq-list { max-width: 680px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item[open] { border-color: var(--border-2); }
.faq-item summary {
  padding: var(--s-5) 0;
  cursor: pointer;
  font-size: var(--tx-md); font-weight: 600; color: var(--t-hi);
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 18px; font-weight: 300;
  color: var(--t-lo); flex-shrink: 0;
  transition: transform 0.2s, color 0.2s;
}
.faq-item[open] summary::after { transform: rotate(45deg); color: var(--amber); }
.faq-answer {
  padding: 0 0 var(--s-5);
  font-size: var(--tx-sm); line-height: 1.72; color: var(--t-mid);
}

/* ── Features grid ─────────────────────────────────────────── */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-4);
}
.feat-card {
  padding: var(--s-8);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--ink-1);
  transition: border-color 0.15s, background 0.15s;
}
.feat-card:hover { border-color: var(--border-2); background: var(--ink-2); }
.feat-icon {
  font-size: 18px;
  color: var(--amber);
  margin-bottom: var(--s-5);
}
.feat-card h3 {
  font-size: var(--tx-md); font-weight: 600; color: var(--t-hi);
  margin-bottom: var(--s-3); letter-spacing: -0.01em;
}
.feat-card p { font-size: var(--tx-sm); line-height: 1.65; color: var(--t-mid); }
.feat-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.feat-tag {
  font-size: 11px; font-weight: 500;
  color: var(--t-xlo);
  background: var(--ink-2); border: 1px solid var(--border);
  border-radius: var(--r-1); padding: 2px var(--s-2);
}

/* ── About ─────────────────────────────────────────────────── */
.about-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s-10), 6vw, var(--s-20));
  align-items: start;
}
.about-intro h1 {
  font-size: var(--tx-5xl); font-weight: 700;
  letter-spacing: -0.035em; line-height: 1.06;
  color: var(--t-hi); text-wrap: balance;
  margin-bottom: var(--s-5);
}
.about-intro > p, .about-intro .about-lede {
  font-size: var(--tx-lg); line-height: 1.72; color: var(--t-mid);
}
.about-pull {
  padding: var(--s-8);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--ink-1);
}
.about-pull blockquote {
  font-size: var(--tx-xl); font-style: italic; font-weight: 400;
  line-height: 1.55; color: var(--t-hi);
  margin-bottom: var(--s-4); quotes: none;
}
.about-pull cite { font-size: var(--tx-sm); font-style: normal; color: var(--t-xlo); }
.about-story { max-width: 68ch; margin-inline: auto; }
.about-story p {
  font-size: var(--tx-lg); line-height: 1.8;
  color: var(--t-mid); margin-bottom: var(--s-6); text-wrap: pretty;
}
.about-story p:last-child { margin-bottom: 0; }
.about-story strong { font-weight: 600; color: var(--t-hi); }
.values-list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4);
}
.value-item {
  padding: var(--s-8); border: 1px solid var(--border);
  border-radius: var(--r-3); background: var(--ink-1);
}
.value-item h3 { font-size: var(--tx-md); font-weight: 600; color: var(--t-hi); margin-bottom: var(--s-3); }
.value-item p  { font-size: var(--tx-sm); line-height: 1.65; color: var(--t-mid); }

/* Roadmap items */
.road-list { max-width: 680px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--s-3); }
.road-item { display: flex; gap: var(--s-4); padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-2); background: var(--ink-1); }
.road-icon {
  width: 32px; height: 32px; border-radius: var(--r-1);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}
.road-item--done .road-icon  { background: oklch(20% 0.05 142); color: var(--ok); }
.road-item--wip .road-icon   { background: oklch(20% 0.05 68);  color: var(--amber); }
.road-item--plan .road-icon  { background: var(--ink-2); color: var(--t-lo); }
.road-item strong { font-size: var(--tx-sm); font-weight: 700; color: var(--t-hi); display: block; margin-bottom: var(--s-1); }
.road-item--done strong { color: var(--ok); }
.road-item--wip strong  { color: var(--amber); }
.road-item--plan strong { color: var(--t-lo); }
.road-item span { font-size: var(--tx-sm); color: var(--t-mid); line-height: 1.55; }

/* ── Use cases ─────────────────────────────────────────────── */
.uc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-4); }
.uc-card {
  display: block; text-decoration: none;
  padding: var(--s-8);
  border: 1px solid var(--border); border-radius: var(--r-3);
  background: var(--ink-1);
  transition: border-color 0.2s, background 0.2s;
}
.uc-card:hover { border-color: var(--amber-line); background: var(--ink-2); }
.uc-card-icon { font-size: 22px; color: var(--amber); margin-bottom: var(--s-5); }
.uc-card h3 {
  font-size: var(--tx-lg); font-weight: 600; color: var(--t-hi);
  margin-bottom: var(--s-3); letter-spacing: -0.01em;
}
.uc-card > p { font-size: var(--tx-sm); line-height: 1.65; color: var(--t-mid); margin-bottom: var(--s-4); }
.uc-card-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.uc-card-tag {
  font-size: 11px; font-weight: 500;
  color: var(--t-xlo); background: var(--ink-3);
  border-radius: var(--r-1); padding: 2px var(--s-2);
}
.uc-card-cta {
  font-size: var(--tx-sm); font-weight: 600; color: var(--amber);
  display: flex; align-items: center; gap: var(--s-2);
  transition: gap 0.18s var(--expo);
}
.uc-card:hover .uc-card-cta { gap: var(--s-3); }

.uc-value { display: flex; gap: clamp(var(--s-6), 4vw, var(--s-10)); flex-wrap: wrap; margin-bottom: var(--s-12); }
.uc-value-item { display: flex; gap: var(--s-4); align-items: flex-start; flex: 1; min-width: 200px; }
.uc-value-icon { font-size: 18px; color: var(--amber); flex-shrink: 0; margin-top: 2px; }
.uc-value-item strong { font-size: var(--tx-sm); font-weight: 600; color: var(--t-hi); display: block; margin-bottom: var(--s-1); }
.uc-value-item span   { font-size: var(--tx-sm); color: var(--t-mid); line-height: 1.55; }

/* Spoke pages */
.spoke-hero { padding-block: clamp(64px, 8vw, 100px); }
.spoke-hero h1 { font-size: var(--tx-5xl); font-weight: 700; letter-spacing: -0.035em; line-height: 1.06; margin-bottom: var(--s-5); text-wrap: balance; }
.spoke-hero p  { font-size: var(--tx-lg); color: var(--t-mid); line-height: 1.7; max-width: 60ch; margin-bottom: var(--s-8); }
.spoke-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-4); }
.spoke-feature { padding: var(--s-6); border: 1px solid var(--border); border-radius: var(--r-3); background: var(--ink-1); }
.spoke-feature h3 { font-size: var(--tx-md); font-weight: 600; color: var(--t-hi); margin-bottom: var(--s-3); }
.spoke-feature p  { font-size: var(--tx-sm); color: var(--t-mid); line-height: 1.65; }
/* .spoke-workflow is the INLINE workflow list in the hero sidebar — uses -item classes */
.spoke-workflow { display: flex; flex-direction: column; }
/* .spoke-step-n = old backward-compat step number (different from .spoke-step-num) */
.spoke-step-n {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border-2);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--tx-xs); font-weight: 700; color: var(--amber);
  flex-shrink: 0;
}
/* Spoke step text used in old inline pattern */
.spoke-workflow .spoke-step { display: grid; grid-template-columns: 48px 1fr; gap: var(--s-5); padding-block: var(--s-6); border-bottom: 1px solid var(--border); }
.spoke-workflow .spoke-step:last-child { border-bottom: none; }
.spoke-workflow .spoke-step h4 { font-size: var(--tx-md); font-weight: 600; color: var(--t-hi); margin-bottom: var(--s-2); }
.spoke-workflow .spoke-step p  { font-size: var(--tx-sm); color: var(--t-mid); line-height: 1.65; }
.spoke-cta-band {
  padding: clamp(40px, 5vw, 64px) var(--gutter);
  background: var(--ink-1); border: 1px solid var(--border);
  border-radius: var(--r-3); text-align: center;
  margin-block: var(--s-16);
}
.spoke-cta-band h2 { font-size: var(--tx-3xl); font-weight: 700; letter-spacing: -0.025em; margin-bottom: var(--s-4); text-wrap: balance; }
.spoke-cta-band p  { font-size: var(--tx-md); color: var(--t-mid); line-height: 1.65; max-width: 54ch; margin-inline: auto; margin-bottom: var(--s-8); }
.spoke-also { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
.spoke-also-link {
  font-size: var(--tx-sm); font-weight: 600; color: var(--t-lo);
  text-decoration: none;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--border); border-radius: var(--r-2);
  transition: all 0.15s;
}
.spoke-also-link:hover { color: var(--amber); border-color: var(--amber-line); background: var(--amber-bg); }

/* ── Blog ──────────────────────────────────────────────────── */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-5); }
.blog-card {
  text-decoration: none; display: flex; flex-direction: column;
  padding: var(--s-6); border: 1px solid var(--border); border-radius: var(--r-3);
  background: var(--ink-1); transition: border-color 0.15s, background 0.15s;
}
.blog-card:hover { border-color: var(--border-2); background: var(--ink-2); }
.bl-cat-pill { font-size: 11px; font-weight: 600; color: var(--amber-lo); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--s-3); }
.blog-card h3 { font-size: var(--tx-lg); font-weight: 600; color: var(--t-hi); line-height: 1.3; margin-bottom: var(--s-3); letter-spacing: -0.01em; text-wrap: balance; }
.blog-card > p { font-size: var(--tx-sm); color: var(--t-mid); line-height: 1.6; flex: 1; }
.blog-card-meta { font-size: var(--tx-xs); color: var(--t-xlo); margin-top: var(--s-4); }
.blog-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-8); }
.blog-filter-btn {
  font-size: var(--tx-sm); font-weight: 500; color: var(--t-lo);
  background: var(--ink-1); border: 1px solid var(--border); border-radius: var(--r-2);
  padding: var(--s-2) var(--s-4); cursor: pointer; font-family: var(--font); transition: all 0.15s;
}
.blog-filter-btn:hover, .blog-filter-btn.active { color: var(--amber); border-color: var(--amber-line); background: var(--amber-bg); }

/* Blog post prose */
.blog-post-hero { padding-block: clamp(56px, 7vw, 88px); }
.blog-post-hero h1 { font-size: var(--tx-4xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: var(--s-5); text-wrap: balance; max-width: 20ch; }
.blog-post-meta { font-size: var(--tx-sm); color: var(--t-lo); }
.blog-prose { max-width: 70ch; }
.blog-prose h2 { font-size: var(--tx-2xl); font-weight: 700; color: var(--t-hi); margin-top: var(--s-10); margin-bottom: var(--s-4); letter-spacing: -0.025em; }
.blog-prose h3 { font-size: var(--tx-xl); font-weight: 600; color: var(--t-hi); margin-top: var(--s-8); margin-bottom: var(--s-3); }
.blog-prose p  { font-size: var(--tx-lg); color: var(--t-mid); line-height: 1.8; margin-bottom: var(--s-5); text-wrap: pretty; }
.blog-prose ul, .blog-prose ol { padding-left: var(--s-6); margin-bottom: var(--s-5); }
.blog-prose li { font-size: var(--tx-md); color: var(--t-mid); line-height: 1.72; margin-bottom: var(--s-2); }
.blog-prose strong { font-weight: 600; color: var(--t-hi); }
.blog-prose a { color: var(--amber); text-decoration: underline; text-underline-offset: 2px; }

/* ── Contact ────────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(var(--s-10), 6vw, var(--s-20));
  align-items: start;
  padding-bottom: var(--s-24);
}
.contact-form-box {
  padding: clamp(var(--s-6), 3vw, var(--s-10));
  border: 1px solid var(--border); border-radius: var(--r-3);
  background: var(--ink-1);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.form-group { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-5); }
.form-group label { font-size: var(--tx-sm); font-weight: 600; color: var(--t-mid); }
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  background: var(--ink-2); border: 1px solid var(--border);
  border-radius: var(--r-2); padding: 10px var(--s-4);
  font-size: var(--tx-sm); color: var(--t-hi);
  font-family: var(--font); transition: border-color 0.15s; outline: none;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--t-xlo); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--amber-line);
  box-shadow: 0 0 0 3px var(--amber-bg);
}
.form-group select { cursor: pointer; }
.form-group select option { background: var(--ink-2); }
.form-group textarea { resize: vertical; min-height: 120px; }
.contact-info-cards { display: flex; flex-direction: column; gap: var(--s-4); }
.contact-info-card { padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-3); background: var(--ink-1); }
.contact-info-card h4 { font-size: var(--tx-sm); font-weight: 600; color: var(--t-hi); margin-bottom: var(--s-2); }
.contact-info-card p  { font-size: var(--tx-sm); color: var(--t-mid); line-height: 1.6; }
.contact-success { text-align: center; padding: var(--s-20) var(--s-8); }
.contact-success-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--amber-bg); border: 1px solid var(--amber-line);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--amber); margin: 0 auto var(--s-6);
}
.contact-success h2 { font-size: var(--tx-3xl); font-weight: 700; margin-bottom: var(--s-3); letter-spacing: -0.02em; }
.contact-success p  { font-size: var(--tx-md); color: var(--t-mid); margin-bottom: var(--s-8); }

/* ── Page heroes ───────────────────────────────────────────── */
.page-hero { padding-block: clamp(56px, 8vw, 96px) clamp(40px, 5vw, 64px); }
.page-hero--center { text-align: center; }
.page-hero h1 { font-size: var(--tx-5xl); font-weight: 700; letter-spacing: -0.035em; line-height: 1.06; margin-bottom: var(--s-5); text-wrap: balance; }
.page-hero--center h1 { max-width: 18ch; margin-inline: auto; }
.page-hero p { font-size: var(--tx-lg); color: var(--t-mid); line-height: 1.65; max-width: 54ch; }
.page-hero--center p { margin-inline: auto; }

/* ── Privacy / Terms prose ─────────────────────────────────── */
.prose { max-width: 72ch; margin-inline: auto; }
.prose h2 { font-size: var(--tx-2xl); font-weight: 700; color: var(--t-hi); margin-top: var(--s-12); margin-bottom: var(--s-4); letter-spacing: -0.025em; }
.prose h3 { font-size: var(--tx-xl); font-weight: 600; color: var(--t-hi); margin-top: var(--s-8); margin-bottom: var(--s-3); }
.prose p  { font-size: var(--tx-md); color: var(--t-mid); line-height: 1.8; margin-bottom: var(--s-5); text-wrap: pretty; }
.prose ul, .prose ol { padding-left: var(--s-6); margin-bottom: var(--s-5); }
.prose li { font-size: var(--tx-md); color: var(--t-mid); line-height: 1.72; margin-bottom: var(--s-2); }
.prose strong { font-weight: 600; color: var(--t-hi); }
.prose a { color: var(--amber); text-decoration: underline; text-underline-offset: 2px; }

/* ── Auth pages ────────────────────────────────────────────── */
.auth-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.auth-brand {
  background: var(--ink-1);
  border-right: 1px solid var(--border);
  padding: clamp(40px, 5vw, 64px);
  display: flex;
  flex-direction: column;
}
.auth-brand-logo {
  display: flex; align-items: center; gap: var(--s-2);
  text-decoration: none; margin-bottom: var(--s-16);
}
.auth-brand-logo-img { width: 26px; height: 26px; }
.auth-brand-name { font-size: var(--tx-md); font-weight: 700; color: var(--t-hi); letter-spacing: -0.02em; }
.auth-brand-content { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.auth-brand-tag {
  font-size: var(--tx-xs); font-weight: 600; color: var(--amber);
  letter-spacing: 0.07em; text-transform: uppercase;
  margin-bottom: var(--s-4);
  display: flex; align-items: center; gap: var(--s-2);
}
.auth-brand-tag::before { content: ''; display: inline-block; width: 18px; height: 1px; background: var(--amber-lo); }
.auth-brand h1 {
  font-size: clamp(1.5rem, 3vw + 0.8rem, 2.25rem);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.1;
  color: var(--t-hi); margin-bottom: var(--s-3); text-wrap: balance;
}
.auth-brand-sub   { font-size: var(--tx-sm); color: var(--t-lo); line-height: 1.65; margin-bottom: var(--s-8); }
.auth-brand-social { font-size: var(--tx-sm); font-weight: 500; color: var(--t-mid); margin-top: var(--s-2); margin-bottom: var(--s-8); }
.auth-features { display: flex; flex-direction: column; gap: var(--s-3); }
.auth-feature { display: flex; align-items: center; gap: var(--s-3); font-size: var(--tx-sm); color: var(--t-lo); }
.auth-feature i { font-size: 12px; color: var(--amber); width: 16px; flex-shrink: 0; }
.auth-brand-footer {
  font-size: var(--tx-xs); color: var(--t-xlo); line-height: 1.55;
  padding-top: var(--s-8); border-top: 1px solid var(--border);
  margin-top: var(--s-16);
}

/* Form panel — light background */
.auth-form-panel {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(32px, 5vw, 64px);
  background: oklch(97% 0.004 255);
}
.auth-card { width: 100%; max-width: 420px; }
.auth-card-hd { margin-bottom: var(--s-6); }
.auth-eyebrow {
  font-size: var(--tx-xs); font-weight: 600;
  color: oklch(46% 0.12 68);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: var(--s-2); display: block;
}
.auth-card-hd h2 {
  font-size: var(--tx-3xl); font-weight: 700;
  letter-spacing: -0.025em; color: oklch(12% 0.015 255);
  margin-bottom: var(--s-2);
}
.auth-card-hd p { font-size: var(--tx-sm); color: oklch(48% 0.008 255); }
.auth-form { display: flex; flex-direction: column; gap: var(--s-4); }
.auth-field { display: flex; flex-direction: column; gap: var(--s-2); }
.auth-label { font-size: var(--tx-sm); font-weight: 600; color: oklch(28% 0.012 255); }
.auth-input {
  width: 100%; padding: 10px var(--s-4);
  background: #fff; border: 1px solid oklch(84% 0.006 255);
  border-radius: var(--r-2); font-size: var(--tx-sm);
  color: oklch(12% 0.015 255); font-family: var(--font);
  transition: border-color 0.15s, box-shadow 0.15s; outline: none;
}
.auth-input::placeholder { color: oklch(66% 0.006 255); }
.auth-input:focus {
  border-color: oklch(46% 0.12 68);
  box-shadow: 0 0 0 3px oklch(74% 0.165 68 / 0.12);
}
.auth-input--error { border-color: oklch(55% 0.22 25); }
.auth-input-wrap { position: relative; }
.auth-input-wrap .auth-input { padding-right: 44px; }
.auth-eye {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: oklch(56% 0.008 255); font-size: 13px; padding: var(--s-2);
  transition: color 0.15s;
}
.auth-eye:hover { color: oklch(28% 0.012 255); }
.auth-hint  { font-size: var(--tx-xs); color: oklch(56% 0.008 255); }
.auth-error { font-size: var(--tx-xs); color: oklch(55% 0.22 25); }
.auth-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.auth-submit {
  width: 100%; padding: 12px;
  background: var(--amber); color: oklch(12% 0.02 68);
  border: none; border-radius: var(--r-2);
  font-size: var(--tx-md); font-weight: 700; font-family: var(--font);
  cursor: pointer; transition: background 0.15s, transform 0.15s;
  margin-top: var(--s-2);
}
.auth-submit:hover { background: oklch(78% 0.17 68); transform: translateY(-1px); }
.auth-submit:active:not(:disabled) { transform: scale(0.985); }
/* Disabled until the form validates client-side (server still enforces). */
.auth-submit:disabled,
.auth-submit:disabled:hover {
  background: oklch(90% 0.015 68); color: oklch(56% 0.02 68);
  cursor: not-allowed; transform: none;
}
/* Live password-requirement chips — symbolic + language-neutral, light up as met. */
.auth-reqs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: 2px; }
.auth-req {
  font-size: 11px; font-weight: 600; font-family: var(--font); letter-spacing: 0.01em;
  padding: 2px 7px; border-radius: 999px;
  background: oklch(95% 0.004 255); color: oklch(52% 0.008 255);
  border: 1px solid oklch(90% 0.004 255);
  transition: background 0.18s cubic-bezier(0.23, 1, 0.32, 1), color 0.18s, border-color 0.18s;
}
.auth-req.is-met {
  background: oklch(95% 0.05 145); color: oklch(40% 0.13 150); border-color: oklch(83% 0.10 145);
}
.auth-req.is-met::before {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  font-size: 0.82em; margin-right: 4px;
}
/* Confirm-password match check, next to its label. */
.auth-match {
  margin-left: var(--s-2); color: oklch(50% 0.14 142); font-size: 12px;
  opacity: 0; transition: opacity 0.18s ease;
}
.auth-match.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .auth-submit:active:not(:disabled) { transform: none; }
  .auth-req, .auth-match { transition: none; }
}
.auth-footer-text { font-size: var(--tx-xs); color: oklch(56% 0.008 255); text-align: center; margin-top: var(--s-4); }
.auth-footer-text a { color: oklch(46% 0.12 68); text-decoration: none; font-weight: 600; }
.auth-footer-text a:hover { text-decoration: underline; }
.auth-legal { font-size: 11px; color: oklch(62% 0.006 255); line-height: 1.55; text-align: center; margin-top: var(--s-3); }
.auth-legal a { color: oklch(46% 0.12 68); }
.auth-consent { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.auth-consent-row {
  display: flex; align-items: flex-start; gap: var(--s-2);
  font-size: 11px; color: oklch(62% 0.006 255); line-height: 1.55;
  cursor: pointer;
}
.auth-consent-row input[type="checkbox"] { flex: none; margin-top: 2px; accent-color: var(--amber); cursor: pointer; }
.auth-consent-row a { color: oklch(46% 0.12 68); }
.auth-consent-req { font-weight: 600; }
.auth-security {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-4); margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px solid oklch(90% 0.004 255); flex-wrap: wrap;
}
.auth-badge { display: flex; align-items: center; gap: var(--s-1); font-size: 11px; font-weight: 500; color: oklch(56% 0.008 255); }
.auth-badge i { font-size: 10px; color: oklch(50% 0.14 142); }
.auth-flash {
  display: flex; align-items: flex-start; gap: var(--s-2);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-2);
  border: 1px solid oklch(88% 0.012 255);
  background: oklch(97% 0.006 255);
  color: oklch(32% 0.012 255);
  font-size: var(--tx-sm); font-weight: 500; line-height: 1.45;
  margin-bottom: var(--s-4);
  animation: auth-flash-in 0.22s cubic-bezier(0.23, 1, 0.32, 1);
}
/* Leading status icon (Font Awesome 6 solid). Decorative: meaning also carried by colour + text. */
.auth-flash::before {
  font-family: "Font Awesome 6 Free"; font-weight: 900;
  font-size: 0.95em; line-height: 1.45; flex-shrink: 0;
  content: "\f05a";
}
.auth-flash--success { background: oklch(96% 0.04 145); border-color: oklch(83% 0.10 145); color: oklch(40% 0.13 150); }
.auth-flash--success::before { content: "\f058"; }
.auth-flash--error,
.auth-flash--danger  { background: oklch(96% 0.035 25); border-color: oklch(84% 0.11 25); color: oklch(47% 0.18 27); }
.auth-flash--error::before,
.auth-flash--danger::before { content: "\f06a"; }
.auth-flash--warning { background: oklch(97% 0.045 80); border-color: oklch(85% 0.11 80); color: oklch(45% 0.13 64); }
.auth-flash--warning::before { content: "\f071"; }
.auth-flash--info,
.auth-flash--message { background: oklch(96% 0.03 255); border-color: oklch(85% 0.08 255); color: oklch(44% 0.14 262); }
.auth-flash--info::before,
.auth-flash--message::before { content: "\f05a"; }
@keyframes auth-flash-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .auth-flash { animation: none; } }
.auth-captcha { display: flex; justify-content: center; }

/* Desktop (two-column) refinements for the auth pages.
   1. The form panel scrolls within its own half so a tall form (register) never
      scrolls the WHOLE page — the brand panel stays put. `safe center` keeps the
      card centred when it fits and top-aligned (top reachable) when it doesn't.
   2. The brand panel already lists the security features on desktop, so the badge
      strip at the bottom of the card is redundant here — it's shown only on narrow
      screens (≤1024px) where the brand panel is hidden. */
@media (min-width: 1025px) {
  .auth-form-panel { max-height: 100vh; overflow-y: auto; align-items: safe center;
                     padding-block: var(--s-8); }
  .auth-security   { display: none; }
}

/* Check-email */
.ce-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink);
  padding: var(--s-8) var(--gutter);
}
.ce-card { width: 100%; max-width: 480px; text-align: center; }
.ce-envelope {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--amber-bg); border: 1px solid var(--amber-line);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--amber); margin: 0 auto var(--s-6);
}
.ce-card h1 { font-size: var(--tx-4xl); font-weight: 700; letter-spacing: -0.025em; color: var(--t-hi); margin-bottom: var(--s-3); text-wrap: balance; }
.ce-card > p { font-size: var(--tx-md); color: var(--t-mid); line-height: 1.65; margin-bottom: var(--s-5); }
.ce-email-badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4); background: var(--ink-2);
  border: 1px solid var(--border-2); border-radius: var(--r-2);
  font-size: var(--tx-sm); font-weight: 600; color: var(--t-hi);
  margin-bottom: var(--s-8);
}
.ce-email-badge i { color: var(--amber); }
.ce-steps { list-style: none; text-align: left; display: flex; flex-direction: column; gap: var(--s-4); margin-bottom: var(--s-8); }
.ce-step { display: flex; gap: var(--s-4); align-items: flex-start; }
.ce-step-n {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink-2); border: 1px solid var(--border-2);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: var(--tx-xs); font-weight: 700; color: var(--amber);
}
.ce-step-body strong { display: block; font-size: var(--tx-sm); font-weight: 600; color: var(--t-hi); margin-bottom: var(--s-1); }
.ce-step-body p { font-size: var(--tx-sm); color: var(--t-mid); line-height: 1.55; }
.ce-spam-note {
  display: flex; gap: var(--s-3);
  padding: var(--s-4); background: var(--ink-2); border: 1px solid var(--border);
  border-radius: var(--r-2); text-align: left;
  font-size: var(--tx-sm); color: var(--t-mid); line-height: 1.5; margin-bottom: var(--s-8);
}
.ce-spam-note i { color: var(--amber-lo); flex-shrink: 0; margin-top: 2px; }
.ce-resend-label { font-size: var(--tx-sm); color: var(--t-lo); margin-bottom: var(--s-3); }
.ce-resend-btn {
  background: transparent; border: 1px solid var(--border-2);
  border-radius: var(--r-2); padding: var(--s-3) var(--s-5);
  font-size: var(--tx-sm); font-weight: 600; color: var(--t-mid);
  font-family: var(--font); cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--s-2);
  transition: all 0.15s;
}
.ce-resend-btn:hover { color: var(--t-hi); border-color: var(--amber-line); }
.ce-resend-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ce-resend-feedback { font-size: var(--tx-sm); margin-top: var(--s-3); min-height: 20px; }
.ce-resend-feedback--ok  { color: var(--ok); }
.ce-resend-feedback--err { color: var(--err); }
.ce-signin-link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--tx-sm); color: var(--t-lo);
  text-decoration: none; margin-top: var(--s-6);
  transition: color 0.15s;
}
.ce-signin-link:hover { color: var(--t-mid); }

/* ── Footer CTA ────────────────────────────────────────────── */
.footer-cta {
  padding-block: clamp(80px, 10vw, 140px);
  text-align: center; position: relative; overflow: hidden;
}
.footer-cta::before {
  content: '';
  position: absolute; inset: -20% -10%;
  background-image: radial-gradient(oklch(32% 0.012 255) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.18; pointer-events: none;
  mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, black, transparent);
}
.footer-cta h2 {
  font-size: var(--tx-5xl); font-weight: 700;
  letter-spacing: -0.035em; margin-bottom: var(--s-5);
  text-wrap: balance; position: relative;
}
.footer-cta p {
  font-size: var(--tx-lg); color: var(--t-mid);
  margin-bottom: var(--s-10); max-width: 50ch; margin-inline: auto;
  position: relative;
}
.footer-cta-actions {
  display: flex; gap: var(--s-4);
  justify-content: center; flex-wrap: wrap; position: relative;
}

/* ── Footer ────────────────────────────────────────────────── */
.lp-footer {
  background: var(--ink-1);
  border-top: 1px solid var(--border);
  padding-block: var(--s-16) var(--s-10);
}
.lp-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s-12); margin-bottom: var(--s-12);
}
.lp-footer-brand { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.lp-footer-logo  { width: 22px; height: 22px; }
.lp-footer-name  { font-size: var(--tx-sm); font-weight: 700; color: var(--t-hi); letter-spacing: -0.02em; }
.lp-footer-desc  { font-size: var(--tx-sm); line-height: 1.65; color: var(--t-lo); max-width: 240px; }
.lp-footer-col-hd { font-size: var(--tx-xs); font-weight: 700; color: var(--t-mid); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--s-4); display: block; }
.lp-footer-links  { display: flex; flex-direction: column; gap: var(--s-3); }
.lp-footer-link   { font-size: var(--tx-sm); color: var(--t-lo); text-decoration: none; transition: color 0.15s; }
.lp-footer-link:hover { color: var(--t-hi); }
.lp-footer-bottom {
  border-top: 1px solid var(--border); padding-top: var(--s-6);
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-4);
}
.lp-footer-legal { font-size: var(--tx-xs); color: var(--t-lo); line-height: 1.6; max-width: 640px; }

/* ── Spoke pages: full CSS ──────────────────────────────────── */

/* Breadcrumb */
.spoke-breadcrumb {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--tx-sm); color: var(--t-lo); padding-block: var(--s-5);
}
.spoke-breadcrumb a { color: var(--t-lo); text-decoration: none; transition: color 0.15s; }
.spoke-breadcrumb a:hover { color: var(--amber); }
.spoke-breadcrumb span { color: var(--t-xlo); }

/* Hero two-column layout */
.spoke-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s-10), 6vw, var(--s-20));
  align-items: start;
  padding-block: clamp(48px, 7vw, 88px);
}
.spoke-hero-badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--tx-xs); font-weight: 600; color: var(--amber);
  text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: var(--s-5);
}
.spoke-hero-badge i { font-size: 12px; }
.spoke-hero-inner h1 {
  font-size: var(--tx-4xl); font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.07; color: var(--t-hi); margin-bottom: var(--s-5); text-wrap: balance;
}
.spoke-hero-inner h1 em { font-style: normal; color: var(--amber); }
.spoke-hero-lede {
  font-size: var(--tx-lg); line-height: 1.72; color: var(--t-mid);
  max-width: 56ch; margin-bottom: var(--s-8);
}
.spoke-hero-actions {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  margin-bottom: var(--s-6);
}
/* Trust strip */
.spoke-trust {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
}
.spoke-trust-item {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--tx-xs); font-weight: 500; color: var(--t-lo);
}
.spoke-trust-item i { color: var(--amber); font-size: 10px; }

/* Right-side workflow visual */
.spoke-hero-visual {
  background: var(--ink-1);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--s-6);
}
.spoke-hero-visual-title {
  font-size: var(--tx-xs); font-weight: 600; color: var(--amber);
  text-transform: uppercase; letter-spacing: 0.07em;
  margin-bottom: var(--s-5);
}
.spoke-workflow-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--s-3);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--border);
}
.spoke-workflow-item:last-child { border-bottom: none; }
.spoke-workflow-icon {
  width: 32px; height: 32px;
  background: var(--amber-bg); border: 1px solid var(--amber-line);
  border-radius: var(--r-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--amber); flex-shrink: 0;
  margin-top: 1px;
}
.spoke-workflow-text strong {
  display: block; font-size: var(--tx-sm); font-weight: 600;
  color: var(--t-hi); margin-bottom: 3px;
}
.spoke-workflow-text span { font-size: var(--tx-sm); color: var(--t-mid); line-height: 1.5; }

/* Before/After comparison */
.spoke-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5);
}
.compare-col {
  padding: var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--ink-1);
}
.compare-col--new { border-color: var(--amber-line); background: var(--ink-2); }
.compare-col-label {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--tx-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--t-lo); margin-bottom: var(--s-5);
}
.compare-col--old .compare-col-label { color: var(--err); }
.compare-col--new .compare-col-label { color: var(--ok); }
.compare-list { list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }
.compare-list li {
  display: flex; align-items: flex-start; gap: var(--s-3);
  font-size: var(--tx-sm); color: var(--t-mid); line-height: 1.5;
}
.compare-ico { flex-shrink: 0; margin-top: 1px; }
.compare-col--old .compare-ico { color: var(--err); font-size: 11px; }
.compare-col--new .compare-ico { color: var(--ok);  font-size: 11px; }

/* Feature cards grid */
.spoke-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-4);
}
.spoke-feature-card {
  padding: var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--ink-1);
  transition: border-color 0.15s, background 0.15s;
}
.spoke-feature-card:hover { border-color: var(--border-2); background: var(--ink-2); }
.spoke-feature-icon {
  font-size: 18px; color: var(--amber); margin-bottom: var(--s-4);
}
.spoke-feature-card h4 {
  font-size: var(--tx-md); font-weight: 600; color: var(--t-hi);
  margin-bottom: var(--s-3); letter-spacing: -0.01em;
}
.spoke-feature-card p { font-size: var(--tx-sm); line-height: 1.65; color: var(--t-mid); }

/* Steps — 4-column grid, left-aligned text for readability */
.spoke-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-8);
  position: relative;
}
/* Connector line between numbers */
.spoke-steps::before {
  content: '';
  position: absolute;
  top: 21px;
  left: calc(12.5% + 21px);
  right: calc(12.5% + 21px);
  height: 1px;
  background: var(--border);
}
.spoke-steps .spoke-step {
  display: flex;
  flex-direction: column;
  /* Left-align: text wraps naturally in narrow columns */
  text-align: left;
}
.spoke-step-num {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--amber-line);
  background: var(--ink-1);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--tx-sm); font-weight: 700; color: var(--amber);
  /* Align left, not centered */
  margin: 0 0 var(--s-5);
  position: relative; z-index: 1;
  flex-shrink: 0;
}
.spoke-steps .spoke-step h4 {
  font-size: var(--tx-sm); font-weight: 600; color: var(--t-hi);
  margin-bottom: var(--s-2); letter-spacing: -0.01em;
}
.spoke-steps .spoke-step p {
  font-size: var(--tx-sm); line-height: 1.65; color: var(--t-mid);
  text-wrap: pretty;
}

/* CTA band */
.spoke-cta-band {
  padding: clamp(40px, 5vw, 64px);
  background: var(--ink-1); border: 1px solid var(--border);
  border-radius: var(--r-3); text-align: center;
  margin-block: var(--s-16);
}
.spoke-cta-band h2 {
  font-size: var(--tx-3xl); font-weight: 700; letter-spacing: -0.025em;
  margin-bottom: var(--s-4); text-wrap: balance;
}
.spoke-cta-band h2 em { font-style: normal; color: var(--amber); }
.spoke-cta-band p {
  font-size: var(--tx-md); color: var(--t-mid); line-height: 1.65;
  max-width: 54ch; margin-inline: auto; margin-bottom: var(--s-8);
}
.spoke-cta-actions {
  display: flex; gap: var(--s-4); justify-content: center; flex-wrap: wrap;
}

/* "Also for" section */
.spoke-also { margin-block: var(--s-12); }
.spoke-also-title {
  font-size: var(--tx-sm); font-weight: 600; color: var(--t-mid);
  margin-bottom: var(--s-4);
}
.spoke-also-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-4);
}
.spoke-also-card {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border); border-radius: var(--r-3);
  background: var(--ink-1); text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.spoke-also-card:hover { border-color: var(--amber-line); background: var(--ink-2); }
.spoke-also-icon {
  width: 36px; height: 36px; border-radius: var(--r-2);
  background: var(--amber-bg); border: 1px solid var(--amber-line);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--amber); flex-shrink: 0;
}
/* Expand the TEXT div only — not the icon div */
.spoke-also-card > div:not(.spoke-also-icon) { flex: 1; min-width: 0; }
.spoke-also-card > div:not(.spoke-also-icon) strong { display: block; font-size: var(--tx-sm); font-weight: 600; color: var(--t-hi); margin-bottom: 3px; }
.spoke-also-card > div:not(.spoke-also-icon) span  { font-size: var(--tx-xs); color: var(--t-lo); }
.spoke-also-arrow { font-size: 11px; color: var(--t-lo); flex-shrink: 0; transition: transform 0.15s, color 0.15s; }
.spoke-also-card:hover .spoke-also-arrow { color: var(--amber); transform: translateX(3px); }

/* Responsive spoke pages */
@media (max-width: 1024px) {
  .spoke-hero-inner { grid-template-columns: 1fr; }
  .spoke-compare     { grid-template-columns: 1fr; }
  .spoke-steps       { grid-template-columns: repeat(2, 1fr); }
  .spoke-steps::before { display: none; }
}
@media (max-width: 768px) {
  .spoke-features { grid-template-columns: 1fr; }
  .spoke-steps    { grid-template-columns: 1fr; }
  .spoke-hero-actions { flex-direction: column; align-items: flex-start; }
  .spoke-cta-actions  { flex-direction: column; align-items: center; }
}

/* ── Backward-compat: old l-container → new l-wrap ─────────── */
.l-container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── Spoke pages: old class aliases ────────────────────────── */
.spoke-breadcrumb {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--tx-sm); color: var(--t-lo);
  padding-block: var(--s-5);
}
.spoke-breadcrumb a { color: var(--t-lo); text-decoration: none; }
.spoke-breadcrumb a:hover { color: var(--amber); }
.spoke-breadcrumb span { color: var(--t-xlo); }
.spoke-hero-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s-10), 6vw, var(--s-20));
  align-items: start; padding-block: clamp(56px,7vw,88px);
}
.spoke-hero-badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--tx-xs); font-weight: 600; color: var(--amber);
  text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: var(--s-5);
}
.spoke-hero-badge i { font-size: 12px; }
.spoke-hero-inner h1 {
  font-size: var(--tx-4xl); font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.07; color: var(--t-hi); margin-bottom: var(--s-5); text-wrap: balance;
}
.spoke-hero-inner h1 em {
  font-style: normal; color: var(--amber);
}
.spoke-hero-lede {
  font-size: var(--tx-lg); line-height: 1.72; color: var(--t-mid);
  max-width: 56ch; margin-bottom: var(--s-8);
}
.spoke-hero-actions {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
}
.spoke-hero-stats { display: flex; flex-direction: column; gap: var(--s-4); }
.spoke-stat {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-5); border: 1px solid var(--border);
  border-radius: var(--r-3); background: var(--ink-1);
}
.spoke-stat-icon {
  width: 36px; height: 36px; border-radius: var(--r-2);
  background: var(--amber-bg); border: 1px solid var(--amber-line);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--amber); flex-shrink: 0;
}
.spoke-stat h4 { font-size: var(--tx-sm); font-weight: 600; color: var(--t-hi); margin-bottom: var(--s-1); }
.spoke-stat p  { font-size: var(--tx-sm); color: var(--t-mid); line-height: 1.5; }

/* Contact page old class aliases */
.contact-hero { padding-block: clamp(56px, 8vw, 88px) clamp(32px,4vw,48px); text-align: center; }
.contact-hero h1 {
  font-size: var(--tx-5xl); font-weight: 700; letter-spacing: -0.035em;
  line-height: 1.06; margin-bottom: var(--s-5); text-wrap: balance; max-width: 16ch; margin-inline: auto;
}
.contact-hero h1 em { font-style: normal; color: var(--amber); }
.contact-hero p { font-size: var(--tx-lg); color: var(--t-mid); line-height: 1.65; max-width: 54ch; margin-inline: auto; }
.contact-hero .eyebrow { color: var(--amber); font-size: var(--tx-xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; display: block; margin-bottom: var(--s-3); }

/* Old eyebrow, l-section, l-section-head classes used by contact/spoke pages */
.eyebrow { display: block; font-size: var(--tx-xs); font-weight: 600; color: var(--amber); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: var(--s-4); }
.l-section-head { text-align: center; margin-bottom: clamp(var(--s-10),5vw,var(--s-16)); }
.l-section-head h2 {
  font-size: var(--tx-4xl); font-weight: 700; letter-spacing: -0.035em;
  line-height: 1.07; color: var(--t-hi); margin-bottom: var(--s-4); text-wrap: balance;
}
.l-section-head h2 em { font-style: normal; color: var(--amber); }
.l-section-head p { font-size: var(--tx-lg); line-height: 1.65; color: var(--t-mid); max-width: 54ch; margin-inline: auto; }
.l-section--alt { background: var(--ink-1); border-block: 1px solid var(--border); }
.l-section--grid-bg { position: relative; overflow: hidden; }
.l-section--grid-bg::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(oklch(30% 0.01 255) 1px, transparent 1px);
  background-size: 28px 28px; opacity: 0.35; pointer-events: none;
}
.section-h2 {
  font-size: var(--tx-4xl); font-weight: 700; letter-spacing: -0.035em;
  line-height: 1.07; color: var(--t-hi); text-wrap: balance;
}
.section-h2 em { font-style: normal; color: var(--amber); }
.lede { font-size: var(--tx-lg); line-height: 1.72; color: var(--t-mid); }

/* About page old aliases */
.about-story-heading {
  font-size: var(--tx-5xl); font-weight: 700; letter-spacing: -0.035em;
  line-height: 1.06; color: var(--t-hi); text-wrap: balance;
}
.about-story-heading em, .grad-text { font-style: normal; color: var(--amber); }
.about-lede { font-size: var(--tx-lg); line-height: 1.72; color: var(--t-mid); margin-top: var(--s-5); }
.about-quote-block {
  padding: var(--s-8); border: 1px solid var(--border); border-radius: var(--r-3); background: var(--ink-1);
}
.about-quote-block blockquote {
  font-size: var(--tx-xl); font-style: italic; font-weight: 400;
  line-height: 1.55; color: var(--t-hi); margin-bottom: var(--s-4); quotes: none;
}
.about-quote-block cite { font-size: var(--tx-sm); font-style: normal; color: var(--t-xlo); }

/* Old ea-item classes used by about roadmap */
.ea-item { display: flex; gap: var(--s-4); padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-2); background: var(--ink-1); }
.ea-item-icon { width: 32px; height: 32px; border-radius: var(--r-1); display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.ea-item--done .ea-item-icon { background: oklch(20% 0.05 142); color: var(--ok); }
.ea-item--wip .ea-item-icon  { background: var(--amber-bg); color: var(--amber); }
.ea-item--plan .ea-item-icon { background: var(--ink-2); color: var(--t-lo); }
.ea-item-body strong { font-size: var(--tx-sm); font-weight: 700; display: block; margin-bottom: var(--s-1); }
.ea-item--done strong { color: var(--ok); }
.ea-item--wip strong  { color: var(--amber); }
.ea-item--plan strong { color: var(--t-lo); }
.ea-item-body span { font-size: var(--tx-sm); color: var(--t-mid); line-height: 1.55; }

/* Feature card old alias */
.feature-card { padding: var(--s-8); border: 1px solid var(--border); border-radius: var(--r-3); background: var(--ink-1); transition: border-color 0.15s, background 0.15s; }
.feature-card:hover { border-color: var(--border-2); background: var(--ink-2); }
.feature-card-icon { font-size: 20px; color: var(--amber); margin-bottom: var(--s-5); }
.feature-card h3 { font-size: var(--tx-md); font-weight: 600; color: var(--t-hi); margin-bottom: var(--s-3); letter-spacing: -0.01em; }
.feature-card p  { font-size: var(--tx-sm); line-height: 1.65; color: var(--t-mid); }
.feature-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.feature-tag  { font-size: 11px; font-weight: 500; color: var(--t-xlo); background: var(--ink-2); border: 1px solid var(--border); border-radius: var(--r-1); padding: 2px var(--s-2); }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-4); }

/* Old blog classes */
.blog-hero, .blog-post-hd { padding-block: clamp(48px,6vw,80px); }
.blog-hero h1, .blog-post-hd h1 { font-size: var(--tx-4xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; }

/* Old form styling used by contact page */
.contact-form { padding: clamp(var(--s-6),3vw,var(--s-10)); border: 1px solid var(--border); border-radius: var(--r-3); background: var(--ink-1); }
.contact-sidebar { display: flex; flex-direction: column; gap: var(--s-4); padding-top: var(--s-2); }
.contact-info-card { padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-3); background: var(--ink-1); }
.contact-info-card h4 { font-size: var(--tx-sm); font-weight: 600; color: var(--t-hi); margin-bottom: var(--s-2); }
.contact-info-card p  { font-size: var(--tx-sm); color: var(--t-mid); line-height: 1.6; }
.contact-success { text-align: center; padding: var(--s-20) var(--s-8); }
.contact-success-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--amber-bg); border: 1px solid var(--amber-line); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--amber); margin: 0 auto var(--s-6); }
.contact-success h2 { font-size: var(--tx-3xl); font-weight: 700; margin-bottom: var(--s-3); letter-spacing: -0.02em; }
.contact-success p  { font-size: var(--tx-md); color: var(--t-mid); margin-bottom: var(--s-8); }

/* Old persona card classes */
.personas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.persona-card { padding: var(--s-6) var(--s-5); border: 1px solid var(--border); border-radius: var(--r-3); background: var(--ink-1); transition: border-color 0.2s, background 0.2s; }
.persona-card:hover { border-color: var(--amber-line); background: var(--ink-2); }
.persona-icon { font-size: 18px; color: var(--amber); margin-bottom: var(--s-5); }
.persona-card-title { font-size: var(--tx-md); font-weight: 600; color: var(--t-hi); margin-bottom: var(--s-3); }
.persona-card p { font-size: var(--tx-sm); line-height: 1.6; color: var(--t-mid); }

/* Old browser frame (screenshots) */
.browser-frame { border: 1px solid var(--border); border-radius: var(--r-3); overflow: hidden; background: var(--ink-1); box-shadow: 0 16px 40px oklch(5% 0.02 255 / 0.5); }
.browser-frame > img, .browser-frame > picture > img { display: block; width: 100%; height: auto; }
.browser-chrome { display: flex; align-items: center; gap: var(--s-3); background: oklch(8% 0.01 255); padding: 10px var(--s-4); border-bottom: 1px solid var(--border); }
.browser-dots { display: flex; gap: 6px; }
.browser-dots span { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.browser-dots span:nth-child(1) { background: #ff5f57; }
.browser-dots span:nth-child(2) { background: #febc2e; }
.browser-dots span:nth-child(3) { background: #28c840; }
.browser-url-bar { flex: 1; background: var(--ink-2); border-radius: var(--r-1); padding: 4px var(--s-3); font-size: 11px; color: var(--t-xlo); display: flex; align-items: center; gap: var(--s-2); }
.browser-url-bar i { color: var(--amber); font-size: 9px; }

/* Old ss-panel-meta alias */
.ss-panel-meta { margin-top: var(--s-4); padding: var(--s-4) var(--s-5); background: var(--ink-1); border: 1px solid var(--border); border-radius: var(--r-2); }
.ss-panel-meta .panel-title { font-size: var(--tx-sm); font-weight: 600; color: var(--t-hi); margin-bottom: var(--s-1); }
.ss-panel-meta p { font-size: var(--tx-sm); line-height: 1.6; color: var(--t-mid); }

/* Old showcase */
.showcase { padding: clamp(64px,8vw,120px) 0; }
.showcase-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(var(--s-10),6vw,var(--s-20)); align-items: start; }
.showcase-grid.showcase-grid--flip { grid-template-columns: 1.4fr 1fr; }
.showcase-grid.showcase-grid--flip .showcase-copy { order: 2; }
.showcase-grid.showcase-grid--flip .showcase-visual { order: 1; }
.showcase-copy h2 { font-size: var(--tx-3xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--t-hi); margin-bottom: var(--s-4); text-wrap: balance; }
.showcase-copy h2 em { font-style: normal; color: var(--amber); }
.showcase-copy p { font-size: var(--tx-md); line-height: 1.72; color: var(--t-mid); margin-bottom: var(--s-6); }
.feature-checklist { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-8); }
.feature-check { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--tx-sm); color: var(--t-mid); line-height: 1.5; }
.feature-check-icon { width: 18px; height: 18px; background: var(--amber-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--amber); font-size: 9px; flex-shrink: 0; margin-top: 2px; }

/* Old phone mockup */
.phone-mockup { border-radius: 28px; overflow: hidden; border: 4px solid var(--ink-3); box-shadow: 0 8px 24px oklch(5% 0.02 255 / 0.5); }
.phone-mockup img { display: block; width: 100%; }
.phone-strip-item { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.phone-strip-label { margin-top: var(--s-3); font-size: var(--tx-xs); font-weight: 500; color: var(--t-xlo); text-align: center; text-transform: uppercase; letter-spacing: 0.06em; }

/* Old step classes */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-8); position: relative; }
.steps-grid::before { content: ''; position: absolute; top: 21px; left: calc(12.5% + 10px); right: calc(12.5% + 10px); height: 1px; background: var(--border); }
.step-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-4); }
.step-num { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-2); background: var(--ink-1); display: flex; align-items: center; justify-content: center; font-size: var(--tx-sm); font-weight: 700; color: var(--t-lo); position: relative; z-index: 1; transition: all 0.2s; }
.step-item:hover .step-num { border-color: var(--amber-line); background: var(--amber-bg); color: var(--amber); }
.step-title { font-size: var(--tx-sm); font-weight: 600; color: var(--t-hi); }
.step-item h4 { font-size: var(--tx-sm); font-weight: 600; color: var(--t-hi); margin-bottom: var(--s-2); }
.step-item p { font-size: var(--tx-sm); line-height: 1.6; color: var(--t-mid); }

/* Old trust bar (still used on some pages) */
.trust-bar { padding-block: var(--s-5); border-block: 1px solid var(--border); overflow: hidden; }
.trust-bar__inner { display: flex; align-items: center; justify-content: center; gap: clamp(var(--s-6),4vw,var(--s-12)); flex-wrap: nowrap; }
.trust-item { display: flex; align-items: center; gap: var(--s-2); font-size: var(--tx-sm); font-weight: 500; color: var(--t-lo); white-space: nowrap; flex-shrink: 0; }
.trust-icon { color: var(--amber); font-size: 11px; }
.trust-item-link { color: var(--amber); text-decoration: none; font-weight: 600; }
.trust-item-link:hover { text-decoration: underline; }

/* Old hero stat classes */
.hero__eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); background: var(--amber-bg); border: 1px solid var(--amber-line); color: var(--amber); font-size: var(--tx-xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; padding: 5px var(--s-4); border-radius: 20px; margin-bottom: var(--s-6); }
.hero__eyebrow-dot { width: 6px; height: 6px; background: var(--amber); border-radius: 50%; animation: pulse-dot 2s ease-in-out infinite; }

/* Old security card (used by some pages) */
.security-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.security-card { padding: var(--s-8); border: 1px solid var(--border); border-radius: var(--r-3); background: var(--ink-1); transition: border-color 0.15s, background 0.15s; }
.security-card:hover { border-color: var(--border-2); background: var(--ink-2); }
.security-card-icon { font-size: 20px; color: var(--amber); margin-bottom: var(--s-5); }
.security-card-title { font-size: var(--tx-md); font-weight: 600; color: var(--t-hi); margin-bottom: var(--s-3); display: block; }
.security-card h3 { font-size: var(--tx-md); font-weight: 600; color: var(--t-hi); margin-bottom: var(--s-3); }
.security-card p { font-size: var(--tx-sm); line-height: 1.65; color: var(--t-mid); }

/* Old value card */
.value-card { padding: var(--s-8); border: 1px solid var(--border); border-radius: var(--r-3); background: var(--ink-1); }
.value-card-icon { font-size: 18px; color: var(--amber); margin-bottom: var(--s-4); }
.value-card h3 { font-size: var(--tx-md); font-weight: 600; color: var(--t-hi); margin-bottom: var(--s-3); }
.value-card p  { font-size: var(--tx-sm); line-height: 1.65; color: var(--t-mid); }
.values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }

/* Old footer CTA overrides */
.hero__use-cases-link { font-size: var(--tx-xs); color: var(--t-xlo); margin: 0 0 var(--s-5); line-height: 1.55; }
.hero__use-cases-link a { color: var(--t-lo); text-decoration: none; }
.hero__use-cases-link a:hover { color: var(--amber); }

/* Old uc card classes used by old use_cases page */
.uc-hero { padding-block: clamp(56px,7vw,88px) clamp(32px,4vw,48px); text-align: center; }
.uc-hero h1 { font-size: var(--tx-5xl); font-weight: 700; letter-spacing: -0.035em; line-height: 1.06; margin-bottom: var(--s-5); text-wrap: balance; max-width: 18ch; margin-inline: auto; }
.uc-hero h1 em { font-style: normal; color: var(--amber); }
.uc-hero p { font-size: var(--tx-lg); color: var(--t-mid); line-height: 1.65; max-width: 54ch; margin-inline: auto; }
.uc-intro { text-align: center; padding-bottom: var(--s-8); }
.uc-intro p { font-size: var(--tx-md); color: var(--t-mid); }

/* Responsive compat for old classes */
@media (max-width: 1024px) {
  .spoke-hero-inner { grid-template-columns: 1fr; }
  .showcase-grid, .showcase-grid.showcase-grid--flip { grid-template-columns: 1fr; }
  .showcase-grid .showcase-copy { order: 1 !important; }
  .showcase-grid .showcase-visual { order: 2 !important; }
  .security-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid::before { display: none; }
  .personas-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .steps-grid { grid-template-columns: 1fr; }
  .personas-grid { grid-template-columns: 1fr; }
  .security-grid { grid-template-columns: 1fr; }
  .spoke-hero-actions { flex-direction: column; align-items: flex-start; }
}

/* ── Reveal animations ─────────────────────────────────────── */
.will-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .will-reveal {
    opacity: 0; transform: translateY(16px);
    transition: opacity 0.5s var(--expo), transform 0.5s var(--expo);
  }
  .will-reveal[data-delay="1"] { transition-delay: 0.06s; }
  .will-reveal[data-delay="2"] { transition-delay: 0.12s; }
  .will-reveal[data-delay="3"] { transition-delay: 0.18s; }
  .will-reveal[data-delay="4"] { transition-delay: 0.24s; }
  .will-reveal[data-delay="5"] { transition-delay: 0.30s; }
  .will-reveal.is-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .will-reveal, .will-reveal.is-visible { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation-play-state: paused !important; }
}

/* ── Focus ──────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero                          { grid-template-columns: 1fr; }
  .hero__visual                  { display: none; }
  .hero h1                       { font-size: clamp(2.5rem, 6vw + 1rem, 4rem); }
  .showcase-split,
  .showcase-split--flip          { grid-template-columns: 1fr; }
  .showcase-split--flip .showcase-copy  { order: 1 !important; }
  .showcase-split--flip .showcase-visual{ order: 2 !important; }
  .about-intro                   { grid-template-columns: 1fr; }
  .contact-grid                  { grid-template-columns: 1fr; }
  .auth-brand                    { display: none; }
  .auth-layout                   { grid-template-columns: 1fr; }
  .pricing-page-grid             { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .pricing-tabs                  { display: flex; }
  .pcard[data-plan]              { display: none; }
  .pcard[data-plan].active       { display: block; }
  .lp-footer-grid                { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .values-list                   { grid-template-columns: 1fr; }
  .security-spec                 { grid-template-columns: 1fr; }
  .security-item                 { border-right: none !important; }
  .security-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--border) !important; }
  .security-item:last-child      { border-bottom: none !important; }
  .steps-row                     { grid-template-columns: repeat(2, 1fr); }
  .steps-row::before             { display: none; }
  .pricing-cols                  { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; }
  .commit-grid                   { grid-template-columns: 1fr; }
}

/* Nav collapses to the hamburger before it can clip (full bar measures
   ~1025px: 4 links + the More dropdown + 4 actions): links + text CTAs move
   into the mobile menu on narrow desktops/tablets; the Try demo / Start free
   buttons survive until the true mobile breakpoint below. */
@media (max-width: 1024px) {
  .lp-nav-links                 { display: none; }
  .lp-cta-signin                { display: none; }
  .lp-hamburger                 { display: flex; }
  /* the centered links normally push the actions right; with them hidden
     the actions need their own right alignment */
  .lp-nav-actions               { margin-left: auto; }
}

@media (max-width: 768px) {
  .lp-nav-links                 { display: none; }
  .lp-nav-actions .btn,
  .lp-cta-signin                { display: none; }
  .lp-hamburger                 { display: flex; }
  .audience-row                 { grid-template-columns: 1fr; gap: var(--s-3); }
  .audience-name                { font-size: var(--tx-xl); }
  .lp-footer-grid               { grid-template-columns: 1fr; gap: var(--s-8); }
  .lp-footer-desc               { max-width: none; }
  .signal-strip__inner          { overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; }
  .page-hero h1,
  .spoke-hero h1                { font-size: clamp(2rem, 7vw + 0.5rem, 3.25rem); }
  .footer-cta h2                { font-size: clamp(1.75rem, 6vw + 0.5rem, 3rem); }
  .steps-row                    { grid-template-columns: 1fr; }
  .contact-grid                 { padding-bottom: var(--s-16); }
  .form-row                     { grid-template-columns: 1fr; }
  .auth-form-panel              { padding: var(--s-6) var(--s-5); align-items: flex-start; }
  .phone-frame                  { width: 170px; }
  .blog-grid                    { grid-template-columns: 1fr; }
  .spoke-features               { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero__actions                { flex-direction: column; align-items: stretch; }
  .hero__actions .btn           { width: 100%; justify-content: center; }
  .footer-cta-actions           { flex-direction: column; align-items: center; }
  .footer-cta-actions .btn      { min-width: 220px; }
  .auth-name-row                { grid-template-columns: 1fr; }
  .auth-security                { flex-wrap: wrap; gap: var(--s-2); }
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT CONTENT ZONE
   Applied via .page-body to all sections below the hero + marquee.
   Hero, signal strip, and marquee stay in the dark ink zone.
   Footer CTA and footer also stay dark (intentional bookend).
   ═══════════════════════════════════════════════════════════════ */

.page-body {
  background: oklch(97.5% 0.004 255);

  /* Reset the inherited colour so un-annotated headings and text inside the
     light zone pick up dark ink — not the light value baked into .landing */
  color: var(--t-hi);

  /* Surface ramp — flipped to light equivalents of ink tokens */
  --ink-1: oklch(93.5% 0.005 255);
  --ink-2: oklch(89.5% 0.006 255);
  --ink-3: oklch(85.5% 0.007 255);
  --ink-4: oklch(81.5% 0.008 255);

  /* Text ramp — dark ink on light */
  --t-hi:  oklch(10.0% 0.015 255);
  --t-mid: oklch(36.0% 0.013 255);
  --t-lo:  oklch(53.0% 0.010 255);
  --t-xlo: oklch(66.0% 0.008 255);

  /* Borders — light, slightly blue-tinted */
  --border:   oklch(87.0% 0.008 255);
  --border-2: oklch(79.0% 0.010 255);

  /* Amber adapted for light surfaces */
  --amber-bg:   oklch(95.8% 0.038 68);
  --amber-line: oklch(84.0% 0.090 68);

  /* WCAG-safe amber variants (global amber fails on light bg at ~1.9:1) */
  --amber-text: oklch(44.0% 0.150 68);  /* ≥4.5:1 vs light bg — links/text */
  --amber-icon: oklch(58.0% 0.160 68);  /* ≥3:1  vs light bg — large icons  */
}

/* Amber links and text — must pass 4.5:1 on light */
.page-body .audience-link       { color: var(--amber-text); }
.page-body .audience-link:hover { color: oklch(36% 0.15 68); }
.page-body .uc-card-cta         { color: var(--amber-text); }
.page-body .spoke-also-link:hover { color: var(--amber-text); border-color: var(--amber-line); }
.page-body .faq-item[open] summary::after { color: var(--amber-icon); }

/* Amber decorative icons — 3:1+ on light is sufficient for non-text */
.page-body .security-num,
.page-body .feature-item i,
.page-body .pc-line i,
.page-body .feat-icon,
.page-body .commit-item i,
.page-body .signal-item i       { color: var(--amber-icon); }

/* Step hover state on light */
.page-body .step:hover .step-num {
  border-color: var(--amber-line);
  background: var(--amber-bg);
  color: var(--amber-icon);
}

/* Active tab on light — text token already remaps to dark ink, fine */
.page-body .ss-tab.active { color: var(--t-hi); }

/* Frame shadows — toned down for light surfaces */
.page-body .ss-frame {
  box-shadow:
    0 1px 3px oklch(10% 0.015 255 / 0.05),
    0 6px 20px oklch(10% 0.015 255 / 0.08);
}

/* Phone frames — keep the dark bezel (it pops on light), reduce shadow */
.page-body .phone-frame {
  box-shadow:
    0 0 0 1px oklch(18% 0.010 255),
    0 0 0 2px oklch(36% 0.012 255),
    0 14px 32px oklch(10% 0.015 255 / 0.18),
    inset 0 1px 0 oklch(44% 0.010 255 / 0.5);
}

/* ── Dark islands inside page-body ─────────────────────────────
   Some sections carry explicit dark backgrounds (var(--ink) or a
   hardcoded dark value) even though they sit inside .page-body.
   Restore the original light-text tokens so text stays readable.   */

/* Blog listing hero — background: var(--ink), must have light text */
.page-body .bl-hero {
  color: oklch(95.5% 0.005 95);
  --t-hi:   oklch(95.5% 0.005 95);
  --t-mid:  oklch(74.0% 0.007 255);
  --t-lo:   oklch(55.0% 0.008 255);
  --t-xlo:  oklch(40.0% 0.008 255);
  --border:     oklch(22.0% 0.012 255);
  --border-2:   oklch(30.0% 0.010 255);
  --amber-bg:   oklch(14.5% 0.04  68);
  --amber-line: oklch(40.0% 0.10  68);
  --amber-text: var(--amber);
  --amber-icon: var(--amber);
}

/* Code blocks in blog posts — hardcoded dark bg, needs light text */
.page-body .blp-body pre          { color: oklch(88% 0.005 255); }
.page-body .blp-body pre code     { color: oklch(88% 0.005 255); }
.page-body .blp-body code         { background: oklch(18% 0.012 255); color: var(--amber); border-color: oklch(30% 0.010 255); }

/* Eyebrows / small amber labels — use accessible dark amber on light */
.page-body .eyebrow             { color: var(--amber-text); }
.page-body .spoke-also-link:hover { color: var(--amber-text); border-color: var(--amber-line); }

/* Blog listing: bl-grid-section has explicit var(--ink) bg which bypasses token remapping.
   Override so the card grid shows the light page-body background correctly. */
.page-body .bl-grid-section     { background: transparent; }

/* Blog card "Read" link — amber text on light card surface */
.page-body .bl-card-read        { color: var(--amber-text); }
.page-body .bl-cat-pill:hover   { color: var(--amber-text); }

/* Blog post body — amber links need dark amber on light prose surface */
.page-body .blp-body a          { color: var(--amber-text); }
.page-body .blp-body a:hover    { color: oklch(36% 0.15 68); }
.page-body .blp-back:hover      { color: var(--amber-text); }
.page-body .blp-footer-back:hover { color: var(--amber-text); border-color: var(--amber-line); }

/* ═══════════════════════════════════════════════════════════════
   DOWNLOAD PAGE (/download) — Windows desktop app
   Reuses page-hero / steps-row / feat-grid / faq-list; below are
   only the two pieces that don't exist elsewhere: the Windows 11
   desktop scene and the SmartScreen explainer band. The scene is a
   deliberately DARK object sitting in the light page-body, so its
   colours are literal ink values, not the remapped tokens.
   ═══════════════════════════════════════════════════════════════ */

.dlp-hero-ctas {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--s-8);
}

/* ── Windows 11 desktop scene ──────────────────────────────── */
.dlp-scene-wrap { padding-block: clamp(28px, 4vw, 44px) clamp(40px, 6vw, 64px); }
.dlp-scene {
  position: relative;
  overflow: hidden;
  max-width: 880px;
  margin-inline: auto;
  border: 1px solid var(--border-2);
  border-radius: 14px;
  background:
    radial-gradient(90% 90% at 20% 0%, oklch(24% 0.055 265 / 0.85), transparent 62%),
    radial-gradient(80% 70% at 95% 60%, oklch(22% 0.06 68 / 0.6), transparent 65%),
    linear-gradient(160deg, oklch(16% 0.03 265), oklch(11% 0.02 280));
  box-shadow: 0 28px 64px -30px oklch(20% 0.02 255 / 0.5);
  padding: clamp(18px, 3vw, 30px) clamp(16px, 3vw, 28px) 0;
  display: flex;
  flex-direction: column;
}
.dlp-appic {
  border-radius: 4px;
  background: linear-gradient(135deg, var(--amber), oklch(60% 0.12 68));
  display: flex;
  align-items: center;
  justify-content: center;
  color: oklch(10% 0.015 255);
  font-weight: 700;
  flex-shrink: 0;
}

/* app window */
.dlp-w11 {
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  border: 1px solid oklch(100% 0 0 / 0.12);
  border-bottom: 0;
  background: oklch(14.2% 0.013 255);
  box-shadow: 0 18px 44px -18px oklch(0% 0 0 / 0.8);
  width: min(560px, 92%);
  margin-inline: auto;
}
.dlp-w11-tb {
  display: flex;
  align-items: center;
  background: oklch(18.8% 0.011 255);
  border-bottom: 1px solid oklch(22% 0.012 255);
  padding-left: 12px;
  height: 34px;
  font-size: 12px;
  color: oklch(74% 0.007 255);
}
.dlp-w11-tb .dlp-appic { width: 15px; height: 15px; margin-right: 8px; font-size: 9px; }
.dlp-w11-caps { margin-left: auto; display: flex; height: 100%; }
.dlp-w11-caps span {
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: oklch(74% 0.007 255);
  font-size: 10px;
}
.dlp-w11-body {
  position: relative;
  padding: 14px;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 13px;
  min-height: 200px;
}
.dlp-w11-side {
  border-right: 1px solid oklch(22% 0.012 255);
  padding-right: 11px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dlp-sk { border-radius: 4px; height: 8px; background: oklch(23.5% 0.01 255); }
.dlp-sk--hot { background: oklch(30% 0.06 68); }
.dlp-w11-main { display: flex; flex-direction: column; gap: 9px; }
.dlp-sk-card {
  border: 1px solid oklch(22% 0.012 255);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: oklch(10% 0.015 255);
}

/* PIN prompt overlay */
.dlp-pin {
  position: absolute;
  top: 24px;
  right: 18px;
  background: oklch(18.8% 0.011 255);
  border: 1px solid oklch(30% 0.01 255);
  border-radius: 8px;
  padding: 11px 13px;
  width: 158px;
  box-shadow: 0 16px 40px -18px oklch(0% 0 0 / 0.8);
}
.dlp-pin p { font-size: 10.5px; color: oklch(74% 0.007 255); margin-bottom: 8px; }
.dlp-pin-dots { display: flex; gap: 6px; }
.dlp-pin-dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: oklch(23.5% 0.01 255);
  border: 1px solid oklch(30% 0.01 255);
}
.dlp-pin-dots span.f { background: var(--amber); border-color: var(--amber); }

/* native toast */
.dlp-toast {
  position: absolute;
  right: clamp(10px, 2vw, 20px);
  bottom: 62px;
  width: 236px;
  border-radius: 8px;
  background: oklch(21% 0.012 260 / 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid oklch(100% 0 0 / 0.14);
  box-shadow: 0 20px 48px -18px oklch(0% 0 0 / 0.85);
  padding: 11px 12px;
  font-size: 11px;
  z-index: 3;
  color: oklch(95.5% 0.005 95);
}
.dlp-toast-app {
  display: flex;
  align-items: center;
  gap: 7px;
  color: oklch(55% 0.008 255);
  font-size: 10px;
  margin-bottom: 7px;
}
.dlp-toast-app .dlp-appic { width: 13px; height: 13px; border-radius: 3px; }
.dlp-toast-x { margin-left: auto; color: oklch(40% 0.008 255); }
.dlp-toast h4 { font-size: 11.5px; font-weight: 600; color: oklch(95.5% 0.005 95); }
.dlp-toast p { color: oklch(74% 0.007 255); font-size: 10.5px; margin-top: 2px; line-height: 1.45; }
.dlp-toast-btns { display: flex; gap: 7px; margin-top: 9px; }
.dlp-toast-btns span {
  flex: 1;
  text-align: center;
  font-size: 10px;
  font-weight: 550;
  padding: 4px 0;
  border-radius: 4px;
  background: oklch(30% 0.01 260);
  border: 1px solid oklch(100% 0 0 / 0.1);
}
.dlp-toast-btns span.pri { background: var(--amber); color: oklch(10% 0.015 255); border-color: var(--amber); }

/* taskbar */
.dlp-taskbar {
  position: relative;
  z-index: 2;
  margin-inline: calc(clamp(16px, 3vw, 28px) * -1);
  display: flex;
  align-items: center;
  background: oklch(17% 0.012 260 / 0.85);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid oklch(100% 0 0 / 0.1);
  height: 52px;
  padding-inline: 14px;
  color: oklch(74% 0.007 255);
}
.dlp-tb-center { display: flex; gap: 7px; margin-inline: auto; align-items: center; }
.dlp-tb-ic {
  width: 34px; height: 34px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.dlp-tb-ic svg { width: 19px; height: 19px; }
.dlp-tb-gen {
  width: 19px; height: 19px;
  border-radius: 5px;
  background: oklch(23.5% 0.01 255);
  border: 1px solid oklch(30% 0.01 255);
}
.dlp-tb-ic--hx .dlp-appic { width: 21px; height: 21px; border-radius: 6px; font-size: 11px; }
.dlp-tb-ic--hx::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 3px;
  border-radius: 2px;
  background: var(--amber);
}
.dlp-tb-right { display: flex; align-items: center; gap: 12px; font-size: 10.5px; }
.dlp-tb-tray { display: flex; align-items: center; gap: 8px; }
.dlp-tb-tray .dlp-appic { width: 13px; height: 13px; border-radius: 3px; }
.dlp-tb-clock { text-align: right; line-height: 1.3; }

/* ── SmartScreen explainer band ────────────────────────────── */
.dlp-ss-band {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  margin-top: clamp(36px, 5vw, 56px);
}
/* The dialog depiction uses Microsoft's own blue on purpose — it must be
   recognisable as the OS screen, not restyled to the brand. */
.dlp-smartscreen {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid oklch(100% 0 0 / 0.15);
  box-shadow: 0 22px 48px -22px oklch(30% 0.05 255 / 0.55);
  background: linear-gradient(175deg, #0067c0, #004e93);
  color: #fff;
  padding: 22px 24px 20px;
  font-family: 'Segoe UI', var(--font);
}
.dlp-smartscreen h3 { font-size: var(--tx-lg); font-weight: 600; letter-spacing: -0.01em; }
.dlp-ss-body { font-size: 12.5px; color: oklch(100% 0 0 / 0.85); margin-top: 7px; line-height: 1.5; max-width: 46ch; }
.dlp-ss-more {
  font-size: 12.5px;
  margin-top: 9px;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: #fff;
  display: inline-block;
}
.dlp-ss-btns { display: flex; justify-content: flex-end; gap: 9px; margin-top: 16px; }
.dlp-ss-btns span { font-size: 12.5px; padding: 6px 16px; border-radius: 4px; }
.dlp-ss-btns .run {
  background: oklch(100% 0 0 / 0.92);
  color: #1b1b1b;
  font-weight: 600;
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.dlp-ss-btns .dont { background: oklch(100% 0 0 / 0.16); border: 1px solid oklch(100% 0 0 / 0.35); }
.dlp-ss-copy h3 { font-size: var(--tx-xl); font-weight: 650; letter-spacing: -0.015em; color: var(--t-hi); margin-bottom: var(--s-3); }
.dlp-ss-copy p { font-size: var(--tx-sm); color: var(--t-mid); line-height: 1.65; max-width: 54ch; }
.dlp-ss-copy p + p { margin-top: var(--s-2); }
.dlp-ss-copy b { color: var(--t-hi); font-weight: 600; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 820px) {
  .dlp-ss-band { grid-template-columns: 1fr; }
  .dlp-toast { display: none; }
  .dlp-w11-body { grid-template-columns: 84px 1fr; }
}