/* ==========================================================================
   OOMU Beta 2 site
   Brand system from Kiana's kit: soft black, off white, one blue.
   Type: Outfit (display, matches the wordmark) + Inter (text, screen-optimized).
   Both self-hosted. No third-party font requests.

   Layout language is taken from the deck itself: full-bleed bands that
   alternate white and soft black, with one statement allowed to own a screen.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face { font-family: "Outfit"; src: url("fonts/outfit-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("fonts/outfit-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("fonts/outfit-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("fonts/outfit-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  /* Kit palette. The blue is the app icon blue, which supersedes the kit blue.
     Source of truth: OOMU.icon fill, display-p3 0.18724 0.43570 0.86015,
     which converts to sRGB #0071e3. */
  --black: #1a1a1a;
  --off: #e3e3e3;
  --white: #ffffff;
  --blue: #0071e3;

  /* Derived. The icon blue is lighter than the old kit blue, so it clears
     4.5:1 on white but not on off white or soft black. These two cover that. */
  --blue-deep: #005bb8;      /* hover, and link text on the off white band */
  --blue-hover: var(--blue-deep);
  --blue-on-dark: #4da2ff;   /* blue for text on soft black */

  /* Semantic, re-mapped per band */
  --bg: var(--white);
  --ink: var(--black);
  --ink-soft: #4a4a4c;
  --muted: #616166;          /* dark enough to clear 4.5:1 on the off white band too */
  --line: rgba(26, 26, 26, 0.14);
  --line-soft: rgba(26, 26, 26, 0.08);
  --link: var(--blue);

  --display: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, "Cascadia Code", monospace;

  --wrap: 1140px;
  --narrow: 720px;
  --pad: clamp(20px, 5vw, 56px);
  --band-y: clamp(84px, 12vw, 168px);
  --nav-h: 64px;
}

/* Dark and blue bands simply re-map the semantic tokens. */
.band.dark,
.dark-scope {
  --bg: var(--black);
  --ink: var(--off);
  --ink-soft: #b6b6ba;
  --muted: #93939a;
  --line: rgba(227, 227, 227, 0.16);
  --line-soft: rgba(227, 227, 227, 0.09);
  --link: var(--blue-on-dark);
}

/* Solid white on the blue band is 4.70:1, so any transparency drops below
   4.5:1. Secondary text keeps its hierarchy through size and weight instead. */
.band.blue {
  --bg: var(--blue);
  --ink: var(--white);
  --ink-soft: var(--white);
  --muted: var(--white);
  --line: rgba(255, 255, 255, 0.34);
  --line-soft: rgba(255, 255, 255, 0.2);
  --link: var(--white);
}

.band.soft {
  --bg: var(--off);
  --line: rgba(26, 26, 26, 0.18);
  --link: var(--blue-deep);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}
/* The default blue outline is invisible against soft black, so anywhere the
   background is dark the focus ring goes white. The footer belongs in this
   list and was missing from it, which made every footer link keyboard-focusable
   but not visibly so. */
.band.blue :focus-visible,
.band.dark :focus-visible,
.site-footer :focus-visible { outline-color: var(--white); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--black);
  color: var(--off);
  padding: 12px 18px;
  z-index: 100;
  font-family: var(--display);
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Type ---------- */
h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.3rem); }
h3 { font-size: clamp(1.25rem, 2.1vw, 1.6rem); font-weight: 600; letter-spacing: -0.014em; line-height: 1.2; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.1rem, 1.65vw, 1.32rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 34em;
}

.kicker {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.1rem;
}

.fine { font-size: 0.9rem; color: var(--muted); }

.tm { font-size: 0.62em; vertical-align: super; line-height: 0; letter-spacing: 0; }

