/* ============================================================
   VIETNAM JOURNAL

   The Journal in the Elite Trip brand (espresso, gold, sand, white) and in
   the apple.com layout language the rest of the site speaks: one quiet
   type family set large, chapters that alternate white, sand and black,
   rounded cards with no borders, pill buttons, and a sticky local bar.
   See docs/DESIGN_SYSTEM.md; the --c-*, --t-*, --r-* and --sh-* tokens
   come from elite.css.

   The --vn-* names below are the guide's own vocabulary, kept because
   saigon.css and every rule in this file speak it. They now resolve onto
   the brand palette, and the contrast test in test_vietnam_guide.py reads
   them straight from here.

   Every selector is prefixed .vn- so this file cannot affect any
   existing page.
   ============================================================ */

.vn {
    --vn-paper:      #ffffff;   /* the white chapter */
    --vn-paper-warm: #ffffff;   /* the sand chapter, --c-bg-alt */
    --vn-ink:        #0f1a2c;   /* --c-ink */
    --vn-ink-soft:   #4f5a6b;   /* --c-muted, 5.4:1 on white, 4.8:1 on sand */
    /* The accent that used to be jade green. It is the brand's link colour
       now (--c-link): 6.3:1 on white, 5.6:1 on its own soft tint. */
    --vn-jade:       #1d4ed8;
    --vn-jade-soft:  #ffffff;
    --vn-terracotta: #1d4ed8;
    --vn-terracotta-soft: #ffffff;
    --vn-night:      #0f1a2c;   /* --c-espresso */
    --vn-night-2:    #16233a;
    --vn-neon:       #93c5fd;   /* --c-gold-light, gold words on black */
    --vn-gold:       #2563eb;   /* --c-gold */
    --vn-line:       #e5e5e7;
    /* Everything sticky above the article: the global bar (48px) and the
       guide's local bar (52px). Both are in the flow now, so nothing has to
       be cleared at the top of a page; this is what the chapter strip and
       the planner controls stick below, and what an anchor jump lands
       under. */
    --vn-navbar-h:   calc(var(--nav-h, 48px) + var(--local-h, 52px));
    --vn-shadow:     0 10px 40px rgba(17, 12, 9, .12);
    /* The ground of a card, set per chapter below: sand on a white
       chapter, white on a sand chapter, a lifted espresso on black. */
    --vn-card:       var(--c-bg-alt, #ffffff);
    --vn-chapter:    clamp(64px, 9vw, 112px);
    --vn-measure:    1120px;

    background: var(--vn-paper);
    color: var(--vn-ink);
}

.vn *, .vn *::before, .vn *::after { box-sizing: border-box; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The hidden attribute must actually hide, see the note in explore.css. */
.vn [hidden] { display: none !important; }

/* ---------- shared section rhythm: the chapter ----------
   A chapter is full bleed, so a sand or black ground runs edge to edge,
   and its content is centred by padding rather than by a max-width on the
   box. Children stay direct children of .vn-section, which is what the
   motion layer (vn-motion.js) selects on. */
.vn-section {
    max-width: none;
    margin: 0;
    padding: var(--vn-chapter)
             max(var(--pad, 20px), calc((100% - var(--vn-measure)) / 2));
    --vn-card: var(--c-bg-alt, #ffffff);
}
.vn-section-tint { background: var(--vn-paper-warm); --vn-card: #fff; }
.vn-section h2 {
    font-size: var(--t-section, 3rem);
    line-height: 1.08; font-weight: 600; letter-spacing: -.003em;
    margin: 0 0 14px; color: var(--vn-ink); max-width: 22ch;
}
.vn-section h3 { font-size: 1.1875rem; font-weight: 600; margin: 0 0 7px; letter-spacing: .012em; }
/* Apple's eyebrow: sentence case, the lead size, bronze. */
.vn-eyebrow {
    font-size: var(--t-lead, 1.3125rem); font-weight: 600; letter-spacing: .011em;
    line-height: 1.2; color: var(--c-bronze, #1d4ed8); margin: 0 0 10px;
}
.vn-section-lede {
    font-size: var(--t-lead, 1.3125rem); line-height: 1.38; letter-spacing: .011em;
    color: var(--vn-ink-soft); max-width: 40em; margin: 0 0 clamp(32px, 4.5vw, 52px);
}
.vn-link {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--vn-jade); font: inherit; font-weight: 400;
    text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- buttons: the design system's pills ----------
   Primary is the brand action, gold with dark words (never white on gold,
   2.1:1). Ghost is the outlined pill. Apple sets button words at 400. */
.vn-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 48px; padding: 12px 26px; border-radius: var(--r-pill, 980px); border: 1px solid transparent;
    font-weight: 400; font-size: var(--t-body, 1.0625rem); letter-spacing: -.022em; line-height: 1.18;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    font-family: var(--f-sans);
    transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.vn-btn:hover { text-decoration: none; }
.vn-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.vn-btn-primary { background: var(--c-gold, #2563eb); color: var(--c-ink, #0f1a2c); }
.vn-btn-primary:hover { background: var(--c-gold-hover, #1d4ed8); color: #fff; }
.vn-btn-ghost { background: transparent; color: var(--vn-ink); border-color: var(--vn-ink); }
.vn-btn-ghost:hover { background: var(--vn-ink); color: #fff; }

/* ============================================================
   HERO

   Apple's first screen: the name set very large, one line beneath it, the
   action, then the picture. White, settling into sand at its foot so the
   page reads as one surface into the first chapter. The old skyline,
   sun and motorbikes were illustration in a different voice; the
   photograph does that job now. vietnam.js still toggles .is-night on
   this element as the dark chapter scrolls by, and nothing here answers
   it, so the hero simply stays put.
   ============================================================ */
.vn-hero {
    position: relative;
    padding: clamp(36px, 6vw, 80px) max(var(--pad, 20px), calc((100% - var(--vn-measure)) / 2)) clamp(36px, 5vw, 64px);
    background: linear-gradient(180deg, var(--vn-paper) 0%, var(--vn-paper) 62%, var(--vn-paper-warm) 100%);
}
.vn-hero-inner { position: relative; max-width: 980px; margin: 0 auto; text-align: center; }
.vn-kicker {
    font-size: var(--t-lead, 1.3125rem); font-weight: 600; letter-spacing: .011em;
    color: var(--c-bronze, #1d4ed8); margin: 0 0 12px;
}
.vn-title {
    font-size: var(--t-hero, 5rem); line-height: 1.05; font-weight: 600;
    letter-spacing: -.015em; margin: 0 0 14px; color: var(--vn-ink);
    text-wrap: balance;
}
.vn-dot { color: var(--c-gold, #2563eb); }
.vn-tagline {
    font-size: var(--t-sub, 1.75rem); line-height: 1.2; font-weight: 600; letter-spacing: .007em;
    color: var(--vn-ink); margin: 0 auto 14px; max-width: 28ch; text-wrap: balance;
}
.vn-lede {
    font-size: var(--t-lead, 1.3125rem); line-height: 1.42; letter-spacing: .011em;
    color: var(--vn-ink-soft); max-width: 40em; margin: 0 auto 28px;
}
.vn-hero-actions {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 16px 28px; margin-bottom: 26px;
}
.vn-hero-actions .ap-link { font-size: 1.1875rem; }
.vn-checked {
    font-size: var(--t-small, .875rem); color: var(--vn-ink-soft);
    display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0;
}
.vn-checked .et-i { color: var(--c-success, #1f7a4d); }

/* A destination's hero ends on its photograph; the sand of the glance
   band picks up directly underneath. */
.vn-dest .vn-hero { padding-bottom: 0; }

/* The picture of the first screen: wide, rounded, the photograph never
   moves (the owner's rule). */
.vn-hero-photo { max-width: 1180px; margin: clamp(36px, 5vw, 56px) auto 0; }
.vn-hero-photo .vn-photo { margin: 0; border-radius: var(--r-xl, 28px); box-shadow: var(--sh-3); }

@media (max-width: 734px) {
    .vn-hero-inner { text-align: left; }
    .vn-tagline, .vn-lede { margin-left: 0; }
    .vn-hero-actions, .vn-checked { justify-content: flex-start; }
    .vn-hero-photo .vn-photo { border-radius: var(--r-lg, 22px); aspect-ratio: 4 / 3; }
}

/* ============================================================
   CHAPTER NAV
   ============================================================ */
/* Anchor jumps must land below BOTH the site navbar and this bar, or the
   heading you jumped to is hidden underneath them. */
.vn { scroll-padding-top: calc(var(--vn-navbar-h) + 64px); }
.vn :target { scroll-margin-top: calc(var(--vn-navbar-h) + 64px); }

/* ---------- chapter nav ----------
   A sticky strip that has to do three jobs at once: say what the chapters
   are, say which one you are in, and admit that it scrolls sideways.

   The old version did none of them. Ten identical grey words, no icons, no
   position, and a hard cut at the right edge that looked like a rendering
   fault rather than an invitation to swipe. */
.vn-chapters {
    position: sticky;
    /* Two pixels of deliberate overlap. A gap here would show the article
       sliding through between the two bars; an overlap is hidden behind the
       navbar and survives the navbar's height varying by a pixel or two. */
    top: calc(var(--vn-navbar-h) - 2px);
    z-index: 30;
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

/* The edge fades. Absolutely positioned over the track rather than applied
   as a mask, because a mask would also fade the pills at rest and the point
   is only to soften the cut. pointer-events:none so they never eat a tap. */
.vn-chapters::before,
.vn-chapters::after {
    content: '';
    position: absolute;
    top: 0; bottom: 3px;
    width: 34px;
    pointer-events: none;
    z-index: 2;
}
.vn-chapters::before {
    left: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, 0));
}
.vn-chapters::after {
    right: 0;
    background: linear-gradient(270deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, 0));
}

.vn-chapters-track {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    scroll-padding: 0 20px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 9px 16px;
    /* Smooth only when the reader has not asked otherwise, the script
       centres the current chip by setting scrollLeft, and this is what
       makes that glide rather than jump. */
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    .vn-chapters-track { scroll-behavior: auto; }
}
.vn-chapters-track::-webkit-scrollbar { display: none; }

.vn-chapters-track a {
    position: relative;
    flex: none;
    scroll-snap-align: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 16px 8px 13px;
    border: 1px solid transparent;
    border-radius: var(--r-pill, 980px);
    background: transparent;
    font-size: var(--t-small, .875rem);
    font-weight: 400;
    letter-spacing: -.01em;
    color: var(--vn-ink);
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

/* The number. Present but quiet, it turns the strip into a contents list
   without competing with the label. It swaps out for a tick on the chapter
   you are actually in, which is the one moment a position marker is worth
   more than a position number. */
.vn-chapter-num {
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    color: var(--vn-ink-soft);
    opacity: .5;
    transition: opacity .2s ease, color .2s ease;
}
.vn-chapters-track a .et-i {
    font-size: .8rem;
    color: var(--c-bronze, #1d4ed8);
    transition: color .2s var(--ease);
}

.vn-chapters-track a:hover {
    background: var(--vn-paper-warm);
    color: var(--vn-ink);
    text-decoration: none;
}
.vn-chapters-track a:hover .vn-chapter-num { opacity: .8; }
.vn-chapters-track a:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

/* The current chapter: the design system's selected state, a black pill
   with white words and a gold icon, findable at a glance while moving. */
.vn-chapters-track a.is-current {
    background: var(--vn-ink);
    border-color: var(--vn-ink);
    color: #fff;
}
.vn-chapters-track a.is-current .et-i { color: var(--vn-gold); }
.vn-chapters-track a.is-current .vn-chapter-num { opacity: 0; width: 0; margin-right: -8px; }

/* Horizon (motion.css): a gold hairline draws itself out from the centre
   under the chapter that has just become current, so the change registers
   peripherally while the reader is looking at the article. Gated: no
   script, no line, and the strip still works. */
.vn[data-motion="on"] .vn-chapters-track a.is-current::after {
    content: "";
    position: absolute;
    left: 18px; right: 18px; bottom: 6px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--vn-gold) 20% 80%, transparent);
    animation: et-horizon 900ms var(--et-ease-glide) both;
}

/* The reading line: a gold hairline with the plane at its tip. Both move by
   transform from one custom property (--p, 0 to 100, set by vietnam.js), so
   scrolling never touches layout. */
.vn-progress { position: relative; height: 2px; background: transparent; --p: 0; }
.vn-progress > span:first-child {
    display: block; height: 100%; width: 100%;
    background: linear-gradient(90deg, var(--c-bronze, #1d4ed8), var(--vn-gold));
    transform: scaleX(calc(var(--p) / 100));
    transform-origin: left center;
}
.vn-progress-plane {
    position: absolute; left: 0; top: -7px; width: 100%; height: 16px;
    pointer-events: none;
    transform: translateX(calc(var(--p) * 1%));
}
.vn-progress-plane .et-i {
    display: block; width: 14px; height: 14px; margin-left: -12px;
    color: var(--vn-gold); transform: rotate(45deg);
}

@media (max-width: 560px) {
    .vn-chapters-track { padding: 4px 12px; gap: 2px; }
    .vn-chapters-track a { padding: 7px 13px 7px 11px; gap: 7px; }
    .vn-chapters::before, .vn-chapters::after { width: 26px; }
}

/* ============================================================
   SNAPSHOT
   ============================================================ */
.vn-snapshot {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.vn-snap {
    background: #fff; border: 1px solid var(--vn-line); border-radius: 16px;
    padding: 18px; display: flex; flex-direction: column; gap: 5px;
    box-shadow: var(--vn-shadow);
}
.vn-snap .et-i { font-size: 1.25rem; color: var(--vn-terracotta); margin-bottom: 4px; }
.vn-snap-label {
    font-size: .7rem; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--vn-ink-soft);
}
.vn-snap-value { font-size: .96rem; font-weight: 600; line-height: 1.45; }
.vn-snap-take {
    margin-top: auto; padding-top: 8px; font-size: .68rem; font-weight: 600;
    color: var(--vn-jade); text-transform: uppercase; letter-spacing: .07em;
}

/* ============================================================
   FACETS
   ============================================================ */
.vn-facets { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.vn-facet {
    background: #fff; border: 1px solid var(--vn-line); border-radius: 20px;
    padding: 26px 22px; transition: transform .18s ease, box-shadow .18s ease;
}
.vn-facet:hover { box-shadow: var(--vn-shadow); border-color: rgba(37, 99, 235, .55); }
.vn-facet .et-i {
    font-size: 1.5rem; color: var(--vn-jade);
    background: var(--vn-jade-soft); width: 48px; height: 48px; border-radius: 14px;
    display: grid; place-items: center; margin-bottom: 14px;
}
.vn-facet p { color: var(--vn-ink-soft); line-height: 1.62; margin: 0; font-size: .94rem; }

/* ============================================================
   STYLE SELECTOR
   ============================================================ */
.vn-styles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.vn-style {
    display: flex; flex-direction: column; gap: 4px; text-align: left;
    min-height: 96px; padding: 16px; border-radius: 16px; cursor: pointer;
    border: 2px solid var(--vn-line); background: #fff;
    font-family: var(--font-body); color: var(--vn-ink);
    transition: border-color .15s ease, transform .15s ease;
}
.vn-style:hover { border-color: var(--vn-jade); }
.vn-style[aria-checked="true"] {
    border-color: var(--vn-jade); background: var(--vn-jade-soft);
    box-shadow: inset 0 0 0 1px var(--vn-jade);
}
.vn-style .et-i { font-size: 1.2rem; color: var(--vn-jade); }
.vn-style strong { font-size: .95rem; }
.vn-style small { color: var(--vn-ink-soft); font-size: .81rem; line-height: 1.42; }
.vn-style-status { margin-top: 16px; font-size: .92rem; color: var(--vn-ink-soft); min-height: 1.4em; }

/* ============================================================
   BUDGET

   The whole money block, bands, ledger and trip planner, is defined
   once, near the bottom of this file under "MONEY". An earlier draft of
   it lived here as well and the two disagreed about nearly everything;
   the duplicate has been removed rather than patched, because a rule
   that is overridden 900 lines later is a rule nobody can reason about.
   ============================================================ */

/* ============================================================
   MAP
   ============================================================ */
.vn-map-wrap { display: grid; gap: 24px; grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.05fr); }
.vn-map-figure {
    background: linear-gradient(160deg, #fff 0%, var(--vn-jade-soft) 100%);
    border: 1px solid var(--vn-line); border-radius: 22px; padding: 14px;
}
.vn-map { width: 100%; height: auto; display: block; }
.vn-river { fill: none; stroke: #a9d4e8; stroke-width: 7; stroke-linecap: round; opacity: .85; }
.vn-area { cursor: pointer; }
.vn-area circle {
    fill: #fff; stroke: var(--vn-jade); stroke-width: 1.4; opacity: .92;
    transition: fill .16s ease, stroke-width .16s ease;
}
.vn-area text { pointer-events: none; }   /* per-element classes below set size and fill */
.vn-area:hover circle, .vn-area:focus circle { fill: var(--vn-jade-soft); stroke-width: 2.4; }
.vn-area.is-active circle { fill: var(--vn-jade); stroke: var(--vn-ink); stroke-width: 2 }
.vn-area.is-active text { fill: #fff; }
.vn-area:focus { outline: none; }
.vn-area:focus-visible circle { stroke: var(--vn-terracotta); stroke-width: 3; }

.vn-area-card {
    background: #fff; border: 1px solid var(--vn-line); border-radius: 20px;
    padding: 24px; box-shadow: var(--vn-shadow);
}
.vn-area-card header { display: flex; justify-content: space-between; gap: 12px;
    align-items: flex-start; margin-bottom: 10px; }
.vn-area-card h3 { font-size: 1.24rem; margin: 0; }
.vn-price .et-i { font-size: .72rem; color: var(--vn-terracotta); }
.vn-price .vn-price-off { opacity: .22; }
.vn-area-official {
    font-size: .8rem; color: var(--vn-ink-soft); background: var(--vn-paper-warm);
    padding: 8px 12px; border-radius: 10px; margin: 0 0 12px;
}
.vn-area-official .et-i { color: var(--vn-jade); margin-right: 5px; }
.vn-area-personality { font-size: .96rem; line-height: 1.6; margin: 0 0 16px; }
.vn-area-fit { margin: 0 0 14px; display: grid; gap: 12px; }
.vn-area-fit dt { font-size: .76rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: var(--vn-ink-soft); margin-bottom: 3px; }
.vn-area-fit dd { margin: 0; font-size: .92rem; line-height: 1.55; }
.vn-area-fit div:first-child dt .et-i { color: var(--vn-jade); }
.vn-area-fit div:last-child dt .et-i { color: var(--vn-terracotta); }
.vn-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.vn-tags li {
    font-size: .74rem; font-weight: 600; padding: 5px 11px; border-radius: 999px;
    background: var(--vn-jade-soft); color: var(--vn-jade);
}
.vn-area-key { list-style: none; padding: 0; margin: 20px 0 0;
    display: flex; flex-wrap: wrap; gap: 8px; }
.vn-area-key button {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
    padding: 8px 15px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--vn-line); background: #fff;
    font-size: .84rem; font-weight: 600; font-family: var(--font-body); color: var(--vn-ink);
}
.vn-area-key button:hover { border-color: var(--vn-jade); }
.vn-area .vn-area-num {
    width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
    background: var(--vn-jade); color: #fff; font-size: .72rem;
}

/* ============================================================
   A DAY, the dark chapter
   ============================================================ */
.vn-section-dark {
    background: linear-gradient(180deg, #ffcf9e 0%, var(--vn-night-2) 42%, var(--vn-night) 100%);
    color: #fff; max-width: none;
}
.vn-section-dark > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.vn-section-dark h2 { color: #fff; }
.vn-section-dark .vn-eyebrow { color: var(--vn-neon); }

.vn-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.vn-timeline::before {
    content: ''; position: absolute; left: 74px; top: 8px; bottom: 8px; width: 2px;
    background: linear-gradient(180deg, var(--vn-terracotta), var(--vn-line));
}
/* On the night section the line reads as the sun going down. */
.vn-section-dark .vn-timeline::before {
    background: linear-gradient(180deg, var(--vn-gold), var(--vn-neon), #6f7fb0);
}
.vn-beat { display: grid; grid-template-columns: 74px 1fr; gap: 22px;
    padding: 14px 0; position: relative; }
/* The timeline is used on TWO backgrounds: the dark "A day here" section on
   the destination page, and plain paper on the briefing page. Its default
   must therefore be the paper (ink) treatment, with the light-on-dark
   variant scoped to .vn-section-dark. Defaulting to white text is how the
   briefing page ended up rendering white on cream. */
.vn-beat-time {
    font-variant-numeric: tabular-nums; font-weight: 600; font-size: .92rem;
    color: var(--vn-ink-soft); padding-top: 3px; text-align: right;
}
.vn-beat-body { position: relative; padding-left: 22px; }
.vn-beat-body::before {
    content: ''; position: absolute; left: -6px; top: 8px; width: 12px; height: 12px;
    border-radius: 50%; background: var(--vn-terracotta);
    box-shadow: 0 0 0 4px rgba(138, 107, 18,.16);
}
.vn-beat-body h3 { color: var(--vn-ink); font-size: 1.06rem; display: flex;
    align-items: center; gap: 9px; }
.vn-beat-body h3 .et-i { color: var(--vn-terracotta); }
.vn-beat-body p { color: var(--vn-ink-soft); line-height: 1.62; margin: 0;
    font-size: .94rem; }

/* -- the same timeline, on night -- */
.vn-section-dark .vn-beat-time { color: rgba(255,255,255,.72); }
.vn-section-dark .vn-beat-body::before {
    background: var(--vn-gold); box-shadow: 0 0 0 4px rgba(201, 162, 39,.22);
}
.vn-section-dark .vn-beat-night .vn-beat-body::before,
.vn-section-dark .vn-beat-late .vn-beat-body::before {
    background: var(--vn-neon); box-shadow: 0 0 0 4px rgba(255,138,91,.22);
}
.vn-section-dark .vn-beat-body h3 { color: #fff; }
.vn-section-dark .vn-beat-body h3 .et-i { color: var(--vn-gold); }
.vn-section-dark .vn-beat-body p { color: rgba(255,255,255,.8); }

/* ============================================================
   FOOD
   ============================================================ */
.vn-dishes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.vn-dish {
    background: #fff; border: 1px solid var(--vn-line); border-radius: 18px; padding: 20px;
    border-left: 4px solid var(--vn-terracotta);
}
.vn-dish h3 { font-size: 1.1rem; margin: 0 0 8px; }
.vn-say { font-size: .82rem; font-weight: 600; color: var(--vn-jade); font-style: italic; }
.vn-dish-what { font-size: .93rem; line-height: 1.58; margin: 0 0 10px; }
.vn-dish-when { font-size: .84rem; color: var(--vn-ink-soft); margin: 0 0 8px; }
.vn-dish-when .et-i { color: var(--vn-terracotta); margin-right: 5px; }
.vn-dish-note {
    font-size: .86rem; line-height: 1.52; margin: 0; padding: 10px 12px;
    background: var(--vn-jade-soft); border-radius: 10px; color: var(--vn-ink);
}
.vn-dietary { margin-top: 34px; }
.vn-dietary-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.vn-diet { background: #fff; border: 1px solid var(--vn-line); border-radius: 16px; padding: 18px; }
.vn-diet strong { display: block; margin-bottom: 8px; }
.vn-diet p { font-size: .88rem; line-height: 1.55; margin: 0 0 8px; color: var(--vn-ink-soft); }
.vn-phrase { background: var(--vn-paper-warm); padding: 9px 12px; border-radius: 9px; }
.vn-phrase span[lang="vi"] { font-weight: 600; color: var(--vn-ink); margin-right: 7px; }

/* ============================================================
   TRANSPORT
   ============================================================ */
.vn-transport { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.vn-mode { background: #fff; border: 1px solid var(--vn-line); border-radius: 18px; padding: 20px; }
.vn-mode-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.vn-mode-head .et-i { font-size: 1.15rem; color: var(--vn-jade); }
.vn-mode-head h3 { margin: 0; flex: 1; font-size: 1.05rem; }
.vn-cost-dots { display: flex; gap: 3px; }
.vn-cost-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--vn-line); }
.vn-cost-dots span.on { background: var(--vn-terracotta); }
.vn-mode p { font-size: .91rem; line-height: 1.58; margin: 0 0 9px; }
.vn-mode-best { color: var(--vn-ink-soft); }
.vn-mode-price { background: var(--vn-jade-soft); padding: 9px 12px; border-radius: 9px; font-size: .87rem !important; }
.vn-mode-price .et-i { color: var(--vn-jade); margin-right: 5px; }
.vn-mode-watch { font-size: .86rem !important; color: var(--vn-ink-soft); margin: 0 !important; }
.vn-mode-watch .et-i { color: var(--vn-terracotta); margin-right: 5px; }

/* ============================================================
   KNOW BEFORE YOU GO
   ============================================================ */
.vn-know-grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.vn-know-col h3 { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; font-size: 1.1rem; }
.vn-know-col h3 .et-i { color: var(--vn-jade); }
.vn-note {
    background: #fff; border: 1px solid var(--vn-line); border-left: 4px solid var(--vn-line);
    border-radius: 12px; padding: 15px 17px; margin-bottom: 10px;
}
.vn-note-watch { border-left-color: var(--vn-gold); }
.vn-note-serious { border-left-color: var(--vn-terracotta); }
.vn-note-info { border-left-color: var(--vn-jade); }
.vn-note strong { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .96rem; }
.vn-note p { margin: 0; font-size: .89rem; line-height: 1.58; color: var(--vn-ink-soft); }

.vn-entry {
    margin-top: 30px; background: #fff; border: 2px solid var(--vn-terracotta);
    border-radius: 20px; padding: 24px;
}
.vn-entry h3 { display: flex; align-items: center; gap: 9px; }
.vn-entry h3 .et-i { color: var(--vn-terracotta); }
.vn-entry-warning {
    background: var(--vn-terracotta-soft); padding: 13px 15px; border-radius: 11px;
    font-size: .9rem; line-height: 1.55; margin: 0 0 16px;
}
.vn-entry-item { padding: 13px 0; border-bottom: 1px solid var(--vn-line); }
.vn-entry-item:last-child { border-bottom: 0; }
.vn-entry-item > p:first-child { font-size: .96rem; line-height: 1.6; margin: 0 0 6px; font-weight: 600; }
.vn-entry-note { font-size: .86rem; color: var(--vn-ink-soft); margin: 0 0 6px; }
.vn-entry-source { font-size: .78rem; color: var(--vn-ink-soft); margin: 0; }
.vn-entry-source a { color: var(--vn-jade); font-weight: 600; }

.vn-misconceptions { margin-top: 30px; }
.vn-misc { background: #fff; border: 1px solid var(--vn-line); border-radius: 14px;
    padding: 16px 18px; margin-bottom: 10px; }
.vn-misc p { margin: 0; font-size: .92rem; line-height: 1.56; }
.vn-misc-wrong { color: var(--vn-ink-soft); text-decoration: line-through;
    text-decoration-color: rgba(201, 162, 39,.5); margin-bottom: 6px !important; }
.vn-misc-wrong .et-i { color: var(--vn-terracotta); margin-right: 7px; text-decoration: none; }
.vn-misc-right { font-weight: 600; }
.vn-misc-right .et-i { color: var(--vn-jade); margin-right: 7px; }

.vn-phrases { margin-top: 30px; }
.vn-phrase-grid { display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.vn-phrase-card {
    background: #fff; border: 1px solid var(--vn-line); border-radius: 13px; padding: 14px;
    display: flex; flex-direction: column; gap: 3px;
}
.vn-vi { font-weight: 600; font-size: 1rem; }
.vn-en { font-size: .86rem; color: var(--vn-ink-soft); }

/* ============================================================
   FIT
   ============================================================ */
.vn-fit { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.vn-fit-col { background: #fff; border: 1px solid var(--vn-line); border-radius: 20px; padding: 24px; }
.vn-fit-col h3 { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.vn-fit-yes { border-top: 4px solid var(--vn-jade); }
.vn-fit-yes h3 .et-i { color: var(--vn-jade); }
.vn-fit-no { border-top: 4px solid var(--vn-gold); }
.vn-fit-no h3 .et-i { color: var(--vn-gold); }
.vn-fit-col ul { margin: 0; padding-left: 20px; }
.vn-fit-col li { font-size: .93rem; line-height: 1.62; margin-bottom: 7px; }

/* ============================================================
   PLANS + FAQ
   ============================================================ */
.vn-plans { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.vn-plan { background: #fff; border: 1px solid var(--vn-line); border-radius: 18px; padding: 22px; }
.vn-plan.is-dimmed { opacity: .45; }
.vn-plan h3 { color: var(--vn-terracotta); font-size: 1.15rem; }
.vn-plan ol { margin: 0; padding-left: 19px; }
.vn-plan li { font-size: .91rem; line-height: 1.58; margin-bottom: 6px; }

.vn-faq { display: grid; gap: 8px; }
.vn-faq-item { background: #fff; border: 1px solid var(--vn-line); border-radius: 14px; overflow: hidden; }
.vn-faq-item summary {
    padding: 17px 20px; font-weight: 600; cursor: pointer; font-size: .99rem;
    list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center;
}
.vn-faq-item summary::-webkit-details-marker { display: none; }
.vn-faq-item summary::after { content: '+'; font-size: 1.4rem; color: var(--vn-jade); font-weight: 400; }
.vn-faq-item[open] summary::after { content: '\2212'; }
.vn-faq-item p { padding: 0 20px 19px; margin: 0; line-height: 1.66; color: var(--vn-ink-soft); font-size: .94rem; }

/* ============================================================
   CTA / CONVERSION
   ============================================================ */
.vn-cta {
    margin-top: 30px; padding: 26px; border-radius: 20px;
    background: linear-gradient(135deg, var(--vn-jade) 0%, #14663f 100%); color: #fff;
    display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
}
.vn-cta p { margin: 0; font-size: 1.02rem; line-height: 1.55; max-width: 52ch; }
.vn-cta .vn-btn-primary { background: #fff; color: var(--vn-jade); }

.vn-final { text-align: center; }
.vn-final .vn-section-lede { margin-left: auto; margin-right: auto; }
.vn-buddy-moments { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-top: 26px; text-align: left; }
.vn-moment {
    background: #fff; border: 1px solid var(--vn-line); border-radius: 18px; padding: 22px;
    text-decoration: none; color: var(--vn-ink); display: flex; flex-direction: column;
    justify-content: space-between; gap: 14px; transition: transform .18s ease, box-shadow .18s ease;
}
.vn-moment:hover { box-shadow: var(--vn-shadow); border-color: var(--vn-jade); }
.vn-moment p { margin: 0; font-size: .95rem; line-height: 1.58; }
.vn-moment-cta { font-weight: 600; color: var(--vn-jade); font-size: .92rem;
    display: inline-flex; align-items: center; gap: 8px; }

/* ============================================================
   SOURCES DRAWER
   ============================================================ */
.vn-sources {
    position: fixed; inset: 0; z-index: 200; background: rgba(10, 10, 11,.6);
    display: grid; place-items: end center; padding: 0;
}
.vn-sources-panel {
    background: var(--vn-paper); width: 100%; max-width: 720px; max-height: 88vh;
    overflow-y: auto; border-radius: 24px 24px 0 0; padding: 30px 26px 40px; position: relative;
}
.vn-sources-close {
    position: absolute; top: 14px; right: 16px; width: 44px; height: 44px;
    border: 0; background: var(--vn-paper-warm); border-radius: 50%; font-size: 1.5rem;
    cursor: pointer; color: var(--vn-ink);
}
.vn-sources h2 { font-size: 1.4rem; margin-bottom: 10px; }
.vn-sources h3 { margin-top: 22px; }
.vn-sources p { font-size: .93rem; line-height: 1.62; color: var(--vn-ink-soft); }
.vn-basis { background: #fff; border: 1px solid var(--vn-line); border-radius: 12px; padding: 14px 16px; }
.vn-source-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.vn-source-list li {
    background: #fff; border: 1px solid var(--vn-line); border-radius: 12px; padding: 13px 15px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
}
.vn-source-list a { color: var(--vn-jade); font-weight: 600; font-size: .92rem; }
.vn-source-list small { flex-basis: 100%; color: var(--vn-ink-soft); font-size: .82rem; line-height: 1.45; }
.vn-tier { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
    padding: 4px 9px; border-radius: 999px; }
.vn-tier-1 { background: var(--vn-jade); color: #fff; }
.vn-tier-2 { background: var(--vn-jade-soft); color: var(--vn-jade); }
.vn-tier-3 { background: var(--vn-paper-warm); color: var(--vn-ink-soft); }
.vn-tier-4 { background: #f2f2f4; color: #767b88; }

/* ============================================================
   MOBILE DOCK
   ============================================================ */
.vn-dock { display: none; }

/* ============================================================
   FROM OUR TEAM
   ============================================================ */
/* One line from the people who live here (templates/vietnam/_note.html).
   A 2px gold rule, a single line icon in a small arch window and a gold
   small-caps label. Nothing moves on its own; it rises with its section. */
.vn-desk {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start;
    gap: 14px; margin: 26px 0; padding: 16px 18px 16px 16px;
    background: #fff; border: 1px solid var(--vn-line);
    border-left: 2px solid var(--vn-gold); border-radius: 4px 16px 16px 4px;
}
.vn-desk-mark {
    display: grid; place-items: center; width: 34px; height: 34px;
    border-radius: 17px;
    background: var(--vn-ink); color: var(--vn-gold); font-size: 1rem;
}
.vn-desk-body p { margin: 0; }
.vn-desk-label {
    font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--c-bronze, #1d4ed8); margin-bottom: 4px !important;
}
.vn-desk-line { font-size: .98rem; line-height: 1.6; color: var(--vn-ink); }
.vn-section-dark .vn-desk { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); border-left-color: var(--vn-gold); }
.vn-section-dark .vn-desk-line { color: #fff; }
.vn-section-dark .vn-desk-label { color: var(--vn-gold); }

.vn-desk-tip {
    background: var(--vn-paper-warm); border-left: 2px solid var(--vn-gold);
    border-radius: 0 14px 14px 0; padding: 14px 18px; margin: 22px 0;
}
.vn-desk-tip-badge {
    display: inline-flex; align-items: center; gap: 7px; font-size: .7rem;
    font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
    color: var(--c-bronze, #1d4ed8); margin-bottom: 6px;
}
.vn-desk-tip p { margin: 0; font-size: .94rem; line-height: 1.62; }
.vn-desk-tip-warning { border-left-color: var(--vn-terracotta); }
.vn-desk-tip-warning .vn-desk-tip-badge { color: var(--vn-terracotta); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 940px) {
    .vn-map-wrap { grid-template-columns: 1fr; }
    .vn-cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 720px) {
    .vn-hero { padding: 28px 16px 36px; }
    .vn-section { padding: 38px 16px; }
    .vn-hero-actions .vn-btn { width: 100%; }
    .vn-beat { grid-template-columns: 56px 1fr; gap: 14px; }
    .vn-timeline::before { left: 56px; }
    /* The money block carries its own responsive rules, see "MONEY". */

    /* Sticky utility dock. Thumb-reachable, never covering content, the
       page reserves space for it. */
    .vn { padding-bottom: 74px; }
    .vn-dock {
        display: grid; grid-template-columns: repeat(4, 1fr);
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
        background: rgba(255, 255, 255,.97); backdrop-filter: blur(12px);
        border-top: 1px solid var(--vn-line);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .vn-dock a {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px; min-height: 60px; text-decoration: none;
        color: var(--vn-ink-soft); font-size: .68rem; font-weight: 600;
    }
    .vn-dock a .et-i { font-size: 1.02rem; }
    .vn-dock-primary { color: var(--vn-terracotta) !important; }
    .vn-sources-panel { max-height: 92vh; border-radius: 20px 20px 0 0; }
}

/* ============================================================
   REDUCED MOTION, nothing above is load-bearing for comprehension
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .vn * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .vn-bike { display: none; }
    .vn-hero, .vn-sun { transition: none; }
}

/* ============================================================
   PRINT, travellers do print these
   ============================================================ */
@media print {
    .vn-chapters, .vn-dock, .vn-hero-sky, .vn-sources { display: none !important; }
    .vn-section { padding: 18px 0; break-inside: avoid; }
    .vn-faq-item p { display: block !important; }
}

/* ============================================================
   MOTION
   Read vn-motion.js before changing anything here.

   The "[data-motion="on"]" gate is load-bearing: that attribute is set by
   JavaScript only after it has confirmed IntersectionObserver exists and the
   reader has not requested reduced motion. Without the gate, a script that
   fails to load would leave the entire article invisible. Never hide a
   reveal target outside this attribute.
   ============================================================ */
/* Sunrise (motion.css): content clears the horizon, top edge first. Text
   (eyebrow, heading, lede) takes the clipped variant; cards take the soft
   one, so a shadow is never clipped. The stagger is 90ms and stops after
   the third item, so a long grid never keeps the reader waiting. */
.vn[data-motion="on"] [data-reveal]:not(.is-in) { opacity: 0; }

.vn[data-motion="on"] [data-reveal].is-in {
    animation: et-sunrise-soft 560ms var(--et-ease-rise) backwards;
    animation-delay: calc(min(var(--i, 0), 3) * 90ms);
}
.vn[data-motion="on"] .vn-eyebrow[data-reveal].is-in,
.vn[data-motion="on"] .vn-section > h2[data-reveal].is-in,
.vn[data-motion="on"] .vn-section-lede[data-reveal].is-in {
    animation-name: et-sunrise;
    animation-duration: 760ms;
}

/* Belt and braces: even with the attribute set, a reader who switches on
   reduced motion mid-session gets everything immediately. */
@media (prefers-reduced-motion: reduce) {
    .vn[data-motion="on"] [data-reveal],
    .vn[data-motion="on"] [data-reveal]:not(.is-in),
    .vn[data-motion="on"] [data-reveal].is-in {
        opacity: 1;
        transform: none;
        animation: none;
        clip-path: none;
    }
}

/* Printing must never inherit a hidden state. */
@media print {
    .vn[data-motion="on"] [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/* ============================================================
   REBUILT COMPONENTS (2026-08-18)
   New page order: answer, qualify, cost, logistics, atmosphere, plan.
   ============================================================ */

/* ---- hero: jump straight to an answer ---- */
.vn-jump {
    display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px;
}
.vn-jump a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 17px; border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(10, 10, 11, .12);
    color: var(--vn-ink); font-weight: 600; font-size: .89rem;
    text-decoration: none; backdrop-filter: blur(4px);
    transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.vn-jump a:hover {
    background: #fff;
    border-color: rgba(10, 10, 11, .28);
}
.vn-jump a .et-i { color: var(--vn-terracotta); }
.vn-hero.is-night .vn-jump a {
    background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22);
    color: #fff;
}

/* ---- at a glance ----
   An editorial reference panel, not a row of cards. Hairline rules, a small
   letterspaced label above a confident value, and no repeated badges. The
   restraint is the point: this block is scanned, not read. */
.vn-glance {
    max-width: 1120px;
    margin: 0 auto;
    padding: 34px 20px 30px;
}

.vn-glance-head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 26px;
}
.vn-glance-head h2 {
    margin: 0;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--vn-ink);
    white-space: nowrap;
}
.vn-glance-rule {
    flex: 1 1 auto;
    height: 1px;
    background: var(--vn-line);
}
.vn-glance-checked {
    font-size: .74rem;
    color: var(--vn-ink-soft);
    white-space: nowrap;
}

/* Separate outlined boxes rather than one ruled table: each is its own
   object because each is independently clickable. Every box is a <details>,
   so the full explanation opens in place with no JavaScript.

   TWO TO A ROW on a phone. It used to drop to a single column below 560px,
   which turned eight one-line facts into eight full-width slabs and about
   two and a half screens of scrolling before the reader reached anything
   else. Two-up halves that and lets the eye compare across the pair, which
   is what a glance table is for.

   The animation rules below are worth reading before editing. <details>
   cannot be height-animated in every browser we support, so the open panel
   animates its CONTENTS in, fade and rise, staggered, rather than its
   box. The height snap is masked by content arriving a beat later. Browsers
   that support ::details-content get the real height transition through the
   @supports block at the end; everybody else gets the same effect minus one
   detail nobody will notice is missing. */
.vn-glance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}
@media (min-width: 900px) {
    .vn-glance-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
}

/* Per-card accent, cycled from --n on the element. Four hues rotating
   across the grid, so a column never repeats a colour against its
   neighbour and the block reads as a set rather than a wall. */
.vn-glance-item {
    --accent: var(--vn-terracotta);
    --accent-soft: var(--vn-terracotta-soft);
    position: relative;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color .26s var(--et-ease-glide), box-shadow .26s var(--et-ease-glide);
}
/* :nth-child, not an attribute match on an inline custom property. The
   browser normalises "style="--n:1"" to "--n: 1;" and the motion layer
   appends its own "--i" to the same attribute, so [style*="--n:1"] matches
   nothing and every card silently falls back to the same colour. */
/* Four positions, two brand tones: bronze and espresso alternate so a
   column never repeats against its neighbour, and nothing leaves the
   palette. */
.vn-glance-item:nth-child(4n+2) { --accent: var(--vn-ink); --accent-soft: var(--vn-paper-warm); }
.vn-glance-item:nth-child(4n+3) { --accent: var(--vn-ink); --accent-soft: var(--vn-paper-warm); }
.vn-glance-item:nth-child(4n+4) { --accent: var(--vn-terracotta); --accent-soft: var(--vn-terracotta-soft); }

/* The horizon. A gold hairline that draws out from the centre of the top
   edge when a card opens, the one flourish, and it doubles as the "this is
   the open one" marker when a card has gone full width. A transform, not
   a width, so opening never touches layout. */
.vn-glance-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, transparent, var(--vn-gold) 18% 82%, transparent);
    transform: scaleX(0);
    transition: transform .9s var(--et-ease-glide);
    z-index: 2;
}
.vn-glance-item[open]::before { transform: scaleX(1); }

.vn-glance-item:hover {
    border-color: var(--accent);
    box-shadow: 0 10px 26px rgba(10, 10, 11, .09);
}
.vn-glance-item[open] {
    border-color: var(--accent);
    box-shadow: 0 14px 34px rgba(10, 10, 11, .12);
    transform: none;
    /* An open box spans the full row so its text has a readable measure
       instead of a 150px column. */
    grid-column: 1 / -1;
}

.vn-glance-item summary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 15px 14px 14px;
    cursor: pointer;
    list-style: none;
}
.vn-glance-item summary::-webkit-details-marker { display: none; }
.vn-glance-item summary:focus-visible {
    outline: 3px solid var(--vn-terracotta);
    outline-offset: -3px;
    border-radius: 16px;
}

/* The badge. Circular, tinted with the card's accent, and it fills in
   when the card opens, a small, cheap piece of feedback that makes the
   grid feel responsive rather than static. */
.vn-glance-badge {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: .92rem;
    transition: background .26s ease, color .26s ease;
}
.vn-glance-item[open] .vn-glance-badge {
    background: var(--accent);
    color: #fff;
}

.vn-glance-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .63rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--vn-ink-soft);
}

/* Clamped to three lines while closed, so a two-up grid stays a grid
   instead of eight boxes of wildly different heights. The full value is
   never lost, opening the card releases the clamp. */
.vn-glance-value {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.42;
    color: var(--vn-ink);
    letter-spacing: -.01em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vn-glance-item[open] .vn-glance-value {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
    font-size: 1.12rem;
}

/* The affordance. Quiet until the box is hovered or opened, a grid of eight
   loud "Read more" links would be worse than no affordance at all. */
.vn-glance-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--accent);
    opacity: .8;
    transition: opacity .18s ease, gap .2s ease;
}
.vn-glance-item:hover .vn-glance-more { opacity: 1; gap: 9px; }
.vn-glance-item[open] .vn-glance-more { opacity: 1; }
.vn-glance-more .et-i { font-size: .62rem; transition: transform .3s var(--et-ease-rise); }
.vn-glance-item[open] .vn-glance-more .et-i { transform: rotate(180deg); }
.vn-glance-more-close { display: none; }
.vn-glance-item[open] .vn-glance-more-open { display: none; }
.vn-glance-item[open] .vn-glance-more-close { display: inline; }

.vn-glance-detail {
    padding: 15px 16px 18px;
    border-top: 1px solid var(--vn-line);
    background: linear-gradient(180deg, var(--accent-soft) 0%, #fff 62%);
}
.vn-glance-detail p {
    margin: 0 0 14px;
    font-size: .95rem;
    line-height: 1.72;
    color: var(--vn-ink-soft);
    max-width: 72ch;
}
.vn-glance-jump {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--accent);
    font-weight: 600;
    font-size: .85rem;
    color: #fff;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, gap .2s ease;
}
.vn-glance-jump:hover {
    color: #fff;
    gap: 12px;
    box-shadow: 0 10px 22px rgba(10, 10, 11, .18); border-color: rgba(37, 99, 235, .55); }
.vn-glance-jump:focus-visible { outline: 3px solid var(--vn-ink); outline-offset: 2px; }
.vn-glance-jump .et-i { font-size: .76rem; }

/* The panel's contents unfold downward (Unfold-down, motion.css), the
   paragraph a beat before the button. This is what makes the open feel
   considered even where the box height itself snaps. Clip only, never
   opacity, and still gated on [data-motion="on"] like every other motion
   here: no script, no animation, all the text. */
.vn[data-motion="on"] .vn-glance-item[open] .vn-glance-detail p {
    animation: et-unfold-down .32s var(--et-ease-settle) backwards;
    animation-delay: .04s;
}
.vn[data-motion="on"] .vn-glance-item[open] .vn-glance-jump {
    animation: et-unfold-down .32s var(--et-ease-settle) backwards;
    animation-delay: .12s;
}
.vn[data-motion="on"] .vn-glance-item[open] .vn-glance-value {
    animation: et-unfold-down .22s var(--et-ease-settle) backwards;
}

/* The one footnote that explains the ° mark. */
.vn-glance-note {
    margin: 18px 0 0;
    font-size: .8rem;
    line-height: 1.6;
    color: var(--vn-ink-soft);
    max-width: 66ch;
}
.vn-glance-note .vn-glance-mark { cursor: default; margin-right: 3px; }
.vn-glance-note a {
    color: var(--vn-jade);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 560px) {
    .vn-glance { padding: 34px 16px 30px; }
    .vn-glance-head { flex-wrap: wrap; gap: 10px; }
    .vn-glance-rule { display: none; }
    .vn-glance-item summary { padding: 13px 12px 12px; }
    .vn-glance-badge { width: 34px; height: 34px; font-size: .84rem; }
    .vn-glance-value { font-size: .87rem; }
    .vn-glance-detail { padding: 14px 13px 16px; }
}

/* Real height animation where the browser has ::details-content. Everything
   above already works without this; this is the extra detail for browsers
   that can do it, and it is deliberately last so it can only ever add. */
@supports selector(details::details-content) {
    .vn-glance-item::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size .42s var(--et-ease-glide),
                    content-visibility .42s allow-discrete;
        transition-behavior: allow-discrete;
    }
    .vn-glance-item[open]::details-content { block-size: auto; }
}
@supports (interpolate-size: allow-keywords) {
    .vn-glance-grid { interpolate-size: allow-keywords; }
}

/* A reader who asked for stillness gets the layout and none of the motion.
   The clamp, the colours and the full-row open all still work. */
@media (prefers-reduced-motion: reduce) {
    .vn-glance-item,
    .vn-glance-item::before,
    .vn-glance-badge,
    .vn-glance-value,
    .vn-glance-more,
    .vn-glance-more .et-i,
    .vn-glance-jump { transition: none; }
    .vn[data-motion="on"] .vn-glance-item[open] .vn-glance-detail p,
    .vn[data-motion="on"] .vn-glance-item[open] .vn-glance-jump,
    .vn[data-motion="on"] .vn-glance-item[open] .vn-glance-value { animation: none; }
    .vn-glance-item[open]::before { transform: scaleX(1); }
}

/* ---- straight answers ---- */
.vn-answers { display: grid; gap: 12px; max-width: 860px; }
.vn-answer {
    background: #fff; border: 1px solid var(--vn-line); border-radius: 14px;
    overflow: hidden;
}
.vn-answer summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 22px; cursor: pointer; list-style: none;
    font-weight: 600; font-size: 1.02rem; color: var(--vn-ink);
}
.vn-answer summary::-webkit-details-marker { display: none; }
.vn-answer summary:hover { background: var(--vn-paper-warm); }
.vn-answer summary .et-i {
    flex: 0 0 auto; color: var(--vn-terracotta); font-size: .82rem;
    transition: transform .22s ease;
}
.vn-answer[open] summary .et-i { transform: rotate(180deg); }
.vn-answer > p {
    margin: 0; padding: 0 22px 20px; color: var(--vn-ink-soft);
    line-height: 1.68; max-width: 68ch;
}

.vn-subhead {
    margin: 44px 0 16px; font-size: 1.24rem; font-weight: 600; color: var(--vn-ink);
}

/* The cost grid is defined under "MONEY", a "1fr 1fr" grid was what let
   the ledger push the page wider than the phone it was on. */

/* ---- map: labelled, non-overlapping ---- */
.vn-area .vn-area-name {
    font-size: 9.5px; font-weight: 600; fill: var(--vn-ink-soft);
    pointer-events: none;
}
.vn-area.is-active .vn-area-name { fill: var(--vn-terracotta); font-weight: 600; }
.vn-area .vn-area-num { font-size: 12px; font-weight: 600; fill: var(--vn-jade); }
.vn-area.is-active .vn-area-num { fill: #fff; }
.vn-map .vn-river-label {
    font-size: 9px; font-weight: 600; fill: #8fb8d4; letter-spacing: .08em;
}
.vn-area-num-chip {
    display: inline-grid; place-items: center; width: 22px; height: 22px;
    border-radius: 50%; background: var(--vn-jade); color: #fff;
    font-size: .76rem; font-weight: 600; margin-right: 9px; flex: 0 0 auto;
}

@media (max-width: 640px) {
    .vn-jump a { font-size: .84rem; padding: 9px 14px; }
}

/* ============================================================
   THE TRIP PLAN
   Day-by-day output from /api/vietnam/<slug>/plan. A vertical
   timeline per day, each row carrying its own cost share, so the
   reader can see where the money actually goes.
   ============================================================ */
.vn-trip { margin-top: 34px; }

.vn-trip-head { margin-bottom: 20px; }
.vn-trip-head h3 { font-size: 1.34rem; font-weight: 600; margin: 0 0 4px; }
.vn-trip-sub {
    margin: 0; font-size: .92rem; color: var(--vn-ink-soft);
    font-variant-numeric: tabular-nums;
}

.vn-trip-days { display: grid; gap: 18px; }

.vn-trip-day {
    background: var(--vn-paper);
    border: 1px solid var(--vn-line);
    border-radius: 16px;
    overflow: hidden;
}

.vn-trip-dayhead {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 16px 20px;
    background: var(--vn-paper-warm);
    border-bottom: 1px solid var(--vn-line);
}
.vn-trip-dayhead h4 {
    margin: 0; font-size: 1.02rem; font-weight: 600; color: var(--vn-ink);
}
.vn-trip-areas { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; }
.vn-trip-area {
    font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px;
    background: var(--vn-jade-soft); color: var(--vn-jade);
}
.vn-trip-daycost {
    font-weight: 600; font-size: .9rem; color: var(--vn-ink);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---- the timeline ---- */
.vn-trip-slots { list-style: none; margin: 0; padding: 6px 20px 10px; }

.vn-trip-slot {
    display: grid;
    grid-template-columns: 52px 16px 1fr;
    align-items: start;
    gap: 0 6px;
    padding: 14px 0;
    position: relative;
}
/* The connecting line, drawn between the dots rather than behind them. */
.vn-trip-slot::before {
    content: ''; position: absolute; left: 59px; top: 26px; bottom: -8px;
    width: 2px; background: var(--vn-line);
}
.vn-trip-slot:last-child::before { display: none; }

.vn-trip-time {
    font-size: .82rem; font-weight: 600; color: var(--vn-ink-soft);
    font-variant-numeric: tabular-nums; padding-top: 3px;
}
.vn-trip-dot {
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--vn-terracotta); margin-top: 6px;
    box-shadow: 0 0 0 3px var(--vn-terracotta-soft);
    position: relative; z-index: 1;
}
.vn-trip-slot.is-absorbed .vn-trip-dot {
    background: var(--vn-line); box-shadow: none;
}
.vn-trip-slot.is-absorbed { opacity: .72; }

.vn-trip-body { padding-left: 8px; min-width: 0; }
.vn-trip-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
}
.vn-trip-row h5 {
    margin: 0; font-size: 1rem; font-weight: 600; color: var(--vn-ink);
    display: flex; align-items: center; gap: 8px;
}
.vn-trip-row h5 .et-i { color: var(--vn-terracotta); font-size: .86rem; }
.vn-trip-cost {
    font-size: .84rem; font-weight: 600; color: var(--vn-jade);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vn-trip-meta {
    margin: 4px 0 0; font-size: .78rem; color: var(--vn-ink-soft);
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.vn-trip-where { display: inline-flex; align-items: center; gap: 4px; }
.vn-trip-why {
    margin: 8px 0 0; font-size: .92rem; line-height: 1.62;
    color: var(--vn-ink-soft); max-width: 68ch;
}
.vn-trip-tip, .vn-trip-slotnote {
    margin: 8px 0 0; font-size: .86rem; line-height: 1.55;
    padding: 9px 12px; border-radius: 9px; max-width: 68ch;
}
.vn-trip-tip {
    background: var(--vn-terracotta-soft); color: var(--vn-ink);
}
.vn-trip-tip .et-i { color: var(--vn-terracotta); margin-right: 5px; }
.vn-trip-slotnote { background: var(--vn-jade-soft); color: var(--vn-ink); }

.vn-trip-dayfoot {
    display: flex; gap: 20px; flex-wrap: wrap;
    padding: 13px 20px; border-top: 1px solid var(--vn-line);
    background: var(--vn-paper-warm);
    font-size: .82rem; color: var(--vn-ink-soft);
    font-variant-numeric: tabular-nums;
}
.vn-trip-dayfoot .et-i { color: var(--vn-terracotta); margin-right: 5px; }

.vn-trip-note {
    margin: 16px 0 0; font-size: .8rem; line-height: 1.6;
    color: var(--vn-ink-soft); max-width: 74ch;
}

.vn-calc-intro {
    margin: 0 0 14px; font-size: .9rem; line-height: 1.6;
    color: var(--vn-ink-soft);
}

@media (max-width: 620px) {
    .vn-trip-slot { grid-template-columns: 44px 14px 1fr; }
    .vn-trip-slot::before { left: 50px; }
    .vn-trip-slots { padding: 6px 14px 10px; }
    .vn-trip-dayhead, .vn-trip-dayfoot { padding: 13px 14px; }
    .vn-trip-dayfoot { gap: 8px; flex-direction: column; }
}
/* ============================================================
   MONEY, the cost ledger and the trip planner

   Rebuilt phone-first after screenshotting it at 390px, where the
   previous version forced the whole document to 518px wide: a
   three-column table of nine-digit figures with "white-space:
   nowrap" on two of them cannot be narrower than about 500px, and
   a "1fr 1fr" cost grid handed it that width to demand.

   The rules that follow all come from one decision: NOTHING in
   this block is allowed to set a floor on its own width:

     * every grid track is minmax(0, 1fr), never 1fr, so a track
       can be told to be narrower than its contents
     * every row is a wrapping flex line. Label and figure share a
       line while both fit; the figure drops to its own right-
       aligned line when they do not. No breakpoint decides this,
       the content does, so it holds at 320px and at 1280px
     * the only nowrap left is on the figures themselves, which
       must never break mid-number, and each one is small enough
       to fit a 320px line on its own

   Visually it takes after a booking app rather than a spreadsheet:
   white cards on warm paper, a hairline between rows, category
   icons to make the list scannable at a glance, and the two
   figures that matter, the daily all-in and the trip total,
   given blocks of their own instead of being set as body copy.
   ============================================================ */

/* ---- band chips: a segmented control with a sliding indicator ---- */
.vn-bands-wrap { margin: 0 0 20px; max-width: 560px; }
.vn-bands-caption {
    margin: 0 0 8px;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vn-ink-soft);
}
.vn-bands {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    padding: 5px;
    background: var(--vn-paper-warm);
    border: 1px solid var(--vn-line);
    border-radius: 16px;
    box-shadow: inset 0 1px 3px rgba(10, 10, 11, .05);
}
/* Absolutely positioned, so it creates no grid track of its own. */
.vn-bands-thumb {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    width: calc((100% - 10px) / 3);
    background: var(--vn-ink);
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(10, 10, 11, .24);
    transition: transform .34s var(--et-ease-rise);
    pointer-events: none;
}
.vn-band-tab {
    position: relative;
    z-index: 1;
    min-height: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px;
    min-width: 0;
    background: none;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    color: var(--vn-ink-soft);
    transition: color .28s ease;
}
.vn-band-tab strong { font-size: .93rem; font-weight: 600; letter-spacing: -.01em; }
.vn-band-tab small {
    font-size: .69rem;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    opacity: .78;
}
.vn-band-tab[aria-selected="true"] { color: #fff; }
.vn-band-tab[aria-selected="true"] small { opacity: .82; }
.vn-band-tab:focus-visible { outline: 3px solid var(--vn-terracotta); outline-offset: 2px; }

/* ---- the two columns ---- */
.vn-cost-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.vn-band-panels, .vn-band-panel { min-width: 0; }

@media (min-width: 940px) {
    .vn-cost-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 26px;
    }
    /* The planner is the thing people came to use, so it follows them
       down past the ledger. 78px clears the sticky chapter nav. */
    .vn-calc { position: sticky; top: 78px; }
}

/* ---- the ledger ---- */
.vn-ledger {
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(10, 10, 11, .05);
}
.vn-ledger-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 13px 16px;
    background: var(--vn-paper);
    border-bottom: 1px solid var(--vn-line);
}
.vn-ledger-band { font-size: .96rem; font-weight: 600; letter-spacing: -.01em; }
.vn-ledger-unit {
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--vn-ink-soft);
}

.vn-ledger-rows { list-style: none; margin: 0; padding: 0; }

/* The wrapping row. flex: 1 1 auto on the label, with its default
   min-width of auto, means the label is never squeezed below its own
   min-content, so when the figure no longer fits beside it, the
   figure wraps instead of either of them overflowing. */
.vn-ledger-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--vn-line);
}
.vn-ledger-row:last-child { border-bottom: 0; }
/* The minimum is wider than the longest category name, so every row in the
   band starts from the same hypothetical width and they all make the same
   wrap decision, see the note on .vn-ledger-num. */
.vn-ledger-label {
    flex: 1 1 auto;
    min-width: 11.5em;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .93rem;
    font-weight: 600;
    color: var(--vn-ink);
}
.vn-ledger-label .et-i {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--vn-jade-soft);
    color: var(--vn-jade);
    font-size: .76rem;
}
/* The min-width is doing two jobs. It right-aligns the figures into a
   money column the eye can run down, and, because every figure in a band
   then claims the same width, the rows wrap together instead of three
   wrapping and two not, which read as a broken card. It is set in em so it
   tracks the font size through the small-screen override below. */
.vn-ledger-num {
    flex: 0 0 auto;
    margin-left: auto;
    min-width: 10.5em;
    text-align: right;
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--vn-ink);
}

/* The range bar. Its left edge is the low end and its width is the spread,
   both scaled against the biggest category in the band, so the eye reads
   "accommodation is most of this" without doing arithmetic. */
.vn-ledger-track {
    flex: 1 0 100%;
    position: relative;
    display: block;
    height: 6px;
    border-radius: 999px;
    background: rgba(10, 10, 11, .07);
}
.vn-ledger-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    min-width: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--vn-jade), var(--vn-terracotta));
}

/* The one figure most readers actually take away, so it gets the
   strongest block on the card rather than a row like any other. */
.vn-ledger-total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    margin: 0;
    padding: 15px 16px;
    background: var(--vn-ink);
    color: #fff;
}
.vn-ledger-total span {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .74;
}
.vn-ledger-total strong {
    font-size: 1.04rem;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ---- the planner card ---- */
.vn-calc {
    position: relative;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: 20px;
    padding: 22px 16px 18px;
    overflow: hidden;
    box-shadow: 0 14px 38px rgba(10, 10, 11, .09);
}
/* A band of colour along the top edge, the one flourish. */
.vn-calc::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--vn-jade), var(--vn-terracotta), var(--vn-gold));
}
.vn-calc-eyebrow {
    margin: 0 0 6px;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--vn-terracotta);
}
.vn-calc h3 { font-size: 1.3rem; margin: 0 0 7px; letter-spacing: -.02em; }
.vn-calc-intro {
    margin: 0 0 16px;
    font-size: .89rem;
    line-height: 1.58;
    color: var(--vn-ink-soft);
}

/* ---- steppers ---- */
.vn-calc-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin: 0 0 16px;
}
.vn-stepper { min-width: 0; }
.vn-stepper > label {
    display: block;
    margin-bottom: 6px;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--vn-ink-soft);
}
.vn-stepper-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: stretch;
    border: 1px solid var(--vn-line);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}
.vn-stepper-row button {
    min-height: 46px;
    border: 0;
    background: var(--vn-paper-warm);
    color: var(--vn-ink);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}
.vn-stepper-row button:hover { background: var(--vn-ink); color: #fff; }
.vn-stepper-row button:focus-visible { outline: 3px solid var(--vn-terracotta); outline-offset: -3px; }
.vn-calc-controls input {
    min-height: 46px;
    width: 100%;
    min-width: 0;
    padding: 10px 2px;
    border: 0;
    text-align: center;
    font-family: inherit;
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--vn-ink);
    font-variant-numeric: tabular-nums;
    background: #fff;
    -moz-appearance: textfield;
}
.vn-calc-controls input::-webkit-outer-spin-button,
.vn-calc-controls input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vn-calc-controls input:focus-visible { outline: 3px solid var(--vn-terracotta); outline-offset: -3px; }

/* ---- the headline figure ---- */
.vn-calc-quote {
    margin: 0 0 14px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--vn-line);
    background: linear-gradient(150deg, var(--vn-jade-soft) 0%, var(--vn-paper-warm) 100%);
}
.vn-calc-quotelabel {
    margin: 0 0 5px;
    font-size: .63rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vn-jade);
}
.vn-calc-result {
    margin: 0;
    font-size: clamp(1.2rem, 5.4vw, 1.85rem);
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.16;
    color: var(--vn-ink);
    font-variant-numeric: tabular-nums;
}
.vn-calc-usd {
    display: block;
    margin-top: 6px;
    font-size: .77rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.5;
    color: var(--vn-ink-soft);
}
.vn-calc-loading {
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--vn-ink-soft);
}

/* ---- the breakdown: the same wrapping row as the ledger ---- */
.vn-calc-breakdown {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    border: 1px solid var(--vn-line);
    border-radius: 14px;
    overflow: hidden;
}
.vn-calc-breakdown li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 12px;
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid var(--vn-line);
    font-size: .86rem;
    color: var(--vn-ink-soft);
}
.vn-calc-breakdown li:last-child { border-bottom: 0; }
.vn-calc-breakdown li > span {
    flex: 1 1 auto;
    min-width: 9.5em;
    display: flex;
    align-items: center;
    gap: 9px;
}
.vn-calc-breakdown li > span .et-i {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: var(--vn-terracotta-soft);
    color: var(--vn-terracotta);
    font-size: .68rem;
}
/* Wider than the ledger's 10.5em because these are trip totals rather than
   day rates, so they carry two or three more digits. Both minimums exist to
   make the rows wrap as a group, see the note on .vn-ledger-num. */
.vn-calc-breakdown b {
    flex: 0 0 auto;
    margin-left: auto;
    min-width: 11.5em;
    text-align: right;
    font-size: .84rem;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--vn-ink);
}
.vn-calc-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--vn-ink-soft);
}

/* A phone has no room for a 22px section gutter plus a 16px card
   gutter plus an icon plus a nine-digit figure. Give the narrowest
   screens those millimetres back rather than let anything clip. */
@media (max-width: 420px) {
    #vn-cost { padding-left: 16px; padding-right: 16px; }
    .vn-band-tab strong { font-size: .86rem; }
    .vn-band-tab small { font-size: .64rem; }
    .vn-ledger-row, .vn-ledger-head, .vn-ledger-total { padding-left: 13px; padding-right: 13px; }
    .vn-ledger-label { font-size: .89rem; gap: 9px; }
    .vn-ledger-label .et-i { width: 26px; height: 26px; }
    .vn-ledger-num { font-size: .81rem; }
    .vn-calc { padding: 20px 14px 16px; }
    .vn-calc-breakdown li { padding-left: 12px; padding-right: 12px; }
    /* Dropping a notch pulls the widest figure back inside the shared
       minimum, so all five rows keep making the same wrap decision. */
    .vn-calc-breakdown b { font-size: .8rem; }
}

/* ============================================================
   VISA & ENTRY

   Same phone-first discipline as the money block: no fixed
   widths, every grid track minmax(0, 1fr), every row a wrapping
   flex line. See the MONEY header for the reasoning.

   The one thing this block adds is a visual vocabulary for
   CERTAINTY, because the subject demands it. Four states, and
   they never look alike:

     verified      a Tier-1 government source states it
     pending       we hold the figure, we have not read the
                   instrument text, amber, unmissable
     needs check   depends on your case; we will not guess
     danger        a thing that can go badly wrong

   A page that renders a confirmed e-visa fee and an unverified
   penalty band in the same typeface is lying by layout.
   ============================================================ */

.vn-visa { max-width: 1120px; margin: 0 auto; }
.vn-visa-head { margin-bottom: 22px; }

/* ---- standing notices ---- */
.vn-visa-notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    margin: 0 0 22px;
    border-radius: 14px;
    border: 1px solid var(--vn-line);
    background: #fff;
}
.vn-visa-notice > .et-i { flex: 0 0 auto; margin-top: 2px; color: var(--vn-terracotta); }
.vn-visa-notice strong { display: block; font-size: .94rem; margin-bottom: 4px; }
.vn-visa-notice p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--vn-ink-soft); }
.vn-visa-notice-future { background: #f4f4f5; border-color: #f0dcb8; }

/* ---- the checker ---- */
.vn-visa-checker {
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: 20px;
    padding: 20px 16px 16px;
    margin: 0 0 30px;
    box-shadow: 0 14px 38px rgba(10, 10, 11, .09);
    position: relative;
    overflow: hidden;
}
.vn-visa-checker::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--vn-jade), var(--vn-terracotta), var(--vn-gold));
}
.vn-visa-kicker {
    margin: 0 0 5px;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--vn-terracotta);
}
.vn-visa-checker-head h3 { font-size: 1.24rem; margin: 0 0 16px; letter-spacing: -.02em; }

