/* base.css — reset, typography, layout primitives, focus/motion. */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  /* B3 — NO EVIDENCE IDENTIFIER MAY WIDEN THE DOCUMENT.
     This is an evidence product: record identifiers, SHA-256 digests, signature
     class names and WORM generations are the copy. `word-break:break-word` was
     pinned on `.receipt-example` and `.meta-code`, but that only covers the two
     elements someone thought of, and it does not lower a box's min-content
     contribution, so a long run in a flex or grid child still widens the track.
     The geometric audit plants a 96-character unbroken token and found the
     evidence chain -- an ordinary paragraph, not one of the two pinned classes
     -- pushing the document 473px sideways at 360px.
     `break-word` inherits, so every text container absorbs the token instead of
     the page, and it breaks a word ONLY when that word would otherwise
     overflow: ordinary prose is unaffected. `anywhere` also closes the geometry
     -- measured, 1500 cells, identical result -- but it additionally lowers
     min-content, which let the footer's contact address break mid-word inside
     its grid track. Same protection, no typographic cost. */
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3{color:var(--text);line-height:var(--lh-head);letter-spacing:-.01em;margin:0 0 var(--space-4);}
p{margin:0 0 var(--space-4);}
ul,ol{margin:0 0 var(--space-4);padding-left:1.2em;}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.measure{max-width:var(--measure);}

.mono{font-family:var(--font-mono);}
/* Canon overline: mono, uppercase, wide-tracked, master-brand gold. */
.eyebrow,.label{
  font-family:var(--font-mono);
  font-size:var(--fs-mono-label);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.24em;
  color:var(--accent-gold);
  margin:0 0 var(--space-4);
}

/* Canon display type: serif for major headings, hierarchy from type not weight. */
.hero-head{font-family:var(--font-serif);font-size:var(--fs-hero);font-weight:600;letter-spacing:-.5px;line-height:var(--lh-tight);margin:0 0 var(--space-6);}
.page-title{font-family:var(--font-serif);font-size:var(--fs-h2);font-weight:600;letter-spacing:-.4px;margin:0 0 var(--space-4);}
.section-head{font-family:var(--font-serif);font-size:var(--fs-h2);font-weight:600;letter-spacing:-.4px;margin:0 0 var(--space-6);}
.lede{font-size:var(--fs-lede);color:var(--muted);}
.fine-print{font-size:var(--fs-small);color:var(--faint);}
.text-link{color:var(--accent);font-weight:600;}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--pill-bg);color:var(--pill-fg);
  padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);
}
.skip-link:focus{left:var(--space-4);top:var(--space-4);text-decoration:none;}

/* Family-wide focus is canon gold, not the product accent. */
:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--focus);outline-offset:2px;border-radius:6px;
}

/* Theme transition.
   Gated behind .theme-ready, which theme-toggle.js adds two frames after load.
   Before that nothing transitions, so the FIRST paint is never animated -- an
   ungated rule would make every page load visibly fade from the previous
   theme, which is the flash it was supposed to prevent.

   Properties are enumerated, never `transition: all`. `all` would animate
   layout-affecting properties too, costing frames and risking visible reflow
   during a switch that should only be a colour change. */
:root.theme-ready body,
:root.theme-ready .site-header,
:root.theme-ready .primary-nav,
:root.theme-ready .card,
:root.theme-ready .section-alt,
:root.theme-ready .theme-toggle,
:root.theme-ready .nav-toggle,
:root.theme-ready .btn,
:root.theme-ready .receipt,
:root.theme-ready .price-card,
:root.theme-ready .tier-item{
  transition:
    background-color var(--dur-color) var(--ease),
    color var(--dur-color) var(--ease),
    border-color var(--dur-color) var(--ease),
    box-shadow var(--dur-color) var(--ease),
    fill var(--dur-color) var(--ease),
    stroke var(--dur-color) var(--ease);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  /* The switch still happens and still lands on the identical final state --
     it simply arrives immediately, with no spatial movement. */
  .theme-toggle .i-sun,.theme-toggle .i-moon{transform:none!important;}
}

@media print{
  .site-header,.site-footer,.cta-band,.theme-toggle,.nav-toggle,.cta-row{display:none!important;}
  body{color:#000;background:#fff;}
  .price-card,.tier-item,.receipt{break-inside:avoid;}
}