/* ==========================================================================
   MetIQ Labs — shared stylesheet
   Design tokens per handoff README. Do not hand-edit color values inline;
   change the custom properties below instead.
   ========================================================================== */

:root{
  --ink:#2D3E4E;
  --blue:#006DD3;
  --blue-hover:#005AAF;
  --blue-light:#7FBEF5;
  --blue-tint-bg:#EAF3FC;
  --blue-tint-border:#B9D8F5;
  --body-c:#3F5364;
  --muted:#55697A;
  --line:#E1E7EC;
  --line-soft:#EEF2F5;
  --line-strong:#C6D2DC;
  --line-dark:#4A5C6D;
  --muted-on-dark:#C6D2DC;
  --faint-on-dark:#A9B8C4;
  --surface:#F7F9FB;
  --white:#FFFFFF;

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{ margin:0; padding:0; background:var(--white); }
body{
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{ flex:1; }
img{ max-width:100%; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ color:var(--ink); text-decoration:underline; }
button,input,textarea,select{ font:inherit; }
h1,h2,h3,p{ margin:0; }
ul,ol{ margin:0; padding:0; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; }
}

/* ---------- layout ---------- */
.container{
  max-width:min(1320px,100%);
  margin:0 auto;
  padding-inline:24px;
}
.section{
  border-bottom:1px solid var(--line);
  padding-block:clamp(38px,5vw,64px);
}
.section--tight{ padding-block:clamp(26px,2.8vw,34px) clamp(44px,5.6vw,72px); }
.section--hero{ padding-block:clamp(44px,6vw,80px); }
.section--noborder{ border-bottom:0; }
.section--surface{ background:var(--surface); }
.section--navy{ background:var(--ink); color:var(--white); }
.section--navy p{ color:var(--muted-on-dark); }
.section--gradient{ background:linear-gradient(180deg,var(--surface) 0%,var(--white) 100%); }

.grid-auto{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.grid-auto--sm{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.grid-auto--md{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; }
.grid-auto--lg{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:36px; }
.grid-auto--wide{ display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:22px; }
.grid-2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:52px; }
.grid-2--tight{ gap:48px; }
.grid-2--start{ align-items:start; }
.grid-2--center{ align-items:center; }

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue); margin-bottom:16px; display:block;
}
.eyebrow--light{ color:var(--blue-light); }
.eyebrow--muted{ color:var(--muted); text-transform:none; letter-spacing:.1em; }

.h-hero{
  font-size:clamp(30px,5.6vw,50px); line-height:1.08; letter-spacing:-0.025em;
  font-weight:700; margin:0 0 22px; text-wrap:pretty; overflow-wrap:break-word; hyphens:auto;
}
.h-page{
  font-size:clamp(27px,4.8vw,42px); line-height:1.1; letter-spacing:-0.025em;
  font-weight:700; margin:0 0 16px; text-wrap:pretty;
}
.h-article{
  font-size:clamp(26px,4.6vw,40px); line-height:1.12; letter-spacing:-0.025em;
  font-weight:700; margin:0 0 18px; text-wrap:pretty;
}
.h-section{
  font-size:clamp(23px,3.4vw,30px); line-height:1.16; letter-spacing:-0.02em;
  font-weight:700; margin:0 0 16px;
}
.h-figure{
  font-size:clamp(22px,2.6vw,28px); font-weight:700; letter-spacing:-0.02em; line-height:1.2;
}
.h-card{ font-size:20px; font-weight:600; letter-spacing:-0.01em; line-height:1.18; margin:0 0 8px; }

.lede{ font-size:clamp(17px,1.8vw,19px); line-height:1.6; color:var(--muted); margin:0 0 32px; max-width:62ch; }
.body-copy{ font-size:15px; line-height:1.65; color:var(--muted); margin:0; }
.body-copy--lg{ font-size:17px; line-height:1.68; color:var(--body-c); margin:0; }
.measure-78{ max-width:78ch; }
.measure-76{ max-width:76ch; }
.measure-62{ max-width:62ch; }
.measure-820{ max-width:820px; }

