/* ─────────────────────────────────────────────────────────────
   STR Insights Launch Wizard — brand theme
   Navy #1C3547 · gradient #4EDCB6 → #2CCDD6 → #00BBFF
   Display: Bricolage Grotesque · Body: Archivo
──────────────────────────────────────────────────────────────*/

:root{
  --bg:        #F4F8FB;
  --bg-deep:   #E7EFF5;
  --ink:       #1C3547;
  --ink-soft:  #45586A;
  --ink-faint: #7E8FA0;
  --line:      #D3E0EA;
  --card:      #FFFFFF;
  --mint:      #4EDCB6;
  --teal:      #2CCDD6;
  --blue:      #00BBFF;
  --accent:    #0E93C4;   /* legible accent for text on light bg */
  --good:      #14A87D;
  --bad:       #C24A2E;
  --grad: linear-gradient(120deg, var(--mint), var(--teal) 52%, var(--blue));
  --shadow: 0 1px 2px rgba(28,53,71,.06), 0 14px 34px -14px rgba(28,53,71,.22);
  --radius: 14px;
  --font-display: "Bricolage Grotesque", "Archivo", sans-serif;
  --font-body: "Archivo", "Helvetica Neue", sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(1100px 560px at 88% -12%, rgba(0,187,255,.10), transparent 62%),
    radial-gradient(900px 520px at -8% 112%, rgba(78,220,182,.12), transparent 58%),
    var(--bg);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

.frame{
  min-height:100vh;
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  max-width:1180px;
  margin:0 auto;
  padding:0 28px;
}

/* ── Masthead ─────────────────────────────────────────────── */
.masthead{
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 4px 18px;
}
.brand{ display:flex; align-items:center; gap:14px }
.brand-logo{ height:30px; width:auto; display:block }
.brand-rule{ width:1px; height:22px; background:var(--line) }
.brand-sub{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); font-weight:700;
}
.save-state{ font-size:12.5px; color:var(--ink-faint); min-height:1em; transition:opacity .3s }
.save-state.saved{ color:var(--good) }

/* ── Progress rail (phase groups + step counter) ──────────── */
.rail{
  display:flex; gap:0; align-items:center; flex-wrap:wrap;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:14px 0; row-gap:10px;
}
.phase-group{
  display:flex; align-items:center; gap:9px;
  padding:0 18px; position:relative;
}
.phase-group + .phase-group::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:22px; background:var(--line);
}
.phase-label{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:var(--ink-faint); transition:color .2s;
}
.phase-group.active .phase-label{ color:var(--ink) }
.phase-group.done .phase-label{ color:var(--good) }
.phase-pips{ display:flex; gap:5px }
.pip{
  width:11px; height:11px; border-radius:50%;
  border:1.5px solid var(--line); background:var(--card);
  padding:0; transition:all .2s; cursor:default;
}
.pip.done{ background:var(--good); border-color:var(--good); cursor:pointer }
.pip.done:hover{ transform:scale(1.25) }
.pip.active{
  background:var(--grad); border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(44,205,214,.2);
  width:13px; height:13px;
}
.rail-counter{
  margin-left:auto; font-size:12.5px; color:var(--ink-faint);
  white-space:nowrap; padding-left:18px;
}
.rail-counter b{ color:var(--ink); font-weight:700 }

/* revenue-manager team blocks (Foundation step) */
.rm-team{
  border-top:1px dashed var(--line); margin-top:14px; padding-top:14px;
}
.rm-team .rm-name{ font-family:var(--font-display); font-weight:700; font-size:16px }
.rm-team .rm-meta{
  font-size:11.5px; font-weight:600; color:var(--accent);
  letter-spacing:.03em; margin:2px 0 7px;
}
.rm-team p{ font-size:13px; line-height:1.5; color:var(--ink-soft) }
.rm-team .btn-link{ margin-top:10px }


