/* ============================================================================
   flatpages.css — the small amount of CSS the generated flat pages need
   beyond css/theme.css.

   Deliberately tiny. No new palette, no new type scale, no new component
   vocabulary: every value below resolves to a token already defined in
   theme.css. If a rule here starts growing, it belongs in theme.css instead.
   ============================================================================ */

/* Last-updated stamp under the hero lede. Legal and trust pages live or die
   on having a visible effective date. */
.hero .updated {
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Label above a terminal block, so a reader knows what they are about to run
   before they read it. */
.term-label {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}

/* Closing call-to-action band. Uses the sunken surface so it reads as a
   boundary rather than another section. */
.cta-band {
  background: var(--s2);
  border: 1px solid var(--bdr);
  border-radius: var(--r, 12px);
  padding: clamp(28px, 4vw, 48px);
  text-align: center;
}
.cta-band h2 { margin-top: 0; }
.cta-band .lede { margin-left: auto; margin-right: auto; max-width: 56ch; }
.cta-band .cta-row { justify-content: center; margin-top: 22px; }

/* Cards used as a definition grid on features/tools/integrations pages.
   theme.css styles .card; this only keeps headings from crowding the copy. */
.card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 8px;
}
.card p { margin: 0; }

/* Legal pages are long and read top to bottom: give the section headings a
   little more air than the marketing pages need, and make deep links land
   somewhere readable rather than under the sticky header. */
.section h2 { scroll-margin-top: 84px; }

/* Tables on the legal pages carry a lot of short cells; keep them legible
   when a cell wraps to two lines. */
.section table td { vertical-align: top; }

/* foundation.css sets `overflow-wrap: anywhere` on td/th as a global overflow
   guard. Inside a table that is actively harmful: `anywhere` participates in
   min-content sizing, so the table algorithm believes a column can be one
   character wide and happily renders "LOCATION" as "LOCAT / ION".
   `break-word` still rescues a genuinely oversized word but does NOT shrink
   the intrinsic minimum, so columns get their natural width back. */
.section :is(td, th) { overflow-wrap: break-word; }

/* Short header labels should never wrap at all. */
.section th { white-space: nowrap; }
@media (max-width: 720px) {
  .section th { white-space: normal; }
}

/* Wide tables bleed past the text measure instead of widening their section.
   Putting the whole section in .container-wide also drags its <h2> 100px left
   of every other heading on the page, which reads as a layout bug; this keeps
   every heading on one vertical line and lets only the table breathe.

   .container is --maxw (720) with 20px inline padding, so the text measure is
   680. Bleeding to --maxw-wide (1120) less the same padding gives 1080, i.e.
   200px of negative margin on each side. Only applied once the viewport can
   actually afford it. */
@media (min-width: 1180px) {
  .section .table-scroll {
    width: calc(var(--maxw-wide) - 40px);
    /* foundation.css caps scroll containers at 100% of the parent, which would
       clamp the bleed straight back to the text measure. */
    max-width: none;
    /* Division by a negative is not valid in calc(); negate the numerator. */
    margin-inline: calc((var(--maxw) - var(--maxw-wide)) / 2);
  }
}
/* Two-column tables read better inside the text measure; opt out of the bleed. */
@media (min-width: 1180px) {
  .section .table-scroll.narrow { width: auto; margin-inline: 0; }
}

/* theme.css lays the footer out as `1.4fr 1fr 1fr 1fr` — brand plus three link
   columns. These pages carry five (Product, Developers, Company, Trust, Legal),
   so on a wide viewport give it six tracks instead of letting two wrap onto a
   second row underneath the brand blurb. */
@media (min-width: 1040px) {
  footer.site .inner {
    grid-template-columns: 1.6fr repeat(5, 1fr);
    gap: 32px 28px;
  }
}

/* Colour swatches for the design-system page. A page that documents a palette
   has to show the palette. */
.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 24px 0;
  padding: 0;
  list-style: none;
}
.swatch {
  border: 1px solid var(--bdr);
  border-radius: var(--r-sm, 8px);
  overflow: hidden;
  background: var(--s1);
}
.swatch .chip {
  display: block;
  height: 64px;
  border-bottom: 1px solid var(--bdr);
}
.swatch .meta {
  padding: 9px 11px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
}
.swatch .name { color: var(--ink); display: block; }
.swatch .hex { color: var(--ink-3); display: block; text-transform: uppercase; }
.swatch .use { color: var(--ink-3); display: block; font-family: var(--font-sans);
               font-size: 11.5px; margin-top: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .cta-band { transition: border-color .25s var(--ease, ease); }
}

