@font-face {
  font-family: "Geologica Variable";
  src: url("/assets/fonts/Geologica-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --surface: #EFEEE9;
  --ink: #0C0F0E;
  --muted: #555A56;
  --muted-on-dark: #C8C8C0;
  --accent: #7B2638;
  --accent-deep: #5F1D2B;
  --signal: #9DAE78;
  --line: #A8AAA4;
  --line-dark: #4B4E4A;
  --focus: #7B2638;
  --page-pad: clamp(1rem, 3vw, 2rem);
  --shell: 1180px;
  --measure-dense: 55ch;
  --font-ui: "Geologica Variable", "Geologica", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--surface);
}

/* Header, content and footer are one column at least as tall as the
   viewport, so a short page keeps the footer at the bottom of the screen
   instead of stranding it mid-page with the page ground showing beneath.
   The two absolutely positioned children (the SVG sprite and the skip
   link) are out of flow and unaffected. dvh follows vh so browsers that
   lack it still get the fallback. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-variation-settings: "SHRP" 40;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-underline-offset: .2em;
}

img,
svg {
  max-width: 100%;
}

button,
input {
  font: inherit;
}

.shell {
  width: min(var(--shell), calc(100% - (var(--page-pad) * 2)));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: .75rem;
  top: -6rem;
  z-index: 50;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: .65rem .8rem;
  font-weight: 720;
}

.skip-link:focus {
  top: .75rem;
}

.site-header {
  background: var(--ink);
  color: var(--surface);
  border-bottom: 1px solid var(--ink);
}

.nav {
  min-height: 4.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--surface);
  text-decoration: none;
  letter-spacing: -.025em;
}

.brand-product {
  font-weight: 460;
  color: var(--muted-on-dark);
  font-size: .93rem;
}

.wordmark-symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.brand-wordmark,
.footer-wordmark,
.inline-wordmark {
  display: inline-block;
  color: currentColor;
  line-height: 0;
}

.brand-wordmark {
  width: 6.5rem;
}

.footer-wordmark {
  width: 3.2rem;
}

.inline-wordmark {
  width: 3.3em;
  vertical-align: -.08em;
  white-space: nowrap;
}

.brand-wordmark svg,
.footer-wordmark svg,
.inline-wordmark svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: currentColor;
}

.wordmark-accent {
  fill: var(--accent);
}

.brand-keep {
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .85rem 1.15rem;
  flex-wrap: wrap;
  margin-left: auto;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  color: #D8D8D0;
  font-size: .88rem;
  text-decoration: none;
}

.nav-link:hover,
.nav-link[aria-current="page"] {
  color: var(--surface);
}

/* ── Current page ──────────────────────────────────────────────────────
   A 2px accent rule under the label. It replaces a .38rem square that sat
   before the label: to stop labels jumping between pages the square had to
   be reserved on every link, so the nav occupied 683px where it now needs
   556. The rule marks the label itself and costs nothing when absent.
   The accent was also the focus-outline colour on these two navigations,
   which made "where I am" and "what my keyboard is on" look alike. Focus
   moves to the achromatic surface/ink below: state is coloured, focus is
   not.
   ------------------------------------------------------------------- */
.nav-link[aria-current="page"],
.product-subnav a[aria-current] {
  position: relative;
}

.nav-link[aria-current="page"]::after,
.product-subnav a[aria-current]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .15rem;
  height: 2px;
  background: var(--accent);
}

.site-header .nav-link:focus-visible {
  outline-color: var(--surface);
}

.product-subnav a:focus-visible {
  outline-color: var(--ink);
}

.nav-link.external::after,
.text-link.external::after {
  content: " ↗";
}

/* Takes the slack. Replaces a min-height: 60vh that only approximated
   this and still left short pages short. */
main {
  flex: 1 0 auto;
  padding-bottom: 5rem;
}

.hero {
  padding: clamp(3.25rem, 8vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--ink);
}

.hero--compact {
  padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1rem;
  font-weight: 740;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .13em;
}

.signal {
  width: .62rem;
  height: .62rem;
  background: var(--signal);
  flex: 0 0 auto;
}

.hero-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: .58rem;
  margin: 0 0 1.05rem;
  color: var(--ink);
}

.hero-brand-lockup .signal {
  margin-right: .05rem;
}

.hero-brand-lockup img {
  display: block;
  width: 5.6rem;
  height: auto;
}

.hero-brand-lockup>span:last-child {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 650;
  letter-spacing: .08em;
}

.hero h1 {
  margin: 0;
  max-width: 1000px;
  font-size: clamp(2.65rem, 7vw, 6.25rem);
  line-height: .92;
  letter-spacing: -.057em;
  font-weight: 720;
}

.hero--compact h1 {
  max-width: 880px;
  font-size: clamp(2.4rem, 6vw, 4.9rem);
}

.lede {
  max-width: 780px;
  margin: 1.45rem 0 0;
  color: var(--muted);
  font-size: clamp(1.02rem, 2vw, 1.22rem);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1.65rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1rem;
  border: 1px solid var(--accent);
  border-radius: 0;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 720;
  cursor: pointer;
}

.button:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

