/*
 * CFH Landing — production styles
 * Lightweight, mobile-first, no JS dependencies for the static parts.
 * Body uses .cfh-landing wrapper class so styles don't leak.
 */

/* ----------- BASE ----------- */
.cfh-landing { font-family: var(--cfh-font-body); color: var(--cfh-ink); background: var(--cfh-cream); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.cfh-landing *, .cfh-landing *::before, .cfh-landing *::after { box-sizing: border-box; }
.cfh-landing img { max-width: 100%; height: auto; display: block; }
.cfh-landing a { color: var(--cfh-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cfh-landing a:hover { color: var(--cfh-magenta); }
.cfh-landing :focus-visible { outline: 3px solid var(--cfh-magenta); outline-offset: 3px; }

/* SKIP LINK — accessible */
.cfh-skip { position: absolute; top: -40px; left: 8px; background: var(--cfh-ink); color: var(--cfh-cream); padding: 10px 14px; z-index: 9999; font-family: var(--cfh-font-mono); font-size: var(--cfh-fs-mono-m); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.cfh-skip:focus { top: 8px; }

/* ----------- LAYOUT WRAPPERS ----------- */
.cfh-wrap { max-width: var(--cfh-content-max); margin: 0 auto; padding-left: var(--cfh-edge); padding-right: var(--cfh-edge); }

/* ----------- TYPE PRIMITIVES ----------- */
.cfh-kicker { font-family: var(--cfh-font-mono); font-size: var(--cfh-fs-mono-m); letter-spacing: 1.4px; font-weight: 700; color: var(--cfh-magenta); display: flex; align-items: center; gap: var(--cfh-space-3); margin-bottom: var(--cfh-space-5); text-transform: uppercase; }
.cfh-kicker::before { content: ""; width: 9px; height: 9px; background: var(--cfh-magenta); flex-shrink: 0; }
.cfh-kicker .line { flex: 1; height: 1px; background: var(--cfh-ink-25); }

.cfh-display-xl { font-family: var(--cfh-font-display); font-size: var(--cfh-fs-display-xl); line-height: .88; letter-spacing: -.04em; font-weight: 900; margin: 0; text-wrap: balance; }
.cfh-display-l { font-family: var(--cfh-font-display); font-size: var(--cfh-fs-display-l); line-height: .92; letter-spacing: -.035em; font-weight: 900; margin: 0; text-wrap: balance; }
.cfh-display-m { font-family: var(--cfh-font-display); font-size: var(--cfh-fs-display-m); line-height: 1; letter-spacing: -.025em; font-weight: 800; margin: 0; text-wrap: balance; }
.cfh-display-s { font-family: var(--cfh-font-display); font-size: var(--cfh-fs-display-s); line-height: 1.05; letter-spacing: -.02em; font-weight: 800; margin: 0; }

.cfh-em-mag { font-style: italic; color: var(--cfh-magenta); }
.cfh-em-grn { font-style: italic; color: var(--cfh-green); }
.cfh-em-serif { font-family: var(--cfh-font-serif); font-style: italic; color: var(--cfh-magenta); }

.cfh-lede { font-size: var(--cfh-fs-body-xl); line-height: 1.45; max-width: 920px; font-weight: 500; text-wrap: pretty; margin: var(--cfh-space-7) 0 0; }
.cfh-prose { font-size: var(--cfh-fs-body-l); line-height: 1.65; max-width: var(--cfh-prose-max); margin: 0 0 var(--cfh-space-4); }

/* ----------- HEADER / NAV ----------- */
.cfh-header { padding: var(--cfh-space-5) 0; border-bottom: 1px solid var(--cfh-ink-25); position: sticky; top: 0; background: var(--cfh-cream); z-index: 90; }
.cfh-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--cfh-space-5); }
.cfh-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.cfh-logo-mark { background: var(--cfh-ink); color: var(--cfh-cream); padding: 6px 10px; font-family: var(--cfh-font-display); font-weight: 900; font-size: 14px; letter-spacing: 1.4px; }
.cfh-logo-text { font-family: var(--cfh-font-mono); font-weight: 700; font-size: var(--cfh-fs-mono-m); letter-spacing: 1.2px; text-transform: uppercase; }
.cfh-nav ul { display: flex; gap: var(--cfh-space-5); list-style: none; padding: 0; margin: 0; }
.cfh-nav a { font-family: var(--cfh-font-mono); font-size: var(--cfh-fs-mono-m); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.cfh-nav a:hover { color: var(--cfh-magenta); }

/* mobile nav: hide list, show menu button */
.cfh-nav-toggle { display: none; }
@media (max-width: 720px) {
  .cfh-nav ul { display: none; }
  .cfh-nav-toggle { display: inline-flex; align-items: center; gap: 8px; font-family: var(--cfh-font-mono); font-size: var(--cfh-fs-mono-m); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: none; border: 1px solid var(--cfh-ink); padding: 8px 12px; cursor: pointer; color: var(--cfh-ink); }
  .cfh-nav-toggle[aria-expanded="true"] + ul { display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: var(--cfh-cream); border-bottom: 1px solid var(--cfh-ink); padding: var(--cfh-space-4) var(--cfh-edge); }
  .cfh-nav-toggle[aria-expanded="true"] + ul li { padding: 14px 0; border-bottom: 1px solid var(--cfh-ink-20); }
}

/* ----------- HERO ----------- */
.cfh-hero { padding: var(--cfh-space-9) 0 var(--cfh-space-10); border-bottom: 3px solid var(--cfh-ink); background: var(--cfh-cream); }
.cfh-hero-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--cfh-space-5); font-family: var(--cfh-font-mono); font-size: var(--cfh-fs-mono-s); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--cfh-space-8); flex-wrap: wrap; }
.cfh-hero-meta-right { display: flex; gap: var(--cfh-space-5); opacity: .7; }
.cfh-hero-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--cfh-magenta); color: var(--cfh-cream); font-family: var(--cfh-font-mono); font-size: var(--cfh-fs-mono-l); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 16px 24px; text-decoration: none; margin-top: var(--cfh-space-7); transition: background var(--cfh-dur-fast) var(--cfh-ease), transform var(--cfh-dur-fast) var(--cfh-ease); }
.cfh-hero-cta:hover { background: var(--cfh-ink); color: var(--cfh-cream); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--cfh-magenta); }

