/* hugo Day Zero journey
   Brand system is strict: warm off-white ground, white cards, violet as
   punctuation only, Conifer on chips only. Bricolage for display, Inter for body. */

:root{
  --bg:#F4F2EE;
  --card:#FFFFFF;
  --ink:#0A0A0A;
  --ink2:#3D3D3D;
  --mute:#737373;
  --line:#E5E5E5;
  --violet:#4F06EB;
  --conifer:#CFFF5E;
  --rail:270px;
  --amber:#B4690E;
  --card-r:20px;
  --disp:"Bricolage Grotesque","Inter",system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
  --body:"Inter",system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
}

/* Tonal zones, lifted from the openhouse page, which runs
   dark, sage, cream, sage, dark down its length rather than one flat ground.
   Each step claims a zone so two screens in a row never read identical.
   Everything downstream reads these variables, so the whole shell follows. */
body[data-zone="sage"]{ --bg:#EEF2EA }
body[data-zone="dark"]{
  --bg:#0A0A0A;
  --card:#141414;
  --ink:#FFFFFF;
  --ink2:rgba(255,255,255,.74);
  --mute:rgba(255,255,255,.55);
  --line:rgba(255,255,255,.17);
}

*{box-sizing:border-box}
/* Several blocks below set display on elements we also toggle with [hidden].
   Author rules beat the UA hidden rule, so state it once and loudly. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button{font-family:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------- shell ---------------- */

.app{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh}

.rail{
  border-right:1px solid var(--line);background:var(--bg);
  padding:28px 22px 22px;position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;
}
.rail .logo{display:block;width:74px;margin-bottom:22px}
.rail .logo img{width:100%}
.rail-lab{
  font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mute);margin-bottom:20px;
}
.steps{list-style:none;margin:0;padding:0;flex:1}
.steps li{margin-bottom:2px}
.steps button{
  display:flex;align-items:center;gap:11px;width:100%;
  background:none;border:0;padding:9px 10px;border-radius:9px;cursor:pointer;
  text-align:left;color:var(--ink2);font-size:14px;
}
.steps button:hover{background:#EBE8E2}
.steps button[aria-current="true"]{background:var(--card);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.dot{
  width:23px;height:23px;flex:none;border-radius:50%;border:1px solid var(--line);
  background:var(--card);display:grid;place-items:center;
  font-size:11px;font-weight:600;color:var(--mute);
}
.dot.on{background:var(--ink);border-color:var(--ink);color:var(--conifer)}
.st-name{flex:1;min-width:0}

.rail-foot{font-size:11.5px;color:var(--mute);line-height:1.5;border-top:1px solid var(--line);padding-top:14px}
.stamp{display:block;font-weight:600;color:var(--mute);margin-bottom:3px}
.stamp.on{color:var(--ink2)}

.topbar{display:none}

.stage{padding:34px 44px 96px;max-width:none}
.screen{display:none;max-width:1040px}
.screen.wide{max-width:1360px}
.screen.on{display:block}

/* ---------------- headings ---------------- */

.shead{margin-bottom:18px}
.kicker{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.kick-step{
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:var(--conifer);color:var(--ink);padding:4px 9px;border-radius:5px;
}
.kick-q{font-size:12px;color:var(--mute);letter-spacing:.05em;text-transform:uppercase;font-weight:600}

h1{font-family:var(--disp);font-size:47px;line-height:1.05;letter-spacing:-.025em;margin:0 0 16px;font-weight:600}
h2{font-family:var(--disp);font-size:31px;line-height:1.12;letter-spacing:-.02em;margin:0 0 10px;font-weight:600}
h3{font-family:var(--disp);font-size:18px;line-height:1.2;margin:0 0 8px;font-weight:600}
.guide{color:var(--ink2);font-size:14.5px;max-width:70ch;margin:0}
.lede{color:var(--ink2);font-size:17px;line-height:1.55;max-width:52ch;margin:0 0 26px}
.eyebrow{
  font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--violet);margin-bottom:14px;
}

/* ---------------- cover ---------------- */

.cover{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;min-height:74vh}
.cover-logo{width:92px;margin-bottom:26px}
.cover-cta{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.cover-note{font-size:12.5px;color:var(--mute)}

.spine{display:flex;flex-direction:column;gap:10px}
.sp{
  background:var(--card);border:1px solid var(--line);border-radius:13px;
  padding:16px 18px;display:flex;gap:14px;align-items:flex-start;
}
.sp-n{
  width:26px;height:26px;flex:none;border-radius:7px;background:var(--ink);color:var(--conifer);
  display:grid;place-items:center;font-size:12px;font-weight:700;font-family:var(--disp);
}
.sp-t{font-family:var(--disp);font-weight:600;font-size:15px;margin-bottom:2px}
.sp-d{font-size:13px;color:var(--mute);line-height:1.45}

/* ---------------- cards + fields ---------------- */

.card{
  background:var(--card);border:1px solid var(--line);border-radius:15px;
  padding:22px 25px;margin-bottom:14px;
}
.card.tight{padding:20px 20px}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.cols-2 > .card{margin-bottom:0}

.subhead{
  font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mute);margin-bottom:13px;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:13px 16px}
.fields.one{grid-template-columns:1fr}
.f.full{grid-column:1 / -1}
.f{display:flex;flex-direction:column}
label{font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hint{font-size:12.5px;color:var(--mute);margin-bottom:7px;font-weight:400;line-height:1.45}
.req{
  font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--violet);border:1px solid #DDD0FB;background:#F6F1FE;
  padding:2px 7px;border-radius:4px;
}
input[type=text],input[type=email],textarea{
  width:100%;font:inherit;font-size:14.5px;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:9px;
  padding:10px 12px;resize:vertical;
}
input:focus,textarea:focus{outline:2px solid var(--violet);outline-offset:-1px;background:var(--card)}
textarea{line-height:1.5}
.note{font-size:13px;color:var(--ink2);margin:0 0 14px;line-height:1.5}
.note.small{font-size:12px;color:var(--mute);margin:10px 0 0}

/* ---------------- objective picks ---------------- */

.picks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pick{
  border:1px solid var(--line);background:var(--bg);border-radius:11px;
  padding:13px 14px;cursor:pointer;text-align:left;
  font-size:13.5px;font-weight:600;color:var(--ink2);line-height:1.35;
  display:flex;flex-direction:column;gap:3px;
}
.pick span{font-size:12px;font-weight:400;color:var(--mute)}
.pick:hover{border-color:#C9C9C9}
.pick.on{border-color:var(--ink);background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

/* ---------------- generation canvas ---------------- */

.canvas{display:grid;grid-template-columns:308px 1fr;gap:20px;align-items:start}
.canvas-rail{position:sticky;top:24px}
.canvas-rail .card{margin-bottom:14px}
.canvas-main{min-height:430px;display:flex;flex-direction:column;min-width:0}

.readback{display:flex;flex-direction:column;gap:11px}
.rb{font-size:12.5px;line-height:1.45}
.rb b{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);font-weight:600;margin-bottom:2px}
.rb span{color:var(--ink2)}
.rb.miss span{color:var(--amber)}

.gennote{font-size:12px;color:var(--mute);margin:9px 0 0;text-align:center}

.empty,.working,.oops{
  flex:1;border:1px dashed #D6D2CA;border-radius:15px;
  display:grid;place-items:center;padding:40px;background:rgba(255,255,255,.42);
}
.empty-in,.work-in,.oops-in{text-align:center;max-width:36ch}
.empty-in p,.work-in p,.oops-in p{font-size:13.5px;color:var(--mute);margin:0}
.empty-mark{
  font-family:var(--disp);font-size:44px;font-weight:700;color:var(--line);
  line-height:1;margin-bottom:10px;
}
.oops{border-color:#E8C9A0;background:#FDF7EF}
.oops-in h3{color:var(--amber)}
.oops-in .btn{margin-top:16px}

.pulse{display:flex;gap:7px;justify-content:center;margin-bottom:18px}
.pulse i{width:9px;height:9px;border-radius:50%;background:var(--violet);opacity:.25;animation:bob 1.1s infinite}
.pulse i:nth-child(2){animation-delay:.12s}
.pulse i:nth-child(3){animation-delay:.24s}
.pulse i:nth-child(4){animation-delay:.36s}
@keyframes bob{0%,100%{opacity:.22;transform:translateY(0)}45%{opacity:1;transform:translateY(-5px)}}

.grid4{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0}

.gcard{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;display:flex;flex-direction:column;position:relative;
  min-width:0;
}
.gcard.kept{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.gcard.killed{opacity:.5;background:#F0EEEA;border-style:dashed}
.gcard.killed .g-body{display:none}

.g-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
.g-label{font-family:var(--disp);font-size:17px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.g-badge{
  font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:5px;white-space:nowrap;flex:none;
}
.g-badge.keep{background:var(--conifer);color:var(--ink)}
.g-badge.kill{background:#EDEAE4;color:var(--mute)}

.g-body{flex:1}
.g-line{font-size:13.5px;color:var(--ink2);line-height:1.45;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.g-ev{font-size:12.5px;color:var(--ink2);border-left:2px solid var(--violet);padding-left:10px;margin:0 0 9px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.g-sub{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);font-weight:600;margin:0 0 4px}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
/* On a card face the signal row stays one line so four cards fit together. */
.gcard .g-read .chips{flex-wrap:nowrap;overflow:hidden;margin-bottom:4px;min-width:0}
.gcard .g-read .chip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.chip{
  font-size:11.5px;background:var(--bg);border:1px solid var(--line);
  border-radius:20px;padding:3px 10px;color:var(--ink2);
}
.chip.more{color:var(--mute);background:transparent;border-style:dashed}
.g-head{font-family:var(--disp);font-size:19px;line-height:1.22;font-weight:600;margin:0 0 9px;letter-spacing:-.015em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.g-copy{font-size:14px;color:var(--ink2);line-height:1.5;margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.g-meta{font-size:12px;color:var(--mute);line-height:1.4;margin:0 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.g-meta b{color:var(--ink2);font-weight:600}

.g-acts{display:flex;gap:7px;border-top:1px solid var(--line);padding-top:10px;margin-top:2px}
.gbtn{
  background:none;border:1px solid var(--line);border-radius:7px;
  padding:6px 11px;font-size:12.5px;font-weight:600;color:var(--ink2);cursor:pointer;
}
.gbtn:hover{border-color:#BDBDBD;background:var(--bg)}
.gbtn.on{background:var(--ink);border-color:var(--ink);color:#fff}
.gbtn.grow{flex:1;text-align:center}

.g-edit{display:none;flex-direction:column;gap:9px;margin-bottom:12px}
.gcard.editing .g-edit{display:flex}
.gcard.editing .g-read{display:none}
.g-edit label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:3px}
.g-edit input,.g-edit textarea{font-size:13.5px;padding:8px 10px}

.canvas-foot{display:flex;align-items:center;gap:14px;margin-top:14px}
.tally{font-size:13px;color:var(--ink2);flex:1;font-weight:500}
.tally b{color:var(--ink)}
.btn.sm{padding:8px 14px;font-size:13px}

/* ---------------- packages ---------------- */

.plans{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.plan{cursor:pointer;display:block}
.plan input{position:absolute;opacity:0;pointer-events:none}
.plan-in{
  display:flex;flex-direction:column;gap:6px;
  border:1px solid var(--line);border-radius:13px;padding:18px 19px;background:var(--bg);height:100%;
}
.plan:hover .plan-in{border-color:#C9C9C9}
.plan input:checked + .plan-in{border-color:var(--ink);background:var(--card);box-shadow:inset 0 0 0 1px var(--ink)}
.plan-top{display:flex;align-items:center;justify-content:space-between}
.plan-name{font-family:var(--disp);font-size:20px;font-weight:600}
.tick{width:19px;height:19px;border-radius:50%;border:1px solid var(--line);background:var(--card)}
.plan input:checked + .plan-in .tick{background:var(--ink);border-color:var(--ink);position:relative}
.plan input:checked + .plan-in .tick:after{
  content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;
  border:solid var(--conifer);border-width:0 2px 2px 0;transform:rotate(43deg);
}
.plan-price{font-size:14px;font-weight:600;color:var(--violet)}
.plan-desc{font-size:13px;color:var(--ink2);line-height:1.45}
.plan-cad{font-size:12px;color:var(--mute)}

.addons{display:flex;flex-direction:column;gap:9px}
.addon{
  display:grid;grid-template-columns:auto 1fr auto;gap:5px 11px;align-items:center;
  border:1px solid var(--line);border-radius:11px;padding:12px 14px;background:var(--bg);cursor:pointer;
}
.addon:hover{border-color:#C9C9C9}
.addon input{position:absolute;opacity:0;pointer-events:none}
.box{
  width:18px;height:18px;border-radius:5px;border:1px solid var(--line);
  background:var(--card);grid-row:span 2;position:relative;
}
.addon input:checked ~ .box,.check input:checked + .box{background:var(--ink);border-color:var(--ink)}
.addon input:checked ~ .box:after,.check input:checked + .box:after{
  content:"";position:absolute;left:6px;top:2px;width:4px;height:9px;
  border:solid var(--conifer);border-width:0 2px 2px 0;transform:rotate(43deg);
}
.addon input:checked ~ *{}
.ad-name{font-size:14px;font-weight:600}
.ad-price{font-size:13px;font-weight:600;color:var(--violet);text-align:right}
.ad-when{grid-column:2 / -1;font-size:12px;color:var(--mute);line-height:1.4}

.req-block{
  margin-top:14px;border:1px solid #DDD0FB;background:#FAF7FF;
  border-radius:11px;padding:15px 16px;
}
.req-tag{
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--violet);margin-bottom:7px;
}
.req-block p{font-size:13px;color:var(--ink2);margin:0 0 11px;line-height:1.5}
.check{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px;font-weight:500;color:var(--ink)}
.check input{position:absolute;opacity:0;pointer-events:none}
.check .box{grid-row:auto;flex:none}

.total{border-top:1px solid var(--line);padding-top:14px}
.total-row{display:flex;justify-content:space-between;font-size:13.5px;color:var(--ink2);padding:5px 0}
.total-row.empty{color:var(--mute);font-style:normal}
.total-sum{
  display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--line);margin-top:11px;padding-top:13px;
}
.total-sum .k{font-size:13px;font-weight:600}
.total-sum .v{font-family:var(--disp);font-size:27px;font-weight:600}

/* ---------------- gate list ---------------- */

.gatelist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.gatelist li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.45}
.gmark{
  width:19px;height:19px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:700;margin-top:1px;
}
.gmark.ok{background:var(--conifer);color:var(--ink)}
.gmark.no{background:#F5E4CC;color:var(--amber)}
.gtext b{display:block;font-weight:600}
.gtext span{color:var(--mute);font-size:12.5px}

/* ---------------- photos ---------------- */

.drop{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  border:1px dashed #D6D2CA;border-radius:11px;padding:18px;cursor:pointer;
  background:var(--bg);
}
.drop:hover{border-color:var(--violet)}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.drop-cta{font-size:13.5px;font-weight:600;color:var(--violet)}
.drop-sub{font-size:12px;color:var(--mute)}
.filelist{list-style:none;margin:11px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.filelist li{
  font-size:12.5px;color:var(--ink2);background:var(--bg);border:1px solid var(--line);
  border-radius:7px;padding:6px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* The or between the upload and the folder link. A rule on each side so the
   second way in reads as an alternative, not an afterthought. */
.orsplit{
  display:flex;align-items:center;gap:12px;margin:20px 0 18px;
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);
}
.orsplit:before,.orsplit:after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------------- dossier ---------------- */

.dossier{display:flex;flex-direction:column;gap:18px;margin-bottom:18px}
.dz{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:24px 26px}
.dz-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.dz-top h3{margin:0}
.rv-flag{
  font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  background:#EDEAE4;color:var(--mute);padding:3px 8px;border-radius:5px;margin-right:8px;
}
.rv-flag.ok{background:var(--conifer);color:var(--ink)}
.rv-edit{background:none;border:0;color:var(--violet);font-size:13px;font-weight:600;cursor:pointer;padding:0}
.rv-edit:hover{text-decoration:underline}
.rv-rows{display:grid;grid-template-columns:210px 1fr;gap:9px 20px}
.rv-k{font-size:12.5px;color:var(--mute);font-weight:600}
.rv-v{font-size:13.5px;color:var(--ink);white-space:pre-wrap}
.rv-empty{font-size:13px;color:var(--mute);margin:0}
.dz-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px}
.dz-card{border:1px solid var(--line);border-radius:12px;padding:16px 17px;background:var(--bg)}
.dz-card .g-label{font-size:15px;margin-bottom:7px}
.dz-card .g-head{font-size:16px}
.dz-card .g-line,.dz-card .g-copy{font-size:13px;margin-bottom:8px}

.send h3{margin-bottom:8px}
.send p{font-size:13.5px;color:var(--ink2);margin:0 0 16px;max-width:70ch}
.send-acts{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.flash{font-size:13px;color:var(--violet);font-weight:600;opacity:0;transition:opacity .18s}
.flash.on{opacity:1}

footer{
  font-size:12px;color:var(--mute);border-top:1px solid var(--line);
  padding-top:16px;display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;
}
.danger{background:none;border:0;color:var(--mute);font-size:12px;cursor:pointer;text-decoration:underline}
.danger:hover{color:#A11}

/* ---------------- buttons + nav ---------------- */

.btn{
  background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:9px;
  padding:11px 20px;font-size:14px;font-weight:600;cursor:pointer;
}
.btn:hover{background:#242424}
.btn.ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--bg);border-color:#BDBDBD}
.btn.wide{width:100%}
.btn:disabled{opacity:.4;cursor:not-allowed}

.nav{
  position:fixed;left:var(--rail);right:0;bottom:0;
  background:rgba(244,242,238,.94);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);padding:13px 44px;
  display:flex;align-items:center;gap:16px;z-index:20;
}
.navwhy{flex:1;font-size:13px;color:var(--amber);font-weight:500}

/* ---------------- mobile ---------------- */

@media (max-width:1180px){
  .canvas{grid-template-columns:270px 1fr}
  .dz-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:980px){
  .app{grid-template-columns:1fr}
  .rail{display:none}
  .topbar{
    display:block;position:sticky;top:0;z-index:30;
    background:rgba(244,242,238,.96);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .topbar-in{display:flex;align-items:center;gap:13px;padding:11px 18px}
  .topbar .logo{width:50px;flex:none}
  .tb-meta{flex:1;min-width:0}
  .tb-step{font-size:12.5px;font-weight:600;margin-bottom:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .track{height:3px;background:var(--line);border-radius:2px;overflow:hidden}
  .track i{display:block;height:100%;background:var(--ink);width:0;transition:width .25s}
  .tb-stamp{font-size:11px;color:var(--mute);flex:none}

  .stage{padding:22px 18px 110px}
  .screen,.screen.wide{max-width:none}
  h1{font-size:33px}
  h2{font-size:25px}
  .cover{grid-template-columns:1fr;gap:30px;min-height:0}
  .cover-logo{width:72px}
  .cols-2,.fields,.picks,.plans,.grid4,.canvas,.dz-grid{grid-template-columns:1fr}
  .canvas-rail{position:static}
  .rv-rows{grid-template-columns:1fr;gap:2px 0}
  .rv-k{margin-top:8px}
  .card{padding:20px 18px}
  .nav{left:0;padding:11px 18px}
  .navwhy{display:none}
  .canvas-main{min-height:320px}
  .gcard .g-read .chips{flex-wrap:wrap;overflow:visible}
  .gcard .g-read .chip{max-width:100%}
}

/* ---------------- print ---------------- */

@media print{
  .no-print,.rail,.nav,.topbar,.send-acts,.danger{display:none !important}
  .app{grid-template-columns:1fr}
  body{background:#fff}
  .stage{padding:0}
  .screen{display:none !important}
  .screen#screen-review{display:block !important;max-width:none}
  /* Redline 10: a dossier section is allowed to break BETWEEN its cards.
     Keeping the whole section together pushed a five-card section onto
     page two and left page one two thirds empty. */
  .card{break-inside:avoid;border-color:#ccc}
  .dz{break-inside:auto;page-break-inside:auto;border-color:#ccc}
}

/* The dossier is the record, so nothing is clamped or truncated in it. */
.dz-card .g-line,.dz-card .g-ev,.dz-card .g-meta,.dz-card .g-copy,.dz-card .g-head{-webkit-line-clamp:unset;display:block;overflow:visible}

/* =================================================================
   Visual pass: devices lifted from openhouse.workwithhugo.com
   ================================================================= */

/* The ground animates between zones so a step change reads as a move
   through a document, not a repaint. */
body{transition:background-color .32s ease,color .32s ease}
.rail,.card,.dz,.topbar,.nav{transition:background-color .32s ease,border-color .32s ease}

/* --- pill eyebrows. openhouse uses a bordered 999px pill as the
   section eyebrow instead of letterspaced caps. --- */
.kick-step{
  display:inline-flex;align-items:center;min-height:28px;
  border-radius:999px;padding:3px 13px;border:1.5px solid var(--conifer);
  background:var(--conifer);color:#0A0A0A;
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.kick-q{
  display:inline-flex;align-items:center;min-height:28px;
  border-radius:999px;padding:3px 13px;
  border:1.5px solid currentColor;color:var(--mute);
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}

/* --- display type at openhouse scale: much tighter tracking, near-1
   line height, so the big moments actually feel like moments. --- */
h1{
  font-size:clamp(2.6rem,4.6vw,4.6rem);
  letter-spacing:-.045em;line-height:.93;
}
h2{
  font-size:clamp(1.9rem,2.5vw,2.5rem);
  letter-spacing:-.035em;line-height:1.02;
}

/* --- the two column section head, so the guide sits beside the
   headline rather than under it. Uses the horizontal room and buys
   back the vertical the bigger type spends. --- */
.shead{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);
  gap:14px 40px;align-items:end;
}
.shead .kicker{grid-column:1 / -1;margin-bottom:2px}
.shead h2{align-self:end;margin-bottom:0}
.shead .guide{justify-self:end;max-width:44ch;padding-bottom:3px}

/* --- rounder cards and fully round buttons, both from openhouse --- */
.card,.dz,.gcard,.plan-in,.empty,.working,.oops,.req-block{border-radius:var(--card-r)}
.btn{border-radius:999px;transition:transform .18s ease,background-color .18s ease}
.btn:hover{transform:translateY(-1px)}
.gbtn{border-radius:999px}

/* --- 01 02 03 index chips on cards, straight off the openhouse
   "three" row, where a muted numeral sits above the card content. --- */
.g-index{
  font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--mute);
  margin-bottom:6px;display:block;
}
.gcard.killed .g-index{opacity:.7}

/* --- the dark close band on the dossier, mirroring the openhouse
   closing zone. Full bleed across the stage, light type on ink. --- */
.closeband{
  background:#0A0A0A;color:#fff;border-radius:var(--card-r);
  padding:34px 36px;margin-bottom:18px;
}
.closeband h2{color:#fff;margin-bottom:10px}
.closeband .guide{color:rgba(255,255,255,.74)}
.closeband .kick-q{color:rgba(255,255,255,.62)}
.closeband .kicker{margin-bottom:12px}

/* --- one restrained violet moment, the openhouse featured-card glow.
   Reserved for the two blocks that hold what the agent actually made. --- */
.dz.featured{border-color:var(--violet);box-shadow:0 0 22px -12px var(--violet)}

/* Conifer stays a small chip, never a surface. Locking the spine numeral
   to it keeps it legible in both the light and the dark zone. */
.sp-n{background:var(--conifer);color:#0A0A0A}

/* On the dark cover the cards need their own edge, since the ground
   and the card are close in value. */
body[data-zone="dark"] .sp{background:#141414;border-color:rgba(255,255,255,.14)}
body[data-zone="dark"] .btn{background:#fff;color:#0A0A0A;border-color:#fff}
body[data-zone="dark"] .btn:hover{background:#ECECEC}
body[data-zone="dark"] .rail{border-right-color:rgba(255,255,255,.14)}
body[data-zone="dark"] .steps button:hover{background:rgba(255,255,255,.07)}
body[data-zone="dark"] .steps button[aria-current="true"]{background:#141414;box-shadow:none}
body[data-zone="dark"] .dot{background:#141414;border-color:rgba(255,255,255,.2)}
body[data-zone="dark"] .dot.on{background:var(--conifer);border-color:var(--conifer);color:#0A0A0A}
body[data-zone="dark"] .topbar{background:rgba(10,10,10,.96)}
body[data-zone="dark"] .track{background:rgba(255,255,255,.16)}
body[data-zone="dark"] .track i{background:var(--conifer)}
body[data-zone="dark"] .eyebrow{color:var(--conifer)}

@media (max-width:980px){
  .shead{grid-template-columns:1fr;gap:10px}
  .shead .guide{justify-self:start;max-width:none;padding-bottom:0}
  .closeband{padding:24px 20px}
}

/* The dossier prints as a document, so the close band drops its ink. */
@media print{
  .closeband{background:#fff;color:#000;border:1px solid #ccc}
  .closeband h2{color:#000}
  .closeband .guide{color:#333}
  .dz.featured{box-shadow:none;border-color:#ccc}
}

/* =================================================================
   Two modes: the gate before the call, and the call itself
   ================================================================= */

/* --- call mode door on the cover, quiet on purpose. Agents never
   need it, the strategist opens it once a day. --- */
.callmode{
  margin-top:18px;background:none;border:0;padding:0;cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--mute);
  text-decoration:underline;text-underline-offset:3px;
}
.callmode:hover{color:var(--ink)}
body[data-zone="dark"] .callmode{color:rgba(255,255,255,.6)}
body[data-zone="dark"] .callmode:hover{color:#fff}

/* --- the gate. Locked is the resting state, and it says why in words
   rather than greying something out and hoping. --- */
.gatecard{border-color:#E8C9A0;background:#FDF9F3}
.gatecard.open{border-color:var(--ink);background:var(--card)}
.lock-top{display:flex;align-items:center;gap:11px;margin-bottom:10px;flex-wrap:wrap}
.lockmark{
  font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  background:#F5E4CC;color:var(--amber);padding:4px 10px;border-radius:999px;
}
.lockmark.open{background:var(--conifer);color:var(--ink)}
.lock-top h3{margin:0}
.misslist{list-style:none;margin:14px 0 18px;padding:0;display:flex;flex-direction:column;gap:10px}
.misslist li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.45}
.misslist:empty{margin:0 0 18px}
.btn.disabled{opacity:.45;pointer-events:auto;cursor:not-allowed;text-decoration:none}
a.btn{display:block;text-align:center;text-decoration:none}

/* The calendar itself, mounted in place once the gate opens. The widget owns
   its own chrome, so this is a frame and a margin and nothing else. */
.calwrap{margin-top:20px;border-top:1px solid var(--line);padding-top:18px}
.calwrap .calendly-inline-widget{width:100%;border-radius:12px;overflow:hidden}
.calwrap .note.small{margin-top:10px}
.notecard{max-width:620px}

/* --- the starter screen, ruled 9/15. An orientation, not an agenda: one
   picture of the three groups of people, and the example math in words.
   The price card and the readback that used to sit here are gone. --- */
.orient-head{position:relative;padding-right:170px;grid-template-columns:minmax(0,1fr)}
.orient-tag{
  position:absolute;top:2px;right:0;font-size:10.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--mute);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px;white-space:nowrap;
}
.orient{
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:38px;align-items:start;margin-top:24px;
}
/* The art slot. Swapping the SVG for a generated image changes nothing
   here: both children are sized by the figure, not the other way round. */
.orient-art{
  margin:0;border:1px solid #2C2A26;border-radius:20px;overflow:hidden;background:#111111;
}
.orient-svg,.orient-img{display:block;width:100%;height:auto}
.orient-lede{font-size:16.5px;line-height:1.55;color:var(--ink2);margin:0 0 22px;max-width:48ch}
.orient-legend{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:15px}
.orient-legend li{
  display:flex;flex-direction:column;gap:5px;align-items:flex-start;
  border-top:1px solid var(--line);padding-top:14px;
}
.orient-chip{
  font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink2);border:1px solid var(--line);border-radius:999px;padding:3px 10px;
}
.orient-legend b{font-family:var(--disp);font-size:15.5px;font-weight:600;line-height:1.25}
.orient-legend li > span:last-child{font-size:13.5px;color:var(--ink2);line-height:1.5}
.orient-math{
  background:var(--card);border:1px solid var(--line);border-radius:15px;padding:19px 20px;
}
.orient-math p{margin:0 0 9px;font-size:14.5px;line-height:1.5}
.orient-math .orient-note{color:var(--mute);font-size:13px;margin:13px 0 0;line-height:1.5}

@media (max-width:1080px){
  .orient{grid-template-columns:1fr;gap:26px}
  .orient-head{padding-right:0}
  .orient-tag{position:static;justify-self:start;display:inline-block;margin-bottom:12px}
  /* The picture is the parachute, not the poster. It keeps a sane size when
     the two columns stack rather than growing to the width of the stage. */
  .orient-art{max-width:520px}
}

/* --- step one: what prep already told us, read as settled text --- */
.basics-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.basics-top .subhead{margin-bottom:0}
.basics-edit{
  background:none;border:1px solid var(--line);border-radius:999px;padding:5px 13px;
  font-size:12.5px;font-weight:600;color:var(--ink2);cursor:pointer;
}
.basics-edit:hover{border-color:var(--ink);color:var(--ink)}
.basics-known{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}
.bk{display:flex;flex-direction:column;gap:4px;border-left:2px solid var(--line);padding-left:13px}
.bk b{
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mute);font-weight:600;
}
.bk span{font-size:15px;font-weight:500;line-height:1.4}
.bk.miss span{color:var(--amber);font-weight:400}
.basics-form{margin-top:20px;border-top:1px solid var(--line);padding-top:20px}
.onfile p{margin:0;font-size:13px;line-height:1.45}
.onfile b{display:block;font-weight:600}
.onfile span{color:var(--mute);font-size:12.5px}
.on-no b{color:var(--amber)}

/* =================================================================
   How they behave. No pills: every example reads in full.
   ================================================================= */

.beh{display:grid;grid-template-columns:86px minmax(0,1fr);gap:7px 12px;margin:0 0 10px}
.beh-k{
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);
  font-weight:600;line-height:1.5;padding-top:1px;
}
.beh-vs{display:flex;flex-direction:column;gap:3px;min-width:0}
.beh-v{font-size:13px;color:var(--ink2);line-height:1.45;overflow-wrap:anywhere}

.carderr{
  font-size:12.5px;color:var(--amber);background:#FDF7EF;border:1px solid #E8C9A0;
  border-radius:9px;padding:8px 11px;margin:10px 0 0;line-height:1.4;
}

/* --- a card being redone works alone. The other three never move. --- */
.gcard.busy{position:relative}
.gcard.busy .g-body,.gcard.busy .g-acts,.gcard.busy .g-top{opacity:.18}
.cardwork{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;z-index:2;border-radius:var(--card-r);
}
.cardwork p{font-size:13px;color:var(--ink2);margin:0;font-weight:500}
.cardwork .pulse{margin-bottom:6px}

/* =================================================================
   Step 2A: one tactic per audience
   ================================================================= */

.matchbanner{
  display:flex;align-items:center;gap:11px;font-size:13.5px;font-weight:500;
  border:1px solid var(--line);background:var(--card);border-radius:999px;
  padding:11px 18px;margin-bottom:16px;line-height:1.35;
}
.matchbanner.warn{border-color:#E8C9A0;background:#FDF7EF;color:var(--amber)}
.matchbanner.ok{border-color:var(--ink)}
.matchbanner:empty{display:none}

.matchlist{display:flex;flex-direction:column;gap:12px}
.mrow{
  background:var(--card);border:1px solid var(--line);border-radius:var(--card-r);
  padding:20px 22px;display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1.1fr);
  gap:18px;align-items:center;
}
.mrow.done{border-color:var(--ink)}
.m-left .g-label{font-size:19px;margin-bottom:5px}
.m-who{font-size:13px;color:var(--ink2);line-height:1.45;margin:0}
.m-arrow{
  font-family:var(--disp);font-size:26px;color:var(--line);text-align:center;line-height:1;
}
.mrow.done .m-arrow{color:var(--ink)}
.m-lab{
  display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mute);font-weight:600;margin-bottom:5px;
}
.m-right select,.m-right input[type=text]{
  width:100%;font:inherit;font-size:14px;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:10px 12px;
}
.m-right select:focus,.m-right input:focus{outline:2px solid var(--violet);outline-offset:-1px;background:var(--card)}
.m-when{font-size:12.5px;color:var(--mute);margin:7px 0 0;line-height:1.4}

/* =================================================================
   Step 4: the tactic picker
   ================================================================= */

.addon.on{border-color:var(--ink);background:var(--card)}
.addon.locked{cursor:default}
.addon.locked .ad-when{color:var(--violet);font-weight:500}
.req-block.ok{border-color:var(--line);background:var(--bg)}
.req-block.ok .req-tag{color:var(--mute)}
.req-block.warn{border-color:#E8C9A0;background:#FDF7EF}
.req-block.warn .req-tag{color:var(--amber)}
.req-block textarea{
  width:100%;font:inherit;font-size:14px;background:var(--card);
  border:1px solid var(--line);border-radius:9px;padding:10px 12px;
}
.floorline{font-size:12.5px;color:var(--mute);margin:12px 0 0;line-height:1.45}
.floorline.warn{color:var(--amber);font-weight:600}

/* =================================================================
   Step 5: the launch date
   ================================================================= */

.datepicks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.datepicks .pick{align-items:flex-start}
input[type=date]{
  width:100%;font:inherit;font-size:14.5px;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:9px;padding:10px 12px;
}
input[type=date]:focus{outline:2px solid var(--violet);outline-offset:-1px;background:var(--card)}
.whenline{margin-top:16px}
.whenline.on{
  border:1px solid var(--ink);border-radius:13px;padding:15px 17px;background:var(--bg);
}
.whenline b{display:block;font-family:var(--disp);font-size:16px;font-weight:600;margin-bottom:5px}
.whenline span{font-size:13px;color:var(--ink2);line-height:1.5}

/* --- dossier additions --- */
.dz-tac{font-size:13px;color:var(--ink2);margin:0 0 9px;line-height:1.4}
.dz-tac b{color:var(--ink);font-weight:600}
.dz-tac.warn{color:var(--amber)}
.dz-card .beh{grid-template-columns:96px minmax(0,1fr);margin-top:10px}

@media (max-width:980px){
  .mrow{grid-template-columns:1fr;gap:14px;padding:18px}
  .m-arrow{display:none}
  .datepicks{grid-template-columns:1fr}
  .wide-read{grid-template-columns:1fr}
  .beh{grid-template-columns:1fr;gap:2px 0}
  .beh-k{margin-top:8px}
  .matchbanner{border-radius:14px;align-items:flex-start}
}

/* =================================================================
   Panel build: the decisions that have to be visible
   ================================================================= */

/* --- the thin step bar above every numbered stop --- */
.stepbar{grid-column:1 / -1;display:flex;gap:4px;margin-bottom:12px}
.stepbar i{flex:1;height:3px;border-radius:2px;background:var(--line);transition:background-color .2s}
.stepbar i.done{background:var(--ink)}
.stepbar i.now{background:var(--violet)}

/* --- the pinned decision bar. The thing the screen is waiting on
   stays on screen while the cards scroll under it. --- */
.killbar{
  position:sticky;top:10px;z-index:5;
  display:flex;align-items:center;gap:11px;font-size:13.5px;font-weight:500;
  border:1px solid var(--line);background:var(--card);border-radius:999px;
  padding:11px 18px;margin-bottom:14px;line-height:1.35;
}
.killbar.warn{border-color:#E8C9A0;background:#FDF7EF;color:var(--amber)}
.killbar.ok{border-color:var(--ink)}

/* --- staleness. Amber, named, and it will not let the record out
   until the agent says which version is right. --- */
.stalebar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border:1px solid #E8C9A0;background:#FDF7EF;border-radius:15px;
  padding:14px 18px;margin-bottom:16px;
}
.stale-t b{display:block;font-size:14px;font-weight:600;color:var(--amber)}
.stale-t span{display:block;font-size:12.5px;color:var(--ink2);line-height:1.45;max-width:64ch}
.stale-acts{display:flex;gap:8px;flex:none}

/* --- the reason chips on a card that just lost --- */
.whyask{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 10px}
.whyask-q{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:600;width:100%}
.whychip{
  border:1px solid var(--line);background:var(--card);color:var(--ink2);
  border-radius:999px;padding:5px 11px;font-size:12px;font-weight:500;cursor:pointer;
}
.whychip:hover{border-color:var(--ink);color:var(--ink)}
.whychip.skip{color:var(--mute);border-style:dashed}
.killwhy{font-size:12.5px;color:var(--ink2);margin:2px 0 10px;font-weight:500}
.orphan{
  font-size:12px;color:var(--amber);background:#FDF7EF;border:1px solid #E8C9A0;
  border-radius:8px;padding:6px 10px;margin:0 0 9px;line-height:1.35;
}

/* --- card states you cannot mistake for each other --- */
.gcard.killed{opacity:.72;background:#EFEDE9;border-style:dashed;filter:grayscale(1)}
.gcard.killed .g-label{text-decoration:line-through;text-decoration-thickness:2px;color:var(--mute)}
.gcard.killed .g-badge.kill{background:var(--ink);color:#fff;font-size:11px;padding:5px 11px}
.gcard.kept .g-badge.keep{letter-spacing:.04em}
.g-index{
  display:block;font-size:10.5px;letter-spacing:.1em;color:var(--mute);
  font-weight:600;margin-bottom:3px;
}

/* A brought-back card keeps its button on one line. */
.g-acts .gbtn{white-space:nowrap}
.gcard.killed .g-acts .gbtn{padding-left:9px;padding-right:9px}

/* --- write one for the audience nobody wrote for --- */
.needwrite{display:flex;gap:7px;flex-wrap:wrap}

/* --- start over, deliberately small --- */
.restart{margin:10px 0 0;text-align:center}

/* --- the file list now carries a count --- */
.fl-n{display:block;font-size:11.5px;color:var(--mute)}
.fl-n.warn{color:var(--amber)}
.crmerror{
  font-size:12.5px;color:var(--amber);background:#FDF7EF;border:1px solid #E8C9A0;
  border-radius:9px;padding:9px 12px;margin:11px 0 0;line-height:1.4;
}

/* --- suggestion chips, the answer to a blank box --- */
.ideas{margin-top:10px}
.ideabtn{
  background:none;border:0;padding:0;color:var(--violet);
  font-size:12.5px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.ideabtn:disabled{color:var(--mute);cursor:default;text-decoration:none}
.ideanote{display:block;font-size:12px;color:var(--mute);margin-top:6px;line-height:1.45}
.ideachips{display:flex;flex-direction:column;gap:7px;margin-top:9px}
.ideachips:empty{margin:0}
.chipbtn{
  text-align:left;border:1px solid var(--line);background:var(--card);color:var(--ink2);
  border-radius:11px;padding:9px 12px;font-size:13px;line-height:1.45;cursor:pointer;
}
.chipbtn:hover{border-color:var(--ink);color:var(--ink)}

/* --- the glossary Sam asked for, on the screen where it is needed --- */
.glossary{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.gl{border:1px solid var(--line);border-radius:12px;padding:14px 15px;background:var(--bg)}
.gl-n{font-size:14px;font-weight:600;margin-bottom:5px}
.gl-n span{display:block;font-size:12px;font-weight:500;color:var(--violet)}
.gl p{font-size:12.5px;color:var(--ink2);line-height:1.5;margin:0}
.m-def{font-size:12.5px;color:var(--ink2);line-height:1.45;margin:7px 0 0}

/* --- one row per campaign, each one confirmed by hand --- */
.pairlist{display:flex;flex-direction:column;gap:11px}
.pair{border:1px solid var(--line);border-radius:14px;padding:15px 17px;background:var(--bg)}
.pair.on{border-color:var(--ink);background:var(--card)}
.pair-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pair-id b{display:block;font-family:var(--disp);font-size:16px;font-weight:600;line-height:1.2}
.pair-id span{display:block;font-size:13px;color:var(--ink2);margin-top:2px}
.pair-price{font-size:14px;font-weight:600;color:var(--violet);flex:none}
.pair-def{font-size:12.5px;color:var(--mute);line-height:1.5;margin:9px 0 11px}
.pair-act{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pair-note{font-size:12px;color:var(--mute)}
.pair-ok{font-size:13px;font-weight:600;color:var(--ink)}
.pair-change{background:none;border:0;padding:0;color:var(--violet);font-size:12.5px;font-weight:600;cursor:pointer}
.pair-change:hover{text-decoration:underline}
.tr-who{display:block;font-style:normal;font-size:11.5px;color:var(--mute)}

/* --- the record does not leave until the decisions are made --- */
.exportlock{
  font-size:13px;color:var(--amber);background:#FDF7EF;border:1px solid #E8C9A0;
  border-radius:11px;padding:11px 14px;margin:0 0 16px;line-height:1.45;
}
.handoff{border-color:var(--ink)}

/* --- what we are building from reads in full --- */
.rb-full span{white-space:pre-wrap}

@media (max-width:1180px){
  .glossary{grid-template-columns:1fr}
}

@media (max-width:980px){
  /* Redline 12: the blocked reason is pinned with the Continue button
     instead of scrolling away with the instruction that explained it. */
  .nav{flex-wrap:wrap}
  .navwhy{display:block;order:-1;flex-basis:100%;margin-bottom:4px}
  .navwhy:empty{display:none}
  .stalebar{flex-direction:column;align-items:flex-start}
  .killbar{border-radius:14px;align-items:flex-start;top:64px}
  .pair-top{flex-direction:column;gap:4px}
}

@media print{
  /* Redline 11: the packet prints as a document, not as a pile of
     half-cards. Nothing breaks inside a card, nothing prints that is
     screen furniture. */
  .gcard,.dz-card,.pair,.gl{break-inside:avoid;page-break-inside:avoid}
  .dz-top{break-after:avoid;page-break-after:avoid}
  .send,.killbar,.stalebar,.stepbar,.exportlock,.whyask{display:none !important}
  .empty,.working,.oops{min-height:0}
  .canvas-main{min-height:0}
  .dz{padding:18px 20px}
  .dz h3{break-after:avoid;page-break-after:avoid}
}

/* =================================================================
   Round two. Everything below answers one line of the re-review.
   ================================================================= */

/* --- the screen reader's copy of what just changed --- */
.sr-live{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --- Codex 12: one focus treatment, every control. Keyboard users had
   nothing at all on the new buttons. --- */
:focus-visible{
  outline:2px solid var(--violet);
  outline-offset:2px;
  border-radius:6px;
}
.gbtn:focus-visible,.btn:focus-visible,.pick:focus-visible,.chipbtn:focus-visible,
.whychip:focus-visible,.addon:focus-visible-within,.rv-edit:focus-visible,
.pair-change:focus-visible,.ideabtn:focus-visible,.danger:focus-visible,
.callmode:focus-visible,.addon input:focus-visible ~ .box{
  outline:2px solid var(--violet);outline-offset:2px;
}
body[data-zone="dark"] :focus-visible{outline-color:var(--conifer)}

/* --- Codex 11: the reason chips were 27px on a phone. Nothing a thumb
   has to hit is under 44. --- */
.whychip{min-height:44px;display:inline-flex;align-items:center;padding:8px 14px}
.whyask{gap:8px}
.gbtn{min-height:40px}
@media (max-width:640px){
  .gbtn,.pick,.chipbtn,.ideabtn{min-height:44px}
  .pair-change,.rv-edit{min-height:44px;display:inline-flex;align-items:center}
}

/* --- Codex 11: the reasons read as rows, not as muted asides in a
   parenthesis nobody reads. --- */
.cutlist{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.cut-r{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:baseline;
  border-top:1px solid var(--line);padding-top:8px;
}
.cut-w{
  font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;
  color:#fff;background:var(--ink);border-radius:999px;padding:3px 9px;
}
.cut-n{font-size:13.5px;color:var(--ink2);line-height:1.45}
.cut-y{font-size:12.5px;color:var(--mute);white-space:nowrap}
@media (max-width:640px){
  .cut-r{grid-template-columns:auto minmax(0,1fr)}
  .cut-y{grid-column:1 / -1;white-space:normal}
}

/* --- Codex 8: a build that did not finish keeps saying so --- */
.failline{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:13px;color:var(--amber);background:#FDF7EF;border:1px solid #E8C9A0;
  border-radius:14px;padding:11px 15px;margin-bottom:14px;line-height:1.45;
}
.fail-acts{display:flex;gap:8px;flex:none}

/* --- Codex 2: a reconfirm we would not sign --- */
.stale-no{
  display:block;margin-top:8px;font-size:12.5px;font-weight:600;color:var(--amber);
  line-height:1.45;max-width:64ch;
}

/* --- Codex 6: the recommendation on the match screen. Stated, reasoned,
   and never preselected. --- */
.rec{
  border:1px solid var(--line);border-left:3px solid var(--violet);
  background:var(--card);border-radius:11px;padding:12px 14px;margin-bottom:13px;
}
.rec-h{
  font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mute);font-weight:600;margin-bottom:4px;
}
.rec-n{font-family:var(--disp);font-size:16px;font-weight:600;line-height:1.25}
.rec-w{font-size:12.5px;color:var(--ink2);line-height:1.5;margin:6px 0 11px}
.rec-acts{display:flex;gap:8px;flex-wrap:wrap}

/* --- Codex 4: a tactic with no audience is a want, not a line --- */
.pair.pend{border-style:dashed;border-color:#E8C9A0;background:#FDF7EF}
.pair-price.warn{color:var(--amber);font-size:12.5px}
.addon.pend .ad-price{color:var(--amber);font-size:12px;font-weight:600}
.addon.pend{border-color:#E8C9A0;background:#FDF7EF}

/* --- Codex 5: the arithmetic, on the screen with the bill on it --- */
.pricemath{
  font-size:13.5px;font-weight:600;color:var(--violet);
  margin:10px 0 0;line-height:1.5;
}

/* --- Codex 1: when the fact check pulls a card, the tally says so --- */
.tally-pulled{
  display:block;font-style:normal;font-size:12px;color:var(--amber);
  font-weight:500;margin-top:3px;line-height:1.4;
}

@media print{
  .failline,.rec,.cut-r{break-inside:avoid;page-break-inside:avoid}
  .failline,.rec{display:none !important}
}

/* The hold-for-now state on the launch screen */
.holdzone .holdpick{width:100%}
.holdzone .fields{margin-top:10px}