/* =============================================================================
   The planning tool — v2.

   What changed and why:
   The tool used to be set as hairline rules and underlined lines of type. That
   reads as a printed form, and a printed form is a thing you fill in because
   you have to. On a phone it gave no signal that the lines were tappable and
   no comfortable target to hit. This version keeps the plum/green/paper palette
   and both faces exactly as they are, and changes only the things that were
   costing people the finish: answers are now soft, generous, obviously tappable
   surfaces; progress is legible; the action bar follows you down the card; and
   the plan reads as something you would send to someone rather than a receipt.
   ========================================================================== */

.a-wrap{ --a-r:18px; --a-gap:.6rem }

/* --------------------------------------------------------------- the top --*/
.intro{padding:clamp(2rem,4.5vw,3.25rem) 0 clamp(1.25rem,2.5vw,1.75rem)}
/* One centred column for the whole tool: the page is a thing you do, not a
   page with a widget parked on the left of it. */
.intro-in-wrap,.stage .shell,.after-fig .shell{max-width:54rem}
.intro-in h1{max-width:20ch;text-wrap:balance;font-size:clamp(1.95rem,5.4vw,3rem)}
.intro-lede{margin-top:var(--s2);font-size:clamp(1.05rem,2.4vw,1.22rem);line-height:1.55;max-width:50ch;color:var(--slate)}

/* Three short promises, above the tool. These are the objections people have
   before they start, answered before they can form them. */
.assure{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:var(--s3);margin-bottom:0;padding:0;list-style:none;font-size:.92rem}
.assure li{
  display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .85rem;
  border-radius:999px;border:1px solid var(--edge);background:var(--lift);
  font-size:.92rem;color:var(--plum);
}
.assure li::before{
  content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--green);flex:none;
}
.intro-meta{
  color:var(--slate);max-width:54ch;font-size:.97rem;
  border-left:2px solid var(--edge);padding-left:var(--s3);margin:0 0 var(--s5);
}
.intro-meta b{display:block;font-weight:600;font-style:normal;color:var(--plum);margin-bottom:.25rem;font-family:var(--display)}

/* The explainer figure is 960x400 of dark artwork. On a phone it pushed the
   first question two screens down, so it now sits below the tool. */
.intro .fig-art{display:none}
.after-fig{margin:0}
.after-fig .fig-art{margin-top:0}

/* ------------------------------------------------------------- the card --*/
.stage{padding:0 0 clamp(2.5rem,5vw,4rem)}
.card{
  max-width:44rem;margin-inline:auto;background:var(--lift);border:1px solid var(--edge);
  border-radius:var(--r-xl);box-shadow:var(--shadow-md);
  padding:clamp(1.15rem,4vw,2.4rem);
  position:relative;
}
.card.is-plan{max-width:50rem}

@media (max-width:40rem){
  .intro .intro-meta{display:none}
  .card{
    /* Full-bleed on a phone: the gutter costs 2rem of a 375px screen and the
       card is the whole point of the page. */
    margin-inline:calc(var(--gutter) * -1);border-radius:0;border-left:0;border-right:0;
    padding:1.15rem var(--gutter) 0;box-shadow:none;
  }
}

/* Keeps the page from jumping as questions of different lengths swap in. */
.card.is-q{min-height:min(30rem,72vh)}

.q[data-enter],.plan[data-enter]{opacity:0;transform:translateY(10px)}
.q,.plan{opacity:1;transform:none;transition:opacity .28s ease,transform .28s ease}

/* ------------------------------------------------------------ progress --*/
.prog{margin-bottom:clamp(1.25rem,3vw,1.9rem)}
.prog-top{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin-bottom:.6rem;font-size:.9rem;color:var(--slate);
}
.prog-n{font-family:var(--display);font-weight:600;color:var(--plum)}
.prog-n b{font-weight:700}
.prog-left{font-variant-numeric:tabular-nums;text-align:right}
.prog-rail{display:block;height:6px;border-radius:999px;background:var(--plum-soft);overflow:hidden}
.prog-fill{display:block;height:100%;border-radius:999px;background:var(--green);transition:width .45s cubic-bezier(.4,0,.2,1)}

