/**
 * Ahura "Quiet Proof" — marketing site stylesheet.
 *
 * Plain CSS port of the design system that lives in the product apps
 * (credstudio/apps/web/packages/ui/src/tokens.css). Token VALUES are copied
 * verbatim so the marketing site and the applications are visually identical.
 *
 * No build step, no framework: these pages are served straight off disk by
 * nginx. Marketing is static; the products are Next.js. That boundary is
 * deliberate -- see infra/docs/gtm/01-website-relaunch.md.
 *
 * The one rule that carries the whole brand: anything a stranger could verify
 * -- an ID, a hash, a timecode, a count -- renders in tabular mono (.mono).
 * That is the visual argument for a credentialing company.
 */

/* ---------------------------------------------------------------- tokens */
:root,
[data-theme="light"] {
  --bg: #FCFCFA;
  --surface: #FFFFFF;
  --elevated: #F6F7F5;

  --ink: #15171A;
  --ink-2: #5B6168;
  --hairline: #E6E8E4;

  --trust: #0E6E4E;
  --trust-bg: #E7F2EC;

  --evidence: #9A5B12;
  --evidence-bg: #F6EEDF;

  --danger: #B4232A;
  --warn: #B5790A;

  --shadow-sheet: 0 8px 32px rgba(0, 0, 0, 0.08);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --radius-control: 12px;
  --radius-card: 18px;
  --radius-hero: 24px;

  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: Newsreader, ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --maxw: 1180px;

  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0C0F14;
  --surface: #11151C;
  --elevated: #171C25;
  --ink: #F2F4F1;
  --ink-2: #9AA1A8;
  --hairline: #252B34;
  --trust: #3FBE8A;
  --trust-bg: #10271E;
  --evidence: #D9A35B;
  --evidence-bg: #2A2113;
  --danger: #F0888C;
  --warn: #E2B45A;
  --shadow-sheet: 0 8px 32px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0C0F14;
    --surface: #11151C;
    --elevated: #171C25;
    --ink: #F2F4F1;
    --ink-2: #9AA1A8;
    --hairline: #252B34;
    --trust: #3FBE8A;
    --trust-bg: #10271E;
    --evidence: #D9A35B;
    --evidence-bg: #2A2113;
    --danger: #F0888C;
    --warn: #E2B45A;
    --shadow-sheet: 0 8px 32px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
}

/* ----------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
* { border-color: var(--hairline); }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

p { margin: 0; }
img { max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Verifiable values: tabular mono, everywhere, always. */
.mono, code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "ss01";
  font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 2px solid var(--trust);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--surface); color: var(--ink);
  padding: 12px 18px; border-radius: var(--radius-control); z-index: 200;
}
.skip:focus { left: 16px; top: 16px; }

/* ------------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.nav-in {
  max-width: var(--maxw); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 28px;
}
.brand {
  font-family: var(--font-serif); font-size: 21px; font-weight: 500;
  letter-spacing: -0.02em; white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav-links a, .navbtn {
  font-size: 15px; color: var(--ink-2);
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit;
}
.nav-links a:hover, .navbtn:hover { color: var(--ink); }

/* dropdown */
.menu { position: relative; }
.menu-panel {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  min-width: 250px; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--radius-card);
  box-shadow: var(--shadow-sheet); padding: 8px;
  opacity: 0; visibility: hidden; transition: opacity 160ms var(--ease);
}
/* Invisible hover bridge across the 12px gap between the button and the panel.
   Without it the pointer crosses unhovered space on the way down, mouseleave
   fires on .menu, and the menu closes before you can reach an item. */
.menu-panel::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: -14px; height: 14px;
}
.menu[data-open="true"] .menu-panel { opacity: 1; visibility: visible; }
.menu-panel a {
  display: block; padding: 11px 13px; border-radius: 10px;
  color: var(--ink); font-size: 15px;
}
.menu-panel a:hover { background: var(--elevated); text-decoration: none; }
.menu-panel .sub {
  display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px;
}
/* The quiet route for someone who already has an account. Separated by a rule
   so it reads as an aside rather than a fourth product to choose between --
   the three entries above are destinations, this is a state. */
.menu-panel .menu-foot {
  margin-top: 6px; padding-top: 11px;
  border-top: 1px solid var(--hairline);
  font-size: 13.5px; color: var(--ink-2);
  border-radius: 0 0 10px 10px;
}

