/* Book a demo page (call.html). Converted once on 2026-10-12 from the design export sense-book-demo-share.html (tokens, base, sections, agents, demo; nav.css is left to nav-footer-new.css), scoped to main.book-demo and trimmed to the rules this page can match; maintained by hand from here on. */

/* ===== PAGE-LEVEL RULES (html, body, the shared header): START: every other rule is scoped to main.book-demo */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #F4F4F7; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html { scroll-padding-top: 96px; }   /* focus and #anchor scrolling stop clear of the fixed overlay header (about 80 px tall) */
/* Light hero (body.hero-light): the overlay header starts with dark text and frosts on scroll as usual (as hr-feature.css). */
body.hero-light .nav.nav--overlay:not(.is-scrolled) { color: var(--text); }
body.hero-light .nav.nav--overlay:not(.is-scrolled) .logo { color: var(--brand); }
body.hero-light .nav.nav--overlay:not(.is-scrolled) .nav-link:hover,
body.hero-light .nav.nav--overlay:not(.is-scrolled) .nav-item.is-open > .nav-link { background: rgba(11, 10, 20, .06); }

/* ===== PAGE-LEVEL RULES: END */

/* css/tokens.css */
/* ==========================================================================
   Sense HR website — design tokens
   Layout/motion language recreated from the Zyntexa reference; colour + type
   are Sense's own (Satoshi display, Inter body, brand #634AFC).
   ========================================================================== */
.book-demo {
  /* Brand */
  --brand: #634AFC;
  --brand-hover: #4931DC;
  --brand-soft: #B8ADFF;
  --brand-10: #EFF1FF;
  --brand-20: #E5E7FF;
  --brand-glow: rgba(99, 74, 252, .35);

  /* Primary button — the ONE definition used by every primary CTA (nav, mobile menu, sections) */
  --btn-primary-bg: #634AFC;
  --btn-primary-bg-hover: #4931DC;
  --btn-primary-fg: #FFFFFF;          /* 5.4:1 on #634AFC — passes WCAG AA */
  --btn-radius: 10px;

  /* Neutrals */
  --ink: #0B0A14;                     /* dark panels */
  --ink-2: #15132A;
  --ink-3: #1C1A35;
  --page: #F4F4F7;                    /* off-white page, like the reference */
  --card: #FFFFFF;
  --text: #0B0A14;
  --text-2: #54536B;
  --text-3: #8B899E;
  --line: rgba(11, 10, 20, .08);
  --line-strong: rgba(11, 10, 20, .14);
  --line-dash: rgba(11, 10, 20, .18);
  --text-inv: #FFFFFF;
  --text-inv-2: rgba(255, 255, 255, .72);
  --text-inv-3: rgba(255, 255, 255, .5);
  --line-inv: rgba(255, 255, 255, .14);
  --live: #22B573;
  --live-bg: #E4FFE9;

  /* Type */
  --font-display: 'Satoshi', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-h1: clamp(40px, 5.2vw, 68px);
  --fs-h2: clamp(30px, 3.4vw, 46px);
  --fs-h3: clamp(22px, 2vw, 28px);
  --fs-h4: 19px;
  --fs-lede: clamp(16px, 1.25vw, 18px);
  --fs-body: 16px;
  --fs-small: 14px;
  --ls-display: -0.035em;

  /* Layout */
  --container: 1320px;
  --container-wide: 1470px;
  --gutter: 24px;
  --frame-inset: 20px;
  --section-y: clamp(80px, 9vw, 128px);

  /* Radii (reference: 100 pill · 40 panel · 30/24/20 card · 15 dropdown · 10 small) */
  --r-panel: 40px;
  --r-card-lg: 30px;
  --r-card: 24px;
  --r-md: 16px;
  --r-sm: 12px;

  /* Shadows — soft, wide blurs */
  --shadow-sm: 0 1px 2px rgba(11, 10, 20, .06), 0 0 0 1px rgba(11, 10, 20, .05);
  --shadow-md: 0 24px 56px -12px rgba(11, 10, 20, .15);
  --shadow-lg: 0 57px 70px -20px rgba(11, 10, 20, .12), 0 0 0 1px rgba(11, 10, 20, .04);
  --shadow-float: 0 18px 40px -8px rgba(20, 12, 70, .28), 0 0 0 1px rgba(11, 10, 20, .05);

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-reveal: .8s;
  --reveal-y: 40px;
}

