:root{
  --bg:#FBF9F6;
  --card:#FFFFFF;
  --ink:#1C1A22;
  --muted:#726C7A;
  --violet:#6A3FD3;
  --violet-soft:#EFE9FB;
  --sand:#D9B382;
  --line:#E9E4DC;
  --radius:18px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Plus Jakarta Sans',sans-serif;
  line-height:1.6;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

/* ---------- Top thread nav (quick jump) ---------- */
.thread-nav{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(251,249,246,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:18px 24px;
}
.thread-inner{
  max-width:820px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:6px;
}
.thread-brand{
  display:flex;
  align-items:center;
  margin-right:auto;
}
.thread-brand img{
  height:26px;
  width:auto;
  display:block;
}
.steps{display:flex; align-items:center;}
.step-dot{
  width:10px;height:10px;
  border-radius:50%;
  background:var(--line);
  transition:all .4s ease;
  cursor:pointer;
  flex-shrink:0;
}
.step-dot.active{ background:var(--violet); box-shadow:0 0 0 4px var(--violet-soft); }
.step-dot.done{background:var(--sand);}
.step-connector{ width:18px;height:1px; background:var(--line); }
@media(max-width:560px){ .step-connector{width:10px;} }

/* ---------- Layout ---------- */
main{
  max-width:760px;
  margin:0 auto;
  padding:0 24px 140px;
}
header.hero{ padding:64px 0 8px; text-align:left; }
.eyebrow{
  font-size:13px; font-weight:600; letter-spacing:.04em;
  color:var(--violet); margin:0 0 16px;
  display:flex; align-items:center; gap:8px;
}
.eyebrow::before{ content:""; width:20px;height:1px; background:var(--sand); }
h1{
  font-family:'Fraunces',serif; font-weight:500;
  font-size:clamp(30px,4.4vw,42px); line-height:1.18;
  margin:0 0 20px; color:var(--ink);
}
h1 .accent{color:var(--violet);}
.lede{ color:var(--muted); font-size:16px; max-width:50ch; margin:0 0 56px; }

/* ---------- Intro video slot ---------- */
.video-slot{
  margin-bottom:64px;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--card);
}
.video-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--violet-soft),#FBF3E8);
  display:flex;
  align-items:center;
  justify-content:center;
}
.video-frame .play-btn{
  width:64px;height:64px;
  border-radius:50%;
  background:var(--violet);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px -8px rgba(106,63,211,0.5);
}
.video-frame .play-btn svg{width:22px;height:22px;fill:#fff;margin-left:3px;}
.video-caption{
  padding:16px 22px;
  font-size:13px;
  color:var(--muted);
  border-top:1px solid var(--line);
}
/* NOTE for Tyler: replace .video-frame contents with an <iframe> embed (Loom/YouTube)
   once your intro walkthrough is recorded. Keep aspect-ratio:16/9 on the wrapper. */

/* ---------- Timeline thread ---------- */
.timeline{ position:relative; }
.timeline::before{
  content:"";
  position:absolute;
  top:22px; bottom:22px; left:21px;
  width:2px;
  background:linear-gradient(180deg, var(--violet) 0%, var(--sand) 100%);
  opacity:0.35;
}
.tl-item{
  position:relative;
  display:flex;
  gap:28px;
  margin-bottom:96px;
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.tl-item.in-view{ opacity:1; transform:translateY(0); }
.tl-item:last-of-type{ margin-bottom:0; }
.tl-marker{
  position:relative;
  z-index:2;
  flex-shrink:0;
  width:44px;height:44px;
  border-radius:50%;
  background:var(--card);
  border:2px solid var(--violet-soft);
  color:var(--violet);
  font-family:'Fraunces',serif;
  font-size:15px;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .4s ease, background .4s ease;
}
.tl-item.in-view .tl-marker{
  border-color:var(--violet);
  background:var(--violet-soft);
}
.tl-item:hover .tl-marker{
  box-shadow:0 0 0 5px var(--violet-soft), 0 0 24px -4px rgba(106,63,211,0.5);
}
.tl-content{ flex:1; min-width:0; }

section.block{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:36px 34px;
  scroll-margin-top:90px;
  transition:border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
section.block:hover{
  border-color:var(--violet);
  box-shadow:0 0 0 1px var(--violet), 0 0 40px -6px rgba(106,63,211,0.45), 0 0 90px -20px rgba(106,63,211,0.3);
  transform:translateY(-2px);
}
@media (prefers-reduced-motion: reduce){
  section.block:hover{ transform:none; }
}
@media(max-width:560px){
  section.block{padding:26px 20px;}
  .tl-item{gap:16px;}
  .tl-marker{width:36px;height:36px;font-size:13px;}
  .timeline::before{left:17px;}
}
h2{ font-family:'Fraunces',serif; font-weight:500; font-size:22px; margin:0 0 6px; color:var(--ink); }
.block-note{ color:var(--muted); font-size:14px; margin:0 0 30px; max-width:52ch; }

.field{margin-bottom:24px;}
.field label{ display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:8px; }
.field .hint{ font-weight:400; color:var(--muted); font-size:13px; display:block; margin-top:6px; }
input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea{
  width:100%; background:#FCFBF9; border:1.5px solid var(--line); color:var(--ink);
  font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; padding:12px 15px; border-radius:11px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
textarea{resize:vertical; min-height:92px;}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--violet); box-shadow:0 0 0 4px var(--violet-soft); }
::placeholder{color:#B4AEB8;}

.row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:560px){.row{grid-template-columns:1fr;}}

.radio-grid, .check-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.pill{position:relative;}
.pill input{ position:absolute; opacity:0; width:100%;height:100%; cursor:pointer; margin:0; top:0;left:0; }
.pill span{
  display:inline-flex; align-items:center; padding:9px 16px;
  border:1.5px solid var(--line); border-radius:20px; font-size:13px; font-weight:500;
  color:var(--muted); background:#FCFBF9; transition:all .2s ease;
}
.pill input:checked + span{ border-color:var(--violet); color:var(--violet); background:var(--violet-soft); }
.pill input:focus-visible + span{ outline:2px solid var(--violet); outline-offset:2px; }

.credential-card{
  border:1.5px solid var(--sand);
  background:linear-gradient(180deg, #FBF3E8, transparent);
  border-radius:14px; padding:22px 24px;
}
.credential-card p{ margin:0 0 16px; color:var(--muted); font-size:14px; }
.credential-card p strong{color:var(--ink); font-weight:600;}

button.submit{
  font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:600;
  background:var(--violet); color:#fff; border:none; padding:15px 32px; border-radius:30px;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
button.submit:hover{ background:#5C33BE; box-shadow:0 8px 20px -6px rgba(106,63,211,0.45); transform:translateY(-1px); }
button.submit:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.status-msg{ margin-top:16px; font-size:13px; color:#3A8A63; display:none; }
.status-msg.error{color:#C1553C;}
.status-msg.show{display:block;}

footer.close{ text-align:center; padding:80px 0 0; color:var(--muted); font-size:13px; }