/* ---------- Layout ---------- */
.band {
  background: var(--bg);
  color: var(--ink);
  padding: var(--band-y) 0;
  position: relative;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.wrap.narrow { max-width: var(--narrow); }

/* The statement band: one line owns the screen, exactly like the deck. */
.statement {
  min-height: min(74vh, 620px);
  display: grid;
  place-items: center;
  text-align: center;
}

.statement .display {
  font-size: clamp(2.1rem, 6.2vw, 4.6rem);
  max-width: 18ch;
  margin: 0 auto;
}

.statement .display.wide { max-width: 26ch; }

/* One clause per line, for statements that are built from short sentences. */
.statement .display.stack { max-width: none; }
.statement .display.stack span { display: block; }

.statement .sub {
  margin-top: 1.6rem;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

/* Two-column argument block. */
.beat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

@media (min-width: 900px) {
  .beat { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(48px, 6vw, 96px); }
}

.beat-body > * + * { margin-top: 1.05em; }
.beat-body p { max-width: 40em; }

/* Rule used to separate the claim from the answer. */
.turn {
  margin-top: 1.6em;
  padding-top: 1.4em;
  border-top: 2px solid var(--ink);
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  line-height: 1.34;
  letter-spacing: -0.012em;
  color: var(--ink);
  max-width: 26em;
}

/* Stack of short declaratives. */
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.facts li {
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.3rem;
}
.facts li:last-child { border-bottom: 1px solid var(--line); }
.facts .f-head {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.facts .f-sub { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.55; }

/* Numbered grid. */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.cell .c-num {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  display: block;
  margin-bottom: 0.7rem;
}
.cell h3 { margin-bottom: 0.5rem; }
.cell p { color: var(--ink-soft); font-size: 0.99rem; }

/* ---------- Buttons ---------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: center;
  margin-top: 2rem;
}
.statement .actions { justify-content: center; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.005em;
  padding: 15px 30px;
  border-radius: 3px;
  border: 2px solid transparent;
  background: var(--blue);
  color: var(--white);
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
  cursor: pointer;
  text-align: center;
}
.btn:hover { background: var(--blue-hover); text-decoration: none; }

.btn.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn.ghost:hover { background: var(--ink); color: var(--bg); }

.band.blue .btn {
  background: var(--white);
  color: var(--blue);
}
.band.blue .btn:hover { background: var(--off); }
.band.blue .btn.ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.75);
}
.band.blue .btn.ghost:hover { background: var(--white); color: var(--blue); }

/* A date, wearing the button's shape. Deliberately not the live blue, so
   nobody spends a click finding out it does nothing. */
/* Currently used by no page. It is the pre-announcement chip: a date wearing
   the button's shape, for when something is coming but not downloadable. The
   download page used it until Beta 2 shipped on 2026-09-06. Kept for the next
   time, not dead code by accident. */
.btn-pending {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line);
  border-style: dashed;
  cursor: default;
  font-variant-numeric: tabular-nums;
}
.btn-pending:hover { background: transparent; text-decoration: none; }

.textlink {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--link);
}
.textlink::after { content: " \203A"; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.site-header[data-stuck="true"] { border-bottom-color: var(--line-soft); }

.header-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Brand lockup. Proportions are taken from the stacked lockup in the brand
   guide: the raven sits on the wordmark's baseline rather than being centered
   against it, and stands a little over one cap height tall. Outfit's cap height
   is about 0.7em and the guide puts the mark at roughly 1.4 cap heights, which
   comes out at 1em. Everything is sized in em, so the whole lockup scales from
   the one font-size on .brand. The mark is 740 x 578, so never set both width
   and height on it. */
.brand {
  display: inline-flex;
  align-items: baseline;   /* an img's baseline is its bottom edge */
  gap: 0.162em;   /* 0.226 cap heights, per the guide */
  color: var(--black);
  /* The one dial. Mark, wordmark and gap all scale from here. At 2rem the
     raven renders 41 x 32, which is the size the old shell used and the size
     that reads correctly in a 64px bar. */
  font-size: 2rem;
  line-height: 1;
}
.brand:hover { text-decoration: none; }
.brand img { height: 1em; width: auto; flex: none; }
.brand span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1em;
  letter-spacing: 0.006em;
}

.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px); }
.site-nav a {
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.97rem;
  color: var(--black);
}
.site-nav a[aria-current="page"] { font-weight: 700; }
.site-nav a.nav-cta {
  background: var(--blue);
  color: var(--white);
  padding: 9px 18px;
  border-radius: 3px;
  font-weight: 600;
}
.site-nav a.nav-cta:hover { background: var(--blue-hover); text-decoration: none; }

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 10px 9px;
  margin-right: -9px;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--black);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--pad) 22px;
    display: none;
  }
  .site-nav[data-open="true"] { display: flex; }
  .site-nav a {
    padding: 15px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 1.08rem;
  }
  .site-nav a.nav-cta {
    margin-top: 16px;
    border-bottom: 0;
    text-align: center;
    padding: 14px 18px;
  }
}

