:root {
    /* from the course logo lockup */
    --forest:    #0D3D31;
    --steel:     #698FB3;
    --rust:      #944F28;
    --gold:      #FAC420;
    --gold-lift: #FFDC5C;

    --ink:       #0D3D31;
    --muted:     #68614E;
    --rule:      #D9C8A8;
    --rule-heavy:#0D3D31;

    /* the page ground: ivory at the top, orangish tan at the foot */
    --g-page-a:  #F8F2E1;
    --g-page-b:  #FDD7A4;
    --g-glow:    rgba(242, 160, 7, 0.26);
    --veil:        rgba(255, 253, 245, 0.52);
    --veil-strong: rgba(255, 254, 249, 0.76);
    --g-hair:    linear-gradient(90deg, transparent, #C08050 18%, #A85A2E 50%, #C08050 82%, transparent);

    /* illustration: a brand asset, so it keeps its palette in both themes */
    --il-can-a:  #1B0F3F;
    --il-can-b:  #3B2878;
    --il-can-c:  #2A1A56;
    --il-cap:    #DDE6F8;
    --il-glass:  #DDE6F8;
    --il-pour-a: #F8B72A;
    --il-pour-b: #EC9605;
    --il-straw:  #6AACE0;
    --il-straw2: #BFD5EE;
    --il-leaf-a: #64D89E;
    --il-leaf-b: #35B478;
    --il-boba-a: #C27B3E;
    --il-boba-b: #9E5827;
    --il-disc-a: #6FA6D6;
    --il-disc-b: #4A83BC;

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

    --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"]) {
      --forest:    #F4EEDC;
      --steel:     #9DC0E2;
      --rust:      #D58D60;
      --gold:      #FAC420;
      --gold-lift: #FFDC5C;

      --ink:       #F4EEDC;
      --muted:     #A3B2A6;
      --rule:      #2C4A40;
      --rule-heavy:#F4EEDC;

      --g-page-a:  #0C1F1A;
      --g-page-b:  #1B3B2E;
      --g-glow:    rgba(242, 160, 7, 0.18);
      --veil:        rgba(255, 255, 255, 0.04);
      --veil-strong: rgba(255, 255, 255, 0.07);
      --g-hair:    linear-gradient(90deg, transparent, #6B4A33 18%, #A2704E 50%, #6B4A33 82%, transparent);
    }
  }

  :root[data-theme="dark"] {
    --forest:    #F4EEDC;
    --steel:     #9DC0E2;
    --rust:      #D58D60;
    --gold:      #FAC420;
    --gold-lift: #FFDC5C;

    --ink:       #F4EEDC;
    --muted:     #A3B2A6;
    --rule:      #2C4A40;
    --rule-heavy:#F4EEDC;

    --g-page-a:  #0C1F1A;
    --g-page-b:  #1B3B2E;
    --g-glow:    rgba(242, 160, 7, 0.18);
    --veil:        rgba(255, 255, 255, 0.04);
    --veil-strong: rgba(255, 255, 255, 0.07);
    --g-hair:    linear-gradient(90deg, transparent, #6B4A33 18%, #A2704E 50%, #6B4A33 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(--gold); color: #0D3D31;
    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(--rust);
    border-top: 1px solid var(--rust);
    border-bottom: 1px solid var(--rust);
    padding: var(--s2) 0;
  }

  /* ---------- nav ---------- */
  .topbar { position: relative; }
  .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; }
  .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(--steel); }
  .wordmark .bc { color: var(--forest); }
  .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: gold, the way the logo bar is gold ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
    background: linear-gradient(158deg, var(--gold-lift), var(--gold) 62%, #EFB40C);
    color: #0D3D31;
    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(168,90,46,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(168,90,46,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(--rust); 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; }
  .art-wrap { position: relative; }
  .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(--steel); font-size: clamp(var(--t8), 6.6vw, var(--t10)); }
  .lockup .bc { display: block; color: var(--forest); 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(--rust); }
  .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(--rust); 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; } }

  /* ---------- 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(--gold) 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(--rust); 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, var(--gold), var(--gold-lift));
    color: #0D3D31;
    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(--rust); 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(--rust); font-variant-numeric: tabular-nums; white-space: nowrap;
  }

  /* ---------- 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 logo's gold 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; }
  .gold-bar { height: 22px; background: linear-gradient(90deg, var(--gold), var(--gold-lift) 50%, var(--gold)); }

  /* ---------- 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); }
  .prose a { color: var(--ink); text-decoration-color: var(--rust); text-underline-offset: 3px; }
  .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(--gold);
    border-radius: var(--radius-sm);
  }
  .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(--rust);
  }
  .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); }
  }