/* =========================================================================
   Let's Kill Ed — marketing site styles
   Calm, warm, trauma-informed. Mobile-first. Nunito + slate/gold brand.
   Color tokens chosen for WCAG 2.1 AA contrast on their intended surfaces.
   ========================================================================= */

:root {
  /* Text */
  --ink: #1F2933;          /* primary text on white */
  --ink-soft: #2D3A47;     /* slightly softer ink (callout bodies) */
  --text: #3D4A57;         /* body copy */
  --muted: #5A6672;        /* secondary copy (AA on white) */

  /* Brand */
  --slate: #3D5A80;        /* primary */
  --slate-light: #E8EEF4;  /* soft background / hairlines */
  --gold: #F5B800;         /* accent — fills/dark surfaces, never as text on white */
  --gold-bg: #FFF8E1;      /* soft gold panel */
  --gold-border: #F4E6B8;
  --gold-ink: #8A6A00;     /* darkened gold for eyebrow text on gold-bg (AA: ~4.8:1) */

  /* Footer (dark) */
  --footer-bg: #1F2933;
  --footer-text: #C7D0DA;
  --footer-muted: #9AA7B4;
  --footer-border: #33404E;
  --footer-faint: #76828F;

  --white: #FFFFFF;
  --maxw: 1080px;

  --radius-card: 18px;
  --radius-panel: 20px;
  --shadow-card: 0 6px 22px rgba(61, 90, 128, 0.06);
}

/* ----- Base ----- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

::selection { background: #FFF1B8; }

img { max-width: 100%; height: auto; }  /* height:auto lets width/height attrs set aspect ratio, not a fixed height */
em { font-style: italic; }
.em-slate { color: var(--slate); font-style: italic; }

a { color: var(--slate); }

.page-shell { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

/* Shared section eyebrow label */
.eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 12px;
}
.eyebrow--gold { color: var(--gold-ink); letter-spacing: 0.12em; }

/* =========================================================================
   Header
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.2) blur(8px);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--slate-light);
}
.site-header__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand { display: inline-flex; align-items: center; line-height: 0; }
.brand img { height: 60px; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.nav__link {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 9px;
  white-space: nowrap;
}
.nav__link:hover { background: var(--slate-light); }
.nav__link[aria-current="page"] {
  font-weight: 800;
  color: var(--slate);
  background: var(--slate-light);
}

/* =========================================================================
   Generic layout helpers
   ========================================================================= */
.section { max-width: 760px; margin: 0 auto; padding: 64px 24px; }
.page { max-width: 720px; margin: 0 auto; padding: 56px 24px 64px; }

.h1 {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  line-height: 1.12;
}

/* =========================================================================
   Home — hero
   ========================================================================= */