.mono-fine{ font-family:var(--font-mono); font-size:11px; line-height:1.7; color:var(--muted); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:2px; padding:15px 26px; font-size:15px; font-weight:600;
  cursor:pointer; white-space:nowrap; font-family:var(--font-sans); text-decoration:none;
}
.btn:hover{ text-decoration:none; }
.btn-primary{ background:var(--blue); color:var(--white); }
.btn-primary:hover{ background:var(--blue-hover); color:var(--white); }
.btn-secondary{ background:var(--white); color:var(--ink); border:1px solid var(--line-strong); }
.btn-secondary:hover{ border-color:var(--ink); color:var(--ink); }
.btn-ghost-onnavy{ background:transparent; color:var(--white); border:1px solid var(--line-dark); }
.btn-ghost-onnavy:hover{ border-color:var(--blue-light); color:var(--white); }
.btn-link{
  background:none; border:0; padding:0; cursor:pointer; color:var(--blue);
  font-size:15px; font-weight:600; font-family:var(--font-sans); text-decoration:none;
}
.btn-link:hover{ color:var(--ink); text-decoration:none; }
.btn-sm{ padding:13px 24px; font-size:15px; }
.btn-block{ width:100%; }
.btn-chip{
  border:1px solid var(--line-strong); background:var(--white); color:var(--muted);
  padding:8px 14px; font-size:13px; font-weight:500; cursor:pointer; border-radius:2px;
  font-family:var(--font-sans);
}
.btn-chip:hover, .btn-chip[aria-pressed="true"]{ border-color:var(--blue); color:var(--blue); }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,0.95);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.site-header__row{
  padding:13px 24px; display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.site-header__brand{ display:flex; align-items:center; gap:16px; min-width:0; }
.site-header__logo{ height:30px; width:auto; display:block; flex:0 0 auto; }
.site-header__divider{ width:1px; height:24px; background:var(--line); display:block; flex:0 0 auto; }
.site-header__tag{
  font-family:var(--font-mono); font-size:11px; line-height:1.4; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.site-nav{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
.site-nav__link{
  position:relative; background:none; border:0; padding:9px 11px; cursor:pointer;
  color:var(--ink); font-size:14px; font-weight:500; text-decoration:none; display:inline-block;
  font-family:var(--font-sans);
}
.site-nav__link:hover{ color:var(--blue); text-decoration:none; }
.site-nav__link[aria-current="page"]::after{
  content:""; position:absolute; left:11px; right:11px; bottom:0; height:2px; background:var(--blue); display:block;
}
.site-nav__cta{ margin-left:8px; }

/* ---------- cards ---------- */
.card{ background:var(--white); border:1px solid var(--line); padding:28px 24px; }
.card:hover{ }
.card--hover:hover{ border-color:var(--blue); }
.card--flex{ display:flex; flex-direction:column; gap:22px; }
.card--tall{ display:flex; flex-direction:column; }
.card--num{ font-family:var(--font-mono); font-size:11px; color:var(--blue); letter-spacing:.1em; margin-bottom:14px; display:block; }
.card--num-muted{ font-family:var(--font-mono); font-size:11px; color:var(--muted); letter-spacing:.1em; margin-bottom:18px; display:block; }
.card--topline{ border-top:2px solid var(--ink); padding-top:20px; border-left:0;border-right:0;border-bottom:0; background:none; }

.button-card{
  text-align:left; border:1px solid var(--line); background:var(--white); padding:28px 26px;
  cursor:pointer; color:var(--ink); display:flex; gap:22px; align-items:flex-start; text-decoration:none;
  width:100%;
}
.button-card:hover{ border-color:var(--blue); text-decoration:none; }
.button-card--dashed{ border:1px dashed var(--line-strong); background:var(--surface); }
.button-card--dashed:hover{ border-color:var(--ink); }

/* ---------- figure / mechanism box ---------- */
.figure-box{ border:2px solid var(--ink); background:var(--white); }
.figure-box__head{
  border-bottom:1px solid var(--line); padding:26px 24px 22px; display:flex;
  flex-direction:column; align-items:center; gap:10px; text-align:center;
}
.figure-box__body{ padding:36px 32px; }
.figure-box__body img{ width:100%; height:auto; display:block; }
figcaption.mono-fine{ margin-top:18px; max-width:88ch; }

/* ---------- placeholder art (missing assets) ---------- */
.art-placeholder{
  border:1px dashed var(--line-strong); background:var(--surface); color:var(--muted);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  text-align:center; padding:32px; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.06em; line-height:1.6;
}
.art-placeholder--diagram{ aspect-ratio:3107 / 1622; width:100%; }
.art-placeholder--cover{ aspect-ratio:1315 / 1810; width:100%; box-shadow:none !important; }
.art-placeholder__label{ color:var(--ink); font-weight:600; letter-spacing:.08em; }

/* ---------- pull quote / evidence note ---------- */
.pull-quote{ border-left:3px solid var(--blue); padding:4px 0 4px 20px; margin:28px 0; }
.pull-quote p{ font-size:20px; line-height:1.5; color:var(--ink); font-weight:500; }
.evidence-note{ background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--blue); padding:20px 22px; margin:26px 0; }
.evidence-note p{ font-size:15px; line-height:1.65; color:var(--body-c); }

/* ---------- tables ---------- */
.data-table-wrap{ border:1px solid var(--line); overflow-x:auto; }
.data-table{ width:100%; border-collapse:collapse; min-width:520px; }
.data-table thead th{
  background:var(--ink); color:var(--white); text-align:left; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:500; padding:13px 16px;
}
.data-table tbody td{ padding:15px 16px; font-size:14px; line-height:1.55; color:var(--body-c); border-top:1px solid var(--line); }
.table-caption{ font-family:var(--font-mono); font-size:11px; line-height:1.7; color:var(--muted); margin:12px 0 0; }

.spec-list{ background:var(--white); border:1px solid var(--line); }
.spec-list__row{ display:flex; justify-content:space-between; gap:18px; padding:15px 24px; border-bottom:1px solid var(--line-soft); }
.spec-list__row:last-child{ border-bottom:0; }
.spec-list__k{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.spec-list__v{ font-family:var(--font-mono); font-size:13px; color:var(--ink); text-align:right; }

.kv-list{ display:grid; gap:12px; }
.kv-row{ display:flex; gap:14px; align-items:baseline; }
.kv-row__k{ font-family:var(--font-mono); font-size:11px; color:var(--blue); flex:0 0 auto; }
.kv-row__v{ font-size:15px; line-height:1.6; color:var(--body-c); }

.dash-list{ background:var(--white); border:1px solid var(--line); padding:22px 24px; }
.dash-list__row{ display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-soft); font-size:15px; line-height:1.55; color:var(--muted); }
.dash-list__row:last-child{ border-bottom:0; }
.dash-list__mark{ font-family:var(--font-mono); color:var(--line-strong); flex:0 0 auto; }

/* ---------- forms ---------- */
.field{ display:flex; flex-direction:column; gap:7px; font-size:13px; font-weight:500; color:var(--muted); }
.field input,.field textarea,.field select{
  padding:12px 14px; border:1px solid var(--line-strong); border-radius:2px; font-size:15px; color:var(--ink); background:var(--white);
}
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--blue); }
textarea{ resize:vertical; }
.form-stack{ display:flex; flex-direction:column; gap:16px; }
.form-inline{ display:flex; gap:10px; flex-wrap:wrap; }
.form-inline input{ flex:1 1 200px; padding:13px 14px; border:1px solid var(--line-strong); border-radius:2px; font-size:15px; color:var(--ink); background:var(--white); }
.form-inline input:focus{ outline:none; border-color:var(--blue); }
.form-inline--navy input{ border:1px solid var(--line-dark); color:var(--white); background:#263644; }
.form-msg{ font-size:13px; line-height:1.55; color:var(--muted); margin:12px 0 0; }
.form-msg--onnavy{ color:var(--faint-on-dark); }
.form-note{ display:none; }
.js-sent .form-note{ display:block; }
.js-sent .form-default{ display:none; }

/* ---------- purchase / notify panels ---------- */
.panel{ background:var(--white); border:1px solid var(--line); padding:26px; }
.panel--navy{ background:#263644; border:1px solid var(--line-dark); padding:24px; max-width:460px; }
.price-row{ display:flex; align-items:baseline; gap:12px; margin-bottom:20px; }
.price{ font-family:var(--font-mono); font-size:32px; font-weight:600; letter-spacing:-0.02em; }
.price--onnavy{ color:var(--white); }
.price-sub{ font-size:14px; color:var(--muted); }
.price-sub--onnavy{ color:var(--faint-on-dark); }

/* ---------- fact chips ---------- */
.fact-chips{ display:flex; gap:20px; flex-wrap:wrap; margin-bottom:30px; }
.fact-chip{ font-family:var(--font-mono); font-size:12px; color:var(--blue-light); letter-spacing:.06em; border-left:2px solid var(--blue); padding-left:10px; }
.fact-kv{ }
.fact-kv__k{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--faint-on-dark); margin-bottom:6px; }
.fact-kv__v{ font-family:var(--font-mono); font-size:17px; color:var(--white); }

/* ---------- badges ---------- */
.badge{ font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; border:1px solid var(--line-strong); color:var(--muted); padding:2px 7px; text-transform:uppercase; }
.review-mark{ display:inline-flex; align-items:center; gap:8px; }

/* ---------- article ---------- */
.article-layout{ display:flex; flex-wrap:wrap; gap:48px; align-items:flex-start; }
.article-main{ flex:1 1 620px; min-width:0; max-width:78ch; }
.article-aside{ flex:0 1 300px; min-width:250px; border:1px solid var(--line); padding:26px 24px; position:sticky; top:90px; }
.article-aside__link{ display:block; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--line-soft); padding:14px 0; cursor:pointer; color:var(--ink); font-size:15px; line-height:1.45; font-weight:500; text-decoration:none; }
.article-aside__link:hover{ color:var(--blue); text-decoration:none; }
.article-meta{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding-bottom:26px; border-bottom:1px solid var(--line); margin-bottom:34px; }
.article-meta__sep{ width:1px; height:14px; background:var(--line); display:block; }
.article-body h2{ font-size:25px; line-height:1.24; letter-spacing:-0.018em; font-weight:700; margin:40px 0 14px; }
.article-body h3{ font-size:19px; line-height:1.3; letter-spacing:-0.01em; font-weight:600; margin:30px 0 12px; color:var(--ink); }
.article-body p{ font-size:17px; line-height:1.72; color:var(--body-c); margin:0 0 18px; }
.article-body ul{ list-style:none; display:flex; flex-direction:column; gap:12px; margin:8px 0 22px; }
.article-body ul li{ display:flex; gap:14px; align-items:baseline; }
.article-body ul li .n{ font-family:var(--font-mono); font-size:11px; color:var(--blue); flex:0 0 auto; }
.article-body ul li .t{ font-size:17px; line-height:1.65; color:var(--body-c); }
.refs{ margin:40px 0 0; padding-top:26px; border-top:1px solid var(--line); }
.refs__label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.refs__list{ display:flex; flex-direction:column; gap:10px; }
.refs__row{ display:flex; gap:14px; align-items:baseline; }
.refs__n{ font-family:var(--font-mono); font-size:11px; color:var(--muted); flex:0 0 auto; }
.refs__t{ font-family:var(--font-mono); font-size:12px; line-height:1.7; color:var(--muted); }

