/*
 * cleatbox public site (module spec 33, slice 33A).
 *
 * The design language is module 06's, transcribed: deep purple-black, purple for identity and
 * structure, and GREEN RESERVED FOR ACTIONS. Green is the scarcest resource here as it is in the
 * app — at most one filled green button per screenful. When everything is highlighted, nothing is.
 *
 * Hand-written, no framework and no build step: the whole file is a few kilobytes, which is the
 * entire reason DECISIONS D3 wanted a lightweight site rather than Flutter Web for public pages.
 * Inter is self-hosted next to this file — no font request ever leaves for a third party.
 */

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Regular.4145168e5230.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Medium.a6f54808ec0a.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

:root {
  --bg: #0d0a1a;
  --bg-elevated: #120e22;
  --surface: #17122b;
  --surface-hover: #1e1836;
  --border: #2a2344;
  --border-strong: #3d3363;
  --primary: #533ab7;
  --primary-soft: #a78bfa;
  --on-primary: #ffffff;
  --accent: #22c55e;
  --on-accent: #0d0a1a;
  --text: #f4f2fb;
  --text-secondary: #b6afd4;
  --text-muted: #8b83ad;
  --radius-card: 10px;
  --radius-control: 8px;
  --wrap: 1120px;
  --wrap-narrow: 720px;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3 { font-weight: 500; line-height: 1.2; margin: 0 0 0.5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; }

a { color: var(--primary-soft); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.muted { color: var(--text-secondary); }
.center { text-align: center; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--on-accent);
  padding: 10px 16px;
  z-index: 100;
}
.skip:focus { left: 8px; top: 8px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: var(--wrap-narrow); }
.section { padding: clamp(40px, 6vw, 76px) 0; }
.section-heading { text-align: center; }
.section-intro {
  text-align: center;
  color: var(--text-secondary);
  max-width: 620px;
  margin: 0 auto 2.5rem;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--primary-soft);
  margin-bottom: 0.75rem;
}
.lead { color: var(--text-secondary); font-size: 1.08rem; }

/* --- buttons. Filled green = the ONE primary action. --------------------------------------- */

.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.75rem; }
.hero--centred .button-row, .cta .button-row, .center .button-row { justify-content: center; }

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--radius-control);
  font-weight: 500;
  font-size: 0.98rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: #16a34a; }
.btn-ghost { border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover { background: var(--surface-hover); }

.link-arrow { color: var(--primary-soft); font-weight: 500; }
.link-arrow::after { content: " \2192"; }

/* --- header ------------------------------------------------------------------------------- */

.preview-bar {
  background: #f5c044;
  color: #1b1731;
  text-align: center;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 500;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13, 10, 26, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: linear-gradient(140deg, var(--primary) 0%, var(--accent) 165%);
  flex: none;
}
.brand-word { font-weight: 500; font-size: 1.12rem; letter-spacing: -0.02em; }

.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav a { color: var(--text-secondary); font-size: 0.95rem; }
.site-nav a:hover { color: var(--text); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--text); }
.nav-signin {
  border: 1px solid var(--border-strong);
  padding: 8px 16px;
  border-radius: var(--radius-control);
  color: var(--text) !important;
}
.nav-signin:hover { background: var(--surface-hover); }

.nav-toggle, .nav-button { display: none; }

@media (max-width: 820px) {
  .nav-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0 9px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    cursor: pointer;
  }
  .nav-button span { display: block; height: 2px; background: var(--text); border-radius: 2px; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    padding: 8px 24px 20px;
  }
  .site-nav a { padding: 12px 0; border-bottom: 1px solid var(--border); }
  .nav-signin { margin-top: 14px; text-align: center; border-bottom: none; }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .header-inner { position: relative; }
}

/* --- hero --------------------------------------------------------------------------------- */

