/* ---- 01-tokens.css ---- */
/* ==========================================================================
   BRONTERA — Midnight Copper
   01 · Tokens
   Derived from Brontera_Midnight_Copper_Brand_Pack_COMPLETE/tokens/brand.css.
   The site uses Brontera colours with a small lavender accent.
   Web-only additions are marked WEB and stay inside the system:
   surfaces are Cream at low alpha over Midnight, never a fourth hue.
   ========================================================================== */

/* ---- fonts: self-hosted, SIL OFL 1.1, see /fonts/OFL-*.txt ---- */
@font-face {
  font-family: 'Commissioner';
  src: url('/fonts/Commissioner-var.woff2') format('woff2-variations');
  font-weight: 350 750;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Commissioner Flare';
  src: url('/fonts/Commissioner-Flare600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'B612 Mono';
  src: url('/fonts/B612Mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'B612 Mono';
  src: url('/fonts/B612Mono-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brontera colours. The warmer site uses one canonical palette. */
  --midnight: #0D1B2A;
  --cream: #F4F0E8;
  --copper: #C76D3A;
  --lavender: #D8D6E4;
  --copper-soft: #EBC4A7;
  --paper: #FFFCF6;
  --surface-base: var(--cream);
  --surface-raised: var(--paper);
  --surface-sunk: #E8E1D6;
  --surface-cream: var(--paper);
  --surface-cream-2: #EBE6DC;
  --ink-on-midnight: var(--midnight);
  --ink-on-midnight-muted: #535961;
  --ink-on-midnight-faint: #62676E;
  --ink-on-cream: var(--midnight);
  --ink-on-cream-muted: #535961;
  --ink-on-cream-faint: #94979B;
  --ink-on-cream-label: #62676E;
  --rule-on-midnight: #D1CCC4;
  --rule-on-midnight-strong: #898B8C;
  --rule-on-midnight-faint: #E1DCD3;
  --rule-on-cream: #D1CCC4;
  --rule-on-cream-strong: #898B8C;
  --signal: var(--copper);
  --signal-hover: #D67F49;
  --signal-press: #B96332;
  --signal-wash: #F5DECD;
  --signal-rule: #D69B76;
  --signal-text: #974A1F;
  --focus-ring: #B6602D;
  --chart-1: var(--copper);
  --chart-2: #283A4D;
  --chart-3: #61717F;
  --chart-4: #D1CCC4;
  --gridline: #D1CCC4;

  /* ---- type families ---- */
  --font-sans: 'Commissioner', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'B612 Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- type scale: the guide's five language sizes + two data sizes.
         Display steps interpolate between the guide's anchors on wide
         viewports, exactly as the guide's own 960x540pt covers do.
         Nothing between the steps. ---- */
  --fs-display-xl: clamp(2.25rem, 1.45rem + 3.55vw, 4.5rem);  /* 36 -> 56 -> 72 */
  --fs-display:    clamp(1.875rem, 1.29rem + 2.61vw, 3.5rem); /* 30 -> 40 -> 56 */
  --fs-heading:    clamp(1.375rem, 1.20rem + 0.74vw, 1.75rem);/* 22 -> 28 */
  --fs-body:       1rem;      /* 16 / 24 */
  --fs-body-lg:    1.125rem;  /* 18 / 28 — lead paragraphs only */
  --fs-small:      0.8125rem; /* 13 / 18 */
  --fs-nav:        0.875rem;  /* 14 / 20 */
  --fs-kpi:        clamp(1.375rem, 1.09rem + 1.27vw, 2.125rem); /* 22 -> 24 -> 34 mono */
  --fs-table:      0.8125rem; /* 13 / 18 mono */
  --fs-meta:       0.6875rem; /* 11 mono — the instrument caption */

  --lh-display: 1.04;
  --lh-heading: 1.18;
  --lh-body:    1.55;

  /* mono is set in capitals with drawn tracking, like the wordmark */
  --track-meta: 0.14em;
  --track-eyebrow: 0.16em;

  /* ---- spacing: 4px base. Nothing between the steps. ---- */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s6: 24px;  --s8: 32px;  --s12: 48px; --s16: 64px;
  --s24: 96px; --s32: 128px; --s40: 160px;

  /* ---- radius ---- */
  --r-control: 999px;
  --r-card:    18px;

  /* ---- measure & grid ---- */
  --page-max:   1320px;
  --gutter:     clamp(20px, 4.2vw, 64px);
  --measure:    62ch;
  --measure-tight: 46ch;

  /* ---- motion: 120-200ms, ease-out, opacity and position only.
         Motion confirms a change; it never performs. ---- */
  --dur-fast: 120ms;
  --dur:      160ms;
  --dur-slow: 200ms;
  --ease:     cubic-bezier(0.2, 0, 0, 1);
}


/* ---- 02-base.css ---- */
/* ==========================================================================
   BRONTERA · 02 · Base and primitives
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--surface-base);
  color: var(--ink-on-midnight);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  font-variation-settings: 'FLAR' 0, 'VOLM' 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

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

::selection { background: var(--copper); color: var(--cream); }

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

/* ---- the mono voice: every figure a reader might compare, scan or check ---- */
.num, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ---- the instrument caption: 11px mono capitals on a hairline ---- */
.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  line-height: 1.4;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--ink-on-midnight-faint);
  font-variant-numeric: tabular-nums;
}
.on-cream .meta, .meta--cream { color: var(--ink-on-cream-label); }
.meta--signal { color: var(--signal); }

/* ---- eyebrow: section label, sans capitals ---- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-on-midnight-muted);
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--signal);
  flex: none;
}
.on-cream .eyebrow { color: var(--ink-on-cream-muted); }

/* ---- display type. FLAR opens only here, and only above 900px. ---- */
.display-xl {
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  font-weight: 600;
  letter-spacing: -0.024em;
  text-wrap: balance;
}
.display {
  font-size: var(--fs-display);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.heading {
  font-size: var(--fs-heading);
  line-height: var(--lh-heading);
  font-weight: 500;
  letter-spacing: -0.008em;
  text-wrap: balance;
}

/* Display moments only. Never on body, nav, tables or the wordmark. */
.flare { font-family: 'Commissioner Flare', var(--font-sans); font-weight: 600; }
@supports (font-variation-settings: normal) {
  .flare {
    font-family: var(--font-sans);
    font-variation-settings: 'FLAR' 100, 'VOLM' 60;
  }
}
@media (max-width: 900px) {
  /* FLAR shifts metrics; below display sizes it is closed. */
  .flare { font-family: var(--font-sans); font-variation-settings: 'FLAR' 0, 'VOLM' 0; }
}

.lead {
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--ink-on-midnight-muted);
  max-width: var(--measure);
}
.on-cream .lead { color: var(--ink-on-cream-muted); }

.small { font-size: var(--fs-small); line-height: 1.42; }
.muted { color: var(--ink-on-midnight-muted); }
.on-cream .muted { color: var(--ink-on-cream-muted); }
.signal { color: var(--signal); }

/* ---- layout primitives ---- */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: clamp(72px, 9vw, 152px);
}
.section--tight { padding-block: clamp(56px, 6vw, 96px); }

.on-cream {
  background: var(--surface-cream);
  color: var(--ink-on-cream);
}
.on-cream a { color: inherit; }

/* ---- the section index rule: 04 / COLOR, straight from the brand guide ---- */
.section-index {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  padding-bottom: var(--s4);
  margin-bottom: clamp(32px, 4vw, 64px);
  border-bottom: 1px solid var(--rule-on-midnight);
}
.on-cream .section-index { border-bottom-color: var(--rule-on-cream); }
.section-index__n {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--track-meta);
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}
.section-index__label {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--ink-on-midnight-faint);
}
.on-cream .section-index__label { color: var(--ink-on-cream-label); }
.section-index__right {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--ink-on-midnight-faint);
}
.on-cream .section-index__right { color: var(--ink-on-cream-label); }

/* ---- accessibility ---- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s4); top: var(--s4);
  transform: translateY(-200%);
  background: var(--copper); color: var(--cream);
  padding: var(--s3) var(--s4); border-radius: var(--r-control);
  z-index: 200; font-size: var(--fs-nav); font-weight: 500;
}
.skip-link:focus { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ---- 03-components.css ---- */
/* ==========================================================================
   BRONTERA · 03 · Components
   One Copper primary per view. Never two side by side.
   Elevation by surface tone, not drop shadow.
   ========================================================================== */

/* --------------------------------------------------------------- buttons */
.btn {
  --btn-bg: transparent;
  --btn-ink: var(--ink-on-midnight);
  --btn-rule: transparent;
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--fs-nav);
  font-weight: 500;
  line-height: 20px;
  padding: 12px 20px;
  min-height: 44px;
  border-radius: var(--r-control);
  border: 1px solid var(--btn-rule);
  background: var(--btn-bg);
  color: var(--btn-ink);
  cursor: pointer;
  text-align: left;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
}
.btn__arrow {
  flex: none;
  transition: transform var(--dur) var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--primary { --btn-bg: var(--copper); --btn-ink: var(--midnight); }
.btn--primary:hover { --btn-bg: var(--signal-hover); }
.btn--primary:active { --btn-bg: var(--signal-press); }

.btn--secondary { --btn-rule: var(--rule-on-midnight-strong); --btn-ink: var(--ink-on-midnight); }
.btn--secondary:hover { --btn-rule: var(--cream); }
.on-cream .btn--secondary { --btn-rule: var(--rule-on-cream-strong); --btn-ink: var(--ink-on-cream); }
.on-cream .btn--secondary:hover { --btn-rule: var(--midnight); }

.btn--tertiary { --btn-ink: var(--ink-on-midnight-muted); padding-inline: 6px; }
.btn--tertiary:hover { --btn-ink: var(--ink-on-midnight); }
.on-cream .btn--tertiary { --btn-ink: var(--ink-on-cream-muted); }
.on-cream .btn--tertiary:hover { --btn-ink: var(--ink-on-cream); }

.btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* underline link with a copper rule that draws in */
.link {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-weight: 500;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--signal), var(--signal));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--dur-slow) var(--ease);
}
.link:hover { background-size: 100% 1px; }