.button.secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.button.secondary:hover {
  background: var(--ink);
  color: var(--surface);
}

.button.dark-secondary {
  background: transparent;
  color: var(--surface);
  border-color: var(--surface);
}

.button.dark-secondary:hover {
  background: var(--surface);
  color: var(--ink);
}

button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.section {
  padding-top: clamp(2.8rem, 6vw, 5rem);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, .38fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--ink);
}

.section-label {
  margin: .2rem 0 0;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 740;
}

.section-heading h2 {
  margin: 0;
  max-width: 780px;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  letter-spacing: -.04em;
  line-height: 1;
}

.section-heading p {
  margin: .85rem 0 0;
  max-width: 700px;
  color: var(--muted);
}

.feature-tool {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(340px, .55fr);
  border-bottom: 1px solid var(--ink);
}

.feature-copy {
  padding: clamp(1.5rem, 3.5vw, 2.6rem) clamp(1rem, 3vw, 2.5rem) clamp(1.5rem, 3.5vw, 2.6rem) 0;
}

.tool-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .85rem;
  margin-bottom: .9rem;
  font-size: .74rem;
  font-weight: 730;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.tool-meta span+span::before {
  content: "|";
  margin-right: .85rem;
  color: var(--line);
}

.feature-copy h3 {
  margin: 0;
  max-width: 720px;
  font-size: clamp(1.55rem, 3.5vw, 2.65rem);
  letter-spacing: -.04em;
  line-height: 1.02;
}

.feature-copy p {
  max-width: 680px;
  color: var(--muted);
}

.feature-panel {
  background: var(--ink);
  color: var(--surface);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border-left: 1px solid var(--ink);
}

.feature-panel-kicker {
  margin: 0 0 .7rem;
  color: var(--muted-on-dark);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-weight: 720;
}

.feature-panel strong {
  display: block;
  font-size: clamp(2.5rem, 6vw, 4.7rem);
  line-height: .9;
  letter-spacing: -.055em;
}

.feature-panel p {
  color: var(--muted-on-dark);
  max-width: 34ch;
}

.feature-panel .button {
  margin-top: .4rem;
}

.library {
  border-bottom: 1px solid var(--ink);
}

.library-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(180px, .62fr) 7.5rem;
  gap: 1.25rem;
  align-items: center;
  min-height: 6.4rem;
  border-top: 1px solid var(--line);
  text-decoration: none;
}

.library-row:first-child {
  border-top: 0;
}

.library-row:hover .library-name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.library-name {
  font-weight: 710;
  letter-spacing: -.015em;
}

.library-description {
  color: var(--muted);
  font-size: .88rem;
}

.library-price {
  text-align: right;
  font-weight: 690;
  font-size: .86rem;
}

.library-price small {
  display: block;
  color: var(--muted);
  font-weight: 480;
}

.related-row {
  border-left: 3px solid var(--ink);
  padding-left: .9rem;
}

.principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--ink);
}

.principle {
  padding: 1.4rem 0 1.55rem;
  border-top: 1px solid var(--line);
}

.principle:nth-child(odd) {
  padding-right: clamp(1.2rem, 3vw, 2rem);
}

.principle:nth-child(even) {
  padding-left: clamp(1.2rem, 3vw, 2rem);
  border-left: 1px solid var(--ink);
}

.principle strong {
  display: block;
  margin-bottom: .35rem;
  font-size: .96rem;
}

.principle p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}

.about-strip {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  background: var(--ink);
  color: var(--surface);
  margin-top: clamp(3rem, 7vw, 6rem);
}

.about-label {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-right: 1px solid var(--line-dark);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 740;
}

.about-copy {
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.about-copy h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  letter-spacing: -.035em;
  line-height: 1.05;
}

.about-copy p {
  color: var(--muted-on-dark);
  max-width: 72ch;
}

.about-copy a {
  color: var(--surface);
}

/* Calculator */
.tool-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(320px, .68fr);
  align-items: stretch;
  margin-top: 2rem;
  border: 1px solid var(--ink);
}

.instrument-body {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.calculator {
  padding: clamp(1.35rem, 3vw, 2.1rem);
}

.section-title {
  font-size: 1.08rem;
  margin: 0 0 .35rem;
}

.section-copy {
  margin: 0 0 1.45rem;
  color: var(--muted);
  font-size: .94rem;
  max-width: 64ch;
}

.fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.25rem;
  row-gap: 1rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: .42rem;
  min-width: 0;
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  font-weight: 650;
  font-size: .9rem;
  letter-spacing: .005em;
}

.field small {
  color: var(--muted);
  font-size: .78rem;
}

input {
  width: 100%;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  padding: .76rem .82rem;
  color: inherit;
  min-height: 3rem;
}

input:hover {
  border-color: var(--ink);
}

.subhead {
  grid-column: 1 / -1;
  margin: 1.1rem 0 0;
  padding-top: 1.3rem;
  border-top: 1px solid var(--ink);
  font-weight: 720;
}

.client-total {
  grid-column: 1 / -1;
  padding: .85rem 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: .75rem;
}

