/* ==========================================================================
   Citizen Playbook public website
   Phase 1 review mockup stylesheet (local, review only)

   This is the single place where brand color, typography, spacing, button,
   card, header and footer styling are defined. Editing a token here changes
   every mockup page at once.

   Brand assets are not referenced by path in this file. They live in exactly
   one folder, "assets/brand/", under fixed filenames. See
   assets/brand/ASSETS_README.md for how to swap in the final cover and the
   permanent logo without touching any page markup.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   Colors are the approved Citizen Playbook brand values. Not every color is
   used on every page. Gold and teal are deliberately restrained.
   -------------------------------------------------------------------------- */
:root {
  /* Brand core */
  --navy:            #031e35;  /* primary text, primary buttons, dark bands */
  --navy-cover:      #010e17;  /* deepest navy, sampled from the book cover */
  --gold:            #e0b26b;  /* accent rules and borders only, never text */
  --gold-deep:       #d0975a;  /* accent, slightly stronger */
  --parchment:       #fcecce;  /* warm highlight, used sparingly */
  --teal:            #3d646e;  /* secondary accent, passes contrast as text */
  --focus:           #9a6f22;  /* approved focus indicator color */

  /* Surfaces */
  --bg-white:        #ffffff;
  --bg-cream:        #fbf6ec;  /* warm cream band background */
  --bg-cream-soft:   #fdfaf4;  /* very light cream, for nested panels */
  --border:          #e6e0d4;  /* subtle warm border, decorative separation */
  --border-strong:   #cfc6b4;  /* decorative dashed frames */
  --border-control:  #8d8574;  /* 3.66:1 on white, used wherever a border is
                                  part of identifying a control or a slot */

  /* Text */
  --text:            var(--navy);
  --text-muted:      #4f6272;
  --text-on-navy:    #ffffff;
  --text-on-navy-muted: #cdd8e0;

  /* Elevation */
  --shadow-card:     0 1px 2px rgba(3, 30, 53, 0.05), 0 2px 8px rgba(3, 30, 53, 0.05);
  --shadow-lift:     0 2px 4px rgba(3, 30, 53, 0.06), 0 12px 28px rgba(3, 30, 53, 0.10);
  --shadow-cover:    0 8px 20px rgba(3, 30, 53, 0.16), 0 30px 60px rgba(3, 30, 53, 0.20);

  /* Radii */
  --radius-sm:       8px;
  --radius:          12px;
  --radius-lg:       18px;

  /* Spacing scale */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 40px;  --s-8: 56px;
  --s-9: 72px;  --s-10: 96px;

  /* Layout */
  --page-max:        1120px;
  --page-pad:        clamp(20px, 5vw, 40px);
  --band-pad:        clamp(56px, 9vw, 104px);

  /* Typography.
     Body and interface type is the typeface the deployed app already loads.
     Display type is the warm serif proposed for the app redesign. Both fall
     back to widely available system faces if the webfonts do not load. */
  --font-body:    "Google Sans Flex", "Public Sans", system-ui, -apple-system,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;

  --fs-eyebrow:  0.8125rem;
  --fs-small:    0.875rem;
  --fs-body:     1.0625rem;
  --fs-lead:     clamp(1.0625rem, 0.98rem + 0.42vw, 1.25rem);
  --fs-h3:       clamp(1.1875rem, 1.12rem + 0.34vw, 1.375rem);
  --fs-h2:       clamp(1.625rem, 1.36rem + 1.28vw, 2.375rem);
  --fs-h1:       clamp(2.125rem, 1.62rem + 2.42vw, 3.5rem);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg-white);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
  /* Zoom fix. A heading word only breaks when it cannot fit on the line at
     all, so wide and standard screens look exactly as they did before. */
  overflow-wrap: anywhere;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-underline-offset: 3px; }
a:hover { color: var(--teal); }

ul { margin: 0 0 var(--s-4); padding-left: 1.25em; }
li { margin-bottom: var(--s-2); }

/* Focus: one visible, high contrast indicator everywhere, using the
   approved focus color. It is never removed. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
/* On dark bands the gold ring needs a dark halo to stay clearly visible. */
.band--navy :focus-visible,
.site-footer :focus-visible,
.review-flag :focus-visible {
  outline-color: var(--gold);
  box-shadow: 0 0 0 6px rgba(3, 30, 53, 0.92);
}

