@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("/assets/ibm-plex-sans-400-bf0c3289.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("/assets/ibm-plex-sans-500-bf0c3289.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("/assets/ibm-plex-sans-600-bf0c3289.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url("/assets/ibm-plex-sans-700-bf0c3289.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("/assets/ibm-plex-mono-400-d803141a.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("/assets/ibm-plex-mono-500-3f7bbac1.woff2") format("woff2"); }

/* Lamport Press — sales landing.
   Dark theme keyed to the series covers: purple #9945FF, blue #19A3FE,
   green #14F195. Centering rule: containers use .wrap (margin-inline auto);
   never rely on margin shorthand + max-width on text elements. */

:root {
  --bg: #0a0c11;
  --panel: #12151d;
  --panel-2: #151926;
  --line: #1e2432;
  --text: #e8eaf0;
  --muted: #9aa1b2;
  --purple: #9945ff;
  --blue: #19a3fe;
  --green: #14f195;
  --teal: #16d1c6;
  --grad: linear-gradient(90deg, var(--purple), var(--blue), var(--green));
  --radius: 14px;
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
section[id], header[id], article[id] { scroll-margin-top: 4.5rem; }

body {
  margin: 0;
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.65;
  background:
    radial-gradient(50rem 30rem at 15% -5%, rgba(153, 69, 255, 0.16), transparent 60%),
    radial-gradient(45rem 28rem at 85% 8%, rgba(25, 163, 254, 0.13), transparent 60%),
    radial-gradient(60rem 34rem at 50% 110%, rgba(20, 241, 149, 0.07), transparent 60%),
    var(--bg);
}

a { color: var(--blue); }

.wrap { max-width: 64rem; margin-inline: auto; padding-inline: 1.25rem; }
.wrap.narrow { max-width: 46rem; }

.eyebrow {
  font-family: var(--mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.75rem;
  color: var(--green);
  text-align: center;
  margin: 0 0 0.6rem;
}

h2 {
  font-size: 1.9rem;
  text-align: center;
  margin-block: 0 1.75rem;
}
h2::after {
  content: "";
  display: block;
  width: 4rem;
  height: 3px;
  border-radius: 3px;
  background: var(--grad);
  margin: 0.7rem auto 0;
}

section, .hero, .colophon { padding-block: 3.5rem; }

/* ---- Navbar ---- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 12, 17, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.6rem;
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.85rem;
}
.nav-mark { width: 30px; height: 30px; }
.nav-links { display: flex; gap: 1.6rem; }
.nav-links a {
  color: var(--muted);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 600;
  padding-block: 0.4rem;
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transition: transform 0.18s ease;
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--text); }
@media (max-width: 640px) {
  .nav-links { gap: 1rem; }
  .nav-links a { font-size: 0.7rem; letter-spacing: 0.1em; }
  .nav-brand span { display: none; }
}

/* ---- Hero ---- */
.hero { text-align: center; padding-block: 2rem 1rem; }

.mark { width: 52px; height: 52px; flex: none; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.5rem;
  align-items: center;
  text-align: left;
  margin-top: 1rem;
}
.hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  line-height: 1.08;
  margin-block: 0 0.5rem;
  letter-spacing: -0.01em;
  font-weight: 800;
}
/* Second tier under the title, sized like the OG card: the tagline is a
   subtitle, not part of the headline. */
.hero-tag {
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  line-height: 1.22;
  font-weight: 700;
  margin-block: 0 0.9rem;
  max-width: 26rem;
}
.h1-grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Curriculum rail */
.path {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  margin: 3rem auto 0.4rem;
  max-width: 60rem;
  position: relative;
}
.path::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 6%;
  right: 6%;
  height: 2px;
  background: var(--grad);
  opacity: 0.9;
}
.path-node {
  flex: 1;
  position: relative;
  font-family: var(--mono);
  font-size: 0.84rem;
  color: #c3c9d6;
  text-align: center;
  padding: 0 0.3rem;
  line-height: 1.35;
}
.path-node .dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 0 auto 0.5rem;
  background: var(--bg);
  border: 2.5px solid var(--blue);
  position: relative;
  z-index: 1;
}
.path-node:nth-child(-n+3) .dot { border-color: var(--purple); }
.path-node:nth-child(4) .dot { border-color: var(--blue); }
.path-node:nth-child(5) .dot { border-color: var(--teal); }
.path-node:nth-child(6) .dot { border-color: var(--green); }
.path-node:last-child .dot {
  border-color: var(--green);
  background: var(--green);
  box-shadow: 0 0 12px rgba(20, 241, 149, 0.7);
}
.path-node:last-child { color: var(--text); font-weight: 600; }
@media (max-width: 720px) {
  .path {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    width: fit-content;
    margin-inline: auto;
  }
  .path::before {
    top: 8px;
    bottom: 8px;
    left: 5px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--purple), var(--blue), var(--green));
  }
  .path-node {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex: none;
    padding: 0;
    text-align: left;
    font-size: 0.88rem;
  }
  .path-node .dot { margin: 0; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .claim, .hero-tag { margin-inline: auto; }
  .cover-fan { order: 2; }
}
.claim {
  font-size: 1.25rem;
  color: var(--text);
  margin-block: 0 0.4rem;
  max-width: 30rem;
}
.hero-actions { margin-block: 1.6rem 0.6rem; }
.reassure { font-family: var(--mono); color: var(--muted); font-size: 0.82rem; margin-block: 0; }

/* Fanned covers */
.cover-fan {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: 1.5rem;
}
.cover-fan a { display: block; margin-inline: -14px; }
.cover-fan img {
  width: clamp(110px, 11vw, 150px);
  height: auto;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.55), 0 0 34px var(--glow, rgba(25, 163, 254, 0.28));
  transition: transform 0.25s ease;
}
.cover-fan a:nth-child(1) img { --glow: rgba(153, 69, 255, 0.32); }
.cover-fan a:nth-child(2) img { --glow: rgba(25, 163, 254, 0.32); }
.cover-fan a:nth-child(3) img { --glow: rgba(22, 209, 198, 0.30); }
.cover-fan a:nth-child(4) img { --glow: rgba(20, 241, 149, 0.30); }
.cover-fan a:nth-child(1) img { transform: rotate(-9deg) translate(26px, 12px); }
.cover-fan a:nth-child(2) img { transform: rotate(-3deg) translateY(-4px); }
.cover-fan a:nth-child(3) img { transform: rotate(3deg) translateY(-4px); }
.cover-fan a:nth-child(4) img { transform: rotate(9deg) translate(-26px, 12px); }
.cover-fan a:nth-child(1) { z-index: 1; }
.cover-fan a:nth-child(2) { z-index: 2; }
.cover-fan a:nth-child(3) { z-index: 3; }
.cover-fan a:nth-child(4) { z-index: 4; }
.cover-fan a:hover { z-index: 5; }
.cover-fan a:hover img { transform: rotate(0) translateY(-14px); }

