/* Marketing layout: the homepage and the use-case pages (`main.hx`).

   Everything here is prefixed `hx-` on purpose. Until their translations
   catch up, the localized versions of these pages still render the previous
   design from `home.css` and `page-variants/use-case.css`, and both old and
   new stylesheets are linked meanwhile, so neither may style the other's
   markup. When the last locale moves over, the old stylesheets can go (and
   `toggleTheme`, which the homepage header gets from `home.js`, moves to
   `marketing.js`).

   Colors come from `tokens.css` only. The brand rules still hold: atlas blue
   is the only accent, no gradients, glass, or glow on content surfaces. */

.hx {
  --hx-gutter: var(--site-gutter);
  --hx-section: 76px;
  --hx-sticky-top: 76px;
  --hx-ease: cubic-bezier(.2, .7, .2, 1);
  display: block;
}

/* Zero-specificity resets, so every component class below can set its own
   margins without fighting them. */
:where(.hx) :where(h1, h2, h3) { margin: 0; text-wrap: balance; }
:where(.hx) :where(p, figure, blockquote) { margin: 0; }
:where(.hx) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }

.hx-wrap { width: min(var(--site-max), 100%); margin: 0 auto; }
.hx-center { text-align: center; }
.hx-section { padding: var(--hx-section) var(--hx-gutter); }
.hx-h2 {
  font-size: var(--fs-section);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.hx-micro { margin-top: 14px; font-size: 0.84rem; color: var(--muted-2); }
.hx-micro + .hx-micro { margin-top: 6px; }
.hx-micro a { color: var(--blue); font-weight: 600; }
.hx-stars { color: var(--brand); letter-spacing: 0.08em; }

/* Real product screenshots follow the site theme. */
.hx .shot-light { display: none; }
html[data-theme="light"] .hx .shot-dark { display: none; }
html[data-theme="light"] .hx .shot-light { display: block; }

/* ---------- button (the site's action style) ---------- */
.hx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: var(--radius-button, 16px);
  background: var(--action-gradient);
  box-shadow: var(--action-chrome);
  color: #fff;
  font-weight: 650;
  font-size: 1rem;
  transition: transform 160ms ease, filter 160ms ease;
}
.hx-btn:hover { transform: translateY(-1px); }
.hx-btn:active { transform: scale(0.985); filter: brightness(0.95); }

/* ---------- device (screenshot inside the iPhone frame) ---------- */
.hx-device {
  position: relative;
  aspect-ratio: 980 / 2000;
  filter: var(--device-shadow);
}
.hx-screen {
  position: absolute;
  top: 2.2%;
  bottom: 2.2%;
  left: 5.102%;
  right: 5.102%;
  overflow: hidden;
  border-radius: 13.636% / 6.276%;
  background: #000;
}
.hx-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hx-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- floating header (marketing pages only; the class is set by marketing.js) ---------- */
html.hx-page .top-bar {
  transition: background-color 300ms ease, border-color 300ms ease, padding 350ms var(--hx-ease);
}
html.hx-page .top-bar-inner {
  transition: min-height 350ms var(--hx-ease), padding 350ms var(--hx-ease), border-radius 350ms var(--hx-ease),
    box-shadow 350ms ease, background-color 300ms ease, border-color 300ms ease, margin 350ms var(--hx-ease),
    width 350ms var(--hx-ease);
  border: 1px solid transparent;
}
/* The gap above the pill is padding on the sticky bar, not a margin on the
   pill: a child margin collapses through the bar, and once the bar is stuck at
   top: 0 the pill would sit flush against the edge of the window. */
html.hx-page.hx-scrolled .top-bar {
  padding-top: 16px;
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.hx-page.hx-scrolled .top-bar-inner {
  width: min(880px, calc(100% - 24px));
  min-height: 56px;
  padding: 0 8px 0 18px;
  border-radius: 999px;
  border-color: var(--line);
  background: var(--header-bg);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--shadow);
}
/* The pill is 880px wide, narrower than the 1040px flat bar, so it takes the
   compact controls the flat bar only uses below 1040px (site-header.css).
   Without them seven locales pushed the theme toggle out of the pill, Ukrainian
   by 110px; dropping the wordmark and the language name returns ~165px. */
html.hx-page.hx-scrolled .brand > span:not(.brand-mark) { display: none; }
html.hx-page.hx-scrolled .lang-switch > summary {
  width: var(--toolbar-control);
  padding: 0;
  justify-content: center;
}
html.hx-page.hx-scrolled .lang-switch-current,
html.hx-page.hx-scrolled .lang-switch-caret { display: none; }

