/* Cantera design system.

   The page is set like a printed technical manual rather than a web product:
   one text column left of centre, a margin rail carrying section numbers, rules
   doing the structural work, and three typefaces with three separate jobs.

     Archivo         display, headings, buttons. A gothic drawn from wood type
                     and newspaper models, so headings read as document rather
                     than app interface.
     Source Serif 4  all running prose. Drawn for long reading on screen.
     IBM Plex Mono   furniture only: section numbers, labels, folios, figures,
                     the price. Never prose.

   Mobile first: every base rule is the phone layout, and the min-width blocks
   scale it up. Palette matches the two PDFs so the site, the free guide and the
   Playbook read as one object.

   Motion budget is close to zero on purpose. The served state is the finished
   state. Nothing fades in on scroll. */

:root {
  --paper: #f5efe2;
  --paper-deep: #ede5d2;
  --card: #fffdf8;
  --ink: #191511;
  --ink-2: #241e17;
  --ink-soft: #40382c;
  --clay: #9e3b24;
  --clay-deep: #7d2f1c;
  --clay-soft: #d98d5f;
  /* Darkened from #7c7466, which only reached 4.03:1 on paper and failed WCAG AA.
     This is used for small mono furniture (folios, captions, form notes), so it
     has to clear 4.5:1 on both --paper and the darker --paper-deep band. */
  --stone: #6b6455;
  --rule: #d9d0bc;
  --pitch: #3a5a40;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --text: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Three deliberate spacing tiers. A section picks one; it does not default.
     Reference material is tight, the argument beats are open. */
  --space-tight: 40px;
  --space-base: 62px;
  --space-open: 88px;

  --gap: 20px;
  --shell: 1120px;
  --measure: 62ch;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* Paper tooth. Two co-prime dot pitches so no visible moire, drawn once as a
   fixed overlay with no image request. Multiply keeps it under the ink. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.5;
  background-image:
    radial-gradient(rgba(120, 104, 78, 0.09) 0.5px, transparent 0.5px),
    radial-gradient(rgba(120, 104, 78, 0.06) 0.5px, transparent 0.5px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 4px;
}

body > * { position: relative; z-index: 1; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.014em;
}

a { color: var(--clay); text-decoration: none; }

/* Underline drawn as a gradient so it sits below the baseline and can move
   without shifting layout. The only hover transition on the site. */
main a:not(.btn):not(.nav-cta) {
  background-image: linear-gradient(var(--clay), var(--clay));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 1px;
  transition: background-size 140ms ease;
}

main a:not(.btn):not(.nav-cta):hover { background-size: 100% 2px; }

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

.wrap { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gap); }
.narrow { max-width: 720px; }

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

/* Furniture. Mono, tracked, small. Used sparingly: at most two per page. */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 500;
}

.lede { font-size: 1.14rem; color: var(--ink-soft); }
.muted { color: var(--stone); }
.center { text-align: center; }

/* Type scale. Fluid, so it never needs a breakpoint of its own. Archivo carries
   a visible left sidebearing at display size, so the hero is pulled back
   optically to sit flush with the body stem below it. */
.h-hero { font-size: clamp(2.15rem, 7.6vw, 4.6rem); letter-spacing: -0.026em; line-height: 1.02; margin-left: -0.035em; }
.h-1    { font-size: clamp(1.95rem, 6.6vw, 3.1rem); letter-spacing: -0.02em; }
.h-2    { font-size: clamp(1.45rem, 5vw, 2.05rem); letter-spacing: -0.014em; }
.h-3    { font-size: clamp(1.12rem, 3.8vw, 1.32rem); letter-spacing: -0.008em; }

section { padding: var(--space-base) 0; }
.section-tight { padding: var(--space-tight) 0; }
.section-open { padding: var(--space-open) 0; }

/* A section number sitting on the rule that opens the section. This is the
   piece of editorial furniture that carries the whole document idea. */
