/* ============================================================================
   Help Studios — marketing site
   Design direction agreed with the brand owner (Aug 2026):
     typography  Apple's measured treatment — Inter 800, tracking -0.022em,
                 leading ~1.0 on display sizes
     colour      the product's measured palette — slate ground, teal signal, amber risk
                 one teal accent #2dd4bf, used on the primary action and the signal path

     base  #0b1220   band  #0f172a   surface #111c31   accent #2dd4bf
     type  Inter (self-hosted, variable, 100–900)

   Standing rules honoured from css/engine-styles.css:
     · every text colour comes from a token — no hardcoded colour on text
     · AA minimum contrast (AAA on body copy where achievable)
     · UK English in all copy
     · no third-party requests: no CDN, no analytics, no font host
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/InterVariable.woff2') format('woff2');
}

:root {
  /* Surfaces — dark slate, with tinted bands for section breaks */
  --c-base:          #0b1220;
  --c-base-deep:     #0f172a;
  --c-amber:         #f5b942;
  --c-surface:       #111c31;
  --c-surface-2:     #0e1727;
  --c-line:          rgba(148, 163, 184, 0.14);
  --c-line-strong:   rgba(148, 163, 184, 0.28);

  /* Text — one hue, stepped */
  --c-text:          #e8eef7;
  --c-text-2:        #a9b6c9;
  --c-text-3:        #7c8aa0;
  --c-on-accent:     #04211d;

  /* Accent — teal, the signal colour, on the primary action and the flow */
  --c-accent:        #2dd4bf;
  --c-accent-hover:  #5eead4;
  --c-accent-dim:    rgba(45, 212, 191, 0.10);
  --c-accent-line:   rgba(45, 212, 191, 0.35);

  /* Type */
  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Metrics */
  --wrap: 1160px;
  --header-h: 68px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* ── Reset ───────────────────────────────────────────────────────────────── */

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

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--c-base);
  color: var(--c-text);
  font-family: var(--font-base);
  font-size: 1rem;
  line-height: 1.6;
  font-feature-settings: 'cv05' 1, 'ss01' 1;
  /* Sharpness: optical sizing picks the variable font's display cut at large
     sizes, kerning keeps glyph pairs from drifting, and font-synthesis: none
     stops the browser faking a bold or italic face the file does not have. */
  font-optical-sizing: auto;
  font-kerning: normal;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
/* Form controls default to the UA's 13.3333px, which renders soft everywhere
   else on the page; inherit the page's typography instead. */
button, input, select, textarea { font: inherit; }

h1, h2, h3 {
  letter-spacing: -0.022em;
  line-height: 1.02;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 5.6vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.625rem, 3.4vw, 2.5rem); line-height: 1.08; }
h3 { font-size: 1.0625rem; line-height: 1.35; font-weight: 620; text-wrap: pretty; }

p { text-wrap: pretty; }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

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

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

.skip-link {
  position: absolute;
  top: 0.5rem; left: 0.5rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-size: 0.875rem;
  font-weight: 650;
  text-decoration: none;
  border-radius: var(--r-sm);
  transform: translateY(-200%);
  transition: transform 0.18s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ── Layout ──────────────────────────────────────────────────────────────── */

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.section {
  padding-block: clamp(3.5rem, 7vw, 6rem);
  border-top: 1px solid var(--c-line);
  scroll-margin-top: var(--header-h);
}

.section-head {
  max-width: 62ch;
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section-head h2 { max-width: 24ch; }

.eyebrow {
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.lede,
.section-lede {
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--c-text-2);
  max-width: 62ch;
}

/* The sentence that stops a list of systems reading as a closed set. It sits in
   the section head, under the lede, because the doubt it answers ("am I even
   supported?") arrives before the diagram, not after it. */
.section-note {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--c-text-3);
  max-width: 62ch;
}
.section-note strong { color: var(--c-text-2); font-weight: 620; }

/* ── Buttons and links ───────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.82rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 620;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease), transform 0.18s var(--ease);
}

.btn-primary {
  background: var(--c-accent);
  color: var(--c-on-accent);
}
.btn-primary:hover {
  background: var(--c-accent-hover);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

.btn-sm { padding: 0.56rem 1.05rem; font-size: 0.8125rem; }

.btn-icon { width: 0.85rem; height: 0.85rem; flex: none; }

.link-arrow {
  font-size: 0.9375rem;
  font-weight: 550;
  color: var(--c-text);
  text-decoration: none;
  border-bottom: 1px solid var(--c-line-strong);
  padding-bottom: 2px;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.link-arrow:hover { color: var(--c-accent); border-bottom-color: var(--c-accent); }


/* ── Header ──────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 18, 32, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.site-header.is-scrolled {
  background: rgba(11, 18, 32, 0.90);
  border-bottom-color: var(--c-line);
}

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

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  white-space: nowrap;
}
.brand-name {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI Variable Display', 'Segoe UI', 'Helvetica Neue', Inter, Arial, sans-serif;
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}
.brand-rule {
  width: 1px;
  height: 14px;
  background: var(--c-line-strong);
}
.brand-product {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--c-text-3);
}
.brand:hover .brand-product { color: var(--c-text-2); }

/* The mark costs the bar 68px of width it did not have. Between 1081 and 1180
   the inline nav needs 748px, which leaves 269 for the brand and it was 306, so
   the product suffix steps aside rather than the five links wrap onto a second
   row. Below 1080 the nav collapses into the toggle and the suffix comes back. */
@media (min-width: 1081px) and (max-width: 1180px) {
  .brand-product,
  .brand-rule { display: none; }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.45rem;
}

.site-nav a:not(.btn) {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-text-2);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.site-nav a:not(.btn):hover {
  color: var(--c-text);
  border-bottom-color: var(--c-accent);
}

.nav-cta { margin-left: 0.35rem; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  color: var(--c-text);
  cursor: pointer;
}

.nav-toggle-bars {
  display: grid;
  gap: 4px;
  width: 15px;
}
.nav-toggle-bars span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
/* Whole-pixel geometry on purpose: two 2px bars with a 4px gap means the X
   offset is exactly 3px, so the bars stay crisp at every device pixel ratio. */
.nav-toggle[aria-expanded='true'] .nav-toggle-bars span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle-bars span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  padding-block: clamp(3rem, 7.5vw, 6rem) clamp(3rem, 6vw, 5rem);
  scroll-margin-top: var(--header-h);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2.25rem, 5vw, 4rem);
  align-items: center;
}

