/* hugo Day Zero journey

   Brand system is strict and it got stricter on 9/17. Warm off-white ground,
   white cards, near black ink. Violet is punctuation: one per screen, and it
   points at the thing to look at next. Conifer means confirmed and it means
   nothing else, so it appears on the audiences Sam has confirmed and on a
   prescription that is being kept, and nowhere at all otherwise.

   The amber that used to carry every warning is gone. A warning is a white
   card with a violet rule down its left edge, because a second accent colour
   invented for problems is a second brand.

   Motion law: transform and opacity only, nothing else animates, and every
   animation is off under prefers-reduced-motion. Nothing on the call portion
   moves on a timer. */

:root{
  --bg:#F4F2EE;
  --card:#FFFFFF;
  --ink:#0A0A0A;
  --ink2:#3D3D3D;
  --mute:#737373;
  --line:#E5E5E5;
  --violet:#4F06EB;
  --conifer:#CFFF5E;
  /* 9/29 design pass, carried from the brand report (concept D6). The seven
     greys that used to be written inline fold into these two. */
  --line2:#CFCBC4;        /* hover and dashed edges */
  --bg2:#EBE8E2;          /* a quiet hover wash on the ground */
  --night:#14120F;        /* the one dark ground */
  --night2:#1E1B17;       /* a card on the dark ground */
  --nfg:#F4F2EE;          /* ink on the dark ground */
  --nmute:rgba(244,242,238,.62);
  --nline:rgba(244,242,238,.16);
  --rail:270px;
  --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;
  /* The type scale. Eight sizes, and nothing on screen uses any other.
     Display type is Bricolage at light weights, optical size 96; everything
     else is Inter. One uppercase label style, label-caps. */
  --t-display:clamp(44px,4.6vw,80px);
  --t-h1:clamp(36px,3.4vw,54px);
  --t-h2:clamp(26px,2.1vw,34px);
  --t-h3:20px;
  --t-lg:17px;
  --t-body:14px;
  --t-micro:12.5px;
  --t-label:11.5px;
  --w-disp:300;
  --track-caps:.12em;
  /* Motion, the report's: one ease, one reveal length. */
  --ease:cubic-bezier(.2,.7,.1,1);
  --reveal:.55s;
}

/* Ruled 9/17. Colour follows the narrative act. Dark is the thesis and the
   cover. 9/29 design pass: the sage zone is gone (it was off palette), so the
   decisions sit on the same ivory ground as the rest of the call. Dark is the
   one night tone the brand report uses. */
body[data-zone="dark"]{
  --bg:var(--night);
  --card:var(--night2);
  --ink:var(--nfg);
  --ink2:rgba(244,242,238,.78);
  --mute:var(--nmute);
  --line:var(--nline);
  --line2:rgba(244,242,238,.3);
}

*{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:var(--t-body);line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
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}
.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;
}

/* ---------------- 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 20px 20px;position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;
}
.rail .logo{display:block;width:64px;margin-bottom:26px}
.rail .logo img{width:100%}
.rail-lab{
  font-family:var(--body);font-size:var(--t-label);font-weight:500;letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--mute);margin-bottom:14px;
}

/* The one counter in the tool. It sits above the list, it says the same words
   the phone's top bar says, and nothing else anywhere counts steps. */
/* 9/29 design pass: one progress indicator per screen, and on a desktop that
   is the numbered rail itself. The counter line stays in the markup (the
   phone's top bar says the same words) and steps out of sight here. */
.rail-count{
  display:none;font-size:var(--t-micro);font-weight:500;color:var(--ink2);margin:-8px 0 12px;
}

/* The rail, rebuilt 9/18: one numbered line per screen. Quiet by default so
   that the line she is standing on is the only one with any weight on it. */
.steps{list-style:none;margin:0;padding:0;flex:1}
.steps li{margin-bottom:2px}
.steps button{
  display:flex;align-items:center;gap:10px;width:100%;
  background:none;border:0;padding:7px 8px;border-radius:9px;cursor:pointer;
  text-align:left;color:var(--mute);font-size:var(--t-micro);font-weight:400;
}
.steps button:hover{background:var(--bg2)}
.steps button[aria-current="true"]{background:none;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font-weight:500}
.dot{
  width:20px;height:20px;flex:none;border-radius:50%;border:1px solid var(--line);
  background:none;display:grid;place-items:center;margin-top:0;
  font-size:var(--t-label);font-weight:500;color:var(--mute);font-variant-numeric:tabular-nums;
}
.dot svg{width:10px;height:10px;display:block}
.dot.on{background:none;border-color:var(--ink2);color:var(--ink)}
.st-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.st-name{min-width:0}
/* "You are here" in words, because a shade of grey is not an answer to
   "where am I". */
.st-here{font-size:var(--t-label);font-weight:500;color:var(--violet)}
/* The calendar-gate pattern, on the line that owes the thing. Quiet, never a
   banner, and it only shows on a line already walked past. */
.st-need{font-size:var(--t-label);font-weight:400;color:var(--mute);line-height:1.35}
.st-state{font-size:var(--t-label);font-weight:500;color:var(--ink2)}

.rail-foot{font-size:var(--t-label);color:var(--mute);line-height:1.5;border-top:1px solid var(--line);padding-top:12px}
.stamp{display:flex;align-items:center;gap:7px;font-weight:400;color:var(--mute);margin-bottom:2px}
.stamp:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--line2)}
.stamp.on:before{background:var(--conifer);box-shadow:0 0 0 1px rgba(10,10,10,.12)}
.stamp.on{color:var(--mute)}

.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}
/* Ruled 9/17. The step pill stopped being lime. Lime is what a confirmation
   looks like, and a step label is not a confirmation. */
/* 9/29 design pass: the screen name above a heading is the D6 outlined pill.
   The step pill is a counter, and the rail is the one counter on a desktop,
   so it steps out of sight (the title slide's label pill stays). */
.kick-step,.kick-q{
  display:inline-flex;align-items:center;gap:9px;min-height:28px;
  border-radius:999px;padding:5px 12px 5px 11px;border:0;background:none;
  font-family:var(--body);font-size:var(--t-label);font-weight:500;letter-spacing:.04em;
  box-shadow:inset 0 0 0 1px var(--line2);color:var(--ink);white-space:nowrap;
}
.kick-step:before,.kick-q:before{
  content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--violet);box-shadow:0 0 0 3px rgba(79,6,235,.12);
}
.kick-step{display:none}
.kick-q{color:var(--ink)}

h1{
  font-family:var(--disp);font-weight:var(--w-disp);font-variation-settings:"opsz" 96;margin:0 0 16px;
  font-size:var(--t-h1);letter-spacing:-.03em;line-height:1;text-wrap:balance;
}
h2{
  font-family:var(--disp);font-weight:var(--w-disp);font-variation-settings:"opsz" 96;margin:0 0 10px;
  font-size:var(--t-h2);letter-spacing:-.02em;line-height:1.08;text-wrap:balance;
}
h3{font-family:var(--disp);font-size:var(--t-h3);line-height:1.25;margin:0 0 8px;font-weight:400;letter-spacing:-.01em;text-wrap:balance}
p{text-wrap:pretty}
.guide{color:var(--ink2);font-size:var(--t-body);max-width:70ch;margin:0}
.lede{color:var(--ink2);font-size:var(--t-lg);line-height:1.55;max-width:52ch;margin:0 0 26px}
.eyebrow{
  font-family:var(--body);font-size:var(--t-label);font-weight:500;letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--mute);margin-bottom:14px;
}

/* The guide sits beside the headline rather than under it, which uses the
   horizontal room the bigger type spends vertically. */
.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}

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

.cover{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;min-height:74vh}
.cover-cta{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.cover-note{font-size:var(--t-micro);color:var(--mute)}
/* Ruled 9/28, the release line on the front door. 9/29 design pass: the dated
   chip came off, because it said what the line under it already says. */
.cover-new{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:0 0 26px}

.new-line{font-size:var(--t-body);font-weight:500;color:var(--ink);line-height:1.45}
/* The second sentence wraps whole on a phone rather than breaking mid-way. */
.new-line span{display:inline-block}

/* The staff door, quiet on purpose. Agents never need it. */
.callmode{
  margin-top:18px;background:none;border:0;padding:0;cursor:pointer;
  font-size:var(--t-micro);font-weight:500;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}

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

.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--card-r);
  padding:22px 25px;margin-bottom:14px;
}
/* Ruled 9/17. A step that is only a question and an answer does not get a
   card, because the wall an agent sees is made of card edges. */
.plain{margin-bottom:14px;max-width:620px}

.subhead{
  font-family:var(--body);font-size:var(--t-label);font-weight:500;letter-spacing:var(--track-caps);
  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}
