/* ============================================================================
   AHA Level — Brand 1. The shared system every page loads.

   Source: Brand & UI PK v1.1, files 02 (fixed brand layer), 03 (Brand 1
   colours, section 7 tokens) and 05 (Level theme). Layout and component
   exemplar: 09 Prototype A, Level sections. Nothing here is invented; where
   the kit is silent the choice is logged in DECISIONS-brand-refresh.md.

   Load order on a page: fonts.css, brand.css, then the page family's sheet
   (site.css, home.css, ...). This file owns tokens, the base, the header and
   footer, and every component more than one page family uses.

   ahalevel.com is Brand 1 only and light only. No Periwinkle, no gradients,
   orange means change and nothing else.
   ============================================================================ */

:root{
  /* ---- Brand 1 palette, kit 03 section 7, verbatim ---- */
  --b1-blue:#3450E0; --b1-blue-600:#2A43C4; --b1-blue-800:#1F33A8; --b1-blue-soft:#DCE1FB; --b1-mark-dim:#D6DBF7;
  --b1-paper:#F2F0EB; --b1-white:#FFFFFF; --b1-ink:#141416; --b1-muted:#55555E; --b1-line:#DAD6CD;
  --b1-change:#A3410A; --b1-signal:#F08A3C;
  --b1-chart-1:#3450E0; --b1-chart-2:#141416; --b1-chart-3:#6C83E8; --b1-chart-4:#8A857A;

  /* ---- Level theme extras, kit 05 ---- */
  --b1-sunken:#E9E6DF;          /* surface-sunken: tracks and wells that carry NO text (no approved pair) */
  /* Control edge. Line is decorative only (kit 05) and measures 1.27:1 on
     Paper, under the 3:1 floor for control edges (kit 02 section 6). The kit
     names no edge colour; Warm Gray, its chart series 4, clears 3:1 on both
     grounds (3.2 Paper, 3.7 White). DECISIONS D-07. */
  --b1-edge:#8A857A;
  /* Text sits only on the grounds kit 03 section 3 lists: Paper, White, Level
     Blue, Blue Soft (Blue 600 text only) and Signal Orange (Ink text only).
     Prototype A's extra fills (#E6E3DC, #F7F6F2, #F4F5FD) have no approved
     pair, so they are not used (DECISIONS D-14). */
  --b1-error:#B3261E;           /* form errors only (Prototype A; 6.3:1 on White, 5.6:1 on Paper) */

  /* ---- type, kit 05 ---- */
  /* the "Fallback" faces are metric-matched in fonts.css */
  --f-sans:'Archivo','Archivo Fallback','Helvetica Neue',Arial,sans-serif;
  --f-mono:'IBM Plex Mono','Plex Mono Fallback',ui-monospace,Menlo,monospace;

  /* ---- spacing and radius, kit 05 ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:80px;
  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-xl:24px; --r-pill:999px;

  /* ---- page geometry (Prototype A: 1180 column, 24/16 gutters) ---- */
  --maxw:1180px; --pad:24px;

  color-scheme:light;
}
@media (max-width:520px){ :root{ --pad:16px } }

/* ============================== base ===================================== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{background:var(--b1-paper);color:var(--b1-ink);font-family:var(--f-sans);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--f-sans);color:var(--b1-ink);text-wrap:balance}
h1{font-size:clamp(40px,5.6vw,68px);font-weight:800;line-height:1.02;letter-spacing:-.035em}
h2{font-size:clamp(30px,4vw,48px);font-weight:800;line-height:1.05;letter-spacing:-.03em}
h3{font-size:24px;font-weight:700;line-height:1.2;letter-spacing:-.02em}
h4{font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
b,strong{font-weight:700}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
::selection{background:var(--b1-blue);color:#fff}
:focus-visible{outline:3px solid var(--b1-blue);outline-offset:2px;border-radius:4px}

/* Links inside running text are the accent, underlined so colour is never
   the only cue (kit 02 section 6). Blue 5.5:1 on Paper, 6.2:1 on White. */
