/* Home page.

   Two namespaces live here on purpose:

   `.hp-*`  the SimOptions home (src/views/site/home/) — the 2026-08 design set.
            Uses the --so-* tokens. This is the rule for new work.
   `.home-hero*` / `.dest-card*`  older shared pieces still consumed by the
            partner skins (src/views/sites/partners/) and the DestCard block.
            Left untouched; they go when those are rebuilt.

   Section rhythm on the home page: bands alternate white / --so-tint, padding
   runs 64–80px vertical against a flat 24px gutter, and each band picks its
   own max-width from the --so-w-* scale rather than sharing one container. */

/* ==========================================================================
   1. Hero — gradient band with an overhanging search bar
   ========================================================================== */

.hp-hero {
  position: relative;
  background: var(--so-grad-band);
  padding: 70px var(--so-gutter) 74px;
}

/* Decorative corner artwork. Purely ornamental, so it never intercepts the
   pointer and is hidden from the a11y tree at the markup level. */
.hp-hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hp-hero__bg img {
  position: absolute;
  top: -30px;
  width: 420px;
  opacity: 0.5;
}

.hp-hero__bg img:first-child { left: -120px; }
.hp-hero__bg img:last-child  { right: -120px; }

.hp-hero__inner {
  position: relative;
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

.hp-hero__eyebrow {
  display: block;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--text-lg);
  font-weight: 400;
}

.hp-hero__title {
  max-width: 850px;
  margin: 0 auto 40px;
  color: #fff;
  font-size: var(--text-h1);
  font-weight: 500;
  line-height: 1.23;
}

.hp-hero__title sup {
  top: -0.75em;
  font-size: 0.5em;
  font-weight: 600;
}

/* Straddles the band's bottom edge, half in and half out. The band below it
   supplies the clearance (see .hp-trust padding-top). */
.hp-hero__search {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 9;
  width: 100%;
  max-width: 748px;
  padding-inline: var(--so-gutter);
  transform: translate(-50%, 50%);
}

.hp-search {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 8px 0 24px;
  background: var(--so-surface);
  border-radius: var(--r-3xl);
  box-shadow: var(--so-shadow-search);
}

.hp-search__icon {
  flex-shrink: 0;
  color: var(--so-purple);
  font-size: var(--text-2xl);
}

.hp-search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-weight:300;font-size:var(--text-md);font-family:var(--font-body);line-height:normal;
  color: var(--so-ink-strong);
}

.hp-search__input::placeholder { color: var(--so-ink-faint); }

.hp-search__btn {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: 48px;
  padding-inline: 34px;
  border-radius: var(--r-3xl);
  background: var(--so-grad-btn);
  color: #fff;
  font-weight:500;font-size:var(--text-base);font-family:var(--font-body);line-height:normal;
  text-decoration: none;
}

/* ==========================================================================
   2. Trust strip + operator logos
   ========================================================================== */

/* Top padding clears the search bar's overhang (32px = half its 64px height,
   plus breathing room). */
.hp-trust {
  padding: 66px var(--so-gutter) 40px;
  background: var(--so-surface);
}

.hp-trust__feats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px 0;
  max-width: var(--so-w-md);
  margin: 0 auto 44px;
}

.hp-trust__feat {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding-inline: 16px;
}

.hp-trust__feat i {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 2px solid var(--so-purple);
  border-radius: 50%;
  color: var(--so-purple);
  font-size: var(--text-xl);
}

.hp-trust__feat span {
  color: var(--so-ink-muted);
  font-size: var(--text-base);
  line-height: 1.3;
}

.hp-trust__ops {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 34px;
  max-width: var(--so-w-md);
  margin-inline: auto;
}

.hp-trust__op {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  padding: 12px;
  background: var(--so-surface);
  border-radius: var(--r-md);
  box-shadow: var(--so-shadow-tile);
}

.hp-trust__op img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media (min-width: 900px) {
  .hp-trust__feats { flex-wrap: nowrap; gap: 0; }
}

/* ==========================================================================
   Shared section heading
   ========================================================================== */

.hp-head {
  margin-bottom: 44px;
  text-align: center;
}

.hp-head h2 {
  margin: 0 0 10px;
  color: var(--so-ink-strong);
  font-size: var(--text-h2);
  font-weight: 500;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.hp-head p {
  margin: 0;
  color: var(--so-ink-meta);
  font-size: var(--text-lg);
  font-weight: 400;
}

/* ==========================================================================
   3. Video + rating
   ========================================================================== */

.hp-video {
  padding: 64px var(--so-gutter);
  background: var(--so-surface);
}

.hp-video__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  max-width: var(--so-w-sm);
  margin-inline: auto;
}

.hp-video__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-2xl);
}

.hp-video__media img { display: block; width: 100%; }

.hp-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: auto;
  border: none;
  border-radius: 50%;
  background: var(--so-purple);
  cursor: pointer;
}

