/* EduPacket - shared stylesheet.
   Plain CSS, no framework. Modern product-site presentation (2026-10-22
   redesign): glass sticky header, display-type hero with a pure-CSS product
   visual, bento tool cards, pill controls, segmented difficulty selector,
   hairline borders, soft layered shadows, generous section rhythm.
   Palette: the VR8TY brand palette supplied by Vivek 2026-10-21 - Obsidian
   #0B0F19 canvas, Deep Forest Emerald #0A4D3C shading, Active Mint #10B981
   primary accent, Champagne Gold #D4AF37 secondary accent, Radiant Amber
   #F59E0B warm highlight, Platinum Light #F8FAFC text, Muted Slate #94A3B8
   labels and grids.
   Screens wear the brand; printed PDFs stay black on white on purpose -
   teachers pay for their own ink. The on-screen grid preview also stays
   paper-white because it previews the printed sheet.
   Site type is Inter (clean, minimal, SIL OFL) for everything on screen.
   The one handwriting font on the project, Patrick Hand, lives only inside
   the generated PDFs, where children trace its letter shapes - it is a
   teaching tool there, not branding. */

/* ------------------------------------------------------------------ */
/* Fonts                                                               */
/* ------------------------------------------------------------------ */

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

.glyph-sample {
  font-family: "Patrick Hand", cursive;
  font-size: 30px;
  line-height: 1.55;
  letter-spacing: .03em;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ------------------------------------------------------------------ */
/* Design tokens (dark theme is the default)                           */
/* ------------------------------------------------------------------ */

:root {
  --ink: #f8fafc;
  --muted: #aab9d0;
  --bg: #0b0f19;
  --paper: #131b2c;
  --surface: #0b1220;
  --emerald: #0a4d3c;
  --mint: #10b981;
  --mint-bright: #34d399;
  --gold: #d4af37;
  --amber: #f59e0b;
  --line: rgba(148, 163, 184, 0.18);
  --line-strong: rgba(148, 163, 184, 0.38);
  --header-bg: rgba(10, 77, 60, 0.82);
  --warn-bg: rgba(245, 158, 11, 0.09);
  --warn-line: rgba(245, 158, 11, 0.55);
  --warn-ink: #ffe1a8;
  --radius: 20px;
  --radius-sm: 14px;
  --shadow-card: 0 12px 32px -14px rgba(2, 6, 17, 0.55);
  --shadow-lift: 0 24px 48px -16px rgba(2, 6, 17, 0.6);
  --shadow-sheet: 0 30px 60px -18px rgba(2, 6, 17, 0.55), 0 4px 14px rgba(2, 6, 17, 0.3);
  --glow-mint: 0 8px 20px -8px rgba(16, 185, 129, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  --ring: 0 0 0 4px rgba(16, 185, 129, 0.22);
  --ease: 170ms ease;
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

* { box-sizing: border-box; }

/* Decorative hero glows bleed past the viewport edges on purpose.
   overflow-x: clip (not hidden) stops any horizontal scrolling without
   breaking position: sticky. */
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(16, 185, 129, 0.35); }

a { color: var(--mint); transition: color var(--ease); }
a:hover { color: var(--gold); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}

.wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Eyebrow / kicker label above headings */
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--gold);
  vertical-align: middle;
  margin-right: 10px;
}
.section-eyebrow { margin-top: 42px; margin-bottom: 0; }