.actions {
  display: flex;
  gap: .75rem;
  align-items: center;
  margin-top: 1.55rem;
  flex-wrap: wrap;
}

.privacy-note {
  color: var(--muted);
  font-size: .82rem;
  margin: .9rem 0 0;
}

.result {
  padding: clamp(1.35rem, 3vw, 2.1rem);
  position: sticky;
  top: 0;
  align-self: start;
  min-height: 100%;
  background: var(--ink);
  color: var(--surface);
  border-left: 1px solid var(--ink);
}

.result:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -4px;
}

.result-kicker {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted-on-dark);
  font-weight: 700;
}

.result-number {
  font-size: clamp(3.4rem, 6vw, 5.6rem);
  line-height: .88;
  letter-spacing: -.055em;
  margin: .85rem 0 .6rem;
}

.result-number span {
  display: inline-block;
  font-size: .28em;
  letter-spacing: -.01em;
  color: var(--muted-on-dark);
}

.result-summary {
  color: #D6D5CE;
  margin: 0 0 1.35rem;
}

.result .privacy-note {
  color: var(--muted-on-dark);
}

.metrics {
  display: grid;
  gap: 0;
  border-top: 1px solid #555853;
}

.metric {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .82rem 0;
  border-bottom: 1px solid #555853;
  font-size: .88rem;
}

.metric span {
  color: var(--muted-on-dark);
}

.metric strong {
  text-align: right;
  color: var(--surface);
}

.capacity-track {
  height: .55rem;
  background: #3B3E3B;
  overflow: hidden;
  margin: 1.35rem 0 .55rem;
  border: 1px solid #555853;
}

.capacity-fill {
  height: 100%;
  width: 0;
  background: var(--surface);
  transition: width .2s ease;
}

.capacity-note {
  font-size: .8rem;
  color: var(--muted-on-dark);
}

.over {
  color: var(--surface);
  font-weight: 760;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}

.cta-box {
  margin-top: 1.6rem;
  padding: 1.35rem 0 0;
  border-top: 1px solid #555853;
}

.cta-box h3 {
  margin: 0 0 .5rem;
  font-size: 1rem;
  color: var(--surface);
}

.cta-box p {
  margin: 0 0 .95rem;
  color: var(--muted-on-dark);
  font-size: .88rem;
}

.content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.6rem;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.content .instrument-body {
  padding: clamp(1.25rem, 3vw, 1.8rem) 0;
}

.content .instrument-body:nth-child(odd):not(.full-span) {
  padding-right: clamp(1.25rem, 3vw, 1.8rem);
}

.content .instrument-body:nth-child(even):not(.full-span) {
  padding-left: clamp(1.25rem, 3vw, 1.8rem);
  border-left: 1px solid var(--ink);
}

.content .full-span {
  grid-column: 1 / -1;
  border-top: 1px solid var(--ink);
}

.content h2 {
  font-size: 1.25rem;
  margin: 0 0 .85rem;
  letter-spacing: -.02em;
}

.content p,
.content li {
  color: var(--muted);
}

.content ul {
  padding-left: 1.2rem;
}

.faq details {
  border-top: 1px solid var(--line);
  padding: .92rem 0;
}

.faq summary {
  cursor: pointer;
  font-weight: 700;
}

/* ── Border boundaries ─────────────────────────────────────────────────
   Two conventions were colliding. A section heading closes itself with an
   ink rule, and the list components beneath open themselves with their own
   rule. Stacked, they paint 2px of line, sometimes in two different
   colours, which reads as a mistake rather than a deliberate heavy rule.
   .product-proof-list already suppressed this for its own first row; the
   same idea now applies at the component boundary. One rule per boundary.
   ------------------------------------------------------------------- */
.section-heading + .principles > .principle,
.section-heading + .product-proof-list,
.section-heading + details {
  border-top: 0;
}

/* Stacked into one column the second principle is no longer in the first
   row, so it keeps the separator the rule above just removed. */
@media (max-width: 640px) {
  .section-heading + .principles > .principle + .principle {
    border-top: 1px solid var(--line);
  }
}

/* Information pages */
.info-grid {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 4.5rem); row-gap: 0;
  padding-top: clamp(2rem, 5vw, 4rem);
}

/* Pages whose information needs no index: one column, full measure. */
/* Contact and About need no index. The rail track stays empty rather than
   disappearing, so their content begins on the same line as every other page
   (192px rail + 72px gutter, matching .section-heading). */
.info-grid--single { grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 4.5rem); }
.info-grid--single .info-body { grid-column: 2; max-width: 46rem; }

.info-index {
  align-self: start;
  position: sticky;
  top: 1rem;
}

.info-index p {
  margin: 0 0 .45rem;
  color: var(--muted);
  font-size: .82rem;
}

.info-body h2 {
  margin: 2rem 0 .65rem;
  font-size: 1.3rem;
  letter-spacing: -.02em;
}

.info-body h2:first-child {
  margin-top: 0;
}

.info-body p,
.info-body li {
  color: var(--muted);
  max-width: var(--measure);
}

.info-body a {
  color: var(--ink);
}

.business-list {
  margin: 0;
}