/* ---- Buttons ---- */
.button {
  display: inline-block;
  padding: 0.65rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.button:hover { transform: translateY(-1px); }
.button.primary {
  border: none;
  background: var(--grad);
  color: #071018;
  box-shadow: 0 8px 28px rgba(25, 163, 254, 0.35);
}
.button.primary:hover { box-shadow: 0 10px 34px rgba(93, 116, 255, 0.5); }
.button.big { font-size: 1.15rem; padding: 0.9rem 2rem; }
.button.disabled { opacity: 0.55; cursor: default; }
.button.disabled:hover { transform: none; }

/* ---- Method ---- */
.method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 1.25rem;
}
.method-grid > div {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.method-grid > div:hover { transform: translateY(-3px); border-color: #2a3247; }
.method-grid h3 {
  margin: 0 0 0.5rem;
  color: var(--green);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.method-grid p { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* ---- Volumes ---- */
.volumes { display: grid; gap: 1.5rem; }
.volume {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.75rem;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-top: 3px solid var(--vc, var(--blue));
  border-radius: var(--radius);
  padding: 1.5rem;
  align-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.volume:hover {
  transform: translateY(-3px);
  border-color: #2a3247;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.volume img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
}
.vol-number {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  color: var(--vc, var(--muted));
  margin: 0;
}
.start-badge {
  background: var(--green);
  color: #06281a;
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-left: 0.5rem;
  vertical-align: middle;
}
.outcome {
  font-family: var(--mono);
  color: var(--text);
  font-size: 0.85rem;
  border-left: 3px solid var(--vc, var(--green));
  padding-left: 0.7rem;
  margin: 0 0 1rem;
}
.volume h3 { margin: 0.1rem 0 0; font-size: 1.5rem; }
.tagline { color: var(--vc, var(--green)); margin: 0 0 0.2rem; }
.contents { font-family: var(--mono); color: var(--muted); font-size: 0.8rem; margin: 0 0 0.6rem; }
.volume ul { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--muted); font-size: 0.95rem; }
.volume li { margin-bottom: 0.3rem; }
@media (max-width: 640px) {
  .volume { grid-template-columns: 1fr; }
  .volume img { max-width: 230px; margin-inline: auto; }
}

/* ---- Bundle ---- */
.bundle { text-align: center; }
.bundle-panel {
  position: relative;
  border-radius: var(--radius);
  padding: 2.5rem 1.5rem;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    var(--grad) border-box;
  border: 1px solid transparent;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.deal { font-family: var(--mono); font-size: 2rem; margin-block: 0.4rem 1rem; }
.deal s { color: var(--muted); font-size: 1.3rem; margin-right: 0.4rem; }
.badge {
  background: var(--green);
  color: #06281a;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  vertical-align: middle;
  margin-left: 0.5rem;
}
.checklist {
  list-style: none;
  padding: 0;
  margin: 0 auto 1.8rem;
  max-width: 30rem;
  text-align: left;
  color: var(--muted);
}
.checklist li { padding-left: 1.6rem; position: relative; margin-bottom: 0.4rem; }
.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}

/* ---- FAQ ---- */
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  margin-bottom: 0.6rem;
  padding: 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 650;
  padding: 0.9rem 1.1rem;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 1.1rem;
  color: var(--green);
  font-weight: 700;
}
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0; padding: 0 1.1rem 1rem; color: var(--muted); }

/* ---- Author ---- */
.author-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  align-items: start;
}
.author-card h2 { text-align: left; font-size: 1.35rem; margin-block: 0 0.5rem; }
.author-card h2::after { margin-left: 0; width: 3rem; }
.author-card p { margin: 0 0 0.7rem; color: var(--muted); }
.avatar-photo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid transparent;
  background: linear-gradient(var(--panel), var(--panel)) padding-box,
              linear-gradient(135deg, var(--purple), var(--blue), var(--green)) border-box;
}
@media (max-width: 520px) {
  .author-card { grid-template-columns: 1fr; }
}

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 3rem 1.5rem;
  color: var(--muted);
  font-size: 0.92rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 1fr 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand .mark { width: 44px; height: 44px; }
