/* ============ STURDY — design system ============ */
/* The level line: everything in this brand sits on a calm horizon. */
/* Contrast: --ember is AA (≥4.5:1) on paper; --ember-soft is AA on ink. */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Spline+Sans+Mono:wght@400;500&display=swap');

:root {
  --ink: #16211d;          /* deep pine-black */
  --ink-2: #24332d;
  --paper: #f4efe4;        /* warm paper */
  --paper-2: #ece5d4;
  --ember: #9d4413;        /* the one hot color — 5.6:1 on paper */
  --ember-soft: #e08b58;   /* ember for dark backgrounds — 6.3:1 on ink */
  --moss: #5c7266;
  --line: rgba(22, 33, 29, 0.28);
  --line-paper: rgba(244, 239, 228, 0.32);
  --sans: 'Instrument Sans', sans-serif;
  --serif: 'Instrument Serif', serif;
  --mono: 'Spline Sans Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* keyboard focus — visible on both paper and ink backgrounds */
:focus-visible { outline: 3px solid var(--ember-soft); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ember); color: var(--paper); }

.mono { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.serif { font-family: var(--serif); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 2rem;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav.on-dark {
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  border-bottom: 1px solid var(--line-paper);
  color: var(--paper);
}
.nav.on-dark .wordmark .lvl { background: var(--ember-soft); }
.wordmark {
  font-family: var(--serif); font-size: 1.5rem; letter-spacing: 0.01em;
  color: inherit; text-decoration: none; display: inline-flex; align-items: baseline; gap: 0.5rem;
}
.wordmark .lvl { display: inline-block; width: 28px; height: 3px; background: var(--ember); transform: translateY(-4px); border-radius: 2px; }
.nav-links { display: flex; gap: 1.8rem; align-items: center; }
.nav-links a { color: inherit; text-decoration: none; font-size: 0.92rem; font-weight: 500; opacity: 0.88; transition: opacity .2s; }
.nav-links a:hover { opacity: 1; }
/* .nav-links a outranks .btn-ember on specificity — restore the button's label */
.nav-links a.btn-ember { color: var(--paper); opacity: 1; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--sans); font-weight: 600; font-size: 1rem;
  padding: 0.9rem 1.7rem; border-radius: 4px;
  border: none; cursor: pointer; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .2s;
}
.btn-ember { background: var(--ember); color: var(--paper); box-shadow: 0 2px 0 rgba(0,0,0,0.25); }
/* Hover lifts the button; it does not repaint it. --ember-soft is specified as
   ember for DARK backgrounds, and as a fill on paper it drags the label under AA:
   paper on ember-soft is 2.29:1, and NO label colour clears 4.5:1 across the whole
   ember -> ember-soft sweep (they cross at ~3.8:1). Holding --ember keeps the
   audited 5.60:1 for the entire interaction. */
.btn-ember:hover { transform: translateY(-1px); box-shadow: 0 3px 0 rgba(0,0,0,0.25); }
.btn-ghost { background: transparent; color: inherit; border: 1px solid currentColor; opacity: 0.85; }
.btn-ghost:hover { opacity: 1; }
.btn-big { font-size: 1.1rem; padding: 1.1rem 2.2rem; }
/* dictation (assets/dictate.js) — injected only where the browser can transcribe */
.dictate-btn {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: transparent; color: inherit; border: 1px solid var(--line); border-radius: 4px;
  padding: 0.55rem 0.8rem; cursor: pointer; opacity: 0.85; flex-shrink: 0; transition: opacity .2s;
}
.dictate-btn:hover { opacity: 1; }
.dictate-btn.listening { border-color: var(--moss); color: var(--moss); opacity: 1; animation: dict-pulse 1.8s ease-in-out infinite; }
@keyframes dict-pulse { 50% { opacity: 0.6; } }

/* ---------- hero ---------- */
.hero {
  background: var(--ink); color: var(--paper);
  padding: 6rem 2rem 0; position: relative; overflow: hidden;
}
.hero-inner { max-width: 1080px; margin: 0 auto; position: relative; z-index: 2; }
.hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(3rem, 7.5vw, 5.6rem);
  line-height: 1.02; letter-spacing: -0.01em; max-width: 14ch;
}
.hero h1 em { font-style: italic; color: var(--ember-soft); }
.hero .sub {
  margin-top: 1.6rem; font-size: 1.2rem; max-width: 34rem; opacity: 0.92; line-height: 1.55;
}
.hero-cta { margin-top: 2.4rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.hero-note { font-size: 0.85rem; opacity: 0.82; margin-top: 0.9rem; }

/* the horizon line — always level */
.horizon {
  margin-top: 5rem; height: 1px; background: var(--line-paper); position: relative;
}
.horizon::after {
  content: ''; position: absolute; left: 50%; top: -5px; width: 90px; height: 11px;
  transform: translateX(-50%);
  border: 1px solid var(--ember-soft); border-radius: 6px;
  background: var(--ink);
}
.horizon::before {
  content: ''; position: absolute; left: 50%; top: -1px; width: 26px; height: 3px;
  transform: translateX(-50%); border-radius: 2px;
  background: var(--ember); z-index: 1;
  /* The bubble finds level ONCE and stays there — a level that wobbles
     forever tells the opposite story. Reduced-motion: static, centered. */
  animation: settle 3s ease-in-out 0.4s 1 both;
}
@keyframes settle {
  0% { transform: translateX(calc(-50% - 14px)); }
  45% { transform: translateX(calc(-50% + 8px)); }
  75% { transform: translateX(calc(-50% - 3px)); }
  100% { transform: translateX(-50%); }
}
.hero-tick { display: flex; justify-content: space-between; max-width: 1080px; margin: 0.7rem auto 0; padding-bottom: 2.2rem; opacity: 0.75; }

/* ---------- sections ---------- */
.section { padding: 5.5rem 2rem; }
.section-inner { max-width: 1080px; margin: 0 auto; }
.kicker { color: var(--ember); margin-bottom: 1.1rem; display: block; }
.section h2 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.1; max-width: 22ch;
}
.section .lede { margin-top: 1.2rem; font-size: 1.12rem; max-width: 38rem; opacity: 0.92; }

