/* Barnweek landing, 31/10/2026. Landing style of em-gen-prod (prompt for apps, wiki saas-landing-app step 3,
   em-brain saas-chain/apps/horse-riding-training/landing-style.md): calm bands with hard edges, Hay and White
   alternating, Ink bands for proof, access and the closing call (big headlines in Hat Cream), copy beside one real app
   screen or photo, body never under 16 px (18 px on phones), one Barn Red button style, Brass only for what's due and
   the step numbers. No gradients, no animation, no carousel, no countdown. */
@font-face { font-family: 'Archivo'; font-weight: 700; font-display: swap; src: url(../fonts/archivo-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Archivo'; font-weight: 800; font-display: swap; src: url(../fonts/archivo-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 400; font-display: swap; src: url(../fonts/atkinson-hyperlegible-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 400; font-style: italic; font-display: swap; src: url(../fonts/atkinson-hyperlegible-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 700; font-display: swap; src: url(../fonts/atkinson-hyperlegible-latin-700-normal.woff2) format('woff2'); }
/* Atkinson slashes its zero: digits in running text come from Archivo (same rule as the app). */
@font-face { font-family: 'BW Digits'; font-weight: 400; font-display: swap; unicode-range: U+0030-0039; src: url(../fonts/archivo-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'BW Digits'; font-weight: 700; font-display: swap; unicode-range: U+0030-0039; src: url(../fonts/archivo-latin-700-normal.woff2) format('woff2'); }

:root {
  --hay: #FAF6EE; --white: #FFFFFF; --red: #C4141C; --red-2: #9C0F16; --tint: #FBE9E9;
  --ink: #1D2A30; --ink-2: #33434A; --slate: #4A5960; --brass: #E8A23A; --cream: #FCE8B5; --line: #E9E1D0; --on-ink: #D7DEE1;
  --display: 'Archivo', system-ui, sans-serif;
  --body: 'BW Digits', 'Atkinson Hyperlegible', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--hay); color: var(--ink); font-family: var(--body); font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--red-2); }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(38px, 7.6vw, 62px); line-height: 1.03; }
h2 { font-size: clamp(30px, 5vw, 44px); line-height: 1.1; }
h3 { font-size: 25px; line-height: 1.2; font-weight: 700; }
p { margin: 0; }
strong { font-weight: 700; }
u { text-decoration-color: var(--brass); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }
.band { padding: 64px 0; border-top: 1px solid var(--line); }
.bg-hay { background: var(--hay); }
.bg-white { background: var(--white); }
.bg-ink { background: var(--ink); color: var(--white); border-top: 0; }
.bg-ink h2 { color: var(--cream); }
.bg-ink p, .bg-ink li { color: var(--on-ink); }
.eyebrow { font-family: var(--body); font-weight: 700; font-size: 16px; letter-spacing: .02em; color: var(--slate); }
.lead { font-size: 20px; color: var(--ink-2); margin-top: 14px; max-width: 640px; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* Buttons: one Barn Red style everywhere, the line under it repeats the access path */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 60px; padding: 0 30px; border-radius: 16px; background: var(--red); color: #fff; font-family: var(--display); font-weight: 800; font-size: 19px; text-decoration: none; }
.btn:hover, .btn:focus-visible { background: var(--red-2); }
.btn.sm { min-height: 46px; padding: 0 16px; font-size: 15px; white-space: nowrap; border-radius: 12px; }
@media (max-width: 400px) { .topbar .logo { font-size: 19px; gap: 8px; } .topbar .logo img { width: 32px; height: 32px; } .btn.sm { padding: 0 12px; font-size: 14px; min-height: 44px; } }
.cta { margin-top: 26px; }
.cta .btn { width: 100%; max-width: 420px; }
.micro { margin-top: 12px; font-size: 16px; color: var(--slate); max-width: 470px; }
.center .cta .micro, .cta.center .micro { margin-left: auto; margin-right: auto; }
.bg-ink .micro { color: var(--on-ink); }

/* 1. Top bar */
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(250, 246, 238, .97); border-bottom: 1px solid var(--line); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--ink); text-decoration: none; }
.logo img { border-radius: 22%; }