.folio {
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-top: 1.5px solid var(--ink);
  padding-top: 12px;
  margin-bottom: 26px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
}

.folio b { color: var(--clay); font-weight: 500; }
.band-ink .folio { border-top-color: var(--clay-soft); color: #9e9382; }
.band-ink .folio b { color: var(--clay-soft); }

/* --------------------------------------------------------------- buttons */

.btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 16px 26px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: background 140ms ease;
}

.btn-clay { background: var(--clay); color: var(--paper); }
.btn-clay:hover { background: var(--clay-deep); color: var(--paper); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--ink-2); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

.btn-row { display: grid; gap: 12px; }

.btn-note { font-size: 0.86rem; color: var(--stone); margin-top: 12px; }

/* ------------------------------------------------------------------- nav */

/* Solid, not frosted. A translucent blurred bar is a product-UI signal and
   this is meant to read as printed matter. */
nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 12px var(--gap);
}

.wordmark {
  font-family: var(--display);
  font-size: 1.02rem;
  letter-spacing: 0.3em;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.wordmark i { font-style: normal; color: var(--clay); }

.nav-links { display: none; }

.nav-cta {
  background: var(--clay);
  color: var(--paper);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 10px 16px;
  white-space: nowrap;
  transition: background 140ms ease;
}

.nav-cta:hover { background: var(--clay-deep); color: var(--paper); }

/* ----------------------------------------------------------------- hero */

.hero {
  background: var(--ink);
  color: var(--paper);
  padding: 34px 0 40px;
  position: relative;
  overflow: hidden;
}

/* Flat ink, no gradient. A radial glow behind a headline is decoration standing
   in for art direction; a plain dark field is what a book cover does. Set
   class="has-photo" and --hero-photo when the photograph exists. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  z-index: 0;
}

.hero.has-photo::before {
  background:
    linear-gradient(180deg, rgba(25, 21, 17, 0.72) 0%, rgba(25, 21, 17, 0.94) 82%),
    var(--hero-photo, none) center/cover no-repeat;
}

.hero .wrap { position: relative; z-index: 1; }
.hero h1 { color: var(--paper); margin: 14px 0 16px; }
.hero .eyebrow { color: var(--clay-soft); }

.hero p.lede { color: #ded4c2; font-size: 1.05rem; max-width: 38ch; }

/* On a phone the offer comes before the argument, so the opt-in card is
   reachable without scrolling. Restored to reading order from 600px up. */
.hero .wrap { display: flex; flex-direction: column; }
.hero .eyebrow { order: 0 }
.hero h1 { order: 1 }
.hero p.lede { order: 2 }
.optin { order: 3; }

/* ------------------------------------------------------------ opt-in box */

.optin {
  background: var(--card);
  width: 100%;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--clay);
  padding: 22px 18px;
  margin-top: 30px;
  box-shadow: 0 18px 50px rgba(25, 21, 17, 0.28);
}

.optin h2 { font-size: 1.3rem; margin-bottom: 8px; color: var(--ink); }
.optin p { font-size: 0.98rem; color: var(--ink-soft); margin-bottom: 16px; }

.optin form { display: grid; gap: 10px; }

.optin input[type="email"] {
  width: 100%;
  padding: 15px;
  font-family: var(--text);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--rule);
}

.optin input[type="email"]:focus { outline: none; border-color: var(--clay); background: #fff; }
.optin .fine { font-size: 0.84rem; color: var(--stone); margin: 0; }

/* ----------------------------------------------------------------- cards */

.grid { display: grid; gap: 16px; }

.card { background: var(--card); border: 1px solid var(--rule); padding: 24px 20px; }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 0.98rem; color: var(--ink-soft); }

/* A large clay numeral in the left column, used on the module list. */
.card-num {
  font-family: var(--mono);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--clay);
  line-height: 1;
  margin-bottom: 12px;
  display: block;
}

/* Module list on the sales page. Label column left, description right, hairline
   rules between. This layout was already the strongest thing on the page. */
