/* =====================================================================
   Shortlisted — design system
   Slate + indigo, professional/career tone. System fonts only (no
   third-party calls → faster, private, tighter CSP). Hand-built, no
   framework. Clean, readable, intentionally restrained.
   ===================================================================== */

:root{
  --ink:#0f172a; --ink-2:#334155; --muted:#64748b; --faint:#94a3b8;
  --line:#e2e8f0; --line-2:#cbd5e1; --bg:#f8fafc; --card:#fff;
  --indigo:#4f46e5; --indigo-d:#4338ca; --indigo-l:#e0e7ff; --indigo-bg:#eef2ff;
  --green:#059669; --green-bg:#ecfdf5; --amber:#b45309; --amber-bg:#fffbeb;
  --red:#dc2626; --red-bg:#fef2f2;
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.06);
  --shadow-lg:0 8px 40px rgba(15,23,42,.12);
  --r:14px; --r-sm:10px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,
    "Apple Color Emoji","Segoe UI Emoji",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font); background:var(--bg); color:var(--ink);
  line-height:1.6; -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
}
h1,h2,h3{margin:0; letter-spacing:-.02em; line-height:1.15}
a{color:var(--indigo-d); text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit; cursor:pointer}
[hidden]{display:none !important}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px}

/* ---------- Header ---------- */
.site-head{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.85);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; letter-spacing:-.03em; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-mark{width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,var(--indigo),#6366f1);
  display:grid; place-items:center; color:#fff; font-weight:800; box-shadow:0 2px 8px rgba(79,70,229,.3)}
.nav-cta{display:inline-flex; align-items:center; gap:8px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:var(--r-sm); font-weight:700; font-size:15px; padding:12px 20px; transition:.14s}
.btn-primary{background:var(--indigo); color:#fff; box-shadow:0 4px 14px rgba(79,70,229,.3)}
.btn-primary:hover{background:var(--indigo-d); text-decoration:none}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{background:#fff; color:var(--ink); border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--indigo); color:var(--indigo-d); text-decoration:none}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn-lg{padding:15px 28px; font-size:16px}

/* ---------- Hero ---------- */
.hero{padding:80px 0 64px; text-align:center;
  background:radial-gradient(1000px 500px at 50% -10%, var(--indigo-bg) 0%, transparent 60%)}
.hero h1{font-size:clamp(32px,5vw,52px); font-weight:800; max-width:18ch; margin:0 auto 20px}
.hero .lede{font-size:clamp(16px,2.2vw,20px); color:var(--muted); max-width:60ch; margin:0 auto 32px}
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.hero-note{margin-top:16px; font-size:13px; color:var(--faint)}
.pill{display:inline-block; font-size:13px; font-weight:600; color:var(--indigo-d);
  background:var(--indigo-bg); border:1px solid var(--indigo-l); border-radius:99px; padding:6px 14px; margin-bottom:22px}

/* ---------- Sections ---------- */
section{padding:56px 0}
.section-title{font-size:clamp(24px,3.5vw,34px); font-weight:800; text-align:center; margin-bottom:14px}
.section-sub{text-align:center; color:var(--muted); max-width:60ch; margin:0 auto 44px; font-size:16px}

.steps3{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{width:34px; height:34px; border-radius:9px; background:var(--indigo-bg); color:var(--indigo-d);
  font-weight:800; display:grid; place-items:center; margin-bottom:14px; border:1px solid var(--indigo-l)}
.step h3{font-size:18px; margin-bottom:8px}
.step p{color:var(--ink-2); font-size:14.5px; margin:0}

.features{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:8px}
.feature{display:flex; gap:14px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:var(--shadow)}
.feature .ico{flex:none; width:40px; height:40px; border-radius:10px; background:var(--green-bg); color:var(--green); display:grid; place-items:center; font-weight:800; font-size:18px}
.feature h3{font-size:16px; margin-bottom:5px}
.feature p{color:var(--ink-2); font-size:14px; margin:0}

.band{background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.faq{max-width:760px; margin:0 auto}
.faq-item{border-bottom:1px solid var(--line); padding:22px 0}
.faq-item h3{font-size:17px; margin-bottom:8px}
.faq-item p{color:var(--ink-2); margin:0; font-size:15px}

.cta-band{text-align:center}
.cta-band h2{font-size:clamp(24px,3.5vw,32px); margin-bottom:16px}

/* ---------- Footer ---------- */
.site-foot{border-top:1px solid var(--line); padding:36px 0; color:var(--muted); font-size:13.5px}
.site-foot .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center}
.site-foot a{color:var(--muted)}

/* ============ APP (the rehearsal tool) ============ */
.app-main{min-height:calc(100vh - 64px); padding:32px 0 64px}
.demo-banner{background:var(--amber-bg); border:1px solid #fde68a; color:var(--amber);
  border-radius:var(--r-sm); padding:11px 16px; font-size:13.5px; font-weight:600; margin-bottom:22px; text-align:center}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:26px}
.app-h{font-size:24px; font-weight:800; margin-bottom:8px}
.app-sub{color:var(--muted); margin-bottom:24px; font-size:15px}

label.fld{display:block; font-size:14px; font-weight:600; color:var(--ink-2); margin:0 0 8px}
textarea, input[type=text], select{
  width:100%; border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:12px 14px; font-size:15px; font-family:inherit; color:var(--ink); background:#fff; outline:none; resize:vertical}
textarea:focus, input:focus, select:focus{border-color:var(--indigo); box-shadow:0 0 0 3px var(--indigo-bg)}
.field{margin-bottom:18px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.help{font-size:12.5px; color:var(--faint); margin-top:6px}
.counter{font-size:12px; color:var(--faint); text-align:right; margin-top:4px}

/* chat / interview */
.chat{display:flex; flex-direction:column; gap:16px; margin-bottom:20px}
.bubble{max-width:80%; padding:14px 17px; border-radius:16px; font-size:15px; line-height:1.55; white-space:pre-wrap; word-wrap:break-word}
.bubble.ai{align-self:flex-start; background:#fff; border:1px solid var(--line); border-bottom-left-radius:5px; box-shadow:var(--shadow)}
.bubble.me{align-self:flex-end; background:var(--indigo); color:#fff; border-bottom-right-radius:5px}
.bubble .who{font-size:11.5px; font-weight:700; opacity:.7; margin-bottom:5px; text-transform:uppercase; letter-spacing:.03em}
.typing{display:inline-flex; gap:4px}
.typing span{width:7px; height:7px; border-radius:50%; background:var(--faint); animation:blink 1.2s infinite both}
.typing span:nth-child(2){animation-delay:.2s} .typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}

.progress-row{display:flex; align-items:center; gap:12px; margin-bottom:18px}
.pbar{flex:1; height:7px; background:var(--line); border-radius:99px; overflow:hidden}
.pbar > i{display:block; height:100%; background:var(--indigo); border-radius:99px; transition:width .35s}
.pcount{font-size:12.5px; color:var(--muted); font-weight:600; white-space:nowrap}

.answer-row{display:flex; gap:10px; align-items:flex-end}
.answer-row textarea{flex:1}

/* scorecard */
.verdict{display:flex; align-items:center; gap:18px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:24px; box-shadow:var(--shadow); margin-bottom:20px}
.score-ring{flex:none; width:84px; height:84px; border-radius:50%; display:grid; place-items:center;
  font-size:26px; font-weight:800; color:#fff; background:conic-gradient(var(--indigo) var(--deg,0deg), var(--line) 0)}
.score-ring > span{width:64px; height:64px; border-radius:50%; background:#fff; color:var(--ink); display:grid; place-items:center}
.verdict h2{font-size:20px; margin-bottom:4px}
.verdict p{color:var(--ink-2); margin:0; font-size:14.5px}
.qfb{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px; margin-bottom:14px; box-shadow:var(--shadow)}
.qfb .q{font-weight:700; margin-bottom:12px; font-size:15px}
.tag{display:inline-block; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:6px; margin-bottom:6px}
.tag.good{background:var(--green-bg); color:var(--green)} .tag.bad{background:var(--red-bg); color:var(--red)} .tag.model{background:var(--indigo-bg); color:var(--indigo-d)}
.qfb .blk{margin-bottom:12px; font-size:14px; color:var(--ink-2)}
.qfb .blk:last-child{margin-bottom:0}
.fixes{background:var(--indigo-bg); border:1px solid var(--indigo-l); border-radius:var(--r); padding:20px 22px; margin-bottom:20px}
.fixes h3{font-size:16px; color:var(--indigo-d); margin-bottom:10px}
.fixes ol{margin:0; padding-left:20px; color:var(--ink-2)} .fixes li{margin-bottom:7px}

.err{background:var(--red-bg); border:1px solid #fecaca; color:var(--red); border-radius:var(--r-sm); padding:14px 16px; font-size:14px; margin-bottom:16px}

@media (max-width:760px){
  .steps3,.features,.row2{grid-template-columns:1fr}
  .bubble{max-width:90%}
  section{padding:40px 0}
}