/* ============================================================
   Coaching with GROW — course styles
   Built on Direction A "Clinic": calm, blue-structural, centered.
   Fixed frame 1024 x 680, scaled to fit viewport by the shell.
   ============================================================ */

.frame{
  width:1024px; height:680px; position:relative; overflow:hidden;
  background:var(--bg-cool); color:var(--ink);
  font-family:var(--font); -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
}
.frame *{ box-sizing:border-box; }
.frame h1,.frame h2,.frame h3,.frame h4{ margin:0; font-weight:600; letter-spacing:-.01em; }
.frame p{ margin:0; }

/* ---------------- persistent header ---------------- */
.hd{ height:62px; flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:0 40px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.55); }
.hd .brand{ display:flex; align-items:center; gap:11px; }
.hd .brand img{ width:24px; height:24px; }
.hd .brand .wm{ font-weight:600; font-size:15px; letter-spacing:.01em; }
.hd .brand .wm span{ color:var(--red); }

/* GROW stepper in header */
.steps{ display:flex; align-items:center; gap:0; }
.steps .s{ display:flex; align-items:center; gap:9px; }
.steps .node{ display:flex; flex-direction:column; align-items:center; }
.steps .glyph{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:var(--ink-40); background:#fff; border:1.5px solid var(--line); }
.steps .lbl{ font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-40); margin-top:5px; }
.steps .s.done .glyph{ background:var(--blue-tint); border-color:var(--blue-tint2); color:var(--blue-deep); }
.steps .s.active .glyph{ background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 4px 12px rgba(72,156,212,.35); }
.steps .s.active .lbl{ color:var(--blue-deep); font-weight:700; }
.steps .bar{ width:26px; height:2px; background:var(--line); margin:0 6px 16px; border-radius:2px; }
.steps .bar.done{ background:var(--blue-tint2); }

.hd .phase{ font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-40); }
.backlink{ background:none; border:none; font-family:var(--font); cursor:pointer; color:var(--ink-40);
  font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px; padding:6px 4px; transition:.15s; }
.backlink:hover{ color:var(--blue-deep); }
.backlink[disabled]{ opacity:0; pointer-events:none; }

/* ---------------- body region ---------------- */
.body{ flex:1; position:relative; overflow:hidden; }
.screen{ position:absolute; inset:0; display:flex; flex-direction:column; }

/* shared kicker / buttons */
.kicker{ color:var(--blue-deep); font-weight:600; letter-spacing:.18em; text-transform:uppercase; font-size:13px; }
.btn{ font-family:var(--font); cursor:pointer; border:none; font-weight:600; transition:.16s; white-space:nowrap; }
.btn-primary{ background:var(--red); color:#fff; font-size:17px; padding:15px 38px; border-radius:999px;
  box-shadow:0 8px 20px rgba(227,23,55,.22); }
