/* Design tokens, derived from the cinematic-gold covers: near-black teal-tinted ground, warm gold accent. */

/* Brand faces, self-hosted (BRAND 5.3, amended 2026-10-10): the Guides' own Montserrat and Crimson Pro,
   subset to Latin as variable WOFF2 in static/fonts/ (sources and hashes in its README). Nothing is
   ever requested from a third-party host. The fallback faces carry the web fonts' vertical metrics so
   the swap does not shift the page. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/montserrat-latin.woff2) format('woff2');
}

@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(/fonts/crimson-pro-latin.woff2) format('woff2');
}

@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url(/fonts/crimson-pro-italic-latin.woff2) format('woff2');
}

@font-face {
  font-family: 'Montserrat Fallback';
  src: local('Helvetica Neue'), local('Arial');
  ascent-override: 96.8%;
  descent-override: 25.1%;
  line-gap-override: 0%;
  size-adjust: 107%;
}

@font-face {
  font-family: 'Crimson Pro Fallback';
  src: local('Georgia'), local('Times New Roman');
  ascent-override: 89.6%;
  descent-override: 21.5%;
  line-gap-override: 0%;
  size-adjust: 93%;
}

:root {
  --color-bg: #0e1214;
  --color-surface: #161c20;
  --color-surface-2: #1e272c;
  --color-line: #33414a;
  --color-text: #f4f0e6;
  --color-muted: #bdb8aa;
  --color-gold: #d6ac52;
  --color-gold-strong: #e8c46e;
  --color-on-gold: #15110a;
  --color-focus: #f2d58a;
  /* Status colors (BRAND.md 5.1). Warning is the gold. */
  --color-success: #5fb57a;
  --color-warning: #d6ac52;
  --color-error: #e26d5c;

  --font-sans:
    'Montserrat', 'Montserrat Fallback', system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-serif:
    'Crimson Pro', 'Crimson Pro Fallback', Georgia, 'Iowan Old Style', 'Times New Roman', serif;

  --text-sm: 0.875rem;
  /* 18px: Crimson Pro has a small x-height, so 17px of it reads like 15px of a sans. */
  --text-base: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.25rem;
  --leading-body: 1.6;
  --leading-tight: 1.2;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --shadow-card: 0 1px 0 rgb(255 255 255 / 4%) inset, 0 12px 32px rgb(0 0 0 / 45%);
  --shadow-glow: 0 0 0 1px rgb(214 172 82 / 35%), 0 16px 40px rgb(0 0 0 / 50%);

  --measure: 42rem;
  --page-width: 68rem;
  --tap-min: 44px;
}

