/* ============================================================================
   Cirvgreen — S2 Modern Söhne Swiss Design System
   Single shared stylesheet. Referenced by every page in 09-live-mockup/.
   ============================================================================ */

@import url('https://fonts.bunny.net/css?family=inter-tight:300,400,500,600,700');

/* ---- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { line-height: 1.5; }
img, picture, svg { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; color: inherit; background: transparent; border: 0; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ---- Tokens -------------------------------------------------------------- */
:root {
  /* Color — Light (primary) */
  --bg: #FAFAF7;            /* bone canvas */
  --bg-soft: #F4F2EC;       /* slightly recessed surface */
  --ink: #1A1714;           /* near-black body */
  --ink-strong: #0A0A08;    /* hero / display */
  --ink-muted: #6B665E;     /* metadata, captions */
  --ink-faint: #6E6A60;     /* tertiary — WCAG AA 4.5:1 on bone + soft (small labels) */
  --rule: #DDD8CE;          /* hairline divider */
  --rule-strong: #C9C2B5;
  --accent: #B04E0E;        /* cirv-orange (deep) — WCAG AA 4.5:1 as text on bone; surgical use */
  --accent-soft: rgba(176, 78, 14, 0.12);
  --grid: rgba(10, 10, 8, 0.03);

  /* Type scale — Swiss big-type: extreme jump from micro labels to display */
  --font: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-mega:    clamp(2.75rem, 7.5vw, 6.5rem);  /* product page H1 only */
  --t-hero:    clamp(2.5rem, 6vw, 5rem);       /* index hero */
  --t-h2:      clamp(1.625rem, 3.2vw, 2.75rem);/* section headlines */
  --t-h3:      1.25rem;
  --t-body:    0.9375rem;                       /* 15px — readable Swiss body */
  --t-small:   0.8125rem;                      /* 13px */
  --t-micro:   0.6875rem;                      /* 11px uppercase metadata */
  --lh-tight:  1.04;                            /* tighter at display scale */
  --lh-snug:   1.25;
  --lh-body:   1.6;

  /* Spacing */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Layout */
  --side-margin: 15vw;
  --max-content: 1280px;

  /* Motion — refined editorial easing, not Material defaults */
  --d-fast: 120ms;
  --d-base: 260ms;
  --d-slow: 600ms;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);   /* ease-out, entering */
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0); /* exiting */
}

/* ---- Invisible polish: selection + focus ------------------------------- */
::selection { background: var(--accent-soft); color: var(--ink-strong); }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 1px;
}

/* Dark palette. Shared by OS-auto (unless the user has manually forced light)
   and by the manual Dark toggle. Keep both selector groups in sync. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F0E0C;
    --bg-soft: #16140F;
    --ink: #E6E3DB;
    --ink-strong: #F4F2EC;
    --ink-muted: #9A9384;
    --ink-faint: #8E8779;
    --rule: #2A2722;
    --rule-strong: #3A3530;
    --accent: #F59B5A;
    --accent-soft: rgba(245, 155, 90, 0.14);
    --grid: rgba(244, 242, 236, 0.03);
  }
}
:root[data-theme="dark"] {
  --bg: #0F0E0C;
  --bg-soft: #16140F;
  --ink: #E6E3DB;
  --ink-strong: #F4F2EC;
  --ink-muted: #8B8478;
  --ink-faint: #8E8779;
  --rule: #2A2722;
  --rule-strong: #3A3530;
  --accent: #F59B5A;
  --accent-soft: rgba(245, 155, 90, 0.14);
  --grid: rgba(244, 242, 236, 0.03);
}

/* ---- Base ---------------------------------------------------------------- */
html {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 300;
  font-feature-settings: 'cv11', 'ss01';
}

body {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  min-height: 100vh;
  background:
    repeating-linear-gradient(to right,
      transparent 0,
      transparent calc((100vw - var(--side-margin) * 2) / 12 - 1px),
      var(--grid) calc((100vw - var(--side-margin) * 2) / 12 - 1px),
      var(--grid) calc((100vw - var(--side-margin) * 2) / 12)
    );
  background-position: var(--side-margin) 0;
  background-size: calc(100vw - var(--side-margin) * 2) 100vh;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Skip link */
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 100;
  display: inline-block;
  padding: var(--s-3) var(--s-4);
  background: var(--ink-strong);
  color: var(--bg);
  text-decoration: underline;
}