/* ── request-access form (waitlist.html) ─────────────────────────────── */
form.lead{max-width:640px;margin:8px 0 22px}
form.lead .frow{margin-bottom:14px}
form.lead .frow.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){form.lead .frow.two{grid-template-columns:1fr}}
form.lead label{display:block;font-size:13px;font-weight:500;color:var(--ink-2,#3a3750)}
form.lead label .opt{font-weight:400;color:var(--ink-3,#77748c)}
form.lead input,form.lead select,form.lead textarea{display:block;width:100%;margin-top:6px;padding:11px 12px;font:inherit;font-size:15px;color:var(--ink,#14121f);background:var(--bg-card,#fff);border:1px solid var(--bdr,#e4e1f0);border-radius:8px;min-height:44px}
form.lead input:focus,form.lead select:focus,form.lead textarea:focus{outline:2px solid var(--ac,#604CF7);outline-offset:1px;border-color:var(--ac,#604CF7)}
form.lead .cta-row{margin-top:6px}
.assent-notice{margin:14px 0 0;font-size:14px;line-height:1.55;color:var(--ink-2,#3a3750)}
.assent-notice a{color:var(--ac,#604CF7);text-decoration:underline;font-weight:500}
.form-err{margin:12px 0 0;color:#b42318;font-size:14px}

/* ── verify.html tool ────────────────────────────────────────────────── */
.verify-tool label{display:block;font-size:13px;font-weight:500;color:var(--ink-2,#3a3750);margin:10px 0 6px}
.verify-tool label .opt{font-weight:400;color:var(--ink-3,#77748c)}
.verify-tool textarea{width:100%;font:13px/1.5 var(--font-mono,ui-monospace,Menlo,monospace);padding:10px 12px;border:1px solid var(--bdr,#e4e1f0);border-radius:8px;background:var(--bg-card,#fff);color:var(--ink,#14121f);resize:vertical}
.verify-tool textarea:focus{outline:2px solid var(--ac,#604CF7);outline-offset:1px}
.vt-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:22px}
@media (max-width:760px){.vt-grid{grid-template-columns:1fr}}
.vt-trust label.radio{display:flex;gap:8px;align-items:flex-start;font-weight:400;font-size:14px;margin:0 0 8px}
.vt-trust input{margin-top:3px;flex:0 0 auto}
.vt-samples{display:flex;flex-wrap:wrap;gap:6px}
.vt-samples .btn.sm{font-size:12px;padding:6px 10px;min-height:32px;font-family:var(--font-mono,ui-monospace,monospace)}
.verify-tool .cta-row{margin-top:18px}
.vt-out{margin-top:22px;border:1px solid var(--bdr,#e4e1f0);border-radius:12px;padding:18px;background:var(--bg-card,#fff)}
.vt-verdict{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;margin-bottom:12px}
.vt-verdict .pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;letter-spacing:.08em;border:1px solid currentColor}
.vt-verdict.ok .pill{color:#157347;background:#e8f6ee}.vt-verdict.no .pill{color:#b42318;background:#fdecea}
.vt-out .kv .kv-row{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:6px 0;border-top:1px solid var(--bdr,#e4e1f0);font-size:14px}
.vt-out .kv .kv-row .k{color:var(--ink-3,#77748c);font-family:var(--font-mono,ui-monospace,monospace);font-size:12px}
.vt-out .kv .kv-row .v{overflow-wrap:anywhere}
.vt-out details{margin-top:12px}.vt-out summary{cursor:pointer;font-size:13px;color:var(--ink-3,#77748c)}
.muted{color:var(--ink-3,#77748c);font-size:13px}
.form-intro{margin:0 0 14px;font-size:15px;color:var(--ink-2,#3a3750)}

/* theme.css gives .hero `padding: 44px 0 8px`, which also zeroes the inline
   padding when .hero sits on the container itself. The hero text then starts
   32px left of every section below it. Restore the container's gutter. */
:is(.container, .container-wide, .container-narrow).hero {
  padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) {
  :is(.container, .container-wide, .container-narrow).hero {
    padding-inline: max(32px, env(safe-area-inset-left, 0px)) max(32px, env(safe-area-inset-right, 0px));
  }
}

/* Links inside running text must not rely on colour alone (WCAG 1.4.1,
   axe link-in-text-block). Buttons and card titles keep their own style. */
main :is(p, li, td, dd, .callout, .empty, .note) a:not(.btn):not(.cta) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
/* Scroll containers get keyboard focus (tabindex=0 in the markup); show it. */
.table-scroll:focus-visible, pre:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }

/* WCAG 2.2 target size (24 x 24 minimum) for header links and the brand mark. */
.nav a, a.brand { min-height: 24px; display: inline-flex; align-items: center; }