/* ------------------------------------------------------------------ panel */
.panel {
  background: var(--surface-cream);
  color: var(--ink-on-cream);
  border: 1px solid var(--rule-on-cream);
  border-radius: var(--r-card);
  padding: var(--s6);
}
.panel--dark {
  background: var(--surface-raised);
  color: var(--ink-on-midnight);
  border-color: var(--rule-on-midnight);
}
.panel--flush { padding: 0; overflow: hidden; }

/* ------------------------------------------------------------------- KPI */
.kpi { display: flex; flex-direction: column; gap: var(--s2); }
.kpi__label {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--ink-on-midnight-faint);
}
.on-cream .kpi__label { color: var(--ink-on-cream-label); }
.kpi__value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-kpi);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.kpi__value--signal { color: var(--signal); }
.kpi__note { font-size: var(--fs-small); color: var(--ink-on-midnight-muted); }
.on-cream .kpi__note { color: var(--ink-on-cream-muted); }

/* ------------------------------------------------------------------ table */
.table { width: 100%; border-collapse: collapse; }
.table th {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  font-weight: 400;
  text-align: left;
  color: var(--ink-on-cream-label);
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--rule-on-cream);
  white-space: nowrap;
}
.table td {
  font-family: var(--font-mono);
  font-size: var(--fs-table);
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  padding: var(--s3);
  border-bottom: 1px solid var(--rule-on-cream);
  white-space: nowrap;
}
.table td.is-text { font-family: var(--font-sans); font-size: var(--fs-small); }
.table .num-cell { text-align: right; }
.table tr:last-child td { border-bottom: 0; }
/* Deltas are context, not signal. Copper is reserved for the alert column. */
.table .delta-up, .table .delta-down { color: var(--ink-on-cream-muted); }

/* ------------------------------------------------------------------- tag */
.tag {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  padding: 5px 9px;
  border: 1px solid var(--rule-on-midnight);
  border-radius: 6px;
  color: var(--ink-on-midnight-muted);
  white-space: nowrap;
}
.on-cream .tag { border-color: var(--rule-on-cream); color: var(--ink-on-cream-muted); }
.tag--signal { border-color: var(--signal-rule); color: var(--signal); }

/* ------------------------------------------------------------------ rules */
.rule { height: 1px; background: var(--rule-on-midnight); border: 0; }
.on-cream .rule { background: var(--rule-on-cream); }

/* the instrument strip: mono facts on a hairline, like the guide's cover */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border-top: 1px solid var(--rule-on-midnight);
  border-bottom: 1px solid var(--rule-on-midnight);
}
.strip__cell {
  padding: var(--s4) var(--s4) var(--s4) 0;
  border-right: 1px solid var(--rule-on-midnight-faint);
  display: flex; flex-direction: column; gap: var(--s2);
}
.strip__cell:last-child { border-right: 0; }
.strip__k {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase;
  color: var(--ink-on-midnight-faint);
}
.strip__v {
  font-family: var(--font-mono); font-size: var(--fs-table);
  font-variant-numeric: tabular-nums; color: var(--ink-on-midnight);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.strip__v--signal { color: var(--signal); }
.on-cream .strip, .on-cream .strip__cell { border-color: var(--rule-on-cream); }
.on-cream .strip__k { color: var(--ink-on-cream-label); }
.on-cream .strip__v { color: var(--ink-on-cream); }

/* ------------------------------------------------------------------- nav */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--surface-base) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header[data-scrolled='true'] {
  border-bottom-color: var(--rule-on-midnight);
  background: color-mix(in srgb, var(--surface-base) 94%, transparent);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--s6);
  height: 72px;
}
/* The wordmark ships as outlines with its spacing drawn in. It is never set
   in live type, and the lockup is never rebuilt from the mark by eye. */
.brand-lockup {
  display: flex; align-items: center; flex: none;
  /* clear space is 1S — one loop stroke width — on every side */
  padding: 6px;
  margin: -6px;
  border-radius: 6px;
}
.brand-lockup img { height: 26px; width: auto; }
.site-footer .brand-lockup img { height: 32px; }
.site-nav { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
.site-nav__link {
  font-size: var(--fs-nav); font-weight: 500;
  color: var(--ink-on-midnight-muted);
  padding: 8px 12px; border-radius: 8px;
  transition: color var(--dur) var(--ease);
}
.site-nav__link:hover { color: var(--ink-on-midnight); }
.site-nav__link[aria-current='page'] { color: var(--ink-on-midnight); }
.site-nav__link[aria-current='page']::after {
  content: ''; display: block; height: 1px; margin-top: 3px;
  background: var(--signal);
}
.site-header .btn--primary { padding: 10px 16px; min-height: 40px; }

.nav-toggle { display: none; }

@media (max-width: 1100px) {
  .site-nav { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 44px; height: 44px;
    background: transparent; border: 1px solid var(--rule-on-midnight);
    border-radius: var(--r-control); cursor: pointer;
  }
  .site-header__inner .btn--primary { display: none; }
  body[data-menu='open'] .site-nav {
    display: flex; flex-direction: column; align-items: stretch;
    position: fixed; inset: 72px 0 auto 0;
    background: var(--surface-base);
    border-bottom: 1px solid var(--rule-on-midnight);
    padding: var(--s4) var(--gutter) var(--s8);
    gap: 0; margin-left: 0; max-height: calc(100dvh - 72px); overflow-y: auto;
  }
  body[data-menu='open'] .site-nav__link {
    padding: var(--s4) 0; font-size: 1.125rem;
    border-bottom: 1px solid var(--rule-on-midnight-faint);
  }
  body[data-menu='open'] .site-nav .btn { display: inline-flex; flex-shrink: 0; margin-top: var(--s6); justify-content: center; }
  body[data-menu='open'] { overflow: hidden; }
}

/* ---------------------------------------------------------------- footer */
.site-footer {
  border-top: 1px solid var(--rule-on-midnight);
  padding-block: var(--s16) var(--s8);
  background: var(--surface-base);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--s12) var(--s8);
}
.site-footer__col h3 {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase;
  color: var(--ink-on-midnight-faint); font-weight: 400;
  margin-bottom: var(--s4);
}
.site-footer__col li { margin-bottom: var(--s3); }
.site-footer__col a {
  font-size: var(--fs-small); color: var(--ink-on-midnight-muted);
  transition: color var(--dur) var(--ease);
}
.site-footer__col a:hover { color: var(--ink-on-midnight); }
.site-footer__bottom {
  margin-top: var(--s16); padding-top: var(--s6);
  border-top: 1px solid var(--rule-on-midnight-faint);
  display: flex; flex-wrap: wrap; gap: var(--s4) var(--s8);
  align-items: baseline; justify-content: space-between;
}

/* ---------------------------------------------------------------- forms */
.field { display: flex; flex-direction: column; gap: var(--s2); }
.field__label {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase;
  color: var(--ink-on-cream-label);
}
.field__label .req { color: var(--signal); }
.input, .select, .textarea {
  font-family: var(--font-sans); font-size: var(--fs-body);
  background: transparent;
  border: 1px solid var(--rule-on-cream-strong);
  border-radius: 10px;
  padding: 12px 14px; min-height: 46px;
  color: var(--ink-on-cream);
  transition: border-color var(--dur) var(--ease);
  width: 100%;
}
.textarea { min-height: 120px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--ink-on-cream-label); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--signal); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%230D1B2A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.checkline { display: flex; gap: var(--s3); align-items: flex-start; }
.checkline input[type='checkbox'] {
  appearance: none; width: 18px; height: 18px; flex: none; margin-top: 3px;
  border: 1px solid var(--rule-on-cream-strong); border-radius: 4px;
  cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.checkline input[type='checkbox']:checked {
  background: var(--copper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' stroke='%23F4F0E8' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  border-color: var(--copper);
}

/* Honeypot. Off-screen rather than display:none, which bots check for. */
.bt-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.site-footer__col { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer__col:first-child { grid-column: 1 / -1; } }
@media (max-width: 400px) { .site-footer__grid { gap: var(--s8) var(--s5); } }


/* ---- 04-sections.css ---- */
/* ==========================================================================
   BRONTERA · 04 · Section patterns
   Whitespace is the layout tool, not borders. One focal point per view.
   ========================================================================== */

/* ---- reveal: opacity and 8px of position. Nothing else moves. ---- */
[data-reveal][data-animate="true"] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
[data-reveal][data-animate='true'][data-revealed='true'] { opacity: 1; transform: none; }
[data-reveal][data-delay='1'] { transition-delay: 60ms; }
[data-reveal][data-delay='2'] { transition-delay: 120ms; }
[data-reveal][data-delay='3'] { transition-delay: 180ms; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal][data-animate] { opacity: 1; transform: none; }
}

/* ============================================================== 1 · HERO */
.hero { padding-block: clamp(40px, 5vw, 64px) clamp(48px, 5vw, 72px); position: relative; }

/* the gate: a single hairline field, drawn once, behind the fold.
   No glow, no gradient mesh, no particles. */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    repeating-linear-gradient(to right,
      rgba(244, 240, 232, 0.045) 0 1px, transparent 1px 152px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 64%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 64%);
  pointer-events: none;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: end;
}
@media (min-width: 1040px) {
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .hero__side { align-self: start; margin-top: var(--s12); }
}
.hero__title { margin-block: var(--s6) var(--s6); max-width: 18ch; }
.hero__title em { font-style: normal; color: var(--signal); }
.hero__lead { max-width: 48ch; }
.hero__actions { margin-top: var(--s8); }
.hero__note { margin-top: var(--s4); }

.hero__side { display: flex; flex-direction: column; gap: var(--s6); }
.hero__side-rule {
  display: grid; gap: var(--s4);
  border-top: 1px solid var(--rule-on-midnight);
  padding-top: var(--s4);
}
.hero__fact { display: flex; gap: var(--s6); align-items: baseline; }
.hero__fact dt {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: 0.10em; text-transform: uppercase; line-height: 1.5;
  color: var(--ink-on-midnight-faint); width: 108px; flex: none;
  overflow-wrap: anywhere;
}
.hero__fact dd { font-size: var(--fs-small); color: var(--ink-on-midnight-muted); margin: 0; }
.hero__fact dd b { color: var(--ink-on-midnight); font-weight: 500; }

/* the console sits below the fold line, full width */
.hero__console { margin-top: clamp(48px, 6vw, 88px); }
.hero__console-cap {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6);
  justify-content: space-between; align-items: baseline;
  margin-bottom: var(--s4);
}