/* ---- Layout primitives -------------------------------------------------- */
.container {
  padding-left: var(--side-margin);
  padding-right: var(--side-margin);
  max-width: 100vw;
}

.container-wide {
  padding-left: 5vw;
  padding-right: 5vw;
  max-width: var(--max-content);
  margin-inline: auto;
}

.divider {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}

.divider-thick {
  border-top: 1px solid var(--rule-strong);
}

/* ---- Typography utilities ----------------------------------------------- */
.kicker {
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Signature: accent index-rule before every kicker — Swiss section entry mark */
.kicker::before {
  content: '';
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  margin-right: 0.7rem;
  background: var(--accent);
  vertical-align: middle;
  transform: translateY(-1px);
}

.lead {
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: var(--lh-snug);
  max-width: 52ch;
  color: var(--ink);
  text-wrap: pretty;
}

.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.strong { font-weight: 600; color: var(--ink-strong); }
.accent { color: var(--accent); }

em.accent {
  font-style: normal;
  color: var(--accent);
}

h1, h2, h3 {
  font-weight: 600;
  color: var(--ink-strong);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.01em; }

p { max-width: 60ch; }

/* ---- Navigation --------------------------------------------------------- */
.nav {
  padding: var(--s-5) var(--side-margin);
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}

.nav-brand {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink-strong);
  letter-spacing: -0.005em;
}

.nav-brand .dot {
  color: var(--accent);
}

.nav-links {
  display: flex;
  gap: var(--s-6);
}

.nav-links a {
  font-size: var(--t-small);
  color: var(--ink-muted);
  position: relative;
  padding-bottom: 2px;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--ink-strong);
}

.nav-links a[aria-current="page"]::after {
  content: '';
  position: absolute;
  inset: auto 0 -3px 0;
  height: 1px;
  background: var(--accent);
}

/* ---- Hero --------------------------------------------------------------- */
.hero {
  padding: var(--s-10) var(--side-margin) var(--s-9);
  border-bottom: 1px solid var(--rule);
}

.hero-kicker {
  display: block;
  margin-bottom: var(--s-5);
}

.hero h1 {
  max-width: 22ch;
  margin-bottom: var(--s-5);
}

.hero .lead {
  margin-bottom: var(--s-6);
}

.hero-meta {
  margin-top: var(--s-7);
  display: flex;
  gap: var(--s-6);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}

/* ---- Hero machine-view anchor (homepage) ------------------------------- */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 440px);
  gap: var(--s-8);
  align-items: start;
  margin-top: var(--s-2);
}
.hero-lead-col .lead { margin-bottom: 0; max-width: 50ch; }
.hero-panel { width: 100%; }

.machine-view {
  border: 1px solid var(--rule);
  background: var(--bg-soft);
  font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', monospace;
}
.mv-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}
.mv-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: brand-pulse 4s ease-in-out infinite;
  flex-shrink: 0;
}
.mv-body {
  margin: 0;
  padding: var(--s-4);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--ink-muted);
  white-space: pre-wrap;
  overflow-x: auto;
}
.mv-body .v { color: var(--accent); }
.mv-body .ok { color: var(--ink-strong); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .mv-dot { animation: none; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero-lead-col .lead { margin-bottom: var(--s-6); }
}

/* ---- By-the-numbers band (signature scroll moment) --------------------- */
.numbers-band { padding-top: var(--s-8); padding-bottom: var(--s-8); }
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.stat {
  padding: var(--s-6) var(--s-5);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.stat-num {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: var(--t-small);
  color: var(--ink-muted);
  max-width: 24ch;
}
@media (max-width: 760px) {
  .numbers-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .numbers-grid { grid-template-columns: 1fr; }
}

/* ---- Buttons / Links --------------------------------------------------- */
.cta {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink-strong);
  position: relative;
  padding-bottom: 3px;
  transition: color var(--d-base) var(--ease);
}

.cta::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0.3);
  transition: transform var(--d-base) var(--ease);
}

.cta:hover::after,
.cta:focus-visible::after { transform: scaleX(1); }
.cta:hover { color: var(--accent); }

.cta-arrow::after { background: var(--ink-strong); }
.cta-arrow:hover::after { background: var(--accent); }

