/* =========================================================================
   ERISA Benefits Tech — shared stylesheet
   Brand: navy #000066 + brass/gold #B7791F
   Type:  Source Serif 4 (display) · Inter (body) · IBM Plex Mono (labels)
   ========================================================================= */

:root {
  /* Color */
  --navy:        #000066;
  --navy-deep:   #00004a;
  --ink:         #0e1230;   /* body text — very dark navy, not pure black */
  --steel:       #575f73;   /* secondary text */
  --gold:        #b7791f;
  --gold-bright: #cc8a26;
  --ice:         #eef2f9;   /* pale section tint */
  --paper:       #f6f8fc;   /* page background */
  --white:       #ffffff;
  --line:        #e0e5f0;   /* hairlines on light */
  --line-navy:   rgba(255,255,255,.14);
  --muted-navy:  #c6cce6;   /* text on navy */

  /* Type */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Rhythm
     ⚠️ SPEC-09. --wrap went 1120 -> 1240 and --section-y came down, as part of
     one decision rather than three: the page uses its full width, and the
     vertical air between blocks is reduced to match. --wrap-narrow SURVIVES but
     its job changed - it is no longer "the width of a section", it is the width
     of a single centred utility panel (login, 404 sibling states). A section
     that wants a readable line length now caps its TEXT in ch (--measure and
     the .mw-* utilities) and lets the BLOCK span the page. See the SPEC-09 note
     above the layout components below. */
  --wrap: 1240px;
  --wrap-narrow: 760px;
  --gap: clamp(1.25rem, 3vw, 2.25rem);
  --section-y: clamp(3.25rem, 6vw, 5.5rem);

  /* Line length for running prose. One value, used everywhere, so "wide" means
     the same thing on every page.

     ⚠️ 70ch IS NOT 70 CHARACTERS. The CSS `ch` unit is the advance width of the
     digit "0", which in Inter at 17px is 10.7px, while the average character in
     English prose here measures about 9.4px. 70ch therefore renders as ~80 real
     characters per line, which is the top of the comfortable range. The first
     draft of this pass set 92ch on the theory that it meant 92 characters; it
     measured at 105 and was visibly too long to track back to the next line.
     If you change this number, measure a real paragraph rather than trusting
     the unit. */
  --measure: 70ch;
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ⚠️ LINE-HEIGHT 1.48, NOT 1.65 - SPEC-09, and it is the single highest-value
   change in that pass. The FONT SIZE IS UNCHANGED at 1.0625rem; only the
   leading is tighter. 1.65 on a page of this much prose adds roughly a fifth to
   the height of every block, which is why the site scrolled as far as it did.
   Anything that needs looser leading asks for it locally (.article, the module
   body) rather than the whole site paying for it. */
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.48;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--navy); text-decoration-color: rgba(183,121,31,.5); text-underline-offset: 3px; }
a:hover { color: var(--gold); }

h1, h2, h3, h4 { font-family: var(--serif); color: var(--navy); line-height: 1.07; font-weight: 600; margin: 0; letter-spacing: -.012em; }

/* ---- Utility ---- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2.75rem); }
.narrow { max-width: var(--wrap-narrow); }
.section { padding-block: var(--section-y); }
.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.1rem;
  display: block;
}
.eyebrow--onnavy { color: var(--gold-bright); }
.lede { font-size: clamp(1.08rem, 1.5vw, 1.22rem); color: var(--steel); line-height: 1.5; max-width: var(--measure); }

/* Skip link for accessibility.
   ⚠️ .skip-link IS IN THIS SELECTOR BECAUSE TWO PAGES USE THAT CLASS. terms.html
   and privacy.html were authored with `class="skip-link"` while the other eight
   use `class="skip"`, and nothing styled the former - so on those two pages the
   words "Skip to content" rendered as a plain visible link above the header, on
   every visit, for everyone. Found during SPEC-09. Fixed here rather than in the
   markup so that either spelling is safe from now on. */
.skip, .skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: .6rem 1rem; z-index: 100; }
.skip:focus, .skip-link:focus { left: .5rem; top: .5rem; }

/* The inline icon sprite. Present on every page, never rendered itself.
   Position-absolute-and-zero rather than display:none - a display:none sprite
   root has historically stopped <use> resolving in some engines, and this
   technique has not. The width/height ATTRIBUTES on the element are the belt to
   this brace: if the stylesheet fails to load, the sprite is still 0x0. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Wordmark ---- */