.hero-copy { display: grid; gap: 1.35rem; justify-items: start; }
.hero-copy h1 { max-width: 20ch; text-wrap: balance; }
.hero-copy .lede { max-width: 54ch; }

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.3rem;
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  color: var(--c-text-3);
}
.hero-facts li { display: flex; align-items: center; gap: 0.45rem; }
.hero-facts li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-accent);
  flex: none;
}

/* ── Pipeline diagram (hero visual) ──────────────────────────────────────── */

.pipeline {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) auto minmax(0, 1.3fr) auto minmax(0, 1.16fr);
  align-items: start;
  gap: 0.75rem;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  background: var(--c-base-deep);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}

.pipe-label {
  font-size: 0.625rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-bottom: 0.7rem;
}

.pipe-files { display: grid; gap: 0.15rem; }
.pipe-files li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--c-text-2);
  padding-block: 0.22rem;
}
.dot-tick {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-accent);
  flex: none;
}
.pipe-files .pipe-more {
  color: var(--c-text-3);
  font-size: 0.75rem;
  padding-left: 0.95rem;
  white-space: nowrap;
}

.core-card {
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 0.95rem;
  background: var(--c-accent-dim);
  border: 1px solid var(--c-accent-line);
  border-radius: var(--r-md);
  position: relative;
}
.core-title { font-size: 0.8125rem; font-weight: 640; color: var(--c-text); white-space: nowrap; }
.core-sub { font-size: 0.6875rem; color: var(--c-text-3); line-height: 1.4; }

.core-pulse {
  position: absolute;
  top: 0.95rem;
  right: 0.95rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
}
.core-pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--c-accent-line);
  animation: core-pulse 2.6s var(--ease) infinite;
}
@keyframes core-pulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.core-note {
  font-size: 0.6875rem;
  color: var(--c-text-3);
  margin-top: 0.55rem;
  line-height: 1.35;
}

.pipe-out { display: grid; gap: 0.42rem; }

.pipe-out li {
  position: relative;
  padding-left: 0.95rem;
  font-size: 0.8125rem;
  color: var(--c-text-2);
  line-height: 1.4;
}
.pipe-out li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 0.45em;
  width: 4px;
  height: 4px;
  border-right: 1px solid var(--c-accent);
  border-top: 1px solid var(--c-accent);
  transform: rotate(45deg);
}

/* The connector between columns: a hairline with a single accent node, so the
   three steps read as one flow rather than three unrelated boxes. */
.pipe-link {
  position: relative;
  align-self: center;
  width: clamp(14px, 2.4vw, 34px);
  height: 1px;
  background: var(--c-line-strong);
}
.pipe-link span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.18);
}

/* ── How it works: five silos into one model ─────────────────────────────── */

/* The picker is the only control in the section, so it is a plain row of
   pressed-state buttons rather than a select: the labels are the point, and
   every option should be readable without opening anything. */
.source-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}

.source-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: 0.8125rem;
  font-weight: 560;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease),
              color 0.18s var(--ease);
}
.source-chip:hover { border-color: var(--c-accent-line); color: var(--c-text); }
.source-chip.is-active {
  border-color: var(--c-accent);
  background: var(--c-accent-dim);
  color: var(--c-text);
  font-weight: 620;
}
.source-chip-tag {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  color: var(--c-text-3);
}
.source-chip.is-active .source-chip-tag { color: var(--c-accent); }

/* Same five-column rhythm as the hero pipeline, so the two diagrams read as
   the same diagram at two levels of zoom. */
.merge {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) auto minmax(0, 0.92fr) auto minmax(0, 1fr);
  gap: 0.75rem;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  background: var(--c-base-deep);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}