.link {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: border-color var(--d-base) var(--ease);
}
.link:hover, .link:focus-visible { border-color: var(--accent); color: var(--accent); }

/* ---- Section ------------------------------------------------------------ */
.section {
  padding: var(--s-9) var(--side-margin);
  border-bottom: 1px solid var(--rule);
}

.section-head {
  margin-bottom: var(--s-7);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--s-6);
  align-items: baseline;
}

.section-head .lead {
  max-width: 48ch;
}

@media (max-width: 768px) {
  .section-head { grid-template-columns: 1fr; gap: var(--s-3); }
}

/* ---- Product list (S2 hover-shift rows) -------------------------------- */
.product-list {
  display: grid;
  grid-template-columns: 1fr;
}

.product-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 3fr auto;
  gap: var(--s-6);
  align-items: baseline;
  padding: var(--s-5) 0;
  border-top: 1px solid var(--rule);
  transition: transform var(--d-base) var(--ease);
}

.product-row:last-child { border-bottom: 1px solid var(--rule); }
.product-row:hover { transform: translateX(-4px); }

.product-name {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink-strong);
  letter-spacing: -0.01em;
}

.product-desc {
  font-size: var(--t-small);
  color: var(--ink-muted);
  max-width: 56ch;
  font-weight: 300;
}

.product-go {
  font-size: var(--t-small);
  color: var(--ink-strong);
  white-space: nowrap;
}

.product-row:hover .product-go { color: var(--accent); }

.product-tag {
  display: inline-block;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-right: var(--s-3);
}

@media (max-width: 720px) {
  .product-row {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
  .product-row:hover { transform: none; }
}

/* ---- JSON-LD preview (AI-moat element) ---------------------------------- */
.ai-readable {
  margin-top: var(--s-7);
  /* extra top padding seats the caption label fully inside the box, so it is
     never clipped by the scroll container that overflow-x creates. */
  padding: calc(var(--s-5) + var(--s-4)) var(--s-5) var(--s-5);
  border: 1px solid var(--rule);
  background: var(--bg-soft);
  font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-muted);
  overflow-x: auto;
  position: relative;
}

.ai-readable::before {
  content: 'ai-readable.json — what an LLM sees';
  position: absolute;
  top: var(--s-4);            /* inside the top padding band — clip-proof */
  left: var(--s-5);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  font-family: var(--font);
}

.ai-readable .k { color: var(--ink-strong); font-weight: 500; }
.ai-readable .v { color: var(--accent); }

/* ---- Pricing card ------------------------------------------------------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.price-card {
  padding: var(--s-6) var(--s-5);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  background: var(--bg);
  transition: background var(--d-base) var(--ease);
}

.price-card:hover { background: var(--bg-soft); }

.price-card.featured {
  background: var(--bg-soft);
  position: relative;
}

.price-card.featured::before {
  content: 'Most popular';
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.price-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink-strong);
}

.price-amount {
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--ink-strong);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.price-amount sup {
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink-muted);
  vertical-align: top;
  margin-left: 2px;
}

.price-amount sub {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--ink-muted);
  vertical-align: baseline;
  margin-left: var(--s-2);
}

.price-features {
  margin: var(--s-3) 0;
  font-size: var(--t-small);
  color: var(--ink);
}

.price-features li {
  padding: var(--s-2) 0;
  border-top: 1px dashed var(--rule);
  display: flex;
  gap: var(--s-3);
}

.price-features li::before {
  content: '+';
  color: var(--accent);
  flex-shrink: 0;
}

.price-features li:first-child { border-top: 0; }

.price-cta {
  display: inline-block;
  margin-top: auto;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--ink-strong);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink-strong);
  text-align: center;
  transition: background var(--d-base) var(--ease), color var(--d-base) var(--ease);
}

.price-cta:hover {
  background: var(--ink-strong);
  color: var(--bg);
}

.price-card.featured .price-cta {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.price-card.featured .price-cta:hover {
  background: transparent;
  color: var(--accent);
}

/* ---- Article cards (blog) ---------------------------------------------- */
.article-list {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--rule);
}

.article-row {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: var(--s-6);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  transition: transform var(--d-base) var(--ease);
}

.article-row:hover { transform: translateX(-4px); }

.article-meta {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}