/* Gradient text accent (mint to gold) */
.grad {
  background: linear-gradient(92deg, var(--mint-bright), var(--mint) 38%, var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------------------ */
/* Header - sticky glass, emerald band identity                        */
/* ------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(248, 250, 252, 0.14);
  box-shadow: 0 10px 32px -14px rgba(0, 0, 0, 0.5);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 13px;
  padding-bottom: 13px;
}
/* Progressive enhancement: gentle shrink while scrolling, Chromium only */
@supports (animation-timeline: scroll()) {
  .site-header .wrap {
    animation: header-shrink linear both;
    animation-timeline: scroll();
    animation-range: 0 140px;
  }
  @keyframes header-shrink {
    to { padding-top: 8px; padding-bottom: 8px; }
  }
}

.logo {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: #f8fafc;
  text-decoration: none;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.logo:hover { color: #f8fafc; }
/* Brand wordmark (Vivek-supplied logo, 2026-10-22): lowercase edu in platinum,
   packet in mint, gold dot. Rendered as text so it stays crisp at every size. */
.lw { display: inline-flex; align-items: baseline; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.lw-edu { color: #f8fafc; }
.lw-packet { color: var(--mint); }
.lw-dot { display: inline-block; width: 0.19em; height: 0.19em; border-radius: 50%; background: var(--gold); margin-left: 0.07em; flex: none; }

.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a {
  font-weight: 600;
  text-decoration: none;
  font-size: 15px;
  color: #f8fafc;
  padding: 8px 13px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  transition: background var(--ease), color var(--ease);
}
.main-nav a:hover { color: var(--gold); }

.theme-toggle {
  background: rgba(248, 250, 252, 0.08);
  border: 1px solid rgba(248, 250, 252, 0.3);
  color: #f8fafc;
  border-radius: 50%;
  padding: 0;
  width: 44px;
  height: 44px;
  min-height: 44px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.theme-toggle:hover { border-color: var(--gold); color: var(--gold); background: rgba(248, 250, 252, 0.04); }
.theme-toggle { white-space: nowrap; flex: none; }
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  flex: none;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.08);
  border: 1px solid rgba(248, 250, 252, 0.3);
  color: #f8fafc;
  cursor: pointer;
  font-family: inherit;
}
.nav-toggle:hover { border-color: var(--gold); color: var(--gold); }

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

.hero {
  position: relative;
  padding: 56px 0 64px;
}
.hero h1 {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: clamp(2.15rem, 4.2vw, 3rem);
  line-height: 1.08;
  margin: 0 0 16px;
}
.hero p.lede {
  font-size: 19.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 620px;
  margin: 0 0 24px;
}
/* Tool pages: the intro line runs the full width like everything else
   on the page (Vivek, 2026-10-22) */
body.tool-page .hero p.lede { max-width: none; }

.hero-compact { padding: 52px 0 40px; }
.hero-compact h1 { font-size: clamp(2rem, 3.6vw, 2.6rem); }

/* Home hero: copy and product visual side by side */
.hero-split {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: 54px;
  align-items: center;
  padding: clamp(44px, 6.5vw, 76px) 0 54px;
}
.hero-split h1 { font-size: clamp(2.7rem, 5.4vw, 4.25rem); }
.hero-split .lede { max-width: 34em; }

/* Soft radial colour glows behind the home hero */
.hero-split::before,
.hero-split::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
  z-index: -1;
}
.hero-split::before {
  width: 560px; height: 560px;
  top: -190px; left: -150px;
  background: radial-gradient(closest-side, rgba(16, 185, 129, 0.27), rgba(16, 185, 129, 0));
}
.hero-split::after {
  width: 480px; height: 480px;
  bottom: -220px; right: -120px;
  background: radial-gradient(closest-side, rgba(212, 175, 55, 0.16), rgba(245, 158, 11, 0));
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Promise chips - subtle glass pills */
.promise-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 28px 0 0;
}
.promise {
  background: rgba(248, 250, 252, 0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}
.promise::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  margin-right: 8px;
  vertical-align: 2px;
}

/* Product visual - stacked packet sheets, pure HTML and CSS */
.packet-visual {
  position: relative;
  height: 440px;
}
.packet-visual::before {
  content: "";
  position: absolute;
  inset: 6% -4%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0)),
    radial-gradient(closest-side at 82% 84%, rgba(212, 175, 55, 0.17), rgba(212, 175, 55, 0));
  filter: blur(12px);
  pointer-events: none;
}
.pv-sheet {
  position: absolute;
  background: #fdfdfa;
  color: #22303a;
  border: 1px solid rgba(11, 15, 25, 0.07);
  border-radius: 14px;
  box-shadow: 0 30px 55px -18px rgba(2, 6, 17, 0.5), 0 4px 14px rgba(2, 6, 17, 0.22);
  padding: 18px 20px;
}
.pv-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #93a5be;
}
.pv-front {
  width: min(400px, 90%);
  right: 4px;
  top: 26px;
  transform: rotate(-1.2deg);
  z-index: 3;
}
.pv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pv-chip {
  background: var(--emerald);
  color: #f8fafc;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.pv-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-top: 13px;
}
.pv-grid span {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: #eef2f6;
  border-radius: 5px;
  font-size: 14.5px;
  font-weight: 700;
  color: #2b3a4a;
}
.pv-grid span.hl { background: var(--mint); color: #06281e; }
.pv-list {
  margin: 13px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #68798e;
}
.pv-back-1 {
  width: 330px;
  left: 0;
  top: 74px;
  transform: rotate(-6deg);
  z-index: 2;
  background: #f5f5ef;
}
.pv-words { margin-top: 12px; }
.pv-words span {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #43536a;
  margin: 7px 0;
}
.pv-back-2 {
  width: 310px;
  left: 14px;
  bottom: 0;
  transform: rotate(4deg);
  z-index: 1;
  background: #eef0e9;
}
.pv-lines { margin-top: 6px; }
.pv-lines i {
  display: block;
  height: 15px;
  margin-top: 11px;
  border-bottom: 2px solid #d3dbe6;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

.btn {
  display: inline-block;
  background: var(--mint);
  color: #0b0f19;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 13px 24px;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  box-shadow: var(--glow-mint);
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease),
    border-color var(--ease), color var(--ease);
}
.btn:hover {
  background: var(--mint-bright);
  color: #0b0f19;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(16, 185, 129, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn:active { transform: translateY(0) scale(0.99); }
.btn.secondary {
  background: rgba(16, 185, 129, 0.1);
  color: var(--ink);
  border: 1px solid rgba(16, 185, 129, 0.45);
  box-shadow: none;
}
.btn.secondary:hover {
  background: rgba(16, 185, 129, 0.2);
  border-color: var(--mint);
  color: var(--mint);
  transform: translateY(-1px);
  box-shadow: none;
}
.btn:disabled { opacity: 0.55; cursor: wait; box-shadow: none; transform: none; }
.btn.big { font-size: 17px; padding: 15px 30px; }

/* ------------------------------------------------------------------ */
/* Tool cards - bento style                                            */
/* ------------------------------------------------------------------ */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 27px;
  margin: 22px 0 8px;
}
.card {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.035), rgba(248, 250, 252, 0) 42%), var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-card);
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(16, 185, 129, 0.45);
}
.card h3 { margin: 0 0 9px; font-size: 20px; letter-spacing: -0.01em; }
.card p { margin: 0 0 16px; color: #c2d0e2; font-size: 15.5px; line-height: 1.55; }
.card a { font-weight: 600; text-decoration: none; display: inline-block; padding: 9px 0; }
.card a::after {
  content: " \2192";
  display: inline-block;
  transition: transform var(--ease);
}
.card a:hover::after { transform: translateX(3px); }
.card .tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 999px;
  padding: 4px 11px;
  margin-bottom: 14px;
}
/* The live tool card leads: gradient border and a soft mint glow */
.card-live {
  background: linear-gradient(var(--paper), var(--paper)) padding-box,
    linear-gradient(135deg, rgba(16, 185, 129, 0.7), rgba(212, 175, 55, 0.5)) border-box;
  border: 1px solid transparent;
  box-shadow: var(--shadow-card), 0 18px 44px -18px rgba(16, 185, 129, 0.45);
}
.card-live .tag { background: rgba(16, 185, 129, 0.16); color: var(--mint-bright); }
/* Coming-next cards sit quieter */
.card-soon { background: var(--paper); box-shadow: none; }
.card-soon h3 { color: #c3cedd; }
.card-soon .tag { background: rgba(148, 163, 184, 0.13); color: var(--muted); }

/* ------------------------------------------------------------------ */
/* Prose                                                               */
/* ------------------------------------------------------------------ */

.prose { max-width: 720px; }
/* Tool pages: the sections below the tool stretch to the shell's full
   width - no uneven half-empty column (Vivek, 2026-10-22). */
body.tool-page .prose { max-width: none; }
.prose h1 {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: clamp(2.1rem, 4vw, 2.75rem);
  line-height: 1.12;
  margin: 26px 0 14px;
}
.prose h2 {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.55rem, 2.8vw, 1.95rem);
  line-height: 1.2;
  margin: 40px 0 12px;
}
.prose .eyebrow { margin-top: 68px; margin-bottom: 0; color: var(--gold); }
.prose .eyebrow + h2 { margin-top: 10px; }
.prose > h2:first-child, .prose > h1:first-child { margin-top: 8px; }
.prose p, .prose li { color: #c3cedd; line-height: 1.65; }
.prose ul { padding-left: 22px; }

.faq h3 { margin: 26px 0 5px; font-size: 17px; font-weight: 600; }
.faq p { margin: 0; }

/* ------------------------------------------------------------------ */
/* Tool layout and panels                                              */
/* ------------------------------------------------------------------ */

.tool-shell {
  display: grid;
  grid-template-columns: 370px 1fr;
  gap: 28px;
  margin: 6px 0 12px;
  align-items: start;
}
.panel {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.03), rgba(248, 250, 252, 0) 46%), var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-card);
}
.panel h2 { margin: 0 0 5px; font-size: 19px; letter-spacing: -0.01em; }
.panel .hint { color: var(--muted); font-size: 13.5px; margin: 0 0 6px; }

