/* ==========================================================================
   Forsivo — marketing site
   Tokens transcribed from the app's own CSS (see FORSIVO_WEBSITE_BRIEF.md §9).
   Single dark theme: Obsidian grounds, cyan + gold accents.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Inter, self-hosted.
   Served from this origin rather than fonts.gstatic.com so that loading a page
   discloses nothing about the visitor to a third party — which is what lets the
   privacy policy say "this site sends nothing about you to anyone else" without
   an asterisk. Variable font: one file covers weights 300–700.
   The latin-ext face is only fetched if a page actually uses a character in
   its range, so listing it costs nothing on English pages.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand */
  --obsidian:       #1A2238;
  --estate-gold:    #C5A059;
  --glacier-cyan:   #45B1E8;
  --ui-canvas:      #F4F6F9;

  /* Dark surfaces (the site's primary ground) */
  --dark-bg:        #020617;
  --dark-card:      #0F172A;
  --dark-raised:    #1E293B;
  --dark-text:      #F8FAFC;
  --dark-text-2:    #CBD5E1;
  --dark-text-3:    #94A3B8;

  /* Light surfaces (used for the inverted sections) */
  --bg-main:        #F0F4F8;
  --bg-subtle:      #DDE5ED;
  --surface:        #FFFFFF;
  --text-primary:   #0F172A;
  --text-secondary: #475569;
  --text-muted:     #64748B;
  --border:         #CBD5E1;
  --border-light:   #E2E8F0;

  /* Accent — split by job, mirroring the app */
  --accent:         #0EA5E9;  /* fills, borders, rings */
  --accent-text:    #0369A1;  /* text & icons on light grounds */
  --accent-dark:    #38BDF8;  /* both roles on dark grounds */

  /* Semantic */
  --success:        #10B981;
  --warning:        #F59E0B;
  --danger:         #EF4444;

  /* Depth — tinted slate-900, not neutral black */
  --shadow-soft:    0 2px 10px rgba(15, 23, 42, 0.06);
  --shadow-hover:   0 10px 40px -10px rgba(15, 23, 42, 0.15);
  --shadow-glass:   0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-shot:    0 24px 70px -20px rgba(0, 0, 0, 0.55);

  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

  --measure: 68ch;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --page-max: 1180px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  font-family: var(--font-sans);
  /* Alternate single-storey glyphs + tabular numerals — part of the product's look. */
  font-feature-settings: "cv11", "cv05", "tnum";
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The header is sticky and 72px tall, so an anchor jump would otherwise put
     the thing you asked for underneath it. */
  scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--dark-bg);
  color: var(--dark-text-2);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Every figure — dollars, dates, counts — is tabular. The app treats
   misaligned numerals as a defect. */
.num, td, .stat-value, time { font-variant-numeric: tabular-nums; }

h1, h2, h3, h4 {
  color: var(--dark-text);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.12;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 5.4vw, 3.65rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); letter-spacing: -0.015em; }

p { margin: 0 0 1.15rem; max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #7DD3FC; }

strong { color: var(--dark-text); font-weight: 600; }

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

/* The UA stylesheet gives <figure> `margin: 1em 40px`. Left alone it quietly
   takes 80px off the width of every screenshot on the page — which is exactly
   the width the shots cannot spare. */
figure { margin: 0; }

hr {
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: 3rem 0;
}

::selection { background: rgba(69,177,232,0.28); color: #fff; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent-dark); color: #0F172A;
  padding: 0.7rem 1.1rem; border-radius: 0 0 10px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 780px; }

/* Screenshots are the one thing on the page that must not be set to the text
   measure. 1180px minus gutters leaves 1084px, and the app in these captures
   is 1440 CSS px wide, so a whole-screen shot in the text column renders at
   0.75x — legible, but only just. 1400px puts it at 0.93x, close enough to
   life size that the type in the shot reads as type. Prose keeps the narrower
   wrap; only the figures use this one. */
.wrap--wide { max-width: 1400px; }

section { padding-block: clamp(4rem, 9vw, 7.5rem); }

.section-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--estate-gold);
  margin-bottom: 1.15rem;
}

.section-label::after {
  content: "";
  display: block;
  width: 2.25rem;
  height: 2px;
  margin-top: 0.6rem;
  background: var(--estate-gold);
  opacity: 0.55;
}

.lede {
  font-size: clamp(1.08rem, 1.9vw, 1.28rem);
  line-height: 1.6;
  color: var(--dark-text-2);
}