/* ------------------------------------------------------------ questions --*/
.card legend{
  display:block;padding:0;font-size:clamp(1.35rem,3.4vw,1.85rem);font-weight:700;
  line-height:1.2;letter-spacing:-.025em;text-indent:0;max-width:24ch;
  margin-bottom:.65rem;color:var(--plum);font-family:var(--display);text-wrap:balance;
}
.q-help{color:var(--slate);max-width:52ch;margin-bottom:clamp(1.1rem,2.5vw,1.6rem);font-size:.98rem;line-height:1.55}

.opts{display:grid;gap:var(--a-gap,.6rem);margin-bottom:1.1rem}
/* Short answer sets sit two-up once there is room for them. */
@media (min-width:46rem){
  .opts[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.q-note{
  color:var(--slate);font-size:.92rem;max-width:52ch;margin:0 0 .5rem;
}
.q-note a{color:var(--plum)}

/* --------------------------------------------------------- action bar ----*/
/* Sticks to the bottom of the viewport while the card is in view, so the way
   forward is never something you have to scroll to find. */
.bar-act{
  position:sticky;bottom:0;z-index:5;
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  padding:.85rem 0 calc(.85rem + env(safe-area-inset-bottom));
  margin-top:.5rem;background:var(--lift);
  box-shadow:0 -14px 18px -14px rgba(48,0,57,.16);
}
.bar-act::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--edge);
}
@media (max-width:40rem){
  .bar-act{
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
  }
}

.act-next{
  font-family:var(--display);font-size:1.02rem;font-weight:700;letter-spacing:-.01em;
  background:var(--green);color:#052B18;border:1.5px solid var(--green);
  border-radius:999px;padding:.85rem 1.6rem;cursor:pointer;min-height:3rem;
  box-shadow:var(--shadow-sm);transition:background .15s,transform .15s,box-shadow .15s;
  order:2;margin-left:auto;
}
.act-next:hover:not(:disabled){background:var(--green-deep);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.act-next:disabled{background:var(--plum-soft);border-color:var(--edge);color:var(--slate);box-shadow:none;cursor:default}
.act-back{
  font-family:var(--display);font-size:.98rem;font-weight:600;color:var(--slate);
  background:transparent;border:1.5px solid var(--edge);border-radius:999px;
  padding:.72rem 1.15rem;cursor:pointer;min-height:3rem;order:1;
  transition:border-color .15s,color .15s,background .15s;
}
.act-back:hover{border-color:var(--plum);color:var(--plum);background:var(--plum-tint)}
.act-hint{order:3;flex-basis:100%;color:var(--slate);font-size:.88rem;margin:0}
@media (min-width:40rem){
  .act-hint{flex-basis:auto;order:2;margin-left:auto}
  .act-next{order:3;margin-left:0}
}
@media (max-width:40rem){
  .act-next{flex:1 1 auto;min-width:9rem}
}
.err{color:var(--plum);font-style:normal;font-size:.92rem;order:3;flex-basis:100%}

/* ------------------------------------------------------------- resume ----*/
.resume{display:grid;gap:.9rem;padding:.25rem 0}
.resume h2{font-size:clamp(1.3rem,3vw,1.6rem);color:var(--plum)}
.resume p{color:var(--slate);max-width:48ch}
.resume .row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.35rem}

/* ================================================================== plan ==*/
.plan{display:grid;gap:clamp(1.75rem,4vw,2.75rem)}

.plan-top{display:flex;flex-wrap:wrap;gap:.35rem 1rem;align-items:baseline;
  padding-bottom:1rem;border-bottom:1px solid var(--edge)}
.plan-top .tag{font-family:var(--display);font-weight:700;color:var(--plum);font-size:1.02rem}
.plan-top .sub{color:var(--slate);font-size:.93rem}
.plan-top button{
  margin-left:auto;white-space:nowrap;background:none;border:0;padding:.4rem 0;cursor:pointer;color:var(--slate);
  font-family:var(--body);font-size:.92rem;text-decoration:underline;text-underline-offset:.25em;
}
.plan-top button:hover{color:var(--plum)}