/* ---------- education hub / cards ---------- */
.article-card{ text-align:left; background:var(--white); border:1px solid var(--line); padding:26px 24px; display:flex; flex-direction:column; gap:12px; color:var(--ink); text-decoration:none; }
.article-card:hover{ border-color:var(--blue); text-decoration:none; }
.article-card__top{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.article-card__topic{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); }
.article-card__title{ font-size:20px; line-height:1.25; font-weight:600; letter-spacing:-0.015em; }
.article-card__dek{ font-size:15px; line-height:1.6; color:var(--muted); }
.article-card__meta{ font-family:var(--font-mono); font-size:11px; color:var(--muted); margin-top:4px; }
.filter-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding-bottom:20px; border-bottom:1px solid var(--line); margin-bottom:28px; }
.filter-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-right:6px; }
.result-count{ font-family:var(--font-mono); font-size:12px; color:var(--muted); margin-left:auto; }

/* ---------- team ---------- */
.team-card{ border:1px solid var(--line); padding:24px; }
.team-card__photo{ aspect-ratio:1/1; background:var(--surface); border:1px solid var(--line); margin-bottom:20px; display:flex; align-items:center; justify-content:center; }
.team-card__initials{ font-family:var(--font-mono); font-size:22px; color:var(--line-strong); letter-spacing:.1em; }
.team-card__role{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); margin-bottom:12px; }

