/* ==========================================================================
   Early Signal Research — one-page site
   Design: editorial, research-credible. Off-white ground, navy ink, one
   restrained amber accent. Serif headlines (Fraunces), sans body (Inter).
   ========================================================================== */

:root {
  --ink:        #0A0E1A;   /* cool blue-black ink, masthead / headlines / primary text */
  --ink-soft:   #59627A;   /* cool slate for secondary text */
  --paper:      #F6F8FB;   /* cool slate-tinted ground */
  --paper-2:    #EDF1F7;   /* deeper cool panel */
  --accent:     #2036FF;   /* signal blue, accents */
  --accent-ink: #1B2ED9;   /* deeper blue for text/links (AA on light) */
  --line:       #E4E8F0;   /* cool hairline rules */
  --white:      #FFFFFF;   /* card surface */

  --maxw: 1120px;
  --maxw-narrow: 720px;

  --serif: "Space Grotesk", "Inter", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* --- reset-ish --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--accent-ink); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.12; margin: 0; }
em { font-style: italic; }

/* --- layout --- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.narrow { max-width: var(--maxw-narrow); }
.center { text-align: center; }
.section { padding: 88px 0; }
.section + .section { border-top: 1px solid var(--line); }

/* --- buttons --- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  color: var(--paper);
  background: var(--ink);
  padding: 15px 30px;
  border-radius: 2px;
  text-decoration: none;
  transition: background .18s ease, transform .18s ease;
}
.btn:hover { background: #2a2418; transform: translateY(-1px); }
.btn--light {
  background: var(--accent);
  color: #06231f;
}
.btn--light:hover { background: #23c4b4; }

/* ============================ HERO ============================ */
.site-hero {
  background: var(--ink);
  color: var(--paper);
  padding: 26px 0 96px;
}
.wordmark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--paper);
  opacity: .92;
}
.hero-inner { max-width: 860px; margin-top: 84px; }
.hero-head {
  color: var(--white);
  font-size: clamp(2.35rem, 6vw, 4.15rem);
  letter-spacing: -0.015em;
}
.hero-head em { color: var(--accent); font-style: italic; }
.hero-sub {
  margin: 30px 0 40px;
  font-size: clamp(1.06rem, 2.2vw, 1.28rem);
  line-height: 1.55;
  color: #d8d2c4;
  max-width: 40em;
}
.hero-sub strong { color: var(--white); font-weight: 600; white-space: nowrap; }

/* ============================ STORY ============================ */
.section--story { background: var(--paper); padding: 76px 0; }
.story-lede {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.8vw, 1.72rem);
  line-height: 1.42;
  color: var(--ink);
  margin: 0;
}
.story-lede strong { font-weight: 600; color: var(--accent-ink); }

/* --- shared section heads --- */
.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-ink);
  margin: 0 0 14px;
}
.section-head {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  letter-spacing: -0.01em;
  max-width: 18em;
}
.section-intro {
  margin: 20px 0 0;
  font-size: 1.12rem;
  color: var(--ink-soft);
  max-width: 42em;
}

