/* Internet & Big Tech. Every class here starts with "ibt-". The Page Overview and the side rail
   reuse About STAMP's classes (as-map, as-path, as-rail, as-part), so about-stamp.css loads too. */

/* Banner: the owner's photo (internet-and-big-tech.webp) is cropped by 133px on the left, to 1486 x 971,
   so that the engineer (body and tablet, rows 582-750) stands exactly on its centre line. The centred
   title, subtitle, cue and two equal buttons share that line, and the photo is placed so that he walks
   behind the pair of buttons, centred under the title:
   - From 861px up the photo covers the banner by width. The vertical crop puts his feet about 12px above
     the banner's bottom edge: his feet sit 206 / 1486 = 13.86vw above the image's bottom edge, so
     100% + 13.86vw - 14px (2px of it for the scrollbar, which 100vw includes); min(..., 0px) keeps the
     image's top edge from coming into view. The cable trays at the top of the photo are what gets cropped.
   - Up to 860px the photo is drawn at 118% of the banner's height, or at the screen's width if that is
     larger (65.34vw is 100vw x 971 / 1486), and 95% down, which stands him just above the buttons, since
     narrow screens leave no room beside them.
   His head and legs stay in view at every width. */
.ibt-hero { background-position: 50% 60%; background-position: 50% min(calc(100% + 13.86vw - 14px), 0px); }
@media (max-width: 860px) {
  .ibt-hero { background-size: auto max(118%, 65.34vw); background-position: 50% 95%; }
}
/* A soft white fade behind the title and subtitle, so the text reads more easily over the photo. It is centred on
   the text and fades out before the engineer and the busy rack lights at the edges. */
.ibt-hero { position: relative; background-color: #d5d8da; }
/* The banner's colour before the photo loads: the photo's measured average (#d3d5d7 over the band that wide screens
   show, #d6d9da over the whole photo), in place of the site's light blue, so the banner doesn't change colour as it loads.
   The page also preloads the photo (the "preload:" line at the top of the page source). */
.ibt-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 27% 42% at 50% 52%, rgb(248 250 252 / 70%) 0%, rgb(248 250 252 / 45%) 55%, rgb(248 250 252 / 0%) 100%); }
.ibt-hero > .container { position: relative; }
@media (max-width: 760px) {
  .ibt-hero::before { background: radial-gradient(ellipse 58% 40% at 50% 50%, rgb(248 250 252 / 70%) 0%, rgb(248 250 252 / 45%) 55%, rgb(248 250 252 / 0%) 100%); }
}
.ibt-hero-btns .btn { width: 226px; padding: 10px 16px; font-size: 15px; white-space: nowrap; }
/* The cue above the two buttons: they lead back to the basics, before this page. Cue and buttons sit
   together as one group, as on About STAMP's banner ("Already know the basics?"), so the engineer walks
   behind the pair: his head shows above the buttons and his legs below (owner, 2026-11-04: grouping first). */
.ibt-hero-basics { margin: 24px 0 0; font-size: 15px; font-weight: 600; color: #4a5a72; }
.page-hero .ibt-hero-btns { margin-top: 10px; }
@media (min-width: 761px) {
  .ibt-hero-btns { column-gap: 12px; }
}
@media (max-width: 760px) {
  .ibt-hero-btns { flex-direction: row; align-items: stretch; column-gap: 10px; }
  .ibt-hero-btns .btn { width: calc(50% - 5px); max-width: 220px; padding: 10px 10px; font-size: 15px; line-height: 1.35; white-space: normal; }
  .ibt-hero-basics { margin-top: 20px; }
}


.ibt-text { max-width: 860px; margin-left: auto; margin-right: auto; }
/* In the parts, the text column lines up with the cards' left edge, not centred above them. */
.as-part .ibt-text { margin-left: 0; margin-right: 0; }
.ibt-text h2 { margin: 0 0 20px; font-family: var(--font-head); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.18; letter-spacing: -.02em; }
.ibt-text > p:not(.eyebrow) { font-size: 17px; line-height: 1.65; }
.ibt-text h3 { margin: 40px 0 12px; font-family: var(--font-head); font-size: 24px; line-height: 1.3; }
.ibt-text p strong { color: var(--navy-text); }
.ibt-punch { font-family: var(--font-head); font-size: 22px; line-height: 1.4; color: var(--navy-text); }

/* ---------------------------------------------------------------- the race, step by step (tabs) */
.ibt-race { max-width: 980px; margin: 28px auto 32px; padding: 28px 28px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-tint); }
.ibt-race-title { margin: 0 0 18px; font-family: var(--font-head); font-size: 22px; color: var(--navy-text); }
.ibt-race .tab-list { justify-content: flex-start; margin-bottom: 22px; }
.ibt-race .tab-list [role="tab"] { padding: 8px 14px; font-size: 14.5px; }
/* Drawn like a control structure: the two controllers side by side, the DNS record they act on below
   them, and under each controller a control arrow down to the record (left, darker under the box that
   acts in that step) and a faint feedback arrow up from it (right). Both are drawn in the 44px gap
   between the rows: the box's ::before/::after make the control arrow, its name's the feedback arrow. */