/* ---------- Hero ---------- */
.hero { padding-top: clamp(64px, 9vw, 116px); padding-bottom: clamp(56px, 8vw, 104px); }
.hero h1 { max-width: 15ch; }
.hero .lede { margin-top: 1.5rem; font-size: clamp(1.12rem, 1.75vw, 1.38rem); }

/* ---------- Screenshot frame ---------- */
.shot {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
}
.shot img { width: 100%; height: auto; }
figure { margin: 0; }

/* ---------- Portrait video ----------
   The promo is 9:16, shot for phones. The failure mode on a desktop page is
   letting a portrait video run full width, where it becomes a column of face
   two thousand pixels tall. So it never gets the full width: it takes the
   narrow side of a two-column beat and the argument sits next to it.

   The width is capped three ways at once. 100% keeps it inside its column on
   a phone, 400px stops it growing on a wide screen, and 38.25vh is the
   viewport-height cap: 68vh x 9/16, which is the width that makes the frame
   exactly 68vh tall. Whichever is smallest wins, so the video cannot outgrow
   a short laptop screen no matter how wide the window is. */
.reel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

@media (min-width: 900px) {
  .reel { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); gap: clamp(44px, 5.5vw, 88px); }
}

.reel-frame {
  width: min(100%, 400px, 38.25vh);
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  /* Black, not white like .shot: this is what the video letterboxes against
     and what the poster fades into, on both bands it can sit on. */
  background: var(--black);
  /* Reserved before the poster loads, so nothing below it jumps. */
  aspect-ratio: 9 / 16;
}

.reel-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--black);
}

.reel-body > * + * { margin-top: 1.05em; }
.reel-body p { max-width: 34em; }
figcaption {
  margin-top: 0.85rem;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 46ch;
}

/* ---------- Pricing / split ---------- */
.split-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin-top: 3rem;
}
.plan {
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: clamp(26px, 3.2vw, 40px);
  display: flex;
  flex-direction: column;
}
.plan .p-tag {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.plan h3 { font-size: clamp(1.5rem, 2.4vw, 1.95rem); font-weight: 700; margin-bottom: 0.7rem; }
.plan p { color: var(--ink-soft); }
.plan .actions { margin-top: auto; padding-top: 1.6rem; }

/* ---------- Release notes (download page) ---------- */
.release { border-top: 1px solid var(--line); padding-top: 1.6rem; margin-top: 1.6rem; }
.release:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.release h3 { font-size: 1.12rem; margin-bottom: 0.15rem; }
.release .r-date {
  font-family: var(--display);
  font-size: 0.84rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.85rem;
}
.release ul { margin: 0; padding-left: 1.15rem; display: grid; gap: 0.4rem; }
.release li { color: var(--ink-soft); line-height: 1.55; }

/* ---------- Prose (legal pages) ---------- */
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin: 2.4rem 0 0.7rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: clamp(1.05rem, 1.5vw, 1.2rem); font-weight: 600; margin: 1.7rem 0 0.5rem; }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul { padding-left: 1.2rem; display: grid; gap: 0.45rem; margin: 0 0 1.05em; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--black);
  color: var(--off);
  padding: clamp(56px, 7vw, 88px) 0 40px;
}
.site-footer a { color: var(--off); }
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(227, 227, 227, 0.16);
}
@media (min-width: 780px) {
  .footer-top { grid-template-columns: 1.1fr 1fr; }
}
/* Same lockup rules as the header. See the note on .brand. */
.f-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.162em;
  margin-bottom: 1rem;
  font-size: 1.75rem;
  line-height: 1;
}
.f-brand img { height: 1em; width: auto; flex: none; filter: invert(1); }
.f-brand span { font-family: var(--display); font-weight: 700; font-size: 1em; }
.f-tag { font-family: var(--display); font-weight: 500; font-size: 1.05rem; color: var(--off); margin: 0 0 0.4rem; }
.f-note { color: #a0a0a6; font-size: 0.95rem; max-width: 34ch; }

/* ---------- Social ----------
   The tap target is 36px while the glyph is 20px, which is the whole reason
   for the negative margin: the row is pulled left by the 8px of padding
   inside the first link, so the LinkedIn glyph lines up with the text above
   it rather than the invisible box around it. Optical alignment, not
   geometric. Change the size and the offset changes with it. */
.social {
  list-style: none;
  margin: 1.5rem 0 0 -8px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: #c7c7cc;
  transition: color 0.16s ease, background-color 0.16s ease;
}
.social a:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  text-decoration: none;
}
.social svg { display: block; width: 20px; height: 20px; fill: currentColor; }

