/* ============================================================================
   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));

  --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;
}

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; }

.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; }

.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); }

.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); }

.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);
}
.site-head .bar {
  width: var(--wrap); margin-inline: auto;
  display: flex; align-items: center; gap: 1rem;
  min-height: 70px; padding-block: .5rem;
}

/* 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;
}

.nav { display: none; margin-left: auto; gap: 1.5rem; }
@media (min-width: 940px) { .nav { display: flex; align-items: center; } }
.nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--t-sm); }
.nav a:hover { color: var(--blue); text-decoration: underline; }

/* 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; margin-left: auto; border: 2px solid var(--rule-strong);
  border-radius: 999px; overflow: hidden; background: var(--paper);
}
@media (min-width: 940px) { .lang { margin-left: 0; } }
.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; }

@media print {
  @page { size: Letter; margin: 0.6in 0.65in; }

  html, body { background: #fff !important; color: #000; font-size: 11pt; line-height: 1.45; }
  .site-head, .site-foot, .no-print, .lang, .nav, .skip, .btn { 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 { 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;
  }

  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; }

  /* A printed plan with no way back to us is a dead end. */
  #report::after {
    content: "kenbesaoubati.com";
    display: block; margin-top: 18pt; padding-top: 8pt;
    border-top: 0.5pt solid #bbb;
    font-size: 8pt; color: #555;
  }
}