/* Inverted (light) sections */
.section--light {
  background: var(--bg-main);
  color: var(--text-secondary);
}
.section--light h1, .section--light h2, .section--light h3 { color: var(--text-primary); }
.section--light strong { color: var(--text-primary); }
/* :not(.btn) — a bare `.section--light a` (0,1,1) outranks `.btn--onlight`
   (0,1,0) and repaints the button label accent-text, which is the button's own
   background colour. The label disappears entirely. Same specificity trap as
   `.site-nav a` vs `.btn--primary`. */
.section--light a:not(.btn) { color: var(--accent-text); }
.section--light a:not(.btn):hover { color: #075985; }
.section--light .lede { color: var(--text-secondary); }
/* Estate Gold does not pass 4.5:1 on white — on light grounds it is a rule,
   never body text. The label reverts to accent-text; the rule stays gold. */
.section--light .section-label { color: var(--accent-text); }
.section--light .section-label::after { background: var(--estate-gold); opacity: 1; }

/* Obsidian section — the mid-tone ground between #020617 sections */
.section--obsidian { background: var(--obsidian); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(2, 6, 23, 0.82);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 72px;
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--dark-text);
  flex-shrink: 0;
}
.lockup img { width: 38px; height: auto; }
.lockup span {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.lockup:hover { color: var(--dark-text); }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.6vw, 2rem);
}
/* :not(.btn) — otherwise this rule outranks .btn--primary on specificity and
   repaints the button label slate-300 on cyan (1.6:1). */
.site-nav a:not(.btn) {
  color: var(--dark-text-2);
  text-decoration: none;
  font-size: 0.925rem;
  font-weight: 500;
  white-space: nowrap;
}
.site-nav a:not(.btn):hover { color: var(--dark-text); }

@media (max-width: 720px) {
  /* Section anchors collapse on small screens, but Sign in and the CTA stay —
     a client trying to reach their file is the one visitor who cannot be asked
     to scroll to the footer. */
  .site-nav > a:not(.btn) { display: none; }
}

/* --------------------------------------------------------------------------
   Sign-in disclosure
   Native <details> — two distinct audiences (firm staff vs. clients) reach two
   different applications, so a single "Sign in" link would have to guess. No
   JavaScript is required to open it; nav.js only adds outside-click and Escape.
   -------------------------------------------------------------------------- */

.signin { position: relative; }

.signin > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.2rem;
  color: var(--dark-text-2);
  font-size: 0.925rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  list-style: none;
  user-select: none;
}
.signin > summary::-webkit-details-marker { display: none; }
.signin > summary:hover { color: var(--dark-text); }

.signin > summary::after {
  content: "";
  width: 0.42em;
  height: 0.42em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform 200ms ease;
}
.signin[open] > summary::after { transform: translateY(0.1em) rotate(-135deg); }

.signin__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.65rem);
  z-index: 60;
  width: max-content;
  max-width: min(20rem, calc(100vw - 2rem));
  background: var(--dark-card);
  border: 1px solid var(--dark-raised);
  border-radius: 14px;
  box-shadow: var(--shadow-glass);
  padding: 0.5rem;
  overflow: hidden;
}

.signin__item {
  display: block;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--dark-text);
}
.signin__item:hover,
.signin__item:focus-visible {
  background: rgba(255,255,255,0.06);
  color: var(--dark-text);
}

.signin__item strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.1rem;
}
.signin__item span {
  display: block;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--dark-text-3);
}

.signin__sep {
  height: 1px;
  background: var(--dark-raised);
  margin: 0.4rem 0.3rem;
}

/* On narrow screens the summary sits mid-header with the CTA to its right, so
   anchoring the menu to it pushes a 320px panel off the left edge. Re-anchor to
   the header row and let it span the gutters instead. */
@media (max-width: 720px) {
  .site-header__inner { position: relative; }
  .signin { position: static; }
  .signin__menu {
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    max-width: none;
    top: calc(100% + 0.5rem);
  }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.82rem 1.5rem;
  border-radius: 999px;
  font-size: 0.975rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease,
              color 200ms ease, transform 200ms ease;
  font-family: inherit;
}