@media (min-width: 48em) {
  :root {
    --text-xl: 1.75rem;
    --text-2xl: 2.25rem;
    --text-3xl: 3rem;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: dark;
  /* The gold on every native control: checkboxes, radios, progress, the caret. */
  accent-color: var(--color-gold);
  caret-color: var(--color-gold-strong);
}

/* Crimson Pro reads; Montserrat labels, decides, and prices (BRAND 5.3). */
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

h1,
h2,
h3,
h4,
button,
input,
select,
textarea,
.btn,
.eyebrow,
.top-bar,
.facts__value,
.price-card__price,
.price-card__title,
.hero__price,
.buy-bar,
.site-header__nav,
.frame__eyebrow,
.frame__badge,
.progress,
.offer-price,
.offer-tax,
.order-card__headtotal,
.order-totals,
.order-lines,
.file-row__title,
.file-row__size,
.article__head {
  font-family: var(--font-sans);
}

/* Prices and totals line up; the browser's own selection color belongs to the brand. */
.price-card__price,
.facts__value,
.hero__price,
.offer-price,
.order-totals,
.order-lines,
.buy-bar__price {
  font-variant-numeric: tabular-nums;
}

::selection {
  background: var(--color-gold);
  color: var(--color-on-gold);
}

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

h1,
h2,
h3 {
  margin: 0 0 var(--space-4);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* More space above a heading than below it: 32 above, 16 below, when it follows content. */
* + h2,
* + h3 {
  margin-top: var(--space-6);
}

h1 {
  font-size: var(--text-2xl);
}

h2 {
  font-size: var(--text-xl);
}

h3 {
  font-size: var(--text-lg);
}

p,
ul,
ol {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--color-gold-strong);
  text-underline-offset: 0.2em;
}

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

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

main {
  display: block;
}

.wrap {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

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

@media (min-width: 48em) {
  h1 {
    font-size: var(--text-3xl);
  }

  .wrap {
    padding: 0 var(--space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-5);
  border: 2px solid var(--color-gold);
  border-radius: var(--radius-md);
  background: var(--color-gold);
  color: var(--color-on-gold);
  font: inherit;
  /* `font: inherit` would hand the button the body's serif; buttons decide, so they are Montserrat. */
  font-family: var(--font-sans);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}

.btn:hover {
  background: var(--color-gold-strong);
  color: var(--color-on-gold);
}

.btn--secondary {
  background: transparent;
  color: var(--color-gold-strong);
}

.btn--secondary:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.btn--block {
  display: flex;
  width: 100%;
}

/* `.btn--block` sets `display: flex`, which beats the UA rule for `[hidden]`. Without this, the
   R4e fallback (the one-click charge failed, so the buyer pays on the page) would leave the
   one-click button on screen beside the Stripe form — two accept paths at once. */
.btn[hidden] {
  display: none;
}

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.6;
  cursor: not-allowed;
}

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

/* header */
.site-header {
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
}

/* The wordmark: 28px tall on phones, 36px on desktop. */
.site-header__logo {
  width: auto;
  height: 28px;
}

.site-header--center .wrap {
  justify-content: center;
}

@media (min-width: 48em) {
  .site-header__logo {
    height: 36px;
  }
}

.site-header__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

/* section */
.section {
  padding: var(--space-7) 0;
}

.section--alt {
  background: var(--color-surface);
  border-block: 1px solid var(--color-line);
}

.section__intro {
  max-width: var(--measure);
  color: var(--color-muted);
}

/* tileGrid */
.tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.tile__image {
  width: 100%;
  border-radius: var(--radius-sm);
}

.tile__title {
  margin: 0;
  font-size: var(--text-lg);
}

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

.tile__title a:hover {
  color: var(--color-gold-strong);
  text-decoration: underline;
}

.tile__body {
  margin: 0;
  color: var(--color-muted);
}

@media (min-width: 36em) {
  .tile-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* priceCard */
.price-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 26rem;
  padding: var(--space-5);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-glow);
}

.price-card__cover {
  width: 100%;
  max-width: 14rem;
  margin: 0 auto;
}

.price-card__title {
  margin: 0;
  font-size: var(--text-xl);
}

.price-card__price {
  margin: 0;
  color: var(--color-gold-strong);
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: 1;
}

.price-card__note {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.price-card__features {
  margin: 0;
  padding-left: var(--space-5);
}

/* faq */
.faq {
  max-width: var(--measure);
}

.faq__item {
  border-bottom: 1px solid var(--color-line);
}

.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--space-3) 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q::after {
  margin-left: var(--space-3);
  color: var(--color-gold-strong);
  content: '+';
}

.faq__item[open] > .faq__q::after {
  content: '\2013';
}

.faq__a {
  padding-bottom: var(--space-3);
  color: var(--color-muted);
}

/* stickyRail: side on wide screens, inline (rendered separately) on narrow screens */
.rail {
  padding: var(--space-4);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.rail--side {
  display: none;
}

.rail--inline {
  margin: var(--space-5) 0;
}

.with-rail {
  display: block;
}

@media (min-width: 60em) {
  .with-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--space-6);
    align-items: start;
  }

  .rail--side {
    display: block;
    position: sticky;
    top: var(--space-5);
  }

  .rail--inline {
    display: none;
  }
}

/* articleShell */
.article {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-7);
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.7;
}

.article__head {
  margin-bottom: var(--space-5);
  font-family: var(--font-sans);
}

.article__subhead {
  color: var(--color-muted);
  font-size: var(--text-lg);
}

