/* One homepage stylesheet; shared public pages keep their own styles. */
:root {
  --paper: #f5f7fa;
  --blue: #174a67;
  --blue-hover: #11384e;
  --surface: #e7eef3;
  --small: .875rem;
  --body: 1.0625rem;
  --item: 1.25rem;
  --ink: #1e272c;
  --muted: #46535b;
  --line: #cfd3d3;
  --action: #174a67;
  --action-hover: #11384e;
  --on-action: #ffffff;
  --layout-gap: 4rem;
  --label-width: 20rem;
  --body-size: 1.0625rem;
  --small-size: .875rem;
  --title-size: clamp(2rem, 4.5vw, 3.5rem);
  --section-size: 2rem;
  --item-size: 1.25rem;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 6rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; background: var(--paper); color: var(--ink); font: var(--body-size)/1.65 "Segoe UI", "Arial Nova", Arial, sans-serif; }
a { color: var(--action); text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:hover { color: var(--action-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--action); outline-offset: 4px; }
.shell { width: min(calc(100% - 3rem), 82rem); margin-inline: auto; }
h1, h2, h3 { margin: 0 0 1rem; font-weight: 600; letter-spacing: -.025em; text-wrap: balance; }
h1 { max-width: 32ch; font-size: var(--title-size); line-height: 1.25; }
h2 { font-size: var(--section-size); line-height: 1.3; }
h3 { font-size: var(--item-size); line-height: 1.4; letter-spacing: -.015em; }
p { max-width: 66ch; margin: 0 0 1rem; text-wrap: pretty; }
p:last-child { margin-block-end: 0; }
.eyebrow { margin-block-end: 1rem; font-size: var(--small-size); font-weight: 600; color: var(--muted); }
.skip-link { position: fixed; z-index: 3; inset-block-start: .75rem; inset-inline-start: .75rem; padding: .75rem 1rem; background: var(--paper); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.site-header { position: sticky; z-index: 2; inset-block-start: 0; background: var(--paper); border-block-end: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; min-height: 4.5rem; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .625rem; color: var(--ink); font-size: 1.125rem; font-weight: 700; text-decoration: none; }
a.brand { min-height: 2.75rem; }
.brand-mark { width: 1.75rem; height: 1.75rem; flex: 0 0 1.75rem; background: currentColor; mask: url("/assets/steelkont-mark.svg") center/contain no-repeat; -webkit-mask: url("/assets/steelkont-mark.svg") center/contain no-repeat; }
.main-navigation { display: flex; align-items: center; gap: 1.5rem; margin-inline-start: auto; }
.main-navigation a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink); font-size: var(--small-size); font-weight: 600; text-decoration: none; }
.main-navigation a:hover { text-decoration: underline; }
.main-navigation .nav-cta { padding-inline: 1rem; border: 1px solid var(--line); border-radius: .375rem; }
.menu-button { display: none; align-items: center; gap: .5rem; min-height: 2.75rem; margin-inline-start: auto; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: .375rem; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.menu-icon { width: 1rem; height: 2px; background: currentColor; box-shadow: 0 -5px currentColor, 0 5px currentColor; }
.lead { color: var(--ink); line-height: 1.6; }
.note { color: var(--muted); font-size: var(--small-size); }
.site-footer { padding-block: 2rem; border-block-start: 1px solid var(--line); font-size: var(--small-size); color: var(--muted); }
.footer-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.legal { display: grid; justify-items: start; gap: .5rem; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (max-width: 62rem) {
  .menu-button { display: inline-flex; }
  .main-navigation { position: absolute; inset-block-start: 100%; inset-inline: 0; display: none; margin: 0; padding: 1rem 1.5rem; background: var(--paper); border-block-end: 1px solid var(--line); }
  .main-navigation.is-open { display: grid; gap: .5rem; }
  .main-navigation a { padding-inline: .75rem; }
}
@media (max-width: 40rem) {
  .shell { width: calc(100% - 2rem); }
  .header-inner { min-height: 4rem; }
  .hero { padding-block: 2.5rem; }
  h1 { line-height: 1.4; }
  h2 { font-size: 1.75rem; line-height: 1.4; }
  .button { width: 100%; }
  .legal { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .button { transition: background-color 140ms ease-out, transform 140ms ease-out; }
  .button:active { transform: scale(.96); }
}
@media (forced-colors: active) {
  .button { border: 1px solid ButtonText; }
  :focus-visible { outline-color: Highlight; }
}

/* Approved interactive sections: native radio and disclosure controls. */
.hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 4rem; padding-block: 4rem 6rem; }
.lead { font-size: 1.25rem; margin-block: 1.5rem 2rem; max-width: 43ch; }
.button { border: 0; font-size: 1rem; text-align: center; display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: .75rem 1.5rem; background: var(--blue); color: white; border-radius: .5rem; text-decoration: none; font-weight: 600; }
.button:hover { color: white; background: var(--blue-hover); }
.meta { margin-block-start: 1.25rem; color: var(--muted); font-size: var(--small); }
.model-demo { padding: 2rem; background: var(--surface); border-radius: 1rem; }
.sources { display: grid; grid-template-columns: .6fr 1fr 1fr; gap: .75rem; text-align: center; font-size: var(--small); }
.sources span { display: grid; align-items: center; padding: .75rem .5rem; background: var(--paper); border-radius: .5rem; }
.source-lines { width: 67%; height: 1.75rem; margin-inline: auto; border: solid var(--line); border-width: 0 1px 1px; position: relative; }
.source-lines::before, .source-lines::after { content: ""; position: absolute; left: 50%; width: 1px; background: var(--line); height: 100%; }
.source-lines::after { top: 100%; height: 1rem; }
.model-core { margin-block-start: 1rem; padding: 1.5rem; color: white; background: var(--blue); border-radius: .5rem; text-align: center; }
.model-core h2 { font-size: 1.75rem; max-width: 20ch; margin: .5rem auto .75rem; }
.model-core p { font-size: var(--small); margin-inline: auto; }
.model-choices { border: 0; margin: 1.5rem 0 0; padding: 0; min-width: 0; }
.model-choices legend { font-size: var(--small); margin-block-end: .75rem; color: var(--muted); }
.choice-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.choice-row label { display: inline-flex; gap: .5rem; align-items: center; cursor: pointer; border: 1px solid var(--line); border-radius: .5rem; padding: .625rem .75rem; min-height: 2.75rem; background: var(--paper); font-size: var(--small); }
.choice-row input { accent-color: var(--blue); margin: 0; width: 1rem; height: 1rem; }
.choice-row label:has(:checked) { border-color: var(--blue); background: white; box-shadow: inset 0 -2px var(--blue); }
.choice-row label:has(:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }
.choice-row label:hover { background: white; }
.direction-copy { margin-block-start: 1rem; min-height: 5.2em; }
.direction-copy p + p { margin-block-start: .75rem; }
@supports selector(:has(*)) {
  .direction-copy p { display: none; margin: 0; }
  .model-choices:has([value="analysis"]:checked) #analysis-copy,
  .model-choices:has([value="planning"]:checked) #planning-copy,
  .model-choices:has([value="diagnosis"]:checked) #diagnosis-copy { display: block; }
}
.diagram-caption { text-align: center; }
.questions-section { background: white; padding-block: 5rem; }
.section-hint { color: var(--muted); margin-block: 1rem 2rem; font-size: var(--small); }
.question-explorer { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 4rem; align-items: start; }
.dependency-map { margin: 0; padding: 2rem; background: var(--surface); border-radius: 1rem; }
.dependency-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(4rem, auto)); gap: 1.75rem .75rem; position: relative; }
.node { z-index: 1; display: grid; align-items: center; text-align: center; padding: .75rem .5rem; background: var(--paper); border: 1px solid var(--line); border-radius: .5rem; color: var(--blue); font-size: var(--small); overflow-wrap: break-word; }
.materials { grid-area: 1 / 2; }.order { grid-area: 2 / 1; }.operations { grid-area: 2 / 2; }.deadline { grid-area: 2 / 3; }.equipment { grid-area: 3 / 2; }
.wire { position: absolute; background: var(--line); }
.horizontal { top: 50%; left: 10%; width: 80%; height: 2px; }
.vertical { top: 10%; left: 50%; height: 80%; width: 2px; }
.question-explorer:has(.timing[open]) :is(.order, .operations, .deadline),
.question-explorer:has(.resources[open]) :is(.materials, .operations, .equipment),
.question-explorer:has(.decisions[open]) .node { color: white; background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 2px white, 0 0 0 3px var(--blue); }
.question-explorer:has(.timing[open]) .horizontal,
.question-explorer:has(.resources[open]) .vertical,
.question-explorer:has(.decisions[open]) .wire { background: var(--blue); }
figcaption { text-align: center; font-size: var(--small); color: var(--muted); margin-block-start: 1.5rem; }
.question-list { display: grid; gap: 1rem; }
.question { border-block-end: 1px solid #d4dfe5; padding-block-end: 1rem; }
summary { cursor: pointer; min-height: 2.75rem; }
.question summary { padding: .5rem .5rem .5rem 0; color: var(--blue); font-size: var(--item); font-weight: 600; }
.question summary span { display: inline; }
.question small { display: block; margin-block-start: .5rem; color: var(--ink); font-weight: 400; font-size: var(--body); }
.question p { margin-block-start: .75rem; color: var(--muted); }
.question summary:hover, .roadmap summary:hover .step-title { color: var(--blue-hover); text-decoration: underline; text-underline-offset: .2em; }
.explorer-note { color: var(--muted); margin-block-start: 2rem; max-width: 75ch; }
.approach { padding-block: 5rem; }
.approach-intro { margin-block-start: 1.5rem; max-width: 75ch; }
.roadmap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; padding: 1.5rem; margin: 0; list-style: none; background: var(--surface); border-radius: 1rem; }
.roadmap li { min-width: 0; }
.roadmap summary { list-style: none; padding: .5rem; }
.roadmap summary::-webkit-details-marker { display: none; }
.step-number { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-block-end: 1.25rem; border: 1px solid var(--blue); border-radius: 50%; color: var(--blue); font-size: var(--small); font-variant-numeric: tabular-nums; }
.step-title { display: block; font-size: var(--item); line-height: 1.4; font-weight: 600; color: var(--blue); margin-block-end: .75rem; }
.step-description { display: block; }
.disclosure-label { display: inline-block; margin-block-start: 1.25rem; color: var(--blue); font-size: var(--small); text-decoration: underline; text-underline-offset: .25em; }
.disclosure-label::before { content: "+ "; }
.roadmap details[open] .disclosure-label::before { content: "− "; }
.roadmap details[open] .step-number { background: var(--blue); color: white; }
.roadmap details > p { margin: .75rem .5rem .5rem; color: var(--muted); font-size: var(--small); }
.approach-bottom { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-block-start: 2rem; }
.approach-bottom a { display: inline-flex; align-items: center; min-height: 2.75rem; flex-shrink: 0; }
@media (max-width: 70rem) {
  .hero, .question-explorer { gap: 2rem; }
  .model-demo, .dependency-map { padding: 1.5rem; }
  .roadmap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 56rem) {
  .hero, .question-explorer { grid-template-columns: 1fr; }
  .hero-copy { max-width: 38rem; }
  .hero { padding-block: 2rem 3rem; }
  .questions-section, .approach { padding-block: 3rem; }
  .approach-bottom { align-items: start; flex-direction: column; gap: 1rem; }
}
@media (max-width: 35rem) {
  .shell { width: calc(100% - 2rem); }
  .model-demo, .dependency-map { padding: 1rem; }
  .model-core { padding: 1.25rem .75rem; }
  .model-core h2 { font-size: 1.5rem; }
  .sources { gap: .5rem; grid-template-columns: .5fr 1fr 1fr; }
  .sources span { padding: .5rem .25rem; overflow-wrap: break-word; }
  .choice-row { gap: .75rem; }
  .choice-row label { flex-grow: 1; }
  .dependency-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(3.5rem, auto)); gap: 1.5rem .75rem; }
  .node { padding: .75rem .25rem; }
  .order { grid-area: 1 / 1 / 2 / 3; }
  .materials { grid-area: 2 / 1; }
  .equipment { grid-area: 2 / 2; }
  .operations { grid-area: 3 / 1 / 4 / 3; }
  .deadline { grid-area: 4 / 1 / 5 / 3; }
  .horizontal { top: 37%; }
  .roadmap { grid-template-columns: 1fr; gap: 1rem; padding: 1rem; }
  .button { width: 100%; }
  .direction-copy { min-height: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .button { transition: background-color 140ms ease-out, transform 140ms ease-out; }
  .button:active { transform: scale(.96); }
  .node, .step-number { transition: background-color 140ms ease-out, color 140ms ease-out, border-color 140ms ease-out; }
  .wire { transition: background-color 140ms ease-out; }
}
@media (forced-colors: active) {
  :focus-visible, .choice-row label:has(:focus-visible) { outline-color: Highlight; }
  .button, .model-core, .sources span { border: 1px solid ButtonText; }
  .choice-row label:has(:checked) { outline: 2px solid Highlight; }
  .question-explorer:has(.timing[open]) :is(.order, .operations, .deadline),
  .question-explorer:has(.resources[open]) :is(.materials, .operations, .equipment),
  .question-explorer:has(.decisions[open]) .node { outline: 2px solid Highlight; }
}