/* Respect a reduced motion preference. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   3. Utilities
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--s-4); top: var(--s-3);
  z-index: 200;
  transform: translateY(-250%);
  background: var(--navy);
  color: var(--text-on-navy);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); color: var(--text-on-navy); }

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}
.wrap--narrow { max-width: 800px; }

.band { padding-block: var(--band-pad); }
.band--white   { background: var(--bg-white); }
.band--cream   { background: var(--bg-cream); }
.band--navy    { background: var(--navy); color: var(--text-on-navy-muted); }
.band--navy h2, .band--navy h3 { color: var(--text-on-navy); }
.band--navy a:not(.btn) { color: var(--text-on-navy); }
.band--hairline { border-top: 1px solid var(--border); }

.lead { font-size: var(--fs-lead); color: var(--text-muted); line-height: 1.6; }
.band--navy .lead { color: var(--text-on-navy-muted); }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-small); }

/* Eyebrow: a short gold rule plus an uppercase label. The rule is decoration
   only. The label always carries the meaning, so nothing here depends on
   color to be understood. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 32px; height: 3px;
  border-radius: 2px;
  background: var(--gold);
}
.band--navy .eyebrow { color: var(--gold); }

.section-head { max-width: 720px; margin-bottom: var(--s-8); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* --------------------------------------------------------------------------
   4. Buttons and actions
   Touch targets are at least 48px tall and 44px wide.
   -------------------------------------------------------------------------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  margin-top: var(--s-6);
}
.actions--center { justify-content: center; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  min-width: 44px;
  padding: 12px 26px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn--primary {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--text-on-navy);
}
.btn--primary:hover { background: #06304f; border-color: #06304f; color: var(--text-on-navy); }

.btn--secondary {
  background: var(--bg-white);
  border-color: var(--navy);
  color: var(--navy);
}
.btn--secondary:hover { background: var(--bg-cream); color: var(--navy); }

.btn--on-navy {
  background: var(--bg-white);
  border-color: var(--bg-white);
  color: var(--navy);
}
.btn--on-navy:hover { background: var(--parchment); border-color: var(--parchment); color: var(--navy); }

.btn--outline-on-navy {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.62);
  color: var(--text-on-navy);
}
.btn--outline-on-navy:hover { border-color: #ffffff; background: rgba(255, 255, 255, 0.08); color: #ffffff; }

/* Lower emphasis action, a text link with a gold underline. */
.link-action {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 1px;
}
.link-action:hover { color: var(--teal); border-bottom-color: var(--teal); }
.link-action svg { width: 16px; height: 16px; }

/* Availability notice. Deliberately not a button: it describes availability
   rather than offering an action, so it is not focusable and not clickable. */
.availability {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 13px 20px;
  border: 1px dashed var(--border-control);
  border-radius: 10px;
  background: var(--bg-cream-soft);
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: 600;
}
.availability::before {
  content: "";
  flex: none;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gold-deep);
}

/* Small tag placed beside an action. It states its meaning in words, so it
   never relies on color alone. */
.tag-soon {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--border-control);
  border-radius: 999px;
  background: var(--bg-cream-soft);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.band--navy .tag-soon {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-on-navy-muted);
}

/* --------------------------------------------------------------------------
   5. Cards and grids
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(24px, 3.4vw, 36px);
}
.card > *:last-child { margin-bottom: 0; }
.card__foot { margin-top: auto; padding-top: var(--s-5); }

/* Product cards give the book and the app the same width, padding, heading
   level and action treatment, so neither reads as an advertisement for the
   other. */
.card--product .card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 304px;
  margin-bottom: var(--s-6);
  padding: var(--s-5);
  border-radius: var(--radius);
  background: var(--bg-cream);
  border: 1px solid var(--border);
}
/* Once the two cards sit side by side, the panels are locked to one height so
   the headings underneath line up. Stacked on a narrow screen they grow with
   their content instead, which keeps the tool names inside their panel. */
@media (min-width: 980px) {
  .card--product .card__media { height: 304px; }
}
/* Inside a product panel the cover is sized by height, not width, so that a
   replacement cover with a different aspect ratio still lines up with the
   app panel beside it. */
.card--product .cover-figure img {
  width: auto;
  max-width: 100%;
  height: 244px;
}

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: var(--s-4);
  border-radius: var(--radius);
  background: var(--bg-cream);
  border: 1px solid var(--border);
  color: var(--teal);
}
.icon-badge svg { width: 24px; height: 24px; }

/* Numbered steps. The number is repeated in the heading text for screen
   readers, so the visual circle is decorative. */
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  margin-bottom: var(--s-4);
  border-radius: 50%;
  background: var(--navy);
  color: var(--text-on-navy);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
}
.band--navy .step__num { background: var(--gold); color: var(--navy); }

/* Checklist used for what readers will learn. */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.checklist li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--s-3);
  align-items: start;
  margin: 0;
}
.checklist svg { width: 22px; height: 22px; margin-top: 3px; color: var(--teal); flex: none; }
@media (min-width: 780px) {
  .checklist { grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-7); }
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 68px;
  padding-block: var(--s-2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  text-decoration: none;
  color: var(--navy);
}
/* The logo is a supporting icon only. The words carry the identity. It is not
   enlarged and is never used as a decorative hero element. The file lives in
   assets/brand and is referenced by one fixed name across the whole site. */