.f.compact{max-width:420px;margin-bottom:26px}
label{font-size:var(--t-body);font-weight:500;color:var(--ink);margin-bottom:5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hint{font-size:var(--t-micro);color:var(--mute);margin-bottom:7px;font-weight:400;line-height:1.45}
.req{
  font-size:var(--t-label);font-weight:500;letter-spacing:var(--track-caps);text-transform:uppercase;
  color:var(--mute);border:0;padding:0;
}
input[type=text],input[type=email],input[type=date],textarea{
  width:100%;font:inherit;font-size:var(--t-body);color:var(--ink);
  background:var(--card);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}
textarea{line-height:1.5}
.note{font-size:var(--t-micro);color:var(--ink2);margin:0 0 14px;line-height:1.5}
.note.small{font-size:var(--t-micro);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(--card);border-radius:11px;
  padding:13px 14px;cursor:pointer;text-align:left;
  font-size:var(--t-body);font-weight:500;color:var(--ink2);line-height:1.35;
  display:flex;flex-direction:column;gap:3px;
}
.pick span{font-size:var(--t-micro);font-weight:400;color:var(--mute)}
.pick:hover{border-color:var(--line2)}
.pick{position:relative}
.pick.on{border-color:var(--ink);color:var(--ink)}
/* Selected reads as an ink hairline plus the violet dot, never a heavy ring. */
.pick.on:after,.tac.on:after,.copt.on:after,.forkcard.on:after{
  content:"";position:absolute;top:14px;right:14px;width:7px;height:7px;border-radius:50%;
  background:var(--violet);box-shadow:0 0 0 3px rgba(79,6,235,.12);
}

/* ---------------- photos and the CRM export ---------------- */

.drop{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  border:1px dashed var(--line2);border-radius:11px;padding:24px;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:var(--t-body);font-weight:500;color:var(--violet)}
.drop-sub{font-size:var(--t-micro);color:var(--mute)}
.filelist{list-style:none;margin:11px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.filelist li{
  font-size:var(--t-micro);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;
}
.fl-n{display:block;font-size:var(--t-micro);color:var(--mute)}

/* The or between the upload and the folder link. */
.orsplit{
  display:flex;align-items:center;gap:12px;margin:20px 0 18px;
  font-size:var(--t-label);font-weight:500;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--mute);
}
.orsplit:before,.orsplit:after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------------- the booking gate ---------------- */

/* Ruled 9/17. No amber, no word Locked, and no box whose only content is a
   refusal. The exact missing items, and the calendar takes their place. */
.gatecard{border-color:var(--line)}
.gatecard.open{border-color:var(--ink)}
.lockbox{
  overflow:hidden;
  animation:openUp var(--reveal) var(--ease) both;
}
.locklist{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.locklist li{
  display:flex;flex-direction:column;gap:2px;
  border-left:2px solid var(--violet);padding-left:13px;
}
.lk-w{font-size:var(--t-body);font-weight:500}
.lk-y{font-size:var(--t-micro);color:var(--mute);line-height:1.45}

/* Ruled 9/18. The calendar is the screen, so it takes the room: the heading
   sits tight above it, the card gives up most of its padding once it opens,
   and the embed grows to whatever the viewport has left so the times are above
   the fold on a laptop. */
#screen-book .shead.tight{margin-bottom:12px}
#screen-book .shead.tight .kicker{margin-bottom:0}
#screen-book h2{font-size:clamp(1.5rem,2vw,1.9rem)}
.gatecard.open{padding:10px 12px}
.calwrap{animation:openUp var(--reveal) var(--ease) both}
/* The reserved 250px is everything else on this screen: the step bar, the
   kicker, the heading, the card's own padding, the line under the calendar and
   the fixed nav at the foot. Whatever is left is the calendar's, so the times
   sit above the fold on a 720 pixel laptop and grow on anything taller. */
.calwrap .calendly-inline-widget{
  width:100%;border-radius:12px;overflow:hidden;
  min-height:420px;
  height:min(900px,calc(100vh - 250px)) !important;
}
/* The way out, under the calendar, centred, and only there when the calendar
   is. */
.calfallback{
  text-align:center;font-size:var(--t-micro);color:var(--mute);
  margin:12px 0 0;line-height:1.5;
}
.calfallback a{color:var(--violet);font-weight:500}

/* ---------------- step one: the one question ---------------- */

/* Ruled 9/18, Hugo: back to one column. What prep already told us is a
   collapsed bar across the top and the two questions run full width under it.
   The two question groups wear deliberately different containers, chipped
   Style A and Style B, because Sam is picking one. */
.objsingle{display:flex;flex-direction:column;gap:20px;max-width:780px}

.prepbar{border:1px solid var(--line);border-radius:14px;background:var(--card)}
.prepbar-top{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:none;border:0;padding:14px 18px;cursor:pointer;font:inherit;
  border-radius:14px;
}
.prepbar-top:hover{background:var(--bg)}
.prepbar-k{
  font-size:var(--t-label);letter-spacing:var(--track-caps);text-transform:uppercase;
  color:var(--mute);font-weight:500;flex:none;
}
.prepbar-v{
  flex:1;min-width:0;font-size:var(--t-body);color:var(--ink);line-height:1.4;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0 7px;
}
.bk{font-weight:500}
.bk.miss{color:var(--mute);font-weight:400}
.bk-dot{color:var(--mute)}
.prepbar-act{
  flex:none;font-size:var(--t-micro);font-weight:500;color:var(--violet);
  text-decoration:underline;text-underline-offset:3px;
}
.prepbar.open .prepbar-top{border-bottom:1px solid var(--line);border-radius:14px 14px 0 0}
.basics-form{padding:20px 18px}
.basics-form .picks{grid-template-columns:1fr}

/* Ruled 9/18: one label treatment, used by both question groups, by the
   fields inside the prep bar, and by the destination boxes. */
.qlab{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:var(--t-body);font-weight:500;color:var(--ink);margin-bottom:6px;
}
.qnote{font-size:var(--t-micro);color:var(--ink2);margin:0 0 10px;line-height:1.5;max-width:64ch}

/* Ruled 9/22, Sam picked Style A: a bordered white box, the field sitting
   inside it. Both question groups wear it, and the Style B treatment and the
   research chips came off with the pick. */
.qgroup{
  position:relative;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;
}
.qgroup input{max-width:460px;background:var(--bg)}
.qgroup textarea{font-size:var(--t-lg);line-height:1.6;background:var(--bg)}

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

.canvas{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
.canvas-main{min-height:430px;display:flex;flex-direction:column;min-width:0}

.empty,.oops{
  flex:1;border:1px dashed var(--line2);border-radius:var(--card-r);
  display:grid;place-items:center;padding:40px;background:rgba(255,255,255,.42);
}
.empty-in,.oops-in{text-align:center;max-width:38ch}
.empty-in p,.oops-in p{font-size:var(--t-body);color:var(--mute);margin:0}
.empty-mark{
  font-family:var(--disp);font-size:var(--t-h1);font-weight:300;color:var(--line);
  line-height:1;margin-bottom:10px;
}
.empty-in .btn{margin-top:18px}
/* A build that did not come back. White card, violet rule, no orange. */
.oops{border:1px solid var(--line);border-left:3px solid var(--violet);background:var(--card)}
.oops-in .btn{margin-top:16px}
.oops-in .btn.ghost{margin-left:8px}

/* Ruled 9/17. The wait is the empty shape of the thing being built, in the
   positions it will take, and one line that does not rotate. No spinner, no
   carousel, and no promise of a duration.

   Ruled 9/18. The line went above the shapes, where it is read, and the shapes
   carry a soft shimmer so the wait reads as work rather than as a blank gap.
   Transform and opacity only, per the motion law, and under reduced motion the
   shapes are simply still. */
.working{flex:1;display:flex;flex-direction:column;gap:18px}
.scaffold{display:grid;grid-template-columns:1fr 1fr;gap:14px;flex:1;min-height:330px}
.scaffold.lines{grid-template-columns:repeat(3,1fr);min-height:220px}
.scaffold i{
  display:block;position:relative;overflow:hidden;
  border:1px dashed var(--line2);border-radius:var(--card-r);
  background:rgba(255,255,255,.42);
  animation:breathe 2.4s ease-in-out 3;
}
.scaffold i:after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:60%;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.9),rgba(255,255,255,0));
  transform:translateX(-120%);
  animation:shimmer 1.9s ease-in-out 3;
}
.scaffold i:nth-child(2),.scaffold i:nth-child(2):after{animation-delay:.14s}
.scaffold i:nth-child(3),.scaffold i:nth-child(3):after{animation-delay:.28s}
.scaffold i:nth-child(4),.scaffold i:nth-child(4):after{animation-delay:.42s}
.worknote{margin:0;display:flex;flex-direction:column;gap:4px}
.worknote span:first-child{font-family:var(--disp);font-size:var(--t-h3);font-weight:400;letter-spacing:-.01em}
.worknote span:last-child{font-size:var(--t-micro);color:var(--mute)}
.worknote span:empty{display:none}

/* The pulse survives in one place only: a single card being rebuilt. */
.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 6}
.pulse i:nth-child(2){animation-delay:.12s}
.pulse i:nth-child(3){animation-delay:.24s}
.pulse i:nth-child(4){animation-delay:.36s}

/* ---------------- the audience cards ---------------- */

/* Ruled 9/18: all four at once, two by two, and nothing clamped. Erica called
   the depth of these revolutionary, so the searches, the publications, the
   apps and the places all read in full, and the page scrolls rather than the
   card hiding half of itself. */
.grid4{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0;align-items:start}

.gcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--card-r);
  padding:20px 22px;display:flex;flex-direction:column;position:relative;
  min-width:0;cursor:pointer;
}
.gcard.kept{border-color:var(--line2)}
/* Conifer only after the set is confirmed, which is Continue since 9/18. */
.grid4.confirmed .gcard.kept{border-color:var(--ink)}

.g-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
.g-index{
  display:block;font-size:var(--t-micro);color:var(--mute);
  font-weight:500;margin-bottom:3px;
}
.g-label{font-family:var(--disp);font-size:var(--t-h3);font-weight:400;line-height:1.2;letter-spacing:-.01em}
.g-badge{
  font-size:var(--t-label);font-weight:500;letter-spacing:var(--track-caps);text-transform:uppercase;
  padding:3px 8px;border-radius:5px;white-space:nowrap;flex:none;
  background:var(--conifer);color:var(--ink);
}

.g-body{flex:1}
/* Ruled 9/17: the clamps came off. A search query cut in half is worth
   nothing to the person reading it out loud. */
.g-line{font-size:var(--t-body);color:var(--ink2);line-height:1.5;margin:0 0 10px}
.g-ev{font-size:var(--t-micro);color:var(--ink2);border-left:2px solid var(--violet);padding-left:10px;margin:0 0 9px;line-height:1.45}
.g-sub{font-size:var(--t-label);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--mute);font-weight:500;margin:0 0 6px}
.g-head{font-family:var(--disp);font-size:var(--t-h3);line-height:1.22;font-weight:400;margin:0 0 9px;letter-spacing:-.01em}
.g-copy{font-size:var(--t-body);color:var(--ink2);line-height:1.5;margin:0 0 12px}
.g-meta{font-size:var(--t-micro);color:var(--mute);line-height:1.45;margin:0 0 6px}
.g-meta b{color:var(--ink2);font-weight:500}

.g-acts{display:flex;gap:7px;border-top:1px solid var(--line);padding-top:10px;margin-top:8px}
.gbtn{
  background:none;border:1px solid var(--line);border-radius:999px;min-height:40px;
  padding:6px 13px;font-size:var(--t-micro);font-weight:500;color:var(--ink2);cursor:pointer;
  white-space:nowrap;
}
.gbtn:hover{border-color:var(--line2);background:var(--bg)}
.gbtn:disabled{opacity:.4;cursor:not-allowed}
.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:var(--t-label);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--mute);margin-bottom:3px}
.g-edit input,.g-edit textarea{font-size:var(--t-body);padding:8px 10px;background:var(--bg)}

