/* Marco & Co. — site styles (v4)
   Direction: light and airy. A white page, large light-weight headlines, photos inside big rounded cards with a floating
   pill on them, soft tinted cards and pill buttons. Oxford navy is the main colour (text, buttons, the recommended package)
   with a brighter blue for small accents. Terracotta is kept only for the logo's italic "&", which recurs as a motif.
   Motion follows the same reference: smooth wheel scrolling, headlines that rise in line by line, content that fades up as it
   arrives, photo cards that widen as they scroll into place, a sliding accordion for the steps and rows of countries drifting
   past. All of it is switched off for visitors who ask for reduced motion. */
:root {
  --oxford: #0B2147;
  --oxford-hover: #1C3767;
  --blue: #2B5BA6;
  --ink-2: #3E4C66;
  --muted: #7A8398;
  --white: #FFFFFF;
  --soft: #F7F5F1;
  --line: #E8E3DA;
  --sand: #F3EDE2;
  --sky: #E7EEF5;
  --mist: #DCE6F2;
  --terra: #B5573A;
  --terra-soft: #D08A70;
  --gold: #A07C3C;
  --gold-soft: #D4B373;
  --gold-tint: #FBF7EF;
  --font: 'Anuphan', 'IBM Plex Sans Thai Looped', system-ui, sans-serif;
  --amp: 'Libre Caslon Text', Georgia, serif;
  --r-card: 20px;
  --r-hero: 28px;
  --frame: 16px;
  --header-h: 76px;
  --max: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  /* Motion: a soft ease-out for things arriving, a quicker settle for things that move or resize */
  --ease-out: cubic-bezier(.33, 1, .68, 1);
  --ease-move: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; background: var(--white); color: var(--oxford); font-family: var(--font); font-size: 17px; line-height: 1.75; }
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.container { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 14px; border-radius: 999px; background: var(--oxford); color: #fff; }
.skip:focus { left: 12px; }
.nw { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Smooth wheel scrolling (Lenis). The browser's own smooth scrolling would fight it, so that's off while Lenis runs. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* The brand's italic ampersand, used to join pairs in headlines */
.amp { font-family: var(--amp); font-style: italic; font-weight: 400; color: var(--terra); padding: 0 .06em; }

/* Small pill tag above headlines */
.tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--soft); font-size: 13.5px; font-weight: 500; color: var(--oxford); }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.label { display: block; font-size: 13.5px; font-weight: 500; color: var(--blue); }

/* Header: white, sticks to the top */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: box-shadow .25s ease; }
.site-header.is-solid { box-shadow: 0 1px 0 var(--line); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 32px; width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.brand { display: inline-flex; }
.brand img { height: 28px; width: auto; }
.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a { text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink-2); transition: color .2s; }
.nav a:hover { color: var(--oxford); }

/* Buttons: pills, one primary per view. They press in slightly when tapped. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1.5px solid transparent; font: 500 15px/1 var(--font); text-decoration: none; cursor: pointer; touch-action: manipulation; transition: background-color .2s, color .2s, border-color .2s, transform .12s var(--ease-move); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--oxford); color: #fff; }
.btn-primary:hover { background: var(--oxford-hover); }
.btn-secondary { background: var(--soft); color: var(--oxford); }
.btn-secondary:hover { background: var(--sand); }
.btn-ghost { background: rgba(255, 255, 255, .92); color: var(--oxford); }
.btn-ghost:hover { background: #fff; }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 14.5px; }

/* Hero: the headline on white, then the photo card with the slideshow inside */
.hero { padding-top: 28px; }
.hero-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 20px 64px; align-items: end; padding-bottom: 32px; }
.hero h1 { margin-top: 18px; font-weight: 300; font-size: clamp(38px, 5vw, 66px); line-height: 1.22; letter-spacing: -.01em; }
.hero-side { display: grid; gap: 20px; padding-bottom: 10px; }
.hero-lead { max-width: 30em; font-size: 17px; color: var(--ink-2); text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-card { position: relative; overflow: hidden; isolation: isolate; margin: 0 var(--frame); border-radius: var(--r-hero); background: var(--oxford); height: clamp(420px, 64vh, 720px); }
.hero-media { position: absolute; inset: 0; }
/* Slideshow: each photo drifts and zooms very slowly, then dissolves into the next */
.slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.8s ease; }
.slide.is-active { opacity: 1; }
.slide img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos, 50% 50%);
  transform-origin: var(--origin, 50% 50%);
  transform: scale(var(--s0, 1.04));
}
.slide.is-active img, .slide.is-leaving img { animation: kenburns 9.5s ease-out forwards; }
.hero.is-paused .slide img { animation-play-state: paused; }
@keyframes kenburns { from { transform: scale(var(--s0, 1.04)); } to { transform: scale(var(--s1, 1.11)) translate3d(0, -1%, 0); } }
/* Motion slides: an AI clip of the place fades in over its still poster. The clip moves on its own, so the poster stays still. */
.slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); opacity: 0; transition: opacity .8s ease; }
.slide video.is-ready { opacity: 1; }
.slide-video img, .slide-video.is-active img, .slide-video.is-leaving img { animation: none; transform: none; }
.hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(11, 33, 71, .28) 0%, rgba(11, 33, 71, 0) 32%); }
/* Floating pill on the photo: the brand icon, the place, and the pause button. The place name blurs out and in between slides. */
.hero-caption { position: absolute; z-index: 2; left: 20px; bottom: 20px; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--oxford); font-size: 14px; font-weight: 500; }
.hero-caption::before { content: ""; width: 30px; height: 30px; border-radius: 50%; background: url(../img/icon.svg) center/cover; }
.hero-caption.is-empty [data-caption-text] { display: none; }
.hero-caption [data-caption-text] { transition: opacity .25s ease, filter .25s ease; }
.hero-caption.is-swapping [data-caption-text] { opacity: 0; filter: blur(2px); }
.slide-toggle { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 0; background: var(--soft); color: var(--oxford); cursor: pointer; }
.slide-toggle:hover { background: var(--sand); }
.slide-toggle .i-play { display: none; }
.hero.is-paused .slide-toggle .i-play { display: block; }
.hero.is-paused .slide-toggle .i-pause { display: none; }

/* Three facts in soft cards under the hero */
.trust { padding-top: 16px; }
.trust-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stat { padding: 22px 24px; border-radius: var(--r-card); background: var(--soft); }
.stat strong { display: block; margin-top: 6px; font-weight: 300; font-size: clamp(30px, 3vw, 44px); line-height: 1.1; letter-spacing: -.01em; }
.stat .sub { display: block; margin-top: 6px; font-size: 14.5px; color: var(--ink-2); }
.trust-note { margin-top: 10px; padding-left: 8px; font-size: 13px; color: var(--muted); }

/* Sections */
/* Sections are sized so their main content fits one screen: spacing follows the screen height */
.section { padding: clamp(44px, 7.5vh, 88px) 0; }
.sec-head { max-width: 780px; margin-bottom: clamp(20px, 3.4vh, 36px); display: grid; gap: 12px; justify-items: start; }
.sec-head h2 { font-weight: 300; font-size: clamp(28px, min(3.4vw, 5.8vh), 48px); line-height: 1.22; letter-spacing: -.01em; }
.sec-head .lead { max-width: 40em; font-size: 16px; color: var(--ink-2); text-wrap: pretty; }
.sec-head-center { margin-inline: auto; justify-items: center; text-align: center; }

/* Who we help: the promise and the four principles on the left, a bento of tinted tiles on the right */
.split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px 64px; }
.split .sec-head { margin-bottom: 0; }
.who-intro { display: grid; align-content: start; gap: clamp(36px, 4vw, 48px); }
.creed { display: grid; gap: 12px; }
.creed-bridge { max-width: 30em; font-size: 15.5px; color: var(--ink-2); }
.creed-quote { font-weight: 300; font-size: clamp(30px, 3vw, 42px); line-height: 1.3; letter-spacing: -.01em; }
.creed-list { margin: 12px 0 0; padding: 0; list-style: none; }
.creed-list li { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; }
.creed-list li::before, .creed-list li:last-child::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--line); transform-origin: left; }
.creed-list li::before { top: 0; }
.creed-list li:last-child::after { bottom: 0; }
.creed-list b { font-size: 17px; font-weight: 500; }
.creed-list span { font-size: 15.5px; color: var(--ink-2); }
/* Samples of our work: one light highlight block with two short rows, the travel plan and the cover letter.
   Each row shows the document as a small page (zoomed down) beside the words. */
