/* ==========================================================================
   pages/index.css — de homepagina (klassen met hm-)

   Volgorde zoals op de pagina: de hero-kop → #demo (één vraag in drie
   tellen: je vraagt, je agent werkt, je krijgt het bestand) → dezelfde
   infrastructuur (marquee) → #pricing (drie plannen, maand of jaar) → in
   getallen (.hm-glance) → de film → #moves (vier stappen, met het beeld dat
   meeloopt en een replay van de chat) → #agenda (een agendablok, de week en
   Review) → #explore (verder kijken).
   ========================================================================== */

/* ---------- hero: één korte verkoopzin, groot ---------- */

.hero h1 {
  max-width: 12ch;
  font-size: clamp(44px, 7.2vw, 112px);
  line-height: 1;
  text-wrap: balance;
}
/* Staand op een telefoon: onder de knoppen blijft altijd ruimte voor het
   karakter. Wordt het scherm te laag, dan groeit de hero mee in plaats van
   dat het gezicht tegen "See the demo" aan komt (main.js houdt de ogen
   minstens 32px onder de knoppen). */
@media (max-width: 760px) and (orientation: portrait) {
  .hero-panel {
    height: auto;
    min-height: max(620px, calc(100vh - 2 * var(--frame)));
    min-height: max(620px, calc(100svh - 2 * var(--frame)));
  }
  .hero-copy { flex: 1 0 auto; padding-bottom: clamp(170px, 46vw, 250px); }
}
/* Op een telefoon loopt de gloed onder de lead en de knoppen door: de lead
   in de donkerste inkt en "See the demo" op wit, zodat beide ≥ 4.5:1 halen. */
.hero .actions .btn-line { background: var(--surface); }
@media (max-width: 760px) {
  .hero .lead { color: var(--ink); }
}
/* staand op een tablet: de tekstballon smaller, zodat hij naast de tekst
   blijft in plaats van eroverheen */
@media (min-width: 560px) and (max-width: 900px) and (orientation: portrait) {
  .hero .bubble { max-width: 200px; }
}

/* ---------- 0. #demo: één vraag, drie tellen ---------- */

.hm-demo .sec-head h2 { margin-top: clamp(24px, 3.4vw, 52px); }
.hm-demo-play { display: grid; gap: clamp(14px, 1.6vw, 20px); }
.hm-demo-stage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.hm-beat { display: flex; flex-direction: column; gap: 12px; min-width: 0; transition: opacity .45s ease; }
.hm-beat.is-wait { opacity: .4; }
.hm-beat-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 4px;
  font: 500 clamp(18px, 1.6vw, 22px)/1.15 var(--sans);
  letter-spacing: -.025em;
}
.hm-beat-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0;
  box-shadow: 0 0 0 1px var(--line);
  transition: background-color .3s ease, color .3s ease;
}
.hm-beat.is-now .hm-beat-n { background: var(--btn); color: var(--btn-ink); box-shadow: none; }
.hm-beat-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 340px;
  padding: clamp(16px, 1.6vw, 22px);
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: box-shadow .35s ease;
}
.hm-beat.is-now .hm-beat-card { box-shadow: 0 0 0 2px var(--c), var(--shadow-card); }

/* getypte tekst: een onzichtbare kopie houdt de maat vast, de getypte tekst
   ligt eroverheen. Zo verspringt er niets terwijl hij verschijnt. */
.hm-d-ask, .hm-d-say { position: relative; margin: 0; }
.hm-d-ghost { visibility: hidden; }
.hm-d-typed { position: absolute; inset: 0; }
.hm-d-ask .hm-d-typed { inset: 12px 16px; }
.hm-demo-play.is-typing .hm-d-ask .hm-d-typed::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 2px;
  background: var(--ink);
  vertical-align: -.18em;
  animation: hm-caret 1s steps(1) infinite;
}
@keyframes hm-caret { 50% { opacity: 0; } }

/* 1. je vraagt */
.hm-d-to {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: rgba(12, 19, 48, .68);
  font-size: 12.5px;
  font-weight: 600;
}
.hm-d-ask {
  align-self: flex-end;
  max-width: 94%;
  padding: 12px 16px;
  border-radius: 18px 18px 6px 18px;
  background: var(--panel);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.45;
}
.hm-d-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: auto 0 0;
  padding: 7px 7px 7px 15px;
  border-radius: 14px;
  box-shadow: 0 0 0 1px var(--line-2);
  color: var(--ink-3);
  font-size: 14px;
}
.hm-d-send {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--btn);
  color: var(--btn-ink);
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.hm-d-send svg { width: 17px; height: 17px; }
.hm-demo-play.is-sent .hm-d-send { transform: scale(.82); }

