/* ============================================================================
   Kestrel Automotive Intelligence · site.css
   The page's own styles. scrollcraft.css owns the floor and the devices; this
   file owns the rooms, the door, the console, the desk, and the front desk.
   Do not restyle .sc-stage, .sc-copy or any [data-sc-*].
   ========================================================================== */

/* ------------------------------------------------------------ tokens ------ */
:root {
  --sc-canvas:      #0e1822;
  --sc-surface:     #253746;
  --sc-ink:         #f3f6f9;
  --sc-ink-soft:    #a7b4c0;
  --sc-accent:      #e0004d;
  --sc-accent-ink:  #ffffff;
  --sc-shadow-color: 208 40% 4%;

  --sc-font-display: "Montserrat", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;

  --sc-r-sm: 8px; --sc-r-md: 10px; --sc-r-lg: 14px;

  --night: #0e1822;
  --slate: #253746;
  --accent: #e0004d;
  --accent-deep: #c4003f;

  --bar-h: 5.75rem;
}

/* Painted grounds per room. No drift: a room change is a hard edge. */
.room { position: relative; background: var(--sc-canvas); color: var(--sc-ink); }
.room--night { --sc-canvas: #0e1822; --sc-surface: #1a2937; --sc-ink: #f3f6f9; --sc-ink-soft: #a7b4c0; --sc-accent: #e0004d; }
.room--light { --sc-canvas: #eef2f5; --sc-surface: #ffffff; --sc-ink: #142c41; --sc-ink-soft: #4f6273; --sc-accent: #c4003f; --sc-accent-ink: #ffffff; --sc-shadow-color: 208 30% 30%; }
.room--paper { --sc-canvas: #f7f9fb; --sc-surface: #ffffff; --sc-ink: #142c41; --sc-ink-soft: #4f6273; --sc-accent: #c4003f; --sc-accent-ink: #ffffff; --sc-shadow-color: 208 30% 30%; }
.room--light, .room--paper { color: var(--sc-ink); }
.room--night .sc-body { line-height: 1.68; letter-spacing: 0.002em; }
.room--light a, .room--paper a { color: var(--sc-ink); }

/* ------------------------------------------------------------ shared ------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  font-family: var(--sc-font-text); font-weight: 500; font-size: var(--sc-t-sm);
  letter-spacing: 0.005em; line-height: 1;
  padding: 0.95em 1.45em; border-radius: var(--sc-r-md);
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.985); }
.btn--accent { background: var(--accent); color: #fff; box-shadow: 0 6px 18px -8px rgb(224 0 77 / 0.55), var(--sc-edge); }
.btn--accent:hover { background: #ea1a5f; box-shadow: 0 10px 24px -8px rgb(224 0 77 / 0.6), var(--sc-edge); }
.btn--ghost { background: transparent; color: inherit; border-color: var(--sc-hairline-strong); }
.btn--ghost:hover { border-color: currentColor; }
.btn--ghost[aria-pressed="true"] { background: var(--sc-ink); color: var(--sc-canvas); border-color: var(--sc-ink); }
.btn--sm { font-size: var(--sc-t-xs); padding: 0.7em 1em; }
.btn[disabled] { opacity: 0.7; cursor: not-allowed; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: var(--sc-t-sm); font-weight: 500; text-decoration: none;
  color: var(--sc-ink); padding: 0.95em 0.2em;
  border-bottom: 1px solid var(--sc-hairline-strong);
  transition: border-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out);
}
.link-arrow::after { content: "→"; transition: transform var(--sc-d-fast) var(--sc-ease-out); }
.link-arrow:hover { border-color: var(--sc-ink); }
.link-arrow:hover::after { transform: translateX(3px); }
.room-ask { margin: var(--sc-6) 0 0; }
.room-ask .link-arrow { padding-inline: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h2.sc-display, h3 { text-wrap: balance; }

/* --------------------------------------------------------------- bar ------ */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--bar-h);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sc-6);
  padding-inline: var(--sc-gutter);
  color: #f3f6f9;
  transition: color var(--sc-d-base) var(--sc-ease-out);
}
.bar--static { position: sticky; top: 0; grid-template-columns: auto 1fr auto; background: var(--night); }
.bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgb(14 24 34 / 0.78), rgb(14 24 34 / 0));
  opacity: 0; transition: opacity var(--sc-d-base) var(--sc-ease-out);
}
/* Once scrolled past the hero (threshold room), swap the fade-to-transparent
   gradient for a solid backdrop — the gradient thins to nothing by the bar's
   lower half, where the logo, links and CTA sit, letting page content show
   through. Gated on leaving "threshold" so the hero itself stays untinted. */
body.is-scrolled:not([data-room="threshold"]) .bar::before { opacity: 1; background: rgb(14 24 34); box-shadow: 0 1px 0 rgb(255 255 255 / 0.06); }
body[data-room="product"] .bar, body[data-room="agent"] .bar, body[data-room="how"] .bar, body[data-room="faq"] .bar { color: #142c41; }
body[data-room="product"] .bar::before, body[data-room="agent"] .bar::before, body[data-room="how"] .bar::before, body[data-room="faq"] .bar::before {
  background: linear-gradient(to bottom, rgb(238 242 245 / 0.94), rgb(238 242 245 / 0));
}
body.is-scrolled[data-room="product"] .bar::before, body.is-scrolled[data-room="agent"] .bar::before, body.is-scrolled[data-room="how"] .bar::before, body.is-scrolled[data-room="faq"] .bar::before {
  background: rgb(238 242 245); box-shadow: 0 1px 0 rgb(20 44 65 / 0.08);
}
.bar__mark { display: block; line-height: 0; }
.bar__logo { height: 5rem; width: auto; }
.bar__logo--dark { display: none; }
body[data-room="product"] .bar__logo--light, body[data-room="agent"] .bar__logo--light, body[data-room="how"] .bar__logo--light, body[data-room="faq"] .bar__logo--light { display: none; }
body[data-room="product"] .bar__logo--dark, body[data-room="agent"] .bar__logo--dark, body[data-room="how"] .bar__logo--dark, body[data-room="faq"] .bar__logo--dark { display: block; }

.bar__rooms { display: flex; justify-content: center; gap: var(--sc-6); font-size: var(--sc-t-sm); }
.bar__rooms a { position: relative; text-decoration: none; opacity: 0.78; padding: 0.4em 0; transition: opacity var(--sc-d-fast) var(--sc-ease-out); }
.bar__rooms a::before {
  content: ""; position: absolute; left: -0.9em; top: 50%; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); transform: translateY(-50%) scale(0); transition: transform var(--sc-d-fast) var(--sc-ease-out);
}
.bar__rooms a:hover, .bar__rooms a[aria-current="location"] { opacity: 1; }
.bar__rooms a[aria-current="location"]::before { transform: translateY(-50%) scale(1); }
.bar__rooms-cta { display: none; }
.bar__cta { justify-self: end; }
.bar__menu { display: none; }

