@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700;
  font-display: swap; src: url('./fonts/SpaceGrotesk.ttf') format('truetype');
}
@font-face {
  font-family: 'Public Sans'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('./fonts/PublicSans.ttf') format('truetype');
}
@font-face {
  font-family: 'Public Sans'; font-style: italic; font-weight: 100 900;
  font-display: swap; src: url('./fonts/PublicSans-Italic.ttf') format('truetype');
}
:root {
  --paper: #f7f4ee;
  --surface: #efeadd;
  --ink: #171b22;
  --soft: #4b5563;
  --muted: #626b79;
  --line: #e1dacb;
  --accent: #d9541f;
  --accent-text: #b8431a;
  --green: #1f5e52;
  --peach: #f3ddcb;
  --sage: #dceae4;
  --sans: 'Public Sans', system-ui, sans-serif;
  --heading: 'Space Grotesk', system-ui, sans-serif;
  --gutter: 56px;
  --header-h: 68px; /* header height inside its bottom border */
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; text-wrap: pretty; }
body.dialog-open { overflow: hidden; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .65; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-text); }
button, a, input, summary { -webkit-tap-highlight-color: transparent; }
button, a, summary { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 4px; }
::selection { background: var(--peach); color: var(--ink); }
img { display: block; max-width: 100%; height: auto; }
figure, p, h1, h2, h3, h4, h5 { margin: 0; }
h1, h2, h3, h4, h5 { font-family: var(--heading); font-weight: 700; line-height: 1.2; letter-spacing: -.025em; }
h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -.035em; text-wrap: balance; }
h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.15; text-wrap: balance; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
.container, .pricing-inner { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.section, .pricing-section { padding-block: 112px; }
.eyebrow, .pricing-eyebrow { font: 600 13px/1.55 var(--heading); letter-spacing: .09em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 1001; padding: 12px 18px; border-radius: 8px; background: var(--ink); color: #fff; }
.skip-link:focus { top: 12px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 15px 24px; border: 1.5px solid transparent; border-radius: 8px; font: 600 15px/1.45 var(--sans); text-align: center; transition: background .15s, color .15s, border-color .15s; }
.button span { font-size: 18px; line-height: 1; }
/* The reference's darker orange keeps small white button labels readable. */
.button-accent, .button-dark { background: var(--accent-text); color: #fff; }
.button-accent:hover, .button-dark:hover { background: #983614; color: #fff; }
.button-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.button-outline:hover { background: var(--ink); color: #fff; }
.text-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; font: 600 15px/1.5 var(--sans); color: var(--ink); text-align: left; }
.text-link:hover { border-color: var(--accent-text); color: var(--accent-text); }
.section-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 36px; }
.section-actions:first-child { margin: 0 0 48px; }

/* Shared section rhythm: title left, introduction right. */
.tint { background: var(--surface); }
.split-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 72px; align-items: start; margin-bottom: 56px; }
.split-head h2 { max-width: 560px; }
.prose { display: grid; gap: 14px; color: var(--soft); font-size: 17.5px; line-height: 1.65; }
.lead-ink { color: var(--ink); font-weight: 500; }
.label { font: 600 12.5px/1.5 var(--heading); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 56px 0 20px; }
.pull-quote { font: 500 clamp(19px, 1.8vw, 23px)/1.45 var(--heading); letter-spacing: -.01em; max-width: 820px; margin-top: 48px; }
.button-ghost { background: transparent; color: var(--ink); padding-inline: 8px; }
.button-ghost:hover { color: var(--accent-text); }

/* Navigation */
.site-header { position: sticky; top: 0; z-index: 50; background: rgb(247 244 238 / 94%); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.header-inner { position: relative; display: flex; align-items: center; gap: 40px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; min-height: 44px; }
.brand img { width: 118px; height: auto; }
.main-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; font-size: 14.5px; color: var(--soft); }
.main-nav > a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.main-nav > a:hover { color: var(--accent-text); }
.main-nav a[aria-current='page'], .main-nav a.is-current { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent-text); }
.nav-extra { display: none; }
/* "How it works" disclosure: a button with a chevron, its panel a dropdown under it. */
.nav-group { position: relative; }
.nav-group-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; color: inherit; white-space: nowrap; cursor: pointer; }
.nav-group-toggle:hover, .nav-group-toggle[aria-expanded='true'] { color: var(--accent-text); }
.nav-group-toggle.is-current { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent-text); }
.nav-chevron { flex: none; transition: transform .15s; }
.nav-group-toggle[aria-expanded='true'] .nav-chevron { transform: rotate(180deg); }
.nav-group-panel { position: absolute; top: calc(100% + 4px); left: -10px; z-index: 1; display: grid; gap: 2px; min-width: 300px; margin: 0; padding: 8px; list-style: none; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: 0 18px 40px -20px rgb(23 27 34 / 45%); }
.nav-group-panel[hidden] { display: none; }
/* Without the script the panel opens on hover and keyboard focus. */
html:not(.js) .nav-group:is(:hover, :focus-within) .nav-group-panel[hidden] { display: grid; }
.nav-group-panel a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; color: var(--ink); }
.nav-group-panel a:hover { background: var(--surface); }
.nav-group-panel a span { font: 600 14.5px/1.4 var(--sans); }
.nav-group-panel a small { font-size: 13px; line-height: 1.4; color: var(--muted); }
.nav-group-panel a[aria-current='page'] { box-shadow: inset 3px 0 0 var(--accent-text); border-radius: 4px 10px 10px 4px; }
.nav-group-panel a[aria-current='page'] span { color: var(--accent-text); }
.header-actions { display: flex; align-items: center; gap: 20px; }
.languages { display: flex; align-items: center; gap: 2px; font: 600 12.5px/1 var(--heading); color: var(--muted); }
.languages a { display: grid; place-items: center; min-height: 36px; min-width: 32px; padding: 0 6px; }
.languages a:hover { color: var(--ink); }
.languages a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent-text); }
.header-demo { min-height: 42px; padding: 9px 16px; font-size: 14px; white-space: nowrap; }
.menu-toggle { display: none; place-items: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; color: var(--ink); }
.menu-bars { display: grid; gap: 5px; width: 20px; }
.menu-bars i { display: block; height: 1.8px; border-radius: 2px; background: currentColor; transition: transform .2s; }
.menu-toggle[aria-expanded='true'] .menu-bars i:first-child { transform: translateY(3.4px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] .menu-bars i:last-child { transform: translateY(-3.4px) rotate(-45deg); }

/* Hero */
.hero { padding-block: 88px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
.hero-copy { display: grid; gap: 26px; justify-items: start; }
.hero-copy .eyebrow { margin: 0; }
.hero-title-lead { display: block; }
.hero-lead { font: 600 19px/1.45 var(--heading); max-width: 30ch; }
.hero-lead span { display: block; color: var(--accent-text); font-size: 22px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }
.hero-note { margin-top: -10px; font-size: 14px; color: var(--muted); }
.trial-alternative { margin-top: -10px; }
.registration-button { display: inline-block; padding-block: 6px; color: var(--accent-text); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.hero-figure { min-width: 0; margin-right: calc(-1 * var(--gutter) - 80px); }
.browser-frame { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 40px 80px -30px rgb(23 27 34 / 35%); }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fffdf9; font: 500 12px var(--heading); color: var(--muted); }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.browser-bar span { margin-left: 8px; }
.browser-frame .capture-button { border: 0; border-radius: 0; }
.intro-strip { border-top: 1px solid var(--line); padding-block: 44px 52px; }
.intro-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 72px; align-items: start; }
.intro-body { max-width: 60ch; font-size: 19px; line-height: 1.6; color: var(--soft); }

/* Product captures; every one opens the full-size dialog. */
.capture-button { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; cursor: zoom-in; box-shadow: 0 24px 48px -28px rgb(23 27 34 / 30%); transition: border-color .15s; }
.capture-button img { width: 100%; height: auto; }
.capture-button:hover { border-color: var(--accent); }
.zoom-hint { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 32px; height: 32px; background: var(--ink); color: #fff; border: 1px solid #fff; border-radius: 6px; font-size: 19px; opacity: 0; transition: opacity .15s; }
.capture-button:is(:hover, :focus-visible) .zoom-hint { opacity: 1; }
figcaption { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.phone-shot { display: grid; justify-items: center; text-align: center; min-width: 0; }
.capture-button.phone-frame { aspect-ratio: 780 / 1450; border: 7px solid var(--ink); border-radius: 30px; box-shadow: 0 30px 50px -30px rgb(23 27 34 / 45%); }
.capture-button.phone-frame:hover { border-color: #2d333c; }
.phone-frame img { height: 100%; object-fit: cover; object-position: top; }
.phone-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.phone-pair .phone-shot:nth-child(2) { margin-top: 48px; }

/* Problems */
.problems-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 72px; align-items: center; }
.problems-top h2 { margin-bottom: 24px; }
.problem-summary { display: grid; align-content: center; gap: 14px; padding: 36px 40px; border-radius: 16px; background: var(--ink); color: #cfd3d9; font-size: 15px; }
.problem-summary h3 { color: #fff; font-size: 21px; line-height: 1.3; }
.sub-heading { font-size: clamp(24px, 2.4vw, 30px); max-width: 720px; margin: 96px 0 32px; }
.problem-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--line); }
.problem-grid article { display: grid; align-content: start; gap: 12px; padding: 28px 30px 32px; background: var(--paper); }
.problem-grid h3 { font-size: 18px; }
.problem-grid p { padding-left: 54px; font-size: 15px; color: var(--soft); }
.icon-row { display: flex; align-items: center; gap: 14px; }
.icon-row .fold-chevron { margin-left: auto; }
.card-mark { display: block; flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 10px; color: var(--accent-text); background: var(--peach); }

/* Solution bridge and before/after list */
.dark-section { background: var(--ink); color: #fff; }
.dark-section .eyebrow { color: #f49a74; }
.solution-bridge { padding-block: 88px; }
.bridge-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 16px 72px; align-items: end; }
.bridge-grid .eyebrow { grid-column: 1 / -1; }
.bridge-lead { font: 500 clamp(22px, 2.3vw, 30px)/1.35 var(--heading); letter-spacing: -.015em; }
/* Solutions: the introduction stays in view beside a numbered problem → fix list. */
.solutions-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.solutions-intro { position: sticky; top: 110px; display: grid; gap: 22px; justify-items: start; }
.solutions-intro .eyebrow { margin: 0; }
.solutions-lead { font-size: 17.5px; line-height: 1.65; }
.solutions-intro .button { margin-top: 8px; }
.solution-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.solution-list li { padding-block: 26px; border-bottom: 1px solid var(--line); }
.solution-list summary { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: start; }
.solution-number { padding-top: 3px; font: 600 15px/1.3 var(--heading); color: var(--accent-text); font-variant-numeric: tabular-nums; }
.solution-list h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.02em; }
.solution-subtitle { margin-top: 2px; font-size: 14px; color: var(--muted); }
.solution-fix { position: relative; margin: 12px 0 0 56px; padding-left: 24px; font-size: 15.5px; line-height: 1.6; font-weight: 500; color: var(--green); }
.solution-fix .tick-mark { position: absolute; left: 0; top: 5px; width: 14px; height: 14px; }
.tick-mark { color: var(--green); }

/* Workflow stepper; without JavaScript all stages stay open. */
.workflow-steps { position: relative; list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.workflow-stage { border-bottom: 1px solid var(--line); }
.step-heading { margin: 0; }
.step-toggle { display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 4px; border: 0; background: none; text-align: left; color: inherit; font: inherit; }
.step-number { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 1.5px solid #cdbfa8; border-radius: 50%; font: 600 13px var(--heading); color: var(--muted); transition: background .2s, border-color .2s, color .2s; }
.step-text { display: grid; gap: 2px; }
.step-label { font: 600 11.5px/1.4 var(--heading); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.step-title { font: 600 17px/1.3 var(--heading); letter-spacing: -.01em; }
.new-step { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 4px; background: var(--sage); color: var(--green); font-size: 10.5px; letter-spacing: .08em; vertical-align: 1px; }
.step-panel { padding: 0 4px 24px 58px; color: var(--soft); font-size: 15.5px; }
.step-panel .stage-note { margin-top: 12px; font-style: italic; }
.stage-figure { margin-top: 20px; min-width: 0; }
.workflow-stage.is-active .step-number { background: var(--accent-text); border-color: var(--accent-text); color: #fff; }
.workflow-stage.is-active .step-label { color: var(--accent-text); }
.step-toggle:hover .step-number { border-color: var(--accent-text); }
.js-steps .step-toggle { cursor: pointer; }
.js-steps .workflow-stage:not(.is-active) .step-panel { display: none; }
.pipeline-loop { display: flex; gap: 10px; margin-top: 20px; font-size: 14px; color: var(--muted); }
.pipeline-loop span { color: var(--accent-text); }
.workflow-section .section-actions { justify-content: center; margin-top: 56px; }

/* Communication: two numbered features, then a link to the booking page. */
.comm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.comm-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 32px; border: 1px solid var(--line); border-radius: 16px; background: #fffdf9; }
.comm-num { padding-top: 12px; font: 700 15px/1 var(--heading); color: var(--accent-text); }
.comm-card h3 { margin: 14px 0 8px; font-size: 20px; }
.comm-card p { font-size: 15.5px; color: var(--soft); }
.comm-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 48px; margin-top: 48px; padding-top: 32px; border-top: 2px solid var(--ink); }
.comm-cta p { max-width: 540px; font: 600 clamp(18px, 1.6vw, 21px)/1.45 var(--heading); letter-spacing: -.01em; }

/* Roles: each role's text sits with its own screens. */
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.role-column { display: grid; align-content: start; gap: 32px; min-width: 0; }
.role-grid article { display: grid; gap: 16px; padding: 32px; border: 1px solid var(--line); border-radius: 16px; background: #fffdf9; }
.role-column:nth-child(2) .card-mark { background: var(--sage); color: var(--green); }
.role-grid h3 { font-size: 20px; }
.role-grid ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--soft); }
.role-grid li { position: relative; padding-left: 26px; }
.role-grid li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.role-grid article > p { padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; }
.role-shots { padding-inline: 24px; }

/* Business value: a dark band with to-scale charts; benefit cards overlap its lower edge. */
.business-section { --band-line: rgb(255 255 255 / 12%); --band-soft: #c9ced6; --band-label: #f49a74; --mark: #ff7a3d; --baseline: #6b7380; --grid: rgb(255 255 255 / 9%); }
.value-band { padding-block: 112px 196px; color: #fff; background: radial-gradient(760px 460px at 92% 4%, rgb(255 122 61 / 26%) 0%, transparent 70%), radial-gradient(620px 420px at 0% 100%, rgb(255 195 107 / 10%) 0%, transparent 70%), var(--ink); }
.value-band .split-head { align-items: end; margin-bottom: 0; }
.value-band h2 { color: #fff; }
.value-band .eyebrow { color: var(--band-label); }
.value-intro { max-width: 30ch; font: 500 21px/1.5 var(--heading); }
.value-note { max-width: 52ch; margin-top: 14px; color: var(--band-soft); font-size: 15px; line-height: 1.6; }
.band-label { margin: 72px 0 24px; font: 600 12.5px/1.5 var(--heading); letter-spacing: .1em; text-transform: uppercase; color: var(--band-label); }
.band-label--benefits { margin-bottom: 0; }
.value-charts { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 20px; }
.value-chart { margin: 0; padding: 28px 28px 22px; border: 1px solid var(--band-line); border-radius: 18px; background: #1f242d; outline: none; }
.value-chart:focus-visible, .range-row:focus-visible { box-shadow: 0 0 0 2px var(--mark); }
.range-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: center; min-height: 58px; border-radius: 10px; outline: none; }
.range-row:hover .range-label { color: #fff; }
.range-axis { min-height: 0; }
.range-label { font: 600 12.5px/1.35 var(--heading); letter-spacing: .08em; text-transform: uppercase; color: var(--band-soft); }
.range-track { position: relative; height: 58px; }
.zero { position: absolute; inset-block: 0; width: 1px; background: rgb(255 255 255 / 50%); }
.range-bar { position: absolute; top: 50%; height: 12px; margin-top: -6px; border-radius: 6px; background: var(--mark); }
.range-bar--point { width: 12px !important; margin-left: -6px; }
.range-value { position: absolute; top: 50%; transform: translateY(-50%); font: 700 22px/1 var(--heading); letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.range-value[data-side="right"] { margin-left: 12px; }
.range-value[data-side="left"] { margin-right: 12px; }
.axis { position: relative; display: block; height: 22px; background: linear-gradient(var(--grid), var(--grid)) bottom / 100% 1px no-repeat; }
.tick { position: absolute; bottom: 6px; transform: translateX(-50%); font: 500 12px/1 var(--heading); color: var(--band-label); font-variant-numeric: tabular-nums; }
.tick--zero { color: #fff; }
.rate-chart { display: grid; grid-template-rows: auto 1fr; gap: 18px; }
.rate-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: end; height: 260px; border-bottom: 1px solid rgb(255 255 255 / 50%); background: repeating-linear-gradient(to top, var(--grid) 0 1px, transparent 1px 25%); }
.rate-column { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 10px; height: 100%; }
.rate-bar { position: relative; width: 64%; border-radius: 6px 6px 0 0; background: var(--mark); }
.rate-column--before .rate-bar { background: var(--baseline); }
.rate-range { position: absolute; inset: 0 0 auto; border-radius: 6px 6px 0 0; background: repeating-linear-gradient(135deg, rgb(255 255 255 / 55%) 0 2px, transparent 2px 6px); }
.rate-value { font: 700 24px/1 var(--heading); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rate-column--before .rate-value { color: var(--band-soft); }
/* Industry averages, then the team's own figures from RDO. */
.own-numbers { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px 56px; align-items: center; margin-top: 72px; padding: 40px; border: 1px solid var(--band-line); border-radius: 18px; background: rgb(255 255 255 / 4%); }
.own-numbers > * { min-width: 0; }
.own-numbers h3 { margin-bottom: 14px; color: #fff; font-size: 24px; }
.own-numbers p { color: var(--band-soft); font-size: 15.5px; line-height: 1.65; }
.own-numbers p + p { margin-top: 12px; }
.own-numbers .own-cta { margin-top: 16px; color: #fff; font: 600 18px/1.45 var(--heading); }
.own-numbers figcaption { color: var(--band-soft); }
.own-numbers .capture-button { border-color: var(--band-line); }
.value-tip { position: absolute; z-index: 60; width: min(320px, calc(100vw - 32px)); padding: 12px 14px; border-radius: 10px; background: #fffdf9; color: var(--ink); font-size: 14px; line-height: 1.5; box-shadow: 0 16px 40px -12px rgb(0 0 0 / 45%); pointer-events: none; }
.benefits-wrap { margin-top: -160px; padding-bottom: 112px; }
.business-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.business-grid article { display: grid; gap: 12px; align-content: start; padding: 28px 28px 30px; border-radius: 18px; background: #fffdf9; box-shadow: 0 1px 0 var(--line), 0 24px 48px -30px rgb(23 27 34 / 50%); }
.business-grid .card-mark { width: 44px; height: 44px; padding: 10px; border-radius: 12px; }
.business-grid article:nth-child(even) .card-mark { background: var(--sage); color: var(--green); }
.business-grid h4 { font-size: 19px; }
.business-grid p { font-size: 15px; line-height: 1.6; color: var(--soft); }
.closing-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; margin-top: 64px; padding-top: 32px; border-top: 2px solid var(--ink); }
.closing-panel .pull-quote { margin: 0; max-width: 720px; font-weight: 600; }
.closing-panel .section-actions { margin: 0; }

/* Excel: a short homepage teaser; the full table lives on its own page. */
.excel-block { display: grid; justify-items: start; gap: 16px; max-width: 720px; }
.excel-block .eyebrow { margin: 0; }
.excel-text { color: var(--soft); font-size: 17.5px; }
.excel-block .button { margin-top: 6px; }
.compare-short .erp-copy { padding-top: 40px; border-top: 1px solid var(--line); }

/* Excel comparison: a real table on wide screens, labelled cards on phones. */
.comparison-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fffdf9; text-align: left; }
.comparison-table th, .comparison-table td { padding: 18px 28px; vertical-align: top; font-size: 15px; font-weight: 400; overflow-wrap: break-word; }
.comparison-table thead th { background: var(--paper); border-bottom: 1px solid var(--line); font: 600 12.5px/1.4 var(--heading); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.comparison-table thead th:first-child { width: 27%; }
.comparison-table thead th:last-child { color: var(--accent-text); }
.comparison-table tbody tr + tr > * { border-top: 1px solid var(--line); }
.comparison-table tbody th { font: 700 15.5px/1.4 var(--heading); letter-spacing: -.01em; }
.comparison-table tbody td:nth-child(2) { color: var(--muted); }
.comparison-table tbody td:last-child { color: var(--green); font-weight: 500; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--green); vertical-align: 1px; }
.erp-copy { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 16px 64px; align-items: baseline; margin-top: 56px; }
.erp-copy h3 { font-size: 22px; }
.erp-copy p { color: var(--soft); }

/* Subpages: a two-column opening and a link back home. */
.page-intro { padding-block: 48px 88px; }
.page-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 72px; align-items: start; }
.page-intro h1 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; }
.page-intro-copy { display: grid; gap: 16px; justify-items: start; padding-top: 6px; color: var(--soft); font-size: 17.5px; }
.comparison-table .comparison-group th { padding-block: 12px; background: var(--paper); font: 700 12px/1.4 var(--heading); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.comparison-table tbody + tbody .comparison-group th { border-top: 1px solid var(--line); }

/* Online booking page: three numbered stages, then the two scheduling modes. */
.booking-intro h1 em { font-style: normal; color: var(--accent-text); }
.promise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin-top: 24px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.promise > div { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 26px 28px 28px 0; }
.promise > div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.promise-label, .mode-label { font: 600 12px/1.4 var(--heading); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.promise h2 { font-size: 21px; line-height: 1.2; }
.promise p { color: var(--soft); font-size: 15.5px; }
.step-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; margin-bottom: 48px; }
.step-no { font: 700 clamp(44px, 4.6vw, 64px)/.85 var(--heading); color: var(--accent-text); }
.step-head h2 { max-width: 760px; }
.step-head-body { max-width: 66ch; margin-top: 16px; color: var(--soft); font-size: 17px; }
.booking-split { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; align-items: start; }
.booking-split > * { min-width: 0; }
.booking-split h3 { font-size: 21px; }
.booking-copy { display: grid; gap: 16px; margin: 12px 0 22px; color: var(--soft); }
.booking-note { margin: 20px 0 0; font-size: 15px; }
.request-flow { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.request-flow li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding-block: 18px; border-bottom: 1px solid var(--line); }
.request-flow-n { padding-top: 3px; font: 600 12px var(--heading); color: var(--accent-text); }
.request-flow h4 { margin-bottom: 6px; font-size: 17px; line-height: 1.6; }
.request-flow p { color: var(--soft); font-size: 15px; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; padding: 2px 9px; border-radius: 100px; font: 500 12px/1.6 var(--sans); letter-spacing: 0; white-space: nowrap; vertical-align: 2px; }
.status-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-pill--check { background: var(--peach); color: #a6401f; }
.status-pill--info { background: #dcecf3; color: #2e6177; }
.status-pill--done { background: var(--sage); color: var(--green); }
.status-pill--no { background: var(--surface); color: var(--soft); }
.flowchart { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 8px 0 0; padding: 0; list-style: none; }
.flow-step { display: grid; grid-template-rows: auto 1fr; gap: 22px; min-width: 0; }
.flow-row { display: flex; align-items: center; }
.flow-icon { display: grid; place-items: center; flex: none; width: 68px; height: 68px; border: 1.5px solid var(--ink); border-radius: 50%; background: #fffdf9; color: var(--accent-text); }
.flow-step:first-child .flow-icon { border-color: var(--accent-text); background: var(--peach); }
.flow-line { position: relative; flex: 1; height: 1.5px; margin-inline: 12px 14px; background: var(--ink); }
.flow-line::after { content: ''; position: absolute; right: -1px; top: 50%; width: 8px; height: 8px; border-top: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink); transform: translateY(-50%) rotate(45deg); }
.flow-line--optional { background: repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 10px); }
.flow-text { display: grid; gap: 8px; align-content: start; padding-right: 26px; }
.flow-text h3 { margin-top: 4px; font-size: 18px; }
.flow-text p { color: var(--soft); font-size: 15px; }
.flow-role { justify-self: start; padding: 4px 8px; border-radius: 4px; font: 600 11px/1.3 var(--heading); letter-spacing: .1em; text-transform: uppercase; }
.flow-role--dispatcher { background: var(--ink); color: #fff; }
.flow-role--customer { border: 1px solid var(--muted); color: var(--soft); }
.flow-role--both { border: 1px dashed var(--muted); color: var(--soft); }
.flow-optional { font-size: 13px; font-style: italic; color: var(--muted); }
.booking-phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; max-width: 840px; margin: 72px auto 0; }
.modes-body { color: #b9bec6; font-size: 16.5px; }
.modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #343b46; }
.mode { display: grid; gap: 14px; align-content: start; min-width: 0; padding: 28px 32px 0 0; }
.mode + .mode { padding-left: 32px; border-left: 1px solid #343b46; }
.mode-label { color: #f49a74; }
.mode h3 { font-size: 21px; }
.mode p { color: #b9bec6; font-size: 15.5px; }
.mode .mode-where { color: #fff; font-size: 14px; }
.mode-diagram { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; font-size: 13px; }
.mode-node { padding: 6px 10px; border: 1px solid #343b46; border-radius: 6px; }
.mode-node--source { background: #fff; border-color: #fff; color: var(--ink); font-weight: 600; }
.mode-arrow { color: #8b929c; }
.mode-fan { display: grid; gap: 4px; }
.gains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 44px; border-top: 1px solid var(--ink); }
.gains > div { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 26px 26px 26px 0; border-bottom: 1px solid var(--line); }
.gains > div:not(:nth-child(3n+1)) { padding-left: 26px; border-left: 1px solid var(--line); }
.gains h3 { font-size: 18px; }
.gains p { color: var(--soft); font-size: 15px; }
.gain-mark { margin-bottom: 6px; color: var(--accent-text); }

/* Pricing: every plan and entitlement still comes from the billing catalog.
   The plans sit on the page surface, like the other sections, so the page does not look finished at the prices. */
.pricing-section { background: var(--surface); color: var(--ink); }
.pricing-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 72px; align-items: start; }
.pricing-eyebrow { color: var(--accent-text); }
.pricing-intro { color: var(--soft); font-size: 17.5px; line-height: 1.65; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; margin-top: 56px; }
.pricing-card { display: flex; flex-direction: column; min-width: 0; padding: 32px; border-radius: 18px; background: #fffdf9; box-shadow: 0 1px 0 var(--line), 0 24px 48px -30px rgb(23 27 34 / 50%); }
.pricing-card h3 { font-size: 20px; overflow-wrap: anywhere; }
.pricing-price { margin-top: 18px; font: 700 44px/1.1 var(--heading); letter-spacing: -.03em; overflow-wrap: anywhere; }
.pricing-price small { display: inline-block; font: 400 13px/1.6 var(--sans); letter-spacing: 0; color: var(--muted); }
.pricing-seats { margin-top: 10px; font-size: 14px; color: var(--muted); }
.pricing-base { margin-top: 10px; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.pricing-base strong { font-weight: 600; color: var(--ink); }
.pricing-features { margin: 20px 0 0; padding: 16px 0; list-style: none; border-block: 1px solid var(--line); }
.pricing-features li { position: relative; padding-left: 24px; margin-block: 6px; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.pricing-features li::before { content: '✓'; position: absolute; left: 0; color: var(--green); }
.pricing-limits { display: grid; gap: 4px; margin-top: auto; padding: 16px 0 12px; font-size: 14px; color: var(--soft); overflow-wrap: anywhere; }
.pricing-support { margin-bottom: 22px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.pricing-cta { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 13px 16px; border: 1.5px solid var(--ink); border-radius: 8px; font-size: 15px; font-weight: 600; color: var(--ink); transition: background .15s, border-color .15s, color .15s; }
button.pricing-cta { width: 100%; background: transparent; font-family: inherit; line-height: inherit; cursor: pointer; }
.pricing-cta:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.pricing-cta:focus-visible { outline-color: var(--accent); }
.pricing-terms { max-width: 900px; margin-top: 28px; font-size: 14px; line-height: 1.7; color: var(--soft); }

/* Folds: details that stay open on wide screens and collapse to their title on phones (script). */
.fold > summary { list-style: none; cursor: default; pointer-events: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold-chevron { display: none; flex: none; color: var(--muted); transition: transform .15s; }
.fold[open] > summary .fold-chevron { transform: rotate(180deg); }
/* Comparison group headings: plain on wide screens, a toggle on phones. */
.group-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: left; pointer-events: none; }
/* Jump links under a page head. */
.page-index { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
.page-index a { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fffdf9; font: 600 13.5px/1.4 var(--sans); color: var(--ink); }
.page-index a:hover { border-color: var(--accent-text); color: var(--accent-text); }

/* Setup */
.setup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 72px; align-items: center; }
.setup h2 { margin-bottom: 20px; }
.setup-card { display: grid; gap: 22px; padding: 32px; border: 1px solid var(--line); border-radius: 16px; background: #fffdf9; }
.setup-card > div { display: flex; align-items: flex-start; gap: 16px; font-size: 15px; color: var(--soft); }
.setup-card .card-mark { background: var(--sage); color: var(--green); }
.setup-card .text-link { justify-self: start; }

/* FAQ */
.faq-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.faq-side { position: sticky; top: 110px; }
.faq-list { border-top: 1px solid var(--ink); }
.faq-list details { border-bottom: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
.faq-list summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-block: 20px; font-weight: 600; line-height: 1.5; }
.faq-list summary:hover { color: var(--accent-text); }
.disclosure-icon { position: relative; flex: none; width: 14px; height: 14px; margin-top: 6px; }
.disclosure-icon::before, .disclosure-icon::after { content: ''; position: absolute; inset: 6px 0 auto; height: 2px; background: var(--accent-text); transition: transform .2s; }
.disclosure-icon::after { transform: rotate(90deg); }
details[open] > summary .disclosure-icon::after { transform: rotate(0); }
.faq-list details > p { max-width: 760px; padding: 0 40px 22px 0; font-size: 15.5px; color: var(--soft); }
.faq-list a:not(.button) { color: var(--accent-text); text-decoration: underline; text-underline-offset: 4px; }
.faq-more { padding-top: 28px; }
.faq-page { padding-top: 0; }
.faq-page .faq-list { max-width: 860px; margin-inline: auto; }

/* Demo and footer */
.demo-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px 72px; align-items: center; padding: 64px; border-radius: 24px; background: var(--peach); }
.demo-layout > div:first-child { display: grid; gap: 18px; justify-items: start; }
.demo-layout .eyebrow { margin: 0; }
.demo-layout p:not(.eyebrow) { max-width: 58ch; font-size: 17px; color: #3d3a36; }
.demo-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.demo-contact { display: grid; gap: 12px; }
.demo-contact a { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 12px; background: #fffdf9; font-weight: 700; font-size: 17px; overflow-wrap: anywhere; }
.demo-contact small { display: block; margin-bottom: 2px; font: 600 11.5px var(--heading); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.contact-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--peach); color: var(--accent-text); }
.contact-icon svg { width: 22px; height: 22px; }
.demo-contact a:nth-child(2) .contact-icon { background: var(--sage); color: var(--green); }
.site-footer { padding: 72px 0 36px; font-size: 14.5px; color: #b9bec6; }
.footer-grid { display: grid; grid-template-columns: 2fr 1.3fr 1fr; gap: 40px; }
.footer-brand .brand img { width: 150px; }
.footer-brand p { max-width: 36ch; margin-top: 16px; }
.footer-grid nav, .footer-contact { display: flex; flex-direction: column; align-items: flex-start; }
.footer-grid .eyebrow { margin-bottom: 10px; font-size: 12px; color: #aeb4bd; }
.footer-grid a:not(.brand) { padding-block: 5px; overflow-wrap: anywhere; }
.site-footer a:hover { color: #fff; }
.site-footer :focus-visible { outline-color: #f49a74; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid #343b46; font-size: 13px; color: #8b929c; }
.footer-bottom > div { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer .privacy-settings-link { max-width: calc(1240px - 2 * var(--gutter)); width: calc(100% - 2 * var(--gutter)); margin: 16px auto 0; padding: 8px 0; text-align: left; color: #f49a74; font-size: 13px; }
.mobile-demo { display: none; }

/* Native dialogs retain focus, Escape, backdrop and submission behavior. */
dialog { border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); padding: 0; max-height: calc(100dvh - 40px); box-shadow: 0 24px 90px rgb(23 27 34 / 25%); }
dialog:not([open]) { display: none; }
dialog::backdrop { background: rgb(23 27 34 / 60%); backdrop-filter: blur(3px); }
.demo-dialog { width: min(440px, calc(100% - 32px)); overflow: auto; }
.dialog-content { padding: 36px 32px; }
.dialog-close { display: grid; place-items: center; position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; border: 0; border-radius: 8px; background: #fff; color: var(--muted); font: 28px/1 var(--sans); z-index: 1; }
.dialog-close:hover { background: var(--surface); }
.dialog-content > .eyebrow { padding-right: 24px; font-size: 12px; }
.dialog-content h2 { font-size: 24px; margin: 10px 0; }
.dialog-content > p:not(.eyebrow) { font-size: 14.5px; line-height: 1.6; color: var(--soft); }
.demo-dialog form { margin-top: 24px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field label span { font-weight: 400; color: var(--muted); }
.field input, .field select { display: block; width: 100%; min-height: 48px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; color: var(--ink); }
.form-privacy { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin-block: 16px; }
.form-privacy a { color: var(--soft); text-decoration: underline; text-underline-offset: 3px; }
.form-actions { display: flex; gap: 12px; margin-top: 16px; }
.form-actions .button { flex: 1; padding: 12px; font-size: 14px; }
.form-actions .button > span { display: none; }
.form-actions .button-outline { border-color: var(--line); }
.form-contact { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; }
.contact-status:empty { display: none; }
.contact-status { margin-block: 16px; border-radius: 8px; padding: 12px; background: var(--surface); color: var(--soft); font-size: 14px; }
.contact-status[data-kind='error'] { background: #fce6de; color: #8c2b16; }
.contact-status[data-kind='success'] { background: var(--sage); color: var(--green); }
.contact-status[data-kind='saved'] { background: #fff0d5; color: #754512; }
.image-dialog { width: min(1440px, calc(100% - 40px)); max-width: calc(100vw - 40px); padding: 56px 16px 16px; overflow: auto; }
.image-dialog img { width: 100%; height: auto; }
.image-dialog p { color: var(--muted); font-size: 13px; padding-top: 12px; }

/* Legal content and consent policies stay unchanged within the shared style. */
.legal-page { max-width: 1080px; padding-inline: 40px; margin-inline: auto; }
.legal-header { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-block: 28px; border-bottom: 1px solid var(--line); }
.legal-brand { font: 700 32px/1.2 var(--heading); }
.legal-brand span { display: block; font: 500 10px/1.5 var(--sans); letter-spacing: .08em; margin-top: 6px; }
.legal-content { margin-block: 64px; }
.legal-eyebrow { font: 600 12px/1.6 var(--heading); color: var(--accent-text); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 20px; }
.legal-content h1 { font-size: clamp(32px, 4vw, 48px); overflow-wrap: anywhere; }
.legal-copy { margin-top: 40px; color: var(--soft); font-size: 16px; line-height: 1.8; }
.legal-copy h2 { margin: 40px 0 18px; font-size: 28px; color: var(--ink); }
.legal-copy h3 { margin: 28px 0 14px; font-size: 22px; color: var(--ink); }
.legal-copy p, .legal-copy ul, .legal-copy ol { margin-block: 16px; }
.legal-copy a { color: var(--accent-text); text-decoration: underline; overflow-wrap: anywhere; }
.legal-copy table { display: block; max-width: 100%; overflow: auto; border-collapse: collapse; }
.legal-copy td, .legal-copy th { padding: 12px; border: 1px solid var(--line); text-align: left; }
.legal-footer { padding: 28px 0 40px; border-top: 1px solid var(--line); font-size: 13px; }
.legal-footer nav { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; }
.legal-footer .privacy-settings-link { margin: 20px 0 0; padding: 0; text-align: left; }
.privacy-panel { border-color: var(--line); border-radius: 14px; font-family: var(--sans); }
.privacy-panel h2 { font-family: var(--heading); }
.privacy-actions button { border-radius: 8px; }

.global-loading-indicator { position: fixed; inset: 0 0 auto; z-index: 10000; height: 3px; overflow: hidden; pointer-events: none; }
.global-loading-indicator[hidden] { display: none; }
.global-loading-indicator > span { display: block; width: 42%; height: 100%; border-radius: 0 999px 999px 0; background: var(--accent); animation: global-loading-progress 1.1s cubic-bezier(.2, 0, 0, 1) infinite; }
@keyframes global-loading-progress { from { transform: translateX(-110%); } to { transform: translateX(340%); } }


@media (max-width: 1080px) {
  :root { --gutter: 40px; }
  .section, .pricing-section { padding-block: 88px; }
  .header-inner { gap: 16px; }
  /* Menu sheet: fills the screen below the header. The header's backdrop-filter
     makes it the containing block, so top: 100% is the header's bottom edge. */
  .main-nav { display: none; position: fixed; top: 100%; left: 0; right: 0; height: calc(100dvh - var(--header-h)); margin: 0; padding: 12px var(--gutter) calc(24px + env(safe-area-inset-bottom)); flex-direction: column; align-items: stretch; gap: 0; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); background: var(--paper); font-size: 16px; }
  .main-nav.is-open { display: flex; animation: menu-in .18s ease-out; }
  .main-nav > a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; border-bottom: 1px solid var(--line); font: 600 21px/1.25 var(--heading); letter-spacing: -.015em; color: var(--ink); white-space: normal; }
  .main-nav > a::after { content: ''; flex: none; width: 8px; height: 8px; margin-right: 4px; border-top: 1.8px solid var(--muted); border-right: 1.8px solid var(--muted); transform: rotate(45deg); }
  .main-nav > a:hover::after { border-color: var(--accent-text); }
  .main-nav a[aria-current='page'], .main-nav a.is-current { box-shadow: none; color: var(--accent-text); }
  /* In the menu sheet the group is a row like the others, its pages listed open underneath. */
  .nav-group-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; border-bottom: 1px solid var(--line); font: 600 21px/1.25 var(--heading); letter-spacing: -.015em; color: var(--ink); white-space: normal; text-align: left; }
  .nav-group-toggle:hover, .nav-group-toggle[aria-expanded='true'] { color: var(--ink); }
  .nav-group-toggle.is-current { box-shadow: none; }
  .nav-chevron { width: 14px; height: 14px; margin-right: 4px; color: var(--muted); }
  .nav-group-panel { position: static; display: grid; gap: 0; min-width: 0; margin: 0; padding: 0 0 0 20px; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .nav-group-panel a { padding: 14px 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav-group-panel a:hover { background: none; }
  .nav-group-panel a span { font: 600 17px/1.3 var(--heading); letter-spacing: -.01em; }
  .nav-group-panel a small { font-size: 14px; }
  .nav-group-panel a[aria-current='page'] { box-shadow: none; border-radius: 0; }
  .nav-extra { display: grid; gap: 20px; margin-top: auto; padding-top: 32px; }
  .nav-extra .button, .nav-extra .languages { display: none; }
  .nav-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; font-size: 14px; color: var(--muted); }
  .nav-contact a { padding-block: 6px; }
  html.menu-open { overflow: hidden; }
  html.menu-open .site-header { background: var(--paper); }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
  .header-actions { margin-left: auto; }
  .menu-toggle { display: grid; }
  .booking-split { grid-template-columns: 1fr; gap: 40px; }
  .flowchart { grid-template-columns: 1fr; }
  .flow-step { grid-template-columns: 68px minmax(0, 1fr); grid-template-rows: none; column-gap: 20px; }
  .flow-row { flex-direction: column; }
  .flow-line { flex: 1; width: 1.5px; height: auto; min-height: 36px; margin: 12px 0 14px; }
  .flow-line::after { right: auto; top: auto; bottom: -1px; left: 50%; transform: translateX(-50%) rotate(135deg); }
  .flow-line--optional { background: repeating-linear-gradient(180deg, var(--ink) 0 5px, transparent 5px 10px); }
  .flow-text { padding: 6px 0 30px; }
  .gains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gains > div, .gains > div:not(:nth-child(3n+1)) { padding: 22px 18px 22px 0; border-left: 0; }
  .solutions-layout { grid-template-columns: 1fr; gap: 40px; }
  .solutions-intro { position: static; }
  .hero-grid, .page-intro-grid, .problems-top, .own-numbers, .faq-layout, .demo-layout, .setup, .erp-copy { grid-template-columns: 1fr; }
  .faq-side { position: static; }
  .hero-copy { max-width: 640px; }
  .hero-figure { margin-right: 0; }
  .problem-grid, .business-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value-charts { grid-template-columns: 1fr; }
  .rate-chart { max-width: 520px; }
  .rate-columns { height: 200px; }
  .problem-grid { gap: 12px; border: 0; border-radius: 0; background: none; }
  .problem-grid article { border: 1px solid var(--line); border-radius: 14px; }
}
@media (min-width: 1081px) {
  /* The open stage's screenshot sits beside the step list. */
  .js-steps { min-height: 560px; padding-right: calc(58.33% + 56px); }
  .js-steps .stage-figure { position: absolute; top: 0; right: 0; width: 58.33%; margin: 0; }
}
@media (max-width: 700px) {
  :root { --gutter: 20px; }
  html { scroll-padding-top: 72px; }
  body { font-size: 15.5px; }
  .section, .pricing-section { padding-block: 64px; }
  .header-inner { min-height: 56px; }
  .brand img { width: 96px; }
  .header-actions > .languages, .header-demo { display: none; }
  :root { --header-h: 56px; }
  .nav-extra .button { display: inline-flex; width: 100%; }
  .nav-extra .languages { display: flex; justify-self: center; gap: 12px; font-size: 13.5px; }
  .main-nav > a { min-height: 64px; font-size: 20px; }
  h1 { font-size: 31px; }
  h2 { font-size: 27px; }
  .split-head, .pricing-heading { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; }
  .prose, .pricing-intro { font-size: 16px; }
  .label { margin: 40px 0 14px; }
  .pull-quote { margin-top: 32px; }

  .hero { padding-block: 32px 44px; }
  .hero-grid { gap: 40px; }
  .hero-copy { gap: 18px; justify-items: stretch; }
  .hero .eyebrow { font-size: 11px; letter-spacing: .08em; }
  .hero-lead { font-size: 16px; }
  .hero-lead span { font-size: 18px; margin-bottom: 2px; }
  /* Phones: the hero and the subpage heads centre everything, with stacked, full-width buttons. */
  .hero-actions { display: grid; width: 100%; gap: 10px; margin-top: 4px; }
  .hero-actions .button { width: 100%; }
  .home-hero-head { gap: 16px; }
  .home-hero-copy { justify-items: center; text-align: center; }
  .home-note { justify-content: center; text-align: left; }
  .page-intro-centered .page-intro-copy { text-align: center; }
  .page-intro-list { justify-self: center; text-align: left; }
  /* Phones: folds collapse to their titles, the header keeps a compact demo button. */
  .fold > summary { cursor: pointer; pointer-events: auto; }
  .fold-chevron { display: block; }
  .comparison-table tbody.is-collapsed tr:not(.comparison-group) { display: none; }
  .group-toggle { pointer-events: auto; cursor: pointer; }
  .booking-intro h1 { font-size: 27px; }
  .home-hero .home-badge { padding: 0; background: none; }
  .home-card:not(.home-card-featured) { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 18px; }
  .home-card:not(.home-card-featured) .card-mark { grid-row: 1 / span 3; width: 40px; height: 40px; padding: 9px; }
  .home-card:not(.home-card-featured) h3 { font-size: 17px; }
  .home-card:not(.home-card-featured) p { font-size: 14px; line-height: 1.5; }
  .home-card:not(.home-card-featured) .home-card-link { font-size: 13px; }
  .home-card-shot { position: relative; max-height: 360px; overflow: hidden; border-radius: 14px; }
  .home-card-shot::after { content: ''; position: absolute; inset: auto 0 0 0; height: 120px; background: linear-gradient(to bottom, rgb(255 253 249 / 0%), #fffdf9); pointer-events: none; }
  .trial-alternative { margin-top: 0; text-align: center; }
  .hero-figure { width: 68%; justify-self: center; text-align: center; }
  .browser-frame { aspect-ratio: 780 / 1450; border: 7px solid var(--ink); border-radius: 30px; }
  .browser-bar { display: none; }
  .browser-frame .capture-button, .browser-frame picture { height: 100%; }
  .browser-frame img { height: 100%; object-fit: cover; object-position: top; }
  .intro-strip { padding-block: 32px 40px; }
  .intro-grid { grid-template-columns: 1fr; gap: 20px; }
  .intro-body { font-size: 16.5px; }
  
  /* Phone captures instead of shrunken desktop captures. */
  .stage-figure { text-align: center; }
  .stage-figure .capture-button { max-width: 280px; margin-inline: auto; aspect-ratio: 780 / 1300; border: 7px solid var(--ink); border-radius: 28px; }
  .stage-figure picture { height: 100%; }
  .stage-figure img { height: 100%; object-fit: cover; object-position: top; }

  .problem-summary { padding: 24px 22px; }
  .problem-summary h3 { font-size: 18px; }
  .sub-heading { margin: 64px 0 20px; }
  .problem-grid { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
  .problem-grid article { gap: 8px; padding: 20px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
  .problem-grid .card-mark { width: 34px; height: 34px; padding: 7px; }
  .problem-grid h3 { font-size: 17px; }
  .problem-grid p { padding-left: 48px; font-size: 14.5px; }

  .solution-bridge { padding-block: 56px; }
  .bridge-grid { grid-template-columns: 1fr; }
  .solutions-intro .button { width: 100%; }
  .solution-list li { padding-block: 18px; }
  .solution-list summary { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .solution-fix { margin-left: 40px; }
  .solution-list h3 { font-size: 17px; }
  .solution-fix { font-size: 14.5px; }

  .step-toggle { gap: 14px; padding: 14px 0; }
  .step-number { width: 34px; height: 34px; font-size: 12px; }
  .step-title { font-size: 16px; }
  .step-panel { padding: 0 0 22px; font-size: 15px; }
  .workflow-section .section-actions { margin-top: 36px; }
  .workflow-section .section-actions .button, .closing-panel .section-actions, .closing-panel .button, .demo-actions, .demo-actions .button { width: 100%; }

  .comm-grid { grid-template-columns: 1fr; gap: 12px; }
  .comm-card { padding: 24px 22px; }
  .comm-cta { margin-top: 36px; }
  .comm-cta .button { width: 100%; }
  .phone-pair { gap: 14px; }
  .phone-pair .phone-shot:nth-child(2) { margin-top: 28px; }
  .capture-button.phone-frame { border-width: 5px; border-radius: 22px; }
  .phone-shot figcaption { font-size: 12px; }

  .role-grid { grid-template-columns: 1fr; gap: 48px; }
  .role-grid article { padding: 24px 22px; }
  .role-shots { padding-inline: 0; }

  .value-band { padding-block: 64px 150px; }
  .value-intro { font-size: 18px; }
  .band-label { margin: 48px 0 16px; }
  .value-chart { padding: 20px 16px 16px; border-radius: 14px; }
  .range-row { grid-template-columns: 1fr; gap: 2px; min-height: 0; padding-top: 12px; }
  .range-axis { padding-top: 0; }
  .range-axis > span:first-child { display: none; }
  .range-label { font-size: 11.5px; }
  .range-track { height: 40px; }
  .range-value { font-size: 16px; }
  .range-value[data-side="right"] { margin-left: 8px; }
  .range-value[data-side="left"] { margin-right: 8px; }
  .rate-columns { height: 180px; }
  .rate-value { font-size: 20px; }
  .own-numbers { margin-top: 48px; padding: 24px 20px; }
  .benefits-wrap { margin-top: -118px; padding-bottom: 64px; }
  .business-grid { grid-template-columns: 1fr; gap: 12px; }
  .business-grid article { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; padding: 22px 22px 24px; }
  .business-grid .card-mark { grid-row: 1 / 3; width: 40px; height: 40px; padding: 9px; }
  .business-grid h4 { align-self: center; font-size: 17px; }
  .business-grid p { grid-column: 2; font-size: 14.5px; }
  .closing-panel { margin-top: 44px; }

  .comparison-table, .comparison-table tbody, .comparison-table tr { display: block; }
  .comparison-table { border: 0; border-radius: 0; background: none; }
  .comparison-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .comparison-table tbody tr { display: grid; gap: 10px; margin-bottom: 12px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fffdf9; }
  .comparison-table tbody tr > * { padding: 0; border: 0 !important; font-size: 14.5px; }
  .comparison-table tbody td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 600 11px/1.4 var(--heading); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .comparison-table tbody td:last-child::before { color: var(--accent-text); }
  .comparison-table tbody tr.comparison-group { display: block; margin: 24px 0 10px; padding: 0; border: 0; background: none; }
  .comparison-table tbody:first-of-type tr.comparison-group { margin-top: 0; }
  .comparison-table .comparison-group th { display: block; padding: 0; background: none; font-size: 12px; }
  .page-intro { padding-block: 32px 56px; }
  .promise, .modes { grid-template-columns: 1fr; }
  .promise { margin-top: 8px; }
  .promise > div, .promise > div + div { padding: 22px 0; border-left: 0; }
  .promise > div + div { border-top: 1px solid var(--line); }
  .step-head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; }
  .step-head-body { font-size: 16px; }
  .booking-phones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; margin-top: 48px; }
  .booking-phones .phone-shot:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px); }
  .mode, .mode + .mode { padding: 26px 0; border-left: 0; }
  .mode + .mode { border-top: 1px solid #343b46; }
  .gains { grid-template-columns: 1fr; }
  .page-intro-copy { font-size: 16px; }
  .erp-copy { margin-top: 40px; }
  .excel-block .button { width: 100%; }

  .pricing-grid { margin-top: 36px; }
  .pricing-card, .setup-card { padding: 24px 22px; }
  .pricing-price { font-size: 38px; }
  .faq-layout { gap: 28px; }
  .faq-list summary { padding-block: 18px; font-size: 15.5px; }
  .faq-list details > p { padding-right: 0; }
  .demo-layout { gap: 28px; padding: 32px 22px; border-radius: 18px; }
  .demo-contact a { font-size: 15px; }
  .site-footer { padding: 56px 0 110px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; margin-top: 36px; }
  .site-footer .privacy-settings-link { font-size: 12px; }

  .mobile-demo { display: block; position: fixed; inset: auto 0 0; z-index: 40; padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgb(247 244 238 / 94%); backdrop-filter: blur(8px); transform: translateY(110%); visibility: hidden; transition: transform .25s, visibility .25s; }
  .mobile-demo.is-visible { transform: none; visibility: visible; }
  .mobile-demo .button { width: 100%; min-height: 46px; }
  .demo-dialog { max-height: calc(100dvh - 24px); }
  .dialog-content { padding: 32px 24px 24px; }
  .form-actions .button { font-size: 13px; padding-inline: 10px; }
  .image-dialog { width: calc(100% - 16px); max-width: calc(100vw - 16px); padding-inline: 8px; }
  .image-dialog p { font-size: 12px; }
  .legal-page { padding-inline: 24px; }
  .legal-header { gap: 20px; }
  .legal-content { margin-block: 40px; }
  .legal-copy { font-size: 15px; }
  .legal-copy h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .global-loading-indicator > span { width: 100%; }
}

/* Homepage: the headline beside the video, then one card per feature page. */
.home-hero { padding-block: 80px 96px; }
.home-hero-stack { display: grid; gap: 48px; }
.home-hero-head { display: grid; gap: 22px; justify-items: center; text-align: center; }
.home-hero-head h1 { width: 100%; font-size: clamp(44px, 5.6vw, 80px); line-height: 1; letter-spacing: -.04em; }
.home-hero-grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: 40px 64px; align-items: center; }
.home-hero-copy { display: grid; gap: 24px; justify-items: start; }
.home-badge { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--peach); font: 600 12px/1.5 var(--heading); letter-spacing: .08em; text-transform: uppercase; color: #8f3312; }
.badge-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-text); }
.home-lead { max-width: 46ch; font-size: 19px; line-height: 1.55; color: var(--soft); }
.home-hero-copy .hero-actions { margin-top: 8px; }
.home-note { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--muted); }
.home-note svg { flex: none; color: var(--green); }
.video-frame { position: relative; margin: 0; }
.video-frame figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); }
/* The player sits in a dark, bordered stage so it separates from the matching page background. */
.video-stage { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border: 2px solid var(--ink); border-radius: 16px; background: #0b1220; box-shadow: 0 36px 72px -32px rgb(23 27 34 / 60%); }
.video-noscript { position: absolute; left: 24px; bottom: 24px; color: #fffdf9; font-weight: 600; }
/* The player: a large dialog over the blurred page. */
.video-dialog { width: min(1600px, calc(100% - 48px)); max-width: calc(100vw - 48px); padding: 0; border: 0; border-radius: 16px; background: #0b1220; overflow: visible; box-shadow: 0 40px 120px rgb(0 0 0 / 55%); }
.video-dialog::backdrop { background: rgb(11 18 32 / 62%); backdrop-filter: blur(14px) saturate(.85); }
.video-dialog video { display: block; width: 100%; height: auto; max-height: calc(100dvh - 96px); border-radius: 16px; background: #0b1220; }
.video-dialog-close { right: 0; top: -50px; background: rgb(255 253 249 / 16%); color: #fffdf9; }
.video-dialog-close:hover { background: rgb(255 253 249 / 30%); }
/* Click-to-play cover, shown by website.js; the video starts on the click. */
.video-cover { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: #0b1220; color: #fff; text-align: left; cursor: pointer; overflow: hidden; }
.video-cover[hidden] { display: none; }
.video-cover-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(6px) saturate(1.1) brightness(.55); transform: scale(1.08); }
.video-cover-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(11 18 32 / 45%) 0%, rgb(11 18 32 / 40%) 30%, rgb(11 18 32 / 88%) 62%, rgb(11 18 32 / 98%) 100%); }
.video-cover-glow { position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 40%, rgb(184 67 26 / 28%), rgb(184 67 26 / 0%) 70%); }
.video-cover-bar { position: absolute; left: 0; right: 0; height: 36px; background: #0b1220; }
.video-cover-bar-top { top: 0; }
.video-cover-bar-bottom { bottom: 0; }
.video-cover-label, .video-cover-meta { position: absolute; display: inline-flex; align-items: center; gap: 8px; font: 600 11px/1.4 var(--heading); letter-spacing: .14em; text-transform: uppercase; color: var(--band); }
.video-cover-label { left: 24px; top: 10px; }
.video-cover-label .badge-dot { width: 6px; height: 6px; background: var(--mark); }
.video-cover-meta { right: 24px; bottom: 10px; }
.video-cover-play { position: absolute; left: 50%; top: 44%; width: 92px; height: 92px; margin: -46px 0 0 -46px; display: flex; align-items: center; justify-content: center; border: 1.5px solid rgb(255 253 249 / 55%); border-radius: 50%; background: rgb(255 253 249 / 14%); color: #fffdf9; backdrop-filter: blur(6px); box-shadow: 0 0 0 14px rgb(255 253 249 / 6%); transition: transform .15s, background .15s; }
.video-cover:hover .video-cover-play, .video-cover:focus-visible .video-cover-play { transform: scale(1.06); background: rgb(255 253 249 / 24%); }
.video-cover:focus-visible { outline: 3px solid var(--mark); outline-offset: -3px; }
.video-cover-text { position: absolute; left: 32px; right: 32px; bottom: 56px; display: grid; gap: 10px; }
.video-cover-kicker { font: 600 12px/1.4 var(--heading); letter-spacing: .14em; text-transform: uppercase; color: var(--mark); }
.video-cover-title { font: 700 clamp(24px, 2.6vw, 40px)/1.02 var(--heading); letter-spacing: -.03em; text-wrap: balance; color: #fffdf9; text-shadow: 0 2px 24px rgb(0 0 0 / 45%); }
.video-cover-sub { max-width: 40ch; font-size: 14px; line-height: 1.5; color: var(--band); }
.video-placeholder { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: #0b1220; box-shadow: 0 40px 80px -30px rgb(23 27 34 / 35%); }
.video-placeholder { position: relative; overflow: hidden; }
.video-placeholder img { width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.video-placeholder-copy { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; color: #fff; }
.video-placeholder-copy .eyebrow { margin: 0; color: #ffb28f; }
.video-placeholder-copy p { max-width: 44ch; }
.home-features-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 72px; align-items: end; margin-bottom: 48px; }
.home-features-head .eyebrow { margin-bottom: 12px; }
.home-features-head > p { color: var(--soft); font-size: 17.5px; }
.home-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.home-card { position: relative; display: grid; gap: 12px; align-content: start; padding: 28px 28px 30px; border-radius: 18px; background: #fffdf9; box-shadow: 0 1px 0 var(--line), 0 24px 48px -30px rgb(23 27 34 / 50%); transition: transform .15s, box-shadow .15s; }
.home-card:hover { transform: translateY(-2px); box-shadow: 0 1px 0 var(--line), 0 28px 56px -28px rgb(23 27 34 / 55%); }
.home-card .card-mark { width: 44px; height: 44px; padding: 10px; border-radius: 12px; }
.home-card:nth-child(even) .card-mark { background: var(--sage); color: var(--green); }
.home-card h3 { font-size: 19px; }
.home-card h3 a { color: inherit; }
/* The whole card is the link. */
.home-card h3 a::after { content: ''; position: absolute; inset: 0; border-radius: 18px; }
.home-card p { font-size: 15px; line-height: 1.6; color: var(--soft); }
.home-card-link { font: 600 14px/1.4 var(--sans); color: var(--accent-text); }
/* The route-planning card spans two columns and shows the planner itself. */
.home-card-featured { grid-column: span 2; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 28px; }
.home-card-featured .home-card-copy { display: grid; gap: 12px; align-content: start; }
.home-card-featured h3 { font-size: 22px; }
.home-card-featured h3 a::after { content: none; }
.home-card-featured .home-card-link { justify-self: start; }
.home-card-shot { margin: 0; min-width: 0; }
.home-card-shot .capture-button { box-shadow: 0 16px 32px -24px rgb(23 27 34 / 45%); }
.home-card-shot img { display: block; width: 100%; height: auto; }

/* "How it works" header: the promise, its result and the demo request. */
/* Subpage head, shared by How it works, Excel vs RDO, Pricing and FAQ: a centred title with an
   accent subtitle, then a narrow copy column with the actions centred under it. */
.page-intro-centered .page-intro-grid { grid-template-columns: 1fr; gap: 36px; justify-items: center; }
.page-intro-head { width: 100%; display: grid; gap: 14px; justify-items: center; text-align: center; }
.page-intro-centered h1 { max-width: none; width: 100%; text-wrap: balance; }
.page-intro-sub { margin: 0; width: 100%; font: 600 clamp(20px, 2.2vw, 28px)/1.25 var(--heading); letter-spacing: -.02em; text-wrap: balance; color: var(--accent-text); }
.page-intro-centered .page-intro-copy { max-width: 640px; justify-items: center; gap: 28px; padding-top: 0; color: var(--ink); font-size: 17.5px; line-height: 1.6; }
.page-intro-text { display: grid; gap: 12px; width: 100%; }
.page-intro-text p { margin: 0; }
.page-intro-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.page-intro-list li { display: flex; align-items: flex-start; gap: 10px; }
.page-intro-list svg { flex: none; margin-top: 5px; color: var(--green); }
.page-intro-centered .hero-actions { justify-content: center; margin-top: 0; }
.page-intro-centered .trial-alternative { margin-top: 0; }

/* Pricing page: the catalog fragment, or a note until the plans are published. */
.pricing-empty-panel { display: grid; gap: 16px; justify-items: start; max-width: 640px; padding: 40px; border: 1px solid var(--line); border-radius: 16px; background: #fffdf9; }
.pricing-empty-panel p { color: var(--soft); }
.pricing-teaser .closing-panel { margin-top: 0; padding-top: 0; border-top: 0; }

@media (max-width: 1080px) {
  .home-hero-grid { grid-template-columns: 1fr; }
  .home-features-head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 36px; }
  .home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .home-hero { padding-block: 48px 64px; }
  .home-hero-stack { gap: 32px; }
  .home-hero-head h1 { font-size: 38px; }
  .home-hero-grid { gap: 36px; }
  .video-cover-text { left: 20px; right: 20px; bottom: 44px; }
  .video-cover-sub { display: none; }
  .video-cover-play { top: 34%; width: 64px; height: 64px; margin: -32px 0 0 -32px; box-shadow: 0 0 0 10px rgb(255 253 249 / 6%); }
  .video-dialog { width: calc(100% - 16px); max-width: calc(100vw - 16px); border-radius: 8px; }
  .video-dialog video { border-radius: 8px; }
  .video-cover-play svg { width: 28px; height: 28px; }
  .video-cover-title { font-size: 22px; }
  .home-cards { grid-template-columns: 1fr; }
  .home-card-featured { grid-column: span 1; grid-template-columns: 1fr; }
  .video-frame video, .video-placeholder { border-radius: 8px; }
}


[hidden] { display: none !important; }