/* How they behave. No pills: every example reads in full. */
.beh{display:grid;grid-template-columns:92px minmax(0,1fr);gap:7px 12px;margin:0 0 10px}
.beh-k{
  font-size:var(--t-label);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--mute);
  font-weight:500;line-height:1.5;padding-top:1px;
}
.beh-vs{display:flex;flex-direction:column;gap:3px;min-width:0}
.beh-v{font-size:var(--t-micro);color:var(--ink2);line-height:1.45;overflow-wrap:anywhere}

/* A card being rebuilt works alone. The others never move. */
.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:var(--t-micro);color:var(--ink2);margin:0;font-weight:500}
.cardwork .pulse{margin-bottom:6px}
.carderr{
  font-size:var(--t-micro);color:var(--ink2);background:var(--bg);
  border-left:2px solid var(--violet);border-radius:0 9px 9px 0;
  padding:9px 12px;margin:10px 0 0;line-height:1.45;
}

/* ---------------- the audience card look ----------------

   Ruled 9/22, Sam's deck review: card style A, the classic white card with
   hairline sections and no dark name strip, with style C's four bordered
   tiles laid two by two carried over onto How they behave. Sam: "I'm going to
   choose card A here, but can we apply this sort of quadrilateral pill
   application to the how they behave section." Styles B, C and D and the
   research chips came off with the pick. */
.behtiles{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 0 10px}
.behtile{
  border:1px solid var(--line);border-radius:11px;padding:11px 12px;
  background:var(--bg);min-width:0;
}
.behtile .beh-k{margin-bottom:4px}
.behtile .beh-vs{display:flex;flex-direction:column;gap:2px}

/* Focus mode. Click a card and it expands where it is while the others step
   back. Escape restores the comparison. */
.grid4.dimmed .gcard,.cgroups.dimmed .copt{opacity:.32}
.grid4.dimmed .gcard.focused,.cgroups.dimmed .copt.focused{opacity:1}
.grid4:has(.gcard.focused){grid-template-columns:1fr}
.grid4 .gcard:not(.focused){transition:opacity .2s ease}
.gcard.focused{box-shadow:inset 0 0 0 1px var(--ink)}

/* The tray. A cut card is not destroyed and it does not go on taking a
   quarter of the screen. */
.tray{
  margin-top:16px;border-top:1px solid var(--line);padding-top:16px;
  display:flex;flex-direction:column;gap:9px;
}
.tray-h{font-size:var(--t-label);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--mute);font-weight:500}
.tray-r{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:8px 10px 8px 18px;
}
.tray-n{font-family:var(--body);font-size:var(--t-body);font-weight:500}
.tray-y{font-size:var(--t-micro);color:var(--mute);flex:1}
.tray-r .gbtn{margin-left:auto}

/* Ruled 9/18: cutting never asks why, so the reason chips came off the tray
   and their styles came off with them. */

.canvas-foot{display:flex;align-items:center;gap:16px;margin-top:18px;flex-wrap:wrap}
.restart{margin:0 0 0 auto}
.danger{background:none;border:0;color:var(--mute);font-size:var(--t-micro);cursor:pointer;text-decoration:underline}
.danger:hover{color:var(--ink)}

/* ---------------- exception states ---------------- */

/* Ruled 9/17: no second accent colour for problems. A white card with a
   violet rule down its left edge, and words a person would use out loud. */
.failline,.stalebar,.exportlock,.crmerror{
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--violet);
  border-radius:0 14px 14px 0;line-height:1.5;color:var(--ink2);
}
.failline{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:var(--t-micro);padding:12px 16px;margin-bottom:14px;
}
.fail-acts{display:flex;gap:8px;flex:none}
.stalebar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:15px 18px;margin-bottom:16px;
}
.stale-t b{display:block;font-size:var(--t-body);font-weight:500;color:var(--ink)}
.stale-t span{display:block;font-size:var(--t-micro);color:var(--ink2);line-height:1.45;max-width:64ch}
.stale-acts{display:flex;gap:8px;flex:none}
.stale-no{
  display:block;margin-top:8px;font-size:var(--t-micro);font-weight:500;color:var(--ink);
  line-height:1.45;max-width:64ch;
}
.exportlock{font-size:var(--t-micro);padding:12px 16px;margin:0 0 16px}
.crmerror{font-size:var(--t-micro);padding:10px 13px;margin:11px 0 0}

/* ---------------- step three: the bands ---------------- */

.floornote{
  font-size:var(--t-body);color:var(--ink2);max-width:74ch;margin:0 0 6px;line-height:1.55;
}
/* Ruled 9/22: the line under the floor note came off, so the floor note keeps
   the room it used to hold before the bands start. */
.floornote + .bands{margin-top:22px}

.bands{display:flex;flex-direction:column;gap:14px}
.band{
  background:var(--card);border:1px solid var(--line);border-radius:var(--card-r);
  padding:22px 26px;
}
.band-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:16px}
.band-name{font-family:var(--disp);font-size:var(--t-h3);font-weight:400;line-height:1.2;letter-spacing:-.01em}
.band-who{font-size:var(--t-body);color:var(--ink2);line-height:1.5;margin:4px 0 0;max-width:62ch}
.band-sum{
  font-family:var(--disp);font-size:var(--t-h3);font-weight:400;flex:none;text-align:right;
  white-space:nowrap;
}
.band-sum:not(:empty){}

/* Ruled 9/18. An unpicked tactic is grey, name only, no price. It lights up
   and grows its price tag the moment it is activated, which is the whole
   gesture of this screen. */
.tacs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px}
.tac{
  display:flex;flex-direction:column;gap:3px;text-align:left;cursor:pointer;
  background:var(--bg);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;font:inherit;color:var(--ink2);min-height:44px;
}
.tac:hover{border-color:var(--line2)}
.tac.off{color:var(--mute);border-style:dashed}
.tac.off:hover{color:var(--ink2);border-color:var(--line2)}
.tac{position:relative}
.tac.on{border-color:var(--ink);background:var(--card);color:var(--ink)}
.tac-n{font-family:var(--body);font-size:var(--t-body);font-weight:500;line-height:1.25}
.tac-p{font-size:var(--t-micro);color:var(--ink2)}
/* Ruled 9/25. A one audience tactic another band holds: quiet, no hover lift,
   and the reason arrives on hover and on tap. An old second pick of one reads
   as picked but not counted, so it can be seen and taken off. */
.tac.held{opacity:.5;cursor:not-allowed}
.tac.held:hover{color:var(--mute);border-color:var(--line)}
.tac.over{box-shadow:none;border-style:dashed;color:var(--ink2)}
.band-notes{margin-top:12px}
.band-note{font-size:var(--t-micro);color:var(--ink2);line-height:1.45;margin:4px 0 0}
.band-note:first-child{margin-top:0}

/* Step four. One card per activated match, each asking the one thing it needs
   plus whatever that tactic needs from the agent. */
.dlist{display:flex;flex-direction:column;gap:12px;max-width:820px}
.dcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--card-r);
  padding:20px 24px;
}
.dcard-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.dcard-who{font-family:var(--disp);font-size:var(--t-h3);font-weight:400;letter-spacing:-.01em}
.dcard-t{font-size:var(--t-micro);font-weight:500;color:var(--violet);flex:1}
.dest-off{background:none;border:0;color:var(--mute);font-size:var(--t-micro);cursor:pointer;text-decoration:underline;padding:0}
.dest-off:hover{color:var(--ink)}
.dcard input[type=text],.dcard textarea{font-size:var(--t-body);background:var(--bg)}
.dcard .qlab{margin-top:14px}
.dcard .qlab:first-of-type{margin-top:0}
.pz-say{font-size:var(--t-micro);color:var(--mute);margin:7px 0 0;line-height:1.45}
/* Ruled 9/28: each card is named for its lane, so the tactic tag beside the
   name came off and the way to take it off sits at the far edge. */
.dcard-top .dest-off{margin-left:auto}
.lanefile{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pixelpicks{display:flex;gap:8px;flex-wrap:wrap}
.gbtn.on{border-color:var(--ink);color:var(--ink);background:var(--card)}
.dcard p.qlab.pixel-q{margin-top:14px}
/* Below the line, 9/28: starter places for a geofencing lane, tap to add. */
.geostart{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:10px}
.geostart-k{font-size:var(--t-label);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--mute);font-weight:500;margin-right:4px}
.geostart .gbtn{white-space:normal;text-align:left}

/* The only number on the screen that moves. */
.runtotal{
  position:sticky;bottom:78px;z-index:6;margin-top:20px;
  display:flex;align-items:baseline;gap:16px;
  background:var(--card);border:1px solid var(--line2);border-radius:999px;
  padding:10px 24px;
}
.rt-k{font-size:var(--t-micro);font-weight:500}
.rt-v{font-family:var(--disp);font-size:var(--t-h2);font-weight:300;letter-spacing:-.02em}
.rt-s{font-size:var(--t-micro);color:var(--mute);margin-left:auto}
.rv-empty{font-size:var(--t-micro);color:var(--mute);margin:0}

/* ---------------- step four: the creative ---------------- */

.ideas{margin-top:10px}
.ideabtn{
  background:none;border:0;padding:0;color:var(--violet);
  font-size:var(--t-micro);font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.ideabtn:disabled{color:var(--mute);cursor:default;text-decoration:none}
.ideanote{display:block;font-size:var(--t-micro);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:var(--t-micro);line-height:1.45;cursor:pointer;
}
.chipbtn:hover{border-color:var(--ink);color:var(--ink)}

/* One audience at a time, with the ad those words make beside it. */
.clay{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:26px;align-items:start;margin-top:18px}
.cgroups{display:flex;flex-direction:column;gap:14px;min-width:0}
.cwalks{display:flex;gap:8px;flex-wrap:wrap}
.cwalk{
  border:1px solid var(--line);background:none;color:var(--mute);cursor:pointer;
  border-radius:999px;padding:7px 14px;font-size:var(--t-micro);font-weight:500;min-height:40px;
}
.cwalk.done{color:var(--ink2);border-color:var(--line2)}
.cwalk.on{background:var(--card);border-color:var(--ink);color:var(--ink)}

.cgroup{background:var(--card);border:1px solid var(--line);border-radius:var(--card-r);padding:24px 26px}
.cg-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.cg-for{font-size:var(--t-label);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--mute);font-weight:500}
.cg-name{font-family:var(--disp);font-size:var(--t-h3);font-weight:400;letter-spacing:-.01em}
.cg-tac{font-size:var(--t-micro);color:var(--violet);font-weight:500}
/* Ruled 9/22, Sam: a way to ask for new options when none of the three are
   good. One small button at the far edge of the audience heading. */
