/* =============================================================================
   Aevia — landing site
   =============================================================================

   Every colour here is lifted unchanged from the app's own token system
   (frontend/src/index.css), in the same HSL notation, so the marketing page and
   the product cannot drift apart. The four identity hues sit on one perceptual
   ramp — green 142° (conversation) → teal 178° (knowledge) → azure 200°
   (engines) → blue 221° (workspaces) — and are used ONLY where each hue means
   its section. A hue used decoratively would break the one rule the app's colour
   system is built on.

   Type is the app's three faces: Fraunces (display), Geist (body), JetBrains
   Mono (utility). The mono is load-bearing rather than ornamental — it carries
   refs, units, method names and database descriptors, i.e. the vocabulary a
   practitioner actually reads.

   Structure is a label/value spine: a mono field-name in a narrow left column,
   content in a wide right one. That is how an inventory table and an ISO
   document are laid out, so the page's skeleton is borrowed from the domain
   rather than from a landing-page template.
   ========================================================================== */

/* ---------- Tokens ---------- */

:root {
  /* Ground + ink (app: --background / --foreground) */
  --paper: 0 0% 100%;
  --ink: 150 14% 13%;
  /* Pine-neutral chrome wash (app: --accent) — alternating section grounds */
  --wash: 150 12% 95%;
  --wash-deep: 150 15% 87%;
  /* Hairlines. Deliberately not a grey: a pine-tinted rule keeps the whole
     page in one colour family, which is what makes a near-monochrome page read
     as designed rather than as unstyled. */
  --rule: 150 10% 88%;

  /* Action + the four section identities (app: --primary and the hue ramp) */
  --green: 142 76% 36%;
  --green-deep: 142 72% 28%;
  --teal: 178 55% 38%;
  --azure: 200 64% 34%;
  --blue: 221 60% 42%;

  --muted-ink: 150 8% 42%;

  /* One measure for the whole page, so every section aligns to the same spine */
  --measure: 1140px;
  --spine: 190px;
  --gutter: 56px;

  --font-display: Fraunces, ui-serif, Georgia, Cambria, serif;
  --font-body: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- Reset ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: hsl(var(--paper));
  color: hsl(var(--ink));
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

/* Visible keyboard focus everywhere, in the action colour. */
:focus-visible {
  outline: 2px solid hsl(var(--green));
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Type scale ---------- */

h1,
h2,
h3 {
  font-family: var(--font-display);
  /* Fraunces is a variable face; a low optical size at display sizes keeps the
     serifs crisp rather than letting them bloat. */
  font-variation-settings: "opsz" 120, "SOFT" 20;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.6rem, 6.2vw, 4.5rem);
}

h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
}

h3 {
  font-size: 1.2rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

p {
  margin: 0 0 1.1em;
  text-wrap: pretty;
}

.lede {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  color: hsl(var(--muted-ink));
  max-width: 34em;
}

.note {
  font-size: 0.9rem;
  color: hsl(var(--muted-ink));
}

/* The utility face. Uppercase + tracked, used for field names and metadata. */
.label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: hsl(var(--muted-ink));
}

/* A ref, a unit, a method, a database descriptor — the product's own vocabulary. */
.mono {
  font-family: var(--font-mono);
  font-size: 0.86em;
  font-weight: 500;
}

.term {
  font-family: var(--font-mono);
  font-size: 0.82em;
  font-weight: 500;
  background: hsl(var(--wash));
  border: 1px solid hsl(var(--rule));
  border-radius: 3px;
  padding: 0.1em 0.4em;
  white-space: nowrap;
}

/* ---------- Layout: the spine ---------- */

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

/* label | content. The one structural device on the page. */
.spine {
  display: grid;
  grid-template-columns: var(--spine) minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
}

.spine > .spine-label {
  padding-top: 0.55rem;
  position: sticky;
  top: 92px;
}

section {
  padding: clamp(4rem, 8vw, 7rem) 0;
  border-top: 1px solid hsl(var(--rule));
}

/* The masthead is sticky and 68px tall, so an in-page anchor would otherwise
   scroll its target underneath it — the heading you clicked to reach is the one
   part of the section you cannot see. */
section[id] {
  scroll-margin-top: 84px;
}

section.on-wash {
  background: hsl(var(--wash));
}

/* Sections carry their identity hue on the label only — never as a background
   or a heading colour, which would turn a meaning-bearing ramp into decoration. */
