/* ═══════════════════════════════════════════════════════════════════
   site.css -- the shared layer every public page loads.

   DIRECTION: bright, warm, plain-spoken (docs/mockups/homepage.html; the
   homepage is the reference). Daylight palette, one warm accent, mono for
   machine output. This file holds only what every page shares: tokens,
   type, the page container, the masthead and footer, links, and the
   common surfaces (cards, callouts, tables, code). Anything one page
   needs stays in that page's own <style>, which loads after this file
   and therefore wins on equal specificity.

   RULE (a) -- COLOUR IS DATA. --pass/--part/--fail appear only where they
   carry a scan verdict. --sun is a decorative accent, never a status.
   RULE (b) -- MONO MEANS MACHINE OUTPUT. IBM Plex Mono is for bot names,
   rule ids, file names and file contents, never for emphasis.

   No framework, no build step: plain CSS, one file, one <link>.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --sky:#EEF4FB;          /* page -- cool daylight */
  --card:#FFFFFF;
  --ink:#1B2430;
  --soft:#5A6675;
  --faint:#647486;        /* 4.79:1 on white -- the lightest text allowed for prose */
  --line:#DCE5EF;

  --sun:#F2B441;          /* warm accent -- highlights, not status */
  --sun-soft:#FEF3DC;
  --sea:#1E6FA8;          /* links / primary action */
  --sea-soft:#DCEBF6;

  --pass:#147A3A; --pass-bg:#E4F5EA;
  --part:#B15209; --part-bg:#FDF0DC;
  --fail:#B91C1C; --fail-bg:#FBE6E6;

  --font-body:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-head:"Fraunces",Georgia,"Times New Roman",serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  --wrap:1080px;          /* outer container */
  --measure:72ch;         /* comfortable line length for running prose */
}

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

html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--sky);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* ── container ─────────────────────────────────────────────── */
.wrap{max-width:var(--wrap);margin:0 auto;padding:26px 22px 100px}
@media(max-width:640px){.wrap{padding:18px 16px 72px}}

/* ── type ──────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;letter-spacing:-.015em;
  line-height:1.2;margin:0 0 .5em;overflow-wrap:anywhere}
h1{font-size:clamp(28px,4.2vw,38px);margin-top:0}
h2{font-size:clamp(22px,3vw,28px);margin-top:1.8em}
h3{font-size:19px;margin-top:1.4em}
h4{font-size:17px;margin-top:1.2em}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.4em}
li{margin-bottom:.35em}
hr{border:0;border-top:1px solid var(--line);margin:32px 0}
strong,b{font-weight:600}
small{font-size:.9em}

/* Running prose keeps a reading measure; cards, tables and forms take
   the full container. Pages that centre their text (contact) centre the
   measure too. */
.wrap main p,.wrap main li,.wrap main dd,.wrap main summary{max-width:var(--measure)}
.wrap main table p,.wrap main table li{max-width:none}
.wrap--center main p{margin-left:auto;margin-right:auto}

.muted,p.m,ul.m,.note{color:var(--soft)}
.note{font-size:14px}

/* ── links ─────────────────────────────────────────────────── */
/* Inline prose links are underlined (never colour alone -- most prose
   here is --soft, against which --sea alone reads at ~1.1:1). The
   masthead, the footer and anything button-shaped opt out below. */
a{color:var(--sea);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(30,111,168,.45)}
a:hover{text-decoration-color:currentColor}
a:focus-visible{outline:2px solid var(--sea);outline-offset:3px;border-radius:3px}
.site-nav a,.site-footer a,.brand,.cta,.buy-btn,.secondary,.secondary-btn,
a.button,.chips a{text-decoration:none}

/* ── masthead ──────────────────────────────────────────────── */
.site-header{display:flex;justify-content:space-between;align-items:center;
  gap:10px 24px;flex-wrap:wrap;margin-bottom:44px}
.brand{font-family:var(--font-head);font-weight:700;font-size:19px;color:var(--ink);
  white-space:nowrap}
.brand span{color:var(--sun)}
.site-nav{display:flex;flex-wrap:wrap;gap:2px 18px;margin:0;padding:0}
.site-nav a{color:var(--soft);font-size:15px;font-weight:500;padding:6px 0;
  border-bottom:2px solid transparent}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--ink);font-weight:600;border-bottom-color:var(--sun)}
@media(max-width:640px){
  .site-header{margin-bottom:28px}
  .site-nav{gap:0 16px}
  .site-nav a{font-size:14.5px}
}

/* ── footer ────────────────────────────────────────────────── */
.site-footer{margin-top:80px;padding-top:24px;border-top:1px solid var(--line);
  font-size:14.5px;color:var(--soft);display:flex;flex-wrap:wrap;gap:2px 18px}
.site-footer a{color:var(--soft);font-weight:400;line-height:2.1}
.site-footer a:hover{color:var(--ink)}
.site-footer a[aria-current="page"]{color:var(--ink)}

/* ── common surfaces ───────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.card + .card{margin-top:14px}
/* a heading that opens a surface sits at its top, not a section-gap below it */
.card > :first-child,.callout > :first-child,.example > :first-child,main > :first-child{margin-top:0}
.card > :last-child,.callout > :last-child,.example > :last-child{margin-bottom:0}
.callout{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;margin:18px 0}
.example{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
details{margin-top:12px}
details summary{cursor:pointer;font-weight:600;color:var(--ink)}
details summary:focus-visible{outline:2px solid var(--sea);outline-offset:3px;border-radius:3px}

/* machine output (rule b) */
code,pre,.mono{font-family:var(--font-mono);font-size:.9em}
code{background:var(--card);border:1px solid var(--line);border-radius:5px;padding:1px 6px;
  overflow-wrap:anywhere}
pre{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;
  overflow-x:auto;line-height:1.55;font-size:13.5px;max-width:100%}
pre code{background:none;border:0;padding:0;font-size:inherit}

/* tables: full width, wrapping cells, horizontal scroll only inside .tablewrap */
table{border-collapse:collapse;width:100%;margin:12px 0 18px;font-size:15px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
td{overflow-wrap:anywhere}   /* a long URL or rule id wraps inside its cell on a phone */
th{overflow-wrap:normal}     /* short header words never break mid-word */
tr:last-child td{border-bottom:0}
th{color:var(--soft);font-weight:600;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
  background:var(--sky)}
.tablewrap{overflow-x:auto;max-width:100%}

/* buttons shared by the pricing and activation pages */
.buy-btn{display:inline-block;padding:11px 22px;border-radius:12px;background:var(--sea);
  color:#fff;font-weight:600;font-size:16px;border:0;cursor:pointer;font-family:inherit}
.buy-btn:hover{background:#175C8C}
.secondary-btn{display:inline-block;padding:9px 18px;border-radius:10px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);cursor:pointer;font:inherit;font-weight:600}
.secondary-btn:hover{background:var(--sky)}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--sea);outline-offset:2px}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}