/* ===========================================================================
   Agent Playbooks - "Field Manual" art direction (light, editorial, book-first)
   Custom properties mirror /brand/tokens.json -> web.*
   No framework. No external requests. One stylesheet.
   =========================================================================== */

/* --- Fonts: self-hosted WOFF2 subsets, latin only, swap ------------------- */

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/jetbrains-mono-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Palette (brand/tokens.json -> web) */
  --paper: #fbfaf8;
  --paper-2: #f3f1ec;
  --surface: #ffffff;
  --ink: #16150f;
  --body: #3a3833;
  --muted: #6f6a61;
  --rule: #e4e0d8;
  --accent: #c2410c;
  --accent-hover: #9a3412;
  --accent-tint: #fdf2ec;
  --success: #15803d;
  --success-ink: #146b33;
  --success-tint: #eaf5ee;
  --danger: #a32020;
  --danger-tint: #fbeeee;
  --focus: #1d4ed8;

  /* Dark ink panels, mirrored from the PDF's code/callout treatment */
  --slab: #0f1420;
  --slab-fg: #e6e9ef;
  --slab-dim: #8a93a6;

  /* Type families */
  --font-display: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
  --font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale, 1.25 mobile / 1.333 desktop */
  --step--1: clamp(0.833rem, 0.82rem + 0.07vw, 0.875rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.18rem + 0.35vw, 1.5rem);
  --step-2: clamp(1.563rem, 1.42rem + 0.7vw, 2rem);
  --step-3: clamp(1.953rem, 1.66rem + 1.5vw, 3rem);
  --step-4: clamp(2.441rem, 1.9rem + 2.7vw, 4rem);

  /* Spacing: 4px base, 8px effective grid */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;

  --container: 1120px;
  --gutter: clamp(20px, 5vw, 32px);
  --measure: 68ch;

  --section-pad: clamp(64px, 10vw, 128px);
  --shadow-card: 0 1px 3px rgb(0 0 0 / 0.06);
  --shadow-cta: 0 1px 2px rgb(0 0 0 / 0.1), 0 8px 24px -8px rgb(194 65 12 / 0.4);
  --shadow-cta-hover: 0 2px 4px rgb(0 0 0 / 0.12), 0 14px 32px -10px rgb(194 65 12 / 0.5);
}

/* --- Reset / base --------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3,
h4 {
  color: var(--ink);
  margin: 0 0 var(--s-4);
  font-weight: 400;
  text-wrap: balance;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1.03;
  letter-spacing: -0.02em;
}

h2 {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.08;
  letter-spacing: -0.018em;
}

h3 {
  font-family: var(--font-ui);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h4 {
  font-family: var(--font-ui);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.35;
}

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

a {
  color: var(--accent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--accent-hover);
}

strong {
  font-weight: 600;
  color: var(--ink);
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

:is(p, li, td) > code {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 0.1em 0.34em;
  color: var(--ink);
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--s-7) 0;
}

/* Focus: visible everywhere, never removed. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: var(--s-3) var(--s-4);
  border-radius: 0 0 var(--r-md) 0;
}

.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Layout --------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-pad);
}

.section--tight {
  padding-block: clamp(48px, 7vw, 80px);
}

.section--band {
  background: var(--paper-2);
  border-block: 1px solid var(--rule);
  position: relative;
}

/* One texture, and only on the bands (Part C: never stack textures). */
.section--band::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}

.section--band > * {
  position: relative;
}

.prose {
  max-width: var(--measure);
}

.prose > :last-child {
  margin-bottom: 0;
}

.lead {
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--body);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s-3);
}

.section-head {
  max-width: var(--measure);
  margin-bottom: var(--s-7);
}

.section-head > :last-child {
  margin-bottom: 0;
}

.grid-2 {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}

.grid-3 {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Header --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 60px;
  padding-block: var(--s-2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}

.brand::before {
  content: '';
  width: 22px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.site-nav a {
  color: var(--body);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 500;
}

.site-nav a:hover {
  color: var(--accent);
}

@media (max-width: 719px) {
  .site-nav .nav-hide-sm {
    display: none;
  }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease,
    border-color 140ms ease;
}

.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-cta);
}

.btn--primary:hover {
  background: var(--accent-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-cta-hover);
}

.btn--primary:active {
  transform: translateY(0);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}

.btn--ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.btn--sm {
  min-height: 40px;
  padding: 0 16px;
  font-size: var(--step--1);
}

.btn[disabled],
.btn[aria-busy='true'] {
  opacity: 0.65;
  pointer-events: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
}

@media (max-width: 599px) {
  .btn {
    min-height: 56px;
  }
  .btn-row .btn {
    width: 100%;
  }
}