p a:not(.btn),li a:not(.btn),.bl a:not(.btn),td a:not(.btn),dd a:not(.btn){
  color:var(--b1-blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
p a:not(.btn):hover,li a:not(.btn):hover,.bl a:not(.btn):hover{color:var(--b1-blue-600)}

/* In-page anchors land below the sticky header. */
[id]{scroll-margin-top:84px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sr-only,.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--b1-blue);color:#fff;padding:12px 16px;border-radius:0 0 12px 0;font-weight:700}
.skip:focus{left:0}

/* ============================== the mark ================================= */
/* Inline SVG, Brand Kit v2.0 (adopted 2026-10-16): each slot carries the
   kit's own size drawing, shown 1:1 on its pixel grid, so the CSS size here
   must equal the drawing's viewBox. Radii follow the rounding rule
   r = 7 + 6 x level; never equalized, swapped, mirrored or re-rounded. */
.mark{display:block;flex:none;width:28px;height:28px}

/* The lockup: mark + AHA (800) + Level (500), tracking -2% (kit 02). Mark
   sizes: the 28 px drawing in the site nav, the 22 px drawing in the footer
   (Brand Kit v2.0, C-04; DECISIONS R1-19, R1-40). The wordmark stays live
   type until the kit's outlined W02 2.0 and lockups exist (R1-40). */
.logo{display:inline-flex;align-items:center;gap:10px;font-size:22px;line-height:1;letter-spacing:-.02em;
  color:var(--b1-ink);white-space:nowrap;min-height:44px}
.logo b{font-weight:800}
.logo span{font-weight:500}
.logo .mark{width:28px;height:28px}

/* ============================== header =================================== */
header.site{position:sticky;top:0;z-index:50;background:rgba(242,240,235,.94);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--b1-line)}
header.site .nav{display:flex;align-items:center;gap:24px;min-height:68px}
header.site nav.links{display:flex;gap:4px;margin-left:auto}
header.site nav.links a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:var(--r-sm);
  font-size:15px;font-weight:500;color:var(--b1-muted)}
header.site nav.links a:hover{color:var(--b1-ink);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;text-decoration-color:var(--b1-blue)}
header.site nav.links a[aria-current]{color:var(--b1-ink)}
header.site .nav-right{display:inline-flex;align-items:center;gap:12px;flex:none}
header.site nav.links + .nav-right{margin-left:0}
header.site .nav > .logo + .nav-right{margin-left:auto}
/* Some flows (scan, sign-in, account) put a mono context label in the header's
   right slot instead of links. It is a label, so it never wraps; on phones it
   gives way to the lockup rather than pushing the page sideways. */
header.site .nav-right > .k,header.site .nav-right > .label{margin:0;white-space:nowrap}
@media (max-width:900px){
  header.site nav.links{display:none}
  header.site .nav-right{margin-left:auto}
}
@media (max-width:640px){
  header.site .nav-right > .k,header.site .nav-right > .label{display:none}
}

/* ============================== buttons ================================== */
/* One primary per screen (kit 03 rule 3). Secondary is an Ink outline. The
   header's call to action is Ink-filled (Prototype A .btn-dark), so the page
   body keeps the only Level Blue button in view (DECISIONS D-06). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;
  border-radius:var(--r-md);border:1.5px solid transparent;font-family:var(--f-sans);font-weight:700;font-size:16px;
  line-height:1.2;text-align:center;white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:background-color .16s,border-color .16s,color .16s}
.btn:focus-visible{outline:3px solid var(--b1-blue);outline-offset:3px}
.btn-primary{background:var(--b1-blue);color:#fff}
.btn-primary:hover{background:var(--b1-blue-600)}
.btn-ghost,.btn-secondary{background:transparent;color:var(--b1-ink);border-color:var(--b1-ink)}
.btn-ghost:hover,.btn-secondary:hover{background:var(--b1-ink);color:#fff}
.btn-dark{background:var(--b1-ink);color:#fff}
.btn-dark:hover{background:#2A2A2E}
.btn-text{background:transparent;color:var(--b1-blue);padding-inline:4px;text-decoration:underline;text-underline-offset:3px}
.btn-sm{min-height:44px;padding:8px 14px;font-size:14px;border-radius:10px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}

/* ============================== labels and type helpers ================== */
/* Eyebrow: mono 500, 13 px, 0.1em, uppercase, Level Blue (kit 05 "eyebrow"). */
.eyebrow,.k{display:block;font-family:var(--f-mono);font-size:13px;font-weight:500;line-height:1.4;letter-spacing:.1em;
  text-transform:uppercase;color:var(--b1-blue);margin-bottom:12px}
