/* Free Tools. Shared across all 13 pages.
   Inherits every token from /styles.css. Adds nothing to the palette.

   THESIS: a free tool has to feel like an instrument, not a lead form. Ivory ground
   for the work, one forest panel where the answer lives, amber only on the number
   that matters. The answer stays visible while you are still typing. On desktop it is pinned
   beside the inputs, on a phone it rides the bottom of the screen, because a
   calculator whose result sits below the fold makes a person scroll to find out
   whether they are okay, and that is the wrong feeling to hand someone
   about their own money. */

/* ---------- nav ---------- */
.tnav{border-bottom:1px solid var(--line-2);background:var(--ivory);position:sticky;top:0;z-index:40}
.tnav__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0}
.tnav__links{display:flex;align-items:center;gap:1.4rem;font-size:.92rem;font-weight:500;color:var(--ink-2)}
.tnav__links a:hover{color:var(--ink)}
@media (max-width:620px){.tnav__links a[data-opt]{display:none}}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:.8rem;color:var(--ink-3);padding:1.5rem 0 0;display:flex;gap:.5rem;flex-wrap:wrap}
.crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.crumbs span[aria-current]{color:var(--ink-2)}

/* ---------- hero ---------- */
.thero{padding:1.6rem 0 2.4rem}
.thero h1{font-size:clamp(2.1rem,4.2vw,3.4rem)}
.thero .lede{max-width:52ch}
.tflags{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.4rem 0 0}
.tflag{display:inline-flex;align-items:center;gap:.4rem;background:var(--ivory-2);border:1px solid var(--line-2);color:var(--ink-2);font-size:.78rem;font-weight:600;padding:.42rem .8rem;border-radius:99px}
.tflag--free{background:var(--amber-soft);border-color:transparent;color:var(--amber-ink)}

/* ---------- the answer block: what an answer engine lifts ---------- */
.answer{background:var(--white);border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:1.5rem 1.6rem;margin:2rem 0 0;box-shadow:var(--sh-1);max-width:72ch}
.answer h2{font-family:var(--sans);font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber-ink);margin:0 0 .8rem;display:flex;align-items:center;gap:.7rem}
.answer h2::after{content:"";flex:1;height:1px;background:var(--line-2)}
.answer p{margin:0;font-size:1.05rem;line-height:1.65;color:var(--ink)}
.answer p + p{margin-top:.8rem}
.answer strong{font-weight:600}

/* ---------- the tool shell ---------- */
.tool{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:clamp(1.5rem,3vw,2.5rem);
  align-items:start;padding:clamp(2rem,4vw,3.2rem) 0}
@media (max-width:940px){.tool{grid-template-columns:1fr}}

.tpanel{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--sh-1);
  padding:clamp(1.3rem,2.5vw,2rem)}
.tpanel + .tpanel{margin-top:1rem}

.tgroup + .tgroup{margin-top:1.9rem;padding-top:1.6rem;border-top:1px solid var(--line-2)}
.tgroup__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0 0 1rem}
.tgroup__head h3{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin:0}
.tgroup__sum{font-size:.9rem;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums lining-nums}

/* a labelled money field */
.trow{display:grid;grid-template-columns:1fr 148px;gap:.8rem;align-items:center;padding:.42rem 0}
.trow label{font-size:.95rem;color:var(--ink-2);line-height:1.35}
.trow label small{display:block;font-size:.78rem;color:var(--ink-3);margin-top:.1rem}
.tin{position:relative;display:flex;align-items:center}
.tin::before{content:"$";position:absolute;left:.7rem;font-size:.9rem;color:var(--ink-3);pointer-events:none}
.tin input{width:100%;padding:.62rem .7rem .62rem 1.5rem;border:1px solid var(--line);border-radius:10px;
  background:var(--ivory);font-size:1rem;font-weight:600;text-align:right;
  font-variant-numeric:tabular-nums lining-nums;transition:border-color .2s,background .2s}
