/*
 * IVW-011 base stylesheet: reset, container and grid utilities, and the
 * fourteen shared components named in shared/COMPONENTS.md and
 * shared/SITEMAP.md. Every colour, size, spacing, duration and glow value
 * here is a var(--...) from shared/styles/tokens.css or, for the theme-
 * aware tokens IVW-019 added (--brand-text, --on-brand, --on-ember,
 * --code-bg and friends), from shared/styles/tokens-light.css, which
 * declares their dark defaults and their light overrides. This file
 * declares no new colour and no fixed pixel width above 390px other than
 * the rem-based container widths, and it defines no new custom property
 * of its own. See shared/COMPONENTS.md for the purpose, states and
 * responsive behaviour of each selector below; this file is the
 * implementation, that file is the contract.
 *
 * Theme rule (IVW-019): any orange TEXT under 24px uses --brand-text,
 * never --brand, so the light theme can swap in a darker orange without
 * a component change. --brand stays the fill, border, rule, icon and
 * glow colour. Text on an orange fill uses --on-brand; text on the ember
 * CTA band uses --on-ember.
 *
 * Breakpoints are expressed in rem, matching the container tokens they
 * correspond to, so no bare pixel breakpoint appears in this file:
 *   40rem  matches --container-sm (used by the table-stacking rule and
 *          the five-teaser grid's phone-to-tablet switch)
 *   48rem  matches --container-md (used by the nav's desktop switch and
 *          the section rhythm's larger padding step)
 *   64rem  matches --container-lg (used by the five-teaser grid's
 *          tablet-to-wide switch)
 */

/* -----------------------------------------------------------------------
 * Reset
 * --------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

html,
body {
  max-width: 100%;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg-0);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-md);
  letter-spacing: var(--tracking-md);
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* -----------------------------------------------------------------------
 * Typographic defaults
 * --------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--fg);
}

h1 {
  font-size: var(--text-4xl);
  line-height: var(--leading-4xl);
  letter-spacing: var(--tracking-4xl);
  font-weight: 700;
}

h2 {
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
  letter-spacing: var(--tracking-2xl);
}

h3 {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  letter-spacing: var(--tracking-lg);
}

p {
  color: var(--fg);
}

.u-muted {
  color: var(--muted);
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.u-label {
  font-family: var(--label-font);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-transform);
}

/* Global focus-visible: every interactive control gets this ring, never
 * suppressed without a replacement (global rule, COMPONENTS.md section 1). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* -----------------------------------------------------------------------
 * Container and grid utilities
 * --------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--gutter-phone);
}

.container--narrow {
  max-width: var(--container-md);
}

.container--wide {
  max-width: var(--container-2xl);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6);
}

.grid > * {
  grid-column: span 12;
}

.grid__col-1 { grid-column: span 1; }
.grid__col-2 { grid-column: span 2; }
.grid__col-3 { grid-column: span 3; }
.grid__col-4 { grid-column: span 4; }
.grid__col-5 { grid-column: span 5; }
.grid__col-6 { grid-column: span 6; }
.grid__col-7 { grid-column: span 7; }
.grid__col-8 { grid-column: span 8; }
.grid__col-9 { grid-column: span 9; }
.grid__col-10 { grid-column: span 10; }
.grid__col-11 { grid-column: span 11; }
.grid__col-12 { grid-column: span 12; }

/* -----------------------------------------------------------------------
 * Vertical rhythm (IVW-019 spacing audit).
 *
 * One mechanism, applied consistently, so margins neither double up nor
 * vanish between stacked components:
 *
 *   - Page-level blocks (.section, .hero, .page-header, .cta-band,
 *     .site-footer) space themselves with PADDING, never with an outer
 *     margin. Two adjacent blocks therefore never add their gaps, and a
 *     full-bleed band sits flush against the block after it.
 *   - Inside a .section's container, stacked children get a single
 *     margin-top of --space-6 (owl selector). The one component that
 *     keeps its own bottom margin, .section-header (--space-8), is a
 *     block sibling of the child below it, so the two margins collapse
 *     to the larger value under normal flow; they never add.
 *   - The first child of any container carries no top margin and the
 *     last child no bottom margin, so a block's padding is the only
 *     space at its edges.
 *   - Section padding steps from --space-12 on phones to --space-16 at
 *     the 48rem breakpoint; card padding is --space-6 everywhere.
 * --------------------------------------------------------------------- */