/* ========================================== 3 · LEDGER (the numbered list) */
.lede-grid {
  display: grid; gap: clamp(32px, 4vw, 64px);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 900px) {
  .lede-grid { grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr); }
  .lede-grid--sticky > :first-child { position: sticky; top: 112px; }
}
.lede-grid__head { display: flex; flex-direction: column; gap: var(--s4); }

.ledger { border-top: 1px solid var(--rule-on-midnight); }
.on-cream .ledger { border-top-color: var(--rule-on-cream); }
.ledger__row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: var(--s4);
  padding-block: var(--s6);
  border-bottom: 1px solid var(--rule-on-midnight);
  position: relative;
}
.on-cream .ledger__row { border-bottom-color: var(--rule-on-cream); }
.ledger__row::before {
  content: ''; position: absolute; left: 0; top: -1px; height: 1px; width: 0;
  background: var(--signal);
  transition: width var(--dur-slow) var(--ease);
}
.ledger__row:hover::before { width: 46px; }
.ledger__n {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--track-meta); color: var(--signal);
  font-variant-numeric: tabular-nums; padding-top: 5px;
}
.ledger__body { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.ledger__title { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.ledger__text { color: var(--ink-on-midnight-muted); max-width: var(--measure); }
.on-cream .ledger__text { color: var(--ink-on-cream-muted); }
.ledger__tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
@media (min-width: 760px) {
  .ledger__row--wide { grid-template-columns: 46px minmax(0, 1fr) 168px; }
  .ledger__aside {
    font-family: var(--font-mono); font-size: var(--fs-meta);
    letter-spacing: var(--track-meta); text-transform: uppercase;
    color: var(--ink-on-midnight-faint); text-align: right; padding-top: 5px;
  }
  .on-cream .ledger__aside { color: var(--ink-on-cream-label); }
}

/* ============================================ 4 · QUESTION WALL (display) */
.questions { display: grid; gap: 0; border-top: 1px solid var(--rule-on-cream); }
.questions__row {
  display: grid; gap: var(--s3) var(--s6);
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--rule-on-cream);
}
@media (min-width: 860px) {
  .questions__row { grid-template-columns: 132px minmax(0, 1fr); align-items: baseline; }
}
.questions__who {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase;
  color: var(--ink-on-cream-label); padding-top: 6px;
}
.questions__q {
  font-size: clamp(1.25rem, 1.6vw + 0.85rem, 1.75rem);
  line-height: 1.28; font-weight: 500; letter-spacing: -0.012em;
  max-width: 34ch; text-wrap: balance;
}

/* ============================================== 5 · PROCESS (the stepper) */
.steps { display: grid; gap: 0; border-top: 1px solid var(--rule-on-midnight); }
.on-cream .steps { border-top-color: var(--rule-on-cream); }
.step {
  display: grid; gap: var(--s3) var(--s6);
  grid-template-columns: 24px minmax(0, 1fr);
  padding-block: clamp(28px, 3.4vw, 44px);
  border-bottom: 1px solid var(--rule-on-midnight);
}
.on-cream .step { border-bottom-color: var(--rule-on-cream); }
@media (min-width: 900px) {
  .step { grid-template-columns: 56px minmax(0, 0.8fr) minmax(0, 1.5fr); align-items: start; }
  .step__what { grid-column: auto; }
}
.step__n {
  font-family: var(--font-mono); font-size: var(--fs-table);
  font-weight: 700; color: var(--signal); font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.step__name { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.step__what { color: var(--ink-on-midnight-muted); }
@media (max-width: 899px) { .step__what { grid-column: 2; } }
.on-cream .step__what { color: var(--ink-on-cream-muted); }
.step__meta { display: flex; flex-direction: column; gap: var(--s2); }
.step__meta dt {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase;
  color: var(--ink-on-midnight-faint);
}
.on-cream .step__meta dt { color: var(--ink-on-cream-label); }
.step__meta dd {
  margin: 0; font-family: var(--font-mono); font-size: var(--fs-table);
  font-variant-numeric: tabular-nums;
}

/* ============================================= 6 · STACK / INTEGRATIONS */
.stack-grid {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  background: var(--rule-on-midnight);
  border: 1px solid var(--rule-on-midnight);
  border-radius: var(--r-card);
  overflow: hidden;
}
.on-cream .stack-grid { background: var(--rule-on-cream); border-color: var(--rule-on-cream); }
.stack-cell {
  background: var(--surface-base);
  padding: var(--s6);
  display: flex; flex-direction: column; gap: var(--s3);
  min-height: 168px;
}
.on-cream .stack-cell { background: var(--surface-cream); }
.stack-cell__k {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase;
  color: var(--signal);
}
.stack-cell__list {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  font-family: var(--font-mono); font-size: var(--fs-table);
  color: var(--ink-on-midnight-muted); line-height: 1.6;
}
.on-cream .stack-cell__list { color: var(--ink-on-cream-muted); }
.stack-cell__list span::after { content: ' ·'; color: var(--rule-on-midnight-strong); }
.stack-cell__list span:last-child::after { content: ''; }
.on-cream .stack-cell__list span::after { color: var(--rule-on-cream-strong); }
.stack-cell__note { font-size: var(--fs-small); color: var(--ink-on-midnight-faint); margin-top: auto; }
.on-cream .stack-cell__note { color: var(--ink-on-cream-label); }

/* ======================================================= 7 · COMPARISON */
.compare-wrap { overflow-x: auto; }
.compare {
  width: 100%; min-width: 720px; border-collapse: collapse;
}
.compare th, .compare td {
  padding: var(--s4) var(--s4);
  border-bottom: 1px solid var(--rule-on-cream);
  text-align: left; vertical-align: top;
}
.compare thead th {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase;
  font-weight: 400; color: var(--ink-on-cream-label);
  border-bottom-color: var(--rule-on-cream-strong);
  white-space: nowrap;
}
.compare thead th:first-child { width: 210px; }
.compare tbody th {
  font-weight: 500; font-size: var(--fs-small);
  color: var(--ink-on-cream); width: 210px;
}
.compare td { font-size: var(--fs-small); color: var(--ink-on-cream-muted); }
.compare col.is-us { background: var(--signal-wash); }
.compare .us-head { color: var(--signal); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }

/* ========================================================= 8 · PRICING */
.price-list { border-top: 1px solid var(--rule-on-midnight); }
.on-cream .price-list { border-top-color: var(--rule-on-cream); }
.price-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding-block: var(--s6); border-bottom: 1px solid var(--rule-on-midnight); }
.on-cream .price-stage { border-bottom-color: var(--rule-on-cream); }
.price-stage dt { font-size: 1.0625rem; font-weight: 600; }
.price-stage__price { font-family: var(--font-mono); font-size: 1.125rem; font-weight: 700; white-space: nowrap; }
.price-stage__detail { color: var(--ink-on-midnight-muted); }
.on-cream .price-stage__detail { color: var(--ink-on-cream-muted); }
.price-stage__price small { display: block; font-size: var(--fs-small); font-weight: 400; color: var(--ink-on-midnight-muted); margin-top: var(--s2); }
@media (min-width: 900px) { .price-stage { grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.7fr) minmax(0, 1.5fr); gap: var(--s6); } }

.tiers {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}
.tier {
  background: var(--surface-cream);
  color: var(--ink-on-cream);
  border: 1px solid var(--rule-on-cream);
  border-radius: var(--r-card);
  padding: var(--s6);
  display: flex; flex-direction: column; gap: var(--s4);
  min-height: 100%;
}
.tier[data-lead='true'] { border-color: var(--signal-rule); }
.tier__head { display: flex; align-items: baseline; gap: var(--s3); }
.tier__name { font-size: 1.0625rem; font-weight: 600; }
.tier__flag {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase;
  color: var(--signal); margin-left: auto;
}
.tier__who { font-size: var(--fs-small); color: var(--ink-on-cream-muted); }
.tier__price {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 1.5rem; line-height: 1.2; font-variant-numeric: tabular-nums;
  padding-top: var(--s4); border-top: 1px solid var(--rule-on-cream);
}
.tier__price small {
  display: block; font-family: var(--font-mono); font-weight: 400;
  font-size: var(--fs-meta); letter-spacing: var(--track-meta);
  text-transform: uppercase; color: var(--ink-on-cream-label); margin-top: 6px;
}
.tier__list { display: flex; flex-direction: column; gap: var(--s3); font-size: var(--fs-small); }
.tier__list li { display: flex; gap: var(--s3); align-items: flex-start; color: var(--ink-on-cream-muted); }
.tier__list li::before {
  content: ''; flex: none; width: 6px; height: 6px; margin-top: 6px;
  border-radius: 1px; background: var(--rule-on-cream-strong);
}
.tier[data-lead='true'] .tier__list li::before { background: var(--signal); }
.tier__foot { margin-top: auto; padding-top: var(--s4); }
.tier__foot .btn { width: 100%; justify-content: center; }

/* ======================================================= 9 · ACCORDION */
.accordion { border-top: 1px solid var(--rule-on-midnight); }
.on-cream .accordion { border-top-color: var(--rule-on-cream); }
.acc-item { border-bottom: 1px solid var(--rule-on-midnight); }
.on-cream .acc-item { border-bottom-color: var(--rule-on-cream); }
.acc-trigger {
  display: flex; align-items: center; gap: var(--s4);
  width: 100%; text-align: left; background: transparent; border: 0;
  padding: var(--s6) 0; cursor: pointer;
  font-size: 1.0625rem; font-weight: 500; line-height: 1.4;
  color: inherit;
}
.acc-trigger__icon {
  margin-left: auto; flex: none; width: 14px; height: 14px;
  position: relative;
}
.acc-trigger__icon::before, .acc-trigger__icon::after {
  content: ''; position: absolute; background: var(--signal);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.acc-trigger__icon::before { left: 0; top: 6.5px; width: 14px; height: 1px; }
.acc-trigger__icon::after { left: 6.5px; top: 0; width: 1px; height: 14px; }
.acc-item[data-open='true'] .acc-trigger__icon::after { opacity: 0; transform: scaleY(0); }
.acc-body {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-slow) var(--ease);
}
.acc-item[data-open='true'] .acc-body { grid-template-rows: 1fr; }
.acc-body > div { overflow: hidden; }
.acc-body p {
  padding-bottom: var(--s6); max-width: var(--measure);
  color: var(--ink-on-midnight-muted);
}
.on-cream .acc-body p { color: var(--ink-on-cream-muted); }

/* ==================================================== 10 · CLOSING CTA */
.closer { position: relative; }
.closer__inner {
  display: grid; gap: clamp(32px, 4vw, 56px);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
@media (min-width: 960px) { .closer__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.closer__title { max-width: 20ch; }


/* ======================================================== 12 · CONTACT */
.contact-grid {
  display: grid; gap: clamp(32px, 4vw, 64px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 940px) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.form-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.form-grid .field--full { grid-column: 1 / -1; }
.form-status {
  font-size: var(--fs-small); color: var(--ink-on-cream);
  border-left: 2px solid var(--signal); padding-left: var(--s4);
}

/* ========================================================= utilities */
.stack-4 > * + * { margin-top: var(--s4); }
.stack-6 > * + * { margin-top: var(--s6); }
.stack-8 > * + * { margin-top: var(--s8); }
.stack-12 > * + * { margin-top: var(--s12); }
.grid-2 { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.text-max { max-width: var(--measure); }
.text-max-tight { max-width: var(--measure-tight); }

/* ------------------------------------------------- the ledger pair (two defs) */
.ledger-pair {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  background: var(--rule-on-cream);
  border: 1px solid var(--rule-on-cream);
  border-radius: var(--r-card);
  overflow: hidden;
}
.ledger-pair__cell {
  background: var(--surface-cream);
  padding: var(--s6);
  display: flex; flex-direction: column; gap: var(--s3);
}
.ledger-pair__cell--signal { background: var(--surface-cream-2); }

/* comparison table on a Midnight surface */
.compare--dark th, .compare--dark td { border-bottom-color: var(--rule-on-midnight); }
.compare--dark thead th {
  color: var(--ink-on-midnight-faint);
  border-bottom-color: var(--rule-on-midnight-strong);
}
.compare--dark tbody th { color: var(--ink-on-midnight); }
.compare--dark td { color: var(--ink-on-midnight-muted); }
.compare--dark td.mono { color: var(--ink-on-midnight-muted); white-space: nowrap; }

/* A side-by-side comparison: Copper marks our column and only our column, so
   the eye lands on the number that is the point. */
.compare--vs td.mono { color: var(--ink-on-midnight-muted); }
.compare--vs td:nth-child(3) { color: var(--ink-on-midnight); }
.compare--vs td:nth-child(3).mono { color: var(--signal); font-weight: 700; }
.compare--vs.compare:not(.compare--dark) td.mono { color: var(--ink-on-cream-muted); }
.compare--vs.compare:not(.compare--dark) td:nth-child(3) { color: var(--ink-on-cream); }
.compare--vs.compare:not(.compare--dark) td:nth-child(3).mono { color: var(--signal); font-weight: 700; }
.compare--dark code {
  font-family: var(--font-mono); font-size: 0.92em;
  background: rgba(244, 240, 232, 0.07); padding: 1px 5px; border-radius: 4px;
}

/* the step that is on the critical path */
.step[data-critical='true'] .step__name { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.step[data-critical='true'] { position: relative; }
.step[data-critical='true']::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--signal); margin-left: -12px;
}

/* the price note under a tier list */
.tier__list li strong { color: var(--ink-on-cream); font-weight: 600; }

/* ------------------------------------------------------- the commitments */
.commit-grid {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  background: var(--rule-on-cream);
  border-block: 1px solid var(--rule-on-cream);
}
.commit {
  background: var(--surface-cream);
  padding: var(--s8) var(--s6) var(--s8) 0;
  display: flex; flex-direction: column; gap: var(--s3);
}
.commit + .commit { padding-left: var(--s6); }
.commit .kpi__note { max-width: 40ch; }
@media (max-width: 700px) {
  .commit, .commit + .commit { padding: var(--s6) 0; }
}

/* --------------------------------------------------------- sector matrix */
.sectors {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  background: var(--rule-on-cream);
  border: 1px solid var(--rule-on-cream);
  border-radius: var(--r-card);
  overflow: hidden;
}
.sector {
  background: var(--surface-cream);
  padding: var(--s6);
  display: flex; flex-direction: column; gap: var(--s3);
}
.sector--open { background: var(--surface-cream-2); }
.sector__name {
  font-size: 1rem; font-weight: 600; line-height: 1.3;
  padding-bottom: var(--s3); border-bottom: 1px solid var(--rule-on-cream);
}
.sector__metrics { display: flex; flex-direction: column; gap: var(--s3); flex: 1; }
.sector__metrics li {
  font-size: var(--fs-small); line-height: 1.5;
  color: var(--ink-on-cream-muted);
  display: flex; gap: var(--s3);
}
.sector__metrics li::before {
  content: ''; flex: none; width: 5px; height: 5px; margin-top: 7px;
  border-radius: 1px; background: var(--rule-on-cream-strong);
}
.sector:hover .sector__metrics li::before { background: var(--signal); }
.sector__metrics li::before { transition: background var(--dur) var(--ease); }
.sector__src {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: 0.06em; line-height: 1.7;
  color: var(--ink-on-cream-label);
  padding-top: var(--s3); border-top: 1px solid var(--rule-on-cream);
  margin-top: auto;
}

/* ----------------------------------------------------- holding page */
.hold { min-height: 100svh; display: flex; }
.hold__inner {
  display: flex; flex-direction: column;
  padding-block: clamp(28px, 4vw, 56px);
  flex: 1; gap: var(--s8);
}
.hold__top { display: flex; align-items: center; }
.hold__top img { height: 30px; width: auto; }
.hold__mid {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding-block: var(--s16);
}
.hold__title { max-width: 14ch; }
.hold__lead { margin-top: var(--s6); max-width: 42ch; }
.hold__contact { margin-top: var(--s8); font-size: var(--fs-body); color: var(--ink-on-midnight-muted); }
.hold__foot { margin-top: auto; }
body.is-holding .site-header, body.is-holding .site-footer { display: none; }
body.is-holding { background: var(--surface-base); }

/* ------------------------------------------------------ what we can build */
.builds { border-top: 1px solid var(--rule-on-midnight); }
.build { display: grid; gap: var(--s3) var(--s6); padding-block: var(--s6); border-bottom: 1px solid var(--rule-on-midnight); }
.build__name { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.build__text { font-size: var(--fs-small); line-height: 1.6; color: var(--ink-on-midnight-muted); }
@media (min-width: 680px) { .build { grid-template-columns: minmax(140px, 0.7fr) minmax(0, 1.3fr); } }

/* ------------------------------------------------------------- spacing utilities
   These exist as classes rather than inline style attributes so the content
   security policy can keep style-src strict about where CSS comes from. */
.mt-2  { margin-top: var(--s2); }
.mt-3  { margin-top: var(--s3); }
.mt-4  { margin-top: var(--s4); }
.mt-6  { margin-top: var(--s6); }
.mt-8  { margin-top: var(--s8); }
.mt-12 { margin-top: var(--s12); }
.mt-block { margin-top: clamp(32px, 4vw, 56px); }
.mt-block-lg { margin-top: clamp(40px, 5vw, 72px); }
.ml-4  { margin-left: var(--s4); }
.w-full { width: 100%; justify-content: center; }
.row { display: flex; }
.measure-14 { max-width: 14ch; }
.measure-16 { max-width: 16ch; }
.measure-18 { max-width: 18ch; }
.measure-20 { max-width: 20ch; }
.measure-30 { max-width: 30ch; }
.measure-60 { max-width: 60ch; }
.measure-78 { max-width: 78ch; }
.measure-80 { max-width: 80ch; }
.measure-82 { max-width: 82ch; }
.panel--pad { padding: clamp(24px, 3vw, 40px); }
.t-17 { font-size: 1.0625rem; }

.form-status[data-tone='ok'] { border-left-color: var(--signal); }
.form-status[data-tone='error'] { border-left-color: var(--rule-on-cream-strong); }

/* Form first on a narrow screen; supporting detail stays alongside on desktop. */
.contact-form-column { order: -1; min-width: 0; }
.contact-grid > * { min-width: 0; }
.contact-grid[data-enquiry-complete='true'] { grid-template-columns: minmax(0, 1fr); max-width: 1040px; margin-inline: auto; }
.contact-grid[data-enquiry-complete='true'] [data-contact-next] { display: none; }
.contact-grid[data-enquiry-complete='true'] [data-contact-form] { padding: 0; border: 0; }
.contact-grid[data-enquiry-complete='true'] .form-status { margin-top: 0; }
.booking { margin-top: var(--s8); padding-top: var(--s8); border-top: 1px solid var(--rule-on-cream-strong); }
.booking > p { max-width: 68ch; }
.booking[hidden], [data-form-intro][hidden], .booking__frame[hidden], [data-booking-start][hidden] { display: none; }
.booking__frame { width: 100%; min-width: 0; height: 780px; }
.booking__frame iframe { display: block; width: 100%; max-width: 100%; height: 100%; border: 0; }
@media (max-width: 600px) { .booking__frame { height: 900px; } }
@media (min-width: 940px) { .contact-form-column { order: 1; } }
.form-grid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.acc-body[hidden], .privacy-choices[hidden] { display: none; }
.privacy-choices { position: fixed; z-index: 150; bottom: 0; inset-inline: 0; background: var(--surface-base); border-top: 1px solid var(--rule-on-midnight); padding-block: var(--s5); box-shadow: 0 -8px 24px #0002; }
.privacy-choices__inner { display: flex; align-items: center; gap: var(--s6); justify-content: space-between; }
.privacy-choices__inner > div:first-child { max-width: 62ch; }
.privacy-choices .btn-row { flex-wrap: nowrap; flex-shrink: 0; }
@media (max-width: 760px) { .privacy-choices__inner { display: block; } .privacy-choices .btn-row { margin-top: var(--s4); flex-wrap: wrap; } }
.privacy-open { border: 0; background: none; color: inherit; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 939px) { body:has(#start-enquiry) .section--tight .hero__side-rule { display: none; } body:has(#start-enquiry) .section--tight { padding-bottom: var(--s8); } body:has(#start-enquiry) .contact-grid { gap: var(--s12); } }
/* Enquiry context and human contact use the existing editorial spacing. */
.scope-example summary { cursor: pointer; width: fit-content; }
.scope-example summary::marker { color: var(--signal); }
.scope-example summary::after { content: '+'; color: var(--signal); }
.scope-example[open] summary::after { content: '−'; }
.form-new-enquiry { align-self: flex-start; cursor: pointer; background: none; border: 0; padding: 8px 0; min-height: 44px; }
.form-new-enquiry[hidden] { display: none; }
.support-terms { max-width: 80ch; }
.founder-note { border-block: 1px solid var(--rule-on-midnight); }

.handover-list { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s8); padding-left: 1.2em; list-style: disc; color: var(--ink-on-midnight-muted); }


/* ---- 05-dashboard.css ---- */
/* ==========================================================================
   BRONTERA · 05 · The demo console
   Midnight shell, Cream working surface. One primary action per view.
   Whitespace is the layout tool, not borders. Elevation by surface tone.
   Every figure is B612 Mono. Copper is the series that matters.
   ========================================================================== */

.console {
  --rail: 168px;
  background: var(--surface-raised);
  border: 1px solid var(--rule-on-midnight);
  border-radius: var(--r-card);
  overflow: hidden;
  container-type: inline-size;
}

/* ------------------------------------------------------------- title bar */
.console__bar {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--rule-on-midnight);
  min-height: 44px;
}
.console__bar .mark { height: 16px; width: auto; color: var(--midnight); }
.console__title {
  font-size: var(--fs-small); font-weight: 500; color: var(--ink-on-midnight);
  white-space: nowrap;
}
.console__badge {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase;
  color: var(--signal-text); border: 1px solid var(--signal-rule);
  border-radius: 5px; padding: 3px 7px; white-space: nowrap;
}
.console__clock { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
.console__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--signal); flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .console__dot { animation: pulse 2.4s var(--ease) infinite; }
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ------------------------------------------------------------------ body */
.console__body { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 460px; }

.console__rail {
  border-right: 1px solid var(--rule-on-midnight);
  padding: var(--s4) var(--s3);
  display: flex; flex-direction: column; gap: var(--s1);
}
.console__rail-head {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase;
  color: var(--ink-on-midnight-faint);
  padding: 0 var(--s3) var(--s2);
}
.rail-btn {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; text-align: left;
  font-size: var(--fs-nav); font-weight: 500;
  color: var(--ink-on-midnight-muted);
  background: transparent; border: 0; border-radius: 8px;
  padding: 9px var(--s3); min-height: 36px; cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.rail-btn:hover { color: var(--ink-on-midnight); background: rgba(244, 240, 232, 0.05); }
.rail-btn[aria-selected='true'] { color: var(--midnight); background: var(--lavender); }
.rail-btn__dot {
  width: 3px; height: 14px; border-radius: 2px; background: transparent; flex: none;
  transition: background var(--dur) var(--ease);
}
.rail-btn[aria-selected='true'] .rail-btn__dot { background: var(--signal); }
.console__rail-foot { margin-top: auto; padding: var(--s3); }

/* --------------------------------------------------------------- surface */
.console__surface {
  background: var(--surface-cream);
  color: var(--ink-on-cream);
  padding: var(--s6);
  display: flex; flex-direction: column; gap: var(--s6);
  min-width: 0;
}
.console__surface .muted { color: var(--ink-on-cream-muted); }

.console__head { display: flex; align-items: flex-start; gap: var(--s4); flex-wrap: wrap; }
.console__head h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }

.console__head .btn { margin-left: auto; }

/* KPI row — one Copper value only, the one that matters */
.console__kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: var(--s6) var(--s6);
  padding-bottom: var(--s6);
  border-bottom: 1px solid var(--rule-on-cream);
}
.console__kpi { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.console__kpi .k {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase;
  color: var(--ink-on-cream-label);
}
.console__kpi .v {
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(1.125rem, 1.6cqi + 0.8rem, 1.5rem);
  white-space: nowrap;
  line-height: 1.15; font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.console__kpi[data-signal='true'] .v { color: var(--signal); }
.console__kpi .d {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  color: var(--ink-on-cream-muted); font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* ----------------------------------------------------------------- chart */
.console__chart { display: flex; flex-direction: column; gap: var(--s3); }
.console__plot-scroll { overflow-x: auto; }
.console__scroll-hint { display: none; }
.console__chart-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
}
.console__chart-title {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase;
  color: var(--ink-on-cream-label);
}
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--gridline); stroke-width: 1; shape-rendering: crispEdges; }
.chart .axis {
  font-family: var(--font-mono); font-size: 10px; fill: var(--ink-on-cream-label);
  letter-spacing: 0.06em;
}
.chart .bar { fill: var(--chart-4); transition: fill var(--dur) var(--ease); }
.chart .bar--support { fill: var(--chart-3); }
.chart .bar--primary { fill: var(--chart-1); }
.chart .series-line { fill: none; stroke: var(--chart-2); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .series-line--primary { stroke: var(--chart-1); stroke-width: 2; }
.chart .dot { fill: var(--chart-1); }
.chart .callout-line { stroke: var(--signal-rule); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .callout {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  fill: var(--signal-text); letter-spacing: 0.02em;
}
.chart .callout-sub { font-family: var(--font-mono); font-size: 9px; fill: var(--ink-on-cream-label); letter-spacing: 0.08em; }

/* ----------------------------------------------------------------- table */
.console__table-wrap { overflow-x: auto; margin-inline: calc(var(--s3) * -1); padding-inline: var(--s3); }
.console__table-wrap .table td:first-child,
.console__table-wrap .table th:first-child { padding-left: 0; }
.console__table-wrap .table td:last-child,
.console__table-wrap .table th:last-child { padding-right: 0; }

.status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase;
}
.status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status--flag { color: var(--signal-text); }
.status--ok { color: var(--ink-on-cream-label); }

/* ------------------------------------------------------------ view swaps */
/* Motion confirms a change; it never performs. Opacity and position only. */
.console__view { display: none; }
.console__view[data-active='true'] { display: contents; }
@media (prefers-reduced-motion: no-preference) {
  .console[data-swapping='true'] .console__surface > * { opacity: 0; transform: translateY(4px); }
  .console__surface > * {
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  }
}

/* ----------------------------------------------------------- narrow view */
@container (max-width: 720px) {
  .console__bar { flex-wrap: wrap; gap: var(--s2) var(--s3); }
  .console__body { grid-template-columns: 1fr; }
  .console__rail {
    border-right: 0; border-bottom: 1px solid var(--rule-on-midnight);
    flex-direction: row; overflow-x: auto; gap: var(--s1);
    padding: var(--s2) var(--s3); scrollbar-width: none;
  }
  .console__rail::-webkit-scrollbar { display: none; }
  .console__rail-head, .console__rail-foot { display: none; }
  .rail-btn { width: auto; white-space: nowrap; }
  .console__surface { padding: var(--s4); }
  .console__head .btn { margin-left: 0; width: 100%; justify-content: center; }
  .console__plot-scroll .chart { min-width: 760px; }
  .console__scroll-hint { display: block; }
  .console__table-wrap .table { min-width: 600px; }
}
@container (max-width: 480px) {
  .console__bar .mark { display: none; }
  .console__ws { width: 100%; }
  .console__ws .ws-btn { flex: 1; }
  .console__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s4); }
}

/* ---------------------------------------------------- the metric contract */
.console__kpi-btn {
  display: flex; flex-direction: column; gap: 5px;
  width: 100%; text-align: left; padding: var(--s2) var(--s2) var(--s2) 0;
  margin: calc(var(--s2) * -1) 0 0 0;
  background: transparent; border: 0; border-radius: 8px; cursor: pointer;
  color: inherit; position: relative;
  transition: background var(--dur) var(--ease);
}
.console__kpi-btn:hover { background: rgba(13, 27, 42, 0.04); }
.console__kpi-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }


/* the control is never hover-only: a permanent 1px tick marks it as openable */
.console__kpi-btn::after {
  content: ''; position: absolute; left: 0; bottom: 2px;
  width: 22px; height: 2px; background: var(--signal);
  transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
}
.console__kpi-btn:hover::after,
.console__kpi-btn[aria-expanded='true']::after { width: 40px; background: var(--signal); }

.console__contract { grid-column: 1 / -1; }
.contract {
  border-left: 2px solid var(--signal);
  padding: var(--s3) 0 var(--s3) var(--s4);
  margin-top: var(--s3);
  display: flex; flex-direction: column; gap: var(--s3);
}
.contract__name { font-size: var(--fs-small); font-weight: 600; }
.contract__def { font-size: var(--fs-small); color: var(--ink-on-cream-muted); max-width: 62ch; }
.contract__grid {
  display: grid; grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--s2) var(--s4); margin: 0;
}
.contract__grid dt {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase;
  color: var(--ink-on-cream-label);
}
.contract__grid dd {
  margin: 0; font-size: var(--fs-table); line-height: 1.5;
  color: var(--ink-on-cream); overflow-wrap: anywhere;
}

.console__kpis { align-items: start; }

/* ------------------------------------------------ trend and comparison
   A bare number carries no meaning. Every tile gets a twelve-point trend and
   a signed comparison. Direction is a glyph, never colour alone, so the tile
   still reads for a colour-blind viewer or on a printed page. */
.console__kpi-row { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.spark { flex: none; overflow: visible; }
.spark__line {
  fill: none; stroke: var(--ink-on-cream-label); stroke-width: 1.2;
  stroke-linejoin: round; stroke-linecap: round;
}
.spark__last { fill: var(--ink-on-cream); }
.console__kpi[data-signal='true'] .spark__line { stroke: var(--signal); stroke-width: 1.5; }
.console__kpi[data-signal='true'] .spark__last { fill: var(--signal); }

.delta {
  display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
  color: var(--ink-on-cream-muted);
}
.delta__glyph { font-size: 0.85em; line-height: 1; }
/* Direction is carried by the glyph, not by colour. Copper stays on the one
   figure that matters on this surface — put it on four deltas as well and the
   accent stops meaning anything. */
.delta { color: var(--ink-on-cream-muted); }
.console__kpi[data-signal='true'] .delta[data-tone='bad'] { color: var(--signal-text); }

/* The contract is a grid item of the KPI row, so it spans the full width and a
   SQL line has somewhere to wrap. */
.console__contract { grid-column: 1 / -1; }
.delta__word { color: var(--ink-on-cream-label); }

/* Reference marks. A number with nothing to judge it against is only a number. */
.chart .grid--zero { stroke: var(--ink-on-cream-label); }
.chart .threshold { stroke: var(--ink-on-cream-label); stroke-width: 1; stroke-dasharray: 5 3; }
.chart .threshold-label,
.chart .marker-label {
  font-family: var(--font-mono); font-size: 10px;
  fill: var(--ink-on-cream-label); letter-spacing: 0.06em;
}
.chart .marker { stroke: var(--ink-on-cream-label); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .series-label {
  font-family: var(--font-mono); font-size: 10px;
  fill: var(--ink-on-cream-label); letter-spacing: 0.04em;
}
.chart .series-label--primary { fill: var(--signal-text); }

/* A late feed says so on the face of the tile, not only in the contract. */
.stale {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: 0.04em; color: var(--signal-text);
}
.stale__glyph {
  flex: none; width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid currentColor; text-align: center;
  font-size: 9px; line-height: 12px; font-weight: 700;
}
.console__error {
  border-left: 2px solid var(--signal);
  padding: var(--s4) 0 var(--s4) var(--s4);
  display: flex; flex-direction: column; gap: var(--s3);
}
.console__error-head { font-size: 1.0625rem; font-weight: 600; }
.meta--stamp { color: var(--ink-on-midnight); }

/* --------------------------------------------------- workspace switcher
   Two example builds in unrelated businesses, so "any industry" is something
   a reader can click rather than a line they have to take on faith. */
.console__ws { display: flex; gap: var(--s1); flex: none; }
.ws-btn {
  display: flex; flex-direction: column; gap: 1px;
  padding: 5px var(--s3); min-height: 34px;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  color: var(--ink-on-midnight-muted); cursor: pointer; text-align: left;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.ws-btn:hover { background: rgba(244, 240, 232, 0.05); color: var(--ink-on-midnight); }
.ws-btn[aria-pressed='true'] {
  background: var(--lavender);
  border-color: var(--rule-on-midnight);
  color: var(--midnight);
}
.ws-btn__name { font-size: var(--fs-small); font-weight: 500; line-height: 1.2; white-space: nowrap; }
@container (max-width: 480px) { .ws-btn__name { white-space: normal; } }
.ws-btn__kind {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-on-midnight-faint); white-space: nowrap;
}
.ws-btn[aria-pressed='true'] .ws-btn__kind { color: var(--signal-text); }
@container (max-width: 720px) {
  .console__bar { flex-wrap: wrap; }
  .ws-btn__kind { display: none; }
}


/* ---- 06-workflows.css ---- */
/* Site direction: Brontera navy and copper, warm paper and hands-on examples. */
.site-header { backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--cream);border-bottom:1px solid var(--rule-on-midnight); }
.site-header[data-scrolled='true'] { background:var(--cream); }
.site-header__inner { height:84px; }
.brand-lockup img { height:29px; }
.site-nav { gap:22px; }
.site-nav__link { font-size:15px;color:var(--midnight); }
.btn { font-weight:650;min-height:48px;padding:13px 23px; }
.btn--primary { color:var(--midnight); }
.btn--secondary:hover { border-color:var(--midnight); }
.display-xl,.display { font-weight:700;letter-spacing:-.045em; }
.field__label { font-family:var(--font-sans);font-size:14px;letter-spacing:0;text-transform:none;font-weight:550; }
.input,.select,.textarea { border-radius:10px; }
.plain-label { font-size:14px;font-weight:500;margin-bottom:23px;color:var(--ink-on-midnight-muted); }
.new-hero { padding:66px 0 0; }
.new-hero__intro { display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,.7fr);gap:60px;align-items:end;margin-bottom:60px; }
.new-hero h1 { font-size:clamp(44px,5.9vw,86px);font-weight:720;line-height:1.03;letter-spacing:-.055em; }
.word-oval { position:relative;display:inline-block;z-index:0; }
.word-oval::before { content:'';position:absolute;inset:auto -2% -4%;height:11%;background:var(--copper);transform:rotate(-2deg);z-index:-1; }
.new-hero__aside { display:flex;flex-direction:column;align-items:flex-start;gap:23px;padding-bottom:4px; }
.new-hero__aside p { font-size:18px;line-height:1.5;max-width:330px; }
.text-link { text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;font-size:14px;font-weight:550; }
.hero-workbench { scroll-margin-top:110px; }
.hero-footnote { display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:27px 0;border-bottom:1px solid var(--rule-on-midnight);font-size:14px; }
.hero-footnote a { text-decoration:underline;text-underline-offset:4px; }
.workflow-playground { border:2px solid var(--midnight);border-radius:22px;background:var(--midnight);color:var(--cream);box-shadow:6px 7px 0 var(--copper);overflow:hidden; }
.playground-toolbar { display:flex;gap:20px;align-items:center;justify-content:space-between;padding:17px 25px;border-bottom:1px solid color-mix(in srgb,var(--cream) 24%,transparent); }
.playground-tabs { display:flex;gap:5px;flex-wrap:wrap; }
.playground-tabs button { border:1px solid transparent;background:transparent;color:var(--cream);padding:9px 15px;border-radius:999px;font-size:14px;font-weight:550;cursor:pointer;min-height:42px; }
.playground-tabs button[aria-selected='true'] { background:var(--cream);color:var(--midnight); }
.playground-tabs button:hover:not([aria-selected='true']) { border-color:var(--cream); }
.demo-label { white-space:nowrap;font-size:12px; }
.playground-stage { display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);min-height:438px;gap:40px;padding:46px 54px;align-items:center; }
.demo-kicker { font-size:12px;display:block;margin-bottom:17px; }
.demo-situation h2 { font-size:clamp(30px,3.6vw,48px);line-height:1.06;letter-spacing:-.045em;font-weight:700; }
.demo-situation>p:not(.demo-result) { font-size:17px;line-height:1.45;margin-top:18px; }
.demo-action { display:inline-flex;gap:20px;align-items:center;justify-content:space-between;background:var(--copper);color:var(--midnight);border:1.5px solid transparent;border-radius:999px;padding:12px 20px;min-height:46px;font-size:14px;font-weight:650;cursor:pointer;margin-top:27px;transition:transform 160ms,background 160ms; }
.demo-action:hover:not(:disabled) { transform:translate(1px,1px);background:var(--signal-hover); }
.demo-action:disabled { box-shadow:none;cursor:default;background:var(--lavender); }
.demo-result { min-height:36px;font-size:12px;margin-top:15px;max-width:310px; }
.playground-bottom { display:flex;justify-content:space-between;gap:15px;align-items:center;padding:15px 25px;border-top:1px solid color-mix(in srgb,var(--cream) 24%,transparent);font-size:12px; }
.playground-bottom button { background:transparent;border:0;cursor:pointer;font-size:13px;text-decoration:underline;text-underline-offset:4px;padding:6px 0; }
.handoff-drawing { position:relative;max-width:430px;width:100%;justify-self:center; }
.paper-receipt { background:var(--paper);border:1.5px solid var(--midnight);border-radius:10px;padding:20px 23px;width:78%;margin-left:5%;transform:rotate(-3deg);position:relative;box-shadow:3px 4px 0 var(--midnight); }
.paper-receipt__label { font-size:12px;display:block;margin-bottom:15px; }
.paper-receipt strong { font-size:21px;font-weight:650;display:block;padding-right:70px; }
.status-stamp { position:absolute;right:20px;top:42px;border:1.5px solid var(--midnight);border-radius:50%;padding:8px 14px;font-size:17px;font-weight:650;transform:rotate(8deg);background:var(--copper-soft); }
.receipt-rule { height:1px;background:var(--rule-on-midnight);margin:17px 0 10px; }
.handoff-path { height:49px;display:grid;place-items:center;font-size:26px; }
.handoff-path span { display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--midnight);color:var(--paper); }
.is-connected .handoff-path span { background:var(--copper-soft);color:var(--midnight);border:1px solid var(--midnight); }
.onboarding-folder { margin-left:16%;transform:rotate(2deg); }
.folder-tab { width:max-content;background:var(--copper-soft);border:1.5px solid var(--midnight);border-bottom:0;border-radius:12px 12px 0 0;padding:6px 16px;font-size:11px;position:relative;bottom:-1px; }
.folder-content { background:var(--copper-soft);border:1.5px solid var(--midnight);border-radius:0 12px 12px 12px;padding:18px 23px;box-shadow:3px 4px 0 var(--midnight);min-height:139px; }
.folder-content h3 { font-size:23px;letter-spacing:-.04em;margin-bottom:10px; }
.folder-content p { font-size:13px;margin-top:5px; }
.folder-count { font-size:11px;display:block;margin-top:15px; }
.demo-select-label { display:flex;flex-direction:column;gap:7px;font-size:12px;margin-top:23px;max-width:255px; }
.demo-select { border:1.5px solid var(--midnight);border-radius:9px;background:var(--paper);padding:10px 35px 10px 13px;min-height:44px;font-size:16px;color:var(--midnight); }
.booking-drawing { max-width:400px;width:100%;justify-self:center; }
.appointment-sheet { background:var(--paper);border:1.5px solid var(--midnight);border-radius:15px;box-shadow:4px 5px 0 var(--midnight);transform:rotate(-2deg);overflow:hidden; }
.appointment-sheet__top { display:flex;justify-content:space-between;padding:12px 19px;border-bottom:1.5px solid var(--midnight);font-size:12px;background:var(--copper-soft); }
.appointment-body { padding:24px;display:flex;flex-direction:column;gap:13px; }
.appointment-body strong { font-size:28px;letter-spacing:-.04em; }
.appointment-status { font-size:12px;border:1px solid var(--midnight);border-radius:999px;padding:4px 10px;width:max-content; }
.sync-bridge { padding:17px;text-align:center;font-size:12px; }
.crm-record { border:1.5px solid var(--midnight);border-radius:12px;box-shadow:3px 4px 0 var(--midnight);background:var(--paper);padding:19px 23px;margin-left:32px;display:grid;grid-template-columns:1fr auto;gap:10px; }
.crm-record>span:first-child { grid-column:1/-1; }
.crm-record strong { font-size:21px; }
.crm-status { border-radius:999px;background:var(--signal-wash);border:1px solid var(--midnight);padding:4px 10px;font-size:12px;align-self:center; }
.crm-status.matches { background:var(--copper-soft); }
.review-drawing { position:relative;max-width:415px;justify-self:center;width:100%;padding-bottom:15px; }
.sample-app { border:1.5px solid var(--midnight);border-radius:14px;box-shadow:4px 5px 0 var(--midnight);background:var(--paper);overflow:hidden;transform:rotate(-2deg); }
.sample-app__bar { padding:14px 19px;border-bottom:1.5px solid var(--midnight);display:flex;justify-content:space-between;gap:15px;align-items:center;font-size:14px; }
.sample-app__body { padding:28px;min-height:200px; }
.sample-app__body h3 { font-size:29px;line-height:1.1;letter-spacing:-.04em;margin:12px 0 16px; }
.sample-app__body li { padding:9px 0;border-bottom:1px solid var(--rule-on-cream);font-size:13px; }
.sample-app__body>p { font-size:13px; }
.sample-app__foot { padding:12px 19px;background:var(--copper-soft);border-top:1.5px solid var(--midnight);font-size:12px; }
.review-sticker { display:block;position:absolute;right:-17px;bottom:0;transform:rotate(9deg);background:var(--lavender);border:1.5px solid var(--midnight);border-radius:50%;padding:17px;font-size:15px;line-height:1.15;font-weight:600; }
.access-lock { width:35px;height:35px;background:var(--midnight);color:var(--paper);border-radius:50%;display:grid;place-items:center;font-size:30px; }
.access-locked { min-height:243px; }
.section-heading { display:flex;gap:40px;align-items:start;justify-content:space-between;margin-bottom:55px; }
.section-heading .display { max-width:740px;width:72%; }
.service-row { display:grid;grid-template-columns:70px minmax(0,1fr) 65px;gap:25px;align-items:center;padding:34px 0;border-top:1.5px solid var(--midnight); }
.service-row:last-child { border-bottom:1.5px solid var(--midnight); }
.service-row__number { font-size:14px; }
.service-row h3 { font-size:clamp(24px,3vw,37px);letter-spacing:-.04em;line-height:1.15;font-weight:650; }
.service-row p { margin-top:12px;color:var(--ink-on-midnight-muted);font-size:16px; }
.service-row__arrow { border:1.5px solid var(--midnight);border-radius:50%;width:56px;height:56px;display:grid;place-items:center;font-size:27px;transition:background 160ms,transform 160ms; }
.service-row:hover .service-row__arrow { background:var(--lavender);transform:rotate(12deg); }
.lavender-section { background:var(--surface-cream-2);border-block:1px solid var(--rule-on-midnight); }
.project-note { display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:100px;align-items:center; }
.quote-ticket { background:var(--paper);padding:36px 38px;border:1.5px solid var(--midnight);border-radius:19px;box-shadow:3px 4px 0 var(--copper);display:flex;flex-direction:column;align-items:flex-start;gap:20px;transform:rotate(-1deg); }
.quote-ticket>strong { font-size:clamp(28px,3.5vw,43px);letter-spacing:-.05em;line-height:1; }
.quote-ticket>p { font-size:14px; }
.quote-ticket ul { width:100%;border-top:1px solid var(--rule-on-cream);padding-top:15px; }
.quote-ticket li { font-size:14px;padding:5px 0; }
.quote-ticket li::before { content:'✓';margin-right:12px; }
.how-strip { display:grid;grid-template-columns:1fr 1fr;gap:80px; }
.how-strip ol { display:flex;flex-direction:column;gap:29px; }
.how-strip li { display:flex;gap:25px; }
.how-strip li>span { background:var(--lavender);border:1.5px solid var(--midnight);border-radius:50%;width:39px;height:39px;flex:none;display:grid;place-items:center; }
.how-strip h3 { font-size:22px;letter-spacing:-.025em;margin-bottom:8px; }
.how-strip p { color:var(--ink-on-midnight-muted); }
.founder-note { background:var(--copper-soft);border-block:1.5px solid var(--midnight); }
.faq-layout { display:grid;grid-template-columns:.8fr 1.2fr;gap:80px; }
.simple-faq details { border-bottom:1px solid var(--midnight);padding:22px 0; }
.simple-faq details:first-child { border-top:1px solid var(--midnight); }
.simple-faq summary { font-size:20px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px; }
.simple-faq summary::after { content:'+';font-weight:400; }
.simple-faq details[open] summary::after { content:'−'; }
.simple-faq details p { margin-top:20px;max-width:530px;color:var(--ink-on-midnight-muted); }
.closer { background:var(--midnight);color:var(--cream);border-block:1px solid var(--midnight); }
.closer .lead { color:var(--cream); }
.site-footer { padding-top:60px; }
.site-footer__col h3,.meta,.eyebrow { font-family:var(--font-sans);letter-spacing:.01em;text-transform:none; }
.page-intro { padding:70px 0 55px; }
.page-intro h1 { font-size:clamp(43px,5.7vw,78px);line-height:1.05;letter-spacing:-.055em;max-width:850px; }
.page-intro .lead { margin-top:27px;max-width:660px; }
.page-intro .btn-row { margin-top:30px; }
@media(max-width:1100px){.site-header__inner{height:72px}.site-nav{gap:0}.playground-stage{padding:36px;gap:25px}.project-note{gap:45px}.new-hero__intro{gap:35px}.new-hero h1{font-size:clamp(43px,6.1vw,73px)}.new-hero__aside p{font-size:16px}}
@media(max-width:760px){.new-hero{padding-top:38px}.new-hero__intro{grid-template-columns:1fr;margin-bottom:35px;gap:28px}.new-hero h1{font-size:clamp(43px,8.8vw,65px)}.new-hero__aside{gap:20px}.new-hero__aside p{max-width:490px}.playground-toolbar{align-items:flex-start;flex-direction:column;padding:14px 17px;gap:10px}.playground-tabs{gap:2px}.playground-tabs button{padding:8px 10px;font-size:12px;min-height:42px}.playground-stage{grid-template-columns:1fr;padding:29px 24px;gap:22px}.demo-situation h2{font-size:35px}.demo-situation>p:not(.demo-result){font-size:16px}.demo-situation>p br{display:none}.demo-action{margin-top:20px}.demo-result{min-height:0}.handoff-drawing,.booking-drawing,.review-drawing{max-width:380px}.playground-bottom{padding:13px 17px}.demo-label{font-size:11px}.hero-footnote{font-size:12px;padding-block:23px}.hero-footnote span:last-child{display:none}.section-heading{display:block;margin-bottom:35px}.section-heading .display{width:100%}.service-row{grid-template-columns:32px minmax(0,1fr) 40px;gap:12px;padding:25px 0}.service-row__arrow{width:36px;height:36px;font-size:21px}.service-row p{font-size:14px}.project-note,.how-strip,.faq-layout{grid-template-columns:1fr;gap:38px}.quote-ticket{padding:29px;max-width:470px;width:100%}.how-strip li{gap:17px}.simple-faq summary{font-size:18px}.workflow-playground{box-shadow:4px 5px 0 var(--midnight);border-radius:17px}.review-sticker{right:-6px}.site-footer__bottom{margin-top:35px}}
@media(prefers-reduced-motion:no-preference){.folder-content,.crm-record,.sample-app__body{animation:demo-arrive 220ms ease-out}@keyframes demo-arrive{from{transform:translateY(5px)}to{transform:translateY(0)}}}
.service-checks ul { margin-top:25px; }
.service-checks li { border-top:1px solid var(--midnight);padding:17px 0;display:flex;gap:15px; }
.service-checks li::before { content:'✓'; }
.service-checks li:last-child { border-bottom:1px solid var(--midnight); }

