/* ==========================================================================
   Relic — website styles
   Hand-written, dependency-free. No build step, no external resources.
   Light theme. The brand ramp from Relic's product icon
     indigo #121358 · navy #232F72 · steel #2F578A · teal #36ADA3
   is kept for identity (logo, gradients, dark app frames, footer), while an
   AA-safe teal ramp carries every interactive accent on white. Type is Inter,
   self-hosted from /assets/fonts (same-origin, so the site still ships zero
   egress — the same principle the product is built on).
   ========================================================================== */

/* ------------------------------------------------------------------- font */
@font-face {
  font-family: 'InterVariable';
  src: url('/assets/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ tokens */
:root {
  /* ── Brand ramp (identity only — decorative surfaces, gradients, frames).
     Raw teal is 2.74:1 on white, so it is never used as text or icon color;
     the accent ramp below carries all interactive color at AA contrast. ── */
  --indigo: #121358;
  --navy:   #232F72;
  --steel:  #2F578A;
  --teal:   #36ADA3;
  --brand-gradient: linear-gradient(120deg, #121358 0%, #2F578A 55%, #36ADA3 100%);

  /* accent ramp — teal, tuned for a white page */
  --accent-700: #0B655D;  /* hover / active text     — 6.9:1 on white */
  --accent-600: #0E7C72;  /* links, buttons, focus   — 5.1:1 on white */
  --accent-500: #1E9C90;  /* gradients + large display text only      */
  --accent-100: #D9EEEB;  /* soft fills: active nav, selection        */
  --accent-50:  #EDF7F5;  /* faintest wash: badges, callouts          */
  --accent-line:#BFE3DF;  /* borders on tinted surfaces               */

  /* surfaces */
  --bg:            #FFFFFF;
  --bg-alt:        #F6F8F9;  /* alternate section band */
  --border:        #E5E9EE;
  --border-strong: #D5DBE3;
  --ink-900:       #0B1220;  /* near-black navy: headings + dark footer */
  --panel-navy:    #101336;  /* app-frame chrome around screenshots     */

  /* text */
  --text:       #0B1220;
  --text-body:  #3D4757;
  --text-muted: #667085;
  --text-on-dark:       #EEF1F6;
  --text-on-dark-muted: #9AA4B8;
  --link-on-dark:       #7FD1C9;

  /* type */
  --font-sans: 'InterVariable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* type scale */
  --fs-display: clamp(2.5rem, 5.5vw, 3.9rem);
  --fs-h1-doc:  clamp(2rem, 4.5vw, 2.9rem);
  --fs-h2:      clamp(1.7rem, 3.4vw, 2.35rem);
  --fs-lede:    clamp(1.05rem, 2vw, 1.2rem);

  /* metrics */
  --maxw: 1120px;
  --maxw-prose: 760px;
  --header-h: 62px; /* height of the .nav row; reserves space under the fixed header */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-pad: clamp(4rem, 9vw, 6.5rem);
  --shadow-sm: 0 1px 2px rgba(13, 18, 32, 0.05);
  --shadow-md: 0 10px 30px -12px rgba(13, 18, 32, 0.14);
  --shadow-lg: 0 30px 70px -30px rgba(13, 18, 32, 0.30);
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: light; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body {
  margin: 0;
  /* fixed shell is out of flow — reserve its height, plus the notch inset the header also uses */
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, picture { max-width: 100%; display: block; height: auto; }
a { color: var(--accent-600); text-decoration: none; }
a:hover { color: var(--accent-700); }
h1, h2, h3, h4 { color: var(--text); line-height: 1.15; margin: 0 0 0.5em; font-weight: 600; letter-spacing: -0.015em; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin: 0.35rem 0; }
li::marker { color: var(--accent-600); }
strong { color: var(--text); font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--border); margin: 3rem 0; }
code, kbd, pre { font-family: var(--font-mono); }

/* prose links are underlined so they never rely on color alone */
.doc-body a:not(.btn), .prose a:not(.btn), .callout a:not(.btn), .card a:not(.btn) {
  text-decoration: underline;
  text-decoration-color: var(--accent-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.doc-body a:not(.btn):hover, .prose a:not(.btn):hover, .callout a:not(.btn):hover, .card a:not(.btn):hover {
  text-decoration-color: currentColor;
}

/* accessible focus */
:focus-visible {
  outline: 2px solid var(--accent-600);
  outline-offset: 2px;
  border-radius: 3px;
}
::selection { background: var(--accent-100); color: var(--ink-900); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent-600); color: #fff;
  padding: 0.6rem 1rem; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------- layout */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: var(--maxw-prose); }
section { padding-block: var(--section-pad); }
.section-alt { background: var(--bg-alt); }
/* doc-style pages put content straight into main > .wrap (no <section>), so
   give that wrap the same breathing room above the footer */
main > .wrap:last-child { padding-bottom: var(--section-pad); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.8rem;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-pill);
  background: var(--accent-50);
  color: var(--accent-700);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 1.1rem;
}
.lede { font-size: var(--fs-lede); color: var(--text-body); max-width: 56ch; }
.text-muted { color: var(--text-muted); }
.center { text-align: center; }
.center .lede, .center .eyebrow { margin-inline: auto; }
.center .eyebrow { justify-content: center; }

.section-head { max-width: 62ch; margin-bottom: clamp(2.25rem, 5vw, 3.25rem); }
.section-head h2 { font-size: var(--fs-h2); letter-spacing: -0.02em; max-width: 24ch; }
.section-head .lede { margin-top: 0.9rem; margin-bottom: 0; }
.center.section-head { margin-inline: auto; }
.center.section-head h2 { margin-inline: auto; }

/* --------------------------------------------------------------- header
   Animated navbar shell. The <header> is a fixed, centered flex track that
   OWNS positioning + insets; the inner .nav-bar OWNS the surface (bg, blur,
   border, radius, shadow) and clamps to a centered pill once .scrolled is set
   (toggled by initNavShell in main.js past scrollY 25). Pure CSS animation.
   The .wrap.nav content row is preserved verbatim inside .nav-bar. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: center;
  padding-top: env(safe-area-inset-top, 0px);
  padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
  transition: top 0.45s ease-in-out, padding 0.45s ease-in-out;
}
.site-header.scrolled {
  top: 8px;
  padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 768px) {
  .site-header.scrolled { top: 16px; }
}

.nav-bar {
  position: relative;
  width: 100%;
  max-width: 100%; /* avoid 100vw — Safari includes the scrollbar gutter and can cause horizontal bleed */
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border: 1px solid transparent;
  border-bottom-color: var(--border);
  border-radius: 0;
  transition: all 0.45s ease-in-out;
}
@supports not (backdrop-filter: blur(1px)) {
  .nav-bar { background: #fff; }
}
/* --shell-maxw (default = site content width) keeps the pill hugging the
   1120px content column instead of leaving dead space. */
.site-header.scrolled .nav-bar {
  max-width: var(--shell-maxw, var(--maxw));
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
}
.nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem 1rem;
  height: 62px;
  position: relative;
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text); font-weight: 700; grid-column: 1; justify-self: start; }
.brand:hover { color: var(--text); }
.brand .wordmark { font-size: 1.18rem; letter-spacing: -0.01em; }
.brand img,
.brand svg {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  box-shadow: 0 0 0 1px rgba(13, 18, 32, 0.08);
}

/* On desktop, children participate in the parent grid for a true 3-column bar. */
.nav-menu { display: contents; }

.nav-links {
  display: flex; align-items: center; justify-content: center; gap: 0.3rem;
  list-style: none; margin: 0; padding: 0;
  grid-column: 2;
}
.nav-links li { margin: 0; }
.nav-links li::marker { content: none; }
.nav-links a:not(.btn) {
  color: var(--text-body); padding: 0.45rem 0.8rem; border-radius: var(--radius-pill);
  font-size: 0.92rem; font-weight: 550; letter-spacing: 0;
  transition: color 0.15s, background 0.15s;
}
.nav-links a:not(.btn):hover { color: var(--text); background: #F0F3F5; }
.nav-links a:not(.btn)[aria-current="page"] {
  color: var(--accent-700); background: var(--accent-100);
}
.nav-links a:not(.btn)[aria-current="page"]:hover {
  color: var(--accent-700); background: var(--accent-100);
}
.nav-cta.btn {
  grid-column: 3; justify-self: end;
  padding: 0.52rem 1.05rem;
  font-size: 0.88rem;
  white-space: nowrap;
}

.nav-toggle {
  display: none; background: transparent; border: 1px solid var(--border-strong);
  color: var(--text); width: 44px; height: 44px; border-radius: 12px;
  cursor: pointer; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.nav-toggle:hover { background: var(--bg-alt); }
.nav-toggle-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 18px;
  height: 14px;
}
.nav-toggle-bars span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] {
  background: var(--bg-alt);
  border-color: var(--border);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.4);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 860px) {
  /* Keep a full-bleed sticky bar on phones — floating pills feel less native. */
  .site-header.scrolled {
    top: 0;
    padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
  }
  .site-header.scrolled .nav-bar {
    max-width: 100%;
    border-radius: 0;
    border-color: transparent;
    border-bottom-color: var(--border);
    box-shadow: 0 8px 24px -18px rgba(13, 18, 32, 0.35);
    background: rgba(255, 255, 255, 0.94);
  }

  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    height: 58px;
  }
  .brand { grid-column: auto; }
  .brand .wordmark { font-size: 1.1rem; }
  .brand img,
  .brand svg { width: 30px; height: 30px; border-radius: 8px; }
  .nav-toggle { display: inline-flex; }
  .nav-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute; top: 100%; left: 0; right: 0;
    gap: 0.2rem;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    border-bottom: 1px solid var(--border);
    padding: 0.65rem 0.85rem calc(0.95rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.28s ease,
      visibility 0.34s;
    box-shadow: 0 18px 40px -28px rgba(13, 18, 32, 0.45);
    z-index: 99;
    border-radius: 0;
    max-height: min(78dvh, calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px) - 0.5rem));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav-menu.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .site-header.scrolled .nav-menu {
    left: 0; right: 0;
    border: 0;
    border-bottom: 1px solid var(--border);
  }
  .nav-links {
    grid-column: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    width: 100%;
  }
  .nav-links a:not(.btn) {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.95rem 1rem;
    min-height: 48px;
    border-radius: 12px;
    font-size: 1.02rem;
    font-weight: 560;
    line-height: 1.25;
  }
  .nav-links a:not(.btn):hover,
  .nav-links a:not(.btn):active {
    background: var(--bg-alt);
    color: var(--text);
  }
  .nav-links a:not(.btn)[aria-current="page"] {
    color: var(--accent-700);
    background: var(--accent-100);
    border-radius: 12px;
  }
  .nav-links a:not(.btn)[aria-current="page"]:hover {
    color: var(--accent-700);
    background: var(--accent-100);
  }
  .nav-cta.btn {
    grid-column: auto;
    justify-self: stretch;
    width: 100%;
    margin-top: 0.45rem;
    border-radius: 12px;
    padding: 1.05rem 1rem 0.95rem;
    min-height: 48px;
    box-shadow: inset 0 1px 0 var(--border);
  }
  .nav-cta.btn.is-disabled,
  .nav-cta.btn:disabled {
    box-shadow: inset 0 1px 0 var(--border);
  }
}

