/* =========================================================================
   Martium · Phantom Orbit Labs — shared stylesheet
   Design system extends the single-page reference (phantomorbitlabs-website.html).
   Tokens are intentionally unchanged from the reference — this file elaborates
   the component set needed for a full multi-page site, it does not replace
   the established visual language.
   ========================================================================= */

:root{
  --bg: #0e0f13;
  --surface: #161821;
  --surface-2: #1c1e29;
  --line: #2b2e3a;
  --text: #eae6de;
  --text-dim: #8d8fa0;
  --rust: #a8501f;
  --rust-bright: #d98c5f;
  --deimos: #c9a66b;
  --phobos: #6f8ca6;
  --phantom: #8b7fd1;
  --good: #7fae86;
  --warn: #cf9a3f;
  --bad: #c96f6f;
  --disp: 'Space Grotesk', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --body: 'Inter', sans-serif;

  /* spacing scale — 4px rhythm, matches reference's implicit rhythm */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px;
  --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body); line-height:1.65; -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--rust); color:#fff; }
a{ color:var(--rust-bright); }
img,svg{ display:block; max-width:100%; }
.wrap{ max-width: 1080px; margin:0 auto; padding:0 28px; }
.wrap-narrow{ max-width: 820px; margin:0 auto; padding:0 28px; }
main{ display:block; }

/* skip link — keyboard users shouldn't have to tab through the whole nav on every page */
.skip-link{
  position:absolute; left:-9999px; top:auto; z-index:100;
  background:var(--rust-bright); color:var(--bg); font-family:var(--mono);
  font-size:.8rem; font-weight:600; padding:10px 16px; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; top:0; }