.business-list div {
  display: grid;
  grid-template-columns: minmax(11rem, .42fr) 1fr;
  gap: 1rem;
  border-top: 1px solid var(--line);
  padding: .9rem 0;
}

.business-list div:last-child {
  border-bottom: 1px solid var(--line);
}

.business-list dt {
  font-weight: 700;
}

.business-list dd {
  margin: 0;
  color: var(--muted);
}

.notice {
  border-left: 3px solid var(--ink);
  padding: .1rem 0 .1rem 1rem;
  color: var(--muted);
}

.contact-block {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 1.2rem 0;
}

.contact-block strong {
  display: block;
  margin-bottom: .25rem;
}

/* ── Footer ────────────────────────────────────────────────────────────
   Single source. The footer used to be styled in four places: a light
   base here, a dark override ~500 lines down, and two media blocks. The
   split is how it ended up as four items pinned to four corners with
   770px of dead space between them. Layout, colour and breakpoints now
   sit together. Rules that belong to other systems keep their own homes:
   the print hide, the focus-visible outline, the WCAG target-size floor,
   and the type-scale group.
   ------------------------------------------------------------------- */
.footer {
  background: var(--ink);
  color: var(--muted-on-dark);
  border-top: 1px solid var(--ink);
  padding: 3rem 0 2.5rem;
  font-size: .82rem;
}

/* Identity, then three link columns. The identity column is widest so the
   wordmark is not left floating against a hard column edge. */
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
  gap: 2.75rem 2.5rem;
  align-items: start;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  color: var(--surface);
  text-decoration: none;
}

.footer-wordmark {
  width: 3.15rem;
  color: var(--surface);
}

.footer-brand>span:last-child {
  color: var(--muted-on-dark);
  letter-spacing: .04em;
}

/* Column headings reuse the site's one uppercase label role, on dark. */
.footer-col-title {
  margin: 0 0 .85rem;
  color: var(--muted-on-dark);
}

/* One vertical list per column. Was a single right-aligned row. */
.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .05rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a,
.footer-meta a {
  color: var(--surface);
  text-decoration: none;
}

.footer-links a:hover,
.footer-links a:focus-visible,
.footer-meta a:hover,
.footer-meta a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* Identifiers run left to right in one line and wrap. Previously two
   items with space-between, which left a 977px hole in the middle. */
.footer-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem 1.4rem;
  border-top: 1px solid var(--line-dark);
  padding-top: 1.15rem;
  margin-top: .35rem;
}

/* Below the four-up breakpoint the identity takes its own row and the three
   link columns stay side by side. A two-column step was tried and dropped:
   with 3, 5 and 4 items the shorter column leaves a hole beside the taller
   one, so it goes straight from three columns to a single stack. */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.25rem 1.75rem;
  }

  .footer-identity {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.9rem;
  }
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 900px) {

  .section-heading,
  .feature-tool,
  .about-strip,
  .info-grid {
    grid-template-columns: 1fr;
  }

  .info-grid--single .info-body {
    grid-column: 1;
  }

  .feature-copy {
    padding-right: 0;
  }

  .feature-panel,
  .about-label {
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--ink);
  }

  .about-label {
    border-top: 0;
    border-bottom: 1px solid var(--line-dark);
  }

  .info-index {
    position: static;
  }

  .library-row {
    grid-template-columns: minmax(0, 1fr) 6.6rem;
  }

  .library-description {
    grid-column: 1 / -1;
    padding-bottom: 1rem;
    margin-top: -.75rem;
  }

  .tool-grid,
  .content {
    grid-template-columns: 1fr;
  }

  .result {
    position: static;
    min-height: 0;
    border-left: 0;
    border-top: 1px solid var(--ink);
  }

  .fields {
    grid-template-columns: 1fr;
  }

  .field.full,
  .subhead,
  .client-total,
  .content .full-span {
    grid-column: auto;
  }

  .content .instrument-body:nth-child(odd):not(.full-span),
  .content .instrument-body:nth-child(even):not(.full-span) {
    padding-inline: 0;
    border-left: 0;
  }

  .content .instrument-body+.instrument-body {
    border-top: 1px solid var(--ink);
  }
}