.vn-visa-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
@media (min-width: 560px) {
    .vn-visa-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .vn-visa-field-wide { grid-column: 1 / -1; }
}
@media (min-width: 940px) {
    .vn-visa-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.vn-visa-field { min-width: 0; }
/* :not() matters, the toggle pills are labels too, and without it they
   inherit block layout, uppercase and the faded "optional" span styling,
   which collapses them into misaligned boxes. */
.vn-visa-field > label:not(.vn-visa-toggle) {
    display: block;
    margin-bottom: 6px;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--vn-ink-soft);
}
.vn-visa-field > label:not(.vn-visa-toggle) span {
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: none;
    opacity: .7;
}
.vn-visa-field select,
.vn-visa-field input {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 11px 12px;
    border: 1px solid var(--vn-line);
    border-radius: 12px;
    background: var(--vn-paper);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    color: var(--vn-ink);
}
.vn-visa-field select:focus-visible,
.vn-visa-field input:focus-visible {
    outline: 3px solid var(--vn-terracotta);
    outline-offset: -1px;
}

.vn-visa-toggles { display: flex; flex-wrap: wrap; gap: 10px; }
.vn-visa-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 8px 14px;
    border: 1px solid var(--vn-line);
    border-radius: 999px;
    background: var(--vn-paper);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
}
.vn-visa-toggle input { width: 18px; height: 18px; accent-color: var(--vn-jade); }
.vn-visa-toggle:has(input:checked) {
    background: var(--vn-jade-soft);
    border-color: var(--vn-jade);
    color: var(--vn-jade);
}