/* Columns stretch to the tallest one so their captions share a baseline at the
   foot of the panel. Content stays at the top; the note is pushed down by its
   auto margin. Three captions on one line read as a caption, three captions at
   three different heights read as an accident. */
.merge-col {
  display: flex;
  flex-direction: column;
}

.silo-list { display: grid; gap: 0.35rem; }

.silo {
  display: grid;
  gap: 0.12rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--c-line);
  border-left: 2px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}

/* Deliberately unaligned. The left-hand column has to look like five teams who
   never spoke to each other, and a tidy stack would undercut the argument. */
.silo:nth-child(2) { margin-left: 11px; }
.silo:nth-child(3) { margin-left: 4px; }
.silo:nth-child(4) { margin-left: 15px; }
.silo:nth-child(5) { margin-left: 7px; }

.silo.is-active {
  border-color: var(--c-accent-line);
  border-left-color: var(--c-accent);
  background: var(--c-accent-dim);
}

.silo-name { font-size: 0.75rem; font-weight: 620; color: var(--c-text); }

.silo-field {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--c-text-3);
  overflow-wrap: anywhere;
}
.silo.is-active .silo-field { color: var(--c-text-2); }

.silo-report {
  font-size: 0.625rem;
  line-height: 1.4;
  color: var(--c-text-3);
}

.model-list {
  display: grid;
  gap: 0.15rem;
  margin-top: 0.7rem;
}
.model-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.2rem;
  font-size: 0.8125rem;
  color: var(--c-text-2);
}

.unified-list { display: grid; gap: 0.1rem; }
.unified-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: 0.3rem;
  border-bottom: 1px solid var(--c-line);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--c-text-2);
}
.unified-list li:last-child { border-bottom: 0; }

.merge-note {
  margin-top: auto;
  padding-top: 0.7rem;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--c-text-3);
}

/* The field map is the accessible equivalent of the diagram above it, not a
   decorative add-on: the same mapping in text, for whichever source is picked.
   A real table, because the columns mean the same thing on every row. */
.field-map {
  display: grid;
  gap: 0.55rem;
  margin-top: 1.1rem;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.field-map-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}

.field-map-source { font-size: 0.75rem; color: var(--c-text-3); }
.field-map-source span { color: var(--c-text); font-weight: 620; }

.field-map-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.field-map-table th,
.field-map-table td {
  padding: 0.5rem 0;
  text-align: left;
  vertical-align: baseline;
  border-bottom: 1px solid var(--c-line);
}

.field-map-table thead th {
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--c-line-strong);
  font-size: 0.625rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.field-map-table thead th:first-child { width: 34%; }
.field-map-table thead th:last-child { width: 66%; }

.field-map-table tbody th {
  padding-right: 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-text);
}

.field-map-table tbody td {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--c-text-2);
  overflow-wrap: anywhere;
}

.field-map-table tbody tr:last-child th,
.field-map-table tbody tr:last-child td { border-bottom: 0; }

/* A column the selected system has no name for. It is not a gap and not a
   vendor name: it is the engine's own template column, which is what the
   engine will use for that file. Muted, and underlined with a dash, so it
   cannot be read as that vendor's word for the field. */
.field-map-fallback {
  color: var(--c-text-3);
  border-bottom: 1px dashed var(--c-line-strong);
}

.field-map-note {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--c-text-2);
}

.field-map-foot {
  padding-top: 0.55rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--c-text-3);
}

/* ── Demo player ─────────────────────────────────────────────────────────── */

.player {
  position: relative;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface-2);
  overflow: hidden;
  box-shadow: 0 18px 44px -30px rgba(0, 0, 0, 0.45);
}

.player-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
}

.player-poster {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 44%, var(--c-accent-dim), transparent 58%),
    var(--c-surface-2);
}

.poster-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--c-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--c-line) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.75;
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 32%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 45%, #000 32%, transparent 78%);
}

/* The four steps the walkthrough follows, drawn as a quiet timeline so the
   poster reads as a still from a film rather than an empty frame. Decorative —
   the section lede already names the same four steps. */
.poster-steps {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 15%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.poster-steps::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--c-line-strong) 8%, var(--c-line-strong) 92%, transparent);
}
.poster-step {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  font-size: 0.6875rem;
  font-weight: 560;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.poster-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 4px var(--c-accent-dim);
}

.player-play {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--c-text);
  font-family: inherit;
}

.play-ring {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 1px solid var(--c-accent-line);
  background: var(--c-base);
  color: var(--c-accent);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.5), 0 0 0 8px var(--c-accent-dim);
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease),
              border-color 0.2s var(--ease);
}
.play-ring svg { width: 22px; height: 22px; margin-left: 3px; }

.player-play:hover .play-ring {
  transform: scale(1.06);
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-color: var(--c-accent);
}

.play-label {
  font-size: 0.875rem;
  font-weight: 620;
  letter-spacing: 0.01em;
}