@media (max-width: 767px) {
  .book-demo {
    --gutter: 16px;
    --frame-inset: 8px;
    --r-panel: 24px;
    --r-card-lg: 22px;
    --r-card: 20px;
  }
}

/* css/base.css */
/* ==========================================================================
   Base: reset, type, layout primitives, buttons, reveal + odometer motion
   ========================================================================== */
.book-demo *, .book-demo *::before, .book-demo *::after { box-sizing: border-box; }
.book-demo {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 400 var(--fs-body)/1.62 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
.book-demo img, .book-demo picture, .book-demo svg { display: block; max-width: 100%; }
.book-demo img { height: auto; }
.book-demo a { color: inherit; text-decoration: none; }
.book-demo button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.book-demo ul { list-style: none; margin: 0; padding: 0; }
.book-demo p { margin: 0; }
.book-demo h1, .book-demo h2, .book-demo h3, .book-demo h4, .book-demo h5 { margin: 0; text-wrap: balance; font-family: var(--font-display); font-weight: 500; letter-spacing: var(--ls-display); color: inherit; }
.book-demo h1 { font-size: var(--fs-h1); line-height: 1.06; }
.book-demo h2 { font-size: var(--fs-h2); line-height: 1.12; }
.book-demo h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.025em; }
.book-demo h4 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -0.015em; }
.book-demo h5 { font-size: 15px; line-height: 1.3; letter-spacing: 0; }
.book-demo b, .book-demo strong { font-weight: 600; }

.book-demo :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.book-demo .on-dark :focus-visible { outline-color: var(--brand-soft); }

.book-demo .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.book-demo .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.book-demo .section { padding-block: var(--section-y); }

/* Eyebrow pill */
.book-demo .eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 13px/1 var(--font-body); letter-spacing: .01em;
  padding: 8px 14px; border-radius: 100px;
  background: var(--card); color: var(--brand-hover);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
.book-demo .eyebrow.on-dark { background: rgba(255, 255, 255, .08); color: #DCD6FF; box-shadow: inset 0 0 0 1px var(--line-inv); }

/* ---------- Buttons ---------- */
.book-demo .btn {
  --btn-h: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--btn-h); padding: 0 20px;
  border-radius: var(--btn-radius);
  font: 500 15px/1 var(--font-body); white-space: nowrap;
  transition: transform .2s var(--ease-out), background-color .2s, color .2s, box-shadow .2s, border-color .2s;
}
.book-demo .btn:hover { transform: scale(.97); }            /* standing rule: every button scales to .97 */
.book-demo .btn:active { transform: scale(.95); }
.book-demo .btn-lg { --btn-h: 52px; padding: 0 26px; font-size: 16px; }
.book-demo .btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); box-shadow: 0 8px 24px -8px rgba(99, 74, 252, .6), inset 0 1px 0 rgba(255, 255, 255, .18); }
.book-demo .btn-primary:hover { background: var(--btn-primary-bg-hover); }

.book-demo .cta-group { display: flex; flex-wrap: wrap; gap: 12px; }

.book-demo .link { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--brand-hover); }
.book-demo .link svg { width: 14px; height: 14px; transition: transform .25s var(--ease-out); }
.book-demo .link:hover svg { transform: translateX(3px); }

