/* TC Report Generator website.
   Colours and type come from the desktop app's own design system
   ("Drafting Paper" light / "Night Shift" dark, app/theme.py), so the site and
   the product read as one thing. Logical properties throughout, so an
   Arabic (dir="rtl") page needs no separate stylesheet. */

/* ── Fonts (IBM Plex, SIL Open Font License; see /assets/fonts/OFL.txt) ──── */
@font-face { font-family: "Plex Sans"; src: url("../fonts/IBMPlexSans-400.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("../fonts/IBMPlexSans-500.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("../fonts/IBMPlexSans-600.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/IBMPlexMono-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light dark;

  /* Drafting Paper */
  --paper: #F1EDE3;
  --sheet: #FAF8F2;
  --sheet-raised: #FFFEFA;
  --line-faint: #E7E2D4;
  --line: #DAD4C4;
  --line-strong: #A8A296;
  --field-line: #888272;          /* form-field borders: ≥3:1 on paper and card (WCAG 1.4.11) */
  --ink: #1D1B16;
  --ink-2: #56524A;
  --ink-3: #6A6558;
  --accent: #24537C;
  --accent-strong: #1C4265;
  --accent-tint: #E9EFF3;
  --on-accent: #FFFEFA;
  --pass: #1D6E43;
  --pass-tint: #E2EEE6;
  --warn: #8A600A;
  --warn-tint: #F3EAD4;
  --fail: #B3352C;
  --fail-tint: #F3E2DF;
  --grid-minor: rgba(36, 83, 124, 0.06);
  --grid-major: rgba(36, 83, 124, 0.11);
  --shadow: 0 1px 0 rgba(29, 27, 22, 0.04), 0 18px 40px -24px rgba(29, 27, 22, 0.35);
  --footer-bg: #1D1B16;
  --footer-ink: #F1EDE3;
  --footer-ink-2: #B9B3A5;
  --footer-line: #3A372F;

  --font-sans: "Plex Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  --radius: 3px;
  --container: 1180px;
  --gutter: 16px;
  --header-h: 64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Night Shift */
    --paper: #0F1317;
    --sheet: #141A20;
    --sheet-raised: #1B232C;
    --line-faint: #1C232B;
    --line: #2A343E;
    --line-strong: #3A4650;
    --field-line: #667686;
    --ink: #E9EDF1;
    --ink-2: #A3B0BC;
    --ink-3: #8C9AA8;
    --accent: #53C1E9;
    --accent-strong: #7FD2F0;
    --accent-tint: #15303C;
    --on-accent: #0F1317;
    --pass: #4CC385;
    --pass-tint: #14291E;
    --warn: #E3B14F;
    --warn-tint: #2B2413;
    --fail: #F0655A;
    --fail-tint: #2C1917;
    --grid-minor: rgba(83, 193, 233, 0.045);
    --grid-major: rgba(83, 193, 233, 0.09);
    --shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 18px 40px -24px rgba(0, 0, 0, 0.8);
    --footer-bg: #0A0D10;
    --footer-ink: #E9EDF1;
    --footer-ink-2: #93A1AE;
    --footer-line: #222A33;
  }
}

@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; --header-h: 72px; } }

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
/* Smooth only for in-page links the visitor clicks (site.js adds the class).
   Opening /#status from elsewhere should land there at once, not glide 10,000px. */
@media (prefers-reduced-motion: no-preference) {
  html.smooth-scroll { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 { margin: 0; font-weight: 600; color: var(--ink); }
p, ul, ol, dl, figure { margin: 0; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--accent-strong); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--accent); color: var(--on-accent); }

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0; }

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

.skip-link {
  position: absolute;
  inset-inline-start: 12px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  border-radius: var(--radius);
  text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--paper); }

/* Preview builds only: impossible to mistake for the published site. */
.preview-banner {
  margin: 0;
  padding: 8px var(--gutter);
  background: var(--warn-tint);
  color: var(--ink);
  border-bottom: 1px solid var(--warn);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
}
.preview-banner strong { color: var(--warn); }
.placeholder {
  background: var(--warn-tint);
  color: var(--warn);
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 0 0.3em;
  border-radius: 2px;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 46px;
  padding: 0.55em 1.35em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-strong); color: var(--on-accent); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--ink); background: var(--sheet); color: var(--ink); }
