/* WardTower site

   The idea: the operations record. A security team is judged on what it can show afterwards, so
   the page is built like a well-kept case file: content sits in contained, ruled panels, every
   label is plain words, and data (times, case numbers, identifiers) is set like data.

   Surfaces: navy ink for the header, heroes and footer; white paper for reading; a cool slate
   band to separate sections. Amber is the brand and the only button color, on every surface.

   Type is one family, Archivo, at its regular width with a heavier weight and tight tracking for
   headings. IBM Plex Mono is for timestamps and identifiers inside the examples, nothing else.

   Corners are square throughout, like ruled forms. Only true circles (status dots, the watch
   needle) are round. */

:root {
  /* Ink: header, heroes, dark bands, footer */
  --night: #0b1622;
  --night-2: #111f2e;
  --night-3: #18293b;
  --night-deep: #07101a;

  /* Paper */
  --paper: #ffffff;
  --mist: #f3f5f8;
  --mist-2: #e9edf2;

  /* Brand and signals */
  --lamp: #f0a23b;
  --lamp-2: #f6b45c;
  --lamp-ink: #1d1305;
  --red: #d4553f;
  --green: #2f9a70;
  --blue: #86a9d8;

  /* Text and rules on paper (the default) */
  --text: #0d1926;
  --text-2: #445368;
  --text-3: #637287;
  --rule: #e0e5eb;
  --rule-2: #c5ced9;
  --accent: #985a0c;
  --focus: #0d1926;
  --bg: var(--paper);
  --panel: var(--paper);
  --panel-line: var(--rule);

  --font: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --head-w: 100%;

  --max: 1240px;
  --pad: clamp(16px, 4vw, 40px);
  --gap: clamp(16px, 2vw, 24px);
  --nav-h: 72px;
  --space: clamp(72px, 8.5vw, 120px);
  color-scheme: light;
}

/* Ink surfaces swap the same tokens */
.hero, .page-hero, .section--dark, .footer, .nav, .announce, .menu, .notfound, .cta, .closing {
  --text: #edf1f5;
  --text-2: #a9b5c3;
  --text-3: #8391a3;
  --rule: #213345;
  --rule-2: #314659;
  --accent: var(--lamp);
  --focus: var(--lamp);
  --bg: var(--night);
  --panel: var(--night-2);
  --panel-line: #223548;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background: var(--paper);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html, body { overflow-x: clip; }
a { color: inherit; }
img, svg { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: rgba(240, 162, 59, 0.35); }

.icon { width: 20px; height: 20px; flex: none; display: inline-block; }
.icon--sm { width: 15px; height: 15px; }
.icon--xs { width: 12px; height: 12px; }

.skip {
  position: absolute; left: 12px; top: 12px; z-index: 200; transform: translateY(-200%);
  padding: 10px 14px; border-radius: 0; background: var(--lamp); color: var(--lamp-ink); font-weight: 600; text-decoration: none;
}
.skip:focus { transform: none; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Type. Scale on a 17px body: 14, 17, 20, 24, 30, 40, 52, 68 */
h1, h2, h3, h4 { margin: 0; color: var(--text); text-wrap: balance; font-weight: 640; font-stretch: var(--head-w); }
h1 { font-size: clamp(2.4rem, 4.9vw, 4rem); line-height: 1.05; letter-spacing: -0.022em; font-weight: 650; }
h2 { font-size: clamp(1.85rem, 3.1vw, 2.65rem); line-height: 1.1; letter-spacing: -0.022em; }
h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 620; }
h1 em, h2 em, .bigquote em { font-style: normal; color: var(--text-3); }
p { margin: 0 0 1rem; }
.grad { color: var(--accent); }
.lead { max-width: 40rem; color: var(--text-2); font-size: clamp(1.06rem, 1.3vw, 1.2rem); line-height: 1.6; }
.muted { color: var(--text-3); }

/* The line above a page heading: what the page is, in plain words */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 1.5rem; color: var(--text-2);
  font-size: 0.95rem; font-weight: 550; line-height: 1.4;
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 0 4px rgba(240, 162, 59, 0.18); }
.eyebrow a { text-decoration: none; }

/* Section labels */
.kicker { margin: 0 0 0.9rem; color: var(--accent); font-size: 0.95rem; font-weight: 620; line-height: 1.4; }

.pill {
  display: inline-block; margin-left: 6px; padding: 2px 8px 3px; border-radius: 0;
  background: rgba(240, 162, 59, 0.16); color: var(--accent);
  font-style: normal; font-size: 0.72rem; font-weight: 600; line-height: 1.25;
  vertical-align: 2px; white-space: nowrap; letter-spacing: 0.01em;
}
.hero .pill, .page-hero .pill, .nav .pill, .menu .pill { color: var(--lamp-2); }

/* Buttons: amber is the one call to action on every surface */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: 0;
  font-family: var(--font); font-weight: 620; font-size: 0.98rem; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn .icon { display: none; }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 0.93rem; }
.btn--primary { background: var(--lamp); color: var(--lamp-ink); }
.btn--primary:hover { background: var(--lamp-2); }
.btn--ghost { border-color: var(--rule-2); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--text-2); background: rgba(127, 140, 160, 0.08); }
.btn:disabled { opacity: 0.6; cursor: progress; }

