/* Overture — shared stylesheet for the marketing site.
   Lifted out of index.html when String of Pearls became its own page, so the
   two pages cannot drift apart on tokens, chrome or components. */

/* Fonts are self-hosted rather than loaded from fonts.googleapis.com.
   Agentic browsers that implement Web Bot Auth stamp a `Signature-Agent`
   header onto every request, including cross-origin subresources. That header
   is not CORS-safelisted, so it forces a preflight, and fonts.gstatic.com does
   not list it in Access-Control-Allow-Headers — the font fetch is blocked and
   the page silently falls back to system fonts for those clients. Serving the
   files from our own origin removes the cross-origin hop entirely.

   Self-hosting also drops a request chain: the Google Fonts <link> had to be
   fetched and parsed before the browser could discover any font URL. These
   @font-face rules ship inside site.css, which is already in the critical path.

   Space Grotesk is the variable file (one download spans 400–700) in place of
   the four static weights the API previously served. Subsets are latin and
   latin-ext only; unicode-range is preserved verbatim from the Google Fonts
   stylesheet, so latin-ext stays gated behind characters that actually need it.
   Both families are SIL Open Font License 1.1, which permits redistribution. */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --abyss: #0A111E;
  --deep: #0D1726;
  --panel: #111E30;
  --signal: #F4B740;
  --foam: #EAF0F8;
  --slate: #8A99B5;
  --slate-dim: #5C6B86;
  --line: rgba(234, 240, 248, 0.08);
  --line-strong: rgba(234, 240, 248, 0.14);
  --maxw: 1120px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--abyss);
  color: var(--foam);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* faint fathom lines down the whole page */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 119px,
    rgba(234, 240, 248, 0.025) 120px
  );
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ---------- eyebrow / depth marker ---------- */
.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow .depth { color: var(--slate-dim); }
.eyebrow .tri { color: var(--signal); }

/* ---------- nav ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(10, 17, 30, 0.72);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--foam);
  text-decoration: none;
}
.brand .mark { width: 18px; height: 18px; flex: none; }
.nav-right { display: flex; align-items: center; gap: 22px; }
.nav-right .link-quiet { border-bottom: 0; padding-bottom: 0; }
.nav-cta {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: var(--abyss);
  background: var(--signal);
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 2px;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(244, 183, 64, 0.28); }
.nav-cta:focus-visible { outline: 2px solid var(--foam); outline-offset: 2px; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(3.5rem, 9vh, 6.5rem) clamp(4rem, 10vh, 7rem); }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.9rem, 6.2vw, 5.1rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 22px 0 0;
}
.hero h1 .tail { color: var(--signal); }
.hero p.lede {
  color: var(--slate);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  max-width: 46ch;
  margin-top: 22px;
}
.hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 34px; flex-wrap: wrap; }

.btn-primary {
  display: inline-block;
  background: var(--signal);
  color: var(--abyss);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: 2px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(244, 183, 64, 0.3); }
.btn-primary:focus-visible { outline: 2px solid var(--foam); outline-offset: 3px; }

.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--foam);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  padding: 14px 28px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-secondary:hover { transform: translateY(-1px); border-color: var(--signal); color: var(--signal); }
.btn-secondary:focus-visible { outline: 2px solid var(--foam); outline-offset: 3px; }

.link-quiet {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--slate);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.link-quiet:hover { color: var(--foam); border-color: var(--signal); }

/* ---------- sounding visual ---------- */
.sounding-vis { width: 100%; height: auto; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .ring { animation: ping 4.2s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; transform-origin: center; }
  .ring.r2 { animation-delay: 1.4s; }
  .ring.r3 { animation-delay: 2.8s; }
  .found-halo { animation: glow 3.4s ease-in-out infinite; transform-origin: center; }
}
@keyframes ping {
  0%   { r: 4; opacity: 0.6; }
  75%  { opacity: 0; }
  100% { r: 230; opacity: 0; }
}
@keyframes glow {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 0.45; }
}

