/* =========================================================================
   SteelNomic design system, v2.0
   Identity: engineering-drawing language. Navy / white / copper.
   Tokens → base → layout → components → pages. No inline styles in markup.
   ========================================================================= */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }

:root {
  /* colour */
  --navy-950: #061a2c; --navy-900: #0b2c4a; --navy-800: #12395d; --navy-700: #1d4b73; --navy-600: #2c628f;
  --steel-500: #5f7f99; --steel-400: #86a2b8; --steel-300: #b3c6d4; --steel-200: #d6e1e9; --steel-100: #eaf0f4; --steel-50: #f5f8fa;
  --copper-700: #7f4a1c; --copper-600: #9a5a24; --copper-500: #c07a3e; --copper-300: #e5b88c; --copper-100: #f7eadc;
  --ink: #10273b; --ink-2: #3e5568; --ink-3: #5a6f80; --line: #dbe4eb; --line-strong: #c3d1dc;
  --bg: #ffffff; --bg-alt: var(--steel-50); --surface: #ffffff;
  --ok: #1f7a5a; --ok-bg: #e6f4ee; --warn: #8a5a12; --warn-bg: #fdf3e2; --err: #a4322b; --err-bg: #fbeceb;
  /* type */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem;
  --fs-2xl: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); --fs-3xl: clamp(2rem, 1.3rem + 2.6vw, 3.1rem);
  /* space & shape */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 104px;
  --radius-sm: 6px; --radius: 10px; --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(11, 44, 74, .06), 0 6px 20px rgba(11, 44, 74, .06);
  --container: 1200px; --header-h: 68px;
  --focus: 0 0 0 3px rgba(192, 122, 62, .45);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; font: 400 var(--fs-md)/1.6 var(--font); color: var(--ink); background: var(--bg); font-feature-settings: 'cv11', 'ss01'; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--navy-700); text-underline-offset: 3px; }