.stars{
  position:fixed; inset:0; z-index:-1; opacity:.55;
  background-image:
    radial-gradient(1.4px 1.4px at 40px 60px, #ffffff26, transparent),
    radial-gradient(1px 1px at 160px 120px, #ffffff1c, transparent),
    radial-gradient(1.4px 1.4px at 260px 40px, #ffffff22, transparent),
    radial-gradient(1px 1px at 340px 180px, #ffffff18, transparent),
    radial-gradient(1.4px 1.4px at 80px 220px, #ffffff26, transparent);
  background-repeat:repeat; background-size: 420px 260px;
  will-change: transform;
}

/* ---------------- nav ---------------- */
header.top{
  position:sticky; top:0; z-index:30;
  background: rgba(14,15,19,0.86); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px; max-width:1080px; margin:0 auto;
}
.brandmark{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brandmark .glyph{
  width:16px; height:16px; border-radius:50%;
  border:1.5px solid var(--phantom);
  box-shadow: 0 0 0 3px transparent, 0 0 10px #8b7fd166;
  position:relative; flex-shrink:0;
}
.brandmark .glyph::after{
  content:""; position:absolute; inset:4px; border-radius:50%;
  background:var(--phantom); opacity:.85;
}
.brandmark .names{ display:flex; flex-direction:column; line-height:1.1; }
.brandmark .company{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em;
  color:var(--text-dim); text-transform:uppercase;
}
.brandmark .product{
  font-family:var(--disp); font-weight:700; font-size:1.02rem; color:var(--text);
}
nav.toplinks{ display:flex; align-items:center; gap:24px; font-family:var(--mono); font-size:.76rem; }
nav.toplinks a{ color:var(--text-dim); text-decoration:none; }
nav.toplinks a:hover{ color:var(--text); }
nav.toplinks a[aria-current="page"]{ color:var(--rust-bright); }
.nav-cta{
  font-family:var(--mono); font-size:.74rem; color:var(--bg) !important;
  background:var(--rust-bright); padding:7px 14px; border-radius:7px;
  text-decoration:none; font-weight:600;
}
.nav-toggle{
  display:none; background:none; border:1px solid var(--line); border-radius:7px;
  width:38px; height:38px; color:var(--text); cursor:pointer; padding:0;
  align-items:center; justify-content:center;
}
.nav-toggle svg{ width:18px; height:18px; }
@media (max-width:760px){
  nav.toplinks{
    position:fixed; inset:57px 0 auto 0; flex-direction:column; align-items:stretch;
    background:rgba(14,15,19,.98); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line); padding:8px 28px 18px; gap:2px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition: opacity .18s ease, transform .18s ease;
  }
  nav.toplinks.open{ transform:none; opacity:1; pointer-events:auto; }
  nav.toplinks a:not(.nav-cta){ padding:12px 0; border-bottom:1px solid var(--line); font-size:.86rem; }
  nav.toplinks .nav-cta{ margin-top:12px; text-align:center; }
  .nav-toggle{ display:inline-flex; }
}

/* breadcrumb — used on deep pages so the back path is always explicit */
.breadcrumb{
  font-family:var(--mono); font-size:.72rem; color:var(--text-dim);
  display:flex; gap:8px; align-items:center; padding:18px 0 0;
}
.breadcrumb a{ color:var(--text-dim); text-decoration:none; }
.breadcrumb a:hover{ color:var(--rust-bright); }
.breadcrumb .sep{ opacity:.5; }
.breadcrumb .current{ color:var(--text); }

/* ---------------- page hero (non-home pages) ---------------- */
.page-hero{ padding: 40px 0 52px; }
.page-hero h1{ margin-bottom:16px; }
.page-hero .lede{ max-width:60ch; }

/* ---------------- hero (home) ---------------- */
.hero{
  padding: 76px 0 50px;
  display:grid; grid-template-columns: .92fr 1.08fr; gap:36px; align-items:center;
}
@media (max-width:820px){ .hero{ grid-template-columns:1fr; padding-top:48px; } }
.eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rust-bright); display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow::before{ content:""; width:20px; height:1px; background:var(--rust-bright); }
h1{
  font-family:var(--disp); font-size:clamp(2.2rem, 5vw, 3.3rem);
  line-height:1.07; margin:0 0 18px; font-weight:700; letter-spacing:-.01em;
}
h1 .accent{ color:var(--rust-bright); }
.lede{ color:var(--text-dim); font-size:1.07rem; max-width:46ch; margin:0 0 30px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  font-family:var(--disp); font-weight:600; font-size:.94rem;
  padding:13px 22px; border-radius:8px; text-decoration:none; border:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:9px; transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn-primary{ background:var(--rust); color:#fff; }
.btn-primary:hover{ background:var(--rust-bright); transform:translateY(-1px); }
.btn-ghost{ border:1px solid var(--line); color:var(--text); background:transparent; }
.btn-ghost:hover{ border-color:var(--text-dim); }
.btn-sm{ padding:9px 16px; font-size:.84rem; }
.btn-block{ justify-content:center; width:100%; }
.hero-meta{
  margin-top:30px; display:flex; gap:22px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.76rem; color:var(--text-dim);
}
.hero-meta span{ display:flex; align-items:center; gap:7px; }
.hero-meta a{ color:var(--text-dim); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; }
.hero-meta a:hover{ color:var(--text); }
.pip{ width:6px; height:6px; border-radius:50%; background:var(--good); flex-shrink:0; }

/* orbit diagram — tilted into 3D space via perspective, not flat top-down.
   A perspective+rotateX on the wrapper turns the flat SVG rings into a
   real elliptical orbit view (how you'd actually see Deimos/Phobos transit
   Mars) for near-zero cost: it's one CSS transform on an existing SVG,
   no WebGL, no extra draw calls. Falls back to the flat view under
   prefers-reduced-motion and on the two motion classes already used. */
.orbit-box{
  position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  perspective: 900px;
}
.orbit-tilt{
  width:100%; height:100%; transform: rotateX(38deg) rotateZ(-6deg);
  transform-style:preserve-3d; transition: transform .4s ease-out;
}
.orbit-svg{ width:100%; height:100%; overflow:visible; }
.ring{ fill:none; stroke:#ffffff14; stroke-dasharray:2 5; }
.label-tag{ font-family:var(--mono); font-size:9px; fill:var(--text-dim); text-transform:uppercase; letter-spacing:.08em; }

/* real 3D orbit scene (home hero only) — Three.js canvas + HTML label overlays.
   Hidden by default; orbit3d.js only reveals this and hides .orbit-tilt once
   the WebGL scene has actually initialized successfully, so a slow/blocked
   CDN or unsupported browser never produces a blank hero — see orbit3d.js. */
.orbit-3d{ position:absolute; inset:0; display:none; }
.orbit-3d canvas{ width:100%; height:100%; display:block; }
.orbit3d-label{
  position:absolute; left:0; top:0; font-family:var(--mono); font-size:9px;
  text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim);
  pointer-events:none; white-space:nowrap; will-change:transform;
}
.orbit3d-label.martium{ color:#f4e9e2; }
.orbit3d-label.deimos{ color:var(--deimos); }
.orbit3d-label.phobos{ color:var(--phobos); }
@media (prefers-reduced-motion: no-preference){
  .spin-slow{ animation: spin 26s linear infinite; transform-origin:200px 200px; }
  .spin-slower{ animation: spin 40s linear infinite reverse; transform-origin:200px 200px; }
  .pulse{ animation: pulse 3.2s ease-in-out infinite; }
  .reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .orbit-tilt{ transform:none; }
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }

/* ---------------- sections ---------------- */
section{ padding:64px 0; border-top:1px solid var(--line); }
section.no-border{ border-top:none; }
section.tight{ padding:44px 0; }
.sec-head{ margin-bottom:34px; max-width:640px; }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.sec-num{ font-family:var(--mono); font-size:.72rem; color:var(--rust-bright); letter-spacing:.1em; }
h2{ font-family:var(--disp); font-size:1.85rem; margin:6px 0 10px; font-weight:600; }
h3{ font-family:var(--disp); font-weight:600; }
.sec-sub{ color:var(--text-dim); }

/* table of contents / sub-nav — used on the long product narrative page
   so a deep page still lets the user jump straight to what they want,
   fighting choice overload without hiding the content itself */
.toc{
  position:sticky; top:73px; z-index:10;
  background:rgba(14,15,19,.9); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); border-top:1px solid var(--line);
  overflow-x:auto;
}
.toc-list{
  display:flex; gap:22px; max-width:1080px; margin:0 auto; padding:13px 28px;
  font-family:var(--mono); font-size:.74rem; white-space:nowrap; list-style:none;
}
.toc-list a{ color:var(--text-dim); text-decoration:none; }
.toc-list a:hover, .toc-list a.active{ color:var(--rust-bright); }

/* problem fragments */
.fragments{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (max-width:700px){ .fragments{ grid-template-columns:1fr; } }
.frag{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:20px; }
.frag b{ color:var(--rust-bright); }
.frag p{ margin:6px 0 0; color:var(--text-dim); font-size:.94rem; }
.frag-close{ margin-top:20px; color:var(--text-dim); font-size:1rem; max-width:70ch; }
.frag-close b{ color:var(--text); }

/* how it works */
.steps{ position:relative; }
.step{ display:grid; grid-template-columns:44px 1fr; gap:18px; padding:16px 0; position:relative; }
.step:not(:last-child)::after{
  content:""; position:absolute; left:21px; top:46px; bottom:-6px; width:1px; background:var(--line);
}
.step-num{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--rust);
  background:var(--surface); color:var(--rust-bright); font-family:var(--mono); font-weight:600;
  font-size:.9rem; display:flex; align-items:center; justify-content:center; z-index:1;
}
.step-body h3{ font-size:1.05rem; margin:4px 0 6px; }
.step-body p{ margin:0 0 10px; color:var(--text-dim); }
.step-body ul{ margin:10px 0 0; padding-left:18px; color:var(--text-dim); font-size:.92rem; }
.step-body li{ margin-bottom:6px; }
.step-note{
  margin-top:12px; font-family:var(--mono); font-size:.78rem; color:var(--text-dim);
  background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:10px 14px;
  display:inline-block;
}

/* sources */
.sources{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:780px){ .sources{ grid-template-columns:1fr; } }
.source-card{ border-radius:12px; padding:20px; border:1px solid var(--line); background:var(--surface); position:relative; overflow:hidden; }
.source-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; }
.source-card.deimos::before{ background:var(--deimos); }
.source-card.phobos::before{ background:var(--phobos); }
.source-card.web::before{ background:var(--good); }
.source-card .tag{ font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; display:inline-block; }
.source-card.deimos .tag{ color:var(--deimos); }
.source-card.phobos .tag{ color:var(--phobos); }
.source-card.web .tag{ color:var(--good); }
.source-card h4{ font-family:var(--disp); margin:0 0 8px; font-size:1.05rem; }
.source-card p{ margin:0 0 10px; color:var(--text-dim); font-size:.92rem; }
.source-card ul{ margin:0; padding-left:16px; color:var(--text-dim); font-size:.9rem; }
.source-card li{ margin-bottom:4px; }
.source-card code{ font-family:var(--mono); background:var(--surface-2); padding:1px 6px; border-radius:5px; font-size:.85em; color:var(--text); }

/* breakthrough contrast */
.contrast{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:14px; overflow:hidden; border:1px solid var(--line); }
@media (max-width:700px){ .contrast{ grid-template-columns:1fr; } }
.cblock{ padding:26px; }
.cblock.dark{ background:#111219; }
.cblock.rust{ background:linear-gradient(160deg, var(--surface), var(--surface-2)); }
.cblock .tag{ font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; display:block; }
.cblock.dark .tag{ color:#6f7280; }
.cblock.rust .tag{ color:var(--rust-bright); }
.cblock ul{ margin:0; padding-left:18px; color:var(--text-dim); font-size:.93rem; }
.cblock.dark ul{ color:#8a8c99; }
.cblock li{ margin-bottom:8px; }
.pull-quote{
  margin-top:24px; text-align:center; font-family:var(--disp); font-style:italic;
  font-weight:600; font-size:1.05rem; color:var(--rust-bright); max-width:64ch; margin-left:auto; margin-right:auto;
}

/* knowledge-transfer scenario cards */
.kt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:24px; }
@media (max-width:820px){ .kt-grid{ grid-template-columns:1fr; } }
.kt-card{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:20px; }
.kt-card .kt-eyebrow{ font-family:var(--mono); font-size:.68rem; color:var(--phantom); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; display:block; }
.kt-card h4{ font-family:var(--disp); margin:0 0 8px; font-size:1rem; }
.kt-card p{ margin:0; color:var(--text-dim); font-size:.9rem; }

/* trust / privacy strip */
.trust-strip{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:space-between;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px 26px;
}
.trust-strip .trust-copy{ display:flex; align-items:center; gap:12px; }
.trust-strip .trust-icon{
  width:34px; height:34px; border-radius:9px; background:var(--surface-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--good);
}
.trust-strip p{ margin:0; color:var(--text-dim); font-size:.92rem; }
.trust-strip strong{ color:var(--text); }

/* security page — principle cards + spec list */
.principle-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (max-width:700px){ .principle-grid{ grid-template-columns:1fr; } }
.principle-card{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:22px; }
.principle-card .num{ font-family:var(--mono); font-size:.72rem; color:var(--good); }
.principle-card h3{ font-size:1.05rem; margin:8px 0 8px; }
.principle-card p{ margin:0; color:var(--text-dim); font-size:.92rem; }

.spec-table{ width:100%; border-collapse:collapse; font-size:.9rem; }
.spec-table th, .spec-table td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); }
.spec-table th{ font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); font-weight:500; }
.spec-table td{ color:var(--text-dim); }
.spec-table td:first-child{ color:var(--text); font-family:var(--mono); font-size:.84rem; }
.spec-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
.spec-table-wrap .spec-table{ min-width:520px; }

.badge{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.7rem;
  padding:4px 10px; border-radius:100px; border:1px solid var(--line); color:var(--text-dim);
}
.badge.good{ color:var(--good); border-color:#2f4a35; background:#152018; }
.badge.warn{ color:var(--warn); border-color:#4a3f22; background:#201b10; }

/* pricing */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:820px){ .pricing-grid{ grid-template-columns:1fr; } }
.price-card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:26px;
  display:flex; flex-direction:column; gap:14px;
}
.price-card.highlight{ border-color:var(--rust); box-shadow: 0 0 0 1px var(--rust) inset; position:relative; }
.price-card .ribbon{
  position:absolute; top:-11px; left:26px; background:var(--rust); color:#fff;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:100px;
}
.price-card .tier{ font-family:var(--mono); font-size:.72rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.08em; }
.price-card .amount{ font-family:var(--disp); font-size:2rem; font-weight:700; }
.price-card .amount span{ font-family:var(--body); font-size:.9rem; font-weight:400; color:var(--text-dim); }
.price-card .tagline{ margin:0; color:var(--text-dim); font-size:.88rem; }
.price-card ul{ margin:0; padding-left:18px; color:var(--text-dim); font-size:.9rem; flex-grow:1; }
.price-card li{ margin-bottom:7px; }
.price-note{ margin-top:14px; font-size:.8rem; color:var(--text-dim); font-family:var(--mono); }

/* team */
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:780px){ .team-grid{ grid-template-columns:1fr; } }
.team-card{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:22px; }
.team-avatar{
  width:44px; height:44px; border-radius:10px; background:var(--surface-2);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  font-family:var(--disp); font-weight:700; color:var(--rust-bright); margin-bottom:14px;
}
.team-card h4{ font-family:var(--disp); font-size:1.02rem; margin:0 0 3px; }
.team-card .role{ font-family:var(--mono); font-size:.72rem; color:var(--rust-bright); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; }
.team-card p{ margin:0; color:var(--text-dim); font-size:.88rem; }

/* values grid (about page) */
.values-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:920px){ .values-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .values-grid{ grid-template-columns:1fr; } }
.value-card{ padding:18px 0; border-top:1px solid var(--line); }
.value-card .glyph-mini{ width:8px; height:8px; border-radius:50%; background:var(--rust-bright); margin-bottom:12px; }
.value-card h4{ font-family:var(--disp); font-size:.98rem; margin:0 0 6px; }
.value-card p{ margin:0; color:var(--text-dim); font-size:.88rem; }

/* story / narrative blocks (about page) */
.story{ max-width:70ch; }
.story p{ color:var(--text-dim); margin-bottom:18px; }
.story p b{ color:var(--text); }
.name-etymology{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:28px;
}
@media (max-width:780px){ .name-etymology{ grid-template-columns:1fr; } }
.etym-card{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px; }
.etym-card .word{ font-family:var(--disp); font-weight:700; font-size:1.05rem; }
.etym-card .word.deimos{ color:var(--deimos); }
.etym-card .word.phobos{ color:var(--phobos); }
.etym-card .word.phantom{ color:var(--phantom); }
.etym-card p{ margin:8px 0 0; color:var(--text-dim); font-size:.86rem; }

/* FAQ accordion — native <details>/<summary>, no JS required, keyboard-
   operable and screen-reader friendly by construction */
.faq-cat{ margin-bottom:8px; }
.faq-cat-title{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--rust-bright); margin:36px 0 14px;
}
.faq-cat-title:first-child{ margin-top:0; }
.faq-item{
  border:1px solid var(--line); border-radius:10px; background:var(--surface);
  margin-bottom:10px; overflow:hidden;
}
.faq-item summary{
  cursor:pointer; list-style:none; padding:16px 46px 16px 18px; position:relative;
  font-family:var(--disp); font-weight:600; font-size:.96rem; color:var(--text);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:1.1rem; color:var(--text-dim); transition:transform .15s ease;
}
.faq-item[open] summary::after{ content:"–"; color:var(--rust-bright); }
.faq-item .faq-a{ padding:0 18px 18px; color:var(--text-dim); font-size:.92rem; max-width:70ch; }
.faq-item .faq-a p{ margin:0 0 10px; }
.faq-item .faq-a p:last-child{ margin-bottom:0; }
.faq-item summary:focus-visible{ outline:2px solid var(--rust-bright); outline-offset:-2px; }

/* waitlist */
.waitlist-box{
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border:1px solid var(--line); border-radius:16px; padding:40px;
  text-align:center;
}
.waitlist-box h2, .waitlist-box h1{ margin-top:0; }
.waitlist-box p.sub{ color:var(--text-dim); margin-bottom:26px; }
form.wl-form{ display:flex; gap:10px; max-width:460px; margin:0 auto; flex-wrap:wrap; justify-content:center; }
form.wl-form.with-role{ max-width:560px; }
form.wl-form input[type=email], form.wl-form select{
  flex:1; min-width:220px; background:var(--bg); border:1px solid var(--line);
  color:var(--text); padding:13px 16px; border-radius:8px; font-family:var(--body); font-size:.95rem;
}
form.wl-form select{ font-family:var(--mono); font-size:.85rem; flex:0 0 auto; min-width:170px; }
form.wl-form input[type=email]:focus, form.wl-form select:focus{ outline:2px solid var(--rust-bright); outline-offset:1px; }
form.wl-form button{
  font-family:var(--disp); font-weight:600; background:var(--rust); color:#fff;
  border:none; padding:13px 22px; border-radius:8px; cursor:pointer; font-size:.94rem;
}
form.wl-form button:hover{ background:var(--rust-bright); }
form.wl-form button:disabled{ background:var(--surface-2); color:var(--text-dim); cursor:not-allowed; }
.wl-status{ margin-top:14px; font-family:var(--mono); font-size:.8rem; color:var(--good); min-height:1.2em; }
.wl-status.err{ color:var(--bad); }
.wl-privacy-note{ margin-top:18px; font-size:.78rem; color:var(--text-dim); }
.wl-privacy-note a{ color:var(--text-dim); text-decoration-color:var(--line); }

.wl-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:44px; }
@media (max-width:780px){ .wl-steps{ grid-template-columns:1fr; } }
.wl-step{ text-align:left; }
.wl-step .n{ font-family:var(--mono); color:var(--rust-bright); font-size:.78rem; margin-bottom:6px; display:block; }
.wl-step h4{ font-family:var(--disp); margin:0 0 6px; font-size:.98rem; }
.wl-step p{ margin:0; color:var(--text-dim); font-size:.88rem; }

