@import url('/brand/tokens.css');

/**
 * The application flow.
 *
 * This used to be a light theme on its own palette while the rest of the site
 * was dark — two design systems in one product, and the seam showed the moment
 * you pressed Start. It now maps onto the same brand tokens as the landing page
 * and the hub, so there is one set of colours and one place to change them.
 *
 * The CV preview stays light on purpose. It is a document, not chrome: it gets
 * printed, saved as a PDF and handed to an employer, and a dark CV would waste
 * a cartridge and look wrong on paper.
 */
:root{
  --ink:var(--d-ink); --ink-2:var(--d-ink-2); --ink-3:var(--d-ink-3);
  --line:var(--d-line); --line-2:var(--d-line-2);
  --bg:var(--d-bg); --panel:var(--d-surface); --panel-2:var(--d-surface-2);
  --brand:var(--d-violet);            /* accents and text on dark */
  --brand-fill:var(--d-violet-fill);  /* button fills — white on it is 5.53:1 */
  --brand-soft:var(--d-violet-dim);
  --brand-ink:var(--d-violet-hi);     /* text sitting on brand-soft */
  --brand-line:rgba(109,74,232,.38);
  --amber:var(--d-amber); --amber-soft:rgba(138,90,18,.09); --amber-line:rgba(138,90,18,.35);
  --red:var(--d-red); --red-soft:rgba(166,58,74,.07); --red-line:rgba(166,58,74,.35);
  --r:12px;
}
*{box-sizing:border-box}
html,body{overflow-x:clip;overscroll-behavior-x:none}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
/* The same gradient as the landing page, so pressing Start is not a hard cut. */
body::before{
  content:"";position:fixed;inset:0 0 auto 0;height:620px;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 420px at 50% -220px, rgba(109,74,232,.10), transparent 70%),
    radial-gradient(560px 280px at 10% 40px, rgba(11,122,87,.04), transparent 70%);
}
header,.wrap{position:relative;z-index:1}
.wrap{max-width:860px;margin:0 auto;padding:0 20px 90px}
header{background:rgba(252,251,255,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-2);position:sticky;top:0;z-index:20}
.hbar{max-width:860px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:12px}
.logo{display:flex;align-items:center;gap:9px;font-weight:650;letter-spacing:-.02em;font-size:17px;color:inherit;text-decoration:none;min-height:42px}
/* The brand mark. symbol.svg is the default per brand/README.md — the open-door
   variant is for 40px and up, where the light falling out still reads. */
.logo img{width:26px;height:26px;display:block;flex:none}
.hnav{margin-left:auto;display:flex;gap:16px;align-items:center;font-size:13.5px}
.hnav a{color:var(--ink-3);text-decoration:none}
@media (hover:hover) and (pointer:fine){.hnav a:hover{color:var(--ink)}}
.mode{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:99px;border:1px solid var(--amber-line);background:var(--amber-soft);color:var(--amber)}
.mode.live{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-ink)}
/* The five-segment rail: Work · Travel · Places · Your CV · Letters.
   #bar stays (hidden) as the aria/width carrier app.js already drives;
   data-seg on the wrapper is what the segments read. */