.player-tags {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tag {
  font-size: 0.6875rem;
  font-weight: 550;
  letter-spacing: 0.02em;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  border: 1px solid var(--c-line-strong);
  background: rgba(17, 28, 49, 0.72);
  color: var(--c-text-2);
  white-space: nowrap;
}
.tag-quiet { color: var(--c-text-3); }

.player-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.player-fallback {
  display: grid;
  gap: 0.85rem;
  justify-items: start;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border-top: 1px solid var(--c-line);
  background: var(--c-surface);
}
.player-fallback-title { font-size: 1.0625rem; font-weight: 620; }
.player-fallback-body { font-size: 0.9375rem; color: var(--c-text-2); max-width: 56ch; }

.demo-anchors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem 2rem;
  margin-top: 1.75rem;
}
.demo-anchors li {
  display: grid;
  grid-template-columns: 18px 1fr;
  grid-template-areas: 'tick title' 'tick sub';
  column-gap: 0.7rem;
  align-items: start;
}
.demo-anchors li .tick { grid-area: tick; margin-top: 0.15rem; }
.demo-anchors strong {
  grid-area: title;
  font-size: 0.9375rem;
  font-weight: 620;
}
.demo-anchors li > span:last-child {
  grid-area: sub;
  font-size: 0.8125rem;
  color: var(--c-text-3);
  line-height: 1.5;
  margin-top: 0.2rem;
}

.demo-caption {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line);
  text-align: center;
  font-size: 0.875rem;
  font-weight: 550;
  letter-spacing: 0.02em;
  color: var(--c-text-2);
}

/* Tick mark, used by the demo anchors and the Power BI checklist */
.tick {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  background: var(--c-accent-dim);
  border: 1px solid var(--c-accent-line);
  position: relative;
}
.tick::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 3px;
  width: 4px;
  height: 7px;
  border-right: 1px solid var(--c-accent);
  border-bottom: 1px solid var(--c-accent);
  transform: rotate(40deg);
}

/* ── Six areas ───────────────────────────────────────────────────────────── */

.area-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.area-card {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: clamp(1.15rem, 2.2vw, 1.6rem);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.022);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease),
              transform 0.2s var(--ease);
}
.area-card:hover {
  border-color: var(--c-accent-line);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
}

.area-index {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--c-accent);
  margin-bottom: 0.35rem;
}

.area-card p {
  font-size: 0.875rem;
  line-height: 1.62;
  color: var(--c-text-2);
}

/* ── Power BI bridge ─────────────────────────────────────────────────────── */

/* ── What you get: the layer on top of the HRIS ──────────────────────────── */

/* The need, stated before any feature is sold: three costs the reader already
   recognises, carrying the same left rule as the founder note so they read as a
   claim the page is making rather than a decorative panel. */
.feature-gap {
  display: grid;
  gap: 0.9rem;
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
  border: 1px solid var(--c-line);
  border-left: 2px solid var(--c-accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: rgba(255, 255, 255, 0.03);
}

.feature-gap-label {
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

.feature-gap-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 1.75rem;
}

.feature-gap-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c-text);
}
.feature-gap-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.6rem;
  height: 1px;
  background: var(--c-accent);
}

/* The jump row is navigation, so it is anchors rather than pressed buttons: it
   works with JavaScript off, and the page's own smooth scrolling does the
   motion (and already stands down under reduced motion). */
.feature-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

.feature-jump a {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: 0.8125rem;
  font-weight: 560;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease),
              color 0.18s var(--ease);
}
.feature-jump a:hover {
  border-color: var(--c-accent-line);
  color: var(--c-text);
}
.feature-jump a[aria-current='true'] {
  border-color: var(--c-accent);
  background: var(--c-accent-dim);
  color: var(--c-text);
  font-weight: 620;
}

/* One group = four capabilities. The heading names the job the HRIS leaves
   undone; the cards are the proof. Anchor offset clears the fixed header. */
.feature-remote {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.feature-remote + .feature-remote {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.feature-remote-head {
  display: grid;
  gap: 0.35rem;
  max-width: 66ch;
  margin-bottom: 1.1rem;
}

.feature-remote-head h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.feature-remote-count {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-text-3);
  white-space: nowrap;
}

.feature-remote-note {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c-text-2);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.feature-card {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.022);
  overflow-wrap: break-word;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

/* Landing on a group flashes its cards once, so a jump has a visible result
   even when the reader arrives mid-page. No motion is relied on: the state is
   a colour change, and reduced-motion users simply see it snap. */
.feature-remote.is-flash .feature-card {
  border-color: var(--c-accent-line);
  background: rgba(45, 212, 191, 0.06);
}

.feature-index {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--c-accent);
}

.feature-card h4 {
  font-size: 0.9375rem;
  font-weight: 620;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--c-text);
  text-wrap: pretty;
}

.feature-card p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--c-text-2);
}

.powerbi-grid {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.powerbi-copy { display: grid; gap: 1.1rem; justify-items: start; }
.powerbi-copy h2 { max-width: 20ch; }

.check-list {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.35rem;
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--c-text-2);
}
.check-list .tick { margin-top: 0.18rem; }

.trace-card {
  display: grid;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--c-base-deep);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}