/* ------------------------------------------------------------ 1 · door ---- */
.door-stage {
  background: var(--night);
  --door-w: min(46vw, 760px);
  --door-h: min(74vh, 74svh, 900px);
  --door-cx: 63%;
  --door-bottom: 6vh;
  isolation: isolate;
}
.door-scene { position: absolute; inset: 0; perspective: 1500px; will-change: transform; }

/* The room behind the glass: dark, one soft magenta light, and the console. */
.door-interior {
  position: absolute;
  left: calc(var(--door-cx) - var(--door-w) * 1.15);
  bottom: calc(var(--door-bottom) - var(--door-h) * 0.55);
  width: calc(var(--door-w) * 2.3);
  height: calc(var(--door-h) * 1.9);
  background: #0b141d;
  display: grid; place-items: center;
  will-change: transform; transform-origin: 50% 60%;
  overflow: hidden;
}
.door-interior__glow {
  position: absolute; inset: -20%;
  background:
    radial-gradient(60% 50% at 50% 30%, rgb(224 0 77 / 0.16), transparent 70%),
    radial-gradient(70% 60% at 50% 85%, rgb(37 55 70 / 0.8), transparent 75%);
}
.door-interior__grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(60% 60% at 50% 55%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 55%, #000 30%, transparent 100%);
}
/* Small behind the glass, full size once the camera has pushed through. */
.console--hero { position: relative; width: calc(var(--door-w) * 0.94); font-size: 8.6px; box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(255 255 255 / 0.08); opacity: 0; will-change: opacity; }
.door-interior__grid { opacity: 0; will-change: opacity; }
/* will-change pins a layer to the resolution it was first drawn at, which is
   the small console behind the doors, and under perspective the browser will
   not redraw it larger; stretched by the push it reads soft. Once the push is
   over (site.js) the doors are out of frame and nothing moves, so drop both
   and the console is drawn sharp at the size it is shown. */
.door-stage.is-settled .door-scene { perspective: none; }
.door-stage.is-settled .door-scene, .door-stage.is-settled .door-interior, .door-stage.is-settled .console--hero { will-change: auto; }

