/* ==========================================================================
   The Compassion Hub — design system + application styles
   Compassion Hub by Cup of Compassion — design system + application styles
   Responsive web app: single column on phones, sidebar shell on desktop.

   Palette and type follow the series Design & Information Bible §6. The
   Bible specifies Times + Helvetica, which govern the print interiors; the
   app uses their screen-optimised counterparts (Spectral + DM Sans) so the
   same voice survives at UI sizes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* brand — Design Bible §6: purple / gold / teal on cream */
  --plum-950: #241531;
  --plum-900: #3A2150;
  --plum-800: #4A2A63; /* primary — titles */
  --plum-700: #5A3676;
  --plum-600: #6B4589;
  --cream: #F6F1E7;
  --cream-deep: #EFE7D8;
  --card: #FFFDF8;
  --chip: #EDE6D6;
  --gold: #B08D2E;      /* rules, kickers, scripture refs */
  --gold-deep: #96771F; /* large text on cream */
  --gold-ink: #7A6114;  /* small text / links on cream (5.4:1) */
  --gold-soft: #D0AC4C; /* gold on dark plum (6.4:1) */
  --teal: #2E7D82;      /* subheads */
  --teal-deep: #23636A; /* small teal text on cream (6.3:1) */
  --teal-light: #7FC3C7; /* teal on dark plum (5.9:1) */
  --teal-chip: #D9EAEA;
  --ink: #22201F;
  --ink-soft: #4A4644;
  --muted: #5C5754;
  --muted-2: #6B6560;   /* secondary meta text (5.2:1 on cream, 4.7:1 on chip) */
  --rule: #DCD3C4;
  --line: rgba(34, 32, 31, .12);
  --danger: #A8452B;
  --on-dark: #F3ECDC;
  --on-dark-soft: #CFC1DB;

  /* type — the metric-matched fallbacks are declared below the token block */
  --serif: 'Spectral', 'Spectral fallback', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', 'DM Sans fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* shape */
  --radius-sm: 14px;
  --radius: 18px;
  --radius-lg: 22px;

  /* layout */
  --gutter: 20px;
  --shell: 1140px;
  --sidebar-w: 264px;
  --tabbar-h: calc(66px + env(safe-area-inset-bottom));

  /* elevation — a hairline plus a spread, so cards read as paper on paper */
  --lift-sm: 0 1px 1px rgba(42, 26, 56, .04), 0 10px 22px -16px rgba(42, 26, 56, .40);
  --lift: 0 1px 2px rgba(42, 26, 56, .05), 0 14px 30px -20px rgba(42, 26, 56, .45);
  --lift-lg: 0 2px 4px rgba(35, 20, 48, .07), 0 20px 40px -22px rgba(35, 20, 48, .60);

  /* motion — one easing curve and three durations across the whole app */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --fast: .14s;
  --mid: .22s;
  --slow: .34s;
}

/* Metric-matched fallbacks.
   The webfonts come from a CDN, so for the first paint — and permanently, if
   that CDN is blocked — the app renders in Georgia and the system sans. Those
   have larger x-heights than Spectral and DM Sans, which reflows every heading
   the moment the real fonts land. Adjusting the fallbacks to sit on the same
   metrics keeps the swap invisible. */
@font-face {
  font-family: 'Spectral fallback';
  src: local('Georgia'), local('Times New Roman'), local('Times');
  size-adjust: 95%;
  ascent-override: 100%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'DM Sans fallback';
  src: local('Helvetica Neue'), local('Helvetica'), local('Arial');
  size-adjust: 100%;
  ascent-override: 100%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@media (min-width: 720px) {
  :root { --gutter: 32px; }
}

/* Above the desktop breakpoint the bottom tab bar is replaced by the sidebar,
   so nothing needs to reserve space for it. */
@media (min-width: 900px) {
  :root { --tabbar-h: 0px; }
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  /* A cream page with a trace of paper tooth. The grain is a 4px SVG tile at
     3% opacity — enough to stop large cream fields reading as flat digital
     white, invisible as texture. */
  background-color: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  /* Belt and braces with the JS scroll reset: never let a rubber-band scroll
     on iOS chain up to the document behind an open sheet. */
  overscroll-behavior-y: none;
}

body.no-scroll { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: inherit;
}

input, textarea, select { font: inherit; color: inherit; }

/* Anchors are used as app controls throughout (tabs, cards, buttons), so the
   underline is opted into rather than out of. */
a { color: inherit; text-decoration: none; }
p a, .about-copy a { text-decoration: underline; }

/* Focus: a deep plum ring, which holds up on cream, on gold, and on teal.
   Dark bands invert it to gold — see the block below. */
:focus-visible {
  outline: 3px solid var(--plum-800);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Anything sitting on a dark plum field: plum-on-plum is not a focus ring. */
.sidebar :focus-visible,
.dark-head :focus-visible,
#screen-welcome :focus-visible,
.progress-card:focus-visible,
.free-card:focus-visible,
.featured-card:focus-visible,
.bundle-hero:focus-visible,
.consult-card :focus-visible,
.done-body .btn-dark:focus-visible,
.btn-dark:focus-visible,
.cart-btn:focus-visible,
.sheet .btn-dark:focus-visible {
  outline-color: var(--gold-soft);
}

/* Motion is scenery, never the message: it all goes, and nothing that fades
   or slides in is left invisible when it does. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

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

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  background: var(--plum-900);
  color: var(--on-dark);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 0 0 12px 12px;
  text-decoration: none;
  transition: top .18s;
}
.skip-link:focus { top: 0; }

.noscript {
  max-width: 46ch;
  margin: 18vh auto;
  padding: 0 24px;
  text-align: center;
  font-family: var(--serif);
}
.noscript h1 { font-size: 30px; font-weight: 600; }
.noscript p { margin-top: 12px; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   3. App shell
   -------------------------------------------------------------------------- */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

@media (min-width: 900px) {
  .app { flex-direction: row; align-items: flex-start; }
}

.main {
  flex: 1;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--tabbar-h);
}

#view { flex: 1; display: flex; flex-direction: column; }
#view:focus { outline: none; }

.screen { display: none; }
.screen.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  animation: screen-in .22s ease-out;
}

@keyframes screen-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* A short rise on arrival, so a route change reads as a page turn rather than
   a repaint. Only on full navigation — `refresh()` re-renders in place after a
   tick or a cart change, and must not blink. */
@keyframes screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.screen.enter { animation: screen-in var(--slow) var(--ease-out) both; }

/* Centred content column. Every screen section sits inside one of these so
   text never runs edge-to-edge on a wide monitor. */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Grid children default to min-width:auto, which lets wide content push a
   column past its track. Every app grid opts out. */
.home-grid > *,
.read-layout > *,
.about-layout > *,
.checkout-layout > *,
.product-layout > *,
.cart-layout > *,
.prod-grid > *,
.lesson-list > *,
.book-grid > *,
.steps-wrap > *,
.messages-layout > * { min-width: 0; }

/* --------------------------------------------------------------------------
   4. Sidebar (desktop navigation)
   -------------------------------------------------------------------------- */
.sidebar { display: none; }

@media (min-width: 900px) {
  .sidebar {
    display: block;
    flex: none;
    position: sticky;
    top: 0;
    width: var(--sidebar-w);
    height: 100dvh;
    overflow-y: auto;
    background: linear-gradient(178deg, var(--plum-800) 0%, var(--plum-900) 72%);
    color: var(--on-dark);
    padding: 26px 16px 22px;
  }
}

.side-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 22px;
  text-decoration: none;
}
.side-brand .mark {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 13px;
  background: rgba(176, 141, 46, .14);
  border: 1px solid rgba(176, 141, 46, .45);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The name is three words and the sidebar is 264px, so it wraps. Balanced
   wrapping keeps it two even lines instead of an orphaned "Compassion". */
.side-brand .name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  color: #F5EFE3;
  display: block;
  line-height: 1.2;
  text-wrap: balance;
}
.side-brand .tag {
  display: block;
  font-family: var(--serif);
  font-size: 9px;
  letter-spacing: 1.1px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--teal-light);
  margin-top: 5px;
  text-wrap: balance;
}

.side-nav { display: grid; gap: 3px; }

.side-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 13px;
  font-weight: 600;
  font-size: 14.5px;
  color: #C4B4D2;
  transition: background .15s, color .15s;
}
@media (hover: hover) {
  .side-link:hover { background: rgba(255, 255, 255, .07); color: #E9E1D3; }
}
.side-link .stroke { stroke: currentColor; transition: stroke .15s; }
.side-link[aria-current="page"] {
  background: rgba(176, 141, 46, .16);
  color: #F5EFE3;
  box-shadow: inset 0 0 0 1px rgba(176, 141, 46, .32);
}
/* A gold marker on the current page, so the state survives at a glance and
   does not rest on a tint difference alone. */
.side-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -16px; top: 50%;
  width: 3px; height: 22px;
  margin-top: -11px;
  border-radius: 0 3px 3px 0;
  background: var(--gold-soft);
}
.side-link .badge {
  margin-left: auto;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: var(--gold);
  color: #2A2113;
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.side-foot {
  margin-top: 24px;
  padding: 16px 14px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-family: var(--serif);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--teal-light);
}
.side-foot .scr { color: #DAD2E0; }
.side-foot .org {
  font-size: 10.5px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  margin-top: 10px;
}

/* --------------------------------------------------------------------------
   5. Mobile app bar
   -------------------------------------------------------------------------- */
.appbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) var(--gutter) 10px;
  background: rgba(246, 241, 228, .93);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--mid), box-shadow var(--mid);
}
/* Flat against the top of the page, lifted once content runs under it. */
.appbar.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 20px -18px rgba(42, 26, 56, .8);
}
@media (min-width: 900px) { .appbar { display: none; } }

.appbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.appbar .brand .mark {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--plum-900);
  display: flex;
  align-items: center;
  justify-content: center;
}
.appbar .brand .name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
}
.appbar .spacer { flex: 1; }

