/* ════════════════════════════════════════════════════════════════════
 * TOOL PAGE TEMPLATE - net-new pieces (reuses tokens.css + homepage.css)
 * Light utility page. Tool widget is the dominant focus.
 * ════════════════════════════════════════════════════════════════════ */

/* ── Tool hero (light) ── */
.tool-hero{ background:var(--bg); padding-block:var(--space-12) var(--space-8); text-align:center; }
.breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--space-2); font-size:var(--text-body-sm); color:var(--text-tertiary); margin-bottom:var(--space-5); }
.breadcrumb a{ color:var(--text-tertiary); text-decoration:none; }
.breadcrumb a:hover{ color:var(--text-secondary); }
.breadcrumb .sep{ color:var(--border-default); }
.breadcrumb [aria-current]{ color:var(--text-secondary); }
.tool-hero h1{ font-size:clamp(32px,5vw,48px); letter-spacing:var(--tracking-tight); margin-bottom:var(--space-4); }
.tool-hero .lede{ font-size:var(--text-body-lg); color:var(--text-secondary); line-height:var(--leading-relaxed); max-width:600px; margin:0 auto var(--space-3); }
.tool-nogate{ font-size:var(--text-caption); font-style:italic; color:var(--color-success-text); font-weight:var(--weight-semibold); }

/* ── Tool widget (dominant) ── */
.widget-wrap{ background:var(--bg-subtle); padding-block:var(--space-8) var(--space-20); }
.widget{ max-width:620px; margin-inline:auto; background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-2xl); box-shadow:var(--shadow-lg); padding:var(--space-8); }
@media (max-width:560px){ .widget{ padding:var(--space-6); } }

.wz-progress{ display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-8); }
.wz-bar{ flex:1; height:6px; border-radius:var(--radius-full); background:var(--border-subtle); overflow:hidden; }
.wz-bar-fill{ height:100%; background:var(--brand-gradient); border-radius:var(--radius-full); width:25%; transition:width var(--duration-base) var(--ease-out); }
.wz-count{ font-family:var(--font-mono); font-size:var(--text-caption); color:var(--text-tertiary); white-space:nowrap; }

.wz-step{ display:none; }
.wz-step.is-active{ display:block; animation:wzfade var(--duration-base) var(--ease-out); }
@keyframes wzfade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.wz-q{ font-family:var(--font-display); font-size:var(--text-h4); font-weight:var(--weight-semibold); margin-bottom:var(--space-5); }

/* radio cards */
.wz-options{ display:grid; grid-template-columns:1fr; gap:var(--space-3); }
@media (min-width:440px){ .wz-options.two{ grid-template-columns:1fr 1fr; } }
.wz-opt{ position:relative; }
.wz-opt input{ position:absolute; opacity:0; width:1px; height:1px; }
.wz-opt label{ display:flex; align-items:center; gap:var(--space-3); min-height:52px; padding:var(--space-3) var(--space-4); border:1px solid var(--border-default); border-radius:var(--radius-lg); cursor:pointer; font-size:var(--text-body); font-weight:var(--weight-medium); color:var(--text-primary); }
.wz-opt label::before{ content:''; width:18px; height:18px; border-radius:var(--radius-full); border:2px solid var(--border-strong); flex:none; }
.wz-opt label:hover{ border-color:var(--brand-purple); background:var(--bg-subtle); }
.wz-opt input:checked + label{ border-color:var(--brand-purple); background:var(--brand-purple-light); color:var(--brand-purple-hover); }
.wz-opt input:checked + label::before{ border-color:var(--brand-purple); background:var(--brand-purple); box-shadow:inset 0 0 0 3px var(--brand-purple-light); }
.wz-opt input:focus-visible + label{ box-shadow:var(--shadow-focus-ring); }

.wz-select{ width:100%; font-family:var(--font-body); font-size:var(--text-body); color:var(--text-primary); background:var(--bg); border:1px solid var(--border-default); border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); min-height:48px; }
.wz-select:focus{ outline:none; border-color:var(--brand-blue); box-shadow:var(--shadow-focus-ring); }

.wz-nav{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-top:var(--space-8); }
.wz-back{ background:transparent; border:0; color:var(--text-tertiary); font-size:var(--text-body-sm); font-weight:var(--weight-semibold); cursor:pointer; padding:var(--space-2); min-height:44px; }
.wz-back:hover{ color:var(--text-secondary); }
.wz-back[hidden]{ visibility:hidden; }
.wz-nav .spacer{ flex:1; }