.hp-video__play span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 3px solid #fff;
  border-radius: 50%;
}

/* Optically centre the triangle inside the ring — a play glyph's visual centre
   sits left of its bounding box. */
.hp-video__play svg { transform: translateX(2px); }

.hp-video__logo { height: 40px; margin-bottom: 16px; }

.hp-video__score {
  color: var(--ink-800);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.3;
}

.hp-video__count {
  margin-bottom: 12px;
  color: var(--ink-500);
  font-size: var(--text-base);
}

.hp-video__stars {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
}

.hp-video__lead {
  margin: 0 0 22px;
  color: var(--so-ink-alt);
  font-size: var(--text-lg);
  line-height: 1.5;
}

.hp-stars {
  color: var(--so-star);
  font-size: var(--text-xl);
  letter-spacing: 2px;
}

.hp-stars--sm { font-size: var(--text-md); }
/* Inside a phone mock-up — artwork scale, not the reading scale. */
.hp-stars--mock { font-size: 10px; letter-spacing: .5px; }  /* artwork: mock-up UI, not page text */

@media (min-width: 900px) {
  .hp-video__grid { grid-template-columns: 1.4fr 1fr; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding-inline: 32px;
  border-radius: var(--r-3xl);
  background: var(--so-grad-btn);
  color: #fff;
  font-weight:500;font-size:var(--text-base);font-family:var(--font-body);line-height:normal;
  text-decoration: none;
}

.hp-btn:hover { color: #fff; text-decoration: none; }

.hp-btn--outline {
  background: none;
  border: 1px solid var(--so-purple);
  color: var(--so-purple);
}

.hp-btn--outline:hover { color: var(--so-purple-hover); border-color: var(--so-purple-hover); }

/* ==========================================================================
   4. Best eSIM deals
   ========================================================================== */

/* Fades the tint out downward so the next white band joins without a seam. */
.hp-deals {
  padding: 64px var(--so-gutter) 76px;
  background: linear-gradient(180deg, var(--tint-1) 0%, #fbfafe 68%, #fff 100%);
}

.hp-deals__inner { max-width: var(--so-w-xl); margin-inline: auto; }

.hp-deals__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.hp-deal {
  display: flex;
  flex-direction: column;
  padding: 14px 20px 20px;
  background: var(--so-surface);
  border-radius: var(--r-3xl);
  box-shadow: var(--so-shadow-deal);
}

.hp-deal__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--line-hair);
}

.hp-deal__id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.hp-deal__name {
  color: var(--ink-700);
  font-size: var(--text-xl);
  font-weight: 500;
  white-space: nowrap;
}

.hp-deal__kind {
  flex-shrink: 0;
  color: var(--ink-400);
  font-weight:400;font-size:var(--text-xs);font-family:var(--font-body);line-height:normal;
}

.hp-deal__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}

.hp-deal__from {
  margin-bottom: 2px;
  color: var(--so-ink-meta);
  font-size: var(--text-sm);
}

.hp-deal__amount {
  color: var(--so-purple);
  font-size: var(--text-h2);
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 1.25;
}

.hp-deal__feats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.hp-deal__feats li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-700);
  font-size: var(--text-sm);
}

.hp-deal__feats i { color: var(--so-ink-faint); font-size: var(--text-sm); }

/* margin-top:auto pins the CTA to the card floor so a longer name above never
   leaves the buttons on a ragged baseline across the row. */
.hp-deal .hp-btn { margin-top: auto; height: 50px; border-radius: var(--r-3xl); font-weight: 600; }

@media (min-width: 640px) { .hp-deals__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .hp-deals__grid { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   5. Easy to get — three phone mockups
   ========================================================================== */

.hp-get {
  padding: 72px var(--so-gutter) 80px;
  background: var(--so-surface);
}

.hp-get__inner { max-width: var(--so-w-lg); margin-inline: auto; }

.hp-get__grid {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 26px;
}

.hp-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 300px;
  padding-top: 34px;
}

/* Oversized tint numeral behind the phone. Non-selectable so a drag-select
   across the section doesn't pick up "123". */
.hp-step__num {
  position: absolute;
  top: 0;
  left: -6px;
  z-index: 0;
  color: var(--so-chip);
  font-weight:700;font-size:var(--text-h1);font-family:var(--font-body);line-height:normal;
  line-height: 0.78;
  pointer-events: none;
  user-select: none;
}

.hp-phone {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 252px;
  min-height: 400px;
  padding: 22px 16px 26px;
  background: var(--so-surface);
  border-radius: var(--so-radius-lg);
  box-shadow: var(--so-shadow-phone);
}

.hp-phone__title {
  margin-bottom: 18px;
  color: var(--ink-800);
  font-weight:600;font-size:var(--text-base);font-family:var(--font-body);line-height:normal;
  line-height: 1.35;
  text-align: center;
}

/* The home-indicator pill at the foot of the mock screen. */
.hp-phone__bar {
  position: absolute;
  left: 50%;
  bottom: 11px;
  width: 74px;
  height: 3.5px;
  border-radius: var(--r-xs);
  background: #e8e5f0;
  transform: translateX(-50%);
}

.hp-step__caption {
  max-width: 270px;
  margin: 22px 0 0;
  color: var(--so-ink-body);
  font-size: var(--text-base);
  line-height: 1.55;
  text-align: center;
}

.hp-step__caption strong { color: var(--so-purple); font-weight: 600; }

/* --- mock: destination list --- */
.hp-mock-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-inline: 4px;
}

