/* ==========================================================================
   TravelPrepDesk — main stylesheet
   1. Tokens
   2. Reset & base
   3. Typography
   4. Layout helpers
   5. Buttons & forms
   6. Header / navigation
   7. Hero + document card (signature element)
   8. Home sections
   9. Footer
   10. Blog & static pages
   11. (removed)
   12. Application form (multi-step)
   13. Motion & accessibility
   14. Brand layer (the site's own design)
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------*/
:root {
  --c-ink: #0a1440;
  --c-ink-soft: #4a5372;
  --c-ink-faint: #8891ab;
  --c-primary: #2b7fff;
  --c-primary-dark: #1c62d9;
  --c-primary-tint: #eaf2ff;
  --c-accent: #e5484d;
  --c-gold: #8fb8ff;
  --c-mist: #eef4ff;
  --c-paper: #ffffff;
  --c-line: #e6eaf5;
  --c-line-strong: #cdd8ee;
  --c-header-bg: #ffffff;
  --c-footer-bg: #0a1440;
  --c-button-text: #ffffff;

  --font-display: "Fredoka", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0: clamp(0.98rem, 0.95rem + 0.2vw, 1.06rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2: clamp(1.4rem, 1.25rem + 0.7vw, 1.85rem);
  --step-3: clamp(1.75rem, 1.45rem + 1.4vw, 2.6rem);
  --step-4: clamp(2.15rem, 1.6rem + 2.6vw, 3.6rem);

  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(10, 20, 64, 0.06), 0 2px 8px rgba(10, 20, 64, 0.05);
  --shadow-md: 0 8px 28px rgba(10, 20, 64, 0.1);
  --shadow-lg: 0 24px 60px rgba(10, 20, 64, 0.16);

  --wrap: 1200px;
  --wrap-narrow: 760px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 7vw, 6.5rem);
  --header-h: 72px;
}

/* 2. Reset & base ---------------------------------------------------------*/
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--c-ink-soft);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--c-primary); text-decoration: none; }
a:hover { color: var(--c-primary-dark); }

hr { border: 0; border-top: 1px solid var(--c-line); margin: 2rem 0; }

::selection { background: var(--c-primary); color: #fff; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.skip-link {
  position: absolute; left: 50%; top: -100px;
  transform: translateX(-50%);
  background: var(--c-ink); color: #fff;
  padding: 0.75rem 1.25rem; border-radius: 0 0 10px 10px;
  z-index: 999;
}
.skip-link:focus { top: 0; color: #fff; }

/* 3. Typography -----------------------------------------------------------*/
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--c-ink);
  line-height: 1.1;
  margin: 0 0 0.6em;
  font-weight: 600;
  letter-spacing: -0.02em;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: currentColor;
  flex: none;
}
.eyebrow--center { justify-content: center; }

.lede {
  font-size: var(--step-1);
  color: var(--c-ink-soft);
  line-height: 1.55;
}

.mono { font-family: var(--font-mono); }

/* 4. Layout helpers -------------------------------------------------------*/
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); }
.section--mist { background: var(--c-mist); }
.section--ink { background: var(--c-ink); color: rgba(255, 255, 255, 0.75); }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--ink .eyebrow { color: var(--c-gold); }

.section--primary { background: var(--c-primary); color: rgba(255, 255, 255, 0.86); }
.section--primary h2, .section--primary h3 { color: #fff; }
.section--primary .eyebrow { color: rgba(255, 255, 255, 0.75); }
.section--primary .stage,
.section--primary .plan,
.section--primary .review { background: rgba(255, 255, 255, 0.96); }

.section--tint { background: var(--c-primary-tint); }

/* Per-section custom background, set in the builder */
.section[data-bg] { background: var(--section-bg, transparent); }

.section-head { max-width: 680px; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 0.75rem; }

.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); }
/* Destination cards sit inside a plain wrapper div, so that wrapper is the
   real grid item. Without this, a card whose meta list is one row shorter
   (a destination with no government fee, say) renders visibly shorter than
   the ones beside it. Stretching the wrapper lets .dcard's height:100% do
   what it was always meant to. */
.grid > div { display: flex; }
.grid > div > .dcard { width: 100%; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Image + text section ----------------------------------------------------
   Its columns must stack their own contents (heading above body), so they
   opt out of the ".grid > div { display: flex }" rule above, which exists
   for destination cards and would otherwise lay the heading and the body
   text beside each other. */
.imagetext > div,
.imagetext__copy,
.imagetext__media { display: block; }
.imagetext__media img { width: 100%; height: auto; display: block; }
/* No image: one readable column rather than a half-empty row. */
.imagetext--solo { max-width: 760px; }
.imagetext--solo .section-head { margin-bottom: 1.25rem; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

/* 5. Buttons & forms ------------------------------------------------------*/
.btn {
  --btn-bg: var(--c-primary);
  --btn-fg: var(--c-button-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: 600 var(--step-0) / 1 var(--font-body);
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
  text-align: center;
}
.btn:hover { --btn-bg: var(--c-primary-dark); color: var(--btn-fg); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--lg { padding: 1.05rem 1.9rem; font-size: var(--step-1); }
.btn--sm { padding: 0.6rem 1.1rem; font-size: var(--step--1); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-ink); border-color: var(--c-line-strong); }
.btn--ghost:hover { --btn-bg: var(--c-ink); --btn-fg: #fff; }
/* The Back button reuses the same right-pointing arrow as Continue; only
   the two together (this specific pairing) should have it flipped. */
.btn--pill.btn--ghost svg { transform: scaleX(-1); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--c-ink); }
.btn--light:hover { --btn-bg: var(--c-mist); --btn-fg: var(--c-ink); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.5; pointer-events: none; }

.field { display: block; margin-bottom: 1.1rem; }
.field > label,
.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin-bottom: 0.45rem;
}
.field .req { color: var(--c-accent); }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], input[type="password"], input[type="search"], input[type="url"],
select, textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  font: 400 var(--step-0) / 1.4 var(--font-body);
  color: var(--c-ink);
  background: #fff;
  border: 1px solid var(--c-line-strong);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2346586e' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 11px;
  padding-right: 2.4rem;
}
textarea { min-height: 130px; resize: vertical; }

/* Date inputs need their height put back.
   `appearance: none` above is what gives every field the same flat look,
   but on WebKit — iOS Safari especially — it also strips the native date
   control's intrinsic sizing. The field then collapses to shorter than the
   text inputs beside it and its value sits misaligned, which is what makes
   an empty date field look broken rather than empty. Pin the height to
   what a text input computes to (line-height + vertical padding + border)
   and left-align the value like every other field. */
input[type="date"] {
  min-height: calc(var(--step-0) * 1.4 + 1.6rem + 2px);
}
input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}
input[type="date"]::-webkit-datetime-edit {
  line-height: 1.4;
  padding: 0;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  cursor: pointer;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-tint);
}

:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 2px;
}

.check {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: var(--step--1);
  line-height: 1.5;
  cursor: pointer;
  margin-bottom: 0.8rem;
}
.check input { margin-top: 0.2rem; flex: none; width: 18px; height: 18px; accent-color: var(--c-primary); }

.field-error {
  color: var(--c-accent);
  font-size: var(--step--1);
  margin-top: 0.35rem;
  display: none;
}
.has-error input, .has-error select, .has-error textarea { border-color: var(--c-accent); }
.has-error .field-error { display: block; }