.article__byline {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* footer */
.site-footer {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.site-footer__logo {
  width: auto;
  height: 28px;
  margin: 0 0 var(--space-3);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

.site-footer p {
  margin: 0 0 var(--space-2);
}

/* section--light: the cream band that alternates with the dark ground. Tokens are re-scoped so
   every component inside keeps its contrast. */
.section--light {
  --color-text: #15110a;
  --color-muted: #4d4739;
  --color-gold-strong: #73510c;
  --color-line: #cfc8b6;
  --color-surface: #fffdf7;
  --color-surface-2: #ece6d6;
  --color-focus: #73510c;
  background: #f4f0e6;
  color: var(--color-text);
}

.section--light .btn {
  border-color: var(--color-text);
}

/* eyebrow */
.eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--color-gold-strong);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* topBar */
.top-bar {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  background: var(--color-gold);
  color: var(--color-on-gold);
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: center;
}

/* checkList, and the price card's checklist */
.checks,
.price-card__features {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
  list-style: '\2713\00a0\00a0';
}

.checks li::marker,
.price-card__features li::marker {
  color: var(--color-gold-strong);
}

.checks li + li,
.price-card__features li + li {
  margin-top: var(--space-2);
}

/* cta */
.cta {
  max-width: 26rem;
  margin-top: var(--space-5);
}

.cta .btn {
  min-height: 3rem;
  font-size: var(--text-lg);
}

.cta__note {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  text-align: center;
}

.price-card__support {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  text-align: center;
  overflow-wrap: anywhere;
}

/* factsRow */
.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.facts__value {
  display: block;
  color: var(--color-gold-strong);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: var(--leading-tight);
}

.facts__label {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

@media (min-width: 48em) {
  .facts {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* steps */
.steps {
  display: grid;
  gap: var(--space-4);
  max-width: var(--measure);
  margin: var(--space-5) 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps__item {
  position: relative;
  padding-left: 3.5rem;
  counter-increment: step;
}

.steps__item::before {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--color-gold);
  border-radius: 50%;
  color: var(--color-gold-strong);
  font-weight: 800;
  content: counter(step);
}

.steps__title {
  margin: 0 0 var(--space-1);
}

.steps__body {
  margin: 0;
  color: var(--color-muted);
}

/* photo: a photograph on the dark ground, thin line border, never gold (BRAND 5.10) */
.photo {
  max-width: var(--measure);
  margin: var(--space-4) 0;
}

.photo__image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
}

/* promptSample: the guide's own block, dark with a gold rule, on any ground */
.prompt-sample {
  max-width: var(--measure);
  margin: var(--space-5) 0 0;
}

.prompt-sample__block {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid #d6ac52;
  border-radius: var(--radius-sm);
  background: #0e1214;
  color: #f4f0e6;
  font-family: var(--font-serif);
  font-style: italic;
}

.prompt-sample__block p {
  margin: 0;
}

.prompt-sample__label {
  color: #e8c46e;
}

.prompt-sample__source {
  margin-top: var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* previewGallery: every page shown; one column on phones */
.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.gallery figure {
  margin: 0;
}

.gallery__image {
  width: 100%;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
}

.gallery__caption {
  margin-top: var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

@media (min-width: 36em) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* comparison: stacked on phones, two columns on wide screens */
.comparison {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: var(--space-5) 0;
}

.comparison__col {
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.comparison__col--right {
  border-color: var(--color-gold);
}

.comparison__list {
  margin: 0;
  padding-left: var(--space-5);
}

.comparison__list li + li {
  margin-top: var(--space-2);
}

@media (min-width: 48em) {
  .comparison {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* guaranteeBlock */
.guarantee {
  max-width: 26rem;
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px dashed var(--color-gold);
  border-radius: var(--radius-md);
}

.guarantee__body {
  margin: 0;
  overflow-wrap: anywhere;
}

/* stickyBuyBar: phones only; shown by its script, never on the checkout page */
.buy-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--color-gold);
  background: var(--color-bg);
  box-shadow: 0 -8px 24px rgb(0 0 0 / 45%);
}

.buy-bar[hidden],
.checkout .buy-bar {
  display: none;
}

.buy-bar__price {
  margin: 0;
  font-size: var(--text-lg);
}

.buy-bar__note {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

@media (min-width: 60em) {
  .buy-bar {
    display: none;
  }
}

/* sales page */
.hero {
  padding: var(--space-6) 0 var(--space-7);
}

.hero__subhead {
  color: var(--color-muted);
  font-size: var(--text-lg);
}

.hero__cover {
  width: 100%;
  max-width: 20rem;
  margin: 0 auto var(--space-4);
}

.hero__price {
  margin: 0;
}

.hero__price strong {
  display: block;
  color: var(--color-gold-strong);
  font-size: var(--text-3xl);
  line-height: 1;
}

.hero__price span {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.sales .section p,
.honest {
  max-width: var(--measure);
}

.honest h3 {
  margin: var(--space-5) 0 var(--space-2);
}

.sales .rail--side {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.disclaimers {
  padding: var(--space-5) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.disclaimers p {
  margin: 0 0 var(--space-2);
}

@media (min-width: 60em) {
  .hero__grid {
    display: grid;
    grid-template-columns: 22rem minmax(0, 1fr);
    grid-template-areas:
      'cover head'
      'cover buy';
    gap: 0 var(--space-7);
    align-items: start;
  }

  .hero__head {
    grid-area: head;
  }

  .hero__cover {
    grid-area: cover;
    max-width: none;
  }

  .hero__buy {
    grid-area: buy;
  }

  .sales__body {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 var(--space-5) var(--space-7);
  }

  .sales__body .section {
    border-radius: var(--radius-md);
  }

  .price-inline {
    display: none;
  }
}

/* frame: the card every M7 page is built from. One column, at most 640px. */
.frame {
  max-width: 640px;
  margin: 0 auto var(--space-5);
  padding: 24px;
  border: 2px solid var(--color-line);
  border-radius: 16px;
  background: var(--color-surface);
}

.frame__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.frame__badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-on-gold);
  font-size: var(--text-sm);
  font-weight: 700;
}

.frame__eyebrow {
  margin: 0;
  color: var(--color-gold-strong);
  font-size: var(--text-sm);
  font-variant-caps: all-small-caps;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* checkout (M7.T02): order card first on phones; two columns from 960px */
.checkout .btn {
  min-height: 52px;
  font-size: 17px;
  font-weight: 600;
}

.checkout h1 {
  margin: var(--space-5) 0 var(--space-4);
  font-size: var(--text-xl);
  text-align: center;
}

.checkout-grid {
  display: grid;
  gap: var(--space-5);
  max-width: 640px;
  margin: 0 auto;
  padding-bottom: var(--space-6);
}

.checkout-main,
.order-card {
  min-width: 0;
}

.checkout-main .frame {
  max-width: none;
  margin: 0 0 var(--space-4);
}

.checkout input[type='email'] {
  width: 100%;
  min-height: 48px;
  margin-top: var(--space-2);
  padding: 0 var(--space-3);
  border: 2px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-family: var(--font-sans);
}

.checkout .form-help {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.checkout #checkout-error {
  margin: var(--space-3) 0;
  color: var(--color-error);
}

/* the add-on card: dashed gold border, price on the right */
.addon {
  padding: var(--space-4);
  border: 2px dashed var(--color-gold);
  border-radius: var(--radius-md);
}

.addon__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-min);
  cursor: pointer;
}

.addon__row input {
  flex: none;
  width: 22px;
  height: 22px;
  accent-color: var(--color-gold);
}

.addon__title {
  flex: 1;
  min-width: 0;
  font-weight: 700;
}

.addon__price {
  flex: none;
  color: var(--color-gold-strong);
  font-weight: 700;
}

.addon__line {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* Stripe's Payment Element: room above the pay button, and the element never hugs the frame edge. */
#checkout-payment-element {
  margin: var(--space-2) 0 var(--space-5);
}

#checkout-payment-element:empty {
  min-height: 3rem;
}

.launch-bar {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-gold-strong);
  font-size: var(--text-sm);
  text-align: center;
}

/* the order card */
.order-card {
  padding: var(--space-4);
  border: 2px solid var(--color-line);
  border-radius: 16px;
  background: var(--color-surface);
}

.order-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.order-card__cover {
  flex: none;
  width: 72px;
  height: auto;
  border-radius: var(--radius-sm);
}

.order-card__title {
  flex: 1;
  min-width: 0;
}

.order-card__title h2 {
  margin: 0;
  font-size: var(--text-base);
}

.order-card__sub {
  display: none;
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.order-card__headtotal {
  flex: none;
  margin: 0;
  text-align: right;
}

/* The total arrives from Stripe's `change` event, so hide the label until it is filled rather
   than showing "Total" with nothing after it. */
.order-card__headtotal:has(strong:empty) {
  visibility: hidden;
}

.order-card__headtotal span {
  display: block;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.order-card #checkout-status {
  margin: var(--space-3) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.order-card__details summary {
  margin-top: var(--space-3);
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  color: var(--color-gold-strong);
  cursor: pointer;
}

.order-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.order-line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-line);
}

.order-line__amount {
  flex: none;
}

.order-totals {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-3) 0 0;
}

.order-totals[hidden] {
  display: none;
}

.order-totals dt {
  color: var(--color-muted);
}

.order-totals dd {
  margin: 0;
  text-align: right;
}

.order-totals dt:last-of-type,
.order-totals dd:last-of-type {
  color: var(--color-text);
  font-weight: 700;
}

.order-card__guarantee {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
}

.order-card__steps h3 {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--text-base);
}

.order-card__steps ol {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

@media (min-width: 60em) {
  .checkout-grid {
    grid-template-columns: minmax(0, 560px) minmax(0, 360px);
    justify-content: center;
    align-items: start;
    max-width: none;
  }

  .checkout-main {
    grid-column: 1;
    grid-row: 1;
  }

  .order-card {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: var(--space-5);
  }

  .order-card__cover {
    width: 96px;
  }

  .order-card__sub {
    display: block;
  }

  .order-card__headtotal,
  .order-card__details summary {
    display: none;
  }

  .order-card__details::details-content {
    content-visibility: visible;
  }
}

/* offer pages (M7.T03): one 640px column, the price frame first and large. The page carries one
   decision, rendered twice; nothing else here is interactive, so there is nothing to style but
   type, the covers, and the two frames. */
.offer .wrap {
  max-width: 640px;
}

.offer .btn {
  min-height: 52px;
  font-size: var(--text-lg);
}

.offer h1 {
  margin: 0 0 var(--space-3);
}

.offer-lede {
  margin: 0 0 var(--space-5);
  color: var(--color-muted);
}

.offer .eyebrow {
  margin: 0 0 var(--space-2);
}

/* the progress strip: three steps, separated by a middot, so the downloads are visibly next */
.progress {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* The separator trails its step, so a strip that wraps never starts a line with a middot. */
.progress__step:not(:last-child)::after {
  content: '·';
  margin-left: var(--space-3);
  color: var(--color-line);
}

.progress__step--done {
  color: var(--color-success);
}

.progress__step--now {
  color: var(--color-text);
  font-weight: 700;
}

/* the price frame */
.offer-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
}

.offer-price__now {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  color: var(--color-gold-strong);
}

.offer-price__was {
  font-size: var(--text-xl);
  color: var(--color-muted);
  text-decoration-thickness: 2px;
}

.offer-price__where,
.offer-price__launch {
  margin: 0 0 var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.offer-price__charge {
  margin: 0 0 var(--space-4);
}

#offer-status,
.offer .form-help {
  margin: 0 0 var(--space-3);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

#offer-status[hidden],
#offer-error[hidden] {
  display: none;
}

#offer-error {
  margin: 0 0 var(--space-3);
  color: var(--color-error);
}

.offer-tax {
  margin: var(--space-2) 0 var(--space-3);
  color: var(--color-muted);
  font-size: var(--text-sm);
  text-align: center;
}

.offer-tax:empty {
  margin: 0;
}

.offer-guarantee,
.offer-decline {
  margin: 0;
  text-align: center;
  font-size: var(--text-sm);
}

/* Both are real tap targets, not 17px of underlined text on a phone. */
.offer-guarantee a,
.offer-decline a {
  display: inline-block;
  min-height: var(--tap-min);
  padding: calc((var(--tap-min) - 1.5em) / 2) var(--space-3);
}

/* the repeat of the one decision at the end of the page */
.offer-repeat {
  max-width: 640px;
  margin: 0 auto var(--space-5);
}

/* "What you get": one row per Guide, the cover on the left and the finish line plus what is
   inside on the right (Scott, 2026-10-11: a grid of names told a Dream Trip buyer nothing about
   the other eleven). The owned Guide comes last with its tag. */
.offer-items {
  margin: var(--space-6) 0 var(--space-2);
}

.offer-list__intro {
  margin: 0 0 var(--space-5);
  color: var(--color-muted);
}

.offer-list {
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.offer-list__item {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-line);
}

.offer-list__item:last-child {
  border-bottom: 1px solid var(--color-line);
}

.offer-list__cover {
  width: 100%;
  border-radius: var(--radius-sm);
}

.offer-list__text {
  min-width: 0;
}

.offer-list__title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-lg);
}

.offer-list__tag {
  margin-left: var(--space-2);
  color: var(--color-success);
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: 400;
  white-space: nowrap;
}

.offer-list__lead {
  margin: 0 0 var(--space-1);
  color: var(--color-gold-strong);
  font-family: var(--font-sans);
  font-weight: 700;
}

.offer-list__body {
  margin: 0;
  color: var(--color-muted);
}

.offer-list__item--owned .offer-list__lead,
.offer-list__item--owned .offer-list__body {
  color: var(--color-muted);
}

@media (min-width: 36em) {
  .offer-list__item {
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: var(--space-5);
    padding: var(--space-5) 0;
  }
}

/* the two honest answers */
.offer-answers {
  margin: 0;
}

.offer-answers dt {
  font-weight: 700;
}

.offer-answers dd {
  margin: var(--space-2) 0 var(--space-4);
  color: var(--color-muted);
}

.offer-answers dd:last-of-type {
  margin-bottom: 0;
}

.offer-answers__list {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
}

@media (min-width: 48em) {
  .cover-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .cover-grid__sub {
    transition: none;
  }
}

/* thanks (M7.T04): a short confirmation in one 640px column */
.thanks .wrap {
  max-width: 640px;
}

.thanks h1 {
  margin: 0 0 var(--space-4);
}

.thanks__line {
  margin: 0 0 var(--space-3);
}

.thanks .btn {
  min-height: 52px;
  margin-top: var(--space-3);
  font-size: var(--text-lg);
}

/* library (M7.T04): one framed list, a fixed-size Download button on every row */
.library .wrap {
  max-width: 640px;
}

.library-account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-3);
  /* An address is not shouted, and a long one breaks rather than pushing the page wide. */
  letter-spacing: normal;
  overflow-wrap: anywhere;
  text-transform: none;
}

.library-account[hidden] {
  display: none;
}

.link-button {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-gold-strong);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.link-button:hover {
  color: var(--color-text);
}

.file-list {
  padding: 0;
  overflow: hidden;
}

.file-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.file-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
}