/* results */
.wz-results{ display:none; }
.wz-results.is-shown{ display:block; animation:wzfade var(--duration-slow) var(--ease-out); }
.wz-results-head{ text-align:center; margin-bottom:var(--space-6); }
.wz-results-head .eyebrow{ color:var(--brand-purple); }
.wz-results-head h3{ font-size:var(--text-h3); letter-spacing:var(--tracking-tight); }
.wz-res-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-4); }
@media (min-width:480px){ .wz-res-grid{ grid-template-columns:repeat(3,1fr); } }
.wz-res{ text-align:center; background:var(--bg-subtle); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:var(--space-5) var(--space-4); }
.wz-res .k{ font-size:var(--text-caption); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:var(--tracking-wide); margin-bottom:var(--space-2); }
.wz-res .v{ font-family:var(--font-mono); font-size:28px; font-weight:var(--weight-black); letter-spacing:var(--tracking-tight); background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.wz-res .vsub{ font-size:var(--text-caption); color:var(--text-secondary); margin-top:var(--space-1); }
.wz-res-note{ text-align:center; font-size:var(--text-caption); color:var(--text-tertiary); font-style:italic; margin-top:var(--space-6); line-height:var(--leading-relaxed); }
.wz-restart{ display:block; margin:var(--space-6) auto 0; background:transparent; border:1px solid var(--border-default); border-radius:var(--radius-md); color:var(--text-secondary); font-size:var(--text-body-sm); font-weight:var(--weight-semibold); padding:var(--space-3) var(--space-5); cursor:pointer; min-height:44px; }
.wz-restart:hover{ background:var(--bg-subtle); border-color:var(--border-strong); }

/* ── How it works (numbered) ── */
.how-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-6); counter-reset:hw; }
@media (min-width:680px){ .how-grid{ grid-template-columns:repeat(3,1fr); } }
.how-step{ padding:var(--space-6); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); background:var(--bg-card); counter-increment:hw; }
.how-step .n{ font-family:var(--font-mono); font-size:var(--text-caption); font-weight:var(--weight-medium); color:var(--brand-purple); letter-spacing:var(--tracking-wide); display:block; margin-bottom:var(--space-3); }
.how-step .n::before{ content:counter(hw, decimal-leading-zero); }
.how-step h3{ font-size:var(--text-h4); margin-bottom:var(--space-2); }
.how-step p{ font-size:var(--text-body-sm); color:var(--text-secondary); line-height:var(--leading-relaxed); }

/* ── Why we built this ── */
.whybuilt{ background:var(--bg-subtle); }
.whybuilt-inner{ max-width:var(--container-prose); margin-inline:auto; text-align:center; }
.whybuilt-inner p{ font-size:var(--text-body-lg); color:var(--text-secondary); line-height:var(--leading-relaxed); margin-bottom:var(--space-5); }

/* ── Related tools ── */
.related-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-5); }
@media (min-width:560px){ .related-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:920px){ .related-grid{ grid-template-columns:repeat(4,1fr); } }

/* ── In-tool agency CTA ── */
.intool-cta{ background:var(--bg-subtle); }
.intool-card{ max-width:720px; margin-inline:auto; background:linear-gradient(135deg, var(--brand-purple-light) 0%, var(--brand-blue-light) 100%); border:1px solid #ddd6fe; border-radius:var(--radius-2xl); padding:var(--space-10); text-align:center; }
.intool-card .eyebrow{ color:var(--brand-purple); }
.intool-card h3{ font-size:var(--text-h3); letter-spacing:var(--tracking-tight); margin-bottom:var(--space-3); }
.intool-card p{ font-size:var(--text-body); color:var(--text-secondary); line-height:var(--leading-relaxed); max-width:480px; margin:0 auto var(--space-6); }

/* ── Generic calculator / generator fields ── */
.tw-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
@media (max-width:520px){ .tw-grid{ grid-template-columns:1fr; } }
.tw-field{ display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-4); }
.tw-field label{ font-size:var(--text-body-sm); font-weight:var(--weight-medium); color:var(--text-primary); }
.tw-input{ width:100%; font-family:var(--font-body); font-size:var(--text-body); color:var(--text-primary); background:var(--bg); border:1px solid var(--border-default); border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); min-height:48px; }
.tw-input:focus{ outline:none; border-color:var(--brand-blue); box-shadow:var(--shadow-focus-ring); }
.tw-hint{ font-size:var(--text-caption); color:var(--text-tertiary); }
.tw-out{ font-family:var(--font-mono); font-size:var(--text-body-sm); white-space:pre-wrap; word-break:break-word; background:var(--bg-subtle); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:var(--space-5); color:var(--text-primary); line-height:var(--leading-relaxed); }
.tw-score{ font-family:var(--font-mono); font-size:48px; font-weight:var(--weight-black); background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; text-align:center; }
.tw-options{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.tw-options .opt{ position:relative; }
.tw-options input{ position:absolute; opacity:0; width:1px; height:1px; }
.tw-options label{ display:inline-flex; align-items:center; min-height:44px; padding:var(--space-2) var(--space-4); border:1px solid var(--border-default); border-radius:var(--radius-md); cursor:pointer; font-size:var(--text-body-sm); font-weight:var(--weight-medium); }
.tw-options input:checked + label{ border-color:var(--brand-purple); background:var(--brand-purple-light); color:var(--brand-purple-hover); }

/* ── Tool content body (how-it-works + methodology + FAQ) ──
 * Tighter rhythm than the global .section so the supporting copy reads as one
 * continuous page instead of text floating in large empty bands. */
.tool-body .section{ padding-block:var(--space-12); }
@media (min-width:768px){ .tool-body .section{ padding-block:var(--space-14); } }
.tool-body .section-head{ margin-bottom:var(--space-8); }
.tool-body .prose{ margin-inline:auto; }
.tool-body .faq-list{ max-width:var(--container-prose); margin-inline:auto; }

/* ── Back to top (JS toggles .is-visible after scroll) ── */
.to-top{ position:fixed; right:var(--space-6); bottom:var(--space-6); z-index:60; width:46px; height:46px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-full); background:var(--brand-gradient); color:#fff; border:0; box-shadow:var(--shadow-lg); text-decoration:none; font-size:20px; line-height:1; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility var(--duration-base); }
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ filter:brightness(1.06); color:#fff; }
.to-top:focus-visible{ outline:none; box-shadow:var(--shadow-focus-ring); }
@media (max-width:560px){ .to-top{ right:var(--space-4); bottom:var(--space-4); } }