@supports not (backdrop-filter: blur(1px)) {
  @media (max-width: 860px) {
    .nav-menu { background: #fff; }
  }
}

body.nav-open {
  overflow: hidden;
  touch-action: none;
}

@media (max-width: 860px) {
  :root {
    --header-h: 58px;
    --gutter: clamp(1.15rem, 5.5vw, 1.6rem);
    --section-pad: clamp(3.4rem, 11vw, 5.25rem);
  }
  .hero {
    padding-block: clamp(2.85rem, 11vw, 4.25rem) clamp(3.4rem, 11vw, 5.25rem);
  }
  .hero h1 {
    font-size: clamp(2.15rem, 9.5vw, 3.1rem);
    line-height: 1.12;
  }
  .hero .lede {
    margin-top: 1.15rem;
    font-size: 1.08rem;
    line-height: 1.55;
    max-width: 34ch;
  }
  .hero .btn-row { margin-top: 1.75rem; }
  .section-head { margin-bottom: clamp(1.6rem, 5vw, 2.4rem); }
  .section-head h2 { max-width: 18ch; }
  .cap-hero-card { min-height: 0; }
  .cap-hero-copy { padding: 1.45rem 1.4rem; }
}

@media (min-width: 861px) and (max-width: 1040px) {
  .nav-links a:not(.btn) { padding: 0.4rem 0.55rem; font-size: 0.88rem; }
  .nav-cta.btn { padding: 0.48rem 0.85rem; font-size: 0.85rem; }
}

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600;
  padding: 0.68rem 1.35rem; border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer; text-align: center;
  transition: transform 0.12s ease, background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
  max-width: 100%;
}
@media (max-width: 380px) {
  .btn { white-space: normal; text-wrap: balance; }
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--accent-600); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-700); color: #fff; }
.btn-secondary { background: #fff; color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--bg-alt); color: var(--text); border-color: var(--border-strong); }
.btn:disabled, .btn.is-disabled {
  background: #E9EDF1; color: #5B6472; border-color: transparent;
  box-shadow: none; pointer-events: none;
}
.btn-lg { padding: 0.85rem 1.7rem; font-size: 1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.center .btn-row { justify-content: center; }

/* Connect CTAs — social buttons with branded icon chips + soft lift */
.connect-actions { gap: 0.85rem; }
.btn-social {
  gap: 0.85rem;
  padding: 0.7rem 1.15rem 0.7rem 0.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.btn-social:hover {
  transform: translateY(-2px);
  color: var(--text);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-md);
}
.btn-social:active { transform: translateY(0); }
.btn-social-icon {
  flex-shrink: 0;
  width: 2.35rem; height: 2.35rem;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.18s ease;
}
.btn-social-icon svg { width: 1.05rem; height: 1.05rem; }
.btn-social-label { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.btn-social-arrow {
  margin-left: 0.35rem;
  color: var(--accent-600);
  opacity: 0.75;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.btn-social:hover .btn-social-arrow { transform: translateX(3px); opacity: 1; }
.btn-social:hover .btn-social-icon { transform: scale(1.04); }

.btn-social--linkedin .btn-social-icon {
  background: var(--steel);
  color: #fff;
}
.btn-social--x .btn-social-icon {
  background: var(--accent-600);
  color: #fff;
}

@media (max-width: 420px) {
  .btn-social { width: 100%; justify-content: flex-start; }
}

/* --------------------------------------------------------------- hero */
.hero {
  padding-block: clamp(4.5rem, 10vw, 7.5rem) clamp(2.5rem, 5vw, 3.5rem);
  background:
    radial-gradient(900px 480px at 72% -12%, rgba(54, 173, 163, 0.14), transparent 60%),
    radial-gradient(700px 420px at 12% 0%, rgba(47, 87, 138, 0.07), transparent 55%),
    var(--bg);
}
.hero h1 {
  font-size: var(--fs-display);
  font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.06; max-width: 17ch;
  margin-inline: auto;
}
.hero h1 .accent {
  color: var(--accent-600); /* fallback */
  background: linear-gradient(110deg, var(--accent-600) 0%, var(--accent-500) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .lede { margin-top: 1.4rem; font-size: clamp(1.1rem, 2.4vw, 1.3rem); max-width: 56ch; }
.hero .btn-row { margin-top: 2.2rem; }
.hero-note { margin-top: 1.15rem; font-size: 0.85rem; color: var(--text-muted); display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.1rem; }
.hero-note:empty { display: none; }
.hero-note span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero-note .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-600); }

/* --------------------------------------------------------------- grids/cards */
.grid { display: grid; gap: 1.1rem; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-md);
}
.card h3 { font-size: 1.12rem; }
.card p { font-size: 0.95rem; }
.card p:last-child { margin-bottom: 0; }
.card .card-index {
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-600);
  margin-bottom: 0.7rem;
}

/* Capabilities: two-tier layout — large hero cards + smaller feature tiles */
.cap-stack { display: grid; gap: 1.1rem; }

.cap-hero {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
}
@media (max-width: 900px) { .cap-hero { grid-template-columns: 1fr; } }

.cap-hero-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.cap-hero-card--dark {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(54, 173, 163, 0.22), transparent 55%),
    linear-gradient(155deg, var(--indigo) 0%, var(--navy) 52%, #1A2560 100%);
  color: var(--text-on-dark);
  --cap-title: #C6CBFF;
}
.cap-hero-card--blue {
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(54, 173, 163, 0.18), transparent 58%),
    linear-gradient(155deg, #2A3F8F 0%, var(--steel) 58%, #3A6BA8 100%);
  color: var(--text-on-dark);
  --cap-title: #CFE0FF;
}
.cap-hero-card--steel {
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(54, 173, 163, 0.20), transparent 55%),
    linear-gradient(155deg, #2F578A 0%, #3A6BA8 55%, #4A7FB8 100%);
  color: var(--text-on-dark);
  --cap-title: #DBECFF;
}
.cap-hero-card--teal {
  background:
    radial-gradient(120% 130% at 0% 100%, rgba(18, 19, 88, 0.25), transparent 55%),
    linear-gradient(155deg, #1E7A72 0%, #2A9A90 50%, #36ADA3 100%);
  color: var(--text-on-dark);
  --cap-title: #DFFBF5;
}
.cap-hero-copy {
  padding: clamp(1.6rem, 3vw, 2.2rem);
}
.cap-hero-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--link-on-dark);
  margin-bottom: 0.65rem;
}
.cap-hero-card h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.65rem);
  letter-spacing: -0.02em;
  color: var(--cap-title, #fff);
  margin-bottom: 0.55em;
}
.cap-hero-card p {
  font-size: 0.97rem;
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: 0;
  max-width: 42ch;
}