.trace-label {
  font-size: 0.625rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

.trace-value {
  margin-top: 0.4rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.4;
}

.trace-flow {
  position: relative;
  width: 1px;
  height: 16px;
  margin: 0.9rem 0 0.9rem 5px;
  background: var(--c-accent-line);
}
.trace-flow span {
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--c-accent);
}

.trace-fields { display: grid; margin-top: 0.5rem; }
.trace-fields li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--c-line);
  font-size: 0.8125rem;
}
.trace-fields li:last-child { border-bottom: 0; }

.mono {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--c-text-2);
}

.trace-tag {
  font-size: 0.6875rem;
  color: var(--c-text-3);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
}

.trace-foot {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--c-text-3);
}

/* ── Trust ───────────────────────────────────────────────────────────────── */

.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.trust-card {
  padding: clamp(1.2rem, 2.4vw, 1.75rem);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.022);
}
.trust-card h3 { margin-bottom: 0.45rem; }
.trust-card p {
  font-size: 0.875rem;
  line-height: 1.62;
  color: var(--c-text-2);
}
.trust-card .trust-check {
  display: inline-block;
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.16s var(--ease);
}
.trust-card .trust-check:hover { color: var(--c-text); }

.founder {
  display: grid;
  gap: 0.65rem;
  max-width: 76ch;
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  padding: clamp(1.4rem, 3vw, 2rem);
  border-left: 2px solid var(--c-accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: rgba(255, 255, 255, 0.035);
}

.founder-quote {
  font-size: clamp(1.0625rem, 1.9vw, 1.25rem);
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--c-text);
}

.founder-attrib { font-size: 0.8125rem; color: var(--c-text-3); }
.founder-attrib strong { color: var(--c-text-2); font-weight: 620; }

/* ── Contact ─────────────────────────────────────────────────────────────── */

.section-contact { background: var(--c-base-deep); }

.contact-inner {
  display: grid;
  gap: 1.15rem;
  justify-items: start;
}
.contact-inner h2 { max-width: 22ch; }

.contact-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

.contact-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: 1.25rem 2.5rem;
  width: 100%;
  margin-top: 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line);
}
.contact-facts dt {
  font-size: 0.625rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-bottom: 0.3rem;
}
.contact-facts dd {
  margin: 0;
  font-size: 0.875rem;
  color: var(--c-text-2);
}
.contact-facts a {
  color: var(--c-text);
  text-decoration: none;
  border-bottom: 1px solid var(--c-line-strong);
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease);
}
.contact-facts a:hover { color: var(--c-accent); border-bottom-color: var(--c-accent); }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.site-footer {
  padding-block: 2.5rem 3rem;
  background: var(--c-base-deep);
  border-top: 1px solid var(--c-line);
}

.footer-inner { display: grid; gap: 1.15rem; }

.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-line);
}
.footer-nav-label {
  margin-bottom: 0.55rem;
  font-size: 0.6875rem;
  font-weight: 640;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.footer-nav ul {
  display: grid;
  gap: 0.42rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-nav a {
  font-size: 0.8125rem;
  color: var(--c-text-2);
  text-decoration: none;
  transition: color 0.16s var(--ease);
}
.footer-nav a:hover { color: var(--c-accent); }

.footer-brand { display: flex; align-items: center; gap: 0.7rem; }

.footer-legal {
  max-width: 78ch;
  font-size: 0.8125rem;
  line-height: 1.62;
  color: var(--c-text-3);
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--c-text-3);
}
.footer-meta a {
  color: var(--c-text-2);
  text-decoration: none;
  border-bottom: 1px solid var(--c-line-strong);
}
.footer-meta a:hover { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.footer-dot { opacity: 0.55; }

/* ── Scroll reveal ───────────────────────────────────────────────────────── */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy h1 { max-width: 26ch; }
  .hero-visual { max-width: 620px; }
  .powerbi-grid { grid-template-columns: 1fr; }
  .powerbi-visual { max-width: 520px; }
}

@media (max-width: 1080px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: 49;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1.25rem 1.5rem;
    background: var(--c-base);
    border-bottom: 1px solid var(--c-line);
    box-shadow: 0 20px 36px -26px rgba(0, 0, 0, 0.5);
  }
  .site-nav.is-open { display: flex; }

  .site-nav a:not(.btn) {
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--c-line);
    font-size: 0.9375rem;
  }
  .site-nav a:not(.btn):hover { border-bottom-color: var(--c-accent); }

  .nav-cta {
    margin: 1rem 0 0;
    width: 100%;
  }

  .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-facts { grid-template-columns: repeat(2, minmax(0, auto)); }

  /* Three columns of field names will not survive a tablet width without the
     mono turning into a wall, so the merge diagram stacks and its connectors
     turn vertical — the same collapse the hero pipeline uses. The staggered
     silo indents go with it: on one column they read as a mistake, not a mess. */
  .merge { grid-template-columns: 1fr; }
  .merge > .pipe-link {
    width: 1px;
    height: 18px;
    margin-inline: auto;
  }
  .merge .silo-list li { margin-left: 0; }
}