/* 6. Header / navigation --------------------------------------------------*/
.topbar {
  background: var(--c-ink);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 38px;
  padding-block: 0.4rem;
}
.topbar__note { display: flex; align-items: center; gap: 0.5rem; }
.topbar__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-gold); flex: none; }
.topbar__links { display: flex; gap: 1.25rem; }
.topbar a { color: rgba(255, 255, 255, 0.72); }
.topbar a:hover { color: #fff; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-header-bg);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.site-header.is-stuck { border-bottom-color: var(--c-line); box-shadow: var(--shadow-sm); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 0.65rem; flex: none; }
.brand img { max-height: 42px; width: auto; }
.brand__mark {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--c-primary);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  flex: none;
}
.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--c-ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.brand__name small {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

.nav { margin-left: auto; }
.nav ul { list-style: none; display: flex; align-items: center; gap: 1.6rem; margin: 0; padding: 0; }
.nav li { position: relative; }
.nav a {
  color: var(--c-ink);
  font-size: 0.94rem;
  font-weight: 500;
  padding-block: 0.5rem;
  display: inline-block;
}
.nav a:hover, .nav .current-menu-item > a { color: var(--c-primary); }
.nav .sub-menu {
  position: absolute;
  top: 100%; left: -0.9rem;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 0.5rem;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  opacity: 0; visibility: hidden;
  transform: translateY(6px);
  transition: all 0.18s ease;
}
.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav .sub-menu a { padding: 0.55rem 0.8rem; border-radius: 8px; display: block; }
.nav .sub-menu a:hover { background: var(--c-mist); }

.header-actions { display: flex; align-items: center; gap: 0.75rem; flex: none; }

.cart-link {
  position: relative;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--c-line-strong);
  color: var(--c-ink);
}
.cart-link:hover { background: var(--c-mist); }
.cart-link__count {
  position: absolute; top: -4px; right: -4px;
  min-width: 19px; height: 19px;
  padding-inline: 4px;
  border-radius: 999px;
  background: var(--c-accent);
  color: #fff;
  font: 600 0.68rem/19px var(--font-mono);
  text-align: center;
}

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--c-line-strong);
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.nav-toggle span {
  display: block;
  width: 18px; height: 2px;
  background: var(--c-ink);
  border-radius: 2px;
  position: relative;
  transition: background 0.15s ease;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: ""; position: absolute; left: 0;
  width: 18px; height: 2px; background: var(--c-ink); border-radius: 2px;
  transition: transform 0.2s ease, top 0.2s ease;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* 7. Hero + document card -------------------------------------------------*/
.hero {
  position: relative;
  padding-block: clamp(2.75rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem);
  background:
    radial-gradient(120% 80% at 88% 0%, var(--c-primary-tint) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(70% 60% at 4% 100%, rgba(216, 160, 61, 0.1) 0%, rgba(255, 255, 255, 0) 65%),
    var(--c-paper);
  overflow: hidden;
}
.hero::after {
  /* faint dotted flight path */
  content: "";
  position: absolute;
  inset: auto 0 -40px 0;
  height: 160px;
  background-image: radial-gradient(var(--c-line) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.6;
  pointer-events: none;
  mask-image: linear-gradient(to top, #000, transparent);
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero--no-card .hero__inner { grid-template-columns: 1fr; max-width: 760px; }
.hero h1 { margin-bottom: 1rem; }
.hero h1 em {
  font-style: normal;
  color: var(--c-primary);
  position: relative;
  /* On a phone the emphasised phrase must be allowed to wrap, or the
     headline runs past the right edge and gets cut off. On a wider screen
     keeping it on one line reads better, so nowrap is reinstated there
     via the media query below. */
  white-space: normal;
}
@media (min-width: 700px) {
  .hero h1 em { white-space: nowrap; }
}
/* Drawn as a repeating background rather than an absolutely-positioned
   pseudo-element, so it follows the text correctly when the phrase wraps
   onto a second line on a phone. box-decoration-break makes each line box
   get its own underline instead of one stretched across both. */
.hero h1 em {
  background-image: linear-gradient(var(--c-gold), var(--c-gold));
  background-repeat: no-repeat;
  background-size: 100% 0.09em;
  background-position: 0 calc(100% + 0.06em);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero__sub { max-width: 46ch; }

.hero__picker {
  margin-top: 1.9rem;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 0.9rem;
  display: flex;
  gap: 0.7rem;
  align-items: stretch;
  max-width: 540px;
  transition: box-shadow 0.2s ease;
}
.hero__picker:focus-within { box-shadow: var(--shadow-lg), 0 0 0 3px var(--c-primary-tint); }
.hero__picker .picker-field { flex: 1 1 auto; min-width: 0; position: relative; }
.hero__picker .picker-field label {
  position: absolute; top: 0.45rem; left: 0.95rem;
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--c-ink-faint);
  pointer-events: none;
}
.hero__picker select {
  border: 0;
  padding: 1.5rem 2.2rem 0.55rem 0.9rem;
  background-color: transparent;
  font-weight: 600;
  color: var(--c-ink);
  height: 100%;
}
.hero__picker select:focus { box-shadow: none; }
.hero__picker .btn { flex: none; }

.hero__assurances {
  list-style: none;
  margin: 1.9rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: var(--step--1);
  align-items: flex-start;
}
.hero__assurances li { display: flex; align-items: center; gap: 0.55rem; color: var(--c-ink-soft); }
.hero__assurances svg {
  color: var(--c-primary);
  flex: none;
  background: var(--c-primary-tint);
  border-radius: 50%;
  padding: 4px;
  box-sizing: content-box;
}

.landing-hero .hero__sub { max-width: 52ch; }

/* Focus mode — a distraction-free view of the application form. Site
   header/footer, the pricing sidebar and page copy all hide; only the
   step wizard remains, with a minimal exit bar in their place. ------------ */
.adk-focus-bar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 40;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem clamp(1rem, 4vw, 2rem);
  background: #fff;
  border-bottom: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm);
}
.adk-focus-bar__brand.brand { pointer-events: none; }
.adk-focus-bar__right { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.6rem 1.1rem; }
.adk-focus-bar__secure {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  color: var(--c-primary);
  font-weight: 600;
}
.adk-focus-bar__secure svg { flex: none; }
.adk-focus-bar__track {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--c-ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--c-line-strong);
  text-underline-offset: 3px;
  white-space: nowrap;
}
.adk-focus-bar__track:hover { color: var(--c-primary); text-decoration-color: var(--c-primary); }
.adk-focus-bar__exit {
  border: 1px solid var(--c-line);
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 0.5rem 1.2rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--c-ink-soft);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.adk-focus-bar__exit:hover { border-color: var(--c-ink); color: var(--c-ink); }
@media (max-width: 560px) {
  .adk-focus-bar__secure { display: none; }
}

/* On a narrow screen the brand block is wide enough to squeeze the right-hand
   group into a column, which stacks "Track status" above "Exit" and leaves the
   bar tall and crooked. Shrink the brand, keep the two controls on one line. */
@media (max-width: 640px) {
  .adk-focus-bar {
    padding: 0.6rem 0.9rem;
    gap: 0.75rem;
  }
  /* .brand is flex:none globally, so on a narrow screen it refuses to give
     up any width and the controls beside it get squeezed instead. Let it
     shrink here — the ellipsis above handles the overflow. */
  .adk-focus-bar__brand.brand { gap: 0.5rem; min-width: 0; flex: 0 1 auto; }
  /* The tagline under the site name is the first thing to go — it is the
     least useful line in the bar and the widest. */
  .adk-focus-bar__brand .brand__name small { display: none; }
  .adk-focus-bar__brand .brand__name {
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .adk-focus-bar__brand .brand__mark { width: 32px; height: 32px; border-radius: 9px; font-size: 0.9rem; }
  .adk-focus-bar__brand img { max-height: 32px; }
  .adk-focus-bar__right {
    flex-wrap: nowrap;
    flex: none;
    gap: 0.75rem;
  }
  .adk-focus-bar__track { font-size: 0.72rem; }
  .adk-focus-bar__exit { padding: 0.4rem 0.9rem; font-size: 0.8rem; }
}

.adk-focus-foot {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  text-align: center;
  padding: 1.1rem 1.5rem;
  background: var(--c-ink);
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}
.adk-focus-foot span { display: inline-flex; align-items: center; gap: 0.4rem; }
.adk-focus-foot svg { color: var(--c-gold); flex: none; }
.adk-focus-foot__dot { color: rgba(255, 255, 255, 0.3); }
@media (max-width: 560px) {
  .adk-focus-foot__dot { display: none; }
  .adk-focus-foot { flex-direction: column; gap: 0.35rem; }
}

body.adk-focus .site-header,
body.adk-focus .site-footer,
body.adk-focus .dest-hero,
body.adk-focus .service__facts,
body.adk-focus .entry-content,
body.adk-focus .disclaimer,
body.adk-focus .mobile-cta,
body.adk-focus .service__aside {
  display: none !important;
}
body.adk-focus .adk-focus-bar,
body.adk-focus .adk-focus-foot { display: flex; }
body.adk-focus .adk-focus-foot { display: block; }
body.adk-focus .service { display: block; }
body.adk-focus .service__main { max-width: 640px; margin-inline: auto; }
body.adk-focus main#content {
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4rem);
  background:
    radial-gradient(70% 60% at 15% 0%, var(--c-primary-tint) 0%, rgba(255, 255, 255, 0) 60%),
    var(--c-mist);
  min-height: calc(100vh - var(--header-h) - 3rem);
}
body.adk-focus .appform { box-shadow: var(--shadow-lg); }

/* Price reveal — only shown on the review step, once the whole form is
   filled in. ----------------------------------------------------------
   Deliberately understated: a quiet summary line, not a callout. No card,
   no heading treatment, no brand color, nothing scaled up — the fee is
   information the traveler needs to see, not the thing the page is
   selling at this point. Everything here sits at one small text size. */
.price-reveal {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 0 1.4rem;
  font-size: 12px;
  color: var(--c-ink-soft);
}
.price-reveal__fee {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.1rem 0.6rem;
}
.price-reveal__label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--c-ink-faint);
}
/* The fee itself, and the WooCommerce price markup nested inside it, are
   pinned to exactly the same size, weight and color as the label beside
   them — one uniform line, nothing emphasised. Without these the theme's
   own .amount rules and the browser's default <strong> weight scale the
   number back up. */
.price-reveal__fee strong,
.price-reveal__fee strong .amount,
.price-reveal__fee strong bdi,
.price-reveal__fee strong ins,
.price-reveal__fee strong span {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--c-ink-faint);
  text-decoration: none;
}
.price-reveal__delivery { font-size: 12px; font-weight: 400; color: var(--c-ink-faint); width: 100%; margin-top: 0.05rem; }

/* A second, visually lighter line for the government fee — present
   alongside the processing fee, but never mistaken for part of our price. */
.price-reveal__govt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.1rem 0.6rem;
  margin-top: 0.45rem;
}
.price-reveal__govt strong,
.price-reveal__govt strong .amount,
.price-reveal__govt strong bdi {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--c-ink-faint);
}
.price-reveal__speed { margin-top: 1rem; }
.price-reveal__speed-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin-bottom: 0.6rem;
}
.price-reveal__option {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.6rem;
  padding: 0.9rem 1rem;
  background: #fff;
  border: 1.5px solid var(--c-line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.price-reveal__option:has(input:checked) { border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(216, 160, 61, 0.14); }
.price-reveal__option.is-standard:has(input:checked) { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-tint); }
.price-reveal__option input { width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--c-gold); }
.price-reveal__option.is-standard input { accent-color: var(--c-primary); }
.price-reveal__option-copy { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.1rem; }
.price-reveal__option-copy strong { font-size: var(--step-0); color: var(--c-ink); }
.price-reveal__option-copy span { font-size: 0.78rem; color: var(--c-ink-soft); }
.price-reveal__option-fee { text-align: right; font-weight: 700; color: var(--c-ink); flex: none; font-size: var(--step--1); }
.price-reveal__option-fee small { display: block; font-weight: 400; font-size: 0.65rem; color: var(--c-ink-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.price-reveal__total { margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid var(--c-line); display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 400; color: var(--c-ink-faint); }
.price-reveal__total strong { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--c-ink-faint); }
.price-reveal__note { margin: 0.5rem 0 0; font-size: 12px; color: var(--c-ink-faint); }
.price-reveal__badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--c-gold);
  color: var(--c-ink);
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  margin-bottom: 0.15rem;
}
.price-reveal__option-icon { flex: none; color: var(--c-ink-faint); display: inline-flex; }
.price-reveal__option.is-standard .price-reveal__option-icon,
.price-reveal__option:has(input:checked) .price-reveal__option-icon { color: var(--c-primary); }
.price-reveal__delivery-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.35rem 0 0;
  font-size: 12px;
  color: var(--c-ink-faint);
}
.price-reveal__delivery-note svg { flex: none; color: var(--c-primary); }

/* Destination guide sections ---------------------------------------------
   The blocks that make a country landing page read as a travel guide:
   a quick-answer fact strip, a "where to go" set, and a pre-flight
   checklist. All built from the same tokens as everything else. */

.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }

/* At a glance ------------------------------------------------------------ */
.factbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.factbar__item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.15rem 1.25rem;
  background: var(--c-paper, #fff);
}
.factbar__icon { color: var(--c-primary); display: inline-flex; margin-bottom: 0.15rem; }
.factbar__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.factbar__value {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.2;
  color: var(--c-ink);
}
.factbar__note { font-size: 0.78rem; color: var(--c-ink-soft); }
.factbar__foot { margin: 0.9rem 0 0; font-size: 0.78rem; color: var(--c-ink-faint); }

