/* Shared look for the 5 buyer tools (safe budget, true cost, red-flag, water, stamp duty).
   One family: navy result panel, lime = good, amber/red = warning, big serif numbers,
   the same CTA block, a WhatsApp share + next-tool row, and a 5-step journey strip.
   Every rule is scoped under .tk-* classes so it cannot leak into other pages. */
:root{--tk-navy:#102b46;--tk-navy2:#173a5c;--tk-lime:#b6e477;--tk-amber:#f2a93b;--tk-red:#e5573f;--tk-mute:#c9d6e2;--tk-wa:#25d366}

/* ---- sample ribbon shown in the result panel before the buyer types ---- */
.tk-sample{display:flex;align-items:center;gap:10px;margin:0 0 16px;padding:8px 12px;border:1px dashed #b6e47799;border-radius:4px;font-size:.84rem;line-height:1.35;color:#e6eef5;background:#b6e47712}
.tk-sample b{flex:0 0 auto;background:var(--tk-lime);color:var(--tk-navy);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;padding:3px 7px;border-radius:2px}
.tk-is-sample .tk-dimmed{opacity:.72;filter:saturate(.7)}

/* ---- result actions: share on WhatsApp + next tool ---- */
.tk-act{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:20px;padding-top:16px;border-top:1px solid #ffffff1f}
.tk-share{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border:1px solid var(--tk-wa);border-radius:40px;color:#fff;font-size:.86rem;font-weight:600;line-height:1.2;background:#25d36614;transition:background .18s}
.tk-share:before{content:'';width:9px;height:9px;border-radius:50%;background:var(--tk-wa);box-shadow:0 0 0 3px #25d36633}
.tk-share:hover{background:#25d36633}
.tk-nextlink{margin-left:auto;display:inline-flex;align-items:center;gap:8px;color:var(--tk-lime);font-size:.86rem;font-weight:600;border-bottom:1px solid #b6e47766;padding:3px 0}
.tk-nextlink:hover{border-color:var(--tk-lime)}

/* ---- the CTA block, same on all 5 tools ---- */
.tk-cta-sec{padding:56px 0}
.tk-cta{background:var(--tk-navy);color:#fff;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;padding:44px;border-radius:6px;box-shadow:0 30px 60px -36px #102b46aa}
.tk-cta-copy{display:flex;flex-direction:column;justify-content:center}
.tk-cta .tk-eyebrow{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:650;color:var(--tk-lime);margin-bottom:14px}
.tk-cta h2{text-wrap:balance;color:#fff;font-family:var(--serif);font-weight:400;letter-spacing:-.04em;font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.1;margin:0}
.tk-cta-copy>p{color:var(--tk-mute);margin:12px 0 0;max-width:44ch}
.tk-proof{display:flex;gap:30px;margin:24px 0 0;padding:18px 0 0;list-style:none;border-top:1px solid #ffffff26}
.tk-proof li{display:flex;flex-direction:column}
.tk-proof b{font-family:var(--serif);font-weight:400;font-size:2.3rem;line-height:1;letter-spacing:-.04em;color:var(--tk-lime)}
.tk-proof span{font-size:.76rem;color:var(--tk-mute);margin-top:4px}
.tk-cta-actions{display:flex;gap:14px 20px;align-items:center;flex-wrap:wrap;margin-top:26px}
.tk-cta-actions .btn{margin:0}
.tk-cta .btn.wa{background:var(--tk-wa);border-color:var(--tk-wa);color:#0b3b22}
.tk-cta .btn.wa:before{background:#0b3b22;box-shadow:none}
.tk-cta .btn.wa:hover{background:#1ebe5b}
.tk-cta-actions .textlink{color:#fff}
.tk-cta-actions .textlink:hover{color:var(--tk-lime)}
.tk-nofee{font-size:.86rem;font-weight:650;color:var(--tk-lime)}
.tk-form{background:#fff;color:var(--tk-navy);padding:28px;border-radius:4px;border-top:4px solid var(--tk-lime);display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;align-content:start;margin:0}
.tk-form>.field.full,.tk-form>.tk-full,.tk-form>.btn,.tk-form>p,.tk-form>.hp{grid-column:1/-1}
.tk-form .field label{color:var(--tk-navy);font-size:.84rem}
.tk-form .field input{border-color:#bfcbd1;background:#fff;color:var(--tk-navy)}
.tk-form .check span{font-size:.8rem;color:#576978;line-height:1.45}
.tk-form .check input{accent-color:var(--tk-navy)}
.tk-form>.btn{background:var(--tk-navy);border-color:var(--tk-navy);color:#fff;justify-self:start;margin-top:2px}
.tk-form>.btn:hover{background:var(--tk-navy2)}
.tk-form .form-status,.tk-form .small{margin:0}
.tk-form .textlink{font-size:.86rem}
.tk-form button.textlink{background:none;border:0;border-bottom:1px solid currentColor;padding:2px 0;color:inherit}

/* ---- journey strip: the 5 checks before the token ---- */
.tk-journey{padding:44px 0 8px}
.tk-j-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0 0 16px}
.tk-j-head b{font-family:var(--serif);font-weight:400;font-size:1.6rem;letter-spacing:-.03em;color:var(--tk-navy)}
.tk-j-head span{font-size:.9rem;color:#576978}
.tk-j{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;counter-reset:tkj}
.tk-j li{counter-increment:tkj}
.tk-j a{position:relative;display:flex;flex-direction:column;gap:2px;height:100%;padding:16px 16px 14px;background:#fff;border:1px solid #dce5eb;border-top:4px solid #dce5eb;border-radius:4px;color:var(--tk-navy);transition:transform .18s,box-shadow .18s}
.tk-j a:hover{transform:translateY(-2px);box-shadow:0 14px 24px -18px #102b4680}
.tk-j a:before{content:counter(tkj);font-family:var(--serif);font-size:1.7rem;line-height:1;color:#9fb0bf;margin-bottom:6px}
.tk-j b{font-size:.95rem;font-weight:650}
.tk-j small{font-size:.78rem;color:#576978;line-height:1.35}
.tk-j em{position:absolute;top:12px;right:12px;font-style:normal;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:3px 7px;border-radius:2px}
.tk-j [aria-current=page]{background:var(--tk-navy);border-color:var(--tk-navy);color:#fff}
.tk-j [aria-current=page]:before{color:var(--tk-lime)}
.tk-j [aria-current=page] small{color:var(--tk-mute)}
.tk-j [aria-current=page] em{background:#ffffff1f;color:#fff}
.tk-j .tk-j-next{border-top-color:var(--tk-lime)}
.tk-j .tk-j-next em{background:var(--tk-lime);color:var(--tk-navy)}

@media(max-width:980px){
  .tk-cta{grid-template-columns:1fr;padding:32px;gap:28px}
  .tk-j{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .tk-cta-sec{padding:36px 0}
  .tk-cta{padding:26px 18px;margin:0 -4px}
  .tk-form{grid-template-columns:1fr;padding:20px 16px}
  .tk-form>.btn{justify-self:stretch}
  .tk-cta-actions .btn{width:100%}
  .tk-proof b{font-size:2rem}
  .tk-nextlink{margin-left:0}
  .tk-act .tk-share{width:100%;justify-content:center}
  .tk-j{grid-template-columns:1fr;gap:6px}
  .tk-j a{flex-direction:row;align-items:center;gap:12px;padding:12px 14px;border-top-width:1px;border-left:4px solid #dce5eb}
  .tk-j a:before{margin:0;font-size:1.4rem;width:20px}
  .tk-j .tk-j-next{border-left-color:var(--tk-lime)}
  .tk-j [aria-current=page]{border-left-color:var(--tk-lime)}
  .tk-j small{display:none}
  .tk-j-head b{font-size:1.4rem}
}