/* Treatstep landing, 30/10/2026. Landing style of em-gen-prod (prompt for apps, wiki saas-landing-app step 3):
   calm bands with hard edges, Ivory and White alternating, Ink bands for proof, access and the closing call,
   copy beside one real app screen or photo, body never under 16 px (18 px on phones), one green button style,
   the orange treat dot only as an accent (step numbers, the treat path). No gradients, no animation, no carousel. */
@font-face { font-family: 'Lexend'; font-weight: 700; font-display: swap; src: url(../fonts/lexend-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Lexend'; font-weight: 800; font-display: swap; src: url(../fonts/lexend-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 a neutral sans (same rule as the app). */
@font-face { font-family: 'TS Digits'; src: local('Helvetica Neue'), local('HelveticaNeue'), local('Arial'); font-weight: 400; unicode-range: U+0030-0039; }
@font-face { font-family: 'TS Digits'; src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), local('Arial Bold'); font-weight: 700; unicode-range: U+0030-0039; }

:root {
  --ivory: #FAF6EF; --white: #FFFFFF; --green: #1C7A3D; --green-2: #146534; --tint: #E4F3E9;
  --ink: #0F1E36; --ink-2: #2E3B52; --slate: #5B6475; --treat: #FF8A3D; --line: #E7E1D6; --on-ink: #D9E0EA;
  --display: 'Lexend', system-ui, sans-serif;
  --body: 'TS 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(--ivory); 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(--green); }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(36px, 7.4vw, 60px); line-height: 1.04; }
h2 { font-size: clamp(30px, 5vw, 44px); line-height: 1.1; }
h3 { font-size: 25px; line-height: 1.2; }
p { margin: 0; }
strong { font-weight: 700; }
u { text-decoration-color: var(--treat); 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-ivory { background: var(--ivory); }
.bg-white { background: var(--white); }
.bg-ink { background: var(--ink); color: var(--white); border-top: 0; }
.bg-ink p, .bg-ink li { color: var(--on-ink); }
.eyebrow { font-family: var(--body); font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.bg-ink .eyebrow { color: var(--on-ink); }
.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 green 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: 999px; background: var(--green); color: #fff; font-family: var(--display); font-weight: 800; font-size: 19px; text-decoration: none; }
.btn:hover, .btn:focus-visible { background: var(--green-2); }
.btn.sm { min-height: 46px; padding: 0 18px; font-size: 15px; white-space: nowrap; }
@media (max-width: 400px) { .topbar .logo { font-size: 18px; gap: 8px; } .topbar .logo img { width: 30px; height: 30px; } .btn.sm { padding: 0 13px; font-size: 14px; min-height: 44px; } }
.cta { margin-top: 28px; }
.cta .btn { width: 100%; max-width: 420px; }
.micro { margin-top: 12px; font-size: 16px; color: var(--slate); max-width: 460px; }
.center .cta .micro, .cta.center .micro { margin-left: auto; margin-right: auto; }
.bg-ink .micro { color: var(--on-ink); }
.bg-ink u { text-decoration-color: var(--treat); }

/* 1. Top bar */
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(250, 246, 239, .96); 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; }

/* 2. Hero */
.hero { padding: 36px 0 56px; }
.hero .wrap { display: grid; gap: 28px; align-items: center; }
.hero h1 { margin-top: 10px; }
.hero .sub { font-size: 20px; color: var(--ink-2); margin-top: 16px; max-width: 560px; }
.pill { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 14px; border-radius: 999px; background: var(--tint); font-weight: 700; font-size: 16px; color: var(--green-2); }
.pill::before, .dot { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--treat); box-shadow: 0 0 0 3px #fff; flex: none; }
.hero-img { max-width: 520px; margin: 0 auto; }

/* 9. Real problems */
.cards { display: grid; gap: 14px; margin-top: 32px; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.bg-white .card { background: var(--ivory); }
.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: #fff; }
.stat span { display: block; margin-top: 6px; font-size: 17px; color: var(--on-ink); }
.proof .line { margin-top: 26px; font-size: 20px; color: #fff; }

/* 4. How it works */
.steps { display: grid; gap: 30px; margin-top: 36px; counter-reset: s; }
.step { text-align: center; }
.step img { width: 230px; margin: 0 auto 6px; }
.step .num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--treat); 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; }
.path { display: none; }

/* 5. The parts: copy beside one image, alternating */
.part { display: grid; gap: 22px; align-items: center; margin-top: 52px; }
.part h3 { font-size: 28px; }
.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(--green); }
.ticks li::after { content: ''; position: absolute; left: 8px; top: 9px; width: 5px; height: 9px; border: solid var(--green); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.caption { margin-top: 8px; font-size: 16px; color: var(--slate); text-align: center; }

/* 5b. How we train */
.method { display: grid; gap: 22px; align-items: center; }
.method .box { background: var(--white); border: 2px solid var(--green); border-radius: 18px; padding: 22px; margin-top: 18px; }

/* 6. Old way against Treatstep */
.vs { margin-top: 30px; display: grid; gap: 14px; }
.vs-row { display: grid; gap: 0; 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); }
.vs-old .eyebrow, .vs-new .eyebrow { display: block; font-size: 13px; margin-bottom: 4px; }
.vs-new { background: var(--tint); }
.vs-new .eyebrow { color: var(--green-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 { display: grid; gap: 14px; margin-top: 26px; }
.inside .card b { font-family: var(--display); font-size: 21px; display: block; }
.bonus { display: grid; gap: 18px; align-items: center; margin-top: 40px; }
.bonus h3 { font-size: 24px; }
.bonus p { margin-top: 8px; color: var(--ink-2); }
.tag { display: inline-block; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px; background: var(--treat); color: var(--ink); font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }

/* 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(--white); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.fit li .dot { margin-top: 7px; }

/* 11b. How access works (Ink band, no amounts) */
.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: 52px; counter-increment: a; }
.access ol li::before { content: counter(a); position: absolute; left: 0; top: -2px; width: 36px; height: 36px; border-radius: 50%; background: var(--treat); color: var(--ink); display: grid; place-items: center; font-family: var(--display); font-weight: 800; }
.access ol strong, .access .included strong { color: #fff; }
.included { margin-top: 22px; padding: 18px 20px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; }
.guarantee { margin-top: 18px; padding: 18px 20px; border-radius: 16px; background: #fff; color: var(--ink); display: flex; gap: 14px; align-items: flex-start; }
.guarantee p { color: var(--ink); }
.guarantee svg { width: 28px; height: 28px; flex: none; color: var(--green); }

/* 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(--treat); }
.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 */
.faq { margin-top: 28px; display: grid; gap: 12px; }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 4px 20px; }
.bg-white .faq details { background: var(--ivory); }
.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(--green); 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 h2 { color: #fff; }
.final .lead { color: var(--on-ink); }

/* 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); position: relative; }
  .path { display: block; position: absolute; top: 470px; left: 17%; right: 17%; border-top: 4px dotted var(--treat); }
  .part { grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 76px; }
  .part:nth-of-type(even) .part-img { order: 2; }
  .method, .access { grid-template-columns: 1.1fr 1fr; gap: 56px; }
  .vs-row { grid-template-columns: 1fr 1fr; }
  .inside { grid-template-columns: 1fr 1fr; }
  .bonus { grid-template-columns: 1fr 1fr; gap: 48px; }
  .fit { grid-template-columns: 1fr 1fr; }
  .reviews { grid-template-columns: repeat(3, 1fr); }
  .faq { grid-template-columns: 1fr; max-width: 860px; margin-left: auto; margin-right: auto; }
}

/* Legal pages (privacy, terms, refund, contact) */
.topbar-mail { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); text-decoration: none; font-size: 16px; }
.topbar-mail svg { width: 20px; height: 20px; }
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(--tint); padding: 1px 6px; border-radius: 6px; }