.module {
  border-top: 1px solid var(--rule);
  padding: 22px 0;
  display: grid;
  gap: 6px;
}

.module:last-child { border-bottom: 1px solid var(--rule); }

.module .tag {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 500;
}

.module h3 { font-size: 1.18rem; }
.module p { font-size: 0.98rem; color: var(--ink-soft); }

/* Key phrases set as a real list, not a middle-dot-joined string. */
.keys { list-style: none; margin-top: 12px; display: grid; gap: 3px; }

.keys li {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.01em;
  color: var(--pitch);
  padding-left: 15px;
  position: relative;
}

.keys li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--stone);
}

/* ------------------------------------------------------------ dark bands */

.band-ink { background: var(--ink); color: var(--paper); }
.band-ink h2, .band-ink h3 { color: var(--paper); }
.band-ink p { color: #ded4c2; }
.band-ink .eyebrow { color: var(--clay-soft); }
.band-deep { background: var(--paper-deep); }

/* --------------------------------------------------------------- reviews */

.review { background: var(--card); border: 1px solid var(--rule); padding: 22px 20px; }
.review .stars { color: var(--clay); letter-spacing: 0.12em; margin-bottom: 10px; }
.review p { font-style: italic; color: var(--ink-soft); }
.review footer { margin-top: 12px; font-size: 0.86rem; color: var(--stone); }

.review-empty {
  border: 1px dashed var(--rule);
  padding: 26px 20px;
  color: var(--stone);
  font-size: 0.94rem;
}

/* ------------------------------------------------------------------ misc */

/* The edition block: price, extent, edition. Set off square by a fraction of a
   degree, the way a plate gets tipped in by hand. This is the ONLY rotated
   object on the site, and the only deliberate imperfection. */
.edition {
  display: inline-block;
  transform: rotate(-0.6deg);
  transform-origin: left center;
  border: 1.5px solid currentColor;
  padding: 18px 22px 16px;
}

.price {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.9rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.price small {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
}

details { border-top: 1px solid var(--rule); padding: 16px 0; }
details:last-of-type { border-bottom: 1px solid var(--rule); }

summary {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.04rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--clay); font-family: var(--mono); }
details[open] summary::after { content: "\2013"; }
details p { margin-top: 10px; font-size: 0.98rem; color: var(--ink-soft); }

figure.portrait { border: 1px solid var(--rule); background: var(--paper-deep); }
figure.portrait img { width: 100%; }

figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--stone);
  margin-top: 10px;
}

/* Hanging punctuation so the opening quote sits outside the measure. */
blockquote.pull {
  border-left: 2px solid var(--clay);
  padding-left: 20px;
  margin: 30px 0;
  font-family: var(--text);
  font-style: italic;
  font-size: 1.22rem;
  line-height: 1.44;
  color: var(--ink);
  text-indent: -0.42em;
}

hr.rule { border: none; border-top: 1px solid var(--rule); margin: 40px 0; }

footer.site {
  background: var(--ink);
  color: #9e9382;
  padding: 44px 0 34px;
  font-size: 0.9rem;
}

footer.site a { color: #ded4c2; }
footer.site .wordmark { color: var(--paper); font-size: 0.95rem; }
.foot-links { display: grid; gap: 2px; margin: 18px 0; }
.foot-links a { display: block; padding: 11px 0; }

/* ------------------------------------------------------------------ a11y */

/* .rv is retained because the markup and the observer script both reference it,
   but it is now inert: the served state is the finished state. Nothing on this
   site animates on scroll. */
.rv, .rv-d1, .rv-d2 { opacity: 1; transform: none; }

:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }

.skip {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  z-index: 100;
}

.skip:focus { left: 12px; top: 12px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .edition { transform: none; }
}

/* ---------------------------------------------------------- wider screens */