/* --------------------------------------------------------------------------
   6. Bottom tab bar (mobile navigation)
   -------------------------------------------------------------------------- */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: flex;
  background: rgba(246, 241, 228, .95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 9px 6px calc(11px + env(safe-area-inset-bottom));
}
@media (min-width: 900px) { .tabbar { display: none; } }

.tab {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  font-size: 11.5px;
  font-weight: 700;
  color: #6E6478;
  transition: color .15s;
}
.tab .stroke { stroke: #6E6478; transition: stroke .15s; }
.tab[aria-current="page"] { color: var(--plum-800); }
.tab[aria-current="page"] .stroke { stroke: var(--plum-800); }
/* Colour alone is a weak current-page signal at 11px on a small screen. */
.tab[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: -9px; left: 50%;
  width: 22px; height: 3px;
  margin-left: -11px;
  border-radius: 0 0 3px 3px;
  background: var(--gold);
}
.tab:active { transform: scale(.94); }
.tab { transition: color .15s, transform var(--fast) var(--ease); }

@media (max-width: 520px) {
  .tab { font-size: 10px; }
  .tab svg { width: 21px; height: 21px; }
}

.tab .cart-dot {
  position: absolute;
  top: -2px;
  left: 50%;
  margin-left: 4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--gold);
  color: #2A2113;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   7. Primitives
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border-radius: var(--radius);
  padding: 15px 20px;
  font-weight: 700;
  font-size: 15.5px;
  /* Buttons carry real words, so they never shrink below a comfortable
     thumb target however short the label is. */
  min-height: 52px;
  transition: transform var(--fast) var(--ease), filter var(--fast), box-shadow var(--mid) var(--ease);
}
.btn:active { transform: scale(.985); filter: brightness(.96); transition-duration: .06s; }

.btn-gold {
  background: linear-gradient(180deg, var(--gold-soft) 0%, var(--gold) 100%);
  color: #2A2113;
  box-shadow: 0 10px 24px -12px rgba(176, 141, 46, .75);
}
.btn-dark {
  background: var(--plum-900);
  color: var(--on-dark);
  box-shadow: 0 10px 24px -14px rgba(35, 20, 48, .60);
}
.btn-ghost {
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn-ghost-dark {
  background: rgba(255, 255, 255, .08);
  border: 1.5px solid rgba(255, 255, 255, .22);
  color: var(--on-dark);
}
.btn-auto { width: auto; }
.btn:disabled {
  cursor: not-allowed;
  filter: grayscale(.25);
  opacity: .56;
  box-shadow: none;
  transform: none;
}

@media (hover: hover) {
  .btn-gold:hover { box-shadow: 0 14px 30px -12px rgba(176, 141, 46, .85); }
  .btn-dark:hover { box-shadow: 0 14px 30px -14px rgba(35, 20, 48, .70); }
  .btn-ghost:hover { border-color: rgba(34, 32, 31, .26); }
  .btn-ghost-dark:hover { background: rgba(255, 255, 255, .14); }
}

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--lift-sm);
}

/* --- lift and press ---------------------------------------------------
   Every tappable surface in the app shares one hover lift and one press.
   The lift is gated behind a real pointer: on a touch screen `:hover`
   latches after a tap and leaves a card floating until you tap elsewhere.
   The press is not gated — it is the only feedback a finger gets. */
.quick-tile, .feature-card, .free-card, .featured-card, .lesson, .prod-card,
.book-row, .bundle-hero, .progress-card, .market-cta, .cart-item {
  transition: transform var(--fast) var(--ease), box-shadow var(--mid) var(--ease);
}
@media (hover: hover) {
  .quick-tile:hover, .lesson:hover, .book-row:hover, .cart-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--lift);
  }
  .feature-card:hover, .free-card:hover, .prod-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--lift-lg);
  }
  .featured-card:hover, .bundle-hero:hover, .progress-card:hover, .market-cta:hover {
    transform: translateY(-2px);
  }
  .prod-card:hover .cover, .book-row:hover .cover { filter: brightness(1.06); }
}

.quick-tile:active, .lesson:active, .book-row:active, .prod-card:active,
.feature-card:active, .free-card:active, .featured-card:active,
.bundle-hero:active, .progress-card:active, .market-cta:active,
.cat-chip:active, .pay-opt:active {
  transform: scale(.988);
  transition-duration: .06s;
}

.cover { transition: filter var(--mid) var(--ease); }

.pill {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  border-radius: 20px;
  padding: 6px 12px;
}
/* Pills sit inside column-flex cards, where the default stretch would blow
   them out to the full card width. */
.pill { align-self: flex-start; }
.pill-gold { background: var(--gold); color: #2A2113; }
.pill-gold-soft {
  background: rgba(176, 141, 46, .16);
  color: var(--gold-soft);
  border: 1px solid rgba(176, 141, 46, .45);
}

.check-list { display: grid; gap: 11px; }
.check-list li {
  display: flex;
  gap: 11px;
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 1.45;
  color: #3E3A44;
}
.check-list svg { flex: none; margin-top: 3px; }

.eyebrow {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--teal-light);
}

.section-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 30px 0 14px;
}
.section-row h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(20px, 1.1vw + 17px, 24px);
  color: var(--ink);
}
.section-row .count {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--muted);
  flex: none;
}

.section-hint {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: 18px;
}

.screen-foot { height: 34px; }

/* --------------------------------------------------------------------------
   8. Dark page header
   -------------------------------------------------------------------------- */
.dark-head {
  position: relative;
  overflow: hidden;
  background: linear-gradient(158deg, var(--plum-800) 0%, var(--plum-900) 100%);
  color: var(--on-dark);
  padding-block: 16px 30px;
}
.dark-head .glow {
  position: absolute;
  top: -110px; right: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(176, 141, 46, .22) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}
.dark-head .shell { position: relative; }
.dark-head h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(27px, 2.2vw + 20px, 40px);
  line-height: 1.14;
  margin-top: 8px;
  color: #F5EFE3;
  max-width: 20ch;
}
.dark-head .lede {
  font-family: var(--serif);
  font-size: clamp(14.5px, .4vw + 13.6px, 17px);
  line-height: 1.6;
  color: var(--on-dark-soft);
  margin-top: 12px;
  max-width: 56ch;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, .10);
  color: var(--on-dark);
  font-weight: 700;
  font-size: 14px;
  padding: 9px 16px 9px 12px;
  border-radius: 22px;
  margin-bottom: 20px;
  transition: background .15s;
}
.back-btn:active { background: rgba(255, 255, 255, .22); }
@media (hover: hover) {
  .back-btn:hover { background: rgba(255, 255, 255, .18); }
}

/* --------------------------------------------------------------------------
   9. Welcome
   -------------------------------------------------------------------------- */
#screen-welcome {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, #4A2A63 0%, var(--plum-900) 62%, #1F1129 100%);
  color: var(--on-dark);
  justify-content: center;
}
#screen-welcome::before {
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(176, 141, 46, .20) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}

.welcome-body {
  position: relative;
  padding-block: 44px 52px;
  display: grid;
  gap: 32px;
  align-content: center;
}
@media (min-width: 900px) {
  .welcome-body {
    grid-template-columns: 1.15fr .85fr;
    gap: 56px;
    align-items: center;
    padding-block: 72px;
    min-height: 100dvh;
  }
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 30px;
}
.brand-mark {
  width: 56px; height: 56px;
  flex: none;
  border-radius: 16px;
  background: rgba(176, 141, 46, .14);
  border: 1px solid rgba(176, 141, 46, .45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-row .name {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  color: #F5EFE3;
}
.brand-row .tag {
  display: block;
  font-family: var(--serif);
  font-size: 10.5px;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: var(--teal-light);
  margin-top: 3px;
}

.welcome-eyebrow {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--teal-light);
}
.welcome-h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(38px, 4vw + 22px, 62px);
  line-height: 1.05;
  color: #F5EFE3;
  margin: 12px 0 18px;
  max-width: 14ch;
}
.welcome-copy {
  font-family: var(--serif);
  font-size: clamp(15.5px, .5vw + 14.4px, 19px);
  line-height: 1.62;
  color: #C9BAD6;
  max-width: 46ch;
}

.welcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.welcome-actions .btn { width: 100%; }
@media (min-width: 560px) {
  .welcome-actions .btn { width: auto; min-width: 210px; }
}

.welcome-foot {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--teal-light);
  margin-top: 16px;
}

.scripture {
  position: relative;
  border: 1px solid rgba(208, 172, 76, .30);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: rgba(255, 255, 255, .05);
  padding: 30px 30px 28px;
}
/* An opening quote mark set in the series serif, sized as ornament. */
.scripture::before {
  content: "“";
  position: absolute;
  top: -6px; right: 20px;
  font-family: var(--serif);
  font-size: 84px;
  line-height: 1;
  color: var(--gold);
  opacity: .22;
  pointer-events: none;
}
.scripture p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, .6vw + 14.6px, 21px);
  line-height: 1.5;
  color: #E3DCCB;
}
.scripture cite {
  display: block;
  font-style: normal;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--teal-light);
  margin-top: 14px;
}

/* --------------------------------------------------------------------------
   10. Home
   -------------------------------------------------------------------------- */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-top: 26px;
}
.page-head .bless {
  font-family: var(--serif);
  font-size: 14.5px;
  color: var(--muted);
}
.page-head h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(27px, 2vw + 20px, 40px);
  line-height: 1.14;
  color: var(--ink);
  margin-top: 2px;
}
.page-head .count {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--muted);
  flex: none;
}

.avatar-tile {
  width: 46px; height: 46px;
  flex: none;
  border-radius: 14px;
  overflow: hidden;
  background: var(--plum-900);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px -10px rgba(35, 20, 48, .55);
  transition: box-shadow .15s;
}
.avatar-tile:hover { box-shadow: 0 8px 18px -6px rgba(35, 20, 48, .7); }
.avatar-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The mobile app bar already carries the brand mark — no need to repeat it. */
@media (max-width: 899px) { .avatar-tile { display: none; } }