.hero { padding-top: clamp(56px, 9vw, 108px); }
.hero-inner { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero--split .hero-inner { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  /* Two columns only when there is genuinely something to put in the second one. A hero with
     no screenshot yet must not reserve half the page for the absence of it. */
  .hero--split:not(.hero--no-image) .hero-inner { grid-template-columns: 1.05fr 1fr; }
}
.hero--centred .hero-inner { justify-items: center; text-align: center; }
.hero--centred .hero-copy { max-width: 760px; }
/* Until screenshots exist, a centred hero is mostly empty space below the fold. */
.hero--centred.hero--no-image { padding-bottom: clamp(24px, 4vw, 48px); }
.hero-copy .lead { font-size: 1.16rem; max-width: 56ch; }
.hero--centred .hero-copy .lead { margin-left: auto; margin-right: auto; }
.hero-media img {
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* --- cards / feature grid ------------------------------------------------------------------ */

.card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px;
}
.card h3 { margin-bottom: 0.35em; }
.card p { margin: 0; }

/* --- icons (slice 33F) ---------------------------------------------------------------------- */

/* One 24x24 grid, one stroke weight, inheriting currentColor — see website/icons.py. Sized in
   `em` so an icon beside a heading and an icon beside a list line stay in proportion with the
   text they belong to rather than with each other. */
.icon { width: 1em; height: 1em; display: block; }
.card-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-control);
  background: rgba(83, 58, 183, 0.28);
  border: 1px solid var(--border-strong);
  color: var(--primary-soft);
  margin-bottom: 16px;
}
.card-icon .icon { width: 20px; height: 20px; }

/* --- spotlight ----------------------------------------------------------------------------- */

.spotlight-inner { display: grid; gap: clamp(28px, 5vw, 60px); align-items: center; }
@media (min-width: 900px) {
  .spotlight:not(.spotlight--no-image) .spotlight-inner { grid-template-columns: 1fr 1fr; }
  .spotlight--image_left .spotlight-copy { order: 2; }
}
/* No screenshot: centre it and read as a text section. Left-aligned narrow copy with a wide
   empty gutter beside it looks like a layout that failed, not one that was chosen. */
.spotlight--no-image { padding-top: clamp(28px, 4vw, 52px); padding-bottom: clamp(28px, 4vw, 52px); }
.spotlight--no-image .spotlight-inner { justify-items: center; text-align: center; }
.spotlight--no-image .spotlight-copy { max-width: 760px; }
.spotlight--no-image .lead { max-width: 66ch; margin-left: auto; margin-right: auto; }
.spotlight-media img {
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--surface);
}

/* --- steps --------------------------------------------------------------------------------- */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; counter-reset: step; }
.step {
  display: flex;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 22px;
}
.step-number {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  display: grid;
  place-items: center;
  font-weight: 500;
  font-size: 0.92rem;
}
.step-body h3 { margin-bottom: 0.3em; }
.step-body p:last-child { margin-bottom: 0; }
/* Capped, and the cap is the point: every screenshot on this site is a PHONE screenshot, and at
   its natural width one fills a step card and pushes the words nobody would then read off the
   top of the screen. A guide is instructions with a picture beside them, not a picture with a
   caption. */
.step-image {
  margin-top: 16px;
  max-width: min(100%, 300px);
  border-radius: var(--radius-control);
  border: 1px solid var(--border);
}

/* --- faq ----------------------------------------------------------------------------------- */

.faq { display: grid; gap: 10px; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 4px 20px;
}
.faq-item summary {
  cursor: pointer;
  padding: 16px 0;
  font-weight: 500;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--primary-soft); font-size: 1.3rem; line-height: 1; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-answer { padding-bottom: 16px; color: var(--text-secondary); }
.faq-answer p:last-child { margin-bottom: 0; }

/* --- cta ----------------------------------------------------------------------------------- */