.tin input:hover{border-color:var(--ink-3)}
.tin input:focus{background:var(--white);border-color:var(--amber);outline:none;box-shadow:0 0 0 3px rgba(237,174,29,.18)}
.tin--plain::before{content:none}
.tin--plain input{padding-left:.7rem}
@media (max-width:460px){.trow{grid-template-columns:1fr 118px}}

/* ---------- the result panel ---------- */
.tres{background:var(--forest);color:var(--on-forest);border-radius:var(--r);padding:clamp(1.5rem,3vw,2rem);
  position:sticky;top:5.2rem;overflow:hidden;box-shadow:var(--sh-3)}
.tres::before{content:"";position:absolute;width:420px;height:420px;left:50%;top:-40%;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(237,174,29,.16),transparent 65%);pointer-events:none}
.tres > *{position:relative}
.tres__label{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--on-forest-3);margin:0}
.tbig{font-family:var(--serif);font-weight:800;font-size:clamp(2.6rem,6vw,3.6rem);line-height:1;margin:.5rem 0 0;
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em}
.tbig--good{color:var(--amber)}
.tbig--bad{color:#F0A79A}
.tres__sub{margin:.55rem 0 0;font-size:.92rem;color:var(--on-forest-2);line-height:1.5}

.tmeta{list-style:none;margin:1.5rem 0 0;padding:1.3rem 0 0;border-top:1px solid rgba(255,255,255,.14);display:grid;gap:.85rem}
.tmeta li{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;font-size:.92rem}
.tmeta span{color:var(--on-forest-2)}
.tmeta b{font-weight:600;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.tmeta b[data-tone=good]{color:var(--amber)}
.tmeta b[data-tone=bad]{color:#F0A79A}

/* stacked share bar: needs, wants, saving */
.tsplit{margin:1.5rem 0 0;padding:1.3rem 0 0;border-top:1px solid rgba(255,255,255,.14)}
.tbar{display:flex;height:12px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.12)}
.tbar i{display:block;height:100%}   /* no width transition: it retweens on every keystroke */
.tbar i[data-k=needs]{background:var(--amber)}
.tbar i[data-k=wants]{background:#7FA8A0}
.tbar i[data-k=save]{background:#F6F1E9}
.tkeys{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin:.85rem 0 0;padding:0;font-size:.82rem;color:var(--on-forest-2)}
.tkeys li{display:flex;align-items:center;gap:.42rem}
.tkeys em{width:9px;height:9px;border-radius:3px;flex:none}

.tnote{margin:1.4rem 0 0;padding:.9rem 1rem;background:rgba(255,255,255,.07);border-radius:12px;
  font-size:.87rem;line-height:1.5;color:var(--on-forest-2)}
.tnote strong{color:var(--amber);font-weight:600}
.tres .btn{margin-top:1.2rem}
.tfine{margin:1.1rem 0 0;font-size:.74rem;line-height:1.5;color:var(--on-forest-3)}

/* phone: the answer rides the bottom of the screen */
@media (max-width:940px){
  .tres{position:static}
  .tdock{position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--forest);color:var(--on-forest);
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:.75rem clamp(20px,4vw,48px);box-shadow:0 -8px 30px -12px rgba(17,44,40,.6)}
  .tdock span{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-forest-3);font-weight:700}
  .tdock b{font-family:var(--serif);font-weight:800;font-size:1.6rem;font-variant-numeric:tabular-nums lining-nums;font-weight:400}
  body{padding-bottom:4.6rem}
}
@media (min-width:941px){.tdock{display:none}}

.treset{margin:1.2rem 0 0;text-align:right}

/* ---------- prose sections ---------- */
.tsec{padding:clamp(2.4rem,5vw,4rem) 0;border-top:1px solid var(--line-2)}
.tsec--tint{background:var(--ivory-2)}
.tsec h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.1;margin:0 0 .5rem}
.tsec h3{font-size:1.08rem;font-weight:600;margin:1.8rem 0 .5rem}
.tsec p{color:var(--ink-2);line-height:1.7;max-width:70ch;margin:.8rem 0 0}
.tsec ul{color:var(--ink-2);line-height:1.7;max-width:70ch;padding-left:1.1rem}
.tsec li{margin:.5rem 0}
.tsec a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.tsec a:hover{text-decoration-color:var(--amber)}

/* worked example: static numbers, the block a crawler reads */
.wscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.4rem 0 0;
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--white)}
.wtable{width:100%;border-collapse:collapse;font-size:.94rem;min-width:420px}
.wtable caption{text-align:left;padding:1rem 1.2rem .2rem;font-size:.8rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.wtable th,.wtable td{padding:.72rem 1.2rem;text-align:left;border-bottom:1px solid var(--line-2)}
.wtable th{font-weight:600;color:var(--ink)}
.wtable td:last-child,.wtable th:last-child{text-align:right;font-variant-numeric:tabular-nums lining-nums;font-weight:600}
.wtable tbody tr:last-child td{border-bottom:0}
.wtable tfoot td{border-top:2px solid var(--forest);border-bottom:0;font-weight:700;color:var(--ink);background:var(--ivory-2)}

.srcnote{font-size:.8rem;color:var(--ink-3);margin:1rem 0 0;line-height:1.55}
.srcnote a{color:var(--ink-2)}

/* ---------- hub ---------- */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin:1.5rem 0 0}
.tcard{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:1.3rem 1.4rem;
  box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:.45rem;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.tcard:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--amber)}