.progress{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;max-width:860px;margin:0 auto;padding:2px 20px 12px}
.progress #bar{display:none}
.rseg i{display:block;height:3px;border-radius:99px;background:var(--line-2);transition:background .3s}
.rseg b{display:block;font-size:11.5px;font-weight:600;color:var(--ink-3);margin-top:6px;letter-spacing:.02em}
.progress[data-seg="2"] .rseg:nth-of-type(1) i,
.progress[data-seg="3"] .rseg:nth-of-type(-n+2) i,
.progress[data-seg="4"] .rseg:nth-of-type(-n+3) i,
.progress[data-seg="5"] .rseg:nth-of-type(-n+4) i,
.progress[data-seg="6"] .rseg i{background:var(--brand-fill)}
.progress[data-seg="1"] .rseg:nth-of-type(1) i,
.progress[data-seg="2"] .rseg:nth-of-type(2) i,
.progress[data-seg="3"] .rseg:nth-of-type(3) i,
.progress[data-seg="4"] .rseg:nth-of-type(4) i,
.progress[data-seg="5"] .rseg:nth-of-type(5) i{background:linear-gradient(90deg,var(--brand-fill),#A98CFF)}
.progress[data-seg="1"] .rseg:nth-of-type(1) b,
.progress[data-seg="2"] .rseg:nth-of-type(2) b,
.progress[data-seg="3"] .rseg:nth-of-type(3) b,
.progress[data-seg="4"] .rseg:nth-of-type(4) b,
.progress[data-seg="5"] .rseg:nth-of-type(5) b{color:var(--ink);font-weight:640}
/* The fast path (an ad's one-question screen) never shows Work or Travel, so
   the rail is the three screens it does go through: Places · Your CV · Letters. */
.progress[data-path="fast"]{grid-template-columns:repeat(3,1fr)}
.progress[data-path="fast"] .rseg:nth-of-type(-n+2){display:none}
@media(max-width:520px){.rseg b{font-size:10px}}
.step{display:none;padding-top:38px;animation:in .35s ease both}
.step.on{display:block}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
h1{font-size:30px;line-height:1.2;letter-spacing:-.025em;margin:0 0 10px;font-weight:680}
h2{font-size:15px;margin:0 0 14px;font-weight:640}
.lede{color:var(--ink-2);font-size:16px;margin:0 0 26px;max-width:62ch}
.eyebrow{font-size:12px;font-weight:640;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin:0 0 10px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:26px 28px;margin-bottom:16px;box-shadow:var(--d-glow)}
.muted{color:var(--ink-3);font-size:13px}
button{font:inherit;cursor:pointer;border-radius:9px;border:1px solid transparent;transition:.14s}
.btn{background:var(--brand-fill);color:#fff;padding:12px 22px;font-weight:600;font-size:15px;border-radius:11px;box-shadow:0 12px 28px -12px rgba(109,74,232,.7);transition:.18s}
@media (hover:hover) and (pointer:fine){.btn:hover:not(:disabled){background:#5D3AD8;transform:translateY(-1px)}}
.btn:disabled{background:#E7E3F4;color:var(--d-ink-3);cursor:not-allowed}
.btn-2{background:#fff;color:var(--ink);border-color:var(--line);padding:12px 20px;font-weight:560;font-size:15px;border-radius:11px;box-shadow:0 6px 18px -14px rgba(64,42,158,.3)}
@media (hover:hover) and (pointer:fine){.btn-2:hover{border-color:var(--brand-line);background:#F1EDFB}}
.btn-sm{padding:7px 13px;font-size:13.5px}
.btn-ghost{background:none;border:none;color:var(--ink-3);text-decoration:underline;padding:8px 2px;font-size:14px}
@media (hover:hover) and (pointer:fine){.btn-ghost:hover{color:var(--ink)}}
.nav{display:flex;gap:10px;align-items:center;margin-top:26px}
.nav .sp{flex:1}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:#fff;border:1px solid var(--line);padding:9px 16px;border-radius:99px;font-size:14.5px;color:var(--ink-2);min-height:44px;display:inline-flex;align-items:center}
@media (hover:hover) and (pointer:fine){.chip:hover{border-color:var(--brand-line)}}
.chip[aria-pressed="true"]{background:var(--brand-soft);border-color:var(--brand);color:var(--ink);font-weight:600}
.chip[aria-pressed="true"]::before{content:"✓";margin-right:7px;color:var(--brand);font-weight:800}
label.f{display:block;font-size:13.5px;font-weight:600;margin:0 0 6px;color:var(--ink-2)}
input[type=text],input[type=email],input[type=tel],select,textarea{width:100%;font:inherit;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
textarea{resize:vertical;line-height:1.62;font-size:14.7px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}h1{font-size:25px}}
.drop{border:1.5px dashed var(--line);border-radius:var(--r);padding:32px 22px;text-align:center;background:var(--panel)}
.drop.has{border-style:solid;border-color:var(--brand-line);background:var(--brand-soft)}
.drop h3{margin:0 0 4px;font-size:16px}
.note{border-radius:10px;padding:13px 15px;font-size:14px;display:flex;gap:10px;align-items:flex-start;margin-bottom:16px}
.note b{font-weight:640}
.note-brand{background:var(--brand-soft);color:var(--brand-ink);border:1px solid var(--brand-line)}
.note-amber{background:var(--amber-soft);color:var(--amber);border:1px solid var(--amber-line)}
/* The thin-round notice: one line above the deck, the reasons folded away. */
.thin-note{margin-bottom:12px}
.thin-note .thin-why{margin-top:4px}
.thin-note .thin-why summary{cursor:pointer;font-weight:600;min-height:32px;display:inline-flex;align-items:center}
.thin-note .thin-why p{margin:4px 0 0}
.note-red{background:var(--red-soft);color:var(--red);border:1px solid var(--red-line)}
.ico{flex:none;font-size:15px;line-height:1.4}
.emp{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--line-2);align-items:flex-start}
.emp:last-child{border-bottom:none}
.emp input{margin-top:4px;width:17px;height:17px;accent-color:var(--brand);flex:none}
.emp-b{flex:1;min-width:0}
.emp-t{font-weight:620;font-size:15.5px}
.emp-m{font-size:13.2px;color:var(--ink-3);margin-top:2px}
.why{font-size:13.4px;color:var(--ink-2);margin-top:7px;padding-left:11px;border-left:2px solid var(--brand-line)}
.why div{margin-bottom:3px}
.tag{display:inline-block;font-size:11.5px;font-weight:620;padding:2.5px 8px;border-radius:99px;vertical-align:2px;margin-left:7px}
.t-email{background:var(--brand-soft);color:var(--brand-ink)}
.t-person{background:var(--amber-soft);color:var(--amber)}
.score{float:right;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rev-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
.counter{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.letter{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:14px;box-shadow:var(--d-glow)}
.letter-top{padding:13px 16px;border-bottom:1px solid var(--line-2);background:#FAF8FF;font-size:13.5px;color:var(--ink-2)}
.letter-top span{color:var(--ink);font-weight:560}
.letter textarea{border:none;border-radius:0;padding:18px 16px;min-height:260px;overflow:hidden}
/* height is set by fitLetter() in app.js so the whole letter is visible —
   see the note there about why nested scrolling is not acceptable here */
.letter textarea:focus{outline:none}
.tools{display:flex;gap:7px;flex-wrap:wrap;padding:11px 16px;border-top:1px solid var(--line-2);background:#FAF8FF}
.tool{font-size:13.5px;padding:10px 14px;min-height:40px;border-radius:99px;border:1px solid var(--line);background:#fff;color:var(--ink-2)}
@media (hover:hover) and (pointer:fine){.tool:hover:not(:disabled){border-color:var(--brand-line);color:var(--ink)}}
.tool:disabled{opacity:.5;cursor:progress}
.sendbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pulse{display:flex;align-items:center;gap:11px;font-size:15px;color:var(--ink-2);padding:8px 0;opacity:.25;transition:opacity .3s}
.pulse.on{opacity:1}
.pulse.done{opacity:.6}
.pulse.done .dot{background:var(--ink-3)}
.pulse .dot{width:8px;height:8px;border-radius:99px;background:var(--d-mint);flex:none}
.done-row{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:14.5px;align-items:baseline}
.done-row:last-child{border:none}
.state{font-size:12px;font-weight:640;flex:none;width:78px}
.s-sent{color:var(--d-mint)} .s-skip{color:var(--ink-3)} .s-post{color:var(--amber)}
footer{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3)}
footer a{color:var(--ink-3)}
.err{background:var(--red-soft);border:1px solid var(--red-line);color:var(--red);padding:12px 15px;border-radius:10px;font-size:14px;margin-bottom:16px;display:none}
.err.on{display:block}
.spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:7px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- CV builder ---------- */
.jobcard{border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:12px;background:var(--panel-2);min-width:0}
fieldset.jobcard{margin-inline:0}
.jobcard .jhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.jobcard .jhead b{font-size:14px}
.rm{background:none;border:none;color:var(--ink-3);font-size:13px;text-decoration:underline;cursor:pointer;padding:2px}
@media (hover:hover) and (pointer:fine){.rm:hover{color:var(--red)}}
.duties{margin-top:14px}
.duties .f{margin-bottom:8px}

/* ---------- CV preview + print ---------- */
/* CV preview base styles live in cvt.css, shared with the templates gallery. */

@media print{
  body{background:#fff;color:#1a1a1a}
  body::before{display:none}
  header,footer,.nav,.note,.err,.progress,.hnav,#builder,#cvOut,.step:not(.on){display:none !important}
  .wrap{max-width:none;padding:0}
  h1:not(.cv-preview h1),.lede,.eyebrow,.card>h2{display:none}
  #cvDone{border:none;padding:0;margin:0}
  #cvDone>h2{display:none}
  .cv-preview{border:none;padding:0;font-size:11.5pt}
  .cv-preview h2{break-after:avoid}
  .cv-preview .job{break-inside:avoid}
}

/* ---------- accessibility ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--brand-fill);color:#fff;padding:12px 18px;
  border-radius:0 0 9px 0;z-index:60;font-weight:600;text-decoration:none}
.skip:focus{left:0}
/* A visible focus ring everywhere, not just where the browser felt like it. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--d-violet-hi);outline-offset:2px;border-radius:6px}
.chip:focus-visible{outline-offset:1px}
main:focus{outline:none}
h1[tabindex]:focus{outline:none}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto !important}
}

/* CV length picker. */
.cv-lens { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 14px; }
.cv-lens-lab { font-size:13.5px; font-weight:600; margin-right:2px; }
.lenb {
  padding:6px 13px; border-radius:999px; cursor:pointer; font:inherit; font-size:14px;
  border:1px solid var(--line); background:var(--panel-2); color:var(--ink-2);
}
@media (hover:hover) and (pointer:fine){.lenb:hover { border-color:var(--brand-line); color:var(--ink); }}
.lenb.is-on { background:var(--brand-soft); color:var(--brand-ink); border-color:var(--brand-line); font-weight:600; }
.lenb:focus-visible { outline:2px solid var(--d-violet-hi); outline-offset:2px; }

/**
 * Summary progress.
 *
 * These were `.step`, which is the class the wizard uses to hide every screen
 * but the current one (`.step{display:none}` near the top). Loading later, the
 * `display:flex` here won, so all eight screens rendered at once, stacked into
 * unreadable columns. Named `.sumstep` so the two cannot collide again.
 */
.sumsteps { list-style:none; margin:0 0 18px; padding:0; }
.sumstep { display:flex; align-items:center; gap:10px; padding:7px 0; font-size:15px; color:var(--ink-3); }
.sumstep .tick {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; font-size:13px; flex:0 0 auto;
  border:1px solid var(--line); color:var(--ink-3);
}
.sumstep.is-done { color:var(--ink); font-weight:600; }
.sumstep.is-done .tick { background:var(--d-mint); border-color:var(--d-mint); color:#fff; }

/* ---------- one place at a time ---------- */
.deck { position:relative; margin:0 0 18px; }
.deck-card, .deck-done {
  background:var(--panel); border:1px solid var(--line); border-radius:22px;
  padding:26px; min-height:230px; box-shadow:var(--d-glow);
}
/**
 * The stack behind the top card — what makes it read as "there are more".
 *
 * Layered with the card lifted to z-index 1 rather than pushing these to -1: a
 * negative index puts them behind the nearest stacking context, and .wrap is
 * one, so they disappeared entirely.
 */
.deck-card { position:relative; z-index:1; }
.deck::before, .deck::after {
  content:""; position:absolute; left:14px; right:14px; bottom:-7px; height:24px;
  background:var(--panel-2); border:1px solid var(--line); border-top:none;
  border-radius:0 0 var(--r) var(--r); z-index:0;
}
.deck::after { left:28px; right:28px; bottom:-14px; opacity:.6; }
.deck.is-last::before, .deck.is-last::after { display:none; }

.deck-name { font-size:clamp(24px,4vw,32px); font-weight:700; letter-spacing:-.025em; margin:0 0 4px; }
.deck-meta { color:var(--ink-3); font-size:13.5px; margin:0 0 16px; }
/* Their own words, set apart from ours: what the site says about itself. */
.deck-about { margin:0 0 14px; padding:12px 16px; border-left:3px solid var(--brand-line); background:var(--panel-2);
  border-radius:0 10px 10px 0; font-size:14.5px; line-height:1.55; color:var(--ink-2); font-style:italic; }
.deck-about-lab { display:block; font-style:normal; font-size:11.5px; font-weight:650; letter-spacing:.06em;
  text-transform:uppercase; color:var(--brand); margin-bottom:4px; }
.deck-facts { margin:-6px 0 14px; font-size:13.5px; color:var(--ink-2); }
.rev-about { margin:0 0 16px; }
.deck-facts a { color:inherit; }
.deck-why { list-style:none; margin:0; padding:0; }
.deck-why li { font-size:14.5px; color:var(--ink-2); padding:6px 0 6px 28px; position:relative; }
.deck-why li::before { content:"✓"; position:absolute; left:0; top:7px; width:19px; height:19px;
  border-radius:50%; background:var(--brand-soft); color:var(--brand); font-size:11px; font-weight:800;
  display:grid; place-items:center; }
.deck-card.go-yes { animation:cardYes .28s ease both; }
.deck-card.go-no  { animation:cardNo .28s ease both; }
@keyframes cardYes { to { transform:translateX(36px) rotate(2deg); opacity:0 } }
@keyframes cardNo  { to { transform:translateX(-36px) rotate(-2deg); opacity:0 } }

.deck-bar { display:flex; align-items:center; gap:16px; justify-content:center; margin-bottom:10px; }
.swipe {
  display:inline-flex; align-items:center; gap:9px; padding:13px 22px; min-height:52px;
  border-radius:99px; font-size:15px; font-weight:600; border:1px solid var(--line);
  background:var(--panel-2); color:var(--ink);
}
.swipe span[aria-hidden] { font-size:17px; line-height:1; }
@media (hover:hover) and (pointer:fine){.swipe-no:hover  { border-color:var(--red);  color:var(--red); }}
.swipe-yes { background:var(--brand-fill); border-color:var(--brand-fill); color:#fff; box-shadow:0 12px 28px -12px rgba(109,74,232,.7); }
@media (hover:hover) and (pointer:fine){.swipe-yes:hover { background:#5D3AD8; }}
.deck-count { font-size:13.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; min-width:96px; text-align:center; }
.deck-hint { text-align:center; margin:0 0 8px; }
.deck-done { text-align:center; }
@media(max-width:520px){
  .deck-bar { display:grid; grid-template-columns:1fr 1.35fr; gap:10px;
    position:sticky; bottom:10px; z-index:12; }
  .swipe { min-height:56px; justify-content:center; }
  .swipe-no { background:#fff; }
  .deck-count { display:none; }
}

/* A keyboard hint means nothing on a screen you touch. */
@media (hover:none) and (pointer:coarse) {
  .deck-kbd { display:none; }
}
.deck-card.dragging { transition:none; }
.deck-card:not(.dragging) { transition:transform .2s ease, opacity .2s ease; }

/* iOS zooms the whole page when a focused input is under 16px. */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px; }
}

/* Editable subject line, styled as text until touched. */
.subj{font:inherit;font-weight:560;color:var(--ink);background:transparent;border:1px solid transparent;
  border-radius:6px;padding:1px 6px;width:min(92%,520px)}
@media (hover:hover) and (pointer:fine){.subj:hover{border-color:var(--line)}}
.subj:focus{outline:none;border-color:var(--brand);background:var(--panel)}

/* Drop zone while a file hovers over it. */
.drop.drag{border-style:solid;border-color:var(--brand);background:var(--brand-soft)}

/* Send receipts. */
#toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);opacity:0;pointer-events:none;
  background:var(--panel-2);color:var(--ink);border:1px solid var(--brand-line);border-radius:99px;
  padding:10px 20px;font-size:14.5px;font-weight:600;z-index:80;transition:opacity .25s,transform .25s;
  width:max-content;max-width:min(calc(100vw - 32px),440px);text-align:center;line-height:1.35}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* The decision should never be below the fold on a phone. */
@media (max-width:640px){
  .step[data-step="6"] .nav{position:sticky;bottom:0;background:var(--bg);
    padding:12px 0;border-top:1px solid var(--line);z-index:10}
}

/* Provenance drawer on deck cards. */
.prov { margin-top:14px; border-top:1px solid var(--line-2); padding-top:10px; }
.prov summary { cursor:pointer; font-size:13px; color:var(--ink-3); list-style:none; }
.prov summary::before { content:"→ "; }
.prov[open] summary::before { content:"↓ "; }
@media (hover:hover) and (pointer:fine){.prov summary:hover { color:var(--ink); }}
.prov ul { margin:8px 0 0; padding-left:18px; font-size:13px; color:var(--ink-2); }
.prov li { margin-bottom:4px; }

/* The shifts grid — tick what you can work; letters say so plainly. */
.shifts{display:grid;gap:6px;max-width:420px}
.shifts-row{display:grid;grid-template-columns:52px repeat(3,1fr);gap:6px;align-items:center}
.shifts-head span{font-size:12px;font-weight:620;color:var(--ink-3);text-align:center}
.shifts-day{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.shifts-cell{min-height:36px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer;position:relative}
@media (hover:hover) and (pointer:fine){.shifts-cell:hover{border-color:var(--brand-line)}}
.shifts-cell[aria-pressed="true"]{background:var(--brand-soft);border-color:var(--brand-line)}
.shifts-cell[aria-pressed="true"]::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:var(--brand-ink);font-size:14px;font-weight:700}
.shifts-said{margin:12px 0 0}

/* The template strip: six miniature CVs, one tap to dress yours differently. */
.tpl-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.tpl-pick{border:2px solid var(--line);border-radius:11px;background:var(--panel-2);padding:8px 8px 6px;cursor:pointer;text-align:left;font:inherit;color:inherit}
@media (hover:hover) and (pointer:fine){.tpl-pick:hover{border-color:var(--brand-line)}}
.tpl-pick[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft)}
.tpl-mini{display:block;background:#fff;border-radius:6px;overflow:hidden;height:150px;position:relative;pointer-events:none}
.tpl-mini .cv-preview{display:block;border:none;border-radius:0;transform:scale(.34);transform-origin:top left;width:400px}
.tpl-name{display:block;font-weight:640;font-size:13px;margin:8px 0 1px}
.tpl-tag{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.35}

/* the plan's round allowance on the letters step */
.allow{padding:20px 22px;margin-bottom:14px}
.allow[hidden]{display:none}
.allow .allow-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;font-size:13.5px;color:var(--ink-2)}
.allow .allow-row b{font-size:14px;font-weight:640;color:var(--ink);font-variant-numeric:tabular-nums}
.allow .allow-bar{height:14px;border-radius:99px;background:rgba(109,74,232,.09);overflow:hidden}
.allow .allow-bar i{display:block;height:100%;border-radius:99px;background:var(--brand-fill);transition:width .4s}
.allow>.muted{margin:12px 0 0}

/* ---------- iOS Safari ----------
   Inputs under 16px make Safari zoom the page on focus; every text control is
   16px on a phone. Buttons and chips lose the grey tap flash and the
   double-tap-to-zoom wait. The page respects the notch and the home bar.
   The drifting blooms are a constant repaint on a phone, so they hold still
   where there is no mouse. */
@media(max-width:640px){input,select,textarea{font-size:16px !important}}
a,button,input,select,textarea,summary,[role=button],.chip{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@media(pointer:coarse){
  .bloom i,.compose .deck,.compose .paper,.compose .toast{animation:none !important}
}
@supports(padding:max(0px)){
  body{padding-bottom:env(safe-area-inset-bottom)}
  .dk-nav .inner,.dk-wrap,.hbar,.wrap,.st-nav .inner,.st-wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
}

/* ---------- the fast screen (an ad's landing: /go/<role> → #fast) ----------
   One question on a phone held in one hand: the work as removable chips, a
   postcode box big enough to hit first time, and one full-width button. All
   colours come from the tokens above, so it follows whatever theme the rest
   of the flow uses. The postcode is 19px, which also keeps iOS from zooming
   on focus (the class outranks the 16px rule above). */
.fast h1{font-size:34px;margin-bottom:8px}
.fast-lede{margin-bottom:22px}
.fast-roles{margin:0 0 20px}
.fast-roles .f{display:block;font-size:13.5px;font-weight:600;margin:0 0 8px;color:var(--ink-2)}
.fast-more{margin-top:10px}
.fast-more[hidden]{display:none}
.fast-more .chip{background:var(--panel)}
.fast-pick{display:inline-flex;align-items:center;min-height:44px;padding:0 4px 0 16px;border-radius:99px;
  background:var(--brand-soft);border:1px solid var(--brand);color:var(--ink);font-weight:600;font-size:15px}
.fast-x{min-width:44px;min-height:44px;margin-left:2px;border-radius:99px;background:none;border:none;
  color:var(--ink-2);font-size:15px;line-height:1;display:inline-grid;place-items:center}
@media (hover:hover) and (pointer:fine){.fast-x:hover{color:var(--ink);background:var(--panel)}}
.fast-add{min-height:44px;padding:0 14px;border-radius:99px;background:none;border:1px dashed var(--line);
  color:var(--ink-2);font-size:14.5px}
@media (hover:hover) and (pointer:fine){.fast-add:hover{border-color:var(--brand-line);color:var(--ink)}}
input.fast-pc{font-size:19px !important;min-height:54px;letter-spacing:.04em;text-transform:uppercase}
input.fast-pc::placeholder{text-transform:none;letter-spacing:0;color:var(--ink-3)}
.fast-go{display:block;width:100%;min-height:56px;margin-top:14px;font-size:17px}
.fast-small{margin:12px 0 0;font-size:13.5px}
/* Bar work's age line under the role chips (roles.js ageNoteFor): quiet, never a warning box. */
.age-note{margin:10px 0 0;font-size:13.5px;line-height:1.5}
.age-note[hidden]{display:none}
@media(min-width:641px){
  .fast .fast-pc,.fast .fast-go{max-width:420px}
}
@media(max-width:640px){
  .fast h1{font-size:28px}
}
/* "Refine" sits right under the count on the places screen. */
.refine{margin:-16px 0 18px}
.refine .btn-ghost{min-height:44px;font-size:14.5px}

/* A note is display:flex, which beats the hidden attribute unless told. */
.note[hidden]{display:none}

/* ---------- the CV step on a phone ----------
   Shown by app.js on touch or narrow screens: photograph the CV, or answer
   the builder's questions. The upload box drops to second place beneath. */
.cv-quick{display:grid;gap:12px;margin:0 0 16px}
.cv-quick[hidden]{display:none}
.quick-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px 18px;min-height:76px;
  border-radius:16px;border:1px solid var(--line);background:var(--panel);color:var(--ink);text-decoration:none;
  box-shadow:var(--d-glow);font:inherit}
.quick-opt b{display:block;font-size:16.5px;font-weight:650;line-height:1.3}
.quick-opt small{display:block;font-size:13.5px;color:var(--ink-3);margin-top:3px;line-height:1.4}
@media (hover:hover) and (pointer:fine){.quick-opt:hover{border-color:var(--brand-line)}}
.quick-main{background:var(--brand-fill);border-color:var(--brand-fill);color:#fff;box-shadow:0 12px 28px -12px rgba(109,74,232,.7)}
@media (hover:hover) and (pointer:fine){.quick-main:hover{background:#5D3AD8;border-color:#5D3AD8}}
.quick-main small{color:#fff}
.quick-ico{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:22px;
  background:var(--brand-soft);color:var(--brand)}
.quick-main .quick-ico{background:rgba(255,255,255,.18);color:#fff}
.quick-or{margin:6px 0 0}
.drop.drop-second{padding:20px 16px}
.drop.drop-second h3{font-size:15px}

/* ---------- the paywall sheet ----------
   Over the letter on the review step: a bottom sheet on a phone, a centred
   card on a wide screen. Colours are the theme's tokens throughout, so it
   follows whatever palette the page is in. */
body.sheet-open{overflow:hidden}
.sheet-back{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(27,24,48,.45);opacity:0;transition:opacity .2s}
.sheet-back[hidden]{display:none}
.sheet-back.on{opacity:1}
.sheet{width:100%;max-width:480px;max-height:92vh;overflow:auto;overscroll-behavior:contain;
  background:var(--panel);color:var(--ink);border:1px solid var(--line);border-bottom:none;border-radius:22px 22px 0 0;
  padding:12px 20px calc(18px + env(safe-area-inset-bottom));
  box-shadow:0 -20px 60px -20px rgba(27,24,48,.35);transform:translateY(24px);transition:transform .22s ease}
.sheet-back.on .sheet{transform:none}
.sheet-grip{display:block;width:40px;height:4px;border-radius:99px;background:var(--line);margin:0 auto 14px}
.sheet-title{font-size:22px;line-height:1.25;letter-spacing:-.02em;font-weight:700;margin:0 0 12px}
.sheet-lines{list-style:none;margin:0 0 18px;padding:0}
.sheet-lines li{position:relative;padding:5px 0 5px 28px;font-size:15px;color:var(--ink-2)}
.sheet-lines li::before{content:"✓";position:absolute;left:0;top:7px;width:19px;height:19px;border-radius:50%;
  background:var(--brand-soft);color:var(--brand);font-size:11px;font-weight:800;display:grid;place-items:center}
.sheet-widen{margin:0 0 16px;padding:0 0 16px;border-bottom:1px solid var(--line-2)}
.sheet-widen[hidden]{display:none}
.sheet-widen-btn{width:100%;min-height:50px}
.sheet-widen .muted{margin:8px 0 0}
.sheet-consent{color:var(--ink-3);font-size:13px;line-height:1.45;margin:0 0 10px;text-align:center;text-wrap:pretty}
.sheet-consent:empty{display:none}
.sheet-pay{width:100%;min-height:54px;font-size:16px}
.sheet-alt{display:block;width:100%;min-height:44px;margin-top:4px;text-align:center;font-size:15px;color:var(--brand-ink)}
.sheet-alt[hidden]{display:none}
.sheet-fine{color:var(--ink-3);font-size:13px;margin:8px 0 0;text-align:center}
.sheet-fine:empty{display:none}
.sheet-err{color:var(--red);font-size:14px;margin:8px 0 0}
.sheet-err:empty{display:none}
.sheet-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;padding-top:4px;border-top:1px solid var(--line-2)}
.sheet-foot .btn-ghost{min-height:44px;display:inline-flex;align-items:center}
@media(min-width:700px){
  .sheet-back{align-items:center;padding:20px}
  .sheet{border-radius:22px;border-bottom:1px solid var(--line);padding:26px 28px}
  .sheet-grip{display:none}
}

/* ---------- continue without a CV ----------
   The third way through the CV step. Under the upload box on a desktop; on a
   phone app.js moves it under the two big options, where it reads as one of
   three choices rather than a footnote. A full-width button on a phone, so it
   is as easy to hit with a thumb as the two above it. */
.cv-skip{margin:16px 0 0;text-align:center}
.cv-skip[hidden]{display:none}
.cv-skip-btn{min-height:50px;padding-left:22px;padding-right:22px}
.cv-skip-say{margin:8px auto 0;font-size:13.5px;max-width:46ch;line-height:1.45}
.cv-quick .cv-skip{margin:2px 0 4px}
.cv-quick .cv-skip-btn{width:100%}

/* The review step's "Got a CV, even an old one?" card: small, dismissible,
   and never between the person and the Send button. */
.cv-nudge{position:relative;padding:16px 46px 16px 18px;margin-bottom:14px;border-color:var(--brand-line);background:var(--brand-soft);box-shadow:none}
.cv-nudge[hidden]{display:none}
.cv-nudge-head{margin:0 0 10px;font-size:14.5px;color:var(--ink-2);line-height:1.45}
.cv-nudge-head b{color:var(--ink)}
.cv-nudge .row{gap:10px;align-items:center}
.cv-nudge-x{position:absolute;top:6px;right:6px;width:40px;height:40px;border:0;background:none;border-radius:99px;
  color:var(--ink-3);font-size:15px;line-height:1;display:grid;place-items:center;cursor:pointer}
@media (hover:hover) and (pointer:fine){.cv-nudge-x:hover{color:var(--ink);background:rgba(27,24,48,.06)}}

/* =====================================================================
   The funnel, v2 (SPEC-v2, approved 6 Oct 2026): white first, soft slow
   gradient fields that change mood per screen, frosted glass on top, and
   dark accents only — the night pill, the journey line's ink, one dark
   glass block per screen. Green means a letter has actually gone, and
   nothing else. Everything below overrides the older rules above it, so
   the app's markup, ids and behaviour are unchanged underneath.
   Contrast was measured on the deepest field colour (#E7DEFF) and the
   worst bloom; small text on a field is ink, ink-2 or ink-3 (#5B5578 —
   the site's #6E688A fails on lavender).
   ===================================================================== */
:root{
  --fx-page:#FCFBFF; --fx-lav-1:#F7F3FF; --fx-lav-2:#F3EEFF; --fx-lav-3:#E7DEFF;
  --fx-ink:#1B1830; --fx-ink-2:#4B4568; --fx-ink-3:#5B5578; --fx-ink-4:#7F79A0;
  --fx-hint:#847DAB; --fx-focus:#5D3AD8; --fx-night:#0A0A12;
  --fx-violet:#6D4AE8; --fx-violet-ink:#5D3AD8; --fx-glow:#8B6DFF; --fx-deep:#5F3FD9;
  --fx-good:#0B7A57; --fx-err:#A63A4A; --fx-paper:#FFFFFF;
  --fx-out:cubic-bezier(.16,1,.3,1); --fx-in:cubic-bezier(.4,0,1,1);
  --fx-spring:cubic-bezier(.34,1.56,.64,1); --fx-glide:cubic-bezier(.22,1,.36,1);
  --fx-sh-glass:0 0 0 1px rgba(93,58,216,.09),0 1px 2px rgba(27,24,48,.04),0 14px 30px -16px rgba(64,40,160,.26);
  --fx-sh-lift:0 0 0 1.5px rgba(109,74,232,.78),0 0 0 6px rgba(139,109,255,.14),0 24px 40px -18px rgba(93,58,216,.5);
  --fx-sh-pill:0 12px 24px -10px rgba(10,10,18,.5),0 20px 40px -18px rgba(109,74,232,.7);
  --fx-sh-dark:0 34px 60px -30px rgba(27,18,80,.65),0 0 90px -34px rgba(109,74,232,.75);
  --fx-sh-paper:inset 0 1px 0 #fff,0 0 0 1px rgba(93,58,216,.08),0 1px 2px rgba(27,24,48,.04),0 28px 52px -24px rgba(64,40,160,.36),0 8px 18px -10px rgba(64,40,160,.14);
  --fx-sh-sheet:inset 0 1px 0 #fff,0 -30px 60px -30px rgba(40,24,110,.45);
  --fx-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 12.4l3.6 3.5 7.3-7.8' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --fx-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 6l6 6-6 6' fill='none' stroke='%235B5578' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ink-3:var(--fx-ink-3);
}
body{background:var(--fx-page);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif}
body::before{content:none}

/* ---- the field: one fixed layer, three blooms, a mood per screen ---- */
.fx-field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:linear-gradient(172deg,#FFFFFF 0%,var(--fm,#FAF8FF) 52%,var(--fe,#EFE9FF) 100%)}
.fx-field i{position:absolute;display:block;border-radius:50%;will-change:transform}
.fx-field2{opacity:0;transition:opacity .9s var(--fx-glide)}
.fx-field2.on{opacity:1}
/* The layer underneath while the other shows: its drift waits. */
.fx-field.is-idle i{animation-play-state:paused}
.fx-field .b1{width:var(--s1);height:var(--s1);left:calc(var(--x1) - var(--s1)/2);top:calc(var(--y1) - var(--s1)/2);
  background:radial-gradient(closest-side,rgba(139,109,255,var(--a1)),rgba(139,109,255,0));animation:fx-d1 24s ease-in-out infinite alternate}
.fx-field .b2{width:var(--s2);height:var(--s2);left:calc(var(--x2) - var(--s2)/2);top:calc(var(--y2) - var(--s2)/2);
  background:radial-gradient(closest-side,var(--c2),rgba(255,255,255,0));animation:fx-d2 31s ease-in-out infinite alternate}
.fx-field .b3{width:420px;height:300px;left:calc(var(--x3) - 210px);top:calc(var(--y3) - 150px);
  background:radial-gradient(closest-side,rgba(255,255,255,.85),rgba(255,255,255,0))}
@keyframes fx-d1{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-26px,18px,0) scale(1.07)}}
@keyframes fx-d2{0%{transform:translate3d(0,0,0) scale(1.04)}100%{transform:translate3d(22px,-20px,0) scale(.96)}}
.fx-paused .fx-field i{animation-play-state:paused}
.fx-field[data-mood="app"]   {--fm:#FAF8FF;--fe:#EFE9FF;--s1:500px;--x1:92%;--y1:2%;--a1:.30;--s2:520px;--x2:-4%;--y2:96%;--c2:rgba(220,206,255,.5);--x3:40%;--y3:30%}
.fx-field[data-mood="build"] {--fm:#F1ECFF;--fe:#E0D6FF;--s1:640px;--x1:50%;--y1:33%;--a1:.44;--s2:560px;--x2:12%;--y2:92%;--c2:rgba(234,201,255,.6);--x3:50%;--y3:72%}
.fx-field[data-mood="result"]{--fm:#F3EEFF;--fe:#E5DCFF;--s1:620px;--x1:50%;--y1:28%;--a1:.40;--s2:520px;--x2:90%;--y2:90%;--c2:rgba(200,184,255,.55);--x3:50%;--y3:70%}
.fx-field[data-mood="paper"] {--fm:#FBFAFF;--fe:#F2EEFF;--s1:440px;--x1:100%;--y1:0%;--a1:.20;--s2:480px;--x2:0%;--y2:100%;--c2:rgba(220,206,255,.42);--x3:40%;--y3:40%}
.fx-field[data-mood="good"]  {--fm:#F8F6FF;--fe:#EEE8FF;--s1:520px;--x1:50%;--y1:30%;--a1:.26;--s2:420px;--x2:50%;--y2:30%;--c2:rgba(11,122,87,.10);--x3:50%;--y3:70%}

/* ---- surfaces ---- */
.card,.fx-glass,.deck-done,.quick-opt,.allow{position:relative;border:0;border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.54));
  -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.5),var(--fx-sh-glass)}
.card{padding:22px 20px}
.fx-paper{background:var(--fx-paper);border-radius:22px;box-shadow:var(--fx-sh-paper)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,.fx-glass,.deck-done,.quick-opt,.allow,.deck-card{background:linear-gradient(180deg,#FFFFFF,#F8F5FF)}
}
@media (max-resolution:1.5dppx),(update:slow){
  .card,.fx-glass,.deck-done,.quick-opt,.allow,.deck-card,header.fx-top,.sheet{-webkit-backdrop-filter:none;backdrop-filter:none}
  .card,.fx-glass,.deck-done,.quick-opt,.allow,.deck-card{background:linear-gradient(180deg,#FFFFFF,#F8F5FF)}
}

/* ---- type ---- */
.wrap{max-width:640px;padding:0 20px 120px}
/* The funnel's screens end in their sticky dock, which must reach the foot of
   the page: padding under the step would lift the dock off the bottom when
   scrolled right down, with an empty band below it. The building screen has
   no dock, so it keeps a little air of its own. */
body.fx-immersive #stepmain{padding-bottom:0}
body.fx-immersive .step[data-step="3"]{padding-bottom:40px}
@media(max-width:359px){.wrap{padding-left:16px;padding-right:16px}}
h1{font-size:33px;line-height:1.04;letter-spacing:-.045em;font-weight:730;color:var(--fx-ink);text-wrap:balance;margin:0 0 12px}
@media(max-width:640px){h1{font-size:30px}}
.lede{color:var(--fx-ink-2);font-size:16px;line-height:1.5;margin:0 0 22px}
.muted{color:var(--fx-ink-3)}
.step{padding-top:18px;animation:fx-in .56s var(--fx-out) both}
@keyframes fx-in{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
/* "Step 2 of 3" stays for screen readers; the journey line says it to the eye. */
.eyebrow[data-counter]{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fx-kick{font-size:12px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--fx-violet-ink);margin:0 0 10px}
.fx-glass .fx-kick,.fx-paper .fx-kick{color:var(--fx-ink-3)}

/* ---- the top row: back · the journey line (no mark: SPEC-v2 §2.3) ---- */
header.fx-top{position:sticky;top:0;z-index:20;border:0;
  background:linear-gradient(180deg,rgba(252,251,255,.94),rgba(252,251,255,.78) 70%,rgba(252,251,255,0));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.fx-toprow{max-width:640px;margin:0 auto;padding:6px 20px 2px;display:flex;align-items:flex-start;gap:14px;min-height:52px}
.fx-back{position:relative;flex:none;width:38px;height:38px;margin-top:3px;border:0;border-radius:50%;display:grid;place-items:center;padding:0;color:var(--fx-ink);
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.6));box-shadow:inset 0 1px 0 #fff,var(--fx-sh-glass)}
.fx-back::before{content:"";position:absolute;inset:-3px}
.fx-back svg{width:18px;height:18px}
.fx-back[data-hide]{visibility:hidden}
.fx-brand{flex:none;display:none;align-items:center;gap:8px;min-height:44px;font-weight:650;letter-spacing:-.02em;font-size:16px;color:var(--fx-ink);text-decoration:none}
.fx-brand img{width:24px;height:24px}
header[data-brand] .fx-brand{display:flex}
header[data-brand] .fx-back{display:none}

/* The journey line. #bar is the fill (app.js sets its width); each .rseg is
   a soft node with its label under it. The fast path — every Meta visitor —
   shows the quiz as the line's first quarter, then Places · Your CV · Letters. */
.progress{display:block;position:relative;flex:1;max-width:none;margin:0;padding:0;height:44px}
.progress::before{content:"";position:absolute;left:0;right:0;top:21px;height:3px;border-radius:3px;background:rgba(27,24,48,.09)}
.progress #bar{display:block;position:absolute;left:0;top:21px;height:3px;width:0;border-radius:3px;z-index:1;
  background:linear-gradient(90deg,#1B1830 0%,#6D4AE8 70%,#A994FF 100%);box-shadow:0 0 12px rgba(139,109,255,.65);transition:width .6s var(--fx-glide)}
.progress #bar::after{content:"";position:absolute;right:-14px;top:50%;width:30px;height:16px;margin-top:-8px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(236,230,255,1) 0%,rgba(190,172,255,.9) 28%,rgba(139,109,255,.45) 60%,rgba(139,109,255,0) 100%);animation:fx-tip 2.4s ease-in-out infinite}
@keyframes fx-tip{50%{transform:scale(1.25);opacity:.8}}
.progress[data-seg="0"]{visibility:hidden}
@media(max-width:520px){
  .progress[data-path="full"] .rseg b{display:none}
  .progress[data-path="full"][data-seg="1"] .rseg:nth-of-type(1) b,.progress[data-path="full"][data-seg="2"] .rseg:nth-of-type(2) b,
  .progress[data-path="full"][data-seg="3"] .rseg:nth-of-type(3) b,.progress[data-path="full"][data-seg="4"] .rseg:nth-of-type(4) b,
  .progress[data-path="full"][data-seg="5"] .rseg:nth-of-type(5) b{display:block}
}
.progress .rseg{position:absolute;top:0;width:0;height:44px}
.progress .rseg i{position:absolute;left:-3.5px;top:19px;width:7px;height:7px;border-radius:50%;background:#D9D5E6;z-index:2;transition:background .3s}
.progress .rseg b{position:absolute;left:0;top:29px;transform:translateX(-50%);white-space:nowrap;font-size:11.5px;font-weight:560;letter-spacing:0;color:var(--fx-ink-3);margin:0}
.progress .rseg:nth-of-type(1){left:10%}.progress .rseg:nth-of-type(2){left:30%}.progress .rseg:nth-of-type(3){left:50%}
.progress .rseg:nth-of-type(4){left:70%}.progress .rseg:nth-of-type(5){left:90%}
.progress .rseg:nth-of-type(5) b{transform:translateX(-62%)}
.progress[data-path="fast"] .rseg:nth-of-type(3){left:40%}
.progress[data-path="fast"] .rseg:nth-of-type(4){left:65%}
.progress[data-path="fast"] .rseg:nth-of-type(5){left:90%}
.progress[data-path="fast"]::after{content:"";position:absolute;left:25%;top:19px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--fx-ink);z-index:2}
/* done: ink; current: hidden under the tip; upcoming: pale. Labels follow. */
.progress[data-seg="2"] .rseg:nth-of-type(1) i,
.progress[data-seg="3"] .rseg:nth-of-type(-n+2) i,
.progress[data-seg="4"] .rseg:nth-of-type(-n+3) i,
.progress[data-seg="5"] .rseg:nth-of-type(-n+4) i,
.progress[data-seg="6"] .rseg i{background:var(--fx-ink)}
.progress[data-seg="2"] .rseg:nth-of-type(1) b,
.progress[data-seg="3"] .rseg:nth-of-type(-n+2) b,
.progress[data-seg="4"] .rseg:nth-of-type(-n+3) b,
.progress[data-seg="5"] .rseg:nth-of-type(-n+4) b,
.progress[data-seg="6"] .rseg b{color:var(--fx-ink-2)}
.progress[data-seg="1"] .rseg:nth-of-type(1) i,
.progress[data-seg="2"] .rseg:nth-of-type(2) i,
.progress[data-seg="3"] .rseg:nth-of-type(3) i,
.progress[data-seg="4"] .rseg:nth-of-type(4) i,
.progress[data-seg="5"] .rseg:nth-of-type(5) i{background:transparent}
.progress[data-seg="1"] .rseg:nth-of-type(1) b,
.progress[data-seg="2"] .rseg:nth-of-type(2) b,
.progress[data-seg="3"] .rseg:nth-of-type(3) b,
.progress[data-seg="4"] .rseg:nth-of-type(4) b,
.progress[data-seg="5"] .rseg:nth-of-type(5) b{color:var(--fx-ink);font-weight:690}

/* ---- pills: one night pill per screen; the waiting pill is glass ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:56px;padding:0 26px;border:0;border-radius:999px;
  color:#fff;font-size:17px;font-weight:650;letter-spacing:-.015em;
  background:linear-gradient(180deg,#2A2542 0%,#121022 55%,#0A0A12 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.06),var(--fx-sh-pill);transition:transform .14s,box-shadow .14s}
@media (hover:hover) and (pointer:fine){.btn:hover:not(:disabled){background:linear-gradient(180deg,#2F2A4C 0%,#16132A 55%,#0A0A12 100%);transform:none}}
.btn:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 6px 12px -6px rgba(10,10,18,.5),0 10px 20px -10px rgba(109,74,232,.6)}
/* Waiting: glass, the same size, an ink-3 label and a line under it saying why. Never a grey slab. */
.btn:disabled,.btn[aria-disabled="true"]{cursor:default;color:var(--fx-ink-3);
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.5));
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.55),0 0 0 1px rgba(27,24,48,.10)}
.btn-sm{min-height:44px;font-size:15px;padding:0 20px}
.btn-2{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border:0;border-radius:999px;color:var(--fx-ink);font-weight:600;
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.6));box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(93,58,216,.14),0 10px 24px -14px rgba(64,40,160,.3)}
@media (hover:hover) and (pointer:fine){.btn-2:hover{background:#fff;border:0}}
.btn-ghost{color:var(--fx-violet-ink);text-decoration:none;font-weight:620;min-height:44px}
@media (hover:hover) and (pointer:fine){.btn-ghost:hover{color:var(--fx-ink)}}
.fx-why{display:flex;align-items:center;justify-content:center;gap:7px;margin:10px 0 0;font-size:13.5px;font-weight:600;color:var(--fx-ink-2);text-align:center}
.fx-why:empty{display:none}
.fx-why::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--fx-violet-ink);flex:none}
.fx-fine{text-align:center;font-size:13px;line-height:1.45;color:var(--fx-ink-3);margin:11px auto 0;max-width:42ch;text-wrap:balance}
.fx-fine:empty,.fx-fine[hidden]{display:none}
.fx-link{background:none;border:0;padding:0;color:var(--fx-violet-ink);font-weight:620;font-size:inherit;position:relative;cursor:pointer;min-height:0}
.fx-link::before{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;margin-top:-22px}

/* The dock: the screen's one big button, at the foot of the screen, with the
   field's lower colour fading in behind so content scrolls under it cleanly.
   It stays opaque to its bottom edge, so no letter text shows behind the links
   under the pill; and the screen is a column at least as tall as the viewport
   (below), so the dock sits on the screen's foot and never ends in a hard edge
   with the field showing again under it. */
.fx-dock{position:sticky;bottom:0;z-index:12;margin:18px -20px 0;padding:30px 20px max(20px,env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(248,245,255,0) 0,rgba(248,245,255,.96) 26px,rgba(247,243,255,1) 46px,rgba(247,243,255,1) 100%)}
.step.on[data-step="4"],.step.on[data-step="5"],.step.on[data-step="6"],.step.on[data-step="7"]{display:flex;flex-direction:column;
  min-height:calc(100vh - 52px);min-height:calc(100svh - 52px)}
.step.on > .fx-resultonly,.step.on > .fx-deckonly,.step.on > .fx-letteronly,.step.on > .fx-sentwrap:not([hidden]){display:flex;flex-direction:column;flex:1 0 auto}
.step.on .fx-dock,.step.on.is-filelink:not(.is-sender) > .cv-skip{margin-top:auto}
/* Small lines straight under a night pill sit in its violet shadow: ink-2, and a little more air (AA measured on the shadow). */
.fx-dock .fx-fine,.step[data-route="first"] .cv-skip-say,.fast-small{color:var(--fx-ink-2)}
.fx-dock > .btn + .fx-fine{margin-top:14px}
/* The dock's faded top is see-through, so it is tap-through too: the deck's
   ✕ and ✓ just above it on a small phone take the tap, not the fade. */
.fx-dock{pointer-events:none}
.fx-dock > *{pointer-events:auto}
.fx-dock[hidden],.nav.fx-dock[hidden]{display:none}
.fx-dock > .btn{width:100%}
.nav.fx-dock{display:block}
.nav.fx-dock .sp{display:none}

/* Focus: a ring that follows the shape, on every surface (SPEC-v2 §7). */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--fx-focus);outline-offset:3px}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px #FCFBFF,0 0 0 5px #5D3AD8,var(--fx-sh-pill)}
.sheet-head button:focus-visible{outline:none;box-shadow:0 0 0 3px #141124,0 0 0 5px #FFFFFF}
h1[tabindex]:focus,h2[tabindex]:focus{outline:none}
.fx-line input:focus-visible{outline:none}

/* A return visit (app.html step 0): the way back in leads, the long introduction steps aside. */
.fx-resume{align-items:flex-start;padding:18px 18px 16px;margin:6px 0 16px}
.fx-resume > div{flex:1;min-width:0;font-size:15px;line-height:1.45}
.fx-resumego{display:flex;width:100%;margin-top:14px;text-decoration:none}
.step.fx-return > .lede{display:none}
/* ---- notes, errors ---- */
.note{border:0;border-radius:18px;padding:14px 16px;color:var(--fx-ink-2);
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.58));box-shadow:inset 0 1px 0 #fff,var(--fx-sh-glass)}
.note b{color:var(--fx-ink)}
.note-brand .ico{flex:none;width:20px;height:20px;border-radius:50%;margin-top:1px;font-size:0;color:transparent;overflow:hidden;
  background:var(--fx-tick) center/100% no-repeat,linear-gradient(135deg,#8B6DFF,#5F3FD9);box-shadow:0 4px 10px -3px rgba(93,58,216,.55)}
.note-amber{color:var(--fx-ink-2)}
.note-amber .ico{flex:none;width:8px;height:8px;margin-top:8px;border-radius:50%;font-size:0;color:transparent;overflow:hidden;background:var(--fx-err)}
.err{border:0;border-radius:18px;color:var(--fx-ink);padding:14px 16px 14px 32px;position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.7));box-shadow:inset 0 1px 0 #fff,var(--fx-sh-glass)}
.err::before{content:"";position:absolute;left:16px;top:21px;width:8px;height:8px;border-radius:50%;background:var(--fx-err)}

/* ---- chips and fields on the full path and the fast screen ---- */
.chip{border:0;color:var(--fx-ink);background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.62));box-shadow:inset 0 1px 0 #fff,var(--fx-sh-glass)}
@media (hover:hover) and (pointer:fine){.chip:hover{border:0}}
.chip[aria-pressed="true"]{color:var(--fx-ink);background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(241,235,255,.92));box-shadow:inset 0 1px 0 #fff,var(--fx-sh-lift)}
.chip[aria-pressed="true"]::before{content:"";width:18px;height:18px;border-radius:50%;margin-right:8px;background:var(--fx-tick) center/100% no-repeat,linear-gradient(135deg,#8B6DFF,#5F3FD9)}
input[type=text],input[type=email],input[type=tel],select,textarea{border:0;border-radius:14px;background:rgba(255,255,255,.9);box-shadow:inset 0 0 0 1px rgba(93,58,216,.16)}
input:focus,select:focus,textarea:focus{box-shadow:inset 0 0 0 1.5px var(--fx-violet),0 0 0 4px rgba(139,109,255,.16)}
.fast-pick{border:0;background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(241,235,255,.92));box-shadow:inset 0 1px 0 #fff,var(--fx-sh-lift)}
.fast-add{border:0;box-shadow:inset 0 0 0 1px rgba(93,58,216,.2)}
input.fast-pc{min-height:58px}
/* ROUND_LIMIT from the quiz: the whole screen is the glass card and the way on (app.js showRoundLimit). */
.step.fast.is-limit > :not(.fx-limit){display:none !important}
.step.on.fast.is-limit{display:flex;flex-direction:column;min-height:calc(100vh - 52px);min-height:calc(100svh - 52px)}
.step.fast.is-limit .fx-limit{display:flex;flex-direction:column;flex:1 0 auto}
.fx-limithead{font-size:33px;line-height:1.04;letter-spacing:-.045em;font-weight:730;color:var(--fx-ink);margin:10px 0 12px;text-wrap:balance}
.fx-limithead:focus{outline:none}
.fx-limitsay{font-size:16px;line-height:1.5;color:var(--fx-ink-2);margin:0 0 6px}
.fx-limitsay b{color:var(--fx-ink);font-weight:650}
.fx-limitsay[hidden],.fx-limithead[hidden]{display:none}
.step.fast.is-limit .allow-offer{display:none}
.step.fast.is-limit #limitDock{margin-top:auto}
#limitGo,#limitPay{width:100%;text-decoration:none}
#limitGo[hidden],#limitPay[hidden],.fx-limitapps[hidden]{display:none}
.fx-limitapps{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:2px;font-size:15px;font-weight:640;color:var(--fx-violet-ink);text-decoration:none}
.step.fast.is-limit #limitNote{margin:10px 0 0}
/* The round wall's sheet (app.js openRoundPaywall): the free way on, said quietly under the price. */
.sheet-later{color:var(--fx-ink-2);font-size:13.5px;line-height:1.45;margin:10px 0 0;text-align:center;text-wrap:pretty}
.sheet-later:empty,.sheet-later[hidden]{display:none}
.sheet-foot #payApps{font-size:14.5px;font-weight:620;color:var(--fx-violet-ink);text-decoration:none}
.sheet-foot #payApps[hidden]{display:none}
.sheet-each.is-answers{font-size:13.5px;font-weight:560;line-height:1.4;color:#E4DCFF}
.sheet-each.is-answers b{color:#fff;font-weight:700}
.fast-go{width:100%}
.fast h1{font-size:34px}
.pulse .dot{background:var(--fx-violet)}
.pulse.done .dot{background:var(--fx-ink-3)}
.shifts-cell{border:0;box-shadow:inset 0 0 0 1px rgba(93,58,216,.16)}
.shifts-cell[aria-pressed="true"]{background:rgba(109,74,232,.1);box-shadow:inset 0 0 0 1.5px var(--fx-violet)}
.lenb{border:0;box-shadow:inset 0 0 0 1px rgba(93,58,216,.16);background:rgba(255,255,255,.8)}
.lenb.is-on{background:rgba(109,74,232,.1);color:var(--fx-violet-ink);box-shadow:inset 0 0 0 1.5px var(--fx-violet)}

/* ---- B7 → C1: the count, then the deck ---- */
.fx-countcard h1{margin:0}
.fx-countcard .fx-n{font-variant-numeric:tabular-nums}
.step[data-view="result"] .fx-deckonly{display:none !important}
.step:not([data-view="result"]) .fx-resultonly{display:none !important}
.step[data-view="result"] .fx-countcard{position:relative;overflow:hidden;color:#fff;border-radius:28px;padding:26px 24px 24px;margin:6px 0 16px;
  background:linear-gradient(160deg,rgba(44,38,74,.94) 0%,rgba(20,17,36,.96) 45%,rgba(10,10,18,.97) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.07),var(--fx-sh-dark)}
.step[data-view="result"] .fx-countcard::before{content:"";position:absolute;width:340px;height:340px;right:-120px;top:-170px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(139,109,255,.6),rgba(139,109,255,0))}
.step[data-view="result"] .fx-countcard::after{content:"";position:absolute;width:260px;height:260px;left:-120px;bottom:-160px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(95,63,217,.45),rgba(95,63,217,0))}
.step[data-view="result"] .fx-countcard h1{position:relative;z-index:1;color:#fff;font-size:21px;line-height:1.28;letter-spacing:-.02em;font-weight:600}
.step[data-view="result"] .fx-countcard .fx-n{display:block;font-size:104px;line-height:.9;font-weight:760;letter-spacing:-.065em;margin:0 0 12px;color:#fff;
  text-shadow:0 0 26px rgba(139,109,255,.55)}
.step[data-view="deck"] .fx-countcard h1,.step:not([data-view]) .fx-countcard h1{font-size:23px;line-height:1.14;letter-spacing:-.035em;font-weight:720}
.fx-answers{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:8px 0 16px;font-size:13.5px;color:var(--fx-ink-3)}
.fx-answers span:empty + button{margin-left:auto}
.fx-chiprow{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.fx-chiprow:empty{display:none}
.fx-chiprow span{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 7px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--fx-ink);
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.6));box-shadow:inset 0 1px 0 #fff,var(--fx-sh-glass)}
.fx-chiprow span::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--fx-tick) center/100% no-repeat,linear-gradient(135deg,#8B6DFF,#5F3FD9)}
.fx-oneline{font-size:15px;color:var(--fx-ink-2);margin:0 0 16px}
.fx-widen{font-size:14px;line-height:1.4;color:var(--fx-ink-2);margin:-4px 0 12px;display:flex;gap:8px;align-items:baseline}
.fx-widen::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--fx-violet-ink);transform:translateY(-2px)}
.fx-widen[hidden]{display:none}
/* B7 as one composition (SPEC-v2): the count, the chips, the first card and
   the pill sit together at the foot of the screen; any spare height goes
   above the count, never between the card and the pill. The card rises from
   under the dock with two ghost slabs behind it. */
.step.on[data-view="result"] > .fx-countcard{margin-top:auto}
.step.on[data-view="result"] > .fx-resultonly{flex:0 0 auto}
.step[data-view="result"] .fx-resultonly .fx-dock{margin-top:0}
.fx-peek{position:relative;z-index:1;padding:15px 0 0;margin:2px 0 -30px}
.fx-peek:empty{display:none}
.fx-peek::before,.fx-peek::after{content:"";position:absolute;top:0;height:40px;border-radius:22px 22px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.4));box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(93,58,216,.07)}
.fx-peek::before{left:26px;right:26px;opacity:.75}
.fx-peek::after{top:7px;left:13px;right:13px}
.fx-peek:empty::before,.fx-peek:empty::after{display:none}
.fx-peek .fx-pk{position:relative;z-index:1;padding:16px 20px 40px;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.84));box-shadow:inset 0 1px 0 #fff,var(--fx-sh-glass)}
.fx-pk-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0}
.fx-pk-top .deck-kind{margin:0}
.fx-pk-of,.deck-of{flex:none;font-size:13px;font-weight:650;color:var(--fx-ink-2);font-variant-numeric:tabular-nums}
.fx-pk-name{font-size:24px;font-weight:720;letter-spacing:-.035em;margin:4px 0 2px;color:var(--fx-ink)}
.fx-pk-meta{font-size:13.5px;color:var(--fx-ink-3);margin:0}
/* The smallest phones (375×667): the line goes, the count card tightens, so
   the first card's name shows whole above the pill. */
@media (max-height:700px){
  .step[data-view="result"] .fx-oneline{display:none}
  .step[data-view="result"] .fx-countcard{padding:20px 22px 20px;margin-bottom:12px}
  .step[data-view="result"] .fx-countcard .fx-n{font-size:84px;margin-bottom:8px}
  .step[data-view="result"] .fx-countcard h1{font-size:19px}
  .fx-chiprow{margin-bottom:10px}
  .fx-peek{padding-top:12px}
}
@media (min-height:800px){
  .step[data-view="result"] .fx-countcard{padding:30px 26px 28px}
  .step[data-view="result"] .fx-countcard .fx-n{font-size:118px}
}

/* The place card: bright glass, two ghost slabs. */
.deck{margin:0 0 30px}
.deck::before,.deck::after{border:0;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.45));box-shadow:var(--fx-sh-glass);border-radius:0 0 22px 22px;bottom:-8px;left:12px;right:12px;height:30px}
.deck::after{bottom:-15px;left:24px;right:24px;opacity:.7}
.deck-card{border:0;border-radius:26px;padding:20px 22px 16px;min-height:0;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.8));
  -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(93,58,216,.09),0 1px 2px rgba(27,24,48,.04),0 22px 40px -20px rgba(64,40,160,.34)}
.deck-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 4px}
.deck-top .deck-kind{margin:0;flex-wrap:wrap}
.deck-why li b{color:var(--fx-ink);font-weight:650}
.deck-kind{display:flex;align-items:center;gap:7px;margin:0 0 4px;font-size:13px;font-weight:560;color:var(--fx-ink-2)}
.deck-kind::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--fx-violet);box-shadow:0 0 8px rgba(139,109,255,.8)}
.deck-kind:empty{display:none}
/* "Bristol centre · 3.4 mi from you": a place in the centre they said they'd work in (pipeline.js areaLabel). */
.deck-area{padding:2px 9px;border-radius:999px;background:rgba(139,109,255,.13);color:var(--fx-violet-ink);font-size:12.5px;font-weight:600}
.deck-name{font-size:30px;line-height:1.05;font-weight:730;letter-spacing:-.045em;color:var(--fx-ink);margin:2px 0 6px}
.deck-meta{color:var(--fx-ink-3);font-size:13.5px;margin:0 0 14px}
.deck-meta a,.deck-facts a{color:var(--fx-violet-ink);font-weight:620;text-decoration:none}
.deck-about{border-left:2px solid var(--fx-violet);background:rgba(109,74,232,.05);border-radius:0 14px 14px 0;font-style:normal;color:var(--fx-ink-2);padding:10px 14px}
.deck-about-lab{color:var(--fx-ink-3);font-size:11.5px;letter-spacing:.12em;font-weight:700}
.deck-why li{color:var(--fx-ink-2);padding:5px 0 5px 32px}
.deck-why li::before{content:"";width:22px;height:22px;top:5px;background:var(--fx-tick) center/100% no-repeat,linear-gradient(135deg,#8B6DFF,#5F3FD9);box-shadow:0 4px 10px -3px rgba(93,58,216,.55)}
.deck-src{font-size:inherit}
/* The sheet behind "map ↗": the map link and where the card's facts came from. */
.fx-srcsheet{padding:10px 22px calc(16px + env(safe-area-inset-bottom))}
.fx-srchead{font-size:24px;line-height:1.1;letter-spacing:-.035em;font-weight:730;color:var(--fx-ink);margin:2px 0 14px}
.fx-srchead:focus{outline:none}
.fx-srcmap{width:100%;text-decoration:none;margin:0 0 16px}
.fx-srclist{list-style:none;margin:0 0 6px;padding:0}
.fx-srclist li{position:relative;padding:6px 0 6px 18px;font-size:14.5px;line-height:1.45;color:var(--fx-ink-2)}
.fx-srclist li::before{content:"";position:absolute;left:2px;top:14px;width:6px;height:6px;border-radius:50%;background:var(--fx-violet)}
.fx-srclist a{color:var(--fx-violet-ink);font-weight:620}
.fx-srcdone{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;border:0;background:none;font-size:15px}
@media (max-height:700px){
  .deck{margin-bottom:22px}
  .deck-card{padding:16px 18px 12px}
  .deck-name{font-size:26px;margin-bottom:4px}
  .deck-meta{margin-bottom:10px}
  .deck-why li{padding-top:3px;padding-bottom:3px}
  .deck-why li::before{top:3px}
  .fx-answers{margin-bottom:10px}
}
/* fitDeck (app.js): a card that would push ✕ and ✓ under the dock gives way, step by step. */
.deck-card.fit-1 .deck-about-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.deck-card.fit-2 .deck-why li:nth-child(n+4){display:none}
.deck-card.fit-3 .deck-about{display:none}
.deck-card.fit-4 .deck-why li:nth-child(n+3){display:none}
.deck-card.fit-5 .deck-facts{display:none}
.deck-card.fit-6 .deck-why li:nth-child(n+2){display:none}
.deck-card.fit-scroll{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* ...and says there is more: a fade pinned to its foot over the cut line, which
   scrolls clear of the last reason at the end (it is after it, not over it). */
.deck-card.fit-scroll::after{content:"";position:sticky;bottom:0;display:block;height:30px;margin:0 -22px -16px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.96) 85%)}
/* Two round answers: glass ✕ and violet ✓ (night ink is the dock pill's alone). */
.deck-bar{display:flex;justify-content:center;gap:64px;margin:0 0 4px;position:static}
@media(max-width:520px){.deck-bar{display:flex;grid-template-columns:none;position:static;gap:64px}}
.swipe{display:flex;flex-direction:column;align-items:center;gap:7px;padding:0;min-height:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--fx-ink-2);font-size:12.5px;font-weight:600}
.swipe span[aria-hidden]{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-size:22px;line-height:1;transition:transform .08s}
.swipe-no span[aria-hidden]{color:var(--fx-ink-2);background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.66));box-shadow:inset 0 1px 0 #fff,var(--fx-sh-glass)}
.swipe-yes{background:none;box-shadow:none;color:var(--fx-ink-2)}
.swipe-yes span[aria-hidden]{color:#fff;background:linear-gradient(180deg,#8160F2,#6D4AE8 55%,#5F3FD9);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 26px -10px rgba(93,58,216,.75)}
@media (hover:hover) and (pointer:fine){.swipe-yes:hover,.swipe-no:hover{background:none;color:var(--fx-ink);border:0}}
.swipe-yes[aria-disabled="true"] span[aria-hidden]{opacity:.45}
.swipe:active span[aria-hidden]{transform:scale(.96)}
.swipe:focus-visible{outline:none}
.swipe:focus-visible span[aria-hidden]{outline:2px solid var(--fx-focus);outline-offset:3px}
@media(max-width:520px){.swipe{min-height:0}.swipe-no{background:none}}
.deck-count{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;min-width:0}
.deck-count.is-said{position:static;width:auto;height:auto;clip:auto;white-space:normal;display:block;text-align:center;font-size:13.5px;font-weight:600;color:var(--fx-ink-2);margin:10px 0 0}
@media(max-width:520px){.deck-count.is-said{display:block}}
.deck-hint{font-size:13px;color:var(--fx-ink-3);margin-top:12px}
.deck-hint .btn-ghost{font-size:13px;min-height:44px;padding:0 4px}
/* The pick count: a glass capsule below 3 picks, the night pill from 3. */
.step[data-step="4"] .nav.fx-dock{display:flex;justify-content:center}
.step[data-step="4"] .nav.fx-dock[hidden]{display:none}
#draftBtn{width:100%}
#draftBtn[hidden]{display:none}
#draftBtn.fx-counter{width:auto;min-height:44px;height:44px;padding:0 8px 0 16px;gap:9px;font-size:15px;color:var(--fx-ink);
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.64));box-shadow:inset 0 1px 0 #fff,var(--fx-sh-glass)}
#draftBtn.fx-counter b{display:grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:99px;color:#fff;font-size:13.5px;background:linear-gradient(135deg,#8B6DFF,#5F3FD9)}
.step[data-step="4"] .nav [data-go]{display:none}

/* C2: the end of the deck — one panel, offer rows of equal weight, no amber. */
.deck-done{text-align:left;padding:22px 20px 12px;border-radius:26px;min-height:0}
.deck-done h2{font-size:22px;line-height:1.15;letter-spacing:-.03em;font-weight:720;margin:0 0 6px;color:var(--fx-ink)}
.deck-done > p{color:var(--fx-ink-2);font-size:15px;margin:0 0 14px}
.fx-offers{display:grid;gap:4px;margin:0 -8px}
.fx-offer{display:flex;align-items:center;gap:14px;width:100%;min-height:68px;padding:12px 40px 12px 12px;border:0;border-radius:18px;background:none;text-align:left;color:var(--fx-ink);position:relative}
.fx-offer::after{content:"";position:absolute;right:12px;top:50%;width:18px;height:18px;margin-top:-9px;background:var(--fx-chev) center/100% no-repeat}
@media (hover:hover) and (pointer:fine){.fx-offer:hover{background:rgba(109,74,232,.05)}}
.fx-offer.is-tint{background:linear-gradient(180deg,rgba(241,235,255,.95),rgba(233,224,255,.8));box-shadow:inset 0 0 0 1px rgba(109,74,232,.18)}
.fx-offer-ico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--fx-violet-ink);background:rgba(109,74,232,.08)}
.fx-offer-ico svg{width:20px;height:20px}
.fx-offer b{display:block;font-size:16px;font-weight:650;letter-spacing:-.015em}
.fx-offer small{display:block;font-size:13.5px;color:var(--fx-ink-3);line-height:1.35;margin-top:2px}
.fx-offer:disabled{opacity:.6}
.fx-wait{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--fx-ink-2);margin:6px 0 10px}
.fx-wait::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--fx-violet);animation:fx-tip 1.6s ease-in-out infinite}
.thin-note{background:none;box-shadow:none;padding:0;margin:-12px 0 8px;display:block;color:var(--fx-ink-2);font-size:14.5px}
.thin-note .ico,.thin-note > div > span{display:none}
.thin-note .thin-why summary{color:var(--fx-violet-ink);font-weight:620;min-height:44px;list-style:none}
.thin-note .thin-why summary::-webkit-details-marker{display:none}

