@scope (.site-header) {
/* ---------------------------------------------
   Orey :  Design tokens
--------------------------------------------- */
:scope {
  --ink: #121a2b;
  --panel: #1b2540;
  --panel-2: #222d4a;
  --line: #2a3553;
  --text: #f5f6f8;
  --muted: #c5cdd9;
  /* Brand G (4 Oct 2026): the old amber slots now carry midnight and steel;
     rose is the one accent, for human things only */
  --amber: #8aa4c4;
  --amber-dim: #c9d6e6;
  --amber-text: #8aa4c4;
  --teal: #8aa4c4;
  --teal-text: #8aa4c4;
  --violet: #c9d6e6;
  --violet-text: #e6a3a3;

  --font-display: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-voice: 'Newsreader', Georgia, serif;
  --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --midnight: #121a2b;
  --deep: #1b2540;
  --steel: #8aa4c4;
  /* on the dark site the "deep" text tones resolve to their light versions */
  --steel-deep: #8aa4c4;
  --ice: #c9d6e6;
  --rose: #e6a3a3;
  --rose-deep: #e6a3a3;

  --wrap: 1120px;
  --radius: 6px;
}

/* ---------------------------------------------
   Reset
--------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  /* 1rem, not a fixed 16px, so the large-screen scale below reaches body copy */
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Large screens: step the root size up so every rem-based size grows with it.
   Without this the page holds 16px type inside a 1440px column and reads as a
   small island on a wide monitor. Paired with the fluid wrap widths below, so
   measure and type grow together and line lengths stay sane. */
@media (min-width: 1600px) { :scope { font-size: 17px; --wrap: 1240px; } }
@media (min-width: 2000px) { :scope { font-size: 18px; --wrap: 1340px; } }
@media (min-width: 2400px) { :scope { font-size: 19px; --wrap: 1420px; } }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; }
p { margin: 0 0 1em; color: var(--muted); }
a { color: inherit; text-decoration: none; }
ol, ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
input, button { font-family: inherit; font-size: 1rem; }

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

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  min-width: 0;
}
/* Grows from 1440 up to 1920 on wide monitors, and never below 1440, so the
   existing desktop layout is untouched while big screens actually get used.
   max() guards the small end: a bare vw value would shrink it at 1440px. */
.wrap-wide { max-width: max(1440px, min(1920px, 82vw)); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber-text);
  margin: 0 0 .9em;
}
/* section index, e.g. [1] :  sits ahead of the label without inheriting its
   wide tracking, which would push the bracket off the number. colour is
   inherited from .eyebrow so the number and its label always match. */
.eyebrow-num {
  letter-spacing: .04em;
  margin-right: .85em;
}

/* subtle grain so the flat light ground doesn't feel like a template */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  opacity: .025; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* dot-grid texture, like a faint sheet of graph paper across the whole page :  stays put while you scroll */
.dot-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(245,246,248,0.07) 1px, transparent 1.4px);
  background-size: 26px 26px;
}

main, .site-header, .site-footer { position: relative; z-index: 2; }

/* ---------------------------------------------
   Header
--------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(18,26,43,.86);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-row {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.logo {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ear-mark { color: var(--amber); flex-shrink: 0; }
.nav { display: flex; gap: 28px; }
.nav a { color: var(--muted); font-size: .92rem; transition: color .15s ease; }
.nav a:hover { color: var(--text); }
/* current-section indicator: black for "you are here", same colour hover
   already uses, so the current section always reads as already-hovered */
.nav a.is-on, .mobile-nav a.is-on { color: var(--text); font-weight: 500; }
.nav-cta { display: inline-flex; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  flex-direction: column;
  gap: 2px;
  padding: 10px 24px 22px;
  border-top: 1px solid var(--line);
  max-height: calc(100vh - 69px);
  max-height: calc(100dvh - 69px);
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
.mobile-nav:not([hidden]) { display: flex; }
.mobile-nav a {
  padding: 13px 2px;
  color: var(--text);
  font-size: 1rem;
  border-bottom: 1px solid var(--line);
}
.mobile-nav a.btn {
  border-bottom: none;
  margin-top: 10px;
  align-self: flex-start;
}

@media (max-width: 1000px) {
  .nav { display: none; }
  a.nav-cta { display: none; }
  .nav-toggle { display: flex; }
}
@media (min-width: 1001px) {
  .mobile-nav { display: none !important; }
}

/* ---------------------------------------------
   Buttons
--------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .75em 1.4em;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn-primary {
  background: var(--amber);
  color: #1a1305;
}
.btn-primary:hover { transform: translateY(-1px); background: #edb15b; }
.btn-ghost {
  border-color: var(--line);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--amber); }
.btn-lg {
  font-size: 1.02rem;
  padding: 1em 2.1em;
}
.btn-text {
  color: var(--muted);
  padding: .75em .2em;
}
.btn-text:hover { color: var(--amber-text); }

/* ---------------------------------------------
   Hero
--------------------------------------------- */
.hero {
  min-height: calc(100vh - 68px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0;
  position: relative;
  overflow: hidden;
  scroll-margin-top: 68px;
}
.hero-waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .85;
}
.hero-stack {
  position: relative;
  z-index: 1;
}
.hero-copy {
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
}
.hero-visual { margin-top: 64px; }
.hero h1 {
  font-size: clamp(2.6rem, 4.8vw, 4rem);
  line-height: 1.1;
  color: var(--muted);
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
}
.hero h1 .ink { color: var(--text); }
.ink { color: var(--text); }
.hero-sub {
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: 1000px;
  margin: 1.6em auto 0;
  color: var(--muted);
}
.hero-sub .ink { color: var(--text); }
.hero-actions { display: flex; gap: 18px; align-items: center; justify-content: center; margin-top: 2.2em; flex-wrap: wrap; }

/* overheard quotes :  read like a transcript, not a chat UI: no boxes, just hairline rules */
.signal-label {
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amber-text);
  margin-bottom: 16px;
}
.waveform-strip {
  display: block;
  width: 100%;
  height: 56px;
  margin-bottom: 34px;
}
.signal-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.fragment {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 0 4px;
  min-height: 250px;
  opacity: 0;
  animation: drift 15s ease-in-out infinite;
}
.signal-row .fragment:not(:first-child) {
  padding-left: 28px;
}
.quote-mark {
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: .6;
  flex-shrink: 0;
  transform: translateY(.1em);
}
.fragment-text {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--muted);
  /* The cap keeps a long quote from making the row taller than its
     neighbours, since a new quote swaps in every 15s and the layout would
     otherwise jump. -webkit-line-clamp cannot be used here: .fragment-text is
     a flex item, and flex items blockify -webkit-box to flow-root, which
     silently kills the clamp. A max-height of whole line boxes cuts on a line
     boundary instead, so no half-line is ever left showing.

     The longest quote in the pool needs 7 lines at the narrowest three-column
     width and fewer as the columns widen, so 8 clears every case with a line
     to spare, and stays inside the 250px .fragment reserves above :  nothing
     shifts. Re-measure if a longer quote is added: an earlier 4-line cap
     silently ate the back half of ten of them, with no ellipsis to show it
     had happened. */
  max-height: 12em; /* 8 lines x 1.5 line-height */
  overflow: hidden;
}
.f1 .quote-mark { color: var(--amber-text); }
.f2 .quote-mark { color: var(--teal-text); }
.f3 .quote-mark { color: var(--violet-text); }
.f1 { animation-delay: 0s; }
.f2 { animation-delay: 1.4s; }
.f3 { animation-delay: 2.8s; }

@media (prefers-reduced-motion: reduce) {
  /* the fragments sit at opacity 0 and are revealed by the animation, so
     switching the animation off without this blanks all three quotes */
  .fragment { opacity: 1; transform: none; animation: none; }
}

@keyframes drift {
  0%   { opacity: 0; transform: translateX(-6px); }
  12%  { opacity: 1; transform: translateX(0); }
  70%  { opacity: 1; transform: translateX(0); }
  100% { opacity: .25; transform: translateX(4px); }
}

@media (max-width: 800px) {
  .signal-row { grid-template-columns: 1fr; gap: 20px; }
  .fragment { padding: 8px 0; min-height: 0; }
  .signal-row .fragment:not(:first-child) { padding-left: 0; }
}



/* ---------------------------------------------
   Problem
--------------------------------------------- */
.problem {
  padding: 110px 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 68px;
  --fm-line-dim: rgba(245,246,248,.10);
  --fm-line-lit: rgba(245,246,248,.28);
}

/* fragmented-org flow map: endpoints below, HQ above, information moving up */
.flowmap { margin-top: 16px; }
.flowmap svg {
  width: 100%;
  height: auto;
  display: block;
  shape-rendering: geometricPrecision;
}
/* The six-endpoint map needs room; below 860px it would shrink the buildings
   to a few pixels. There used to be a compact three-endpoint fallback here,
   but at phone width the diagram was ~25% of the whole Problem section for
   something illustrative rather than load-bearing, so below 860px it is
   simply removed: the headline, lede, and points carry the argument alone. */
@media (max-width: 860px) {
  .flowmap-lg { display: none; }
}
/* every endpoint is wired to the centre: the lines are drawn solid so the
   connection reads clearly, and the amber pulses show what moves along them.
   these same paths are what the pulses follow via <mpath>. */