a:hover { color: var(--copper-600); }
h1, h2, h3, h4 { color: var(--navy-900); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 var(--s4); font-weight: 750; }
h1 { font-size: var(--fs-3xl); letter-spacing: -.035em; }
h2 { font-size: var(--fs-2xl); letter-spacing: -.03em; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--s4); }
code, kbd, .mono { font-family: var(--mono); font-size: .92em; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }
.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 { position: absolute; left: 12px; top: -60px; background: var(--copper-500); color: #fff; padding: 10px 14px; border-radius: var(--radius-sm); z-index: 100; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }

/* ---------- layout ---------- */
.container { width: min(100% - 40px, var(--container)); margin-inline: auto; }
.section { padding: var(--s8) 0; }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.section--dark { background: var(--navy-900); color: #d8e4ee; }
.section--dark h2, .section--dark h3 { color: #fff; }
.grid { display: grid; gap: var(--s5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack > * + * { margin-top: var(--s4); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .section { padding: var(--s7) 0; } }

.eyebrow { font: 600 var(--fs-xs)/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--copper-600); margin-bottom: var(--s3); display: inline-flex; align-items: center; gap: 10px; }
.lead { font-size: var(--fs-lg); color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--ink-3); }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: var(--s5); margin-bottom: var(--s6); flex-wrap: wrap; }
.sec-head p { margin: 0; color: var(--ink-2); max-width: 60ch; }

/* ---------- buttons ---------- */
.btn { --b: var(--copper-600); display: inline-flex; align-items: center; gap: 8px; font: 600 var(--fs-sm)/1 var(--font); padding: 13px 18px; border-radius: var(--radius-sm); border: 1px solid var(--b); background: var(--b); color: #fff; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.btn:hover { --b: var(--copper-700); color: #fff; }
.btn--navy { --b: var(--navy-900); }
.btn--navy:hover { --b: var(--navy-700); }
.btn--ghost { background: transparent; color: var(--navy-900); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--steel-100); color: var(--navy-900); border-color: var(--steel-400); }
.btn--light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.btn--light:hover { background: rgba(255, 255, 255, .08); border-color: #fff; color: #fff; }
.btn--sm { padding: 9px 12px; font-size: var(--fs-xs); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.link-arrow { font-weight: 600; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.link-arrow::after { content: '→'; transition: transform .15s; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- header & navigation ---------- */
.utility { background: var(--navy-950); color: #9fb6c9; font-size: var(--fs-xs); }
.utility .container { display: flex; justify-content: space-between; gap: var(--s4); padding: 7px 0; }
.utility a { color: #cfe0ec; text-decoration: none; }
.header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); }
.header__inner { height: var(--header-h); display: flex; align-items: center; gap: var(--s5); }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--navy-900); flex-shrink: 0; }
.brand img { width: 38px; height: 38px; }
.brand strong { display: block; font-size: 1.2rem; letter-spacing: -.03em; line-height: 1; }
.brand small { display: block; font: 500 .62rem/1 var(--mono); letter-spacing: .12em; color: var(--copper-600); margin-top: 5px; }
.nav { margin-left: auto; }
.nav > ul { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; align-items: center; }
.nav a, .nav button { font: 550 var(--fs-sm)/1 var(--font); color: var(--ink); text-decoration: none; padding: 10px 12px; border-radius: var(--radius-sm); background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nav a:hover, .nav button:hover, .nav [aria-current='page'] { background: var(--steel-100); color: var(--navy-900); }
.nav [aria-current='page'] { box-shadow: inset 0 -2px 0 var(--copper-500); }
.nav__item { position: relative; }
.nav__caret { width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.menu { position: absolute; top: calc(100% + 8px); left: -8px; min-width: 300px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 40px rgba(6, 26, 44, .14); padding: var(--s3); display: none; }
.nav__item.open .menu { display: block; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a { display: block; padding: 9px 10px; width: 100%; }
.menu a small { display: block; color: var(--ink-3); font-weight: 400; margin-top: 3px; font-size: var(--fs-xs); }
.menu__label { font: 600 .66rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 10px 10px 4px; }
.menu-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: var(--radius-sm); width: 44px; height: 44px; cursor: pointer; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { display: block; width: 18px; height: 2px; background: var(--navy-900); margin: auto; position: relative; content: ''; }
.menu-toggle span::before { position: absolute; top: -6px; } .menu-toggle span::after { position: absolute; top: 6px; }
.header__cta { flex-shrink: 0; }
@media (max-width: 1060px) {
  .menu-toggle { display: block; }
  .header__cta { display: none; }
  .nav { position: fixed; inset: calc(var(--header-h) + 1px) 0 0 0; background: #fff; overflow: auto; display: none; padding: var(--s4) 20px var(--s7); }
  .nav.open { display: block; }
  .nav > ul { flex-direction: column; align-items: stretch; }
  .nav a, .nav button { width: 100%; justify-content: space-between; padding: 14px 10px; font-size: var(--fs-md); }
  .menu { position: static; box-shadow: none; border: 0; border-left: 2px solid var(--copper-300); border-radius: 0; margin: 0 0 var(--s3) var(--s3); min-width: 0; }
}

/* ---------- hero ---------- */
.hero { position: relative; background: var(--navy-900); color: #d6e3ee; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(134, 162, 184, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(134, 162, 184, .09) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(180deg, #000 30%, transparent); }
.hero .container { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s7); padding: var(--s8) 0 var(--s8); align-items: center; }
.hero h1 { color: #fff; margin-bottom: var(--s5); }
.hero h1 em { font-style: normal; color: var(--copper-300); }
.hero .lead { color: #b8cbdb; }
.hero .eyebrow { color: var(--copper-300); }
.hero__actions { display: flex; gap: var(--s3); flex-wrap: wrap; margin: var(--s6) 0 var(--s5); }
.trust { display: flex; flex-wrap: wrap; gap: var(--s5); margin: 0; padding: var(--s5) 0 0; border-top: 1px solid rgba(255, 255, 255, .12); list-style: none; font-size: var(--fs-sm); }
.trust strong { display: block; color: #fff; font: 600 1.5rem/1.1 var(--mono); }
@media (max-width: 960px) { .hero .container { grid-template-columns: 1fr; padding: var(--s7) 0; } }

/* mini calculator card in hero */
.quick { background: #fff; color: var(--ink); border-radius: var(--radius-lg); padding: var(--s5); box-shadow: 0 30px 60px rgba(0, 0, 0, .25); }
.quick__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s3); }
.quick__head h2 { font-size: var(--fs-lg); margin: 0; }
.quick__row { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--s3); }
.quick__sketch { background: var(--steel-50); border: 1px solid var(--line); border-radius: var(--radius); margin: var(--s4) 0; aspect-ratio: 16 / 10; display: grid; place-items: center; }
.quick__sketch svg { width: 100%; height: 100%; }
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin: 0; }
.kv div { background: var(--steel-50); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; }
.kv dt { font-size: var(--fs-xs); color: var(--ink-3); }
.kv dd { margin: 2px 0 0; font: 500 1.05rem/1.2 var(--mono); color: var(--navy-900); }

/* ---------- cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); transition: border-color .15s, box-shadow .15s, transform .15s; position: relative; }
.card:hover { border-color: var(--steel-300); box-shadow: var(--shadow); }
.card h3 { font-size: var(--fs-lg); margin-bottom: var(--s2); }
.card p { color: var(--ink-2); font-size: var(--fs-sm); }
.card--link { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.card--link:hover { transform: translateY(-2px); }
.card--link .link-arrow { margin-top: auto; }
.card__meta { font: 500 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card__icon { width: 56px; height: 44px; margin-bottom: var(--s4); color: var(--navy-800); }
.badge { display: inline-flex; align-items: center; gap: 5px; font: 600 .66rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; border-radius: 99px; background: var(--steel-100); color: var(--navy-700); }
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--warn { background: var(--warn-bg); color: var(--warn); }
.badge--copper { background: var(--copper-100); color: var(--copper-700); }

.group-title { display: flex; align-items: center; gap: var(--s3); margin: var(--s6) 0 var(--s4); font: 600 var(--fs-xs)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.group-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ---------- notices ---------- */
.notice { border: 1px solid var(--line); border-left: 3px solid var(--steel-400); background: var(--steel-50); border-radius: var(--radius-sm); padding: var(--s4); font-size: var(--fs-sm); color: var(--ink-2); }
.notice--warn { border-left-color: var(--copper-500); background: var(--warn-bg); color: #5d4210; }
.notice--err { border-left-color: var(--err); background: var(--err-bg); color: var(--err); }
.notice--ok { border-left-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.notice ul { margin: 0; padding-left: 1.1em; }

/* ---------- page header ---------- */
.page-head { background: var(--navy-900); color: #c6d6e3; padding: var(--s7) 0 var(--s6); position: relative; overflow: hidden; }
.page-head::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(134, 162, 184, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(134, 162, 184, .08) 1px, transparent 1px); background-size: 32px 32px; }
.page-head .container { position: relative; }
.page-head h1 { color: #fff; margin-bottom: var(--s3); }
.page-head p { color: #b4c8d8; max-width: 70ch; margin: 0; }
.crumbs { font: 500 var(--fs-xs)/1 var(--mono); letter-spacing: .06em; margin-bottom: var(--s4); display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: var(--copper-300); text-decoration: none; }
.crumbs span[aria-hidden] { color: #59768f; }

/* ---------- forms ---------- */
.field { display: grid; gap: 6px; }
.field label, .field .label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); display: flex; justify-content: space-between; gap: 8px; }
.field label .unit { font: 500 var(--fs-xs)/1.6 var(--mono); color: var(--ink-3); }
.field small { color: var(--ink-3); font-size: var(--fs-xs); }
input, select, textarea { font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px; width: 100%; min-height: 44px; }
input[type='number'] { font-family: var(--mono); }
input:hover, select:hover, textarea:hover { border-color: var(--steel-400); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--copper-500); box-shadow: var(--focus); }
.field.invalid input, .field.invalid select { border-color: var(--err); background: var(--err-bg); }
.field.hl input, .field.hl select { border-color: var(--copper-500); background: var(--copper-100); }
.field-error { color: var(--err); font-size: var(--fs-xs); min-height: 0; }
fieldset { border: 0; padding: 0; margin: 0 0 var(--s5); }
legend { font: 600 .7rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--copper-600); padding: 0 0 var(--s3); width: 100%; border-bottom: 1px solid var(--line); margin-bottom: var(--s4); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.fields .field--full { grid-column: 1 / -1; }
@media (max-width: 520px) { .fields { grid-template-columns: 1fr; } }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-2); }
.check input { width: 18px; height: 18px; min-height: 0; margin-top: 3px; flex-shrink: 0; }

/* ---------- calculator page ---------- */
.calc { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--s6); align-items: start; }
@media (max-width: 1000px) { .calc { grid-template-columns: 1fr; } }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s5); }
.panel--sticky { position: sticky; top: calc(var(--header-h) + 16px); }
@media (max-width: 1000px) { .panel--sticky { position: static; } }
.panel__title { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.panel__title h2 { font-size: var(--fs-lg); margin: 0; }
.drawing { background: var(--steel-50); border: 1px solid var(--line); border-radius: var(--radius); position: relative; aspect-ratio: 16 / 11; display: grid; place-items: center; overflow: hidden; }
.drawing svg { width: 100%; height: 100%; }
.drawing__tag { position: absolute; left: 12px; bottom: 10px; font: 500 .62rem/1 var(--mono); letter-spacing: .1em; color: var(--ink-3); }
.drawing__title { position: absolute; left: 12px; top: 10px; font: 600 .72rem/1 var(--mono); color: var(--navy-800); }
.results { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s3); margin: var(--s5) 0; }
.result { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: #fff; }
.result--primary { border-color: var(--copper-300); background: linear-gradient(180deg, #fff, var(--copper-100)); }
.result small { display: block; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.35; }
.result strong { display: block; font: 500 1.35rem/1.25 var(--mono); color: var(--navy-900); margin-top: 6px; word-break: break-word; }
.result span { font: 500 var(--fs-xs)/1 var(--mono); color: var(--ink-3); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
th, td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: var(--steel-50); font-weight: 600; color: var(--navy-900); white-space: nowrap; }
td.num, th.num { text-align: right; font-family: var(--mono); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fbfcfd; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: var(--s5) 0 var(--s4); overflow-x: auto; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; font: 600 var(--fs-sm)/1 var(--font); color: var(--ink-3); cursor: pointer; white-space: nowrap; }
.tabs button[aria-selected='true'] { color: var(--navy-900); border-bottom-color: var(--copper-500); }
.formula { font-family: var(--mono); background: var(--navy-950); color: #e3edf5; padding: 10px 14px; border-radius: var(--radius-sm); font-size: var(--fs-sm); overflow-x: auto; }
.formula-list { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.formula-list li > span { display: block; font-size: var(--fs-xs); color: var(--ink-3); margin-bottom: 4px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.status-line { font-size: var(--fs-xs); color: var(--ink-3); min-height: 1.4em; font-family: var(--mono); }
.status-line.error { color: var(--err); }
.meta-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }

/* section picker */
.picker { display: grid; grid-template-columns: 110px 1fr; gap: var(--s2); }

/* ---------- section database ---------- */
.family-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s4); }
.search { position: relative; max-width: 560px; }
.search input { padding-left: 42px; min-height: 52px; font-size: var(--fs-md); }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; color: var(--ink-3); }
.search-results { list-style: none; margin: var(--s2) 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; max-height: 320px; overflow: auto; }
.search-results a { display: flex; justify-content: space-between; padding: 10px 14px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); }
.search-results a:hover { background: var(--steel-50); }
.search-results span { font-family: var(--mono); color: var(--ink-3); font-size: var(--fs-sm); }
.section--hero-search { background: var(--navy-800); color: #c9d8e4; }
.section--hero-search h2 { color: #fff; }

/* ---------- article / prose ---------- */
.prose { max-width: 72ch; }
.prose h2 { margin-top: var(--s7); }
.prose h3 { margin-top: var(--s6); }
.prose p, .prose li { color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose blockquote { border-left: 3px solid var(--copper-500); margin: var(--s5) 0; padding: var(--s2) var(--s5); color: var(--ink-2); }

/* method strip */
.method { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-lg); overflow: hidden; }
.method > div { padding: var(--s5); border-right: 1px solid rgba(255, 255, 255, .14); }
.method > div:last-child { border-right: 0; }
.method b { display: block; font: 600 .7rem/1 var(--mono); letter-spacing: .12em; color: var(--copper-300); margin-bottom: var(--s3); }
.method p { font-size: var(--fs-sm); color: #b9cbda; margin: 0; }
.method h3 { font-size: var(--fs-md); }
@media (max-width: 860px) { .method { grid-template-columns: 1fr 1fr; } .method > div { border-bottom: 1px solid rgba(255, 255, 255, .14); } }

/* game cards */
.game-card { display: grid; grid-template-columns: 120px 1fr; gap: var(--s5); align-items: center; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-lg); padding: var(--s5); text-decoration: none; color: #c9d8e4; transition: background .15s, border-color .15s; }
.game-card:hover { background: rgba(255, 255, 255, .08); border-color: var(--copper-300); color: #fff; }
.game-card h3 { color: #fff; margin-bottom: var(--s2); }
.game-card p { margin: 0; font-size: var(--fs-sm); }
.game-card svg { color: var(--copper-300); }
@media (max-width: 560px) { .game-card { grid-template-columns: 1fr; } }

/* about */
.founder { display: grid; grid-template-columns: 96px 1fr; gap: var(--s5); align-items: start; }
.monogram { width: 96px; height: 96px; border-radius: var(--radius-lg); background: var(--navy-900); color: #fff; display: grid; place-items: center; font: 700 1.8rem/1 var(--font); letter-spacing: -.04em; border: 3px solid var(--copper-500); }
@media (max-width: 560px) { .founder { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.footer { background: var(--navy-950); color: #93aabd; font-size: var(--fs-sm); padding: var(--s8) 0 var(--s5); }
.footer a { color: #c9d9e6; text-decoration: none; }
.footer a:hover { color: var(--copper-300); }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--s6); }
.footer h2 { font: 600 .7rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: var(--s4); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer .brand { color: #fff; margin-bottom: var(--s4); }
.footer__independence { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid rgba(255, 255, 255, .1); display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; font-size: var(--fs-xs); }
.footer__independence p { max-width: 80ch; margin: 0; }
.footer button.linklike { background: none; border: 0; color: #c9d9e6; font: inherit; padding: 0; cursor: pointer; }
@media (max-width: 960px) { .footer__grid { grid-template-columns: 1fr 1fr; } }

/* ---------- cookie banner ---------- */
.cookie { position: fixed; inset: auto 16px 16px 16px; max-width: 560px; margin-left: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 20px 50px rgba(6, 26, 44, .2); padding: var(--s5); z-index: 80; display: none; }
.cookie.show { display: block; }
.cookie p { font-size: var(--fs-sm); color: var(--ink-2); }

/* ---------- print (calculation report) ---------- */
@media print {
  .utility, .header, .footer, .cookie, .no-print, .tabs { display: none !important; }
  .page-head { background: none; color: #000; padding: 0 0 12px; border-bottom: 2px solid #000; }
  .page-head h1, .page-head p { color: #000; }
  .calc { grid-template-columns: 1fr; }
  .panel { border: 0; padding: 0; }
  [role='tabpanel'][hidden] { display: block !important; }
  body { font-size: 11pt; }
}

/* utilities */
.spacer { height: var(--s8); }
.h3 { font-size: var(--fs-xl); }
.h4 { font-size: var(--fs-lg); }
.results.stale { opacity: .45; }

/* mobile header refinements */
.brand > span { min-width: 0; }
.menu-toggle { flex-shrink: 0; }
@media (max-width: 640px) {
  .brand small { display: none; }
  .utility .container { justify-content: center; }
  .utility #announcement { display: none; }
  .header__inner { gap: var(--s3); }
}
.check > span { flex: 1; }
fieldset { min-width: 0; }
.calc > *, .fields > *, .picker > * { min-width: 0; }
select { max-width: 100%; text-overflow: ellipsis; }
/* contrast on dark backgrounds */
.footer .brand small, .section--hero-search .eyebrow, .section--dark .eyebrow, .page-head .eyebrow { color: var(--copper-300); }
.section--hero-search p { color: #d2dee8; }

/* =====================  v2.1, CMS & article template  ===================== */
/* homepage ordering (set by the CMS middleware) */
main.home { display: flex; flex-direction: column; }
main.home > * { width: 100%; }
.o-1 { order: 1; } .o-2 { order: 2; } .o-3 { order: 3; } .o-4 { order: 4; } .o-5 { order: 5; } .o-6 { order: 6; } .o-7 { order: 7; } .o-8 { order: 8; } .o-9 { order: 9; } .o-10 { order: 10; }
.o-11 { order: 11; } .o-12 { order: 12; } .o-13 { order: 13; } .o-14 { order: 14; } .o-15 { order: 15; } .o-16 { order: 16; } .o-17 { order: 17; } .o-18 { order: 18; } .o-19 { order: 19; } .o-20 { order: 20; }
.section--flush { padding-top: 0; }
.sec-head--spaced { margin-top: var(--s7); }
.footer__cols { display: contents; }
.footer__legal { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.menu__chips { display: flex !important; flex-wrap: wrap; gap: 6px; padding: 4px 10px 8px !important; }
.menu__chips a { padding: 5px 10px !important; border: 1px solid var(--line); border-radius: 99px; font-size: var(--fs-xs) !important; width: auto !important; }

/* article cards */
.card--article { padding: 0; overflow: hidden; }
.card--article > :not(img) { margin-left: var(--s5); margin-right: var(--s5); }
.card--article .card__meta { margin-top: var(--s5); }
.card--article .link-arrow { margin-bottom: var(--s5); }
.card__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--steel-100); }
.feature-article .card--article { display: grid; grid-template-columns: 1.2fr 1fr; }
.feature-article .card--article .card__img { grid-row: span 4; height: 100%; aspect-ratio: auto; }
.feature-article h3 { font-size: var(--fs-2xl); }
@media (max-width: 760px) { .feature-article .card--article { display: flex; } }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chips a { text-decoration: none; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 99px; font-size: var(--fs-sm); font-weight: 600; color: var(--navy-800); }
.chips a:hover { border-color: var(--copper-500); }
.chips a[aria-current='page'] { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }

/* article template */
.page-head--article h1 { max-width: 22ch; font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
.article-sub { font-size: var(--fs-lg); color: #c8d7e3 !important; max-width: 62ch !important; margin-top: var(--s3) !important; }
.byline { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s5) !important; font-size: var(--fs-sm); color: #a9bfd0 !important; }
.byline strong { color: #fff; }
.page-head--article .meta-row { margin: 0 0 var(--s4); }
.article-wrap { padding-top: var(--s7); }
.article-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s7); align-items: start; }
.article-toc { position: sticky; top: calc(var(--header-h) + 24px); font-size: var(--fs-sm); border-left: 2px solid var(--line); padding-left: var(--s4); }
.article-toc__title { font: 600 .7rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--copper-600); }
.article-toc ol { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; gap: 8px; }
.article-toc a { color: var(--ink-2); text-decoration: none; }
.article-toc a:hover { color: var(--copper-600); }
.article-toc .lvl-3 { padding-left: var(--s3); font-size: var(--fs-xs); }
.article-body { max-width: 74ch; min-width: 0; }
.article-body .prose { max-width: none; }
.article-body .prose > p, .article-body .prose li { font-size: 1.06rem; line-height: 1.75; }
.article-body h2 { margin-top: var(--s7); padding-top: var(--s2); }
.article-body h2::before { content: ''; display: block; width: 32px; height: 3px; background: var(--copper-500); margin-bottom: var(--s3); }
.article-body .table-wrap { margin: var(--s5) 0; }
.article-body td.center, .article-body th.center { text-align: center; }
.article-cover { margin: 0 0 var(--s6); }
.article-cover img, .prose figure img { border-radius: var(--radius); border: 1px solid var(--line); width: 100%; }
figure { margin: var(--s5) 0; }
figcaption { font-size: var(--fs-sm); color: var(--ink-3); margin-top: var(--s2); }
.takeaways { border: 1px solid var(--copper-300); background: var(--copper-100); border-radius: var(--radius); padding: var(--s4) var(--s5); margin: var(--s5) 0; }
.takeaways__title, .callout__title { font: 600 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 var(--s3) !important; }
.takeaways__title { color: var(--copper-700); }
.takeaways ul { margin: 0; padding-left: 1.1em; }
.callout { border-radius: var(--radius); padding: var(--s4) var(--s5); margin: var(--s5) 0; border: 1px solid var(--line); border-left-width: 4px; background: var(--steel-50); }
.callout > :last-child { margin-bottom: 0; }
.callout--note { border-left-color: var(--navy-600); }
.callout--note .callout__title { color: var(--navy-700); }
.callout--tip { border-left-color: var(--ok); background: var(--ok-bg); }
.callout--tip .callout__title { color: var(--ok); }
.callout--warning { border-left-color: var(--copper-600); background: var(--warn-bg); }
.callout--warning .callout__title { color: var(--warn); }
.callout--technical { border-left-color: var(--navy-900); background: #eef3f7; }
.callout--technical .callout__title { color: var(--navy-900); }
.equation { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--s4) var(--s5); margin: var(--s4) 0; overflow-x: auto; }
.equation__expr { font: 500 1.1rem/1.6 var(--mono); color: var(--navy-900); white-space: nowrap; }
.equation__no { font: 500 var(--fs-sm)/1 var(--mono); color: var(--ink-3); }
.math { font-family: var(--mono); font-size: .95em; color: var(--navy-900); white-space: nowrap; }
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; font-size: .9em; }
.frac > span:first-child { border-bottom: 1px solid currentColor; padding: 0 2px; }
.calc-block { background: var(--navy-950); color: #e3edf5; padding: var(--s4); border-radius: var(--radius-sm); overflow-x: auto; font-size: var(--fs-sm); }
.references { margin-top: var(--s7); border-top: 1px solid var(--line); padding-top: var(--s4); }
.references h2 { font-size: var(--fs-lg); }
.references h2::before { display: none; }
.references ol { padding-left: 1.3em; font-size: var(--fs-sm); color: var(--ink-2); display: grid; gap: 6px; }
.disclaimer { margin-top: var(--s6); }
@media (max-width: 960px) {
  .article-grid { grid-template-columns: 1fr; }
  .article-toc { position: static; border-left: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); }
}
@media print { .article-toc { display: none; } .article-grid { grid-template-columns: 1fr; } }

/* v2.2, schedule tables and charts for decision & commercial tools */
.schedule { margin: 1.25rem 0; }
.sched-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .5rem; }
.sched-head h2 { font-size: 1.05rem; margin: 0; }
.schedule .table-wrap.scroll { max-height: 420px; overflow: auto; }
table.sched { font-size: .85rem; }
table.sched th { position: sticky; top: 0; background: var(--steel-50); white-space: nowrap; }
table.sched td.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
@media print { .schedule .table-wrap.scroll { max-height: none; overflow: visible; } }

/* v2.3, email updates */
.subscribe { background: var(--navy-900, #0b2338); color: #fff; padding: var(--s7, 2.5rem) 0; margin-bottom: var(--s6, 2rem); }
.subscribe__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--s6, 2rem); align-items: start; }
.subscribe h2 { color: #fff; margin: .25rem 0 .5rem; font-size: 1.5rem; }
.subscribe p { color: #c9d6e3; margin: 0; }
.subscribe .eyebrow { color: var(--copper-400, #f0a46c); }
.subscribe__row { display: flex; gap: .5rem; }
.subscribe__row input { flex: 1; min-width: 0; padding: .7rem .9rem; border-radius: var(--radius-sm, 6px); border: 1px solid #3b5672; background: #fff; color: #0f2f4c; font: inherit; }
.subscribe__topics { border: 0; padding: 0; margin: .75rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .9rem; }
.subscribe__topics legend { float: left; margin-right: .6rem; color: #c9d6e3; }
.subscribe__consent { display: block; font-size: .82rem; color: #c9d6e3; margin-top: .6rem; line-height: 1.45; }
.subscribe__consent a, .subscribe__consent a:visited { color: #fff; }
.subscribe__captcha:not(:empty) { margin-top: .6rem; }
.subscribe__status { min-height: 1.3em; margin-top: .5rem !important; font-size: .9rem; }
.subscribe__status.ok { color: #9be3b4; } .subscribe__status.err { color: #ffb4a8; }
.sub-cta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border: 1px dashed var(--line); border-radius: var(--radius, 8px); padding: var(--s4, 1rem); margin: var(--s6, 2rem) 0; }
.sub-cta p { margin: 0; }
.narrow { max-width: 720px; }
.small { font-size: .85rem; }
.check { display: block; margin: .35rem 0; }
@media (max-width: 760px) { .subscribe__inner { grid-template-columns: 1fr; } .subscribe__row { flex-direction: column; } }
@media print { .subscribe, .sub-cta { display: none; } }
.footer .subscribe h2 { font: 750 1.5rem/1.2 var(--font); letter-spacing: -.02em; text-transform: none; color: #fff; margin: .25rem 0 .5rem; }
.subscribe__topics legend { float: left; width: auto; border: 0; padding: 0; margin: 0 .8rem 0 0; font: 500 .9rem/1.6 var(--font); letter-spacing: 0; text-transform: none; color: #c9d6e3; }
.subscribe__topics label { display: inline-flex; align-items: center; gap: .4rem; color: #fff; }
.subscribe input[type="checkbox"] { width: 1rem; height: 1rem; min-height: 0; margin: 0; padding: 0; flex: none; accent-color: var(--copper-500, #c8642a); }
.subscribe__consent { display: flex !important; gap: .5rem; align-items: flex-start; }
.subscribe__consent input { margin-top: .15rem !important; }