/* Public landing composition: existing Card, Button, Dialog and type roles. */
/* The component tier resolves on the root, so the page's brand aliases live there too. */
html.homepage-root {
  --color-accent-primary: var(--color-brand-primary);
  --color-accent-primary-hover: var(--color-brand-primary-hover);
  --color-accent-primary-contrast: var(--color-brand-primary-contrast);
  --color-accent-primary-soft: var(--color-brand-primary-soft);
  --color-accent-secondary: var(--color-brand-primary);
  --color-surface-page: var(--color-brand-page);
  --color-surface-card: var(--color-brand-card);
  --homepage-topbar-height: 5.625rem;
  --homepage-hero-min-height: 36rem;
}
.homepage-body { margin: 0; background: var(--color-surface-card); color: var(--color-neutral-800); --lang-chooser-offset: var(--homepage-topbar-height); --report-bug-clearance: 0px; --homepage-type-scale: 1; }
.homepage-body *, .homepage-body *::before, .homepage-body *::after { box-sizing: border-box; }
.homepage-body [hidden] { display: none !important; }
.homepage-body .container { width: min(100%, 90rem); margin-inline: auto; padding-inline: 2rem; }
.homepage-body h1, .homepage-body h2, .homepage-body h3, .homepage-body p, .homepage-body figure { margin: 0; }
.homepage-body h1, .homepage-body h2, .homepage-body h3 { font-family: var(--type-heading-family); font-weight: var(--type-heading-weight); }
.homepage-body h1 { font-size: calc(var(--type-display-size) * var(--homepage-type-scale)); line-height: var(--type-display-leading); max-width: 16ch; }
.homepage-body h2 { font-size: var(--type-h1-size); line-height: var(--type-h1-leading); }
.homepage-body main h2 { font-size: calc(var(--type-h1-size) * var(--homepage-type-scale)); }
.homepage-body h3 { font-size: var(--type-h3-size); line-height: var(--type-h3-leading); }
.homepage-body p { color: var(--color-neutral-600); line-height: var(--type-body-leading); }
.homepage-body p + p { margin-top: 1rem; }
.homepage-body .section-intro, .homepage-body .workflow-step p, .homepage-body .benefits-layout article p, .homepage-body .faq details p, .homepage-body .homepage-closing p, .homepage-body .hero-intro { font-size: var(--type-body-large-size); line-height: var(--type-body-large-leading); }
.homepage-body .c1-card { border-radius: var(--radius-lg); border: 1px solid var(--card-border); background: var(--card-bg); box-shadow: var(--elevation-card); margin: 0; padding: 2rem; }
.homepage-body .c1-btn { display: inline-flex; gap: 0.5rem; align-items: center; justify-content: center; width: auto; margin: 0; text-decoration: none; text-align: center; border-radius: var(--radius-sm); box-shadow: none; }
.homepage-body .c1-btn:hover { box-shadow: none; }
.homepage-body .homepage-topbar { border-bottom: 1px solid var(--color-neutral-200); background: var(--color-surface-card); }
html.homepage-scrolled .homepage-body .homepage-topbar { box-shadow: var(--elevation-dropdown); }
.homepage-body .homepage-progress { display: none; }
.homepage-body .nav-row, .homepage-body .nav-actions, .homepage-body .desktop-nav, .homepage-body .mobile-nav { display: flex; align-items: center; gap: 0.5rem; }
.homepage-body .nav-row { min-height: 5.5rem; justify-content: space-between; gap: 1rem; }
.homepage-body .homepage-brand { display: inline-flex; align-items: center; min-height: var(--touch-web); flex-shrink: 0; }
/* The logo is sized by height alone, so its width follows whichever lockup is served. */
.homepage-body .homepage-brand img { height: 2.25rem; width: auto; }
.homepage-body .homepage-logo-white { display: none; }
[data-theme="dark"] .homepage-body .homepage-logo-white { display: block; }
[data-theme="dark"] .homepage-body .homepage-logo-colour { display: none; }
@media (min-width: 1201px) {
  .homepage-body .homepage-brand img { height: 2.8125rem; }
}
.homepage-body .homepage-topbar .c1-btn { white-space: nowrap; }
.homepage-body .desktop-nav { gap: 0; }
.homepage-body .mobile-nav { display: none; }
.homepage-body .hero-wrap { padding-top: 2rem; }
/* No overflow clipping here: the hero notes hang past the phone into the hero's padding. */
.homepage-body .homepage-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.3fr) 1fr; gap: 3rem; align-items: center; min-height: var(--homepage-hero-min-height); padding: 2.5rem 4rem; border-radius: var(--radius-xl); color: var(--color-brand-on-band); --button-primary-bg: var(--color-brand-accent); --button-primary-fg: var(--color-brand-on-accent); --button-secondary-bg: transparent; --button-secondary-fg: var(--color-brand-on-band); --button-secondary-border: var(--color-brand-on-band); --button-ghost-fg: var(--color-brand-on-band); --button-ghost-bg-hover: var(--color-brand-band); --button-focus-ring: var(--color-brand-on-band); }
.homepage-body .homepage-hero, .homepage-body .homepage-closing > .container { background: linear-gradient(112deg, var(--color-brand-deep) 0%, var(--color-brand-band) 44%, var(--color-brand-band) 100%); }
@supports (color: color-mix(in srgb, red, red)) { .homepage-body .homepage-hero, .homepage-body .homepage-closing > .container { background: radial-gradient(85% 120% at 106% 112%, color-mix(in srgb, var(--color-brand-accent) 95%, transparent) 0%, color-mix(in srgb, var(--color-brand-accent) 50%, transparent) 32%, transparent 66%), radial-gradient(58% 85% at 92% -12%, color-mix(in srgb, var(--color-brand-endless) 80%, transparent) 0%, transparent 66%), radial-gradient(46% 70% at 58% 118%, color-mix(in srgb, var(--color-brand-endless) 42%, transparent) 0%, transparent 70%), linear-gradient(112deg, var(--color-brand-deep) 0%, var(--color-brand-band) 44%, var(--color-brand-band) 100%); } }
[data-theme="dark"] .homepage-body .homepage-hero, [data-theme="dark"] .homepage-body .homepage-closing > .container { background: linear-gradient(112deg, var(--color-brand-page) 0%, var(--color-brand-deep) 38%, var(--color-brand-band) 100%); box-shadow: none; }
@supports (color: color-mix(in srgb, red, red)) { [data-theme="dark"] .homepage-body .homepage-hero, [data-theme="dark"] .homepage-body .homepage-closing > .container { background: radial-gradient(85% 120% at 106% 112%, color-mix(in srgb, var(--color-brand-accent) 60%, transparent) 0%, color-mix(in srgb, var(--color-brand-accent) 26%, transparent) 32%, transparent 66%), radial-gradient(58% 85% at 92% -12%, color-mix(in srgb, var(--color-brand-endless) 50%, transparent) 0%, transparent 66%), radial-gradient(46% 70% at 58% 118%, color-mix(in srgb, var(--color-brand-endless) 25%, transparent) 0%, transparent 70%), linear-gradient(112deg, var(--color-brand-page) 0%, var(--color-brand-deep) 38%, var(--color-brand-band) 100%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-brand-endless) 18%, transparent); } }
.homepage-body .brand-deco { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.homepage-body .brand-chevrons { position: absolute; top: 50%; inset-inline-end: -9%; height: min(128%, 46rem); aspect-ratio: 1; transform: translateY(-50%); overflow: visible; }
.homepage-body .brand-chevrons path { fill: none; stroke: var(--color-brand-on-band); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.homepage-body .brand-chevrons-base path:nth-child(1) { opacity: 0.5; }
.homepage-body .brand-chevrons-base path:nth-child(2) { opacity: 0.42; }
.homepage-body .brand-chevrons-base path:nth-child(3) { opacity: 0.34; }
.homepage-body .brand-chevrons-base path:nth-child(4) { opacity: 0.27; }
.homepage-body .brand-chevrons-base path:nth-child(5) { opacity: 0.2; }
.homepage-body .brand-chevrons-base path:nth-child(6) { opacity: 0.14; }
.homepage-body .brand-chevrons-light { display: none; }
.homepage-body .hero-copy { position: relative; }
.homepage-body .homepage-hero h1, .homepage-body .homepage-hero .hero-intro { color: var(--color-brand-on-band); }
.homepage-body .homepage-hero h1 { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
.homepage-body .homepage-hero .eyebrow { color: var(--color-brand-on-band); background: transparent; box-shadow: none; }
@supports (color: color-mix(in srgb, red, red)) { .homepage-body .homepage-hero .eyebrow { background: color-mix(in srgb, var(--color-brand-on-band) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-brand-on-band) 22%, transparent); } }
.homepage-body .homepage-hero :is(a, button):focus-visible { outline-color: var(--color-brand-on-band); }
.homepage-body .eyebrow { display: flex; align-items: center; gap: 0.55rem; width: fit-content; max-width: 100%; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; padding: 0.4rem 0.9rem; border-radius: var(--radius-full); background: var(--color-brand-primary-soft); color: var(--color-accent-primary); font-size: var(--type-caption-size); line-height: var(--type-caption-leading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 1rem; }
.homepage-body .eyebrow::before { content: ""; flex-shrink: 0; width: 0.45rem; height: 0.45rem; border-radius: var(--radius-full); background: var(--color-brand-accent); }
.homepage-body .section-heading .eyebrow { margin-inline: auto; }
.homepage-body .benefits-layout .section-heading .eyebrow { margin-inline: 0; }
.homepage-body .hero-intro { margin-top: 1.5rem; max-width: 36rem; }
.homepage-body .homepage-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.homepage-body .hero-visual { position: relative; justify-self: center; }
.homepage-body .hero-phone { position: relative; --live-ticket-natural: 24; --live-ticket-content: 13; --live-ticket-scale: calc(var(--live-ticket-content) / var(--live-ticket-natural)); width: 14rem; aspect-ratio: 780 / 1688; border: 0.5rem solid var(--color-brand-device-frame); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--elevation-dialog); background: var(--color-surface-card); }
.homepage-body .hero-phone-live { cursor: pointer; }
.homepage-body .hero-ticket { display: block; width: 100%; height: auto; }
.homepage-body .hero-notes { list-style: none; margin: 0; padding: 0; }
.homepage-body .hero-note { position: absolute; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: var(--radius-lg); background: var(--color-surface-raised); color: var(--color-neutral-700); box-shadow: var(--elevation-dropdown); font-size: var(--type-caption-size); line-height: var(--type-caption-leading); max-width: 15rem; }
.homepage-body .hero-note strong { display: block; color: var(--color-neutral-900); }
.homepage-body .hero-note .material-symbols-outlined { flex-shrink: 0; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-full); background: var(--color-brand-accent); color: var(--color-brand-on-accent); }
.homepage-body .hero-note-next { top: 12%; inset-inline-start: -35%; }
.homepage-body .hero-note-wait { top: 48%; inset-inline-end: -40%; }
.homepage-body .hero-note-qr { bottom: 8%; inset-inline-start: -25%; }
.homepage-body .hero-note.hero-note-current { box-shadow: 0 0 0 3px var(--color-brand-accent), var(--elevation-dialog); }
/* The ticket is laid out at a phone's natural width from the client ticket's own classes and scaled into the frame.
   --live-ticket-content is the frame's inner width in rem and must follow every .hero-phone width.
   The phone screen shows the client ticket page, which is light in both site themes, so the roles those classes read
   are re-declared here from the screen-* brand roles. The component tier (--card-*, --badge-*) resolves on the root
   and has to be re-declared too. */
.homepage-body .live-ticket {
  --color-surface-page: var(--color-brand-screen);
  --color-surface-card: var(--color-brand-screen-card);
  --card-bg: var(--color-brand-screen-card);
  --card-border: var(--color-brand-screen-line);
  --color-neutral-200: var(--color-brand-screen-line);
  --color-neutral-600: var(--color-brand-screen-ink-muted);
  --color-neutral-700: var(--color-brand-screen-ink);
  --color-neutral-900: var(--color-brand-screen-ink);
  --color-accent-primary: var(--color-brand-screen-accent);
  --color-accent-primary-contrast: var(--color-brand-on-band);
  --color-semantic-success: var(--color-brand-screen-success);
  --color-semantic-success-soft: var(--color-brand-screen-success-soft);
  --badge-success-bg: var(--color-brand-screen-success-soft);
  --badge-success-fg: var(--color-brand-screen-success);
  position: absolute; top: 0; left: 0; display: flex; flex-direction: column; width: calc(var(--live-ticket-natural) * 1rem); height: calc(100% / var(--live-ticket-scale)); transform: scale(var(--live-ticket-scale)); transform-origin: 0 0; overflow: hidden; background: var(--color-surface-page); color: var(--color-neutral-700); font-family: var(--type-body-family);
}
.homepage-body .live-ticket-top { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 2.25rem; background: var(--color-brand-screen); }
@supports (color: color-mix(in srgb, red, red)) { .homepage-body .live-ticket-top { background: color-mix(in srgb, var(--color-brand-screen-ink) 5%, var(--color-brand-screen)); } }
.homepage-body .live-ticket-grab { width: 4rem; height: 0.25rem; border-radius: var(--radius-full); background: var(--color-brand-screen-ink-muted); opacity: 0.6; }
.homepage-body .live-ticket-live { position: absolute; inset-block: 0; inset-inline-end: 0.875rem; height: fit-content; margin-block: auto; display: inline-flex; align-items: center; gap: 0.375rem; }
.homepage-body .live-ticket-live i { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background: currentColor; }
.homepage-body .live-ticket-head { display: grid; justify-items: center; padding: 2rem 1rem 1.5rem; text-align: center; }
.homepage-body .live-ticket-check { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: var(--radius-full); background: var(--color-semantic-success); color: var(--color-accent-primary-contrast); }
.homepage-body .live-ticket-title { margin-top: 1rem; font-size: var(--type-h2-size); line-height: var(--type-h2-leading); color: var(--color-neutral-900); }
.homepage-body .live-ticket-sub { margin-top: 0.25rem; font-size: var(--type-body-size); line-height: var(--type-body-leading); color: var(--color-neutral-600); }
.homepage-body .live-ticket-card, .homepage-body .live-ticket-rows, .homepage-body .live-ticket-banner { margin-inline: 1.5rem; }
.homepage-body .live-ticket .live-ticket-card { margin-bottom: 1rem; padding: 1.5rem; background: var(--color-accent-primary); border-color: transparent; box-shadow: none; }
@supports (color: color-mix(in srgb, red, red)) { .homepage-body .live-ticket .live-ticket-card { background: linear-gradient(135deg, var(--color-accent-primary), color-mix(in srgb, var(--color-accent-primary) 75%, var(--color-brand-on-band))); } }
.homepage-body .live-ticket .live-ticket-card .c1-badge { background: transparent; }
@supports (color: color-mix(in srgb, red, red)) { .homepage-body .live-ticket .live-ticket-card .c1-badge { background: color-mix(in srgb, var(--color-accent-primary-contrast) 20%, transparent); } }
.homepage-body .live-ticket[data-live-state="called"] .live-ticket-card { background: var(--color-semantic-success); }
.homepage-body .live-ticket-status { margin-top: 0.75rem; }
.homepage-body .live-ticket-rows { display: grid; gap: 0.75rem; margin-bottom: 0.75rem; padding: 0; border: 0; background: transparent; box-shadow: none; }
.homepage-body .live-ticket-rows .c1-row { align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--color-brand-screen-line); border-radius: var(--radius-lg); background: var(--color-brand-screen-card); box-shadow: none; }
.homepage-body .live-ticket-rows .c1-row span { color: var(--color-neutral-600); }
.homepage-body .live-ticket-rows .c1-row strong { color: var(--color-neutral-900); text-align: end; }
.homepage-body .live-ticket[data-live-state="called"] .live-ticket-rows .c1-row:nth-child(2) strong { color: var(--color-semantic-success); }
.homepage-body .live-ticket-banner { display: flex; align-items: center; gap: 0.5rem; margin-block: auto 1.5rem; text-align: start; visibility: hidden; }
.homepage-body .live-ticket[data-live-state="called"] .live-ticket-banner { visibility: visible; }
.homepage-body .live-ticket-banner i { flex-shrink: 0; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background: var(--color-semantic-success); }
.homepage-body .check-list .material-symbols-outlined { color: var(--color-semantic-success); flex-shrink: 0; }
.homepage-body .homepage-motion-toggle { position: absolute; z-index: 1; min-width: var(--touch-web); min-height: var(--touch-web); padding: 0; border-radius: var(--radius-full); box-shadow: var(--elevation-dropdown); }
.homepage-body .homepage-motion-toggle:focus-visible { outline: 2px solid var(--button-focus-ring); outline-offset: 2px; }
/* Every motion toggle (this one and .journey-toggle) sits at the inline start, opposite the report-a-problem button's inline-end corner. */
.homepage-body .hero-toggle { inset-inline-start: 1rem; inset-block-end: 1rem; box-shadow: none; }
.homepage-body .section { padding-block: 4rem; scroll-margin-top: 1rem; }
.homepage-body #pricing { scroll-margin-top: 1rem; }
.homepage-body .section-alt { background: var(--color-surface-page); border-block: 1px solid var(--color-neutral-200); }
.homepage-body .section-heading { text-align: center; max-width: 48rem; margin: 0 auto 2rem; }
.homepage-body .section-intro { max-width: 42rem; text-align: center; margin: -0.5rem auto 3rem; }
.homepage-body .pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.homepage-body .journey-player { position: relative; margin-inline: auto; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--elevation-dialog); }
.homepage-body .journey-player video { display: block; width: 100%; height: auto; }
.homepage-body .journey-ai-label { position: absolute; z-index: 2; inset-block-start: 1rem; inset-inline-start: 1rem; max-width: calc(100% - 2rem); padding: 0.25rem 0.75rem; border-radius: var(--radius-md); background: var(--color-surface-inverse); color: var(--color-surface-on-inverse); font-size: var(--type-caption-size); line-height: var(--type-caption-leading); font-weight: 600; pointer-events: none; }
.homepage-body .journey-caption { position: absolute; inset-inline: 1rem; bottom: 1.5rem; margin: 0 auto; width: fit-content; max-width: calc(100% - 2rem); padding: 0.5rem 1rem; border-radius: var(--radius-md); background: var(--color-surface-inverse); color: var(--color-surface-on-inverse); font-weight: 600; text-align: center; transition: opacity var(--motion-standard) ease-out; }
.homepage-body .journey-player video[controls] ~ .journey-caption { bottom: 4rem; }
.homepage-body .journey-caption:empty { opacity: 0; }
.homepage-body .journey-toggle { inset-inline-start: 1rem; bottom: 1rem; background: var(--color-surface-raised); }
.homepage-body .journey-toggle:hover { background: var(--button-ghost-bg-hover); }
.homepage-body .journey-toggle:focus-visible { outline-color: var(--color-neutral-0); box-shadow: 0 0 0 2px var(--color-neutral-900), var(--elevation-dropdown); transition-property: background-color; }
.homepage-body .journey-toggle:not([hidden]) + .journey-caption { inset-inline: calc(var(--touch-web) + 1.5rem); max-width: calc(100% - 2 * (var(--touch-web) + 1.5rem)); }
.homepage-body .journey-captions { margin: 1rem auto 0; padding-inline-start: 1.25rem; color: var(--color-neutral-600); }
.homepage-body .journey-caption-sizer { display: none; }
.homepage-body .workflow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; counter-reset: homepage-step; }
.homepage-body .workflow-step { counter-increment: homepage-step; text-align: start; padding: 1.5rem 1rem 0; border-top: 2px solid var(--color-accent-primary); }
.homepage-body .workflow-step::before { content: counter(homepage-step, decimal-leading-zero); display: block; width: auto; height: auto; margin-bottom: 1.5rem; border-radius: 0; background: transparent; color: var(--color-accent-primary); font-family: var(--type-heading-family); font-weight: var(--type-heading-weight); font-size: var(--type-display-size); line-height: var(--type-display-leading); }
.homepage-body .workflow-step p { max-width: 22rem; }
.homepage-body .icon-tile { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--color-brand-band), var(--color-brand-endless)); color: var(--color-brand-on-band); box-shadow: var(--elevation-card); margin-bottom: 1.5rem; }
[data-theme="dark"] .homepage-body .icon-tile { background: linear-gradient(135deg, var(--color-brand-endless), var(--color-brand-accent)); color: var(--color-brand-on-accent); }
.homepage-body .icon-tile .material-symbols-outlined { color: inherit; }
.homepage-body h3 + p { margin-top: 1rem; }
.homepage-body .capability-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.25rem; padding: 0; margin: 0; list-style: none; }
.homepage-body .capability-grid li { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.5rem; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); background: var(--color-surface-card); font-weight: 400; }
.homepage-body .capability-grid li:nth-child(-n+2) { grid-column: span 6; background: var(--color-brand-primary-soft); }
@supports (color: color-mix(in srgb, red, red)) { .homepage-body .capability-grid li:nth-child(-n+2) { background: linear-gradient(135deg, var(--color-brand-primary-soft), color-mix(in srgb, var(--color-brand-accent) 14%, var(--color-surface-card))); } }
.homepage-body .capability-grid li:nth-child(n+3) { grid-column: span 3; }
.homepage-body .capability-grid li.capability-operator { display: grid; grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr); grid-column: span 12; gap: 2rem; align-items: center; padding: 2rem; background: linear-gradient(120deg, var(--color-surface-card), var(--color-brand-primary-soft)); }
.homepage-body .capability-operator-copy { display: grid; justify-items: start; gap: 1rem; }
.homepage-body .capability-operator-image { position: relative; display: block; min-width: 0; padding-top: 1.75rem; overflow: hidden; border-radius: var(--radius-md); background: var(--color-neutral-100); box-shadow: var(--elevation-dialog); }
.homepage-body .capability-operator-image::before { content: ""; position: absolute; top: 0.62rem; inset-inline-start: 0.8rem; width: 3rem; height: 0.55rem; background: radial-gradient(circle at 0.275rem 50%, var(--color-neutral-400) 0.27rem, transparent 0.29rem), radial-gradient(circle at 1.475rem 50%, var(--color-neutral-400) 0.27rem, transparent 0.29rem), radial-gradient(circle at 2.675rem 50%, var(--color-neutral-400) 0.27rem, transparent 0.29rem); }
.homepage-body .capability-operator img { display: block; width: 100%; height: auto; }
.homepage-body .capability-grid li:nth-child(n+4) { grid-column: span 4; }
.homepage-body .capability-grid .material-symbols-outlined { flex-shrink: 0; }
.homepage-body .capability-grid .icon-tile { margin-bottom: 0.5rem; }
.homepage-body .capability-description { font-size: var(--type-body-size); }
.homepage-body .pricing-card { position: relative; display: flex; flex-direction: column; gap: 1rem; }
.homepage-body .plan-name { margin: 0; }
.homepage-body .plan-size { padding-bottom: 1rem; border-bottom: 1px solid var(--color-neutral-200); }
.homepage-body .plan-size-text { margin: 0; }
.homepage-body .plan-size-headline { display: block; color: var(--color-neutral-800); font-family: var(--type-heading-family); font-weight: var(--type-heading-weight); font-size: var(--type-h1-size); line-height: var(--type-h1-leading); }
.homepage-body .plan-size-detail { display: block; font-size: var(--type-caption-size); line-height: var(--type-caption-leading); }
.homepage-body .plan-description { margin: 0; }
.homepage-body .check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.homepage-body .check-list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: var(--type-body-size); }
.homepage-body .plan-included { margin-top: 2rem; }
.homepage-body .plan-included h3 { margin: 0 0 1.5rem; text-align: center; }
.homepage-body .plan-included-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; align-items: start; }
.homepage-body .plan-included-group h4 { margin: 0 0 1rem; font-family: var(--type-heading-family); font-weight: var(--type-heading-weight); font-size: var(--type-body-large-size); line-height: var(--type-body-large-leading); }
.homepage-body .plan-action { margin-top: auto; padding-top: 1rem; }
.homepage-body .price { color: var(--color-neutral-800); font-size: var(--type-h1-size); font-weight: 700; line-height: var(--type-h1-leading); }
.homepage-body .plan-price { margin-bottom: 1rem; }
.homepage-body .price-note { font-size: var(--type-caption-size); margin-top: 0.5rem; }
.homepage-body .plan-saving { margin-top: 0.5rem; }
.homepage-body .plan-action .c1-btn { width: 100%; }
.homepage-body .pricing-note { margin: 1.5rem 0 0; text-align: center; }
.homepage-body .pricing-terms { text-align: center; font-size: var(--type-caption-size); margin-top: 2rem; }
.homepage-body .plan-finder { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin: 0 auto 1.5rem; }
.homepage-body .plan-finder-question { margin: 0; color: var(--color-neutral-800); font-weight: 700; }
.homepage-body .billing-cycle, .homepage-body .plan-finder-options { display: flex; justify-content: center; gap: 0.25rem; margin: 0 auto 2.5rem; padding: 0.25rem; width: fit-content; border: 1px solid var(--button-secondary-border); border-radius: var(--radius-full); background: var(--button-secondary-bg); }
.homepage-body .plan-finder .plan-finder-options { margin: 0; }
.homepage-body .billing-cycle-option, .homepage-body .plan-finder-option { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--touch-web); padding: 0.5rem 1.25rem; border-radius: var(--radius-full); color: var(--button-secondary-fg); cursor: pointer; }
.homepage-body .plan-finder-option { border: 0; background: transparent; font: inherit; }
.homepage-body .billing-cycle-option:has(input:checked), .homepage-body .plan-finder-option[aria-pressed="true"] { background: var(--button-primary-bg); color: var(--button-primary-fg); font-weight: 700; }
.homepage-body .billing-cycle-option:has(input:focus-visible), .homepage-body .plan-finder-option:focus-visible { outline: 2px solid var(--button-focus-ring); outline-offset: 2px; }
.homepage-body .billing-cycle-discount, .homepage-body .plan-saving { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.homepage-body :is(.pricing-card, .plan-strip) { border: 1px solid transparent; background: var(--card-bg); }
@supports (color: color-mix(in srgb, red, red)) { .homepage-body :is(.pricing-card, .plan-strip) { background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, linear-gradient(140deg, color-mix(in srgb, var(--color-brand-band) 22%, transparent), color-mix(in srgb, var(--color-brand-endless) 30%, transparent), color-mix(in srgb, var(--color-brand-accent) 40%, transparent)) border-box; } }
.homepage-body :is(.pricing-card, .plan-strip):hover { background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, linear-gradient(140deg, var(--color-brand-band), var(--color-brand-endless), var(--color-brand-accent)) border-box; }
.homepage-body .pricing-card.plan-fits, .homepage-body .plan-strip.plan-fits { border: 2px solid var(--color-accent-primary); box-shadow: var(--elevation-dialog); }
.homepage-body .plan-fit-label { position: absolute; inset: -1rem auto auto 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 2rem); text-align: center; background: var(--badge-info-bg); color: var(--badge-info-fg); }
.homepage-body .plan-strip { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 1.5rem; }
.homepage-body .plan-strip-text { flex: 1 1 16rem; min-width: 0; }
.homepage-body .plan-strip .plan-description { margin: 0.5rem 0 0; }
.homepage-body .plan-strip .price { margin: 0; white-space: nowrap; }
.homepage-body .plan-strip-price p { margin: 0; }
.homepage-body .plan-strip-price .plan-strip-extra { margin-top: 0.5rem; }
.homepage-body .plan-strip .c1-btn { flex-shrink: 0; }
.homepage-body .benefits-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 3rem; align-items: start; }
.homepage-body .benefits-layout .section-heading { text-align: start; align-self: center; margin: 0; }
.homepage-body .benefits-layout article { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 1.5rem; padding: 1.5rem; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); background: var(--color-surface-card); }
.homepage-body .benefits-layout article .icon-tile { grid-row: span 2; margin: 0; }
.homepage-body .benefits-layout article p { grid-column: 2; margin-top: 0.5rem; }
.homepage-body .faq { max-width: 56rem; }
.homepage-body .faq details { padding: 0; margin-bottom: 1rem; }
.homepage-body .faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.5rem; cursor: pointer; min-height: var(--touch-web); font-weight: 600; list-style: none; border-radius: var(--radius-lg); }
.homepage-body .faq summary::-webkit-details-marker { display: none; }
.homepage-body .faq summary .material-symbols-outlined { flex-shrink: 0; }
.homepage-body .faq details[open] summary .material-symbols-outlined { transform: rotate(180deg); }
.homepage-body .faq details p { padding: 0 1.5rem 1.5rem; }
/* The closing card keeps the PayseraBlue band gradient in both themes, so its primary button inverts onto it. */
.homepage-body .homepage-closing { padding-block: 1rem 5rem; text-align: center; --button-primary-bg: var(--color-brand-on-band); --button-primary-fg: var(--color-brand-band); --button-primary-bg-hover: var(--color-brand-accent); }
.homepage-body .homepage-closing > .container { position: relative; isolation: isolate; overflow: hidden; width: min(calc(100% - 4rem), 72rem); padding: 4.5rem 2rem; border-radius: var(--radius-xl); }
.homepage-body .homepage-closing .brand-chevrons { inset-inline-end: -14%; height: 170%; }
.homepage-body .homepage-closing h2, .homepage-body .homepage-closing p { color: var(--color-brand-on-band); }
.homepage-body .homepage-closing p { max-width: 34rem; margin: 1rem auto 0; }
.homepage-body .homepage-closing .homepage-actions { justify-content: center; }
/* The end padding lets the legal links scroll clear of the report-a-problem button in the bottom corner. */
.homepage-body .homepage-footer { padding-block: 2.5rem calc(var(--touch-web) + 2rem); background: var(--color-surface-card); }
.homepage-body .footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: minmax(9rem, max-content); gap: 2rem 4rem; }
.homepage-body .footer-grid h2 { font-size: var(--type-body-size); margin-bottom: 0.5rem; }
.homepage-body .footer-grid p { margin-top: 1rem; max-width: 18rem; }
.homepage-body .footer-column { display: flex; flex-direction: column; align-items: flex-start; }
.homepage-body .homepage-footer-link, .homepage-body .homepage-nav-link { display: inline-flex; align-items: center; min-height: var(--touch-web); color: var(--color-neutral-600); font-size: var(--type-body-size); font-weight: 400; text-decoration: none; text-underline-offset: 0.2em; }
.homepage-body .homepage-footer-link:is(:hover, :focus-visible), .homepage-body .homepage-nav-link:is(:hover, :focus-visible) { text-decoration: underline; }
.homepage-body .homepage-nav-link { padding-inline: 0.625rem; color: var(--color-neutral-800); font-weight: 600; white-space: nowrap; border-radius: var(--radius-sm); }
.homepage-body .homepage-nav-link:focus-visible { outline: 2px solid var(--button-focus-ring); outline-offset: 2px; }
.homepage-body .footer-bottom { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--color-neutral-200); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 2rem; }
.homepage-body .footer-bottom p { font-size: var(--type-caption-size); }
.homepage-body .legal-links { display: flex; flex-wrap: wrap; column-gap: 1.5rem; }
.homepage-body .legal-links .homepage-footer-link { font-size: var(--type-caption-size); }
.homepage-body .c1-dialog-surface { max-width: 30rem; }
.homepage-body #policy-dialog { max-width: 44rem; max-height: calc(100vh - 2rem); }
.homepage-body .cookie-banner { z-index: 10; }
.homepage-body #policy-dialog[open] { display: flex; flex-direction: column; }
.homepage-body #policy-dialog .c1-dialog-title { flex: 0 0 auto; }
.homepage-body #policy-dialog .c1-dialog-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.homepage-body #policy-dialog .c1-dialog-body:focus-visible { outline: 2px solid var(--button-focus-ring); outline-offset: 2px; }
.homepage-body .policy-dialog-actions { flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; padding-top: 1rem; border-top: 1px solid var(--color-neutral-200); }
.homepage-body .policy-cookies p { margin: 0 0 1rem; }
.homepage-body .policy-cookies > :last-child { margin-bottom: 0; }
.homepage-body .cookie-table { width: 100%; margin: 0 0 1rem; border-collapse: collapse; font-size: var(--type-caption-size); line-height: var(--type-caption-leading); }
.homepage-body .cookie-table caption { display: table-caption; caption-side: top; padding-block: 0.75rem 0.5rem; color: var(--color-neutral-800); font-weight: 700; text-align: start; }
.homepage-body .cookie-table :is(th, td) { padding: 0.5rem 0.75rem; border: 1px solid var(--color-neutral-200); text-align: start; vertical-align: top; color: var(--color-neutral-700); }
.homepage-body .cookie-table thead th { color: var(--color-neutral-600); font-weight: 700; background: var(--color-surface-page); }
.homepage-body .cookie-table tbody th { font-weight: 400; }
.homepage-body .cookie-table code { font-family: var(--type-code-family); font-variant-numeric: tabular-nums; font-size: var(--type-caption-size); overflow-wrap: normal; word-break: normal; hyphens: none; }
.homepage-body dialog::backdrop { background: var(--dialog-overlay-bg); }
.homepage-body:has(dialog[open]) { overflow: hidden; }
.homepage-body :is(a, summary):focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 3px; }
/* In the light theme the band and the accent are the same PayseraBlue, so the ring takes the on-band role there. */
.homepage-body .homepage-closing :is(a, summary, button):focus-visible { outline-color: var(--color-brand-on-band); }
.homepage-body .skip-link { position: fixed; top: 0.5rem; left: 0.5rem; z-index: 20; transform: translateY(-200%); }
.homepage-body .skip-link:focus { transform: none; }
@media (forced-colors: active) {
  .homepage-body .billing-cycle-option { border: 1px solid ButtonText; }
  .homepage-body .billing-cycle-option:has(input:checked) { border: 3px double Highlight; }
  .homepage-body .plan-finder-option { border: 1px solid ButtonText; }
  .homepage-body .plan-finder-option[aria-pressed="true"] { border: 3px double Highlight; }
  .homepage-body .journey-ai-label { border: 1px solid CanvasText; }
  .homepage-body .pricing-card.plan-fits, .homepage-body .plan-strip.plan-fits { border: 3px double Highlight; }
  .homepage-body .plan-fit-label { border: 1px solid CanvasText; }
}
@keyframes brand-drift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(-7%, 5%, 0) rotate(10deg) scale(1.08); }
  100% { transform: translate3d(5%, -6%, 0) rotate(-8deg) scale(0.96); }
}
@keyframes brand-chevron-light { to { stroke-dashoffset: -900; } }
@keyframes brand-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes brand-blink { 50% { opacity: 0.25; } }
/* Every animation, entrance and pointer-driven movement lives here, so a reduced-motion visitor gets a still page.
   An endless loop also waits for the class homepage.js adds once its pause control is live, so none runs without one.
   Hero loops set longhands only: the animation shorthand would reset the play-state the pause rule below sets. */
