:root {
  color-scheme: light;
  --ink: #173632;
  --deep: #123f3a;
  --deep-light: #1e5b54;
  --muted: #5b6d68;
  --paper: #f6f7f3;
  --line: #d7dfd8;
  --accent: #f5cb76;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { display: flex; flex-direction: column; min-height: 100svh; margin: 0; background: var(--paper); color: var(--ink); }
a { color: inherit; }
a:focus-visible { outline: 3px solid #d19328; outline-offset: 4px; }
.page-wrap { width: min(100% - 3.25rem, 1120px); margin-inline: auto; }
.skip-link { position: absolute; z-index: 5; top: -5rem; left: 1rem; padding: .65rem 1rem; background: #fff; color: var(--deep); }
.skip-link:focus { top: .5rem; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; font-size: 1.09rem; font-weight: 780; letter-spacing: -.045em; }
.brand-mark { width: 26px; height: 26px; color: var(--deep); flex: none; }
.nav-link { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; font-size: .88rem; font-weight: 630; }
.nav-link:hover { color: var(--deep-light); }
.nav-link span { font-size: .95rem; }
.tools { padding: 0 0 clamp(1.75rem, 3vw, 3rem); scroll-margin-top: 1rem; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; padding: clamp(1.55rem, 3vw, 2.6rem) 0 clamp(.95rem, 1.5vw, 1.25rem); }
.intro { max-width: 740px; }
h1, h2, p { margin-top: 0; }
h1 { margin: 0 0 .25rem; font-size: clamp(1.75rem, 2.9vw, 2.35rem); font-weight: 740; letter-spacing: -.055em; line-height: 1.19; }
.intro-text { margin: 0; max-width: 650px; color: var(--muted); font-size: clamp(.94rem, 1.1vw, 1.02rem); line-height: 1.5; }
.tool-entry { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); min-height: 318px; background: #fff; border: 1px solid var(--line); overflow: hidden; box-shadow: 0 9px 22px rgb(23 54 50 / 3%); }
.tool-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; padding: clamp(1.5rem, 3vw, 2.5rem); }
.tool-category { display: flex; align-items: center; gap: .55rem; margin-bottom: .8rem; color: var(--deep-light); font-size: .69rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.category-line { width: 16px; height: 3px; background: #dbaf52; }
.tool-copy h2 { margin-bottom: .65rem; font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 740; letter-spacing: -.06em; line-height: 1.12; }
.tool-description { max-width: 370px; margin-bottom: 1.45rem; color: var(--muted); font-size: .96rem; line-height: 1.6; }
.primary-link { display: inline-flex; align-items: center; justify-content: space-between; min-width: 200px; min-height: 50px; gap: 2.2rem; padding: .74rem 1rem; color: #fff; background: var(--deep); text-decoration: none; font-size: .92rem; font-weight: 720; transition: background-color .16s ease, transform .16s ease; }
.primary-link span { font-size: 1.05rem; font-weight: 500; }
.primary-link:active { background: var(--deep-light); }
.tool-note { margin: .72rem 0 0; color: var(--muted); font-size: .76rem; }
.tool-preview { display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem; min-width: 0; padding: clamp(1.6rem, 3vw, 2.4rem); background: var(--deep); color: #fff; }
.preview-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: #c0d4cb; font-size: .62rem; font-weight: 710; letter-spacing: .11em; }
.conversion-example { display: flex; justify-content: space-evenly; align-items: center; gap: .85rem; white-space: nowrap; }
.measure { display: flex; gap: .4rem; align-items: baseline; }
.measure strong { font-size: clamp(2.85rem, 5vw, 4.4rem); line-height: 1; font-weight: 690; letter-spacing: -.065em; font-variant-numeric: tabular-nums; }
.measure span { color: var(--accent); font-size: 1.03rem; font-weight: 720; }
.equal-sign { color: #8baea3; font-size: 1.8rem; font-weight: 400; }
.scale { margin-top: .7rem; }
.scale-line { width: 100%; height: 30px; border: 1px solid #86a79d; border-bottom: 2px solid #e8cb90; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(8.333% - 1px), #93b0a4 calc(8.333% - 1px), #93b0a4 8.333%); }
.scale-labels { display: flex; justify-content: space-between; margin-top: .35rem; color: #cbd8d2; font-size: .69rem; font-variant-numeric: tabular-nums; }
.preview-footer { margin: 0; color: #cbd8d2; font-size: .78rem; }
.site-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .55rem 2rem; margin-top: auto; padding-block: 1.4rem 1.9rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
@media (hover: hover) and (pointer: fine) {
  .primary-link:hover { background: var(--deep-light); transform: translateY(-1px); }
}
@media (max-width: 790px) {
  .page-wrap { width: min(100% - 2rem, 700px); }
  .site-header { min-height: 70px; }
  .section-heading { padding-block: 1.75rem 1.15rem; }
  .tool-entry { grid-template-columns: 1fr; }
  .tool-copy { padding: 1.75rem 1.8rem; }
  .tool-preview { min-height: 218px; padding: 1.6rem 1.8rem; gap: 1rem; }
  .conversion-example { justify-content: space-around; }
  .measure strong { font-size: clamp(2.7rem, 9.5vw, 3.9rem); }
  .tool-copy h2 { font-size: 2.25rem; }
}
@media (max-width: 440px) {
  .page-wrap { width: calc(100% - 1.5rem); }
  .site-header { min-height: 64px; }
  .brand { gap: .45rem; font-size: 1.03rem; }
  .brand-mark { width: 23px; height: 23px; }
  .nav-link { font-size: .81rem; }
  .section-heading { padding-block: 1.25rem .95rem; }
  h1 { font-size: 1.85rem; }
  .intro-text { font-size: .91rem; }
  .tool-copy { padding: 1.45rem 1.5rem; }
  .tool-copy h2 { font-size: 2.15rem; margin-bottom: .5rem; }
  .tool-description { margin-bottom: 1.1rem; font-size: .93rem; }
  .tool-preview { min-height: 195px; padding: 1.35rem 1.5rem; }
  .preview-top { font-size: .56rem; }
  .scale-line { height: 25px; }
  .conversion-example { gap: .5rem; }
  .site-footer { padding-block: 1.2rem 1.5rem; }
}
@media (max-width: 350px) {
  .nav-link { font-size: .77rem; }
  .section-heading { padding-block: 1.05rem .8rem; }
  h1 { font-size: 1.7rem; }
  .tool-copy { padding: 1.2rem 1.25rem; }
  .tool-preview { padding: 1.25rem; }
  .preview-top { font-size: .54rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Quiet roadmap cue; the functioning converter remains the visual priority. */
.future-tools { display:flex; align-items:center; padding:1.25rem 0 2.15rem; border-top:1px solid var(--line); }
.future-tools h2 { margin:0 0 .3rem; font-size:clamp(1.05rem,1.5vw,1.25rem); letter-spacing:-.025em; }
.future-tools p { margin:0; font-size:.88rem; color:var(--muted); }