/* ---------- faq ---------- */
.faq-list{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item__q{ width:100%; text-align:left; background:none; border:0; padding:22px 0; cursor:pointer; display:flex; justify-content:space-between; gap:20px; align-items:baseline; color:var(--ink); font-family:var(--font-sans); }
.faq-item__q:hover{ color:var(--blue); }
.faq-item__q-text{ font-size:18px; font-weight:600; line-height:1.4; letter-spacing:-0.01em; }
.faq-item__sign{ font-family:var(--font-mono); font-size:18px; color:var(--blue); flex:0 0 auto; }
.faq-item__a{ font-size:16px; line-height:1.7; color:var(--muted); margin:0 0 24px; max-width:66ch; display:none; }
.faq-item.is-open .faq-item__a{ display:block; }

/* ---------- legal tabs ---------- */
.legal-tabs{ display:flex; gap:8px; margin-bottom:30px; }
.legal-tab{ border:1px solid var(--line-strong); background:var(--white); color:var(--muted); padding:9px 16px; font-size:13px; font-weight:500; cursor:pointer; border-radius:2px; text-decoration:none; display:inline-block; font-family:var(--font-sans); }
.legal-tab:hover{ border-color:var(--blue); color:var(--blue); text-decoration:none; }
.legal-tab[aria-current="page"]{ border-color:var(--ink); color:var(--ink); }
.legal-section{ margin-bottom:28px; }
.legal-section h2{ font-size:19px; font-weight:600; margin:0 0 10px; letter-spacing:-0.01em; }
.legal-section p{ font-size:16px; line-height:1.7; color:var(--muted); }

/* ---------- footer ---------- */
.site-footer{ background:var(--ink); color:var(--muted-on-dark); }
.site-footer__grid{ padding:clamp(36px,4.4vw,52px) 24px 34px; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:36px; }
.site-footer__logo{ height:32px; width:auto; display:block; margin-bottom:16px; }
.site-footer__tag{ font-family:var(--font-mono); font-size:12px; line-height:1.7; color:var(--faint-on-dark); }
.site-footer__col-title{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint-on-dark); margin-bottom:16px; }
.site-footer__links{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.site-footer__links a{ background:none; border:0; padding:0; cursor:pointer; color:var(--muted-on-dark); font-size:14px; text-align:left; text-decoration:none; }
.site-footer__links a:hover{ color:var(--white); text-decoration:none; }
.site-footer__bottom{ border-top:1px solid var(--line-dark); }
.site-footer__bottom-row{ padding:26px 24px 40px; display:flex; gap:30px; flex-wrap:wrap; justify-content:space-between; }
.site-footer__fine{ font-family:var(--font-mono); font-size:11px; line-height:1.75; color:var(--faint-on-dark); margin:0; max-width:78ch; }
.site-footer__copy{ font-family:var(--font-mono); font-size:11px; color:var(--faint-on-dark); margin:0; }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--surface); border-bottom:1px solid var(--line); }
.cta-band .grid-2{ align-items:center; gap:40px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.cta-band h2{ font-size:clamp(22px,3.2vw,28px); line-height:1.18; letter-spacing:-0.02em; font-weight:700; margin:0 0 12px; }
.cta-band p{ font-size:16px; line-height:1.6; color:var(--muted); margin:0; max-width:46ch; }

/* ---------- misc ---------- */
.shadow-cover{ box-shadow:0 18px 44px rgba(45,62,78,0.22); }
.shadow-cover-sm{ box-shadow:0 8px 20px rgba(45,62,78,0.2); }
.check-icon{ width:14px; height:14px; display:block; flex:0 0 auto; }
.back-link{ background:none; border:0; padding:0 0 18px; cursor:pointer; color:var(--blue); font-size:14px; font-weight:500; display:inline-block; text-decoration:none; }
.back-link:hover{ color:var(--ink); text-decoration:none; }
.back-link--onnavy{ color:var(--blue-light); }
.back-link--onnavy:hover{ color:var(--white); }
.credits-rule{ border-left:2px solid var(--blue); padding-left:18px; margin-bottom:30px; }
.credits-rule p{ font-family:var(--font-mono); font-size:13px; line-height:1.7; color:var(--muted); }
.mt-auto{ margin-top:auto; }

@media (max-width:640px){
  .article-aside{ position:static; }
}