/* ============================================================================
   Kenbe Sa Ou Bati · Keep What You Built
   Design system. One file, loaded by every page.

   Built for the actual reader: a frightened business owner, on a mid range
   Android phone, on cellular data, reading in a second language, at night.
   Every decision below serves that person.

     Big type.            Nothing under 17px in body copy.
     Big targets.         Nothing tappable under 48px.
     Bold visuals.        Icons and charts carry meaning, not decoration.
     No layout shift.     System fonts for body. One display face, swapped.
     AA contrast.         Checked on every text and background pair.

   Palette is GHACC's own, sampled from the seal artwork rather than guessed.
   ========================================================================== */

/* ---- tokens -------------------------------------------------------------- */

:root {
  /* brand. Sampled from the GHACC seal: ring #052395, banner #FE0000. */
  --blue:        #052395;   /* primary. Headers, buttons, wordmark. 12.5:1   */
  --blue-deep:   #03134F;   /* hero and footer bands. White on it, 17.4:1    */
  --blue-soft:   #1A359E;   /* links on white, hover states. 10.3:1          */
  /* The seal red is #FE0000. It only reaches 4.0:1, and both places this
     token is used carry text: the eyebrow and the primary button. This is
     that red darkened to clear AA. The exact value stays in the logo art. */
  --red:         #D50101;   /* accent. Used sparingly, never for body text.  */
  --amber:       #E0A038;   /* highlight, the "keep" path, seal              */

  /* neutrals */
  --cream:       #FBF7EF;   /* page background. Warmer than white, easier.   */
  --paper:       #FFFFFF;
  --ink:         #16191F;   /* body text on cream. 15.8:1                    */
  --ink-soft:    #454B57;   /* secondary text. 8.1:1 on cream                */
  --ink-faint:   #6B7280;   /* captions only. 4.9:1 on cream                 */
  --rule:        #DFD8C9;
  --rule-strong: #C4BAA6;

  /* semantic. Never the only carrier of meaning. Always paired with an icon. */
  --keep:        #16704A;   /* the good path. Keep and earn.                 */
  --keep-bg:     #E4F0E9;
  --sell:        #A02318;   /* the costly path. Panic sale.                  */
  --sell-bg:     #FBE9E7;
  --warn-bg:     #FDF3DF;

  /* type */
  --display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* fluid scale. Clamp keeps phone sizes generous without capping desktop. */
  --t-xs:   0.875rem;
  --t-sm:   1rem;
  --t-base: clamp(1.0625rem, 1.0rem + 0.35vw, 1.1875rem);  /* 17 to 19px     */
  --t-lg:   clamp(1.25rem,  1.15rem + 0.5vw,  1.5rem);
  --t-xl:   clamp(1.5rem,   1.3rem  + 1.0vw,  2rem);
  --t-2xl:  clamp(1.875rem, 1.5rem  + 1.8vw,  2.75rem);
  --t-3xl:  clamp(2.25rem,  1.7rem  + 2.8vw,  3.75rem);
  --t-hero: clamp(2.5rem,   1.8rem  + 4.0vw,  4.5rem);

  /* space */
  --gap:      1rem;
  --gap-lg:   1.75rem;
  --pad-x:    clamp(1.25rem, 5vw, 2rem);
  --band-y:   clamp(3.5rem, 9vw, 6.5rem);
  --wrap:     min(1140px, 100% - (var(--pad-x) * 2));
  --wrap-narrow: min(680px, 100% - (var(--pad-x) * 2));
  /* Documents and long forms, not prose. 680 is the right measure for a
     paragraph somebody reads straight through; it is too tight for the
     Blueprint Builder and for a written plan, where a full sentence set as a
     heading has nowhere to go and ends up looking enormous. */
  --wrap-doc: min(880px, 100% - (var(--pad-x) * 2));

  --radius:    14px;
  --radius-lg: 22px;
  --shadow:    0 1px 2px rgba(6, 24, 58, .06), 0 8px 24px rgba(6, 24, 58, .08);
  --shadow-lg: 0 2px 6px rgba(6, 24, 58, .08), 0 18px 48px rgba(6, 24, 58, .14);
}

/* One display face, one weight range, swapped so text paints immediately.
   Body uses system fonts so the first paint costs zero network. */
@font-face {
  font-family: "Fraunces";
  src: url("https://fonts.gstatic.com/s/fraunces/v35/6NUh8FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0K7iN7hzFUPJH58nib1603gg7S2nfgRYIcMQ.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}

/* ---- reset --------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The hidden attribute is only display:none from the UA stylesheet, so any
   rule or inline style that sets display beats it and the element stays on
   screen. That is how /seal shipped both its answers at once, the approved
   card and the not-approved card, on the same page. Several pages here toggle
   panels with .hidden = true; make the attribute actually win. */
[hidden] { display: none !important; }

img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Visible focus everywhere. Never remove it. Half this audience will be
   navigating with a keyboard or a screen reader at some point. */
:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* Skip link. Appears on keyboard focus. */
.skip {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  background: var(--blue); color: #fff; padding: .85rem 1.5rem;
  border-radius: 0 0 var(--radius) var(--radius); z-index: 200; font-weight: 700;
  transition: top .18s ease;
}
.skip:focus { top: 0; }

/* ---- type ---------------------------------------------------------------- */

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); font-weight: 700; }

/* The report's headline is an h1 by rank but a full sentence by content: the
   model writes one line specific to the reader, not a two word title. At
   display size that sets 60px type across a whole paragraph and reads as
   shouting rather than as a document. Size it as what it is. */
#headline {
  font-size: var(--t-xl);
  line-height: 1.22;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--red);
}
.eyebrow.on-dark { color: var(--amber); }

.lede {
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}