.verdict{
  background:var(--plum);color:#fff;border-radius:var(--r-xl);
  padding:clamp(1.35rem,3.5vw,2.1rem);
}
.verdict-for{color:var(--paper-72);margin-bottom:.75rem;font-size:.93rem}
.verdict h2{font-size:clamp(1.55rem,4vw,2.25rem);line-height:1.12;text-indent:0;max-width:20ch;color:#fff;text-wrap:balance}
.verdict p{margin-top:.85rem;max-width:56ch;color:var(--paper-72);line-height:1.6}
.verdict .v-act{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.v-go{
  display:inline-flex;align-items:center;justify-content:center;min-height:3rem;
  font-family:var(--display);font-weight:700;font-size:1rem;background:var(--green);
  color:#052B18;text-decoration:none;padding:.8rem 1.5rem;border-radius:999px;
}
.v-go:hover{background:var(--green-deep)}
.v-alt{
  display:inline-flex;align-items:center;justify-content:center;min-height:3rem;
  font-family:var(--display);font-weight:600;font-size:1rem;color:#fff;
  text-decoration:none;padding:.8rem 1.35rem;border-radius:999px;
  border:1.5px solid rgba(255,255,255,.35);
}
.v-alt:hover{border-color:var(--green);background:rgba(255,255,255,.08)}

.blk{display:grid;gap:.9rem}
.blk h3{font-size:clamp(1.15rem,2.4vw,1.35rem);color:var(--plum);margin-bottom:0}
.blk-lede{color:var(--slate);max-width:56ch}

/* exposure reading */
.gauge{margin-top:.35rem;max-width:34rem;background:var(--plum-tint);border:1px solid var(--edge);
  border-radius:var(--r-lg);padding:1.05rem 1.15rem}
.gauge-band{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;margin-bottom:.55rem;gap:.2rem 1rem}
.gauge-band .gauge-name{flex:none}
.gauge-band .gauge-note{flex:1 1 12rem;text-align:right}
.gauge-name{font-weight:700;font-family:var(--display);color:var(--plum)}
.gauge-note{font-size:.88rem;color:var(--slate)}
.gauge-rail{display:block;height:8px;border-radius:999px;background:var(--plum-soft);overflow:hidden}
.gauge-fill{display:block;height:100%;border-radius:999px;background:var(--green);transition:width .6s ease}
.gauge-fill[data-band="tighten"]{background:#D99A2B}
.gauge-fill[data-band="attention"]{background:var(--plum-mid)}

.reasons{margin:.25rem 0 0;padding:0;list-style:none;display:grid;gap:.7rem;max-width:56ch}
.reasons li{position:relative;padding-left:1.6rem;color:var(--slate);line-height:1.55}
.reasons li::before{
  content:"";position:absolute;left:0;top:.62em;width:.55rem;height:.55rem;
  border-radius:50%;border:1.5px solid var(--green-ink);
}

/* modules — a real sequence, so numbered */
.mods{display:grid;gap:.6rem;margin:.25rem 0 0;padding:0;list-style:none;counter-reset:m}
.mods li{
  counter-increment:m;display:grid;grid-template-columns:2.1rem minmax(0,1fr);
  gap:.25rem .85rem;align-items:start;padding:.95rem 1.1rem;
  border:1px solid var(--edge);border-radius:var(--r-lg);background:var(--lift);
}
.mods li::before{
  content:counter(m);grid-row:1 / span 2;
  display:flex;align-items:center;justify-content:center;
  width:2.1rem;height:2.1rem;border-radius:50%;background:var(--green-soft);
  color:var(--green-ink);font-family:var(--display);font-weight:700;font-size:.95rem;
}
.mod-name{font-weight:700;font-family:var(--display);color:var(--plum);line-height:1.3}
.mod-name a{text-decoration:underline;text-decoration-color:var(--edge);text-underline-offset:.22em}
.mod-name a:hover{text-decoration-color:var(--green)}
.mod-why{color:var(--slate);grid-column:2;max-width:54ch;font-size:.95rem;line-height:1.5}

/* tool split */
.tools{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin-top:.25rem}
.tool{border:1px solid var(--edge);border-radius:var(--r-lg);background:var(--lift);padding:1.15rem 1.2rem}
.tool-sub{color:var(--green-ink);font-family:var(--display);font-weight:600;font-size:.9rem;margin-bottom:.3rem}
.tool h4{font-size:1.06rem;font-weight:700;letter-spacing:-.02em;line-height:1.25;margin-bottom:.7rem;color:var(--plum)}
.tool ul{margin:0;padding-left:1.15rem;display:grid;gap:.45rem;color:var(--slate);font-size:.96rem}
.tool[data-t="neither"]{background:var(--plum-tint)}

.line{
  display:grid;gap:.6rem;padding:1.15rem 1.25rem;border:1px solid var(--edge);
  border-left:4px solid var(--green);border-radius:var(--r-lg);background:var(--green-soft)
}
.line p{max-width:58ch;color:var(--plum)}
.line-src{color:var(--slate);font-size:.95rem}
.bound{color:var(--slate);max-width:56ch;padding:1.05rem 1.15rem;background:var(--plum-tint);
  border:1px solid var(--edge);border-radius:var(--r-lg)}

/* handoff */
.capture{
  border:1px solid var(--edge);border-radius:var(--r-xl);background:var(--plum-tint);
  padding:clamp(1.25rem,3.5vw,1.9rem);display:grid;gap:.85rem
}
.capture h3{font-size:clamp(1.2rem,2.6vw,1.45rem);color:var(--plum)}
.capture p{max-width:56ch;color:var(--slate)}
.cap-act{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.35rem}
.cap-go{
  display:inline-flex;align-items:center;justify-content:center;min-height:3rem;
  font-family:var(--display);font-weight:700;font-size:1rem;background:var(--plum);color:#fff;
  text-decoration:none;padding:.8rem 1.5rem;border-radius:999px;border:1.5px solid var(--plum);
}
.cap-go:hover{background:var(--plum-deep)}
.cap-alt{
  display:inline-flex;align-items:center;justify-content:center;min-height:3rem;
  font-family:var(--display);font-weight:600;font-size:.98rem;color:var(--plum);
  background:var(--lift);border:1.5px solid var(--edge);border-radius:999px;
  padding:.78rem 1.25rem;text-decoration:none;cursor:pointer;
}
.cap-alt:hover{border-color:var(--plum)}
.capture-note{font-size:.9rem;color:var(--slate);max-width:54ch}
.plan-foot{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between}
.plan-foot button{
  background:none;border:0;padding:.55rem 0;cursor:pointer;color:var(--slate);
  font-family:var(--body);font-size:.95rem;text-decoration:underline;text-underline-offset:.25em;
}
.plan-foot button:hover{color:var(--plum)}

/* Plan CTA that follows you on a phone, where the enquiry button is otherwise
   four screens below the fold. */
.plan-bar{
  position:sticky;bottom:0;z-index:6;display:none;gap:.6rem;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
  padding:.7rem 0 calc(.7rem + env(safe-area-inset-bottom));
  background:var(--lift);box-shadow:0 -14px 18px -14px rgba(48,0,57,.2);
  border-top:1px solid var(--edge);
}
.plan-bar a,.plan-bar button{
  flex:1 1 0;display:flex;align-items:center;justify-content:center;min-height:3rem;
  font-family:var(--display);font-weight:700;font-size:.98rem;border-radius:999px;
  text-decoration:none;cursor:pointer;border:1.5px solid transparent;padding:.7rem .6rem;
}
.plan-bar .pb-go{background:var(--plum);color:#fff}
.plan-bar .pb-alt{background:var(--lift);color:var(--plum);border-color:var(--edge);flex:0 1 auto;padding-inline:1.1rem}
.plan-bar[data-show="true"]{opacity:1;pointer-events:auto}
@media (max-width:40rem){
  .plan-bar{display:flex;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* The page-level sticky enquiry bar competes with the tool's own action bar,
   so it stands down while someone is inside the tool. */
body.in-tool .callbar{display:none}
@media (max-width:860px){ body.in-tool{padding-bottom:0} }

@media (max-width:64rem){
  .tools{grid-template-columns:1fr}
}
@media (max-width:30rem){
  .mods li{grid-template-columns:1fr;gap:.5rem}
  .mods li::before{grid-row:auto}
  .mod-why{grid-column:1}
}

@media (prefers-reduced-motion:reduce){
  .q,.plan,.q[data-enter],.plan[data-enter]{opacity:1;transform:none;transition:none}
  .prog-fill,.gauge-fill{transition:none}
}

@media print{
  .bar-act,.plan-bar,.plan-top button,.plan-foot,.cap-act,.bar,.foot,.cta,.callbar{display:none!important}
  .card{box-shadow:none;border:0;padding:0;max-width:none}
  .verdict{background:none;color:var(--plum);border:1px solid var(--edge)}
  .verdict h2,.verdict p,.verdict-for{color:var(--plum)}
}