/* Label: mono 400, 12 px, 0.06em, uppercase, Muted (kit 05 "label"). */
.label,.ml{font-family:var(--f-mono);font-size:12px;font-weight:400;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:var(--b1-muted)}
.lead,.lede{font-size:19px;line-height:1.5;color:var(--b1-muted);max-width:56ch}
.bl{font-size:17px;line-height:1.55;color:var(--b1-muted);max-width:62ch}
.bl b,.bl strong{color:var(--b1-ink)}
.muted{color:var(--b1-muted)}
.small,.note{font-size:15px;line-height:1.45;color:var(--b1-muted)}
.em{color:var(--b1-blue)}
.est,.demo-tag{display:inline-block;font-family:var(--f-mono);font-size:12px;font-weight:400;letter-spacing:.06em;line-height:1.3;
  text-transform:uppercase;color:var(--b1-muted);border:1px solid var(--b1-line);border-radius:var(--r-pill);padding:2px 8px;
  vertical-align:middle;white-space:nowrap}

/* ============================== surfaces ================================= */
/* The old glass card is a White card: Line border, radius 20, no blur. */
.glass,.card{background:var(--b1-white);border:1px solid var(--b1-line);border-radius:var(--r-lg);padding:clamp(22px,3vw,32px)}
.card-d{background:var(--b1-white);border:1px solid var(--b1-line);border-radius:var(--r-lg);padding:20px 22px}
.glass .card-d,.card .card-d{background:var(--b1-paper);border-color:var(--b1-line)}
.callout{background:var(--b1-blue-soft);border-left:3px solid var(--b1-blue);border-radius:0 var(--r-md) var(--r-md) 0;padding:16px 20px;color:var(--b1-blue-600)}
.callout b,.callout strong,.callout a:not(.btn){color:var(--b1-blue-600)}
.well{background:var(--b1-paper);border-radius:var(--r-md);padding:14px 16px}

/* ============================== forms ==================================== */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--b1-muted)}
.field input,.field select,.field textarea,input.in{width:100%;min-height:48px;padding:12px 14px;background:var(--b1-white);
  border:1.5px solid var(--b1-edge);border-radius:var(--r-md);color:var(--b1-ink);font-size:17px}