/* --------------------------------------------------------------- card rail
   Apple-style horizontal rail for the problem section: white cards with an
   icon chip, a bold claim, body copy, and a line-art illustration anchored
   at the bottom. Scroll-snap track paged by the circular arrow buttons. */
.carousel { position: relative; }
.carousel-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  padding: 0.5rem 0;
}
.carousel-track:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 4px; border-radius: 8px; }

.show-card {
  display: flex; flex-direction: column;
  min-height: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.show-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.show-card-body { padding: 1.5rem 1.5rem 0; }
.show-card-icon {
  width: 42px; height: 42px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-50);
  border: 1px solid var(--accent-line);
  color: var(--accent-700);
  margin-bottom: 1rem;
}
.show-card-icon svg { width: 22px; height: 22px; }
.show-card h3 { font-size: 1.15rem; letter-spacing: -0.015em; margin-bottom: 0.5em; }
.show-card p { color: var(--text-body); font-size: 0.94rem; }
.show-card-art {
  margin-top: auto;
  padding: 1rem 1.25rem 1.35rem;
  display: flex; justify-content: center;
}
.show-card-art svg {
  width: min(200px, 100%); height: auto;
  transition: transform 0.3s ease;
}
.show-card:hover .show-card-art svg { transform: translateY(-4px) scale(1.02); }
.show-card--answer {
  background: linear-gradient(165deg, #EDF7F5 0%, #F7FCFA 100%);
  border-color: var(--accent-line);
}
.show-card--answer .callout-label { margin-bottom: 1.1rem; }
.show-card-lead { font-weight: 600; color: var(--text); font-size: 1.08rem; }

.carousel-nav { display: none; }
.carousel-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: #fff; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s, transform 0.12s, opacity 0.15s;
}
.carousel-btn:hover { background: var(--bg-alt); }
.carousel-btn:active { transform: translateY(1px); }
.carousel-btn:disabled { opacity: 0.35; cursor: default; }
.carousel-btn svg { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .carousel-track { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- callout */
.callout {
  border: 1px solid var(--accent-line); border-radius: var(--radius-xl);
  background: var(--accent-50); padding: clamp(1.5rem, 3.5vw, 2.25rem);
  margin: 1.5rem 0;
  font-size: 1.1rem;
}
.callout p:last-child { margin-bottom: 0; }
.callout-label {
  display: inline-flex;
  padding: 0.28rem 0.75rem;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid var(--accent-line);
  color: var(--accent-700);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 0.9rem;
}

/* --------------------------------------------------------------- how it works
   Spacious vertical timeline: a numbered rail on the left connects three
   full-width step cards, each pairing the copy with an animated line-art
   illustration in a soft brand-tinted panel. Loop animations are decorative
   only (aria-hidden art) and die under prefers-reduced-motion via the global
   reset rule; draw-in states are scoped to .reveal so no-JS visitors see the
   finished frame. */
.hiw-section { scroll-margin-top: calc(var(--header-h) + 18px); }
.hiw-arrow { color: var(--accent-600); }

.hiw { display: grid; }
.hiw-step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: clamp(1rem, 2.5vw, 1.75rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.hiw-step:last-of-type { padding-bottom: 0; }

.hiw-rail { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.hiw-num {
  flex: 0 0 auto;
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid var(--accent-line);
  color: var(--accent-700);
  font-size: 1rem; font-weight: 700; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-sm);
}
.hiw-rail-line {
  flex: 1;
  width: 2px; border-radius: 1px;
  background: linear-gradient(180deg, var(--accent-line), rgba(191, 227, 223, 0.35));
  transform-origin: top;
}
.hiw-step:last-of-type .hiw-rail-line { display: none; }

.hiw-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(260px, 34vw, 420px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.hiw-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-line);
}
.hiw-copy {
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.hiw-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-50);
  border: 1px solid var(--accent-line);
  color: var(--accent-700);
  margin-bottom: 1.1rem;
}
.hiw-icon svg { width: 24px; height: 24px; }
.hiw-copy h3 { font-size: clamp(1.25rem, 2vw, 1.45rem); letter-spacing: -0.015em; margin-bottom: 0.55em; }
.hiw-copy p { margin: 0; font-size: 1rem; max-width: 58ch; }
.hiw-art {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.hiw-art svg { width: min(320px, 100%); height: auto; }

.hiw-note {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  display: flex; align-items: flex-start; gap: 1rem;
  background: var(--accent-50);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
}
.hiw-note-icon {
  flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid var(--accent-line);
  color: var(--accent-700);
}
.hiw-note-icon svg { width: 20px; height: 20px; }
.hiw-note p { margin: 0.35rem 0 0; font-size: 0.95rem; color: var(--text-body); max-width: 90ch; }

@media (max-width: 900px) {
  .hiw-card { grid-template-columns: 1fr; }
  .hiw-art { order: -1; padding: clamp(1.5rem, 5vw, 2rem); }
  .hiw-art svg { width: min(280px, 88%); }
}
@media (max-width: 640px) {
  .hiw-step { grid-template-columns: 40px minmax(0, 1fr); column-gap: 0.8rem; }
  .hiw-num { width: 40px; height: 40px; font-size: 0.85rem; }
}

/* draw-in choreography — initial states exist only once JS adds .reveal */
.hiw-step.reveal .hiw-num { opacity: 0; transform: scale(0.6); }
.hiw-step.is-visible .hiw-num {
  opacity: 1; transform: scale(1);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s, opacity 0.3s ease 0.1s;
}
.hiw-step.reveal .hiw-rail-line { transform: scaleY(0); }
.hiw-step.is-visible .hiw-rail-line {
  transform: scaleY(1);
  transition: transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1) 0.35s;
}
.hiw-bar { transform-box: fill-box; transform-origin: left center; }
.hiw-step.reveal .hiw-bar { transform: scaleX(0); }
.hiw-step.is-visible .hiw-bar { transform: scaleX(1); transition: transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1) 0.45s; }
.hiw-step.is-visible .hiw-bar--2 { transition-delay: 0.6s; }
.hiw-step.is-visible .hiw-bar--3 { transition-delay: 0.75s; }