/* On Obsidian, Glacier Cyan reads clean where the app's sky-700 goes muddy. */
.btn--primary {
  background: var(--glacier-cyan);
  color: #06121F;
  border-color: var(--glacier-cyan);
}
.btn--primary:hover {
  background: #6BC4F0;
  border-color: #6BC4F0;
  color: #06121F;
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--dark-text);
  border-color: rgba(255,255,255,0.22);
}
.btn--ghost:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.38);
  color: var(--dark-text);
}

/* sky-700 exists to survive white backgrounds — keep it for light sections. */
.btn--onlight {
  background: var(--accent-text);
  color: #fff;
  border-color: var(--accent-text);
}
.btn--onlight:hover { background: #075985; border-color: #075985; color: #fff; }

.btn--sm { padding: 0.55rem 1.1rem; font-size: 0.9rem; }
.btn--block { display: flex; width: 100%; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--obsidian);
  padding-block: clamp(4rem, 10vw, 8rem) clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}

/* The app's own login page uses a 40px white-at-3% grid. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: -2;
}

/* Glacier Cyan glow behind the mark */
.hero::after {
  content: "";
  position: absolute;
  top: -12%;
  left: 50%;
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle,
    rgba(69,177,232,0.20) 0%,
    rgba(69,177,232,0.09) 32%,
    rgba(197,160,89,0.05) 52%,
    transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.hero__mark {
  width: 84px;
  height: auto;
  margin-bottom: 2rem;
  filter: drop-shadow(0 8px 34px rgba(69,177,232,0.32));
}

.hero h1 { max-width: 17ch; }

.hero .lede { max-width: 60ch; margin-bottom: 2.25rem; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.hero__note {
  font-size: 0.925rem;
  color: var(--dark-text-3);
  margin: 0;
}

.hero__note::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--estate-gold);
  margin-right: 0.6rem;
  vertical-align: 0.08em;
}

/* --------------------------------------------------------------------------
   Screenshots
   -------------------------------------------------------------------------- */

/* A screenshot is presented as a framed object rather than a bare image: a
   few pixels of matte, then the capture. Without it, a white application
   screenshot meets the Obsidian ground on a hard edge and reads as a picture
   someone pasted in; with it, it reads as a screen. */
.shot {
  border-radius: 16px;
  overflow: hidden;
  padding: 6px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.05);
  box-shadow: var(--shadow-shot), 0 0 0 1px rgba(255,255,255,0.04);
}

.shot__frame {
  border-radius: 10px;
  overflow: hidden;
  background: var(--dark-card);
  /* The capture has its own pale ground; this keeps the matte from showing
     through as a hairline where the two rounded corners disagree. */
  line-height: 0;
}

.shot img { width: 100%; display: block; }

.section--light .shot {
  border-color: var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-hover);
}
.section--light .shot__frame { background: var(--bg-main); }

.shot--bleed { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.shot figcaption {
  font-size: 0.85rem;
  color: var(--dark-text-3);
  padding: 0.8rem 0.75rem 0.35rem;
  margin: 0;
  max-width: none;
  line-height: 1.5;
}
.section--light .shot figcaption { color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   Small screens: pan, don't shrink.

   These captures are a 1440 CSS px application. A phone gives a figure about
   335px, and 335/1440 is 0.23x — the app's 13px body text lands at 3px. No
   crop fixes that either: the narrowest region of this UI that still says
   something is about 1100 app px wide, which is still only 0.30x.

   So below 900px the frame becomes a scroll container and the capture is
   shown at a size it can actually be read at. The visitor swipes. That is
   honest about what the product is — a desktop application — where a shrunk
   thumbnail is just a grey rectangle claiming to be evidence.

   Two widths, because the crops come in two shapes: whole rows of the app,
   and single cards.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .shot__frame {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,0.5) transparent;
  }
  .shot__frame img { width: 860px; max-width: none; }
  .shot--pan-card .shot__frame img { width: 560px; }

  /* Say so, rather than relying on the visitor to discover it. Attached to
     the caption because that is where they are already looking. */
  .shot figcaption::after {
    content: " Swipe the image to see the rest.";
    color: var(--dark-text-3);
    opacity: 0.8;
  }
  .section--light .shot figcaption::after { color: var(--text-muted); }
}

/* A scroll container is only reachable by keyboard if something can focus it;
   nav.js adds tabindex to the frames that actually overflow. */
.shot__frame:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Split rows
   -------------------------------------------------------------------------- */