.btn-small { min-height: 40px; padding: 0.45em 1em; font-size: 0.9rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }

/* ── Header and navigation ──────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(1px)) {
  .site-header {
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: saturate(1.2) blur(10px);
  }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-mark .mark-sheet { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.brand-mark .mark-bolt { fill: var(--accent); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.brand-sub {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 3px;
}

.nav-toggle { display: none; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 8px 24px;
  flex-wrap: wrap;
  padding-block: 8px;
}
.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  list-style: none;
  padding: 0;
}
.nav-list a {
  color: var(--ink-2);
  font-size: 0.95rem;
  text-decoration: none;
  padding: 6px 0;
}
.nav-list a:hover { color: var(--ink); text-decoration: underline; }

/* With JavaScript, small screens get a menu button instead of a wrapped row. */
@media (max-width: 959px) {
  .js .header-inner { flex-wrap: nowrap; }
  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    font: 500 0.95rem/1 var(--font-sans);
    cursor: pointer;
  }
  .nav-toggle-icon { display: inline-grid; gap: 4px; width: 18px; }
  .nav-toggle-icon span { display: block; height: 2px; background: currentColor; transition: transform 0.18s ease, opacity 0.18s ease; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .js .site-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 20px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .js .site-nav.is-open { display: flex; }
  .js .nav-list { flex-direction: column; gap: 0; }
  .js .nav-list a {
    display: block;
    padding: 14px 0;
    font-size: 1.05rem;
    color: var(--ink);
    border-bottom: 1px solid var(--line-faint);
  }
  .js .nav-cta { margin-top: 16px; min-height: 48px; }
  .site-header { position: sticky; }
}

/* ── Shared section scaffolding ─────────────────────────────────────────── */
.section {
  padding-block: 72px;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) { .section { padding-block: 104px; } }

.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.section-label .num { color: var(--ink-3); }
.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.section-head {
  display: grid;
  gap: 16px;
  max-width: 46rem;
  margin-bottom: 48px;
}
.section-head h2, .contact-copy h2 {
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.6rem);
  line-height: 1.14;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.section-intro {
  font-size: 1.12rem;
  color: var(--ink-2);
  max-width: 42em;
}

.group-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.group-note {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--warn);
}

/* A "sheet" is the frame every screenshot sits in: paper on paper. */
.sheet {
  position: relative;
  background: var(--sheet-raised);
  border: 1px solid var(--line-strong);
  padding: 8px;
  box-shadow: var(--shadow);
}
.sheet img { border: 1px solid var(--line); width: 100%; }

.titleblock {
  display: grid;
  grid-template-columns: auto 1fr;
  margin-top: 8px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.tb-cell { padding: 7px 10px; }
.tb-key { border-inline-end: 1px solid var(--line-strong); text-transform: uppercase; color: var(--ink); }
.tb-note {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line-strong);
  text-transform: uppercase;
  color: var(--warn);
}
@media (min-width: 640px) {
  .titleblock { grid-template-columns: auto 1fr auto; }
  .tb-note { grid-column: auto; border-top: 0; border-inline-start: 1px solid var(--line-strong); }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding-block: 48px 72px;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
}
@media (min-width: 1024px) { .hero { padding-block: 80px 112px; } }

.hero-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.lamp {
  width: 9px; height: 9px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.lamp-warn { color: var(--warn); background: var(--warn); }

.hero h1 {
  margin: 18px 0 20px;
  font-size: clamp(2.3rem, 1.35rem + 3.6vw, 3.7rem);
  line-height: 1.06;
  letter-spacing: -0.026em;
  text-wrap: balance;
}
.lede { font-size: 1.15rem; color: var(--ink-2); max-width: 34em; }
@media (min-width: 1024px) { .lede { font-size: 1.2rem; } }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.spec-block {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 36px;
  border-top: 1px solid var(--line-strong);
  border-inline-start: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--paper) 70%, transparent);
}
.spec-block > div {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-strong);
  border-inline-end: 1px solid var(--line-strong);
}
.spec-block dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.spec-block dd { margin: 2px 0 0; font-size: 0.95rem; line-height: 1.4; }

.hero-figure { margin-inline: -4px; }