.dark { background: var(--ink); color: var(--paper); }
.dark .kicker { color: var(--ember-soft); }

/* how it works rail */
.rail { margin-top: 3.5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
.dark .rail { border-color: var(--line-paper); }
.rail-item { padding: 2rem 1.6rem 0 0; border-right: 1px solid var(--line); padding-right: 1.6rem; }
.dark .rail-item { border-color: var(--line-paper); }
.rail-item:last-child { border-right: none; }
.rail-item .num { font-family: var(--mono); color: var(--ember); font-size: 0.8rem; }
.rail-item h3 { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; margin: 0.7rem 0 0.5rem; }
.rail-item p { font-size: 0.95rem; opacity: 0.9; line-height: 1.55; }

/* phone/text mock */
.txt-demo { margin-top: 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.bubbles { display: flex; flex-direction: column; gap: 0.8rem; max-width: 26rem; }
.bubble { padding: 0.85rem 1.1rem; border-radius: 14px; font-size: 0.98rem; line-height: 1.45; max-width: 92%; }
.bubble.coach { background: var(--paper-2); color: var(--ink); border-bottom-left-radius: 4px; align-self: flex-start; }
.dark .bubble.coach { background: var(--ink-2); color: var(--paper); border: 1px solid var(--line-paper); }
.bubble.you { background: var(--ember); color: var(--paper); border-bottom-right-radius: 4px; align-self: flex-end; }
.bubble-meta { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; margin: 0.4rem 0 -0.2rem; }

/* pricing */
.price-card {
  margin-top: 3rem; border: 1px solid var(--line); border-radius: 8px;
  padding: 2.6rem; display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; background: var(--paper);
}
.price-num { font-family: var(--serif); font-size: 3.6rem; line-height: 1; }
.price-num span { font-size: 1.1rem; font-family: var(--sans); opacity: 0.8; }
.price-list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.4rem; }
.price-list li { padding-left: 1.5rem; position: relative; font-size: 0.98rem; }
.price-list li::before { content: '—'; position: absolute; left: 0; color: var(--ember); }

/* footer */
footer { background: var(--ink); color: var(--paper); padding: 3rem 2rem; }
.footer-inner { max-width: 1080px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
/* the footer link row grew past one line on narrow screens — let it wrap rather than
   push the page sideways. Scoped to the footer so the top nav is untouched. */
footer .fine { font-size: 0.8rem; opacity: 0.8; max-width: 44rem; line-height: 1.5; }
/* The header hides its link row on narrow screens (see the 900px block); the footer's
   row is the only nav left, so it wraps instead of pushing the page sideways. */
footer .nav-links { flex-wrap: wrap; row-gap: 0.9rem; }

/* .reveal scroll animations removed: content is always visible (no-JS safe,
   screenshot safe, reduced-motion safe). Class kept in markup as a no-op. */

/* ---------- interview ---------- */
.iv-shell { display: grid; grid-template-columns: 1fr 340px; min-height: calc(100vh - 65px); }
.iv-chat { padding: 2.5rem 2rem 8rem; max-width: 720px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 1.1rem; }
.iv-msg { display: flex; flex-direction: column; gap: 0.3rem; animation: rise .4s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.iv-msg.coach .bubble { background: #fff; border: 1px solid var(--line); align-self: flex-start; max-width: 85%; }
.iv-msg.you .bubble { align-self: flex-end; max-width: 85%; }
.iv-input-bar {
  position: fixed; bottom: 0; left: 0; right: 340px;
  background: linear-gradient(transparent, var(--paper) 30%);
  padding: 2rem 2rem 0.4rem; display: flex; flex-wrap: wrap; justify-content: center;
}
.iv-input-wrap { display: flex; gap: 0.7rem; width: 100%; max-width: 680px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 0.5rem 0.5rem 1.1rem; box-shadow: 0 8px 30px rgba(22,33,29,0.08); }
.iv-input-wrap textarea {
  flex: 1; border: none; outline: none; resize: none; font-family: var(--sans); font-size: 1rem; line-height: 1.5; padding: 0.55rem 0; background: transparent; max-height: 130px;
}
.iv-file {
  background: var(--ink); color: var(--paper); padding: 2rem 1.7rem; position: sticky; top: 65px; height: calc(100vh - 65px); overflow-y: auto;
}
.iv-file h4 { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; margin-bottom: 1.4rem; }
.file-line { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px dashed var(--line-paper); font-size: 0.88rem; }
.file-line .k { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.8; min-width: 86px; }
.file-line .v { opacity: 0.95; }
.file-line.pending .v { opacity: 0.6; font-style: italic; }
.file-line.new { animation: flash 1.6s ease; }
@keyframes flash { 0% { background: rgba(194,87,31,0.35); } 100% { background: transparent; } }
.iv-progress { margin-top: 1.6rem; }
.iv-progress .bar { height: 3px; background: var(--ink-2); border-radius: 2px; overflow: hidden; }
.iv-progress .fill { height: 100%; background: var(--ember); width: 0%; transition: width .6s ease; }
.iv-progress .lbl { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; margin-top: 0.5rem; }
.typing { display: inline-flex; gap: 4px; padding: 0.9rem 1.1rem; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--moss); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

/* ---------- plan / synthesis ---------- */
.plan-hero { background: var(--ink); color: var(--paper); padding: 4.5rem 2rem 3.5rem; }
.plan-inner { max-width: 820px; margin: 0 auto; }
.plan-hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.1; }
.plan-hero h1 em { color: var(--ember-soft); }
.plan-section { max-width: 820px; margin: 0 auto; padding: 3rem 2rem; }
.pattern-card {
  border: 1px solid var(--line); border-left: 3px solid var(--ember);
  background: #fff; border-radius: 6px; padding: 1.6rem 1.8rem; margin-top: 1.4rem;
}
.pattern-card h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; margin-bottom: 0.5rem; }
.pattern-card p { font-size: 0.98rem; opacity: 0.95; }
.pattern-card .tag { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember); }
.kid-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 1.4rem; }
.blurwall { position: relative; }
.blurwall .content { filter: blur(7px); pointer-events: none; user-select: none; }
.blurwall .gate {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  background: linear-gradient(180deg, transparent, var(--paper) 55%);
  text-align: center; padding: 2rem;
}
.blurwall .gate h3 { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; max-width: 24ch; }

