/* ============ Tyre Help / Resources ============ */
.breadcrumb{font-size:.82rem;color:var(--c-text-mute);margin-bottom:1rem;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.breadcrumb a{color:var(--c-text-soft);text-decoration:none}
.breadcrumb a:hover{color:var(--c-amber-d)}
.breadcrumb span{color:var(--c-line)}
.btn-block{display:flex;width:100%;justify-content:center;margin:.5rem 0 0}

.rsc-hero{background:var(--c-ink);color:#fff;padding:clamp(2.4rem,6vw,4rem) 0 clamp(2rem,5vw,3rem)}
.rsc-hero .breadcrumb{color:rgba(255,255,255,.55)}
.rsc-hero .breadcrumb a{color:rgba(255,255,255,.8)}
.rsc-hero .breadcrumb span{color:rgba(255,255,255,.3)}
.rsc-eyebrow{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-amber);background:rgba(245,168,46,.12);border:1px solid rgba(245,168,46,.3);padding:.3rem .7rem;border-radius:100px;margin-bottom:1rem}
.rsc-hero h1{font-size:clamp(1.8rem,5vw,2.9rem);line-height:1.1;margin:0 0 .6rem;color:#fff}
.rsc-lead{font-size:clamp(1rem,2.4vw,1.18rem);color:rgba(255,255,255,.82);max-width:60ch;margin:0}
.rsc-hero--single .rsc-lead{color:rgba(255,255,255,.8)}

.rsc-section{padding:var(--section-y) 0;background:var(--c-mist)}
.rsc-block-head{margin:0 0 1.3rem}
.rsc-block-head:not(:first-child){margin-top:3rem}
.rsc-block-head h2{font-size:clamp(1.3rem,3.5vw,1.9rem);margin:0 0 .25rem;color:var(--c-ink)}
.rsc-block-head p{margin:0;color:var(--c-text-soft)}

.rsc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:clamp(.9rem,2.5vw,1.4rem)}
.rsc-card{display:flex;flex-direction:column;gap:.5rem;background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--radius);padding:1.4rem;text-decoration:none;color:var(--c-text);box-shadow:var(--shadow);transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast)}
.rsc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--c-amber)}
.rsc-card__icon{font-size:2rem;line-height:1}
.rsc-card h3{font-size:1.12rem;margin:0;color:var(--c-ink)}
.rsc-card p{font-size:.92rem;color:var(--c-text-soft);margin:0;flex:1}
.rsc-card__go{font-weight:700;font-size:.9rem;color:var(--c-amber-d);margin-top:.3rem}
.rsc-card--tool{border-top:3px solid var(--c-amber)}
.rsc-empty{color:var(--c-text-soft);text-align:center;padding:2rem 0}

.rsc-cta-band{margin-top:3rem;background:var(--c-ink);color:#fff;border-radius:var(--radius-lg);padding:clamp(1.6rem,4vw,2.4rem);display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between}
.rsc-cta-band h2{margin:0 0 .3rem;color:#fff;font-size:clamp(1.3rem,3.5vw,1.7rem)}
.rsc-cta-band p{margin:0;color:rgba(255,255,255,.8);max-width:46ch}
.rsc-cta-band__btns{display:flex;flex-wrap:wrap;gap:.7rem}

/* single */
.rsc-single-wrap{display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,4vw,2.4rem)}
@media(min-width:920px){.rsc-single-wrap{grid-template-columns:minmax(0,1fr) 330px}}
.rsc-article{min-width:0;background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--radius);padding:clamp(1.2rem,4vw,2.2rem);box-shadow:var(--shadow)}
.rsc-body{font-size:1rem;line-height:1.7;color:var(--c-text)}
.rsc-body h2{font-size:1.35rem;color:var(--c-ink);margin:1.8rem 0 .6rem}
.rsc-body h3{font-size:1.1rem;color:var(--c-ink);margin:1.3rem 0 .4rem}
.rsc-body p{margin:0 0 1rem}
.rsc-body ul{margin:0 0 1rem;padding-left:1.2rem}
.rsc-body li{margin:.3rem 0}
.rsc-body strong{color:var(--c-ink)}
.rsc-disclaimer{margin-top:1.5rem;padding:.9rem 1.1rem;background:var(--c-mist-2);border-radius:var(--radius-sm);font-size:.84rem;color:var(--c-text-soft)}
.rsc-aside{min-width:0;display:flex;flex-direction:column;gap:1.1rem}
.rsc-aside-card{background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--radius);padding:1.3rem;box-shadow:var(--shadow)}
.rsc-aside-card h3{margin:0 0 .5rem;font-size:1.05rem;color:var(--c-ink)}
.rsc-aside-card>p{font-size:.9rem;color:var(--c-text-soft);margin:0 0 .8rem}
.rsc-aside-link{display:inline-block;margin-top:.6rem;font-weight:700;font-size:.9rem;color:var(--c-amber-d);text-decoration:none}
.rsc-related{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.2rem}
.rsc-related a{display:flex;gap:.5rem;align-items:center;padding:.55rem .4rem;border-radius:var(--radius-sm);text-decoration:none;color:var(--c-text);font-size:.92rem;transition:background var(--t-fast)}
.rsc-related a:hover{background:var(--c-mist)}