/* looping accents inside the illustrations — slow and subtle */
.hiw-scan { animation: hiw-scan 3.4s ease-in-out infinite alternate; }
@keyframes hiw-scan { from { transform: translateY(0); } to { transform: translateY(56px); } }
.hiw-float { animation: hiw-float 3.8s ease-in-out infinite; }
@keyframes hiw-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.hiw-pulse {
  transform-box: fill-box; transform-origin: center;
  animation: hiw-pulse 2.8s ease-out infinite;
}
.hiw-pulse--2 { animation-delay: 1.4s; }
@keyframes hiw-pulse {
  0% { transform: scale(0.55); opacity: 0.8; }
  70% { opacity: 0.15; }
  100% { transform: scale(1.25); opacity: 0; }
}
.hiw-glow { animation: hiw-glow 3.2s ease-in-out infinite; }
@keyframes hiw-glow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.hiw-link { stroke-dasharray: 4 7; animation: hiw-link 1.5s linear infinite; }
@keyframes hiw-link { to { stroke-dashoffset: -11; } }
.hiw-twinkle {
  transform-box: fill-box; transform-origin: center;
  animation: hiw-twinkle 2.6s ease-in-out infinite;
}
@keyframes hiw-twinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* --------------------------------------------------------------- inline code */
code.inline {
  background: #F2F5F7; border: 1px solid #E0E5EB;
  padding: 0.1rem 0.4rem; border-radius: 5px; font-size: 0.85em; color: #111827;
  word-break: break-word;
}

