/* Vocara - agency site (Vocara is a trading name of Startup Growth Ltd)
   Brand source: Start-Up Growth Brand Guidelines 2024/25 (Drive).
   Primary navy, secondary slate, accent coral, highlight cyan, neutral white.
   Lato for headings, Open Sans for body at 18px.

   Contrast notes: cyan (#00c4cc) fails on white as text, so it is decorative only.
   Coral buttons use 18px bold text, which qualifies as large text (3:1). */

:root {
  --navy: #0d2e49;
  --navy-deep: #091e30;
  --slate: #758689;
  --slate-text: #56666a;   /* slate darkened for body-size text on white */
  --coral: #e1653d;
  --coral-dark: #c4502b;
  --cyan: #00c4cc;
  --cyan-wash: #e0f7f8;
  --white: #ffffff;
  --panel: #eef0f0;        /* the grey panel from the guidelines */
  --rule: #0d2e49;
  --ink: #1b2a36;
  --max: 1100px;
  --radius: 10px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 76px; }

body {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .wordmark, .eyebrow, .btn {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
}

h1, h2, h3 { color: var(--navy); line-height: 1.15; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); letter-spacing: -0.005em; }
h3 { font-size: 1.2rem; }

p { max-width: 62ch; }
p + p { margin-top: 1em; }

a { color: var(--navy); }

img { max-width: 100%; display: block; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---- Navigation ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(13, 46, 73, 0.12);
}
.nav .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; gap: 16px;
}
.wordmark {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.05rem; color: var(--navy);
  text-decoration: none; letter-spacing: 0.02em; white-space: nowrap;
}
.wordmark svg { width: 34px; height: 22px; flex: none; }
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav-links a {
  color: var(--slate-text); text-decoration: none;
  font-size: 0.95rem; font-weight: 600;
}
.nav-links a:hover { color: var(--navy); }
.nav-links .btn { color: var(--white); }

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  background: var(--coral); color: var(--white);
  font-size: 18px; font-weight: 700;
  padding: 14px 26px; border-radius: 6px;
  text-decoration: none; border: 0; cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.btn:hover { background: var(--coral-dark); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.btn-sm { font-size: 18px; padding: 10px 18px; }
.cta { margin-top: 36px; }
.cta .micro { margin-top: 10px; font-size: 0.92rem; color: var(--slate-text); }

/* ---- Sections ---- */
.section { padding: 96px 0; }
.section.alt { background: var(--panel); }

/* The framed label echoes the ruled title bands in the brand guidelines */
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--slate-text);
  margin-bottom: 22px;
}
.eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--rule); opacity: 0.35; }

.lead { font-size: 1.15rem; color: var(--slate-text); margin-top: 20px; }
.lead-answer { font-size: 1.35rem; font-weight: 700; color: var(--navy); margin-top: 14px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }

/* ---- 1. Hero ---- */
.hero { padding: 88px 0 96px; }
.hero h1 { max-width: 16ch; }
.hero .lead { max-width: 44ch; }

/* Calendar animation: prospecting blocks become qualified meetings */
.week {
  background: var(--white);
  border: 1px solid rgba(13, 46, 73, 0.14);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px -24px rgba(13, 46, 73, 0.35);
  padding: 18px;
}
.week-head {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  font-family: 'Lato', sans-serif; font-size: 0.78rem; font-weight: 700;
  color: var(--slate-text); text-transform: uppercase; letter-spacing: 0.08em;
  text-align: center; padding-bottom: 12px;
  border-bottom: 1px solid rgba(13, 46, 73, 0.1); margin-bottom: 12px;
}
.week-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.day { display: grid; gap: 8px; align-content: start; }
.slot {
  position: relative; height: 54px; border-radius: 6px; overflow: hidden;
  font-size: 0.72rem; line-height: 1.2; font-weight: 600;
}
.slot span {
  position: absolute; inset: 0; display: flex; align-items: center;
  padding: 0 8px;
  animation: 12s ease-in-out infinite both;
}
.slot .was {
  background: #f1f3f3; color: #5f6e71;
  border-left: 3px solid #c6cfd1;
  animation-name: fadeOut;
}
.slot .now {
  background: var(--navy); color: var(--white);
  border-left: 3px solid var(--coral);
  animation-name: fadeIn;
}
.slot.tall { height: 76px; }
.day:nth-child(1) .slot:nth-child(1) span { animation-delay: 0.00s; }
.day:nth-child(2) .slot:nth-child(1) span { animation-delay: 0.47s; }
.day:nth-child(3) .slot:nth-child(1) span { animation-delay: 0.93s; }
.day:nth-child(4) .slot:nth-child(1) span { animation-delay: 1.40s; }
.day:nth-child(5) .slot:nth-child(1) span { animation-delay: 1.87s; }
.day:nth-child(1) .slot:nth-child(2) span { animation-delay: 2.33s; }
.day:nth-child(2) .slot:nth-child(2) span { animation-delay: 2.80s; }
.day:nth-child(3) .slot:nth-child(2) span { animation-delay: 3.27s; }
.day:nth-child(4) .slot:nth-child(2) span { animation-delay: 3.73s; }
.day:nth-child(5) .slot:nth-child(2) span { animation-delay: 4.20s; }
.day:nth-child(1) .slot:nth-child(3) span { animation-delay: 4.67s; }
.day:nth-child(2) .slot:nth-child(3) span { animation-delay: 5.13s; }
.day:nth-child(3) .slot:nth-child(3) span { animation-delay: 5.60s; }
.day:nth-child(4) .slot:nth-child(3) span { animation-delay: 6.07s; }
.day:nth-child(5) .slot:nth-child(3) span { animation-delay: 6.53s; }

@keyframes fadeIn {
  0%, 12% { opacity: 0; }
  20%, 82% { opacity: 1; }
  92%, 100% { opacity: 0; }
}
@keyframes fadeOut {
  0%, 12% { opacity: 1; }
  20%, 82% { opacity: 0; }
  92%, 100% { opacity: 1; }
}

/* ---- 2. Qualified meeting ---- */
.criteria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.criterion {
  background: var(--white);
  border: 1px solid rgba(13, 46, 73, 0.12);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius); padding: 26px 24px;
}
.criterion .n {
  font-family: 'Lato', sans-serif; font-weight: 900; font-size: 0.85rem;
  color: var(--coral); letter-spacing: 0.1em;
}
.criterion h3 { margin: 8px 0 8px; }
.criterion p { font-size: 1rem; color: var(--slate-text); }

.meeting-row { margin-top: 56px; }
.meeting-card {
  background: var(--white);
  border: 1px solid rgba(13, 46, 73, 0.14);
  border-left: 4px solid var(--coral);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px -26px rgba(13, 46, 73, 0.4);
  padding: 24px; max-width: 460px;
}
.meeting-card .when {
  font-family: 'Lato', sans-serif; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate-text);
}
.meeting-card .title { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--navy); margin: 4px 0 16px; }
.attach { display: grid; gap: 10px; }
.chip {
  display: flex; align-items: center; gap: 12px;
  background: #f5f7f7; border-radius: 8px; padding: 12px 14px;
  font-size: 0.95rem; font-weight: 600; color: var(--navy);
}
.chip svg { width: 20px; height: 20px; flex: none; }
/* The text takes the chip's full width from the start: sized to its content, the example meeting's summary typed into
   a narrow column and spilled out of the box until it grew wide enough (Alec, 26 Sep 2026) */
.chip > div { flex: 1 1 auto; min-width: 0; }
.chip small { display: block; font-weight: 400; color: var(--slate-text); font-size: 0.82rem; }
.ticks { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.tick {
  font-size: 0.75rem; font-weight: 700; color: var(--navy);
  background: var(--cyan-wash); border-radius: 20px; padding: 2px 10px;
}

/* ---- 3. Agents around the conversation ---- */
.orbit {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 18px; align-items: center;
}
.task {
  background: var(--white);
  border: 1px solid rgba(13, 46, 73, 0.12);
  border-radius: 8px; padding: 12px 14px;
  font-size: 0.92rem; font-weight: 600; color: var(--navy);
  display: flex; align-items: center; gap: 10px;
  animation: pulse 7.5s ease-in-out infinite both;
}
.task::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--slate); flex: none;
}
.t1 { grid-column: 1; grid-row: 1; animation-delay: 0s; }
.t2 { grid-column: 3; grid-row: 1; animation-delay: 1.5s; }
.t3 { grid-column: 1; grid-row: 2; animation-delay: 3s; }
.t4 { grid-column: 3; grid-row: 2; animation-delay: 4.5s; }
.t5 { grid-column: 2; grid-row: 3; animation-delay: 6s; justify-self: center; }
.person {
  grid-column: 2; grid-row: 1 / span 2;
  background: var(--navy); color: var(--white);
  border-radius: 50%; aspect-ratio: 1; width: 100%; max-width: 230px; justify-self: center;
  display: grid; place-items: center; text-align: center; padding: 22px;
  box-shadow: 0 0 0 10px var(--cyan-wash);
}
.person svg { display: block; width: 38px; height: 38px; margin: 0 auto 8px; }
.person span { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 1rem; line-height: 1.3; }
/* Radial orbit (2026-09-21): the agent tasks surround the person on every screen size */
.orbit { position: relative; display: block; width: 100%; max-width: 470px; aspect-ratio: 1; margin: 0 auto; }
.orbit::before { content: ''; position: absolute; inset: 15%; border: 2px dashed rgba(13,46,73,0.16); border-radius: 50%; }
.orbit .person { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 42%; max-width: none; padding: 14px; }
.orbit .task { position: absolute; transform: translate(-50%, -50%); width: 32%; justify-content: center; text-align: center; padding: 9px 8px; font-size: 0.86rem; line-height: 1.25; }
.orbit .task::before { display: none; }
.orbit .t1 { left: 50%; top: 15%; }
.orbit .t2 { left: 83.3%; top: 39.2%; }
.orbit .t3 { left: 70.6%; top: 78.3%; }
.orbit .t4 { left: 29.4%; top: 78.3%; }
.orbit .t5 { left: 16.7%; top: 39.2%; }
@keyframes pulse {
  0%, 16%, 100% { border-color: rgba(13, 46, 73, 0.12); box-shadow: none; }
  6%, 10% { border-color: var(--cyan); box-shadow: 0 0 0 4px var(--cyan-wash); }
}

.video-slot {
  margin-top: 40px; aspect-ratio: 16 / 9; max-width: 720px;
  background: var(--navy); border-radius: var(--radius);
  display: grid; place-items: center; color: rgba(255,255,255,0.75);
  font-size: 0.95rem; text-align: center; padding: 24px;
}
.video-slot svg { display: block; width: 56px; height: 56px; margin: 0 auto 12px; }

/* ---- 4. The objection ---- */
.quote-head { font-style: normal; }
.quote-head::before { content: '\201C'; color: var(--coral); }
.quote-head::after { content: '\201D'; color: var(--coral); }
.concede { font-family: 'Lato', sans-serif; font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 700; color: var(--navy); margin-top: 18px; }