.spine-label .hue {
  display: block;
  width: 22px;
  height: 3px;
  margin-bottom: 12px;
  border-radius: 2px;
  background: hsl(var(--accent-hue, var(--green)));
}

.s-engines {
  --accent-hue: var(--azure);
}
.s-knowledge {
  --accent-hue: var(--teal);
}
.s-workspaces {
  --accent-hue: var(--blue);
}
.s-chat {
  --accent-hue: var(--green);
}

@media (max-width: 860px) {
  .spine {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .spine > .spine-label {
    position: static;
    padding-top: 0;
  }
}

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

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: hsl(var(--paper) / 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid hsl(var(--rule));
}

.masthead .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 68px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40;
  font-weight: 600;
  font-size: 1.32rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  margin-right: auto;
}

.masthead nav {
  display: flex;
  align-items: center;
  /* Stretch to the bar's full height so the links inside can too, which is what
     lets the current-page indicator sit on the bottom rule instead of floating
     at a hand-tuned offset that breaks the moment the bar's height changes. */
  align-self: stretch;
  gap: 22px;
}

/* `:not(.btn)` is load-bearing, not tidiness. `.masthead nav a` has higher
   specificity (0,1,2) than `.btn-primary` (0,1,0), so without the exclusion this
   rule wins on the nav's call-to-action and paints its label muted-grey on green
   — an invisible button, and nothing in the console to say so. */
.masthead nav a:not(.btn) {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
  font-size: 0.95rem;
  text-decoration: none;
  color: hsl(var(--muted-ink));
}

.masthead nav a:not(.btn):hover {
  color: hsl(var(--ink));
}

/* Where you are. `aria-current` carries the state, so the styling and the
   accessibility tree cannot drift apart: there is no separate `.is-active`
   class to forget. `page` marks the page you are on, `location` the section you
   have scrolled into — both look the same, because to a reader they mean the
   same thing. */
.masthead nav a:not(.btn)[aria-current] {
  color: hsl(var(--ink));
}

.masthead nav a:not(.btn)[aria-current]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: hsl(var(--green));
}

/* The nav's call to action is a nav item, not the page's primary button, and it
   was being drawn at the size of one — a slab of green heavy enough to unbalance
   the whole bar. Same colour, one step down in scale. */
.masthead .btn {
  padding: 0.52em 1.05em;
  font-size: 0.9rem;
  border-radius: 6px;
}

@media (max-width: 700px) {
  .masthead nav a.hide-sm {
    display: none;
  }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.97rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.7em 1.25em;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.btn-primary {
  background: hsl(var(--green));
  color: #fff;
}

.btn-primary:hover {
  background: hsl(var(--green-deep));
}

.btn-ghost {
  border-color: hsl(var(--rule));
  color: hsl(var(--ink));
  background: hsl(var(--paper));
}

.btn-ghost:hover {
  border-color: hsl(var(--ink) / 0.35);
}

.btn:active {
  transform: translateY(1px);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 2rem 0 0.9rem;
}

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

.hero {
  border-top: 0;
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.hero h1 {
  max-width: 20ch;
  margin-bottom: 2.4rem;
}

/* The headline spans; beneath it the lede and the call to action share the
   measure. Before this the whole hero was one left column and the right half of
   a 1440px viewport was empty. */
.hero-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.hero-cta {
  padding-top: 0.35rem;
}

/* Full width of its column, deliberately: this is the page's one primary
   action, and spanning the measure is what separates it from the same label
   sitting small in the masthead. */
.hero-cta .btn {
  width: 100%;
  justify-content: center;
  font-size: 1.02rem;
  padding: 0.85em 1.3em;
}

.hero-note {
  margin: 1.1rem 0 0;
}

@media (max-width: 860px) {
  .hero-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
  .hero-cta {
    padding-top: 0;
  }
  /* Once the hero is one column there is no measure left to span, so the button
     would run the full width of the phone. Back to its label. */
  .hero-cta .btn {
    width: auto;
  }
}

/* The one place a hue is allowed on type: the second clause of the headline,
   in the conversation green, because the sentence turns on it. */
.hero h1 em {
  font-style: normal;
  color: hsl(var(--green-deep));
}

/* ---------- Signature: the assembling product system ---------- */

.figure {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border: 1px solid hsl(var(--rule));
  border-radius: 12px;
  background: hsl(var(--paper));
  overflow: hidden;
}

.figure-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid hsl(var(--rule));
  background: hsl(var(--wash));
}

.figure-bar .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: hsl(var(--green));
}