/* D1: the CV step. */
.fx-says{padding:18px 20px;margin:0 0 12px}
.fx-says ul{list-style:none;margin:0;padding:0}
.fx-says li{position:relative;padding:4px 0 4px 20px;font-size:16px;color:var(--fx-ink-2)}
.fx-says li::before{content:"";position:absolute;left:2px;top:13px;width:6px;height:6px;border-radius:50%;background:var(--fx-violet)}
.fx-says li b{color:var(--fx-ink);font-weight:650}
.fx-says[hidden]{display:none}
.quick-opt{border:0;min-height:84px;padding:16px 44px 16px 16px;color:var(--fx-ink)}
.quick-opt::after{content:"";position:absolute;right:16px;top:50%;width:18px;height:18px;margin-top:-9px;background:var(--fx-chev) center/100% no-repeat}
@media (hover:hover) and (pointer:fine){.quick-opt:hover{border:0}}
.quick-opt b{font-size:17px}
.quick-opt small{color:var(--fx-ink-3)}
.quick-ico{width:46px;height:46px;border-radius:14px;background:rgba(109,74,232,.08);color:var(--fx-violet-ink);font-size:0}
.quick-ico svg{width:22px;height:22px}
.quick-main,.quick-main:hover{color:var(--fx-ink);border:0;background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.54));box-shadow:inset 0 1px 0 rgba(255,255,255,.95),var(--fx-sh-glass)}
.quick-main small{color:var(--fx-ink-3)}
.quick-main .quick-ico{background:rgba(109,74,232,.08);color:var(--fx-violet-ink)}
/* "A bit" / "Loads": the photo is the screen's night pill. */
.step[data-route="cv"] .quick-main,.step[data-route="cv"] .quick-main:hover{color:#fff;min-height:58px;justify-content:center;padding:0 24px;border-radius:999px;
  background:linear-gradient(180deg,#2A2542 0%,#121022 55%,#0A0A12 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),var(--fx-sh-pill)}
.step[data-route="cv"] .quick-main .quick-ico,.step[data-route="cv"] .quick-main small,.step[data-route="cv"] .quick-main::after{display:none}
.step[data-route="cv"] .quick-main b{font-size:17px;color:#fff}
/* "First job": going on without a CV is the night pill, in the dock. */
.cv-skip{text-align:center}
.cv-skip-btn{width:100%}
.step[data-route="first"] .cv-skip{position:sticky;bottom:0;z-index:12;margin:6px -20px 0;padding:30px 20px max(18px,env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(248,245,255,0) 0,rgba(248,245,255,.96) 26px,rgba(247,243,255,1) 46px,rgba(247,243,255,1) 100%)}
.step[data-route="first"] .cv-skip-btn{min-height:56px;border-radius:999px;color:#fff;font-size:17px;font-weight:650;
  background:linear-gradient(180deg,#2A2542 0%,#121022 55%,#0A0A12 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),var(--fx-sh-pill)}
.step[data-route="first"] .cv-skip-btn:focus-visible{outline:none;box-shadow:0 0 0 3px #FCFBFF,0 0 0 5px #5D3AD8,var(--fx-sh-pill)}
.step[data-route="first"] .cv-skip-say{color:var(--fx-ink-3);font-size:13px}
.drop{border:1.5px dashed rgba(93,58,216,.22);border-radius:22px;background:rgba(255,255,255,.55)}
.drop.drop-second{border:0;box-shadow:inset 0 0 0 1px rgba(93,58,216,.14)}
.quick-or{color:var(--fx-ink-3)}
.quick-or[hidden]{display:none}
.quick-file{margin:2px 2px 4px;font-size:14.5px;color:var(--fx-ink-3)}
.quick-file[hidden]{display:none}
.step.is-filelink #drop:not(.has){display:none}

/* D2: the sign-off card is the form. */
.step.is-sender .fx-cvonly{display:none !important}
.fx-sender{margin:6px 0 0}
.fx-sender > h2{font-size:33px;line-height:1.04;letter-spacing:-.045em;font-weight:730;margin:0 0 12px;color:var(--fx-ink);text-wrap:balance}
@media(max-width:640px){.fx-sender > h2{font-size:30px}}
.fx-sig{padding:20px 22px 12px;margin:0 0 12px}
.fx-sig-bw{font-size:16px;color:var(--fx-ink-2);margin:0 0 4px}
.fx-line{position:relative}
.fx-line[hidden]{display:none}
.fx-line.is-new{animation:fx-rise .28s var(--fx-out) both}
@keyframes fx-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fx-line input{width:100%;min-height:50px;padding:6px 34px 6px 0;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--fx-ink);font-size:20px !important;font-weight:600;letter-spacing:-.018em}
.fx-line[data-k="name"] input{font-size:23px !important;font-weight:700;letter-spacing:-.03em}
.fx-line input::placeholder{color:var(--fx-hint);font-weight:600;opacity:1}
.fx-line input:focus{box-shadow:none;outline:none}
.fx-line::after{content:"";position:absolute;left:-6px;right:-6px;top:48px;height:2px;border-radius:2px;opacity:0;transition:opacity .2s;
  background:linear-gradient(90deg,rgba(139,109,255,0),#6D4AE8 12%,#8B6DFF 70%,rgba(139,109,255,0));box-shadow:0 0 10px rgba(139,109,255,.6)}
.fx-line:focus-within::after{opacity:1}
.fx-tickmark{position:absolute;right:0;top:13px;width:22px;height:22px;border-radius:50%;opacity:0;transform:scale(.5);transition:transform .24s var(--fx-spring),opacity .2s;
  background:var(--fx-tick) center/100% no-repeat,linear-gradient(135deg,#8B6DFF,#5F3FD9);box-shadow:0 4px 10px -3px rgba(93,58,216,.6)}
.fx-line.is-ok .fx-tickmark{opacity:1;transform:none}
.fx-under{margin:0 0 8px;font-size:13px;color:var(--fx-ink-3)}
.fx-under:empty{display:none}
.fx-domains{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}
.fx-domains[hidden]{display:none}
.fx-domains button{position:relative;height:36px;border:0;border-radius:999px;font-size:14px;font-weight:600;color:var(--fx-ink);padding:0 6px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.64));box-shadow:inset 0 1px 0 #fff,var(--fx-sh-glass)}
.fx-domains button::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;margin-top:-22px}
.fx-goes{padding:14px 18px;margin:0 0 6px}
.fx-goes[hidden]{display:none}
.fx-goes ul{list-style:none;margin:0;padding:0}
.fx-goes li{display:flex;justify-content:space-between;gap:12px;padding:8px 0 8px 16px;position:relative;font-size:15px;border-top:1px solid rgba(27,24,48,.07)}
.fx-goes li:first-child{border-top:0}
.fx-goes li::before{content:"";position:absolute;left:0;top:16px;width:6px;height:6px;border-radius:50%;background:var(--fx-violet)}
.fx-goes li b{font-weight:650;color:var(--fx-ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-goes li span{color:var(--fx-ink-3);font-size:14px;white-space:nowrap}
#cvBack{display:none}

/* E1: the letter is paper, never glass. */
.fx-revline{font-size:15px;color:var(--fx-ink-3);margin:-4px 0 16px}
.letter{border:0;border-radius:22px;background:#fff;box-shadow:var(--fx-sh-paper);margin-bottom:14px}
.letter-top{background:linear-gradient(180deg,#FBFAFF,#F6F3FF);border-bottom:1px solid rgba(27,24,48,.06);padding:12px 18px;font-size:14px;color:var(--fx-ink-2)}
.letter-top label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.letter-top .subj{display:block;width:100%;min-height:0;margin:2px 0 0;padding:2px 0;border-radius:6px;font-size:15px;line-height:1.4;overflow:hidden;resize:none;white-space:normal;overflow-wrap:anywhere;font-family:inherit;border:0;background:transparent;box-shadow:none}
.letter-top span{font-weight:650}
.letter textarea{background:#fff;box-shadow:none;border-radius:0;padding:18px;font-size:16px;line-height:1.6;color:var(--fx-ink)}
.letter textarea:focus{box-shadow:none}
/* The letter as typeset paper (board c16): paragraphs with air between them, not pre-wrapped blank lines. */
.letter-read{padding:16px 18px 18px;font-size:15.5px;line-height:1.55;color:#2A2640;cursor:text;overflow-wrap:anywhere;outline:none}
.letter-read p{margin:0}
.letter-read p+p{margin-top:.72em}
.letter-read:focus-visible{box-shadow:inset 0 0 0 2px var(--fx-focus)}
.letter:not(.is-editing) textarea#letterBody{display:none}
.letter.is-editing .letter-read{display:none}
.letter textarea#letterBody{line-height:1.55;padding:16px 18px 18px}
.subj{font-weight:650;color:var(--fx-ink);box-shadow:none;background:transparent}
.subj:focus{box-shadow:inset 0 0 0 1.5px var(--fx-violet)}
.tools{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;background:#fff;border-top:1px solid rgba(27,24,48,.06);padding:12px 18px;
  -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.tools::-webkit-scrollbar{display:none}
.tool{position:relative;flex:none;min-height:36px;padding:0 15px;border:0;font-weight:640;color:var(--fx-ink);white-space:nowrap;
  background:linear-gradient(180deg,#fff,#F8F5FF);box-shadow:inset 0 0 0 1px rgba(93,58,216,.12),0 4px 10px -8px rgba(64,40,160,.3)}
.tool::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;margin-top:-22px}
@media (hover:hover) and (pointer:fine){.tool:hover:not(:disabled){border:0}}
/* The send dock: opaque well before its first line, so no letter text shows behind "Your first 2 sends are free." */
.fx-senddock{padding-top:30px;background:linear-gradient(180deg,rgba(248,245,255,0) 0,rgba(248,245,255,.97) 14px,rgba(247,243,255,1) 24px,rgba(247,243,255,1) 100%)}
.fx-sendnote p{margin:0 0 12px;color:var(--fx-ink-2);font-size:13px;line-height:1.45;text-align:left}
.fx-sendnote p:empty{display:none}
.fx-sendnote .fx-freein{display:none;font-weight:650;color:var(--fx-ink)}
/* A short phone (375×667): the free line folds into the note, and the dock tightens, so the letter keeps the screen. */
@media (max-height:700px){
  .fx-senddock{padding-top:18px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .fx-senddock .fx-freeline{display:none}
  .fx-sendnote .fx-freein{display:inline}
  .fx-sendnote p{margin-bottom:8px;font-size:12.5px;line-height:1.4}
  .fx-senddock .sendbar #approve{min-height:52px}
}
.fx-sendnote a{color:var(--fx-violet-ink);font-weight:620;text-decoration:none;position:relative;white-space:nowrap}
.fx-sendnote a::before{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;margin-top:-22px}
.fx-freeline{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin:0 0 8px;font-size:13.5px;font-weight:600;color:var(--fx-ink-2)}
.fx-freeline:empty{display:none}
.fx-freeline::before{content:"";width:18px;height:18px;border-radius:50%;flex:none;background:var(--fx-tick) center/100% no-repeat,linear-gradient(135deg,#8B6DFF,#5F3FD9)}
.sendbar{display:grid;grid-template-columns:1fr auto;gap:2px 10px}
.sendbar #approve{grid-column:1/-1;width:100%}
.sendbar > span{display:none}
.sendbar #skip,.sendbar #stopEarly{min-height:44px;padding:0 4px;background:none;box-shadow:none;border:0;font-size:15px;font-weight:600;color:var(--fx-ink-2);text-decoration:none}
.sendbar #skip{justify-self:start}
.sendbar #stopEarly{justify-self:end}
.rev-about{margin:0 0 14px}
#revWhy{display:none}
#revNext{font-size:13.5px;color:var(--fx-ink-3);margin:0 0 14px}
#revNext:empty{display:none}
/* A phone: the letter opens straight under the title line (SPEC-v2 E1). */
@media (max-height:760px){#revNext{display:none}}
.step[data-step="6"] .cv-nudge{margin:4px 0 14px}
.cv-nudge{border:0;background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.6));box-shadow:inset 0 1px 0 #fff,var(--fx-sh-glass)}
.card.cv-nudge{padding:16px 46px 16px 18px}

/* E3: the sent moment. Green only once the send has really gone. */
.fx-sentwrap[hidden]{display:none}
.step.is-sent .fx-letteronly{display:none !important}
.fx-sent{text-align:center;padding:28px 22px 18px;margin:28px 0 12px}
.fx-sentdisc{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;position:relative;
  background:var(--fx-tick) center/56% no-repeat,linear-gradient(135deg,#14A06F,#0B7A57);box-shadow:0 14px 28px -12px rgba(11,122,87,.7);animation:fx-pop .42s var(--fx-spring) both}
.fx-sentdisc::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px rgba(11,122,87,.35);animation:fx-halo .9s var(--fx-out) .2s both}
@keyframes fx-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes fx-halo{from{transform:scale(1);opacity:1}to{transform:scale(1.4);opacity:0}}
.fx-sent h2{font-size:24px;letter-spacing:-.035em;font-weight:730;margin:0 0 6px;color:var(--fx-ink);text-wrap:balance}
.fx-sent p{margin:0;color:var(--fx-ink-2);font-size:15.5px;overflow-wrap:anywhere}
.fx-sentnote{display:flex;gap:10px;align-items:flex-start;text-align:left;margin:16px 0 0 !important;padding-top:14px;border-top:1px solid rgba(27,24,48,.08);font-size:15px}
.fx-sentnote:empty{display:none}
.fx-sentnote::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;margin-top:1px;background:var(--fx-tick) center/100% no-repeat,linear-gradient(135deg,#8B6DFF,#5F3FD9)}
.fx-sentnote b{color:var(--fx-ink)}
.fx-nextrow{display:flex;align-items:center;gap:14px;width:100%;padding:14px 44px 14px 14px;border:0;text-align:left;color:var(--fx-ink);border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.54));box-shadow:inset 0 1px 0 #fff,var(--fx-sh-glass);position:relative}
.fx-nextrow[hidden]{display:none}
.fx-nextrow::after{content:"";position:absolute;right:16px;top:50%;width:18px;height:18px;margin-top:-9px;background:var(--fx-chev) center/100% no-repeat}
.fx-nextrow b{display:block;font-size:16.5px;font-weight:650}
.fx-nextrow small{display:block;font-size:13.5px;color:var(--fx-ink-3)}
.fx-errcard{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;margin:20px 0 12px}
.fx-errcard[hidden]{display:none}
.fx-errcard::before{content:"";flex:none;width:8px;height:8px;margin-top:8px;border-radius:50%;background:var(--fx-err)}
.fx-errcard p{margin:0 0 10px;color:var(--fx-ink-2)}
.fx-errcard b{color:var(--fx-ink)}

/* F: the done screen. */
.fx-sum{list-style:none;margin:0;padding:4px 20px}
.fx-sum li{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-top:1px solid rgba(27,24,48,.07);font-size:16px;color:var(--fx-ink-2);line-height:1.45}
.fx-sum li:first-child{border-top:0}
.fx-sum li b{color:var(--fx-ink);font-weight:650}
.fx-sum li::before{content:"";flex:none;width:24px;height:24px;border-radius:50%;margin-top:-1px;background:var(--fx-tick) center/100% no-repeat,linear-gradient(135deg,#8B6DFF,#5F3FD9)}
.fx-sum li.is-sent::before{background:var(--fx-tick) center/100% no-repeat,linear-gradient(135deg,#14A06F,#0B7A57)}
.fx-sum li.is-wait::before{background:none;box-shadow:inset 0 0 0 1.5px var(--fx-ink-4)}
.fx-summary{padding:0;margin:0 0 12px}
.fx-offercard{padding:18px 20px;margin:0 0 12px}
.fx-offercard[hidden]{display:none}
.fx-offercard h2{font-size:18px;letter-spacing:-.02em;font-weight:700;margin:0 0 4px;color:var(--fx-ink)}
.fx-offercard p{margin:0;color:var(--fx-ink-2);font-size:15px}
.fx-allowin{margin:14px 0 0;padding:14px 0 0;border-top:1px solid rgba(27,24,48,.08)}
.fx-allowin .allow-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 10px;font-size:14.5px;color:var(--fx-ink-2)}
.fx-allowin .allow-row b{font-size:16.5px;font-weight:700;color:var(--fx-ink)}
.fx-allowin .allow-bar{height:6px;border-radius:99px;background:rgba(27,24,48,.08);overflow:hidden}
.fx-allowin .allow-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#1B1830,#6D4AE8)}
.fx-allowin p{margin:10px 0 0;font-size:14.5px;line-height:1.45}
.allow{padding:18px 20px;margin:0 0 12px}
.allow .allow-row{color:var(--fx-ink-2);font-size:15px}
.allow .allow-row b{font-size:17px;font-weight:700;color:var(--fx-ink)}
.allow .allow-bar{height:6px;background:rgba(27,24,48,.08)}
.allow .allow-bar i{background:linear-gradient(90deg,#1B1830,#6D4AE8)}
.allow>.muted{font-size:15px;color:var(--fx-ink-2);line-height:1.5}
.allow .note{background:rgba(109,74,232,.05);box-shadow:none}
.fx-nextcard{padding:18px 20px;margin:0 0 12px}
.fx-nextcard[hidden]{display:none}
.fx-nextcard p:not(.fx-kick){margin:0;color:var(--fx-ink-2);font-size:16px}
.fx-alert{display:flex;align-items:center;gap:16px;padding:16px 18px 16px 20px;margin:0 0 12px}
.fx-alert b{display:block;font-size:16.5px;font-weight:650;color:var(--fx-ink)}
.fx-alert small{display:block;font-size:13.5px;color:var(--fx-ink-3);line-height:1.4;margin-top:2px}
.fx-alerttext{flex:1}
.fx-switch{position:relative;flex:none;width:52px;height:32px;min-height:0;border:0;border-radius:999px;padding:0;background:rgba(27,24,48,.5);box-shadow:inset 0 0 0 1.5px #7F79A0;transition:background .2s}
.fx-switch::before{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;margin-top:-22px}
.fx-switch::after{content:"";position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(27,24,48,.25);transition:transform .2s var(--fx-out)}
.fx-switch[aria-checked="true"]{background:linear-gradient(90deg,#6D4AE8,#5F3FD9);box-shadow:none}
.fx-switch[aria-checked="true"]::after{transform:translateX(20px)}
.fx-alertsaid{font-size:13.5px;color:var(--fx-ink-2);margin:-4px 2px 12px}
.fx-alertsaid:empty{display:none}
.fx-alertmail{margin:-4px 0 12px}
.fx-alertmail[hidden]{display:none}
.fx-each{margin:0 0 12px}
/* A row to open, not a stray violet word: glass, the count, and a chevron that turns. */
.fx-each summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px;list-style:none;
  border-radius:18px;background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(109,74,232,.14);color:var(--fx-ink);font-weight:620;cursor:pointer}
.fx-each summary::-webkit-details-marker{display:none}
.fx-each summary::after{content:"";flex:none;width:8px;height:8px;margin-top:-4px;border:solid var(--fx-violet-ink);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s var(--fx-out)}
.fx-each[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.fx-eachn{color:var(--fx-ink-3);font-weight:560}
.fx-each .card{margin:8px 0 0}
#again{display:flex;margin:4px auto 0;background:none;border:0;box-shadow:none;color:var(--fx-violet-ink);font-weight:620;font-size:15px;min-height:44px}
.done-row .s-sent{color:var(--fx-good)}

/* ---- the paywall sheet (E2 / E2b) ---- */
.sheet-back{background:rgba(27,24,48,.20)}
.sheet{max-width:480px;border:0;border-radius:34px 34px 0 0;padding:10px 20px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(252,251,255,.97));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:var(--fx-sh-sheet);transform:translateY(100%);transition:transform .38s var(--fx-out)}
.sheet-back.on .sheet{transform:none}
.sheet-grip{width:38px;height:5px;background:rgba(27,24,48,.14);margin:0 auto 12px}
.sheet-head{position:relative;overflow:hidden;color:#fff;border-radius:28px;padding:18px 20px;margin:0 0 14px;display:flex;align-items:center;gap:16px;
  background:linear-gradient(160deg,rgba(44,38,74,.94) 0%,rgba(20,17,36,.96) 45%,rgba(10,10,18,.97) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.07),var(--fx-sh-dark)}
.sheet-head::before{content:"";position:absolute;width:300px;height:300px;right:-110px;top:-160px;border-radius:50%;background:radial-gradient(closest-side,rgba(139,109,255,.6),rgba(139,109,255,0))}
.sheet-head > *{position:relative;z-index:1}
.sheet-letters{flex:none;width:62px;height:56px;color:#D6CBFF}
@media(max-height:700px){.sheet-letters{display:none}}
.sheet-headtext{min-width:0;flex:1}
.sheet-kick{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em;color:#E4DCFF;margin:0 0 6px}
.sheet-kick:empty{display:none}
.sheet-prog{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 10px;padding:0;list-style:none}
.sheet-prog[hidden]{display:none}
.sheet-prog i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2)}
.sheet-prog i.on{background:#fff;box-shadow:0 0 8px rgba(214,203,255,.8)}
.sheet-title{margin:0;color:#fff;font-weight:760}
.sheet-title .st-lead{display:block;font-size:20px;line-height:1.2;font-weight:650;letter-spacing:-.02em;color:#E4DCFF}
.sheet-title .st-price{display:block;font-size:34px;line-height:1.05;letter-spacing:-.045em;white-space:nowrap}
.sheet-title .st-price:only-child{font-size:28px;white-space:normal;text-wrap:balance}
.sheet-each{margin:6px 0 0;font-size:13px;font-weight:600;color:#CFC4FF}
.sheet-each:empty{display:none}
.sheet-lines li{padding:5px 0 5px 34px;font-size:15.5px;color:var(--fx-ink)}
.sheet-lines li::before{content:"";width:22px;height:22px;top:5px;background:var(--fx-tick) center/100% no-repeat,linear-gradient(135deg,#8B6DFF,#5F3FD9)}
.sheet-consent{text-align:left;color:var(--fx-ink-2);font-size:12.5px;line-height:1.48;margin:0 0 12px}
.sheet-pay{width:100%;min-height:56px}
.sheet-alt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;min-height:56px;margin:4px 0 4px;padding:6px 0;border:0;background:none;color:#4A2BC2;font-size:15px;font-weight:640;text-decoration:none}
.sheet-alt .fx-renew{font-size:12.5px;font-weight:400;color:var(--fx-ink-3)}
.sheet-fine{color:var(--fx-ink-2);font-size:13px;margin:6px 0 4px}
.sheet-foot{border-top:1px solid rgba(27,24,48,.08);margin-top:10px;padding-top:2px}
.sheet-foot #payCode{font-size:13.5px;font-weight:560;color:var(--fx-ink-3);text-decoration:none}
.sheet-foot #payLater{font-size:15px;font-weight:620;color:var(--fx-ink-2);text-decoration:none;margin-left:auto}
.sheet-foot #payCode[hidden]{display:none}
.sheet-foot #payCode[hidden] + #payApps[hidden] + #payLater{margin:0 auto}
.sheet-view[hidden]{display:none}
.sheet-backto{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;border:0;background:none;color:var(--fx-violet-ink);font-size:15px;font-weight:640}
.sheet-widen-btn{border-radius:999px;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:6px;row-gap:1px;padding:7px 20px;line-height:1.25}
.sheet-widen-btn b{font-size:15px;font-weight:650}
.sheet-widen-sub{font-size:12.5px;font-weight:500;color:var(--fx-ink-3)}
@media(min-width:700px){.sheet{border-radius:34px;padding:22px 26px}}
@media(max-height:700px){
  .sheet{padding-top:8px}.sheet-grip{margin-bottom:8px}
  .sheet-head{padding:12px 16px;margin-bottom:10px;border-radius:24px}.sheet-kick{margin-bottom:4px;font-size:14px}.sheet-prog{margin-bottom:6px}
  .sheet-title .st-lead{font-size:17px}.sheet-title .st-price{font-size:28px}.sheet-each{margin-top:4px}
  .sheet-lines{margin-bottom:10px}.sheet-lines li{padding-top:2px;padding-bottom:2px;font-size:14.5px;line-height:1.35}.sheet-lines li::before{top:2px;width:20px;height:20px}
  .sheet-widen{margin-bottom:10px;padding-bottom:10px}.sheet-widen .muted{display:none}.sheet-widen-btn{min-height:44px}
  .sheet-consent{margin-bottom:8px;font-size:12px}.sheet-pay{min-height:52px}.sheet-alt{min-height:48px;margin:2px 0}.sheet-fine{margin:2px 0}.sheet-foot{margin-top:4px}
}

/* ---- toast, footer ---- */
#toast{border:0;background:linear-gradient(180deg,#2A2542,#0A0A12);color:#fff;box-shadow:var(--fx-sh-pill)}
footer{border-top:1px solid rgba(27,24,48,.08);color:var(--fx-ink-3)}
footer a{color:var(--fx-ink-3)}
body.fx-immersive > footer{display:none}

/* ---- B6 building, for a quiz entry (app.js setupBuild): an orb, the legend, answers ticking ---- */
.step[data-step="3"].is-quiz{text-align:center}
.step[data-step="3"].is-quiz #searchHead{margin-top:18px;font-size:30px;letter-spacing:-.035em}
.step[data-step="3"].is-quiz .fx-notquiz{display:none}
.fx-orb{position:relative;width:min(260px,68vw);aspect-ratio:1;margin:30px auto 0;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.95),rgba(243,238,255,.72) 62%,rgba(231,222,255,.6));
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(93,58,216,.1),0 30px 60px -30px rgba(64,40,160,.45)}
.fx-orb::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(93,58,216,.16) 1px,transparent 1.4px) 0 0/16px 16px;
  -webkit-mask-image:radial-gradient(circle,#000 55%,transparent 72%);mask-image:radial-gradient(circle,#000 55%,transparent 72%)}
.fx-orb i{position:absolute;display:block}
.fx-orb-ring{inset:17%;border-radius:50%;border:1.5px dashed rgba(93,58,216,.45)}
.fx-orb-you{left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 4px rgba(109,74,232,.85),0 0 18px 6px rgba(139,109,255,.55)}
.fx-orb-lens{display:none !important}
.fx-orb.has-centre .fx-orb-lens{display:block !important;left:24%;top:56%;width:22%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.9),rgba(214,203,255,.7));box-shadow:0 0 0 1px rgba(93,58,216,.25),0 8px 18px -8px rgba(64,40,160,.5)}
/* A feathered conic light (SPEC-v2 §4): clear for 230°, ramping to α.38 at 352°, faded towards the centre and the rim. */
.fx-orb-sweep{inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(139,109,255,0) 0deg,rgba(139,109,255,0) 220deg,rgba(139,109,255,.36) 342deg,rgba(139,109,255,0) 360deg);
  -webkit-mask-image:radial-gradient(circle,transparent 6%,#000 26%,#000 58%,transparent 71%);mask-image:radial-gradient(circle,transparent 6%,#000 26%,#000 58%,transparent 71%);
  will-change:transform;animation:fx-sweep 3.6s linear infinite}
@keyframes fx-sweep{to{transform:rotate(360deg)}}
/* A business dot, as each place is confirmed (app.js orbDots). */
.fx-orb-dot{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#6D4AE8;
  box-shadow:0 0 0 3px rgba(139,109,255,.18),0 0 10px rgba(139,109,255,.7);animation:fx-dot .28s var(--fx-spring) both}
@keyframes fx-dot{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.fx-orb-dot.is-faint{width:6px;height:6px;margin:-3px 0 0 -3px;background:rgba(109,74,232,.38);box-shadow:none}
.step.on[data-step="3"].is-quiz > .fx-orb{margin-top:auto}
.step.on[data-step="3"].is-quiz{display:flex;flex-direction:column;min-height:calc(100vh - 52px);min-height:calc(100svh - 52px)}
.fx-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 16px;margin:12px 0 0;font-size:11.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--fx-ink-3)}
.fx-legend span{display:inline-flex;align-items:center;gap:6px}
.fx-legend .is-ring::before{content:"";width:14px;height:0;border-top:1.5px dashed rgba(93,58,216,.6)}
.fx-legend .is-lens::before{content:"";width:9px;height:9px;border-radius:50%;background:rgba(214,203,255,.9);box-shadow:0 0 0 1px rgba(93,58,216,.35)}
.fx-buildlive{margin:6px 0 0;font-size:15px;color:var(--fx-ink-2)}
.fx-resolve{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;margin:18px 0 0;padding:0}
.fx-resolve li{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px 0 10px;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--fx-ink-3);
  background:rgba(255,255,255,.72);box-shadow:var(--fx-sh-glass);transition:color .3s var(--fx-out)}
.fx-rt{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(93,58,216,.28);transition:transform .3s var(--fx-spring),background .3s}
.fx-resolve li[data-state="done"]{color:var(--fx-ink)}
.fx-resolve li[data-state="done"] .fx-rt{box-shadow:0 4px 10px -3px rgba(93,58,216,.55);
  background:var(--fx-tick) center/100% no-repeat,linear-gradient(135deg,#8B6DFF,#5F3FD9);transform:scale(1.06)}
.fx-buildnote{margin:12px auto 0;max-width:30em;font-size:14px;color:var(--fx-ink-2)}
.step[data-step="3"].is-quiz .fx-buildfoot{margin:auto auto 0;padding:26px 0 max(20px,env(safe-area-inset-bottom));max-width:34ch;font-size:13.5px;color:var(--fx-ink-3);text-wrap:balance}
@media (max-height:700px){.fx-orb{width:min(200px,56vw);margin-top:18px}}

/* ---- reduced motion: still fields, crossfades only (SPEC-v2 §4) ---- */
@media (prefers-reduced-motion: reduce){
  .fx-field i,.progress #bar::after,.fx-sentdisc,.fx-sentdisc::after,.fx-line.is-new,.fx-wait::before,.fx-orb-sweep{animation:none !important}
  .fx-orb-sweep{display:none}
  .fx-orb-dot{animation:none !important}
  /* The radar still shows it is working, with no movement: the ring and the
     faint points fade gently in and out (owner, 9 Oct 2026: a still radar
     reads as frozen). Opacity only, slow, as SPEC-v2 §4 allows. */
  .fx-orb-ring,.fx-orb-dot.is-faint{animation:fx-breathe 2.4s ease-in-out infinite alternate !important}
  .fx-orb-dot.is-faint:nth-of-type(2n){animation-delay:-1.2s !important}
  .fx-rt{transition:none !important}
  .step{animation:fx-fade .16s linear both !important}
  .sheet,.fx-switch::after,.progress #bar,.fx-field i{transition-property:opacity !important;transition-duration:.16s !important}
  .fx-field2{transition-duration:.2s !important}
  .sheet{transform:none}
}
@keyframes fx-fade{from{opacity:0}to{opacity:1}}
@keyframes fx-breathe{from{opacity:.35}to{opacity:1}}
@media print{.fx-field,header.fx-top,.fx-dock{display:none !important}}

/* Walk-ins (owner decision, 6 Oct 2026; PROJECT.md "Walk-ins"): the same glass
   card, "Walk in" on its kind row and the register's address under the name —
   never taller than an emailable card, so ✕ and ✓ clear the dock on a small
   phone. The one honest tip is on the letter, the done screen and the hub.
   Their letter is downloaded to hand in; the done list marks it "To hand in". */
/* The chip reads beside the violet category dot: an ink ring on white, not a faint grey fill. */
.deck-walk{padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1.5px rgba(27,24,48,.28);color:var(--fx-ink);font-size:12.5px;font-weight:650}
/* What "Walk in" means, first under the card's facts, set like a reason with an arrow ring instead of a tick. */
.deck-why li.deck-whywalk::before{content:"→";display:grid;place-items:center;font-size:13px;font-weight:700;line-height:1;color:var(--fx-violet-ink);
  background:rgba(255,255,255,.9);box-shadow:inset 0 0 0 1.5px var(--fx-violet-ink)}
.deck-addr{margin:-2px 0 6px;font-size:14px;line-height:1.4;color:var(--fx-ink-2)}
/* On the letter's header, its own line, flush with "To …" and the address. */
.fx-walktag{display:table;margin:6px 0 0;padding:1px 8px;border-radius:999px;background:rgba(27,24,48,.05);
  color:var(--fx-ink-2);font-size:12px;font-weight:600 !important}
.fx-walkaddr{display:block;margin-top:3px;font-size:13px;font-weight:400 !important;color:var(--fx-ink-3) !important}
.fx-walktip{display:block;margin-top:6px;color:var(--fx-ink-3)}
/* The smallest phones: the letter gets the room; the tip is on the done screen and the hub. */
@media (max-height:700px){.fx-walktip{display:none}}
.done-row .s-hand{color:var(--fx-violet-ink)}

/* The quiz path's CV step (owner, 8 Oct 2026): upload or carry on, nothing else. */
.cv-simple{display:flex;flex-direction:column;gap:0;margin:22px 0 0}
.cv-simple[hidden]{display:none}
.step.is-simple:not(.is-sender) :is(#cvSays,#cvQuick,#cvSkip,#noCvCard,#studioCard,#pasteCard,#drop){display:none !important}
.cv-simple-up{width:100%;min-height:58px;border:0;border-radius:999px;color:#fff;font:inherit;font-size:17px;font-weight:650;cursor:pointer;
  background:linear-gradient(180deg,#2A2542 0%,#121022 55%,#0A0A12 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),var(--fx-sh-pill)}
.cv-simple-up:focus-visible{outline:none;box-shadow:0 0 0 3px #FCFBFF,0 0 0 5px #5D3AD8,var(--fx-sh-pill)}
.cv-simple-up:disabled{opacity:.75;cursor:progress}
.cv-simple-skip{width:100%;min-height:54px;margin-top:22px;border-radius:999px;font-size:16px}
.cv-simple-say{margin:10px auto 0;max-width:40ch;text-align:center;font-size:13.5px;line-height:1.45;color:var(--fx-ink-2)}