.tcard h3{font-size:1.06rem;font-weight:600;margin:0;line-height:1.3}
.tcard p{font-size:.9rem;color:var(--ink-2);margin:0;line-height:1.55;flex:1}
.tcard__go{font-size:.84rem;font-weight:600;color:var(--amber-ink);display:flex;align-items:center;gap:.35rem;margin-top:.3rem}
.tcard--soon{opacity:.62;pointer-events:none}
.tcard--soon .tcard__go{color:var(--ink-3)}
.tstage{margin:clamp(2rem,4vw,3rem) 0 0}
.tstage h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,2.6vw,2rem);margin:0}
.tstage p{color:var(--ink-2);margin:.35rem 0 0;font-size:.95rem}

/* ---------- footer ---------- */
.tfoot{background:var(--forest);color:var(--on-forest-2);padding:2.6rem 0;text-align:center;font-size:.86rem;line-height:1.6}
.tfoot p{margin:0 auto;max-width:62ch}
.tfoot p + p{margin-top:.6rem;font-size:.75rem;color:var(--on-forest-3)}
.tfoot strong{color:var(--on-forest);font-weight:600}

@media print{.tnav,.tdock,.treset,.btn{display:none!important}.tres{background:none;color:#000;box-shadow:none}}

/* ---------- compliance footer ---------- */
.tfoot__links{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.4rem;margin:0 0 1.5rem;
  padding:0 0 1.4rem;border-bottom:1px solid rgba(255,255,255,.14);font-size:.85rem;font-weight:500}
.tfoot__links a{color:var(--on-forest-2)}
.tfoot__links a:hover{color:var(--amber);text-decoration:underline;text-underline-offset:3px}
.tfoot p{margin:0 auto .7rem;max-width:70ch;font-size:.82rem;line-height:1.6}
.tfoot p:last-child{margin-bottom:0;font-size:.75rem;color:var(--on-forest-3)}
.tfoot strong{color:var(--on-forest);font-weight:600}

/* ---------- legal pages ---------- */
.legal{padding:2rem 0 clamp(3rem,6vw,5rem);max-width:74ch}
.legal h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.15;
  margin:2.6rem 0 .4rem;padding-top:1.6rem;border-top:1px solid var(--line-2)}
.legal h2:first-of-type{border-top:0;padding-top:0;margin-top:1.8rem}
.legal h3{font-size:1.02rem;font-weight:600;margin:1.6rem 0 .3rem}
.legal p,.legal li{color:var(--ink-2);line-height:1.7}
.legal p{margin:.7rem 0 0}
.legal ul{padding-left:1.1rem;margin:.7rem 0 0}
.legal li{margin:.45rem 0}
.legal strong{color:var(--ink);font-weight:600}
.legal a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.legal a:hover{text-decoration-color:var(--amber)}
.legal__meta{font-size:.85rem;color:var(--ink-3);margin:.5rem 0 0}
.legal__box{background:var(--ivory-2);border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:1.4rem 1.6rem;margin:1.8rem 0 0}
.legal__box p:first-child strong:first-child{color:var(--amber-ink)}
.legal__box p:first-child{margin-top:0}

/* ---------- debt rows: label, balance, rate, minimum ---------- */
.dhead,.drow{display:grid;grid-template-columns:minmax(0,1fr) 104px 96px 94px;gap:.5rem;align-items:center}
.dhead{padding:0 0 .55rem;font-size:.69rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.dhead span:not(:first-child){text-align:right}
.drow{padding:.28rem 0}
.drow > label{font-size:.94rem;color:var(--ink-2);line-height:1.3}
.tin--pct::before{content:"%";left:auto;right:.5rem;font-size:.82rem}
.tin--pct input{padding:.62rem 1.15rem .62rem .45rem}
@media (max-width:700px){
  .dhead{display:none}
  .drow{grid-template-columns:repeat(3,1fr);gap:.45rem;padding:.7rem 0;border-bottom:1px solid var(--line-2)}
  .drow > label{grid-column:1/-1;font-weight:600;color:var(--ink);margin-bottom:.1rem}
  .drow:last-child{border-bottom:0}
  .tin input{font-size:.95rem}
}

/* comparison table rows that the JS rewrites live */
.wtable tbody tr[data-hi] td{background:var(--amber-soft)}
.wtable tbody tr[data-hi] th{background:var(--amber-soft)}

/* ---------- hero: two columns so the page is not half empty ---------- */
.thero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(1.5rem,3vw,3rem);align-items:start;margin:1.6rem 0 0}
.thero__grid .answer{margin:0}
.thero__grid .lede{margin:0}
.thero__grid .tflags{margin:1.1rem 0 0}
@media (max-width:900px){.thero__grid{grid-template-columns:1fr;gap:1.4rem}}

/* prose sits on a fixed measure and is centred in its section, so a section reads as
   a deliberate column rather than text abandoned against a left edge */
.tsec__in{max-width:78ch}
.tsec__in > p,.tsec__in > ul{max-width:none}
.tsec--wide .tsec__in{max-width:none}

/* ---------- the guide: a quiet offer, not an interruption ---------- */
/* Left, not right: on a tool page the whole right column is the answer panel, and a
   helper that covers the number the person came for is worse than no helper. */
.guide{position:fixed;left:clamp(12px,3vw,28px);bottom:clamp(12px,3vw,28px);z-index:60;
  width:min(400px,calc(100vw - 24px));background:var(--white);border:1px solid var(--line-2);
  border-radius:var(--r);box-shadow:0 24px 60px -20px rgba(17,44,40,.42),0 0 0 1px rgba(17,44,40,.04);
  overflow:hidden;transform:translateY(16px);opacity:0;pointer-events:none;
  transition:transform .5s var(--ease),opacity .4s var(--ease)}
.guide[data-open]{transform:none;opacity:1;pointer-events:auto}
@media (max-width:940px){.guide{bottom:5.4rem}}
@media (prefers-reduced-motion:reduce){.guide{transition:none}}

.guide__head{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;
  padding:1.15rem 1.25rem .3rem}
.guide__head h2{font-family:var(--sans);font-weight:700;font-size:1.06rem;line-height:1.3;margin:0;color:var(--ink)}
.guide__x{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3);
  flex:none;transition:background .2s,color .2s}
