/* tool.css
   Welcome hero, the three-up, the twelve-question card, the calculating screen.
   Part of The 12-Point Retirement Checkup - Heritage Edition.
   Load order matters: see the <link> block in any page. */

/* ---------- Hero ---------- */
.hero{padding:104px 0 88px;text-align:center}
.hero h1{
  font-size:clamp(28px,4.9vw,50px);max-width:820px;margin:0 auto 24px;
  line-height:1.16;
}
/* A beat between the statement and the question */
.hero h1 #w-title-b{display:inline-block;margin-top:.3em}
.hero .cta-row{margin-top:38px;display:flex;gap:30px;justify-content:center;align-items:center;flex-wrap:wrap}
/* Answers "what will this cost me" right under the button — the question
   that stops people. Set larger and darker than .tiny: at 13.5px in the
   muted grey it measured 4.94:1, thin for an audience that skews 55-75. */
.reassure{
  margin-top:24px;letter-spacing:.02em;
  font-size:16px;color:#4A5A56;line-height:1.55;
  max-width:520px;margin-inline:auto;text-wrap:balance;
}
@media(max-width:600px){.reassure{font-size:15.5px}}

/* ---------- Three-up: brass rules, serif numerals ---------- */
/* Four figures across: time, scope, output, benefit. The set descends
   3 - 12 - 1 - 0 and lands on zero, which is the line that sells it. */
.threeup{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:60px;text-align:center}
.threeup>div{padding:0 20px;border-left:1px solid var(--hair)}
.threeup>div:first-child{border-left:none}
.threeup .big{
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(44px,5vw,60px);font-weight:600;letter-spacing:-.02em;line-height:1;
  color:var(--pine);
}
.threeup .big.blue{color:var(--brass)}
/* Darker than --ink-soft, which measured 4.94:1 — thin at this size for an
   audience that skews 55-75. */