.footer-name {
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  font-size: 0.9rem;
  margin: 0.6rem 0 0;
}
.footer-tag { font-family: var(--mono); margin: 0 0 0.8rem; font-size: 0.82rem; }
.footer-note { font-size: 0.82rem; margin: 0; max-width: 16rem; }
.site-footer h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text);
  margin: 0.3rem 0 0.8rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.45rem; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--text); }
.footer-note a, .footer-bottom a { text-decoration: underline; }
.footer-bottom {
  border-top: 1px solid var(--line);
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  text-align: center;
}
.footer-bottom p { margin: 0 0 0.35rem; }
.fb-imprint { font-size: 0.88rem; color: var(--text); }
.fb-imprint strong { letter-spacing: 0.06em; }
.fb-legal { font-family: var(--mono); font-size: 0.78rem; }
.fb-disclaimer { font-size: 0.78rem; color: var(--ink-faint, #5a6675); opacity: 0.85; }

/* ---- Stats (public) ---- */
.stats { min-height: 100vh; padding-top: 3rem; }
.stats h2 { margin-bottom: 1rem; }
.stats-intro {
  max-width: 44rem;
  margin: 0 auto 2.5rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
}
.stats-h-center { text-align: center; }
.stat-row { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 2.5rem; }
.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.6rem;
  text-align: center;
  min-width: 9rem;
}
.stat strong {
  display: block;
  font-family: var(--mono);
  font-size: 1.8rem;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat span { color: var(--muted); font-size: 0.85rem; }

/* The gradient runs once across the whole plot, not once per bar: thirty
   individual rainbows read as decoration, one gradient reads as one series.
   Each bar is a full-height column that paints panel-coloured "sky" over the
   gradient down to its own value, so the visible remainder is the bar. Full
   height also keeps the tooltip target usable — a two-view day is otherwise a
   2px sliver — and the side borders draw the gaps in the same colour. */
.chart {
  padding: 0.75rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.chart-plot { display: flex; height: 9rem; background: var(--grad); }
.chart .bar {
  flex: 1;
  border-inline: 1px solid var(--panel);
  background: linear-gradient(to bottom, var(--panel) calc(100% - max(var(--h), 2px)), transparent 0);
}
.chart-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0.5rem 0 0;
}

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 640px) { .stats-grid { grid-template-columns: 1fr; } }
.stats h3 {
  font-family: var(--mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--green);
  margin: 1.5rem 0 0.6rem;
}
.stats-list { list-style: none; padding: 0; margin: 0; color: var(--muted); }
.stats-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--line);
}
.stats-list li:last-child { border-bottom: 0; }
.stats-list span { overflow-wrap: anywhere; }
.stats-list b { font-family: var(--mono); font-weight: 500; color: var(--text); }
.stats-empty { color: var(--muted); margin: 0; }
.stats-figure {
  font-family: var(--mono);
  font-size: 1.6rem;
  color: var(--text);
  margin: 0;
}
.stats-stamp {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
  margin-top: 3rem;
}