.cta-note {
  margin: var(--s-3) 0 0;
  font-size: var(--step--1);
  color: var(--muted);
  max-width: 46ch;
}

.cta-note--wide {
  max-width: 70ch;
}

.text-link {
  font-size: var(--step--1);
  font-weight: 500;
}

/* A single page render used as a figure, without the scrolling rail. */
.page-figure {
  margin: 0;
  max-width: 340px;
  margin-inline: auto;
}

.page-figure img {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

/* --- Form fields ---------------------------------------------------------- */

.field {
  width: 100%;
  max-width: 30rem;
  min-height: 52px;
  padding: 0 14px;
  font-family: var(--font-ui);
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}

.field::placeholder {
  color: var(--muted);
}

.field:focus-visible {
  border-color: var(--focus);
}

label {
  display: inline-block;
}

/* Form outcome notices.
   Hidden until the URL fragment names them, which is what the subscribe
   endpoint's 303 sets. Doing it with :target rather than script means the
   confirmation still appears with JavaScript disabled, on a page whose entire
   job is earning trust from a sceptical reader. */
.form-note {
  display: none;
  margin: var(--s-3) 0 0;
  padding: 12px 14px;
  font-size: var(--step--1);
  border-radius: var(--r-md);
  border-left: 3px solid var(--success);
  background: var(--success-tint);
  color: var(--success-ink);
}

.form-note--bad {
  border-left-color: var(--danger);
  background: var(--danger-tint);
  color: var(--danger);
}

.form-note:target {
  display: block;
}

/* The honeypot. Kept out of the layout and out of the accessibility tree
   without display:none, which some bots specifically check for. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Badges --------------------------------------------------------------- */

.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  background: var(--accent-tint);
  color: var(--accent-hover);
}

.badge--quiet {
  background: var(--paper-2);
  color: var(--muted);
  border: 1px solid var(--rule);
}

.badge--good {
  background: var(--success-tint);
  color: var(--success);
}

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

.hero {
  padding-block: clamp(40px, 7vw, 88px) clamp(48px, 8vw, 96px);
}

.hero__grid {
  display: grid;
  gap: var(--s-8);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--s-9);
  }
}

.hero h1 em {
  font-style: italic;
  position: relative;
  white-space: nowrap;
}

/* The one hand-drawn flourish on the page. */
.underline-mark {
  display: inline-block;
  position: relative;
}

.underline-mark::after {
  content: '';
  position: absolute;
  left: -1%;
  right: -1%;
  bottom: -0.14em;
  height: 0.16em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8.5C34 3.5 76 2.5 108 4.5c30 1.9 58 4.6 90 2' fill='none' stroke='%23C2410C' stroke-width='3.2' stroke-linecap='round'/></svg>")
    no-repeat center / 100% 100%;
}

.hero__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.price-figure {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--ink);
  line-height: 1;
}

.price-qualifier {
  font-size: var(--step--1);
  color: var(--muted);
}

.spec-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--muted);
}

.spec-strip li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.spec-strip li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* --- Book mockup (CSS perspective over a real page render) ---------------- */

.mockup {
  position: relative;
  max-width: 420px;
  margin-inline: auto;
  perspective: 1600px;
}

.mockup::before {
  content: '';
  position: absolute;
  inset: -18% -22%;
  background: radial-gradient(closest-side, var(--accent-tint), transparent 72%);
  z-index: 0;
}

.mockup__stage {
  position: relative;
  z-index: 1;
  transform-style: preserve-3d;
  transform: rotateY(-15deg) rotateX(3deg) rotateZ(-1.2deg);
}

.mockup__back {
  position: absolute;
  top: 3%;
  left: 26%;
  width: 78%;
  border: 1px solid var(--rule);
  border-radius: 3px;
  transform: translateZ(-38px) rotateZ(2.2deg);
  filter: drop-shadow(0 18px 26px rgb(0 0 0 / 0.14));
}

.mockup__front {
  position: relative;
  width: 100%;
  border-radius: 3px 5px 5px 3px;
  filter: drop-shadow(0 32px 48px rgb(0 0 0 / 0.18));
}

/* Spine highlight, so the cover reads as an object rather than a rectangle. */
.mockup__stage::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 14px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(
    to right,
    rgb(255 255 255 / 0.22),
    rgb(255 255 255 / 0) 55%,
    rgb(0 0 0 / 0.18)
  );
  pointer-events: none;
  z-index: 2;
}

.mockup--flat .mockup__stage {
  transform: none;
}

@media (max-width: 899px) {
  .mockup {
    max-width: 300px;
  }
}