.figure-body {
  padding: 22px 20px 26px;
}

.asked {
  font-family: var(--font-body);
  font-size: 1.02rem;
  margin: 0 0 4px;
}

.asked .who {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: hsl(var(--muted-ink));
  display: block;
  margin-bottom: 6px;
}

/* Desktop graph / mobile list — both real content, each legible on its own
   viewport. One SVG scaled to 360px would put 11px labels at ~5px. */
.graph-wide {
  display: block;
  width: 100%;
  margin-top: 18px;
}

.graph-stack {
  display: none;
}

@media (max-width: 720px) {
  .graph-wide {
    display: none;
  }
  .graph-stack {
    display: block;
    margin-top: 18px;
  }
}

/* --- the animation ---
   Staggered reveal in four beats, matching the real sequence: the question, the
   candidate processes, the links that connect them, the solved result. */

.g-node,
.g-link,
.g-result,
.g-fu {
  opacity: 0;
  animation: fade-in 0.5s ease forwards;
}

.g-node:nth-of-type(1) { animation-delay: 0.35s; }
.g-node:nth-of-type(2) { animation-delay: 0.5s; }
.g-node:nth-of-type(3) { animation-delay: 0.65s; }
.g-node:nth-of-type(4) { animation-delay: 0.8s; }

.g-fu { animation-delay: 1.0s; }

.g-link {
  animation-delay: 1.15s;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: fade-in 0.3s ease forwards, draw 0.75s ease forwards;
}

.g-link.l2 { animation-delay: 1.25s; }
.g-link.l3 { animation-delay: 1.35s; }
.g-link.l4 { animation-delay: 1.45s; }

.g-result { animation-delay: 2.2s; }

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* The floor: motion is an enhancement, the final state is the content. */
@media (prefers-reduced-motion: reduce) {
  .g-node,
  .g-link,
  .g-result,
  .g-fu {
    opacity: 1;
    animation: none;
    stroke-dashoffset: 0;
  }
}

.g-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  fill: hsl(var(--ink));
}

.g-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  fill: hsl(var(--muted-ink));
}

.g-box {
  fill: hsl(var(--paper));
  stroke: hsl(var(--rule));
}

.g-box-fu {
  fill: hsl(var(--wash));
  stroke: hsl(var(--green) / 0.45);
}

.g-edge {
  stroke: hsl(var(--green) / 0.5);
  fill: none;
  stroke-linecap: round;
}

/* Weight legend for the stacked mobile version */
.stack-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid hsl(var(--rule));
}

.stack-row:last-of-type {
  border-bottom: 0;
}

.stack-row .bar {
  height: 6px;
  border-radius: 3px;
  background: hsl(var(--green) / 0.75);
}

.stack-name {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  overflow-wrap: anywhere;
}

.stack-share {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: hsl(var(--muted-ink));
}

/* The resolved answer, in both versions. */
.answer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid hsl(var(--rule));
}

.answer .value {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(var(--green-deep));
}

.answer .unit {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: hsl(var(--ink));
}

.answer .method {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: hsl(var(--muted-ink));
  margin-left: auto;
}

/* ---------- Sequence (a real ordered process, so it is numbered) ---------- */

.steps {
  display: grid;
  gap: 0;
}

.step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 22px;
  padding: 24px 0;
  border-bottom: 1px solid hsl(var(--rule));
}

.step:last-child {
  border-bottom: 0;
}

.step .n {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: hsl(var(--green));
  padding-top: 0.28rem;
}

.step p {
  margin: 0.4rem 0 0;
  color: hsl(var(--muted-ink));
  max-width: 56ch;
}

/* ---------- Generic prose + lists ---------- */

/* The type scale gives every h2 `margin: 0`, so the paragraph that follows has
   to open the gap itself. Three sections carried an inline `margin-top` to do
   that and three did not, so half the headings sat flush against their first
   line. One rule instead, scoped to the marketing spine so the legal pages keep
   their own tighter heading rhythm — and so a section added later inherits the
   spacing rather than having to remember an inline style. */
.spine h2 + p {
  margin-top: 1.1rem;
}

.body-copy {
  max-width: 60ch;
}

.body-copy p:last-child {
  margin-bottom: 0;
}