.wordmark { font-family: var(--serif); font-weight: 600; font-size: 1.28rem; letter-spacing: -.01em; color: var(--navy); text-decoration: none; display: inline-flex; align-items: baseline; gap: .34em; white-space: nowrap; }
.wordmark:hover { color: var(--navy); }
.wordmark .tech { font-family: var(--sans); font-weight: 300; color: var(--gold); letter-spacing: .01em; }
.wordmark--light { color: #fff; }
.wordmark--light:hover { color: #fff; }
/* Official SVG logo (replaces the styled text wordmark) */
.wordmark { align-items: center; }
.logo-img { height: 42px; width: auto; display: block; }
.site-footer .logo-img { height: 48px; }
@media (max-width: 760px) { .logo-img { height: 34px; } .site-footer .logo-img { height: 42px; } }

/* ---- Header / nav ---- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(246,248,252,.86);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-size: .93rem; font-weight: 500; color: var(--ink);
  text-decoration: none; padding: .35rem 0; position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--gold); transition: right .28s ease;
}
.nav-links a:hover { color: var(--navy); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { right: 0; }
.nav-links a[aria-current="page"] { color: var(--navy); }
/* ⚠️ THE CTA LABEL IS LONGER THAN IT WAS - "Log in or Create a free account"
   rather than "Create a free account" - because a visitor who already has an
   account had no way of telling that this button was also the way back in.
   SPEC-09. The label is why the rules below exist: it does not fit the old nav
   at laptop widths, so the link gap and the button's own type step down between
   761px and 1100px rather than letting the header wrap or the logo shrink. */
.nav-cta {
  font-family: var(--sans); font-size: .88rem; font-weight: 600;
  background: var(--navy); color: #fff !important; text-decoration: none;
  padding: .55rem 1rem; border-radius: 6px; transition: background .2s ease;
  white-space: nowrap;
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--gold); }
.nav-toggle { display: none; }

@media (min-width: 761px) and (max-width: 1100px) {
  .nav-links { gap: 1rem; }
  .nav-links a { font-size: .87rem; }
  .nav-cta { font-size: .8rem; padding: .5rem .8rem; }
  .logo-img { height: 36px; }
}

@media (max-width: 760px) {
  .nav-toggle {
    display: inline-flex; background: none; border: 1px solid var(--line);
    border-radius: 6px; padding: .5rem .7rem; font: inherit; color: var(--navy);
    cursor: pointer; align-items: center; gap: .4rem;
  }
  .nav-links {
    position: absolute; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--white); border-bottom: 1px solid var(--line);
    padding: .5rem 0; box-shadow: 0 18px 40px -24px rgba(14,18,48,.5);
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .nav-links[data-open="true"] { max-height: 420px; }
  .nav-links li { padding: 0 clamp(1.25rem,5vw,2.5rem); }
  .nav-links a { display: block; padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .nav-links li:last-child a { border-bottom: 0; }
  .nav-links a::after { display: none; }
  .nav-cta { display: inline-block; margin: .4rem 0; }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--sans); font-weight: 600; font-size: .96rem;
  padding: .8rem 1.35rem; border-radius: 7px; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer; transition: all .2s ease;
}
.btn--primary { background: var(--gold); color: #fff; }
.btn--primary:hover { background: var(--gold-bright); color: #fff; transform: translateY(-1px); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--gold); color: #fff; }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--navy); color: var(--navy); }
.btn--onnavy { background: transparent; color: #fff; border-color: var(--line-navy); }
.btn--onnavy:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn .arw { transition: transform .2s ease; }
.btn:hover .arw { transform: translateX(3px); }

/* ---- Hero ---- */
.hero { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.hero::after { /* subtle brass hairline horizon, not a gradient blob */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(183,121,31,.6), transparent);
}
.hero-inner { padding-block: clamp(3rem, 6vw, 5rem); }
.hero h1 { color: #fff; font-size: clamp(2.3rem, 4.7vw, 3.6rem); max-width: 18ch; line-height: 1.04; }
/* A two-sentence headline. It needs a smaller step and a longer measure, or it
   stacks into six short lines and stops reading as one thought. Used by the
   training page, whose headline is deliberately a full sentence of address. */
.hero h1.h1--long { font-size: clamp(1.85rem, 3.2vw, 2.65rem); max-width: 34ch; line-height: 1.13; }
.hero h1 .accent { color: var(--gold-bright); }
.hero p.sub { color: var(--muted-navy); font-size: clamp(1.05rem, 1.5vw, 1.2rem); max-width: var(--measure); margin: 1.15rem 0 1.6rem; line-height: 1.5; }

/* A hero carrying a panel beside the copy rather than beneath it. Used on the
   home page, where the question panel is the page's strongest single element
   and was previously pushed below the fold on a laptop. */
.hero-split { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 3.5vw, 3.25rem); }
@media (min-width: 1000px) { .hero-split { grid-template-columns: 1.05fr 1fr; align-items: start; } }
.hero-split .sub { margin-bottom: 1.5rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.hero-cta .plain { color: #fff; font-weight: 500; font-size: .96rem; text-decoration: none; border-bottom: 1px solid var(--line-navy); padding-bottom: 2px; }
.hero-cta .plain:hover { color: var(--gold-bright); border-color: var(--gold-bright); }

/* Signature: the "question panel".
   ⚠️ THE TEXT IN THIS PANEL IS NOT DECORATION AND IS NEVER REPLACED BY A
   PICTURE. SPEC-09 tried a routing schematic here instead and it was rejected on
   sight: the panel states, in words, the actual question a benefits team fields
   and what the Suite does with it, and no diagram carries that. Illustration on
   this site complements prose; where it would substitute for prose, there is no
   illustration. That rule is why the four gap plates are drawn and this is not. */
.qpanel {
  margin-top: 0;
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line-navy);
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  padding: 1.3rem 1.45rem;
}
.hero-inner > .qpanel { margin-top: clamp(2rem, 4vw, 3rem); max-width: 680px; }
.qpanel .qlabel { font-family: var(--mono); font-size: .67rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-navy); }
.qpanel .qtext { font-family: var(--mono); font-size: clamp(.9rem, 1.3vw, .99rem); color: #fff; line-height: 1.5; margin: .5rem 0 .95rem; }
.qpanel .qmeta { display: flex; flex-direction: column; gap: .5rem; font-size: .88rem; line-height: 1.45; }
.qpanel .qmeta .row { display: flex; align-items: flex-start; gap: .6rem; color: var(--muted-navy); }
.qpanel .qmeta .tick { color: var(--gold-bright); font-family: var(--mono); flex: none; }
.qpanel .qmeta .row.route { color: #fff; }

/* ---- Section headings ------------------------------------------------------
   ⚠️ THE WIDTH RULE OF THE WHOLE SITE LIVES IN THESE FOUR DECLARATIONS, so read
   them before adding a max-width anywhere else. SPEC-09.

   Before this pass, roughly half the sections were wrapped in `.wrap narrow`
   (760px) and half in `.wrap` (1120px), with no rule behind which was which -
   the training teaser and the custom-build block were narrow, the gaps and the
   coverage grid were not, and a reader scrolling the home page watched the text
   column change width four times for no reason they could see.

   The rule now: THE BLOCK USES THE PAGE; THE HEADLINE AND THE RUNNING TEXT ARE
   CAPPED IN CHARACTERS, not in pixels, and by the same two numbers everywhere.
   A heading wants ~24 characters so it breaks into two or three strong lines. A
   paragraph wants --measure. Everything structural - plates, tiles, rails,
   tables, document boxes - spans the full wrap.

   That is why `.sec-head` no longer carries a max-width of its own: capping the
   CONTAINER is what produced a half-empty page. The cap belongs on the text. */
.sec-head { margin-bottom: clamp(1.75rem, 3.25vw, 2.75rem); }
.sec-head h2 { font-size: clamp(1.8rem, 3vw, 2.55rem); max-width: 24ch; }
.sec-head p { color: var(--steel); font-size: 1.07rem; margin-top: .85rem; max-width: var(--measure); }
.sec-head p + p { margin-top: .7rem; }
/* Centred variant, for the two places a section is deliberately symmetrical. */
.sec-head--center { text-align: center; }
.sec-head--center h2, .sec-head--center p { margin-inline: auto; }

/* Running prose that is not inside a component. The same cap, so a bare <p>
   after a .sec-head lines up with the intro above it instead of running the
   full 1240. */
.prose { max-width: var(--measure); }
.prose + .prose { margin-top: .8rem; }

/* ---- Thesis / two-col ---- */
.thesis { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
@media (min-width: 820px) { .thesis { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.thesis .gap-note { border-left: 3px solid var(--gold); padding-left: 1.4rem; }
.thesis h3 { font-size: 1.28rem; margin-bottom: .5rem; }
.thesis p { color: var(--steel); }

/* ---- Phases (a real sequence → numbered) ---- */
.phases { border-top: 1px solid var(--line); }
.phase {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.6rem, 3vw, 2.2rem) 0; border-bottom: 1px solid var(--line);
  align-items: start;
}
.phase .num { font-family: var(--mono); font-size: .82rem; font-weight: 500; color: var(--gold); letter-spacing: .12em; padding-top: .35rem; }
.phase h3 { font-size: 1.28rem; margin-bottom: .45rem; }
.phase h3 .tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); margin-left: .8rem; vertical-align: middle; }
.phase p { color: var(--steel); margin: 0; max-width: var(--measure); }
@media (max-width: 560px) {
  .phase { grid-template-columns: 1fr; gap: .4rem; }
  .phase .num { padding-top: 0; }
}

/* ---- Domain chips ---- */
.domains { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.domain {
  font-size: .88rem; font-weight: 500; color: var(--navy);
  background: var(--white); border: 1px solid var(--line);
  padding: .5rem .9rem; border-radius: 999px;
}

/* ---- Why-us list ---- */
.why { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
@media (min-width: 720px) { .why { grid-template-columns: repeat(3, 1fr); } }
.why .card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 1.6rem 1.5rem; }
.why .card .k { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.why .card h3 { font-size: 1.18rem; margin: .7rem 0 .5rem; }
.why .card p { color: var(--steel); font-size: .96rem; margin: 0; }

/* ---- Bands ---- */
.band-ice { background: var(--ice); }
.band-navy { background: var(--navy); color: #fff; }
.band-navy h2 { color: #fff; }
.band-navy .lede { color: var(--muted-navy); }

/* ---- CTA band ---- */
.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); max-width: 22ch; margin-inline: auto; }
.cta-band p { color: var(--muted-navy); max-width: 66ch; margin: .9rem auto 1.7rem; }

/* ---- Footer ---- */
.site-footer { background: var(--navy-deep); color: var(--muted-navy); }
.footer-top { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-block: clamp(2.75rem, 6vw, 4rem); }
@media (min-width: 720px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer .wordmark { margin-bottom: 1rem; }
.footer-col h4 { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: #fff; font-weight: 500; margin-bottom: .9rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: .55rem; }
.footer-col a { color: var(--muted-navy); text-decoration: none; font-size: .95rem; }
.footer-col a:hover { color: #fff; }
.footer-contact { font-size: .93rem; line-height: 1.7; }
.footer-contact a { color: var(--muted-navy); }
.footer-bottom { border-top: 1px solid var(--line-navy); padding-block: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; font-size: .82rem; }
.disclaimer { max-width: var(--measure); color: var(--muted-navy); font-size: .81rem; line-height: 1.45; }

/* ---- Article / blog ---- */
.post-hero { border-bottom: 1px solid var(--line); }
.post-meta { font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; }
.post-meta .tag { color: var(--gold); }
.post-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 1rem 0 .8rem; max-width: 22ch; }
.post-hero .standfirst { font-size: 1.2rem; color: var(--steel); max-width: 60ch; }

.article { font-size: 1.07rem; line-height: 1.58; color: var(--ink); }
.article > * + * { margin-top: 1.05rem; }
.article h2 { font-size: 1.6rem; margin-top: 2.6rem; }
.article h3 { font-size: 1.28rem; margin-top: 2rem; }
.article p { color: #23283f; }
.article a { color: var(--navy); }
.article ul, .article ol { padding-left: 1.4rem; }
.article li { margin-top: .5rem; }
.article ol { counter-reset: item; list-style: none; padding-left: 0; }
.article ol > li { counter-increment: item; padding-left: 2.4rem; position: relative; }
.article ol > li::before {
  content: counter(item); position: absolute; left: 0; top: .1rem;
  font-family: var(--mono); font-size: .82rem; font-weight: 600; color: var(--gold);
  background: var(--ice); width: 1.7rem; height: 1.7rem; border-radius: 6px;
  display: grid; place-items: center;
}
.article blockquote {
  border-left: 3px solid var(--gold); margin: 2rem 0; padding: .3rem 0 .3rem 1.4rem;
  font-family: var(--serif); font-size: 1.25rem; color: var(--navy); font-style: italic;
}
.article code { font-family: var(--mono); font-size: .9em; background: var(--ice); padding: .12em .4em; border-radius: 4px; }
.article hr { border: 0; border-top: 1px solid var(--line); margin: 2.6rem 0; }
.article .callout {
  background: var(--ice); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 8px; padding: 1.2rem 1.4rem; font-size: 1rem;
}
.article .callout strong { color: var(--navy); }

.back-link { font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); text-decoration: none; display: inline-flex; gap: .5rem; align-items: center; }
.back-link:hover { color: var(--gold); }
.post-foot { border-top: 1px solid var(--line); margin-top: 3.5rem; padding-top: 2rem; }

/* ---- Blog index list ---- */
.blog-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.filter {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase;
  background: var(--white); border: 1px solid var(--line); color: var(--steel);
  padding: .45rem .85rem; border-radius: 999px; cursor: pointer; transition: all .18s ease;
}
.filter:hover { border-color: var(--navy); color: var(--navy); }
.filter[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

.post-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.post-item { border-bottom: 1px solid var(--line); }
.post-item a { display: grid; grid-template-columns: 1fr; gap: .4rem; padding: 1.8rem 0; text-decoration: none; color: inherit; transition: background .18s ease; }
@media (min-width: 720px) { .post-item a { grid-template-columns: 180px 1fr; gap: 2rem; align-items: baseline; } }
.post-item:hover .pi-title { color: var(--gold); }
.pi-date { font-family: var(--mono); font-size: .8rem; letter-spacing: .05em; color: var(--steel); text-transform: uppercase; }
.pi-title { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; color: var(--navy); line-height: 1.2; transition: color .18s ease; }
.pi-sum { color: var(--steel); font-size: 1rem; margin-top: .5rem; }
.pi-tags { margin-top: .6rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.pi-tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.blog-empty { padding: 3rem 0; color: var(--steel); font-family: var(--mono); font-size: .9rem; }

/* ---- Contact ---- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
@media (min-width: 820px) { .contact-grid { grid-template-columns: 1.2fr 1fr; } }
.contact-card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: clamp(1.6rem, 3vw, 2.2rem); }
.contact-card dl { margin: 0; }
.contact-card dt { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-top: 1.3rem; }
.contact-card dt:first-child { margin-top: 0; }
.contact-card dd { margin: .3rem 0 0; font-size: 1.05rem; color: var(--ink); }
.contact-card dd a { color: var(--navy); }

/* ---- Reveal on scroll ---- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Affiliate tagline (hero) */
.hero .affiliate-line { font-family: var(--mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-navy); margin-top: 1.2rem; }
.hero .affiliate-line strong { color: var(--gold-bright); font-weight: 500; }

/* ============================================================
   SUITE / TRAINING / CONTACT / LOGIN COMPONENTS
   Added in the 2026 rebuild. Tokens only — no new colors or faces.
   ============================================================ */

/* Two-column framing with affirm/deny lists */
.split { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3.5vw, 3.25rem); }
@media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; } }
.split h3 { font-size: 1.16rem; margin-bottom: .85rem; }

/* ---- Lists with icons ------------------------------------------------------
   ⚠️ THE MARKER IS AN <svg><use> CHILD, NOT A ::before CONTENT STRING, AND THE
   REASON IS THE CSP. The obvious upgrade - a small SVG as a background-image
   data: URI on ::before - IS BLOCKED SITE-WIDE: the policy is `default-src
   'self'` with no img-src of its own, so a data: URL in CSS never loads. The
   marker would simply not appear, on every page, silently. See the sprite
   comment at the top of any page for the same reasoning applied to <use>.

   The old "+" and "\2013" ::before markers are gone rather than kept as a
   fallback, because a page that shipped both would show two bullets. */
.plainlist { list-style: none; margin: 0; padding: 0; }
.plainlist li {
  display: grid; grid-template-columns: 1.35rem 1fr; gap: .7rem;
  align-items: start; margin-bottom: .65rem; color: var(--steel);
}
.plainlist li:last-child { margin-bottom: 0; }
.plainlist .li-ico { width: 1.15rem; height: 1.15rem; margin-top: .16rem; flex: none; }
.plainlist--yes .li-ico { color: var(--gold); }
.plainlist--no  .li-ico { color: #98a1ba; }
.plainlist strong { color: var(--ink); font-weight: 600; }
.band-navy .plainlist li { color: var(--muted-navy); }
.band-navy .plainlist strong { color: #fff; }

/* ---- Card grids: coverage clusters and curriculum topics -------------------
   Short labels, so columns are correct here - the SPEC-09 objection to columns
   was about PARAGRAPHS side by side, which force the reader down one column and
   back up the next. A four-word practice-area name has no such problem. */
.clusters, .topics { display: grid; grid-template-columns: 1fr; gap: 1.15rem; }
@media (min-width: 640px) { .clusters, .topics { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .clusters { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1040px) { .topics { grid-template-columns: repeat(3, 1fr); } }
.cluster, .topic {
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.35rem 1.3rem; transition: transform .2s ease, box-shadow .2s ease;
}
.cluster:hover, .topic:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -32px rgba(14,18,48,.55); }
@media (prefers-reduced-motion: reduce) { .cluster:hover, .topic:hover { transform: none; } }
.ring {
  width: 44px; height: 44px; border-radius: 50%; background: rgba(183,121,31,.1);
  display: grid; place-items: center; color: var(--gold); margin-bottom: .8rem;
}
.ring svg { width: 23px; height: 23px; }
.cluster .k, .topic .k { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--steel); display: block; }
.cluster h3 { font-size: 1.04rem; margin: .35rem 0 .7rem; line-height: 1.2; }
.topic h3 { font-size: 1.06rem; margin: .35rem 0 .6rem; line-height: 1.22; }
.cluster ul { list-style: none; margin: 0; padding: 0; }
.cluster li { font-size: .89rem; color: var(--steel); padding: .28rem 0; border-top: 1px solid var(--line); line-height: 1.4; }
.cluster li:first-child { border-top: 0; }
.topic p { color: var(--steel); font-size: .94rem; margin: 0; }

/* ---- PLATES: one full-width row per idea ----------------------------------
   ⚠️ THIS COMPONENT IS THE ANSWER TO THE SPEC-09 COMPLAINT ABOUT THE FOUR GAPS.
   They were a three-up card grid, which meant three columns of five-line
   paragraphs: the reader went down column one, back up, down column two, back
   up. Each gap is now ONE ROW ACROSS THE PAGE - prose on one side, a drawn
   schematic on the other, sides alternating so the page has a rhythm.

   ⚠️ THE DRAWING NEVER CARRIES A FACT THE PROSE DOES NOT. It is read second, by
   people who skim, and it is not read at all by a screen reader beyond its
   aria-label. Anything load-bearing - what closes the gap, what the notice says
   - is in the text. The illustration earns its place by making an abstract
   claim concrete, not by saving words. */
.plate {
  display: grid; grid-template-columns: 1fr; gap: clamp(1.4rem, 3.25vw, 3.25rem);
  align-items: center; padding-block: clamp(1.75rem, 3.25vw, 2.75rem);
  border-top: 1px solid var(--line);
}
.plate:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 940px) {
  .plate { grid-template-columns: 1fr 1.05fr; }
  /* ⚠️ THE TRACK WIDTHS SWAP WITH THE ORDER, NOT JUST THE ORDER. `order: -1`
     moves the drawing into the FIRST track, so without this the drawing is
     1fr on a flipped row and 1.05fr on a normal one - the four plates would
     step in and out by 27px down the page, which reads as a wobble rather than
     as an alternation. */
  .plate--flip { grid-template-columns: 1.05fr 1fr; }
  .plate--flip .plate-art { order: -1; }
}
.plate-k { display: inline-flex; align-items: center; gap: .65rem; font-family: var(--mono); font-size: .71rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.plate-k::before { content: ""; width: 26px; height: 1px; background: currentColor; display: block; }
.plate-text h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); margin: .55rem 0 .65rem; max-width: 26ch; line-height: 1.12; }
.plate-text p { color: var(--steel); max-width: 62ch; }
.plate-art { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--white); box-shadow: 0 22px 48px -34px rgba(14,18,48,.5); }
.plate-art svg { display: block; width: 100%; height: auto; }
/* The "what closes it" aside. Distinct from .goldnote because it sits inside a
   plate and needs a fill to separate it from the paragraph above. */
.closes {
  margin-top: 1rem; background: var(--ice); border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0; padding: .8rem 1.05rem;
  font-size: .93rem; color: var(--ink); line-height: 1.45; max-width: 64ch;
}
.band-ice .closes { background: var(--white); }
.closes strong { color: var(--navy); }

/* A standalone figure that is not part of a plate - one drawing under a section
   head, spanning the page. */
.figure { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--white); box-shadow: 0 22px 48px -34px rgba(14,18,48,.5); }
.figure svg { display: block; width: 100%; height: auto; }
.figure-cap { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); margin: .8rem 0 0; }
.band-navy .figure { background: rgba(255,255,255,.04); border-color: var(--line-navy); box-shadow: none; }
.band-navy .figure-cap { color: var(--muted-navy); }

/* The product's own notice, shown as a specimen */
.notice { background: var(--navy); color: #fff; border-radius: 12px; border-left: 3px solid var(--gold);
  padding: 1.2rem 1.4rem; margin-bottom: 1rem; font-family: var(--mono); font-size: .8rem; line-height: 1.6; }
.notice .warn { color: var(--gold-bright); font-weight: 500; }
.notice .stamp { color: var(--muted-navy); }
.notice-cap { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--steel); margin: 0 0 .7rem; }

/* ---- Pricing tiers, as full-width rows -------------------------------------
   ⚠️ THE OLD THREE-COLUMN CARD GRID IS GONE, AND THE CLASS NAMES CHANGED WITH
   IT ON PURPOSE. `.tiers`/`.tier` used to mean "three cards side by side" here
   AND was the class on the purchase form's <fieldset> - where it dealt the
   legend, the explanatory notes and the quoted §4.1 and §7.2 terms into three
   narrow columns as well, which is not something anyone chose. One name doing
   two unrelated jobs is how that happened, so the marketing list is `.tierlist`
   and the purchase form's control group is `.tier-choice` (account.css), and
   neither can reach the other.

   Rows, not cards, because a buyer compares three prices and three scope
   sentences. In columns the prices sit at three different heights - the scope
   text above them is different lengths - and the eye has to travel. In rows the
   price column is right-aligned and the three line up. */
.tierlist { border-top: 1px solid var(--line); }
.tier-row {
  display: grid; grid-template-columns: 1fr; gap: .5rem 2rem;
  padding-block: 1.35rem; border-bottom: 1px solid var(--line); align-items: baseline;
}
@media (min-width: 800px) { .tier-row { grid-template-columns: 13rem minmax(0, 1fr) 12rem; } }
.tier-row .k { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: .3rem; }
.tier-row h3 { font-size: 1.2rem; }
.tier-row p { color: var(--steel); font-size: .96rem; margin: 0; max-width: 72ch; }
.tier-row .price { font-family: var(--serif); font-size: 1.9rem; font-weight: 600; color: var(--navy); line-height: 1; }
.tier-row .renew { font-family: var(--mono); font-size: .74rem; color: var(--steel); margin: .4rem 0 0; }
@media (min-width: 800px) { .tier-row .pricecol { text-align: right; } }

/* Requirement / fine-print strip */
.reqs { border-top: 1px solid var(--line); margin-top: 1.6rem; padding-top: 1.3rem; }
.reqs h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.reqs p { color: var(--steel); font-size: .96rem; margin: 0; max-width: var(--measure); }

/* ---- Long instruments: a rail beside the document -------------------------
   terms.html is four published instruments end to end and privacy.html is one.
   Both were in `.wrap narrow`, which is the one place that choice was defensible
   - 554 lines of legal text at the full 1240 would be unreadable - but it left
   two thirds of a wide screen empty and gave the reader no way to see where they
   were.

   So the SECTION spans the page and the TEXT keeps a reading measure, with the
   space that buys spent on a sticky index of the documents. Same answer as the
   plates: fill the width with something useful rather than by stretching the
   line length. */
.doc-layout { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
@media (min-width: 1000px) { .doc-layout { grid-template-columns: 15rem minmax(0, 1fr); } }
.doc-rail { position: static; }
@media (min-width: 1000px) { .doc-rail { position: sticky; top: 88px; } }
.doc-rail h2 { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--steel); font-weight: 500; margin-bottom: .75rem; }
.doc-rail ol { list-style: none; margin: 0; padding: 0; counter-reset: doc; }
.doc-rail li { counter-increment: doc; border-top: 1px solid var(--line); }
.doc-rail li:last-child { border-bottom: 1px solid var(--line); }
.doc-rail a { display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; padding: .6rem 0; font-size: .92rem; text-decoration: none; color: var(--ink); line-height: 1.3; }
.doc-rail a::before { content: counter(doc, decimal-leading-zero); font-family: var(--mono); font-size: .72rem; color: var(--gold); padding-top: .15rem; }
.doc-rail a:hover { color: var(--gold); }
/* ⚠️ min-width: 0 IS LOAD-BEARING, NOT TIDINESS. A grid item defaults to
   `min-width: auto`, which means the track refuses to shrink below the item's
   min-content width. terms.html carries the LICENSE.txt excerpt in a
   `<pre class="codeblock">`, whose min-content width is its longest line - so on
   a phone the text track grew to 615px, dragged the rail out with it, and gave
   the whole page a horizontal scrollbar. The <pre> already has overflow-x: auto
   and scrolls itself once the track is allowed to be narrow. Introduced by the
   grid in this pass and caught at 375px; do not remove. */
.doc-layout > * { min-width: 0; }
.doc-body { max-width: var(--measure); }
.doc-body h3 { font-size: 1.12rem; margin: 1.6rem 0 .5rem; }
.doc-body p { margin: 0 0 .6rem; }

/* Session lists, rendered from assets/data/seminars.json */
.sessions { list-style: none; margin: 0; padding: 0; }
.session { border-top: 1px solid var(--line); padding: 1.4rem 0; display: grid; grid-template-columns: 1fr; gap: .5rem; }
@media (min-width: 760px) { .session { grid-template-columns: 12rem 1fr auto; gap: 1.5rem; align-items: start; } }
.session:first-child { border-top: 0; }
.s-when { font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; color: var(--gold);
  text-transform: uppercase; padding-top: .2rem; }
.s-title { font-family: var(--serif); font-size: 1.16rem; font-weight: 600; color: var(--navy); line-height: 1.3; }
.s-sum { color: var(--steel); font-size: .94rem; margin: .4rem 0 0; }
.s-meta { font-family: var(--mono); font-size: .74rem; color: var(--steel); margin-top: .5rem; }
.s-action { white-space: nowrap; padding-top: .2rem; }

/* Empty states — an invitation, not a dead end */
.empty { border: 1px dashed var(--line); border-radius: 12px; padding: 1.8rem 1.6rem; background: var(--white); }
.empty p { margin: 0; color: var(--steel); max-width: var(--measure); }
.empty p + p { margin-top: .8rem; }

/* Notify / highlighted callout panel */
.notify { background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 12px; padding: 1.7rem 1.6rem; }
.notify h3 { font-size: 1.16rem; margin: 0 0 .6rem; }
.notify p { color: var(--steel); margin: 0 0 1.1rem; max-width: var(--measure); }

/* Principles list (Approach, folded into Home) */
.principles { display: grid; grid-template-columns: 1fr; gap: 1.5rem 2.5rem; }
@media (min-width: 900px) { .principles { grid-template-columns: 1fr 1fr; } }
.principle { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: start; }
.principle .num { font-family: var(--mono); font-size: .95rem; font-weight: 500; color: var(--gold);
  border-top: 2px solid var(--gold); padding-top: .5rem; }
/* The icon variant, used where the list is a set rather than a sequence - the
   three reasons people write on contact.html were numbered 01/02/03 and are not
   in any order. No rule above an icon; the rule reads as "step one of three". */
.principle .num--ico { border-top: 0; padding-top: 0; color: var(--gold); }
.principle .num--ico svg { width: 26px; height: 26px; }
.principle h3 { font-size: 1.1rem; margin: 0 0 .5rem; line-height: 1.3; }
.principle p { color: var(--steel); font-size: .95rem; margin: 0; max-width: 62ch; }

/* Contact + form fields */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
@media (min-width: 860px) { .contact-grid { grid-template-columns: 1.1fr 1fr; } }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--steel); margin-bottom: .4rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: .75rem .85rem; font-family: var(--sans); font-size: 1rem; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: 8px; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.field textarea { min-height: 8rem; resize: vertical; }
.form-note { font-size: .86rem; color: var(--steel); margin-top: 1rem; }

/* Centered narrow utility panel (login, 404) */
.panel-center { max-width: 30rem; margin: 0 auto; }

/* =========================================================================
   SELF-HOSTED TYPEFACES — SPEC-03 1.11, acceptance row 262
   =========================================================================

   ⚠️ WHY THESE ARE HERE RATHER THAN AT fonts.googleapis.com.

   Privacy Notice §3.4 says EBT uses no third-party trackers, and §8.1 names the
   processors it does use — GoDaddy, Postmark, Stripe. Until this block existed,
   the seven static marketing pages and the three blog pages loaded three
   typefaces from Google, which disclosed EVERY VISITOR'S IP ADDRESS AND PAGE URL
   to a host named in neither section. That is not a tracker in intent; it is a
   disclosure to a processor the notice does not list, which is what §8.1 is a
   promise about.

   SPEC-02-AS-BUILT 1.4 recorded it as "not session-two work; not optional
   either", and the account pages have never done it — they carry no font link at
   all and render from the fallback stacks below.

   ⚠️ IF THE .woff2 FILES ARE ABSENT, THESE RULES DEGRADE TO THE FALLBACK STACK
   AND NOTHING BREAKS. The browser tries the local file, fails, and uses Georgia /
   the system UI stack / the system monospace — which is exactly what every .php
   page in this build already looks like. Acceptance row 262 checks BOTH that no
   page requests fonts.googleapis.com AND that the files exist, so it stays
   BLOCKED rather than reporting a half-done job as finished.

   See assets/fonts/README.md for exactly which files to place and where they
   come from. All three families are SIL Open Font License 1.1, which permits
   redistribution — that was checked before this block was written, because
   self-hosting a font you are not licensed to redistribute trades a privacy
   problem for a licensing one.

   font-display: swap — text renders immediately in the fallback and switches
   when the face arrives. The alternative, an invisible-text pause, is a worse
   experience for a marketing page and a much worse one on a slow connection.

   ⚠️ format("woff2"), NOT format("woff2-variations"), ON THE TWO VARIABLE FACES.
   The first draft of this block used the latter. It was never standardised — the
   specification settled on format("woff2") tech(variations) — and A BROWSER THAT
   DOES NOT RECOGNISE A FORMAT STRING SKIPS THE SOURCE ENTIRELY AND FALLS BACK,
   silently. That is the same failure class as everything else in this file:
   the page would render in Georgia, look very slightly wrong, and say nothing.
   format("woff2") is understood everywhere, and the `font-weight` RANGE below is
   what tells the browser the face is variable.

   The two variable files carry a `wght` axis; the two IBM Plex Mono files are
   static weights, because that family's variable build is not what the pages use.
   All four are latin-subset — this site publishes no non-Latin text — so a
   character outside that range falls back per-character, which is correct rather
   than a gap.
   ========================================================================= */

@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* =========================================================================
   UTILITIES — SPEC-03 1.11, acceptance row 263
   =========================================================================

   ⚠️ THESE REPLACE 68 INLINE style ATTRIBUTES ACROSS TEN PAGES, and the reason
   is the Content-Security-Policy rather than tidiness.

   The CSP is `default-src 'self'` with no `unsafe-inline`. Applied to a page
   carrying inline styles, THE BROWSER DROPS THEM WITHOUT ERRORING — the page
   renders, in the wrong typeface, with layout attributes missing, and nothing
   complains. SPEC-02-AS-BUILT 1.4 is the record of that: applied site-wide on
   the day it shipped it would have broken all seven static pages silently, which
   is why it was scoped to `<FilesMatch "\.php$">` instead.

   ⚠️ SO THE ORDER OF THIS WORK IS NOT NEGOTIABLE, and acceptance row 264
   enforces it: self-host the fonts, move the inline styles, and WIDEN THE CSP
   LAST. A prematurely-broad control is quieter than a narrow one and therefore
   worse.

   Named for what they do rather than what they look like, and kept to the
   values the pages actually used — this is not a utility framework and should
   not become one. If a page needs a new value, add the rule to the component it
   belongs to first and reach for a utility only when it is genuinely one-off.
   ========================================================================= */

/* Spacing. The scale is the one the pages already used, not a new one. */
.m0        { margin: 0; }
.mt0       { margin-top: 0; }
.mb0       { margin-bottom: 0; }
.mt-08     { margin-top: .8rem; }
.mt-1      { margin-top: 1rem; }
.mt-11     { margin-top: 1.1rem; }
.mt-14     { margin-top: 1.4rem; }
.mt-16     { margin-top: 1.6rem; }
.mt-18     { margin-top: 1.8rem; }
.mt-2      { margin-top: 2rem; }
.mt-24     { margin-top: 2.4rem; }
.mb-1      { margin-bottom: 1rem; }
.mb-14     { margin-bottom: 1.4rem; }
.mb-16     { margin-bottom: 1.6rem; }
.pt-hero   { padding-top: clamp(3rem, 7vw, 5rem); }

/* Measure. Headline line-lengths, in characters, as the pages set them. */
.mw-24     { max-width: 24ch; }
.mw-26     { max-width: 26ch; }
.mw-30     { max-width: 30ch; }
.mw-32     { max-width: 32ch; }
.mw-62     { max-width: 62ch; }

/* Colour. */
.t-steel   { color: var(--steel); }
.t-gold    { color: var(--gold-bright); }
.t-onnavy  { color: #fff; font-weight: 600; }

/* Structural one-offs. */
.bt0       { border-top: 0; }
.grid-1    { grid-template-columns: 1fr; }

/* A gold-ruled aside. Three weights existed inline with slightly different
   colours and sizes; they are kept distinct rather than merged, because the one
   on a navy band needs different text colour from the two on light. */
.goldnote {
  margin-top: .9rem; padding-left: 1rem;
  border-left: 3px solid var(--gold);
  color: var(--ink); font-size: .92rem;
}
.goldnote--steel {
  margin-top: 1.2rem; padding-left: 1.2rem;
  border-left: 3px solid var(--gold);
  color: var(--steel); font-size: .95rem;
}
.goldnote--navy {
  margin-top: 1.4rem; padding-left: 1.2rem;
  border-left: 3px solid var(--gold);
  color: var(--muted-navy); font-size: .95rem;
}

/* A preformatted block on a marketing page — the licence excerpt on terms.html.
   font-family is the variable rather than a literal, so it follows the same
   self-hosted face as everything else. */
.codeblock {
  overflow-x: auto; white-space: pre;
  font-family: var(--mono); font-size: .82rem; line-height: 1.6;
  background: rgba(0, 0, 0, .03);
  padding: 1.4rem; border-radius: 4px;
}