/* ---------- hero ---------- */
.hx-hero {
  position: relative;
  overflow: hidden;
  padding: 30px var(--hx-gutter) 0;
}
/* One quiet map behind the headline. Only the active theme's file is fetched
   because it is a background image, not two <img>s. It fades in once and then
   stays still, so a theme switch cannot make it flash. */
.hx-map {
  position: absolute;
  inset: 0 0 auto;
  height: 64%;
  background: center 38% / cover no-repeat;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 30%, transparent 100%);
  mask-image: linear-gradient(#000 30%, transparent 100%);
  animation: hx-fade-in 1400ms ease both;
}
html[data-theme="dark"] .hx-map { background-image: url("../home/map/hero-map-dark.svg?v=20260924b"); }
html[data-theme="light"] .hx-map { background-image: url("../home/map/hero-map-light.svg?v=20260924b"); }
@keyframes hx-fade-in { from { opacity: 0; } to { opacity: 1; } }

.hx-hero-copy { position: relative; z-index: 2; }
.hx-hero h1 {
  max-width: 13ch;
  margin: 0;
  font-size: var(--fs-hero);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.04em;
}
.hx-lede {
  max-width: 44ch;
  margin: 16px 0 0;
  font-size: 1.08rem;
  color: var(--muted);
}
.hx-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 12px 22px; margin-top: 24px; }

/* Hero pill and rating: availability above the headline, the App Store
   rating beside the button, linking down to the reviews. */