.section {
  padding-block: var(--space-12);
}

.section > .container > * + * {
  margin-top: var(--space-6);
}

.container > :first-child,
.section > :first-child,
.section > .container > :first-child {
  margin-top: 0;
}

.container > :last-child,
.section > :last-child,
.section > .container > :last-child,
.section-header:last-child,
.hero__subhead:last-child,
.comparison-table__group:last-child,
.regulatory-table__group:last-child {
  margin-bottom: 0;
}

/* Page header: every route other than the home page opens with one,
 * holding the page's single h1 (.page-title) and, where the manifest
 * gives one, the header image slot. Padding above only; the first
 * .section below supplies the space beneath. */
.page-header {
  padding-top: var(--space-12);
}

.page-header > * + * {
  margin-top: var(--space-6);
}

.page-title {
  font-size: var(--text-3xl);
  line-height: var(--leading-3xl);
  letter-spacing: var(--tracking-3xl);
  font-weight: 700;
  color: var(--fg);
}

@media (min-width: 48rem) {
  .section {
    padding-block: var(--space-16);
  }

  .page-header {
    padding-top: var(--space-16);
  }
}

/* -----------------------------------------------------------------------
 * Aspect-ratio modifiers, shared by the diagram frame and the image
 * placeholder (shared/SITEMAP.md section 2 ratios).
 * --------------------------------------------------------------------- */

.diagram-frame--16-9,
.img-placeholder--16-9 { aspect-ratio: 16 / 9; }

.diagram-frame--4-3,
.img-placeholder--4-3 { aspect-ratio: 4 / 3; }

.diagram-frame--1-1,
.img-placeholder--1-1 { aspect-ratio: 1 / 1; }

.diagram-frame--21-9,
.img-placeholder--21-9 { aspect-ratio: 21 / 9; }

.diagram-frame--4-1,
.img-placeholder--4-1 { aspect-ratio: 4 / 1; }

/* -----------------------------------------------------------------------
 * 1. Nav
 * --------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg-0);
  border-bottom: 1px solid var(--bg-3);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--fg);
}

/* Checkbox-hack toggle: no script drives the phone panel. The checkbox
 * is the real, focusable, keyboard-operable control; the label next to
 * it is the visible button shape a pointer user sees. */
.nav__toggle-checkbox {
  position: absolute;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}

.nav__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  gap: var(--space-1);
  flex-direction: column;
}

.nav__toggle-checkbox:focus-visible ~ .nav__toggle {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.nav__toggle-bar {
  display: block;
  width: 1.5rem;
  height: 2px;
  background: var(--fg);
  transition: transform var(--duration-base) var(--ease-standard),
    opacity var(--duration-base) var(--ease-standard);
}

.nav__toggle-checkbox:checked ~ .nav__toggle .nav__toggle-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav__toggle-checkbox:checked ~ .nav__toggle .nav__toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav__toggle-checkbox:checked ~ .nav__toggle .nav__toggle-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* The panel itself never clips: overflow stays visible on the outer
 * box, and the inner list is the scroll container, padded on every side
 * by at least --glow-spread so a hovered or focused item's glow ring
 * (box-shadow or a motion.css pseudo-element) fades out inside the
 * padding instead of against a hard edge (TOKENS.md section 4). */
.nav__panel {
  position: fixed;
  inset: 0;
  top: 3.5rem;
  background: var(--bg-0);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--duration-base) var(--ease-standard);
  overflow: visible;
}

.nav__toggle-checkbox:checked ~ .nav__panel {
  transform: translateX(0);
  visibility: visible;
}

.nav__list {
  display: flex;
  flex-direction: column;
}

.nav__panel .nav__list {
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--space-6) max(var(--gutter-phone), var(--glow-spread));
}

.nav__item {
  border-bottom: 1px solid var(--bg-3);
}

.nav__link {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding-block: var(--space-3);
  font-size: var(--text-md);
  color: var(--fg);
}

.nav__link:hover,
.nav__link:focus-visible {
  color: var(--brand-text-hot);
  box-shadow: var(--glow-static);
}

.nav__link--current {
  color: var(--brand-text);
}