.cg-regen{margin-left:auto;align-self:center}
.cg-head .carderr{flex-basis:100%;margin-top:4px}
.coptions{display:grid;grid-template-columns:1fr;gap:10px}
.copt{
  border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--bg);
  display:flex;flex-direction:column;cursor:pointer;
}
.copt{position:relative}
.copt.on{border-color:var(--ink);background:var(--card)}
.copt .g-head{font-size:var(--t-lg);margin-bottom:6px}
.copt .g-copy{font-size:var(--t-body);margin-bottom:12px;flex:1}
.copt-acts{display:flex;gap:7px;border-top:1px solid var(--line);padding-top:10px}
.copt-edit{display:none;flex-direction:column;gap:5px}
.copt.editing .copt-edit{display:flex}
.copt.editing .g-head,.copt.editing .g-copy,.copt.editing .copt-acts{display:none}
.copt-edit label{font-size:var(--t-label);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--mute)}
.copt-edit input,.copt-edit textarea{font-size:var(--t-body);padding:9px 11px}
.copt-edit .gbtn{margin-top:8px;align-self:flex-start}
.copt.own{
  border-style:dashed;align-items:center;justify-content:center;
  color:var(--mute);font:inherit;font-size:var(--t-body);min-height:56px;
}
.copt.own:hover{border-color:var(--ink);color:var(--ink)}

.cnav{display:flex;align-items:center;gap:12px;margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.cnav-n{font-size:var(--t-micro);color:var(--mute);flex:1;text-align:center}

/* Ruled 9/28, Sam: each lane picks its own line and gets its own photo. The
   option card says which lanes use it; the rows under the options read each
   lane back with its line and its photo slot. */
.copt-use{font-size:var(--t-label);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--mute);font-weight:500;align-self:center;margin-right:2px}
.copt-acts{flex-wrap:wrap}
.lanerows{margin-top:16px;border-top:1px solid var(--line);padding-top:6px;display:flex;flex-direction:column}
.lanerow{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;gap:6px 18px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.lr-n{font-size:var(--t-micro);font-weight:500;color:var(--ink)}
.lr-line{font-size:var(--t-body);color:var(--ink2);line-height:1.4}
.lr-line.none{color:var(--mute)}
.lr-photo{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.lanerows .photofolder{margin-top:12px}
.theirads{margin:18px 0 0}
.photopick{cursor:pointer;font-size:var(--t-micro);font-weight:500;color:var(--violet)}
.photopick input{position:absolute;opacity:0;width:1px;height:1px}
.photoname{font-size:var(--t-micro);color:var(--mute)}
.photofolder{font-size:var(--t-micro);color:var(--violet);font-weight:500}

/* The ad. A quiet label above it, never a stamp across it.

   Ruled 9/18, Hugo: the card is composed by the real production ad renderer
   now (/api/mock-ads), so it arrives as a finished 300x250 Compass ad in its
   own document. The label above the zone still says "Working direction" and
   nothing is stamped across the art -- the label and the context carry that,
   the same way they did when the card was rough.

   The shell is the swap point. It holds the rough .mock-ad until the composed
   document lands, then holds the iframe instead, at the same size and in the
   same place, so nothing on the screen moves when the real one arrives. */
.mockzone{position:sticky;top:24px}
.mockgrid{display:flex;flex-direction:column;gap:18px}
.mock{margin:0}
.mock-shell{position:relative;width:100%;aspect-ratio:300 / 250;border-radius:12px;overflow:hidden;--adk:1}
/* A fixed 300x250 document scaled into whatever width the column gives it.
   Scaled, never stretched: the renderer's grid is derived from the card
   width, so the proportions have to survive the trip. */
.mock-real{
  position:absolute;top:0;left:0;width:300px;height:250px;border:0;display:block;
  transform:scale(var(--adk));transform-origin:0 0;
}
/* The renderer draws an honest ink ground when there is no photo yet, so the
   ask moves under the card rather than sitting on top of the art. */
.mock-need{display:none;font-size:var(--t-micro);color:var(--mute);margin:9px 0 0}
.mock-shell[data-real="1"] + .mock-need{display:block}
.mock-ad{
  position:relative;width:100%;aspect-ratio:300 / 250;border-radius:12px;overflow:hidden;
  background:#1C1A16 center/cover no-repeat;display:flex;flex-direction:column;justify-content:flex-end;
}
.mock-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.05) 62%)}
.mock-head{
  position:relative;font-family:var(--disp);font-size:21px;line-height:1.16;font-weight:600;
  color:#fff;margin:0 18px 10px;letter-spacing:-.015em;
}
/* 2026-09-29: the picked subhead on the rough card, under the headline, so the
   fallback says what the real ad says. */
.mock-sub{position:relative;font-size:13px;line-height:1.35;color:rgba(255,255,255,.9);margin:-4px 18px 10px}
.mock-foot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 18px 16px}
.mock-who{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.mock-compass{width:96px;height:auto;opacity:.92}
.mock-nophoto{position:relative;color:rgba(255,255,255,.5);font-size:12.5px;margin:0 18px 8px}
.mock figcaption{font-size:var(--t-micro);color:var(--mute);margin-top:9px}

/* ---------------- step five: the bill ---------------- */

.billlist{display:flex;flex-direction:column}
.bill-row{display:flex;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid var(--line);font-size:var(--t-body)}
.bill-row b{display:block;font-weight:500}
.bill-row i{font-style:normal;font-size:var(--t-micro);color:var(--mute)}
.bill-row span:last-child{font-weight:500;flex:none}
/* Ruled 9/28, Sam: a line per lane, then the audience's own subtotal. */
.bill-aud{padding:6px 0 10px;border-bottom:1px solid var(--ink)}
.bill-aud:last-child{border-bottom:0}
.bill-row.lane{padding:10px 0;font-size:var(--t-body);color:var(--ink2)}
.bill-row.lane span:last-child{font-weight:500;color:var(--ink2)}
.bill-row.sub{border-bottom:0;padding:12px 0 4px;font-weight:500;color:var(--ink)}
.total{border-top:1px solid var(--line);padding-top:14px;margin-top:4px}
.total-sum{display:flex;justify-content:space-between;align-items:baseline}
.total-sum .k{font-size:var(--t-micro);font-weight:500}
.total-sum .v{font-family:var(--disp);font-size:var(--t-h2);font-weight:300;letter-spacing:-.02em}

/* ---------------- step six: how we start ---------------- */

/* One decision, two big cards, and nothing else competing with it. */
.fork{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:34px}
.forkcard{
  display:flex;flex-direction:column;gap:6px;text-align:left;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-radius:var(--card-r);
  padding:26px 28px;font:inherit;color:var(--ink2);
}
.forkcard:hover{border-color:var(--line2)}
.forkcard{position:relative}
.forkcard.on{border-color:var(--ink);color:var(--ink)}
.fork-n{font-family:var(--disp);font-size:var(--t-h3);font-weight:400;line-height:1.2;letter-spacing:-.01em}
.fork-d{font-size:var(--t-body);color:var(--mute);line-height:1.5}

/* Rebuilt 9/28, Sam. The two-stop timeline is gone: its dots and its link
   read as two buttons. The phases are plain rows of text, a label column and
   a sentence, split by hairlines, with no dot, no box, no hover and nothing
   that looks like it can be pressed. */
.phases{max-width:760px;border-top:1px solid var(--line);margin-bottom:30px}
.phase{
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 22px;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.phase-k{
  font-family:var(--disp);font-size:var(--t-lg);font-weight:400;letter-spacing:-.01em;line-height:1.3;
}
.phase-k span{
  display:block;font-family:var(--body);font-size:var(--t-label);letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--mute);font-weight:500;margin-top:2px;
}
.phase-v{font-size:var(--t-body);color:var(--ink);line-height:1.5;margin:0}
.phase-s{font-size:var(--t-micro);color:var(--mute);line-height:1.5;margin:4px 0 0}

.launch{max-width:760px}
.launch-q{margin:0 0 10px}
.datepicks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.datepicks .pick{align-items:flex-start}
.ownday{margin:14px 0 0}
.launch-say{font-size:var(--t-body);color:var(--ink2);line-height:1.5;margin:14px 0 0;max-width:62ch}
.launch-say:empty{display:none}

/* ---------------- the prescription ---------------- */

/* Ruled 9/17. The dossier is dead as a format. This is the artifact: one
   card, written for one person, with two exits and no third. */
.rx{max-width:760px;margin:6vh auto 0;min-height:56vh}
.rx-pen{
  height:2px;background:var(--ink);border-radius:2px;
  transform:scaleX(0);transform-origin:left center;
}
.rx.ready .rx-pen{animation:penDraw .6s var(--ease) forwards}
.rx-card{
  background:var(--card);border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--card-r) var(--card-r);
  padding:38px 42px 34px;opacity:0;
}
.rx.ready .rx-card{animation:cardIn var(--reveal) var(--ease) .42s forwards}

.rx-head{margin-bottom:30px}
.rx-who{font-family:var(--disp);font-size:var(--t-h1);font-weight:300;letter-spacing:-.03em;line-height:1.1}
.rx-kind{font-size:var(--t-label);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--mute);font-weight:500;margin-top:8px}
.rx-when{font-size:var(--t-micro);color:var(--mute);margin-top:3px}

/* Ruled 9/18: a row is the audience, who they are, the line picked for them,
   the tactics reaching them and what that audience runs at. A creative vision
   of the plan with the tally beside it, not a list of line items. */