/* 2. je agent werkt: het karakter van reservations en drie stappen */
.hm-d-agent { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.hm-d-char {
  flex: none;
  width: clamp(120px, 11vw, 160px);
  aspect-ratio: 1;
  border-radius: 22px;
  background: #fff;
}
.hm-d-who { display: grid; gap: 3px; margin: 0; min-width: 0; }
.hm-d-who b { font-size: clamp(17px, 1.4vw, 19px); font-weight: 500; letter-spacing: -.02em; }
.hm-d-now { color: var(--ink-3); font-size: 13.5px; }
.hm-d-steps { display: grid; gap: 7px; margin-top: auto; }
.hm-d-step { transition: opacity .3s ease; }
.hm-d-step .toolcard-name { font-size: 13.5px; }
.hm-d-step .toolcard-state { font-size: 12px; }
.hm-d-step[data-state="wait"] { opacity: .45; }
.hm-d-tick {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line-2);
  transition: background-color .25s ease, box-shadow .25s ease;
}
.hm-d-step[data-state="running"] .hm-d-tick { box-shadow: inset 0 0 0 1.5px var(--signal); }
.hm-d-step[data-state="done"] .hm-d-tick { background: var(--ink); box-shadow: none; }
.hm-d-step[data-state="done"] .hm-d-tick::after {
  content: "";
  position: absolute;
  left: 6.5px;
  top: 4px;
  width: 4px;
  height: 7.5px;
  border: solid #fff;
  border-width: 0 1.7px 1.7px 0;
  transform: rotate(42deg);
}

/* 3. je krijgt het bestand: antwoord, downloadkaart zoals in de tool, en wat erin staat */
.hm-d-say { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.45; }
.hm-d-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 14px;
  box-shadow: 0 0 0 1px var(--line), 0 6px 16px -10px rgba(12, 19, 48, .3);
}
.hm-d-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #e6f4ea;
  color: #1d6b3a;
}
.hm-d-ico svg { width: 20px; height: 20px; }
.hm-d-fname { display: grid; min-width: 0; font-size: 12px; line-height: 1.35; color: var(--ink-3); }
.hm-d-fname b { overflow: hidden; color: var(--ink); font-size: 13.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.hm-d-dl {
  flex: none;
  margin-left: auto;
  padding: 8px 12px;
  border-radius: 9px;
  background: var(--btn);
  color: var(--btn-ink);
  font-size: 12.5px;
  font-weight: 500;
}
.hm-d-sheet { margin-top: auto; }
.hm-d-inside { margin: 0 0 6px 2px; color: var(--tag); font-size: 12.5px; }
.hm-d-sheet table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  line-height: 1.3;
}
.hm-d-sheet th, .hm-d-sheet td {
  padding: 5px 9px;
  border: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}
.hm-d-sheet th:first-child, .hm-d-sheet td:first-child { text-align: left; }
.hm-d-sheet th { background: var(--panel); color: var(--ink-2); font-weight: 500; }
.hm-d-sheet tfoot td { border-top: 1.5px solid var(--ink); font-weight: 600; }

/* wat nog moet komen staat er al (geen verspringen), maar onzichtbaar */
.hm-d-ask, .hm-d-file, .hm-d-sheet { transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.hm-demo-play .is-off { opacity: 0; transform: translateY(8px); }

.hm-demo-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}
.hm-demo-cap { margin: 0 6px; color: var(--tag); font-size: 13.5px; line-height: 1.4; }
.hm-demo-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hm-demo-ctrl .pill { font-size: 13.5px; }
.hm-demo-ctrl .pill[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); }
.hm-demo-cta { margin-left: 6px; }