.hx-pill { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-card); color: var(--muted); font-size: 0.88rem; }
.hx-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.hx-hero-rating { display: inline-flex; align-items: center; gap: 4px; color: var(--brand); }
.hx-hero-rating .hx-laurel { width: 22px; }
.hx-hero-rating-core { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.hx-hero-rating-score { font-size: 1.65rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.hx-hero-rating-label { margin-top: 3px; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
.hx-hero-rating:hover .hx-hero-rating-score { color: var(--blue); }

/* Front phone (dashboard) right and larger, back phone (tracker) left and
   lower, overlapping like the previous hero. Widths follow the viewport, so
   roughly three quarters of the front phone shows on first load, on a phone
   and on a laptop alike, and the rest invites the scroll. */
.hx-phones {
  --hx-phone: clamp(160px, 31vh, 250px);
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 28px;
  padding-bottom: 48px;
}
@supports (height: 1svh) {
  .hx-phones { --hx-phone: clamp(160px, min(62vw, 31svh), 250px); }
}
.hx-phones .hx-device { flex: none; transition: transform 1000ms var(--hx-ease), opacity 900ms ease; }
.hx-phone-front {
  order: 2;
  z-index: 2;
  width: var(--hx-phone);
  margin-left: calc(var(--hx-phone) * -0.34);
  transition-delay: 120ms;
}
.hx-phone-back {
  order: 1;
  z-index: 1;
  width: calc(var(--hx-phone) * 0.84);
  margin-top: calc(var(--hx-phone) * 0.3);
}
html.js .hx-phones.is-pre .hx-phone-front { transform: translateY(56px); opacity: 0; }
html.js .hx-phones.is-pre .hx-phone-back { transform: translateY(84px); opacity: 0; }

/* ---------- use cases: one quiet tile per situation, real tracker card inside ----------
   The images are the app's own dashboard cards, cropped to the card's edge and
   shown near their on-phone size, so they read as the app rather than as
   posters. Nothing moves on hover except the arrow. */
.hx-cases { display: grid; gap: 16px; margin-top: 44px; }
.hx-case {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 28px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--bg-elevated);
  color: inherit;
  transition: border-color 200ms ease, background-color 200ms ease;
}
html[data-theme="light"] .hx-case { background: var(--bg-card-strong); }
/* The whole tile is the link: on hover it lifts one surface step and the
   border firms up. No movement. */
a.hx-case:hover { border-color: var(--line-strong); background: var(--bg-card); }
html[data-theme="light"] a.hx-case:hover { background: var(--bg-card); }
.hx-case-label { display: inline-flex; align-items: baseline; gap: 8px; font-size: 1.12rem; font-weight: 650; }
a.hx-case .hx-case-label::after { content: "\2192"; color: var(--blue); transition: transform 200ms var(--hx-ease); }
a.hx-case:hover .hx-case-label::after { transform: translateX(4px); }
.hx-case-text { margin: 6px 0 24px; font-size: 0.95rem; color: var(--muted); }
/* Pushed to the bottom of the tile, so cards in one row share a baseline. */
.hx-case-shot { display: block; width: min(100%, 340px); margin: auto auto 0; container-type: inline-size; }
/* The app card's corner radius, as a share of the card's width. */
.hx-case-shot img { display: block; width: 100%; height: auto; border-radius: 4.3cqw; box-shadow: var(--shadow); }

/* ---------- how it works: pinned phone, three steps ---------- */
.hx-story { position: relative; margin-top: 12px; }
.hx-story-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hx-story-device { width: auto; height: min(50vh, 440px); }
@supports (height: 1svh) { .hx-story-device { height: min(50svh, 440px); } }
.hx-story-device .hx-screen img { opacity: 0; transition: opacity 450ms ease; }
.hx-story-device .hx-screen img.is-shown { opacity: 1; }
.hx-step-dots { display: flex; gap: 7px; }
.hx-step-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line-strong); transition: width 300ms ease, background-color 300ms ease; }
.hx-step-dots i.is-active { width: 18px; background: var(--blue); }
.hx-step-label { font-size: 0.82rem; font-weight: 600; color: var(--blue); }
.hx-step h3 { margin-top: 6px; font-size: 1.35rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.hx-step-body { margin-top: 8px; color: var(--muted); }
.hx-step-body a { color: var(--blue); font-weight: 600; white-space: nowrap; }

/* Phone and narrow screens: the whole block pins, and scrolling steps
   through the three screens. Without JavaScript it is a plain stacked list. */
.hx-steps { display: grid; gap: 28px; margin-top: 28px; text-align: center; }
html.js .hx-story { height: 300vh; }
@supports (height: 1svh) { html.js .hx-story { height: 300svh; } }
html.js .hx-story-pin {
  position: sticky;
  top: var(--hx-sticky-top);
  height: calc(100vh - var(--hx-sticky-top) - 12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
@supports (height: 1svh) { html.js .hx-story-pin { height: calc(100svh - var(--hx-sticky-top) - 12px); } }
html.js .hx-steps { position: relative; width: min(340px, 100%); height: 11em; margin: 0; display: block; }
html.js .hx-step {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 380ms ease, transform 380ms ease;
}
html.js .hx-step.is-active { opacity: 1; transform: none; pointer-events: auto; }
html.js .hx-step h3 { font-size: 1.25rem; }
html.js .hx-step-body { font-size: 0.95rem; }

/* ---------- reviews ---------- */
.hx-laurel { flex: none; width: 50px; height: auto; }
.hx-laurel-right { transform: scaleX(-1); }
.hx-quotes { display: grid; gap: 14px; margin-top: 32px; }
.hx-quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card, 24px);
  background: var(--bg-card);
}
.hx-quote-stars { margin-bottom: 10px; color: var(--brand); letter-spacing: 0.12em; font-size: 0.95rem; }
.hx-quote-title { margin-bottom: 8px; font-weight: 650; }
.hx-quote blockquote p { color: var(--muted); }
.hx-quote blockquote .hx-quote-title { color: var(--text); }
.hx-quote blockquote .hx-quote-stars { color: var(--brand); }
.hx-quote figcaption { font-size: 0.84rem; color: var(--muted-2); }

/* Translated pages: the original review first, with a button top-right that
   swaps in the translation. Without JavaScript the button cannot work, so it
   is not shown and the original stays. */
.hx-quote[data-hx-review] { position: relative; }
.hx-quote-toggle { position: absolute; top: 18px; right: 18px; padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--blue); font: inherit; font-size: 0.76rem; font-weight: 600; cursor: pointer; }
.hx-quote-toggle:hover { border-color: var(--brand); }
html:not(.js) .hx-quote-toggle { display: none; }
.hx-quote-text[hidden] { display: none; }

/* ---------- privacy ---------- */
.hx-trust-list { display: grid; gap: 22px; margin-top: 36px; }
.hx-trust-list > div { padding-top: 16px; border-top: 1px solid var(--line-strong); }
.hx-trust-list h3 { font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em; }
.hx-trust-body { margin-top: 6px; color: var(--muted); }
.hx-trust-body a { color: var(--blue); font-weight: 600; white-space: nowrap; }