.rx-rows{display:flex;flex-direction:column}
.rx-row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:26px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding:18px 0;
}
.rx-id{flex:1;min-width:230px}
.rx-n{font-family:var(--disp);font-size:var(--t-h3);font-weight:400;line-height:1.25;display:block}
.rx-who-l{font-size:var(--t-micro);color:var(--mute);line-height:1.5;margin:3px 0 0;max-width:48ch}
.rx-line{
  font-size:var(--t-body);color:var(--ink);line-height:1.45;margin:9px 0 0;
  border-left:2px solid var(--conifer);padding-left:11px;max-width:48ch;
}
.rx-line.none{color:var(--mute);border-left-color:var(--line);font-size:var(--t-body)}
.rx-ts{display:flex;flex-direction:column;gap:6px;align-items:flex-end;text-align:right}
.rx-t{font-size:var(--t-body);color:var(--ink2);opacity:0;animation:rowIn .5s var(--ease) forwards;animation-delay:calc(var(--k) * 140ms)}
.rx-t i{display:block;font-style:normal;font-size:var(--t-micro);color:var(--mute);margin-top:2px}
.rx-t.none{color:var(--mute);max-width:28ch}
.rx-sub{font-family:var(--disp);font-size:var(--t-lg);font-weight:400;letter-spacing:-.01em;margin-top:4px}
.rx-none{font-size:var(--t-body);color:var(--mute);margin:0 0 18px}

.rx-how{
  border-top:1px solid var(--line);padding-top:20px;margin:0;
  font-size:var(--t-body);color:var(--ink2);line-height:1.6;max-width:56ch;
}
.rx-total{
  display:flex;align-items:baseline;gap:12px;
  border-top:1px solid var(--line);margin-top:24px;padding-top:24px;
}
.rx-v{font-family:var(--disp);font-size:var(--t-h1);font-weight:300;letter-spacing:-.03em;line-height:1}
.rx-k{font-size:var(--t-body);color:var(--mute)}

.rx-exits{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.rx-exits .btn{min-width:186px}
.rx-held{
  margin:22px 0 0;padding-top:18px;border-top:2px solid var(--line);
  font-size:var(--t-body);color:var(--ink2);line-height:1.55;
}
.rx-held.on{border-top-color:var(--conifer)}

/* The way back in. Shown only when a save actually landed, so this block
   never appears next to a promise we did not keep. The address is a real
   selectable input rather than styled text, because an agent on a call
   will try to highlight it. */
.rx-link{margin:14px 0 0}
.rx-link-k{
  display:block;font-size:var(--t-label);letter-spacing:var(--track-caps);text-transform:uppercase;
  color:var(--mute);font-weight:500;margin-bottom:7px;
}
.rx-link-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rx-link-v{
  flex:1;min-width:230px;font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:12.5px;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:8px;padding:9px 11px;
  text-overflow:ellipsis;
}
.rx-link-v:focus{outline:2px solid var(--violet);outline-offset:1px}
.btn.rx-link-copy{min-width:0;padding:9px 15px;font-size:var(--t-micro)}

/* The payment second-state. Dark unless /api/checkout says there is a real
   key behind it. There are no card fields here by design: the button hands
   the agent to Stripe's own page. */
.rx-mount{margin-top:24px}
.rx-pay{border-top:1px solid var(--line);padding-top:22px}
.rx-pay-say{margin:0 0 16px;font-size:var(--t-body);color:var(--ink2);line-height:1.6}
.rx-pay-fine{margin:12px 0 0;font-size:var(--t-micro);color:var(--mute);line-height:1.5}
.rx-pay-err{margin:12px 0 0;font-size:var(--t-micro);color:var(--ink2);line-height:1.5}

/* Everything else we wrote down. The only table in the tool, and it is for
   the marketing advisor and the partner, never for the agent on the call. */
.record{max-width:760px;margin:52px auto 0}
.record > summary{
  cursor:pointer;font-size:var(--t-micro);font-weight:500;color:var(--mute);
  list-style:none;padding:12px 0;border-top:1px solid var(--line);
}
.record > summary::-webkit-details-marker{display:none}
.record > summary:hover{color:var(--ink)}
.record-in{padding-top:18px}
.record-note{font-size:var(--t-micro);color:var(--mute);margin:0 0 16px}

.dossier{display:flex;flex-direction:column;gap:18px;margin-bottom:18px}
.dz{background:var(--card);border:1px solid var(--line);border-radius:var(--card-r);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:var(--t-label);font-weight:500;letter-spacing:var(--track-caps);text-transform:uppercase;
  background:var(--bg);color:var(--mute);padding:3px 8px;border-radius:5px;margin-right:8px;
  border:1px solid var(--line);
}
.rv-flag.ok{background:var(--conifer);color:var(--ink);border-color:var(--conifer)}
.rv-edit{background:none;border:0;color:var(--violet);font-size:var(--t-micro);font-weight:500;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:var(--t-micro);color:var(--mute);font-weight:500}
.rv-v{font-size:var(--t-body);color:var(--ink);white-space:pre-wrap}
.dz-grid{display:grid;grid-template-columns: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:var(--t-body);margin-bottom:7px}
.dz-card .g-head{font-size:var(--t-lg)}
.dz-card .g-line,.dz-card .g-copy{font-size:var(--t-micro);margin-bottom:8px}
.dz-card .beh{grid-template-columns:96px minmax(0,1fr);margin-top:10px}
.dz-tac{font-size:var(--t-micro);color:var(--ink2);margin:0 0 9px;line-height:1.45}
.dz-tac b{color:var(--ink);font-weight:500}
.dz-tac.warn{color:var(--mute)}
.dz.featured{border-color:var(--ink)}
.handoff{border-color:var(--ink)}

.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:var(--t-label);letter-spacing:var(--track-caps);text-transform:uppercase;font-weight:500;
  color:var(--ink);background:none;box-shadow:inset 0 0 0 1px var(--line2);border-radius:999px;padding:3px 9px;
}
.cut-n{font-size:var(--t-body);color:var(--ink2);line-height:1.45}
.cut-y{font-size:var(--t-micro);color:var(--mute);white-space:nowrap}

.send h3{margin-bottom:8px}
.send p{font-size:var(--t-body);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:var(--t-micro);color:var(--violet);font-weight:500;opacity:0;transition:opacity .18s}
.flash.on{opacity:1}

footer{
  font-size:var(--t-micro);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;
}

/* Ruled 9/18: the legal line lives at the foot of the plan page and on no
   other screen in this tool. */
.legal{
  max-width:760px;margin:34px auto 0;padding-top:16px;
  border-top:1px solid var(--line);
  font-size:var(--t-micro);color:var(--mute);
}

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

.btn{
  background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:999px;
  padding:12px 24px;font-size:var(--t-body);font-weight:500;cursor:pointer;
}
.btn:hover{transform:translateY(-1px)}
.btn{transition:transform .3s var(--ease)}
.btn.ghost{background:none;color:var(--ink);border-color:var(--line2)}
.btn.ghost:hover{border-color:var(--line2)}
.btn.wide{width:100%}
/* A gated Continue looks refused and stays reachable. Ruled 9/18: the
   disabled attribute took the button out of the tab order and swallowed the
   click, so the one thing that was supposed to produce the reason never
   reached the page. aria-disabled refuses and still answers. */
.btn:disabled,.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed;transform:none}
.btn[aria-disabled="true"]:hover{transform:none}

.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:11px 44px;
  display:flex;align-items:center;gap:16px;z-index:20;
}
.navwhy{flex:1;font-size:var(--t-micro);color:var(--ink2);font-weight:500}

/* The thin step bar above every numbered stop. */
/* 9/29 design pass: one progress indicator per screen, the rail. */
.stepbar{display:none}
.stepbar i{flex:1;height:3px;border-radius:2px;background:var(--line)}
.stepbar i.done{background:var(--ink)}
.stepbar i.now{background:var(--violet)}

/* ---------------- the title slide ---------------- */

.title-head{grid-template-columns:minmax(0,1fr);min-height:46vh;align-content:center}
#screen-agenda.on{display:flex;flex-direction:column;min-height:72vh}
#screen-agenda .title-head{flex:1 1 auto;width:100%;display:grid;align-content:center}
/* 9/29 design pass: the locked sentence is one balanced block at display
   size. The forced break after "all year long," came off (it stranded
   "year long," on a line of its own), and the measure is about 28ch so it
   sets in three balanced lines at 1280, 1440 and 1920. "year long," and
   "5 minutes" are bound with non-breaking spaces in the markup, so a number
   never parts from its unit. */
.thesis{
  font-family:var(--disp);font-weight:250;font-variation-settings:"opsz" 96;
  font-size:var(--t-display);line-height:1.02;letter-spacing:-.03em;
  max-width:28ch;margin:0;text-wrap:balance;
}
/* The slide gets the room the 28ch measure needs at 1920. */
#screen-agenda{max-width:1400px}

/* 9/29 design pass: the BRAND STRATEGY label is the D6 outlined pill. Conifer
   is for status chips only, and this is a label. */
#screen-agenda .kick-step,
body[data-zone="dark"] #screen-agenda .kick-step{
  display:inline-flex;background:none;color:var(--nfg);box-shadow:inset 0 0 0 1px var(--nline);
}

/* ---------------- beats ---------------- */

/* Anything carrying data-beat waits for Sam. Nothing here is on a timer. */
[data-beat]{opacity:0;transform:translate3d(0,18px,0);pointer-events:none}
[data-beat].beat-in{
  opacity:1;transform:none;pointer-events:auto;
  transition:opacity var(--reveal) var(--ease),transform .6s var(--ease);
}

/* ---------------- keyframes, transform and opacity only ---------------- */

@keyframes bob{0%,100%{opacity:.22;transform:translateY(0)}45%{opacity:1;transform:translateY(-5px)}}
@keyframes breathe{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes shimmer{
  0%{transform:translateX(-120%);opacity:0}
  35%{opacity:1}
  100%{transform:translateX(220%);opacity:0}
}
@keyframes openUp{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes penDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cardIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes rowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* A person who asked the machine to stop moving has not asked it to hide half
   the sentence, so every beat is simply present and every animation is off. */
@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-beat]{opacity:1;transform:none;pointer-events:auto}
  .rx-card,.rx-t{opacity:1}
  .rx-pen{transform:scaleX(1)}
  .btn:hover{transform:none}
  /* Static skeletons. The shimmer is the one thing that would be left frozen
     mid-sweep by the blanket duration override, so it is taken off outright. */
  .scaffold i{animation:none;opacity:.7}
  .scaffold i:after{display:none}
}