/* Outlined by default (IVW-019): the hero's filled CTA is the single
 * filled orange element on the first screen. Border and text share
 * --brand-text, which is --brand on dark and the darker text-safe
 * orange on light. Hover and focus are static: a fixed shadow, a faint
 * orange tint and a darker outline. No transform and no spinning glow
 * ring, whatever glow class a page adds to this element (motion.css
 * neutralises those on .nav__cta specifically). */
.nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  margin-block: var(--space-4);
  padding-inline: var(--space-6);
  background: transparent;
  border: 1px solid var(--brand-text);
  color: var(--brand-text);
  font-weight: 600;
  border-radius: var(--space-2);
  transform: none;
}

.nav__cta:hover,
.nav__cta:focus-visible {
  background: rgba(var(--brand-rgb), 0.08);
  border-color: var(--brand-text-hot);
  color: var(--brand-text-hot);
  box-shadow: var(--glow-static);
  transform: none;
}

/* Desktop: panel becomes an inline row, toggle is not needed. */
@media (min-width: 48rem) {
  .nav__toggle-checkbox,
  .nav__toggle {
    display: none;
  }

  .nav__panel {
    position: static;
    inset: auto;
    transform: none;
    visibility: visible;
    overflow: visible;
    background: none;
  }

  .nav__list,
  .nav__panel .nav__list {
    flex-direction: row;
    align-items: center;
    max-height: none;
    overflow: visible;
    padding: 0;
    gap: var(--space-6);
  }

  .nav__item {
    border-bottom: 0;
  }

  .nav__link {
    min-height: auto;
    padding-block: var(--space-2);
  }

  .nav__cta {
    margin-block: 0;
  }
}

/* -----------------------------------------------------------------------
 * 2. Hero
 * --------------------------------------------------------------------- */

.hero {
  padding-block: var(--space-12);
}

@media (min-width: 48rem) {
  .hero {
    padding-block: var(--space-16);
  }
}

.hero__inner {
  display: grid;
  gap: var(--space-8);
}

.hero__headline {
  font-size: var(--text-4xl);
  line-height: var(--leading-4xl);
  letter-spacing: var(--tracking-4xl);
  margin-bottom: var(--space-4);
}

.hero__subhead {
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--muted);
  margin-bottom: var(--space-6);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding-inline: var(--space-6);
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 600;
  border-radius: var(--space-2);
}

.hero__cta--secondary {
  background: transparent;
  border: 1px solid var(--brand-text);
  color: var(--brand-text);
}

.hero__cta:hover,
.hero__cta:focus-visible {
  box-shadow: var(--glow-static);
}

.hero__media {
  width: 100%;
}

@media (min-width: 48rem) {
  .hero__inner {
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
  }

  .hero__content {
    grid-column: span 7;
  }

  .hero__media {
    grid-column: span 5;
  }

  .hero__actions {
    flex-direction: row;
  }
}

/* -----------------------------------------------------------------------
 * 3. Section header
 * --------------------------------------------------------------------- */

.section-header {
  margin-bottom: var(--space-8);
}

.section-header__label {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--label-font);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-transform);
  color: var(--muted);
  margin-bottom: var(--space-2);
}

.section-header__index {
  color: var(--brand-text);
}

.section-header__heading {
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
  letter-spacing: var(--tracking-2xl);
}

/* -----------------------------------------------------------------------
 * 4. Claim card
 * --------------------------------------------------------------------- */

.claim-card {
  background: var(--bg-1);
  border-top: 2px solid var(--brand-ember);
  border-radius: var(--space-2);
  padding: var(--space-6);
  box-shadow: var(--glow-static);
}

.claim-card__value {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  color: var(--fg);
  margin-bottom: var(--space-2);
}

.claim-card__label {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--muted);
  font-weight: 600;
}

.claim-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 40rem) {
  .claim-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
}

/* Five teasers, no orphan (IVW-019). The technology index carries
 * exactly five claim cards; auto-fit alone lays them out 4 + 1 at wide
 * widths and leaves the fifth card alone on its row. The rules below
 * apply to a grid that carries the `--five` modifier OR holds exactly
 * five children (the quantity query `:nth-last-child(5):first-child`
 * matches only when the first child is also the fifth from the end),
 * so an existing page with five cards is fixed without a markup change.
 *
 * Layout per breakpoint, by construction:
 *   below 40rem (390px):  two columns; card 1 spans both as the header
 *                         card, cards 2 to 5 form a 2 by 2 block.
 *                         Rows: [1] [2 3] [4 5]. Nothing is alone.
 *   40rem to 64rem (834): six columns, every card spans two; cards 4
 *                         and 5 start at columns 2 and 4, so the second
 *                         row is centred. Rows: [1 2 3] [4 5].
 *   64rem and up (1440):  five equal columns, one row, equal heights
 *                         from the grid's default stretch alignment.
 *                         Row: [1 2 3 4 5].
 * The selector list below is repeated per breakpoint rather than
 * nested so a reader can check each width against this table. */