.home-grid {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}
@media (min-width: 900px) {
  .home-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .home-grid .span-all { grid-column: 1 / -1; }
}

.home-cover-intro {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: clamp(112px, 25vw, 226px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 3.5vw, 38px);
  padding: clamp(16px, 3.4vw, 34px);
  border: 1px solid rgba(208, 172, 76, .38);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(128deg, rgba(255, 255, 255, .055), transparent 52%),
    linear-gradient(155deg, #4A2A63 0%, #2A1739 78%, #1D1028 100%);
  color: var(--on-dark);
  box-shadow: var(--lift-lg), 0 30px 58px -40px rgba(42, 23, 57, .88);
}
.home-cover-figure {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 8;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 24px 44px -22px rgba(8, 3, 12, .95);
  transform: rotate(-1.2deg);
  transition: transform .18s ease, box-shadow .18s ease;
}
.home-cover-figure .cover-art { border-radius: 10px; }
.home-cover-copy { min-width: 0; }
.home-cover-copy .pill { margin-bottom: 14px; }
.home-cover-kicker {
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--teal-light);
  margin-bottom: 8px;
}
.home-cover-copy h2 {
  max-width: 18ch;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(21px, 2.7vw + 12px, 39px);
  line-height: 1.1;
  color: #F7F0E4;
}
.home-cover-copy > p:not(.home-cover-kicker) {
  max-width: 58ch;
  margin-top: 13px;
  font-family: var(--serif);
  font-size: clamp(13.5px, .4vw + 12.5px, 16px);
  line-height: 1.58;
  color: #D4C6DE;
}
.home-cover-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 14px;
  color: #F2D77F;
}
.home-cover-link svg { transition: transform .16s; }
@media (hover: hover) {
  .home-cover-figure:hover { transform: rotate(0) translateY(-3px); box-shadow: 0 30px 54px -22px rgba(8, 3, 12, 1); }
  .home-cover-link:hover svg { transform: translateX(3px); }
}
@media (max-width: 520px) {
  .home-cover-intro { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding: 15px; }
  .home-cover-copy .pill { display: none; }
  .home-cover-kicker { font-size: 9px; letter-spacing: 1.8px; }
  .home-cover-copy h2 { font-size: 19px; line-height: 1.12; }
  .home-cover-copy > p:not(.home-cover-kicker) { font-size: 12.5px; line-height: 1.45; margin-top: 9px; }
  .home-cover-link { margin-top: 11px; font-size: 12.5px; }
}

.progress-card {
  width: 100%;
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  background: linear-gradient(158deg, var(--plum-800) 0%, var(--plum-900) 100%);
  color: var(--on-dark);
  box-shadow: var(--lift-lg);
  transition: transform .12s, box-shadow .15s;
}
.progress-card:active { transform: scale(.99); }
@media (hover: hover) {
  .progress-card:hover { transform: translateY(-2px); box-shadow: var(--lift-lg), 0 26px 46px -26px rgba(23, 48, 36, .5); }
}
.ring { position: relative; width: 96px; height: 96px; flex: none; }
.ring svg { transform: rotate(-90deg); }
/* The arc draws itself in on arrival, then animates between values when a
   section is ticked. `--arc` is the offset for the current percentage. */
.ring-arc {
  stroke-dashoffset: var(--arc);
  animation: ring-draw .9s var(--ease-out) both;
  transition: stroke-dashoffset .5s var(--ease-out);
}
@keyframes ring-draw {
  from { stroke-dashoffset: var(--full); }
  to { stroke-dashoffset: var(--arc); }
}
.ring .pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 26px;
  color: #F5EFE3;
}
.ring .pct small { font-size: 12px; margin-top: 8px; }
.progress-card .body { flex: 1; min-width: 190px; }
.progress-card .kicker {
  display: block;
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--teal-light);
}
.progress-card .big {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(19px, .6vw + 17.5px, 23px);
  margin-top: 6px;
  color: #F5EFE3;
}
.progress-card .sub {
  display: block;
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.55;
  color: #B9A7C9;
  margin-top: 7px;
  max-width: 44ch;
}
.progress-card .go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--gold-soft);
}

.star-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 30px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(17px, .6vw + 15.5px, 21px);
  color: var(--ink);
}

.market-cta {
  width: 100%;
  border-radius: var(--radius);
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  color: #2A2113;
  box-shadow: 0 16px 30px -18px rgba(184, 137, 58, .80);
  transition: transform .12s, box-shadow .15s;
}
.market-cta:active { transform: scale(.99); }
@media (hover: hover) {
  .market-cta:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -18px rgba(184, 137, 58, .88); }
}
.market-cta .icon-tile {
  width: 46px; height: 46px;
  flex: none;
  border-radius: 13px;
  background: rgba(43, 36, 16, .14);
  display: flex;
  align-items: center;
  justify-content: center;
}
.market-cta .body { flex: 1; min-width: 0; }
.market-cta .t { display: block; font-family: var(--serif); font-weight: 700; font-size: 18px; }
.market-cta .s { display: block; font-size: 13px; font-weight: 600; opacity: .84; margin-top: 3px; line-height: 1.4; }

/* Auto-fit rather than a fixed column count: the tiles run as rows on a 360px
   phone and fill the width as soon as there is room for a real grid. */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 12px;
}
.quick-tile {
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--lift-sm);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.3;
}
@media (min-width: 460px) {
  .quick-tile {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 12px 18px;
    font-size: 13px;
    text-align: center;
  }
}
.quick-tile:active { transform: scale(.97); }
@media (hover: hover) {
  .quick-tile:hover { transform: translateY(-2px); box-shadow: var(--lift); }
}
.quick-tile .icon-tile {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-tile .qt-body { min-width: 0; }
.it-gold { background: #F2E6C9; }
.it-teal { background: #DDE9E9; }
.icon-tile-photo { border-radius: 50%; overflow: hidden; padding: 0; }
.icon-tile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.feature-card {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--lift);
  background: var(--card);
  display: flex;
  flex-direction: column;
}
.feature-card:active { transform: scale(.99); }
@media (hover: hover) {
  .feature-card:hover { transform: translateY(-2px); box-shadow: var(--lift-lg); }
}
.feature-cover {
  position: relative;
  flex: 1;
  background: linear-gradient(165deg, #3E2354 0%, var(--plum-900) 100%);
  padding: 20px;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.feature-cover .kicker {
  font-family: var(--serif);
  font-size: 10.5px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-top: auto;
}
.feature-cover .t {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  color: #F5EFE3;
  margin-top: 5px;
}
.feature-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 18px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted-2);
}
.feature-meta .upd {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--plum-800);
  font-weight: 700;
}

.free-card {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  padding: 24px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: linear-gradient(150deg, #3E2354 0%, var(--plum-900) 100%);
  color: var(--on-dark);
  box-shadow: var(--lift);
}
.free-card:active { transform: scale(.99); }
@media (hover: hover) {
  .free-card:hover { transform: translateY(-2px); box-shadow: var(--lift-lg); }
}
.free-card .t {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  color: #F5EFE3;
  margin-top: 12px;
}
.free-card .s {
  display: block;
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.55;
  color: #B9A7C9;
  margin-top: 8px;
  max-width: 40ch;
}
.free-card .go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--gold-soft);
}

/* --------------------------------------------------------------------------
   11. Numbered step tiles (used by the Legacy Inventory)
   -------------------------------------------------------------------------- */
.step-num {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: #F2E6C9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 14px;
  color: var(--gold-ink);
  transition: background .2s, color .2s;
}
/* The visible circle is 40px, but the button reaches 48px on every side via a
   transparent border so a thumb has somewhere to land. */
.step-check {
  flex: none;
  align-self: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--gold-deep);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.step-check:hover { border-color: var(--gold); }
.step-check:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.step-check svg { opacity: 0; transition: opacity .2s; }
  border: 1.5px solid var(--line);
  background-clip: padding-box;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--mid) var(--ease), border-color var(--mid), transform var(--fast);
}
.step-check { position: relative; }
.step-check::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 48px; height: 48px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.step-check:active { transform: scale(.9); }
.step-check svg { opacity: 0; transform: scale(.6); transition: opacity var(--mid), transform var(--mid) var(--ease-out); }

/* --------------------------------------------------------------------------
   12. Reading (lesson body)
   -------------------------------------------------------------------------- */
.read-layout { display: grid; gap: 26px; padding-top: 26px; }
@media (min-width: 1000px) {
  .read-layout { grid-template-columns: 1.5fr .8fr; align-items: start; }
  /* The rail is a third the height of the article. Sticking it keeps "keep
     going" reachable at the end of a long read instead of scrolled past. */
  .read-layout > :last-child { position: sticky; top: 26px; }
}

.tag-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.tag {
  border-radius: 20px;
  padding: 8px 14px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 12.5px;
}
.tag-gold { background: var(--gold); color: #2A2113; }
.tag-teal { background: var(--teal-chip); color: var(--teal-deep); }
.tag-neutral { background: var(--chip); color: #4A4453; }

/* Long-form body copy: books, lessons, disclaimer, about. */
.prose { max-width: 64ch; }
.prose p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.72;
  color: var(--ink-soft);
  margin-top: 16px;
}
.prose p:first-child { margin-top: 0; }
.prose h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 21px;
  color: var(--teal-deep);
  margin-top: 30px;
}
/* A small-caps section label. It is an `h2` rather than an `h3` because it is
   the first level under the page title — the styling is what is small here,
   not the rank. */