.brand img { width: 34px; height: 34px; border-radius: 8px; flex: none; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.nav-toggle { display: none; }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin: 0; padding: 0;
  list-style: none;
}
.site-nav li { margin: 0; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}
.site-nav a:hover { color: var(--navy); background: var(--bg-cream); }
.site-nav a[aria-current="page"] {
  color: var(--navy);
  box-shadow: inset 0 -3px 0 var(--navy);
}

/* Mobile navigation.
   Progressive enhancement: with JavaScript disabled the links stay visible
   and simply wrap onto their own row. The inline script adds the "js" class,
   which enables the toggle button and the collapsed panel. */
@media (max-width: 820px) {
  .site-header__inner { flex-wrap: wrap; }
  .site-nav ul { flex-wrap: wrap; justify-content: flex-start; }

  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 44px;
    min-width: 44px;
    padding: 0 14px;
    border: 1.5px solid var(--border-control);
    border-radius: var(--radius-sm);
    background: var(--bg-white);
    color: var(--navy);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
  }
  .js .nav-toggle svg { width: 20px; height: 20px; }
  .js .site-nav {
    flex-basis: 100%;
    border-top: 1px solid var(--border);
    margin-top: var(--s-2);
    padding-block: var(--s-2);
  }
  /* Collapsed by default once the js class is present, so the panel never
     flashes open on load. The class is added in the head, before paint. */
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; }
  .js .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .js .site-nav a { min-height: 48px; padding: 0 12px; }
  .js .site-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--navy); }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(52px, 8.5vw, 108px); background: var(--bg-cream); }
.hero__inner { max-width: 860px; margin-inline: auto; text-align: center; }
.hero h1 { margin-bottom: var(--s-5); }
.hero .lead { max-width: 660px; margin-inline: auto; }
.hero .eyebrow { justify-content: center; }

/* Two column hero, used on the book and app pages. */
.hero--split .hero__inner { max-width: none; text-align: left; }
.hero--split .eyebrow { justify-content: flex-start; }
.hero--split .lead { margin-inline: 0; max-width: 56ch; }
.hero__grid {
  display: grid;
  gap: clamp(36px, 6vw, 72px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.08fr 0.92fr; }
}

/* The approved cover is the strongest dark element on the site. It is shown
   plainly, with a soft shadow, never cropped, tinted or rotated. */
.cover-figure { margin: 0; display: flex; justify-content: center; }
.cover-figure img {
  width: 100%;
  max-width: 340px;
  border-radius: 4px;
  box-shadow: var(--shadow-cover);
}
.cover-figure--lg img { max-width: 380px; }
.cover-figure--sm img { max-width: 178px; box-shadow: var(--shadow-lift); }

/* Book subtitle, set in the display face directly under the title. */
.book-sub {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.62vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--teal);
  margin: calc(var(--s-2) * -1) 0 var(--s-5);
}

/* App identity mark, given the same presence on the app page that the cover
   has on the book page. */
.app-mark { margin: 0; display: flex; justify-content: center; }
.app-mark img {
  width: 100%;
  max-width: 268px;
  border-radius: 26px;
  box-shadow: var(--shadow-cover);
}

/* A control shown in the mockup with its real label but no behavior, so the
   composition can be judged without anyone being sent into the live app. */
.btn:disabled {
  cursor: default;
  opacity: 1;
  background: var(--navy);
  border-color: var(--navy);
  color: var(--text-on-navy);
}
.btn-note {
  margin-top: var(--s-3);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.btn-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  color: var(--navy);
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
  /* Zoom fix. The address is a single unbreakable token, so it set the minimum
     width of the whole hero column at a large text setting. */
  overflow-wrap: anywhere;
}