/* One orchestrated entrance on load: the hero copy rises in sequence and the
   screenshot sheet settles into place. CSS only, skipped for reduced motion.
   The screenshot's opacity is never animated, so it can't delay the largest
   contentful paint. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero-copy > :nth-child(1) { animation-delay: 0.05s; }
  .hero-copy > :nth-child(2) { animation-delay: 0.13s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.21s; }
  .hero-copy > :nth-child(4) { animation-delay: 0.29s; }
  .hero-copy > :nth-child(5) { animation-delay: 0.37s; }
  .hero-figure { animation: settle 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
  .hero::before { animation: grid-in 1.2s ease-out both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: translateY(24px) rotate(-0.6deg); } to { transform: none; } }
@keyframes grid-in { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 1024px) { .hero-figure { margin-inline: 0; } }

/* ── 01 Problem ─────────────────────────────────────────────────────────── */
.rule-cards { display: grid; gap: 32px; }
@media (min-width: 768px) { .rule-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.rule-card { border-top: 2px solid var(--ink); padding-top: 18px; }
.rule-card h3 { font-size: 1.15rem; line-height: 1.3; margin-bottom: 10px; }
.rule-card p { color: var(--ink-2); }

/* ── 02 Product ─────────────────────────────────────────────────────────── */
.device-strip { margin-bottom: 64px; }
/* Ruled grids draw their lines on the cells, not with a coloured gap, so a
   short last row leaves empty paper instead of a solid block. */
.device-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--line);
  border-inline-start: 1px solid var(--line);
}
.device-list li {
  border-inline-end: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 16px;
  background: var(--sheet);
  font-size: 0.92rem;
  line-height: 1.35;
}
.device-list svg {
  width: 30px; height: 30px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.device-list svg .heavy { stroke-width: 2.6; }

.feature-group + .feature-group { margin-top: 56px; }
.feature-grid {
  display: grid;
  border-top: 1px solid var(--line);
  border-inline-start: 1px solid var(--line);
}
@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.feature {
  padding: 24px 22px 26px;
  border-inline-end: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.feature h4 { font-size: 1.05rem; line-height: 1.3; margin-bottom: 8px; }
.feature p { font-size: 0.98rem; color: var(--ink-2); }

/* ── 03 Tour ────────────────────────────────────────────────────────────── */
.section-tour { background: var(--sheet); }
.tour-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line-strong);
  overflow-x: auto;
  scrollbar-width: thin;
}
.tour-tabs[hidden] { display: none; }
.tour-tabs [role="tab"] {
  flex: none;
  margin-bottom: -1px;
  padding: 12px 16px;
  min-height: 44px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.tour-tabs [role="tab"]:hover { color: var(--ink); }
/* On phones the tabs wrap onto two rows rather than scrolling out of sight. */
@media (max-width: 639px) {
  .tour-tabs { flex-wrap: wrap; overflow-x: visible; }
  .tour-tabs [role="tab"] { padding-inline: 12px; }
}
.tour-tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tour-panel { display: grid; gap: 24px; align-items: start; }
.tour-panel + .tour-panel { margin-top: 56px; }
.js .tour-panel + .tour-panel { margin-top: 0; }
.tour-panel[hidden] { display: none; }
/* With JavaScript, the first paint already has the final tab layout: only
   panel one shown, room kept for the tab strip. Otherwise the page is several
   screens longer until site.js runs, and a link like /#how lands in the wrong
   place once the other panels collapse. */
.js [data-tabs]:not(.tabs-ready) .tour-panel ~ .tour-panel { display: none; }
.js [data-tabs]:not(.tabs-ready) .tour-tabs[hidden] { display: flex; visibility: hidden; }
@media (min-width: 1024px) {
  .tour-panel { grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: 40px; }
}
.tour-text h3 { font-size: 1.25rem; margin-bottom: 10px; }
.tour-text p { color: var(--ink-2); }
.sheet-narrow { max-width: 720px; }

/* ── 04 How it works: a busbar with four feeders ────────────────────────── */
.steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0;
  border-inline-start: 3px solid var(--ink);
}
.step {
  position: relative;
  padding: 0 0 36px 44px;
  padding-inline-start: 44px;
  padding-inline-end: 0;
}
.step:last-child { padding-bottom: 0; }
.step::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 14px;
  width: 26px;
  height: 2px;
  background: var(--ink);
}
.step::after {
  content: "";
  position: absolute;
  inset-inline-start: 24px;
  top: 9px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
}
.step-num {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.step h3 { font-size: 1.15rem; margin-bottom: 8px; }
.step p { color: var(--ink-2); max-width: 30em; }

@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    border-inline-start: 0;
    border-top: 3px solid var(--ink);
  }
  .step { padding: 52px 0 0; }
  .step::before { inset-inline-start: 20px; top: 0; width: 2px; height: 26px; }
  .step::after { inset-inline-start: 15px; top: 24px; }
  .step-num { margin-top: 10px; }
}

