/* Hallmark · macrostructure: Letter (adapted: the page reads as the meeting you are about to book) · genre: modern-minimal
 * theme: Humantic brand system (locked Oct 13; preserved, not rotated) · enrichment: none (type, real faces, real logos)
 * pre-emit critique: P4 H5 E4 S5 R5 V4
 * /start/demo (Website V2, Oct 18 2026, opus-start-demo). Sections: hero (mist: copy, booking card, numbers, logos),
 * what happens (white), who it is for (mist), voices (ink, shared hx-voices), FAQ (white, shared hai-faq).
 * One moment of motion: the booking card swaps form -> calendar in place. Everything else is still.
 * Colours: gold, gold 300, violet (focus only), ink, lavender (input focus halo only), mist, slate, white. No cream boxes, no green, no red.
 */
.dm { --ink:#110A33; --violet:#341D99; --gold:#FFC61E; --gold-3:#FFE8A5; --lav:#DDD6FF; --mist:#F6F4FF; --slate:#5B6478; --line:rgba(17,10,51,.12);
  --ease:cubic-bezier(.23,1,.32,1); --fade:cubic-bezier(.2,0,0,1); --disp:"Cabinet Grotesk",Cabinetgrotesk,Arial,sans-serif;
  --sh-sm:0 2px 8px rgba(17,10,51,.08); --sh-md:0 12px 32px -12px rgba(17,10,51,.22);
  font-family:Manrope,Arial,sans-serif; color:var(--ink); }
html:has(body.dm-page), body.dm-page { overflow-x:clip; }
body.dm-page { margin:0; background:#fff; }
.dm *, .dm *::before, .dm *::after { box-sizing:border-box; }
.dm p { margin:0; text-wrap:pretty; }
.dm [id] { scroll-margin-top:96px; }
.dm-wrap { max-width:1200px; margin:0 auto; padding:0 clamp(16px,4vw,48px); }
.dm a:focus-visible, .dm button:focus-visible { outline:2px solid var(--violet); outline-offset:3px; border-radius:8px; }

/* ---------- Hero: copy left, booking card right, numbers under the copy ---------- */
.dm-hero { background:var(--mist); padding:clamp(104px,10vw,136px) 0 56px; }
/* copy + numbers sit centred against the card (rows 1 and 4 absorb the slack), so no hole opens between them */
.dm-hero__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,472px); grid-template-areas:". book" "copy book" "proof book" ". book"; grid-template-rows:1fr auto auto 1fr; column-gap:clamp(32px,6vw,96px); align-items:start; }
.dm-copy { grid-area:copy; }
body.hai .dm-copy h1 { margin:0; font:700 clamp(38px,6vw,76px)/1.04 var(--disp); letter-spacing:-.04em; color:var(--ink); text-wrap:balance; }
.dm-lead { margin-top:20px !important; max-width:46ch; font-size:17.5px; line-height:28px; color:var(--ink); }

/* Numbers: a quiet ledger under the copy, not a hero-metric template */
.dm-proof { grid-area:proof; padding-top:40px; }
.dm-nums { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; border-top:1px solid var(--line); }
.dm-nums > div { display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:4px; padding:16px 16px 0 0; }
.dm-nums > div + div { padding-left:16px; border-left:1px solid var(--line); }
.dm-nums dd { margin:0; font:700 clamp(28px,3vw,36px)/1 var(--disp); letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--ink); }
.dm-nums dt { font-size:14px; line-height:20px; color:var(--slate); text-wrap:balance; }
.dm-proof__line { margin-top:16px !important; font-size:14px; line-height:20px; color:var(--slate); }

/* ---------- Booking card (one surface for both steps) ---------- */
.dm-book { grid-area:book; position:relative; padding:28px; background:#fff; border-radius:24px; box-shadow:var(--sh-md); }
.dm-steps { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:0 0 20px; }
.dm-steps span { position:relative; height:4px; border-radius:999px; background:var(--mist); overflow:hidden; }
.dm-steps span::after { content:""; position:absolute; inset:0; border-radius:inherit; background:var(--ink); transform:scaleX(0); transform-origin:left center; transition:transform .32s var(--ease); }
.dm-steps span.is-on::after { transform:scaleX(1); }
.dm-step { font-size:13px; line-height:16px; font-weight:700; color:var(--slate); }
body.hai .dm-card-h { margin:6px 0 20px; font:700 24px/1.15 var(--disp); letter-spacing:-.02em; color:var(--ink); outline:none; }

.dm-field { margin:0 0 16px; }
.dm-field label { display:block; margin:0 0 8px; font-size:14px; line-height:20px; font-weight:700; color:var(--ink); }
.dm-opt { font-weight:500; color:var(--slate); }
.dm-field input { display:block; width:100%; height:48px; padding:0 16px; border:1.5px solid rgba(17,10,51,.18); border-radius:12px; background:#fff;
  font:500 16px/1 Manrope,Arial,sans-serif; color:var(--ink); transition:border-color .15s var(--fade), box-shadow .15s var(--fade); }
.dm-field input::placeholder { color:var(--slate); }
@media (hover:hover) and (pointer:fine) { .dm-field input:hover { border-color:rgba(17,10,51,.36); } }
.dm-field input:focus { outline:none; border-color:var(--ink); box-shadow:0 0 0 3px var(--lav); }
.dm-field input[aria-invalid="true"] { border-color:var(--ink); box-shadow:0 0 0 2px var(--ink); }
.dm-err { display:flex; align-items:flex-start; gap:6px; margin-top:8px !important; font-size:14px; line-height:20px; font-weight:600; color:var(--ink); }
.dm-err[hidden] { display:none; }
.dm-err svg { flex:none; margin-top:2px; }

/* AK Oct 19: the whole label is the tap target, at least 44x44 at every width. The visible box stays 20x20. */
.dm-check { display:flex; align-items:flex-start; gap:10px; box-sizing:border-box; min-height:44px; min-width:44px; padding:4px 0 0; font-size:14px; line-height:20px; color:var(--slate); cursor:pointer; }
.dm-check input { flex:none; width:20px; height:20px; margin:0; accent-color:var(--ink); cursor:pointer; }

.dm-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:52px; margin-top:12px; padding:12px 24px; border:0; border-radius:999px;
  font:700 17px/1 var(--disp); color:var(--ink); text-decoration:none; cursor:pointer; touch-action:manipulation; transition:transform .16s var(--ease), background-color .2s var(--fade); }
