/* §689 / §692 — the marketing design system.
 *
 * §689 extracted it from business/AutoFillPortal_Homepage_v2.html, which carried the
 * whole system in one <style> block. §692 rebuilt it on the published palette and
 * turned it dark.
 *
 * LOADED ONLY BY templates/base_site.html, never by base.html, and always AFTER
 * static/afp-tokens.css. That separation is the mechanism behind "do not restyle
 * signed-in app surfaces": /account, /account/profile, /onboarding, /welcome, /login
 * and /signup extend base.html directly and never see this file. A test pins the
 * split (tests/test_site_shell_scope_689.py) so a later window cannot widen it by
 * accident. Every rule here is scoped `body.site` for the same reason -- the class
 * comes from base_site.html's body_class block and nothing else sets it.
 *
 * IT OVERRIDES base.html's TOKENS RATHER THAN REPLACING ITS RULES. Every marketing
 * page carries its own <style> block written against base.html's variable names
 * (--green, --muted, --border, --white, --bg, --r). Re-pointing those tokens moves
 * all of it onto the palette without touching a single page's own CSS, which is why
 * this conversion is a token change plus a component sweep rather than seven
 * rewrites. The re-point table is the first block below and it is the load-bearing
 * part of the file.
 *
 * =============================================================================
 * DARK CHROME, LIGHT CONTENT.  §692 U5.
 * =============================================================================
 * Dark is the DEFAULT presentation, not an alternate scheme. The business card, the
 * hero and the brand are navy; the pages used to drop to white below the fold, and
 * that was the incoherence. The alternating section rhythm stays -- it just moves
 * from white/paper to --navy/--navy-2.
 *
 * THE EXCEPTION, and it is deliberate rather than an oversight: ANYTHING THAT
 * DEPICTS A DOCUMENT STAYS LIGHT. A permit form is white paper. The homepage's
 * three-state mock is a picture of one, so it keeps its white card, its light field
 * boxes and the ON-LIGHT semantic variants (--filled, --check on --check-bg,
 * --needs-you-line). The demo slot keeps a light frame for the same reason: the
 * recording it will hold is a white form. Darkening either would be a picture of a
 * document that does not exist.
 *
 *     The document is the subject; the site is the frame around it.
 *
 * Everything inside `.doc-light` below is that exception, in one block, so a future
 * window can see the boundary rather than infer it.
 *
 * =============================================================================
 * DARK ONLY. `prefers-color-scheme: light` IS NOT HONOURED, AND THAT IS A DECISION.
 * =============================================================================
 * U5 said to honour it only if it came essentially free from the token structure. It
 * does not, and the reason is specific rather than a shrug: the light arm would need
 * its own values for --white, --bg, --border, --muted, --text, --green-light and
 * --green-dark (the re-point table below), its own button treatment (a white pill on
 * navy is invisible on white), its own input fill, AND its own section rhythm --
 * which is a second full set of rules to keep in step, on a marketing site, for one
 * person. So: dark only, `color-scheme: dark` declared so the browser paints form
 * controls and scrollbars to match, and this paragraph rather than a half-built
 * second scheme that rots.
 *
 * =============================================================================
 * THE COLOUR RULE. Stated in full in static/afp-tokens.css; the short form:
 * green / amber / grey-blue may ONLY indicate a field's answer state. No green
 * buttons, no green gradients, no green links, no green decoration. On this dark
 * page a PRIMARY action is a white pill with navy text, and a secondary action is
 * an outline. That is why every `background: var(--green)` control in this system
 * was rewritten below rather than re-tinted.
 * ===========================================================================*/

/* ── the re-point table ──────────────────────────────────────────────────────
   These are base.html's token names, re-aimed for the dark page. Everything a
   marketing template already wrote as var(--muted) / var(--white) / var(--bg)
   lands correctly with no per-page edit. The four `--green*` entries are the
   interesting ones: --green was an ACCENT, and on this page an accent may not be
   green (see THE COLOUR RULE), so it becomes white and links carry an underline
   instead of a colour. The three controls that used --green as a BACKGROUND are
   rewritten by name further down -- a re-point alone would have turned each into
   a pale rectangle pasted on a dark page, which is the usual failure of a dark
   conversion and does not show up in a contrast check. */