/* --- Cards ---------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-card);
}

.card > :last-child {
  margin-bottom: 0;
}

.card h3 {
  margin-bottom: var(--s-3);
}

.card__label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s-3);
}

.card--link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color 140ms ease, transform 140ms ease;
}

.card--link:hover {
  border-color: var(--accent);
  color: inherit;
  transform: translateY(-2px);
}

/* --- Lists ---------------------------------------------------------------- */

.ticks {
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  display: grid;
  gap: var(--s-3);
}

.ticks li {
  position: relative;
  padding-left: 28px;
}

.ticks li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 12px;
  height: 6px;
  border-left: 2px solid var(--success);
  border-bottom: 2px solid var(--success);
  transform: rotate(-45deg) translateY(-1px);
}

.crosses {
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  display: grid;
  gap: var(--s-3);
}

.crosses li {
  position: relative;
  padding-left: 28px;
}

.crosses li::before {
  content: '\00d7';
  position: absolute;
  left: 4px;
  top: -0.05em;
  color: var(--danger);
  font-size: 1.25em;
  line-height: 1.4;
}

/* --- Table of contents ---------------------------------------------------- */

.toc {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.toc > li {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule);
}

.toc__no {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--muted);
  padding-top: 0.28em;
}

.toc__title {
  color: var(--ink);
  font-weight: 600;
  margin: 0 0 var(--s-1);
}

.toc__desc {
  margin: 0;
  font-size: var(--step--1);
  color: var(--muted);
}

/* --- Page-crop rail ------------------------------------------------------- */

.crops {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s-4);
  margin: 0;
  -webkit-overflow-scrolling: touch;
}

.crops figure {
  margin: 0;
  scroll-snap-align: start;
}

.crops img {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.crops figcaption {
  margin-top: var(--s-3);
  font-size: var(--step--1);
  color: var(--muted);
}

/* --- Slab (dark panel, echoes the PDF's code blocks) ---------------------- */

.slab {
  background: var(--slab);
  color: var(--slab-fg);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  overflow-x: auto;
}

.slab__label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slab-dim);
  margin: 0 0 var(--s-3);
}

.slab pre,
pre.slab {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.65;
  white-space: pre;
}

/* --- Prompt / weak-strong blocks (mirrors the PDF components) ------------- */

.prompt-box {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  margin: 0 0 var(--s-5);
}

.prompt-box__head {
  background: var(--slab);
  color: #fff;
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  align-items: baseline;
  justify-content: space-between;
}

.prompt-box__title {
  font-weight: 600;
  font-size: var(--step--1);
}

.prompt-box__tool {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e87a54;
}

.prompt-box__body {
  padding: var(--s-4);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--ink);
  white-space: pre-wrap;
  margin: 0;
}

.wk {
  border-left: 3px solid var(--danger);
  background: var(--danger-tint);
  padding: var(--s-4);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: 0 0 var(--s-4);
}

.st {
  border-left: 3px solid var(--success);
  background: var(--success-tint);
  padding: var(--s-4);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: 0 0 var(--s-4);
}

.wk__label,
.st__label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 var(--s-2);
}

.wk__label {
  color: var(--danger);
}

.st__label {
  color: var(--success-ink);
}

.wk p:last-child,
.st p:last-child {
  margin-bottom: 0;
}

.callout {
  border-left: 3px solid var(--accent);
  background: var(--accent-tint);
  padding: var(--s-4);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: 0 0 var(--s-5);
}

.callout__label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-hover);
  margin: 0 0 var(--s-2);
}

.callout > :last-child {
  margin-bottom: 0;
}

.pullquote {
  border-left: 3px solid var(--accent);
  padding-left: var(--s-5);
  margin: var(--s-7) 0;
  max-width: var(--measure);
}

.pullquote p {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.2;
  color: var(--ink);
  font-style: italic;
  margin: 0;
}

/* --- Tables --------------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  margin: 0 0 var(--s-5);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--step--1);
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
}

th {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* --- Pricing -------------------------------------------------------------- */

.pricing {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) {
  .pricing {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tier {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tier--featured {
  border: 2px solid var(--accent);
  padding: calc(var(--s-5) - 1px);
}

.tier__flag {
  position: absolute;
  top: -13px;
  left: var(--s-5);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--r-sm);
}

.tier__name {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s-3);
}

.tier__price {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
  color: var(--ink);
  margin: 0 0 var(--s-2);
}

.tier__unit {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--muted);
  letter-spacing: 0;
}

.tier__desc {
  font-size: var(--step--1);
  color: var(--muted);
  margin: 0 0 var(--s-5);
}

