/* About STAMP. Every rule is scoped to a class starting "as-". */

.as-lede { max-width: 700px; margin-left: auto; margin-right: auto; font-size: 18px; }
.as-split { gap: 64px 80px; }
.as-text h2 { margin-bottom: 24px; font-family: var(--font-head); font-size: clamp(32px, 4.2vw, 48px); line-height: 1.15; letter-spacing: -.025em; }
.as-text > p:not(.eyebrow) { font-size: 17px; line-height: 1.65; }
.as-text strong { color: #475569; }

/* Check-mark lists */
/* Every bulleted list has a heading that says what it is, so a skimmer can read it alone (owner, 2026-11-04) */
.as-part h4.as-list-head { margin: 24px 0 10px; font-family: var(--font-body); font-size: 17px; font-weight: 700; letter-spacing: 0; color: var(--navy-text); }
.as-checks { display: grid; gap: 8px; margin: 0; }
/* Plain round bullets, not check marks or crosses: icon bullets read as sales copy (owner, 2026-11-04) */
.as-checks li, .as-gaps li { position: relative; padding-left: 20px; color: var(--navy-text); }
.as-checks li::before, .as-gaps li::before { content: ""; position: absolute; left: 3px; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: #7d8ea6; }
.as-checks .as-abbr { white-space: nowrap; }

/* "Safety is a feedback control problem." */
/* A short pull-quote card: generous padding above and below, the heading and its line kept together as one unit.
   The heading rule is scoped under .as-part so it beats ".as-part h3", whose 56px top margin is for section headings. */
.as-callout { margin-top: 32px; padding: 40px 32px; border-left: 4px solid var(--steel); border-radius: 0 var(--radius) var(--radius) 0; background: #eef3f9; }
.as-part .as-callout h3 { margin: 0 0 8px; font-family: var(--font-head); font-size: 24px; font-weight: 600; }
.as-callout p { margin: 0; font-size: 17px; line-height: 1.55; }

/* Control Structure Model beside "What is STAMP?": a card holding an SVG diagram */
.as-csm { margin: 0; padding: 28px 28px 24px; border-radius: 20px; background: #fff; box-shadow: var(--shadow); text-align: center; }
.as-csm-title { margin: 0 0 18px; font-size: 22px; font-weight: 600; color: var(--navy-text); }
.as-csm .as-diagram-csm { max-width: 560px; margin: 0 auto; }
.as-csm figcaption { margin-top: 16px; font-size: 15px; color: var(--text); }

/* Parts 2 and 3: the text that used to sit in the "Learn about STAMP" panel, now sections of their own */
.as-part h3 { margin: 56px 0 16px; font-family: var(--font-head); font-size: 28px; letter-spacing: -.01em; }
.as-part .split h3, .as-part .section-head h3 { margin-top: 0; }
#control-loop .container > p, .as-flawed p:not(.pull-quote) { font-size: 16px; line-height: 1.7; }
#control-loop .container > p strong, .as-flawed p strong, .as-part .as-text p strong { color: var(--navy-text); }
.as-figure { justify-self: center; width: auto; max-width: 100%; border-radius: 12px; }
/* Term explorer: the terms open one at a time, and the open one lights up its part of the loop beside it */
/* Same hand cue as "Choose an example to fill in the loop" */
.as-part .as-tx-hint { display: flex; align-items: center; gap: 8px; margin: -6px 0 20px; font-size: 15px; font-weight: 600; color: var(--navy-text); }
.as-tx-hint .icon { flex: none; width: 18px; height: 18px; color: var(--steel); transform: scaleY(-1); } /* flipped so the finger points down at the terms */
.as-tx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 48px; align-items: start; margin-bottom: 40px; }
.as-tx-cards { display: grid; gap: 10px; }
.as-tx-term { border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.as-tx-term > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 600; color: var(--navy-text); }
.as-tx-term > summary::-webkit-details-marker { display: none; }
.as-tx-term > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: -4px 4px 0 0; border-right: 2px solid var(--steel); border-bottom: 2px solid var(--steel); transform: rotate(45deg); transition: transform .2s; }
.as-tx-term[open] { border-color: var(--steel); box-shadow: 0 0 0 3px var(--steel-soft); }
.as-tx-term[open] > summary::after { transform: rotate(225deg); margin-top: 4px; }
.as-tx-term p { margin: 0; padding: 0 18px 16px; font-size: 15px; line-height: 1.55; }
.as-tx-term[open] > p { cursor: pointer; } /* clicking the text closes the card (site.js) */
.as-tx-fig { margin: 0; }
.as-tx-fig [data-term], .as-tx-fig .lp-cycle { transition: opacity .2s; }
.as-tx-fig[data-active] [data-term] { opacity: .2; }
.as-tx-fig[data-active] .lp-cycle { opacity: .1; }
.as-tx-fig[data-active="controller"] [data-term~="controller"],
.as-tx-fig[data-active="ca"] [data-term~="ca"],
.as-tx-fig[data-active="dm"] [data-term~="dm"],
.as-tx-fig[data-active="pm"] [data-term~="pm"],
.as-tx-fig[data-active="fb"] [data-term~="fb"],
.as-tx-fig[data-active="cp"] [data-term~="cp"],
.as-tx-fig[data-active="uca"] [data-term~="uca"] { opacity: 1; }
/* Unsafe Control Action: the control action shows its unsafe versions, in red */
.as-tx-fig .as-tx-alt, .as-tx-fig[data-active="uca"] .as-tx-main { display: none; }
.as-tx-fig[data-active="uca"] .as-tx-alt { display: inline; }
/* The same loop gone wrong, beside the text about breakdowns */
/* The breakdown example: the loop figure floats right and the text wraps beside it, then runs full width below it */
.as-flawed { display: flow-root; margin-top: 24px; }
.as-flawed .as-flawed-fig { float: right; width: min(440px, 44%); margin: 4px 0 20px 48px; }
@media (max-width: 760px) { .as-flawed .as-flawed-fig { float: none; width: auto; max-width: 440px; margin: 0 auto 24px; } }
.as-flawed-fig figcaption { margin-top: 14px; text-align: center; font-size: 15px; }
.as-hcs-card { max-width: 640px; margin: 72px auto 0; }
.as-hcs-card .as-diagram-hcs { margin: 0 auto; }

/* "Builds on": the line under each part's heading naming the parts it needs */
.as-builds { margin: -12px 0 24px; font-size: 15px !important; color: var(--text); }
.as-builds strong { color: var(--navy-text) !important; font-weight: 600; }
.section-head .as-builds { margin: 0 0 16px; }
.as-intro { max-width: 820px; }

/* Page Overview: the six parts in two groups, each part a link with a line on what it covers */
.as-map { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1040px; margin: 0 auto; }
.as-map-group { padding: 28px 32px 24px; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.as-map-group .eyebrow { margin-bottom: 16px; }
/* Each part reads as a link: blue underlined title, a chevron at the right, and the whole row clickable with a tint on hover */
.as-map-list { display: grid; gap: 6px; margin: 0 -14px; }
.as-map-list li { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 10px 40px 10px 14px; border-radius: 10px; transition: background-color .15s; }
.as-map-list li::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-top: 2px solid var(--steel); border-right: 2px solid var(--steel); transform: rotate(45deg); transition: right .15s; }
.as-map-list li:hover { background: var(--steel-soft); }
.as-map-list li:hover::after { right: 13px; }
.as-map-list li:focus-within { outline: 3px solid var(--steel); outline-offset: -3px; }
.as-map-list a { font-weight: 600; font-size: 17px; color: #2f6fb5; text-decoration: underline; text-decoration-color: rgba(47, 111, 181, .35); text-underline-offset: 3px; }
.as-map-list a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.as-map-list a:focus-visible { outline: none; }
.as-map-list li:hover a { text-decoration-color: currentColor; }
.as-map-list p { margin: 2px 0 0; font-size: 15px; line-height: 1.5; }
.as-map-num { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--steel-text); color: #fff; font-size: 14px; font-weight: 600; }

/* The rail. Hidden until site.js finds the reader inside the parts. Wide screens: a card fixed in the left margin,
   with the parts' text moved over to make room. Narrower: a bar under the header that opens into the list. */
.as-rail { position: fixed; z-index: 40; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.as-rail.is-shown { opacity: 1; visibility: visible; }
.as-rail-title { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--steel-text); }
.as-rail-list { position: relative; display: grid; gap: 2px; }
.as-rail-list a { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--navy-text); text-decoration: none; }
.as-rail-list a:hover { background: var(--steel-soft); }
.as-rail-num { position: relative; display: grid; place-items: center; flex: none; width: 24px; height: 24px; border: 2px solid var(--steel); border-radius: 50%; background: #fff; color: var(--steel-text); font-size: 12px; font-weight: 700; }
.as-rail-break { margin: 8px 0 2px; padding-top: 8px; border-top: 1px solid var(--line); }
.as-rail-break a { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
/* Parts still ahead are greyed; the current part is filled; parts read get a tick in place of the number */
.as-rail-list li.is-ahead a { color: #64748b; }
.as-rail-list li.is-ahead a:hover { color: var(--navy-text); }
.as-rail-list li.is-ahead .as-rail-num { border-color: #cbd5e1; color: #64748b; }
.as-rail-list li.is-current a { background: var(--steel-soft); font-weight: 600; }
.as-rail-list li.is-current .as-rail-num { border-color: var(--steel-text); background: var(--steel-text); color: #fff; }
.as-rail-list li.is-read .as-rail-num { border-color: #3c8b5a; background: #3c8b5a; color: transparent; }
.as-rail-list li.is-read .as-rail-num::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.as-rail-toggle { display: none; }

@media (min-width: 1280px) {
  .as-rail { top: calc(var(--header-h) + 40px); left: max(var(--gutter), calc((100vw - var(--container)) / 2)); width: 210px; padding: 20px 14px 16px; border-radius: var(--radius); background: rgb(255 255 255 / 92%); box-shadow: var(--shadow); }
  .as-rail-title { padding-left: 8px; }
  .as-path .as-part > .container { padding-left: calc(var(--gutter) + 250px); }
}

@media (max-width: 1279.98px) {
  .as-rail { top: var(--header-h); left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .as-rail-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 10px var(--gutter); border: 0; background: none; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--navy-text); text-align: left; }
  .as-rail-toggle::after { content: ""; flex: none; width: 9px; height: 9px; margin: -4px 4px 0 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
  .as-rail-toggle[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: 4px; }
  .as-rail-now span { font-weight: 500; color: var(--text); }
  .as-rail-panel { display: none; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 4px var(--gutter) 16px; }
  .as-rail.is-open .as-rail-panel { display: block; }
  .as-rail-title { display: none; }
  /* Room for the bar when a link lands on a part */
  .as-path [id] { scroll-margin-top: 52px; }
}

/* Diagrams drawn as inline SVG (control loop, hierarchical control structure) */
.as-diagram { justify-self: center; display: block; width: 100%; height: auto; }
.as-diagram text { font-family: var(--font-body); }
.as-diagram-loop { max-width: 440px; }
.as-diagram .lp-ex, .as-diagram.is-example .lp-gen { display: none; }
.as-diagram.is-example .lp-ex { display: inline; }

/* Example buttons under the control loop: each refills the loop with one application */
.as-loop { justify-self: center; width: 100%; max-width: 440px; }
.as-loop-label { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 20px 0 10px; font-size: 15px; font-weight: 600; color: var(--navy-text); text-align: center; }
.as-loop-label .icon { flex: none; width: 18px; height: 18px; color: var(--steel); }
.as-loop-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
/* Filled, raised chips so they read as buttons; they lift a little under the pointer */
.as-loop-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border: 1px solid #a9c6ea; border-radius: 999px; background: #eaf2fc; color: var(--navy-text); font: 600 13px/1.2 var(--font-body); cursor: pointer; box-shadow: 0 1px 2px rgb(20 32 56 / 12%); transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s; }
.as-loop-btn .icon { width: 14px; height: 14px; color: var(--steel); }
.as-loop-btn:hover { border-color: var(--steel); background: #d6e6f8; box-shadow: 0 4px 10px rgb(20 32 56 / 14%); transform: translateY(-1px); }
.as-loop-btn:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; }
.as-loop-btn[aria-pressed="true"] { border-color: var(--navy-btn); background: var(--navy-btn); color: #fff; box-shadow: 0 2px 6px rgb(20 32 56 / 25%); transform: none; }
.as-loop-btn[aria-pressed="true"] .icon { color: #fff; }
.as-diagram-hcs { max-width: 460px; }

/* STAMP-based methods: two methods resting on the theory, with arrows for reactive and proactive */
.as-stamp-methods { display: grid; grid-template-columns: 1fr 1.15fr 1.15fr 1fr; grid-template-areas: "left cast stpa right" ". stamp stamp ."; gap: 0; max-width: 900px; margin: 28px auto 0; align-items: center; color: #fff; text-align: center; }
.asm-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 20px 16px; }
.asm-box strong { font-size: 28px; line-height: 1.15; color: #fff; }
.asm-box span:last-child { font-size: 19px; font-weight: 600; line-height: 1.25; }
.asm-tag { margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.asm-cast { grid-area: cast; align-self: stretch; min-height: 170px; margin-right: 6px; border-radius: 12px 12px 0 0; background: linear-gradient(160deg, #2f6fb5, #24578f); }
.asm-stpa { grid-area: stpa; align-self: stretch; min-height: 170px; margin-left: 6px; border-radius: 12px 12px 0 0; background: linear-gradient(160deg, #b35714, #8f430f); }
/* STAMP is the base the two methods stand on: wider than they are, joined to them with no gap, its top edge lit like a ledge */
.asm-stamp { position: relative; z-index: 1; grid-area: stamp; margin: 0 -22px; padding: 22px 28px 26px; border-top: 6px solid #b9c0ca; border-radius: 4px 4px 14px 14px; background: linear-gradient(180deg, #5c6472, #474e5b); box-shadow: 0 10px 22px rgb(20 32 56 / 22%); }
.asm-stamp span:last-child { max-width: 30ch; font-size: 20px; font-weight: 500; }
.asm-arrow { position: relative; z-index: 0; display: flex; flex-direction: column; justify-content: center; height: 132px; font-size: 14px; line-height: 1.3; }
.asm-arrow::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.asm-arrow strong { font-size: 17px; color: #fff; }
.asm-arrow-left { grid-area: left; padding: 0 10px 0 28%; }
.asm-arrow-left::before { background: linear-gradient(90deg, #3f74b4, #2a5891); clip-path: polygon(0 50%, 24% 0, 24% 18%, 100% 18%, 100% 82%, 24% 82%, 24% 100%); }
.asm-arrow-right { grid-area: right; padding: 0 28% 0 10px; }
.asm-arrow-right::before { background: linear-gradient(90deg, #9a4a10, #b35714); clip-path: polygon(100% 50%, 76% 0, 76% 18%, 0 18%, 0 82%, 76% 82%, 76% 100%); }

/* STAMP-Based Methods cards */
.as-methods { background: linear-gradient(180deg, #f8fafc, #eef2f6); }
.as-methods .as-stamp-methods { margin-bottom: 72px; }
.as-method-cards { max-width: 1140px; margin: 0 auto; gap: 20px; }
.as-method { display: flex; flex-direction: column; align-items: flex-start; padding: 32px; border-top: 8px solid var(--navy-bg); box-shadow: 0 4px 20px rgb(20 32 56 / 8%); }
.as-method .icon-tile { color: #fff; background: var(--navy-bg); }
.as-method-steel { border-top-color: var(--steel); }
.as-method-steel .icon-tile { background: var(--steel); }
.as-method-slate { border-top-color: #34527f; }
.as-method-slate .icon-tile { background: #34527f; }
.as-method h3 { margin: 20px 0 0; font-family: var(--font-head); font-size: 28px; font-weight: 600; }
.as-method .as-method-full { margin: 6px 0 16px; color: var(--steel-text); font-size: 14px; }
.as-method p { font-size: 16px; }
/* The text links come first and the button goes last, at the very bottom of each card. The cards are equal height,
   so the buttons line up across all three however the text links wrap */
.as-method-links { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: auto; }
.as-method-more { order: -1; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.as-method .btn { border-radius: 2px; }
.as-method .btn .icon { width: 16px; height: 16px; }

/* How STPA Works: steps that alternate either side of a line */
.as-steps-title { margin: 8px 0 56px; text-align: center; font-family: var(--font-head); font-size: 28px; }
.as-steps { position: relative; max-width: 900px; margin: 0 auto; }
/* Steps alternate sides of a centre line. Each card has its number on the line beside its middle, joined to it
   by a short tick, and tucks a little way up beside the card before it, so the list is shorter without the cards crowding */
.as-steps::before { content: ""; position: absolute; left: 50%; top: 40px; bottom: 40px; width: 2px; margin-left: -1px; background: #d9dee5; }
.as-steps li { position: relative; width: calc(50% - 48px); }
.as-steps li:nth-child(even) { margin-left: auto; }
.as-steps li + li { margin-top: -40px; }
.as-steps li::after { content: ""; position: absolute; top: 50%; right: -48px; width: 48px; height: 2px; margin-top: -1px; background: #b7d2f0; }
.as-steps li:nth-child(even)::after { right: auto; left: -48px; }
.as-step-card { position: relative; z-index: 1; padding: 22px 24px 18px; border-radius: 10px; background: #fff; box-shadow: 0 4px 20px rgb(20 32 56 / 7%); }
.as-step-card h4 { margin-bottom: 10px; font-size: 16px; font-weight: 600; color: #000; }
.as-step-card h4 a { color: inherit; text-decoration-color: var(--steel); text-underline-offset: 3px; }
.as-step-card h4 a:hover { color: var(--steel-text); }
.as-step-card p { margin: 0; font-size: 16px; color: #6b7280; }
.as-step-num { position: absolute; z-index: 2; top: 50%; right: -72px; display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; background: var(--steel-text); color: #fff; font-size: 16px; font-weight: 600; box-shadow: 0 0 0 5px #f8fafc; }
.as-steps li:nth-child(even) .as-step-num { right: auto; left: -72px; }
.as-steps-note { max-width: 740px; margin: 64px auto 0; text-align: center; font-size: 18px; }

/* What is STPA-Sec? */
.as-sec { background: linear-gradient(180deg, #f8fafc, #eef2f6); }
.as-sec .split { grid-template-columns: 5fr 7fr; }
.as-properties { margin: 0; padding: 32px 24px 28px; border-radius: 12px; background: #e3ecf5; box-shadow: 0 6px 24px rgb(20 32 56 / 7%); }
.as-diagram-gears { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
.as-properties figcaption { margin-top: 24px; text-align: center; font-size: 14px; }
.as-sec-box { display: flex; gap: 20px; margin-top: 32px; padding: 28px 24px; border: 1px solid #b9d0ea; border-radius: 10px; background: #e3ecf5; }
.as-sec-box .icon-tile { width: 40px; height: 40px; border-radius: 8px; background: var(--steel); color: #fff; font-size: 18px; }
.as-sec-box h3 { margin-bottom: 12px; font-family: var(--font-head); font-size: 22px; font-weight: 400; line-height: 1.3; }
.as-sec-box p { margin: 0; font-size: 14px; }

/* What is CAST? */
/* Part 6's "CAST in Depth" pill sits at the end of its intro, so the intro needs room below it before the two columns start (Part 4's centred head has the same 40-56px) */
#whatiscast .container > .as-text:first-child { margin-bottom: 44px; }
.as-cast { align-items: start; }
.as-cast-card { overflow: hidden; }
.as-cast-head { display: flex; gap: 16px; padding: 24px; background: var(--navy-bg); color: #cbd5e1; }
.as-cast-head .icon-tile { width: 40px; height: 40px; border-radius: 8px; background: #3a4a66; color: #fff; font-size: 18px; }
.as-cast-head h3 { margin: 6px 0 8px; color: #fff; font-size: 21px; font-weight: 600; }
.as-cast-head p { margin: 0; font-size: 15.5px; line-height: 1.5; }
.as-cast-body { padding: 32px; }
.as-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; }
.as-compare p { margin: 0; padding: 22px 16px; border: 1px solid #dde2e8; border-radius: 8px; background: #f3f4f6; text-align: center; color: var(--navy-text); font-size: 17px; font-weight: 600; line-height: 1.35; text-wrap: balance; }
.as-compare span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #56687f; }
.as-compare .as-compare-cast { border-color: #b9d0ea; background: #eaf2fb; }
/* "Beyond Human Error" is CAST's view, so it takes CAST's blue, not the grey of the "Traditional" box above it */
.as-beyond { display: flex; gap: 16px; padding: 20px; border: 1px solid #cfe0f2; border-radius: 10px; background: #f5f9fd; }
.as-beyond .icon-tile { width: 40px; height: 40px; border-radius: 50%; background: var(--navy-bg); color: #fff; font-size: 18px; }
.as-beyond h4 { margin-bottom: 6px; font-family: var(--font-head); font-size: 20px; font-weight: 600; }
.as-beyond p { margin: 0; font-size: 15.5px; line-height: 1.55; }

@media (max-width: 1100px) {
  .as-sec .split { grid-template-columns: 1fr; }
  .as-properties { max-width: 560px; margin: 0 auto; }
  .as-map { grid-template-columns: 1fr; max-width: 640px; }
}

@media (max-width: 900px) {
  .as-tx { grid-template-columns: 1fr; gap: 24px; }
  .as-tx-fig { order: -1; justify-self: center; width: 100%; max-width: 440px; }
}

@media (max-width: 760px) {
  .as-stamp-methods { grid-template-columns: 1fr 1fr; grid-template-areas: "left right" "cast stpa" "stamp stamp"; }
  .asm-arrow { margin-bottom: 8px; }
  .asm-stamp { margin: 0 -8px; }
  .asm-cast, .asm-stpa { min-height: 140px; }
  .asm-box strong { font-size: 24px; }
  .asm-box span:last-child, .asm-stamp span:last-child { font-size: 16px; }
  .asm-arrow { height: 104px; font-size: 13px; }
  .asm-arrow strong { font-size: 15px; }
  .as-part h3 { font-size: 24px; }
  .as-part .as-callout h3 { font-size: 21px; }
  .as-callout { padding: 28px 20px; }
  .as-callout p { font-size: 16px; }
  .as-map-group { padding: 24px 20px 20px; }
  .as-hcs-card { margin-top: 48px; }
  .as-steps { padding-left: 64px; }
  .as-steps::before { left: 24px; top: 24px; bottom: 24px; }
  .as-steps li, .as-steps li:nth-child(even) { width: auto; margin-left: 0; }
  .as-steps li + li { margin-top: 16px; }
  .as-steps li::after, .as-steps li:nth-child(even)::after { right: auto; left: -16px; width: 16px; }
  .as-step-num, .as-steps li:nth-child(even) .as-step-num { right: auto; left: -64px; }
  .as-compare { gap: 12px; }
  .as-cast-body { padding: 24px 20px; }
}

/* Part 1: accident models, the history of system safety engineering, and what models leave out */
.as-models { margin-top: 64px; }
.as-models .as-intro h3 { margin-top: 0; }
.as-models h3 { margin-top: 0; }
/* The FMEA paragraph and its list with the chain-of-events figure beside them; the figure drops below the text on narrower screens */
.as-models-lead { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; max-width: 1120px; margin: 4px 0 22px; }
.as-models-lead .as-gaps { margin-bottom: 0; }
.as-chain { margin: 0; padding: 18px 18px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; text-align: center; }
.as-chain-title { margin: 0 0 10px; font-size: 17px; font-weight: 600; color: var(--navy-text); }
.as-diagram-chain { display: block; width: 100%; max-width: 284px; height: auto; margin: 0 auto; }
.as-chain-steps { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; text-align: left; }
.as-chain-steps li { position: relative; display: flex; align-items: flex-start; text-wrap: pretty; gap: 10px; font-size: 15px; line-height: 1.35; color: var(--navy-text); }
.as-chain-steps span { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; background: #24344f; color: #fff; font-size: 12.5px; font-weight: 700; }
.as-chain-steps .as-chain-loss { font-weight: 600; color: #a5301f; }
/* A rail joins the numbers, so the key reads as one sequence running one way */
.as-chain-steps li:not(:last-child)::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: -8px; width: 2px; background: #b8c6d8; }
.as-chain-steps .as-chain-loss span { background: #c0392b; }
.as-chain figcaption { margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: var(--text); text-wrap: balance; }
.as-chain figcaption span { display: block; margin-top: 4px; font-size: 13px; color: #56687f; }
@media (max-width: 900px) {
  .as-models-lead { grid-template-columns: 1fr; gap: 28px; }
  .as-chain { width: 100%; max-width: 380px; margin: 0 auto; }
}
.as-gaps { display: grid; gap: 8px; margin: 0 0 20px; }
.as-gaps li { font-size: 16px; }
.as-hist { max-width: 1120px; margin: 40px auto 0; text-align: center; }
.as-hist-list { display: contents; }
/* Era cards on the top row; under each era, a strip naming the methods built for its systems.
   The cards and strips share one grid so each strip stays under its own era as the columns collapse. */
.as-hist-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-areas: "ax ax ax ax" "e1 e2 e3 e4" "c1 c2 c3 c4" "b1 b2 s s"; gap: 12px 16px; text-align: left; }
.as-hist-era:nth-child(1) { grid-area: e1; } .as-hist-era:nth-child(2) { grid-area: e2; } .as-hist-era:nth-child(3) { grid-area: e3; } .as-hist-era:nth-child(4) { grid-area: e4; }
.as-hist-c1 { grid-area: c1; } .as-hist-c2 { grid-area: c2; } .as-hist-c3 { grid-area: c3; } .as-hist-c4 { grid-area: c4; }
.as-hist-b1 { grid-area: b1; } .as-hist-b2 { grid-area: b2; }
/* Row 2: what each era was up against; row 3: the methods created for it (not a claim about what they can do today) */
/* Tinted, with an accent bar on the left, so the challenges don't fade into the white page between the white era cards */
.as-part .as-hist-chal { margin: 0; padding: 12px 16px 14px; border: 1px solid #c9d9ec; border-left: 3px solid var(--steel); border-radius: 4px 10px 10px 4px; background: #e9f1fa; font-size: 15px; line-height: 1.45; color: var(--navy-text); text-wrap: pretty; }
.as-part .as-hist-chal-now { border-color: #f0c39c; border-left-color: #de7a22; background: #fdeedf; }
.as-hist-row-label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #2f5d8f; }
.as-hist-chal-now .as-hist-row-label { color: #8a4510; }
.as-hist-note { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--text); }
.as-hist-built.as-hist-stamp { grid-area: s; }
.as-hist-era { position: relative; display: flex; flex-direction: column; padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
/* Progression: on wide screens a time axis runs above the four eras, a dot over each, ending in an arrowhead.
   Where the eras wrap (tablet, phone) the axis is hidden and a chevron sits in the gap between eras instead.
   The chevron is two borders of a rotated square, so its visible shape sits right of (or below) the box's centre;
   the offsets below put the visible shape in the middle of the gap. */
.as-hist-axis { grid-area: ax; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 16px; height: 18px; }
.as-hist-axis::before { content: ""; position: absolute; top: 8px; left: 12.5%; right: 6px; height: 2px; background: linear-gradient(90deg, #9fb3cc, #9fb3cc 50%, #e9a46a); }
.as-hist-axis::after { content: ""; position: absolute; top: 3px; right: 0; border: 6px solid transparent; border-left: 9px solid #e9a46a; border-right: 0; }
.as-hist-axis span { position: relative; z-index: 1; justify-self: center; width: 12px; height: 12px; margin-top: 3px; border: 2px solid #fff; border-radius: 50%; background: var(--steel); box-shadow: 0 0 0 1px #9fb3cc; }
.as-hist-axis .as-hist-axis-now { background: #de7a22; box-shadow: 0 0 0 1px #f0c39c; }
.as-hist-era + .as-hist-era::before { content: ""; display: none; position: absolute; top: 50%; left: -16.5px; width: 10px; height: 10px; margin-top: -5px; border-top: 2px solid #9fb3cc; border-right: 2px solid #9fb3cc; transform: rotate(45deg); }
.as-hist-years { font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--steel-text); }
.as-part .as-hist-era h4 { margin: 8px 0 10px; font-family: var(--font-body); font-size: 17px; font-weight: 600; letter-spacing: 0; }
.as-hist-era p { margin: 0 0 14px; font-size: 15px; line-height: 1.5; }
.as-hist-era p strong { color: var(--navy-text); }
.as-hist-now { border-color: #f0c39c; background: #fffaf5; }
.as-hist-built { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; align-items: center; gap: 6px 4px; margin: 0; padding: 10px 12px; border-top: 3px solid #9fb3cc; border-radius: 0 0 12px 12px; background: #f3f6fa; }
.as-hist-built span { padding: 3px 7px; border-radius: 999px; background: #fff; border: 1px solid #c9d5e4; font-size: 12.5px; font-weight: 600; color: var(--navy-text); }
.as-hist-built .as-hist-built-label { flex-basis: 100%; text-align: center; padding: 0; border: 0; background: none; font-size: 13.5px; color: #3d4f6b; }
.as-hist-stamp { border-top-color: #de7a22; background: #fffaf5; }
.as-hist-stamp .as-hist-built-label { color: #8a4510; }
.as-hist-stamp span:not(.as-hist-built-label) { border-color: #b35714; background: #b35714; color: #fff; }
/* "Every Model Leaves Something Out" sits in its own grey panel, so it doesn't read as part of the timeline above */
.as-mdl-block { max-width: 1040px; margin: 72px auto 0; padding: 40px 40px 44px; border-radius: var(--radius); background: #f3f4f6; }
/* The grey panel already closes Part 1, so less white space is needed below it before Part 2 */
@media (min-width: 761px) { #whatisstamp { padding-bottom: 72px; } }
.as-mdl-title { margin: 0 0 6px; text-align: center; font-family: var(--font-head); font-size: 24px; }
.as-mdl-quote { margin: 0 auto 24px; text-align: center; font-family: var(--font-head); font-size: 19px; font-style: italic; color: var(--navy-text); }
.as-mdl-quote span { display: block; margin-top: 4px; font-family: var(--font-body); font-size: 14px; font-style: normal; color: var(--text); }
.as-part .as-mdl-intro { max-width: 720px; margin: 0 auto 28px; text-align: center; font-size: 16.5px; line-height: 1.6; color: var(--text); }
.as-mdl-intro strong { color: var(--navy-text); }
/* After the cards: what the control structure emphasizes, and where it helps most */
.as-mdl-after { max-width: 760px; margin: 32px auto 0; }
.as-part .as-mdl-after p { margin: 0 0 14px; font-size: 16px; line-height: 1.65; }
.as-mdl-after .as-checks { margin-top: 0; }
.as-mdl-after .as-checks li { font-size: 15.5px; line-height: 1.55; }
.as-mdl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 960px; margin: 0 auto; }
.as-mdl { padding: 20px 18px 16px; border: 1px solid var(--line); border-top: 4px solid #9fb3cc; border-radius: 12px; background: #fff; }
.as-mdl h5 { margin: 0 0 8px; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--navy-text); }
.as-mdl p { margin: 0; font-size: 14.5px; line-height: 1.55; }
/* The panel is neutral grey, so the one blue-tinted card (Control Structure) stands out the way it did on white,
   without the outline, fill or shadow tricks that made it look like a button */
.as-mdl-stamp { border-color: #c6dbf3; border-top-color: var(--steel); background: #e4effb; }
@media (max-width: 1100px) {
  .as-hist-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "e1 e2" "c1 c2" "b1 b2" "e3 e4" "c3 c4" "s s"; }
  .as-hist-axis { display: none; }
  .as-hist-era + .as-hist-era::before { display: block; }
  .as-hist-era:nth-child(3)::before { display: none; }
  .as-mdl-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .as-hist-grid { grid-template-columns: 1fr; grid-template-areas: "e1" "c1" "b1" "e2" "c2" "b2" "e3" "c3" "e4" "c4" "s"; }
  .as-mdl-grid { grid-template-columns: 1fr; }
  .as-mdl-block { padding: 28px 16px 32px; }
  .as-hist-era + .as-hist-era::before { display: block !important; top: -13.5px; left: 50%; margin: 0 0 0 -5px; transform: rotate(135deg); }
}

/* Banner: quiet links on to the in-depth pages, for readers past the basics */
/* "Already know the basics?" sits centered directly above the two in-depth buttons */
.as-hero-more { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 20px 0 0; font-size: 15px; color: #4a5a72; text-align: center; }
.as-hero-links { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.as-deeper-card { display: flex; align-items: center; gap: 24px; max-width: 900px; margin: 48px auto 0; padding: 28px 32px; border-radius: var(--radius); background: var(--navy-bg); color: rgb(255 255 255 / 78%); box-shadow: var(--shadow); }
.as-deeper-card .icon-tile { flex: none; width: 52px; height: 52px; border-radius: 12px; background: #3a4a66; color: #fff; font-size: 24px; }
.as-part .as-deeper-card h3 { margin: 0 0 6px; color: #fff; font-size: 26px; }
.as-deeper-card p { margin: 0; font-size: 16px; }
.as-deeper-card .btn { flex: none; background: #fff; color: var(--navy-btn); border-color: #fff; }
.as-deeper-card .btn:hover { background: var(--steel-soft); }
@media (max-width: 760px) {
  .as-deeper-card { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 20px; }
}


/* ---- Dark mode, generated by tools/darkmode.py when the site is built. Don't edit this part in site/; change the light rule in src/, or add a hand-written dark rule. ---- */
@media (prefers-color-scheme: dark) {
  .as-text strong { color: #bbcbe3; }
  .as-checks li::before, .as-gaps li::before { background-color: #7d8ea6; }
  .as-callout { border-left-color: #4892dc; background-color: #1a202a; }
  .as-csm { background-color: #111620; }
  .as-tx-hint .icon { color: #7ebaf9; }
  .as-tx-term { background-color: #111620; }
  .as-tx-term > summary::after { border-right-color: #4892dc; border-bottom-color: #4892dc; }
  .as-tx-term[open] { border-color: #4892dc; }
  .as-map-group { background-color: #111620; }
  .as-map-list li::after { border-top-color: #4892dc; border-right-color: #4892dc; }
  .as-map-list li:focus-within { outline-color: #4892dc; }
  .as-map-list a { color: #8dc5ff; text-decoration-color: rgb(141 197 255 / .35); }
  .as-map-num { background-color: #2f6fb5; color: #ffffff; }
  .as-rail-num { border-color: #4892dc; background-color: #111620; }
  .as-rail-list li.is-ahead a { color: #aec0d9; }
  .as-rail-list li.is-ahead .as-rail-num { border-color: #39404b; color: #aec0d9; }
  .as-rail-list li.is-current .as-rail-num { border-color: #2f6fb5; background-color: #2f6fb5; color: #ffffff; }
  .as-rail-list li.is-read .as-rail-num { background-color: #3c8b5a; }
  .as-rail-list li.is-read .as-rail-num::after { border-color: #2a313c; }
  @media (min-width: 1280px) {
    .as-rail { background-color: rgb(17 22 32 / 92%); }
  }
  @media (max-width: 1279.98px) {
    .as-rail { background-color: #111620; }
  }
  .as-loop-label .icon { color: #7ebaf9; }
  .as-loop-btn { border-color: #35475d; background-color: #1b212b; box-shadow: 0 1px 2px rgb(0 0 0 / 46%); }
  .as-loop-btn .icon { color: #7ebaf9; }
  .as-loop-btn:hover { border-color: #4892dc; background-color: #232c36; box-shadow: 0 4px 10px rgb(0 0 0 / 52%); }
  .as-loop-btn:focus-visible { outline-color: #4892dc; }
  .as-loop-btn[aria-pressed="true"] { border-color: #8ba5d4; color: #ffffff; box-shadow: 0 2px 6px rgb(0 0 0 / 60%); }
  .as-loop-btn[aria-pressed="true"] .icon { color: #ffffff; }
  .as-stamp-methods { color: #ffffff; }
  .asm-box strong { color: #ffffff; }
  .asm-stamp { border-top-color: #414753; box-shadow: 0 10px 22px rgb(0 0 0 / 60%); }
  .asm-arrow strong { color: #ffffff; }
  .as-methods { background-image: linear-gradient(180deg, #141a24, #1b212b); }
  .as-method { border-top-color: #8fa5cd; box-shadow: 0 4px 20px rgb(0 0 0 / 34%); }
  .as-method .icon-tile { color: #ffffff; }
  .as-method-steel { border-top-color: #4892dc; }
  .as-method-slate { border-top-color: #86a6d7; }
  .as-method-slate .icon-tile { background-color: #34527f; }
  .as-steps::before { background-color: #2b313c; }
  .as-steps li::after { background-color: #2e3f51; }
  .as-step-card { background-color: #111620; box-shadow: 0 4px 20px rgb(0 0 0 / 31%); }
  .as-step-card h4 { color: #e8e8e8; }
  .as-step-card h4 a { text-decoration-color: #7ebaf9; }
  .as-step-card p { color: #b7bfcf; }
  .as-step-num { background-color: #2f6fb5; color: #ffffff; box-shadow: 0 0 0 5px #000000; }
  .as-sec { background-image: linear-gradient(180deg, #141a24, #1b212b); }
  .as-properties { background-color: #202631; box-shadow: 0 6px 24px rgb(0 0 0 / 31%); }
  .as-sec-box { border-color: #354353; background-color: #202631; }
  .as-sec-box .icon-tile { color: #ffffff; }
  .as-cast-head .icon-tile { background-color: #3a4a66; color: #ffffff; }
  .as-cast-head h3 { color: #ffffff; }
  .as-compare p { border-color: #343b46; background-color: #191f29; }
  .as-compare span { color: #b1c5df; }
  .as-compare .as-compare-cast { border-color: #354353; background-color: #1b212b; }
  .as-beyond { border-color: #333d48; background-color: #151b25; }
  .as-beyond .icon-tile { color: #ffffff; }
  .as-chain { background-color: #111620; }
  .as-chain-steps span { background-color: #24344f; color: #ffffff; }
  .as-chain-steps .as-chain-loss { color: #ffab99; }
  .as-chain-steps li:not(:last-child)::before { background-color: #3f4853; }
  .as-chain-steps .as-chain-loss span { background-color: #c0392b; }
  .as-chain figcaption span { color: #b1c5df; }
  .as-part .as-hist-chal { border-color: #363f4b; border-left-color: #4892dc; background-color: #1c222c; }
  .as-part .as-hist-chal-now { border-color: #553c25; background-color: #271f17; }
  .as-hist-row-label { color: #9acbff; }
  .as-hist-chal-now .as-hist-row-label { color: #ffb384; }
  .as-hist-era { background-color: #111620; }
  .as-hist-axis::before { background-image: linear-gradient(90deg, #414e5e, #414e5e 50%, #65452a); }
  .as-hist-axis::after { border-left-color: #5f452f; }
  .as-hist-axis span { border-color: #2a313c; box-shadow: 0 0 0 1px #000000; }
  .as-hist-axis .as-hist-axis-now { background-color: #de7a22; box-shadow: 0 0 0 1px #000000; }
  .as-hist-era + .as-hist-era::before { border-top-color: #414e5e; border-right-color: #414e5e; }
  .as-hist-now { border-color: #553c25; background-color: #141923; }
  .as-hist-built { border-top-color: #414e5e; background-color: #171d28; }
  .as-hist-built span { background-color: #111620; border-color: #394049; }
  .as-hist-built .as-hist-built-label { color: #b8cdef; }
  .as-hist-stamp { background-color: #141923; }
  .as-hist-stamp .as-hist-built-label { color: #ffb384; }
  .as-hist-stamp span:not(.as-hist-built-label) { background-color: #b35714; color: #ffffff; }
  .as-mdl-block { background-color: #191f29; }
  .as-mdl { border-top-color: #414e5e; background-color: #111620; }
  .as-mdl-stamp { border-color: #323f4d; border-top-color: #4892dc; background-color: #1e242b; }
  .as-hero-more { color: #b7c9e5; }
  .as-deeper-card .icon-tile { background-color: #3a4a66; color: #ffffff; }
  .as-part .as-deeper-card h3 { color: #ffffff; }
  .as-deeper-card .btn { background-color: #111620; color: #bbd6ff; border-color: #2a313c; }
}