/* Steel family overview — the calculator and catalog design language. */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body { margin:0; --bg:#fff; --surface:#fff; --card:#fff; --text:#171716; --muted:#4d535a; --dim:#626b75; --border:#d9dde1; --border-md:#a8adb3; --accent:#20201e; --accent-dim:#f3f4f5; --accent-br:#a8adb3; background:var(--bg); color:var(--text); font-family:Inter,Arial,sans-serif; line-height:1.6; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; }
a { color:inherit; }
img { display:block; max-width:100%; height:auto; }
[hidden] { display:none !important; }
:is(a,button,select,summary,[tabindex]):focus-visible { outline:2px solid #42677d; outline-offset:4px; }
#main-nav { position:fixed; top:0; left:0; right:0; }
.st-main { position:relative; isolation:isolate; padding-bottom:72px; }
.st-main::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:linear-gradient(rgba(28,39,51,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(28,39,51,.06) 1px,transparent 1px),linear-gradient(rgba(28,39,51,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(28,39,51,.025) 1px,transparent 1px); background-size:160px 160px,160px 160px,32px 32px,32px 32px; }
.st-container { width:100%; max-width:1560px; margin-inline:auto; padding-inline:clamp(24px,3.6vw,64px); }
.st-hero { padding-top:126px; padding-bottom:56px; }
.st-breadcrumb { display:flex; flex-wrap:wrap; gap:8px; font-size:12px; color:var(--muted); margin-bottom:32px; }
.st-breadcrumb a { text-decoration:none; }
.st-breadcrumb a:hover { text-decoration:underline; text-underline-offset:4px; }
.st-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:56px; }
.st-eyebrow { margin:0 0 16px; color:var(--dim); font-size:12px; letter-spacing:.04em; line-height:1.6; }
.st-hero h1 { margin:0 0 24px; }
.st-lede { margin:0; max-width:640px; color:var(--muted); font-size:17px; line-height:1.8; }
.st-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.st-button { display:inline-flex; justify-content:center; align-items:center; gap:24px; min-height:46px; padding:12px 18px; background:#fff; border:1px solid var(--border-md); text-decoration:none; font-size:14px; font-weight:500; line-height:1.5; }
.st-button:hover { border-color:var(--text); background:#f3f4f5; }
.st-button-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.st-button-primary:hover { background:#393936; color:#fff; }
.st-hero-meta { display:flex; flex-wrap:wrap; gap:12px 28px; padding-top:24px; margin-top:28px; border-top:1px solid var(--border); color:var(--muted); font-size:13px; }
.st-hero-meta strong { color:var(--text); font-weight:500; }
.st-hero-photo { margin:0; border:1px solid var(--border); background:#fff; }
.st-hero-photo img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.st-hero-photo figcaption { padding:14px 20px; border-top:1px solid var(--border); font-size:12px; color:var(--muted); }
.st-section { padding-top:40px; padding-bottom:40px; scroll-margin-top:20px; }
.st-section-heading { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-bottom:28px; }
.st-section h2 { font-size:clamp(28px,3vw,42px); margin:0 0 16px; }
.st-section-heading p { max-width:760px; margin:0; color:var(--muted); font-size:15px; }
.st-section-heading .st-eyebrow { margin-bottom:14px; font-size:12px; }
.st-toolbar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:18px; margin-bottom:24px; padding-block:18px; border-block:1px solid var(--border); }
.st-filters { display:flex; flex-wrap:wrap; gap:8px; }
.st-filters button { min-height:44px; padding:10px 18px; border:1px solid var(--border); background:#fff; color:var(--muted); font-size:13px; }
.st-filters button:hover { border-color:var(--border-md); }
.st-filters button[aria-pressed="true"] { color:#fff; background:var(--accent); border-color:var(--accent); }
.st-results { color:var(--muted); font-size:13px; margin:0; }
.st-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:stretch; }
.st-card { display:flex; flex-direction:column; min-width:0; border:1px solid var(--border); text-decoration:none; background:#fff; transition:border-color .18s; }
.st-card:hover { border-color:var(--border-md); }
.st-card-image { position:relative; border-bottom:1px solid var(--border); }
.st-card-image img { width:100%; aspect-ratio:2/1; object-fit:cover; }
.st-image-label { position:absolute; bottom:12px; left:16px; padding:4px 8px; background:#fff; border:1px solid var(--border); color:var(--muted); font-size:11px; }
.st-card-content { display:flex; flex:1; flex-direction:column; padding:28px; }
.st-card .st-eyebrow { margin-bottom:10px; font-size:12px; letter-spacing:0; }
.st-card h3 { font-size:30px; margin:0 0 16px; }
.st-card-desc { margin:0 0 24px; color:var(--muted); font-size:14px; line-height:1.8; }
.st-card-specs { display:grid; grid-template-columns:1.25fr 1fr; gap:16px; padding-top:20px; margin: auto 0 24px; border-top:1px solid var(--border); }
.st-card-specs dt { color:var(--dim); font-size:11px; margin-bottom:6px; }
.st-card-specs dd { margin:0; font-size:14px; font-weight:500; }
.st-card-action { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:44px; padding:10px 14px; border:1px solid var(--border-md); font-size:13px; }
.st-card:hover .st-card-action { background:var(--accent); border-color:var(--accent); color:#fff; }
.st-table-wrap { overflow-x:auto; border:1px solid var(--border); background:#fff; }
.st-compare { width:100%; min-width:820px; border-collapse:collapse; font-size:14px; text-align:left; }
.st-compare th,.st-compare td { padding:20px 22px; border-bottom:1px solid var(--border); vertical-align:top; }
.st-compare thead th { font-size:12px; font-weight:400; color:var(--muted); background:#f7f8f8; }
.st-compare tbody th { font-weight:500; white-space:nowrap; }
.st-compare tbody th a { text-decoration:none; text-underline-offset:4px; }
.st-compare tbody th a:hover { text-decoration:underline; }
.st-compare tbody td { color:var(--muted); }
.st-compare tbody tr:last-child > * { border-bottom:0; }
.st-compare tbody tr:hover { background:#fafafa; }
.st-table-note { color:var(--muted); font-size:12px; line-height:1.8; margin:16px 0 0; }
.st-table-scroll-hint { display:none; color:var(--muted); font-size:12px; margin-bottom:12px; }
.st-specs-heading { margin:32px 0 18px; font-size:21px; }
.st-radar-panel { background:#fff; border:1px solid var(--border); --series-a:#252624; --series-b:#557888; }
.st-radar-header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 28px; border-bottom:1px solid var(--border); }
.st-radar-header h3 { margin:0 0 6px; font-size:22px; }
.st-radar-header p { margin:0; color:var(--muted); font-size:14px; }
.st-radar-scale { flex-shrink:0; color:var(--dim); font-size:12px; }
.st-radar-controls { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:24px 28px; border-bottom:1px solid var(--border); background:#fafafa; }
.st-radar-control label { display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:12px; color:var(--muted); }
.st-radar-control select { width:100%; min-height:48px; padding:10px 14px; border:1px solid var(--border-md); border-radius:0; font:inherit; font-size:16px; color:var(--text); background:#fff; cursor:pointer; }
.st-radar-key { display:inline-block; width:26px; height:0; border-top:2px solid var(--series-a); position:relative; vertical-align:middle; }
.st-radar-key::after { content:''; position:absolute; width:6px; height:6px; background:var(--series-a); border-radius:50%; left:10px; top:-4px; }
.st-radar-key-b { border-color:var(--series-b); border-top-style:dashed; }
.st-radar-key-b::after { border:1.5px solid var(--series-b); background:#fff; border-radius:0; }
.st-radar-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center; }
.st-radar-plot { min-width:0; padding:16px 8px; }
.st-radar-svg { display:block; width:100%; max-width:660px; margin:auto; overflow:visible; }
.st-radar-ring { fill:none; stroke:#d9dde1; stroke-width:1; }
.st-radar-axis { stroke:#e4e7e9; stroke-width:1; }
.st-radar-label { fill:var(--muted); font-family:Inter,Arial,sans-serif; font-size:14px; }
.st-radar-series polygon { stroke-width:2; stroke-linejoin:round; }
.st-radar-a polygon { fill:var(--series-a); fill-opacity:.07; stroke:var(--series-a); }
.st-radar-b polygon { fill:var(--series-b); fill-opacity:.09; stroke:var(--series-b); stroke-dasharray:7 4; }
.st-radar-a circle { fill:var(--series-a); stroke:#fff; stroke-width:1; }
.st-radar-b rect { fill:#fff; stroke:var(--series-b); stroke-width:1.5; }
.st-radar-tick { fill:var(--muted); font-size:11px; paint-order:stroke; stroke:#fff; stroke-width:3px; stroke-linejoin:round; }
.st-radar-table { min-width:0; padding:24px 28px 24px 8px; }
.st-radar-scores { width:100%; border-collapse:collapse; text-align:left; font-size:13px; }
.st-radar-scores caption { text-align:left; margin-bottom:16px; font-size:12px; color:var(--dim); }
.st-radar-scores th,.st-radar-scores td { padding:12px 8px; border-bottom:1px solid var(--border); }
.st-radar-scores thead th { font-weight:500; vertical-align:bottom; background:#f7f8f8; font-size:12px; }
.st-radar-scores thead th:not(:first-child) { text-align:center; width:25%; }
.st-radar-scores thead .st-radar-key { display:block; margin:6px auto 10px; }
.st-radar-scores a { text-decoration:none; text-underline-offset:4px; white-space:nowrap; }
.st-radar-scores a:hover { text-decoration:underline; }
.st-radar-scores tbody th { font-weight:400; color:var(--muted); }
.st-radar-scores td { text-align:center; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.st-radar-denominator { font-weight:400; font-size:11px; color:var(--dim); }
.st-radar-note { margin:0; padding:20px 28px; border-top:1px solid var(--border); color:var(--muted); font-size:12px; line-height:1.8; }
.st-sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.st-resource-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.st-resource { padding:28px; background:#fff; border:1px solid var(--border); text-decoration:none; }
.st-resource:hover { border-color:var(--border-md); }
.st-resource svg { width:40px; height:40px; display:block; margin-bottom:20px; }
.st-resource h3 { font-size:21px; margin:0 0 12px; }
.st-resource p { font-size:14px; line-height:1.8; color:var(--muted); margin:0 0 22px; }
.st-resource span { display:block; font-size:13px; }
.st-faq { border-top:1px solid var(--border); background:#fff; }
.st-faq details { padding:22px 24px; border:1px solid var(--border); border-top:0; }
.st-faq summary { cursor:pointer; font-size:16px; font-weight:500; }
.st-faq p { max-width:960px; margin:16px 0 0; font-size:14px; color:var(--muted); line-height:1.8; }
.st-faq a { text-underline-offset:4px; }
.st-cta { display:flex; justify-content:space-between; align-items:center; gap:28px; padding:32px; background:#fff; border:1px solid var(--border); }
.st-cta h2 { margin:0 0 12px; font-size:28px; }
.st-cta p { margin:0; color:var(--muted); font-size:14px; }
.st-cta .st-button { flex-shrink:0; }
@media(max-width:1100px) {
  .st-radar-layout { grid-template-columns:1fr; }
  .st-radar-table { padding:0 28px 28px; }
  .st-radar-scores thead th:not(:first-child) { width:27%; }
  .st-hero-grid { gap:32px; }
  .st-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .st-resource-grid { grid-template-columns:1fr; }
}
@media(max-width:800px) {
  .st-table-scroll-hint { display:block; }
  .st-hero-grid { grid-template-columns:1fr; }
  .st-hero-photo img { aspect-ratio:16/9; }
  .st-hero { padding-top:108px; padding-bottom:24px; }
  .st-section { padding-block:28px; }
  .st-cta { align-items:flex-start; flex-direction:column; }
}
@media(max-width:600px) {
  .st-radar-header { display:block; padding:20px 16px; }
  .st-radar-scale { display:block; margin-top:10px; }
  .st-radar-controls { padding:20px 16px; gap:16px; grid-template-columns:1fr; }
  .st-radar-plot { padding:12px 0; }
  .st-radar-label { font-size:18px; }
  .st-radar-tick { font-size:15px; }
  .st-radar-table { padding:0 12px 20px; }
  .st-radar-scores { font-size:12px; }
  .st-radar-scores th,.st-radar-scores td { padding:12px 6px; }
  .st-radar-scores thead th { font-size:11px; }
  .st-radar-denominator { display:none; }
  .st-radar-note { padding:16px; }
  .st-grid { grid-template-columns:1fr; }
  .st-card-content { padding:24px; }
  .st-lede { font-size:15px; }
  .st-actions { flex-direction:column; align-items:stretch; }
  .st-filters { gap:6px; }
  .st-filters button { padding:10px 12px; font-size:12px; }
  .st-table-wrap { margin-inline:-4px; }
  .st-resource,.st-cta { padding:24px; }
  .st-faq details { padding:20px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .st-card { transition:none; } }

/* Steel names include both specification and surface condition. */
.st-card h3 { font-size:28px; margin-bottom:8px; }
.st-card-name { min-height:42px; margin:0 0 18px; color:var(--dim); font-size:12px; line-height:1.7; }
.st-radar-scores a { white-space:normal; }
.st-anchor { display:block; scroll-margin-top:130px; }
@media(max-width:600px) {
  .st-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  .st-card-name { min-height:0; }
  .st-radar-scores thead a { text-decoration:underline; }
  .st-radar-scores thead a > span { display:none; }
}