/*
 * Globalex eSIM storefront — the component kit every later customer-facing
 * screen reuses (purchase wizard, OTP, install page, cancellation form).
 *
 * Built to IS 5568 level AA from the first commit, because retrofitting it onto
 * a finished transactional flow is a rebuild (F70/F72):
 *   - a visible focus ring on EVERY interactive element, not only inputs. This
 *     was the relocation page's worst finding and it is answered here once.
 *   - text-bearing orange is #b85610 (4.80:1 on white). The brand's #e8731a is
 *     3.04:1 and fails, so it survives only as a decorative rule or fill.
 *   - form and control borders are #8a857b (~3.4:1), above the 3:1 that 1.4.11
 *     requires for a UI boundary.
 *   - targets are at least 44px, spacing is in rem so 200% zoom reflows rather
 *     than clips, and motion is off for anyone who asked for it.
 *
 * Written with logical properties (inline-start/end, padding-inline) so the
 * same file serves the RTL Hebrew site and the LTR English one.
 */

:root {
  --navy-950: #0e1a2e;
  --navy-900: #14233c;
  --navy-800: #1b2a4a;
  --orange: #b85610;          /* AA on white — the only orange allowed to carry text */
  --orange-bright: #e8731a;   /* decoration only: rules, fills, never text */
  --orange-wash: #fdf1e6;
  --bg: #ffffff;
  --bg-alt: #f6f4f0;
  --ink: #1b2330;
  --muted: #5c6472;
  --border: #ddd8cf;          /* decorative separators */
  --border-strong: #8a857b;   /* control boundaries — 1.4.11 */
  --focus: #14233c;
  --radius: 0.85rem;
  --radius-lg: 1.25rem;
  --shadow-card: 0 12px 30px -18px rgba(14, 26, 46, 0.3);
  --max-width: 1160px;
  --font: 'Rubik', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

/* a layout rule (display:flex/grid) must never beat the hidden attribute */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 0.6rem; font-weight: 700; line-height: 1.25; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; height: auto; }
a { color: var(--navy-800); text-underline-offset: 0.2em; }
a:hover { color: var(--orange); }