/* ── Split stage ──────────────────────────────────────────── */
.stage{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:0;
  align-items:start;
  padding:34px 0 26px;
  animation:rise .45s ease both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

.pane-guide{ padding-right:44px; border-right:1px solid var(--line) }
.pane-action{ padding-left:44px }
.action-sticky{ position:sticky; top:24px; display:flex; flex-direction:column; gap:16px }

/* guide typography */
.kicker{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent); font-weight:700; margin-bottom:14px;
  display:flex; align-items:center; gap:12px;
}
.kicker::after{ content:""; flex:0 0 46px; height:2px; background:var(--grad); border-radius:2px }
.pane-guide h1{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(30px, 4vw, 42px); line-height:1.06;
  letter-spacing:-.015em; margin-bottom:18px;
}
.pane-guide h1 em{
  font-style:normal;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.lede{ font-size:16.5px; line-height:1.65; color:var(--ink-soft); margin-bottom:26px; max-width:56ch }
.lede strong{ color:var(--ink) }

.howto{ list-style:none; counter-reset:hstep; display:flex; flex-direction:column; gap:0 }
.howto li{
  counter-increment:hstep;
  position:relative; padding:14px 0 14px 52px;
  font-size:15px; line-height:1.6; color:var(--ink-soft);
  border-top:1px dashed var(--line);
}
.howto li:last-child{ border-bottom:1px dashed var(--line) }
.howto li::before{
  content:counter(hstep, decimal-leading-zero);
  position:absolute; left:0; top:14px;
  font-family:var(--font-display); font-weight:700; font-size:15px;
  color:var(--accent);
}
.howto li strong{ color:var(--ink); font-weight:600 }
.howto code{
  font-family:inherit; background:var(--bg-deep);
  border:1px solid var(--line); border-radius:6px;
  padding:1px 7px; font-size:13.5px; color:var(--ink); white-space:nowrap;
}

.note{
  margin-top:22px; padding:14px 18px;
  background:var(--bg-deep); border-left:3px solid var(--blue);
  border-radius:0 10px 10px 0;
  font-size:14px; line-height:1.6; color:var(--ink-soft);
}
.note strong{ color:var(--ink) }
.note a{ color:var(--accent) }
.note.moss{ border-left-color:var(--mint) }

/* ── Action cards ─────────────────────────────────────────── */
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px 22px 20px;
  position:relative; overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--grad); opacity:.9;
}
.card-tag{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; color:var(--ink-faint); margin-bottom:10px;
}
.card h3{
  font-family:var(--font-display); font-weight:700;
  font-size:19px; margin-bottom:6px; line-height:1.25;
}
.card p{ font-size:13.5px; line-height:1.55; color:var(--ink-soft) }
.card .perk{
  display:inline-block; margin-bottom:10px;
  font-size:11px; font-weight:700; letter-spacing:.06em;
  color:#0B7E52; background:rgba(78,220,182,.16);
  border:1px solid rgba(20,168,125,.35);
  padding:3px 10px; border-radius:99px;
}