/* ── 05 Who ─────────────────────────────────────────────────────────────── */
.audience { display: grid; gap: 16px; }
@media (min-width: 768px) { .audience { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.card {
  padding: 24px;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.card h3 { font-size: 1.1rem; line-height: 1.3; margin-bottom: 8px; }
.card p { color: var(--ink-2); }

.scenarios {
  margin-top: 48px;
  padding: 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}
.scenarios ul { display: grid; gap: 14px; padding-inline-start: 1.1em; }
.scenarios li { color: var(--ink-2); }
.scenarios li::marker { color: var(--ink-3); }
.scenarios strong { color: var(--ink); font-weight: 600; }

/* ── 06 Approach ────────────────────────────────────────────────────────── */
.approach { display: grid; gap: 36px 48px; }
@media (min-width: 768px) { .approach { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.approach-item { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: minmax(40px, auto) auto; gap: 6px 18px; align-content: start; }
.approach-item p { grid-column: 2; }
.approach-item .rev {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 0.95rem;
}
.approach-item h3 { font-size: 1.12rem; line-height: 1.3; align-self: center; }
.approach-item p { color: var(--ink-2); }

/* ── 07 Data ────────────────────────────────────────────────────────────── */
.data-grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .data-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; } }
.data-col { padding: 28px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sheet); }
.data-col-limits { background: transparent; border-style: dashed; border-color: var(--line-strong); }
.ticks, .dashes { display: grid; gap: 16px; list-style: none; padding: 0; }
.ticks li, .dashes li { position: relative; padding-inline-start: 30px; color: var(--ink-2); }
.ticks strong { color: var(--ink); font-weight: 600; }
.ticks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: 0.5em;
  width: 12px;
  height: 7px;
  border-inline-start: 2px solid var(--pass);
  border-bottom: 2px solid var(--pass);
  transform: rotate(-45deg);
}
[dir="rtl"] .ticks li::before { transform: rotate(45deg) scaleX(-1); }
.dashes li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: 0.8em;
  width: 12px;
  height: 2px;
  background: var(--ink-3);
}

/* ── 08 Status ──────────────────────────────────────────────────────────── */
.status-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line-strong);
  font-size: 0.98rem;
}
.status-table th {
  padding: 10px 16px;
  text-align: start;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--sheet);
  border-bottom: 1px solid var(--line-strong);
}
.status-table td {
  padding: 14px 16px;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.status-table td:first-child { width: 1%; white-space: nowrap; }
@media (max-width: 639px) {
  .status-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .status-table, .status-table tbody, .status-table tr, .status-table td { display: block; width: 100%; }
  .status-table td:first-child { padding-bottom: 0; border-bottom: 0; }
  .status-table td:first-child { width: 100%; }
}

.badge {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--paper);
}
.badge-pass { color: var(--pass); border-color: var(--pass); background: var(--pass-tint); }
.badge-warn { color: var(--warn); border-color: var(--warn); background: var(--warn-tint); }

/* ── 10 Contact ─────────────────────────────────────────────────────────── */
.section-contact { background: var(--sheet); border-bottom: 0; }
.contact-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; } }
.contact-copy { display: grid; gap: 16px; }
.contact-copy .section-label { margin-bottom: 4px; }
.contact-direct { color: var(--ink-2); }