/* ---- Accessibility ---- */
a:focus-visible, .button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- Privacy ---- */
.privacy { min-height: 70vh; }
.privacy h2 { text-align: left; }
.privacy h2::after { margin-left: 0; }
.privacy .eyebrow { text-align: left; }
.privacy ul { color: var(--muted); padding-left: 1.2rem; }
.privacy li { margin-bottom: 0.8rem; }

/* ---- Book pages ---- */
.book-hero { padding-block: 3rem 2rem; }
.book-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (max-width: 700px) { .book-grid { grid-template-columns: 1fr; text-align: center; }
  .book-cover img { max-width: 220px; margin-inline: auto; }
  .book-hero .outcome { text-align: left; } }
.book-cover img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55), 0 0 34px color-mix(in srgb, var(--vc) 30%, transparent);
}
.book-hero h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin: 0.1rem 0 0.2rem; }
.book-hero .tagline { font-size: 1.15rem; }
.book-blurb { color: var(--muted); max-width: 34rem; }
.book-hero .hero-actions { margin-block: 1.4rem 0.5rem; }

.toc h2 { margin-bottom: 1.5rem; }
.toc-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  columns: 1;
}
.toc-list li {
  display: flex;
  gap: 0.8rem;
  padding: 0.55rem 0.2rem;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.toc-list li span {
  font-family: var(--mono);
  color: var(--vc, var(--green));
  min-width: 1.8rem;
  text-align: right;
}
.toc-list .toc-extra { color: var(--muted); }
.toc-note { color: var(--muted); font-size: 0.92rem; max-width: 38rem; }
.toc .hero-actions { text-align: center; }

.book-nav { border-top: 1px solid var(--line); }
.book-nav-row { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.book-nav a { color: var(--muted); text-decoration: none; font-family: var(--mono); font-size: 0.85rem; }
.book-nav a:hover { color: var(--text); }


/* ---- Superteam landing ---- */
/* The home hero is a two-column layout, so .hero-copy is sized and aligned for
   the left column. This page has no second column, so centre the whole block
   rather than leaving the claim hanging left of the headline above it. */
.st-hero .hero-copy { max-width: 46rem; margin-inline: auto; text-align: center; }
.st-hero .claim { margin-inline: auto; }

.st-offer {
  margin-top: 1.6rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--rule, rgba(255,255,255,0.14));
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  max-width: 30rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.st-price { font-family: var(--mono); font-size: 2rem; margin: 0 0 0.3rem; }
.st-price s { color: var(--muted); font-size: 1.2rem; margin-right: 0.5rem; }
.st-note { margin: 0.5rem 0 1rem; font-size: 0.9rem; color: var(--muted); }
.st-offer .tax-note { margin: 0.8rem 0 0; }

.st-volumes { display: grid; gap: 1.2rem; margin-top: 1.4rem; }
@media (min-width: 720px) { .st-volumes { grid-template-columns: repeat(2, 1fr); } }
.st-volume {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem;
  border: 1px solid var(--rule, rgba(255,255,255,0.12));
  border-left: 3px solid var(--vc);
  border-radius: 8px;
}
.st-volume img { width: 84px; height: auto; border-radius: 3px; }
.st-volume h3 { margin: 0.1rem 0 0.3rem; font-size: 1.1rem; }
.st-volume .tagline { color: var(--vc); margin: 0 0 0.3rem; font-size: 0.92rem; }
.st-volume .contents { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); margin: 0 0 0.5rem; }

.st-close { margin-top: 2.4rem; text-align: center; }
.st-close .st-note { margin-top: 0.9rem; }

/* ---- Tax note under the price ---- */
/* The checkout adds VAT for EU/UK buyers, so $29 becomes $34.80 without
   warning. Cheaper to say so here than to lose the cart at the surprise. */
.tax-note {
  margin: -0.4rem 0 1.2rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
}

/* ---- Cover art links to the volume page ---- */
.cover-link { display: block; }
.cover-link img { transition: transform 0.18s ease, opacity 0.18s ease; }
.cover-link:hover img { transform: translateY(-2px); opacity: 0.92; }
.cover-link:focus-visible { outline: 2px solid var(--vc, var(--blue)); outline-offset: 3px; }

/* ---- Volumes not sold separately ---- */
/* Tokens, Token Extensions and Frontiers are written to build on what came
   before, so they ship inside the series rather than as standalone products.
   The card still needs to close on something, hence a note where the buy
   button used to sit. */
.in-series {
  margin: 0;
  padding: 0.55rem 0;
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--muted);
  border-top: 1px solid var(--rule, rgba(255,255,255,0.12));
}