/* Where to go ------------------------------------------------------------ */
.places {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.place {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.6rem 1.5rem 1.5rem;
  background: var(--c-paper, #fff);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.place:hover { border-color: var(--c-primary); transform: translateY(-3px); box-shadow: var(--shadow-lg, 0 18px 40px rgba(16, 31, 51, 0.08)); }
.place__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--c-primary);
}
.place__meta {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.place__title { font-size: var(--step-1); margin: 0; }
.place__text { margin: 0; font-size: var(--step--1); color: var(--c-ink-soft); }
.place__best {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.35rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--c-line);
  font-size: 0.75rem;
  color: var(--c-ink-faint);
}
.place__best svg { flex: none; color: var(--c-primary); }

/* Before you fly --------------------------------------------------------- */
.checklist-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.checklist-layout__head .section-head { margin-bottom: 0; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.checklist__item { display: flex; align-items: flex-start; gap: 0.85rem; }
.checklist__tick {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: var(--c-primary-tint);
  color: var(--c-primary);
  margin-top: 0.1rem;
}
.checklist__copy { display: flex; flex-direction: column; gap: 0.15rem; }
.checklist__copy strong { font-size: var(--step-0); color: var(--c-ink); }
.checklist__copy span { font-size: var(--step--1); color: var(--c-ink-soft); }
.checklist__foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.8rem;
  color: var(--c-ink-faint);
}
.checklist__foot svg { flex: none; color: var(--c-primary); }

/* Application tracker ---------------------------------------------------- */
.tracker-card {
  max-width: 460px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
.tracker-form .field { margin-bottom: 1.1rem; }
.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.pill--good { background: rgba(46, 125, 96, 0.12); color: #1f6b4d; }
.pill--warn { background: rgba(216, 160, 61, 0.16); color: #92671a; }
.pill--wait { background: var(--c-mist); color: var(--c-ink-soft); }
.pill--plain { background: var(--c-primary-tint); color: var(--c-primary); }
.tracker-error { color: var(--c-accent); font-size: var(--step--1); margin-top: 0.75rem; }
.tracker-result__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.tracker-result__ref { font-family: var(--font-mono); font-size: 0.78rem; color: var(--c-ink-faint); letter-spacing: 0.04em; }
.tracker-stages {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  justify-content: space-between;
  counter-reset: stg;
}
.tracker-stages li {
  flex: 1 1 0;
  text-align: center;
  font-size: 0.68rem;
  color: var(--c-ink-faint);
  position: relative;
  padding-top: 2.1rem;
}
.tracker-stages li span {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--c-mist);
  border: 2px solid var(--c-line);
}
.tracker-stages li::after {
  content: "";
  position: absolute; top: 0.75rem; left: calc(50% + 1.1rem); right: calc(-50% + 1.1rem);
  height: 2px;
  background: var(--c-line);
}
.tracker-stages li:last-child::after { display: none; }
.tracker-stages li.is-done span { background: var(--c-primary); border-color: var(--c-primary); }
.tracker-stages li.is-done::after { background: var(--c-primary); }
.tracker-stages li.is-done { color: var(--c-ink); font-weight: 600; }
.tracker-result__note {
  background: var(--c-mist);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  font-size: var(--step--1);
  color: var(--c-ink-soft);
}

/* Signature: the boarding-pass / case-file card */
.doccard {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-width: 430px;
  margin-inline: auto;
}
.doccard__head {
  background: var(--c-ink);
  color: #fff;
  padding: 1.1rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.doccard__ref {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.62);
}
.doccard__ref strong { display: block; color: #fff; font-size: 0.95rem; letter-spacing: 0.06em; }
.doccard__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  flex: none;
}
.doccard__body { padding: 1.4rem; }

.doccard__rows { list-style: none; margin: 0 0 1.3rem; padding: 0; }
.doccard__rows li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--c-line);
  font-size: var(--step--1);
}
.doccard__rows li:last-child { border-bottom: 0; }
.doccard__rows dt, .doccard__rows .k {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.doccard__rows .v {
  color: var(--c-ink);
  font-weight: 600;
  text-align: right;
  max-width: 62%;
}
/* A long document name (Aruba's "Embarkation / Disembarkation Card (ED
   Card)" is the longest in the catalogue) wraps under the shorter ones;
   right-aligning every wrapped line reads better than the default. */

/* perforated tear line */
.doccard__tear {
  position: relative;
  height: 26px;
  border-top: 2px dashed var(--c-line-strong);
  margin-inline: -1.4rem;
}
.doccard__tear::before,
.doccard__tear::after {
  content: "";
  position: absolute;
  top: -13px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--c-mist);
  border: 1px solid var(--c-line);
}
.doccard__tear::before { left: -13px; }
.doccard__tear::after { right: -13px; }
.hero .doccard__tear::before,
.hero .doccard__tear::after { background: var(--c-paper); }

.tracker { list-style: none; margin: 1.35rem 0 0; padding: 0; }
.tracker li {
  position: relative;
  padding: 0 0 1.15rem 1.85rem;
  font-size: var(--step--1);
  color: var(--c-ink-faint);
}
.tracker li:last-child { padding-bottom: 0; }
.tracker li::before {
  content: "";
  position: absolute; left: 0; top: 4px;
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 2px solid var(--c-line-strong);
  background: #fff;
  transition: border-color 0.4s ease, background 0.4s ease;
}
.tracker li::after {
  content: "";
  position: absolute; left: 6px; top: 17px; bottom: 2px;
  width: 1px;
  background: var(--c-line-strong);
}
.tracker li:last-child::after { display: none; }
.tracker li strong { display: block; color: var(--c-ink); font-weight: 600; }
.tracker li .stamp-time { font-family: var(--font-mono); font-size: 0.7rem; }
.tracker li.is-done::before { border-color: var(--c-primary); background: var(--c-primary); }
.tracker li.is-done { color: var(--c-ink-soft); }
.tracker li.is-active::before {
  border-color: var(--c-primary);
  background: #fff;
  box-shadow: 0 0 0 4px var(--c-primary-tint);
}



/* 8. Home sections --------------------------------------------------------*/
.logos {
  border-block: 1px solid var(--c-line);
  padding-block: 1.4rem;
}
.logos__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem 2rem;
}
.logos__label {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-faint);
}
.logos__stat { display: flex; align-items: baseline; gap: 0.5rem; }
.logos__stat b {
  font-family: var(--font-display); font-size: 1.5rem;
  color: var(--c-ink); font-weight: 600; letter-spacing: -0.02em;
}
.logos__stat span { font-size: var(--step--1); }

/* destination cards */
.dest-search {
  display: flex; gap: 0.7rem; flex-wrap: wrap;
  margin-bottom: 1.8rem;
}
.dest-search input { max-width: 340px; }
.dest-filter {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.chip {
  border: 1px solid var(--c-line-strong);
  background: #fff;
  color: var(--c-ink-soft);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1rem;
  font: 500 var(--step--1)/1 var(--font-body);
  cursor: pointer;
  transition: all 0.15s ease;
}
.chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.chip.is-active { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }

.dcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 1.35rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  height: 100%;
}
.dcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }
.dcard__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--c-primary-tint);
  color: var(--c-primary);
  margin-bottom: 0.8rem;
}
.dcard__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--c-ink);
  margin: 0 0 0.3rem;
  font-weight: 600;
}
.dcard__type {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: 0.9rem;
}
.dcard__meta {
  list-style: none; margin: 0 0 1.1rem; padding: 0;
  font-size: var(--step--1);
}
.dcard__meta li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.3rem 0;
}
.dcard__meta .k { color: var(--c-ink-faint); }
.dcard__meta .v { color: var(--c-ink); font-weight: 500; }
.dcard__govt { border-top: 1px dashed var(--c-line); margin-top: 0.2rem; padding-top: 0.5rem; }
.dcard__govt .v em { font-style: normal; color: var(--c-ink-faint); font-weight: 400; font-size: 0.92em; }
.dcard__foot {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px dashed var(--c-line);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.dcard__price { font-family: var(--font-display); font-size: var(--step-1); color: var(--c-ink); font-weight: 600; }
.dcard__price small { font-family: var(--font-body); font-size: 0.72rem; font-weight: 400; color: var(--c-ink-faint); display: block; letter-spacing: 0; }
.dcard__link { position: absolute; inset: 0; z-index: 2; text-indent: -9999px; overflow: hidden; }
.dcard__cta {
  font-weight: 600; color: var(--c-primary);
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: var(--step--1);
}
.dcard:hover .dcard__cta { gap: 0.6rem; }

.is-hidden { display: none !important; }
.empty-note {
  padding: 2.5rem 1rem; text-align: center; color: var(--c-ink-faint);
  border: 1px dashed var(--c-line-strong); border-radius: var(--radius);
}

/* stages / how it works */
.stages { counter-reset: stage; }
.stage {
  position: relative;
  padding: 1.6rem 1.4rem 1.5rem;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.stage__code {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--c-primary);
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.9rem;
}
.stage h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.stage p { font-size: var(--step--1); }
.stage__time {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--c-ink-faint);
  padding-top: 0.8rem;
  border-top: 1px dashed var(--c-line);
}

/* value props */
.vprop {
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}
.vprop__icon {
  width: 40px; height: 40px; border-radius: 11px;
  background: rgba(216, 160, 61, 0.16);
  color: var(--c-gold);
  display: grid; place-items: center;
  margin-bottom: 1rem;
}
.vprop h3 { font-size: var(--step-1); margin-bottom: 0.45rem; }
.vprop p { font-size: var(--step--1); margin: 0; }

/* pricing */
.plans { align-items: stretch; }
.plan {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: 1.8rem 1.6rem;
  height: 100%;
}
.plan.is-featured {
  border-color: var(--c-ink);
  box-shadow: var(--shadow-md);
  position: relative;
}
.plan.is-featured::before {
  content: "Most chosen";
  position: absolute; top: -13px; left: 1.6rem;
  background: var(--c-ink); color: #fff;
  font: 600 0.7rem/1 var(--font-body);
  padding: 0.45rem 0.8rem; border-radius: var(--radius-pill);
}
.plan__name { font-family: var(--font-display); font-size: var(--step-1); color: var(--c-ink); font-weight: 600; }
.plan__speed { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-primary); margin-top: 0.3rem; }
.plan__price {
  font-family: var(--font-display);
  font-size: var(--step-3);
  color: var(--c-ink);
  margin: 1.1rem 0 0.2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.plan__note { font-size: 0.78rem; color: var(--c-ink-faint); }
.plan ul { list-style: none; margin: 1.4rem 0; padding: 0; font-size: var(--step--1); }
.plan li { display: flex; gap: 0.6rem; padding: 0.4rem 0; }
.plan li svg { color: var(--c-primary); flex: none; margin-top: 3px; }
.plan .btn { margin-top: auto; }

/* reviews */
.review {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 1.5rem;
  height: 100%;
  display: flex; flex-direction: column;
}
.review__stars { color: var(--c-gold); letter-spacing: 0.15em; font-size: 0.9rem; margin-bottom: 0.8rem; }
.review p { font-size: var(--step--1); }
.review__who {
  margin-top: auto; padding-top: 1.1rem;
  border-top: 1px dashed var(--c-line);
  display: flex; align-items: center; gap: 0.7rem;
}
.review__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--c-primary-tint); color: var(--c-primary-dark);
  display: grid; place-items: center;
  font: 600 0.85rem var(--font-display); flex: none;
}
.review__name { font-weight: 600; color: var(--c-ink); font-size: 0.9rem; line-height: 1.3; }
.review__meta { font-family: var(--font-mono); font-size: 0.68rem; color: var(--c-ink-faint); }

/* FAQ */
.faq { max-width: 820px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__q {
  width: 100%;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  background: none; border: 0; cursor: pointer;
  padding: 1.25rem 0;
  font: 600 var(--step-1) / 1.35 var(--font-display);
  color: var(--c-ink);
  text-align: left;
  letter-spacing: -0.015em;
}
.faq__icon {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--c-line-strong);
  display: grid; place-items: center;
  position: relative; margin-top: 3px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute;
  background: var(--c-ink); border-radius: 2px;
  transition: transform 0.25s ease, background 0.2s ease;
}
.faq__icon::before { width: 11px; height: 1.5px; }
.faq__icon::after { width: 1.5px; height: 11px; }
.faq__q[aria-expanded="true"] .faq__icon { background: var(--c-ink); border-color: var(--c-ink); }
.faq__q[aria-expanded="true"] .faq__icon::before,
.faq__q[aria-expanded="true"] .faq__icon::after { background: #fff; }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: scaleY(0); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s ease; }
.faq__a > div { overflow: hidden; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a p { padding-bottom: 1.4rem; font-size: var(--step-0); }

/* closing CTA */
.cta-band {
  background: var(--c-primary-dark);
  color: rgba(255, 255, 255, 0.82);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.5;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; margin-bottom: 0.5rem; }
.cta-band .btn-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* disclaimer block */
.disclaimer {
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-accent);
  border-radius: 10px;
  background: var(--c-mist);
  padding: 1.1rem 1.25rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--c-ink-soft);
}
.disclaimer strong { color: var(--c-ink); }