@media (max-width: 640px) {
  .nav {
    align-items: flex-start;
    padding-block: .85rem .7rem;
    flex-direction: column;
    gap: .75rem;
  }

  .nav-links {
    width: 100%;
    gap: .7rem 1rem;
    padding-top: .7rem;
    border-top: 1px solid var(--line-dark);
    justify-content: flex-start;
    margin-left: 0;
  }

  .nav-link {
    font-size: .82rem;
  }

  .hero h1 {
    font-size: clamp(2.55rem, 15vw, 4rem);
  }

  .hero-actions .button {
    width: 100%;
  }

  .principles {
    grid-template-columns: 1fr;
  }

  .principle:nth-child(odd),
  .principle:nth-child(even) {
    padding-inline: 0;
    border-left: 0;
  }

  .principle+.principle {
    border-top: 1px solid var(--line);
  }

  .library-row {
    grid-template-columns: 1fr;
    gap: .75rem;
    padding: .9rem 0;
  }

  .library-description,
  .library-price {
    grid-column: 1;
    text-align: left;
    margin: 0;
    padding: 0;
  }

  .business-list div {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.tool-grid>*,
.content>*,
.section-heading>*,
.feature-tool>*,
.library-row>*,
.footer-grid>* {
  min-width: 0;
}

.metric span,
.metric strong,
.client-total span,
.client-total strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* RC3 authoritative brand asset + bilingual navigation */
.brand {
  align-items: center;
}

.language-switch {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  margin-left: auto;
  color: var(--muted-on-dark);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.language-switch a {
  color: #D8D8D0;
  text-decoration: none;
}

.language-switch a:hover,
.language-switch a:focus-visible {
  color: var(--surface);
}

.lang-current {
  color: var(--surface);
}

@media (max-width: 640px) {
  .brand-wordmark {
    width: 6rem;
  }

  .language-switch {
    margin-left: auto;
  }
}


/* RC4 contact form */
/* Closes with a rule, does not open with one. It used to sit under a
   "Stuur een bericht" heading; with that heading dropped, its opening rule
   floated on its own under the hero rule with nothing between the two. */
.contact-form {
  border-bottom: 1px solid var(--ink);
  margin: 1.25rem 0 1rem;
  padding: 0 0 1.25rem;
  display: grid;
  gap: 1rem;
}

.contact-form .field {
  display: grid;
  gap: .4rem;
}

.contact-form label {
  font-weight: 670;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  padding: .78rem .82rem;
}

.contact-form textarea {
  resize: vertical;
  min-height: 10rem;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.field-note,
.contact-fallback {
  margin: 0;
  color: var(--muted);
  font-size: .84rem;
}

.contact-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.turnstile-slot {
  min-height: 65px;
}

.contact-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.contact-status {
  margin: 0;
  min-height: 1.5em;
  color: var(--muted);
}

.contact-status[data-state="success"] {
  color: #315127;
}

.contact-status[data-state="error"] {
  color: var(--accent-deep);
}

.button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

@media (max-width: 640px) {
  .contact-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .contact-actions .button {
    width: 100%;
  }
}

/* RC7 visual coherence pass: one mineral canvas, deliberate dark anchors, calmer brand cadence */
main,
.hero,
.section,
.content,
.instrument-body:not(.result) {
  background: var(--surface);
}

.site-header {
  background: var(--ink);
}

.nav {
  min-height: 4.15rem;
}

.brand-wordmark {
  width: 6.15rem;
}

.hero {
  padding: clamp(3.6rem, 7vw, 5.8rem) 0 clamp(3rem, 5vw, 4.2rem);
}

.hero h1 {
  max-width: 14ch;
  font-size: clamp(3.2rem, 6.5vw, 5.8rem);
  line-height: .94;
  letter-spacing: -.052em;
  font-weight: 690;
}

.hero .lede {
  max-width: 690px;
  margin-top: 1.35rem;
}

.hero-actions {
  margin-top: 1.8rem;
}


.section {
  padding-top: clamp(3.4rem, 6vw, 5.6rem);
}

.section-heading {
  grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-bottom: 1.5rem;
}

.section-heading h2 {
  max-width: 690px;
  font-size: clamp(2rem, 3.8vw, 3.05rem);
  line-height: 1.02;
  font-weight: 680;
}

.section-heading p {
  max-width: 650px;
}

.feature-tool {
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .62fr);
}

.feature-copy {
  padding-top: clamp(1.8rem, 3.5vw, 2.8rem);
  padding-bottom: clamp(1.8rem, 3.5vw, 2.8rem);
}

.feature-copy h3 {
  max-width: 640px;
  font-weight: 680;
}

.feature-panel {
  padding: clamp(1.8rem, 3.2vw, 2.7rem);
}

.library-row {
  min-height: 5.8rem;
  grid-template-columns: minmax(0, 1.05fr) minmax(190px, .62fr) 6.8rem;
  gap: 1.35rem;
}

.library-name {
  font-weight: 680;
}

.library-description {
  line-height: 1.45;
}

.related-row {
  border-left-color: var(--ink);
  padding-left: 1rem;
}

.principle {
  padding-top: 1.65rem;
  padding-bottom: 1.7rem;
}

.about-strip {
  grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
  margin-top: clamp(3.8rem, 7vw, 6.5rem);
}

.about-copy {
  max-width: none;
}

.about-copy h2 {
  max-width: 760px;
  font-weight: 670;
}

@media (max-width: 900px) {

  .section-heading,
  .feature-tool,
  .about-strip {
    grid-template-columns: 1fr;
  }

  .section-heading {
    gap: .9rem;
  }

  .section-label {
    margin-top: 0;
  }

  .library-row {
    grid-template-columns: minmax(0, 1fr) 6.5rem;
  }
}

@media (max-width: 640px) {
  .nav {
    min-height: 0;
  }

  .brand-wordmark {
    width: 5.7rem;
  }

  .hero {
    padding-top: 2.8rem;
    padding-bottom: 2.8rem;
  }

  .hero h1 {
    max-width: 11ch;
    font-size: clamp(2.85rem, 13.5vw, 4rem);
    line-height: .95;
  }

  .hero .lede {
    margin-top: 1.1rem;
  }


  .section {
    padding-top: 3.2rem;
  }

  .library-row {
    grid-template-columns: minmax(0, 1fr);
    gap: .55rem .85rem;
    padding: 1.15rem 0 1.2rem;
  }

  .library-name {
    font-size: 1rem;
    line-height: 1.25;
  }

  .library-description {
    margin-top: .15rem;
    line-height: 1.5;
  }

  .library-price {
    margin-top: .3rem;
  }

  .related-row {
    padding-left: .75rem;
  }

  .footer {
    padding-top: 2rem;
  }

  .footer-wordmark {
    width: 3rem;
  }
}


/* Zoqa ZZP Facturatie: compact product surface within the existing Tools system */
.product-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  min-height: 2.6rem;
  padding-top: .7rem;
  color: var(--muted);
  font-size: .78rem;
}

.product-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.product-breadcrumb a:hover {
  color: var(--ink);
}

.product-breadcrumb span {
  color: var(--ink);
}

.product-subnav {
  display: flex;
  align-items: center;
  gap: .65rem 1.15rem;
  flex-wrap: wrap;
  min-height: 3.2rem;
  border-bottom: 1px solid var(--ink);
}

.product-subnav a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--muted);
  text-decoration: none;
  font-size: .82rem;
}

