/* ============================================================
   GROW eLearning — visual direction explorations
   Three directions: A "Clinic", B "Conversation", C "Field Guide"
   Each screen frame is 1024 x 680.
   ============================================================ */

.scr{
  width:1024px; height:680px; position:relative; overflow:hidden;
  font-family:var(--font); color:var(--ink); -webkit-font-smoothing:antialiased;
}
.scr p{ margin:0; }
.scr h1,.scr h2,.scr h3{ margin:0; font-weight:600; letter-spacing:-.01em; }

/* tiny stage chip used across directions */
.stagechip{ display:inline-flex; align-items:center; gap:8px; font-size:13px;
  font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.stagechip .dot{ width:8px; height:8px; border-radius:50%; background:var(--blue); }

/* subtle GROW stepper (small label only, per brief) */
.gstep{ display:flex; gap:6px; align-items:center; font-size:12px; font-weight:600;
  letter-spacing:.18em; color:var(--ink-40); }
.gstep b{ color:var(--blue-deep); }
.gstep i{ width:5px;height:5px;border-radius:50%;background:var(--line); font-style:normal; }
.gstep i.on{ background:var(--blue); }

/* image placeholder for illustrated characters */
.ph{ position:relative; background:
    repeating-linear-gradient(45deg, #eef2f6 0 10px, #e7edf3 10px 20px);
  border:1px dashed #c4cdd6; border-radius:var(--r-md); 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; }

/* ============================================================
   DIRECTION A — "Clinic"  (calm, blue-structural, centered)
   ============================================================ */
.dir-a{ background:var(--bg-cool); }
.dir-a .pad{ position:absolute; inset:0; padding:64px 88px; display:flex; flex-direction:column; }
.dir-a .brandrow{ display:flex; align-items:center; gap:12px; }
.dir-a .brandrow img{ width:26px; height:26px; }
.dir-a .brandrow .wm{ font-weight:600; font-size:15px; letter-spacing:.02em; }
.dir-a .brandrow .wm span{ color:var(--red); }

/* intro A */
.dir-a .intro{ flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.dir-a .intro .kicker{ color:var(--blue-deep); font-weight:600; letter-spacing:.18em; text-transform:uppercase; font-size:13px; margin-bottom:22px; }
.dir-a .intro h1{ font-size:46px; line-height:1.04; max-width:15ch; }
.dir-a .intro p{ font-size:18px; line-height:1.6; color:var(--ink-60); max-width:56ch; margin-top:22px; }
.dir-a .intro .note{ font-size:14px; color:var(--ink-40); margin-top:14px; }
.btn{ font-family:var(--font); cursor:pointer; border:none; font-weight:600; }
.dir-a .btn-primary{ background:var(--red); color:#fff; font-size:17px; padding:16px 40px; border-radius:999px; margin-top:36px; box-shadow:0 8px 20px rgba(227,23,55,.25); }
.dir-a .meta{ display:flex; gap:20px; justify-content:center; align-items:center; margin-top:30px; color:var(--ink-40); font-size:13px; }
.dir-a .meta .pip{ width:4px;height:4px;border-radius:50%;background:var(--ink-40);}

/* GROW orbit A */
.orbit{ position:relative; }
.orbit .ring{ position:absolute; border-radius:50%; border:1.5px solid var(--blue-tint2); }
.orbit-node{ position:absolute; width:96px; height:96px; 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 .g{ font-size:30px; font-weight:700; color:var(--blue-deep); line-height:1; }
.orbit-node .n{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-40); margin-top:3px; }
.orbit-center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  text-align:center; }
.orbit-center .lbl{ font-size:13px; letter-spacing:.3em; color:var(--ink-40); text-transform:uppercase; }
.dir-a .teach{ position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; }
.dir-a .teach .left{ padding:72px 0 72px 88px; display:flex; flex-direction:column; justify-content:center; }
.dir-a .teach .kicker{ color:var(--blue-deep); font-weight:600; letter-spacing:.18em; text-transform:uppercase; font-size:13px; }
.dir-a .teach h2{ font-size:34px; line-height:1.1; margin-top:16px; max-width:14ch; }
.dir-a .teach .lead{ font-size:17px; line-height:1.6; color:var(--ink-60); margin-top:18px; max-width:40ch; }
.dir-a .teach .stagelist{ margin-top:26px; display:flex; flex-direction:column; gap:14px; }
.dir-a .teach .sl{ display:flex; gap:14px; align-items:flex-start; }
.dir-a .teach .sl .b{ font-weight:700; color:var(--blue-deep); width:74px; flex:none; font-size:15px; letter-spacing:.04em;}
.dir-a .teach .sl .d{ font-size:15px; color:var(--ink-60); line-height:1.45; }
.dir-a .teach .right{ position:relative; }

/* decision A */
.dir-a .dec{ position:absolute; inset:0; padding:46px 64px 56px; display:flex; flex-direction:column; }
.dir-a .dec .top{ display:flex; justify-content:space-between; align-items:center; }
.dir-a .dec .scene{ display:flex; gap:22px; align-items:center; margin-top:26px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 26px; box-shadow:var(--shadow-sm); }
.dir-a .dec .scene .av{ width:84px; height:84px; border-radius:18px; flex:none; }
.dir-a .dec .scene .speech{ }
.dir-a .dec .scene .nm{ font-weight:600; font-size:14px; color:var(--ink-40); letter-spacing:.02em; }
.dir-a .dec .scene .said{ font-size:19px; line-height:1.4; margin-top:4px; }
.dir-a .dec .tp{ font-size:14px; color:var(--blue-deep); margin-top:18px; line-height:1.5; }
.dir-a .dec .tp b{ font-weight:700; }
.dir-a .dec .q{ font-size:20px; font-weight:600; margin-top:6px; }
.dir-a .choices{ display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.dir-a .choice{ text-align:left; background:#fff; border:1.5px solid var(--line); border-radius:var(--r-md);
  padding:16px 20px; font-size:16px; line-height:1.4; color:var(--ink); cursor:pointer; transition:.15s; font-family:var(--font); }
.dir-a .choice:hover{ border-color:var(--blue); box-shadow:var(--shadow-sm); }
.dir-a .choice.sel{ border-color:var(--blue); background:var(--blue-tint); }
.dir-a .react{ margin-top:16px; display:flex; gap:14px; align-items:flex-start; }
.dir-a .react .bub{ background:var(--blue-tint); border-radius:4px 16px 16px 16px; padding:14px 18px; font-size:16px; line-height:1.45; max-width:62ch; }
.dir-a .coachnote{ margin-top:12px; font-style:italic; color:var(--ink-60); font-size:14px; border-left:3px solid var(--blue); padding-left:14px; line-height:1.5; }

/* ============================================================
   DIRECTION B — "Conversation"  (warm, chat, human)
   ============================================================ */
.dir-b{ background:var(--bg-warm); }
.dir-b .pad{ position:absolute; inset:0; padding:60px 84px; display:flex; flex-direction:column; }
.dir-b .brandrow{ display:flex; align-items:center; gap:12px; }
.dir-b .brandrow img{ width:30px; height:30px; }
.dir-b .brandrow .wm{ font-weight:600; font-size:16px; }
.dir-b .brandrow .wm span{ color:var(--red); }

/* intro B */
.dir-b .intro{ flex:1; display:flex; flex-direction:column; justify-content:center; max-width:30ch; }
.dir-b .intro .shield{ width:56px; height:56px; margin-bottom:28px; }
.dir-b .intro h1{ font-size:50px; line-height:1.0; }
.dir-b .intro h1 em{ font-style:normal; color:var(--red); }
.dir-b .intro p{ font-size:18px; line-height:1.62; color:var(--ink-60); max-width:52ch; margin-top:24px; }
.dir-b .btn-primary{ background:var(--ink); color:#fff; font-size:17px; padding:16px 36px; border-radius:14px; margin-top:34px; align-self:flex-start; display:inline-flex; align-items:center; gap:12px; }
.dir-b .btn-primary .arr{ font-size:20px; }
.dir-b .deco{ position:absolute; right:-120px; top:50%; transform:translateY(-50%); width:520px; height:520px; opacity:.05; }

/* GROW teach B — signpost / journey */
.dir-b .teach{ position:absolute; inset:0; padding:56px 84px; display:flex; flex-direction:column; }
.dir-b .teach h2{ font-size:34px; line-height:1.08; max-width:20ch; }
.dir-b .teach h2 em{ font-style:normal; color:var(--red); }
.dir-b .teach .lead{ font-size:16px; color:var(--ink-60); margin-top:12px; max-width:60ch; line-height:1.55;}
.dir-b .journey{ flex:1; display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; position:relative; }
.dir-b .jcard{ flex:1; background:#fff; border-radius:var(--r-lg); padding:26px 22px; box-shadow:var(--shadow-sm); position:relative; }
.dir-b .jcard .num{ position:absolute; top:-16px; left:22px; width:34px; height:34px; border-radius:50%; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; box-shadow:0 6px 14px rgba(227,23,55,.3); }
.dir-b .jcard .g{ font-size:24px; font-weight:700; margin-top:10px; }
.dir-b .jcard .sub{ font-size:13px; color:var(--ink-40); font-weight:600; letter-spacing:.04em; margin-top:2px; }
.dir-b .jcard .d{ font-size:14px; color:var(--ink-60); margin-top:12px; line-height:1.5; }
.dir-b .jcard .q{ font-size:13px; color:var(--blue-deep); margin-top:12px; line-height:1.45; font-style:italic;}
.dir-b .jconn{ position:absolute; top:50%; left:0; right:0; height:2px; background:repeating-linear-gradient(90deg,var(--blue-tint2) 0 8px, transparent 8px 16px); z-index:-1; }

/* decision B — chat */
.dir-b .dec{ position:absolute; inset:0; display:grid; grid-template-columns:1fr 300px; }
.dir-b .dec .main{ padding:48px 40px 48px 84px; display:flex; flex-direction:column; }
.dir-b .dec .chat{ flex:1; display:flex; flex-direction:column; gap:16px; margin-top:20px; }
.dir-b .msg{ display:flex; gap:12px; align-items:flex-end; max-width:80%; }
.dir-b .msg .av{ width:40px; height:40px; border-radius:50%; flex:none; }
.dir-b .msg .bub{ font-size:16px; line-height:1.45; padding:13px 17px; border-radius:18px; }
.dir-b .msg.them .bub{ background:#fff; border:1px solid var(--line); border-bottom-left-radius:4px; }
.dir-b .msg.me{ align-self:flex-end; flex-direction:row-reverse; }
.dir-b .msg.me .bub{ background:var(--ink); color:#fff; border-bottom-right-radius:4px; }
.dir-b .dec .qline{ font-size:15px; color:var(--ink-60); margin-top:10px; font-weight:500;}
.dir-b .choices{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.dir-b .choice{ text-align:left; background:#fff; border:1.5px solid var(--line); border-radius:999px; padding:13px 22px; font-size:15px; color:var(--ink); cursor:pointer; transition:.15s; font-family:var(--font); }
.dir-b .choice:hover{ border-color:var(--red); }
.dir-b .dec .aside{ background:#fff; border-left:1px solid var(--line); padding:48px 32px; display:flex; flex-direction:column; }
.dir-b .dec .aside .stage{ }
.dir-b .dec .aside h4{ margin:14px 0 0; font-size:20px; font-weight:700; }
.dir-b .dec .aside .note{ font-size:14px; line-height:1.6; color:var(--ink-60); margin-top:12px; }
.dir-b .dec .aside .coach{ margin-top:auto; background:var(--green-tint); border-radius:var(--r-md); padding:16px; font-size:13px; line-height:1.55; color:#27613f; }
.dir-b .dec .aside .coach .h{ font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:11px; margin-bottom:6px; }

/* ============================================================
   DIRECTION C — "Field Guide"  (bold, editorial, red structure)
   ============================================================ */
.dir-c{ background:#fff; }
.dir-c .rail{ position:absolute; left:0; top:0; bottom:0; width:104px; background:var(--red);
  display:flex; flex-direction:column; align-items:center; padding:34px 0; color:#fff; }
.dir-c .rail img{ width:40px; height:40px; }
.dir-c .rail .vgrow{ margin-top:auto; margin-bottom:auto; display:flex; flex-direction:column; gap:26px; }
.dir-c .rail .vg{ font-size:22px; font-weight:700; color:rgba(255,255,255,.4); text-align:center; letter-spacing:.05em; }
.dir-c .rail .vg.on{ color:#fff; }
.dir-c .rail .vg.on::after{ content:''; display:block; width:20px; height:3px; background:#fff; margin:7px auto 0; }
.dir-c .body{ position:absolute; left:104px; right:0; top:0; bottom:0; padding:60px 72px; display:flex; flex-direction:column; }

/* intro C */
.dir-c .intro{ flex:1; display:flex; flex-direction:column; justify-content:center; }
.dir-c .intro .ix{ font-size:13px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--red); }
.dir-c .intro h1{ font-size:62px; line-height:.98; margin-top:20px; max-width:13ch; font-weight:700; }
.dir-c .intro .rule{ width:64px; height:5px; background:var(--ink); margin:28px 0; }
.dir-c .intro p{ font-size:18px; line-height:1.6; color:var(--ink-60); max-width:54ch; }
.dir-c .btn-primary{ background:var(--red); color:#fff; font-size:16px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:18px 38px; border-radius:0; margin-top:34px; align-self:flex-start; }
.dir-c .intro .seat{ margin-top:22px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-40); font-weight:600; }

/* GROW teach C — big graphic orbit, mono w/ red active */
.dir-c .teach{ position:absolute; left:104px; right:0; top:0; bottom:0; display:grid; grid-template-columns:1.05fr 1fr; }
.dir-c .teach .lt{ padding:60px 0 60px 72px; display:flex; flex-direction:column; justify-content:center; }
.dir-c .teach .ix{ font-size:13px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--red); }
.dir-c .teach h2{ font-size:44px; line-height:1.0; margin-top:16px; font-weight:700; max-width:12ch; }
.dir-c .teach .lead{ font-size:16px; line-height:1.6; color:var(--ink-60); margin-top:18px; max-width:42ch; }
.dir-c .teach .rows{ margin-top:26px; }
.dir-c .teach .row{ display:flex; gap:18px; padding:14px 0; border-top:1px solid var(--line); align-items:baseline; }
.dir-c .teach .row:last-child{ border-bottom:1px solid var(--line); }
.dir-c .teach .row .l{ font-size:22px; font-weight:700; width:30px; flex:none; }
.dir-c .teach .row .t{ font-weight:700; font-size:15px; width:90px; flex:none; letter-spacing:.02em; }
.dir-c .teach .row .x{ font-size:14px; color:var(--ink-60); line-height:1.4; }
.dir-c .teach .rt{ background:var(--ink); position:relative; overflow:hidden; }

/* decision C */
.dir-c .dec{ position:absolute; left:104px; right:0; top:0; bottom:0; padding:46px 64px; display:flex; flex-direction:column; }
.dir-c .dec .hd{ display:flex; align-items:center; justify-content:space-between; }
.dir-c .dec .hd .st{ font-size:30px; font-weight:700; }
.dir-c .dec .hd .st sup{ font-size:13px; color:var(--red); font-weight:700; letter-spacing:.1em; }
.dir-c .dec .scene{ display:flex; gap:20px; margin-top:24px; }
.dir-c .dec .scene .av{ width:72px; height:72px; flex:none; border-radius:2px; }
.dir-c .dec .scene .said{ font-size:21px; line-height:1.35; font-weight:500; }
.dir-c .dec .scene .nm{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-40); margin-bottom:6px; }
.dir-c .dec .q{ font-size:17px; color:var(--ink-60); margin-top:18px; }
.dir-c .choices{ display:grid; gap:10px; margin-top:16px; }
.dir-c .choice{ text-align:left; background:#fff; border:1.5px solid var(--ink); border-radius:0; padding:15px 20px 15px 52px; font-size:15px; line-height:1.4; cursor:pointer; position:relative; font-family:var(--font); transition:.12s; }
.dir-c .choice .k{ position:absolute; left:0; top:0; bottom:0; width:38px; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.dir-c .choice:hover{ background:#faf6f1; }
.dir-c .choice.sel{ border-color:var(--red); }
.dir-c .choice.sel .k{ background:var(--red); }
.dir-c .react{ margin-top:16px; border-top:2px solid var(--ink); padding-top:14px; }
.dir-c .react .said{ font-size:16px; line-height:1.45; }
.dir-c .react .coach{ margin-top:12px; display:flex; gap:10px; }
.dir-c .react .coach .tag{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--red); flex:none; padding-top:2px; }
.dir-c .react .coach .ct{ font-size:14px; line-height:1.5; color:var(--ink-60); font-style:italic; }