/* 9. Footer ---------------------------------------------------------------*/
.site-footer {
  background: var(--c-footer-bg);
  color: rgba(255, 255, 255, 0.62);
  padding-block: clamp(2.75rem, 6vw, 4.5rem) 1.75rem;
  font-size: var(--step--1);
}
.site-footer a { color: rgba(255, 255, 255, 0.62); }
.site-footer a:hover { color: #fff; }
.site-footer h4 {
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 1.1rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 2rem;
  padding-bottom: 2.5rem;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 0.55rem; }
.footer-brand .brand__name { color: #fff; }
.footer-brand p { margin-top: 1rem; max-width: 34ch; }
.footer-contact { margin-top: 1.2rem; font-family: var(--font-mono); font-size: 0.78rem; }
.footer-contact a { display: block; margin-bottom: 0.3rem; color: #fff; }

.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  padding-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}
.footer-disclaimer {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin-bottom: 2rem;
  font-size: 0.8rem;
  line-height: 1.65;
  border-left: 3px solid var(--c-gold);
}
.footer-disclaimer strong { color: #fff; }
.payment-marks { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.payment-marks span {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  padding: 0.25rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
}

/* 10. Blog & static pages -------------------------------------------------*/
.page-hero {
  position: relative;
  background:
    radial-gradient(90% 140% at 100% 0%, var(--c-primary-tint) 0%, rgba(255, 255, 255, 0) 55%),
    var(--c-mist);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--c-line);
  overflow: hidden;
}
.page-hero h1 { margin-bottom: 0.4rem; }
.crumbs {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin-bottom: 1rem;
}
.crumbs a { color: var(--c-ink-faint); }
.crumbs a:hover { color: var(--c-primary); }

/* Destination landing hero — punchier variant used on product pages ------ */
.dest-hero {
  position: relative;
  padding-block: clamp(2.25rem, 5vw, 4rem) clamp(2.75rem, 6vw, 4.5rem);
  background:
    radial-gradient(115% 85% at 90% 0%, var(--c-primary-tint) 0%, rgba(255, 255, 255, 0) 58%),
    var(--c-paper);
  border-bottom: 1px solid var(--c-line);
  overflow: hidden;
}
.dest-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.dest-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.9rem 0.4rem 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.1rem;
}
.dest-hero__flag { display: inline-flex; align-items: center; justify-content: center; color: var(--c-primary); }
.hero__eyebrow-icon { display: inline-flex; vertical-align: -3px; color: var(--c-primary); margin-right: 0.15rem; }
.dest-hero h1 { margin-bottom: 0.9rem; }
.dest-hero h1 em {
  font-style: normal;
  color: var(--c-primary);
}
.dest-hero__sub { max-width: 48ch; margin-bottom: 1.5rem; }
.dest-hero__trust {
  list-style: none;
  margin: 0 0 1.9rem;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.dest-hero__trust li { display: flex; align-items: center; gap: 0.6rem; font-size: var(--step--1); color: var(--c-ink-soft); }
.dest-hero__trust svg { color: var(--c-primary); flex: none; }
.dest-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.dest-hero__note { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--step--1); color: var(--c-ink-faint); }
.dest-hero__note svg { color: var(--c-gold); }

.dest-ticket {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-width: 400px;
  margin-inline: auto;
}
.dest-ticket__head {
  background: var(--c-ink);
  color: #fff;
  padding: 1.2rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.dest-ticket__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  flex: none;
}
.dest-ticket__head strong { display: block; font-size: 1.05rem; letter-spacing: -0.01em; }
.dest-ticket__head span { display: block; font-size: 0.78rem; color: rgba(255, 255, 255, 0.68); margin-top: 0.15rem; }
.dest-ticket__tear {
  position: relative;
  height: 26px;
  border-top: 2px dashed var(--c-line-strong);
  margin-inline: -1.4rem;
}
.dest-ticket__tear::before,
.dest-ticket__tear::after {
  content: "";
  position: absolute;
  top: -13px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
}
.dest-ticket__tear::before { left: -13px; }
.dest-ticket__tear::after { right: -13px; }
.dest-ticket__rows { list-style: none; margin: 0; padding: 1.3rem 1.4rem 0.4rem; }
.dest-ticket__rows li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--c-line);
  font-size: var(--step--1);
}
.dest-ticket__rows li:last-child { border-bottom: 0; }
.dest-ticket__rows .k {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.dest-ticket__rows .v { color: var(--c-ink); font-weight: 600; text-align: right; }
.dest-ticket__price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem 1.3rem;
  background: var(--c-mist);
}
.dest-ticket__price span { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-faint); }
.dest-ticket__price .amount, .dest-ticket__price ins, .dest-ticket__price bdi { font-family: var(--font-display); font-size: var(--step-2); color: var(--c-ink); font-weight: 600; }

@media (max-width: 900px) {
  .dest-hero__inner { grid-template-columns: 1fr; }
  .dest-ticket { max-width: 460px; }
}

.entry-content { font-size: var(--step-0); }
.entry-content h2 { margin-top: 2.2rem; }
.entry-content h3 { margin-top: 1.8rem; }
.entry-content ul, .entry-content ol { padding-left: 1.3rem; margin-bottom: 1.2rem; }
.entry-content li { margin-bottom: 0.45rem; }
.entry-content img { border-radius: var(--radius); margin-block: 1.5rem; }
.entry-content blockquote {
  margin: 1.8rem 0;
  padding: 1rem 1.4rem;
  border-left: 3px solid var(--c-primary);
  background: var(--c-mist);
  border-radius: 0 10px 10px 0;
  font-size: var(--step-1);
  color: var(--c-ink);
}
.entry-content table { width: 100%; border-collapse: collapse; margin-block: 1.5rem; font-size: var(--step--1); }
.entry-content th, .entry-content td { padding: 0.7rem 0.9rem; border: 1px solid var(--c-line); text-align: left; }
.entry-content th { background: var(--c-mist); color: var(--c-ink); font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }

.post-card {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--radius); overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.post-card__thumb { aspect-ratio: 16 / 9; background: var(--c-mist); overflow: hidden; }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.post-card__date { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-faint); margin-bottom: 0.5rem; }
.post-card h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.post-card h3 a { color: inherit; }
.post-card p { font-size: var(--step--1); }

.pagination { display: flex; gap: 0.4rem; justify-content: center; margin-top: 2.5rem; flex-wrap: wrap; }
.pagination .page-numbers {
  display: grid; place-items: center;
  min-width: 40px; height: 40px; padding-inline: 0.6rem;
  border: 1px solid var(--c-line-strong); border-radius: 10px;
  color: var(--c-ink); font-size: var(--step--1);
}
.pagination .page-numbers:hover { border-color: var(--c-primary); }
.pagination .current { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }

.error-404 { text-align: center; padding-block: clamp(4rem, 10vw, 8rem); }
.error-404 .code {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.3em;
  color: var(--c-accent); text-transform: uppercase; margin-bottom: 1rem;
}

/* Destination page price box (kept from the design system) */
.service {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
.service__aside { position: sticky; top: calc(var(--header-h) + 1.25rem); }
.service__facts {
  list-style: none; margin: 1.75rem 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--radius);
  overflow: hidden;
}
.service__facts li { background: #fff; padding: 1rem 1.1rem; }
.service__facts .k {
  display: block; font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-faint); margin-bottom: 0.3rem;
}
.service__facts .v { color: var(--c-ink); font-weight: 600; font-size: var(--step-0); }

.pricebox {
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: 1.5rem;
}
.pricebox__amount {
  font-family: var(--font-display); font-size: var(--step-3);
  color: var(--c-ink); font-weight: 600; letter-spacing: -0.03em; line-height: 1;
}
.pricebox__label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-faint); margin-bottom: 0.5rem; }
.pricebox ul { list-style: none; margin: 1.25rem 0; padding: 0; font-size: var(--step--1); }
.pricebox li { display: flex; gap: 0.55rem; padding: 0.32rem 0; }
.pricebox li svg { color: var(--c-primary); flex: none; margin-top: 3px; }
.pricebox__split {
  border-top: 1px dashed var(--c-line);
  margin-top: 1.1rem; padding-top: 1rem;
  font-size: 0.78rem; color: var(--c-ink-faint);
}
.pricebox__split div { display: flex; justify-content: space-between; padding: 0.2rem 0; }
.pricebox__govt-note { font-size: 0.72rem; color: var(--c-ink-faint); margin: 0.3rem 0 0; line-height: 1.4; }
.pricebox__estimate {
  margin-top: 0.9rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  background: var(--c-primary-tint);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: var(--step--1);
  color: var(--c-primary-dark);
}
.pricebox__estimate strong { font-family: var(--font-display); }
.pricebox__estimate [data-price-estimate-amount] { font-size: var(--step-1); letter-spacing: -0.02em; }
.travelprepdesk-locked-qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2em;
  font-weight: 600;
}

/* 12. Application form (multi-step) --------------------------------------*/
.appform {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.appform__head {
  padding: clamp(1.1rem, 3vw, 1.5rem) clamp(1.25rem, 3vw, 2rem);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-mist);
}
/* The real, accessible step list — screen readers still get each step's
   name and current/complete state; sighted users get the counter and bar
   below instead, which reads far better at the narrow widths this runs at. */
.appform__steps[hidden] { display: none; }

.appform__progress-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
  font-weight: 700;
  color: var(--c-ink);
}
.appform__count { font-size: 0.92rem; }
.appform__stepname { font-size: 0.92rem; color: var(--c-ink-soft); font-weight: 600; }

.appform__progress {
  height: 8px;
  border-radius: 999px;
  background: var(--c-line);
  overflow: hidden;
}
.appform__progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--c-primary);
  transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* A quiet, centred trust strip — the one thing focus mode had none of
   before, which is exactly when a traveler most wants reassurance. */
.appform__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--c-line);
  background: #fff;
}
.appform__trust li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  color: var(--c-ink-soft);
  white-space: nowrap;
}
.appform__trust li:not(:last-child) { padding-right: 1.4rem; border-right: 1px solid var(--c-line); }
.appform__trust svg { color: var(--c-primary); flex: none; }
@media (max-width: 560px) {
  .appform__trust li:not(:last-child) { border-right: 0; padding-right: 0; }
  .appform__trust { gap: 0.4rem 0.9rem; }
}

/* Each step's own heading reads as a centred, conversational prompt rather
   than a form-section label — matches how a single-purpose "apply" flow is
   usually written, and draws the eye back to center after a left-aligned
   field grid on the step before. */
.appform__panel > h3 {
  text-align: center;
  font-size: var(--step-2);
}
.appform__panel > p.hint {
  text-align: center;
  max-width: 42ch;
  margin-inline: auto;
  color: var(--c-ink-soft);
}

/* A small icon ahead of a field's own label. Additive only — a field with
   no recognized icon just has a plain label, exactly as before. */
.field-icon {
  display: inline-flex;
  margin-right: 0.35rem;
  color: var(--c-primary);
  vertical-align: -2px;
}

/* Rounder fields, scoped to the application form only, since the
   input/select styling above is shared with the Contact form and elsewhere, and this
   specific pill-like roundness is a choice for the application flow, not a
   site-wide restyle. */
.appform__fields input[type="text"],
.appform__fields input[type="email"],
.appform__fields input[type="tel"],
.appform__fields input[type="date"],
.appform__fields input[type="number"],
.appform__fields select {
  border-radius: 999px;
  padding-inline: 1.1rem;
}
.appform__fields select { padding-right: 2.6rem; }
.appform__fields textarea { border-radius: var(--radius); }

/* Fully rounded, pill-shaped step and submit buttons for the form's own
   navigation specifically, so the site's other buttons keep their usual
   shape; this is scoped to the application flow only. */
.btn--pill {
  border-radius: 999px;
  padding-inline: 1.5rem;
}
.btn--pill span { display: inline-flex; align-items: center; }
.btn--pill svg { flex: none; }
.appform__nav .btn--pill:not(.btn--ghost) { display: inline-flex; align-items: center; gap: 0.5rem; }
.appform__nav .btn--ghost.btn--pill { display: inline-flex; align-items: center; gap: 0.5rem; }