.product-subnav a:hover,
.product-subnav a[aria-current] {
  color: var(--ink);
}

.product-offer {
  display: grid;
  grid-template-columns: minmax(220px, .45fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: end;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 1.25rem 0;
}

.product-offer .section-label {
  margin: 0 0 .55rem;
}

.product-offer strong {
  display: block;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: .95;
  letter-spacing: -.04em;
}

.product-offer-notes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .55rem 1.2rem;
  color: var(--muted);
  font-size: .88rem;
}

.publication-note {
  margin: 1.5rem 0 0;
  max-width: 760px;
}

.step-list {
  list-style: none;
  counter-reset: steps;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--ink);
}

.step-list li {
  counter-increment: steps;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.25rem 0;
}
.step-list li:not(:first-child) {
  border-top: 1px solid var(--line);
}

.step-list li::before {
  content: counter(steps, decimal-leading-zero);
  font-size: .76rem;
  font-weight: 740;
  letter-spacing: .1em;
  color: var(--muted);
}

.step-list strong {
  display: block;
  margin-bottom: .3rem;
}

/* The rule above is for the step title. An inline <strong> inside a step's
   paragraph (a menu path, for instance) must stay in the sentence, or the
   line breaks around it and the remaining text starts with a full stop. */
.step-list p strong {
  display: inline;
  margin: 0;
}

.step-list p {
  margin: 0;
  color: var(--muted);
}

.scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--ink);
}

.scope-grid>div {
  padding: 1.4rem 0 1.6rem;
  border-top: 1px solid var(--line);
}

.scope-grid>div:first-child {
  padding-right: clamp(1.2rem, 3vw, 2rem);
}

.scope-grid>div:last-child {
  padding-left: clamp(1.2rem, 3vw, 2rem);
  border-left: 1px solid var(--ink);
}

.scope-grid h3 {
  margin: 0 0 .6rem;
  font-size: 1rem;
}

.scope-grid ul {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--muted);
}

.product-links {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.4rem;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-block: 1.15rem;
}

.product-links a {
  font-weight: 650;
}

.product-info-page {
  padding-bottom: 1rem;
}

.product-info-full {
  max-width: 980px;
  padding-top: clamp(2rem, 5vw, 4rem);
}

.product-info-full .info-body {
  max-width: 46rem;
}

.product-info-page .notice strong {
  color: var(--ink);
}

@media (max-width: 640px) {
  .product-subnav {
    padding-block: .7rem;
  }

  .product-offer,
  .scope-grid {
    grid-template-columns: 1fr;
  }

  .product-offer-notes {
    justify-content: flex-start;
  }

  .scope-grid>div:first-child,
  .scope-grid>div:last-child {
    padding-inline: 0;
    border-left: 0;
  }

  .scope-grid>div+div {
    border-top: 1px solid var(--line);
  }

  .step-list li {
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: .75rem;
  }
}

@media (max-width: 640px) {
  .hero--compact h1 {
    max-width: 100%;
    font-size: clamp(2.35rem, 11vw, 3.2rem);
  }
}


/* P08 commercial closure pass: 2026-08-24 */
.product-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, .34fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
}

.product-price-note {
  border-top: 1px solid var(--ink);
  padding-top: 1rem;
}

.product-price-note>span {
  display: block;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 720;
  letter-spacing: -.035em;
}

.product-price-note p {
  margin: .7rem 0 0;
  color: var(--muted);
  font-size: .9rem;
}

/* When a launch link is unresolved the build swaps it for this span. In a
   .hero-actions row it becomes a flex item, where the standalone note's top
   margin dropped it 24px below the button beside it. */
.hero-actions .publication-note {
  margin: 0;
  align-self: center;
}

.checkout-action[aria-disabled="true"],
.publication-link[aria-disabled="true"] {
  opacity: .48;
  cursor: not-allowed;
  pointer-events: none;
}

