/* ═══════════════════════════════════════════════════════════════════════════
   Landing teasers for /calculator and /replay (2026-09-16)
   Markup + script: the TOOLS-TEASER block in index.html, just above #features.
   Uses land-skin.css tokens. Remove = delete the block in index.html.
   ═══════════════════════════════════════════════════════════════════════════ */
.tt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;overflow:hidden;border:1px solid var(--hair);border-radius:16px;background:var(--hair)}
.tt-card{display:flex;flex-direction:column;gap:10px;min-width:0;padding:28px 30px;background:var(--panel);text-decoration:none!important;color:inherit;transition:background .2s}
.tt-card:hover{background:var(--panel-2)}
.tt-card:focus-visible{outline:2px solid var(--amber-hi);outline-offset:-4px}
.tt-cap{margin:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-hi)}
.tt-h{margin:0;font-size:clamp(1.15rem,2vw,1.45rem);font-weight:600;line-height:1.25;letter-spacing:-.025em;color:var(--t-hi)}
.tt-p{margin:0;font-size:13.5px;line-height:1.65;color:var(--t-mid)}
.tt-live{margin-top:4px;padding:12px 14px;border:1px solid var(--hair);border-radius:10px;background:rgba(255,236,214,.02);font-size:12.5px;line-height:1.6;color:var(--t-low);min-height:66px}
.tt-live b{font-weight:500;color:var(--t-hi)}
.tt-live .w{color:var(--up)} .tt-live .l{color:var(--down)}
.tt-go{margin-top:auto;padding-top:6px;font-size:13px;font-weight:500;color:var(--amber-hi)}
.tt-card:hover .tt-go{color:#ffc98c}
@media (max-width:760px){.tt-grid{grid-template-columns:minmax(0,1fr)}.tt-card{padding:22px 20px}}