.ticks {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.ticks li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  font-size: 1rem;
  color: hsl(var(--muted-ink));
}

.ticks svg {
  margin-top: 5px;
  color: hsl(var(--accent-hue, var(--green)));
}

.ticks strong {
  color: hsl(var(--ink));
  font-weight: 500;
}

/* ---------- Callout ---------- */

.callout {
  margin-top: 1.6rem;
  padding: 18px 20px;
  border-left: 3px solid hsl(var(--accent-hue, var(--green)));
  background: hsl(var(--wash));
  border-radius: 0 8px 8px 0;
}

.callout p {
  margin: 0;
  font-size: 0.97rem;
}

.callout p + p {
  margin-top: 0.7em;
}

/* ---------- Screenshot frames ---------- */

/* Screenshot figure.
   The caption sits OUTSIDE the frame. Inside it, bordered and on its own fill,
   it read as a footer bar belonging to the application in the screenshot —
   a caption about the interface that looks like part of the interface. */
.shot {
  margin: 2rem 0 0;
}

.shot-frame {
  border: 1px solid hsl(var(--rule));
  border-radius: 12px;
  overflow: hidden;
  background: hsl(var(--wash));
  box-shadow: 0 1px 2px hsl(var(--ink) / 0.04), 0 12px 32px -12px hsl(var(--ink) / 0.12);
}

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

/* A left rule via border, NOT a grid. `display:grid` here promoted every inline
   child — the <strong>, and each anonymous text run around it — to a grid item,
   so the emphasised phrase was laid out in the 3px rule column and collided with
   the paragraph. Inline content wants inline layout. */
.shot figcaption {
  margin-top: 18px;
  /* The right end of the diagonal. `auto` on the left only bites once the
     viewport is wider than the max-width, so this indents on a desktop and
     quietly does nothing on a phone — no media query needed. The text itself
     stays left-aligned; it is the block that moves, not the rag. */
  margin-left: auto;
  padding-left: 16px;
  border-left: 3px solid hsl(var(--accent-hue, var(--green)) / 0.45);
  font-size: 0.92rem;
  line-height: 1.55;
  color: hsl(var(--muted-ink));
  max-width: 54ch;
}

.shot figcaption strong {
  color: hsl(var(--ink));
  font-weight: 500;
}

/* The figure reads on a diagonal: the question at the left, the answer full
   width beneath it, the reading of that answer indented to the right. Top to
   bottom gives the sequence; left to right gives it direction, so the eye
   travels the path the work took — asked, ran, understood — instead of meeting
   three blocks of equal weight in a stack. Both text blocks keep the same left
   rule, and because they start at different x the stagger is what you notice.

   The prompt is the body face in italic — the only italic anywhere on the site
   — and it needs no label to say what it is: set a step above the surrounding
   copy, in full-strength ink, on a page with no other slanted text, it reads as
   something a person said, and the screenshot below repeats its opening words
   in the chat title. The display serif was tried here first and was wrong: at
   paragraph length its italic is ornament, and this line is a plain request
   typed by someone who is not an expert. It should look like one. */
.shot-prompt {
  margin: 0 0 20px;
  padding-left: 16px;
  border-left: 3px solid hsl(var(--accent-hue, var(--green)) / 0.45);
  max-width: 30em;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.02rem, 1.35vw, 1.14rem);
  line-height: 1.5;
  color: hsl(var(--ink));
  text-wrap: pretty;
}

/* ---------- Pricing ---------- */