label.field-label, legend {
  display: block;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  margin: 22px 0 9px;
  padding: 0;
}
fieldset { border: none; padding: 0; margin: 0; }
fieldset legend { margin-bottom: 7px; }

textarea, input[type="text"], select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 16px;
  font-family: inherit;
  background: var(--surface);
  color: var(--ink);
  transition: border-color var(--ease), box-shadow var(--ease);
}
textarea:focus, input[type="text"]:focus, select:focus {
  outline: none;
  border-color: var(--mint);
  box-shadow: var(--ring);
}
textarea { min-height: 190px; resize: vertical; line-height: 1.5; }

/* Difficulty presets as a segmented control */
.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 6px;
}
.radio-pill { position: relative; flex: 1 1 28%; min-width: 0; }
.radio-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio-pill span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 44px;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 14.5px;
  font-weight: 600;
  background: transparent;
  color: var(--muted);
  transition: background var(--ease), color var(--ease), box-shadow var(--ease);
}
.radio-pill:hover span { color: var(--ink); }
.radio-pill input:checked + span {
  background: var(--mint);
  color: #0b0f19;
  font-weight: 700;
  box-shadow: 0 5px 16px -5px rgba(16, 185, 129, 0.65);
}
.radio-pill input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.checkbox-row { display: flex; align-items: flex-start; gap: 9px; margin-top: 18px; font-size: 15px; min-height: 44px; line-height: 1.45; }
.checkbox-row input { width: 18px; height: 18px; accent-color: var(--mint); flex: none; margin-top: 3px; }