.article-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink-strong);
  line-height: 1.25;
  max-width: 36ch;
}

.article-dek {
  font-size: var(--t-small);
  color: var(--ink-muted);
  margin-top: var(--s-2);
  font-weight: 300;
  max-width: 52ch;
}

.article-read {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .article-row { grid-template-columns: 1fr; gap: var(--s-2); }
  .article-row:hover { transform: none; }
}

/* ---- Form (contact / signup) ------------------------------------------- */
.form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  max-width: 480px;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.form-row label {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}

.form-row input,
.form-row textarea {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1rem; /* 16px — prevents iOS focus auto-zoom */
  color: var(--ink-strong);
  transition: border-color var(--d-base) var(--ease);
}

.form-row input:focus,
.form-row textarea:focus {
  outline: 0;
  border-color: var(--accent);
}

.form-row textarea {
  resize: vertical;
  min-height: 100px;
}

.form-submit {
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--ink-strong);
  background: var(--ink-strong);
  color: var(--bg);
  font-size: var(--t-small);
  font-weight: 500;
  cursor: pointer;
  align-self: start;
  transition: background var(--d-base) var(--ease), color var(--d-base) var(--ease);
}

.form-submit:hover {
  background: var(--accent);
  border-color: var(--accent);
}

/* ---- Product detail page ----------------------------------------------- */
.product-hero {
  padding: var(--s-9) var(--side-margin) var(--s-8);
  border-bottom: 1px solid var(--rule);
}

.product-hero h1 {
  font-size: var(--t-mega);
  max-width: 18ch;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-6);
  margin-top: var(--s-6);
}

.feature {
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-strong);
}

.feature-num {
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.feature h3 {
  margin-top: var(--s-2);
  font-size: 1rem;
  font-weight: 600;
}

.feature p {
  margin-top: var(--s-2);
  font-size: var(--t-small);
  color: var(--ink-muted);
}

/* ---- Comparison table -------------------------------------------------- */
.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
}

.compare th,
.compare td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.compare th {
  font-weight: 600;
  color: var(--ink-strong);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.compare td.cirv { background: var(--accent-soft); color: var(--ink-strong); font-weight: 500; }
.compare td.yes { color: var(--ink-strong); }
.compare td.no  { color: var(--ink-faint); }

/* ---- Footer ------------------------------------------------------------- */
.footer {
  padding: var(--s-8) var(--side-margin) var(--s-6);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--s-6);
  font-size: var(--t-small);
  color: var(--ink-muted);
  background: var(--bg);
}

.footer h4 {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--s-3);
}

.footer ul li { padding: 2px 0; }

.footer a:hover { color: var(--accent); }

.footer-base {
  grid-column: 1 / -1;
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-top: var(--s-4);
}

@media (max-width: 720px) {
  .footer { grid-template-columns: 1fr 1fr; }
  .footer-base { flex-direction: column; gap: var(--s-3); }
}

/* ---- Mobile breakpoints ------------------------------------------------ */
@media (max-width: 960px) {
  :root { --side-margin: 6vw; }
}

@media (max-width: 640px) {
  :root { --side-margin: 5vw; }

  /* Nav: horizontal scroll, brand stays put, theme toggle icon-only */
  .nav {
    padding: var(--s-3) var(--s-4);
    gap: var(--s-3);
    align-items: center;
  }
  .nav-brand {
    white-space: nowrap;
    flex-shrink: 0;
  }
  .nav-links {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    gap: var(--s-4);
    min-width: 0;
    flex: 1;
    padding-bottom: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a {
    white-space: nowrap;
    font-size: var(--t-small);
  }
  .theme-toggle {
    flex-shrink: 0;
    padding: 6px 8px;
    margin-left: 0;
  }
  .theme-toggle .label { display: none; }

  /* Audience cards: compact 2-col on mobile */
  .audience-cards { grid-template-columns: repeat(2, 1fr) !important; }
  .audience-card {
    min-height: 100px;
    padding: var(--s-3) var(--s-4);
    gap: var(--s-2);
  }
  .audience-kicker { font-size: 10px; }
  .audience-line { font-size: 0.8125rem; line-height: 1.3; }
  .audience-arrow { font-size: var(--t-micro); }

  /* Pricing grid: tighter minmax so 1-col stacks cleanly */
  .pricing-grid { grid-template-columns: 1fr !important; }

  /* AI-readable code blocks scroll horizontally */
  .ai-readable {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.6875rem;
    padding: var(--s-4) var(--s-3);
  }

  /* CLI table scrolls if needed */
  .cli-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .cli-table thead, .cli-table tbody { display: table; width: 100%; }

  /* Hero + section padding */
  .hero { padding-block: var(--s-7) var(--s-7); }
  .section { padding-block: var(--s-7); }
}

/* ---- Comparison-table mobile scroll wrapper -------------------------- */
.compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  margin: 0 calc(-1 * var(--s-3));
  padding: 0 var(--s-3);
  /* Subtle hint that it's scrollable on small viewports */
  background:
    linear-gradient(90deg, var(--bg) 0%, transparent 5%, transparent 95%, var(--bg) 100%);
}
@media (max-width: 720px) {
  .compare {
    font-size: 11px;
    min-width: 540px;
  }
  .compare th, .compare td {
    padding: var(--s-2) var(--s-3);
  }
  .compare th[scope="row"] {
    position: sticky;
    left: 0;
    background: var(--bg);
    z-index: 1;
    box-shadow: 2px 0 0 var(--rule);
    min-width: 110px;
  }
}

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

