/* Bonus bridge page. Visual language follows the History Co-Author JV page:
   parchment paper, oxblood accents, heavy serif display type, double rules. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Oswald:wght@600;700&family=Source+Serif+4:wght@600;700;800;900&display=swap');

:root {
  --paper: #eee7d9; --white: #faf6ed; --ink: #27251f; --muted: #625d52; --line: #c9bda6;
  --dark: #23231f; --light: #f6edda; --accent: #832d26; --accent-2: #a03930; --gold: #d8b781;
  --tan: #e2d4b8; --rule: #9e855c;
  --serif: 'Source Serif 4', Georgia, serif; --sans: 'DM Sans', Arial, sans-serif; --num: 'Oswald', sans-serif;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body {
  margin: 0; color: var(--ink); font: 18px/1.7 var(--sans); -webkit-font-smoothing: antialiased;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23726144' opacity='.075' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; height: auto }
a { color: inherit }
h1, h2, h3, p, figure { margin: 0 }
h1, h2, h3 { font-family: var(--serif); font-weight: 800; line-height: 1.08; letter-spacing: -1.5px }
h2 { font-size: clamp(36px, 4.4vw, 58px) }
h3 { font-size: 28px; letter-spacing: -.6px }
p + p { margin-top: 18px }
:focus-visible { outline: 3px solid #b0724f; outline-offset: 4px }
.wrap { width: min(1120px, calc(100% - 64px)); margin: auto }
.reading { max-width: 760px; margin: 0 auto }
.center { text-align: center }
.section { padding: 96px 0; border-bottom: 1px solid #bca78340 }
.section-head { max-width: 900px; margin: 0 auto 44px; text-align: center }
.eyebrow { display: block; margin-bottom: 18px; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase }
.lead { font-size: 21px; line-height: 1.65; color: var(--muted) }
.section-head .lead { margin-top: 22px }
.small { font-size: 13px; color: var(--muted) }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 18px 30px;
  background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 1px;
  box-shadow: 0 3px 0 #4e1b17; font: 700 16px/1.35 var(--sans); text-decoration: none;
  transition: background .18s, transform .18s;
}
.btn:hover { background: var(--accent-2); transform: translateY(-2px) }
.btn .arrow { font-size: 22px; line-height: 1 }
.btn.big { font-size: 19px; padding: 22px 40px }
.btn.light { background: #f2e5c9; border-color: #f2e5c9; color: #3a2b1e; box-shadow: 0 3px 0 #ab9270 }
.btn.light:hover { background: #fff7e6 }
.cta-row { margin-top: 38px; text-align: center }
.cta-note { margin-top: 14px; font-size: 13px; color: var(--muted) }
.dark .cta-note { color: #dfd6c3 }

/* Masthead + strip */
header { position: sticky; top: 0; z-index: 50; background: rgba(250, 246, 237, .98); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px) }
.nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px }
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #947e58; color: var(--accent); font: 25px/1 Georgia, serif }
.brand-name { font-size: 17px; font-weight: 700; line-height: 1.2; letter-spacing: -.4px }
.brand-name small { display: block; margin-top: 6px; font-size: 9px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase }
.nav .btn { font-size: 13px; padding: 12px 18px; gap: 12px }
.launch-strip {
  background: var(--accent); color: #fff1dd; text-align: center; padding: 16px; font-size: 14px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; border-block: 3px double #c58d70;
}
.launch-strip span { margin: 0 12px; color: #d9b89f }

/* Hero */
.hero { position: relative; overflow: hidden; padding: 56px 0 50px; border-bottom: 4px double #ae9570; background: radial-gradient(ellipse at 50% 25%, #fff9eb80, #d9c9ab50) }
.hero::before, .hero::after { content: ''; position: absolute; top: 26px; bottom: 26px; width: 22px; border: 1px solid #a58a5c70; pointer-events: none }
.hero::before { left: 18px }
.hero::after { right: 18px }
.hero h1 { font-size: clamp(52px, 7.2vw, 100px); font-weight: 900; letter-spacing: -4px; line-height: .99; text-shadow: 0 2px #fff9e4 }
.hero h1 em { font-style: normal; color: var(--accent) }
.hero-sub { max-width: 760px; margin: 24px auto 0; font-size: 21px; line-height: 1.55 }
.video-frame {
  max-width: 820px; margin: 36px auto 0; aspect-ratio: 16 / 9; background: #22231f;
  border: 6px solid #c5b28f; outline: 1px solid #8c7757; box-shadow: 0 15px 30px #3a291b30;
}
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block }
.hero-bookline { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 40px auto 0 }
.hero-bookline img { height: 150px; width: auto; box-shadow: 4px 7px 12px #37271038 }
.hero-bookline img:nth-of-type(1) { transform: rotate(-7deg) }
.hero-bookline img:nth-of-type(3) { transform: rotate(7deg) }
.hero-bookline span { max-width: 200px; margin: 0 22px; font: 700 16px/1.4 var(--serif) }
.proof-ribbon { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 900px; margin: 40px auto 0; padding-top: 24px; border-top: 1px solid #b5a17e }
.proof-ribbon div + div { border-left: 1px solid #b5a17e }
.proof-ribbon strong { display: block; font: 800 32px/1.1 var(--serif) }
.proof-ribbon span { display: block; margin-top: 6px; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase }

/* What you get */
.mechanism { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px }
.mechanism-item { padding: 28px; background: #f8f0e0; border: 1px solid #b6a280; border-top: 5px solid var(--accent) }
.mechanism-item .eyebrow { font-size: 10px; margin-bottom: 10px }
.mechanism-item h3 { font-size: 24px }
.mechanism-item p { margin-top: 12px; font-size: 16px }

/* Dark problem section */
.dark { background: radial-gradient(ellipse at 20% 0%, #3b3a30, #20221f); color: var(--light) }
.dark .eyebrow { color: var(--gold) }
.dark h2 { color: #f4e7cc }
.dark .lead { color: #dfd6c3 }
.split { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start }
.split p { color: #dfd6c3 }
.pull-line { margin-top: 28px; padding: 26px 0; border-block: 1px solid #897655; font: 700 30px/1.3 var(--serif); color: #f4e7cc }
.pull-line cite { display: block; margin-top: 14px; font: 500 12px/1.5 var(--sans); letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); font-style: normal }

/* Bonus package */
.package { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; padding: 36px 40px; background: var(--tan); border: 3px double #9a8057 }
.package h3 { font-size: 34px }
.package p { margin-top: 14px; font-size: 16px }
.package-tag { text-align: center; font: 700 64px/1 var(--num); color: var(--accent) }
.package-tag small { display: block; margin-top: 10px; font: 700 11px/1.4 var(--sans); letter-spacing: 2px; text-transform: uppercase; color: var(--muted) }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 40px; margin: 44px 0 }
.feature { padding-left: 46px; position: relative }
.feature::before { content: '✓'; position: absolute; left: 0; top: 2px; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #919e99; border-radius: 50%; color: var(--accent); font-weight: 700; font-size: 14px }
.feature h3 { font: 700 19px/1.35 var(--sans); letter-spacing: -.3px }
.feature p { margin-top: 6px; font-size: 15px; color: var(--muted) }
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start }
.shots figure { padding: 18px; background: var(--white); border: 1px solid var(--line); box-shadow: 5px 5px 0 #d4c6af }
.shots img { border: 1px solid #baae97 }
figcaption { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--muted) }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1000px; margin: 0 auto }
.step { position: relative; padding: 30px 28px; background: #f8f0e0; border: 1px solid #b6a280 }
.step-num { font: 700 44px/1 var(--num); color: var(--accent) }
.step h3 { margin-top: 14px; font-size: 24px }
.step p { margin-top: 10px; font-size: 15px; color: var(--muted) }

/* Closing */
.closing { padding: 90px 0 84px; background: radial-gradient(ellipse at center, #fbf2de70, #dbc9a340) }
.closing .lead { max-width: 720px; margin: 24px auto 0 }
.stat-band { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 900px; margin: 40px auto 0; padding: 30px 15px; background: var(--accent); color: #fff4df; border: 3px double #e4c9a1; text-align: center }
.stat-band strong { display: block; font: 700 44px/1.1 var(--num) }
.stat-band span { display: block; max-width: 220px; margin: 8px auto 0; font-size: 14px }
.signature { margin-top: 36px; font: 700 26px var(--serif) }
.signature small { display: block; margin-top: 4px; font: 500 10px var(--sans); letter-spacing: 2px; text-transform: uppercase }

footer { padding: 30px 0 34px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.7; color: var(--muted) }
footer p + p { margin-top: 10px }
.mobile-cta { display: none }

@media (max-width: 900px) {
  .wrap { width: calc(100% - 44px) }
  .section { padding: 72px 0 }
  .split { grid-template-columns: 1fr; gap: 34px }
  .mechanism { grid-template-columns: 1fr 1fr }
  .hero-bookline span { margin: 0 6px; font-size: 13px }
}
@media (max-width: 640px) {
  body { font-size: 16px }
  .wrap { width: calc(100% - 32px) }
  .nav { min-height: 66px }
  .brand-mark { width: 34px; height: 34px; font-size: 20px }
  .brand-name { font-size: 14px }
  .brand-name small { font-size: 8px; letter-spacing: 1.2px }
  .nav .btn { display: none }
  .launch-strip { font-size: 11px; letter-spacing: .6px; line-height: 1.8; padding: 12px 16px }
  .launch-strip span { margin: 0 4px }
  .hero { padding-top: 36px }
  .hero::before, .hero::after { display: none }
  .hero h1 { font-size: clamp(44px, 12vw, 70px); letter-spacing: -2px }
  .hero-sub { font-size: 17px }
  .video-frame { border-width: 4px; margin-top: 26px }
  .hero-bookline img { height: 118px }
  .hero-bookline span { display: none }
  .proof-ribbon { gap: 8px }
  .proof-ribbon strong { font-size: clamp(20px, 7vw, 28px) }
  .proof-ribbon span { font-size: 8px; letter-spacing: .6px; line-height: 1.5 }
  .section { padding: 56px 0 }
  h2 { font-size: 38px; letter-spacing: -.8px }
  .lead { font-size: 18px }
  .mechanism, .feature-grid, .shots, .steps { grid-template-columns: 1fr }
  .package { grid-template-columns: 1fr; padding: 24px; gap: 18px }
  .package-tag { text-align: left; font-size: 48px }
  .pull-line { font-size: 25px }
  .stat-band { gap: 8px; padding: 22px 8px }
  .stat-band strong { font-size: 32px }
  .stat-band span { font-size: 11px }
  .btn.big, .closing .btn { width: 100%; font-size: 17px; padding: 19px 18px }
  footer { padding-bottom: 96px }
  .mobile-cta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 16px; background: #f6f0e2fa; border-top: 1px solid #b2a386 }
  .mobile-cta .btn { width: 100%; padding: 14px; font-size: 15px }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } * { transition: none !important } }