/* timcanfixit - shared design-system CSS.
   Generated by bin/analyze_css.py from the 16 source pages.
   Token VALUES live in inc/css/dynamic-css.php; only var(--x) refs remain here. */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
.container{max-width:var(--container); margin-inline:auto; padding-inline:var(--space-3)}
@media (max-width:640px){.container{padding-inline:var(--space-2)}}
:focus-visible{outline:3px solid var(--solder); outline-offset:3px; border-radius:4px}
.skip-link{position:absolute; left:-999px; top:auto; background:var(--solder); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 8px 0; z-index:200; font-weight:700; text-decoration:none}
.skip-link:focus{left:0; top:0}
.eyebrow{font-family:var(--font-mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--solder-text); font-weight:600; display:inline-flex; align-items:center; gap:.5em}
.eyebrow::before{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--solder);flex:none}
.on-dark .eyebrow{color:var(--solder-2)}
.on-dark .eyebrow::before{background:var(--solder-2)}
.section-head{display:flex; flex-direction:column; gap:.85rem; margin-bottom:var(--space-4)}
.btn:hover{transform:translateY(-2px)}
.btn-primary{color:#fff; background:linear-gradient(100deg,var(--navy) 0%, var(--solder-text) 100%); box-shadow:var(--shadow-m)}
header.site-header{position:sticky; top:0; z-index:100; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding-block:.85rem}
.brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--ink)}
.brand-word{font-weight:800; font-size:1.15rem; letter-spacing:-.01em; line-height:1.05}
.brand-sub{display:block; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; color:var(--ink-soft); text-transform:uppercase}
nav.primary-nav ul{display:flex; gap:var(--space-3)}
nav.primary-nav a{text-decoration:none; font-weight:600; font-size:.94rem; color:var(--ink-soft); padding:.4rem .1rem; border-bottom:2px solid transparent}
nav.primary-nav a:hover{color:var(--ink); border-color:var(--solder)}
.header-cta{display:flex; align-items:center; gap:var(--space-2)}
.header-phone{display:flex; flex-direction:column; text-decoration:none; color:var(--ink); text-align:right}
.header-phone small{font-family:var(--font-mono); font-size:.66rem; color:var(--ink-soft); letter-spacing:.06em; text-transform:uppercase}
.header-phone strong{font-size:1rem; font-variant-numeric:tabular-nums}
.nav-toggle{display:none; background:none; border:1px solid var(--line); border-radius:10px; width:42px; height:42px; align-items:center; justify-content:center}
@media (max-width:900px){nav.primary-nav ul{ display:none; } .header-phone{ display:none; } .nav-toggle{ display:flex; }}
.section{padding-block:var(--space-6)}
.section-tint{background:var(--paper-tint)}
.breadcrumb a{color:var(--breadcrumb-ink); text-decoration:none}
.breadcrumb a:hover{color:#fff}
footer.site-footer{background:var(--hero-bg); color:var(--footer-ink); padding-block:var(--space-5) var(--space-3)}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--space-4); padding-bottom:var(--space-4); border-bottom:1px solid var(--hero-line)}
@media (max-width:560px){.footer-grid{ grid-template-columns:1fr; }}
.footer-brand p{margin-top:.9rem; font-size:.9rem; max-width:32ch; color:var(--footer-ink-soft)}
.footer-col h4{color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; font-family:var(--font-mono); margin-bottom:1rem}
.footer-col ul{display:flex; flex-direction:column; gap:.65rem}
.footer-col a{color:var(--footer-ink); text-decoration:none; font-size:.92rem}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding-top:var(--space-3); font-size:.82rem; color:var(--footer-ink-dim)}
.footer-bottom a{color:var(--footer-ink-dim); text-decoration:underline}
@keyframes fadeUp{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}}
.hero .eyebrow, .page-hero .eyebrow{animation:fadeUp .6s var(--ease) both}
.hero h1, .page-hero h1{animation:fadeUp .7s var(--ease) .08s both}
.hero-lede, .page-hero-lede{animation:fadeUp .7s var(--ease) .18s both}
.hero-ctas, .page-hero-ctas{animation:fadeUp .7s var(--ease) .28s both}
.hero-microtrust{animation:fadeUp .7s var(--ease) .38s both}
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.is-visible{opacity:1; transform:translateY(0)}
.reveal-stagger > *{opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal-stagger.is-visible > *{opacity:1; transform:translateY(0)}
.reveal-stagger.is-visible > *:nth-child(1){transition-delay:.03s}
.reveal-stagger.is-visible > *:nth-child(2){transition-delay:.09s}
.reveal-stagger.is-visible > *:nth-child(3){transition-delay:.15s}
.reveal-stagger.is-visible > *:nth-child(4){transition-delay:.21s}
.reveal-stagger.is-visible > *:nth-child(5){transition-delay:.27s}
.reveal-stagger.is-visible > *:nth-child(6){transition-delay:.33s}
.reveal-stagger.is-visible > *:nth-child(7){transition-delay:.39s}
.reveal-stagger.is-visible > *:nth-child(8){transition-delay:.45s}
.btn:active{transform:translateY(0) scale(.97)}
.readout-num, .stat-num{transition:color .3s var(--ease)}
h1,h2,h3,h4{color:var(--ink) !important}
.hero h1,.hero h2,.hero h3, .page-hero h1,.page-hero h2,.page-hero h3, .cta-band h2, .dark-grid h2,.dark-grid h3, .dark-band h2,.dark-band h3, .buyback-band h2, .xbox-band h2,.xbox-band h3, .materials-band h2, .compare-card.yes h3, .dark-card h3, .qp-head span, footer.site-footer h4, footer.site-footer .brand-word{color:#fff !important}
.hero-lede,.page-hero-lede,.hero-microtrust, .cta-band p,.dark-grid p,.dark-band p,.buyback-band p,.xbox-band p{color:var(--hero-lede-ink) !important}
#quote-builder [class*="tb-qb"], #quote-builder [id*="tb-qb"], #quote-builder [class*="tim-buyback"], #quote-builder [class*="tim_buyback"]{max-width:100% !important; width:100% !important; margin-left:0 !important; margin-right:0 !important}