/* ---------------- focus ---------------- */

:focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:6px}
body[data-zone="dark"] :focus-visible{outline-color:var(--nfg)}

/* ---------------- the dark zone ---------------- */

body[data-zone="dark"] .btn{background:var(--nfg);color:var(--night);border-color:var(--nfg)}
body[data-zone="dark"] .btn.ghost{background:none;color:var(--nfg);border-color:var(--nline)}
body[data-zone="dark"] .rail{border-right-color:var(--nline)}
body[data-zone="dark"] .steps button:hover{background:rgba(244,242,238,.06)}
body[data-zone="dark"] .steps button[aria-current="true"]{background:none;box-shadow:inset 0 0 0 1px var(--nline)}
body[data-zone="dark"] .dot{background:none;border-color:var(--nline)}
body[data-zone="dark"] .dot.on{background:none;border-color:var(--nmute);color:var(--nfg)}
body[data-zone="dark"] .st-here{color:var(--nfg)}
body[data-zone="dark"] .topbar{background:rgba(20,18,15,.96)}
body[data-zone="dark"] .track{background:var(--nline)}
body[data-zone="dark"] .track i{background:var(--nfg)}
body[data-zone="dark"] .nav{background:rgba(20,18,15,.94)}
body[data-zone="dark"] .kick-q{box-shadow:inset 0 0 0 1px var(--nline)}
body[data-zone="dark"] .stamp.on:before{box-shadow:none}

/* ---------------- responsive ---------------- */

@media (max-width:1180px){
  .clay{grid-template-columns:1fr}
  .mockzone{position:static;max-width:420px}
  .dz-grid{grid-template-columns: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:var(--t-micro);font-weight:500;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}
  .tb-stamp{font-size:var(--t-micro);color:var(--mute);flex:none}

  .stage{padding:22px 18px 110px}
  .screen,.screen.wide{max-width:none}
  .cover{grid-template-columns:1fr;gap:30px;min-height:0}
  .cover-cta .btn{width:100%}
  .fields,.picks,.grid4,.canvas,.dz-grid,.fork,.behtiles{grid-template-columns:1fr}
  .prepbar-top{flex-wrap:wrap;gap:6px 12px}
  .rv-rows{grid-template-columns:1fr;gap:2px 0}
  .rv-k{margin-top:8px}
  .card{padding:20px 18px}
  .band{padding:20px 18px}
  .band-head{flex-direction:column;gap:10px}
  .band-sum{text-align:left}
  .tacs{grid-template-columns:1fr}
  .runtotal{
    border-radius:16px;bottom:72px;flex-wrap:wrap;gap:8px 16px;padding:14px 18px;
  }
  .rt-s{margin-left:0;flex-basis:100%}
  .nav{left:0;padding:11px 18px}
  .navwhy{display:block;order:-1;flex-basis:100%;margin-bottom:4px}
  .navwhy:empty{display:none}
  .nav{flex-wrap:wrap}
  .canvas-main{min-height:320px}
  .scaffold{grid-template-columns:1fr;min-height:260px}
  .scaffold.lines{grid-template-columns:1fr}
  .shead{grid-template-columns:1fr;gap:10px}
  .shead .guide{justify-self:start;max-width:none;padding-bottom:0}
  .stalebar{flex-direction:column;align-items:flex-start}
  .datepicks{grid-template-columns:1fr}
  .phase{grid-template-columns:1fr}
  .lanerow{grid-template-columns:1fr}
  .lr-photo{justify-content:flex-start}
  .beh{grid-template-columns:1fr;gap:2px 0}
  .beh-k{margin-top:8px}
  .rx{margin-top:2vh}
  .rx-card{padding:26px 20px}
  .rx-who{font-size:var(--t-h2)}
  .rx-v{font-size:var(--t-h1)}
  .rx-row{flex-direction:column;gap:8px}
  .rx-ts{align-items:flex-start;text-align:left}
  .calwrap .calendly-inline-widget{height:min(760px,calc(100vh - 240px)) !important}
  .rx-exits{flex-direction:column}
  .rx-exits .btn{width:100%}
  .tray-r{border-radius:14px;align-items:flex-start;flex-direction:column;padding:14px 16px}
  .tray-r .gbtn{margin-left:0}
  .restart{margin:0}
  .cut-r{grid-template-columns:auto minmax(0,1fr)}
  .cut-y{grid-column:1 / -1;white-space:normal}
}

@media (max-width:640px){
  .gbtn,.pick,.chipbtn,.ideabtn,.cwalk{min-height:44px}
  .rv-edit{min-height:44px;display:inline-flex;align-items:center}
}

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

@media print{
  .no-print,.rail,.nav,.topbar,.send-acts,.danger,.rx-exits,.stepbar,
  .stalebar,.failline,.exportlock{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}
  [data-beat]{opacity:1 !important;transform:none !important}
  .rx-card,.rx-t{opacity:1 !important;animation:none !important}
  .rx-pen{transform:scaleX(1) !important;animation:none !important}
  .record{max-width:none}
  .record > summary{display:none}
  .record-in{display:block !important}
  .card{break-inside:avoid;border-color:var(--line2)}
  .dz{break-inside:auto;page-break-inside:auto;border-color:var(--line2)}
  .gcard,.dz-card{break-inside:avoid;page-break-inside:avoid}
  .dz-top,.dz h3{break-after:avoid;page-break-after:avoid}
  .dz{padding:18px 20px}
  .dz.featured{border-color:var(--line2)}
}

/* ---------------- the outlined pill (D6) ----------------

   The one small pill: a hairline edge, a violet dot, Inter at the label
   size. Used for tags, the screen name above a heading, and the Tactics
   button on the Reach step. */
.tag{
  display:inline-flex;align-items:center;gap:9px;min-height:28px;
  padding:5px 12px 5px 11px;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--line2);background:none;border:0;
  font-family:var(--body);font-size:var(--t-label);font-weight:500;line-height:1.2;color:var(--ink);white-space:nowrap;
}
.tag:before{
  content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--violet);box-shadow:0 0 0 3px rgba(79,6,235,.12);
}
.tag-btn{cursor:pointer;transition:box-shadow .3s var(--ease)}
.tag-btn:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.kick-tactics{margin-left:auto}

/* ---------------- the tactic glossary (call mode only) ---------------- */

dialog.gloss{
  position:fixed;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;
  margin:0;padding:0;border:0;background:var(--night);color:var(--nfg);
  font-family:var(--body);overflow:hidden;
}
dialog.gloss[open]{display:flex;flex-direction:column}
dialog.gloss::backdrop{background:var(--night)}
.gl-top{
  flex:none;display:flex;align-items:center;gap:22px;height:64px;
  padding:0 56px;border-bottom:1px solid var(--nline);
}
.gl-logo{width:78px;height:auto}
.gl-title{
  font-size:var(--t-label);font-weight:500;letter-spacing:var(--track-caps);text-transform:uppercase;
  color:var(--nmute);padding-left:22px;border-left:1px solid var(--nline);
}
.gl-close{
  margin-left:auto;background:none;border:0;cursor:pointer;color:var(--nfg);
  font-family:var(--body);font-size:var(--t-label);font-weight:500;letter-spacing:.04em;
  padding:6px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--nline);
}
.gl-close:hover{box-shadow:inset 0 0 0 1px var(--nfg)}
.gl-body-wrap{flex:1;min-height:0;display:flex}
.gl-page{
  flex:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  grid-template-rows:1fr auto;gap:0 72px;padding:6vh 56px 0;min-height:0;
}
.gl-copy{align-self:center;max-width:720px}
.gl-eyebrow{
  display:flex;align-items:center;gap:12px;margin:0;
  font-size:var(--t-label);font-weight:500;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--nmute);
}
.gl-dot{width:6px;height:6px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 3px rgba(79,6,235,.28)}
.gl-name{
  font-family:var(--disp);font-weight:250;font-variation-settings:"opsz" 96;
  font-size:clamp(56px,6.2vw,104px);line-height:.95;letter-spacing:-.035em;
  color:#fff;margin:18px 0 0;text-wrap:balance;
}
.gl-say{
  font-family:var(--disp);font-weight:300;font-variation-settings:"opsz" 96;
  font-size:var(--t-h2);line-height:1.25;letter-spacing:-.01em;color:var(--nfg);
  margin:22px 0 0;text-wrap:balance;
}
.gl-body{font-size:var(--t-lg);line-height:1.65;color:rgba(244,242,238,.82);margin:18px 0 0;max-width:60ch;text-wrap:pretty}
.gl-notes{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:34px;padding-top:24px;border-top:1px solid var(--nline)}
.gl-note{min-width:0}
.gl-k{
  display:block;margin:0 0 8px;font-size:var(--t-label);font-weight:500;
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--nmute);
}
.gl-v{margin:0;font-size:var(--t-body);line-height:1.6;color:var(--nfg);text-wrap:pretty}
.gl-aside{margin:10px 0 0;font-size:var(--t-micro);line-height:1.55;color:var(--nmute);text-wrap:pretty}
.gl-q{font-family:var(--disp);font-weight:300;font-size:var(--t-h3);line-height:1.4;letter-spacing:-.005em}
.gl-art{align-self:center;justify-self:center;width:100%;max-width:440px;color:var(--nfg)}
.gl-art svg{width:100%;height:auto;display:block;overflow:visible}
.gl-art .ga-l{stroke:rgba(244,242,238,.58);stroke-width:1.2}
.gl-art .ga-f{stroke:rgba(244,242,238,.1);stroke-width:1}
.gl-art .ga-d{fill:rgba(244,242,238,.5)}
.gl-art .ga-v{fill:var(--violet)}
.gl-art .ga-vs{stroke:var(--violet);stroke-width:3}
.gl-art .ga-vl{stroke:var(--violet);stroke-width:1.6}
.gl-art .ga-t{fill:var(--nmute);font-family:var(--body);font-size:12px}
.gl-foot{
  grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px 0 26px;margin-top:4vh;border-top:1px solid var(--nline);
}
.gl-step{
  background:none;border:0;cursor:pointer;color:var(--nfg);text-align:left;
  display:flex;flex-direction:column;gap:2px;font-family:var(--body);font-size:var(--t-body);
  padding:4px 0;min-width:200px;
}
.gl-step .gl-k{margin:0}
.gl-next{text-align:right;align-items:flex-end}
.gl-step:hover span:last-child{text-decoration:underline;text-underline-offset:4px}
.gl-dots{display:flex;gap:4px}
.gl-pip{
  width:22px;height:22px;border:0;background:none;cursor:pointer;border-radius:50%;
  display:grid;place-items:center;padding:0;
}
.gl-pip:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--nline);transition:background .3s var(--ease)}
.gl-pip.on:before{background:var(--violet);box-shadow:0 0 0 3px rgba(79,6,235,.28)}
.gloss :focus-visible{outline:1.5px solid var(--nfg);outline-offset:4px}
/* The reveal: the copy rises in, the drawing follows. */
.gl-page.gl-enter .gl-copy,.gl-page.gl-enter .gl-art{opacity:0;transform:translate3d(0,18px,0)}
.gl-page.gl-enter.gl-in .gl-copy,.gl-page.gl-enter.gl-in .gl-art{
  opacity:1;transform:none;
  transition:opacity var(--reveal) var(--ease),transform .6s var(--ease);
}
.gl-page.gl-enter.gl-in .gl-art{transition-delay:.08s}
@media (max-width:980px){
  .gl-top{padding:0 18px}
  .gl-page{grid-template-columns:1fr;padding:28px 18px 0;overflow:auto}
  .gl-art{display:none}
  .gl-notes{grid-template-columns:1fr}
  .gl-step{min-width:0}
}
@media (prefers-reduced-motion: reduce){
  .gl-page.gl-enter .gl-copy,.gl-page.gl-enter .gl-art{opacity:1;transform:none}
}