.samples { display: grid; padding: 4px 20px; border: 1px solid rgba(43, 91, 166, .16); border-radius: var(--r-card); background: linear-gradient(160deg, #F1F5FB 0%, #E2EAF6 100%); }
.plan { display: grid; gap: 18px; padding: 20px 0; }
.plan + .plan { border-top: 1px solid rgba(43, 91, 166, .14); }
.plan-body { display: grid; gap: 8px; justify-items: start; }
/* Which packages include it: a quiet line under the title ("Package" and a small tag per package) */
.plan-pkgs { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: -2px; font-size: 12.5px; }
.plan-pkgs span { margin-right: 2px; color: var(--muted); }
.pkg { padding: 1px 9px; border-radius: 999px; background: rgba(43, 91, 166, .1); font-size: 12px; font-weight: 600; color: var(--blue); }
.plan h3 { font-size: 21px; font-weight: 500; line-height: 1.35; }
.plan-body > p:not([class]) { font-size: 15px; color: var(--ink-2); }
/* The tricky-trip examples as small chips on one line */
.plan-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; font-size: 13.5px; }
.pkg.pkg-gold { background: rgba(212, 179, 115, .26); color: #6F5420; }
.plan-chips b { font-weight: 600; color: var(--oxford); }
.plan-chips span { padding: 2px 10px; border: 1px solid rgba(43, 91, 166, .18); border-radius: 999px; background: #fff; color: var(--oxford); }
.plan-link { font-size: 15px; font-weight: 500; color: var(--blue); text-decoration: none; }
.plan-link:hover { text-decoration: underline; }
.plan-doc { justify-self: start; width: 480px; zoom: .6; margin: 0 8px 12px 0; padding: 16px 16px 12px; border-radius: 6px; background: #fff; color: var(--oxford);
  box-shadow: 0 1px 2px rgba(11, 33, 71, .08), 7px 7px 0 -1px #fff, 7px 7px 0 0 rgba(11, 33, 71, .1), 0 18px 34px -18px rgba(11, 33, 71, .35); }
/* The Expert Check stamp on each sample: a navy label in the document's empty right margin (sized in document units) */
.plan-doc { position: relative; }
.doc-stamp { position: absolute; z-index: 1; top: 50px; right: 14px; display: inline-flex; align-items: center; padding: 5px 12px 5px 9px; border-radius: 999px; background: var(--oxford); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.25; white-space: nowrap; box-shadow: 0 6px 14px -6px rgba(11, 33, 71, .5); }
.letter-doc .doc-stamp { top: 42px; }
.doc-stamp .ec-sym { --ec-1: #4A6DAA; --ec-2: #9DB8E8; --ec-3: #FFFFFF; width: 15px; height: 15.6px; margin-right: 6px; }
/* The cover letter: date, addressee, subject, the opening written around the family's own story, then the rest as soft lines */
.letter-doc { font-size: 10.5px; line-height: 1.6; }
.letter-doc p + p { margin-top: 7px; }
.ld-date { text-align: right; color: var(--muted); }
.ld-to { font-weight: 600; }
.ld-subj b { font-weight: 600; }
.ld-lines { display: grid; gap: 7px; padding: 4px 0; }
.ld-lines span { height: 6px; border-radius: 3px; background: var(--soft); }
.ld-lines span:nth-child(2) { width: 94%; }
.ld-lines span:nth-child(3) { width: 98%; }
.ld-lines span:nth-child(4) { width: 62%; }
.ld-sign b { font-weight: 600; }
.pd-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; padding-bottom: 8px; border-bottom: 2px solid var(--oxford); }
.pd-head b { font-size: 12px; font-weight: 600; letter-spacing: .14em; }
.pd-head span { font-size: 10.5px; color: var(--muted); }
.pd-meta { margin: 8px 0 10px; font-size: 10.5px; line-height: 1.5; color: var(--ink-2); }
.pd-meta b { margin-right: 5px; font-weight: 600; color: var(--oxford); }
.pd-meta p { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 6px; }
/* The travellers, numbered in two columns */
.pd-who ol { display: grid; grid-template-columns: repeat(2, max-content); gap: 0 22px; margin: 2px 0 0; padding: 0; list-style: none; counter-reset: traveller; }
.pd-who li { counter-increment: traveller; }
.pd-who li::before { content: counter(traveller) ". "; color: var(--muted); }
.pd-table { width: 100%; border-collapse: collapse; font-size: 10.5px; line-height: 1.4; }
.pd-table th { padding: 4px 8px 5px 0; border-bottom: 1px solid var(--line); text-align: left; font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pd-table td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.pd-table td:first-child { font-weight: 600; color: var(--blue); }
.pd-table .pd-more td { border-bottom: 0; font-weight: 400; color: var(--muted); }
.pd-foot { margin-top: 6px; text-align: right; font-size: 9px; color: var(--muted); }
.pd-table tbody tr:nth-child(2) { --r: 1; }
.pd-table tbody tr:nth-child(3) { --r: 2; }
.pd-table tbody tr:nth-child(4) { --r: 3; }
.pd-table tbody tr:nth-child(5) { --r: 4; }
.pd-table tbody tr:nth-child(6) { --r: 5; }
.pd-table tbody tr:nth-child(7) { --r: 6; }
.pd-table tbody tr:nth-child(8) { --r: 7; }
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px; }
/* Each tile: a photo (or a small illustrated screen) on top with the group's name on a white pill, then the words */
.tile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 24px; border-radius: var(--r-card); overflow: hidden; }
.tile-img, .tile-visual { width: 100%; aspect-ratio: 1 / 1; margin-bottom: 12px; border-radius: 14px; }
.tile-img { height: auto; object-fit: cover; background: rgba(11, 33, 71, .06); }
.tile-visual { display: grid; place-items: center; padding: 54px 16px 16px; background: var(--soft); }
.tile .label { position: absolute; top: 20px; left: 20px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .94); font-size: 13px; }
.tile h3 { padding: 0 12px; font-size: 19px; font-weight: 500; line-height: 1.4; }
.tile p { padding: 0 12px; font-size: 15px; color: var(--ink-2); }
.tile-sand { background: var(--sand); }
.tile-sky { background: var(--sky); }
.tile-mist { background: var(--mist); }
.tile-white { background: var(--white); border: 1px solid var(--line); }
/* The "every group" tile: every person's documents checked and ready */
.vg-ready li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.vg-ready li:first-child { border-top: 0; padding-top: 0; }
.vg-ready li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2 4.6-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.vg-ready li b { font-weight: 500; }
.vg-ready li span { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.vg-ok { width: fit-content; margin-top: 12px; padding: 5px 12px; border-radius: 999px; background: #E3F1E8; font-size: 13px; font-weight: 600; color: #2E6B48; }

/* How it works: four step cards with a small illustrated screen each. On wide screens they become a sliding accordion. */

/* The little screens inside each step. They're illustrations, not real customers. */
.vg { width: min(100%, 360px); padding: 16px 18px 18px; border-radius: 18px; background: var(--white); box-shadow: 0 1px 2px rgba(11, 33, 71, .06), 0 18px 40px -18px rgba(11, 33, 71, .28); font-size: 14px; line-height: 1.5; }
.vg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.vg-head img { width: 28px; height: 28px; border-radius: 50%; }
.vg-head b { font-size: 14.5px; font-weight: 600; }
.vg-head span { margin-left: auto; font-size: 12px; color: var(--muted); }
.bubble { width: fit-content; max-width: 86%; padding: 9px 13px; border-radius: 16px; font-size: 13.5px; line-height: 1.55; }
.bubble.out { margin-left: auto; border-bottom-right-radius: 5px; background: #8DE055; color: #111; }   /* LINE chat green: reads as a LINE message (owner, 11 Oct 2026) */
.bubble.in { margin-top: 8px; border-bottom-left-radius: 5px; background: var(--soft); }
.vg ul { display: grid; margin: 0; padding: 0; list-style: none; }
.vg small { font-size: 12px; color: var(--muted); }
.vg-appt .appt { display: flex; align-items: baseline; gap: 8px; }
.vg-appt .appt b { font-size: 46px; font-weight: 300; line-height: 1; letter-spacing: -.02em; }
.vg-appt .appt span { font-size: 16px; font-weight: 500; }
.vg-appt .appt em { margin-left: auto; padding: 4px 12px; border-radius: 999px; background: var(--sky); font-size: 13.5px; font-style: normal; font-weight: 500; }
.vg-appt p { margin-top: 8px; font-size: 13.5px; color: var(--ink-2); }
.vg-appt .who { display: flex; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.vg-appt .who span { display: grid; place-items: center; width: 36px; height: 36px; margin-left: -8px; border-radius: 50%; border: 2px solid var(--white); background: var(--sky); font-size: 11px; font-weight: 600; }
.vg-appt .who span:first-child { margin-left: 0; background: var(--sand); }
.vg-appt .who span:nth-child(3) { background: var(--mist); }
.vg-appt .who span:nth-child(4) { background: var(--soft); }
.vg-appt .who em { margin-left: 12px; font-size: 13px; font-style: normal; color: var(--ink-2); }

/* When to apply: the timeline card */
.timing { margin-top: 14px; padding: 28px 28px 32px; border-radius: var(--r-card); border: 1px solid var(--line); }
.timing-head { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px 40px; }
.timing-head p:not(.label) { max-width: 44em; font-size: 15.5px; color: var(--ink-2); }
.timing-bar { position: relative; height: 12px; margin: 40px 0 44px; border-radius: 6px; background: var(--soft); }
.t-open { position: absolute; left: 0; top: 0; bottom: 0; width: 91.7%; border-radius: 6px; background: #D5DFEC; }
.t-best { position: absolute; left: 50%; top: 0; bottom: 0; width: 16.7%; border-radius: 6px; background: var(--blue); }
.tick { position: absolute; left: var(--x); top: 100%; width: 1px; height: 10px; background: var(--ink-2); font-style: normal; }
.tick b { position: absolute; top: 12px; left: 0; transform: translateX(-50%); white-space: nowrap; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.tick:first-of-type b { transform: none; }
.tick:last-of-type b { top: auto; bottom: 24px; transform: translateX(-100%); color: var(--oxford); }
.timing-legend { font-size: 13.5px; color: var(--ink-2); }
.k { display: inline-block; width: 22px; height: 10px; margin-right: 6px; border-radius: 5px; vertical-align: middle; }
.timing-legend span + .k { margin-left: 18px; }
.k-open { background: #D5DFEC; }
.k-best { background: var(--blue); }

/* Story */
.story { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: start; }
.story-lede { font-size: 17px; color: var(--ink-2); }
.story-full { margin-top: 24px; }
.story-full summary { cursor: pointer; list-style: none; font-weight: 500; color: var(--blue); }
.story-full summary::-webkit-details-marker { display: none; }
.story-full summary::before { content: "+ "; }
.story-full[open] summary::before { content: "\2013 "; }
.story-full .full { display: grid; gap: 14px; margin-top: 16px; color: var(--ink-2); }
.signature { font-weight: 500; color: var(--oxford); }
.visa-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.visa-tile { display: grid; place-items: center; aspect-ratio: 4 / 3; max-width: 100%; padding: 8px; border-radius: 14px; background: var(--soft); text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.visa-caption { margin-top: 14px; font-size: 14px; color: var(--ink-2); }

/* Pricing: one row per package, a bar across the stages it covers, prices switch with group size.
   A white thumb slides behind the chosen group size. */
.seg { position: relative; display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--soft); }
.seg::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--thumb-w, 0px); border-radius: 999px; background: var(--white); box-shadow: 0 1px 2px rgba(11, 33, 71, .08), 0 4px 10px -4px rgba(11, 33, 71, .12); transform: translateX(var(--thumb-x, 0px)); opacity: 0; }
.seg.has-thumb::before { opacity: 1; }
.seg.is-ready::before { transition: transform .4s var(--ease-move), width .4s var(--ease-move); }
.seg button { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 50px; padding: 6px 20px; border: 0; border-radius: 999px; background: transparent; font: 500 15px/1.2 var(--font); color: var(--ink-2); cursor: pointer; touch-action: manipulation; transition: color .2s; }
.seg small { font-size: 12px; font-weight: 400; opacity: .85; }
.seg button[aria-checked="true"] { background: var(--white); color: var(--oxford); box-shadow: 0 1px 2px rgba(11, 33, 71, .08); }
.seg.has-thumb button[aria-checked="true"] { background: transparent; box-shadow: none; }
.prices-switch { margin: 0 0 28px; }
.matrix { display: grid; grid-template-columns: 200px repeat(5, minmax(0, 1fr)); gap: 10px 8px; }
.m-head, .m-pack { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.m-stage { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 0 2px 12px; border-bottom: 1px solid var(--line); font-size: 14.5px; font-weight: 500; line-height: 1.35; color: var(--ink-2); }
.m-stage span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sky); font-size: 13px; font-weight: 500; color: var(--blue); }
.m-name { grid-column: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 0; }
.m-name h3 { font-size: 20px; font-weight: 500; line-height: 1.25; }
.m-price { font-size: 14.5px; color: var(--ink-2); }
.m-price [data-price] { display: inline-block; font-size: 19px; font-weight: 500; color: var(--oxford); }
.m-sub { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); text-wrap: balance; }
.is-featured .m-sub { font-weight: 500; color: #6F5420; }
.m-up { margin: 8px 0 0; font-size: 13px; font-weight: 500; line-height: 1.4; color: #7A5A22; }
.m-up-narrow { display: none; }
.m-badge { align-self: flex-start; margin-bottom: 6px; padding: 3px 10px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 500; }
.m-row { grid-column: var(--c); display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; }
.m-cell { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 14px 14px; border-radius: 14px; background: var(--sky); color: var(--oxford); }
.is-featured .m-cell { background: var(--oxford); color: #fff; box-shadow: inset 0 0 0 1px rgba(212, 179, 115, .55); }
/* Gold, the recommended package: Oxford blue cells with a gold edge and ticks, on a pale gold band that also holds the name */
.m-pack.is-featured { margin: 6px 0; border-radius: 18px; background: var(--gold-tint); box-shadow: 0 0 0 10px var(--gold-tint); }
.is-featured .m-badge { background: var(--gold-soft); color: var(--oxford); }
.is-featured .docs li::before { border-color: var(--gold-soft); opacity: 1; }
.docs { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; font-size: 14px; font-weight: 500; line-height: 1.4; }
.docs li { position: relative; padding-left: 17px; text-wrap: balance; }
.docs li::before { content: ""; position: absolute; left: 2px; top: .3em; width: 5px; height: 9px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: .85; }
/* The Expert Check mark: three ticks (two system layers, the expert on top). Colours come from --ec-1/2/3 */
.ec-sym { display: inline-block; width: 1em; height: 1.04em; vertical-align: -.14em; margin-right: .32em; --ec-1: #9DB8E8; --ec-2: #2B5BA6; --ec-3: #0B2147; }
.is-featured .ec-sym, .ec-layers li:last-child .ec-sym { --ec-1: #4A6DAA; --ec-2: #9DB8E8; --ec-3: #FFFFFF; }
.docs li.ec-li { padding-left: 21px; font-weight: 600; }
.docs li.ec-li::before { display: none; }
.docs li.ec-li .ec-sym { position: absolute; left: 0; top: .18em; width: 15px; height: 15.6px; margin: 0; }
.m-name h3 .ec-sym { width: .9em; height: .94em; margin-right: .3em; }
.nav-ec { display: inline-flex; align-items: center; }
.nav-ec .ec-sym { width: 1.05em; height: 1.1em; margin-right: .38em; vertical-align: 0; }
.ticks li.ec-li { gap: 8px; }
.ticks li.ec-li::before { display: none; }
.ticks li.ec-li .ec-sym { flex: none; width: 15px; height: 15.6px; margin: .3em 0 0 -4px; }
.ec-logo img { display: block; width: auto; height: 42px; }
.ec-key { grid-column: 1; grid-row: 2; margin: -2px 0 0; font-size: 13.5px; color: var(--muted); }
/* The report spans both rows on the right, so the key line sits under the layers */
.ec-layers { grid-row: 1; }
.ec-report { grid-column: 2; grid-row: 1 / span 2; }
.tm { margin-left: .08em; font-size: .62em; line-height: 0; vertical-align: .62em; letter-spacing: 0; }
.er-head b .ec-sym { width: 1.1em; height: 1.14em; margin-right: .5em; vertical-align: -.2em; }
.ec-price b .ec-sym { margin-right: .4em; }
/* Each layer's label carries its own tick, in the colour it has in the symbol */
.ec-k::before { content: ""; display: inline-block; width: 13px; height: 9px; margin-right: 7px; vertical-align: .05em; background: var(--tick, var(--blue));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 18'%3E%3Cpath d='M2 9l7 7L24 2' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 18'%3E%3Cpath d='M2 9l7 7L24 2' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.ec-layers li:nth-child(1) { --tick: #7F9FD8; }
.ec-layers li:nth-child(2) { --tick: #2B5BA6; }
.ec-layers li:nth-child(3) { --tick: #FFFFFF; }
/* Expert-Check: the document check as a product. Three layers (two by system, the last by an expert) beside a sample report */
.ec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 32px 56px; align-items: start; }
.ec-layers { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ec-layers li { padding: 20px 22px 22px; border-radius: var(--r-card); background: var(--sky); }
.ec-layers li:last-child { background: var(--oxford); color: #fff; }
.ec-k { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 500; color: var(--blue); }
.ec-layers li:last-child .ec-k { color: #A9C0E8; }
.ec-layers h3 { font-size: 19px; font-weight: 500; line-height: 1.4; }
.ec-layers p { margin-top: 4px; font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.ec-layers li:last-child p { color: rgba(255, 255, 255, .8); }
.ec-report { margin: 0; padding: 22px 24px 16px; border: 1px solid rgba(11, 33, 71, .06); border-radius: 10px; background: #fff; color: var(--oxford);
  box-shadow: 0 1px 2px rgba(11, 33, 71, .08), 8px 8px 0 -1px #fff, 8px 8px 0 0 rgba(11, 33, 71, .1), 0 24px 44px -22px rgba(11, 33, 71, .35); }
.er-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding-bottom: 10px; border-bottom: 2px solid var(--oxford); }
.er-head b { font-size: 13px; font-weight: 600; letter-spacing: .14em; }
.er-head span { font-size: 12px; color: var(--muted); }
.er-case { margin-top: 10px; font-size: 14.5px; font-weight: 500; }
.er-sum { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.er-sum span { padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.6; }
.er-sum .er-red { background: rgba(196, 64, 52, .1); color: #A3342A; }
.er-sum .er-amber { background: rgba(214, 156, 30, .15); color: #855E10; }
.er-sum .er-green { background: rgba(46, 139, 87, .12); color: #22704A; }
.er-list { margin: 0; padding: 0; list-style: none; }
.er-list li { position: relative; padding: 10px 0 10px 22px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.45; }
.er-list li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--dot); }
.er-list .er-red { --dot: #C44034; }
.er-list .er-amber { --dot: #D69C1E; }
.er-list .er-green { --dot: #2E8B57; }
.er-list b { display: block; font-weight: 500; }
.er-list span { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-2); }
.er-foot { padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.ec-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 32px; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--soft); }
.ec-price { display: grid; gap: 0; }
.ec-price b { font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--ink-2); }
.ec-price span { font-size: 15px; color: var(--ink-2); }
.ec-price strong { font-size: 28px; font-weight: 500; color: var(--oxford); }
.ec-terms { flex: 1 1 320px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
/* Copy shown only on phones */
.for-narrow { display: none; }
.price-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 24px; }
.price-foot p { font-size: 15px; color: var(--ink-2); }
.more { margin-top: 12px; padding: 4px 22px; border-radius: 16px; background: var(--soft); }
.more summary { padding: 14px 0; cursor: pointer; list-style: none; font-weight: 500; font-size: 16px; color: var(--oxford); }
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: "+ "; color: var(--blue); }
.more[open] summary::before { content: "\2013 "; }
.more-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 6px 0 20px; }
.more-grid h3 { margin: 0 0 10px; font-size: 18px; font-weight: 500; }
.ticks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--ink-2); }
.ticks li { display: flex; gap: 10px; }
.ticks li::before { content: ""; flex: 0 0 5px; height: 5px; margin-top: .8em; border-radius: 50%; background: var(--blue); }
.more-note { margin-top: 12px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.addons-list { margin: 0; padding: 0 0 14px; }
.addons-list div { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 12px 0; border-top: 1px solid var(--line); }
.addons-list dt { font-size: 15.5px; font-weight: 500; color: var(--oxford); }
.addons-list dt span { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--ink-2); }
.addons-list dd { flex: none; margin: 0; font-size: 15px; font-weight: 500; color: var(--oxford); text-align: right; }
.fine { margin-top: 20px; font-size: 13px; line-height: 1.8; color: var(--muted); }

/* Statement on a photo: the checklist band */
.band { padding: 0 var(--frame); }
.band-card { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 540px; border-radius: var(--r-hero); background: var(--oxford) url(../motion/poster/lucerne-16x9.jpg) center / cover no-repeat; color: #fff; text-align: center; }
.band-card::before { content: ""; position: absolute; inset: 0; background: rgba(11, 33, 71, .42); }
.band-inner { position: relative; z-index: 1; max-width: 780px; padding: 56px 24px; }
.band .tag { background: rgba(255, 255, 255, .16); color: #fff; }
.band .tag::before { background: var(--sky); }
.band h2 { margin-top: 18px; font-weight: 300; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.2; letter-spacing: -.01em; }
.band h2 .amp { color: var(--terra-soft); }
.band p { margin: 16px auto 28px; max-width: 34em; font-size: 17px; color: rgba(255, 255, 255, .88); }
/* On the photo the navy button would disappear, so the buttons turn white */
.band .btn-primary { background: #fff; color: var(--oxford); }
.band .btn-primary:hover { background: var(--sky); }
.band .btn-ghost { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .55); color: #fff; }
.band .btn-ghost:hover { background: rgba(255, 255, 255, .22); }
.btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* FAQ */
.faq-list { display: grid; gap: 10px; max-width: 880px; }
.faq-list details { padding: 4px 22px; border-radius: 16px; background: var(--soft); }
.faq-list summary { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; cursor: pointer; list-style: none; font-weight: 500; font-size: 17px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; font-size: 22px; font-weight: 300; line-height: 1; color: var(--blue); }
.faq-list details[open] summary::after { content: "\2013"; }
.faq-list details p { padding: 0 0 18px; max-width: 42em; color: var(--ink-2); }
.faq-list details p:has(+ .faq-steps) { padding-bottom: 8px; }
.faq-steps { display: grid; gap: 6px; max-width: 42em; margin: 0 0 14px; padding-left: 1.4em; color: var(--ink-2); }
.faq-steps b { font-weight: 500; color: var(--oxford); }

/* Schengen countries: two rows of landmark photos drifting in opposite directions. Without the moving rows (reduced motion,
   no script) each row simply scrolls sideways. */
.countries { padding: clamp(44px, 7.5vh, 88px) 0 clamp(16px, 3vw, 32px); overflow: hidden; }
.marquee { display: grid; gap: 12px; }
.mq-row { display: flex; overflow: hidden; }
.mq-track { display: flex; flex: none; gap: 12px; width: max-content; animation: mq var(--dur, 60s) linear infinite paused; }
.marquee:not(.is-ready) .mq-row { overflow-x: auto; padding: 0 var(--gutter); scroll-snap-type: x proximity; scrollbar-width: none; }
.marquee:not(.is-ready) .mq-track { animation: none; }
.marquee:not(.is-ready) .mq-chip { scroll-snap-align: start; }
.marquee.is-ready { -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marquee.is-running .mq-track { animation-play-state: running; }
.mq-reverse .mq-track { animation-direction: reverse; }
@media (hover: hover) and (pointer: fine) { .marquee:hover .mq-track { animation-play-state: paused; } }
@keyframes mq { to { transform: translate3d(calc(-50% - 6px), 0, 0); } }
/* Each country is a rounded photo card with its name on a small white pill, like the hero's caption. The photo fades in once loaded. */
.mq-chip { position: relative; isolation: isolate; flex: none; display: block; width: clamp(200px, 28vh, 260px); height: clamp(134px, 19vh, 174px); border-radius: 28px; overflow: hidden; background: var(--sky); }
.mq-chip::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--img, none) center / cover no-repeat; opacity: 0; transition: opacity .6s ease; }
.mq-chip.is-loaded::before { opacity: 1; }
.mq-chip b { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .94); font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--oxford); white-space: nowrap; }
.mq-chip small { font-size: 11.5px; font-weight: 400; color: var(--muted); }

/* Final call to action, with the big quiet ampersand behind it */
.cta { position: relative; overflow: hidden; padding: clamp(56px, 10vh, 120px) 0; text-align: center; }
.cta::before { content: "&"; position: absolute; right: 4%; top: 50%; transform: translateY(-50%); font: italic 400 clamp(280px, 38vw, 560px)/1 var(--amp); color: var(--sky); pointer-events: none; }
.cta-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 16px; max-width: 760px; margin-inline: auto; }
.cta h2 { font-weight: 300; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.2; letter-spacing: -.01em; }
.cta p { max-width: 36em; font-size: 17px; color: var(--ink-2); }
.cta .btns { margin-top: 10px; }
.qr { display: grid; place-items: center; width: 150px; aspect-ratio: 1 / 1; margin-top: 24px; border-radius: 16px; background: var(--soft); font-size: 13px; color: var(--muted); }
.cta small { font-size: 13px; color: var(--muted); }

/* Footer */
.site-footer { padding: 56px 0 calc(32px + env(safe-area-inset-bottom)); background: var(--soft); color: var(--ink-2); font-size: 14.5px; line-height: 1.8; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.site-footer h3 { margin: 0 0 8px; font-size: 13.5px; font-weight: 500; color: var(--blue); }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer a { color: var(--oxford); }
.footer-logo { height: 26px; width: auto; margin-bottom: 14px; }
.legal { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.legal p + p { margin-top: 4px; }

/* Mobile LINE bar */
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .94); box-shadow: 0 -1px 0 var(--line); transform: translateY(110%); transition: transform .25s ease; }
.mobile-bar.is-visible { transform: none; }
.mobile-bar .btn { width: 100%; }

/* Tints shared by the step cards and the country chips */

/* Motion: reveals. The js-motion class is set in <head> (never for reduced motion) so nothing flashes before the script
   runs. If the script doesn't arrive, the class is removed after 2.5 seconds and everything simply shows. */
[data-reveal] { --delay: calc(var(--d, 0s) + var(--i, 0) * .09s); }
.ln { display: block; }
.ln > span { display: inline-block; }
.js-motion [data-reveal=""],
.js-motion [data-reveal="timing"] { opacity: 0; transform: translate3d(0, 28px, 0); }
.js-motion [data-reveal=""].is-in,
.js-motion [data-reveal="timing"].is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out) var(--delay), transform .9s var(--ease-out) var(--delay); }
/* Headlines: each line rises and is unveiled from the top. The negative insets leave room for Thai marks above and below. */
.js-motion [data-reveal="lines"] .ln > span { transform: translate3d(0, .55em, 0); clip-path: inset(0 0 100% 0); }
.js-motion [data-reveal="lines"].is-in .ln > span { transform: none; clip-path: inset(-.6em -.4em -.5em -.4em); transition: transform .8s var(--ease-out), clip-path .8s var(--ease-out); transition-delay: calc(var(--delay) + var(--l, 0) * .13s); }
/* Principles: a hairline draws across, then the words follow */
.js-motion [data-reveal="rule"]::before,
.js-motion [data-reveal="rule"]:last-child::after { transform: scaleX(0); }
.js-motion [data-reveal="rule"] > * { opacity: 0; transform: translate3d(0, 12px, 0); }
.js-motion [data-reveal="rule"].is-in::before,
.js-motion [data-reveal="rule"].is-in:last-child::after { transform: none; transition: transform 1s var(--ease-move) var(--delay); }
.js-motion [data-reveal="rule"].is-in > * { opacity: 1; transform: none; transition: opacity .6s var(--ease-out) calc(var(--delay) + .18s), transform .8s var(--ease-out) calc(var(--delay) + .18s); }
/* Each package fades up, then its bar sweeps across the stages it covers (on phones, its coverage meter fills) */
.js-motion .m-pack .m-row { clip-path: inset(0 100% 0 0 round 14px); }
.js-motion .m-pack.is-in .m-row { clip-path: inset(0 0 0 0 round 14px); transition: clip-path 1s var(--ease-move) calc(var(--delay) + .15s); }
.js-motion .m-pack .m-meter i.on { transform: scaleX(0); transform-origin: left; }
.js-motion .m-pack.is-in .m-meter i.on { transform: none; transition: transform .45s var(--ease-move) calc(var(--delay) + .3s + var(--m, 0) * .07s); }
.js-motion .m-pack .m-extra.on { opacity: 0; transform: scale(.3); }
.js-motion .m-pack.is-in .m-extra.on { opacity: 1; transform: none; transition: opacity .3s ease, transform .5s var(--ease-move); transition-delay: calc(var(--delay) + .75s); }
.js-motion .m-pack.is-in .m-hotel.on { transition-delay: calc(var(--delay) + .87s); }
.m-meter i:nth-child(2) { --m: 1; }
.m-meter i:nth-child(3) { --m: 2; }
.m-meter i:nth-child(4) { --m: 3; }
.m-meter i:nth-child(5) { --m: 4; }
/* The timeline fills in, then the recommended window and the dates appear */
.js-motion [data-reveal="timing"] .t-open { transform: scaleX(0); transform-origin: left; }
.js-motion [data-reveal="timing"].is-in .t-open { transform: none; transition: transform 1.3s var(--ease-move) .3s; }
.js-motion [data-reveal="timing"] .t-best { opacity: 0; transform: scaleX(.4); }
.js-motion [data-reveal="timing"].is-in .t-best { opacity: 1; transform: none; transition: opacity .4s ease 1s, transform .8s var(--ease-move) 1s; }
.js-motion [data-reveal="timing"] .tick { opacity: 0; }
.js-motion [data-reveal="timing"].is-in .tick { opacity: 1; transition: opacity .5s ease calc(.45s + var(--t, 0) * .18s); }
/* The big ampersand behind the last call to action drifts up into place */
.js-motion [data-reveal="amp"]::before { opacity: 0; transform: translate3d(0, -38%, 0); }
.js-motion [data-reveal="amp"].is-in::before { opacity: 1; transform: translate3d(0, -50%, 0); transition: opacity 1.2s ease, transform 1.8s var(--ease-move); }
/* The sample itinerary's rows appear one after another */
.js-motion .plan .pd-table tbody tr { opacity: 0; transform: translate3d(0, 6px, 0); }
.js-motion .plan.is-in .pd-table tbody tr { opacity: 1; transform: none; transition: opacity .4s var(--ease-out), transform .5s var(--ease-out); transition-delay: calc(var(--delay) + .4s + var(--r, 0) * .1s); }
/* Steps: the row (or each card) fades up, then the open step's content plays in, its little screen last */

/* Open and close the detail panels smoothly where the browser supports it */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    details::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--ease-move), content-visibility .45s allow-discrete; }
    details[open]::details-content { block-size: auto; }
  }
}

/* Wide screens: the photo cards start at the width of the text column and widen to the page frame as they scroll into
   place. The script takes over from this starting point. */
@media (min-width: 960px) {
  /* Laptops: the photo fills the first screen and the words sit on it, bottom left, over a soft blue fade.
     The text column stays narrow so the people in the photos (mostly right of centre) stay clear. */
  /* The card starts at the text column's width and widens on scroll, so the words keep an inset from its edge */
  .hero { --hero-inset: clamp(28px, 3.4vw, 56px); position: relative; padding: 0 0 var(--frame); }
  .hero-card { height: calc(100svh - var(--header-h) - var(--frame)); min-height: 540px; max-height: 920px; }
  .hero-top { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(var(--frame) + clamp(36px, 6.5vh, 76px)); padding-inline: var(--hero-inset); grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; justify-items: start; padding-bottom: 0; color: #fff; pointer-events: none; }
  .hero-top > * { pointer-events: auto; }
  .hero .tag { background: rgba(255, 255, 255, .14); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .hero .tag::before { background: #fff; }
  .hero h1 { margin-top: 16px; font-size: clamp(42px, min(4vw, 7vh), 58px); color: #fff; text-shadow: 0 1px 28px rgba(11, 33, 71, .35); }
  .hero-side { max-width: 33em; gap: 22px; padding-bottom: 0; }
  .hero-lead { color: rgba(255, 255, 255, .9); }
  .hero .btn-primary { background: #fff; color: var(--oxford); }
  .hero .btn-primary:hover { background: var(--sky); }
  .hero .btn-secondary { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .12); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .hero .btn-secondary:hover { background: rgba(255, 255, 255, .22); }
  /* The fade follows the text column (it starts at the page margin), so wide screens get the same cover behind the words */
  .hero-media::after { --edge: calc((100vw - min(var(--max), 100vw - 2 * var(--gutter))) / 2 - var(--frame) + var(--hero-inset));
    background: linear-gradient(90deg, rgba(11, 33, 71, .74) 0, rgba(11, 33, 71, .62) calc(var(--edge) + 300px), rgba(11, 33, 71, .14) calc(var(--edge) + 700px), rgba(11, 33, 71, 0) calc(var(--edge) + 900px)), linear-gradient(0deg, rgba(11, 33, 71, .5) 0%, rgba(11, 33, 71, 0) 46%); }
  /* The caption and pause button move to the top right, where the photos are mostly sky */
  .hero-caption { top: 20px; right: 20px; bottom: auto; left: auto; }
  .mobile-bar { display: none; }
  /* Who we help: intro and principles on the left, tiles on the right, the samples block across the bottom */
  .who-intro { display: contents; }
  .split { grid-template-rows: auto 1fr auto; }
  .split .sec-head { grid-column: 1; grid-row: 1; }
  .creed { grid-column: 1; grid-row: 2; align-self: start; }
  .bento { grid-column: 2; grid-row: 1 / 3; }
  .samples { grid-column: 1 / -1; grid-row: 3; padding: 6px 36px; }
  .plan { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 40px; padding: 28px 0; }
  .plan-doc { zoom: .62; }
  .plan-body > p:not([class]) { max-width: 46em; }
  .js-motion [data-expand] { clip-path: inset(0 calc((100% - min(var(--max), 100% + 2 * var(--frame) - 2 * var(--gutter))) / 2) round var(--r-hero)); }
  .js-motion .hero-caption { translate: calc((100vw - 2 * var(--frame) - min(var(--max), 100vw - 2 * var(--gutter))) / -2) 0; }
}

/* Wide screens: the steps become a sliding accordion. Closed steps are slim tabs with a vertical label. */

/* Tablet and phone */
@media (max-width: 959px) {
  :root { --frame: 10px; --r-hero: 22px; --header-h: 64px; }
  html { scroll-padding-top: 76px; }
  .nav { display: none; }
  .header-cta { margin-left: auto; }
  .brand img { height: 24px; }
  .hero { padding-top: 16px; }
  .hero-top { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-bottom: 20px; }
  .hero h1 { margin-top: 14px; font-size: clamp(32px, 8.6vw, 44px); }
  .hero-side { padding-bottom: 0; }
  .hero-actions .btn { flex: 1 1 auto; }
  .hero-card { height: auto; aspect-ratio: 4 / 5; max-height: 72svh; }
  .slide img { object-position: var(--pos-m, var(--pos, 50% 50%)); transform-origin: var(--origin-m, 50% 45%); }
  .slide video { object-position: var(--pos-m, var(--pos, 50% 50%)); }
  .hero-caption { left: 12px; bottom: 12px; font-size: 13px; }
  .trust { padding-top: 10px; }
  .trust-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .stat { padding: 16px 20px; }
  .stat strong { font-size: 28px; }
  .split, .story { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .creed-list li { grid-template-columns: 100px minmax(0, 1fr); gap: 12px; }
  .samples { padding: 2px 16px; }
  /* Samples on phones: package and title first, then the document at real size as a preview window that fades out,
     then the words. Readable, without the whole page taking up the screen. */
  .plan { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 20px 0; }
  .plan-body { display: contents; }
  .plan h3 { order: -2; font-size: 18px; }
  .plan-pkgs { order: -1; }
  .plan-doc { position: relative; justify-self: stretch; zoom: 1; width: auto; max-height: 240px; overflow: hidden; margin: 2px 8px 10px 0; }
  .plan-doc::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%); }
  .pd-table td { white-space: normal; }
  .bento { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* Tiles on phones: a small square picture on the left, the words on the right, the group's name above the title */
  .tile { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 3px 14px; align-items: start; padding: 12px 14px 14px 12px; }
  .tile-img, .tile-visual { grid-column: 1; grid-row: 1 / span 3; width: 112px; margin: 0; border-radius: 12px; }
  .tile-visual { padding: 6px; overflow: hidden; }
  .tile-visual .vg { zoom: .38; }
  .tile .label { position: static; grid-column: 2; padding: 0; border-radius: 0; background: none; font-size: 12.5px; }
  .tile h3 { grid-column: 2; padding: 0; font-size: 16.5px; }
  .tile p { grid-column: 2; padding: 0; font-size: 14px; }
  .timing { padding: 22px 18px 26px; }
  .timing-head { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .timing-bar { margin: 34px 0 42px; }
  .tick b { font-size: 11.5px; }
  .seg { width: 100%; }
  .seg button { flex: 1; padding: 6px 8px; }
  /* Expert-Check on phones: layers, then the sample report, then the price */
  .ec-logo img { height: 34px; }
  .ec-layers, .ec-key, .ec-report { grid-column: auto; grid-row: auto; }
  .ec { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ec-layers li { padding: 18px 18px 20px; }
  .ec-report { padding: 18px 16px 12px; }
  .er-list li { font-size: 13.5px; }
  .ec-buy { padding: 18px; }
  .ec-buy .btn { width: 100%; }
  /* Pricing on phones: one card per package. Name and price, how many of the 5 steps it covers, then what we do. */
  .for-wide { display: none; }
  .for-narrow { display: inline; }
  .matrix { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .m-head, .m-row { display: none; }
  .m-pack { display: block; padding: 20px 20px 22px; border-radius: var(--r-card); background: var(--sky); }
  .m-name { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 12px; padding: 0; }
  .m-name h3 { font-size: 21px; }
  .m-badge { grid-column: 1 / -1; justify-self: start; margin: 0 0 10px; }
  .m-sub, .m-name .m-up { display: none; }
  .m-up-narrow { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(11, 33, 71, .08); font-size: 14px; }
  .m-price [data-price] { font-size: 20px; }
  .m-cover { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; font-size: 13.5px; color: var(--ink-2); }
  .m-meter { display: inline-grid; grid-template-columns: repeat(5, 14px) 18px 18px; gap: 3px; align-items: center; }
  .m-meter i { height: 5px; border-radius: 3px; background: rgba(11, 33, 71, .14); }
  .m-meter i.on { background: var(--blue); }
  /* Two markers after the five steps: travel documents (Gold and Platinum) and hotel booking (Platinum only) */
  .m-extra { width: 18px; height: 18px; margin-left: 4px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(11, 33, 71, .16); }
  .m-extra + .m-extra { margin-left: 3px; }
  .m-extra.on { box-shadow: none; background: var(--blue) center / 11px no-repeat; }
  .m-trip.on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6a1 1 0 0 1 1 1v3h2.5A2.5 2.5 0 0 1 21 9.5v8a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-8A2.5 2.5 0 0 1 5.5 7H8V4a1 1 0 0 1 1-1zm1 2v2h4V5z' fill='%23fff'/%3E%3C/svg%3E"); }
  .m-hotel.on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 6h2v5h18v6h-1v3h-2v-3H5v3H3v-3H2zm3 2h5v3H5z' fill='%23fff'/%3E%3C/svg%3E"); }
  .m-desc { display: grid; gap: 8px; font-size: 15px; font-weight: 400; }
  .m-desc .m-also { padding-left: 0; font-weight: 500; }
  .m-desc .m-also::before { display: none; }
  .is-featured { background: var(--oxford); color: #fff; }
  .m-pack.is-featured { margin: 0; border-radius: var(--r-card); background: var(--oxford); box-shadow: inset 0 0 0 1.5px rgba(212, 179, 115, .6); }
  .is-featured .m-price { color: rgba(255, 255, 255, .78); }
  .is-featured .m-price [data-price] { color: #fff; }
  .is-featured .m-badge { background: var(--gold-soft); color: var(--oxford); }
  .is-featured .m-cover { color: rgba(255, 255, 255, .78); }
  .is-featured .m-meter i { background: rgba(255, 255, 255, .2); }
  .is-featured .m-meter i.on { background: var(--gold-soft); }
  .is-featured .m-extra { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
  .is-featured .m-extra.on { box-shadow: none; background-color: var(--gold-soft); }
  .is-featured .m-trip.on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6a1 1 0 0 1 1 1v3h2.5A2.5 2.5 0 0 1 21 9.5v8a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-8A2.5 2.5 0 0 1 5.5 7H8V4a1 1 0 0 1 1-1zm1 2v2h4V5z' fill='%230B2147'/%3E%3C/svg%3E"); }
  .is-featured .m-up-narrow { border-top-color: rgba(255, 255, 255, .14); }
  .price-foot .btn { width: 100%; }
  .more-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .addons-list div { flex-direction: column; gap: 4px; }
  .addons-list dd { text-align: left; }
  .band-card { min-height: 460px; }
  .band-inner { padding: 44px 18px; }
  .btns .btn { flex: 1 1 auto; }
  .mq-chip { width: 190px; height: 127px; border-radius: 22px; }
  .mq-chip b { left: 9px; bottom: 9px; padding: 5px 10px; font-size: 13px; }
  .mq-chip small { font-size: 11px; }
  .cta::before { right: -10%; font-size: 300px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* Reduced motion: no smooth scrolling, no drifting photos or rows, no sliding. Content simply appears. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slide.is-active img, .slide.is-leaving img { animation: none; }
  .slide, .seg::before, .btn, .hero-caption [data-caption-text] { transition: none !important; }
  .btn:active { transform: none; }
  .mq-track { animation: none; }
}

/* ---------- Prices: the "คุณมี" cards. Navy = what the client must have, light blue = only tell us,
   white with a blue tick = what we do, grey dash = not in this package. Our rows never outweigh the client's. */
.ic { display: block; flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btn-outline { background: transparent; color: var(--oxford); box-shadow: inset 0 0 0 1.5px var(--oxford); }
.btn-outline:hover { background: var(--oxford); color: #fff; }
.btn-soft { background: var(--sky); color: var(--oxford); }
.btn-soft:hover { background: var(--mist); }
.pr { display: flex; flex-direction: column; gap: 44px; }
.pr h3 { font-weight: 500; }

/* Traveller counter: every price, total and upgrade line follows it */
.pax { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.pax-row { display: flex; align-items: center; gap: 14px 22px; }
.pax-label { font-size: 16px; font-weight: 500; }
.pax-step { display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 999px; background: var(--sky); }
.pax-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: #fff; color: var(--oxford); font: 400 24px/1 var(--font); cursor: pointer; touch-action: manipulation; transition: background-color .2s ease, transform .12s var(--ease-move); }
.pax-btn:hover { background: var(--mist); }
.pax-btn:active { transform: scale(.94); }
.pax-btn:disabled { opacity: .35; cursor: default; transform: none; }
.pax-n { min-width: 76px; text-align: center; font-size: 20px; font-weight: 500; }
.pax-band { padding: 8px 16px; border-radius: 999px; background: var(--gold-tint); box-shadow: inset 0 0 0 1px #E6D3A8; color: #7A5A22; font-size: 15px; font-weight: 500; }
.pax-kids { display: none; }

/* What every package includes */
.base { display: grid; gap: 16px; }
.base h3, .diff-head h3 { font-size: 21px; }
.base-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.base-tile { display: flex; align-items: flex-start; gap: 14px; padding: 20px; border-radius: 18px; background: var(--sky); }
.base-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 999px; background: #fff; }
.base-ic .ec-sym { width: 21px; height: 22px; margin: 0; }
.base-tile strong { display: block; font-size: 17px; font-weight: 500; line-height: 1.45; }
.base-tile .desc { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.base-tile .desc-m { display: none; }

/* The three cards; on wide screens every row lines up across them */
.diff { display: grid; gap: 18px; }
.diff-head { display: grid; gap: 6px; }
.diff-head p { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.pk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.pk { display: flex; flex-direction: column; gap: 18px; padding: 26px 24px 24px; border-radius: 22px; background: var(--soft); }
.pk-gold { background: var(--gold-tint); box-shadow: inset 0 0 0 1.5px var(--gold-soft), 0 22px 44px -28px rgba(11, 33, 71, .45); }
.pk-head { display: none; }
.pk-body { display: contents; }
.pk-name { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; }
.pk-name h3 { font-size: 24px; }
.pk-badge { padding: 4px 12px; border-radius: 999px; background: var(--gold-soft); color: var(--oxford); font-size: 13px; font-weight: 500; line-height: 1.4; }
.pk-you { display: flex; align-items: flex-start; gap: 16px; }
.pk-count { display: flex; flex-direction: column; flex: none; width: 92px; }
.pk-lead { font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.pk-num { font-size: 96px; font-weight: 300; line-height: 1; letter-spacing: -.03em; }
.pk-unit { font-size: 19px; line-height: 1.5; }
.pk-haves { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; min-height: 204px; margin: 0; padding: 0; list-style: none; }
.pk-have { display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 12px; border-radius: 10px; background: var(--oxford); color: #fff; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.pk-have .ic { width: 19px; height: 19px; }
.pk-have.soft { background: var(--sky); color: var(--oxford); box-shadow: inset 0 0 0 1px #CFDBEA; }
.pk-after { padding: 2px 2px 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.pk-rule { height: 1px; background: #E2DACB; }
.pk-we { display: grid; gap: 4px; }
.pk-we-h { font-size: 14.5px; font-weight: 500; color: var(--blue); }
.pk-rows { min-height: 216px; margin: 0; padding: 0; list-style: none; } /* six rows tall, so the blocks below line up */
.pk-row { display: flex; align-items: center; gap: 10px; min-height: 36px; border-bottom: 1px solid #E8E1D5; font-size: 14.5px; line-height: 1.3; white-space: nowrap; }
.pk-row:last-child { border-bottom: 0; }
.pk-gold .pk-row { border-bottom-color: #EEE0C2; }
.pk-row.ok { color: var(--oxford); }
.pk-row .ic { width: 18px; height: 18px; }
.pk-row .pk-tick { color: var(--blue); stroke-width: 2.2; }
.pk-row .lbl { overflow: hidden; text-overflow: ellipsis; }
.pk-day { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px; border-radius: 12px; background: #fff; font-size: 14.5px; white-space: nowrap; }
.pk-day .ic { width: 19px; height: 19px; }
.pk-up { min-height: 44px; font-size: 14px; line-height: 1.55; color: var(--blue); }
.pk-buy { display: flex; flex-direction: column; gap: 14px; margin-top: auto; }
.pk-price { display: grid; gap: 2px; }
.pk-pp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 16px; color: var(--ink-2); }
.pk-pp b { font-size: 38px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; color: var(--oxford); }
.pk-total { font-size: 14.5px; color: #5B6579; }
.pk-sum { display: none; }

/* Expert Check on its own */
.ec-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; padding: 26px 28px; border-radius: 22px; box-shadow: inset 0 0 0 1.5px var(--line); }
.ec-strip-main { display: flex; align-items: flex-start; gap: 16px; flex: 999 1 460px; min-width: 0; }
.ec-strip-ic { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 999px; background: var(--soft); }
.ec-strip-ic .ec-sym { width: 24px; height: 25px; margin: 0; }
.ec-strip h3 { font-size: 20px; }
.ec-strip-main p { margin-top: 6px; font-size: 15px; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }
.ec-strip-main p strong { font-weight: 500; color: var(--oxford); }
.ec-strip-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 20px; flex: 1 1 280px; }
.ec-strip-price { display: flex; align-items: baseline; gap: 8px; font-size: 15px; color: var(--ink-2); }
.ec-strip-price b { font-size: 30px; font-weight: 500; color: var(--oxford); }

/* Personal documents: a box on wide screens, a fold on phones */
.req-box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 48px; padding: 30px 28px; border-radius: 22px; background: var(--soft); }
.req-box h3 { font-size: 20px; }
.req-box p { margin-top: 8px; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.req-box p + p { margin-top: 6px; font-size: 14.5px; }
.req-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 15.5px; line-height: 1.6; }
.req-list li { display: flex; align-items: flex-start; gap: 12px; }
.req-list li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: .72em; border-radius: 50%; background: var(--blue); }
.req-acc { display: none; }
.pr-more { display: grid; gap: 12px; }
.pr-more .more { margin-top: 0; }
.price-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.price-end p { max-width: 760px; font-size: 13.5px; line-height: 1.75; color: #5B6579; }

/* The 3-question helper, in a dialog */
.chooser { width: min(420px, calc(100vw - 24px)); max-height: min(860px, calc(100svh - 24px)); padding: 0; border: 0; border-radius: 24px; background: #fff; color: var(--oxford); box-shadow: 0 40px 90px -30px rgba(11, 33, 71, .55); overflow: auto; overscroll-behavior: contain; }
.chooser::backdrop { background: rgba(11, 33, 71, .5); }
.chooser[open] { animation: ch-in .32s var(--ease-move); }
@keyframes ch-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.ch { display: flex; flex-direction: column; gap: 18px; min-height: min(700px, calc(100svh - 24px)); padding: 18px 20px 24px; font-family: var(--font); }
.ch-top { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.ch-icon-btn { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--oxford); cursor: pointer; }
.ch-icon-btn:hover { background: var(--soft); }
.ch-icon-btn[hidden], .ch-logo[hidden], .ch-step[hidden], .ch-after[hidden], [data-ch-badge][hidden] { display: none; }
.ch-logo { flex: none; width: 36px; height: 36px; }
.ch-title { flex: 1 1 auto; font-size: 16px; font-weight: 500; }
.ch-progress { font-size: 13.5px; color: #5B6579; }
.ch-segs { display: flex; gap: 6px; }
.ch-segs i { flex: 1 1 0; height: 5px; border-radius: 999px; background: var(--line); transition: background-color .3s ease; }
.ch-segs i.on { background: var(--oxford); }
.ch-step { display: flex; flex-direction: column; gap: 22px; flex: 1 1 auto; padding-top: 16px; }
.ch-q { display: grid; gap: 10px; }
.ch-q h2 { font-size: 28px; font-weight: 400; line-height: 1.35; }
.ch-q p { font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.ch-count { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 28px 0; border-radius: 24px; background: var(--soft); }
.ch-count .pax-btn { width: 56px; height: 56px; background: var(--sky); font-size: 28px; }
.ch-count .pax-btn:hover { background: var(--mist); }
.ch-count output { display: flex; flex-direction: column; align-items: center; min-width: 96px; }
.ch-count output b { font-size: 64px; font-weight: 300; line-height: 1; }
.ch-count output span { font-size: 15px; color: var(--ink-2); }
.ch-band { text-align: center; font-size: 15px; font-weight: 500; color: #7A5A22; }
.ch-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.ch-actions .btn { width: 100%; min-height: 52px; }
.ch-link { min-height: 44px; padding: 10px 0; border: 0; background: transparent; color: var(--blue); font: 500 15px/1.4 var(--font); cursor: pointer; }
.ch-link:hover { color: var(--oxford); text-decoration: underline; }
.ch-opts { display: grid; gap: 12px; }
.ch-opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 84px; padding: 16px 18px; border: 0; border-radius: 18px; background: var(--soft); color: var(--oxford); text-align: left; font: inherit; cursor: pointer; transition: background-color .2s ease, transform .15s var(--ease-move); }
.ch-opt:hover { background: var(--sky); }
.ch-opt:active { transform: scale(.98); }
.ch-opt-ic { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 999px; background: #fff; }
.ch-opt-t { display: grid; gap: 2px; flex: 1 1 auto; }
.ch-opt-t b { font-size: 17px; font-weight: 500; }
.ch-opt-t small { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.ch-result { gap: 14px; padding-top: 4px; }
.ch-kicker { font-size: 15px; color: var(--ink-2); }
.ch-name { display: flex; align-items: center; gap: 10px; }
.ch-name h2 { font-size: 38px; font-weight: 500; line-height: 1.1; }
.ch-card { display: grid; gap: 12px; padding: 18px; border-radius: 20px; background: var(--soft); }
.ch-card.is-gold { background: var(--gold-tint); box-shadow: inset 0 0 0 1.5px var(--gold-soft); }
.ch-you { display: flex; align-items: baseline; gap: 8px; font-size: 15px; color: var(--ink-2); }
.ch-you b { font-size: 52px; font-weight: 300; line-height: 1; color: var(--oxford); }
.ch-you span:last-child { font-size: 18px; color: var(--oxford); }
.ch-haves { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ch-haves .pk-have { height: auto; min-height: 36px; padding: 0 12px 0 10px; gap: 7px; font-size: 14px; }
.ch-haves .pk-have .ic { width: 17px; height: 17px; }
.ch-after { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.ch-we { padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.ch-we span:first-child { font-weight: 500; color: var(--blue); }
.ch-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--ink-2); }
.ch-sum b { font-size: 26px; font-weight: 500; color: var(--oxford); }
.ch-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.btn-ghost-line { background: transparent; color: var(--oxford); box-shadow: inset 0 0 0 1.5px #D9D2C5; }
.btn-ghost-line:hover { background: var(--soft); }

@media (max-width: 959px) {
  .pr { gap: 28px; }
  .pax { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 16px 18px; border-radius: 20px; background: var(--sky); }
  .pax-row { justify-content: space-between; gap: 12px; }
  .pax-label { font-size: 15.5px; }
  .pax-step { gap: 4px; padding: 0; background: none; }
  .pax-btn { width: 48px; height: 48px; }
  .pax-n { min-width: 64px; font-size: 19px; }
  .pax-band { padding: 0; background: none; box-shadow: none; font-size: 14px; }
  .pax-kids { display: inline; }
  .base { gap: 12px; }
  .base h3, .diff-head h3 { font-size: 18px; }
  .base-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .base-tile { flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: var(--soft); }
  .base-ic { display: block; width: auto; height: auto; background: none; }
  .base-tile strong { font-size: 15px; }
  .base-tile .desc { display: none; }
  .base-tile .desc-m { display: block; margin-top: 4px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
  .diff { gap: 12px; }
  .diff-head p { font-size: 14px; }
  /* Phones: the cards fold, Gold starts open. A closed card still shows the count and the price. */
  .pk-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pk { display: block; padding: 0; border-radius: 20px; overflow: hidden; }
  .pk-gold { box-shadow: inset 0 0 0 1.5px var(--gold-soft); }
  .pk-name { display: none; }
  .pk-head { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 18px; border: 0; background: transparent; color: var(--oxford); text-align: left; font: inherit; cursor: pointer; touch-action: manipulation; }
  .pk-head-main { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
  .pk-head-name { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 500; }
  .pk-head-name .pk-badge { padding: 3px 10px; font-size: 12.5px; }
  .pk-head-count { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
  .pk-dots { display: flex; gap: 3px; }
  .pk-dots i { display: block; width: 10px; height: 10px; border-radius: 3px; background: var(--oxford); }
  .pk-head-price { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
  .pk-head-price b { font-size: 18px; font-weight: 500; }
  .pk-head-price small { font-size: 12.5px; color: #5B6579; }
  .pk-chev { transition: transform .25s var(--ease-move); }
  .pk.is-open .pk-chev { transform: rotate(180deg); }
  .pk-body { display: none; flex-direction: column; gap: 16px; padding: 0 18px 20px; }
  .pk.is-open .pk-body { display: flex; }
  .pk-you { gap: 14px; }
  .pk-count { width: 76px; }
  .pk-lead { font-size: 14px; }
  .pk-num { font-size: 76px; }
  .pk-unit { font-size: 17px; }
  .pk-haves { min-height: 0; }
  .pk-have { gap: 8px; font-size: 14.5px; }
  .pk-have .ic { width: 18px; height: 18px; }
  .pk-we-h { font-size: 13.5px; }
  .pk-rows { min-height: 0; }
  .pk-row { font-size: 14px; }
  .pk-row .ic { width: 17px; height: 17px; }
  .pk-day { gap: 9px; padding: 0 12px; font-size: 14px; }
  .pk-day .ic { width: 18px; height: 18px; }
  .pk-up { order: 10; min-height: 0; font-size: 13.5px; text-align: center; }
  .pk-up:empty { display: none; }
  .pk-buy { gap: 16px; margin-top: 0; }
  .pk-price { display: none; }
  .pk-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); }
  .pk-sum b { font-size: 22px; font-weight: 500; color: var(--oxford); }
  .pk-buy .btn { width: 100%; min-height: 50px; }
  .ec-strip { flex-direction: column; align-items: stretch; gap: 14px; padding: 20px 18px; border-radius: 20px; }
  .ec-strip-main { flex: none; }
  .ec-strip-ic { display: none; }
  .ec-strip h3 { font-size: 17px; line-height: 1.5; }
  .ec-strip-main p { font-size: 14px; }
  .ec-strip-buy { flex: none; justify-content: space-between; gap: 12px; }
  .ec-strip-buy .btn { flex: 1 1 100%; }
  .req-box { display: none; }
  .req-acc { display: block; padding: 4px 18px; border-radius: 20px; background: var(--soft); }
  .req-acc summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; font-size: 16px; font-weight: 500; cursor: pointer; list-style: none; }
  .req-acc summary::-webkit-details-marker { display: none; }
  .req-acc summary .ic { transition: transform .25s var(--ease-move); }
  .req-acc[open] summary .ic { transform: rotate(180deg); }
  .req-acc .req-list { gap: 8px; padding: 4px 0 10px; font-size: 14.5px; }
  .req-acc p { padding: 0 0 18px; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
  .price-end { flex-direction: column; align-items: stretch; }
  .price-end .btn { order: -1; width: 100%; }
  .price-end p { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .chooser[open] { animation: none; }
}
.countries-note { max-width: 40em; margin-inline: auto; font-size: 15px; line-height: 1.7; color: var(--blue); font-weight: 500; text-wrap: balance; }

/* ---------- One screen per section (Oct 2026): each section's main content fits a laptop screen (about 1440 x 768)
   and a phone screen (about 390 x 844 between the header and the LINE bar) */

/* Who we help: heading and principles side by side, the four tiles in one row underneath */
@media (min-width: 960px) {
  #who .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: clamp(20px, 3.4vh, 32px) 64px; }
  #who .sec-head { grid-column: 1; grid-row: 1; }
  #who .sec-head h2 { font-size: clamp(28px, min(3vw, 5vh), 42px); }
  .creed { grid-column: 2; grid-row: 1; align-self: end; gap: 8px; }
  .creed-quote { font-size: clamp(26px, min(2.4vw, 4.4vh), 36px); }
  .creed-list { margin-top: 4px; }
  .creed-list li { padding: 9px 0; }
  .creed-list b { font-size: 16px; }
  .creed-list span { font-size: 15px; }
  #who .bento { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: 12px; }
  #who .tile { gap: 4px; padding: 8px 8px 16px; }
  #who .tile-img, #who .tile-visual { aspect-ratio: 16 / 10; margin-bottom: 8px; }
  #who .tile-img { object-position: 50% 30%; }
  #who .tile-visual { padding: 30px 12px 8px; overflow: hidden; }
  #who .tile-visual .vg { zoom: .72; }
  #who .tile h3 { padding: 0 8px; font-size: 16.5px; line-height: 1.4; }
  #who .tile p { padding: 0 8px; font-size: 14px; line-height: 1.55; }
  #who .tile .label { top: 16px; left: 16px; }
}

/* The samples: two documents side by side, each with its preview beside the words */
#samples .samples { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; padding: 6px 28px; }
#samples .plan { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 22px; padding: 24px 0; }
#samples .plan + .plan { border-top: 0; }
#samples .plan-doc { zoom: .5; }
#samples .plan h3 { font-size: 19px; }
#samples .plan-body > p:not([class]) { font-size: 14.5px; line-height: 1.65; }
#samples .plan-chips { font-size: 13px; }

@media (max-width: 959px) {
  /* Phone hero: the photo fills the screen between the header and the LINE bar, and the words sit on its top part,
     where the photos are mostly sky, over a blue fade; the people further down stay clear */
  .hero { position: relative; padding: 0 0 10px; }
  .hero-card { height: calc(100svh - var(--header-h) - 68px - 10px); min-height: 520px; max-height: none; aspect-ratio: auto; }
  .hero-top { position: absolute; z-index: 3; top: 22px; left: 0; right: 0; gap: 12px; padding: 0 8px; color: #fff; pointer-events: none; }
  .hero-top > * { pointer-events: auto; }
  .hero .tag { background: rgba(255, 255, 255, .16); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .hero .tag::before { background: #fff; }
  .hero h1 { margin-top: 12px; color: #fff; text-shadow: 0 1px 24px rgba(11, 33, 71, .4); }
  .hero-side { gap: 14px; }
  .hero-lead { font-size: 15px; color: rgba(255, 255, 255, .92); }
  .hero .btn-primary { background: #fff; color: var(--oxford); }
  .hero .btn-secondary { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .14); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .hero-media::after { background: linear-gradient(180deg, rgba(11, 33, 71, .78) 0%, rgba(11, 33, 71, .5) 36%, rgba(11, 33, 71, .08) 58%, rgba(11, 33, 71, 0) 66%), linear-gradient(0deg, rgba(11, 33, 71, .3) 0%, rgba(11, 33, 71, 0) 22%); }
  /* Trust strip: three small columns instead of three stacked cards */
  .trust-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .stat { padding: 12px 10px 14px; border-radius: 14px; }
  .stat .label { font-size: 11.5px; line-height: 1.35; }
  .stat strong { margin-top: 4px; font-size: 21px; }
  .stat .sub { margin-top: 4px; font-size: 11.5px; line-height: 1.45; }
  /* Who we help: no lead-in line, the principles as a 2 x 2 grid, the tiles in a sideways row */
  #who .sec-head .lead, .creed-bridge { display: none; }
  .creed-quote { font-size: 26px; }
  .creed-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
  .creed-list li { display: block; padding: 10px 12px; border-radius: 12px; background: var(--soft); }
  .creed-list li::before, .creed-list li:last-child::after { display: none; }
  .creed-list b { display: block; font-size: 15px; }
  .creed-list span { display: block; font-size: 12.5px; line-height: 1.45; }
  #who .split { gap: 20px; }
  #who .bento { display: flex; gap: 10px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  #who .bento::-webkit-scrollbar { display: none; }
  #who .tile { display: flex; flex-direction: column; flex: 0 0 74%; gap: 4px; padding: 8px 8px 14px; scroll-snap-align: start; }
  #who .tile-img, #who .tile-visual { grid-column: auto; grid-row: auto; width: 100%; aspect-ratio: 4 / 3; margin: 0 0 6px; }
  #who .tile-img { object-position: 50% 30%; }
  #who .tile-visual { padding: 34px 10px 8px; }
  #who .tile-visual .vg { zoom: .7; }
  #who .tile .label { position: absolute; top: 16px; left: 16px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); font-size: 12px; }
  #who .tile h3 { padding: 0 6px; font-size: 15.5px; }
  #who .tile p { padding: 0 6px; font-size: 13px; line-height: 1.5; }
  /* Samples: the two documents swipe sideways, one per screen */
  #samples .samples { display: flex; gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; border: 0; background: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  #samples .samples::-webkit-scrollbar { display: none; }
  #samples .plan { flex: 0 0 86%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px; border: 1px solid rgba(43, 91, 166, .16); border-radius: var(--r-card); background: linear-gradient(160deg, #F1F5FB 0%, #E2EAF6 100%); scroll-snap-align: start; }
  #samples .plan-doc { zoom: 1; max-height: 190px; }
  #samples .plan-body > p:not([class]) { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  #samples .plan-chips { font-size: 12.5px; }
}

/* Who we help, fine-tuned for a laptop screen */
@media (min-width: 960px) {
  #who .split { row-gap: clamp(16px, 2.6vh, 28px); }
  #who .tile-img, #who .tile-visual { aspect-ratio: 16 / 9; }
  #who .tile { padding-bottom: 12px; }
  #samples .plan { padding: 20px 0; }
}

/* Expert Check: the words, the three layers and the price on the left, the sample report on the right */
.ec-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 32px 56px; align-items: center; }
.ec-main { display: grid; gap: 14px; }
/* the earlier two-row placement no longer applies: everything flows in its column */
#check .ec-layers, #check .ec-key, #check .ec-report { grid-column: auto; grid-row: auto; }
#check .sec-head { margin-bottom: 4px; }
#check .sec-head h2 { font-size: clamp(28px, min(2.8vw, 5vh), 40px); }
#check .ec-logo img { height: 36px; }
#check .ec-layers { gap: 8px; }
#check .ec-layers li { display: grid; grid-template-columns: minmax(0, 1fr); padding: 12px 18px 13px; border-radius: 16px; }
#check .ec-layers h3 { font-size: 16.5px; }
#check .ec-layers p { margin-top: 2px; font-size: 14px; line-height: 1.55; }
#check .ec-key { margin: 0; }
#check .ec-buy { margin-top: 2px; padding: 14px 18px; gap: 8px 20px; }
#check .ec-price strong { font-size: 24px; }
#check .ec-terms { flex: 1 1 260px; font-size: 13.5px; line-height: 1.55; }
#check .ec-report { padding: 18px 22px 14px; }
#check .er-list li { padding: 9px 0 9px 22px; }

/* How it works: heading and the timing card in one row, the steps underneath at a height that fits the screen */
.how-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 56px; align-items: end; margin-bottom: clamp(16px, 2.8vh, 28px); }
.how-head .sec-head { margin-bottom: 0; }

/* FAQ: two columns on wide screens, so all ten questions fit one screen */
@media (min-width: 960px) {
  .faq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; max-width: none; column-gap: 12px; }
}

@media (max-width: 959px) {
  .ec-wrap { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #check .sec-head .lead { font-size: 14.5px; }
  #check .ec-layers li { padding: 11px 14px 12px; }
  #check .ec-layers p { font-size: 13px; }
  #check .ec-report { max-height: 300px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
  /* How it works on phones: the timing is in the FAQ */
  .how-head { grid-template-columns: minmax(0, 1fr); }
  .faq-list summary { padding: 11px 0; font-size: 16px; }
}

/* Expert Check, trimmed to fit: each layer's label sits beside its title, the key sits beside the logo */
#check .ec-logo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
#check .ec-logo .ec-key { font-size: 13px; color: var(--muted); }
#check .ec-layers li { grid-template-columns: 9.5em minmax(0, 1fr); column-gap: 14px; align-items: baseline; padding: 11px 18px 12px; }
#check .ec-layers .ec-k { grid-row: 1 / span 2; margin: 0; font-size: 12.5px; }
#check .ec-layers h3, #check .ec-layers p { grid-column: 2; }
#check .ec-buy { flex-wrap: nowrap; padding: 12px 16px; }
#check .ec-terms { font-size: 13px; }
@media (min-width: 960px) {
  .ec-wrap { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 32px 48px; }
}

.cta { padding: clamp(48px, 8vh, 104px) 0; }

/* Prices: heading on the left; the counter and the four services every package includes on the right */
.pr-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px 48px; align-items: end; margin-bottom: clamp(18px, 3vh, 28px); }
.pr-head .sec-head { margin-bottom: 0; }
#prices .sec-head h2 { font-size: clamp(28px, min(2.6vw, 5vh), 38px); }
.pr-side { display: grid; gap: 14px; justify-items: start; }
.pr-side .base { gap: 8px; width: 100%; }
.pr-side .base h3 { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.pr-side .base-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pr-side .base-tile { align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 12px; }
.pr-side .base-ic { width: 32px; height: 32px; }
.pr-side .base-ic .ic { width: 18px; height: 18px; }
.pr-side .base-ic .ec-sym { width: 17px; height: 18px; }
.pr-side .base-tile strong { font-size: 13.5px; line-height: 1.35; }
.pr-side .base-tile .desc, .pr-side .base-tile .desc-m { display: none; }
.pr { gap: 32px; }
.diff { gap: 12px; }
.diff-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.diff-head h3 { font-size: 18px; }
.diff-head p { font-size: 14px; }

@media (min-width: 960px) {
  /* Denser cards: the client's pills and our rows each in two columns, smaller numbers */
  .pk { gap: 10px; padding: 18px 20px; }
  .pk-name { min-height: 26px; }
  .pk-name h3 { font-size: 20px; }
  .pk-badge { padding: 3px 10px; font-size: 12.5px; }
  .pk-you { gap: 12px; }
  .pk-count { width: 62px; }
  .pk-lead { font-size: 13px; }
  .pk-num { font-size: 58px; }
  .pk-unit { font-size: 15px; }
  .pk-haves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 4px; min-height: 98px; }
  .pk-have { height: 30px; gap: 6px; padding: 0 9px; border-radius: 8px; font-size: 13px; }
  .pk-have .ic { width: 15px; height: 15px; }
  .pk-after { grid-column: 1 / -1; font-size: 12.5px; }
  .pk-we { gap: 2px; }
  .pk-we-h { font-size: 13px; }
  .pk-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; align-content: start; min-height: 84px; }
  .pk-row { min-height: 28px; gap: 6px; font-size: 13px; white-space: normal; line-height: 1.25; }
  .pk-row:last-child { border-bottom: 1px solid #E8E1D5; }
  .pk-gold .pk-row:last-child { border-bottom-color: #EEE0C2; }
  .pk-row .ic { width: 14px; height: 14px; }
  .pk-day { min-height: 32px; gap: 8px; padding: 0 12px; font-size: 13.5px; }
  .pk-day .ic { width: 16px; height: 16px; }
  .pk-up { min-height: 36px; font-size: 12.5px; line-height: 1.45; }
  .pk-buy { gap: 10px; }
  .pk-price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
  .pk-pp { font-size: 14px; }
  .pk-pp b { font-size: 30px; }
  .pk-total { font-size: 13px; }
  .pk-buy .btn { min-height: 44px; }
}

@media (max-width: 959px) {
  #check .ec-layers li { grid-template-columns: minmax(0, 1fr); }
  #check .ec-layers .ec-k, #check .ec-layers h3, #check .ec-layers p { grid-column: 1; grid-row: auto; }
  #check .ec-buy { flex-wrap: wrap; }
  .pr-head { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  #prices .sec-head .lead { display: none; }
  .pr-side { gap: 10px; }
  .pr-side .base h3 { font-size: 13.5px; }
  .pr-side .base-tiles { display: flex; flex-wrap: wrap; gap: 6px; }
  .pr-side .base-tile { flex-direction: row; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 999px; background: var(--soft); }
  .pr-side .base-ic { display: grid; width: 22px; height: 22px; background: none; }
  .pr-side .base-ic .ic { width: 16px; height: 16px; }
  .pr-side .base-tile strong { font-size: 12.5px; }
  .pr { gap: 24px; }
  .diff-head { display: grid; gap: 4px; }
  .diff-head h3 { font-size: 17px; }
  .diff-head p { font-size: 13px; }
}


/* Dots under the phone swipe rows: one per card, the current one longer and navy */
.dots { display: none; }
@media (max-width: 959px) {
  #who .bento, #samples .samples { scroll-padding-inline: var(--gutter); }
  .dots { display: flex; justify-content: center; gap: 2px; margin-top: 4px; }
  .dots button { display: grid; place-items: center; width: 22px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
  .dots button::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: rgba(11, 33, 71, .22); transition: width .25s var(--ease-move), background-color .2s ease; }
  .dots button[aria-current="true"]::before { width: 18px; background: var(--oxford); }
}

/* Prices on a laptop: heading row and all three cards inside one screen */
@media (min-width: 960px) {
  #prices { padding-top: clamp(36px, 5.5vh, 72px); }
  .pr-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 40px; margin-bottom: clamp(14px, 2.4vh, 24px); }
  .pr-side .base-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pr-side .base-tile { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 10px 11px; }
  .pr-side .base-ic { width: 28px; height: 28px; }
  .pr-side .base-tile strong { font-size: 13px; }
  /* the cards keep their heading for screen readers; on screen the heading row above already says it */
  .diff-head { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pk { gap: 8px; padding: 16px 18px; }
  .pk-name { min-height: 24px; }
  .pk-name h3 { font-size: 19px; }
  .pk-num { font-size: 52px; }
  .pk-count { width: 58px; }
  .pk-haves { min-height: 92px; gap: 4px; }
  .pk-have { height: 28px; }
  .pk-rule { display: none; }
  .pk-we { padding-top: 8px; border-top: 1px solid #E2DACB; }
  .pk-rows { min-height: 78px; }
  .pk-row { min-height: 26px; }
  .pk-day { min-height: 30px; }
  .pk-up { min-height: 34px; }
  .pk-pp b { font-size: 28px; }
  .pk-buy { gap: 8px; }
  .pk-buy .btn { min-height: 42px; }
  /* Expert Check: a touch tighter so it fits too */
  #check .sec-head h2 { font-size: clamp(28px, min(2.6vw, 4.6vh), 38px); }
  #check .sec-head .lead { font-size: 15px; }
  .ec-main { gap: 12px; }
  #check .ec-layers li { padding: 9px 16px 10px; }
  #check .ec-buy { padding: 10px 16px; }
}

/* Phones: less space around each section, and each section shows its essentials */
@media (max-width: 959px) {
  .section { padding: 40px 0; }
  .sec-head { margin-bottom: 18px; gap: 10px; }
  .sec-head h2 { font-size: clamp(25px, 7vw, 30px); }
  /* who we help: principles as short chips, tiles with a title only */
  .creed-list span { display: none; }
  .creed-list li { padding: 9px 12px; }
  #who .tile-img, #who .tile-visual { aspect-ratio: 3 / 2; }
  #who .tile p { display: none; }
  #who .tile { padding-bottom: 12px; }
  /* samples: no lead, a shorter preview and text */
  #samples .sec-head .lead { display: none; }
  #samples .plan-doc { max-height: 150px; }
  #samples .plan-body > p:not([class]) { -webkit-line-clamp: 3; }
  #samples .plan-chips { gap: 4px; font-size: 12px; }
  #samples .plan-chips span { padding: 1px 8px; }
  /* Expert Check: logo and heading, the three layers as short rows, the price, then a peek at the report */
  #check .sec-head .lead { display: none; }
  #check .ec-layers p { display: none; }
  #check .ec-layers li { padding: 10px 14px; }
  #check .ec-terms { display: none; }
  #check .ec-buy { flex-wrap: nowrap; justify-content: space-between; padding: 12px 14px; }
  #check .ec-buy .btn { width: auto; min-height: 44px; padding: 0 18px; }
  #check .ec-report { max-height: 190px; }
  /* prices: the chips speak for themselves; the cards' heading keeps its line, not its note */
  .pr-side .base h3, .diff-head p { display: none; }
  .pax { padding: 12px 14px 14px; gap: 8px; }
  /* FAQ: tighter rows */
  .faq-list { gap: 8px; }
  .faq-list details { padding: 2px 16px; }
  .faq-list summary { padding: 10px 0; font-size: 15px; }
}
@media (max-width: 959px) {
  /* last trims so prices and Expert Check fit a phone screen */
  .pax-btn { width: 42px; height: 42px; }
  .pk-head { min-height: 0; padding: 14px 16px; }
  .pk-head-main { gap: 4px; }
  #check .ec-report { max-height: 150px; }
  #check .ec-layers li { padding: 8px 14px; }
  #check .ec-buy { padding: 10px 12px 10px 14px; }
  #check .ec-price strong { font-size: 22px; }
  .faq-list { gap: 6px; }
  .faq-list summary { padding: 9px 0; }
}
@media (min-width: 960px) {
  /* the strip beside the counter uses the short labels, icon beside the words, so the cards start higher */
  .pr-side .base-tile { flex-direction: row; align-items: center; gap: 8px; padding: 8px 10px 8px 8px; }
  .pr-side .base-tile .for-wide { display: none; }
  .pr-side .base-tile .for-narrow { display: inline; }
  .pk-up { min-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 960px) {
  /* the price heading on one line, so the heading row is no taller than the counter beside it */
  .pr-head { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  #prices .sec-head h2 { font-size: clamp(26px, min(2.3vw, 4.4vh), 34px); }
  #prices .sec-head .lead { font-size: 15px; }
  .pr-side .base-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  /* heading and counter on one row, the four shared services as one full-width row under them */
  .pr-head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head pax" "base base"; gap: 14px 40px; }
  .pr-head .sec-head { grid-area: head; }
  .pr-side { display: contents; }
  .pr-side .pax { grid-area: pax; align-self: end; }
  .pr-side .base { grid-area: base; display: flex; align-items: center; gap: 16px; }
  .pr-side .base h3 { flex: none; }
  .pr-side .base-tiles { flex: 1 1 auto; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pk { gap: 7px; padding: 14px 18px; }
}

/* The four services every package includes now open each card's list ("เราจัดการให้"); the submission-day line is a
   list item too. Lists differ in length, so the upgrade line and the price sit together at the bottom of each card. */
.pk-row .ec-sym { flex: none; width: 15px; height: 15.6px; margin: 0; }
.pk-up { margin-top: auto; }
.pk-buy { margin-top: 0; }
@media (min-width: 960px) {
  .pr-head { grid-template-areas: "head pax"; }
  .pk-rows { min-height: 0; }
  .pk-row .ec-sym { width: 14px; height: 14.6px; }
}
/* the submission-day line is its own row again; it heads the group at the bottom of each card so the cards line up */
.pk-day { margin-top: auto; }
.pk-up { margin-top: 0; }
@media (min-width: 960px) {
  #prices { padding-top: clamp(24px, 4vh, 72px); }
  .pk { gap: 6px; }
  .pk-day { min-height: 28px; }
}

/* Prices, Oct 2026 (3): the heading asks what you need; the cards' own heading stays for screen readers only */
.diff-head { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Group size: three tiers (1, 2-4, 5+) instead of a counter, so each price band shows at a glance.
   A white thumb slides to the chosen tier. */
.pax { gap: 10px 18px; }
.pax-label { display: grid; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--oxford); }
.pax-label small { font-size: 13px; font-weight: 400; color: var(--muted); }
.pax-tiers { --i: 0; position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px; border-radius: 16px; background: var(--sky); }
.pax-tiers::before { content: ""; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(11, 33, 71, .10), 0 6px 14px -8px rgba(11, 33, 71, .35); transform: translateX(calc(var(--i) * 100%)); }
@media (prefers-reduced-motion: no-preference) {
  .pax-tiers::before { transition: transform .32s cubic-bezier(.25, 1, .5, 1); }
}
.pax-tier { position: relative; display: block; min-width: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pax-tier input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pax-tier span { display: grid; justify-items: center; gap: 1px; min-width: 92px; padding: 7px 12px 8px; border-radius: 12px; text-align: center; transition: transform .12s cubic-bezier(.25, .46, .45, .94); }
.pax-tier b { font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--ink-2); white-space: nowrap; transition: color .2s ease; }
.pax-tier small { font-size: 12.5px; line-height: 1.35; color: var(--muted); white-space: nowrap; transition: color .2s ease; }
.pax-tier input:checked + span b { color: var(--oxford); }
.pax-tier input:checked + span small { color: var(--blue); font-weight: 500; }
.pax-tier input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.pax-tier:active span { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .pax-tier:hover b { color: var(--oxford); }
}
.ch-tiers { padding: 6px; border-radius: 22px; }
.ch-tiers::before { top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 3); border-radius: 16px; }
.ch-tiers .pax-tier span { min-width: 0; gap: 4px; padding: 34px 6px 32px; border-radius: 16px; }
.ch-tiers .pax-tier b { font-size: 26px; font-weight: 400; }
.ch-tiers .pax-tier small { font-size: 13.5px; }

/* The submission-day line is a speech bubble pointing at the LINE button */
.pk-up { margin-top: auto; }
.pk-day { position: relative; align-self: center; display: inline-flex; align-items: center; gap: 8px; min-height: 0; margin: 0 0 2px; padding: 6px 14px 7px; border-radius: 999px; background: #fff; color: var(--oxford); font-size: 13.5px; line-height: 1.4; white-space: nowrap; filter: drop-shadow(0 1px 1px rgba(11, 33, 71, .08)) drop-shadow(0 5px 9px rgba(11, 33, 71, .10)); }
.pk-day::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 0 0 3px 0; background: #fff; transform: rotate(45deg); }
.pk-day .ic { width: 16px; height: 16px; color: var(--blue); }
.pk-gold .pk-day .ic { color: var(--gold); }

@media (max-width: 959px) {
  .pr-side .pax { justify-self: stretch; }
  .pax { padding: 0; border-radius: 0; background: none; gap: 8px; }
  .pax-label { display: flex; align-items: baseline; gap: 8px; }
  .pax-tier span { min-width: 0; padding: 8px 6px 9px; }
  .pk-day { margin: 2px 0 -6px; font-size: 14px; }
}
.ch-q p { text-wrap: balance; }

/* Cards v6: Expert Check is a seal on the list it checks, not a list item; the counts read as sentences */
.pk-we-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
.pk-we-h b { font-weight: 600; }
.pk-ec { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--sky); color: var(--oxford); font-size: 12.5px; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.pk-ec .ec-sym { width: 14px; height: 14.6px; margin: 0; }
/* "Free" inside the Expert Check pill: the Gold badge colours (user, 10 Oct 2026) */
.pk-free { font-style: normal; margin-left: 2px; padding: 0 7px; border-radius: 999px; background: var(--gold-soft); color: var(--oxford); font-size: 11.5px; font-weight: 600; line-height: 1.55; }
.pk-count { width: auto; }
.pk-lead { white-space: nowrap; }
/* the bubble above the LINE button: how you get your documents, then the submission day */
.pk-day { display: grid; justify-items: start; row-gap: 4px; margin: 0 0 2px; padding: 8px 16px 9px; border-radius: 16px; list-style: none; }
.pk-day li { display: flex; align-items: center; gap: 8px; }

/* Cards v7: what we do for you leads. "คุณมีเอกสาร" is a quiet line of outline chips; "เราจัดการให้" is a white panel
   with the count, the Expert Check seal and bigger rows with filled ticks. */
.pk-you { display: grid; gap: 6px; }
.pk-count { display: flex; align-items: baseline; gap: 5px; width: auto; }
.pk-lead, .pk-unit { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.pk-num { font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--oxford); }
.pk-haves { display: flex; flex-flow: row wrap; gap: 4px; min-height: 0; }
.pk-have { height: 26px; gap: 5px; padding: 0 10px 0 8px; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px #D9D1C2; color: var(--ink-2); font-size: 12.5px; font-weight: 400; }
.pk-have .ic { width: 14px; height: 14px; color: var(--muted); }
.pk-have.soft { background: transparent; box-shadow: none; outline: 1px dashed #C9C1B2; outline-offset: -1px; color: var(--muted); }
.pk-rule { display: none; }
.pk-we { gap: 6px; padding: 12px 14px 10px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(11, 33, 71, .05), 0 10px 22px -16px rgba(11, 33, 71, .30); }
.pk-we-h { font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--oxford); }
.pk-we-h b { font-size: 20px; font-weight: 600; color: var(--blue); }
.pk-rows { min-height: 0; }
.pk .pk-row, .pk .pk-row:last-child { min-height: 30px; gap: 8px; border-bottom: 0; color: var(--oxford); font-size: 14px; }
.pk-row .pk-tick, .pk-head-count .pk-tick { width: 18px; height: 18px; padding: 3.5px; border-radius: 50%; background: var(--blue); color: #fff; stroke-width: 3; }
.pk-head-count { gap: 8px; }
@media (max-width: 959px) {
  .pk-we { padding: 12px 14px; }
  .pk .pk-row, .pk .pk-row:last-child { min-height: 34px; font-size: 14.5px; }
  .pk-have { height: 28px; font-size: 13px; }
  .pk-head-count .pk-tick { width: 17px; height: 17px; }
}

/* Cards v8: how you get the documents and the submission day sit at the foot of the "we handle" panel, above the
   price, and count towards its total. The panel fills the card so these strips and the prices line up across cards. */
.pk-count { flex-direction: row; }
.pk-we-top { flex-wrap: wrap; row-gap: 6px; }
.pk-we-h { white-space: nowrap; }
.pk-we { display: flex; flex-direction: column; flex: 1 1 auto; }
.pk-serve { display: grid; gap: 6px; margin: auto -14px -10px; padding: 10px 14px 11px; border-radius: 0 0 16px 16px; background: var(--sky); list-style: none; }
.pk-we .pk-rows { margin-bottom: 4px; } /* with the panel's 6px gap: at least 10px above the strip */
.pk-serve li { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--oxford); }
.pk-serve .ic { width: 18px; height: 18px; color: var(--blue); }
@media (min-width: 960px) {
  .pk-rows { align-items: start; }
  .pk .pk-row, .pk .pk-row:last-child { align-items: flex-start; padding: 4px 0; min-height: 0; }
  .pk-row .pk-tick { margin-top: -1px; }
}
@media (max-width: 959px) {
  .pk-serve { margin: 8px -14px -12px; padding: 12px 14px; }
  .pk-serve li { font-size: 14.5px; }
}

/* Group prices show the regular one-person price struck through (a price we really charge) */
.pk-was { color: var(--muted); font-weight: 400; text-decoration: line-through; text-decoration-thickness: 1.5px; white-space: nowrap; }
.pk-was[hidden] { display: none; }
.pk-pp .pk-was { font-size: 16px; }
.pk-head-price .pk-was { margin-right: 4px; }
.pk-sum-p { display: inline-flex; align-items: baseline; gap: 8px; }
.pk-sum-p .pk-was { font-size: 15px; }
.ec-strip-price .pk-was { margin-right: 8px; font-size: 15px; }

/* Expert Check as a package card: its logo stands in for the name; the parts match Standard / Gold / Platinum */
.pk-logo { display: block; width: auto; height: 30px; }
.pk-sub { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.pk-sub-m { display: none; }
.pk-not { font-size: 13px; line-height: 1.5; color: var(--muted); }
@media (min-width: 960px) {
  .pk-check { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.45fr) minmax(0, .85fr); grid-template-areas: "name we buy" "you we buy" "up we buy"; grid-template-rows: auto auto 1fr; align-items: start; gap: 6px 28px; margin-top: 8px; padding: 20px 22px; }
  .pk-check .pk-name { grid-area: name; display: grid; justify-items: start; gap: 6px; min-height: 0; }
  .pk-check .pk-you { grid-area: you; gap: 2px; }
  .pk-check .pk-we { grid-area: we; align-self: stretch; }
  .pk-check .pk-up { grid-area: up; align-self: end; white-space: normal; overflow: visible; }
  .pk-check .pk-buy { grid-area: buy; align-self: center; }
  .pk-check .pk-rule { display: none; }
}
@media (max-width: 959px) {
  .pk-head-name .pk-logo { height: 22px; }
  .pk-sub-m { display: block; }
}

/* A step label can run to two lines (step 02); the lines stay close but don't touch */

/* Expert Check leads (9 Oct 2026): the hero's first button, what the counter can't fix, the refusal cost beside the price,
   and a report finding that shows its evidence, a do-it-yourself fix and our offer */
.hero-ec .ec-sym { width: 1.05em; height: 1.1em; margin-right: .1em; }
.hero-note { max-width: 33em; margin-top: -6px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.hero .hero-note { color: rgba(255, 255, 255, .82); }
.ec-counter { display: grid; margin: 2px 0 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ec-counter div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); column-gap: 14px; align-items: baseline; padding: 8px 16px; }
.ec-counter div + div { border-top: 1px solid var(--line); }
.ec-counter dt { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.ec-counter dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.ec-counter .is-no { background: var(--sky); }
.ec-counter .is-no dt { color: var(--blue); }
.ec-counter .is-no dd { font-weight: 500; color: var(--oxford); }
#check .ec-buy { flex-wrap: wrap; align-items: center; gap: 8px 20px; }
#check .ec-buy .btn { margin-left: auto; }
#check .ec-terms { flex: 1 1 100%; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.ec-vs { position: relative; display: grid; gap: 0; padding-left: 22px; border-left: 1px solid var(--line); }
.ec-vs-or { position: absolute; left: -12px; top: 50%; display: grid; place-items: center; width: 23px; height: 23px; margin-top: -11.5px; border: 1px solid var(--line); border-radius: 50%; background: #fff; font-size: 11px; font-weight: 500; line-height: 1; color: var(--muted); }
.ec-vs-k { font-size: 13px; font-weight: 500; color: var(--muted); }
.ec-vs-v { font-size: 15px; color: var(--muted); }
.ec-vs-v strong { font-size: 24px; font-weight: 500; color: var(--ink-2); }
.er-list .er-feature { margin: 0 -10px; padding-left: 32px; padding-right: 10px; border-radius: 10px; border-top-color: transparent; background: rgba(214, 156, 30, .07); }
.er-list .er-feature::before { left: 12px; }
.er-list .er-feature + li { border-top-color: transparent; }
.er-list .er-why { color: var(--muted); }
.er-offer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 7px; padding: 6px 10px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px rgba(43, 91, 166, .22); font-size: 12.5px; line-height: 1.45; color: var(--blue); text-decoration: none; transition: background-color .2s; }
.er-offer:hover { background: var(--sky); }
.er-list .er-offer b { display: inline; font-size: 12px; font-weight: 600; color: var(--oxford); }
@media (max-width: 959px) {
  .d-only { display: none; }
  .hero-note { display: none; }
  .ec-counter div { grid-template-columns: minmax(0, 1fr); padding: 7px 12px; }
  .ec-counter dd { font-size: 13px; }
  #check .ec-buy { flex-wrap: nowrap; gap: 6px 12px; }
  .ec-vs { padding-left: 16px; }
  .ec-vs-k { font-size: 11.5px; }
  .ec-vs-v { font-size: 13px; }
  .ec-vs-v strong { font-size: 19px; }
  #check .ec-buy .btn { padding: 0 14px; }
}
/* The price strip sits under the sample report, so the words and layers keep the left column to one screen */
.ec-side { display: grid; gap: 14px; align-content: center; min-width: 0; }
#check .ec-side .ec-buy { margin-top: 0; }
#check .ec-counter { justify-self: stretch; }
@media (max-width: 959px) {
  #check .ec-buy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; padding: 12px 14px; }
  #check .ec-buy .btn { grid-column: 1 / -1; width: 100%; margin: 0; }
  .ec-price, .ec-vs { white-space: nowrap; }
}
#check .er-list .er-feature { margin: 2px -10px; padding: 9px 10px 10px 32px; }
#check .er-list li:last-child { padding-bottom: 2px; }
@media (max-width: 959px) {
  /* phones: the key beside the logo, each layer on one line */
  #check .ec-logo { flex-wrap: nowrap; gap: 10px; }
  #check .ec-logo img { height: 26px; }
  #check .ec-logo .ec-key { font-size: 12px; white-space: nowrap; }
  #check .ec-layers li { grid-template-columns: 7.4em minmax(0, 1fr); column-gap: 10px; align-items: baseline; padding: 9px 14px; }
  #check .ec-layers .ec-k { grid-row: auto; margin: 0; font-size: 11.5px; }
  #check .ec-layers h3 { grid-column: 2; font-size: 15px; }
  #check .ec-report { padding: 14px 14px 10px; max-height: 170px; }
  #check .er-head { flex-wrap: nowrap; }
  #check .er-head b { font-size: 11px; letter-spacing: .1em; white-space: nowrap; }
  #check .er-head span { font-size: 11px; white-space: nowrap; }
}
.ec-side { gap: 10px; }
@media (max-width: 959px) {
  /* phones: the report shows its counts and the one finding that carries the offer, in full */
  #check .ec-report { max-height: none; -webkit-mask-image: none; mask-image: none; }
  #check .er-list .er-red, #check .er-list .er-green { display: none; }
  #check .er-list .er-feature { margin: 0 -6px; padding: 9px 8px 10px 28px; }
  #check .er-list .er-feature::before { left: 10px; }
  #check .er-case { font-size: 13.5px; }
  #check .ec-layers li { grid-template-columns: 6.6em minmax(0, 1fr); }
}

/* A slimmer header (user, 9 Oct 2026): it takes less of the screen, and sections park right under it */
:root { --header-h: 60px; }
html { scroll-padding-top: var(--header-h); }
.brand img { height: 24px; }
.header-cta.btn-sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
@media (max-height: 720px) and (min-width: 960px) {
  :root { --header-h: 54px; }
  .brand img { height: 22px; }
  .header-cta.btn-sm { min-height: 36px; }
}
@media (max-width: 959px) {
  :root { --header-h: 54px; }
  html { scroll-padding-top: var(--header-h); }
  .brand img { height: 21px; }
  .header-cta.btn-sm { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
}
/* Expert Check, lighter (user: "too overloaded"): layer titles only, a shorter report, no terms row */
#check .ec-layers li { padding-top: 12px; padding-bottom: 12px; }
#check .ec-layers h3 { align-self: center; }
#check .ec-layers .ec-k { grid-row: auto; align-self: center; }
#check .ec-main { gap: 16px; }
@media (min-width: 960px) {
  #check { display: grid; align-content: center; min-height: calc(100svh - var(--header-h)); }
}
@media (max-width: 959px) {
  #check { padding: 24px 0 26px; }
  #check .ec-main { gap: 12px; }
  #check .sec-head { gap: 8px; }
  #check .ec-layers { gap: 6px; }
  #check .ec-layers li { padding: 8px 14px; }
  #check .er-case { display: none; }
  #check .er-sum { margin: 8px 0 8px; }
  #check .ec-report { padding: 12px 14px 8px; }
  #check .ec-counter div { padding: 6px 12px; }
}

/* Samples lead: "จากประสบการณ์กว่า 15 ปี …" with the Expert Check mark; it carries the experience line, so phones show it too */
.ec-name { font-weight: 500; color: var(--oxford); }
@media (max-width: 959px) {
  #samples .sec-head .lead { display: block; font-size: 14.5px; line-height: 1.6; }
}
#samples .sec-head .lead { text-wrap: balance; }

/* Prices: the supporting blocks (personal documents, details, add-ons) sit on a lighter fill with a hairline,
   so the four package cards stay the main areas */
#prices .req-box, #prices .req-acc, #prices .more { background: #fff; box-shadow: inset 0 0 0 1px #E6E0D6; }

/* Group prices need one appointment day and one shared plan; the condition sits right under the picker.
   The picker is a grid, so the note can't widen it or push it into a second column. */
.pax { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 18px; row-gap: 6px; }
.pax-note { grid-column: 1 / -1; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); text-align: right; }
.pax-note b { font-weight: 500; color: var(--ink-2); }
@media (max-width: 959px) {
  .pax { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .pax-note { text-align: left; }
}

/* Expert Check: what a refusal costs, beside the price (the report's red, kept quiet) */
.pk-risk { display: grid; gap: 2px; padding: 10px 14px 11px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #EFD8D3; }
.pk-risk-h { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: #A3342A; }
.pk-risk-h::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #C44034; }
.pk-risk-v { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.pk-risk-v b { font-size: 18px; font-weight: 600; color: var(--oxford); }
.pk-risk-n { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.pk-risk-n::before { content: "• "; color: #C44034; }
.pk-risk-s { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.pk-risk-s::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: #C44034; }
.pk-risk-s > b { font-weight: 600; color: var(--oxford); }

/* Expert Check: the reason to check, said positively (a well-spent fee), beside the price */
.pk-why { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px; margin: 0; padding: 10px 14px 11px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #D9E4F2; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.pk-why .ec-sym { width: 16px; height: 16.6px; margin: 3px 0 0; }
.pk-why b { font-weight: 600; color: var(--oxford); }

/* Calmer reveals (Oct 2026): they start just before content scrolls into view, travel less and finish sooner, so
   nothing is still moving once the reader stops scrolling */
[data-reveal] { --delay: calc(var(--d, 0s) + var(--i, 0) * .05s); }
.js-motion [data-reveal=""],
.js-motion [data-reveal="timing"] { transform: translate3d(0, 14px, 0); }
.js-motion [data-reveal=""].is-in,
.js-motion [data-reveal="timing"].is-in { transition: opacity .5s var(--ease-out) var(--delay), transform .6s var(--ease-out) var(--delay); }
.js-motion [data-reveal="lines"].is-in .ln > span { transition: transform .6s var(--ease-out), clip-path .6s var(--ease-out); transition-delay: calc(var(--delay) + var(--l, 0) * .08s); }
.js-motion [data-reveal="rule"].is-in::before,
.js-motion [data-reveal="rule"].is-in:last-child::after { transition: transform .7s var(--ease-move) var(--delay); }
.js-motion [data-reveal="rule"].is-in > * { transition: opacity .45s var(--ease-out) calc(var(--delay) + .1s), transform .55s var(--ease-out) calc(var(--delay) + .1s); }

/* Expert Check price strip: why it's worth it, said positively like the card, instead of a comparison with a refusal */
.ec-vs.ec-why { flex: 1 1 0; min-width: 0; white-space: normal; } /* shares the row with the button, wrapping if it must */
.ec-why-k { font-size: 13px; font-weight: 500; color: var(--blue); }
.ec-why-v { font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--oxford); }
@media (max-width: 959px) {
  .ec-why-k { font-size: 12px; }
  .ec-why-v { font-size: 13.5px; }
}

/* Group-size hint: a navy bubble that points at the picker once, nudges twice, then fades.
   Wide screens: in the space left of the picker, pointing right. Phones: under the buttons, pointing up. */
.pax { position: relative; }
.pax-hint { position: absolute; z-index: 5; right: calc(100% + 14px); top: calc(var(--tiers-top, 0px) + var(--tiers-h, 54px) / 2); width: max-content; max-width: min(240px, 18vw); margin: 0; padding: 9px 14px 10px; border-radius: 14px; background: var(--oxford); color: #fff; font-size: 13.5px; font-weight: 500; line-height: 1.45; box-shadow: 0 12px 26px -12px rgba(11, 33, 71, .55); cursor: pointer; opacity: 0; transform: translate(8px, -50%) scale(.96); transform-origin: right center; transition: opacity .15s ease, transform .15s ease; }
.pax-hint::after { content: ""; position: absolute; top: 50%; right: -5px; width: 10px; height: 10px; margin-top: -5px; border-radius: 0 2px 0 0; background: var(--oxford); transform: rotate(45deg); }
.pax-hint.is-on { opacity: 1; transform: translate(0, -50%) scale(1); transition: opacity .22s cubic-bezier(.22, 1, .36, 1), transform .32s cubic-bezier(.22, 1, .36, 1); }
@keyframes pax-hint-x { 0%, 100% { translate: 0 0; } 50% { translate: -5px 0; } }
@keyframes pax-hint-y { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }
@media (prefers-reduced-motion: no-preference) {
  .pax-hint.is-on { animation: pax-hint-x 1s cubic-bezier(.45, 0, .55, 1) .45s 2; }
}
@media (max-width: 959px) {
  .pax-hint { right: auto; left: 50%; top: calc(var(--tiers-top, 0px) + var(--tiers-h, 64px) + 12px); max-width: calc(100% - 24px); text-align: center; transform: translate(-50%, -6px) scale(.96); transform-origin: center top; }
  .pax-hint::after { top: -5px; right: auto; left: 50%; margin: 0 0 0 -5px; border-radius: 2px 0 0 0; }
  .pax-hint.is-on { transform: translate(-50%, 0) scale(1); }
}
@media (max-width: 959px) and (prefers-reduced-motion: no-preference) {
  .pax-hint.is-on { animation-name: pax-hint-y; }
}
/* the hint in the brighter brand blue, so it reads as a hint rather than another navy button */
.pax-hint, .pax-hint::after { background: var(--blue); }
.pax-hint { box-shadow: 0 12px 26px -12px rgba(43, 91, 166, .6); }

/* Trust strip on phones: the big figures scale with the screen so "ถูกต้อง ไม่เคยพลาด" fits small phones too */
@media (max-width: 959px) {
  .stat strong { font-size: clamp(16px, 5vw, 21px); }
}

/* Trust strip v2 (Oct 2026): on phones the three columns are narrow, so labels and figures are sized to fit them down
   to 360px (figures stay on one line); on wide screens a long sub-line breaks between phrases, not inside one */
@media (max-width: 959px) {
  .stat { padding-left: 8px; padding-right: 8px; }
  .stat .label { font-size: clamp(10px, 2.9vw, 11.5px); }
  .stat strong { white-space: nowrap; font-size: clamp(15px, 4.6vw, 21px); }
}
@media (min-width: 960px) {
  .nw-d { white-space: nowrap; }
}

/* The LINE handle in brand colours: "@" recedes in grey, "marco" and "co" in Oxford, and the "n" in terracotta, standing
   in for the logo's "&" (the only other place terracotta is used) */
.handle { font-weight: 600; letter-spacing: .01em; white-space: nowrap; text-decoration: none; }
.handle .h-at, .handle .h-com { color: var(--muted); } /* "@" and ".com" stay quiet so marco·n·co reads first */
.handle .h-marco, .handle .h-co { color: var(--oxford); }
.handle .h-n { color: var(--terra); }
@media (hover: hover) and (pointer: fine) {
  .handle:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
}
/* the contact QR adds the OA: white behind the code so phones scan it reliably */
.qr { padding: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.qr img { display: block; width: 100%; height: auto; }
/* under the contact QR the handle is what people type, so it reads larger there */
.cta .handle { font-size: 18px; }

/* Under each price, the bottom of the group ladder ("ไป 5 คนขึ้นไป เหลือ ฿…"), until 5+ is picked */
.pk-from { margin: -4px 0 0; font-size: 13px; line-height: 1.45; color: var(--blue); }
.pk-from b { font-weight: 600; }
.pk-from[hidden] { display: none; }
.pax-hint b { font-weight: 700; }
@media (max-width: 959px) {
  .pk-from { margin-top: -10px; font-size: 13.5px; text-align: right; }
}

/* Story: the founder's own trip photo behind the words, faded to navy where the text sits (like the hero) */
.story-card { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; min-height: clamp(520px, 74vh, 700px); padding: clamp(32px, 5vw, 64px); border-radius: var(--r-hero); background: var(--oxford); color: #fff; }
.story-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; }
.story-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 33, 71, .9) 0%, rgba(11, 33, 71, .8) 32%, rgba(11, 33, 71, .28) 58%, rgba(11, 33, 71, 0) 76%); }
.story-in { max-width: 540px; }
.story-card .sec-head { margin-bottom: 18px; }
.story-card .tag { background: rgba(255, 255, 255, .14); color: #fff; }
.story-card h2 { color: #fff; }
.story-card .story-lede { color: rgba(255, 255, 255, .9); }
.story-card .story-full summary { color: #fff; }
.story-card .story-full .full { color: rgba(255, 255, 255, .88); }
.story-card .signature { color: #fff; }
.story-cap { position: absolute; right: 16px; bottom: 14px; margin: 0; padding: 5px 12px; border-radius: 999px; background: rgba(11, 33, 71, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 12.5px; }
@media (max-width: 959px) {
  .story-card { align-items: start; min-height: 640px; padding: 28px 20px 64px; border-radius: 22px; }
  .story-bg { object-position: 62% 100%; }
  .story-card::before { background: linear-gradient(180deg, rgba(11, 33, 71, .92) 0%, rgba(11, 33, 71, .84) 46%, rgba(11, 33, 71, .22) 72%, rgba(11, 33, 71, 0) 86%); }
  /* the full story is long: once it's open, the whole card darkens so every line stays readable */
  .story-card:has(.story-full[open])::before { background: rgba(11, 33, 71, .88); }
  .story-cap { right: 12px; bottom: 12px; }
}

/* Story card: white text on navy reads heavier than the same weight on white, so the body text is lighter here,
   smoothed for light-on-dark, and a little smaller on phones */
.story-card { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.story-card .story-lede, .story-card .story-full .full { font-weight: 300; }
.story-card .story-full summary { font-weight: 400; }
@media (max-width: 959px) {
  .story-card .story-lede, .story-card .story-full .full { font-size: 15.5px; line-height: 1.7; }
  .story-card .story-full summary { font-size: 15.5px; }
}

/* Story card: the second line under the heading, the founder's career switch, lighter and a step down in size */
.story-sub { margin: -4px 0 16px; font-size: clamp(17px, 1.5vw, 21px); font-weight: 300; line-height: 1.5; color: rgba(255, 255, 255, .95); text-wrap: balance; }
@media (max-width: 959px) {
  .story-sub { margin: -2px 0 12px; font-size: clamp(14.5px, 4.1vw, 16.5px); }
}

/* Legal pages (privacy, terms): a plain reading page in the site's type and colours */
.doc-body { background: #fff; }
.doc-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--gutter); border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.doc-header img { display: block; width: auto; height: 26px; }
.doc { max-width: 760px; margin: 0 auto; padding: 36px var(--gutter) 88px; font-size: 16px; line-height: 1.8; color: var(--ink-2); }
.doc h1 { margin: 0; font-size: clamp(30px, 4vw, 40px); font-weight: 300; line-height: 1.25; color: var(--oxford); }
.doc .meta { margin: 8px 0 24px; font-size: 14px; color: var(--muted); }
.doc h2 { margin: 36px 0 8px; font-size: 20px; font-weight: 500; line-height: 1.45; color: var(--oxford); }
.doc h3 { margin: 22px 0 4px; font-size: 17px; font-weight: 500; color: var(--oxford); }
.doc p { margin: 10px 0; }
.doc ul { margin: 8px 0; padding-left: 1.25em; }
.doc li { margin: 6px 0; }
.doc li::marker { color: var(--blue); }
.doc b { font-weight: 500; color: var(--oxford); }
.doc a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.doc mark.draft { padding: 0 3px; border-radius: 3px; background: #FFF1B8; color: inherit; }
.draft-note { margin: 0 0 28px; padding: 12px 16px; border-radius: 12px; background: #FFF8DC; box-shadow: inset 0 0 0 1px #F1D98A; font-size: 14px; line-height: 1.6; color: #6B5310; }
.draft-note b { color: #5A4508; }
.doc-back { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; }
@media (max-width: 959px) {
  .doc { padding-top: 24px; font-size: 15.5px; }
  .doc h2 { font-size: 18.5px; }
}

/* Footer with two columns (logo, contact) while the legal pages are paused */
@media (min-width: 960px) {
  .footer-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/* Two ways we help, named by the verb (user, 10 Oct 2026): ให้เรา "ตรวจ" (Expert Check, blue) and ให้เรา "เตรียม" (the packages, gold).
   The verb is the one word marked, on the home page and on the guides. */
mark.g-hl { padding: 0 .06em; border-radius: 2px; background: linear-gradient(180deg, transparent 56%, var(--hl) 56%); color: inherit; }
mark.g-hl.is-check { --hl: #C6D9F2; }
mark.g-hl.is-prep { --hl: #EFD9A6; }
/* on the hero's glass button the text is white, so the mark becomes a gold bar under the word */
.hero .btn-secondary mark.g-hl { background: none; box-shadow: inset 0 -.2em 0 var(--gold-soft); border-radius: 0; }
/* Prices: a label over each group, so the choice reads before the cards */
.path-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; font-size: 20px; font-weight: 500; line-height: 1.4; color: var(--oxford); }
.path-k b { font-weight: 500; }
.path-k span { font-size: 14px; font-weight: 400; color: var(--ink-2); }
.pk-grid + .path-k { margin-top: 18px; }
@media (max-width: 959px) {
  .path-k { font-size: 18px; }
  .path-k span { font-size: 13px; }
}

/* Verified badge: the blue scalloped tick people know from social profiles. It marks work done by our experts
   (the Expert Check's third layer, Refusal Rescue's "โดย Lead Visa Expert"). */
.vbadge { flex: none; width: 18px; height: 18px; color: #1877F2; }
.ec-k .vbadge { width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; }
@media (max-width: 959px) {
  /* phones: the label column is wide enough for "ชั้นที่ 3 · ผู้เชี่ยวชาญ" plus its badge on one line */
  #check .ec-layers li { grid-template-columns: 132px minmax(0, 1fr); }
}

/* Gold: what people think when they look at three options (user, 10 Oct 2026): "คุ้มสุด สะดวกสุด" in a plain navy pill on the
   card's top border. Always gently alive: a soft gold glow rises and fades round it (user: "glowing up and down").
   Still for anyone who asks for reduced motion. */
@keyframes pk-glow {
  0%, 100% { border-color: var(--gold-soft); box-shadow: 0 10px 20px -12px rgba(11, 33, 71, .7), 0 0 0 0 rgba(239, 209, 142, 0); }
  50% { border-color: #F3DDA6; box-shadow: 0 10px 20px -12px rgba(11, 33, 71, .7), 0 0 18px 4px rgba(232, 196, 120, .72); }
}
@keyframes pk-glow-text { 0%, 100% { text-shadow: 0 0 0 rgba(255, 236, 190, 0); } 50% { text-shadow: 0 0 8px rgba(255, 236, 190, .7); } }
.pk-gold { position: relative; }
.pk-think { position: absolute; top: -15px; left: 50%; z-index: 2; margin: 0; padding: 4px 15px 5px; border: 1.5px solid var(--gold-soft); border-radius: 999px; background: var(--oxford); white-space: nowrap;
  transform: translateX(-50%); box-shadow: 0 10px 20px -12px rgba(11, 33, 71, .7); animation: pk-glow 2.8s ease-in-out infinite; }
.pk-think span { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: #fff; animation: pk-glow-text 2.8s ease-in-out infinite; }
@media (max-width: 959px) {
  /* phones: the same pill on the card's top border, over the name */
  .pk-gold { overflow: visible; margin-top: 6px; }
  .pk-think { top: -13px; left: 16px; transform: none; padding: 3px 12px 4px; }
  .pk-think span { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .pk-think, .pk-think span { animation: none !important; } }

/* Footer: a third column with the guides (every page links them, so search engines and readers can find them) */
@media (min-width: 960px) { .footer-grid.has-guides { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); } }
.faq-list p a { color: var(--blue); font-weight: 500; text-underline-offset: 3px; }

/* Price cards line up row by row across the three packages (pricing handoff, 11 Oct 2026). Every card lists the same
   6 rows; where a package doesn't include an item, a grey dash and a short note. On wide screens the cards share one set
   of row heights (CSS subgrid), so names, client blocks, rows, upgrade lines and prices sit level on every page that
   carries the cards (home, guides, Expert Check page). */
.pk .pk-row.no { color: var(--muted); }
.pk-row .pk-dash { flex: none; width: 18px; height: 18px; padding: 4px; border-radius: 50%; background: #ECE7DE; color: #A39B8C; stroke-width: 3; }
.pk-row .pk-note { margin-left: auto; padding-left: 10px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.pk-after { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
@media (min-width: 960px) {
  .pk-grid > .pk:not(.pk-check) { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 6px; }
  .pk:not(.pk-check) .pk-you { align-content: start; }
  .pk:not(.pk-check) .pk-rows { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .pk:not(.pk-check) .pk-row { min-height: 26px; }
  .pk:not(.pk-check) .pk-row .lbl { white-space: nowrap; }
}

/* The two lines in each package's blue strip count toward "เราช่วยคุณ N รายการ", so they carry the same blue tick as the
   rows above (user picked option B, 11 Oct 2026). The Expert Check card's strip keeps its own icons: it isn't counted. */
.pk-serve .pk-tick { width: 18px; height: 18px; padding: 3.5px; border-radius: 50%; background: var(--blue); color: #fff; stroke-width: 3; }
/* Phones: the strip lines sit at the same 34px pitch as the ticked rows above them (user, 11 Oct 2026); the strip's own
   padding shrinks by the extra row height, so the text keeps the same distance from the strip's edges. */
@media (max-width: 959px) {
  .pk:not(.pk-check) .pk-serve { gap: 0; padding-top: 5px; padding-bottom: 5px; }
  .pk:not(.pk-check) .pk-serve li { min-height: 34px; }
}

/* Country price bar (home, under the hero), guide bar (country guides, under the photo) and the all-in line on the
   package cards (user picked home option B and guide position F1, 15 Oct 2026). The service fee stays the big number;
   the all-in estimate (visa + centre fees) is the small line under it. Data and behaviour: assets/js/quickbar.js. */
.qbar { position: relative; z-index: 6; margin-top: -54px; }
.qbar-in { display: grid; grid-template-columns: auto minmax(170px, 230px) auto 1fr auto; align-items: center; gap: 14px 18px; padding: 16px 22px;
  border-radius: 20px; background: #fff; color: var(--oxford); box-shadow: 0 24px 60px -24px rgba(11, 33, 71, .45); }
.qbar-q { font-size: 19px; font-weight: 600; white-space: nowrap; }
.qbar-select, .gbar-f select, .pk-country select { height: 40px; padding: 0 34px 0 12px; border: 1px solid #D9D1C2; border-radius: 10px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230B2147' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--oxford); font: inherit; font-size: 14px; -webkit-appearance: none; appearance: none; cursor: pointer; }
.qbar-select:focus-visible, .gbar-f select:focus-visible, .pk-country select:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.qbar-seg { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--sky); }
.qbar-seg label { position: relative; }
.qbar-seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.qbar-seg span { display: block; padding: 6px 12px; border-radius: 999px; font-size: 13.5px; white-space: nowrap; }
.qbar-seg input:checked + span { background: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(11, 33, 71, .15); }
.qbar-seg input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 1px; }
.qbar-price { display: grid; margin: 0; }
.qbar-price small { font-size: 12px; color: var(--muted); }
.qbar-price small b { color: var(--oxford); font-weight: 600; }
.qbar-price > span { font-size: 14px; }
.qbar-price > span b { font-size: 24px; font-weight: 600; color: var(--oxford); }
.qbar-go { white-space: nowrap; }
@media (max-width: 959px) {
  .qbar { margin-top: 12px; }
  .qbar-in { grid-template-columns: 1fr; gap: 10px; padding: 16px; }
  .qbar-seg { justify-self: start; }
  .qbar-go { justify-content: center; }
}
.gbar { position: relative; z-index: 6; display: grid; grid-template-columns: 1fr auto auto auto; align-items: end; gap: 14px; margin: -40px 40px 28px;
  padding: 16px 20px; border-radius: 20px; background: #fff; color: var(--oxford); box-shadow: 0 24px 60px -24px rgba(11, 33, 71, .45); }
.gbar p { margin: 0; }
.gbar-k { font-size: 12.5px; color: var(--muted); }
.gbar-p { font-size: 14px; }
.gbar-p b { font-size: 26px; font-weight: 600; }
.gbar-s { font-size: 12px; color: var(--muted); }
.gbar-s b { color: var(--oxford); font-weight: 600; }
.gbar-f { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.gbar-go { white-space: nowrap; }
@media (max-width: 959px) {
  .gbar { grid-template-columns: 1fr 1fr; margin: -28px 12px 20px; padding: 16px; }
  .gbar-price, .gbar-go { grid-column: 1 / -1; }
  .gbar-go { justify-content: center; }
}
.pk-allin { margin: -2px 0 4px; font-size: 12.5px; color: var(--muted); }
.pk-allin b { color: var(--oxford); font-weight: 600; }
.pk-country { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }
.pk-country select { height: 36px; }

/* How it works: the line map from the clip. A line with numbered stops splits into "you" and "Marco" at step 4 and joins again
   at step 7. Stops are outlined until the line reaches them; tapping one opens its detail. Cream = the visitor, blue = us. */
.flow-three { display: flex; align-items: center; gap: 20px; padding-bottom: 6px; }
.flow-three strong { font-weight: 300; font-size: clamp(48px, 5.4vw, 76px); line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.flow-three span { padding-left: 20px; border-left: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.flow-three b { display: block; font-size: 17px; font-weight: 500; color: var(--oxford); }
.flow { --flow-u: #F6EFE4; --flow-m: #9DB8E8; position: relative; border-radius: var(--r-hero); background: var(--oxford); color: var(--flow-u); padding: 10px 14px 14px; }
.flow-rail { position: relative; height: 238px; margin: 0 14px; }
.flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.flow-lines path { fill: none; stroke-linecap: round; stroke-width: 6; transition: stroke-dashoffset .75s cubic-bezier(.645, .045, .355, 1); }
.flow-lines .is-ghost { stroke: rgba(246, 239, 228, .3); stroke-width: 4; stroke-dasharray: .1 11; transition: none; }
.flow-stop { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 13px; width: 11%; margin: -24px 0 0 -5.5%; padding: 0; border: 0; border-radius: 12px; background: none; color: rgba(246, 239, 228, .68); font: inherit; cursor: pointer; }
.flow-stop { --c: var(--flow-u); }
.flow-stop.is-m { --c: var(--flow-m); }
.flow-num { position: relative; flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--oxford); color: rgba(246, 239, 228, .55); box-shadow: inset 0 0 0 3px rgba(246, 239, 228, .34); font-size: 21px; font-weight: 500; line-height: 1; transition: background-color .35s ease, color .35s ease, box-shadow .35s ease; }
.is-lit > .flow-num { background: var(--c); color: var(--oxford); box-shadow: none; }
.is-x.is-lit > .flow-num::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; box-shadow: inset 0 0 0 2.5px var(--c); }
.is-on > .flow-num::before { content: ""; position: absolute; inset: -13px; border-radius: 50%; background: var(--c); opacity: .22; }
.flow-num { isolation: isolate; }
.is-on > .flow-num::before { z-index: -1; }
.flow.is-auto .is-on > .flow-num::before { inset: -8px; background: none; opacity: 1; border: 4px solid var(--c); animation: flow-glow .9s cubic-bezier(.37, 0, .63, 1) infinite alternate; }
.flow.is-offscreen .is-on > .flow-num::before { animation-play-state: paused; }
@keyframes flow-glow { from { transform: scale(.94); } to { transform: scale(1.12); } }
.flow-label { font-size: 15px; font-weight: 500; line-height: 1.28; text-align: center; white-space: nowrap; transition: color .35s ease; }
.flow-stop.is-lit { color: var(--flow-u); }
.flow-stop.is-on { color: #fff; }
.flow-stop.is-on .flow-label { font-weight: 600; }
.flow-stop.is-x .flow-label { margin-top: 4px; }
.flow-badge { position: absolute; transform: translate(-50%, -50%); padding: 1px 11px 3px; border-radius: 999px; background: var(--flow-u); box-shadow: 0 0 0 4px var(--oxford); color: var(--oxford); font-size: 13px; font-weight: 600; line-height: 1.5; }
.flow-badge.is-m { background: var(--flow-m); }
@media (hover: hover) and (pointer: fine) {
  .flow-stop:hover { color: #fff; }
  .flow-stop:not(.is-lit):hover .flow-num { color: #fff; box-shadow: inset 0 0 0 3px rgba(246, 239, 228, .75); }
}
/* The detail: words on the left, the thing itself on the right. Every step keeps the same height, so nothing jumps. */
.flow-panel { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); height: 318px; border-radius: 20px; overflow: hidden; background: var(--white); color: var(--oxford); animation: flow-in .5s var(--ease-move); }
.flow-panel[hidden] { display: none; }
@keyframes flow-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } }
.flow-text { display: flex; flex-direction: column; align-items: flex-start; padding: 26px 30px 24px; }
.flow-text .label { margin-bottom: 6px; }
.flow-text h3 { font-size: clamp(26px, 2.5vw, 34px); font-weight: 300; line-height: 1.18; letter-spacing: -.005em; }
.flow-text p { margin-top: 9px; max-width: 30em; font-size: 16px; line-height: 1.62; color: var(--ink-2); }
.flow-text .flow-note { margin-top: auto; padding-top: 12px; font-size: 13.5px; color: var(--muted); }
.flow-link { margin-top: auto; padding-top: 12px; font-size: 15px; font-weight: 500; color: var(--blue); text-underline-offset: 4px; }
.flow-cta { margin-top: auto; }
.flow-marks { display: grid; grid-template-columns: auto auto; gap: 7px 22px; margin: 13px 0 0; padding: 0; list-style: none; font-size: 16.5px; font-weight: 500; }
.flow-marks li { white-space: nowrap; }
.flow-marks mark { padding: 0 2px; background: linear-gradient(transparent 58%, #FFE58F 58%); color: inherit; }
.flow-visual { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 22px 30px; overflow: hidden; background: var(--sky); }
.flow-visual.tint-sand { background: var(--sand); }
.flow-visual .vg { width: min(100%, 400px); }
.flow-tag { position: absolute; right: 12px; top: 10px; z-index: 3; padding: 2px 11px 4px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: 12.5px; color: var(--ink-2); }
/* Step 4: the real page, a little askew, running off the card */
.flow-visual.is-paper { display: block; padding: 0; }
.flow-paper { position: absolute; left: 4%; top: 20px; width: 98%; overflow: hidden; border-radius: 6px 6px 0 0; background: #fff; box-shadow: 0 22px 50px -18px rgba(11, 33, 71, .42), 0 0 0 1px rgba(11, 33, 71, .05); transform: rotate(-1.1deg); transform-origin: 0 0; }
.flow-paper img { width: 100%; height: auto; }
/* Steps 1 and 6: fare tickets, every column lined up */
.flow-tickets { display: grid; gap: 10px; width: 100%; max-width: 520px; }
.flow-ticket { position: relative; display: grid; grid-template-columns: 1fr 168px; align-items: center; height: 72px; border-radius: 15px; background: var(--white); box-shadow: 0 10px 24px -14px rgba(11, 33, 71, .35); }
.flow-ticket::before { content: ""; position: absolute; right: 168px; top: 12px; bottom: 12px; border-left: 2px dashed var(--line); }
.flow-ticket b { display: flex; align-items: center; gap: 10px; padding-left: 24px; font-size: 24px; font-weight: 400; }
.flow-ticket em { padding: 2px 10px 3px; border-radius: 999px; background: var(--oxford); color: #fff; font-size: 12.5px; font-style: normal; font-weight: 500; }
.flow-ticket span { padding-left: 22px; font-size: 13px; line-height: 1.25; color: var(--ink-2); }
.flow-ticket u { display: block; font-size: 19px; font-weight: 500; color: var(--oxford); text-decoration: none; }
.flow-ticket.is-sel { box-shadow: 0 0 0 2.5px var(--oxford), 0 14px 28px -14px rgba(11, 33, 71, .45); }
/* Step 2 */
.flow-ways { display: grid; gap: 10px; width: 100%; max-width: 470px; }
.flow-way { display: flex; align-items: center; gap: 13px; padding: 11px 16px; border-radius: 15px; background: var(--white); box-shadow: 0 10px 24px -14px rgba(11, 33, 71, .35); font-size: 16.5px; font-weight: 500; }
.flow-way.is-chat { display: block; }
.flow-way-h { display: flex; align-items: center; gap: 13px; }
.flow-way i { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #06C755; }
.flow-wave { display: flex; align-items: center; gap: 4px; margin-left: auto; height: 26px; }
.flow-wave s { display: block; width: 4px; border-radius: 2px; background: var(--oxford); }
.flow-chat { display: grid; gap: 6px; margin-top: 8px; }
.flow-chat p { width: fit-content; max-width: 92%; padding: 7px 12px 9px; border-radius: 13px; font-size: 14.5px; font-weight: 400; line-height: 1.4; }
.flow-chat .o { margin-left: auto; border-bottom-right-radius: 4px; background: #8DE055; color: #111; }
.flow-chat .n { border-bottom-left-radius: 4px; background: var(--soft); }
.flow-or { margin: -3px 0; text-align: center; font-size: 14px; color: var(--ink-2); }
/* Step 3 */
.flow-box { width: 100%; max-width: 520px; overflow: hidden; border-radius: 15px; background: var(--white); box-shadow: 0 10px 24px -14px rgba(11, 33, 71, .35); }
.flow-route { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 18px 10px 12px; text-align: center; font-size: 15.5px; font-weight: 500; line-height: 1.3; }
.flow-route::before { content: ""; position: absolute; left: 16.6%; right: 16.6%; top: 25px; height: 3px; background: var(--oxford); }
.flow-route div::before { content: ""; position: relative; display: block; width: 17px; height: 17px; margin: 0 auto 7px; border-radius: 50%; background: var(--oxford); box-shadow: 0 0 0 4px var(--white); }
.flow-route small { display: block; font-size: 13px; font-weight: 400; color: var(--ink-2); }
.flow-find { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px 12px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 500; line-height: 1.4; }
.flow-find svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--blue); }
/* Step 5 */
.flow-paper.is-boxes { left: 3%; top: 16px; width: 94%; transform: rotate(-.8deg); }
.flow-paper.is-boxes img { display: block; width: 100%; height: auto; margin: 0; }
.flow-tick { position: absolute; left: 3.02%; width: 2.6%; overflow: visible; }
.flow-tick path { fill: none; stroke: #2E8B57; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: flow-check .3s ease-out var(--d) forwards; }
.flow-panel[hidden] .flow-tick * { animation: none; }
@keyframes flow-check { to { stroke-dashoffset: 0; } }
/* Step 7: the three strokes of the Expert Check mark, one for each layer */
.flow-lift { font-weight: 500; color: var(--oxford) !important; }
.flow-status { display: flex; flex-wrap: wrap; gap: 5px 14px; margin: auto 0 0; padding: 10px 0 0; list-style: none; font-size: 14px; font-weight: 500; color: var(--oxford); }
.flow-status li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.flow-status svg { flex: none; width: 16px; height: 16px; }
.flow-visual.is-phone { --app-end: -32%; display: block; padding: 0; }
.flow-phone { position: absolute; left: 50%; top: 16px; bottom: 0; width: 316px; margin-left: -158px; padding: 8px 8px 0; border-radius: 34px 34px 0 0; background: var(--oxford); box-shadow: 0 22px 50px -18px rgba(11, 33, 71, .55); }
.flow-phone-screen { height: 100%; overflow: hidden; border-radius: 27px 27px 0 0; background: var(--white); }
.flow-phone img { display: block; width: 100%; height: auto; animation: flow-app-scroll 3.2s cubic-bezier(.645, .045, .355, 1) 1.4s both; }
.flow-panel[hidden] .flow-phone img { animation: none; }
@keyframes flow-app-scroll { to { transform: translate3d(0, var(--app-end), 0); } }
.flow-ec { display: grid; grid-template-columns: auto 1fr; gap: 14px 26px; align-items: center; width: 100%; max-width: 520px; }
.flow-ec .ec-sym { grid-row: 1 / 4; width: 124px; height: 128px; margin: 0; }
.flow-ec b { display: block; font-size: 21px; font-weight: 400; line-height: 1.25; }
.flow-ec span { font-size: 14px; color: var(--ink-2); }
/* While the steps play on their own, a thin line shows the time left on the open step */
.flow-play { position: absolute; right: 22px; top: 18px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 4px 13px 5px 11px; border: 1px solid rgba(246, 239, 228, .36); border-radius: 999px; background: none; color: rgba(246, 239, 228, .86); font: inherit; font-size: 13px; line-height: 1.3; cursor: pointer; touch-action: manipulation; transition: background-color .2s ease, color .2s ease; }
.flow-play::after { content: ""; position: absolute; inset: -9px -4px; }
.flow-play svg { width: 11px; height: 11px; fill: currentColor; }
.flow-play path { display: none; }
.flow-play[data-state="pause"] .i-pause, .flow-play[data-state="play"] .i-play, .flow-play[data-state="again"] .i-again { display: block; }
.flow-play[data-state="again"] path[fill="none"] { fill: none; }
@media (hover: hover) and (pointer: fine) { .flow-play:hover { background: rgba(246, 239, 228, .14); color: #fff; } }
.flow-play:active { background: rgba(246, 239, 228, .22); }
.flow-time { position: absolute; left: 34px; right: 34px; bottom: 6px; height: 2px; border-radius: 1px; overflow: hidden; opacity: 0; transition: opacity .3s ease; }
.flow-time::after { content: ""; position: absolute; inset: 0; background: rgba(246, 239, 228, .75); transform: scaleX(0); transform-origin: left; }
.flow.is-auto .flow-time { opacity: 1; }
.flow.is-auto .flow-time::after { animation: flow-fill var(--dwell, 6s) linear forwards; }
.flow.is-offscreen .flow-time::after { animation-play-state: paused; }
@keyframes flow-fill { to { transform: scaleX(1); } }
#how .timing { margin: 14px 0 0; display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 0 44px; align-items: center; padding: 14px 26px 12px; }
#how .timing-head { grid-template-columns: minmax(0, 1fr); gap: 2px; }
#how .timing-head p:not(.label) { font-size: 14px; line-height: 1.6; }
#how .timing-bar { margin: 24px 0 28px; }
#how .timing-legend { grid-column: 2; margin-top: 0; }
@media (max-width: 959px) {
  /* Phones and tablets: the same map, small and numbered, above one detail at a time. The details share one cell as tall as the
     tallest, so nothing on the page moves while the steps play */
  #how .timing { display: none; }
  .how-head { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .flow-three { gap: 14px; padding: 0; }
  .flow-three strong { font-size: 44px; }
  .flow-three span { padding-left: 14px; font-size: 13.5px; }
  .flow-three b { font-size: 15.5px; }
  .flow { --n: clamp(24px, 6.7vw, 40px); padding: 10px 10px 12px; border-radius: 24px; }
  .flow-rail { height: clamp(112px, 29vw, 170px); margin: 0 2px 8px; }
  .flow-lines path { stroke-width: 4; }
  .flow-lines .is-ghost { stroke-width: 3; stroke-dasharray: .1 8; }
  .flow-stop { width: var(--n); margin: calc(var(--n) / -2) 0 0 calc(var(--n) / -2); }
  .flow-stop::after { content: ""; position: absolute; inset: -9px -5px; }
  .flow-num { width: var(--n); height: var(--n); font-size: max(13px, calc(var(--n) * .5)); box-shadow: inset 0 0 0 2px rgba(246, 239, 228, .34); }
  .flow-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
  .is-on > .flow-num::before { inset: -6px; }
  .flow.is-auto .is-on > .flow-num::before { inset: -5px; border-width: 3px; }
  .is-x.is-lit > .flow-num::after { inset: -4px; box-shadow: inset 0 0 0 2px var(--c); }
  .flow-badge { left: 68% !important; top: 16% !important; padding: 0 8px 1px; box-shadow: 0 0 0 3px var(--oxford); font-size: 11.5px; }
  .flow-badge.is-m { left: 63% !important; top: 91% !important; }
  .flow-play { right: 12px; top: 10px; padding: 2px 9px 3px 8px; font-size: 12px; }
  .flow-time { left: 24px; right: 24px; bottom: 5px; }
  .flow-panels { display: grid; }
  .flow-panel, .flow-panel[hidden] { grid-area: 1 / 1; display: flex; flex-direction: column; height: auto; border-radius: 17px; }
  .flow-panel[hidden] { visibility: hidden; animation: none; }
  .flow-text { flex: none; padding: 13px 16px 11px; }
  .flow-text .label { margin-bottom: 2px; font-size: 12.5px; }
  .flow-text h3 { font-size: 22px; font-weight: 400; }
  .flow-text p { margin-top: 5px; font-size: 14.5px; line-height: 1.55; }
  .flow-text .flow-note, .flow-link { padding-top: 7px; font-size: 13px; }
  .flow-cta { margin-top: 10px; }
  .flow-marks { gap: 3px 12px; margin-top: 7px; font-size: 14.5px; }
  .flow-visual { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 12px 14px; }
  .flow-visual .vg, .flow-tickets, .flow-ways, .flow-box, .flow-ec { margin-inline: auto; }
  .flow-tag { top: 6px; right: 8px; font-size: 11.5px; padding: 1px 9px 3px; }
  .flow-visual.is-paper { display: block; min-height: 214px; padding: 0; }
  .flow-paper { left: -8px; top: 16px; width: 104%; transform: rotate(-1deg); }
  .flow-paper img { width: 154%; max-width: none; margin: -3% 0 0 -48%; }
  .flow-tickets { gap: 8px; }
  .flow-ticket { grid-template-columns: 1fr 132px; height: 58px; }
  .flow-ticket::before { right: 132px; }
  .flow-ticket b { padding-left: 16px; font-size: 19px; gap: 7px; }
  .flow-ticket em { font-size: 11px; padding: 1px 8px 2px; }
  .flow-ticket span { padding-left: 14px; font-size: 12px; }
  .flow-ticket u { font-size: 16px; }
  .flow-ways { gap: 7px; }
  .flow-way { padding: 9px 13px; font-size: 14.5px; gap: 10px; }
  .flow-way-h { gap: 10px; }
  .flow-way i { width: 30px; height: 30px; border-radius: 9px; }
  .flow-way i svg { width: 18px; height: 18px; }
  .flow-chat { margin-top: 6px; gap: 5px; }
  .flow-chat p { padding: 5px 10px 7px; font-size: 13.5px; }
  .flow-wave { display: none; }
  .flow-or { font-size: 13px; }
  .flow-route { padding: 14px 8px 10px; font-size: 14.5px; }
  .flow-route::before { top: 21px; }
  .flow-find { padding: 8px 13px 10px; font-size: 14px; }
  .flow-ec { gap: 10px 16px; }
  .flow-ec .ec-sym { width: 78px; height: 81px; }
  .flow-ec b { font-size: 18px; }
  .flow-ec span { font-size: 12.5px; }
  .flow-status { margin-top: 2px; padding-top: 8px; gap: 3px 12px; font-size: 13px; }
  .flow-visual.is-phone { display: block; min-height: 236px; padding: 0; --app-end: -31%; }
  .flow-phone { top: 12px; width: clamp(224px, 60vw, 300px); margin-left: calc(clamp(224px, 60vw, 300px) / -2); padding: 6px 6px 0; border-radius: 28px 28px 0 0; }
  .flow-phone-screen { border-radius: 22px 22px 0 0; }
  .flow-paper.is-boxes { left: 12px; top: 14px; width: max(94%, 600px); }
  .flow-paper.is-boxes img { width: 100%; max-width: 100%; margin: 0; }
}
@media (max-width: 559px) {
  .flow-paper.is-boxes { top: 12%; }
  .flow-phone { left: 14px; width: clamp(180px, 60vw, 300px); margin-left: 0; }
  .is-phone .flow-tag { top: 14px; right: 6px; width: min-content; padding: 3px 7px 4px; border-radius: 10px; font-size: 11px; line-height: 1.3; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-panel { animation: none; }
  .flow-tick path { animation: none; stroke-dashoffset: 0; }
  .flow.is-auto .is-on > .flow-num::before { animation: none; }
  .flow-phone img { animation: none; transform: translate3d(0, var(--app-end), 0); }
  .flow-lines path, .flow-num, .flow-label { transition: none; }
}

/* The 3-day promise in the hero, right before the buttons */
.hero-three { display: flex; align-items: center; gap: 15px; color: #fff; }
.hero-three strong { font-weight: 300; font-size: 56px; line-height: 1; white-space: nowrap; }
.hero-three span { padding-left: 15px; border-left: 1px solid rgba(255, 255, 255, .5); font-size: 14.5px; line-height: 1.42; color: rgba(255, 255, 255, .88); }
.hero-three b { display: block; font-size: 16px; font-weight: 500; color: #fff; }
@media (max-width: 959px) {
  /* Phone hero: the words stay on the sky, the promise and the buttons go to the foot of the photo, so faces stay clear */
  .hero-top { bottom: calc(10px + 74px); display: flex; flex-direction: column; }
  .hero-side { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
  .hero-three { margin-top: auto; gap: 12px; }
  .hero-three strong { font-size: 42px; }
  .hero-three span { padding-left: 12px; font-size: 12.5px; }
  .hero-three b { font-size: 14.5px; }
  .hero-actions { flex-wrap: nowrap; gap: 8px; }
  .hero-actions .btn { flex: 1 1 0; min-width: 0; padding-inline: 10px; font-size: 14.5px; white-space: nowrap; }
  .hero-media::after { background: linear-gradient(180deg, rgba(11, 33, 71, .78) 0%, rgba(11, 33, 71, .5) 30%, rgba(11, 33, 71, .06) 44%, rgba(11, 33, 71, 0) 50%), linear-gradient(0deg, rgba(11, 33, 71, .8) 0%, rgba(11, 33, 71, .62) 24%, rgba(11, 33, 71, .08) 40%, rgba(11, 33, 71, 0) 46%); }
}
@media (max-width: 959px) and (max-height: 720px) {
  .hero-lead { display: none; }
}
@media (max-width: 349px) {
  .hero-actions { flex-wrap: wrap; }
  .hero-actions .btn { flex-basis: 100%; }
}