:root {
    /* from the course logo lockup */
    --indigo:    #2B1071;
    --violet:     #6836B9;
    --accent:      #5B27A8;
    --bar:      #6836B9;
    --bar-lift: #9D64F3;

    --ink:       #221052;
    --muted:     #4F4766;
    --rule:      #CFC0EA;
    --rule-heavy:#2B1071;

    /* the page ground: ivory at the top, orangish tan at the foot */
    --g-page-a:  #F7F5FD;
    --g-page-b:  #DCCBF6;
    --g-glow:    rgba(129, 76, 226, 0.22);
    --veil:        rgba(255, 255, 255, 0.55);
    --veil-strong: rgba(255, 255, 255, 0.78);
    --g-hair:    linear-gradient(90deg, transparent, #A98BDE 18%, #7A4FC6 50%, #A98BDE 82%, transparent);

    --display: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
    --utility: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

    --mount:     #FFFFFF;   /* photo stroke */
    --mount-w:   2px;

    --radius:    12px;   /* panels */
    --radius-sm: 10px;   /* images, inputs */

    /* type scale */
    --t1: 11px;
    --t2: 13px;
    --t3: 15px;
    --t4: 17px;
    --t5: 19px;
    --t6: 22px;
    --t7: 30px;
    --t8: 38px;
    --t9: 52px;
    --t10: 62px;

    /* spacing, on a 4px grid */
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 20px;
    --s6: 24px;
    --s7: 32px;
    --s8: 40px;
    --s9: 56px;
    --s10: 72px;
    --s11: 96px;

    /* measure */
    --measure:       65ch;
    --measure-mid:   52ch;
    --measure-tight: 42ch;
    --measure-head:  24ch;
    --shell: 1240px;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --indigo:    #EFE9FB;
      --violet:     #C5A6F7;
      --accent:      #C9A4F5;
      --bar:      #6836B9;
      --bar-lift: #9D64F3;

      --ink:       #EFE9FB;
      --muted:     #A79BC4;
      --rule:      #3A2A63;
      --rule-heavy:#EFE9FB;

      --g-page-a:  #140028;
      --mount:     #EFE9FB;
      --g-page-b:  #2A1859;
      --g-glow:    rgba(129, 76, 226, 0.20);
      --veil:        rgba(255, 255, 255, 0.045);
      --veil-strong: rgba(255, 255, 255, 0.075);
      --g-hair:    linear-gradient(90deg, transparent, #4A3480 18%, #7A4FC6 50%, #4A3480 82%, transparent);
    }
  }

  :root[data-theme="dark"] {
    --indigo:    #EFE9FB;
    --violet:     #C5A6F7;
    --accent:      #C9A4F5;
    --bar:      #6836B9;
    --bar-lift: #9D64F3;

    --ink:       #EFE9FB;
    --muted:     #A79BC4;
    --rule:      #3A2A63;
    --rule-heavy:#EFE9FB;

    --g-page-a:  #140028;
      --mount:     #EFE9FB;
    --g-page-b:  #2A1859;
    --g-glow:    rgba(129, 76, 226, 0.20);
    --veil:        rgba(255, 255, 255, 0.045);
    --veil-strong: rgba(255, 255, 255, 0.075);
    --g-hair:    linear-gradient(90deg, transparent, #4A3480 18%, #7A4FC6 50%, #4A3480 82%, transparent);
  }

  * { box-sizing: border-box; }

  /* keyboard users land here first, off-screen until focused */
  .skip {
    position: absolute; left: -9999px; top: 0; z-index: 50;
    font-family: var(--utility); font-size: var(--t2); font-weight: 700;
    background: var(--bar); color: #FFFFFF;
    padding: var(--s3) var(--s5); border-radius: 0 0 8px 0; text-decoration: none;
  }
  .skip:focus { left: 0; }

  body {
    margin: 0;
    background-color: var(--g-page-a);
    background-image: linear-gradient(180deg, var(--g-page-a) 0%, var(--g-page-b) 100%);
    background-repeat: no-repeat;
    color: var(--ink);
    font-family: var(--display);
    font-size: var(--t4);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--s6); }
  @media (max-width: 560px) { .shell { padding-inline: var(--s5); } }


  .eyebrow, .spec-key, .panel-title, .col-head {
    font-family: var(--utility);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: var(--t1);
    font-weight: 700;
    line-height: 1.4;
  }
  .num { font-variant-numeric: tabular-nums; }

  /* the logo's rust rules around an eyebrow */
  .ruled-eyebrow {
    display: inline-block;
    color: var(--accent);
    border-top: 1px solid var(--accent);
    border-bottom: 1px solid var(--accent);
    padding: var(--s2) 0;
  }

  /* ---------- nav ---------- */
  /* Sticky, because the nav button is the only call to action that follows a
     reader down a five thousand pixel page. It needs its own background: the
     page ground is a gradient, so a transparent bar would have body copy
     scrolling through it. */
  .topbar {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--g-page-a) 88%, transparent);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
  }
  @supports not (backdrop-filter: blur(10px)) {
    .topbar { background: var(--g-page-a); }
  }

  /* Anchor targets sit under the sticky bar without this, so #pricing lands
     with its heading hidden behind the header. */
  main [id], main:is([id]) { scroll-margin-top: 88px; }
  @media (max-width: 560px) { main [id] { scroll-margin-top: 74px; } }
  /* No scroll-behavior: smooth. It was tried and it breaks fragment
     navigation outright: landing on /#pricing left the page at scroll 0 with
     the hash set, which would have broken the nav call to action on six
     pages. Measured, not guessed. */
  .topbar::after {
    content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
    background: var(--g-hair);
  }
  .topbar-inner { display: flex; align-items: center; gap: var(--s6); min-height: 72px; }
  /* A sticky header steals from a short viewport, so it gets slimmer there.
     This has to sit after the rule above, not before it: same specificity,
     source order decides. */
  @media (max-width: 560px) { .topbar-inner { min-height: 60px; } }
  .wordmark {
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--t5);
    letter-spacing: -0.012em;
    margin-right: auto;
    text-decoration: none;
    line-height: 1;
  }
  .wordmark .fn { color: var(--violet); }
  .wordmark .bc { color: var(--indigo); }
  .topbar nav { display: flex; align-items: center; gap: var(--s6); }
  .topbar nav a:not(.btn) {   /* :not(.btn) or this beats .btn on specificity */
    font-family: var(--utility);
    font-size: var(--t1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: var(--s1);
    transition: border-color 140ms ease;
  }
  .topbar nav a:not(.btn):hover { border-color: var(--ink); }
  @media (max-width: 700px) { .topbar nav .nav-hide { display: none; } }

  /* ---------- buttons: violet, the way the brand bar is violet ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
    background: linear-gradient(158deg, #7A46CC, var(--bar) 58%, #56289E);
    color: #FFFFFF;
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--t4);
    padding: var(--s4) var(--s7);
    border-radius: 999px;
    text-decoration: none;
    border: 0;
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 6px 18px -8px rgba(64,26,134,0.85);
    transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease;
  }
  .btn:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.65) inset, 0 10px 22px -8px rgba(64,26,134,0.9);
  }
  .btn-sm { font-size: var(--t2); padding: var(--s2) var(--s5); }
  .btn-quiet {
    background: transparent;
    color: var(--ink);
    border: 2px solid var(--rule-heavy);
    box-shadow: none;
    font-size: var(--t3);
    padding: var(--s3) var(--s6);
    margin-top: var(--s4);
  }
  .btn-quiet:hover {
    filter: none;
    background: color-mix(in srgb, var(--rule-heavy) 8%, transparent);
    box-shadow: none;
  }
  a:focus-visible, .btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

  /* ---------- hero ---------- */
  .hero { position: relative; padding-block: var(--s8) var(--s11); overflow: hidden; }
  .hero::after {
    content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
    background: var(--g-hair);
  }
  .hero-grid { display: grid; grid-template-columns: 0.82fr 1fr; gap: var(--s9); align-items: center; position: relative; }
  /* The hero art is a tall portrait can (roughly 5:9). Without a cap it grows
     with the grid column on wide screens and drags the whole hero taller. The
     880px and 560px blocks later in this file narrow it further, in that
     order. */
  .art-wrap { position: relative; max-width: 360px; margin-inline: auto; }
  .art-wrap::before {
    content: ""; position: absolute; left: 50%; top: 52%;
    width: 130%; aspect-ratio: 1; transform: translate(-50%, -50%);
    background: radial-gradient(circle, var(--g-glow) 0%, transparent 66%);
    pointer-events: none;
  }
  .hero-art { position: relative; width: 100%; height: auto; display: block; }

  .lockup { font-family: var(--display); font-weight: 700; line-height: 0.94; letter-spacing: -0.022em; margin: var(--s4) 0 0; }
  .lockup .fn { display: block; color: var(--violet); font-size: clamp(var(--t8), 6.6vw, var(--t10)); }
  .lockup .bc { display: block; color: var(--indigo); font-size: clamp(var(--t7), 6.0vw, var(--t10)); }

  .hero-lede { max-width: var(--measure-mid); font-size: var(--t5); line-height: 1.55; margin: var(--s6) 0 0; }

  .specs {
    display: flex; flex-wrap: wrap; margin: var(--s6) 0 0;
    border-top: 3px solid var(--rule-heavy); border-bottom: 1px solid var(--rule);
  }
  .spec {
    display: flex; flex-direction: column; gap: var(--s1);
    padding: var(--s3) var(--s6) var(--s3) 0; margin-right: var(--s6); border-right: 1px solid var(--rule);
  }
  .spec:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
  .spec-key { color: var(--muted); }
  .spec-val { font-weight: 700; font-size: var(--t5); }

  .hero-cta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s4) var(--s6); margin-top: var(--s6); }
  .price-inline { display: flex; flex-direction: column; gap: var(--s1); }
  .price-inline b { font-size: var(--t6); font-weight: 700; }

  @media (max-width: 880px) {
    .hero-grid { grid-template-columns: 1fr; gap: var(--s7); }
    .art-wrap { max-width: 330px; margin-inline: auto; }
  }

  /* ---------- bands ---------- */
  .band { position: relative; padding-block: var(--s10); }
  .band-tint { background: linear-gradient(180deg, var(--veil), transparent); }
  .band::after {
    content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
    background: var(--g-hair);
  }
  .band-head { margin-bottom: var(--s7); }
  .band-head .eyebrow { margin-bottom: var(--s3); }   /* display comes from .ruled-eyebrow; do not set it here */
  .band-head h2 {
    font-size: clamp(var(--t7), 3.6vw, var(--t8));
    line-height: 1.12; letter-spacing: -0.018em; font-weight: 700;
    margin: 0; text-wrap: balance; max-width: var(--measure-head);
  }
  .band-head p { margin: var(--s3) 0 0; max-width: var(--measure); color: var(--muted); }

  /* ---------- audience ---------- */
  .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s7); }
  .col { border-top: 3px solid var(--rule-heavy); padding-top: var(--s4); }
  .col-head { display: block; margin-bottom: var(--s2); color: var(--accent); }
  .col p { margin: 0; font-size: var(--t4); color: var(--muted); max-width: var(--measure-tight); }
  @media (max-width: 780px) { .cols { grid-template-columns: 1fr; gap: var(--s6); } }

  /* ---------- outcomes ---------- */
  .outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s8); }
  .outcome { display: flex; gap: var(--s4); padding: var(--s5) 0; border-bottom: 1px solid var(--rule); }
  .outcome-n {
    font-family: var(--utility); font-variant-numeric: tabular-nums;
    font-size: var(--t1); font-weight: 700; letter-spacing: 0.08em;
    color: var(--accent); padding-top: var(--s1); flex: none;
  }
  .outcome p { margin: 0; font-size: var(--t4); line-height: 1.5; max-width: var(--measure-mid); }
  @media (max-width: 780px) { .outcomes { grid-template-columns: 1fr; gap: 0; } }

  /* ---------- image tiles: one per ingredient family, tied to a module ---------- */
  .shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s7); }
  .shots figure { margin: 0; }
  .shots img {
    display: block; width: 100%; height: auto; aspect-ratio: 1;
    object-fit: cover; border-radius: var(--radius-sm);
    background: var(--veil);
    box-shadow: 0 0 0 var(--mount-w) var(--mount);
  }
  .shots figcaption { border-top: 3px solid var(--rule-heavy); margin-top: var(--s4); padding-top: var(--s3); }
  .shots .col-head { display: block; margin-bottom: var(--s2); color: var(--accent); }
  .shots p { margin: 0; font-size: var(--t4); color: var(--muted); max-width: var(--measure-tight); }
  .shots .mod {
    display: block; margin-top: var(--s2);
    font-family: var(--utility); font-size: var(--t1); font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  }
  @media (max-width: 780px) { .shots { grid-template-columns: 1fr; gap: var(--s7); } }

  /* ---------- curriculum: the facts panel ---------- */
  .facts {
    border-radius: var(--radius);
    overflow: hidden;
    border-top: 8px solid var(--rule-heavy);
    border-bottom: 8px solid var(--rule-heavy);
    background: linear-gradient(180deg, var(--veil-strong), var(--veil));
  }
  .facts-top {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s5);
    padding: var(--s3) var(--s5); border-bottom: 3px solid var(--rule-heavy);
  }
  .facts-top .total {
    font-family: var(--utility); font-size: var(--t1); font-weight: 700;
    letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase;
  }
  .fact-row {
    display: grid; grid-template-columns: 44px 1fr; gap: var(--s4);
    padding: var(--s4) var(--s5); border-bottom: 1px solid var(--rule);
  }
  .fact-row:last-child { border-bottom: 0; }
  .fact-row.is-exam { background: linear-gradient(90deg, color-mix(in srgb, var(--bar) 30%, transparent), transparent 76%); }
  .fact-n {
    font-family: var(--utility); font-size: var(--t1); font-weight: 700;
    letter-spacing: 0.06em; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: var(--s1);
  }
  .fact-title { font-size: var(--t4); font-weight: 700; line-height: 1.35; max-width: var(--measure); }
  .fact-note { display: block; font-weight: 400; font-size: var(--t3); color: var(--muted); margin-top: var(--s1); }

  .pattern {
    display: flex; flex-wrap: wrap; gap: var(--s2) var(--s2); margin-top: var(--s6);
    font-family: var(--utility); font-size: var(--t1); font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
    align-items: center;
  }
  .pattern span { border: 1px solid var(--rule); padding: var(--s1) var(--s3); border-radius: 999px; }

  /* ---------- credibility ---------- */
  .cred { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s9); align-items: start; }
  .cred-body p { max-width: var(--measure); font-size: var(--t4); }
  .cred-body p:first-child { margin-top: 0; }
  .track { border-top: 3px solid var(--rule-heavy); }
  .track-row {
    display: grid; grid-template-columns: auto 1fr; gap: var(--s5);
    padding: var(--s4) 0; border-bottom: 1px solid var(--rule); align-items: baseline;
  }
  .track-tier {
    font-family: var(--utility); font-size: var(--t1); font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); white-space: nowrap;
  }
  .track-what { font-size: var(--t4); line-height: 1.4; max-width: var(--measure-mid); }
  @media (max-width: 880px) { .cred { grid-template-columns: 1fr; gap: var(--s7); } }

  /* ---------- pricing ---------- */
  .price-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--s8); align-items: start; }
  @media (max-width: 880px) { .price-grid { grid-template-columns: 1fr; gap: var(--s7); } }

  .price-panel { border: 3px solid var(--rule-heavy); background: linear-gradient(168deg, var(--veil-strong), var(--veil)); border-radius: var(--radius); overflow: hidden; }
  .price-flag {
    background: linear-gradient(96deg, #56289E, var(--bar));
    color: #FFFFFF;
    font-family: var(--utility); font-size: var(--t1); font-weight: 800;
    letter-spacing: 0.16em; text-transform: uppercase; padding: var(--s2) var(--s5);
  }
  .price-body { padding: var(--s6) var(--s6) var(--s6); }
  .price-amount {
    font-size: var(--t10); font-weight: 700; line-height: 1;
    letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin: 0;
  }
  .price-amount sup { font-size: var(--t6); top: -0.65em; position: relative; font-weight: 700; }
  .price-unit { color: var(--muted); font-size: var(--t3); margin: var(--s2) 0 0; }
  .price-includes { list-style: none; margin: var(--s5) 0 var(--s6); padding: 0; border-top: 1px solid var(--rule); }
  .price-includes li {
    padding: var(--s3) 0; border-bottom: 1px solid var(--rule);
    font-size: var(--t4); display: flex; gap: var(--s3); align-items: baseline;
  }
  .tick { color: var(--accent); font-weight: 700; flex: none; }
  .price-note { font-size: var(--t3); color: var(--muted); margin: var(--s4) 0 0; max-width: var(--measure-mid); }

  /* bulk table */
  .bulk { border-top: 8px solid var(--rule-heavy); }
  .bulk-top {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
    padding: var(--s3) 0; border-bottom: 3px solid var(--rule-heavy);
  }
  .bulk-top .total {
    font-family: var(--utility); font-size: var(--t1); font-weight: 700;
    letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase;
  }
  .bulk-row {
    display: grid; grid-template-columns: auto 1fr auto; gap: var(--s4);
    align-items: baseline; padding: var(--s3) 0; border-bottom: 1px solid var(--rule);
  }
  .bulk-price { font-size: var(--t6); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 4.2ch; }
  .bulk-seats { font-size: var(--t4); color: var(--muted); font-variant-numeric: tabular-nums; }
  .bulk-off {
    font-family: var(--utility); font-size: var(--t1); font-weight: 700;
    letter-spacing: 0.06em; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap;
  }

  /* ---------- advisory board ---------- */
  .board { border-top: 3px solid var(--rule-heavy); margin-top: var(--s5); }
  .board-row {
    display: grid; grid-template-columns: 1fr auto; gap: var(--s3) var(--s5);
    align-items: baseline; padding: var(--s4) 0;
    border-bottom: 1px solid var(--rule);
  }
  .board-name { font-size: var(--t5); font-weight: 700; line-height: 1.25; }
  .board-role { display: block; font-weight: 400; font-size: var(--t3); color: var(--muted); margin-top: var(--s1); }
  .board-tag {
    font-family: var(--utility); font-size: var(--t1); font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); white-space: nowrap;
  }
  @media (max-width: 620px) { .board-row { grid-template-columns: 1fr; gap: var(--s2); } }

  /* ---------- further reading: outbound to the Learn Brands blog ---------- */
  .reading { border-top: 3px solid var(--rule-heavy); }
  .reading a {
    display: grid; grid-template-columns: 1fr auto; gap: var(--s4);
    align-items: baseline; padding: var(--s4) 0;
    border-bottom: 1px solid var(--rule);
    text-decoration: none; color: var(--ink);
  }
  .reading a:hover .rt { text-decoration: underline; text-underline-offset: 3px; }
  .rt { font-size: var(--t5); font-weight: 700; line-height: 1.3; max-width: 46ch; }
  .rn { display: block; font-weight: 400; font-size: var(--t3); color: var(--muted); margin-top: var(--s1); }
  .rs {
    font-family: var(--utility); font-size: var(--t1); font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); white-space: nowrap;
  }
  @media (max-width: 620px) {
    .reading a { grid-template-columns: 1fr; gap: var(--s2); }
  }

  /* ---------- faq ---------- */
  .faq { border-top: 3px solid var(--rule-heavy); }
  .faq-item { border-bottom: 1px solid var(--rule); padding: var(--s5) 0; }
  .faq-q { font-size: var(--t5); font-weight: 700; margin: 0 0 var(--s2); }
  .faq-a { margin: 0; color: var(--muted); max-width: var(--measure); font-size: var(--t4); }

  /* ---------- closer ---------- */
  .closer { position: relative; text-align: center; padding-block: var(--s11); overflow: hidden; }
  .closer::before {
    content: ""; position: absolute; left: 50%; top: -30%;
    width: 720px; aspect-ratio: 1; transform: translateX(-50%);
    background: radial-gradient(circle, var(--g-glow) 0%, transparent 62%);
    pointer-events: none;
  }
  .closer .shell { position: relative; }
  .closer h2 {
    font-size: clamp(var(--t7), 4.4vw, var(--t9)); line-height: 1.08; letter-spacing: -0.02em;
    margin: 0 auto; max-width: var(--measure-head); text-wrap: balance; font-weight: 700;
  }
  .closer p { color: var(--muted); max-width: var(--measure-mid); margin: var(--s4) auto 0; }
  .closer .btn { margin-top: var(--s7); }

  /* ---------- footer, closed by the brand's violet bar ---------- */
  footer { padding-block: var(--s7) var(--s8); }
  .foot {
    display: flex; flex-wrap: wrap; gap: var(--s4) var(--s7); align-items: center;
    font-family: var(--utility); font-size: var(--t1); letter-spacing: 0.05em; color: var(--muted);
  }
  .foot a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--rule); }
  .foot a:hover { color: var(--ink); border-color: var(--ink); }
  .foot .sep { margin-left: auto; }
  .brand-bar { height: 22px; background: linear-gradient(90deg, var(--bar), var(--bar-lift) 50%, var(--bar)); }

  /* ---------- entrance ---------- */
  .rise { animation: rise 620ms cubic-bezier(0.22, 0.68, 0.3, 1) both; }
  .rise-2 { animation-delay: 90ms; }
  .rise-3 { animation-delay: 170ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .rise { animation: none; }
    .btn:hover { transform: none; }
    * { transition-duration: 1ms !important; }
  }

  /* ---------- prose pages: privacy, terms, contact, 404 ---------- */
  .prose { max-width: var(--measure); }
  .prose h3 {
    font-size: var(--t6); font-weight: 700; letter-spacing: -0.012em;
    margin: var(--s8) 0 var(--s2); line-height: 1.2;
  }
  .prose h3:first-of-type { margin-top: 0; }
  .prose p, .prose li { font-size: var(--t4); line-height: 1.62; }
  .prose ul { padding-left: var(--s5); }
  .prose li { margin-bottom: var(--s2); }
  /* :not(.btn) is load-bearing. .prose a is (0,1,1) and .btn is (0,1,0), so
     without it every button inside a prose block gets ink-coloured text on a
     violet gradient. Measured at 2.23:1 on the December 11 page before this
     was added. Same failure the FBC nav had. */
  .prose a:not(.btn) { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }

  /* The contact page breaks out of .prose to lay the three editions side by
     side, then goes back into .prose. Without this the grid's bottom edge and
     the next heading's top edge land on the same pixel. */
  .contact-options { margin-block: var(--s6) var(--s9); }

  /* ---------- funnel bits ---------- */

  /* A card's action sits at its foot with a quieter text link beside it, so
     the button is the obvious thing and the detail page is still reachable. */
  .col-cta {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--s3) var(--s5); margin-top: var(--s5);
  }
  /* .btn-quiet is declared after .btn-sm and wins on source order, so a small
     quiet button renders at full size and wraps whatever sits beside it. The
     2px trim compensates for the border so both buttons end the same height. */
  .btn-sm.btn-quiet {
    font-size: var(--t2);
    padding: calc(var(--s2) - 2px) calc(var(--s5) - 2px);
    margin-top: 0;
  }

  .col-more {
    font-family: var(--utility); font-size: var(--t2); font-weight: 600;
    color: var(--ink); text-decoration-color: var(--accent);
    text-underline-offset: 3px;
  }

  /* The offer block on the December 11 page. That page is written to be found
     in search, so it carries the three editions rather than making a reader
     who has just been told to train their staff go and look for them. */
  .offer {
    border: 3px solid var(--rule-heavy); border-radius: var(--radius);
    background: linear-gradient(168deg, var(--veil-strong), var(--veil));
    margin-block: var(--s9); overflow: hidden;
  }
  .offer-head {
    display: flex; flex-wrap: wrap; gap: var(--s3);
    align-items: baseline; justify-content: space-between;
    padding: var(--s4) var(--s6);
    border-bottom: 1px solid var(--rule);
  }
  .offer-cols {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--s7); padding: var(--s6);
  }
  @media (max-width: 780px) { .offer-cols { grid-template-columns: 1fr; gap: var(--s6); } }
  .offer-col p { margin: var(--s2) 0 var(--s4); font-size: var(--t3); color: var(--muted); }
  .offer-col .btn { margin-right: var(--s4); }
  .offer-col .col-more { white-space: nowrap; }

  /* The softer second option under a closer's main button. */
  .closer-alt { margin: var(--s5) 0 0; font-size: var(--t3); }
  .closer-alt a { color: inherit; text-decoration-color: currentColor; text-underline-offset: 3px; }

  /* An early, quiet offer on a long editorial page. The full offer block sits
     two thirds down, which is past where most readers stop. */
  .inline-cta {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--s4) var(--s6);
    margin-block: var(--s7);
    padding: var(--s5) var(--s6);
    border-left: 4px solid var(--bar);
    background: linear-gradient(120deg, var(--veil-strong), var(--veil));
    border-radius: 0 var(--radius) var(--radius) 0;
  }
  .inline-cta span { flex: 1 1 22ch; font-size: var(--t3); margin: 0; }
  .inline-cta .btn { flex: none; }

  .contact-buy { display: flex; flex-wrap: wrap; gap: var(--s4); margin: var(--s5) 0 var(--s8); }

  /* Two buttons side by side in a closer, rather than stacked. */
  .closer .btn + .btn { margin-left: var(--s4); }
  @media (max-width: 560px) {
    .closer .btn { display: flex; }
    .closer .btn + .btn { margin-left: 0; margin-top: var(--s4); }
  }

  /* Body-copy links outside .prose. Without this they fall through to the
     browser default blue, off-brand on the light ground and unreadable on the
     dark one. :not(.btn) so a button inside a paragraph keeps its own colour. */
  .hero-lede a,
  main p a:not(.btn),
  main li a:not(.btn) {
    color: var(--ink);
    text-decoration-color: var(--accent);
    text-underline-offset: 3px;
  }
  .hero-lede a:hover,
  main p a:not(.btn):hover,
  main li a:not(.btn):hover { text-decoration-color: var(--ink); }
  .prose .stamp {
    font-family: var(--utility); font-size: var(--t1); font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
    border-top: 3px solid var(--rule-heavy); padding-top: var(--s3); margin-top: var(--s8); display: block;
  }

  /* HubSpot renders its form inside an iframe, so nothing here can reach the
     fields. Style the form in HubSpot's own editor instead. Only the spacing
     of the container is ours. */
  .hs-embed { margin-top: var(--s6); }

  /* ---------- author block: built from the certificate's own language ----------
     Heavy rule and uppercase label like the facts panel, a gold bar under the
     portrait echoing the foot of the logo lockup, and a signature line the way
     the certificate carries one. */
  .author-panel {
    border-top: 8px solid var(--rule-heavy);
    background: linear-gradient(180deg, var(--veil-strong), var(--veil));
    margin-top: var(--s8);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .author-top {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s4); padding: var(--s3) var(--s5);
    border-bottom: 3px solid var(--rule-heavy);
  }
  .author-top .issued {
    font-family: var(--utility); font-size: var(--t1); font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  }
  .author-body {
    display: grid; grid-template-columns: 236px 1fr; gap: var(--s7);
    padding: var(--s6) var(--s5) var(--s6); align-items: start;
  }
  .author-body img {
    display: block; width: 100%; height: auto;
    border-bottom: 6px solid var(--bar);
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 var(--mount-w) var(--mount);
  }
  .author-name {
    font-size: clamp(var(--t6), 3vw, var(--t7)); font-weight: 700;
    letter-spacing: -0.018em; line-height: 1.05; margin: 0;
  }
  .author-role {
    display: block; margin: var(--s2) 0 var(--s4);
    font-family: var(--utility); font-size: var(--t1); font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
  }
  .author-body p { margin: 0; font-size: var(--t4); line-height: 1.6; max-width: var(--measure); }
  .author-sign { border-top: 1px solid var(--rule-heavy); margin-top: var(--s5); padding-top: var(--s3); }
  .author-sign .sig { font-size: var(--t6); font-style: italic; line-height: 1.2; }
  .author-sign .sig-role {
    display: block; margin-top: var(--s1);
    font-family: var(--utility); font-size: var(--t1); font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  }

  /* compact variant for the home page */
  .author-panel.is-compact .author-body { grid-template-columns: 136px 1fr; gap: var(--s6); padding: var(--s5) var(--s5); }
  .author-panel.is-compact .author-name { font-size: var(--t6); }
  .author-panel.is-compact .author-role { margin: var(--s1) 0 var(--s2); }
  .author-panel.is-compact .author-body p { font-size: var(--t3); }
  .author-panel.is-compact .author-body img { border-bottom-width: 5px; border-radius: var(--radius-sm); }

  @media (max-width: 640px) {
    .author-body, .author-panel.is-compact .author-body { grid-template-columns: 1fr; gap: var(--s5); }
    .author-body img { max-width: 220px; }
  }

  /* Small phones. Must stay last in the file: the 880px block above also
     sets .art-wrap at equal specificity, and source order decides.
     The hero was 1134px tall at 375px wide, which pushed the
     CTA 169px and the price 244px below the fold. Tightened so both land
     above it. */
  @media (max-width: 560px) {
    .hero { padding-block: var(--s5) var(--s10); }
    .hero-grid { gap: var(--s6); }
    /* Copy first, artwork after the CTA. Shrinking alone still left the
       button 23px below the fold, and that margin would not survive a
       shorter phone. */
    .hero-grid > div:not(.art-wrap) { order: 1; }
    .art-wrap { order: 2; max-width: 200px; }
    .hero-lede { margin-top: var(--s4); }
    .specs { margin-top: var(--s5); }
    .spec { padding: var(--s2) var(--s4) var(--s2) 0; margin-right: var(--s4); }
    .hero-cta { margin-top: var(--s5); }
  }