/* ---------- trust ---------- */
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 2.6rem; }
.trust-card { border: 1px solid var(--line); border-radius: 6px; padding: 1.7rem; background: #fff; }
.trust-card h3 { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; margin-bottom: 0.55rem; }
.trust-card p { font-size: 0.95rem; opacity: 0.92; }

.section, .plan-section { scroll-margin-top: 80px; }
.hero-tick { padding-bottom: 3rem; }

/* proof strip under hero CTA */
.proof-strip { display: flex; gap: 2rem; margin-top: 2.6rem; flex-wrap: wrap; }
.proof-strip .proof { display: flex; flex-direction: column; gap: 0.15rem; }
.proof-strip .proof b { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; }
.proof-strip .proof span { font-size: 0.8rem; opacity: 0.82; }

/* email-me-my-plan block */
.plan-email {
  border: 1px solid var(--line); background: #fff; border-radius: 8px;
  padding: 1.6rem 1.8rem; margin: 2.2rem auto 0; max-width: 820px;
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
}
.plan-email p { flex: 1 1 220px; font-size: 0.95rem; opacity: 0.95; }
.plan-email form { display: flex; gap: 0.6rem; flex: 1 1 300px; }
.plan-email input {
  flex: 1; border: 1px solid var(--line); border-radius: 4px; padding: 0.75rem 0.9rem;
  font-family: var(--sans); font-size: 0.95rem; background: var(--paper);
}

/* mobile interview progress strip */
.iv-mobile-progress { display: none; }

/* mobile slot-fill toast — the file panel is hidden under 900px; this is its voice */
.iv-slot-toast { display: none; }

/* crisis line — footer resource on product pages, never a header triage question */
.crisis-foot { flex-basis: 100%; text-align: center; font-size: 0.75rem; opacity: 0.7; padding: 0.7rem 1rem 1rem; }
.crisis-foot a { color: inherit; }

@media (max-width: 900px) {
  .rail { grid-template-columns: 1fr 1fr; }
  .rail-item { border-right: none; border-bottom: 1px solid var(--line); padding-bottom: 1.6rem; }
  .txt-demo, .price-card, .kid-grid, .trust-grid { grid-template-columns: 1fr; }
  .iv-shell { grid-template-columns: 1fr; }
  .iv-file { display: none; }
  .iv-input-bar { right: 0; }
  .nav .nav-links > a:not(.btn) { display: none; }   /* top-level header links only — footer links stay (crisis 988 lives in .crisis-foot now) */
  .blurwall .content { max-height: 520px; overflow: hidden; }
  .iv-mobile-progress {
    display: block; position: sticky; top: 65px; z-index: 40;
    height: 4px; background: var(--paper-2);
  }
  .iv-mobile-progress .fill { height: 100%; background: var(--ember); width: 0%; transition: width .6s ease; }
  .iv-slot-toast {
    display: block; position: fixed; top: 82px; left: 50%; transform: translateX(-50%);
    background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 0.62rem;
    letter-spacing: 0.1em; text-transform: uppercase; padding: 0.4rem 0.8rem; border-radius: 999px;
    opacity: 0; transition: opacity .3s; z-index: 60; pointer-events: none; white-space: nowrap;
  }
  .iv-slot-toast.show { opacity: 0.96; }
}

/* FAQ — homepage objection block, also the FAQPage schema source */
.faq { display: grid; gap: 0; margin-top: 2.5rem; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); padding: 1.6rem 0; }
.faq-item h3 { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.25; margin-bottom: 0.6rem; }
.faq-item p { font-size: 1rem; line-height: 1.7; opacity: 0.9; max-width: 62ch; }
@media (min-width: 780px) { .faq-item { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2.5rem; align-items: start; } .faq-item h3 { margin-bottom: 0; } }

/* Comparison table — the OurFamilyWizard page */
.cmp { width: 100%; border-collapse: collapse; margin-top: 2rem; font-size: 0.98rem; }
.cmp th, .cmp td { text-align: left; padding: 0.9rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp th { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; font-weight: 400; }
.cmp td:first-child { font-weight: 500; }
.cmp-wrap { overflow-x: auto; }