.appform__body { padding: clamp(1.5rem, 4vw, 2.5rem); }
.appform__panel { display: none; }
.appform__panel.is-active { display: block; animation: fadeUp 0.28s ease both; }
/* The hidden attribute ships in the markup so the form is sane without JS;
   the is-active class wins once the script takes over. */
.appform__panel[hidden].is-active { display: block; }
.appform__panel h3 { font-size: var(--step-2); margin-bottom: 0.35rem; letter-spacing: -0.01em; }
.appform__panel > p.hint { font-size: var(--step--1); color: var(--c-ink-faint); margin-bottom: 1.75rem; max-width: 60ch; }

.appform .row-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; }

.appform__nav {
  display: flex; gap: 0.75rem; justify-content: space-between;
  padding-top: 1.6rem; margin-top: 0.75rem;
  border-top: 1px dashed var(--c-line);
}
/* The submit button's own label is set per form and can run long
   ("Continue to payment"), so it gets the flexible share of the row while
   Back keeps its natural width. Stops a long label wrapping onto three
   lines in a fixed half-width pill at phone widths. */
.appform__nav .btn--lg.btn--pill { flex: 1; font-size: var(--step-0); padding-inline: 1.1rem; white-space: normal; line-height: 1.25; }
.appform__nav .btn--lg.btn--pill span { width: 100%; justify-content: center; text-align: center; }
/* Submit labels are set per form and can run long ("Continue to payment").
   Squeezed into half a row at phone widths that wraps awkwardly no matter
   how the font is tuned, so below 480px the two buttons stack instead,
   full width each, which is also just a normal mobile checkout pattern. */
@media (max-width: 480px) {
  .appform__nav:has(.btn--lg) { flex-direction: column-reverse; }
  .appform__nav:has(.btn--lg) .btn--pill { width: 100%; }
}

.appform__review dl { margin: 0; }
.appform__review .rrow {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.65rem 0; border-bottom: 1px dashed var(--c-line);
  font-size: var(--step--1);
}
.appform__review .rrow dt { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-faint); margin: 0; }
.appform__review .rrow dd { margin: 0; color: var(--c-ink); font-weight: 600; text-align: right; }

.appform__error {
  display: none;
  background: rgba(178, 58, 72, 0.08);
  border-left: 3px solid var(--c-accent);
  color: var(--c-accent);
  padding: 0.85rem 1rem;
  border-radius: 8px;
  font-size: var(--step--1);
  margin-bottom: 1.1rem;
}
.appform__error.is-visible { display: block; }

@media (max-width: 620px) {
  .appform__steps li { font-size: 0; padding-top: 2.3rem; }
  .appform__steps li::before { width: 1.7rem; height: 1.7rem; }
}

.btn.is-loading { position: relative; color: transparent !important; }
.btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}

/* 13. Motion & accessibility ---------------------------------------------*/
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes spin { to { transform: rotate(360deg); } }
  100% { opacity: 0.9; transform: rotate(-14deg) scale(1); }
}

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* Never hide content on a builder canvas — you have to see what you edit. */
.elementor-editor-active .reveal,


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* Responsive --------------------------------------------------------------*/
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; }
  .doccard { margin-top: 1rem; }
  .service { grid-template-columns: 1fr; }
  .service__aside { position: static; }
  .checkout-columns { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
}

@media (max-width: 860px) {
  .nav-toggle { display: grid; }
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(340px, 86vw);
    background: #fff;
    padding: calc(var(--header-h) + 1.5rem) 1.5rem 2rem;
    box-shadow: var(--shadow-lg);
    transform: translateX(105%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    z-index: 99;
  }
  .nav.is-open { transform: none; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav > div > ul > li { border-bottom: 1px solid var(--c-line); }
  .nav a { padding: 0.9rem 0; font-size: 1.05rem; }
  .nav .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; padding: 0 0 0.5rem 0.9rem;
  }
  .nav-scrim {
    position: fixed; inset: 0; background: rgba(16, 31, 51, 0.45);
    opacity: 0; visibility: hidden; transition: all 0.25s ease; z-index: 98;
  }
  body.nav-open .nav-scrim { opacity: 1; visibility: visible; }
  .cta-band { grid-template-columns: 1fr; }
  .topbar__links { display: none; }
}

@media (max-width: 620px) {
  :root { --header-h: 64px; }
  .hero__picker { flex-direction: column; padding: 0.8rem; }
  .hero__picker select { padding-bottom: 0.8rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-legal { flex-direction: column; align-items: flex-start; }
  .appform__steps li { font-size: 0.56rem; letter-spacing: 0.05em; }
  .btn { width: 100%; }
  .header-actions .btn { width: auto; }
  .hero__assurances { gap: 0.5rem 1rem; }
}

/* Misc utilities added late ----------------------------------------------*/
.widget { margin-bottom: 2rem; }
.widget-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.widget ul { list-style: none; margin: 0; padding: 0; font-size: var(--step--1); }
.widget li { padding: 0.35rem 0; border-bottom: 1px solid var(--c-line); }

@media (max-width: 860px) {
  .hide-on-mobile { display: none !important; }
}


/* ==========================================================================
   Static-site additions: checkout, confirmation, tracking, contact, tables
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.split__aside { position: sticky; top: calc(var(--header-h) + 1.25rem); }

.panel {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 1.9rem);
  box-shadow: var(--shadow-sm);
}
.panel + .panel { margin-top: 1.25rem; }
.panel h2 { font-size: var(--step-2); }
.panel h3 { font-size: var(--step-1); }

.summary { list-style: none; margin: 0; padding: 0; font-size: var(--step--1); }
.summary li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.55rem 0; border-bottom: 1px dashed var(--c-line);
}
.summary li:last-child { border-bottom: 0; }
.summary .k {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--c-ink-faint);
}
.summary .v { color: var(--c-ink); font-weight: 600; text-align: right; }

.total {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 2px solid var(--c-ink);
}
.total__label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-faint); }
.total__value { font-family: var(--font-display); font-size: var(--step-3); font-weight: 600; color: var(--c-ink); letter-spacing: -0.03em; }

.paybox { margin-top: 1.5rem; }
.paybox__note {
  font-size: 0.78rem; color: var(--c-ink-faint);
  display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 1rem;
}
.paybox__note svg { flex: none; margin-top: 2px; color: var(--c-primary); }
#paypal-buttons { min-height: 52px; }

/* WooCommerce checkout ---------------------------------------------------- */
.woocommerce-checkout .woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-error, .woocommerce-message, .woocommerce-info {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  font-size: var(--step--1);
  background: var(--c-mist);
  border-left: 3px solid var(--c-primary);
  color: var(--c-ink-soft);
}
.woocommerce-error { border-left-color: var(--c-accent); background: rgba(178, 58, 72, 0.06); color: var(--c-accent); }
.woocommerce-error li { list-style: none; }

.woocommerce-checkout #customer_details {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
  margin-bottom: 2.5rem;
}
.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2 { min-width: 0; }
.woocommerce-checkout h3 {
  font-size: var(--step-1);
  margin-bottom: 1.1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--c-line);
}
.woocommerce-checkout .form-row { margin-bottom: 1.1rem; }
.woocommerce-checkout .form-row label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin-bottom: 0.4rem;
}
.woocommerce-checkout .form-row .required { color: var(--c-accent); text-decoration: none; }
.woocommerce-checkout .form-row.woocommerce-invalid input,
.woocommerce-checkout .form-row.woocommerce-invalid select { border-color: var(--c-accent); }
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last { display: inline-block; width: calc(50% - 0.5rem); }
.woocommerce-checkout .form-row-first { margin-right: 1rem; }
@media (max-width: 480px) {
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last { width: 100%; margin-right: 0; }
}
.select2-container--default .select2-selection--single {
  height: auto !important;
  padding: 0.8rem 0.95rem !important;
  border: 1px solid var(--c-line-strong) !important;
  border-radius: 10px !important;
}
.select2-container .select2-selection__rendered { padding: 0 !important; line-height: 1.4 !important; color: var(--c-ink) !important; }
.select2-container .select2-selection__arrow { height: 100% !important; }

.woocommerce-checkout #order_review_heading { display: none; }
.woocommerce-checkout #order_review {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  position: sticky;
  top: calc(var(--header-h) + 1.25rem);
}
.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0;
}
.woocommerce-checkout-review-order-table thead { display: none; }
.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th {
  padding: 0.7rem 0;
  border-bottom: 1px dashed var(--c-line);
  font-size: var(--step--1);
  text-align: left;
}
.woocommerce-checkout-review-order-table .product-name { color: var(--c-ink-soft); }
.woocommerce-checkout-review-order-table .product-name .product-quantity { color: var(--c-ink-faint); font-family: var(--font-mono); font-size: 0.78em; }
.woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout-review-order-table th { text-align: right; font-weight: 600; color: var(--c-ink); white-space: nowrap; }
.woocommerce-checkout-review-order-table .cart-subtotal th,
.woocommerce-checkout-review-order-table .fee th,
.woocommerce-checkout-review-order-table .tax-rate th { font-weight: 400; color: var(--c-ink-faint); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
  border-bottom: 0;
  border-top: 2px solid var(--c-ink);
  padding-top: 1rem;
  font-size: var(--step-1);
}
.woocommerce-checkout-review-order-table .order-total th { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; color: var(--c-ink-faint); }
.woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount { font-family: var(--font-display); font-size: var(--step-2); color: var(--c-ink); }

.woocommerce-checkout-payment { margin-top: 1.5rem; }
ul.wc_payment_methods { list-style: none; margin: 0; padding: 0; }
li.wc_payment_method {
  border: 1.5px solid var(--c-line);
  border-radius: var(--radius);
  margin-bottom: 0.7rem;
  padding: 0.9rem 1rem;
  transition: border-color 0.15s ease;
}
li.wc_payment_method:has(input:checked) { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-tint); }
li.wc_payment_method label { font-weight: 600; color: var(--c-ink); cursor: pointer; }
li.wc_payment_method input[type="radio"] { accent-color: var(--c-primary); margin-right: 0.6rem; }
li.wc_payment_method img { height: 20px; vertical-align: middle; margin-left: 0.5rem; }
.payment_box {
  margin-top: 0.8rem;
  padding: 0.9rem 1rem 0.2rem;
  background: var(--c-mist);
  border-radius: var(--radius);
  font-size: var(--step--1);
  color: var(--c-ink-soft);
}
.payment_box p:first-child { margin-top: 0; }

.woocommerce-terms-and-conditions-wrapper { margin: 1.25rem 0; font-size: var(--step--1); }
.woocommerce-form__label-for-checkbox { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; }
.woocommerce-form__input-checkbox { margin-top: 0.2rem; accent-color: var(--c-primary); }

.woocommerce-checkout .place-order { margin-top: 1.25rem; }
#place_order {
  width: 100%;
  font-size: var(--step-0);
  padding-block: 1rem;
}

.checkout_coupon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  background: var(--c-mist);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1.5rem;
}
.checkout_coupon .form-row { flex: 1 1 220px; margin-bottom: 0; }
.checkout_coupon .form-row label { display: none; }

@media (max-width: 900px) {
  .woocommerce-checkout #customer_details { grid-template-columns: 1fr; }
  .woocommerce-checkout #order_review { position: static; }
}

.notice {
  border-radius: 10px;
  padding: 1rem 1.15rem;
  font-size: var(--step--1);
  line-height: 1.6;
  background: var(--c-mist);
  border-left: 3px solid var(--c-primary);
  color: var(--c-ink-soft);
}
.notice--warn { border-left-color: var(--c-gold); background: rgba(216, 160, 61, 0.09); }
.notice--error { border-left-color: var(--c-accent); background: rgba(178, 58, 72, 0.07); color: var(--c-accent); }
.notice strong { color: var(--c-ink); }
.notice--error strong { color: inherit; }