.handoff-drawing,.booking-drawing,.review-drawing { color:var(--midnight); }
.sync-bridge { color:var(--cream); }
.handoff-path span { color:var(--cream);border:1px solid var(--cream); }
.handoff-path { color:var(--cream); }


/* ---- 07-tools.css ---- */
/* Original platform marks on Brontera's warm, quiet surfaces. */
.tool-strip,.tool-directory { background:#fff; }
.tool-strip { padding: 35px 0 40px; border-bottom: 1px solid var(--rule-on-midnight); }
.tool-strip__heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:22px; }
.tool-strip__heading h2 { font-size:15px; font-weight:500; color:var(--ink-on-midnight-muted); }
.tool-strip__logos { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
.tool-strip__link { display:flex; justify-content:center; align-items:center; min-height:72px; border-radius:6px; }
.tool-strip__link:hover { background:var(--paper); }
.tool-brand { display:flex; align-items:center; gap:10px; min-height:44px; }
.tool-brand img { object-fit:contain; flex:none; max-width:100%; }
.tool-brand--icon img { width:34px; height:34px; }
.tool-brand--icon img[src$="/whop.svg"],.tool-brand--icon img[src$="/wordpress.png"] { width:40px; height:40px; }
.tool-brand--icon span { font-size:18px; font-weight:600; line-height:1.15; letter-spacing:-.02em; }
.tool-brand--wordmark img { width:144px; height:40px; }
.tool-jump { display:flex; flex-wrap:wrap; gap:12px 26px; margin-top:44px; padding-top:22px; border-top:1px solid var(--rule-on-midnight); }
.tool-jump a { font-size:14px; text-decoration:underline; text-underline-offset:5px; }
.tool-group { display:grid; grid-template-columns:minmax(220px,.65fr) minmax(0,1.6fr); gap:72px; padding:48px 0 52px; border-top:1px solid var(--midnight); scroll-margin-top:110px; }
.tool-group__intro h2 { font-size:clamp(27px,2.6vw,37px); line-height:1.1; letter-spacing:-.04em; font-weight:650; max-width:300px; }
.tool-group__intro p { color:var(--ink-on-midnight-muted); font-size:15px; line-height:1.5; margin-top:18px; max-width:260px; }
.tool-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 35px; align-content:start; }
.tool-list>li { scroll-margin-top:110px; min-width:0; }
.tool-entry { position:relative; display:flex; flex-direction:column; gap:13px; padding:17px 26px 20px 0; min-height:126px; border-bottom:1px solid var(--rule-on-midnight); }
.tool-entry h3 { font-size:18px; font-weight:600; }
.tool-entry p { color:var(--ink-on-midnight-muted); font-size:14px; line-height:1.5; max-width:250px; }
.tool-entry__arrow { position:absolute; right:0; top:24px; font-size:20px; transition:transform 160ms; }
.tool-entry:hover .tool-entry__arrow { transform:translate(2px,-2px); }
.tool-entry:hover { border-color:var(--copper); }
.tool-list>li:target .tool-entry { background:var(--paper); outline:2px solid var(--copper); outline-offset:7px; border-radius:2px; }
@media(max-width:1100px) { .tool-strip__logos { grid-template-columns:repeat(3,minmax(0,1fr)); } .tool-group { gap:35px; grid-template-columns:minmax(180px,.6fr) minmax(0,1.4fr); } .tool-list { gap:10px 25px; } }
@media(max-width:760px) { .tool-strip { padding:27px 0; } .tool-strip__logos { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 20px; } .tool-strip__heading { gap:15px; } .tool-strip__heading h2,.tool-strip__heading a { font-size:13px; } .tool-group { grid-template-columns:1fr; gap:20px; padding:32px 0 40px; } .tool-group__intro h2,.tool-group__intro p { max-width:100%; } .tool-list { gap:6px 20px; } .tool-brand--icon span { font-size:16px; } .tool-brand--icon img { width:30px; height:30px; } .tool-entry { padding-right:18px; } .tool-entry .tool-brand--wordmark img { width:128px; } .tool-entry__arrow { font-size:17px; } }
@media(max-width:420px) { .tool-list { grid-template-columns:1fr; } .tool-entry { min-height:108px; } .tool-strip__logos { gap:5px 10px; } .tool-strip .tool-brand--wordmark img { width:132px; } .tool-strip .tool-brand--icon { gap:7px; } .tool-strip .tool-brand--icon span { font-size:15px; } }
@media(prefers-reduced-motion:reduce) { .tool-entry__arrow { transition:none; } }