.guide__x:hover{background:var(--ivory-2);color:var(--ink)}
.guide__body{padding:.35rem 1.25rem 1.25rem}
.guide__body p{margin:.35rem 0 0;font-size:.94rem;line-height:1.55;color:var(--ink-2)}
.guide__actions{display:flex;flex-wrap:wrap;gap:.55rem;margin:1rem 0 0}
.guide__actions .btn{flex:1 1 auto}
.guide__step{display:none}
.guide__step[data-on]{display:block}

.guide__q{font-size:.94rem;font-weight:600;color:var(--ink);margin:0 0 .7rem}
.guide__opts{display:grid;gap:.45rem;margin:0;padding:0;list-style:none}
.guide__opt{width:100%;text-align:left;border:1px solid var(--line);border-radius:12px;
  padding:.7rem .9rem;font-size:.92rem;line-height:1.35;color:var(--ink-2);background:var(--ivory);
  transition:border-color .2s,background .2s,color .2s}
.guide__opt:hover{border-color:var(--amber);background:var(--white);color:var(--ink)}
.guide__prog{display:flex;gap:.3rem;margin:0 0 .9rem}
.guide__prog i{height:3px;flex:1;border-radius:2px;background:var(--line-2)}
.guide__prog i[data-done]{background:var(--amber)}