/* Publication details, kept quiet. */
.isbn {
  margin-top: var(--s-4);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   8. App tool presentation
   The tools are shown as text and simple line icons rather than as a
   screenshot, so nothing on the page can imply data or results that do not
   exist.
   -------------------------------------------------------------------------- */
.tool-list {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.tool {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-5);
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.tool h3 { margin-bottom: var(--s-2); font-size: 1.0625rem; }
.tool p { font-size: var(--fs-small); color: var(--text-muted); }
.tool .icon-badge { margin-bottom: 0; }

/* Compact list of tool names, used inside the homepage app card. */
/* The six tool names are descriptive labels, not controls, so they carry no
   pill, outline, border or fill of their own. Plain text on one left edge,
   shared with the mark and the name above them, and deliberately quieter than
   the panel heading. */
.tool-list { margin: 0; padding: 0; list-style: none; }
.tool-list li {
  margin: 0;
  padding: 0;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.95;
}

/* Placeholder panel for the pricing area. Sized like real content so the
   page composition can be judged, but carrying no numbers. */
.placeholder-panel {
  padding: clamp(28px, 4.5vw, 48px);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-cream-soft);
  text-align: center;
}
.placeholder-panel h2 { margin-bottom: var(--s-3); }

/* Retailer slots for the future purchase area. They are empty frames, not
   claims that a retailer is confirmed. */
.slot-row {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
  margin-top: var(--s-5);
}
.slot {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border: 1px dashed var(--border-control);
  border-radius: 10px;
  background: var(--bg-white);
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: 600;
  text-align: center;
}

/* --------------------------------------------------------------------------
   10. Cross reference panel
   Connects the book and the app without implying one bundled product.
   -------------------------------------------------------------------------- */
.crossref {
  display: grid;
  gap: var(--s-6);
  align-items: center;
  padding: clamp(28px, 4.5vw, 44px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-white);
  box-shadow: var(--shadow-card);
}
@media (min-width: 760px) {
  .crossref { grid-template-columns: auto 1fr; gap: var(--s-8); }
}
.crossref__art { display: flex; align-items: center; justify-content: center; }
.crossref__art img { width: 96px; height: 96px; border-radius: var(--radius); }
.crossref h2 { font-size: var(--fs-h3); }

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy);
  color: var(--text-on-navy-muted);
  padding-block: var(--s-9) var(--s-6);
}
.site-footer__top {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: 1fr;
  padding-bottom: var(--s-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
@media (min-width: 760px) {
  /* Three link columns sit side by side and the brand block takes the full
     width above them. Fitting four columns at 768 squeezes the longest link,
     AI Disclosure, onto two lines; giving the brand its own row keeps every
     column readable at the narrow end of the range. */
  .site-footer__top { grid-template-columns: 1fr 1fr 1fr; gap: var(--s-7) var(--s-8); }
  .site-footer__top > :first-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  /* Wide enough for all four across: the brand, then Explore, Policies, Follow. */
  .site-footer__top { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--s-8); }
  .site-footer__top > :first-child { grid-column: auto; }
}
.site-footer .brand { color: var(--text-on-navy); }
.site-footer .brand img { width: 38px; height: 38px; }
.site-footer__blurb {
  margin-top: var(--s-4);
  font-size: var(--fs-small);
  color: var(--text-on-navy-muted);
  max-width: 36ch;
}

.footer-head {
  margin: 0 0 var(--s-2);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin: 0; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-on-navy-muted);
  font-size: var(--fs-small);
  text-decoration: none;
}
.footer-links a:hover { color: #ffffff; text-decoration: underline; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-5);
  font-size: var(--fs-small);
}
.site-footer__bottom p { margin: 0; }
.site-footer__domain { color: var(--gold); font-weight: 600; letter-spacing: 0.02em; }

/* --------------------------------------------------------------------------
   12. Review only banner
   Marks these files as local mockups. It is removed before any real launch.
   -------------------------------------------------------------------------- */
.review-flag {
  background: var(--navy-cover);
  color: var(--parchment);
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.5;
  padding: 9px var(--page-pad);
}

/* ==========================================================================
   13. PHASE 2 ADDITIONS
   Book led hierarchy, the three cover levels, and the new content pages.
   Everything above this line is carried forward from the approved Phase 1
   stylesheet. No color, font, or spacing token was changed.

   Cover hierarchy at a glance:
     Level 1, Book page      about 500px, overlaps the next section
     Level 2, Homepage       about 252px, small overhang from its own panel
     Level 3, App and others about 200px, flat with a restrained shadow
   ========================================================================== */

/* --------------------------------------------------------------------------
   13.1 Level 1. Book page cover. The cover sits completely inside the cream
   hero. It carries the page through its size, its contrast against the cream,
   and a layered shadow, rather than by crossing a background boundary.
   -------------------------------------------------------------------------- */
.cover-stage { margin: 0; position: relative; display: flex; justify-content: center; }
.cover-stage img { display: block; width: 100%; height: auto; }

.cover-lead { position: relative; width: 100%; max-width: 480px; }
/* A three step shadow. The tight pair reads as contact, the wide one as the
   distance between the cover and the page behind it. This is what carries the
   dimension now that the cover no longer crosses a boundary. */
.cover-lead img {
  border-radius: 3px;
  box-shadow:
    0 1px 2px rgba(3, 30, 53, 0.22),
    0 8px 18px rgba(3, 30, 53, 0.16),
    0 30px 56px rgba(3, 30, 53, 0.22);
}

@media (min-width: 900px) {
  /* The column split is left as it was, because narrowing the text column
     made the title wrap onto two lines around 1040px. The breathing room on
     the cover side comes from padding on the stage instead, so the cover is
     never flush against the page gutter and stays centred between the two.
     There is no transform and no stacking order to manage now, so the cream
     to white edge below the hero is a plain, uninterrupted line. */
  .book-lead .hero__grid { grid-template-columns: 0.94fr 1.06fr; }
  .book-lead .cover-stage { padding-inline: 16px; }
}