.file-row + .file-row {
  border-top: 1px solid var(--color-line);
}

.file-row__cover {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.file-row__cover--blank {
  border: 1px solid var(--color-line);
  background: var(--color-surface-2);
}

.file-row__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.file-row__title {
  font-weight: 700;
  line-height: 1.3;
}

.file-row__size {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* Every Download button is this one rule: the same width and the same height on every row. */
.file-row__download {
  flex: none;
  box-sizing: border-box;
  width: 6.5rem;
  height: var(--tap-min);
  padding: 0;
}

.library-note__heading {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-lg);
}

.library-help {
  margin-top: var(--space-4);
}

.library-help .library-note__heading {
  margin-top: 0;
}

.library-help p:last-child {
  margin-bottom: 0;
}

/* Covers are transparent and drawn for a dark ground: on a light band the tile's image sits on the
   page ground (BRAND 5.5), so the gold and the teal glass keep their depth. */
.section--light .tile__image {
  padding: var(--space-3);
  background: var(--color-bg);
}

/* noticeCard: a quiet card for help, confirmation, and status on decision pages */
.notice {
  margin: var(--space-5) 0 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.notice__heading {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}

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

.notice--success {
  border-left: 4px solid var(--color-success);
}

.notice--warning {
  border-left: 4px solid var(--color-warning);
}

.notice--error {
  border-left: 4px solid var(--color-error);
}

/* the kitchen-sink page (/design, build only): swatches and type specimens */
.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.swatch__chip {
  height: 4rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
}

.swatch__name {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
}

.swatch__value {
  display: block;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.specimen {
  margin: 0 0 var(--space-4);
}

.specimen__label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

.design-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-start;
}

.design-row > * {
  flex: 1 1 16rem;
}

.design-note {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* legal pages: the page container at reading measure (they rendered edge to edge before 2026-10-11) */
.legal-body {
  max-width: var(--measure);
  padding: var(--space-6) 0 var(--space-7);
}

.legal-body h1 {
  margin-bottom: var(--space-5);
}

.legal-body blockquote {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-5);
  border-left: 3px solid var(--color-gold);
  background: var(--color-surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}