/* Tools: the /tools hub and the two calculators (/affordability,
   /mortgage-calculator) share this file so the three pages read as one set.
   Sits on top of /site.css ("Modern Brokerage"): navy only as gradients on
   dark surfaces, gold fills with navy text, 28px sections, 20px cards, 14px
   images, pills for every control.

   The calculators keep the live tool funnel exactly (main.js initToolFunnel
   plus each page's verbatim inline scripts). Everything here is looks only:
   .tool-funnel, .f-step, .f-amount, .f-picks, .f-options, .f-opt,
   .funnel-progress .bar and the result ids are the live hooks. */

/* ---------- Header: this page's nav item ---------- */
.hd .nav-link.is-active{ background:rgba(255,255,255,.2); }
.hd.is-solid .nav-link.is-active{ background:#fff; box-shadow:0 1px 3px rgba(7,25,49,.1); }

/* ---------- Compact header band: centred headline, no photo ----------
   site.js watches .hero-card for the header's solid state and the mobile CTA,
   so the band is the page's .hero-card. The calculator overlaps its foot. */
.tl-hero .hero-card{
  height:auto; justify-content:flex-start;
  padding:calc(var(--hd-h) + 58px) 24px clamp(150px, 13vw, 200px);
  background:
    radial-gradient(55% 80% at 88% 0%, rgba(201,164,92,.20) 0%, rgba(201,164,92,0) 62%),
    radial-gradient(45% 70% at 6% 100%, rgba(201,164,92,.10) 0%, rgba(201,164,92,0) 60%),
    linear-gradient(160deg, #16396A 0%, #0B2446 44%, #071931 82%, #050F20 100%);
}
.tl-hero .hero-body{ max-width:860px; }

.tl-crumbs{ display:inline-flex; align-items:center; gap:4px; min-height:40px; padding:0 16px 0 6px; border-radius:999px; font-size:14px; font-weight:500;
  background:rgba(4,13,27,.34); border:1px solid rgba(255,255,255,.22); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.tl-crumbs a{ position:relative; display:inline-flex; align-items:center; min-height:40px; padding:0 8px 0 10px; border-radius:999px; color:rgba(255,255,255,.78); transition:color .2s ease; }
.tl-crumbs a::after{ content:""; position:absolute; inset:-4px 0; }
.tl-crumbs a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.tl-crumbs i{ font-size:12px; opacity:.6; }
.tl-crumbs span{ padding-left:6px; color:#fff; }

.tl-title{ margin-top:24px; font-size:clamp(2.4rem, 4.8vw, 4.4rem); font-weight:500; letter-spacing:-0.04em; line-height:1.02; text-wrap:balance; }
.tl-title .ln{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; }
.tl-title .ln > span{ display:inline-block; animation:lineUp 1.1s var(--ease) both; animation-delay:calc(.2s + var(--i, 0) * .12s); }
.tl-title em{ font-style:normal; color:var(--accent-tint); }
.tl-sub{ margin-top:18px; font-size:clamp(16px, 1.3vw, 18.5px); line-height:1.55; color:rgba(255,255,255,.84); max-width:58ch; text-wrap:balance; }

/* ---------- The stage: a wide card lifted over the band ---------- */
.tl-stage .hub{ animation:riseBig 1s var(--ease) .45s both; }
.tl-stage{ position:relative; z-index:10; margin-top:calc(-1 * clamp(120px, 10.5vw, 160px)); padding:0 24px; }
.tl-card{
  position:relative; max-width:1100px; margin:0 auto; overflow:hidden;
  background:#fff; border-radius:var(--r-sec); border:1px solid var(--line);
  box-shadow:0 40px 80px -40px rgba(7,25,49,.45), 0 8px 24px -12px rgba(7,25,49,.12);
  animation:riseBig 1s var(--ease) .45s both;
  scroll-margin-top:calc(var(--hd-h) + 28px);
}
.tl-card .funnel-progress{ position:absolute; left:0; right:0; top:0; height:4px; background:var(--panel); z-index:2; }
.tl-card .funnel-progress .bar{ height:100%; width:0; background:linear-gradient(90deg, var(--accent), var(--accent-tint)); border-radius:0 999px 999px 0; transition:width .6s var(--ease); }
.tl-card-in{ display:grid; grid-template-columns:minmax(0, 1fr) 340px; }

.tool-stage{ padding:clamp(36px, 4.6vw, 60px) clamp(24px, 4.6vw, 60px) clamp(32px, 4vw, 52px); min-height:520px; }

/* One question per screen. */
.f-step{ display:none; }
.f-step.active{ display:block; animation:fStepIn .5s var(--ease) both; }
@keyframes fStepIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.f-count{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--muted); }
.f-count b{ font-weight:600; color:var(--accent-text); }
.f-q{ margin-top:12px; font-size:clamp(1.7rem, 2.7vw, 2.4rem); font-weight:500; letter-spacing:-0.035em; line-height:1.1; text-wrap:balance; max-width:22ch; }
.f-q label{ cursor:text; }
.f-sub{ margin-top:12px; font-size:16px; color:var(--muted); line-height:1.6; max-width:54ch; }

/* Big typed amount: the number is the control. */
.f-amount{
  display:block; width:100%; margin-top:30px; height:104px; padding:0 32px;
  border-radius:999px; border:1px solid var(--line-2); background:var(--panel);
  font:inherit; font-size:clamp(2.4rem, 4.6vw, 3.6rem); font-weight:500; letter-spacing:-0.04em; color:var(--ink);
  font-variant-numeric:tabular-nums; caret-color:var(--accent-text);
  transition:border-color .2s ease, box-shadow .25s ease, background-color .25s ease;
}
.f-amount:hover{ border-color:var(--ink-2); }
.f-amount:focus{ outline:0; background:#fff; border-color:var(--accent); box-shadow:0 0 0 5px rgba(201,164,92,.24); }

/* Quick picks under the amount. */
.f-picks{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.f-picks button{ min-width:84px; height:48px; padding:0 20px; border-radius:999px; border:1px solid var(--line-2); background:#fff; font-size:15px; font-weight:500; font-variant-numeric:tabular-nums;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--ease); }
.f-picks button:hover{ border-color:var(--ink); }
.f-picks button:active{ transform:scale(.97); }
.f-picks button.selected{ background:var(--navy-grad); color:#fff; border-color:var(--ink); }

/* Segmented choices. */
.f-options{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; margin-top:28px; padding:5px; border-radius:999px; background:var(--panel); }
.f-opt{ height:58px; border-radius:999px; font-size:16px; font-weight:500; color:var(--ink-2); font-variant-numeric:tabular-nums;
  transition:background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.f-opt:hover{ background:#fff; }
.f-opt.selected{ background:var(--navy-grad); color:#fff; box-shadow:0 10px 20px -12px rgba(7,25,49,.6); }
.f-opt-lbl{ display:block; margin-top:26px; font-size:14px; font-weight:500; color:var(--ink-2); }
.f-opt-lbl + .f-options{ margin-top:10px; }
.f-step .f-options[data-key="amort"]{ margin-top:10px; }

.f-nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:36px; }
.f-nav .pill{ margin-left:auto; }
.f-back{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 4px; font-size:15px; font-weight:500; color:var(--muted); transition:color .2s ease; }
.f-back i{ font-size:17px; transition:transform .3s var(--ease); }
.f-back:hover{ color:var(--ink); }
.f-back:hover i{ transform:translateX(-3px); }
.f-hint{ margin-top:10px; font-size:14px; color:var(--muted); }

/* ---------- Result screen ---------- */
.result-hero .label{ font-size:15px; font-weight:500; color:var(--muted); }
.result-hero .big{ margin-top:8px; font-size:clamp(3.4rem, 7vw, 5.6rem); font-weight:500; letter-spacing:-0.05em; line-height:.95; color:var(--ink); font-variant-numeric:tabular-nums; }
.result-hero .per{ margin-top:10px; font-size:16px; color:var(--ink-2); }
.breakdown{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:28px; }
.breakdown > div{ display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:6px; padding:18px 18px 16px; border-radius:var(--r-img); background:var(--panel); }
.breakdown span{ font-size:13.5px; color:var(--muted); line-height:1.35; }
.breakdown b{ font-size:clamp(1.25rem, 1.8vw, 1.55rem); font-weight:500; letter-spacing:-0.025em; font-variant-numeric:tabular-nums; }
.split-bar{ display:flex; height:10px; margin-top:22px; border-radius:999px; overflow:hidden; background:var(--navy-3); }
.split-bar .p{ height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-tint)); transition:width .8s var(--ease); }
.split-legend{ display:flex; gap:20px; margin-top:10px; font-size:13.5px; color:var(--muted); }
.split-legend span{ display:inline-flex; align-items:center; gap:8px; }
.split-legend i{ width:10px; height:10px; border-radius:50%; }
.split-legend .li-p i{ background:var(--accent); }
.split-legend .li-i i{ background:var(--navy-3); }
.calc-disclaimer{ margin-top:20px; font-size:13.5px; line-height:1.6; color:var(--muted); max-width:64ch; }
.tool-result-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.f-step[data-step] .f-nav:last-child:has(.f-back:only-child){ margin-top:22px; }

/* ---------- Side rail: your answers so far (tools.js fills it) ---------- */
.tl-rail{ display:flex; flex-direction:column; background:var(--panel); padding:clamp(32px, 3.6vw, 44px) 28px 28px; border-left:1px solid var(--line); }
.tl-rail-h{ font-size:15px; font-weight:600; letter-spacing:-0.01em; }
.tl-rows{ display:grid; gap:4px; margin-top:16px; }
.tl-row{ display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:12px; width:100%; min-height:60px; padding:8px 12px 8px 10px; border-radius:var(--r-img); text-align:left; color:var(--muted);
  transition:background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.tl-row .n{ width:30px; height:30px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; font-size:13px; font-weight:600; background:#fff; transition:background-color .25s ease, color .25s ease, border-color .25s ease; }
.tl-row .t{ display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.tl-row .t small{ font-size:13px; }
.tl-row .t b{ font-size:15.5px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tl-row .e{ font-size:13px; font-weight:500; color:var(--accent-text); opacity:0; transition:opacity .2s ease; }
.tl-row.is-now{ background:#fff; box-shadow:0 10px 24px -18px rgba(7,25,49,.45); }
.tl-row.is-now .n{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.tl-row.is-done .n{ background:var(--ink); border-color:var(--ink); color:#fff; }
.tl-row.is-todo .t b{ color:var(--muted); font-weight:400; }
button.tl-row{ cursor:pointer; }
button.tl-row:hover{ background:#fff; }
button.tl-row:hover .e, button.tl-row:focus-visible .e{ opacity:1; }
.tl-ask{ margin-top:auto; padding-top:24px; }
.tl-ask-in{ display:flex; gap:12px; align-items:flex-start; padding:16px; border-radius:var(--r-card); background:#fff; border:1px solid var(--line); }
.tl-ask img{ width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:50% 20%; flex:none; }
.tl-ask p{ font-size:14px; line-height:1.5; color:var(--ink-2); }
.tl-ask b{ font-weight:600; color:var(--ink); }
.tl-ask .link-arrow{ min-height:40px; font-size:14px; margin-top:2px; color:var(--accent-text); }

.tl-note{ max-width:1100px; margin:18px auto 0; display:flex; justify-content:center; flex-wrap:wrap; gap:8px 28px; font-size:14px; color:var(--muted); }
.tl-note span{ display:inline-flex; align-items:center; gap:8px; }
.tl-note i{ font-size:18px; color:var(--accent-text); }

/* ---------- How the number is worked out ---------- */
.tl-how-head{ text-align:center; max-width:760px; margin:0 auto clamp(32px, 4vw, 48px); }
.tl-how-head .h2{ text-wrap:balance; }
.tl-how-head p{ margin:16px auto 0; font-size:17px; color:var(--muted); max-width:52ch; }
.eq{ display:grid; gap:22px; max-width:1100px; margin:0 auto; }
.eq-row{ display:grid; grid-template-columns:1fr 72px 1fr 72px 1fr; align-items:stretch; }
.eq-t{ display:flex; flex-direction:column; gap:8px; padding:26px 28px; border-radius:var(--r-card); background:var(--panel); }
.eq-t small{ font-size:13px; font-weight:500; color:var(--muted); }
.eq-t b{ font-size:clamp(1.15rem, 1.6vw, 1.35rem); font-weight:500; letter-spacing:-0.02em; line-height:1.25; }
.eq-t p{ font-size:14.5px; color:var(--muted); line-height:1.55; }
.eq-t.is-out{ background:var(--navy-grad); color:#fff; }
.eq-t.is-out small, .eq-t.is-out p{ color:rgba(255,255,255,.74); }
.eq-t.is-out b{ color:var(--accent-tint); }
.eq-op{ display:grid; place-items:center; }
.eq-op span{ width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid var(--line-2); display:grid; place-items:center; font-size:18px; color:var(--ink); }
.eq-notes{ display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:1100px; margin:22px auto 0; }
.eq-note{ display:flex; gap:16px; align-items:flex-start; padding:26px 28px; border-radius:var(--r-card); border:1px solid var(--line); }
.eq-note .ic{ background:var(--accent-soft); width:46px; height:46px; font-size:22px; }
.eq-note h3{ font-size:17px; font-weight:500; letter-spacing:-0.015em; }
.eq-note p{ margin-top:6px; font-size:14.5px; color:var(--muted); line-height:1.6; }

/* ---------- Next step (#nextStepForm) on a navy band ---------- */
.tl-next{ position:relative; overflow:hidden; border-radius:var(--r-sec); color:#fff; padding:clamp(28px, 4.4vw, 60px);
  display:grid; grid-template-columns:1fr minmax(0, 520px); gap:clamp(28px, 4vw, 64px); align-items:center;
  background:
    radial-gradient(60% 70% at 100% 0%, rgba(201,164,92,.16) 0%, rgba(201,164,92,0) 60%),
    linear-gradient(150deg, #16396A 0%, #0B2446 42%, #071931 78%, #050F20 100%); }
.tl-next .kicker{ color:var(--accent-tint); }
.tl-next .h2{ max-width:14ch; }
.tl-next-copy > p{ margin-top:18px; font-size:17px; line-height:1.6; color:rgba(255,255,255,.8); max-width:46ch; }
.tl-faces{ display:flex; align-items:center; gap:14px; margin-top:28px; }
.tl-faces > span{ display:flex; flex:none; }
.tl-faces img{ width:52px; height:52px; border-radius:50%; object-fit:cover; object-position:50% 20%; border:2px solid #0B2446; }
.tl-faces img + img{ margin-left:-14px; }
.tl-faces p{ font-size:14.5px; line-height:1.45; color:rgba(255,255,255,.8); }
.tl-faces b{ color:#fff; font-weight:600; }
.tl-next-card{ background:#fff; color:var(--ink); border-radius:var(--r-card); padding:clamp(22px, 2.6vw, 32px); box-shadow:0 30px 60px -30px rgba(0,0,0,.5); }
#nextStepForm .btn{ width:100%; margin-top:6px; }
.tl-next-card .micro{ margin-top:14px; font-size:13.5px; color:var(--muted); text-align:center; }

/* ---------- Related tools ---------- */
.rel-title{ margin-bottom:clamp(24px, 3vw, 36px); }
.rel{ display:grid; grid-template-columns:repeat(3, 1fr); border:1px solid var(--line); border-radius:var(--r-sec); overflow:hidden; }
.rel-a{ position:relative; display:grid; grid-template-columns:52px 1fr 44px; align-items:center; gap:18px; padding:28px; transition:background-color .3s ease; }
.rel-a + .rel-a{ border-left:1px solid var(--line); }
.rel-a:hover{ background:var(--panel); }
.rel-a .ic{ background:var(--accent-soft); }
.rel-a b{ display:block; font-size:17.5px; font-weight:500; letter-spacing:-0.015em; }
.rel-a span.d{ display:block; margin-top:4px; font-size:14px; color:var(--muted); line-height:1.5; }
.rel-go{ width:44px; height:44px; border-radius:50%; background:var(--panel); display:grid; place-items:center; font-size:18px; transition:background-color .25s ease, color .25s ease, transform .35s var(--ease); }
.rel-a:hover .rel-go{ background:var(--ink); color:#fff; transform:rotate(45deg); }

/* ---------- Closing form (#pageCtaForm) ---------- */
#pageCtaForm .btn{ width:100%; margin-top:6px; }

/* ---------- Hub: the tools as a bento ---------- */
.hub{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.hub-a{ position:relative; display:flex; flex-direction:column; align-items:flex-start; min-height:300px; padding:30px; border-radius:var(--r-sec); background:#fff; border:1px solid var(--line); overflow:hidden;
  box-shadow:0 30px 60px -44px rgba(7,25,49,.5); transition:transform .5s var(--ease), box-shadow .5s ease, border-color .3s ease; }
.hub-a:hover{ transform:translateY(-6px); border-color:var(--line-2); box-shadow:0 36px 70px -40px rgba(7,25,49,.55); }
.hub-a .ic{ width:60px; height:60px; font-size:28px; background:var(--accent-soft); transition:transform .5s var(--ease); }
.hub-a:hover .ic{ transform:translateY(-3px) rotate(-6deg); }
.hub-for{ margin-top:auto; padding-top:28px; font-size:13.5px; font-weight:500; color:var(--accent-text); }
.hub-a h2{ margin-top:6px; font-size:clamp(1.5rem, 2.2vw, 1.95rem); font-weight:500; letter-spacing:-0.03em; line-height:1.1; }
.hub-a p{ margin-top:10px; font-size:15.5px; color:var(--muted); line-height:1.6; max-width:40ch; }
.hub-go{ position:absolute; top:26px; right:26px; width:48px; height:48px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-size:19px; transition:transform .4s var(--ease), background-color .3s ease, color .3s ease; }
.hub-a:hover .hub-go{ transform:rotate(45deg); background:var(--accent); color:var(--ink); }
.hub-wide{ grid-column:span 2; }
/* Home Evaluation: the gold card, like the homepage's featured service. */
.hub-gold{ border-color:transparent; background:linear-gradient(135deg, #F6E3A6 0%, #E6C572 26%, #D4AE5E 52%, #EBCB7F 74%, #F7E6AE 100%);
  box-shadow:0 30px 60px -34px rgba(185,140,50,.8), inset 0 1px 0 rgba(255,255,255,.6); }
.hub-gold:hover{ border-color:transparent; box-shadow:0 36px 70px -32px rgba(185,140,50,.9), inset 0 1px 0 rgba(255,255,255,.6); }
.hub-gold .ic{ background:rgba(255,255,255,.55); color:var(--ink); }
.hub-gold p{ color:rgba(7,25,49,.8); }
.hub-gold .hub-for{ color:var(--ink); }
.hub-gold .hub-go{ background:#fff; color:var(--ink); }
/* Home Search: the photo card. */
.hub-photo{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; padding:0; }
.hub-photo .hub-img{ position:relative; order:-1; margin:10px; border-radius:var(--r-card); overflow:hidden; background:var(--panel-2); min-height:220px; }
.hub-photo .hub-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.hub-photo:hover .hub-img img{ transform:scale(1.05); }
.hub-photo .hub-txt{ display:flex; flex-direction:column; align-items:flex-start; padding:30px 30px 30px 20px; }

/* Hub teaser: the homepage's quick payment estimate on a navy band. */
.tl-quick{ position:relative; overflow:hidden; border-radius:var(--r-sec); color:#fff; padding:clamp(28px, 4.4vw, 60px);
  display:grid; grid-template-columns:1fr minmax(0, 500px); gap:clamp(28px, 4vw, 64px); align-items:center;
  background:
    radial-gradient(60% 70% at 100% 0%, rgba(201,164,92,.16) 0%, rgba(201,164,92,0) 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(201,164,92,.10) 0%, rgba(201,164,92,0) 60%),
    linear-gradient(150deg, #16396A 0%, #0B2446 42%, #071931 78%, #050F20 100%); }
.tl-quick .kicker{ color:var(--accent-tint); }
.tl-quick .h2{ max-width:13ch; }
.tl-quick-copy > p{ margin-top:18px; font-size:17px; line-height:1.6; color:rgba(255,255,255,.78); max-width:44ch; }
.tl-quick-copy .pill{ margin-top:28px; }
.tl-quick .tb-strip{ margin-top:28px; }

/* ---------- Mobile CTA steps aside while the calculator is on screen ---------- */
@media (max-width:820px){
  body.tl-tool-in .mobile-cta{ transform:translateY(calc(100% + 24px)); }
}

/* ---------- Responsive ---------- */
@media (max-width:1023px){
  .tl-card-in{ grid-template-columns:1fr; }
  .tl-rail{ border-left:0; border-top:1px solid var(--line); padding:24px; }
  .tl-rows{ grid-template-columns:repeat(2, 1fr); }
  .tl-ask{ padding-top:16px; }
  .tool-stage{ min-height:0; }
  .eq-row{ grid-template-columns:1fr; }
  .eq-op{ height:36px; }
  .eq-op span{ width:34px; height:34px; font-size:16px; }
  .tl-next, .tl-quick{ grid-template-columns:1fr; }
  .rel{ grid-template-columns:1fr; }
  .rel-a + .rel-a{ border-left:0; border-top:1px solid var(--line); }
  .hub{ grid-template-columns:1fr 1fr; }
  .hub-wide{ grid-column:span 2; }
}
@media (max-width:760px){
  .tl-hero .hero-card{ min-height:0; justify-content:flex-start; padding:calc(var(--hd-h) + 26px) 18px 108px; border-radius:0 0 24px 24px; }
  .tl-crumbs{ min-height:36px; font-size:13.5px; }
  .tl-crumbs a{ min-height:36px; }
  .tl-title{ margin-top:16px; font-size:clamp(2.05rem, 9.6vw, 2.7rem); line-height:1.05; }
  .tl-sub{ margin-top:12px; font-size:15.5px; }
  .tl-stage{ margin-top:-84px; padding:0 12px; }
  .tl-card{ border-radius:24px; }
  .tool-stage{ padding:30px 20px 24px; }
  .f-q{ font-size:1.6rem; }
  .f-sub{ font-size:15px; }
  .f-amount{ height:80px; margin-top:22px; padding:0 24px; font-size:2.35rem; }
  .f-picks{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
  .f-picks button{ min-width:0; padding:0 6px; font-size:14.5px; }
  .f-options{ grid-auto-flow:row; grid-template-columns:repeat(2, 1fr); border-radius:24px; }
  .f-options:has(> .f-opt:nth-child(3):last-child){ grid-template-columns:repeat(3, 1fr); }
  .f-options:has(> .f-opt:nth-child(5)) .f-opt:last-child{ grid-column:span 2; }
  .f-opt{ height:54px; border-radius:20px; }
  .f-nav{ margin-top:28px; }
  .f-nav .pill{ flex:1; justify-content:space-between; max-width:240px; }
  .breakdown{ grid-template-columns:1fr; gap:6px; }
  .breakdown > div{ flex-direction:row-reverse; justify-content:space-between; align-items:center; padding:14px 16px; }
  .tool-result-actions{ flex-direction:column; }
  .tool-result-actions .pill{ width:100%; justify-content:space-between; }
  .tool-result-actions .pill-line{ justify-content:center; }
  .tl-rail{ padding:20px; }
  .tl-rail-h{ font-size:14px; }
  .tl-rows{ grid-template-columns:1fr 1fr; gap:6px; margin-top:12px; }
  .tl-row{ grid-template-columns:1fr; gap:2px; min-height:0; padding:10px 12px; background:#fff; }
  .tl-row .n, .tl-row .e{ display:none; }
  .tl-row.is-now{ box-shadow:inset 0 0 0 1.5px var(--accent); }
  .tl-note{ flex-direction:column; align-items:center; gap:8px; margin-top:14px; font-size:13.5px; text-align:center; }

  .eq{ gap:14px; }
  .eq-t{ padding:16px 18px; gap:4px; }
  .eq-t:not(.is-out) p{ display:none; }
  .eq-op{ height:28px; }
  .eq-op span{ width:30px; height:30px; font-size:14px; }
  .tl-note span + span{ display:none; }
  .eq-notes{ grid-template-columns:1fr; }
  .eq-note{ padding:18px; }
  .tl-next, .tl-quick{ padding:28px 20px 20px; border-radius:24px; }
  .tl-next-card{ padding:20px 16px; }
  .rel{ border-radius:24px; }
  .rel-a{ grid-template-columns:44px 1fr 40px; gap:14px; padding:18px 16px; }
  .rel-a .ic{ width:44px; height:44px; font-size:21px; }
  .rel-go{ width:40px; height:40px; }

  .hub{ grid-template-columns:1fr; gap:10px; }
  .hub-wide{ grid-column:auto; }
  .hub-a{ min-height:0; padding:22px; border-radius:24px; }
  .hub-a .ic{ width:50px; height:50px; font-size:24px; }
  .hub-for{ padding-top:22px; }
  .hub-go{ top:20px; right:20px; width:42px; height:42px; }
  .hub-photo{ grid-template-columns:1fr; padding:0; }
  .hub-photo .hub-img{ min-height:180px; margin:8px 8px 0; }
  .hub-photo .hub-txt{ padding:18px 22px 22px; }
  .hub-photo .hub-go{ top:20px; right:20px; }
  .tl-quick .pill{ width:100%; justify-content:space-between; }
}

@media (prefers-reduced-motion:reduce){
  .tl-title .ln > span, .tl-card, .tl-stage .hub, .f-step.active{ animation:none !important; }
}
@media (prefers-reduced-transparency:reduce){
  .tl-crumbs{ background:rgba(7,25,49,.9); -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media (max-width:760px){
  /* Calculator steps: Continue runs the full width, Back sits under it */
  .f-nav{ flex-direction:column-reverse; align-items:stretch; gap:6px; }
  .f-nav .pill{ max-width:none; width:100%; margin-left:0; }
  .f-nav .f-back{ justify-content:center; }
}
.tl-ask .tb-faces img{ width:40px; height:40px; border-radius:50%; object-fit:cover; object-position:50% 20%; border:2px solid #fff; }
.tl-ask .tb-faces img + img{ margin-left:-12px; }