/* currentcosts.com — stylesheet. A flat-URL cost directory: sticky masthead, indigo hero + search, category/state/niche grids, dark range panel, machine-readable cost table, prose guide, FAQ, hub link lists, affiliate CTA and a deep-indigo footer. Identity: Fraunces (display) + Manrope (UI/body) + JetBrains Mono (all figures), all self-hosted via fonts.css. Palette: deep indigo-violet #241542, plum #7A2E5C, amber money-action #B45309, near-white #FFFFFF/#F6F4F8, hairline #E2DDE8, ink #1C1726. Deliberately NOT the sibling identities: no #0061FF/Inter/Outfit rounded cards (costreference.com), no #18675D/Bitter/Public Sans (expectedcosts.com). Every value traces to a :root token; the 17 category accents re-point --accent (and its strong/soft steps) from the [data-category] attribute the templates put on . Contrast proof: python3 scripts/check-contrast.py -> "RESULT: ALL PAIRS PASS". */ :root{ --font-display:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif; --font-sans:"Manrope",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --font-num:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --primary:#241542; /* masthead, headings, dark panels */ --primary-light:#3B2766; /* subheads, hovered dark links */ --text:#1C1726; /* body copy */ --text-light:#544C63; /* secondary copy, captions */ --text-muted:#6E6580; /* fine print */ --bg:#FFFFFF; --surface:#F6F4F8; /* inset panels, zebra, chips */ --surface-hover:#EFEBF4; --border:#E2DDE8; /* hairline rules */ --border-strong:#CFC7DA; --accent:#7A2E5C; /* plum: links, focus, category tints */ --accent-strong:#612247; --accent-soft:#F7EBF1; --cta:#B45309; /* amber: money actions only */ --cta-hover:#92400E; --cta-soft:#FEF7EC; --cta-border:#F3DFC2; --cta-light:#F0A24A; /* the range dash on the dark panel */ --success:#15603F; --warn:#7A4A00; --danger:#A32017; --danger-soft:#FBE9E7; --danger-border:#F0C4BE; --dark:#241542; /* footer + dark panels */ --dark-text:#D5CCE3; --dark-muted:#B3A6CC; --white:#FFFFFF; --hero-a:#2B1954; /* hero + range-panel gradient stops */ --hero-b:#1A0F33; --range-a:#2A1850; --range-b:#1D1139; --radius:8px; --radius-sm:5px; --shadow:0 1px 2px rgba(36,21,66,.05); --shadow-md:0 10px 30px rgba(36,21,66,.12); --transition:background-color .16s ease,border-color .16s ease,color .16s ease, transform .16s ease,box-shadow .16s ease; --container:1200px; --gutter:20px; --measure:68ch; --section-pad:64px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px} body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans); font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased} img,svg{max-width:100%} a{color:var(--accent);text-decoration:none} a:hover{color:var(--accent-strong);text-decoration:underline} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px} ::selection{background:var(--accent);color:var(--white)} hr{border:0;border-top:1px solid var(--border);margin:28px 0} /* ---------- type ---------- */ h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;color:var(--primary); line-height:1.15;letter-spacing:-.015em;margin:0 0 12px} h1{font-size:clamp(30px,5.4vw,46px);line-height:1.06;letter-spacing:-.025em;margin:14px 0 16px} h2{font-size:clamp(22px,3vw,30px);margin:38px 0 12px} h3{font-size:clamp(18px,2.2vw,21px);margin:26px 0 8px} h2:first-child,h3:first-child{margin-top:0} p{margin:0 0 16px} strong{font-weight:700;color:var(--primary)} em{font-style:italic} ul,ol{padding-left:22px} li{margin:0 0 6px} /* ---------- shared utilities ---------- */ .container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)} .skip{position:fixed;left:12px;top:12px;z-index:200;transform:translateY(-220%); background:var(--primary);color:var(--white);padding:12px 18px;border-radius:var(--radius-sm); font-weight:700} .skip:focus{transform:none;color:var(--white);text-decoration:none} .eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--accent);margin:0 0 10px} .lede{font-size:18px;line-height:1.65;color:var(--text-light);max-width:var(--measure)} .answer{max-width:var(--measure)} .small{font-size:13.5px;color:var(--text-light)} .updated{font-size:13px;color:var(--text-muted);margin:4px 0 18px} .updated time{font-weight:600;color:var(--text-light)} /* ---------- masthead ---------- */ .site-header{position:sticky;top:0;z-index:100;background:var(--white); border-bottom:1px solid var(--border)} .site-header::before{content:"";display:block;height:3px; background:linear-gradient(90deg,var(--primary),var(--accent) 55%,var(--cta))} .header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px; min-height:68px} .logo{display:inline-flex;align-items:center;min-height:44px} .logo-pic{display:block;line-height:0} .logo-pic img{display:block;width:162px;height:36px} .nav-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px; min-width:44px;padding:10px 14px;background:var(--white);color:var(--primary); border:1px solid var(--border-strong);border-radius:var(--radius-sm);font:inherit; font-weight:700;font-size:14px;cursor:pointer;transition:var(--transition)} .nav-toggle:hover{border-color:var(--accent);color:var(--accent)} .nav-toggle[aria-expanded="true"]{background:var(--primary);border-color:var(--primary); color:var(--white)} .site-header nav{position:absolute;left:0;right:0;top:100%} .nav-menu{display:none;flex-direction:column;margin:0;padding:8px var(--gutter); list-style:none;background:var(--white);border-bottom:1px solid var(--border); box-shadow:var(--shadow-md)} .nav-menu[data-open="1"]{display:flex} .nav-menu li{margin:0} .nav-menu a{display:flex;align-items:center;min-height:44px;padding:10px 12px; border-radius:var(--radius-sm);color:var(--text);font-weight:600;font-size:15px; transition:var(--transition)} .nav-menu a:hover{background:var(--accent-soft);color:var(--accent);text-decoration:none} /* ---------- hero + search ---------- */ .home-hero{position:relative;overflow:hidden;color:var(--white);padding:64px 0 56px; border-bottom:3px solid var(--cta); background:radial-gradient(900px 420px at 88% -12%,rgba(122,46,92,.6),transparent 62%), linear-gradient(155deg,var(--hero-a) 0%,var(--primary) 55%,var(--hero-b) 100%)} .home-hero h1{color:var(--white);max-width:15ch} .hero-sub{font-size:17.5px;line-height:1.65;color:var(--dark-text);max-width:58ch;margin:16px 0 0} .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} .search-box{position:relative;display:flex;flex-wrap:wrap;gap:10px;max-width:640px;margin:30px 0 0} .search-box input{flex:1 1 260px;min-width:0;min-height:50px;padding:13px 18px;font:inherit; font-size:16px;color:var(--text);background:var(--white);border:2px solid transparent; border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.28)} .search-box input::placeholder{color:var(--text-muted)} .search-box input:focus-visible{outline:2px solid var(--cta);outline-offset:2px; border-color:var(--cta)} .search-results{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60; background:var(--white);border:1px solid var(--border);border-radius:var(--radius); box-shadow:var(--shadow-md);overflow:hidden} .search-results[data-open="1"]{display:block} .search-results a{display:flex;align-items:center;min-height:46px;padding:10px 18px; border-bottom:1px solid var(--border);color:var(--text);font-weight:600;font-size:15px} .search-results a:last-child{border-bottom:0} .search-results a:hover{background:var(--surface);color:var(--accent);text-decoration:none} /* ---------- buttons ---------- */ .btn-primary,.btn-secondary,.cta__btn{display:inline-flex;align-items:center; justify-content:center;gap:8px;font:inherit;font-weight:700;font-size:15px; border-radius:var(--radius);cursor:pointer;transition:var(--transition)} .btn-primary{min-height:50px;padding:13px 26px;background:var(--primary);color:var(--white); border:0} .btn-primary:hover{background:var(--accent);color:var(--white);text-decoration:none} .btn-secondary{min-height:46px;padding:12px 22px;background:var(--white);color:var(--primary); border:1px solid var(--border-strong)} .btn-secondary:hover{border-color:var(--accent);color:var(--accent);text-decoration:none} .btn-primary:active,.btn-secondary:active,.cta__btn:active{transform:translateY(1px)} .btn-primary:disabled,.btn-secondary:disabled,.cta__btn:disabled{opacity:.55;cursor:not-allowed} .home-hero .btn-secondary{background:rgba(255,255,255,.08);color:var(--white); border-color:rgba(255,255,255,.38)} .home-hero .btn-secondary:hover{background:rgba(255,255,255,.18);border-color:var(--white); color:var(--white)} .home-hero .btn-primary{background:var(--white);color:var(--primary)} .home-hero .btn-primary:hover{background:var(--accent-soft);color:var(--accent)} /* ---------- sections + cards ---------- */ .section{padding:var(--section-pad) 0;border-bottom:1px solid var(--border)} .section:last-of-type{border-bottom:0} .section-header{margin:0 0 26px} .section-header h2{margin:0 0 8px} .section-header p{color:var(--text-light);max-width:64ch;margin:0} .category-grid,.state-grid,.niche-grid,.card-grid,.city-grid{display:grid;gap:14px;margin:28px 0; padding:0;list-style:none} .category-grid{grid-template-columns:repeat(auto-fill,minmax(228px,1fr))} .state-grid,.city-grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr))} .niche-grid,.card-grid{grid-template-columns:repeat(auto-fill,minmax(276px,1fr))} .category-card,.niche-card{display:flex;flex-direction:column;gap:8px;height:100%;padding:22px; background:var(--white);border:1px solid var(--border);border-radius:var(--radius); color:var(--text);transition:var(--transition)} .category-card:hover,.niche-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md); transform:translateY(-2px);text-decoration:none} .cat-initial{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px; border-radius:12px;background:var(--accent-soft);color:var(--accent); font-family:var(--font-display);font-weight:700;font-size:22px} .category-card h3,.niche-card h3{margin:4px 0 0;font-size:17px} .category-card p,.niche-card p{margin:0;font-size:14px;color:var(--text-light)} .state-card,.city-card{display:flex;align-items:center;min-height:44px;padding:12px 16px; background:var(--white);border:1px solid var(--border);border-radius:var(--radius); color:var(--text);font-weight:600;font-size:15px;transition:var(--transition)} .state-card:hover,.city-card:hover{border-color:var(--accent);color:var(--accent); text-decoration:none} .state-name{display:block;font-size:12.5px;font-weight:400;color:var(--text-light)} .card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius); padding:20px;height:100%} .card h3{margin:0 0 6px;font-size:17px} .card p{margin:0;font-size:14px;color:var(--text-light)} /* ---------- breadcrumbs ---------- */ .crumbs{font-size:13px;color:var(--text-muted);padding:22px 0 0} .crumbs ol{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none} .crumbs li{margin:0} .crumbs li+li::before{content:"›";margin-right:6px;color:var(--border-strong)} .crumbs a{color:var(--text-light)} .crumbs a:hover{color:var(--accent)} .crumbs [aria-current="page"]{color:var(--text)} /* ---------- money page layout ---------- */ .content-grid{display:grid;gap:32px;padding:32px 0} .content-main{min-width:0} .content-sidebar{display:flex;flex-direction:column;gap:18px} .sidebar-card{background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);padding:20px} .sidebar-card h2{font-family:var(--font-sans);font-size:12px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:var(--primary);margin:0 0 8px} .related-list{list-style:none;margin:0;padding:0} .related-list li{border-bottom:1px solid var(--border);margin:0} .related-list li:last-child{border-bottom:0} .related-list a{display:flex;align-items:center;min-height:44px;color:var(--text); font-weight:600;font-size:14.5px} .related-list a:hover{color:var(--accent);text-decoration:none} .up-link{margin:24px 0;font-weight:600} /* ---------- range panel (signature) ---------- */ .range-box{position:relative;margin:0 0 28px;padding:28px;border-radius:12px; border-left:6px solid var(--accent);color:var(--white);box-shadow:var(--shadow-md); background:linear-gradient(135deg,var(--range-a) 0%,var(--primary) 60%,var(--range-b) 100%)} .range-label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--dark-muted);margin:0 0 10px} .range-value{font-family:var(--font-display);font-weight:700;color:var(--white); font-size:clamp(30px,6vw,46px);line-height:1.05;letter-spacing:-.02em;margin:0} .range-dash{color:var(--cta-light);padding:0 2px} .range-low,.range-high{white-space:nowrap} .range-unit{font-family:var(--font-num);font-size:14px;color:var(--dark-text);margin:12px 0 0} .key-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px; margin:18px 0 0;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.16)} .key-facts div{display:flex;flex-direction:column;gap:3px} .key-facts dt{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--dark-muted)} .key-facts dd{margin:0;font-family:var(--font-num);font-size:16px;color:var(--white)} .range-basis{margin:16px 0 0;font-size:12.5px;color:var(--dark-muted)} .local-note,.coverage{max-width:var(--measure);margin:0 0 20px;padding:14px 16px; background:var(--surface);border-left:3px solid var(--accent); border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:14.5px;color:var(--text-light)} .coverage{margin-top:-6px} /* ---------- cost table ---------- */ .breakdown{margin:32px 0} .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border); border-radius:var(--radius);background:var(--white)} .cost-table{width:100%;min-width:560px;border-collapse:separate;border-spacing:0;font-size:15px} .cost-table caption{caption-side:top;text-align:left;padding:14px 16px;font-size:13px; color:var(--text-light);background:var(--surface);border-bottom:1px solid var(--border)} .cost-table th,.cost-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border)} .cost-table thead th{position:sticky;top:0;z-index:2;background:var(--surface); font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--text-light)} .cost-table tbody th{font-weight:700;font-size:15px;color:var(--primary)} .cost-table td{color:var(--text)} .cost-table th:nth-child(2),.cost-table th:nth-child(3),.cost-table th:nth-child(4), .cost-table td:nth-child(2),.cost-table td:nth-child(3),.cost-table td:nth-child(4){ text-align:right;font-family:var(--font-num);font-variant-numeric:tabular-nums} .cost-table tbody tr:last-child th,.cost-table tbody tr:last-child td{border-bottom:0} .cost-table tbody tr:hover th,.cost-table tbody tr:hover td{background:var(--surface-hover)} /* ---------- prose ---------- */ .prose{margin:8px 0} .prose p{max-width:var(--measure)} .prose.guide{margin:36px 0 8px} .prose-sub{margin:0 0 24px} .prose-sub:last-child{margin-bottom:0} .prose-sub h3{margin:24px 0 8px;font-size:19px} .related{margin-top:40px} /* ---------- hub link lists ---------- */ .hub-links{margin:36px 0 8px} .hub-links h2{font-size:22px} .link-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:0 28px} .state-links .link-list,.city-links .link-list,.nearby-links .link-list{ grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} .link-list li{margin:0;padding:4px 0;border-bottom:1px solid var(--border)} .link-list a{display:flex;align-items:center;min-height:44px;color:var(--text);font-weight:600} .link-list a:hover{color:var(--accent);text-decoration:none} .link-list .meta{display:block;font-size:13px;font-weight:400;color:var(--text-light); margin:-6px 0 8px} .cat-block{margin:0 0 32px} .cat-block h2{font-size:20px} .niche-list{margin:28px 0} .niche-entry{padding:18px 0;border-bottom:1px solid var(--border)} .niche-entry:last-child{border-bottom:0} .niche-entry h3{margin:0 0 6px} .niche-entry p{margin:0;font-size:14.5px;color:var(--text-light)} .index-group{margin:36px 0} .index-group h2{margin:0 0 10px} .index-group .niche-list{margin:8px 0 0} /* ---------- affiliate CTA ---------- */ .cta{margin:32px 0;padding:22px;background:var(--cta-soft);border:1px solid var(--cta-border); border-left:5px solid var(--cta);border-radius:var(--radius)} .cta__label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--warn);margin:0 0 10px} .cta__btn{min-height:48px;padding:13px 26px;background:var(--cta);color:var(--white);border:0} .cta__btn:hover{background:var(--cta-hover);color:var(--white);text-decoration:none} .cta__req{font-size:13px;font-weight:700;color:var(--text);margin:14px 0 0} .notlender{font-size:12.5px;line-height:1.55;color:var(--text-light);margin:8px 0 0} /* ---------- FAQ ---------- */ .faq{margin:40px 0 0} .faq h2{margin-bottom:6px} .faq-item{border-bottom:1px solid var(--border)} .faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px; min-height:56px;padding:12px 0;cursor:pointer;font-weight:700;font-size:16px; color:var(--primary);list-style:none} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"+";flex:0 0 auto;font-family:var(--font-num);font-size:20px; color:var(--accent);transition:transform .18s ease} .faq-item[open] summary::after{transform:rotate(45deg)} .faq-item .a{padding:0 0 18px;max-width:var(--measure);color:var(--text)} /* ---------- content + calculator bodies ---------- */ .page-body,.tool-body{margin:0 0 20px} .page-body h2,.tool-body h2{margin-top:32px} .page-body h3,.tool-body h3{margin-top:24px} .page-body ul,.tool-body ul,.page-body ol,.tool-body ol{max-width:var(--measure)} .tool{margin:0 0 18px;padding:22px;background:var(--surface);border:1px solid var(--border); border-radius:var(--radius)} .tool .row{display:grid;grid-template-columns:1fr;gap:14px;margin:0 0 18px} .tool .row>div{display:flex;flex-direction:column;gap:6px} .tool label{font-size:13px;font-weight:700;color:var(--primary)} .tool input{min-height:46px;width:100%;padding:10px 14px;font:inherit;font-size:16px; font-family:var(--font-num);color:var(--text);background:var(--white); border:1px solid var(--border-strong);border-radius:var(--radius-sm)} .tool input:focus-visible{outline:2px solid var(--accent);outline-offset:2px; border-color:var(--accent)} .tool .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px; padding:12px 26px;font:inherit;font-weight:700;font-size:15px;color:var(--white); background:var(--cta);border:1px solid var(--cta);border-radius:var(--radius-sm);cursor:pointer; transition:var(--transition)} .tool .btn:hover{background:var(--cta-hover);border-color:var(--cta-hover)} .tool .err{margin:14px 0 0;padding:12px 14px;font-size:14px;font-weight:600;color:var(--danger); background:var(--danger-soft);border:1px solid var(--danger-border);border-radius:var(--radius-sm)} .tool .err[hidden]{display:none} .tool .out{margin:18px 0 0} .tool .out:empty{display:none} .tool .out .big{font-family:var(--font-display);font-size:clamp(28px,5vw,40px);font-weight:700; letter-spacing:-.02em;color:var(--primary);margin:0 0 10px} .tool .out table,.tool-body table{width:100%;min-width:460px;border-collapse:separate; border-spacing:0;font-size:14.5px} .tool .out caption,.tool-body caption{caption-side:top;text-align:left;padding:12px 16px; font-size:13px;font-weight:700;color:var(--primary);background:var(--surface); border-bottom:1px solid var(--border)} .tool .out th,.tool .out td,.tool-body th,.tool-body td{padding:10px 16px;text-align:left; border-bottom:1px solid var(--border)} .tool .out thead th,.tool-body thead th{font-size:11px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--text-light);background:var(--surface)} .tool .out td.num,.tool .out th.num,.tool-body td.num,.tool-body th.num{text-align:right; font-family:var(--font-num);font-variant-numeric:tabular-nums} .tool .out tbody tr:last-child td{border-bottom:0} .tool .out .table-wrap+.table-wrap{margin-top:12px} .tool .table-wrap,.tool-body .table-wrap{overflow-x:auto} .table-wrap td.num,.table-wrap th.num{text-align:right;font-family:var(--font-num); font-variant-numeric:tabular-nums} /* ---------- footer ---------- */ .site-footer{margin-top:64px;padding:56px 0 32px;background:var(--dark);color:var(--dark-text)} .footer-grid{display:grid;grid-template-columns:1fr;gap:30px;margin-bottom:36px} .footer-brand{display:inline-block;margin:0 0 16px;padding:8px 12px;background:var(--white); border-radius:var(--radius-sm)} .footer-brand .logo-pic img{display:block;width:162px;height:36px} .site-footer .small{max-width:44ch;margin:0 0 10px;font-size:13px;color:var(--dark-muted)} .footer-col{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--white);margin:0 0 8px} .site-footer ul{list-style:none;margin:0;padding:0} .site-footer li{margin:0;border-bottom:1px solid rgba(255,255,255,.08)} .site-footer li:last-child{border-bottom:0} .site-footer a{display:flex;align-items:center;min-height:44px;color:var(--dark-text); font-size:14.5px} .site-footer a:hover{color:var(--white);text-decoration:underline} .site-footer :focus-visible{outline-color:var(--dark-text)} .footer-note{max-width:92ch;padding-top:24px;border-top:1px solid rgba(255,255,255,.14); font-size:13px;line-height:1.7;color:var(--dark-muted)} .footer-note p{margin:0 0 10px} .footer-note p:last-child{margin-bottom:0;color:var(--dark-text)} /* ---------- per-category accents (data-category on ) ---------- Each accent is >= 4.5:1 as text on white, on --surface, on its own --accent-soft chip, and as a background for white text. Proven by scripts/check-contrast.py. */ [data-category="cat-home-services"]{--accent:#7445C4;--accent-strong:#5E35A7;--accent-soft:#F2EEF9} [data-category="cat-finance"]{--accent:#B43C78;--accent-strong:#913061;--accent-soft:#F9EEF4} [data-category="cat-medical"]{--accent:#316F9B;--accent-strong:#265678;--accent-soft:#EEF4F9} [data-category="cat-real-estate"]{--accent:#9B45B0;--accent-strong:#7E388F;--accent-soft:#F6EFF8} [data-category="cat-travel"]{--accent:#4760C2;--accent-strong:#374DA4;--accent-soft:#EEF0F9} [data-category="cat-auto"]{--accent:#955C23;--accent-strong:#70451A;--accent-soft:#FAF4ED} [data-category="cat-legal"]{--accent:#AB3F8E;--accent-strong:#8A3373;--accent-soft:#F8EFF6} [data-category="cat-business"]{--accent:#6047C2;--accent-strong:#4D37A4;--accent-soft:#F0EEF9} [data-category="cat-education"]{--accent:#84651D;--accent-strong:#5E4815;--accent-soft:#FAF6ED} [data-category="cat-recreation"]{--accent:#2C774F;--accent-strong:#205639;--accent-soft:#EFF8F3} [data-category="cat-life-events"]{--accent:#A343A3;--accent-strong:#823582;--accent-soft:#F8EFF8} [data-category="cat-pets"]{--accent:#397630;--accent-strong:#295523;--accent-soft:#F0F8EF} [data-category="cat-beauty-wellness"]{--accent:#B5405F;--accent-strong:#93344D;--accent-soft:#F8EFF1} [data-category="cat-events"]{--accent:#8E49BC;--accent-strong:#753A9C;--accent-soft:#F4EFF8} [data-category="cat-tech-services"]{--accent:#2A718B;--accent-strong:#1F5568;--accent-soft:#EEF6F9} [data-category="cat-senior-care"]{--accent:#BA3E46;--accent-strong:#973239;--accent-soft:#F9EEEF} [data-category="cat-kids-family"]{--accent:#A74F2A;--accent-strong:#833E21;--accent-soft:#FAF1ED} /* ---------- responsive ---------- */ @media (min-width:560px){ .key-facts{grid-template-columns:repeat(4,minmax(0,1fr))} .tool .row{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))} .footer-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:559px){ .search-box input,.search-box .btn-primary{flex:1 1 100%} .hero-actions .btn-secondary{flex:1 1 100%} } @media (min-width:700px){ .link-list{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))} } @media (min-width:900px){ :root{--gutter:24px;--section-pad:72px} .nav-toggle{display:none} .site-header nav{position:static} .nav-menu{display:flex;flex-direction:row;align-items:center;gap:2px;padding:0; background:none;border:0;box-shadow:none} .nav-menu a{padding:10px 14px;border-radius:0} .nav-menu a:hover{background:none;color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)} .home-hero{padding:88px 0 76px} .table-wrap{overflow:visible} .cost-table thead th{top:72px} } @media (min-width:960px){ .content-grid{grid-template-columns:minmax(0,1fr) 320px;gap:44px} .content-sidebar{position:sticky;top:92px;align-self:start} .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px} } @media (max-width:959px){ .cta-inline-mobile{display:block;margin:0 0 20px} .content-sidebar .cta{display:none} .coverage{display:none} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{transition:none !important;animation:none !important} } @media print{ .site-header,.site-footer,.cta,.content-sidebar,.nav-toggle,.search-box,.cta-inline-mobile{ display:none} .content-grid{grid-template-columns:1fr;padding:0} .range-box{box-shadow:none;border:1px solid var(--border)} a{color:var(--text)} }