.confirm-mark {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--c-primary-tint); color: var(--c-primary-dark);
  display: grid; place-items: center; margin: 0 auto 1.25rem;
}
.confirm-ref {
  font-family: var(--font-mono);
  font-size: var(--step-2);
  letter-spacing: 0.12em;
  color: var(--c-ink);
  background: var(--c-mist);
  border: 1px dashed var(--c-line-strong);
  border-radius: 10px;
  padding: 0.9rem 1.2rem;
  display: inline-block;
  margin: 0.5rem 0 1.5rem;
}

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  position: relative; padding: 0 0 1.4rem 2rem;
  font-size: var(--step--1); color: var(--c-ink-soft);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--c-line-strong); background: #fff;
}
.timeline li::after {
  content: ""; position: absolute; left: 6px; top: 19px; bottom: 2px;
  width: 1px; background: var(--c-line-strong);
}
.timeline li:last-child::after { display: none; }
.timeline li.is-done::before { border-color: var(--c-primary); background: var(--c-primary); }
.timeline li strong { display: block; color: var(--c-ink); }

.table-wrap { overflow-x: auto; }
table.data {
  width: 100%; border-collapse: collapse; font-size: var(--step--1);
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
}
table.data th, table.data td { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--c-line); text-align: left; }
table.data th {
  font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--c-ink); background: var(--c-mist);
}
table.data tr:last-child td { border-bottom: 0; }

.prose { max-width: 72ch; }
.prose h2 { margin-top: 2.2rem; font-size: var(--step-2); }
.prose h3 { margin-top: 1.7rem; font-size: var(--step-1); }
.prose ul, .prose ol { padding-left: 1.3rem; margin-bottom: 1.2rem; }
.prose li { margin-bottom: 0.45rem; }
.prose .meta {
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-faint);
  margin-bottom: 2rem;
}

.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.contact-card {
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: 1.25rem;
}
.contact-card .k {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--c-ink-faint); display: block; margin-bottom: 0.4rem;
}
.contact-card a { font-weight: 600; }

.badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3rem 0.65rem; border-radius: var(--radius-pill);
  background: var(--c-primary-tint); color: var(--c-primary-dark);
}

@media (max-width: 1024px) {
  .split { grid-template-columns: 1fr; }
  .split__aside { position: static; }
}

/* Form builder output ------------------------------------------------------*/
.appform__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
}
.appform__fields .f-full { grid-column: 1 / -1; }
.appform__fields .check { grid-column: 1 / -1; margin-bottom: 1.1rem; }
.appform__fields > .traveler-blocks { grid-column: 1 / -1; }

/* Repeatable traveler blocks -------------------------------------------- */
.traveler-blocks { margin-top: 0.4rem; }
.traveler-block {
  padding-top: 1.4rem;
  margin-top: 1.1rem;
  border-top: 1px dashed var(--c-line);
}
.traveler-block:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.traveler-block__title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin: 0 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.traveler-block__title::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-primary);
  flex: none;
}
.traveler-block .appform__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
}
.field-help {
  display: block;
  font-size: 0.78rem;
  color: var(--c-ink-faint);
  margin-top: 0.35rem;
  line-height: 1.5;
}
.adk-file {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.adk-file input[type="file"] {
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--radius);
  padding: 0.65rem 0.8rem;
  font-size: var(--step--1);
  background: var(--c-paper);
  color: var(--c-ink-soft);
  width: 100%;
}
.adk-file__status { font-size: 0.78rem; color: var(--c-ink-faint); }
.adk-file.is-uploading .adk-file__status { color: var(--c-primary); }
.adk-file.is-done .adk-file__status { color: var(--c-primary); font-weight: 600; }
.adk-file.is-error .adk-file__status { color: var(--c-accent); font-weight: 600; }
@media (max-width: 620px) {
  .appform__fields { grid-template-columns: 1fr; }
}

/* Enquiry-form success panel ----------------------------------------------*/
.appform__done {
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
}
.appform__done::before {
  content: "";
  display: block;
  width: 3.5rem; height: 3.5rem;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: var(--c-primary-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6b4d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px;
}
.appform__done h3 { font-size: var(--step-2); margin-bottom: 0.5rem; }
.appform__done p { color: var(--c-ink-soft); max-width: 46ch; margin-inline: auto; }
.appform__done .confirm-ref {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  background: var(--c-mist);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--c-ink);
}

/* Non-sticky header option ------------------------------------------------*/
.site-header.is-static { position: static; }

.agency-credit { color: inherit; opacity: 0.8; }
.agency-credit:hover { opacity: 1; }

/* Honeypot — off-screen rather than display:none, which some bots detect */
.travelprepdesk-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   About page
   ========================================================================== */

.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  align-items: start;
}
.compare__col {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem 1.5rem;
}
.compare__col.is-featured {
  border-color: var(--c-primary);
  box-shadow: 0 24px 54px -30px rgba(16, 31, 51, 0.4);
}
.compare__badge {
  position: absolute;
  top: -0.72rem;
  left: 1.5rem;
  background: var(--c-primary);
  color: var(--c-button-text);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
}
.compare__head { padding-bottom: 1rem; border-bottom: 1px solid var(--c-line); margin-bottom: 1.1rem; }
.compare__head h3 { margin-bottom: 0.2rem; }
.compare__price {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin: 0;
}
.compare__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.compare__list li {
  position: relative;
  padding-left: 1.9rem;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--c-ink-soft);
}
.compare__list li::before {
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
}
.compare__list li.is-yes::before {
  content: "✓";
  background: var(--c-primary-tint);
  color: var(--c-primary);
}
.compare__list li.is-no::before {
  content: "–";
  background: color-mix(in srgb, var(--c-ink-faint) 14%, transparent);
  color: var(--c-ink-faint);
}
.compare__note {
  margin: 1.2rem 0 0;
  padding-top: 1rem;
  border-top: 1px dashed var(--c-line);
  font-size: 0.86rem;
  color: var(--c-ink-faint);
}

/* The one promise worth its own block. */
.pledge {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  margin-top: 2rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-gold);
  border-radius: var(--radius);
}
.pledge__mark {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--c-primary-tint);
  color: var(--c-primary);
}
.pledge h3 { margin-bottom: 0.35rem; }
.pledge p { margin: 0; color: var(--c-ink-soft); }

/* Coverage chips */
.country-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.6rem;
}
.country-chips a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0.9rem;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.country-chips a:hover {
  border-color: var(--c-primary);
  transform: translateY(-2px);
}
.country-chips__flag { font-size: 1.3rem; flex: none; }
.country-chips a span:not(.country-chips__flag) { font-weight: 600; font-size: 0.92rem; }
.country-chips small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin-top: 0.1rem;
}

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.cmethod {
  display: block;
  padding: 1.4rem 1.25rem;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.cmethod:hover {
  transform: translateY(-3px);
  border-color: var(--c-primary);
  box-shadow: 0 20px 42px -26px rgba(16, 31, 51, 0.45);
}
.cmethod--accent { background: var(--c-primary); border-color: var(--c-primary); }
.cmethod--accent .cmethod__icon { background: rgba(255, 255, 255, 0.18); color: #fff; }
.cmethod--accent .cmethod__label,
.cmethod--accent .cmethod__note { color: rgba(255, 255, 255, 0.75); }
.cmethod--accent .cmethod__value { color: #fff; }
.cmethod--accent:hover { border-color: var(--c-ink); }

.cmethod__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--c-primary-tint);
  color: var(--c-primary);
  margin-bottom: 0.9rem;
}
.cmethod__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin-bottom: 0.25rem;
}
.cmethod__value { display: block; font-size: 1rem; line-height: 1.3; word-break: break-word; }
.cmethod__note { display: block; font-size: 0.8rem; color: var(--c-ink-faint); margin-top: 0.4rem; }

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}
.contact-form-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 0 20px 50px -34px rgba(16, 31, 51, 0.4);
}
/* The form is already a card elsewhere; inside this one it should not be. */
.contact-form-card .appform {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
.contact-form-card .appform__head { display: none; }

.contact-aside { display: grid; gap: 1rem; position: sticky; top: calc(var(--header-h) + 1.25rem); }
.cbox {
  background: var(--c-mist);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.cbox h3 { font-size: 1rem; margin-bottom: 0.85rem; }
.cbox__times { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.cbox__times li { display: grid; gap: 0.25rem; }
.cbox__tag {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  color: var(--c-ink-faint);
}
.cbox__tag--urgent {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-button-text);
}
.cbox__times strong { font-size: 0.92rem; }
.cbox__list { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; font-size: 0.9rem; color: var(--c-ink-soft); }
.cbox__note { font-size: 0.82rem; color: var(--c-ink-faint); margin: 0.9rem 0 0; line-height: 1.5; }
.cbox__note--warn {
  background: #fff;
  border-left: 3px solid var(--c-gold);
  border-radius: 0 6px 6px 0;
  padding: 0.65rem 0.8rem;
  color: var(--c-ink-soft);
}
.cbox__address { font-style: normal; font-size: 0.92rem; color: var(--c-ink-soft); line-height: 1.6; }

@media (max-width: 880px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-aside { position: static; }
}

/* Order confirmation ------------------------------------------------------
   Replaces WooCommerce's default definition list. The page a traveler sees
   straight after paying, so it leads with reassurance and the reference
   they need, not an order-number table. -------------------------------- */
.adk-confirm { max-width: 980px; margin-inline: auto; }

.adk-confirm__head { text-align: center; margin-bottom: 2.25rem; }
.adk-confirm__tick {
  display: inline-grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--c-primary-tint);
  color: var(--c-primary);
  margin-bottom: 1.1rem;
}
.adk-confirm__head h1 { margin-bottom: 0.5rem; }
.adk-confirm__head .lede { max-width: 46ch; margin-inline: auto; }

/* The reference is the single most useful thing on this page, so it gets
   its own block rather than sitting in a row of order metadata. */
.adk-confirm__ref {
  text-align: center;
  background: var(--c-mist);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2.25rem;
}
.adk-confirm__ref-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin-bottom: 0.35rem;
}
.adk-confirm__ref-code {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
  letter-spacing: 0.06em;
  color: var(--c-ink);
}
.adk-confirm__ref-note {
  display: block;
  font-size: 0.8rem;
  color: var(--c-ink-faint);
  margin-top: 0.45rem;
}

.adk-confirm__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}
@media (max-width: 880px) {
  .adk-confirm__grid { grid-template-columns: 1fr; }
}

.adk-confirm__panel h2 { font-size: var(--step-1); margin-bottom: 1.25rem; }

.adk-confirm__steps { list-style: none; margin: 0; padding: 0; position: relative; }
.adk-confirm__steps li {
  position: relative;
  padding: 0 0 1.5rem 2.25rem;
}
.adk-confirm__steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--c-line-strong);
  background: #fff;
}
/* The connecting rail, drawn behind the dots. */
.adk-confirm__steps li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 1.4rem;
  bottom: -0.1rem;
  width: 2px;
  background: var(--c-line);
}
.adk-confirm__steps li:last-child::after { display: none; }
.adk-confirm__steps li.is-done::before { background: var(--c-primary); border-color: var(--c-primary); }
.adk-confirm__steps li.is-done::after { background: var(--c-primary); }
.adk-confirm__steps li.is-active::before {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px var(--c-primary-tint);
}
.adk-confirm__steps strong { display: block; margin-bottom: 0.2rem; }
.adk-confirm__steps span { color: var(--c-ink-soft); font-size: var(--step--1); line-height: 1.55; }