.claim-card-grid--five {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The :has() form sits in its own rule on purpose: a browser without
 * :has() drops a whole rule whose selector list it cannot parse, and the
 * explicit modifier above must survive that. */
.claim-card-grid:has(> :nth-last-child(5):first-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.claim-card-grid--five > :first-child,
.claim-card-grid > :nth-last-child(5):first-child {
  grid-column: 1 / -1;
}

@media (min-width: 40rem) {
  .claim-card-grid--five {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .claim-card-grid:has(> :nth-last-child(5):first-child) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .claim-card-grid--five > *,
  .claim-card-grid > :nth-last-child(5):first-child,
  .claim-card-grid > :nth-last-child(5):first-child ~ * {
    grid-column: span 2;
  }

  .claim-card-grid--five > :nth-child(4),
  .claim-card-grid > :nth-last-child(5):first-child ~ :nth-child(4) {
    grid-column: 2 / span 2;
  }

  .claim-card-grid--five > :nth-child(5),
  .claim-card-grid > :nth-last-child(5):first-child ~ :nth-child(5) {
    grid-column: 4 / span 2;
  }
}

@media (min-width: 64rem) {
  .claim-card-grid--five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .claim-card-grid:has(> :nth-last-child(5):first-child) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .claim-card-grid--five > *,
  .claim-card-grid > :nth-last-child(5):first-child,
  .claim-card-grid > :nth-last-child(5):first-child ~ * {
    grid-column: auto;
  }
}

/* -----------------------------------------------------------------------
 * 5. Code block
 * --------------------------------------------------------------------- */

.code-block {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--space-2);
  overflow: hidden;
}

.code-block__header {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  padding: var(--space-3) var(--space-4) 0;
}

.code-block__pre {
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
}

@media (min-width: 40rem) {
  .code-block__pre {
    padding: var(--space-6);
  }
}

.code-block__code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--fg);
}

.code-block__line--highlight {
  display: block;
  background: rgba(var(--brand-rgb), 0.12);
  border-left: 2px solid var(--brand);
  padding-left: var(--space-2);
  margin-left: calc(var(--space-2) * -1);
}

.tok-kw { color: var(--brand-text); }
.tok-type { color: var(--brand-text-hot); }
.tok-fn { color: var(--fg); font-weight: 600; }
.tok-num { color: var(--brand-text-hot); }
.tok-str { color: var(--brand-text-hot); }
.tok-punct { color: var(--muted); }
.tok-comment { color: var(--muted); font-style: italic; }

/* -----------------------------------------------------------------------
 * 6. Diagnostic block
 * --------------------------------------------------------------------- */

.diagnostic-block {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-left: 3px solid var(--threat);
  border-radius: var(--space-2);
  padding: var(--space-4);
  overflow-x: auto;
}

@media (min-width: 40rem) {
  .diagnostic-block {
    padding: var(--space-6);
  }
}

.diagnostic-block__location {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: var(--space-2);
}

.diagnostic-block__message {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--threat);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.diagnostic-block__source,
.diagnostic-block__caret {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  white-space: pre;
  color: var(--fg);
}

.diagnostic-block__caret {
  color: var(--threat);
}

.diagnostic-block__note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: var(--space-3);
}

/* -----------------------------------------------------------------------
 * 7. Comparison table and 8. Regulatory table (shared stacking pattern)
 * --------------------------------------------------------------------- */

.comparison-table,
.regulatory-table {
  width: 100%;
}

.comparison-table__table,
.regulatory-table__table {
  display: none;
  font-size: var(--text-sm);
}

.comparison-table__table caption,
.regulatory-table__table caption {
  text-align: left;
  color: var(--muted);
  font-size: var(--text-xs);
  margin-bottom: var(--space-2);
}

.comparison-table__table th,
.comparison-table__table td,
.regulatory-table__table th,
.regulatory-table__table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--bg-3);
}

