/* ==========================================================================
   SLYNUMBER /data — Figma "SLYNUMBER Website", page "eSIM" (node 1428-985)
   Desktop frame 1520:1093 (1440px wide, 1209px content column); the
   "Why we're better" slides continue in side frame 1521:1690.
   Linked from the CMS document's <head> AFTER homepage.css, whose shared
   primitives this page reuses as-is: .hp-h2, .hp-lead, .hp-gradient,
   .hp-ix-head, .hp-ix-steps-*, .hp-ix-global-*, .hp-ix-rule-*.
   Page-only classes are prefixed dt- and scoped under .dt-page (the <main>),
   so they cannot leak into the shared header/footer partials — except
   body.dt-body: Figma paints the whole page, footer included, #ebeef4, and
   the hero's notch tabs must be exactly the page colour.
   Source copies of the four documents: cms-content/Esim Page/data-<locale>.html
   ========================================================================== */

body.dt-body { background-color: #ebeef4; }

.dt-page {
  --dt-ink: #000;
  --dt-muted: #747785;
  --dt-paragraph: #6f7180;
  --dt-stroke: #b7b7b7;
  --dt-bg: #ebeef4;
  --dt-accent: #7045f0;
  --dt-accent-light: #efeaff;
  display: flex;
  flex-direction: column;
  gap: 40px; /* Figma frame: 40px between sections */
  background: var(--dt-bg);
  color: var(--dt-ink);
  font-family: Montserrat, 'Montserrat Fallback', sans-serif;
  overflow: hidden;
}

/* 1209px content + 24px gutters, like /features */
.dt-page .dt-container {
  width: 100%;
  max-width: 1257px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Scroll reveal (same motion as the homepage). Only hidden when JS runs
   (html.w-mod-js comes from the inline head script). */
.dt-page .dt-reveal { transition: opacity .7s ease, transform .7s ease; }
html.w-mod-js .dt-page .dt-reveal:not(.is-visible) { opacity: 0; transform: translateY(24px); }
@media (prefers-reduced-motion: reduce) {
  .dt-page .dt-reveal { transition: none; }
  html.w-mod-js .dt-page .dt-reveal:not(.is-visible) { opacity: 1; transform: none; }
}

/* Screen-reader-only text */
.dt-page .dt-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   HERO — photo with two page-coloured notch tabs, glass price card pulled
   up over it, copy + destination search on the right
   -------------------------------------------------------------------------- */
.dt-page .dt-hero { padding: 165px 0 34px; }

/* Tabs are sized in container units so they keep the Figma proportions on
   every width down to tablets (1cqw = 1% of the photo's width) */
.dt-page .dt-hero-media {
  position: relative;
  aspect-ratio: 1209 / 394;
  border-radius: 40px;
  overflow: hidden;
  background: #4c9ccc;
  container-type: inline-size;
}
.dt-page .dt-hero-media picture,
.dt-page .dt-hero-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.dt-page .dt-hero-img { object-fit: cover; }

/* "GLOBAL eSIM" — Figma tab 533.75x100 flush left, 102px from the top */
.dt-page .dt-hero-title {
  position: absolute;
  left: 0;
  top: 25.888%;
  display: block;
  margin: 0;
  height: 100px;
  height: 8.271cqw;
  line-height: 100px;
  line-height: 8.271cqw;
  padding: 0 47px 0 45px;
  padding: 0 3.925cqw 0 3.747cqw;
  border-radius: 0 50px 50px 0;
  border-radius: 0 4.136cqw 4.136cqw 0;
  background: var(--dt-bg);
  font-size: 64px;
  font-size: 5.348cqw;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--dt-ink);
  white-space: nowrap;
}

/* "One eSIM that works worldwide." — Figma tab 491x75 flush right, 243px down */
.dt-page .dt-hero-tag {
  position: absolute;
  right: 0;
  top: 61.675%;
  display: block;
  margin: 0;
  height: 75px;
  height: 6.203cqw;
  line-height: 75px;
  line-height: 6.203cqw;
  padding: 0 30px 0 20px;
  padding: 0 2.481cqw 0 1.654cqw;
  border-radius: 38px 0 0 38px;
  border-radius: 3.102cqw 0 0 3.102cqw;
  background: var(--dt-bg);
  font-size: 28px;
  font-size: 2.303cqw;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--dt-ink);
  white-space: nowrap;
}