/* ---------- generic section ---------- */
.section { padding-block: clamp(4.5rem, 11vh, 8rem); border-top: 1px solid var(--line); scroll-margin-top: 70px; }
.section h2 {
  font-size: clamp(1.85rem, 3.6vw, 2.9rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 20px 0 0;
  max-width: 18ch;
}
.section p.body {
  color: var(--slate);
  font-size: 1.08rem;
  max-width: 58ch;
  margin-top: 22px;
}

/* pricing closing note */
.price-note { margin-top: 34px; font-size: 1.02rem; }
.price-note a {
  color: var(--foam);
  text-decoration: none;
  border-bottom: 1px solid var(--signal);
  padding-bottom: 1px;
  transition: color 0.15s ease;
}
.price-note a:hover { color: var(--signal); }

/* ---------- sounding steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 46px;
  background: var(--line);
  border: 1px solid var(--line);
}
.step { background: var(--deep); padding: 28px 22px 32px; }
.step .n {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  color: var(--signal);
  letter-spacing: 0.12em;
}
.step h3 { font-size: 1.28rem; font-weight: 600; margin-top: 16px; letter-spacing: -0.01em; }
.step p { color: var(--slate); font-size: 0.98rem; margin-top: 10px; }

/* ---------- explainer video ---------- */
.explainer { margin: 48px 0 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.video-frame {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 9;
  background: var(--deep);
  border-radius: 4px;
  overflow: hidden;
}
.explainer-video { width: 100%; height: 100%; display: block; object-fit: cover; background: var(--deep); }
.video-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: radial-gradient(circle at center, rgba(10, 17, 30, 0.12), rgba(10, 17, 30, 0.46));
  transition: background 0.2s ease;
}
.video-play:hover { background: radial-gradient(circle at center, rgba(10, 17, 30, 0.02), rgba(10, 17, 30, 0.34)); }
.video-play:focus-visible { outline: 2px solid var(--foam); outline-offset: -4px; }
.video-play .disc {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--signal);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(244, 183, 64, 0.35);
  transition: transform 0.15s ease;
}
.video-play:hover .disc { transform: scale(1.06); }
.video-play .disc svg { width: 24px; height: 24px; margin-left: 3px; display: block; }
.explainer figcaption {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--slate-dim);
}
.video-frame.is-playing .video-play { display: none; }

/* ---------- privacy tiers ---------- */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 46px;
  background: var(--line);
  border: 1px solid var(--line);
}
.tier { background: var(--deep); padding: 28px 24px 32px; }
.tier .lock {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.tier .lock svg { width: 13px; height: 13px; flex: none; }
.tier h3 { font-size: 1.24rem; font-weight: 600; margin-top: 16px; letter-spacing: -0.01em; }
.tier p { color: var(--slate); font-size: 0.98rem; margin-top: 10px; }
.privacy-note { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.privacy-note strong { color: var(--foam); font-weight: 600; }

/* step diagrams: slate is the field, gold is the signal, as in the hero */
/* h3 carries its own 16px top margin, so this only needs to clear the number */
.step-vis { display: block; width: 112px; max-width: 100%; height: auto; margin: 16px 0 2px; }

/* ---------- string of pearls ---------- */
/* The programme animation is portrait (1024x1280). Held to 440px so it sits
   as a column in the page rather than towering over the copy either side. */
.video-frame.portrait { max-width: 440px; aspect-ratio: 4 / 5; }
.sop-note { color: var(--slate); font-size: 1.02rem; max-width: 62ch; margin-top: 34px; }
.sop-note + .sop-note { margin-top: 16px; }
.sop-note b { color: var(--foam); font-weight: 500; }

/* tier cards reused without the padlock kicker */
.tier .kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
}

/* ---------- differentiation split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 46px; background: var(--line); border: 1px solid var(--line); }
.split-cell { background: var(--deep); padding: 32px 30px; }
.split-cell.alt { background: var(--panel); }
.split-cell .tag { font-family: 'IBM Plex Mono', monospace; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate-dim); }
.split-cell.alt .tag { color: var(--signal); }
.split-cell .line { font-size: 1.32rem; font-weight: 500; margin-top: 14px; line-height: 1.3; letter-spacing: -0.01em; }
.split-cell p { color: var(--slate); font-size: 0.98rem; margin-top: 12px; }

/* ---------- who it's for ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.tag-pill {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--foam);
  border: 1px solid var(--line-strong);
  padding: 9px 16px;
  border-radius: 2px;
}

/* ---------- booking embed ---------- */
/* The Google appointment scheduler is a cross-origin iframe: light-only, with
   no theming hooks of any kind. Rather than let a white rectangle collide with
   the dark section, the card below leans into it — a paper panel inset into the
   page, held by a signal-gold rule so it still reads as ours. Before the frame
   loads the card stays dark and on-brand, and the placeholder inside it is the
   same height as the frame, so the swap costs no layout shift. */
.book-card {
  margin-top: 40px;
  width: 100%;
  max-width: 940px;
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--signal);
  border-radius: 2px;
  background: var(--panel);
  padding: 10px;
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.book-card.is-loaded {
  background: #FFFFFF;
  border-color: rgba(10, 17, 30, 0.12);
  border-top-color: var(--signal);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
}
.book-placeholder[hidden],
.book-frame[hidden] { display: none; }
.book-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 880px;
  padding: 0 24px;
}
.book-placeholder p {
  margin: 0;
  max-width: 46ch;
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--slate-dim);
}
.book-placeholder a { color: var(--slate); text-decoration: none; border-bottom: 1px solid var(--signal); }
.book-placeholder a:hover { color: var(--signal); }
.book-frame {
  display: block;
  width: 100%;
  height: 880px;
  border: 0;
}
.book-fallback {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--slate);
  margin-top: 18px;
}
.book-fallback a { color: var(--foam); text-decoration: none; border-bottom: 1px solid var(--signal); padding-bottom: 1px; }
.book-fallback a:hover { color: var(--signal); }
@media (max-width: 520px) {
  .book-card { padding: 6px; }
  .book-placeholder,
  .book-frame { height: 820px; }
}