/* ----------- STAT STRIP ----------- */
.cfh-stats { padding: var(--cfh-space-8) 0; border-bottom: 1px solid var(--cfh-ink-25); background: var(--cfh-paper); }
.cfh-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cfh-space-7); }
.cfh-stat-num { font-family: var(--cfh-font-display); font-size: clamp(48px, 7vw, 96px); font-weight: 900; line-height: 1; letter-spacing: -.03em; }
.cfh-stat-num-mag { color: var(--cfh-magenta); }
.cfh-stat-num-grn { color: var(--cfh-green); }
.cfh-stat-label { font-family: var(--cfh-font-mono); font-size: var(--cfh-fs-mono-m); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-top: var(--cfh-space-3); color: var(--cfh-dim); }
@media (max-width: 720px) { .cfh-stats-grid { grid-template-columns: 1fr; gap: var(--cfh-space-6); } }

/* ----------- DARK PROBLEM SECTION ----------- */
.cfh-problem { padding: var(--cfh-space-10) 0; background: var(--cfh-ink); color: var(--cfh-cream); }
.cfh-problem .cfh-kicker { color: var(--cfh-magenta); }
.cfh-problem .cfh-kicker .line { background: var(--cfh-cream-25); }
.cfh-problem .cfh-display-xl em { color: var(--cfh-magenta); }
.cfh-problem .cfh-prose { color: var(--cfh-cream); opacity: .85; max-width: 880px; }

/* ----------- HOW IT WORKS — terminal aesthetic ----------- */
.cfh-how { padding: var(--cfh-space-9) 0; border-top: 3px solid var(--cfh-ink); }
.cfh-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--cfh-space-5); margin-top: var(--cfh-space-7); }
.cfh-step { border: 2px solid var(--cfh-ink); padding: var(--cfh-space-5) var(--cfh-space-5); background: var(--cfh-paper); position: relative; }
.cfh-step-num { font-family: var(--cfh-font-mono); font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--cfh-magenta); margin-bottom: var(--cfh-space-3); }
.cfh-step-title { font-family: var(--cfh-font-display); font-size: var(--cfh-fs-display-s); font-weight: 800; letter-spacing: -.015em; line-height: 1.15; margin: 0 0 var(--cfh-space-3); }
.cfh-step-body { font-size: var(--cfh-fs-body-m); line-height: 1.6; margin: 0; }
@media (max-width: 720px) { .cfh-steps { grid-template-columns: 1fr; } }

/* ----------- COVERAGE NUMBERS ----------- */
.cfh-coverage { padding: var(--cfh-space-8) 0; border-top: 1px solid var(--cfh-ink-25); background: var(--cfh-paper); }
.cfh-coverage-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--cfh-space-5); margin-top: var(--cfh-space-6); border-top: 2px solid var(--cfh-ink); border-bottom: 2px solid var(--cfh-ink); }
.cfh-coverage-cell { padding: var(--cfh-space-5) var(--cfh-space-4); border-right: 1px solid var(--cfh-ink-25); }
.cfh-coverage-cell:last-child { border-right: none; }
.cfh-coverage-num { font-family: var(--cfh-font-display); font-size: clamp(36px, 4vw, 64px); font-weight: 900; letter-spacing: -.025em; line-height: 1; }
.cfh-coverage-label { font-family: var(--cfh-font-mono); font-size: var(--cfh-fs-mono-s); letter-spacing: .12em; text-transform: uppercase; color: var(--cfh-dim); margin-top: 6px; font-weight: 700; }

