@layer reset, base, components, responsive;
@font-face { font-family: Archivo; src: url('/assets/archivo-latin.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
  button, input, select { font: inherit; }
  button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
  svg { max-width: 100%; }
  [hidden] { display: none !important; }
}
@layer base {
  .article-copy .table-hint { margin-bottom: 10px; font-size: 13px; color: var(--muted); }
  @media (min-width: 768px) { .article-copy .table-hint { display: none; } }
  :root { --ink: #123c2d; --muted: #4e665a; --field: #145b43; --field-deep: #103f31; --mint: #d8efdf; --paper: #f3f8f3; --white: #fffefa; --line: #c7d8cb; --accent: #f7d9ae; --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-travel: cubic-bezier(.77, 0, .175, 1); --font: Archivo, 'Segoe UI', sans-serif; --gutter: clamp(20px, 5vw, 80px); }
  html { color-scheme: light; scroll-behavior: smooth; scrollbar-color: #6b9078 var(--paper); scrollbar-width: thin; }
  body { background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
  a { color: inherit; text-underline-offset: .25em; }
  a:hover { text-decoration-thickness: 2px; }
  button { cursor: pointer; }
  button:disabled { cursor: default; opacity: .55; }
  :focus-visible { outline: 3px solid #c7612d; outline-offset: 5px; }
  ::selection { background: var(--accent); color: var(--ink); }
  input { caret-color: var(--field); }
  h1, h2, h3 { text-wrap: balance; font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
  h1 { font-size: clamp(40px, 5vw, 72px); }
  h2 { font-size: clamp(32px, 3.2vw, 46px); }
  h3 { font-size: 24px; }
  p { color: var(--muted); }
  code { font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
  .icon { width: 22px; height: 22px; flex-shrink: 0; vertical-align: middle; }
  small, .small { font-size: 13px; line-height: 1.5; }
  .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .04em; }
  .site-main, .header-inner, .footer-main, .footer-bottom { width: min(1280px, calc(100% - var(--gutter) * 2)); margin-inline: auto; }
  .home-page .site-main { width: 100%; }
  .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; }
  .skip-link { position: fixed; left: 16px; top: 12px; z-index: 10; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; color: var(--white); background: var(--ink); }
  .skip-link:focus { width: auto; height: auto; padding: 12px 18px; clip-path: none; }
}
@layer components {
  .site-header { border-bottom: 1px solid var(--line); background: var(--paper); }
  .header-inner { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
  .brand { display: inline-flex; align-items: center; gap: 10px; font-size: 29px; font-weight: 700; letter-spacing: -.04em; line-height: 1; text-decoration: none; white-space: nowrap; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-and { font-weight: 400; padding-inline: .1em; }
  .site-header nav { display: flex; gap: 32px; }
  .site-header nav a { font-size: 14px; text-decoration: none; padding-block: 9px; border-bottom: 1px solid transparent; }
  .site-header nav a[aria-current] { border-color: currentColor; }
  .header-cta { display: inline-flex; align-items: center; justify-content: center; gap: 28px; border: 1px solid var(--ink); border-radius: 6px; min-height: 44px; padding: 10px 16px; font-size: 13px; font-weight: 600; text-decoration: none; }
  .button, .demo-update { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 50px; background: var(--field); border: 0; border-radius: 6px; padding: 14px 22px; color: var(--white); font-size: 14px; font-weight: 600; text-decoration: none; }
  .button, .header-cta, .demo-update, .outcome-switch button { transition: transform 160ms var(--ease-out), background-color 160ms ease; }
  .button:active:not(:focus-visible), .header-cta:active:not(:focus-visible), .demo-update:active:not(:focus-visible) { transform: scale(.98); }
  .text-link { display: inline-flex; align-items: center; gap: 18px; font-size: 14px; font-weight: 600; text-decoration: none; }
  .text-link .icon, .hero-link .icon { transition: transform 200ms var(--ease-out); }
  .round-arrow { display: inline-flex; align-items: center; justify-content: center; width: 47px; height: 47px; border: 1px solid #93b5a0; border-radius: 50%; flex-shrink: 0; transition: transform 220ms var(--ease-out), background-color 200ms ease; }
  .field-hero { background: var(--field); color: var(--white); padding: 54px var(--gutter) 0; overflow: clip; }
  .hero-intro, .field-stage, .hero-foot { max-width: 1280px; margin-inline: auto; }
  .hero-intro { display: grid; grid-template-columns: 1.8fr 1fr; gap: 45px; align-items: end; padding-bottom: 46px; }
  .hero-intro h1 { font-size: clamp(58px, 6.65vw, 96px); font-weight: 600; font-stretch: 96%; letter-spacing: -.04em; line-height: .98; }
  .hero-intro h1 span { color: var(--mint); }
  .hero-summary { padding: 0 0 5px 15px; max-width: 350px; }
  .hero-summary > p:first-child { color: var(--white); font-size: 23px; line-height: 1.3; letter-spacing: -.02em; }
  .hero-summary > p:nth-child(2) { color: #cee3d6; font-size: 15px; margin-top: 14px; max-width: 290px; }
  .hero-link { margin-top: 22px; display: inline-flex; align-items: center; gap: 16px; font-size: 13px; text-decoration: none; border-bottom: 1px solid #90b6a0; padding-bottom: 8px; }
  .field-stage { position: relative; isolation: isolate; display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 70px; padding: 32px 0 28px; border-top: 1px solid #4e856b; }
  .track-lines { position: absolute; width: calc(100% + 180px); max-width: none; height: 100%; left: -90px; top: 12px; z-index: -1; pointer-events: none; color: #a9d3b7; opacity: .16; }
  .track-lines path { stroke: currentColor; stroke-width: 1; }
  .track-mobile { display: none; }
  .demo-controls h2 { font-size: 23px; letter-spacing: -.02em; }
  .demo-controls > p { color: #d0e4d6; font-size: 13px; margin: 8px 0 22px; }
  .demo-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .demo-inputs > div { min-width: 0; }
  .demo-inputs label { display: block; font-size: 12px; color: #e0eee4; margin-bottom: 7px; }
  .demo-inputs input { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #7daa90; background: var(--field-deep); color: var(--white); border-radius: 6px; font-size: 20px; font-variant-numeric: tabular-nums; caret-color: var(--accent); }
  .demo-terms { margin-top: 11px; font-size: 12px; color: #cce0d3; }
  .demo-update { min-height: 43px; margin-top: 18px; background: var(--mint); color: var(--ink); font-size: 12px; padding: 10px 14px; }
  .demo-update .icon { width: 17px; height: 17px; }
  .demo-error { margin-top: 14px; padding: 10px 12px; border-radius: 6px; background: #ffdfd2; color: #782d19; font-size: 13px; }
  .demo-working { min-width: 0; display: flex; flex-direction: column; }
  .outcome-switch { align-self: flex-start; display: inline-flex; gap: 4px; padding: 4px; border: 1px solid #69977f; border-radius: 7px; }
  .outcome-switch button { border: 0; border-radius: 4px; background: transparent; color: var(--white); padding: 8px 16px; font-size: 12px; }
  .outcome-switch button[aria-pressed='true'] { background: var(--accent); color: var(--ink); }
  .working-values { display: grid; grid-template-columns: minmax(0, .8fr) minmax(70px, .65fr) minmax(0, 1.35fr); align-items: center; gap: 18px; flex: 1; padding-top: 24px; }
  .working-parts { display: grid; gap: 22px; min-width: 0; justify-self: end; text-align: right; }
  .working-join { position: relative; width: 100%; height: 140px; place-self: center; }
  .working-join svg { width: 100%; height: 100%; overflow: visible; }
  .working-join .return-route { stroke-width: 2; vector-effect: non-scaling-stroke; }
  .working-join .win-route { stroke: #a9d3b7; }
  .working-join .place-route { stroke: var(--accent); }
  .working-join::after { content: '+'; position: absolute; left: 75.833%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid var(--accent); border-radius: 50%; background: var(--field); color: var(--accent); font-size: 18px; line-height: 1; }
  .join-vertical { display: none; }
  .working-parts > div > span { display: block; font-size: 12px; color: #cfe5d8; }
  .working-parts strong { display: block; font-size: clamp(23px, 2.4vw, 34px); font-weight: 500; letter-spacing: -.035em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .working-total { min-width: 0; }
  .working-total > span { font-size: 12px; color: #d0e4d8; }
  .working-total > strong { display: block; color: var(--accent); font-size: clamp(42px, 4.8vw, 67px); font-weight: 600; line-height: 1.1; margin-top: 8px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .working-total p { margin-top: 12px; color: #d0e4d8; font-size: 12px; }
  .working-total p > span[aria-hidden] { margin-inline: 6px; color: #92bba3; }
  .demo-disclaimer { color: #c6ddce; font-size: 11px; margin-top: 26px; }
  .demo-pending { flex: 1; padding-top: 34px; color: var(--mint); font-size: 20px; }
  .hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 19px; border-top: 1px solid #4e856b; color: #d5e7dc; font-size: 12px; }
  .hero-foot > span, .hero-foot a { display: inline-flex; align-items: center; gap: 10px; }
  .hero-foot a { text-decoration: none; }
  .hero-foot .icon { width: 16px; height: 16px; }
  .tool-section, .field-guide, .method-strip { width: min(1280px, calc(100% - var(--gutter) * 2)); margin-inline: auto; }
  .tool-section { padding: 88px 0 82px; }
  .section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 35px; padding-bottom: 38px; }
  .section-heading p { font-size: 15px; }
  .tool-directory { border-top: 1px solid var(--line); }
  .directory-row { display: flex; align-items: center; gap: 35px; padding: 31px 4px; border-bottom: 1px solid var(--line); text-decoration: none; }
  .directory-glyph { width: 130px; flex-shrink: 0; }
  .directory-glyph svg { width: 115px; height: 76px; stroke: #256e4e; stroke-width: 2; }
  .directory-glyph circle { fill: var(--paper); }
  .directory-row h3 { font-size: 30px; }
  .directory-row p { margin-top: 10px; font-size: 14px; }
  .directory-format { margin-left: auto; max-width: 150px; font-size: 12px; color: var(--muted); }
  .converter-glyph { font-size: 26px; letter-spacing: -.03em; line-height: 1.15; font-weight: 600; }
  .converter-glyph span { display: block; }
  .converter-glyph span + span { padding-left: 37px; color: #397e58; }
  .field-guide { display: grid; grid-template-columns: 1.1fr 1fr; gap: 90px; background: var(--mint); padding: 55px 58px; border-radius: 12px; }
  .guide-intro h2 { font-size: clamp(34px, 3.5vw, 48px); }
  .guide-intro p { font-size: 15px; margin-top: 22px; max-width: 430px; }
  .guide-intro .button { margin-top: 30px; }
  .guide-route { list-style: none; padding: 5px 0; }
  .guide-route li { display: flex; gap: 22px; position: relative; padding-bottom: 30px; }
  .guide-route li:last-child { padding-bottom: 0; }
  .guide-route li:not(:last-child)::before { content: ''; position: absolute; left: 19px; top: 39px; bottom: 0; width: 1px; background: #8fb69b; }
  .route-marker { display: inline-flex; align-items: center; justify-content: center; width: 39px; height: 39px; border-radius: 50%; border: 1px solid #75a686; flex-shrink: 0; font-size: 14px; }
  .guide-route h3 { font-size: 20px; margin-top: 7px; }
  .guide-route p { font-size: 13px; margin-top: 9px; }
  .method-strip { display: grid; grid-template-columns: auto 1.1fr 1fr auto; align-items: center; gap: 32px; padding-block: 70px; }
  .method-symbol { font-size: 70px; color: #397e58; font-weight: 400; line-height: 1; }
  .method-strip h2 { font-size: 25px; }
  .method-strip p { font-size: 14px; }
  .site-footer { background: var(--field-deep); color: #e2eee5; }
  .footer-main { padding-block: 47px; display: flex; justify-content: space-between; gap: 35px; }
  .footer-brand .brand { font-size: 44px; }
  .footer-brand p { font-size: 13px; color: #bed4c6; margin-top: 17px; }
  .footer-main nav { display: flex; flex-wrap: wrap; gap: 25px; align-items: center; }
  .footer-main nav a { font-size: 13px; text-decoration: none; padding-block: 8px; }
  .footer-bottom { padding-block: 22px; border-top: 1px solid #416351; display: flex; justify-content: space-between; gap: 20px; }
  .footer-bottom p, .footer-bottom a { font-size: 11px; color: #c0d6c7; }
  .footer-bottom p > span { margin-inline: 10px; }
  .footer-bottom a { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
  .footer-bottom .icon { width: 15px; height: 15px; }
  .breadcrumbs { padding-top: 26px; }
  .breadcrumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 12px; }
  .breadcrumbs li + li::before { content: '/'; padding-right: 12px; color: #6f8f7b; }
  .breadcrumbs a { text-decoration: none; }
  .page-heading { padding: 48px 0 45px; max-width: 990px; }
  .page-heading h1 { font-size: clamp(40px, 5vw, 68px); max-width: 880px; }
  .page-heading > p { margin-top: 21px; font-size: 17px; max-width: 660px; }
  .calculator-layout { display: grid; grid-template-columns: 1.45fr 1fr; gap: 28px; align-items: start; }
  .calculator-layout > *, .form-grid > * { min-width: 0; }
  .calculator-card { padding: 33px; border: 1px solid var(--line); background: var(--white); border-radius: 12px; }
  .calculator-card h2 { font-size: 27px; margin-bottom: 27px; }
  .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
  .panel-heading h2 { margin: 0; }
  .panel-heading .small { font-size: 12px; color: var(--muted); }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px 22px; }
  .field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 9px; }
  .field input, .field select { width: 100%; min-height: 51px; padding: 11px 13px; border: 1px solid #a8c0ad; border-radius: 6px; color: var(--ink); background: var(--white); font-size: 16px; }
  .field select { padding-right: 23px; font-size: 13px; }
  .field small { display: block; font-size: 12px; margin-top: 7px; color: var(--muted); }
  [aria-invalid='true'] { border-color: #b94b2a !important; }
  .form-actions { display: flex; gap: 23px; flex-wrap: wrap; align-items: center; margin-top: 29px; }
  .reset-button { padding: 12px 0; background: none; border: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; font-size: 13px; }
  .form-error { color: #863721; background: #fff0e9; padding: 15px; border: 1px solid #e5b8a7; border-radius: 6px; font-size: 14px; margin-top: 21px; }
  .local-note { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; margin-top: 26px; padding-top: 21px; border-top: 1px solid var(--line); }
  .local-note .icon { width: 16px; height: 19px; }
  .result-card { border-radius: 12px; padding: 31px; background: var(--field); color: var(--white); }
  .result-top { display: flex; align-items: center; justify-content: space-between; }
  .result-card .eyebrow { color: #d7e9de; font-size: 11px; font-weight: 500; }
  .result-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
  .result-label { display: block; color: #d5e8dd; font-size: 13px; margin-top: 31px; }
  .result-value { display: block; font-size: clamp(37px, 4.8vw, 65px); line-height: 1.15; font-weight: 600; letter-spacing: -.04em; color: var(--accent); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; margin-top: 9px; }
  .result-subtitle { color: #cee3d6; font-size: 12px; margin-top: 13px; }
  .result-breakdown { margin-top: 29px; }
  .result-breakdown > div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-top: 1px solid #5b8c72; font-size: 13px; }
  .result-breakdown dd { text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; }
  .result-breakdown dt { flex-shrink: 0; }
  .result-breakdown .profit-row { font-weight: 600; color: var(--accent); padding-top: 18px; margin-top: 5px; }
  .result-footnote { border-top: 1px solid #5b8c72; margin-top: 18px; padding-top: 18px; font-size: 11px; color: #cee3d6; }
  .small-note { padding: 22px 4px; font-size: 13px; }
  .small-note strong { display: block; margin-bottom: 7px; }
  .notice { padding: 22px; background: #e0eddf; border-radius: 8px; color: var(--ink); font-size: 15px; }
  .notice p { margin-top: 9px; }
  .reading-section { display: grid; grid-template-columns: 1.45fr 1fr; gap: 75px; margin-block: 70px; }
  .article-copy { max-width: 70ch; }
  .article-copy h2 { font-size: 31px; margin: 38px 0 18px; line-height: 1.14; }
  .article-copy > h2:first-child { margin-top: 0; }
  .article-copy h3 { margin: 32px 0 16px; font-size: 22px; }
  .article-copy p { margin-bottom: 20px; font-size: 16px; line-height: 1.8; }
  .article-copy ul { padding-left: 23px; margin-block: 20px; font-size: 15px; color: var(--muted); }
  .article-copy li { padding-bottom: 10px; }
  .formula-box { background: #e0ecdf; padding: 24px; margin-block: 27px; border-radius: 8px; }
  .formula-box span { display: block; font-size: 12px; font-weight: 600; margin-bottom: 9px; }
  .formula-box code { display: block; font-size: 13px; line-height: 1.7; }
  .formula-box code + span { margin-top: 23px; }
  .source-note { border-top: 1px solid var(--line); padding-top: 23px; margin-top: 34px; }
  .source-note p { font-size: 13px; margin-top: 13px; }
  .reading-sidebar { border-top: 1px solid var(--line); padding-top: 23px; align-self: start; margin-top: 5px; }
  .reading-sidebar > .eyebrow { display: block; margin-bottom: 16px; }
  .reading-sidebar > a { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding-block: 18px; border-bottom: 1px solid var(--line); font-size: 14px; text-decoration: none; }
  .reading-sidebar ul { padding-left: 20px; margin-bottom: 20px; color: var(--muted); font-size: 14px; }
  .reading-sidebar li { padding-bottom: 10px; }
  .faq-section { max-width: 850px; margin-block: 60px 80px; }
  .faq-section h2 { font-size: 34px; margin-bottom: 28px; }
  .faq-section details { border-top: 1px solid var(--line); }
  .faq-section details:last-child { border-bottom: 1px solid var(--line); }
  .faq-section summary { cursor: pointer; font-size: 15px; font-weight: 500; padding: 22px 2px; }
  .faq-section details p { padding: 0 2px 24px; font-size: 15px; }
  .conversion-results { margin-top: 18px; }
  .conversion-results > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-block: 17px; border-bottom: 1px solid #5b8c72; }
  .conversion-results dt { color: #d0e5d8; font-size: 13px; }
  .conversion-results dd { font-size: 33px; font-weight: 500; line-height: 1.3; text-align: right; overflow-wrap: anywhere; min-width: 0; }
  .conversion-results > div:last-child dd { font-size: 28px; }
  .tool-page-grid { border-top: 1px solid var(--line); margin-top: 10px; }
  .tool-card { display: flex; align-items: center; gap: 28px; padding: 36px 8px; border-bottom: 1px solid var(--line); text-decoration: none; }
  .tool-card .icon-box { width: 60px; height: 60px; display: grid; place-items: center; border: 1px solid #9fbea9; border-radius: 50%; flex-shrink: 0; }
  .tool-card h2 { font-size: 32px; }
  .tool-card p { margin-top: 12px; font-size: 15px; }
  .tool-card .round-arrow { margin-left: auto; }
  .inline-note { padding: 30px 0 70px; font-size: 15px; }
  .guide-list-card { display: flex; align-items: center; gap: 28px; padding: 34px; background: var(--mint); border-radius: 12px; text-decoration: none; }
  .guide-list-card + .guide-list-card { margin-top: 18px; }
  .guide-list-card > div { flex: 1; }
  .guide-list-card h2 { font-size: 32px; }
  .guide-list-card p { margin-top: 13px; font-size: 15px; }
  .table-scroll { overflow-x: auto; margin-block: 28px; border: 1px solid var(--line); border-radius: 10px; }
  .table-scroll:focus-visible { outline-offset: 2px; }
  .data-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 14px; }
  .data-table caption { text-align: left; padding: 16px 18px 4px; font-size: 13px; font-weight: 600; color: var(--ink); }
  .data-table th, .data-table td { padding: 12px 18px; border-top: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .data-table thead th { color: var(--muted); font-size: 12px; font-weight: 600; }
  .data-table th[scope='row'] { text-align: left; font-weight: 500; white-space: normal; }
  .data-table tbody tr:last-child th, .data-table tbody tr:last-child td { padding-bottom: 16px; }
  .glossary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 45px; margin: 55px 0 80px; }
  .glossary-grid h3 { font-size: 24px; }
  .glossary-grid p { margin-top: 16px; font-size: 15px; }
  .article-layout { margin-top: 8px; }
  .article-layout > .article-copy { min-width: 0; }
  .article-copy .article-lead { font-size: 20px; color: var(--ink); }
  .editorial-steps { list-style: none; padding: 0; counter-reset: steps; }
  .editorial-steps > li { counter-increment: steps; padding-left: 43px; position: relative; }
  .editorial-steps > li::before { content: counter(steps); position: absolute; left: 0; top: 0; font-size: 18px; color: #507d5f; }
  .editorial-steps h2 { font-size: 27px; }
  .standalone { padding-bottom: 70px; }
  .contact-email { font-size: 23px; overflow-wrap: anywhere; }
  .not-found { padding-block: 90px 110px; }
  .error-code { display: block; color: #4c7c5e; font-size: 90px; font-weight: 600; letter-spacing: -.04em; }
  .not-found h1 { margin-block: 20px; }
  .not-found .button { margin-top: 30px; }
  @media (hover: hover) and (pointer: fine) {
    .header-cta:hover, .button:hover { background: #0a3f2c; color: var(--white); }
    .demo-update:hover { background: #f0f6e9; }
    .text-link:hover .icon, .hero-link:hover .icon { transform: translateX(4px); }
    .directory-row:hover .round-arrow, .tool-card:hover .round-arrow { transform: rotate(-35deg); background: var(--mint); }
    .site-header nav a:hover { border-color: currentColor; }
    .reading-sidebar > a:hover, .footer-main nav a:hover, .hero-foot a:hover { text-decoration: underline; }
  }
}
@layer responsive {
  @media (max-width: 1100px) {
    .header-inner { gap: 20px; }
    .site-header nav { gap: 24px; }
    .header-cta { display: none; }
    .hero-intro { grid-template-columns: 1.7fr 1fr; gap: 25px; }
    .hero-intro h1 { font-size: clamp(48px, 6.65vw, 72px); }
    .hero-summary { padding-left: 0; }
    .field-stage { grid-template-columns: 275px minmax(0, 1fr); gap: 35px; }
    .working-values { grid-template-columns: 1fr; gap: 12px; }
    .working-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; text-align: center; justify-self: stretch; }
    .working-join { width: 100%; height: 58px; }
    .working-join::after { left: 50%; top: 65.278%; }
    .join-horizontal { display: none; }
    .join-vertical { display: block; }
    .working-total { padding-left: 0; border-left: 0; text-align: center; }
    .working-total > strong { font-size: 54px; }
    .working-total p { margin-top: 7px; }
    .demo-disclaimer { margin-top: 19px; }
    .directory-format { display: none; }
    .directory-row .round-arrow { margin-left: auto; }
    .field-guide { gap: 40px; padding: 42px; }
    .method-strip { grid-template-columns: auto 1fr 1fr; gap: 25px; }
    .method-strip .text-link { grid-column: 3; }
    .calculator-card { padding: 26px; }
    .form-grid { grid-template-columns: 1fr; gap: 21px; }
    .panel-heading { display: block; }
    .panel-heading .small { display: block; margin-top: 10px; }
    .reading-section { gap: 40px; }
    .footer-main nav { gap: 18px; }
  }
  @media (max-width: 700px) {
    .header-inner { padding-block: 19px 10px; flex-wrap: wrap; min-height: 105px; gap: 15px; }
    .brand { font-size: 27px; }
    .brand-mark { width: 30px; height: 30px; }
    .site-header nav { width: 100%; justify-content: space-between; gap: 14px; }
    .site-header nav a { font-size: 12px; padding-block: 8px; }
    .field-hero { padding-top: 35px; }
    .hero-intro { grid-template-columns: 1fr; gap: 22px; padding-bottom: 28px; }
    .hero-intro h1 { font-size: clamp(46px, 10vw, 70px); }
    .hero-summary { max-width: none; }
    .hero-summary > p:first-child { font-size: 19px; }
    .hero-summary > p:first-child br { display: none; }
    .hero-summary > p:nth-child(2) { max-width: 330px; font-size: 14px; margin-top: 8px; }
    .hero-link { font-size: 12px; margin-top: 17px; }
    .field-stage { grid-template-columns: 1fr; gap: 28px; padding-top: 26px; }
    .demo-controls h2 { font-size: 21px; }
    .demo-controls > p { margin-bottom: 15px; }
    .demo-inputs { gap: 16px; }
    .demo-inputs input { font-size: 19px; }
    .demo-update { min-height: 44px; margin-top: 14px; }
    .demo-working { border-top: 1px solid #57876f; padding-top: 24px; min-height: 415px; }
    .outcome-switch { align-self: stretch; }
    .outcome-switch button { flex: 1; min-height: 39px; padding-inline: 9px; }
    .working-values { grid-template-columns: 1fr; padding-top: 24px; gap: 12px; }
    .working-parts strong { font-size: 29px; }
    .working-total > strong { font-size: 63px; }
    .demo-disclaimer { margin-top: 22px; }
    .track-lines:not(.track-mobile) { display: none; }
    .track-mobile { display: block; width: calc(100% + 40px); left: -20px; top: 220px; height: 340px; opacity: .16; }
    .hero-foot { flex-direction: column; align-items: flex-start; gap: 14px; font-size: 11px; padding-block: 21px; }
    .tool-section { padding-block: 48px; }
    .section-heading { display: block; padding-bottom: 27px; }
    .section-heading h2 { font-size: 33px; }
    .section-heading p { margin-top: 19px; font-size: 14px; }
    .directory-row { gap: 17px; padding-block: 25px; flex-wrap: wrap; position: relative; }
    .directory-glyph { width: 72px; height: 50px; }
    .directory-glyph svg { width: 72px; height: 48px; }
    .directory-row > div:nth-child(2) { order: 3; flex-basis: 100%; }
    .directory-row h3 { font-size: 26px; }
    .directory-row p { font-size: 13px; max-width: 270px; }
    .directory-row .round-arrow { width: 42px; height: 42px; }
    .converter-glyph { font-size: 21px; }
    .converter-glyph span + span { padding-left: 24px; }
    .field-guide { grid-template-columns: 1fr; gap: 38px; padding: 29px 24px; }
    .guide-intro h2 { font-size: 34px; }
    .guide-intro p { font-size: 14px; margin-top: 20px; }
    .guide-intro .button { margin-top: 24px; }
    .guide-route li { gap: 16px; }
    .guide-route h3 { font-size: 19px; }
    .method-strip { grid-template-columns: 1fr; gap: 19px; padding-block: 45px; }
    .method-symbol { display: none; }
    .method-strip h2 { font-size: 30px; }
    .method-strip .text-link { grid-column: auto; }
    .footer-main { flex-direction: column; padding-block: 35px 28px; gap: 28px; }
    .footer-brand .brand { font-size: 40px; }
    .footer-main nav { gap: 12px 22px; }
    .footer-main nav a { font-size: 12px; }
    .footer-bottom { flex-direction: column; gap: 16px; }
    .breadcrumbs { padding-top: 21px; }
    .breadcrumbs ol { font-size: 11px; }
    .page-heading { padding-block: 34px; }
    .page-heading h1 { font-size: 42px; }
    .page-heading > p { font-size: 15px; margin-top: 19px; }
    .calculator-layout { grid-template-columns: 1fr; gap: 24px; }
    .calculator-card { padding: 25px 21px; }
    .calculator-card h2 { font-size: 25px; }
    .form-grid { gap: 23px; }
    .field select { font-size: 14px; }
    .form-actions { gap: 17px; }
    .form-actions .button { font-size: 13px; padding-inline: 17px; gap: 15px; }
    .result-card { padding: 27px; }
    .result-value { font-size: 53px; }
    .result-breakdown > div { gap: 12px; font-size: 12px; }
    .reading-section { grid-template-columns: 1fr; gap: 25px; margin-block: 45px; }
    .article-copy h2 { font-size: 28px; }
    .article-copy p { font-size: 15px; }
    .article-copy .article-lead { font-size: 18px; }
    .faq-section { margin-block: 45px 55px; }
    .faq-section h2 { font-size: 30px; }
    .faq-section summary { font-size: 14px; }
    .tool-card { gap: 18px; padding-block: 27px; flex-wrap: wrap; }
    .tool-card .icon-box { width: 45px; height: 45px; }
    .tool-card > div { order: 3; flex-basis: 100%; }
    .tool-card h2 { font-size: 28px; }
    .tool-card p { font-size: 14px; }
    .guide-list-card { flex-wrap: wrap; padding: 25px; gap: 20px; }
    .guide-list-card + .guide-list-card { margin-top: 14px; }
    .guide-list-card > div { flex-basis: 100%; order: 3; }
    .guide-list-card > .icon { margin-left: auto; }
    .guide-list-card h2 { font-size: 29px; }
    .data-table { font-size: 13px; }
    .data-table th, .data-table td { padding: 10px 14px; }
    .data-table caption { padding: 13px 14px 4px; }
    .glossary-grid { grid-template-columns: 1fr; gap: 30px; margin-block: 35px 55px; }
    .editorial-steps h2 { font-size: 25px; }
    .editorial-steps > li { padding-left: 34px; }
    .standalone { padding-bottom: 50px; }
    .not-found { padding-block: 50px 65px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .button:active, .header-cta:active, .demo-update:active, .directory-row:hover .round-arrow, .tool-card:hover .round-arrow, .text-link:hover .icon, .hero-link:hover .icon { transform: none; }
  }
}

/* Settlement tools: no fixed-width inputs or inaccessible overflow. */
.accumulator-legs { grid-column: 1 / -1; display: grid; gap: 1rem; min-width: 0; }
.accumulator-leg { min-width: 0; padding: 1rem; border: 1px solid #bccbc2; border-radius: .6rem; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.accumulator-leg[hidden] { display: none; }
.accumulator-leg legend { padding: 0 .4rem; font-weight: 650; }
.formula-box code { white-space: normal; overflow-wrap: anywhere; }
.result-breakdown dd { overflow-wrap: anywhere; }
@media (max-width: 540px) { .accumulator-leg { grid-template-columns: 1fr; } }

.guide-table-wrap { max-width: 100%; overflow-x: auto; margin-block: 1.5rem; border: 1px solid var(--line); border-radius: .6rem; }
.guide-table-wrap table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.guide-table-wrap th, .guide-table-wrap td { text-align: left; vertical-align: top; padding: .9rem; border-bottom: 1px solid var(--line); }
.guide-table-wrap th { background: var(--paper); }
@media (max-width: 700px) { .site-header nav { flex-wrap: wrap; justify-content: flex-start; column-gap: 18px; row-gap: 0; } }