/* ---------- final cta ---------- */
.cta-band { padding-block: clamp(5rem, 13vh, 9rem); border-top: 1px solid var(--line); text-align: center; }
.cta-band h2 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
.cta-band h2 .tail { color: var(--signal); }
.cta-band .actions { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.cta-band .cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.cta-band .sub { color: var(--slate); font-family: 'IBM Plex Mono', monospace; font-size: 0.82rem; letter-spacing: 0.05em; }
.cta-band .sub a { color: var(--slate); border-bottom: 1px solid var(--line-strong); text-decoration: none; padding-bottom: 1px; }
.cta-band .sub a:hover { color: var(--foam); border-color: var(--signal); }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); padding-block: 40px; }
.foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.foot .left { display: flex; align-items: center; gap: 10px; }
.foot .tagline { font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; color: var(--slate-dim); letter-spacing: 0.06em; }
.foot .links { display: flex; gap: 22px; font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; }
.foot .links a { color: var(--slate); text-decoration: none; letter-spacing: 0.05em; }
.foot .links a:hover { color: var(--signal); }
.foot .links { align-items: center; }
.foot .links .social { display: inline-flex; align-items: center; }
.foot .links .social svg { width: 16px; height: 16px; display: block; }
.foot .copy { font-family: 'IBM Plex Mono', monospace; font-size: 0.74rem; color: var(--slate-dim); width: 100%; padding-top: 8px; letter-spacing: 0.05em; }
.foot .copy a { color: var(--slate); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; transition: color 0.15s ease, border-color 0.15s ease; }
.foot .copy a:hover { color: var(--signal); border-color: var(--signal); }
.foot .legal { font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; color: var(--slate-dim); width: 100%; margin-top: -12px; letter-spacing: 0.05em; opacity: 0.85; }

/* ---------- reveal on scroll (progressive enhancement) ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-vis-col { order: -1; max-width: 420px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .section h2 { max-width: none; }
}
/* The quiet links collapse to just "Book a demo" once they no longer fit on one
   line. That happens at 880px rather than 760px since Objectives joined them:
   five links plus the CTA overflow the row before then, and a flex row that runs
   out of space wraps the link text instead of hiding anything, which leaves the
   header two lines deep and the first link up against the wordmark. Same
   breakpoint as the grid restacking above, so the header and the page below it
   change shape together. */
@media (max-width: 880px) {
  .nav-right .link-quiet:not(.nav-demo) { display: none; }
}
@media (max-width: 520px) {
  .wrap { padding: 0 20px; }
  .nav-right { gap: 14px; }
  .nav-cta { padding: 8px 13px; font-size: 0.72rem; }
  .hero-actions { gap: 16px; }
  .steps { grid-template-columns: 1fr; }
}

/* ---------- subpage header ---------- */
/* A page opens where a section would have sat, so it carries the same depth
   marker and the same measure, with room above for the ascent back to the site. */
.page-head { padding-block: clamp(3rem, 7vh, 4.5rem) clamp(2.5rem, 6vh, 4rem); }
.back-link {
  display: block;
  width: fit-content;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--slate-dim);
  text-decoration: none;
  margin-bottom: 26px;
  transition: color 0.15s ease;
}
.back-link::before { content: '↑ '; }
.back-link:hover { color: var(--foam); }
.page-head h1 {
  font-size: clamp(2.4rem, 5vw, 3.9rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-top: 20px;
  max-width: 16ch;
}
.page-head p.lede {
  color: var(--slate);
  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  max-width: 56ch;
  margin-top: 22px;
}
.page-section { padding-block: clamp(3rem, 8vh, 5rem); border-top: 1px solid var(--line); }