/* ---------- faq ---------- */
.hx-faq { margin-top: 32px; border-top: 1px solid var(--line-strong); text-align: left; }
.hx-faq details { border-bottom: 1px solid var(--line-strong); }
.hx-faq summary {
  position: relative;
  padding: 20px 36px 20px 0;
  font-size: 1.06rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.hx-faq summary::-webkit-details-marker { display: none; }
.hx-faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--muted-2);
  border-bottom: 2px solid var(--muted-2);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 250ms ease;
}
.hx-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.hx-faq details p { max-width: 62ch; padding: 0 0 22px; color: var(--muted); }
.hx-faq a { color: var(--blue); font-weight: 600; }
/* Kept outside the answer paragraph, so the visible answer stays identical to
   the FAQPage structured data. */
.hx-faq details .hx-faq-link { margin-top: -10px; padding-bottom: 22px; }

/* ---------- final ---------- */
.hx-final { padding-bottom: calc(var(--hx-section) + 12px); }
.hx-final-row { display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 30px; }
.hx-qr { display: none; align-items: center; gap: 12px; text-align: left; font-size: 0.84rem; color: var(--muted-2); }
.hx-boundary { max-width: 60ch; margin: 28px auto 0; font-size: 0.8rem; line-height: 1.5; color: var(--muted-2); }
.hx-qr img { width: 84px; height: 84px; padding: 6px; border-radius: 12px; background: #fff; }

/* ---------- use-case pages ---------- */
/* Marketing content spans the full site width, so the header and every
   section share one set of edges. (The old use-case stylesheet, still loaded
   for the locale pages, sets a narrower --max.) */
html:has(main.hx) { --max: var(--site-max); }
html[data-theme="dark"] .hx-map-schengen { background-image: url("../home/map/schengen-map-dark.svg?v=20260927a"); }
html[data-theme="light"] .hx-map-schengen { background-image: url("../home/map/schengen-map-light.svg?v=20260927a"); }
.hx-map-schengen { background-position: center 30%; }

/* A reference page, not a second homepage: copy is left-aligned, and every
   section shares one content width, so nothing runs wider than the section
   above it. */
.hx-uc-wrap { width: min(var(--site-max), 100%); margin: 0 auto; }
.hx-uc-section { padding: 64px var(--hx-gutter) 0; }
.hx-uc-h2 { font-size: var(--fs-section); line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; }
.hx-uc-head { max-width: 62ch; }
.hx-uc-head p { margin-top: 12px; font-size: 1.0625rem; color: var(--muted); }

/* Hero: the promise, the button, and one phone. */
.hx-uc-hero { position: relative; overflow: hidden; padding: 28px var(--hx-gutter) 0; }
.hx-uc-hero-copy,
.hx-uc-hero-device { position: relative; z-index: 2; }
.hx-uc-hero h1 { max-width: 13ch; font-size: var(--fs-display); line-height: 1.05; font-weight: 700; letter-spacing: -0.04em; }
.hx-uc-hero .hx-lede { max-width: 48ch; margin: 18px 0 0; font-size: 1.12rem; }
.hx-uc-hero .hx-actions { flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 12px 22px; }
.hx-uc-hero-device { width: min(60vw, 250px); margin: 40px auto 0; }

/* Supported rules, styled like the app's preset rows. */
.hx-uc-rules { display: grid; gap: 10px; margin-top: 28px; }
.hx-uc-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  min-height: 72px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-elevated);
  color: var(--text);
  transition: border-color 160ms ease;
}
html[data-theme="light"] .hx-uc-rule { background: var(--bg-card-strong); }
a.hx-uc-rule:hover { border-color: var(--brand); }
.hx-uc-rule img { flex: none; width: 36px; height: 27px; border-radius: 5px; object-fit: cover; }
.hx-uc-rule-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.hx-uc-rule-text strong { font-size: 0.98rem; font-weight: 650; }
.hx-uc-rule-text span { font-size: 0.86rem; color: var(--muted); }
.hx-uc-rule-go { flex: none; font-size: 0.84rem; font-weight: 600; color: var(--blue); }
.hx-uc-rule-go::after { content: " \2192"; }
.hx-uc-rule-plus { flex: none; display: grid; place-items: center; width: 36px; height: 27px; border-radius: 5px; font-size: 1.1rem; font-weight: 600; color: var(--blue); background: var(--blue-soft); }

/* Long catalogues: a label per group, and a compact grid of flag chips for
   the plain rules, so forty countries do not become forty rows. */