.btn-primary:hover{ background:var(--red-deep); box-shadow:0 10px 24px rgba(227,23,55,.30); transform:translateY(-1px); }
.btn-primary:active{ transform:translateY(0); }
.btn-ghost{ background:#fff; color:var(--ink); border:1.5px solid var(--line); font-size:15px; padding:13px 28px; border-radius:999px; }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue-deep); }
.btn-primary .arr{ margin-left:8px; }

/* image placeholder for characters */
.ph{ position:relative; background:repeating-linear-gradient(45deg,#eef2f6 0 10px,#e7edf3 10px 20px);
  border:1px dashed #c4cdd6; display:flex; align-items:center; justify-content:center; text-align:center; }
.ph .ph-l{ font-family:ui-monospace,Menlo,monospace; font-size:11px; color:#8b95a0; letter-spacing:.02em; padding:0 10px; line-height:1.5; }

/* ============================================================
   SCREEN 1 — Intro
   ============================================================ */
.intro{ flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:0 88px; }
.intro .kicker{ margin-bottom:22px; }
.intro h1{ font-size:46px; line-height:1.05; max-width:17ch; }
.intro h1 em{ font-style:normal; color:var(--red); }
.intro p{ font-size:18px; line-height:1.62; color:var(--ink-60); max-width:54ch; margin-top:22px; }
.intro .btn-primary{ margin-top:36px; }
.intro .meta{ display:flex; gap:18px; justify-content:center; align-items:center; margin-top:28px; color:var(--ink-40); font-size:13px; font-weight:500; }
.intro .meta .pip{ width:4px; height:4px; border-radius:50%; background:var(--ink-40); }

/* ============================================================
   SCREEN 2 — Teach the model (interactive orbit reveal)
   ============================================================ */
.teach{ flex:1; display:grid; grid-template-columns:1fr 1fr; }
.teach .lt{ padding:48px 28px 48px 56px; display:flex; flex-direction:column; justify-content:center; }
.teach h2{ font-size:32px; line-height:1.12; margin-top:14px; max-width:16ch; }
.teach .lead{ font-size:16px; line-height:1.58; color:var(--ink-60); margin-top:14px; max-width:42ch; }
.teach .stagelist{ margin-top:22px; display:flex; flex-direction:column; gap:9px; }
.teach .sl{ display:flex; gap:14px; align-items:flex-start; text-align:left; width:100%;
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-md); padding:13px 16px;
  cursor:pointer; font-family:var(--font); }
.teach .sl:hover{ border-color:var(--blue); box-shadow:var(--shadow-sm); }
.teach .sl.on{ border-color:var(--blue); background:var(--blue-tint); }
.teach .sl .b{ font-weight:700; color:var(--blue-deep); width:70px; flex:none; font-size:14px; letter-spacing:.06em; padding-top:1px; }
.teach .sl .d{ font-size:14px; color:var(--ink-60); line-height:1.45; display:none; }
.teach .sl.on .d{ display:block; margin-top:3px; }
.teach .sl .hint{ font-size:13px; color:var(--ink-40); line-height:1.4; }
.teach .sl.on .hint{ display:none; }
.teach .rt{ position:relative; display:flex; align-items:center; justify-content:center; }

/* orbit graphic */
.orbit{ position:relative; width:420px; height:420px; }
.orbit svg{ position:absolute; inset:0; }
.orbit-center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; }
.orbit-center .big{ font-size:34px; font-weight:700; color:var(--ink); letter-spacing:.02em; }
.orbit-center .lbl{ font-size:12px; letter-spacing:.28em; color:var(--ink-40); text-transform:uppercase; margin-top:6px; }
.orbit-node{ position:absolute; width:92px; height:92px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; align-items:center; justify-content:center; border:2px solid var(--blue-tint2);
  transform:translate(-50%,-50%); }
.orbit-node.on{ border-color:var(--blue); background:var(--blue); box-shadow:0 10px 26px rgba(72,156,212,.4); transform:translate(-50%,-50%) scale(1.06); }
.orbit-node .g{ font-size:30px; font-weight:700; color:var(--blue-deep); line-height:1; }
.orbit-node.on .g{ color:#fff; }
.orbit-node .n{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-40); margin-top:3px; }
.orbit-node.on .n{ color:rgba(255,255,255,.85); }

/* ============================================================
   SCREEN 3 — Teach powerful questions (4 cards)
   ============================================================ */
.qteach{ flex:1; display:flex; flex-direction:column; padding:40px 56px 44px; }
.qteach .kicker{ }
.qteach h2{ font-size:30px; line-height:1.12; margin-top:12px; max-width:30ch; }
.qteach h2 em{ font-style:normal; color:var(--red); }
.qteach .lead{ font-size:16px; line-height:1.55; color:var(--ink-60); margin-top:10px; max-width:64ch; }
.qcards{ flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:24px; }
.qcard{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 20px;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.qcard .badge{ width:40px; height:40px; border-radius:11px; background:var(--blue-tint); color:var(--blue-deep);
  display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; }
.qcard .nm{ font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--ink); margin-top:14px; }
.qcard .sub{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-40); font-weight:600; margin-top:2px; }
.qcard ul{ margin:14px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px; }
.qcard li{ font-size:13px; line-height:1.45; color:var(--ink); font-style:italic; padding-left:14px; position:relative; }
.qcard li::before{ content:''; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:var(--blue); }
.qteach .foot{ display:flex; align-items:center; justify-content:space-between; margin-top:22px; }
.qteach .foot .msg{ font-size:15px; color:var(--ink-60); max-width:60ch; }
.qteach .foot .msg b{ color:var(--ink); }

/* ============================================================
   SCREEN 4 — Setup: meet Jordan
   ============================================================ */
.setup{ flex:1; display:grid; grid-template-columns:380px 1fr; }
.setup .lt{ position:relative; padding:0; }
.setup .portrait{ position:absolute; inset:40px 24px 40px 56px; border-radius:var(--r-lg); }
.setup .portrait .tag{ position:absolute; left:18px; bottom:18px; background:rgba(255,255,255,.92);
  border-radius:999px; padding:7px 16px; font-size:13px; font-weight:600; box-shadow:var(--shadow-sm); white-space:nowrap; }
.setup .rt{ padding:48px 64px 48px 28px; display:flex; flex-direction:column; justify-content:center; }
.setup h2{ font-size:34px; line-height:1.1; }
.setup .rt p{ font-size:16px; line-height:1.6; color:var(--ink-60); margin-top:16px; max-width:46ch; }
.setup .rt p b{ color:var(--ink); font-weight:600; }
.statcard{ display:flex; gap:14px; margin-top:22px; }
.stat{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:14px 18px; box-shadow:var(--shadow-sm); flex:1; }
.stat .k{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-40); font-weight:600; }
.stat .v{ display:flex; align-items:baseline; gap:8px; margin-top:7px; }
.stat .v .num{ font-size:26px; font-weight:700; color:var(--ink); }
.stat .v .delta{ font-size:13px; font-weight:700; color:var(--red); display:inline-flex; align-items:center; gap:3px; }
.stat .bars{ display:flex; align-items:flex-end; gap:5px; height:26px; margin-top:10px; }
.stat .bars i{ width:9px; background:var(--blue-tint2); border-radius:2px; }
.stat .bars i.lo{ background:var(--red); }
.setup .btn-primary{ align-self:flex-start; margin-top:30px; }