.door-frame {
  position: absolute;
  left: calc(var(--door-cx) - var(--door-w) / 2);
  bottom: var(--door-bottom);
  width: var(--door-w); height: var(--door-h);
  box-shadow: 0 0 0 300vmax var(--night);  /* the wall */
  transform-style: preserve-3d;
}
.door-frame::before { content: ""; position: absolute; left: -16px; right: -16px; top: -16px; height: 16px; background: #15212c; }
.door-frame::after { content: ""; position: absolute; top: -16px; bottom: 0; width: 16px; left: -16px; background: #15212c; box-shadow: calc(var(--door-w) + 16px) 0 0 0 #15212c; }
.door-sill { position: absolute; left: -16px; right: -16px; bottom: -6px; height: 6px; background: #09111a; }
/* A thin magenta light in the reveal, the one warm thing on the fascia. */
.door-light {
  position: absolute; left: -16px; right: -16px; top: -18px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent);
  box-shadow: 0 0 18px 2px rgb(224 0 77 / 0.45), 0 10px 40px 4px rgb(224 0 77 / 0.15);
}

.door-leaf {
  position: absolute; top: 0; bottom: 0; width: 50%;
  overflow: hidden; will-change: transform;
  box-shadow: inset 0 0 0 4px #1a2733;
  background: linear-gradient(160deg, rgb(12 20 28 / 0.72), rgb(10 18 26 / 0.6) 55%, rgb(14 22 31 / 0.7));
}
.door-leaf--l { left: 0; transform-origin: 0 50%; }
.door-leaf--r { right: 0; transform-origin: 100% 50%; }
.door-glass {
  position: absolute; inset: 4px;
  background:
    linear-gradient(112deg, transparent 0 28%, rgb(255 255 255 / 0.10) 30%, rgb(255 255 255 / 0.02) 36%, transparent 38%),
    linear-gradient(112deg, transparent 0 58%, rgb(255 255 255 / 0.06) 60%, transparent 66%),
    linear-gradient(180deg, rgb(255 255 255 / 0.04), transparent 40%);
  backdrop-filter: blur(1.5px) saturate(0.8);
  -webkit-backdrop-filter: blur(1.5px) saturate(0.8);
}
/* The mark, centred on each leaf, as if etched into the glass. */
.door-mark { position: absolute; left: 50%; top: 50%; width: 34%; height: auto; translate: -50% -50%; opacity: 0.9; pointer-events: none; filter: drop-shadow(0 2px 10px rgb(0 0 0 / 0.35)); }
.door-handle {
  position: absolute; top: 36%; height: 26%; width: 6px; border-radius: 3px;
  background: linear-gradient(to right, #dfe7ee, #9fb0bf); box-shadow: 0 2px 6px rgb(0 0 0 / 0.4);
}
.door-leaf--l .door-handle { right: 16px; }
.door-leaf--r .door-handle { left: 16px; }

.hero-scrim { z-index: 2; }
.hero-copy { max-width: min(36rem, 38vw); z-index: 4; }
.hero-copy__eyebrow { margin: 0 0 var(--sc-4); font-size: var(--sc-t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: #ff5c8d; font-weight: 500; }
.hero-copy .sc-display--xl { font-size: clamp(2.6rem, 1.5rem + 3.4vw, 5rem); max-width: 14ch; }
.hero-copy__lede { margin-top: var(--sc-5); max-width: 38ch; color: var(--sc-ink-soft); font-size: var(--sc-t-base); }
.hero-copy__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4) var(--sc-6); margin-top: var(--sc-6); }
.hero-beat { z-index: 4; top: auto; bottom: clamp(1.5rem, 5vh, 3rem); translate: -50% 0; }
.hero-beat__label { margin: 0; font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); }

/* ------------------------------------------------------------ console ----- */
/* Sized in em so one stylesheet serves the small hero instance and the full
   intelligence instance. */
.console {
  font-size: 13px; color: #f3f6f9; font-family: var(--sc-font-text);
  background: #101b26; border-radius: 1.1em; overflow: hidden;
  box-shadow: var(--sc-e3), inset 0 1px 0 rgb(255 255 255 / 0.06);
  display: grid; grid-template-rows: auto auto auto 1fr;
  text-align: left;
}
.console__top { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.9em 1.2em; border-bottom: 1px solid rgb(255 255 255 / 0.08); }
.console__brand { display: flex; align-items: center; gap: 0.6em; font-weight: 500; }
.console__brand img { width: 1.3em; height: auto; }
.console__brand em { font-style: normal; font-size: 0.72em; letter-spacing: 0.08em; text-transform: uppercase; color: #ff5c8d; border: 1px solid rgb(224 0 77 / 0.5); border-radius: 999px; padding: 0.25em 0.7em; margin-left: 0.4em; }
.console__ctrls { display: flex; align-items: center; gap: 0.8em; }
.console__select select {
  appearance: none; -webkit-appearance: none; background: rgb(255 255 255 / 0.06); color: #f3f6f9; border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 0.5em; padding: 0.45em 2em 0.45em 0.8em; font: inherit; font-size: 0.92em; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #a7b4c0 50%), linear-gradient(135deg, #a7b4c0 50%, transparent 50%);
  background-position: calc(100% - 1.1em) 55%, calc(100% - 0.75em) 55%; background-size: 0.35em 0.35em; background-repeat: no-repeat;
}
.console__select select option { color: #142c41; }
.console__seg { display: inline-flex; background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.12); border-radius: 0.5em; padding: 2px; }
.console__seg button { background: transparent; border: 0; color: #a7b4c0; font: inherit; font-size: 0.88em; padding: 0.35em 0.8em; border-radius: 0.4em; cursor: pointer; }
.console__seg button[aria-pressed="true"] { background: #253746; color: #f3f6f9; }
.console__tabs { display: flex; gap: 0.2em; padding: 0.4em 1.2em 0; border-bottom: 1px solid rgb(255 255 255 / 0.08); }
.console__tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; color: #a7b4c0; font: inherit; font-size: 0.95em; padding: 0.7em 0.9em; cursor: pointer; margin-bottom: -1px; }
.console__tabs button[aria-selected="true"] { color: #f3f6f9; border-bottom-color: var(--accent); }
.console__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgb(255 255 255 / 0.06); border-bottom: 1px solid rgb(255 255 255 / 0.08); }
.kpi { background: #101b26; padding: 0.9em 1.2em; display: grid; gap: 0.15em; }
.kpi b { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.7em; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 0.8em; color: #a7b4c0; }
.console__body { padding: 1.2em; }
.console__two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 1.2em; }
.console__two--insights { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.panel { background: rgb(255 255 255 / 0.03); border: 1px solid rgb(255 255 255 / 0.07); border-radius: 0.8em; padding: 1em 1.1em; min-width: 0; }
.panel h4, .panel h5 { margin: 0 0 0.8em; font-size: 0.78em; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #a7b4c0; }
.panel__foot { margin: 0.9em 0 0; font-size: 0.85em; color: #a7b4c0; }
.panel__foot b { color: #f3f6f9; font-weight: 500; }
.chart-wrap { height: 7em; }
.chart { width: 100%; height: 100%; display: block; }
.chart rect { fill: var(--accent); opacity: 0.85; transform-box: fill-box; transform-origin: 50% 100%; }
.convos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35em; }
.convos li { display: grid; grid-template-columns: 3.2em 3.4em minmax(0, 1fr) minmax(0, 1.1fr) auto; gap: 0.6em; align-items: center; padding: 0.5em 0.6em; border-radius: 0.5em; background: rgb(255 255 255 / 0.03); font-size: 0.9em; }
.convos time { color: #a7b4c0; font-variant-numeric: tabular-nums; }
.convos__ch { color: #a7b4c0; font-size: 0.85em; }
.convos__intent { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convos__out { color: #a7b4c0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip { font-size: 0.72em; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.25em 0.6em; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.chip--booked { color: #7fe0b0; border-color: rgb(127 224 176 / 0.5); }
.chip--lead { color: #ff8db0; border-color: rgb(255 141 176 / 0.5); }
.chip--handover { color: #9fb8ff; border-color: rgb(159 184 255 / 0.5); }
/* The show (console.js): an animated console waits at zero, plays in when it is
   landed on, then takes a few live conversations. Opacity and transform only,
   so its box never changes; the door measures it. */
.console.is-armed .chart rect { transform: scaleY(0); }
.console.is-armed .convos li { opacity: 0; transform: translateY(0.7em); }
.console.is-playing .chart rect { transition: transform 0.7s var(--sc-ease-out); }
.console.is-playing .convos { overflow: hidden; }
.console.is-playing .convos li { transition: opacity 0.4s var(--sc-ease-out), transform 0.5s var(--sc-ease-out); }
.convos li.is-new { animation: convo-new 1.6s var(--sc-ease-out); }
.kpi b.is-tick { animation: kpi-tick 0.9s var(--sc-ease-out); }
.live-dot { display: none; width: 0.55em; height: 0.55em; margin-left: 0.7em; border-radius: 50%; background: #7fe0b0; }
.console.is-live .live-dot { display: inline-block; animation: live-pulse 1.6s ease-in-out infinite; }
@keyframes convo-new { from { background: rgb(224 0 77 / 0.28); } }
@keyframes kpi-tick { from { color: #ff8db0; } }
@keyframes live-pulse { 50% { opacity: 0.35; } }
.appts { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.appts th { text-align: left; font-weight: 500; color: #a7b4c0; font-size: 0.8em; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.4em 0.6em; border-bottom: 1px solid rgb(255 255 255 / 0.08); }
.appts td { padding: 0.55em 0.6em; border-bottom: 1px solid rgb(255 255 255 / 0.05); }
.insights { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6em; }
.insights li { padding: 0.8em 0.9em; border-radius: 0.6em; background: rgb(255 255 255 / 0.03); border-left: 1px solid var(--accent); }
.insights p { margin: 0 0 0.35em; font-weight: 500; }
.insights button { background: transparent; border: 0; padding: 0; color: #ff8db0; font: inherit; font-size: 0.85em; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.insights__ex { list-style: none; margin: 0; padding: 0; display: none; }
.insights li.is-open .insights__ex { display: grid; gap: 0.4em; margin-top: 0.6em; }
.insights__ex li { background: transparent; border-left: 0; padding: 0.4em 0.6em; font-size: 0.88em; color: #d6dee6; border-radius: 0.4em; background: rgb(255 255 255 / 0.04); }
.mixes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9em; }
.mix ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35em; }
.mix li { display: grid; grid-template-columns: 5.2em 1fr 2.4em; gap: 0.4em; align-items: center; font-size: 0.8em; color: #a7b4c0; }
.mix li i { display: block; height: 0.45em; border-radius: 0.25em; background: rgb(255 255 255 / 0.08); position: relative; overflow: hidden; }
.mix li i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--v)); }
.mix li b { font-weight: 500; color: #f3f6f9; text-align: right; font-variant-numeric: tabular-nums; }
.target { margin-top: 1em; padding-top: 0.9em; border-top: 1px solid rgb(255 255 255 / 0.08); }
.target__bar { position: relative; height: 0.8em; border-radius: 0.4em; background: rgb(255 255 255 / 0.08); overflow: hidden; }
.target__bar i { position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 50%; transform: scaleX(var(--v)); }
.target__leads { background: rgb(224 0 77 / 0.35); }
.target__sold { background: var(--accent); }
.target__legend { display: flex; flex-wrap: wrap; gap: 0.5em 1.2em; margin-top: 0.6em; font-size: 0.82em; color: #a7b4c0; }
.target__legend b { color: #f3f6f9; font-weight: 500; }
.sw { display: inline-block; width: 0.7em; height: 0.7em; border-radius: 2px; margin-right: 0.35em; vertical-align: -0.05em; }
.sw--sold { background: var(--accent); } .sw--leads { background: rgb(224 0 77 / 0.35); }

/* ------------------------------------------------------------ 2 · product - */
.room--after-pin { padding-block: clamp(3rem, 6vw, 6rem) var(--sc-section); }
.product { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-8) var(--sc-9); align-items: start; }
.product__head .sc-display--lg { font-size: var(--sc-t-2xl); max-width: 22ch; }
.product__head .sc-lede { color: var(--sc-ink); margin-top: var(--sc-5); }
.product__caps { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-6) var(--sc-7); }
.cap { padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline-strong); }
.cap dt { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base); letter-spacing: var(--sc-track-snug); }
.cap dd { margin: 0.5em 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; }
.roles { grid-column: 1 / -1; margin-top: var(--sc-4); padding-top: var(--sc-8); border-top: 1px solid var(--sc-hairline-strong); }
.roles__head { max-width: 48rem; }
.roles__head .sc-display { margin-top: var(--sc-3); }
.roles__grid { margin: var(--sc-7) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-6); }
.roles__grid > div { padding: var(--sc-5); border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-md); background: #fff; }
.roles__grid dt { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); }
.roles__grid dd { margin: var(--sc-3) 0 0; color: var(--sc-ink-soft); line-height: 1.6; }
.roles__scope { margin: var(--sc-5) 0 0; max-width: 70ch; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }

/* ------------------------------------------------------------ 3 · desk ---- */
.desk { background: var(--sc-canvas); }
.desk__grid {
  height: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding: calc(var(--bar-h) + var(--sc-5)) var(--sc-gutter) var(--sc-7);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto minmax(0, 1fr); gap: var(--sc-6) var(--sc-9);
}
.desk__head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sc-3) var(--sc-6); }
.desk__head .sc-display--md { max-width: 24ch; }
.desk__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3); }
.desk__note { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); letter-spacing: 0.02em; margin-right: var(--sc-2); }
.desk__side { margin: 0 0 var(--sc-4); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); }
.desk__front, .desk__back { display: flex; flex-direction: column; min-height: 0; }

.chat-viewport { position: relative; flex: 1; min-height: 0; overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 100%); }
/* Once the conversation is complete, or on request, it is an ordinary
   scrollable transcript: nothing said is hidden. */
.desk.is-done .chat-viewport, .desk.is-transcript .chat-viewport { overflow-y: auto; mask-image: none; -webkit-mask-image: none; scrollbar-width: thin; }
.chat { list-style: none; margin: 0; padding: var(--sc-5) var(--sc-2) var(--sc-2) 0; display: grid; gap: var(--sc-3); align-content: start; will-change: transform; }
.chat__msg { max-width: 38rem; padding: var(--sc-4) var(--sc-5); border-radius: var(--sc-r-lg); transition: opacity 380ms var(--sc-ease-out), transform 380ms var(--sc-ease-out); }
.js .chat__msg { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.985); }
.chat__msg.is-on { opacity: 1; transform: none; }
.chat__msg--cust { background: var(--sc-surface); box-shadow: var(--sc-e1), var(--sc-edge); justify-self: start; border-bottom-left-radius: 4px; }
.chat__msg--agent { background: #142c41; color: #f3f6f9; justify-self: end; border-bottom-right-radius: 4px; box-shadow: var(--sc-e2); }
.chat__who { display: block; font-size: var(--sc-t-xs); letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; margin-bottom: 0.35em; }
.chat__msg--agent .chat__who { color: #ff5c8d; opacity: 1; }
.chat__text { margin: 0; font-size: var(--sc-t-base); line-height: 1.5; text-wrap: pretty; }
.chat__dots { display: inline-flex; gap: 4px; align-items: center; height: 1.5em; }
.chat__dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.5; animation: chat-dot 900ms infinite; }
.chat__dots i:nth-child(2) { animation-delay: 150ms; } .chat__dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes chat-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }

.ledger { margin: 0; display: grid; gap: var(--sc-3); align-content: start; }
.ledger__row { padding: var(--sc-4) 0; border-top: 1px solid var(--sc-hairline-strong); transition: opacity 480ms var(--sc-ease-out), transform 480ms var(--sc-ease-out); }
.js .ledger__row { opacity: 0; transform: translate3d(0, 10px, 0); }
.ledger__row.is-on { opacity: 1; transform: none; }
.ledger__row dt { font-size: var(--sc-t-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--sc-ink-soft); }
.ledger__row dd { margin: 0.35em 0 0; font-size: var(--sc-t-base); line-height: 1.5; font-variant-numeric: tabular-nums; }
.ledger__row--accent dt { color: var(--sc-accent); }

/* ------------------------------------------------------------ 4 · office -- */
#intelligence { padding-block: var(--sc-section); }
.office { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sc-8) var(--sc-9); align-items: start; }
.office__copy .sc-display--lg { font-size: var(--sc-t-2xl); max-width: none; }
.office__copy .sc-lede { color: var(--sc-ink); margin-top: var(--sc-6); }
.office__app { min-width: 0; }

/* ------------------------------------------------------------ 5 · how ----- */
#how { padding-block: var(--sc-section); }
.how__head { max-width: 62ch; }
.how__head .sc-display--lg { max-width: 18ch; }
.steps { list-style: none; margin: var(--sc-9) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-7); counter-reset: step; }
.steps li { padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline-strong); }
.steps__n { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--sc-ink); color: var(--sc-canvas); font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm); }
.steps h3 { margin: var(--sc-4) 0 var(--sc-3); font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); }
.steps p { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.6; text-wrap: pretty; }
.how__grid { margin-top: var(--sc-9); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sc-8) var(--sc-9); }
.safe h3, .connects h3 { margin: 0 0 var(--sc-5); font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); }
.safe dl { margin: 0; display: grid; gap: 0; }
.safe dl > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--sc-4); padding: var(--sc-4) 0; border-top: 1px solid var(--sc-hairline-strong); }
.safe dt { font-weight: 500; }
.safe dd { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; }
.connects ul { list-style: none; margin: 0; padding: 0; display: grid; }
.connects li { display: grid; gap: 0.2em; padding: var(--sc-4) 0; border-top: 1px solid var(--sc-hairline-strong); }
.connects li strong { font-weight: 500; }
.connects li span { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.connects__note { margin: var(--sc-5) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); text-wrap: pretty; }
.product__what { margin-top: var(--sc-5); color: var(--sc-ink-soft); max-width: 58ch; }
.product__what .link-arrow { display: inline-block; margin-top: var(--sc-3); padding-inline: 0; }