/* minmax(0, …) rather than a bare fr, throughout.
   `1fr` is `minmax(auto, 1fr)`, and that `auto` floor is the track's
   min-content size — so a track containing a fixed-width element grows to fit
   it instead of making it scroll. The panning screenshot frames put a 560px
   image inside these columns on small screens, which pushed the track 220px
   past the page and left the right-hand side of the shot clipped by
   `body { overflow-x: hidden }` and unreachable. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.25rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .split--reverse .split__media { order: -1; }

  /* `order` moves the media into the FIRST track, so a reversed row has to
     swap the track widths too — otherwise whichever column is meant to be
     the wide one silently isn't. */
  .split--reverse { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }

  /* Rows whose media is a screenshot, and only those. A screenshot has a
     width it needs; a pull quote does not, and giving one the larger share
     just leaves the prose beside it wrapping short. */
  .split--shot { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
  .split--shot.split--reverse { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

.split__body p { max-width: 52ch; }

/* --------------------------------------------------------------------------
   Cards & grids
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin-top: 2.75rem;
}

.card {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 1.6rem;
}

.card h3 { margin-bottom: 0.5rem; font-size: 1.075rem; }
.card p { font-size: 0.945rem; margin-bottom: 0; color: var(--dark-text-2); }

.section--light .card {
  background: var(--surface);
  border-color: var(--border-light);
  box-shadow: var(--shadow-soft);
}
.section--light .card p { color: var(--text-secondary); }

/* The quiet platform grid — dense, understated, the "enterprise" proof */
.capability-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 2.75rem;
}

.capability {
  background: var(--obsidian);
  padding: 1.35rem 1.4rem;
}
.capability dt {
  color: var(--dark-text);
  font-weight: 600;
  font-size: 0.975rem;
  margin-bottom: 0.25rem;
}
.capability dd {
  margin: 0;
  font-size: 0.875rem;
  color: var(--dark-text-3);
  line-height: 1.5;
}

/* Stat row */
.stats {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  margin-top: 2.75rem;
  padding-top: 2.25rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.section--light .stats { border-top-color: var(--border); }

.stat-value {
  display: block;
  font-size: clamp(1.85rem, 3.6vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--dark-text);
  line-height: 1.05;
  margin-bottom: 0.35rem;
}
.section--light .stat-value { color: var(--text-primary); }

.stat-label {
  font-size: 0.875rem;
  color: var(--dark-text-3);
  line-height: 1.45;
  display: block;
  max-width: 30ch;
}
/* text-secondary, not text-muted: #64748B on #F0F4F8 measures 4.31:1 and this
   is 14px body-weight text, so it needs 4.5:1. */
.section--light .stat-label { color: var(--text-secondary); }

/* Pull quote */
.pullquote {
  margin: 0;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border-left: 3px solid var(--estate-gold);
  background: rgba(197,160,89,0.05);
  border-radius: 0 14px 14px 0;
}
.pullquote p {
  font-size: clamp(1.15rem, 2.3vw, 1.45rem);
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--dark-text);
  margin-bottom: 0;
  max-width: 40ch;
}
.section--light .pullquote {
  background: rgba(197,160,89,0.09);
  border-left-color: var(--estate-gold);
}
.section--light .pullquote p { color: var(--text-primary); }

/* --------------------------------------------------------------------------
   Early-access call to action
   A mailto, not a form. Nothing is collected by this site at all, which is what
   lets the privacy policy say so in one sentence.
   -------------------------------------------------------------------------- */

.cta {
  background:
    radial-gradient(ellipse 90% 130% at 50% 0%,
      rgba(69,177,232,0.14) 0%, transparent 62%),
    var(--obsidian);
  text-align: center;
}

.cta h2 { max-width: 22ch; margin-inline: auto; }
.cta .lede { max-width: 54ch; margin-inline: auto; }

.mailto-cta { margin-top: 2.5rem; }

.btn--lg {
  padding: 1rem 2rem;
  font-size: 1.05rem;
}

/* The address in plain text as well as behind the button: a mailto: does
   nothing for someone on webmail with no handler registered, and they need
   something they can copy. */
.mailto-cta__address {
  margin: 1.1rem auto 0;
  font-size: 0.95rem;
  color: var(--dark-text-3);
  max-width: none;
}
.mailto-cta__address a {
  color: var(--dark-text-2);
  text-decoration: underline;
  text-decoration-color: rgba(203,213,225,0.4);
  text-underline-offset: 3px;
  word-break: break-word;
}
.mailto-cta__address a:hover { color: var(--dark-text); }

.mailto-cta__note {
  margin: 1.75rem auto 0;
  max-width: 46ch;
  font-size: 0.925rem;
  line-height: 1.6;
  color: var(--dark-text-3);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--dark-bg);
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-block: 3.25rem 2.5rem;
  font-size: 0.9rem;
}