/* CTA band — reusable bottom-of-page conversion nudge */
.cta-band{
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border:1px solid var(--line); border-radius:16px; padding:36px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cta-band h3{ margin:0 0 6px; font-size:1.3rem; }
.cta-band p{ margin:0; color:var(--text-dim); }
.cta-band .cta-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* 404 */
.error-page{ padding:100px 0 120px; text-align:center; }
.error-orbit{ width:180px; margin:0 auto 30px; opacity:.8; }
.error-page .code{ font-family:var(--mono); color:var(--text-dim); letter-spacing:.1em; margin-bottom:10px; }
.error-page h1{ font-size:clamp(1.8rem,4vw,2.6rem); }
.error-page .lede{ margin-left:auto; margin-right:auto; }

/* footer */
footer{ padding:50px 0 40px; border-top:1px solid var(--line); }
.foot-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-bottom:26px; }
.foot-brand .company{ font-family:var(--mono); font-size:.7rem; color:var(--text-dim); letter-spacing:.06em; text-transform:uppercase; }
.foot-brand .product{ font-family:var(--disp); font-weight:700; font-size:1.1rem; margin-top:4px; }
.foot-brand .tagline{ color:var(--text-dim); font-size:.84rem; margin-top:10px; max-width:32ch; }
.foot-links{ display:flex; gap:34px; flex-wrap:wrap; }
.foot-col{ font-family:var(--mono); font-size:.78rem; }
.foot-col .h{ color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; font-size:.68rem; margin-bottom:10px; }
.foot-col a{ display:block; color:var(--text); text-decoration:none; margin-bottom:7px; opacity:.85; }
.foot-col a:hover{ opacity:1; }
.foot-fine{ font-family:var(--mono); font-size:.72rem; color:var(--text-dim); opacity:.7; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }

:focus-visible{ outline:2px solid var(--rust-bright); outline-offset:2px; }

@media (max-width:600px){
  .pricing-grid, .team-grid, .sources, .principle-grid, .kt-grid, .name-etymology{ gap:12px; }
  section{ padding:48px 0; }
  .cta-band{ padding:28px 24px; }
}


.topbar nav.toplinks a,
.topbar .nav-cta{
  font-size: 1rem;      /* was 0.76rem / 0.74rem */
}
.topbar .brandmark .product{
  font-size: 1.2rem;    /* was ~1rem */
}
.topbar .brandmark .company{
  font-size: 0.75rem;   /* was 0.62rem */
}
.hero-meta{ font-weight: 600; font-size: 0.82rem; }
.sec-num {font-weight: 700; font-size: 0.85rem; } /* was 0.72rem */
.breadcrumb{ font-size: 0.85rem; }