.product-showcase {
  overflow: hidden;
}

.product-screenshot {
  margin: 1.75rem 0 0;
  border-bottom: 1px solid var(--ink);
  padding: clamp(1rem, 2vw, 1.5rem) 0;
}

.product-screenshot img {
  display: block;
  width: min(100%, 980px);
  height: auto;
  margin-inline: auto;
  border: 1px solid var(--line);
  background: #fff;
}

.product-screenshot--wide img {
  width: 100%;
}

.product-screenshot figcaption {
  margin-top: .7rem;
  color: var(--muted);
  font-size: .8rem;
}

.product-proof-list {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.product-proof-list>div {
  display: grid;
  grid-template-columns: minmax(180px, .3fr) minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}

.product-proof-list>div:first-child {
  border-top: 0;
}

.product-proof-list strong {
  font-size: .96rem;
}

.product-proof-list p {
  margin: 0;
  color: var(--muted);
  max-width: 760px;
}

.product-trust {
  border-top: 1px solid var(--ink);
}

.product-closing {
  padding-bottom: 0;
}

.product-legal-line {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: .82rem;
}

.quick-start-page {
  max-width: 980px;
}

.quick-start-list {
  margin-top: 0;
}

.quick-start-list li {
  grid-template-columns: 3.25rem minmax(0, 1fr);
  padding-block: 1.4rem;
}

.quick-start-action {
  margin-top: .8rem !important;
}

.quick-start-after {
  margin-top: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--ink);
  padding-top: 1.4rem;
}

.quick-start-after h2 {
  margin: 0 0 .7rem;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  letter-spacing: -.025em;
}

.privacy-list div {
  align-items: start;
}

.terms-body h2 {
  margin-top: 2.1rem;
}

.terms-body h2:first-child {
  margin-top: 0;
}

@media (max-width: 760px) {

  .product-hero-grid,
  .product-proof-list>div {
    grid-template-columns: 1fr;
  }

  .product-price-note {
    margin-top: .4rem;
  }
}

