/* Product tour page (demo.html). Converted once on 2026-10-12 from the design export sense-product-tour-share.html (tokens, base, sections, agents, convert; nav.css is left to nav-footer-new.css), scoped to main.product-tour 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.product-tour */

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).
   ========================================================================== */
.product-tour {
  /* 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) {
  .product-tour {
    --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
   ========================================================================== */
.product-tour *, .product-tour *::before, .product-tour *::after { box-sizing: border-box; }
.product-tour {
  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;
}
.product-tour img, .product-tour picture, .product-tour svg { display: block; max-width: 100%; }
.product-tour img { height: auto; }
.product-tour a { color: inherit; text-decoration: none; }
.product-tour button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.product-tour ul { list-style: none; margin: 0; padding: 0; }
.product-tour p { margin: 0; }
.product-tour h1, .product-tour h2, .product-tour h3, .product-tour h4, .product-tour h5 { margin: 0; text-wrap: balance; font-family: var(--font-display); font-weight: 500; letter-spacing: var(--ls-display); color: inherit; }
.product-tour h1 { font-size: var(--fs-h1); line-height: 1.06; }
.product-tour h2 { font-size: var(--fs-h2); line-height: 1.12; }
.product-tour h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.025em; }
.product-tour h4 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -0.015em; }
.product-tour h5 { font-size: 15px; line-height: 1.3; letter-spacing: 0; }
.product-tour b, .product-tour strong { font-weight: 600; }

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

.product-tour .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* Eyebrow pill */
.product-tour .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;
}
.product-tour .eyebrow.on-dark { background: rgba(255, 255, 255, .08); color: #DCD6FF; box-shadow: inset 0 0 0 1px var(--line-inv); }

/* ---------- Buttons ---------- */
.product-tour .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;
}
.product-tour .btn:hover { transform: scale(.97); }            /* standing rule: every button scales to .97 */
.product-tour .btn:active { transform: scale(.95); }
.product-tour .btn-lg { --btn-h: 52px; padding: 0 26px; font-size: 16px; }
.product-tour .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); }
.product-tour .btn-primary:hover { background: var(--btn-primary-bg-hover); }
.product-tour .btn-secondary { background: var(--card); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.product-tour .btn-secondary:hover { box-shadow: inset 0 0 0 1px var(--brand); color: var(--brand-hover); }

.product-tour .cta-group { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Scroll reveal (fade-up, staggered by JS via --i) ---------- */
.js .product-tour .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 .product-tour .reveal.in { opacity: 1; transform: none; }

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

/* css/sections.css */

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

.js .product-tour .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 .product-tour .hero-anim { opacity: 1; transform: none; }
}

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

/* ---------- 01 HERO ---------- */
.product-tour .dm-hero { padding: calc(var(--frame-inset) + 104px) 0 clamp(64px, 7vw, 104px); }
.product-tour .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 */
.product-tour .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; }
.product-tour .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. */
.product-tour .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%); }
.product-tour .dm-panel h1 { color: #fff; font-size: clamp(40px, 4.4vw, 64px); line-height: 1.04; letter-spacing: -0.04em; }
.product-tour .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 */

/* form card — trial's .tr-form-panel on a white card (our page is off-white, so the sunken fields need a white surface) */
.product-tour .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); }
.product-tour .dm-form-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.product-tour .dm-form-heading h2 { font-size: clamp(24px, 2.1vw, 30px); line-height: 1.15; letter-spacing: -0.03em; }
.product-tour .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; }
.product-tour .dm-form-badge svg { width: 15px; height: 15px; flex-shrink: 0; }

.product-tour .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; }
.product-tour .dm-alert.show { display: flex; }
.product-tour .dm-alert svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }

.product-tour .dm-form { margin-top: 30px; display: flex; flex-direction: column; gap: 22px; }
.product-tour .dm-field { min-width: 0; }
.product-tour .dm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; }
.product-tour .dm-field label { display: block; margin-bottom: 7px; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--text); }
.product-tour .dm-input, .product-tour .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; }
.product-tour .dm-input::placeholder { color: var(--text-3); }
.product-tour .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; }
.product-tour .dm-select.is-empty { color: var(--text-3); }
.product-tour .dm-select option { color: var(--text); }
.product-tour .dm-input:hover, .product-tour .dm-select:hover { border-color: var(--line-strong); }
.product-tour .dm-input:focus, .product-tour .dm-select:focus { outline: none; border-color: var(--brand); background-color: #fff; box-shadow: 0 0 0 3px rgba(99, 74, 252, .14); }
.product-tour .dm-field.invalid .dm-input, .product-tour .dm-field.invalid .dm-select { border-color: var(--dm-error); background-color: #fff; }
.product-tour .dm-field-error { display: none; margin-top: 6px; font-size: 12.5px; color: var(--dm-error); }
.product-tour .dm-field.invalid .dm-field-error { display: block; }

.product-tour .dm-submit-group { margin-top: 4px; }
.product-tour .dm-consent { margin-bottom: 14px; font-size: 12.5px; line-height: 1.6; color: var(--text-2); }
.product-tour .dm-consent a { color: var(--brand-hover); text-decoration: underline; text-underline-offset: 2px; }
.product-tour .dm-submit { width: 100%; }
.product-tour .dm-submit:disabled { opacity: .7; cursor: progress; transform: none; }
.product-tour .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; }
.product-tour .dm-submit.is-loading .dm-spinner { display: inline-block; }
@keyframes dmSpin { to { transform: rotate(360deg); } }

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

/* info box — trial's "What happens after 14 days" */
.product-tour .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; }
.product-tour .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; }
.product-tour .dm-info-box b { display: block; font-size: 15.5px; font-weight: 600; color: var(--text); }
.product-tour .dm-info-box p { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--text-2); }

@media (max-width: 1024px) {
  .product-tour .dm-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .product-tour .dm-panel { gap: 40px; }
}
@media (max-width: 767px) {
  .product-tour .dm-hero { padding-top: calc(var(--frame-inset) + 88px); }
  .product-tour .dm-field-row { grid-template-columns: minmax(0, 1fr); }
  .product-tour .dm-panel { padding: 36px 24px 28px; }
  .product-tour .dm-form-card { padding: 28px 20px; }
  .product-tour .dm-info-box { align-items: flex-start; }
  .product-tour .dm-info-box-icon { width: 48px; height: 48px; font-size: 22px; }
}