/* ============================================================================
   MOTION LAYER + POLISH (additive — preserve all base classes above)
   Philosophy: every animation ≤300ms, quartic ease-out, reduced-motion kills.
   ============================================================================ */

/* ---- Motion tokens ----------------------------------------------------- */
:root {
  --ease-quart:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-stage:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --d-reveal:    280ms;
  --d-stagger:   40ms;
  --d-counter:   1200ms;
}

/* ---- Global type rendering polish -------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: 'cv11', 'ss01', 'kern';
  font-optical-sizing: auto;
}

/* Selection */
::selection { background: var(--accent-soft); color: var(--ink-strong); }

/* Tabular numerals where it matters */
.price-amount, .compare, .article-meta, .article-read, .hero-meta,
.feature-num, .ai-readable, .footer-base {
  font-variant-numeric: tabular-nums;
}

/* Smooth transitions for theme switch — body excluded to avoid full-page repaint jank */
.nav, .footer, .price-card, .ai-readable, .form-row input, .form-row textarea {
  transition: background-color 280ms var(--ease-soft), color 220ms var(--ease-soft), border-color 220ms var(--ease-soft);
}

/* Scroll-margin for section anchors (so sticky nav doesn't cover them) */
section[id], [id] { scroll-margin-top: 88px; }

/* ---- Hero: word-by-word stagger ---------------------------------------- */
.hero h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  filter: blur(4px);
  animation: word-in 600ms var(--ease-quart) both;
  animation-delay: calc(var(--i, 0) * var(--d-stagger));
}

@keyframes word-in {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.hero .lead, .hero .hero-meta, .hero .ai-readable, .hero p .cta {
  opacity: 0;
  animation: fade-up 600ms var(--ease-quart) both;
}
.hero .lead       { animation-delay: 380ms; }
.hero p .cta      { animation-delay: 480ms; }
.hero .ai-readable{ animation-delay: 580ms; }
.hero .hero-meta  { animation-delay: 680ms; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Reveal-on-scroll (IO-only, fail-safe default visible) ------------ */
/* Default: visible. Crawlers, screenshots, no-JS, print all see content. */
[data-reveal] { opacity: 1; transform: none; }

/* Opt-in to hide only when app.js confirms it can reveal */
.js-reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--d-reveal) var(--ease-quart),
              transform var(--d-reveal) var(--ease-quart);
  will-change: opacity, transform;
}

.js-reveal-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
[data-reveal-stagger] > * { opacity: 1; transform: none; }
.js-reveal-ready [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--d-reveal) var(--ease-quart),
              transform var(--d-reveal) var(--ease-quart);
}
.js-reveal-ready [data-reveal-stagger].is-revealed > * {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--i, 0) * 60ms);
}

/* ---- Hairline divider — IO-only ---------------------------------------- */
.divider-grow {
  border: 0;
  border-top: 1px solid var(--rule);
  transform: none;
  transform-origin: left;
}
.js-reveal-ready .divider-grow {
  transform: scaleX(0);
  transition: transform 600ms var(--ease-quart);
}
.js-reveal-ready .divider-grow.is-revealed { transform: scaleX(1); }