.field input::placeholder,.field textarea::placeholder{color:#6E6E76}
.field input:focus,.field select:focus,.field textarea:focus,input.in:focus{border-color:var(--b1-blue);outline:3px solid var(--b1-blue);outline-offset:1px}
.err{color:var(--b1-error);font-size:15px;min-height:1.3em}

/* The scan form: one White bar holding two fields and the button (Prototype A). */
.scanform{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:8px;max-width:680px;margin-top:28px;
  background:var(--b1-white);border:1.5px solid var(--b1-edge);border-radius:18px;padding:10px;
  box-shadow:0 18px 40px -28px rgba(20,20,22,.35)}
.scanform .sf{display:flex;flex-direction:column;gap:2px;padding:6px 12px;border-radius:10px;min-width:0}
.scanform .sf label{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--b1-muted)}
.scanform .sf input{border:0;outline:0;background:transparent;font-size:17px;padding:4px 0;color:var(--b1-ink);min-width:0;width:100%}
.scanform .sf input::placeholder{color:#6E6E76}
.scanform .sf:focus-within{outline:3px solid var(--b1-blue);outline-offset:0}
@media (max-width:720px){.scanform{grid-template-columns:1fr}}
.formnote{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:15px;color:var(--b1-muted)}
.formnote span{display:inline-flex;align-items:center;gap:8px}
/* A tick drawn in CSS: two Level Blue strokes. (An inline SVG <path> here would
   be read as a <p> by ops/render-markdown.js's tokeniser.) */
.tick::before{content:"";flex:none;width:11px;height:6px;margin:0 2px 4px 1px;border-left:2.2px solid var(--b1-blue);
  border-bottom:2.2px solid var(--b1-blue);transform:rotate(-45deg)}

/* ============================== the score ================================ */
/* Every AHA Level renders as "<value> / 100", Ink, Archivo 800, tabular
   figures, at the site's own precision (kit 03 rule 5). */
.score{font-family:var(--f-sans);font-weight:800;color:var(--b1-ink);font-variant-numeric:tabular-nums;
  font-size:92px;line-height:.85;letter-spacing:-.05em;white-space:nowrap}
.score small,.score .of100{font-size:20px;font-weight:600;letter-spacing:0;color:var(--b1-muted);margin-left:6px}
.num{font-variant-numeric:tabular-nums}

/* Step gauge: the mark's six parts, lit in Level Blue, unlit in Mark Dim.
   C3 (ruled 2026-10-01): in the product the gauge means the score band. */
.gauge{display:flex;align-items:flex-end;gap:6px}
.gauge i{display:block;width:30px;border-radius:7px;background:var(--b1-mark-dim)}
.gauge i.on{background:var(--b1-blue)}
.gauge i.dot{height:30px;border-radius:50%;align-self:flex-start}
@media (max-width:520px){.gauge i,.gauge i.dot{width:20px}.gauge i.dot{height:20px}.score{font-size:72px}}

/* Band pill: Blue 600 on Blue Soft, 6.0:1 (kit 03 section 3). */
.band{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;padding:6px 10px;border-radius:var(--r-pill);background:var(--b1-blue-soft);color:var(--b1-blue-600)}

/* ============================== change =================================== */
/* Orange means change only: deltas, alerts, "next re-check". Text on light
   is Change Deep; Signal Orange is a fill, with Ink text, in a pill. */
.chg,.delta-t{color:var(--b1-change);font-weight:700}
.chg-pill{display:inline-flex;align-items:center;gap:6px;background:var(--b1-signal);color:var(--b1-ink);
  font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill)}

/* ============================== chips and pills =========================== */
.pill{display:inline-flex;align-items:center;font-size:13px;font-weight:600;padding:6px 10px;border-radius:var(--r-pill);
  background:var(--b1-white);border:1px solid var(--b1-line);color:var(--b1-ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chipx{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--b1-line);background:var(--b1-white);border-radius:var(--r-pill);padding:6px 12px;color:var(--b1-muted)}
.chipx b{color:var(--b1-ink);font-weight:500;font-variant-numeric:tabular-nums}
/* A low channel is shown by an Ink border and Ink text, never colour alone:
   the number carries the meaning (C3/C5, DECISIONS D-09). */
.chipx.low{border-color:var(--b1-ink);color:var(--b1-ink)}

/* ============================== tables =================================== */
.ranktbl{border:1px solid var(--b1-line);border-radius:var(--r-lg);overflow:hidden;background:var(--b1-white);margin-top:18px}
.rr{display:grid;grid-template-columns:44px minmax(0,1fr) 64px 56px;gap:12px;padding:12px 18px;border-top:1px solid var(--b1-line);align-items:center;font-size:15px}
.rr:first-child{border-top:0;background:var(--b1-paper)}
.rr:first-child span{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--b1-muted)}
.rr .pos{font-family:var(--f-mono);font-size:13px;color:var(--b1-muted);font-variant-numeric:tabular-nums}
.rr .nm{font-weight:600;color:var(--b1-ink)}
.rr .sc,.rr .gd{text-align:right;font-variant-numeric:tabular-nums;color:var(--b1-ink)}
.rr .gd{font-weight:800}
.rr.you{background:var(--b1-blue-soft)}
.rr.you span{color:var(--b1-blue-600)}
.rr.you .nm{font-weight:700}