.ibt-race-state { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 14px; }
.ibt-race-state .ibt-record { grid-column: 1 / -1; }
.ibt-race-state .ibt-box:not(.ibt-record)::before,
.ibt-race-state .ibt-box:not(.ibt-record)::after,
.ibt-race-state .ibt-box:not(.ibt-record) > .ibt-box-name::before,
.ibt-race-state .ibt-box:not(.ibt-record) > .ibt-box-name::after { content: ""; position: absolute; pointer-events: none; }
.ibt-race-state .ibt-box:not(.ibt-record)::before { left: calc(50% - 12px); top: calc(100% + 7px); width: 2px; height: 22px; margin-left: -1px; background: #a7b4c4; }
.ibt-race-state .ibt-box:not(.ibt-record)::after { left: calc(50% - 12px); top: calc(100% + 28px); margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top: 8px solid #a7b4c4; }
.ibt-race-state .ibt-box.is-active::before { background: var(--navy-btn); }
.ibt-race-state .ibt-box.is-active::after { border-top-color: var(--navy-btn); }
.ibt-race-state .ibt-box:not(.ibt-record) > .ibt-box-name::before { left: calc(50% + 12px); top: calc(100% + 7px); margin-left: -6px; border: 6px solid transparent; border-top: 0; border-bottom: 8px solid #d3dbe5; }
.ibt-race-state .ibt-box:not(.ibt-record) > .ibt-box-name::after { left: calc(50% + 12px); top: calc(100% + 15px); width: 2px; height: 22px; margin-left: -1px; background: #d3dbe5; }
.ibt-box { position: relative; padding: 16px 16px 14px; border: 1px solid #c9d4e0; border-radius: var(--radius-sm); background: #fff; }
.ibt-box-name { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--navy-text); }
.ibt-box p { margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
.ibt-box p:last-child { margin-bottom: 0; }
.ibt-box.is-active { border-color: var(--navy-btn); box-shadow: 0 0 0 2px var(--navy-btn); }
.ibt-quiet { color: #56687f; }
.ibt-believes { padding: 7px 10px; border-radius: 8px; background: var(--steel-soft); font-size: 14px !important; color: var(--navy-text); }
.ibt-believes.is-wrong { background: #fbeae8; color: #a3302a; }
.ibt-believes b { font-weight: 700; }
.ibt-record { background: #f2f6fb; }
.ibt-plan { font-weight: 600; color: var(--navy-text); }
.ibt-addrs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ibt-addrs span { display: inline-block; padding: 2px 9px; border-radius: 999px; background: #dfeee4; font-size: 12.5px; font-weight: 600; color: #1f6b3d; }
.ibt-addrs .ibt-none { background: #fbeae8; color: #a3302a; }
.ibt-race-note { margin: 16px 0 0; font-size: 15.5px; line-height: 1.6; }

/* ---------------------------------------------------------------- the clean-up as one control loop
   Controller box on top, controlled process below (a tinted box), control action down on the left and
   feedback up on the right. The feedback arrow is dashed red: the read that didn't happen. */
.ibt-loop { max-width: 640px; margin: 36px auto 36px; }
.ibt-loop:last-child { margin-bottom: 0; }
.ibt-text > p.ibt-close { margin: 0; }
/* The border goes round the diagram only; the caption sits under it, outside. */
.ibt-loop-frame { padding: 24px 26px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.ibt-rule { padding: 7px 10px; border-radius: 8px; background: #eef2f7; font-size: 14px !important; color: var(--navy-text); }
.ibt-rule b { font-weight: 700; }
.ibt-loop-title { margin: 0 0 16px; font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--navy-text); text-align: center; }
.ibt-loop-box { padding: 14px 16px 12px; border: 1.5px solid var(--navy-btn); border-radius: var(--radius-sm); background: #fff; }
.ibt-loop-proc { border-color: #9fb1c7; background: #f2f6fb; }
.ibt-loop-box p { margin: 0 0 6px; font-size: 15px; line-height: 1.5; }
.ibt-loop-box p:last-child { margin-bottom: 0; }
.ibt-loop-kind { font-size: 12px !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #56687f; }
.ibt-loop-name { font-size: 17px !important; font-weight: 700; color: var(--navy-text); }
.ibt-actual { padding: 7px 10px; border-radius: 8px; background: #dfeee4; font-size: 14px !important; color: #1f6b3d; }
.ibt-loop-links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ibt-loop-link { display: flex; align-items: center; gap: 10px; min-height: 92px; padding: 6px 0; }
.ibt-loop-link p { margin: 0; font-size: 14px; line-height: 1.45; }
.ibt-loop-link p b { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--navy-text); }
.ibt-loop-arrow { position: relative; flex: none; align-self: stretch; width: 14px; margin-left: 18px; }
.ibt-loop-arrow::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; border-left: 2px solid var(--navy-btn); }
.ibt-loop-arrow::after { content: ""; position: absolute; left: 1px; border: 6px solid transparent; }
.ibt-loop-ca .ibt-loop-arrow::before { bottom: 8px; }
.ibt-loop-ca .ibt-loop-arrow::after { bottom: 0; border-bottom: 0; border-top: 8px solid var(--navy-btn); }
.ibt-loop-fb .ibt-loop-arrow::before { top: 8px; border-left: 2px dashed #a3302a; }
.ibt-loop-fb .ibt-loop-arrow::after { top: 0; border-top: 0; border-bottom: 8px solid #a3302a; }
.ibt-loop-fb p { color: #a3302a; }
.ibt-loop-fb p b { color: #a3302a; }
/* Feedback as a list, one item per line; what the controller didn't get is marked "Missing". */
.ibt-loop-txt { font-size: 14px; line-height: 1.45; }
.ibt-loop-txt > b { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--navy-text); }
.ibt-loop-fb .ibt-loop-txt, .ibt-loop-fb .ibt-loop-txt > b { color: #a3302a; }
.ibt-loop-txt ul { margin: 2px 0 0; padding-left: 16px; list-style: disc; }
.ibt-loop-txt li { margin: 0 0 3px; }
.ibt-loop-txt li:last-child { margin-bottom: 0; }
/* A control action that was never given: dashed red, like missing feedback. */
.ibt-loop-ca.is-missing .ibt-loop-arrow::before { border-left: 2px dashed #a3302a; }
.ibt-loop-ca.is-missing .ibt-loop-arrow::after { border-top-color: #a3302a; }
.ibt-loop-ca.is-missing .ibt-loop-txt, .ibt-loop-ca.is-missing .ibt-loop-txt > b { color: #a3302a; }
.ibt-loop-uca { margin: 16px 0 2px; font-size: 15px; line-height: 1.5; text-align: center; text-wrap: balance; }
.ibt-loop figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; text-align: center; color: #56687f; }


/* ---------------------------------------------------------------- the usual checks, then STPA */
.ibt-checks { gap: 18px; margin-top: 28px; }
.ibt-check { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.ibt-check h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: .02em; color: var(--navy-text); }
.ibt-check p { margin: 0; font-size: 15.5px; line-height: 1.6; }
/* STPA's card: the same weight as the four above it, set apart only by a light blue fill (owner,
   2026-11-04: the navy box was too loud). */
.ibt-stpa { margin-top: 18px; padding: 22px 24px; border: 1px solid #d3e2f3; border-radius: var(--radius-sm); background: var(--steel-soft); font-size: 15.5px; line-height: 1.6; }
.ibt-stpa h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: .02em; color: var(--navy-text); }
.ibt-stpa p { margin: 0 0 10px; }
.ibt-stpa .ibt-req-head { margin: 16px 0 6px; font-weight: 700; color: var(--navy-text); }
.ibt-reqs { margin: 0 0 12px; padding-left: 20px; list-style: disc; }
.ibt-reqs li { margin: 0 0 6px; }
.ibt-reqs strong { color: var(--navy-text); }
.ibt-stpa p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- outage pattern cards */
.ibt-cards { gap: 20px; margin-top: 28px; }
.ibt-cards .card h3 { margin: 0 0 10px; font-family: var(--font-head); font-size: 20px; line-height: 1.3; }
.ibt-cards .card p { font-size: 15.5px; line-height: 1.65; }
.ibt-cards .card p:last-child { margin-bottom: 0; }
/* Part 2: each outage card ends with its control loop, labelled the way STPA labels it. */
.ibt-cards .card { display: flex; flex-direction: column; }
.ibt-cards .card > p { margin: 0 0 16px; }
.ibt-inloop { margin: auto 0 0; padding: 14px 16px 12px; border-radius: var(--radius-sm); background: var(--steel-soft); }
.ibt-inloop-head { margin: 0 0 8px !important; font-size: 12px !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--navy-text); }
.ibt-inloop dl { margin: 0; font-size: 14.5px; line-height: 1.5; }
.ibt-inloop dt { font-weight: 700; color: var(--navy-text); }
.ibt-inloop dd { margin: 0 0 8px; }
.ibt-inloop dd:last-child { margin-bottom: 0; }
.ibt-inloop > p:not(.ibt-inloop-head) { margin: 0; font-size: 14.5px; line-height: 1.55; }
/* Part 2: one outage per row, the story on the left and its control loop on the right. */
.ibt-pats { display: grid; gap: 20px; margin-top: 28px; }
.ibt-pat { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: start; }
.ibt-pat h3 { margin: 0 0 10px; font-family: var(--font-head); font-size: 20px; line-height: 1.3; }
.ibt-pat-story p { margin: 0; font-size: 15.5px; line-height: 1.65; }
.ibt-pat-story p + p { margin-top: 12px; }
.ibt-pat .ibt-inloop { margin: 0; }
@media (max-width: 900px) { .ibt-pat { grid-template-columns: 1fr; gap: 16px; } }
/* Part 3: the worked control loops sit in the text column, one under each story. */
.ibt-text .ibt-loop { margin: 24px auto 24px; }

/* ---------------------------------------------------------------- fit: three work products, Google's figures */
.ibt-fit { gap: 20px; margin-top: 28px; }
.ibt-fit .tag { margin-bottom: 14px; }
.ibt-fit p { font-size: 15.5px; line-height: 1.65; }
.ibt-fit p:last-child { margin-bottom: 0; }
.ibt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; }
/* A small centred label over the stat tiles, so the tiles say what they are without a section heading. */
.ibt-stats-head { margin: 40px 0 14px; font-size: 15px; font-weight: 600; letter-spacing: .02em; text-align: center; color: #4a5a72; }
.ibt-stats .stat-tile-label { font-size: 14.5px; line-height: 1.5; }
.ibt-stats-source { margin: 10px 0 0; font-size: 14px; }
.ibt-roi { max-width: 860px; margin: 18px 0 0; font-size: 15.5px; line-height: 1.6; }
.ibt-roi strong { color: var(--navy-text); }

/* ---------------------------------------------------------------- published results */
.ibt-group { margin: 36px 0 14px; font-family: var(--font-head); font-size: 22px; color: var(--navy-text); }
.ibt-group:first-of-type { margin-top: 8px; }
.ibt-proof { gap: 18px; }
.ibt-proof .card { display: flex; flex-direction: column; }
.ibt-proof .tag { align-self: flex-start; margin-bottom: 12px; }
.ibt-proof h4 { margin: 0 0 8px; font-family: var(--font-head); font-size: 18px; line-height: 1.3; color: var(--navy-text); }
.ibt-proof p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; }
.ibt-proof .text-link { margin-top: auto; font-size: 14.5px; }
.ibt-proof .text-link + .text-link { margin-top: 6px; }
.ibt-standards li { position: relative; margin-bottom: 12px; padding-left: 16px; line-height: 1.6; }
.ibt-standards li::before { content: ""; position: absolute; left: 0; top: .66em; width: 6px; height: 6px; border-radius: 50%; background: var(--steel); }

.ibt-gaps { max-width: 820px; }

@media (max-width: 1100px) {
  .ibt-stats { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ibt-race { margin-left: -8px; margin-right: -8px; padding: 20px 14px 18px; }
  .ibt-race-state { column-gap: 10px; }
  .ibt-race-state .ibt-box { padding: 12px 11px 11px; }
  .ibt-race-state .ibt-box p { font-size: 14px; }
  .ibt-race-state .ibt-believes { font-size: 13px !important; }
  .ibt-box-name { font-size: 12px; }
  .ibt-punch { font-size: 19px; }
  .ibt-check, .ibt-stpa { padding: 20px 18px; }
}
.ibt-fit .ibt-fit-h { margin: 0 0 10px; font-family: var(--font-head); font-size: 20px; line-height: 1.3; }
/* A text link that names another page (link-page span) wraps as running text, as on Automotive. */
.ibt-pagelink .text-link { display: inline; }
.ibt-pagelink .icon { vertical-align: -2px; }
@media (max-width: 760px) {
  .ibt-loop-frame { padding: 20px 14px 14px; }
  .ibt-loop-links { grid-template-columns: 1fr 1.3fr; gap: 8px; }
  .ibt-loop-link { gap: 6px; }
  .ibt-loop-arrow { margin-left: 6px; }
}


/* ---- 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) {
  .ibt-hero { background-color: #303641; }
  .ibt-hero::before { background-image: radial-gradient(ellipse 27% 42% at 50% 52%, rgb(20 26 36 / 70%) 0%, rgb(20 26 36 / 45%) 55%, rgb(20 26 36 / 0%) 100%); }
  @media (max-width: 760px) {
    .ibt-hero::before { background-image: radial-gradient(ellipse 58% 40% at 50% 50%, rgb(20 26 36 / 70%) 0%, rgb(20 26 36 / 45%) 55%, rgb(20 26 36 / 0%) 100%); }
  }
  .ibt-hero-basics { color: #b7c9e5; }
  .ibt-race-state .ibt-box:not(.ibt-record)::before { background-color: #464e58; }
  .ibt-race-state .ibt-box:not(.ibt-record)::after { border-top-color: #444d57; }
  .ibt-race-state .ibt-box.is-active::after { border-top-color: #8ba5d4; }
  .ibt-race-state .ibt-box:not(.ibt-record) > .ibt-box-name::before { border-bottom-color: #373d49; }
  .ibt-race-state .ibt-box:not(.ibt-record) > .ibt-box-name::after { background-color: #2d343f; }
  .ibt-box { border-color: #3a4148; background-color: #111620; }
  .ibt-box.is-active { border-color: #8ba5d4; }
  .ibt-quiet { color: #b1c5df; }
  .ibt-believes.is-wrong { background-color: #1d232e; color: #ffaa9f; }
  .ibt-record { background-color: #181d28; }
  .ibt-addrs span { background-color: #212924; color: #91dba7; }
  .ibt-addrs .ibt-none { background-color: #1d232e; color: #ffaa9f; }
  .ibt-loop-frame { background-color: #111620; }
  .ibt-rule { background-color: #1b202b; }
  .ibt-loop-box { border-color: #8ba5d4; background-color: #111620; }
  .ibt-loop-proc { border-color: #434e5d; background-color: #181d28; }
  .ibt-loop-kind { color: #b1c5df; }
  .ibt-actual { background-color: #212924; color: #91dba7; }
  .ibt-loop-arrow::before { border-left-color: #8ba5d4; }
  .ibt-loop-ca .ibt-loop-arrow::after { border-top-color: #8ba5d4; }
  .ibt-loop-fb .ibt-loop-arrow::before { border-left-color: #a3302a; }
  .ibt-loop-fb .ibt-loop-arrow::after { border-bottom-color: #a3302a; }
  .ibt-loop-fb p { color: #ffaa9f; }
  .ibt-loop-fb p b { color: #ffaa9f; }
  .ibt-loop-fb .ibt-loop-txt, .ibt-loop-fb .ibt-loop-txt > b { color: #ffaa9f; }
  .ibt-loop-ca.is-missing .ibt-loop-arrow::before { border-left-color: #a3302a; }
  .ibt-loop-ca.is-missing .ibt-loop-txt, .ibt-loop-ca.is-missing .ibt-loop-txt > b { color: #ffaa9f; }
  .ibt-loop figcaption { color: #b1c5df; }
  .ibt-check { background-color: #111620; }
  .ibt-stpa { border-color: #333c46; }
  .ibt-stats-head { color: #b7c9e5; }
}