/* Self-hosted fonts (shared with the reading page, /fonts/). SIL OFL 1.1. */
@font-face { font-family: "Gloock"; src: url(/fonts/Gloock-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(/fonts/Newsreader-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(/fonts/Newsreader-400-Italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(/fonts/Newsreader-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
/* Comet & Crow · Learn Tarot in 30 Days · sales page v1
   ------------------------------------------------------------------
   BRAND TOKENS: swap colours, fonts, logo and image paths here.
   Colours come from build-v1/shared/tokens.css (Product Designer).
   Logo files live in assets/brand/, images in assets/img/.        */
:root {
  --paper:        #FFFFFF;   /* page */
  --ink:          #1E1B17;   /* text, rules, ink block */
  --oxblood:      #8A2A22;   /* accent, hero block, buttons (white text 8.6:1) */
  --oxblood-deep: #5A1A16;   /* button edge, pressed state */
  --muted:        #655D50;   /* secondary text (6.5:1 on white) */
  --line:         #CDC7BD;   /* hairlines */

  --font-display: "Gloock", "Newsreader", Georgia, serif;   /* Gloock 400 only */
  --font-text:    "Newsreader", Georgia, serif;             /* 400, 400 italic, 500 */

  /* type scale: 1.25 on mobile, 1.333 from 900px */
  --fs-small: 0.9375rem; --fs-body: 1.1875rem; --fs-lead: 1.375rem;
  --fs-h3: 1.5rem; --fs-h2: clamp(2rem, 6.4vw, 3rem); --fs-h1: clamp(2.5rem, 10.4vw, 5.25rem);
  --fs-num: clamp(3rem, 12vw, 5rem);

  /* spacing: 8px base */
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem; --s6: 4rem; --s7: 6rem;
  --measure: 36rem; --wide: 72rem; --rule: 1px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--fs-body)/1.6 var(--font-text);
  font-variant-numeric: lining-nums; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: -0.005em; }
p, li { text-wrap: pretty; }
p { margin: 0 0 var(--s2); }
a { color: var(--oxblood); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--paper); color: var(--ink); padding: var(--s1) var(--s2); z-index: 10; }
.skip:focus { left: var(--s2); }
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--s3); }
.measure { max-width: var(--measure); }

/* ---------- small caps label (the cover's series label, used once per block) ---------- */
.label { font: 500 .875rem/1.3 var(--font-text); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 var(--s2); }

/* ---------- hero: the cover's oxblood block ---------- */
.hero-block { background: var(--oxblood); color: #fff; }
.hero-block .wrap { padding-top: var(--s3); padding-bottom: var(--s5); }
.masthead { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--s3);
  border-bottom: var(--rule) solid rgba(255,255,255,1); margin-bottom: var(--s4); }
.masthead img { width: 11.5rem; height: auto; }
.hero-block h1 { font-size: var(--fs-h1); max-width: 13ch; }
.hero-block .label { color: #fff; }
.hero-body .wrap { display: grid; gap: var(--s4); padding-top: var(--s4); padding-bottom: var(--s6); }
.hero-copy .lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 32rem; }
.covers { display: grid; grid-template-columns: 1fr; max-width: 24rem; margin: 0 auto; padding-right: 22%; }
.covers img { grid-area: 1 / 1; width: 100%; background: var(--line); }
.covers img { box-shadow: 0 10px 24px rgba(30,27,23,.22); }
.covers img:first-child { transform: translate(30%, -5%) rotate(3deg); }
.covers img:nth-child(2) { position: relative; z-index: 2; transform: rotate(-2deg); }
.covers figcaption { margin-top: var(--s3); font-size: var(--fs-small); color: var(--muted); font-style: italic; }

/* ---------- buy button ---------- */
.buy { display: inline-flex; align-items: center; justify-content: center; min-height: 3.5rem; padding: .8rem 1.75rem;
  background: var(--oxblood); color: #fff; font: 500 1.1875rem/1.2 var(--font-text); text-decoration: none;
  border: 0; border-bottom: 4px solid var(--oxblood-deep); border-radius: 2px;
  transition: transform .12s ease, border-bottom-width .12s ease; }
.buy:hover { transform: translateY(-1px); }
.buy:active { transform: translateY(2px); border-bottom-width: 2px; }
.buy:visited { color: #fff; }
.buy-note { font-size: var(--fs-small); color: var(--muted); margin: var(--s1) 0 0; }
.buy-block { margin-top: var(--s3); }
.price-line { margin: var(--s2) 0 0; font-size: 1.0625rem; }
.ticks { list-style: none; padding: 0; margin: var(--s2) 0 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: var(--fs-small); color: var(--muted); }
.ticks li::before { content: ""; display: inline-block; width: .45em; height: .45em; background: var(--oxblood); margin-right: .5em; vertical-align: .12em; }

/* ---------- sections ---------- */
section { padding: var(--s6) 0; border-top: var(--rule) solid var(--line); }
section h2 { font-size: var(--fs-h2); margin-bottom: var(--s3); max-width: 20ch; }
section h3 { font-size: var(--fs-h3); margin-bottom: var(--s1); }
.label { color: var(--oxblood); }
.cta-row { margin-top: var(--s4); }

/* method: the four Fours */
.fours { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3) var(--s2); margin: var(--s4) 0 0; padding: 0; list-style: none; }
.fours img { width: 100%; border: var(--rule) solid var(--line); background: #EDE9E2; aspect-ratio: 240 / 420; object-fit: cover; }
.fours figcaption { font-size: var(--fs-small); margin-top: var(--s1); line-height: 1.4; }
.fours figcaption b { font-weight: 500; display: block; }

/* the path: a true sequence, so it is numbered */
.path { list-style: none; margin: var(--s4) 0 0; padding: 0; border-top: var(--rule) solid var(--ink); }
.path li { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s2); padding: var(--s3) 0; border-bottom: var(--rule) solid var(--line); }
.path .days { font-family: var(--font-display); color: var(--oxblood); font-size: 2.25rem; line-height: 1; white-space: nowrap; }
.path .days small { display: block; font-family: var(--font-text); font-size: .875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; }
.path h3 { font-size: 1.375rem; }
.path p { margin: 0; }
.path .check { margin-top: .4rem; font-size: var(--fs-small); color: var(--muted); font-style: italic; }
.timing { margin-top: var(--s4); padding-left: var(--s2); border-left: 3px solid var(--oxblood); }

/* sample day */
.day { display: grid; gap: var(--s4); align-items: start; }
.day-text ol { padding-left: 1.25rem; margin: 0 0 var(--s2); }
.day-text blockquote { margin: 0 0 var(--s3); padding: 0; font-style: italic; }
.day-text h3 { font-family: var(--font-text); font-weight: 500; font-size: 1.0625rem; margin: var(--s3) 0 .25rem; }
.page-img { background: #F6F4F0; border: var(--rule) solid var(--line); box-shadow: 0 2px 0 var(--line); background: #fff; }
.day figcaption, .pages figcaption { font-size: var(--fs-small); color: var(--muted); margin-top: var(--s1); }

/* what's inside */
.books { display: grid; gap: var(--s5); margin-top: var(--s4); }
.book { display: grid; grid-template-columns: 1fr; gap: var(--s2); align-items: start; }
.book > img { width: 5rem; }
.book img { border: var(--rule) solid var(--line); }
.book h3 { margin-bottom: .25rem; }
.book .meta { color: var(--muted); font-size: var(--fs-small); margin-bottom: var(--s2); }
.book ul, .fit ul, .stack { padding-left: 1.15rem; margin: 0; }
.book li, .fit li { margin-bottom: .45rem; }
.pages { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory;
  margin: var(--s5) calc(var(--s3) * -1) 0; padding: 0 var(--s3) var(--s2); }
.pages figure { margin: 0; scroll-snap-align: start; }

/* who it's for */
.fit { display: grid; gap: var(--s4); }
.fit h3 { font-size: 1.375rem; margin-bottom: var(--s2); }

/* price */
.price { display: grid; gap: var(--s4); }
.price-card { border: var(--rule) solid var(--ink); padding: var(--s4) var(--s3); }
.price-card .amount { font-family: var(--font-display); font-size: 4.5rem; line-height: 1; margin: var(--s2) 0 var(--s1); }
.price-card .amount span { font-family: var(--font-text); font-size: 1.125rem; color: var(--muted); margin-left: .35rem; }
.stack li { margin-bottom: .35rem; }
.guarantee { padding: var(--s3); border-top: 3px solid var(--oxblood); background: #fff; }
.guarantee h3 { font-size: 1.5rem; }

/* faq */
.faq details { border-bottom: var(--rule) solid var(--line); }
.faq details:first-of-type { border-top: var(--rule) solid var(--ink); }
.faq summary { cursor: pointer; list-style: none; padding: var(--s3) 2.25rem var(--s3) 0; position: relative; font: 500 1.1875rem/1.35 var(--font-text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: 1.75rem; color: var(--oxblood); }
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 0 var(--s3); max-width: var(--measure); }

/* close: the workbook's ink block */
.close { background: var(--ink); color: #fff; border-top: 0; }
.close h2 { color: #fff; }
.close .label { color: #fff; }
.close .buy { background: #fff; color: var(--ink); border-bottom-color: var(--line); }
.close .buy:visited { color: var(--ink); }
.close .buy:focus-visible { outline-color: #fff; }
.close .price-line, .close .buy-note { color: #fff; }

/* footer */
footer { padding: var(--s5) 0 var(--s6); font-size: var(--fs-small); color: var(--muted); }
footer .logo { width: 11rem; margin-bottom: var(--s3); }
footer nav ul { list-style: none; padding: 0; margin: 0 0 var(--s3); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
footer a, footer a:visited { color: var(--ink); }
footer nav a { display: inline-block; padding: .5rem 0; }
footer p { max-width: 46rem; }

/* sticky mobile buy bar (JS only; hidden when a full CTA is on screen) */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: .6rem var(--s3) calc(.6rem + env(safe-area-inset-bottom)); background: var(--paper); border-top: var(--rule) solid var(--ink);
  transform: translateY(110%); transition: transform .2s ease; }
.sticky.show { transform: none; }
.sticky p { margin: 0; font-size: var(--fs-small); line-height: 1.3; }
.sticky .buy { min-height: 2.9rem; padding: .5rem 1.1rem; font-size: 1.0625rem; }

/* legal pages */
.legal { padding: var(--s5) 0; }
.legal h1 { font-size: var(--fs-h2); margin-bottom: var(--s3); }

/* ---------- 700px+ ---------- */
@media (min-width: 700px) {
  .wrap { padding: 0 var(--s5); }
  .fours { grid-template-columns: repeat(4, 1fr); }
  .pages { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; overflow: visible; margin: var(--s5) 0 0; padding: 0; }
  .fit { grid-template-columns: 1fr 1fr; gap: var(--s5); }
  .books { grid-template-columns: 1fr 1fr; }
  .book { grid-template-columns: 7rem 1fr; gap: var(--s3); }
  .book > img { width: 100%; }
  .sticky { display: none; }
}
/* ---------- 960px+ : cover composition, plate straddling the block edge ---------- */
@media (min-width: 960px) {
  :root { --fs-body: 1.25rem; }
  section { padding: var(--s7) 0; }
  .masthead img { width: 14rem; }
  .hero-block .wrap { padding-bottom: var(--s6); }
  .hero-block h1 { max-width: 12ch; font-size: 4.75rem; }
  .covers figcaption { margin-right: -36%; }
  .hero-inner { position: relative; }
  .hero-body .wrap { grid-template-columns: 1fr 28rem; gap: 6rem; padding-top: var(--s5); }
  .covers { margin: -22rem 0 0; max-width: none; align-self: start; padding-right: 26%; }
  .day { grid-template-columns: 1fr 1fr; gap: var(--s6); }
  .price { grid-template-columns: 1.1fr .9fr; gap: var(--s5); align-items: start; }
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: start; }
}

/* ================= v2 additions ================= */
/* Threshold Practice: deep oxblood block (token --oxblood-deep), white text 13.2:1 */
.threshold { background: var(--oxblood-deep); color: #fff; border-top: 0; }
.threshold h2 { color: #fff; max-width: 18ch; font-size: clamp(2.25rem, 7.4vw, 3.75rem); }
.threshold .label, .threshold h3, .threshold figcaption { color: #fff; }
.threshold .lead { font-size: var(--fs-lead); line-height: 1.5; }
.th-intro { display: grid; gap: var(--s4); }
.th-plate { max-width: 15rem; }
.th-plate img { width: 100%; border: 6px solid #fff; }
.th-plate figcaption { font-size: var(--fs-small); font-style: italic; margin-top: var(--s2); line-height: 1.45; }
.steps { list-style: none; counter-reset: step; margin: var(--s5) 0 0; padding: 0; display: grid; gap: 0; border-top: var(--rule) solid #fff; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3rem 1fr; column-gap: var(--s2); padding: var(--s3) 0; border-bottom: var(--rule) solid rgba(255,255,255,.45); }
.steps li::before { content: counter(step); grid-row: 1 / span 3; font-family: var(--font-display); font-size: 2.75rem; line-height: .9; color: #fff; }
.steps h3 { font-size: 1.5rem; margin: 0; }
.steps .when { font-style: italic; margin: .15rem 0 .4rem; font-size: var(--fs-small); }
.steps p { margin: 0; }
.th-foot { display: grid; gap: var(--s4); margin-top: var(--s5); }
.th-foot h3 { font-size: 1.5rem; margin-bottom: var(--s1); }
.th-foot blockquote { margin: var(--s2) 0 0; padding-left: var(--s2); border-left: 3px solid #fff; font-style: italic; }
.th-foot .note { font-size: var(--fs-small); font-style: italic; }
.threshold a { color: #fff; }

/* What's inside: covers big enough to read */
.books { gap: var(--s6); }
.book { grid-template-columns: 1fr; gap: var(--s3); }
.book > img.book-cover, .book-cover { width: 100%; max-width: 30rem; border: var(--rule) solid var(--line); box-shadow: 0 12px 28px rgba(30,27,23,.18); }
.book h3 { font-size: clamp(1.75rem, 6vw, 2.25rem); }

/* who it's for */
.fit h3.after { margin-top: var(--s4); }
.fit ul.pain li::marker { color: var(--muted); }
.fit ul.gain li::marker, .fit ul.pain li::marker { content: ""; }
.fit ul.pain, .fit ul.gain, .notfor ul { list-style: none; padding: 0; }
.fit ul.pain li, .fit ul.gain li, .notfor li { position: relative; padding-left: 1.6rem; margin-bottom: .7rem; }
.fit ul.pain li::before { content: ""; position: absolute; left: .15rem; top: .55em; width: .55em; height: .55em; border: 1.5px solid var(--muted); }
.fit ul.gain li::before { content: ""; position: absolute; left: .15rem; top: .55em; width: .55em; height: .55em; background: var(--oxblood); }
.notfor { border: var(--rule) solid var(--ink); padding: var(--s3); align-self: start; }
.notfor li::before { content: ""; position: absolute; left: .1rem; top: .78em; width: .8em; height: 2px; background: var(--oxblood); }
.price-h { font-size: 1.75rem; margin-bottom: var(--s2); }

@media (min-width: 700px) {
  .books { grid-template-columns: 1fr; }
  .book { grid-template-columns: minmax(16rem, 24rem) 1fr; gap: var(--s5); align-items: center; }
  .book-alt > img { order: 2; }
  .book > img { width: 100%; }
  .th-foot { grid-template-columns: 1fr 1fr; gap: var(--s5); }
}
@media (min-width: 960px) {
  .th-intro { grid-template-columns: 1fr 18rem; gap: var(--s6); align-items: start; }
  .th-plate { max-width: none; }
  .steps { grid-template-columns: repeat(5, 1fr); gap: var(--s3); border-top: 0; }
  .steps li { grid-template-columns: 1fr; border-bottom: 0; border-top: var(--rule) solid #fff; padding-top: var(--s2); }
  .steps li::before { grid-row: auto; margin-bottom: var(--s1); }
}
@media (min-width: 700px) {
  .book-alt { grid-template-columns: 1fr minmax(16rem, 24rem); }
}
@media (min-width: 960px) {
  .steps h3 { min-height: 2.2em; display: flex; align-items: flex-end; font-size: 1.375rem; }
}

/* ================= v3 additions (shorter page) ================= */
section { padding: var(--s5) 0; }
.fours { grid-template-columns: repeat(4, 1fr); gap: var(--s1); margin-top: var(--s3); max-width: 40rem; }
.fours-cap { margin-top: var(--s2); font-style: italic; color: var(--muted); max-width: var(--measure); }
.threshold h2 { max-width: 20ch; }
.threshold .lead { margin-bottom: 0; }
.steps { margin-top: var(--s4); }
.steps li { grid-template-columns: 2.5rem 1fr; padding: var(--s2) 0; align-items: baseline; }
.steps li::before { grid-row: 1 / span 2; font-size: 2.25rem; }
.steps h3 { font-size: 1.3rem; white-space: nowrap; }
.steps p { font-size: 1.0625rem; line-height: 1.45; }
.th-script { margin: var(--s3) 0 0; font-style: italic; }
.path li { padding: var(--s2) 0; }
.path h3 { margin-bottom: .15rem; }
.pages { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; overflow: visible; gap: var(--s1); margin: var(--s4) 0 0; padding: 0; max-width: 46rem; }
.pages figcaption { font-size: .875rem; }
.books { gap: var(--s5); }
.faq summary { padding-top: var(--s2); padding-bottom: var(--s2); }
@media (min-width: 960px) {
  section { padding: var(--s6) 0; }
  .steps { gap: var(--s3); }
  .steps li { grid-template-columns: 1fr; }
  .steps li::before { grid-row: auto; }
  .steps h3 { min-height: 0; display: block; }
}
.th-flip { margin-top: var(--s3); }
.night-h { font-size: 1.375rem; margin: var(--s4) 0 var(--s1); }
.night { margin: 0 0 var(--s2); padding-left: 1.4rem; }
.night li { margin-bottom: .3rem; }
.night li::marker { font-family: var(--font-display); color: var(--oxblood); }
@media (min-width: 960px) { .steps li { align-content: start; } }

/* ================= v4 additions: the 3 bonuses ================= */
.bonuses .bonus-list { display: grid; gap: var(--s5); margin-top: var(--s4); }
.bonus-item { display: grid; gap: var(--s3); align-items: center; }
.bonus-fig { margin: 0; }
.bonus-img { width: 100%; max-width: 30rem; background: #fff; border: var(--rule) solid var(--line); box-shadow: 0 12px 28px rgba(30,27,23,.18); }
.bonus-tag { font: 500 .875rem/1.3 var(--font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--oxblood); margin: 0 0 var(--s1); }
.bonus-copy h3 { font-size: clamp(1.75rem, 6vw, 2.25rem); margin-bottom: var(--s2); }
.bonus-copy p { margin-bottom: var(--s2); }
.bonus-copy .meta { color: var(--muted); font-size: var(--fs-small); margin: 0; }
/* bonus 3 placeholder visual: three card backs built from brand colours and the emblem mark */
.deck-fig { max-width: 30rem; aspect-ratio: 4 / 3; display: grid; place-items: center; background: #fff; border: var(--rule) solid var(--line); }
.deck-backs { position: relative; width: 38%; aspect-ratio: 7 / 12; }
.deck-backs span { position: absolute; inset: 0; border-radius: 6px; background: var(--oxblood); box-shadow: 0 10px 22px rgba(30,27,23,.22);
  outline: 1px solid #fff; outline-offset: -9px; display: grid; place-items: center; }
.deck-backs span:nth-child(1) { background: var(--ink); transform: translateX(-52%) rotate(-12deg); }
.deck-backs span:nth-child(2) { background: var(--oxblood-deep); transform: translateX(52%) rotate(12deg); }
.deck-backs span:nth-child(3) { transform: translateY(-6%); }
.deck-backs img { width: 46%; height: auto; }
.stack-bonus b { font-weight: 500; color: var(--oxblood); margin-right: .3em; }
.no-deck [data-bonus="deck"] { display: none !important; }
@media (min-width: 700px) {
  .bonus-item { grid-template-columns: minmax(16rem, 26rem) 1fr; gap: var(--s5); }
  .bonus-alt { grid-template-columns: 1fr minmax(16rem, 26rem); }
  .bonus-alt .bonus-fig { order: 2; }
}
/* v4.1: Product Designer mockups */
.bonuses .bonus-img { aspect-ratio: 1 / 1; object-fit: cover; box-shadow: none; }
.bonus-fig figcaption, .bundle-fig figcaption { font-size: var(--fs-small); color: var(--muted); font-style: italic; margin-top: var(--s1); }
.bundle-fig { margin: calc(var(--s4) * -1) calc(var(--s3) * -1) var(--s3); }
.bundle-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bundle-fig figcaption { padding: 0 var(--s3); }
.deck-fig { aspect-ratio: 1 / 1; max-width: 26rem; }
.deck-backs { width: 34%; }
.deck-list { margin: 0 0 var(--s2); padding-left: 1.1rem; }
.deck-list li { margin-bottom: .3rem; }