/* ============================================================
   BASE — rules that must hold on every page, including inside
   browsers we do not control.

   Loaded first, by every page. Written once here rather than
   inlined into each <style> block for the same reason nav.js
   exists: this site has four nav implementations, and four copies
   of a rule is four places for it to drift.
   ============================================================ */

/* ---- 1. Text scaling lock -------------------------------------------
   In-app browsers — the WebView Facebook, Instagram and LinkedIn open
   links in — apply the phone's system text-size setting to the page.
   Chrome and Safari do not. Without this declaration a visitor arriving
   from a Facebook post gets every string on the site inflated by
   whatever their accessibility setting says, which is why atlas9.ai
   looked "zoomed in and struggling to fit" from Justin's post on
   2026-08-03 and correct in the same person's normal browser.

   100% means "render text at the size the CSS asked for". It does NOT
   override pinch-zoom and does not affect a user who has set a system
   DISPLAY size (that scales the device pixel ratio instead, and no
   stylesheet can opt out of it) — which is exactly why the nav rules
   below exist as well. Belt, then braces. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}


/* ---- 2. The nav survives text it did not choose the size of ---------
   Every nav on this site is the same flex row: logo, links, CTA pill,
   hamburger. Every mobile fix in it was keyed to viewport WIDTH, and
   nothing accounted for the text inside it getting taller and wider on
   a screen that did not change size.

   With no slack, growth had nowhere to go: at 390px the CTA's left edge
   already sat 15px over the wordmark image — harmless, because it landed
   on the SVG's trailing margin — and under a 1.3x scale it covered 31%
   of the wordmark, which is the "9" and part of the "s".

   The fix is a floor under the gap and a defined order of yielding:
   the burger never shrinks (it is the only route to the menu), the CTA
   never shrinks (it is the only route to the money), and the logo gives
   up width first — scaling down, whole and legible, rather than being
   painted over. A smaller wordmark is a design compromise. A wordmark
   with the 9 covered is a broken site. */

/* Pricing's row is nav > .inner; the other three are the nav itself. */
nav,
nav > .inner{column-gap:12px}

/* The logo yields. min-width:0 lets the flex item shrink below its
   content, and max-width + object-fit make the image scale inside the
   reduced box instead of overflowing it — which is what produced the
   overlap, since an overflowing image still paints where the box no
   longer is. object-position keeps it left-aligned as it shrinks. */
nav .logo,
nav > .inner > a:first-child{min-width:0}
nav .wm{min-width:0;max-width:100%;object-fit:contain;object-position:left center}

/* The two things that must never give up a pixel. */
nav .btn{flex:none}
nav .navburger{flex:none}

/* The CTA gets the same mobile sizing on every nav. The homepage already
   stepped its pill down at 820/390/360; about, trades and pricing never
   did, so the identical button was 166px wide on /pricing/ against 136px
   on / — and pricing paid for it out of the logo. Four navs, one set of
   numbers. Any page wanting different keeps it in its own stylesheet,
   which loads after this one and wins the tie. */
@media(max-width:820px){nav .btn{padding:10px 16px;font-size:.82rem}}
@media(max-width:390px){nav .btn{padding:9px 12px;font-size:.76rem;white-space:nowrap}}
@media(max-width:360px){nav .btn{padding:8px 11px;font-size:.72rem}}

/* Before the wordmark gives up anything, the decoration does.
   Yielding the logo alone was measured and rejected: it fixed the overlap
   but shrank the wordmark from 136px to 97px at NORMAL text size on a
   390px phone — paying for a Facebook-only bug on every visitor's screen.
   The spinner is 34px plus a 12px gap, which is very nearly the whole
   shortfall, and it is decoration; the wordmark is the company's name.
   Below 480px the mark stands down and the name stays full size.

   It also retires a third always-running animation (two rotations and a
   pulse) from the phones least able to afford one. */
@media(max-width:480px){
  nav .logo .ai-mark{display:none}
  nav .logo.animated{gap:0}
}

/* The third symptom from the same report — the sky flashing — is a
   compositing problem in the hero scene, and its fix lives with the
   scene in cascadia.css. */


/* ---- 3. SMS consent disclosure -------------------------------------
   Twilio rejected A2P campaign CM9579128b... with error 30909 — the
   reviewer could not verify the call to action, because the number
   appeared on atlas9.ai with no messaging language anywhere near it.
   The disclosure now sits under the copyright line on every page that
   prints the number.

   Its own class rather than the existing `.fine`: `.fine` already means
   the setup-fee disclosure, is styled per-page on index and pricing
   only, and is undefined on the other seven — so reusing it would have
   meant either unstyled text on most pages or overriding a rule that
   means something else. One class, defined once, works everywhere.

   The copy this styles is fixed. Twilio reviewers pattern-match the
   wording, so it is reproduced verbatim from the spec on every page and
   must not be reworded, shortened, or "tightened" — see
   docs/specs/sms-consent-disclosure.md. */
.smsnote{
  font-size:.74rem;line-height:1.55;opacity:.75;margin-top:10px;
  max-width:72ch;
}
/* thanks.html styles every anchor as a coral pill button, so the two
   policy links inside this line would render as buttons there. Winning
   on specificity (0,1,1 beats 0,0,1) keeps them as links on every page
   without needing a per-page override. */
.smsnote a{
  display:inline;padding:0;background:none;color:inherit;
  border-radius:0;font-family:inherit;font-weight:600;
  text-decoration:underline;text-underline-offset:2px;
}