p + p { margin-top: 1em; }
.measure { max-width: 62ch; }
.center { text-align: center; }
.center .measure { margin-inline: auto; }

a { color: var(--blue-soft); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--blue); }

strong, b { font-weight: 700; }
.hl { background: linear-gradient(transparent 62%, #F7DFA8 62%); }

/* ---- layout -------------------------------------------------------------- */

.wrap        { width: var(--wrap); margin-inline: auto; }
.wrap-narrow { width: var(--wrap-narrow); margin-inline: auto; }
.wrap-doc    { width: var(--wrap-doc);    margin-inline: auto; }

.band { position: relative; padding-block: var(--band-y); }
.band.cream  { background: var(--cream); }
.band.paper  { background: var(--paper); }
.band.navy   { background: var(--blue-deep); color: #EEF2F9; }
.band.navy h1, .band.navy h2, .band.navy h3 { color: #fff; }
.band.navy .lede { color: #C3CFE3; }
/* :not(.btn) matters. Without it this rule (0,2,1) outranks .btn-primary
   (0,1,0) and repaints every button label amber, which makes the amber
   button's text invisible against its own background. */
.band.navy a:not(.btn) { color: var(--amber); }

.stack   > * + * { margin-top: var(--gap); }
.stack-lg > * + * { margin-top: var(--gap-lg); }

.grid { display: grid; gap: var(--gap-lg); }
@media (min-width: 720px)  { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px)  { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
/* Five is only for the vetting steps. It stays two-up until there is real
   room, because five cramped columns read as a table, not as a sequence. */
@media (min-width: 720px)  { .grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid-5 { grid-template-columns: repeat(5, 1fr); } }

/* ---- section dividers ----------------------------------------------------
   Slanted, curved, and diagonal edges between bands. Pure CSS where a clip
   path does the job, inline SVG where the shape needs a real curve.
   Each divider sits INSIDE the band it belongs to so the band's own
   background colour fills the shape.
   -------------------------------------------------------------------------- */

.edge {
  position: absolute; left: 0; right: 0;
  width: 100%; height: clamp(38px, 6vw, 84px);
  display: block; pointer-events: none;
}
.edge-top    { top: -1px; }
.edge-bottom { bottom: -1px; }
.edge svg { width: 100%; height: 100%; display: block; }
.edge path { fill: currentColor; }

/* Colour helpers so a divider can paint the NEXT band's colour. */
.fill-cream { color: var(--cream); }
.fill-paper { color: var(--paper); }
.fill-navy  { color: var(--blue-deep); }

/* Slant, used where a straight diagonal reads cleaner than a curve. */
.slant-b { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5vw), 0 100%); }
.slant-t { clip-path: polygon(0 3.5vw, 100% 0, 100% 100%, 0 100%); }

/* ---- buttons -------------------------------------------------------------
   Minimum 48px tall, minimum 44px of horizontal padding on the primary.
   One primary per screen. The CTA is a destination, not a suggestion.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: .85rem 1.6rem;
  border: 2px solid transparent; border-radius: 999px;
  font-family: var(--sans); font-size: 1.0625rem; font-weight: 800;
  letter-spacing: .005em; text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background-color .16s ease, box-shadow .16s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--red); color: #fff; box-shadow: var(--shadow);
}
.btn-primary:hover { background: #B20101; color: #fff; box-shadow: var(--shadow-lg); }

/* The two report CTAs sit side by side where there is room and stack on a
   phone. In print they become one box per line, see the print block. */
.doc-cta-row { display: flex; flex-wrap: wrap; gap: .85rem; }

.btn-navy { background: var(--blue); color: #fff; }
.btn-navy:hover { background: var(--blue-deep); color: #fff; }

.btn-ghost { background: transparent; border-color: currentColor; color: var(--blue); }
.btn-ghost:hover { background: rgba(11, 43, 91, .07); color: var(--blue); }

/* Inside a table cell. The 52px default is a thumb target on a public page
   and a row that will not fit on a laptop in the console. */
.btn-sm { min-height: 36px; padding: .35rem .9rem; font-size: .82rem; gap: .4rem; }

.btn-on-navy { background: var(--amber); color: var(--blue-deep); }
.btn-on-navy:hover { background: #F0B44A; color: var(--blue-deep); }

.btn-block { width: 100%; }
.btn-lg { min-height: 60px; font-size: 1.15rem; padding: 1rem 2.1rem; }

/* ---- cards --------------------------------------------------------------- */

.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 3.5vw, 2rem);
  box-shadow: var(--shadow);
}
.card.flat { box-shadow: none; }
.card.tint { background: var(--warn-bg); border-color: #E9D9AF; }

.card-icon { width: 52px; height: 52px; margin-bottom: 1rem; color: var(--blue); }

/* ---- icons ---------------------------------------------------------------
   Sized in rem so an icon scales with the text it sits beside. Every icon in
   running text is aria-hidden; the meaning lives in the words next to it.
   -------------------------------------------------------------------------- */

.ico    { width: 1.5rem;  height: 1.5rem;  flex: none; display: inline-block; vertical-align: -0.25em; }
.ico-sm { width: 1.15rem; height: 1.15rem; }
.ico-lg { width: 2.25rem; height: 2.25rem; }
.ico-xl { width: 3.25rem; height: 3.25rem; }

/* Icon in a soft round plate, used at the top of each card. */
.ico-plate {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 18px;
  background: #EAF0F9; color: var(--blue); margin-bottom: 1rem;
}
.band.navy .ico-plate { background: rgba(224, 160, 56, .16); color: var(--amber); }
.ico-plate.keep { background: var(--keep-bg); color: var(--keep); }
.ico-plate.sell { background: var(--sell-bg); color: var(--sell); }
.ico-plate .ico { width: 32px; height: 32px; }

/* Numbered step, used in the two session outlines and the 30/60/90 plan. */
.step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 50%; background: var(--blue); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: 1.3rem;
}

/* ---- myth vs fact --------------------------------------------------------
   Colour is never the only signal. Every panel carries an icon and a word.
   -------------------------------------------------------------------------- */

.mf { border-radius: var(--radius); padding: 1.25rem 1.35rem; border-left: 6px solid; }
.mf-head { display: flex; align-items: center; gap: .6rem; font-weight: 800; margin-bottom: .4rem; }
.mf-head svg { width: 28px; height: 28px; flex: none; }

.mf.myth { background: var(--sell-bg); border-color: var(--sell); }
.mf.myth .mf-head { color: var(--sell); }
.mf.fact { background: var(--keep-bg); border-color: var(--keep); }
.mf.fact .mf-head { color: var(--keep); }

/* ---- before / after ------------------------------------------------------ */

.ba { display: grid; gap: var(--gap); }
@media (min-width: 760px) { .ba { grid-template-columns: 1fr 1fr; } }
.ba > div { border-radius: var(--radius); padding: 1.4rem; border: 2px solid; }
.ba .sell { background: var(--sell-bg); border-color: #E7C3BE; }
.ba .keep { background: var(--keep-bg); border-color: #B9D8C7; }
.ba h3 { font-size: var(--t-lg); margin-bottom: .5rem; }
.ba .sell h3 { color: var(--sell); }
.ba .keep h3 { color: var(--keep); }

/* ---- stat tiles ---------------------------------------------------------- */

.stat { border-top: 4px solid var(--amber); padding-top: .9rem; }
.stat .n {
  font-family: var(--display); font-weight: 800;
  font-size: var(--t-2xl); line-height: 1; color: var(--blue);
}
.band.navy .stat .n { color: var(--amber); }
.stat .l { font-size: var(--t-sm); color: var(--ink-soft); margin-top: .35rem; }
.band.navy .stat .l { color: #C3CFE3; }

/* ---- forms ---------------------------------------------------------------
   Phone first. 17px minimum on inputs so iOS never zooms on focus.
   -------------------------------------------------------------------------- */

.field { display: block; margin-bottom: 1.15rem; }
.field > .lbl {
  display: block; font-weight: 700; font-size: var(--t-sm);
  margin-bottom: .4rem; color: var(--ink);
}
.field > .hint { display: block; font-size: var(--t-xs); color: var(--ink-faint); margin-top: .35rem; }

input[type=text], input[type=email], input[type=tel], input[type=number],
select, textarea {
  width: 100%; min-height: 54px;
  padding: .8rem 1rem;
  font-size: 1.0625rem;                 /* never below 17px, or iOS zooms     */
  background: var(--paper);
  border: 2px solid var(--rule-strong);
  border-radius: var(--radius);
  transition: border-color .14s ease, box-shadow .14s ease;
}
textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  border-color: var(--blue-soft);
  box-shadow: 0 0 0 4px rgba(27, 75, 146, .14);
  outline: none;
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--sell);
  box-shadow: 0 0 0 4px rgba(160, 35, 24, .12);
}

/* Big tappable choice rows, used all through the Blueprint Builder. */
.choice {
  display: flex; align-items: flex-start; gap: .85rem;
  min-height: 60px; padding: 1rem 1.15rem;
  background: var(--paper); border: 2px solid var(--rule-strong);
  border-radius: var(--radius); cursor: pointer; margin-bottom: .7rem;
  transition: border-color .14s ease, background-color .14s ease;
}
.choice:hover { border-color: var(--blue-soft); }
.choice input { margin-top: .28rem; width: 22px; height: 22px; flex: none; accent-color: var(--blue); }
.choice.on { border-color: var(--blue); background: #F2F6FC; }
.choice .t { font-weight: 700; }
.choice .d { font-size: var(--t-sm); color: var(--ink-soft); }

.err { color: var(--sell); font-weight: 700; font-size: var(--t-sm); margin-top: .4rem; }
.ok  { color: var(--keep); font-weight: 700; }

/* Honeypot. Never shown, never announced. */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* ---- progress ------------------------------------------------------------ */

.progress { height: 10px; background: var(--rule); border-radius: 999px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--amber); border-radius: 999px;
                transition: width .3s ease; }
.progress-label { font-size: var(--t-xs); font-weight: 700; color: var(--ink-soft); margin-top: .45rem; }

/* ---- header and language toggle ------------------------------------------ */

.site-head {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 247, 239, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
/* Wider than the content column. A header that runs wider than the prose it
   sits above is normal; a truncated language toggle on a bilingual site is
   not, and 1140 was not enough to avoid one.

   Two tiers once there is a nav to show: identity on top, navigation beneath.
   The chamber co-brand made a single row impossible, and it should: the
   wordmark and the host chamber belong together and above everything else,
   not squeezed between a menu and a button. */
.site-head .bar {
  width: min(1300px, 100% - (var(--pad-x) * 2)); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .55rem 1rem;
  min-height: 96px; padding-block: .7rem;
}

/* Forces the tier split. Present only on pages that have a nav, and only
   shown at the width where the nav appears, so a header with nothing to put
   on a second row does not grow one. */
.bar-break { display: none; flex-basis: 100%; height: 0; margin: 0; }

/* ---- the host chamber ----------------------------------------------------
   Kenbe Sa Ou Bati is a national program; the chamber running it is the host.
   Content comes from KSOB.CHAMBER in ui.js, never from the markup, because
   the next chamber to launch changes one object and not twelve headers.
   -------------------------------------------------------------------------- */

.cobrand {
  display: flex; align-items: center; gap: .6rem; flex: none;
  padding-left: 1rem;
  border-left: 1px solid var(--rule);
}
.cobrand-by {
  font-size: .72rem; font-weight: 700; line-height: 1.25;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint);
  max-width: 11ch;            /* two lines beside the mark, never three */
}
.cobrand picture { display: contents; }
.cobrand-mark { height: 54px; width: auto; flex: none; }

/* Wordmark. Kreyol leads, English sits beneath. Both always present. */
.wordmark { text-decoration: none; display: block; line-height: 1; flex: none; }
/* Both lines stay on one line each at every width. The Kreyol name breaking
   across two lines reads as a layout accident, and this name is the one thing
   we need people to remember well enough to type from memory. */
.wordmark .kr {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: clamp(1.05rem, 4.2vw, 1.7rem);
  color: var(--blue); letter-spacing: -.015em; white-space: nowrap;
}
.wordmark .en {
  display: block; font-family: var(--sans); font-weight: 700;
  font-size: clamp(.56rem, 2.1vw, .69rem);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: .22rem; white-space: nowrap;
}

/* On its own tier the nav has the row to itself, so it appears far earlier
   than it could when it was competing with the wordmark, the co-brand, a
   button and the toggle for one line. Below that width nothing is lost: every
   one of these links is also in the footer, and the button never hides. */
.nav { display: none; gap: 1rem; flex: none; }
@media (min-width: 1120px) { .nav { display: flex; align-items: center; } }
.nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9375rem; white-space: nowrap; }
.nav a:hover { color: var(--blue); text-decoration: underline; }
.nav a[aria-current="page"] { color: var(--blue); }

/* The last two speak to a different reader: a chamber officer or a firm, not
   the owner the program is for. A divider keeps them available without
   letting them compete with the four that person came for. */
.nav a.alt { color: var(--ink-soft); }
.nav .alt:nth-last-child(2) { padding-left: 1rem; border-left: 1px solid var(--rule); }

/* The standing call to action, in the corner of every page. */
.head-cta { flex: none; white-space: nowrap; }

/* ---- the mobile menu -----------------------------------------------------
   Built by ui.js from the desktop nav, so the panel cannot list something the
   nav does not. Shown only where the nav is hidden.
   -------------------------------------------------------------------------- */

.burger {
  display: none;
  flex: none;
  width: 48px; height: 48px;
  padding: 0 12px;
  border: 1px solid var(--rule-strong); border-radius: 12px;
  background: var(--paper); cursor: pointer;
}
.burger i {
  display: block; height: 2px; border-radius: 2px;
  background: var(--blue);
  transition: transform .18s ease, opacity .18s ease;
}
.burger i + i { margin-top: 5px; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1119px) { .burger { display: block; } }

.menu-panel {
  border-top: 1px solid var(--rule);
  background: var(--cream);
  padding: .5rem var(--pad-x) 1.1rem;
}
.menu-panel nav { display: flex; flex-direction: column; }
.menu-panel a {
  display: block;
  padding: .95rem .25rem;
  color: var(--ink); text-decoration: none;
  font-weight: 700; font-size: var(--t-sm);
  border-bottom: 1px solid var(--rule);
}
.menu-panel a:last-child { border-bottom: 0; }
.menu-panel a[aria-current="page"] { color: var(--blue); }
/* The two audience links keep the same recessive treatment they have in the
   nav, since they still speak to a different reader. */
.menu-panel a.alt { color: var(--ink-soft); font-weight: 600; }

/* ---- the chamber console -------------------------------------------------
   Dense on purpose. This is the one screen on the site built for somebody
   doing a job rather than deciding whether to trust us.
   -------------------------------------------------------------------------- */

.stat {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .9rem 1rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
}
.stat-n { font-family: var(--display); font-weight: 800; font-size: 1.75rem; color: var(--blue); line-height: 1; }
.stat-l { font-size: var(--t-xs); color: var(--ink-soft); }

/* Six digits, spaced and monospaced so somebody reading them off a phone in
   the other hand does not lose their place. */
.code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.75rem; font-weight: 700;
  letter-spacing: .38em; text-indent: .38em;
  text-align: center; max-width: 11rem;
}

.tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.tab {
  border: 1px solid var(--rule-strong); border-radius: 999px;
  background: var(--paper); color: var(--ink-soft);
  padding: .55rem 1.1rem; min-height: 44px;
  font-weight: 700; font-size: var(--t-sm); cursor: pointer;
}
.tab.on { background: var(--blue); border-color: var(--blue); color: #fff; }

/* The table scrolls inside its own box. Nine columns of real data will not
   fit a laptop, and a page that scrolls sideways loses the first column,
   which is the name. */
.admin-panel { overflow-x: auto; }
.admin-table {
  width: 100%; min-width: 780px;
  border-collapse: collapse;
  background: var(--paper);
  font-size: var(--t-xs);
}
.admin-table th, .admin-table td {
  text-align: left; padding: .6rem .7rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.admin-table th {
  font-weight: 800; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .06em; font-size: .72rem;
  background: var(--cream); position: sticky; top: 0;
}
.admin-table tbody tr:hover { background: #FAFAF7; }
.admin-table input[type="checkbox"] { width: 22px; height: 22px; cursor: pointer; }
.admin-table select {
  border: 1px solid var(--rule-strong); border-radius: 8px;
  padding: .35rem .5rem; background: var(--paper); font-size: .8rem;
}

/* The vetting record, opened under the row it belongs to. Two columns on a
   wide screen, one on a narrow one, and the labels stay readable at this size
   because a board member is reading a disciplinary disclosure here, not
   skimming. */
.pro-detail { padding: .2rem 0 .6rem; }
.pro-facts {
  display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr;
  gap: .45rem 1rem; margin: 0 0 1rem;
}
.pro-facts dt { color: var(--ink-soft); font-weight: 700; }
.pro-facts dd { margin: 0; white-space: pre-wrap; }
.pro-facts dd.blank { color: var(--ink-soft); font-style: italic; }
.pro-note { display: grid; gap: .5rem; max-width: 46rem; }
.pro-note textarea {
  width: 100%; min-height: 5rem; resize: vertical;
  border: 1px solid var(--rule-strong); border-radius: 8px;
  padding: .5rem .6rem; font: inherit; background: var(--paper);
}
/* No phone breakpoint here on purpose. This sits inside .admin-table, which
   is min-width 780px and scrolls horizontally in its own container, so a
   one-column stack does not narrow anything: it just makes every value a
   758px line instead of sharing that width with its label. Measured. */

/* ---- the running print footer -------------------------------------------
   Screen never sees it. In print it is position:fixed, which Chrome repaints
   at the foot of every sheet, so a workbook printed across seven pages says
   where it came from on all seven. The alternative is rebuilding the page as
   a table with a <tfoot>, which would wreck the layout to solve a footer.
   -------------------------------------------------------------------------- */

.print-foot { display: none; }

/* ---- back to top ---------------------------------------------------------
   The pages are long, the header is not sticky on a phone, and the arrow in
   the sprite points right, so it is turned to point up.
   -------------------------------------------------------------------------- */

.to-top {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--blue); color: #fff;
  box-shadow: var(--shadow);
}
.to-top:hover { background: var(--blue-deep); }
.to-top .ico { width: 22px; height: 22px; transform: rotate(-90deg); }

/* Language toggle. Labelled in its own language, never a flag icon: a flag
   says nationality, and this is about which language you read. */
.lang {
  display: flex; flex: none; border: 2px solid var(--rule-strong);
  border-radius: 999px; overflow: hidden; background: var(--paper);
}

/* ---- how the header lays itself out at each width ------------------------
   Flex order decides both sequence AND which row each item wraps onto, so the
   whole arrangement is set here rather than by moving elements in twelve
   files. DOM order stays reading order: identity, then navigation.

   One auto margin per row. Two in the same row do not stack, they split the
   slack and leave a hole in the middle, which is how the toggle ended up
   stranded beside the wordmark once before.
   -------------------------------------------------------------------------- */

/* Narrow. Who is behind the program stays beside the wordmark, label and all:
   that pairing is the point of the block and hiding half of it on the screen
   most of this audience uses would defeat it. So the controls move down
   instead.

     Row 1:  wordmark  chamber mark ......... burger
     Row 2:  toggle .................. button

   The break is what guarantees the split. Without it the pieces rejoin row
   one at whatever width they happen to fit, and the chamber mark ends up
   stranded to the right of the language toggle.

   The header stops being sticky here. Three quarters of a phone header is a
   lot to give up permanently, and the back to top button covers the return
   trip. */
/* Everything below the desktop tier gets ONE arrangement, so the header does
   not rearrange itself three times on the way down:

     Row 1:  wordmark  chamber mark ......... burger
     Row 2:  toggle    button

   The break guarantees that split at every width in the range. Leaving it to
   whatever happens to fit produced three rows at 660 and at 390 and put the
   chamber mark to the right of the language toggle at 479.

   The button takes flex-basis 0, not auto. With auto it asks for its full
   label width when the line is being formed, does not get it, and wraps onto
   a row of its own; at zero it joins the toggle and then grows into whatever
   is left. */
@media (max-width: 1119px) {
  .wordmark  { order: 1; }
  .cobrand   { order: 2; }
  .burger    { order: 3; margin-left: auto; }
  .bar-break { order: 4; display: block; }
  .lang      { order: 5; }

  /* Sized to the space left beside the toggle so the label stays on one
     line. It was stretching to fill the row and wrapping to two, which made
     the most important control on the page look like a paragraph. */
  .head-cta  {
    order: 6; flex: 0 1 auto; margin-left: auto;
    white-space: nowrap;
    font-size: .9375rem; padding-inline: 1.1rem;
  }
}

/* Phone. The header stops being sticky: three quarters of a phone header is a
   lot to give up permanently, and the back to top button covers the return
   trip. Who is behind the program stays beside the wordmark, label and all.
   Hiding half of that block on the screen most of this audience uses would
   defeat the point of having it. */
@media (max-width: 659px) {
  /* relative, not static. Static kills the stacking context the base rule
     builds with z-index, and the open menu panel then paints UNDERNEATH the
     first band of the page: open, correct height, invisible. Relative keeps
     the header in normal flow, so it still scrolls away, and keeps the
     layer. */
  .site-head { position: relative; }
  .site-head .bar { column-gap: .55rem; }
  .cobrand    { padding-left: .55rem; gap: .5rem; }
  .cobrand-by { max-width: 12ch; font-size: .66rem; letter-spacing: .04em; }
  .cobrand-mark { height: 38px; }
}

/* Smallest phones. Everything gives back a few pixels rather than any one
   thing collapsing. At 360 the identity row was one pixel over and the
   burger dropped to a row of its own.

   The ceiling is 439, not 399, because the button and the toggle stop fitting
   one row at 440 in Kreyol, whose label is the longer of the two. Sizing this
   band to the English label leaves Kreyol on a row of its own. */
@media (max-width: 439px) {
  .site-head .bar { column-gap: .45rem; }
  .cobrand    { padding-left: .4rem; gap: .4rem; }
  .cobrand-by { max-width: 11ch; font-size: .62rem; }
  .cobrand-mark { height: 34px; }
  .burger     { width: 44px; padding: 0 10px; }
  /* Sized against the Kreyol label, which is the longer of the two. At the
     English width it fitted and Kreyol dropped to a row of its own. */
  .head-cta   { font-size: .86rem; padding-inline: .85rem; }
  /* Specificity, not order: the base .lang button rule is further down this
     file, so a bare .lang button here would lose to it. */
  .site-head .lang button { padding: .4rem .62rem; }
}

/* The narrowest phones still in real use. One more step down for the button
   so the Kreyol label stays beside the toggle rather than claiming a row. */
@media (max-width: 379px) {
  .head-cta { font-size: .8rem; padding-inline: .72rem; }
}

/* Two tiers. Identity and toggle on top, navigation and the button beneath.
   The nav gets a row to itself here, which is why it can appear at 1120
   rather than the 1360 it needed while competing for a single line. */
@media (min-width: 1120px) {
  .wordmark   { order: 1; }
  .cobrand    { order: 2; }
  .lang       { order: 3; margin-left: auto; }
  .bar-break  { order: 4; display: block; }
  .nav        { order: 5; }
  .head-cta   { order: 6; margin-left: auto; }
}
.lang button {
  border: 0; background: none; cursor: pointer;
  min-height: 44px; padding: .4rem .95rem;
  font-size: .82rem; font-weight: 800; letter-spacing: .04em; color: var(--ink-soft);
}
.lang button.on { background: var(--blue); color: #fff; }

/* ---- footer -------------------------------------------------------------- */

.site-foot { background: var(--blue-deep); color: #C3CFE3; padding-block: 3.5rem 2.5rem; }
.site-foot a:not(.btn) { color: var(--amber); }   /* see the .band.navy note above */
.site-foot .fine { font-size: var(--t-xs); line-height: 1.6; color: #92A3BE; }
.site-foot .rule { height: 1px; background: rgba(255,255,255,.14); margin-block: 1.75rem; }

/* The compliance line. Appears in the footer of EVERY page, both languages.
   Section 13 of the plan. Do not remove it from any template. */
.disclaimer {
  background: rgba(255,255,255,.06);
  border-left: 4px solid var(--amber);
  padding: 1rem 1.15rem; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--t-xs); line-height: 1.6; color: #C3CFE3;
}

/* ---- no cost badge ------------------------------------------------------- */

.free-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--keep-bg); color: var(--keep);
  border: 2px solid #B9D8C7; border-radius: 999px;
  padding: .5rem 1.1rem; font-weight: 800; font-size: var(--t-sm);
}
.free-badge svg { width: 20px; height: 20px; }

/* ---- photography ---------------------------------------------------------
   Every photo reserves its box before it loads, so nothing on the page jumps
   while a phone is still fetching. The blurred placeholder is inlined as a
   data URI (assets/js/lqip.js) and fades out under the real image.
   -------------------------------------------------------------------------- */

.fig {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--rule) center / cover no-repeat;
  aspect-ratio: 16 / 9;
}
.fig.tall  { aspect-ratio: 4 / 3; }
.fig.strip { aspect-ratio: 21 / 9; }
/* Descendant, not child: the img sits inside <picture>, so a child combinator
   silently never matches and every photo collapses to its intrinsic ratio
   with the placeholder showing underneath. */
.fig picture { display: contents; }
.fig img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s ease;
}
.fig img.in { opacity: 1; }

/* A caption sits on the image only where the image is dark enough to hold it.
   Everywhere else captions go under the figure as ordinary text. */
.fig-cap {
  font-size: var(--t-xs); color: var(--ink-faint);
  margin-top: .55rem;
}

/* Full-bleed band image with the navy scrim the hero headline sits on. */
.fig-hero { border-radius: 0; aspect-ratio: 21 / 9; }
.fig-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(3,19,79,.94) 0%, rgba(3,19,79,.82) 42%, rgba(3,19,79,.35) 100%);
}
@media (max-width: 760px) {
  .fig-hero::after {
    background: linear-gradient(180deg, rgba(3,19,79,.72) 0%, rgba(3,19,79,.92) 55%);
  }
}

/* ---- charts --------------------------------------------------------------
   Hand-built inline SVG, no library. Every chart carries a legend when it has
   more than one series, direct labels, and a table view, so identity is never
   carried by colour alone and the whole thing survives a black and white
   printer.
   -------------------------------------------------------------------------- */

.chart { margin: 0; }
.chart-head { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; }
.chart-title { font-weight: 800; font-size: var(--t-lg); color: var(--ink); }
.chart-note  { font-size: var(--t-sm); color: var(--ink-faint); }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }

.chart-legend {
  display: flex; flex-wrap: wrap; gap: .35rem 1.25rem;
  margin-top: .85rem; font-size: var(--t-sm); font-weight: 700; color: var(--ink-soft);
}
.chart-legend span { display: inline-flex; align-items: center; gap: .5rem; }
.chart-legend i {
  width: 14px; height: 14px; border-radius: 4px; flex: none;
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px currentColor;
  background: currentColor;
}

/* Grid and axis stay recessive. Data is the only thing that gets to be loud. */
.chart .grid line { stroke: var(--rule); stroke-width: 1; }
.chart .axis text { fill: var(--ink-faint); font-size: 12px; font-weight: 700; }
.chart .val       { fill: var(--ink); font-size: 13px; font-weight: 800; }
.chart .series-label { font-size: 13px; font-weight: 800; }

/* Drawn on scroll. Reduced motion gets the finished state immediately. */
.chart .draw { transition: stroke-dashoffset 1.1s ease, transform .9s ease, opacity .5s ease; }

.chart-table { margin-top: 1rem; }
.chart-table summary {
  cursor: pointer; font-size: var(--t-sm); font-weight: 700;
  color: var(--blue-soft); min-height: 44px; display: flex; align-items: center;
}
.chart-table table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
.chart-table th, .chart-table td {
  text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--rule);
}
.chart-table th { font-weight: 800; color: var(--ink); }
.chart-table td { color: var(--ink-soft); }