.site-footer__grid {
  display: grid;
  gap: 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  margin-bottom: 2.5rem;
}

.site-footer h2 {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dark-text-3);
  margin-bottom: 0.9rem;
}

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.55rem; }
.site-footer li a { color: var(--dark-text-2); text-decoration: none; }
.site-footer li a:hover { color: var(--dark-text); text-decoration: underline; }

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  color: var(--dark-text-3);
  font-size: 0.85rem;
}
.site-footer__base p { margin: 0; max-width: none; }

/* --------------------------------------------------------------------------
   Legal / long-form document pages
   -------------------------------------------------------------------------- */

.doc {
  padding-block: clamp(3rem, 7vw, 5rem) clamp(4rem, 8vw, 6rem);
}

.doc__header {
  padding-bottom: 2rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}

.doc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.875rem;
  color: var(--dark-text-3);
  margin: 0;
  max-width: none;
}

.doc h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  margin-top: 3rem;
}
.doc h2:first-of-type { margin-top: 0; }

.doc h3 {
  font-size: 1.075rem;
  margin-top: 2rem;
  color: var(--dark-text);
}

.doc ul, .doc ol {
  max-width: var(--measure);
  padding-left: 1.35rem;
  margin: 0 0 1.15rem;
}
.doc li { margin-bottom: 0.55rem; }

.doc dl { max-width: var(--measure); margin: 0 0 1.15rem; }
.doc dt { font-weight: 600; color: var(--dark-text); margin-top: 1rem; }
.doc dd { margin: 0.25rem 0 0; }

.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.94rem;
}
.doc th, .doc td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  vertical-align: top;
}
.doc th { color: var(--dark-text); font-weight: 600; }

.table-scroll { overflow-x: auto; }

/* Callout — used for the draft banner and the security notes */
.callout {
  border: 1px solid rgba(255,255,255,0.12);
  border-left: 3px solid var(--glacier-cyan);
  background: rgba(69,177,232,0.06);
  border-radius: 0 12px 12px 0;
  padding: 1.25rem 1.4rem;
  margin: 0 0 2rem;
  font-size: 0.95rem;
}
.callout > :last-child { margin-bottom: 0; }
.callout strong { color: var(--dark-text); }

.callout--gold {
  border-left-color: var(--estate-gold);
  background: rgba(197,160,89,0.07);
}
.callout--warn {
  border-left-color: var(--warning);
  background: rgba(245,158,11,0.07);
}

.toc {
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  padding: 1.35rem 1.5rem;
  margin-bottom: 2.5rem;
  background: rgba(255,255,255,0.02);
}
.toc h2 {
  font-size: 0.72rem !important;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dark-text-3);
  margin: 0 0 0.85rem !important;
}
.toc ol {
  margin: 0;
  padding-left: 1.2rem;
  columns: 2;
  column-gap: 2rem;
  font-size: 0.925rem;
}
.toc li { margin-bottom: 0.4rem; break-inside: avoid; }
@media (max-width: 640px) { .toc ol { columns: 1; } }

/* --------------------------------------------------------------------------
   Utility pages (email trust page, unsubscribe)
   -------------------------------------------------------------------------- */

.panel {
  background: var(--dark-card);
  border: 1px solid var(--dark-raised);
  border-radius: 16px;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-glass);
}

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.85rem;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.52em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--glacier-cyan);
}
.checklist--warn li::before { background: var(--warning); }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.6rem;
  margin-bottom: 1.35rem;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: -0.1em;
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  background: rgba(69,177,232,0.14);
  border: 1px solid rgba(69,177,232,0.35);
  color: var(--glacier-cyan);
  font-size: 0.82rem;
  font-weight: 600;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}

code, .mono {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 0.12em 0.42em;
  border-radius: 5px;
  font-size: 0.92em;
  word-break: break-word;
}

.print-only { display: none; }
@media print {
  .site-header, .site-footer, .skip-link { display: none; }
  body { background: #fff; color: #000; }
  .doc h1, .doc h2, .doc h3 { color: #000; }
  a { color: #000; }
}