.hp-mock-list__row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
}

.hp-mock-list__row.is-on { background: #f1eff7; }

.hp-mock-list__row span { color: var(--ink-700); font-size: var(--text-xs); }

/* --- mock: plan card --- */
.hp-mock-plan {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  padding-inline: 4px;
}

.hp-mock-plan__logo { flex-shrink: 0; width: 34px; height: 34px; object-fit: contain; }
.hp-mock-plan__body { flex: 1; min-width: 0; }

.hp-mock-plan__name {
  color: var(--so-ink-strong);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.25;
}

.hp-mock-plan__op { color: var(--so-ink-meta); font-size: 10.5px; }  /* artwork: mock-up UI, not page text */
.hp-mock-plan__prices { flex-shrink: 0; text-align: right; }
.hp-mock-plan__now { color: var(--so-purple); font-size: var(--text-sm); font-weight: 600; }

.hp-mock-plan__was {
  color: var(--so-strike);
  font-size: 10.5px;  /* artwork: mock-up UI, not page text */
  text-decoration: line-through;
}

.hp-mock-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 30px;
  margin: 0 4px 10px;
  border-radius: var(--r-lg);
  background: var(--so-grad-btn);
  color: #fff;
  font-weight:600;font-size:var(--text-2xs);font-family:var(--font-body);line-height:normal;
}

.hp-mock-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 9px;
}

.hp-mock-meta span:first-child { color: var(--ink-400); font-size: 9.5px; }  /* artwork: mock-up UI, not page text */

.hp-mock-specs { padding-inline: 4px; }

.hp-mock-specs__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid #f2f0f8;
}

.hp-mock-specs__row:last-child { border-bottom: none; }
.hp-mock-specs__row dt { color: var(--ink-500); font-size: var(--text-2xs); }
.hp-mock-specs__row dd { margin: 0; color: var(--ink-700); font-size: var(--text-2xs); font-weight: 500; }

/* --- mock: QR --- */
.hp-mock-qr { display: flex; justify-content: center; padding: 14px 0 16px; }
.hp-mock-qr img { width: 130px; height: 130px; }
.hp-mock-qr__link { text-align: center; }
.hp-mock-qr__link span { color: var(--so-purple); font-size: var(--text-xs); text-decoration: underline; }

@media (min-width: 760px) { .hp-get__grid { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   6. Easy to use — stepper driving a phone screen
   ========================================================================== */

.hp-use {
  padding: 80px var(--so-gutter);
  background: var(--so-surface);
}

.hp-use__inner { max-width: var(--so-w-lg); margin-inline: auto; }

.hp-use__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}

.hp-use__device { display: flex; justify-content: center; }

/* Hardware shell: dark bezel, notch, white screen. */
.hp-device {
  position: relative;
  flex-shrink: 0;
  width: 290px;
  height: 576px;
  padding: 11px;
  border-radius: 44px;
  background: #1b1636;
  box-shadow: var(--so-shadow-device);
}

.hp-device__notch {
  position: absolute;
  top: 20px;
  left: 50%;
  z-index: 3;
  width: 112px;
  height: 24px;
  border-radius: var(--r-lg);
  background: #1b1636;
  transform: translateX(-50%);
}

.hp-device__screen {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 26px;
  overflow: hidden;
  border-radius: var(--r-3xl);
  background: #fff;
}

.hp-device__screen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.3s;
}

.hp-use__steps { display: flex; flex-direction: column; }

.hp-use__step {
  display: flex;
  gap: 20px;
  align-items: stretch;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
}

/* The rail: a dot per step with a fill line running between them. */
.hp-use__rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  flex-shrink: 0;
  width: 14px;
}

.hp-use__dot {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e2ddf0;
  transition: background 0.25s, transform 0.25s;
}

.hp-use__step.is-on .hp-use__dot,
.hp-use__step.is-done .hp-use__dot { background: var(--so-purple); }
.hp-use__step.is-on .hp-use__dot { transform: scale(1.15); }

.hp-use__track {
  display: block;
  flex: 1;
  width: 3px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: var(--r-xs);
  background: #eeebf6;
}

