/* Hallmark · shape: Feature Stack · genre: editorial · theme: Editorial (deal 2/3, seed gina-vendas-editorial-soft-8f02·52ee7182·2026-10-28·r0) · job: buy · draw: 7f4d28
 * hero: Stage (swap: product signature refused Corridor) · nav: nameplate only · footer: colophon · imagery: product built in HTML/CSS · signature: three readable ebook pages
 * axes: light/display-condensed/chromatic-green · posture: restrained · contrast: pass · fold: pass · copy: verbatim · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V5 · weakest: H, reduced hero copy and let the product carry the right column */
/* Hallmark · user-declared waiver: direct-response low-ticket page; page-level word and section limits do not apply, while each viewport keeps one idea */
/* Hallmark · waive 59 · Feature Stack uses ruled dense sections · long-form copy needs tighter ruled transitions between related objections */
/* Hallmark · answered F13 · one Bricolage family serves every role to keep the page fast */
/* Hallmark · inferred: material product-built · audience women 35 to 60, mobile, tired eyesight · use buy · tone soft editorial, informed friend */
/* Hallmark · hero-review: in-thread · recapture unavailable; static fold calculation fits 390 x 844 · finish-review: in-thread · recapture unavailable; render dependency absent */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,400;12..96,75..100,700&display=swap");
@import url("./tokens.css");
@import url("./base.css");

body { font-size: 1.125rem; }

.skip-link {
  position: fixed;
  inset: var(--space-md) auto auto var(--space-md);
  z-index: var(--z-toast);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-ink);
  color: var(--color-paper);
  transform: translateY(-200%);
}

.skip-link:focus-visible { transform: none; }

.masthead {
  height: var(--space-2xl);
  display: flex;
  align-items: center;
  border-bottom: var(--rule-heavy) solid var(--color-ink);
}

.masthead__inner { display: flex; align-items: center; justify-content: space-between; }

.brand {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-decoration: none;
}

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

.hero {
  min-height: calc(100dvh - var(--space-2xl));
  display: grid;
  align-items: center;
  padding-block: var(--space-xl);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-2xl);
  align-items: center;
}

.hero__copy { min-width: 0; }

.hero h1 { max-width: 11ch; font-size: var(--text-display-s); }

.hero__lead { margin-top: var(--space-lg); }

.hero__actions { margin-top: var(--space-lg); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding-inline: var(--space-lg);
  border: var(--rule-hair) solid var(--action);
  background: var(--action);
  color: var(--action-text);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.button:hover { background: var(--action-hover); border-color: var(--action-hover); }
.button:active { transform: translateY(1px); }
.button:focus-visible { outline: var(--rule-heavy) solid var(--color-focus); outline-offset: var(--space-2xs); }
.button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.button.is-loading { cursor: progress; }
.button.is-error { background: var(--color-error); }
.button.is-success { background: var(--color-success-ink); }

.safety-line {
  margin-top: var(--space-sm);
  max-width: 46ch;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.ebook-stage {
  position: relative;
  min-height: 540px;
  overflow: visible;
  background: var(--color-paper-2);
  border-top: var(--rule-heavy) solid var(--color-ink);
}

.ebook-page {
  position: absolute;
  width: 42%;
  min-height: 74%;
  padding: var(--space-lg);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule-2);
  color: var(--color-ink);
}

.ebook-page h2 { font-size: var(--text-xl); line-height: 1.05; }
.ebook-page p, .ebook-page li { font-size: var(--text-sm); line-height: 1.45; }
.ebook-page ul { padding-left: var(--space-md); }

.ebook-page--back { inset: var(--space-xl) auto auto 2%; transform: rotate(-4deg); }
.ebook-page--middle { inset: var(--space-lg) 2% auto auto; transform: rotate(4deg); }
.ebook-page--front { inset: var(--space-2xl) auto auto 29%; z-index: var(--z-raised); }

.page-box {
  margin-top: var(--space-md);
  padding: var(--space-sm);
  background: var(--color-success-paper);
  color: var(--color-success-ink);
  border-top: var(--rule-heavy) solid var(--color-accent);
}

.page-box--alert {
  background: var(--color-warning-paper);
  color: var(--color-warning-ink);
  border-top-color: var(--color-terra);
}

.page-box strong { display: block; margin-bottom: var(--space-2xs); }

@media (max-width: 60rem) {
  .brand__note { display: none; }
  .hero { min-height: auto; padding-block: var(--space-lg); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .hero h1 { max-width: 13ch; font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .hero__lead { margin-top: var(--space-md); font-size: 1.125rem; line-height: 1.35; }
  .hero__actions { margin-top: var(--space-md); }
  .button { width: 100%; min-height: 52px; padding-inline: var(--space-md); }
  .safety-line { margin-top: var(--space-xs); }
  .ebook-stage { min-height: 270px; }
  .ebook-page { min-height: 82%; padding: var(--space-sm); }
  .ebook-page h2 { font-size: var(--text-lg); }
  .ebook-page p, .ebook-page li { font-size: 0.72rem; }
  .ebook-page--back { inset: var(--space-md) auto auto 0; }
  .ebook-page--middle { inset: var(--space-sm) 0 auto auto; }
  .ebook-page--front { inset: var(--space-lg) auto auto 29%; }
  .page-box { margin-top: var(--space-xs); padding: var(--space-xs); }
}

@media (max-width: 25rem) and (max-height: 53rem) {
  .masthead { height: 48px; }
  .hero { padding-block: var(--space-md); }
  .hero__grid { gap: var(--space-md); }
  .hero h1 { font-size: 2.35rem; }
  .hero__lead { font-size: 1.125rem; }
}

@media (prefers-reduced-motion: reduce) {
  .button, .skip-link { transition: none; }
}

.section { padding-block: var(--section-gap); }
.section--tight { padding-block: var(--section-gap-s); }
.section--paper { background: var(--color-paper-2); }
.section--ink { background: var(--color-paper-dark); color: var(--color-paper); }
.section--ink h2, .section--ink h3, .section--ink p { color: var(--color-paper); }
.section--ink .safety-line { color: var(--color-paper-3); }

.opens { border-top: var(--rule-heavy) solid var(--color-ink); padding-top: var(--space-lg); }
.section--ink .opens { border-top-color: var(--color-paper); }
.section__intro { margin-top: var(--space-lg); }
.section__head { margin-bottom: var(--space-2xl); }
.section__head--split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: end; }
.section__head--split .section__intro { margin-top: 0; }

.recognition-grid, .two-parts, .audience-grid, .paths-grid, .offer-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-columns);
}

