/* Shared base stylesheet. Brand look comes from CSS variables set per site (site.json → theme). */
/* Inter, self-hosted (engine/assets/fonts, SIL OFL 1.1): used by the theme fonts "grotesk" (layout.mjs FONTS);
   downloaded only by pages that use it, the main latin file is preloaded by layout.mjs */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/inter-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/inter-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --accent: #2563eb;
  --accent-2: #7c3aed;
  --accent-ink: #ffffff;
  --bg: #ffffff;
  --surface: #f6f7f9;
  --surface-2: #eef0f4;
  --text: #0f172a;
  --muted: #5b6475;
  --border: #e3e6ec;
  --radius: 14px;
  --font-head: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --wrap: 1120px;
  --yes: #16a34a;
  --no: #dc2626;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.65 var(--font-body); text-rendering: optimizeLegibility; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 .6em; }
h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); margin-top: 2.2em; scroll-margin-top: 90px; }
h3 { font-size: 1.18rem; margin-top: 1.6em; scroll-margin-top: 90px; }
p, ul, ol, dl, table, figure, blockquote { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.3em; }
li { margin: .25em 0; }
code { font-family: var(--font-mono); font-size: .88em; background: var(--surface-2); padding: .12em .38em; border-radius: 6px; }
blockquote { border-left: 3px solid var(--accent); padding: .2em 0 .2em 1em; color: var(--muted); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 50; background: var(--bg); padding: 8px 12px; }

/* top bar + header */
.topbar { background: var(--topbar-bg, var(--text)); color: var(--topbar-ink, var(--bg)); font-size: .85rem; text-align: center; padding: 7px 0; }
.topbar a { color: inherit; }
.topbar strong { color: var(--accent-2, var(--accent)); filter: brightness(1.3); }
.hdr { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.6) blur(10px); border-bottom: 1px solid var(--border); }
.hdr-in { display: flex; align-items: center; gap: 22px; min-height: 66px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font: 800 1.2rem/1 var(--font-head); letter-spacing: -0.02em; }
.logo-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); font-size: .95rem; }
.nav { display: flex; gap: 20px; flex: 1; }
.nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .95rem; }
.nav a:hover, .nav a[aria-current] { color: var(--text); }
.menu { display: none; margin-left: auto; background: none; border: 1px solid var(--border); border-radius: 10px; padding: 6px 12px; font: inherit; color: var(--text); }
@media (max-width: 860px) {
  .menu { display: inline-block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 66px; flex-direction: column; gap: 0; background: var(--bg); border-bottom: 1px solid var(--border); padding: 8px 16px 16px; }
  .nav.open { display: flex; }
  .nav a { padding: 10px 0; border-bottom: 1px solid var(--border); }
  .hdr-cta { display: none; }
}

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: calc(var(--radius) - 4px); font-weight: 700; text-decoration: none; border: 1.5px solid transparent; transition: transform .12s ease, box-shadow .12s ease; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); box-shadow: 0 6px 20px -8px var(--accent); }
.btn-ghost { border-color: var(--border); color: var(--text); background: var(--bg); }
.btn-sm { padding: 8px 14px; font-size: .92rem; }
.btn-lg { padding: 14px 26px; font-size: 1.05rem; }

/* page head */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 22px 0 0; font-size: .86rem; color: var(--muted); }
.crumbs li + li::before { content: "›"; margin-right: 6px; opacity: .6; }
.crumbs a { color: var(--muted); text-decoration: none; }
.page-head { padding: 34px 0 10px; max-width: 860px; }
.page-head.hero { padding: 64px 0 28px; max-width: 920px; }
.page-head.hero h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); }
.kicker { display: inline-block; font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); padding: 5px 11px; border-radius: 999px; margin-bottom: 16px; }
.lede { font-size: 1.18rem; color: var(--muted); }
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 18px; }
.badges { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 14px 0; }
.badges li { margin: 0; font-size: .88rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.meta { font-size: .88rem; color: var(--muted); margin-top: 10px; }

/* content */
.content { max-width: 860px; }
.t-home .content, .t-pricing .content, .t-hub .content { max-width: none; }
.quick-answer { margin: 22px 0 28px; padding: 20px 22px; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 7%, var(--bg)); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); border-left: 5px solid var(--accent); }
.qa-label { margin: 0 0 6px; font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.qa-q { font-weight: 700; margin-bottom: 6px; }
.qa-text p:last-child { margin-bottom: 0; }
.toc { max-width: 860px; margin: 8px 0 26px; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: .93rem; }
.toc-h { font-weight: 700; margin: 0 0 4px; }
.toc ol { margin: 0; columns: 2 260px; }
.toc a { color: var(--text); text-decoration: none; }

.facts-table, .tbl table { width: 100%; border-collapse: collapse; font-size: .96rem; }
.facts-table th, .facts-table td, .tbl th, .tbl td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.facts-table th { width: 38%; color: var(--muted); font-weight: 600; }
.facts { margin: 8px 0 10px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.tbl thead th { background: var(--surface); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tbl tbody th { font-weight: 700; }
.tbl tr.hl { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.tbl tr.hl th { color: var(--accent); }
.tbl tr:last-child th, .tbl tr:last-child td { border-bottom: 0; }
.tbl caption { caption-side: bottom; padding: 8px 12px; color: var(--muted); font-size: .85rem; text-align: left; }
.table-note { font-size: .88rem; color: var(--muted); margin-top: 8px; }
.yes { color: var(--yes); font-weight: 800; }
.no { color: var(--no); font-weight: 800; }

/* pricing */
.pricing { margin-top: 10px; }
.plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.plan { position: relative; display: flex; flex-direction: column; padding: 22px 18px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.plan.popular { border: 2px solid var(--accent); box-shadow: 0 14px 40px -22px var(--accent); }
.plan-badge { position: absolute; top: -12px; left: 16px; margin: 0; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: var(--accent); color: var(--accent-ink); padding: 3px 10px; border-radius: 999px; }
.plan-name { margin: 0 0 4px; font-size: 1.05rem; }
.plan-qty { margin: 0; color: var(--muted); font-size: .92rem; }
.plan-price { margin: 10px 0 0; font: 800 2rem/1.1 var(--font-head); letter-spacing: -0.03em; }
.plan-unit { margin: 2px 0 12px; color: var(--accent); font-weight: 700; font-size: .92rem; }
.plan-features { list-style: none; padding: 0; font-size: .9rem; margin: 0 0 16px; flex: 1; }
.plan-features li::before { content: "✓ "; color: var(--yes); font-weight: 800; }
.plan .btn { width: 100%; }
.pricing-note { font-size: .88rem; color: var(--muted); margin-top: 12px; }

/* faq */
.faq-item { border-bottom: 1px solid var(--border); padding: 4px 0 6px; }
.faq-item h3 { margin-top: 1.1em; }

/* steps */
.step-list { list-style: none; counter-reset: s; padding: 0; }
.step-list > li { counter-increment: s; position: relative; padding: 2px 0 6px 52px; margin-bottom: 12px; }
.step-list > li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--surface-2); color: var(--accent); }
.step-name { font-weight: 700; margin: 4px 0 2px; }

/* cards */
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.card { padding: 18px 18px 6px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.card h3 { margin-top: 0; font-size: 1.05rem; }
.card h3 a { color: var(--text); text-decoration: none; }
.card h3 a:hover { color: var(--accent); }
.card p { color: var(--muted); font-size: .95rem; }
.card-tag { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--accent); margin: 0 0 6px; }

/* ranking */
.rank-list { list-style: none; padding: 0; }
.rank { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px 6px; margin-bottom: 14px; }
.rank.self { border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--bg)); }
.rank-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rank-head h3 { margin: 0; }
.rank-n { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--text); color: var(--bg); font-weight: 800; }
.rank-badge { font-size: .76rem; font-weight: 800; background: var(--accent); color: var(--accent-ink); padding: 3px 10px; border-radius: 999px; }
.rank-verdict { margin: 10px 0; }
.rank-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .9rem; margin: 0 0 8px; }
.rank-meta dt { display: inline; color: var(--muted); }
.rank-meta dt::after { content: ": "; }
.rank-meta dd { display: inline; margin: 0; font-weight: 600; }
.pc { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; font-size: .92rem; }
.pc-h { font-weight: 700; margin: 0; }
@media (max-width: 600px) { .pc { grid-template-columns: 1fr; } }
.disclosure { font-size: .82rem; color: var(--muted); }

/* stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 10px 0 20px; }
.stat { padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.stat-v { margin: 0; font: 800 1.8rem/1.1 var(--font-head); letter-spacing: -0.03em; color: var(--accent); }
.stat-l { margin: 4px 0 0; font-weight: 600; font-size: .93rem; }
.stat-n { margin: 2px 0 0; font-size: .8rem; color: var(--muted); }

/* cta */
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin: 36px 0; padding: 26px 28px; border-radius: calc(var(--radius) + 6px); background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); }
.cta-h { font: 800 1.45rem/1.25 var(--font-head); margin: 0 0 4px; }
.cta-t p { margin: 0; opacity: .92; }
.cta .btn-primary { background: var(--accent-ink); color: var(--accent); box-shadow: none; }
.cta .btn-ghost { background: transparent; color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent-ink) 50%, transparent); }
.cta-btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* code */
.code { position: relative; margin: 0 0 1.4em; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: #0b1020; }
.code figcaption { font-size: .82rem; color: #9aa4bf; padding: 8px 14px; border-bottom: 1px solid #1d2540; font-family: var(--font-mono); }
.code pre { margin: 0; padding: 16px; overflow-x: auto; }
.code code { background: none; padding: 0; color: #e6e9f2; font-size: .86rem; line-height: 1.6; }
.copy { position: absolute; top: 6px; right: 8px; font: 600 .75rem var(--font-body); background: #1d2540; color: #cbd2e6; border: 0; border-radius: 6px; padding: 4px 8px; cursor: pointer; }

/* callout */
.callout { padding: 14px 18px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); margin: 0 0 1.2em; }
.callout.warn { background: color-mix(in srgb, #f59e0b 12%, var(--bg)); border-color: color-mix(in srgb, #f59e0b 50%, var(--border)); }
.callout.success { background: color-mix(in srgb, #16a34a 11%, var(--bg)); border-color: color-mix(in srgb, #16a34a 45%, var(--border)); }
.callout-h { font-weight: 800; margin: 0 0 4px; }
.callout p:last-child { margin-bottom: 0; }

/* definitions, link grid, sources */
.defs dl { margin: 0; }
.def { padding: 12px 0; border-bottom: 1px solid var(--border); }
.def dt { font-weight: 800; }
.def dd { margin: 4px 0 0; }
.def dd p:last-child { margin-bottom: 0; }
.lg { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 16px; font-size: .95rem; }
.lg a { text-decoration: none; }
.lg-note { color: var(--muted); font-size: .82rem; }
.lg-group { font-weight: 800; margin: 18px 0 6px; font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sources ol { font-size: .9rem; color: var(--muted); }
.coins { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.coins li { margin: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; }
.coin-code { font: 800 1.05rem var(--font-mono); color: var(--accent); }
.coin-name { font-weight: 600; font-size: .92rem; }
.coin-note { color: var(--muted); font-size: .8rem; }

/* related + about */
.related { max-width: 860px; margin-top: 30px; }
.related-list { list-style: none; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.related-list li { margin: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); }
.related-list a { font-weight: 700; text-decoration: none; }
.related-list p { margin: 4px 0 0; color: var(--muted); font-size: .88rem; }
.about-box { max-width: 860px; margin: 34px 0 10px; padding: 16px 18px; border-radius: var(--radius); background: var(--surface); font-size: .92rem; color: var(--muted); }
.about-h { font-weight: 800; color: var(--text); margin: 0 0 4px; }
.about-box p:last-child { margin: 0; }

/* footer */
.ftr { margin-top: 70px; background: var(--surface); border-top: 1px solid var(--border); padding: 44px 0 18px; font-size: .93rem; }
.ftr .wrap:first-child { display: grid; grid-template-columns: minmax(220px, 1.2fr) 2fr; gap: 34px; }
@media (max-width: 760px) { .ftr .wrap:first-child { grid-template-columns: 1fr; } }
.f-logo { font: 800 1.2rem var(--font-head); margin: 0 0 6px; }
.f-desc { color: var(--muted); }
.coins-mini { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.coins-mini li { margin: 0; font: 700 .75rem var(--font-mono); border: 1px solid var(--border); border-radius: 6px; padding: 3px 7px; background: var(--bg); }
.f-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; }
.f-h { font-weight: 800; margin: 0 0 8px; }
.f-col ul { list-style: none; padding: 0; margin: 0; }
.f-col a { color: var(--muted); text-decoration: none; }
.f-col a:hover { color: var(--text); }
.f-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: .85rem; }
.langs { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; }

/* home layout helpers */
.t-home .sec, .t-home .cards-sec, .t-home .faq, .t-home .ranking, .t-home .tbl { max-width: 1120px; }
.t-home .sec > p, .t-home .faq-item, .t-home .quick-answer { max-width: 860px; }

/* ==========================================================================================================
   v2 — trust & conversion layer: icons, hero visual, trust row, coin logos, band, sticky buy bar, polish.
   Everything uses the theme variables (light + dark), no external resource; site theme.css still loads after.
   ========================================================================================================== */
:root {
  --shadow-sm: 0 1px 2px rgb(15 23 42 / .05), 0 3px 10px -6px rgb(15 23 42 / .10);
  --shadow-md: 0 2px 4px rgb(15 23 42 / .04), 0 16px 36px -18px rgb(15 23 42 / .28);
  --focus: color-mix(in srgb, var(--accent) 75%, var(--text));
}
h1, h2, h3, .cta-h { text-wrap: balance; }
p, li { text-wrap: pretty; }
code, .sources li, .facts-table td { overflow-wrap: anywhere; }
:where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.ic { width: 1em; height: 1em; flex: none; vertical-align: -0.14em; }
.coin-logo { display: block; width: 22px; height: 22px; flex: none; }

/* buttons: clearer states */
.btn { line-height: 1.25; transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, filter .15s ease; cursor: pointer; }
.btn .ic { width: 1.05em; height: 1.05em; transition: transform .15s ease; }
.btn:hover .ic { transform: translateX(2px); }
.btn-primary:hover { box-shadow: 0 12px 28px -12px var(--accent); filter: saturate(1.08) brightness(1.04); }
.btn:active { transform: translateY(0); filter: none; }
.btn-ghost:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }

/* header */
.hdr { box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 50%, transparent), 0 6px 20px -18px rgb(15 23 42 / .5); }
.nav { gap: 4px; }
.nav a { padding: 7px 11px; border-radius: 8px; transition: background-color .15s ease, color .15s ease; }
.nav a:hover { background: var(--surface); }
.nav a[aria-current] { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.logo-mark { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), 0 6px 14px -8px var(--accent); }
@media (max-width: 860px) {
  .nav { box-shadow: 0 18px 30px -24px rgb(15 23 42 / .5); }
  .nav a { padding: 12px 4px; border-radius: 0; }
  .nav a:hover, .nav a[aria-current] { background: none; color: var(--accent); }
}

/* hero: reassurance line + optional visual (two columns on wide screens) */
.hero-note { display: flex; align-items: flex-start; gap: 8px; margin: -6px 0 14px; font-size: .92rem; color: var(--muted); }
.hero-note .ic { width: 16px; height: 16px; margin-top: .25em; color: var(--yes); }
.page-head.hero.has-visual { max-width: none; }
.hero-main { min-width: 0; }
.hero-visual { min-width: 0; margin-top: 30px; }
@media (min-width: 960px) {
  .page-head.hero.has-visual { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
  .page-head.hero.has-visual h1 { font-size: clamp(2.2rem, 4.1vw, 3.35rem); }
  .has-visual .hero-visual { margin-top: 0; }
}
.hero-term { margin: 0; border-radius: calc(var(--radius) + 2px); overflow: hidden; background: #0b1020; color: #e6e9f2; border: 1px solid #1d2540; box-shadow: 0 30px 60px -32px rgb(2 6 23 / .6); }
.ht-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #10172b; border-bottom: 1px solid #1d2540; }
.ht-dots { display: inline-flex; gap: 6px; flex: none; }
.ht-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.ht-dots i:nth-child(2) { background: #febc2e; }
.ht-dots i:nth-child(3) { background: #28c840; }
.ht-title { font: 600 .78rem var(--font-mono); color: #9aa4bf; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-body { margin: 0; padding: 16px 18px 18px; font: .82rem/1.75 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.ht-body code { background: none; padding: 0; border-radius: 0; color: inherit; font: inherit; }
.ht-c { color: #7180a6; }
.ht-p { color: color-mix(in srgb, var(--accent) 65%, #fff); font-weight: 700; user-select: none; }
.ht-cmd { color: #f4f6fb; }
.ht-v { color: #9ee6bd; }
.ht-o { color: #a9b3cc; }
.hero-term figcaption { padding: 10px 16px; font-size: .8rem; color: #9aa4bf; border-top: 1px solid #1d2540; }
.hero-price { position: relative; padding: 26px 22px 20px; border: 1px solid var(--border); border-radius: calc(var(--radius) + 6px); background: var(--bg); box-shadow: var(--shadow-md); }
.hero-price::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 5px; border-radius: calc(var(--radius) + 6px) calc(var(--radius) + 6px) 0 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.hp-k { margin: 0 0 4px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.hp-from { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 16px; }
.hp-from-l { font-weight: 600; color: var(--muted); }
.hp-from strong { font: 800 clamp(2.4rem, 5vw, 3rem)/1 var(--font-head); letter-spacing: -.035em; color: var(--text); }
.hp-unit { font-weight: 700; color: var(--muted); margin-left: -6px; }
.hp-tiers { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.hp-tiers li { margin: 0; }
.hp-tiers a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.hp-tiers a:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }
.hp-pop a { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); box-shadow: inset 3px 0 0 var(--accent); }
.hp-n { font-weight: 700; line-height: 1.3; }
.hp-n small { display: block; font-weight: 500; font-size: .82rem; color: var(--muted); }
.hp-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font: 800 .66rem/1.6 var(--font-body); font-style: normal; text-transform: uppercase; letter-spacing: .06em; vertical-align: 2px; background: var(--accent); color: var(--accent-ink); }
.hp-p { text-align: right; font: 800 1.15rem/1.2 var(--font-head); white-space: nowrap; }
.hp-p small { display: block; font: 600 .78rem/1.4 var(--font-body); color: var(--muted); }
.hp-btn { width: 100%; }
.hp-note { margin: 10px 0 0; font-size: .85rem; color: var(--muted); text-align: center; }
.hp-pay { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.hp-pay .coin-row { gap: 6px; }

/* icon tiles on cards, stats, steps, trust */
.card-ic, .stat-ic, .trust-ic, .step-ic { display: inline-grid; place-items: center; flex: none; color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); }
.card-ic { width: 42px; height: 42px; border-radius: 12px; margin-bottom: 12px; }
.card-ic .ic, .trust-ic .ic { width: 21px; height: 21px; }
.stat-ic { width: 34px; height: 34px; border-radius: 10px; margin-bottom: 10px; }
.stat-ic .ic { width: 18px; height: 18px; }
.step-list > li.has-ic { padding-left: 60px; }
.step-ic { position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 12px; }
.step-ic .ic { width: 21px; height: 21px; }
.step-list > li.has-ic::before { z-index: 1; left: 28px; top: -7px; width: 22px; height: 22px; font-size: .7rem; background: var(--accent); color: var(--accent-ink); border: 2px solid var(--bg); }

/* cards: depth + whole-card click when the card links somewhere */
.card { position: relative; box-shadow: var(--shadow-sm); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.card-link:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-link h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-link p a { position: relative; z-index: 1; }
.card-link:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.card-link h3 a:focus-visible { outline: none; }

/* trust row */
.trust-sec { margin: 18px 0 8px; }
.trust { list-style: none; padding: 0; margin: 12px 0 20px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.trust > li { margin: 0; display: flex; align-items: flex-start; gap: 14px; padding: 16px 16px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow-sm); }
.trust-ic { width: 40px; height: 40px; border-radius: 11px; }
.trust-t { margin: 1px 0 2px; font-weight: 750; line-height: 1.3; }
.trust-d { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--muted); }
@media (min-width: 900px) { .trust.n-3, .trust.n-5, .trust.n-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .trust.n-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.trust-sec.compact .trust { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.trust-sec.compact .trust > li { align-items: center; gap: 9px; padding: 0; border: 0; background: none; box-shadow: none; }
.trust-sec.compact .trust-ic { width: 28px; height: 28px; border-radius: 8px; }
.trust-sec.compact .trust-ic .ic { width: 16px; height: 16px; }
.trust-sec.compact .trust-t { margin: 0; font-size: .93rem; }

/* coins: logos */
.coins li { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; }
.coins li > .coin-logo { grid-row: 1 / span 3; width: 34px; height: 34px; }
.coins li > :not(.coin-logo) { grid-column: 2; }
.coin-row { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.coin-row li { margin: 0; display: inline-flex; align-items: center; gap: 7px; font: 700 .88rem var(--font-mono); }
.coinstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 22px 0; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.cs-label { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cs-note { margin: 0 0 0 auto; font-size: .86rem; color: var(--muted); }
@media (max-width: 640px) { .cs-note { margin-left: 0; flex-basis: 100%; } }

/* band: full-width alternate background without horizontal overflow (shadow + clip-path, no 100vw) */
.band { position: relative; margin: 48px 0; padding: 36px 0 26px; background: var(--surface); box-shadow: 0 0 0 100vmax var(--surface); clip-path: inset(0 -100vmax); }
.band > :first-child { margin-top: 0; }
.band > :first-child > :first-child { margin-top: 0; }
.band .card, .band .trust > li, .band .plan, .band .stat, .band .coinstrip, .band .coins li, .band .rank, .band .table-wrap, .band .hp-tiers a { background: var(--bg); }

/* pricing cards */
.plans { gap: 16px; }
.cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.plan { box-shadow: var(--shadow-sm); transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.plan:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.plan.popular { box-shadow: 0 20px 44px -24px var(--accent); }
@media (min-width: 900px) { .plan.popular { transform: translateY(-6px); } .plan.popular:hover { transform: translateY(-8px); } }
.plan-price { font-size: 2.15rem; }
.plan-features { border-top: 1px solid var(--border); padding-top: 12px; }
.plan-features li { margin: .35em 0; }

/* tables */
.table-wrap { box-shadow: var(--shadow-sm); }
.tbl th, .tbl td { padding: 12px 14px; }
.tbl :where(tbody tr:nth-child(even)) { background: color-mix(in srgb, var(--surface) 55%, transparent); }
.tbl :where(tbody tr):hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.tbl tr.hl th:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.facts-table th, .facts-table td { padding: 11px 12px; }

/* faq, stats, related */
.faq-item { padding: 8px 0 12px; }
.faq-item h3 { font-size: 1.1rem; margin: 1em 0 .45em; }
.faq-a p:last-child { margin-bottom: .35em; }
.stat { box-shadow: var(--shadow-sm); }
.related-list li { transition: border-color .15s ease; }
.related-list li:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }

/* footer: brand + support, columns, payments row, legal links */
.ftr { margin-top: 80px; padding-top: 52px; }
.f-logo { display: flex; align-items: center; gap: 10px; }
.f-logo .logo-mark { width: 30px; height: 30px; border-radius: 9px; font-size: .85rem; }
.f-desc { font-size: .9rem; line-height: 1.6; max-width: 48ch; }
.f-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; font-size: .9rem; }
.f-contact-h { flex-basis: 100%; font-weight: 800; }
.f-contact a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; opacity: .85; overflow-wrap: anywhere; }
.f-contact a:hover { opacity: 1; text-decoration: underline; }
.f-col li { margin: .45em 0; }
.f-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 32px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.f-pay-h { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.f-pay-n { margin: 0 0 0 auto; font-size: .85rem; opacity: .75; }
.f-pay + .f-bottom { margin-top: 18px; }
.f-bottom p { margin: 0; }
.f-legal { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0; margin: 0; }
.f-legal li { margin: 0; }
.f-legal a, .langs a { color: inherit; text-decoration: none; }
.f-legal a:hover, .langs a:hover { text-decoration: underline; }
.coins-mini li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 5px; border-radius: 999px; }
.coins-mini .coin-logo { width: 18px; height: 18px; }
@media (max-width: 640px) { .f-pay-n { margin-left: 0; flex-basis: 100%; } }

/* sticky buy bar (site.stickyCta), small screens only */
.sticky-cta { display: none; }
@media (max-width: 760px) {
  .sticky-cta { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: saturate(1.6) blur(10px); border-top: 1px solid var(--border); box-shadow: 0 -10px 26px -18px rgb(0 0 0 / .45); transition: transform .2s ease; }
  .sticky-cta .btn { flex: 1; }
  .sc-note { margin: 0; flex: 0 1 auto; max-width: 46%; font-size: .8rem; line-height: 1.3; color: var(--muted); }
  body.has-sticky { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  body.sticky-off .sticky-cta { transform: translateY(115%); }
}

/* header on small screens: compact buy button; it gives way to the sticky buy bar on phones */
@media (max-width: 860px) {
  .hdr-in { gap: 12px; }
  .hdr .hdr-cta { white-space: nowrap; padding: 7px 12px; font-size: .86rem; }
  .logo { min-width: 0; }
  .logo-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 420px) {
  .hdr .hdr-cta { display: none; }
}
/* small screens: no horizontal overflow at 375 px */
@media (max-width: 520px) {
  .btn { white-space: normal; text-align: center; }
  .hero-btns .btn { flex: 1 1 100%; }
  .cta { padding: 22px 18px; }
  .cta-btns { width: 100%; }
  .cta-btns .btn { flex: 1 1 100%; }
  .hero-price { padding: 22px 16px 18px; }
  .ht-body { font-size: .76rem; padding: 14px; }
  .tbl th, .tbl td, .facts-table th, .facts-table td { padding: 10px 9px; }
  .tbl thead th { font-size: .78rem; letter-spacing: .02em; }
  .step-list > li { padding-left: 48px; }
  .step-list > li.has-ic { padding-left: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
  .btn:hover, .plan:hover, .card-link:hover, .plan.popular, .plan.popular:hover { transform: none; }
}

/* drawn flags (emoji flags show as letters on Windows) + header login link */
img.flag { display: inline-block; width: 20px; height: 15px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent); vertical-align: -2px; margin-right: 8px; }
h1 img.flag-h1 { width: .9em; height: .675em; vertical-align: -.02em; margin-right: .3em; border-radius: 5px; }
.hdr-login { color: var(--text); font-weight: 600; font-size: .95rem; text-decoration: none; white-space: nowrap; }
.hdr-login:hover { color: var(--accent); }

/* visually hidden (screen readers only) */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* pricing = purchase page: included line, tier table, payment reminder (once per page) */
.plan-incl { margin: 14px 0 0; font-size: .9rem; color: var(--muted); }
.plan-incl strong { color: var(--text); }
.tiers { margin-top: 18px; }
.tiers table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tiers th, .tiers td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tiers thead th { background: var(--surface); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tiers tr:last-child th, .tiers tr:last-child td { border-bottom: 0; }
.tiers tr.hl { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.tiers caption { caption-side: top; text-align: left; padding: 10px 12px 4px; font-weight: 700; }
.tiers td:last-child a { font-weight: 700; }
.tier-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; background: var(--accent); color: var(--accent-ink); vertical-align: 1px; }
.pay-terms { margin: 18px 0 0; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: .92rem; }
.band .pay-terms { background: var(--bg); }
.pt-h { margin: 0 0 6px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pay-terms ul { list-style: none; padding: 0; margin: 0; }
.pay-terms li { display: flex; gap: 10px; align-items: flex-start; margin: .35em 0; }
.pay-terms li > svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--accent); }
.cs-solo { margin: 14px 0; font-size: .9rem; color: var(--muted); }

/* paymentSteps */
.pay-table { margin: 10px 0 4px; }
.pay-table table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.pay-table th, .pay-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.pay-table thead th { background: var(--surface); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pay-table tbody th { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.pay-table tr:last-child th, .pay-table tr:last-child td { border-bottom: 0; }
.pay-help { font-size: .9rem; color: var(--muted); }

/* productShots: real client-area screenshots, each one links to the full-size image */
.shots { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.shots.n-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.shot { margin: 0; }
.shot-link { display: block; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); cursor: zoom-in; }
.shot-link img { display: block; width: 100%; height: auto; }
.shot-link:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.shot figcaption { margin-top: 8px; font-size: .9rem; color: var(--muted); }
.shot-tag { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; background: var(--surface-2); color: var(--text); }
.shot-dlg { max-width: min(96vw, 1400px); max-height: 94vh; padding: 0; border: 0; border-radius: var(--radius); background: var(--bg); color: var(--text); }
.shot-dlg::backdrop { background: rgb(0 0 0 / .72); }
.shot-dlg img { display: block; max-width: 100%; max-height: calc(94vh - 52px); width: auto; height: auto; margin: 0 auto; }
.shot-dlg p { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin: 0; padding: 10px 14px; font-size: .9rem; }
.shot-dlg button { font: inherit; font-weight: 700; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; padding: 4px 12px; cursor: pointer; }

/* ranking methodology + dated competitor prices */
.method { margin: 0 0 18px; padding: 14px 18px; border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: var(--surface); font-size: .93rem; }
.method-h { margin: 0 0 4px; font-weight: 800; }
.method p:last-child { margin-bottom: 0; }
.checked { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: .86rem; color: var(--muted); }
.checked > svg { width: 16px; height: 16px; flex: none; }

/* "collapsed": true on any block → folded section (details/summary, works without JS) */
.fold { margin: 26px 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.fold > summary { cursor: pointer; padding: 14px 18px; font: 700 1.05rem/1.3 var(--font-head); list-style-position: inside; }
.fold > summary:hover { color: var(--accent); }
.fold[open] > summary { border-bottom: 1px solid var(--border); }
.fold > :not(summary) { margin: 0; padding: 4px 18px 10px; }
.fold > :not(summary) > h2:first-child { margin-top: .8em; font-size: 1.25rem; }

/* brand logo drawn outside the engine (engine/assets/logos/<slug>/), height fixed, width from the SVG ratio */
.logo.has-img { gap: 0; }
.logo-img { display: block; height: 34px; width: auto; max-width: min(240px, 54vw); }
.f-logo.has-img .logo-img { height: 30px; max-width: 240px; }

/* API reference (/docs/api/, engine/lib/apidocs.mjs): one section per endpoint */
.endpoint { margin-top: 2.4em; padding-top: .2em; border-top: 1px solid var(--border); }
.endpoint > h2 { margin-top: 1em; }
.ep-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: -2px 0 16px; }
.ep-m { font: 800 .82rem/1 var(--font-mono); letter-spacing: .05em; padding: 7px 10px; border-radius: 7px; color: #fff; background: #1d4ed8; }
.ep-get { background: #0f766e; }
.ep-patch, .ep-put { background: #a16207; }
.ep-delete { background: #b91c1c; }
.ep-path { font-size: .95rem; padding: 5px 10px; overflow-wrap: anywhere; }
.ep-auth { display: flex; align-items: flex-start; gap: 8px; font-size: .95rem; color: var(--muted); }
.ep-auth .ic { flex: none; margin-top: .3em; color: var(--accent); }
.ep-h { font-size: 1.02rem; margin: 1.5em 0 .6em; }
.ep-h code { font-size: .85em; }
.ep-tbl { margin: 0 0 1.1em; }
.ep-tbl th:first-child { white-space: nowrap; }
.ep-tbl td { font-size: .95rem; }
.ep-none { color: var(--muted); font-size: .95rem; }
.code-tabs { margin: 0 0 1.4em; }
.code-tabs .ct-bar { display: none; }
.code-tabs.js .ct-bar { display: flex; flex-wrap: wrap; gap: 4px; }
.ct-bar [role="tab"] { min-height: 44px; padding: 0 16px; font: 700 .95rem var(--font-body); color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-bottom: 0; border-radius: 10px 10px 0 0; cursor: pointer; }
.ct-bar [role="tab"]:hover { color: var(--text); }
.ct-bar [aria-selected="true"] { color: #e6e9f2; background: #0b1020; border-color: #0b1020; }
.code-tabs.js .code { border-top-left-radius: 0; margin-bottom: 0; }
.code-tabs.js .code figcaption { display: none; }
.code-tabs .code[hidden] { display: none; }
@media (max-width: 640px) {
  /* parameter tables as stacked cards: no sideways scrolling on phones */
  .ep-tbl { border: 0; box-shadow: none; overflow: visible; }
  .ep-tbl table, .ep-tbl tbody, .ep-tbl tr, .ep-tbl th, .ep-tbl td { display: block; width: auto; }
  .ep-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ep-tbl tr { margin: 0 0 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
  .ep-tbl :where(tbody tr:nth-child(even)) { background: var(--bg); }
  .ep-tbl th, .ep-tbl td { padding: 3px 0; border: 0; white-space: normal; }
  .ep-tbl td::before { content: attr(data-label) ": "; font-weight: 700; color: var(--muted); }
}

/* location pages (plan 3.5): buy card after the quick answer, a sticky side column on wide screens */
.buy-rail { margin: 0 0 30px; }
.buy-card { position: relative; padding: 22px 18px 16px; border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); background: var(--bg); box-shadow: var(--shadow-md); }
.buy-card::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 5px; border-radius: calc(var(--radius) + 4px) calc(var(--radius) + 4px) 0 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.bc-k { display: flex; align-items: center; margin: 0 0 6px; font-weight: 800; font-size: 1rem; line-height: 1.3; }
.buy-card .hp-from { margin-bottom: 14px; }
.buy-card .hp-from strong { font-size: 2.4rem; }
.buy-card .hp-tiers a { min-height: 48px; }
.bc-trust { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; font-size: .95rem; line-height: 1.45; color: var(--muted); }
.bc-trust .ic { flex: none; margin-top: .2em; color: var(--yes); }
@media (min-width: 1040px) {
  .t-location .content.has-buy { position: relative; max-width: none; padding-right: 336px; }
  .content.has-buy > .buy-rail { position: absolute; top: 22px; right: 0; bottom: 0; z-index: 2; width: 300px; margin: 0; }
  .content.has-buy .buy-card { position: sticky; top: 86px; }
}

/* ==========================================================================================================
   3.8 — phones (checked at 375 px on home, pricing, location, guide, FAQ and API pages of the 5 sites):
   no sideways scroll, touch targets of at least 44 px, no text under 15 px, one-line top bar, balanced pills.
   `:root` raises the specificity above the site theme.css rules of the same shape (they load after this file).
   ========================================================================================================== */
.table-wrap { position: relative; } /* keeps absolutely positioned children (.vh) inside the scroll box */
main, .ftr { overflow-wrap: break-word; } /* long URLs in plain text wrap instead of widening the page */
.kicker, .badges li { text-wrap: balance; }
.kicker .k-s { white-space: nowrap; }
.topbar .tb-sep { white-space: pre; }
@media (max-width: 760px) {
  /* top bar: one line, the first statement only (the rest is repeated on the page) */
  :root .topbar { padding: 10px 0; font-size: 15px; line-height: 1.35; }
  .topbar .wrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .tb-sep, .topbar .tb-s ~ .tb-s { display: none; }

  /* text floor: 15 px */
  :root :is(.crumbs ol, .kicker, .meta, .badges li, .qa-label, .hero-note, .lede small, .toc, .toc-h, .table-note, .checked,
    .tbl table, .facts-table, .tbl thead th, .tiers table, .tiers thead th, .tiers caption, .tier-badge, .pay-table table, .pay-table thead th,
    .plan-qty, .plan-unit, .plan-badge, .plan-features, .plan-incl, .pricing-note, .pay-terms, .pt-h, .pay-help, .cs-label, .cs-note, .cs-solo,
    .hp-k, .hp-note, .hp-pay, .hp-badge, .hp-n small, .hp-p small, .coin-row li, .coins-mini li, .coin-note, .coin-name,
    .trust-t, .trust-d, .card p, .card-tag, .stat-l, .stat-n, .lg, .lg-note, .lg-group, .related-list p, .sources ol, .about-box, .disclosure,
    .rank-meta, .pc, .method, .shot figcaption, .shot-tag, .callout, .step-list, .faq-a, .defs, .code figcaption, .copy,
    .ftr, .f-desc, .f-h, .f-contact, .f-bottom, .f-pay-h, .f-pay-n, .sc-note, .hdr-login, .nav a, .menu, .ep-m, .ep-auth, .bc-trust) {
    font-size: 15px;
  }
  :root code { font-size: max(15px, .88em); }
  :root :is(.table-wrap, .facts-table) :is(th, td, caption) { font-size: 15px; }
  :root body :is(.plan .btn, .btn-sm, .hdr-cta, .sticky-cta .btn) { font-size: 15px; }
  :root .code code, :root .ht-body { font-size: 15px; }
  :root .kicker, :root .qa-label, :root .cs-label, :root .hp-k, :root .pt-h, :root .f-pay-h, :root .plan-badge, :root .hp-badge, :root .tier-badge { letter-spacing: .04em; }
  .sc-note { line-height: 1.25; }
  :root .kicker { border-radius: 12px; line-height: 1.45; }

  /* touch targets: 44 px */
  :root .btn { min-height: 46px; }
  .menu { min-height: 44px; }
  .logo, .hdr-login { display: inline-flex; align-items: center; min-height: 44px; }
  .hdr-login { padding: 0 4px; }
  .crumbs ol { margin-top: 12px; row-gap: 0; }
  .crumbs a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  .toc li { margin: 0; }
  .toc a { display: block; padding: 10px 0; }
  .f-col li, .f-legal li, .langs li, .lg li, .related-list li { margin: 0; }
  .f-col a, .f-legal a, .langs a, .f-contact a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .lg a { display: flex; align-items: center; min-height: 44px; }
  .sources li { margin: 0; }
  .sources a { display: inline-block; min-width: 44px; padding: 11px 0; }
  .related-list a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  :root .trust-sec.compact .trust-t { font-size: 15px; }
  .tbl td > a:only-child, .tiers td > a:only-child, .facts-table td > a:only-child { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .fold > summary { min-height: 44px; display: flex; align-items: center; }
  /* copy button: a 44 px tab in the corner of the code box, in the caption bar when there is one */
  .code figcaption { display: flex; align-items: center; min-height: 44px; padding-right: 84px; }
  .code > pre:first-child, .code-tabs.js .code pre { padding-top: 52px; }
  .copy { top: 0; right: 0; min-width: 72px; min-height: 44px; padding: 0 12px; border-radius: 0 0 0 10px; }
  .ht-body { padding: 14px; }
}
.bc-k { font-size: 1.15rem; margin-bottom: 0; }
.bc-p { margin: 0 0 10px; font-size: .95rem; color: var(--muted); }

/* sources: collapsed; competitor references are plain text */
.sources details { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 26px; }
.sources summary { cursor: pointer; font-weight: 700; color: var(--muted); font-size: .92rem; }
.sources ol { margin-top: 10px; }
.src-u { color: var(--muted); font-size: .85em; }
.ext-ref { text-decoration: underline dotted color-mix(in srgb, var(--text) 35%, transparent); text-underline-offset: 3px; }
/* language menu (header): <details>, opens without JS; site.js closes it on outside click / Escape (CONTENT-GUIDE § 8) */
.lang-menu { position: relative; flex: none; }
.lang-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 6px 9px; border-radius: 8px; cursor: pointer; color: var(--muted); font-weight: 600; font-size: .9rem; letter-spacing: .02em; white-space: nowrap; user-select: none; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary::marker { content: ''; }
.lang-menu > summary .ic { width: 18px; height: 18px; }
.lang-menu > summary:hover, .lang-menu[open] > summary { color: var(--text); background: var(--surface); }
.lang-menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lm-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; list-style: none; margin: 0; padding: 6px; min-width: 190px; max-height: min(70vh, 460px); overflow: auto; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 18px 40px -18px rgb(15 23 42 / .45); }
.lm-list li { margin: 0; }
.lm-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: .95rem; }
.lm-list a:hover, .lm-list a:focus-visible { background: var(--surface); }
.lm-list a[aria-current] { font-weight: 700; color: var(--accent); }
.lm-list a[aria-current]::after { content: '✓'; }
.langs a[aria-current] { font-weight: 700; color: var(--text); }
@media (max-width: 860px) { .lang-menu { margin-left: -4px; } }
@media (max-width: 760px) {
  .lang-menu > summary { min-height: 44px; min-width: 44px; justify-content: center; font-size: 15px; }
  .lm-list { position: fixed; left: 16px; right: 16px; top: auto; margin-top: 6px; min-width: 0; }
  .lm-list a { min-height: 44px; font-size: 15px; }
}
/* phones: globe only, tighter header; a drawn logo scales down instead of running under the buttons (long translated labels) */
@media (max-width: 520px) {
  .lang-menu .lm-code { display: none; }
  .hdr-in { gap: 8px; }
  .hdr .logo.has-img { flex: 0 1 auto; min-width: 64px; }
  .hdr .logo-img { height: auto; max-height: 34px; max-width: 100%; }
}

/* ---------------------------------------------------------------- domain-name sites (engine/lib/tlds.mjs) */
/* tldPricing: price table of the extensions. Category chips = radio buttons: the filter works without JavaScript (:has);
   site.js adds sortable headers and a text filter. */
.tldp-f { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; border: 0; }
.tldp-f legend { float: left; margin: 0 6px 0 0; padding: 6px 0; font-size: .85rem; font-weight: 700; color: var(--muted); }
.tldp-f label { position: relative; cursor: pointer; }
.tldp-f input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tldp-f span { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); font-size: .88rem; font-weight: 600; }
.tldp-f input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tldp-f input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.tldp:has(input[value="generic"]:checked) tbody tr:not([data-g~="generic"]),
.tldp:has(input[value="tech"]:checked) tbody tr:not([data-g~="tech"]),
.tldp:has(input[value="business"]:checked) tbody tr:not([data-g~="business"]),
.tldp:has(input[value="country"]:checked) tbody tr:not([data-g~="country"]),
.tldp:has(input[value="lifestyle"]:checked) tbody tr:not([data-g~="lifestyle"]),
.tldp:has(input[value="open"]:checked) tbody tr:not([data-g~="open"]),
.tldp:has(input[value="private"]:checked) tbody tr:not([data-g~="private"]),
.tldp tbody tr.tldp-hide { display: none; }
.tldp td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tldp td.tldp-r { white-space: normal; font-size: .9rem; color: var(--muted); min-width: 9rem; }
.tldp td.tldp-r.warn { color: var(--text); }
.tldp tbody th a { text-decoration: none; font-weight: 800; }
.tldp th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.tldp th button::after { content: '↕'; opacity: .45; font-size: .9em; }
.tldp th[aria-sort="ascending"] button::after { content: '↑'; opacity: 1; }
.tldp th[aria-sort="descending"] button::after { content: '↓'; opacity: 1; }
.tldp th button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tldp-q { display: block; width: 100%; max-width: 320px; margin: 0 0 12px; padding: 9px 12px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); }
/* domainSearch: GET form to the client area + popular extensions */
.dsearch { margin: 26px 0; }
.ds-form { display: flex; gap: 10px; max-width: 680px; }
.ds-form input[type="search"] { flex: 1 1 auto; min-width: 0; padding: 13px 16px; font: inherit; font-size: 1.05rem; color: var(--text); background: var(--bg); border: 1.5px solid var(--border); border-radius: calc(var(--radius) - 4px); }
.ds-form input[type="search"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.ds-form .btn svg { width: 18px; height: 18px; }
.ds-pop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.ds-pop-h { margin: 0; font-size: .85rem; font-weight: 700; color: var(--muted); }
.ds-pop ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ds-pop li { margin: 0; }
.ds-pop a, .ds-pop li > span { display: inline-flex; gap: 6px; align-items: baseline; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; font-size: .9rem; }
.ds-pop a:hover { border-color: var(--accent); }
.ds-pop strong + span { color: var(--muted); font-variant-numeric: tabular-nums; }
.ds-note { font-size: .88rem; color: var(--muted); margin-top: 10px; }
@media (max-width: 560px) {
  .ds-form { flex-direction: column; }
  .ds-form .btn { width: 100%; }
}

/* ---------------------------------------------------------------- travel sites
   Added after site.css by engine/build.mjs for the sites with site.json "kind": "travel" only (the other sites keep
   site.css unchanged). Search forms .trv-search (blocks hotelSearch / flightSearch), measured price card .trv-price
   (fromPrice), status badges .trv-b, index tables .trv-index (acceptanceIndex, priceIndex, networkFees, saleStatus list),
   points of interest .trv-poi, hero search .trv-hero-search (page.hero.search), columns of figures .num and tables as
   cards on phones .trv-stack (engine/lib/layout.mjs), phone buy bar hidden next to a search form (travel.js), every
   statement of the top bar shown on phones. Hooks for a site's theme.css: .trv-home-search (search of the home page),
   .trv-ai-col-<column> (cells of the index tables), <body data-city="<slug>"> (city pages).
   See engine/lib/travel-blocks.mjs and docs/CONTENT-GUIDE.md § 11. */

/* search forms: one line on wide screens, two columns on tablets, stacked on phones; work without JavaScript */
.trv-search { margin: 26px 0; padding: 20px 20px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 4%, var(--bg)); }
.trv-search > h2, .trv-search > h3 { margin-top: 0; }
.trv-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.trv-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 150px; }
.trv-f-m { flex: 1 1 180px; }
.trv-f-s { flex: 0 1 96px; }
.trv-f label { font-size: .8rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
/* help of a field without JavaScript (<noscript> in the label: "3-letter airport code", flightSearch) */
.trv-f label .trv-hint { display: block; font-weight: 400; letter-spacing: 0; text-transform: none; }
.trv-f input, .trv-f select { width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; font: inherit; font-size: 1rem; color: var(--text); background: var(--bg); border: 1.5px solid var(--border); border-radius: calc(var(--radius) - 4px); }
.trv-f input:focus, .trv-f select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.trv-f-wide { flex: 2 1 260px; }
.trv-form .btn { min-height: 46px; flex: 0 0 auto; }
.trv-form .btn svg { width: 18px; height: 18px; }
.trv-swap { flex: 0 0 44px; align-self: flex-end; min-width: 44px; min-height: 46px; border: 1.5px solid var(--border); border-radius: calc(var(--radius) - 4px); background: var(--surface); color: var(--accent); font-size: 1.2rem; cursor: pointer; }
.trv-note, .trv-paused { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: .88rem; color: var(--muted); }
.trv-note svg, .trv-paused svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--accent); }
.trv-paused { margin: 0 0 12px; padding: 10px 12px; border-radius: calc(var(--radius) - 4px); background: color-mix(in srgb, #d97706 10%, var(--bg)); color: var(--text); }
@media (max-width: 640px) {
  .trv-search { padding: 16px 14px 12px; }
  .trv-f { flex: 1 1 calc(50% - 6px); }
  .trv-f-wide, .trv-f-m, .trv-form .btn { flex: 1 1 100%; }
  .trv-swap { display: none; }
}

/* measured price card (fromPrice): a dated statistic, never a promise */
.trv-price { margin: 18px 0; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: var(--radius); background: var(--bg); max-width: 520px; }
.trv-price p { margin: 0 0 6px; }
.trv-price-k { font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.trv-price-v strong { font-size: 1.6rem; line-height: 1.2; }
.trv-price-o, .trv-price-n { font-size: .88rem; color: var(--muted); }
.trv-price .btn { margin-top: 6px; }
.trv-price.trv-none { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.trv-price.trv-none p { display: flex; gap: 8px; align-items: center; margin: 0; color: var(--muted); }
.trv-price.trv-none svg { width: 16px; height: 16px; }
.trv-sample { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: #fef3c7; color: #92400e; vertical-align: middle; }

/* status badges (crypto acceptance, sale status) */
.trv-b { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.trv-b-active, .trv-b-on { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.trv-b-reported { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.trv-b-unverified, .trv-b-unknown { background: var(--surface-2); color: var(--muted); }
.trv-b-stopped, .trv-b-none, .trv-b-off, .trv-b-not-sold { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }
.trv-b-paused { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.trv-b-blocked { background: #fee2e2; color: #991b1b; border-color: #fecaca; }

/* index tables */
.trv-index td, .trv-index th { vertical-align: top; }
.trv-index .trv-sub { display: block; margin-top: 2px; font-size: .78rem; font-weight: 400; color: var(--muted); }
.trv-index code { font-size: .78rem; }
.trv-dl { display: flex; gap: 8px; align-items: center; margin: 10px 0 0; font-size: .9rem; }
.trv-dl svg { width: 16px; height: 16px; color: var(--accent); }
.trv-none-l { padding: 12px 14px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted); font-size: .92rem; }
.trv-sale .trv-b { margin-right: 6px; }

/* points of interest (OpenStreetMap) */
.trv-poi-l { columns: 2 260px; padding-left: 1.1em; }
.trv-poi-l li { break-inside: avoid; margin: 0 0 6px; }
.trv-poi-l small { color: var(--muted); }
.trv-poi-d { color: var(--muted); font-size: .88rem; }
.trv-attr { font-size: .8rem; color: var(--muted); }
.trv-attr a { color: inherit; }
/* wide index tables (acceptanceIndex): readable columns, scroll sideways inside the frame on tablets */
.trv-wide table { min-width: 900px; }
.trv-wide thead th { white-space: nowrap; }
.trv-wide td { min-width: 88px; }
.trv-wide td:nth-child(4) { min-width: 240px; }

/* columns of figures (engine/lib/layout.mjs adds "num"): right-aligned, tabular figures */
.table-wrap .num { text-align: right; font-variant-numeric: tabular-nums; }

/* hero search (page.hero.search): the form of the site's product inside the page head, under the lede */
.page-head .trv-hero-search { margin: 22px 0 6px; }

/* tables as cards on phones (engine/lib/layout.mjs: frame .trv-stack, cells data-label): one card per row, the row
   header as its title, each value under the name of its column; the column headers stay for screen readers */
@media (max-width: 640px) {
  .table-wrap.trv-stack.trv-stack { overflow: visible; border: 0; border-radius: 0; box-shadow: none; background: none; }
  .table-wrap.trv-stack :is(table, tbody, tr) { display: block; width: auto; min-width: 0; border: 0; background: none; }
  .table-wrap.trv-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table-wrap.trv-stack caption { display: block; padding: 0 0 10px; text-align: left; }
  .table-wrap.trv-stack tbody tr { margin: 0 0 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); box-shadow: none; }
  .table-wrap.trv-stack tbody tr:last-child { margin-bottom: 0; }
  .table-wrap.trv-stack tbody tr.hl { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }
  .table-wrap.trv-stack tbody :is(th, td) { padding: 9px 0; border: 0; text-align: left; white-space: normal; background: none; }
  /* the table layout of a theme (sticky first column, fixed widths, column rules) does not apply inside a card */
  .table-wrap.trv-stack.trv-stack tbody :is(th, td) { position: static; display: block; width: auto; min-width: 0; max-width: none; box-shadow: none; }
  .table-wrap.trv-stack tbody tr > :first-child { padding-top: 0; font-size: 1.05rem; }
  .table-wrap.trv-stack tbody tr > [data-label] { border-top: 1px solid var(--border); }
  .table-wrap.trv-stack tbody tr > [data-label]:last-child { padding-bottom: 0; }
  .table-wrap.trv-stack tbody [data-label]::before { content: attr(data-label); display: block; margin: 0 0 2px; font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: var(--muted); }
  .table-wrap.trv-stack .trv-b { white-space: normal; }
}

/* top bar on phones: site.css keeps the first statement only, on one line; the travel sites show every statement, on
   short centred lines, so no text of the bar is hidden (checked at 375 px: no sideways scroll). The " · " separators
   stay hidden there, as in site.css. */
@media (max-width: 760px) {
  .topbar .wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; text-align: center; white-space: normal; overflow: visible; text-overflow: clip; }
  .topbar .tb-s ~ .tb-s { display: inline; }
  .topbar .tb-s { min-width: 0; }
}

/* phone buy bar (site.stickyCta): also tucked away while a search form is on screen (travel.js) */
@media (max-width: 760px) {
  body.trv-sticky-off .sticky-cta { transform: translateY(115%); }
}

/* never broken at its hyphen (the text keeps an ASCII hyphen, no U+2011): a hyphenated word of a step title ("e-ticket"),
   and in the visible text of every page a date (2026-10-12), a token standard (TRC-20, ERC-20, BEP-20) and "e-ticket"
   (engine/lib/layout.mjs nobrTokens) */
.trv-nobr { white-space: nowrap; }

/* empty table cells ("—" or nothing, class trv-empty from engine/lib/layout.mjs markEmptyCells): greyed on phones; in
   the cards of .trv-stack the column name and the dash share one short line */
@media (max-width: 640px) {
  .content td.trv-empty { color: var(--muted); }
  .table-wrap.trv-stack.trv-stack tbody td.trv-empty { display: flex; align-items: baseline; gap: 8px; padding-top: 6px; padding-bottom: 6px; color: var(--muted); opacity: .8; }
  .table-wrap.trv-stack tbody td.trv-empty[data-label]::before { margin: 0; font-weight: 600; }
}

/* FAQ as an accordion (engine/lib/blocks.mjs faq, travel sites): one <details class="faq-item"> per question, the
   question (h3) in its <summary>, the answer always in the page; the first 3 questions of the page are open. Indicator:
   a chevron after the question, pointing down when closed and up when open; the summary takes the keyboard focus
   (Enter / Space toggle it) with the focus ring of site.css or of the theme. */
.trv-faq .faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; list-style: none; cursor: pointer; border-radius: 4px; }
.trv-faq .faq-item > summary::-webkit-details-marker { display: none; }
.trv-faq .faq-item > summary::marker { content: ""; }
.trv-faq .faq-item > summary > h3 { flex: 1 1 auto; min-width: 0; margin: 0; }
.trv-faq .faq-item > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; color: var(--accent); transform: translateY(-25%) rotate(45deg); transition: transform .15s ease; }
.trv-faq .faq-item[open] > summary::after { transform: translateY(25%) rotate(-135deg); }
.trv-faq .faq-item > summary:hover > h3 { color: var(--accent); }
:where(.trv-faq .faq-item > summary):focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 3px; }
.trv-faq .faq-item > .faq-a { margin-top: 10px; }
/* phones: a touch target of 44 px or more around a one-line question, without moving the text (padding + negative margin) */
@media (max-width: 760px) {
  .trv-faq .faq-item > summary { padding-block: 11px; margin-block: -11px; }
}
@media (prefers-reduced-motion: reduce) {
  .trv-faq .faq-item > summary::after { transition: none; }
}

/* Language banner (engine/assets/lang-banner.js, site.json "i18n": {"autoRedirect": false}; default on the travel sites):
   offers the visitor's browser language, never redirects. Fixed at the bottom: no layout shift; above the sticky buy bar. */
.lang-offer { position: fixed; z-index: 40; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 10px 12px 16px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 14px 34px -14px rgb(0 0 0 / .4); font-size: .95rem; line-height: 1.4; }
.lang-offer p { margin: 0; flex: 1 1 200px; }
.lang-offer .btn { flex: none; }
.lang-offer-x { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; margin-left: auto; border: 0; border-radius: 50%; background: transparent; color: inherit; font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.lang-offer-x:hover, .lang-offer-x:focus-visible { background: var(--surface-2); }
@media (max-width: 760px) { body.has-sticky .lang-offer { bottom: calc(82px + env(safe-area-inset-bottom)); } }

/* =====================================================================================================================
   SatFares — design system "Night flight / departure board". Loaded last, after the base and travel styles (same
   file), so it can override anything.

   Identity
   - White, airy pages. One night surface per page (the home hero, or the "Held, not charged" band), plus the footer.
   - Jet blue (--accent #0B5BD3) only for links and actions on light surfaces. Airport-signage amber (--amber #FFB81C)
     only as a signal: IATA codes, small markers, the one action on a night surface. Amber is never text on a light
     background (--amber-ink #8A5A00 when it must be read there).
   - A condensed signage face ("SatFares Head", self-hosted, 500/600/700) for headings and every figure, with tabular
     lining figures wherever numbers are compared; the text face (theme font "grotesk") for running text.
   - Neutral cool greys (--paper, --line), no pale-blue veil, no decorative gradient, no coloured left border, no
     uppercase labels (IATA codes keep their capitals), no tinted icon tiles.
   - 8 px spacing grid (--s-*), one type scale, radii 6 / 8 / 10 / 12 / 16 / 20, three shadows.

   Rules this file follows
   - Never hide indexable text: no display:none or visibility:hidden on content (only on text-free decorative icons and
     on controls), no text in images. The DOM order is never changed for design: the quick answer stays the first block
     (GEO); the home hero is rebuilt visually around the flight search with CSS grid only.
   - Phones: no sideways page scroll at 360-375 px, text 15 px or more, touch targets 44 px or more, visible focus.
   - Translation-ready (es, pt-BR, de, fr, ko, vi): labels wrap instead of being cut and hold 30 % longer strings
     (German), header links fold behind "Menu" below 1200 px, Korean headings use the system face (the signage face has
     no Hangul; it covers Vietnamese), Korean breaks between words, long German words hyphenate on phones. No
     letter-spacing on running text.
   - Colour tokens printed inline in each page (--accent, --surface, --border, --muted…) come from the site settings
     (site.json "theme"); the tokens below extend them.

   Contents: 1 fonts · 2 tokens · 3 base · 4 top bar + header · 5 buttons · 6 page head · 7 home hero · 8 flight search ·
   9 panels (quick answer, callouts, contents, about) · 10 tables + status badges · 11 travel blocks · 12 steps ·
   13 open data list, stats, ranking, route board, coins · 14 FAQ, folds, sources · 15 bands + call to action ·
   16 related · 17 footer · 18 page layouts · 19 sticky bar · 20 phones · 21 languages · forced colours, motion
   ===================================================================================================================== */

/* ---------------------------------------------------------------------------------------------------------- 1. fonts */
/* the signage face, three weights, split by script (the browser downloads only the ranges a page uses) */
@font-face { font-family: "SatFares Head"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/satfares-head-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "SatFares Head"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/satfares-head-latin-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "SatFares Head"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/satfares-head-latin-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "SatFares Head"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/satfares-head-latin-ext-500.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "SatFares Head"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/satfares-head-latin-ext-600.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "SatFares Head"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/satfares-head-latin-ext-700.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "SatFares Head"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/satfares-head-vietnamese-500.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "SatFares Head"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/satfares-head-vietnamese-600.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "SatFares Head"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/satfares-head-vietnamese-700.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
/* arrows ("Lagos → Dubai", the swap button): neither the signage face nor the self-hosted text face has them, so they
   come from an installed system face at a matching semibold weight instead of a thin symbol fallback. If none of these
   faces is installed, this face is skipped and the next family of the stack draws the arrow. */
@font-face { font-family: "SatFares Head"; font-style: normal; font-weight: 500; font-display: swap; src: local("Segoe UI Semibold"), local("SegoeUI-Semibold"), local("Roboto Medium"), local("Roboto-Medium"), local("Helvetica Neue Medium"), local("HelveticaNeue-Medium"); unicode-range: U+2190-2193, U+21C4; }
@font-face { font-family: "SatFares Head"; font-style: normal; font-weight: 600; font-display: swap; src: local("Segoe UI Bold"), local("SegoeUI-Bold"), local("Roboto Bold"), local("Roboto-Bold"), local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"); unicode-range: U+2190-2193, U+21C4; }
@font-face { font-family: "SatFares Head"; font-style: normal; font-weight: 700; font-display: swap; src: local("Segoe UI Bold"), local("SegoeUI-Bold"), local("Roboto Bold"), local("Roboto-Bold"), local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"); unicode-range: U+2190-2193, U+21C4; }

/* --------------------------------------------------------------------------------------------------------- 2. tokens */
:root {
  /* colour (site settings: accent #0B5BD3, accent2 #FFB81C, surface #F5F7FA, surface2 #EDF1F6, border #E3E8EF,
     text #0A1A2F, muted #5B6B7E: 5.5:1 on white, 5.1:1 on --paper) */
  --ink: #0A1A2F;                 /* headings: 17.5:1 on white */
  --ink-2: #2B3A4D;               /* running text: 11.6:1 */
  --ink-3: #3A4A5E;               /* lede */
  --paper: #F5F7FA;               /* light bands, answer panel */
  --paper-2: #EDF1F6;
  --line: #E3E8EF;                /* hairline */
  --line-strong: #CBD3DD;         /* ghost buttons, rules that must show */
  --field: #7A8A9C;               /* text-entry boundaries: 3.5:1 on white (WCAG 1.4.11) */
  --accent-hover: #0A4AAE;
  --accent-soft: #EAF1FD;         /* our own column or row, focused field */
  --night: #07162A;               /* the one dark surface, footer */
  --night-2: #0E223B;             /* raised on the night */
  --night-3: #16304F;
  --night-line: rgb(255 255 255 / .10);
  --night-ink: #E9EFF6;
  --night-muted: #9FB1C6;         /* 8.3:1 on --night */
  --night-lede: #C5D2E0;          /* 11.8:1 on --night */
  --amber: #FFB81C;               /* signal only: 10.5:1 on --night, never text on white */
  --amber-ink: #8A5A00;           /* amber that must be read on white: 5.9:1 */
  --yes-soft: #E8F5EE;
  --no-soft: #FDECEA;

  /* type */
  --font-code: "Cascadia Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --num: tabular-nums lining-nums;            /* every figure set in the signage face */
  --fs-13: .8125rem; --fs-14: .875rem; --fs-15: .9375rem; --fs-16: 1rem; --fs-17: 1.0625rem; --fs-18: 1.125rem;
  --fs-20: 1.25rem; --fs-22: 1.375rem; --fs-24: 1.5rem; --fs-28: 1.75rem; --fs-32: 2rem; --fs-36: 2.25rem;
  --fs-44: 2.75rem; --fs-48: 3rem; --fs-56: 3.5rem; --fs-72: 4.5rem;
  --h1: clamp(2.125rem, 1.25rem + 2.45vw, 3.5rem);           /* 34 → 56 */
  --h1-home: clamp(2.5rem, 1.15rem + 3.75vw, 4.5rem);        /* 40 → 72 */
  --h2: clamp(1.75rem, 1.45rem + .85vw, 2.25rem);            /* 28 → 36 */
  --h3: clamp(1.25rem, 1.18rem + .2vw, 1.375rem);            /* 20 → 22 */
  --lh-body: 1.65;
  --measure: 720px;               /* reading column (the text face is wide: about 70 characters at 17 px) */

  /* spacing: 8 px grid */
  --s-half: 4px; --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 40px; --s-6: 48px; --s-7: 56px;
  --s-8: 64px; --s-10: 80px; --s-12: 96px; --s-15: 120px;
  --section: var(--s-15);         /* rhythm between home sections (72 px on phones) */

  /* radii: tags / fields, chips / buttons / cards, tables / answer panel / search bar, panels */
  --r-xs: 6px; --r-sm: 8px; --r-btn: 10px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px;

  /* shadows (engine names reused, so every engine component gets them) */
  --shadow-sm: 0 1px 2px rgb(7 22 42 / .06);
  --shadow-md: 0 1px 2px rgb(7 22 42 / .04), 0 12px 32px -12px rgb(7 22 42 / .18);
  --shadow-lg: 0 2px 4px rgb(7 22 42 / .06), 0 28px 64px -28px rgb(7 22 42 / .45);

  /* controls: three heights */
  --h-sm: 40px; --h-md: 48px; --h-lg: 56px;
  --focus: var(--accent);
  --hdr-h: 73px;                  /* sticky header (72 px + hairline) */
  --gutter: 16px;                 /* side margin: 16 px on phones, 24 px from 641 px, 32 px from 1,024 px */
  --wrap: calc(1168px + 2 * var(--gutter)); /* always 1,168 px of content */

  /* drawn icons (masks, coloured with a background): one family, 1.75 stroke */
  --i-plane: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='rotate(90 12 12)' d='M12 2c.9 0 1.5.8 1.5 1.8V9l7.5 4.6V16l-7.5-2.3V19l2 1.5V22L12 21l-3.5 1v-1.5l2-1.5v-5.3L3 16v-2.4L10.5 9V3.8C10.5 2.8 11.1 2 12 2z'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E");
  --i-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.5 20h19z'/%3E%3Cpath d='M12 10v4.5M12 17.2v.3'/%3E%3C/svg%3E");
  --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B7E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  /* the home hero's ornament: one dotted great-circle arc drawn entirely inside its 1168 × 150 box (apex at y ≈ 20,
     ends at y 128 and 108), above the title: origin ring and amber destination dot */
  --i-route: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1168 150' fill='none'%3E%3Cpath d='M40 128C300 -12 868 -12 1128 108' stroke='%239FB1C6' stroke-opacity='.45' stroke-width='2' stroke-dasharray='1 11' stroke-linecap='round'/%3E%3Ccircle cx='40' cy='128' r='6.5' stroke='%239FB1C6' stroke-width='2'/%3E%3Ccircle cx='1128' cy='108' r='6.5' fill='%23FFB81C'/%3E%3C/svg%3E");
  /* map grid of the night hero: 80 px squares */
  --map-grid: repeating-linear-gradient(0deg, rgb(255 255 255 / .04) 0 1px, transparent 1px 80px), repeating-linear-gradient(90deg, rgb(255 255 255 / .04) 0 1px, transparent 1px 80px);
}

@media (min-width: 641px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

/* ----------------------------------------------------------------------------------------------------------- 3. base */
html { scroll-padding-top: calc(var(--hdr-h) + 16px); }
.wrap { padding-inline: var(--gutter); }
:root :is(h2, h3), .content h2 { scroll-margin-top: var(--s-1); }
body { color: var(--ink-2); font-size: var(--fs-17); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4 { color: var(--ink); font-family: var(--font-head); font-weight: 600; letter-spacing: 0; font-variant-numeric: var(--num); }
h1 { font-size: var(--h1); font-weight: 700; line-height: 1.04; letter-spacing: -0.01em; }
h2 { font-size: var(--h2); line-height: 1.1; letter-spacing: -0.005em; margin: 2.2em 0 .5em; }
h3 { font-size: var(--h3); line-height: 1.25; margin: 1.7em 0 .45em; }
h4 { font-size: var(--fs-18); line-height: 1.3; }
p, li, .facts-table :is(th, td) { text-wrap: pretty; }
.qa-q, .sources summary { text-wrap: balance; }
strong { color: var(--ink); font-weight: 600; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: color .15s ease, text-decoration-color .15s ease; }
a:hover { color: var(--accent-hover); text-decoration-color: currentColor; text-decoration-thickness: 1px; }

/* focus: one visible ring everywhere (3 px jet blue, offset 2); amber on night surfaces */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.table-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* prose lists: quiet markers, even rhythm (unclassed lists only) */
.content :is(ul, ol):not([class]) > li::marker { color: var(--muted); }
.content ol:not([class]) > li::marker { color: var(--ink); font-family: var(--font-head); font-weight: 600; font-variant-numeric: var(--num); }
.content :is(ul, ol):not([class]) > li { margin: .45em 0; padding-left: .2em; }
.content :is(ul, ol):not([class]) > li > p { margin: 0 0 .35em; }
.content :is(ul, ol):not([class]) > li > p:last-child { margin-bottom: 0; }
blockquote { margin: var(--s-3) 0; padding: 0 0 0 var(--s-3); border-left: 2px solid var(--line-strong); color: var(--ink-3); }

/* codes (IATA, networks, transaction ids): quiet mono chip */
code { padding: .1em .4em; border-radius: 4px; background: var(--paper-2); color: var(--ink); font: 400 .85em/1.4 var(--font-code); font-variant-numeric: tabular-nums; }

/* no uppercase label anywhere (sentence case; :root beats the engine's phone letter-spacing rule) */
:root :is(.kicker, .qa-label, .f-pay-h, .lg-group, .card-tag, .tier-badge, .tbl thead th, .pay-table thead th, .trv-f label, .trv-price-k, .cs-label, .pt-h, .hp-k) { text-transform: none; letter-spacing: 0; }

/* figures line up wherever numbers are compared (cells of figures only: in the text face, tabular figures also widen
   the hyphen of "one-way" or "2026-07-28") */
:is(.table-wrap .num, .lg-note, .stat-v, .trv-price-v, .pay-table td:nth-child(n+3)) { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------------------------- 4. top bar + header */
/* top bar: a quiet paper strip (the night is kept for one surface of the page), the key promise first, an amber dot.
   Above 700 px the line is centred and wraps between its parts if it must (never cut); 700 px and under it swipes. */
:root .topbar { padding: 9px 0; background: var(--paper); border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-13); line-height: 1.4; letter-spacing: 0; text-wrap: balance; }
.topbar .tb-s { white-space: nowrap; }
:root .topbar .tb-sep { white-space: pre-wrap; }
.topbar strong { position: relative; padding-left: 14px; color: var(--ink); font-weight: 600; filter: none; }
.topbar strong::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--amber); }
.topbar .tb-sep { color: var(--muted); }
.topbar a { color: var(--ink); }

/* header: opaque white (a translucent one turns muddy grey over the night hero and shows ghosts of the page) */
.hdr { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--line); box-shadow: none; }
.hdr-in { min-height: 72px; gap: var(--s-3); }
.logo { gap: 10px; color: var(--ink); font: 700 1.375rem/1 var(--font-head); letter-spacing: -0.01em; }
.logo-img { height: 34px; }
.f-logo.has-img .logo-img { height: 30px; }
/* letter mark while no drawn logo is installed: a night square */
.logo-mark { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--night); color: #fff; box-shadow: none; font: 700 1rem/1 var(--font-head); }
.nav { align-self: stretch; gap: 4px; margin-left: var(--s-2); }
.nav a { display: inline-flex; align-items: center; padding: 0 12px; border-radius: 0; background: none; color: var(--ink-2); font: 500 var(--fs-15)/1.2 var(--font-body); white-space: nowrap; transition: color .15s ease; }
.nav a:hover { color: var(--ink); background: none; }
/* current page: ink + a 2 px amber rule on the bottom edge of the header (the signage marker), not a filled pill */
.nav a[aria-current] { position: relative; color: var(--ink); background: none; font-weight: 600; }
.nav a[aria-current]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--amber); }
.nav a:focus-visible { outline-offset: -3px; }
.hdr-login { padding: 8px 4px; color: var(--ink); font-size: var(--fs-15); font-weight: 600; }
.hdr-login:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.hdr .hdr-cta { min-height: var(--h-sm); padding: 0 18px; font-size: var(--fs-15); }
.menu { min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: #fff; color: var(--ink); font: 600 var(--fs-15)/1 var(--font-body); cursor: pointer; }
.menu:hover { border-color: var(--ink); }
.lang-menu > summary { color: var(--ink-2); }
/* 861-1199 px: logo + 5 links + language + Log in + the button need ~1,100 px in English and more in German, so the
   links fold behind Menu there too (the engine folds them at 860 px); the button stays */
@media (min-width: 861px) and (max-width: 1199px) {
  .menu { display: inline-block; margin-left: auto; }
  .nav { display: none; position: absolute; left: 0; right: 0; flex-direction: column; gap: 0; background: #fff; border-bottom: 1px solid var(--line); }
  .nav.open { display: flex; }
}
@media (max-width: 1199px) {
  .nav { top: 72px; align-self: auto; margin-left: 0; padding: 4px var(--gutter) 16px; box-shadow: var(--shadow-md); }
  .nav a { display: flex; min-height: 48px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-16); white-space: normal; }
  .nav a:hover { color: var(--accent); }
  .nav a[aria-current] { padding-left: 14px; }
  .nav a[aria-current]::after { left: 0; right: auto; top: 14px; bottom: 14px; width: 3px; height: auto; border-radius: 2px; }
}
/* WCAG 1.4.12 (user text spacing) and long translations: the button drops to a second row instead of pushing sideways */
@media (min-width: 1200px) { .hdr-in { flex-wrap: wrap; row-gap: 8px; } .hdr-in > .hdr-cta { margin-left: auto; } .hdr-in > .lang-menu + .hdr-login, .hdr-in > .nav + .hdr-login { margin-left: auto; } .hdr-in > .hdr-login + .hdr-cta { margin-left: 0; } }
@media (max-width: 860px) { .logo-txt { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; line-height: 1.15; } }

/* -------------------------------------------------------------------------------------------------------- 5. buttons */
/* three sizes (40 / 48 / 56), radius 10, solid jet-blue primary that deepens on hover and turns ink when pressed */
.btn { min-height: var(--h-md); padding: 0 22px; gap: 8px; border: 1px solid transparent; border-radius: var(--r-btn); font: 600 var(--fs-16)/1.2 var(--font-body); letter-spacing: 0; box-shadow: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
button.btn { font-family: var(--font-body); }
.btn:hover, .btn:active { transform: none; filter: none; }
.btn-sm { min-height: var(--h-sm); padding: 0 16px; font-size: var(--fs-15); }
.btn-lg { min-height: var(--h-lg); padding: 0 28px; font-size: var(--fs-17); }
.btn-primary, .hdr-cta { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: none; }
.btn-primary:hover, .hdr-cta:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; box-shadow: none; filter: none; }
.btn-primary:active { background: var(--ink); border-color: var(--ink); }
.btn-ghost { background: #fff; border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { background: #fff; border-color: var(--ink); color: var(--ink); }
.btn .ic { width: 18px; height: 18px; }

/* ------------------------------------------------------------------------------------------------------ 6. page head */
.crumbs ol { margin-top: var(--s-3); align-items: center; font-size: var(--fs-14); color: var(--muted); }
.crumbs li + li::before { opacity: 1; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs li[aria-current] { color: var(--ink-2); }
.page-head { padding: var(--s-5) 0 var(--s-1); max-width: 880px; }
.page-head h1 { margin: 0 0 var(--s-3); }
/* eyebrow: one language for the slot above every title, the text face in ink with an amber square (never blue) */
:root .kicker { display: flex; align-items: center; gap: 10px; width: fit-content; margin: 0 0 var(--s-2); padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink-2); font: 600 var(--fs-14)/1.35 var(--font-body); }
:root .kicker::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--amber); }
/* location pages (routes "LOS → DXB", cities, departure countries): a departure-board tag. Split-flap face (two
   halves, the hinge a 1 px rule), amber signage letters, the plane glyph in night grey. */
:root .t-location .kicker { position: relative; display: inline-flex; gap: 12px; margin-bottom: var(--s-3); padding: 9px 14px 8px 12px; border-radius: var(--r-xs); background: linear-gradient(var(--night-2) 0 50%, var(--night) 50%); color: var(--amber); font: 600 var(--fs-20)/1.05 var(--font-head); letter-spacing: .09em; font-variant-numeric: var(--num); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .05); }
:root .t-location .kicker::before { width: 16px; height: 16px; border-radius: 0; background: var(--night-muted); -webkit-mask: var(--i-plane) center / contain no-repeat; mask: var(--i-plane) center / contain no-repeat; }
:root .t-location .kicker::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgb(0 0 0 / .35); pointer-events: none; }
.lede { max-width: 36em; color: var(--ink-3); font-size: var(--fs-20); line-height: 1.5; }
.lede p:last-child { margin-bottom: 0; }
.meta { margin-top: var(--s-2); color: var(--muted); font-size: var(--fs-14); }
/* hero proof points: inline checks, never pills */
.badges { gap: 8px 28px; margin: var(--s-3) 0 0; }
.badges li { position: relative; margin: 0; padding: 0 0 0 24px; border: 0; border-radius: 0; background: none; color: var(--ink-2); font-size: var(--fs-15); font-weight: 500; }
.badges li::before { content: ""; position: absolute; left: 0; top: .22em; width: 16px; height: 16px; background: var(--accent); -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.hero-note { color: var(--muted); font-size: var(--fs-15); }
.hero-note .ic { color: var(--accent); }
.hero-btns { gap: 12px; }

/* ----------------------------------------------------------------------------------------------------- 7. home hero */
/* The night hero. DOM order is untouched (the quick answer stays the first block for GEO): .content becomes transparent
   to layout, and the page head + the first flight search form ONE centred night surface. With subgrid, the search
   takes a row of the page head (after "How it works", as in the DOM, so focus and eye follow one path) while the page
   head still wraps the whole hero (site.js watches it to show the phone buy bar only once the hero has scrolled away). The night reaches the screen edges with
   a border image (no seam, no sideways overflow); a faint 80 px map grid and one dotted great-circle arc sit in the
   page head's own box, behind the text. */
.t-home main.wrap { display: flex; flex-direction: column; }
.t-home main.wrap > .content { display: contents; }
.t-home .page-head { order: -2; }
.t-home .content > .trv-fs:not(.trv-fs ~ .trv-fs) { order: -1; }
.t-home .page-head { position: relative; isolation: isolate; width: 100%; max-width: none; margin: 0; padding: var(--s-12) 0 var(--s-10); background: var(--night); color: var(--night-ink); text-align: center; border-image: linear-gradient(var(--night) 0 0) fill 0 / / 0 100vmax; }
.t-home .page-head::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--map-grid); background-position: 50% 0; -webkit-mask-image: radial-gradient(ellipse 70% 75% at 50% 38%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 70% 75% at 50% 38%, #000 30%, transparent 78%); }
@media (min-width: 1100px) {
  .t-home .page-head { padding-top: 136px; }
  .t-home .page-head::after { content: ""; position: absolute; left: 0; right: 0; top: 24px; z-index: -1; height: 150px; background: var(--i-route) no-repeat 50% 0 / 100% 150px; pointer-events: none; }
}
.t-home .page-head h1 { max-width: 14em; margin: 0 auto; color: #fff; font-size: var(--h1-home); font-weight: 700; letter-spacing: -0.015em; line-height: 1; }
.t-home .page-head .kicker { margin: 0 auto var(--s-3); color: var(--night-ink); }
.t-home .page-head .lede { max-width: 36em; margin: var(--s-3) auto 0; color: var(--night-lede); font-size: var(--fs-20); line-height: 1.5; text-wrap: balance; }
.t-home .page-head .lede p { text-wrap: balance; }
.t-home .page-head .lede strong { color: #fff; }
.t-home .page-head .hero-btns { justify-content: center; margin: var(--s-2) 0 0; }
/* the search bar is the hero's action: "How it works" is a quiet text link under the lede, BEFORE the bar (as in the
   DOM, so keyboard focus and the eye take the same path) */
.t-home .page-head .hero-btns .btn { min-height: 44px; padding: 0 2px; gap: 8px; border: 0; border-radius: 4px; background: none; color: #fff; font: 600 var(--fs-17)/1.2 var(--font-body); text-decoration: underline; text-decoration-color: rgb(255 255 255 / .35); text-underline-offset: 6px; }
.t-home .page-head .hero-btns .btn::after { content: ""; flex: none; width: 18px; height: 18px; background: var(--amber); -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat; transition: transform .15s ease; }
.t-home .page-head .hero-btns .btn:hover { background: none; color: #fff; text-decoration-color: #fff; }
.t-home .page-head .hero-btns .btn:hover::after { transform: translateX(3px); }
/* the two notes under the bar (fares, then ID) share one centred 880 px column and one left edge, icons stacked */
.t-home .page-head .hero-note { align-items: flex-start; justify-content: flex-start; justify-self: center; width: 100%; max-width: 880px; margin: 10px 0 0; color: var(--night-muted); font-size: var(--fs-15); line-height: 1.5; text-align: left; }
.t-home .page-head .hero-note .ic { margin-top: .2em; color: var(--night-muted); }
.t-home .page-head .badges { justify-content: center; margin: var(--s-3) 0 0; }
.t-home .page-head .badges li { color: var(--night-ink); }
.t-home .page-head .badges li::before { background: var(--amber); }
.t-home .page-head :focus-visible, .t-home .trv-home-search :focus-visible { outline-color: var(--amber); }
.t-home .content > .trv-fs:not(.trv-fs ~ .trv-fs) { position: relative; z-index: 1; width: 100%; margin: 0; padding: var(--s-5) 0 var(--s-8); background: var(--night); text-align: left; border-image: linear-gradient(var(--night) 0 0) fill 0 / / 0 100vmax; }
/* rows of the hero (the page head is a subgrid of the page): kicker, title, lede, "How it works", the search (a block
   of .content placed in row 5), the ID note, proof points */
@supports (grid-template-rows: subgrid) {
  .t-home main.wrap { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
  .t-home .page-head:not(.has-visual) { grid-column: 1; grid-row: 1 / span 7; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; align-items: start; }
  .t-home .page-head:not(.has-visual) > * { grid-column: 1; }
  .t-home .page-head:not(.has-visual) > .kicker { grid-row: 1; justify-self: center; }
  .t-home .page-head:not(.has-visual) > h1 { grid-row: 2; }
  .t-home .page-head:not(.has-visual) > .lede { grid-row: 3; }
  .t-home .page-head:not(.has-visual) > .hero-btns { grid-row: 4; }
  .t-home .page-head:not(.has-visual) > .hero-note { grid-row: 6; }
  .t-home .page-head:not(.has-visual) > .badges { grid-row: 7; }
  .t-home .page-head:not(.has-visual) ~ .content > .trv-fs:not(.trv-fs ~ .trv-fs) { grid-column: 1; grid-row: 5; margin-top: var(--s-5); padding: 0; background: var(--night); border-image: none; }
}

/* below the hero: one rhythm (120 px, 72 px on phones); text keeps its measure, grids use the width */
.t-home .content > *, .t-home main.wrap > .related { margin-top: var(--section); margin-bottom: 0; }
.t-home .content > .fold { margin-top: var(--s-6); }
.t-home .content > .fold + .fold { margin-top: var(--s-2); }
.t-home .content > .prose { margin-top: var(--s-4); }
.t-home .content > * > h2:first-child, .t-home .band > * > h2:first-child { margin-top: 0; }
.t-home h2 { font-size: clamp(2rem, 1.5rem + 1.45vw, 2.75rem); line-height: 1.06; margin-bottom: var(--s-3); }
.t-home h2 + p { max-width: 64ch; margin-top: calc(-1 * var(--s-1)); color: var(--ink-3); font-size: var(--fs-18); }
.t-home :is(.sec, .steps, .faq, .facts, .prose) > :is(p, ul, ol):not([class]) { max-width: 68ch; }
.t-home .faq-item { max-width: none; }
.t-home :is(.sec, .cards-sec, .faq, .ranking, .tbl, .linkgrid) { max-width: none; }

/* home answer panel (wide screens): the question on the left, the answer on the right, across the full width */
.t-home .content > .quick-answer { width: 100%; max-width: none; margin-top: var(--s-12); }
@media (min-width: 1000px) {
  .t-home .content > .quick-answer { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: var(--s-8); padding: var(--s-7) var(--s-8); border-radius: var(--r-xl); }
  .t-home .quick-answer > .qa-label { grid-column: 1; grid-row: 1; }
  .t-home .quick-answer > .qa-q { grid-column: 1; grid-row: 2; align-self: start; margin: 0; font-size: var(--fs-36); line-height: 1.1; }
  .t-home .quick-answer > .qa-text { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: var(--fs-18); line-height: 1.65; }
}

/* ------------------------------------------------------------------------------------------------ 8. flight search */
/* one segmented bar: each field is a cell (label above its value), cells divided by 1 px gaps on the hairline colour,
   the search button built into the bar. The bar follows its own width (container queries), not the screen's: one row
   from 1,160 px of bar (home hero), From | To + four cells + the button from 640 px (hubs, tablets, the reading
   column), a grouped list on phones. Each layout keeps a floor for the longest option ("Premium economy") and for
   labels about 30 % longer in German, so nothing is cut from 360 px phones up. Cells are placed by input name (not by
   position), so the swap button (hidden without JavaScript) never shifts them, and each whole cell focuses its field.
   Inner pages: no panel around the bar (one frame only), the bar itself carries the shadow. */
.trv-search { container: trvs / inline-size; margin: var(--s-6) 0; padding: 0; border: 0; border-radius: 0; background: none; }
.trv-search > h2, .trv-search > h3 { margin: 0 0 var(--s-2); font-size: var(--fs-24); line-height: 1.2; }
.trv-search > p:not([class]) { max-width: 72ch; color: var(--muted); }
.trv-fs .trv-form {
  display: grid; gap: 1px; align-items: stretch; padding: 0; overflow: hidden;
  /* phones: six tracks, so the two dates share a row equally while Adults (a one-digit number) takes a third and Cabin
     two thirds ("Premium economy" stays whole) */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas: "from from from from from from" "to to to to to to" "dep dep dep ret ret ret" "ad ad cab cab cab cab" "go go go go go go";
  background: var(--line); border: 1px solid var(--field); border-radius: var(--r-lg); box-shadow: var(--shadow-md);
}
.trv-fs .trv-form:focus-within { border-color: var(--ink); }
/* each cell stacks its label over its value from the bottom: when a translated label takes two lines, the values of a
   row still share one baseline */
.trv-fs .trv-f { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 0; min-width: 0; min-height: 68px; padding: 10px 16px 0; background: #fff; transition: background-color .15s ease; }
.trv-fs .trv-f:has(> [name="from"]) { grid-area: from; }
.trv-fs .trv-f:has(> [name="to"]) { grid-area: to; }
.trv-fs .trv-f:has(> [name="depart"]) { grid-area: dep; }
.trv-fs .trv-f:has(> [name="return"]) { grid-area: ret; }
.trv-fs .trv-f:has(> [name="adults"]) { grid-area: ad; }
.trv-fs .trv-f:has(> [name="cabin"]) { grid-area: cab; }
.trv-fs .trv-form > [type="submit"] { grid-area: go; }
.trv-fs .trv-f:hover { background: #FAFBFC; }
.trv-fs .trv-f:focus-within { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); z-index: 1; }
/* labels wrap between words (long translations); only a single word longer than its cell hyphenates (see 21) */
:root .trv-fs .trv-f label { margin: 0; color: var(--muted); font: 500 var(--fs-13)/1.3 var(--font-body); overflow-wrap: normal; hyphens: manual; cursor: pointer; }
.trv-fs .trv-f label::after { content: ""; position: absolute; inset: 0; } /* the whole cell is the label's hit area */
.trv-fs .trv-f :is(input, select) { position: relative; z-index: 1; width: 100%; min-height: 40px; margin: 0; padding: 0 0 4px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: 500 var(--fs-17)/1.3 var(--font-body); box-shadow: none; text-overflow: ellipsis; }
.trv-fs .trv-f :is(input, select):focus { border: 0; box-shadow: none; outline: none; }
.trv-fs .trv-f input::placeholder { color: #66768A; opacity: 1; } /* 4.6:1 on white (placeholder, not content) */
/* airport codes: the signage face, tracked like a departure board */
.trv-fs .trv-f :is(input[name="from"], input[name="to"]) { font: 600 var(--fs-22)/1.25 var(--font-head); letter-spacing: .06em; text-transform: uppercase; }
.trv-fs .trv-f :is(input[name="from"], input[name="to"])::placeholder { font: 400 var(--fs-15)/1.3 var(--font-body); letter-spacing: 0; text-transform: none; }
.trv-fs .trv-f select { appearance: none; -webkit-appearance: none; padding-right: 22px; background: var(--i-chevron) no-repeat 100% 42% / 18px; text-overflow: ellipsis; cursor: pointer; }
.trv-fs .trv-f input[list]::-webkit-calendar-picker-indicator { display: none !important; } /* datalist arrow (control chrome, no text): the typed code finds the suggestions */
.trv-fs .trv-f input[type="date"] { font-variant-numeric: tabular-nums; cursor: pointer; }
.trv-fs .trv-f input[type="date"]::-webkit-calendar-picker-indicator { margin-inline-start: 4px; opacity: .55; cursor: pointer; }
.trv-fs .trv-f input[type="number"] { font-variant-numeric: tabular-nums; }
/* swap: a round button on the divider between From and To */
.trv-fs .trv-swap:not([hidden]) { grid-area: from; z-index: 2; align-self: end; justify-self: end; display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: 0 14px -22px 0; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: #fff; color: var(--ink); font: 600 1.05rem/1 var(--font-head); box-shadow: var(--shadow-sm); cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.trv-fs .trv-swap:hover { border-color: var(--accent); color: var(--accent); }
.trv-fs .trv-form > .btn { align-self: stretch; min-height: var(--h-lg); margin: 0; padding: 0 24px; border: 0; border-radius: 0; font-size: var(--fs-17); box-shadow: none; }
.trv-fs .trv-form > .btn:focus-visible { outline-offset: -5px; outline-color: #fff; }
/* grouped list (narrow phones): 12 px cell sides and a smaller chevron keep "Premium economy" whole in a 300 px bar */
@container trvs (max-width: 639.98px) {
  .trv-fs .trv-f { padding-inline: 14px; }
  .trv-fs .trv-f select { padding-right: 20px; background-size: 16px; }
  .trv-fs .trv-swap:not([hidden]) { margin-right: 12px; }
}
/* From | To, then four cells: the tracks 1 + 1 | .75 + 1.25 keep From and To equal while Adults gives room to Cabin */
@container trvs (min-width: 640px) {
  .trv-fs .trv-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .75fr) minmax(0, 1.25fr); grid-template-areas: "from from to to" "dep ret ad cab" "go go go go"; }
  .trv-fs .trv-f:has(> [name="to"]) { padding-left: 32px; }
  .trv-fs .trv-swap:not([hidden]) { grid-area: to; align-self: center; justify-self: start; width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: 0 0 0 -22px; }
}
/* one row from 1,160 px of bar (the home hero on wide screens). Floors: a whole date (150 px), "Erwachsene" over Adults
   (100 px), "Premium economy" in Cabin (204 px); From and To share the rest, enough for their placeholder (~190 px) */
@container trvs (min-width: 1160px) {
  .trv-fs .trv-form { grid-template-columns: minmax(198px, 1.35fr) minmax(198px, 1.35fr) minmax(148px, 1fr) minmax(148px, 1fr) minmax(100px, .6fr) minmax(190px, 1.1fr) auto; grid-template-areas: "from to dep ret ad cab go"; }
  .trv-fs .trv-f { justify-content: flex-end; padding: 12px 16px 8px; }
  .trv-fs .trv-f:has(> [name="to"]) { padding-left: 30px; }
  .trv-fs .trv-f :is(input, select) { font-size: var(--fs-16); }
  .trv-fs .trv-f :is(input[name="from"], input[name="to"])::placeholder { font-size: var(--fs-14); }
  .trv-fs .trv-f input[type="date"] { font-size: var(--fs-15); }
  .trv-fs .trv-f input[type="date"]::-webkit-calendar-picker-indicator { width: 14px; height: 14px; margin-inline-start: 2px; padding: 0; }
  .trv-fs .trv-form > .btn { min-height: 0; padding: 0 20px; font-size: var(--fs-16); white-space: nowrap; }
}
.trv-note { max-width: 72ch; margin-top: var(--s-2); color: var(--muted); font-size: .90625rem; line-height: 1.5; }
.trv-note svg { color: var(--muted); }
.trv-paused { border: 1px solid #F1DFAF; background: #FFF8E6; color: var(--ink-2); }
/* popular routes: signage chips with a plane glyph */
.trv-search .ds-pop { gap: 8px 10px; margin-top: var(--s-2); }
.trv-search .ds-pop-h { margin: 0 4px 0 0; color: var(--muted); font-size: var(--fs-14); font-weight: 600; }
.trv-search .ds-pop ul { gap: 8px; }
:root .trv-search .ds-pop ul > li { margin: 0; }
.trv-search .ds-pop :is(a, li > span) { position: relative; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--ink); font: 600 var(--fs-15)/1.2 var(--font-head); text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.trv-search .ds-pop :is(a, li > span)::before { content: ""; flex: none; width: 14px; height: 14px; background: var(--muted); -webkit-mask: var(--i-plane) center / contain no-repeat; mask: var(--i-plane) center / contain no-repeat; }
.trv-search .ds-pop a:hover { border-color: var(--accent); color: var(--accent); }

/* home: the bar on the night, white cells, the amber action built in; label on the bar's left edge */
.t-home .trv-fs > h2 { margin: 0 0 12px; color: #fff; font: 600 var(--fs-16)/1.3 var(--font-body); letter-spacing: 0; text-align: left; }
.t-home .trv-fs .trv-form { border: 0; border-radius: var(--r-xl); box-shadow: var(--shadow-lg), 0 0 0 1px rgb(255 255 255 / .06); background: var(--line); }
.t-home .trv-fs .trv-form:focus-within { border: 0; }
@container trvs (min-width: 1160px) { .t-home .trv-fs .trv-f { min-height: 80px; } }
.t-home .trv-fs .trv-form > .btn-primary { background: var(--amber); border-color: var(--amber); color: var(--night); }
.t-home .trv-fs .trv-form > .btn-primary:hover { background: #FFC94D; border-color: #FFC94D; color: var(--night); }
.t-home .trv-fs .trv-form > .btn-primary:active { background: #E6A200; }
.t-home .trv-fs .trv-form > .btn:focus-visible { outline-color: var(--night); }
.t-home .trv-fs .ds-pop { justify-content: center; margin-top: var(--s-3); }
.t-home .trv-fs .ds-pop-h { flex-basis: 100%; margin: 0; color: var(--night-muted); text-align: center; }
.t-home .trv-fs .ds-pop ul { justify-content: center; }
.t-home .trv-fs .trv-note { justify-content: flex-start; max-width: 880px; margin: var(--s-3) auto 0; color: var(--night-muted); font-size: var(--fs-15); text-align: left; }
.t-home .trv-fs .trv-note svg { color: var(--night-muted); }

/* ------------------------------------------------------------------------------- 9. panels: answer, callouts, contents */
/* answer panel: paper, no edge colour; the label an eyebrow with the amber square, the question in the signage face */
.quick-answer { margin: var(--s-3) 0 var(--s-6); padding: 28px var(--s-4) 30px; background: var(--paper); border: 0; border-radius: var(--r-lg); box-shadow: none; }
.qa-label { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--ink-2); font: 600 var(--fs-14)/1.3 var(--font-body); }
.qa-label::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--amber); }
.qa-q { margin: 0 0 12px; color: var(--ink); font: 600 var(--fs-24)/1.25 var(--font-head); font-variant-numeric: var(--num); }
.qa-text { color: var(--ink-2); font-size: var(--fs-17); line-height: 1.65; }
.qa-text p { margin-bottom: .7em; }
.qa-text p:last-child { margin-bottom: 0; }
/* callouts: paper panels with a drawn icon (decorative: the title and text carry the meaning) */
.callout, .method { background: var(--paper); border: 0; border-radius: var(--r-md); }
.callout { position: relative; margin: var(--s-4) 0; padding: 18px var(--s-3) 18px 56px; color: var(--ink-2); font-size: var(--fs-16); }
.callout::before { content: ""; position: absolute; left: 20px; top: 21px; width: 20px; height: 20px; background: var(--ink-2); -webkit-mask: var(--i-info) center / contain no-repeat; mask: var(--i-info) center / contain no-repeat; }
.callout.warn { background: #FFF6E0; }
.callout.warn::before { background: var(--amber-ink); -webkit-mask-image: var(--i-warn); mask-image: var(--i-warn); }
.callout-h, .method-h { margin: 0 0 4px; color: var(--ink); font-weight: 600; }
.method { margin: 0 0 var(--s-3); padding: var(--s-2) var(--s-3); font-size: var(--fs-16); }
/* contents: a quiet list ("On this page"); sticky rail or a single swipeable line, see 18 and 20 */
.toc { max-width: none; margin: var(--s-2) 0 var(--s-4); padding: 0; border: 0; border-radius: 0; background: none; font-size: var(--fs-15); }
.toc-h { margin: 0 0 8px; color: var(--muted); font-size: var(--fs-14); font-weight: 600; }
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc li { margin: 0; break-inside: avoid; }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; }
/* about the site: one quiet line block after the related pages (it repeats the footer, so it stays small) */
.about-box { max-width: var(--measure); margin: var(--s-4) 0 0; padding: var(--s-3) 0 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; color: var(--muted); font-size: var(--fs-14); line-height: 1.6; }
.about-h { display: inline; margin: 0; color: var(--ink-2); font-size: var(--fs-14); font-weight: 500; }
.about-h + p { display: inline; }
.about-h::after { content: " "; }

/* ------------------------------------------------------------------------------- 10. tables + status badges */
/* framed, white header with one firm rule, hairline rows, paper on hover, tabular figures. At every width, a soft
   shadow on the right edge of the frame while more columns hide there (it disappears at the end of the scroll and on
   tables that fit) */
:is(.table-wrap, .band .table-wrap) { border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: none; background: linear-gradient(to left, #fff 45%, rgb(255 255 255 / 0)) right / 40px 100% no-repeat local, linear-gradient(to left, rgb(10 26 47 / .12), rgb(10 26 47 / 0)) right / 14px 100% no-repeat scroll, #fff; }
.table-wrap > table { margin: 0; }
.tbl table, .facts-table { font-size: var(--fs-15); line-height: 1.5; }
.tbl :is(th, td) { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.tbl thead th, .pay-table thead th { padding-block: 12px; background: #fff; color: var(--muted); font: 600 var(--fs-13)/1.35 var(--font-body); border-bottom: 1px solid rgb(10 26 47 / .12); vertical-align: bottom; }
.tbl tbody th { color: var(--ink); font-weight: 600; }
.tbl tbody th a { color: var(--ink); text-decoration: none; }
.tbl tbody th a:hover { color: var(--accent); text-decoration: underline; }
.tbl td a { text-decoration: none; }
.tbl td a:hover { text-decoration: underline; }
.tbl :where(tbody tr:nth-child(even)) { background: transparent; }
.tbl :where(tbody tr):hover, .pay-table tbody tr:hover { background: var(--paper); }
.tbl tr.hl, .tbl tr.hl:hover { background: var(--accent-soft); }
.tbl tr.hl th { color: var(--ink); }
.tbl tr.hl th:first-child { box-shadow: none; }
.tbl caption { padding: 12px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-13); line-height: 1.45; }
.table-note { max-width: 72ch; margin-top: var(--s-2); color: var(--muted); font-size: var(--fs-14); }
.table-note p:last-child { margin-bottom: 0; }
.checked { margin-top: var(--s-2); color: var(--muted); font-size: var(--fs-14); }
.tbl, .facts { margin: var(--s-5) 0; }
/* an ISO date (2026-09-07) or a short figure never splits at its hyphen: every column keeps a readable floor (wide screens;
   phones get cards, see 20) */
@media (min-width: 761px) { .tbl:not(.trv-wide) td { min-width: 7.5rem; } }
.cmp tbody th { min-width: 9rem; }
/* comparison. Two shapes: we are a COLUMN (two offers compared point by point, ours last): that column is capped by a
   3 px accent rule and tinted; we are a ROW (several sellers, our row marked .hl): only that row is tinted, a 3 px accent
   rule on its left edge. Yes / no glyphs in round chips (the glyph stays the text: it is drawn heavier, not replaced). */
.tbl.cmp:not(:has(tbody tr.hl)) :is(td, thead th):last-child { background: var(--accent-soft); }
.tbl.cmp:not(:has(tbody tr.hl)) thead th:last-child { color: var(--ink); font-weight: 700; box-shadow: inset 0 3px 0 var(--accent); }
.tbl.cmp tbody tr:hover > :is(td, th) { background: var(--paper); }
.tbl.cmp:not(:has(tbody tr.hl)) tbody tr:hover > td:last-child { background: #DFEAFB; }
.tbl tbody tr.hl > :is(th, td), .tbl tbody tr.hl:hover > :is(th, td) { background: var(--accent-soft); }
.tbl tbody tr.hl > :first-child { box-shadow: inset 3px 0 0 var(--accent); }
:is(.tbl, .facts-table) :is(.yes, .no) { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 700 13px/1 "Segoe UI Symbol", "Segoe UI", system-ui, sans-serif; -webkit-text-stroke: .5px currentColor; vertical-align: middle; }
:is(.tbl, .facts-table) .yes { background: var(--yes-soft); color: var(--yes); }
:is(.tbl, .facts-table) .no { background: var(--paper-2); color: var(--muted); }

/* key facts: a spec sheet. No tinted label column: label in the text face, muted; value in ink; hairlines only */
.facts-table { border: 1px solid var(--line); border-radius: var(--r-md); border-collapse: separate; border-spacing: 0; overflow: hidden; background: #fff; }
.facts-table :is(th, td) { padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.facts-table tr:last-child > * { border-bottom: 0; }
.facts-table th { width: 34%; background: none; color: var(--muted); font-size: var(--fs-14); font-weight: 500; line-height: 1.5; padding-top: 16px; }
.facts-table td { color: var(--ink); font-size: var(--fs-16); }
.facts > h2 + .facts-table, .facts > h2 + p + .facts-table { margin-top: var(--s-3); }

/* confirmation times (paymentSteps) */
.pay-table { position: relative; z-index: 1; margin: var(--s-2) 0 var(--s-1); }
.pay-table table { font-size: var(--fs-15); }
.pay-table :is(th, td) { padding: 12px 16px; vertical-align: middle; border-bottom: 1px solid var(--line); }
.pay-table tbody th { display: table-cell; white-space: nowrap; color: var(--ink); font: 600 var(--fs-16)/1.3 var(--font-head); letter-spacing: .02em; }
.pay-table :is(thead th, td):nth-child(n+3) { text-align: right; }
.pay-table td:nth-child(n+3) { color: var(--ink); font: 600 var(--fs-17)/1.3 var(--font-head); font-variant-numeric: var(--num); white-space: nowrap; }
.coin-logo { max-width: none; }
.pay-table tbody th .coin-logo { display: inline-block; width: 20px; height: 20px; margin: -3px 10px 0 0; vertical-align: middle; }
.pay-help { color: var(--muted); font-size: var(--fs-15); }

/* status badges (acceptance index, sale status): a tinted tag with a status dot; text 4.5:1 or more on its tint */
.trv-b { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 3px 9px 3px 8px; border: 0; border-radius: var(--r-xs); font: 600 var(--fs-13)/1.4 var(--font-body); white-space: normal; text-align: left; }
.trv-b::before { content: ""; flex: none; align-self: flex-start; width: 7px; height: 7px; margin-top: calc(.7em - 3.5px); border-radius: 50%; background: currentColor; }
.trv-b-active { background: var(--yes-soft); color: #126B41; }
.trv-b-reported { background: var(--accent-soft); color: var(--accent-hover); }
.trv-b-unverified, .trv-b-unknown { background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); color: #4A5A6E; }
.trv-b-unverified::before, .trv-b-unknown::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.trv-b-stopped { background: #FBEEE8; color: #8F3410; }
.trv-b-none, .trv-b-off, .trv-b-not-sold { background: var(--paper-2); color: #3D4B5C; }
.trv-b-paused { background: #FFF4D6; color: #6E4700; }
.trv-b-blocked { background: var(--no-soft); color: var(--no); }
/* "available with us": the same on every row, so it is plain text with a green dot, not a tag */
.trv-b-on { padding: 0; background: none; color: var(--ink-2); font-weight: 500; }
.trv-b-on::before { background: var(--yes); }

/* acceptance indexes (8 columns: airlines or sellers). The section is a size container, so the layout follows the room
   the table really has, not the screen width:
   - 1,060 px or more (data pages on wide screens): one line per entry, a fixed column plan over the full width;
   - 640 to 1,059 px (the reading column, folds, tablets): each entry on two lines of one grid, the header on the same
     two lines, so no column hides and none is squeezed;
   - under 640 px (phones): compact cards (see 20). */
.trv-index .trv-sub { margin-top: 3px; color: var(--muted); font-size: var(--fs-13); font-weight: 400; }
.trv-index code { font-size: .8rem; }
.trv-wide { container: tw / inline-size; }
.trv-wide table { min-width: 1060px; font-size: .90625rem; line-height: 1.5; }
.trv-wide thead th { white-space: normal; }
.trv-wide :is(th, td) { padding: 16px 12px; }
.trv-wide td { min-width: 0; }
.trv-wide tbody th { font: 600 var(--fs-17)/1.3 var(--font-head); }
.trv-wide td.trv-ai-col-checked, .trv-wide td.trv-ai-col-since { color: var(--muted); font-size: var(--fs-13); }
.trv-wide td.trv-ai-col-since { padding-inline: 8px; }
.trv-wide td.trv-ai-col-how { color: var(--ink); }
.trv-wide .trv-b:not(.trv-b-on) { white-space: normal; }
@container tw (min-width: 1060px) {
  .trv-wide table { table-layout: fixed; width: 100%; }
  /* airlines: Name · Accepts crypto directly · How · Conditions · Dates · Checked · Source · Sold by us. The status
     column holds the longest badge ("Reported (not confirmed on the official website)") on two lines; Checked holds
     "October 12, 2026" on one line and its source on the next */
  .trv-wide:has(tbody td:nth-child(2) > .trv-b) thead th:nth-child(1) { width: 9%; }
  .trv-wide:has(tbody td:nth-child(2) > .trv-b) thead th:nth-child(2) { width: 17.5%; }
  .trv-wide:has(tbody td:nth-child(2) > .trv-b) thead th:nth-child(3) { width: 11%; }
  .trv-wide:has(tbody td:nth-child(2) > .trv-b) thead th:nth-child(4) { width: 27%; }
  .trv-wide:has(tbody td:nth-child(2) > .trv-b) thead th:nth-child(5) { width: 7.5%; }
  .trv-wide:has(tbody td:nth-child(2) > .trv-b) thead th:nth-child(6) { width: 11%; }
  .trv-wide:has(tbody td:nth-child(2) > .trv-b) thead th:nth-child(7) { width: 9.5%; }
  .trv-wide:has(tbody td:nth-child(2) > .trv-b) thead th:nth-child(8) { width: 7.5%; }
  .trv-wide:has(tbody td:nth-child(2) > .trv-b) :is(th, td) { padding-inline: 10px; }
  .trv-wide:has(tbody td:nth-child(2) > .trv-b) :is(td.trv-ai-col-direct, td.trv-ai-col-how, td.trv-ai-col-checked, td.trv-ai-col-sold) { padding-inline: 8px; }
  .trv-wide:has(tbody td:nth-child(2) > .trv-b) td.trv-ai-col-since { padding-inline: 6px; white-space: nowrap; } /* "2026-07-28", "→ 2026-03": never split */
  .trv-wide:has(tbody td:nth-child(2) > .trv-b) td.trv-ai-col-source { font-size: var(--fs-13); line-height: 1.45; } /* metadata, like Dates and Checked */
  .trv-wide:has(tbody td:nth-child(2) > .trv-b) td.trv-ai-col-direct .trv-b { padding: 3px 8px 3px 7px; font-size: var(--fs-13); line-height: 1.3; }
  /* sellers: Seller · Company · Coins and networks · Refund · Published fees · ID checks · Checked · Source */
  .trv-wide:not(:has(tbody td:nth-child(2) > .trv-b)) thead th:nth-child(1) { width: 11%; }
  .trv-wide:not(:has(tbody td:nth-child(2) > .trv-b)) thead th:nth-child(2) { width: 10%; }
  .trv-wide:not(:has(tbody td:nth-child(2) > .trv-b)) thead th:nth-child(3) { width: 16%; }
  .trv-wide:not(:has(tbody td:nth-child(2) > .trv-b)) thead th:nth-child(4) { width: 18%; }
  .trv-wide:not(:has(tbody td:nth-child(2) > .trv-b)) thead th:nth-child(5) { width: 13%; }
  .trv-wide:not(:has(tbody td:nth-child(2) > .trv-b)) thead th:nth-child(6) { width: 14%; }
  .trv-wide:not(:has(tbody td:nth-child(2) > .trv-b)) thead th:nth-child(7) { width: 8%; }
  .trv-wide:not(:has(tbody td:nth-child(2) > .trv-b)) thead th:nth-child(8) { width: 10%; }
  .trv-wide :is(th, td) { overflow-wrap: break-word; }
}
/* two-line entries. Airlines, 5 tracks: Name · Accepts crypto directly · How · Dates · Sold by us, then
   Conditions (3 tracks) · Checked · Source. Sellers, 6 tracks: Seller · Company · Coins and networks (2) · Checked ·
   Source, then Refund (2) · Published fees (2) · ID checks (2). Cells are placed by column number, the DOM order and
   the table semantics stay as they are. */
@container tw (min-width: 640px) and (max-width: 1059.98px) {
  .tbl.trv-wide table { display: flex; flex-direction: column; width: 100%; min-width: 0; }
  .tbl.trv-wide caption { order: 1; }
  .tbl.trv-wide :is(thead, tbody) { display: block; }
  .tbl.trv-wide tr { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-areas: "c1 c2 c3 c5 c8" "c4 c4 c4 c6 c7"; padding: 10px 4px; border-bottom: 1px solid var(--line); }
  .tbl.trv-wide:not(:has(tbody td:nth-child(2) > .trv-b)) tr { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "c1 c2 c3 c3 c7 c8" "c4 c4 c5 c5 c6 c6"; }
  .tbl.trv-wide thead tr { padding: 4px; border-bottom-color: rgb(10 26 47 / .12); }
  .tbl.trv-wide tbody tr:last-child { border-bottom: 0; }
  .tbl.trv-wide tr.hl { background: var(--accent-soft); }
  .tbl.trv-wide :is(th, td):nth-child(n) { display: block; position: static; width: auto; min-width: 0; max-width: none; padding: 6px 12px; border: 0; background: none; box-shadow: none; overflow-wrap: break-word; }
  .tbl.trv-wide :is(th, td):nth-child(1) { grid-area: c1; }
  .tbl.trv-wide :is(th, td):nth-child(2) { grid-area: c2; }
  .tbl.trv-wide :is(th, td):nth-child(3) { grid-area: c3; }
  .tbl.trv-wide :is(th, td):nth-child(4) { grid-area: c4; }
  .tbl.trv-wide :is(th, td):nth-child(5) { grid-area: c5; }
  .tbl.trv-wide :is(th, td):nth-child(6) { grid-area: c6; }
  .tbl.trv-wide :is(th, td):nth-child(7) { grid-area: c7; }
  .tbl.trv-wide :is(th, td):nth-child(8) { grid-area: c8; }
}
/* figure indexes: market fares (Route · Lowest fare · Departure · Fares observed · Observed on) and network fees. A
   departure board: the route in the signage face, no underline (on hover only); the fare as the row's figure; dates
   quiet. Columns 2 and 4 hold figures, right-aligned. */
.trv-index:not(.trv-wide, .trv-sale-list) :is(thead th, td):is(:nth-child(2), :nth-child(4)) { text-align: right; }
.trv-index:not(.trv-wide, .trv-sale-list) tbody th { font: 600 var(--fs-17)/1.3 var(--font-head); font-variant-numeric: var(--num); }
.trv-index:not(.trv-wide, .trv-sale-list) td:nth-child(2) { color: var(--ink); font: 700 var(--fs-20)/1.2 var(--font-head); font-variant-numeric: var(--num); }
.trv-index:not(.trv-wide, .trv-sale-list) td:nth-child(4) { color: var(--ink); font: 600 var(--fs-17)/1.2 var(--font-head); font-variant-numeric: var(--num); }
.trv-index:not(.trv-wide, .trv-sale-list) td:is(:nth-child(3), :nth-child(5)) { color: var(--muted); font-size: var(--fs-14); }
.trv-index:not(.trv-wide, .trv-sale-list) :is(tbody th, td) { padding-block: 15px; vertical-align: middle; }
@media (min-width: 761px) {
  .trv-index:not(.trv-wide, .trv-sale-list) thead th { overflow-wrap: normal; }
  .trv-index:not(.trv-wide, .trv-sale-list) td:is(:nth-child(3), :nth-child(5)) { white-space: nowrap; }
}
@media (min-width: 1000px) {
  .trv-index:not(.trv-wide, .trv-sale-list) table:has(thead th:nth-child(5):last-child) { table-layout: fixed; }
  .trv-index:not(.trv-wide, .trv-sale-list) table:has(thead th:nth-child(5):last-child) thead th:nth-child(1) { width: 34%; }
  .trv-index:not(.trv-wide, .trv-sale-list) table:has(thead th:nth-child(5):last-child) thead th:nth-child(2) { width: 14%; }
  .trv-index:not(.trv-wide, .trv-sale-list) table:has(thead th:nth-child(5):last-child) thead th:nth-child(3) { width: 20%; padding-left: 32px; }
  .trv-index:not(.trv-wide, .trv-sale-list) table:has(thead th:nth-child(5):last-child) thead th:nth-child(4) { width: 12%; }
  .trv-index:not(.trv-wide, .trv-sale-list) table:has(thead th:nth-child(5):last-child) thead th:nth-child(5) { width: 20%; padding-left: 32px; }
  .trv-index:not(.trv-wide, .trv-sale-list) table:has(thead th:nth-child(5):last-child) td:is(:nth-child(3), :nth-child(5)) { padding-left: 32px; }
  .trv-index:not(.trv-wide, .trv-sale-list) table:has(thead th:nth-child(5):last-child) td { min-width: 0; }
  /* the figure index fits its frame from here: no inner scroll, so its header row sticks under the site header */
  .trv-index:not(.trv-wide, .trv-sale-list) .table-wrap:has(> table thead th:nth-child(5):last-child) { overflow: visible; }
  .trv-index:not(.trv-wide, .trv-sale-list) table:has(thead th:nth-child(5):last-child) thead th { position: sticky; top: var(--hdr-h); z-index: 2; box-shadow: 0 1px 0 rgb(10 26 47 / .12); }
  .trv-index:not(.trv-wide, .trv-sale-list) table:has(thead th:nth-child(5):last-child) thead th:first-child { border-top-left-radius: calc(var(--r-md) - 1px); }
  .trv-index:not(.trv-wide, .trv-sale-list) table:has(thead th:nth-child(5):last-child) thead th:last-child { border-top-right-radius: calc(var(--r-md) - 1px); }
}
.trv-index .disclosure { max-width: 80ch; margin-top: var(--s-2); color: var(--muted); font-size: var(--fs-13); }
.trv-dl { margin-top: var(--s-2); color: var(--ink-2); font-size: var(--fs-14); }
.trv-dl svg { color: var(--ink-2); }
.trv-dl a { font-weight: 600; }
.trv-none-l { padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: #fff; color: var(--muted); font-size: var(--fs-15); }
/* refund policy: four columns, the first one is the situation */
.trv-refunds tbody th { width: 30%; }
.trv-refunds td:nth-child(2) { color: var(--ink); font-weight: 600; }
/* where we can't sell: place | status | reason */
.trv-sale-list tbody th { width: 34%; }
.trv-sale-list td:nth-child(2) { white-space: nowrap; color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------------------------------------- 11. travel blocks */
/* observed market fare (fromPrice): a horizontal fare strip, the figure first; stacked on phones */
.trv-price { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "v k" "v o" "v n" "v b"; align-items: center; column-gap: var(--s-4); max-width: none; margin: var(--s-5) 0; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-sm); }
.trv-price > p { margin: 0; }
.trv-price-k { grid-area: k; align-self: end; color: var(--ink); font-size: var(--fs-16); font-weight: 600; }
.trv-price-v { grid-area: v; padding-right: var(--s-4); border-right: 1px solid var(--line); align-self: stretch; display: flex; align-items: center; min-width: 7.5rem; }
.trv-price-v strong { color: var(--ink); font: 700 var(--fs-48)/1 var(--font-head); letter-spacing: -0.01em; font-variant-numeric: var(--num); }
.trv-price-o { grid-area: o; color: var(--muted); font-size: var(--fs-14); }
.trv-price-n { grid-area: n; align-self: start; max-width: 64ch; margin-top: 6px !important; color: var(--muted); font-size: var(--fs-14); line-height: 1.5; }
.trv-price > .btn { grid-area: b; justify-self: start; min-height: 44px; margin: var(--s-2) 0 0; }
.trv-price.trv-none { display: flex; padding: 14px 16px 14px 20px; box-shadow: none; background: var(--paper); border: 0; }
.trv-price.trv-none p { color: var(--ink-2); font-size: var(--fs-15); }
.trv-price.trv-none svg { color: var(--ink-2); }
/* sale status of a row ("Not available: why"): the warn callout with its badge */
.trv-sale .trv-b { margin-right: 8px; vertical-align: 1px; }

/* "Held, not charged": three stages of one journey, joined by a dashed flight path. The block is a size container: three
   columns from 900 px of room, a vertical journey below (reading column, phones). */
.trv-held { container: held / inline-size; margin: var(--s-6) 0; }
.trv-held > h2 { margin-top: 0; }
.trv-held .step-list { counter-reset: s; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin: var(--s-4) 0 var(--s-3); padding: 0; }
.trv-held .step-list > li, .trv-held .step-list > li.has-ic { position: relative; min-height: 48px; margin: 0; padding: 0 0 0 68px; }
.trv-held .step-ic { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 48px; height: 48px; margin: 0; border-radius: 50%; background: #fff; border: 1.5px solid var(--ink); color: var(--ink); }
.trv-held .step-ic .ic { width: 22px; height: 22px; stroke-width: 1.75; }
.trv-held .step-list > li::before, .trv-held .step-list > li.has-ic::before { content: counter(s, decimal-leading-zero); position: static; display: block; width: auto; height: auto; margin: 2px 0 4px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--amber-ink); font: 600 var(--fs-15)/1 var(--font-head); letter-spacing: .1em; font-variant-numeric: var(--num); }
.trv-held .step-list > li:not(:last-child)::after { content: ""; position: absolute; top: 56px; bottom: calc(-1 * var(--s-3) + 8px); left: 23px; right: auto; width: 0; height: auto; border-left: 2px dashed var(--line-strong); }
.trv-held .step-name { margin: 0 0 6px; color: var(--ink); font: 600 var(--fs-20)/1.25 var(--font-head); }
.trv-held .step-list > li > p:not(.step-name) { margin: 0; color: var(--ink-2); font-size: var(--fs-16); line-height: 1.6; }
.trv-held .pay-help { max-width: 72ch; margin: 0; color: var(--muted); }
@container held (min-width: 900px) {
  /* three rows shared by the three stages (icon, title, text): a title on two lines pushes all three texts down
     together, so they start on one line */
  .trv-held .step-list { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 0 var(--s-6); }
  .trv-held .step-list > li, .trv-held .step-list > li.has-ic { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; padding: 0; }
  .trv-held .step-ic { position: relative; margin: 0 0 var(--s-3); }
  .trv-held .step-list > li::before, .trv-held .step-list > li.has-ic::before { position: absolute; left: 68px; top: 17px; margin: 0; }
  .trv-held .step-list > li:not(:last-child)::after { top: 24px; bottom: auto; left: 112px; right: calc(-1 * var(--s-6) + 12px); width: auto; height: 0; border-left: 0; border-top: 2px dashed var(--line-strong); }
  .trv-held .step-name { align-self: end; font-size: var(--fs-24); } /* a short title sits on its text, the room goes above it */
}

/* --------------------------------------------------------------------------------------------------------- 12. steps */
/* the site's one counter style: a white disc with an ink ring and signage numerals, joined by a hairline */
.steps { margin: var(--s-5) 0; }
.step-list { margin: var(--s-3) 0; }
.steps:not(.trv-held) .step-list .step-ic { display: none; } /* decorative icon tile (aria-hidden SVG, no text): the number carries the order */
.steps:not(.trv-held) .step-list > li, .steps:not(.trv-held) .step-list > li.has-ic { position: relative; margin: 0; padding: 0 0 var(--s-4) 56px; }
.steps:not(.trv-held) .step-list > li::before, .steps:not(.trv-held) .step-list > li.has-ic::before { left: 0; top: 0; z-index: 1; box-sizing: border-box; width: 36px; height: 36px; border: 1.5px solid var(--ink); border-radius: 50%; background: #fff; color: var(--ink); font: 600 var(--fs-17)/1 var(--font-head); font-variant-numeric: var(--num); }
.steps:not(.trv-held) .step-list > li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 44px; bottom: 8px; width: 2px; background: var(--line); }
.steps:not(.trv-held) .step-list > li:last-child { padding-bottom: 0; }
.step-name { margin: 5px 0 6px; color: var(--ink); font: 600 var(--fs-20)/1.3 var(--font-head); }
.step-list > li > p:not(.step-name) { margin: 0 0 var(--s-1); }
.step-list > li > p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------- 13. open data list, stats, ranking, routes */
/* "card" grids read as an editorial list: no frames, a hairline on top of each item, a line icon in ink (no tile) */
.cards { gap: var(--s-5) var(--s-6); align-items: stretch; }
.card { display: flex; flex-direction: column; padding: var(--s-3) 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; transition: border-color .15s ease; }
.card > :last-child { margin-bottom: 0; }
.card h3 { margin: 0 0 8px; font-size: var(--fs-20); line-height: 1.25; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card p { margin: 0 0 .5em; color: var(--muted); font-size: var(--fs-15); line-height: 1.55; }
.card-tag { color: var(--muted); font-size: var(--fs-13); font-weight: 600; }
.card-link:hover { border-color: var(--ink); box-shadow: none; transform: none; }
.card-link:hover h3 a { color: var(--accent); text-decoration: underline; text-decoration-color: currentColor; }
.card-link:focus-within { outline: none; }
.card-link:has(h3 a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; }
.card-ic { display: block; width: 22px; height: 22px; margin: 0 0 var(--s-2); border: 0; border-radius: 0; background: none; color: var(--ink); }
.card-ic .ic { width: 22px; height: 22px; stroke-width: 1.75; }
.band .card { background: none; }
@media (min-width: 640px) { .cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .cards:is(:has(> :nth-child(3):last-child), :has(> :nth-child(6):last-child)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* stats: one framed strip, cells split by hairlines, the figure in the signage face */
.stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: 1px; margin: var(--s-4) 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--line); }
.stat { padding: var(--s-3) var(--s-3) 22px; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
.stat-v { margin: 0 0 6px; color: var(--ink); font: 700 var(--fs-44)/1 var(--font-head); letter-spacing: -0.01em; font-variant-numeric: var(--num); }
.stat-l { margin: 0; color: var(--ink); font-size: var(--fs-15); font-weight: 600; line-height: 1.35; }
.stat-n { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-13); line-height: 1.45; }

.ranking { margin: var(--s-5) 0; }
.rank-list { margin: var(--s-3) 0; }
.rank { margin: 0 0 var(--s-2); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.rank.self { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: #fff; }
.rank-head { gap: 12px; }
.rank-head h3 { font-size: var(--fs-22); }
.rank-head h3 a { color: var(--ink); text-decoration: none; }
.rank-head h3 a:hover { color: var(--accent); text-decoration: underline; }
.rank-n { box-sizing: border-box; width: 36px; height: 36px; border: 1.5px solid var(--ink); border-radius: 50%; background: #fff; color: var(--ink); font: 600 var(--fs-17)/1 var(--font-head); font-variant-numeric: var(--num); }
.rank.self .rank-n { background: var(--accent); border-color: var(--accent); color: #fff; }
.rank-badge { padding: 0; border-radius: 0; background: none; color: var(--muted); font: 600 var(--fs-14)/1.5 var(--font-body); }
.rank.self .rank-badge { color: var(--accent); }
.rank > .rank-verdict { max-width: 68ch; margin: 12px 0 var(--s-2); }
.rank > :last-child, .rank .pc, .rank .pc ul, .rank .pc li:last-child { margin-bottom: 0; }
.rank-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 0 0 var(--s-2); padding: 14px 0; border-block: 1px solid var(--line); font-size: var(--fs-15); }
.rank-meta > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rank-meta dt, .rank-meta dd { display: block; }
.rank-meta dt { color: var(--muted); font-size: var(--fs-13); }
.rank-meta dt::after { content: none; }
.rank-meta dd { color: var(--ink); font-weight: 500; }
.pc { gap: 8px var(--s-4); margin-bottom: var(--s-1); font-size: var(--fs-15); }
.pc-h { color: var(--ink); }
.pc ul { list-style: none; margin: 6px 0 var(--s-1); padding: 0; }
:root .pc ul > li { position: relative; margin: .3em 0; padding-left: 1.4em; } /* beats the prose-list rule of 3 */
.pc li::before { position: absolute; left: 0; font-weight: 800; }
.pc > div:first-child:not(:only-child) li::before { content: "+"; color: var(--yes); }
.pc > div:last-child li::before { content: "\2212"; color: var(--no); }
@media (min-width: 601px) { .pc > div:only-child { grid-column: 2; } }
.disclosure { font-size: var(--fs-13); }

/* route board (link grid): a departure-board list, no frames. Each route under a hairline (it turns ink on hover), the
   city pair in the signage face, the distance under it; a drawn arrow shows on hover only (the arrow of the text stays
   the content). Four columns from 1,000 px of room, three from 640 px, a single list on phones (see 20). A short last
   row never leaves holes: its routes widen to fill the row (10 routes: 4 + 4 + 2 wide). */
.linkgrid { container: lg / inline-size; margin: var(--s-5) 0; }
.lg { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 0 var(--s-4); font-size: var(--fs-15); }
.lg li { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; min-height: 0; margin: 0; padding: 16px 40px 18px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; transition: border-color .15s ease; }
.lg li:hover { border-top-color: var(--ink); }
.lg li::after { content: ""; position: absolute; right: 0; top: 19px; width: 18px; height: 18px; background: var(--ink); opacity: 0; -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat; transition: opacity .15s ease, transform .15s ease; }
.lg li:is(:hover, :focus-within)::after { opacity: 1; transform: translateX(2px); }
.lg a { color: var(--ink); font: 600 var(--fs-18)/1.25 var(--font-head); text-decoration: none; }
.lg a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.lg a:focus-visible { outline: none; }
.lg li:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.lg li:hover a { color: var(--accent); }
.lg-note { color: var(--muted); font-size: var(--fs-14); line-height: 1.35; font-variant-numeric: tabular-nums; }
@media (min-width: 761px) {
  @container lg (min-width: 1000px) {
    .lg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg > li:last-child:nth-child(4n+1) { grid-column: 1 / -1; }
    .lg > li:last-child:nth-child(4n+2), .lg > li:nth-last-child(2):nth-child(4n+1), .lg > li:nth-last-child(3):nth-child(4n+1) { grid-column: span 2; }
  }
  @container lg (min-width: 640px) and (max-width: 999.98px) {
    .lg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg > li:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
    .lg > li:nth-last-child(2):nth-child(3n+1) { grid-column: span 2; }
  }
}
.lg-group { margin: var(--s-4) 0 var(--s-2); color: var(--ink); font: 600 var(--fs-18)/1.3 var(--font-head); }

.coins { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: var(--s-1); }
.coins li { align-content: start; row-gap: 2px; padding: 14px 16px; border-color: var(--line); border-radius: var(--r-md); background: #fff; }
.coin-name { color: var(--ink-2); font-size: var(--fs-15); }
.coin-note { color: var(--muted); font-size: var(--fs-13); }
.coin-code { color: var(--ink); font-family: var(--font-head); font-weight: 600; line-height: 1.3; letter-spacing: .02em; }

/* --------------------------------------------------------------------------------------- 14. FAQ, folds, sources */
/* the question leads: signage face, larger and darker than its answer; the answer keeps a 68-character measure */
.faq-item { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 0; }
.faq > .faq-item:last-child { padding-bottom: 0; }

.faq-item h3 { margin: 0 0 10px; color: var(--ink); font: 600 var(--fs-20)/1.3 var(--font-head); }
.faq-a { max-width: 68ch; color: var(--ink-2); font-size: 1.03125rem; line-height: 1.6; }
.faq-a p { margin-bottom: .7em; }
.faq-a p:last-child { margin-bottom: 0; }

.fold { margin: var(--s-4) 0; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.fold > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 60px; padding: 0 var(--s-3); color: var(--ink); font: 600 var(--fs-18)/1.3 var(--font-head); cursor: pointer; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::marker { content: ""; }
.fold > summary::after { content: ""; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--i-plus) center / contain no-repeat; mask: var(--i-plus) center / contain no-repeat; transition: transform .2s ease; }
.fold[open] > summary::after { transform: rotate(45deg); }
.fold > summary:hover { color: var(--accent); }
.fold[open] > summary { border-bottom: 1px solid var(--line); }
.fold > :not(summary) { margin: 0; padding: var(--s-1) var(--s-3) var(--s-3); }
.fold > :not(summary) > h2:first-child { margin-top: var(--s-2); font-size: var(--fs-24); }

.sources details { margin-top: var(--s-5); padding-top: var(--s-1); border-top: 1px solid var(--line); }
.sources summary { list-style: none; display: inline-flex; align-items: flex-start; gap: 10px; min-height: 0; padding-block: 12px; color: var(--ink-2); font-size: var(--fs-15); font-weight: 600; line-height: 1.4; cursor: pointer; }
.sources summary::-webkit-details-marker { display: none; }
.sources summary::marker { content: ""; }
.sources summary::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; }
.sources details[open] summary::before { transform: rotate(45deg); }
.sources summary:hover { color: var(--accent); }
.sources ol { padding-left: 2.2em; }
.src-u { font-size: inherit; }

/* ----------------------------------------------------------------------------------- 15. bands + call to action */
/* light band (alternate section): paper to the screen edges through a border image (no seam, no sideways overflow) */
.band { margin: var(--s-12) 0; padding: var(--s-10) 0; background: var(--paper); box-shadow: none; clip-path: none; border-image: linear-gradient(var(--paper) 0 0) fill 0 / / 0 100vmax; }
.band > :last-child, .band > :last-child > :last-child { margin-bottom: 0; }
.band .faq > .faq-item:last-child { padding-bottom: 0; border-bottom: 0; }
.band :is(.rank, .stat, .fold, .trv-price, .facts-table) { background: #fff; }
.band > :is(.steps, .faq, .sec, .tbl, .facts, .cards-sec, .linkgrid) { margin-top: 0; }
.band .steps:not(.trv-held) .step-list > li::before { background: var(--paper); }

/* the night band: "Held, not charged" when a page puts it in a band (one night surface per page). On the home page the
   night is the hero, so this band stays light there. */
body:not(.t-home) .band:has(> .trv-held) { background: var(--night); border-image: linear-gradient(var(--night) 0 0) fill 0 / / 0 100vmax; color: var(--night-ink); }
body:not(.t-home) .band:has(> .trv-held) :is(h2, .step-name, strong) { color: #fff; }
body:not(.t-home) .band:has(> .trv-held) .trv-held .step-list > li > p:not(.step-name) { color: var(--night-muted); }
body:not(.t-home) .band:has(> .trv-held) .trv-held .step-ic { background: var(--night-2); border-color: color-mix(in srgb, var(--amber) 70%, transparent); color: var(--amber); }
body:not(.t-home) .band:has(> .trv-held) .trv-held .step-list > li::before { color: var(--amber); }
body:not(.t-home) .band:has(> .trv-held) .trv-held .step-list > li:not(:last-child)::after { border-color: rgb(255 184 28 / .4); }
body:not(.t-home) .band:has(> .trv-held) .trv-held .pay-help { color: var(--night-muted); }
body:not(.t-home) .band:has(> .trv-held) a { color: #fff; }
body:not(.t-home) .band:has(> .trv-held) :focus-visible { outline-color: var(--amber); }
/* home: the light version (paper), stages numbered in readable amber */
.t-home .band:has(> .trv-held) .trv-held .step-ic { background: #fff; }

/* call to action: the night panel of a page, centred, one amber action. It becomes a light panel when the page already
   has its night band, or for an earlier call to action on a page that has two. */
.cta { flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); margin: var(--s-8) 0; padding: var(--s-8) var(--s-4); border-radius: var(--r-xl); background: var(--night); color: var(--night-ink); text-align: center; }
.cta > div:first-child { min-width: 0; max-width: 680px; }
.cta-h { margin: 0 0 var(--s-1); color: #fff; font: 700 clamp(1.75rem, 1.35rem + 1.3vw, 2.5rem)/1.08 var(--font-head); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.cta-t { overflow-wrap: anywhere; }
.cta-t p { margin: 0; color: var(--night-lede); opacity: 1; text-wrap: balance; }
.cta-t a { color: #fff; }
.cta-btns { justify-content: center; gap: 12px; }
.cta .btn-primary { background: var(--amber); border-color: var(--amber); color: var(--night); }
.cta .btn-primary:hover { background: #FFC94D; border-color: #FFC94D; color: var(--night); }
.cta .btn-ghost { background: transparent; border-color: rgb(255 255 255 / .3); color: #fff; }
.cta .btn-ghost:hover { background: transparent; border-color: #fff; color: #fff; }
.cta :focus-visible { outline-color: var(--amber); }
:is(.content > .cta:has(~ .cta), body:has(.band > .trv-held):not(.t-home) .cta, .t-home .cta) { background: var(--paper); color: var(--ink-2); }
:is(.content > .cta:has(~ .cta), body:has(.band > .trv-held):not(.t-home) .cta, .t-home .cta) .cta-h { color: var(--ink); font-size: var(--fs-28); }
:is(.content > .cta:has(~ .cta), body:has(.band > .trv-held):not(.t-home) .cta, .t-home .cta) .cta-t p { color: var(--ink-2); }
:is(.content > .cta:has(~ .cta), body:has(.band > .trv-held):not(.t-home) .cta, .t-home .cta) .cta-t a { color: var(--accent); }
:is(.content > .cta:has(~ .cta), body:has(.band > .trv-held):not(.t-home) .cta, .t-home .cta) .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
:is(.content > .cta:has(~ .cta), body:has(.band > .trv-held):not(.t-home) .cta, .t-home .cta) .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
:is(.content > .cta:has(~ .cta), body:has(.band > .trv-held):not(.t-home) .cta, .t-home .cta) .btn-ghost { background: #fff; border-color: var(--line-strong); color: var(--ink); }
:is(.content > .cta:has(~ .cta), body:has(.band > .trv-held):not(.t-home) .cta, .t-home .cta) .btn-ghost:hover { border-color: var(--ink); }
:is(.content > .cta:has(~ .cta), body:has(.band > .trv-held):not(.t-home) .cta, .t-home .cta) :focus-visible { outline-color: var(--accent); }

/* --------------------------------------------------------------------------------------------------- 16. related */
/* related pages: a three-column list, no cards (a hairline on top, the title in the signage face, one muted line) */
.related { max-width: none; margin-top: var(--s-12); }
.related > h2 { margin: 0 0 var(--s-3); font-size: var(--fs-28); }
.related > :last-child { margin-bottom: 0; }
.related-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--s-4) var(--s-6); align-items: stretch; }
.related-list li { position: relative; display: grid; grid-template-rows: subgrid; grid-row: span 2; align-content: start; gap: 8px; margin: 0; padding: 20px 32px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; transition: border-color .15s ease; }
.related-list li::after { content: ""; position: absolute; top: 24px; right: 0; width: 18px; height: 18px; background: var(--muted); -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat; transition: transform .15s ease, background-color .15s ease; }
.related-list li:hover { border-top-color: var(--ink); }
.related-list li:hover::after { background: var(--ink); transform: translateX(3px); }
.related-list a { color: var(--ink); font: 600 var(--fs-18)/1.3 var(--font-head); text-decoration: none; }
.related-list a::before { content: ""; position: absolute; inset: 0; }
.related-list a:focus-visible { outline: none; }
.related-list li:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; }
.related-list li:hover a { color: var(--accent); }
.related-list p { margin: 0; color: var(--muted); font-size: .90625rem; line-height: 1.5; }

/* ---------------------------------------------------------------------------------------------------- 17. footer */
/* night sky: brand + support on the left, four link columns, monochrome coin row, legal line */
.ftr { margin-top: var(--s-12); padding: var(--s-10) 0 var(--s-5); background: var(--night); border-top: 0; color: var(--night-muted); font-size: var(--fs-15); }
.ftr .wrap:first-child { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: var(--s-8); }
.f-logo { gap: 10px; margin-bottom: var(--s-3); color: #fff; font: 700 var(--fs-24)/1 var(--font-head); }
.f-logo .logo-mark { width: 30px; height: 30px; border-radius: 8px; background: #13283F; font-size: var(--fs-15); }
.f-desc { max-width: 38ch; margin: 0 0 var(--s-3); color: var(--night-muted); font-size: var(--fs-14); line-height: 1.6; }
.f-desc a { color: var(--night-ink); }
/* wide screens: a brand row on top (the logo, then the site's one-line promise set as a white signage statement),
   support and the four link columns under it */
@media (min-width: 1000px) {
  .ftr .wrap:first-child { row-gap: 0; }
  .ftr .f-brand { display: contents; }
  .ftr .f-logo { grid-column: 1; grid-row: 1; align-self: start; margin: 4px 0 0; }
  .ftr .f-desc { grid-column: 2; grid-row: 1; max-width: 46em; margin: 0; color: #fff; font: 500 var(--fs-22)/1.4 var(--font-head); text-wrap: pretty; }
  .ftr .f-contact { grid-column: 1; grid-row: 2; align-self: start; margin-top: var(--s-7); }
  .ftr .f-cols { grid-column: 2; grid-row: 2; margin-top: var(--s-7); }
}
.f-contact { gap: 4px 16px; font-size: var(--fs-14); }
.f-contact-h { color: #fff; font-weight: 600; }
.f-contact a { color: var(--night-ink); opacity: 1; }
.f-contact a:hover { color: #fff; }
.f-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }
.f-h { margin: 0 0 var(--s-2); color: #fff; font: 600 var(--fs-16)/1.3 var(--font-head); letter-spacing: .01em; }
.f-col li { margin: 0 0 12px; }
.f-col a { color: var(--night-muted); font-size: var(--fs-15); line-height: 1.35; }
.f-col a:hover { color: #fff; text-decoration: underline; text-decoration-color: currentColor; }
.ftr :focus-visible { outline-color: var(--amber); }
.ftr :is(.f-pay, .f-bottom) { width: min(calc(var(--wrap) - 2 * var(--gutter)), calc(100% - 2 * var(--gutter))); padding-inline: 0; border-top: 1px solid var(--night-line); }
.f-pay { gap: 10px 24px; margin-top: var(--s-8); padding-top: var(--s-3); }
:root .f-pay-h { color: #fff; font-size: var(--fs-14); font-weight: 600; }
.coins-mini { gap: 8px 22px; margin: 0; }
.coins-mini li { gap: 8px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--night-muted); font: 600 var(--fs-13)/1 var(--font-body); }
.coins-mini .coin-logo { width: 20px; height: 20px; }
/* one tone for the coin logos on the night (grey disc, night glyph); their colours come back on hover */
.coins-mini .coin-logo { filter: none; opacity: 1; }
.coins-mini li:not(:hover) .coin-logo circle { fill: #8DA2B9; }
.coins-mini li:not(:hover) .coin-logo :is(path, ellipse):not([fill="none"]):not([fill="none"] *) { fill: var(--night); }
.f-pay-n { color: var(--night-muted); font-size: var(--fs-14); opacity: 1; }
.f-bottom { margin-top: var(--s-3); padding-top: var(--s-3); color: var(--night-muted); font-size: var(--fs-13); }
.f-pay + .f-bottom { margin-top: var(--s-3); }
.f-legal a, .langs a { color: var(--night-muted); }
.f-legal a:hover, .langs a:hover { color: #fff; }
.langs a[aria-current] { color: #fff; }

/* -------------------------------------------------------------------------------------------- 18. page layouts */
/* Two families of templates, one column system.
   - Reading pages (guide, location, comparison, about, legal, contact, FAQ, article): one 720 px column; from 1200 px
     the contents become a quiet sticky rail on the right.
   - Data pages (report, best, hub, pricing): the title and the answer panel take the left column with the contents
     rail beside them (from 1200 px); everything after uses the full 1,168 px: indexes, wide tables, the route board,
     the open data list, the stats strip, the search. Prose keeps the 720 px measure.
   DOM order never changes: the quick answer stays the first block. */
:is(.t-guide, .t-location, .t-comparison, .t-about, .t-legal, .t-contact, .t-faq, .t-article) .content { max-width: var(--measure); }
:is(.t-report, .t-best, .t-hub, .t-pricing) .content { max-width: none; }
:is(.t-report, .t-best, .t-hub, .t-pricing) .content > :not(.sec, .tbl, .ranking, .cta, .band, .linkgrid, .trv-search, .cards-sec, .stats-sec, .coins-sec, .trv-held, .quick-answer, .trv-price),
:is(.t-report, .t-best, .t-hub, .t-pricing) .content > .sec > :not(.tbl, .ranking, .linkgrid, .cards-sec, .stats-sec, .trv-held, .trv-search),
:is(.t-report, .t-best, .t-hub, .t-pricing) .content > .sec > .tbl:not(.trv-wide, .trv-refunds, .cmp):not(:has(thead th:nth-child(4))),
:is(.t-report, .t-best, .t-hub, .t-pricing) .content > :is(.tbl, .linkgrid, .cards-sec, .stats-sec, .coins-sec, .trv-held) > :is(h2, h3, p, ul:not([class]), .table-note, .checked, .disclosure, .trv-dl),
:is(.t-report, .t-best, .t-hub, .t-pricing) .band > :not(.tbl, .ranking, .linkgrid, .cards-sec, .stats-sec, .trv-held),
.t-best .ranking > :not(.rank-list) { max-width: var(--measure); }
:is(.t-report, .t-best, .t-hub, .t-pricing) .content > .tbl:not(.trv-wide, .trv-refunds, .cmp):not(:has(thead th:nth-child(4))) { max-width: var(--measure); }
:is(.t-report, .t-best, .t-hub, .t-pricing) .content > .quick-answer { max-width: var(--measure); }
:is(.t-report, .t-best, .t-hub, .t-pricing) .band .step-list { max-width: var(--measure); }
@media (min-width: 1000px) { .t-best .rank-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sec > h3, .content > h3 { margin-top: 1.8em; }

/* data pages, 1200 px and up: title and answer panel in the left column, the contents rail beside them (sticky while
   they scroll), then the full width. .content is transparent to layout there, so each block is a grid item (margins
   no longer collapse: one 80 px rhythm between blocks). Prose blocks (questions, facts, FAQ) read as a spec sheet:
   the question on the left, sticky while its answer scrolls, the answer in the 720 px measure on the right, so the
   width is used without a wall of text; data blocks (indexes, route board, open data, stats) keep the full width. */
@media (min-width: 1200px) {
  :is(.t-report, .t-best, .t-hub, .t-pricing) main.wrap:has(> .toc) { display: grid; grid-template-columns: minmax(0, 1fr) 256px; column-gap: var(--s-8); align-items: start; }
  :is(.t-report, .t-best, .t-hub, .t-pricing) main.wrap:has(> .toc) > * { grid-column: 1 / -1; min-width: 0; }
  :is(.t-report, .t-best, .t-hub, .t-pricing) main.wrap:has(> .toc) > .page-head { grid-column: 1; }
  :is(.t-report, .t-best, .t-hub, .t-pricing) main.wrap:has(> .toc) > .content { display: contents; }
  :is(.t-report, .t-best, .t-hub, .t-pricing) main.wrap:has(> .toc) > .content > * { grid-column: 1 / -1; min-width: 0; margin-top: var(--s-10); margin-bottom: 0; }
  :is(.t-report, .t-best, .t-hub, .t-pricing) main.wrap:has(> .toc) > .content > * > h2:first-child { margin-top: 0; }
  :is(.t-report, .t-best, .t-hub, .t-pricing) main.wrap:has(> .toc) > .content > .quick-answer { grid-column: 1; max-width: var(--measure); margin-top: var(--s-3); }
  :is(.t-report, .t-best, .t-hub, .t-pricing) main.wrap:has(> .toc) > .content > .quick-answer + * { margin-top: var(--s-8); }
  :is(.t-report, .t-best, .t-hub, .t-pricing) main.wrap:has(> .toc) > .content > .band { margin-top: var(--s-12); }
  :is(.t-report, .t-best, .t-hub, .t-pricing) main.wrap:has(> .toc) > .content > .band + * { margin-top: var(--s-12); }
  :is(.t-report, .t-best, .t-hub, .t-pricing) main.wrap:has(> .toc) > .content > :is(.sec, .faq, .facts):has(> h2:first-child):not(:has(> :is(.tbl.trv-wide, .tbl.trv-refunds, .tbl.cmp, .ranking, .linkgrid, .cards-sec, .stats-sec, .trv-held, .trv-search))):not(:has(> .tbl thead th:nth-child(4))) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure)); column-gap: var(--s-8); align-items: start; max-width: none; margin-top: var(--s-8); padding-top: var(--s-4); border-top: 1px solid var(--line); }
  :is(.t-report, .t-best, .t-hub, .t-pricing) main.wrap:has(> .toc) > .content > :is(.sec, .faq, .facts):has(> h2:first-child):not(:has(> :is(.tbl.trv-wide, .tbl.trv-refunds, .tbl.cmp, .ranking, .linkgrid, .cards-sec, .stats-sec, .trv-held, .trv-search))):not(:has(> .tbl thead th:nth-child(4))) > * { grid-column: 2; min-width: 0; }
  :is(.t-report, .t-best, .t-hub, .t-pricing) main.wrap:has(> .toc) > .content > :is(.sec, .faq, .facts):has(> h2:first-child):not(:has(> :is(.tbl.trv-wide, .tbl.trv-refunds, .tbl.cmp, .ranking, .linkgrid, .cards-sec, .stats-sec, .trv-held, .trv-search))):not(:has(> .tbl thead th:nth-child(4))) > h2:first-child { grid-column: 1; grid-row: 1 / span 60; position: sticky; top: calc(var(--hdr-h) + var(--s-3)); margin: 0; font-size: var(--fs-32); line-height: 1.1; }
  :is(.t-report, .t-best, .t-hub, .t-pricing) main.wrap:has(> .toc) > .content > :is(.sec, .faq, .facts):has(> h2:first-child) > h2:first-child + * { margin-top: 0; }
  :is(.t-report, .t-best, .t-hub, .t-pricing) main.wrap:has(> .toc) > .content > :is(.sec, .faq, .facts):has(> h2:first-child) > h2:first-child + .faq-item { padding-top: 0; }
  :is(.t-report, .t-best, .t-hub, .t-pricing) main.wrap:has(> .toc) > .content > .sources { justify-self: end; width: 100%; max-width: var(--measure); }
  /* the rail sits beside the title and the answer panel, then scrolls away with them: a sticky rail would ride over
     the full-width blocks below (a grid item sticks within the whole grid, not within its own area) */
  :is(.t-report, .t-best, .t-hub, .t-pricing) main.wrap > .toc { grid-column: 2; grid-row: 2 / span 2; position: static; max-height: none; overflow: visible; margin: var(--s-5) 0 0; padding: 4px 4px 4px var(--s-3); border-left: 1px solid var(--line); font-size: var(--fs-14); }
}

/* contents rail (reading and data pages, 1200 px and up): small muted links, one per line */
@media (min-width: 1200px) {
  :is(.t-guide, .t-location, .t-comparison, .t-about, .t-legal, .t-contact, .t-faq, .t-article) main.wrap:has(> .toc) { display: grid; grid-template-columns: minmax(0, var(--measure)) 256px; justify-content: space-between; column-gap: var(--s-8); align-items: start; }
  :is(.t-guide, .t-location, .t-comparison, .t-about, .t-legal, .t-contact, .t-faq, .t-article) main.wrap:has(> .toc) > * { grid-column: 1; min-width: 0; }
  :is(.t-guide, .t-location, .t-comparison, .t-about, .t-legal, .t-contact, .t-faq, .t-article) main.wrap:has(> .toc) > .crumbs { grid-column: 1 / -1; }
  /* the rail starts level with the title (as on data pages) and stays in view while the page scrolls: everything
     after the title (text, related pages, about) keeps to the reading column, so nothing runs under it */
  :is(.t-guide, .t-location, .t-comparison, .t-about, .t-legal, .t-contact, .t-faq, .t-article) main.wrap > .toc { grid-column: 2; grid-row: 2 / span 2; position: sticky; top: calc(var(--hdr-h) + var(--s-3)); z-index: 1; max-height: calc(100vh - var(--hdr-h) - var(--s-6)); overflow: auto; margin: var(--s-5) 0 0; padding: 4px 4px 4px var(--s-3); border-left: 1px solid var(--line); font-size: var(--fs-14); }
  :is(.t-guide, .t-location, .t-comparison, .t-about, .t-legal, .t-contact, .t-faq, .t-article) main.wrap:has(> .toc) > .related .related-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); }
  :is(.t-guide, .t-location, .t-comparison, .t-about, .t-legal, .t-contact, .t-faq, .t-article) main.wrap:has(> .toc) > .content > :last-child { margin-bottom: 0; }
  main.wrap > .toc .toc-h { margin: 0 0 10px; color: var(--ink); font-size: var(--fs-14); font-weight: 600; }
  main.wrap > .toc li { padding: 0; }
  main.wrap > .toc a { display: block; padding: 5px 0; color: var(--muted); line-height: 1.4; text-decoration: none; }
  main.wrap > .toc a:hover { color: var(--ink); }
  main.wrap > .toc a:focus-visible { outline-offset: 0; }
  /* beside the rail a band would run under the contents list: it becomes a panel of the reading column */
  :is(.t-guide, .t-location, .t-comparison, .t-about, .t-legal, .t-contact, .t-faq, .t-article) main.wrap:has(> .toc) .content > .band { margin: var(--s-6) 0; padding: var(--s-5) var(--s-4); border-radius: var(--r-xl); border-image: none; background: var(--paper); }
  body:not(.t-home) main.wrap:has(> .toc) .content > .band:has(> .trv-held) { background: var(--night); }
}
/* under 1200 px: "On this page" and one line of text links that swipes sideways (no chips) */
@media (max-width: 1199px) {
  .toc { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-3) 0 var(--s-4); padding: 0; border-block: 1px solid var(--line); }
  .toc-h { flex: none; margin: 0; color: var(--ink); font-size: var(--fs-14); font-weight: 600; }
  .toc ol { display: flex; gap: var(--s-3); min-width: 0; columns: auto; overflow-x: auto; overflow-y: hidden; margin: 0; padding: 0 32px 0 2px; list-style: none; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .toc ol::-webkit-scrollbar { display: none; }
  .toc li { display: flex; flex: none; margin: 0; padding: 0; }
  .toc a { display: flex; align-items: center; min-height: 48px; padding: 0; color: var(--ink-2); font-size: var(--fs-15); line-height: 1.3; white-space: nowrap; text-decoration: none; }
  .toc a:hover { color: var(--accent); text-decoration: underline; }
  .toc a:focus-visible { outline-offset: -3px; }
}
/* legal pages: quiet, document-style sections */
.t-legal .content h2 { margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--line); font-size: var(--fs-28); }
.t-legal .content > .facts h2 { padding-top: 0; border-top: 0; }

/* FAQ page (it always has its contents rail, see above): each group of questions opens with a short amber rule */
.t-faq .content > .faq + .faq, .t-faq .content > .facts + .faq { margin-top: var(--s-8); }
.t-faq .content > .faq > h2 { position: relative; margin-top: 0; padding-top: var(--s-3); font-size: var(--fs-28); }
.t-faq .content > .faq > h2::before { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 2px; background: var(--amber); }
/* 42 questions on one page, as an accordion (engine travel.css: the first 3 open): tighter items, the answer in 16 px.
   One column at every width, in the reading measure beside the sticky contents rail (generic layout above): an open
   answer never leaves a blank beside a closed question, and opening one never moves the others sideways. */
.t-faq .faq-item { padding: 20px 0; }
.t-faq .faq-item h3 { margin-bottom: 8px; }
.t-faq .faq-a { max-width: none; font-size: var(--fs-16); line-height: 1.6; }
.t-faq .faq-a p { margin-bottom: .6em; }
/* home FAQ (wide screens): the heading on the left, sticky while the questions scroll; the questions in one column in
   the reading measure on the right (as the spec-sheet blocks of the data pages), so an open answer never leaves a blank
   beside a closed question */
@media (min-width: 1000px) {
  .t-home :is(.content, .band) > .faq:has(> h2:first-child) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure)); column-gap: var(--s-8); align-items: start; }
  .t-home :is(.content, .band) > .faq:has(> h2:first-child) > * { grid-column: 2; min-width: 0; }
  .t-home :is(.content, .band) > .faq > h2:first-child { grid-column: 1; grid-row: 1 / span 60; position: sticky; top: calc(var(--hdr-h) + var(--s-3)); margin: 0; }
  .t-home :is(.content, .band) > .faq > h2:first-child + .faq-item { padding-top: 0; }
  .t-home :is(.content, .band) > .faq .faq-a { font-size: var(--fs-16); }
}

/* ------------------------------------------------------------------------------------------------ 19. sticky bar */
.sticky-cta { border-top: 1px solid var(--line); background: rgb(255 255 255 / .96); box-shadow: 0 -8px 24px -18px rgb(7 22 42 / .4); }
.sticky-cta .btn { min-height: 48px; }

/* -------------------------------------------------------------------------------------------------------- 20. phones */
@media (max-width: 999px) {
  .ftr .wrap:first-child { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .f-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* tablets and phones: the fare strip stacks */
@media (max-width: 759px) {
  .trv-price { grid-template-columns: minmax(0, 1fr); grid-template-areas: "k" "v" "o" "n" "b"; row-gap: 4px; padding: var(--s-3) 20px; }
  .trv-price-v { padding: 6px 0 2px; border: 0; }
  .trv-price-v strong { font-size: 2.5rem; }
  .trv-price > .btn { justify-self: start; margin-top: var(--s-2); }
}
@media (max-width: 760px) {
  :root { --section: 72px; }
  html:has(body.has-sticky) { scroll-padding-bottom: 96px; }
  body { font-size: var(--fs-17); }
  h2 { margin-top: 1.9em; }
  .page-head { padding-top: var(--s-3); }
  .lede { font-size: var(--fs-18); line-height: 1.55; }
  .meta { font-size: 15px; }
  /* breadcrumbs: one line when the trail fits; a long trail wraps between items, each separator kept at the end of the
     item before it (never alone at the start of a line). Lines are 36 px; each link keeps a 44 px target by
     overflowing its line by 4 px top and bottom. */
  .crumbs ol { column-gap: 0; row-gap: 0; margin-top: var(--s-1); }
  .crumbs li { display: inline-flex; align-items: center; min-height: 36px; line-height: 1.35; }
  .crumbs li + li::before { content: none; }
  .crumbs li:not(:last-child)::after { content: "›"; margin: 0 8px; color: var(--muted); }
  .crumbs a { min-height: 44px; min-width: 0; margin-block: -4px; }

}
/* top bar under 768 px: one line that swipes sideways (nothing hidden), the right edge fades while more is there */
@media (max-width: 767px) {
  :root .topbar { padding: 0; font-size: 15px; }
  :root .topbar .wrap { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 0; overflow-x: auto; overflow-y: hidden; padding-block: 11px; padding-right: 32px; white-space: nowrap; text-overflow: clip; text-align: left; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .topbar .wrap::-webkit-scrollbar { display: none; }
  :root .topbar .tb-s, :root .topbar .tb-s ~ .tb-s, :root .topbar .tb-sep { display: inline; flex: none; }
  :root .topbar .tb-sep { white-space: pre; }
}
@media (max-width: 760px) {

  /* home hero: everything aligned left, a shorter night */
  .t-home .page-head { padding: var(--s-5) 0 var(--s-6); text-align: left; }
  .t-home .page-head::before { -webkit-mask-image: linear-gradient(#000, transparent 85%); mask-image: linear-gradient(#000, transparent 85%); }
  .t-home .page-head h1 { max-width: none; margin: 0; font-size: var(--h1-home); line-height: 1.05; }
  .t-home .page-head .kicker { margin-inline: 0; }
  .t-home .page-head .lede { max-width: none; margin: var(--s-2) 0 0; font-size: var(--fs-17); line-height: 1.55; text-wrap: pretty; }
  .t-home .page-head .lede p { text-wrap: pretty; }
  @supports (grid-template-rows: subgrid) {
    .t-home .page-head:not(.has-visual) { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--s-6); }
    .t-home .page-head:not(.has-visual) > .hero-btns { justify-self: start; margin-top: var(--s-1); }
    .t-home .page-head:not(.has-visual) > .hero-note { margin-top: 12px; }
    .t-home .page-head:not(.has-visual) ~ .content > .trv-fs:not(.trv-fs ~ .trv-fs) { margin-top: var(--s-3); }
  }
  .t-home .page-head .hero-btns { justify-content: flex-start; }
  .t-home .page-head .hero-btns .btn { flex: 0 0 auto; min-height: 44px; padding-inline: 0; font-size: var(--fs-16); }
  .t-home .page-head .hero-note { max-width: none; font-size: 15px; }
  .t-home .trv-fs .trv-form > .btn { min-height: 52px; }
  .t-home .trv-fs .trv-note { justify-content: flex-start; margin: var(--s-2) 0 0; font-size: 15px; }
  .t-home .trv-fs .ds-pop, .t-home .trv-fs .ds-pop ul { justify-content: flex-start; }
  .t-home .trv-fs .ds-pop-h { text-align: left; }
  .t-home h2 { font-size: var(--fs-32); }
  .t-home h2 + p { font-size: var(--fs-17); }
  .t-home .content > .quick-answer { margin-top: var(--s-7); }
  .band { margin: var(--s-8) 0; padding: var(--s-7) 0; }

  /* flight search */
  :root .trv-fs .trv-f label { font-size: 15px; }
  .trv-fs .trv-f :is(input, select) { min-height: 44px; }
  .trv-search .ds-pop :is(a, li > span) { min-height: 44px; font-size: 15px; white-space: nowrap; }
  /* popular routes: one swipeable row of chips (vertical swipes pass to the page), the right edge fades while more hide */
  .trv-search .ds-pop ul { flex-wrap: nowrap; width: calc(100% + var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 2px 32px 2px 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .trv-search .ds-pop ul::-webkit-scrollbar { display: none; }
  .trv-search .ds-pop li { flex: none; }
  :root .trv-search .ds-pop-h { flex-basis: 100%; font-size: 15px; }
  .trv-note { font-size: 15px; }

  /* answer panel, callouts */
  .quick-answer { margin-bottom: var(--s-5); padding: 20px 20px 22px; border-radius: var(--r-md); }
  .qa-q { font-size: var(--fs-20); }
  .qa-text { font-size: var(--fs-17); }
  .callout { padding: var(--s-2) var(--s-2) var(--s-2) 48px; }
  .callout::before { left: 16px; top: 19px; }

  /* departure-board tag: a little smaller, less tracking */
  :root .t-location .kicker { padding: 8px 12px 7px 10px; font-size: var(--fs-18); letter-spacing: .07em; line-height: 1.1; border-radius: var(--r-xs); }

  /* text floor 15 px for what the engine floor does not cover */
  :root :is(.ds-pop-h, .sources summary, .rank-badge, .rank-meta dt, .stat-n, .lg-note, .about-h, .trv-b, .trv-sub, .trv-dl, .trv-none-l, .trv-price-k, .trv-price-o, .trv-price-n, .trv-note, .f-logo .logo-mark, .tbl caption, .trv-index code, .trv-wide td, .disclosure, .qa-label, .toc-h, .f-bottom, .coins-mini li, .about-box, .table-note, .checked) { font-size: 15px; }
  html:root body :is(.faq-a, .step-list, .callout, .method, .pc) { font-size: var(--fs-16); }

  /* touch targets */
  .menu { min-height: 44px; }
  .tbl tbody th > a:only-child { display: inline-block; min-width: 44px; padding-block: 12px; margin-block: -12px; }
  .rank-head h3 a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .sources a { display: inline; min-width: 0; padding: 13px 0; }
  .sources a:focus-visible, .tbl td > a:only-child:focus-visible { padding-block: 0; }
  :root .sources ol > li { margin: 0; padding-block: 6px; }
  .trv-dl a { display: inline-block; padding-block: 12px; margin-block: -12px; }

  /* tables that keep their table layout on phones (two or three columns, comparison): fit the screen */
  .tbl :is(th, td) { padding: 12px; }
  .tbl table:not(:has(thead th:nth-child(4))) :is(td, thead th) { min-width: 0; }
  .tbl table:not(:has(thead th:nth-child(4))) tbody th { min-width: 0; max-width: none; position: static; box-shadow: none; }

  /* key facts: label above its value, no outer frame (hairlines only) */
  .facts-table, .facts-table tbody, .facts-table tr, .facts-table th, .facts-table td { display: block; width: auto; }
  .facts-table { border: 0; border-top: 1px solid var(--line); border-radius: 0; overflow: visible; background: none; }
  .facts-table tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .facts-table :is(th, td) { padding: 0; border: 0; background: none; }
  .facts-table th { width: auto; margin-bottom: 4px; padding: 0; font-size: 15px; }
  .facts-table td { font-size: var(--fs-16); }
  .facts-table td > a:only-child { display: inline-block; min-height: 0; padding-block: 10px; margin-block: -10px; }
  .fold > summary, .fold > :not(summary) { padding-inline: var(--s-2); }
  .fold .facts-table { border-top: 0; }

  /* held, not charged: smaller stage titles */
  .trv-held .step-name { font-size: var(--fs-18); }
  .steps:not(.trv-held) .step-list > li, .steps:not(.trv-held) .step-list > li.has-ic { padding-left: 52px; }

  /* lists and grids stack */
  .rank-meta { grid-template-columns: 1fr 1fr; }
  .rank-head .rank-badge { box-sizing: border-box; flex-basis: 100%; margin-top: -8px; padding-left: 48px; }
  .related { margin-top: var(--s-8); }
  .related > h2 { font-size: var(--fs-24); }
  .related-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .related-list li { grid-row: auto; display: block; padding: 14px 32px 16px 0; }
  .related-list li::after { top: 26px; }
  .related-list a { display: flex; align-items: center; min-height: 44px; }
  .related-list p { margin-top: 0; }
  .about-box { margin-top: var(--s-3); }
  /* route board: a list without frames, the city pair left, the distance right (km over miles) */
  .lg { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
  .lg li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-2); min-height: 60px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
  .lg li::after { content: none; }
  .lg a { display: flex; align-items: center; min-height: 44px; font-size: var(--fs-18); }
  .lg-note { max-width: 6.6em; font-size: 15px; line-height: 1.3; text-align: right; }
  .lg li:hover { background: var(--paper); }
  /* open data list: icon and title on one line */
  .cards { gap: var(--s-3); }
  .card.has-ic:not(:has(> .card-tag)) { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 14px; align-items: center; padding-top: 20px; }
  .card.has-ic:not(:has(> .card-tag)) > * { grid-column: 1 / -1; }
  .card.has-ic:not(:has(> .card-tag)) > .card-ic { grid-column: 1; margin: 0; }
  .card.has-ic:not(:has(> .card-tag)) > h3 { grid-column: 2; margin: 0; }
  .card.has-ic:not(:has(> .card-tag)) > h3 a { display: flex; align-items: center; min-height: 44px; }
  .card.has-ic:not(:has(> .card-tag)) > h3 + * { margin-top: 4px; }
  /* stats strip: two columns, smaller figures */
  .stat { padding: var(--s-2); }
  .stat-v { font-size: var(--fs-32); }

  /* FAQ: question a little smaller */
  .faq-item h3 { font-size: var(--fs-18); }
  .t-faq .content > .faq > h2 { font-size: var(--fs-24); }

  /* call to action */
  .cta { padding: var(--s-5) var(--s-2); }
  .cta-h { font-size: var(--fs-28); }

  /* footer: two compact columns of 44 px links; "Payments" above the coins; the page ends on the footer colour */
  .ftr { padding-top: var(--s-7); }
  .f-cols { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .f-col ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: center; }
  .f-col li { margin: 0; }
  .f-h { margin: 0 0 4px; font-size: var(--fs-17); }
  .f-col a { display: flex; align-items: center; min-height: 44px; padding-block: 6px; line-height: 1.3; }
  .f-pay { flex-direction: column; align-items: flex-start; }
  .coins-mini { display: grid; grid-template-columns: repeat(3, max-content); gap: 14px 28px; }
  .coins-mini .coin-logo { width: 22px; height: 22px; }
  body.has-sticky { padding-bottom: 0; }
  body.has-sticky .ftr { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  /* buy bar: the button keeps its label on one line, the note takes the rest (two lines at most in German) */
  .sticky-cta { gap: 12px; }
  .sticky-cta .btn { flex: 0 0 auto; padding-inline: 16px; white-space: nowrap; }
  .sticky-cta .btn .ic { display: none; } /* decorative arrow (aria-hidden SVG, no text) */
  .sticky-cta .sc-note { flex: 1 1 0; min-width: 0; max-width: none; color: var(--ink-2); }
}

/* tables on phones (under 640 px; the engine stacks .trv-stack tables into cards there): denser, calmer layouts */
@media (max-width: 640px) {
  /* every stacked table: rows split by hairlines instead of framed cards; label above value */
  .table-wrap.trv-stack.trv-stack { border-top: 1px solid var(--line); }
  .table-wrap.trv-stack tbody tr { margin: 0; padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
  /* our row: tinted inside the frame (no negative margin: the card never runs past the column), a 3 px accent rule on top */
  .table-wrap.trv-stack tbody tr.hl { margin: 0; padding-inline: 12px; border-color: var(--line); border-radius: var(--r-sm); background: var(--accent-soft); box-shadow: inset 0 3px 0 var(--accent); }
  .table-wrap.trv-stack tbody tr.hl > :first-child { box-shadow: none; }
  .table-wrap.trv-stack tbody tr > :first-child { padding: 0 0 4px; color: var(--ink); font: 600 var(--fs-18)/1.3 var(--font-head); }
  .table-wrap.trv-stack.trv-stack tbody :is(th, td) { padding: 6px 0; border: 0; font-size: var(--fs-16); }
  .table-wrap.trv-stack tbody tr > [data-label] { border-top: 0; }
  .table-wrap.trv-stack.trv-stack tbody tr > th:first-child { font-size: var(--fs-18); } /* the card title, above the 16 px values */
  .table-wrap.trv-stack tbody [data-label]::before { margin: 0 0 1px; color: var(--muted); font: 500 15px/1.4 var(--font-body); letter-spacing: 0; }
  .table-wrap.trv-stack caption { padding: 0 0 12px; border: 0; }
  .tbl.cmp:not(:has(tbody tr.hl)) .table-wrap.trv-stack tbody td:last-child { border-radius: var(--r-sm); background: var(--accent-soft); }

  /* figure indexes (market fares, network fees): line 1 the route and its fare, line 2 the other facts in a row */
  .trv-index:not(.trv-wide, .trv-sale-list) .table-wrap.trv-stack tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 12px 0 14px; }
  .trv-index:not(.trv-wide, .trv-sale-list) .table-wrap.trv-stack tbody tr::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  .trv-index:not(.trv-wide, .trv-sale-list) .table-wrap.trv-stack.trv-stack tbody tr > th { order: 1; flex: 1 1 0; min-width: 0; padding: 0; font: 600 var(--fs-18)/1.3 var(--font-head); }
  .trv-index:not(.trv-wide, .trv-sale-list) .table-wrap.trv-stack.trv-stack tbody tr > td:nth-child(2) { order: 1; flex: none; padding: 0; color: var(--ink); font: 700 var(--fs-22)/1.2 var(--font-head); font-variant-numeric: var(--num); text-align: right; }
  .trv-index:not(.trv-wide, .trv-sale-list) .table-wrap.trv-stack tbody tr > td:nth-child(2)::before { content: none; }
  .trv-index:not(.trv-wide, .trv-sale-list) .table-wrap.trv-stack.trv-stack tbody tr > td:nth-child(n+3) { order: 3; display: block; flex: 0 1 auto; padding: 0; color: var(--ink); font: 500 15px/1.45 var(--font-head); font-variant-numeric: var(--num); letter-spacing: .01em; text-align: left; }
  .trv-index:not(.trv-wide, .trv-sale-list) .table-wrap.trv-stack tbody tr > td:nth-child(n+3)::before { content: attr(data-label) ": "; display: inline; margin: 0; color: var(--muted); font: 400 15px/1.45 var(--font-body); letter-spacing: 0; }
  .trv-index:not(.trv-wide, .trv-sale-list) .table-wrap.trv-stack tbody th > a:only-child { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; padding: 0; margin: -6px 0; }

  /* acceptance indexes: one compact card per entry. Airlines: name + status, How | Dates, Conditions, Checked | Sold
     by us, Source. Sellers: name, Company | Coins, Refund, Fees | ID checks, Checked | Source. */
  .trv-wide .table-wrap.trv-stack tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-2); padding: 16px 0; }
  .trv-wide .table-wrap.trv-stack.trv-stack tbody :is(th, td) { padding: 4px 0; font-size: 15px; line-height: 1.45; }
  .trv-wide .table-wrap.trv-stack tbody [data-label]::before { margin: 0; line-height: 1.35; }
  .trv-wide .table-wrap.trv-stack.trv-stack tbody th { grid-column: 1 / -1; padding: 0 0 4px; font: 600 var(--fs-20)/1.25 var(--font-head); }
  .trv-wide .table-wrap.trv-stack tbody td:nth-child(2) { grid-column: 1 / -1; }
  .trv-wide .table-wrap.trv-stack.trv-stack tbody td:nth-child(4) { grid-column: 1 / -1; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
  .trv-wide .table-wrap.trv-stack tbody td:nth-child(7) { grid-column: 1 / -1; }
  .trv-wide:has(tbody td:nth-child(2) > .trv-b) .table-wrap.trv-stack tbody td:nth-child(2) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
  .trv-wide:has(tbody td:nth-child(2) > .trv-b) .table-wrap.trv-stack tbody td:nth-child(2)::before { display: inline; margin: 0; }
  .trv-wide:has(tbody td:nth-child(2) > .trv-b) .table-wrap.trv-stack tbody td:nth-child(3) { grid-column: 1; grid-row: 3; }
  .trv-wide:has(tbody td:nth-child(2) > .trv-b) .table-wrap.trv-stack tbody td:nth-child(5) { grid-column: 2; grid-row: 3; }
  .trv-wide:has(tbody td:nth-child(2) > .trv-b) .table-wrap.trv-stack tbody td:nth-child(4) { grid-row: 4; }
  .trv-wide:has(tbody td:nth-child(2) > .trv-b) .table-wrap.trv-stack tbody td:nth-child(6) { grid-column: 1; grid-row: 5; }
  .trv-wide:has(tbody td:nth-child(2) > .trv-b) .table-wrap.trv-stack tbody td:nth-child(8) { grid-column: 2; grid-row: 5; }
  .trv-wide:has(tbody td:nth-child(2) > .trv-b) .table-wrap.trv-stack tbody td:nth-child(7) { grid-row: 6; }
  .trv-wide:not(:has(tbody td:nth-child(2) > .trv-b)) .table-wrap.trv-stack tbody td:nth-child(2) { grid-column: 1; }
  .trv-wide:not(:has(tbody td:nth-child(2) > .trv-b)) .table-wrap.trv-stack tbody td:nth-child(3) { grid-column: 2; }
  .trv-wide:not(:has(tbody td:nth-child(2) > .trv-b)) .table-wrap.trv-stack tbody td:nth-child(5) { grid-column: 1; }
  .trv-wide:not(:has(tbody td:nth-child(2) > .trv-b)) .table-wrap.trv-stack tbody td:nth-child(6) { grid-column: 2; }
  .trv-wide:not(:has(tbody td:nth-child(2) > .trv-b)) .table-wrap.trv-stack tbody td:nth-child(7) { grid-column: 1; }
  .trv-wide:not(:has(tbody td:nth-child(2) > .trv-b)) .table-wrap.trv-stack tbody td:nth-child(8) { grid-column: 2; }
  .trv-wide .table-wrap.trv-stack .trv-b { font-size: 15px; }
  .trv-wide .table-wrap.trv-stack tbody td a { overflow-wrap: anywhere; }

  /* confirmation times: a plain list from screen edge to screen edge (hairlines top and bottom, no side frame, no
     rounded corner), columns sized by content: the four columns hold in 360 px without cutting a word ("Confirmations"
     stays whole, network names wrap between words) */
  .table-wrap.pay-table { margin: var(--s-2) calc(-1 * var(--gutter)) var(--s-1); overflow: visible; border-inline: 0; border-radius: 0; }
  .steps .step-list > li > .table-wrap.pay-table { margin-left: calc(-52px - var(--gutter)); }
  .pay-table table { table-layout: auto; width: 100%; }
  .pay-table :is(th, td) { padding: 10px 6px; overflow-wrap: normal; hyphens: manual; }
  .pay-table :is(th, td):first-child { padding-left: 16px; }
  .pay-table :is(th, td):last-child { padding-right: 16px; }
  .pay-table thead th { font-size: 15px; line-height: 1.25; white-space: normal; }
  .pay-table thead th:nth-child(3) { white-space: nowrap; }
  .pay-table tbody th { white-space: nowrap; font-size: 15px; }
  .pay-table tbody th .coin-logo { width: 18px; height: 18px; margin-right: 6px; }
  .pay-table td { font-size: 15px; line-height: 1.35; }
  .pay-table td:nth-child(n+3) { font-size: var(--fs-16); white-space: nowrap; }
  /* network column narrower than "Tron (TRC-" (79 px) but wider than "Ethereum" (68 px): a two-word network wraps at its
     space, never inside "TRC-20" */
  .pay-table :is(thead th, td):nth-child(2) { width: 84px; }
  /* comparison: the two offers side by side under the point compared, ours tinted */
  .tbl.cmp .table-wrap.trv-stack tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; align-items: start; }
  .tbl.cmp .table-wrap.trv-stack.trv-stack tbody tr > th { grid-column: 1 / -1; padding-bottom: 6px; }
  .tbl.cmp .table-wrap.trv-stack.trv-stack tbody td { align-self: stretch; padding: 8px 0; }
  .tbl.cmp:not(:has(tbody tr.hl)) .table-wrap.trv-stack.trv-stack tbody td:last-child { margin: 0; padding: 8px 10px; }
  :is(.tbl, .facts-table) :is(.yes, .no) { width: 26px; height: 26px; font-size: 15px; }
}
@media (max-width: 560px) {
  .rank { padding: 20px 16px; }
  .rank-meta { grid-template-columns: 1fr; gap: var(--s-1); }
  .rank-meta > div { display: block; }
  .rank-meta :is(dt, dd) { display: inline; margin: 0; }
  .rank-meta dt::after { content: ": "; }
}
@media (max-width: 520px) {
  .logo { gap: 8px; font-size: 1.25rem; }
  .logo-mark { width: 30px; height: 30px; }
  .hdr-in { gap: 10px; }
  .menu { padding: 0 12px; }
}
@media (max-width: 400px) {
  .hdr-in { gap: 8px; }
  .menu { padding: 0 10px; }
  .hdr-login { padding-inline: 2px; }
}

/* ---------------------------------------------------------------------------------------------------- 21. languages */
/* Korean: the signage face has no Hangul → the text face for headings (it covers Vietnamese, so vi keeps it) */
:lang(ko) { --font-head: var(--font-body); word-break: keep-all; overflow-wrap: anywhere; }
html:lang(ko) { --h1: clamp(1.875rem, 1.2rem + 1.9vw, 3rem); --h1-home: clamp(2.125rem, 1.1rem + 2.9vw, 3.75rem); --h2: clamp(1.5rem, 1.3rem + .6vw, 1.875rem); }
html:lang(ko) :is(h1, h2, h3, .t-home .page-head h1) { letter-spacing: 0; line-height: 1.25; }
:root :lang(ko) :is(.t-location .kicker, .trv-f input[name="from"], .trv-f input[name="to"]) { letter-spacing: 0; }
/* long German, French, Spanish and Portuguese words: hyphenate prose and table cells on narrow screens */
@media (max-width: 760px) {
  :is(:lang(de), :lang(fr), :lang(es), :lang(pt)) :is(p, li, td, th, dd, h3, .lg a, .card h3) { hyphens: auto; -webkit-hyphens: auto; }
  /* a one-word field label longer than its cell ("Erwachsene" over Adults on a 360 px phone) hyphenates instead of
     running past the cell edge */
  :root :is(:lang(de), :lang(fr), :lang(es), :lang(pt)) .trv-fs .trv-f label { hyphens: auto; -webkit-hyphens: auto; }
}

/* forced colours (high-contrast modes): mask-drawn icons and badges get system colours */
@media (forced-colors: active) {
  .badges li::before, .related-list li::after, .lg li::after, .callout::before, .trv-search .ds-pop :is(a, li > span)::before, :root .kicker::before, .trv-b::before, .qa-label::before, .topbar strong::before, .fold > summary::after { forced-color-adjust: none; background: CanvasText; }
  .trv-b { border: 1px solid CanvasText; }
  .t-home .page-head, .band, .t-home .content > .trv-fs { border-image: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lg li::after, .related-list li::after, .fold > summary::after { transition: none; }
}