body.site {
  --text:        #ffffff;
  --muted:       var(--dim-dark);
  --border:      var(--rule-dark);
  --bg:          var(--navy-2);
  --white:       var(--navy-2);      /* the CARD surface. The four places base.html
                                        uses --white as a FOREGROUND are nav/footer
                                        rules, all restated below with literal #fff. */
  --green:       #ffffff;            /* accents, links, icons, list markers        */
  --green-dark:  #ffffff;            /* text that sat on a green-light band        */
  --green-light: var(--navy-2);      /* those bands                                */
  --amber:       var(--check-dark);  /* the on-DARK amber, never the on-light one  */
  --line:        var(--rule-dark);
  --dim:         var(--dim-dark);    /* a page writing var(--dim) on navy would be
                                        3.76:1; --dim is a light-scheme token.     */

  --r: 12px;
  --w: 1120px;
  --nav-h: 62px;

  color-scheme: dark;
  background: var(--navy);
  color: #ffffff;
  font-size: 17px;
  line-height: 1.65;
}

body.site .container,
body.site .wrap {
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 28px;
}

body.site h1,
body.site h2,
body.site h3,
body.site h4 { letter-spacing: -.022em; color: #ffffff; }

body.site strong, body.site b { color: #ffffff; }

/* Every page must be readable at 360px. 28px of gutter either side leaves 304px of
   content there, which is enough for a 16px line but not for much else, so the
   gutter tightens rather than the type. */
@media (max-width: 420px) {
  body.site .container,
  body.site .wrap { padding: 0 18px; }
  body.site { font-size: 16px; }
}

/* ── navigation ──────────────────────────────────────────────────────────────
   Already navy before this window. What changed is that its CTA is no longer a
   green pill: on a navy bar the primary control is white. */
body.site .nav {
  position: sticky; top: 0; z-index: 200;
  background: rgba(17, 28, 46, .97);
  backdrop-filter: saturate(160%) blur(8px);
  color: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .18);
  border-bottom: 1px solid var(--rule-dark);
}
body.site .nav-inner { height: var(--nav-h); }
body.site .nav-logo { color: #fff; gap: 9px; font-size: 17px; }
body.site .nav-logo .mark { background: transparent; display: flex; gap: 4px; width: auto; height: auto; }
body.site .nav-logo .mark i { width: 7px; height: 7px; border-radius: 50%; display: block; }
body.site .nav-link { color: var(--dim-dark); font-size: 15px; }
body.site .nav-link:hover { color: #fff; }
body.site .nav-btn {
  background: #ffffff; color: var(--navy);
  padding: 11px 20px; border-radius: 8px; font-size: 15px; font-weight: 600;
}
body.site .nav-btn:hover { background: #e6ebf2; }
body.site .nav-share { background: rgba(255, 255, 255, .10); color: var(--dim-dark); }
body.site .nav-share:hover { background: rgba(255, 255, 255, .20); color: #fff; }

@media (max-width: 760px) {
  body.site .nav-right { background: var(--navy-2); }
  body.site .nav-right .nav-btn { background: transparent; color: #fff; }
}

/* ── buttons ─────────────────────────────────────────────────────────────────
   THE PRIMARY ACTION IS WHITE ON NAVY. It used to be a green pill, which is the
   single loudest way to teach a visitor that green means "clickable" -- and this
   same page then asks them to read green as "the product was confident". White is
   17.08:1 on --navy and spends nothing.
   The secondary is an outline, not a second filled mass. */
body.site .btn-p,
body.site .btn-cta,
body.site .btn-pri {
  background: #ffffff; color: var(--navy);
  border: 1px solid #ffffff; border-radius: 9px; font-weight: 600;
}
body.site .btn-p:hover,
body.site .btn-cta:hover,
body.site .btn-pri:hover { background: #e6ebf2; border-color: #e6ebf2; }

body.site .btn-s,
body.site .btn-ghost {
  background: transparent; color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, .45); border-radius: 9px;
  font-weight: 600; padding: 13px 27px; font-size: 1rem;
  display: inline-block; text-decoration: none; font-family: inherit; cursor: pointer;
  transition: background .15s, border-color .15s;
}
body.site .btn-s:hover,
body.site .btn-ghost:hover { background: rgba(255, 255, 255, .10); border-color: #ffffff; }

body.site .btn {
  display: inline-block; border: 0; cursor: pointer; font: inherit; font-weight: 600;
  border-radius: 8px; text-decoration: none; transition: .15s;
}
body.site .btn-pri { padding: 11px 20px; font-size: 15px; }

/* The store button. `.is-pending` must still read as inert on a dark page: it was a
   dashed light-grey pill, which on navy would have been a bright rectangle. */
body.site .btn-store {
  background: transparent; color: #ffffff; border: 2px solid rgba(255, 255, 255, .45);
}
body.site .btn-store:hover { background: rgba(255, 255, 255, .10); }
body.site .btn-store.is-pending {
  background: rgba(255, 255, 255, .04); color: var(--dim-dark);
  border: 2px dashed rgba(255, 255, 255, .28);
}
body.site .install-note { color: var(--dim-dark); }
/* --amber is re-pointed to --check-dark above, and this is the one place on the site
   where amber is legitimate outside a fill state: it is not decoration, it is the
   product's own "double-check this" voice applied to a control that is not live. */
body.site .install-note strong { color: var(--check-dark); }

/* ── surfaces ────────────────────────────────────────────────────────────────
   The alternating rhythm, moved from white/paper to navy/navy-2. */
body.site section { padding: 82px 0; background: var(--navy); }
body.site section.tint {
  background: var(--navy-2);
  border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
}
body.site .card {
  background: var(--navy-2); border: 1px solid var(--rule-dark); color: #ffffff;
}

/* ── type scale ──────────────────────────────────────────────────────────────
   The kicker/eyebrow is a quiet label above a loud headline, so it is --dim-dark
   (12.47:1) rather than white -- the hierarchy comes from the contrast step, not
   from an accent colour it is not allowed to spend. */
body.site .kicker,
body.site .sec-label,
body.site .kick {
  color: var(--dim-dark); font-weight: 700; font-size: 13px;
  letter-spacing: .13em; text-transform: uppercase; margin: 0 0 14px;
}
body.site h2,
body.site .sec-title {
  font-size: clamp(27px, 3.4vw, 38px); line-height: 1.15;
}
body.site .lede,
body.site .sec-sub { color: var(--dim-dark); font-size: 19px; margin: 16px 0 0; max-width: 58ch; }

@media (max-width: 640px) {
  body.site section { padding: 56px 0; }
  body.site .lede, body.site .sec-sub { font-size: 17px; }
}

/* ── links ───────────────────────────────────────────────────────────────────
   COLOUR IS NOT THE AFFORDANCE HERE, THE UNDERLINE IS, and that is forced by the
   rule rather than chosen: the accent this system used to spend on links was green,
   and green is the Filled state. Underlined white is unambiguous, needs no second
   colour, and is 17.08:1. */
body.site .site-main a:not(.btn):not(.btn-p):not(.btn-s):not(.btn-cta):not(.btn-pri):not(.btn-ghost):not(.btn-store):not(.nav-link):not(.nav-btn):not(.footer-link) {
  color: #ffffff; text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(255, 255, 255, .45);
}
body.site .site-main a:hover:not(.btn):not(.btn-p):not(.btn-s):not(.btn-cta):not(.btn-pri):not(.btn-ghost):not(.btn-store) {
  text-decoration-color: #ffffff;
}

/* ── form inputs on the dark page ────────────────────────────────────────────
   The resting border is --field-border and NOT the #33425C the brief named: that
   measured 1.77:1 against the fill against a 3:1 bar, which is the same defect §670
   found on the panel's inputs and §673 repaired. See static/afp-tokens.css.

   THE FOCUS RING IS --filled, AS SPECIFIED, AND THE TENSION IS NAMED RATHER THAN
   IGNORED: a green ring is green on a control. It is safe HERE and only here,
   because no input on the marketing site ever carries a fill state -- the only
   inputs are the two email captures, and the thing that DOES render fill states on
   this site (the mock) is built from divs, not fields. On the product surfaces,
   where an input and a fill state sit in the same box, the focus ring is not green. */
body.site .input,
body.site input[type=email],
body.site input[type=text],
body.site textarea {
  background: var(--field-bg); color: #ffffff;
  border: 1px solid var(--field-border); border-radius: 9px;
}
body.site .input::placeholder,
body.site input::placeholder,
body.site textarea::placeholder { color: var(--field-placeholder); }
body.site .input:focus,
body.site input[type=email]:focus,
body.site input[type=text]:focus,
body.site textarea:focus {
  outline: 2px solid var(--filled-dark); outline-offset: 1px;
  border-color: var(--filled-dark); box-shadow: none;
}
body.site .form-note { color: var(--dim-dark); }

/* ── the three states ────────────────────────────────────────────────────────
   The one place the palette is stated outright, on the dark page: these are the
   ON-DARK variants. The pips sit on navy, so --needs-you reads 11.66:1 -- on the
   white sections it used to sit on it was 1.46:1, which is a real defect this
   conversion happens to close. */
body.site .pip { width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto; margin-top: 6px; display: block; }
body.site .pip-filled  { background: var(--filled-dark); }
body.site .pip-check   { background: var(--check-dark); }
body.site .pip-blank   { background: var(--needs-you); }

/* ── footer ──────────────────────────────────────────────────────────────── */
body.site .footer {
  background: var(--navy-2); color: var(--dim-dark);
  border-top: 1px solid var(--rule-dark);
  padding: 46px 0 28px;
}
body.site .footer-brand-name { color: #fff; }
body.site .footer-brand-tag,
body.site .footer-col-hd { color: var(--dim-dark); }
body.site .footer-link { color: var(--dim-dark); }
body.site .footer-link:hover { color: #fff; }
body.site .footer-bottom { border-top-color: var(--rule-dark); color: var(--dim-dark); }
body.site .footer-disclaimer { color: var(--dim-dark); }

/* ── shared table + code affordances used by /security and /developers ───────
   These were light-surface rules (--paper on a white page). On navy a code block
   has to be DARKER than the page or it is the bright rectangle again, so it takes
   --field-bg, the same fill the inputs use. */
body.site table { border-color: var(--rule-dark); color: #ffffff; }
body.site th { color: #ffffff; }
body.site td { color: var(--dim-dark); }
body.site code, body.site pre {
  background: var(--field-bg); border-color: var(--rule-dark); color: #ffffff;
}

/* Wide content must scroll inside its own box; the page body must never scroll
   sideways at 360px. */
body.site .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.site img { max-width: 100%; height: auto; }

/* ── readability floor for PROSE ─────────────────────────────────────────────
   Measured, not guessed: diagnostics/692/site_check_692.mjs loads every page in
   real Chromium and flags any 40+ character sentence rendering under 13px. Two
   were: the footer's legal disclaimer at 0.78rem (12.48px) on every page, and
   /share's QR instruction at 12.8px. A disclaimer nobody can read on a phone is a
   disclaimer that has not been given. Micro-LABELS ("PRODUCT", "BETA ACCESS") are
   deliberately left at 11px -- uppercase with wide tracking is a typographic
   device, not body copy, and the check distinguishes the two. */
body.site .footer-disclaimer { font-size: 0.85rem; line-height: 1.6; }
body.site .footer-bottom p   { font-size: 0.85rem; }
body.site .share-hint        { font-size: 0.9rem; }

/* =============================================================================
   THE DOCUMENT EXCEPTION.  Everything below is deliberately LIGHT.
   =============================================================================
   `.doc-light` marks a block that DEPICTS A DOCUMENT. Inside it the page is a
   sheet of white paper and the semantic colours revert to their ON-LIGHT variants,
   because that is what a filled permit form actually looks like. Nothing else on
   the site may use this class, and nothing inside it may use an on-dark variant.

   The tags below are the reason this block exists at all: `.state-tag` is rendered
   INSIDE the mock, so it is a light-surface component, and its three colours are
   the three answer states. All three were measured against their own backgrounds
   and all three failed the 4.5:1 text bar as §689 shipped them (3.48 / 4.28 /
   3.22); they are rebuilt here on the published `-text` companions.
   ===========================================================================*/
body.site .doc-light {
  /* THE RE-POINT TABLE, UNDONE. This is the mechanism that makes the exception
     safe, and it was found by MEASURING rather than by reasoning: the first
     version of this conversion set `--dim: var(--dim-dark)` on body.site so that
     seven pages of `color: var(--dim)` landed correctly on navy -- and the mock,
     which is inside body.site and is WHITE, inherited it too. Every label in the
     picture that teaches the three states rendered #D6DDE5 on #FFFFFF at 1.37:1.
     A token re-point is scoped, so the exception has to re-point back. */
  --dim:    #6C7786;
  --muted:  #6C7786;
  --text:   var(--ink);
  --border: var(--line);
  --white:  #ffffff;
  --green:  var(--filled-text);
  --amber:  var(--check-text);

  background: #ffffff;
  color: var(--ink);
  border: 1px solid var(--line);
}
body.site .doc-light h1, body.site .doc-light h2,
body.site .doc-light h3, body.site .doc-light h4,
body.site .doc-light strong, body.site .doc-light b { color: var(--ink); }

/* NAMESPACED `state-tag`, not `tag`. The bare name collided: templates/pricing.html
   has used `.tag` since it was written, and a shared `.tag { float: right }`
   silently pushed its "BETA ACCESS" eyebrow to the right of the price (§689). */
body.site .state-tag {
  float: right; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 1px 6px; border-radius: 4px; font-style: normal;
  border: 1px solid transparent;
}
body.site .state-tag.ok    { background: #fff; color: var(--filled-text); border-color: var(--filled); }
body.site .state-tag.chk   { background: var(--check-bg); color: var(--check-text); border-color: var(--check-text); }
body.site .state-tag.blank { background: #fff; color: var(--dim); border-color: var(--needs-you-line); }