/* ---- AI-readable JSON block: ambient hover only (no scroll-reveal) ---- */
.ai-readable {
  position: relative;
  transition: border-color 280ms var(--ease-soft), box-shadow 280ms var(--ease-soft);
}

.ai-readable:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* ---- Brand dot ambient pulse ------------------------------------------- */
.nav-brand .dot {
  display: inline-block;
  animation: brand-pulse 4s ease-in-out infinite;
}
@keyframes brand-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* ---- Accent word — gentle hue oscillation ------------------------------ */
.hero h1 em.accent {
  animation: hue-drift 8s ease-in-out infinite;
}
@keyframes hue-drift {
  0%, 100% { color: var(--accent); }
  50%      { color: color-mix(in oklch, var(--accent) 88%, #FF4500); }
}

/* ---- Product row — arrow slides on hover ------------------------------- */
.product-row { transition: transform 280ms var(--ease-soft); }
.product-go { transition: transform 280ms var(--ease-quart), color 220ms var(--ease-soft); display:inline-block; }
.product-row:hover .product-go { transform: translateX(6px); }

/* CTA arrow slide */
.cta { transition: color 220ms var(--ease-soft); }
.cta:hover { transform: none; }
.cta::after { transition: transform 320ms var(--ease-quart); }

/* ---- Article row arrow ------------------------------------------------- */
.article-row { transition: transform 280ms var(--ease-soft); }
.article-read { transition: transform 280ms var(--ease-quart); display: inline-block; }
.article-row:hover .article-read { transform: translateX(4px); color: var(--accent); }

/* ---- Form polish ------------------------------------------------------- */
.form-row input,
.form-row textarea {
  padding: var(--s-3) 0;
}
.form-row input:focus,
.form-row textarea:focus { border-bottom-width: 1px; border-color: var(--accent); }

.form-row input:not(:placeholder-shown):invalid,
.form-row textarea:not(:placeholder-shown):invalid {
  border-color: #C44E2D;
}
.form-row input:not(:placeholder-shown):valid,
.form-row textarea:not(:placeholder-shown):valid {
  border-color: var(--ink-muted);
}

.form-submit {
  transition: background var(--d-base) var(--ease-soft),
              color var(--d-base) var(--ease-soft),
              transform 200ms var(--ease-quart);
}
.form-submit:hover { transform: translateY(-1px); }
.form-submit:active { transform: translateY(0); }

/* ---- Dark-mode toggle button ------------------------------------------ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: color 220ms var(--ease-soft), border-color 220ms var(--ease-soft);
  margin-left: var(--s-4);
}

.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.theme-toggle .icon {
  width: 12px; height: 12px;
  display: inline-block;
  position: relative;
}

.theme-toggle .icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  transition: clip-path 300ms var(--ease-quart);
  clip-path: circle(50% at 50% 50%);
}

[data-theme="dark"] .theme-toggle .icon::before {
  clip-path: circle(45% at 35% 50%);
}

/* ---- View Transitions API --------------------------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: var(--ease-quart);
}

::view-transition-old(root) { animation-name: vt-fade-out; }
::view-transition-new(root) { animation-name: vt-fade-in; }

@keyframes vt-fade-out {
  to { opacity: 0; }
}
@keyframes vt-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Persist the brand mark across navigations */
.nav-brand { view-transition-name: nav-brand; }

/* ---- Counter (about.html numbers) ------------------------------------- */
.feature .feature-num.counter {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 4ch;
}

/* ---- Print stylesheet -------------------------------------------------- */
@media print {
  :root { --bg: #fff; --ink: #000; --rule: #ccc; }
  body { background: #fff !important; color: #000 !important; }
  .nav, .footer, .theme-toggle, .hero .ai-readable, .ai-readable { display: none; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #555;
  }
  .hero h1, h2, h3 { page-break-after: avoid; }
  section, article { page-break-inside: avoid; }
}

/* ============================================================================
   AUDIENCE CARDS (homepage fast-lane row, above the technical hero)
   ============================================================================ */
.audience-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 0;
}

.audience-card {
  padding: var(--s-5) var(--s-4);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--ink);
  border-right: 1px solid var(--rule);
  transition: background var(--d-base) var(--ease-soft);
  min-height: 140px;
}
.audience-card:last-child { border-right: 0; }
.audience-card:hover { background: var(--bg-soft); }

.audience-kicker {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  font-weight: 500;
}

.audience-line {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-strong);
  line-height: 1.35;
  letter-spacing: -0.005em;
}

.audience-arrow {
  margin-top: auto;
  font-size: var(--t-small);
  color: var(--accent);
  transition: transform var(--d-base) var(--ease-quart);
  font-variant-numeric: tabular-nums;
}
.audience-card:hover .audience-arrow { transform: translateX(4px); }

@media (max-width: 960px) {
  .audience-cards { grid-template-columns: repeat(2, 1fr); }
  .audience-card:nth-child(2) { border-right: 0; }
  .audience-card:nth-child(1),
  .audience-card:nth-child(2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 480px) {
  .audience-cards { grid-template-columns: 1fr; }
  .audience-card { border-right: 0; border-bottom: 1px solid var(--rule); }
  .audience-card:last-child { border-bottom: 0; }
}

/* ============================================================================
   AI-CITABLE BADGE — the visible moat element. Goes on every page that
   ships CitableSource + AIReadable JSON-LD (which is every public page).
   ============================================================================ */
.ai-citable-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  padding: 6px 10px 6px 8px;
  border: 1px solid var(--rule);
  background: var(--bg-soft);
  text-decoration: none;
  transition: border-color var(--d-base) var(--ease-soft),
              color var(--d-base) var(--ease-soft),
              background var(--d-base) var(--ease-soft);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.ai-citable-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: brand-pulse 4s ease-in-out infinite;
  flex-shrink: 0;
}

.ai-citable-badge:hover,
.ai-citable-badge:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg);
}