/* ============================ DEMO ============================ */
.section--demo { background: var(--paper-2); }
.ad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 48px 0 8px;
}
.ad-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.ad-card--winner {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.ad-flag {
  position: absolute;
  top: -12px; left: 18px;
  background: var(--accent);
  color: #06231f;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 5px 11px;
  border-radius: 2px;
}
.ad-shot {
  position: relative;
  aspect-ratio: 2 / 3;   /* matches the 768x1152 ad art — shows each ad whole, no crop */
  background: var(--paper-2);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ad-shot img { width: 100%; height: 100%; object-fit: cover; }
/* placeholder shown only when the real image is missing */
.ad-placeholder { display: none; }
.ad-shot.is-missing {
  background: repeating-linear-gradient(45deg, #ece6d7, #ece6d7 12px, #e6dfcd 12px, #e6dfcd 24px);
}
.ad-shot.is-missing .ad-placeholder {
  display: block;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px dashed var(--line);
  padding: 8px 12px;
  border-radius: 2px;
}
.ad-headline {
  font-size: 1.24rem;
  margin: 18px 0 8px;
  color: var(--ink);
}
.ad-finding {
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

.demo-readout { margin: 40px 0 0; font-size: 1.1rem; font-weight: 500; }
.demo-readout a { font-family: var(--serif); }
.disclosure {
  margin: 22px 0 0;
  font-size: 0.86rem;
  color: #7a7663;
  max-width: 46em;
  line-height: 1.5;
}
.demo-kicker {
  margin: 34px 0 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  color: var(--ink);
}

/* ============================ HOW IT WORKS ============================ */
.steps {
  list-style: none;
  margin: 46px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  counter-reset: none;
}
.step { display: flex; flex-direction: column; gap: 16px; }
.step-num {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--accent-ink);
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
}
.step p { margin: 0; font-size: 1.02rem; line-height: 1.5; color: var(--ink); }

/* ============================ WHY ============================ */
.why-frame {
  margin: 22px 0 40px;
  font-size: 1.14rem;
  line-height: 1.55;
  color: var(--ink);
  max-width: 42em;
}
.why-list { margin: 0; display: grid; gap: 26px; }
.why-item { border-top: 1px solid var(--line); padding-top: 20px; }
.why-item dt {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ink);
  margin-bottom: 6px;
}
.why-item dd { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }
.why-close { margin: 38px 0 0; font-weight: 600; color: var(--ink); }

/* ============================ PRICING ============================ */
.section--pricing { background: var(--paper-2); }
.price-block {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 46px 48px;
  text-align: center;
}
.price-head {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  color: var(--ink);
  margin: 0;
}
.price-unit { font-size: 1.1rem; font-weight: 500; color: var(--ink-soft); }
.price-founding {
  margin: 18px auto 0;
  max-width: 34em;
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--ink);
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.price-founding strong { color: var(--accent-ink); font-weight: 600; }
.price-lines {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 0;
  font-size: 1.02rem;
  color: var(--ink-soft);
}
.price-lines li { padding: 0 20px; }
.price-lines li + li { border-left: 1px solid var(--line); }

/* ============================ WHY — QUIET VARIANT ============================ */
/* Methodology section: same content, visually stepped back. */
.section--quiet { padding: 64px 0; }
.section--quiet .section-head { font-size: clamp(1.35rem, 3vw, 1.95rem); }
.section--quiet .why-frame { font-size: 1rem; margin: 18px 0 30px; }
.section--quiet .why-list { gap: 18px; }
.section--quiet .why-item { padding-top: 15px; }
.section--quiet .why-item dt { font-size: 1.05rem; margin-bottom: 4px; }
.section--quiet .why-item dd { font-size: 0.92rem; }
.section--quiet .why-close { font-size: 0.95rem; margin-top: 30px; }

/* ============================ SUBMIT ============================ */
.submit-head {
  font-size: clamp(1.8rem, 4.4vw, 2.8rem);
  margin: 0 auto 18px;
}
.submit-intro {
  max-width: 34em;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: 1.08rem;
  line-height: 1.55;
}
.submit-promise {
  margin: 22px 0 0;
  font-size: 0.92rem;
  color: #7a7663;
}

/* ============================ TESTIMONIAL (hidden) ============================ */
.testimonial p { font-family: var(--serif); font-size: 1.5rem; line-height: 1.4; }
.testimonial footer { margin-top: 16px; color: var(--ink-soft); font-size: 0.95rem; }

/* ============================ FOOTER ============================ */
.site-footer {
  background: var(--paper);
  padding: 34px 0;
  border-top: 1px solid var(--line);
}
.site-footer p { margin: 0; font-size: 0.9rem; color: #7a7663; }
.site-footer .footer-contact { margin-top: 6px; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 900px) {
  .ad-grid { grid-template-columns: 1fr; max-width: 460px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  body { font-size: 17px; }
  .section { padding: 62px 0; }
  .wrap { padding: 0 20px; }
  .hero-inner { margin-top: 56px; }
  .steps { grid-template-columns: 1fr; }
  .price-block { padding: 34px 24px; }
  .price-lines li + li { border-left: none; }
  .price-lines { flex-direction: column; gap: 6px; }
}

/* ==========================================================================
   APP COMPONENTS (merged from the Flask app: /start form, /study plan+report)
   Reuses the marketing palette/fonts; aliases the app's older var names.
   ========================================================================== */
:root{ --teal:var(--accent); --tealink:var(--accent-ink); --soft:var(--ink-soft); --paper2:var(--paper-2); }

/* minimal top bar for the app pages (logo -> home) */
.topbar{background:var(--ink);color:var(--paper);padding:20px 0;}
.topbar .wordmark{color:var(--paper);text-decoration:none;}
.appmain{padding:44px 0 84px;}
.reassure{color:var(--ink-soft);font-size:1.05rem;max-width:40em;margin:.2em 0 0;}

/* big call-to-action buttons on the landing */
.cta{font-size:1.08rem;padding:18px 44px;}
.cta-row{text-align:center;margin:40px 0 6px;}

/* form controls */
label{display:block;font-weight:600;margin:22px 0 6px;font-size:1rem;}
.hint{font-weight:400;color:var(--ink-soft);font-size:.9rem;}
input[type=text],input[type=email],textarea{width:100%;padding:12px 14px;border:1px solid var(--line);
  border-radius:6px;font:inherit;background:#fff;color:var(--ink);}
textarea{min-height:96px;resize:vertical;}
input[type=file]{width:100%;padding:14px;border:1px dashed var(--line);border-radius:6px;background:#fff;font:inherit;}
.btn--pay{background:var(--accent);color:#06231f;}
.btn--pay:hover{background:#23c4b4;}

/* plan + report cards */
.card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 28px;margin:20px 0;}
.price{font-family:var(--serif);font-weight:600;font-size:2.4rem;}
.muted{color:var(--ink-soft);}
.pill{display:inline-block;background:var(--paper-2);border:1px solid var(--line);border-radius:999px;
  padding:4px 12px;font-size:.85rem;margin:3px 6px 3px 0;}
ol.cells{padding-left:0;list-style:none;margin:0;}
ol.cells li{border-top:1px solid var(--line);padding:16px 0;}
ol.cells li b{font-family:var(--serif);}
.ad-thumb{display:block;max-width:230px;width:100%;height:auto;border:1px solid var(--line);border-radius:6px;margin:0 0 10px;}
ul.asks{margin:.3em 0 0;padding-left:1.1em;}
ul.asks li{padding:4px 0;line-height:1.45;}

/* ---- proposal / study-plan page (six-beat sales layout) ---- */
/* 1. Recognition */
.prop-eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;
  font-weight:600;color:var(--accent-ink);margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--line);}
.prop-head{font-size:clamp(1.9rem,5vw,2.8rem);letter-spacing:-.01em;margin:0 0 20px;}
.prop-quote{margin:0;padding:2px 0 2px 22px;border-left:3px solid var(--accent);
  font-family:var(--serif);font-weight:500;font-size:clamp(1.2rem,2.8vw,1.6rem);line-height:1.24;color:var(--ink);}
.prop-sub{color:var(--ink-soft);font-size:1.02rem;margin:18px 0 0;max-width:40em;}
/* 2. Stat strip */
.statstrip{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  margin:34px 0 0;padding:0;}
.statstrip li{background:var(--white);padding:20px 20px;display:flex;flex-direction:column;gap:5px;}
.stat-n{font-family:var(--serif);font-weight:600;font-size:1.8rem;line-height:1.05;
  color:var(--accent-ink);letter-spacing:-.01em;}
.stat-l{font-size:.84rem;color:var(--ink-soft);line-height:1.35;}
@media(min-width:560px){.statstrip{grid-template-columns:repeat(4,1fr);}}
/* shared section rhythm */
.prop-block{margin:46px 0 0;}
.prop-h2{font-size:clamp(1.3rem,3vw,1.65rem);margin:0 0 5px;}
.prop-note{color:var(--ink-soft);font-size:.95rem;margin:0 0 20px;}
/* 3. Ad gallery — contain, so mixed portrait/landscape uploads show whole */
.prop-gallery{display:grid;grid-template-columns:1fr;gap:20px;}
@media(min-width:640px){.prop-gallery{grid-template-columns:repeat(2,1fr);}
  .prop-gallery--3{grid-template-columns:repeat(3,1fr);}}
.prop-adcard{margin:0;background:var(--white);border:1px solid var(--line);border-radius:10px;
  padding:14px;display:flex;flex-direction:column;transition:box-shadow .15s ease,border-color .15s ease;}
.prop-adcard:hover{border-color:var(--accent);box-shadow:0 8px 24px rgba(20,28,46,.07);}
.prop-shot{position:relative;aspect-ratio:4/5;background:var(--paper-2);border-radius:5px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;margin-bottom:13px;}
.prop-shot img{width:100%;height:100%;object-fit:contain;}
.prop-shot.is-missing{background:repeating-linear-gradient(45deg,#ece6d7,#ece6d7 12px,#e6dfcd 12px,#e6dfcd 24px);}
.prop-shot-ph{font-size:.85rem;color:var(--ink-soft);background:var(--paper);border:1px dashed var(--line);
  padding:6px 12px;border-radius:4px;}
.prop-adname{font-size:1.08rem;margin:0 0 3px;}
.prop-admuted{color:var(--ink-soft);font-size:.9rem;margin:0;line-height:1.4;}
/* 4. Numbered protocol */
.protocol{list-style:none;counter-reset:step;padding:0;margin:10px 0 0;}
.protocol>li{position:relative;padding:0 0 26px 48px;}
.protocol>li:last-child{padding-bottom:0;}
.protocol>li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:-2px;
  width:31px;height:31px;border-radius:50%;background:var(--ink);color:var(--paper);
  font-family:var(--serif);font-size:1rem;display:flex;align-items:center;justify-content:center;}
.protocol>li:not(:last-child)::after{content:"";position:absolute;left:15px;top:36px;bottom:6px;width:1px;background:var(--line);}
.protocol h3{font-size:1.06rem;margin:5px 0 5px;}
.protocol p{margin:0 0 6px;}
.protocol .prop-pills{margin:9px 0 0;}
/* 5. Outcome */
.prop-outcome{background:var(--paper-2);border-radius:12px;padding:26px 28px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;}
.prop-outcome-text{flex:1 1 300px;}
.prop-outcome-text .prop-h2{margin-bottom:6px;}
.prop-outcome-text p{margin:0;color:var(--ink);}
.btn--proof{background:transparent;border:1.5px solid var(--accent-ink);color:var(--accent-ink);
  font-weight:600;padding:12px 22px;white-space:nowrap;}
.btn--proof:hover{background:var(--accent);border-color:var(--accent);color:#06231f;}
/* 6. The ask, de-risked */
.approve{background:var(--ink);color:var(--paper);border-radius:14px;padding:40px 32px;margin:44px 0 0;text-align:center;}
.approve-anchor{font-size:.9rem;color:#8A93A6;margin:0 0 10px;}
.approve-anchor s{color:#6B7486;}
.approve-price{font-family:var(--serif);font-weight:600;font-size:3.4rem;line-height:1;color:#F2F5FA;margin:0;}
.approve-includes{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;
  margin:18px auto 24px;padding:0;max-width:36em;}
.approve-includes li{color:#8A93A6;font-size:.92rem;position:relative;padding-left:20px;}
.approve-includes li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700;}
.approve .btn--pay{background:var(--accent);color:#06231f;font-size:1.1rem;padding:17px 46px;}
.approve .btn--pay:hover{background:#23c4b4;}
.approve-reassure{color:#8A93A6;font-size:.85rem;margin:20px auto 0;max-width:34em;line-height:1.5;}
.btn--pay:focus-visible,.btn--proof:focus-visible,.wordmark:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:3px;}

/* ---- founder review console (private) ---- */
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;}
.admin-tag{font-family:var(--sans);font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;color:var(--accent);border:1px solid var(--accent-ink);border-radius:999px;padding:3px 12px;}
.admin-status{color:var(--ink-soft);font-size:.95rem;margin:14px 0 0;}
.pill--live{background:var(--accent);color:#06231f;border-color:var(--accent);}
.admin-flash{background:var(--paper-2);border:1px solid var(--line);border-radius:8px;padding:12px 16px;margin:18px 0 0;font-size:.95rem;}
.admin-flash--go{background:#e6f7f4;border-color:var(--accent);color:var(--accent-ink);font-weight:600;}
.admin-edit{width:100%;min-height:420px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.9rem;line-height:1.5;padding:16px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);resize:vertical;}
.admin-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;}
.btn--ghost{background:transparent;border:1px solid var(--ink);color:var(--ink);}
.btn--ghost:hover{background:var(--paper-2);}
/* founder dashboard */
.table-scroll{overflow-x:auto;margin:10px 0 0;}
.admin-table{border-collapse:collapse;width:100%;font-size:.92rem;}
.admin-table th{text-align:left;font-weight:600;color:var(--ink-soft);font-size:.74rem;
  text-transform:uppercase;letter-spacing:.05em;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;}
.admin-table td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top;}
.admin-table td.ctr{text-align:center;}
.admin-table tbody tr:hover{background:var(--paper-2);}
.state{display:inline-block;font-family:var(--sans);font-size:.72rem;font-weight:600;
  background:var(--paper-2);border:1px solid var(--line);border-radius:5px;padding:2px 9px;letter-spacing:.02em;white-space:nowrap;}
.survey-list{padding-left:1.3em;margin:6px 0 0;}
.survey-list li{padding:5px 0;line-height:1.45;}
.q-kind{display:inline-block;font-family:var(--sans);font-size:.68rem;font-weight:600;color:var(--accent-ink);
  background:#e6f7f4;border-radius:4px;padding:1px 7px;margin-right:7px;text-transform:lowercase;vertical-align:middle;}
.status{font-size:1.1rem;}
.readout{background:#fff;border:1px solid var(--line);border-radius:8px;padding:28px 32px;}
.readout h1{font-size:1.6rem;} .readout h2{font-size:1.15rem;margin-top:1.2em;}

/* generating overlay */
.overlay{display:none;position:fixed;inset:0;background:rgba(30,26,19,.78);z-index:50;
  align-items:center;justify-content:center;padding:24px;}
.overlay.show{display:flex;}
.overlay-box{background:#fff;border-radius:12px;padding:40px 34px;max-width:440px;text-align:center;}
.overlay-box h3{margin:16px 0 8px;font-size:1.35rem;}
.overlay-box p{color:var(--ink-soft);margin:0;line-height:1.55;}
.spinner{width:40px;height:40px;border-radius:50%;border:4px solid var(--line);
  border-top-color:var(--accent);margin:0 auto;animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
/* circular progress ring (fills toward ~100% while the plan generates) */
.progress-ring{position:relative;width:104px;height:104px;margin:0 auto 4px;}
.progress-ring svg{width:100%;height:100%;transform:rotate(-90deg);}
.ring-bg{fill:none;stroke:var(--line);stroke-width:8;}
.ring-fg{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;
  transition:stroke-dashoffset .2s linear;}
.ring-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:600;font-size:1.5rem;color:var(--ink);}

.lede{color:var(--ink-soft);font-size:1.08rem;max-width:44em;margin:.2em 0 0;}