.hp-use__fill {
  display: block;
  width: 100%;
  height: 0;
  border-radius: var(--r-xs);
  background: linear-gradient(180deg, #8357f9, #5195ff);
  transition: height 0.45s ease;
}

/* Partial fill marks the step you're on; full marks the ones behind you. */
.hp-use__step.is-on .hp-use__fill { height: 42%; }
.hp-use__step.is-done .hp-use__fill { height: 100%; }

.hp-use__body { flex: 1; padding-bottom: 34px; text-align: left; }

.hp-use__n {
  display: block;
  margin-bottom: 5px;
  color: var(--so-ink-faint);
  font-size: var(--text-xs);
}

.hp-use__title {
  display: block;
  margin-bottom: 8px;
  color: var(--ink-500);
  font-weight:600;font-size:var(--text-lg);font-family:var(--font-body);line-height:normal;
  transition: color 0.25s;
}

.hp-use__step.is-on .hp-use__title { color: var(--so-purple); }

.hp-use__desc {
  display: block;
  max-width: 300px;
  color: var(--ink-600);
  font-size: var(--text-base);
  line-height: 1.55;
}

@media (min-width: 900px) { .hp-use__grid { grid-template-columns: 380px 1fr; } }

/* ==========================================================================
   7. App promo
   ========================================================================== */

.hp-app { padding: 0 var(--so-gutter) 80px; background: var(--so-surface); }

.hp-app__card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
  max-width: var(--so-w-xl);
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--so-border-soft);
  border-radius: var(--so-radius-xl);
  background: var(--so-surface);
  box-shadow: 0 8px 28px 0 rgba(94, 58, 190, 0.06);
}

.hp-app__copy { padding: 64px 20px 64px 60px; }

.hp-app__badge {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: var(--r-2xl);
  background: var(--tint-2);
  color: var(--so-purple);
  font-size: var(--text-xs);
  font-weight: 600;
}

.hp-app__copy h2 {
  margin: 0 0 16px;
  color: var(--ink-900);
  font-size: var(--text-h2);
  font-weight: 500;
  letter-spacing: -0.5px;
  line-height: 1.15;
}

.hp-app__lead {
  max-width: 440px;
  margin: 0 0 28px;
  color: var(--ink-500);
  font-size: var(--text-base);
  line-height: 1.7;
}

.hp-app__stores { display: flex; gap: 14px; }
.hp-app__stores img { height: 48px; width: auto; }

/* Bottom-aligned so the handsets read as rising out of the card's lower edge. */
.hp-app__media { align-self: flex-end; padding-top: 40px; text-align: center; }

.hp-app__media img {
  display: block;
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
}

@media (max-width: 899px) {
  .hp-app__copy { padding: 48px 24px 24px; }
}

@media (min-width: 900px) {
  .hp-app__card { grid-template-columns: 1.1fr 1fr; }
}

/* ==========================================================================
   8. In the news
   ========================================================================== */

.hp-news { padding: 24px var(--so-gutter) 72px; background: var(--so-surface); }

.hp-news__panel {
  max-width: var(--so-w-xl);
  margin-inline: auto;
  padding: 60px 56px 64px;
  border-radius: var(--so-radius-panel);
  background: var(--so-tint);
}

.hp-news__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.hp-news__item { display: flex; flex-direction: column; }

/* Fixed-height logo slot keeps the quotes below on a shared baseline no matter
   how tall each masthead is. */
.hp-news__logo {
  display: flex;
  align-items: center;
  height: 46px;
  margin-bottom: 22px;
}

.hp-news__logo img {
  max-height: 38px;
  max-width: 165px;
  object-fit: contain;
  object-position: left center;
}

.hp-news__quote {
  flex: 1;
  margin: 0 0 22px;
  color: var(--ink-700);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.hp-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--so-purple);
  font-weight:500;font-size:var(--text-base);font-family:var(--font-body);line-height:normal;
  text-decoration: none;
}

.hp-link:hover { color: var(--so-purple-hover); }

@media (max-width: 639px) { .hp-news__panel { padding: 40px 24px 44px; } }
@media (min-width: 640px) { .hp-news__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .hp-news__grid { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   9. Key benefits — two columns flanking an app mockup
   ========================================================================== */

.hp-ben { padding: 80px var(--so-gutter); background: var(--so-surface); }
.hp-ben__inner { max-width: var(--so-w-lg); margin-inline: auto; }

.hp-ben__grid {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 34px;
  align-items: center;
}

.hp-ben__col { display: flex; flex-direction: column; gap: 46px; }

.hp-ben__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.hp-ben__item i {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1.5px solid #c9b6fa;
  border-radius: 50%;
  color: var(--so-purple);
  font-size: var(--text-xl);
}

.hp-ben__item h3 {
  margin: 0;
  color: var(--ink-700);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.45;
}

/* --- the app mockup --- */
.hp-appmock {
  position: relative;
  flex-shrink: 0;
  width: 262px;
  height: 520px;
  padding: 9px;
  border-radius: 40px;
  background: #2a2438;
  box-shadow: var(--so-shadow-device);
}

.hp-appmock__notch {
  position: absolute;
  top: 17px;
  left: 50%;
  z-index: 3;
  width: 98px;
  height: 20px;
  border-radius: var(--r-md);
  background: #2a2438;
  transform: translateX(-50%);
}

.hp-appmock__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--r-3xl);
  background: #fff;
}