.cta-card {
  background: linear-gradient(150deg, var(--surface) 0%, rgba(83, 58, 183, 0.22) 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  padding: clamp(32px, 6vw, 64px);
  text-align: center;
}
.cta-card .lead { max-width: 52ch; margin-left: auto; margin-right: auto; }

/* --- pricing (slice 33C) -------------------------------------------------------------------- */

/* Flex-wrap rather than a grid, and this is not a stylistic preference — it is the fix for a
   layout fault found by looking at the page.
   The owner can add, hide or delete a tier whenever they like, so the number of cards is not
   knowable here. A grid of auto-fit columns leaves EMPTY SLOTS whenever the count does not divide
   into the column count: five tiers at desktop width rendered as four across and then a lone
   orphan with three blank spaces beside it, which reads exactly like a page that failed to load.
   A wrapping flex row cannot do that — whatever is on the last row grows to fill it, so five
   tiers are four across and one full-width strip underneath, which is what a "talk to us" tier
   should look like anyway. Any other count lays out just as well. */
.plan-grid {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: stretch;
}
.plan {
  flex: 1 1 210px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
}
.plan--featured { border-color: var(--border-strong); background: var(--surface-hover); }
.plan-flag {
  margin: 0 0 12px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-soft);
}
.plan-name { margin: 0; font-size: 1.15rem; }
.plan-size { margin: 4px 0 0; font-size: 0.92rem; color: var(--text-muted); }
.plan-price { margin: 18px 0 0; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.plan-amount { font-size: clamp(1.7rem, 3.4vw, 2.1rem); font-weight: 500; letter-spacing: -0.02em; }
.plan-period { font-size: 0.92rem; color: var(--text-secondary); }
/* The second number. Deliberately quieter than the annual one and never hidden behind a toggle
   — the owner's choice (2026-07-26) was both numbers visible on every card. */
.plan-monthly { margin: 4px 0 0; font-size: 0.9rem; color: var(--text-muted); }
.plan-blurb { margin: 16px 0 0; font-size: 0.95rem; color: var(--text-secondary); }
.plan-features { margin: 16px 0 0; padding-left: 1.1rem; font-size: 0.92rem; color: var(--text-secondary); }
.plan-features li { margin-bottom: 0.3rem; }
/* margin-top:auto pins every button to the bottom of its card, so a tier with a longer blurb
   does not leave the row of buttons looking like a mistake. */
.plan-action { margin: 22px 0 0; padding-top: 4px; margin-top: auto; }
/* Full width of an ordinary card, but capped: the last row's cards grow to fill it (see
   .plan-grid), and an uncapped button on a card that stretched across the whole page would be a
   metre of green. */
.plan-action .btn { width: 100%; max-width: 260px; justify-content: center; }
.pricing-footnote {
  margin: 2rem auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.included-grid {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 14px 28px;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.included { border-top: 1px solid var(--border); padding-top: 14px; }
/* The icon sits on the heading's own line rather than above it: this is a scannable list of a
   dozen, and a tile per row would turn it into a dozen cards. */
.included h3 { margin: 0 0 0.3em; font-size: 1rem; display: flex; align-items: center; gap: 10px; }
.included p { margin: 0; font-size: 0.92rem; }
.included-icon { display: inline-grid; place-items: center; color: var(--primary-soft); flex: none; }
.included-icon .icon { width: 18px; height: 18px; }

/* --- comparison table ---------------------------------------------------------------------- */

/* The wrapper scrolls, not the page: a wide table inside a page body that scrolls sideways is
   the single most common way a phone layout breaks. */
.compare-scroll { margin-top: 2.25rem; overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; text-align: left; }
.compare th, .compare td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  font-size: 0.95rem;
}
.compare thead th {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom-color: var(--border-strong);
}
.compare tbody th { font-weight: 500; color: var(--text); width: 28%; }
.compare td { color: var(--text-secondary); }
.compare .compare-us { color: var(--text); background: rgba(83, 58, 183, 0.12); }
.compare thead .compare-us { color: var(--primary-soft); }

@media (max-width: 700px) {
  /* Restack each row as a small card. The header row goes away and each cell carries its column
     heading from the data-label attribute, so the "today" and "cleatbox" values stay
     distinguishable without a header to line up against. */
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    margin-bottom: 12px;
    padding: 6px 4px;
  }
  .compare tbody th { width: auto; border-bottom: none; padding-bottom: 4px; }
  .compare td { border-bottom: none; padding-top: 6px; }
  .compare td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 3px;
  }
  .compare .compare-us { background: none; }
}