/* ============================================================
   SCREENS 5-8 — Decision
   ============================================================ */
.dec{ flex:1; display:flex; flex-direction:column; padding:30px 56px 34px; }
.dec .stagehd{ display:flex; align-items:center; gap:14px; }
.dec .stagechip{ display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue-deep); }
.dec .stagechip .dot{ width:9px; height:9px; border-radius:50%; background:var(--blue); }
.dec .stagehd .of{ font-size:12px; color:var(--ink-40); font-weight:600; letter-spacing:.08em; }

.scene{ display:flex; gap:20px; align-items:center; margin-top:16px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:18px 22px; box-shadow:var(--shadow-sm); }
.scene .av{ width:74px; height:74px; border-radius:16px; flex:none; }
.scene .nm{ font-weight:700; font-size:12px; color:var(--ink-40); letter-spacing:.08em; text-transform:uppercase; }
.scene .said{ font-size:18px; line-height:1.4; margin-top:5px; }
.scene .said em{ font-style:italic; color:var(--ink-60); }

.dec .tp{ font-size:13.5px; color:var(--blue-deep); margin-top:14px; line-height:1.5; padding-left:14px; border-left:3px solid var(--blue); }
.dec .tp b{ font-weight:700; }
.dec .q{ font-size:19px; font-weight:600; margin-top:14px; line-height:1.35; }

.choices{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.choice{ text-align:left; background:#fff; border:1.5px solid var(--line); border-radius:var(--r-md);
  padding:14px 18px 14px 50px; font-size:15.5px; line-height:1.4; color:var(--ink); cursor:pointer;
  font-family:var(--font); position:relative; }
.choice .k{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:24px; height:24px; border-radius:50%;
  border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--ink-40); }