/* ---------- Scroll reveal (fade-up, staggered by JS via --i) ---------- */
.js .book-demo .reveal { opacity: 0; transform: translate3d(0, var(--reveal-y), 0); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.js .book-demo .reveal.in { opacity: 1; transform: none; }

/* ---------- Reduced motion: everything final, instantly ---------- */
@media (prefers-reduced-motion: reduce) {
  .book-demo *, .book-demo *::before, .book-demo *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js .book-demo .reveal { opacity: 1 !important; transform: none !important; }
  .book-demo .btn:hover, .book-demo .btn:active { transform: none; }
}

/* css/sections.css */
/* ==========================================================================
   Sections (in page order)
   ========================================================================== */

/* ---------- shared heads ---------- */
.book-demo .center-head { max-width: 780px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.book-demo .center-head p { color: var(--text-2); font-size: var(--fs-lede); max-width: 640px; margin-top: 20px; }

/* ==========================================================================
   01 HERO — dark inset frame, centred copy, dashboard + floating cards
   ========================================================================== */

.js .book-demo .hero-anim { opacity: 0; transform: translateY(16px); animation: heroIn .9s var(--ease-out) forwards; animation-delay: var(--d, 0s); }
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* ==========================================================================
   13 FOOTER — full-bleed black (oma-melon layout): brand + copyright left,
   link columns right, oversized fading wordmark at the bottom
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .js .book-demo .hero-anim { opacity: 1; transform: none; }
}

/* css/agents.css */
/* ==========================================================================
   Agent pages — AMI hub page (sense-agent-ami.html)
   Builds on tokens/base/nav/sections from the home page; only page-specific
   patterns live here.
   ========================================================================== */

/* ---------- 05 MEET AMI IN PERSON — pay-co "Network of passionate users" layout ----------
   striped lavender card · centred copy · product shot cropped by the card's bottom edge
   inside the home page's glass frame · form bar under the copy */
.book-demo .ami-meet-wrap { position: relative; }
.book-demo .ami-meet { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-panel); padding: clamp(56px, 7vw, 96px) var(--gutter) 0;
  background: linear-gradient(180deg, #F7F6FF 0%, #EFEDFF 55%, #E4E0FF 100%); box-shadow: inset 0 0 0 1px rgba(99, 74, 252, .08); text-align: center; }
.book-demo .ami-meet::before { /* vertical column stripes, fading in towards the bottom (reference texture, in Sense purple) */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: repeating-linear-gradient(90deg, rgba(99, 74, 252, .09) 0 72px, transparent 72px 89px) center top;
  -webkit-mask-image: linear-gradient(180deg, transparent 5%, #000 95%); mask-image: linear-gradient(180deg, transparent 5%, #000 95%); }
.book-demo .ami-meet::after { /* purple haze rising from the lower corners */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(38% 60% at 0% 100%, rgba(99, 74, 252, .38), transparent 70%), radial-gradient(38% 60% at 100% 100%, rgba(99, 74, 252, .38), transparent 70%); }
.book-demo .ami-meet-copy { max-width: 720px; margin: 0 auto; }
.book-demo .ami-meet-copy h2 { color: var(--text); }
.book-demo .ami-meet-copy p { margin: 18px auto 0; color: var(--text-2); font-size: var(--fs-lede); max-width: 620px; }
.book-demo .ami-meet-shot { position: relative; max-width: 1080px; margin: clamp(40px, 5vw, 64px) auto 0; height: clamp(240px, 33vw, 470px); overflow: hidden; }
/* same glass outline as the home page's dashboard frame (.hero-window), tuned for a light background */
.book-demo .ami-meet-window { padding: 8px 8px 0; border-radius: 26px 26px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .28));
  box-shadow: 0 40px 100px -30px rgba(33, 18, 140, .35), inset 0 0 0 1px rgba(255, 255, 255, .9), 0 0 0 1px rgba(99, 74, 252, .1);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.book-demo .ami-meet-window img { width: 100%; border-radius: 19px 19px 0 0; }

/* form bar: Name · Email · button, directly under the copy */
@media (max-width: 767px) {
  .book-demo .ami-meet-shot { height: 220px; }
}

/* ---------- 06 FAQ — single rounded container with square toggles ---------- */
.book-demo .ami-faq { max-width: 1070px; margin: 56px auto 0; border-radius: var(--r-card-lg); background: var(--card); box-shadow: var(--shadow-sm); overflow: hidden; }
.book-demo .ami-faq-item + .ami-faq-item { border-top: 1px solid var(--line); }
.book-demo .ami-faq-q { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 40px; cursor: pointer; font: 500 clamp(17px, 1.4vw, 20px)/1.4 var(--font-display); letter-spacing: -0.01em; color: var(--text); transition: background-color .2s; }
.book-demo .ami-faq-q::-webkit-details-marker { display: none; }
.book-demo .ami-faq-q:hover { background: var(--page); }
.book-demo .ami-faq-q:focus-visible { outline: 2px solid var(--brand); outline-offset: -4px; border-radius: 12px; }
.book-demo .ami-faq-ic { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; background: var(--ink); color: #fff; transition: background-color .3s; }
.book-demo .ami-faq-ic svg { width: 14px; height: 14px; }
.book-demo .ami-faq-ic svg { transition: transform .35s var(--ease-out); }
.book-demo .ami-faq-item[open] .ami-faq-ic { background: var(--brand); }
.book-demo .ami-faq-item[open] .ami-faq-ic svg { transform: rotate(45deg); }
.book-demo .ami-faq-a { padding: 0 104px 26px 40px; color: var(--text-2); font-size: 16px; line-height: 1.65; }
@supports (interpolate-size: allow-keywords) {
  .book-demo .ami-faq { interpolate-size: allow-keywords; }
  .book-demo .ami-faq-item::details-content { height: 0; overflow: hidden; transition: height .4s var(--ease-out), content-visibility .4s allow-discrete; }
  .book-demo .ami-faq-item[open]::details-content { height: auto; }
}
@media (max-width: 767px) { .book-demo .ami-faq { margin-top: 40px; } .book-demo .ami-faq-q { padding: 20px; } .book-demo .ami-faq-a { padding: 0 20px 20px; font-size: 15px; } }

/* css/demo.css */
/* ==========================================================================
   Book a demo (sense-book-demo.html, body.dm-page) — generated by tools/product/gen_book_demo.py
   01 hero: the live trial page's layout (dark copy panel + form) and its field styling, in our tokens
   02 "Want an in-person demo?": dotted Europe map, UK HQ pinned, Romania lit but unlabelled (Assistia contact pattern) + contact cards
   03 CTA: Core HR's "Get started" card (.ami-meet, css/agents.css), trial button only
   04 FAQ: shared .ami-faq (css/agents.css)
   ========================================================================== */
.book-demo {
  --dm-sunken: #F4F4FA;
  --dm-error: #C53030;
  --dm-error-bg: #FDECEC;
  --dm-dot: #C9C6DC;
}
.book-demo [hidden] { display: none !important; }   /* .dm-form / .dm-form-heading set display: flex, which would beat the attribute */

/* ---------- 01 HERO ---------- */
.book-demo .dm-hero { padding: calc(var(--frame-inset) + 104px) 0 clamp(64px, 7vw, 104px); }
.book-demo .dm-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 1.8vw, 24px); align-items: stretch; }

/* dark copy panel — trial's .tr-panel-dark, navy to match ring.webp */
.book-demo .dm-panel { --pad-x: clamp(28px, 4vw, 56px); position: relative; isolation: isolate; overflow: hidden; container-type: inline-size; border-radius: var(--r-card-lg);
  padding: clamp(40px, 4.4vw, 64px) var(--pad-x); color: #fff; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; background: #0B0E32; }
.book-demo .dm-panel-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; max-width: 560px; }
/* ring.webp hangs off the bottom of the copy, so its glowing band always sits just under the headline + intro, whatever the line count.
   130% of the panel width, centred on the panel (100cqw = panel content width); top and bottom edges faded into the navy. */
.book-demo .dm-ring { position: absolute; z-index: -1; top: 100%; pointer-events: none;
  left: calc(-1 * var(--pad-x) - .15 * (100cqw + 2 * var(--pad-x))); width: calc(1.3 * (100cqw + 2 * var(--pad-x))); aspect-ratio: 16 / 9; transform: translateY(-62%);
  background: url("/assets/images/pages/trial/ring.webp") 50% 50% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 82%, transparent 100%); }
.book-demo .dm-panel h1 { color: #fff; font-size: clamp(40px, 4.4vw, 64px); line-height: 1.04; letter-spacing: -0.04em; }
.book-demo .dm-lede { margin-top: 22px; max-width: 520px; color: rgba(255, 255, 255, .85); font-size: var(--fs-lede); line-height: 1.62; }   /* a touch brighter than --text-inv-2: it sits on the ring's glow */

.book-demo .dm-points { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.book-demo .dm-point { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--r-md); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line-inv);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.book-demo .dm-point-ic { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; background: rgba(184, 173, 255, .14); color: var(--brand-soft); }
.book-demo .dm-point-ic svg { width: 17px; height: 17px; }
.book-demo .dm-point b { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; color: #fff; }
.book-demo .dm-point b + span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--text-inv-2); }

/* form card — trial's .tr-form-panel on a white card (our page is off-white, so the sunken fields need a white surface) */
.book-demo .dm-form-card { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: clamp(28px, 3.4vw, 48px); border-radius: var(--r-card-lg); background: var(--card); box-shadow: var(--shadow-sm); }
.book-demo .dm-form-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.book-demo .dm-form-heading h2 { font-size: clamp(24px, 2.1vw, 30px); line-height: 1.15; letter-spacing: -0.03em; }
.book-demo .dm-form-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; background: var(--live-bg); color: #096931; font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.book-demo .dm-form-badge svg { width: 15px; height: 15px; flex-shrink: 0; }

.book-demo .dm-alert { display: none; align-items: flex-start; gap: 10px; margin-top: 20px; padding: 12px 14px; border-radius: 12px; background: var(--dm-error-bg); color: #8A2323; box-shadow: inset 0 0 0 1px rgba(197, 48, 48, .25); font-size: 13.5px; line-height: 1.5; }
.book-demo .dm-alert.show { display: flex; }
.book-demo .dm-alert svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }

.book-demo .dm-form { margin-top: 30px; display: flex; flex-direction: column; gap: 22px; }
.book-demo .dm-field { min-width: 0; }
.book-demo .dm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; }
.book-demo .dm-field label { display: block; margin-bottom: 7px; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--text); }
.book-demo .dm-optional { font-weight: 400; color: var(--text-3); }
.book-demo .dm-input, .book-demo .dm-select { display: block; width: 100%; margin: 0; padding: 12px 14px; border: 1.5px solid transparent; border-radius: 12px; background: var(--dm-sunken);
  font: 400 14.5px/1.4 var(--font-body); color: var(--text); transition: border-color .15s, background-color .15s, box-shadow .15s; }
