/* EXTERNAL, NOT INLINE, AND THAT IS THE WHOLE FIX.
   `_headers` sets `style-src 'self'` with no `unsafe-inline`. That directive blocks inline `style=`
   ATTRIBUTES *and* inline `<style>` BLOCKS — I removed the attributes this morning, congratulated
   myself, then shipped a holding page whose entire stylesheet was a <style> element. The live page
   rendered as unstyled HTML and the founder saw it before I did, because I verified with curl and
   grep and never LOOKED AT A PICTURE. Same class, same day, second time.
   A holding page is exactly where this hurts most: nobody is watching it, so it stays broken. */
/* SELF-CONTAINED ON PURPOSE. A holding page that depends on a stylesheet is a holding page that can
     break while nobody is watching it — and the point of this deploy is that nobody is watching.
     Brand values are COPIED FROM brand.css rather than re-picked, so the colours cannot drift from the
     real site: #0C1A15 / #16A06B are --vt-ink and --vt-clear. */
  *,*::before,*::after { box-sizing: border-box; }
  /* `flex-direction: column` IS A BUG FIX, NOT A STYLE CHOICE — 2026-08-12, founder screenshot ge.png.
     This body was a flex ROW. A browser translate extension appends a plain div to <body>, which on a
     row becomes a SECOND FLEX ITEM sharing the line, and `.w` (flex-shrink defaults to 1) collapsed
     342px -> 199px on a 390px phone.
     THE WIDGET'S OWN WORDS ARE DELIBERATELY NOT QUOTED HERE. They were, and it cost an hour: the
     founder grepped production for the text he could see on his screen, hit this comment, and
     reasonably concluded we were still shipping it. A string in a comment is invisible to a browser
     and VERY visible to a search. Do not put another product's UI text in our bytes.
     The headline broke to three words a line and the body copy ran under the widget. REPRODUCED before
     fixing: inject a div into <body> and measure `.w`. A column stacks the intruder BELOW instead, and
     because the axes swap, the EXISTING `justify-content`/`align-items` keep centring the page exactly
     as before -- the visual design is unchanged at every width.
     WHY IT PASSED EVERY CHECK: nothing we serve is wrong. The HTML, the CSS and the render are all
     correct in a clean browser, so `curl`, `grep` and a GREEN design gate all agreed while the citizen
     saw a broken page. The page a citizen loads is OUR page plus WHATEVER THEIR BROWSER PUTS IN IT. */
  body {
    margin: 0; min-height: 100dvh; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    /* SAFE AREAS. `env()` is inert unless the HTML asks for the space with `viewport-fit=cover`, so the
       two are ONE change and neither works alone. The clamp floor of 16px is Material 3's compact-window
       margin; 24px stays the comfortable maximum this page already used. */
    padding: calc(env(safe-area-inset-top,    0px) + clamp(16px, 4vw, 24px))
             calc(env(safe-area-inset-right,  0px) + clamp(16px, 4vw, 24px))
             calc(env(safe-area-inset-bottom, 0px) + clamp(16px, 4vw, 24px))
             calc(env(safe-area-inset-left,   0px) + clamp(16px, 4vw, 24px));
    background: #0C1A15; color: #C9D6CE;
    /* 'Public Sans' WAS NAMED HERE AND NEVER LOADED — no <link>, no @font-face, on a page whose own
       header says SELF-CONTAINED ON PURPOSE. So the first family always missed and every visitor got a
       DIFFERENT typeface: SF Pro on iPhone, Segoe UI on Windows, Roboto on Android. That is a second,
       uncontrolled reason the phone "looks nothing like" the desktop, and it varies per visitor.
       Naming the system stack honestly is the fix; loading a webfont over Nigerian bandwidth to make a
       placeholder match itself is the wrong trade, and is the founder's call to make, not a default. */
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  /* EVERY SIZE BELOW IS `rem`, AND THAT IS THE POINT — 2026-08-12, founder: mobile "looks nothing like
     the well-proportioned web version". Measured, it was literally true and the cause was arithmetic:
     the h1 was the ONLY fluid size on the page, so it shrank on a phone while every other size stayed
     frozen, and the type hierarchy INVERTED exactly where it needs to be strongest —
         desktop 1440px   h1 34px / body 16px = 2.13x
         phone    390px   h1 27.3px / body 16px = 1.71x
         phone    320px   h1 26px  / body 16px = 1.63x
     Apple HIG (Large Title 34pt / Body 17pt) and Material 3 (Headline Large 32sp / Body Large 16sp) BOTH
     land independently on 2.0, and HIG's Large Title does NOT shrink on a small iPhone. So the h1 is
     fixed at its desktop size and the body rises to HIG's 17pt floor: 2.00x at EVERY width, which is
     what "proportioned like the web version" actually means.
     `rem` rather than `px` also makes the whole page honour the reader's own text-size setting — iOS
     Dynamic Type and Android font scale — which a px page silently ignores. */
  .w { max-width: 28.75rem; width: 100%; text-align: center; }
  /* Spacing was five frozen pixel constants, identical at 320px and 1440px. Fluid, so the vertical
     rhythm scales with the type instead of crowding a phone and floating on a desktop. */
  .brand { display: inline-flex; align-items: center; gap: .625rem; margin-bottom: clamp(1.25rem, 6vw, 2.125rem); }
  .mark {
    width: 2.125rem; height: 2.125rem; border-radius: .5rem; background: #16A06B; color: #04140E;
    display: grid; place-items: center; font-weight: 700; font-size: 1.125rem;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  }
  .name { font-size: 1.375rem; font-weight: 700; color: #fff; letter-spacing: -.015em; }
  h1 {
    font-size: 2.125rem; line-height: 1.15; margin: 0 0 clamp(.75rem, 3vw, 1rem);
    color: #fff; font-weight: 700; letter-spacing: -.02em;
    /* Keeps the rag even instead of leaving one word stranded on the last line, which is the difference
       between "typeset" and "wrapped" at this size. Ignored by browsers that do not support it. */
    text-wrap: balance;
  }
  h1 em { font-style: normal; color: #16A06B; }
  p { font-size: 1.0625rem; line-height: 1.6; color: #B7C7BE; margin: 0 0 clamp(.625rem, 2.5vw, .875rem); }
  .note { font-size: .875rem; color: #8FA398; margin-top: clamp(1.25rem, 5vw, 1.875rem); }
  /* UNDERLINED, NOT COLOUR-ALONE. This is the only interactive thing on the page. `#16A06B` against
     `.note`'s `#8FA398` is 1.26:1 — WCAG 1.4.1 allows colour as the sole distinguisher only at >=3:1
     against the SURROUNDING TEXT. The existing CONTRAST assertion passes it because it measures text
     against BACKGROUND (5.27:1) and never text against text. */
  a { color: #16A06B; text-decoration: underline; text-underline-offset: 2px; }
  .hi { color: #fff; }
  /* `color: inherit` rendered the govtech disclaimer in `.legal`'s own #8FA398 — identical to the
     sentence around it, so the emphasis did nothing. The dead `data-x="#C9D6CE"` attribute in the HTML
     was a fossil of the inline-style purge and recorded the colour this was always meant to be. */
  .hi2 { color: #C9D6CE; font-weight: 700; }
  .legal { font-size: .75rem; color: #8FA398; margin-top: clamp(1.125rem, 4.5vw, 1.625rem); line-height: 1.5; }
