/* morningbrief — sunrise aesthetic */
:root{
  --cream:#FFFBF5; --sky:#FFF3E4; --sky2:#FDE8D3; --peach:#FBD8B8;
  --sun:#F4811F; --sun-deep:#E0670B; --rose:#FB7185;
  --ink:#1F1A16; --muted:#7A6F64; --line:#EBDFCF; --card:#FFFFFF;
  --good:#1E9E6A; --good-bg:#E9F7EF; --bad:#B14A3A; --bad-bg:#FBEDE9;
  --shadow:0 1px 2px rgba(60,40,20,.04),0 10px 30px rgba(180,120,60,.10);
  --shadow-lg:0 20px 60px rgba(180,110,50,.16);
  --r:16px; --maxw:980px;
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--sans); color:var(--ink); line-height:1.6;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--sky) 0%, var(--cream) 55%) fixed;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
em{font-style:italic; color:var(--sun-deep)}
a{color:var(--sun-deep)}

/* ── buttons ── */
.btn{
  font-family:var(--sans); font-weight:600; font-size:15px; cursor:pointer;
  border:1px solid transparent; border-radius:999px; padding:11px 22px;
  transition:transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,var(--sun),var(--sun-deep)); color:#fff; box-shadow:0 6px 16px rgba(224,103,11,.30)}
.btn.primary:hover{box-shadow:0 10px 24px rgba(224,103,11,.40)}
.btn.ghost{background:transparent; color:var(--muted); border-color:var(--line)}
.btn.ghost:hover{color:var(--ink); border-color:var(--peach)}
.btn.large{font-size:17px; padding:15px 30px}
.btn.small{font-size:14px; padding:9px 18px}
.btn:disabled{opacity:.4; cursor:not-allowed}
.link-btn{background:none;border:none;color:var(--sun-deep);font:inherit;font-weight:600;cursor:pointer;font-size:14px;padding:0}
.link-btn:hover{text-decoration:underline}

/* ── nav ── */
.nav{max-width:var(--maxw);margin:0 auto;padding:22px 24px;display:flex;justify-content:space-between;align-items:center}
.brand{font-family:var(--serif);font-weight:600;font-size:21px;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px}
.brand-sun{font-size:22px}

/* ── hero ── */
.hero{max-width:760px;margin:0 auto;padding:48px 24px 30px;text-align:center}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sun-deep);margin:0 0 18px}
.eyebrow.center{text-align:center}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(34px,6vw,56px);line-height:1.08;letter-spacing:-.01em;margin:0 0 20px}
.lede{font-size:clamp(16px,2.4vw,19px);color:var(--muted);max-width:620px;margin:0 auto 30px}
.hero-cta{display:flex;flex-direction:column;align-items:center;gap:12px}
.cta-note{font-size:13px;color:var(--muted)}

/* sample card in hero */
.hero-card{margin:54px auto 0;max-width:440px}
.brief-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:22px 24px;text-align:left;font-size:14.5px;
}
.brief-top{font-family:var(--serif);font-size:17px;font-weight:600;margin-bottom:14px}
.brief-line{padding:9px 12px;background:var(--good-bg);border-radius:10px;margin-bottom:12px}
.brief-sec{margin:9px 0;font-weight:500}
.brief-sub{color:var(--muted);font-size:13px;margin:-4px 0 10px 4px}
.brief-q{margin-top:14px;padding-top:13px;border-top:1px dashed var(--line);color:var(--sun-deep);font-weight:600}

/* ── bands ── */
.band{max-width:var(--maxw);margin:0 auto;padding:64px 24px}
.band.alt{background:linear-gradient(180deg,transparent,rgba(253,232,211,.4),transparent)}
.band-title{font-family:var(--serif);font-weight:500;font-size:clamp(26px,4vw,36px);text-align:center;margin:0 0 40px}

/* compare */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.compare-card{border-radius:var(--r);padding:26px 26px;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow)}
.compare-card h3{margin:0 0 16px;font-family:var(--serif);font-weight:600;font-size:20px}
.compare-card.bad{background:var(--bad-bg);border-color:#F1D6CE}
.compare-card.bad h3{color:var(--bad)}
.compare-card.good{background:var(--good-bg);border-color:#CDEBD9}
.compare-card.good h3{color:var(--good)}
.compare-card ul{margin:0;padding-left:20px;color:var(--ink)}
.compare-card li{margin:9px 0}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)}
.step-n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(180deg,var(--sun),var(--sun-deep));color:#fff;font-weight:600;margin-bottom:14px}
.step h3{margin:0 0 8px;font-family:var(--serif);font-weight:600;font-size:19px}
.step p{margin:0;color:var(--muted);font-size:14.5px}
.mid-cta{text-align:center;margin-top:38px}