/* Bottom row: glass card (overlapping the photo by 91px) + copy/search */
.dt-page .dt-hero-bottom {
  display: grid;
  grid-template-columns: 486px minmax(0, 1fr);
  column-gap: 20px;
  align-items: start;
  padding-left: 29px;
}
.dt-page .dt-hero-card {
  position: relative;
  z-index: 2;
  margin-top: -91px;
  padding: 36px 38px 29px;
  background: rgba(255, 255, 255, 0.7);
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 41px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.dt-page .dt-hero-card-title {
  margin: 0 0 12px;
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
  letter-spacing: -0.04em;
  color: var(--dt-ink);
  text-align: center;
}
.dt-page .dt-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 138px;
  padding: 20px 23px;
  border-radius: 23px;
  background: var(--dt-accent);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
  transition: transform .2s ease, box-shadow .2s ease;
}
.dt-page .dt-price:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); }
.dt-page .dt-price:focus { outline: none; }
.dt-page .dt-price:focus-visible { outline: 2px solid var(--dt-accent); outline-offset: 3px; }
.dt-page .dt-price-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.dt-page .dt-price-action {
  font-size: 26px;
  font-weight: 700;
  line-height: 37.5px;
  letter-spacing: -0.04em;
}
.dt-page .dt-price-sub {
  font-size: 18px;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: -0.04em;
}
.dt-page .dt-price-row { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.dt-page .dt-price-plan {
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  letter-spacing: -0.04em;
  text-align: right;
  opacity: 0.7;
}
.dt-page .dt-price-amount {
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.dt-page .dt-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-top: 23px;
}
.dt-page .dt-hero-lead {
  margin: 0;
  max-width: 673px;
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: -0.04em;
  color: var(--dt-ink);
}
.dt-page .dt-hero-lead strong {
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
  text-underline-position: from-font;
}

/* Destination search: a combobox over the Destinations country list
   (embedded as JSON); without JS the form opens the Destinations page */
.dt-page .dt-search { position: relative; width: 100%; max-width: 562px; margin: 0; }
.dt-page .dt-search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 12px;
  background: #fff;
  border: 0.5px solid var(--dt-stroke);
  border-radius: 42px;
  transition: box-shadow .2s ease;
}
.dt-page .dt-search-bar:focus-within { box-shadow: 0 0 0 2px var(--dt-accent); }
.dt-page .dt-search-icon { flex-shrink: 0; width: 24px; height: 24px; }
.dt-page .dt-search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: -0.04em;
  color: var(--dt-ink);
  -webkit-appearance: none;
  appearance: none;
}
.dt-page .dt-search-input::placeholder { color: var(--dt-paragraph); opacity: 1; }
.dt-page .dt-search-input:focus { outline: none; }
.dt-page .dt-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.dt-page .dt-search-btn {
  flex-shrink: 0;
  min-width: 140px;
  height: 45px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 47px;
  background: var(--dt-accent);
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: -0.04em;
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease;
}
.dt-page .dt-search-btn:hover { background: #5d33e0; }
.dt-page .dt-search-btn:focus { outline: none; }
.dt-page .dt-search-btn:focus-visible { outline: 2px solid var(--dt-accent); outline-offset: 3px; }

.dt-page .dt-search-pop {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  padding: 8px;
  background: #fff;
  border: 0.5px solid var(--dt-stroke);
  border-radius: 24px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14);
}
.dt-page .dt-search-pop[hidden] { display: none; }
.dt-page .dt-search-list {
  max-height: 324px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}
.dt-page .dt-search-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
}
.dt-page .dt-search-opt:hover,
.dt-page .dt-search-opt.is-active { background: var(--dt-accent-light); }
.dt-page .dt-search-opt[aria-disabled="true"] { cursor: default; }
.dt-page .dt-search-flag { flex-shrink: 0; width: 30px; height: 24px; }
.dt-page .dt-search-flag.is-blank { border-radius: 4px; background: var(--dt-bg); }
.dt-page .dt-search-name {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: -0.04em;
  color: var(--dt-ink);
}
.dt-page .dt-search-rate {
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.04em;
  color: var(--dt-paragraph);
  white-space: nowrap;
}
.dt-page .dt-search-empty {
  margin: 0;
  padding: 12px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.04em;
  color: var(--dt-paragraph);
  text-align: left;
}
.dt-page .dt-search-empty a { color: var(--dt-accent); font-weight: 600; }