/* ----------- WHY US (3 moves) ----------- */
.cfh-why { padding: var(--cfh-space-9) 0; border-top: 3px solid var(--cfh-ink); }
.cfh-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cfh-space-5); margin-top: var(--cfh-space-7); }
.cfh-why-card { padding: var(--cfh-space-5) var(--cfh-space-5); background: var(--cfh-cream); border: 2px solid var(--cfh-ink); }
.cfh-why-tag { font-family: var(--cfh-font-mono); font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--cfh-green); margin-bottom: var(--cfh-space-3); }
.cfh-why-title { font-family: var(--cfh-font-display); font-size: var(--cfh-fs-display-s); font-weight: 800; letter-spacing: -.015em; line-height: 1.1; margin: 0 0 var(--cfh-space-3); }
.cfh-why-body { font-size: var(--cfh-fs-body-m); line-height: 1.55; margin: 0; }
@media (max-width: 720px) { .cfh-why-grid { grid-template-columns: 1fr; } }

/* ----------- FAQ (CSS-only accordion) ----------- */
.cfh-faq { padding: var(--cfh-space-9) 0; border-top: 1px solid var(--cfh-ink-25); background: var(--cfh-paper); }
.cfh-faq-list { margin-top: var(--cfh-space-6); border-top: 2px solid var(--cfh-ink); }
.cfh-faq details { border-bottom: 1px solid var(--cfh-ink-25); padding: var(--cfh-space-4) 0; }
.cfh-faq summary { font-family: var(--cfh-font-display); font-size: var(--cfh-fs-display-s); font-weight: 800; letter-spacing: -.015em; line-height: 1.2; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--cfh-space-4); }
.cfh-faq summary::-webkit-details-marker { display: none; }
.cfh-faq summary::after { content: "+"; font-family: var(--cfh-font-mono); font-size: 28px; font-weight: 400; color: var(--cfh-magenta); flex-shrink: 0; transition: transform var(--cfh-dur-norm) var(--cfh-ease); }
.cfh-faq details[open] summary::after { content: "−"; }
.cfh-faq-body { font-size: var(--cfh-fs-body-l); line-height: 1.6; margin: var(--cfh-space-4) 0 0; max-width: 760px; }

/* ----------- FINAL CTA ----------- */
.cfh-final { padding: var(--cfh-space-10) 0; background: var(--cfh-ink); color: var(--cfh-cream); border-top: 3px solid var(--cfh-ink); text-align: center; }
.cfh-final .cfh-display-l { color: var(--cfh-cream); }
.cfh-final .cfh-display-l em { color: var(--cfh-green); }
.cfh-final-form { display: flex; gap: var(--cfh-space-3); margin: var(--cfh-space-7) auto 0; max-width: 640px; flex-wrap: wrap; justify-content: center; }
.cfh-final-form input[type=email] { flex: 1; min-width: 240px; padding: 16px 18px; font-family: var(--cfh-font-mono); font-size: var(--cfh-fs-mono-l); background: var(--cfh-cream); color: var(--cfh-ink); border: 2px solid var(--cfh-cream); }
.cfh-final-form button { padding: 16px 28px; font-family: var(--cfh-font-mono); font-size: var(--cfh-fs-mono-l); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--cfh-magenta); color: var(--cfh-cream); border: 2px solid var(--cfh-magenta); cursor: pointer; transition: all var(--cfh-dur-fast) var(--cfh-ease); }
.cfh-final-form button:hover { background: var(--cfh-cream); color: var(--cfh-ink); }
.cfh-final-microcopy { font-family: var(--cfh-font-mono); font-size: var(--cfh-fs-mono-s); letter-spacing: .1em; text-transform: uppercase; opacity: .6; margin-top: var(--cfh-space-4); }

/* ----------- FOOTER ----------- */
.cfh-footer { padding: var(--cfh-space-7) 0 var(--cfh-space-8); background: var(--cfh-cream); border-top: 1px solid var(--cfh-ink-25); font-family: var(--cfh-font-mono); font-size: var(--cfh-fs-mono-s); letter-spacing: .1em; text-transform: uppercase; color: var(--cfh-dim); }
.cfh-footer-row { display: flex; justify-content: space-between; gap: var(--cfh-space-5); flex-wrap: wrap; }
.cfh-footer a { color: var(--cfh-dim); text-decoration: none; }
.cfh-footer a:hover { color: var(--cfh-magenta); }