.tier .ticks {
  font-size: var(--step--1);
  flex: 1 1 auto;
}

.tier .btn {
  width: 100%;
}

/* --- Guarantee ------------------------------------------------------------ */

.guarantee {
  display: grid;
  gap: var(--s-5);
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(24px, 4vw, 40px);
}

@media (min-width: 720px) {
  .guarantee {
    grid-template-columns: 84px 1fr;
    gap: var(--s-6);
  }
}

.guarantee__seal {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  color: var(--accent-hover);
  display: grid;
  place-content: center;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.35;
  background: var(--accent-tint);
  flex: none;
}

.guarantee__seal b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}

/* --- FAQ (native details) ------------------------------------------------- */

.faq {
  max-width: var(--measure);
  border-top: 1px solid var(--rule);
}

.faq details {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  cursor: pointer;
  padding: var(--s-4) 36px var(--s-4) 0;
  position: relative;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 140ms ease;
}

.faq details[open] summary::after {
  transform: translateY(-25%) rotate(-135deg);
}

.faq details > :not(summary) {
  margin-bottom: var(--s-4);
}

/* --- Author --------------------------------------------------------------- */

.author {
  display: grid;
  gap: var(--s-5);
  align-items: start;
}

@media (min-width: 720px) {
  .author {
    grid-template-columns: 96px 1fr;
    gap: var(--s-6);
  }
}

.author__mark {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--slab);
  color: #fff;
  display: grid;
  place-content: center;
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1;
}

/* --- Sticky mobile buy bar ------------------------------------------------ */

.buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--gutter);
  padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--rule);
  transform: translateY(110%);
  transition: transform 180ms ease;
}

.buybar[data-visible='true'] {
  transform: translateY(0);
}

.buybar__price {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--ink);
  line-height: 1.1;
}

.buybar__price small {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--muted);
}

.buybar .btn {
  margin-left: auto;
  flex: 0 1 auto;
  min-height: 48px;
  padding: 0 20px;
}

@media (min-width: 900px) {
  .buybar {
    display: none;
  }
}

/* Keep the sticky bar from covering the last section on small screens. */
@media (max-width: 899px) {
  body:has(.buybar) {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}

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

.site-footer {
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  padding-block: var(--s-8) var(--s-7);
  font-size: var(--step--1);
  color: var(--muted);
}

.site-footer h2 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--s-3);
}

.footer-grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
  margin-bottom: var(--s-7);
}

@media (min-width: 720px) {
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}

.site-footer a {
  color: var(--body);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.legal-note {
  border-top: 1px solid var(--rule);
  padding-top: var(--s-5);
  max-width: 90ch;
}

.legal-note p {
  margin-bottom: var(--s-3);
}

/* --- Long-form document pages (legal, sample chapter) --------------------- */

.doc {
  max-width: var(--measure);
  margin-inline: auto;
}

.doc h2 {
  margin-top: var(--s-8);
  font-size: var(--step-2);
}

.doc h3 {
  margin-top: var(--s-6);
}

.doc ul,
.doc ol {
  margin: 0 0 var(--s-4);
  padding-left: 1.35em;
  display: grid;
  gap: var(--s-2);
}

.doc .meta {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--muted);
}

.doc figure {
  margin: var(--s-6) 0;
}

.doc figcaption {
  font-size: var(--step--1);
  color: var(--muted);
  margin-top: var(--s-3);
}

/* --- Status / success page ------------------------------------------------ */

.status {
  max-width: 640px;
  margin-inline: auto;
}

.status__box {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--shadow-card);
}

.download-item {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--rule);
}

.download-item:last-of-type {
  border-bottom: 0;
}

.download-item h3 {
  margin: 0;
}

.download-meta {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--muted);
  margin: 0;
}

.notice {
  border-left: 3px solid var(--accent);
  background: var(--accent-tint);
  padding: var(--s-4);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: 0 0 var(--s-5);
}

.notice--error {
  border-left-color: var(--danger);
  background: var(--danger-tint);
}