/* ---------- focus: the rule the relocation page was missing ---------- */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}
.site-header :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible { outline-color: #ffffff; }

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: -4rem;
  z-index: 50;
  background: #ffffff;
  color: var(--navy-950);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

.wrap { max-width: var(--max-width); margin: 0 auto; padding-inline: 1.5rem; }
.wrap-narrow { max-width: 880px; }

/* ---------- preview banner ---------- */
.preview-banner {
  background: #4a2c0a;
  color: #ffffff;
  padding: 0.7rem 1.5rem;
  text-align: center;
  font-size: 0.95rem;
}
.preview-warning {
  background: var(--orange-wash);
  border-inline-start: 4px solid var(--orange);
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}

/* ---------- header ---------- */
.site-header { background: var(--navy-950); color: #ffffff; }
.header-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding-block: 0.9rem;
}
.brand { display: flex; align-items: center; gap: 0.5rem; color: #ffffff; text-decoration: none; }
.brand-logo { width: 140px; height: auto; }
.brand-product {
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
}
.nav { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin-inline-end: auto; }
.nav a {
  color: #ffffff;
  text-decoration: none;
  padding: 0.6rem 0.25rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.nav a:hover { text-decoration: underline; color: #ffffff; }
.lang-toggle {
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-weight: 500;
}
.lang-toggle:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--orange); color: #ffffff; }
.btn-primary:hover { background: #9c4809; color: #ffffff; }
.btn-ghost { border-color: currentColor; color: inherit; background: transparent; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); color: inherit; }
.btn-disabled {
  background: var(--bg-alt);
  color: var(--muted);
  border-color: var(--border-strong);
  cursor: default;
}

/* ---------- hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--navy-950), var(--navy-800));
  color: #ffffff;
}
.hero-inner { padding-block: clamp(3rem, 7vw, 5.5rem); max-width: 820px; }
/* With a picture, the hero is two columns on a wide screen and one on a phone —
   the copy first either way, because that is what the page is for. */
.hero-inner.has-figure {
  max-width: var(--max-width);
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: center;
}
.hero-copy { max-width: 62ch; }
.hero-figure { display: flex; justify-content: center; }
.hero-figure img {
  width: min(15rem, 60vw);
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45));
}
@media (min-width: 880px) {
  .hero-inner.has-figure { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); }
  .hero-figure img { width: min(17rem, 100%); }
}
.hero h1 { color: #ffffff; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 600;
  color: #f3c79a;
  margin-bottom: 0.75rem;
}
.hero-sub { font-size: 1.1rem; color: #e6eaf1; max-width: 62ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block: 1.75rem 1rem; }
.hero-note { color: #c7d0dd; font-size: 0.95rem; }

/* ---------- sections ---------- */
.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section-alt { background: var(--bg-alt); }
.section-sub { color: var(--muted); max-width: 62ch; margin-bottom: 2rem; }

.value-grid, .plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
}
/* The featured row on the home page is a shop window of nine, not a catalogue:
   hold it to three a line so it reads as three even rows instead of 4-4-1. */
@media (min-width: 900px) {
  .plan-grid-showcase { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.value-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.value-card h3 { margin-bottom: 0.4rem; }
.value-card p { color: var(--muted); }

/* The showcase's two halves: countries, then a hairline, then the regions. */
.plan-group + .plan-group {
  margin-top: 2.25rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--border);
}
.plan-group-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin: 0 0 1rem;
}

/* ---------- plan cards ---------- */
.plan-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
.plan-card.is-featured { border-color: var(--orange); border-width: 2px; }
.plan-badge {
  align-self: flex-start;
  background: var(--orange-wash);
  color: #7a3a08;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  margin: 0;
}
.plan-name { margin: 0; }
.plan-desc { color: var(--muted); margin: 0; }
.plan-specs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.plan-specs li {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  font-size: 0.9rem;
}
.plan-price { margin: 0.4rem 0 0; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.plan-amount { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.plan-vat, .plan-relocation { color: var(--muted); font-size: 0.9rem; margin: 0; }
.plan-cta { margin: 0.75rem 0 0; }

.empty-note {
  background: var(--bg-alt);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  color: var(--muted);
}
.empty-note h2, .empty-note h3 { color: var(--ink); }

/* ---------- forms ---------- */
.field-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.field-group { flex: 1 1 14rem; }
.field-label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.field {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.6rem 0.85rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
.field:disabled { background: var(--bg-alt); color: var(--muted); }

/* ---------- destinations ---------- */
.dest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.75rem;
}
.dest-card { display: flex; }
.dest-link {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.1rem;
  min-height: 5.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
}
.dest-link:hover { border-color: var(--orange); color: inherit; }
.dest-name { font-weight: 600; font-size: 1.05rem; }
.dest-meta { color: var(--muted); font-size: 0.9rem; }
.dest-price { color: var(--ink); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.section-cta { margin-top: 1.5rem; }
.btn-on-light { border-color: var(--border-strong); }
.btn-on-light:hover { background: var(--bg); }

/* ---------- the chooser ---------- */
/* the destination control carries the page: give it room, and the two
   narrowing choices sit beside it once a destination is chosen */
.field-group-wide { flex: 2 1 22rem; }
.field-hint { color: var(--muted); font-size: 0.9rem; margin: 0.4rem 0 0; }
.chooser-more { color: var(--muted); margin-bottom: 1rem; }

.chooser {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.75rem;
}
.chooser-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0 0; }
.chooser-count { color: var(--muted); margin-bottom: 1rem; }
.plan-cover { color: var(--muted); margin: 0; font-size: 0.95rem; }

/* ---------- device check ---------- */
.device-check {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.device-result { margin-block: 1.1rem 0.5rem; font-weight: 600; min-height: 1.6rem; }
.device-result.is-yes { color: #1d6b32; }
.device-result.is-no { color: #9a2214; }
.device-note { font-weight: 400; color: var(--muted); display: block; }
.device-hint, .device-source { color: var(--muted); font-size: 0.9rem; margin: 0.5rem 0 0; }

/* ---------- steps ---------- */
.steps { display: grid; gap: 1.25rem; counter-reset: step; }
.step { display: flex; gap: 1rem; align-items: flex-start; }
.step-num {
  flex: 0 0 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy-900);
  color: #ffffff;
  font-weight: 700;
}
.step p { color: var(--muted); margin: 0; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0.75rem; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.9rem 1.1rem;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.faq-answer { padding: 0 1.1rem 1.1rem; color: var(--muted); }

/* ---------- cross-sell ---------- */
.cross-sell { background: var(--navy-950); color: #ffffff; }
.cross-sell h2 { color: #ffffff; }
.cross-sell p { color: #dbe2ec; }

/* ---------- documents ---------- */
.doc { padding-block: clamp(2rem, 5vw, 3.5rem); }
.doc-back { margin-bottom: 1rem; }
.doc-meta { color: var(--muted); }
.doc-print { color: var(--muted); font-size: 0.9rem; margin-top: 2rem; }
/* Centred column, not one hugging the start edge: without margin-inline the
   narrower doc-body sits against the right in Hebrew and leaves a gap. */
.doc-body { max-width: 78ch; margin-inline: auto; }
.doc-body h1, .doc-body h2, .doc-body h3 { margin-top: 2rem; }
.doc-body h2 { font-size: 1.35rem; }
.doc-body h3 { font-size: 1.1rem; }
/* Justified so every line ends at the same place — how a contract reads on
   paper. Headings keep their natural start alignment. */
.doc-body p, .doc-body li { text-align: justify; text-justify: inter-word; }
.doc-body p { margin-bottom: 0.9rem; }
.doc-body ul { list-style: disc; padding-inline-start: 1.5rem; margin-bottom: 1rem; }
.doc-body ol { list-style: decimal; padding-inline-start: 1.5rem; margin-bottom: 1rem; }
.doc-body li { margin-bottom: 0.35rem; }
.doc-body hr { border: 0; border-top: 1px solid var(--border); margin-block: 1.75rem; }
.doc-body a { color: var(--orange); }

/* ---------- closed / not found ---------- */
.closed { padding-block: 6rem; text-align: center; }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-950); color: #ffffff; padding-block: 3rem 1.5rem; margin-top: 0; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2rem;
}
.footer-title { font-size: 1rem; margin-bottom: 0.75rem; color: #ffffff; }
.footer-list { display: grid; gap: 0.5rem; color: #dbe2ec; }
.footer-list a { color: #ffffff; }
.footer-tagline, .footer-company { color: #c7d0dd; margin: 0.75rem 0 0; }
.footer-bottom { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.18); color: #c7d0dd; font-size: 0.9rem; }

@media (max-width: 720px) {
  .nav { order: 3; width: 100%; }
  .header-inner { gap: 0.75rem; }
}

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

@media print {
  .site-header, .site-footer, .preview-banner, .doc-back, .doc-print { display: none; }
  body { color: #000; }
}

/* ---------- edit mode (admins only; never served to a visitor) ---------- */
.edit-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.6rem 1.25rem;
  background: #14233c;
  color: #fff;
  font-size: 0.92rem;
}
.edit-bar-title { font-weight: 700; }
.edit-bar-hint { color: #c7d0dd; }
.edit-bar-status { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.edit-bar-status.is-ok { color: #8fe0b4; }
.edit-bar-status.is-err { color: #ffb3ab; }
.edit-bar-exit { color: #fff; text-decoration: underline; }
.is-editing [data-field] { outline: 1px dashed rgba(184, 86, 16, 0.55); outline-offset: 3px; border-radius: 2px; }
.is-editing [data-field]:hover { outline-style: solid; background: rgba(184, 86, 16, 0.06); }
.is-editing [data-field]:focus { outline: 2px solid var(--orange); background: #fff; color: var(--ink); }
.is-editing .hero [data-field]:focus { background: #fff; }
.is-editing [data-field-image] { outline: 2px dashed rgba(255, 255, 255, 0.6); outline-offset: 6px; cursor: pointer; }

/* ---------- plan-type information (the "i" beside each plan) ---------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tier { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start; }
.tier-name {
  font-size: 0.9rem; font-weight: 600; color: var(--navy-800);
  background: var(--orange-wash); border-radius: 999px; padding: 0.15rem 0.7rem;
}
.tier-btn {
  width: 1.75rem; height: 1.75rem; min-width: 44px; min-height: 44px;   /* the hit area; the circle is drawn inside */
  display: inline-grid; place-items: center;
  background: transparent; border: 0; padding: 0; cursor: pointer; color: var(--navy-800);
}
.tier-btn span[aria-hidden] {
  width: 1.4rem; height: 1.4rem; display: grid; place-items: center;
  border: 1.5px solid var(--border-strong); border-radius: 50%;
  font: italic 700 0.8rem/1 Georgia, 'Times New Roman', serif;
}
.tier-btn:hover span[aria-hidden], .tier-btn[aria-expanded="true"] span[aria-hidden] { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.tier-tip {
  position: absolute; z-index: 20; top: calc(100% + 0.25rem); inset-inline-start: 0;
  width: min(20rem, 80vw); padding: 0.85rem 1rem;
  background: var(--navy-950); color: #fff; border-radius: var(--radius);
  box-shadow: 0 18px 40px -18px rgba(14, 26, 46, 0.6);
  font-size: 0.9rem; line-height: 1.5;
  visibility: hidden; opacity: 0; transition: opacity 0.12s ease;
}
.tier-tip ul { list-style: disc; padding-inline-start: 1.1rem; margin: 0.35rem 0; display: grid; gap: 0.2rem; }
.tier-tip-title { font-weight: 700; margin: 0; }
.tier-tip-suits { margin: 0.5rem 0 0; color: #dbe2ec; }
.tier-tip-source { margin: 0.5rem 0 0; font-size: 0.78rem; color: #aeb9c9; }
/* Hover or keyboard focus opens it, and it stays open while the pointer is on
   it (WCAG 1.4.13); a tap or Escape is handled in app.js. */
.tier:hover .tier-tip,
.tier:focus-within .tier-tip,
.tier.is-open .tier-tip { visibility: visible; opacity: 1; }
.tier.is-closed .tier-tip { visibility: hidden; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .tier-tip { transition: none; } }

/* ---------- purchase wizard and install page (Phase 2b) ---------- */
.wizard { padding-block: clamp(1.75rem, 4vw, 3rem); }
.wizard-progress { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 0.5rem 0 1.5rem; color: var(--muted); font-size: 0.95rem; }
.wizard-progress li { display: inline-flex; align-items: center; gap: 0.4rem; }
.wizard-progress-num {
  width: 1.7rem; height: 1.7rem; border-radius: 50%; display: inline-grid; place-items: center;
  border: 1.5px solid var(--border-strong); font-weight: 600; font-variant-numeric: tabular-nums;
}
.wizard-progress li[aria-current="step"] { color: var(--ink); font-weight: 600; }
.wizard-progress li[aria-current="step"] .wizard-progress-num { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.wizard-progress li.is-done .wizard-progress-num { background: var(--orange-wash); border-color: var(--orange); color: var(--orange); }
.wizard-summary {
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-alt);
  padding: 1rem 1.25rem; margin-bottom: 1.5rem; display: grid; gap: 0.35rem;
}
.wizard-summary-title { font-size: 0.85rem; letter-spacing: 0.04em; color: var(--muted); margin: 0; }
.wizard-total { display: flex; align-items: baseline; gap: 0.6rem; margin: 0.25rem 0 0; }
.wizard-total strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.wizard-alert {
  border: 2px solid #9a2214; background: #fdeceb; color: #7a1a0f; border-radius: var(--radius);
  padding: 0.75rem 1rem; margin-bottom: 1rem; font-weight: 600;
}
.wizard-step { display: grid; gap: 1rem; }
.wizard-step[hidden] { display: none; }
.wizard-step h2:focus { outline: none; }
.wizard-step h2:focus-visible { outline: 3px solid var(--focus); }
.wizard-step-of { color: var(--muted); font-size: 0.9rem; margin: 0; }
.wizard-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.wizard-note { color: var(--muted); margin: 0; }
.wizard-ref { font-size: 1.25rem; font-weight: 700; }
.wizard-abandon { margin-top: 2rem; }
.field-set { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.choice { display: flex; align-items: flex-start; gap: 0.6rem; min-height: 44px; padding-block: 0.35rem; cursor: pointer; }
.choice input { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; flex: none; accent-color: var(--navy-900); }
.field[aria-invalid="true"], .choice input[aria-invalid="true"] { border-color: #9a2214; outline: 2px solid #9a2214; outline-offset: 1px; }
.field-code { font-size: 1.4rem; letter-spacing: 0.3em; max-width: 12rem; font-variant-numeric: tabular-nums; }
.recipient-row { align-items: flex-end; }
.recipient-title { flex: 1 1 100%; margin: 0.5rem 0 0; font-weight: 600; }
.btn-link {
  background: none; border: 0; padding: 0.35rem 0; min-height: 44px; font: inherit;
  color: var(--navy-800); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer;
}
.btn-link:hover { color: var(--orange); }
.btn-link:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.review { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--border); }
.review > div { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; padding-block: 0.6rem; border-bottom: 1px solid var(--border); }
.review dt { flex: 0 0 9rem; color: var(--muted); }
.review dd { margin: 0; flex: 1 1 12rem; font-variant-numeric: tabular-nums; }
.coupon { border-bottom: 1px solid var(--border); padding-block: 0.25rem 0.75rem; }
.coupon > summary { cursor: pointer; color: var(--orange); padding-block: 0.4rem; width: max-content; max-width: 100%; }
.coupon-row { display: grid; gap: 0.35rem; margin-top: 0.4rem; }
.coupon-row[hidden] { display: none; }
.coupon-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.coupon-controls input { flex: 1 1 10rem; min-width: 0; text-transform: uppercase; letter-spacing: 0.04em; }
.coupon-applied { margin: 0.4rem 0 0; font-weight: 600; }
#couponMsg.is-error { color: #9a2214; }
.install-meta { color: var(--muted); }
.install-qr { margin: 1rem 0; display: grid; justify-items: start; gap: 0.5rem; }
.install-qr img { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; padding: 0.5rem; }
.install-manual code { font-size: 0.95rem; word-break: break-all; }
.install-guides { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-block: 1.5rem; }
.install-guides h2 { font-size: 1.1rem; }
.install-steps { list-style: decimal; padding-inline-start: 1.25rem; display: grid; gap: 0.4rem; }
.install-help { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.ok-note { color: #1d6b32; font-weight: 600; }
@media (max-width: 480px) {
  .review dt { flex-basis: 100%; }
  .wizard-actions .btn { flex: 1 1 auto; }
}
.pay-box { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.25rem; display: grid; gap: 0.5rem; }
.pay-card { margin: 0; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.install-links { display: grid; gap: 0.5rem; }
.install-links a { font-weight: 600; }

/* ---------- manage my eSIM (Phase 3c) ---------- */
.manage-item { margin-block: 1rem; }
.manage-item h3 { margin: 0; }
.manage-item h4 { margin: 0.75rem 0 0.25rem; font-size: 1rem; }
.manage-bundles { display: grid; gap: 0.35rem; }
.manage-panel { border-top: 1px solid var(--border); padding-top: 0.75rem; margin-top: 0.5rem; display: grid; gap: 0.6rem; }
.manage-panel[hidden] { display: none; }
.manage-panel h4:focus { outline: none; }
.manage-panel h4:focus-visible { outline: 3px solid var(--focus); }
.manage-help { margin-top: 1.5rem; }

/* support page (Phase 4a) */
.issue-links { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.issue-link { display: block; padding: 0.75rem 1rem; border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--ink); text-decoration: none; font-weight: 500; background: var(--bg); }
.issue-link:hover { border-color: var(--orange); color: var(--orange); }
.guides { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.guide { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; background: var(--bg-alt); }
.guide h3 { margin: 0 0 0.5rem; }
.guide ol, .tips, .support-steps { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: 0.35rem; }
.help-diagnose, .help-contact { margin-block: 1.5rem; }
.support-result { display: grid; gap: 0.6rem; margin-top: 1rem; }
.support-result:empty { display: none; }
.support-title { margin: 0; font-size: 1.15rem; }
.support-result h5 { margin: 0.25rem 0 0; font-size: 1rem; }
.support-checks summary { cursor: pointer; color: var(--muted); }
.support-checks ul { margin: 0.4rem 0 0; padding-inline-start: 1.25rem; }
.support-ask { border-top: 1px solid var(--border); padding-top: 0.75rem; display: grid; gap: 0.5rem; }

/* support hub and guided check (Phase 4b) */
.help-hub h1 { margin-bottom: 0.25rem; }
.help-notices { border: 1px solid #b85610; background: var(--orange-wash); border-radius: var(--radius); padding: 0.9rem 1.1rem; margin-block: 1rem; }
.help-notices h2 { font-size: 1.05rem; margin: 0 0 0.35rem; }
.help-notices ul { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: 0.25rem; }
.help-search { margin-block: 1.25rem 0.5rem; display: grid; gap: 0.35rem; }
.help-search .field { font-size: 1.05rem; padding-block: 0.8rem; }
.help-tiles { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.help-tile, .issue-tile { display: flex; gap: 0.8rem; align-items: flex-start; min-height: 44px; padding: 0.9rem 1rem; border: 1px solid var(--border-strong);
  border-radius: var(--radius); background: var(--bg); color: var(--ink); text-decoration: none; text-align: start; font: inherit; cursor: pointer; width: 100%; }
.help-tile:hover, .issue-tile:hover { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange) inset; }
.tile-icon { flex: none; color: var(--orange); margin-top: 0.1rem; }
.tile-text { display: grid; gap: 0.15rem; }
.tile-hint, .issue-tile span { color: var(--muted); font-size: 0.9rem; line-height: 1.35; }
.issue-tile { flex-direction: column; gap: 0.2rem; }
.issue-grid { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); margin-top: 0.75rem; }
.help-check { margin-block: 1.75rem; padding: 1.1rem 1.25rem; border-radius: var(--radius-lg); background: var(--navy-900); color: #ffffff; }
.help-check h2 { color: #ffffff; margin-top: 0; }
.help-check p { color: #e7ebf2; }
.help-topics { margin-block: 1.5rem; }
.topic-group h3 { margin: 1.25rem 0 0.4rem; font-size: 1.1rem; }
.faq-answer .btn-small { padding: 0.55rem 1rem; font-size: 0.95rem; min-height: 44px; }
.help-hub.is-searching .help-quick, .help-hub.is-searching .help-check, .help-hub.is-searching #help-guides { display: none; }
.support-panel { border-top: 2px solid var(--orange-bright); }
.support-progress { color: var(--muted); font-size: 0.85rem; margin: 0; letter-spacing: 0.02em; }
.support-step-title { margin: 0.1rem 0 0.25rem; font-size: 1.15rem; }
.support-flow { display: grid; gap: 0.7rem; }
.answer-grid, .platform-toggle { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.4rem; }
.answer-btn { min-height: 44px; padding: 0.6rem 1rem; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg); color: var(--ink); font: inherit; cursor: pointer; }
.answer-btn[aria-pressed="true"] { background: var(--navy-900); border-color: var(--navy-900); color: #ffffff; }
.support-notice { border-inline-start: 4px solid var(--orange-bright); background: var(--orange-wash); padding: 0.6rem 0.8rem; margin: 0; }
.support-fact { margin: 0; font-weight: 500; }
.support-checks li.is-ok::marker { color: #1d6b32; }
.support-checks li.is-problem { color: #9a2214; }
.support-actions { margin-top: 0.25rem; }
.support-back { justify-self: start; }
.escalate-phone { display: grid; gap: 0.35rem; margin-top: 0.5rem; }
.escalate-phone[hidden] { display: none; }
.pick-esim { margin-block: 1rem; }
.history-list li { padding-block: 0.2rem; }
@media (max-width: 560px) {
  .help-tiles, .issue-grid { grid-template-columns: 1fr; }
}
.support-steps, .guide ol { list-style: decimal; }
.support-steps li::marker, .guide ol li::marker { font-weight: 700; color: var(--orange); }
.tips { list-style: disc; }

/* support entry points (header, home page) */
.header-actions { display: inline-flex; align-items: center; gap: 0.5rem; margin-inline-start: auto; }
.nav + .header-actions { margin-inline-start: 0; }
.help-toggle { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0.5rem 1rem; border-radius: 999px;
  background: var(--orange); color: #ffffff; font-weight: 600; text-decoration: none; }
.help-toggle:hover { background: #9c4809; color: #ffffff; }
.support-strip { background: var(--bg-alt); }
.support-strip-inner { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); padding: 1.25rem 1.5rem; }
.support-strip-inner h2 { margin: 0 0 0.25rem; }
.support-strip-inner p { margin: 0; color: var(--muted); max-width: 46ch; }
.support-strip-actions { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.support-strip .btn-ghost { color: var(--ink); border-color: var(--border-strong); }
.faq-more { margin-top: 1rem; font-weight: 600; }
@media (max-width: 560px) {
  .support-strip-actions, .support-strip-actions li, .support-strip-actions .btn { width: 100%; }
  .help-toggle span { display: inline; }
}

/* ── destination pages (17 Sep) ─────────────────────────────────────────── */
.dest-hero { background: linear-gradient(160deg, var(--navy-950), var(--navy-800)); color: #ffffff; padding-block: clamp(2rem, 5vw, 3.5rem); }
.dest-hero h1 { color: #ffffff; }
.dest-hero .eyebrow { color: #f4b27c; }
.dest-hero :focus-visible { outline-color: #ffffff; }
.dest-hero .hero-actions { margin-block: 1.5rem 0; }

.crumbs ol { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: 0.9rem; }
.crumbs li + li::before { content: "/"; margin-inline-end: 0.35rem; opacity: 0.6; }
.crumbs a { color: inherit; }
.dest-hero .crumbs { color: #c7d0dd; }
.section .crumbs { color: var(--muted); }

.dest-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; margin: 0 0 2.5rem; }
.dest-facts div { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem 1rem; }
.dest-facts dt { color: var(--muted); font-size: 0.85rem; }
.dest-facts dd { margin: 0.2rem 0 0; font-weight: 600; font-size: 1.1rem; font-variant-numeric: tabular-nums; }

.net-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.net-list li { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.35rem 0.85rem; }
.net-name { font-weight: 600; }
.net-speed { font-size: 0.75rem; background: var(--orange-wash); color: var(--orange); border-radius: 999px; padding: 0.1rem 0.45rem; font-weight: 600; }

.related-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.related-list a { display: inline-block; border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.4rem 0.95rem; color: var(--ink); text-decoration: none; }
.related-list a:hover { border-color: var(--orange); }

.az-filter { max-width: 26rem; margin-bottom: 1.5rem; }
.az-group { margin-bottom: 1.25rem; }
.az-letter { font-size: 1rem; color: var(--orange); border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; margin-bottom: 0.5rem; }
.az-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.35rem 1rem; }
.az-group .az-list { margin-bottom: 0; }
.az-list a { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.45rem 0.25rem; color: var(--ink); text-decoration: none; border-radius: 0.4rem; }
.az-list a:hover { background: var(--bg-alt); }
.az-name { font-weight: 500; }
.az-price { color: var(--muted); font-size: 0.9rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Tables inside a legal document (the cookie policy's register). Scrolls on a
   phone rather than forcing the page wide. */
.doc-table { overflow-x: auto; margin: 1rem 0; }
.doc-table table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 0.95rem; }
.doc-table th, .doc-table td { border: 1px solid var(--border); padding: 0.55rem 0.7rem; text-align: start; vertical-align: top; }
.doc-table th { background: var(--bg-alt); font-weight: 600; }

/* The code a visitor arrived with, shown above the header on every page.
   Not an advert: it states what is already theirs, and the checkout fills it in. */
/* An arrival code has to survive the scroll: someone who came through a coupon
   link should still see the code when the basket is on screen, not only at the
   top of the page. It is the first element in the body, so it sticks alone. */
.coupon-bar {
  position: sticky;
  top: 0;
  z-index: 45;
  background: var(--orange-wash);
  border-bottom: 1px solid var(--orange);
  color: var(--ink);
  box-shadow: 0 1px 6px rgba(14, 26, 46, 0.12);
}
/* Anchor jumps (#plans, #how, the skip link) must not land under the stuck bar. */
.coupon-bar ~ main section[id],
.coupon-bar ~ main[id],
.coupon-bar ~ main [id]:target { scroll-margin-top: 4.5rem; }
/* Admin edit mode already sticks a bar at top: 0 — don't stack the two. */
.is-editing .coupon-bar { position: static; }
.coupon-bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding-block: 0.6rem; font-size: 0.95rem; }
.coupon-bar-code {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-weight: 700; letter-spacing: 0.06em;
  background: #ffffff; border: 1px solid var(--orange); border-radius: 0.5rem;
  padding: 0.15rem 0.6rem;
}
.coupon-bar-benefit { font-weight: 600; }
@media print { .coupon-bar { display: none; } }