.comparison-table__table thead th,
.regulatory-table__table thead th {
  background: var(--bg-1);
  color: var(--muted);
  font-family: var(--label-font);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-transform);
}

.comparison-table__table tbody tr,
.regulatory-table__table tbody tr {
  background: var(--bg-2);
}

.comparison-table__cell--positive {
  color: var(--brand-text-hot);
}

.comparison-table__cell--negative {
  color: var(--threat);
}

.comparison-table__list,
.regulatory-table__list {
  display: block;
}

.comparison-table__group,
.regulatory-table__group {
  background: var(--bg-2);
  border-radius: var(--space-2);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.comparison-table__group-title,
.regulatory-table__group-title {
  font-family: var(--label-font);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-transform);
  color: var(--muted);
  margin-bottom: var(--space-3);
}

.comparison-table__pair,
.regulatory-table__pair {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--bg-3);
}

.comparison-table__pair:last-child,
.regulatory-table__pair:last-child {
  border-bottom: 0;
}

.comparison-table__pair dt,
.regulatory-table__pair dt {
  color: var(--muted);
  font-weight: 600;
}

.comparison-table__pair dd {
  color: var(--fg);
}

@media (min-width: 40rem) {
  .comparison-table__table,
  .regulatory-table__table {
    display: table;
  }

  .comparison-table__list,
  .regulatory-table__list {
    display: none;
  }
}

/* -----------------------------------------------------------------------
 * 9. Diagram frame
 * --------------------------------------------------------------------- */

.diagram-frame {
  position: relative;
  width: 100%;
  background: var(--bg-2);
  border: 1px dashed var(--bg-3);
  border-radius: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.diagram-frame--filled {
  border-style: solid;
  border-color: transparent;
}

.diagram-frame__media {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.diagram-frame__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-align: center;
  padding: var(--space-4);
}

.diagram-frame__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  padding: var(--space-2) var(--space-4);
  background: rgba(var(--bg-0-rgb), 0.6);
}

/* -----------------------------------------------------------------------
 * 10. Sector card
 * --------------------------------------------------------------------- */

.sector-card {
  background: var(--bg-1);
  border-radius: var(--space-2);
  padding: var(--space-6);
  box-shadow: var(--glow-static);
}

.sector-card:is(a) {
  display: block;
}

.sector-card:hover,
.sector-card:focus-visible {
  box-shadow: var(--glow-static);
}

.sector-card__icon {
  width: 3rem;
  margin-bottom: var(--space-4);
}

.sector-card__title {
  font-size: var(--text-md);
  margin-bottom: var(--space-2);
}

.sector-card__body {
  font-size: var(--text-sm);
  color: var(--muted);
}

.sector-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 40rem) {
  .sector-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  }
}

/* -----------------------------------------------------------------------
 * 11. CTA band
 * --------------------------------------------------------------------- */

.cta-band {
  background: var(--brand-ember);
  padding-block: var(--space-12);
}

.cta-band__inner {
  max-width: var(--container-md);
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.cta-band__heading {
  font-size: var(--text-2xl);
  color: var(--on-ember);
}

.cta-band__body {
  color: var(--on-ember);
  font-size: var(--text-md);
}

.cta-band__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding-inline: var(--space-8);
  background: var(--bg-0);
  color: var(--fg);
  font-weight: 600;
  border-radius: var(--space-2);
}

.cta-band__action:hover,
.cta-band__action:focus-visible {
  box-shadow: var(--glow-static);
}

.cta-band--media {
  position: relative;
  overflow: hidden;
}

.cta-band__media {
  margin-bottom: var(--space-6);
}

@media (min-width: 48rem) {
  .cta-band--media .cta-band__media {
    position: absolute;
    inset: 0;
    margin-bottom: 0;
    z-index: 0;
  }

  .cta-band--media .cta-band__inner {
    position: relative;
    z-index: 1;
  }
}

/* -----------------------------------------------------------------------
 * 12. Footer
 * --------------------------------------------------------------------- */

/* No outer margin (rhythm rule above): the block before the footer
 * supplies its own bottom padding, so a CTA band sits flush against the
 * footer and a padded section leaves exactly one gap, never two. */