/* ============================== disclosure =============================== */
details.assume{margin-top:14px}
details.assume summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;
  font-size:15px;font-weight:600;color:var(--b1-blue)}
details.assume summary::-webkit-details-marker{display:none}
details.assume summary::before{content:"+";font-weight:500;font-size:20px;line-height:1}
details.assume[open] summary::before{content:"\2013"}
details.assume p,details.assume div{font-size:15px;line-height:1.55;color:var(--b1-muted);max-width:74ch;margin-top:4px}

.faq{display:flex;flex-direction:column;gap:10px;max-width:820px}
.faq details{background:var(--b1-white);border:1px solid var(--b1-line);border-radius:14px;padding:4px 20px}
.faq summary{cursor:pointer;list-style:none;font-weight:700;padding:16px 0;display:flex;justify-content:space-between;gap:12px;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:500;font-size:22px;line-height:1;color:var(--b1-blue)}
.faq details[open] summary::after{content:"\2013"}
.faq details p{padding-bottom:18px;color:var(--b1-muted)}

/* ============================== footer =================================== */
footer.site{background:var(--b1-paper);border-top:1px solid var(--b1-line);padding-block:40px;font-size:14px;color:var(--b1-muted)}
footer.site .foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px}
footer.site .foot p{font-size:14px;line-height:1.6;color:var(--b1-muted);max-width:64ch}
footer.site .logo{font-size:20px}
footer.site .logo .mark{width:22px;height:22px}
.foot-legal{color:var(--b1-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--b1-edge)}
.foot-legal:hover{color:var(--b1-blue);text-decoration-color:var(--b1-blue)}
.foot-legal[aria-current]{text-decoration:none}
/* AHA Level's own profiles on other sites (fact sheet v1.3, staging 2026-10-06),
   moved here from the retired theme.css. Official glyphs, unmodified, one colour
   (currentColor); the label is visually hidden but stays in the text. Glyph Muted
   on Paper (6.5:1), control edge Warm Gray (3:1+), Level Blue on hover and focus. */
.foot-social{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;padding:18px 0 0}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;color:var(--b1-muted);border:1px solid var(--b1-edge);transition:color .15s,border-color .15s}
.foot-social a:hover,.foot-social a:focus-visible{color:var(--b1-blue);border-color:var(--b1-blue)}
.foot-social svg{width:18px;height:18px;display:block;fill:currentColor}
.foot-social-t{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion: reduce){.foot-social a{transition:none}}

/* Phones: the header links move to the footer as a grid of 52 px rows, in
   place of a menu button. */
.footnav{display:none}
@media (max-width:900px){
  .footnav{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0 0 28px;background:var(--b1-line);border-block:1px solid var(--b1-line)}
  .footnav a{display:flex;align-items:center;min-height:52px;padding:0 var(--pad);background:var(--b1-white);
    font-size:15px;font-weight:500;color:var(--b1-ink)}
  .footnav a:active,.footnav a:hover{background:var(--b1-blue-soft);color:var(--b1-blue-600)}
  .footnav a:last-child:nth-child(odd){grid-column:1 / -1}
  footer.site .foot{flex-direction:column;align-items:flex-start;gap:18px}
}
@media (max-width:400px){.footnav{grid-template-columns:1fr}}

/* ============================== motion =================================== */
/* Animate transform and opacity only. Under reduced motion nothing moves. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}