/* Secondary route under the main series CTA: Basics on its own. */
.alt-buy {
  margin: 1.1rem 0 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--muted);
}
.alt-buy strong { color: inherit; }
.alt-buy a {
  color: var(--vc, var(--blue));
  text-decoration: none;
  white-space: nowrap;
}
.alt-buy a:hover { text-decoration: underline; }

.toc-link { margin: 0 0 1rem; font-size: 0.92rem; }
.toc-link a { color: var(--vc, var(--blue)); text-decoration: none; }
.toc-link a:hover { text-decoration: underline; }

/* ---- One-page preview ---- */
.page-preview figure { margin: 0; text-align: center; }
.page-preview img {
  width: 100%;
  max-width: 640px;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6), 0 0 40px color-mix(in srgb, var(--vc) 22%, transparent);
}
.page-preview figcaption {
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 1rem;
}

/* ---- Guides ---- */
.guide-hero { padding-block: 4rem 0.5rem; text-align: center; }
.guide-hero h1 { font-size: clamp(1.9rem, 5vw, 2.5rem); margin: 0 0 0.8rem; }
.guide-lead { color: var(--muted); font-size: 1.05rem; margin: 0; }
.guide-body { padding-block: 1.5rem 3.5rem; }
.guide-body h2 { text-align: left; font-size: 1.4rem; margin-block: 2.4rem 0.8rem; }
.guide-body pre {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  overflow-x: auto;
  font-size: 0.84rem;
  line-height: 1.55;
}
.guide-body code { font-family: var(--mono); }
.guide-body p code, .guide-body li code {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.08em 0.35em;
  font-size: 0.85em;
}
.guide-body ul { padding-left: 1.2rem; }
.guide-body li { margin-block: 0.5rem; }
.code-source { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); margin: -0.5rem 0 1.5rem; }
.guide-cta {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem 1.6rem;
  margin-top: 3rem;
  text-align: center;
}
.guide-cta p { margin: 0 0 1.2rem; }
.guide-cta .reassure { margin: 0.8rem 0 0; }