/* Present for a screen reader, absent on screen — the comparison table's first column has no
   visible heading, because "What it is" over a list of scenarios is noise for a sighted reader
   and a missing column name for everyone else. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- prose (legal, long-form) --------------------------------------------------------------- */

.prose { color: var(--text-secondary); }
/* Long-form text reads left-aligned; a centred heading over a left-aligned body looks like
   two different sections stuck together. */
.prose .section-heading { text-align: left; }
.prose h3 { color: var(--text); margin-top: 2rem; }
.prose ul { padding-left: 1.25rem; margin: 0 0 1rem; }
.prose li { margin-bottom: 0.4rem; }

/* Consecutive long-form sections are ONE document, not several (slice 33G). The section gap is
   sized for a hero meeting a feature grid; repeated eight times down a privacy policy it reads
   as eight unrelated pages stacked up. Only the gap BETWEEN two prose sections closes, so the
   first one under a hero keeps its full space. */
.section--prose + .section--prose { padding-top: 0; }
.section--prose + .section--prose .section-heading { margin-top: 0; }

/* --- the interest form (slice 33D) ----------------------------------------------------------- */

.access h2 { margin-top: 0; }
.access .lead { max-width: 60ch; }

/* The honeypot. Hidden from people and from screen readers, left in the document for a bot to
   find. Deliberately NOT `display: none` — some field-filling bots skip anything with that, and
   the whole trick depends on this looking like an ordinary input to a machine. Absolute
   positioning off-canvas, with `left` rather than `text-indent`, so it cannot widen the page. */
.access-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.access-signup {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 24px;
  margin-bottom: 32px;
  text-align: center;
}
.access-signup .button-row { margin-top: 0; }
.access-signup p:last-child { margin-bottom: 0; }

.access-form {
  position: relative;
  margin-top: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: clamp(20px, 4vw, 32px);
}

.access-field { margin-bottom: 20px; }
.access-field label {
  display: block;
  font-weight: 500;
  font-size: 0.95rem;
  margin-bottom: 6px;
}
.access-req { color: var(--primary-soft); }
.access-field input,
.access-field textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  padding: 11px 13px;
}
.access-field textarea { resize: vertical; min-height: 120px; }
.access-field input:focus-visible,
.access-field textarea:focus-visible {
  outline: 2px solid var(--primary-soft);
  outline-offset: 1px;
  border-color: var(--primary-soft);
}
.access-help {
  display: block;
  margin-top: 6px;
  font-size: 0.86rem;
  color: var(--text-muted);
}

/* Errors are stated in words and marked with colour, never with colour alone. */
.access-field--error input,
.access-field--error textarea { border-color: #f87171; }
.access-error,
.access-errors {
  display: block;
  color: #fca5a5;
  font-size: 0.9rem;
}
.access-error { margin-top: 6px; }
.access-errors {
  margin: 0 0 20px;
  padding: 12px 14px 12px 32px;
  border: 1px solid #7f1d1d;
  border-radius: var(--radius-control);
  background: rgba(127, 29, 29, 0.25);
}

.access-actions { margin: 24px 0 0; }
.access-note { font-size: 0.86rem; margin-bottom: 0; }

/* While the browser is sending. Not a safety mechanism — the guard is the submit handler — just
   the feedback a person needs so they do not press it again. */
.access-form--sending { opacity: 0.65; }
.access-form--sending button { pointer-events: none; }

.access-done {
  border: 1px solid var(--accent);
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: clamp(24px, 5vw, 40px);
  text-align: center;
}
.access-done .lead { margin-left: auto; margin-right: auto; max-width: 52ch; }

/* --- guides, quote, logos (slice 33F) -------------------------------------------------------- */

.guide-group + .guide-group { margin-top: 2.5rem; }
.guide-group-heading { font-size: 1.05rem; color: var(--primary-soft); margin-bottom: 0.9rem; }
.guide-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
/* Two columns once there is room. A guide entry is a title and one line, and a single column of
   those across 1120px is a row of mostly empty box. Two columns is safe whatever the count —
   unlike the plan cards, an odd one out here is a half-width box beside a gap, not a lone
   full-width strip. */
@media (min-width: 820px) {
  .guide-list { grid-template-columns: 1fr 1fr; }
}
/* The whole row is the link, not just the title — a one-line summary underneath is exactly the
   thing a thumb aims at, and a 44px-tall target is the difference between usable and not. */
.guide-link {
  display: block;
  /* Fills its grid cell, so two cards side by side end level even when one summary wraps and
     the other does not. Without it the row reads as a mistake rather than as a pair. */
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  color: var(--text);
}
.guide-link:hover { background: var(--surface-hover); border-color: var(--border-strong); text-decoration: none; }
.guide-name { display: block; font-weight: 500; }
.guide-summary { display: block; margin-top: 4px; font-size: 0.93rem; }
/* Only ever seen in the back-office preview — see website/guides.py. */
.guide-flag {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--text-muted);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-control);
  padding: 2px 8px;
}