/* ----------------------------------------------------- buyer essentials -- */
.buyer { padding-block: var(--sc-10); }
.buyer__head { max-width: 52rem; }
.buyer__head .sc-body { color: #a7b4c0; max-width: 66ch; }
.buyer__grid { margin-top: var(--sc-8); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-4); }
.buyer__grid a { min-height: 13rem; padding: var(--sc-6); display: grid; align-content: start; gap: var(--sc-3); border: 1px solid rgb(255 255 255 / 0.14); border-radius: var(--sc-r-md); color: #f3f6f9; text-decoration: none; transition: border-color var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out); }
.buyer__grid a:hover { border-color: var(--accent); transform: translateY(-2px); }
.buyer__grid span { color: var(--accent); font-size: var(--sc-t-xs); letter-spacing: 0.12em; }
.buyer__grid strong { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 600; }
.buyer__grid small { color: #a7b4c0; font-size: var(--sc-t-sm); line-height: 1.6; }

/* ------------------------------------------------------------ faq --------- */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sc-8) var(--sc-9); align-items: start; padding-block: var(--sc-section); }
.faq__head .sc-display--lg { max-width: 12ch; }
.faq__head .sc-body { margin-top: var(--sc-5); color: var(--sc-ink-soft); }
.faq__list { margin: 0; display: grid; gap: 0; }
.faq__list > div { display: grid; gap: var(--sc-2); padding: var(--sc-5) 0; border-top: 1px solid var(--sc-hairline-strong); }
.faq__list dt { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); line-height: 1.25; text-wrap: balance; }
.faq__list dd { margin: 0; color: var(--sc-ink-soft); line-height: 1.6; max-width: 62ch; text-wrap: pretty; }