h1 { line-height: 1.4; }
summary, .choice-row label { touch-action: manipulation; }
.question-list { padding: 0; margin: 0; list-style: none; }
.explorer-note { margin-inline-start: 0; }
/* Compact principles and a single diagnosis-to-subscription section. */
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-block-start: 1.5rem; }
.principles summary, .effect-note summary { padding-block: .625rem; color: var(--blue); font-weight: 600; }
.principles summary:hover, .effect-note summary:hover { text-decoration: underline; text-underline-offset: .2em; }
.principles p, .effect-note p { margin-block: .75rem 0; color: var(--muted); font-size: var(--small); }
.approach-note { margin-block: 1.25rem 0; color: var(--muted); font-size: var(--small); }
.engagement { padding-block: 4rem; background: white; }
.engagement-intro { max-width: 75ch; margin-block: 1.25rem 2rem; }
.commercial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding: 2rem; background: var(--surface); border-radius: 1rem; scroll-margin-top: 6rem; }
.commercial-grid article { min-width: 0; }
.commercial-grid h3 { margin-block-end: 1rem; }
.price-value { font-size: 2rem; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; color: var(--blue); margin: 0; min-height: 4.75rem; }
.price-value span { display: block; font-size: var(--small); font-weight: 400; color: var(--muted); }
.commercial-grid .term { font-weight: 600; margin-block: 1rem; }
.commercial-grid article > p:not(.price-value):not(.term) { color: var(--muted); }
.commercial-grid .button { margin-block-start: .5rem; }
.terms-bottom { display: flex; align-items: start; gap: 3rem; justify-content: space-between; margin-block-start: 1.25rem; }
.terms-bottom > * { flex: 1; min-width: 0; }
.terms-bottom .note { padding-block-start: .625rem; }
@media (max-width: 62rem) {
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .principles { gap: 1rem; }
  .commercial-grid { gap: 1.5rem; padding: 1.5rem; }
  .price-value { font-size: 1.5rem; }
}
@media (max-width: 45rem) {
  .principles, .commercial-grid { grid-template-columns: 1fr; }
  .principles { gap: .5rem; }
  .commercial-grid { gap: 2rem; padding: 1.5rem; }
  .commercial-grid article + article { border-block-start: 1px solid var(--line); padding-block-start: 1.5rem; }
  .price-value { font-size: 1.75rem; min-height: 0; }
  .terms-bottom { flex-direction: column; gap: .75rem; }
  .engagement { padding-block: 2.5rem; }
}
.footer-grid > * { min-width: 0; }
.footer-contacts { display: grid; justify-items: start; gap: .5rem; scroll-margin-top: 6rem; }
.footer-contacts strong { color: var(--ink); font-weight: 600; }
.footer-contacts a { display: inline-flex; align-items: center; min-height: 2.75rem; overflow-wrap: anywhere; }