/* ---- the result ---- */
.vn-visa-result { margin: 0 0 14px; }
.vn-visa-result-idle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 20px 16px;
    border: 1px dashed var(--vn-line);
    border-radius: 14px;
    font-size: .92rem;
    color: var(--vn-ink-soft);
}
.vn-visa-result-idle .et-i { color: var(--vn-jade); }

.vn-visa-verdict {
    border: 1px solid var(--vn-line);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 12px;
    background: #fff;
}
.vn-visa-verdict-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 12px 15px;
    background: var(--vn-paper);
    border-bottom: 1px solid var(--vn-line);
}
.vn-visa-verdict-head strong { font-size: .95rem; }
.vn-visa-verdict-body { padding: 13px 15px; }
.vn-visa-verdict-body > p { margin: 0 0 8px; font-size: .9rem; line-height: 1.6; }
.vn-visa-verdict-body > p:last-child { margin-bottom: 0; }

/* The four certainty states. Colour is never the only signal, each
   carries a word as well, for colour-blind readers and for anybody
   reading a printout. */
.vn-visa-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.vn-visa-status-available { background: var(--vn-jade-soft); color: var(--vn-jade); }
.vn-visa-status-possible { background: #f4f4f5; color: #9a5a12; }
.vn-visa-status-check { background: #f5f5f7; color: var(--vn-ink-soft); }
.vn-visa-status-unavailable { background: #fbe9e8; color: var(--vn-terracotta); }

.vn-visa-fee {
    margin-left: auto;
    font-size: .9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vn-visa-why {
    margin: 10px 0 0;
    padding: 11px 13px;
    border-radius: 11px;
    background: var(--vn-paper);
    border: 1px solid var(--vn-line);
}
.vn-visa-why summary {
    cursor: pointer;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vn-jade);
    list-style: none;
}
.vn-visa-why summary::-webkit-details-marker { display: none; }
.vn-visa-why ul { margin: 10px 0 0; padding-left: 18px; }
.vn-visa-why li { font-size: .86rem; line-height: 1.58; color: var(--vn-ink-soft); margin-bottom: 5px; }

.vn-visa-rwarn {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}
.vn-visa-rwarn li {
    display: flex;
    gap: 8px;
    padding: 8px 11px;
    margin-bottom: 6px;
    border-radius: 10px;
    background: #ffffff;
    font-size: .85rem;
    line-height: 1.55;
    color: var(--vn-ink);
}
.vn-visa-rwarn li::before { content: '!'; font-weight: 600; color: var(--vn-terracotta); }

.vn-visa-checkrow {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 10px 13px;
    border: 1px solid var(--vn-line);
    border-radius: 11px;
    margin-bottom: 8px;
    font-size: .87rem;
    background: #fff;
}
.vn-visa-checkrow strong { font-weight: 600; }
.vn-visa-checkrow span { color: var(--vn-ink-soft); line-height: 1.55; }
.vn-visa-checkrow.is-fail { border-color: var(--vn-terracotta); background: #ffffff; }
.vn-visa-checkrow.is-pass { border-color: var(--vn-jade); }

.vn-visa-timing {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--vn-line);
    background: var(--vn-jade-soft);
    font-size: .88rem;
    line-height: 1.6;
}
.vn-visa-timing.is-late { background: #fbe9e8; border-color: var(--vn-terracotta); }
.vn-visa-timing.is-tight { background: #f4f4f5; border-color: #e6c48c; }
.vn-visa-timing strong { display: block; margin-bottom: 3px; }

.vn-visa-disclaimer {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin: 0;
    font-size: .8rem;
    line-height: 1.55;
    color: var(--vn-ink-soft);
}
.vn-visa-disclaimer .et-i { margin-top: 2px; }

/* ---- group headings ---- */
.vn-visa-group {
    margin: 34px 0 12px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--vn-terracotta);
}
.vn-visa-group::after {
    content: '';
    display: block;
    height: 1px;
    margin-top: 8px;
    background: var(--vn-line);
}

/* ---- reference cards ---- */
.vn-visa-card {
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: 16px;
    margin-bottom: 10px;
    overflow: hidden;
}
.vn-visa-card > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 15px;
    cursor: pointer;
    list-style: none;
}
.vn-visa-card > summary::-webkit-details-marker { display: none; }
.vn-visa-card > summary:focus-visible { outline: 3px solid var(--vn-terracotta); outline-offset: -3px; }
.vn-visa-card-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--vn-jade-soft);
    color: var(--vn-jade);
    font-size: .84rem;
}
.vn-visa-card-title { flex: 1 1 auto; min-width: 0; }
.vn-visa-card-title strong { display: block; font-size: .97rem; font-weight: 600; letter-spacing: -.01em; }
.vn-visa-card-title small {
    display: block;
    margin-top: 2px;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--vn-ink-soft);
}
.vn-visa-card-chev {
    flex: 0 0 auto;
    font-size: .8rem;
    color: var(--vn-ink-soft);
    transition: transform .22s ease;
}
.vn-visa-card[open] .vn-visa-card-chev { transform: rotate(180deg); }
.vn-visa-card-body {
    padding: 4px 15px 18px;
    border-top: 1px solid var(--vn-line);
    margin-top: 2px;
}
.vn-visa-card-body > p { font-size: .91rem; line-height: 1.68; color: var(--vn-ink-soft); }
.vn-visa-card-body > p strong,
.vn-visa-card-body > p em { color: var(--vn-ink); }
.vn-visa-card-body h4 {
    margin: 20px 0 8px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--vn-ink);
}
.vn-visa-card-body h4:first-child { margin-top: 14px; }

/* ---- sourced facts ---- */
.vn-visa-fact {
    padding: 12px 14px;
    margin: 12px 0;
    border-radius: 12px;
    border: 1px solid var(--vn-line);
    border-left: 3px solid var(--vn-jade);
    background: var(--vn-paper);
}
.vn-visa-fact.is-review { border-left-color: var(--vn-gold); }
.vn-visa-fact > p { margin: 0; font-size: .91rem; line-height: 1.62; color: var(--vn-ink); }
.vn-visa-fact-note {
    margin-top: 7px !important;
    font-size: .84rem !important;
    color: var(--vn-ink-soft) !important;
}
.vn-visa-fact-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 9px !important;
}
.vn-visa-chip {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: #f5f5f7;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--vn-ink-soft);
}
.vn-visa-chip-review { background: #f4f4f5; color: #8a6b12; }
.vn-visa-verified { font-size: .72rem; font-weight: 600; color: var(--vn-ink-soft); }

/* ---- callouts ---- */
.vn-visa-callout {
    padding: 13px 15px;
    margin: 14px 0;
    border-radius: 12px;
    border: 1px solid var(--vn-line);
    background: var(--vn-paper);
}
.vn-visa-callout strong { display: block; font-size: .92rem; line-height: 1.5; color: var(--vn-ink); }
.vn-visa-callout p {
    margin: 7px 0 0;
    font-size: .87rem;
    line-height: 1.6;
    color: var(--vn-ink-soft);
}
.vn-visa-callout-good { background: var(--vn-jade-soft); border-color: #e6f4ed; }
.vn-visa-callout-warn { background: #f4f4f5; border-color: #f3dc8a; }
.vn-visa-callout-bad { background: #fbe9e8; border-color: #f1de9c; }

/* The pending-verification badge. Deliberately the loudest thing on
   the page after an outright danger warning. */
.vn-visa-pending {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 13px 15px;
    margin: 14px 0;
    border-radius: 12px;
    border: 2px solid var(--vn-gold);
    background: #ffffff;
}
.vn-visa-pending > .et-i { flex: 0 0 auto; margin-top: 2px; color: #8a6b12; }
.vn-visa-pending strong { display: block; font-size: .89rem; margin-bottom: 4px; }
.vn-visa-pending p { margin: 0; font-size: .85rem; line-height: 1.58; color: var(--vn-ink-soft); }

/* ---- lists ---- */
.vn-visa-list { margin: 10px 0; padding-left: 20px; }
.vn-visa-list li { font-size: .89rem; line-height: 1.65; color: var(--vn-ink-soft); margin-bottom: 8px; }
.vn-visa-list li strong { color: var(--vn-ink); }

.vn-visa-check { list-style: none; margin: 12px 0; padding: 0; }
.vn-visa-check li {
    display: flex;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--vn-line);
    font-size: .88rem;
    line-height: 1.55;
    color: var(--vn-ink);
}
.vn-visa-check li:last-child { border-bottom: 0; }
.vn-visa-check li::before {
    content: '\f0c8';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', sans-serif;
    font-weight: 400;
    flex: 0 0 auto;
    color: var(--vn-jade);
}
.vn-visa-check-urgent li::before { content: '\f0da'; font-weight: 600; color: var(--vn-terracotta); }

.vn-visa-fineprint {
    font-size: .81rem !important;
    line-height: 1.6 !important;
    color: var(--vn-ink-soft) !important;
}

/* ---- tables ---- */
.vn-visa-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-variant-numeric: tabular-nums;
}
.vn-visa-table thead th {
    text-align: left;
    padding: 0 0 9px;
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vn-ink-soft);
    border-bottom: 1px solid var(--vn-ink);
}
.vn-visa-table thead th:last-child { text-align: right; }
.vn-visa-table tbody th {
    text-align: left;
    padding: 11px 12px 11px 0;
    font-size: .87rem;
    font-weight: 600;
    color: var(--vn-ink);
    border-bottom: 1px solid var(--vn-line);
}
.vn-visa-table tbody td {
    padding: 11px 0;
    text-align: right;
    font-size: .87rem;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 1px solid var(--vn-line);
}
.vn-visa-table tr.is-evisa th, .vn-visa-table tr.is-evisa td { background: var(--vn-jade-soft); }
.vn-visa-tag {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--vn-jade);
    color: #fff;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    vertical-align: 1px;
}

/* ---- three-column comparison ---- */
.vn-visa-compare {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin: 14px 0;
}
@media (min-width: 860px) {
    .vn-visa-compare { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.vn-visa-compare-col {
    padding: 14px;
    border: 1px solid var(--vn-line);
    border-radius: 13px;
    background: var(--vn-paper);
    min-width: 0;
}
.vn-visa-compare-col h4 {
    margin: 0 0 10px !important;
    font-size: .89rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.vn-visa-compare-good { background: var(--vn-jade-soft); border-color: #e6f4ed; }
.vn-visa-compare-good h4 { color: var(--vn-jade); }
.vn-visa-compare-bad { background: #fbe9e8; border-color: #f1de9c; }
.vn-visa-compare-bad h4 { color: var(--vn-terracotta); }
.vn-visa-compare-col dl { margin: 0; }
.vn-visa-compare-col dt {
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--vn-ink-soft);
    margin-top: 9px;
}
.vn-visa-compare-col dd {
    margin: 3px 0 0;
    font-size: .85rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.vn-visa-compare-col ul { margin: 0; padding-left: 18px; }
.vn-visa-compare-col li { font-size: .85rem; line-height: 1.5; margin-bottom: 7px; }
.vn-visa-compare-col code {
    font-size: .82em;
    background: rgba(10, 10, 11, .06);
    padding: 1px 5px;
    border-radius: 4px;
}

/* ---- the MRZ specimen ---- */
.vn-visa-mrz { margin: 16px 0; }
.vn-visa-mrz-page {
    border: 1px solid var(--vn-line);
    border-radius: 12px;
    background: linear-gradient(160deg, #fbfbfd 0%, #ffffff 100%);
    padding: 14px;
    overflow-x: auto;
}
.vn-visa-mrz-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin-bottom: 14px;
}
.vn-visa-mrz-fields span {
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .04em;
}
.vn-visa-mrz-fields small {
    display: block;
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vn-ink-soft);
    margin-bottom: 2px;
}
.vn-visa-mrz-lines {
    border-top: 1px dashed var(--vn-line);
    padding-top: 11px;
}
.vn-visa-mrz-lines code {
    display: block;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: .8rem;
    letter-spacing: .06em;
    white-space: nowrap;
    color: var(--vn-ink);
    line-height: 1.7;
}
.vn-visa-mrz figcaption {
    margin-top: 9px;
    font-size: .8rem;
    line-height: 1.55;
    color: var(--vn-ink-soft);
}

/* ---- two-up splits ---- */
.vn-visa-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin: 14px 0;
}
@media (min-width: 720px) {
    .vn-visa-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vn-visa-split > div { min-width: 0; }
.vn-visa-split h4 { margin-top: 0 !important; }

.vn-visa-entrybox {
    padding: 14px;
    border: 1px solid var(--vn-line);
    border-radius: 13px;
    background: var(--vn-paper);
}
.vn-visa-entrybox h4 { display: flex; align-items: center; gap: 8px; }
.vn-visa-entrybox p { margin: 0; font-size: .87rem; line-height: 1.6; color: var(--vn-ink-soft); }
.vn-visa-entrybox-good { background: var(--vn-jade-soft); border-color: #e6f4ed; }
.vn-visa-entrybox-good h4 { color: var(--vn-jade); }

/* ---- exemption programmes ---- */
.vn-visa-programme {
    padding: 14px;
    margin: 12px 0;
    border: 1px solid var(--vn-line);
    border-radius: 13px;
    background: var(--vn-paper);
}
.vn-visa-programme-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}
.vn-visa-programme-head h4 { margin: 0 !important; }
.vn-visa-programme-window {
    margin: 6px 0 10px !important;
    font-size: .8rem !important;
    font-weight: 600;
    color: var(--vn-ink-soft) !important;
}
.vn-visa-countries {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
}
.vn-visa-countries li {
    padding: 5px 11px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--vn-line);
    font-size: .81rem;
    font-weight: 600;
}
.vn-visa-countries-africa li { padding: 0; border: 0; background: none; }
.vn-visa-countries-africa button {
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--vn-line);
    background: #fff;
    font-family: inherit;
    font-size: .81rem;
    font-weight: 600;
    color: var(--vn-ink);
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.vn-visa-countries-africa button:hover {
    background: var(--vn-jade);
    border-color: var(--vn-jade);
    color: #fff;
}
.vn-visa-countries-africa button:focus-visible {
    outline: 3px solid var(--vn-terracotta);
    outline-offset: 2px;
}

/* ---- gates ---- */
.vn-visa-gates { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 720px) {
    .vn-visa-gates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vn-visa-gates li {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 13px;
    border: 1px solid var(--vn-line);
    border-radius: 11px;
    background: var(--vn-paper);
    min-width: 0;
}
.vn-visa-gates .et-i { flex: 0 0 auto; color: var(--vn-jade); font-size: .84rem; }
.vn-visa-gates span { min-width: 0; }
.vn-visa-gates strong { display: block; font-size: .87rem; font-weight: 600; }
.vn-visa-gates small { display: block; font-size: .78rem; color: var(--vn-ink-soft); }

/* ---- the visa-run timeline ---- */
.vn-visa-timeline-steps { list-style: none; margin: 14px 0; padding: 0; counter-reset: vnvstep; }
.vn-visa-timeline-steps li {
    position: relative;
    padding: 0 0 18px 40px;
    counter-increment: vnvstep;
}
.vn-visa-timeline-steps li::before {
    content: counter(vnvstep);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: var(--vn-ink);
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
}
.vn-visa-timeline-steps li::after {
    content: '';
    position: absolute;
    left: 13px;
    top: 31px;
    bottom: 4px;
    width: 2px;
    background: var(--vn-line);
}
.vn-visa-timeline-steps li:last-child { padding-bottom: 0; }
.vn-visa-timeline-steps li:last-child::after { display: none; }
.vn-visa-timeline-steps strong { display: block; font-size: .9rem; margin-bottom: 3px; }
.vn-visa-timeline-steps p { margin: 0; font-size: .87rem; line-height: 1.6; color: var(--vn-ink-soft); }

/* ---- neighbours ---- */
.vn-visa-neighbours {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 12px 0;
}
@media (min-width: 720px) {
    .vn-visa-neighbours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vn-visa-neighbour {
    padding: 12px 14px;
    border: 1px solid var(--vn-line);
    border-radius: 12px;
    background: var(--vn-paper);
    min-width: 0;
}
.vn-visa-neighbour strong { display: block; font-size: .9rem; margin-bottom: 4px; }
.vn-visa-neighbour p { margin: 0; font-size: .85rem; line-height: 1.58; color: var(--vn-ink-soft); }

/* ---- footer ---- */
.vn-visa-foot {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--vn-line);
}
.vn-visa-foot p { margin: 0 0 7px; font-size: .84rem; line-height: 1.6; color: var(--vn-ink-soft); }
.vn-visa-foot .et-i { color: var(--vn-jade); margin-right: 5px; }

@media (max-width: 420px) {
    .vn-visa-checker { padding: 20px 13px 14px; }
    .vn-visa-card > summary { padding: 13px; gap: 10px; }
    .vn-visa-card-body { padding: 4px 13px 16px; }
    .vn-visa-fact, .vn-visa-callout, .vn-visa-pending { padding-left: 12px; padding-right: 12px; }
}

/* ============================================================
   YOUR NEXT TRIP

   Replaced a row of unexplained name pills. The pills were
   cheap to build and useless to read: nine words, no way to
   tell Sapa from the Mekong Delta, and a heading about our
   publishing schedule rather than the reader's trip.

   Same phone-first rules as the rest of the file, no fixed
   widths, every grid track minmax(0, 1fr), rows that wrap.
   ============================================================ */

.vn-next {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 4px 0 20px;
}
@media (min-width: 900px) {
    /* Two columns of closed cards. Open ones span, because the fit
       columns inside need the room and a half-width open card next to
       a closed one reads as a layout bug. */
    .vn-next { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vn-next-item[open] { grid-column: 1 / -1; }
}

.vn-next-item {
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: 16px;
    overflow: hidden;
    min-width: 0;
    transition: box-shadow .18s ease, border-color .18s ease;
}
.vn-next-item:hover { border-color: var(--vn-jade); }
.vn-next-item[open] { box-shadow: 0 12px 32px rgba(10, 10, 11, .09); }

.vn-next-item > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 15px;
    cursor: pointer;
    list-style: none;
}
.vn-next-item > summary::-webkit-details-marker { display: none; }
.vn-next-item > summary:focus-visible {
    outline: 3px solid var(--vn-terracotta);
    outline-offset: -3px;
}

.vn-next-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--vn-jade-soft);
    color: var(--vn-jade);
    font-size: .92rem;
}
.vn-next-item[open] .vn-next-icon { background: var(--vn-jade); color: #fff; }

.vn-next-head { flex: 1 1 auto; min-width: 0; }
.vn-next-head strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.01em;
}
.vn-next-head small {
    display: block;
    margin-top: 2px;
    font-size: .83rem;
    line-height: 1.45;
    color: var(--vn-ink-soft);
}

.vn-next-meta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}
.vn-next-kind {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--vn-paper-warm);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vn-ink-soft);
    white-space: nowrap;
}
.vn-next-meta .et-i {
    font-size: .8rem;
    color: var(--vn-ink-soft);
    transition: transform .22s ease;
}
.vn-next-item[open] .vn-next-meta .et-i { transform: rotate(180deg); }

/* The tag is the first thing to go when the card gets narrow, it is
   orientation, and the place name is the content. */
@media (max-width: 460px) {
    .vn-next-kind { display: none; }
    .vn-next-item > summary { padding: 13px; gap: 10px; }
}

.vn-next-body {
    padding: 4px 15px 16px;
    border-top: 1px solid var(--vn-line);
}
.vn-next-what {
    margin: 14px 0 0;
    font-size: .93rem;
    line-height: 1.68;
    color: var(--vn-ink);
}

.vn-next-days {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 14px 0;
    padding: 11px 13px;
    border-radius: 11px;
    background: var(--vn-paper-warm);
    font-size: .87rem;
    line-height: 1.55;
    color: var(--vn-ink-soft);
}
.vn-next-days .et-i { color: var(--vn-terracotta); }
.vn-next-days strong { color: var(--vn-ink); }
.vn-next-days span { flex: 1 1 12ch; min-width: 0; }

/* Go / maybe not. The same two-column honesty device the destination
   page uses for "is it for you", so the pattern reads the same in both
   places rather than being reinvented. */