.threeup p{color:#4A5A56;font-size:16.5px;margin-top:14px;line-height:1.55;text-wrap:balance}
@media(max-width:600px){.threeup p{font-size:16px}}
/* Two-by-two before it gets cramped — shrinking the type is not an option
   for this audience. */
@media(max-width:900px){
  .threeup{grid-template-columns:repeat(2,1fr);gap:36px 0}
  .threeup>div:nth-child(odd){border-left:none}
}
@media(max-width:600px){
  .threeup{grid-template-columns:1fr;gap:40px}
  .threeup>div{border-left:none;padding:0}
}

/* ---------- Quiz ---------- */
.quizhead{text-align:center;margin-bottom:8px}
/* One mark per question. Turns "9 of 12" into something you can see at a
   glance, which is what keeps people going in the back half. The old brass
   bar sat directly above this saying the same thing; two indicators stacked
   on each other read as clutter, so the rail is the only one left. */
.steprail{display:flex;justify-content:center;gap:6px;max-width:520px;margin:0 auto 26px}
.step{
  height:4px;flex:1 1 0;max-width:38px;border-radius:2px;background:var(--hair);
  transition:background .3s ease,transform .3s cubic-bezier(.22,1,.36,1);
}
/* One colour filling up, not two alternating. Completed and current marks
   are both pine, so the rail reads as a bar that grows — height marks where
   you are, colour marks how far you've come. Two colours had people reading
   finished marks as reverted. */
.step.done{background:var(--pine)}
.step.now{background:var(--pine);transform:scaleY(1.9)}

/* Numeral in the option dot. Muted and identical on every option so it
   reads as a shortcut, never as a ranking. */
.opt .dot{
  display:flex;align-items:center;justify-content:center;
  font-family:"Libre Franklin",sans-serif;font-size:15px;font-weight:700;
  color:var(--pine);letter-spacing:0;
}
.opt:hover .dot,.opt:focus-visible .dot{color:var(--paper)}
.opt:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
/* Their earlier answer, shown when they navigate back to a question. Marked
   but not filled — filled is reserved for the moment of choosing. */
.opt.chosen{border-color:var(--brass);border-left-color:var(--brass);background:#FFFCF4}
.opt.chosen .dot{border-color:var(--brass);background:var(--brass);color:var(--paper)}
/* Chosen: hold for a beat so the click registers before the next question. */
.opt.picked{
  border-color:var(--brass);border-left-color:var(--brass);
  background:var(--brass);color:var(--paper);
}
.opt.picked .dot{border-color:var(--paper);background:transparent;color:var(--paper);box-shadow:none}
.qcard.turning{opacity:0;transform:translateY(10px)}
.qcard{transition:opacity .18s ease,transform .18s cubic-bezier(.22,1,.36,1)}
/* The count is the display element rather than a caption above one. Same
   information, but it occupies the space instead of floating in it. */
.qcount{text-align:center;margin-bottom:22px;line-height:1}
.qcount .n{
  display:block;font-family:"Fraunces",Georgia,serif;color:var(--pine);
  font-size:clamp(66px,9vw,104px);font-weight:600;letter-spacing:-.02em;
  line-height:.88;font-variant-numeric:lining-nums;
}
.qcount .of{
  display:block;margin-top:10px;font-size:13.5px;color:#4A5A56;
  font-weight:600;letter-spacing:.19em;text-transform:uppercase;
}
/* Anchored to a fixed offset rather than centred in the viewport: centring
   moved the whole block up and down as question length changed, so the
   sequence bounced from one question to the next. */
.qcard{max-width:680px;margin:0 auto;padding-top:0;min-height:52vh}
.qarea{
  font-size:13.5px;font-weight:700;color:var(--brass-text);letter-spacing:.17em;
  text-transform:uppercase;margin-bottom:18px;text-align:center;
}
.qprompt{
  font-family:"Fraunces",Georgia,serif;color:var(--pine);
  font-size:clamp(23px,3.1vw,32px);font-weight:600;letter-spacing:-.01em;
  line-height:1.24;text-align:center;margin-bottom:18px;text-wrap:balance;
}
/* The plain-English note for the area. Already written for every question —
   shown here so it can improve the answer, not just explain it afterwards. */
/* Sits between a 23-32px Fraunces question and 16.5px answer options —
   deliberately under both. The colour, not the size, was the problem: at
   --ink-soft this was 4.94:1, the faintest body text on the quiz screen and
   three lines of real reading. */
.qinfo{
  font-size:16px;line-height:1.6;color:#4A5A56;text-align:center;
  max-width:var(--prose);margin:0 auto 34px;text-wrap:balance;
}
.qinfo[hidden]{display:none}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{
  appearance:none;font:inherit;text-align:left;cursor:pointer;
  background:var(--paper);border:1px solid var(--hair);border-left:3px solid transparent;
  border-radius:var(--radius);
  padding:19px 22px;font-size:16.5px;color:var(--ink);font-weight:400;line-height:1.5;
  transition:border-color .15s ease,background .15s ease,transform .08s ease;
  display:flex;align-items:center;gap:15px;
}
.opt:hover{border-color:var(--brass);border-left-color:var(--brass);background:#FFFCF4}
.opt:active{transform:translateY(1px)}
.opt .dot{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--hair);flex:none;transition:.15s}
.opt:hover .dot{border-color:var(--brass);background:var(--brass);box-shadow:inset 0 0 0 3px var(--paper)}
/* Shown only when the tool is live but not connected — the one failure that
   is otherwise completely silent. Never shown to prospects in demo mode. */
.notwired{
  background:var(--sig-red);color:var(--cream);text-align:center;
  font-family:"Libre Franklin",sans-serif;font-size:14px;font-weight:600;
  padding:12px 20px;line-height:1.5;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.backrow{max-width:680px;margin:36px auto 0;text-align:center;display:flex;gap:14px;justify-content:center}
/* Only shown when there is already an answer ahead — reviewing a previous
   question shouldn't cost someone the rest of their answers. */
.backbtn.fwd::before{content:""}
.backbtn.fwd::after{content:"\00a0\00a0\2192"}
@media(max-width:600px){.backrow{flex-direction:column;align-items:stretch}}
/* Outlined, not filled: Back is a recovery action, so it should read as a
   control without competing with the four answers, which are the only
   filled elements on this screen. Pine on cream measures 8.9:1. */
.backbtn{
  background:none;border:1.5px solid var(--pine);color:var(--pine);
  font-family:"Libre Franklin",sans-serif;border-radius:var(--radius);
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  padding:13px 26px;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.backbtn:hover{background:var(--pine);color:var(--cream);border-color:var(--pine)}
.backbtn:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.backbtn::before{content:"\2190\00a0\00a0"}

/* ---------- Calculating ---------- */
/* Same pine as the gate masthead and the score panel, so the flow doesn't
   break for a second and a half. The twelve marks are the quiz's own step
   rail finishing — a spinner would say "waiting on a server", and nothing
   here is being fetched. */
#screen-calc{
  background:var(--pine-panel);color:var(--cream);
  text-align:center;padding:120px 24px;min-height:70vh;display:none;
}
#screen-calc.active{display:flex;flex-direction:column;justify-content:center}
.calc-inner{max-width:520px;margin:0 auto}
.calc-eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass-lite);margin-bottom:28px;
}
.calc-rail{display:flex;justify-content:center;gap:6px;margin-bottom:30px}
.calc-rail span{
  height:4px;flex:1 1 0;max-width:34px;border-radius:2px;
  background:rgba(230,227,214,.22);
}
.calc-rail span.on{background:var(--brass-lite)}
.calc-h{
  font-family:"Fraunces",Georgia,serif;color:var(--on-pine);
  font-size:clamp(21px,3vw,26px);font-weight:600;line-height:1.3;text-wrap:balance;
}
@media(max-width:600px){
  #screen-calc{padding:90px 20px}
  .calc-rail{gap:4px}
  .calc-rail span{max-width:22px}
}