@media print {
  @page {
    size: A4;
    margin: 16mm;
  }

  html,
  body {
    background: #fff !important;
    color: #000 !important;
  }

  .site-header,
  .product-subnav,
  .footer,
  .skip-link,
  .quick-start-action {
    display: none !important;
  }

  main {
    min-height: 0;
    padding: 0 !important;
  }

  .quick-start-hero {
    padding: 0 0 10mm !important;
    border-bottom: 1px solid #000;
  }

  .quick-start-hero .shell,
  .quick-start-page {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .quick-start-hero h1 {
    font-size: 26pt;
    line-height: 1;
  }

  .quick-start-hero .lede {
    font-size: 10.5pt;
    max-width: none;
  }

  .quick-start-page {
    padding: 8mm 0 0 !important;
  }

  .quick-start-list {
    border-bottom-color: #000;
  }

  .quick-start-list li {
    break-inside: avoid;
    grid-template-columns: 14mm 1fr;
    padding: 5mm 0;
    border-top-color: #bbb;
  }

  .quick-start-list li::before {
    color: #555;
  }

  .quick-start-list p,
  .quick-start-after p {
    color: #222 !important;
  }

  .quick-start-after {
    break-inside: avoid;
    margin-top: 8mm;
    border-top-color: #000;
    padding-top: 5mm;
  }

  a {
    color: #000 !important;
    text-decoration: none;
  }

  .quick-start-after a[href^="mailto:"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
  }
}

/* Catalogue rows use explicit journey labels; no positional indent needed. */
.related-row {
  border-left: 0;
  padding-left: 0;
}

/* 2026-08-25 system pass: finite type/spacing roles, continuous display scale, accessible dark-surface states. */
:root {
  --type-xs: .75rem;
  --type-sm: .875rem;
  --type-base: 1rem;
  --type-lede: clamp(1.0625rem, .85vw + .85rem, 1.25rem);
  --type-title: clamp(1.25rem, .9vw + 1rem, 1.5rem);
  --type-h3: clamp(1.5rem, 2.5vw, 2.5rem);
  --type-h2: clamp(2rem, 3.5vw, 3rem);
  --type-display: clamp(3.2rem, calc(2.25rem + 5vw), 5.8rem);
  --type-display-secondary: clamp(2.5rem, 5vw, 4.5rem);

  --weight-regular: 450;
  --weight-medium: 600;
  --weight-semibold: 680;
  --weight-bold: 720;

  --leading-body: 1.55;
  --leading-lede: 1.4;
  --leading-title: 1.15;
  --leading-display: .95;
  --measure: 64ch;

  --accent-on-dark: #C96A7E;
}

body {
  font-size: var(--type-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
}

strong,
b {
  font-weight: var(--weight-semibold);
}

/* One canonical micro-label treatment. Existing role names remain as layout hooks only. */
.label,
.eyebrow,
.result-kicker,
.section-label,
.about-label,
.feature-panel-kicker,
.footer-col-title {
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero h1 {
  font-size: var(--type-display);
  line-height: var(--leading-display);
  font-weight: var(--weight-semibold);
}

.hero--compact h1 {
  font-size: var(--type-h2);
  line-height: 1.02;
}

.lede {
  font-size: var(--type-lede);
  line-height: var(--leading-lede);
  max-width: var(--measure);
}

.section-heading h2 {
  font-size: var(--type-h2);
  line-height: 1.05;
  font-weight: var(--weight-semibold);
}

.feature-copy h3 {
  font-size: var(--type-h3);
  line-height: 1.08;
  font-weight: var(--weight-semibold);
}

.about-copy h2 {
  font-size: var(--type-h3);
  line-height: 1.08;
  font-weight: var(--weight-semibold);
}

.info-body h2,
.quick-start-after h2 {
  font-size: var(--type-title);
  line-height: var(--leading-title);
  font-weight: var(--weight-semibold);
}

.feature-panel strong {
  font-size: var(--type-display-secondary);
  line-height: .95;
  font-weight: var(--weight-semibold);
}

.product-offer strong {
  font-size: var(--type-h2);
  line-height: 1;
  font-weight: var(--weight-semibold);
}

/* The closing offer block above spans the full shell and can carry h2 size.
   The hero price sits in a ~280px aside and cannot: at h2 it wrapped to
   "€49 excl." / "btw". It keeps its own scale, one step down. */
.product-price-note>span {
  line-height: 1;
  font-weight: var(--weight-semibold);
}

.nav-link,
.library-description,
.library-price,
.principle p,
.footer,
.info-index p,
.field-note,
.contact-fallback,
.product-subnav a,
.product-offer-notes,
.product-screenshot figcaption,
.product-legal-line {
  font-size: var(--type-sm);
}

.brand-product,
.hero-brand-lockup>span:last-child,
.principle strong,
.scope-grid h3,
.product-proof-list strong,
.library-name {
  font-size: var(--type-base);
}

.button,
.skip-link,
.nav-link,
.language-switch,
.library-name,
.library-price,
.contact-form label,
.product-links a {
  font-weight: var(--weight-semibold);
}

.tool-meta,
.step-list li::before {
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
}

.section-heading p,
.feature-copy p,
.about-copy p,
.info-body p,
.info-body li,
.product-proof-list p,
.product-price-note p,
.product-editions,
.step-list p,
.quick-start-after p,
.product-legal-line {
  max-width: var(--measure);
}

.product-editions {
  line-height: var(--leading-body);
}

/* Legal and privacy prose fits ~20% more characters per line than marketing copy
   at the same width, so information pages take a narrower measure. */
.info-body p,
.info-body li {
  max-width: var(--measure-dense);
}

/* Dark surfaces need their own interaction token. */
.site-header .nav-link[aria-current="page"]::after {
  background: var(--accent-on-dark);
}

.site-header a:focus-visible,
.footer a:focus-visible,
.feature-panel a:focus-visible,
.result a:focus-visible,
.result button:focus-visible {
  outline-color: var(--accent-on-dark);
}

/* WCAG 2.2 target-size floor for compact navigation/link controls. */
.nav-link,
.language-switch a,
.product-subnav a,
.product-breadcrumb a,
.footer-links a,
.footer-meta a,
.footer-brand,
.brand {
  min-height: 1.5rem;
  padding-block: .25rem;
}

/* Short labels ("EN"/"NL") need the horizontal floor too, not just the vertical one. */
.language-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding-inline: .2rem;
}

/* Keep the display scale continuous across phone/tablet rotation. */
@media (max-width: 640px) {
  .hero h1 {
    font-size: var(--type-display);
  }

  .hero--compact h1 {
    font-size: var(--type-h2);
  }
}

/* Calculator text roles mapped onto the same scale. */
.section-title,
.content h2 {
  font-size: var(--type-title);
  line-height: var(--leading-title);
  font-weight: var(--weight-semibold);
}

.section-copy {
  font-size: var(--type-base);
  max-width: var(--measure);
}

.field label {
  font-size: var(--type-sm);
  font-weight: var(--weight-semibold);
}

.field small {
  font-size: var(--type-xs);
}

.privacy-note,
.metric,
.capacity-note,
.cta-box p {
  font-size: var(--type-sm);
}

.result-number {
  font-size: var(--type-display);
  line-height: .9;
}

.cta-box h3 {
  font-size: var(--type-base);
  font-weight: var(--weight-semibold);
}

.subhead,
.over,
.faq summary {
  font-weight: var(--weight-bold);
}

.result:focus-visible {
  outline-color: var(--accent-on-dark);
}

.feature-panel-value {
  margin: 0;
  font-size: var(--type-display-secondary);
  line-height: .95;
  letter-spacing: -.055em;
  font-weight: var(--weight-semibold);
}

/* Close remaining inherited/UA typography gaps so components cannot invent micro-values. */
small {
  font-size: var(--type-xs);
}

textarea,
select {
  font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--weight-semibold);
}

.language-switch {
  font-size: var(--type-xs);
}

.footer-brand>span:last-child {
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
}

.brand-product,
.library-price small {
  font-weight: var(--weight-medium);
}

.product-price-note p {
  font-size: var(--type-sm);
}