/* ---------------------------------------------------------------- button */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--radius-control);
  font-size: 16px; font-weight: 500; font-family: inherit;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 160ms var(--ease), background 160ms var(--ease);
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--trust); color: #fff; }
[data-theme="dark"] .btn-primary { color: #06130E; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary { color: #06130E; }
}
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--hairline); }
.btn-secondary:hover { background: var(--elevated); }
.btn-sm { padding: 9px 16px; font-size: 15px; }

/* ----------------------------------------------------------------- hero */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background:
    radial-gradient(900px 480px at 18% 12%, color-mix(in oklab, var(--trust) 14%, transparent), transparent 60%),
    radial-gradient(700px 420px at 88% 88%, color-mix(in oklab, var(--evidence) 14%, transparent), transparent 65%);
}
.hero-in { position: relative; padding: 84px 0 72px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--hairline); background: var(--surface);
  border-radius: 999px; padding: 5px 13px;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--trust); }
h1.display { font-size: clamp(42px, 6.4vw, 70px); max-width: 17ch; margin-top: 26px; }
.lede {
  margin-top: 22px; max-width: 56ch;
  font-size: clamp(18px, 2.1vw, 21px); line-height: 1.5; color: var(--ink-2);
}
.cta-row { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.tertiary { font-size: 15.5px; color: var(--trust); }

/* --------------------------------------------------------------- section */
section { scroll-margin-top: 76px; }
.band { padding: 76px 0; }
.band-alt { background: var(--elevated); border-block: 1px solid var(--hairline); }
.kicker {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 500;
}
h2.section-title { font-size: clamp(30px, 3.6vw, 40px); margin-top: 12px; max-width: 22ch; }
.section-lede { margin-top: 16px; max-width: 62ch; color: var(--ink-2); font-size: 17.5px; }

/* ----------------------------------------------------------------- grids */
.grid { display: grid; gap: 20px; margin-top: 40px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-card); padding: 26px;
  display: flex; flex-direction: column;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.card-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-sheet); text-decoration: none; }
.card h3 { font-size: 22px; }
.card p { margin-top: 12px; color: var(--ink-2); font-size: 16px; }
.card .go { margin-top: auto; padding-top: 20px; color: var(--trust); font-size: 15.5px; font-weight: 500; }

/* chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 4px 11px;
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.chip-trust { background: var(--trust-bg); color: var(--trust); }
.chip-evidence { background: var(--evidence-bg); color: var(--evidence); }
.chip-quiet { background: var(--elevated); color: var(--ink-2); border: 1px solid var(--hairline); }

/* ------------------------------------------------------------- lifecycle */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 42px; }
.step { position: relative; padding: 26px 24px 26px 0; }
.step + .step { padding-left: 24px; border-left: 1px solid var(--hairline); }
.step-n {
  font-family: var(--font-mono); font-size: 12px; color: var(--trust);
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 18.5px; margin-top: 10px; font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; }
.step p { margin-top: 8px; font-size: 15px; color: var(--ink-2); }

/* --------------------------------------------------------------- pricing */
.price-card { padding: 24px; }
.price-name { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.price-amt {
  font-family: var(--font-serif); font-size: 36px; margin-top: 12px;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.price-cad { font-size: 13.5px; color: var(--ink-2); }
.price-blurb { margin-top: 14px; font-size: 14.5px; color: var(--ink-2); }

/* ---------------------------------------------------------------- honest */
.honest {
  border: 1px solid var(--hairline); border-left: 3px solid var(--evidence);
  border-radius: var(--radius-card); background: var(--surface);
  padding: 26px 28px;
}
.honest h3 { font-size: 19px; font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; }
.honest ul { margin: 14px 0 0; padding-left: 20px; color: var(--ink-2); font-size: 15.5px; }
.honest li { margin-top: 7px; }

/* ---------------------------------------------------------------- footer */
.footer { border-top: 1px solid var(--hairline); padding: 56px 0 40px; background: var(--elevated); }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
.foot-h { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px; }
.foot-col a { display: block; font-size: 15px; color: var(--ink-2); margin-bottom: 10px; }
.foot-col a:hover { color: var(--ink); }
.foot-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-size: 14px; color: var(--ink-2);
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .g3, .g4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step + .step { border-left: 0; padding-left: 0; }
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .hero-in { padding: 56px 0 48px; }
  .band { padding: 56px 0; }
  .g2, .g3, .g4, .steps { grid-template-columns: 1fr; }
  .nav-desktop { display: none; }
  .foot-grid { grid-template-columns: 1fr; }
  .cta-row .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card-link:hover, .btn:hover { transform: none; }
}