/* Scoped visual polish layer — preserves the existing design system. */
#main-content .hero,main.wrap > h1{position:relative}
#main-content .hero::after,main.wrap > h1::after{content:"";display:block;width:56px;height:4px;margin:18px auto 0;border-radius:999px;background:linear-gradient(90deg,#2563eb,#0ea5e9);opacity:.9}
main.wrap > h1::after{margin:16px 0 0}
#main-content .featured,#main-content .categories{margin-bottom:42px}
#main-content .section-title{font-size:24px;font-weight:850;letter-spacing:-.035em}
#main-content .section-intro{max-width:720px;line-height:1.65}
#main-content .tool-grid .card{position:relative;overflow:hidden;padding:24px!important;border-radius:18px!important;background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)!important}
#main-content .tool-grid .card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#2563eb,#0ea5e9);opacity:.9}
#main-content .tool-grid .card .badge{margin-bottom:9px}
#main-content .tool-grid .card h3{font-size:21px;letter-spacing:-.025em;margin-bottom:8px}
#main-content .tool-grid .card p{max-width:48ch;line-height:1.65}
#main-content .tool-grid .card .button{margin-top:8px}
#main-content .categories .card{min-height:170px;display:flex;flex-direction:column}
#main-content .categories .card h3{letter-spacing:-.02em;margin-bottom:7px}
#main-content .categories .card a{margin-top:auto;font-weight:800;color:#1d4ed8}
#main-content .categories .card span{margin-top:auto!important}
main.wrap{padding-bottom:72px!important}
main.wrap > h1{font-weight:850;letter-spacing:-.045em;margin-bottom:12px}
main.wrap > .muted{max-width:720px;font-size:17px;line-height:1.7}
main.wrap .grid{gap:18px!important;margin-top:28px!important}
main.wrap .card{position:relative;overflow:hidden;padding:22px!important;border-radius:18px!important;background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)!important}
main.wrap .card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#2563eb,#0ea5e9);opacity:.8}
main.wrap .card h2{font-size:21px;letter-spacing:-.025em}
main.wrap .card p{line-height:1.65}
main.wrap .button{border-radius:999px!important;background:linear-gradient(135deg,#2563eb,#0ea5e9)!important;box-shadow:0 7px 18px rgba(37,99,235,.18)!important;transition:transform .14s ease,box-shadow .14s ease!important}
main.wrap .button:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(37,99,235,.22)!important}
/* Tool-page polish: apply only to existing shared tool surfaces. */
main:not(.wrap) > .hero{position:relative;padding:8px 0 26px}
main:not(.wrap) > .hero::after{content:"";display:block;width:56px;height:4px;margin:16px auto 0;border-radius:999px;background:linear-gradient(90deg,#2563eb,#0ea5e9);opacity:.9}
main:not(.wrap) > .hero h1{font-weight:850;letter-spacing:-.045em}
main:not(.wrap) > .hero p{line-height:1.7}
main:not(.wrap) > .card{border-radius:18px;box-shadow:0 10px 28px rgba(15,23,42,.065)}
main:not(.wrap) > .card > h2{letter-spacing:-.025em}
main:not(.wrap) > .card .actions .primary{box-shadow:0 6px 16px rgba(37,99,235,.12)}
main:not(.wrap) > .card .related{margin-top:16px}
main:not(.wrap) > .card .related-item{transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}
main:not(.wrap) > .card .related-item:hover{transform:translateY(-1px);border-color:#bfdbfe;box-shadow:0 7px 18px rgba(15,23,42,.06)}
@media(max-width:650px){#main-content .hero::after{margin-top:15px}#main-content .tool-grid .card{padding:21px!important}main.wrap{padding-bottom:58px!important}main.wrap .card{padding:20px!important}main.wrap .button{width:100%!important}main:not(.wrap) > .hero{padding-bottom:22px}main:not(.wrap) > .card{padding:16px}}
@media(prefers-reduced-motion:reduce){main.wrap .button,main:not(.wrap) > .card .related-item{transition:none!important}}

/* Sitewide centered footer — approved reference layout: copyright line, then centered links. */
body > footer,main > footer,footer.wrap{width:100vw!important;max-width:none!important;box-sizing:border-box!important;background:#fff!important;border-top:1px solid var(--up-line,#dfe6ef)!important;color:var(--up-muted,#5f6b7a)!important;text-align:center!important;padding:24px 16px 28px!important;margin-top:30px!important;margin-left:calc(50% - 50vw)!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:8px!important;overflow:hidden!important}
body > footer::before,main > footer::before,footer.wrap::before{content:"© 2026 Utility Platform";display:block!important;order:-2;font-size:16px!important;line-height:1.45!important;font-weight:600!important;color:var(--up-text,#0b1220)!important;margin:0!important}
footer:not(:has(.foot)) > div:first-child{display:none!important}
footer > .foot > span{display:none!important}
footer.wrap > span:first-child{display:none!important}
footer .footer-links,footer nav[aria-label="Footer"],footer .foot{display:flex!important;align-items:center!important;justify-content:center!important;flex-wrap:wrap!important;gap:0!important;width:100%!important;margin:0!important;padding:0!important;line-height:1.5!important}
footer .footer-links a,footer nav[aria-label="Footer"] a,footer .foot > a{display:inline-flex!important;align-items:center!important;min-height:28px!important;padding:2px 0!important;color:#1d4ed8!important;text-decoration:underline!important;text-underline-offset:2px!important;white-space:nowrap!important}
footer .footer-links a + a::before,footer nav[aria-label="Footer"] a + a::before,footer .foot > a + a::before{content:"·";display:inline-block!important;color:#64748b!important;text-decoration:none!important;margin:0 10px!important}
footer:has(> a){display:block!important;font-size:14px!important}
footer:has(> a)::before{margin-bottom:6px!important}
footer:has(> a) > a{display:inline-flex!important;align-items:center!important;min-height:28px!important;color:#1d4ed8!important;text-decoration:underline!important;text-underline-offset:2px!important}
footer:has(> a) > a + a::before{content:"·";display:inline-block!important;color:#64748b!important;text-decoration:none!important;margin:0 10px!important}
@media(max-width:650px){body > footer,main > footer,footer.wrap{padding:22px 12px 26px!important;margin-top:24px!important}footer > .foot,footer .footer-links,footer nav[aria-label="Footer"]{font-size:15px!important;line-height:1.55!important}footer .footer-links a,footer nav[aria-label="Footer"] a,footer .foot > a,footer:has(> a) > a{min-height:30px!important}footer .footer-links a + a::before,footer nav[aria-label="Footer"] a + a::before,footer .foot > a + a::before,footer:has(> a) > a + a::before{margin:0 8px!important}}

/* Sitewide Related Tools cards — icon + title + supporting text + arrow. */
main .related:not(section),main .related-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;width:100%!important;margin-top:16px!important;align-items:stretch!important}
main .related:not(section) .related-item,main .related-grid .related-item,main .related:not(section) > a,main .related-grid > a{position:relative!important;min-width:0!important;min-height:78px!important;box-sizing:border-box!important;display:grid!important;grid-template-columns:50px minmax(0,1fr) 22px!important;align-items:center!important;column-gap:13px!important;padding:12px 14px!important;border:1px solid #dbe3ed!important;border-radius:16px!important;background:#fff!important;color:var(--up-text,#0b1220)!important;text-decoration:none!important;box-shadow:0 5px 16px rgba(15,23,42,.05)!important;overflow:hidden!important;transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease!important}
main .related:not(section) .related-item:hover,main .related-grid .related-item:hover,main .related:not(section) > a:hover,main .related-grid > a:hover{transform:translateY(-1px)!important;border-color:#bfdbfe!important;box-shadow:0 9px 20px rgba(15,23,42,.075)!important;text-decoration:none!important}
main .related:not(section) .related-item::before,main .related-grid .related-item::before,main .related:not(section) > a::before,main .related-grid > a::before{grid-column:1!important;grid-row:1 / span 2!important;width:50px!important;height:50px!important;display:grid!important;place-items:center!important;border-radius:14px!important;font-family:system-ui,-apple-system,"Segoe UI",sans-serif!important;font-size:23px!important;line-height:1!important;font-weight:700!important;box-sizing:border-box!important}
main .related:not(section) .related-item::after,main .related-grid .related-item::after,main .related:not(section) > a::after,main .related-grid > a::after{content:"›"!important;grid-column:3!important;grid-row:1 / span 2!important;align-self:center!important;justify-self:end!important;font-size:30px!important;line-height:1!important;font-weight:300!important;color:#0f172a!important}
main .related:not(section) .related-item strong,main .related-grid .related-item strong{grid-column:2!important;grid-row:1!important;min-width:0!important;font-size:16px!important;line-height:1.25!important;letter-spacing:-.015em!important;color:#0b1220!important}
main .related:not(section) .related-item span,main .related-grid .related-item span{grid-column:2!important;grid-row:2!important;min-width:0!important;font-size:13.5px!important;line-height:1.35!important;color:#64748b!important}
main .related:not(section) > a,main .related-grid > a{font-size:16px!important;font-weight:800!important;line-height:1.25!important}
/* Specific tool icons. */
main .related a[href="calculator.html"]::before,main .related-item[href="calculator.html"]::before{content:"▦";background:#eff6ff;color:#2563eb}
main .related a[href="gravel-calculator.html"]::before,main .related-item[href="gravel-calculator.html"]::before{content:"⚖";background:#ecfdf5;color:#16a34a}
main .related a[href="uuid-generator-calculator.html"]::before,main .related-item[href="uuid-generator-calculator.html"]::before{content:"▤";background:#f5f3ff;color:#7c3aed}
main .related a[href="time-calculator.html"]::before,main .related-item[href="time-calculator.html"]::before{content:"◷";background:#ecfeff;color:#0891b2}
main .related a[href="pilot-hole-calculator.html"]::before,main .related-item[href="pilot-hole-calculator.html"]::before{content:"⌁";background:#fff7ed;color:#ea580c}
/* Legacy Related Tools blocks that already contain non-linked cards. */
main .related .related-item:nth-child(1)::before{content:"▦";background:#eff6ff;color:#2563eb}
main .related .related-item:nth-child(2)::before{content:"◈";background:#eef2ff;color:#4f46e5}
main .related .related-item:nth-child(3)::before{content:"%";background:#f0fdf4;color:#16a34a}
main .related .related-item:nth-child(4)::before{content:"📏";background:#fff7ed;color:#ea580c}
/* Inline related-link paragraphs on Pilot Hole and UUID pages. */
main section.card p:has(> a[href="calculator.html"]),main section.card p:has(> a[href="pilot-hole-calculator.html"]),main section.card p:has(> a[href="gravel-calculator.html"]),main section.card p:has(> a[href="time-calculator.html"]),main section.card p:has(> a[href="uuid-generator-calculator.html"]){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;margin:0!important;font-size:0!important;line-height:0!important}
main section.card p:has(> a[href="calculator.html"]) > a,main section.card p:has(> a[href="pilot-hole-calculator.html"]) > a,main section.card p:has(> a[href="gravel-calculator.html"]) > a,main section.card p:has(> a[href="time-calculator.html"]) > a,main section.card p:has(> a[href="uuid-generator-calculator.html"]) > a{position:relative!important;min-width:0!important;min-height:78px!important;box-sizing:border-box!important;display:grid!important;grid-template-columns:50px minmax(0,1fr) 22px!important;align-items:center!important;column-gap:13px!important;padding:12px 14px!important;border:1px solid #dbe3ed!important;border-radius:16px!important;background:#fff!important;color:#0b1220!important;font-size:16px!important;line-height:1.25!important;font-weight:800!important;text-decoration:none!important;box-shadow:0 5px 16px rgba(15,23,42,.05)!important}
main section.card p:has(> a[href="calculator.html"]) > a::before,main section.card p:has(> a[href="pilot-hole-calculator.html"]) > a::before,main section.card p:has(> a[href="gravel-calculator.html"]) > a::before,main section.card p:has(> a[href="time-calculator.html"]) > a::before,main section.card p:has(> a[href="uuid-generator-calculator.html"]) > a::before{grid-column:1!important;grid-row:1!important;width:50px!important;height:50px!important;display:grid!important;place-items:center!important;border-radius:14px!important;font-family:system-ui,-apple-system,"Segoe UI",sans-serif!important;font-size:23px!important;line-height:1!important;font-weight:700!important}
main section.card p:has(> a[href="calculator.html"]) > a::after,main section.card p:has(> a[href="pilot-hole-calculator.html"]) > a::after,main section.card p:has(> a[href="gravel-calculator.html"]) > a::after,main section.card p:has(> a[href="time-calculator.html"]) > a::after,main section.card p:has(> a[href="uuid-generator-calculator.html"]) > a::after{content:"›"!important;grid-column:3!important;grid-row:1!important;justify-self:end!important;font-size:30px!important;line-height:1!important;color:#0f172a!important;font-weight:300!important}
main section.card p:has(> a[href="calculator.html"]) > a[href="calculator.html"]::before{content:"▦";background:#eff6ff;color:#2563eb}
main section.card p:has(> a[href="pilot-hole-calculator.html"]) > a[href="pilot-hole-calculator.html"]::before{content:"⌁";background:#fff7ed;color:#ea580c}
main section.card p:has(> a[href="gravel-calculator.html"]) > a[href="gravel-calculator.html"]::before{content:"⚖";background:#ecfdf5;color:#16a34a}
main section.card p:has(> a[href="time-calculator.html"]) > a[href="time-calculator.html"]::before{content:"◷";background:#ecfeff;color:#0891b2}
main section.card p:has(> a[href="uuid-generator-calculator.html"]) > a[href="uuid-generator-calculator.html"]::before{content:"▤";background:#f5f3ff;color:#7c3aed}
@media(max-width:650px){main .related:not(section),main .related-grid{grid-template-columns:1fr!important;gap:10px!important}main .related:not(section) .related-item,main .related-grid .related-item,main .related:not(section) > a,main .related-grid > a{min-height:76px!important;grid-template-columns:46px minmax(0,1fr) 20px!important;padding:11px 12px!important;column-gap:11px!important}main .related:not(section) .related-item::before,main .related-grid .related-item::before,main .related:not(section) > a::before,main .related-grid > a::before{width:46px!important;height:46px!important;border-radius:13px!important;font-size:21px!important}main .related:not(section) .related-item strong,main .related-grid .related-item strong{font-size:16px!important}main .related:not(section) .related-item span,main .related-grid .related-item span{font-size:13.5px!important}main section.card p:has(> a[href="calculator.html"]),main section.card p:has(> a[href="pilot-hole-calculator.html"]),main section.card p:has(> a[href="gravel-calculator.html"]),main section.card p:has(> a[href="time-calculator.html"]),main section.card p:has(> a[href="uuid-generator-calculator.html"]){grid-template-columns:1fr!important;gap:10px!important}main section.card p:has(> a[href="calculator.html"]) > a,main section.card p:has(> a[href="pilot-hole-calculator.html"]) > a,main section.card p:has(> a[href="gravel-calculator.html"]) > a,main section.card p:has(> a[href="time-calculator.html"]) > a,main section.card p:has(> a[href="uuid-generator-calculator.html"]) > a{min-height:76px!important;grid-template-columns:46px minmax(0,1fr) 20px!important;padding:11px 12px!important;column-gap:11px!important}main section.card p:has(> a[href="calculator.html"]) > a::before,main section.card p:has(> a[href="pilot-hole-calculator.html"]) > a::before,main section.card p:has(> a[href="gravel-calculator.html"]) > a::before,main section.card p:has(> a[href="time-calculator.html"]) > a::before,main section.card p:has(> a[href="uuid-generator-calculator.html"]) > a::before{width:46px!important;height:46px!important;border-radius:13px!important;font-size:21px!important}}

/* Related Tools container fix: keep the heading full-width; only the cards form the grid. */
main .related{display:block!important;width:100%!important;box-sizing:border-box!important;min-width:0!important}
main .related > .related-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;width:100%!important;box-sizing:border-box!important;margin-top:16px!important;min-width:0!important}
main .related > .related-item,main .related > a{position:relative!important;min-width:0!important;width:100%!important;min-height:78px!important;box-sizing:border-box!important;display:grid!important;grid-template-columns:50px minmax(0,1fr) 22px!important;align-items:center!important;column-gap:13px!important;padding:12px 14px!important;border:1px solid #dbe3ed!important;border-radius:16px!important;background:#fff!important;color:var(--up-text,#0b1220)!important;text-decoration:none!important;box-shadow:0 5px 16px rgba(15,23,42,.05)!important;overflow:hidden!important}
main .related > .related-item strong{grid-column:2!important;grid-row:1!important;min-width:0!important;font-size:16px!important;line-height:1.25!important;letter-spacing:-.015em!important;color:#0b1220!important}
main .related > .related-item span{grid-column:2!important;grid-row:2!important;min-width:0!important;font-size:13.5px!important;line-height:1.35!important;color:#64748b!important}
main .related > .related-item::before,main .related > a::before{grid-column:1!important;grid-row:1 / span 2!important;width:50px!important;height:50px!important;display:grid!important;place-items:center!important;border-radius:14px!important;font-family:system-ui,-apple-system,"Segoe UI",sans-serif!important;font-size:23px!important;line-height:1!important;font-weight:700!important;box-sizing:border-box!important}
main .related > .related-item::after,main .related > a::after{content:"›"!important;grid-column:3!important;grid-row:1 / span 2!important;align-self:center!important;justify-self:end!important;font-size:30px!important;line-height:1!important;font-weight:300!important;color:#0f172a!important}
@media(max-width:650px){main .related{display:block!important;overflow:visible!important}main .related > .related-grid{grid-template-columns:1fr!important;gap:10px!important}main .related > .related-item,main .related > a{min-height:76px!important;grid-template-columns:46px minmax(0,1fr) 20px!important;padding:11px 12px!important;column-gap:11px!important}main .related > .related-item::before,main .related > a::before{width:46px!important;height:46px!important;border-radius:13px!important;font-size:21px!important}main .related > .related-item strong{font-size:16px!important}main .related > .related-item span{font-size:13.5px!important}}