/* 2. Hero: background photo at 5% (runbook Phase 9) */
.hero { position: relative; padding: 32px 0 56px; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background: url(../img/hero-bg.webp) center / cover no-repeat; opacity: .05; pointer-events: none; }
.hero .wrap { position: relative; display: grid; gap: 28px; align-items: center; }
.hero h1 { margin-top: 10px; }
.hero h1 u { text-decoration-thickness: 5px; text-underline-offset: 7px; }
.hero .sub { font-size: 20px; color: var(--ink-2); margin-top: 16px; max-width: 560px; }
.ride-pick { margin-top: 20px; }
.ride-q { font-weight: 700; font-size: 17px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; min-height: 46px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--line); background: var(--white); color: var(--ink); font-weight: 700; font-size: 16px; text-decoration: none; }
.chip:hover, .chip:focus-visible { border-color: var(--red); color: var(--red-2); }
.pill { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 14px; border-radius: 10px; background: var(--cream); font-weight: 700; font-size: 16px; color: var(--ink); }
.pill::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 3px var(--white); flex: none; }
.hero-img { max-width: 540px; margin: 0 auto; }

/* 9. Real problems (Hat Cream cards, Ink text) */
.cards { display: grid; gap: 14px; margin-top: 32px; }
.card { background: var(--cream); border-radius: 18px; padding: 22px; }
.card h3 { font-size: 21px; }
.card p { margin-top: 8px; color: var(--ink-2); }

/* 3. Proof strip */
.proof { padding: 44px 0; }
.stats { display: grid; gap: 18px; }
.stat b { display: block; font-family: var(--display); font-weight: 800; font-size: 52px; line-height: 1; color: var(--cream); }
.stat span { display: block; margin-top: 6px; font-size: 17px; color: var(--on-ink); }
.proof .line { margin-top: 26px; font-size: 20px; color: #fff; }
.proof .line strong { color: var(--cream); }

/* 4. How it works */
.steps { display: grid; gap: 30px; margin-top: 36px; }
.step { text-align: center; }
.step img { width: 230px; margin: 0 auto 6px; }
.step .num, .access ol li::before { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brass); color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 19px; }
.step h3 { margin-top: 10px; font-size: 22px; }
.step p { margin: 8px auto 0; color: var(--ink-2); max-width: 340px; }
.caption { margin-top: 8px; font-size: 16px; color: var(--slate); text-align: center; }

/* 5. The parts: copy beside one image, alternating */
.part { display: grid; gap: 22px; align-items: center; margin-top: 52px; }
.part h3 { font-size: 28px; font-weight: 800; }
.part p { margin-top: 12px; color: var(--ink-2); }
.ticks { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 32px; }
.ticks li::before { content: ''; position: absolute; left: 2px; top: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--tint); box-shadow: inset 0 0 0 2px var(--red); }
.ticks li::after { content: ''; position: absolute; left: 8px; top: 9px; width: 5px; height: 9px; border: solid var(--red); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* 5b. Where the dates come from */
.method { display: grid; gap: 22px; align-items: center; }
.method .box { background: var(--white); border: 2px solid var(--ink); border-radius: 18px; padding: 22px; margin-top: 18px; }

/* 6. Old way against Barnweek */
.vs { margin-top: 30px; display: grid; gap: 14px; }
.vs-row { display: grid; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--white); }
.vs-row > div { padding: 18px 20px; }
.vs-old { color: var(--ink-2); background: var(--hay); }
.vs-old .eyebrow, .vs-new .eyebrow { display: block; font-size: 14px; margin-bottom: 4px; }
.vs-new { background: var(--white); }
.vs-new .eyebrow { color: var(--red-2); }
.ease { margin-top: 26px; font-family: var(--display); font-weight: 700; font-size: 22px; text-align: center; }

/* 7. What's inside and bonuses */
.inside-wrap { display: grid; gap: 22px; align-items: center; margin-top: 26px; }
.inside { display: grid; gap: 12px; }
.inside .card b { font-family: var(--display); font-size: 21px; display: block; }
.sorted { margin-top: 4px; color: var(--ink-2); }
.bonus { display: grid; gap: 18px; align-items: center; margin-top: 40px; }
.bonus h3 { font-size: 24px; font-weight: 800; }
.bonus p { margin-top: 8px; color: var(--ink-2); }
.tag { display: inline-block; margin-bottom: 8px; padding: 4px 12px; border-radius: 8px; background: var(--brass); color: var(--ink); font-weight: 700; font-size: 15px; }

/* 8. Who it is for */
.fit { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.fit li { display: flex; gap: 14px; align-items: flex-start; background: var(--hay); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.fit .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--red); flex: none; margin-top: 8px; }