.notice > :last-child {
  margin-bottom: 0;
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 50%;
  display: inline-block;
  vertical-align: -3px;
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

[hidden] {
  display: none !important;
}

/* --- Motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .mockup__stage {
    transform: none;
  }
  .mockup__back {
    transform: translateX(-6%) rotateZ(2deg);
  }
  .buybar {
    transition: none;
  }
}

/* --- Print ---------------------------------------------------------------- */

@media print {
  .site-header,
  .buybar,
  .site-footer {
    display: none;
  }
}

/* --- Offer-page components (2026-07 funnel rebuild) ------------------------ */

/* Two-option pricing: single guide plus bundle. The team tier moves to a
   text line under the grid, because a third card diluted the one decision
   the page exists to get made. */
@media (min-width: 900px) {
  .pricing--two {
    grid-template-columns: repeat(2, 1fr);
    max-width: 56rem;
  }
}

/* What's in the box. Itemises the deliverable as named components, because
   "104-page PDF" undersells the prompt library, the reference appendix and
   the failure-mode index that a buyer would otherwise discover after paying. */
.stack {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.stack__row {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--rule);
}

.stack__row:last-child {
  border-bottom: 0;
}

.stack__name {
  margin: 0;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  align-items: baseline;
}

.stack__tag {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--muted);
}

.stack__desc {
  margin: 0;
  color: var(--body);
}

@media (min-width: 720px) {
  .stack__row {
    grid-template-columns: minmax(200px, 0.8fr) 1.4fr;
    align-items: baseline;
    gap: var(--s-5);
  }
}

/* The honest comparison: free docs, cohort courses, prompt dumps, us.
   Figures trace to research/dossier-market-and-conversion.md and the pricing
   comment in brand/tokens.json. */
.compare-wrap {
  overflow-x: auto;
}

.compare {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  font-size: var(--step--1);
}

.compare tbody tr:last-child td {
  border-bottom: 0;
}

.compare td:first-child {
  font-weight: 600;
  color: var(--ink);
  min-width: 9rem;
}

.compare tr.compare__us td {
  background: var(--accent-tint);
}

.compare tr.compare__us td:first-child {
  color: var(--accent-hover);
}

/* Order bump. The dashed box is the pattern cold traffic has learned to read
   as "optional add-on at the point of decision", and the label restates the
   total so the button swap in app.js can never surprise anyone. */
.bump {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  border: 2px dashed var(--accent);
  background: var(--accent-tint);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin: var(--s-4) 0;
}

.bump input[type='checkbox'] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--accent);
  cursor: pointer;
}

.bump label {
  font-weight: 600;
  cursor: pointer;
  display: block;
}

.bump small {
  display: block;
  font-weight: 400;
  color: var(--body);
  margin-top: var(--s-1);
}

/* Post-purchase "complete the set" offer on success.html. Hidden in markup
   until app.js confirms the order is a single playbook. */
.oto {
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  margin: var(--s-6) 0;
  box-shadow: var(--shadow-card);
}

.oto__label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-hover);
  margin: 0 0 var(--s-3);
}

.oto h2 {
  margin: 0 0 var(--s-3);
}

.oto p {
  max-width: var(--measure);
}

/* The five-day course capture on the offer pages. */
.capture {
  display: grid;
  gap: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-card);
}

@media (min-width: 900px) {
  .capture {
    grid-template-columns: 1.1fr 1fr;
    align-items: start;
  }
}

.capture > div > :last-child,
.capture > form > :last-child {
  margin-bottom: 0;
}

.capture__days {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}

.capture__days li {
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  font-size: var(--step--1);
  color: var(--body);
}

.capture__days b {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

/* The comparison table, restacked for phones. A four-column table with a long
   "catch" column is unreadable at handset width, so each row becomes a card:
   the option name is the card title, and the remaining cells pick up mono
   labels from their column position. Column order is fixed in both pages'
   markup, which is what makes the nth-child labels safe. */
@media (max-width: 719px) {
  .compare-wrap {
    overflow-x: visible;
  }

  .compare,
  .compare tbody,
  .compare tr,
  .compare td {
    display: block;
  }

  .compare {
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .compare thead {
    display: none;
  }

  .compare tr {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    padding: var(--s-4) var(--s-5);
    margin-bottom: var(--s-4);
  }

  .compare tr.compare__us {
    background: var(--accent-tint);
    border: 2px solid var(--accent);
    padding: calc(var(--s-4) - 1px) calc(var(--s-5) - 1px);
  }

  .compare tr.compare__us td {
    background: transparent;
  }

  .compare td {
    border-bottom: 0;
    padding: var(--s-1) 0;
  }

  .compare td:first-child {
    min-width: 0;
    font-size: var(--step-1);
    margin-bottom: var(--s-2);
  }

  .compare td:nth-child(n + 2)::before {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: var(--s-3);
    margin-bottom: var(--s-1);
  }

  .compare td:nth-child(2)::before {
    content: "Cost";
  }

  .compare td:nth-child(3)::before {
    content: "Time to useful";
  }

  .compare td:nth-child(4)::before {
    content: "The catch";
  }

  .compare tr.compare__us td:nth-child(n + 2)::before {
    color: var(--accent-hover);
  }
}