/* honest */
.honest{max-width:680px;margin:0 auto;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:32px;box-shadow:var(--shadow)}
.honest h3{font-family:var(--serif);font-weight:600;font-size:21px;margin:0 0 12px}
.honest p{margin:0;color:var(--muted)}

/* footer */
.foot{max-width:var(--maxw);margin:0 auto;padding:40px 24px 60px;display:flex;justify-content:space-between;color:var(--muted);font-size:14px;border-top:1px solid var(--line)}

/* ── flow ── */
#flow{max-width:680px;margin:0 auto;padding:34px 24px 70px;min-height:100vh}
.flow-head{margin-bottom:24px}
.flow-progress{height:6px;background:var(--sky2);border-radius:999px;overflow:hidden;margin-bottom:12px}
.flow-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--rose),var(--sun));border-radius:999px;transition:width .35s ease}
.flow-meta{display:flex;justify-content:space-between;align-items:center}
.step-count{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.03em}

.section-card{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:30px 30px 8px}
.section-title{display:flex;gap:14px;align-items:flex-start;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.section-icon{font-size:30px;line-height:1}
.section-title h2{margin:0;font-family:var(--serif);font-weight:600;font-size:24px}
.section-title p{margin:4px 0 0;color:var(--muted);font-size:14px}

.q-list{display:flex;flex-direction:column}
.q{padding:18px 0;border-bottom:1px solid #F4ECE0}
.q:last-child{border-bottom:none}
.q-label{display:block;font-weight:600;font-size:15.5px;margin-bottom:4px}
.q-help{margin:0 0 10px;color:var(--muted);font-size:13px}
.field{width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-top:8px}
.field:focus{outline:none;border-color:var(--sun);box-shadow:0 0 0 3px rgba(244,129,31,.15);background:#fff}
textarea.field{resize:vertical;line-height:1.5}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{font-family:var(--sans);font-size:14px;font-weight:500;cursor:pointer;padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:var(--cream);color:var(--ink);transition:all .12s ease}
.chip:hover{border-color:var(--peach)}
.chip.active{background:linear-gradient(180deg,var(--sun),var(--sun-deep));color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(224,103,11,.25)}
.skip-note{color:var(--muted);font-size:14px;font-style:italic;margin:16px 0 18px}

.flow-nav{display:flex;justify-content:space-between;margin-top:24px}

/* ── loading ── */
#loading{min-height:100vh;display:grid;place-items:center}
.loading-wrap{text-align:center}
.sun-spinner{font-size:60px;animation:rise 1.4s ease-in-out infinite}
@keyframes rise{0%,100%{transform:translateY(6px) scale(.96);opacity:.7}50%{transform:translateY(-6px) scale(1.04);opacity:1}}
.loading-msg{margin-top:18px;font-family:var(--serif);font-size:20px;color:var(--muted)}

/* ── result ── */
#result{max-width:760px;margin:0 auto;padding:50px 24px 80px}
.result-wrap{text-align:center}
.result-h{font-family:var(--serif);font-weight:500;font-size:clamp(26px,4vw,38px);margin:6px 0 6px}
.result-sub{color:var(--muted);margin:0 0 28px;font-size:14px}
.prompt-shell{position:relative;text-align:left}
.prompt-box{width:100%;min-height:300px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;line-height:1.6;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow);resize:vertical}
.prompt-box:focus{outline:none;border-color:var(--sun)}
.copy{position:absolute;top:14px;right:14px}
.copy.copied{background:linear-gradient(180deg,var(--good),#177d54)}
.tips{text-align:left;background:var(--good-bg);border:1px solid #CDEBD9;border-radius:var(--r);padding:22px 24px;margin:24px 0}
.tips h3{margin:0 0 8px;font-family:var(--serif);font-weight:600;font-size:18px}
.tips p{margin:0;color:var(--ink)}
.result-nav{display:flex;gap:12px;justify-content:center;margin-top:8px}

/* ── responsive ── */
@media(max-width:720px){
  .compare,.steps{grid-template-columns:1fr}
  .section-card{padding:22px 20px 4px}
  .copy{position:static;margin-top:12px;width:100%}
  .foot{flex-direction:column;gap:10px;text-align:center}
}