.btn{
  font-family:var(--font-body); font-weight:600; font-size:14px;
  border-radius:10px; padding:12px 20px; cursor:pointer;
  border:1px solid transparent; transition:all .18s;
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
}
.btn-primary{ background:var(--ink); color:#fff }
.btn-primary:hover{ background:#0E2334; transform:translateY(-1px); box-shadow:0 6px 16px -6px rgba(0,187,255,.5) }
.btn-primary:disabled{ opacity:.35; cursor:not-allowed; transform:none; box-shadow:none }
.btn-ghost{ background:transparent; color:var(--ink-soft); border-color:var(--line) }
.btn-ghost:hover{ border-color:var(--ink-faint); color:var(--ink) }
.btn-link{
  width:100%; justify-content:center; margin-top:12px;
  background:var(--grad); color:var(--ink); font-weight:700; font-size:14.5px;
  box-shadow:0 6px 16px -8px rgba(44,205,214,.7);
}
.btn-link:hover{ transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 10px 22px -8px rgba(0,187,255,.6) }

/* checkbox confirm */
.confirm{
  display:flex; gap:12px; align-items:flex-start;
  margin-top:14px; padding:13px 14px;
  border:1.5px dashed var(--line); border-radius:10px;
  cursor:pointer; transition:all .2s; background:transparent;
}
.confirm:hover{ border-color:var(--teal) }
.confirm.on{ border-style:solid; border-color:var(--good); background:rgba(78,220,182,.08) }
.confirm input{ display:none }
.confirm .box{
  flex:0 0 20px; height:20px; border-radius:6px;
  border:1.5px solid var(--ink-faint); background:var(--card);
  display:grid; place-items:center; font-size:12px; color:#fff;
  transition:all .15s; margin-top:1px;
}
.confirm.on .box{ background:var(--good); border-color:var(--good) }
.confirm.on .box::before{ content:"✓" }
.confirm span{ font-size:13.5px; line-height:1.5; color:var(--ink-soft) }
.confirm.on span{ color:var(--ink) }

/* copyable email pill */
.copy-row{
  display:flex; align-items:center; gap:8px; margin-top:12px;
  background:var(--bg-deep); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px;
}
.copy-row .val{
  flex:1; font-size:13.5px; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.copy-row button{
  font-size:11.5px; font-weight:700; letter-spacing:.05em;
  border:1px solid var(--line); background:var(--card);
  border-radius:7px; padding:6px 11px; cursor:pointer; color:var(--ink-soft);
  transition:all .15s;
}
.copy-row button:hover{ color:var(--accent); border-color:var(--teal) }
.copy-row button.copied{ color:#fff; background:var(--good); border-color:var(--good) }

/* forms */
.field{ margin-top:14px }
.field label{
  display:block; font-size:12px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:6px;
}
.field input, .field textarea, .field select{
  width:100%; font-family:var(--font-body); font-size:14.5px; color:var(--ink);
  background:var(--card); border:1.5px solid var(--line); border-radius:10px;
  padding:11px 13px; transition:all .15s; outline:none;
}
.field textarea{ min-height:96px; resize:vertical; line-height:1.55 }
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:var(--teal); box-shadow:0 0 0 3px rgba(44,205,214,.18);
}
.field .hint{ font-size:12px; color:var(--ink-faint); margin-top:5px; line-height:1.5 }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }

/* choice cards (PMS) */
.choice{ display:flex; flex-direction:column; gap:14px }
.choice-card{
  text-align:left; background:var(--card); border:1.5px solid var(--line);
  border-radius:var(--radius); padding:20px; cursor:pointer;
  transition:all .18s; box-shadow:var(--shadow); font-family:var(--font-body);
}
.choice-card:hover{ border-color:var(--teal); transform:translateY(-2px) }
.choice-card.picked{
  border-color:var(--teal);
  background:linear-gradient(rgba(44,205,214,.06), rgba(0,187,255,.05));
  box-shadow:0 0 0 3px rgba(44,205,214,.18), var(--shadow);
}
.choice-card .cc-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px }
.choice-card .cc-name{ font-family:var(--font-display); font-weight:700; font-size:20px }
.choice-card .cc-badge{
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#0B7E52; background:rgba(78,220,182,.16); border:1px solid rgba(20,168,125,.35);
  padding:3px 9px; border-radius:99px;
}
.choice-card .cc-fit{ font-size:12px; font-weight:700; color:var(--accent); letter-spacing:.04em; margin-bottom:6px }
.choice-card p{ font-size:13.5px; color:var(--ink-soft); line-height:1.55 }

/* review table */
.review{ width:100%; border-collapse:collapse; font-size:14px }
.review th, .review td{ text-align:left; padding:10px 6px; border-bottom:1px dashed var(--line); vertical-align:top }
.review th{ width:42%; font-weight:600; color:var(--ink-faint); font-size:12.5px; letter-spacing:.03em }
.review td{ color:var(--ink); line-height:1.5; word-break:break-word }
.review .ok{ color:var(--good); font-weight:700 }
.review .miss{ color:var(--bad); font-weight:700 }

/* resume banner */
.resume-pill{
  display:flex; gap:10px; align-items:center;
  font-size:12.5px; color:var(--ink-soft);
  background:var(--bg-deep); border:1px solid var(--line);
  border-radius:10px; padding:10px 14px; line-height:1.5;
}
.resume-pill b{ color:var(--ink) }

/* footer nav */
.foot{
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--line); padding:16px 4px 26px; gap:16px;
}
.foot-left{ font-size:12.5px; color:var(--ink-faint); line-height:1.5 }
.foot-nav{ display:flex; gap:10px }

/* success */
.done-wrap{ text-align:center; padding:30px 0 10px }
.done-mark{
  width:74px; height:74px; margin:0 auto 22px; border-radius:50%;
  background:var(--grad); color:var(--ink); display:grid; place-items:center;
  font-size:32px; font-weight:700; box-shadow:var(--shadow);
  animation:pop .5s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes pop{ from{ transform:scale(.4); opacity:0 } to{ transform:scale(1); opacity:1 } }

.err{ color:var(--bad); font-size:13px; margin-top:10px; line-height:1.5 }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px){
  .frame{ padding:0 16px }
  .rail{ padding:12px 0 }
  .phase-group{ padding:0 12px; gap:7px }
  .phase-label{ font-size:10px; letter-spacing:.08em }
  .rail-counter{ width:100%; margin-left:0; padding-left:0; padding-top:4px; text-align:right }
  .stage{ grid-template-columns:1fr; gap:26px }
  .pane-guide{ padding-right:0; border-right:none }
  .pane-action{ padding-left:0 }
  .action-sticky{ position:static }
  .pane-guide h1{ font-size:30px }
  .brand-logo{ height:24px }
  .foot{ position:sticky; bottom:0; background:var(--bg); z-index:5 }
  .foot-left{ display:none }
  .foot-nav{ width:100%; justify-content:space-between }
}