@media (prefers-reduced-motion: no-preference) {
  .homepage-body .homepage-hero-moving .brand-deco::before { content: ""; position: absolute; inset: -45%; z-index: -1; background: none; animation-name: brand-drift; animation-duration: calc(var(--motion-attention) * 9); animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
  @supports (color: color-mix(in srgb, red, red)) { .homepage-body .homepage-hero-moving .brand-deco::before { background: radial-gradient(22% 26% at 68% 70%, color-mix(in srgb, var(--color-brand-accent) 50%, transparent), transparent 70%), radial-gradient(20% 24% at 78% 30%, color-mix(in srgb, var(--color-brand-endless) 55%, transparent), transparent 70%), radial-gradient(18% 22% at 40% 72%, color-mix(in srgb, var(--color-brand-endless) 28%, transparent), transparent 70%); } }
  [data-theme="dark"] .homepage-body .homepage-hero-moving .brand-deco::before { opacity: 0.65; }
  .homepage-body .homepage-hero-moving .brand-chevrons-light { display: inline; }
  .homepage-body .homepage-hero-moving .brand-chevrons-light path { animation-name: brand-chevron-light; animation-duration: calc(var(--motion-attention) * 2.4); animation-timing-function: linear; animation-iteration-count: infinite; }
  .homepage-body .brand-chevrons-light path { fill: none; stroke: var(--color-brand-on-band); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 46 900; stroke-dashoffset: 46; }
  .homepage-body .brand-chevrons-light path:nth-child(n+3):nth-child(-n+4) { animation-delay: calc(var(--motion-attention) * -0.4); }
  .homepage-body .brand-chevrons-light path:nth-child(n+5):nth-child(-n+6) { animation-delay: calc(var(--motion-attention) * -0.8); }
  .homepage-body .brand-chevrons-light path:nth-child(n+7):nth-child(-n+8) { animation-delay: calc(var(--motion-attention) * -1.2); }
  .homepage-body .brand-chevrons-light path:nth-child(n+9):nth-child(-n+10) { animation-delay: calc(var(--motion-attention) * -1.6); }
  .homepage-body .brand-chevrons-light path:nth-child(n+11) { animation-delay: calc(var(--motion-attention) * -2); }
  .homepage-body .homepage-closing > .container.reveal-in .brand-chevrons-light { display: inline; }
  .homepage-body .homepage-closing > .container.reveal-in .brand-chevrons-light path { animation: brand-chevron-light calc(var(--motion-attention) * 2) linear 1 both; }
  .homepage-body .hero-note { transition: box-shadow var(--motion-standard) ease; }
  .homepage-body .homepage-hero-moving .hero-note { animation-name: brand-float; animation-duration: calc(var(--motion-attention) * 3); animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
  .homepage-body .homepage-hero-moving .live-ticket-live i { animation-name: brand-blink; animation-duration: calc(var(--motion-attention) * 0.7); animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
  .homepage-body .reveal-pending { opacity: 0; translate: 0 1.75rem; }
  .homepage-body .reveal-in { transition: opacity var(--motion-success) ease, translate var(--motion-success) ease; }
  .homepage-body .hero-visual { perspective: 1100px; }
  .homepage-body .hero-phone { transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform var(--motion-slow) ease; }
  .homepage-body .homepage-spotlight { position: relative; isolation: isolate; transition: transform var(--motion-standard) ease, box-shadow var(--motion-standard) ease; }
  .homepage-body .homepage-spotlight.reveal-in { transition: opacity var(--motion-success) ease, translate var(--motion-success) ease, transform var(--motion-standard) ease, box-shadow var(--motion-standard) ease; }
  .homepage-body .homepage-spotlight:hover { transform: translateY(-4px); box-shadow: var(--elevation-dialog); }
  .homepage-body .homepage-spotlight::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; background: none; transition: opacity var(--motion-standard) ease; }
  @supports (color: color-mix(in srgb, red, red)) { .homepage-body .homepage-spotlight::after { background: radial-gradient(16rem circle at var(--spot-x, 50%) var(--spot-y, 50%), color-mix(in srgb, var(--color-brand-endless) 16%, transparent), transparent 65%); } }
  .homepage-body .homepage-spotlight:hover::after { opacity: 1; }
}
.homepage-body .homepage-hero-paused, .homepage-body .homepage-hero-paused *, .homepage-body .homepage-hero-paused *::before, .homepage-body .homepage-hero-paused *::after { animation-play-state: paused; }
@media print {
  .homepage-body .reveal-pending { opacity: 1; translate: none; }
}
@media (prefers-reduced-motion: reduce) {
  .homepage-body .journey-caption { transition: none; }
}
@media (max-width: 1200px) {
  html.homepage-root { --homepage-topbar-height: 9.5rem; }
  .homepage-body .desktop-nav { display: none; }
  .homepage-body .mobile-nav { display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 0.75rem; }
  .homepage-body .nav-row { position: relative; }
  .homepage-body .homepage-hero { min-height: 37rem; padding: 4rem; }
  .homepage-body .hero-phone { width: 17rem; --live-ticket-content: 16; }
}
@media (min-width: 768px) and (max-width: 1200px) {
  .homepage-body .lang-chooser-panel { inset-inline-end: 2rem; }
}
@media (min-width: 1201px) {
  .homepage-body .pricing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
  .homepage-body .pricing-card { padding: var(--space-5); }
  .homepage-body .pricing-card .plan-action .c1-btn { padding-inline: var(--space-2); }
}
@media (min-width: 768px) {
  .homepage-body { --homepage-type-scale: 1.25; }
  .homepage-body .journey-player { --homepage-journey-room: calc(100svh - 2rem); --homepage-journey-min-shown: calc(9 / 16 * 0.75); container-type: inline-size; max-width: min(100%, calc(var(--homepage-journey-room) / var(--homepage-journey-min-shown))); }
  .homepage-body .journey-player video { max-height: max(var(--homepage-journey-room), calc(var(--homepage-journey-min-shown) * 100cqw)); object-fit: cover; object-position: 50% 0; }
}
@media (min-width: 768px) and (min-height: 480px) {
  .homepage-body .journey-player { --homepage-journey-room: calc(100svh - var(--homepage-topbar-height) - 2rem); }
}
@media (max-width: 1100px) {
  .homepage-body .homepage-hero { padding: 3rem 3rem calc(var(--touch-web) + 1.5rem); gap: 2rem; }
  .homepage-body .hero-note { position: static; max-width: none; }
  .homepage-body .homepage-hero-moving .hero-note { animation-name: none; }
  .homepage-body .hero-notes { display: grid; gap: 0.75rem; margin-top: 1.5rem; }
  .homepage-body .footer-grid { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; }
  .homepage-body .footer-brand { grid-column: 1 / -1; }
  .homepage-body .footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 1023px) {
  .homepage-body .plan-included-groups { grid-template-columns: minmax(0, 1fr); }
  .homepage-body .capability-grid li:nth-child(n) { grid-column: span 6; }
  .homepage-body .capability-grid li.capability-operator { grid-column: span 12; }
  .homepage-body .capability-grid li:nth-child(n+4) { grid-column: span 4; }
  .homepage-body .benefits-layout { column-gap: 2rem; }
}
@media (max-width: 767px) {
  html.homepage-root { --homepage-topbar-height: 19rem; }
  .homepage-body .container { padding-inline: 1rem; }
  .homepage-body .journey-player { display: grid; grid-template-columns: minmax(0, 1fr); margin-inline: -1rem; border-radius: 0; }
  .homepage-body .journey-caption, .homepage-body .journey-toggle:not([hidden]) + .journey-caption, .homepage-body .journey-caption-sizer { grid-area: 2 / 1; position: static; display: flex; align-items: center; justify-content: center; width: auto; max-width: none; min-height: 4.5rem; margin: 0; padding: 0.5rem calc(var(--touch-web) + 1.5rem); border-radius: 0; font-weight: 600; text-align: center; }
  .homepage-body .journey-caption-sizer { visibility: hidden; }
  .homepage-body .journey-caption:empty { opacity: 1; }
  .homepage-body .journey-toggle { position: static; grid-area: 2 / 1; align-self: center; justify-self: start; margin-inline-start: 1rem; }
  .homepage-body .billing-cycle, .homepage-body .plan-finder-options { width: 100%; }
  .homepage-body .billing-cycle-option, .homepage-body .plan-finder-option { flex: 1 1 0; flex-wrap: wrap; justify-content: center; row-gap: 0.25rem; padding-inline: 0.5rem; text-align: center; }
  .homepage-body .billing-cycle { flex-wrap: wrap; border-radius: var(--radius-xl); }
  .homepage-body .billing-cycle-option { flex: 1 1 auto; }
  /* Phone header: brand, language and theme on one row, the two account actions on the
     next, and every section link still visible below — nothing hides behind a menu. */
  .homepage-body .nav-row { position: relative; flex-wrap: wrap; row-gap: 0; min-height: 0; padding-block: 0.75rem; }
  .homepage-body .nav-actions { display: contents; }
  .homepage-body .homepage-brand { order: 0; margin-inline-end: auto; }
  .homepage-body .homepage-brand img { height: 1.75rem; }
  .homepage-body .lang-chooser { order: 1; }
  .homepage-body #theme-toggle { order: 2; }
  .homepage-body .nav-row::after { content: ""; order: 3; flex-basis: 100%; height: 0.5rem; }
  .homepage-body .nav-signin { order: 4; }
  .homepage-body .nav-try { order: 5; }
  .homepage-body .homepage-topbar .nav-signin, .homepage-body .homepage-topbar .nav-try { flex: 1 1 0; min-width: 0; padding-inline: 0.5rem; white-space: normal; text-align: center; }
  .homepage-body .mobile-nav { gap: 0 0.25rem; padding-bottom: 0.5rem; }
  .homepage-body .mobile-nav .homepage-nav-link { padding-inline: 0.5rem; }
  .homepage-body h1 { font-size: calc(var(--type-h1-size) * var(--homepage-type-scale)); line-height: var(--type-h1-leading); }
  .homepage-body h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-leading); }
  .homepage-body main h2 { font-size: calc(var(--type-h2-size) * var(--homepage-type-scale)); }
  .homepage-body .homepage-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 2rem 1.5rem calc(var(--touch-web) + 1.5rem); }
  .homepage-body .brand-chevrons { top: auto; bottom: 1rem; inset-inline-end: -4%; height: 22rem; transform: none; }
  .homepage-body .homepage-closing .brand-chevrons { bottom: -30%; inset-inline-end: -40%; height: 120%; }
  .homepage-body .homepage-closing > .container { width: calc(100% - 2rem); padding: 3rem 1.25rem; }
  .homepage-body .hero-phone { width: 13rem; --live-ticket-content: 12; margin-inline: auto; }
  .homepage-body .homepage-actions { flex-direction: column; }
  .homepage-body .pricing-grid, .homepage-body .capability-grid { grid-template-columns: minmax(0, 1fr); }
  .homepage-body .plan-strip { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .homepage-body .plan-strip-text { flex-basis: auto; }
  .homepage-body .plan-strip .price { white-space: normal; }
  .homepage-body .plan-strip .c1-btn { width: 100%; }
  .homepage-body .workflow { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .homepage-body .workflow-step { padding: 1rem 0 0; }
  .homepage-body .workflow-step::before { margin-bottom: 0.5rem; font-size: var(--type-h1-size); line-height: var(--type-h1-leading); }
  .homepage-body .workflow-step h3 + p { margin-top: 0.5rem; }
  .homepage-body .capability-grid li:nth-child(n) { grid-column: auto; }
  .homepage-body .capability-grid li:nth-child(n+3) { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 1rem; row-gap: 0.5rem; padding: 1.25rem; }
  .homepage-body .capability-grid li.capability-operator { display: flex; flex-direction: column; grid-column: auto; gap: 1.5rem; padding: 1.5rem; }
  .homepage-body .capability-operator-image { width: 100%; }
  .homepage-body .capability-grid li:nth-child(n+4) { grid-column: auto; }
  .homepage-body .capability-grid li:nth-child(n+3) .icon-tile { grid-row: span 2; margin: 0; }
  .homepage-body .capability-grid li:nth-child(n+3) h3 { align-self: end; }
  .homepage-body .capability-grid li:nth-child(n+3) p { grid-column: 2; margin: 0; }
  .homepage-body .section { padding-block: 3rem; }
  .homepage-body .pricing-grid { gap: 2rem; }
  .homepage-body .benefits-layout { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .homepage-body .benefits-layout .section-heading { margin-bottom: 1rem; }
  .homepage-body .homepage-closing { padding-block: 1rem 3rem; }
  .homepage-body .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .homepage-body .cookie-row { flex-direction: column; align-items: stretch; gap: 1rem; }
}
@media (min-height: 480px) {
  html.homepage-root { scroll-padding-top: var(--homepage-topbar-height); }
  .homepage-body .homepage-topbar { position: sticky; top: 0; z-index: 15; }
  .homepage-body .homepage-progress { display: block; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--color-brand-band), var(--color-brand-endless), var(--color-brand-accent)); transform: scaleX(var(--homepage-scroll-progress, 0)); transform-origin: 0 50%; pointer-events: none; }
}
@media (max-height: 479px) {
  .homepage-body .cookie-banner { position: static; }
}
@supports (backdrop-filter: blur(1px)) {
  html.homepage-scrolled .homepage-body .homepage-topbar { background: var(--color-surface-card); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); }
  @supports (color: color-mix(in srgb, red, red)) { html.homepage-scrolled .homepage-body .homepage-topbar { background: color-mix(in srgb, var(--color-surface-card) 88%, transparent); } }
}

.homepage-body .homepage-fallback { padding-block: 1.5rem; }
.homepage-js .homepage-body .homepage-fallback { display: none; }

@media (max-width: 40rem) {
  .homepage-body .policy-dialog-actions { flex-direction: column; }
  .homepage-body .cookie-table caption { display: block; width: 100%; }
  .homepage-body .cookie-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .homepage-body .cookie-table, .homepage-body .cookie-table tbody, .homepage-body .cookie-table tr, .homepage-body .cookie-table :is(th, td) { display: block; }
  .homepage-body .cookie-table tr { margin-bottom: 0.75rem; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-md); }
  .homepage-body .cookie-table :is(th, td) { border: 0; }
  .homepage-body .cookie-table td::before { content: attr(data-label); display: block; color: var(--color-neutral-600); font-weight: 700; }
}

@supports (height: 100dvh) {
  .homepage-body #policy-dialog { max-height: calc(100dvh - 2rem); }
}