/* ------------------------------------------------------------ 6 · front --- */
.desk-room { min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; }
.front { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sc-8) var(--sc-10); align-items: start; padding-block: calc(var(--bar-h) + var(--sc-8)) var(--sc-9); }
.front__copy .sc-display--lg { max-width: 14ch; }
.front__copy .sc-lede { color: var(--sc-ink); }
.front__copy a { color: var(--sc-ink); }
.front__includes { margin: var(--sc-5) 0 0; padding-left: 1.1rem; color: #c4ced7; font-size: var(--sc-t-sm); line-height: 1.55; }
.front__includes li { margin-bottom: var(--sc-2); }

.form { display: grid; gap: var(--sc-5); background: #14212d; padding: var(--sc-7); border-radius: var(--sc-r-lg); box-shadow: var(--sc-e3), var(--sc-edge); }
.form__hp { display: none; }
/* Turnstile fills this itself. An invisible widget leaves it empty and it
   collapses; a managed one renders a box roughly 65-75px tall, which the form's
   own grid gap already spaces. The :not(:empty) guard keeps the margin from
   opening a gap when nothing is rendered. */
.form__turnstile:not(:empty) { margin-top: var(--sc-2); }
.form__field { display: grid; gap: var(--sc-2); }
.form__field label { font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(243 246 249 / 0.8); }
.form input, .form select, .form textarea {
  width: 100%; border-radius: var(--sc-r-md); border: 1px solid rgb(255 255 255 / 0.1); background: rgb(255 255 255 / 0.08);
  padding: 0.75rem 0.85rem; font-size: var(--sc-t-sm); color: #f3f6f9; outline: none;
  transition: border-color var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out);
}
.form input::placeholder, .form textarea::placeholder { color: rgb(167 180 192 / 0.55); }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { border-color: rgb(224 0 77 / 0.8); box-shadow: 0 0 0 3px rgb(224 0 77 / 0.28); outline: none; }
.form input[aria-invalid="true"] { border-color: #ff7aa0; }
.form textarea { resize: none; }
.form__select { position: relative; }
.form__select::after { content: ""; position: absolute; right: 0.95rem; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid #a7b4c0; border-bottom: 1.5px solid #a7b4c0; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.form select { appearance: none; -webkit-appearance: none; padding-right: 2.4rem; }
.form select option { color: #142c41; background: #fff; }
.form__submit { width: 100%; margin-top: var(--sc-2); padding-block: 1.05em; }
.form__arrow { transition: transform var(--sc-d-fast) var(--sc-ease-out); }
.form__submit:hover .form__arrow { transform: translateX(3px); }
.form__status { margin: 0; min-height: 1.4em; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.form__status.is-error { color: #ff7aa0; }
.form__status.is-ok { color: #f3f6f9; }
.form__privacy { margin: 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.form__privacy a { color: var(--sc-ink); }

.foot { border-top: 1px solid rgb(255 255 255 / 0.08); padding-block: var(--sc-7) var(--sc-6); }
.foot__grid { display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: var(--sc-7) var(--sc-10); align-items: start; }
.foot__brand { min-width: 0; }
.foot__brand img { display: block; width: min(13rem, 100%); height: auto; }
.foot__brand p { max-width: 34ch; margin: var(--sc-4) 0 0; font-size: var(--sc-t-sm); line-height: 1.6; color: var(--sc-ink-soft); }
.foot__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-4) var(--sc-6); align-content: start; font-size: var(--sc-t-sm); }
.foot__links a { min-width: 0; text-decoration: none; color: var(--sc-ink-soft); overflow-wrap: anywhere; transition: color var(--sc-d-fast) var(--sc-ease-out); }
.foot__links a:hover { color: var(--sc-ink); }
.foot__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sc-2) var(--sc-6); margin: 0; padding-top: var(--sc-5); border-top: 1px solid rgb(255 255 255 / 0.08); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.foot__legal p { margin: 0; }
.foot__legal a { color: inherit; }

.company-lockup { margin: var(--sc-7) 0; padding: var(--sc-6); border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-md); background: #fff; }
.company-lockup img { display: block; width: 10rem; height: auto; margin-bottom: var(--sc-4); }
.company-lockup p { margin-bottom: 0; }
.fact-grid { margin: var(--sc-6) 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-4); }
.fact-grid > div { padding: var(--sc-5); border-top: 1px solid var(--sc-hairline-strong); }
.fact-grid dt { font-family: var(--sc-font-display); font-weight: 600; color: var(--sc-ink); }
.fact-grid dd { margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); line-height: 1.55; }
.status-list { list-style: none; padding: 0; }
.status-list li { padding: var(--sc-4) 0; border-top: 1px solid var(--sc-hairline); }
.status-list strong { display: block; }
.status-list span { display: block; margin-top: var(--sc-2); color: var(--sc-ink-soft); }
.truth-note { padding: var(--sc-5); border-left: 2px solid var(--accent); background: #fff; }

/* ------------------------------------------------------------ insights ---- */
body.page--light { background: #eef2f5; color: #142c41; --sc-canvas: #eef2f5; --sc-surface: #fff; --sc-ink: #142c41; --sc-ink-soft: #4f6273; --sc-accent: #c4003f; --sc-shadow-color: 208 30% 30%; }
body.page--light .sc-body { color: var(--sc-ink-soft); }
.bar__rooms--static a { opacity: 0.85; }
.bar__rooms--static a[aria-current="page"] { opacity: 1; }
.bar__rooms--static a[aria-current="page"]::before { transform: translateY(-50%) scale(1); }
.ins__hero { padding-block: var(--sc-9) var(--sc-7); }
.ins__eyebrow, .ins__label { margin: 0 0 var(--sc-4); font-size: var(--sc-t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: #c4003f; font-weight: 500; }
.ins__hero .sc-display--xl { max-width: 14ch; font-size: clamp(2.6rem, 1.5rem + 3.4vw, 5rem); }
.ins__hero .sc-lede { margin-top: var(--sc-5); max-width: 56ch; color: var(--sc-ink); }
.ins__actions { display: flex; flex-wrap: wrap; gap: var(--sc-4) var(--sc-6); align-items: center; margin-top: var(--sc-6); }
.ins__list { padding-block: var(--sc-5) var(--sc-9); }
.ins__filters { display: flex; flex-wrap: wrap; gap: var(--sc-2); margin-bottom: var(--sc-8); scroll-margin-top: var(--sc-8); }
.ins__filters button { font: inherit; font-size: var(--sc-t-sm); font-weight: 500; padding: 0.55em 1.1em; border-radius: 999px; border: 1px solid var(--sc-hairline-strong); background: #fff; color: var(--sc-ink); cursor: pointer; transition: border-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out); }
.ins__filters button:hover { border-color: #c4003f; color: #c4003f; }
.ins__filters button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 18px -8px rgb(224 0 77 / 0.55); }
.ins__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3); font-size: var(--sc-t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.ins__cat { color: #c4003f; font-weight: 500; }
.ins__featured { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sc-7) var(--sc-9); align-items: center; padding: var(--sc-7); margin-bottom: var(--sc-9); border-radius: var(--sc-r-lg); background: #fff; box-shadow: var(--sc-e2), var(--sc-edge); text-decoration: none; color: inherit; transition: box-shadow var(--sc-d-base) var(--sc-ease-out), transform var(--sc-d-base) var(--sc-ease-out); }
.ins__featured:hover { box-shadow: var(--sc-e3), var(--sc-edge); transform: translateY(-2px); }
.ins__featured .sc-display--lg { margin-top: var(--sc-4); font-size: var(--sc-t-2xl); }
.ins__featured:hover .sc-display--lg, .ins__card:hover h3 { color: #c4003f; }
.ins__featured p { margin: var(--sc-4) 0 var(--sc-5); color: var(--sc-ink-soft); max-width: 62ch; text-wrap: pretty; }
.ins__featured .link-arrow { padding-inline: 0; }
.ins__featured-art { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--sc-r-md); background: radial-gradient(70% 70% at 50% 40%, #253746, #0e1822 80%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06); }
.ins__featured-art img { width: 38%; height: auto; opacity: 0.95; filter: drop-shadow(0 8px 30px rgb(224 0 77 / 0.25)); }
.ins__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-6); }
.ins__card { display: grid; gap: var(--sc-3); align-content: start; padding: var(--sc-6); border-radius: var(--sc-r-lg); background: #fff; box-shadow: var(--sc-e1), var(--sc-edge); text-decoration: none; color: inherit; transition: box-shadow var(--sc-d-base) var(--sc-ease-out), transform var(--sc-d-base) var(--sc-ease-out); }
.ins__card:hover { box-shadow: var(--sc-e2), var(--sc-edge); transform: translateY(-2px); }
.ins__card h3 { margin: var(--sc-2) 0 0; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); line-height: 1.2; transition: color var(--sc-d-fast) var(--sc-ease-out); }
.ins__card p { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; text-wrap: pretty; }
.ins__more { margin-top: var(--sc-2); font-size: var(--sc-t-sm); font-weight: 500; color: #c4003f; }
.ins__empty { margin: var(--sc-6) 0 0; color: var(--sc-ink-soft); }
.ins__cta { background: #0e1822; color: #f3f6f9; padding-block: var(--sc-9); }
.ins__cta .sc-display--md { max-width: 16ch; }
.ins__cta .sc-body { color: #a7b4c0; margin: var(--sc-4) 0 var(--sc-6); }

/* Article */
.post__head { padding-block: var(--sc-8) var(--sc-7); background: #fff; border-bottom: 1px solid var(--sc-hairline); }
.post__wrap { max-width: 50rem; }
.post__back { display: inline-block; margin-bottom: var(--sc-5); font-size: var(--sc-t-sm); font-weight: 500; color: #c4003f; text-decoration: none; }
.post__back::before { content: "\2190  "; }
.post__read::before { content: "\00B7  "; }
.post__head .sc-display--lg { margin-top: var(--sc-4); font-size: var(--sc-t-2xl); max-width: 24ch; }
.post__standfirst { margin: var(--sc-5) 0 0; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink); text-wrap: pretty; }
.post__by { display: flex; align-items: center; gap: var(--sc-3); margin: var(--sc-6) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.post__by img { width: 2rem; height: auto; }
.post__by strong { color: var(--sc-ink); font-weight: 500; }
.post__body { padding-block: var(--sc-8) var(--sc-6); font-size: var(--sc-t-base); line-height: 1.7; color: #22384c; }
.post__body p, .post__body ul, .post__body ol { margin: 0 0 var(--sc-5); max-width: 66ch; text-wrap: pretty; }
.post__body li { margin-bottom: var(--sc-3); }
.post__body h2 { margin: var(--sc-8) 0 var(--sc-4); font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); color: var(--sc-ink); max-width: 30ch; }
.post__body strong { color: var(--sc-ink); font-weight: 500; }
.post__body a { color: #c4003f; }
.post__body blockquote { margin: var(--sc-7) 0; padding: var(--sc-5) var(--sc-6); border-left: 1px solid var(--accent); background: #fff; border-radius: 0 var(--sc-r-md) var(--sc-r-md) 0; font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-lg); line-height: 1.4; color: var(--sc-ink); text-wrap: pretty; }
.post__body blockquote cite { display: block; margin-top: var(--sc-3); font-family: var(--sc-font-text); font-style: normal; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.post__contact { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.post__end { padding-block: var(--sc-4) var(--sc-9); }
.post__cta { padding: var(--sc-7); border-radius: var(--sc-r-lg); background: #0e1822; color: #f3f6f9; }
.post__cta .sc-display--md { max-width: 16ch; }
.post__cta .sc-body { color: #a7b4c0; margin: var(--sc-4) 0 var(--sc-6); }
.post__next { margin: var(--sc-6) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.post__next a { color: var(--sc-ink); }
.post__share { margin: var(--sc-6) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.post__share a { color: var(--sc-ink); text-decoration: none; border-bottom: 1px solid var(--sc-hairline-strong); }
.post__share a:hover { border-color: var(--sc-ink); }
.foot--page { background: #0e1822; color: #f3f6f9; }

/* ------------------------------------------------------------ legal page -- */
.page { background: var(--night); }
.legal { padding-block: var(--sc-8) var(--sc-10); max-width: 46rem; }
.legal h2 { margin: var(--sc-7) 0 var(--sc-3); font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); }
.legal .sc-body { color: var(--sc-ink-soft); }
.legal a { color: var(--sc-accent); }
.legal a:hover { color: #8f002e; }
.legal__back { margin-top: var(--sc-8); }

/* ------------------------------------------------------ reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .hero-beat { display: none; }
  .js .chat__msg, .js .ledger__row { opacity: 1; transform: none; transition: none; }
  .chat__dots i { animation: none; }
  .btn, .link-arrow::after, .form__arrow { transition: none; }
}

/* ------------------------------------------------------------ short ------- */
@media (max-height: 820px) and (min-width: 861px) {
  .desk__grid { padding-top: calc(var(--bar-h) + var(--sc-4)); padding-bottom: var(--sc-5); gap: var(--sc-4) var(--sc-8); }
  .desk__head .sc-display--md { font-size: var(--sc-t-xl); }
  .chat__text, .ledger__row dd { font-size: var(--sc-t-sm); }
}

/* ------------------------------------------------------------ tablet ------ */
@media (max-width: 1100px) {
  .desk__grid { grid-template-columns: 1fr; grid-template-rows: auto; align-content: start; gap: var(--sc-5); }
  .office { grid-template-columns: 1fr; }
  .product { grid-template-columns: 1fr; }
  .how__grid { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; gap: var(--sc-6); }
  .faq__head .sc-display--lg { max-width: 18ch; }
  .console__two, .console__two--insights { grid-template-columns: 1fr; }
}

/* Rooms the JS has switched to normal flow, because their content did not
   fit one pinned screen (tablets, short laptops, phones). */
.is-flowing .desk, .is-flowing .office { position: static; height: auto; min-height: 0; overflow: visible; }
.is-flowing .desk__grid { height: auto; padding-bottom: var(--sc-8); }
.is-flowing .chat-viewport { overflow: visible; mask-image: none; -webkit-mask-image: none; }
.is-flowing .chat { padding-top: 0; }

/* ------------------------------------------------------------ phone ------- */
@media (max-width: 860px) {
  :root { --bar-h: 4.75rem; }
  .bar { grid-template-columns: auto 1fr auto; gap: var(--sc-4); }
  .bar__logo { height: 3.4rem; }
  /* Keep the primary action in the top section, then hand its place to the
     menu once the next room reaches the bar. Both controls share one cell so
     the logo and right edge remain still during the swap. */
  .bar__cta {
    display: inline-flex; grid-column: 3; grid-row: 1; font-size: var(--sc-t-xs); padding: 0.8em 1em;
    opacity: 1; visibility: visible; transform: none;
    transition: opacity var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out), visibility 0s;
  }
  .bar__menu {
    display: inline-flex; grid-column: 3; grid-row: 1; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 0 10px;
    background: transparent; border: 1px solid rgb(255 255 255 / 0.18); border-radius: var(--sc-r-md); cursor: pointer; justify-self: end;
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px);
    transition: opacity var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out), visibility 0s var(--sc-d-fast);
  }
  body[data-room]:not([data-room="threshold"]) .bar__cta, body.menu-open .bar__cta { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); transition-delay: 0s, 0s, var(--sc-d-fast); }
  body[data-room]:not([data-room="threshold"]) .bar__menu, body.menu-open .bar__menu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
  .bar__menu span { display: block; height: 2px; background: currentColor; border-radius: 1px; transition: transform var(--sc-d-fast) var(--sc-ease-out); }
  .bar__menu[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .bar__menu[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  body[data-room="product"] .bar__menu, body[data-room="agent"] .bar__menu, body[data-room="how"] .bar__menu, body[data-room="faq"] .bar__menu { border-color: rgb(20 44 65 / 0.25); }
  /* The menu: a dark sheet under the bar with the section links and the CTA. */
  .bar__rooms {
    position: fixed; top: var(--bar-h); left: 0; right: 0; z-index: var(--sc-z-chrome);
    display: grid; gap: 0; padding: var(--sc-3) var(--sc-gutter) var(--sc-5);
    background: rgb(14 24 34 / 0.97); color: #f3f6f9; border-bottom: 1px solid rgb(255 255 255 / 0.08);
    font-size: var(--sc-t-lg);
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out);
  }
  body.menu-open .bar__rooms { opacity: 1; transform: none; pointer-events: auto; }
  .bar__rooms a { padding: 0.75em 0; opacity: 0.9; border-bottom: 1px solid rgb(255 255 255 / 0.06); }
  .bar__rooms a::before { display: none; }
  .bar__rooms-cta { display: inline-flex; justify-content: center; margin-top: var(--sc-4); padding: 0.8em 1.2em; border-radius: var(--sc-r-md); background: var(--accent); color: #fff; border-bottom: 0; font-size: var(--sc-t-base); font-weight: 500; }
  body.is-scrolled:not([data-room="threshold"]) .bar, body.menu-open .bar { color: #f3f6f9; }
  body.is-scrolled:not([data-room="threshold"]) .bar::before, body.menu-open .bar::before { opacity: 1; background: rgb(14 24 34); box-shadow: 0 1px 0 rgb(255 255 255 / 0.06); }
  body.is-scrolled .bar__logo--light, body.menu-open .bar__logo--light { display: block !important; }
  body.is-scrolled .bar__logo--dark, body.menu-open .bar__logo--dark { display: none !important; }
  body.is-scrolled .bar__menu, body.menu-open .bar__menu { border-color: rgb(255 255 255 / 0.18); }

  /* Hero: the proposition first, the doors under it. Door size is set by JS
     from the space left below the copy. */
  .door-stage { --door-w: min(74vw, 420px); --door-h: 40svh; --door-cx: 50%; --door-bottom: 4svh; }
  .hero-copy { max-width: none; top: calc(var(--bar-h) + 0.5rem); bottom: auto; }
  .hero-copy__eyebrow { margin-bottom: var(--sc-3); }
  .hero-copy .sc-display--xl { font-size: var(--sc-t-2xl); max-width: 16ch; }
  .hero-copy__lede { margin-top: var(--sc-3); font-size: var(--sc-t-sm); max-width: 42ch; }
  .hero-copy__actions { margin-top: var(--sc-4); gap: var(--sc-3) var(--sc-5); }
  .hero-scrim { background: linear-gradient(to bottom, rgb(14 24 34 / 0.96) 0%, rgb(14 24 34 / 0.85) 40%, rgb(14 24 34 / 0.3) 70%, transparent 100%); }
  .hero-beat { inset-inline: auto; left: 50%; right: auto; width: max-content; max-width: 92vw; text-align: center; }
  /* Behind the doors on a small screen the console is a phone screen, not a
     shrunken desktop: the brand, the KPIs, the activity chart and the latest
     conversations, with no controls too small to press. The console lands
     scaled to fill the room (site.js), so its shape has to match the room's:
     a layout taller than the room is made to fit by shrinking, which is what
     drove the type down to 5px. Hence two shapes, chosen by the room's. */
  .console--hero .console__ctrls, .console--hero .console__tabs { display: none; }
  .console--hero .convos__out { display: none; }

  /* Tall room: one column, KPIs two by two, the list under the chart. */
  @media (orientation: portrait) {
    .door-interior .console--hero { font-size: calc(var(--door-w) * 0.94 / 26); }
    .console--hero .console__body { padding: 0.9em; }
    .console--hero .console__two { gap: 0.9em; }
    .console--hero .chart-wrap { height: 5.5em; }
    .console--hero .convos li:nth-child(n+5) { display: none; }
    /* A short phone trades the fourth row for type that still reads. */
    @media (max-height: 700px) {
      .console--hero .chart-wrap { height: 4.5em; }
      .console--hero .convos li:nth-child(n+4) { display: none; }
    }
  }
  /* Short, wide room (a phone on its side, a short window): width to spare and
     no height, so the console lands wide and shallow, chart beside the list. */
  @media (orientation: landscape) {
    .door-interior .console--hero { font-size: calc(var(--door-w) * 0.94 / 40); }
    .console--hero .console__top { padding: 0.5em 0.9em; }
    .console--hero .console__kpis { grid-template-columns: repeat(4, 1fr); }
    .console--hero .kpi { padding: 0.5em 0.8em; }
    .console--hero .console__body { padding: 0.7em; }
    .console--hero .console__two { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 0.7em; }
    .console--hero .panel { padding: 0.7em 0.8em; }
    .console--hero .chart-wrap { height: 4.2em; }
    .console--hero .convos li:nth-child(n+4) { display: none; }
    /* Shallower still on a phone held sideways, where the room left under the
       bar is a couple of hundred pixels: every em of height buys type size. */
    @media (max-height: 460px) {
      .console--hero .console__top { padding: 0.4em 0.8em; }
      .console--hero .kpi { padding: 0.4em 0.7em; }
      .console--hero .chart-wrap { height: 3.2em; }
      .console--hero .convos li:nth-child(n+3) { display: none; }
    }
  }

  .product__caps { grid-template-columns: 1fr; gap: var(--sc-5); }
  .roles__grid, .buyer__grid, .fact-grid { grid-template-columns: 1fr; }
  .buyer__grid a { min-height: 0; }
  .product__head .sc-display--lg, .office__copy .sc-display--lg, .how__head .sc-display--lg, .front__copy .sc-display--lg { font-size: var(--sc-t-2xl); }

  .desk__grid { padding: calc(var(--bar-h) + var(--sc-4)) var(--sc-gutter) var(--sc-6); gap: var(--sc-5); }
  .desk__head .sc-display--md { font-size: var(--sc-t-xl); }
  .chat__msg { padding: var(--sc-3) var(--sc-4); max-width: 92%; }
  .chat__text { font-size: 1rem; line-height: 1.5; }
  .ledger__row dd { font-size: 0.95rem; }
  .ledger__row br { display: none; }

  .console { font-size: 12px; }
  .console__top { flex-wrap: wrap; }
  .console__kpis { grid-template-columns: repeat(2, 1fr); }
  .convos li { grid-template-columns: 3em 1fr auto; }
  .convos__ch, .convos__out { display: none; }
  .mixes { grid-template-columns: 1fr; }
  .appts th:nth-child(4), .appts td:nth-child(4) { display: none; }

  .steps { grid-template-columns: 1fr; gap: var(--sc-6); margin-top: var(--sc-7); }
  .safe dl > div { grid-template-columns: 1fr; gap: var(--sc-2); }
  .how__grid { margin-top: var(--sc-7); }

  .front { grid-template-columns: 1fr; gap: var(--sc-6); padding-block: calc(var(--bar-h) + var(--sc-6)) var(--sc-7); }
  .form { padding: var(--sc-5); }
  .foot__grid { grid-template-columns: 1fr; align-items: start; }
  .foot__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__brand img { width: 11rem; }
}

@media (max-width: 860px) {
  .bar--static { grid-template-columns: auto 1fr auto; }
  .bar__rooms--static { display: none; }
  .bar--static .bar__cta { display: inline-flex; font-size: var(--sc-t-xs); padding: 0.8em 1em; }
  .ins__hero { padding-block: var(--sc-7) var(--sc-6); }
  .ins__hero .sc-display--xl { font-size: var(--sc-t-2xl); }
  .ins__featured { grid-template-columns: 1fr; padding: var(--sc-5); gap: var(--sc-5); margin-bottom: var(--sc-7); }
  .ins__featured-art { order: -1; aspect-ratio: 16 / 9; }
  .ins__grid { grid-template-columns: 1fr; gap: var(--sc-4); }
  .post__head .sc-display--lg { font-size: var(--sc-t-xl); }
  .post__cta { padding: var(--sc-5); }
}

@media (max-width: 400px) {
  .hero-copy .sc-display--xl { font-size: clamp(1.7rem, 8vw, 2.1rem); }
  .foot__links { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- people --- */
.person { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--sc-5); align-items: center; margin: var(--sc-5) 0; }
.person img { width: 7.5rem; height: 7.5rem; border-radius: 50%; object-fit: cover; }
.person p { margin: 0 0 0.4em; }
@media (max-width: 560px) { .person { grid-template-columns: 5.5rem minmax(0, 1fr); } .person img { width: 5.5rem; height: 5.5rem; } }