.link-arrow {
  display: inline-block; color: var(--text); font-weight: 620;
  text-decoration: underline; text-decoration-color: var(--lamp); text-decoration-thickness: 2px; text-underline-offset: 6px;
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
.link-arrow .icon { display: none; }
.link-arrow:hover { color: var(--accent); }

/* Announcement */
.announce { position: relative; z-index: 60; background: var(--night-deep); border-bottom: 1px solid var(--rule); }
.announce__link {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 12px;
  max-width: var(--max); margin: 0 auto; padding: 9px var(--pad); text-align: center; text-decoration: none; font-size: 0.88rem; color: var(--text-2);
}
.announce__tag { padding: 1px 8px; border-radius: 0; background: rgba(240, 162, 59, 0.16); color: var(--lamp); font-weight: 620; font-size: 0.8rem; }
.announce__cta { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 4px; }
.announce__cta .icon { display: none; }
.announce__link:hover .announce__cta { text-decoration-color: var(--lamp); }

/* Nav */
.nav { position: sticky; top: 0; z-index: 50; background: var(--night); border-bottom: 1px solid var(--rule); color: var(--text); }
.nav.is-scrolled { background: rgba(11, 22, 34, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav__inner { display: flex; align-items: center; gap: 40px; max-width: var(--max); height: var(--nav-h); margin: 0 auto; padding: 0 var(--pad); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.wordmark__logo { display: block; width: auto; height: 36px; }
.footer .wordmark__logo { height: 42px; }
.nav__main { flex: 1; }
.nav__links { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav__links > li > a, .nav__trigger {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 0; border-radius: 0; background: none;
  color: var(--text-2); font-size: 0.96rem; font-weight: 520; text-decoration: none; cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease;
}
.nav__links > li > a:hover, .nav__trigger:hover, .nav__group.is-open .nav__trigger { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.nav__links > li > a[aria-current="page"] { color: var(--text); }
.nav__trigger .icon { opacity: 0.6; transition: transform 0.2s ease; }
.nav__group.is-open .nav__trigger .icon { transform: rotate(180deg); }
.nav__group { position: relative; display: flex; align-items: center; height: var(--nav-h); }
.nav__panel {
  position: absolute; top: calc(100% - 10px); left: 0; display: grid; width: 330px; padding: 8px;
  border: 1px solid var(--rule-2); border-radius: 0; background: var(--night-2);
  box-shadow: 0 24px 48px -16px rgba(2, 6, 12, 0.7);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.nav__panel--wide { width: 660px; grid-template-columns: 1.15fr 1fr; gap: 8px; }
.nav__group.is-open .nav__panel { opacity: 1; visibility: visible; transform: none; }
.nav__items { display: grid; align-content: start; }
.nav__item { display: grid; gap: 2px; padding: 11px 14px; border-radius: 0; text-decoration: none; transition: background-color 0.15s ease; }
.nav__item:hover, .nav__item:focus-visible { background: var(--night-3); }
.nav__item strong { font-size: 0.97rem; font-weight: 620; color: var(--text); }
.nav__item > span { color: var(--text-3); font-size: 0.86rem; line-height: 1.4; }
.nav__item[aria-current="page"] strong { color: var(--lamp); }
.nav__feature {
  display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 0; text-decoration: none;
  background: var(--night); border: 1px solid var(--rule);
}
.nav__feature:hover { border-color: var(--rule-2); }
.nav__feature-tag { color: var(--lamp); font-size: 0.86rem; font-weight: 620; }
.nav__feature strong { font-size: 1.22rem; font-weight: 640; letter-spacing: -0.015em; line-height: 1.2; color: var(--text); }
.nav__feature span:last-child { color: var(--text-3); font-size: 0.87rem; }
.nav__actions { display: flex; align-items: center; gap: 20px; }
.nav__link { color: var(--text-2); font-size: 0.95rem; font-weight: 520; text-decoration: none; }
.nav__link:hover { color: var(--text); }
.nav__burger { display: none; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 1px solid var(--rule-2); border-radius: 0; background: none; cursor: pointer; }
.nav__burger span { display: block; width: 18px; height: 1.5px; margin: 5px auto; background: var(--text); }

.menu {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; overflow-y: auto;
  padding: 14px var(--pad) 40px; background: var(--night); color: var(--text);
  opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s;
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu[hidden] { display: none; }
.menu__top { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-bottom: 8px; }
.menu a:not(.btn) { padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 1.28rem; font-weight: 620; letter-spacing: -0.012em; line-height: 1.2; text-decoration: none; }
.menu__label { margin: 28px 0 2px; color: var(--lamp); font-size: 0.88rem; font-weight: 620; }
.menu__close { padding: 10px 16px; border: 1px solid var(--rule-2); border-radius: 0; background: none; cursor: pointer; }
.menu__cta { margin-top: 32px; align-self: stretch; }
.menu__desc { display: block; margin-top: 3px; font-size: 0.9rem; font-weight: 400; letter-spacing: 0; color: var(--text-3); }
.menu__incident { margin: 8px 0 4px; justify-content: flex-start; white-space: normal; }

@media (max-width: 1080px) {
  .nav__main, .nav__actions { display: none; }
  .nav__burger { display: block; }
}

.cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }

/* Heroes. A quiet grid of hairlines sits behind the ink, like the ruled sheet of a log. */
.hero, .page-hero {
  position: relative; background-color: var(--night); color: var(--text);
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
}
.hero { padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 104px); }
.hero__copy { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.hero__copy > * { grid-column: 1 / span 9; }
.hero__copy h1 { margin-bottom: 1.6rem; }
.hero__copy .lead { grid-column: 1 / span 7; margin-bottom: 2.2rem; }
.hero__copy .hero__ctas, .hero__copy .hero__note { grid-column: 1 / -1; }
.hero__copy .hero__note { margin: 20px 0 0; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__note { color: var(--text-3); font-size: 0.95rem; }
.hero__note a { color: var(--text); font-weight: 600; text-underline-offset: 4px; text-decoration-color: var(--lamp); }
.hero__visual { position: relative; z-index: 1; margin-top: clamp(48px, 6vw, 72px); }

/* A hero with a preview lets it hang over into the section below */
.hero:has(.hero__visual), .page-hero:has(.ui-wrap) {
  padding-bottom: 0;
  background-image:
    linear-gradient(var(--night) 0 calc(100% - 180px), var(--bg-after, var(--paper)) calc(100% - 180px)),
    linear-gradient(to right, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 100% 100%, 64px 64px, 64px 64px;
}
.hero:has(+ .section--band), .page-hero:has(+ .section--band) { --bg-after: var(--mist); }
:is(.hero, .page-hero):has(.hero__visual, .ui-wrap) .ui-wrap { padding-bottom: 0; }
:is(.hero:has(.hero__visual), .page-hero:has(.ui-wrap)) + .section { padding-top: clamp(64px, 7vw, 96px); }

.page-hero { padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 7vw, 96px); }
.page-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.page-hero__grid > div:first-child { grid-column: 1 / span 9; }
.page-hero__grid > :not(:first-child) { grid-column: 1 / -1; margin-top: clamp(48px, 6vw, 72px); }
.page-hero__grid > .watch + div { margin-top: clamp(32px, 4vw, 48px); }
.page-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.75rem); margin-bottom: 1.5rem; }
.page-hero .lead { margin-bottom: 2.2rem; }
.page-hero__single { max-width: 900px; }

@media (max-width: 900px) {
  .hero__copy > *, .hero__copy .lead { grid-column: 1 / -1; }
  .page-hero__grid > div:first-child { grid-column: 1 / -1; }
  .hero:has(.hero__visual), .page-hero:has(.ui-wrap) {
    background-image:
      linear-gradient(var(--night) 0 calc(100% - 90px), var(--bg-after, var(--paper)) calc(100% - 90px)),
      linear-gradient(to right, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  }
}
@media (max-width: 480px) {
  .hero__ctas .btn { flex: 1 1 100%; }
}

/* The watch: a 24-hour band in its own instrument panel. Office hours on a dotted, unwatched
   track; our analysts on all of it; a needle at the visitor's own local time. The one moving
   thing on the page. */
.watch {
  --name: 8.5rem;
  --h-row: 30px;
  display: grid; grid-template-columns: var(--name) minmax(0, 1fr); column-gap: 20px;
  grid-template-rows: 26px var(--h-row) var(--h-row) 30px;
  margin-top: clamp(48px, 6vw, 72px); padding: 22px clamp(18px, 2.4vw, 32px) 20px;
  border: 1px solid var(--panel-line); border-radius: 0; background: rgba(17, 31, 46, 0.72);
  color: var(--text);
}
.watch__name { grid-column: 1; align-self: center; color: var(--text-2); font-size: 0.92rem; font-weight: 520; line-height: 1.2; }
.watch__name--office { grid-row: 2; }
.watch__name--us { grid-row: 3; color: var(--text); font-weight: 640; }
.watch__field { position: relative; grid-column: 2; grid-row: 1 / -1; }
.watch__scale {
  position: absolute; left: 0; right: 0; top: 0; height: 26px;
  background-image: linear-gradient(to right, var(--rule-2) 1px, transparent 1px);
  background-size: calc(100% / 24) 5px; background-repeat: repeat-x; background-position: 0 100%;
  border-right: 1px solid var(--rule-2);
}
.watch__scale span {
  position: absolute; bottom: 9px; left: calc(var(--h) / 24 * 100%); transform: translateX(-50%);
  color: var(--text-3); font-family: var(--mono); font-size: 0.74rem; line-height: 1;
}
.watch__scale span:first-child { transform: none; }
.watch__scale span:last-child { transform: translateX(-100%); }
.watch__track { position: absolute; left: 0; right: 0; height: 10px; }
.watch__track--office { top: calc(26px + var(--h-row) / 2 - 5px); background: radial-gradient(circle, var(--rule-2) 1.2px, transparent 1.6px) 0 50% / 8px 10px repeat-x; }
.watch__track--us { top: calc(26px + var(--h-row) * 1.5 - 5px); }
.watch__bar { position: absolute; top: 0; bottom: 0; border-radius: 0; }
.watch__bar--office { left: calc(9 / 24 * 100%); width: calc(9 / 24 * 100%); background: #7c8a9c; }
.watch__bar--us { left: 0; right: 0; background: var(--lamp); transform-origin: left center; }
.watch__now {
  position: absolute; top: 2px; bottom: 0; left: calc(var(--t, 3) / 24 * 100%);
  width: 0; border-left: 2px solid var(--text);
}
.watch__now::after {
  content: ""; position: absolute; left: -7px; top: calc(24px + var(--h-row) * 1.5 - 7px);
  width: 12px; height: 12px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 4px var(--night-2);
}
.watch__time {
  position: absolute; bottom: 0; left: 8px; color: var(--text); font-family: var(--mono); font-size: 0.82rem; font-weight: 500;
  white-space: nowrap; line-height: 1.2;
}
.watch__now.is-late .watch__time { left: auto; right: 10px; }
.watch.is-arming .watch__now { left: 0; }
.watch.is-arming .watch__bar--us { transform: scaleX(0); }
.watch.is-running .watch__now { transition: left 1.6s cubic-bezier(0.25, 0.7, 0.2, 1); }
.watch.is-running .watch__bar--us { transition: transform 1.6s cubic-bezier(0.25, 0.7, 0.2, 1); }
@media (max-width: 640px) {
  .watch { --name: 5.2rem; column-gap: 12px; }
  .watch__name { font-size: 0.84rem; }
  .watch__scale span.watch__minor, .watch__scale span:first-child, .watch__scale span:last-child { display: none; }
}

/* Product examples: always ink, like a window of the app */
.ui {
  --text: #e8edf3; --text-2: #a7b4c3; --text-3: #8392a4; --rule: #223447; --rule-2: #33475d;
  --ink: #e8edf3; --ink-2: #a7b4c3; --card-line: #3a4f66;
  position: relative; overflow: hidden; border: 1px solid #263a50; border-radius: 0;
  background: #0f1c2a; color: var(--text);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 40px 80px -36px rgba(4, 10, 18, 0.65), 0 12px 24px -12px rgba(4, 10, 18, 0.35);
  font-size: 13px; line-height: 1.45; text-align: left;
}
.ui__bar { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 16px; border-bottom: 1px solid var(--rule); background: #0b1622; }
.ui__dots { display: none; }
.ui__bar::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 0 3px rgba(240, 162, 59, 0.2); }
.ui__crumb { color: var(--text-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui__crumb b { color: var(--text); font-weight: 500; }
.ui__bar-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ui__body { display: grid; grid-template-columns: 180px minmax(0, 1fr) 290px; min-height: 420px; }
.ui__side { padding: 12px 8px; border-right: 1px solid var(--rule); background: #0d1926; }
.ui__nav { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 0; color: var(--text-3); }
.ui__nav .icon { width: 14px; height: 14px; }
.ui__nav.is-on { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.ui__side-label { margin: 16px 10px 6px; font-size: 11px; font-weight: 600; color: var(--text-3); }
.ui__main { padding: 18px 20px; min-width: 0; }
.ui__aside { padding: 18px; border-left: 1px solid var(--rule); background: #0d1926; }
.ui__h { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--text); }
.ui__sub { margin: 0 0 14px; color: var(--text-3); }
.ui__label { margin: 18px 0 8px; font-size: 11px; font-weight: 600; color: var(--text-3); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px solid currentColor; border-radius: 0; font-size: 11px; font-weight: 600; white-space: nowrap; }
.chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.chip--amber { color: var(--lamp); }
.chip--blue { color: var(--blue); }
.chip--green { color: #4fbf91; }
.chip--red { color: #ec7a64; }
.chip--grey { color: var(--text-3); }
.ui__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ui__graph {
  position: relative; height: 170px; margin: 6px 0 4px; border: 1px solid var(--rule); border-radius: 0;
  background-color: #0b1622;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 14px 14px;
}
.ui__graph svg { width: 100%; height: 100%; }
.ui__graph svg text { font-size: 12px; font-family: var(--mono); }
.ui__steps { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.ui__steps li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 2px; border-bottom: 1px solid var(--rule); }
.ui__steps .icon { width: 14px; height: 14px; margin-top: 2px; }
.ui__steps li span { color: var(--text-2); }
.ui__steps li b { color: var(--text); font-weight: 600; }
.ui__ok { color: #4fbf91; }
.ui__warn { color: var(--lamp); }
.ui__bad { color: #ec7a64; }
.ui__card { padding: 4px 14px 12px; border: 1px solid var(--rule); border-radius: 0; background: #132233; }
.ui__card + .ui__card { margin-top: 12px; }
.ui__card--hot { border-color: rgba(240, 162, 59, 0.6); }
.ui__row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; color: var(--text-3); border-bottom: 1px solid var(--rule); }
.ui__row:last-child { border-bottom: 0; }
.ui__row b { color: var(--text); font-weight: 500; text-align: right; }
.ui__btns { display: flex; gap: 8px; margin-top: 12px; }
.ui__btn { flex: 1; padding: 8px 10px; border-radius: 0; border: 1px solid var(--rule-2); text-align: center; font-weight: 600; font-size: 12px; color: var(--text); }
.ui__btn--go { border-color: var(--lamp); background: var(--lamp); color: var(--lamp-ink); }
.ui__table { width: 100%; border-collapse: collapse; }
.ui__table th { padding: 8px 10px; border-bottom: 1px solid var(--rule); text-align: left; font-size: 11px; font-weight: 600; color: var(--text-3); }
.ui__table td { padding: 10px; border-bottom: 1px solid var(--rule); color: var(--text-2); white-space: nowrap; }
.ui__table td:first-child { color: var(--text); }
.ui__table tr:last-child td { border-bottom: 0; }
.ui__table tr.is-hot td { background: rgba(240, 162, 59, 0.07); }
.ui__mono { font-family: var(--mono); font-size: 12px; }
.ui__log { margin: 0; padding: 14px 16px; font-family: var(--mono); font-size: 12px; line-height: 1.8; color: var(--text-3); white-space: pre-wrap; word-break: break-word; }
.ui__log .hit { display: block; margin: 2px -16px; padding: 2px 14px; background: rgba(212, 85, 63, 0.12); border-left: 2px solid #ec7a64; color: var(--text); }
.ui .muted { color: var(--text-3); }
.ui--compact .ui__body { grid-template-columns: 1fr; min-height: 0; }
.ui--split .ui__body { grid-template-columns: minmax(0, 1fr) 260px; min-height: 0; }
.ui__example { padding: 2px 8px; border-radius: 0; background: rgba(255, 255, 255, 0.07); font-size: 11px; font-weight: 500; color: var(--text-2); }
.ui-wrap { container-type: inline-size; min-width: 0; }
@container (max-width: 980px) { .ui__body { grid-template-columns: minmax(0, 1fr) 250px; } .ui__side { display: none; } }
@container (max-width: 620px) {
  .ui__body, .ui--split .ui__body { grid-template-columns: 1fr; }
  .ui__aside { border-left: 0; border-top: 1px solid var(--rule); }
  .ui__hide-sm { display: none; }
}
@container (max-width: 520px) { .ui__graph { display: none; } .ui__bar-end .ui__example { display: none; } }

/* Sections */
.section { position: relative; padding: var(--space) 0; background: var(--bg); color: var(--text); }
.section--tight { padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(56px, 7vw, 88px); }
.section--band { --bg: var(--mist); }
.section--white { --bg: var(--paper); }
.section--dark { background: var(--night); }
.section + .section:not(.section--band):not(.section--dark):not(.section--white) { border-top: 1px solid var(--rule); }
.section--band + .section, .section--dark + .section, .section + .section--band, .section + .section--dark { border-top: 0; }
.section--band { --panel: var(--paper); }

/* Section heads: label, heading and lead, stacked and left aligned */
.section__head { max-width: 50rem; margin-bottom: clamp(40px, 5vw, 64px); }
.section__head h2 { max-width: 22em; margin-bottom: 1.1rem; }
.section__head .lead { margin-bottom: 0; }
.section__head > :last-child { margin-bottom: 0; }

/* Text grids */
.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1020px) { .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Panels */
.card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: clamp(22px, 2.4vw, 30px); border: 1px solid var(--panel-line); border-radius: 0; background: var(--panel);
}
.card p { margin: 0; color: var(--text-2); font-size: 1rem; }
.card h3 { font-size: 1.18rem; }
a.card { text-decoration: none; transition: border-color 0.15s ease; }
a.card:hover { border-color: var(--rule-2); }
a.card h2, a.card h3 { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color 0.15s ease; }
a.card:hover h2, a.card:hover h3 { text-decoration-color: var(--lamp); }
.card .link-arrow { align-self: flex-start; margin-top: auto; padding-top: 6px; }
.card__tag { color: var(--accent); font-size: 0.9rem; font-weight: 620; }
.card a { color: var(--text); text-underline-offset: 3px; }
.tile { display: none; }

/* Lists with a drawn tick */
.checks { display: grid; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.checks li { position: relative; padding-left: 30px; color: var(--text); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 0.28em; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(240, 162, 59, 0.16);
}
.checks li::after {
  content: ""; position: absolute; left: 5px; top: calc(0.28em + 5px); width: 8px; height: 4.5px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
.checks .icon { display: none; }

/* Home: services side by side, copy and previews on shared rows */
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: clamp(32px, 5vw, 72px); }
.service { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.service__copy { display: flex; flex-direction: column; gap: 16px; padding-bottom: 40px; }
.service__copy h3 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); letter-spacing: -0.02em; line-height: 1.1; }
.service__copy p { margin: 0; color: var(--text-2); }
.service__copy .checks { margin: 4px 0 8px; }
.service__copy .link-arrow { align-self: flex-start; margin-top: auto; }
.service__num { display: none; }
.service__visual { align-self: start; }
@media (max-width: 900px) {
  .services { grid-template-columns: 1fr; row-gap: 72px; }
  .service { grid-row: auto; grid-template-rows: auto; }
}

/* Tools we work with: one ruled register */
.tools {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--panel-line); border-radius: 0; background: var(--panel); overflow: hidden;
}
.tools__group { padding: 22px 24px 24px; }
.tools__group + .tools__group { border-left: 1px solid var(--rule); }
.tools__group--wide { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--rule); background: var(--mist); }
.tools__label { margin: 0 0 12px; color: var(--accent); font-size: 0.9rem; font-weight: 620; }
.tools__group ul { margin: 0; padding: 0; list-style: none; }
.tools__group li { padding: 5px 0; font-size: 1.02rem; font-weight: 560; color: var(--text); }
.tools__group--wide ul { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gap); }
.tools__note { margin: 24px 0 0; max-width: 46rem; font-size: 0.95rem; color: var(--text-2); }
@media (max-width: 900px) {
  .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tools__group:nth-child(3) { border-left: 0; }
  .tools__group:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .tools__group--wide ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .tools { grid-template-columns: 1fr; }
  .tools__group + .tools__group { border-left: 0; border-top: 1px solid var(--rule); }
  .tools__group--wide ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Facts row: a ruled strip of figures */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--panel-line); border-radius: 0; background: var(--panel); }
.fact { padding: 26px 28px 28px; }
.fact + .fact { border-left: 1px solid var(--rule); }
.fact__v { margin-bottom: 10px; font-size: clamp(2.3rem, 3.6vw, 3.1rem); font-weight: 660; line-height: 1; letter-spacing: -0.03em; color: var(--text); }
.fact__k { max-width: 24ch; color: var(--text-2); font-size: 0.98rem; line-height: 1.45; }
@media (max-width: 900px) {
  .facts { grid-template-columns: 1fr 1fr; }
  .fact:nth-child(3) { border-left: 0; }
  .fact:nth-child(n + 3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 480px) {
  .facts { grid-template-columns: 1fr; }
  .fact + .fact { border-left: 0; border-top: 1px solid var(--rule); }
}

/* Platform tabs */
.tabs__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: clamp(36px, 4vw, 56px); padding: 6px; border: 1px solid var(--panel-line); border-radius: 0; background: var(--panel); }
.tabs__tab {
  display: grid; gap: 2px; justify-items: start; padding: 14px 18px; border: 0; border-radius: 0; background: none;
  color: var(--text-3); text-align: left; cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease;
}
.tabs__tab .icon { display: none; }
.tabs__tab strong { font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 640; letter-spacing: -0.015em; line-height: 1.15; color: inherit; }
.tabs__tab span { font-size: 0.92rem; color: var(--text-3); }
.tabs__tab:hover { color: var(--text-2); background: var(--mist); }
.tabs__tab[aria-selected="true"] { color: var(--text); background: var(--mist-2); box-shadow: inset 3px 0 0 var(--lamp); }
.tabs__tab[aria-selected="true"] span { color: var(--text-2); }
.tabs__panel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.tabs__panel > :first-child { grid-column: 1 / span 4; }
.tabs__panel > :last-child { grid-column: 6 / -1; }
.tabs__panel[hidden] { display: none; }
.tabs__panel h3 { font-size: clamp(1.6rem, 2.4vw, 2rem); letter-spacing: -0.02em; line-height: 1.12; margin-bottom: 1rem; }
.tabs__panel p { color: var(--text-2); }
.tabs__panel .checks { margin: 22px 0 30px; }
@media (max-width: 960px) {
  .tabs__panel > :first-child, .tabs__panel > :last-child { grid-column: 1 / -1; }
  .tabs__panel > :last-child { margin-top: 40px; }
}
@media (max-width: 640px) {
  .tabs__list { grid-template-columns: 1fr; }
}

/* Feature rows: copy and preview share a top line */
.feature { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; align-items: start; }
.feature > :first-child { grid-column: 1 / span 5; }
.feature > :last-child { grid-column: 7 / -1; }
.feature--flip > :first-child { grid-column: 8 / -1; order: 2; }
.feature--flip > :last-child { grid-column: 1 / span 6; grid-row: 1; }
.feature + .feature { margin-top: var(--space); }
.feature h2 { margin-bottom: 1.1rem; }
.feature .checks { margin-top: 1.4rem; margin-bottom: 2rem; }
.feature .lead { font-size: 1.1rem; }
.feature .bento { column-gap: var(--gap); row-gap: var(--gap); }
@media (max-width: 960px) {
  .feature > :first-child, .feature > :last-child, .feature--flip > :first-child, .feature--flip > :last-child { grid-column: 1 / -1; grid-row: auto; order: 0; }
}

/* Steps: a real sequence, drawn as stations on one rail */
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; margin: 0; padding: 0; list-style: none; counter-reset: flow; }
.flow--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.flow li { position: relative; counter-increment: flow; padding-top: 60px; padding-right: 8px; }
.flow li::before {
  content: counter(flow); position: absolute; top: 0; left: 0; z-index: 1;
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 0;
  background: var(--night); color: var(--lamp);
  font-family: var(--mono); font-size: 0.95rem; font-weight: 500;
}
.section--dark .flow li::before { background: var(--night-3); }
.flow li::after { content: ""; position: absolute; top: 17px; left: 48px; right: calc(-1 * var(--gap) + 12px); height: 2px; background: var(--rule-2); }
.flow li:last-child::after { display: none; }
.flow__node { display: none; }
.flow h3 { margin-bottom: 8px; font-size: 1.2rem; }
.flow p { margin: 0; color: var(--text-2); font-size: 0.98rem; }
@media (max-width: 1020px) {
  .flow, .flow--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow li:nth-child(2n)::after { display: none; }
}
@media (max-width: 560px) {
  .flow, .flow--5 { grid-template-columns: 1fr; row-gap: 0; }
  .flow li { padding: 0 0 32px 56px; }
  .flow li::after, .flow li:nth-child(2n)::after { display: block; top: 44px; bottom: 8px; left: 17px; right: auto; width: 2px; height: auto; }
  .flow li:last-child::after { display: none; }
  .flow h3 { padding-top: 5px; }
}

/* Bento grids */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); }
.bento > * { grid-column: span 2; }
.bento .span-3 { grid-column: span 3; }
.bento .span-4 { grid-column: span 4; }
@media (max-width: 1020px) { .bento { grid-template-columns: 1fr 1fr; } .bento > *, .bento .span-3, .bento .span-4 { grid-column: span 1 !important; } }
@media (max-width: 680px) { .bento { grid-template-columns: 1fr; } }
.quote-card p { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 640; letter-spacing: -0.02em; line-height: 1.15; color: var(--text); }

/* Principles */
.principles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.principles__quote { grid-column: 1 / span 5; position: sticky; top: calc(var(--nav-h) + 40px); margin: 0; }
.principles__quote blockquote { margin: 0 0 20px; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 640; letter-spacing: -0.022em; line-height: 1.1; }
.principles__quote figcaption { color: var(--text-3); font-size: 0.95rem; }
.principles .grid-2 { grid-column: 7 / -1; }
@media (max-width: 960px) { .principles__quote, .principles .grid-2 { grid-column: 1 / -1; } .principles__quote { position: static; margin-bottom: 56px; } }

/* Label and description rows: tabular, so ruled */
.rows { margin: 0; padding: 0; list-style: none; border: 1px solid var(--panel-line); border-radius: 0; background: var(--panel); }
.rows li { display: grid; grid-template-columns: minmax(150px, 0.42fr) 1fr; gap: 24px; padding: 18px 24px; }
.rows li + li { border-top: 1px solid var(--rule); }
.rows strong { font-weight: 620; }
.rows span { color: var(--text-2); }
.rows a { color: var(--text); text-underline-offset: 3px; }
@media (max-width: 640px) { .rows li { grid-template-columns: 1fr; gap: 4px; padding: 16px 18px; } }
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; align-items: start; }
.split > :first-child { grid-column: 1 / span 5; }
.split > :last-child { grid-column: 7 / -1; }
.split h2 { margin-bottom: 1rem; }
.split h3 { margin-bottom: 14px; }
.split .kicker { margin-bottom: 0.9rem; }
@media (max-width: 900px) { .split > :first-child, .split > :last-child { grid-column: 1 / -1; } }

/* Ink bands */
.band { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 48px; align-items: start; }
.band > :first-child { grid-column: 1 / span 5; }
.band > :last-child { grid-column: 7 / -1; }
.band h2 { margin-bottom: 1.1rem; }
.band p { color: var(--text-2); }
.band .checks { margin: 22px 0 32px; }
@media (max-width: 960px) { .band > :first-child, .band > :last-child { grid-column: 1 / -1; } }

/* Questions */
.faq { border-top: 1px solid var(--rule-2); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 20px 0; cursor: pointer; list-style: none;
  font-size: 1.12rem; font-weight: 620; letter-spacing: -0.01em; line-height: 1.35; transition: color 0.15s ease;
}
.faq summary:hover { color: var(--accent); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { width: 18px; height: 18px; color: var(--text-3); transform: translateY(3px); transition: transform 0.2s ease; }
.faq details[open] summary .icon { transform: translateY(3px) rotate(45deg); color: var(--accent); }
.faq details p { max-width: 44rem; margin: 0; padding: 0 0 24px; color: var(--text-2); }
.faq a { color: var(--text); text-underline-offset: 3px; }
.qa { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.qa > .section__head { grid-column: 1 / span 5; position: sticky; top: calc(var(--nav-h) + 40px); }
.qa > .faq { grid-column: 7 / -1; }
@media (max-width: 900px) { .qa > .section__head, .qa > .faq { grid-column: 1 / -1; position: static; } }

.bigquote {
  max-width: 30ch; margin: var(--space) 0 0; padding-left: clamp(20px, 2.4vw, 32px); border-left: 3px solid var(--lamp);
  font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 640; line-height: 1.12; letter-spacing: -0.022em;
}

/* Closing call to action block */
.cta { position: relative; padding: clamp(32px, 5vw, 64px); border-radius: 0; background: var(--night); color: var(--text); }
.cta h2 { max-width: 22ch; margin: 0 0 1.1rem; }
.cta p { max-width: 42rem; margin: 0 0 2rem; color: var(--text-2); font-size: 1.08rem; }
.cta p:last-child { margin-bottom: 0; }
.cta .kicker { margin-bottom: 0.9rem; }
.cta .checks { max-width: 44rem; margin: 0 0 2rem; }

/* Callout */
.callout { display: flex; gap: 14px; align-items: flex-start; max-width: 40rem; margin-top: 2rem; padding: 14px 18px; border-radius: 0; background: rgba(212, 85, 63, 0.1); border: 1px solid rgba(212, 85, 63, 0.35); color: var(--text-2); }
.callout .icon { display: none; }
.callout a { color: var(--text); font-weight: 600; text-underline-offset: 3px; }

/* Contact form */
.form { display: grid; gap: 18px; padding: clamp(22px, 3vw, 36px); border: 1px solid var(--panel-line); border-radius: 0; background: var(--night-2); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.form label { display: grid; gap: 8px; font-size: 0.92rem; font-weight: 600; color: var(--text-2); }
.form input, .form textarea, .form select { width: 100%; padding: 12px 14px; border: 1px solid #3a4e64; border-radius: 0; background: var(--night); color: var(--text); font-weight: 400; transition: border-color 0.15s ease; }
.form textarea { min-height: 150px; resize: vertical; }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--lamp); box-shadow: 0 0 0 3px rgba(240, 162, 59, 0.22); }
.form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status { margin: 0; min-height: 1.4em; font-size: 0.95rem; }
.form__status[data-kind="ok"] { color: #4fbf91; }
.form__status[data-kind="error"] { color: #ec7a64; }
.form__note { margin: 0; color: var(--text-3); font-size: 0.88rem; }
.form button { justify-self: start; }
.form__alert { margin: 0; padding: 12px 14px; border-left: 3px solid var(--green); border-radius: 0; background: rgba(47, 154, 112, 0.12); color: var(--text); font-size: 0.95rem; }
.form__alert--error { border-left-color: var(--red); background: rgba(212, 85, 63, 0.12); }
.form__alert[hidden] { display: none; }
.form__alert:not(:target) { display: none; }

/* Contact page: form beside the intro on desktop, right after the heading on phones */
.contact-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); grid-template-rows: auto 1fr; row-gap: 32px; align-items: start; }
.contact-hero__intro { grid-column: 1 / span 6; grid-row: 1; }
.contact-hero__more { grid-column: 1 / span 6; grid-row: 2; }
.contact-hero .form { grid-column: 8 / -1; grid-row: 1 / span 2; }
.contact-hero .lead { margin-bottom: 0; }
@media (max-width: 900px) {
  .contact-hero__intro, .contact-hero__more, .contact-hero .form { grid-column: 1 / -1; grid-row: auto; }
}

/* Blog */
.post-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
@media (max-width: 760px) { .post-list { grid-template-columns: 1fr; } }
.post-list h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.post-meta { color: var(--text-3); font-size: 0.92rem; font-weight: 500; }
.post-list--lead { grid-template-columns: 1fr; }
.post-list--lead .card { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.post-list--lead .card > * { grid-column: 4 / -1; }
.post-list--lead .card > .post-meta { grid-column: 1 / span 3; grid-row: 1 / span 3; padding-top: 0.5em; }
.post-list--lead h2 { font-size: clamp(1.9rem, 3.2vw, 2.65rem); }
@media (max-width: 760px) { .post-list--lead .card > *, .post-list--lead .card > .post-meta { grid-column: 1 / -1; grid-row: auto; } }
.post { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.post__toc { grid-column: 1 / span 3; position: sticky; top: calc(var(--nav-h) + 32px); font-size: 0.94rem; }
.post__toc .footer__meta { color: var(--text-3); }
.post__toc ol { display: grid; gap: 0; margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.post__toc li { border-bottom: 1px solid var(--rule); }
.post__toc a { display: block; padding: 9px 0; color: var(--text-2); text-decoration: none; }
.post__toc a:hover { color: var(--accent); }
.post__body { grid-column: 5 / span 7; max-width: 42rem; font-size: 1.1rem; line-height: 1.72; }
.post__body h2 { margin: 3rem 0 1rem; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.post__body p { color: var(--text-2); }
.post__body a { color: var(--accent); }
.shot { margin: 2.4rem 0; }
.shot img { width: 100%; height: auto; border: 1px solid var(--rule-2); border-radius: 0; }
.shot figcaption { margin-top: 10px; color: var(--text-3); font-size: 0.9rem; }
@media (max-width: 900px) { .post__toc, .post__body { grid-column: 1 / -1; } .post__toc { position: static; margin-bottom: 40px; } }

/* Closing block each page sets for itself, or leaves out */
.closing { padding: clamp(56px, 7vw, 96px) 0; background: var(--night-2); color: var(--text); border-bottom: 1px solid var(--rule); }
.closing__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 28px; align-items: end; }
.closing__inner > div:first-child { grid-column: 1 / span 8; }
.closing h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); margin-bottom: 1rem; }
.closing p { margin: 0; color: var(--text-2); font-size: 1.1rem; max-width: 40rem; }
.closing .hero__ctas { grid-column: 9 / -1; justify-content: flex-end; }
@media (max-width: 900px) { .closing__inner > div:first-child, .closing .hero__ctas { grid-column: 1 / -1; justify-content: flex-start; } }

/* Footer */
.footer { position: relative; padding: clamp(56px, 7vw, 88px) 0 36px; background: var(--night); color: var(--text); font-size: 0.96rem; }
.footer__cta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 32px; align-items: end; padding-bottom: clamp(56px, 7vw, 88px); margin-bottom: clamp(48px, 6vw, 64px); border-bottom: 1px solid var(--rule); }
.footer__cta > div:first-child { grid-column: 1 / span 8; }
.footer__cta h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); margin-bottom: 1rem; }
.footer__cta p { margin: 0; color: var(--text-2); font-size: 1.08rem; }
.footer__cta-actions { grid-column: 9 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; }
.footer__brand { grid-column: 1 / span 4; }
.footer__grid > nav:nth-of-type(1) { grid-column: 6 / span 2; }
.footer__grid > nav:nth-of-type(2) { grid-column: 8 / span 2; }
.footer__grid > nav:nth-of-type(3) { grid-column: 10 / span 2; }
.footer__brand p { max-width: 32ch; margin: 18px 0 16px; color: var(--text-3); }
.footer__mail { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); text-decoration: none; }
.footer__mail:hover { color: var(--lamp); }
.footer__meta { margin: 0 0 14px; color: var(--text-3); font-size: 0.9rem; font-weight: 600; }
.footer__links { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.footer__links a { color: var(--text); text-decoration: none; }
.footer__links a:hover { color: var(--lamp); }
.footer__links small { display: block; color: var(--text-3); font-size: 0.84rem; }
.footer__base { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule); color: var(--text-3); font-size: 0.82rem; }
.footer__base p { margin: 0; }
.footer__legal { margin-top: 10px !important; max-width: 72rem; }
@media (max-width: 900px) {
  .footer__cta > div:first-child, .footer__cta-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__grid > nav:nth-of-type(n) { grid-column: span 4; }
}
@media (max-width: 520px) { .footer__grid > nav:nth-of-type(n) { grid-column: span 6; } }

.notfound { padding: clamp(96px, 16vw, 180px) 0; background: var(--night); color: var(--text); }
.notfound h1 { max-width: 14ch; margin-bottom: 1.4rem; }
.notfound .lead { margin-bottom: 2rem; }

.note { max-width: 44rem; margin-top: 28px; color: var(--text-3); font-size: 0.94rem; }

/* Home: pick a route straight after the hero */
.routes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin: 4px 0 0; padding: 0; list-style: none; }
.routes a { display: block; height: 100%; padding: 22px 24px; border: 1px solid var(--panel-line); border-radius: 0; background: var(--panel); text-decoration: none; }
.routes strong { display: block; font-size: 1.2rem; font-weight: 640; line-height: 1.2; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color 0.15s ease; }
.routes span { display: block; margin-top: 8px; color: var(--text-2); font-size: 0.97rem; }
.routes a:hover strong { text-decoration-color: var(--lamp); }
@media (max-width: 900px) { .routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .routes { grid-template-columns: 1fr; } }

/* Omni: the system on one screen */
.system { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 0; border: 1px solid var(--panel-line); border-radius: 0; background: var(--panel); overflow: hidden; }
.system__col { padding: 24px 28px 28px; }
.system__col + .system__col { border-left: 1px solid var(--rule); }
.system__col--core { background: var(--night); color: #edf1f5; border-left: 0 !important; }
.system__col--core .system__label { color: var(--lamp); }
.system .system__col--core li { color: #d3dbe4; }
.system__label { margin: 0 0 14px; color: var(--accent); font-size: 0.92rem; font-weight: 620; }
.system ul { margin: 0; padding: 0; list-style: none; }
.system li { padding: 6px 0; color: var(--text-2); }
.system__notes { margin-top: 24px; }
@media (max-width: 760px) {
  .system { grid-template-columns: 1fr; }
  .system__col, .system__col + .system__col { padding: 20px; border-left: 0; }
  .system__col + .system__col { border-top: 1px solid var(--rule); }
}

/* Product video, with its text version underneath */
.video { margin: 0; }
.video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--night); border: 1px solid var(--rule-2); border-radius: 0; }
.transcript { margin-top: 20px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.transcript summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; cursor: pointer; list-style: none; font-weight: 600; }
.transcript summary::-webkit-details-marker { display: none; }
.transcript summary .icon { transition: transform 0.2s ease; }
.transcript[open] summary .icon { transform: rotate(45deg); }
.transcript ol { max-width: 48rem; margin: 0 0 24px; padding-left: 1.4rem; color: var(--text-2); }
.transcript li { margin: 0 0 10px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Dark theme: set on <html> by the toggle, or by the system setting when a visitor has not
   chosen. Paper goes to ink; bands and panels step up a shade so sections still read apart from
   the hero. */
:root[data-theme="dark"] {
  --paper: #0e1925;
  --mist: #122130;
  --mist-2: #1a2c3e;
  --text: #edf1f5;
  --text-2: #a9b5c3;
  --text-3: #8391a3;
  --rule: #213345;
  --rule-2: #314659;
  --accent: var(--lamp);
  --focus: var(--lamp);
  --panel: #132332;
  --panel-line: #223548;
  color-scheme: dark;
}
:root[data-theme="dark"] .section--band { --panel: #172a3c; }
:root[data-theme="dark"] .section--dark { background: var(--night-deep); }
:root[data-theme="dark"] .tools__group--wide { background: rgba(255, 255, 255, 0.02); }

.theme-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--rule-2); border-radius: 0; background: none; color: var(--text-2); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; }
.theme-toggle:hover { border-color: var(--text-2); color: var(--text); }
.theme-toggle .icon { width: 18px; height: 18px; }
.theme-toggle .i-moon, :root[data-theme="dark"] .theme-toggle .i-sun { display: inline-block; }
.theme-toggle .i-sun, :root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
.nav__tools { display: none; align-items: center; gap: 10px; margin-left: auto; }
.nav__tools .theme-toggle { width: 44px; height: 44px; }
@media (max-width: 1080px) { .nav__tools { display: flex; } .nav__tools + .nav__burger { margin-left: 0; } }
.nav__link .icon { display: none; }
.menu__top .theme-toggle { margin-left: auto; margin-right: 10px; }

/* Home hero: the promise on the left, an example case file on the right, the watch beneath */
.hero__split { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 88px); row-gap: 56px; align-items: center; }
.hero__split h1 { margin: 0 0 1.6rem; font-size: clamp(2.5rem, 5.2vw, 4.25rem); }
.hero__split .lead { max-width: 34rem; margin: 0 0 2.2rem; }
.hero__split .hero__note { margin: 22px 0 0; }
@media (max-width: 960px) { .hero__split { grid-template-columns: 1fr; } }

/* The case file: a written record, so it is the one paper sheet in the ink hero */
.dossier {
  --text: #0d1926; --text-2: #445368; --text-3: #637287; --rule: #e0e5eb; --accent: #985a0c;
  position: relative; margin-top: 30px; padding: 24px clamp(20px, 2.6vw, 30px) 0;
  border-radius: 0; background: #ffffff; color: var(--text);
  box-shadow: 9px 9px 0 rgba(240, 162, 59, 0.9), 0 40px 80px -36px rgba(2, 6, 12, 0.8);
}
:root[data-theme="dark"] .dossier {
  --text: #edf1f5; --text-2: #a9b5c3; --text-3: #8391a3; --rule: #263a4e; --accent: var(--lamp);
  background: #15263a; box-shadow: 0 0 0 1px #2b4058, 9px 9px 0 rgba(240, 162, 59, 0.75);
}
.dossier__tab {
  position: absolute; top: -30px; left: 0; padding: 7px 16px 6px; border-radius: 0;
  background: inherit; color: var(--text-2); font-size: 0.84rem; font-weight: 620;
}
:root[data-theme="dark"] .dossier__tab { box-shadow: 0 0 0 1px #2b4058; clip-path: inset(-2px -2px 0 -2px); }
.dossier__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); color: var(--text-3); font-family: var(--mono); font-size: 0.8rem; }
.dossier__head span:last-child { padding: 2px 10px; border-radius: 0; background: rgba(47, 154, 112, 0.13); color: #24805c; font-family: var(--font); font-weight: 620; font-size: 0.8rem; }
:root[data-theme="dark"] .dossier__head span:last-child { color: #4fbf91; }
.dossier h2 { margin: 20px 0 8px; font-size: clamp(1.6rem, 2.3vw, 2rem); line-height: 1.1; }
.dossier__sub { margin: 0 0 18px; color: var(--text-2); font-size: 0.9rem; }
.dossier ol { margin: 0; padding: 0; list-style: none; }
.dossier li { padding: 13px 0; border-top: 1px solid var(--rule); }
.dossier li small { display: block; margin-bottom: 3px; color: var(--accent); font-family: var(--mono); font-size: 0.76rem; font-weight: 500; }
.dossier li strong { display: block; font-weight: 620; font-size: 0.97rem; line-height: 1.35; }
.dossier li span { display: block; margin-top: 4px; color: var(--text-2); font-size: 0.86rem; line-height: 1.5; }
.dossier__review { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 4px 0 0; padding: 16px 0 22px; border-top: 2px solid var(--text); font-size: 0.9rem; line-height: 1.5; }
.dossier__review p { margin: 0; }
.dossier__review small { display: block; color: var(--text-3); font-size: 0.8rem; font-weight: 620; }
.dossier__review em { display: block; font-style: normal; color: var(--text-2); }
.dossier__stamp {
  flex: none; padding: 6px 12px; border: 2px solid #24805c; border-radius: 0; color: #24805c;
  font-size: 0.9rem; font-weight: 700; transform: rotate(-5deg);
}
:root[data-theme="dark"] .dossier__stamp { border-color: #4fbf91; color: #4fbf91; }
@media (max-width: 520px) { .dossier__stamp { display: none; } .dossier { box-shadow: 6px 6px 0 rgba(240, 162, 59, 0.9); } }

/* Three plain promises closing the hero */
.belief { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: var(--gap) 0 0; padding: 0; list-style: none; }
.belief li { margin: 0; padding: 20px 24px 22px; border: 1px solid var(--panel-line); border-radius: 0; }
.belief small { display: block; margin-bottom: 6px; color: var(--lamp); font-size: 0.88rem; font-weight: 620; }
.belief span { color: var(--text); font-size: 1.02rem; }
@media (max-width: 760px) { .belief { grid-template-columns: 1fr; } }

/* Section heads with the lead set to the right */
.section__head--split { display: flex; justify-content: space-between; align-items: end; gap: 48px; max-width: none; }
.section__head--split h2 { margin: 0; }
.section__head--split .kicker { margin: 0 0 0.9rem !important; }
.section__head--split .lead { max-width: 30rem; font-size: 1.05rem; }
@media (max-width: 860px) { .section__head--split { display: block; } .section__head--split .lead { margin-top: 18px; } }

/* Services as panels you can open */
.linkrows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.linkrows a {
  position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%;
  padding: clamp(24px, 2.6vw, 32px); padding-right: 56px; border: 1px solid var(--panel-line); border-radius: 0; background: var(--panel);
  text-decoration: none; transition: border-color 0.15s ease;
}
.linkrows a:hover { border-color: var(--rule-2); }
.linkrows__num { display: none; }
.linkrows .icon { position: absolute; top: clamp(24px, 2.6vw, 32px); right: 24px; width: 18px; height: 18px; color: var(--text-3); transition: color 0.15s ease; }
.linkrows a:hover .icon { color: var(--accent); }
.linkrows h3 { font-size: clamp(1.3rem, 1.8vw, 1.5rem); letter-spacing: -0.018em; line-height: 1.2; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: text-decoration-color 0.15s ease; }
.linkrows p { margin: 0; color: var(--text-2); font-size: 1rem; }
.linkrows a:hover h3 { text-decoration-color: var(--lamp); }
@media (max-width: 900px) { .linkrows { grid-template-columns: 1fr; } }

/* The three products, one ruled panel */
.platforms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border: 1px solid var(--panel-line); border-radius: 0; background: var(--panel); }
.platforms > li { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 2.8vw, 36px); }
.platforms > li + li { border-left: 1px solid var(--panel-line); }
.platforms small { color: var(--accent); font-size: 0.9rem; font-weight: 620; }
.platforms h3 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); letter-spacing: -0.025em; line-height: 1.05; }
.platforms h3 a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: text-decoration-color 0.15s ease; }
.platforms h3 a:hover { text-decoration-color: var(--lamp); }
.platforms h3 .icon { display: none; }
.platforms p { margin: 0; color: var(--text-2); }
@media (max-width: 860px) {
  .platforms { grid-template-columns: 1fr; }
  .platforms > li + li { border-left: 0; border-top: 1px solid var(--panel-line); }
}

/* How the pieces fit: a real sequence, read left to right */
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; margin: 24px 0 0; padding: 0; list-style: none; color: var(--text-2); font-size: 0.94rem; font-weight: 520; }
.chain li {
  position: relative; display: inline-flex; align-items: center; padding: 9px 14px; line-height: 1.1; white-space: nowrap;
  border: 1px solid var(--panel-line); border-radius: 0; background: var(--panel);
}
.chain li + li { margin-left: 26px; }
.chain li + li::before { content: ""; position: absolute; left: -27px; top: 50%; width: 26px; height: 1px; background: var(--rule-2); }
.chain li:last-child { border-color: rgba(240, 162, 59, 0.6); color: var(--text); }
@media (max-width: 640px) {
  .chain { flex-direction: column; align-items: flex-start; gap: 0; }
  .chain li + li { margin: 14px 0 0 0; }
  .chain li + li::before { left: 22px; top: -15px; width: 1px; height: 14px; }
}

.footer__tag { margin: 18px 0 0 !important; color: var(--text) !important; font-size: 1.3rem; font-weight: 640; letter-spacing: -0.018em; line-height: 1.2; }
.footer__tag + p { margin-top: 10px !important; }