/* WebUtilities kit v5, "clinical": clean white, slate ink, one professional blue, subtle depth (soft layered shadows and gentle gradients on
   the card, fields and buttons), Epilogue for display and DM Sans for text served from the site itself. Direct and uncluttered: the tool first,
   the answer large, nothing decorative. */
@font-face { font-family: "DM Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/dm-sans-400.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/dm-sans-700.woff2") format("woff2"); }
@font-face { font-family: "Epilogue"; font-weight: 800; font-style: normal; font-display: swap; src: url("/assets/fonts/epilogue-800.woff2") format("woff2"); }
:root {
  --bg: #ffffff;
  --ink: #0f172a;
  --muted: #475569;
  --faint: #556377;
  --panel: #f1f5f9;
  --panel-2: #e2e8f0;
  --line: #e2e8f0;
  --line-2: #cbd5e1;
  --tone: var(--panel);
  --stage: var(--panel);
  --stage-2: var(--panel-2);
  --accent: #1d4ed8;
  --accent-ink: #ffffff;
  --accent-hi: color-mix(in srgb, var(--accent) 80%, #ffffff);
  --accent-soft: color-mix(in srgb, var(--accent) 7%, #ffffff);
  --accent-line: color-mix(in srgb, var(--accent) 22%, #ffffff);
  --ok: #15803d;
  --warn: #b45309;
  --shadow-1: none;
  --shadow-2: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-in: none;
  --radius: 12px;
  --panel-radius: 16px;
  --field-radius: 10px;
  --btn-radius: 10px;
  --gutter: 20px;
  --max: 1160px;
  --font: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Epilogue", "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --tracking: -0.03em;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.65 var(--font); -webkit-font-smoothing: antialiased; text-align: left; overflow-wrap: break-word; hyphens: manual; padding-bottom: env(safe-area-inset-bottom); }
/* Body copy wraps at the full width of its container. Only headings are balanced, and only where they must wrap. */
p, li, dd, .hint, .sub, .lede, .stat span, summary, .btn, .chip { text-wrap: wrap; text-wrap: pretty; }
h1, h2 { text-wrap: balance; }
img, svg { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 max(var(--gutter), env(safe-area-inset-left)) 0 max(var(--gutter), env(safe-area-inset-right)); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 6px; z-index: 10; }
.skip:focus { left: 8px; }
button, select, summary, .chip, a.btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* header: white, a hairline underneath */
.site-header { padding: 8px 0; border-bottom: 1px solid var(--line); background: #fff; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { white-space: nowrap; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1; letter-spacing: -0.04em; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
@media (max-width: 520px) { .brand { font-size: 1.35rem; } }
.nav { display: none; gap: 28px; }
.nav a { white-space: nowrap; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.95rem; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--line-2); }
.nav a[aria-current="page"] { font-weight: 800; border-bottom-color: var(--accent); }
@media (min-width: 1000px) { .nav { display: flex; } }
@media (min-width: 1000px) and (max-width: 1179px) { .nav { gap: 18px; } .nav a { font-size: 0.95rem; } }

/* hero: the heading is short, the tool is the first thing on screen and the answer is the biggest thing in it */
.hero { padding: 26px 0 36px; }
.tool, .result { min-width: 0; }
h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.1; letter-spacing: var(--tracking); margin: 0 0 10px; }
.lede { color: var(--muted); font-size: 1.0625rem; line-height: 1.5; max-width: none; margin: 0; }
h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 1.9vw, 1.45rem); line-height: 1.15; letter-spacing: var(--tracking); margin: 0 0 12px; }
h3 { font-size: 1.15rem; font-weight: 700; margin: 22px 0 6px; letter-spacing: -0.01em; }