/* --------------------------------------------------------------- showcase / feature flow
   The product tour shows every capture as you scroll — wide two-panel rows
   for the flagship views, bento pairs for the rest, sides alternating for
   rhythm. Each capture floats in a soft brand-tinted media panel (the
   flagship in a dark navy one) and opens the lightbox on click. */
.showcase {
  padding-block: clamp(1rem, 3vw, 2rem) var(--section-pad);
  scroll-margin-top: calc(var(--header-h) + 18px);
}
.showcase .wrap { max-width: 1240px; }
.showcase .section-head { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); max-width: 66ch; }
.showcase .section-head h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); }

/* wide two-panel row: copy card beside a large media panel */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 1.25rem;
  align-items: stretch;
  margin-bottom: 1.25rem;
}
.feature--rev { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.feature-copy {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 900px) {
  .feature, .feature--rev { grid-template-columns: 1fr; }
  .feature .feature-media { order: -1; }
}

/* bento pair: media panel with copy on the page below it */
.feature-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr; gap: 2rem; } }
.feature-card { display: flex; flex-direction: column; }
.feature-card-copy { padding: 1.35rem 0.4rem 0.75rem; }

.feature-title { font-size: 1.35rem; margin-bottom: 0.5rem; letter-spacing: -0.015em; }
.feature-card-copy .feature-title { font-size: 1.2rem; }
.feature-lede { color: var(--text-body); font-size: 1.02rem; margin-bottom: 0.9rem; }
.feature-points { list-style: none; margin: 0; padding: 0; }
.feature-points li {
  position: relative; padding-left: 1.5rem; margin: 0.5rem 0;
  color: var(--text-muted); font-size: 0.95rem;
}
.feature-points li::before {
  content: ""; position: absolute; left: 2px; top: 0.55em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-500);
}