.hp-appmock__bar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 7px;
  padding: 13px 14px 9px;
}

.hp-appmock__bar img { width: 14px; height: 14px; }
.hp-appmock__bar b { font: 600 9.5px var(--font-body); color: var(--ink-700); }

.hp-appmock__bar span {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
  color: var(--so-ink-faint);
  font-size: var(--text-2xs);
}

.hp-appmock__hero {
  padding: 22px 18px 26px;
  background: linear-gradient(160deg, #8357f9, #5195ff);
  color: #fff;
  font-weight:600;font-size:var(--text-sm);font-family:var(--font-body);line-height:normal;
  line-height: 1.4;
  text-align: center;
}

/* Pulled up so the controls overlap the gradient's lower edge. */
.hp-appmock__controls { margin-top: -14px; padding-inline: 14px; }

.hp-appmock__tabs {
  display: flex;
  margin-bottom: 9px;
  padding: 3px;
  border-radius: var(--r-xl);
  background: #fff;
  box-shadow: 0 5px 14px rgba(40, 20, 90, 0.14);
}

.hp-appmock__tabs span {
  flex: 1;
  padding: 6px 0;
  border-radius: var(--r-md);
  font: 500 9.5px var(--font-body);
  color: var(--so-ink-faint);
  text-align: center;
}

.hp-appmock__tabs .is-on { background: var(--so-purple); color: #fff; font-weight: 600; }

.hp-appmock__search {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: 0 5px 14px rgba(40, 20, 90, 0.1);
  font: 400 9px var(--font-body);
  color: var(--so-ink-faint);
}

.hp-appmock__search i { color: var(--so-purple); font-size: 10px; }  /* artwork: mock-up UI, not page text */

.hp-appmock__logos { display: flex; gap: 7px; padding: 16px 14px 0; }

.hp-appmock__logos span {
  flex: 1;
  height: 38px;
  border-radius: var(--r-sm);
  background: #fff no-repeat center / 56%;
  box-shadow: 0 3px 10px rgba(40, 20, 90, 0.09);
}

.hp-appmock__toast {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: auto 14px 14px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: #fbe9f0;
  font: 500 8.5px var(--font-body);
  color: var(--ink-500);
}

.hp-appmock__toast img { width: 12px; height: 12px; }

.hp-appmock__fab {
  position: absolute;
  right: 14px;
  bottom: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--so-purple);
  box-shadow: 0 5px 14px rgba(131, 87, 249, 0.4);
  color: #fff;
  font-size: var(--text-xs);
}

@media (min-width: 900px) {
  .hp-ben__grid { grid-template-columns: 1fr 262px 1fr; gap: 30px; }
}

/* ==========================================================================
   10. All over the world — regions + A–Z countries
   ========================================================================== */

.hp-dest { padding: 0 var(--so-gutter) 80px; background: var(--so-surface); }
.hp-dest__inner { max-width: var(--so-w-xl); margin-inline: auto; }

.hp-dest__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items: start;
}

/* A grid track defaults to min-width:auto, so the countries tray would size to
   its full 27-column width and never scroll (and would push the page wide).
   Let the track shrink so the tray's own overflow takes over. */
.hp-dest__grid > * {
  min-width: 0;
}

.hp-dest__label {
  margin-bottom: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--so-hairline);
  color: var(--so-ink-meta);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.hp-dest__list { display: flex; flex-direction: column; }

.hp-dest__item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 9px 8px;
  border-radius: var(--so-radius-sm);
  color: var(--so-ink-body);
  font-size: var(--text-base);
  text-decoration: none;
}

.hp-dest__item:hover { background: var(--so-tint); color: var(--so-ink-body); text-decoration: none; }

.hp-dest__item .fi {
  flex-shrink: 0;
  width: 22px;
  height: 16px;
  border-radius: var(--r-xs);
}

/* Country flags: 3:2, rounded. */
.hp-dest__flag {
  flex-shrink: 0;
  width: 22px;
  height: 16px;
  border-radius: var(--r-xs);
  object-fit: cover;
}

/* Region marks are the continent silhouettes from flags.css — mask shapes, so
   they take a colour rather than shipping one. The artwork is square (38x38);
   giving it a 3:2 box would crop the continent, so regions get their own
   square, uncropped sizing and the brand purple. */