@media (min-width: 600px) {
  :root { --gap: 28px; --space-tight: 52px; --space-base: 84px; --space-open: 116px; }
  body { font-size: 18.5px; }
  .btn { display: inline-block; width: auto; }
  .btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
  .optin form { grid-template-columns: 1fr auto; align-items: start; }
  .optin { padding: 30px 28px; }
  .hero { padding: 76px 0 64px; }
  .hero p.lede { font-size: 1.18rem; max-width: 46ch; }
  .foot-links { grid-auto-flow: column; justify-content: start; gap: 26px; }
  .foot-links a { padding: 6px 0; }
}

@media (min-width: 900px) {
  :root { --gap: 32px; --space-tight: 60px; --space-base: 104px; --space-open: 148px; }
  .nav-links { display: flex; gap: 26px; align-items: center; font-size: 0.9rem; font-family: var(--display); }
  .nav-links a { color: var(--ink-soft); }
  .nav-links a:hover { color: var(--clay); }
  .wordmark { font-size: 1.16rem; letter-spacing: 0.34em; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid { gap: 22px; }
  .card { padding: 30px 26px; }
  .hero { padding: 104px 0 88px; }

  /* A ratio a reader can feel, rather than 1.05fr / 0.95fr asymmetry theatre.
     7/5 gives the cover real presence against the copy. */
  .split { display: grid; grid-template-columns: 7fr 5fr; gap: 60px; align-items: start; }
  .split-narrow { grid-template-columns: 5fr 7fr; gap: 52px; }

  /* Label column left, description right. The key phrases drop into the left
     column beneath the module name, which fills the rail that would otherwise
     sit empty and keeps the description one clean block. */
  /* Label column left, description right. The key phrases drop into the left
     column beneath the module name, which fills the rail that would otherwise
     sit empty and keeps the description one clean block.

     Rows are sized auto/auto/1fr so the label and name hug the top and any
     slack from the taller description column collects in the last row, rather
     than being shared out and pushing the name into the middle of nowhere. */
  .module {
    grid-template-columns: 210px 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 0 36px;
    padding: 26px 0;
  }
  .module .tag { grid-column: 1; grid-row: 1; align-self: start; }
  .module h3 { grid-column: 1; grid-row: 2; align-self: start; margin-top: 8px; }
  .module .keys { grid-column: 1; grid-row: 3; align-self: start; margin-top: 14px; }
  .module p { grid-column: 2; grid-row: 1 / -1; align-self: start; }

  .price { font-size: 3.6rem; }
}

/* ============================================================ sneak peek */

/* Stacked document spreads, built from divs so there is no image dependency.
   Three sheets offset behind each other, the front one carrying a ruled
   "page" so it reads as a spread rather than a blank card. */
.spreads { position: relative; padding: 8px 0 18px 8px; }

.sheet {
  background: var(--card);
  border: 1px solid var(--rule);
  box-shadow: 0 14px 34px rgba(25, 21, 17, 0.13);
  aspect-ratio: 4 / 5;
}

.sheet-back {
  position: absolute;
  inset: 0 auto auto 0;
  width: 88%;
  transform: rotate(-2.4deg) translate(-8px, 8px);
  opacity: 0.55;
}

.sheet-mid {
  position: absolute;
  inset: 0 auto auto 0;
  width: 94%;
  transform: rotate(-1.1deg) translate(-3px, 4px);
  opacity: 0.8;
}

.sheet-front { position: relative; padding: 20px 18px; display: grid; gap: 12px; align-content: start; }
.sheet-front .sheet-label { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--clay); }
.sheet-front .sheet-title { font-family: var(--display); font-weight: 600; font-size: 1.02rem; line-height: 1.15; }

/* Ruled lines standing in for body copy. */
.sheet-lines { display: grid; gap: 7px; margin-top: 2px; }
.sheet-lines span { display: block; height: 6px; background: var(--paper-deep); }
.sheet-lines span:nth-child(3n) { width: 72%; }
.sheet-lines span:nth-child(5n) { width: 88%; }