.plans {
  display: grid;
  /* 260px, not 290: the spine leaves this column ~894px, and three cards at
     290 plus two gaps needs 910 — so the third wrapped to its own row and left
     a hole beside it. Sized to the ladder it actually has. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.plan {
  border: 1px solid hsl(var(--rule));
  border-radius: 12px;
  padding: 26px 24px 28px;
  background: hsl(var(--paper));
  display: flex;
  flex-direction: column;
}

.plan.featured {
  border-color: hsl(var(--green) / 0.55);
  box-shadow: 0 0 0 1px hsl(var(--green) / 0.18);
}

.plan-name {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 12px 0 4px;
}

.plan-price .amt {
  font-family: var(--font-mono);
  font-size: 2.1rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.plan-price .per {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: hsl(var(--muted-ink));
}

.plan-for {
  font-size: 0.97rem;
  color: hsl(var(--muted-ink));
  margin: 0.5rem 0 0;
  min-height: 3em;
}

.plan .btn {
  margin: 20px 0 22px;
  justify-content: center;
}

.plan-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 0.95rem;
}

.plan-list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: hsl(var(--muted-ink));
}

.plan-list svg {
  margin-top: 4px;
  color: hsl(var(--green));
}

.plan-list li.off {
  color: hsl(var(--muted-ink) / 0.75);
}

.plan-list li.off svg {
  color: hsl(var(--muted-ink) / 0.55);
}

.plan-list strong {
  color: hsl(var(--ink));
  font-weight: 500;
}

.plan-foot {
  margin-top: auto;
  padding-top: 20px;
  font-size: 0.84rem;
  color: hsl(var(--muted-ink));
}

.beta-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: hsl(var(--green-deep));
  background: hsl(var(--green) / 0.1);
  border: 1px solid hsl(var(--green) / 0.3);
  border-radius: 20px;
  padding: 2px 9px;
  vertical-align: 3px;
  margin-left: 8px;
}

/* ---------- FAQ ---------- */

.faq {
  display: grid;
  gap: 0;
}

.faq details {
  border-bottom: 1px solid hsl(var(--rule));
  padding: 18px 0;
}

.faq details:first-child {
  border-top: 1px solid hsl(var(--rule));
}

.faq summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 1.03rem;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::before {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: hsl(var(--green));
  flex: none;
  width: 16px;
}

.faq details[open] summary::before {
  content: "−";
}

.faq details p {
  margin: 12px 0 0 28px;
  color: hsl(var(--muted-ink));
  max-width: 62ch;
}

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

footer {
  border-top: 1px solid hsl(var(--rule));
  padding: 48px 0 56px;
  background: hsl(var(--wash));
}

.foot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  align-items: flex-start;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.foot-links a {
  font-size: 0.92rem;
  color: hsl(var(--muted-ink));
  text-decoration: none;
}

.foot-links a:hover {
  color: hsl(var(--ink));
  text-decoration: underline;
}

.foot-legal {
  font-size: 0.84rem;
  color: hsl(var(--muted-ink));
  margin: 26px 0 0;
  max-width: 62ch;
}

/* ---------- Legal pages ---------- */

.doc {
  max-width: 74ch;
  padding: clamp(3rem, 6vw, 4.5rem) 0 5rem;
}

.doc h1 {
  font-size: clamp(2.1rem, 4vw, 3rem);
  margin-bottom: 0.8rem;
}

.doc h2 {
  font-size: 1.35rem;
  margin: 2.4rem 0 0.7rem;
  letter-spacing: -0.01em;
}

.doc h2:first-of-type {
  margin-top: 2rem;
}

.doc .updated {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: hsl(var(--muted-ink));
  margin-bottom: 2rem;
}

.doc p,
.doc li {
  color: hsl(var(--ink) / 0.86);
}

.doc ul {
  padding-left: 1.15rem;
  margin: 0 0 1.1em;
}

.doc li {
  margin-bottom: 0.5em;
}

/* A drafting placeholder the reader can see, so nothing reads as final when it
   is not. Removed once the SpA is registered and the details are filled in. */
.tbd {
  font-family: var(--font-mono);
  font-size: 0.8em;
  font-weight: 500;
  background: hsl(38 92% 50% / 0.14);
  border: 1px solid hsl(38 92% 40% / 0.35);
  border-radius: 3px;
  padding: 0.08em 0.4em;
}

.doc-banner {
  margin: 0 0 2rem;
  padding: 14px 18px;
  border-left: 3px solid hsl(38 92% 50%);
  background: hsl(38 92% 50% / 0.08);
  border-radius: 0 8px 8px 0;
  font-size: 0.94rem;
}

.doc-banner p {
  margin: 0;
}


/* ---------- Plans page ---------- */

/* The credit explainer: three short definitions, read before the cards so the
   unit on them means something. Not a table — a table implies comparison
   between the rows, and these are one idea in three steps. */
.credit-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 26px;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid hsl(var(--rule));
}

.credit-notes h3 {
  margin-bottom: 0.45rem;
}

.credit-notes p {
  margin: 0;
  font-size: 0.95rem;
  color: hsl(var(--muted-ink));
}

.plan-note {
  margin: 2rem 0 0;
  font-size: 0.9rem;
  color: hsl(var(--muted-ink));
  max-width: 66ch;
}