/* ============================================================================
   PROMISE LIST — "What we won't do" pattern (why-cirvgreen page)
   ============================================================================ */
.promise-list {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.promise-row {
  display: grid;
  grid-template-columns: 60px 1fr 2fr;
  gap: var(--s-5);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.promise-num {
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}
.promise-claim {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink-strong);
  line-height: 1.3;
  max-width: 32ch;
}
.promise-proof {
  font-size: var(--t-small);
  color: var(--ink-muted);
  font-weight: 300;
  max-width: 56ch;
  line-height: 1.55;
}
@media (max-width: 720px) {
  .promise-row { grid-template-columns: 1fr; gap: var(--s-2); }
}

/* ============================================================================
   HONESTY BLOCK — small secondary callout (engram page)
   ============================================================================ */
.honesty-block {
  padding: var(--s-4);
  border-left: 2px solid var(--accent);
  background: var(--bg-soft);
  font-size: var(--t-small);
  color: var(--ink);
  line-height: 1.55;
  max-width: 52ch;
  font-weight: 300;
}
.honesty-block strong {
  color: var(--ink-strong);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.honesty-block-label {
  display: block;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin-bottom: var(--s-2);
  font-weight: 500;
}

/* ============================================================================
   WORKS-WITH ROW — engram integrations
   ============================================================================ */
.works-with {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  align-items: baseline;
  padding: var(--s-5) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.works-with-label {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  font-weight: 500;
  margin-right: var(--s-4);
}
.works-with-item {
  font-size: var(--t-small);
  color: var(--ink-strong);
  font-weight: 500;
}

/* ============================================================================
   CLI TABLE — engram command reference
   ============================================================================ */
.cli-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
  margin: var(--s-5) 0;
}
.cli-table th,
.cli-table td {
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.cli-table th {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  font-weight: 500;
  padding-top: 0;
  border-bottom-color: var(--rule-strong);
}
.cli-table td.cmd {
  font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', monospace;
  color: var(--ink-strong);
  white-space: nowrap;
  padding-right: var(--s-5);
}
.cli-table td.desc {
  color: var(--ink-muted);
  font-weight: 300;
  max-width: 48ch;
}

/* ---- Reduced motion — kill everything --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero h1 .word { opacity: 1; transform: none; filter: none; }
  .hero .lead, .hero .hero-meta, .hero .ai-readable, .hero p .cta { opacity: 1; transform: none; }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1; transform: none; }
  .divider-grow { transform: scaleX(1); }
  .nav-brand .dot { animation: none; opacity: 1; }
  .hero h1 em.accent { animation: none; }
}