.dm-btn--gold { background:var(--gold); }
@media (hover:hover) and (pointer:fine) { .dm-btn--gold:hover { background:var(--gold-3); } .dm-btn--gold:hover svg { transform:translateX(3px); } }
.dm-btn svg { transition:transform .2s var(--ease); }
.dm-btn:active { transform:scale(.96); }
.dm-btn[aria-busy="true"] { cursor:progress; }
.dm-btn[aria-busy="true"] svg { opacity:0; }
.dm-fine { margin-top:16px !important; font-size:13px; line-height:20px; color:var(--slate); }
.dm-fine a, .dm-alt a { color:var(--ink); font-weight:700; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.dm-alt { margin-top:12px !important; padding-top:12px; border-top:1px solid var(--line); font-size:14px; line-height:20px; color:var(--slate); }
.dm-alt a { display:inline-block; padding:12px 0; margin:-12px 0; }

/* Step 2: the calendar, in the same card */
.dm-cal__note { font-size:15px; line-height:24px; color:var(--slate); margin-top:-8px !important; }
.dm-cal__box { position:relative; margin:16px -12px 0; min-height:620px; }
.dm-cal__box .meetings-iframe-container { position:relative; z-index:1; }
.dm-cal__box iframe { display:block; width:100% !important; border:0; }
.dm-cal__wait { position:absolute; inset:0; display:grid; place-items:center; font-size:15px; color:var(--slate); border-radius:16px; background:var(--mist); }
.dm-cal.is-loaded .dm-cal__wait { display:none; }
.dm-cal__foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; margin-top:12px; }
.dm-link { all:unset; box-sizing:border-box; display:inline-flex; align-items:center; min-height:44px; font-size:14px; font-weight:700; color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; cursor:pointer; }
.dm-link:focus-visible { outline:2px solid var(--violet); outline-offset:3px; border-radius:6px; }

/* The one motion moment: form out, calendar in (transform + opacity only) */
.dm-form.is-leaving { opacity:0; transform:translateY(-8px); transition:opacity .18s var(--fade), transform .18s var(--fade); }
.dm-cal.is-entering { opacity:0; transform:translateY(12px); }
.dm-cal { transition:opacity .32s var(--ease), transform .32s var(--ease); }