/* media panels: soft brand washes holding the capture as a floating window */
.feature-media {
  border-radius: var(--radius-xl);
  padding: clamp(1.1rem, 2.5vw, 2rem);
  display: flex; align-items: center;
  overflow: hidden;
}
.tint-teal {
  background:
    radial-gradient(120% 130% at 85% -10%, rgba(54, 173, 163, 0.30), transparent 60%),
    linear-gradient(165deg, #E7F4F2 0%, #F2FAF8 100%);
}
.tint-steel {
  background:
    radial-gradient(120% 130% at 15% -10%, rgba(47, 87, 138, 0.26), transparent 60%),
    linear-gradient(165deg, #E8EFF7 0%, #F4F8FC 100%);
}
.tint-indigo {
  background:
    radial-gradient(120% 130% at 85% -10%, rgba(35, 47, 114, 0.22), transparent 60%),
    linear-gradient(165deg, #EAEBF7 0%, #F5F6FC 100%);
}
.tint-navy {
  background:
    radial-gradient(120% 140% at 85% -10%, rgba(54, 173, 163, 0.26), transparent 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(47, 87, 138, 0.32), transparent 60%),
    linear-gradient(160deg, #101336 0%, #0B1220 58%, #10163E 100%);
  box-shadow: 0 24px 70px -30px rgba(54, 173, 163, 0.35);
}

.shot-frame {
  display: block;
  width: 100%;
  margin: 0;
  padding: 1.9rem 0 0;
  border: 0;
  position: relative;
  background: transparent;
  cursor: zoom-in;
}
/* title-bar dots */
.shot-frame::before {
  content: "";
  position: absolute;
  top: 0.7rem; left: 2px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--steel);
  box-shadow: 14px 0 0 var(--teal), 28px 0 0 rgba(11, 18, 32, 0.18);
}
.tint-navy .shot-frame::before {
  box-shadow: 14px 0 0 var(--teal), 28px 0 0 rgba(255, 255, 255, 0.25);
}
/* hover/keyboard invitation to open the lightbox (the button's aria-label
   already names the action for assistive tech) */
.shot-frame::after {
  content: "Click to enlarge";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  padding: 0.55rem 1.15rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink-900);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.55);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.shot-frame:hover::after,
.shot-frame:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.shot-frame:focus-visible { outline-offset: -4px; }
/* Each capture keeps its own aspect ratio (heights vary per shot), so the frame
   sizes to the image — no fixed ratio, no cropping, no letterbox gaps. The
   width/height attributes on each <img> reserve space to avoid layout shift. */
.shot-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(11, 18, 32, 0.10), 0 18px 45px -22px rgba(11, 18, 32, 0.35);
  /* Keep UI text crisp — avoid filters/scaling that soften screenshots */
  image-rendering: auto;
  transition: box-shadow 0.18s ease;
}
.shot-frame:hover img {
  box-shadow: 0 0 0 1px rgba(11, 18, 32, 0.16), 0 22px 50px -20px rgba(11, 18, 32, 0.42);
}
.tint-navy .shot-frame img {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 18px 50px -22px rgba(0, 0, 0, 0.7);
}
.tint-navy .shot-frame:hover img {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 22px 55px -18px rgba(0, 0, 0, 0.78);
}

/* lightbox */
.shot-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1rem, env(safe-area-inset-top, 0px))
           max(1rem, env(safe-area-inset-right, 0px))
           max(1rem, env(safe-area-inset-bottom, 0px))
           max(1rem, env(safe-area-inset-left, 0px));
}
.shot-lightbox[hidden] { display: none; }
.shot-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 12, 20, 0.82);
  backdrop-filter: blur(6px);
}
.shot-lightbox-dialog {
  position: relative;
  z-index: 1;
  width: min(96vw, 1360px);
  max-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shot-lightbox-img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 92vh;
  object-fit: contain;
  image-rendering: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
.shot-lightbox-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-pill);
  background: rgba(11, 18, 32, 0.78);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.shot-lightbox-close::before {
  content: "";
  position: absolute;
  inset: -0.75rem;
}
.shot-lightbox-close svg { width: 1.35rem; height: 1.35rem; }
.shot-lightbox-close:hover,
.shot-lightbox-close:focus-visible {
  background: rgba(11, 18, 32, 0.95);
  color: #fff;
  transform: scale(1.06);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

/* --------------------------------------------------------------- legal / doc pages */
.doc-hero { padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem; }
.doc-hero h1 { font-size: var(--fs-h1-doc); letter-spacing: -0.02em; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; color: var(--text-muted); font-size: 0.82rem; margin-top: 1rem; }
.doc-meta span { display: inline-flex; align-items: center; gap: 0.4rem; }

.doc-layout { display: grid; grid-template-columns: 240px 1fr; gap: 3rem; align-items: start; }
.doc-layout:not(:has(.toc)) { grid-template-columns: 1fr; }
@media (max-width: 940px) { .doc-layout { grid-template-columns: 1fr; gap: 1.5rem; } }
.toc { position: sticky; top: 90px; font-size: 0.85rem; }
@media (max-width: 940px) {
  .toc { position: static; border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; background: #fff; box-shadow: var(--shadow-sm); }
}
.toc h2 { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.75rem; }
.toc ol { list-style: none; padding: 0; margin: 0; }
.toc li { margin: 0; }
.toc li::marker { content: none; }
.toc a { display: block; color: var(--text-muted); padding: 0.28rem 0; border-left: 2px solid transparent; padding-left: 0.75rem; }
.toc a:hover { color: var(--text); border-color: var(--accent-line); text-decoration: none; }

.doc-body { min-width: 0; }
.doc-body h2 {
  font-size: 1.4rem; margin-top: 2.75rem; padding-top: 1.6rem; border-top: 1px solid var(--border);
  scroll-margin-top: 90px;
}
.doc-body > h2:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.doc-body h3 { font-size: 1.05rem; margin-top: 1.75rem; }
.doc-body ul, .doc-body ol { padding-left: 1.3rem; }
.doc-body .sec-num {
  color: var(--accent-600);
  font-size: 0.8em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-right: 0.55rem;
}

/* --------------------------------------------------------------- lists w/ x */
.xlist { list-style: none; padding: 0; }
.xlist li { position: relative; padding-left: 1.9rem; margin: 0.6rem 0; color: var(--text-body); }
.xlist li::before {
  content: "✕"; position: absolute; left: 0; top: 0; color: #D92D20; font-weight: 700;
  width: 1.3rem; text-align: center;
}

/* --------------------------------------------------------------- FAQ
   Home-page FAQ: a two-column grid of soft rounded question rows. Each row
   carries a circular plus chip that fills teal and spins into a cross when
   the answer opens; the open row lifts to a white card. */
.faq-home { scroll-margin-top: calc(var(--header-h) + 18px); }
.faq--home {
  max-width: 1060px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 860px) { .faq--home { grid-template-columns: 1fr; } }

.faq details {
  background: var(--bg-alt);
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 0 1.4rem;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.faq details:hover { background: #F0F3F5; }
.faq details[open] {
  background: #fff;
  border-color: var(--accent-line);
  box-shadow: var(--shadow-md);
}
.faq summary {
  cursor: pointer; padding: 1.15rem 0; font-weight: 600; color: var(--text);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-600);
  font-size: 1.25rem; font-weight: 400; line-height: 1;
  transition: transform 0.25s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
  background: var(--accent-600);
  border-color: var(--accent-600);
  color: #fff;
}
.faq details[open] summary { border-bottom: 1px solid var(--border); }
.faq details p { padding: 1rem 0 0.55rem; margin: 0; color: var(--text-body); font-size: 0.95rem; }
.faq details p:last-child { padding-bottom: 1.2rem; }
.faq details ul {
  margin: 0;
  padding: 0 0 1.2rem 1.15rem;
  color: var(--text-body);
  font-size: 0.95rem;
}
.faq details li { margin: 0.55rem 0; }
.faq details li strong { color: var(--text); }

/* --------------------------------------------------------------- closing CTA
   Genda-style send-off band: one big rounded light panel on a faint grid,
   soft brand-color glows rising from the corners, centered pitch + buttons. */
.cta { padding-top: 0; }
.cta-band {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 3rem);
  text-align: center;
  background:
    radial-gradient(380px 260px at 6% 108%, rgba(54, 173, 163, 0.22), transparent 65%),
    radial-gradient(440px 300px at 95% 110%, rgba(47, 87, 138, 0.20), transparent 65%),
    radial-gradient(560px 300px at 50% -25%, rgba(54, 173, 163, 0.08), transparent 60%),
    repeating-linear-gradient(0deg, rgba(13, 18, 32, 0.022) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(13, 18, 32, 0.022) 0 1px, transparent 1px 48px),
    linear-gradient(180deg, #F7F9FA 0%, #F2F5F7 100%);
}
.cta-band h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin-inline: auto;
}
.cta-band .lede {
  margin: 1rem auto 0;
  max-width: 52ch;
}
.cta-band .btn-row {
  margin-top: 2.25rem;
  justify-content: center;
}

/* --------------------------------------------------------------- about page
   Founder story page. The hero pairs an editorial intro with a portrait
   panel (a brand monogram stands in until the photo exists — main.js flips
   .no-photo on image error). The fact strip, pull quote, journey timeline
   (reusing the .hiw system wholesale), principle cards, and the connect band
   carry the rest. Hero entrance keyframes run once on load; the global
   reduced-motion reset collapses them to their end state. */
.about-hero {
  padding-block: clamp(3.25rem, 8vw, 5.5rem) clamp(2.75rem, 6vw, 4.25rem);
  background:
    radial-gradient(900px 480px at 82% -12%, rgba(54, 173, 163, 0.15), transparent 60%),
    radial-gradient(700px 420px at 6% 6%, rgba(47, 87, 138, 0.07), transparent 55%),
    var(--bg);
}
.about-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.about-hero-copy h1 {
  font-size: var(--fs-display);
  letter-spacing: -0.025em;
  line-height: 1.06;
  margin-bottom: 0;
}
.about-hero-copy .lede { margin-top: 1.25rem; margin-bottom: 0; max-width: 54ch; }

.hero-chips {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 1.5rem 0 0; padding: 0;
}
.hero-chips li {
  margin: 0;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--text-body);
  font-size: 0.85rem; font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.hero-chips li::marker { content: none; }
.about-hero-actions { margin-top: 2.1rem; }

/* portrait panel — fine ring, soft brand glows drifting behind the frame.
   Glows stay inside the portrait bounds (no negative offsets) so narrow
   iPhones don't pick up horizontal edge bleed. */
.about-portrait {
  position: relative;
  width: min(400px, 100%);
  justify-self: center;
}
.about-portrait::before,
.about-portrait::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  animation: hiw-float 5.5s ease-in-out infinite;
  pointer-events: none;
}
.about-portrait::before {
  top: 2%; right: 2%;
  width: 58%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(54, 173, 163, 0.30), transparent 65%);
}
.about-portrait::after {
  bottom: 8%; left: 2%;
  width: 52%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(47, 87, 138, 0.22), transparent 65%);
  animation-delay: 2.2s;
}
/* the supplied photo is a circle on black, so the frame clips to a circle —
   the ring and shadow trace the photo's own edge */