/* --------------------------------------------------------------------------
   13.2 Level 2. Homepage. The book leads: a wider panel, a larger cover, and
   the primary button. The app keeps a complete, finished looking panel.
   -------------------------------------------------------------------------- */
/* min-width 0 lets a panel shrink inside its grid track, and a button is
   capped to its container, so a very large text setting wraps the label
   instead of widening the whole card past the screen. */
.start-grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
.start-grid > .card { min-width: 0; }
.start-grid .btn { max-width: 100%; }
@media (min-width: 920px) {
  /* Side by side, the two panels are one row and share its height, so their top
     and bottom edges line up. The book panel no longer carries the cover, so it
     has height to spare: two auto top margins split that space evenly, one above
     the heading and one above the buttons. The text block therefore sits in the
     middle of the card and the buttons sit on the same bottom line as the app
     panel's, which reads as a composition rather than as a gap. Nothing was
     added to fill it and the app panel is untouched. */
  .start-grid { grid-template-columns: 1.18fr 0.82fr; gap: var(--s-6); align-items: stretch; }
  .panel-book h3 { margin-top: auto; }
  .panel-book .card__foot { margin-top: auto; }
}

/* Both stages are the same height and carry the same space beneath them, so
   the heading in each panel starts on exactly the same line. The book stage
   is sized around its cover: 64px of cream above it and a 72px break through
   the bottom edge, which is a deliberate amount rather than a leftover. */
/* The stage is sized so the cover sits completely inside it with the same
   48px of cream on all four sides. 368 wide is 272 plus 48 twice, and 504
   tall is 408 plus 48 twice. Both panels share the height, so the heading in
   each starts on the same line. */
.panel__media {
  display: flex;
  align-items: center;
  justify-content: center;
  /* The 504px fixed height that used to sit here was sized around the book
     cover, back when the cover was in the panel opposite. The cover is in the
     hero now and the app heading and paragraph are gone, so the stage is sized
     by its own content with balanced padding rather than padded out to a height
     nothing needs. An auto cross axis margin stops a flex item stretching, so
     the width is still set explicitly. */
  width: 100%;
  max-width: 368px;
  margin: 0 auto var(--s-6);
  padding: 32px 24px;
  background: var(--bg-cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Book panel. The cover is centred on both axes and stays inside the stage. */
.cover-home { margin: 0; }
/* The same three step shadow as the Book page, scaled down. */
.cover-home img {
  border-radius: 3px;
  box-shadow:
    0 1px 2px rgba(3, 30, 53, 0.20),
    0 6px 14px rgba(3, 30, 53, 0.15),
    0 22px 42px rgba(3, 30, 53, 0.20);
}

/* App panel. Quieter than the book panel, but complete and clearly labelled. */
.panel-app .panel__media { align-items: center; }
.app-stage { width: 100%; }
/* The panel header sits above the mark, in the same position the printed
   title occupies on the cover opposite. It is a span rather than a heading,
   so the heading outline of the page is unchanged. */
.app-stage__id {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  text-align: left;
  margin-bottom: var(--s-5);
}
.app-stage__name {
  display: block;
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--navy);
}
.panel-app .app-mark-sm {
  width: 72px;
  height: 72px;
  flex: none;
  margin: 0;
}

@media (max-width: 919px) {
  /* Stacked, the stage grows with its content and the cream tightens, so a
     narrow screen is not mostly empty stage. The cover stays centred and
     completely inside. */
  .panel__media {
    max-width: 340px;
    padding: 28px 20px;
  }
}

/* --------------------------------------------------------------------------
   13.3 Level 3. App page and the other content pages. A compact cover that is
   recognisable without competing with the page it sits on.
   -------------------------------------------------------------------------- */
.cover-compact { width: 100%; max-width: 200px; margin: 0 auto; }
/* The cross reference art slot sizes its image to a 96px square, which suits
   the app icon but would squash a portrait cover. These two rules restore the
   real proportions wherever a cover sits in that slot. */
.cover-compact img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(3, 30, 53, 0.15), 0 14px 30px rgba(3, 30, 53, 0.18);
}
.cover-mid { width: 100%; max-width: 260px; margin: 0 auto; }
.cover-mid img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(3, 30, 53, 0.16), 0 18px 36px rgba(3, 30, 53, 0.20);
}
@media (max-width: 700px) {
  .cover-compact { max-width: 168px; }
  .cover-mid { max-width: 210px; }
}

/* The cross reference panel needs a wider art column for a cover than it does
   for a square app icon. */
@media (min-width: 760px) {
  .crossref--book { grid-template-columns: 200px 1fr; }
}