.prose h3,
.prose h2.label {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-top: 28px;
}
.prose ul { display: grid; gap: 10px; margin-top: 16px; }
.prose li {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  padding-left: 20px;
  position: relative;
}
.prose li::before {
  content: "";
  position: absolute;
  left: 2px; top: 10px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.prose a { color: var(--gold-ink); font-weight: 700; }

/* Scripture: italic serif with a gold small-caps reference line (Bible §6). */
.verse {
  margin-top: 26px;
  padding: 20px 22px;
  background: var(--cream-deep);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.verse p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.66;
  color: var(--plum-800);
}
.verse cite {
  display: block;
  margin-top: 12px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

/* Centred bold-italic callout on cream with a gold left border (Bible §6). */
.callout {
  margin-top: 28px;
  padding: 26px 24px;
  background: var(--cream-deep);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  text-align: center;
}
.callout p {
  font-family: var(--serif);
  font-weight: 600;
  font-style: italic;
  font-size: 17px;
  line-height: 1.62;
  color: var(--plum-800);
  max-width: 52ch;
  margin: 0 auto;
}

.signoff {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--muted);
}

/* Sidebar rail beside long-form copy. */
.aside-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--lift-sm);
}
.aside-card .cap {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.aside-card h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
  color: var(--plum-800);
  margin-top: 10px;
  line-height: 1.3;
}
.aside-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 10px;
}
.aside-card .btn { margin-top: 18px; }

/* --------------------------------------------------------------------------
   13. Read
   -------------------------------------------------------------------------- */
.featured-card {
  width: 100%;
  border-radius: var(--radius-lg);
  padding: 26px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: linear-gradient(150deg, var(--plum-700) 0%, var(--plum-950) 100%);
  color: #F5EFE3;
  box-shadow: 0 20px 38px -20px rgba(58, 33, 80, .75);
  position: relative;
  overflow: hidden;
  margin-top: 22px;
}
.featured-card:active { transform: scale(.99); }
@media (hover: hover) {
  .featured-card:hover { transform: translateY(-2px); }
}
.featured-card::after {
  content: "";
  position: absolute;
  bottom: -80px; right: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 70%);
}
.featured-card .pill { background: rgba(176, 141, 46, .32); color: #F5EFE3; }
.featured-card .t {
  display: block;
  position: relative;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(24px, 1.4vw + 20px, 32px);
  line-height: 1.2;
  margin-top: auto;
  padding-top: 40px;
  max-width: 22ch;
}
.featured-card .m {
  display: block;
  position: relative;
  font-size: 13px;
  font-weight: 600;
  opacity: .88;
  margin-top: 12px;
}

.lesson-list { display: grid; gap: 12px; }
@media (min-width: 760px) { .lesson-list { grid-template-columns: 1fr 1fr; } }

.lesson {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  box-shadow: var(--lift-sm);
}
.lesson:active { transform: scale(.99); }
@media (hover: hover) {
  .lesson:hover { transform: translateY(-2px); box-shadow: var(--lift); }
}
.lesson .glyph {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: #F2E6C9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--gold-ink);
}
.lesson .body { flex: 1; min-width: 0; }
.lesson .t { display: block; font-weight: 700; font-size: 15px; color: var(--ink); line-height: 1.35; }
.lesson .m { display: block; font-size: 12.5px; color: var(--muted-2); margin-top: 5px; font-weight: 600; }
.lesson.read .glyph { background: var(--plum-800); color: #F5EFE3; }

/* --------------------------------------------------------------------------
   14. About & invitation
   -------------------------------------------------------------------------- */
.consult-card {
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  margin-top: 22px;
  background: linear-gradient(158deg, var(--plum-800) 0%, var(--plum-900) 100%);
  color: var(--on-dark);
  box-shadow: var(--lift-lg);
}
@media (min-width: 860px) {
  .consult-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
  }
  .consult-card .btn { width: auto; min-width: 260px; flex: none; }
}
.consult-card h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(22px, 1.2vw + 18px, 28px);
  color: #F5EFE3;
}
.consult-card p {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-dark-soft);
  margin-top: 10px;
  max-width: 48ch;
}
.consult-card .btn { margin-top: 20px; }
@media (min-width: 860px) { .consult-card .btn { margin-top: 0; } }

/* --------------------------------------------------------------------------
   15. Section ledes & notes
   -------------------------------------------------------------------------- */
.plans-lede {
  font-family: var(--serif);
  font-size: clamp(15px, .5vw + 14px, 18px);
  line-height: 1.62;
  color: #4A4453;
  margin-top: 14px;
  max-width: 62ch;
}
.plans-lede b { color: var(--plum-800); }

.note-card {
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-top: 22px;
  background: var(--cream-deep);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.note-card .note-icon { flex: none; margin-top: 2px; }
.note-card .t { display: block; font-weight: 700; font-size: 15px; color: var(--ink); }
.note-card .s { display: block; font-size: 13.5px; color: #6E6650; line-height: 1.55; margin-top: 5px; }
.note-card a { color: var(--gold-ink); font-weight: 700; text-decoration: none; }
@media (hover: hover) {
  .note-card a:hover { text-decoration: underline; }
}

/* --------------------------------------------------------------------------
   16. Checkout
   -------------------------------------------------------------------------- */
.checkout-layout { display: grid; gap: 24px; padding-top: 26px; align-items: start; }
@media (min-width: 900px) {
  .checkout-layout { grid-template-columns: 1fr .82fr; gap: 34px; }
  .checkout-layout .summary { position: sticky; top: 26px; order: 2; }
}

.order-card {
  border-radius: var(--radius-lg);
  padding: 24px;
  background: var(--card);
  box-shadow: var(--lift);
}
.order-card .row1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.order-card .row1 .t { font-family: var(--serif); font-weight: 700; font-size: 19px; color: var(--ink); }
.order-card .row1 .p { font-family: var(--serif); font-weight: 700; font-size: 23px; color: var(--plum-800); white-space: nowrap; }
.order-card .row1 .p small { font-size: 13px; color: var(--muted); font-weight: 600; }
.order-card .s {
  font-family: var(--serif);
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 6px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.order-card .check-list { margin-top: 18px; }

.pay-cap {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.pay-opts { display: grid; gap: 11px; }
.pay-opt {
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  width: 100%;
  box-shadow: var(--lift-sm);
  border: 1.5px solid transparent;
  transition: border-color .15s;
}
.pay-opt .radio {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid #C6BCA6;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s;
}
.pay-opt .radio i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--plum-800);
  transform: scale(0);
  transition: transform .15s;
}
.pay-opt[aria-checked="true"] { border-color: var(--plum-800); }
.pay-opt[aria-checked="true"] .radio { border-color: var(--plum-800); }
.pay-opt[aria-checked="true"] .radio i { transform: scale(1); }
.pay-opt .t { display: block; font-weight: 700; font-size: 15px; color: var(--ink); }
.pay-opt .s { display: block; font-size: 12.5px; color: var(--muted-2); margin-top: 4px; line-height: 1.45; }

.field-wrap { display: grid; gap: 14px; margin-top: 18px; }
.field-wrap .split { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.field-row { display: grid; gap: 6px; }
.field-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.field-hint { font-size: 12px; color: var(--muted); }
.field {
  width: 100%;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 15px 16px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
}
.field::placeholder { color: #A79E93; }
.field:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176, 141, 46, .18); }

.pay-note {
  border-radius: var(--radius-sm);
  background: var(--cream-deep);
  padding: 16px 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #6E6650;
  margin-top: 18px;
}

.pay-btn-wrap { margin-top: 22px; }
.pay-btn-wrap .fine {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--serif);
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 12px;
}

.done-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: 60px 70px;
}
.done-badge {
  width: 90px; height: 90px;
  border-radius: 50%;
  background: var(--plum-900);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--lift-lg);
}
.done-body h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(29px, 2vw + 22px, 40px);
  color: var(--ink);
  margin-top: 26px;
}
.done-body p {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--ink-soft);
  margin-top: 14px;
  max-width: 44ch;
}
.done-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
}
.done-actions .btn { width: auto; min-width: 200px; }

/* --------------------------------------------------------------------------
   17. Shop
   -------------------------------------------------------------------------- */
.cart-btn {
  position: relative;
  flex: none;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--plum-900);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px -10px rgba(35, 20, 48, .55);
}
.cart-btn .dot {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--gold);
  color: #2A2113;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--cream);
}
.appbar .cart-btn { width: 40px; height: 40px; border-radius: 12px; }

.bundle-hero {
  width: 100%;
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-top: 22px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: linear-gradient(150deg, #3E2354 0%, var(--plum-900) 100%);
  color: var(--on-dark);
  box-shadow: var(--lift-lg);
}
.bundle-hero:active { transform: scale(.99); }
@media (hover: hover) {
  .bundle-hero:hover { transform: translateY(-2px); }
}
.bundle-hero::after {
  content: "";
  position: absolute;
  top: -80px; right: -70px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(176, 141, 46, .25), transparent 70%);
}
.bundle-hero > * { position: relative; }
.bundle-hero .t {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(23px, 1.6vw + 18px, 34px);
  line-height: 1.18;
  color: #F5EFE3;
  margin-top: 16px;
  max-width: 20ch;
}
.bundle-hero .s {
  display: block;
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 1.6;
  color: #C4B4D2;
  margin-top: 10px;
  max-width: 52ch;
}
.bundle-hero .row { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 20px; }
.bundle-hero .price { font-family: var(--serif); font-weight: 700; font-size: 29px; color: var(--gold); }
.bundle-hero .view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .20);
  color: var(--on-dark);
  font-weight: 700;
  font-size: 13.5px;
  border-radius: 20px;
  padding: 10px 16px;
}

.cat-chips {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding: 22px 0 4px;
  scrollbar-width: none;
  /* The chips run off the right edge on a phone, where the row otherwise
     reads as a complete set of three. The fade says there is more. Above the
     width where all four fit, there is nothing to hint at, so it is removed
     rather than left to dim a chip for no reason. */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent 100%);
}
@media (min-width: 620px) {
  .cat-chips { -webkit-mask-image: none; mask-image: none; }
}
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chip {
  flex: none;
  border-radius: 20px;
  padding: 10px 17px;
  font-weight: 700;
  font-size: 13.5px;
  background: var(--card);
  color: #6B6355;
  box-shadow: var(--lift-sm);
  transition: background .15s, color .15s;
}
.cat-chip:active { filter: brightness(.96); }
@media (hover: hover) {
  .cat-chip:hover { color: var(--ink); }
}
.cat-chip[aria-pressed="true"] { background: var(--plum-900); color: #F5EFE3; }

.prod-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 620px) { .prod-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .prod-grid { grid-template-columns: repeat(4, 1fr); } }