@media (max-width: 720px) {
  .pipeline {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .pipe-link {
    width: 1px;
    height: 20px;
    margin-inline: auto;
  }
  .pipe-files { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
  .pipe-files .pipe-more { grid-column: 1 / -1; padding-left: 0.95rem; }

  .area-grid,
  .trust-grid,
  .feature-grid,
  .demo-anchors {
    grid-template-columns: 1fr;
  }

  .feature-gap-list { grid-template-columns: 1fr; }

  .contact-facts { grid-template-columns: 1fr; }

  .player-fallback { padding: 1.5rem 1.25rem; }
  .play-ring { width: 62px; height: 62px; }
  .play-label { font-size: 0.8125rem; }
  /* The poster timeline is decoration; at phone widths the stage is too short
     to carry it without crowding the duration and data tags. */
  .poster-steps { display: none; }

  .footer-meta { font-size: 0.75rem; }
  .brand-product { display: none; }
  .brand-rule { display: none; }
}

@media (max-width: 420px) {
  .hero-actions .btn { width: 100%; }
  .player-tags { left: 0.75rem; bottom: 0.75rem; }
  .tag { font-size: 0.625rem; }
  .footer-nav { grid-template-columns: 1fr; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .area-card:hover,
  .btn-primary:hover { transform: none; }
}

/* ============================================================================
   Dark boardroom layer — surfaces added with the 2026 rebuild
   ========================================================================== */

/* Depth: a dark ground with two very quiet signal glows, so the hero does not
   read as a flat black rectangle on a large monitor. */
body {
  background:
    radial-gradient(1100px 560px at 82% -12%, rgba(45, 212, 191, 0.10), transparent 62%),
    radial-gradient(820px 480px at 6% 2%, rgba(56, 189, 248, 0.07), transparent 58%),
    var(--c-base);
}

/* Focus is a signal too: one teal ring, never a UA blue. */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Frustrations band ──────────────────────────────────────────────────── */
.section-frustrations { background: var(--c-base-deep); }

.frustration-grid {
  margin-top: 2.4rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.frustration-card {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: 1.55rem 1.5rem 1.6rem;
  background: var(--c-surface);
}
.frustration-card:last-child { grid-column: 1 / -1; }
.frustration-q {
  font-size: 1.0625rem;
  font-weight: 560;
  line-height: 1.42;
  letter-spacing: -0.006em;
  color: var(--c-text);
}
.frustration-q::before { content: '\201C'; color: var(--c-accent); margin-right: 0.06em; }
.frustration-q::after { content: '\201D'; color: var(--c-accent); margin-left: 0.02em; }
.frustration-a {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c-text-2);
}
.frustration-a strong { color: var(--c-text); font-weight: 620; }

/* ── Product shots ──────────────────────────────────────────────────────── */
.section-product { background: var(--c-base); }

.shot-grid {
  margin-top: 2.4rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35rem;
}
.shot {
  display: grid;
  margin: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  overflow: hidden;
  box-shadow: 0 34px 80px -56px rgba(0, 0, 0, 0.95);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.shot:hover { transform: translateY(-3px); border-color: var(--c-accent-line); }
.shot-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.shot-open img {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 1px solid var(--c-line);
}
.shot figcaption {
  display: grid;
  gap: 0.22rem;
  padding: 0.9rem 1.1rem 1.05rem;
}
.shot figcaption strong {
  font-size: 0.9375rem;
  font-weight: 620;
  color: var(--c-text);
}
.shot figcaption span {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--c-text-2);
}
.shot-note {
  margin-top: 1.15rem;
  font-size: 0.8125rem;
  color: var(--c-text-3);
}

/* ── Lightbox ───────────────────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  place-items: center;
  padding: clamp(1rem, 3vw, 3rem);
  background: rgba(4, 8, 16, 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lightbox.is-open { display: grid; }
.lightbox img {
  max-width: 100%;
  max-height: 86vh;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  box-shadow: 0 50px 140px -40px #000;
}
.lightbox-close {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-line-strong);
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* ── Optional hero narration (rendered only when SITE.narration is set) ──── */
.hero-listen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin-top: 1.15rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  max-width: 30rem;
}
.hero-listen-label { font-size: 0.8125rem; color: var(--c-text-2); }
.hero-listen audio { height: 34px; width: 100%; max-width: 18rem; }

@media (max-width: 820px) {
  .frustration-grid,
  .shot-grid { grid-template-columns: 1fr; }
  .frustration-card:last-child { grid-column: auto; }
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Try it: profile an export in the browser ───────────────────────────── */
.section-try { background: var(--c-base-deep); }

.try-grid {
  margin-top: 2.4rem;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 1.35rem;
  align-items: stretch;
}

/* The two panels are deliberately equal height: the profile table is taller
   than the instructions, so the left card stretches. It is a flex column and
   not a grid with align-content, because the card has to hold the steps at its
   top *and* the privacy note on its bottom edge (margin-top: auto). Auto
   margins cannot absorb free space that align-content has packed to the start:
   with `display: grid; align-content: start` the note floats mid-card and the
   bottom third of the card is empty. */
@media (max-width: 820px) {
  .try-grid { grid-template-columns: 1fr; }
}

.try-panel {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding: 1.4rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}

.try-steps { display: grid; gap: 0.7rem; }
.try-step-list {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: try-step;
}
.try-step-list li {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--c-text-2);
}
.try-step-list li::before {
  counter-increment: try-step;
  content: counter(try-step);
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--c-accent);
}

.try-panel-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; }