/* Logo strip: a slim white band right under the hero, so proof sits next to the form */
.dm-logos { padding:32px 0 0; text-align:center; background:#fff; }
.dm-logos__lab { font-size:14px; line-height:20px; color:var(--slate); }
.dm-logos ul { list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:repeat(6,auto); justify-content:center; align-items:center; gap:20px 56px; }
.dm-logos img { display:block; height:28px; width:auto; max-width:100%; object-fit:contain; filter:grayscale(1); opacity:.75; }
.dm-logos img.dm-logo--nextera { height:36px; }
.dm-logos img.dm-logo--happiest-minds { height:40px; }
.dm-logos img.dm-logo--indegene { height:24px; }

/* ---------- Sections ---------- */
.dm-sec { padding:72px 0; }
.dm-sec--mist { background:var(--mist); }
body.hai .dm-h2 { margin:0 auto 12px; max-width:22ch; text-align:center; font:700 clamp(27px,3.4vw,44px)/1.12 var(--disp); letter-spacing:-.03em; color:var(--ink); text-wrap:balance; }
.dm-sub { margin:0 auto 40px !important; max-width:56ch; text-align:center; font-size:17.5px; line-height:28px; color:var(--slate); }

/* What happens: four open columns split by hairlines (no cards, no numbers, no dots) */
.dm-flow { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.dm-flow li { padding:0 24px; border-left:1px solid var(--line); }
.dm-flow li:first-child { padding-left:0; border-left:0; }
.dm-flow li:last-child { padding-right:0; }
.dm-flow__ic { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--gold); color:var(--ink); }
body.hai .dm-flow h3 { margin:16px 0 8px; font:700 19px/1.2 var(--disp); letter-spacing:-.01em; color:var(--ink); text-wrap:balance; }
.dm-flow p, .dm-roles p { font-size:16px; line-height:26px; color:var(--slate); }
.dm-flow a, .dm-roles p a { color:var(--ink); font-weight:700; text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:2px; text-underline-offset:3px; }

/* Who it is for: one white panel, a two-column list read like a table */
.dm-roles { list-style:none; margin:0 auto; padding:8px 32px; max-width:960px; background:#fff; border-radius:24px; box-shadow:var(--sh-sm); }
.dm-roles li { display:grid; grid-template-columns:minmax(0,240px) minmax(0,1fr); gap:8px 32px; align-items:baseline; padding:20px 0; }
.dm-roles li + li { border-top:1px solid var(--line); }
body.hai .dm-roles h3 { margin:0; font:700 19px/1.2 var(--disp); letter-spacing:-.01em; }
.dm-roles h3 a { display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--ink); text-decoration:none; }
.dm-roles h3 a svg { transition:transform .2s var(--ease); }
@media (hover:hover) and (pointer:fine) { .dm-roles h3 a:hover { text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:2px; text-underline-offset:4px; } .dm-roles h3 a:hover svg { transform:translateX(3px); } }

/* Voices: the shared hx-voices block, set on ink for this page */
.dm-voices { background:var(--ink); }
.dm-voices .hxb { padding:72px 16px; }
.dm-voices .hxb.hxb .hxb-h2 { color:#fff; }
.dm-voices .hxb--none .hxb-v { background:#fff; box-shadow:0 1px 0 rgba(255,255,255,.12) inset; }
.dm-voices .hxb-arrow { border-color:#fff; color:#fff; }
.dm-voices .hxb :focus-visible { outline-color:var(--gold); }
.dm-voices .hxb-v__ph { outline:1px solid rgba(0,0,0,.1); outline-offset:-1px; }


/* ---------- Responsive ---------- */
@media (max-width:1023px) {
  .dm-flow { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:32px; }
  .dm-flow li:nth-child(3) { padding-left:0; border-left:0; }
  .dm-flow li:nth-child(2) { padding-right:0; }
}
@media (max-width:899px) {
  .dm-hero__grid { grid-template-columns:minmax(0,1fr); grid-template-areas:"copy" "book" "proof"; grid-template-rows:none; gap:24px; }
  .dm-book { max-width:560px; width:100%; }
  .dm-proof { padding-top:8px; max-width:560px; }
  .dm-logos ul { grid-template-columns:repeat(3,auto); gap:20px 40px; }
}
@media (max-width:640px) {
  .dm-hero { padding-bottom:32px; }
  .dm-lead { font-size:16px; line-height:26px; }
  .dm-book { padding:20px; border-radius:20px; }
  body.hai .dm-card-h { font-size:22px; margin-bottom:16px; }
  .dm-cal__box { margin:12px -8px 0; min-height:560px; }
  .dm-nums > div { padding-right:8px; }
  .dm-nums > div + div { padding-left:12px; }
  .dm-logos { padding-top:28px; }
  .dm-logos ul { gap:16px 24px; }
  .dm-logos img { height:22px; }
  .dm-logos img.dm-logo--nextera { height:28px; }
  .dm-logos img.dm-logo--happiest-minds { height:32px; }
  .dm-logos img.dm-logo--indegene { height:20px; }
  .dm-sec, .dm-voices .hxb { padding:56px 0; }
  .dm-voices .hxb { padding:56px 16px; }
  .dm-sub { margin-bottom:32px !important; font-size:16px; line-height:26px; }
  .dm-flow { grid-template-columns:minmax(0,1fr); row-gap:0; }
  .dm-flow li, .dm-flow li:nth-child(n) { display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:16px; padding:20px 0; border-left:0; border-top:1px solid var(--line); }
  .dm-flow li:first-child { border-top:0; padding-top:0; }
  .dm-flow__ic { grid-row:span 2; }
  body.hai .dm-flow h3 { margin:10px 0 4px; }
  .dm-roles { padding:4px 20px; border-radius:20px; }
  .dm-roles li { grid-template-columns:minmax(0,1fr); gap:0; padding:16px 0; }
}
@media (max-width:360px) {
  .dm-nums dd { font-size:24px; }
  .dm-nums dt { font-size:13px; line-height:18px; }
}
@media (prefers-reduced-motion:reduce) {
  .dm-form.is-leaving, .dm-cal.is-entering { transform:none; }
  .dm-cal, .dm-form.is-leaving { transition:opacity .15s linear; }
  .dm-steps span::after, .dm-btn, .dm-btn svg, .dm-roles h3 a svg { transition:none; }
  .dm-btn:active { transform:none; }
}