*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.006em;
  overflow-x: clip;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ---- Cursor spotlight effect ---- */
.spotlight {
  position: relative;
  overflow: hidden;
}
.spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    400px circle at var(--mx, 0px) var(--my, 0px),
    rgba(255, 255, 255, 0.04),
    transparent 80%
  );
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
:root[data-theme="light"] .spotlight::after {
  background: radial-gradient(
    400px circle at var(--mx, 0px) var(--my, 0px),
    rgba(12, 16, 15, 0.04),
    transparent 80%
  );
}
.spotlight:hover::after {
  opacity: 1;
}

a { color: inherit; text-decoration: none; }

/* ---- Visually hidden ----
   For live regions and labels that must reach a screen reader without
   occupying layout. Not `display: none`, which removes it from the
   accessibility tree along with everything else. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Horizontally scrollable code ----
   Code blocks overflow sideways on narrow viewports. Styling the scrollbar
   opts out of macOS overlay scrollbars, so the fact that there is more to
   the right is visible before the reader tries to scroll. */
pre {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
pre::-webkit-scrollbar { height: 6px; }
pre::-webkit-scrollbar-track { background: transparent; }
pre::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 3px;
}

/* ---- Keyboard focus ----
   One ring for every interactive element. Drawn with the foreground colour
   plus a background-coloured inner ring so it stays visible on both the page
   ground and the inverted surfaces (buttons, terminal, code cards). */
:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.btn-primary:focus-visible {
  outline-color: var(--fg);
  outline-offset: 4px;
}

/* ---- Skip link ---- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius-sm);
  transition: top 0.18s ease;
}
.skip-link:focus-visible {
  top: 16px;
  outline-offset: 4px;
}

/* Headings — Space Grotesk, tight, engineered */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--fg);
}

p { color: var(--fg-muted); }

code, pre { font-family: var(--font-mono); }

::selection {
  background: var(--fg);
  color: var(--bg);
}

/* ---- Layout helpers ---- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

.section { padding: 132px 0; }

.section-head {
  max-width: 720px;
  margin: 0 auto 72px;
}

/* Eyebrow — tracked monospace label, the brand's voice for captions
   (echoes "POST-QUANTUM SECURITY" / "01 The mark" on the brand sheet) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 24px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--line-strong);
}

.section-head h1,
.section-head h2 {
  font-size: clamp(2.1rem, 5vw, 3.3rem);
  font-weight: 600;
}

.section-head p {
  margin-top: 22px;
  font-size: 1.1rem;
  max-width: 580px;
  color: var(--fg-muted);
}

/* ---- Buttons — solid = ink/paper inversion, adapts to section ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
    transform 0.18s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.btn-primary:hover { transform: translateY(-2px); }

.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--fg);
}
.btn-ghost:hover { border-color: var(--fg); }

.btn svg { width: 16px; height: 16px; }

/* ---- The mark ---- */
.mark { display: block; color: var(--fg); }
.mark svg { width: 100%; height: 100%; display: block; }

/* ---- Cards — hairline, no shadow theatrics ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.card:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
}

/* ---- Reveal-on-scroll ----
   Gated behind the `js` class that the head bootstrap sets on <html>. The
   hidden state is what JavaScript later undoes, so if the script never runs —
   blocked, errored, an old crawler — the page stays fully readable instead of
   rendering as a blank column. */
:root.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
:root.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  :root.js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---- Hairline divider ---- */
.rule {
  height: 1px;
  border: 0;
  background: var(--line);
}

/* ---- Scroll progress ---- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--fg);
  z-index: 100;
  will-change: transform;
}

@media (max-width: 720px) {
  .section { padding: 88px 0; }
  /* Buttons are the primary controls on a phone; 13px of padding on a
     0.84rem label lands just under a comfortable touch target. */
  .btn { padding: 15px 22px; }
}

/* ---- Windows High Contrast / forced colours ----
   The whole system is two colours mixed through color-mix, and forced-colors
   discards those mixes — which would take the hairline borders that carry the
   layout (algorithm rows, certificate bars, cards) with them. Restoring them
   as system colours keeps the structure legible. */
@media (forced-colors: active) {
  * { forced-color-adjust: none; }
  .card,
  .rule,
  .algo-list,
  .btn-ghost {
    border-color: CanvasText;
  }
  .btn-primary {
    background: ButtonFace;
    color: ButtonText;
    border-color: ButtonText;
  }
  :focus-visible { outline-color: Highlight; }
  .scroll-progress { background: Highlight; }
  /* Decorative geometry carries no information and only adds noise here. */
  .lattice,
  .marquee-wrap,
  .scroll-hint {
    display: none;
  }
}

/* ---- Print ----
   The security page is reference material that gets exported for review, and
   the default rendering printed a black page with the chrome intact. */
@media print {
  :root {
    --fg: #000;
    --bg: #fff;
  }
  body {
    background: #fff;
    color: #000;
  }
  .hdr,
  .footer,
  .scroll-progress,
  .skip-link,
  .marquee-wrap,
  .scroll-hint,
  .lattice,
  .mobile-nav,
  .btn {
    display: none !important;
  }
  .section { padding: 24px 0; }
  :root.js .reveal { opacity: 1; transform: none; }
  /* A URL in a printout is only useful if it is readable. */
  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }
  h2, h3 { break-after: avoid; }
  pre, .card, .sec-block { break-inside: avoid; }
}

/* ---- Account pages (sign in, register, confirm) ---- */
.auth { padding: 160px 0 100px; }
.auth-card { max-width: 440px; margin: 0 auto; display: grid; gap: 14px; }
.auth-card h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.auth-card label {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-dim); margin-top: 6px;
}
.auth-card input {
  width: 100%; background: var(--surface); color: var(--fg); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 12px 14px; font: inherit;
}
.auth-card .btn { justify-content: center; margin-top: 10px; }
.auth-card .hint, .auth-alt { font-size: 0.85rem; color: var(--fg-dim); }
.auth-alt a { text-decoration: underline; }
.form-error, .validation-message { font-size: 0.88rem; color: var(--fg); border-left: 2px solid var(--fg); padding-left: 10px; }

/* ---- Orders ---- */
.orders { max-width: 640px; }
.order { display: grid; gap: 10px; }
.order h2 { font-size: 1.4rem; }
.order code { font-family: var(--font-mono); font-size: 0.9em; }
.steps { list-style: none; display: grid; gap: 6px; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim); }
.steps li::before { content: "○ "; }
.steps li.done { color: var(--fg); }
.steps li.done::before { content: "● "; }

.auth-card fieldset { border: 0; display: grid; gap: 14px; padding: 0; margin-top: 8px; }
.auth-card legend { font-family: var(--font-display); font-size: 1.15rem; color: var(--fg); padding: 0; margin-bottom: 4px; }