.vn-next-fit {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 14px 0;
}
@media (min-width: 640px) {
    .vn-next-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vn-next-col {
    padding: 13px;
    border-radius: 12px;
    border: 1px solid var(--vn-line);
    background: var(--vn-paper);
    min-width: 0;
}
.vn-next-col h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: .02em;
}
.vn-next-col ul { margin: 0; padding-left: 18px; }
.vn-next-col li {
    font-size: .86rem;
    line-height: 1.58;
    color: var(--vn-ink-soft);
    margin-bottom: 7px;
}
.vn-next-col li:last-child { margin-bottom: 0; }
.vn-next-yes { background: var(--vn-jade-soft); border-color: #e6f4ed; }
.vn-next-yes h3 { color: var(--vn-jade); }
.vn-next-no { background: #ffffff; border-color: #f1de9c; }
.vn-next-no h3 { color: var(--vn-terracotta); }

.vn-next-thing {
    padding: 13px;
    margin: 14px 0;
    border-radius: 12px;
    border: 1px solid var(--vn-line);
    border-left: 3px solid var(--vn-gold);
    background: #ffffff;
}
.vn-next-thing strong {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8a6b12;
}
.vn-next-thing .et-i { color: var(--vn-gold); }
.vn-next-thing p {
    margin: 8px 0 0;
    font-size: .88rem;
    line-height: 1.65;
    color: var(--vn-ink);
}

.vn-next-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    padding-top: 12px;
    border-top: 1px solid var(--vn-line);
}
.vn-next-pairs {
    margin: 0;
    flex: 1 1 16ch;
    min-width: 0;
    font-size: .83rem;
    line-height: 1.55;
    color: var(--vn-ink-soft);
}
.vn-next-pairs .et-i { color: var(--vn-jade); margin-right: 5px; }
.vn-next-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--vn-ink);
    color: #fff;
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .16s ease;
}
.vn-next-link:hover { background: var(--vn-jade); color: #fff; }
.vn-next-link:focus-visible { outline: 3px solid var(--vn-terracotta); outline-offset: 2px; }

/* The basis line. This block is editorial judgement rather than sourced
   research, and the page has to say so where the claims are, not in a
   footer nobody reaches. */
.vn-next-basis {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin: 0;
    max-width: 74ch;
    font-size: .82rem;
    line-height: 1.6;
    color: var(--vn-ink-soft);
}
.vn-next-basis .et-i { margin-top: 3px; color: var(--vn-jade); }

/* Single-place variant on the coming-soon page: no summary to open, so
   the card is just the body. */
.vn-next-solo {
    display: block;
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: 16px;
    margin-bottom: 18px;
}
.vn-next-solo .vn-next-body { border-top: 0; padding: 4px 16px 16px; }

/* ============================================================
   WHERE TO STAY, the decision engine

   Same phone-first rules as the rest of the file. What is new
   here is the ANIMATION VOCABULARY, which had to be rebuilt
   rather than extended, because the section went from "eight
   cards and a map" to "a matcher whose output changes as you
   tap".

   Three ideas govern it:

   1  Motion carries meaning or it does not happen. Score bars
      grow from zero because the growth IS the comparison. The
      map pulses on selection because the pulse is the answer to
      "which one did I just press". Nothing fades in merely to
      look expensive.

   2  Everything decorative is gated behind [data-motion="on"],
      the attribute the motion layer sets only after it has
      confirmed it can finish. No script means no animation and
      a fully readable section, never a section stuck at
      opacity 0. See the reveal block above.

   3  Results animate on ARRIVAL, not on every keystroke. The
      matcher re-runs on each tap, and re-playing a stagger four
      times in two seconds is nausea, not delight, so the
      stagger is keyed to the result set, and a re-rank that
      returns the same areas just moves them.
   ============================================================ */

.vn-stay { max-width: 1120px; margin: 0 auto; }

/* ---- the administrative note, collapsed by default ---- */
.vn-stay-admin {
    background: var(--vn-jade-soft);
    border: 1px solid #e6f4ed;
    border-radius: 14px;
    margin: 0 0 22px;
    overflow: hidden;
}
.vn-stay-admin > summary {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 15px;
    cursor: pointer;
    list-style: none;
    font-size: .89rem;
    line-height: 1.55;
    color: var(--vn-ink);
}
.vn-stay-admin > summary::-webkit-details-marker { display: none; }
.vn-stay-admin > summary > .et-i:first-child { color: var(--vn-jade); margin-top: 3px; }
.vn-stay-admin > summary > span { flex: 1 1 auto; min-width: 0; }
.vn-stay-admin-chev { color: var(--vn-jade); margin-top: 3px; transition: transform .3s ease; }
.vn-stay-admin[open] .vn-stay-admin-chev { transform: rotate(180deg); }
.vn-stay-admin-body { padding: 0 15px 16px; }
.vn-stay-admin-body p { margin: 0 0 10px; font-size: .87rem; line-height: 1.66; color: var(--vn-ink-soft); }
.vn-stay-shared { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.vn-stay-shared li {
    padding: 10px 12px;
    background: #fff;
    border-radius: 11px;
    font-size: .85rem;
    line-height: 1.58;
    color: var(--vn-ink-soft);
}
.vn-stay-shared strong { display: block; color: var(--vn-ink); margin-bottom: 2px; }

/* ---- the matcher ---- */
.vn-stay-matcher {
    position: relative;
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: 20px;
    padding: 22px 16px 18px;
    margin: 0 0 22px;
    overflow: hidden;
    box-shadow: 0 14px 38px rgba(10, 10, 11, .09);
}
.vn-stay-matcher::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--vn-jade), var(--vn-terracotta), var(--vn-gold));
}
.vn-stay-kicker {
    margin: 0 0 5px;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--vn-terracotta);
}
.vn-stay-matcher h3 { font-size: 1.28rem; margin: 0 0 7px; letter-spacing: -.02em; }
.vn-stay-intro { margin: 0 0 16px; font-size: .89rem; line-height: 1.58; color: var(--vn-ink-soft); }
.vn-stay-sublabel {
    margin: 18px 0 9px;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--vn-ink-soft);
}

/* ---- chips ---- */
.vn-stay-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.vn-stay-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 15px;
    border: 1px solid var(--vn-line);
    border-radius: 999px;
    background: var(--vn-paper);
    font-family: inherit;
    font-size: .84rem;
    font-weight: 600;
    color: var(--vn-ink-soft);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease,
                box-shadow .2s ease;
}
.vn-stay-chip .et-i { font-size: .8rem; color: var(--vn-terracotta); transition: color .2s ease; }
.vn-stay-chip:hover { border-color: var(--vn-jade); color: var(--vn-jade); }
.vn-stay-chip:focus-visible { outline: 3px solid var(--vn-terracotta); outline-offset: 2px; }
.vn-stay-chip[aria-pressed="true"] {
    background: var(--vn-ink);
    border-color: var(--vn-ink);
    color: #fff;
    /* The change of ground is the feedback: espresso, white words and a
       gold icon, over 200ms. Nothing scales and nothing springs. */
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .55);
}
.vn-stay-chip[aria-pressed="true"] .et-i { color: var(--vn-gold); }
.vn-stay-chips-small .vn-stay-chip { min-height: 38px; padding: 7px 13px; font-size: .79rem; }

/* The ranking badge on a priority chip. Empty until chosen, so the strip
   does not look pre-filled with numbers nobody picked. */
.vn-stay-rank {
    display: none;
    place-items: center;
    width: 19px;
    height: 19px;
    margin-right: -2px;
    border-radius: 50%;
    background: var(--vn-gold);
    color: var(--vn-ink);
    font-size: .64rem;
    font-weight: 600;
}
.vn-stay-chip[aria-pressed="true"] .vn-stay-rank { display: grid; }

.vn-stay-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
    margin-top: 16px;
}
@media (min-width: 640px) {
    .vn-stay-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.vn-stay-field { min-width: 0; }
.vn-stay-field > label {
    display: block;
    margin-bottom: 6px;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--vn-ink-soft);
}
.vn-stay-field > label span { letter-spacing: .04em; text-transform: none; opacity: .7; }
.vn-stay-field select {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 11px 12px;
    border: 1px solid var(--vn-line);
    border-radius: 12px;
    background: var(--vn-paper);
    font-family: inherit;
    font-size: .93rem;
    font-weight: 600;
    color: var(--vn-ink);
}
.vn-stay-field select:focus-visible { outline: 3px solid var(--vn-terracotta); outline-offset: -1px; }

/* ---- results ---- */
.vn-stay-results { margin: 18px 0 14px; display: grid; gap: 10px; }
.vn-stay-idle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 20px 16px;
    border: 1px dashed var(--vn-line);
    border-radius: 14px;
    font-size: .9rem;
    color: var(--vn-ink-soft);
}
.vn-stay-idle .et-i { color: var(--vn-jade); }

.vn-stay-hit {
    display: grid;
    gap: 10px;
    padding: 14px 15px;
    border: 1px solid var(--vn-line);
    border-radius: 15px;
    background: #fff;
}
.vn-stay-hit:first-child { border-color: var(--vn-jade); background: linear-gradient(160deg, var(--vn-jade-soft), #fff 70%); }
.vn-stay-hit-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}
.vn-stay-hit-rank {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--vn-ink);
    color: #fff;
    font-size: .76rem;
    font-weight: 600;
}
.vn-stay-hit-name { font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; }
.vn-stay-hit-official { font-size: .78rem; font-weight: 600; color: var(--vn-ink-soft); }
.vn-stay-hit-pct {
    margin-left: auto;
    font-size: .82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--vn-jade);
    white-space: nowrap;
}
.vn-stay-hit ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.vn-stay-hit li { font-size: .85rem; line-height: 1.55; color: var(--vn-ink-soft); }
.vn-stay-hit li::before {
    content: ''; display: inline-block; width: .85em; height: .85em; margin-right: .45em; vertical-align: -.08em;
    background: var(--vn-jade);
    -webkit-mask: var(--et-i-arrow) center / contain no-repeat; mask: var(--et-i-arrow) center / contain no-repeat;
}
.vn-stay-hit .vn-stay-hit-warn li::before {
    content: '! '; width: auto; height: auto; margin-right: 0; vertical-align: baseline;
    background: none; -webkit-mask: none; mask: none;
    color: var(--vn-terracotta); font-weight: 600;
}
.vn-stay-hit-link {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 9px 15px;
    border-radius: 999px;
    background: var(--vn-ink);
    color: #fff;
    font-size: .81rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .18s ease, gap .18s ease;
}
.vn-stay-hit-link:hover { background: var(--vn-jade); color: #fff; gap: 11px; }

/* The airport verdict, when the flights make it a real question. */
.vn-stay-airport {
    padding: 13px 15px;
    border-radius: 13px;
    border: 1px solid #f3dc8a;
    background: #f4f4f5;
}
.vn-stay-airport strong { display: block; font-size: .9rem; margin-bottom: 5px; }
.vn-stay-airport p { margin: 0 0 5px; font-size: .85rem; line-height: 1.58; color: var(--vn-ink-soft); }
.vn-stay-airport.is-yes { border-color: var(--vn-jade); background: var(--vn-jade-soft); }
.vn-stay-airport.is-no { border-color: var(--vn-line); background: var(--vn-paper); }

.vn-stay-basis,
.vn-stay-fine {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin: 0;
    font-size: .81rem;
    line-height: 1.6;
    color: var(--vn-ink-soft);
}
.vn-stay-basis .et-i { margin-top: 3px; color: var(--vn-jade); }

/* ---- comparison tray ---- */
.vn-stay-compare {
    background: #fff;
    border: 1px solid var(--vn-ink);
    border-radius: 18px;
    padding: 16px;
    margin: 0 0 22px;
    box-shadow: 0 14px 34px rgba(10, 10, 11, .12);
}
.vn-stay-compare-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.vn-stay-compare-head h3 { margin: 0; font-size: 1.05rem; }
.vn-stay-compare-body { overflow-x: auto; }
.vn-stay-ctable { width: 100%; border-collapse: collapse; min-width: 420px; }
.vn-stay-ctable th, .vn-stay-ctable td {
    padding: 9px 10px;
    text-align: left;
    border-bottom: 1px solid var(--vn-line);
    font-size: .83rem;
    vertical-align: top;
}
.vn-stay-ctable thead th {
    font-size: .74rem;
    font-weight: 600;
    color: var(--vn-ink);
    border-bottom: 2px solid var(--vn-ink);
}
.vn-stay-ctable thead th small { display: block; font-weight: 600; color: var(--vn-ink-soft); }
.vn-stay-ctable tbody th { font-weight: 600; color: var(--vn-ink-soft); white-space: nowrap; }
.vn-stay-ctable td { color: var(--vn-ink); font-variant-numeric: tabular-nums; }

/* ---- group headings ---- */
.vn-stay-group {
    margin: 32px 0 6px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--vn-terracotta);
}
.vn-stay-group::after {
    content: '';
    display: block;
    height: 1px;
    margin-top: 8px;
    background: var(--vn-line);
}
.vn-stay-grouplede { margin: 0 0 14px; font-size: .88rem; color: var(--vn-ink-soft); }

/* ---- area cards ---- */
.vn-stay-areas { display: grid; gap: 10px; }
@media (min-width: 940px) {
    .vn-stay-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .vn-stay-area[open] { grid-column: 1 / -1; }
}
.vn-stay-area {
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: 16px;
    overflow: hidden;
    min-width: 0;
    transition: border-color .2s ease, box-shadow .22s ease;
}
.vn-stay-area:hover { border-color: var(--vn-jade); }
.vn-stay-area[open] { border-color: var(--vn-jade); box-shadow: 0 12px 32px rgba(10, 10, 11, .1); }
.vn-stay-area.is-match { border-color: var(--vn-gold); box-shadow: 0 0 0 2px rgba(201, 162, 39, .3); }
.vn-stay-area > summary {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 15px;
    cursor: pointer;
    list-style: none;
}
.vn-stay-area > summary::-webkit-details-marker { display: none; }
.vn-stay-area > summary:focus-visible { outline: 3px solid var(--vn-terracotta); outline-offset: -3px; }
.vn-stay-area-head { flex: 1 1 auto; min-width: 0; }
.vn-stay-area-head strong { display: block; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.vn-stay-official {
    display: block;
    margin-top: 2px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--vn-ink-soft);
}
.vn-stay-identity {
    display: block;
    margin-top: 5px;
    font-size: .83rem;
    line-height: 1.45;
    color: var(--vn-terracotta);
    font-weight: 600;
}
.vn-stay-area-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; }
.vn-stay-metro {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--vn-jade-soft);
    color: var(--vn-jade);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .05em;
    white-space: nowrap;
}
.vn-stay-area-meta > .et-i { font-size: .8rem; color: var(--vn-ink-soft); transition: transform .26s ease; }
.vn-stay-area[open] .vn-stay-area-meta > .et-i { transform: rotate(180deg); }

.vn-stay-area-body { padding: 4px 15px 16px; border-top: 1px solid var(--vn-line); }
.vn-stay-summary { margin: 14px 0; font-size: .91rem; line-height: 1.68; color: var(--vn-ink-soft); }

.vn-stay-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 14px 0; }
@media (min-width: 640px) { .vn-stay-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vn-stay-col { padding: 12px; border-radius: 12px; border: 1px solid var(--vn-line); min-width: 0; }
.vn-stay-col h4 {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 8px; font-size: .82rem; font-weight: 600;
}
.vn-stay-col ul { margin: 0; padding-left: 17px; }
.vn-stay-col li { font-size: .85rem; line-height: 1.56; color: var(--vn-ink-soft); margin-bottom: 6px; }
.vn-stay-col li:last-child { margin-bottom: 0; }
.vn-stay-yes { background: var(--vn-jade-soft); border-color: #e6f4ed; }
.vn-stay-yes h4 { color: var(--vn-jade); }
.vn-stay-no { background: #ffffff; border-color: #f1de9c; }
.vn-stay-no h4 { color: var(--vn-terracotta); }

/* ---- score bars ----
   The growth is the comparison, so the bar starts at zero width and is
   driven to --w only once the card is open and on screen. "is-measured"
   marks the one dimension that is a fact rather than a view. */
.vn-stay-scores { display: grid; gap: 7px; margin: 16px 0; }
.vn-stay-score {
    display: grid;
    grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}
.vn-stay-score-label { font-size: .78rem; font-weight: 600; color: var(--vn-ink-soft); }
.vn-stay-score-track {
    position: relative;
    display: block;
    height: 7px;
    border-radius: 999px;
    background: rgba(10, 10, 11, .07);
    overflow: hidden;
}
.vn-stay-score-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: var(--w);
    border-radius: 999px;
    background: linear-gradient(90deg, var(--vn-jade), var(--vn-terracotta));
}
.vn-stay-score-fill.is-measured {
    background: linear-gradient(90deg, var(--vn-jade), var(--vn-jade));
}
.vn-stay-score-num {
    font-size: .76rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--vn-ink);
    white-space: nowrap;
}
.vn-stay-score-num small { font-weight: 600; color: var(--vn-ink-soft); }
@media (max-width: 460px) {
    .vn-stay-score { grid-template-columns: minmax(0, 7em) minmax(0, 1fr) auto; gap: 8px; }
    .vn-stay-score-label { font-size: .73rem; }
}

.vn-stay-detail { margin: 14px 0; display: grid; gap: 9px; }
.vn-stay-detail > div { display: flex; flex-wrap: wrap; gap: 3px 10px; }
.vn-stay-detail dt {
    flex: 0 0 auto;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--vn-ink-soft);
    min-width: 9em;
}
.vn-stay-detail dd { flex: 1 1 14ch; margin: 0; font-size: .85rem; line-height: 1.55; color: var(--vn-ink); }

.vn-stay-street {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 11px 13px;
    margin: 14px 0;
    border-radius: 12px;
    border-left: 3px solid var(--vn-gold);
    background: #ffffff;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--vn-ink-soft);
}
.vn-stay-street .et-i { color: var(--vn-gold); margin-top: 3px; }
.vn-stay-street strong { color: var(--vn-ink); }

.vn-stay-actions { display: flex; flex-wrap: wrap; gap: 9px; padding-top: 12px; border-top: 1px solid var(--vn-line); }
.vn-stay-compare-btn, .vn-stay-buddy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 15px;
    border-radius: 999px;
    border: 1px solid var(--vn-line);
    background: var(--vn-paper);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    color: var(--vn-ink);
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.vn-stay-compare-btn:hover, .vn-stay-buddy:hover {
    background: var(--vn-jade); border-color: var(--vn-jade); color: #fff;
}
.vn-stay-compare-btn[aria-pressed="true"] {
    background: var(--vn-ink); border-color: var(--vn-ink); color: #fff;
}

/* ---- practical cards ---- */
.vn-stay-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 780px) { .vn-stay-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vn-stay-card {
    padding: 15px;
    border: 1px solid var(--vn-line);
    border-radius: 15px;
    background: #fff;
    min-width: 0;
}
.vn-stay-card h4 {
    display: flex; align-items: center; gap: 9px;
    margin: 0 0 10px; font-size: .95rem; font-weight: 600;
}
.vn-stay-card h4 .et-i { color: var(--vn-terracotta); }
.vn-stay-card p { margin: 0 0 9px; font-size: .87rem; line-height: 1.66; color: var(--vn-ink-soft); }
.vn-stay-card p:last-child { margin-bottom: 0; }
.vn-stay-warn {
    padding: 10px 12px;
    border-radius: 10px;
    background: #fbe9e8;
    color: var(--vn-ink) !important;
    font-weight: 600;
}
.vn-stay-regrets { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.vn-stay-regrets li { font-size: .86rem; line-height: 1.6; color: var(--vn-ink-soft); }
.vn-stay-regrets strong { display: block; color: var(--vn-ink); margin-bottom: 2px; }

/* ---- market figures ---- */
.vn-stay-market { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 14px; }
@media (min-width: 780px) { .vn-stay-market { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vn-stay-stat {
    padding: 14px;
    border: 1px solid var(--vn-line);
    border-radius: 14px;
    background: var(--vn-paper);
    min-width: 0;
}
.vn-stay-stat > strong { display: block; font-size: .96rem; line-height: 1.45; margin-bottom: 8px; }
.vn-stay-scope { margin: 0 0 8px; font-size: .8rem; line-height: 1.58; color: var(--vn-ink-soft); }
.vn-stay-scope span {
    display: inline-block;
    margin-right: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--vn-ink);
    color: #fff;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.vn-stay-stat-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; margin: 0; }
.vn-stay-stat-meta a { font-size: .74rem; font-weight: 600; color: var(--vn-jade); }

.vn-stay-callout {
    padding: 13px 15px;
    margin: 0 0 14px;
    border-radius: 13px;
    border: 1px solid var(--vn-line);
    background: var(--vn-paper);
}
.vn-stay-callout strong { display: block; font-size: .91rem; }
.vn-stay-callout p { margin: 7px 0 0; font-size: .86rem; line-height: 1.62; color: var(--vn-ink-soft); }
.vn-stay-callout-warn { background: #f4f4f5; border-color: #f3dc8a; }

/* ---- the gaps we publish on purpose ---- */
.vn-stay-gaps {
    padding: 15px;
    border: 1px dashed var(--vn-line);
    border-radius: 15px;
    background: var(--vn-paper);
}
.vn-stay-gaps h4 {
    display: flex; align-items: center; gap: 9px;
    margin: 0 0 11px; font-size: .9rem; font-weight: 600;
}
.vn-stay-gaps h4 .et-i { color: var(--vn-ink-soft); }
.vn-stay-gap p { margin: 0 0 11px; font-size: .85rem; line-height: 1.64; color: var(--vn-ink-soft); }
.vn-stay-gap:last-child p { margin-bottom: 0; }

.vn-stay-foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--vn-line); }
.vn-stay-foot p { margin: 0; font-size: .83rem; line-height: 1.6; color: var(--vn-ink-soft); }
.vn-stay-foot .et-i { color: var(--vn-jade); margin-right: 5px; }

@media (max-width: 420px) {
    .vn-stay-matcher { padding: 20px 13px 15px; }
    .vn-stay-area > summary { padding: 13px; gap: 10px; }
    .vn-stay-area-body { padding: 4px 13px 15px; }
    .vn-stay-card, .vn-stay-stat, .vn-stay-gaps { padding: 13px; }
}

/* ============================================================
   STAY, motion

   All of it gated. The reveal attribute is set by vn-motion.js
   only after it has confirmed it can finish the job, so a
   blocked script costs the reader the animation and nothing
   else. Every rule below therefore lives inside
   .vn[data-motion="on"], none of them may hide anything on
   their own. See the reveal block near the top of this file.
   ============================================================ */

/* The score bar lights up like a row of beads: the fill is masked into
   short segments and the light comes up row by row, 40ms apart. Opacity
   from .25, never 0, so the measurement is always on the page. */
@keyframes et-vn-beadbar {
    from { opacity: .25; }
    to   { opacity: 1; }
}
@keyframes et-vn-match {
    from { border-color: var(--vn-line); }
    30%  { border-color: rgba(37, 99, 235, .9); }
    to   { border-color: rgba(37, 99, 235, .55); }
}

/* Results arrive with a soft sunrise. --i is set per card by the script and
   capped, so a twenty-area list never becomes a two-second wait. */
.vn[data-motion="on"] .vn-stay-hit {
    animation: et-sunrise-soft 560ms var(--et-ease-rise) backwards;
    animation-delay: calc(min(var(--i, 0), 3) * 90ms);
}
.vn[data-motion="on"] .vn-stay-airport {
    animation: et-sunrise-soft 560ms var(--et-ease-rise) backwards;
    animation-delay: .12s;
}

.vn[data-motion="on"] .vn-stay-area[open] .vn-stay-score-fill {
    animation: et-vn-beadbar .48s var(--et-ease-glide) backwards;
    animation-delay: calc(var(--row, 0) * 40ms);
}
.vn[data-motion="on"] .vn-stay-area[open] .vn-stay-summary,
.vn[data-motion="on"] .vn-stay-area[open] .vn-stay-split,
.vn[data-motion="on"] .vn-stay-area[open] .vn-stay-detail {
    animation: et-unfold-down .3s var(--et-ease-settle) backwards;
}
.vn[data-motion="on"] .vn-stay-area[open] .vn-stay-split { animation-delay: .06s; }
.vn[data-motion="on"] .vn-stay-area[open] .vn-stay-detail { animation-delay: .12s; }

/* A matched area's border turns gold when the ranking names it, so the
   connection between the result list and the card below it is visible
   rather than implied. */
.vn[data-motion="on"] .vn-stay-area.is-match {
    border-color: rgba(37, 99, 235, .55);
    animation: et-vn-match .9s var(--et-ease-glide);
}

@media (prefers-reduced-motion: reduce) {
    .vn[data-motion="on"] .vn-stay-hit,
    .vn[data-motion="on"] .vn-stay-airport,
    .vn[data-motion="on"] .vn-stay-area[open] .vn-stay-score-fill,
    .vn[data-motion="on"] .vn-stay-area[open] .vn-stay-summary,
    .vn[data-motion="on"] .vn-stay-area[open] .vn-stay-split,
    .vn[data-motion="on"] .vn-stay-area[open] .vn-stay-detail,
    .vn[data-motion="on"] .vn-stay-area.is-match { animation: none; }
    .vn-stay-chip, .vn-stay-area, .vn-stay-compare-btn { transition: none; }
}

/* ---- the map as a control ----
   The selected area is outlined, the others recede, and one Glint travels
   once around the chosen marker to say the press registered. Nothing
   pulses and nothing grows. */
.vn-area circle { transition: fill .24s ease, stroke-width .24s ease; }
.vn-area:hover circle { stroke-width: 2.5; }
/* The ring sits just outside the marker, as a gold-light dash that is
   parked out of sight (a 12-unit dash on a 1000-unit path) until the Glint
   carries it round. It never hides anything: it is a decoration of its own. */
.vn-map .vn-area-ring {
    fill: none;
    stroke: var(--c-gold-light, #93c5fd);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 12 988;
    stroke-dashoffset: 12;
    visibility: hidden;
    r: calc(var(--r, 16px) + 4px);
    pointer-events: none;
}
.vn[data-motion="on"] .vn-area.is-active .vn-area-ring {
    animation: et-glint 1400ms var(--et-ease-glide) 1, vn-ring-on 1400ms linear 1;
}
/* Shown only while the Glint runs; at rest a parked dash would sit beside
   every marker as a stray tick. */
@keyframes vn-ring-on {
    from, to { visibility: visible; }
}
.vn-map .vn-area:not(.is-active) { transition: opacity .24s ease; }
.vn-map:hover .vn-area:not(.is-active):not(:hover) { opacity: .55; }
@media (prefers-reduced-motion: reduce) {
    .vn[data-motion="on"] .vn-area.is-active .vn-area-ring { animation: none; }
    .vn-area circle { transition: none; }
    .vn-map:hover .vn-area:not(.is-active):not(:hover) { opacity: 1; }
}

/* ============================================================
   PHOTOGRAPHY

   Two rules worth stating. The aspect ratio is set on the figure
   and the image fills it, so a photo can never push the page
   around while it loads, the box is the right size before the
   bytes arrive, and --bg holds the picture's own average colour
   so the gap is never a white rectangle.

   The credit is part of the component, not something a caller
   remembers. Small, quiet, and always there.
   ============================================================ */
.vn-photo {
    position: relative;
    margin: 0 0 14px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg, var(--vn-line));
    aspect-ratio: var(--ratio, 16 / 10);
}
.vn-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vn-photo figcaption {
    position: absolute;
    right: 0; bottom: 0;
    display: flex;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 10px 0 0 0;
    background: rgba(10, 10, 11, .62);
    backdrop-filter: blur(4px);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .82);
}
.vn-photo figcaption a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); }
.vn-photo figcaption a:hover { border-bottom-color: #fff; }

/* A dish card with a photo leads with it, the picture is the answer to
   "what am I ordering", and the prose is the answer to "should I". */
.vn-dish.has-photo { padding-top: 0; overflow: hidden; }
.vn-dish.has-photo .vn-photo {
    margin: 0 -20px 14px;
    border-radius: 0;
    aspect-ratio: 16 / 9;
}
@media (max-width: 420px) {
    .vn-dish.has-photo .vn-photo { margin-left: -16px; margin-right: -16px; }
}

/* ============================================================
   TRIP COST ESTIMATOR, wizard and route result

   Phone-first, same rules as the rest of the file: every grid
   track minmax(0, 1fr), every row a wrapping flex line, nothing
   sets a floor on its own width.

   One thing specific to this section: MONEY HAS TO BE READABLE.
   Totals are tabular-nums at a size you can read across a room,
   and the low/expected/high triple never collapses into a single
   figure, the range IS the honesty.
   ============================================================ */

/* The planner pages' own column. ".vn.vn-plan", not ".vn-plan": the
   destination page's itinerary cards are also .vn-plan, and the bare
   class used to hand every one of those cards this page padding. The
   global and local bars are in the flow, so the top needs no clearance of
   its own, only the page's breathing room. */
.vn.vn-plan {
    max-width: calc(860px + var(--pad, 20px) * 2); margin: 0 auto;
    padding: clamp(36px, 5vw, 64px) var(--pad, 20px) clamp(64px, 8vw, 104px);
}

/* ---- wizard ---- */
.vn-wiz-head { margin-bottom: 20px; }
.vn-wiz-head h1 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin: 0 0 8px; letter-spacing: -.02em; }
/* Flight Path (motion.css): drawn and moved by et-motion.js; here it only
   takes its place under the heading. */
.vn-wiz-flight { margin: 12px 0 2px; }
.vn-wiz-count { margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--vn-ink-soft); }

.vn-wiz-step {
    border: 1px solid var(--vn-line); border-radius: 18px;
    background: #fff; padding: 18px 16px; margin: 18px 0;
}
.vn-wiz-step legend {
    padding: 0 8px; font-size: 1.08rem; font-weight: 600; letter-spacing: -.01em;
}
.vn-wiz-help { margin: 4px 0 14px; font-size: .87rem; line-height: 1.55; color: var(--vn-ink-soft); }
.vn-wiz-note { margin: 10px 0 0; font-size: .79rem; line-height: 1.55; color: var(--vn-ink-soft); }

.vn-wiz-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 560px) { .vn-wiz-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vn-wiz-field { display: block; min-width: 0; }
.vn-wiz-field > span {
    display: block; margin-bottom: 6px; font-size: .66rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--vn-ink-soft);
}
.vn-wiz-field input, .vn-wiz-field select {
    width: 100%; min-width: 0; min-height: 48px; padding: 12px 13px;
    border: 1px solid var(--vn-line); border-radius: 12px;
    background: var(--vn-paper); font-family: inherit; font-size: .96rem;
    font-weight: 600; color: var(--vn-ink);
}
.vn-wiz-field input:focus-visible, .vn-wiz-field select:focus-visible {
    outline: 3px solid var(--vn-terracotta); outline-offset: -1px;
}
.vn-wiz-check { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-size: .9rem; font-weight: 600; }
.vn-wiz-check input { width: 18px; height: 18px; accent-color: var(--vn-jade); }