/* ---------- Product tour (sense-product-tour.html): the proof points at the foot of the dark panel; the player appears in the card once sent ---------- */
.product-tour .dm-panel h1 .dm-accent { color: var(--brand-soft); white-space: nowrap; }
.product-tour .dm-video { margin-top: 22px; border-radius: 16px; overflow: hidden; background: var(--ink); box-shadow: var(--shadow-md); }
.product-tour .dm-video:not(.is-playing) { display: none; }
.product-tour .dm-video-screen { position: relative; aspect-ratio: 16 / 9; }
.product-tour .dm-video-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.product-tour .dm-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--r-md); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line-inv);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.product-tour .dm-proof li { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px 20px; }
.product-tour .dm-proof li + li { border-left: 1px solid var(--line-inv); }
.product-tour .dm-proof b { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font: 500 clamp(20px, 1.9vw, 26px)/1.1 var(--font-display); letter-spacing: -0.02em; color: #fff; white-space: nowrap; }
.product-tour .dm-proof li > span { font-size: 12.5px; line-height: 1.35; color: var(--text-inv-2); }
.product-tour .dm-stars { display: inline-flex; gap: 1px; color: #00B67A; }
.product-tour .dm-stars svg { width: 12px; height: 12px; }
@media (min-width: 1025px) {   /* desktop (two-column hero) */
  /* the panel and the form card are squares: the grid gets a min-height of one column's width, from the hero section's width (cqw):
     min(section, container max) − gutters = grid width; minus the column gap, halved = one column. Content taller than that still grows the row */
  .product-tour .dm-hero { container-type: inline-size; }
  .product-tour .dm-hero-grid { container-type: inline-size; grid-template-rows: 1fr auto; row-gap: clamp(24px, 2.2vw, 32px);
    min-height: calc((min(100cqw, var(--container) + var(--gutter) * 2) - var(--gutter) * 2 - clamp(16px, 1.8vw, 24px)) / 2); }
  /* both share the grid's two rows (subgrid): copy | form on top, stats | "Rather see it live?" in the bottom row, so those two line up
     top and bottom; equal block padding keeps the rows level */
  .product-tour .dm-panel, .product-tour .dm-form-card { grid-row: 1 / span 2; display: grid; grid-template-rows: subgrid; gap: normal; padding-block: clamp(40px, 4.4vw, 64px); }
  .product-tour .dm-panel-copy { align-self: start; }
  /* a size container can't be a subgrid, so here the panel isn't one: the ring sizes from the hero grid instead (panel width = (100cqw - gap) / 2) */
  .product-tour .dm-panel { container-type: normal; }
  .product-tour .dm-ring { left: calc(-1 * var(--pad-x) - .15 * ((100cqw - clamp(16px, 1.8vw, 24px)) / 2)); width: calc(1.3 * ((100cqw - clamp(16px, 1.8vw, 24px)) / 2)); }
  .product-tour .dm-proof, .product-tour .dm-info-box { height: 100px; align-self: end; }   /* same row, same explicit height: tops and bottoms line up */
  .product-tour .dm-proof li { justify-content: center; }
  .product-tour .dm-info-box { padding-block: 12px; }
  .product-tour .dm-info-box-icon { width: 56px; height: 56px; font-size: 25px; }
  /* the form fills the top row: the button drops to its foot, the extra space opening between the fields and the button */
  .product-tour .dm-form-wrap { flex: 1; }
  .product-tour .dm-form { flex: 1; margin-top: clamp(26px, 2.4vw, 32px); }
  .product-tour .dm-submit-group { margin-top: auto; }
  .product-tour .dm-form-card.is-sent .dm-form-wrap { grid-row: 1 / span 2; }   /* sent: the info box hides, so the thank-you + video use both rows */
}
@media (max-width: 520px) {
  .product-tour .dm-proof li { padding: 12px 10px; }
  .product-tour .dm-proof b { font-size: 16px; }
}

/* the tour form is short: its content sits centred in the card instead of leaving a gap above the info box, with more air between
   the heading, the form and the info box (user, 10 Oct) */
.product-tour .dm-form-card { justify-content: center; gap: clamp(36px, 3.6vw, 52px); }
.product-tour .dm-form-wrap { flex: none; }
.product-tour .dm-form { margin-top: clamp(32px, 3vw, 44px); }

.product-tour .dm-form-card.is-sent .dm-info-box { display: none; }   /* its Book a demo link repeats the success buttons */

/* success buttons + info-box link (Product tour) */
.product-tour .dm-success-cta { margin-top: 24px; }
.product-tour .dm-info-link { color: var(--brand-hover); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* the UK label sits to the left of its pin, vertically centred (Romania has no label) */
.product-tour .dm-flag { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.product-tour .dm-flag svg { width: 100%; height: 100%; }

/* contact cards: float up over the faded bottom edge of the map */
@media (max-width: 640px) {
  /* phones: the map bleeds past the gutters (the section clips it) so Europe stays readable; labels sit above/below their pin */
  .product-tour .dm-flag { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .product-tour .dm-spinner { animation: none; }
}

/* The UK teams stat's Union Jack (Costi, 2026-10-12: the call.html SVG flag in place of the emoji, which Windows shows as "GB") is as
   tall as the stat's digits. The design's 26px .dm-flag is sized for the address cards: at the stat's 20px type it made the hero 4px
   taller than the export at 768-1024px (checks run 1). */
.product-tour .dm-proof .dm-flag { width: 1em; height: 1em; }