.prod-card {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--lift-sm);
  display: flex;
  flex-direction: column;
  transition: transform .12s, box-shadow .15s;
}
.prod-card:active { transform: scale(.98); }
@media (hover: hover) {
  .prod-card:hover { transform: translateY(-3px); box-shadow: var(--lift); }
}
.prod-cover {
  position: relative;
  aspect-ratio: 5 / 4;
  background: linear-gradient(160deg, #3E2354 0%, var(--plum-900) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.prod-cover .badge {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 1;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  background: var(--gold);
  color: #2A2113;
  border-radius: 12px;
  padding: 4px 9px;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .45);
}
/* The format label, kept clear of the cover art in the band the card's bottom
   padding reserves for it. */
.prod-cover .kind {
  position: absolute;
  bottom: 8px; left: 12px;
  z-index: 1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(246, 239, 223, .88);
  text-shadow: 0 1px 3px rgba(20, 10, 30, .6);
}
.prod-info { padding: 14px; display: flex; flex-direction: column; flex: 1; }
.prod-info .t { font-weight: 700; font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.prod-info .m {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-2);
  margin-top: 7px;
}
.prod-info .p {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--plum-800);
  margin-top: auto;
  padding-top: 10px;
}

/* --------------------------------------------------------------------------
   18. Book & product detail
   -------------------------------------------------------------------------- */
.product-layout { display: grid; gap: 26px; padding-top: 26px; align-items: start; }
@media (min-width: 900px) {
  .product-layout { grid-template-columns: .85fr 1.15fr; gap: 40px; }
  .product-layout .media { position: sticky; top: 26px; }
  /* The cover is capped, so centre it rather than leave a dead strip
     between it and the buying column. */
  .product-layout .pd-cover { margin-inline: auto; }
}

/* The cover is portrait, like the book it stands for. On a wide screen it is
   capped so it does not tower over the buying column beside it. */
.pd-cover {
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 340px;
  box-shadow: var(--lift-lg);
}
.pd-cover > .cover { aspect-ratio: 5 / 8; border-radius: inherit; }
@media (max-width: 899px) { .pd-cover { max-width: 260px; margin-inline: auto; } }

.pd-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: #E3DCCB;
}

.pd-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.pd-price-row .p { font-family: var(--serif); font-weight: 700; font-size: 36px; color: var(--plum-800); }
.pd-price-row .note { font-family: var(--serif); font-size: 13px; color: var(--muted); }

.pd-actions { display: grid; gap: 11px; margin-top: 20px; }
.pd-actions .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }

.download-panel {
  margin-top: 24px;
  padding: 22px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--lift-sm);
}
.download-panel .cap {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.download-panel h2 {
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 21px;
  color: var(--plum-800);
}
.download-intro {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.download-list { display: grid; gap: 10px; margin-top: 18px; }
/* The title and the two file buttons share a line where there is room for
   both and stack where there is not. This has to answer to the width of the
   panel, not the window: the same panel sits in a full-width product column
   and in a ~250px rail beside a book, where a viewport-keyed two-column grid
   left the title a few pixels wide and broke it one letter per line. */
.download-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 0 0;
  border-top: 1px solid var(--line);
}
.download-title {
  flex: 1 1 14ch;
  min-width: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.download-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.download-link {
  display: grid;
  min-width: 120px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  color: var(--plum-800);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
}
.download-link small { margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 600; }
.download-link:hover { border-color: var(--gold); background: var(--gold-soft); }

.about-cap {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 30px;
}
.about-copy {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.7;
  color: #4A4453;
  margin-top: 10px;
  max-width: 62ch;
}


/* --------------------------------------------------------------------------
   19. Cart
   -------------------------------------------------------------------------- */
.cart-layout { display: grid; gap: 24px; padding-top: 26px; align-items: start; }
@media (min-width: 900px) {
  .cart-layout { grid-template-columns: 1.35fr .65fr; gap: 34px; }
  .cart-layout .summary { position: sticky; top: 26px; }
}

.cart-items { display: grid; gap: 12px; }
.cart-item {
  background: var(--card);
  border-radius: var(--radius);
  padding: 15px;
  display: flex;
  gap: 15px;
  align-items: center;
  box-shadow: var(--lift-sm);
}
.cart-item .cover { box-shadow: var(--lift-sm); }
.cart-item .who { flex: 1; min-width: 0; }
.cart-item .t { display: block; font-weight: 700; font-size: 15px; color: var(--ink); line-height: 1.35; }
.cart-item .k { display: block; font-size: 12px; color: var(--muted-2); margin-top: 4px; font-weight: 600; }
.cart-item .side { text-align: right; flex: none; }
.cart-item .p { display: block; font-family: var(--serif); font-weight: 700; font-size: 17px; color: var(--plum-800); }
.cart-item .rm {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--danger);
  /* A destructive control gets a real target, not a 12px word. */
  padding: 8px 2px 6px;
  margin-top: 2px;
  border-radius: 8px;
}
.cart-item .rm:hover { text-decoration: underline; }
.cart-item .rm { font-size: 12.5px; font-weight: 700; color: var(--danger); margin-top: 6px; }
@media (hover: hover) {
  .cart-item .rm:hover { text-decoration: underline; }
}

.cart-summary {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--lift);
}
.subtotal-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.subtotal-row .l { font-family: var(--serif); font-size: 15.5px; color: var(--ink-soft); }
.subtotal-row .v { font-family: var(--serif); font-weight: 700; font-size: 27px; color: var(--plum-800); }
.cart-summary .btn { margin-top: 20px; }
.cart-summary .fine {
  text-align: center;
  font-family: var(--serif);
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 12px;
}

.cart-empty {
  padding: 64px 24px 72px;
  text-align: center;
}
.cart-empty .ec-mark {
  width: 68px; height: 68px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: #F2E6C9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-empty .ec-t {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(22px, 1.4vw + 18px, 28px);
  color: var(--ink);
}
.cart-empty .ec-s {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 10px auto 0;
  max-width: 40ch;
}
.cart-empty .ec-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 26px;
}
.cart-empty .btn { min-width: 220px; }

/* --------------------------------------------------------------------------
   20. Sheets, dialogs, toast
   -------------------------------------------------------------------------- */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(19, 30, 22, .58);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  background: #FBF7EF;
  border-radius: 26px 26px 0 0;
  padding: 32px 26px calc(30px + env(safe-area-inset-bottom));
  text-align: center;
  transform: translateY(105%);
  transition: transform .3s cubic-bezier(.32, .72, .28, 1);
  box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .40);
}
/* The closed state is the `hidden` attribute, not visibility — transitioning
   visibility would make focus() a no-op for the first frames after opening. */
.sheet.open { transform: translateY(0); }

/* On desktop the same component becomes a centred modal. */
@media (min-width: 720px) {
  .sheet {
    left: 50%; right: auto; bottom: auto; top: 50%;
    width: min(460px, calc(100vw - 48px));
    border-radius: var(--radius-lg);
    transform: translate(-50%, -46%) scale(.96);
    opacity: 0;
    transition: transform .22s ease, opacity .22s ease;
  }
  .sheet.open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.sheet .badge {
  width: 74px; height: 74px;
  border-radius: 50%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sheet .badge.solid { background: var(--plum-900); box-shadow: 0 16px 32px -14px rgba(35, 20, 48, .55); }
.sheet h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  color: var(--ink);
  margin-top: 20px;
}
.sheet p {
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 12px auto 0;
  max-width: 38ch;
}
.sheet .btn { margin-top: 12px; }
.sheet .btn:first-of-type { margin-top: 26px; }

/* The onboarding sheet is longer than the others — it scrolls, reads left,
   and gets a dismiss button since it opens on its own, unprompted. */
.sheet-onboarding {
  max-height: 88vh;
  overflow-y: auto;
  text-align: left;
}
@media (min-width: 720px) { .sheet-onboarding { width: min(520px, calc(100vw - 48px)); } }
.sheet-dismiss {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--chip);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sheet-dismiss:hover { background: var(--rule); }
.onboarding-portrait {
  display: block;
  width: 88px; height: 88px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto;
  border: 3px solid var(--card);
  box-shadow: 0 0 0 2px var(--gold);
}
.onboarding-eyebrow {
  text-align: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-top: 14px;
}
.sheet-onboarding h2 { text-align: center; margin-top: 6px; }
.onboarding-body p, .onboarding-sign {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: none;
  margin-top: 14px;
}
.onboarding-quote {
  margin: 20px 0;
  padding: 16px 18px;
  border-left: 3px solid var(--gold);
  background: var(--chip);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.onboarding-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--plum-800);
  margin: 0;
  max-width: none;
}
.onboarding-features-label {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.onboarding-features ul { display: grid; gap: 10px; list-style: none; padding: 0; }
.onboarding-features li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.onboarding-features li strong { color: var(--plum-800); }
.onboarding-sign { text-align: center; }
.sheet-onboarding .btn { width: 100%; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + 18px);
  z-index: 100;
  transform: translate(-50%, 20px);
  background: var(--plum-900);
  color: var(--on-dark);
  font-weight: 700;
  font-size: 13.5px;
  border-radius: 22px;
  padding: 13px 22px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .5);
  max-width: min(92vw, 420px);
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 900px) { .toast { bottom: 26px; } }

/* --------------------------------------------------------------------------
   21. Messages of Compassion
   -------------------------------------------------------------------------- */
.messages-page { padding-top: 34px; }