.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field > label, .field > .label { font-weight: 700; font-size: 0.9rem; color: var(--ink); }
.hint { color: var(--faint); font-size: 0.9rem; }
input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="search"], select, textarea {
  width: 100%; min-height: 50px; padding: 11px 14px; font: inherit; font-size: 1.0625rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--field-radius); appearance: none; -webkit-appearance: none;
  box-shadow: var(--shadow-in); transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; }
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-in), 0 0 0 3px var(--accent-line); }
.row { display: grid; gap: 14px; }
@media (min-width: 560px) { .row.two { grid-template-columns: 1fr 1fr; } .row.three { grid-template-columns: repeat(3, 1fr); } }
.row > .field:only-child { grid-column: 1 / -1; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; font: inherit; font-weight: 700; font-size: 1rem; color: var(--accent-ink); background: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 80%, #000); border-radius: var(--btn-radius); cursor: pointer; transition: filter 0.12s ease; }
.btn:hover { filter: brightness(1.06); }
.btn:active { filter: brightness(0.94); }
.btn.quiet, .btn.small { color: var(--ink); background: #fff; border-color: var(--line-2);  }
.btn.small { min-height: 44px; padding: 0 16px; font-size: 0.95rem; }
.btn.quiet:hover, .btn.small:hover { filter: none; background: #f1f5f9; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 999px; color: var(--ink); background: #fff; border: 1px solid var(--line-2); font: inherit; font-weight: 700; cursor: pointer;  transition: background 0.12s ease; }
.chip:hover { background: #e8eef5; }
.chip[aria-pressed="true"], .chip.on { color: var(--accent-ink); background: var(--accent); border-color: color-mix(in srgb, var(--accent) 80%, #000);  }
.check { display: flex; gap: 10px; align-items: center; font-weight: 700; min-height: 44px; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }

/* results: the answer is the biggest thing in the card, on a faintly tinted inset surface */
.result { --stage: #f1f5f9; --stage-2: #e2e8f0; margin: 22px 0 8px; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 22px 0 0; box-shadow: none; }
.result:empty { display: none; }
.result .big { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.1rem, 5.4vw, 3.3rem); line-height: 1; letter-spacing: -0.035em; overflow-wrap: break-word; word-break: normal; color: var(--accent); font-variant-numeric: tabular-nums; }
.result .sub { color: var(--muted); margin-top: 10px; font-size: 0.95rem; }
.result .actions { margin-top: 16px; }
.result .err { color: var(--warn); font-weight: 700; margin: 0; }
.stats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 16px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow-1); }
.stat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; white-space: normal; overflow-wrap: anywhere; }
.stat span { color: var(--faint); font-size: 0.9rem; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--line); }
td:first-child, th:first-child { min-width: 9em; }
th { font-weight: 700; font-size: 0.9rem; color: var(--muted); background: #f8fafc; border-bottom: 1px solid var(--line-2); }
tbody tr:last-child td { border-bottom: 0; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow-1); }
.result .tablewrap { box-shadow: none; }

/* ads: reserved space so nothing jumps. Staging shows an empty labelled box; production shows only real, filled units.
   Policy spacing: ads sit well away from buttons and inputs, are labelled, and never sit above the tool. */
.ad { background: #f8fafc; border: 1px dashed var(--line-2); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--faint); font-size: 0.85rem; overflow: hidden; }
.ad::before { content: "Advertisements"; line-height: 1; padding-top: 8px; }
.ad ins.adsbygoogle { display: block; width: 100%; }
.ad--rect { width: 300px; max-width: 100%; min-height: 250px; justify-self: center; }
.ad--rect ins.adsbygoogle { width: 300px; height: 250px; max-width: 100%; }
.ad--wide { width: 100%; max-width: 970px; margin: 0 auto; min-height: 100px; }
@media (min-width: 760px) { .ad--wide { min-height: 90px; } }
.ad:has(ins[data-ad-status="unfilled"]) { display: none; }
.ad[data-filled], .ad:has(ins[data-ad-status="filled"]) { border-style: solid; background: #fff; }
.ad-row { padding: 6px 0 36px; }
.hero-side { display: grid; gap: 20px; align-self: start; }
@media (min-width: 1000px) { .hero-side { position: sticky; top: 20px; } }
@media (max-width: 999px) { .hero-side { order: 2; margin-top: 12px; } }

/* content: heading on the left, text on the right, so the page uses its width */
.content { padding: 28px 0 24px; border-top: 1px solid var(--line); }
.content .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 52px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 56px; } .split > h2 { position: sticky; top: 24px; align-self: start; } }
.prose { max-width: 52ch; }
.prose p { margin: 0 0 1em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: 0.4em; }
.callout { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius); padding: 16px 18px; }
.callout p { margin: 0; }
.faq-block { padding: 0; }
.faq { display: grid; gap: 10px; max-width: 78ch; }
.faq-block h2 { margin-bottom: 18px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 2px 18px; box-shadow: var(--shadow-1); }
.faq summary { cursor: pointer; font-weight: 700; padding: 15px 28px 15px 0; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.35rem; font-weight: 500; color: var(--accent); transition: transform 0.15s ease; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: 0 0 16px; color: var(--muted); }

/* footer: light, quiet */
.site-footer { background: #f8fafc; border-top: 1px solid var(--line); color: var(--muted); margin-top: 36px; padding: 40px 0 36px; font-size: 0.95rem; }
.site-footer .wrap { display: grid; gap: 20px; }
.foot-brand { color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; letter-spacing: var(--tracking); line-height: 1; text-decoration: none; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot-links a { color: var(--ink); font-weight: 700; text-decoration: none; white-space: nowrap; }
.foot-legal a { color: var(--muted); font-weight: 600; font-size: 0.9rem; }
.foot-links a:hover { color: var(--accent); text-decoration: underline; }
.disclaimer { max-width: none; margin: 0; text-wrap: pretty; }
.draft { background: #fffbeb; border: 1px solid #fde68a; color: var(--warn); border-radius: 8px; padding: 12px 16px; font-weight: 700; }
.legal { padding-top: 12px; }
.legal h2 { margin-top: 28px; font-size: 1.25rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fade-in { animation: rise 0.22s ease-out both; }
@keyframes rise { from { opacity: 0.4; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.err { color: var(--warn); font-weight: 700; margin: 0; }
.more { margin-top: 2px; }
.more > summary { cursor: pointer; font-weight: 700; padding: 8px 0 14px; color: var(--ink); list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: "+"; color: var(--accent); font-size: 1.35rem; font-weight: 500; line-height: 1; }
.more[open] > summary::after { content: "\2212"; }

/* the side column beside the tool: the ad, then the other pages on this site */
td.num, th.num { text-align: right; }

@page { size: A4; margin: 16mm 14mm; }
.print-credit { display: none; }
@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .site-header, .site-footer, .ad, .ad-row, .hero-side, .content, .skip, .more, .btn.quiet, .actions { display: none !important; }
  /* a block layout lets a tall tool run across pages instead of jumping whole to the next one */
  .hero, .hero .wrap, .tool, .hero-left, .hero-right { display: block !important; width: auto; max-width: none; min-height: 0 !important; padding: 0; margin: 0; }
  .hero-left > h1 { font-size: 20pt; line-height: 1.15; margin: 0 0 4px; }
  .hero-left > .lede { font-size: 10pt; color: #444; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid #000; }
  .tool { background: #fff; border: 0; box-shadow: none; padding: 0; }
  .result { border-top: 0; padding-top: 6px; }
  .result .big { font-size: 22pt; }
  input, select, textarea { border: 1px solid #999; background: #fff; }
  select { background-image: none; }
  .result table, .result tr, .stat { break-inside: avoid; }
  /* controls are for the screen: buttons, pills and steppers do not print; the word buttons are the words, so they stay as plain boxes */
  button:not(.wordbtn), .btn, .chip, .pl-rm, .pbctl { display: none !important; }
  .wordbtn { background: none !important; border: 1px solid #888; color: #000 !important; min-height: 0; padding: 3px 10px; text-decoration: none !important; }
  .result .big, .srow .sc, .fx-first .fx-text, .rn, .tsep { color: #000 !important; }
  .cell.on input { background: #000 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .hint, .sub { color: #333; }
  .print-credit { display: block; margin-top: 16px; padding-top: 8px; border-top: 1px solid #999; font-size: 9pt; color: #444; }
}

/* ===== v6 hero: the whole first screen is the tool =====
   Heading and inputs on the left, the answer in its own black panel on the right, filling the screen under the header.
   Nothing else is in the way: no card around the inputs, no ad, no decoration. Print keeps the plain layout above. */
:root { --header-h: 140px; }
@media (min-width: 1000px) { :root { --header-h: 56px; } }
.hero { display: flex; align-items: center; padding: clamp(20px, 4vh, 44px) 0 clamp(28px, 5vh, 56px); }
@media (min-width: 1000px) { .hero { min-height: calc(100svh - var(--header-h)); } }
.hero > .wrap { width: 100%; }
.tool { background: none; border: 0; box-shadow: none; padding: 0; display: grid; gap: 28px; align-items: start; }
.hero-left, .hero-right { min-width: 0; }
.hero-left > h1 { font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.05; letter-spacing: -0.035em; margin: 0 0 14px; text-wrap: balance; }
.hero-left > .lede { font-size: 1.15rem; line-height: 1.5; margin: 0 0 26px; }
@media (min-width: 1000px) {
  .tool:not(.tool--solo) { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(40px, 5vw, 88px); align-items: center; }
  .hero-right { align-self: stretch; display: flex; }
  .hero-right > .result { flex: 1; }
  .tool--tall .hero-left { align-self: start; position: sticky; top: 28px; }
  .tool--tall { align-items: start; }
}
@media screen {
  .hero-right > .result {
    --ink: #f8fafc; --muted: #cbd5e1; --faint: #a6b4c8; --line: rgba(248, 250, 252, 0.16); --line-2: rgba(248, 250, 252, 0.3);
    --stage: rgba(248, 250, 252, 0.09); --stage-2: rgba(248, 250, 252, 0.18); --panel: rgba(248, 250, 252, 0.07); --panel-2: rgba(248, 250, 252, 0.14);
    --accent: #60a5fa; --accent-ink: #0b1220; --accent-soft: rgba(96, 165, 250, 0.14); --accent-line: rgba(96, 165, 250, 0.5); --warn: #fbbf24;
    margin: 0; border: 0; border-radius: 28px; padding: clamp(24px, 3.4vw, 52px); background: #0f172a; color: #f8fafc;
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
  }
  @media (min-width: 1000px) { .hero-right > .result { min-height: clamp(380px, 64svh, 680px); } }
  .hero-right > .result .big { font-size: clamp(2.5rem, 5.2vw, 4.5rem); }
  .hero-right > .result .sub { font-size: 1rem; }
  .hero-right > .result a { color: #93c5fd; }
  .hero-right > .result .stat { background: rgba(248, 250, 252, 0.06); border-color: var(--line); }
  .hero-right > .result th { background: rgba(248, 250, 252, 0.07); color: var(--muted); }
  .hero-right > .result .tablewrap { background: transparent; border-color: var(--line); }
  .hero-right > .result .btn.quiet, .hero-right > .result .btn.small, .hero-right > .result .chip { background: transparent; color: #f8fafc; border-color: var(--line-2); }
  .hero-right > .result .btn.quiet:hover, .hero-right > .result .btn.small:hover, .hero-right > .result .chip:hover { background: rgba(248, 250, 252, 0.12); }
  .hero-right > .result .chip[aria-pressed="true"], .hero-right > .result .chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .hero-right > .result input, .hero-right > .result select, .hero-right > .result textarea { background-color: #fff; color: #0f172a; border-color: transparent; }
  .hero-right > .result :focus-visible { outline-color: #93c5fd; }
}
.ad-row--below-hero { padding: 8px 0 28px; display: flex; justify-content: center; }

/* ===== v7 header: the top bar is part of the hero's white space ===== */
.site-header { padding: 4px 0 0; border-bottom: 0; background: transparent; }
:root { --header-h: 76px; }
.hero { padding-top: clamp(6px, 1.5vh, 20px); }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; font-weight: 700; color: var(--ink); }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] > nav { position: absolute; right: 0; top: 50px; z-index: 30; display: grid; min-width: 240px; padding: 8px; background: #fff; border: 1px solid var(--line-2); border-radius: 16px; }
.menu nav a { display: block; padding: 13px 14px; border-radius: 10px; color: var(--ink); font-weight: 600; text-decoration: none; }
.menu nav a:hover { background: #f1f5f9; }
.menu nav a[aria-current="page"] { font-weight: 800; color: var(--accent); }
@media (min-width: 1000px) { .menu { display: none; } }
@media print { .menu { display: none !important; } }
/* answers with tables and long lines: smaller answer headline, tighter cells, wrapped balanced */
@media screen {
  .hero-right > .result .big { font-size: clamp(2.2rem, 4.3vw, 3.9rem); text-wrap: balance; }
  .hero-right > .result th, .hero-right > .result td { padding: 10px 12px; }
  .hero-right > .result td:first-child, .hero-right > .result th:first-child { min-width: 0; }
  .hero-right > .result table { font-size: 0.95rem; }
}

/* a long page title gets a smaller size so it still fits two lines beside the answer */
.hero-left > h1.long { font-size: clamp(1.65rem, 2.5vw, 2.35rem); line-height: 1.08; }