.site-footer {
  background: var(--bg-1);
  padding-block: var(--space-12);
  margin-top: 0;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.site-footer__brand {
  display: block;
  font-weight: 700;
  color: var(--fg);
}

/* Footer logo (IVW-019): the mono wordmark is INLINE SVG markup in the
 * page with fill="currentColor", so it takes its colour from --fg here
 * and follows the theme. An <img src="...mono.svg"> cannot do this: an
 * image document has no access to the page's colour, so currentColor
 * inside it resolves to black, which is the black-on-dark logo the
 * founder saw. Never load the mono logo through <img>. */
.footer__logo {
  display: block;
  width: 7.5rem;
  height: auto;
  color: var(--fg);
  transition: color var(--duration-base) var(--ease-standard);
}

.site-footer__brand:hover .footer__logo,
.site-footer__brand:focus-visible .footer__logo {
  color: var(--brand-text);
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
}

.site-footer__link {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--muted);
  font-size: var(--text-sm);
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: var(--brand-text-hot);
}

.site-footer__meta {
  color: var(--muted);
  font-size: var(--text-xs);
}

@media (min-width: 48rem) {
  .site-footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .site-footer__nav {
    flex-direction: row;
    gap: var(--space-6);
  }

  .site-footer__link {
    min-height: auto;
  }
}

/* -----------------------------------------------------------------------
 * 13. Image placeholder
 * --------------------------------------------------------------------- */

.img-placeholder {
  position: relative;
  width: 100%;
  background: var(--bg-2);
  border: 1px dashed var(--bg-3);
  border-radius: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.img-placeholder--filled {
  border-style: solid;
  border-color: transparent;
}

.img-placeholder__frame {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.img-placeholder__desc {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-align: center;
}

.img-placeholder__id {
  display: none;
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  background: rgba(var(--bg-0-rgb), 0.6);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--space-1);
}

.img-placeholder--filled .img-placeholder__desc {
  display: none;
}

.img-placeholder__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -----------------------------------------------------------------------
 * 14. Contact form
 * --------------------------------------------------------------------- */

.contact-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.contact-form__notice {
  background: var(--bg-1);
  border-left: 3px solid var(--brand);
  border-radius: var(--space-2);
  padding: var(--space-4);
  color: var(--fg);
  font-size: var(--text-sm);
}

/* Reserved space, not a collapsing box: sized from the banner's own
 * type and padding tokens, so the region holds this height whether it
 * is empty or holding a banner, and a banner appearing or being
 * dismissed never reflows the fields below it (COMPONENTS.md section
 * 1, "stable regions"; section 15). */
.contact-form__banner-region {
  min-height: calc(var(--text-sm) * var(--leading-sm) + var(--space-4) * 2);
}

.contact-form__banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border-radius: var(--space-2);
  padding: var(--space-4);
  background: var(--bg-1);
}

.contact-form__banner--success {
  border-left: 3px solid var(--proof);
}

.contact-form__banner--failure {
  border-left: 3px solid var(--threat);
}

.contact-form__banner-text {
  color: var(--fg);
  font-size: var(--text-sm);
}

.contact-form__banner-dismiss {
  min-height: 2.75rem;
  min-width: 2.75rem;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.contact-form__banner-dismiss:hover,
.contact-form__banner-dismiss:focus-visible {
  color: var(--fg);
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-form__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg);
}

.contact-form__label-optional {
  color: var(--muted);
  font-weight: 400;
}

.contact-form__input,
.contact-form__textarea,
.contact-form__select {
  min-height: 2.75rem;
  background: var(--bg-1);
  border: 1px solid var(--bg-3);
  border-radius: var(--space-2);
  padding: var(--space-3) var(--space-4);
  color: var(--fg);
}

.contact-form__textarea {
  min-height: 8rem;
  resize: vertical;
}

.contact-form__field--invalid .contact-form__input,
.contact-form__field--invalid .contact-form__textarea,
.contact-form__field--invalid .contact-form__select {
  border-color: var(--threat);
}

.contact-form__error {
  display: block;
  min-height: 1.25rem;
  font-size: var(--text-xs);
  color: var(--threat);
}

.contact-form__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding-inline: var(--space-8);
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 600;
  border-radius: var(--space-2);
}

.contact-form__submit:hover,
.contact-form__submit:focus-visible {
  background: var(--brand-hot);
  box-shadow: var(--glow-static);
}

.contact-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.contact-form :disabled {
  opacity: 0.6;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 48rem) {
  .contact-form__row {
    grid-template-columns: 1fr 1fr;
  }
}