.tool-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.tool-actions .btn { flex: 1 1 40%; font-size: 15px; padding: 13px 12px; white-space: nowrap; }
/* Download is the hero action of the controls */
#download-btn { flex: 1 1 100%; font-size: 17.5px; padding: 16px 24px; }
.status-line { font-size: 13.5px; color: var(--muted); margin: 14px 0 0; min-height: 21px; }
.copy-note { font-size: 14px; color: var(--gold); margin: 8px 0 0; overflow-wrap: anywhere; }

.unplaced {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  color: var(--warn-ink);
  border-radius: 16px;
  padding: 14px 18px;
  margin-top: 16px;
  font-size: 15px;
}
.unplaced strong { display: block; margin-bottom: 2px; }

/* ------------------------------------------------------------------ */
/* Live preview - a sheet of paper on a dotted backdrop                */
/* ------------------------------------------------------------------ */

.preview-panel {
  min-height: 300px;
  background-color: var(--paper);
  background-image: radial-gradient(rgba(148, 163, 184, 0.16) 1px, transparent 1.4px);
  background-size: 18px 18px;
}
#preview {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: var(--shadow-sheet);
  padding: 26px 22px 18px;
  margin-top: 20px;
  transform: rotate(-0.4deg);
}
.grid-preview {
  border-collapse: collapse;
  margin: 0 auto 14px;
  background: #ffffff;
  width: 100%;
  max-width: 430px;
  table-layout: fixed;
}
.grid-preview td {
  border: 1px solid #d5dce6;
  height: 30px;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  padding: 0;
  color: #22303a;
  overflow: hidden;
}
.preview-words { font-size: 14.5px; color: #51637c; margin: 0; }
.preview-empty { color: #51637c; text-align: center; padding: 34px 10px; margin: 0; }

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */

.site-footer {
  border-top: 1px solid var(--line);
  background: #070a11;
  margin-top: 76px;
  padding: 46px 0 42px;
  font-size: 14.5px;
  color: #9db0c6;
}
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #f8fafc;
}
.footer-brand { flex-direction: column; align-items: flex-start; gap: 6px; }
.brand-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #aab9d0; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px; }
.site-footer nav a {
  color: #aebdd2;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 10px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  transition: background var(--ease), color var(--ease);
}
.site-footer nav a:hover { color: var(--gold); }
.site-footer p { margin: 0; line-height: 1.6; }

/* ------------------------------------------------------------------ */
/* Sticky action bar (tool page) - Download stays one tap away while   */
/* scrolling. Desktop: a slim glass toolbar stuck under the header.    */
/* Phone: a fixed bottom bar. Its buttons only call the real tool      */
/* buttons in the controls panel; no logic lives here.                 */
/* ------------------------------------------------------------------ */

.action-bar {
  position: sticky;
  top: 78px;
  z-index: 40;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  width: fit-content;
  padding: 6px;
  margin: 0 0 18px auto;
  background: rgba(19, 27, 44, 0.85);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
}
.action-bar .btn {
  position: relative;
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
.action-bar .btn:hover { box-shadow: none; }
.action-bar .btn .btn-label { display: none; }
.action-bar .btn .btn-icon { display: block; width: 21px; height: 21px; }
/* The label lives in a tooltip chip that appears on hover / keyboard focus */
.action-bar .btn::after {
  content: attr(aria-label);
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: #f8fafc;
  border: 1px solid rgba(248, 250, 252, 0.22);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  padding: 6px 11px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease 0.25s;
  z-index: 70;
}
.action-bar .btn:hover::after, .action-bar .btn:focus-visible::after { opacity: 1; }

/* ------------------------------------------------------------------ */
/* Supporting-content accordions (tool page) - native details, so      */
/* every word stays in the DOM for readers, search and review, while   */
/* the page stops being one long scroll.                               */
/* ------------------------------------------------------------------ */

.acc {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  margin: 0 0 14px;
  overflow: hidden;
}
.acc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 19px 22px;
  min-height: 44px;
  transition: background var(--ease);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--ease);
}
.acc[open ] summary::after { transform: rotate(-135deg) translateY(-2px); }
.acc summary:hover { background: rgba(248, 250, 252, 0.03); }
.acc summary h2 { margin: 0; font-size: clamp(1.22rem, 2.4vw, 1.45rem); }
.acc-body { padding: 2px 22px 20px; }
.acc-body > p:first-child { margin-top: 0; }
.acc-body .faq h3:first-child { margin-top: 4px; }