/* On a touch screen the target grows to Apple's 44pt minimum. Keyed off the
   pointer rather than the viewport, because the thing that matters is whether
   it is being hit with a finger, not how wide the window is. The offset
   tracks the padding: (44 - 20) / 2 = 12. */
@media (pointer: coarse) {
  .social { margin-left: -12px; gap: 0; }
  .social a { width: 44px; height: 44px; }
}
.footer-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px 28px;
  align-content: start;
}
.footer-nav a { font-size: 0.96rem; color: #c7c7cc; }
.footer-nav a:hover { color: var(--white); }
.footer-fine {
  margin: 26px 0 0;
  font-size: 0.86rem;
  color: #85858c;
}

/* ==========================================================================
   Documentation
   Generated by scripts/build-docs.mjs. The content and structure are
   unchanged; this is the same brand system applied to a reading surface.
   ========================================================================== */

/* The docs pages use .eyebrow where the marketing pages use .kicker. */
.eyebrow {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.9rem;
}

.docs-layout {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(30px, 4vw, 52px) var(--pad) clamp(64px, 8vw, 112px);
  display: grid;
  gap: clamp(30px, 4vw, 52px);
}

@media (min-width: 1000px) {
  .docs-layout {
    grid-template-columns: 244px minmax(0, 1fr);
    gap: clamp(48px, 5vw, 84px);
    align-items: start;
  }
}

/* ---------- Sidebar ---------- */
.docs-sidebar { min-width: 0; }

@media (min-width: 1000px) {
  .docs-sidebar {
    position: sticky;
    top: calc(var(--nav-h) + 28px);
    max-height: calc(100vh - var(--nav-h) - 60px);
    overflow-y: auto;
    padding-right: 8px;
  }
}

@media (max-width: 999px) {
  .docs-sidebar {
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 22px 22px 8px;
    background: var(--paper-alt, #fafafa);
  }
}

.docs-nav-group { margin-bottom: 1.7rem; }
.docs-nav-group:last-child { margin-bottom: 0; }

.docs-nav-group p {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.6rem;
  padding-left: 13px;
}

.docs-nav-group a {
  display: block;
  padding: 6px 0 6px 13px;
  margin-left: -1px;
  border-left: 2px solid var(--line-soft);
  font-size: 0.94rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.docs-nav-group a:hover {
  color: var(--ink);
  border-left-color: var(--line);
  text-decoration: none;
}
.docs-nav-group a[aria-current="page"] {
  color: var(--blue);
  font-weight: 600;
  border-left-color: var(--blue);
}

/* ---------- Article ---------- */
.docs-content { min-width: 0; }

.docs-back {
  display: inline-block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--muted);
  margin-bottom: 1.6rem;
}
.docs-back:hover { color: var(--blue); text-decoration: none; }

.docs-header {
  padding-bottom: clamp(24px, 3vw, 36px);
  margin-bottom: clamp(28px, 3.5vw, 44px);
  border-bottom: 1px solid var(--line);
}
.docs-header h1 {
  font-size: clamp(1.95rem, 3.6vw, 2.85rem);
  max-width: 20ch;
}
.docs-lede {
  margin: 1.1rem 0 0;
  font-size: clamp(1.03rem, 1.4vw, 1.16rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 42em;
}

/* ---------- Body copy ---------- */
.docs-body { font-size: 1.02rem; }
.docs-body > * { max-width: 44em; }
.docs-body > .table-wrap,
.docs-body > pre { max-width: none; }

.docs-body h2 {
  font-size: clamp(1.42rem, 2.4vw, 1.85rem);
  margin: 2.6em 0 0.75em;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.docs-body h3 {
  font-size: clamp(1.12rem, 1.7vw, 1.28rem);
  font-weight: 600;
  margin: 2em 0 0.6em;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.docs-body h4 {
  font-size: 1.02rem;
  font-weight: 600;
  margin: 1.7em 0 0.5em;
}
.docs-body > :first-child { margin-top: 0; }

.docs-body p { color: var(--ink-soft); line-height: 1.68; }
.docs-body strong { color: var(--ink); font-weight: 600; }

.docs-body ul,
.docs-body ol { padding-left: 1.3rem; display: grid; gap: 0.5rem; margin: 0 0 1.05em; }
.docs-body li { color: var(--ink-soft); line-height: 1.6; }
.docs-body li > ul,
.docs-body li > ol { margin-top: 0.5rem; margin-bottom: 0; }

.docs-body hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.6em 0;
}

.docs-body img {
  border: 1px solid var(--line);
  border-radius: 5px;
  margin: 1.4em 0;
}

/* ---------- Code ---------- */
.docs-body code {
  font-family: var(--font-mono, ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace);
  font-size: 0.875em;
  background: rgba(26, 26, 26, 0.06);
  border-radius: 3px;
  padding: 0.15em 0.4em;
  color: var(--ink);
  word-break: break-word;
}

.docs-body pre {
  background: var(--black);
  color: var(--off);
  border-radius: 5px;
  padding: 18px 20px;
  overflow-x: auto;
  margin: 1.4em 0;
  line-height: 1.55;
  font-size: 0.9rem;
}
.docs-body pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
  word-break: normal;
}

/* ---------- Callouts ---------- */
.docs-body blockquote {
  margin: 1.5em 0;
  padding: 2px 0 2px 1.15rem;
  border-left: 3px solid var(--blue);
  color: var(--ink-soft);
}
.docs-body blockquote p { margin-bottom: 0.6em; }
.docs-body blockquote p:last-child { margin-bottom: 0; }

/* ---------- Tables ---------- */
.table-wrap {
  overflow-x: auto;
  margin: 1.5em 0;
  border: 1px solid var(--line);
  border-radius: 5px;
}
.docs-body table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
}
.docs-body th,
.docs-body td {
  text-align: left;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.docs-body th {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  border-bottom-color: var(--line);
}
.docs-body tr:last-child td { border-bottom: 0; }
.docs-body td { color: var(--ink-soft); }

/* ---------- Contact form ---------- */
.form {
  margin-top: 2.4rem;
  display: grid;
  gap: 1.4rem;
  max-width: 40em;
}
.form[data-sent="true"] { display: none; }

.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.4rem;
}
@media (min-width: 640px) {
  .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* align-content is not cosmetic here. Two fields side by side in a .form-row
   are stretched to the taller one, and a grid with auto rows shares that extra
   height out between its rows. So a field with a hint and an error slot and a
   field with only a hint end up with their inputs at different heights, off by
   a few pixels, on every row where the two differ. Pinning the content to the
   top makes the labels and the inputs line up whatever each field carries. */
.field { display: grid; gap: 0.4rem; align-content: start; }

.field label {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.field .hint { font-size: 0.86rem; color: var(--muted); }

.field input,
.field select,
.field textarea {
  font-family: var(--text);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: 4px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color 0.16s ease;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { min-height: 168px; resize: vertical; }

.field select {
  /* Own chevron, since appearance:none removes the native one. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23616166' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 40px;
}

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgba(26, 26, 26, 0.3); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: #b3261e; }

.field-error {
  font-size: 0.86rem;
  line-height: 1.4;
  color: #b3261e;
  min-height: 0;
}
.field[data-invalid="true"] .field-error { min-height: 1.2em; }

/* Honeypot. Hidden from people, reachable by the bots we want to catch. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}
.form-actions .btn[disabled] { opacity: 0.6; cursor: progress; }

.form-status {
  font-size: 0.94rem;
  line-height: 1.45;
  color: var(--muted);
}
.form-status[data-state="error"] { color: #b3261e; }

/* Google's floating reCAPTCHA badge is hidden, which their terms allow only if
   the equivalent notice is shown instead. That notice is .form-legal, and it
   must stay wherever this rule stays. */
.grecaptcha-badge { visibility: hidden; }

/* No max-width. The form is already capped at 40em, and a second, smaller cap
   here just leaves the fine print a few pixels short of everything above it,
   which reads as a mistake rather than as a measure. */
.form-legal {
  margin-top: -0.4rem;
  line-height: 1.5;
}

/* ---------- Bug report ----------
   One centered column. Nothing beside it.

   This took three tries and the two failures are worth recording, because both
   are tempting.

   First attempt: let the form run the full width of the wrap. The form came
   out 986px, the heading 1028px, the checklist 884px, and the legal note
   capped itself at 46ch. Four different widths, all flush left, so the right
   edge was a ragged staircase beside a large empty area. Width caps that are
   invisible inside a 494px column are very visible inside a 986px one.

   Second attempt: the site's .beat block, label left and form right, the way
   contact.html does it. That works for a short form and fails badly for a long
   one. The heading wrapped to three lines in the narrow column and then had
   nothing under it, so scrolling down the page meant scrolling past a column
   of empty background half the width of the screen while the form sat squashed
   against the right edge.

   A long form is not an argument with a claim and an answer. It is one task,
   so it gets one column, centered, and the whitespace goes evenly on both
   sides where nobody reads it as a missing element. */
   Left-aligned, not centered. Centering it was the third mistake: the column
   then started 90-odd pixels inside the hero above it, so the brand in the
   header, the hero heading, and the form each began at a different x. One page
   should have one left edge, and everything here now shares the one the header
   sets. */
.form-page {
  max-width: 760px;
}
.form-page .checks { margin-top: 1.7rem; }
/* The column is already the measure. A second cap inside it would just leave
   the form narrower than the heading above it. */
.form-page .form { max-width: none; }

/* A section rule inside a long form. Purely a wayfinding device: it tells you
   the questions below are about the machine rather than about the bug, so the
   form reads as three short forms instead of one long one. */
.form-section {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
  margin: 0.6rem 0 -0.4rem;
}

/* Steps to reproduce, in monospace. Not decoration: people number these lines
   and line them up, and a proportional font makes that look wrong enough that
   they stop bothering. */
textarea.mono {
  font-family: var(--font-mono);
  font-size: 0.94rem;
  line-height: 1.6;
}

/* The pre-flight list above the form. Reads as a checklist without pretending
   to be one you can tick, which would imply the form was checking. */
.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.checks li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 9px;
  height: 9px;
  border: 2px solid var(--blue);
  border-radius: 2px;
}

.form-done { max-width: 46em; }
.form-done h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: 0.6rem; }
.form-done p { color: var(--ink-soft); }
.form-done p + p { margin-top: 0.8rem; }

/* The filing reference. Monospace because it is an identifier, and people
   copy identifiers. */
.form-done .ref {
  font-family: var(--font-mono);
  font-size: 0.94rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px 12px;
  display: inline-block;
}

/* A quiet line directly beneath a button row, for the link that belongs to the
   button rather than to the paragraph after it. */
.under-actions {
  margin-top: 1.1rem;
  font-size: 0.95rem;
}

.form-done {
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: clamp(26px, 3.2vw, 40px);
  max-width: 40em;
  margin-top: 2.4rem;
}
.form-done h3 { margin-bottom: 0.6rem; }
.form-done p { color: var(--ink-soft); }
.form-done:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* ==========================================================================
   Learn and glossary
   These pages carry over from the old shell. Same content, new components.
   ========================================================================== */

/* Numbered steps, used by the "first workflow" walkthrough. */
.steps { display: grid; gap: 1.6rem; margin-top: 2rem; counter-reset: step; }
.step { display: grid; gap: 0.35rem; padding-left: 2.6rem; position: relative; }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.step h3 { font-size: 1.1rem; }
.step p { color: var(--ink-soft); margin: 0; }

/* Index of the Learn articles. */
.learn-item {
  display: grid;
  gap: 0.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.learn-number {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.learn-item h3 { margin-bottom: 0.1rem; }
.learn-item p { color: var(--ink-soft); font-size: 0.99rem; }

/* Glossary. */
.glossary-group + .glossary-group { margin-top: clamp(40px, 5vw, 68px); }
.glossary-group > h2 { margin-bottom: 1.6rem; }

.glossary-list { margin: 0; display: grid; gap: 0; }
.term {
  display: grid;
  gap: 0.3rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
}
.term:last-child { border-bottom: 1px solid var(--line); }
.term dt {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.term dd { margin: 0; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.55; }
.term[hidden] { display: none; }

@media (min-width: 760px) {
  .term { grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 0.3rem 2rem; align-items: baseline; }
}

.glossary-search { margin-top: 2rem; max-width: 26em; }
.glossary-search label {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}
.glossary-search input {
  font-family: var(--text);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: 4px;
  padding: 12px 14px;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.glossary-search input:focus { outline: none; border-color: var(--blue); }
.glossary-search input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ---------- Cookie notice ---------- */
.cookie {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  z-index: 80;
  width: min(660px, calc(100% - 32px));
  background: var(--black);
  color: var(--off);
  border-radius: 5px;
  padding: 16px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.6);
  font-size: 0.92rem;
}
.cookie p { margin: 0; flex: 1 1 300px; color: #c7c7cc; }
.cookie a { color: var(--blue-on-dark); }
.cookie button {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.92rem;
  background: var(--off);
  color: var(--black);
  border: 0;
  border-radius: 3px;
  padding: 10px 20px;
  cursor: pointer;
}

/* ---------- Reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Mobile Send to Mac Card ---------- */
.mobile-send-to-mac {
  margin: 1.6rem 0;
  padding: 1.4rem 1.6rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  text-align: left;
}
.band.dark .mobile-send-to-mac {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
.mobile-send-title {
  font-family: var(--display, Outfit, sans-serif);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--white, #ffffff);
}
.mobile-send-sub {
  font-family: var(--text, Inter, sans-serif);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--off, #e3e3e3);
  margin-bottom: 1.1rem;
}
.mobile-send-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.mobile-send-input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.4);
  color: var(--white, #ffffff);
  font-family: var(--text, Inter, sans-serif);
  font-size: 1rem;
  box-sizing: border-box;
}
.mobile-send-input:focus {
  outline: none;
  border-color: var(--blue, #0071e3);
  box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.3);
}
.mobile-send-btn {
  width: 100%;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  padding: 12px 20px;
  cursor: pointer;
}
.mobile-send-alert {
  margin-top: 0.85rem;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.45;
}
.mobile-send-alert.success {
  background: rgba(35, 134, 54, 0.25);
  border: 1px solid rgba(63, 185, 80, 0.4);
  color: #3fb950;
}
.mobile-send-alert.error {
  background: rgba(218, 54, 51, 0.25);
  border: 1px solid rgba(248, 81, 73, 0.4);
  color: #f85149;
}
.mobile-send-alt {
  margin-top: 1rem;
  font-size: 0.82rem;
  text-align: center;
}
.mobile-send-alt a {
  color: var(--off, #e3e3e3);
  text-decoration: underline;
  opacity: 0.8;
}
.mobile-send-alt a:hover {
  opacity: 1;
}