@media (max-width: 899px) {
  .hm-demo-stage { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hm-beat { gap: 8px; }
  .hm-beat-card { min-height: 0; }
  .hm-d-bar { display: none; }
  .hm-d-agent { flex-direction: row; gap: 12px; text-align: left; }
  .hm-d-char { width: 76px; border-radius: 18px; }
  .hm-demo-foot { justify-content: flex-start; }
}
@media (max-width: 480px) {
  .hm-demo-ctrl { width: 100%; }
  .hm-demo-cta { flex: 1 0 100%; margin: 4px 0 0; }
  .hm-d-step .toolcard-state { display: none; }
}
@media (max-width: 380px) {
  .hm-d-ico { display: none; }
  .hm-d-fname b { white-space: normal; overflow-wrap: anywhere; }
}

/* Tel 3 staat er al in zijn eindmaat, als skelet: de regels van het
   antwoord, de omtrek van de downloadkaart en het raster van de tabel. Zo is
   er op een telefoon geen lege hoge kaart en verspringt er niets. */
.hm-d-say .hm-d-ghost {
  border-radius: 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color .35s ease;
}
.hm-demo-play .hm-beat.is-wait .hm-d-say .hm-d-ghost { visibility: visible; color: transparent; background: rgba(12, 19, 48, .07); }
.hm-demo-play .hm-d-file.is-off, .hm-demo-play .hm-d-sheet.is-off { opacity: 1; transform: none; }
.hm-d-file > *, .hm-d-inside, .hm-d-sheet th, .hm-d-sheet td { transition: opacity .35s ease, color .35s ease, background-color .35s ease; }
.hm-d-file { transition: background-color .35s ease, box-shadow .35s ease; }
.hm-demo-play .hm-d-file.is-off { background: rgba(12, 19, 48, .03); box-shadow: 0 0 0 1px var(--line); }
.hm-demo-play .hm-d-file.is-off > * { opacity: 0; }
.hm-demo-play .hm-d-sheet.is-off :is(.hm-d-inside, th, td) { color: transparent; }
.hm-demo-play .hm-d-sheet.is-off th { background: rgba(12, 19, 48, .03); }
.hm-demo-play .hm-d-sheet.is-off tfoot td { border-top-color: var(--line-2); }

/* ---------- 0. in getallen ---------- */

.hm-glance { padding: var(--frame) var(--frame) 0; }
.hm-glance-in { border-radius: var(--r-block); background: var(--panel); }
.hm-glance-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  /* de cijfers hebben binnen hun vak een marge; het vak zelf begint op de lijn */
  margin: 0 calc(var(--inset) - clamp(14px, 1.8vw, 24px));
  padding: clamp(10px, 1.6vw, 18px) 0;
  list-style: none;
}
.hm-fig {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(16px, 2vw, 26px) clamp(14px, 1.8vw, 24px);
}
.hm-fig-n {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 clamp(38px, 4vw, 58px)/1 var(--sans);
  letter-spacing: -.045em;
}
.hm-fig-l { max-width: 24ch; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
.hm-fig-l::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--c);
  vertical-align: .08em;
}
@media (min-width: 700px) {
  .hm-glance-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .hm-glance-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hm-fig + .hm-fig { box-shadow: inset 1px 0 0 var(--line); }
}

/* ---------- 1. #moves: drie stappen ---------- */

/* Het blok kleurt mee met de stap in beeld (pages/index.js wisselt c-zon,
   c-mint en c-lila); zonder JavaScript blijft het mint. */
.hm-moves > .wrap { transition: background-color .6s ease; }
.hm-moves .eyebrow::before { transition: background-color .6s ease; }

/* Telefoon, en zonder JavaScript: elke stap met zijn beeld eronder */
.hm-steps { display: grid; gap: clamp(28px, 5vw, 56px); }
.hm-step { display: grid; gap: 14px; align-items: start; }
.hm-step > * { min-width: 0; }

.hm-card {
  padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.6vw, 34px) clamp(22px, 2.4vw, 30px);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-card);
}
.hm-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
}
.hm-num {
  color: var(--tag);
  font: 500 15px/1 var(--sans);
}
/* de voortgangsbalk van de onboarding in de tool, in het klein */
.hm-bars { display: flex; gap: 4px; }
.hm-bars i {
  position: relative;
  display: block;
  width: 26px;
  height: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(12, 19, 48, .1);
}
.hm-bars i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.hm-step:nth-child(1) .hm-bars i:nth-child(1)::after,
.hm-step:nth-child(2) .hm-bars i:nth-child(-n + 2)::after,
.hm-step:nth-child(3) .hm-bars i:nth-child(-n + 3)::after,
.hm-step:nth-child(4) .hm-bars i::after { transform: none; }
/* met JavaScript loopt de balk van een stap vol zodra die stap aan de beurt is */
.js .hm-bars i::after { transition: transform .8s cubic-bezier(.2, .8, .2, 1) .15s; }
.js .hm-step:nth-child(1):not(.is-seen) .hm-bars i:nth-child(1)::after,
.js .hm-step:nth-child(2):not(.is-seen) .hm-bars i:nth-child(2)::after,
.js .hm-step:nth-child(3):not(.is-seen) .hm-bars i:nth-child(3)::after,
.js .hm-step:nth-child(4):not(.is-seen) .hm-bars i:nth-child(4)::after { transform: scaleX(0); }
.hm-card-title {
  margin: clamp(34px, 4.6vw, 68px) 0 0;
  font: 500 clamp(28px, 2.7vw, 42px)/1.04 var(--sans);
  letter-spacing: -.035em;
  text-wrap: balance;
}
.hm-card-text {
  max-width: 46ch;
  margin: 14px 0 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.55;
}
.hm-card-tags { margin-top: 18px; font-size: 14.5px; }
.hm-card-link { display: inline-block; margin-top: 12px; font-size: 15.5px; }