.book-demo .dm-input::placeholder { color: var(--text-3); }
.book-demo .dm-textarea { min-height: 92px; resize: vertical; }
.book-demo .dm-select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M15.8337 6.66669L10.0003 12.5L4.16699 6.66669' stroke='%2354536B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; }
.book-demo .dm-select.is-empty { color: var(--text-3); }
.book-demo .dm-select option { color: var(--text); }
.book-demo .dm-input:hover, .book-demo .dm-select:hover { border-color: var(--line-strong); }
.book-demo .dm-input:focus, .book-demo .dm-select:focus { outline: none; border-color: var(--brand); background-color: #fff; box-shadow: 0 0 0 3px rgba(99, 74, 252, .14); }
.book-demo .dm-field.invalid .dm-input, .book-demo .dm-field.invalid .dm-select { border-color: var(--dm-error); background-color: #fff; }
.book-demo .dm-field-error { display: none; margin-top: 6px; font-size: 12.5px; color: var(--dm-error); }
.book-demo .dm-field.invalid .dm-field-error { display: block; }

.book-demo .dm-submit-group { margin-top: 4px; }
.book-demo .dm-consent { margin-bottom: 14px; font-size: 12.5px; line-height: 1.6; color: var(--text-2); }
.book-demo .dm-consent a { color: var(--brand-hover); text-decoration: underline; text-underline-offset: 2px; }
.book-demo .dm-submit { width: 100%; }
.book-demo .dm-submit:disabled { opacity: .7; cursor: progress; transform: none; }
.book-demo .dm-spinner { display: none; width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: dmSpin .7s linear infinite; }
.book-demo .dm-submit.is-loading .dm-spinner { display: inline-block; }
@keyframes dmSpin { to { transform: rotate(360deg); } }
.book-demo .dm-submit-caption { margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--text-3); }

.book-demo .dm-form-wrap { flex: 1; display: flex; flex-direction: column; }
.book-demo .dm-success { margin-block: auto; padding: 8px 0; }
.book-demo .dm-success:focus { outline: none; }
.book-demo .dm-success-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #CEF9DE; color: #0F8A52; }
.book-demo .dm-success-ic svg { width: 26px; height: 26px; }
.book-demo .dm-success h2 { margin-top: 24px; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.12; letter-spacing: -0.03em; }
.book-demo .dm-success p { margin-top: 14px; max-width: 460px; color: var(--text-2); }

/* info box — trial's "What happens after 14 days" */
.book-demo .dm-info-box { display: flex; align-items: center; gap: 20px; padding: 16px 22px 16px 16px; border-radius: var(--r-md); background: var(--brand-10); box-shadow: inset 0 0 0 1px #DCE0FF; }
.book-demo .dm-info-box-icon { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: #DEE2FF; font-size: 28px; line-height: 1; }
.book-demo .dm-info-box b { display: block; font-size: 15.5px; font-weight: 600; color: var(--text); }
.book-demo .dm-info-box p { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--text-2); }

@media (max-width: 1024px) {
  .book-demo .dm-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .book-demo .dm-panel { gap: 40px; }
}
@media (max-width: 767px) {
  .book-demo .dm-hero { padding-top: calc(var(--frame-inset) + 88px); }
  .book-demo .dm-points, .book-demo .dm-field-row { grid-template-columns: minmax(0, 1fr); }
  .book-demo .dm-point { align-items: center; padding: 12px; }
  .book-demo .dm-point b + span { display: none; }   /* titles only on phones, so the form is one short scroll away */
  .book-demo .dm-panel { padding: 36px 24px 28px; }
  .book-demo .dm-form-card { padding: 28px 20px; }
  .book-demo .dm-info-box { align-items: flex-start; }
  .book-demo .dm-info-box-icon { width: 48px; height: 48px; font-size: 22px; }
}

/* ---------- 02 TALK TO SENSE — map + contact cards ---------- */
.book-demo .dm-talk { position: relative; isolation: isolate; overflow: hidden; padding-top: calc(var(--section-y) * .9); }
/* the soft "dome" behind the heading (Assistia): two wide ellipses, the outer one only a hairline */
.book-demo .dm-talk-dome, .book-demo .dm-talk-dome::before { position: absolute; left: 50%; transform: translateX(-50%); border-radius: 50%; pointer-events: none; }
.book-demo .dm-talk-dome { z-index: -1; top: 0; width: max(1500px, 128vw); height: 1100px; background: linear-gradient(180deg, #EEECFF 0%, rgba(238, 236, 255, .5) 18%, rgba(244, 244, 247, 0) 42%); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(99, 74, 252, .08); }
.book-demo .dm-talk-dome::before { content: ""; top: -36px; width: calc(100% + 120px); height: calc(100% + 72px); border-top: 1px solid rgba(99, 74, 252, .08); }

.book-demo .dm-map { position: relative; max-width: 1180px; margin: clamp(24px, 3vw, 40px) auto 0; }
.book-demo .dm-map-box { position: relative; aspect-ratio: 1200 / 605; }
/* soft rectangle: fade all four edges (two linear masks intersected) so the crop never shows a hard edge */
.book-demo .dm-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 80%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 80%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
  mask-composite: intersect; }
.book-demo .dm-dots { fill: none; stroke: var(--dm-dot); stroke-width: 3.6; stroke-linecap: round; }
.book-demo .dm-dots.is-hl { stroke: #9B8BFF; }

/* glowing office pins: soft halo + brand core + an expanding ring */
.book-demo .dm-pin { position: absolute; width: 0; height: 0; z-index: 2; }
.book-demo .dm-pin::before { content: ""; position: absolute; left: -36px; top: -36px; width: 72px; height: 72px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(99, 74, 252, .32) 0%, rgba(99, 74, 252, .12) 42%, rgba(99, 74, 252, 0) 70%); animation: dmGlow 3s ease-in-out infinite; }
.book-demo .dm-pin.is-ro::before { animation-delay: -1.5s; }
.book-demo .dm-pin-dot { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; }
.book-demo .dm-pin-dot::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px #fff, 0 0 16px 5px rgba(99, 74, 252, .55); transition: transform .3s var(--ease-out); }
.book-demo .dm-pin-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px solid rgba(99, 74, 252, .55); animation: dmRing 2.4s var(--ease-out) infinite; }
.book-demo .dm-pin.is-ro .dm-pin-dot::after { animation-delay: -1.2s; }
.book-demo .dm-pin-dot:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 50%; }
.book-demo .dm-pin.is-quiet { z-index: 1; }   /* Romania: glow only, no label, not interactive */
@keyframes dmRing { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes dmGlow { 0%, 100% { transform: scale(.85); opacity: .8; } 50% { transform: scale(1.15); opacity: 1; } }

/* the UK label sits to the left of its pin, vertically centred (Romania has no label) */
.book-demo .dm-pin-card { position: absolute; top: 0; display: flex; align-items: center; gap: 10px; width: max-content; max-width: 280px; padding: 10px 16px 10px 10px; border-radius: 14px; background: #fff;
  box-shadow: var(--shadow-float); transform: translateY(-50%); transition: translate .35s var(--ease-out), box-shadow .35s; }
.book-demo .dm-pin.is-uk .dm-pin-card { right: 30px; }
.book-demo .dm-pin.is-active .dm-pin-card { translate: 0 -4px; box-shadow: var(--shadow-float), 0 0 0 1.5px var(--brand); }
.book-demo .dm-pin.is-active .dm-pin-dot::before { transform: scale(1.25); }
.book-demo .dm-flag { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.book-demo .dm-flag svg { width: 100%; height: 100%; }
.book-demo .dm-pin-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.book-demo .dm-pin-city { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--text); }
.book-demo .dm-pin-tag { padding: 2px 7px; border-radius: 6px; background: var(--brand-10); color: var(--brand-hover); font-size: 11px; font-weight: 600; line-height: 1.4; }
.book-demo .dm-pin-line { font-size: 12px; line-height: 1.35; color: var(--text-2); }

/* contact cards: float up over the faded bottom edge of the map */
.book-demo .dm-cards { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(-88px, -6vw, -16px); }
.book-demo .dm-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 24px 24px 26px; border-radius: var(--r-card); background: var(--card);
  box-shadow: var(--shadow-sm), 0 28px 48px -30px rgba(49, 30, 160, .3); transition: transform .35s var(--ease-out), box-shadow .35s; }
.book-demo .dm-card:hover, .book-demo .dm-card.is-active { transform: translateY(-4px); box-shadow: var(--shadow-sm), 0 32px 56px -28px rgba(49, 30, 160, .38), inset 0 0 0 1.5px var(--brand); }
.book-demo .dm-card-ic { width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--brand-10); color: var(--brand); }
.book-demo .dm-card-ic svg { width: 20px; height: 20px; }
.book-demo .dm-card-go { position: absolute; top: 24px; right: 22px; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); transition: background-color .25s, color .25s; }
.book-demo .dm-card-go svg { width: 15px; height: 15px; }
.book-demo a.dm-card:hover .dm-card-go { background: var(--brand); color: #fff; }
.book-demo .dm-card-label { margin-top: 32px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.book-demo .dm-card-value { margin-top: 4px; display: flex; align-items: center; gap: 8px; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.25; letter-spacing: -0.02em; color: var(--text); }
.book-demo .dm-card-flag { width: 20px; height: 20px; }
.book-demo .dm-card p { margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
@media (max-width: 1024px) { .book-demo .dm-cards { margin-top: 8px; } }
@media (max-width: 860px) { .book-demo .dm-cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .book-demo .dm-pin::before { left: -24px; top: -24px; width: 48px; height: 48px; }
  .book-demo .dm-pin-card { padding: 6px 10px 6px 6px; gap: 6px; border-radius: 10px; }
  /* phones: the map bleeds past the gutters (the section clips it) so Europe stays readable; labels sit above/below their pin */
  .book-demo .dm-map { width: 180%; max-width: none; margin-left: -40%; }
  .book-demo .dm-pin.is-uk .dm-pin-card { right: auto; left: 0; top: auto; bottom: 18px; transform: translateX(-50%); }
  .book-demo .dm-card-label { margin-top: 20px; }
  .book-demo .dm-pin-line, .book-demo .dm-pin-tag { display: none; }
  .book-demo .dm-pin-city { font-size: 12px; }
  .book-demo .dm-flag { width: 18px; height: 18px; }
}

/* ---------- 03 CTA — Core HR's "Get started" card; the second half of the heading picks up the brand colour ---------- */
.book-demo .dm-cta { padding-top: calc(var(--section-y) * .4); }   /* follows the map section's own bottom padding */
.book-demo .dm-cta .ami-meet-copy h2 span { color: var(--brand); }
.book-demo .dm-meet-cta { justify-content: center; margin-top: 28px; }

/* ---------- 04 FAQ ---------- */
.book-demo .ami-faq-a p + p { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .book-demo .dm-pin::before, .book-demo .dm-pin-dot::after, .book-demo .dm-spinner { animation: none; }
  .book-demo .dm-pin-dot::after { opacity: 0; }
}

/* The Calendly calendar call-form.js puts under the thank-you message (Costi, 2026-10-12: the message and the calendar). */
.book-demo .dm-calendar:empty { display: none; }
.book-demo .dm-calendar { margin-top: 20px; }

/* Tablets (641–1024px): the UK label, left of its pin, ran past the screen edge (768px: 31px), where the section clips it. It sits
   above the pin there, as on phones (checks run 1). */
@media (min-width: 641px) and (max-width: 1024px) {
  .book-demo .dm-pin.is-uk .dm-pin-card { right: auto; left: 0; top: auto; bottom: 22px; transform: translateX(-50%); }
}

/* The pin's focus ring: where the label sits above the pin it covered the ring's top, so a focused pin paints over its label; and
   the brand ring is lost in the pin's own purple glow (390px: 2.0:1, then 1.8:1), so it is drawn in the text colour (checks runs 1, 2). */
.book-demo .dm-pin-dot:focus-visible { z-index: 1; outline-color: var(--text); }