/* --------------------------------------------------------------------------
   POPULAR DESTINATIONS — three live-priced country cards
   -------------------------------------------------------------------------- */
.dt-page .dt-popular { padding: 12px 0; text-align: center; }
.dt-page .dt-popular-title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 52px;
  letter-spacing: -0.04em;
  color: var(--dt-ink);
}
.dt-page .dt-dest-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 380px));
  justify-content: center;
  gap: 27px 28px;
  margin: 10px 0 0;
  padding: 20px 0 21px;
  list-style: none;
}
.dt-page .dt-dest-grid > li { margin: 0; padding: 0; list-style: none; }
.dt-page .dt-dest-card {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 132px;
  padding: 0 20px 0 10px;
  background: #fff;
  border-radius: 20px;
  color: var(--dt-ink);
  text-align: left;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.dt-page a.dt-dest-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); }
.dt-page a.dt-dest-card:focus { outline: none; }
.dt-page a.dt-dest-card:focus-visible { outline: 2px solid var(--dt-accent); outline-offset: 3px; }
.dt-page .dt-dest-flag {
  flex-shrink: 0;
  width: 94px;
  height: 66px;
  border-radius: 10px;
  object-fit: cover;
}
.dt-page .dt-dest-info { display: flex; flex-direction: column; gap: 0; min-width: 0; flex: 1; }
.dt-page .dt-dest-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
}
.dt-page .dt-dest-name {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: -0.04em;
}
.dt-page .dt-dest-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 15px;
  border-radius: 20px;
  background: var(--dt-accent);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: #fff;
  white-space: nowrap;
}
.dt-page .dt-dest-badge.is-price { background: #fbbc04; padding-left: 12px; }
.dt-page .dt-dest-badge img { display: block; flex-shrink: 0; }
.dt-page .dt-dest-rate {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.04em;
}
.dt-page .dt-btn-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  margin-top: 10px;
  padding: 0 30px;
  border-radius: 47px;
  background: #fff;
  font-size: 18px;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: -0.04em;
  color: var(--dt-ink);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.dt-page .dt-btn-light:hover { background: var(--dt-accent-light); color: var(--dt-accent); }
.dt-page .dt-btn-light:focus { outline: none; }
.dt-page .dt-btn-light:focus-visible { outline: 2px solid var(--dt-accent); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   BAND — "Your trip doesn't need unlimited data", over a soft cloud haze
   -------------------------------------------------------------------------- */
.dt-page .dt-band {
  padding: 32px 24px 38px;
  background: url("/images/data/band-haze.webp") center / 100% 100% no-repeat;
  text-align: center;
}
.dt-page .dt-band-title {
  max-width: 1033px;
  margin: 0 auto;
  font-size: 44px;
  font-weight: 700;
  line-height: 58px;
  letter-spacing: -0.04em;
  color: var(--dt-ink);
}
.dt-page .dt-band-body {
  max-width: 833px;
  margin: 24px auto 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 22px;
  color: #484848;
}

/* --------------------------------------------------------------------------
   WHY WE'RE BETTER — auto-rotating carousel (4s), same mechanics as /features
   -------------------------------------------------------------------------- */
/* Figma clips the last 10px of this frame, so no bottom padding */
.dt-page .dt-why { padding: 10px 0 0; }
.dt-page .dt-section-head { margin: 0 0 35px; }
/* clip (not hidden): a hidden box can still be scrolled by text-fragment links
   or scrollIntoView, which would leave the carousel offset */
.dt-page .dt-slider-viewport { overflow: hidden; overflow: clip; }
html:not(.w-mod-js) .dt-page .dt-slider-viewport { overflow-x: auto; }
.dt-page .dt-slider-track {
  display: flex;
  gap: 35px;
  will-change: transform;
  touch-action: pan-y;
}
.dt-page .dt-slide {
  position: relative;
  flex: 0 0 368px;
  height: 591px;
  margin: 0;
  padding: 33px 25px;
  border: 0.2px solid #000;
  border-radius: 30px;
  background: #fff;
  overflow: hidden;
}
.dt-page .dt-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dt-page .dt-slide-title {
  position: relative;
  margin: 0;
  max-width: 294px;
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.04em;
  color: #fff;
}
.dt-page .dt-slide.is-ink .dt-slide-title { color: var(--dt-ink); }
.dt-page .dt-slider-buttons {
  display: flex;
  justify-content: center;
  gap: 19px;
  padding: 55px 49px 20px;
}
.dt-page .dt-slider-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: transform .2s ease;
}
.dt-page .dt-slider-btn:hover { transform: scale(1.06); }
.dt-page .dt-slider-btn:focus { outline: none; }
.dt-page .dt-slider-btn:focus-visible { outline: 2px solid var(--dt-accent); outline-offset: 3px; }
.dt-page .dt-slider-btn img { display: block; }
/* Figma "Arrow right" variant: white disc + 0.2px stroke + CaretRight */
.dt-page .dt-slider-btn.is-next {
  background: #fff;
  box-shadow: inset 0 0 0 0.2px var(--dt-stroke);
}
.dt-page .dt-slider-btn.is-next img { position: absolute; left: 18.25px; top: 10.5px; width: 29px; height: 29px; }

/* --------------------------------------------------------------------------
   GLOBAL DATA — photo left, heading + ruled list right (reuses .hp-ix-global-*)
   -------------------------------------------------------------------------- */
.dt-page .dt-global { padding: 10px 0 20px; }
.dt-page .dt-global .hp-ix-global-grid { max-width: 1189px; margin: 0 auto; }
.dt-page .dt-global .hp-ix-rule-list { max-width: 536px; }

/* --------------------------------------------------------------------------
   STEPS — numbered list + app screenshot (reuses .hp-ix-steps-*)
   -------------------------------------------------------------------------- */
/* Figma centres an over-tall frame (712px), leaving 8px above and below */
.dt-page .dt-steps { padding: 8px 0; }
.dt-page .dt-steps .hp-ix-head { padding-bottom: 24px; }
@media screen and (min-width: 992px) {
  /* Figma: 195px text block + 24px gap, 477px list, 473px screenshot centred */
  .dt-page .dt-steps .hp-ix-head { min-height: 219px; }
  .dt-page .dt-steps .hp-ix-steps-list { min-height: 477px; }
  .dt-page .dt-steps .hp-ix-steps-img { height: auto; aspect-ratio: 628 / 473; align-self: center; }
}
.dt-page .dt-steps .hp-ix-steps-grid { gap: 45px; }
.dt-page .dt-steps .hp-ix-step { gap: 10px; }
.dt-page .dt-steps .hp-ix-steps-img {
  border: 0.5px solid var(--dt-stroke);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* --------------------------------------------------------------------------
   BANNER — "Install once. Travel everywhere." over the Earth's horizon
   -------------------------------------------------------------------------- */
.dt-page .dt-banner-section { padding: 4px 0; }
.dt-page .dt-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1208px;
  margin: 0 auto;
  aspect-ratio: 1208 / 428;
  padding: 30px 24px 35px;
  border-radius: 40px;
  overflow: hidden;
}
.dt-page .dt-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.dt-page .dt-banner .hp-h2 {
  position: relative;
  max-width: 591px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   FAQ — eSIM questions written in this document (Figma 1520:1352: two
   columns of white cards, #e0e0e0 stroke, 18px radius, 24px caret)
   -------------------------------------------------------------------------- */
.dt-page .dt-faq { padding: 34px 0 30px; }
.dt-page .dt-faq-title { max-width: 505px; margin: 0 auto 27px; text-align: center; }
.dt-page .dt-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.dt-page .dt-faq-col { display: flex; flex-direction: column; gap: 10px; }
.dt-page .dt-faq-item {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 18px;
  overflow: hidden;
}
.dt-page .dt-faq-h { margin: 0; font: inherit; }
.dt-page .dt-faq-q {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 24px;
  border: 0;
  border-radius: 18px;
  background: none;
  font-family: inherit;
  color: var(--dt-ink);
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.dt-page .dt-faq-q:focus { outline: none; }
.dt-page .dt-faq-q:focus-visible { outline: 2px solid var(--dt-accent); outline-offset: -2px; }
.dt-page .dt-faq-caret {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: url("/images/data/faq-caret.svg") center / 24px 24px no-repeat;
  transition: transform .25s ease;
}
.dt-page .dt-faq-q[aria-expanded="true"] .dt-faq-caret { transform: rotate(180deg); }
.dt-page .dt-faq-q-text {
  font-size: 24px;
  font-weight: 600;
  line-height: 31px;
  letter-spacing: -0.04em;
}
/* Figma: the answer starts 8px under the question (the button keeps its 24px
   padding for a comfortable click target, so the answer is pulled up) */
.dt-page .dt-faq-a { margin-top: -16px; padding: 0 24px 24px 62px; }
.dt-page .dt-faq-a[hidden] { display: none; }
.dt-page .dt-faq-a p {
  margin: 0;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--dt-paragraph);
}
.dt-page .dt-faq-a a { color: var(--dt-accent); font-weight: 600; text-decoration: underline; }

/* Last section → shared footer CTA: Figma leaves 40px (the theme's footer adds 92px) */
.dt-page + .section-footer { padding-top: 40px; }

@media screen and (min-width: 992px) {
  /* Figma's text column runs 13px below the photo */
  .dt-page .dt-global .hp-ix-global-img { margin-bottom: 13px; }
}

/* ==========================================================================
   LAPTOP  (≤ 1208px) — the hero card narrows with the column
   ========================================================================== */
@media screen and (max-width: 1208px) {
  .dt-page .dt-hero-bottom { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); padding-left: 20px; }
  .dt-page .dt-hero-card { padding: 30px 26px 24px; }
  .dt-page .dt-price { padding: 18px 20px; }
  .dt-page .dt-price-action { font-size: 24px; }
  .dt-page .dt-price-sub { font-size: 16px; line-height: 22px; }
  .dt-page .dt-dest-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .dt-page .dt-dest-name { font-size: 18px; line-height: 26px; }
  .dt-page .dt-band-title { font-size: 40px; line-height: 52px; }
}

/* ==========================================================================
   TABLET  (≤ 991px) — single column: card under the photo, copy centred
   ========================================================================== */
@media screen and (max-width: 991px) {
  .dt-page .dt-hero { padding-top: 140px; }
  .dt-page .dt-hero-bottom { grid-template-columns: minmax(0, 1fr); row-gap: 28px; padding-left: 0; }
  .dt-page .dt-hero-card { justify-self: center; width: 100%; max-width: 486px; margin-top: -40px; padding: 30px 30px 26px; }
  /* between the title tab and the centred card, which now overlaps 40px */
  .dt-page .dt-hero-tag { top: 56%; }
  .dt-page .dt-hero-copy { align-items: center; padding-top: 0; text-align: center; }
  .dt-page .dt-hero-lead { max-width: 620px; }

  .dt-page .dt-dest-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 380px));
    gap: 16px 20px;
  }

  .dt-page .dt-band { padding: 48px 20px 54px; }
  .dt-page .dt-band-title { font-size: 34px; line-height: 44px; }
  .dt-page .dt-band-body { font-size: 18px; line-height: 26px; }

  .dt-page .dt-slide { flex-basis: 320px; height: auto; aspect-ratio: 368 / 591; }

  .dt-page .dt-steps .hp-ix-steps-grid { gap: 28px; }

  .dt-page .dt-banner { aspect-ratio: 1208 / 520; }
}