.try-run {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--c-accent);
  border-radius: 999px;
  background: var(--c-accent-dim);
  color: var(--c-accent);
  cursor: pointer;
  transition: background-color 0.16s var(--ease), color 0.16s var(--ease);
}
.try-run:hover { background: var(--c-accent); color: var(--c-base-deep); }
.try-run-icon { width: 12px; height: 12px; }

.try-clear {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 560;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--c-text-2);
  cursor: pointer;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.try-clear:hover { color: var(--c-text); border-color: var(--c-accent); }

.try-status:empty { display: none; }
.try-status {
  min-height: 1.25em;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--c-text-2);
}
.try-privacy {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--c-text-3);
}
.try-privacy code {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--c-text-2);
}

.try-output {
  display: grid;
  gap: 1.05rem;
  padding: 1.4rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.try-output[hidden] { display: none; }

/* Holds the second column's height while nothing has been profiled, so the
   layout does not jump when the table arrives. */
.try-placeholder {
  display: grid;
  place-items: center;
  min-height: 15rem;
  padding: 1.4rem;
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-lg);
  text-align: center;
}
.try-placeholder span {
  max-width: 36ch;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--c-text-3);
}
.try-placeholder[hidden] { display: none; }

/* Once the panels stack there is no column to hold open, so the frame shrinks to
   a strip instead of reading as a hole in the page. Declared after the base rule
   on purpose: same specificity, later wins. */
@media (max-width: 820px) {
  .try-placeholder { min-height: 7.5rem; }
}

.try-file-head { display: grid; gap: 0.3rem; }
.try-file-name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--c-text);
  overflow-wrap: anywhere;
}
.try-file-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.1rem 0 0;
  padding: 0;
  list-style: none;
}
.try-file-facts li {
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-size: 0.6875rem;
  color: var(--c-text-3);
}

/* A wide export must not push the page sideways: the table scrolls itself. */
.try-table-wrap { overflow-x: auto; }
.try-table { width: 100%; border-collapse: collapse; text-align: left; }
.try-table thead th {
  padding: 0 0.75rem 0.55rem 0;
  border-bottom: 1px solid var(--c-line-strong);
  font-size: 0.6875rem;
  font-weight: 640;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-3);
  white-space: nowrap;
}
.try-table tbody th,
.try-table tbody td {
  padding: 0.55rem 0.75rem 0.55rem 0;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}
.try-table tbody th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--c-text);
  overflow-wrap: anywhere;
}
.try-table tbody td {
  font-size: 0.8125rem;
  color: var(--c-text-3);
}
.try-table tbody tr:last-child th,
.try-table tbody tr:last-child td { border-bottom: 0; }
.try-table tbody td.try-map { color: var(--c-accent); font-weight: 560; }

/* On a phone the three columns cannot hold their line: each row becomes a
   block instead — field and mapping on one line, the shape beneath it. The
   header row is hidden visually rather than removed, so the table keeps its
   semantics for anyone listening to it rather than looking. */
@media (max-width: 600px) {
  .try-table-wrap { overflow: visible; }
  .try-table,
  .try-table tbody { display: block; }
  .try-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .try-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.15rem 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--c-line);
  }
  .try-table tbody tr:last-child { border-bottom: 0; }
  .try-table tbody th,
  .try-table tbody td { padding: 0; border: 0; }
  .try-table tbody td:last-of-type { text-align: right; }
  .try-table tbody td:first-of-type {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 0.75rem;
  }
}

.try-verdict {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--c-text-2);
}
.try-verdict strong { color: var(--c-text); font-weight: 620; }

.try-note {
  padding-top: 0.85rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--c-text-3);
}

/* ── Print ───────────────────────────────────────────────────────────────── */