.vn-wiz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
@media (min-width: 640px) { .vn-wiz-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vn-wiz-opts-wide { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .vn-wiz-opts-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vn-wiz-opt { position: relative; display: block; min-width: 0; cursor: pointer; }
.vn-wiz-opt input {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0;
}
.vn-wiz-opt-body {
    display: flex; flex-direction: column; gap: 5px;
    min-height: 76px; padding: 13px;
    border: 1px solid var(--vn-line); border-radius: 14px;
    background: var(--vn-paper);
    transition: border-color .18s ease, background .18s ease, transform .2s var(--et-ease-glide);
}
.vn-wiz-opt-body .et-i { font-size: 1rem; color: var(--vn-terracotta); }
.vn-wiz-opt-body strong { font-size: .92rem; font-weight: 600; }
.vn-wiz-opt-body small { font-size: .8rem; line-height: 1.45; color: var(--vn-ink-soft); }
.vn-wiz-opt:hover .vn-wiz-opt-body { border-color: var(--vn-jade); }
.vn-wiz-opt input:checked + .vn-wiz-opt-body {
    border-color: var(--vn-ink); background: var(--vn-ink); color: #fff;
    box-shadow: 0 8px 20px rgba(10, 10, 11, .22);
}
.vn-wiz-opt input:checked + .vn-wiz-opt-body .et-i { color: var(--vn-gold); }
.vn-wiz-opt input:checked + .vn-wiz-opt-body small { color: rgba(255,255,255,.76); }
.vn-wiz-opt input:focus-visible + .vn-wiz-opt-body { outline: 3px solid var(--vn-terracotta); outline-offset: 2px; }

.vn-wiz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vn-wiz-chip { position: relative; cursor: pointer; }
.vn-wiz-chip input {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0;
}
.vn-wiz-chip span {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 10px 15px;
    border: 1px solid var(--vn-line); border-radius: 999px;
    background: var(--vn-paper); font-size: .85rem; font-weight: 600;
    color: var(--vn-ink-soft);
    transition: background .18s ease, color .18s ease, border-color .18s ease,
                transform .2s var(--et-ease-glide);
}
.vn-wiz-chip span .et-i { font-size: .82rem; color: var(--vn-terracotta); }
.vn-wiz-chip:hover span { border-color: var(--vn-jade); color: var(--vn-jade); }
.vn-wiz-chip input:checked + span {
    background: var(--vn-ink); border-color: var(--vn-ink); color: #fff;
}
.vn-wiz-chip input:checked + span .et-i { color: var(--vn-gold); }
.vn-wiz-chip input:focus-visible + span { outline: 3px solid var(--vn-terracotta); outline-offset: 2px; }

.vn-wiz-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.vn-wiz-notice, .vn-trip-notice {
    display: flex; gap: 9px; align-items: flex-start; margin: 14px 0 0;
    font-size: .81rem; line-height: 1.58; color: var(--vn-ink-soft);
}

/* ---- the trip ---- */
.vn-trip-head h1 { font-size: clamp(1.4rem, 3.2vw, 2rem); margin: 0 0 8px; letter-spacing: -.02em; line-height: 1.22; }

/* The route reads as one sentence, so it wraps as one, but the arrows must
   never start a line, and a place name must never break across two.
   NB: -stop is already the stops-list card further down this file, hence
   -city here. Same word, different thing. */
.vn-trip-route { display: block; text-wrap: balance; }
.vn-trip-city { white-space: nowrap; }
.vn-trip-hop { color: var(--vn-ink-soft); font-weight: 400; }
/* Saigon is where every route begins. Weight and colour say so without
   adding a word of explanation. */
.vn-trip-city.is-home { font-weight: 600; color: var(--vn-terracotta); }
.vn-trip-h {
    margin: 34px 0 12px; font-size: .72rem; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase; color: var(--vn-terracotta);
}
.vn-trip-h::after { content: ''; display: block; height: 1px; margin-top: 8px; background: var(--vn-line); }

.vn-trip-total {
    padding: 20px 16px; border-radius: 20px;
    border: 1px solid var(--vn-line);
    background: linear-gradient(160deg, var(--vn-jade-soft), #fff 65%);
    margin-bottom: 8px;
}
.vn-trip-total-label {
    margin: 0 0 4px; font-size: .64rem; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: var(--vn-jade);
}
.vn-trip-total-figure {
    margin: 0; font-size: clamp(1.7rem, 6vw, 2.6rem); font-weight: 600;
    letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.vn-trip-total-fx { margin: 4px 0 0; font-size: .86rem; color: var(--vn-ink-soft); }
.vn-trip-range { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.vn-trip-range span {
    flex: 1 1 8rem; display: flex; flex-direction: column; gap: 2px;
    padding: 9px 12px; border-radius: 12px; background: #fff;
    border: 1px solid var(--vn-line);
    font-size: .7rem; font-weight: 600; color: var(--vn-ink-soft);
}
.vn-trip-range b { font-size: .95rem; color: var(--vn-ink); font-variant-numeric: tabular-nums; }
.vn-trip-verdict {
    margin: 14px 0 0; padding: 11px 13px; border-radius: 12px;
    font-size: .88rem; line-height: 1.55; font-weight: 600;
    background: var(--vn-paper); border: 1px solid var(--vn-line);
}
.vn-trip-verdict.is-over { background: #fbe9e8; border-color: #f1de9c; }
.vn-trip-verdict.is-tight { background: #f4f4f5; border-color: #f3dc8a; }
.vn-trip-verdict.is-comfortable, .vn-trip-verdict.is-on-track { background: var(--vn-jade-soft); border-color: #e6f4ed; }

.vn-trip-stops { display: grid; gap: 8px; }
.vn-trip-leg {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 13px; border-radius: 12px;
    background: var(--vn-paper); border: 1px dashed var(--vn-line);
    font-size: .84rem; line-height: 1.55; color: var(--vn-ink-soft);
}
.vn-trip-leg .et-i { color: var(--vn-terracotta); margin-top: 3px; }
.vn-trip-leg.is-rough { border-color: #f3dc8a; background: #ffffff; }
.vn-trip-leg em { color: var(--vn-ink); }
.vn-trip-stop { padding: 14px; border: 1px solid var(--vn-line); border-radius: 15px; background: #fff; }
.vn-trip-stop header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.vn-trip-stop h3 { margin: 0; font-size: 1.05rem; }
.vn-trip-nights {
    padding: 3px 10px; border-radius: 999px; background: var(--vn-ink); color: #fff;
    font-size: .68rem; font-weight: 600; letter-spacing: .06em; white-space: nowrap;
}
.vn-route .vn-trip-why { margin: 7px 0 0; font-size: .85rem; color: var(--vn-terracotta); font-weight: 600; }
.vn-trip-weather { margin: 6px 0 0; font-size: .83rem; color: var(--vn-ink-soft); }
.vn-trip-weather .et-i { color: var(--vn-gold); margin-right: 5px; }
.vn-trip-lines { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.vn-trip-lines span {
    flex: 1 1 7rem; display: flex; flex-direction: column;
    padding: 8px 10px; border-radius: 10px; background: var(--vn-paper);
    font-size: .68rem; font-weight: 600; color: var(--vn-ink-soft);
}
.vn-trip-lines b { font-size: .84rem; color: var(--vn-ink); font-variant-numeric: tabular-nums; }

.vn-trip-excluded { margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--vn-paper); border: 1px solid var(--vn-line); }
.vn-trip-excluded h3 { margin: 0 0 9px; font-size: .9rem; display: flex; align-items: center; gap: 8px; }
.vn-trip-excluded p { margin: 0 0 7px; font-size: .85rem; line-height: 1.6; color: var(--vn-ink-soft); }

.vn-trip-cats { display: grid; gap: 6px; }
.vn-trip-cat { border: 1px solid var(--vn-line); border-radius: 13px; background: #fff; overflow: hidden; }
.vn-trip-cat > summary {
    display: flex; align-items: center; gap: 10px; padding: 11px 13px;
    cursor: pointer; list-style: none;
}
.vn-trip-cat > summary::-webkit-details-marker { display: none; }
.vn-trip-cat-icon {
    display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto;
    border-radius: 10px; background: var(--vn-jade-soft); color: var(--vn-jade); font-size: .76rem;
}
.vn-trip-cat-name { flex: 0 0 auto; font-size: .86rem; font-weight: 600; min-width: 7.5em; }
.vn-trip-cat-bar { flex: 1 1 auto; height: 6px; border-radius: 999px; background: rgba(10, 10, 11,.07); overflow: hidden; min-width: 40px; }
.vn-trip-cat-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--vn-jade), var(--vn-terracotta)); }
.vn-trip-cat-sum { flex: 0 0 auto; font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vn-trip-cat-body { padding: 0 13px 13px; border-top: 1px solid var(--vn-line); padding-top: 11px; }
.vn-trip-money { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 9px; font-variant-numeric: tabular-nums; }
.vn-trip-money strong { font-size: 1.05rem; }
.vn-trip-money-low, .vn-trip-money-high { font-size: .8rem; color: var(--vn-ink-soft); }
.vn-trip-basis, .vn-trip-conf { margin: 0 0 5px; font-size: .82rem; line-height: 1.6; color: var(--vn-ink-soft); }
.vn-trip-conf b { color: var(--vn-ink); text-transform: uppercase; font-size: .72rem; letter-spacing: .08em; }

.vn-trip-advice { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 14px; }
@media (min-width: 780px) { .vn-trip-advice { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vn-trip-save, .vn-trip-splurge { padding: 14px; border-radius: 15px; border: 1px solid var(--vn-line); background: #fff; min-width: 0; }
.vn-trip-save h3, .vn-trip-splurge h3 { margin: 0 0 10px; font-size: .92rem; display: flex; align-items: center; gap: 8px; }
.vn-trip-save h3 .et-i { color: var(--vn-jade); }
.vn-trip-splurge h3 .et-i { color: var(--vn-gold); }
.vn-route .vn-trip-tip { padding: 10px 0; border-bottom: 1px solid var(--vn-line); }
.vn-route .vn-trip-tip:last-child { border-bottom: 0; }
.vn-route .vn-trip-tip strong { font-size: .87rem; }
.vn-route .vn-trip-tip-amount { float: right; font-size: .84rem; font-weight: 600; color: var(--vn-jade); font-variant-numeric: tabular-nums; }
.vn-route .vn-trip-tip p { margin: 4px 0 0; font-size: .83rem; line-height: 1.55; color: var(--vn-ink-soft); }

.vn-route .vn-trip-days { display: grid; gap: 7px; }
.vn-route .vn-trip-day { border: 1px solid var(--vn-line); border-radius: 13px; background: #fff; overflow: hidden; }
.vn-route .vn-trip-day > summary { display: flex; align-items: center; gap: 10px; padding: 12px 13px; cursor: pointer; list-style: none; }
.vn-route .vn-trip-day > summary::-webkit-details-marker { display: none; }
.vn-route .vn-trip-day > summary strong { flex: 0 0 auto; font-size: .9rem; }
.vn-route .vn-trip-day > summary small { flex: 1 1 auto; font-size: .78rem; color: var(--vn-terracotta); font-weight: 600; }
.vn-route .vn-trip-day > summary .et-i { flex: 0 0 auto; font-size: .78rem; color: var(--vn-ink-soft); transition: transform .24s ease; }
.vn-route .vn-trip-day[open] > summary .et-i { transform: rotate(180deg); }
.vn-route .vn-trip-slots { list-style: none; margin: 0; padding: 4px 13px 13px; border-top: 1px solid var(--vn-line); }
.vn-route .vn-trip-slot { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--vn-line); }
.vn-route .vn-trip-slot:last-child { border-bottom: 0; }
.vn-route .vn-trip-time { flex: 0 0 3.4em; font-size: .78rem; font-weight: 600; color: var(--vn-ink-soft); font-variant-numeric: tabular-nums; }
.vn-route .vn-trip-slot .vn-trip-body { flex: 1 1 auto; min-width: 0; display: block; }
.vn-route .vn-trip-slot .vn-trip-body strong { display: block; font-size: .87rem; }
.vn-route .vn-trip-slot .vn-trip-body small { display: block; margin-top: 2px; font-size: .79rem; line-height: 1.5; color: var(--vn-ink-soft); }
.vn-route .vn-trip-slot.is-transport { background: var(--vn-paper); }
.vn-route .vn-trip-slot.is-meal .vn-trip-time { color: var(--vn-terracotta); }
.vn-route .vn-trip-slot.is-nightlife .vn-trip-time { color: #6b4fa8; }

.vn-trip-providers { margin-top: 26px; padding: 15px; border: 1px dashed var(--vn-line); border-radius: 15px; background: var(--vn-paper); }
.vn-trip-providers h3 { margin: 0 0 8px; font-size: .92rem; display: flex; align-items: center; gap: 8px; }
.vn-trip-providers ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.vn-trip-providers li { padding: 9px 12px; border-radius: 11px; background: #fff; border: 1px solid var(--vn-line); }
.vn-trip-providers li strong { font-size: .85rem; margin-right: 8px; }
.vn-trip-providers li span { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.vn-trip-providers li.is-off span { background: #f5f5f7; color: var(--vn-ink-soft); }
.vn-trip-providers li.is-live span { background: var(--vn-jade-soft); color: var(--vn-jade); }
.vn-trip-providers li small { display: block; margin-top: 4px; font-size: .8rem; line-height: 1.5; color: var(--vn-ink-soft); }

.vn-trip-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }

@media (prefers-reduced-motion: reduce) {
    .vn-wiz-bar span, .vn-wiz-opt-body, .vn-wiz-chip span, .vn-trip-day > summary .et-i { transition: none; }
    .vn-wiz-opt:hover .vn-wiz-opt-body, .vn-wiz-chip:hover span,
    .vn-wiz-chip input:checked + span { transform: none; }
}

/* ---- the spread: floor to ceiling, first thing on the page ----
   This is the question everybody arrives with and it used to be four
   screens down. Five rows, one bar each, the reader's own level marked.
   Bars start at 6% so the cheapest option is still a visible bar rather
   than an empty track, nothing here is zero. */
.vn-spread {
    padding: 18px 15px 15px; margin-bottom: 12px;
    border: 1px solid var(--vn-ink); border-radius: 20px; background: #fff;
    box-shadow: 0 14px 38px rgba(10, 10, 11, .1);
}
.vn-spread-head h2 { margin: 0 0 4px; font-size: 1.15rem; letter-spacing: -.02em; }
.vn-spread-head p { margin: 0 0 14px; font-size: .85rem; line-height: 1.5; color: var(--vn-ink-soft); }
.vn-spread-rail { display: grid; gap: 6px; }
.vn-spread-row {
    display: grid; align-items: center; gap: 4px 10px;
    grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) auto;
    padding: 9px 10px; border-radius: 12px; border: 1px solid transparent;
}
.vn-spread-row.is-you { border-color: var(--vn-jade); background: var(--vn-jade-soft); }
.vn-spread-name { display: flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 600; }
.vn-spread-name .et-i { color: var(--vn-terracotta); font-size: .8rem; }
.vn-spread-name b {
    padding: 1px 7px; border-radius: 999px; background: var(--vn-jade); color: #fff;
    font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
}
.vn-spread-bar { height: 8px; border-radius: 999px; background: rgba(10, 10, 11,.07); overflow: hidden; min-width: 30px; }
.vn-spread-bar span {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--vn-jade), var(--vn-gold), var(--vn-terracotta));
}
.vn-spread-sum { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vn-spread-sum b { display: block; font-size: .92rem; font-weight: 600; }
.vn-spread-sum small { display: block; font-size: .7rem; color: var(--vn-ink-soft); }
.vn-spread-feels {
    grid-column: 1 / -1; font-size: .75rem; color: var(--vn-ink-soft);
    padding-left: 2px;
}
.vn-spread-foot {
    margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--vn-line);
    font-size: .82rem; line-height: 1.6; color: var(--vn-ink-soft);
}
@media (max-width: 460px) {
    .vn-spread { padding: 15px 12px 12px; }
    .vn-spread-row { grid-template-columns: minmax(0, 6.2em) minmax(0, 1fr) auto; }
    .vn-spread-name { font-size: .78rem; gap: 5px; }
}

/* ---- folded sections: detail on request, not by default ---- */
.vn-trip-fold {
    margin: 12px 0; border: 1px solid var(--vn-line); border-radius: 15px;
    background: #fff; overflow: hidden;
}
.vn-trip-fold > summary {
    display: flex; align-items: center; gap: 10px; padding: 13px 15px;
    cursor: pointer; list-style: none; font-size: .9rem;
}
.vn-trip-fold > summary::-webkit-details-marker { display: none; }
.vn-trip-fold > summary small { flex: 1 1 auto; font-size: .78rem; color: var(--vn-ink-soft); font-weight: 600; }
.vn-trip-fold > summary > .et-i { margin-left: auto; font-size: .78rem; color: var(--vn-ink-soft); transition: transform .24s ease; }
.vn-trip-fold[open] > summary > .et-i { transform: rotate(180deg); }
.vn-trip-fold > div, .vn-trip-fold > ul, .vn-trip-fold > p {
    padding: 0 15px 15px; border-top: 1px solid var(--vn-line); padding-top: 13px;
}
.vn-trip-fold .vn-trip-cats, .vn-trip-fold .vn-trip-days { padding: 13px 13px 15px; }

/* ---- the optional wizard panel ---- */
.vn-wiz-more {
    margin-top: 16px; border: 1px dashed var(--vn-line); border-radius: 14px;
    background: var(--vn-paper); overflow: hidden;
}
.vn-wiz-more > summary {
    display: flex; align-items: flex-start; gap: 10px; padding: 13px;
    cursor: pointer; list-style: none; font-size: .85rem; line-height: 1.5;
    color: var(--vn-ink-soft);
}
.vn-wiz-more > summary::-webkit-details-marker { display: none; }
.vn-wiz-more > summary > .et-i:first-child { color: var(--vn-jade); margin-top: 2px; }
.vn-wiz-more > summary > span { flex: 1 1 auto; min-width: 0; }
.vn-wiz-more > summary strong { color: var(--vn-ink); }
.vn-wiz-more-chev { margin-top: 2px; transition: transform .24s ease; }
.vn-wiz-more[open] .vn-wiz-more-chev { transform: rotate(180deg); }
.vn-wiz-more-body { padding: 0 13px 14px; }
.vn-wiz-sub {
    margin: 16px 0 8px; font-size: .66rem; font-weight: 600; letter-spacing: .13em;
    text-transform: uppercase; color: var(--vn-ink-soft);
}
@media (prefers-reduced-motion: reduce) {
    .vn-trip-fold > summary > .et-i, .vn-wiz-more-chev { transition: none; }
}

.vn-spread-notice {
    display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0;
    font-size: .76rem; line-height: 1.55; color: var(--vn-ink-soft);
}
.vn-spread-notice .et-i { margin-top: 3px; }

/* ============================================================
   THE HUB, /vietnam

   Everything below styles the guide's front door and the pieces the
   other guide pages borrow from it (the card that is a link, the crumbs,
   the closing chapter). It introduces no new colour: every value is a .vn
   token or a design-system token from elite.css, which is what keeps the
   hub reading as Elite Trip rather than as a second brand sharing the
   domain. White is the only literal, the card ground on a sand chapter.

   Cards follow the apple.com rule: no border, the ground does the work.
   On a white chapter a card is sand, on a sand chapter it is white
   (--vn-card, set per chapter at the top of this file). A card that is a
   link lifts with a shadow; nothing inside it ever scales.

   Note for anyone extending this block: it sits after the MOTION section,
   so "opacity: 0" is forbidden here, a reveal the script never un-hides
   is a blank page. Use the gated helpers above instead.
   ============================================================ */

/* ---------- shared: a link that is a card ---------- */
.vn-start,
.vn-region,
.vn-guide,
.vn-tile {
    background: var(--vn-card);
    border: 0;
    border-radius: var(--r-lg, 22px);
    text-decoration: none;
    color: inherit;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.vn-start:hover,
.vn-guide:hover,
.vn-tile:hover {
    box-shadow: var(--sh-3);
    text-decoration: none;
    color: inherit; border-color: rgba(37, 99, 235, .55); }

/* ---------- 1 · first time in Vietnam ---------- */
.vn-starts {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}
.vn-start {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    min-height: 76px;
    padding: 28px 28px 30px;
}
.vn-start-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--c-espresso);
    color: #fff;
    font-size: 1rem;
}
.vn-start-body { flex: 1 1 auto; min-width: 0; padding-right: 18px; }
.vn-start-body strong {
    display: block;
    margin-bottom: 6px;
    font-size: 1.3125rem;
    font-weight: 600;
    line-height: 1.19;
    letter-spacing: .011em;
    color: var(--vn-ink);
}
.vn-start-body small {
    display: block;
    font-size: var(--t-body, 1.0625rem);
    line-height: 1.47;
    color: var(--vn-ink-soft);
}
.vn-start-go {
    position: absolute;
    top: 30px;
    right: 26px;
    font-size: .85rem;
    color: var(--c-bronze);
    transition: color .26s var(--et-ease-glide);
}
.vn-start:hover .vn-start-go { color: var(--c-gold); }

/* The honest footnote under a set of links that do not all land where the
   heading implies. Quiet, but present. */
.vn-note-inline {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 28px 0 0;
    max-width: 52em;
    font-size: var(--t-small, .875rem);
    line-height: 1.5;
    color: var(--vn-ink-soft);
}
.vn-note-inline .et-i { margin-top: 3px; color: var(--c-bronze); }

/* ---------- 2 · regions ---------- */
.vn-regions {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.vn-region { padding: 30px 28px 18px; border-radius: var(--r-xl, 28px); }

/* A card carrying a photograph loses its own top padding, the picture goes
   edge to edge under the card's own rounded corner, and the body below it
   gets the padding back. "overflow: hidden" is what clips the image to the
   corner radius. */
.vn-region.has-photo {
    padding: 0 28px 18px;
    overflow: hidden;
}
.vn-region-photo {
    display: block;
    /* Undo the card's side padding so the band reaches both edges. */
    margin: 0 -28px 0;
    aspect-ratio: 16 / 9;
    background: var(--c-bg-alt-2);
}
.vn-region-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.vn-region-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--c-espresso);
    color: #fff;
    font-size: 1.15rem;
}
/* Over a photograph the badge sits half on the band, tying the two halves
   of the card together. */
.vn-region.has-photo .vn-region-icon {
    position: relative;
    margin-top: -24px;
    margin-bottom: 14px;
    box-shadow: 0 0 0 4px var(--vn-card);
}
.vn-region h3 {
    font-size: var(--t-title, 2.5rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.003em;
    margin: 0 0 10px;
}
.vn-region-blurb {
    margin: 0 0 18px;
    font-size: var(--t-body, 1.0625rem);
    line-height: 1.47;
    color: var(--vn-ink-soft);
}
.vn-region-list { list-style: none; padding: 0; margin: 0; }
.vn-region-list li + li { border-top: 1px solid var(--vn-line); }
.vn-region-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 52px;
    padding: 6px 0;
    font-size: var(--t-body, 1.0625rem);
    font-weight: 400;
    color: var(--vn-ink);
    text-decoration: none;
}
.vn-region-list a:hover { color: var(--vn-jade); text-decoration: none; }
.vn-region-name { min-width: 0; }
.vn-region-aka { font-weight: 400; color: var(--vn-ink-soft); }

/* Finished guide versus orientation notes, said on the link itself so the
   difference is visible before the tap rather than after it. */
.vn-tag-full,
.vn-tag-notes {
    flex: none;
    padding: 4px 11px;
    border-radius: var(--r-pill, 980px);
    font-size: var(--t-micro, .75rem);
    font-weight: 600;
    letter-spacing: 0;
}
.vn-tag-full { background: var(--c-espresso); color: var(--c-gold-light); }
.vn-tag-notes { background: rgba(15, 26, 44, .07); color: var(--vn-ink-soft); }

/* On a phone the three bands are a swipeable row, not three full-width
   blocks the reader has to scroll past to reach the guides. Same
   scroll-snap pattern as the chapter strip, no carousel library. The row
   is position:relative so nothing absolutely placed inside it can escape
   its clipping and widen the page. */
@media (max-width: 719px) {
    .vn-regions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
        position: relative;
        gap: 12px;
        padding: 4px 0 10px;
    }
    .vn-regions > * { flex: none; width: auto; min-width: 0; scroll-snap-align: none; grid-column: auto; }
    .vn-regions::-webkit-scrollbar { display: none; }
    .vn-region {
        flex: 0 0 86%;
        scroll-snap-align: center;
        padding: 24px 22px 14px;
    }
    .vn-region.has-photo { padding: 0 22px 14px; }
    .vn-region-photo { margin-left: -22px; margin-right: -22px; }
    .vn-region h3 { font-size: 1.75rem; }
}

/* ---------- 3 · how this guide is written, the black chapter ---------- */
.vn-trust-band { padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(56px, 7vw, 88px); }
.vn-trust-band h2 { margin-bottom: clamp(28px, 4vw, 44px); }
.vn-trust {
    list-style: none;
    display: grid;
    gap: 28px 32px;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    padding: 0;
    margin: 0;
}
.vn-trust li { display: flex; flex-direction: column; gap: 8px; }
.vn-trust .et-i {
    margin-bottom: 8px;
    color: var(--c-gold);
    font-size: 1.5rem;
}
.vn-trust strong { font-size: 1.1875rem; font-weight: 600; color: #fff; }
.vn-trust span { font-size: var(--t-body, 1.0625rem); line-height: 1.47; color: var(--c-on-dark-2); }

/* ---------- 4 · the finished guides ---------- */
.vn-guides { display: grid; gap: 20px; }
@media (min-width: 940px) {
    .vn-guides {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        align-items: stretch;
    }
}
.vn-guide-stack { display: grid; gap: 20px; align-content: start; }

/* The flagship: Apple's black tile, unmistakably the biggest thing on the
   page. "--vn-paper" on "--vn-night" is one of the pairings the contrast
   test holds at AA. */
.vn-guide-lead {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 420px;
    padding: clamp(32px, 4vw, 48px);
    border: 0;
    border-radius: var(--r-xl, 28px);
    background: var(--vn-night);
    color: var(--vn-paper);
    text-decoration: none;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.vn-guide-lead:hover {
    box-shadow: var(--sh-4);
    color: var(--vn-paper);
    text-decoration: none; border-color: rgba(37, 99, 235, .55); }
.vn-guide-flag {
    align-self: flex-start;
    margin-bottom: auto;
    padding: 5px 13px;
    border-radius: var(--r-pill, 980px);
    background: rgba(37, 99, 235, .16);
    color: var(--c-gold-light);
    font-size: var(--t-small, .875rem);
    font-weight: 600;
}
.vn-guide-lead h3 {
    margin: 48px 0 10px;
    font-size: var(--t-display, 3.5rem);
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1.05;
    color: #fff;
}
.vn-guide-aka { display: block; font-weight: 600; color: var(--c-on-dark-2); font-size: .5em; letter-spacing: .01em; margin-top: 6px; }
.vn-guide-lead > p {
    margin: 0 0 20px;
    max-width: 30em;
    font-size: var(--t-lead, 1.3125rem);
    line-height: 1.38;
    color: var(--c-on-dark-2);
}
.vn-guide-covers {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0 0 24px;
}
.vn-guide-covers li {
    padding: 5px 13px;
    border-radius: var(--r-pill, 980px);
    background: rgba(255, 255, 255, .08);
    font-size: var(--t-small, .875rem);
    color: var(--c-on-dark);
}
.vn .vn-guide-lead .vn-moment-cta { color: var(--c-gold-light); font-size: var(--t-body, 1.0625rem); font-weight: 400; }
.vn-guide-lead .vn-moment-cta::after { content: "\203A"; font-size: 1.25em; line-height: 1; margin-left: 4px; }

.vn-guide {
    display: block;
    padding: 26px 28px;
    min-height: 44px;
}
.vn-guide-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--c-espresso);
    color: #fff;
    font-size: 1rem;
}
.vn-guide h3 { font-size: 1.3125rem; font-weight: 600; margin: 0 0 6px; letter-spacing: .011em; }
.vn-guide p {
    margin: 0;
    font-size: var(--t-body, 1.0625rem);
    line-height: 1.47;
    color: var(--vn-ink-soft);
}

/* ---------- 5 · plan your trip ---------- */
.vn-plan-lead {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    min-height: 76px;
    padding: clamp(26px, 3.4vw, 40px);
    margin-bottom: 20px;
    border-radius: var(--r-xl, 28px);
    background: var(--vn-night);
    color: var(--vn-paper);
    text-decoration: none;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.vn-plan-lead:hover {
    box-shadow: var(--sh-4);
    color: var(--vn-paper);
    text-decoration: none; border-color: rgba(37, 99, 235, .55); }
.vn-plan-lead-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(37, 99, 235, .16);
    color: var(--c-gold);
    font-size: 1.25rem;
}
.vn-plan-lead-body { flex: 1 1 260px; min-width: 0; }
.vn-plan-lead-body strong {
    display: block;
    font-size: var(--t-sub, 1.75rem);
    font-weight: 600;
    line-height: 1.14;
    margin-bottom: 6px;
    color: #fff;
}
.vn-plan-lead-body small {
    display: block;
    font-size: var(--t-body, 1.0625rem);
    line-height: 1.47;
    color: var(--c-on-dark-2);
}
.vn-plan-lead-go {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 24px;
    border-radius: var(--r-pill, 980px);
    background: var(--c-gold);
    color: #fff;
    font-size: var(--t-body, 1.0625rem);
    font-weight: 400;
}
.vn-plan-lead:hover .vn-plan-lead-go { background: var(--c-gold-hover); }

.vn-tiles {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 560px) {
    .vn-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 940px) {
    .vn-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.vn-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 120px;
    padding: 20px 12px;
    border-radius: var(--r-md, 18px);
    text-align: center;
}
.vn-tile .et-i { font-size: 1.35rem; color: var(--c-bronze); }
.vn-tile strong {
    font-size: var(--t-small, .875rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--vn-ink);
}

@media (prefers-reduced-motion: reduce) {
    .vn-start, .vn-region, .vn-guide, .vn-guide-lead, .vn-tile,
    .vn-plan-lead, .vn-start-go { transition: none; }
    .vn-start:hover, .vn-guide:hover, .vn-tile:hover,
    .vn-guide-lead:hover, .vn-plan-lead:hover { transform: none; }
}

/* The visible breadcrumb, Apple's small grey trail. */
.vn-crumb {
    margin-bottom: 18px;
    font-size: var(--t-micro, .75rem);
    font-weight: 400;
    letter-spacing: -.01em;
    color: var(--vn-ink-soft);
}
.vn-crumb a {
    color: var(--vn-ink-soft);
    font-weight: 400;
    text-decoration: none;
}
.vn-crumb a:hover { color: var(--vn-ink); text-decoration: underline; }

/* ---------- the hub hero: copy beside the country map ---------- */
.vn-hero-country {
    padding-top: clamp(36px, 6vw, 80px);
    padding-bottom: clamp(32px, 4vw, 56px);
}
.vn-hero-country .vn-hero-inner { max-width: none; text-align: left; }
.vn-hero-country .vn-tagline,
.vn-hero-country .vn-lede { margin-left: 0; }
.vn-hero-country .vn-hero-actions { justify-content: flex-start; margin-bottom: 18px; }

.vn-hero-split {
    display: grid;
    gap: 36px;
    justify-items: stretch;
}
.vn-hero-split .vn-hero-copy { max-width: 40em; }
.vn-hero-split > .vn-hero-map { justify-self: center; }
.vn-hero-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0; }
.vn-hero-links .ap-link { font-size: 1.1875rem; }

/* The map. Height-bounded rather than width-bounded: Vietnam is a long thin
   country and the illustration follows it, so sizing this by width makes a
   hero tall enough to hide everything under it. "contain" because a map that
   has been cropped to fit has lost the places at its edges. */
.vn-hero-map {
    margin: 0;
    line-height: 0;
}
.vn-hero-map img {
    display: block;
    width: min(64vw, 260px);
    height: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: var(--r-xl, 28px);
    box-shadow: var(--sh-4);
    background: #fff;
}

/* From the tablet up the hero splits properly: copy left, map right. */
@media (min-width: 760px) {
    .vn-hero-split {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: clamp(36px, 6vw, 88px);
    }
    .vn-hero-split .vn-hero-copy { max-width: none; }
    .vn-hero-map img { width: auto; height: clamp(320px, 38vw, 480px); }
}

/* ---------- the close: the black chapter at the foot of a guide page ---------- */
.vn-close, .vn-brief-close { text-align: center; }
.vn-close h2, .vn-brief-close h2 { margin-left: auto; margin-right: auto; font-size: var(--t-display, 3.5rem); }
.vn-close .vn-section-lede, .vn-brief-close .vn-section-lede { margin-left: auto; margin-right: auto; margin-bottom: 32px; }
.vn-close-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px 28px;
}
.vn-close-actions .ap-link { font-size: 1.1875rem; }


/* ============================================================
   THE ELITE DESK, INSIDE AN ARTICLE

   The component itself is defined once in elite.css with the site tokens,
   so it works on every page. Inside the guide it takes the chapter's card
   ground (--vn-card) and the design system's outlined pill, so it reads as
   the guide offering to help rather than as an advertisement somebody
   pasted in. The Local Host half of a pair is the gold booking action.
   ============================================================ */
.vn .al-inline {
    gap: 16px 28px;
    margin: 32px 0;
    padding: 24px 28px;
    border: 0;
    border-radius: var(--r-lg, 22px);
    background: var(--vn-card);
}

.vn .al-inline-line { color: var(--vn-ink); font-size: 1.1875rem; line-height: 1.3; }
.vn .al-inline-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); align-items: start; }
.vn .al-inline-pair > div { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

.vn .al-inline-btn {
    min-height: 44px;
    padding: 10px 20px;
    background: transparent;
    border-color: var(--vn-ink);
    color: var(--vn-ink);
    font-size: var(--t-body, 1.0625rem);
}

.vn .al-inline-btn:hover { background: var(--vn-ink); color: #fff; }

.vn .al-inline-btn-solid {
    background: var(--c-gold);
    border-color: transparent;
    color: #fff;
}

.vn .al-inline-btn-solid:hover { background: var(--c-gold-hover); color: #fff; }

.vn .al-inline-go { display: none; }

@media (prefers-reduced-motion: reduce) {
    .vn .al-inline-btn { transition: none; }
    .vn .al-inline-btn:hover { transform: none; }
}

/* ============================================================
   THE APPLE LAYER (2026-10-01)

   The guide redrawn in the design system's language. Everything above
   this block still lays the components out; this block gives them the
   apple.com finish: chapters that alternate white, sand and black, cards
   with no borders whose ground changes with the chapter, sentence-case
   labels, 17px body type, pill controls, black for a selected state and
   gold for the one booking action.

   No colour literal here: every value is a .vn token or a design-system
   token from elite.css. Nothing here hides anything (this is after the
   MOTION section), and nothing that contains a photograph scales.
   ============================================================ */

/* ---------- the three chapter grounds ---------- */
.vn .vn-section-dark {
    background: var(--vn-night);
    color: var(--c-on-dark);
    --vn-card: var(--c-espresso-2);
}
.vn .vn-section-dark h2,
.vn .vn-section-dark h3 { color: #fff; }
.vn .vn-section-dark .vn-eyebrow { color: var(--c-gold); }
.vn .vn-section-dark .vn-section-lede { color: var(--c-on-dark-2); }
.vn .vn-section-dark .ap-link { color: var(--c-gold-light); }
.vn .vn-section-dark .vn-btn-ghost { color: var(--c-on-dark); border-color: var(--c-on-dark); }
.vn .vn-section-dark .vn-btn-ghost:hover { background: var(--c-on-dark); color: var(--c-ink); }

/* ---------- sentence case, everywhere ----------
   The design system allows capitals only in the ELITETRIP lockup. Every
   small letterspaced label in the guide becomes a quiet sentence-case
   label at a size that can actually be read. */
.vn .vn-snap-label, .vn .vn-snap-take, .vn .vn-area-fit dt, .vn .vn-tier,
.vn .vn-desk-tip-badge, .vn .vn-glance-label, .vn .vn-bands-caption,
.vn .vn-ledger-unit, .vn .vn-ledger-total span, .vn .vn-calc-eyebrow,
.vn .vn-stepper > label, .vn .vn-calc-quotelabel, .vn .vn-visa-kicker,
.vn .vn-visa-field > label:not(.vn-visa-toggle), .vn .vn-visa-status,
.vn .vn-visa-why summary, .vn .vn-visa-table thead th, .vn .vn-visa-tag,
.vn .vn-visa-compare-col dt, .vn .vn-visa-mrz-fields small, .vn .vn-next-kind,
.vn .vn-next-thing strong, .vn .vn-stay-kicker, .vn .vn-stay-field > label,
.vn .vn-stay-detail dt, .vn .vn-stay-scope span, .vn .vn-wiz-count,
.vn .vn-wiz-field > span, .vn .vn-trip-total-label, .vn .vn-trip-conf b,
.vn .vn-trip-providers li span, .vn .vn-spread-name b, .vn .vn-wiz-sub,
.vn .vn-trip-nights {
    text-transform: none;
    letter-spacing: -.01em;
}
.vn .vn-glance-label, .vn .vn-bands-caption, .vn .vn-ledger-unit,
.vn .vn-stepper > label, .vn .vn-calc-quotelabel,
.vn .vn-visa-field > label:not(.vn-visa-toggle), .vn .vn-stay-field > label,
.vn .vn-wiz-field > span, .vn .vn-wiz-sub, .vn .vn-visa-compare-col dt,
.vn .vn-stay-detail dt, .vn .vn-visa-table thead th, .vn .vn-trip-total-label {
    font-size: var(--t-small, .875rem);
    font-weight: 600;
    color: var(--vn-ink-soft);
}
/* Labels that sit above a field are the field's name, in ink. */
.vn .vn-stepper > label, .vn .vn-visa-field > label:not(.vn-visa-toggle),
.vn .vn-stay-field > label, .vn .vn-wiz-field > span { color: var(--vn-ink); }
.vn .vn-visa-field > label:not(.vn-visa-toggle) span,
.vn .vn-stay-field > label span { font-weight: 400; color: var(--vn-ink-soft); opacity: 1; }

/* The in-section group headings become real subheads. */
.vn .vn-visa-group, .vn .vn-stay-group, .vn .vn-trip-h {
    margin: clamp(40px, 5vw, 56px) 0 16px;
    font-size: var(--t-sub, 1.75rem);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: .007em;
    text-transform: none;
    color: var(--vn-ink);
}
.vn .vn-visa-group::after, .vn .vn-stay-group::after, .vn .vn-trip-h::after { display: none; }
.vn .vn-stay-grouplede { font-size: var(--t-body, 1.0625rem); margin-bottom: 20px; }
.vn .vn-subhead {
    margin: clamp(48px, 6vw, 72px) 0 20px;
    font-size: var(--t-sub, 1.75rem);
    line-height: 1.14;
}

/* ---------- the card ----------
   No border, the chapter's own ground (--vn-card), 18px corners. */
.vn :is(.vn-facet, .vn-fit-col, .vn-mode, .vn-dish, .vn-diet, .vn-plan, .vn-misc,
        .vn-phrase-card, .vn-note, .vn-glance-item, .vn-ledger, .vn-calc, .vn-trip-day,
        .vn-area-card, .vn-map-figure, .vn-visa-checker, .vn-visa-card, .vn-stay-matcher,
        .vn-stay-area, .vn-stay-card, .vn-stay-compare, .vn-next-item, .vn-next-solo,
        .vn-moment, .vn-desk, .vn-style, .vn-spread, .vn-trip-stop, .vn-trip-fold,
        .vn-trip-save, .vn-trip-splurge, .vn-trip-excluded, .vn-stay-gaps, .vn-stay-stat,
        .vn-stay-admin, .vn-visa-notice, .vn-stay-callout, .vn-trip-providers) {
    background: var(--vn-card);
    border-color: transparent;
    border-radius: var(--r-md, 18px);
    box-shadow: none;
}
.vn :is(.vn-ledger, .vn-calc, .vn-visa-checker, .vn-stay-matcher, .vn-spread, .vn-map-figure) {
    border-radius: var(--r-lg, 22px);
}
/* The coloured top bands were the old flourish. Apple has none. */
.vn .vn-calc::before, .vn .vn-visa-checker::before, .vn .vn-stay-matcher::before { display: none; }

/* A card that is a link lifts; one that is a disclosure does not. */
.vn .vn-moment { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.vn .vn-moment:hover { box-shadow: var(--sh-3); text-decoration: none; border-color: rgba(37, 99, 235, .55); }
.vn .vn-facet:hover { transform: none; box-shadow: none; }

/* ---------- photographs ---------- */
.vn .vn-photo { margin: 0 0 clamp(28px, 4vw, 44px); border-radius: var(--r-lg, 22px); }
.vn .vn-photo figcaption {
    padding: 5px 12px;
    border-radius: var(--r-pill, 980px);
    right: 12px; bottom: 12px;
    background: rgba(17, 12, 9, .56);
    font-size: var(--t-micro, .75rem);
    font-weight: 400;
}

/* ============================================================
   AT A GLANCE, the sand band under the hero
   ============================================================ */
.vn .vn-glance {
    max-width: none;
    margin: 0;
    padding: clamp(40px, 6vw, 72px) max(var(--pad, 20px), calc((100% - var(--vn-measure)) / 2));
    background: var(--vn-paper-warm);
    --vn-card: #fff;
}
.vn .vn-glance-head { align-items: baseline; gap: 16px; margin-bottom: 28px; }
.vn .vn-glance-head h2 {
    font-size: var(--t-title, 2.5rem);
    font-weight: 600;
    letter-spacing: -.003em;
    text-transform: none;
    color: var(--vn-ink);
}
.vn .vn-glance-rule { display: none; }
.vn .vn-glance-checked { margin-left: auto; font-size: var(--t-small, .875rem); }
.vn .vn-glance-grid { gap: 16px; }
.vn .vn-glance-item::before { display: none; }
.vn .vn-glance-item:hover { box-shadow: var(--sh-2); border-color: rgba(37, 99, 235, .55); }
.vn .vn-glance-item[open] { box-shadow: var(--sh-2); transform: none; }
.vn .vn-glance-item summary { padding: 22px 20px 20px; gap: 10px; }
.vn .vn-glance-badge { width: 40px; height: 40px; background: var(--vn-paper-warm); color: var(--accent); }
.vn .vn-glance-item:hover .vn-glance-badge { transform: none; }
.vn .vn-glance-item[open] .vn-glance-badge { background: var(--c-espresso); color: #fff; transform: none; }
.vn .vn-glance-label { font-size: var(--t-small, .875rem); font-weight: 400; }
.vn .vn-glance-value { font-size: 1.0625rem; line-height: 1.35; }
.vn .vn-glance-item[open] .vn-glance-value { font-size: 1.3125rem; }
.vn .vn-glance-more { font-size: var(--t-small, .875rem); font-weight: 400; color: var(--c-link); opacity: 1; }
.vn .vn-glance-detail { background: #fff; padding: 20px 22px 24px; }
.vn .vn-glance-detail p { font-size: var(--t-body, 1.0625rem); line-height: 1.55; }
.vn .vn-glance-jump {
    background: var(--vn-ink);
    font-weight: 400;
    font-size: var(--t-body, 1.0625rem);
    padding: 10px 22px;
}
.vn .vn-glance-jump:hover { background: var(--c-ink); transform: none; box-shadow: none; }
.vn .vn-glance-note { font-size: var(--t-small, .875rem); }
.vn .vn-glance-note a { color: var(--c-link); font-weight: 400; }
@media (max-width: 560px) {
    .vn .vn-glance-item summary { padding: 16px 14px 14px; }
    .vn .vn-glance-value { font-size: .9375rem; }
    .vn .vn-glance-head h2 { font-size: 1.75rem; }
}

/* ============================================================
   STRAIGHT ANSWERS, Apple's accordion: hairlines, no boxes
   ============================================================ */
.vn .vn-answers { gap: 0; max-width: 880px; }
.vn .vn-answer {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--vn-line);
    border-radius: 0;
}
.vn .vn-answer:first-child { border-top: 1px solid var(--vn-line); }
.vn .vn-answer summary {
    min-height: 64px;
    padding: 20px 4px;
    font-size: 1.3125rem;
    line-height: 1.3;
    letter-spacing: .011em;
}
.vn .vn-answer summary:hover { background: transparent; color: var(--c-link); }
.vn .vn-answer summary .et-i { color: var(--vn-ink-soft); font-size: .9rem; }
.vn .vn-answer > p {
    padding: 0 4px 26px;
    font-size: var(--t-body, 1.0625rem);
    line-height: 1.55;
    max-width: 44em;
}

/* ============================================================
   IS IT FOR YOU
   ============================================================ */
.vn .vn-fit { gap: 20px; }
.vn .vn-fit-col { padding: clamp(26px, 3vw, 36px); border-top: 0; }
.vn .vn-fit-col h3 { font-size: 1.3125rem; gap: 12px; margin-bottom: 16px; }
.vn .vn-fit-yes h3 .et-i { color: var(--c-gold); }
.vn .vn-fit-no h3 .et-i { color: var(--vn-ink-soft); }
.vn .vn-fit-col li { font-size: var(--t-body, 1.0625rem); line-height: 1.5; margin-bottom: 10px; }
.vn .vn-facets { gap: 20px; }
.vn .vn-facet { padding: 30px 28px; }
.vn .vn-facet .et-i {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--c-espresso); color: #fff; font-size: 1rem; margin-bottom: 18px;
}
.vn .vn-facet h4 { font-size: 1.3125rem; margin: 0 0 8px; }
.vn .vn-facet p { font-size: var(--t-body, 1.0625rem); line-height: 1.5; }

/* ============================================================
   WHAT IT COSTS
   ============================================================ */
.vn .vn-bands-wrap { max-width: 620px; margin-bottom: 28px; }
.vn .vn-bands-caption { margin-bottom: 10px; }
.vn .vn-bands { background: var(--vn-card); border: 0; border-radius: var(--r-md, 18px); box-shadow: none; padding: 4px; }
.vn .vn-bands-thumb { top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 14px; box-shadow: var(--sh-1); }
.vn .vn-band-tab { border-radius: 14px; }
.vn .vn-band-tab strong { font-size: var(--t-body, 1.0625rem); }
.vn .vn-band-tab small { font-size: var(--t-micro, .75rem); font-weight: 400; }
.vn .vn-band-tab:focus-visible { outline: none; box-shadow: var(--ring); }
.vn .vn-cost-grid { gap: 20px; }
@media (min-width: 940px) {
    .vn .vn-cost-grid { gap: 28px; }
    .vn .vn-calc { top: calc(var(--vn-navbar-h) + 72px); }
}
.vn .vn-ledger { overflow: hidden; }
.vn .vn-ledger-head { background: transparent; padding: 18px 22px 10px; border-bottom: 0; }
.vn .vn-ledger-band { font-size: 1.3125rem; }
.vn .vn-ledger-row { padding: 14px 22px; border-bottom-color: rgba(15, 26, 44, .08); }
.vn .vn-ledger-label { font-size: var(--t-body, 1.0625rem); font-weight: 400; }
.vn .vn-ledger-label .et-i { border-radius: 50%; background: var(--c-espresso); color: #fff; }
.vn .vn-ledger-num { font-size: var(--t-small, .875rem); }
.vn .vn-ledger-track { background: rgba(15, 26, 44, .07); height: 5px; }
.vn .vn-ledger-fill { background: linear-gradient(90deg, var(--c-bronze), var(--c-gold)); }
.vn .vn-ledger-total { background: var(--vn-night); padding: 18px 22px; }
.vn .vn-ledger-total span { font-size: var(--t-small, .875rem); opacity: 1; color: var(--c-on-dark-2); }
.vn .vn-ledger-total strong { font-size: 1.3125rem; color: var(--c-gold-light); }

.vn .vn-calc { padding: clamp(26px, 3vw, 36px); }
.vn .vn-calc-eyebrow { font-size: var(--t-body, 1.0625rem); font-weight: 600; color: var(--c-bronze); margin-bottom: 6px; }
.vn .vn-calc h3 { font-size: var(--t-title, 2.5rem); line-height: 1.1; letter-spacing: -.003em; margin-bottom: 10px; }
.vn .vn-calc-intro { font-size: var(--t-body, 1.0625rem); line-height: 1.47; margin-bottom: 22px; }
.vn .vn-calc-controls { gap: 14px; margin-bottom: 20px; }
.vn .vn-stepper-row { border: 1px solid var(--c-line-2); border-radius: var(--r-sm, 12px); background: #fff; }
.vn .vn-stepper-row button { background: #fff; color: var(--vn-ink); min-height: 50px; }
.vn .vn-stepper-row button:hover { background: var(--vn-paper-warm); color: var(--vn-ink); }
.vn .vn-calc-controls input { min-height: 50px; }
.vn .vn-calc-quote { background: #fff; border: 0; border-radius: var(--r-md, 18px); padding: 18px 20px; }
.vn .vn-calc-quotelabel { color: var(--vn-ink-soft); }
.vn .vn-calc-result { font-size: clamp(1.5rem, 4.6vw, 2.25rem); letter-spacing: -.02em; }
.vn .vn-calc-usd { font-size: var(--t-small, .875rem); font-weight: 400; }
.vn .vn-calc-breakdown { border: 0; border-radius: var(--r-md, 18px); background: #fff; }
.vn .vn-calc-breakdown li { background: transparent; border-bottom-color: rgba(15, 26, 44, .08); font-size: var(--t-small, .875rem); }
.vn .vn-calc-breakdown li > span .et-i { border-radius: 50%; background: var(--vn-paper-warm); color: var(--c-bronze); }
.vn .vn-calc-note { font-size: var(--t-small, .875rem); }

/* the day-by-day plan the calculator writes */
.vn .vn-trip { margin-top: clamp(40px, 5vw, 64px); }
.vn .vn-trip-head h3 { font-size: var(--t-sub, 1.75rem); }
.vn .vn-trip-sub { font-size: var(--t-body, 1.0625rem); }
.vn .vn-trip-days { gap: 20px; }
.vn .vn-trip-day { overflow: hidden; }
.vn .vn-trip-dayhead { background: transparent; border-bottom: 1px solid rgba(15, 26, 44, .08); padding: 18px 22px; }
.vn .vn-trip-dayhead h4 { font-size: 1.3125rem; }
.vn .vn-trip-area { background: #fff; color: var(--vn-ink); font-weight: 400; padding: 4px 11px; }
.vn .vn-trip-daycost { font-size: var(--t-body, 1.0625rem); }
.vn .vn-trip-slots { padding: 6px 22px 12px; }
.vn .vn-trip-slot::before { background: rgba(15, 26, 44, .1); }
.vn .vn-trip-dot { background: var(--c-gold); box-shadow: 0 0 0 3px #fff; }
.vn .vn-trip-row h5 { font-size: var(--t-body, 1.0625rem); }
.vn .vn-trip-row h5 .et-i { color: var(--c-bronze); }
.vn .vn-trip-cost { color: var(--vn-ink); font-weight: 400; font-size: var(--t-small, .875rem); }
.vn .vn-trip-why { font-size: var(--t-small, .875rem); line-height: 1.5; }
.vn .vn-trip-tip { background: #fff; border-radius: var(--r-sm, 12px); }
.vn .vn-trip-tip .et-i { color: var(--c-bronze); }
.vn .vn-trip-slotnote { background: #fff; border-radius: var(--r-sm, 12px); }
.vn .vn-trip-dayfoot { background: transparent; border-top: 1px solid rgba(15, 26, 44, .08); padding: 16px 22px; font-size: var(--t-small, .875rem); }
.vn .vn-trip-dayfoot .et-i { color: var(--c-bronze); }
.vn .vn-trip-note { font-size: var(--t-small, .875rem); }

/* ============================================================
   WHERE TO STAY, the map and the area cards
   ============================================================ */
.vn .vn-map-wrap { gap: 20px; }
.vn .vn-map-figure { background: #fff; padding: 18px; }
.vn .vn-river { stroke: var(--c-bg-alt-2); }
.vn .vn-map .vn-river-label { fill: var(--vn-ink-soft); }
.vn .vn-area circle { stroke: var(--vn-ink); stroke-width: 1.2; }
.vn .vn-area:hover circle, .vn .vn-area:focus circle { fill: var(--vn-paper-warm); }
.vn .vn-area.is-active circle { fill: var(--vn-ink); stroke: var(--vn-ink); }
.vn .vn-area .vn-area-num { fill: var(--vn-ink); }
.vn .vn-area.is-active .vn-area-num { fill: var(--c-gold); }
.vn .vn-area.is-active .vn-area-name { fill: var(--vn-ink); }
.vn .vn-map .vn-area-ring { stroke: var(--c-gold); }
.vn .vn-area-card { padding: clamp(24px, 3vw, 32px); background: #fff; }
.vn .vn-area-card h3 { font-size: var(--t-sub, 1.75rem); }
.vn .vn-price .et-i { color: var(--c-gold); }
.vn .vn-area-official { background: var(--vn-paper-warm); border-radius: var(--r-sm, 12px); font-size: var(--t-small, .875rem); padding: 10px 14px; }
.vn .vn-area-official .et-i { color: var(--c-bronze); }
.vn .vn-area-personality { font-size: var(--t-body, 1.0625rem); line-height: 1.5; }
.vn .vn-area-fit dt { font-size: var(--t-small, .875rem); color: var(--vn-ink); }
.vn .vn-area-fit dd { font-size: var(--t-body, 1.0625rem); color: var(--vn-ink-soft); }
.vn .vn-area-fit div:first-child dt .et-i { color: var(--c-gold); }
.vn .vn-area-fit div:last-child dt .et-i { color: var(--vn-ink-soft); }
.vn .vn-tags li { background: var(--vn-paper-warm); color: var(--vn-ink); font-weight: 400; font-size: var(--t-micro, .75rem); padding: 5px 12px; }
.vn .vn-area-key { margin-top: 24px; gap: 8px; }
.vn .vn-area-key button {
    border: 1px solid var(--c-line-2);
    background: #fff;
    font-weight: 400;
    font-size: var(--t-small, .875rem);
}
.vn .vn-area-key button:hover { border-color: var(--vn-ink); }
.vn .vn-area-num-chip { background: var(--c-espresso); color: #fff; }

/* ============================================================
   GETTING AROUND, FOOD
   ============================================================ */
.vn .vn-transport, .vn .vn-dishes, .vn .vn-dietary-grid, .vn .vn-plans, .vn .vn-phrase-grid { gap: 20px; }
.vn .vn-mode { padding: clamp(24px, 3vw, 30px); }
.vn .vn-mode-head { gap: 14px; margin-bottom: 14px; }
.vn .vn-mode-head .et-i {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--c-espresso); color: #fff; font-size: 1rem;
}
.vn .vn-mode-head h3 { font-size: 1.3125rem; }
.vn .vn-cost-dots span { background: rgba(15, 26, 44, .14); }
.vn .vn-cost-dots span.on { background: var(--c-gold); }
.vn .vn-mode p { font-size: var(--t-body, 1.0625rem); line-height: 1.5; }
.vn .vn-mode-price { background: var(--vn-paper); border-radius: var(--r-sm, 12px); font-size: var(--t-small, .875rem) !important; }
.vn .vn-section:not(.vn-section-tint) .vn-mode-price { background: #fff; }
.vn .vn-mode-price .et-i, .vn .vn-mode-watch .et-i { color: var(--c-bronze); }
.vn .vn-mode-watch { font-size: var(--t-small, .875rem) !important; }

.vn .vn-dish { padding: 24px; border-left: 0; overflow: hidden; }
.vn .vn-dish.has-photo { padding-top: 0; }
.vn .vn-dish.has-photo .vn-photo { margin: 0 -24px 20px; border-radius: 0; }
.vn .vn-dish h3 { font-size: 1.3125rem; line-height: 1.25; }
.vn .vn-say { color: var(--c-bronze); font-weight: 400; font-style: normal; font-size: var(--t-small, .875rem); }
.vn .vn-dish-what { font-size: var(--t-body, 1.0625rem); line-height: 1.5; }
.vn .vn-dish-when { font-size: var(--t-small, .875rem); }
.vn .vn-dish-when .et-i { color: var(--c-bronze); }
.vn .vn-dish-note { background: var(--vn-paper-warm); border-radius: var(--r-sm, 12px); font-size: var(--t-small, .875rem); }
.vn .vn-diet { padding: 24px; }
.vn .vn-diet strong { font-size: 1.1875rem; }
.vn .vn-phrase { background: var(--vn-paper-warm); border-radius: var(--r-sm, 12px); }
.vn .vn-dietary { margin-top: clamp(48px, 6vw, 72px); }
.vn .vn-dietary h3, .vn .vn-misconceptions h3, .vn .vn-phrases h3 { font-size: var(--t-sub, 1.75rem); margin-bottom: 20px; }

/* The food moment: a black card with the gold action. */
.vn .vn-cta {
    margin-top: 40px;
    padding: clamp(26px, 3.4vw, 40px);
    border-radius: var(--r-xl, 28px);
    background: var(--vn-night);
    color: var(--c-on-dark);
}
.vn .vn-cta p { font-size: var(--t-lead, 1.3125rem); line-height: 1.38; }
.vn .vn-cta .vn-btn-primary { background: var(--c-gold); color: #fff; }
.vn .vn-cta .vn-btn-primary:hover { background: var(--c-gold-hover); }

/* ============================================================
   A DAY HERE, the black chapter
   ============================================================ */
/* The line runs through the centre of the dots: the time column (74px)
   plus the gap (22px). The phone has its own columns, below. */
.vn .vn-timeline::before { background: rgba(15, 26, 44, .12); width: 1px; left: 96px; }
@media (max-width: 720px) { .vn .vn-timeline::before { left: 70px; } }
.vn .vn-section-dark .vn-timeline::before { background: rgba(255, 255, 255, .16); }
.vn .vn-beat { padding: 18px 0; }
.vn .vn-beat-time { font-size: var(--t-body, 1.0625rem); }
.vn .vn-beat-body::before { background: var(--c-gold); box-shadow: 0 0 0 4px rgba(37, 99, 235, .18); }
.vn .vn-beat-body h3 { font-size: 1.3125rem; }
.vn .vn-beat-body h3 .et-i { color: var(--c-bronze); }
.vn .vn-beat-body p { font-size: var(--t-body, 1.0625rem); line-height: 1.5; }
.vn .vn-section-dark .vn-beat-time { color: var(--c-on-dark-2); }
.vn .vn-section-dark .vn-beat-body::before,
.vn .vn-section-dark .vn-beat-night .vn-beat-body::before,
.vn .vn-section-dark .vn-beat-late .vn-beat-body::before { background: var(--c-gold); box-shadow: 0 0 0 4px rgba(37, 99, 235, .2); }
.vn .vn-section-dark .vn-beat-body h3 .et-i { color: var(--c-gold); }
.vn .vn-section-dark .vn-beat-body p { color: var(--c-on-dark-2); }

/* ============================================================
   KNOW BEFORE YOU GO
   ============================================================ */
.vn .vn-know-grid { gap: 28px; }
.vn .vn-know-col h3 { font-size: var(--t-sub, 1.75rem); gap: 12px; margin-bottom: 18px; }
.vn .vn-know-col h3 .et-i { color: var(--c-bronze); font-size: .8em; }
.vn .vn-note { padding: 20px 22px; margin-bottom: 12px; border-left: 0; }
.vn .vn-note strong { font-size: 1.0625rem; gap: 10px; }
.vn .vn-note strong .et-i { color: var(--c-bronze); }
.vn .vn-note-serious strong .et-i { color: var(--c-danger); }
.vn .vn-note-watch strong .et-i { color: var(--c-gold); }
.vn .vn-note p { font-size: var(--t-body, 1.0625rem); line-height: 1.5; }
.vn .vn-misconceptions { margin-top: clamp(48px, 6vw, 72px); display: grid; gap: 12px; }
/* The lists inside a guide's "Before you go" keep the same rhythm as the
   column around them; on a phone they become sideways rows (see PHONE
   ARRANGEMENT). */
.vn .vn-misc-list { display: grid; gap: 12px; }
.vn .vn-misc { padding: 20px 22px; margin-bottom: 0; }
.vn .vn-misc p { font-size: var(--t-body, 1.0625rem); line-height: 1.5; }
.vn .vn-misc-wrong { text-decoration-color: rgba(15, 26, 44, .35); }
.vn .vn-misc-wrong .et-i { color: var(--vn-ink-soft); }
.vn .vn-misc-right .et-i { color: var(--c-gold); }
.vn .vn-phrases { margin-top: clamp(48px, 6vw, 72px); }
.vn .vn-phrase-card { padding: 18px 20px; gap: 4px; }
.vn .vn-vi { font-size: 1.1875rem; }
.vn .vn-en { font-size: var(--t-small, .875rem); }

/* ============================================================
   PLAN YOUR DAYS, the style picker and the itineraries
   ============================================================ */
.vn .vn-styles { gap: 12px; }
.vn .vn-style {
    padding: 20px;
    border: 1px solid transparent;
    border-radius: var(--r-md, 18px);
    transition: box-shadow .2s var(--ease);
}
.vn .vn-style:hover { transform: none; box-shadow: inset 0 0 0 1px var(--c-line-2); }
.vn .vn-style[aria-checked="true"] {
    background: var(--vn-card);
    border-color: transparent;
    box-shadow: inset 0 0 0 2px var(--vn-ink);
}
.vn .vn-style .et-i { color: var(--c-bronze); font-size: 1.25rem; margin-bottom: 6px; }
.vn .vn-style strong { font-size: 1.0625rem; }
.vn .vn-style small { font-size: var(--t-small, .875rem); }
.vn .vn-style-status { font-size: var(--t-body, 1.0625rem); }
.vn .vn-plans { margin-top: 12px; }
.vn .vn-plan { padding: clamp(24px, 3vw, 32px); }
.vn .vn-plan h3 { color: var(--vn-ink); font-size: 1.3125rem; }
.vn .vn-plan li { font-size: var(--t-body, 1.0625rem); line-height: 1.5; margin-bottom: 8px; }

/* ============================================================
   THE FINAL CHAPTER, with a local
   ============================================================ */
.vn .vn-final { text-align: center; }
.vn .vn-final h2 { margin-left: auto; margin-right: auto; font-size: var(--t-display, 3.5rem); }
.vn .vn-final .vn-section-lede { margin-left: auto; margin-right: auto; margin-bottom: 32px; }
.vn-final-actions {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    margin-bottom: clamp(40px, 5vw, 64px);
}
.vn-final-note { font-size: var(--t-small, .875rem); color: var(--c-on-dark-2); }
.vn .vn-buddy-moments { gap: 20px; margin-top: 0; }
.vn .vn-moment { padding: 28px; gap: 18px; color: var(--c-ink); }
.vn .vn-moment p { font-size: var(--t-body, 1.0625rem); line-height: 1.5; }
.vn .vn-moment-cta { color: var(--c-link); font-weight: 400; font-size: var(--t-body, 1.0625rem); }
.vn .vn-moment-cta::after { content: "\203A"; font-size: 1.25em; line-height: 1; }
.vn .vn-section-dark .vn-moment { color: var(--c-on-dark); }
.vn .vn-section-dark .vn-moment:hover { color: #fff; }
.vn .vn-section-dark .vn-moment-cta { color: var(--c-gold-light); }

/* ============================================================
   SOURCES, Apple's sheet
   ============================================================ */
.vn .vn-sources { z-index: 1100; background: rgba(17, 12, 9, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vn .vn-sources-panel {
    background: var(--vn-paper);
    border-radius: var(--r-xl, 28px) var(--r-xl, 28px) 0 0;
    padding: 40px clamp(22px, 4vw, 44px) 48px;
}
.vn .vn-sources h2 { font-size: var(--t-title, 2.5rem); }
.vn .vn-sources h3 { font-size: 1.3125rem; margin-top: 28px; }
.vn .vn-sources p { font-size: var(--t-body, 1.0625rem); line-height: 1.5; }
.vn .vn-sources-close { background: var(--vn-paper-warm); }
.vn .vn-basis { background: var(--vn-paper-warm); border: 0; border-radius: var(--r-md, 18px); padding: 16px 20px; }
.vn .vn-source-list li { background: var(--vn-paper-warm); border: 0; border-radius: var(--r-sm, 12px); padding: 14px 18px; }
.vn .vn-source-list a { color: var(--c-link); font-weight: 400; font-size: var(--t-body, 1.0625rem); }
.vn .vn-source-list small { font-size: var(--t-small, .875rem); }
.vn .vn-tier { font-size: var(--t-micro, .75rem); padding: 3px 10px; }
.vn .vn-tier-1 { background: var(--c-espresso); color: var(--c-gold-light); }
.vn .vn-tier-2 { background: var(--c-warn-bg); color: var(--c-link); }
.vn .vn-tier-3, .vn .vn-tier-4 { background: #fff; color: var(--vn-ink-soft); }
@media (min-width: 720px) {
    .vn .vn-sources { place-items: center; padding: 24px; }
    .vn .vn-sources-panel { border-radius: var(--r-xl, 28px); max-height: 86vh; }
}

/* ============================================================
   THE OLD PHONE DOCK
   The site's own phone tab bar now owns the bottom edge on every page and
   sits on top of this bar, so it was already invisible. It stays in the
   markup (its four links are all reachable from the local bar and the
   chapter strip) and stays out of the way.
   ============================================================ */
.vn .vn-dock { display: none; }
@media (max-width: 720px) {
    .vn { padding-bottom: 0; }
}

/* ============================================================
   FROM OUR TEAM, the Journal's aside, in the card layer
   The card rule above takes its border away; the gold rule on the left is
   the one line it keeps.
   ============================================================ */
.vn .vn-desk { margin: 36px 0 0; padding: 18px 22px 18px 18px; border-left: 2px solid var(--vn-gold); border-radius: 4px var(--r-md, 18px) var(--r-md, 18px) 4px; }
.vn .vn-desk-line { font-size: 1.0625rem; line-height: 1.5; }
.vn .vn-section-dark .vn-desk { background: var(--vn-card); border-left-color: var(--vn-gold); }
.vn .vn-desk-tip { background: var(--c-warn-bg); border-left: 2px solid var(--vn-gold); border-radius: 4px var(--r-md, 18px) var(--r-md, 18px) 4px; padding: 18px 22px; margin: 28px 0; }
.vn .vn-desk-tip-badge { font-size: var(--t-small, .875rem); color: var(--c-bronze); }
.vn .vn-desk-tip-warning { background: var(--c-warn-bg); }
.vn .vn-desk-tip p { font-size: var(--t-body, 1.0625rem); line-height: 1.5; }

/* ============================================================
   VISA & ENTRY
   ============================================================ */
.vn .vn-visa-head { margin-bottom: 28px; }
.vn .vn-visa-notice { padding: 18px 22px; }
.vn .vn-visa-notice-future { background: var(--c-warn-bg); }
.vn .vn-visa-notice strong { font-size: 1.0625rem; }
.vn .vn-visa-notice p { font-size: var(--t-body, 1.0625rem); }
.vn .vn-visa-checker { padding: clamp(24px, 3.4vw, 40px); margin-bottom: 36px; }
.vn .vn-visa-kicker { font-size: var(--t-body, 1.0625rem); font-weight: 600; color: var(--c-bronze); }
.vn .vn-visa-checker-head h3 { font-size: var(--t-title, 2.5rem); line-height: 1.1; margin-bottom: 24px; }
.vn .vn-visa-form { gap: 16px; margin-bottom: 20px; }
.vn :is(.vn-visa-field select, .vn-visa-field input:not([type="checkbox"]), .vn-stay-field select, .vn-wiz-field input, .vn-wiz-field select) {
    min-height: 52px;
    padding: 13px 16px;
    border: 1px solid var(--c-line-2);
    border-radius: var(--r-sm, 12px);
    background-color: #fff;
    font-size: var(--t-body, 1.0625rem);
    font-weight: 400;
    color: var(--vn-ink);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.vn :is(.vn-visa-field select, .vn-visa-field input, .vn-stay-field select, .vn-wiz-field input, .vn-wiz-field select):hover { border-color: var(--c-faint); }
.vn :is(.vn-visa-field select, .vn-visa-field input, .vn-stay-field select, .vn-wiz-field input, .vn-wiz-field select):focus-visible {
    outline: none; border-color: var(--c-bronze); box-shadow: var(--ring);
}
.vn .vn-visa-toggle { border: 1px solid var(--c-line-2); background: #fff; font-weight: 400; font-size: var(--t-small, .875rem); min-height: 44px; }
.vn .vn-visa-toggle input { accent-color: var(--vn-ink); }
.vn .vn-visa-toggle:has(input:checked) { background: var(--vn-ink); border-color: var(--vn-ink); color: #fff; }
.vn .vn-visa-result-idle { border: 1px dashed var(--c-line-2); border-radius: var(--r-md, 18px); font-size: var(--t-body, 1.0625rem); }
.vn .vn-visa-result-idle .et-i { color: var(--c-bronze); }
.vn .vn-visa-verdict { border: 0; background: var(--vn-paper-warm); border-radius: var(--r-md, 18px); }
.vn .vn-visa-verdict-head { background: transparent; border-bottom: 1px solid rgba(15, 26, 44, .08); padding: 14px 18px; }
.vn .vn-visa-verdict-head strong { font-size: 1.0625rem; }
.vn .vn-visa-verdict-body { padding: 14px 18px; }
.vn .vn-visa-verdict-body > p { font-size: var(--t-body, 1.0625rem); }
.vn .vn-visa-status { font-size: var(--t-micro, .75rem); padding: 4px 11px; }
.vn .vn-visa-status-available { background: var(--c-success-bg); color: var(--c-success); }
.vn .vn-visa-status-possible { background: var(--c-warn-bg); color: var(--c-warn); }
.vn .vn-visa-status-check { background: #fff; color: var(--vn-ink-soft); }
.vn .vn-visa-status-unavailable { background: var(--c-danger-bg); color: var(--c-danger); }
.vn .vn-visa-why { background: #fff; border: 0; border-radius: var(--r-sm, 12px); }
.vn .vn-visa-why summary { color: var(--c-link); font-size: var(--t-small, .875rem); }
.vn .vn-visa-rwarn li { background: #fff; }
.vn .vn-visa-checkrow { border-color: transparent; background: #fff; }
.vn .vn-visa-checkrow.is-fail { border-color: var(--c-danger); background: var(--c-danger-bg); }
.vn .vn-visa-checkrow.is-pass { border-color: var(--c-success); }
.vn .vn-visa-timing { background: var(--c-success-bg); border-color: transparent; border-radius: var(--r-sm, 12px); }
.vn .vn-visa-timing.is-late { background: var(--c-danger-bg); border-color: transparent; }
.vn .vn-visa-timing.is-tight { background: var(--c-warn-bg); border-color: transparent; }
.vn .vn-visa-disclaimer { font-size: var(--t-small, .875rem); }

.vn .vn-visa-card { margin-bottom: 12px; overflow: hidden; }
.vn .vn-visa-card > summary { min-height: 64px; padding: 18px 22px; gap: 16px; }
.vn .vn-visa-card > summary:focus-visible { outline: none; box-shadow: inset var(--ring); }
.vn .vn-visa-card-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--c-espresso); color: #fff; }
.vn .vn-visa-card-title strong { font-size: 1.1875rem; }
.vn .vn-visa-card-title small { font-size: var(--t-small, .875rem); }
.vn .vn-visa-card-body { padding: 6px 22px 24px; border-top-color: rgba(15, 26, 44, .08); }
.vn .vn-visa-card-body > p { font-size: var(--t-body, 1.0625rem); line-height: 1.55; }
.vn .vn-visa-card-body h4 { font-size: 1.1875rem; }
.vn .vn-visa-fact { background: var(--vn-paper-warm); border: 0; border-left: 3px solid var(--c-gold); border-radius: var(--r-sm, 12px); padding: 14px 18px; }
.vn .vn-visa-fact.is-review { border-left-color: var(--c-warn); }
.vn .vn-visa-fact > p { font-size: var(--t-body, 1.0625rem); line-height: 1.5; }
.vn .vn-visa-chip { background: #fff; font-size: var(--t-micro, .75rem); letter-spacing: 0; }
.vn .vn-visa-chip-review { background: var(--c-warn-bg); color: var(--c-warn); }
.vn .vn-visa-verified { font-size: var(--t-micro, .75rem); font-weight: 400; }
.vn .vn-visa-callout { background: var(--vn-paper-warm); border: 0; border-radius: var(--r-sm, 12px); padding: 16px 18px; }
.vn .vn-visa-callout strong { font-size: 1.0625rem; }
.vn .vn-visa-callout p { font-size: var(--t-small, .875rem); }
.vn .vn-visa-callout-good { background: var(--c-success-bg); }
.vn .vn-visa-callout-warn { background: var(--c-warn-bg); }
.vn .vn-visa-callout-bad { background: var(--c-danger-bg); }
.vn .vn-visa-pending { border: 2px solid var(--c-gold); background: var(--c-warn-bg); border-radius: var(--r-sm, 12px); }
.vn .vn-visa-pending > .et-i { color: var(--c-warn); }
.vn .vn-visa-list li, .vn .vn-visa-check li { font-size: var(--t-body, 1.0625rem); line-height: 1.5; }
.vn .vn-visa-check li { border-bottom-color: rgba(15, 26, 44, .08); }
.vn .vn-visa-check li::before { color: var(--c-bronze); }
.vn .vn-visa-check-urgent li::before { color: var(--c-danger); }
.vn .vn-visa-table thead th { border-bottom: 1px solid var(--vn-ink); }
.vn .vn-visa-table tbody th, .vn .vn-visa-table tbody td { font-size: var(--t-body, 1.0625rem); padding-top: 13px; padding-bottom: 13px; border-bottom-color: rgba(15, 26, 44, .08); }
.vn .vn-visa-table tbody td { font-weight: 400; }
.vn .vn-visa-table tr.is-evisa th, .vn .vn-visa-table tr.is-evisa td { background: var(--c-warn-bg); }
.vn .vn-visa-tag { background: var(--c-espresso); color: var(--c-gold-light); font-size: var(--t-micro, .75rem); }
.vn .vn-visa-compare { gap: 14px; }
.vn :is(.vn-visa-compare-col, .vn-visa-entrybox, .vn-visa-programme, .vn-visa-gates li, .vn-visa-neighbour) {
    background: var(--vn-paper-warm); border: 0; border-radius: var(--r-md, 18px);
}
.vn .vn-visa-compare-good { background: var(--c-success-bg); }
.vn .vn-visa-compare-good h4 { color: var(--c-success); }
.vn .vn-visa-compare-bad { background: var(--c-danger-bg); }
.vn .vn-visa-compare-bad h4 { color: var(--c-danger); }
.vn .vn-visa-entrybox-good { background: var(--c-success-bg); }
.vn .vn-visa-entrybox-good h4 { color: var(--c-success); }
.vn .vn-visa-countries li { border-color: transparent; font-weight: 400; }
.vn .vn-visa-countries-africa button {
    min-height: 40px; border: 1px solid var(--c-line-2); background: #fff;
    font-weight: 400; font-size: var(--t-small, .875rem);
}
.vn .vn-visa-countries-africa button:hover { background: var(--vn-ink); border-color: var(--vn-ink); color: #fff; }
.vn .vn-visa-gates .et-i { color: var(--c-bronze); }
.vn .vn-visa-timeline-steps li::before { background: var(--c-espresso); color: #fff; }
.vn .vn-visa-timeline-steps strong { font-size: 1.0625rem; }
.vn .vn-visa-timeline-steps p { font-size: var(--t-body, 1.0625rem); }
.vn .vn-visa-mrz-page { background: #fff; border-color: var(--vn-line); border-radius: var(--r-md, 18px); }
.vn .vn-visa-foot p { font-size: var(--t-small, .875rem); }
.vn .vn-visa-foot .et-i { color: var(--c-success); }

/* ============================================================
   WHERE TO STAY, the decision engine
   ============================================================ */
.vn .vn-stay-admin { margin-bottom: 28px; }
.vn .vn-stay-admin > summary { font-size: var(--t-body, 1.0625rem); padding: 18px 22px; min-height: 56px; }
.vn .vn-stay-admin > summary > .et-i:first-child, .vn .vn-stay-admin-chev { color: var(--c-bronze); }
.vn .vn-stay-admin-body { padding: 0 22px 20px; }
.vn .vn-stay-admin-body p { font-size: var(--t-body, 1.0625rem); line-height: 1.55; }
.vn .vn-stay-shared li { background: var(--vn-paper-warm); }
.vn .vn-stay-matcher { padding: clamp(24px, 3.4vw, 40px); margin-bottom: 28px; }
.vn .vn-stay-kicker { font-size: var(--t-body, 1.0625rem); font-weight: 600; color: var(--c-bronze); }
.vn .vn-stay-matcher h3 { font-size: var(--t-title, 2.5rem); line-height: 1.1; margin-bottom: 10px; }
.vn .vn-stay-intro, .vn .vn-stay-sublabel { font-size: var(--t-body, 1.0625rem); line-height: 1.47; }
.vn .vn-stay-chips { gap: 8px; }
.vn .vn-stay-chip {
    min-height: 44px;
    padding: 9px 18px;
    border: 1px solid var(--c-line-2);
    background: #fff;
    font-size: var(--t-small, .875rem);
    font-weight: 400;
    color: var(--vn-ink);
}
.vn .vn-stay-chip .et-i { color: var(--c-bronze); }
.vn .vn-stay-chip:hover { border-color: var(--vn-ink); color: var(--vn-ink); transform: none; }
.vn .vn-stay-chip[aria-pressed="true"] { background: var(--vn-ink); border-color: var(--vn-ink); color: #fff; transform: none; box-shadow: none; }
.vn .vn-stay-chip[aria-pressed="true"] .et-i { color: var(--c-gold); }
.vn .vn-stay-chip:focus-visible { outline: none; box-shadow: var(--ring); }
.vn .vn-stay-chips-small .vn-stay-chip { min-height: 44px; padding: 8px 16px; font-size: var(--t-small, .875rem); }
.vn .vn-stay-rank { background: var(--c-gold); color: #fff; }
.vn .vn-stay-idle { border: 1px dashed var(--c-line-2); border-radius: var(--r-md, 18px); font-size: var(--t-body, 1.0625rem); }
.vn .vn-stay-idle .et-i, .vn .vn-stay-basis .et-i { color: var(--c-bronze); }
.vn .vn-stay-hit { border: 0; background: var(--vn-paper-warm); border-radius: var(--r-md, 18px); padding: 18px 20px; }
.vn .vn-stay-hit:first-child { background: var(--c-warn-bg); }
.vn .vn-stay-hit-rank { background: var(--c-espresso); color: #fff; }
.vn .vn-stay-hit-name { font-size: 1.1875rem; }
.vn .vn-stay-hit-pct { color: var(--vn-ink); }
.vn .vn-stay-hit li { font-size: var(--t-body, 1.0625rem); }
.vn .vn-stay-hit li::before { color: var(--c-bronze); }
.vn .vn-stay-hit-link { background: var(--vn-ink); font-weight: 400; font-size: var(--t-small, .875rem); min-height: 44px; padding: 10px 18px; }
.vn .vn-stay-hit-link:hover { background: var(--c-ink); }
.vn .vn-stay-airport { border-color: transparent; background: var(--c-warn-bg); border-radius: var(--r-md, 18px); }
.vn .vn-stay-airport.is-yes { background: var(--c-success-bg); border-color: transparent; }
.vn .vn-stay-airport.is-no { background: var(--vn-paper-warm); border-color: transparent; }
.vn .vn-stay-basis, .vn .vn-stay-fine { font-size: var(--t-small, .875rem); }
.vn .vn-stay-compare { padding: 22px; }
.vn .vn-stay-ctable thead th { border-bottom-color: var(--vn-ink); font-size: var(--t-small, .875rem); }
.vn .vn-stay-ctable th, .vn .vn-stay-ctable td { font-size: var(--t-small, .875rem); border-bottom-color: rgba(15, 26, 44, .08); }
.vn .vn-stay-areas { gap: 12px; }
.vn .vn-stay-area:hover { border-color: transparent; box-shadow: var(--sh-2); }
.vn .vn-stay-area[open] { border-color: transparent; box-shadow: var(--sh-2); }
.vn .vn-stay-area.is-match { border-color: transparent; box-shadow: inset 0 0 0 2px var(--c-gold); }
.vn .vn-stay-area > summary { padding: 18px 22px; min-height: 64px; }
.vn .vn-stay-area > summary:focus-visible { outline: none; box-shadow: inset var(--ring); }
.vn .vn-stay-area-head strong { font-size: 1.1875rem; }
.vn .vn-stay-official { font-size: var(--t-small, .875rem); font-weight: 400; }
.vn .vn-stay-identity { color: var(--vn-ink); font-weight: 400; font-size: var(--t-body, 1.0625rem); }
.vn .vn-stay-metro { background: var(--c-espresso); color: var(--c-gold-light); letter-spacing: 0; font-size: var(--t-micro, .75rem); }
.vn .vn-stay-area-body { padding: 6px 22px 22px; border-top-color: rgba(15, 26, 44, .08); }
.vn .vn-stay-summary { font-size: var(--t-body, 1.0625rem); line-height: 1.55; }
.vn .vn-stay-col { border: 0; border-radius: var(--r-sm, 12px); background: var(--vn-paper-warm); }
.vn .vn-stay-yes { background: var(--c-success-bg); }
.vn .vn-stay-yes h4 { color: var(--c-success); }
.vn .vn-stay-no { background: var(--vn-paper-warm); }
.vn .vn-stay-no h4 { color: var(--vn-ink); }
.vn .vn-stay-col li { font-size: var(--t-small, .875rem); }
.vn .vn-stay-score-label { font-size: var(--t-small, .875rem); font-weight: 400; }
.vn .vn-stay-score-fill { background: linear-gradient(90deg, var(--c-bronze), var(--c-gold)); }
.vn .vn-stay-score-fill.is-measured { background: var(--vn-ink); }
.vn .vn-stay-detail dd { font-size: var(--t-small, .875rem); }
.vn .vn-stay-street { background: var(--c-warn-bg); border-left: 0; border-radius: var(--r-sm, 12px); font-size: var(--t-small, .875rem); }
.vn .vn-stay-street .et-i { color: var(--c-bronze); }
.vn .vn-stay-actions { border-top-color: rgba(15, 26, 44, .08); }
.vn :is(.vn-stay-compare-btn, .vn-stay-buddy) {
    min-height: 44px; padding: 10px 18px;
    border: 1px solid var(--vn-ink); background: transparent;
    font-weight: 400; font-size: var(--t-small, .875rem); color: var(--vn-ink);
}
.vn :is(.vn-stay-compare-btn, .vn-stay-buddy):hover { background: var(--vn-ink); border-color: var(--vn-ink); color: #fff; text-decoration: none; }
.vn .vn-stay-buddy { background: var(--c-gold); border-color: transparent; color: #fff; }
.vn .vn-stay-buddy:hover { background: var(--c-gold-hover); border-color: transparent; color: #fff; }
.vn .vn-stay-cards, .vn .vn-stay-market { gap: 12px; }
.vn .vn-stay-card { padding: 24px; }
.vn .vn-stay-card h4 { font-size: 1.1875rem; }
.vn .vn-stay-card h4 .et-i { color: var(--c-bronze); }
.vn .vn-stay-card p, .vn .vn-stay-regrets li { font-size: var(--t-body, 1.0625rem); line-height: 1.5; }
.vn .vn-stay-warn { background: var(--c-danger-bg); }
.vn .vn-stay-stat { padding: 22px; }
.vn .vn-stay-scope span { background: var(--c-espresso); color: var(--c-gold-light); font-size: var(--t-micro, .75rem); }
.vn .vn-stay-stat-meta a { color: var(--c-link); font-weight: 400; }
.vn .vn-stay-callout-warn { background: var(--c-warn-bg); }
.vn .vn-stay-gaps { border: 0; padding: 22px; }
.vn .vn-stay-foot { border-top-color: rgba(15, 26, 44, .08); }
.vn .vn-stay-foot .et-i { color: var(--c-success); }

/* ============================================================
   YOUR NEXT TRIP, and the coming-soon preview
   ============================================================ */
.vn .vn-next { gap: 12px; }
.vn .vn-next-item:hover { border-color: transparent; box-shadow: var(--sh-2); }
.vn .vn-next-item[open] { box-shadow: var(--sh-2); }
.vn .vn-next-item > summary { min-height: 72px; padding: 18px 22px; gap: 16px; }
.vn .vn-next-item > summary:focus-visible { outline: none; box-shadow: inset var(--ring); }
.vn .vn-next-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--vn-paper-warm); color: var(--c-bronze); }
.vn .vn-next-item[open] .vn-next-icon { background: var(--c-espresso); color: #fff; }
.vn .vn-next-head strong { font-size: 1.1875rem; }
.vn .vn-next-head small { font-size: var(--t-small, .875rem); }
.vn .vn-next-kind { font-size: var(--t-micro, .75rem); font-weight: 400; background: var(--vn-paper-warm); }
.vn .vn-next-body { padding: 6px 22px 22px; border-top-color: rgba(15, 26, 44, .08); }
.vn .vn-next-what { font-size: var(--t-body, 1.0625rem); line-height: 1.55; }
.vn .vn-next-days { background: var(--vn-paper-warm); border-radius: var(--r-sm, 12px); font-size: var(--t-small, .875rem); }
.vn .vn-next-days .et-i { color: var(--c-bronze); }
.vn .vn-next-col { border: 0; border-radius: var(--r-sm, 12px); padding: 16px 18px; }
.vn .vn-next-col h3 { font-size: 1.0625rem; letter-spacing: 0; }
.vn .vn-next-col li { font-size: var(--t-small, .875rem); }
.vn .vn-next-yes { background: var(--c-success-bg); }
.vn .vn-next-yes h3 { color: var(--c-success); }
.vn .vn-next-no { background: var(--vn-paper-warm); }
.vn .vn-next-no h3 { color: var(--vn-ink); }
.vn .vn-next-thing { border: 0; border-radius: var(--r-sm, 12px); background: var(--c-warn-bg); padding: 16px 18px; }
.vn .vn-next-thing strong { font-size: var(--t-small, .875rem); color: var(--c-warn); }
.vn .vn-next-thing .et-i { color: var(--c-bronze); }
.vn .vn-next-thing p { font-size: var(--t-body, 1.0625rem); line-height: 1.5; }
.vn .vn-next-foot { border-top-color: rgba(15, 26, 44, .08); }
.vn .vn-next-pairs { font-size: var(--t-small, .875rem); }
.vn .vn-next-pairs .et-i { color: var(--c-bronze); }
.vn .vn-next-link { background: var(--vn-ink); font-weight: 400; font-size: var(--t-small, .875rem); padding: 10px 20px; }
.vn .vn-next-link:hover { background: var(--c-ink); text-decoration: none; }
.vn .vn-next-link:focus-visible { outline: none; box-shadow: var(--ring); }
.vn .vn-next-basis { font-size: var(--t-small, .875rem); }
.vn .vn-next-basis .et-i { color: var(--c-bronze); }
.vn .vn-next-solo { margin-bottom: 20px; }
.vn .vn-next-solo .vn-next-body { padding: 10px clamp(22px, 3vw, 32px) clamp(22px, 3vw, 32px); }

/* ============================================================
   THE GUIDE'S OTHER FIRST SCREENS: the briefing, a topic, coming soon
   ============================================================ */
.vn :is(.vn-brief-head, .vn-soon-head) {
    padding-top: clamp(36px, 6vw, 80px);
    padding-bottom: clamp(40px, 5vw, 64px);
    text-align: center;
}
.vn :is(.vn-brief-head, .vn-soon-head) .vn-title { font-size: var(--t-display, 3.5rem); }
.vn :is(.vn-brief-head, .vn-soon-head) .vn-section-lede { margin-left: auto; margin-right: auto; margin-bottom: 18px; }
.vn :is(.vn-brief-head, .vn-soon-head) .vn-checked { justify-content: center; }
.vn-soon .vn-section h2 { max-width: none; }

/* The first three hours, as five numbered cards rather than a line. */
.vn .vn-brief-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 20px;
}
.vn .vn-brief-steps::before { display: none; }
.vn .vn-brief-steps .vn-beat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 30px 28px;
    border-radius: var(--r-lg, 22px);
    background: var(--vn-card);
}
.vn .vn-brief-steps .vn-beat-time {
    display: grid; place-items: center;
    width: 40px; height: 40px; padding: 0;
    border-radius: 50%;
    background: var(--c-espresso);
    color: #fff;
    font-size: 1rem;
    text-align: center;
}
.vn .vn-brief-steps .vn-beat-body { padding-left: 0; }
.vn .vn-brief-steps .vn-beat-body::before { display: none; }
.vn .vn-brief-steps .vn-beat-body p + p { margin-top: 12px; }
.vn .vn-brief .vn-misconceptions { margin-top: 0; }
.vn .vn-brief .vn-misc-list { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }

/* ============================================================
   PLANNER PAGES: the route wizard and the route
   ============================================================ */
.vn .vn-wiz-head { text-align: center; margin-bottom: 28px; }
.vn .vn-wiz-head h1 { font-size: var(--t-display, 3.5rem); line-height: 1.07; letter-spacing: -.005em; margin-bottom: 14px; text-wrap: balance; }
.vn .vn-wiz-head .vn-section-lede { margin: 0 auto 14px; }
.vn .vn-wiz-head .vn-wiz-help { font-size: var(--t-body, 1.0625rem); }
.vn .vn-wiz-head .vn-wiz-help .ap-link { font-size: inherit; }
.vn .vn-wiz-bar { height: 4px; max-width: 320px; margin: 24px auto 8px; background: var(--vn-paper-warm); }
.vn .vn-wiz-bar span { background: var(--c-gold); }
.vn .vn-wiz-count { font-size: var(--t-small, .875rem); font-weight: 400; }
.vn .vn-wiz-step { padding: clamp(22px, 3vw, 32px); margin: 20px 0; border: 0; }
.vn .vn-wiz-step legend { float: left; width: 100%; padding: 0; margin-bottom: 18px; font-size: var(--t-sub, 1.75rem); line-height: 1.14; }
.vn .vn-wiz-step legend + * { clear: both; }
.vn .vn-wiz-help { font-size: var(--t-body, 1.0625rem); line-height: 1.47; }
.vn .vn-wiz-opts { gap: 12px; }
.vn .vn-wiz-opt-body {
    min-height: 88px; padding: 18px;
    border: 1px solid var(--c-line-2);
    border-radius: var(--r-md, 18px);
    background: #fff;
}
.vn .vn-wiz-opt-body .et-i { color: var(--c-bronze); font-size: 1.15rem; }
.vn .vn-wiz-opt-body strong { font-size: 1.0625rem; }
.vn .vn-wiz-opt-body small { font-size: var(--t-small, .875rem); }
.vn .vn-wiz-opt:hover .vn-wiz-opt-body { border-color: var(--c-faint); transform: none; }
.vn .vn-wiz-opt input:checked + .vn-wiz-opt-body {
    background: #fff; color: var(--vn-ink);
    border-color: var(--vn-ink);
    box-shadow: inset 0 0 0 1px var(--vn-ink);
}
.vn .vn-wiz-opt input:checked + .vn-wiz-opt-body .et-i { color: var(--c-gold); }
.vn .vn-wiz-opt input:checked + .vn-wiz-opt-body small { color: var(--vn-ink-soft); }
.vn .vn-wiz-opt input:focus-visible + .vn-wiz-opt-body { outline: none; box-shadow: var(--ring); }
.vn .vn-wiz-chips { gap: 8px; }
.vn .vn-wiz-chip span {
    border: 1px solid var(--c-line-2); background: #fff;
    font-weight: 400; font-size: var(--t-small, .875rem); color: var(--vn-ink);
}
.vn .vn-wiz-chip span .et-i { color: var(--c-bronze); }
.vn .vn-wiz-chip:hover span { border-color: var(--vn-ink); color: var(--vn-ink); transform: none; }
.vn .vn-wiz-chip input:checked + span { background: var(--vn-ink); border-color: var(--vn-ink); color: #fff; transform: none; }
.vn .vn-wiz-chip input:checked + span .et-i { color: var(--c-gold); }
.vn .vn-wiz-chip input:focus-visible + span { outline: none; box-shadow: var(--ring); }
.vn .vn-wiz-more { border: 0; background: #fff; border-radius: var(--r-md, 18px); margin-top: 22px; }
.vn .vn-wiz-more > summary { min-height: 56px; padding: 16px 18px; font-size: var(--t-body, 1.0625rem); }
.vn .vn-wiz-more > summary > .et-i:first-child { color: var(--c-bronze); }
.vn .vn-wiz-more-body { padding: 0 18px 20px; }
.vn .vn-wiz-sub { margin-top: 22px; color: var(--vn-ink); }
.vn .vn-wiz-nav { gap: 12px; margin: 28px 0 18px; justify-content: center; }
.vn .vn-wiz-notice { font-size: var(--t-small, .875rem); justify-content: center; text-align: left; }

.vn .vn-trip-head { text-align: center; margin-bottom: 32px; }
.vn .vn-trip-head h1 { font-size: var(--t-display, 3.5rem); line-height: 1.07; letter-spacing: -.005em; margin-bottom: 14px; }
.vn .vn-trip-head .vn-section-lede { margin: 0 auto; }
.vn .vn-trip-hop { color: var(--c-gold); }
.vn .vn-trip-city.is-home { color: var(--vn-ink); }
.vn .vn-spread { padding: clamp(24px, 3.4vw, 36px); margin-bottom: 20px; }
.vn .vn-spread-head h2 { font-size: var(--t-sub, 1.75rem); margin-bottom: 6px; }
.vn .vn-spread-head p { font-size: var(--t-body, 1.0625rem); margin-bottom: 20px; }
.vn .vn-spread-rail { gap: 4px; }
.vn .vn-spread-row { padding: 12px 14px; border-radius: var(--r-sm, 12px); }
.vn .vn-spread-row.is-you { background: #fff; border-color: transparent; box-shadow: inset 0 0 0 2px var(--vn-ink); }
.vn .vn-spread-name { font-size: var(--t-body, 1.0625rem); font-weight: 400; }
.vn .vn-spread-name .et-i { color: var(--c-bronze); }
.vn .vn-spread-name b { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border-radius: 50%; background: var(--vn-ink); color: var(--c-gold); font-size: .7rem; flex: none; }
.vn .vn-spread-name b .et-i { color: var(--c-gold); font-size: .7rem; }
.vn .vn-spread-bar { background: rgba(15, 26, 44, .08); height: 6px; }
.vn .vn-spread-bar span { background: linear-gradient(90deg, var(--c-bronze), var(--c-gold)); }
.vn .vn-spread-sum b { font-size: var(--t-body, 1.0625rem); }
.vn .vn-spread-sum small, .vn .vn-spread-feels { font-size: var(--t-small, .875rem); }
.vn .vn-spread-foot { font-size: var(--t-small, .875rem); border-top-color: rgba(15, 26, 44, .08); }
.vn .vn-spread-notice { font-size: var(--t-small, .875rem); }
.vn .vn-trip-total {
    padding: clamp(28px, 4vw, 44px);
    border: 0;
    border-radius: var(--r-xl, 28px);
    background: var(--vn-night);
    color: var(--c-on-dark);
    text-align: center;
    margin-bottom: 12px;
}
.vn .vn-trip-total-label { color: var(--c-on-dark-2); }
.vn .vn-trip-total-figure { font-size: var(--t-display, 3.5rem); color: var(--c-gold-light); }
.vn .vn-trip-total-fx { color: var(--c-on-dark-2); font-size: var(--t-body, 1.0625rem); }
.vn .vn-trip-range { justify-content: center; gap: 10px; margin-top: 20px; }
.vn .vn-trip-range span { background: var(--c-espresso-2); border: 0; color: var(--c-on-dark-2); font-size: var(--t-small, .875rem); font-weight: 400; padding: 12px 16px; border-radius: var(--r-sm, 12px); text-align: left; }
.vn .vn-trip-range b { color: #fff; font-size: 1.0625rem; }
.vn .vn-trip-verdict { border: 0; border-radius: var(--r-sm, 12px); font-weight: 400; font-size: var(--t-body, 1.0625rem); color: var(--c-ink); }
.vn .vn-trip-verdict.is-over { background: var(--c-danger-bg); }
.vn .vn-trip-verdict.is-tight { background: var(--c-warn-bg); }
.vn .vn-trip-verdict.is-comfortable, .vn .vn-trip-verdict.is-on-track { background: var(--c-success-bg); }
.vn .vn-trip-stops { gap: 10px; }
.vn .vn-trip-leg { border: 0; background: transparent; font-size: var(--t-small, .875rem); padding: 6px 18px; }
.vn .vn-trip-leg .et-i { color: var(--c-gold); }
.vn .vn-trip-leg.is-rough { background: var(--c-warn-bg); border-radius: var(--r-sm, 12px); padding: 10px 18px; }
.vn .vn-trip-stop { padding: 22px 24px; }
.vn .vn-trip-stop h3 { font-size: 1.3125rem; }
.vn .vn-trip-nights { background: var(--vn-ink); font-size: var(--t-micro, .75rem); }
.vn-route .vn-trip-why { color: var(--vn-ink); font-weight: 400; font-size: var(--t-body, 1.0625rem); }
.vn .vn-trip-weather { font-size: var(--t-small, .875rem); }
.vn .vn-trip-weather .et-i { color: var(--c-gold); }
.vn .vn-trip-lines span { background: #fff; font-size: var(--t-micro, .75rem); font-weight: 400; border-radius: var(--r-sm, 12px); padding: 10px 12px; }
.vn .vn-trip-lines b { font-size: var(--t-body, 1.0625rem); }
.vn .vn-trip-fold > summary { min-height: 60px; padding: 16px 22px; font-size: 1.1875rem; }
.vn .vn-trip-cat { border: 0; background: #fff; border-radius: var(--r-sm, 12px); }
.vn .vn-trip-cat-icon { border-radius: 50%; background: var(--c-espresso); color: #fff; }
.vn .vn-trip-cat-name { font-size: var(--t-body, 1.0625rem); font-weight: 400; }
.vn .vn-trip-cat-bar span { background: linear-gradient(90deg, var(--c-bronze), var(--c-gold)); }
.vn .vn-trip-cat-sum { font-size: var(--t-small, .875rem); }
.vn .vn-trip-basis, .vn .vn-trip-conf { font-size: var(--t-small, .875rem); }
.vn .vn-trip-save, .vn .vn-trip-splurge { padding: 22px 24px; }
.vn .vn-trip-save h3, .vn .vn-trip-splurge h3 { font-size: 1.1875rem; }
.vn .vn-trip-save h3 .et-i { color: var(--c-success); }
.vn .vn-trip-splurge h3 .et-i { color: var(--c-gold); }
.vn-route .vn-trip-tip strong { font-size: 1.0625rem; }
.vn-route .vn-trip-tip p { font-size: var(--t-small, .875rem); }
.vn-route .vn-trip-tip-amount { color: var(--c-success); }
.vn-route .vn-trip-day { border: 0; background: #fff; border-radius: var(--r-sm, 12px); }
.vn-route .vn-trip-day > summary small { color: var(--vn-ink-soft); font-weight: 400; }
.vn-route .vn-trip-slot.is-meal .vn-trip-time { color: var(--c-link); }
.vn-route .vn-trip-slot.is-nightlife .vn-trip-time { color: var(--vn-ink); }
.vn .vn-trip-providers { padding: 22px 24px; border: 0; }
.vn .vn-trip-providers li { border: 0; border-radius: var(--r-sm, 12px); }
.vn .vn-trip-providers li span { font-size: var(--t-micro, .75rem); }
.vn .vn-trip-providers li.is-off span { background: var(--vn-paper-warm); }
.vn .vn-trip-providers li.is-live span { background: var(--c-success-bg); color: var(--c-success); }
.vn .vn-trip-actions { justify-content: center; margin-top: 32px; }

/* ============================================================
   THE LOCAL BAR, on a guide page
   The component is the design system's. This only keeps a long place
   name from pushing the gold action off a phone screen.
   ============================================================ */
.vn-localnav .ap-localnav__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vn-localnav .ap-localnav__menu { flex: none; }
@media (max-width: 734px) {
    .vn-localnav .ap-localnav__title { font-size: 1.1875rem; }
    .vn-localnav .et-btn { min-height: 34px; padding: 6px 15px; font-size: var(--t-small, .875rem); }
}

/* ============================================================
   PHONE
   ============================================================ */
@media (max-width: 734px) {
    .vn .vn-section h2 { max-width: none; }
    .vn .vn-final h2, .vn-close h2, .vn-brief-close h2 { font-size: var(--t-section, 3rem); }
    .vn .vn-final, .vn-close, .vn-brief-close { text-align: left; }
    .vn .vn-final .vn-section-lede, .vn-close .vn-section-lede, .vn-brief-close .vn-section-lede { margin-left: 0; }
    .vn .vn-final-actions { align-items: flex-start; }
    .vn-close-actions { justify-content: flex-start; }
    .vn :is(.vn-brief-head, .vn-soon-head) { text-align: left; }
    .vn :is(.vn-brief-head, .vn-soon-head) .vn-section-lede { margin-left: 0; }
    .vn :is(.vn-brief-head, .vn-soon-head) .vn-checked { justify-content: flex-start; }
    .vn .vn-wiz-head, .vn .vn-trip-head { text-align: left; }
    .vn .vn-wiz-head .vn-section-lede, .vn .vn-trip-head .vn-section-lede { margin-left: 0; }
    .vn .vn-wiz-bar { margin-left: 0; }
    .vn .vn-wiz-nav, .vn .vn-trip-actions { justify-content: stretch; }
    .vn .vn-wiz-nav .vn-btn, .vn .vn-trip-actions .vn-btn { flex: 1 1 100%; }
    .vn .vn-answer summary { font-size: 1.1875rem; }
    .vn .vn-hero-actions .vn-btn { width: 100%; white-space: normal; }
    .vn .vn-close-actions .vn-btn { width: 100%; }
    .vn .vn-cta .vn-btn { width: 100%; white-space: normal; }
    .vn .vn-start { padding: 24px 22px 26px; }
    .vn .vn-start-go { top: 26px; right: 20px; }
    .vn .vn-guide-lead { min-height: 340px; }
    .vn .vn-guide-lead h3 { font-size: 2.4rem; }
}

/* ============================================================
   PHONE ARRANGEMENT (Elite)
   Nothing on a phone becomes one long single column. Small items sit two
   or three to a row; a set of doors becomes one sideways row that snaps,
   with the next card peeking in so the row reads as swipeable; related
   things share one card. Every scroller is position:relative so nothing
   inside it can widen the page. Type steps down to the calm phone sizes
   of the design system.
   ============================================================ */
@media (max-width: 719px) {
    /* The shared sideways row. */
    .vn .vn-starts-row,
    .vn .vn-guide-stack,
    .vn .vn-jump,
    .vn .vn-facets,
    .vn .vn-transport,
    .vn .vn-dishes,
    .vn .vn-dietary-grid,
    .vn .vn-plans,
    .vn .vn-buddy-moments,
    .vn .vn-topic-cards,
    .vn .vn-stay-cards,
    .vn .vn-visa-neighbours {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
        position: relative;
        gap: 12px;
        margin-left: -16px;
        margin-right: -16px;
        padding: 4px 16px 12px;
    }
    .vn .vn-starts-row > *, .vn .vn-guide-stack > *, .vn .vn-jump > *, .vn .vn-facets > *, .vn .vn-transport > *, .vn .vn-dishes > *, .vn .vn-dietary-grid > *, .vn .vn-plans > *, .vn .vn-buddy-moments > *, .vn .vn-topic-cards > *, .vn .vn-stay-cards > *, .vn .vn-visa-neighbours > * { flex: none; width: auto; min-width: 0; scroll-snap-align: none; grid-column: auto; }
    .vn .vn-starts-row::-webkit-scrollbar,
    .vn .vn-guide-stack::-webkit-scrollbar,
    .vn .vn-jump::-webkit-scrollbar,
    .vn .vn-facets::-webkit-scrollbar,
    .vn .vn-transport::-webkit-scrollbar,
    .vn .vn-dishes::-webkit-scrollbar,
    .vn .vn-dietary-grid::-webkit-scrollbar,
    .vn .vn-plans::-webkit-scrollbar,
    .vn .vn-buddy-moments::-webkit-scrollbar,
    .vn .vn-topic-cards::-webkit-scrollbar,
    .vn .vn-stay-cards::-webkit-scrollbar,
    .vn .vn-visa-neighbours::-webkit-scrollbar { display: none; }
    .vn .vn-starts-row > *,
    .vn .vn-guide-stack > *,
    .vn .vn-facets > *,
    .vn .vn-transport > *,
    .vn .vn-dishes > *,
    .vn .vn-dietary-grid > *,
    .vn .vn-plans > *,
    .vn .vn-buddy-moments > *,
    .vn .vn-topic-cards > *,
    .vn .vn-stay-cards > *,
    .vn .vn-visa-neighbours > * {
        flex: 0 0 78%;
        min-width: 0;
        scroll-snap-align: start;
    }
    /* Short chips stay chips: they size to their words. */
    .vn .vn-jump { flex-wrap: nowrap; margin-bottom: 16px; }
    .vn .vn-jump > * { flex: none; scroll-snap-align: start; white-space: nowrap; }

    /* Doors: compact, the icon beside the words rather than above them. */
    .vn .vn-start { padding: 18px 18px 20px; gap: 12px; }
    .vn .vn-start-icon, .vn .vn-guide-icon { width: 38px; height: 38px; font-size: .92rem; }
    .vn .vn-start-body { padding-right: 14px; }
    .vn .vn-start-body strong { font-size: 1.0625rem; margin-bottom: 4px; }
    .vn .vn-start-body small { font-size: .9375rem; line-height: 1.42; }
    .vn .vn-start-go { top: 20px; right: 16px; }
    .vn .vn-guide { padding: 18px 18px 20px; }
    .vn .vn-guide h3 { font-size: 1.0625rem; }
    .vn .vn-guide p { font-size: .9375rem; }
    .vn .vn-guide-icon { margin-bottom: 12px; }

    /* The flagship card: still the largest thing, no longer a whole screen. */
    .vn .vn-guide-lead { min-height: 0; padding: 26px 22px; }
    .vn .vn-guide-lead h3 { margin-top: 28px; font-size: 2.25rem; }
    .vn .vn-guide-lead > p { font-size: 1.0625rem; }
    .vn .vn-guide-covers { margin-bottom: 18px; }

    /* How the Journal is written: four short promises, two to a row. */
    .vn .vn-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
    .vn .vn-trust .et-i { font-size: 1.2rem; margin-bottom: 2px; }
    .vn .vn-trust strong { font-size: 1rem; line-height: 1.25; }
    .vn .vn-trust span { font-size: .875rem; line-height: 1.42; }

    /* The arrangements: the lead door and six small tiles, three to a row. */
    .vn .vn-plan-lead { padding: 20px; gap: 14px; }
    .vn .vn-plan-lead-icon { width: 44px; height: 44px; font-size: 1.05rem; }
    .vn .vn-plan-lead-body strong { font-size: 1.25rem; }
    .vn .vn-plan-lead-body small { font-size: .9375rem; }
    .vn .vn-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .vn .vn-tile { min-height: 88px; padding: 14px 6px; gap: 8px; }
    .vn .vn-tile .et-i { font-size: 1.15rem; }
    .vn .vn-tile strong { font-size: .8125rem; }

    /* Phrases and travel styles: small cards, two to a row. */
    .vn .vn-phrase-grid,
    .vn .vn-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .vn .vn-phrase-card { padding: 14px 12px; }
    .vn .vn-style { padding: 14px 12px; }
    .vn .vn-style small { font-size: .8125rem; }

    /* The Saigon Briefing's five steps and the hour-by-hour day stay a
       timeline, with tighter rhythm. */
    .vn .vn-beat { padding-bottom: 18px; }

    /* The team's note. */
    .vn .vn-desk { margin-top: 26px; padding: 14px 16px 14px 14px; gap: 12px; }
    .vn .vn-desk-line { font-size: .98rem; }

    /* Where else to go: closed places sit two to a row as name tiles; the
       one that opens takes the full width and shows its line again. */
    .vn .vn-next { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .vn .vn-next-item[open] { grid-column: 1 / -1; }
    .vn .vn-next-item > summary { min-height: 60px; padding: 14px 14px; gap: 8px; }
    .vn .vn-next-icon, .vn .vn-next-kind { display: none; }
    .vn .vn-next-head strong { font-size: 1rem; }
    .vn .vn-next-head small { display: none; }
    .vn .vn-next-item[open] .vn-next-head small { display: block; }

    /* The country map stays a picture, not a screen. */
    .vn .vn-hero-map img { width: min(46vw, 190px); }

    /* Short form fields pair up: the checker's days and entries, dates and
       expiry, sit two to a row; only the passport country and the toggles
       take the full width. The district finder pairs its two times. */
    .vn .vn-visa-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .vn .vn-visa-field-wide { grid-column: 1 / -1; }
    .vn .vn-stay-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vn .vn-stay-row > :first-child { grid-column: 1 / -1; }

    /* The estimator's days are one sideways row: a day per card. */
    .vn-dest .vn-trip-days {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
        position: relative;
        gap: 12px;
        margin: 0 -16px;
        padding: 4px 16px 12px;
    }
    .vn-dest .vn-trip-days > * { flex: none; width: auto; min-width: 0; scroll-snap-align: none; grid-column: auto; }
    .vn-dest .vn-trip-days::-webkit-scrollbar { display: none; }
    .vn-dest .vn-trip-days > .vn-trip-day { flex: 0 0 88%; min-width: 0; scroll-snap-align: start; }

    /* A closed district shows its name and its one line; the ward detail
       waits until it is opened. */
    .vn .vn-stay-area:not([open]) .vn-stay-official { display: none; }

    /* Before you go: the safety notes, the courtesy notes and the
       misconceptions are three sideways rows under their headings. */
    .vn .vn-know-list,
    .vn .vn-misc-list {
        position: relative;
        display: flex;
        gap: 12px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin: 0 -16px;
        padding: 4px 16px 12px;
    }
    .vn .vn-know-list::-webkit-scrollbar,
    .vn .vn-misc-list::-webkit-scrollbar { display: none; }
    .vn .vn-know-list > *,
    .vn .vn-misc-list > * { flex: 0 0 82%; min-width: 0; margin: 0; scroll-snap-align: start; }

    /* The Briefing's five steps after landing: one sideways row, a step
       per card, in order. */
    .vn .vn-brief-steps {
        position: relative;
        display: flex;
        gap: 12px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin: 0 -16px;
        padding: 4px 16px 12px;
    }
    .vn .vn-brief-steps::-webkit-scrollbar { display: none; }
    .vn .vn-brief-steps::before { display: none; }
    .vn .vn-brief-steps > .vn-beat { flex: 0 0 82%; min-width: 0; margin: 0; padding: 20px 18px; gap: 10px; scroll-snap-align: start; }
}

/* Surfaces open the Elite way: the sources drawer unfolds from its centre
   line (Unfold, motion.css), gated like every other motion here. */
.vn[data-motion="on"] .vn-sources:not([hidden]) .vn-sources-panel {
    animation: et-unfold 380ms var(--et-ease-rise) backwards;
}
@media (prefers-reduced-motion: reduce) {
    .vn[data-motion="on"] .vn-sources:not([hidden]) .vn-sources-panel { animation: none; }
}

/* ============================================================
   TOPICS, /vietnam/topics and /vietnam/topics/<slug>
   (templates/vietnam/topics.html, topic.html, _fact.html)

   A topic is one question answered for the whole country, so the page is
   an article rather than a chapter strip: Apple's reading measure, quiet
   hairline-ruled chapters, and each block kind from vietnam_topics
   rendered as the thing it is. The hub is a page of doors: one band per
   trip phase, each a row of cards. Every colour here resolves to an
   existing token; white is the card ground the section already uses.
   Facts reuse the .vn-visa-fact chrome so a claim looks the same on a
   topic page as it does inside the visa checker.
   ============================================================ */
.vn-topic .vn-section { --vn-measure: 760px; }
.vn-topics-hub .vn-section { --vn-measure: 1120px; }
.vn-topic-head { padding-top: clamp(36px, 6vw, 80px); padding-bottom: clamp(32px, 4vw, 48px); }
.vn-topic-head .vn-eyebrow,
.vn-topic-phase .vn-eyebrow { display: flex; align-items: center; gap: 10px; }
.vn-topic-head .vn-title {
    font-size: var(--t-display, 3.5rem);
    line-height: 1.07;
    letter-spacing: -.005em;
    max-width: 18em;
    text-align: left;
}
.vn-topic-lede {
    margin: 0 0 20px;
    max-width: 40em;
    font-size: var(--t-lead, 1.3125rem);
    line-height: 1.42;
    letter-spacing: .011em;
    color: var(--vn-ink-soft);
}
.vn-topic-head .vn-checked { justify-content: flex-start; }
.vn-topic-body { padding-top: 0; }
.vn-topics-hub .vn-topic-body { padding-top: clamp(48px, 6vw, 80px); }

/* ---- the standing notice, the contents list, the tools ---- */
.vn-topic-notice { margin-bottom: 28px; background: var(--c-warn-bg); }
.vn-topic-notice > .et-i { color: var(--c-warn); }
.vn-topic-toc { margin: 0 0 32px; }
.vn-topic-toc-label {
    margin: 0 0 12px;
    font-size: var(--t-small, .875rem);
    font-weight: 600;
    color: var(--vn-ink);
}
.vn-topic-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.vn-topic-toc a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 9px 18px;
    border-radius: var(--r-pill, 980px);
    border: 1px solid var(--c-line-2);
    background: #fff;
    font-size: var(--t-small, .875rem);
    font-weight: 400;
    color: var(--vn-ink);
    text-decoration: none;
    transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.vn-topic-toc a:hover {
    border-color: var(--vn-ink);
    background: #fff;
    color: var(--vn-ink);
    text-decoration: none;
}
.vn-topic-tools,
.vn-topic-foot {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.vn-topic-tools { margin: 0 0 36px; }
.vn-topic-foot { margin: 36px 0 12px; }
.vn-topic-more-title { margin-bottom: 28px; }

/* ---- chapters ---- */
.vn-topic-section {
    padding: clamp(36px, 5vw, 56px) 0 12px;
    border-top: 1px solid var(--vn-line);
}
.vn-topic-section h2,
.vn-topic-phase h2 {
    margin: 0 0 12px;
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -.003em;
    color: var(--vn-ink);
}
.vn-topic-section h3 {
    margin: 26px 0 10px;
    font-size: 1.3125rem;
    font-weight: 600;
    letter-spacing: .011em;
    color: var(--vn-ink);
}
/* The two column labels of a do/dont block keep their compact size. */
.vn-topic-section .vn-next-col h3 { margin: 0 0 10px; font-size: 1.0625rem; }
.vn-topic-section .vn-section-lede { margin-bottom: 24px; }
.vn-topic-text p {
    margin: 0 0 16px;
    font-size: var(--t-body, 1.0625rem);
    line-height: 1.6;
    color: var(--vn-ink);
}
.vn-topic-basis {
    margin: 10px 0 0;
    font-size: var(--t-small, .875rem);
    line-height: 1.5;
    color: var(--vn-ink-soft);
}

/* ---- steps: a numbered procedure ---- */
.vn-topic-steps {
    list-style: none;
    margin: 16px 0 24px;
    padding: 0;
    display: grid;
    gap: 12px;
}
.vn-topic-steps li {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 18px 20px;
    border: 0;
    border-radius: var(--r-md, 18px);
    background: var(--vn-paper-warm);
}
.vn-topic-step-n {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--c-espresso);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.vn-topic-steps p {
    margin: 0;
    padding-top: 5px;
    font-size: var(--t-body, 1.0625rem);
    line-height: 1.5;
    color: var(--vn-ink);
}

/* ---- warnings: the visa callout chrome, with an icon ---- */
.vn-topic-warning { display: flex; gap: 12px; align-items: flex-start; }
.vn-topic-warning > .et-i { flex: 0 0 auto; margin-top: 4px; color: var(--c-warn); }
.vn-topic-warning > div { min-width: 0; }
.vn-topic-warning-detail { font-size: var(--t-small, .875rem) !important; }

/* ---- tables: Apple's quiet comparison table, scrolling inside the page ---- */
.vn-topic-table-wrap { position: relative; margin: 16px 0 24px; overflow-x: auto; }
.vn-topic-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-body, 1.0625rem);
}
.vn-topic-table caption {
    caption-side: top;
    padding: 0 0 12px;
    text-align: left;
    font-size: var(--t-small, .875rem);
    font-weight: 600;
    color: var(--vn-ink-soft);
}
.vn-topic-table th,
.vn-topic-table td {
    padding: 14px 16px 14px 0;
    text-align: left;
    vertical-align: top;
    line-height: 1.45;
    border-bottom: 1px solid var(--vn-line);
}
.vn-topic-table thead th {
    padding-top: 0;
    font-size: var(--t-small, .875rem);
    font-weight: 600;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--vn-ink-soft);
    border-bottom-color: var(--vn-ink);
}
.vn-topic-table tbody th { font-weight: 600; color: var(--vn-ink); }
.vn-topic-table td { color: var(--vn-ink-soft); }

/* ---- facts: the citation line under each claim ---- */
.vn-topic-facts { margin: 0 0 10px; }
.vn-visa-fact > .vn-topic-fact-review {
    margin-top: 8px;
    font-size: var(--t-small, .875rem);
    line-height: 1.5;
    color: var(--c-warn);
}
.vn-visa-fact > .vn-topic-fact-sources {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(15, 26, 44, .08);
    font-size: var(--t-small, .875rem);
    line-height: 1.5;
    color: var(--vn-ink-soft);
}
.vn-topic-fact-sources-label {
    font-size: var(--t-small, .875rem);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--vn-ink);
}
.vn-topic-fact-sources a {
    color: var(--c-link);
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.vn-topic-fact-tier { font-size: var(--t-micro, .75rem); }
.vn-topic-fact-tier::before { content: "("; }
.vn-topic-fact-tier::after { content: ")"; }
.vn-topic-gap { margin: 12px 0; }

/* ---- reports: lived experience, marked as such ---- */
.vn-topic-reports {
    margin: 16px 0 24px;
    padding: 20px 22px;
    border: 1px dashed var(--c-line-2);
    border-radius: var(--r-md, 18px);
    background: #fff;
}
.vn-topic-reports-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: var(--t-small, .875rem);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--vn-ink-soft);
}
.vn-topic-reports ul { margin: 0; padding-left: 20px; }
.vn-topic-reports li {
    margin-bottom: 8px;
    font-size: var(--t-body, 1.0625rem);
    line-height: 1.5;
    color: var(--vn-ink);
}
.vn-topic-reports li:last-child { margin-bottom: 0; }

/* ---- myths: the belief, then the correction ---- */
.vn-topic-myth {
    margin: 16px 0;
    border: 0;
    border-radius: var(--r-md, 18px);
    overflow: hidden;
    background: var(--vn-paper-warm);
}
.vn-topic-myth p {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    margin: 0;
    padding: 16px 20px;
    font-size: var(--t-body, 1.0625rem);
    line-height: 1.5;
}
.vn-topic-myth-tag {
    padding-top: 2px;
    font-size: var(--t-small, .875rem);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
.vn-topic-myth-wrong { background: transparent; color: var(--vn-ink-soft); }
.vn-topic-myth-wrong .vn-topic-myth-tag { color: var(--vn-ink-soft); }
.vn-topic-myth-right { color: var(--vn-ink); border-top: 1px solid rgba(15, 26, 44, .08); background: #fff; }
.vn-topic-myth-right .vn-topic-myth-tag { color: var(--c-link); }

/* ---- sources, printed on the page ---- */
.vn-topic-sources p {
    margin: 0 0 16px;
    font-size: var(--t-body, 1.0625rem);
    line-height: 1.55;
    color: var(--vn-ink-soft);
}
.vn-topic-sources .vn-source-list { margin: 0 0 20px; }

/* ---- the hub: one band per trip phase ---- */
.vn-topic-phase {
    padding: clamp(40px, 5vw, 64px) 0 12px;
    border-top: 1px solid rgba(15, 26, 44, .1);
}
.vn-topic-body > .vn-topic-phase:first-child { padding-top: 0; border-top: 0; }
.vn-topic-cards {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}
.vn-topic-card {
    display: flex;
    flex-direction: column;
    min-height: 44px;
    padding: 28px;
    border-radius: var(--r-lg, 22px);
    border: 0;
    background: var(--vn-card, #fff);
    color: inherit;
    text-decoration: none;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.vn-topic-card:hover {
    box-shadow: var(--sh-3);
    color: inherit;
    text-decoration: none; border-color: rgba(37, 99, 235, .55); }
.vn-topic-card-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--c-espresso);
    color: #fff;
}
.vn-topic-card h3 {
    margin: 0 0 8px;
    font-size: 1.3125rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .011em;
    color: var(--vn-ink);
}
.vn-topic-card p {
    margin: 0 0 16px;
    font-size: var(--t-body, 1.0625rem);
    line-height: 1.47;
    color: var(--vn-ink-soft);
}
.vn-topic-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: var(--t-small, .875rem);
    font-weight: 400;
    color: var(--vn-ink-soft);
}
.vn-topic-card-meta .et-i { margin-right: 6px; color: var(--c-bronze); }
.vn-topic-card-go {
    margin-top: auto;
    padding-top: 18px;
    font-size: var(--t-body, 1.0625rem);
    color: var(--c-link);
}
.vn-topic-card-go::after { content: " \203A"; font-size: 1.2em; line-height: 1; }
.vn-topic-card:hover .vn-topic-card-go { text-decoration: underline; }

@media (max-width: 719px) {
    .vn-topic-head { padding-top: 36px; }
    .vn-topic-myth p { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .vn-topic-card, .vn-topic-toc a { transition: none; }
    .vn-topic-card:hover { transform: none; }
}

/* Travellers print these for the immigration desk: the sources must come
   with the page, and the navigation must not. */
@media print {
    .vn-topic-toc, .vn-topic-tools, .vn-topic-foot { display: none !important; }
    .vn-topic-fact-sources a::after { content: " (" attr(href) ")"; font-weight: 400; }
}