.message-page-head {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
}
.message-head-mark {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(176, 141, 46, .4);
  border-radius: 15px;
  background: rgba(255, 253, 248, .66);
}
.message-page-head h1 {
  font-family: var(--serif);
  color: var(--plum-900);
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.02;
  letter-spacing: -.8px;
  font-weight: 600;
}
.message-page-head p {
  margin-top: 9px;
  max-width: 54ch;
  font-family: var(--serif);
  font-size: clamp(17px, 2vw, 20px);
  color: var(--ink-soft);
}

.messages-layout {
  display: grid;
  gap: 38px;
  padding-top: 32px;
}
.message-compose h2,
.message-wall h2 {
  font-family: var(--serif);
  color: var(--plum-900);
  font-size: 27px;
  line-height: 1.15;
  font-weight: 600;
}
.message-compose form { margin-top: 24px; }
.message-field { display: block; margin-top: 18px; }
.message-field:first-child { margin-top: 0; }
.message-field > span {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.message-field small { font-weight: 500; color: var(--muted); }
.message-textarea {
  min-height: 154px;
  resize: vertical;
  line-height: 1.55;
}
.message-counter {
  margin-top: 6px;
  text-align: right;
  color: var(--muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.message-requirements {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.message-consent {
  display: grid;
  grid-template-columns: 21px 1fr;
  gap: 11px;
  align-items: start;
  margin: 22px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  cursor: pointer;
}
.message-consent input {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--teal-deep);
}
.message-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.btn-message {
  background: var(--teal-deep);
  color: #FFF;
  border-radius: 10px;
  box-shadow: 0 12px 24px -15px rgba(35, 99, 106, .75);
}
.btn-message:not(:disabled):hover { background: #1C5960; }
.message-review-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 13px;
  font-size: 12px;
  color: var(--muted);
}
.message-review-note svg { width: 16px; height: 16px; }
.message-form-status {
  display: grid;
  grid-template-columns: auto;
  gap: 3px;
  margin-top: 22px;
  padding: 17px 18px;
  border: 1px solid rgba(46, 125, 130, .35);
  border-radius: 12px;
  background: rgba(217, 234, 234, .4);
  color: #174E53;
}
.message-form-status[hidden] { display: none; }
.message-form-status strong {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
}
.message-form-status span { font-size: 13px; line-height: 1.5; }
.message-form-status.error {
  border-color: rgba(168, 69, 43, .35);
  background: rgba(168, 69, 43, .07);
  color: #78321F;
}

.message-wall-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}
.message-wall-head p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13.5px;
}
.message-refresh {
  flex: none;
  color: var(--teal-deep);
  font-weight: 700;
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.compassion-notes {
  display: grid;
  gap: 13px;
  margin-top: 20px;
}
.compassion-note {
  position: relative;
  background: rgba(255, 253, 248, .72);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 24px 24px 16px;
}
.compassion-note .quote-mark {
  position: absolute;
  top: 10px;
  left: 15px;
  color: var(--gold);
  font-family: Georgia, serif;
  font-size: 40px;
  line-height: 1;
}
.compassion-note blockquote {
  margin-left: 22px;
  font-family: var(--serif);
  color: var(--plum-950);
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.38;
}
.compassion-note footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 17px;
  padding-top: 12px;
  border-top: 1px solid rgba(176, 141, 46, .34);
  font-size: 12.5px;
  color: var(--muted);
}
.compassion-note strong { color: var(--teal-deep); font-size: 14px; }
.compassion-note .community { margin-left: 9px; }
.compassion-note time { white-space: nowrap; }
.message-wall-state {
  padding: 28px;
  border: 1px dashed var(--rule);
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
  font-family: var(--serif);
}
.message-wall-error .btn { margin: 14px auto 0; }

@media (min-width: 900px) {
  .messages-page { padding-top: 52px; }
  .message-page-head { padding-bottom: 34px; }
  .messages-layout {
    grid-template-columns: minmax(300px, 370px) minmax(0, 1fr);
    gap: 46px;
    padding-top: 40px;
  }
  .message-compose {
    position: sticky;
    top: 32px;
    align-self: start;
    padding-right: 46px;
    border-right: 1px solid var(--rule);
  }
}

@media (max-width: 520px) {
  .messages-page { padding-top: 26px; }
  .message-head-mark { display: none; }
  .message-page-head { text-align: center; }
  .message-page-head h1 { font-size: 37px; }
  .messages-layout { gap: 42px; }
  .message-wall { padding-top: 30px; border-top: 1px solid var(--rule); }
  .compassion-note { padding: 22px 17px 15px; }
  .compassion-note blockquote { margin-left: 19px; }
  .compassion-note footer { align-items: flex-end; }
  .compassion-note .community { display: block; margin: 2px 0 0; }
}

/* --------------------------------------------------------------------------
   22. Series list
   -------------------------------------------------------------------------- */
.book-grid { display: grid; gap: 13px; margin-top: 26px; }
@media (min-width: 900px) { .book-grid { grid-template-columns: 1fr 1fr; } }

.book-row {
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: var(--lift-sm);
  transition: transform .12s, box-shadow .15s;
}
.book-row:active { transform: scale(.99); }
@media (hover: hover) {
  .book-row:hover { transform: translateY(-2px); box-shadow: var(--lift); }
}
.book-cover {
  flex: none;
  width: 62px; height: 84px;
  border-radius: 10px;
  background: linear-gradient(165deg, var(--plum-700) 0%, var(--plum-950) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--lift-sm);
}
/* The chevron centres on the row rather than hanging off its first line. */
.book-row > svg:last-child { flex: none; align-self: center; }
.book-row .cover { box-shadow: var(--lift-sm); }
.book-row .body { flex: 1; min-width: 0; }
.book-row .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.book-row .num {
  font-family: var(--serif);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.book-row .meta .tag { padding: 5px 10px; font-size: 11px; }
.book-row .t {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.28;
  color: var(--plum-800);
  margin-top: 9px;
}
.book-row .s {
  display: block;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 7px;
}
.book-row .row-price {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--plum-800);
  margin-top: 9px;
}

.gap-note {
  margin-top: 26px;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--cream-deep);
  border-left: 4px solid var(--gold);
}
.gap-note h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--plum-800);
}
.gap-note p {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-top: 10px;
}

/* --------------------------------------------------------------------------
   22. Reading list extras
   -------------------------------------------------------------------------- */
.src-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  font-style: italic;
  padding: 12px 16px;
  background: var(--chip);
  border-radius: var(--radius-sm);
}

.mini-list { display: grid; gap: 2px; margin-top: 14px; }
.mini {
  display: block;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
}
.mini:first-child { border-top: 0; }
.mini .t { display: block; font-weight: 700; font-size: 14px; line-height: 1.35; color: var(--ink); }
.mini .m { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; font-weight: 600; }
.mini:hover .t { color: var(--plum-800); text-decoration: underline; }

.quick-tile small {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 3px;
}
@media (min-width: 460px) { .quick-tile small { font-size: 11.5px; margin-top: 4px; } }

/* --------------------------------------------------------------------------
   23. The Legacy Inventory
   -------------------------------------------------------------------------- */

/* The worksheet is a document, not a dashboard. At the full 1140px shell the
   tick control ends up a metre from the section it belongs to, and the prompt
   lines run past a comfortable measure. It gets its own narrower column. */
#screen-legacy .shell { max-width: 880px; }

.privacy-band {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 26px;
  padding: 20px 22px;
  border-radius: var(--radius);
  background: var(--teal-chip);
}
.privacy-band .icon { flex: none; margin-top: 2px; }
.privacy-band .t {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--teal-deep);
}
.privacy-band .s {
  display: block;
  font-size: 13.5px;
  line-height: 1.6;
  color: #2C4A4C;
  margin-top: 7px;
}

.inv-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--lift-sm);
}
.inv-head { display: flex; align-items: flex-start; gap: 15px; }
.inv-head .body { flex: 1; min-width: 0; }
.inv-head .t { display: block; font-family: var(--serif); font-weight: 700; font-size: 18px; color: var(--plum-800); }
.inv-head .s { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }
.inv-card.done .step-num { background: var(--plum-800); color: #F5EFE3; }
.inv-card.done .step-check { background: var(--gold); border-color: var(--gold); }
.inv-card.done .step-check svg { opacity: 1; transform: none; }
/* A ticked section steps forward from the ones still to do. */
.inv-card {
  border: 1px solid transparent;
  transition: border-color var(--mid), background var(--mid);
}
.inv-card.done { border-color: rgba(176, 141, 46, .35); background: #FFFCF3; }

.inv-prompts { display: grid; gap: 10px; margin-top: 16px; }
.inv-prompts li {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  padding-left: 22px;
  position: relative;
}
.inv-prompts li::before {
  content: "";
  position: absolute;
  left: 3px; top: 9px;
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
}
.inv-note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  line-height: 1.6;
  font-style: italic;
  color: var(--teal-deep);
}

.print-row { margin-top: 26px; }
.print-row .btn { display: inline-flex; align-items: center; gap: 9px; }
.print-row .fine {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 12px;
  max-width: 56ch;
}

/* --------------------------------------------------------------------------
   24. Production status
   -------------------------------------------------------------------------- */
.status-list { display: grid; gap: 16px; padding-top: 26px; }

.status-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--lift-sm);
  border-left: 4px solid var(--rule);
}
.status-card.sev-blocker { border-left-color: var(--gold); }
.status-card.sev-fixed-in-text { border-left-color: var(--teal); }

.status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.status-head h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 20px;
  color: var(--plum-800);
}
.status-head .tag { padding: 6px 12px; font-size: 11.5px; }
.status-card .intro {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-top: 12px;
  max-width: 72ch;
}
.status-items { display: grid; gap: 11px; margin-top: 18px; }
.status-items li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  padding-left: 20px;
  position: relative;
}
.status-items li::before {
  content: "";
  position: absolute;
  left: 2px; top: 9px;
  width: 6px; height: 6px;
  border-radius: 1.5px;
  background: var(--rule);
}

/* --------------------------------------------------------------------------
   25. About, footers, and shared odds
   -------------------------------------------------------------------------- */