.guide__rec{display:block;border:1px solid var(--line-2);border-radius:12px;padding:.8rem .95rem;
  background:var(--ivory);transition:border-color .2s,transform .2s}
.guide__rec + .guide__rec{margin-top:.5rem}
.guide__rec:hover{border-color:var(--amber);transform:translateX(2px)}
.guide__rec b{display:block;font-size:.95rem;color:var(--ink);font-weight:600}
.guide__rec span{display:block;font-size:.85rem;color:var(--ink-3);margin-top:.15rem;line-height:1.45}
.guide__soon{opacity:.6;pointer-events:none}
.guide__back{margin:.9rem 0 0;font-size:.85rem}

/* ---------- hub: what is being built, stated compactly and honestly ---------- */
.tsoon{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 2rem;
  margin:1.2rem 0 0;padding:0;list-style:none}
.tsoon li{display:flex;align-items:baseline;gap:.7rem;padding:.62rem 0;font-size:.93rem;
  color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.tsoon b{font-weight:600;color:var(--ink);flex:none}
.tsoon i{font-style:normal;color:var(--ink-3);font-size:.85rem}
.tsoon em{margin-left:auto;font-style:normal;font-size:.7rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--amber-ink);white-space:nowrap}

/* the start-here strip */
.tstart{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:space-between;
  background:var(--forest);color:var(--on-forest);border-radius:var(--r);
  padding:clamp(1.1rem,2.5vw,1.6rem) clamp(1.3rem,3vw,2rem);margin:2rem 0 0}
.tstart p{margin:0;font-size:1rem;line-height:1.5;color:var(--on-forest-2);max-width:56ch}
.tstart strong{color:var(--on-forest);font-weight:600}
.tcard__use{font-size:.82rem;color:var(--ink-3);line-height:1.45;margin:0}
.tcard__use b{color:var(--ink-2);font-weight:600}

.tsoon__head{font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin:1.7rem 0 0}

.tread{display:flex;flex-direction:column;gap:.55rem;margin:1.2rem 0 0;max-width:60ch}
.tread a{display:block;padding:.8rem 1rem;background:var(--white);border:1px solid var(--line-2);
  border-radius:12px;font-size:.95rem;font-weight:600;color:var(--ink);text-decoration:none;
  transition:border-color .2s,transform .2s}
.tread a:hover{border-color:var(--amber);transform:translateX(3px)}
.tread a::after{content:' \2192';color:var(--amber-ink)}