/* Beeld 1: de marktvraag, met "your team is ready" over de hoek rechtsonder.
   Het onderschrift links blijft vrij van het tweede scherm. */
.hm-duo {
  position: relative;
  container-type: inline-size;
  padding-bottom: 4%;
}
.hm-duo-a { width: 78%; }
.hm-duo-a .shot-cap { max-width: calc(54cqi - 30px); }
.hm-duo-b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  box-shadow: 0 1px 2px rgba(12, 19, 48, .08), 0 26px 54px -22px rgba(12, 19, 48, .42);
}

/* Beeld 3: een replay van de chat. Zoals in de tool: menu en status
   linksboven, "All agents" vast in de hoek rechtsboven, het antwoord begint
   een rij lager. Alles schaalt mee met de breedte van de replica. */
.hm-chat { container: hm-chat / inline-size; }
.hm-chat .replica-sheet { background: #fff; }
.hm-chat [hidden] { display: none !important; }
.hm-chat-stage {
  position: absolute;
  inset: 0;
  color: var(--ink);
}
/* de gloed van het karakter, zacht in de kleur van reservations */
.hm-chat-stage::before {
  content: "";
  position: absolute;
  left: -16%;
  bottom: -34%;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(217, 81, 150, .2), rgba(217, 81, 150, .07) 60%, transparent);
  pointer-events: none;
}
.hm-chat-orb {
  --s: 38cqi;
  position: absolute;
  left: 5%;
  bottom: 6%;
}
.hm-chat-top {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 62px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.hm-chat-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  color: var(--ink);
}
.hm-chat-icon svg { width: 22px; height: 22px; }
.hm-chat-status {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hm-chat-title { font-weight: 550; }
.hm-chat-detail { color: rgba(12, 19, 48, .68); font-size: 12px; }
/* vast in de hoek, nooit naar links en nooit onder iets anders */
.hm-chat-all {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
}
.hm-chat-card {
  position: absolute;
  top: 62px;
  right: 14px;
  width: 70%;
}
.hm-chat-body {
  display: grid;
  gap: 14px;
  padding: clamp(12px, 2.6cqi, 18px);
  border: 1px solid rgba(12, 19, 48, .12);
  border-radius: 20px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 14px 44px rgba(12, 19, 48, .12);
}
.hm-msg { display: grid; gap: 5px; }
.hm-who { color: rgba(12, 19, 48, .68); font-size: 12px; font-weight: 600; line-height: 1.2; }
.hm-say { margin: 0; font-size: clamp(13px, 2.2cqi, 15px); line-height: 1.45; text-wrap: pretty; }
.hm-msg-agent .toolcard { margin: 1px 0 3px; }
.hm-chat-tail {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 7px 0 0 14px;
}
.hm-chat-tail i {
  display: block;
  border: 1px solid rgba(12, 19, 48, .12);
  border-radius: 50%;
  background: #fff;
}
.hm-chat-tail i:nth-child(1) { width: 13px; height: 13px; }
.hm-chat-tail i:nth-child(2) { width: 9px; height: 9px; }
.hm-chat-tail i:nth-child(3) { width: 5px; height: 5px; }
/* de praatknop onderin, zoals in de tool (hier alleen om te zien) */
.hm-chat-talk {
  position: absolute;
  left: 50%;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  border-radius: 50%;
  background: var(--btn);
  box-shadow: 0 10px 20px -10px rgba(12, 19, 48, .6);
}
.hm-chat-talk i { width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.hm-in { animation: hm-op .32s ease both; }
@keyframes hm-op { from { opacity: 0; transform: translateY(6px); } }

/* wat het karakter doet: nadenken, werken, praten */
.hm-chat[data-mood] .hm-chat-tail i { animation: hm-bel 1.25s ease-in-out infinite; border-color: rgba(12, 19, 48, .2); }
.hm-chat[data-mood] .hm-chat-tail i:nth-child(2) { animation-delay: .16s; }
.hm-chat[data-mood] .hm-chat-tail i:nth-child(3) { animation-delay: .32s; }
.hm-chat[data-mood="think"] .hm-chat-orb,
.hm-chat[data-mood="work"] .hm-chat-orb { animation: hm-denk 2.2s ease-in-out infinite; }
.hm-chat[data-mood="talk"] .hm-chat-orb { animation: hm-praat .34s ease-in-out infinite alternate; }
@keyframes hm-bel { 45% { transform: translateY(-4px) scale(1.14); } }
@keyframes hm-denk { 50% { transform: translateY(-4%) rotate(-3deg); } }
@keyframes hm-praat { to { transform: scale(1.045); } }

/* Smal, zoals de tool op een telefoon: het antwoord over de hele breedte */
@container hm-chat (max-width: 480px) {
  .hm-chat .replica-sheet { aspect-ratio: 4 / 5; }
  .hm-chat-card { left: 12px; right: 12px; width: auto; top: 58px; }
  .hm-chat-top { top: 12px; left: 10px; right: 56px; }
  .hm-chat-all { top: 12px; right: 12px; }
  .hm-chat-tail { flex-direction: column; gap: 4px; width: max-content; margin: 7px auto 0; }
  .hm-chat-orb { --s: 36cqi; left: 6%; bottom: 5%; }
  .hm-chat-talk { bottom: 12px; width: 36px; height: 36px; margin-left: -18px; }
}
@container hm-chat (max-width: 300px) {
  .hm-chat .replica-sheet { aspect-ratio: 2 / 3; }
  .hm-chat-talk { display: none; }
}

/* Vanaf 900px, met JavaScript: links de stappen, rechts één beeld dat blijft
   staan en overvloeit naar de stap in beeld. Geen scroll-kaping: het is
   gewoon sticky, de stap wordt gekozen door wat er in beeld is. */
@media (min-width: 900px) {
  .hm-step {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .js .hm-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
    row-gap: 14px;
  }
  .js .hm-step { display: contents; }
  .js .hm-slot { grid-column: 1; min-height: 70vh; }
  .js .hm-step:nth-child(1) .hm-slot { grid-row: 1; }
  .js .hm-step:nth-child(2) .hm-slot { grid-row: 2; }
  .js .hm-step:nth-child(3) .hm-slot { grid-row: 3; }
  .js .hm-step:nth-child(4) .hm-slot { grid-row: 4; min-height: var(--hm-last, 0px); }
  .js .hm-card { position: sticky; top: 96px; }
  .js .hm-media {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: start;
    position: sticky;
    top: 96px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px) scale(.985);
    transition: opacity .55s ease, transform .75s cubic-bezier(.2, .8, .2, 1);
  }
  .js .hm-media.is-on {
    z-index: 1;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  /* ook op een laag scherm past het hele beeld naast de stap */
  .js .hm-duo { max-width: calc((100vh - 150px) / .84); }
  .js .hm-media-2 .shot { max-width: calc((100vh - 160px) * 1.6); }
  .js .hm-chat { max-width: calc((100vh - 176px) * 4 / 3); }
  .js .hm-media-4 .shot { max-width: min(460px, calc((100vh - 170px) * .87)); }
}

/* een telefoonformaat scherm (Needs you) staat in het midden, niet uitgerekt */
.hm-media-4 .shot { max-width: 460px; margin-inline: auto; }

/* ---------- 2. #agenda: kaart → week → Review ---------- */

.hm-ag-play { display: grid; gap: clamp(14px, 1.6vw, 20px); }
.hm-ag-stage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.hm-ag-play .hm-beat-card { min-height: 380px; }

/* 1. de kaart: een agendablok met lijnen naar drie agents */
.hm-ag-map {
  position: relative;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle, rgba(12, 19, 48, .09) 1px, transparent 1.4px) 0 0 / 18px 18px,
    #fff;
}
.hm-ag-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hm-ag-line {
  fill: none;
  stroke: #1d7a99;
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
/* de lijnen tekenen zich van het blok naar de agents: een uitsnede die
   opengaat (een streepjespatroon werkt niet samen met non-scaling-stroke) */
.hm-ag-lines { clip-path: inset(0 0 0 0); transition: clip-path .8s cubic-bezier(.3, .7, .2, 1); }
.hm-ag-block, .hm-ag-agent { position: absolute; translate: -50% -50%; margin: 0; }
.hm-ag-block {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 10px 10px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 1.5px #1d7a99, var(--shadow-sm);
  font-size: 14px;
  white-space: nowrap;
}
.hm-ag-block b { font-weight: 600; }
.hm-ag-block-ico {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #1d7a99;
  color: #fff;
}
.hm-ag-block-ico svg { width: 18px; height: 18px; }
.hm-ag-badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--btn);
  color: var(--btn-ink);
  font-size: 12px;
  font-weight: 600;
}
.hm-ag-agent {
  display: grid;
  justify-items: center;
  gap: 4px;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}