/* ==========================================================================
   MOBILE  (≤ 767px) — Figma "iPhone 16 - 1" hero: square photo, one-line
   tabs, solid card below the photo
   ========================================================================== */
@media screen and (max-width: 767px) {
  .dt-page { gap: 32px; }
  .dt-page .dt-container { padding: 0 16px; }
  .dt-page .dt-hero { padding-top: 112px; padding-bottom: 8px; }

  .dt-page .dt-hero-media { aspect-ratio: 4 / 3; border-radius: 30px; }
  .dt-page .dt-hero-title {
    top: 8%;
    height: 50px;
    line-height: 50px;
    padding: 0 22px 0 16px;
    border-radius: 0 25px 25px 0;
    font-size: 30px;
  }
  .dt-page .dt-hero-tag {
    top: auto;
    bottom: 8%;
    max-width: 90%;
    height: auto;
    min-height: 40px;
    padding: 8px 14px 8px 14px;
    border-radius: 20px 0 0 20px;
    font-size: 16px;
    line-height: 22px;
    white-space: normal;
  }

  .dt-page .dt-hero-bottom { row-gap: 22px; }
  .dt-page .dt-hero-card {
    margin-top: 22px;
    padding: 20px 18px 18px;
    background: #fff;
    border: 0;
    border-radius: 34px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .dt-page .dt-hero-card-title { margin-bottom: 14px; font-size: 24px; line-height: 33px; }
  .dt-page .dt-price { min-height: 117px; padding: 18px 20px; gap: 10px; }
  .dt-page .dt-price-action { font-size: 22px; line-height: 30px; }
  .dt-page .dt-price-sub { font-size: 15px; line-height: 20px; }
  .dt-page .dt-price-amount { font-size: 32px; }
  .dt-page .dt-hero-copy { align-items: stretch; text-align: left; }
  .dt-page .dt-hero-lead { font-size: 16px; line-height: 24px; }
  .dt-page .dt-search { max-width: none; }
  .dt-page .dt-search-btn { min-width: 105px; padding: 0 16px; }
  .dt-page .dt-search-input { font-size: 16px; }

  .dt-page .dt-popular-title { font-size: 26px; line-height: 40px; }
  .dt-page .dt-dest-grid { margin-top: 6px; padding: 14px 0; gap: 12px; }
  .dt-page .dt-dest-card { height: 112px; }
  .dt-page .dt-dest-flag { width: 80px; height: 56px; }

  .dt-page .dt-band { padding: 36px 8px 42px; }
  .dt-page .dt-band-title { font-size: 26px; line-height: 34px; }
  .dt-page .dt-band-body { margin-top: 16px; font-size: 16px; line-height: 24px; }

  .dt-page .dt-why { padding: 0; }
  .dt-page .dt-section-head { margin-bottom: 24px; }
  .dt-page .dt-slider-track { gap: 16px; }
  .dt-page .dt-slide { flex-basis: min(300px, calc(100vw - 64px)); padding: 26px 20px; border-radius: 24px; }
  .dt-page .dt-slide-title { font-size: 24px; line-height: 28px; }
  .dt-page .dt-slider-buttons { padding-top: 28px; padding-bottom: 8px; }

  .dt-page .dt-global { padding: 0; }
  .dt-page .dt-steps { padding: 0; }

  .dt-page .dt-banner-section { padding: 0; }
  .dt-page .dt-banner { aspect-ratio: auto; min-height: 280px; padding: 26px 16px; border-radius: 30px; }
  .dt-page .dt-banner-img { object-position: 50% 100%; }

  .dt-page .dt-faq { padding: 0; }
  .dt-page .dt-faq-title { margin-bottom: 20px; }
  .dt-page .dt-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .dt-page .dt-faq-q { gap: 10px; padding: 18px; }
  .dt-page .dt-faq-q-text { font-size: 18px; line-height: 24px; }
  .dt-page .dt-faq-a { margin-top: -10px; padding: 0 18px 18px 52px; }
  .dt-page .dt-faq-a p { font-size: 14px; }

  .dt-page + .section-footer { padding-top: 32px; }
}

/* ==========================================================================
   SMALL PHONES  (≤ 400px)
   ========================================================================== */
/* Phones: the Figma mobile frame's near-square photo */
@media screen and (max-width: 479px) {
  .dt-page .dt-hero-media { aspect-ratio: 351 / 363; }
}

@media screen and (max-width: 400px) {
  .dt-page .dt-hero-title { font-size: 26px; height: 46px; line-height: 46px; }
  .dt-page .dt-search-bar { gap: 8px; padding-left: 10px; }
  .dt-page .dt-search-btn { min-width: 88px; padding: 0 12px; font-size: 16px; }
}