/* 11b. How access works (Ink band, no amounts, steps numbered in Brass) */
.access { display: grid; gap: 28px; align-items: center; }
.access ol { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 16px; counter-reset: a; }
.access ol li { position: relative; padding-left: 54px; counter-increment: a; }
.access ol li::before { content: counter(a); position: absolute; left: 0; top: -4px; width: 38px; height: 38px; }
.access ol strong, .access .included strong { color: #fff; }
.access u { color: #fff; }
.included { margin-top: 22px; padding: 18px 20px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; }
.risk { margin-top: 18px; padding: 18px 20px; border-radius: 16px; background: var(--cream); display: flex; gap: 14px; align-items: flex-start; }
.risk p, .risk strong { color: var(--ink); }
/* The brass halter tag: a rectangle with two punched holes */
.halter { flex: none; display: inline-flex; align-items: center; justify-content: space-between; width: 40px; height: 24px; padding: 0 6px; margin-top: 2px; border-radius: 6px; background: var(--brass); }
.halter i { width: 7px; height: 7px; border-radius: 50%; background: var(--cream); box-shadow: inset 0 1px 1px rgba(0,0,0,.35); }

/* Reviews (hidden until assets/js/reviews.js has real ones) */
.reviews { display: grid; gap: 14px; margin-top: 28px; }
.review { background: var(--white); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.review img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.review-body { padding: 18px; }
.stars { display: flex; gap: 2px; color: var(--brass); }
.stars svg { width: 20px; height: 20px; } .stars svg.off { color: var(--line); }
.review .who { margin-top: 10px; font-weight: 700; } .review .who span { font-weight: 400; color: var(--slate); }

/* 12. FAQ (Hat Cream panels) */
.faq { margin-top: 28px; display: grid; gap: 12px; }
.faq details { background: var(--cream); border-radius: 16px; padding: 4px 20px; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 30px 16px 0; position: relative; font-family: var(--display); font-weight: 700; font-size: 19px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 12px; font-size: 28px; color: var(--red); font-weight: 400; }
.faq details[open] summary::after { content: '−'; }
.faq details p { padding: 0 0 18px; color: var(--ink-2); }

/* 13. Final CTA */
.final { padding: 72px 0; }
.final .lead { color: var(--on-ink); }
.final .lead strong { color: #fff; }

/* 14. Footer */
footer { padding: 36px 0 48px; background: var(--white); border-top: 1px solid var(--line); font-size: 16px; color: var(--slate); }
footer .logo { font-size: 19px; }
.links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0; }
.links a { color: var(--ink-2); }

/* Preview note while appUrl is empty */
#app-preview { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 14px 18px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 16px; display: none; z-index: 50; }
#app-preview.show { display: block; }

@media (min-width: 860px) {
  body { font-size: 19px; }
  .band { padding: 92px 0; }
  .hero { padding: 56px 0 84px; }
  .hero .wrap { grid-template-columns: 1.02fr 1fr; gap: 48px; }
  .hero-img { max-width: none; }
  .cards { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .part { grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 76px; }
  .part:nth-of-type(even) .part-img { order: 2; }
  .method, .access, .inside-wrap { grid-template-columns: 1.1fr 1fr; gap: 56px; }
  .vs-row { grid-template-columns: 1fr 1fr; }
  .bonus { grid-template-columns: 1fr 1fr; gap: 48px; }
  .bonus:nth-of-type(even) img { order: 2; }
  .fit { grid-template-columns: 1fr 1fr; }
  .reviews { grid-template-columns: repeat(3, 1fr); }
  .faq { max-width: 860px; margin-left: auto; margin-right: auto; }
}

/* Legal pages (privacy, terms, refund, contact) */
footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0; }
footer nav a { color: var(--ink-2); }
footer .legal { margin-top: 14px; font-size: 15px; }
.legal-page { padding: 40px 0 64px; }
.legal-page h1 { font-size: 34px; }
.legal-page h2 { font-size: 23px; margin-top: 30px; }
.legal-page p, .legal-page li { color: var(--ink); margin-top: 10px; }
.legal-page ul { padding-left: 22px; }
.legal-page .updated { color: var(--slate); font-size: 15px; margin-top: 8px; }
.todo { background: var(--cream); padding: 1px 6px; border-radius: 6px; }