.hm-ag-agent b { font-weight: 500; padding: 1px 7px; border-radius: 99px; background: rgba(255, 255, 255, .9); }
.hm-ag-agent--los { opacity: .55; }
.hm-ag-agent--los span { color: var(--ink-3); font-size: 12px; }

/* 2. de week, blokken in de kleur van de agent */
.hm-ag-week { gap: 10px; }
.hm-ag-week-top { display: flex; align-items: baseline; justify-content: space-between; margin: 0; font-size: 13px; color: var(--ink-3); }
.hm-ag-week-top b { color: var(--ink); font-weight: 600; font-size: 14px; }
.hm-ag-days {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(40px, .5fr) minmax(0, 1.6fr) minmax(40px, .5fr) minmax(40px, .5fr);
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hm-ag-day {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 6px 5px;
  border-radius: 10px;
  background: var(--panel);
}
.hm-ag-dn { margin: 0 0 2px 3px; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.hm-ag-dn span { color: var(--ink); font-weight: 600; }
.hm-ag-task {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 7px 8px;
  border-radius: 8px;
  border-left: 3px solid var(--a);
  background: var(--tint, #f4f5f7);
  background: color-mix(in srgb, var(--a) 13%, #fff);
  font-size: 12px;
  line-height: 1.25;
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.hm-ag-task b { font-weight: 600; font-size: 12px; }
.hm-ag-task span { color: var(--ink-2); }
.hm-ag-task em { color: var(--ink-3); font-style: normal; }
.hm-ag-when { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0; font-size: 12px; }
.hm-ag-when span { margin-right: 3px; color: var(--ink-3); }
.hm-ag-when i { padding: 4px 9px; border-radius: 99px; box-shadow: 0 0 0 1px var(--line-2); font-style: normal; }
.hm-ag-when i.is-on { background: var(--btn); color: var(--btn-ink); box-shadow: none; }

/* 3. Review */
.hm-ag-rv-top { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.hm-ag-rv-top b { font-weight: 600; }
.hm-ag-rv {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--line), 0 10px 24px -16px rgba(12, 19, 48, .35);
  transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.hm-ag-rv-t { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14.5px; }
.hm-ag-rv-t b { font-weight: 600; }
.hm-ag-rv-meta { margin: 0; color: var(--ink-3); font-size: 12px; }
.hm-ag-rv-sum { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.hm-ag-file { padding: 9px 10px; }
.hm-ag-file .hm-d-ico { width: 32px; height: 32px; }
.hm-ag-rv-btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; }
.hm-ag-btn {
  padding: 7px 12px;
  border-radius: 9px;
  box-shadow: 0 0 0 1px var(--line-2);
  font-size: 12.5px;
  font-weight: 500;
}
.hm-ag-btn--ink { background: var(--btn); color: var(--btn-ink); box-shadow: none; }
.hm-ag-btn--stil { box-shadow: none; color: var(--ink-2); }
.hm-ag-safe { display: flex; align-items: center; gap: 8px; margin: auto 0 0; color: var(--ink-2); font-size: 13px; }
.hm-ag-lock { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--panel); }
.hm-ag-lock svg { width: 16px; height: 16px; }

/* wat nog komt: de lijnen niet getekend, de blokken en de kaart onzichtbaar */
.hm-ag-play.is-leeg .hm-ag-lines { clip-path: inset(0 70% 0 30%); }
.hm-ag-play .hm-ag-task.is-off, .hm-ag-play .hm-ag-rv.is-off { opacity: 0; transform: translateY(8px); }
.hm-ag-task.is-run { box-shadow: 0 0 0 2px var(--a); }

@media (max-width: 899px) {
  .hm-ag-stage { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hm-ag-play .hm-beat-card { min-height: 0; }
  .hm-ag-map { flex: none; height: 300px; }
}
@media (max-width: 599px) {
  /* op een telefoon: de week als lijst, alleen de dagen met werk */
  .hm-ag-days { grid-template-columns: minmax(0, 1fr); }
  .hm-ag-day:not(:has(.hm-ag-task)) { display: none; }
  .hm-ag-day { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .hm-ag-dn { flex: 0 0 100%; }
  .hm-ag-task { flex: 1 1 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-ag-lines, .hm-ag-task, .hm-ag-rv { transition: none; }
}

/* ---------- 5. #pricing: drie plannen ---------- */

.hm-period-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 14px;
}
html:not(.js) .hm-period { display: none; }
.hm-period button { display: inline-flex; align-items: center; gap: 8px; }
.hm-save {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--tint, #f4f5f7);
  background: color-mix(in srgb, var(--c) 30%, #fff);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.2;
}
.hm-period-note { font-size: 14.5px; }

.hm-plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
}
@media (min-width: 760px) {
  .hm-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.hm-plan {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 28px);
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.hm-plan-pro { box-shadow: 0 0 0 1.5px var(--ink), 0 22px 44px -22px rgba(12, 19, 48, .4); }
.hm-plan-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  min-height: 42px;
}
.hm-plan-name {
  margin: 0;
  font: 500 clamp(26px, 2.2vw, 32px)/1 var(--sans);
  letter-spacing: -.035em;
}
/* het team als bolletjes: bij aanwijzen springen ze na elkaar op */
.hm-team { display: flex; align-items: center; }
.hm-team .orb {
  --s: clamp(22px, 9cqi, 30px);
  margin-left: calc(var(--s) * -.3);
  transition: transform .45s cubic-bezier(.3, 1.6, .5, 1);
}
.hm-team .orb:first-child { margin-left: 0; }
.hm-team .orb:nth-child(2) { transition-delay: .04s; }
.hm-team .orb:nth-child(3) { transition-delay: .08s; }
.hm-team .orb:nth-child(4) { transition-delay: .12s; }
.hm-team .orb:nth-child(5) { transition-delay: .16s; }
.hm-team .orb:nth-child(6) { transition-delay: .2s; }
.hm-plan:hover .hm-team .orb,
.hm-plan:focus-within .hm-team .orb { transform: translateY(-5px); }
/* business: het team op je eigen plek */
.hm-team-own {
  padding: 3px 7px;
  border: 1.5px dashed var(--line-2);
  border-radius: 999px;
}

.hm-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin: clamp(28px, 11cqi, 46px) 0 0;
}
.hm-amount {
  font: 500 clamp(44px, 20cqi, 68px)/1 var(--sans);
  letter-spacing: -.045em;
}
.hm-amount-talk { font-size: min(68px, 21cqi); letter-spacing: -.04em; }
.hm-unit { color: var(--ink-3); font-size: 15px; line-height: 1.3; }
.hm-price-note {
  margin: 10px 0 0;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.45;
}
/* maand of jaar: beide staan in de HTML, op dezelfde plek; alleen de
   gekozen is te zien (zonder JavaScript: maand) */
.hm-swap { display: grid; }
.hm-swap > * {
  grid-area: 1 / 1;
  transition: opacity .3s ease .06s, transform .45s cubic-bezier(.2, .8, .2, 1) .06s, visibility 0s linear 0s;
}
.hm-swap > [data-per="jaar"],
.hm-pricing[data-period="jaar"] .hm-swap > [data-per="maand"] {
  visibility: hidden;
  opacity: 0;
  transform: translateY(.4em);
  transition: opacity .18s ease, transform .3s ease, visibility 0s linear .3s;
}
.hm-pricing[data-period="jaar"] .hm-swap > [data-per="maand"] { transform: translateY(-.4em); }
.hm-pricing[data-period="jaar"] .hm-swap > [data-per="jaar"] {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .3s ease .06s, transform .45s cubic-bezier(.2, .8, .2, 1) .06s, visibility 0s linear 0s;
}
.hm-plan-meta {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.hm-plan-meta .block-dot { background: var(--c); }
.hm-plan-line {
  margin: 12px 0 26px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}
.hm-plan-go { width: 100%; margin-top: auto; }
.hm-pricing-note { margin-top: 18px; text-align: center; }

/* ---------- 7. #explore: verder kijken ---------- */

.hm-next-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
}
@media (min-width: 600px) { .hm-next-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hm-next-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hm-next-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  padding: clamp(20px, 2vw, 26px);
  border-radius: var(--r-card);
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}
.js .hm-next-card.reveal.is-in:hover,
.hm-next-card:hover { transform: translateY(-5px); box-shadow: 0 0 0 1px rgba(12, 19, 48, .04), 0 26px 50px -26px rgba(12, 19, 48, .35); transition-delay: 0s; }
.hm-next-card:focus-visible { outline-offset: 4px; }
/* een klein karakter in de kleur van de pagina, zonder WebGL */
.hm-next-orb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 64px;
  height: 64px;
  padding: 0 7px 10px 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--o0) 0%, var(--o0) 38%, var(--o1) 66%, var(--o2) 88%, transparent 100%);
  transition: transform .45s cubic-bezier(.3, 1.6, .5, 1);
}
.hm-next-orb i {
  width: 10px;
  height: 17px;
  border-radius: 99px;
  background: #fff;
  transform: rotate(11deg);
  animation: blink 6s infinite;
}
.hm-next-card:nth-child(2) .hm-next-orb i { animation-delay: -1.5s; }
.hm-next-card:nth-child(3) .hm-next-orb i { animation-delay: -3s; }
.hm-next-card:nth-child(4) .hm-next-orb i { animation-delay: -4.5s; }
.hm-next-card:hover .hm-next-orb { transform: translateY(-6px) rotate(-6deg); }
.hm-next-t {
  margin-top: auto;
  padding-top: 28px;
  font: 500 clamp(32px, 3vw, 44px)/1 var(--sans);
  letter-spacing: -.04em;
}
.hm-next-d { margin-top: 10px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.hm-next-card .tile-meta { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; }
.hm-next-go { margin-left: auto; color: var(--tag); transition: transform .2s ease, color .2s ease; }
.hm-next-card:hover .hm-next-go { color: var(--ink); transform: translateX(3px); }

/* ---------- minder beweging: alles staat meteen in zijn eindstand ---------- */

@media (prefers-reduced-motion: reduce) {
  .hm-team .orb { transform: none !important; }
  .hm-next-card:hover, .hm-next-card:hover .hm-next-orb { transform: none !important; }
  .js .hm-media { transform: none; }
}

/* ---------- onder de hero: dezelfde infrastructuur (marquee) ---------- */

.hm-infra {
  display: grid;
  gap: 14px;
  padding: clamp(22px, 3vw, 36px) var(--frame) clamp(6px, 1vw, 10px);
}
.hm-infra-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 24px;
  padding: 0 var(--inset);
}
.hm-infra-titel {
  display: flex;
  max-width: none;
  white-space: nowrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 500 15px/1.3 var(--sans);
  color: var(--ink-2);
}
.hm-infra-noot { margin: 0; max-width: 60ch; color: var(--tag); font-size: 13px; line-height: 1.45; }
.hm-marquee {
  --gap: clamp(40px, 5vw, 72px);
  display: flex;
  overflow: hidden;
  gap: var(--gap);
  padding: clamp(18px, 2.4vw, 28px) 0;
  border-radius: var(--r-block);
  background: var(--panel);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.hm-marquee-rij {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--gap);
  min-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: hm-marquee 46s linear infinite;
}
.hm-marquee:hover .hm-marquee-rij { animation-play-state: paused; }
@keyframes hm-marquee { to { transform: translateX(calc(-100% - var(--gap))); } }
@media (prefers-reduced-motion: reduce) {
  .hm-marquee { flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; }
  .hm-marquee-rij { flex-wrap: wrap; justify-content: center; min-width: 0; row-gap: 14px; animation: none; }
  .hm-marquee-rij[aria-hidden] { display: none; }
}

/* Logo en naam: in inkt, in de eigen merkkleur zodra je erop staat. */
.hm-logos { position: absolute; width: 0; height: 0; overflow: hidden; }
.hm-merk {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  color: #1c1c24;
  opacity: .7;
  font: 600 clamp(17px, 1.7vw, 21px)/1 var(--sans);
  letter-spacing: -.02em;
  white-space: nowrap;
  transition: opacity .2s ease, color .2s ease;
}
.hm-merk-logo { width: clamp(28px, 2.6vw, 36px); height: clamp(28px, 2.6vw, 36px); fill: currentColor; }
.hm-merk:hover { opacity: 1; }
.hm-merk:hover .hm-merk-logo { fill: var(--merk); }

/* ---------------- de film ---------------- */
.hm-film-kader {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--r-card); background: var(--panel);
  box-shadow: 0 1px 0 rgb(17 24 39 / .06), 0 24px 60px -28px rgb(17 24 39 / .35);
  aspect-ratio: 16 / 9;
}
.hm-film-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.hm-film-speel {
  position: absolute; inset: 0; margin: auto;
  width: 96px; height: 96px; border: 0; border-radius: 50%;
  background: #111827; color: #fff; cursor: pointer;
  box-shadow: 0 18px 40px -16px rgb(17 24 39 / .6);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), background .2s ease;
}
.hm-film-speel span {
  display: block; width: 0; height: 0; margin-left: 38px;
  border-style: solid; border-width: 14px 0 14px 23px;
  border-color: transparent transparent transparent currentColor;
}
.hm-film-speel:hover { transform: scale(1.06); }
.hm-film-speel:focus-visible { outline: 3px solid #3b6fe0; outline-offset: 4px; }
@media (max-width: 640px) {
  .hm-film-kader { border-radius: var(--r-card); }
  .hm-film-speel { width: 72px; height: 72px; }
  .hm-film-speel span { margin-left: 29px; border-width: 11px 0 11px 18px; }
}
@media (prefers-reduced-motion: reduce) { .hm-film-speel { transition: none; } }