.about-layout { display: grid; gap: 30px; padding-top: 26px; align-items: start; }
@media (min-width: 1000px) {
  .about-layout { grid-template-columns: 1.5fr .85fr; }
}

.author-portrait {
  width: 168px; height: 168px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin-bottom: 24px;
  border: 4px solid var(--card);
  box-shadow: 0 0 0 3px var(--gold), var(--lift);
}
/* The author's portrait sits beside her name in the dark header. It wraps to
   its own line on a narrow phone rather than squeezing the h1 to two words. */
.about-id { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.about-id-text { flex: 1 1 300px; min-width: 0; }
.about-portrait {
  flex: none;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(208, 172, 76, .5);
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .65);
}
@media (min-width: 720px) { .about-portrait { width: 132px; height: 132px; } }

.disclaimer-body { padding-top: 26px; max-width: 68ch; }
.disclaimer-body h2:first-child { margin-top: 0; }

.aside-card .hint {
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 10px;
}
.aside-card a:not(.btn) { color: var(--gold-ink); font-weight: 700; }

.brand-foot {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.brand-foot .line {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  word-break: break-word;
}
.brand-foot .tag {
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-top: 12px;
}
.brand-foot .sign {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--plum-800);
  margin-top: 10px;
}

.side-minor { display: grid; gap: 8px; margin-bottom: 16px; }
.side-minor a, .side-minor-btn {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--on-dark-soft);
}
.side-minor a:hover, .side-minor-btn:hover { color: #F5EFE3; text-decoration: underline; }
.side-minor-btn {
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.pending-note {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  padding: 18px 20px;
  background: var(--chip);
  border-radius: var(--radius-sm);
}
.pending-note a { color: var(--gold-ink); font-weight: 700; }

.prod-card.pending .prod-cover { filter: saturate(.5); }
.prod-card.pending .prod-info .p { color: var(--muted); font-size: 13px; }

/* The mark sits behind the cover copy, not on top of it. */
.feature-cover .cover-mark {
  position: absolute;
  top: 26px; right: 24px;
  opacity: .34;
}

/* --------------------------------------------------------------------------
   26. Cover art

   Every cover is 5:8 (1600 x 2560). Slots declare that ratio themselves so a
   grid never reflows as the images decode.
   -------------------------------------------------------------------------- */
.cover-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  background: var(--plum-900);
}

/**
 * A single cover, or a set's titles fanned out. Slots are sized by height and
 * hold the 5:8 ratio themselves, so a whole cover is always visible — a book
 * cover with its title cropped off is worse than a smaller one.
 */
.cover-stack {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.cover-slot {
  flex: none;
  aspect-ratio: 5 / 8;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 18px -10px rgba(20, 10, 30, .7);
}
/* One title fills the frame's height. */
.cover-stack-1 .cover-slot { height: 100%; max-width: 100%; }
/* Two and three overlap, and are sized as a share of the frame's width so the
   fan can never spill out of the card it sits in: n·w − (n−1)·overlap = 100%. */
.cover-stack-2 .cover-slot { width: 56%; }
.cover-stack-3 .cover-slot { width: 44%; }
.cover-stack-2 .cover-slot + .cover-slot { margin-left: -12%; }
.cover-stack-3 .cover-slot + .cover-slot { margin-left: -16%; }
.cover-stack .cover-slot:nth-child(2) { z-index: 1; }
.cover-stack .cover-slot:nth-child(3) { z-index: 2; }
/* A typographic stand-in (§29) fills the same slot as photographed art, so a
   catalogue item without a cover keeps the grid's 5:8 rhythm. */
.cover-slot > .cover {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

/* Product detail: the full-resolution preview and the set's other covers. */
.pd-cover-figure { display: block; }
.pd-cover-link {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--lift-lg);
  aspect-ratio: 5 / 8;
  max-height: 62vh;
  margin-inline: auto;
  width: fit-content;
}
.pd-cover-link .cover-art { width: auto; height: 100%; }
.pd-cover-figure figcaption,
.cover-figure figcaption {
  margin-top: 10px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.pd-cover-figure figcaption a,
.cover-figure figcaption a { color: var(--gold-ink); text-decoration: underline; }

.cover-figure {
  display: block;
  margin-bottom: 18px;
}
.cover-figure > a {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--lift);
  aspect-ratio: 5 / 8;
  max-height: 460px;
  width: fit-content;
  margin-inline: auto;
}
.cover-figure .cover-art { width: auto; height: 100%; }

.cover-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  justify-content: center;
}
.cover-chip {
  width: 52px;
  aspect-ratio: 5 / 8;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: var(--lift-sm);
  transition: transform .12s;
}
.cover-chip:hover { transform: translateY(-2px); }

/* Cards that carry cover art rather than the cup mark. */
.prod-cover { aspect-ratio: 1 / 1; padding: 16px 16px 28px; }
.prod-cover .cover-stack { height: 100%; }

/* The series list: a 5:8 slot so the whole cover reads at thumbnail size. */
.book-cover { width: 66px; height: 106px; overflow: hidden; }
.book-cover .cover-art { border-radius: 10px; }
@media (min-width: 720px) {
  .book-cover { width: 78px; height: 125px; }
}

/* The cart thumbnail carries cover art, so it takes the covers' 5:8 shape and
   drops the plum tile behind it. */
.cart-item .thumb {
  width: 54px;
  height: 86px;
  border-radius: 0;
  background: none;
}

/* --------------------------------------------------------------------------
   27. Format choice
   -------------------------------------------------------------------------- */
.format-picker { margin-top: 22px; }
.format-cap {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--plum-800);
  margin-bottom: 12px;
}
.format-opts { display: grid; gap: 10px; }
@media (min-width: 620px) {
  .format-opts { grid-template-columns: repeat(3, 1fr); }
}
.format-opt {
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  box-shadow: var(--lift-sm);
  border: 1.5px solid transparent;
  transition: border-color .15s;
}
.format-opt .radio {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid #C6BCA6;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s;
}
.format-opt .radio i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--plum-800);
  transform: scale(0);
  transition: transform .15s;
}
.format-opt[aria-checked="true"] { border-color: var(--plum-800); }
.format-opt[aria-checked="true"] .radio { border-color: var(--plum-800); }
.format-opt[aria-checked="true"] .radio i { transform: scale(1); }
.format-opt .t { display: block; font-weight: 700; font-size: 14px; color: var(--ink); }
.format-opt .s { display: block; font-size: 12px; color: #78716C; margin-top: 3px; line-height: 1.4; }

.btn-save { display: flex; align-items: center; justify-content: center; gap: 8px; }

.cart-item .fmt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--teal-deep);
  margin-top: 6px;
}
.cart-item .fmt a { color: var(--gold-ink); text-decoration: underline; font-weight: 600; }
.order-card .row1 .t small {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--teal-deep);
  margin-top: 3px;
}

/* Single books, offered alongside the sets. */
.singles { margin-top: 34px; }
.singles-lede {
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.singles-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (min-width: 720px) { .singles-row { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.single-card {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  transition: transform .12s;
}
.single-card:hover { transform: translateY(-3px); }
.single-cover {
  width: 100%;
  aspect-ratio: 5 / 8;
  display: block;
}
.single-card .t {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ink);
}
.single-card .p { font-weight: 800; font-size: 12.5px; color: var(--plum-800); }

/* --------------------------------------------------------------------------
   28. Tools: the sidebar group, My Library, and the Network
   -------------------------------------------------------------------------- */
.side-tools { text-align: left; }
.side-tools .caret {
  margin-left: auto;
  display: flex;
  transition: transform .15s;
}
.side-tools .caret.open { transform: rotate(90deg); }
.side-sub { display: grid; gap: 2px; margin: 2px 0 2px 18px; }
/* `display: grid` would otherwise beat the browser's own [hidden] rule. */
.side-sub[hidden] { display: none; }
.side-sublink {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 11px;
  font-weight: 600;
  font-size: 13.5px;
  color: #B3A2C4;
  transition: background .15s, color .15s;
}
.side-sublink:hover { background: rgba(255, 255, 255, .07); color: #E9E1D3; }
.side-sublink .stroke { stroke: currentColor; }
.side-sublink[aria-current="page"] {
  background: rgba(176, 141, 46, .16);
  color: #F5EFE3;
  box-shadow: inset 0 0 0 1px rgba(176, 141, 46, .32);
}

.side-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.side-social a {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--teal-light);
}
.side-social a:hover { color: #F5EFE3; text-decoration: underline; }

.tools-grid {
  display: grid;
  gap: 16px;
  margin-top: 4px;
}
@media (min-width: 720px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } }
.tool-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--lift-sm);
  display: grid;
  gap: 8px;
  align-content: start;
  transition: transform .12s, box-shadow .15s;
}
.tool-card:hover { transform: translateY(-2px); box-shadow: var(--lift); }
.tool-card .icon-tile {
  width: 46px; height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.tool-card .t { font-family: var(--serif); font-weight: 700; font-size: 19px; color: var(--plum-800); }
.tool-card .s { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.tool-card .go {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--gold-ink);
  margin-top: 4px;
}

/* My Library */
.lib-list { display: grid; gap: 14px; }
.lib-row {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--lift-sm);
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (min-width: 760px) {
  .lib-row { grid-template-columns: 88px minmax(0, 1fr) auto; }
}
.lib-cover {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 8;
}
.lib-body { min-width: 0; }
.lib-body .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lib-body .meta .k { font-size: 11.5px; font-weight: 700; color: #78716C; }
.lib-body .t {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
  margin-top: 8px;
}
.lib-body .t:hover { text-decoration: underline; }
.lib-body .s { display: block; font-size: 12.5px; font-weight: 600; color: #78716C; margin-top: 5px; }
.lib-downloads { display: grid; gap: 10px; margin-top: 12px; }
.lib-download { display: grid; gap: 6px; }
.lib-download-title { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.lib-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  grid-column: 1 / -1;
}
@media (min-width: 760px) {
  .lib-side { grid-column: auto; align-items: flex-end; text-align: right; }
}
.lib-owned {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--teal-deep);
}
.lib-side .rm { font-size: 12.5px; font-weight: 700; color: var(--gold-ink); }
.lib-side .rm:hover { text-decoration: underline; }

.lib-empty {
  background: var(--card);
  border-radius: var(--radius);
  padding: 28px 22px;
  text-align: center;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  box-shadow: var(--lift-sm);
  display: grid;
  gap: 16px;
  justify-items: center;
}
.lib-hint {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 8px;
}
.lib-note {
  margin-top: 28px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: var(--cream-deep);
  font-size: 13px;
  line-height: 1.6;
  color: #6E6650;
}

/* Network */
.net-grid {
  display: grid;
  gap: 16px;
  padding-top: 4px;
}
@media (min-width: 640px) { .net-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .net-grid { grid-template-columns: repeat(4, 1fr); } }
/* Flex column with the export button pushed to the foot, so a row of cards
   lines its buttons up however much text each person's entry carries. */
.net-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: var(--lift-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  text-align: center;
}
/* The photo slot holds its shape whether or not a headshot has arrived. */
.net-shot {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(165deg, var(--plum-700) 0%, var(--plum-950) 100%);
  border: 2px solid rgba(176, 141, 46, .45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-bottom: 10px;
}
.net-shot img { width: 100%; height: 100%; object-fit: cover; }
.net-initials {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  color: var(--gold-soft);
  line-height: 1;
}
.net-shot-note {
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(243, 236, 220, .62);
}
.net-name { font-family: var(--serif); font-weight: 700; font-size: 18px; color: var(--plum-800); }
.net-title { font-size: 12.5px; font-weight: 700; color: var(--gold-ink); }
.net-org {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--teal-deep);
}
.net-note {
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 8px 0 4px;
}
.net-links { display: grid; gap: 7px; width: 100%; margin: 6px 0 12px; }
.net-card .net-links { align-self: stretch; }
.net-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--plum-800);
  /* `break-word` rather than `anywhere`, so the <wbr> seams that escBreakable
     puts into an address are taken first and a mid-word split stays the last
     resort — it is what turned a domain into "manninsurancegro / up.com". */
  overflow-wrap: break-word;
  text-align: left;
  transition: border-color .15s, background .15s;
}
.net-link svg { flex: none; }
.net-link:hover { border-color: var(--gold); background: #FBF6EA; }
.net-card .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  font-size: 13.5px;
  padding-inline: 14px;
  white-space: nowrap;
}