.fm-wires path {
  fill: none;
  stroke: rgba(245,246,248,.22);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* buildings: an office block at the centre, six identical factories below.
   the whole map is label-free and carries its meaning through the shapes. */
.fm-body,
.fm-roof,
.fm-stack,
.fm-hq-cap {
  fill: var(--panel);
  stroke: rgba(245,246,248,.45);
  stroke-width: 1.25;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.fm-roof { fill: none; stroke-linecap: round; }
/* windows double as the tell that each factory runs the same work differently */
.fm-win rect {
  fill: rgba(245,246,248,.22);
  stroke: none;
}

/* a lit segment slides the length of each line: one dash, a long gap, and a
   slow dashoffset sweep. pathLength="100" on every path means one cycle of the
   100-unit pattern maps exactly onto one line, so the loop is seamless and
   every line moves at the same visual speed regardless of its real length. */
.fm-flow path {
  fill: none;
  stroke: var(--amber);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 16 84;
  animation: fm-travel 7.2s linear infinite;
  filter: drop-shadow(0 0 4px rgba(227,163,77,.55));
}
@keyframes fm-travel {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fm-flow { display: none; }
}

/* the three numbered sections share one heading treatment: full section width,
   same size, so their headings line up as a set rather than three scales */
.problem .section-head-lg,
.how .section-head-lg,
.usecases .section-head-lg { max-width: none; }
.problem .section-sub { margin-bottom: 34px; }
.usecases .section-head-lg { margin-bottom: 34px; }
.how .section-sub { max-width: none; }

/* problem on the left, solution on the right, with a ruled arrow between them
   so the section reads as one movement rather than two stacked paragraphs */
/* one grid for the whole split: four shared rows (label, lede, point, point).
   both columns opt into those rows with subgrid, so each row is as tall as the
   taller side and every row lines up across the divide: the two rules sit at
   the same height, Fragmented lines up with Reachable, Uncaptured with
   Transparent. Without subgrid this degrades to independently sized rows. */
.problem-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  align-items: stretch;
  margin-top: 6px;
}
.split-col {
  display: grid;
  grid-row: 1 / span 4;
  grid-template-rows: subgrid;
  align-content: start;
  padding-top: 2px;
}
.problem-split > .split-col:first-child { grid-column: 1; }
.problem-split > .split-col:last-child  { grid-column: 3; }
.split-arrow { grid-column: 2; grid-row: 1 / -1; }
/* Supporting copy uses one body size and one label size throughout the split. */
.split-label {
  font-family: var(--font-mono);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 .85em;
}
.split-lede {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 26px;
}

/* the first point on each side carries the rule; both sit in the same grid row,
   so the two rules land at identical heights */
.split-point { padding-bottom: 16px; }
.split-col > .split-point:nth-of-type(1) {
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.split-point h3 {
  font-family: var(--font-mono);
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #925d50;
  font-weight: 600;
  margin: 0;
}
/* The solution labels use the same green as the check marks. */
.split-solution .split-label,
.split-solution .split-point h3 { color: #2f665c; }
.split-point { display:flex; align-items:center; gap:14px; min-height:58px; }
.status-mark { display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:50%; font:600 1.15rem/1 var(--font-mono); }
.status-cross { color:#925d50; background:#f4e8e3; border:1px solid #e7cec3; }
.status-check { color:#2f665c; background:#e3efea; border:1px solid #c8dfd6; }

/* the hinge: a full-height rule with the arrow punched through it */
.split-arrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.split-arrow::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 50%;
  width: 1px;
  background: var(--line);
}
.split-arrow span {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--amber-text);
  font-size: 1rem;
  line-height: 1;
}

@media (max-width: 860px) {
  .problem, .how { padding: 70px 0; }
  .flowmap { margin-top: 16px; }
  /* stacked: the hinge turns to point downward instead of across */
  .problem-split { grid-template-columns: 1fr; grid-template-rows: none; }
  .split-col { display: block; grid-row: auto; grid-column: 1 !important; grid-template-rows: none; }
  .split-arrow { grid-column: 1; grid-row: auto; height: 64px; }
  .split-arrow::before { top: 0; bottom: 0; left: 50%; }
  .split-arrow span { transform: rotate(90deg); }
  .split-point { display:flex; }
}

/* ---------------------------------------------
   How it works
--------------------------------------------- */
.how {
  padding: 110px 0;
  /* every anchor-linked section clears the 68px sticky header */
  scroll-margin-top: 68px;
  background: rgba(27,37,64,.55);
  /* no backdrop-filter here: it promotes the whole section to its own
     compositing layer, which drops subpixel text antialiasing and makes the
     copy look soft. the 2px blur over a dot grid was not buying anything. */
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-head { font-size: clamp(1.6rem, 2.6vw, 2.1rem); color: var(--text); max-width: 20ch; margin-bottom: 44px; }
.section-head-lg { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.15; color: var(--text); max-width: 26ch; margin-bottom: .45em; }
.section-sub { font-size: 1.1rem; line-height: 1.55; color: var(--muted); max-width: 52ch; margin-bottom: 56px; }

/* jump buttons: they scroll to a step, and the same observer that drives the
   walkthrough keeps their active state in sync */
/* the bar pins under the site header and stays put for the whole walkthrough,
   so the three steps are always reachable while the screenshots scroll past */
.step-jump {
  position: sticky;
  top: 68px;
  z-index: 4;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 0 16px;
  margin: 0 0 6px;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}
.step-pill {
  font-family: var(--font-mono);
  font-size: .85rem;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.step-pill.is-on { border-color: var(--amber); color: var(--text); background: rgba(18,26,43,.05); }
.step-pill:hover:not(.is-on) { border-color: var(--text); color: var(--text); }

/* scroll-driven walkthrough: the text column scrolls past a pinned product
   view that cross-fades to whichever step is crossing the middle of the screen */
.scroller {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 72px;
  align-items: start;
  margin-top: 8px;
}

.step-block {
  /* was 74vh, which reserved most of a screen for ~340px of content and made
     the section 2,500px tall to deliver three paragraphs. The padding is what
     keeps the three steps reading as three rather than butting together. */
  min-height: 0;
  padding: 60px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: .32;
  transition: opacity .4s ease;
}
.step-block.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .step-block { opacity: 1; transition: none; }
}

.step-count {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--font-mono);
  letter-spacing: .02em;
  color: var(--amber-text);
  margin-bottom: 26px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--amber);
  align-self: flex-start;
}
.step-count .step-current { font-size: 2.9rem; font-weight: 500; line-height: 1; }
.step-count .step-total { font-size: 1.05rem; color: var(--muted); }

.step-block h3 { color: var(--text); font-size: clamp(1.5rem, 2.2vw, 2.05rem); margin-bottom: .55em; }
.step-block p { font-size: 1.04rem; line-height: 1.6; max-width: 46ch; margin: 0; color: var(--muted); }

/* the pinned side sits below the sticky step bar */
.scroller-visual { position: sticky; top: 148px; }
.laptop-frame {
  position: relative;
  width: 90%;
  margin: 0 auto;
  padding: 13px;
  border: 1px solid #363b3a;
  border-radius: 20px;
  background: linear-gradient(145deg,#171b1a,#050706 62%,#202524);
  box-shadow: 0 24px 46px -27px #0f1816, inset 0 1px #5b6260;
}
.laptop-camera {
  position: absolute;
  z-index: 4;
  top: 5px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #070908;
  box-shadow: 0 0 0 1px #38413f,0 0 5px #6d969033;
  transform: translateX(-50%);
}
.laptop-frame .shot-stack { aspect-ratio:16 / 10; border:1px solid #303534; border-radius:4px; background:#111716; }
.shot-stack {
  position: relative;
  aspect-ratio: 1440 / 1080;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}
/* The pinned frame shows the whole view whenever it can, so the old right and
   bottom fades no longer run all the time - shown constantly they would dim the
   last column of the maturity matrix and the bottom row of real content. They
   come back only on the narrow windows where the legibility floor in main.js
   holds the scale up and the frame is genuinely cropped again.

   Two things buy the width that makes a whole view legible. The section runs to
   92vw rather than 82vw, and the frame takes more of the row than the copy. The
   binding constraint after that is height, not width: a 4:3 frame wider than
   (window height - the sticky bar and the link below it) * 4/3 is cut off by
   the fold, so the cap is written in those terms. */
@media (min-width: 1001px) {
  .how .wrap-wide { max-width: max(1440px, min(1920px, 92vw)); }
  .how .scroller {
    grid-template-columns: clamp(340px, 30%, 470px) minmax(0, 1fr);
    gap: 56px;
  }
  /* max-width only, no auto margin: an auto margin stops a grid item
     stretching, and .shot-stack has no intrinsic width to fall back on
     (its .shot children are all position:absolute), so the frame collapses. */
  /* On a short window the height cap shrinks the frame below its column's
     width, and a grid item that cannot stretch falls back to the start of its
     area - the left edge - leaving the gap on the right instead of the left.
     That reads as misaligned against the paragraph above it, which runs the
     row's full width. justify-self:end moves the leftover space to the left
     of the frame instead, so its right edge always meets the same boundary
     the text above it does - but justify-self:end also switches the item from
     stretch to auto sizing, and .shot-stack has no intrinsic width to fall
     back on (its .shot children are all position:absolute), so max-width
     alone no longer sets it and the frame collapses. width does, with
     max-width kept only as a safety net against a column narrower than the
     height formula expects. */
  /* The height cap keeps the frame below the sticky bar and leaves space
     for its full-example link. Right alignment keeps its edge consistent
     with the section above. */
  .scroller-visual {
    width: min(1440px, calc((100vh - 172px) * 4 / 3));
    max-width: 100%;
    justify-self: end;
  }
  .scroller-visual .shot-stack.is-cropped::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    /* fixed distances, not percentages: a percentage fade would eat a fifth of
       the narrow frames that are the only ones this now applies to */
    background:
      linear-gradient(to right, transparent calc(100% - var(--crop-fade-w, 76px)), var(--ink)),
      linear-gradient(to bottom, transparent calc(100% - var(--crop-fade-h, 64px)), var(--ink));
  }
  /* the copy column is narrower than it was, so the headings need to be too or
     "Deliver findings ranked by value at stake" breaks over four lines */
  .step-block h3 { font-size: clamp(1.4rem, 1.55vw, 1.8rem); }
  .step-count .step-current { font-size: 2.5rem; }
}
.shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.shot.is-on { opacity: 1; }
/* the mockups are authored at a fixed 1520x1160 canvas and scaled to fit
   whichever frame holds them (the desktop cross-fade or a mobile inline
   block below) so they stay crisp instead of being rasterised into an
   image. Matches any iframe inside a .shot-stack, nested in .shot or not.
   Each --shot-scale is computed by main.js per frame from its own width. */
/* 1520x1160, not the 1440x1080 the app is authored at: the mockup body is
   display:flex with 40px of padding around a fixed 1440px .app, so in a 1440px
   iframe the app has nowhere to put that padding and shrinks to 1360, and the
   translate below then shaves 40px off its left edge. At 1520x1160 the padding
   is real on all sides and the translate lands the app at exactly 0,0. This is
   what the use-case pages have always used. */
.shot-stack iframe {
  width: 1520px;
  height: 1160px;
  border: 0;
  display: block;
  transform: scale(var(--shot-scale, 0.5)) translate(-40px, -40px);
  transform-origin: top left;
}

/* Inline per-step screenshot, mobile only. Sits directly in the text flow
   with no position:sticky, so it cannot end up pinned over later copy the
   way the desktop cross-fade tried to. Hidden here; shown under 1000px. */
.step-shot-mobile { display: none; }
/* Mobile only. The frame shows the top of the view, so the reader gets a link
   that opens the whole thing on the phone they are holding, rather than a note
   telling them to come back on a desktop. */
.shot-open { display: none; }

@media (max-width: 1000px) {
  .scroller {
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* the base rule sets align-items:start for the desktop grid; in a flex
       column that stops .scroller-text stretching to full width, since it
       is effectively the only visible item once .scroller-visual is hidden */
    align-items: stretch;
  }
  /* the desktop pinned/cross-fading view is fully removed on mobile, not
     just hidden-but-sticky: that sticky version is what produced the
     overlap in the first place, so it is replaced outright by the inline
     .step-shot-mobile block inside each step below. */
  .scroller-visual { display: none; }
  .step-shot-mobile { display: block; margin-top: 22px; }
  /* Tap the Define/Collect/Deliver pills to swap the visible step instead
     of scrolling past all three stacked in full, each with its own 250px
     screenshot. setActive() in main.js already toggles .is-on on both the
     blocks and the pills for every path that changes step (pill click and,
     on desktop, the scroll observer); this just makes that toggle hide the
     other two on mobile rather than merely dim them. */
  .step-block { display: none; min-height: 0; padding: 0; opacity: 1; }
  .step-block.is-on { display: flex; }
  .step-count { margin-bottom: 20px; padding-bottom: 11px; }
  .step-count .step-current { font-size: 2.3rem; }
}

/* A 1440px canvas in a ~310px frame renders 13px text at under 3px, so below
   760px the frame hands the iframe its own width and drops the transform: the
   mockup's own phone dashboard renders at its authored size rather than being
   shrunk into noise.

   That dashboard is built to fit one phone screen, so the frame shows all of
   it. It used to be a fixed 520px window onto something several thousand
   pixels tall, which needed a fade to admit the cut and a link out to the
   rest - two places to look at one thing. main.js gives the frame the height
   of what it holds; the height here is only the pre-script fallback. */
@media (max-width: 760px) {
  .step-shot-mobile .shot-stack { aspect-ratio: auto; height: 620px; }
  .step-shot-mobile .shot-stack iframe {
    width: 100%;
    height: 620px;
    transform: none;
  }
  /* no fade and no way out: the frame ends where the dashboard ends */
  .shot-open { display: none !important; }
  .shot-open {
    display: block;
    margin-top: 11px;
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .06em;
    color: var(--muted);
    text-align: center;
    text-decoration: none;
  }
  .shot-open:hover, .shot-open:focus-visible { color: var(--text); }
}

/* ---------------------------------------------
   Who it's for
--------------------------------------------- */
.who { padding: 90px 0; }
.who h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); color: var(--text); max-width: 22ch; }
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
.card h3 { color: var(--text); font-size: 1.05rem; }
.card p { font-size: .9rem; margin: 0; }

@media (max-width: 800px) {
  .cards { grid-template-columns: 1fr; }
}

/* ---------------------------------------------
   Use cases
--------------------------------------------- */
.usecases {
  min-height: calc(100vh - 68px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0;
  background: rgba(27,37,64,.55);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 68px;
}
/* tab toggle between Use cases / Industries */
.usecases-tabs {
  display: flex;
  gap: 10px;
  margin-top: 28px;
  margin-bottom: 28px;
}
.usecases-tab {
  font-family: var(--font-mono);
  font-size: .82rem;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.usecases-tab.active { border-color: var(--amber); color: var(--text); background: rgba(18,26,43,.05); }
.usecases-tab:hover:not(.active) { border-color: var(--text); color: var(--text); }

/* 3x3 grid :  deliberately sparse, fills in as more use cases/industries land */
.grid3x3 {
  display: grid;
  width: 100%;
  box-sizing: border-box;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.grid3x3[hidden] { display: none; }

.usecase-tile {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
  min-height: 190px;
  box-sizing: border-box;
  transition: background .2s ease, border-color .2s ease;
}
.usecase-tile h3 { font-size: 1.02rem; margin-bottom: .5em; }
.usecase-tile p { font-size: .85rem; margin: 0; color: var(--muted); }
.usecase-tile.span-2 { grid-column: span 2; }

/* all filled use-case tiles get the same treatment as industry tiles:
   gradient card, icon, description only reveals on hover */
.usecase-tile[data-usecase="process-gap-mapping"],
.usecase-tile[data-usecase="use-case-discovery"],
.usecase-tile[data-usecase="organizational-pulse"],
.usecase-tile[data-usecase="departing-expertise"] {
  position: relative;
  overflow: hidden;
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.usecase-tile[data-usecase] h3 {
  position: relative;
  z-index: 2;
  color: #fff;
  margin-bottom: 0;
}
.usecase-tile[data-usecase] p {
  position: relative;
  z-index: 2;
  color: rgba(255,255,255,.88);
  margin-top: 8px;
  line-height: 1.5;
}

/* The description used to be a hover reveal. On a mouse-driven device that
   left the section as four bare labels, with every persuasive sentence
   written for a reader who never saw it, and the one non-clickable tile's
   sentence unreachable by any means. It is always visible now, as it always
   was on touch. */
/* tiles that lead to a use-case page: the arrow rides in with the description
   on hover, and the card lifts so the tile reads as clickable. on touch, where
   the description is always visible, the arrow is too. */
.usecase-tile.has-page { cursor: pointer; }
.tile-more {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
}
@media (hover: hover) {
  .usecase-tile.has-page { transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
  .usecase-tile.has-page:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(21,22,29,.55); }
}
/* At rest every tile looked equally solid, so which ones led somewhere was
   only discoverable by hovering. The arrow is now always on, and hover just
   nudges it. */
.usecase-tile.has-page::after {
  content: "\2192";
  position: absolute;
  right: 26px;
  bottom: 24px;
  z-index: 2;
  font-size: 1.15rem;
  line-height: 1;
  color: rgba(255,255,255,.6);
  transition: transform .2s ease, color .2s ease;
}
@media (hover: hover) {
  .usecase-tile.has-page:hover::after { color: #fff; transform: translateX(4px); }
}

/* Marks a use case that has no page yet. Sits top-left, opposite the icon, so
   it reads before the title rather than competing with it. The tile stays a
   div rather than a link, so there is nothing to click and nothing to lift. */
.tile-soon {
  position: absolute;
  top: 22px;
  left: 28px;
  z-index: 2;
  padding: .32em .7em;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
}

/* A use case with no page yet recedes to a pale wash of its own colour, so
   "not yet" is visible without hovering. The text flips to ink rather than
   white: fading the tile alone would have left white type on a pale ground
   at roughly 2:1 contrast. CSS stroke overrides the SVG's stroke="white". */
.usecase-tile[data-usecase]:not(.has-page) {
  background: linear-gradient(135deg, #eef2f7, #dfe6ef);
  cursor: default;
}
.usecase-tile[data-usecase]:not(.has-page) h3 { color: var(--text); }
.usecase-tile[data-usecase]:not(.has-page) p { color: var(--muted); }
.usecase-tile[data-usecase]:not(.has-page) .tile-soon {
  color: var(--muted);
  border-color: rgba(245,246,248,.18);
}
.usecase-tile[data-usecase]:not(.has-page) .industry-icon path,
.usecase-tile[data-usecase]:not(.has-page) .industry-icon circle,
.usecase-tile[data-usecase]:not(.has-page) .industry-icon rect {
  stroke: rgba(245,246,248,.3);
}

.usecase-tile[data-usecase="process-gap-mapping"] { background: linear-gradient(135deg, #c07a4a, #874f26); }
.usecase-tile[data-usecase="use-case-discovery"] { background: linear-gradient(135deg, #e3a34d, #9c6a1e); }
.usecase-tile[data-usecase="organizational-pulse"] { background: linear-gradient(135deg, #4fa8a0, #2c6a63); }
.usecase-tile[data-usecase="departing-expertise"] { background: linear-gradient(135deg, #8269c9, #5a4494); }

.usecase-tile.ghost, .industry-tile.ghost {
  background: transparent;
  border: 1px dashed var(--line);
  min-height: 190px;
  box-sizing: border-box;
}

/* industry tiles :  custom vector illustration standing in for photography;
   swap background to a real photo later by replacing the gradient with
   background-image on the class below */
.industry-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  min-height: 190px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  padding: 22px;
}
.industry-tile h3 {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 1.08rem;
  margin: 0;
}
.industry-icon {
  position: absolute;
  top: 50%;
  right: -6px;
  width: 92px;
  height: 92px;
  transform: translateY(-56%);
  opacity: .3;
}
/* Each tile is a photo with the brand colour laid over it. The photo sits in
   ::before so the gradient can ride on top at partial opacity: drop a file at
   the path below and it appears behind the colour with no other change.
   Until a file exists the ::before simply paints nothing and the tile looks
   exactly as it did before. */
.industry-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.industry-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* the colour layer: opaque enough to hold white type, sheer enough to read
     the photograph underneath */
  opacity: .82;
  background: inherit;
}
.industry-tile .industry-icon { z-index: 2; }

.industry-tile.pharma { background: linear-gradient(135deg, #e3a34d, #9c6a1e); }
.industry-tile.pharma::before { background-image: url("assets/industries/pharma.jpg"); }

.industry-tile.retail { background: linear-gradient(135deg, #4fa8a0, #2c6a63); }
.industry-tile.retail::before { background-image: url("assets/industries/retail.jpg"); }

.industry-tile.logistics { background: linear-gradient(135deg, #c07a4a, #874f26); }
.industry-tile.logistics::before { background-image: url("assets/industries/logistics.jpg"); }

.industry-tile.consumer-goods { background: linear-gradient(135deg, #8269c9, #5a4494); }
.industry-tile.consumer-goods::before { background-image: url("assets/industries/consumer-goods.jpg"); }

.industry-tile.insurance { background: linear-gradient(135deg, #5c7889, #37505c); }
.industry-tile.insurance::before { background-image: url("assets/industries/insurance.jpg"); }

.industry-tile.aviation { background: linear-gradient(135deg, #4a86c4, #2a5687); }
.industry-tile.aviation::before { background-image: url("assets/industries/aviation.jpg"); }

.industry-tile.hospitality { background: linear-gradient(135deg, #c0687e, #8a3d50); }
.industry-tile.hospitality::before { background-image: url("assets/industries/hospitality.jpg"); }

.industry-tile.financial-services { background: linear-gradient(135deg, #4e8f70, #2b5a45); }
.industry-tile.financial-services::before { background-image: url("assets/industries/financial-services.jpg"); }

/* No photograph for these four yet :  the ::before simply paints nothing and
   the gradient carries the tile on its own, exactly as the others did before
   their images arrived. Add a file at the path and it appears. */
.industry-tile.food-beverage { background: linear-gradient(135deg, #8a9a4e, #56642c); }
.industry-tile.food-beverage::before { background-image: url("assets/industries/food-beverage.jpg"); }

.industry-tile.automotive { background: linear-gradient(135deg, #b0524e, #7a2f2c); }
.industry-tile.automotive::before { background-image: url("assets/industries/automotive.jpg"); }

.industry-tile.energy { background: linear-gradient(135deg, #3f8f9e, #23606b); }
.industry-tile.energy::before { background-image: url("assets/industries/energy.jpg"); }

/* Takes the last cell of the grid rather than a row of its own, so the eleven
   industries and the "and many more" read as one set of twelve: the tiles are
   examples, and this is what closes the list. Matches the tiles' shape and
   keeps the dashed edge the placeholder tiles used to carry. */
.industry-more {
  margin: 0;
  display: flex;
  align-items: flex-end;
  min-height: 190px;
  padding: 22px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 1.08rem;
  font-family: var(--font-display);
}

@media (max-width: 800px) {
  .grid3x3 { grid-template-columns: repeat(2, 1fr); }
  /* The empty tiles exist to scatter the filled ones across the 3x3 desktop
     mosaic. Below three columns that pattern is meaningless and they become
     ~760px of blank boxes between the real content, so drop them. */
  .usecase-tile.ghost, .industry-tile.ghost { display: none; }
}
@media (max-width: 560px) {
  .grid3x3 { grid-template-columns: 1fr; }
  .usecase-tile.span-2 { grid-column: span 1; }

  /* Industry tiles stay two-up here. Each is a photo and a single word, so it
     still reads at half width, whereas twelve of them stacked single-file
     would add well over a thousand pixels of scrolling to the phone layout.
     Use-case tiles carry a paragraph each, so they keep the full width. */
  #panel-industries { grid-template-columns: repeat(2, 1fr); }
  #panel-industries .industry-tile,
  #panel-industries .industry-more { min-height: 140px; padding: 16px; }
  #panel-industries .industry-tile h3,
  #panel-industries .industry-more { font-size: .95rem; }
  #panel-industries .industry-icon { width: 64px; height: 64px; right: -10px; }
}

/* ---------------------------------------------
   CTA
--------------------------------------------- */
.cta {
  min-height: calc(100vh - 68px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0;
  scroll-margin-top: 68px;
}
.cta-inner { text-align: center; max-width: 720px; margin: 0 auto; }
.cta h2 {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.12;
  color: var(--text);
  margin: 0 0 1.1em;
}
@media (max-width: 640px) {
  .cta h2 br { display: none; }
}

/* ---------------------------------------------
   Footer
--------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); padding: 28px 0; }
.footer-row { display: flex; align-items: center; justify-content: space-between; }
.logo-sm { font-size: 1.1rem; }
.footer-meta { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); }
.footer-meta a { text-decoration: underline; text-underline-offset: 2px; }
.footer-meta a:hover { color: var(--text); }

/* ---------------------------------------------
   Legal pages (privacy, etc.)
--------------------------------------------- */
.legal { padding: 60px 0 100px; }
.legal-wrap { max-width: 700px; }
.legal h1 { font-size: clamp(2rem, 4vw, 2.6rem); color: var(--text); }
.legal-updated {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: 2em;
}
.legal h2 { font-size: 1.15rem; color: var(--text); margin-top: 1.8em; }
.legal p, .legal li { font-size: .95rem; }
.legal-list { padding-left: 1.3em; margin: 0 0 1em; }
.legal-list li { list-style: disc; margin-bottom: .6em; }
.legal a { color: var(--amber-text); text-decoration: underline; text-underline-offset: 2px; }

/* Clear summaries and participant information, shared across page types. */
.example-label { font-family:var(--font-mono); font-size:.72rem; line-height:1.6; color:var(--muted); margin-bottom:14px; }
.scroller-label { width:90%; margin-inline:auto; text-align:right; }
.listening-section { padding:80px 0; scroll-margin-top:84px; }
.trust-section { background:rgba(27,37,64,.55); border-block:1px solid var(--line); }
.benefit-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin:30px 0; }
.benefit-grid article { padding:24px; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.benefit-grid h3 { font-size:1.35rem; margin-bottom:12px; }
.benefit-grid p { font-size:1rem; line-height:1.65; margin:0; }
.ai-act-note { max-width:none; margin:26px 0 0; padding-top:22px; border-top:1px solid var(--line); font-size:.95rem; line-height:1.7; color:var(--muted); }
.ai-act-note strong { color:var(--text); }
.report-preview { background:#ffffff; border:1px solid var(--line); border-radius:16px; padding:28px; }
.report-preview h3 { font-size:1.4rem; margin:0 0 12px; }
.report-preview .report-finding { color:var(--text); font-size:1.1rem; line-height:1.5; margin:0 0 20px; }
.report-preview dl { margin:0; }
.report-preview dl > div { border-top:1px solid var(--line); padding:16px 0; }
.report-preview dt { font-weight:600; font-size:.85rem; margin-bottom:6px; }
.report-preview dd { margin:0; color:var(--muted); font-size:1rem; line-height:1.6; }
.report-link { display:inline-flex; align-items:center; min-height:44px; margin-top:12px; color:var(--text); text-decoration:underline; text-underline-offset:4px; font-size:.95rem; }
.faq-section { padding-block:58px; }
.faq-section .section-sub { margin-bottom:18px; }
.faq-section details { border-bottom:1px solid var(--line); padding:10px 0; }
.faq-section summary { cursor:pointer; font-size:1.05rem; padding:7px 0; }
.faq-section details p { max-width:none; padding:11px 0 3px; }
#panel-usecases { grid-template-columns:repeat(3,minmax(0,1fr)); }
.usecase-tile[data-usecase='continuous-monitoring'] { background:linear-gradient(130deg,#45666d,#28424b); display:flex; flex-direction:column; justify-content:flex-end; position:relative; }
.usecase-tile h3 { font-size:1.25rem; }
.usecase-tile p { font-size:.98rem; }
.uc-shot > .report-preview { display:none; }
.uc-shot-open { display:inline-flex; align-items:center; min-height:44px; margin-top:12px; text-decoration:underline; }
.uc-switch-mobile { display:none; }
.uc-switch a, .step-pill, .usecases-tab, .btn, .uc-btn { min-height:44px; }
.uc-switch a { display:inline-flex; align-items:center; }
.participation-note { font-size:.9rem; color:var(--muted); margin-top:20px; line-height:1.6; max-width:65ch; }
.exit-example { margin-top:24px; max-width:760px; }
.invitation-example { padding:28px; margin-top:24px; border-left:3px solid var(--amber); background:var(--panel); max-width:760px; }
.invitation-example blockquote { font-size:1.1rem; line-height:1.7; }
:focus-visible { outline:3px solid var(--amber-text); outline-offset:4px; }
@media(max-width:1000px) {
  .benefit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #panel-usecases { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .step-shot-mobile { margin-top:20px; }
  .step-block .report-preview p { max-width:none; }
  .how .section-sub { margin-bottom:20px; }
}
@media(max-width:760px) {
  .uc-shot > .report-preview { display:block; }
  .uc-shot .uc-shot-live, .uc-shot .uc-shot-open, .desktop-example-label { display:none; }
  .uc-switch { display:none; }
  .uc-switch-mobile { display:block; margin-bottom:24px; border-bottom:1px solid var(--line); }
  .uc-switch-mobile summary { cursor:pointer; min-height:48px; padding:12px 0; }
  .uc-switch-links { display:flex; flex-direction:column; padding-bottom:12px; }
  .uc-switch-links a { padding:12px 8px; font-size:1rem; }
  .uc-switch-links a[aria-current] { font-weight:600; }
  .uc-hero { padding-top:28px; }
  .listening-section { padding:48px 0; }
  .benefit-grid { grid-template-columns:minmax(0,1fr); gap:14px; }
  .benefit-grid article { padding:22px; }
  .report-preview { padding:22px; }
  .step-block .report-preview h3 { font-size:1.4rem; }
  .step-block .report-preview .example-label { font-size:.72rem; }
  #panel-usecases { grid-template-columns:minmax(0,1fr); }
  .hero { padding-top:40px; }
  .hero h1 { font-size:clamp(2rem,8vw,3rem); }
  .hero-sub { font-size:1rem; }
  .hero-actions { flex-wrap:wrap; gap:12px; }
  .hero-actions .btn-primary { width:100%; justify-content:center; }
  .hero-visual { margin-top:32px; }
  .section-sub { margin-bottom:28px; }
  .step-jump { position:static; }
  .nav-toggle { width:48px; height:48px; }
}

@media(max-width:1000px) {
 .uc-shot > .report-preview { display:block; }
 .uc-shot .uc-shot-live, .uc-shot .uc-shot-open, .desktop-example-label { display:none; }
}

/* One shared page edge for header, sections, previews and footer. */
:scope { --page-width:max(1440px, min(1920px, 82vw)); --page-gutter:24px; }
.wrap, .wrap-wide, .how .wrap-wide, .cta-inner {
  width:100%; max-width:var(--page-width); margin-inline:auto;
  padding-inline:var(--page-gutter);
}
.hero-copy { max-width:none; width:100%; }

/* Shared navigation and a compact section rhythm. */
.header-row { gap:28px; }
.header-row .nav { margin-left:auto; gap:24px; }
.hero,.usecases,.cta { min-height:0; }
.fragment { min-height:160px; }
.hero-visual { margin-top:40px; }
.problem,.how,.listening-section,.usecases,.cta { padding-block:72px; }
/* A 14-inch Windows laptop at the scaling Windows recommends gives the page
   1280x640. At that height the hero ran 147px past the fold and the three
   overheard quotes - the reason to keep scrolling - were almost entirely
   below it. This trims the hero's vertical spacing on short screens only;
   nothing changes above 720px of viewport height. */
/* On a normal laptop screen the hero was content plus 40px, which left it
   bunched at the top with dead space under the quotes. Give it the whole
   first screen and let the existing centring space it out. Short screens
   keep the compact treatment in the block below. */
@media(min-width:851px) and (min-height:721px) {
  .hero { min-height:calc(100vh - 68px); padding-block:56px; }
  .hero-sub { margin-top:2.2em; }
  .hero-actions { margin-top:3.2em; }
  .hero-visual { margin-top:clamp(60px,8vh,120px); }
  .waveform-strip { margin-bottom:42px; }
  .signal-label { margin-bottom:20px; }
}
@media(min-width:851px) and (max-height:720px) {
  .hero { padding-block:20px; }
  .hero h1 { font-size:clamp(2.4rem,4.2vw,3.6rem); }
  .hero-sub { margin-top:1.1em; font-size:1.06rem; }
  .hero-actions { margin-top:1.5em; }
  .hero-visual { margin-top:22px; }
  .waveform-strip { height:32px; margin-bottom:18px; }
  .signal-label { margin-bottom:10px; }
  .fragment { min-height:0; }
}
@media(max-width:1000px) { .header-row .nav,.header-row .nav-cta { display:none; } .nav-toggle { display:flex; margin-left:auto; } }
@media(max-width:700px) { .problem,.how,.listening-section,.usecases,.cta { padding-block:48px; } .fragment { min-height:0; } }
/* Let section introductions use the same width as their content. */
.listening-section .section-head-lg { max-width:none; }
.listening-section .section-sub { margin-bottom:32px; }
/* Equal outer columns keep navigation centered independently of logo/CTA width. */
@media(min-width:1001px) {
  .header-row { display:grid; grid-template-columns:1fr auto 1fr; gap:24px; }
  .header-row > .logo { justify-self:start; }
  .header-row .nav { margin-left:0; justify-self:center; }
  .header-row .nav-cta { justify-self:end; }
}
/* Consistent reading order and text rhythm across use-case cards. */
#panel-usecases .usecase-tile[data-usecase] { justify-content:flex-start; padding:28px; }
#panel-usecases .usecase-tile h3 { min-height:2.5em; line-height:1.25; }
#panel-usecases .tile-more { margin-top:auto; padding-top:18px; }
#panel-usecases .usecase-tile[data-usecase="departing-expertise"] { padding-bottom:70px; }
#panel-usecases .tile-soon { top:auto; bottom:24px; }
@media(max-width:700px) { #panel-usecases .usecase-tile h3 { min-height:0; } }
/* Employee experience: a conversation example paired with practical benefits. */
/* The phone is a fixed 654px (8px bezel + 636px screen + 1px border, twice over):
   a smaller 340px-wide frame at the same ~1.92 taller-than-square ratio as
   before, scaled down so it doesn't dwarf the six headline cards beside it.
   Above the single-column breakpoint those cards are pinned to this height,
   so the column starts at the top of the phone and ends at its bottom. */
.experience-layout { --phone-h:654px; display:grid; grid-template-columns:minmax(0,410px) minmax(0,1fr); gap:clamp(28px,4vw,72px); align-items:start; }
@media(min-width:851px) { .experience-benefits { height:var(--phone-h); } }
.conversation-demo { margin:0; padding:32px; border-radius:20px; background:linear-gradient(145deg,#254b49,#153432); color:#fff; box-shadow:0 18px 40px -28px #15343280; }
.conversation-demo figcaption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font: .72rem/1.5 var(--font-mono); color:#c4d9d0; margin-bottom:30px; }
.conversation-example { color:#e7c686; }
.conversation-bubble { padding:18px 22px; border-radius:14px; max-width:90%; margin-bottom:18px; }
.conversation-bubble > span { display:block; font:.67rem/1.5 var(--font-mono); letter-spacing:.04em; color:#b9d1c7; margin-bottom:8px; }
.conversation-bubble p { color:inherit; font-size:1.05rem; line-height:1.55; margin:0; }
.agent-bubble { background:#ffffff0d; border:1px solid #ffffff20; border-bottom-left-radius:3px; }
.employee-bubble { margin-left:auto; background:#f2ebdd; color:#263d36; border-bottom-right-radius:3px; }
.employee-bubble > span { color:#52665b; }
.conversation-wave { display:flex; justify-content:center; align-items:center; gap:5px; height:48px; margin-top:22px; }
.conversation-wave i { display:block; width:4px; height:var(--bar); background:#d9b36d; border-radius:4px; }
.conversation-demo .conversation-caption { color:#c4d9d0; text-align:center; font-size:.78rem; margin:10px 0 0; }
.experience-benefits { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); gap:16px; }
.experience-benefits article { position:relative; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; padding:22px; border:1px solid rgba(41,78,73,.15); border-radius:18px; background:linear-gradient(145deg,rgba(255,253,249,.96),rgba(235,240,234,.86)); box-shadow:0 14px 32px -28px rgba(21,52,50,.5); }
.experience-benefits article:first-child,.experience-benefits article:last-child { padding-block:16px; }
.experience-number { font:.72rem/1.5 var(--font-mono); letter-spacing:.1em; color:#967025; }
.experience-benefits h3 { position:relative; font-size:clamp(1.15rem,1.45vw,1.38rem); line-height:1.25; margin:0; max-width:none; }
.benefit-icon { position:absolute; top:14px; right:17px; font:500 2.6rem/1 var(--font-mono); color:rgba(41,78,73,.12); }
.experience-benefits p { font-size:1rem; line-height:1.65; margin:0; }
.experience-trust { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,72px); border-top:1px solid var(--line); margin-top:34px; padding-top:26px; }
.experience-trust h3 { font-size:1.1rem; }
.experience-trust p { font-size:.92rem; margin:0; }
.speech-evidence { margin-top:22px; color:var(--muted); font-size:.78rem; }
.speech-evidence summary { cursor:pointer; padding:10px 0; min-height:44px; }
.speech-evidence p { width:100%; max-width:none; line-height:1.6; }
.speech-evidence a { text-decoration:underline; text-underline-offset:3px; }
@media(max-width:850px) { .experience-layout { grid-template-columns:minmax(0,1fr); } .experience-benefits { grid-template-rows:none; } .experience-benefits article { min-height:150px; padding-block:20px; } }
@media(min-width:851px) and (max-width:1100px) { .experience-benefits { grid-template-columns:1fr; grid-template-rows:repeat(6,minmax(0,1fr)); } }
@media(max-width:600px) { .experience-benefits { grid-template-columns:1fr; } }
@media(max-width:600px) { .conversation-demo { padding:22px 18px; } .conversation-bubble { padding:16px; max-width:96%; } .conversation-bubble p { font-size:1rem; } .conversation-wave { gap:4px; } .conversation-wave i { width:3px; } .experience-trust { grid-template-columns:1fr; gap:24px; } }
.feature-status { display:inline-block; vertical-align:middle; margin-left:10px; padding:4px 8px; border:1px solid #ffffff70; border-radius:20px; color:#fff; font: .6rem/1.4 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }

.listening-preview { margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:transparent; padding:0; overflow:visible; }
.listening-phone { position:relative; width:min(100%,340px); background:#090b0a; border:1px solid #2b302e; border-radius:48px; padding:8px; box-shadow:0 26px 50px -28px #12292799,0 1px 0 #4a504e inset; }
.listening-app { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; padding:28px 24px 24px; border-radius:40px; background:#f8f8f8; min-height:636px; overflow:hidden; }
.listening-earpiece { position:absolute; top:15px; left:50%; width:52px; height:5px; border-radius:999px; background:#171919; transform:translateX(-50%); }
.listening-logo { font-size:1.7rem; font-weight:600; gap:8px; }
.listening-orb-ring { width:174px; height:174px; padding:12px; border:1px solid #ece7dc; border-radius:50%; margin:28px 0 20px; box-shadow:0 16px 24px -14px #294e4933; }
.listening-orb { width:100%; height:100%; border-radius:50%; background:radial-gradient(circle at 30% 27%,#ffe5ad 0%,#e6ac51 26%,#be9a53 44%,#647958 66%,#244b48 88%); box-shadow:inset 0 0 2px #ffffff80; }
.listening-app h3 { font:400 2.35rem/1.2 var(--font-display); margin:0 0 10px; }
.listening-reassurance { font-size:1rem; margin:0; }
.listening-audio { display:flex; align-items:center; justify-content:center; gap:5px; height:38px; margin:18px 0; }
.listening-audio i { height:var(--bar); width:3px; background:#bd954b; border-radius:3px; }
.listening-prompt { max-width:420px; margin-top:auto; padding-top:14px; border-top:1px solid var(--line); width:100%; }
.listening-prompt span { font:.65rem/1.5 var(--font-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.listening-prompt p { color:var(--text); margin:8px 0 0; font-size:1.05rem; }
.listening-controls { display:flex; gap:16px; margin-top:22px; }
.listening-controls span { width:44px; height:44px; border:1px solid #ddd7ca; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#365951; }
.listening-controls .listening-end { background:#f4e8e3; color:#995c47; border-color:#ead3c9; }
.listening-controls svg { width:21px; height:21px; }
.step-copy-mobile { display: none; }
.hero-copy-mobile,
.problem-copy-mobile,
.benefit-copy-mobile { display: none; }

/* Mobile editorial mode: preserve the approved desktop page while restoring
   the shorter phone reading path from the mobile redesign. */
@media (max-width: 760px) {
  .hero { padding-block: 36px 30px; }
  .hero h1 { font-size: clamp(2.15rem, 9.5vw, 2.75rem); line-height: 1.12; }
  .hero-sub { font-size: 1rem; line-height: 1.55; margin-top: 1.2em; }
  .hero-actions { margin-top: 1.5em; }
  .hero-actions .btn-text { display: none; }
  .hero-visual { margin-top: 28px; }
  .signal-row { display: none; }
  .signal-label { margin-bottom: 8px; font-size: .64rem; }
  .waveform-strip { height: 44px; margin-bottom: 0; }
  .hero-copy-desktop,
  .problem-copy-desktop,
  .benefit-copy-desktop { display: none; }
  .hero-copy-mobile,
  .problem-copy-mobile,
  .benefit-copy-mobile { display: inline; }

  .problem .split-col:not(.split-solution) .split-lede { display: none; }
  .problem .split-solution .split-lede { font-size: .92rem; margin-bottom: 10px; }
  .problem .section-sub { margin-bottom: 24px; }
  .problem .split-label { margin-bottom: 6px; }
  .problem .split-col:not(.split-solution) > .split-point:nth-of-type(1) { padding-top: 14px; }
  .problem .split-point { min-height: 46px; padding-bottom: 8px; }
  .problem .split-arrow { height: 44px; }

  .how .step-jump { display: none; }
  .how .scroller { gap: 0; margin-top: 8px; }
  .how .step-block,
  .how .step-block:not(.is-on),
  .how .step-block.is-on {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 14px;
    min-height: 0;
    padding: 18px 0;
    border-top: 1px solid var(--line);
    opacity: 1;
  }
  .how .step-count {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: block;
    margin: 0;
    padding: 2px 0 0;
    border: 0;
  }
  .how .step-count .step-current { font-size: 1.55rem; }
  .how .step-count .step-total { display: none; }
  .how .step-block h3 {
    grid-column: 2;
    margin: 0 0 5px;
    font-size: 1.3rem;
  }
  .how .step-block > p {
    display: none;
  }
  .step-copy-desktop { display: none; }
  .step-copy-mobile { display: inline; }
  /* Keep the full examples reachable in the compact phone walkthrough. */
  .how .step-shot-mobile { display: block; grid-column: 2; margin-top: 8px; }
  .how .step-shot-mobile .report-preview { padding: 0; border: 0; background: transparent; }
  .how .step-shot-mobile .report-preview > :not(.report-link) { display: none; }
  .how .step-shot-mobile .report-link { margin-top: 0; font-size: .9rem; }

  .listening-section:not(.trust-section):not(.faq-section) .listening-preview { display: none; }
  .experience-layout { display: block; }
  .experience-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
  }
  .experience-benefits article,
  .experience-benefits article:first-child,
  .experience-benefits article:last-child {
    min-height: 0;
    padding: 14px 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .experience-benefits h3 { font-size: .9rem; line-height: 1.3; max-width: none; }
  .benefit-icon { display: none; }

  .usecases-tabs { display: none; }
  #panel-industries { display: none !important; }
  .usecases .section-head-lg { margin-bottom: 12px; }
  .usecases .section-sub { margin-bottom: 24px; }
  #panel-usecases {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line);
  }
  #panel-usecases .usecase-tile[data-usecase],
  #panel-usecases .usecase-tile[data-usecase="departing-expertise"],
  #panel-usecases .usecase-tile[data-usecase="continuous-monitoring"] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 15px 34px 15px 44px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent !important;
    color: var(--text);
    box-shadow: none;
  }
  #panel-usecases .usecase-tile::before {
    position: absolute;
    top: 19px;
    left: 0;
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .08em;
    color: var(--amber-text);
  }
  #panel-usecases .usecase-tile:nth-child(1)::before { content: "01"; }
  #panel-usecases .usecase-tile:nth-child(2)::before { content: "02"; }
  #panel-usecases .usecase-tile:nth-child(3)::before { content: "03"; }
  #panel-usecases .usecase-tile:nth-child(4)::before { content: "04"; }
  #panel-usecases .usecase-tile:nth-child(5)::before { content: "05"; }
  #panel-usecases .industry-icon { display: none; }
  #panel-usecases .usecase-tile h3 {
    order: 1;
    min-height: 0;
    margin: 0;
    color: var(--text);
    font-size: 1.06rem;
    line-height: 1.3;
  }
  #panel-usecases .usecase-tile p {
    display: none;
  }
  #panel-usecases .tile-more { display: none; }
  #panel-usecases .usecase-tile.has-page::after {
    right: 2px;
    bottom: auto;
    top: 50%;
    color: var(--muted);
    transform: translateY(-50%);
  }
  #panel-usecases .tile-soon {
    position: static;
    display: inline-block;
    margin-top: 7px;
    padding: 0;
    border: 0;
    color: var(--muted);
    font-size: .58rem;
    order: 3;
  }
  
  .trust-section .benefit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
    margin-block: 18px;
  }
  .benefit-grid article {
    padding: 14px 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
  }
  .benefit-grid h3 { margin: 0; font-size: 1.05rem; }
  .trust-section .benefit-grid p { display: none; }
  .faq-section .section-sub { display: none; }
  .faq-section .section-head-lg { margin-bottom: 20px; }
  .faq-section details:nth-of-type(4),
  .faq-section details:nth-of-type(5) { display: none; }
  .cta { min-height: 0; padding-block: 52px; }
}
.listening-preview figcaption { padding:14px 10px 0; font:.65rem/1.5 var(--font-mono); text-align:center; color:var(--muted); }
@media(max-width:600px) { .listening-phone { border-radius:40px; padding:6px; } .listening-app { padding:26px 16px 22px; min-height:640px; border-radius:34px; } .listening-orb-ring { width:145px; height:145px; margin-top:20px; } }

/* Language switcher, top right next to the header CTA. A <details> dropdown,
   so it works without JS; main.js only closes it on outside click / Escape. */
.header-end { display:flex; align-items:center; gap:14px; justify-self:end; }
.lang-switch { position:relative; }
.lang-switch summary {
  list-style:none; display:inline-flex; align-items:center; gap:6px;
  padding:8px 10px; border-radius:999px; cursor:pointer;
  font:500 .85rem/1 var(--font-body); color:var(--muted);
}
.lang-switch summary::-webkit-details-marker { display:none; }
.lang-switch summary:hover, .lang-switch[open] summary { color:var(--text); background:var(--panel); }
.lang-globe { width:16px; height:16px; }
.lang-chev { width:12px; height:12px; transition:transform .2s; }
.lang-switch[open] .lang-chev { transform:rotate(180deg); }
.lang-menu {
  position:absolute; right:0; top:calc(100% + 8px); z-index:60;
  min-width:190px; margin:0; padding:6px; list-style:none;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 14px 34px -14px rgba(21,22,29,.28);
}
.lang-menu li + li { border-top:1px solid var(--line); }
.lang-menu a {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 12px; border-radius:6px;
  font:400 .95rem/1.2 var(--font-body); color:var(--text); text-decoration:none;
}
.lang-menu a:hover { background:var(--panel); }
.lang-check { color:var(--amber-text); }
@media(max-width:1000px) {
  .header-end { position:relative; margin-left:auto; gap:4px; }
  .lang-switch { position:static; }
  .nav-toggle { margin-left:6px; }
}
/* Header with 5 menu items: keep the CTA on one line and tighten the menu
   between the 1000px breakpoint and wide screens. */
.nav-cta { white-space: nowrap; }
@media (min-width:1001px) and (max-width:1240px) { .header-row .nav { gap:16px; } .header-row .nav a { font-size:.85rem; } .header-end { gap:6px; } }
/* "A real conversation" section: subtitle on one line, benefit tiles exactly
   as tall as the phone (the phone sets the row height, the tiles stretch). */
#participation .section-sub { max-width: none; }
.listening-preview figcaption { display: none; }
@media(min-width:851px) {
  .experience-layout { align-items: stretch; }
  .experience-benefits { height: auto; }
  .listening-preview { justify-content: flex-start; }
}

/* Problem split: 4 subgrid rows (label, lede, 2 points). */
.problem-split { grid-template-rows: auto auto auto auto; }
.split-col { grid-row: 1 / span 4; }
.split-lede p { margin: 0; }
.split-point > div h3 { margin: 0 0 3px; }
.split-point > div p { margin: 0; font-size: .98rem; line-height: 1.45; color: var(--muted); }
.split-point { align-items: flex-start; padding-top: 14px; }
.split-point .status-mark { margin-top: 2px; }
.split-col > .split-point:nth-of-type(1) { padding-top: 22px; }
@media (max-width: 860px) { .split-col { grid-row: auto; } }


/* Conversation section: button top right swaps the tiles for the survey comparison. */
.exp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.exp-head > div { min-width: 0; }
.cv-toggle { flex: none; margin-bottom: 32px; max-width: 100%; white-space: normal; }
.compare-view { animation: cvIn .45s ease; }
@keyframes cvIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cv-kick { font: 500 .75rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.cv-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 56px; }
.cv-card { border-radius: 18px; padding: 26px 28px; border: 1px solid var(--line); }
.cv-survey { background: var(--panel); }
.cv-conv { background: #fff; box-shadow: 0 18px 40px -30px rgba(21,22,29,.35); }
.cv-tag { font: 500 .72rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
.cv-conv .cv-tag { color: #2f665c; }
.cv-q { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.25; margin: 0 0 18px; color: var(--text); }
.cv-scale { display: flex; gap: 10px; margin-bottom: 22px; }
.cv-dot { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font: 500 .9rem var(--font-mono); color: var(--muted); background: var(--panel); }
.cv-dot.is-on { background: var(--text); color: #fff; border-color: var(--text); }
.cv-lines { display: grid; gap: 8px; margin-bottom: 18px; }
.cv-line { margin: 0; padding: 10px 14px; border-radius: 14px; font-size: .98rem; line-height: 1.45; max-width: 88%; }
.cv-o { background: #e3efea; color: #1f4f47; justify-self: start; }
.cv-p { background: var(--panel); color: var(--text); justify-self: end; }
.cv-res { font-weight: 600; color: var(--text); margin: 0 0 4px; }
.cv-survey .cv-res { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; }
.cv-note { color: var(--muted); margin: 0; }
.cv-table { display: grid; }
.cv-row { display: grid; grid-template-columns: minmax(140px, 220px) 1fr 1.1fr; border-bottom: 1px solid var(--line); }
.cv-row > span { padding: 14px 20px; }
.cv-l { padding-left: 0 !important; font: 500 .75rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); align-self: center; }
.cv-s { color: var(--muted); }
.cv-c { color: var(--text); font-weight: 500; background: #fff; }
.cv-head > span { font: 500 .72rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cv-head .cv-c { color: #2f665c; border-radius: 12px 12px 0 0; }
.cv-row:last-child .cv-c { border-radius: 0 0 12px 12px; }
@media (max-width: 860px) {
  .cv-pair { grid-template-columns: 1fr; }
  .cv-row { grid-template-columns: 1fr; padding: 12px 0; }
  .cv-row > span { padding: 2px 0; background: none; }
  .cv-head { display: none; }
}
@media (prefers-reduced-motion: reduce) { .compare-view { animation: none; } }
#participation [hidden] { display: none !important; }
/* The arrow sits level with the two column heads, reading problem to solution. */
.split-arrow { align-items: flex-start; padding-top: 2px; }
#problem .section-sub { max-width: none; }

/* Phones: new sections keep the headlines, drop the supporting sentences. */
@media (max-width: 700px) {
  .split-point > div p, .split-lede { display: none; }
  .split-point { min-height: 0; padding-top: 10px; padding-bottom: 10px; }
  #compare-view .cv-table, #compare-view .cv-kick:nth-of-type(2), .cv-note { display: none; }
  .cv-card { padding: 20px; }
  .cv-pair { margin-bottom: 0; }
}
/* "Use cases" dropdown in the header: two columns (use cases, compare),
   a <details> like the language switcher, so it works without JS. */
.nav { align-items:center; }
.nav-drop { position:relative; }
.nav-drop summary {
  list-style:none; display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  color:var(--muted); font-size:.92rem; transition:color .15s ease;
}
.nav-drop summary::-webkit-details-marker { display:none; }
.nav-drop summary:hover, .nav-drop[open] summary, .nav-drop.is-on summary { color:var(--text); }
.nav-drop.is-on summary { font-weight:500; }
.nav-drop-chev { width:12px; height:12px; transition:transform .2s; }
.nav-drop[open] .nav-drop-chev { transform:rotate(180deg); }
.nav-drop-panel {
  position:absolute; left:50%; top:calc(100% + 24px); z-index:60; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:2px; width:340px; padding:10px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 18px 40px -16px rgba(21,22,29,.3);
}
.nav-drop-sm .nav-drop-panel { width:max-content; min-width:240px; }
.header-row .nav .nav-drop-panel a {
  display:flex; flex-direction:column; gap:5px; padding:11px 12px; border-radius:6px;
  font-size:.95rem; color:var(--text); text-decoration:none;
}
.nav .nav-drop-panel a strong { font-weight:500; line-height:1.25; }
.nav .nav-drop-panel a span { font-size:.84rem; color:var(--muted); line-height:1.35; }
.nav .nav-drop-panel a:hover, .nav .nav-drop-panel a[aria-current="page"] { background:var(--panel); }
.header-row .nav .nav-drop-panel a.nav-drop-all {
  margin-top:6px; padding-top:13px; border-top:1px solid var(--line); border-radius:0 0 6px 6px;
  font-size:.88rem; font-weight:500; color:var(--amber-text);
}
.nav-drop summary:focus-visible, .nav .nav-drop-panel a:focus-visible, .mobile-nav a:focus-visible {
  outline:2px solid var(--amber); outline-offset:2px; border-radius:6px;
}
.mobile-nav a.mobile-sub { padding:10px 2px 10px 18px; font-size:.92rem; color:var(--muted); }
.mobile-nav a.mobile-sub[aria-current="page"] { color:var(--text); font-weight:500; }
/* Line under the closing headline saying what the demo is. */
.cta h2:has(+ .cta-sub) { margin-bottom:.5em; }
.cta-sub { max-width:34em; margin:0 auto 2em; font-size:1.12rem; line-height:1.5; color:var(--muted); }
/* Header "Book a demo": dark pill with the founder's face, so booking a
   demo reads as talking to a person. */
.btn.nav-cta {
  padding:4px 16px 4px 4px; gap:10px;
  background:var(--amber); border-color:var(--amber); color:#1a1305;
}
.btn.nav-cta:hover { background:#edb15b; border-color:#edb15b; }
.nav-cta-face { width:30px; height:30px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.cta-person {
  display:inline-flex; align-items:center; gap:12px; margin:0 0 1.6em;
  font:400 .82rem/1 var(--font-mono); color:var(--muted);
}
.cta-person img { width:44px; height:44px; border-radius:8px; object-fit:cover; }
/* Founder section: photo left, first-person story right. */
.founder-section { padding-block:72px; }
.founder-layout { display:grid; grid-template-columns:minmax(180px,240px) 1fr; gap:48px; align-items:center; }
.founder-photo { width:100%; height:auto; border-radius:var(--radius); }
.founder-copy > p:not(.eyebrow) { font-size:1.06rem; line-height:1.6; color:var(--muted); max-width:58ch; margin:0 0 1em; }
.founder-facts { display:flex; flex-wrap:wrap; gap:8px; margin:28px 0 0; padding:0; list-style:none; }
.founder-facts li { padding:7px 12px; border:1px solid var(--line); border-radius:999px; font:400 .78rem/1 var(--font-mono); color:var(--text); }
@media(max-width:760px) {
  .founder-layout { grid-template-columns:1fr; gap:28px; }
  .founder-photo { max-width:220px; }
}
.founder-copy .section-head-lg { max-width:none; margin-bottom:.7em; }
/* About page */
.about-hero { padding-block:72px 8px; }
.about-hero h1 { font-size:clamp(2.2rem,4.4vw,3.2rem); line-height:1.1; margin:0 0 .5em; }
.about-hero .section-sub { margin-bottom:0; max-width:none; }
.about-page .founder-section { padding-block:56px 96px; }
/* Solutions menu: Use cases and Why OREY side by side. */
.nav-drop-panel.nav-drop-cols { display:grid; grid-template-columns:1fr 1fr; width:min(720px, calc(100vw - 48px)); padding:10px; gap:0; }
.nav-drop-cols .nav-drop-col { display:flex; flex-direction:column; gap:2px; padding:8px 6px; }
.nav-drop-cols .nav-drop-col + .nav-drop-col { border-left:1px solid var(--line); padding-left:12px; }
.nav-drop-head {
  margin:4px 0 6px; padding:0 12px;
  font:500 .7rem/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
/* About: label and name on the left edge, then photo beside the text.
   The photo is exactly as tall as the two paragraphs. */
.founder-block .section-head-lg { max-width:none; margin-bottom:.9em; }
.founder-row { display:grid; grid-template-columns:240px 1fr; gap:48px; align-items:stretch; }
.founder-photo-frame { position:relative; }
.founder-photo-frame .founder-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; border-radius:var(--radius); }
.founder-body p { font-size:1.06rem; line-height:1.6; color:var(--muted); max-width:62ch; margin:0 0 1em; }
.founder-body p:last-child { margin-bottom:0; }
@media(max-width:760px) {
  .founder-row { grid-template-columns:1fr; gap:24px; }
  .founder-photo-frame .founder-photo { position:static; width:200px; height:auto; }
}
/* Phones and tablets: keep "Book a demo" in the header, compact. */
@media(max-width:1000px) { .header-row a.nav-cta { display:inline-flex; } }
@media(max-width:720px) {
  .btn.nav-cta { padding:3px 12px 3px 3px; gap:7px; font-size:.8rem; }
  .nav-cta-face { width:26px; height:26px; }
  .header-end { gap:2px; }
}
@media(max-width:420px) {
  .nav-cta-face { display:none; }
  .btn.nav-cta { padding:8px 12px; }
  .lang-switch summary { padding:8px 6px; }
}
/* Links inside FAQ answers: a thumb-sized tap area without moving the text. */
.faq-section details p a { display:inline-block; padding-block:10px; margin-block:-10px; }
@media(max-width:480px) {
  .lang-switch .lang-globe, .lang-switch .lang-chev { display:none; }
  .lang-switch summary { padding:8px 6px; }
  .btn.nav-cta { padding:8px 10px; font-size:.78rem; }
  .nav-toggle { margin-left:2px; }
}
@media(max-width:360px) {
  .site-header .header-row { padding-inline:14px; }
  .site-header .logo { font-size:1.2rem; }
  .btn.nav-cta { padding:8px 8px; font-size:.74rem; }
}
@media(max-width:340px) { .lang-switch summary { padding:8px 3px; } .header-end { gap:0; } .site-header .header-row { gap:10px; } }
/* Short labels instead of sentences (How it works steps). */
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; padding:0; list-style:none; }
.chips li { padding:7px 12px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.6); font-size:.88rem; line-height:1.2; color:var(--text); }
/* The hero and use-case sections fill the first screen. On a very tall
   window (or a zoomed-out browser) that turned into a screen of empty space,
   so cap them at the height of a large desktop screen. */
.hero { min-height:min(calc(100vh - 68px), 1000px); }
.usecases { min-height:min(calc(100vh - 68px), 1000px); }
@media(min-width:851px) and (min-height:721px) {
  .hero { min-height:min(calc(100vh - 68px), 1000px); }
}

/* ---------------------------------------------------------------
   Public Sans everywhere (29 Sep 2026). The code-style font stays only
   inside the product views (laptop screens, the phone interview, the
   conversation demo and the monitoring dashboard), which show the product
   as it is. Labels lose the forced capitals and wide letter spacing.
   `html body :is()` outranks the page-level <style> blocks.
--------------------------------------------------------------- */
:scope { --font-mono: var(--font-body); }
.uc-laptop, .laptop-frame, .scroller-visual, .shot-stack, .hr-dashboard,
.listening-preview, .conversation-demo {
  --font-mono: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
}
html body :is(.eyebrow, .eyebrow-num, .signal-label, .split-label, .split-point h3,
  .uc-mono, .uc-step-n, .uc-ex-num, .uc-switch a, .usecases-tab, .step-pill, .step-count,
  .tile-more, .tile-soon, .shot-open, .example-label, .experience-number, .feature-status,
 
  .nav-drop-head, .legal-updated, .cta-person, .founder-facts li,
  .br-axis, .br-msg-kick, .br-pill span, .br-step-n, .br-tri-elabel,
  #panel-usecases .usecase-tile::before) {
  text-transform: none;
  letter-spacing: normal;
}
/* Small labels: 13px regular. */
html body :is(.eyebrow, .signal-label, .split-label, .uc-mono, .example-label, .shot-open,
  .nav-drop-head,
  .experience-number, .legal-updated, .br-msg-kick, .br-axis, .tile-soon) {
  font-size: 13px;
}
/* Small numbers: 12px medium. */
html body :is(.uc-step-n, .uc-ex-num, .br-step-n) { font-size: 12px; font-weight: 500; }
/* Pills and tabs: 14px medium. */
html body :is(.uc-switch a, .usecases-tab, .step-pill) { font-size: 14px; font-weight: 500; }
/* How it works: one plain sentence under each step heading. */
.step-block > p.step-intro {
  display: block; margin: 0; max-width: 48ch;
  font-size: 17px; line-height: 1.5; color: var(--muted);
}
@media (max-width: 1000px) {
  .how .step-block > p.step-intro { display: block; grid-column: 2; font-size: 16px; max-width: min(40ch, 100%); }
}
/* The survey vs conversation table keeps its original look: small capital
   labels in the code-style font (home and survey comparison pages). */
html body :is(.cv-kick, .cv-tag, .cv-l, .cv-head > span, .cv-dot, .sv-l, .sv-head > span:not(.sv-u), .sv i) {
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Survey vs OREY table, shared by the homepage and the survey comparison
   pages (the comparison pages also carry these rules inline). */
.sv-table { display: grid; grid-template-columns: minmax(110px, 200px) minmax(0, 1fr) minmax(0, 1.1fr); margin-top: 28px; width: 100%; }
.sv-row { display: contents; }
.sv-row > span { display: flex; align-items: center; gap: 12px; padding: 15px 22px; border-bottom: 1px solid var(--line); }
.sv-row:last-child > span { border-bottom: 0; }
.sv-l { padding-left: 0 !important; font: 500 .75rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sv-o { color: var(--muted); }
.sv-u { color: var(--text); font-weight: 500; background: rgba(74,104,144,.08); border-bottom-color: rgba(74,104,144,.22) !important; }
.sv-head .sv-u { border-top: 3px solid var(--amber); font: italic 600 1.15rem var(--font-display); letter-spacing: 0; text-transform: none; }
.sv-head > span { font: 500 .72rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 18px; }
.sv-head .ear-mark { color: var(--amber); }
.sv-table i { font-style: normal; font: 600 .95rem var(--font-mono); flex: none; width: 16px; }
.sv-o i { color: #b98a7e; } .sv-u i { color: #2f665c; }
html body :is(.sv-table .sv-l, .sv-table .sv-head > span:not(.sv-u), .sv-table i) { font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; }
@media (max-width: 760px) {
  .sv-table { grid-template-columns: 1fr; }
  .sv-head { display: none; }
  .sv-row { display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .sv-row > span { padding: 0; border: 0; background: none; }
  .sv-u { padding: 8px 10px !important; background: rgba(74,104,144,.08) !important; border-left: 3px solid var(--amber) !important; }
  #compare-view .sv-table { display: none; }
}
@media (min-width: 1001px) and (max-width: 1279px) { .step-block > p.step-intro { font-size: 15px; max-width: none; } }
/* How it works, desktop: each step stays active for about two thirds of a
   screen of scrolling. At ~300px a block was passed in three wheel ticks,
   so the middle step flashed by. */
@media (min-width: 1001px) {
  .how .step-block { min-height: clamp(340px, 45vh, 460px); }
  .how .step-block:last-child { min-height: max(clamp(340px, 45vh, 460px), var(--walkthrough-last-height, 0px)); }
  .walkthrough-report-link { display:inline-flex; }
}
/* Keep iframe layout at its authored width. Safari applies iframe zoom to
   the nested viewport, triggering the report's tablet layout inside a wide
   laptop frame. The shared scale transform only changes its presentation. */

/* ---------------------------------------------------------------
   Fitted to the window (29 Sep 2026, modelled on aptura.ai):
   wider side margins on big screens, a compact opening section.
--------------------------------------------------------------- */
:scope { --page-width: 1920px; --page-gutter: clamp(24px, 3.2vw, 64px); }
@media (min-width: 851px) {
  .hero, .hero[class] { min-height: 0; padding-block: 88px 56px; }
  .hero h1 { font-size: clamp(2.6rem, 4.2vw, 3.8rem); max-width: 34ch; text-wrap: balance; }
  .hero-sub { margin-top: 1.4em; }
  .hero-actions { margin-top: 2em; }
  .hero-visual { margin-top: 64px; }
  .fragment { min-height: 0; }
}
@media (max-width: 760px) { #usecases #panel-usecases { margin-top: 24px; } }

/* ---------------------------------------------
   Brand G "Midnight" (locked 4 Oct 2026)
   Midnight and steel speak for the system; Newsreader and rose for people.
   Kept as one block so the switch is easy to review and to revert.
--------------------------------------------- */
h1, h2, h3 { font-weight: 500; letter-spacing: -.03em; }
.hero h1 { letter-spacing: -.035em; line-height: 1.06; }
.eyebrow, .signal-label { font-weight: 600; font-size: .7rem; letter-spacing: .12em; }
.eyebrow-num { letter-spacing: .12em; }

/* the name: Newsreader, upright, wide capitals; the ear in deep rose on light */
.logo { font-family: var(--font-voice); font-style: normal; font-weight: 400; letter-spacing: .14em; gap: 9px; }
.ear-mark { color: var(--rose-deep); }
.listening-logo { font-weight: 400; }

/* buttons: midnight on light pages */
.btn-primary, .btn.nav-cta { background: var(--midnight); border-color: var(--midnight); color: #f5f6f8; border-radius: 6px; }
.btn-primary:hover, .btn.nav-cta:hover { background: var(--deep); border-color: var(--deep); }
.btn-ghost { border-radius: 6px; }
.btn-text:hover { color: var(--steel-deep); }
.btn.nav-cta { padding: 4px 16px 4px 4px; }
.nav-cta-face { border-radius: 4px; }

/* what people say: Newsreader italic, quote marks in deep rose */
.fragment-text { font-family: var(--font-voice); font-size: 1.22rem; }
.quote-mark, .f1 .quote-mark, .f2 .quote-mark, .f3 .quote-mark { font-family: var(--font-voice); color: var(--rose-deep); }

/* tints that used amber */
.step-pill.is-on, .usecases-tab.active { background: rgba(18,26,43,.05); }
.fm-flow path { stroke: var(--rose); filter: drop-shadow(0 0 4px rgba(230,163,163,.55)); }
.experience-number { color: var(--steel-deep); }
.split-solution .split-point h3 { color: var(--steel-deep); }
.status-check { color: var(--steel-deep); background: #e8edf4; border-color: #c9d6e6; }
.cv-conv .cv-tag, .cv-head .cv-c { color: var(--steel-deep); }
.cv-o { background: #e8edf4; color: var(--midnight); }
.cv-q, .cv-survey .cv-res { font-weight: 500; }
.sv-head .sv-u { font: 400 1.15rem var(--font-voice); letter-spacing: .14em; }
.sv-head .ear-mark { color: var(--rose-deep); }
.sv-u i { color: var(--steel-deep); }
@media (max-width: 700px) { .sv-u { background: rgba(74,104,144,.08) !important; } }

/* use case tiles: the midnight and steel family, deep rose for knowledge transfer */
.usecase-tile[data-usecase="process-gap-mapping"] { background: linear-gradient(135deg, #1b2540, #121a2b); }
.usecase-tile[data-usecase="use-case-discovery"] { background: linear-gradient(135deg, #4a6890, #2f4a6e); }
.usecase-tile[data-usecase="organizational-pulse"] { background: linear-gradient(135deg, #34496b, #1b2540); }
.usecase-tile[data-usecase="departing-expertise"] { background: linear-gradient(135deg, #8c4f53, #5e3236); }
.usecase-tile[data-usecase='continuous-monitoring'] { background: linear-gradient(130deg, #2a3553, #121a2b); }

/* the conversation demo and the listening phone */
.conversation-demo { background: linear-gradient(145deg, #1b2540, #121a2b); }
.conversation-demo figcaption, .conversation-demo .conversation-caption { color: #aab4c4; }
.conversation-bubble > span { color: #aab4c4; }
.conversation-example { color: var(--rose); }
.employee-bubble { background: #e8edf4; color: var(--midnight); }
.employee-bubble > span { color: #525b6b; }
.conversation-wave i { background: var(--rose); }
.listening-app { background: #f5f6f8; }
.listening-orb-ring { border-color: #dfe3ea; box-shadow: 0 16px 24px -14px rgba(18,26,43,.25); }
.listening-orb { background: radial-gradient(circle at 30% 27%, #f6dede 0%, #e6a3a3 24%, #8aa4c4 50%, #34496b 72%, #121a2b 92%); }
.listening-app h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.025em; }
.listening-audio i { background: var(--rose-deep); }
.listening-controls span { border-color: #dfe3ea; color: var(--steel-deep); }

/* product mock on the monitoring page keeps a serif for its own headings */
.hr-brand, .hr-signal h4, .hr-quote-card blockquote, .hr-lead-card h4, .hr-compact-quote { font-family: var(--font-voice); }

/* the one human word in the hero headline */
.hero h1 .human { font-family: var(--font-voice); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--rose-deep); }

/* ---------------------------------------------
   Brand G on a midnight ground (4 Oct 2026): the whole site is dark,
   text in porcelain, rose for the one accent and the main button
--------------------------------------------- */
.btn-primary, .btn.nav-cta { background: var(--rose); border-color: var(--rose); color: var(--midnight); }
.btn-primary:hover, .btn.nav-cta:hover { background: #f0b9b9; border-color: #f0b9b9; }
.btn-ghost { color: var(--text); border-color: var(--line); background: transparent; }
.btn-ghost:hover { border-color: var(--steel); }
.lang-menu, .nav-drop-panel { background: var(--deep); box-shadow: 0 18px 40px -16px rgba(0,0,0,.5); }
.report-preview, .cv-conv, .cv-c { background: var(--panel); }
.cv-dot.is-on { color: var(--midnight); }
.chips li { background: rgba(245,246,248,.05); }
.status-cross { color: var(--rose); background: rgba(230,163,163,.12); border-color: rgba(230,163,163,.3); }
.status-check { color: var(--steel); background: rgba(138,164,196,.12); border-color: rgba(138,164,196,.3); }
.usecase-tile[data-usecase]:not(.has-page) { background: rgba(138,164,196,.1); border: 1px solid var(--line); }
.usecase-tile[data-usecase="process-gap-mapping"] { background: linear-gradient(135deg, #2f4166, #1b2540); }
.usecase-tile[data-usecase="use-case-discovery"] { background: linear-gradient(135deg, #4a6890, #2f4a6e); }
.usecase-tile[data-usecase="organizational-pulse"] { background: linear-gradient(135deg, #3a5078, #22304f); }
.usecase-tile[data-usecase="departing-expertise"] { background: linear-gradient(135deg, #8c4f53, #5e3236); }
.usecase-tile[data-usecase='continuous-monitoring'] { background: linear-gradient(130deg, #34496b, #1b2540); }
.usecase-tile { border: 1px solid rgba(245,246,248,.08); }
.conversation-demo { background: linear-gradient(145deg, #222d4a, #1b2540); border: 1px solid var(--line); }
.listening-app { background: var(--deep); }
.listening-orb-ring { border-color: var(--line); }
.listening-controls span { border-color: var(--line); color: var(--steel); }
.listening-controls .listening-end { background: rgba(230,163,163,.14); color: var(--rose); border-color: rgba(230,163,163,.3); }
.experience-benefits article { border-color: var(--line); }
.experience-benefits article { background: linear-gradient(145deg, #1b2540, #16203a); border-color: var(--line); box-shadow: none; }
.split-col:not(.split-solution) .split-point h3 { color: var(--text); } /* rose is kept for OREY itself */
.split-solution .split-point h3, .cv-conv .cv-tag, .cv-head .cv-c, .sv-u i { color: var(--steel); }
.sv-o i { color: var(--rose); }
.split-solution .split-label { color: var(--ice); }
/* device frames: space grey so they stand out from the midnight page */
.laptop-frame { background: linear-gradient(145deg, #3d4864, #262f48 62%, #353f5a); border-color: rgba(201,214,230,.28); box-shadow: 0 0 0 1px rgba(201,214,230,.06), 0 30px 60px -28px rgba(0,0,0,.7), inset 0 1px rgba(255,255,255,.18); }
.laptop-camera { background: #1b2540; box-shadow: 0 0 0 1px rgba(201,214,230,.3); }
.laptop-frame .shot-stack { border-color: rgba(201,214,230,.2); }
.listening-phone { background: #2d3650; border-color: rgba(201,214,230,.3); box-shadow: 0 30px 60px -28px rgba(0,0,0,.7), inset 0 1px rgba(255,255,255,.18); }
.listening-earpiece { background: #1b2540; }
/* works councils triangle: people in rose, management in steel, OREY in ice
   (html body prefix so it wins over the page's own inline styles) */
html body .br-pill.is-on { background: rgba(245,246,248,.08); color: var(--text); }
html body .br-pill-emp.is-on { border-color: var(--rose); }
html body .br-pill-mgmt.is-on { border-color: var(--steel); }
html body .br-pill-orey.is-on { border-color: var(--ice); }
html body .br-tri-cut { stroke: rgba(245,246,248,.35); }
html body .br-node-orey { fill: var(--deep); stroke: var(--ice); }
html body .br-node-emp { fill: rgba(230,163,163,.2); stroke: var(--rose); }
html body .br-node-mgmt { fill: rgba(138,164,196,.2); stroke: var(--steel); }
html body .br-story[data-active="emp"] .br-tri-edge[data-edge="emp"] { stroke: var(--rose); }
html body .br-story[data-active="mgmt"] .br-tri-edge[data-edge="mgmt"] { stroke: var(--steel); }
html body .br-story[data-active="orey"] .br-tri-edge:not(.br-tri-cut) { stroke: var(--ice); }
html body .br-kick-emp { color: var(--rose); }
html body .br-kick-mgmt { color: var(--steel); }
html body .br-kick-orey { color: var(--ice); }
/* brighter text on midnight: point titles and their lines */
.split-solution .split-point h3 { color: var(--ice); }
.split-point p, .split-lede { color: #dde3ec; }
/* footer: LinkedIn and X as round icon links */
.footer-row { gap: 20px; flex-wrap: wrap; }
.footer-meta { margin-left: auto; }
.footer-social { display: inline-flex; gap: 10px; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); transition: color .15s ease, border-color .15s ease, background .15s ease; }
.footer-social a:hover { color: var(--midnight); background: var(--rose); border-color: var(--rose); }
@media (max-width: 640px) { .footer-meta { margin-left: 0; width: 100%; order: 3; } }

/* footer: brand and line on the left, link columns on the right, legal and social below */
.site-footer { padding: 56px 0 0; }
.footer-grid { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 48px; padding-bottom: 44px; }
.footer-brand p { margin: 16px 0 0; max-width: 30ch; font-size: .95rem; line-height: 1.5; color: var(--muted); }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-head { margin: 0 0 6px; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--rose); }
.footer-col a { font-size: .95rem; line-height: 1.35; color: var(--text); text-decoration: none; transition: color .15s ease; }
.footer-col a:hover { color: var(--rose); }
.footer-base { border-top: 1px solid var(--line); padding-top: 22px; padding-bottom: 28px; }
.footer-base .footer-meta { margin-left: 0; margin-right: auto; }
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 560px) {
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer-base .footer-meta { width: auto; order: 0; }
}
/* about: email the founder */
.founder-contact { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch; gap: 14px; margin-top: 26px; }
.founder-contact .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; white-space: nowrap; }
.founder-contact span { font-size: .9rem; color: var(--muted); }
/* hero: three things OREY guarantees, small and quiet under the actions */
.hero-trust { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.hero-trust li { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: #dde3ec; }
.hero-trust svg { color: var(--rose); flex: none; }
@media (max-width: 560px) { .hero-trust { flex-direction: column; align-items: center; gap: 8px; } }
/* the product named in rose, like the voice in the hero */
.voice-accent { color: var(--rose); font-weight: 500; }
.hero-actions-after { margin-top: 28px; }
@media (min-width: 1200px) { .hero-sub { max-width: 1200px; white-space: nowrap; } }

/* Section rhythm (6 Oct 2026): strict alternation of two navy tones from the
   top. Hero is the deep tone, problem the lifted tone, and so on down the page. */
:scope { --band-lift: rgba(27,37,64,.55); }
.hero, .how, .usecases, .faq-section { background: transparent; }
.problem, .listening-section:not(.faq-section), .cta { background: var(--band-lift); }
.how, .usecases, .faq-section { border-top: 1px solid var(--line); }
.cta { border-top: 1px solid var(--line); }

/* Vertical breathing room (6 Oct 2026): space the hero in clear groups
   (headline, proof, action, then the voice strip) and give every band more air. */
@media (min-width: 901px) {
  .hero { min-height: 0; padding: clamp(180px, 23vh, 260px) 0 clamp(150px, 19vh, 230px); }
  .hero-sub { margin-top: 5.4em; line-height: 1.7; }
  .hero-trust { margin-top: 12px; gap: 12px 34px; }
  .hero-actions-after { margin-top: 88px; }
  .hero-visual { margin-top: 64px; }
  .signal-label { margin-bottom: 36px; }
  .signal-row { margin-top: 76px; }
  .signal-row .fragment { min-height: var(--frag-h, 0); }
  .problem, .how, .listening-section, .cta { padding-block: clamp(96px, 12vh, 140px); }
  .faq-section { padding-block: clamp(80px, 10vh, 110px); }
  .usecases { min-height: 0; padding-block: clamp(96px, 12vh, 140px); }
  .section-head-lg { margin-bottom: .7em; }
  .problem .section-sub, .listening-section .section-sub { margin-bottom: 52px; }
}

/* ---------------------------------------------------------------
   Phone polish (7 Oct 2026). Phones only, desktop unchanged.
--------------------------------------------------------------- */
@media (max-width: 760px) {
  /* "Built around your people": bring back the interview phone, smaller,
     as the picture for the section, and list the six points as plain
     numbered rows. The dark theme gave each row a card fill with no inner
     padding, which read as uneven boxes. */
  .listening-section:not(.trust-section):not(.faq-section) .listening-preview { display: flex; margin: 4px 0 30px; }
  .listening-section:not(.trust-section):not(.faq-section) .listening-phone { zoom: .62; }
  .experience-benefits { gap: 0 20px; }
  .experience-benefits article,
  .experience-benefits article:first-child,
  .experience-benefits article:last-child {
    justify-content: flex-start;
    padding: 14px 0 16px;
    background: none;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
  }
  .experience-benefits .benefit-icon {
    display: block; position: static; margin: 0 0 6px;
    font: 500 .72rem/1 var(--font-body); letter-spacing: .06em; color: var(--rose);
  }
  .experience-benefits h3 { font-size: .95rem; line-height: 1.3; }

  /* Use cases: the section kept a full-screen minimum height, which left a
     band of empty space above and below the short list. */
  .usecases { min-height: 0; }
}

@media (max-width: 760px) {
  /* Problem and solution: phones show titles only, so centre each one on its
     cross or check mark instead of hanging it from the top. */
  .problem .split-point { align-items: center; }
  .problem .split-point .status-mark { margin-top: 0; }
  .problem .split-point > div h3 { margin: 0; }

  /* FAQ: smaller questions, tighter rows. */
  .faq-section { padding-block: 40px; }
  .faq-section details { padding: 4px 0; }
  .faq-section summary { font-size: .92rem; line-height: 1.35; padding: 8px 0; }
  .faq-section details p { font-size: .9rem; line-height: 1.55; padding-top: 4px; }

  /* Footer: about half a screen instead of a full one. */
  .site-footer { padding-top: 32px; }
  .footer-grid { gap: 22px; padding-bottom: 24px; }
  .footer-brand p { display: none; }
  .footer-cols { gap: 18px 20px; }
  .footer-col { gap: 7px; }
  .footer-head { margin-bottom: 2px; }
  .footer-col a { font-size: .85rem; }
  .footer-base { padding-top: 14px; padding-bottom: 18px; }
}

}
.site-header{font-family:Hanken,Arial,sans-serif}.site-header .header-row{width:100%}.site-header .header-end{margin-left:auto}.site-header .nav{margin-inline:auto}.site-header .header-row>.nav-toggle{order:2}.site-header .header-end{order:3}