/* 9/29 design pass: prices and counts sit on tabular figures. */
.band-sum,.tac-p,.rt-v,.rt-s,.bill-row,.total-sum .v,.rx-sub,.rx-v,.rx-t,.lk-w{font-variant-numeric:tabular-nums lining-nums}
.ck{width:10px;height:10px;display:inline-block;vertical-align:-1px}
.gbtn .ck,.g-badge .ck{margin-right:2px}

/* ---------------- one-screen call compositions (9/29 design pass) ----------------

   Sam screen-shares these at 1440 by 900. Spacing and layout tighten so each
   call step reads as one screen; nothing is cut, and every answer still reads
   in full. */
.stage{padding-top:28px}
.shead{margin-bottom:14px}
.kicker{margin-bottom:6px}

/* Audiences: two by two, tighter cards, and the short answers run inline. */
.grid4{gap:12px}
.gcard{padding:16px 18px}
.g-top{margin-bottom:4px}
.g-index{margin-bottom:1px}
.g-line{margin:0 0 8px;line-height:1.45}
.g-sub{margin:0 0 5px}
.behtiles{gap:7px;margin:0 0 6px}
.behtile{padding:8px 10px;border-radius:10px}
.behtile .beh-k{margin-bottom:2px}
.behtile + .behtile .beh-vs{display:block}
.behtile + .behtile .beh-v{display:inline}
.behtile + .behtile .beh-v:not(:last-child):after{content:" \00B7  ";color:var(--mute)}
.beh-v{line-height:1.4}
.g-acts{padding-top:8px;margin-top:6px}
.g-acts .gbtn{min-height:34px;padding:4px 13px}
.canvas-foot{margin-top:10px}

/* Reach: the six tactics sit on one row, so none is stranded on a second. */
.floornote{margin:0 0 4px}
.floornote + .bands{margin-top:12px}
.bands{gap:10px}
.band{padding:14px 20px}
.band-head{margin-bottom:10px}
.band-who{margin:2px 0 0;max-width:none}
.tacs{grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
.tac{padding:8px 10px;min-height:40px;border-radius:10px}
.tac.on:after{top:9px;right:9px;width:6px;height:6px}
.band-notes{margin-top:8px}
.runtotal{margin-top:12px}
@media (max-width:1180px){ .tacs{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* Destinations: two lanes side by side. */
.dlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:none;align-items:start}
.dcard{padding:16px 20px}
.dcard-top{margin-bottom:10px}
.dcard .qlab{margin-top:10px}
@media (max-width:1180px){ .dlist{grid-template-columns:1fr} }

/* Creative: the tagline asks in one line, and the options sit closer. */
#screen-s3 .card{padding:14px 20px;margin-bottom:10px}
#screen-s3 .card .subhead{margin-bottom:6px}
.clay{margin-top:10px;gap:22px}
.cgroup{padding:16px 20px}
.cg-head{margin-bottom:10px}
.coptions{gap:8px}
.copt{padding:12px 16px}
.copt .g-copy{margin-bottom:8px}
.copt-acts{padding-top:8px}
.copt-acts .gbtn{min-height:32px;padding:3px 12px}
.copt.own{min-height:40px}
.lanerows{margin-top:10px}
.lanerow{padding:8px 0}
.cnav{margin-top:10px;padding-top:10px}
.cwalk{min-height:34px;padding:5px 14px}

/* The plan card: the whole card, total and exits included, above the fold. */
.rx{margin:2vh auto 0;min-height:0}
.rx-card{padding:28px 36px 26px}
.rx-head{margin-bottom:16px}
.rx-row{padding:12px 0;gap:20px}
.rx-line{margin-top:6px}
.rx-how{padding-top:14px}
.rx-total{margin-top:14px;padding-top:14px}
.rx-v{font-size:var(--t-h2)}
.rx-exits{margin-top:18px}
.record{margin-top:32px}
/* The number sits beside the audience name, not above it. */
.g-top > div{display:flex;align-items:baseline;gap:10px}
.g-index{display:inline;margin:0;font-variant-numeric:tabular-nums}
.gcard{padding:14px 16px}
.behtile{padding:7px 10px}
.g-acts .gbtn{min-height:32px}

/* Creative: the three options side by side, and the tagline on one row. */
#screen-s3 .card .fields{grid-template-columns:minmax(0,1fr)}
#screen-s3 .card .f{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;align-items:center}
#screen-s3 .card .f > label{grid-column:1 / -1}
#screen-s3 .card .ideas{margin-top:0}
#screen-s3 .card .ideachips,#screen-s3 .card .ideanote{grid-column:1 / -1}
.coptions{grid-template-columns:repeat(3,minmax(0,1fr))}
.copt.own{grid-column:1 / -1}
.copt .g-head{font-size:var(--t-lg);line-height:1.3}
.copt-acts{gap:5px}
.copt-use{flex-basis:100%;margin-bottom:2px}
/* Destinations pack into three columns, top to bottom, in lane order. */
.dlist{display:block;column-count:3;column-gap:12px}
.dlist > .dcard{break-inside:avoid;margin-bottom:12px;display:block}
.dcard{padding:14px 16px}
.dcard-top{flex-wrap:nowrap;align-items:flex-start}
.dcard-who{font-size:var(--t-lg);line-height:1.3}
.dcard input[type=text],.dcard textarea{padding:8px 10px}
.dcard textarea{min-height:0}
.geostart{gap:5px}
.geostart .gbtn{min-height:30px;padding:3px 11px}
@media (max-width:1180px){ .dlist{column-count:1} }

/* A touch less air above every heading, and a tray that stays short. */
.stage{padding-top:22px}
.shead{row-gap:8px}
.tray{margin-top:10px;padding-top:10px;gap:6px}
.tray-r{padding:5px 8px 5px 16px}
.tray-r .gbtn{min-height:30px}
/* Room for the selected dot, so it never sits on a word. */
.pick,.copt,.forkcard{padding-right:30px}
.tac{padding-right:20px}
/* The ad keeps its size; the options get the width. */
.clay{grid-template-columns:minmax(0,1fr) 300px}
.lanerow{grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) auto}
/* A price and its unit never part. */
.tac-p,.rx-sub,.band-sum,.bill-row span:last-child,.rt-v,.total-sum .v{white-space:nowrap}
.floornote,.band-note,.pz-say,.hint,.guide,.qnote{text-wrap:pretty}
/* The option count, the audience and Write new options share one row. */
.cg-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;row-gap:2px;align-items:baseline}
.cg-head .cg-regen{grid-column:3;grid-row:1;align-self:center;min-height:32px;padding:3px 13px}
.cg-head .cg-tac{grid-column:1 / -1}
.cg-head .carderr{grid-column:1 / -1}
.cgroup{padding:14px 18px}
.lanerow{padding:6px 0}
.cnav{margin-top:8px;padding-top:8px}
.cnav .gbtn{min-height:32px}
#screen-s3 .card{margin-bottom:6px}
.clay{margin-top:6px}

/* ---------------- the cover, recomposed (9/29 cover pass) ----------------

   The welcome block used to hug the rail with the rest of the canvas empty,
   which read as a narrow form dropped into a big shell. It now sits as one
   composed block in the middle of the canvas, a touch above optical centre.
   The headline is the first thing with any weight, the release line reads as
   a quiet note above it, and the button is sized to its word. */
#screen-cover{max-width:none}
.cover{
  display:grid;grid-template-columns:minmax(0,1fr);place-items:center;
  min-height:calc(100vh - 22px - 96px);padding-bottom:7vh;gap:0;
}
.cover-l{width:min(100%,680px)}
.cover-r{display:none}
.cover-new{margin:0 0 28px}
.cover .new-line{font-size:var(--t-body);font-weight:400;color:var(--mute);letter-spacing:.005em}
.cover h1{
  font-size:var(--t-display);font-weight:400;letter-spacing:-.025em;line-height:1.05;
  max-width:12ch;margin:0 0 24px;
}
.cover .lede{font-size:clamp(17px,1.3vw,20px);line-height:1.5;color:var(--ink2);margin:0 0 40px}
.cover-cta .btn{min-width:188px;height:52px;padding:0 34px;font-size:15px}
/* The rail on the dark cover: step names read as available, the numbers and
   the save line stay quiet, and the current step keeps its own marker. */