/* Social links on the About screen and in the book footer. */
.social-row { display: grid; gap: 8px; margin-top: 14px; }
.social-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .15s, background .15s;
}
.social-link:hover { border-color: var(--gold); background: #FBF6EA; }
.social-link .t { display: block; font-size: 13px; font-weight: 700; color: var(--plum-800); }
.social-link .s { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 2px; }

.brand-foot .social {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 10px;
}
.brand-foot .social a {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-ink);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   29. Typographic covers
   The stand-in for a catalogue item that has no photographed cover: a colour
   field, one geometric motif, and the title set in the series serif, so two
   kits are told apart at thumbnail size. Books and workbooks use their real
   cover art (§26) and never reach this.
   Custom properties (--cv-*) are set inline per item by src/covers.js.
   -------------------------------------------------------------------------- */
.cover {
  position: relative;
  display: block;
  overflow: hidden;
  flex: none;
  background: linear-gradient(158deg, var(--cv-from) 0%, var(--cv-to) 100%);
  color: var(--cv-ink);
  isolation: isolate;
}

.cover-xs { width: 54px; aspect-ratio: 3 / 4; border-radius: 9px; }
.cover-sm { width: 68px; aspect-ratio: 3 / 4; border-radius: 10px; }
.cover-md { width: 100%; aspect-ratio: 3 / 4; }
.cover-lg { width: 100%; aspect-ratio: 3 / 4; border-radius: var(--radius-lg); }

/* Hairline frame, a nod to the printed interiors. */
.cv-frame {
  position: absolute;
  inset: 7px;
  border: 1px solid currentColor;
  border-radius: 4px;
  opacity: .22;
  pointer-events: none;
}
.cover-lg .cv-frame { inset: 14px; border-radius: 6px; }
.cover-xs .cv-frame, .cover-sm .cv-frame { inset: 5px; border-radius: 3px; }

/* --- motifs: one geometric gesture each, drawn from the accent --- */
.cv-motif { position: absolute; inset: 0; pointer-events: none; }

.mo-arc .cv-motif::before {
  content: "";
  position: absolute;
  right: -28%; bottom: -34%;
  width: 116%; aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--cv-accent);
  opacity: .34;
}
.mo-halo .cv-motif::before {
  content: "";
  position: absolute;
  top: -22%; right: -18%;
  width: 92%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cv-accent) 0%, transparent 68%);
  opacity: .34;
}
.mo-rules .cv-motif {
  background:
    linear-gradient(var(--cv-accent), var(--cv-accent)) 0 22% / 100% 2px no-repeat,
    linear-gradient(var(--cv-accent), var(--cv-accent)) 0 28% / 100% 2px no-repeat,
    linear-gradient(var(--cv-accent), var(--cv-accent)) 0 34% / 100% 2px no-repeat;
  opacity: .40;
}
.mo-split .cv-motif {
  background: linear-gradient(202deg, transparent 46%, var(--cv-accent) 46%, var(--cv-accent) 54%, transparent 54%);
  opacity: .28;
}
.mo-ladder .cv-motif {
  background: repeating-linear-gradient(90deg, var(--cv-accent) 0 1.5px, transparent 1.5px 11px);
  opacity: .26;
}

.cv-mark {
  position: absolute;
  top: 13px; left: 14px;
  display: flex;
  opacity: .92;
}
.cover-lg .cv-mark { top: 24px; left: 26px; }
.cover-xs .cv-mark, .cover-sm .cv-mark {
  inset: 0;
  top: auto; left: 50%;
  transform: translateX(-50%);
  bottom: 26%;
  opacity: .95;
}

/* --- the type block --- */
.cv-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 17px 20px;
  text-align: left;
}
.cover-lg .cv-text { padding: 30px 30px 32px; }

.cv-kicker {
  font-family: var(--serif);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--cv-accent);
}
.cv-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.16;
  margin-top: 7px;
  color: var(--cv-ink);
  /* Long titles must not push the imprint line out of the cover. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cover-lg .cv-title { font-size: 30px; -webkit-line-clamp: 5; }
.cv-rule {
  width: 26px; height: 2px;
  margin-top: 11px;
  background: var(--cv-accent);
  opacity: .9;
}
.cover-lg .cv-rule { width: 44px; margin-top: 16px; }
.cv-foot {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--cv-soft);
  margin-top: 9px;
}
.cover-lg .cv-foot { font-size: 10px; letter-spacing: 2px; margin-top: 14px; }

/* Title size tracks the cover's own width, not the viewport — the same
   component sits in a 98px grid slot and a 340px detail column. */
@supports (container-type: inline-size) {
  .cover-md, .cover-lg { container-type: inline-size; }
  .cover-md .cv-title { font-size: clamp(11px, 9cqw, 22px); }
  .cover-lg .cv-title { font-size: clamp(20px, 8.4cqw, 34px); }
}

/* A catalogue slot is about 98px across, and the full block — kicker, title,
   rule, imprint — is taller than the cover at that size, which pushed the
   kicker up under the mark and cut the title off. Below 150px the field, the
   motif, the mark and a short title do the identifying on their own. */
@container (max-width: 150px) {
  .cv-text { padding: 26px 9px 10px; }
  .cv-kicker,
  .cv-rule,
  .cv-foot { display: none; }
  .cv-title {
    margin-top: 0;
    line-height: 1.2;
    -webkit-line-clamp: 3;
  }
  .cv-frame { inset: 5px; border-radius: 3px; }
  .cv-mark { top: 7px; left: 8px; }
}

/* --------------------------------------------------------------------------
   30. Print — the Legacy Inventory is meant to leave the screen
   -------------------------------------------------------------------------- */
@media print {
  .sidebar, .appbar, .tabbar, #tabbar, .no-print,
  .skip-link, .toast, .sheet, .sheet-backdrop { display: none !important; }

  body { background: #fff; color: #000; }
  .main { padding-bottom: 0; }
  .shell, #screen-legacy .shell { max-width: none; padding-inline: 0; }

  /* Nothing prints a solid dark field. Browsers drop backgrounds by default,
     which would leave cream text on white — so the ink is restated too. */
  .dark-head, .cover, .progress-card, .free-card, .featured-card,
  .bundle-hero, .consult-card, .feature-cover {
    background: none !important;
    box-shadow: none !important;
    color: #000 !important;
    border: 1px solid #999;
  }
  .dark-head h1, .dark-head .lede, .dark-head .eyebrow,
  .cv-title, .cv-kicker, .cv-foot { color: #000 !important; }
  .cv-motif, .cv-mark, .dark-head .glow, .cover-mark { display: none !important; }
  .cover { aspect-ratio: auto; min-height: 0; }

  .inv-card {
    box-shadow: none;
    border: 1px solid #999;
    break-inside: avoid;
    margin-bottom: 14px;
  }
  /* Room to actually write the answers in. */
  .inv-prompts li { padding-bottom: 26px; border-bottom: 1px solid #CCC; }
  .privacy-band { background: none; border: 1px solid #999; }
  .note-card { break-inside: avoid; }
  a[href^="#"]::after { content: ""; }
}

/* The app bar already carries a cart on phones — one is enough. */
@media (max-width: 899px) {
  .page-head .cart-btn { display: none; }
}

/* The screen header is hidden when printing, so the sheet needs its own. */
.print-only { display: none; }
@media print {
  .print-only { display: block; margin-bottom: 18px; }
  .print-only h1 { font-family: var(--serif); font-size: 26px; font-weight: 700; }
  .print-only p { font-size: 12px; margin-top: 6px; }
}