/* --------------------------------------------------------------------------
   13.4 About page
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 300px; }
}

/* Author block. The photo slot is optional. While it holds no image it
   removes itself, and the text simply uses the full width. Nothing else needs
   editing when a portrait is added later. */
.author-block {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 48px);
  align-items: flex-start;
}
.author-photo { flex: 0 0 230px; max-width: 230px; }
.author-photo:empty { display: none; }
.author-photo img { border-radius: var(--radius); box-shadow: var(--shadow-card); }
.author-text { flex: 1 1 320px; min-width: 0; }

/* --------------------------------------------------------------------------
   13.5 Contact page
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.contact-card__kind {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}
/* Every line that is waiting on a real address uses this one class and the
   same wording, so the whole set can be replaced in a single pass. */
.contact-pending {
  display: inline-block;
  margin-top: var(--s-4);
  padding: 10px 16px;
  border: 1px dashed var(--border-control);
  border-radius: 10px;
  background: var(--bg-cream-soft);
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   13.6 Support and questions page
   -------------------------------------------------------------------------- */
.faq-jump { margin: 0 0 var(--s-8); padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.faq-jump li { margin: 0; }
.faq-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-white);
  color: var(--navy);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
}
.faq-jump a:hover { border-color: var(--border-control); background: var(--bg-cream); color: var(--navy); }

.faq-group { margin-bottom: var(--s-8); }
.faq-group:last-child { margin-bottom: 0; }
.faq-group > h2 { font-size: var(--fs-h3); margin-bottom: var(--s-5); }

.faq-item { padding: var(--s-5) 0; border-top: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-item h3 { font-size: 1.0625rem; margin-bottom: var(--s-3); }
.faq-item p { color: var(--text-muted); margin: 0; }

/* Restrained marker for an answer that is waiting on a launch decision. It
   states its meaning in words, so it never depends on color. */
.tag-launch {
  display: inline-block;
  margin-bottom: var(--s-3);
  padding: 3px 10px;
  border: 1px solid var(--border-control);
  border-radius: 999px;
  background: var(--bg-cream-soft);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   13.7 Review only note. Used on the legal placeholder so a reader can see at
   a glance that the text is a note to Mike and not draft public copy.
   -------------------------------------------------------------------------- */
.review-note {
  padding: var(--s-5);
  border: 1px dashed var(--border-control);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
  background: var(--bg-cream-soft);
}
.review-note__label {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}
.review-note p { font-size: var(--fs-small); color: var(--text-muted); }

.legal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.legal-list li {
  margin: 0;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-white);
  font-weight: 600;
  color: var(--navy);
}
.legal-list span { display: block; font-weight: 400; font-size: var(--fs-small); color: var(--text-muted); margin-top: 2px; }

/* ==========================================================================
   14. PHASE 3 ADDITIONS
   Policy page prose, the placeholder marker, and print behavior. No approved
   Phase 2 token, color, font, or layout is changed here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   14.1 Policy prose. A comfortable measure and clear hierarchy, so a long
   document stays readable without turning into a wall of text.
   -------------------------------------------------------------------------- */
.policy { max-width: 72ch; }
.policy h2 {
  font-size: var(--fs-h3);
  margin-top: var(--s-8);
  margin-bottom: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}
.policy h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.policy h3 {
  font-size: 1.0625rem;
  margin-top: var(--s-5);
  margin-bottom: var(--s-2);
}
.policy p, .policy li { color: var(--text-muted); }
.policy ul { padding-left: 1.15em; }
.policy li { margin-bottom: var(--s-2); }
.policy strong { color: var(--navy); font-weight: 600; }

/* The date line under a policy title. */
.policy-date {
  margin: calc(var(--s-2) * -1) 0 var(--s-6);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* A short list of the sections, so a long page can be scanned. */
.policy-toc { margin: 0 0 var(--s-8); padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--s-2); }
.policy-toc li { margin: 0; }
.policy-toc a {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-white); color: var(--navy);
  font-size: var(--fs-small); font-weight: 600; text-decoration: none;
}
.policy-toc a:hover { border-color: var(--border-control); background: var(--bg-cream); color: var(--navy); }

/* --------------------------------------------------------------------------
   14.2 Undecided values. Every one of these is a business or legal decision
   that has not been made yet. They all use this one class, so the full set
   can be found and replaced in a single pass.
   -------------------------------------------------------------------------- */
.tbd {
  display: inline;
  padding: 1px 7px;
  border: 1px dashed var(--border-control);
  border-radius: 5px;
  background: var(--bg-cream-soft);
  color: var(--text-muted);
  font-size: 0.9375em;
  font-weight: 600;
  white-space: normal;
}

