:root {
  --bg: #f7f8fb;
  --surface: #ffffff;
  --surface-2: #f0f4ff;
  --ink: #101828;
  --muted: #667085;
  --line: #e4e7ec;
  --navy: #0f172a;
  --blue: #2563eb;
  --blue-2: #60a5fa;
  --cyan: #06b6d4;
  --green: #0f9f6e;
  --shadow: 0 14px 40px rgba(15, 23, 42, .08);
  --radius: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}
a { color: inherit; }
.shell { width: min(1120px, calc(100% - 32px)); margin-inline: auto; }
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.9); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(228,231,236,.8);
}
.header-inner { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; text-decoration: none; letter-spacing: -.02em; font-size: 1.1rem; }
.brand-mark { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(145deg,var(--blue),var(--cyan)); color: white; box-shadow: 0 8px 18px rgba(37,99,235,.22); }
.top-nav { display: flex; gap: 22px; font-size: .94rem; }
.top-nav a { color: #475467; text-decoration: none; }
.top-nav a:hover { color: var(--blue); }
.hero { padding: 74px 0 46px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-weight: 800; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.hero h1, .tool-hero h1 { margin: 12px 0 16px; line-height: 1.05; letter-spacing: -.045em; font-size: clamp(2.4rem, 6vw, 5.25rem); }
.hero p { max-width: 710px; margin: 0; color: var(--muted); font-size: 1.15rem; }
.privacy-pill { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; background: #ecfdf3; color: #067647; border: 1px solid #abefc6; border-radius: 999px; font-weight: 750; font-size: .9rem; }
.section { padding: 34px 0 70px; }
.section-head { display: flex; justify-content: space-between; gap: 22px; align-items: end; margin-bottom: 24px; }
.section-head h2 { margin: 0; font-size: clamp(1.65rem,3vw,2.35rem); letter-spacing: -.035em; }
.section-head p { margin: 0; color: var(--muted); max-width: 600px; }
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tool-card { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; text-decoration: none; box-shadow: 0 6px 20px rgba(15,23,42,.035); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.tool-card:hover { transform: translateY(-3px); border-color: #bfd2ff; box-shadow: var(--shadow); }
.tool-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--blue); font-weight: 850; }
.tool-card h3 { margin: 16px 0 5px; letter-spacing: -.02em; }
.tool-card p { margin: 0; color: var(--muted); font-size: .93rem; }
.badge-soon { display:inline-block; margin-top: 12px; color:#475467; background:#f2f4f7; border-radius:999px; padding:4px 8px; font-size:.74rem; font-weight:750; }
.site-footer { margin-top: 70px; background: var(--navy); color: #d0d5dd; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding: 48px 0 34px; }
.footer-grid > div { display: flex; flex-direction: column; gap: 9px; }
.footer-grid p { color: #98a2b3; max-width: 440px; }
.footer-grid a { text-decoration: none; color: #d0d5dd; }
.footer-grid strong { color: white; margin-bottom: 5px; }
.footer-brand { color:white !important; }
.footer-bottom { border-top: 1px solid #344054; padding: 18px 0 28px; color: #98a2b3; font-size:.88rem; }

/* Tool page */
.tool-hero { padding: 48px 0 18px; text-align: center; }
.tool-hero h1 { font-size: clamp(2.25rem,5vw,4.25rem); }
.tool-hero p { margin: 0 auto; max-width: 760px; color: var(--muted); font-size: 1.08rem; }
.tool-shell { margin-top: 30px; background: var(--surface); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); overflow: hidden; }
.tool-controls { padding: 24px; }
.city-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: end; }
.field label { display:block; margin-bottom: 7px; font-weight: 750; font-size:.88rem; color:#344054; }
.input-wrap { position: relative; }
.input-wrap input { width:100%; border:1px solid #d0d5dd; border-radius: 14px; padding: 14px 44px 14px 14px; font: inherit; font-size: 1rem; background:white; outline:none; }
.input-wrap input:focus { border-color:#84adff; box-shadow: 0 0 0 4px #eef4ff; }
.input-pin { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--blue); }
.swap-btn { width:46px; height:46px; border-radius:14px; border:1px solid var(--line); background:#f8fafc; cursor:pointer; font-size:1.2rem; }
.swap-btn:hover { background:#eef4ff; border-color:#bfd2ff; }
.quick-cities { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.quick-cities button { border:1px solid var(--line); background:white; padding:7px 10px; border-radius:999px; color:#475467; cursor:pointer; }
.quick-cities button:hover { color:var(--blue); border-color:#b8cdfb; }
.result-strip { display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fbfcff; }
.city-result { padding: 22px 24px; }
.city-result:last-child { text-align:right; }
.city-name { color:var(--muted); font-size:.85rem; font-weight:750; text-transform:uppercase; letter-spacing:.05em; }
.live-time { font-size:clamp(1.9rem,4vw,3rem); font-weight:850; letter-spacing:-.04em; line-height:1.05; margin:4px 0; }
.date-label { color:var(--muted); }
.diff-card { align-self:center; margin:14px; padding:12px 16px; min-width:220px; text-align:center; border-radius:14px; background:var(--navy); color:white; }
.diff-card strong { display:block; font-size:1.05rem; }
.diff-card span { color:#cbd5e1; font-size:.82rem; }
.map-wrap { position:relative; padding: 24px; background: radial-gradient(circle at 50% 30%, #132244 0, #0d162c 55%, #091120 100%); overflow:hidden; }
.world-map { display:block; width:100%; height:auto; border-radius:16px; }
.world-map .ocean { fill:#0a1730; }
.world-map .land { fill:#334a6f; stroke:#526b91; stroke-width:.8; vector-effect:non-scaling-stroke; }
.world-map .gridline { stroke:#8aa0c4; stroke-opacity:.14; stroke-width:.65; vector-effect:non-scaling-stroke; }
.world-map .time-band { fill:#60a5fa; fill-opacity:.18; transition:x .55s cubic-bezier(.2,.8,.2,1), width .3s ease; }
.world-map .time-band.second { fill:#22d3ee; fill-opacity:.14; }
.world-map .marker-pulse { fill:#fff; opacity:.2; animation:pulse 1.8s infinite; transform-box:fill-box; transform-origin:center; }
.world-map .marker-core { fill:#fff; stroke:#2563eb; stroke-width:4; vector-effect:non-scaling-stroke; }
.world-map .marker-core.second { stroke:#06b6d4; }
.world-map text { fill:white; font-size:12px; font-weight:750; paint-order:stroke; stroke:#0a1730; stroke-width:3px; stroke-linejoin:round; }
@keyframes pulse { 0%{transform:scale(.75);opacity:.35} 75%,100%{transform:scale(1.9);opacity:0} }
.map-legend { display:flex; gap:16px; justify-content:center; color:#cbd5e1; font-size:.82rem; margin-top:12px; flex-wrap:wrap; }
.legend-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:1px; background:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.22); }
.legend-dot.second { background:#06b6d4; box-shadow:0 0 0 3px rgba(6,182,212,.2); }
.timeline-panel { padding:24px; border-top:1px solid rgba(255,255,255,.08); background:#0a1428; color:white; }
.timeline-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.timeline-head h3 { margin:0; }
.timeline-head span { color:#94a3b8; font-size:.85rem; }
.hour-grid { display:grid; grid-template-columns: repeat(6,1fr); border:1px solid #263955; border-radius:14px; overflow:hidden; }
.hour-cell { padding:12px 8px; text-align:center; border-right:1px solid #263955; background:#10203b; }
.hour-cell:last-child { border-right:0; }
.hour-cell strong { display:block; font-size:.92rem; }
.hour-cell span { display:block; color:#93c5fd; font-size:.78rem; margin-top:2px; }
.ad-slot { display:grid; place-items:center; min-height:110px; margin:26px auto; border:1px dashed #cbd5e1; background:#f9fafb; border-radius:14px; color:#98a2b3; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }
.ad-slot.wide { max-width:970px; }
.content-grid { display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:28px; align-items:start; }
.article-card { background:white; border:1px solid var(--line); border-radius:20px; padding:28px; }
.article-card h2, .article-card h3 { letter-spacing:-.025em; }
.article-card h2 { margin-top:0; }
.article-card p, .article-card li { color:#475467; }
.sidebar-card { position:sticky; top:88px; background:white; border:1px solid var(--line); border-radius:18px; padding:20px; }
.sidebar-card h3 { margin-top:0; }
.related-links { display:flex; flex-direction:column; gap:9px; }
.related-links a { text-decoration:none; color:var(--blue); font-weight:700; }
.faq { border-top:1px solid var(--line); padding:16px 0; }
.faq:first-of-type { border-top:0; }
.faq h3 { margin:0 0 6px; font-size:1rem; }
.faq p { margin:0; }
.tool-note { display:flex; gap:10px; align-items:flex-start; margin:16px 0 0; padding:13px 14px; border-radius:14px; background:#ecfdf3; border:1px solid #abefc6; color:#067647; font-size:.9rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width: 820px) {
  .top-nav { display:none; }
  .tool-grid { grid-template-columns:1fr 1fr; }
  .city-grid { grid-template-columns:1fr; }
  .swap-btn { width:100%; }
  .result-strip { grid-template-columns:1fr; }
  .city-result, .city-result:last-child { text-align:center; }
  .diff-card { min-width:0; }
  .content-grid { grid-template-columns:1fr; }
  .sidebar-card { position:static; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-grid > div:first-child { grid-column:1/-1; }
  .hour-grid { grid-template-columns:repeat(3,1fr); }
  .hour-cell:nth-child(3) { border-right:0; }
}
@media (max-width: 560px) {
  .shell { width:min(100% - 20px,1120px); }
  .hero { padding-top:50px; }
  .tool-grid { grid-template-columns:1fr; }
  .tool-controls, .map-wrap, .timeline-panel, .article-card { padding:18px; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-grid > div:first-child { grid-column:auto; }
  .hour-grid { grid-template-columns:repeat(2,1fr); }
  .hour-cell:nth-child(2n) { border-right:0; }
}

/* 2026 production-style refinements */
.brand-copy{display:flex;flex-direction:column;line-height:1.02}.brand-copy strong{font-size:1.18rem}.brand-copy small{margin-top:4px;font-size:.58rem;font-weight:600;color:#667085;letter-spacing:0}.menu-button{display:none;border:0;background:transparent;font-size:1.5rem;color:#101828;cursor:pointer;padding:8px;border-radius:10px}.compact-hero{padding-bottom:20px}.compact-hero h1{font-size:clamp(2.2rem,5vw,4rem)}
.tool-page{padding-top:28px;padding-bottom:40px}.tool-heading-row{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:28px;align-items:start}.tool-heading-row h1{font-size:clamp(2.2rem,4vw,3.8rem);line-height:1.02;letter-spacing:-.045em;margin:0 0 8px}.tool-heading-row p{font-size:1.08rem;color:#344054;margin:0 0 2px}.heading-sub{color:#667085;font-size:.92rem}.title-mark{color:#1677ff}.privacy-card{display:flex;gap:12px;padding:18px;border-radius:16px;background:linear-gradient(135deg,#e9fbf2,#def8ee);border:1px solid #c5efdc;color:#075f49}.privacy-card strong{display:block;margin-bottom:3px}.privacy-card small{display:block;color:#296957;line-height:1.35}.privacy-lock{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:50%;background:#c7f0dd;font-size:1.15rem}
.timezone-app{margin-top:22px}.city-card-grid{display:grid;grid-template-columns:1fr 52px 1fr;gap:16px;align-items:center}.city-panel{position:relative;background:#fff;border:1px solid #dfe5ee;border-radius:14px;padding:18px 20px;box-shadow:0 4px 14px rgba(16,24,40,.035)}.city-panel label{display:block;font-size:.78rem;color:#667085;font-weight:700;margin-bottom:6px}.city-input-row{height:38px;border:1px solid #cfd7e5;border-radius:8px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:0 10px;background:#fff}.city-input-row input{min-width:0;width:100%;border:0;outline:0;font:inherit;font-weight:650;color:#101828;background:transparent}.flag-chip{font-size:1rem}.chevron{color:#667085}.big-time{margin-top:13px;font-size:clamp(2rem,4vw,3rem);font-weight:850;line-height:1;letter-spacing:-.045em;color:#0b1738}.big-date{margin-top:5px;font-size:.98rem;color:#344054}.zone-line{margin-top:6px;font-weight:800;color:#15213d}.zone-name{font-size:.82rem;color:#667085}.center-swap{width:52px;height:52px;border-radius:50%;border:8px solid #e8f2ff;background:#2b7bf4;color:#fff;font-size:1.4rem;cursor:pointer;box-shadow:0 8px 18px rgba(43,123,244,.22);z-index:3}.center-swap:hover{transform:translateY(-1px)}
.difference-banner{margin:14px 0;background:linear-gradient(90deg,#e9f5ff,#e8f2ff);border-radius:12px;min-height:58px;display:flex;align-items:center;justify-content:center;gap:12px;text-align:center;padding:10px 16px}.difference-banner strong{display:block;font-size:1.05rem}.difference-banner small{display:block;color:#344054;margin-top:1px}.clock-icon{font-size:1.7rem;color:#1477ff}
.map-card{background:#eef9ff;border:1px solid #dceef8;border-radius:14px;padding:0;overflow:hidden}.light-map{display:block;width:100%;height:auto}.light-map .ocean{fill:#dff3fb}.light-map .land{fill:#9fd9b8;stroke:#88caa5;stroke-width:.8;vector-effect:non-scaling-stroke}.light-map .gridline{stroke:#7ebad5;stroke-opacity:.16;stroke-width:.7;vector-effect:non-scaling-stroke}.light-map .time-band{fill:#1f7af2;fill-opacity:.14;transition:x .55s cubic-bezier(.2,.8,.2,1)}.light-map .time-band.second{fill:#f43f5e;fill-opacity:.12}.light-map .marker-pulse{fill:#1677ff;opacity:.16;animation:pulse 1.8s infinite;transform-box:fill-box;transform-origin:center}.light-map .marker-core{fill:#1677ff;stroke:white;stroke-width:3}.light-map .marker-core.second{fill:#f43f5e;stroke:white}.light-map text{fill:#0b1738;font-size:13px;font-weight:800;paint-order:stroke;stroke:white;stroke-width:4px;stroke-linejoin:round}.map-card .map-legend{background:rgba(255,255,255,.78);margin:0;padding:9px;color:#667085;border-top:1px solid #dbe9f0}.map-card .legend-dot{background:#1677ff}.map-card .legend-dot.second{background:#f43f5e}
.comparison-card{margin-top:10px;border:1px solid #e1e7ef;border-radius:12px;background:#fff;padding:12px 14px}.comparison-card h2,.quick-section h2,.plain-content h2,.faq-block h2,.related-section h2{margin:0 0 9px;font-size:1rem;letter-spacing:-.015em}.comparison-scroll{overflow-x:auto}.comparison-table{min-width:650px;border:1px solid #d9e1ec;border-radius:7px;overflow:hidden}.compare-row{display:grid;grid-template-columns:150px repeat(6,1fr);min-height:34px}.compare-row+ .compare-row{border-top:1px solid #d9e1ec}.compare-row strong,.compare-row span{display:grid;place-items:center;padding:6px 8px;border-right:1px solid #d9e1ec;font-size:.78rem}.compare-row strong{justify-items:start;background:#edf6ff;color:#17345f}.compare-row span{background:#f9fcff;color:#21324f}.compare-row span:last-child{border-right:0}
.quick-section{margin-top:10px}.quick-section h2 span{color:#1677ff}.quick-cities{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px;margin-top:0}.quick-cities button{padding:7px 9px;white-space:nowrap;font-size:.78rem;color:#174a92;border-color:#d4deeb;box-shadow:0 2px 6px rgba(16,24,40,.03)}
.below-tool-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;margin-top:18px}.plain-content p{color:#475467;margin:0 0 10px}.faq-block details{border:1px solid #dfe5ee;border-radius:7px;background:#fff;margin-bottom:6px}.faq-block summary{cursor:pointer;padding:9px 12px;font-weight:650;font-size:.82rem;list-style:none}.faq-block summary::-webkit-details-marker{display:none}.faq-block summary::after{content:'⌄';float:right;color:#667085}.faq-block details[open] summary::after{content:'⌃'}.faq-block details p{padding:0 12px 12px;margin:0;color:#667085;font-size:.82rem}.related-section{margin-top:18px}.related-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.related-card-grid a{display:flex;flex-direction:column;gap:2px;text-decoration:none;border:1px solid #dfe5ee;border-radius:9px;padding:13px 15px;background:#fff;box-shadow:0 2px 8px rgba(16,24,40,.025)}.related-card-grid a:hover{border-color:#a9c8fa;box-shadow:0 7px 18px rgba(16,24,40,.06)}.related-card-grid strong{font-size:.84rem;color:#0f2751}.related-card-grid small{font-size:.71rem;color:#667085}.prose{max-width:840px}.prose h2{margin-top:26px}.prose h2:first-child{margin-top:0}
.ad-slot{background:linear-gradient(90deg,#f0f2f6,#e9edf3);border:0;color:#7c8798;letter-spacing:0;text-transform:none;font-size:.78rem;min-height:76px}
.site-footer{margin-top:28px}.footer-grid{padding-top:34px;padding-bottom:24px}.footer-bottom{padding-top:14px}.footer-brand .brand-copy small{color:#98a2b3}

@media (max-width: 900px){
  .tool-heading-row{grid-template-columns:1fr}.privacy-card{max-width:none}.quick-cities{grid-template-columns:repeat(5,1fr)}.related-card-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 820px){
  .menu-button{display:block}.top-nav{display:none;position:absolute;top:66px;left:10px;right:10px;background:#fff;border:1px solid #e4e7ec;border-radius:14px;padding:10px;box-shadow:0 14px 36px rgba(16,24,40,.12);flex-direction:column;gap:0}.top-nav.open{display:flex}.top-nav a{padding:11px 12px;border-radius:9px}.top-nav a:hover{background:#f4f7fb}.header-inner{position:relative}.brand-copy small{display:none}
  .city-card-grid{grid-template-columns:1fr;gap:0}.center-swap{justify-self:center;margin:-8px 0;position:relative}.difference-banner{margin-top:10px}.below-tool-grid{grid-template-columns:1fr}.quick-cities{grid-template-columns:repeat(5,1fr)}
}
@media (max-width: 560px){
  .tool-page{padding-top:18px}.tool-heading-row h1{font-size:2rem}.tool-heading-row p{font-size:.92rem}.heading-sub{font-size:.78rem}.privacy-card{padding:11px 12px;font-size:.84rem}.privacy-card small{font-size:.72rem}.privacy-lock{flex-basis:34px;height:34px}.city-panel{padding:12px 14px}.city-input-row{height:36px}.big-time{font-size:2rem}.big-date{font-size:.84rem}.zone-line{font-size:.84rem}.zone-name{font-size:.72rem}.difference-banner{justify-content:flex-start;text-align:left}.difference-banner strong{font-size:.9rem}.difference-banner small{font-size:.72rem}.map-card{border-radius:10px}.world-map{min-height:180px;object-fit:cover}.map-card .map-legend span:last-child{display:none}.comparison-card{padding:10px}.quick-cities{grid-template-columns:repeat(2,minmax(0,1fr))}.quick-cities button{font-size:.75rem}.below-tool-grid{gap:18px}.related-card-grid{grid-template-columns:1fr 1fr}.related-card-grid a{padding:10px}.ad-slot{min-height:70px;margin:16px auto}.site-footer{margin-top:18px}.footer-grid{padding-top:26px}
}


/* Generic WispData tool framework */
.generic-tool-page{padding-bottom:56px}.tool-workbench{background:#fff;border:1px solid #dce6f3;border-radius:22px;padding:24px;box-shadow:0 14px 35px rgba(14,46,92,.07);margin:24px 0}.tool-input-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:18px}.tool-input-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.tool-input-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.wd-field{display:flex;flex-direction:column;gap:7px;font-weight:700;color:#30405b}.wd-field>span{font-size:.86rem}.wd-field input,.wd-field select,.wd-field textarea{width:100%;box-sizing:border-box;border:1px solid #cdd9e8;border-radius:12px;background:#fbfdff;color:#071632;padding:12px 13px;font:inherit;outline:none}.wd-field textarea{resize:vertical;line-height:1.45}.wd-field input:focus,.wd-field select:focus,.wd-field textarea:focus{border-color:#2b79ee;box-shadow:0 0 0 3px rgba(43,121,238,.12)}.checkbox-field label{display:flex;align-items:center;gap:7px;font-weight:500}.checkbox-field input{width:auto}.tool-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}.tool-tabs button,.case-buttons button,.secondary-action{border:1px solid #cdd9e8;background:#f8fbff;color:#18335e;border-radius:999px;padding:9px 14px;font-weight:750;cursor:pointer}.tool-tabs button.active{background:#1672ed;color:white;border-color:#1672ed}.primary-action{border:0;background:#1672ed;color:white;border-radius:12px;padding:13px 19px;font-weight:800;cursor:pointer;box-shadow:0 7px 16px rgba(22,114,237,.25)}.result-panel{margin-top:18px;border-radius:17px;padding:18px 20px;background:linear-gradient(135deg,#eaf5ff,#f4fbff);border:1px solid #cae1fa;display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:center}.result-kicker{grid-column:1/-1;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:#55718e;font-weight:800}.tool-result{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;min-width:0}.tool-result b{font-size:1.65rem;color:#061a3a;overflow-wrap:anywhere}.tool-result span,.tool-result strong{color:#41546d}.copy-result{border:1px solid #bdd3ee;background:#fff;color:#145aa7;border-radius:10px;padding:9px 12px;font-weight:700;cursor:pointer}.wheel-layout,.color-layout,.two-textareas{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}.wheel-layout canvas{display:block;width:min(100%,520px);height:auto;margin:auto}.wheel-layout .primary-action{display:block;margin:12px auto 0}.qr-output{min-height:220px;display:grid;place-items:center;background:#f6f9fd;border:1px dashed #cbd8e6;border-radius:16px;margin:16px 0;overflow:auto}.qr-output svg{max-width:100%;height:auto}.contrast-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.contrast-grid>div{border-radius:13px;padding:20px;display:flex;justify-content:space-between}.metric-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:12px 0}.metric-grid>div{background:#f5f9ff;border:1px solid #dbe7f4;border-radius:13px;padding:14px;text-align:center}.metric-grid strong{display:block;font-size:1.35rem}.metric-grid span{font-size:.78rem;color:#59708b}.fraction-row{display:flex;align-items:end;gap:10px}.fraction-row .wd-field{flex:1}.fraction-row>span{font-size:2rem;padding-bottom:8px}.tool-note{font-size:.85rem;color:#657891}.case-buttons{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.validation-message{white-space:pre-wrap;color:#1d7b50}.validation-message.bad,.error-text{color:#b42318}.password-result{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.uuid-list{display:grid;gap:6px}.uuid-list code{font-size:.92rem;overflow-wrap:anywhere}.related-tools{margin-top:34px}.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.related-grid a{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:16px;border:1px solid #dce6f3;border-radius:14px;text-decoration:none;color:#0a2448;background:white}.related-grid a>span{grid-row:1/3;font-size:1.35rem}.related-grid a small{color:#60738b}.tools-directory .tool-card{display:flex;flex-direction:column}.tool-card .category-chip{align-self:flex-start;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:#477098;background:#edf5ff;padding:5px 8px;border-radius:999px;margin-bottom:6px}
@media(max-width:800px){.tool-input-grid,.tool-input-grid.three,.tool-input-grid.four,.wheel-layout,.color-layout,.two-textareas{grid-template-columns:1fr 1fr}.metric-grid{grid-template-columns:repeat(3,1fr)}.related-grid{grid-template-columns:1fr 1fr}.fraction-row{flex-wrap:wrap}.fraction-row .wd-field{min-width:42%}.result-panel{grid-template-columns:1fr}.copy-result{justify-self:start}}
@media(max-width:540px){.tool-workbench{padding:16px;border-radius:16px}.tool-input-grid,.tool-input-grid.three,.tool-input-grid.four,.wheel-layout,.color-layout,.two-textareas{grid-template-columns:1fr}.metric-grid{grid-template-columns:repeat(2,1fr)}.contrast-grid{grid-template-columns:1fr}.related-grid{grid-template-columns:1fr}.tool-result b{font-size:1.35rem}.fraction-row .wd-field{min-width:100%}.fraction-row>span{display:none}}

.ad-slot-live{max-width:970px;margin:26px auto;min-height:70px;text-align:center;overflow:hidden}

/* Income tax / paycheck estimator */
.tax-country-note{background:#f7faff;border:1px solid #dbe7f4;border-radius:12px;padding:11px 13px;margin:2px 0 14px}.tax-breakdown{border:1px solid #dce6f3;border-radius:14px;overflow:hidden;background:#fff}.tax-row{display:flex;justify-content:space-between;gap:20px;padding:10px 14px;border-bottom:1px solid #e8eef5;color:#41546d}.tax-row:last-child{border-bottom:0}.tax-row strong{color:#102b52}.tax-row.tax-net{background:#eef7ff;font-size:1.05rem;font-weight:800}.tax-row.tax-net span,.tax-row.tax-net strong{color:#0757ae}
/* Contact */
.contact-layout{display:grid;grid-template-columns:minmax(0,720px) minmax(260px,360px);gap:24px;align-items:start}.contact-form{display:grid;gap:15px}.form-status{padding:12px 14px;border-radius:10px;margin-bottom:16px;font-weight:650}.form-status.good{background:#ecfdf3;color:#067647;border:1px solid #abefc6}.form-status.bad{background:#fef3f2;color:#b42318;border:1px solid #fecdca}.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.contact-security{max-width:none}
@media(max-width:760px){.contact-layout{grid-template-columns:1fr}}

/* SEO/accessibility additions */
.skip-link{position:absolute;left:-9999px;top:8px;z-index:9999;background:#fff;color:#0b1b42;padding:10px 14px;border-radius:8px;box-shadow:0 4px 18px rgba(0,0,0,.15)}
.skip-link:focus{left:12px}
.breadcrumbs{font-size:.9rem;color:#5d6b84;margin:18px 0 10px}
.breadcrumbs a{color:#315f9f;text-decoration:none}.breadcrumbs a:hover{text-decoration:underline}
.breadcrumbs span{margin:0 7px;color:#8a97aa}
.how-to-list{padding-left:1.25rem}.how-to-list li{margin:.55rem 0}
.use-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 22px;padding-left:1.2rem}
.source-list{padding-left:1.2rem}.source-list li{margin:.45rem 0}.source-list a{overflow-wrap:anywhere}
.reviewed-note{font-size:.9rem;color:#64748b;margin-top:10px}
.category-intro{max-width:780px;color:#516078;margin-top:-5px;margin-bottom:18px}
.trust-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}.trust-strip>div{background:#fff;border:1px solid #e4eaf3;border-radius:14px;padding:18px}.trust-strip strong{display:block;margin-bottom:6px}
@media(max-width:700px){.use-list,.trust-strip{grid-template-columns:1fr}}