/* The calculator inputs that drive the sale-vs-keep chart. */
.calc { display: grid; gap: 1rem; }
@media (min-width: 620px) { .calc { grid-template-columns: 1fr 1fr; } }
.calc .field { margin-bottom: 0; }
.calc input[type="range"] { width: 100%; accent-color: var(--blue); height: 44px; }
.calc output { font-weight: 800; color: var(--blue); font-size: var(--t-lg); }

/* Status chips for the readiness chart. Icon plus label, never colour alone. */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--t-xs); font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; padding: .3rem .6rem; border-radius: 999px;
  white-space: nowrap; flex: none;
}
/* Pinned here rather than relying on the .ico size classes: this icon is
   built in script and sits in a flex row, where an unsized SVG grows to fill
   instead of staying an icon. */
.chip svg { width: 1rem; height: 1rem; flex: none; }
.chip.ready   { background: var(--keep-bg); color: var(--keep); }
.chip.partly  { background: var(--warn-bg); color: #7A5310; }
.chip.missing { background: var(--sell-bg); color: var(--sell); }

/* ---- question and answer -------------------------------------------------
   Native details/summary so a question is readable and findable with the
   browser's own find-in-page even while it is closed on mobile.
   -------------------------------------------------------------------------- */

.qa {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin-bottom: .85rem;
}
.qa > summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 1.25rem;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: .9rem;
  font-weight: 700;
  font-size: var(--t-lg);
  color: var(--blue);
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 13px; height: 13px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .18s ease;
}
.qa[open] > summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.qa > summary:focus-visible { outline: 3px solid var(--blue-soft); outline-offset: -3px; }
.qa .a { padding: 0 1.25rem 1.25rem; margin: 0; color: var(--ink-soft); }