.hero { background: linear-gradient(180deg, #E8EEF4 0%, #F3F7FB 60%, #FFFFFF 100%); }
.hero__inner { max-width: 760px; margin: 0 auto; padding: 64px 24px 72px; text-align: center; }
.hero__logo { height: 92px; width: auto; display: block; margin: 0 auto 22px; }
.hero__title {
  font-size: clamp(32px, 6vw, 46px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--ink);
}
.hero__sub {
  font-size: clamp(17px, 2.5vw, 20px);
  color: var(--text);
  margin: 0 auto 30px;
  max-width: 600px;
}
.hero__cta { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hero__how { color: var(--slate); font-weight: 700; text-decoration: none; font-size: 16px; }
.hero__how:hover { text-decoration: underline; }

/* Google Play "coming soon" badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--ink);
  color: var(--white);
  text-decoration: none;
  padding: 13px 22px;
  border-radius: 14px;
}
a.badge:hover { background: #11181F; }
.badge__text { text-align: left; line-height: 1.1; }
.badge__sub {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
}
.badge__main { display: block; font-size: 18px; font-weight: 700; }

/* =========================================================================
   Home — "Why Ed?" gold callout
   ========================================================================= */
.callout-gold {
  background: var(--gold-bg);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-panel);
  padding: 36px 34px;
}
.callout-gold p {
  font-size: clamp(18px, 2.6vw, 22px);
  line-height: 1.5;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}

/* =========================================================================
   Home — feature cards
   ========================================================================= */
.features { max-width: 1080px; margin: 0 auto; padding: 8px 24px 64px; scroll-margin-top: 80px; }
.features__title {
  text-align: center;
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.features__lede { text-align: center; color: var(--muted); margin: 0 auto 40px; max-width: 520px; }

.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
/* 4-up on desktop, 2x2 on tablet, 1-up on mobile — never a lone 4th card */
@media (max-width: 960px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .cards-grid { grid-template-columns: 1fr; } }
.card {
  background: var(--white);
  border: 1px solid var(--slate-light);
  border-radius: var(--radius-card);
  padding: 26px 24px;
  box-shadow: var(--shadow-card);
}
.card__icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: var(--slate-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.card h3 { font-size: 18px; font-weight: 800; margin: 0 0 8px; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }

/* =========================================================================
   Home — reassurance band
   ========================================================================= */
.band { background: var(--slate); }
.band__inner { max-width: 760px; margin: 0 auto; padding: 42px 24px; text-align: center; }
.band p { margin: 0; color: var(--white); font-size: clamp(18px, 3vw, 24px); font-weight: 700; }

/* =========================================================================
   About
   ========================================================================= */
.lede { margin: 0 0 34px; font-size: 18px; line-height: 1.6; color: var(--text); }
.about-blocks { display: flex; flex-direction: column; gap: 34px; }
.about-blocks h2 { font-size: 21px; font-weight: 800; margin: 0 0 10px; color: var(--slate); }
.about-blocks p { margin: 0 0 14px; font-size: 17px; color: var(--text); }
.about-blocks p:last-child { margin-bottom: 0; }

.about-callout {
  margin-top: 40px;
  background: var(--slate-light);
  border-radius: var(--radius-panel);
  padding: 32px 30px;
}
.about-callout h2 { font-size: 21px; font-weight: 800; margin: 0 0 12px; }
.about-callout p { margin: 0; font-size: 17px; color: var(--ink-soft); }

/* =========================================================================
   Support
   ========================================================================= */
.btn {
  display: inline-block;
  background: var(--slate);
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 13px;
  white-space: nowrap;
}
.btn:hover { background: #34507A; }

.contact-card {
  background: var(--slate-light);
  border-radius: var(--radius-panel);
  padding: 30px 28px;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.contact-card__text { flex: 1; min-width: 220px; }
.contact-card h2 { font-size: 20px; font-weight: 800; margin: 0 0 6px; }
.contact-card p { margin: 0; color: var(--text); font-size: 16px; }

.faq-title { font-size: 22px; font-weight: 800; margin: 0 0 18px; }
.faq { display: flex; flex-direction: column; gap: 16px; margin-bottom: 44px; }
.faq__item { border: 1px solid var(--slate-light); border-radius: 16px; padding: 22px; }
.faq__item h3 { font-size: 17px; font-weight: 800; margin: 0 0 7px; }
.faq__item p { margin: 0; color: var(--muted); font-size: 15.5px; }

.crisis {
  background: var(--gold-bg);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-panel);
  padding: 30px 28px;
  text-align: center;
}
.crisis p { margin: 0 0 6px; color: var(--text); font-size: 16px; }
.crisis__phone {
  display: inline-block;
  font-size: 28px;
  font-weight: 800;
  color: var(--slate);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.crisis__phone:hover { text-decoration: underline; }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer { background: var(--footer-bg); color: var(--footer-text); margin-top: auto; }
.site-footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 48px 24px 40px; }
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--footer-border);
}
.site-footer__brand { max-width: 300px; }
.site-footer__brandline { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.site-footer__brandline img { height: 30px; width: auto; display: block; filter: brightness(1.7) saturate(0.85); }
.site-footer__brandline span { font-weight: 800; font-size: 17px; color: var(--white); }
.site-footer__brand p { margin: 0; font-size: 14px; color: var(--footer-muted); }

.footer-nav { display: flex; flex-direction: column; gap: 11px; }
.footer-nav a { font-size: 15px; color: var(--footer-text); text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }

.site-footer__legal { padding-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.site-footer__legal p { margin: 0; font-size: 13px; line-height: 1.6; }
.site-footer__disclaimer { color: var(--footer-muted); max-width: 760px; }
.site-footer__crisis { color: var(--footer-text); }
.site-footer__crisis a { color: var(--gold); font-weight: 700; text-decoration: none; }
.site-footer__crisis a:hover { text-decoration: underline; }
.site-footer__copy { color: var(--footer-faint); margin-top: 6px; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 640px) {
  .brand img { height: 46px; }
  .site-header__inner { padding: 10px 18px; }
  .nav { gap: 2px; }
  .nav__link { padding: 6px 9px; font-size: 14px; }
  .section { padding: 48px 22px; }
  .callout-gold { padding: 28px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* =========================================================================
   How it works page
   ========================================================================= */

/* Centered section heading */
.section-head { text-align: center; max-width: 660px; margin: 0 auto 36px; }
.section-head h2 { font-size: clamp(26px, 4vw, 34px); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 10px; }
.section-head p { margin: 0; color: var(--muted); font-size: 17px; }

/* Phone frame (pure CSS device bezel — no extra image assets) */
.phone {
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  background: #1F2933;
  border-radius: 34px;
  padding: 9px;
  box-shadow: 0 18px 44px rgba(31, 41, 51, 0.16);
}
.phone img { display: block; width: 100%; border-radius: 26px; }

/* Intro band */
.hiw-intro { background: linear-gradient(180deg, #E8EEF4 0%, #F3F7FB 60%, #FFFFFF 100%); }
.hiw-intro__inner { max-width: 720px; margin: 0 auto; padding: 56px 24px 48px; text-align: center; }
.hiw-intro__inner .eyebrow { display: block; }

/* ---- AI + USDA showcase ---- */
.showcase { max-width: 1000px; margin: 0 auto; padding: 8px 24px 8px; }
.showcase__pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 22px;
  max-width: 760px;
  margin: 0 auto;
}
.shot { flex: 0 1 268px; max-width: 268px; margin: 0; }
.shot figcaption { text-align: center; margin-top: 14px; font-size: 14px; color: var(--muted); }
.shot figcaption strong { display: block; color: var(--ink); font-size: 15px; font-weight: 800; margin-bottom: 2px; }
.showcase__arrow { flex: 0 0 auto; color: var(--slate); font-size: 30px; line-height: 1; }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 920px;
  margin: 44px auto 0;
}
.step { background: var(--white); border: 1px solid var(--slate-light); border-radius: 16px; padding: 24px 22px; }
.step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--slate); color: var(--white); font-weight: 800; font-size: 15px; margin-bottom: 14px;
}
.step h3 { font-size: 17px; font-weight: 800; margin: 0 0 8px; }
.step p { margin: 0; font-size: 15px; color: var(--muted); }

/* "USDA" chip, echoing the app's badge */
.usda-badge {
  display: inline-block;
  background: var(--gold-bg);
  color: var(--gold-ink);
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  padding: 3px 8px; border-radius: 6px; vertical-align: middle;
}

.usda-note {
  max-width: 820px; margin: 40px auto 0;
  background: var(--slate-light); border-radius: var(--radius-panel);
  padding: 26px 28px; display: flex; gap: 18px; align-items: flex-start;
}
.usda-note__badge { flex: 0 0 auto; margin-top: 2px; }
.usda-note p { margin: 0; font-size: 16px; color: var(--ink-soft); }
.usda-note strong { color: var(--slate); }

/* Demo-data footnote near the screenshots */
.demo-note {
  max-width: 760px; margin: 26px auto 0; padding: 0 24px;
  text-align: center; font-size: 13px; line-height: 1.5;
  color: var(--muted); font-style: italic;
}

/* ---- Walkthrough (alternating rows) ---- */
.walk { max-width: 980px; margin: 0 auto; padding: 8px 24px; display: flex; flex-direction: column; gap: 60px; }
.walk__row { display: grid; grid-template-columns: 288px 1fr; gap: 48px; align-items: center; }
.walk__row .walk__media { grid-column: 1; grid-row: 1; }
.walk__row .walk__text { grid-column: 2; grid-row: 1; }
.walk__row--flip { grid-template-columns: 1fr 288px; }
.walk__row--flip .walk__media { grid-column: 2; }
.walk__row--flip .walk__text { grid-column: 1; }
.walk__text h2 { font-size: clamp(22px, 3.4vw, 28px); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 12px; }
.walk__text p { margin: 0; font-size: 17px; color: var(--text); line-height: 1.6; }
.walk__text .eyebrow { margin-bottom: 8px; }

/* ---- Closing reassurance + CTA ---- */
.hiw-privacy { max-width: 760px; margin: 0 auto; padding: 8px 24px; }
.hiw-privacy__inner {
  background: #F0F7F2; border: 1px solid #BFE3CE; border-radius: var(--radius-panel);
  padding: 30px 30px; text-align: center;
}
.hiw-privacy__inner p { margin: 0; font-size: 17px; color: #243B30; }
.hiw-privacy__inner a { color: #0E7A54; font-weight: 700; }

.hiw-cta { max-width: 760px; margin: 0 auto; padding: 8px 24px; text-align: center; }
.hiw-cta h2 { font-size: clamp(22px, 3.4vw, 28px); font-weight: 800; margin: 0 0 8px; }
.hiw-cta p { margin: 0 0 24px; color: var(--muted); font-size: 17px; }
.hiw-cta__row { display: flex; flex-direction: column; align-items: center; gap: 14px; }

@media (max-width: 760px) {
  .walk__row, .walk__row--flip { grid-template-columns: 1fr; gap: 22px; max-width: 320px; margin: 0 auto; }
  .walk__row .walk__media, .walk__row--flip .walk__media,
  .walk__row .walk__text, .walk__row--flip .walk__text { grid-column: 1; grid-row: auto; }
}
@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; gap: 16px; max-width: 520px; }
}
@media (max-width: 600px) {
  .showcase__arrow { transform: rotate(90deg); margin: 2px 0; }
}

/* 2-row header on small screens so extra nav items fit cleanly */
@media (max-width: 560px) {
  .site-header__inner { flex-direction: column; align-items: center; gap: 8px; padding: 10px 16px; }
  .brand img { height: 44px; }
  .nav { gap: 2px 3px; }
  .nav__link { padding: 6px 8px; font-size: 13.5px; }
}

/* =========================================================================
   Beta CTA + long-form content pages (beta, delete)
   ========================================================================= */

/* Prominent "Beta" nav pill */
.nav__link--beta { background: var(--gold); color: var(--ink); font-weight: 800; }
.nav__link--beta:hover,
.nav__link--beta[aria-current="page"] { background: #D9A400; color: var(--ink); }

/* Hero primary CTA (beta) supporting line */
.hero__cta-note { margin: 12px auto 0; font-size: 14px; color: var(--muted); max-width: 410px; }

/* Button modifiers (compose with .btn) */
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: #D9A400; }
.btn--outline { background: transparent; color: var(--slate); border: 2px solid var(--slate); }
.btn--outline:hover { background: var(--slate-light); }
.btn--lg { font-size: 17px; padding: 14px 26px; }

/* Fine print */
.fine { color: var(--muted); font-size: 14.5px; line-height: 1.55; }

/* CTA button row */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 8px; }

/* Long-form prose (beta + delete body content) */
.prose h2 { font-size: 21px; font-weight: 800; color: var(--slate); margin: 34px 0 10px; }
.prose > p { margin: 0 0 14px; font-size: 17px; color: var(--text); line-height: 1.6; }
.prose ol, .prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin: 8px 0; font-size: 17px; color: var(--text); line-height: 1.55; }
.prose li strong, .prose > p strong { color: var(--ink); }
.prose a { color: var(--slate); font-weight: 700; }
.prose .fine { color: var(--muted); font-size: 14.5px; }

/* Perk callout (beta) */
.perk { background: var(--gold-bg); border: 1px solid var(--gold-border); border-left: 4px solid var(--gold); border-radius: 12px; padding: 20px 22px; margin: 24px 0; }
.perk__title { display: block; color: var(--slate); font-weight: 800; font-size: 17px; margin-bottom: 8px; }
.perk ul { margin: 0; padding-left: 20px; }
.perk li { margin: 8px 0; font-size: 16px; color: var(--ink-soft); }

/* Note box (delete) */
.note { background: var(--gold-bg); border: 1px solid var(--gold-border); border-radius: 14px; padding: 18px 20px; margin: 24px 0; font-size: 16px; color: var(--ink-soft); }