.hp-dest__flag--region {
  --fi-region-color: var(--so-purple);
  width: 20px;
  height: 20px;
  border-radius: 0;
}

/* Countries side reuses the destinations content block's widget wholesale —
   .dest-picker__letters + .home-countries__grid + .dest-card. Only two things
   differ here: it shares its row with the regions column instead of spanning
   the grid, and it wears the new palette. Overrides are scoped to .hp-dest so
   the content block's own rendering is untouched. */
.hp-dest__countries {
  /* A grid track defaults to min-width:auto, so the tray would size to its full
     width and never scroll (and would push the page wide). Let it shrink so the
     tray's own overflow takes over. */
  min-width: 0;
}

/* A–Z chips exactly as the design draws them: 30px rounded squares on the pale
   tint, the active one solid purple. Wraps rather than spreading edge-to-edge,
   so the row keeps its rhythm at any container width. */
.hp-dest .dest-picker__letters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 5px;
  width: 100%;
  margin-bottom: 22px;
  /* The base widget wraps its letters in a bordered pill; the design draws the
     chips bare, so drop the container's frame entirely. */
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.hp-dest .dest-picker__letters button {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--so-tint-2);
  color: var(--ink-500);
  font-weight:600;font-size:var(--text-xs);font-family:var(--font-body);line-height:normal;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.hp-dest .dest-picker__letters button:hover:not(:disabled) {
  background: var(--so-chip);
  color: var(--so-purple);
}

.hp-dest .dest-picker__letters button:disabled {
  opacity: 0.45;
  cursor: default;
}

/* az-filter.js marks the letter it scrolled to. */
.hp-dest .dest-picker__letters button.is-active {
  background: var(--so-purple);
  color: #fff;
}


/* Five rows deep, flowing into new columns and scrolling sideways. Narrower
   cards than the content block's because this tray shares the row. */
.hp-dest .home-countries__grid {
  /* Fixed row height, not auto: an auto row takes the height of its TALLEST
     card across every column, so one wrapping name ("Bosnia and Herzegovina")
     inflated the whole row and the cards stopped matching. Fixed rows keep every
     card identical; long names clamp to two lines inside the card instead. */
  grid-template-rows: repeat(5, 56px);
  /* Fixed px, not rem: the root font-size steps at >=1510px, so a rem column
     was narrower on small screens and wider on large ones — which changed how
     many names wrapped. A fixed column keeps wrapping identical everywhere. */
  grid-auto-columns: 232px;
  gap: 10px;
  padding: 3px 12px 16px;
  text-align: left;
  scrollbar-color: var(--so-purple) transparent;
}

.hp-dest .home-countries__grid::-webkit-scrollbar-thumb { background: var(--so-purple); }

.hp-dest .dest-card {
  height: 100%;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--so-border);
  border-radius: var(--r-md);
  box-shadow: var(--so-shadow-card);
  color: var(--so-ink-body);
}

.hp-dest .dest-card:hover {
  border-color: var(--so-purple);
  box-shadow: 0 10px 22px rgba(70, 50, 140, 0.12);
}

.hp-dest .dest-card__flag { width: 22px; height: 16px; border-radius: var(--r-xs); }

/* Matches the regions list beside it exactly: same size, weight and colour, so
   the two columns read as one list. The selector carries the tray as well,
   because the legacy `.home-countries__grid .dest-card__name` rule further down
   has equal specificity and would otherwise win on order — and it sizes in rem,
   which scales with the root step at >=1510px and made these cards drift LARGER
   than the fixed-size regions on wide screens. */
.hp-dest .home-countries__grid .dest-card__name {
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--so-ink-body);
  line-height: 1.2;
  /* Two lines max so a long name stays inside the fixed row rather than
     resizing it; anything longer is ellipsised. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hp-dest .dest-card__chevron { color: var(--so-purple); font-size: var(--text-sm); }

.hp-dest__cta { margin-top: 26px; text-align: center; }
.hp-dest__cta .hp-btn { height: 48px; border-radius: var(--r-3xl); }

@media (min-width: 1000px) {
  .hp-dest__grid { grid-template-columns: 210px 1fr; gap: 56px; }
}

/* ==========================================================================
   11. Reviews
   ========================================================================== */

.hp-reviews { padding: 72px var(--so-gutter); background: var(--so-tint); }
.hp-reviews__inner { max-width: var(--so-w-lg); margin-inline: auto; }

.hp-reviews__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.hp-review {
  padding: 28px 26px;
  border-radius: var(--so-radius-md);
  background: var(--so-surface);
  box-shadow: var(--so-shadow-card);
}

.hp-review__text {
  margin: 0 0 18px;
  color: var(--so-ink-alt);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.hp-review__by { display: flex; align-items: center; gap: 10px; }

.hp-review__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--so-avatar);
  color: var(--so-purple);
  font-weight:700;font-size:var(--text-sm);font-family:var(--font-body);line-height:normal;
}