.hx-uc-sub { margin-top: 36px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
.hx-uc-sub + .hx-uc-rules,
.hx-uc-sub + .hx-uc-chips { margin-top: 12px; }
.hx-uc-rules-after { margin-top: 24px; }
.hx-uc-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hx-uc-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  transition: border-color 160ms ease;
}
html[data-theme="light"] .hx-uc-chip { background: var(--bg-card-strong); }
.hx-uc-chip:hover { border-color: var(--brand); }
.hx-uc-chip img { flex: none; width: 26px; height: 19px; border-radius: 4px; object-fit: cover; }

/* How it works: three numbered steps, each with its real screen. On phones
   they sit in a row you swipe, so the page does not stack three phones. */
.hx-uc-steps { display: grid; gap: 40px; margin-top: 36px; }
.hx-uc-step { min-width: 0; }
.hx-uc-step-device { width: min(100%, 240px); margin-bottom: 24px; }
.hx-uc-step-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 0.86rem; font-weight: 700; color: var(--blue); background: var(--blue-soft); }
.hx-uc-step h3 { margin-top: 12px; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.hx-uc-step-body p { margin-top: 8px; color: var(--muted); }
.hx-uc-step-body a { display: inline-block; margin-top: 12px; font-weight: 600; color: var(--blue); }
@media (max-width: 899px) {
  .hx-uc-steps {
    grid-auto-flow: column;
    grid-auto-columns: min(76%, 300px);
    gap: 20px;
    margin-inline: calc(var(--hx-gutter) * -1);
    padding: 0 var(--hx-gutter) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--hx-gutter);
    scrollbar-width: none;
  }
  .hx-uc-steps::-webkit-scrollbar { display: none; }
  .hx-uc-step { scroll-snap-align: start; }
  /* Only the arrow on narrow rows; the word stays for screen readers. */
  .hx-uc-rule { padding-right: 14px; }
  .hx-uc-rule-go { font-size: 0; }
  .hx-uc-rule-go::after { content: "\2192"; font-size: 1.05rem; }
  .hx-uc-step-device { width: 100%; max-width: 220px; }
}

/* Go deeper: guides as cards. */
.hx-uc-cards { display: grid; gap: 12px; margin-top: 28px; }
.hx-uc-card {
  display: grid;
  align-content: start;
  gap: 6px;
  height: 100%;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bg-elevated);
  color: var(--text);
  transition: border-color 160ms ease;
}
html[data-theme="light"] .hx-uc-card { background: var(--bg-card-strong); }
a.hx-uc-card:hover { border-color: var(--brand); }
.hx-uc-card strong { font-weight: 650; }
a.hx-uc-card strong::after { content: " \2192"; color: var(--blue); }
.hx-uc-card span { font-size: 0.9rem; color: var(--muted); }
.hx-uc-more { margin-top: 18px; }
.hx-uc-more a { font-weight: 600; color: var(--blue); }


/* ---------- CJK ----------
   A CJK character is a full square, about twice a Latin letter, so the
   Latin `ch` measure on the headlines would fit six characters a line, and
   CJK text breaks between any two characters. Korean breaks at spaces
   (keep-all is the standard Korean setting); Japanese and Chinese headlines
   break only at the phrase boundaries marked with <wbr> in the markup, and
   run a size smaller because the lines are denser. */
html:lang(ko) .hx { word-break: keep-all; overflow-wrap: anywhere; }
html:lang(ko) .hx h1,
html:lang(ja) .hx h1,
html:lang(zh) .hx h1 { max-width: none; word-break: keep-all; }
html:lang(ja) .hx-hero h1,
html:lang(zh) .hx-hero h1,
html:lang(ko) .hx-hero h1 { font-size: calc(var(--fs-hero) * 0.74); letter-spacing: -0.02em; }
html:lang(ja) .hx-uc-hero h1,
html:lang(zh) .hx-uc-hero h1,
html:lang(ko) .hx-uc-hero h1 { font-size: calc(var(--fs-display) * 0.8); letter-spacing: -0.02em; }

/* ---------- reveal (only what starts below the fold is pre-hidden) ---------- */
[data-hx-reveal] { transition: opacity 700ms ease, transform 700ms var(--hx-ease); }
[data-hx-reveal].is-pre { opacity: 0; transform: translateY(18px); }