/* ===== Is It Safe To Drive tool ===== */
.rsc-tool{margin-bottom:1.6rem}
.sd-tool{--sd-c:var(--c-amber)}
.sd-noscript{color:var(--c-text-soft)}
.sd-step .sd-q,.sd-rt{font-size:clamp(1.15rem,3vw,1.5rem);color:var(--c-ink);margin:0 0 1rem}
.sd-options{display:flex;flex-direction:column;gap:.6rem}
.sd-opt{text-align:left;width:100%;padding:1rem 1.1rem;font-size:1rem;font-weight:600;color:var(--c-ink);background:var(--c-paper);border:1.5px solid var(--c-line);border-radius:var(--radius);cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast)}
.sd-opt:hover{border-color:var(--c-amber);background:#fff;transform:translateY(-1px)}
.sd-opt:active{transform:translateY(0)}
.sd-back{margin-top:1rem;background:none;border:none;color:var(--c-text-soft);font-weight:600;cursor:pointer;padding:.4rem 0;font-size:.9rem}
.sd-back:hover{color:var(--c-amber-d)}
.sd-result{border-radius:var(--radius);padding:clamp(1.1rem,3.5vw,1.6rem);border-left:5px solid var(--sd-c);background:var(--c-paper)}
.sd-result.sd-stop{--sd-c:var(--c-error);background:#fdf3f3}
.sd-result.sd-caution{--sd-c:var(--c-amber-d);background:#fff8ee}
.sd-result.sd-info{--sd-c:#2b7cd3;background:#f0f6fd}
.sd-badge{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--sd-c);margin-bottom:.5rem}
.sd-advice{margin:.3rem 0 1rem;padding-left:1.1rem}
.sd-advice li{margin:.45rem 0;line-height:1.55;color:var(--c-text)}
.sd-cta{display:flex;flex-direction:column;gap:.5rem;margin-top:.4rem}
.sd-again-wrap{margin:1rem 0 0}
.sd-restart{background:none;border:1.5px solid var(--c-line);color:var(--c-ink);font-weight:700;padding:.6rem 1rem;border-radius:var(--radius-sm);cursor:pointer;font-size:.9rem;transition:border-color var(--t-fast)}
.sd-restart:hover{border-color:var(--c-amber)}
@media(max-width:560px){.rsc-cta-band{flex-direction:column;align-items:flex-start}.rsc-cta-band__btns{width:100%}.rsc-cta-band__btns .btn{flex:1}}
/* ===== Tool 2: Tyre Size Explainer ===== */
.ts-wrap{max-width:680px}
.ts-heading{font-size:clamp(1.2rem,3vw,1.5rem);color:var(--c-ink);margin:0 0 .3rem}
.ts-sub{color:var(--c-text-soft);font-size:.95rem;margin:0 0 1.2rem}
.ts-input-row{display:flex;gap:.6rem;flex-wrap:wrap}
.ts-input{flex:1;min-width:200px;padding:.75rem 1rem;font-size:1.05rem;border:1.5px solid var(--c-line);border-radius:var(--radius);color:var(--c-ink);background:var(--c-paper);transition:border-color var(--t-fast)}
.ts-input:focus{outline:none;border-color:var(--c-amber)}
.ts-btn{white-space:nowrap}
.ts-err{color:var(--c-error);font-size:.9rem;margin:.5rem 0 0}
.ts-result{margin-top:1.6rem}
.ts-res-heading{font-size:1.1rem;color:var(--c-ink);margin:0 0 1rem}
.ts-res-heading em{color:var(--c-amber-d);font-style:normal}
.ts-bar{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.3rem}
.ts-seg{font-size:1.25rem;font-weight:800;border-bottom:3px solid;padding:0 .1rem .2rem;line-height:1.2}
.ts-seg sub{font-size:.55rem;font-weight:600;vertical-align:super}
.ts-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:.8rem;margin-bottom:1.2rem}
.ts-card{background:var(--c-mist);border-radius:var(--radius-sm);overflow:hidden}
.ts-card-top{border-top:4px solid;padding:.8rem .9rem .5rem}
.ts-card-val{font-size:1.5rem;font-weight:800;display:block;line-height:1}
.ts-card-lbl{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--c-text-soft);display:block;margin-top:.15rem}
.ts-extra{display:inline-block;margin-top:.3rem;font-size:.82rem;font-weight:700;color:var(--c-ink);background:var(--c-paper);border-radius:100px;padding:.15rem .6rem}
.ts-card-tip{font-size:.88rem;color:var(--c-text);padding:.7rem .9rem .8rem;margin:0;line-height:1.5}
.ts-calc{background:var(--c-ink);color:#fff;border-radius:var(--radius-sm);padding:1rem 1.1rem;margin-bottom:1.2rem}
.ts-calc h3{margin:0 0 .7rem;font-size:.95rem;color:var(--c-amber);text-transform:uppercase;letter-spacing:.05em}
.ts-calc-grid{display:flex;gap:2rem}
.ts-calc-val{font-size:1.8rem;font-weight:800;display:block;line-height:1;color:#fff}
.ts-calc-val sub{font-size:.6rem;font-weight:600}
.ts-calc-lbl{font-size:.8rem;color:rgba(255,255,255,.65);display:block;margin-top:.2rem}
@media(max-width:480px){.ts-input-row{flex-direction:column}.ts-btn{width:100%}}

/* ===== Tool 3: Tyre Pressure Finder ===== */
.tp-wrap{max-width:640px}
.tp-search-wrap{position:relative;margin-bottom:1rem}
.tp-sug{position:absolute;z-index:100;top:calc(100% + 4px);left:0;right:0;background:var(--c-paper);border:1.5px solid var(--c-amber);border-radius:var(--radius);list-style:none;margin:0;padding:.3rem 0;box-shadow:var(--shadow-md)}
.tp-sug-item{padding:.65rem 1rem;cursor:pointer;font-size:.95rem;text-transform:capitalize;color:var(--c-ink)}
.tp-sug-item:hover,.tp-sug-item:focus{background:var(--c-mist);outline:none}
.tp-load-wrap{margin-bottom:1.2rem}
.tp-load-label{font-size:.88rem;font-weight:700;color:var(--c-text-soft);margin:0 0 .4rem;text-transform:uppercase;letter-spacing:.05em}
.tp-load-btns{display:flex;flex-wrap:wrap;gap:.5rem}
.tp-load-btn{padding:.55rem 1rem;border:1.5px solid var(--c-line);border-radius:var(--radius-sm);background:var(--c-paper);font-size:.9rem;color:var(--c-ink);cursor:pointer;transition:all var(--t-fast)}
.tp-load-btn:hover{border-color:var(--c-amber)}
.tp-load-btn.active{background:var(--c-amber);border-color:var(--c-amber);color:#000;font-weight:700}
.tp-result{margin-top:1.2rem;background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--radius);padding:1.3rem;box-shadow:var(--shadow)}
.tp-gauges{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.tp-gauge-label{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--c-text-soft);margin-bottom:.5rem}
.tp-gauge-track{height:10px;background:var(--c-mist-2);border-radius:100px;overflow:hidden;margin-bottom:.5rem}
.tp-gauge-fill{height:100%;border-radius:100px;transition:width .4s ease}
.tp-gauge-vals{display:flex;gap:1rem;align-items:baseline}
.tp-psi{font-size:2rem;font-weight:800;line-height:1}
.tp-psi sub,.tp-bar sub{font-size:.6rem;font-weight:600}
.tp-bar{font-size:1.1rem;font-weight:600;color:var(--c-text-soft)}
.tp-load-note{font-size:.83rem;color:var(--c-text-soft);margin:.8rem 0 .6rem;font-style:italic}
.tp-cta-mini{margin-top:.8rem}
.tp-note{font-size:.82rem;color:var(--c-text-soft);margin-top:.8rem;background:var(--c-mist);padding:.7rem .9rem;border-radius:var(--radius-sm)}
@media(max-width:480px){.tp-gauges{grid-template-columns:1fr}}

/* ===== Tool 4: Tread Depth Checker ===== */
.tr-wrap{max-width:640px}
.tr-coin-box{display:flex;gap:1rem;align-items:center;background:var(--c-mist);border-radius:var(--radius-sm);padding:1rem;margin-bottom:1.2rem}
.tr-coin{width:52px;height:52px;min-width:52px;border-radius:50%;background:linear-gradient(135deg,#c8a951,#e8c96a,#a07820);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.tr-coin-inner{font-size:.72rem;font-weight:900;color:#5a3e00;letter-spacing:-.01em}
.tr-coin-info{font-size:.88rem;color:var(--c-text);line-height:1.5}
.tr-input-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:1.5rem}
.tr-label{font-size:.9rem;font-weight:700;color:var(--c-ink);white-space:nowrap}
.tr-num{width:120px;min-width:80px}
.tr-tyres{border-top:1px solid var(--c-line);padding-top:1.2rem}
.tr-tyre-label{font-size:.85rem;font-weight:700;color:var(--c-text-soft);text-transform:uppercase;letter-spacing:.05em;margin:0 0 .6rem}
.tr-tyre-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:.9rem}
.tr-tyre-cell{display:flex;flex-direction:column;gap:.3rem}
.tr-tyre-lbl{font-size:.82rem;font-weight:700;color:var(--c-text-soft)}
.tr-result{margin-top:1.3rem}
.tr-verdict{display:flex;gap:1rem;align-items:flex-start;padding:1.1rem;border-radius:var(--radius);margin-bottom:.8rem}
.tr-verdict-icon{font-size:1.6rem;line-height:1;flex-shrink:0}
.tr-verdict-body h3{margin:0 0 .35rem;font-size:1.05rem;color:var(--c-ink)}
.tr-verdict-body p{margin:0 0 .5rem;font-size:.93rem;line-height:1.55;color:var(--c-text)}
.tr-good{background:#f0fdf4;border-left:5px solid #22c55e}
.tr-warn{background:#fff8ee;border-left:5px solid var(--c-amber)}
.tr-urgent{background:#fff3e0;border-left:5px solid #f97316}
.tr-illegal{background:#fdf3f3;border-left:5px solid var(--c-error)}
.tr-fine{background:#fee2e2;border-radius:var(--radius-sm);padding:.5rem .8rem;font-size:.84rem;font-weight:700;color:#991b1b}
.tr-ctas{display:flex;flex-direction:column;gap:.5rem;margin-top:.6rem;max-width:280px}
.tr-ctas-all{margin-top:.9rem;max-width:280px}
.tr-bar-wrap{position:relative;padding-bottom:1.2rem}
.tr-bar-track{height:12px;background:var(--c-mist-2);border-radius:100px;overflow:hidden}
.tr-bar-fill{height:100%;border-radius:100px;transition:width .5s ease}
.tr-bar-good{background:#22c55e}
.tr-bar-warn{background:var(--c-amber)}
.tr-bar-urgent{background:#f97316}
.tr-bar-illegal{background:var(--c-error)}
.tr-bar-marks{position:relative;height:1.2rem;margin-top:.2rem}
.tr-bar-marks span{position:absolute;font-size:.7rem;color:var(--c-text-soft);transform:translateX(-50%)}
.tr-all-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin-bottom:.6rem}
.tr-all-cell{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.9rem;border-radius:var(--radius-sm);border:2px solid}
.tr-all-cell.tr-good{border-color:#22c55e;background:#f0fdf4}
.tr-all-cell.tr-warn{border-color:var(--c-amber);background:#fff8ee}
.tr-all-cell.tr-urgent{border-color:#f97316;background:#fff3e0}
.tr-all-cell.tr-illegal{border-color:var(--c-error);background:#fdf3f3}
.tr-all-icon{font-size:1.3rem}
.tr-all-name{font-size:.8rem;font-weight:700;color:var(--c-text-soft)}
.tr-all-mm{font-size:1.5rem;font-weight:800;color:var(--c-ink)}
.tr-all-lbl{font-size:.78rem;font-weight:700;color:var(--c-text-soft)}
@media(max-width:480px){.tr-tyre-grid{grid-template-columns:1fr 1fr}}

/* Mobile fixes */
@media(max-width:480px){
  .ts-input{min-width:0;width:100%}
  .ts-btn{white-space:normal}
  .tr-label{white-space:normal;font-size:.8rem}
  .tr-num{width:80px;min-width:60px}
  .rsc-cta-band__btns .btn{white-space:normal;text-align:center;line-height:1.4}
}