.calc-slot {
  margin-top: 40px;
  border: 2px dashed rgba(13, 46, 73, 0.25);
  border-radius: var(--radius);
  padding: 36px 28px; background: var(--white);
}
.calc-slot .label {
  font-family: 'Lato', sans-serif; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral);
}
.calc-slot p { margin-top: 8px; color: var(--slate-text); font-size: 1rem; }
.bars { display: flex; align-items: flex-end; gap: 36px; height: 200px; margin-top: 26px; padding-left: 4px; }
.bar { width: 90px; display: flex; flex-direction: column-reverse; border-radius: 6px 6px 0 0; overflow: hidden; }
.bar i { display: block; font-style: normal; }
.bar.ours { height: 44%; background: var(--navy); }
.bar.theirs i:nth-child(1) { height: 42%; background: #9aa7aa; }
.bar.theirs i:nth-child(2) { height: 12%; background: #b3bec0; }
.bar.theirs i:nth-child(3) { height: 16%; background: #c6cfd1; }
.bar.theirs i:nth-child(4) { height: 14%; background: #d7dddf; }
.bar.theirs i:nth-child(5) { height: 16%; background: #e3e8e9; }
.bar.theirs { height: 100%; }
.bar-labels { display: flex; gap: 36px; margin-top: 10px; font-size: 0.85rem; font-weight: 600; color: var(--navy); }
.bar-labels span { width: 90px; text-align: center; }

.choose { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
.choice { border-radius: var(--radius); padding: 26px 24px; background: var(--white); border: 1px solid rgba(13, 46, 73, 0.12); }
.choice.us { border-top: 3px solid var(--coral); }
.choice.them { border-top: 3px solid var(--slate); }
.choice h3 { margin-bottom: 8px; }
.choice p { font-size: 1rem; color: var(--slate-text); }
.both { margin-top: 22px; font-style: italic; color: var(--slate-text); }

/* ---- 6. Phases ---- */
.phases { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 52px; }
.phase { position: relative; padding: 0 22px 0 0; }
.phase .step {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.phase .dot {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--navy); color: var(--white);
  display: grid; place-items: center;
  font-family: 'Lato', sans-serif; font-weight: 900; font-size: 1rem;
  position: relative; z-index: 2;
}
.phase .line { flex: 1; height: 2px; background: rgba(13, 46, 73, 0.2); }
.phase:last-child .line { display: none; }
.phase h3 { font-size: 1.08rem; margin-bottom: 8px; }
.phase p { font-size: 0.97rem; color: var(--slate-text); }
.signoff {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; margin-right: 6px;
  font-size: 0.78rem; font-weight: 700; color: var(--coral-dark);
  background: #fdeee8; border-radius: 20px; padding: 3px 10px;
}
.signoff svg { width: 13px; height: 13px; }
.warming-band {
  margin-top: 26px;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.warming-band div {
  grid-column: 2 / span 2;
  background: repeating-linear-gradient(-45deg, var(--cyan-wash), var(--cyan-wash) 10px, #d0f1f2 10px, #d0f1f2 20px);
  border-radius: 6px; padding: 8px 14px;
  font-size: 0.85rem; font-weight: 700; color: var(--navy); text-align: center;
}
.after-phases { margin-top: 40px; }

/* ---- Footer ---- */
.footer { background: var(--navy); color: rgba(255, 255, 255, 0.78); padding: 56px 0 40px; font-size: 0.92rem; }
.footer .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer .wordmark { color: var(--white); }
.footer a { color: rgba(255, 255, 255, 0.85); }
.footer .legal { margin-top: 10px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); }

/* ---- Reveal on scroll (no-JS: everything visible) ---- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* ---- Tablet ---- */
@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; gap: 44px; }
  .criteria { grid-template-columns: 1fr; }
  .choose { grid-template-columns: 1fr; }
  .phases { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .phase .line { display: none; }
  .warming-band { grid-template-columns: 1fr; }
  .warming-band div { grid-column: 1; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  body { font-size: 17px; }
  .section { padding: 68px 0; }
  .hero { padding: 48px 0 64px; }
  .wrap { padding: 0 20px; }
  .nav-links li:not(:last-child) { display: none; }
  .btn { display: block; text-align: center; }
  .nav-links .btn { display: inline-block; white-space: nowrap; padding: 9px 14px; font-size: 15px; background: var(--navy); }
  .nav-links .btn:hover { background: var(--navy-deep); }
  .wordmark { font-size: 0.95rem; gap: 8px; }
  .wordmark svg { width: 28px; height: 18px; }
  .week { padding: 12px; }
  .week-grid, .week-head { gap: 5px; }
  .slot { font-size: 0.62rem; height: 48px; }
  .slot span { padding: 0 5px; }
  .phases { grid-template-columns: 1fr; }
  .bars, .bar-labels { gap: 22px; }
}

/* ---- Respect reduced motion: show the end state, no animation ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slot .was { animation: none; opacity: 0; }
  .slot .now { animation: none; opacity: 1; }
  .task { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ================================================================
   Added 2026-09-21: calculators, hide-on-scroll header, gentle snap
   ================================================================ */

/* Header slides away on scroll down, returns on scroll up */
.nav { transition: transform 0.28s ease; }
.nav.hidden { transform: translateY(-100%); }

/* Gentle snap on large screens only. Proximity, not mandatory, so tall sections
   (the calculators) still scroll freely. Phones scroll normally. */
@media (min-width: 961px) and (min-height: 700px) {
  html { scroll-snap-type: y proximity; scroll-padding-top: 0; }
  .hero, .section { scroll-snap-align: start; }
  .section { padding: 52px 0; }
  .section .eyebrow { margin-bottom: 14px; }
  .section .lead { margin-top: 12px; }
  .section .cta { margin-top: 24px; }
  .criteria-list { margin-top: 18px; gap: 10px; }
  .criteria-list li { padding: 11px 14px; }
  .after-criteria { margin-top: 16px; }
  .phases { margin-top: 36px; }
  .warming-band { margin-top: 16px; }
  .after-phases { margin-top: 22px; }
  .calc { margin-top: 22px; }
  .hero { min-height: calc(100vh - 68px); display: flex; align-items: center; padding: 56px 0; }
  .hero > .wrap { width: 100%; }
}

/* Section 2, compact: criteria as a list beside the meeting card */
.criteria-list { list-style: none; margin-top: 28px; display: grid; gap: 14px; }
.criteria-list li {
  display: grid; grid-template-columns: 44px 1fr; gap: 4px 14px; align-items: start;
  background: var(--white); border: 1px solid rgba(13,46,73,0.12); border-left: 3px solid var(--navy);
  border-radius: 8px; padding: 14px 16px;
}
.criteria-list .n { font-family: 'Lato', sans-serif; font-weight: 900; color: var(--coral); font-size: 0.9rem; padding-top: 2px; }
.criteria-list strong { font-family: 'Lato', sans-serif; color: var(--navy); font-size: 1.05rem; display: block; }
.criteria-list span { color: var(--slate-text); font-size: 0.97rem; }
.after-criteria { margin-top: 22px; }

/* Section 3: video sits under the diagram */
.how-visual { display: grid; gap: 28px; }
.how-visual .video-slot { margin-top: 0; max-width: none; }

/* ---- Shared calculator styles ---- */
.calc {
  margin-top: 32px; background: var(--white);
  border: 1px solid rgba(13,46,73,0.14); border-radius: var(--radius);
  box-shadow: 0 18px 50px -30px rgba(13,46,73,0.35);
  padding: 28px;
}
.field { display: grid; gap: 6px; }
.field label, .field .field-label { font-family: 'Lato', sans-serif; font-weight: 700; color: var(--navy); font-size: 0.95rem; }
/* Currency switch (js/currency.js): a normal field select; its own label is for screen readers only */
[data-currency-picker], .field .cur-pick { display: block; font-weight: 400; }
.hv-inputs .field.cur-field { width: 100px; }
.cur-inline { white-space: nowrap; }
.cur-inline [data-currency-picker], .cur-inline .cur-pick { display: inline-block; }
.cur-inline select { font: inherit; color: var(--navy); border: 1px solid rgba(13,46,73,0.25); border-radius: 6px; padding: 2px 6px; background: var(--white); cursor: pointer; }
.hv-inputs .cur-pick select { height: 44px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
.field .cur-pick select { width: 100%; }
.cur-pick .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.field input, .field select {
  font: inherit; font-size: 1rem; color: var(--ink);
  border: 1px solid rgba(13,46,73,0.25); border-radius: 6px; padding: 10px 12px; background: var(--white);
  width: 100%;
}
.field input:focus, .field select:focus { outline: 3px solid var(--cyan-wash); border-color: var(--navy); }
.field .hint { font-size: 0.8rem; color: var(--slate-text); }
.typical { font-size: 0.85rem; color: var(--slate-text); margin-bottom: 16px; }

.stepper { display: flex; align-items: stretch; max-width: 220px; }
.stepper button {
  width: 46px; border: 1px solid rgba(13,46,73,0.25); background: var(--panel);
  font-size: 1.3rem; font-weight: 700; color: var(--navy); cursor: pointer;
}
.stepper button:first-child { border-radius: 6px 0 0 6px; }
.stepper button:last-child { border-radius: 0 6px 6px 0; }
.stepper input { border-radius: 0; text-align: center; font-weight: 700; font-size: 1.15rem; border-left: 0; border-right: 0; }

details.more { margin-top: 16px; }
details.more summary { cursor: pointer; color: var(--navy); font-weight: 600; font-size: 0.95rem; }
details.more .more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }

/* Section 4 bars */
.cmp { margin-top: 24px; display: grid; gap: 18px; }
.cmp-row .who { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 0.95rem; margin-bottom: 6px; }
.cmp-row .who strong { font-family: 'Lato', sans-serif; color: var(--navy); }
.cmp-row .who span { color: var(--slate-text); }
.track { height: 30px; background: #f1f3f3; border-radius: 6px; overflow: hidden; display: flex; }
.track i { display: block; height: 100%; transition: width 0.5s ease; }
.track .us { background: var(--navy); }
/* In-house greys, widely spaced (Darren, 7 Oct 2026: the old close greys were hard to tell apart), with a white gap
   between segments so neighbours never blur together. */
.seg-1 { background: #3f4b4e; } .seg-2 { background: #66777a; } .seg-3 { background: #8d9c9f; }
.seg-4 { background: #b4bfc1; } .seg-5 { background: #d6dddf; }
.track i[class^="seg-"] + i { box-shadow: inset 2px 0 0 #fff; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.8rem; color: var(--slate-text); margin-top: 4px; }
.legend b { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.verdict {
  margin-top: 22px; padding: 16px 18px; border-radius: 8px; background: var(--cyan-wash);
  color: var(--navy); font-weight: 600;
}
.verdict.low { background: #fdf1ec; }
.fine { margin-top: 14px; font-size: 0.8rem; color: var(--slate-text); max-width: 80ch; }
.fine a { color: var(--slate-text); }
.rows { width: 100%; border-collapse: collapse; margin-top: 26px; font-size: 0.95rem; }
.rows th, .rows td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(13,46,73,0.1); vertical-align: top; }
.rows th { font-family: 'Lato', sans-serif; color: var(--navy); font-size: 0.85rem; }
.rows td:first-child { color: var(--slate-text); width: 34%; }
.rows td:last-child { color: var(--navy); font-weight: 600; }

/* Section 5 */
.price-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: start; }
.inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.price-card { background: var(--navy); color: var(--white); border-radius: var(--radius); padding: 26px; }
.price-card .big { font-family: 'Lato', sans-serif; font-weight: 900; font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1; }
.price-card .per { font-size: 1rem; color: rgba(255,255,255,0.8); margin-top: 6px; }
.price-card .from { font-size: 0.85rem; color: rgba(255,255,255,0.65); margin-top: 4px; }
.price-card ul { list-style: none; margin-top: 20px; display: grid; gap: 10px; font-size: 0.95rem; color: rgba(255,255,255,0.9); }
.price-card li { padding-left: 18px; position: relative; }
.price-card li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
.warn { margin-top: 16px; background: #fdf1ec; color: var(--coral-dark); border-radius: 8px; padding: 12px 14px; font-size: 0.92rem; font-weight: 600; }
.warn[hidden] { display: none; }

.gated { margin-top: 26px; position: relative; }
.gated-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; filter: blur(5px); user-select: none; pointer-events: none; }
.tile { background: var(--white); border: 1px solid rgba(13,46,73,0.12); border-radius: 8px; padding: 18px; min-height: 130px; }
.tile .t { font-family: 'Lato', sans-serif; font-weight: 700; color: var(--navy); margin-bottom: 12px; }
.tile .shape { height: 10px; border-radius: 5px; background: #d9e0e2; margin-top: 10px; }
.tile .shape.w1 { width: 80%; } .tile .shape.w2 { width: 55%; } .tile .shape.w3 { width: 68%; }
.tile .bars-mini { display: flex; align-items: flex-end; gap: 6px; height: 60px; }
.tile .bars-mini i { flex: 1; background: #c9d3d5; border-radius: 3px 3px 0 0; }
.gate-form {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 16px;
}
.gate-form .box { background: var(--white); border-radius: var(--radius); box-shadow: 0 18px 50px -20px rgba(13,46,73,0.45); padding: 22px; max-width: 460px; width: 100%; }
.gate-form h3 { margin-bottom: 6px; }
.gate-form p { font-size: 0.92rem; color: var(--slate-text); margin: 0 auto 14px; }
.gate-form form { display: flex; gap: 8px; }
.gate-form input { flex: 1; min-width: 0; font: inherit; border: 1px solid rgba(13,46,73,0.25); border-radius: 6px; padding: 10px 12px; }
.gate-form .btn { font-size: 18px; padding: 10px 18px; white-space: nowrap; }
.gate-form .soon { margin-top: 10px; font-size: 0.8rem; color: var(--coral-dark); }

.calc-error { margin-top: 12px; color: var(--coral-dark); font-size: 0.9rem; }
.calc-error[hidden] { display: none; }
.loading { opacity: 0.55; transition: opacity 0.2s; }

@media (max-width: 960px) {
  .price-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .calc { padding: 20px; }
  .inputs, details.more .more-grid { grid-template-columns: 1fr; }
  .gated-tiles { grid-template-columns: 1fr; }
  .gated-tiles .tile:not(:first-child) { display: none; }
  .gate-form form { flex-direction: column; }
  .gate-form .btn { display: block; }
  .rows td:first-child { width: 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
  .track i { transition: none; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Skip link: off screen until a keyboard user tabs to it */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--navy); color: var(--white); font-weight: 700; padding: 10px 16px; border-radius: 6px; text-decoration: none; }
.skip-link:focus { top: 12px; }
#q-rev:focus { outline: none; }
/* Gate: tall enough to hold the form, disabled button reads as disabled */
.gated { min-height: 290px; }
.gated-tiles .tile { min-height: 290px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--coral); }
@media (max-width: 640px) { .gated, .gated-tiles .tile { min-height: 330px; } }
/* Comparison table stacks on phones */
@media (max-width: 640px) {
  .rows thead { display: none; }
  .rows tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid rgba(13,46,73,0.1); }
  .rows td { border: 0; padding: 0; width: auto !important; }
  .rows td:first-child { grid-column: 1 / -1; font-family: 'Lato', sans-serif; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
  .rows td[data-label]::before { content: attr(data-label); display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate-text); }
}

@media (max-width: 640px) {
  .orbit .task { font-size: 0.7rem; padding: 7px 5px; }
  .orbit .person span { font-size: 0.82rem; }
  .orbit .person svg { width: 28px; height: 28px; margin-bottom: 4px; }
}
/* End-of-section CTA row */
.section-cta { margin-top: 32px; }
/* Meeting card example */
.meeting-card .example { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--coral-dark); background: #fdeee8; border-radius: 12px; padding: 2px 8px; margin-left: 6px; vertical-align: 1px; }
.meeting-card .who-sub { font-size: 0.85rem; color: var(--slate-text); margin: -10px 0 14px; }
.chip p { font-weight: 400; font-size: 0.88rem; color: var(--slate-text); margin-top: 2px; }
.evidence { list-style: none; display: grid; gap: 6px; margin-top: 6px; }
.evidence li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; font-weight: 400; font-size: 0.86rem; color: var(--ink); }
.evidence li b { color: var(--navy); }
.evidence svg { width: 16px; height: 16px; margin-top: 3px; }
/* Section 4: wins picked out at a glance, in brand colours */
.badges { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.badge { font-size: 0.75rem; font-weight: 700; color: var(--navy); background: var(--cyan-wash); border: 1px solid #9fe3e6; border-radius: 12px; padding: 1px 9px; }
.badge::before { content: '\2713  '; color: #00969c; }
.stat { font-size: 0.92rem; color: var(--slate-text); margin-top: 6px; }
.stat b { color: var(--navy); }
/* Grid children default to min-width:auto and can stretch past the screen; stop that */
.split > *, .how-visual > * { min-width: 0; }

.meeting-card .booked-for { font-size: 0.82rem; color: var(--slate-text); font-style: italic; margin-top: 2px; }

/* Price reveal */
.reveal-label { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 1.1rem; color: rgba(255,255,255,0.85); margin-bottom: 16px; }
.btn-reveal { background: var(--coral); }
#q-after[hidden], #q-before[hidden] { display: none; }
.roadmap-lead { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 1.25rem; color: var(--navy); margin-top: 26px; }

/* In-house assumptions: tools already owned */
fieldset.have { border: 0; margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
fieldset.have legend { font-family: 'Lato', sans-serif; font-weight: 700; color: var(--navy); font-size: 0.95rem; margin-bottom: 4px; }
fieldset.have .hint { flex-basis: 100%; font-size: 0.8rem; color: var(--slate-text); margin: 0; }
fieldset.have label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.95rem; cursor: pointer; }
fieldset.have input { width: 18px; height: 18px; accent-color: var(--navy); }

/* Vocara mark (2026-09-22): three voice bars in the brand colours */
.wordmark .vc-mark { width: 26px; height: 26px; flex: none; }

/* The cover curve (2026-09-22, signed off). Drawing comes from js/cover-curve.js.
   Design feature, not a chart: it is never labelled and never carries figures.
   Default styling is for a white ground; add .on-navy on the brand navy. */
.vc-curve { display: block; width: 100%; height: auto; }
.vc-curve .vc-line { fill: none; stroke: var(--cyan); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.vc-curve .vc-zero { fill: none; stroke: rgba(13, 46, 73, 0.7); stroke-width: 1.5; }
.vc-curve .vc-fill-up { fill: rgba(0, 196, 204, 0.20); stroke: none; }
.vc-curve .vc-fill-down { fill: rgba(225, 101, 61, 0.20); stroke: none; }
.vc-curve circle { stroke: var(--white); stroke-width: 2; }
.vc-curve .vc-dot-up { fill: var(--cyan); }
.vc-curve .vc-dot-down { fill: var(--coral); }
.vc-curve .vc-dot-mid { fill: var(--slate); }
.vc-curve.on-navy .vc-zero { stroke: rgba(255, 255, 255, 0.45); }
.vc-curve.on-navy .vc-fill-up { fill: rgba(0, 196, 204, 0.22); }
.vc-curve.on-navy .vc-fill-down { fill: rgba(225, 101, 61, 0.46); }
.vc-curve.on-navy circle { stroke: var(--navy); stroke-width: 2.5; }
.vc-curve.on-navy .vc-dot-mid { fill: #9fb2b6; }

/* ================================================================
   Site v2 (2026-09-23): multi-page structure from the Version 4 spine.
   Everything below is additive. The proposal also loads this file and
   relies on .btn, .meeting-card, .chip, .evidence, .orbit, .signoff,
   so none of those rules are changed here, only used.
   ================================================================ */

/* ---- Menu: pinned on desktop, icon menu on mobile ---- */
.nav.v2 { transform: none !important; }
.nav.v2 .nav-links { gap: 26px; }
.nav.v2 .nav-links a[aria-current="page"] { color: var(--navy); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.btn-outline {
  display: inline-block; font-family: 'Lato', sans-serif; font-size: 16px; font-weight: 700;
  color: var(--navy); background: var(--white); border: 2px solid var(--navy);
  padding: 8px 16px; border-radius: 6px; text-decoration: none; white-space: nowrap;
}
.btn-outline:hover { background: var(--navy); color: var(--white); }
.nav.v2 .btn-sm { font-size: 16px; padding: 10px 16px; white-space: nowrap; }
.menu-toggle {
  display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
  align-items: center; justify-content: center; color: var(--navy);
}
.menu-toggle svg { width: 26px; height: 26px; }
.menu-panel { display: none; }
@media (max-width: 1020px) {
  .nav.v2 .nav-links { display: none; }
  .nav.v2 .btn-outline { display: none; }
  .menu-toggle { display: inline-flex; }
  .menu-panel {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--white); border-bottom: 1px solid rgba(13,46,73,0.12);
    box-shadow: 0 18px 30px -20px rgba(13,46,73,0.35);
    max-height: 0; overflow: hidden; transition: max-height 0.25s ease;
  }
  .nav.v2.open .menu-panel { max-height: 420px; }
  .menu-panel ul { list-style: none; padding: 8px 24px 20px; display: grid; gap: 4px; }
  .menu-panel a { display: block; padding: 12px 0; font-family: 'Lato', sans-serif; font-weight: 700; color: var(--navy); text-decoration: none; border-bottom: 1px solid rgba(13,46,73,0.08); }
  .menu-panel li:last-child a { border-bottom: 0; }
}
@media (max-width: 640px) {
  .nav.v2 .btn-sm { font-size: 14px; padding: 8px 12px; display: inline-block; }
}

/* ---- Hero actions ---- */
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; align-items: center; }
.hero-actions .btn-outline { font-size: 18px; padding: 12px 22px; }
@media (max-width: 640px) { .hero-actions .btn, .hero-actions .btn-outline { display: block; width: 100%; text-align: center; } }

/* ---- How Vocara works ---- */
.included { margin-top: 26px; background: var(--white); border: 1px solid rgba(13,46,73,0.12); border-radius: var(--radius); padding: 20px 22px; }
.included h3 { font-size: 1rem; margin-bottom: 10px; }
.included ul { list-style: none; display: grid; gap: 8px; }
.included li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 0.97rem; }
.included li svg { width: 18px; height: 18px; margin-top: 4px; }
.voice-line { margin-top: 18px; font-family: 'Lato', sans-serif; font-weight: 700; color: var(--navy); font-size: 1.1rem; }
.qm-block { margin-top: 72px; }
.qm-block h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }

/* Cycling example meetings */
.mc-stage { position: relative; }
.mc-stage .meeting-card { max-width: none; min-height: 520px; transition: opacity 0.45s ease; }
.mc-stage .meeting-card.fading { opacity: 0; }
.mc-stage .rec { display: block; height: 5px; border-radius: 3px; background: #f1d6cc; margin-top: 6px; overflow: hidden; width: 140px; }
.mc-stage .rec i { display: block; height: 100%; width: 100%; background: var(--coral); transition: width 1s linear; }
.mc-stage.animating .rec i.pending { width: 0; }
.mc-stage .evidence li { transition: opacity 0.3s ease; }
.mc-stage .evidence li.pending { opacity: 0; }
.mc-stage .caret::after { content: ''; display: inline-block; width: 2px; height: 1em; background: var(--navy); margin-left: 2px; vertical-align: -2px; animation: blink 0.9s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.mc-dots { display: flex; justify-content: center; margin-top: 10px; }
/* 24px tap target (WCAG 2.2), the dot itself drawn at 12px */
.mc-dots button { width: 24px; height: 24px; border: 0; background: transparent; cursor: pointer; padding: 0; display: grid; place-items: center; }
.mc-dots button::before { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--navy); box-sizing: border-box; }
.mc-dots button[aria-pressed="true"]::before { background: var(--navy); }
@media (max-width: 640px) { .mc-stage .meeting-card { min-height: 600px; } }

/* ---- Hiring teaser ---- */
.teaser { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.teaser ul { margin-top: 18px; padding-left: 1.2em; color: var(--slate-text); display: grid; gap: 6px; }
.saving {
  background: var(--navy); color: var(--white); border-radius: var(--radius); padding: 28px;
  font-family: 'Lato', sans-serif; font-size: 1.35rem; font-weight: 700; line-height: 1.35;
}
.saving b { color: var(--cyan); font-weight: 900; }
.saving .btn { margin-top: 20px; }
@media (max-width: 960px) { .teaser { grid-template-columns: 1fr; gap: 28px; } }

/* ---- Onboarding chart ---- */
.ob { margin-top: 36px; background: var(--white); border: 1px solid rgba(13,46,73,0.12); border-radius: var(--radius); padding: 22px; }
.ob-row { display: grid; grid-template-columns: 290px 1fr; gap: 18px; align-items: center; padding: 12px 0; border-top: 1px solid rgba(13,46,73,0.08); }
.ob-row.scale { border-top: 0; padding-top: 0; }
.ob-name b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: var(--white); font-family: 'Lato', sans-serif; font-size: 0.8rem; margin-right: 8px; }
.ob-name strong { font-family: 'Lato', sans-serif; color: var(--navy); }
.ob-name p { font-size: 0.86rem; color: var(--slate-text); margin-top: 4px; }
.ob-name .so { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 0.78rem; font-weight: 700; color: var(--coral-dark); }
.ob-name .so svg { width: 13px; height: 13px; }
.ob-track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); height: 30px; }
.ob-track .wk { font-family: 'Lato', sans-serif; font-size: 0.78rem; font-weight: 700; color: var(--slate-text); text-transform: uppercase; letter-spacing: 0.06em; }
.ob-bar { grid-row: 1; border-radius: 6px; height: 22px; align-self: center; }
.ob-bar.p1 { background: var(--navy); }
.ob-bar.p2 { background: #3d5a73; }
.ob-bar.p3 { background: var(--cyan); }
.ob-bar.p4 { background: var(--coral); position: relative; }
.ob-bar.p4::after { content: ''; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); border: 8px solid transparent; border-left-color: var(--coral); }
.ob-tick {
  grid-row: 1; align-self: center; justify-self: end; margin-right: -12px; z-index: 2;
  width: 24px; height: 24px; border-radius: 50%; background: var(--white); border: 2px solid var(--coral-dark);
  display: grid; place-items: center;
}
.ob-tick.start { justify-self: start; margin-left: -12px; margin-right: 0; }
.ob-tick svg { width: 13px; height: 13px; stroke: var(--coral-dark); }
.ob-sessions { margin-top: 16px; font-size: 0.92rem; color: var(--navy); background: var(--cyan-wash); border-radius: 8px; padding: 12px 14px; }
.ob-key { margin-top: 10px; font-size: 0.82rem; color: var(--slate-text); display: flex; align-items: center; gap: 6px; }
.ob-key .ob-tick { display: inline-grid; margin: 0; width: 20px; height: 20px; }
@media (max-width: 860px) {
  .ob-row { grid-template-columns: 1fr; gap: 8px; }
  .ob-row.scale { display: none; }
  .ob-track { display: none; }
}

/* ---- Founder ---- */
.founder { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center; }
.founder img { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 8px var(--cyan-wash); }
.founder .text-link { display: inline-block; margin-top: 18px; font-family: 'Lato', sans-serif; font-weight: 700; color: var(--coral-dark); }
@media (max-width: 760px) { .founder { grid-template-columns: 1fr; gap: 24px; } .founder img { width: 160px; height: 160px; } }

/* ---- Closing band ---- */
.closing { background: var(--navy); color: var(--white); padding: 84px 0; text-align: center; }
.closing h2 { color: var(--white); }
.closing p { margin: 16px auto 0; color: rgba(255,255,255,0.82); }
.closing .hero-actions { justify-content: center; }
.closing .btn-outline { background: transparent; color: var(--white); border-color: var(--white); }
.closing .btn-outline:hover { background: var(--white); color: var(--navy); }

/* ---- Footer v2 ---- */
.footer.v2 .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.footer.v2 h2 { font-family: 'Lato', sans-serif; color: var(--white); font-size: 0.85rem; line-height: 1.65; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; }
.footer.v2 ul { list-style: none; display: grid; gap: 8px; }
.footer.v2 a { text-decoration: none; }
.footer.v2 a:hover { text-decoration: underline; }
.footer.v2 .tag { margin-top: 10px; max-width: 34ch; }
@media (max-width: 760px) { .footer.v2 .wrap { grid-template-columns: 1fr; } }

/* ---- Inner pages ---- */
.page-head { padding: 72px 0 12px; }
.page-head h1 { font-size: clamp(2rem, 4.4vw, 3rem); max-width: 22ch; }
.page-head .lead { max-width: 60ch; }
.section.tight { padding-top: 40px; }
.after-calc { margin-top: 28px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.after-calc .text-link, .text-link { font-family: 'Lato', sans-serif; font-weight: 700; color: var(--coral-dark); }
.email-box { margin-top: 28px; background: var(--panel); border-radius: var(--radius); padding: 22px; }
.email-box h3 { margin-bottom: 6px; }
.email-box p { font-size: 0.95rem; color: var(--slate-text); }
.email-box form { display: flex; gap: 8px; margin-top: 14px; max-width: 520px; }
.email-box input { flex: 1; min-width: 0; font: inherit; border: 1px solid rgba(13,46,73,0.25); border-radius: 6px; padding: 10px 12px; }
.email-box .soon { margin-top: 10px; font-size: 0.8rem; color: var(--coral-dark); }
@media (max-width: 640px) { .email-box form { flex-direction: column; } }

/* Forecast: free results */
.free-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; }
.free-tiles div { background: rgba(255,255,255,0.08); border-radius: 8px; padding: 12px 14px; }
.free-tiles small { display: block; font-size: 0.78rem; color: rgba(255,255,255,0.7); }
.free-tiles strong { font-family: 'Lato', sans-serif; font-size: 1.35rem; color: var(--white); }
.free-tiles .wide { grid-column: 1 / -1; }

/* About */
.timeline { list-style: none; margin-top: 28px; display: grid; gap: 22px; }
.timeline li { border-left: 3px solid var(--navy); padding-left: 18px; }
.timeline .when { font-size: 0.82rem; font-weight: 700; color: var(--slate-text); letter-spacing: 0.06em; text-transform: uppercase; }
.timeline h3 { margin: 2px 0 6px; }
.timeline p { color: var(--slate-text); font-size: 0.98rem; }
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
.quotes blockquote { background: var(--white); border: 1px solid rgba(13,46,73,0.12); border-left: 4px solid var(--coral); border-radius: var(--radius); padding: 20px; font-size: 1rem; }
.quotes cite { display: block; margin-top: 10px; font-style: normal; font-size: 0.85rem; color: var(--slate-text); }
@media (max-width: 760px) { .quotes { grid-template-columns: 1fr; } }

/* FAQ */
.faq-group { margin-top: 44px; }
.faq-group h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 8px; }
.faq details { border-bottom: 1px solid rgba(13,46,73,0.12); padding: 14px 0; }
.faq summary { cursor: pointer; font-family: 'Lato', sans-serif; font-weight: 700; color: var(--navy); font-size: 1.08rem; }
.faq details p { margin-top: 10px; color: var(--slate-text); }

@media (prefers-reduced-motion: reduce) {
  .mc-stage .meeting-card { transition: none; }
  .mc-stage .caret::after { display: none; }
  .menu-panel { transition: none; }
}
/* Six agents around the person (site v2). The five-point .orbit above is still used by the proposal. */
.orbit.orbit6 .t1 { left: 50%; top: 13%; animation-delay: 0s; }
.orbit.orbit6 .t2 { left: 82%; top: 31.5%; animation-delay: 1.25s; }
.orbit.orbit6 .t3 { left: 82%; top: 68.5%; animation-delay: 2.5s; }
.orbit.orbit6 .t4 { left: 50%; top: 87%; animation-delay: 3.75s; }
.orbit.orbit6 .t5 { left: 18%; top: 68.5%; animation-delay: 5s; }
.orbit.orbit6 .t6 { left: 18%; top: 31.5%; animation-delay: 6.25s; }
.orbit.orbit6 .task { width: 30%; }

/* ---- Site v2, round 2 (2026-09-23 evening) ---- */
/* Orbit back to the old pace: one box lights every 1.5s, whatever the number of agents */
.orbit.orbit6 .task { animation-duration: 9s; }
.orbit.orbit6 .t1 { animation-delay: 0s; } .orbit.orbit6 .t2 { animation-delay: 1.5s; } .orbit.orbit6 .t3 { animation-delay: 3s; }
.orbit.orbit6 .t4 { animation-delay: 4.5s; } .orbit.orbit6 .t5 { animation-delay: 6s; } .orbit.orbit6 .t6 { animation-delay: 7.5s; }

/* Onboarding: heading, the 45 minutes and the button share one row; sign-off sits inline */
.ob-head { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: end; }
.ob-after p { font-size: 0.97rem; color: var(--slate-text); }
.ob-after .btn { margin-top: 14px; }
.ob-name .so { display: inline-flex; margin: 0 0 0 4px; }
.ob-name p { display: inline; }
.ob-name strong + p::before { content: ''; display: block; margin-top: 4px; }
@media (max-width: 960px) { .ob-head { grid-template-columns: 1fr; gap: 20px; } }

.included ul { grid-template-columns: 1fr 1fr; column-gap: 20px; }
@media (max-width: 640px) { .included ul { grid-template-columns: 1fr; } }

/* Scroll lock: Home only, laptops and desktops only. Each section is one screen tall below the
   pinned menu and snaps into place; phones and short windows scroll freely. Other pages never lock. */
html:not(.home) { scroll-snap-type: none !important; }
html:not(.home) .section, html:not(.home) .hero { scroll-snap-align: none; }
@media (min-width: 961px) and (min-height: 700px) {
  html.home { scroll-snap-type: y mandatory; scroll-padding-top: 69px; }
  html.home main > section {
    min-height: calc(100vh - 69px); scroll-snap-align: start;
    display: flex; flex-direction: column; justify-content: center; padding: 28px 0;
  }
  html.home main > section.hero { padding: 28px 0; }
  html.home .footer { scroll-snap-align: end; }
  html.home .closing { min-height: 0 !important; padding: 72px 0; }
  html.home .section-cta { margin-top: 20px; }
  html.home #how h2, html.home #qualified h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
  html.home #how .lead { font-size: 1.05rem; }
  html.home .voice-line { margin-top: 12px; font-size: 1rem; }
  html.home .included { margin-top: 16px; padding: 14px 18px; }
  html.home .orbit { max-width: 400px; }
  html.home .criteria-list li { padding: 9px 14px; }
  html.home .mc-stage .meeting-card { min-height: 480px; padding: 18px 20px; }
  html.home .ob { margin-top: 22px; padding: 14px 20px; }
  html.home .ob-row { padding: 7px 0; }
  html.home .ob-name p { font-size: 0.84rem; }
  html.home .ob-sessions { margin-top: 10px; padding: 8px 12px; font-size: 0.88rem; }
  html.home .ob-key { margin-top: 6px; }
}

/* Diary slowed a further third (Alec, 23 Sep evening): 16s loop, was 12s (21 Sep) and 9s before that */
.slot span { animation-duration: 16s; }
.day:nth-child(1) .slot:nth-child(1) span { animation-delay: 0.00s; }
.day:nth-child(2) .slot:nth-child(1) span { animation-delay: 0.62s; }
.day:nth-child(3) .slot:nth-child(1) span { animation-delay: 1.24s; }
.day:nth-child(4) .slot:nth-child(1) span { animation-delay: 1.87s; }
.day:nth-child(5) .slot:nth-child(1) span { animation-delay: 2.49s; }
.day:nth-child(1) .slot:nth-child(2) span { animation-delay: 3.11s; }
.day:nth-child(2) .slot:nth-child(2) span { animation-delay: 3.73s; }
.day:nth-child(3) .slot:nth-child(2) span { animation-delay: 4.36s; }
.day:nth-child(4) .slot:nth-child(2) span { animation-delay: 4.98s; }
.day:nth-child(5) .slot:nth-child(2) span { animation-delay: 5.60s; }
.day:nth-child(1) .slot:nth-child(3) span { animation-delay: 6.22s; }
.day:nth-child(2) .slot:nth-child(3) span { animation-delay: 6.84s; }
.day:nth-child(3) .slot:nth-child(3) span { animation-delay: 7.47s; }
.day:nth-child(4) .slot:nth-child(3) span { animation-delay: 8.09s; }
.day:nth-child(5) .slot:nth-child(3) span { animation-delay: 8.71s; }
@media (min-width: 961px) and (min-height: 700px) {
  html.home #qualified .lead { margin-top: 8px; font-size: 1rem; }
  html.home #qualified .criteria-list { margin-top: 14px; gap: 8px; }
  html.home #qualified .criteria-list li { padding: 7px 12px; }
  html.home #qualified .criteria-list span { font-size: 0.9rem; }
  html.home #qualified .after-criteria { margin-top: 12px; font-size: 0.95rem; }
  html.home #qualified .split { align-items: center; }
  html.home .mc-stage .meeting-card { min-height: 460px; }
  html.home .mc-stage .chip { padding: 9px 12px; }
  /* Talking points added 28 Sep: tighter card so all three examples and the dots fit a 1380x760 window */
  html.home #qualified .qm-sub { margin-top: 10px; font-size: 0.95rem; }
  html.home .mc-stage .meeting-card { padding: 16px 20px; min-height: 522px; }
  html.home .mc-stage .meeting-card .title { margin: 2px 0 10px; font-size: 1.05rem; }
  html.home .mc-stage .attach { gap: 7px; }
  html.home .mc-stage .chip { padding: 7px 12px; font-size: 0.9rem; }
  html.home .mc-stage .chip p { font-size: 0.84rem; margin-top: 0; }
  html.home .mc-stage .evidence { gap: 2px; margin-top: 3px; }
  html.home .mc-stage .evidence li { font-size: 0.82rem; }
  html.home .mc-stage .rec-chip > div { display: flex; align-items: center; gap: 10px; }
  html.home .mc-stage .rec-chip small { display: inline; }
  html.home .mc-stage .rec-chip .rec { margin-top: 0; width: 110px; }
  html.home #onboarding .lead { margin-top: 8px; font-size: 1rem; }
  html.home .ob-row { grid-template-columns: 470px 1fr; padding: 6px 0; }
  html.home .ob-name p { font-size: 0.82rem; }
  html.home .ob-name strong + p::before { margin-top: 0; }
  html.home .ob-sessions { display: inline-block; }
}
@media (min-width: 961px) and (min-height: 700px) {
  html.home .ob-head { grid-template-columns: 1fr 1fr; }
  html.home .ob-after p { font-size: 0.9rem; line-height: 1.5; }
  html.home .ob-after .btn { margin-top: 10px; font-size: 16px; padding: 11px 20px; }
  html.home .ob-name { line-height: 1.4; }
  html.home .ob-name strong { font-size: 1rem; }
  html.home .ob-name p { font-size: 0.8rem; line-height: 1.4; }
  html.home .ob-name strong + p::before { margin-top: 2px; }
  html.home .ob-name .so { font-size: 0.75rem; }
  html.home .ob-foot { display: flex; align-items: center; gap: 20px; margin-top: 10px; }
  html.home .ob-foot .ob-sessions, html.home .ob-foot .ob-key { margin: 0; }
}
@media (min-width: 961px) and (min-height: 700px) {
  html.home main > section#onboarding { padding: 14px 0; }
  html.home #onboarding .eyebrow { margin-bottom: 8px; }
  html.home .ob-track { height: 24px; }
}

/* Diary v3 (Alec, 23 Sep evening): starts as a week of admin, fills with qualified meetings one by one,
   holds when full, then every block fades back to admin together and it starts again. Timing is in
   js/site.js; these rules only draw the two states. Reduced motion keeps the static full week above. */
.week.driven .slot span { animation: none; transition: opacity 0.6s ease; }
.week.driven .slot .was { opacity: 1; }
.week.driven .slot .now { opacity: 0; }
.week.driven .slot.on .was { opacity: 0; }
.week.driven .slot.on .now { opacity: 1; }
.week.driven.resetting .slot span { transition-duration: 1.1s; }

/* ---- Site v2, round 3 (2026-09-23 night) ---- */
/* Onboarding in three phases: weeks 1, 2, then 3 onwards, the last bar fading out to show it carries on */
.ob.ob3 .ob-track { grid-template-columns: 1fr 1fr 1.6fr; }
.ob-bar.ongoing { background: linear-gradient(90deg, var(--coral) 55%, rgba(225,101,61,0)); }
.ob-bar.ongoing::after { display: none; }

/* Menu hides while scrolling down and returns on the way up (the 21 Sep behaviour, restored) */
.nav.v2 { transform: none; transition: transform 0.28s ease; }
.nav.v2.hidden { transform: translateY(-100%); }

@media (min-width: 961px) and (min-height: 700px) {
  /* The menu now slides away, so each section is a full screen; the top padding keeps content
     clear of the menu when it comes back */
  html.home { scroll-padding-top: 0; }
  html.home main > section { min-height: 100vh; padding: 76px 0 24px; }
  html.home main > section#onboarding { padding: 76px 0 16px; }
  html.home main > section.hero { padding: 76px 0 24px; }
  /* Closing call to action is its own screen; the footer sits below it and snaps to the bottom */
  html.home .closing { min-height: 100vh !important; padding: 76px 0 24px; }
  html.home .footer { scroll-snap-align: end; }
}
@media (prefers-reduced-motion: reduce) { .nav.v2 { transition: none; } }
/* Footer reads as its own block under the navy closing screen */
.footer.v2 { background: var(--navy-deep); border-top: 1px solid rgba(255,255,255,0.12); }
/* Onboarding, round 4: heading and intro run full width; the 45 minutes and the button sit under the chart */
#onboarding h2 { max-width: none; }
.ob-lead { max-width: none; }
#onboarding .ob-after { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 18px; }
#onboarding .ob-after p { max-width: 62ch; font-size: 1rem; color: var(--navy); }
#onboarding .ob-after .btn { margin-top: 0; flex: none; }
@media (max-width: 860px) { #onboarding .ob-after { flex-direction: column; align-items: stretch; } }
/* Onboarding, round 5: four week columns; week 4's label and the ongoing bar both fade out to show it keeps running */
.ob.ob3 .ob-track { grid-template-columns: repeat(4, 1fr); }
.ob-track .wk.fade {
  background: linear-gradient(90deg, var(--slate-text) 10%, rgba(86,102,106,0) 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ob-bar.ongoing { background: linear-gradient(90deg, var(--coral) 45%, rgba(225,101,61,0) 95%); }
.ob-track .wk.fade { background: linear-gradient(90deg, rgba(86,102,106,0.85) 0%, rgba(86,102,106,0.08) 100%); -webkit-background-clip: text; background-clip: text; }

/* ---- Booking overlay (js/booking.js), shared by the site and the proposals ---- */
.booking {
  border: none; padding: 0; margin: auto;
  width: min(760px, 94vw); height: min(780px, 90vh); max-width: none; max-height: none;
  border-radius: 12px; background: var(--white); overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
.booking[open] { display: flex; flex-direction: column; }
.booking::backdrop { background: rgba(9, 30, 48, 0.75); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.booking-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 20px; background: var(--navy); color: var(--white); flex-shrink: 0; }
.booking-bar h2 { font-size: 16px; margin: 0; color: var(--white); }
.booking-actions { display: flex; align-items: center; gap: 8px; }
.booking-actions a { color: rgba(255,255,255,0.75); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.booking-actions a:hover { color: var(--cyan); }
.booking-close { width: 44px; height: 44px; border: none; border-radius: 6px; background: transparent; color: var(--white); font-size: 28px; line-height: 1; cursor: pointer; }
.booking-close:hover { background: rgba(255, 255, 255, 0.08); }
.booking iframe { flex: 1; width: 100%; border: 0; background: var(--white); }
@media (max-width: 600px) {
  .booking { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
  .booking-actions a { display: none; }
}

/* Scroll cue on the first screen only (laptops and desktops, where each section fills the screen and nothing
   peeks below it). Fades once they scroll; no bobbing with reduced motion. */
.scroll-cue { display: none; }
@media (min-width: 961px) and (min-height: 700px) {
  html.home .hero { position: relative; }
  html.home .scroll-cue {
    display: grid; place-items: center; position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
    width: 48px; height: 48px; border-radius: 50%; color: var(--navy);
    background: rgba(13, 46, 73, 0.06); border: 1px solid rgba(13, 46, 73, 0.14);
    opacity: 0.7; transition: opacity 0.4s ease, background 0.2s;
    animation: cue-bob 2.2s ease-in-out infinite;
  }
  html.home .scroll-cue:hover { opacity: 1; background: rgba(13, 46, 73, 0.1); }
  html.home .scroll-cue svg { width: 24px; height: 24px; }
  html.home.scrolled .scroll-cue { opacity: 0; pointer-events: none; }
  /* Hiring vs Vocara: the same cue with a label, so the second screen is obvious */
  html.hv .hv-top { position: relative; }
  html.home .scroll-cue.labelled { width: auto; height: auto; border-radius: 24px; padding: 8px 12px 8px 18px; gap: 6px;
    display: inline-flex; align-items: center; font: 700 0.9rem 'Lato', sans-serif; white-space: nowrap; bottom: 18px; opacity: 0.85; text-decoration: none; }
}
@keyframes cue-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }
/* Hiring vs Vocara: the labelled cue sits in the row with the guide and method links, left of them */
@media (min-width: 961px) and (min-height: 700px) {
  html.home .hv-method { align-items: center; }
  html.home .hv-method .scroll-cue.labelled { position: static; transform: none; margin-right: auto; animation-name: cue-bob-row; }
}
@keyframes cue-bob-row { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none !important; } }

/* ---- Forecast page, one screen (2026-09-23 night): inputs left, results right ---- */
.fc { padding: 40px 0 40px; }
.fc-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: start; }
.fc h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); max-width: 20ch; }
.fc .lead { margin-top: 10px; font-size: 1.05rem; }
.fc .typical { margin: 8px 0 12px; }
.fc .inputs { gap: 10px 14px; }
.fc .field { gap: 3px; }
.fc .field label { font-size: 0.88rem; }
.fc .field input, .fc .field select { padding: 8px 10px; }
.fc .fine { margin-top: 14px; }
.fc-card { padding: 22px 24px; }
.fc-card .big { font-size: clamp(2rem, 4vw, 2.6rem); }
.fc-card .per { margin-top: 4px; font-size: 0.92rem; }
.fc-card .per .from { display: inline; font-size: 0.82rem; color: rgba(255,255,255,0.65); }
.fc-card .free-tiles { margin-top: 12px; gap: 8px; }
.fc-card .free-tiles div { padding: 9px 12px; }
.fc-card .free-tiles strong { font-size: 1.2rem; }
.fc-card ul { margin-top: 12px; gap: 6px; font-size: 0.86rem; }
.fc-promise { font-size: 0.92rem; color: rgba(255,255,255,0.75); margin: -6px 0 18px; }
.fc-gate { margin-top: 14px; background: var(--white); color: var(--ink); border-radius: 8px; padding: 14px 16px; }
.fc-gate h3 { font-size: 1rem; margin-bottom: 4px; }
.fc-gate p { font-size: 0.82rem; color: var(--slate-text); }
.fc-gate form { display: flex; gap: 8px; margin-top: 10px; }
.fc-gate input { flex: 1; min-width: 0; font: inherit; font-size: 0.95rem; border: 1px solid rgba(13,46,73,0.25); border-radius: 6px; padding: 8px 10px; }
.fc-gate .btn { font-size: 16px; padding: 8px 14px; white-space: nowrap; }
.fc-gate .soon { margin-top: 6px; font-size: 0.75rem; color: var(--coral-dark); }
@media (min-width: 961px) and (min-height: 700px) {
  .fc { min-height: calc(100vh - 69px); display: flex; align-items: center; }
  .fc > .wrap { width: 100%; }
}
@media (max-width: 960px) { .fc-grid { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 640px) { .fc-gate form { flex-direction: column; } }

/* Orbit v3 (Alec, 24 Sep): icons around the headset; each label appears as its border lights.
   One lights every 1.5s on a 9s loop, so exactly one label shows at a time. */
.orbit.icons .task {
  width: auto; padding: 0; background: none; border: 0; display: block;
  animation: none; overflow: visible;
}
.orbit.icons .task svg {
  display: block; width: 58px; height: 58px; padding: 15px; box-sizing: border-box;
  background: var(--white); color: var(--navy); border-radius: 50%;
  border: 2px solid rgba(13, 46, 73, 0.14);
  animation: iconLight 9s ease-in-out infinite both;
}
.orbit.icons .task span {
  position: absolute; left: 50%; top: calc(100% + 8px); transform: translate(-50%, 4px);
  width: max-content; max-width: 150px; text-align: center;
  background: var(--navy); color: var(--white); border-radius: 6px; padding: 5px 10px;
  font-size: 0.8rem; font-weight: 700; line-height: 1.25; z-index: 3;
  opacity: 0; animation: iconLabel 9s ease-in-out infinite both;
}
.orbit.icons .t4 span { top: auto; bottom: calc(100% + 8px); }
.orbit.icons .t1 svg, .orbit.icons .t1 span { animation-delay: 0s; }
.orbit.icons .t2 svg, .orbit.icons .t2 span { animation-delay: 1.5s; }
.orbit.icons .t3 svg, .orbit.icons .t3 span { animation-delay: 3s; }
.orbit.icons .t4 svg, .orbit.icons .t4 span { animation-delay: 4.5s; }
.orbit.icons .t5 svg, .orbit.icons .t5 span { animation-delay: 6s; }
.orbit.icons .t6 svg, .orbit.icons .t6 span { animation-delay: 7.5s; }
.orbit.icons .person svg { width: 64px; height: 64px; margin: 0 auto; }
@keyframes iconLight {
  0%, 17%, 100% { border-color: rgba(13, 46, 73, 0.14); box-shadow: none; color: var(--navy); }
  3%, 14% { border-color: var(--cyan); box-shadow: 0 0 0 5px var(--cyan-wash); color: #00969c; }
}
@keyframes iconLabel {
  0%, 17%, 100% { opacity: 0; transform: translate(-50%, 4px); }
  3%, 14% { opacity: 1; transform: translate(-50%, 0); }
}
@media (max-width: 640px) {
  .orbit.icons .task svg { width: 46px; height: 46px; padding: 11px; }
  .orbit.icons .task span { font-size: 0.72rem; max-width: 120px; }
  .orbit.icons .person svg { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit.icons .task svg { animation: none; }
  .orbit.icons .task span { animation: none; opacity: 1; transform: translate(-50%, 0); background: none; color: var(--navy); padding: 0; }
}

/* Hiring teaser v2 (Alec, 24 Sep): fuller argument, a live mini comparison over six months */
.teaser-honest { margin-top: 16px; font-size: 0.95rem; color: var(--slate-text); }
.saving-head { font-family: 'Lato', sans-serif; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.7); }
.mini-cmp { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 0.98rem; }
.mini-cmp th, .mini-cmp td { text-align: left; padding: 9px 8px; border-bottom: 1px solid rgba(255,255,255,0.14); }
.mini-cmp thead th { font-family: 'Lato', sans-serif; font-size: 0.82rem; font-weight: 700; color: rgba(255,255,255,0.75); }
.mini-cmp thead th:last-child, .mini-cmp td:last-child { color: var(--cyan); font-weight: 700; }
.mini-cmp tbody th { font-weight: 400; color: rgba(255,255,255,0.8); padding-left: 0; }
.saving-line { margin-top: 16px; }

/* Onboarding (Alec, 24 Sep): the sessions box runs the full width of the chart, and more air top and bottom */
html.home .ob-foot, .ob-foot { display: block; }
html.home .ob-sessions, .ob-sessions { display: block; width: 100%; max-width: none; box-sizing: border-box; }
/* Labels sit outside the ring, away from the headset: above the top icon, below the bottom one, beside the rest */
.orbit.icons .t2 span, .orbit.icons .t3 span { left: calc(100% + 10px); top: 50%; transform: translate(4px, -50%); }
.orbit.icons .t5 span, .orbit.icons .t6 span { left: auto; right: calc(100% + 10px); top: 50%; transform: translate(-4px, -50%); }
.orbit.icons .t1 span { top: auto; bottom: calc(100% + 10px); }
.orbit.icons .t4 span { bottom: auto; top: calc(100% + 10px); }
.orbit.icons .t2 span, .orbit.icons .t3 span { animation-name: iconLabelR; }
.orbit.icons .t5 span, .orbit.icons .t6 span { animation-name: iconLabelL; }
.orbit.icons .task span { max-width: none; white-space: nowrap; }
@keyframes iconLabelR { 0%, 17%, 100% { opacity: 0; transform: translate(4px, -50%); } 3%, 14% { opacity: 1; transform: translate(0, -50%); } }
@keyframes iconLabelL { 0%, 17%, 100% { opacity: 0; transform: translate(-4px, -50%); } 3%, 14% { opacity: 1; transform: translate(0, -50%); } }
@media (prefers-reduced-motion: reduce) {
  .orbit.icons .t2 span, .orbit.icons .t3 span, .orbit.icons .t5 span, .orbit.icons .t6 span { transform: translate(0, -50%); }
}
@media (min-width: 961px) and (min-height: 700px) {
  html.home .ob-row { grid-template-columns: 560px 1fr; }
  html.home .ob-foot { margin-top: 8px; }
  html.home #onboarding .ob-after { margin-top: 14px; }
}
/* Side labels beside the icons ran into the text column and off narrow laptops, so every label sits
   above (top half of the ring) or below (bottom half), centred on its icon */
.orbit.icons .task span { left: 50%; right: auto; animation-name: iconLabel; transform: translate(-50%, 0); }
.orbit.icons .t1 span, .orbit.icons .t2 span, .orbit.icons .t6 span { top: auto; bottom: calc(100% + 10px); }
.orbit.icons .t3 span, .orbit.icons .t4 span, .orbit.icons .t5 span { bottom: auto; top: calc(100% + 10px); }
@media (prefers-reduced-motion: reduce) {
  .orbit.icons .task span { transform: translate(-50%, 0) !important; background: var(--navy); color: var(--white); padding: 5px 10px; }
}

/* ---- Home, Alec's 24 Sep round 2 ---- */
/* Included: two free-flowing columns, so the bottoms line up instead of the rows */
.included ul { display: block; columns: 2; column-gap: 20px; }
.included li { break-inside: avoid; margin-bottom: 8px; }
@media (max-width: 640px) { .included ul { columns: 1; } }
/* Orbit labels fade in more slowly (about 0.6s), then hold until the next icon lights */
@keyframes iconLabel {
  0%, 18%, 100% { opacity: 0; transform: translate(-50%, 4px); }
  7%, 14% { opacity: 1; transform: translate(-50%, 0); }
}
/* Teaser: say these are averages, to invite their own numbers */
.saving-sub { margin-top: 4px; font-size: 0.85rem; font-weight: 400; color: rgba(255,255,255,0.7); }
/* Week 4 label and the ongoing bar fade earlier, from further left */
.ob-track .wk.fade { background: linear-gradient(90deg, rgba(86,102,106,0.6) 0%, rgba(86,102,106,0) 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ob-bar.ongoing { background: linear-gradient(90deg, var(--coral) 15%, rgba(225,101,61,0) 90%); }

/* Titles, subtitles and intro lines run the full width of their column (Alec, 24 Sep 2026). The p { max-width: 62ch }
   reading-length cap above is for body copy only; it was wrapping every new page's headings at the middle. */
h1, h2, .lead, .concede, .page-head h1, .page-head .lead, .fc h1, .hv-sub { max-width: none; }

/* ---- Hiring vs Vocara v3 (Alec, 24 Sep): results-first cards on screen 1, "what the numbers don't show" on screen 2 ---- */
.hv-top { padding: 92px 0 40px; }
.hv-top .eyebrow { margin-bottom: 8px; }
.hv-top h1 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); }
.hv-sub { margin-top: 8px; color: var(--slate-text); font-size: 1.02rem; }
.hv-inputs { display: flex; align-items: flex-end; gap: 18px; margin-top: 20px; flex-wrap: wrap; }
.hv-inputs .field input, .hv-inputs .field select { padding-top: 8px; padding-bottom: 8px; }
.hv-inputs .field:nth-child(2) { width: 170px; }
.hv-inputs .field:nth-child(3) { width: 220px; }
.hv-inputs .hv-more { margin-left: auto; cursor: pointer; font: inherit; font-family: 'Lato', sans-serif; font-weight: 700; background: var(--white); }
.hv-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 16px; }
.hv-card { border-radius: var(--radius); padding: 20px 24px; border: 1px solid rgba(13,46,73,0.12); background: var(--white); }
.hv-card.us { background: var(--navy); color: var(--white); border-color: var(--navy); }
.hv-card .who { display: flex; justify-content: space-between; align-items: center; align-content: flex-start; gap: 8px; flex-wrap: wrap; min-height: 60px; } /* room for the badges to wrap, so the layout never jumps when they move between cards */
.hv-card .who strong { font-family: 'Lato', sans-serif; font-size: 1.05rem; color: var(--navy); }
.hv-card.us .who strong { color: var(--white); }
.hv-big { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 2.5rem; color: var(--navy); margin-top: 6px; line-height: 1.1; }
.hv-card.us .hv-big { color: var(--cyan); }
.hv-big small { font-size: 0.9rem; font-weight: 700; color: var(--slate-text); margin-left: 6px; }
.hv-card.us .hv-big small { color: rgba(255,255,255,0.7); }
.hv-card dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(13,46,73,0.1); }
.hv-card.us dl { border-top-color: rgba(255,255,255,0.15); }
.hv-card dt { font-size: 0.78rem; color: var(--slate-text); }
.hv-card.us dt { color: rgba(255,255,255,0.7); }
.hv-card dd { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--navy); margin: 2px 0 0; }
.hv-card.us dd { color: var(--white); }
.hv-card .track { margin-top: 14px; height: 16px; }
.hv-card.us .track { background: rgba(255,255,255,0.12); }
.hv-card.us .track .us { background: var(--cyan); }
.hv-card .legend { font-size: 0.74rem; }
.hv-card.us .badge { background: rgba(0,196,204,0.15); color: var(--white); border-color: rgba(0,196,204,0.5); }
.hv-note { margin-top: 8px; font-size: 0.8rem; color: rgba(255,255,255,0.7); }
.hv-verdict { display: flex; align-items: center; gap: 24px; margin-top: 14px; min-height: 77px; } /* two lines of verdict, whatever it says */
.hv-verdict .verdict { flex: 1; margin-top: 0; padding: 12px 16px; font-size: 1rem; }
.hv-link { flex: none; background: none; border: 0; padding: 0; font: inherit; font-family: 'Lato', sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--coral-dark); cursor: pointer; }
.hv-link:hover { text-decoration: underline; }
/* Panels from the right */
.hv-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: var(--white); z-index: 60;
  box-shadow: -8px 0 40px rgba(13,46,73,0.18); padding: 24px; overflow-y: auto; transform: translateX(105%); visibility: hidden;
  transition: transform 0.3s ease, visibility 0s linear 0.3s; }
.hv-panel.open { transform: none; visibility: visible; transition: transform 0.3s ease; }
.hv-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.hv-panel-head h3 { font-size: 1.15rem; }
.hv-close { background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--navy); }
.hv-panel .field { margin-bottom: 14px; }
.hv-panel .note { font-size: 0.85rem; color: var(--slate-text); margin-bottom: 16px; }
.hv-panel .fine { margin-top: 0; font-size: 0.9rem; line-height: 1.6; }
.hv-scrim { position: fixed; inset: 0; background: rgba(13,46,73,0.12); z-index: 55; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.hv-scrim.on { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .hv-panel, .hv-scrim { transition: none; } }
/* Screen 2 */
.hv-rest h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.hv-two { display: grid; grid-template-columns: 1.45fr 1fr; gap: 32px; align-items: start; margin-top: 12px; }
.hv-rest .rows { margin-top: 0; }
.hv-rest .rows td:first-child { font-family: 'Lato', sans-serif; font-weight: 700; color: var(--navy); font-size: 1rem; }
.hv-rest .email-box { margin-top: 0; background: var(--white); }
.hv-side { display: grid; gap: 16px; }
.hv-cta { justify-self: end; }
.choose.three { grid-template-columns: repeat(3, 1fr); margin-top: 24px; }
.choice.mix { border-top: 3px solid var(--cyan); }
@media (max-width: 960px) {
  .hv-cards, .hv-two, .choose.three { grid-template-columns: 1fr; }
  .hv-inputs .hv-more { margin-left: 0; }
  .hv-inputs .field:nth-child(2), .hv-inputs .field:nth-child(3) { width: 100%; }
  .hv-verdict { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hv-cta { justify-self: stretch; text-align: center; }
}
/* Laptops: the two screens lock like the home page */
@media (min-width: 961px) and (min-height: 700px) {
  html.hv main > section.hv-top { padding: 76px 0 16px; }
  html.hv main > section.hv-rest { padding: 76px 0 24px; }
  html.hv .choose.three .choice { padding: 18px 20px; }
}
.hv-inputs { align-items: flex-end; }
.hv-inputs .field label { min-height: 1.4em; }
.hv-inputs .stepper { height: 44px; }
.hv-inputs .stepper input, .hv-inputs .stepper button { height: 44px; padding-top: 0; padding-bottom: 0; }
.hv-inputs .field > input, .hv-inputs .field > select, .hv-inputs .hv-more { height: 44px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
.hv-cta { width: auto; white-space: nowrap; font-size: 16px; padding: 12px 20px; }

/* Hiring vs Vocara colours (Alec, 24 Sep): in-house is grey, Vocara is navy; orange stays for buttons only */
.have label[hidden] { display: none; }
.hv-rest .choice.us { border-top-color: var(--navy); }
.hv-rest .choice.mix { border-top: 0; position: relative; }
.hv-rest .choice.mix::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px;
  border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(90deg, var(--slate) 50%, var(--navy) 50%); }
.hv-rest .rows thead th:nth-child(2) { border-top: 3px solid var(--slate); }
.hv-rest .rows thead th:nth-child(3) { border-top: 3px solid var(--navy); background: var(--navy); color: var(--white); border-radius: 6px 6px 0 0; }
.hv-rest .rows td:nth-child(2) { color: var(--slate-text); }
.hv-rest .rows td:nth-child(3) { background: var(--white); color: var(--navy); font-weight: 700; }
.hv-rest .rows td:first-child { font-size: 0.95rem; }
.hv-rest .rows thead th:nth-child(2) { border-top: 3px solid var(--slate-text); background: var(--slate-text); color: var(--white); border-radius: 6px 6px 0 0; }
.hv-rest .rows td:nth-child(2) { background: rgba(255,255,255,0.45); }

/* Method panel: short headed sections */
.hv-panel .fine h4 { font-family: 'Lato', sans-serif; font-size: 0.95rem; color: var(--navy); margin: 18px 0 4px; }
.hv-panel .fine h4:first-child { margin-top: 0; }
.hv-panel .fine p { margin: 0 0 8px; }
/* "What the numbers don't show": one rounded card, no stray corners. Label column white, in-house grey, Vocara cyan wash */
.hv-table { border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(13,46,73,0.12); background: var(--white); }
.hv-rest .hv-table .rows { margin: 0; border-collapse: separate; border-spacing: 0; }
.hv-rest .hv-table .rows th, .hv-rest .hv-table .rows td { border: 0; border-bottom: 1px solid rgba(13,46,73,0.08); border-radius: 0; padding: 12px 14px; }
.hv-rest .hv-table .rows tr:last-child td { border-bottom: 0; }
.hv-rest .hv-table .rows thead th { border-top: 0; font-size: 0.85rem; }
.hv-rest .hv-table .rows thead th:first-child { background: var(--white); }
.hv-rest .hv-table .rows thead th:nth-child(2) { background: var(--slate-text); color: var(--white); }
.hv-rest .hv-table .rows thead th:nth-child(3) { background: var(--navy); color: var(--white); }
.hv-rest .hv-table .rows td:nth-child(2) { background: #f5f7f7; color: var(--slate-text); }
.hv-rest .hv-table .rows td:nth-child(3) { background: var(--cyan-wash); color: var(--navy); font-weight: 700; }

/* ---- "What the numbers don't show" options (24 Sep). Columns are separate rounded cards with a gap ---- */
.hvc { display: grid; grid-template-columns: 1.1fr 1fr 1fr; column-gap: 12px; }
.hvc-row { display: contents; }
.hvc-row > div { padding: 12px 16px; font-size: 0.95rem; }
.hvc-l { font-family: 'Lato', sans-serif; font-weight: 700; color: var(--navy); padding-left: 0 !important; display: flex; align-items: center; }
.hvc-ih { background: var(--white); color: var(--slate-text); border-left: 1px solid rgba(13,46,73,0.1); border-right: 1px solid rgba(13,46,73,0.1); }
.hvc-us { background: var(--cyan-wash); color: var(--navy); font-weight: 700; }
.hvc-row:not(:first-child):not(.last) .hvc-ih, .hvc-row:not(:first-child):not(.last) .hvc-us { box-shadow: inset 0 -1px 0 rgba(13,46,73,0.08); }
.hvc-row:not(:first-child):not(.last) .hvc-l { box-shadow: inset 0 -1px 0 rgba(13,46,73,0.1); }
.hvc-h { font-family: 'Lato', sans-serif; font-size: 0.88rem; font-weight: 700; border-radius: var(--radius) var(--radius) 0 0; }
.hvc-ih.hvc-h { background: var(--slate-text); color: var(--white); border-color: var(--slate-text); }
.hvc-us.hvc-h { background: var(--navy); color: var(--white); }
.hvc-row.last .hvc-ih, .hvc-row.last .hvc-us { border-radius: 0 0 var(--radius) var(--radius); }
.hvc-row.last .hvc-ih { border-bottom: 1px solid rgba(13,46,73,0.1); }
/* Phones: two stacked cards, each row labelled inside */
.hvc-cards { display: none; grid-template-columns: 1fr 1fr; gap: 14px; }
.hvc-card { border-radius: var(--radius); overflow: hidden; background: var(--white); border: 1px solid rgba(13,46,73,0.1); }
.hvc-card.us { background: var(--cyan-wash); border-color: transparent; }
.hvc-card-h { padding: 12px 18px; font-family: 'Lato', sans-serif; font-weight: 700; font-size: 0.9rem; color: var(--white); background: var(--slate-text); }
.hvc-card.us .hvc-card-h { background: var(--navy); }
.hvc-item { padding: 11px 18px; display: grid; gap: 2px; }
.hvc-item + .hvc-item { border-top: 1px solid rgba(13,46,73,0.08); }
.hvc-item span { font-size: 0.78rem; font-weight: 700; color: var(--slate-text); text-transform: uppercase; letter-spacing: 0.04em; }
.hvc-item b { font-size: 0.98rem; color: var(--slate-text); font-weight: 400; }
.hvc-card.us .hvc-item b { color: var(--navy); font-weight: 700; }
@media (max-width: 760px) {
  .hvc-wrap .hvc { display: none; }
  .hvc-wrap .hvc-cards { display: grid; grid-template-columns: 1fr; }
}
/* Email box matches the table's height */
.hv-two { align-items: stretch; }
.hv-side { display: flex; }
.hv-rest .email-box { flex: 1; display: flex; flex-direction: column; padding: 24px 26px; }
.hv-rest .email-box h3 { font-size: 1.3rem; }
.hv-rest .email-box p { font-size: 1rem; line-height: 1.6; margin-top: 4px; }
.hv-rest .email-box form { margin-top: auto; padding-top: 16px; max-width: none; }
@media (max-width: 960px) { .hv-rest .email-box form { margin-top: 14px; } }

/* Hiring vs Vocara, less boxy (Alec, 24 Sep): the table runs full width and the three "when" notes sit on the
   page background under a coloured rule instead of in white cards */
.hv-rest .hvc-wrap { margin-top: 18px; }
.hvc { grid-template-columns: 0.9fr 1fr 1fr; }
.hv-rest .choose.three { margin-top: 40px; gap: 40px; }
.hv-rest .choice { background: none; border: 0; border-radius: 0; padding: 16px 0 0; position: relative; }
.hv-rest .choice::before { content: ''; position: absolute; left: 0; top: 0; width: 64px; height: 3px; border-radius: 2px; background: var(--slate); }
.hv-rest .choice.us::before { background: var(--navy); }
.hv-rest .choice.mix::before { left: 0; right: auto; top: 0; width: 64px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--slate) 50%, var(--navy) 50%); }
html.hv .choose.three .choice { padding: 16px 0 0; }
/* Send me this comparison: a small button that opens into email + send */
.hv-send { display: flex; justify-content: flex-end; margin-top: 12px; }
.hv-send-open { font-size: 16px; padding: 12px 22px; }
.hv-send-form { display: flex; flex-wrap: wrap; gap: 8px; }
.hv-send-form[hidden] { display: none; }
.hv-send-form input { width: 260px; font: inherit; border: 1px solid rgba(13,46,73,0.25); border-radius: 6px; padding: 0 12px; height: 44px; box-sizing: border-box; }
.hv-send-form .btn { height: 44px; padding-top: 0; padding-bottom: 0; }
@media (max-width: 960px) { .hv-send { justify-content: stretch; } .hv-send-open, .hv-send-form { width: 100%; } .hv-send-form input { flex: 1 1 0; min-width: 0; width: auto; } }
.hv-send-open[hidden] { display: none; }
/* Verdict row: the verdict, then Send me this comparison; How we worked this out sits beneath on the right */
.hv-verdict .hv-send { margin-top: 0; flex: none; }
.hv-method { display: flex; justify-content: flex-end; margin-top: 10px; }
@media (max-width: 960px) { .hv-method { justify-content: flex-start; } }

/* ---- Forecast v2 (Alec, 24 Sep): fewer boxes; figures split by thin lines; the proposal ask sits on the card ---- */
.fc-card .free-tiles { gap: 0; margin-top: 16px; border-top: 1px solid rgba(255,255,255,0.15); }
.fc-card .free-tiles div { background: none; border-radius: 0; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.15); }
.fc-card .free-tiles div:nth-child(odd) { padding-right: 16px; border-right: 1px solid rgba(255,255,255,0.15); }
.fc-card .free-tiles div:nth-child(even) { padding-left: 16px; }
.fc-card ul a { color: var(--white); text-decoration: underline; }
.fc-card ul b { color: var(--cyan); }
.fc-gate { margin-top: 18px; background: none; color: var(--white); border-radius: 0; padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,0.15); }
.fc-gate h3 { color: var(--white); font-size: 1.1rem; }
.fc-gate p { color: rgba(255,255,255,0.8); font-size: 0.86rem; }
.fc-card .fc-gate .fc-incl { margin-top: 8px; gap: 5px; font-size: 0.84rem; }
.fc-card .fc-gate .fc-incl li::before { background: none; width: auto; height: auto; top: 0; content: '\2713'; color: var(--cyan); font-weight: 700; }
.fc-gate input { background: var(--white); border-color: transparent; }
.fc .field label { font-size: 0.86rem; line-height: 1.3; }
.fc .inputs { align-items: end; }
/* Forecast: the proposal ask is a button on the card; the detail opens in a right-hand panel */
.fc-ask { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.15); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.fc-ask p { font-size: 0.88rem; color: rgba(255,255,255,0.8); }
.fc-ask .btn { flex: none; font-size: 16px; padding: 11px 20px; }
.fc-panel .fc-gate { margin: 0; padding: 0; border: 0; color: var(--ink); }
.fc-panel .fc-gate p { color: var(--slate-text); font-size: 0.95rem; }
.fc-panel .fc-incl { list-style: none; display: grid; gap: 10px; margin: 14px 0 18px; font-size: 0.95rem; color: var(--navy); }
.fc-panel .fc-incl li { padding-left: 24px; position: relative; }
.fc-panel .fc-incl li::before { content: '\2713'; position: absolute; left: 0; top: 0; color: #00969c; font-weight: 700; }
.fc-panel form { display: grid; gap: 8px; }
.fc-panel input { font: inherit; border: 1px solid rgba(13,46,73,0.25); border-radius: 6px; padding: 10px 12px; }
@media (max-width: 640px) { .fc-ask { flex-direction: column; align-items: stretch; } }
/* Forecast figures: a short rule above each, with gaps between them, so it reads less like a spreadsheet */
.fc-card .free-tiles { border-top: 0; column-gap: 28px; row-gap: 4px; }
.fc-card .free-tiles div, .fc-card .free-tiles div:nth-child(odd), .fc-card .free-tiles div:nth-child(even) {
  border: 0; border-top: 1px solid rgba(255,255,255,0.18); padding: 10px 0 8px; }
.fc-card #q-why { font-size: 0.84rem; color: rgba(255,255,255,0.8); }
.hv-inputs .field:nth-child(3) { width: 285px; } /* fits "Mid-market: 200 to 1,500 staff" with the dropdown arrow, and keeps the assumptions button on the same row */

/* ---------- Email forms (js/forms.js) ---------- */
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; opacity: 0; }
.gate-msg { font-size: 0.85rem; margin-top: 8px; color: var(--navy); flex-basis: 100%; }
.gate-msg:empty { display: none; }
.form-privacy { flex-basis: 100%; margin-top: 8px; font-size: 0.8rem !important; color: var(--slate-text) !important; }
.form-privacy a { color: inherit; }
.gate-msg.bad { color: var(--coral-dark); }
.fc-gate form#gate { display: block; }
.fc-gate .gate-step { display: flex; gap: 8px; }
.fc-gate .gate-step[hidden] { display: none; }
.fc-gate .gate-step[data-step="2"] { flex-direction: column; gap: 10px; }
.fc-gate .gate-step[data-step="2"] label { display: grid; gap: 4px; font: 700 0.85rem 'Lato', sans-serif; color: var(--navy); }
.fc-gate .gate-step[data-step="2"] .btn { align-self: flex-start; }
.fc-gate .gate-lead { font-size: 0.9rem !important; color: var(--ink) !important; font-weight: 600; }
.hv-send-form { flex-wrap: wrap; }
@media (max-width: 640px) { .fc-gate .gate-step { flex-direction: column; } }

/* Forecast page: the gate panel shows the real forecast slide, blurred, clicking through itself (js/forecast-peek.js) */
.peek { background: #f5f7f7; }
.pk-stage { position: relative; width: 100%; max-width: 1400px; aspect-ratio: 1136 / 640; }
.pk-imgs { position: absolute; inset: 0; filter: blur(4px); opacity: 0.7; }
.pk-imgs img, .peek-fill { display: block; width: 100%; height: auto; }
.pk-imgs img { position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s ease; }
.pk-imgs img.on { opacity: 1; }
.pk-cursor { position: absolute; width: 22px; height: 31px; margin: 4px 0 0 -2px; transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1), top 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.pk-cursor svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Blurred like the slide, so it reads as a screen recording rather than a live pointer (Alec, 26 Sep 2026) */
.pk-cursor { filter: blur(3px); opacity: 0.75; }
.pk-ring { position: absolute; left: -9px; top: -9px; width: 20px; height: 20px; border: 3px solid var(--cyan); border-radius: 50%; opacity: 0; }
.pk-ring.go { animation: pk-ring 0.6s ease-out; }
@keyframes pk-ring { from { opacity: 1; transform: scale(0.4); } to { opacity: 0; transform: scale(2.6); } }
.peek-fill { filter: blur(4px); opacity: 0.6; }
.peek-note { margin-top: 14px; font-size: 0.8rem !important; color: var(--slate-text); }
/* Full screen: the preview fills the screen and the form floats on it in a see-through box, with the email field
   and button solid on top (Alec, 26 Sep 2026) */
.hv-panel.fc-peek-panel { inset: 0; width: 100vw; padding: 0; overflow-y: auto; background: #f5f7f7; box-shadow: none;
  transform: translateY(12px); opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s; }
.hv-panel.fc-peek-panel.open { transform: none; opacity: 1; transition: opacity 0.3s ease, transform 0.3s ease; }
.fc-peek-panel .peek { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; background: none; }
.fc-peek-panel .peek-card { position: relative; z-index: 1; width: min(440px, calc(100vw - 32px)); padding: 24px 26px;
  background: rgba(255,255,255,0.62); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  border: 1px solid rgba(255,255,255,0.8); border-radius: 16px; box-shadow: 0 20px 60px rgba(13,46,73,0.18); }
.fc-peek-panel .fc-gate p, .fc-peek-panel .fc-incl { color: var(--navy); }
.fc-peek-panel input { background: var(--white); }
.fc-peek-panel .btn { box-shadow: 0 4px 14px rgba(13,46,73,0.18); }
@media (min-width: 900px) {
  .fc-peek-panel .peek-card { position: absolute; top: 50%; right: max(4vw, calc(50vw - 640px)); transform: translateY(-50%); max-height: calc(100vh - 48px); overflow-y: auto; }
}
.peek .peek-fill { display: none; }
@media (min-width: 900px) { .fc-peek-panel .pk-stage { width: min(100%, 1400px, calc(92vh * 1136 / 640)); } }
@media (max-width: 899px) {
  .fc-peek-panel .peek { flex-direction: column; justify-content: flex-start; align-items: stretch; padding: 14px 8px 0; overflow: hidden; }
  .fc-peek-panel .pk-stage { flex: none; }
  .fc-peek-panel .peek .peek-fill { display: block; flex: 1; min-height: 0; margin-top: 4px; object-fit: cover; object-position: left top; }
  .fc-peek-panel .peek-card { margin: 130px auto 24px; }
}
@media (prefers-reduced-motion: reduce) { .pk-imgs img, .pk-cursor, .hv-panel.fc-peek-panel { transition: none; } .pk-ring.go { animation: none; } }

/* Short laptop screens (Alec's is about 1380x760, 28 Sep): How it works and Meetings built to convert ran 27-38px
   past one screen after the talking points were added. The text column takes more of the width beside the orbit
   (fewer wrapped fee-list lines), and so do the criteria, a little tighter. No copy changes. */
@media (min-width: 961px) and (min-height: 700px) and (max-height: 830px) {
  html.home #how .split { grid-template-columns: 1.2fr 0.8fr; gap: 48px; }
  html.home #qualified .split { grid-template-columns: 1.12fr 0.88fr; gap: 48px; }
  html.home #qualified .criteria-list { gap: 6px; }
  html.home #qualified .criteria-list li { padding: 5px 12px; }
  html.home #qualified .mc-stage .meeting-card { min-height: 572px; } /* the tallest example, so the dots never jump */
}

/* 1280x720 laptops (28 Sep): Up and running in two weeks was 6px past one screen; its table sits a little tighter */
@media (min-width: 961px) and (min-height: 700px) and (max-height: 740px) {
  html.home .ob { margin-top: 14px; }
  html.home .ob-row { padding-top: 4px; padding-bottom: 4px; }
}

/* ---------- Guides (/guides/...): long-form article pages, normal scrolling (no html.home) ---------- */
/* Titles run the full column (feedback: never ch-capped); body copy keeps a readable measure */
.guide-head h1 { max-width: none; }
.guide .wrap > p, .guide .wrap > ul, .guide .wrap > ol, .guide .faq, .guide-calc .lead { max-width: 72ch; }
.guide .wrap > p { margin-top: 16px; color: var(--slate-text); }
.guide .wrap > p.lead { margin-top: 0; }
.guide h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-top: 48px; }
.guide a { color: var(--navy); }
.guide-costs { list-style: none; margin-top: 18px; border-top: 1px solid rgba(13,46,73,0.12); }
.guide-costs li { display: flex; justify-content: space-between; gap: 24px; padding: 10px 0; border-bottom: 1px solid rgba(13,46,73,0.12); color: var(--slate-text); }
.guide-costs li b { color: var(--navy); white-space: nowrap; font-family: 'Lato', sans-serif; }
.guide-costs li.total { border-bottom: 2px solid var(--navy); }
.guide-costs li.total span, .guide-costs li.total b { color: var(--navy); font-weight: 700; }
.guide-timeline { list-style: none; margin-top: 18px; border-left: 3px solid var(--cyan); padding-left: 22px; }
.guide-timeline li { margin-bottom: 16px; color: var(--slate-text); }
.guide-timeline li b { display: block; color: var(--navy); font-family: 'Lato', sans-serif; }
.guide-options { margin-top: 18px; padding-left: 1.4em; color: var(--slate-text); }
.guide-options li { margin-bottom: 14px; padding-left: 4px; }
.guide-options li b { color: var(--navy); }
.guide .wrap > p.guide-aside { margin-top: 4px; }
.guide .wrap > p.guide-caption { margin-top: 22px; font-weight: 600; color: var(--navy); }
.guide .wrap > p.guide-fine { font-size: 0.95rem; }
.guide-actions { margin-top: 36px; }
.guide .faq-group { margin-top: 0; }
.guide .faq-group h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 8px; }
.guide-calc h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.guide-calc .hv-calc { margin-top: 28px; }

/* Segment table: in-house row above Vocara's; Vocara's cells coloured by who comes out ahead (Alec, 6 Oct 2026).
   Colour is never the only signal: each coloured cell carries a mark too. Scrolls inside itself on phones. */
.guide-table-wrap { margin-top: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.guide-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 0.95rem; }
.guide-table th, .guide-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid rgba(13,46,73,0.12); white-space: nowrap; }
.guide-table thead th { font-family: 'Lato', sans-serif; color: var(--navy); border-bottom: 2px solid var(--navy); }
.guide-table tbody th { font-family: 'Lato', sans-serif; color: var(--navy); vertical-align: top; border-bottom: 2px solid rgba(13,46,73,0.25); }
.guide-table tbody th small { display: block; font-family: 'Open Sans', sans-serif; font-weight: 400; color: var(--slate-text); font-size: 0.82rem; }
.guide-table tr.ih td { color: var(--slate-text); }
.guide-table tr.us td { color: var(--navy); font-weight: 600; border-bottom: 2px solid rgba(13,46,73,0.25); }
.guide-table td.win, .guide-key .win { background: #e3f4ea; color: #1d6b43; }
.guide-table td.same, .guide-key .same { background: #fdf1d8; color: #85570a; }
.guide-table td.lose, .guide-key .lose { background: #fbe4df; color: #a3321d; }
.guide-table td.win::before, .guide-key .win::before { content: '\2713\00a0'; }
.guide-table td.same::before, .guide-key .same::before { content: '\2248\00a0'; }
.guide-table td.lose::before, .guide-key .lose::before { content: '\2717\00a0'; }
/* Screen readers say what the mark means in the table, and nothing in the key (its text already says it) */
.guide-table td.win::before { content: '\2713\00a0' / 'Vocara ahead: '; }
.guide-table td.same::before { content: '\2248\00a0' / 'About the same: '; }
.guide-table td.lose::before { content: '\2717\00a0' / 'Hiring ahead: '; }
.guide-key .win::before { content: '\2713\00a0' / ''; }
.guide-key .same::before { content: '\2248\00a0' / ''; }
.guide-key .lose::before { content: '\2717\00a0' / ''; }
.guide .wrap > p.guide-key { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-size: 0.85rem; }
.guide-key .key { padding: 3px 10px; border-radius: 4px; }
.guide .wrap > p.guide-swipe { display: none; }
@media (max-width: 680px) { .guide .wrap > p.guide-swipe { display: block; margin-top: 6px; font-size: 0.8rem; color: var(--slate-text); } }

/* Floating signpost to the hiring guide (js/site.js): bottom right, under the side panels, hidden by its x */
.guide-float { position: fixed; right: 20px; bottom: 20px; z-index: 50; width: min(320px, calc(100vw - 32px));
  background: var(--navy); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(9,30,48,0.28);
  opacity: 0; transform: translateY(12px); visibility: hidden; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s; }
.guide-float.on { opacity: 1; transform: none; visibility: visible; transition: opacity 0.3s ease, transform 0.3s ease; }
.guide-float a { display: block; padding: 14px 44px 14px 18px; color: var(--white); text-decoration: none; }
.guide-float .gf-eyebrow { display: block; font: 700 0.72rem 'Lato', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); }
.guide-float .gf-title { display: block; margin-top: 4px; font: 700 0.95rem/1.35 'Lato', sans-serif; }
.guide-float .gf-go { display: block; margin-top: 8px; font-size: 0.85rem; color: var(--cyan); }
.guide-float a:hover .gf-go { text-decoration: underline; }
.guide-float .gf-close { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: transparent; color: var(--white); font-size: 1.3rem; line-height: 1; cursor: pointer; opacity: 0.75; }
.guide-float .gf-close:hover, .guide-float .gf-close:focus-visible { opacity: 1; background: rgba(255,255,255,0.12); }
@media (max-width: 640px) { .guide-float { right: 16px; bottom: 16px; } .guide-float .gf-title { font-size: 0.88rem; } }
@media (prefers-reduced-motion: reduce) { .guide-float, .guide-float.on { transition: none; } }
.hv-method .hv-guide-link, .hv-method [data-panel="curve"] { margin-right: 22px; text-decoration: none; }
.hv-method { flex-wrap: wrap; row-gap: 6px; }

/* Guide review round (Alec, 6 Oct 2026): a tighter cost list, the timeline across the page, the calculator as one screen */
.guide-costs { max-width: 640px !important; font-size: 0.92rem; }
.guide-costs li { padding: 6px 0; }
/* Timeline: weeks from the day you decide, 20 columns; in-house grey, Vocara navy (house colour rule) */
.gt-wrap { margin-top: 22px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gt { min-width: 640px; }
.gt-scale, .gt-row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 12px; }
.gt-track { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; }
.gt-scale .gt-track i { font-style: normal; font-size: 0.75rem; color: var(--slate-text); grid-column: span 4; }
.gt-row { margin-top: 8px; }
.gt-who { font: 700 0.9rem 'Lato', sans-serif; color: var(--navy); }
.gt-track b { display: flex; align-items: center; min-height: 38px; padding: 0 10px; border-radius: 6px; font: 700 0.78rem 'Lato', sans-serif; white-space: nowrap; overflow: hidden; }
.gt-row .gt-wait { background: repeating-linear-gradient(135deg, #eef0f0 0 6px, #e2e6e7 6px 12px); color: var(--slate-text); }
.gt-row.ih .gt-on { background: #dfe4e5; color: var(--slate-text); }
.gt-row.ih .gt-r1 { background: #c3cbcd; color: var(--ink); }
.gt-row.ih .gt-r2 { background: #a3afb2; color: var(--white); }
.gt-row.ih .gt-r3 { background: var(--slate); color: var(--white); }
.gt-row.us .gt-on { background: var(--cyan-wash); color: var(--navy); }
.gt-row.us .gt-r1 { background: #5c7891; color: var(--white); }
.gt-row.us .gt-r2 { background: #2f5372; color: var(--white); }
.gt-row.us .gt-r3 { background: var(--navy); color: var(--white); }
.guide-stages { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 22px; max-width: none !important; }
.guide-stages li { border-top: 3px solid var(--slate); padding-top: 10px; font-size: 0.92rem; color: var(--slate-text); }
.guide-stages li b { display: block; color: var(--navy); font-family: 'Lato', sans-serif; margin-bottom: 4px; }
@media (max-width: 860px) { .guide-stages { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .guide-stages { grid-template-columns: 1fr; } }
/* The calculator lands as one full screen under the menu, from the in-page link or the floating button */
#calculator { scroll-margin-top: 69px; }
@media (min-width: 961px) and (min-height: 700px) {
  .guide-calc { min-height: calc(100vh - 69px); display: flex; align-items: center; padding: 28px 0; }
  .guide-calc > .wrap { width: 100%; }
  .guide-calc .lead { margin-top: 6px; }
  .guide-calc .hv-calc { margin-top: 18px; }
}
/* Floating "Run your numbers" button on guides (js/site.js); hidden while the calculator is on screen */
.calc-jump { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 8px 24px rgba(9,30,48,0.25); opacity: 0; transform: translateY(12px); visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s 0.25s; }
.calc-jump.on { opacity: 1; transform: none; visibility: visible; transition: opacity 0.25s ease, transform 0.25s ease; }
@media (max-width: 640px) { .calc-jump { right: 16px; bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .calc-jump, .calc-jump.on { transition: none; } }

/* Guide visual round (Alec, 6 Oct 2026). Headings stay on the left edge (one scanning line); below each, text (2/3)
   and a visual (1/3) alternate sides. In-house is grey, Vocara navy (house colour rule); cyan highlights only. */
.guide .wrap > p { max-width: none; }
.g-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 16px; }
.g-split.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.g-split.flip .g-visual { order: -1; }
.g-text > p { margin-top: 16px; color: var(--slate-text); }
.g-text > p:first-child { margin-top: 0; }
.g-text .guide-costs { max-width: none !important; }
.g-visual { margin: 0; }
.g-visual figcaption { margin-top: 10px; font-size: 0.8rem; color: var(--slate-text); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.g-visual figcaption small { color: var(--slate-text); opacity: 0.8; font-size: 0.75rem; }
.g-fig-t { font: 700 0.95rem 'Lato', sans-serif; color: var(--navy); margin-bottom: 12px; }
.g-legend b { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; }
.sw-ih { background: var(--slate); } .sw-us { background: var(--navy); }
.g-cpm .g-legend b { height: 10px; width: 10px; vertical-align: -1px; }
/* Boom and bust */
.g-boom svg { width: 100%; height: auto; display: block; }
.g-boom .axis { stroke: #c9d1d3; stroke-width: 1; }
.g-boom .ax-l { font: 400 10px 'Open Sans', sans-serif; fill: var(--slate-text); }
.g-boom .l-ih { fill: none; stroke: var(--slate); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-boom .l-us { fill: none; stroke: var(--navy); stroke-width: 2.5; stroke-linecap: round; }
/* At a glance */
.g-stats { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.g-stats li { background: var(--panel); border-radius: var(--radius); padding: 18px 20px; border-left: 4px solid var(--cyan); }
.g-stats b { display: block; font: 900 1.7rem/1.1 'Lato', sans-serif; color: var(--navy); }
.g-stats span { display: block; margin-top: 6px; font-size: 0.88rem; color: var(--slate-text); line-height: 1.45; }
/* The salary is the smallest part */
.sal-row { display: grid; grid-template-columns: 1fr; gap: 4px; margin-bottom: 14px; }
.sal-row > span { font-size: 0.82rem; color: var(--slate-text); }
.sal-row .track { height: 22px; }
.sal-row .track i + i { border-left: 2px solid var(--white); }
.sal-row .sal-base { background: #6c7a7d; border-radius: 0 4px 4px 0; }
.sal-row > b { font: 700 0.95rem 'Lato', sans-serif; color: var(--navy); }
.g-salary .legend { margin-top: 2px; }
.g-salary figcaption { display: block; }
/* Cost per meeting */
.g-cpm svg { width: 100%; height: auto; display: block; overflow: visible; }
.g-cpm .cpm-seg { font: 700 11px 'Lato', sans-serif; fill: var(--navy); }
.g-cpm .cpm-val { font: 600 10.5px 'Open Sans', sans-serif; fill: var(--ink); }
.g-cpm .b-ih { fill: var(--slate); } .g-cpm .b-us { fill: var(--navy); }
.g-cpm path { transition: opacity 0.15s; } .g-cpm path:hover { opacity: 0.75; }
/* Iceberg */
.g-ice { display: flex; flex-direction: column; align-items: center; }
.ib-top { width: 62%; aspect-ratio: 2 / 1; background: var(--white); border: 2px solid #c9d1d3; border-bottom: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%); display: flex; align-items: flex-end; justify-content: center; padding: 0 18% 8px; text-align: center; }
.ib-top span { font: 700 0.78rem/1.3 'Lato', sans-serif; color: var(--navy); }
.ib-line { width: 100%; display: flex; justify-content: space-between; border-top: 2px dashed var(--cyan); padding-top: 4px; font-size: 0.72rem; color: var(--slate-text); }
.ib-bottom { width: 100%; margin-top: 4px; background: var(--navy); color: var(--white); padding: 22px 26px 34px;
  clip-path: polygon(19% 0, 81% 0, 100% 34%, 88% 100%, 12% 100%, 0 38%); }
.ib-bottom ul { list-style: none; text-align: center; }
.ib-bottom li { font: 700 0.85rem/1.35 'Lato', sans-serif; padding: 5px 0; }
.ib-bottom li + li { border-top: 1px solid rgba(255,255,255,0.15); }
/* Three options and the tiles */
.g-ico { width: 28px; height: 28px; color: var(--navy); }
.g-options { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
.g-options li { background: var(--panel); border-radius: var(--radius); padding: 22px 22px 20px; }
.g-options li:last-child { background: var(--navy); }
.g-options li:last-child .g-ico, .g-options li:last-child b { color: var(--white); }
.g-options li:last-child p { color: rgba(255,255,255,0.85); }
.g-options b { display: block; margin-top: 10px; font: 700 1.05rem 'Lato', sans-serif; color: var(--navy); }
.g-options p { margin-top: 6px; font-size: 0.92rem; color: var(--slate-text); }
.guide .wrap > p.g-both { margin-top: 14px; padding: 12px 18px; border-left: 4px solid var(--cyan); background: var(--cyan-wash); color: var(--navy); }
.g-tiles { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 18px; }
.g-tiles li { border-top: 3px solid var(--navy); padding-top: 12px; }
.g-tiles b { display: block; margin-top: 8px; font: 700 0.98rem 'Lato', sans-serif; color: var(--navy); }
.g-tiles span { display: block; margin-top: 4px; font-size: 0.86rem; color: var(--slate-text); line-height: 1.5; }
.guide .wrap > p.g-close { margin-top: 24px; font-weight: 600; color: var(--navy); }
@media (max-width: 960px) { .g-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) {
  .g-split, .g-split.flip { grid-template-columns: 1fr; gap: 24px; }
  .g-split.flip .g-visual { order: 0; }
  .g-visual { max-width: 460px; }
  .g-stats, .g-options { grid-template-columns: 1fr; }
  .g-tiles { grid-template-columns: 1fr 1fr; }
}
/* Phones: the timeline stacks, each stage saying when it happens */
@media (max-width: 640px) {
  .gt-wrap { overflow: visible; }
  .gt { min-width: 0; }
  .gt-scale { display: none; }
  .gt-row { grid-template-columns: 1fr; gap: 6px; margin-top: 16px; }
  .gt-row .gt-track { display: flex; flex-direction: column; gap: 3px; }
  .gt-track b { grid-column: auto !important; min-height: 32px; justify-content: space-between; }
  .gt-track b::after { content: attr(data-w); font-weight: 400; opacity: 0.85; }
  .g-tiles { grid-template-columns: 1fr; }
}
.guide .wrap > ul.g-stats, .guide .wrap > ol.g-options, .guide .wrap > ul.g-tiles { max-width: none; }
.ib-top { background: #dfe4e5; border: 0; }
.ib-line span:first-child { transform: translateY(-24px); }
.guide-head .guide-standfirst { margin-top: 10px; font-size: 1.3rem; color: var(--slate-text); }
.guide-byline { margin-top: 12px; font-size: 0.88rem; color: var(--slate-text); }
.guide-byline a { color: var(--navy); font-weight: 600; }
.guide-sources { margin-top: 14px; padding-left: 1.2em; font-size: 0.88rem; color: var(--slate-text); max-width: none !important; }
.guide-sources li { margin-top: 6px; }
.guide-sources a { color: var(--navy); }

/* Guide round 4 (Alec, 7 Oct 2026) */
/* Opening visual: abstract year of pipeline (js/site.js) */
.g-cols { padding: 8px 0; }
.gc-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; align-items: end; height: 210px; border-bottom: 2px solid #c9d1d3; }
.gc-bars i { display: block; height: 30%; border-radius: 4px 4px 0 0; background: var(--slate); transition: height 0.7s ease, background 0.7s ease; }
.g-cols.steady .gc-bars i { background: var(--navy); }
/* Iceberg: cyan tip, wavy dotted waterline, navy body in a light cyan sea */
.g-ice { gap: 0; }
.ib-top { width: 56%; background: var(--cyan); clip-path: polygon(50% 0, 100% 100%, 0 100%); margin-bottom: -1px; }
.ib-top span { color: var(--navy); }
.ib-wave { display: block; width: 100%; height: 12px; margin: 0; }
.ib-wave path { fill: none; stroke: var(--cyan); stroke-width: 2.5; stroke-dasharray: 6 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ib-sea { width: 100%; background: linear-gradient(var(--cyan-wash), #f4fbfc); border-radius: 0 0 var(--radius) var(--radius); display: flex; justify-content: center; padding: 0 0 18px; }
.ib-bottom { margin-top: 0; width: 100%; clip-path: polygon(22% 0, 78% 0, 100% 34%, 88% 100%, 12% 100%, 0 38%); }
.ib-line { display: none; }
/* The "do both" band now holds two paragraphs, a touch smaller */
.guide .g-both { margin-top: 14px; padding: 12px 18px; border-left: 4px solid var(--cyan); background: var(--cyan-wash); color: var(--navy); font-size: 0.95rem; }
.guide .g-both p + p { margin-top: 8px; }
/* Six tiles: three across, two deep */
.g-tiles { grid-template-columns: repeat(3, 1fr); gap: 22px 28px; }
@media (max-width: 860px) { .g-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .g-tiles { grid-template-columns: 1fr; } }
.guide .g-both p { max-width: none; }
/* Iceberg, final (Alec, 7 Oct 2026): no sea panel, tip sits straight on the body, little seaside waves across the join */
.g-ice { position: relative; }
.ib-top { margin-bottom: 0; }
.ib-wave { position: absolute; left: -4%; width: 108%; height: 16px; top: var(--ib-join, 0); transform: translateY(-50%); overflow: visible; }
.ib-wave path { stroke-dasharray: none; stroke-width: 2; stroke: var(--cyan); fill: none; stroke-linecap: round; }
.ib-wave path.w2 { opacity: 0.55; }
/* Iceberg as one SVG (Alec, 7 Oct 2026): supersedes the .ib-top / .ib-bottom / .ib-wave pieces above */
.g-ice { display: block; }
.g-ice svg { width: 100%; height: auto; display: block; }
.g-ice .ib-tip { font: 700 12px 'Lato', sans-serif; fill: var(--navy); text-anchor: middle; }
.g-ice .ib-body { font: 700 12.5px 'Lato', sans-serif; fill: var(--white); text-anchor: middle; }
.g-ice .ib-waves { fill: none; stroke: var(--white); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: miter; }

/* Your agents on the home page (Alec, 13 Oct 2026): the five cards (agents.css) on one laptop screen */
#agents { padding: 56px 0 44px; }
#agents h2 { font-size: clamp(1.9rem, 2.5vw, 2.2rem); }
#agents .lead { margin-bottom: 4px; }

/* Hiring vs Vocara: why it counts more than one BDR, and the staircase chart (Alec, 14 Oct 2026) */
/* Light red so it's seen (Alec, 14 Oct 2026); a true red, not the coral that means a button */
.hv-bp { display: flex; align-items: center; gap: 18px; margin-top: 12px; padding: 8px 16px; border-radius: 10px; background: #fdeceb; border-left: 4px solid #d64545; }
.hv-bp[hidden], .hv-bp [hidden] { display: none; }
.hv-bp p { flex: 1; max-width: none; margin: 0; font-size: 0.86rem; line-height: 1.45; color: var(--navy); }
.hv-bp .btn-outline { flex: none; padding: 7px 14px; font-size: 0.88rem; }
.hv-panel.wide { width: min(640px, 94vw); }
.hv-curve-legend { display: flex; gap: 18px; font-size: 0.82rem; color: var(--slate-text); margin-bottom: 6px; }
.hv-curve-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hv-curve-legend i { width: 16px; height: 0; border-top: 2px solid; display: inline-block; }
.hv-curve svg { display: block; width: 100%; height: auto; overflow: visible; }
.hv-curve .tip { position: absolute; pointer-events: none; background: var(--navy); color: #fff; font-size: 0.8rem; line-height: 1.4; padding: 7px 10px; border-radius: 8px; white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); }
.hv-curve .tip b { color: var(--cyan); }
.hv-curve-now { margin-top: 10px; font-size: 0.9rem; color: var(--navy); }
.hv-curve details { margin-top: 12px; font-size: 0.85rem; }
.hv-curve summary { cursor: pointer; color: var(--slate-text); font-weight: 600; }
.hv-curve table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.hv-curve th, .hv-curve td { text-align: right; padding: 4px 6px; border-bottom: 1px solid #e6eaeb; }
.hv-curve th:first-child, .hv-curve td:first-child { text-align: left; }
.hv-curve tr.now td { font-weight: 700; color: var(--navy); }
@media (max-width: 900px) { .hv-bp { flex-direction: column; align-items: flex-start; gap: 8px; } }

/* Laptops: the badges fit on one line, so the cards needn't hold room for them to wrap; with the note showing, the
   verdict takes only the lines it needs. Keeps the first screen on one screen (1380x760 to 1512x860) */
@media (min-width: 1300px) {
  .hv-card .who { min-height: 34px; }
  .hv-card dl { margin-top: 10px; padding-top: 10px; }
  .hv-calc.has-bp .hv-verdict { min-height: 0; margin-top: 10px; }
  .hv-calc.has-bp .hv-bp { margin-top: 10px; }
}