/* ------------------------------------------------------------------ */
/* Home prose - two columns on desktop, stacked on phones              */
/* ------------------------------------------------------------------ */

.prose-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 52px;
  margin-top: 78px;
}
.prose-grid .prose { max-width: none; }
.prose-grid .eyebrow { margin-top: 0; }

/* ------------------------------------------------------------------ */
/* Light theme - the same VR8TY palette on a Platinum canvas.          */
/* The header band stays emerald and the footer stays obsidian in      */
/* both themes, so the brand reads either way.                         */
/* ------------------------------------------------------------------ */

[data-theme="light"] {
  --ink: #0b0f19;
  --muted: #51637c;
  --bg: #f6f8fb;
  --paper: #ffffff;
  --surface: #eef2f7;
  --line: rgba(11, 15, 25, 0.1);
  --line-strong: rgba(11, 15, 25, 0.28);
  --warn-bg: #fdf3e0;
  --warn-line: #f59e0b;
  --warn-ink: #7c4a03;
  --shadow-card: 0 12px 32px -16px rgba(11, 15, 25, 0.16);
  --shadow-lift: 0 24px 48px -20px rgba(11, 15, 25, 0.22);
  --shadow-sheet: 0 30px 60px -22px rgba(11, 15, 25, 0.28), 0 4px 14px rgba(11, 15, 25, 0.1);
  --ring: 0 0 0 4px rgba(16, 185, 129, 0.18);
}
[data-theme="light"] .grad {
  background-image: linear-gradient(92deg, #0a8a63, #0a4d3c 42%, #a07d14);
}
[data-theme="light"] .hero-split::before,
[data-theme="light"] .hero-split::after { opacity: 0.55; }
[data-theme="light"] .promise { background: rgba(255, 255, 255, 0.65); }
[data-theme="light"] .card {
  background: linear-gradient(180deg, rgba(11, 15, 25, 0.015), rgba(11, 15, 25, 0) 42%), var(--paper);
}
[data-theme="light"] .card-live {
  background: linear-gradient(var(--paper), var(--paper)) padding-box,
    linear-gradient(135deg, rgba(16, 185, 129, 0.75), rgba(212, 175, 55, 0.6)) border-box;
}
[data-theme="light"] .card-live .tag { background: #e2f4ec; color: #0a4d3c; }
[data-theme="light"] .card p { color: #4a5d7a; }
[data-theme="light"] .card-soon h3 { color: #2c3a4d; }
[data-theme="light"] .card-soon { box-shadow: none; }
[data-theme="light"] .panel {
  background: linear-gradient(180deg, rgba(11, 15, 25, 0.015), rgba(11, 15, 25, 0) 46%), var(--paper);
}
[data-theme="light"] .preview-panel {
  background-color: var(--paper);
  background-image: radial-gradient(rgba(11, 15, 25, 0.13) 1px, transparent 1.4px);
}
[data-theme="light"] .prose p, [data-theme="light"] .prose li { color: #2c3a4d; }
[data-theme="light"] .btn.secondary { color: var(--ink); }
[data-theme="light"] .btn.secondary:hover { color: #0a4d3c; background: #e9f7f1; }
[data-theme="light"] .copy-note { color: #0a6e52; }
[data-theme="light"] .btn { color: #0b0f19; }
[data-theme="light"] .btn:hover { color: #0b0f19; }
[data-theme="light"] .eyebrow { color: #a07d14; }
[data-theme="light"] .eyebrow::before { background: #a07d14; }
[data-theme="light"] .site-header { box-shadow: 0 10px 28px -16px rgba(11, 15, 25, 0.35); }
[data-theme="light"] a { color: #0a6e52; }
[data-theme="light"] a:hover { color: #8a6d1f; }
[data-theme="light"] .main-nav a { color: #f8fafc; }
[data-theme="light"] .main-nav a:hover { color: var(--gold); }
[data-theme="light"] .site-footer nav a { color: #aebdd2; }
[data-theme="light"] .site-footer nav a:hover { color: #f8fafc; }
[data-theme="light"] .card a { color: #0a6e52; }
[data-theme="light"] .action-bar { background: rgba(255, 255, 255, 0.88); }
[data-theme="light"] .acc summary:hover { background: rgba(11, 15, 25, 0.03); }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 1020px) {
  .cards { grid-template-columns: 1fr; }
  .card { max-width: 640px; }
}

@media (max-width: 900px) {
  .tool-shell { grid-template-columns: 1fr; }
  .hero-split { grid-template-columns: 1fr; gap: 40px; padding-bottom: 64px; }
  .packet-visual { height: 440px; max-width: 520px; }
}

@media (max-width: 820px) {
  .grid-preview td { height: 23px; font-size: 11.5px; }
  #preview { padding: 20px 14px 14px; }
  .main-nav a { font-size: 14px; padding: 7px 9px; }
  .logo { font-size: 21px; }
  .wrap { padding: 0 18px; }
  .panel { padding: 20px; }
  .pv-front { width: 92%; }
  .pv-back-1 { width: 270px; }
  .pv-back-2 { width: 250px; }
  .packet-visual { height: 400px; }
}

@media (max-width: 900px) {
  /* Tool owns the first screen: action bar becomes a fixed bottom bar */
  .action-bar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    top: auto;
    margin: 0;
    z-index: 60;
    justify-content: stretch;
  }
  .action-bar { width: auto; justify-content: space-evenly; }
  .action-bar .btn { flex: none; width: 46px; height: 46px; min-height: 46px; }
  .action-bar .btn .btn-icon { width: 23px; height: 23px; }
  .action-bar .btn::after { top: auto; bottom: calc(100% + 10px); }
  body.tool-page { padding-bottom: 96px; }
  .prose-grid { grid-template-columns: 1fr; gap: 0; margin-top: 64px; }
  .prose-grid .prose + .prose .eyebrow { margin-top: 54px; }
}

@media (max-width: 640px) {
  /* Header wraps gracefully: brand row, then a full-width nav row */
  .site-header .wrap { flex-wrap: wrap; row-gap: 2px; }
  .main-nav { order: 3; width: 100%; }
  .main-nav a { padding-left: 10px; padding-right: 10px; }
  .hero-split h1 { font-size: clamp(2.35rem, 11.5vw, 2.7rem); }
  .hero { padding: 44px 0 48px; }
  .hero-compact { padding: 40px 0 32px; }
  .acc summary { padding: 16px 18px; }
  .acc-body { padding: 2px 18px 18px; }
}

@media (max-width: 400px) {
  .grid-preview td { height: 20px; font-size: 10.5px; }
  .pv-grid span { font-size: 12.5px; }
  .action-bar .btn { font-size: 12.5px; }
}

/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .main-nav { flex-wrap: wrap; gap: 2px 12px; }
  .main-nav a { padding: 7px 4px; font-size: 0.92rem; }
}

/* Milestone 2 additions: sheet picker, cross-tool panel, bookmark tip,*/
/* tracing / paper / math previews, calibration box, guide callouts.   */
/* ------------------------------------------------------------------ */

/* Patrick Hand on screen is used only inside tool previews, where it
   previews the printed tracing sheet - the same exception the grid
   preview makes by staying paper-white. Branding never uses it. */
@font-face {
  font-family: "Patrick Hand";
  src: url("../fonts/PatrickHand-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

/* Sheet picker on the Packet Maker: a tidy two-column checkbox grid */
.sheet-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; margin-top: 4px; }
.sheet-list .checkbox-row { margin-top: 0; font-size: 14.5px; }
.sheet-note { font-size: 13.5px; color: var(--amber); margin: 8px 0 0; }

/* Four live tool cards on the home page */
@media (min-width: 1021px) {
  .cards-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1020px) and (min-width: 641px) {
  .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .cards-4 .card { max-width: none; }
}

/* Post-download cross-tool panel (file 07, lever 1) */
.cross-tool {
  border: 1px solid rgba(16, 185, 129, 0.4);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.07), rgba(16, 185, 129, 0) 55%), var(--paper);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin: 0 0 26px;
  box-shadow: var(--shadow-card);
}
.cross-tool h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: -0.01em; }
.cross-tool .cross-lede { color: var(--muted); margin: 0 0 16px; font-size: 15px; }
.cross-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cross-links a {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  text-decoration: none;
  color: var(--ink);
  background: rgba(248, 250, 252, 0.03);
  transition: border-color var(--ease), transform var(--ease);
}
.cross-links a:hover { border-color: var(--mint); transform: translateY(-2px); color: var(--ink); }
.cross-links a strong { display: block; color: var(--mint); font-size: 15.5px; margin-bottom: 3px; }
.cross-links a span { font-size: 13.5px; color: var(--muted); line-height: 1.45; display: block; }
@media (max-width: 820px) { .cross-links { grid-template-columns: 1fr; } }

/* Bookmark row inside the cross-tool panel: quiet, dismissible, and the
   instruction is device-specific text - never a fake bookmark button. */
.bookmark-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.bookmark-row[hidden] { display: none; }
.bookmark-row .bmk-line { font-size: 14.5px; font-weight: 600; }
.bookmark-row .bmk-btn { padding: 9px 16px; font-size: 14px; min-height: 44px; box-shadow: none; }
.bmk-x {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
}
.bmk-x:hover { color: var(--ink); }
.bmk-how {
  flex: 1 1 100%;
  margin: 4px 0 0;
  font-size: 14.5px;
  color: var(--gold);
  border-radius: 10px;
  padding: 6px 8px;
}
.bmk-flash { animation: bmk-pulse 900ms ease; }
@keyframes bmk-pulse {
  0% { background: rgba(212, 175, 55, 0.28); }
  100% { background: transparent; }
}

/* Roster tracing preview rows (sit on the paper-white preview sheet) */
.tr-row {
  position: relative;
  border-bottom: 2px solid #8fb0dd;
  background:
    linear-gradient(#c9d2de, #c9d2de) 0 12% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, #8fb0dd 0 6px, transparent 6px 11px) 0 52% / 100% 1.5px no-repeat;
  margin-bottom: 10px;
}
.tr-name {
  font-family: "Patrick Hand", cursive;
  position: absolute;
  left: 6px;
  bottom: 6px;
  line-height: 1;
  white-space: nowrap;
}
.tr-tag {
  position: absolute;
  right: 4px;
  top: 0;
  font-size: 10px;
  color: #8494ab;
}

/* Paper preview sheet: pattern guides only (the PDF is the exact one) */
.paper-sheet {
  height: 330px;
  border: 1px solid #d5dce6;
  border-radius: 6px;
  background-color: #ffffff;
}
.paper-wide { background-image: repeating-linear-gradient(180deg, transparent 0 25px, #b9c6d8 25px 26px); }
.paper-college { background-image: repeating-linear-gradient(180deg, transparent 0 20px, #b9c6d8 20px 21px); }
.paper-primary {
  background-image:
    repeating-linear-gradient(90deg, #8fb0dd 0 6px, transparent 6px 11px),
    repeating-linear-gradient(180deg, transparent 0 66px, #b9c6d8 66px 67px);
  background-size: 100% 33px, 100% 67px;
  background-position: 0 33px, 0 0;
}
.paper-graph {
  background-image:
    repeating-linear-gradient(90deg, transparent 0 13px, #ccd6e4 13px 14px),
    repeating-linear-gradient(180deg, transparent 0 13px, #ccd6e4 13px 14px);
}
.paper-dot {
  background-image: radial-gradient(#9fb2c8 1.3px, transparent 1.4px);
  background-size: 15px 15px;
  background-position: 7px 7px;
}

/* Math preview chips */
.math-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.mp-item { font-size: 17px; font-weight: 600; color: #22303a; }
.mp-num { color: #8494ab; font-weight: 400; font-size: 13px; }
.mp-blank { color: #0a4d3c; }
@media (max-width: 480px) { .math-preview { grid-template-columns: 1fr; } }

/* On-screen calibration box: CSS millimetres. Screens vary, so the copy
   says plainly that the printed check is the real test. */
.cal-stage { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; margin: 8px 0 4px; }
.cal-box {
  width: 80mm;
  height: 80mm;
  max-width: 100%;
  border: 2px solid var(--ink);
  position: relative;
  background: rgba(248, 250, 252, 0.03);
}
.cal-box span {
  position: absolute;
  left: 10px;
  bottom: 8px;
  font-size: 13px;
  color: var(--muted);
}
.cal-ruler {
  height: 12mm;
  width: 150mm;
  max-width: 100%;
  border-bottom: 2px solid var(--ink);
  background: repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px 10mm);
}

/* Guide article callout that points at the matching tool */
.guide-cta {
  border: 1px solid rgba(16, 185, 129, 0.45);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0) 60%), var(--paper);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 34px 0 10px;
}
.guide-cta h2 { margin-top: 0; }
.guide-cta p { margin-bottom: 14px; }

.footer-tip { margin-top: 10px; color: #aebdd2; }

[data-theme="light"] .cross-links a { background: rgba(11, 15, 25, 0.02); }
[data-theme="light"] .cross-links a:hover { color: var(--ink); }
[data-theme="light"] .bmk-how { color: #8a6d1f; }
[data-theme="light"] .cal-box { background: rgba(11, 15, 25, 0.02); }
[data-theme="light"] .footer-tip { color: #51637c; }

/* ------------------------------------------------------------------ */
/* Reduced motion                                                      */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  .btn:hover, .btn.secondary:hover, .card:hover { transform: none; }
  .card a:hover::after { transform: none; }
  #preview { transform: none; }
}

/* ------------------------------------------------------------------ */
/* Home guide list - one quiet row per guide (declutter pass,          */
/* 2026-10-22): title, one-line description, arrow link, hairline      */
/* dividers. Replaces the six-card grid on the home page only.         */
/* ------------------------------------------------------------------ */

.guide-list { margin: 24px 0 8px; border-top: 1px solid var(--line); }
.guide-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 27px 8px;
  border-bottom: 1px solid var(--line);
  transition: background var(--ease);
}
.guide-row:hover { background: rgba(248, 250, 252, 0.03); }
[data-theme="light"] .guide-row:hover { background: rgba(11, 15, 25, 0.03); }
.guide-row h3 { margin: 0 0 6px; font-size: 20px; letter-spacing: -0.01em; }
.guide-row p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; max-width: 620px; }
.guide-row a {
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
  padding: 10px 0;
}
.guide-row a::after {
  content: " \2192";
  display: inline-block;
  transition: transform var(--ease);
}
.guide-row a:hover::after { transform: translateX(3px); }

@media (max-width: 640px) {
  .guide-row { flex-direction: column; align-items: flex-start; gap: 4px; padding: 22px 4px; }
  .guide-row a { padding: 6px 0 2px; }
}

/* UI polish round (2026-10-22, from Vivek's live-site review) */
.sheet-list.single { grid-template-columns: 1fr; }

@media (max-width: 1020px) {
  /* Small screens: hamburger menu (Vivek, 2026-10-22). Brand, theme and
     burger on one row; the nav opens as a stacked panel on tap. */
  .nav-toggle { display: inline-flex; }
  .main-nav { display: none; }
  .main-nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    order: 3;
    width: 100%;
    gap: 2px;
    padding: 10px 0 6px;
  }
  .main-nav.open a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 12px;
    white-space: nowrap;
  }
}

/* Support strip (2026-10-25, Vivek: the footer line alone is invisible -
   the ask belongs in the page flow, right after the tool) */
.support-strip { margin-top: 26px; }
.support-card {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px 26px;
  box-shadow: var(--shadow-card);
}
.support-card p { margin: 0; flex: 1 1 340px; color: var(--muted); line-height: 1.6; font-size: 15.5px; }
.support-card p strong { color: var(--ink); }
.support-btn { display: inline-flex; align-items: center; gap: 9px; flex: none; }
@media (max-width: 640px) {
  .support-card { padding: 20px; }
  .support-btn { width: 100%; justify-content: center; }
}

/* Ko-fi circle carries the mascot, not the cup (Vivek, 2026-10-25) */
.action-bar .bar-kofi .btn-icon { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }

/* Floating mascot on non-tool pages (Vivek, 2026-10-25: float the mascot
   on every page; tool pages already carry him in the action bar) */
.kofi-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.5);
  transition: transform 0.18s ease;
}
.kofi-float img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; }
.kofi-float:hover { transform: translateY(-2px); }
.kofi-float::after {
  content: attr(aria-label);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: #0b0f19;
  color: #eef2f7;
  border: 1px solid rgba(148, 163, 184, 0.35);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease 0.25s;
}
.kofi-float:hover::after, .kofi-float:focus-visible::after { opacity: 1; }
@media (max-width: 640px) {
  .kofi-float { width: 50px; height: 50px; right: 14px; bottom: 14px; }
  .kofi-float img { width: 42px; height: 42px; }
}

/* Support strip relocation (2026-10-25, Vivek): on tool pages the coffee
   card sits in the preview column, directly under the Live Preview panel
   and exactly its width - not as a full-width band under the shell. */
.preview-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.preview-col .support-strip { margin-top: 0; }

/* The coffee card wears gold everywhere it appears (Vivek, 2026-10-25:
   uniformity - one component, one treatment, home strip included). */
.support-card {
  background: linear-gradient(180deg, rgba(245, 181, 36, 0.13), rgba(245, 181, 36, 0.06)), var(--panel);
  border-color: rgba(245, 181, 36, 0.45);
}
.support-btn {
  background: linear-gradient(180deg, #ffd34d, #f5b524);
  color: #221a02;
  box-shadow: 0 8px 20px -8px rgba(245, 181, 36, 0.6);
}
.support-btn:hover { background: linear-gradient(180deg, #ffdb66, #ffc233); }
[data-theme="light"] .support-card {
  background: linear-gradient(180deg, rgba(245, 181, 36, 0.20), rgba(245, 181, 36, 0.10)), var(--panel);
  border-color: rgba(217, 154, 13, 0.55);
}

/* Breathing room between the tool shell and the sections below it
   (the accordion sat 12px under the shell - the crowding Vivek flagged) */
body.tool-page .prose { margin-top: 40px; }