/* app-marketing: layout glue for the marketing home (public/index.html). Tokens only; no colour, font, radius or shadow literals.
   The map, hero and phone-list glue is shared with the app and lives in app.css. */

.x-skip { position: absolute; inset-block-start: var(--ds-space-2); inset-inline-start: var(--ds-space-2); z-index: var(--ds-z-popover, 30); padding: var(--ds-space-2) var(--ds-space-3); background: var(--ds-surface); color: var(--ds-ink); border-radius: var(--ds-radius-md); transform: translateY(-200%); }
.x-skip:focus { transform: none; }
html { scroll-behavior: smooth; scroll-padding-block-start: var(--ds-space-16); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--ds-ground); color: var(--ds-ink); }
main { display: block; }

/* free check */
.x-check__trap { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
.x-check { max-inline-size: 1320px; margin-inline: auto; padding-inline: var(--ds-gutter-page); }
.x-check:empty { display: none; }
.x-check:focus-visible { outline: none; }
.x-check > * { margin-block: var(--ds-space-4); }
.x-check__result { padding: var(--ds-space-6); background: var(--ds-surface); border: 1px solid var(--ds-rule); border-radius: var(--ds-radius-xl); max-inline-size: 760px; }
.x-check__table { max-inline-size: 100%; }
@media (max-width: 900px) {
  .x-check { padding-inline: var(--ds-space-4); }
  .x-check__result { padding: var(--ds-space-4); }
}

/* price toggle */
.x-price__cur { display: flex; justify-content: flex-start; margin-block-end: var(--ds-space-4); }
.ds-sec-atlas-pricing-services__action { display: inline-flex; align-items: center; gap: var(--ds-space-2); }
.ds-sec-atlas-pricing-services__note a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }

/* long words never push the page sideways on a phone */
.ds-sec { min-inline-size: 0; overflow-wrap: anywhere; }