/* ---- scroll reveal -------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---- print ---------------------------------------------------------------
   Used by /r/ so "Download PDF" is window.print() with no server dependency.
   -------------------------------------------------------------------------- */

/* ---- the report masthead -------------------------------------------------
   Seal, whose plan it is, and the date it was written. This is the block that
   makes the printout a document rather than a web page someone printed.
   -------------------------------------------------------------------------- */

.doc-head {
  display: flex; gap: 1.25rem; align-items: center;
  padding-bottom: 1.25rem; border-bottom: 3px solid var(--blue);
}
.doc-seal { width: 76px; height: auto; flex: none; }
.doc-meta { min-width: 0; }
.doc-line { font-size: var(--t-sm); color: var(--ink-soft); margin-top: .2rem; }
.doc-line strong { color: var(--ink); font-weight: 800; }

/* ---- the workbook --------------------------------------------------------
   Two audiences at once: somebody typing on a phone during a Zoom class, and
   somebody who printed it and has a pen. The typed answer and the ruled lines
   are the same block, and each hides in the other's medium.
   -------------------------------------------------------------------------- */

.print-only, .wb-typed { display: none; }

.wb-part { margin-top: 3rem; }
.wb-part > h2 { font-size: var(--t-xl); }

.wb-q {
  position: relative;
  padding: 1.25rem 1.25rem 1.25rem 3.4rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.wb-q + .wb-q { margin-top: 1rem; }
.wb-q h3 { font-size: var(--t-lg); }

.wb-n {
  position: absolute; left: 1.15rem; top: 1.25rem;
  width: 1.7rem; height: 1.7rem; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--blue); color: #fff;
  font-family: var(--sans); font-weight: 800; font-size: .9rem;
}