.sheet-figure { margin-top: 4px; border: 1px solid var(--rule); background: var(--paper); aspect-ratio: 16 / 9; display: grid; place-items: center; }
.sheet-figure span { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); }

/* Numbered value list beside the spreads. */
.inside { list-style: none; display: grid; gap: 0; }
.inside li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0 14px; padding: 15px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.inside li:last-child { border-bottom: 1px solid var(--rule); }
.inside b { font-family: var(--mono); font-weight: 400; font-size: 0.78rem; color: var(--clay); letter-spacing: 0.06em; }
.inside span { font-size: 1rem; color: var(--ink); }

.extent-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  padding: 9px 13px;
  margin-bottom: 16px;
}

/* ========================================================== testimonials */

.reviews-grid { display: grid; gap: 16px; }

.review .verified {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--pitch);
  margin-bottom: 12px;
}

.review .verified svg { width: 14px; height: 14px; flex: none; }
.review .stars { color: var(--clay); letter-spacing: 0.14em; font-size: 0.95rem; margin-bottom: 10px; }
.review .stars i { font-style: normal; color: var(--rule); }
.review p { font-style: normal; font-size: 1rem; color: var(--ink); }
.review footer { margin-top: 14px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--stone); }

/* ============================================================ sticky bar */

/* Shown and hidden with the hidden attribute rather than a transform, so there
   is nothing to animate and nothing that depends on a percentage translate
   resolving correctly. It also suits a page whose motion budget is near zero. */
.buybar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(25, 21, 17, 0.96);
  border-top: 1px solid var(--clay);
  padding: 9px var(--gap) calc(9px + env(safe-area-inset-bottom, 0px));
}

.buybar[hidden] { display: none; }

@supports (backdrop-filter: blur(8px)) {
  .buybar { background: rgba(25, 21, 17, 0.82); backdrop-filter: blur(8px); }
}