.choice i{ font-style:italic; }
.choice:hover{ border-color:var(--blue); box-shadow:var(--shadow-sm); }
.choice:hover .k{ border-color:var(--blue); color:var(--blue-deep); }
.choice.picked{ border-color:var(--blue); background:var(--blue-tint); }
.choice.picked .k{ background:var(--blue); border-color:var(--blue); color:#fff; }
.choices.locked .choice{ cursor:default; }
.choices.locked .choice:not(.picked){ opacity:.5; }
.choices.locked .choice:not(.picked):hover{ border-color:var(--line); box-shadow:none; }
.choices.locked .choice:not(.picked):hover .k{ border-color:var(--line); color:var(--ink-40); }

/* reaction */
.react{ margin-top:14px; display:flex; gap:14px; align-items:flex-start;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 20px;
  border-left-width:4px; }
.react.great{ border-left-color:var(--green); background:var(--green-tint); }
.react.okay{ border-left-color:var(--amber); background:var(--amber-tint); }
.react.poor{ border-left-color:var(--red); background:var(--red-tint); }
.react .av{ width:42px; height:42px; border-radius:50%; flex:none; }
.react .bub{ font-size:15.5px; line-height:1.45; }
.react .bub b{ font-weight:700; }
.react .note{ margin-top:9px; font-size:13.5px; line-height:1.5; color:var(--ink-60); display:flex; gap:8px; }
.react .note .tag{ font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:10.5px; flex:none; padding-top:2px; }
.react.great .note .tag{ color:var(--green); }
.react.okay .note .tag{ color:var(--amber); }
.react.poor .note .tag{ color:var(--red); }
@keyframes rise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* decision footer */
.dec .actions{ margin-top:auto; padding-top:14px; display:flex; justify-content:flex-end; }
.dec .actions .btn-primary{ font-size:15px; padding:13px 30px; }

/* ============================================================
   SCREEN 8-FAIL — conversation stalls
   ============================================================ */
.fail{ flex:1; display:grid; grid-template-columns:360px 1fr; background:#f1f3f6; }
.fail .lt{ position:relative; }
.fail .portrait{ position:absolute; inset:48px 24px 48px 56px; border-radius:var(--r-lg); filter:grayscale(.4) opacity(.85); }
.fail .rt{ padding:52px 64px 52px 28px; display:flex; flex-direction:column; justify-content:center; }
.fail .kicker{ color:var(--ink-40); }
.fail h2{ font-size:32px; line-height:1.12; margin-top:12px; max-width:18ch; }
.fail .rt p{ font-size:16px; line-height:1.6; color:var(--ink-60); margin-top:16px; max-width:48ch; }
.fail .rt p b{ color:var(--ink); font-weight:600; }
.fail .why{ margin-top:18px; display:flex; flex-direction:column; gap:12px; }
.fail .why .w{ display:grid; grid-template-columns:60px 1fr; gap:0 12px; font-size:14px; color:var(--ink-60); line-height:1.5; }
.fail .why .w .s{ font-weight:700; color:var(--red); letter-spacing:.04em; }
.fail .acts{ display:flex; gap:12px; margin-top:30px; }

/* ============================================================
   SCREEN 9 — Recap + question bank
   ============================================================ */
.recap{ flex:1; display:grid; grid-template-columns:1.05fr 1.25fr; }
.recap .lt{ padding:40px 32px 40px 56px; display:flex; flex-direction:column; justify-content:center; }
.recap .kicker{ }
.recap h2{ font-size:32px; line-height:1.1; margin-top:12px; max-width:16ch; }
.recap h2 em{ font-style:normal; color:var(--red); }
.recap .lead{ font-size:15.5px; line-height:1.55; color:var(--ink-60); margin-top:14px; max-width:42ch; }
.recap .steps4{ margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.recap .r4{ display:flex; gap:14px; align-items:flex-start; }
.recap .r4 .b{ width:30px; height:30px; border-radius:50%; background:var(--blue-tint); color:var(--blue-deep);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex:none; }
.recap .r4.missed .b{ background:var(--red-tint); color:var(--red); }
.recap .r4 .t{ font-size:14px; line-height:1.45; color:var(--ink-60); padding-top:4px; }
.recap .r4 .t b{ color:var(--ink); font-weight:700; }
.recap .acts{ display:flex; gap:12px; margin-top:26px; }

/* question bank job aid */
.recap .rt{ background:#fff; border-left:1px solid var(--line); padding:38px 44px; display:flex; flex-direction:column; }
.jobaid .jh{ display:flex; align-items:center; justify-content:space-between; }
.jobaid .jh .ttl{ font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
.jobaid .jh .ttl span{ color:var(--ink-40); font-weight:600; display:block; letter-spacing:.04em; text-transform:none; font-size:12px; margin-top:3px; }
.jobaid .print{ background:none; border:1.5px solid var(--line); border-radius:999px; font-family:var(--font);
  font-size:12px; font-weight:600; color:var(--ink-60); padding:7px 16px; cursor:pointer; transition:.15s; }
.jobaid .print:hover{ border-color:var(--blue); color:var(--blue-deep); }
.jobaid .qb{ margin-top:18px; display:flex; flex-direction:column; gap:14px; }
.jobaid .qrow{ display:grid; grid-template-columns:34px 1fr; gap:14px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.jobaid .qrow:last-child{ border-bottom:none; padding-bottom:0; }
.jobaid .qrow .g{ font-size:18px; font-weight:700; color:var(--blue-deep); }
.jobaid .qrow .st{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-40); font-weight:700; }
.jobaid .qrow ul{ margin:7px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; }
.jobaid .qrow li{ font-size:13.5px; line-height:1.4; color:var(--ink); font-style:italic; padding-left:13px; position:relative; }
.jobaid .qrow li::before{ content:''; position:absolute; left:0; top:7px; width:4px; height:4px; border-radius:50%; background:var(--blue); }

/* ============================================================
   Print — question bank job aid only
   ============================================================ */
@media print{
  body *{ visibility:hidden !important; }
  #printAid, #printAid *{ visibility:visible !important; }
  #printAid{ position:absolute; inset:0; display:block !important; padding:48px; }
}