/* ---------- short phones (iPhone SE and the like): tighter hero copy ---------- */
@media (max-width: 899px) and (max-height: 720px) {
  .hx-hero { padding-top: 18px; }
  .hx-hero h1 { font-size: 3rem; }
  .hx-lede { margin-top: 12px; font-size: 0.98rem; }
  .hx-actions { margin-top: 18px; }
  .hx-micro { margin-top: 10px; }
  .hx-phones { margin-top: 20px; }
}

/* ---------- tablet ---------- */
@media (min-width: 640px) {
  .hx-uc-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-uc-cards { grid-template-columns: 1fr 1fr; }
  .hx-quotes { grid-template-columns: 1fr 1fr; }
  .hx-trust-list { grid-template-columns: 1fr 1fr; gap: 28px 36px; }
}

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  .hx { --hx-section: 96px; --hx-sticky-top: 96px; }
  /* Homepage hero: copy left, phones right, inside the same edges as the
     header and the sections below, like the use-case pages. */
  .hx-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 64px;
    padding: 48px max(var(--hx-gutter), calc((100% - var(--site-max)) / 2)) 48px;
    text-align: left;
  }
  .hx-hero .hx-map { height: 100%; }
  .hx-hero h1 { max-width: 12ch; margin: 0; font-size: var(--fs-hero); }
  .hx-hero .hx-lede { max-width: 42ch; margin: 20px 0 0; font-size: 1.3rem; }
  .hx-hero .hx-actions { justify-content: flex-start; }
  .hx-lede { max-width: 62ch; font-size: 1.12rem; }
  .hx-phones {
    --hx-phone: 330px;
    margin-top: 0;
    padding: 0 0 24px;
  }

  .hx-cases { grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; }
  .hx-case { padding: 32px 32px 36px; }

  /* The pin wrapper steps aside so the steps and the phone become two columns. */
  html.js .hx-story {
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    margin-top: 48px;
  }
  html.js .hx-story-pin { display: contents; }
  html.js .hx-story-stage {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    /* Centred on tall windows; never higher than just under the floating header. */
    top: max(calc(50vh - 330px), calc(var(--hx-sticky-top) + 8px));
    align-self: start;
    justify-self: center;
    margin-top: 0;
  }
  /* Scales down on short windows so it fits between the header and the bottom edge. */
  .hx-story-device { height: auto; width: min(320px, calc((100vh - 124px) / 2.04)); }
  .hx-step-dots { display: none; }
  html.js .hx-steps { grid-column: 1; grid-row: 1; width: auto; height: auto; display: block; text-align: left; }
  html.js .hx-step {
    position: static;
    min-height: 56vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0.28;
    transform: none;
    pointer-events: auto;
    transition: opacity 450ms ease;
  }
  html.js .hx-step.is-active { opacity: 1; }
  /* The phone (about 655px tall, pinned with its centre on the viewport's
     centre) is taller than a step, so the last step carries the extra height:
     the phone only lets go once that step's text is near the top. */
  html.js .hx-step:last-child { min-height: calc(60vh + 660px); }
  html.js .hx-step h3 { font-size: 2.1rem; }
  html.js .hx-step-body { max-width: 36ch; font-size: 1.12rem; }
  .hx-steps { text-align: left; }

  .hx-quotes { gap: 20px; }
  /* FAQ: the heading on the left, the questions beside it. */
  .hx-faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; gap: 64px; }
  .hx-faq { margin-top: 0; }
  .hx-trust-list { grid-template-columns: repeat(4, 1fr); gap: 36px; margin-top: 48px; }

  .hx-qr { display: flex; }
  .hx-uc-section { padding-top: 96px; }
  .hx-uc-hero { padding: 72px var(--hx-gutter) 16px; }
  .hx-uc-hero .hx-map { height: 100%; }
  .hx-uc-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: 80px; }
  .hx-uc-hero h1 { font-size: var(--fs-display); }
  .hx-uc-hero .hx-lede { font-size: 1.28rem; }
  .hx-uc-hero-device { width: 300px; margin: 0; }
  .hx-uc-rules { grid-template-columns: 1fr 1fr; }
  /* The open-ended card closes the list across both columns. */
  .hx-uc-rules-any { grid-column: 1 / -1; }
  .hx-uc-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
  .hx-uc-cards { grid-template-columns: repeat(3, 1fr); }
  .hx-uc-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .hx-map { animation: none; }
  .hx *,
  .hx *::before,
  .hx *::after { transition: none !important; animation: none !important; }
  html.hx-page .top-bar-inner { transition: none; }
}