.about-portrait-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-alt);
  box-shadow: 0 0 0 1px rgba(13, 18, 32, 0.08), var(--shadow-lg);
}
.about-portrait-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.about-portrait.no-photo .about-portrait-frame img { display: none; }
/* monogram tile — brand gradient on the cta-band's faint grid */
.about-portrait-fallback {
  display: none;
  position: absolute; inset: 0;
  align-items: center; justify-content: center;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(54, 173, 163, 0.35), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 40px),
    linear-gradient(155deg, var(--indigo) 0%, var(--navy) 52%, #1A2560 100%);
}
.about-portrait.no-photo .about-portrait-fallback { display: flex; }
.about-portrait-fallback span {
  font-size: clamp(6.5rem, 12vw, 9rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 12px 40px rgba(11, 18, 32, 0.4);
}
.about-portrait-caption {
  position: relative;
  z-index: 1;
  margin: 0.95rem 0 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.about-portrait-caption strong { font-weight: 600; }

/* hero entrance — staggered rise, once, on load */
@keyframes about-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.about-hero [data-enter] { animation: about-rise 0.7s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
.about-hero [data-enter="2"] { animation-delay: 80ms; }
.about-hero [data-enter="3"] { animation-delay: 160ms; }
.about-hero [data-enter="4"] { animation-delay: 240ms; }
.about-hero [data-enter="5"] { animation-delay: 320ms; }

@media (max-width: 860px) {
  .about-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-portrait { width: min(320px, 82%); }
  .about-hero-copy { text-align: center; }
  .about-hero-copy h1 {
    font-size: clamp(2.05rem, 9vw, 2.75rem);
    text-wrap: balance;
  }
  .about-hero-copy .lede { margin-inline: auto; }
  .hero-chips, .about-hero-actions { justify-content: center; }
}
@media (max-width: 390px) {
  .about-hero { padding-block: 2.5rem 2rem; }
  .about-hero-grid { gap: 1.75rem; }
  .about-portrait { width: min(280px, 78%); }
  .hero-chips { gap: 0.4rem; justify-content: center; }
  .hero-chips li { padding: 0.35rem 0.75rem; font-size: 0.8rem; }
  .fact { padding-left: 1rem; }
  .fact dd { font-size: clamp(1.65rem, 8vw, 2rem); }
  .pull-quote {
    padding: 1.5rem 1.15rem;
  }
  .pull-quote p { font-size: clamp(1.25rem, 6.5vw, 1.55rem); max-width: none; }
  .connect-card {
    gap: 0.75rem;
    padding: 1.05rem 1rem;
  }
  .connect-card-icon { width: 2.5rem; height: 2.5rem; border-radius: 10px; }
  .connect-card-title { font-size: 0.98rem; }
  .connect-card-handle { font-size: 0.78rem; }
  .cta-band {
    border-radius: 20px;
    padding: 2.25rem 1.15rem;
  }
}

/* fact strip — big quiet numbers between hairlines */
.about-facts { padding-block: 0 clamp(1rem, 2vw, 1.5rem); }
.fact-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem 1.5rem;
  margin: 0;
  padding: clamp(1.9rem, 4vw, 2.6rem) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.fact {
  display: flex;
  flex-direction: column-reverse; /* number (dd) above its label (dt) */
  gap: 0.4rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--accent-line);
}
.fact dd {
  margin: 0;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.fact dt {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  max-width: 24ch;
}
@media (max-width: 720px) { .fact-strip { grid-template-columns: 1fr; } }

/* story — narrow editorial column with a pull-quote beat */
.story-flow { max-width: 820px; margin-inline: auto; }
.story-flow > p {
  font-size: clamp(1.02rem, 1.5vw, 1.13rem);
  line-height: 1.75;
  margin-bottom: 1.4rem;
}
.story-flow > p:last-child { margin-bottom: 0; }
.pull-quote {
  position: relative;
  margin: clamp(2rem, 4.5vw, 2.75rem) 0;
  padding: clamp(1.9rem, 4.5vw, 2.9rem) clamp(1.5rem, 4.5vw, 3rem);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-xl);
  background: linear-gradient(165deg, #EDF7F5 0%, #F7FCFA 100%);
  overflow: hidden;
}
.pull-quote::before {
  content: "\201C";
  position: absolute;
  top: -2.4rem; left: 0.6rem;
  font-size: 11rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-100);
  pointer-events: none;
}
.pull-quote p {
  position: relative;
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.32;
  color: var(--text);
  max-width: 26ch;
}
.pull-quote .accent {
  color: var(--accent-600); /* fallback */
  background: linear-gradient(110deg, var(--accent-600) 0%, var(--accent-500) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* philosophy — three principle cards */
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }
.philosophy-card .show-card-icon { margin-bottom: 1.1rem; }
.philosophy-card h3 { font-size: 1.15rem; letter-spacing: -0.015em; }
.philosophy-card p { color: var(--text-body); }

/* connect — the cta-band finish with two large channel cards */
.connect-band .eyebrow { background: #fff; }
.connect-band h2 { margin-bottom: 0.5em; }
.connect-cards {
  margin-top: 2.25rem;
  margin-inline: auto;
  max-width: 780px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1.1rem;
  text-align: left;
}
@media (max-width: 720px) { .connect-cards { grid-template-columns: 1fr; } }
.connect-card {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.connect-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-md);
  color: var(--text);
}
.connect-card:active { transform: translateY(-1px); }
.connect-card-icon {
  flex: 0 0 auto;
  width: 3rem; height: 3rem;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.connect-card-icon svg { width: 1.4rem; height: 1.4rem; }
.connect-card-body { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.connect-card-title { font-size: 1.05rem; font-weight: 650; }
.connect-card-handle {
  font-size: 0.85rem;
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.connect-card-arrow {
  margin-left: auto;
  color: var(--accent-600);
  opacity: 0.75;
  font-size: 1.15rem;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.connect-card:hover .connect-card-arrow { transform: translateX(4px); opacity: 1; }

.connect-card--linkedin {
  border-color: transparent;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(54, 173, 163, 0.24), transparent 55%),
    linear-gradient(155deg, var(--indigo) 0%, var(--navy) 52%, #1A2560 100%);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.connect-card--linkedin:hover {
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.connect-card--linkedin .connect-card-title { color: #fff; }
.connect-card--linkedin .connect-card-handle { color: var(--text-on-dark-muted); }
.connect-card--linkedin .connect-card-arrow { color: var(--link-on-dark); }
.connect-card--linkedin .connect-card-icon { background: #fff; color: var(--steel); }
.connect-card--x .connect-card-icon { background: var(--accent-600); color: #fff; }

/* --------------------------------------------------------------- 404 */
.notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; padding-block: 2rem; }
.notfound .code404 {
  font-size: clamp(5rem, 18vw, 9rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text);
  line-height: 1;
  margin-bottom: 1.25rem;
}
.notfound .code404 .accent { color: var(--accent-600); }
.notfound .lede { margin-inline: auto; }

/* --------------------------------------------------------------- footer */
.site-footer {
  position: relative;
  padding-block: 3.5rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
  margin-top: 0;
  background: var(--ink-900);
  color: var(--text-on-dark-muted);
}
.site-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--brand-gradient);
}
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }
@media (max-width: 460px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.footer-brand img,
.footer-brand svg {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  box-shadow: 0 0 0 2px #ffffff;
}
.footer-brand .wordmark { font-size: 1.18rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.footer-brand p { font-size: 0.88rem; color: var(--text-on-dark-muted); margin-top: 0.6rem; max-width: 34ch; }
.footer-col h3 { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8A94A6; margin-bottom: 0.9rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin: 0.4rem 0; }
.footer-col li::marker { content: none; }
.footer-col a { color: #C6CDDA; font-size: 0.92rem; }
.footer-col a:hover { color: var(--link-on-dark); }
.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between;
  font-size: 0.82rem; color: #8A94A6;
}
.footer-bottom a { color: var(--text-on-dark-muted); }
.footer-bottom a:hover { color: var(--link-on-dark); }

/* --------------------------------------------------------------- reveal
   Scroll-reveal. The .reveal class is only ever added by main.js, and JS
   skips the whole feature under prefers-reduced-motion or without
   IntersectionObserver — so content is never hidden from anyone. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.55s cubic-bezier(0.2, 0.6, 0.2, 1);
}
/* feature rows grow in as well as fading up */
.feature.reveal, .feature-card.reveal { transform: translateY(20px) scale(0.99); }
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.grid > .reveal:nth-child(2), .hiw > .reveal:nth-child(2), .carousel-track > .reveal:nth-child(2) { transition-delay: 80ms; }
.grid > .reveal:nth-child(3), .hiw > .reveal:nth-child(3), .carousel-track > .reveal:nth-child(3) { transition-delay: 160ms; }
.grid > .reveal:nth-child(4), .hiw > .reveal:nth-child(4), .carousel-track > .reveal:nth-child(4) { transition-delay: 240ms; }
.feature-grid > .reveal:nth-child(2) { transition-delay: 100ms; }

/* --------------------------------------------------------------- utilities */
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.small { font-size: 0.85rem; }

/* --------------------------------------------------------------- print */
@media print {
  .site-header, .site-footer, .skip-link, .toc, .nav-toggle { display: none !important; }
  body { padding-top: 0; background: #fff; color: #000; }
  .doc-layout { display: block; }
  .doc-body h2 { border-top-color: #ccc; }
  a { color: #000; text-decoration: underline; }
  .callout { border-color: #ccc; background: #fff; }
}