body[data-zone="dark"] .steps button{color:var(--ink2)}
body[data-zone="dark"] .dot{border-color:var(--line2);color:var(--ink2)}
@media (max-width:980px){
  .cover{min-height:0;padding:12vh 0 0;place-items:start}
  .cover-l{width:100%}
  .cover-cta .btn{width:100%}
}

/* ---------------- the prep screens, one heading block (9/29 cover pass) ----------------

   The rail owns progress and the headline owns the task, so the outlined
   screen-name pill comes off the prep screens (on a phone the top bar already
   says where she is). Every prep screen gets the same heading block, the forms
   narrow to what the answers need, and the footer's actions sit on the same
   column as the work. */
.screen[data-flow="prep"]{--col:1040px;max-width:var(--col)}
#screen-p-name{--col:640px}
#screen-p-obj{--col:860px}
#screen-p-photo,#screen-p-crm{--col:760px}
#screen-book{--col:960px}
.screen[data-flow="prep"] .kicker{display:none}
.screen[data-flow="prep"] .shead,
#screen-book .shead.tight{
  display:block;max-width:680px;padding-top:34px;margin-bottom:32px;
}
.screen[data-flow="prep"] .shead h2,
#screen-book h2{
  font-size:40px;line-height:44px;font-weight:400;letter-spacing:-.025em;margin:0;
}
.screen[data-flow="prep"] .shead .guide{max-width:56ch;margin-top:12px;padding:0;justify-self:auto}
.screen[data-flow="prep"] .plain{max-width:none}

/* The first form: narrower, taller fields, and a steady rhythm. */
#screen-p-name .fields{gap:30px}
#screen-p-name label{font-size:15px;margin-bottom:8px}
#screen-p-name .hint{font-size:14px;line-height:20px;margin:-2px 0 8px}
#screen-p-name .hint.after{margin:8px 0 0}
.screen[data-flow="prep"] input[type=text],
.screen[data-flow="prep"] input[type=email]{height:54px;border-radius:10px;padding:0 16px;font-size:15px}

/* The calendar gets one quiet edge. Once it opens, the card around it steps
   back so Calendly's own panel is the only box on the screen. */
#screen-book .gatecard.open{background:none;border:0;padding:0;box-shadow:none}
#screen-book .calwrap .calendly-inline-widget{border:1px solid var(--line);border-radius:14px;background:var(--card)}
#screen-book .calfallback{margin-top:14px}

/* The footer's actions on the work's column: Back at its left edge, Continue
   at its right, rather than at the far edge of the viewport. */
body[data-view^="screen-p-"] .nav,
body[data-view="screen-book"] .nav{
  padding-right:max(44px, calc(100vw - var(--rail) - 44px - var(--navcol, 1040px)));
}
body[data-view="screen-p-name"]{--navcol:640px}
body[data-view="screen-p-obj"]{--navcol:860px}
body[data-view="screen-p-photo"],body[data-view="screen-p-crm"]{--navcol:760px}
body[data-view="screen-book"]{--navcol:960px}

@media (max-width:980px){
  .screen[data-flow="prep"]{max-width:none}
  .screen[data-flow="prep"] .shead,#screen-book .shead.tight{padding-top:8px;margin-bottom:24px}
  .screen[data-flow="prep"] .shead h2,#screen-book h2{font-size:30px;line-height:34px}
  body[data-view^="screen-p-"] .nav,body[data-view="screen-book"] .nav{padding-right:18px}
}

/* ---------------- call screens, restraint pass (9/29 cover pass) ----------------

   The title slide: the pill came off (the slide already left the rail and the
   sentence is the whole point), and the locked sentence sets at a calmer size
   and a regular weight, one statement at one level. Ruled 9/17: the five
   minutes half is never the quiet half, so it is not demoted to a subline. */
#screen-agenda .kicker{display:none}
#screen-agenda .thesis{
  font-weight:400;font-size:clamp(46px,4.3vw,64px);line-height:1.08;letter-spacing:-.025em;
  max-width:24ch;
}


/* ---------------- destinations, rethought (9/29) ----------------

   The same bands as Reach, one per audience, and one row per tactic inside:
   the tactic, where its ads land, and the one thing that tactic needs. */
.dlist{display:flex;flex-direction:column;align-items:stretch;gap:12px;column-count:auto;max-width:none}
.dband{padding:18px 24px 6px}
.dband .band-head{margin-bottom:6px}
.drow{
  display:grid;grid-template-columns:190px minmax(0,1fr) minmax(0,1.15fr);gap:6px 32px;
  padding:16px 0 18px;border-top:1px solid var(--line);align-items:start;
}
.drow-t{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding-top:2px}
.drow-name{font-size:var(--t-lg);font-weight:500;line-height:1.3}
.drow .dest-off{font-size:var(--t-micro)}
.drow-f:empty{display:none}
.drow input[type=text],.drow textarea{font-size:var(--t-body);background:var(--bg)}
.drow-f .qlab{margin-top:14px}
.drow-f .qlab:first-child{margin-top:0}
.drow .geostart{margin-top:8px}
@media (max-width:1180px){
  .drow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .drow-t{grid-column:1 / -1;flex-direction:row;align-items:baseline;gap:14px}
}
@media (max-width:980px){
  .dband{padding:16px 18px 4px}
  .drow{grid-template-columns:1fr}
}
.drow .geostart-k{flex-basis:100%;margin:0 0 2px}
.drow .lanefile{row-gap:4px}
/* The attached list, and the location ideas kept below the box they feed. */
.drow .attach{
  display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:10px;
  background:var(--bg);border:1px solid var(--line);font-size:var(--t-body);color:var(--ink);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.drow .photopick.quiet{color:var(--mute);text-decoration:underline;text-underline-offset:3px;font-weight:400}
.drow .photopick.quiet:hover{color:var(--ink)}
.drow .geostart{gap:2px 16px;margin-top:10px}
.drow .geostart-k{flex-basis:100%;margin:0 0 2px;text-transform:none;letter-spacing:0;font-size:var(--t-micro);color:var(--mute);font-weight:400}
.drow .geostart .gbtn{
  border:0;background:none;box-shadow:none;padding:2px 0;min-height:0;border-radius:0;
  font-size:var(--t-micro);font-weight:500;color:var(--ink2);
}
.drow .geostart .gbtn:before{content:"+ ";color:var(--mute)}
.drow .geostart .gbtn:hover{color:var(--ink)}
.drow .lanefile.has{flex-wrap:nowrap;gap:14px}
.drow .lanefile.has .attach{flex:0 1 auto;min-width:0}
.drow .lanefile.has .photopick,.drow .lanefile.has .dest-off{flex:none}
.drow .lanefile.has .attach{display:block;line-height:38px}
.drow .lanefile.has{align-items:center}

/* ---------------- payment, rethought (9/29) ----------------
   The same bands as Reach and Destinations: the audience and its monthly
   figure on the band, each tactic at its price beneath, one total below. */
#billList{gap:12px}
.bill-band{padding:18px 24px 8px}
.bill-band .band-head{margin-bottom:6px}
.bill-band .bill-row.lane{padding:12px 0;border-top:1px solid var(--line);border-bottom:0;font-size:var(--t-lg);color:var(--ink)}
.bill-band .bill-row.lane span:last-child{font-weight:400;color:var(--ink2);font-variant-numeric:tabular-nums}
.paytotal{margin-top:12px}

/* ---------------- the brand plan, design pass (9/29) ----------------
   Same shape as Reach and Payment: the audience and its monthly figure head
   each row, then the line on their ads beside the tactics reaching them.
   The lime rule came off the line (Conifer is for small chips only). */
.rx-head{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline;margin-bottom:22px}
.rx-kind{grid-row:1;grid-column:1;margin-top:0}
.rx-when{grid-row:1;grid-column:2;margin-top:0;font-size:var(--t-label);letter-spacing:.04em}
.rx-when:before{content:"\00B7";margin-right:10px;color:var(--mute)}
.rx-who{grid-row:2;grid-column:1 / -1;margin-top:10px;font-weight:300;font-size:clamp(34px,3vw,46px);line-height:1.05;letter-spacing:-.03em}
.rx-row{display:block;padding:18px 0 20px}
.rx-top{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.rx-top .rx-sub{margin-top:0;flex:none;font-variant-numeric:tabular-nums}
.rx-who-l{font-size:var(--t-body);color:var(--ink2);max-width:none;margin:4px 0 0}
.rx-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;margin-top:14px}
.rx-lk{display:block;font-size:var(--t-label);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--mute);font-weight:500;margin-bottom:6px}
.rx-line{border-left:0;padding-left:0;margin:0 0 10px;font-family:var(--disp);font-size:var(--t-h3);font-weight:400;letter-spacing:-.01em;line-height:1.3;max-width:none}
.rx-line b{display:block;font-family:var(--body);font-size:var(--t-micro);font-weight:500;color:var(--mute);letter-spacing:0;margin-bottom:2px}
.rx-line-sub{display:block;font-family:var(--body);font-size:var(--t-body);color:var(--ink2);letter-spacing:0;margin-top:4px;line-height:1.45}
.rx-line.none{font-family:var(--body);font-size:var(--t-body)}
.rx-ts{align-items:flex-start;text-align:left;gap:10px}
.rx-t b{display:block;font-weight:500;color:var(--ink)}
.rx-t i{margin-top:1px}
.rx-how{max-width:none}
@media (max-width:980px){ .rx-body{grid-template-columns:1fr;gap:16px} }
.rx-head{margin-bottom:14px}
.rx-who{margin-top:6px}
.rx-row{padding:12px 0 14px}
.rx-who-l{margin-top:2px}
.rx-body{margin-top:8px;gap:24px}
.rx-lk{margin-bottom:3px}
.rx-line{font-size:var(--t-lg);line-height:1.35;margin-bottom:6px}
.rx-line-sub{font-size:var(--t-micro);margin-top:2px}
.rx-ts{gap:6px}
.rx-how{padding-top:12px}
.rx-total{margin-top:12px;padding-top:12px}
.rx-exits{margin-top:14px}
.rx{margin-top:0}
.rx-card{padding-top:22px}
.rx-who{font-size:clamp(30px,2.5vw,38px)}
.rx-ts .rx-lk{margin-bottom:0}