.hp-review__name { color: var(--so-ink); font-size: var(--text-sm); font-weight: 600; }

.hp-review .hp-stars { display: block; margin-bottom: 12px; }

@media (min-width: 640px) { .hp-reviews__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .hp-reviews__grid { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   12. Selected posts
   ========================================================================== */

.hp-blog { padding: 72px var(--so-gutter); background: var(--so-surface); }
.hp-blog__inner { max-width: var(--so-w-lg); margin-inline: auto; }

.hp-blog__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.hp-post {
  overflow: hidden;
  border: 1px solid var(--so-border);
  border-radius: var(--so-radius-md);
  background: var(--so-surface);
  box-shadow: var(--so-shadow-card);
  color: inherit;
  text-decoration: none;
}

.hp-post:hover { color: inherit; text-decoration: none; }

.hp-post__cover {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.hp-post__body { padding: 22px 24px; }

.hp-post__body h3 {
  margin: 0 0 8px;
  color: var(--so-ink-strong);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.35;
}

.hp-post__date { color: var(--so-meta); font-size: var(--text-xs); }

.hp-post__excerpt {
  margin: 10px 0 0;
  color: var(--so-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.hp-blog__cta { margin-top: 40px; text-align: center; }
.hp-blog__cta .hp-btn { height: 50px; padding-inline: 40px; font-size: var(--text-md); }

@media (min-width: 640px) { .hp-blog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .hp-blog__grid { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   Legacy — partner skins + the DestCard block
   ========================================================================== */

/* --- Destination cards ------------------------------------------------------ */
.home-destinations__tabs {
  text-align: center;
  margin-bottom: var(--space-5);
}

/* Clip the tab-panel slide-in so translateX never spills past the container
   (no page h-scroll). `clip` keeps overflow-y visible, so card shadows / the
   anchor glow aren't cut; js/tabs.js briefly sets overflow:clip while easing
   the panel height. */
.home-destinations__panels {
  overflow-x: clip;
}

/* --- Countries tab: A-Z bar + waterfall column tray ------------------------- */
.home-countries {
  margin-bottom: var(--space-5);
  text-align: center;
}

/* Full-width A–Z bar: letters spread evenly across the whole row. */
.home-countries .dest-picker__letters {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: var(--space-4);
}

/* Country cards flow down 5 rows then into the next column (column-major);
   the grid scrolls horizontally to reveal more columns. */
.home-countries__grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
  grid-auto-columns: 17.5rem;
  gap: var(--space-2);
  overflow-x: auto;
  overflow-y: hidden;
  /* Left/right gutter so the first column — and any anchor-scrolled letter, which
     js/az-filter.js lands at this same inset — sits off the edge, not flush. The
     larger bottom padding gives the slim scrollbar breathing space below the cards. */
  padding: 3px var(--space-4) var(--space-5);
  /* Theme-standard scrollbar: slim, navy thumb on a transparent track. */
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) transparent;
}

.home-countries__grid::-webkit-scrollbar {
  height: 4px;
}

.home-countries__grid::-webkit-scrollbar-track {
  background: transparent;
}

.home-countries__grid::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: var(--radius-pill);
}

/* Smaller, left-aligned country card. Scoped under the grid so it beats the
   base .dest-card (same specificity, defined later in the file) and overrides
   the centred text inherited from .home-countries. */
.home-countries__grid .dest-card {
  gap: var(--space-2);
  padding: 10px 14px;
  text-align: left;
}

.home-countries__grid .dest-card__flag {
  width: 30px;
  height: 22px;
}

.home-countries__grid .dest-card__name {
  font-size: 0.875rem;
  line-height: 1.2;
}

/* --- Install steps ------------------------------------------------------------ */
/* The dashed wave spans the full viewport width: paint it on the full-bleed
   section rather than the container-width steps grid. */
.home-install {
  background-color: var(--color-bg-alt);
  background-image: url("../../img/blue.wave.line.1.png");
  background-repeat: no-repeat;
  background-position: center 66%;
  background-size: 100% auto;
}

.home-install__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.home-install__steps img {
  height: 380px;
  width: auto;
  margin: 0 auto var(--space-4);
  object-fit: contain;
}

.home-install__steps h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.home-install__steps p {
  font-size: var(--text-body);
  max-width: 280px;
  margin-inline: auto;
}

/* --- App promo ---------------------------------------------------------------------- */
.home-app__layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-8);
  align-items: center;
}

.home-app__copy h2 {
  margin-bottom: var(--space-2);
}

.home-app__lead {
  margin-bottom: var(--space-4);
}

.home-app__copy h3 {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.home-app__badges-title {
  font-weight: 600;
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--text-body);
}

.home-app__badges {
  display: flex;
  gap: var(--space-3);
}

.home-app__badges img {
  height: 40px;
  width: auto;
}

.home-app__media img {
  max-width: 480px;
  margin-inline: auto;
}


.home-hero {
  position: relative;
  /* Above the USP strip below it so the search suggestions dropdown (which
     overhangs into the strip) isn't painted over by the strip's icons. Stays
     under the sticky header (z-index 50). */
  z-index: 2;
  background-size: cover;
  background-position: center;
  color: #fff;
  padding-top: 96px;
}

.home-hero__inner {
  /* Left-aligned marquee hugging the container's left edge (matches the live
     site). The .container frame (1170px) supplies the width + centering; the
     text block stays left within it. */
  text-align: left;
}

.home-hero__title {
  color: #fff;
  font-size: 3rem; /* 48px — home marquee, larger than section titles */
  line-height: 1.2;
  max-width: 620px; /* wrap to two lines: "Always connected," / "never limited." */
  margin-bottom: var(--space-3);
}

.home-hero__sub {
  font-size: var(--text-body);
  margin: 0;
  max-width: 460px;
}

/* search box straddles the hero's bottom edge — narrower + taller pill to
   match the live reference, kept centred within the container. */
.home-hero__search {
  max-width: 620px;
  transform: translateY(50%);
  margin-top: var(--space-5);
}

.home-hero__search .dest-search__input {
  padding-block: 19px;
}

/* Partner home hero — same flat band as the sales-page hero (the .band-gradient
   class supplies the ellipse background + navy-on-band colour), CENTERED with
   the sub-heading ABOVE the title (live partner layout). These rules follow the
   base .home-hero* so they win at equal specificity; the background size/
   position are re-pointed at the band vars because base .home-hero forces a
   full-bleed photo `cover`/`center` that would otherwise stomp the band. */
.home-hero--partner {
  color: var(--color-on-band);
  padding-top: 64px;
  text-align: center;
  background-size: var(--band-bg-size, auto);
  background-position: var(--band-bg-position, center right);
  background-repeat: var(--band-bg-repeat, no-repeat);
  /* .band-gradient sets overflow:hidden to contain its ellipse; that also clips
     the search box, which straddles the hero's bottom edge (base .home-hero__search
     translateY(50%)) and whose suggestions dropdown overhangs into the USP strip.
     Re-open overflow so the search + dropdown behave exactly as on main's home —
     the band background still clips to its own box, so nothing decorative spills. */
  overflow: visible;
}

.home-hero--partner .home-hero__inner {
  text-align: center;
}

.home-hero--partner .home-hero__sub {
  max-width: 640px;
  margin: 0 auto var(--space-4);
  font-size: 1.0625rem;
  line-height: 1.4;
  opacity: 0.95;
}

.home-hero--partner .home-hero__title {
  color: var(--color-on-band);
  max-width: none;
  margin: 0 auto;
}

.home-hero--partner .home-hero__search {
  margin-inline: auto;
}

/* Solution grid — partner homes only (main's home uses .hp-ben instead). */
.home-solution__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  max-width: var(--container-lg);
  margin-inline: auto;
  padding: var(--space-6);
}

.home-solution__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5) var(--space-7);
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-solution__items li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.home-solution__items i {
  font-size: 1.5rem;
  color: var(--color-text);
  flex: none;
  margin-top: 4px;
}