.buybar-inner { max-width: var(--shell); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.buybar-label { display: none; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.05em; color: #ded4c2; }
.buybar-actions { display: flex; align-items: stretch; gap: 8px; width: 100%; }

/* Both labels stay on one line. The paid CTA takes the remaining width so it
   reads as the dominant action without the secondary one shrinking to nothing. */
.buybar .btn { width: auto; padding: 12px 14px; font-size: 0.86rem; white-space: nowrap; }
.buybar .btn-ghost { flex: 0 0 auto; }
.buybar .btn-clay { flex: 1 1 auto; }

/* Keep the last section clear of the bar. */
body.has-buybar footer.site { padding-bottom: 96px; }

@media (min-width: 600px) {
  .buybar-label { display: block; }
  .buybar-actions { width: auto; }
  .buybar .btn { flex: none; }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .inside li { grid-template-columns: 3rem 1fr; }
}

@media (min-width: 900px) {
  .reviews-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .sheet-front { padding: 26px 24px; }
  body.has-buybar footer.site { padding-bottom: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet-back, .sheet-mid { transform: none; opacity: 0.5; }
}

/* ========================================================== value anchor */

.compare { display: grid; gap: 16px; }

.opt {
  border: 1px solid var(--rule);
  background: var(--card);
  padding: 24px 22px;
  display: grid;
  align-content: start;
  gap: 14px;
}

.opt-head { display: grid; gap: 6px; }
.opt-kind { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); }
.opt h3 { font-size: 1.14rem; }
.opt-cost { font-family: var(--mono); font-size: 0.82rem; color: var(--ink-soft); }

.opt ul { list-style: none; display: grid; gap: 9px; }
.opt li { position: relative; padding-left: 22px; font-size: 0.95rem; color: var(--ink-soft); }
.opt li::before { position: absolute; left: 0; top: -1px; font-family: var(--mono); font-size: 0.9rem; }
.opt li.yes::before { content: "+"; color: var(--pitch); }
.opt li.no::before  { content: "\2212"; color: var(--clay); }

/* The recommended column: ink field, clay rule, and a tag on the top edge. */
.opt-lead { background: var(--ink); border-color: var(--ink); position: relative; }
.opt-lead h3, .opt-lead .opt-cost { color: var(--paper); }
.opt-lead .opt-kind { color: var(--clay-soft); }
.opt-lead li { color: #ded4c2; }
.opt-lead li.yes::before { color: var(--clay-soft); }
.opt-lead::before {
  content: "The architecture";
  position: absolute;
  top: 0; left: 22px;
  transform: translateY(-50%);
  background: var(--clay);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 10px;
}

.anchor-note {
  border-top: 1.5px solid var(--ink);
  margin-top: 26px;
  padding-top: 18px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.05rem, 3.4vw, 1.35rem);
  line-height: 1.28;
  max-width: 44ch;
}

/* ======================================================== module deep dive */

.mod-grid { display: grid; gap: 14px; }

.mod {
  background: var(--ink);
  border: 1px solid #3a332a;
  padding: 22px 20px;
  display: grid;
  align-content: start;
  gap: 12px;
}

.mod-n { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--clay-soft); }
.mod h3 { font-size: 1.1rem; color: var(--paper); }
.mod ul { list-style: none; display: grid; gap: 8px; }
.mod li { position: relative; padding-left: 16px; font-size: 0.92rem; color: #ded4c2; line-height: 1.5; }
.mod li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 1px; background: var(--clay-soft); }

@media (min-width: 600px) {
  .compare { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .compare .opt-lead { grid-column: 1 / -1; }
  .mod-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (min-width: 900px) {
  .compare { grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
  .compare .opt-lead { grid-column: auto; }
  .opt { padding: 30px 26px; }
  .mod-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .mod { padding: 26px 24px; }
}

/* The derivation under each price. Showing the arithmetic is what makes a
   comparison survive a sceptical parent checking it. */
.opt-basis { font-size: 0.86rem; color: var(--stone); line-height: 1.45; margin-top: 2px; }
.opt-cost b { font-family: var(--display); font-weight: 700; font-size: 1.06rem; letter-spacing: -0.01em; }
.opt-lead .opt-basis { color: #a89c88; }

.anchor-basis {
  font-size: 0.86rem;
  color: var(--stone);
  margin-top: 14px;
  max-width: 58ch;
}

/* ======================================================== the download stack */

.stack { display: grid; gap: 10px; }

.stack-item {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0 14px;
  align-items: start;
  border: 1px solid var(--rule);
  background: var(--card);
  padding: 16px 18px;
}

.stack-item b { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--clay); padding-top: 2px; }
.stack-item h4 { font-family: var(--display); font-weight: 600; font-size: 1rem; letter-spacing: -0.008em; }
.stack-item p { font-size: 0.92rem; color: var(--ink-soft); margin-top: 3px; max-width: none; }

/* The book itself sits on the ink field so the sheets read as what comes with it. */
.stack-item.stack-main { background: var(--ink); border-color: var(--ink); }
.stack-item.stack-main h4 { color: var(--paper); }
.stack-item.stack-main p { color: #ded4c2; }
.stack-item.stack-main b { color: var(--clay-soft); }

.stack-note {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--stone);
  margin-top: 16px;
}

@media (min-width: 900px) {
  .stack-item { grid-template-columns: 3rem 1fr; padding: 20px 24px; }
}

/* ====================================================== language toggle */

.langtog {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  padding: 6px 9px;
  margin-left: auto;
  margin-right: 12px;
  white-space: nowrap;
  transition: border-color 140ms ease, color 140ms ease;
}

.langtog:hover { border-color: var(--clay); color: var(--clay); }
.langtog:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }

/* On a phone the wordmark, the toggle and the CTA have to share one line, so the
   toggle loses its margin and sits tight against the CTA. */
@media (max-width: 599px) {
  .langtog { margin-left: 0; margin-right: 8px; padding: 6px 7px; font-size: 0.68rem; }
  .nav-inner { gap: 8px; }
}