@media print {
  .site-header, .player, .nav-toggle, .skip-link { display: none !important; }
  body { background: #fff; color: #111; }
  .section, .site-footer { border-color: #ddd; background: #fff; color: #111; }
  a { color: #111; }
}

/* Lifecycle and survey diagrams (inline SVG, scoped by their own root classes) */
.dgm {
  margin: 0 auto 2rem;
  padding: clamp(1rem, 2.2vw, 1.5rem);
  background: var(--c-base-deep);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
.dgm svg { display: block; width: 100%; height: auto; }
.dgm figcaption {
  margin-top: 0.9rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--c-text-2);
}
.dgm-narrow { display: none; }
.dgm-loop   { max-width: 480px; }

@media (max-width: 720px) {
  .dgm-wide   { display: none; }
  .dgm-narrow { display: block; max-width: 400px; margin-inline: auto; }
}
.dgm img { display: block; width: 100%; height: auto; border-radius: 12px; }
.dgm-story { max-width: 640px; }
.section-note { font-size: 0.875rem; line-height: 1.55; color: var(--c-text-2); max-width: 60ch; }
.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; max-width: 760px; margin: 22px 0 8px; }
.contact-form .cf-row { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.contact-form .cf-wide, .contact-form .cf-actions, .contact-form .cf-note { grid-column: 1 / -1; }
.contact-form label { font-size: 0.875rem; color: var(--c-text-2); }
.contact-form input, .contact-form select, .contact-form textarea { font: inherit; color: inherit; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.contact-form [aria-invalid="true"] { border-color: #ff8a80; }
.contact-form .cf-actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.contact-form .cf-note { font-size: 0.875rem; color: var(--c-text-2); margin: 0; }
@media (max-width: 640px) { .contact-form { grid-template-columns: 1fr; } }

.section-services .section-note { margin-top: 28px; }
.section-services .section-note + p { margin-top: 18px; }

/* guided tour: real screens with numbered callouts */
.section-tour { background: var(--c-base-deep); }
.tour-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.tour-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); background: transparent; color: inherit; font: inherit; font-size: 0.9rem; cursor: pointer; }
.tour-tab[aria-selected="true"] { background: var(--c-accent); color: #04121a; border-color: var(--c-accent); font-weight: 600; }
.tour-tab:focus-visible, .tour-pin:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.tour-tab-no { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 0.75rem; background: rgba(255, 255, 255, 0.14); }
.tour-tab[aria-selected="true"] .tour-tab-no { background: rgba(4, 18, 26, 0.18); }
.tour-stage { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.tour-shot { position: relative; margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); }
.tour-shot img { display: block; width: 100%; height: auto; }
.tour-pin { position: absolute; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%; border: 2px solid #04121a; background: var(--c-accent); color: #04121a; font: inherit; font-weight: 700; font-size: 0.85rem; cursor: pointer; box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.28); }
.tour-pin.is-on { box-shadow: 0 0 0 7px rgba(45, 212, 191, 0.5); }
.tour-step-no { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-2); margin: 0 0 4px; }
.tour-copy h3 { margin: 0 0 6px; }
.tour-q { color: var(--c-text-2); margin: 0 0 14px; }
.tour-notes { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: pin; }
.tour-notes li { counter-increment: pin; position: relative; padding: 8px 10px 8px 40px; border-radius: 8px; font-size: 0.92rem; line-height: 1.45; border: 1px solid transparent; }
.tour-notes li::before { content: counter(pin); position: absolute; left: 8px; top: 8px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--c-accent); color: #04121a; font-weight: 700; font-size: 0.78rem; }
.tour-notes li.is-on { border-color: rgba(45, 212, 191, 0.6); background: rgba(45, 212, 191, 0.07); }
.tour-nav { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 18px; }
.tour:not(.tour-js) .tour-panel { margin-bottom: 40px; }
.tour:not(.tour-js) .tour-tabs, .tour:not(.tour-js) .tour-nav button { display: none; }
@media (max-width: 860px) { .tour-stage { grid-template-columns: 1fr; } .tour-pin { width: 24px; height: 24px; font-size: 0.75rem; } }

/* ── From data to reports: the three-step story (owner, 3 Nov 2026) ───────── */
.section-pipeline { background: var(--c-base-deep); }
.pipe-story { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 3rem; }
.pipe-step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem; align-items: center; }
.pipe-step-no { margin: 0 0 0.4rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-accent); }
.pipe-step h3 { margin: 0 0 0.75rem; font-size: 1.5rem; line-height: 1.2; text-wrap: balance; }
.pipe-step p { margin: 0 0 0.9rem; color: var(--c-text-2); }
.pipe-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pipe-chips li { padding: 0.55rem 0.95rem; border: 1px solid var(--c-line-strong); border-radius: 999px; font-size: 0.9rem; color: var(--c-text); background: var(--c-surface); }
.pipe-shot { margin: 0; }
.pipe-shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.14); }
.pipe-shot figcaption { margin-top: 0.6rem; font-size: 0.8125rem; color: var(--c-text-3); }
@media (max-width: 900px) {
  .pipe-step { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}

/* Services: named offers (owner, 3 Nov 2026) */
.service-card p { margin: 0 0 0.7rem; }
.service-card .service-for { color: var(--c-accent); font-size: 0.875rem; font-weight: 500; }
.service-card .service-get { color: var(--c-text-2); font-size: 0.9rem; }
.service-card .service-get strong { color: var(--c-text); }
.service-flagship { border-color: var(--c-accent-line); background: var(--c-accent-dim); }

/* Where you are heading (owner, 3 Nov 2026) */
.section-satnav { background: var(--c-base); }
.satnav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.satnav-grid .area-card p { margin: 0 0 0.75rem; }
.satnav-proof { color: var(--c-text); font-size: 0.9375rem; border-left: 2px solid var(--c-accent); padding-left: 0.85rem; }
.satnav-src { color: var(--c-text-3); font-size: 0.8125rem; }
.satnav-src a { color: var(--c-accent); }
.pipe-proof { margin-top: 2rem; max-width: 70ch; }
@media (max-width: 800px) { .satnav-grid { grid-template-columns: minmax(0, 1fr); } }