@font-face {
  font-family: "Geist Sans";
  src: url("../node_modules/geist/dist/fonts/geist-sans/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
}

:root {
  --green-950: #082f1a;
  --green-900: #0d4324;
  --green-800: #15572f;
  --green-700: #2f7d32;
  --green-600: #4b8f2d;
  --green-500: #72a83b;
  --green-200: #cfe2c4;
  --green-100: #e8f2e2;
  --green-50: #f3f8ef;
  --ink: #17321f;
  --muted: #53665a;
  --line: #b9c5b7;
  --soft-line: #d7ded4;
  --panel: #eef1ec;
  --paper: #ffffff;
  font-family: "Geist Sans", "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: #fff; font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: #17618a; text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #a8ce63; outline-offset: 2px; }
.no-scroll { overflow: hidden; }

/* Header */
.site-header {
  background: var(--green-900);
  border-bottom: 4px solid #79a83a;
  color: #fff;
  position: relative;
  z-index: 30;
}
.header-top {
  min-height: 60px;
  padding: 0 max(18px, calc((100vw - 1100px) / 2));
  display: flex;
  align-items: stretch;
  gap: 14px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand > span:last-child > span { color: #b9dc5b; }
.brand-mark {
  width: 30px;
  height: 30px;
  padding: 6px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  border: 1px solid #b9dc5b;
  border-radius: 4px;
  background: #123a22;
}
.brand-mark i { display: block; width: 4px; border-radius: 1px; background: #b9dc5b; }
.brand-mark i:nth-child(1) { height: 8px; }
.brand-mark i:nth-child(2) { height: 13px; }
.brand-mark i:nth-child(3) { height: 18px; }
.desktop-nav { min-height: 40px; padding: 0 max(18px, calc((100vw - 1100px) / 2)); display: flex; align-items: stretch; background: var(--green-950); border-top: 1px solid rgba(255,255,255,.12); }
.desktop-nav a, .desktop-nav > button {
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  border-inline: 1px solid transparent;
}
.desktop-nav > button { border: 0; background: #315f2b; }
.desktop-nav a:hover, .desktop-nav > button:hover { background: #38762e; text-decoration: none; }
.region-picker { position: relative; align-self: center; display: flex; margin-left: auto; }
.region-picker > select { display: none; }
.region-trigger { width: 180px; height: 35px; padding: 0 7px; display: grid; grid-template-columns: 23px minmax(0,1fr) 10px; align-items: center; gap: 6px; border: 1px solid #8eb17c; border-radius: 3px; background: #f6faf4; color: #244b31; font-size: 10px; font-weight: 700; text-align: left; }
.region-trigger > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.region-trigger b { color: #4b6751; font-size: 9px; }
.region-flag { width: 22px; height: 17px; display: block; object-fit: cover; box-shadow: 0 0 0 1px rgba(20,55,29,.18); border-radius: 1px; }
.region-popover { position: absolute; top: 41px; right: 0; width: 360px; padding: 8px; z-index: 60; border: 1px solid #6f8b72; border-radius: 4px; background: #fff; box-shadow: 0 10px 28px rgba(5,39,19,.25); color: var(--ink); }
.locale-independent-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; padding: 9px; background: #edf5e9; }
.locale-independent-settings label { display: grid; gap: 4px; color: #315d38; font-size: 10px; font-weight: 700; }
.locale-independent-settings select { width: 100%; min-width: 0; height: 34px; border: 1px solid #8da38c; background: #fff; color: #244b31; }
.region-search { display: grid; gap: 5px; padding-bottom: 7px; border-bottom: 1px solid var(--soft-line); color: #315d38; font-size: 10px; font-weight: 700; }
.region-search input { width: 100%; height: 34px; padding: 0 9px; border: 1px solid #9caf9c; border-radius: 2px; background: #fff; color: var(--ink); font-size: 12px; }
.region-options { max-height: 350px; padding-top: 5px; display: grid; overflow-y: auto; overscroll-behavior: contain; }
.region-options button { width: 100%; min-height: 44px; padding: 5px 7px; display: grid; grid-template-columns: 27px 1fr; align-items: center; gap: 8px; border: 0; border-bottom: 1px solid #edf1eb; background: #fff; color: #25482c; text-align: left; }
.region-options button:hover, .region-options button:focus-visible { background: #edf5e9; }
.region-options button[aria-selected="true"] { background: #e1efdb; }
.region-options button > span:last-child { min-width: 0; display: grid; gap: 2px; }
.region-options strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1e4e29; font-size: 11px; }
.region-options small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #607064; font-size: 9px; }
.region-empty { margin: 8px 0 0; padding: 12px; background: #f4f6f2; color: #607064; font-size: 11px; text-align: center; }
.search-trigger {
  align-self: center;
  height: 35px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #8eb17c;
  border-radius: 3px;
  background: #fff;
  color: #244b31;
}
.quick-calc-trigger { align-self: center; height: 35px; padding: 0 10px; display: flex; align-items: center; gap: 6px; border: 1px solid #8eb17c; border-radius: 3px; background: #eaf3e5; color: #244b31; font-weight: 700; }
.quick-calc-trigger span { font-size: 17px; }
.quick-calc-trigger b { font-size: 11px; }
.search-trigger span { font-size: 20px; }
.search-trigger b { font-size: 11px; }
.search-trigger kbd { padding: 2px 4px; border: 1px solid #bcc6ba; background: #eef2ec; font-size: 9px; }
.menu-trigger { display: none; margin-left: auto; border: 0; background: transparent; color: #fff; font-weight: 700; }
.header-social-actions { align-self: center; display: flex; align-items: center; gap: 8px; }
.social-share { display: flex; align-items: center; gap: 5px; }
.social-share a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #8eb17c; border-radius: 50%; background: #fff; color: #244b31; font-size: 13px; font-weight: 800; line-height: 1; text-decoration: none; }
.social-share a:hover { border-color: #b9dc5b; background: #edf5e9; text-decoration: none; }
.social-share a:nth-child(2) { font-size: 15px; }
.social-share a:nth-child(3) { font-size: 11px; }
.donate-button { padding: 10px 15px; display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 12px; background: #101828; color: #f7f8f5; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.donate-button:hover { background: #202b3d; text-decoration: none; }
.donate-button b { color: #ff6b84; font-size: 15px; }

/* Shared typography and controls */
.eyebrow { display: block; margin-bottom: 7px; color: var(--green-700); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.breadcrumb { display: flex; gap: 7px; margin-bottom: 15px; color: #6b7a70; font-size: 11px; }
.breadcrumb a { color: #17618a; }
.tool-icon {
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid #a8c69d;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--icon-accent, var(--category-accent, var(--green-700)));
  font-size: 15px;
  font-weight: 700;
}
.privacy-pill { display: inline-flex; align-items: center; gap: 7px; color: #386541; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.privacy-pill span { width: 7px; height: 7px; border-radius: 50%; background: #4c9137; }

/* Home */
.home-main { max-width: 1100px; margin: auto; padding: 18px 18px 55px; }
.home-search-band {
  display: grid;
  grid-template-columns: 1.55fr .75fr;
  gap: 25px;
  padding: 25px 28px;
  border: 1px solid #aebfa9;
  background: linear-gradient(100deg, #e7efe3, #d8e7d1);
}
.home-search-band h1 { margin: 9px 0 5px; color: #123e24; font-size: 32px; line-height: 1.1; }
.home-search-band p { margin: 0 0 18px; color: #455e4b; font-size: 14px; }
.hero-search { max-width: 600px; height: 41px; display: flex; align-items: center; border: 1px solid #728a75; background: #fff; }
.hero-search > span { padding: 0 10px; color: #49604e; font-size: 22px; }
.hero-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; padding: 0 4px; }
.hero-search button { align-self: stretch; min-width: 90px; border: 0; border-left: 1px solid #436d40; background: var(--green-700); color: #fff; font-weight: 700; }
.hero-search button:hover { background: var(--green-800); }
.home-search-band aside { border: 1px solid #9eaf99; background: #fff; }
.home-search-band aside > strong { display: block; padding: 8px 11px; background: var(--green-700); color: #fff; font-size: 14px; }
.home-search-band aside a { display: flex; justify-content: space-between; padding: 7px 11px; border-top: 1px solid #d8dfd5; color: #17618a; font-size: 12px; }
.home-search-band aside a:hover { background: var(--green-50); }
.intent-examples { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 7px; }
.intent-examples button { min-height: 32px; padding: 5px 9px; border: 1px solid #91aa8e; border-radius: 999px; background: #f7fbf5; color: #285f31; font-size: 11px; cursor: pointer; }
.intent-examples button:hover { background: #e6f2e1; }
.home-summary { display: flex; align-items: center; gap: 0; border: 1px solid #c4cdc1; border-top: 0; background: #f8faf7; color: #526258; }
.home-summary > * { padding: 10px 18px; border-right: 1px solid #d3dbd0; font-size: 11px; }
.home-summary strong { color: #2f6e32; }
.home-summary a:hover { background: #eef6ea; text-decoration: none; }
.home-categories { padding-top: 28px; }
.home-categories > h2 { margin: 0 0 13px; padding-bottom: 8px; border-bottom: 3px solid var(--green-700); color: #183d24; font-size: 22px; }
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.category-card { min-width: 0; border: 1px solid #b9c5b7; background: #fff; }
.category-card h3 { margin: 0; background: #e5eee0; border-bottom: 1px solid #b9c5b7; font-size: 16px; }
.category-card h3 a { min-height: 51px; padding: 9px 11px; display: flex; align-items: center; gap: 9px; color: #26702e; }
.category-card h3 a:hover { background: #dae8d4; text-decoration: none; }
.category-card p { min-height: 46px; margin: 0; padding: 9px 11px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.category-card ul { margin: 0; padding: 0 11px 9px 28px; columns: 2; column-gap: 20px; }
.category-card li { break-inside: avoid; margin: 0; min-height: 24px; color: #6f806f; font-size: 11px; }
.category-card li a { display: inline-flex; min-height: 24px; align-items: center; padding-block: 4px; color: #17618a; }
.view-category { display: block; padding: 8px 11px; border-top: 1px solid #d7ded4; background: #fafbf9; color: #35743a; font-size: 11px; font-weight: 700; }
.home-about { margin-top: 27px; padding: 18px 21px; border: 1px solid #c5cec2; border-left: 5px solid var(--green-700); background: #f5f8f3; }
.home-about h2 { margin: 0 0 7px; color: #204d2b; font-size: 18px; }
.home-about p { max-width: 800px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.home-about > div { display: flex; gap: 25px; margin-top: 12px; color: #34583b; font-size: 11px; }
.home-about b { color: var(--green-700); }

/* Category and content pages */
.category-hero, .calculator-intro { max-width: 1100px; margin: auto; padding: 18px 18px 15px; border-bottom: 1px solid #cad2c8; }
.category-title, .calculator-title-row { display: flex; align-items: flex-start; gap: 12px; }
.category-title .tool-icon, .calculator-title-row .tool-icon { width: 40px; height: 40px; font-size: 19px; }
.category-hero h1, .calculator-intro h1 { margin: 0; color: #153f25; font-size: 29px; line-height: 1.1; }
.category-hero p, .calculator-intro p { max-width: 720px; margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.calculator-title-row > div { min-width: 0; }
.calculator-promise { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px 14px; color: #35673c; font-size: 11px; font-weight: 700; }
.favorite-main { min-width: 78px; min-height: 34px; margin-left: auto; padding: 6px 10px; border: 1px solid #82a17e; background: #f3f8f0; color: #2c6632; font-size: 10px; font-weight: 700; }
.favorite-main[aria-pressed="true"] { background: #dcebd6; }
.page-toc { max-width: 1064px; margin: 10px auto 0; padding: 8px 11px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1px solid #c2cdc0; background: #f4f7f2; font-size: 10px; }
.page-toc strong { color: #2b5932; }
.page-toc a { min-height: 24px; display: inline-flex; align-items: center; color: #17618a; }
.section { max-width: 1100px; margin: auto; padding: 24px 18px 38px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 12px; border-bottom: 3px solid var(--green-700); }
.section-heading h2 { margin: 0 0 7px; font-size: 21px; color: #173f24; }
.section-heading > p { margin: 0 0 8px; color: var(--muted); font-size: 11px; }
.text-link { margin-bottom: 8px; font-size: 11px; }
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tool-card { min-width: 0; min-height: 92px; padding: 11px; display: flex; gap: 10px; position: relative; border: 1px solid #bdc7bb; background: #fff; }
.tool-card:hover { background: var(--green-50); text-decoration: none; border-color: #87a883; }
.tool-card .eyebrow { margin: 0 0 3px; color: #5f7464; font-size: 8px; }
.tool-card h3 { margin: 0 19px 3px 0; color: #17618a; font-size: 14px; }
.tool-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.35; }
.card-arrow { position: absolute; right: 9px; top: 10px; color: var(--green-700); }
.tool-card.featured { border-color: #87a883; background: #eef6ea; }
.category-guide { max-width: 1064px; margin: 0 auto 42px; padding: 19px 22px; border: 1px solid #b9c5b7; border-top: 5px solid var(--green-700); background: #f3f7f1; }
.category-guide h2 { margin: 0 0 8px; color: #234e2d; font-size: 20px; }
.category-guide p { max-width: 850px; margin: 7px 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* Calculator pages */
.calculator-main { background: #fff; }
.calculator-workspace { max-width: 1100px; margin: auto; padding: 16px 18px 28px; display: grid; grid-template-columns: 390px 1fr; gap: 22px; align-items: start; }
.input-panel, .result-panel { border: 1px solid #aeb9ad; }
.input-panel { padding: 0 17px 16px; background: #eeeeec; }
.panel-heading, .result-top { min-height: 39px; margin: 0 -17px 13px; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--green-700); color: #fff; font-size: 11px; font-weight: 700; }
.panel-actions { display: flex; justify-content: flex-end; align-items: center; gap: 4px; flex-wrap: wrap; }
.panel-actions > button, .currency-picker select { min-height: 24px; padding: 3px 6px; border: 1px solid #c9ddc3; border-radius: 2px; background: #f8fbf7; color: #24542b; font-size: 9px; font-weight: 700; }
.currency-picker { display: flex; }
.currency-picker > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.input-group { display: grid; grid-template-columns: minmax(125px, 1fr) minmax(130px, 1.05fr); gap: 9px; align-items: center; margin-bottom: 8px; }
.input-group > span:first-child { text-align: right; color: #263c2c; font-size: 12px; font-weight: 600; }
.input-shell { min-width: 0; height: 34px; display: flex; align-items: center; overflow: hidden; border: 1px solid #77907b; background: #fff; }
.input-shell:focus-within { border-color: var(--green-700); box-shadow: 0 0 0 2px #b9d7ad; }
.input-shell b { padding: 0 7px; color: #3f5143; font-size: 11px; white-space: nowrap; }
.input-shell input, .input-shell select { width: 100%; min-width: 0; height: 100%; border: 0; outline: 0; padding: 0 7px; background: #fff; color: #182c1d; font-size: 13px; font-weight: 600; }
.input-shell b + input { padding-left: 0; }
.input-group small { grid-column: 2; margin-top: -5px; color: #59665d; font-size: 9px; line-height: 1.3; }
.remember-toggle { margin: 11px 0 0; display: flex; align-items: center; gap: 7px; color: #425449; font-size: 10px; }
.remember-toggle input { width: 16px; height: 16px; accent-color: var(--green-700); }
.privacy-inline { margin-top: 13px; padding: 10px 9px; display: flex; gap: 8px; align-items: flex-start; border: 1px solid #c9d5c5; background: #f7faf5; }
.privacy-inline > span { width: 19px; height: 19px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #dbead6; color: #317338; font-size: 10px; }
.privacy-inline p { margin: 0; color: #57685c; font-size: 9px; line-height: 1.4; }
.privacy-inline strong { color: #2e6535; }
.result-panel { padding: 0 16px 16px; background: #fff; }
.result-top { margin-inline: -16px; background: #3f7522; }
.live-dot { font-weight: 400; }
.live-dot::before { content: ""; width: 6px; height: 6px; margin-right: 5px; display: inline-block; border-radius: 50%; background: #d7ee98; }
.primary-result { padding: 13px 12px; text-align: center; border: 1px solid #b4caae; background: #edf6e8; }
.primary-result > span { display: block; color: #345a3b; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.primary-result > strong { display: block; margin: 3px 0; color: #286b2e; font-size: 38px; line-height: 1.05; }
.primary-result p { margin: 0; color: #536b58; font-size: 10px; }
.result-chart { margin-top: 13px; }
.chart-bar { height: 15px; display: flex; gap: 1px; overflow: hidden; border: 1px solid #7b927d; background: #e7ede4; }
.chart-bar i { display: block; }
.chart-bar i:nth-child(1) { background: #2f7d32 !important; }
.chart-bar i:nth-child(2) { background: #78a840 !important; }
.chart-bar i:nth-child(3) { background: #a5c567 !important; }
.chart-bar i:nth-child(4) { background: #d2df9b !important; }
.chart-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 20px; margin-top: 9px; }
.chart-legend > div { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; }
.chart-legend span { color: #516555; }
.chart-legend span i { width: 8px; height: 8px; margin-right: 5px; display: inline-block; }
.chart-legend > div:nth-child(1) i { background: #2f7d32 !important; }
.chart-legend > div:nth-child(2) i { background: #78a840 !important; }
.chart-legend > div:nth-child(3) i { background: #a5c567 !important; }
.chart-legend > div:nth-child(4) i { background: #d2df9b !important; }
.result-lines { margin-top: 12px; border-top: 1px solid #c3ccc0; }
.result-lines > div { min-height: 32px; padding: 6px 8px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #cbd3c8; font-size: 11px; }
.result-lines > div:nth-child(odd) { background: #f0f1ef; }
.result-lines span { color: #324637; }
.result-lines strong { color: #183b21; }
.result-insight { margin-top: 12px; padding: 10px; display: flex; gap: 8px; border: 1px solid #aec8a7; background: #f1f7ee; }
.result-insight > span { color: #3f7f31; font-weight: 700; }
.result-insight p { margin: 0; color: #4d6252; font-size: 10px; line-height: 1.45; }
.result-error { padding: 40px 20px; text-align: center; border: 1px solid #d4c6a2; background: #fff9e6; }
.result-error strong { color: #765b13; font-size: 21px; }
.result-error p { color: #6c6141; font-size: 12px; }
.scenario-comparison { margin-top: 13px; border: 1px solid #adc0aa; }
.scenario-heading { padding: 7px 9px; display: flex; justify-content: space-between; background: #dfeada; color: #28572f; font-size: 10px; }
.scenario-comparison > div:not(.scenario-heading) { padding: 7px 9px; display: grid; grid-template-columns: 1fr auto auto; gap: 12px; border-top: 1px solid #c7d1c4; font-size: 9px; }
.scenario-comparison > div:not(.scenario-heading):nth-child(odd) { background: #f4f6f2; }
.scenario-comparison span { color: #526357; }
.scenario-comparison b { font-weight: 400; }
.scenario-comparison strong { color: #25652d; }
.trend-grid { margin-top: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trend-chart { margin: 0; padding: 9px; border: 1px solid #b6c7b2; background: #f8faf7; }
.trend-chart figcaption { display: flex; justify-content: space-between; gap: 8px; color: #275b2e; font-size: 10px; }
.trend-chart figcaption span { color: #58655b; font-size: 8px; }
.trend-chart svg { width: 100%; height: 112px; margin-top: 6px; overflow: visible; }
.trend-chart svg line { stroke: #bdc9ba; stroke-width: .6; }
.trend-chart svg polyline { fill: none; stroke: #3c8137; stroke-width: 2; vector-effect: non-scaling-stroke; }
.trend-chart > div { display: flex; justify-content: space-between; color: #58665c; font-size: 8px; }
.result-table { margin-top: 13px; border: 1px solid #b6c2b3; }
.result-table summary { padding: 8px 10px; display: flex; justify-content: space-between; list-style: none; background: #e5eee0; color: #245b2c; font-size: 10px; font-weight: 700; cursor: pointer; }
.table-scroll { max-height: 330px; overflow: auto; }
.result-table table { width: 100%; border-collapse: collapse; font-size: 9px; }
.result-table th, .result-table td { padding: 6px; border: 1px solid #cdd5ca; text-align: right; white-space: nowrap; }
.result-table th:first-child, .result-table td:first-child { text-align: left; }
.result-table th { position: sticky; top: 0; background: #4f8b27; color: #fff; }
.result-table tr:nth-child(even) { background: #f0f2ef; }
.content-layout { max-width: 1100px; margin: auto; padding: 27px 18px 35px; display: grid; grid-template-columns: 1.3fr .7fr; gap: 34px; border-top: 1px solid #c8d0c5; }
.content-layout h2 { margin: 0 0 9px; padding-bottom: 6px; border-bottom: 3px solid var(--green-700); color: #173f24; font-size: 20px; }
.explanation > p, .faq p { color: #4f6154; font-size: 12px; line-height: 1.65; }
.explanation h3 { margin: 23px 0 7px; color: #214e2b; font-size: 16px; }
.formula-box { margin: 18px 0; padding: 13px 15px; border: 1px solid #aec3a8; border-left: 5px solid var(--green-700); background: #eff5ec; }
.formula-box span { display: block; margin-bottom: 6px; color: #4b6551; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.formula-box strong { color: #173f24; font-size: 15px; }
.disclaimer { margin-top: 20px; padding: 11px 13px; border: 1px solid #d2c798; background: #fffbe9; }
.disclaimer strong { color: #735f18; font-size: 10px; text-transform: uppercase; }
.disclaimer p { margin: 4px 0 0; color: #675f42; font-size: 10px; line-height: 1.5; }
.faq details { padding: 10px 0; border-top: 1px solid #cbd3c8; }
.faq summary { display: flex; justify-content: space-between; list-style: none; color: #17618a; font-size: 12px; font-weight: 700; cursor: pointer; }
.faq summary span { color: var(--green-700); }
.deep-guide { max-width: 1100px; margin: auto; padding: 28px 18px 38px; border-top: 1px solid #cbd3c8; }
.deep-guide-heading h2 { margin: 2px 0 17px; color: #173f24; font-size: 21px; }
.guide-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.guide-columns article { padding: 15px 17px; border: 1px solid #bac7b7; border-top: 4px solid var(--green-700); background: #f4f7f2; }
.guide-columns h3 { margin: 0 0 9px; color: #265b2e; font-size: 14px; }
.guide-columns ul { margin: 0; padding-left: 18px; }
.guide-columns li { margin: 7px 0; color: #4e6053; font-size: 11px; line-height: 1.5; }
.trust-panel { max-width: 1064px; margin: 0 auto 25px; padding: 17px 19px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border: 1px solid #b7c6b3; border-left: 5px solid var(--green-700); background: #f3f7f1; }
.trust-panel h2 { margin: 2px 0 5px; color: #214e2b; font-size: 17px; }
.trust-panel p { margin: 0 0 5px; color: #526358; font-size: 10px; line-height: 1.5; }
.trust-panel a { font-size: 10px; font-weight: 700; }
.trust-actions { display: flex; gap: 7px; flex: 0 0 auto; }
.trust-actions button, .feedback-card button { min-height: 32px; padding: 6px 9px; border: 1px solid #7d9b79; background: #fff; color: #285e2e; font-size: 10px; font-weight: 700; }
.feedback-card { max-width: 1064px; margin: 0 auto 28px; padding: 12px 16px; display: flex; align-items: center; gap: 15px; border: 1px solid #c6d0c3; background: #fff; color: #294c30; font-size: 11px; }
.feedback-card > div { display: flex; gap: 6px; }
.feedback-card p { margin: 0; color: #4d6a52; font-size: 10px; }
.related-section { border-top: 1px solid #cbd3c8; }
.journey-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 11px; }
.journey-card { min-height: 112px; padding: 15px; display: flex; gap: 12px; position: relative; border: 1px solid #b8c9b5; border-left: 4px solid var(--green-700); background: #f9fbf8; }
.journey-card:hover { border-color: #77a16e; background: #eef6ea; text-decoration: none; }
.journey-card h3 { margin: 2px 24px 5px 0; color: #17618a; font-size: 18px; }
.journey-card p { margin: 0; color: #53655a; font-size: 13px; line-height: 1.5; }

/* All calculators and private personalization */
.all-page { background: #fff; }
.directory-hero { max-width: 1100px; margin: auto; padding: 24px 18px 18px; border-bottom: 3px solid var(--green-700); }
.directory-hero h1 { margin: 1px 0 5px; color: #153f25; font-size: 30px; }
.directory-hero > p { margin: 0; color: var(--muted); font-size: 12px; }
.personal-shelves { max-width: 1100px; margin: auto; padding: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.personal-shelves article { min-width: 0; }
.home-personal-shelves { max-width: 1064px; margin-top: 18px; padding: 17px 18px; border: 1px solid #bfd0bc; background: #f7faf5; }
.home-personal-shelves .section-heading > a { color: #2f7034; font-size: 11px; font-weight: 800; }
.mini-tool-grid { min-height: 72px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.mini-tool-grid a { min-width: 0; padding: 8px; display: grid; grid-template-columns: 25px 1fr; gap: 0 7px; border: 1px solid #c1cbc0; background: #f8faf7; }
.mini-tool-grid a:hover { background: #eef6ea; text-decoration: none; }
.mini-tool-grid a > span { grid-row: 1 / 3; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #dcebd6; color: #2e6c34; }
.mini-tool-grid strong { overflow: hidden; color: #17618a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.mini-tool-grid small { color: #667469; font-size: 8px; }
.empty-state { grid-column: 1 / -1; margin: 0; padding: 18px; border: 1px dashed #afbdac; color: #617066; font-size: 10px; }
.calculation-history-shelf { max-width: 1064px; margin: 18px auto 28px; padding: 17px 18px; border: 1px solid #bfd0bc; background: #f7faf5; }
.calculation-history-shelf .section-heading { align-items: center; }
.calculation-history-shelf .section-heading button { min-height: 34px; margin-bottom: 7px; padding: 6px 10px; border: 1px solid #91a88e; background: #fff; color: #315b37; font-weight: 700; }
.calculation-history-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.calculation-history-item { min-width: 0; padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid #cad5c7; background: #fff; }
.calculation-history-item:hover { background: #eef6ea; text-decoration: none; }
.calculation-history-item > span { min-width: 0; display: grid; gap: 4px; }
.calculation-history-item b { color: #17618a; }
.calculation-history-item small { display: block; overflow: hidden; color: #5c6b60; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.calculation-history-item > strong { flex: 0 0 auto; color: #286b2e; text-align: right; }
.calculation-history-item > strong small { color: #53675a; }
.history-privacy { margin: 10px 0 0; color: #5b695f; font-size: 10px; }
.all-tools { padding-top: 8px; }
.directory-category { margin: 0 0 24px; }
.directory-category > h3 { margin: 0 0 8px; padding-bottom: 5px; border-bottom: 1px solid #bfcabd; font-size: 16px; }
.directory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.directory-item { min-width: 0; position: relative; padding-bottom: 31px; border: 1px solid #bdc7bb; }
.directory-item .tool-card { height: 100%; border: 0; }
.directory-item > button { position: absolute; left: 10px; bottom: 6px; min-height: 24px; padding: 3px 7px; border: 1px solid #9aae96; background: #f7faf5; color: #2e6734; font-size: 9px; }
.directory-item > button[aria-pressed="true"] { background: #dcebd6; }

/* Information pages */
.info-page { min-height: 65vh; }
.info-hero { max-width: 900px; margin: auto; padding: 27px 18px 21px; border-bottom: 3px solid var(--green-700); }
.info-hero h1 { margin: 0; color: #153f25; font-size: 30px; }
.info-hero > p { max-width: 720px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.info-content { max-width: 900px; margin: auto; padding: 15px 18px 50px; }
.info-content article { padding: 17px 0; display: grid; grid-template-columns: 190px 1fr; gap: 27px; border-bottom: 1px solid #d1d8cf; }
.info-content h2 { margin: 0; color: #275c30; font-size: 16px; }
.info-content p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.feedback-page-card { max-width: 1064px; margin: 0 auto 36px; padding: 24px; display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 28px; border: 1px solid #c2d2c4; border-radius: 14px; background: #fff; box-shadow: 0 14px 40px rgba(22,64,49,.07); }
.feedback-page-card form { display: grid; gap: 17px; }
.feedback-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.feedback-page-card label { display: grid; gap: 7px; color: #315738; font-size: 13px; font-weight: 700; }
.feedback-page-card input, .feedback-page-card select, .feedback-page-card textarea { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid #9fb2a1; border-radius: 7px; background: #fbfcf8; color: var(--ink); font-size: 14px; line-height: 1.5; }
.feedback-page-card input, .feedback-page-card select { min-height: 44px; }
.feedback-page-card textarea { resize: vertical; }
.input-group.input-multiline { display: block; }
.input-multiline > span:first-child { display: block; text-align: left; margin-bottom: 8px; }
.input-multiline .input-shell { display: block; height: auto; overflow: visible; border: 0; }
.input-multiline textarea { width: 100%; min-width: 0; box-sizing: border-box; padding: 10px; font: inherit; line-height: 1.5; color: var(--ink); background: white; border: 1px solid #91a18b; resize: vertical; }
.feedback-submit-row { display: flex; align-items: center; gap: 16px; }
.feedback-submit-row button { min-height: 46px; padding: 11px 18px; flex: 0 0 auto; border: 0; border-radius: 8px; background: var(--green-800); color: #fff; font-size: 14px; font-weight: 750; }
.feedback-submit-row button:hover { background: var(--green-900); }
.feedback-submit-row p, .feedback-page-card aside p, .feedback-page-card aside small { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.feedback-status { min-height: 1.5em; margin: 0; color: var(--green-700); font-weight: 700; }
.feedback-page-card aside { align-self: start; padding: 19px; display: grid; gap: 10px; border-radius: 10px; background: var(--green-50); }
.feedback-page-card aside strong { color: var(--green-900); font-size: 17px; }

/* Search and footer */
.search-overlay { position: fixed; inset: 0; z-index: 100; padding: 12vh 18px; background: rgba(5, 35, 18, .75); }
.search-dialog { max-width: 620px; margin: auto; overflow: hidden; border: 3px solid #6c963d; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.dialog-search { height: 51px; padding: 0 12px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid #bfc9bc; background: #edf4e9; }
.dialog-search > span { font-size: 23px; color: #315a39; }
.dialog-search input { flex: 1; min-width: 0; height: 31px; border: 1px solid #879b89; padding: 0 8px; }
.dialog-search button { padding: 4px 6px; border: 1px solid #889b89; background: #fff; color: #3f5944; font-size: 9px; }
.search-help { margin: 0; padding: 8px 12px; border-bottom: 1px solid #d5ddd2; background: #f9fbf8; color: #526358; font-size: 11px; line-height: 1.45; }
.search-results { max-height: 55vh; overflow: auto; padding: 7px; display: flex; flex-direction: column; }
.search-results a { padding: 7px 9px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid #d8ded6; }
.search-results a:hover { background: #eef5eb; text-decoration: none; }
.search-results .tool-icon { width: 27px; height: 27px; font-size: 12px; }
.search-results a > span { display: flex; flex-direction: column; }
.search-results strong { color: #17618a; font-size: 12px; }
.search-results small { color: #617065; font-size: 9px; }
.search-results a > b { margin-left: auto; color: var(--green-700); }
.search-empty { margin: 0; padding: 18px; color: #5a675d; text-align: center; }
.quick-calc { width: 326px; position: fixed; top: 78px; right: 24px; z-index: 110; overflow: hidden; border: 1px solid #69756b; border-radius: 7px; background: #f3f3f3; color: #171717; box-shadow: 0 18px 50px rgba(0,0,0,.35); font-family: "Segoe UI", Arial, sans-serif; }
.quick-calc-titlebar { height: 38px; padding-left: 13px; display: flex; align-items: center; justify-content: space-between; background: #f7f7f7; user-select: none; touch-action: none; cursor: move; }
.quick-calc-titlebar span { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.quick-calc-titlebar span b { color: #2f7134; font-size: 17px; }
.quick-calc-titlebar button { width: 46px; height: 38px; border: 0; background: transparent; color: #333; font-size: 20px; cursor: default; }
.quick-calc-titlebar button:hover { background: #c42b1c; color: #fff; }
.quick-calc-body { padding: 6px; }
.quick-calc-clipboard { height: 25px; padding: 0 3px; display: flex; justify-content: flex-end; gap: 3px; }
.quick-calc-clipboard button { height: 23px; padding: 0 9px; border: 0; border-radius: 3px; background: transparent; color: #315d38; font-size: 10px; font-weight: 600; }
.quick-calc-clipboard button:hover { background: #dedede; }
.quick-calc-mode { padding: 0 3px 3px; display: flex; justify-content: space-between; gap: 4px; }
.quick-calc-mode button { min-height: 26px; padding: 0 9px; border: 1px solid #d4d4d4; border-radius: 3px; background: #fff; color: #315d38; font-size: 11px; font-weight: 700; }
.quick-calc-history { height: 24px; padding: 3px 8px 0; overflow: hidden; color: #646464; font-size: 12px; text-align: right; white-space: nowrap; }
.quick-calc-display { height: 55px; padding: 0 8px 6px; display: block; overflow: hidden; color: #111; font-size: 36px; font-weight: 600; line-height: 49px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.quick-calc-memory { height: 27px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; }
.quick-calc-memory button { height: 25px; border: 0; border-radius: 3px; background: transparent; color: #333; font-size: 10px; font-weight: 600; }
.quick-calc-memory button:hover:not(:disabled) { background: #dedede; }
.quick-calc-memory button:disabled { color: #aaa; cursor: default; }
.quick-calc[data-memory-active="true"] .quick-calc-display::before { content: "M"; margin-right: 8px; color: #346e38; font-size: 12px; vertical-align: middle; }
.quick-calc-scientific { margin-bottom: 3px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.quick-calc-scientific[hidden] { display: none; }
.quick-calc-scientific button { min-height: 34px; border: 1px solid #dedede; border-radius: 3px; background: #f9f9f9; color: #171717; font-size: 12px; }
.quick-calc-scientific button:hover { background: #e7e7e7; }
.unit-converter-dialog { width: min(520px, calc(100vw - 24px)); position: fixed; top: 76px; left: 50%; z-index: 120; overflow: hidden; border: 2px solid #47774a; border-radius: 6px; background: #fff; color: var(--ink); box-shadow: 0 22px 65px rgba(0,0,0,.38); transform: translateX(-50%); }
.unit-converter-title { height: 44px; padding-left: 14px; display: flex; align-items: center; justify-content: space-between; background: var(--green-900); color: #fff; }
.unit-converter-title span { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.unit-converter-title b { color: #c6e47c; font-size: 19px; }
.unit-converter-title button { width: 46px; height: 44px; border: 0; background: transparent; color: #fff; font-size: 22px; }
.unit-converter-title button:hover { background: #b52b20; }
.unit-converter-body { padding: 16px; display: grid; gap: 13px; background: #f6f8f5; }
.unit-converter-body label { display: grid; gap: 5px; color: #315738; font-size: 10px; font-weight: 700; }
.unit-converter-body input, .unit-converter-body select { width: 100%; height: 38px; padding: 0 9px; border: 1px solid #94a894; border-radius: 3px; background: #fff; color: #1b3822; font-size: 13px; }
.unit-converter-pair { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: end; gap: 8px; }
.unit-converter-pair > button { height: 38px; border: 1px solid #7b9c78; border-radius: 3px; background: #e7f1e2; color: #285d30; font-size: 18px; }
.unit-converter-result { min-height: 92px; padding: 12px; display: grid; gap: 4px; border-left: 4px solid var(--green-700); background: #fff; }
.unit-converter-result span { color: #627068; font-size: 10px; text-transform: uppercase; }
.unit-converter-result output { overflow-wrap: anywhere; color: #174523; font-size: 27px; font-weight: 700; }
.unit-converter-result small { color: #647068; font-size: 9px; line-height: 1.4; }
.converter-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.converter-actions button, .converter-recent button { min-height: 32px; padding: 5px 7px; border: 1px solid #8ca28a; border-radius: 3px; background: #fff; color: #285d30; font-size: 10px; font-weight: 700; }
.converter-actions button:hover, .converter-recent button:hover { background: #e7f1e2; }
.converter-recent { display: flex; flex-wrap: wrap; gap: 5px; }
.unit-converter-body > a { font-size: 10px; font-weight: 700; }
.quick-calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.quick-calc-keys button { min-height: 43px; border: 1px solid #dedede; border-radius: 3px; background: #f9f9f9; color: #171717; font-size: 14px; }
.quick-calc-keys button:hover { background: #e7e7e7; }
.quick-calc-keys button.number { background: #fff; font-size: 16px; font-weight: 600; }
.quick-calc-keys button.operator { font-size: 20px; }
.quick-calc-keys button.equals { border-color: #2f7d32; background: #3e8c40; color: #fff; font-size: 21px; }
.quick-calc-keys button.equals:hover { background: #327534; }
.result-tool-actions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.result-tool-actions button, .saved-scenarios button { min-height: 38px; padding: 8px 12px; border: 1px solid #78a667; border-radius: 5px; background: #f3f9ef; color: #244b31; font-weight: 700; }
.salary-basis-shortcuts { margin: 12px 0 4px; padding: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border: 1px solid #c9d8c5; background: #f7faf5; }
.salary-basis-shortcuts span { margin-right: 3px; color: #365b3b; font-size: 11px; font-weight: 800; }
.salary-basis-shortcuts button { min-height: 32px; padding: 5px 9px; border: 1px solid #8fa98a; border-radius: 16px; background: #fff; color: #285c31; font-size: 11px; font-weight: 750; }
.salary-basis-shortcuts button:hover, .salary-basis-shortcuts button[aria-pressed="true"] { border-color: #3f7f3c; background: #dcebd6; }
.saved-scenarios { margin-top: 16px; }
.saved-scenarios h3 { margin: 0 0 8px; font-size: 15px; }
.saved-scenarios h3 small { color: #607064; font-size: 11px; font-weight: 600; }
.saved-scenarios > div { display: grid; gap: 8px; }
.saved-scenarios article { padding: 10px; display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: center; border: 1px solid #d9e5d3; border-radius: 6px; background: #fff; }
.saved-scenarios article span, .saved-scenarios article small { grid-column: 1; color: #526052; }
.saved-scenarios article strong { grid-column: 1; }
.saved-scenarios article button { grid-column: 2; grid-row: 1 / span 3; }
.source-links { margin:8px 0; display:block; color:#526052; font-size:13px; }
.source-links a { color:#2f7034; font-weight:700; }
.calculation-steps { margin-top: 18px; border-top: 1px solid #d9e5d3; }
.calculation-steps summary { padding: 13px 0; display: flex; justify-content: space-between; cursor: pointer; color: #244b31; font-weight: 750; }
.calculation-steps > div { padding: 2px 0 14px; }
.calculation-steps code { padding: 10px; display: block; overflow-x: auto; border-radius: 5px; background: #f3f6f1; white-space: pre-wrap; }
.calculation-steps ol { padding-left: 21px; }
.calculation-steps li, .steps-result { margin: 7px 0; display: flex; justify-content: space-between; gap: 16px; }
.calculation-steps small { color: #5b685b; }
.site-footer { padding: 29px max(18px, calc((100vw - 1100px) / 2)) 20px; display: grid; grid-template-columns: 1.2fr 1fr .8fr; gap: 30px; border-top: 5px solid #7aa23d; background: var(--green-900); color: #fff; }
.priority-language-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 7px 13px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.2); }
.priority-language-links > span { color: #bcd3c1; font-size: 12px; font-weight: 700; }
.priority-language-links a { color: #fff; font-size: 13px; font-weight: 650; }
.priority-language-links a { min-height: 28px; padding: 3px 2px; display: inline-flex; align-items: center; }
.static-calculator-seo + .priority-language-links { max-width: 1064px; margin: 0 auto 28px; padding: 13px 18px; border: 1px solid #c5d5c5; border-radius: 8px; background: #edf5e9; }
.static-calculator-seo + .priority-language-links > span { color: #315738; }
.static-calculator-seo + .priority-language-links a { color: #17618a; }
.site-footer p { color: #c9dbce; font-size: 10px; line-height: 1.5; }
.footer-note span { color: #c8e27b; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.footer-links a { display: flex; min-height: 26px; align-items: center; color: #dce9df; font-size: 11px; }
.copyright { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid #3e6a4c; color: #aec4b4; font-size: 9px; }

/* Match the production typography used by YourPrintableSite.com. */
.desktop-nav a, .desktop-nav > button { font-size: 13px; }
.region-trigger { height: 42px; font-size: 12px; }
.region-trigger b { font-size: 10px; }
.region-popover { top: 48px; }
.region-search, .locale-independent-settings label { font-size: 10px; }
.region-search input, .locale-independent-settings select { min-height: 38px; font-size: 12px; }
.region-options strong { font-size: 12px; }
.region-options small { font-size: 9px; }
.search-trigger, .quick-calc-trigger { height: 42px; }
.search-trigger b, .quick-calc-trigger b { font-size: 12px; }

.home-search-band h1 { font-size: clamp(46px, 5.8vw, 64px); line-height: 1.02; letter-spacing: -.048em; font-weight: 680; }
.home-search-band p { font-size: 17px; line-height: 1.65; }
.home-search-band aside > strong { font-size: 15px; }
.home-search-band aside a { font-size: 13px; }
.home-summary > * { font-size: 12px; }
.home-categories > h2, .content-layout h2, .deep-guide-heading h2 { font-size: clamp(30px, 3vw, 38px); line-height: 1.15; letter-spacing: -.035em; }
.category-card h3 { font-size: 21px; letter-spacing: -.025em; }
.category-card p { font-size: 13px; line-height: 1.62; }
.category-card li, .view-category { font-size: 13px; }
.home-about h2 { font-size: 30px; }
.home-about p { font-size: 15px; line-height: 1.75; }
.home-about > div { font-size: 12px; }

.category-hero h1, .directory-hero h1 { font-size: clamp(42px, 5vw, 56px); line-height: 1.04; letter-spacing: -.04em; font-weight: 680; }
.calculator-intro h1 { font-size: clamp(40px, 4.6vw, 54px); line-height: 1.04; letter-spacing: -.04em; font-weight: 680; }
.category-hero p, .calculator-intro p, .directory-hero > p { font-size: 15px; line-height: 1.7; }
.breadcrumb { font-size: 11px; }
.eyebrow, .privacy-pill, .page-toc, .favorite-main { font-size: 12px; }
.section-heading h2, .category-guide h2 { font-size: 30px; letter-spacing: -.03em; }
.section-heading > p, .category-guide p { font-size: 14px; line-height: 1.75; }
.text-link { font-size: 13px; }
.tool-card .eyebrow { font-size: 10px; }
.tool-card h3 { font-size: 20px; letter-spacing: -.025em; }
.tool-card p { font-size: 13px; line-height: 1.62; }

.panel-heading, .result-top { font-size: 13px; }
.panel-actions > button, .currency-picker select { min-height: 30px; font-size: 12px; }
.input-group > span:first-child { font-size: 13px; line-height: 1.4; }
.input-shell { min-height: 43px; }
.input-shell b { font-size: 12px; }
.input-shell input, .input-shell select { font-size: 14px; line-height: 1.45; }
.input-group small, .remember-toggle, .privacy-inline p { font-size: 11px; }
.primary-result > span, .primary-result p { font-size: 12px; }
.result-lines > div { min-height: 39px; font-size: 13px; }
.chart-legend > div, .trend-chart figcaption, .result-insight p { font-size: 12px; line-height: 1.6; }
.scenario-heading { font-size: 12px; }
.scenario-comparison > div:not(.scenario-heading) { font-size: 12px; }
.trend-chart figcaption span, .trend-chart > div { font-size: 10px; }
.result-table summary { font-size: 13px; }
.result-table table { font-size: 12px; }

.explanation > p, .faq p { font-size: 15px; line-height: 1.75; }
.explanation h3, .guide-columns h3 { font-size: 18px; line-height: 1.28; letter-spacing: -.018em; }
.formula-box span, .disclaimer strong { font-size: 11px; }
.formula-box strong { font-size: 16px; }
.disclaimer p, .guide-columns li, .trust-panel p, .trust-panel a { font-size: 13px; line-height: 1.65; }
.faq summary { font-size: 15px; line-height: 1.45; }
.trust-panel h2 { font-size: 21px; }
.trust-actions button, .feedback-card button { min-height: 40px; font-size: 13px; }
.feedback-card { font-size: 13px; }
.feedback-card p { font-size: 13px; }

.directory-hero > p, .info-hero > p { font-size: 15px; line-height: 1.7; }
.mini-tool-grid strong { font-size: 13px; }
.mini-tool-grid small, .directory-item > button { font-size: 11px; }
.empty-state { font-size: 13px; }
.info-hero h1 { font-size: clamp(42px, 5vw, 56px); letter-spacing: -.04em; }
.info-content h2 { font-size: 21px; }
.info-content p { font-size: 15px; line-height: 1.75; }

.dialog-search button, .search-results small { font-size: 11px; }
.search-results strong { font-size: 14px; }
.unit-converter-body label { font-size: 12px; }
.unit-converter-body input, .unit-converter-body select { font-size: 14px; }
.unit-converter-result span, .unit-converter-result small { font-size: 11px; }
.converter-actions button, .converter-recent button, .unit-converter-body > a { font-size: 12px; }
.site-footer p, .footer-note span, .footer-links a, .copyright { font-size: 12px; line-height: 1.6; }

@media (max-width: 900px) {
  .header-top { gap: 10px; }
  .desktop-nav { display: none; position: absolute; top: 60px; left: 0; right: 0; padding: 7px; flex-wrap: wrap; background: var(--green-900); border-bottom: 3px solid #79a83a; }
  .desktop-nav.open { display: flex; }
  .desktop-nav a { min-height: 36px; }
  .desktop-nav > button { min-height: 36px; }
  .menu-trigger { display: block; }
  .search-trigger { margin-left: auto; }
  .search-trigger b, .search-trigger kbd, .quick-calc-trigger b { display: none; }
  .donate-button { width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 50%; }
  .donate-button span { display: none; }
  .region-trigger { width: 145px; }
  .category-grid, .tool-grid { grid-template-columns: repeat(2, 1fr); }
  .calculator-workspace { grid-template-columns: 350px 1fr; gap: 14px; }
  .content-layout { grid-template-columns: 1fr; }
  .guide-columns { grid-template-columns: 1fr; }
  .directory-grid { grid-template-columns: repeat(2, 1fr); }
  .mini-tool-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  body { font-size: 14px; }
  .header-top { min-height: 54px; padding-inline: 12px; flex-wrap: wrap; }
  .brand { font-size: 18px; }
  .brand > span:last-child { display: none; }
  .brand-mark { width: 27px; height: 27px; }
  .region-trigger { width: 102px; padding-inline: 5px; grid-template-columns: 23px minmax(0,1fr) 8px; }
  .header-social-actions { order: 10; flex: 1 0 100%; justify-content: center; padding-bottom: 8px; }
  .region-popover { position: fixed; top: 108px; left: 12px; right: 12px; width: auto; }
  .converter-actions { grid-template-columns: repeat(2, 1fr); }
  .quick-calc { top: 112px; right: 8px; left: 8px !important; width: auto; max-width: 326px; margin-left: auto; }
  .unit-converter-dialog { top: 108px; max-height: calc(100vh - 116px); overflow-y: auto; }
  .region-options { max-height: min(62vh, 430px); }
  .desktop-nav { top: 104px; }
  .home-main { padding: 12px 10px 35px; }
  .home-search-band { grid-template-columns: 1fr; padding: 17px; }
  .home-search-band h1 { font-size: clamp(38px, 11vw, 46px); }
  .home-summary { flex-wrap: wrap; }
  .home-summary > * { flex: 1 1 50%; border-bottom: 1px solid #d3dbd0; }
  .category-grid, .tool-grid { grid-template-columns: 1fr; }
  .personal-shelves { grid-template-columns: 1fr; padding-inline: 10px; }
  .directory-grid, .mini-tool-grid { grid-template-columns: 1fr; }
  .category-card p { min-height: 0; }
  .calculator-workspace { grid-template-columns: 1fr; padding: 12px 10px 24px; }
  .calculation-history-shelf { margin: 12px 10px 22px; padding: 13px; }
  .calculation-history-list, .journey-grid { grid-template-columns: 1fr; }
  .calculation-history-item { align-items: flex-start; }
  .category-hero, .calculator-intro, .section, .content-layout { padding-inline: 10px; }
  .category-hero h1, .calculator-intro h1, .directory-hero h1, .info-hero h1 { font-size: clamp(34px, 10vw, 42px); }
  .input-group { grid-template-columns: 118px 1fr; }
  .input-panel, .result-panel { padding-inline: 12px; }
  .panel-heading { margin-inline: -12px; align-items: flex-start; }
  .result-top { margin-inline: -12px; }
  .primary-result > strong { font-size: 32px; }
  .chart-legend { grid-template-columns: 1fr; }
  .trend-grid { grid-template-columns: 1fr; }
  .scenario-comparison > div:not(.scenario-heading) { grid-template-columns: 1fr; gap: 2px; }
  .page-toc { margin-inline: 10px; }
  .trust-panel, .feedback-card { margin-inline: 10px; align-items: flex-start; flex-direction: column; }
  .trust-actions { flex-wrap: wrap; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 0; }
  .category-guide { margin-inline: 10px; }
  .info-content article { grid-template-columns: 1fr; gap: 6px; }
  .feedback-page-card { margin-inline: 10px; padding: 18px; grid-template-columns: 1fr; }
  .feedback-field-grid { grid-template-columns: 1fr; }
  .feedback-submit-row { align-items: stretch; flex-direction: column; }
  .site-footer { grid-template-columns: 1fr; padding-inline: 18px; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

@media print {
  .site-header, .site-footer, .input-panel, .search-overlay, .related-section, .faq, .panel-actions, .page-toc, .favorite-main, .trust-actions, .feedback-card { display: none !important; }
  .calculator-intro, .calculator-workspace, .content-layout, .deep-guide { max-width: none; padding: 12px; }
  .calculator-workspace { display: block; }
  .result-panel { border: 1px solid #777; }
  .result-top, .result-table th { background: #ddd !important; color: #111 !important; }
  .table-scroll { max-height: none; overflow: visible; }
}
.answer-table{margin-top:1.5rem}.answer-table h3{margin-bottom:.65rem}.table-scroll{max-width:100%;overflow-x:auto}.answer-table table{width:100%;border-collapse:collapse;font-size:.95rem}.answer-table th,.answer-table td{padding:.7rem .8rem;border:1px solid #d7e3d4;text-align:left;vertical-align:top}.answer-table th{background:#edf5ea;color:#245526}.answer-table tbody tr:nth-child(even){background:#f8fbf7}
body:has(.embed-calculator) { background:#f4f7f1; }
.embed-calculator { max-width:980px; margin:0 auto; padding:18px; font-family:inherit; }
.embed-calculator > header { margin-bottom:14px; }
.embed-calculator > header span { color:var(--category-accent); font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.embed-calculator > header h1 { margin:.2rem 0; font-size:clamp(1.4rem,4vw,2rem); }
.embed-calculator > header p { margin:0; color:#52604f; }
.embed-calculator .calculator-workspace { margin:0; }
.embed-calculator .embed-reset { margin-top:12px; }
.embed-calculator > footer { padding:14px 4px 0; text-align:center; }
.embed-calculator > footer a { color:#2f6f32; font-weight:700; text-decoration:none; }
.desktop-nav .embed-nav-link { background:#e8f3e4; border:1px solid #afcaa8; border-radius:7px; color:#245b28; font-weight:800; }
.embed-directory { max-width:1240px; margin:0 auto; padding:0 22px 60px; min-width:0; }
.embed-directory-hero { padding:42px 0 30px; max-width:900px; }
.embed-directory-hero h1 { font-size:clamp(2rem,5vw,3.5rem); margin:.35rem 0 .7rem; }
.embed-directory-hero > p { color:#52604f; font-size:1.08rem; max-width:780px; }
.embed-benefits { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.embed-benefits span { background:#edf6e9; border:1px solid #c8ddc1; border-radius:999px; color:#2d6331; font-weight:700; padding:8px 12px; }
.featured-embed-shelf { margin-bottom:30px; }
.featured-embed-shelf > div:last-child { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.featured-embed-shelf > div:last-child > a { display:flex; flex-direction:column; gap:7px; padding:11px; border:1px solid #d2dfce; border-radius:11px; background:#fff; color:#263b2c; text-decoration:none; }
.featured-embed-shelf img { width:100%; height:auto; border-radius:7px; }
.featured-embed-shelf em { color:#4b7a43; font-size:.72rem; font-style:normal; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.featured-embed-shelf strong { color:#174e2e; }
.featured-embed-shelf span { color:#647064; font-size:.82rem; line-height:1.35; }
.embed-directory-layout { display:grid; grid-template-columns:minmax(300px,.82fr) minmax(0,1.45fr); gap:24px; align-items:start; min-width:0; }
.embed-catalog,.embed-preview-panel { background:#fff; border:1px solid #d8e1d4; border-radius:14px; box-shadow:0 8px 24px rgba(40,70,35,.08); }
.embed-catalog { padding:18px; position:sticky; top:18px; }
.embed-search { display:block; font-weight:800; }
.embed-search span { display:block; margin-bottom:7px; }
.embed-search input { width:100%; border:1px solid #bbc9b6; border-radius:8px; font:inherit; padding:11px 12px; }
.embed-filters { display:flex; gap:6px; overflow:auto; padding:12px 0; }
.embed-filters button { border:1px solid #c5d2c1; border-radius:999px; background:#fff; padding:7px 10px; white-space:nowrap; }
.embed-filters button.active { background:#2f7034; color:#fff; border-color:#2f7034; }
.embed-catalog-list { display:grid; gap:6px; max-height:620px; overflow:auto; padding-right:4px; }
.embed-catalog-list button { display:grid; grid-template-columns:32px 1fr auto; gap:8px; align-items:center; border:1px solid transparent; border-radius:8px; background:#f7faf5; color:#263327; padding:10px; text-align:left; }
.embed-catalog-list button:hover,.embed-catalog-list button.selected { border-color:#71a26e; background:#edf6e9; }
.embed-catalog-list button strong { font-size:.92rem; }
.embed-catalog-list button small { color:#4f5e4d; }
.embed-preview-panel { padding:22px; }
.embed-preview-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:14px; }
.embed-preview-heading h2 { margin:.25rem 0 0; }
.embed-preview-heading a { color:#2f7034; font-weight:750; }
.embed-preview-panel iframe { width:100%; height:620px; border:1px solid #ced8ca; border-radius:12px; background:#f4f7f1; }
.embed-code-label { display:block; margin-top:16px; font-weight:800; }
.embed-code-label span { display:block; margin-bottom:7px; }
.embed-code-label textarea { width:100%; border:1px solid #bbc9b6; border-radius:8px; background:#f7faf5; font:500 .84rem/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; padding:11px; resize:vertical; box-sizing:border-box; max-width:100%; }
.embed-catalog,.embed-preview-panel,.embed-search,.embed-filters,.embed-catalog-list,.embed-code-label { min-width:0; max-width:100%; }
.embed-search input,.embed-preview-panel iframe { box-sizing:border-box; max-width:100%; }
.embed-copy-main { margin-top:10px; border:0; border-radius:8px; background:#2f7034; color:#fff; font-weight:800; padding:11px 16px; }
.embed-license { color:#687466; font-size:.88rem; }
.embed-how { padding:48px 0 0; }
.embed-how > div { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.embed-how article { background:#edf6e9; border-radius:12px; padding:20px; }
.embed-how article b { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#2f7034; color:#fff; }
@media (max-width:850px) { .embed-directory-layout { grid-template-columns:1fr; } .embed-catalog { position:static; } .embed-catalog-list { max-height:380px; } .embed-how > div { grid-template-columns:1fr; } }
@media (max-width:620px) { .embed-directory { padding-inline:14px; } .embed-catalog,.embed-preview-panel { padding:14px; } .embed-preview-heading { align-items:flex-start; flex-direction:column; } .embed-catalog-list button { grid-template-columns:28px minmax(0,1fr); } .embed-catalog-list button small { grid-column:2; } }
@media (max-width:1000px) { .featured-embed-shelf > div:last-child { grid-template-columns:repeat(3,1fr); } }
@media (max-width:620px) { .featured-embed-shelf > div:last-child { grid-template-columns:1fr; } }

.featured-embed-page { max-width:1180px; margin:0 auto; padding:0 22px 64px; }
.featured-embed-hero { max-width:900px; padding:42px 0 34px; }
.featured-embed-hero h1 { margin:.4rem 0 .8rem; font-size:clamp(2.1rem,5vw,4rem); line-height:1.02; color:#104b2d; }
.featured-embed-hero > p { max-width:820px; color:#506052; font-size:1.12rem; line-height:1.7; }
.featured-embed-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.featured-embed-actions a { border:1px solid #91b18b; border-radius:9px; color:#205f32; font-weight:800; padding:11px 16px; text-decoration:none; }
.featured-embed-actions a.primary { background:#2f7d32; border-color:#2f7d32; color:#fff; }
.featured-embed-overview { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.75fr); gap:26px; align-items:center; padding:26px; border:1px solid #d0dccd; border-radius:18px; background:#fff; box-shadow:0 12px 32px rgba(32,75,39,.08); }
.featured-embed-overview figure { margin:0; }
.featured-embed-overview img { display:block; width:100%; height:auto; border:1px solid #ccdac8; border-radius:13px; background:#eef5ea; }
.featured-embed-overview figcaption { margin-top:8px; color:#657063; font-size:.88rem; }
.featured-embed-overview h2 { margin:.35rem 0 .65rem; color:#144b2e; }
.featured-embed-overview article > p { color:#526052; line-height:1.65; }
.featured-embed-overview ul { display:grid; gap:10px; margin:20px 0 0; padding:0; list-style:none; }
.featured-embed-overview li { display:flex; gap:9px; align-items:flex-start; }
.featured-embed-overview li span { color:#2f7d32; font-weight:900; }
.featured-use-case { margin:14px 0; padding:12px 14px; border-left:4px solid #5b9b4a; background:#f4f8f1; }
.featured-use-case strong { color:#245d31; }
.featured-use-case p { margin:5px 0 0; color:#516154; line-height:1.55; }
.featured-live-preview { padding-top:52px; }
.featured-live-preview iframe { width:100%; height:620px; border:1px solid #cbd8c7; border-radius:15px; background:#f4f7f1; }
.featured-code-card { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:30px; margin-top:42px; padding:28px; border-radius:16px; background:#edf5e9; border:1px solid #cadbc5; }
.featured-code-card h2 { margin:.35rem 0 .6rem; color:#144b2e; }
.featured-code-card p,.featured-code-card li { color:#506052; line-height:1.6; }
.featured-code-card label { display:block; margin-bottom:7px; font-weight:800; }
.featured-code-card textarea { width:100%; min-height:178px; padding:13px; border:1px solid #afc4aa; border-radius:9px; background:#fff; font:500 .86rem/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; resize:vertical; }
.featured-code-card button { margin-top:10px; border:0; border-radius:8px; background:#2f7d32; color:#fff; font-weight:800; padding:12px 17px; }
.featured-copy-status { min-height:1.5em; margin:.45rem 0 0; color:#2d6235!important; font-weight:700; }
.featured-embed-related { padding-top:52px; }
.featured-embed-related .section-heading > a { color:#2f7034; font-weight:800; }
.featured-embed-related > div:last-child { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.featured-embed-related > div:last-child > a { display:flex; flex-direction:column; gap:8px; padding:12px; border:1px solid #d5dfd1; border-radius:12px; background:#fff; color:#263b2c; text-decoration:none; }
.featured-embed-related img { display:block; width:100%; height:auto; border-radius:8px; }
.featured-embed-related strong { color:#174e2e; }
.featured-embed-related span { color:#617063; font-size:.9rem; line-height:1.45; }
@media (max-width:900px) { .featured-embed-overview,.featured-code-card { grid-template-columns:1fr; } .featured-embed-related > div:last-child { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .featured-embed-page { padding-inline:14px; } .featured-embed-overview,.featured-code-card { padding:18px; } .featured-live-preview iframe { height:680px; } .featured-embed-related > div:last-child { grid-template-columns:1fr; } }