.adk-confirm__card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.25rem, 3vw, 1.6rem);
  position: sticky;
  top: calc(var(--header-h) + 1.25rem);
}
@media (max-width: 880px) { .adk-confirm__card { position: static; } }
.adk-confirm__card h3 {
  font-size: var(--step-0);
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--c-line);
}
.adk-confirm__meta { margin: 0 0 1.25rem; }
.adk-confirm__meta > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--c-line);
  font-size: var(--step--1);
}
.adk-confirm__meta > div:last-child { border-bottom: 0; }
.adk-confirm__meta dt {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.adk-confirm__meta dd { margin: 0; font-weight: 600; text-align: right; color: var(--c-ink); }

/* The icon sits beside a single run of text. Using flex directly on the
   paragraph made every text node and inline link its own flex item, which
   scattered the sentence into columns; the icon is absolutely placed
   instead so the text stays one continuous paragraph. */
.adk-confirm__support {
  position: relative;
  margin: 1.1rem 0 0;
  padding-left: 1.5rem;
  font-size: 0.8rem;
  color: var(--c-ink-faint);
  line-height: 1.5;
}
.adk-confirm__support svg {
  position: absolute;
  left: 0;
  top: 0.15rem;
  color: var(--c-primary);
}

.adk-confirm__disclaimer { margin-top: 2.5rem; }

/* A quiet, destructive-action link. Deliberately not a button: it should be
   reachable but never compete with the primary action beside it. */
.adk-linkbtn {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 12px;
  color: #b32d2e;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.adk-linkbtn:hover { color: #8a2322; }

/* A custom uploaded destination icon sits in the same round tile the
   built-in line icons use, so a mixture of the two still lines up. */
.travelprepdesk-custom-icon {
  display: block;
  object-fit: contain;
  border-radius: 4px;
}

/* 14. Brand layer ---------------------------------------------------------
   Everything above is shared structure. This is the site's own design.
   Direction: contemporary product-site craft — a near-monochrome surface,
   one confident accent, real depth from layered hairlines and soft shadows,
   tight display type, and motion that stays under 200ms. Deliberately not
   the rounded pastel-card language of the operator's other property.
   ------------------------------------------------------------------------ */

:root {
  --shadow-xs: 0 1px 2px rgba(11, 18, 16, 0.05);
  --shadow-sm: 0 1px 2px rgba(11, 18, 16, 0.05), 0 2px 6px -2px rgba(11, 18, 16, 0.06);
  --shadow-md: 0 4px 12px -4px rgba(11, 18, 16, 0.10), 0 14px 34px -16px rgba(11, 18, 16, 0.16);
  --shadow-lg: 0 24px 64px -28px rgba(11, 18, 16, 0.30);
  --ring: 0 0 0 3px var(--c-primary-tint);
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --header-h: 72px;
  --hair: 1px solid var(--c-line);
}

html { -webkit-text-size-adjust: 100%; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.03em; }
h1 { line-height: 1.04; font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.15rem); }
h2 { line-height: 1.1; font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.6rem); }
h3 { letter-spacing: -0.02em; }
.lede { font-size: clamp(1.02rem, 0.97rem + 0.3vw, 1.18rem); line-height: 1.6; }

::selection { background: var(--c-primary); color: #fff; }
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: 4px; }

/* --- Top bar ----------------------------------------------------------- */
.topbar {
  background: var(--c-ink);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.76rem;
  letter-spacing: 0;
  text-transform: none;
  border: 0;
}
.topbar a { color: rgba(255, 255, 255, 0.78); }
.topbar a:hover { color: #fff; }
.topbar__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-primary); }

/* --- Header ------------------------------------------------------------ */
.site-header {
  border-bottom: var(--hair);
  background: transparent;
}
/* The blur lives on a pseudo-element, not on .site-header itself: a
   backdrop-filter makes an element a containing block for position:fixed
   descendants, which trapped the mobile nav drawer inside the header. */
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: saturate(180%) blur(12px);
  background: color-mix(in srgb, var(--c-header-bg) 82%, transparent);
}
.site-header.is-stuck { box-shadow: var(--shadow-xs); }
.site-header__inner { min-height: var(--header-h); }

/* Reading-progress hairline. Pure CSS where supported, invisible where not. */
.scroll-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
}
@supports (animation-timeline: scroll()) {
  .scroll-progress { animation: adk-progress linear both; animation-timeline: scroll(root block); }
}
@keyframes adk-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.brand__mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--c-ink);
  box-shadow: none;
}
.brand__name { font-weight: 600; letter-spacing: -0.03em; }
.brand__name small { letter-spacing: 0.02em; text-transform: none; }

.nav ul { gap: 0.2rem; flex-wrap: nowrap; }
.nav a {
  position: relative;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  font-family: var(--font-body);
  color: var(--c-ink-soft);
  white-space: nowrap;
  transition: color 0.16s var(--ease), background-color 0.16s var(--ease);
}
.nav a:hover { color: var(--c-ink); background: var(--c-mist); }
.nav .sub-menu { border-radius: 12px; box-shadow: var(--shadow-md); border: var(--hair); }

/* --- Buttons ----------------------------------------------------------- */
.btn {
  border-radius: 10px;
  padding: 0.82rem 1.3rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  box-shadow: var(--shadow-xs);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease),
              background-color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn--lg { padding: 1rem 1.6rem; font-size: 1rem; }
.btn--sm { padding: 0.55rem 0.9rem; font-size: 0.84rem; }
.btn--ghost { box-shadow: none; border: var(--hair); }
.btn--ghost:hover { border-color: var(--c-ink); background: var(--c-mist); }
.btn--pill { border-radius: 999px; }

/* --- Hero -------------------------------------------------------------- */
.hero {
  background: var(--c-paper);
  color: var(--c-ink-soft);
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3rem, 6vw, 5rem);
  border-bottom: var(--hair);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--c-line) 1px, transparent 0);
  background-size: 28px 28px;
  opacity: 0.5;
  mask-image: radial-gradient(80% 60% at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(80% 60% at 50% 0%, #000 0%, transparent 75%);
  pointer-events: none;
}
.hero::after {
  inset: -30% -10% auto auto;
  right: -10%;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-primary-tint) 0%, transparent 65%);
  background-size: auto;
  mask-image: none;
  -webkit-mask-image: none;
  opacity: 0.85;
}
.hero--stack .hero__inner { display: block; max-width: 1180px; margin-inline: auto; text-align: left; }
.hero--stack .hero__copy { max-width: 760px; margin-inline: 0; }
.hero h1 { color: var(--c-ink); margin-bottom: 1.15rem; }
.hero h1 em { font-style: normal; color: var(--c-primary); background-image: none; }
.hero__sub { color: var(--c-ink-soft); max-width: 60ch; margin-inline: 0; }
.hero__cta { margin-top: 2rem; }
.hero__cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }
@media (max-width: 640px) { .hero__cta-row { flex-direction: column; align-items: stretch; } .hero__cta-row .btn { text-align: center; } }

.hero__assurances {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.6rem 0.75rem;
  margin-top: 1.9rem;
}
.hero__assurances li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.8rem 0.45rem 0.6rem;
  border: var(--hair);
  border-radius: 999px;
  background: var(--c-paper);
  color: var(--c-ink-soft);
  font-size: 0.83rem;
  box-shadow: var(--shadow-xs);
}
.hero__assurances svg { color: var(--c-primary); background: none; }

/* Destination selector ---------------------------------------------------- */
.hero__tiles { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.hero__tiles-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin-bottom: 0.9rem;
}
.htiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; }
.htile {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.15rem;
  border: var(--hair);
  border-radius: 14px;
  background: var(--c-paper);
  color: var(--c-ink);
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
}
.htile:hover, .htile:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--c-primary) 45%, var(--c-line));
  box-shadow: var(--shadow-md);
}
.htile__flag {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 10px;
  background: var(--c-primary-tint);
  color: var(--c-primary-dark);
}
.htile__body { display: grid; gap: 0.12rem; min-width: 0; }
.htile__country { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; }
.htile__doc {
  font-size: 0.78rem;
  color: var(--c-ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.htile__go {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--c-ink);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
}
.htile__go svg { transition: transform 0.18s var(--ease); color: var(--c-primary); }
.htile:hover .htile__go svg { transform: translateX(3px); }

/* --- Section furniture -------------------------------------------------- */
.section-head { max-width: 680px; margin-inline: 0; text-align: left; padding-top: 0; }
.section-head::before { display: none; }
.section-head h2 { padding-bottom: 0; }
.section-head h2::after { display: none; }
.section-head p { margin-inline: 0; color: var(--c-ink-soft); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center p { margin-inline: auto; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem 0.35rem 0.6rem;
  border: var(--hair);
  border-radius: 999px;
  background: var(--c-paper);
  color: var(--c-ink-soft);
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 1.15rem;
}
.eyebrow::before {
  display: block;
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-primary);
}
.section--ink .eyebrow, .section--primary .eyebrow {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.8);
}
.section--mist { background: var(--c-mist); }