.form-card {
  padding: 28px 24px;
  background: var(--sheet-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
@media (min-width: 640px) { .form-card { padding: 36px 32px; } }

.contact-form { display: grid; gap: 20px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 500; font-size: 0.95rem; }
.optional {
  margin-inline-start: 6px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
}
.field textarea { resize: vertical; min-height: 128px; }
.field select { appearance: none; padding-inline-end: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
[dir="rtl"] .field select { background-position: 15px 50%, 20px 50%; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-2); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
/* Same specificity as the base input rules above, and later, so it wins. */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--fail); background: var(--fail-tint); }
.field-check input[aria-invalid="true"] { outline: 2px solid var(--fail); outline-offset: 2px; }
.field-hint { font-size: 0.85rem; color: var(--ink-3); }
.field-error {
  font-size: 0.88rem;
  color: var(--fail);
  font-weight: 500;
}
.field-error::before { content: "× "; font-family: var(--font-mono); }

.field-check { grid-template-columns: auto 1fr; align-items: start; gap: 4px 12px; }
.field-check input {
  width: 20px;
  height: 20px;
  margin: 3px 0 0;
  accent-color: var(--accent);
}
.field-check label { font-weight: 400; font-size: 0.93rem; color: var(--ink-2); }
.field-check .field-error { grid-column: 2; }

/* Honeypot: off-screen for people, still in the DOM for bots. */
.field-hp { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form-actions { display: grid; gap: 10px; justify-items: start; }
.form-note { font-size: 0.86rem; color: var(--ink-3); }

.form-summary {
  padding: 14px 16px;
  border: 1px solid var(--fail);
  border-inline-start-width: 4px;
  background: var(--fail-tint);
  border-radius: var(--radius);
}
.form-summary:focus { outline: 2px solid var(--fail); outline-offset: 2px; }
.form-summary-title { font-weight: 600; color: var(--ink); }
.form-summary ul { margin-top: 6px; padding-inline-start: 1.1em; }
.form-summary a { color: var(--fail); }

.form-status:empty { display: none; }
.form-status {
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-inline-start-width: 4px;
  border-radius: var(--radius);
  font-size: 0.95rem;
}
.form-status:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-status[data-state="success"] { border-color: var(--pass); background: var(--pass-tint); }
.form-status[data-state="error"] { border-color: var(--fail); background: var(--fail-tint); }
.form-status[data-state="info"] { border-color: var(--accent); background: var(--accent-tint); }
.form-status[data-state="sending"] { border-color: var(--line-strong); background: var(--paper); }
.form-status p + p { margin-top: 6px; }
.copy-btn {
  margin-top: 8px;
  padding: 4px 10px;
  background: transparent;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: 2px;
  font: 500 0.85rem/1.4 var(--font-sans);
  cursor: pointer;
}

/* ── Plain pages (privacy, 404) ─────────────────────────────────────────── */
.page { padding-block: 56px 96px; }
.prose { max-width: 46rem; }
.prose h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  margin-bottom: 8px;
}
.prose h2 { font-size: 1.3rem; margin: 40px 0 12px; }
.prose p, .prose ul { color: var(--ink-2); }
.prose p + p { margin-top: 14px; }
.prose ul { display: grid; gap: 8px; padding-inline-start: 1.2em; }
.prose .lead { font-size: 1.15rem; color: var(--ink); margin-top: 24px; }
.meta-line { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink-3); }
.actions-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.page-404 { min-height: 55vh; }

/* ── Footer: the drawing's title block ──────────────────────────────────── */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-ink-2);
  padding-top: 56px;
  font-size: 0.95rem;
}
.site-footer a { color: var(--footer-ink); }
.site-footer a:hover { color: var(--footer-ink); }
.site-footer .brand, .site-footer .brand:hover { color: var(--footer-ink); }
.site-footer .brand-sub { color: var(--footer-ink-2); }
.site-footer .brand-mark .mark-bolt { fill: #53C1E9; }
.footer-grid {
  display: grid;
  gap: 32px;
  padding-bottom: 40px;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.footer-brand p { margin-top: 14px; max-width: 26em; }
.footer-head {
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--footer-ink-2);
}
.footer-nav ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.footer-nav a, .footer-contact a { text-decoration: none; }
.footer-nav a:hover, .footer-contact a:hover { text-decoration: underline; }
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 20px 28px;
  border-top: 1px solid var(--footer-line);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  line-height: 1.6;
}
.site-footer-slim { padding-top: 0; }
.site-footer-slim .footer-meta { border-top: 0; }

/* ── Motion and print ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
  .site-header, .skip-link, .preview-banner, .form-card, .tour-tabs { display: none !important; }
  .tour-panel[hidden] { display: grid !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 24px; }
}