.ruled-block { border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-lg); }
.ruled-block h3 { margin-bottom: var(--space-lg); }
.check-list, .plain-list { margin: 0; padding: 0; list-style: none; }
.check-list li, .plain-list li { padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.check-list li::before { content: "✓"; margin-right: var(--space-sm); color: var(--color-accent); font-weight: 700; }
.plain-list li::before { content: "×"; margin-right: var(--space-sm); color: var(--color-terra); font-weight: 700; }
.mechanism-copy .plain-list li::before { content: "+"; color: var(--color-accent); }

.closing-line { margin-top: var(--space-xl); font-size: var(--text-lead); font-weight: 700; max-width: 62ch; }
.cta-block { margin-top: var(--space-2xl); }

.fact-note { margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
.statement { max-width: 22ch; font-size: var(--text-section); line-height: 1.12; }

.mechanism-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-2xl);
  align-items: start;
}
.mechanism-copy { display: grid; gap: var(--space-lg); }
.mechanism-copy strong { color: var(--color-accent); }

.weeks { margin: 0; padding: 0; list-style: none; border-top: var(--rule-heavy) solid var(--color-ink); }
.week { display: grid; grid-template-columns: minmax(5rem, 1fr) minmax(0, 4fr) minmax(0, 6fr); gap: var(--gap-columns); padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.week__number { font-family: var(--font-display); font-size: var(--text-display-s); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.week p { max-width: 52ch; }

.contents-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: start; }
.contents-layout__sticky { position: sticky; top: var(--space-xl); }
.contents-list { border-top: var(--rule-heavy) solid var(--color-ink); }
.contents-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.contents-row dt { font-weight: 700; }
.contents-row dd { margin: 0; }

.preview-pages { margin-top: var(--space-2xl); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.preview-sheet { min-height: 460px; padding: var(--space-lg); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-2); }
.preview-sheet h3 { margin-bottom: var(--space-lg); }
.preview-sheet p, .preview-sheet li { font-size: var(--text-sm); }
.preview-sheet table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.preview-sheet th, .preview-sheet td { padding-block: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; }
.preview-sheet th { font-weight: 700; }

.sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--rule-heavy) solid var(--color-ink); }
.source { padding: var(--space-xl); border-left: var(--rule-hair) solid var(--color-rule-2); }
.source:first-child { padding-left: 0; border-left: 0; }
.source h3 { margin-bottom: var(--space-md); }