/* --- Destination ledger -------------------------------------------------- */
.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  border: var(--hair);
  border-radius: 18px;
  background: var(--c-paper);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.lrow {
  position: relative;
  display: grid;
  grid-template-columns: 2.4rem 2.8rem minmax(190px, 1.4fr) repeat(4, minmax(0, 1fr)) 2.6rem;
  align-items: center;
  gap: 1rem;
  padding: 1.35rem 1.4rem;
  border-bottom: var(--hair);
  transition: background-color 0.18s var(--ease);
}
.lrow:last-child { border-bottom: 0; }
.lrow:hover { background: var(--c-mist); }
.lrow__num { font-family: var(--font-mono); font-size: 0.76rem; color: var(--c-ink-faint); }
.lrow__flag {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 10px;
  background: var(--c-primary-tint);
  color: var(--c-primary-dark);
}
.lrow__id { display: grid; gap: 0.18rem; min-width: 0; }
.lrow__country { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; color: var(--c-ink); }
.lrow__doc { font-size: 0.83rem; color: var(--c-ink-faint); }
.lrow__cell { display: grid; gap: 0.22rem; min-width: 0; }
.lrow__cell .k {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.lrow__cell .v { font-size: 0.92rem; font-weight: 500; color: var(--c-ink); }
.lrow__cell .v em { font-style: normal; color: var(--c-ink-faint); font-weight: 400; font-size: 0.8rem; }
.lrow__price, .lrow__price .amount, .lrow__price bdi { font-size: 1rem; font-weight: 600; color: var(--c-ink); }
.lrow__go {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: var(--hair);
  background: var(--c-paper);
  color: var(--c-ink);
  font-size: 0;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.lrow__go svg { display: block; }
.lrow:hover .lrow__go { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.lrow__link { position: absolute; inset: 0; font-size: 0; text-indent: -9999px; }
.lrow__link:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -3px; border-radius: 12px; }

/* --- Stage rail ---------------------------------------------------------- */
.stages {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.stages--full { grid-template-columns: minmax(0, 1fr); }
.stages__rail { list-style: none; margin: 0; padding: 0; }
.stages__rail .stage {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1.35rem;
  align-items: start;
  padding: 0 0 2.2rem;
  border: 0;
  background: transparent;
}
.stages__rail .stage::before {
  content: "";
  position: absolute;
  left: 1.24rem;
  top: 2.6rem;
  bottom: 0.4rem;
  width: 1px;
  background: var(--c-line);
}
.stages__rail .stage:last-child { padding-bottom: 0; }
.stages__rail .stage:last-child::before { display: none; }
.stage__num {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: var(--hair);
  background: var(--c-paper);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--c-primary);
  box-shadow: var(--shadow-xs);
}
.stage__body { min-width: 0; padding-top: 0.15rem; }
.stage__body h3 { font-size: 1.14rem; margin-bottom: 0.4rem; }
.stages__rail .stage__code {
  display: block;
  margin: 0 0 0.4rem;
  padding: 0;
  background: none;
  color: var(--c-ink-faint);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
}
.stages__rail .stage__time {
  display: inline-block;
  margin-top: 0.85rem;
  padding: 0.3rem 0.65rem;
  border: var(--hair);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--c-ink-soft);
}
.stages__aside { position: sticky; top: calc(var(--header-h) + 24px); }
.stages__aside .doccard { border: var(--hair); border-radius: 18px; box-shadow: var(--shadow-md); }

/* --- Value props --------------------------------------------------------- */
.vprop {
  border-radius: 16px;
  background: var(--c-paper);
  border: var(--hair);
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
.vprop:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.vprop__icon { border-radius: 11px; background: var(--c-primary-tint); color: var(--c-primary-dark); border: 0; }
.vprop h3 { font-size: 1.05rem; }
.section--ink .vprop, .section--primary .vprop {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
.section--ink .vprop__icon, .section--primary .vprop__icon {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

/* --- Pricing ------------------------------------------------------------- */
.plan {
  border-radius: 18px;
  border: var(--hair);
  background: var(--c-paper);
  box-shadow: var(--shadow-xs);
}
.plan.is-featured {
  border-color: transparent;
  box-shadow: var(--shadow-lg), 0 0 0 1.5px var(--c-primary);
  outline: 0;
  transform: translateY(-6px);
}
.plan.is-featured::before {
  background: var(--c-primary);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 0.4rem 0.85rem;
  box-shadow: var(--shadow-sm);
}
.plan__price { font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem); letter-spacing: -0.035em; }
.plan .checklist svg, .plan .check { color: var(--c-primary); }

/* --- Reviews ------------------------------------------------------------- */
.review {
  border-radius: 16px;
  border: var(--hair);
  background: var(--c-paper);
  padding: 1.6rem;
  box-shadow: var(--shadow-xs);
}
.review::before { display: none; }
.review p { font-family: var(--font-body); font-size: 0.98rem; line-height: 1.6; color: var(--c-ink-soft); }
.review__stars { color: var(--c-gold); letter-spacing: 0.1em; }
.review__avatar { border-radius: 999px; background: var(--c-primary-tint); color: var(--c-primary-dark); }
.review__who { border-top: var(--hair); }

/* --- FAQ ----------------------------------------------------------------- */
.faq {
  border: var(--hair);
  border-radius: 18px;
  background: var(--c-paper);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.faq__item {
  border: 0;
  border-bottom: var(--hair);
  border-radius: 0;
  background: transparent;
  margin-bottom: 0;
  padding-inline: 1.5rem;
  box-shadow: none;
}
.faq__item:last-child { border-bottom: 0; }
.faq__item.is-open { background: var(--c-mist); border-color: var(--c-line); box-shadow: none; }
.faq__q { font-size: 1.02rem; font-weight: 600; padding: 1.35rem 0; letter-spacing: -0.015em; }
.faq__icon { border-radius: 8px; border: var(--hair); background: var(--c-paper); }

/* --- Stat band ----------------------------------------------------------- */
.logos { background: var(--c-ink); border-block: 0; padding-block: 2.6rem; }
.logos__label { color: rgba(255, 255, 255, 0.45); font-size: 0.76rem; }
.logos__stat b {
  font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  color: #fff;
}
.logos__stat span { color: rgba(255, 255, 255, 0.55); }

/* --- CTA ----------------------------------------------------------------- */
.cta-band {
  background: var(--c-ink);
  border-radius: 22px;
  border: 0;
  overflow: hidden;
}
.cta-band::before {
  display: block;
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.10) 0%, transparent 62%);
  opacity: 1;
  pointer-events: none;
}
.cta-band h2 { color: #fff; }

/* --- Disclaimer / footer -------------------------------------------------- */
.disclaimer {
  border-radius: 14px;
  background: var(--c-mist);
  border: var(--hair);
  border-left: 3px solid var(--c-primary);
}
.site-footer::before { display: none; }
.site-footer h4 { letter-spacing: 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); }

/* --- Forms --------------------------------------------------------------- */
.appform, .appform__panel, .appform__body { border-radius: 18px; }
.appform__progress-fill { background: var(--c-primary); }
input, select, textarea { border-radius: 10px; }
input:focus, select:focus, textarea:focus { box-shadow: var(--ring); border-color: var(--c-primary); }

/* --- Persistent action bar -------------------------------------------------
   Shown at every width, not just mobile — travelsmarttravelfast.com keeps
   this bar visible on desktop too, so this theme's originally mobile-only
   bar now matches that. The class name stays `.mobile-cta` to avoid
   touching every PHP/JS reference to it. */
.mobile-cta {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  gap: 0.6rem;
  align-items: center;
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--c-paper) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: var(--hair);
}
body { padding-bottom: 74px; }
.mobile-cta__label {
  flex: 1 1 auto;
  font-size: 0.85rem;
  color: var(--c-ink-soft);
  display: none;
}
@media (min-width: 721px) {
  .mobile-cta { max-width: var(--wrap); margin-inline: auto; left: 0; right: 0; padding-inline: 2rem; }
  .mobile-cta__label { display: block; }
  .mobile-cta .btn { flex: 0 0 auto; }
}
.mobile-cta .btn { flex: 1 1 auto; justify-content: center; }
.mobile-cta__call {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  border-radius: 10px;
  border: var(--hair);
  color: var(--c-ink);
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1240px) {
  .nav a { padding: 0.5rem 0.5rem; font-size: 0.86rem; }
  .brand__name small { display: none; }
}

@media (max-width: 1080px) {
  .lrow { grid-template-columns: 2.2rem 2.6rem minmax(170px, 1.4fr) repeat(3, minmax(0, 1fr)) 2.4rem; }
  .lrow .lrow__cell:nth-of-type(3) { display: none; }
}

@media (max-width: 940px) {
  .stages { grid-template-columns: minmax(0, 1fr); }
  .stages__aside { position: static; max-width: 460px; }
}

@media (max-width: 860px) {
  .htiles { grid-template-columns: minmax(0, 1fr); }
  .plan.is-featured { transform: none; }
  .section-head--center { text-align: left; }
  .section-head--center p, .section-head--center .eyebrow { margin-inline: 0; }
}

@media (max-width: 780px) {
  .ledger { border-radius: 14px; }
  .lrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem 1rem;
    padding: 1.25rem 1.1rem;
  }
  .lrow__num { display: none; }
  .lrow__flag { flex: 0 0 auto; }
  .lrow__id { flex: 1 1 auto; }
  .lrow__go { order: 9; margin-left: auto; }
  .lrow__cell { flex: 1 1 calc(50% - 1rem); min-width: 128px; }
}

@media (max-width: 860px) {
  /* Undo the desktop nav row inside the drawer. */
  .nav ul { gap: 0; flex-wrap: wrap; }
  .nav a { white-space: normal; }
  .header-actions { margin-left: auto; }
}

@media (max-width: 720px) {
  .hero { padding-bottom: clamp(2.5rem, 6vw, 4rem); }
}

@media (max-width: 620px) {
  .htile { padding: 0.95rem; }
  .htile__go { font-size: 0; gap: 0; }
  .stages__rail .stage { grid-template-columns: 2.1rem minmax(0, 1fr); gap: 1rem; }
  .stages__rail .stage::before { left: 1.04rem; top: 2.3rem; }
  .stage__num { width: 2.1rem; height: 2.1rem; font-size: 0.7rem; }
  .faq__item { padding-inline: 1.1rem; }
  .site-header__inner { min-height: 64px; }
}

@media (max-width: 480px) {
  .lrow__cell { flex: 1 1 100%; }
  .hero__assurances li { font-size: 0.78rem; }
}

@media (pointer: coarse) {
  .htile, .lrow, .faq__q, .btn, .nav a { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .htile:hover, .vprop:hover { transform: none; }
  .scroll-progress { animation: none; }
}

/* --- Fallbacks for browsers without color-mix ------------------------------ */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .site-header { background: var(--c-header-bg); }
  .mobile-cta { background: var(--c-paper); }
  .htile:hover { border-color: var(--c-primary); }
}

/* --- 14c. Mobile pass -----------------------------------------------------
   Written against a 390px viewport. The desktop layout scaled down without
   breaking, but it was not designed for the screen: the top bar burned two
   lines on a sentence nobody reads on a phone, the eyebrow ran the full
   width, and the header ate 150px before the headline started.
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  /* The note is the point of this bar, so it stays. It is the links that
     go: the phone number is in the fixed action bar and the tracker is in
     the menu, so nothing is actually lost. */
  .topbar__inner { justify-content: flex-start; padding-block: 0.4rem; }
  .topbar__note { font-size: 0.68rem; line-height: 1.35; }
  .topbar__links { display: none; }

  /* The nav is fixed on mobile, so its margin-left:auto no longer pushes
     anything: without this the burger sits against the logo. */
  .header-actions { margin-left: auto; }

  .site-header__inner { min-height: 60px; }
  .brand img, .custom-logo { max-height: 34px; }
  .brand__mark { width: 32px; height: 32px; border-radius: 8px; }
  .brand__name { font-size: 1rem; }

  .hero { padding-block: 2rem 2.5rem; }
  .hero::before { background-size: 22px 22px; }

  /* Let the chip wrap instead of pressing against both edges. */
  .eyebrow {
    max-width: 100%;
    padding: 0.4rem 0.7rem 0.4rem 0.6rem;
    font-size: 0.72rem;
    line-height: 1.35;
    text-wrap: pretty;
  }
  .eyebrow::before { flex: 0 0 auto; }

  .hero h1 { font-size: clamp(2rem, 1.1rem + 4.4vw, 2.6rem); text-wrap: balance; }
  .hero__sub { font-size: 1rem; }

  /* Two per row where they fit, rather than three full-width bars. */
  .hero__assurances { gap: 0.5rem; margin-top: 1.5rem; }
  .hero__assurances li {
    padding: 0.4rem 0.7rem 0.4rem 0.55rem;
    font-size: 0.78rem;
    line-height: 1.3;
  }
  .hero__assurances svg { flex: 0 0 auto; }

  .section-head { padding-top: 0; }
  .cta-band { border-radius: 16px; text-align: left; }
  .ledger { border-radius: 14px; }
  .faq { border-radius: 14px; }
}

/* The bar sits above the home indicator and never covers the last row of
   the footer, which is where the legal links are. */
.mobile-cta {
  align-items: center;
  box-shadow: 0 -1px 0 var(--c-line), 0 -8px 24px -12px rgba(11, 18, 16, 0.18);
}
.mobile-cta .btn { padding-block: 0.85rem; }
.mobile-cta__call { height: 46px; }

@media (max-width: 400px) {
  .topbar__links { gap: 0.75rem; font-size: 0.72rem; }
  .hero { padding-block: 1.5rem 2rem; }
  .hero h1 { font-size: 1.95rem; }
  .hero__sub { font-size: 0.95rem; }
  .eyebrow { font-size: 0.68rem; }
  .wrap { padding-inline: 1.1rem; }
  .htile { padding: 0.85rem; }
  .htile__country { font-size: 0.98rem; }
  .lrow { padding: 1.1rem 0.9rem; }
  .faq__q { font-size: 0.95rem; }
  .plan__price { font-size: 1.9rem; }
}

/* Landscape phones: the fixed bar would eat a third of the viewport. */
@media (max-height: 460px) and (orientation: landscape) {
  .mobile-cta { display: none !important; }
  body { padding-bottom: 0; }
}