/* ---- 08-build-planner.css ---- */
.build-section__intro { max-width:740px; width:72%; }
.build-section__intro .display { width:100%; max-width:none; }
.build-section__intro>p { max-width:590px; margin-top:23px; color:var(--ink-on-midnight-muted); font-size:18px; line-height:1.5; }
.build-planner { background:var(--midnight); color:var(--cream); border:2px solid var(--midnight); border-radius:20px; box-shadow:5px 6px 0 var(--copper); overflow:hidden; }
.build-presets { display:flex; flex-wrap:wrap; gap:10px; padding:20px 28px; border-bottom:1px solid #ffffff35; }
.build-presets button { font-size:14px; font-weight:550; min-height:44px; padding:10px 18px; border:1px solid #ffffff65; border-radius:24px; color:var(--cream); background:transparent; cursor:pointer; }
.build-presets button[aria-pressed="true"] { color:var(--midnight); background:var(--cream); border-color:var(--cream); }
.build-presets button:hover:not([aria-pressed="true"]) { border-color:var(--cream); }
.build-planner__body { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:32px; padding:34px; align-items:start; }
.build-choices { border:0; padding:0; min-width:0; }
.build-choices legend { padding:0; margin-bottom:15px; font-size:13px; color:var(--cream); }
.build-choice { display:flex; gap:15px; align-items:center; padding:16px 6px; border-top:1px solid #ffffff35; cursor:pointer; }
.build-choice:last-child { border-bottom:1px solid #ffffff35; }
.build-choice input { appearance:auto; width:21px; height:21px; flex:none; accent-color:var(--copper); cursor:pointer; }
.build-choice strong { display:block; font-size:17px; font-weight:550; line-height:1.2; }
.build-choice small { display:block; font-size:12px; line-height:1.4; color:#ffffffb8; margin-top:5px; }
.build-preview { background:var(--paper); color:var(--midnight); padding:30px 32px; border-radius:12px; }
.build-preview__label { font-size:12px; margin-bottom:18px; color:var(--ink-on-midnight-muted); }
.build-preview h3 { font-size:clamp(26px,3vw,37px); line-height:1.1; letter-spacing:-.04em; font-weight:650; }
.build-preview__description { font-size:15px; line-height:1.5; margin:18px 0 24px; color:var(--ink-on-midnight-muted); }
.build-deliverables li { padding:11px 0 11px 22px; border-top:1px solid var(--rule-on-midnight); position:relative; font-size:13px; line-height:1.5; }
.build-deliverables li::before { content:'↳'; position:absolute; left:0; color:var(--signal-text); }
.build-preview__action { margin-top:26px; }
.build-preview__action>p { font-size:12px; line-height:1.5; color:var(--ink-on-midnight-muted); margin-top:18px; max-width:370px; }
.build-preview button:disabled { opacity:.5; cursor:not-allowed; }
.build-empty { font-size:15px; margin:35px 0; }
.contact-journey .step__name a { font:inherit; }
@media(min-width:1000px) {
  .contact-journey .steps { grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; border-top:0; }
  .contact-journey .step { display:block; border-top:2px solid var(--rule-on-cream); border-bottom:0; padding-top:22px; padding-bottom:0; }
  .contact-journey .step:first-child { border-top-color:var(--copper); }
  .contact-journey .step__n { display:block; margin-bottom:20px; }
  .contact-journey .step__name { margin-bottom:15px; }
  .contact-journey .step__what { font-size:14px; line-height:1.55; }
}
@media(max-width:900px) { .build-planner__body { grid-template-columns:1fr; padding:24px; gap:25px; } .build-choices { display:grid; grid-template-columns:1fr 1fr; gap:0 22px; } .build-choices legend { grid-column:1/-1; } .build-choice:last-child { border-bottom:0; } .build-preview { padding:27px; } }
@media(max-width:760px) { .build-section__intro { width:100%; } .build-section__intro>p { font-size:16px; } .build-presets { padding:16px; gap:8px; } .build-presets button { font-size:12px; padding:9px 13px; } }
@media(max-width:480px) { .build-planner { border-radius:15px; box-shadow:3px 4px 0 var(--copper); } .build-planner__body { padding:18px; } .build-choices { display:block; } .build-choice { padding:13px 0; } .build-choice strong { font-size:16px; } .build-preview { padding:23px 20px; } .build-preview__action .btn { width:100%; } }


/* ---- 09-videos.css ---- */
.video-library { background:var(--paper); border-block:1px solid var(--rule-on-cream); }
.video-library__intro { display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:42px; }
.video-library__intro>p { color:var(--ink-on-cream-muted); font-size:16px; }
.video-library__stories { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; align-items:start; }
.video-library__stories[data-video-count="1"] { grid-template-columns:minmax(0,940px); justify-content:center; }
.video-story { min-width:0; border-top:2px solid var(--midnight); padding-top:20px; }
.video-story__heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.video-story__heading h3 { font-size:clamp(23px,2.4vw,30px); font-weight:600; line-height:1.2; letter-spacing:-.035em; }
.video-sample { flex:none; font-size:12px; color:var(--signal-text); border:1px solid var(--signal-rule); border-radius:4px; padding:4px 7px; line-height:1.3; }
.video-story__description { color:var(--ink-on-cream-muted); font-size:15px; line-height:1.5; margin-top:13px; margin-bottom:23px; max-width:46ch; min-height:3em; }
.video-tabs { display:flex; align-items:center; gap:24px; border-bottom:1px solid var(--rule-on-cream); margin-bottom:18px; }
.video-tabs button { color:var(--ink-on-cream-muted); border:0; border-bottom:3px solid transparent; padding:10px 0 12px; margin-bottom:-1px; min-height:44px; background:none; font:inherit; font-size:14px; cursor:pointer; white-space:nowrap; }
.video-tabs button span { margin-left:5px; font-size:12px; font-family:var(--font-mono); }
.video-tabs button[aria-selected="true"] { color:var(--midnight); border-bottom-color:var(--copper); font-weight:600; }
.video-tabs button:hover { color:var(--midnight); }
.video-panel+.video-panel { margin-top:28px; }
[data-video-enhanced] .video-panel { margin-top:0; }
.video-panel__label { margin-bottom:12px; font-size:14px; font-weight:500; }
[data-video-enhanced] .video-panel__label { display:none; }
.video-panel__stage { position:relative; display:flex; align-items:center; justify-content:center; background:var(--midnight); border:1px solid var(--midnight); border-radius:10px; overflow:hidden; isolation:isolate; }
.video-panel video { display:block; width:100%; height:auto; max-width:100%; aspect-ratio:16/9; object-fit:contain; background:var(--midnight); }
.video-panel[data-format="portrait"] .video-panel__stage { height:420px; }
.video-panel[data-format="portrait"] video { height:100%; width:auto; aspect-ratio:9/16; max-height:100%; }
.video-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:10px; padding:16px 23px; min-height:54px; color:var(--midnight); background:var(--cream); border:1px solid var(--midnight); border-radius:999px; font:inherit; font-size:16px; font-weight:600; box-shadow:0 3px 12px #0003; cursor:pointer; }
.video-play:hover { background:var(--copper-soft); }
.video-play:focus-visible { outline:3px solid var(--copper); outline-offset:4px; }
.video-panel__support { display:flex; align-items:baseline; justify-content:space-between; gap:18px; margin-top:12px; }
.video-transcript { min-width:0; }
.video-transcript summary { font-size:13px; min-height:32px; padding:4px 0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.video-transcript>div { padding:12px 0; max-width:64ch; }
.video-transcript p { font-size:14px; line-height:1.65; margin:0 0 14px; }
.video-open { flex:none; font-size:13px; min-height:32px; padding:4px 0; text-underline-offset:3px; text-decoration:underline; }
.video-error { color:var(--signal-text); font-size:14px; margin-top:12px; }
.video-story__cta { display:inline-flex; align-items:center; gap:8px; padding:10px 0; margin-top:15px; min-height:44px; }
.video-library [hidden] { display:none!important; }
@media(max-width:900px) { .video-library__stories { gap:28px; } .video-story__heading { align-items:flex-start; } .video-tabs { gap:18px; } .video-tabs button { font-size:13px; } .video-tabs button span { font-size:11px; } }
@media(max-width:760px) { .video-library__intro { display:block; margin-bottom:30px; } .video-library__intro>p { margin-top:16px; } .video-library__stories { grid-template-columns:1fr; gap:44px; } .video-story__description { min-height:0; } .video-tabs { gap:28px; } .video-tabs button { font-size:14px; } .video-panel[data-format="portrait"] .video-panel__stage { height:440px; max-height:70svh; } }
@media(max-width:370px) { .video-story__heading { flex-wrap:wrap; gap:10px; } .video-tabs { gap:18px; } .video-tabs button { font-size:13px; } }