.wb-ask { margin-top: .5rem; color: var(--ink-soft); font-size: var(--t-sm); }

.wb-write {
  display: block; width: 100%; margin-top: .9rem;
  padding: .7rem .8rem;
  border: 1px solid var(--rule-strong); border-radius: 10px;
  background: var(--cream); color: var(--ink);
  font-size: var(--t-sm); line-height: 1.7;
  resize: vertical;
}
.wb-write:focus-visible { background: var(--paper); }

/* A line for a name in the masthead, on paper. */
.wb-rule {
  display: inline-block; min-width: 12rem;
  border-bottom: 1px solid var(--rule-strong);
}

.wb-check { display: flex; gap: .85rem; align-items: flex-start; }
.wb-box {
  flex: none; width: 1.15rem; height: 1.15rem; margin-top: .28rem;
  border: 2px solid var(--blue); border-radius: 4px;
}

@media print {
  /* The deeper bottom margin reserves the strip that .print-foot sits in.
     @page cannot be scoped to one document, so this applies everywhere and
     costs the other printed pages a third of an inch of white at the foot,
     which they can afford. Without it a running footer prints on top of the
     last line of every page. */
  @page { size: Letter; margin: 0.6in 0.65in 0.95in; }

  /* overflow must go back to visible for printing. The screen rule sets
     overflow-x:hidden on body to stop a wide hero causing sideways scroll,
     and that alone stops Chrome repainting a position:fixed element on every
     sheet: the running footer then prints once and no more. */
  html, body {
    background: #fff !important; color: #000; font-size: 11pt; line-height: 1.45;
    overflow: visible !important;
  }
  .site-head, .site-foot, .no-print, .lang, .nav, .skip, .btn,
  .burger, .menu-panel, .to-top { display: none !important; }
  .band { padding-block: 0 !important; }
  .edge { display: none !important; }
  .card { box-shadow: none !important; border: 1pt solid #bbb !important; break-inside: avoid; }
  .wrap, .wrap-narrow, .wrap-doc { width: 100% !important; }

  h1, h2, h3 { break-after: avoid; color: #000; }
  .print-break { break-before: page; }
  .reveal { opacity: 1 !important; transform: none !important; }

  /* Show link targets so a printed report is still navigable. */
  .print-url::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; word-break: break-all; }

  .mf.myth, .mf.fact, .ba .sell, .ba .keep,
  .free-badge, .card.tint, .disclaimer {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  /* ---- the printed report ------------------------------------------------
     Save as PDF is the delivery mechanism, so the print sheet is the PDF
     designer. A generated PDF would mean shipping a PDF library, losing the
     browser's text shaping, and hand-placing every Kreyol accent. Printing
     the page keeps real fonts, real hyphenation, and selectable text. */

  .doc-head {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    border-bottom: 2pt solid #052395;
    padding-bottom: 10pt; margin-bottom: 14pt;
  }
  .doc-seal { width: 58pt; }
  .doc-head + h1 { margin-top: 12pt !important; font-size: 20pt; }

  /* The masthead repeats on every printed page. Someone reading page four in
     an office needs to know whose plan it is without flipping back. */
  #report { position: relative; }

  .fig, .fig-hero, .no-print, .chart-table, .calc, .qa > summary::after { display: none !important; }

  /* Charts print. They are the part a lawyer will point at. */
  .chart svg { break-inside: avoid; max-width: 100%; }
  .chart, .card { break-inside: avoid; }
  .chart-legend { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .chip {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    border: 0.5pt solid currentColor;
  }

  /* ---- the two calls to action, inside the PDF --------------------------
     Everything .btn is hidden in print, and for every other button that is
     right: a printed "Download as PDF" is a joke. These two are the
     exception, because the whole point of the PDF is that it outlives the
     browser tab, and a plan with no way to reach a person is a dead end.

     They print as real buttons, not as a printed address. The anchor survives
     into the PDF as a live link annotation, so tapping the button in any PDF
     reader opens the booking page or WhatsApp. Showing the URL underneath as
     well made the plan read like a flyer, and a wa.me address in raw text is
     not something to hand somebody as their keepsake document.

     The fill is tinted rather than solid navy, and the border and the label
     carry the colour. Browsers print backgrounds only when the person ticks
     "background graphics", so a solid navy button with white text prints as
     an empty white box for anybody who does not. This way the button reads
     correctly whether or not the fill lands.

     :not([hidden]) matters. The booking button ships hidden and is only
     revealed when a scheduling URL is configured. Both this rule and the
     [hidden] reset carry !important, so without the guard the more specific
     selector here would win and print a button that leads nowhere. */
  .doc-cta { break-inside: avoid; }
  .doc-cta .doc-cta-row { display: block; }
  .doc-cta .btn:not([hidden]) {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    display: block !important;
    background: #EAEFFB !important;
    color: #052395 !important;
    border: 1.5pt solid #052395;
    border-radius: 6pt;
    padding: 9pt 12pt;
    margin: 0 0 8pt;
    font-size: 11.5pt;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    box-shadow: none !important;
  }
  .doc-cta .btn svg { display: none !important; }

  /* ---- the printed workbook ---------------------------------------------
     A member printing this has a pen, so the ruled lines appear and the
     textarea disappears. Anyone who typed into it first gets the opposite:
     :not(:empty) is false for an untouched textarea and true once there is
     text in it, which is exactly the switch we want and costs no script.

     The blocks must not break across pages. A question whose answer lines
     landed on the next sheet is the one thing that makes a workbook useless
     in a room where people are writing while somebody talks. */
  .print-only { display: block; }

  .wb-part { margin-top: 18pt; }
  .wb-part > h2 { font-size: 15pt; }

  .wb-q {
    break-inside: avoid;
    border: 0.75pt solid #999; border-radius: 4pt;
    padding: 8pt 10pt 8pt 26pt;
    margin-bottom: 8pt;
  }
  .wb-q h3 { font-size: 11.5pt; }
  .wb-n {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    left: 8pt; top: 8pt; width: 13pt; height: 13pt; font-size: 8pt;
  }
  .wb-ask { font-size: 10pt; margin-top: 3pt; }

  /* An untouched question prints as ruled lines. One they typed into prints
     what they wrote, and drops the lines.

     The typed text is mirrored into a sibling div rather than read off the
     textarea, because :empty tests DOM children and assigning .value never
     creates any: a textarea the user has filled is still :empty forever, so
     the obvious selector here would never once have fired. */
  .wb-write { display: none !important; }
  .wb-typed:not(:empty) {
    display: block;
    padding-top: 4pt; font-size: 10.5pt; line-height: 1.6;
    white-space: pre-wrap;
  }
  .wb-typed:not(:empty) + .wb-rules { display: none; }

  .wb-rules { margin-top: 6pt; }
  .wb-rules span {
    display: block; height: 15pt;
    border-bottom: 0.5pt solid #aaa;
  }

  .wb-box {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    width: 11pt; height: 11pt; border-width: 1pt;
  }
  .wb-check { break-inside: avoid; margin-bottom: 3pt; }
  .wb-rule { min-width: 160pt; border-bottom: 0.75pt solid #666; }
  .wb-url { font-size: 10pt; color: #444; margin-top: 6pt; }

  h2 { font-size: 14pt; margin-top: 16pt; }
  h3 { font-size: 12pt; }
  .lede { font-size: 11.5pt; }
  .step-n { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .print-foot {
    display: flex !important;
    align-items: center; gap: 7pt;
    position: fixed; left: 0; right: 0; bottom: 0;
    border-top: 0.5pt solid #bbb;
    padding-top: 5pt;
    font-size: 8pt; color: #555;
  }
  /* An <img> prints whether or not the reader ticked "background graphics",
     which a CSS background would not. */
  .print-foot img { height: 20pt; width: auto; display: block; }
  .print-foot a { color: #052395; text-decoration: none; }

  /* The plan's end-of-document footer is gone: the running .print-foot above
     carries the same line on every page instead, and carries it as a real
     link rather than as generated content nobody can click. */
}