.home-solution__items h3 {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.home-solution__items p {
  font-size: var(--text-body);
  margin: 0;
}

/* USP strip sits close under the search, no divider line. */
.home__strip {
  margin-top: var(--space-3);
}

/* Partner home: the hero search straddles the flat band edge, so the same
   space-3 leaves the USP strip reading too tight against it — drop it lower for
   clear separation. */
.home-hero--partner + .home__strip {
  margin-top: var(--space-6);
}

.dest-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
}

/* Regions grid — slightly tighter than the Popular grid. */
.dest-cards--tight {
  gap: var(--space-3);
}

.dest-cards--tray {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-3);
}

.dest-cards--tray > li {
  flex: 0 0 335px;
  scroll-snap-align: start;
}

.dest-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.dest-card:hover {
  text-decoration: none;
  border-color: var(--color-action);
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(37, 70, 95, 0.14);
}

.dest-card__flag {
  width: 34px;
  height: 25px;
  border-radius: var(--r-xs);
}

.dest-card__text {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.dest-card__name {
  font-weight: 600;
  font-size: var(--text-body);
}

.dest-card__from {
  font-size: 0.75rem;
  color: var(--color-text-soft);
}

.dest-card__from .price {
  font-weight: 500;
  color: var(--color-text);
}

.dest-card__chevron {
  color: var(--color-action);
}

.home-destinations__cta {
  text-align: center;
  margin: 0;
}

@media (max-width: 1024px) {
  .dest-cards,
  .home-install__steps,
  .home-solution__items,
  .home-app__layout {
    grid-template-columns: 1fr;
  }
}