.audience-block { padding: var(--space-xl); background: var(--color-paper-3); }
.audience-block--no { background: var(--color-warning-paper); }
.alert-line { margin-top: var(--space-xl); padding: var(--space-lg); border-top: var(--rule-heavy) solid var(--color-terra); background: var(--color-warning-paper); color: var(--color-warning-ink); }

.offer-layout { align-items: start; }
.price-panel { padding: var(--space-xl); border-top: var(--rule-heavy) solid var(--color-ink); background: var(--color-paper); }
.price { margin-block: var(--space-lg); font-family: var(--font-display); font-size: var(--text-display); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.price small { display: block; margin-top: var(--space-xs); font-size: var(--text-md); font-weight: 400; }
.guarantee { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-2); }
.bump { margin-top: var(--space-xl); padding: var(--space-lg); background: var(--color-paper-2); border-top: var(--rule-heavy) solid var(--color-terra); }
.bump h3 { margin-bottom: var(--space-sm); }

.faq-list { border-top: var(--rule-heavy) solid var(--color-ink); }
.faq-list details { border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.faq-list summary { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); cursor: pointer; font-weight: 700; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-size: var(--text-xl); color: var(--color-accent); }
.faq-list details[open] summary::after { content: "−"; }
.faq-list summary:hover { color: var(--color-accent); }
.faq-list summary:active { color: var(--color-ink-2); }
.faq-list summary:focus-visible { outline: var(--rule-heavy) solid var(--color-focus); outline-offset: var(--space-2xs); }
.faq-answer { padding: 0 var(--space-2xl) var(--space-lg) 0; max-width: 70ch; }

.path { padding: var(--space-xl); border-top: var(--rule-heavy) solid var(--color-rule-2); }
.path--chosen { background: var(--color-success-paper); border-top-color: var(--color-accent); color: var(--color-success-ink); }
.path h3 { margin-bottom: var(--space-lg); }

.disclaimer { padding: var(--space-xl); border-top: var(--rule-heavy) solid var(--color-paper); }
.disclaimer strong { display: block; margin-bottom: var(--space-md); font-size: var(--text-lead); }

.footer { padding-block: var(--space-2xl); border-top: var(--rule-heavy) solid var(--color-ink); }
.footer__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); }
.footer p { font-size: var(--text-sm); color: var(--color-muted); }

.mobile-buy { display: none; }

@media (max-width: 60rem) {
  .section__head--split, .mechanism-layout, .contents-layout, .offer-layout, .footer__inner { grid-template-columns: minmax(0, 1fr); }
  .section__head--split .section__intro { margin-top: var(--space-lg); }
  .contents-layout__sticky { position: static; }
  .week { grid-template-columns: minmax(4rem, 1fr) minmax(0, 4fr); }
  .week p { grid-column: 2; }
  .sources { grid-template-columns: minmax(0, 1fr); }
  .source, .source:first-child { padding: var(--space-lg) 0; border-left: 0; border-bottom: var(--rule-hair) solid var(--color-rule-2); }
}

@media (max-width: 40rem) {
  body.offer-passed { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .ebook-stage { min-height: 390px; overflow: clip; }
  .ebook-page { font-size: 1.125rem; }
  .ebook-page p, .ebook-page li { font-size: 1.125rem; }
  .ebook-page--back, .ebook-page--middle { display: none; }
  .ebook-page--front { inset: var(--space-md) 0; width: auto; min-height: 0; transform: none; }
  .section__head { margin-bottom: var(--space-xl); }
  .recognition-grid, .two-parts, .audience-grid, .paths-grid, .preview-pages { grid-template-columns: minmax(0, 1fr); }
  .recognition-grid, .two-parts, .audience-grid, .paths-grid { gap: var(--space-xl); }
  .week { grid-template-columns: minmax(3rem, 1fr) minmax(0, 5fr); gap: var(--space-md); padding-block: var(--space-lg); }
  .week__number { font-size: var(--text-3xl); }
  .contents-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .preview-sheet { min-height: 0; }
  .audience-block, .price-panel, .path { padding: var(--space-lg); }
  .safety-line, .fact-note, .preview-sheet p, .preview-sheet li, .preview-sheet table, .footer p { font-size: 1.125rem; }
  .faq-answer { padding-right: 0; }
  .offer-passed .mobile-buy {
    position: fixed;
    inset: auto 0 0;
    z-index: var(--z-sticky);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-sm);
    align-items: center;
    padding: var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom));
    background: var(--color-paper);
    border-top: var(--rule-heavy) solid var(--color-ink);
  }
  .mobile-buy strong { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
  .mobile-buy .button { min-height: 48px; font-size: var(--text-md); }
}