/* Tool pages, redesign v3 (2026-10-26): same tokens as the home page. Opt in with <body class="v3">.
   Minimal forms; the one spatial piece is the result (a raised card on desktop, a dock on phones). */
.v3{--lift:0 1px 0 rgba(255,255,255,.9) inset,0 2px 6px -2px rgba(10,79,102,.12),0 22px 40px -22px rgba(10,79,102,.38)}
.v3 .tool-head{padding:30px 0 14px}
.v3 .crumb{font-size:.84rem;font-weight:700;color:var(--ink-3);margin-bottom:8px}
.v3 .crumb a{color:var(--teal)}
.v3 .tool-head h1{font-size:clamp(1.9rem,4.2vw,2.9rem);letter-spacing:-.035em;line-height:1.05}
.v3 .tool-head p{font-size:1.05rem}
.v3 .grid2{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px}
.v3 .grid2 > .box{border:0;padding:0;background:none}
.v3 .grid2 > .box > h2{font-size:1.15rem;margin-bottom:14px}
.v3 .f{gap:18px}
.v3 .f label{font-size:.9rem;font-weight:700;color:var(--ink);gap:7px}
.v3 .f .hint{font-weight:500;color:var(--ink-3);font-size:.82rem}
.v3 .f input,.v3 .f select{min-height:52px;border-radius:14px;font-size:1.05rem;font-weight:600;padding:12px 14px;transition:border-color .2s,box-shadow .2s}
.v3 .f input:focus,.v3 .f select:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(15,110,140,.12)}
.v3 .f .sub{font-size:.9rem;font-weight:700;color:var(--ink)!important}
/* radio groups as a segmented control */
.v3 .choice{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;background:var(--mist);border-radius:14px;padding:4px}
.v3 .choice label{justify-content:center;text-align:center;border:0;border-radius:11px;min-height:46px;padding:8px 10px;font-weight:700;color:var(--ink-2);transition:background .2s,color .2s,box-shadow .2s}
.v3 .choice input{position:absolute;opacity:0;pointer-events:none}
.v3 .choice label:has(input:checked){background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(20,35,46,.15)}
.v3 .choice label:has(input:focus-visible){outline:3px solid var(--amber);outline-offset:2px}
.v3 #g-go,.v3 .calc-btn{min-height:52px;border-radius:14px;padding:0 26px}
/* result: raised card, sticky beside the form on wide screens */
.v3 .result-col{position:sticky;top:84px}
.v3 .result-col > .box{border:1px solid rgba(255,255,255,.95);border-radius:24px;padding:24px;background:radial-gradient(320px 220px at 100% 0%,rgba(251,231,191,.55),transparent 70%),radial-gradient(320px 240px at 0% 100%,rgba(214,234,241,.6),transparent 70%),#fff;box-shadow:var(--lift)}
.v3 .result-col > .box > h2{font-size:.9rem;color:var(--ink-3);font-weight:700}
.v3 .big{font-size:clamp(2.2rem,5vw,3rem);letter-spacing:-.04em;margin-top:4px;font-variant-numeric:tabular-nums}
.v3 .big small{font-size:.9rem;color:var(--ink-2)}
.v3 .steps{position:relative;margin-top:18px;padding-left:22px;gap:12px}
.v3 .steps::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:var(--line)}
.v3 .steps li{position:relative;border:0;background:none;padding:0;font-size:.92rem;line-height:1.5}
.v3 .steps li::before{content:"";position:absolute;left:-22px;top:5px;width:12px;height:12px;border-radius:50%;background:#fff;border:2.5px solid var(--teal)}
.v3 .src{background:var(--mist);border-radius:12px;padding:10px 12px;margin-top:14px}
@keyframes v3In{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.v3 .result-col .steps li{animation:v3In .4s cubic-bezier(.2,.7,.2,1) both}
.v3 .result-col .steps li:nth-child(2){animation-delay:.05s}.v3 .result-col .steps li:nth-child(3){animation-delay:.1s}.v3 .result-col .steps li:nth-child(4){animation-delay:.15s}.v3 .result-col .steps li:nth-child(n+5){animation-delay:.2s}
/* phone dock: the answer stays in view while you type */
.res-dock{display:none}
@media (max-width:860px){
  .v3 .grid2{grid-template-columns:minmax(0,1fr);gap:26px}
  .v3 .result-col{position:static}
  .res-dock{display:flex;position:fixed;left:12px;right:12px;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 76px);z-index:39;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 12px 18px;border-radius:20px;background:rgba(20,35,46,.92);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 24px 40px -18px rgba(20,35,46,.75);transform:translateY(140%);opacity:0;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .25s}
  .res-dock.on{transform:none;opacity:1}
  .res-dock small{display:block;font-size:.74rem;color:#B7C6CE;font-weight:600}
  .res-dock b{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .res-dock button{background:var(--amber);color:#3A2A00;font-weight:800;font-size:.9rem;border:0;border-radius:12px;padding:10px 14px;cursor:pointer;font-family:inherit}
  body.v3{padding-bottom:170px}
}
@media print{.res-dock{display:none!important}}
@media (prefers-reduced-motion:reduce){.v3 *{animation:none!important;transition:none!important}.res-dock{transition:none!important}}
.v3 [hidden]{display:none!important}