.quote-card {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  padding: clamp(24px, 5vw, 40px);
}
.quote-card blockquote { margin: 0; font-size: 1.12rem; color: var(--text); }
.quote-card figcaption { margin-top: 18px; font-size: 0.95rem; }
.quote-who { font-weight: 500; }
.quote-role { display: block; margin-top: 2px; font-size: 0.9rem; }

/* Flex-wrap rather than a grid, the same lesson the pricing cards taught: the number of badges
   is owner-controlled, and auto-fit columns leave a lone orphan with empty slots beside it. */
.logo-row {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 28px 40px;
  align-items: center;
  justify-content: center;
}
.logo-item img { display: block; max-height: 52px; width: auto; opacity: 0.85; }

/* --- the draft marker and its placeholders (slice 33G) --------------------------------------- */

/* The banner is amber rather than red on purpose: nothing is broken and nothing is dangerous —
   the wording just is not final yet. Red on a privacy policy reads as a warning about the
   product. It borrows the preview bar's colour because it is the same kind of statement ("what
   you are looking at is not the finished thing"), but it sits INSIDE the page rather than above
   the header, because it belongs to this page and the preview bar belongs to the whole site. */
.notice {
  margin: 0;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.notice--draft { background: rgba(245, 192, 68, 0.12); border-bottom-color: rgba(245, 192, 68, 0.4); }
/* An information notice has no Draft tag to carry it, so without an accent it is `--bg-elevated`
   on `--bg` — two shades of near-black a hairline apart, which on this dark-only palette is not
   a banner at all, just a paragraph that starts oddly high up the page. */
.notice--info { background: var(--bg-elevated); border-left: 3px solid var(--primary); }
.notice-heading { margin: 0; font-weight: 600; color: var(--text); }
.notice-body { margin: 6px 0 0; color: var(--text-secondary); font-size: 0.95rem; }
.notice-tag {
  display: inline-block;
  background: #f5c044;
  color: #1b1731;
  border-radius: 4px;
  padding: 1px 7px;
  margin-right: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  /* Nudged up so the cap-height of the tag lines up with the sentence beside it. */
  vertical-align: 1px;
}

/* A gap in the words themselves — the legal entity, the governing state, a contact address that
   has not been set. Marked in the flow of the text so it cannot be skimmed past, and with a
   dashed rule rather than a colour alone, because "the yellow one is unfinished" is not a
   distinction everybody can see. */
.placeholder {
  border-left: 3px dashed #f5c044;
  background: rgba(245, 192, 68, 0.07);
  padding: 10px 14px;
  margin: 1rem 0;
  color: var(--text);
}

.contact-address { font-size: 1.05rem; font-weight: 500; }

/* --- footer -------------------------------------------------------------------------------- */

.site-footer { border-top: 1px solid var(--border); background: var(--bg-elevated); margin-top: 40px; }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  padding-top: 48px;
  padding-bottom: 32px;
}
.footer-brand p { margin: 8px 0 0; font-size: 0.95rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.footer-links a { color: var(--text-secondary); font-size: 0.95rem; }
.footer-legal { border-top: 1px solid var(--border); padding-top: 20px; padding-bottom: 32px; }
.footer-legal p { margin: 0; font-size: 0.88rem; color: var(--text-muted); }