/* A whole section that cannot be finished until something else is designed. */
.incomplete {
  padding: var(--s-5);
  border: 1px dashed var(--border-control);
  border-left: 4px solid var(--gold-deep);
  border-radius: var(--radius);
  background: var(--bg-cream-soft);
}
.incomplete__label {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a5a1a;
}
.incomplete p { font-size: var(--fs-small); color: var(--text-muted); margin: 0; }

/* An external link marker, so a destination that leaves the site is obvious
   without forcing every link into a new tab. */
.ext::after {
  content: "";
  display: inline-block;
  width: 0.62em; height: 0.62em;
  margin-left: 0.35em;
  vertical-align: baseline;
  background-color: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.4l-8.3 8.3-1.4-1.4L17.6 5H14V3Z'/%3E%3Cpath d='M5 5h5v2H7v10h10v-3h2v5H5V5Z'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.4l-8.3 8.3-1.4-1.4L17.6 5H14V3Z'/%3E%3Cpath d='M5 5h5v2H7v10h10v-3h2v5H5V5Z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   14.3 Print. Policy pages are the ones people actually save or print, so
   they drop the site chrome and the decorative bands and print as a plain
   readable document on white.
   -------------------------------------------------------------------------- */
@media print {
  .review-flag,
  .site-header,
  .site-footer__top,
  .skip-link,
  .policy-toc,
  .actions { display: none !important; }

  html, body { background: #ffffff !important; }
  body { font-size: 11pt; line-height: 1.5; color: #000000; }

  .band, .hero { padding-block: 0 !important; background: #ffffff !important; }
  .band--cream, .band--navy { background: #ffffff !important; color: #000000 !important; }
  .band--navy h2, .band--navy h3 { color: #000000 !important; }

  .wrap, .wrap--narrow { max-width: none; padding-inline: 0; }
  .policy { max-width: none; }
  .policy p, .policy li, .lead, .muted { color: #000000 !important; }

  h1 { font-size: 20pt; }
  .policy h2 { font-size: 13pt; margin-top: 18pt; padding-top: 8pt; }
  .policy h3 { font-size: 11.5pt; }

  /* Keep a heading with the text that follows it. */
  h1, h2, h3 { break-after: avoid-page; page-break-after: avoid; }
  .policy p, .policy li { orphans: 3; widows: 3; }

  /* The dashed markers read as boxes on paper, so they print as plain text
     with brackets instead, and still say what they mean. */
  .tbd, .incomplete {
    border: 0 !important;
    background: none !important;
    padding: 0 !important;
    color: #000000 !important;
  }
  .tbd::before { content: "["; }
  .tbd::after { content: "]"; }
  .incomplete__label { color: #000000 !important; }

  /* Print the destination of a link that leaves the site, since a reader on
     paper cannot follow it. */
  .policy a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .ext::after { display: none; }

  .site-footer { background: #ffffff !important; color: #000000 !important; padding-block: 12pt 0; border-top: 1pt solid #999999; }
  .site-footer__bottom { color: #000000 !important; }
  .site-footer__domain { color: #000000 !important; }
}

/* --------------------------------------------------------------------------
   15. Release state, October 2026. The dashed availability marker means a date
   is not yet known. Once it is known the frame is solid and the text is full
   strength, so a confirmed date is never mistaken for a placeholder.
   -------------------------------------------------------------------------- */
.availability--confirmed {
  border-style: solid;
  border-color: var(--border-control);
  background: var(--bg-cream);
  color: var(--text);
}

/* The purchase panel on the book page. Same shape as the placeholder panel it
   replaced, with a solid frame, because it is now a real destination rather
   than a gap waiting to be filled. */
.buy-panel,
.action-panel {
  padding: clamp(28px, 4.5vw, 48px);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-lg);
  background: var(--bg-cream-soft);
  text-align: center;
}
.buy-panel h2,
.action-panel h2 { margin-bottom: var(--s-3); }
.buy-panel .actions,
.action-panel .actions { justify-content: center; }

/* A card foot carrying two actions rather than one. */
.card__foot--actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

/* The release line under the homepage hero buttons. */
.hero-availability {
  margin-top: var(--s-4);
  text-align: center;
}

@media print {
  .availability--confirmed { border: 0 !important; background: none !important; padding: 0 !important; }
  .buy-panel, .action-panel { border: 0 !important; background: none !important; padding: 0 !important; }
}

/* --------------------------------------------------------------------------
   16. Prelaunch notice. A quiet band at the top of every page while the site
   is live but not yet announced. Removed at formal launch.
   -------------------------------------------------------------------------- */
.site-notice {
  margin: 0;
  padding: 10px var(--page-pad);
  background: var(--bg-cream);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.5;
  text-align: center;
}
@media print { .site-notice { display: none !important; } }

/* --------------------------------------------------------------------------
   17. The app mark after the corner fix. The file now carries its own rounded
   corners with the area outside them transparent, so the CSS radius has to
   match the artwork rather than guess at it: 204 of 1254 pixels, which is
   16.27% at any size. Guessing low would paint the cover shadow into a corner
   the artwork has given up, and guessing high would clip the gold border.
   -------------------------------------------------------------------------- */
.brand img,
.panel-app .app-mark-sm,
.app-mark img,
.crossref:not(.crossref--book) .crossref__art img { border-radius: 16.27%; }

/* The single contact address, shown once.
   The address is one unbroken 26-character token, which is the longest thing
   on the page and the only thing that can push a narrow panel wider than its
   container. It is allowed to break anywhere rather than be clipped, hidden or
   shortened, and the panel states its own box model and ceiling rather than
   inheriting them, so neither depends on a rule declared somewhere else. */
.contact-email {
  margin-top: var(--s-5);
  font-size: 1.125rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.contact-email a { overflow-wrap: anywhere; }

.action-panel {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
/* The heading wraps like ordinary prose inside the panel: balanced across its
   lines, and able to break a long word rather than overhang the frame. */
.action-panel h2 {
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* One left edge for the whole app panel. The cream stage keeps its own padding,
   so the block still breathes, but it is pulled out by exactly that padding so
   the mark, the name, the six tool names, the description and the buttons all
   start on the same line. Scoped to the app panel: the book panel's cover stage
   is unchanged. */
.panel-app .panel__media { margin-inline: -24px; }
@media (max-width: 919px) {
  .panel-app .panel__media { margin-inline: -20px; }
}

/* --------------------------------------------------------------------------
   18. Homepage hero.
   The cover belongs in the opening view: a visitor should know there is a book
   before scrolling, and there is now only one cover on the page because the
   Start here panel gave up its copy rather than a second one being added.

   Three named areas rather than two columns. One DOM order, head then cover
   then body, reads correctly to a screen reader and stacks correctly on a
   phone, while the desktop grid puts the cover beside both text blocks.

   The cover is bounded by the VIEWPORT height, not only by its column. That is
   what keeps the whole of it inside the first screen at 1280x720 and 1366x768
   without shrinking any text to make room.
   -------------------------------------------------------------------------- */
.hero--home { padding-block: clamp(30px, 4vw, 58px); }

.hero__grid--home {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "head" "cover" "body";
  gap: clamp(18px, 2.6vw, 28px) clamp(32px, 5vw, 64px);
  align-items: start;
}
.hero__head { grid-area: head; }
.hero-cover { grid-area: cover; }
.hero__body { grid-area: body; }

.hero--home h1 { margin-bottom: 0; }
.hero--home .lead { max-width: 54ch; }
.hero__body .actions { margin-top: var(--s-5); }

.hero-cover { display: flex; justify-content: center; }
.hero-cover img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(44vh, 400px);
}

@media (min-width: 900px) {
  .hero__grid--home {
    grid-template-columns: 1.04fr 0.96fr;
    grid-template-areas:
      "head  cover"
      "body  cover";
    align-items: center;
  }
  .hero__head { align-self: end; }
  .hero__body { align-self: start; }
  .hero-cover { justify-content: flex-end; align-self: center; }
  .hero-cover img { max-height: min(62vh, 500px); }
}

/* The book panel after the cover moved to the hero.
   It can no longer lead the row by carrying the largest image, so it leads by
   type and by width instead: a heading a step above the app panel's, body copy
   at lead size, and more generous padding. The app panel is deliberately not
   touched, so nothing was weakened or enlarged to make this work. */
.panel-book { padding: clamp(28px, 4vw, 44px); }
.panel-book h3 { font-size: clamp(1.375rem, 1.18rem + 0.82vw, 1.75rem); margin-bottom: var(--s-4); }
.panel-book > .muted { font-size: var(--fs-lead); line-height: 1.6; }

/* The book panel keeps its deeper top and side padding, which is part of how it
   leads the row, but side by side its BOTTOM padding matches the app panel's so
   the two button rows sit on exactly the same line. This has to come after the
   .panel-book padding shorthand above, which would otherwise win on source
   order at equal specificity. */
@media (min-width: 920px) {
  .panel-book { padding-bottom: clamp(24px, 3.4vw, 36px); }
}

/* --------------------------------------------------------------------------
   19. Book panel symbol row.
   The four civic symbols from the approved cover, cut out of the cover itself
   with their own gold rings and teal fields intact, on a transparent field.
   They sit above the heading and take up some of the space the cover left when
   it moved to the hero. Decorative only: alt is empty, so a screen reader does
   not announce it, and nothing about the panel's meaning depends on it.
   -------------------------------------------------------------------------- */
.book-symbols {
  display: block;
  width: 100%;
  max-width: 470px;
  height: auto;
  margin: 0 auto var(--s-6);
}
@media (max-width: 919px) {
  .book-symbols { max-width: 330px; margin-bottom: var(--s-5); }
}