/* Travel for Pinoys web app mockup. Tokens: Brand Book v1.1. Motion and materials: apple-design skill.
   Layout: phone = translucent bar + bottom tabs; tablet (768+) = floating tab bar, wider grids;
   desktop (1100+) = top navigation + voucher rail. */
@property --dy { syntax: '<length>'; inherits: false; initial-value: 0px; }
:root {
  --blue: #0057FF;
  --yellow: #FCD600;
  --ink: #231F20;
  --pin: #EA1D25;
  --bg: #F4F6FB;
  --surface: #FFFFFF;
  --fg: #231F20;
  --muted: #5B6276;
  --line: #DDE2EC;
  --soft: #EEF2FB;
  --ok: #17803D;
  --ok-soft: #E3F4E8;
  --warn: #B3541E;
  --group: var(--blue);
  --f-display: 'Fraunces', Georgia, serif;
  --f-body: 'Barlow', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --f-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  /* Springs as CSS easing. Default: critically damped (damping 1.0, response ~0.35s).
     Bounce: damping ~0.8, only after a flick or drag release carried momentum. */
  --spring: cubic-bezier(.2, .8, .2, 1); /* browsers without linear() easing */
  --spring-bounce: cubic-bezier(.3, 1.3, .5, 1);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --tabs-h: 64px;
  --lbh: 0px; /* height of the launch banner when it shows */
  color-scheme: light;
}
@supports (animation-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, 0.087 2.1%, 0.29 6.1%, 0.5 10.6%, 0.678 15.5%, 0.811 20.9%, 0.902 27%, 0.957 34%, 0.986 42.5%, 0.997 53.5%, 1);
    --spring-bounce: linear(0, 0.13 3%, 0.45 8.5%, 0.78 14%, 0.98 19.5%, 1.06 25%, 1.075 30%, 1.05 37%, 1.01 46%, 0.995 56%, 1);
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { font: 400 16px/1.55 var(--f-body); letter-spacing: 0; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
/* Fraunces: optical sizing follows font size; tracking and leading tighten as size grows. */
h1, h2, .display { font-family: var(--f-display); font-optical-sizing: auto; font-variation-settings: 'SOFT' 100; font-weight: 900; text-wrap: balance; }
h1 { font-size: clamp(32px, 7vw, 46px); line-height: 1.04; letter-spacing: -0.025em; }
h2 { font-size: 23px; line-height: 1.12; letter-spacing: -0.012em; }
h3 { font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -0.003em; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
input { font: inherit; }
img { display: block; max-width: 100%; }
svg.i { width: var(--s, 22px); height: var(--s, 22px); flex: none; display: block; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 8px; }
.label { font-weight: 800; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.sticker { color: var(--yellow); text-shadow: 2px 3px 0 var(--ink); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }

/* Touch-down feedback: respond instantly on press, settle back with a spring. */
.press { transition: transform .45s var(--spring), opacity .2s; }
.press:active { transform: scale(.97); transition-duration: .08s; }
.gcard.press:active, .ccard.press:active, .pick.press:active { transform: scale(.985); }

/* ---------- shell ---------- */
.shell { min-height: 100dvh; padding-bottom: calc(var(--tabs-h) + var(--safe-b)); }
.page { max-width: 1240px; margin: 0 auto; }
.page.narrow { max-width: 820px; }
.sec { display: grid; gap: 12px; padding: 22px var(--gutter) 0; }
.sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sec-h a { color: var(--blue); font-weight: 700; font-size: 15px; }

/* Large title (all sizes); the bar shows a small version once it scrolls away. */
.lt { padding: 14px var(--gutter) 0; display: grid; gap: 6px; }
.lt p { font-size: 16px; max-width: 40em; }

/* Translucent bar (phone/tablet): content scrolls under it. */
.bar { position: sticky; top: var(--lbh); z-index: 30; color: #fff; display: flex; align-items: center; gap: 8px;
  padding: calc(var(--safe-t) + 8px) max(10px, env(safe-area-inset-right, 0px)) 8px max(10px, env(safe-area-inset-left, 0px)); min-height: 56px;
  background: var(--group); background: color-mix(in srgb, var(--group) 82%, transparent); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .14); }
.bar .bar-title { flex: 1; min-width: 0; text-align: center; font-weight: 700; font-size: 17px; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .45s var(--spring); }
.bar.compact .bar-title { opacity: 1; transform: none; }
.bar-search .searchbox { flex: 1; }
.iconbtn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; transition: background .15s, transform .45s var(--spring); }
.iconbtn:active { background: rgba(255, 255, 255, .2); transform: scale(.92); transition-duration: .08s; }

/* top navigation (desktop) */
.topnav { display: none; }
@media (min-width: 1100px) {
  .shell { padding-bottom: 0; }
  .tabs, .bar, .only-touch { display: none !important; }
  .topnav { display: block; position: sticky; top: var(--lbh); z-index: 40; color: #fff; view-transition-name: topnav;
    background: var(--blue); background: color-mix(in srgb, var(--blue) 86%, transparent); transition: box-shadow .2s; -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
  .topnav .in { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 26px; padding: 12px 24px; }
  .topnav img { height: 38px; width: auto; }
  .topnav nav { display: flex; gap: 22px; font-weight: 700; font-size: 16px; }
  .topnav nav a { opacity: .88; padding: 6px 0; border-bottom: 3px solid transparent; transition: opacity .15s; }
  .topnav nav a:hover { opacity: 1; }
  .topnav nav a[aria-current="page"] { opacity: 1; border-color: var(--yellow); }
  .topnav .tsearch { margin-left: auto; transition: opacity .2s, transform .35s var(--spring); display: flex; align-items: center; gap: 8px; background: #fff; color: var(--muted); border-radius: 999px; padding: 9px 16px; min-width: 280px; font-size: 15px; }
  .topnav .tsearch svg { color: var(--ink); flex: none; }
  .topnav .tsearch input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: var(--ink); padding: 0; }
  .topnav .tsearch input::placeholder { color: var(--muted); }
  .topnav .tsearch input:focus { outline: none; }
  .topnav .tsearch:focus-within { box-shadow: 0 0 0 3px var(--yellow); }
  .topnav.no-search .tsearch { opacity: 0; transform: translateY(-4px); pointer-events: none; visibility: hidden; transition: opacity .2s, transform .35s var(--spring), visibility 0s .2s; }
  .topnav .acct { width: 40px; height: 40px; }
  .topnav .acct[aria-current] { background: var(--yellow); color: var(--ink); }
  .topnav > .in > a[aria-current] img { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .25)); }
  .topnav.scrolled { box-shadow: 0 1px 0 rgba(255, 255, 255, .12), 0 8px 24px rgba(0, 20, 80, .18); }
  .lt { padding-top: 28px; }
  h1 { font-size: 46px; }
}

/* bottom tabs: light translucent material with a bright top edge, no hard divider */
.tabs { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); view-transition-name: tabs;
  padding: 8px max(6px, env(safe-area-inset-left, 0px)) calc(8px + var(--safe-b));
  background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 -1px 0 rgba(35, 31, 32, .06); }
.tabs a { display: grid; justify-items: center; gap: 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; color: #5F6470; position: relative; }
.tabs a[aria-current="page"] { color: var(--blue); }
@media (min-width: 768px) and (max-width: 1099px) {
  .tabs { left: 50%; right: auto; transform: translateX(-50%); bottom: calc(14px + var(--safe-b)); width: min(560px, calc(100% - 32px)); border-radius: 24px; padding: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 12px 32px rgba(0, 40, 120, .16); }
  .shell { padding-bottom: calc(96px + var(--safe-b)); }
}

/* two columns on desktop: content + voucher rail */
.rail { display: none; }
@media (min-width: 1100px) {
  .layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; padding: 0 24px; align-items: start; }
  .layout .sec, .layout .lt { padding-left: 0; padding-right: 0; }
  .rail { display: grid; gap: 14px; position: sticky; top: calc(84px + var(--lbh)); padding-top: 22px; }
  .page.narrow .sec, .page.narrow .lt { padding-left: 24px; padding-right: 24px; }
}

/* ---------- 1. homepage header bar and banner ---------- */
/* phone and tablet: blue bar with the logo centered (desktop has the top navigation) */
.hbar { position: sticky; top: var(--lbh); z-index: 30; display: flex; align-items: center; justify-content: center; min-height: 56px; padding: calc(var(--safe-t) + 10px) 14px 10px;
  background: var(--blue); background: color-mix(in srgb, var(--blue) 82%, transparent); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .14); }
.hbar img { height: 32px; width: auto; }
@media (min-width: 1100px) { .hbar { display: none; } }
/* Header photo (Jewel), with a medium TFP mosaic over it and a soft shade at the bottom for the text. */
.banner { position: relative; color: #fff; background: #123 var(--cover-s, url(../img/hero-jewel-900.jpg)) center 40% / cover no-repeat; overflow: hidden; }
.banner::before { content: ""; position: absolute; inset: 0; background: url(../pat/tfp-mosaic-dark-tfp-bold.svg) 0 0 / 216px; opacity: .6; mix-blend-mode: overlay; pointer-events: none; }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 20, 60, 0) 40%, rgba(0, 20, 60, .45) 100%); pointer-events: none; }
.banner-in { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 14px var(--gutter) 18px; display: grid; gap: 12px; aspect-ratio: 16 / 10; width: 100%; align-content: end; justify-items: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.banner .sp { margin: 0; color: var(--yellow); font-family: var(--f-display); font-variation-settings: 'SOFT' 100; font-weight: 900; font-size: 30px; line-height: 1; letter-spacing: -0.015em; text-align: center; }
@media (min-width: 768px) { .banner-in { aspect-ratio: auto; height: 360px; } .banner .sp { font-size: 38px; } }
.search-field { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 640px; color: var(--muted); border-radius: 999px; padding: 14px 18px; font-size: 16px;
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); box-shadow: 0 8px 24px rgba(0, 20, 60, .25); }
.search-field svg { color: var(--ink); }
@media (min-width: 1100px) { .banner { background-image: var(--cover-l, url(../img/hero-jewel.jpg)); } .banner-in { padding: 28px 24px; height: 420px; justify-items: start; } .banner .sp { font-size: 44px; text-align: left; } }

/* ---------- vouchers ---------- */
.codes-strip { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tag-aff { font-size: 13px; color: var(--muted); }
.warnc { grid-template-columns: auto 1fr; align-items: start; font-size: 15px; }

/* sticky voucher bar in guides: dark material floating over content */
.bookbar { position: sticky; bottom: calc(var(--tabs-h) + var(--safe-b) + 10px); z-index: 20; margin: 18px var(--gutter) 0; color: #fff; border-radius: 16px; padding: 8px 8px 8px 14px; display: flex; gap: 8px; align-items: center;
  background: var(--vc); box-shadow: 0 12px 30px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .15); }
.bookbar .t { flex: 1; min-width: 0; font-size: 13px; line-height: 1.3; color: rgba(255, 255, 255, .8); text-align: left; }
.bookbar .t b { display: block; font: 800 17px var(--f-body); letter-spacing: -0.005em; color: #fff; }
.bookbar .vc-claim { margin: 0; min-height: 42px; padding: 0 12px 0 16px; font-size: 13px; box-shadow: 0 3px 0 var(--ink); }
@media (min-width: 768px) and (max-width: 1099px) { .bookbar { bottom: calc(96px + var(--safe-b)); } }
@media (min-width: 1100px) { .bookbar { display: none; } }

/* ---------- destinations ---------- */
.dests { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: 12px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); }
.dests::-webkit-scrollbar { display: none; }
.dests > * { scroll-snap-align: start; }
@media (min-width: 768px) { .dests { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; } }
.dest { display: grid; gap: 6px; justify-items: center; text-align: center; font-weight: 700; }
.dest .wall { width: 100%; aspect-ratio: 1; border-radius: 24px; display: grid; place-items: center; max-width: 100%; position: relative; overflow: hidden; background: var(--g); box-shadow: 0 6px 16px rgba(0, 0, 0, .14); }
.dest .wall::before { content: ""; position: absolute; inset: 0; background: var(--wall) 0 0 / 216px; opacity: .35; }
.dest .wall img { width: 72%; position: relative; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .28)); }
.dest small { font-weight: 600; font-size: 13px; color: var(--muted); margin-top: -4px; }

/* explore: country cards */
.clist { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.ccard { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 14px; align-items: center; color: var(--fg); background: var(--surface); border-radius: 20px; padding: 12px 14px 12px 12px; border-left: 6px solid var(--g); box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(0, 40, 120, .05); }
.ccard img { width: 68px; height: 68px; }
.ccard b { display: block; font-family: var(--f-display); font-variation-settings: 'SOFT' 100; font-weight: 900; font-size: 24px; letter-spacing: -0.015em; }
.ccard span span { display: block; font-size: 14px; color: var(--muted); line-height: 1.35; }
.ccard small { display: block; margin-top: 4px; font-weight: 700; font-size: 12.5px; color: var(--g); }
.ccard > svg { color: #8A93A6; }

/* chips */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cchip { padding-left: 5px; }
.cchip .cbadge { width: 24px; height: 24px; flex: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 700; font-size: 14px; white-space: nowrap; transition: background .2s, color .2s, transform .45s var(--spring); }
.chip svg { color: var(--blue); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.chip[aria-pressed="true"] svg { color: var(--yellow); }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter); scroll-snap-type: x proximity; }
.chips.scroll::-webkit-scrollbar { display: none; }
@media (min-width: 1100px) { .chips.scroll { margin: 0; padding: 2px 0; flex-wrap: wrap; } }

/* ---------- guide cards and rows ---------- */
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.gcard { background: var(--surface); border-radius: 20px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(0, 40, 120, .05); min-width: 0; }
.gcard .ph { aspect-ratio: 16 / 9; background: var(--soft) center / cover no-repeat; position: relative; max-width: 100%; }
.meta .pill { margin-right: 2px; }
/* Location pill (brand book): white, outlined in the group color, red pin, black Barlow ExtraBold capitals. */
.pill { --g: var(--blue); display: inline-flex; align-items: center; gap: 3px; justify-self: start; background: #fff; border: 2.5px solid var(--g); border-radius: 999px; padding: 3px 10px 3px 5px; font: 800 12px/1 var(--f-body); letter-spacing: .02em; text-transform: uppercase; color: #000; white-space: nowrap; }
.pill svg { color: var(--pin); --s: 16px !important; }
.pill.news svg { color: var(--blue); }
.pill.sm { font-size: 10.5px; padding: 2px 8px 2px 4px; border-width: 2px; }
.pill.sm svg { --s: 13px !important; }
.pill.lg { font-size: 14px; padding: 4px 12px 4px 6px; border-width: 3px; }
.pill.lg svg { --s: 19px !important; }
.gcard .bd { padding: 12px 14px 16px; display: grid; gap: 6px; align-content: start; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--muted); align-items: center; }
.badge { display: inline-flex; align-items: center; gap: 4px; justify-self: start; font-weight: 800; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; color: #fff; background: var(--group); }
.badge.lock { background: var(--soft); color: var(--muted); }
.list { background: var(--surface); border-radius: 20px; overflow: hidden; box-shadow: 0 1px 0 var(--line); }
.row { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--soft); min-width: 0; width: 100%; text-align: left; background: var(--surface); }
.list > .row:first-child { border-top: 0; }
.row .th { width: 64px; height: 64px; border-radius: 12px; background: var(--soft) center / cover; flex: none; }
.row .t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.row .t b { font-weight: 700; font-size: 15.5px; line-height: 1.3; }
.row .t > .meta { font-size: 12.5px; gap: 3px 8px; }
.row .end { color: #8A93A6; }
.row.press:active { transform: none; background: var(--soft); }
mark { background: #FFF2A8; color: inherit; border-radius: 3px; padding: 0 2px; }


/* ---------- country page ---------- */
.chead { background: var(--group); color: #fff; margin-top: -1px; position: relative; overflow: hidden; }
.chead::before { content: ""; position: absolute; inset: 0; background: var(--chead-wall, none) 0 0 / 216px; opacity: .35; }
.chead .in { position: relative; max-width: 1240px; margin: 0 auto; padding: 18px var(--gutter) 24px; display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 16px; align-items: center; }
.chead img { width: 100px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .25)); }
.chead h1 { color: #fff; }
.chead p { color: rgba(255, 255, 255, .94); margin-top: 6px; font-size: 16px; }
@media (min-width: 768px) { .chead .in { grid-template-columns: 140px minmax(0, 1fr); padding: 28px 24px; } .chead img { width: 140px; } }
.pack { background: var(--surface); border-radius: 20px; padding: 16px; display: grid; gap: 12px; box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(0, 40, 120, .05); }
.pack-top { display: flex; gap: 12px; align-items: center; }
.pack-top .ic { width: 48px; height: 48px; border-radius: 14px; background: var(--group); color: #fff; display: grid; place-items: center; flex: none; }
.pack-top b { display: block; font-size: 17px; }
.pack-top span { font-size: 14px; color: var(--muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 12px 18px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; }
.btn.ghost { background: var(--soft); color: var(--blue); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.full { width: 100%; }
.btn.sm { min-height: 34px; padding: 7px 12px; font-size: 12px; }
.tpanel { background: var(--surface); border-radius: 20px; overflow: hidden; box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(0, 40, 120, .06); }
.tp-top { position: relative; padding: 16px 14px 14px; }
.tp-top::before { content: ""; position: absolute; inset: 0; background: var(--quiet) center / 360px; opacity: .1; }
.ttiles { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 4px; }
@media (min-width: 768px) { .ttiles { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); } }
.ttile { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 13px; font-weight: 700; line-height: 1.2; }
.ttile .ti { width: 62px; height: 42px; border-radius: 999px; background: var(--group); color: #fff; display: grid; place-items: center; position: relative; }
.ttile .ti em { position: absolute; top: -6px; right: -6px; min-width: 20px; font: 800 11px/1 var(--f-body); font-style: normal; background: var(--ink); color: #fff; border-radius: 999px; padding: 3px 5px; border: 2px solid var(--surface); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 6px; }
@media (min-width: 768px) { .tiles { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.tile { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 13px; font-weight: 700; }
.tile svg { color: var(--group); }
.quiet { position: relative; border-radius: 20px; padding: 16px; overflow: hidden; background-size: 360px; }
.quiet::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .87); }
.quiet > * { position: relative; }

/* ---------- picks ---------- */
.pick { background: var(--surface); border-radius: 20px; padding: 14px 16px; display: grid; gap: 10px; box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(0, 40, 120, .05); min-width: 0; align-content: start; }
.pick-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.pick-top b { font-size: 17px; line-height: 1.25; letter-spacing: -0.003em; }
.stars { color: #E9A800; letter-spacing: 1px; font-size: 15px; white-space: nowrap; }
.stars .off { color: #D5DAE4; }
.fav { background: var(--yellow); color: var(--ink); }
.for { display: flex; gap: 6px; flex-wrap: wrap; }
.for span { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--soft); color: var(--muted); }
.for span.yes { background: var(--ok-soft); color: var(--ok); }
.for span.meh { background: #FFF6D6; color: #6B5500; }
.pros { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 14px; }
.pros li::before { content: "✓ "; color: var(--ok); font-weight: 800; }
.pros li.w::before { content: "! "; color: var(--warn); }
.pick .note { font-size: 14px; color: var(--muted); font-style: italic; }
.pick .acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- guide page ---------- */
.reader { max-width: 760px; margin: 0 auto; }
.rhero { aspect-ratio: 16 / 9; background: var(--soft) center / cover; max-width: 100%; view-transition-name: hero; }
@media (min-width: 768px) { .rhero { border-radius: 24px; margin: 18px var(--gutter) 0; } }
.rhead { padding: 18px var(--gutter) 0; display: grid; gap: 10px; }
.rhead h1 { font-size: clamp(28px, 6vw, 42px); letter-spacing: -0.022em; }
.ractions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.content { padding: 18px var(--gutter) 0; font-size: 17.5px; line-height: 1.7; overflow-wrap: anywhere; }
.content > * + * { margin-top: 1em; }
.content h2 { font-size: 26px; margin-top: 1.6em; letter-spacing: -0.015em; }
.content h3 { font-size: 20px; font-weight: 800; margin-top: 1.4em; }
.content a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
/* The "Sources:" line at the end of an article (theme.js wireSources). !important beats the 0.8em some posts set inline. */
.content p.src-line { font-size: 10px !important; line-height: 1.5; }
.content img { border-radius: 14px; height: auto; }
.content figure { margin: 1.4em 0 0; }
.content figcaption { font-size: 14px; color: var(--muted); text-align: center; margin-top: 6px; }
.content ul, .content ol { padding-left: 1.3em; }
.content blockquote { margin: 1.2em 0 0; padding: 4px 0 4px 16px; border-left: 4px solid var(--yellow); color: #3A3F4C; }
/* Tables: theme.js wraps each in a white card that scrolls sideways only if it must. Words never split
   mid-word inside a table (the article's break-anywhere rule squeezed columns to a few letters). */
.content .tw { position: relative; background: var(--surface); border-radius: 16px; box-shadow: 0 0 0 1px var(--line); }
.content .tsc { overflow-x: auto; overscroll-behavior-x: contain; border-radius: 16px; }
.content table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.5; overflow-wrap: normal; }
.content th, .content td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); background: var(--surface); }
.content tbody tr:last-child > * { border-bottom: 0; }
.content th { background: var(--soft); font-size: 13px; font-weight: 800; white-space: nowrap; }
.content thead th:first-child, .content thead + tbody td:first-child { position: sticky; left: 0; z-index: 1; box-shadow: inset -1px 0 0 var(--line); }
.content thead + tbody td:first-child { font-weight: 700; }
.content td a { white-space: nowrap; }
.content .nohead thead { display: none; }
.content .tw.more::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 32px; border-radius: 0 16px 16px 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--surface)); pointer-events: none; }
.content .thint { margin-top: 6px; display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.content .thint[hidden] { display: none; }
/* Phones: a table with a header row and 3+ columns becomes one card per row. The first cell is the
   card's title; the others show their column name (data-label, from theme.js) beside the value. */
@media (max-width: 767px) {
  .content .tw.tcards { background: none; box-shadow: none; }
  .content .tcards .tsc { overflow: visible; }
  .content .tcards table, .content .tcards tr { display: block; }
  .content .tcards thead { display: none; }
  .content .tcards tbody { display: grid; gap: 10px; }
  .content .tcards tr { background: var(--surface); border-radius: 16px; padding: 2px 14px 4px; box-shadow: 0 0 0 1px var(--line); }
  .content .tcards td { display: grid; grid-template-columns: 6.6em minmax(0, 1fr); gap: 12px; padding: 9px 0; border: 0; border-top: 1px solid var(--line); background: none; position: static; box-shadow: none; font-weight: 400; overflow-wrap: anywhere; }
  .content .tcards td::before { content: attr(data-label); font-size: 13px; font-weight: 700; color: var(--muted); line-height: 1.75; overflow-wrap: normal; }
  .content .tcards td:first-child { display: block; border-top: 0; padding: 12px 0 9px; font-weight: 800; font-size: 16.5px; position: static; box-shadow: none; }
  .content .tcards td:first-child::before { content: none; }
  .content .tcards td:empty { display: none; }
  /* Matrix tables (short cells like ✅/❌, prices, times) keep their grid and swipe sideways instead. */
  .content .tgrid table { font-size: 14px; }
  .content .tgrid th, .content .tgrid td { padding: 9px 10px; }
  .content .tgrid th { white-space: normal; min-width: 4.2em; line-height: 1.35; }
  .content .tgrid td:first-child, .content .tgrid th:first-child { min-width: 7.2em; }
}
.content hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.content .kg-callout-card { background: #FFF8D6; border-radius: 14px; padding: 14px 16px; display: flex; gap: 10px; }
.content .kg-button-card a, .content .kg-btn { display: inline-block; background: var(--blue); color: #fff; text-decoration: none; padding: 10px 18px; border-radius: 999px; font-weight: 800; }
.content .kg-bookmark-card a { display: flex; gap: 12px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; }
.content .kg-bookmark-content { padding: 12px; font-size: 14px; flex: 1; min-width: 0; }
.content .kg-bookmark-thumbnail img { width: 120px; height: 100%; object-fit: cover; border-radius: 0; }
.content .kg-bookmark-icon, .content .kg-bookmark-publisher, .content .kg-bookmark-author { display: none; }
.content .kg-bookmark-title { font-weight: 700; }
.content .kg-bookmark-description { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.content .kg-gallery-row { display: flex; gap: 6px; } .content .kg-gallery-image { flex: 1; }
.content .embed-link a { display: inline-flex; padding: 10px 16px; border-radius: 999px; background: var(--soft); text-decoration: none; font-weight: 700; }

/* ---------- misc ---------- */
.card { background: var(--surface); border-radius: 20px; padding: 16px; display: grid; gap: 10px; box-shadow: 0 1px 0 var(--line); }
.empty { text-align: center; justify-items: center; padding: 28px 18px; color: var(--muted); }
.empty b { color: var(--fg); font-size: 18px; }
.searchbox { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 999px; padding: 3px 6px 3px 14px; min-width: 0; }
.searchbox input { flex: 1; min-width: 0; border: 0; background: none; padding: 8px 0; font-size: 17px; color: var(--ink); }
.searchbox input:focus { outline: none; }
.searchbox svg { color: var(--ink); }
.searchbox.desk { display: none; box-shadow: inset 0 0 0 2px var(--line); }
@media (min-width: 1100px) { .searchbox.desk { display: flex; } }
.foot { margin-top: 40px; background: var(--ink); color: #C9CED9; padding: 26px var(--gutter) 22px; } /* the shell already leaves room for the tab bar */
.foot-in { max-width: 1240px; margin: 0 auto; display: grid; gap: 22px; }
.f-intro { display: grid; gap: 10px; justify-items: start; }
.foot img { height: 34px; width: auto; }
.f-intro p { font-size: 14px; }
.f-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.f-cols h2 { font: 800 11.5px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); margin-bottom: 8px; }
.f-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.f-cols a { color: #fff; font-weight: 600; font-size: 15px; }
.f-copy { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 14px; font-size: 13px; }
@media (min-width: 768px) { .foot-in { grid-template-columns: 260px minmax(0, 1fr); column-gap: 40px; } .f-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } .f-copy { grid-column: 1 / -1; } }
@media (hover: hover) and (pointer: fine) { .f-cols a:hover { color: var(--yellow); } }
@media (min-width: 768px) and (max-width: 1099px) { .foot { padding-bottom: 44px; } }
@media (min-width: 1100px) { .foot { padding: 32px 24px; } }
.toast { position: fixed; left: 50%; bottom: calc(var(--tabs-h) + var(--safe-b) + 18px); transform: translateX(-50%) translateY(16px) scale(.96); color: #fff; padding: 11px 16px; border-radius: 14px; font-weight: 600; font-size: 15px; opacity: 0; pointer-events: none; z-index: 70; max-width: calc(100% - 32px); text-align: center;
  background: rgba(35, 31, 32, .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: opacity .2s, transform .45s var(--spring); }
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
@media (min-width: 1100px) { .toast { bottom: 28px; } }

/* ---------- voucher sheet: dimmed modal, draggable panel ---------- */
.sheet { position: fixed; inset: 0; z-index: 80; display: none; }
.sheet.on { display: block; }
.sheet .scrim { position: absolute; inset: 0; background: rgba(10, 14, 24, .45); animation: fadeIn .25s ease; }
.sheet.closing .scrim { opacity: 0; transition: opacity .3s; }
.sheet .panel { position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; background: var(--surface); border-radius: 26px 26px 0 0; padding: 8px 20px calc(22px + var(--safe-b)); box-shadow: 0 -12px 40px rgba(0, 0, 0, .2); touch-action: none; will-change: transform; transform: translateY(var(--dy)); outline: none; }
.sheet .sheet-x { position: absolute; top: 10px; right: 10px; color: var(--muted); display: none; }
.sheet .grab { width: 40px; height: 5px; border-radius: 999px; background: #CDD3DF; margin: 4px auto 14px; }
.panel-body { display: grid; gap: 12px; }
/* Tablet and desktop: a centered card, same drag-to-dismiss. */
@media (min-width: 768px) {
  .sheet .panel { top: 50%; left: 50%; right: auto; bottom: auto; width: min(520px, calc(100% - 48px)); margin: 0; border-radius: 26px; padding: 8px 24px 24px; max-height: calc(100% - 48px); overflow: auto;
    transform: translate(-50%, calc(-50% + var(--dy))); box-shadow: 0 24px 60px rgba(0, 0, 0, .28); }
  .sheet .sheet-x { display: grid; }
}
@media (hover: hover) and (pointer: fine) { .sheet .grab { cursor: grab; } }
@keyframes fadeIn { from { opacity: 0; } }


/* ---------- page transitions (View Transitions API) ----------
   Every page change is a short cross-fade (pages get opened many times a visit, so no slides).
   Tabs and top navigation stay put. Browsers without support keep the plain page change. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-fade-out .18s ease both; }
::view-transition-new(root) { animation: vt-fade-in .22s ease both; }
::view-transition-group(hero) { animation-duration: .45s; animation-timing-function: var(--spring); }
::view-transition-group(tabs), ::view-transition-group(topnav) { animation: none; }
@keyframes vt-fade-in { from { opacity: 0; } }
@keyframes vt-fade-out { to { opacity: 0; } }

/* ---------- Agoda voucher card: popup colors, Barlow headers, one action ---------- */
.vcard { --vc: #E8303A; background: var(--vc); color: #fff; border-radius: 20px; padding: 16px; display: grid; gap: 4px; align-content: start; min-width: 0;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .14); box-shadow: 0 8px 22px color-mix(in srgb, var(--vc) 32%, transparent); }
.vc-name { font-weight: 700; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.vc-amt { font: 800 25px/1.1 var(--f-body); letter-spacing: -0.012em; }
.vc-amt .upto { font-size: .62em; font-weight: 700; letter-spacing: 0; color: rgba(255, 255, 255, .85); margin-right: 4px; }
.vc-sub { text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, .82); margin-top: 6px; }
.vc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-weight: 700; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.vc-code { font: 900 14px var(--f-mono); letter-spacing: .05em; text-transform: none; color: #fff; background: rgba(255, 255, 255, .2); padding: 4px 8px; border-radius: 5px; }
.vc-claim { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 50px; padding: 0 16px; border-radius: 999px; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink); font-weight: 800; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transition: background .15s, box-shadow .12s, transform .45s var(--spring); }
.vc-claim:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); transition-duration: .08s; }
.vcard.compact { padding: 14px; display: flex; flex-direction: column; }
.vcard.compact .vc-claim { margin-top: auto; }
.vcard.compact .vc-amt { margin-bottom: 10px; }
.vcard.compact .vc-name { font-size: 11px; }
.vcard.compact .vc-amt { font-size: 19px; white-space: nowrap; }
.vcard.compact .vc-amt .upto { display: block; margin: 0 0 2px; } /* "Up to" above the amount, so "off" never sits alone */
.vcard.compact .vc-claim { min-height: 42px; font-size: 13px; letter-spacing: .06em; padding: 0 14px; gap: 4px; white-space: nowrap; box-shadow: 0 3px 0 var(--ink); }
.vstrip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Search (phones): the voucher card after the results; Account: member perks with the codes showing. */
.vsearch { margin-top: 26px; }
.vsearch .rhd { margin-top: 0; }
/* Account, signed out: what members get, as icon tiles. */
.perk-icons { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.perk-icons li { display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; background: #fff; border-radius: 16px; padding: 14px 6px 12px; font-weight: 700; font-size: 13.5px; line-height: 1.25; color: var(--fg); box-shadow: 0 1px 0 rgba(20, 30, 60, .06), 0 6px 18px rgba(20, 30, 60, .06); }
.perk-icons li small { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
.perk-icons svg { color: var(--blue); }
.card .perk-icons { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 6px 0 4px; }
#perks .perk-more { margin-top: 12px; }
.card .perk-icons li { background: var(--soft); box-shadow: none; }
@media (min-width: 768px) { .card .perk-icons { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 760px; } }
.avatar { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: var(--blue) center / cover no-repeat; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--blue); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-change { margin-top: -4px; font-size: 13px; font-weight: 700; color: var(--blue); }
#perks .sec-sub a { color: var(--blue); font-weight: 700; white-space: nowrap; }
.vstrip.perks { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .vstrip.perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rail .vcard .vc-amt { font-size: 23px; }
.sheet .vcard { box-shadow: none; }

/* ---------- vouchers page: step cards ---------- */
.vsteps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: v; }
.vstep { background: var(--surface); border-radius: 20px; padding: 16px; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(0, 40, 120, .05); }
.vstep .vs-ic { grid-row: span 2; position: relative; align-self: start; }
.vstep .vs-ic::after { counter-increment: v; content: counter(v); position: absolute; top: -6px; left: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); font: 800 12px/18px var(--f-body); text-align: center; }
.vstep b { font-size: 17px; line-height: 1.3; }
.vstep p { color: var(--muted); font-size: 15px; }
.vstep b:only-of-type:last-child { grid-row: span 2; }
.vs-link { display: inline-flex; align-items: center; gap: 4px; color: var(--blue); font-weight: 700; font-size: 15px; justify-self: start; }
.vs-body { grid-column: 1 / -1; margin-top: 12px; }
.vsteps.compact { margin: 0; gap: 10px; }
.vsteps.compact .vstep { background: none; box-shadow: none; padding: 0; grid-template-columns: 40px minmax(0, 1fr); }
.vsteps.compact .vs-ic svg { --s: 40px !important; }
.vsteps.compact b { font-size: 15px; font-weight: 600; }
.panel-body > .label { margin-top: 6px; }

/* ---------- feature cards: Facebook community and Travel Planner share one layout ---------- */
.fcard { --fc: var(--blue); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; background: var(--fc); color: #fff; box-shadow: 0 10px 28px rgba(0, 20, 60, .16); min-width: 0; }
.fcard.fb { --fc: var(--ink); }
.f-media { aspect-ratio: 16 / 9; display: grid; place-items: center; background: #fff center / cover no-repeat; position: relative; overflow: hidden; }
.fcard.fb .f-media { background: var(--g); }
.f-wall { position: absolute; inset: 0; background: 0 0 / 216px; opacity: .35; } /* mosaic at 35%, same as the country header */
.fcard.fb .f-media img { position: relative; width: 46%; max-width: 170px; transform: rotate(-4deg); filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .35)); }
.f-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px 18px; }
.f-label { font-weight: 800; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.f-title { font-family: var(--f-display); font-optical-sizing: auto; font-variation-settings: 'SOFT' 100; font-weight: 900; font-size: 26px; line-height: 1.05; letter-spacing: -0.018em; color: var(--yellow); }
.f-sub { font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .92); margin-bottom: 10px; }
.f-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px 0 8px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 800; font-size: 13.5px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.f-cta .lead { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--blue); flex: none; }
.f-cta .lead.fbm { background: #1877F2; font: 900 18px/1 Arial, sans-serif; text-transform: none; }
.fpair { display: grid; gap: 14px; }
@media (min-width: 768px) {
  .fpair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .fcard.solo { flex-direction: row; }
  .fcard.solo .f-media { flex: 1.15; aspect-ratio: auto; min-height: 250px; }
  .fcard.solo .f-body { flex: 1; justify-content: center; padding: 24px 28px; }
  .fcard.solo .f-cta { margin-top: 0; }
}

/* ---------- account, about ---------- */
.acct { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(255, 255, 255, .2); color: #fff; }
.acts-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.about-hero { background: var(--blue); border-radius: 24px; padding: 24px 20px; display: grid; gap: 12px; justify-items: start; color: #fff; }
.about-hero img { height: 54px; width: auto; }
.about-hero p { font-size: 16px; }
.groups { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.groups li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.gdot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.card h2 { font-size: 21px; }

/* ---------- homepage search field (searches in place) ---------- */
.search-field input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: var(--ink); padding: 0; }
.search-field input::placeholder { color: var(--muted); }
.search-field input:focus { outline: none; }
.search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-field:focus-within { box-shadow: 0 0 0 3px var(--yellow), 0 8px 24px rgba(0, 20, 60, .25); }
.hq-x { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; margin: -4px -6px; background: var(--soft); color: var(--muted); }
#homeResults .sec { padding-top: 18px; }

/* ---------- confirm dialog ---------- */
@keyframes alertIn { from { opacity: 0; transform: scale(1.1); } }

/* ---------- category chip: leads cards and rows on country pages ---------- */
.cat { display: inline-flex; flex: none; }
.cat i { width: 38px; height: 26px; border-radius: 999px; background: var(--group); color: #fff; display: grid; place-items: center; }
.meta .cat { margin-right: 2px; }

/* ---------- country page: sticky country bar ---------- */
/* One mosaic surface: phone top (back, account) and the strip share it, and the banner below lines up with it. */
.cstick { position: sticky; top: var(--lbh); z-index: 35; background: var(--group); }
.cstick::before, .cs-bar::before { content: ""; position: absolute; inset: 0; background: var(--chead-wall) 0 0 / 216px; opacity: .35; pointer-events: none; }
.cs-top { position: relative; display: flex; justify-content: space-between; align-items: center; padding: calc(var(--safe-t) + 8px) max(10px, env(safe-area-inset-right, 0px)) 6px max(10px, env(safe-area-inset-left, 0px)); color: #fff; }
.cs-top .iconbtn { background: rgba(255, 255, 255, .2); width: 38px; height: 38px; }
.cs-top + .cs-bar { top: 100%; }
.chead { margin-top: -1px; }
.chead::before { background-position: 0 calc(-1 * var(--cs-top-h, 0px)); }
.cs-bar { position: absolute; left: 0; right: 0; top: 100%; display: flex; align-items: center; gap: 8px; padding: 8px max(10px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px)); background: var(--group); box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
  opacity: 0; transform: translateY(-10px); pointer-events: none; visibility: hidden; transition: opacity .2s, transform .45s var(--spring), visibility 0s .2s; }
.cs-bar::before { background-position: 0 calc(-1 * var(--cs-top-h, 0px)); }
.cs-bar.on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .2s, transform .45s var(--spring); }
.cs-bar > * { position: relative; }
.cs-bar .pill { height: 38px; padding: 0 12px 0 8px; font-size: 13px; border-width: 3px; gap: 4px; flex: none; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.cs-bar .pill svg { --s: 18px !important; }
/* Topic pills, like iPhone Mail categories: the current topic is a white pill with its name; the rest are icon-only glass pills. */
.cs-topics { display: flex; gap: 6px; min-width: 0; flex: 1; overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }
.cs-topics::-webkit-scrollbar { display: none; }
.cs-t { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; min-width: 46px; padding: 0 12px; border-radius: 999px; flex: none; background: rgba(0, 0, 0, .3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font: 700 14px var(--f-body); white-space: nowrap; transition: background .2s, color .2s, padding .45s var(--spring); }
.cs-t b { display: none; font-weight: 700; }
.cs-t.on { background: #fff; color: var(--ink); padding: 0 16px 0 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.cs-t.on svg { color: var(--group); }
.cs-t.on b { display: inline; }
@media (min-width: 1100px) {
  .cstick { top: var(--topnav-h, 62px); background: none; }
  .cs-top { display: none; }
  .cstick::before { display: none; }
  .cs-bar { padding: 8px max(24px, calc((100% - 1240px) / 2 + 24px)); gap: 14px; }
  .cs-bar .pill { height: 40px; padding: 0 16px 0 10px; font-size: 14px; }
  .cs-topics { -webkit-mask: none; mask: none; gap: 8px; }
  .cs-t { height: 40px; min-width: 54px; padding: 0 16px; font-size: 15px; }
  .cs-t.on { padding: 0 20px 0 16px; }
}
@media (prefers-reduced-transparency: reduce) { .cs-t { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 0, 0, .45); } }

/* ---------- round 12–14 ---------- */
/* chips never squeeze; the row scrolls instead */
.chips.scroll > .chip { flex: none; }
/* Search: Topic button opens a sheet */
.tchip .chev { display: inline-grid; transform: rotate(90deg); margin-left: -2px; }
.tchip .chev svg { color: var(--muted) !important; }
.tchip[aria-pressed="true"] .chev svg { color: rgba(255, 255, 255, .7) !important; }
.sheet-h { font-size: 22px; margin: 0 0 4px; }
.tsheet { display: grid; }
.trow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 4px; border-top: 1px solid var(--soft); font-weight: 700; font-size: 16px; text-align: left; background: none; color: var(--fg); }
.trow:first-child { border-top: 0; }
.trow i { width: 40px; height: 28px; border-radius: 999px; background: var(--soft); color: var(--blue); display: grid; place-items: center; flex: none; }
.trow span { flex: 1; }
.trow small { color: var(--muted); font-weight: 600; font-size: 14px; }
.trow[aria-pressed="true"] i { background: var(--blue); color: #fff; }
.trow[aria-pressed="true"]::after { content: "✓"; color: var(--blue); font-weight: 900; margin-left: 6px; }
/* top bar: TFP logo on Explore, Vouchers, Saved */
.bar-logo { display: flex; align-items: center; height: 40px; flex: none; }
.bar-logo img { height: 30px; width: auto; }
/* Home: floating voucher bar above the tabs */
.vfloat { position: fixed; z-index: 45; left: 50%; bottom: calc(var(--tabs-h) + var(--safe-b) + 10px); width: min(520px, calc(100% - 24px)); display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 18px; color: #fff;
  background: rgba(35, 31, 32, .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
  opacity: 0; transform: translateX(-50%) translateY(16px); pointer-events: none; visibility: hidden; transition: opacity .2s, transform .45s var(--spring), visibility 0s .2s; }
.vfloat.on { opacity: 1; transform: translateX(-50%); pointer-events: auto; visibility: visible; transition: opacity .2s, transform .45s var(--spring); }
@media (min-width: 768px) and (max-width: 1099px) { .vfloat { bottom: calc(96px + var(--safe-b)); } }
.vfloat .tk { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: var(--yellow); display: grid; place-items: center; flex: none; }
.vfloat .vt { flex: 1; min-width: 0; display: grid; line-height: 1.2; white-space: nowrap; }
.vfloat .vt small { font-size: 12px; color: rgba(255, 255, 255, .75); }
.vfloat .vt b { font-size: 16px; }
.vbtn { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font-weight: 800; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; }
.vx { flex: none; width: 34px; height: 34px; display: grid; place-items: center; color: rgba(255, 255, 255, .65); border-radius: 50%; }
/* red dot on the Vouchers tab, like an iOS notification */
.tabs .rdot { position: absolute; top: 0; left: calc(50% + 8px); width: 10px; height: 10px; border-radius: 50%; background: #FF3B30; box-shadow: 0 0 0 2px #fff; }

/* ---------- round 15–16 ---------- */
/* Search: results headings with a one-line subtext, clear of the card above */
.rhd { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 10px; margin: 22px 0 10px; }
.rhd h2 { font-size: 22px; }
.rhd span { font-size: 13px; color: var(--muted); font-weight: 600; }
.rhd p, .sec-sub { grid-column: 1 / -1; font-size: 14px; color: var(--muted); margin-top: 2px; }
.sec-sub { margin-top: -6px; }
/* Topic sheet: checkboxes */
.trow.ms .box { width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--line); display: grid; place-items: center; color: transparent; flex: none; transition: background .15s; }
.trow.ms[aria-checked="true"] i { background: var(--blue); color: #fff; }
.trow.ms[aria-checked="true"] .box { background: var(--blue); box-shadow: none; color: #fff; }
.sheet-acts { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 10px; position: sticky; bottom: 0; background: var(--surface); padding-top: 6px; }
.sheet-acts .clr { padding: 0 20px; min-height: 50px; border-radius: 999px; font-weight: 800; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--blue); background: var(--soft); }
.sheet-acts .go { min-height: 50px; border-radius: 999px; font-weight: 800; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--blue); }
/* guide pages: voucher bar with ×, and the "both vouchers" dark version */
.bookbar .vx { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: rgba(255, 255, 255, .75); }
.bookbar.dark { background: rgba(35, 31, 32, .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding-left: 10px; }
.bookbar.dark .tk { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: var(--yellow); display: grid; place-items: center; flex: none; }
/* homepage tiles: simplified country icon */
.dest .wall img.cbadge { width: 70%; }

/* ---------- mouse and trackpad: hover feedback ---------- */
@media (hover: hover) and (pointer: fine) {
  .gcard, .ccard, .pick, .dest .wall, .tile { transition: transform .45s var(--spring), box-shadow .3s; }
  .gcard:hover { transform: translateY(-3px); box-shadow: 0 1px 0 var(--line), 0 14px 30px rgba(0, 40, 120, .12); }
  .ccard:hover, .pick:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0, 0, 0, .16); }
  .dest:hover .wall { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 12px 24px rgba(0, 0, 0, .18); }
  .tile:hover { transform: translateY(-2px); }
  .row:hover { background: #F6F8FC; }
  .chip:hover { box-shadow: inset 0 0 0 1.5px var(--blue); }
  .btn:hover { filter: brightness(1.08); }
  .vc-claim:hover { background: #FFE033; }
  .vcard, .fcard { transition: transform .45s var(--spring), box-shadow .3s; }
  .fcard:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0, 40, 120, .24); }
  .acct:hover { background: rgba(255, 255, 255, .3); }
  .cs-t:not(.on):hover { background: rgba(0, 0, 0, .42); }
  .iconbtn:hover { background: rgba(255, 255, 255, .16); }
  a, button, label { cursor: pointer; }
}

/* ---------- accessibility ---------- */
/* Reduce Motion: nothing moves. Fades stay (they help people follow what changed); slides, lifts,
   the logo slide and page transitions go. Things that used to slide in now fade in place. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-property: opacity, color, background-color, border-color, box-shadow, filter, visibility !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .press:active, .iconbtn:active { transform: none; }
  .gcard:hover, .ccard:hover, .pick:hover, .dest:hover .wall, .tile:hover, .fcard:hover, .cm:hover { transform: none !important; }
  .sheet.on .panel { animation: fadeIn .2s ease; }
  .sheet.closing .panel { opacity: 0; transition: opacity .2s ease !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .bar { background: var(--group); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tabs { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .topnav { background: var(--blue) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .toast { background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .tabs { background: #fff; box-shadow: 0 -1px 0 var(--ink); }
  .chip { box-shadow: inset 0 0 0 1.5px var(--ink); }
}

/* ---------- Featured (homepage) ---------- */
/* Same pill as the country pill, with a gold outline and a gold star. */
.pill.gold { --g: #D4A20C; }
.pill.gold svg { color: #D4A20C; }
/* The photo stays clean: pills and title sit below it. */
.fcd2 { display: grid; grid-template-rows: auto 1fr; background: var(--surface); border-radius: 20px; overflow: hidden; box-shadow: 0 1px 0 var(--line), 0 8px 22px rgba(0, 40, 120, .08); min-width: 0; color: var(--ink); }
.fcd2 .ph { aspect-ratio: 16 / 9; background: var(--soft) center / cover no-repeat; }
.fcd2 .bd { padding: 12px 14px 14px; display: grid; gap: 6px; align-content: start; }
.fcd2 .tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fcd2 .pill { font-size: 10px; padding: 2px 7px 2px 4px; border-width: 2px; }
.fcd2 .pill svg { --s: 12px; }
.fcd2 b { font-family: var(--f-display); font-variation-settings: 'SOFT' 100; font-weight: 900; font-size: 18px; line-height: 1.12; letter-spacing: -0.012em; }
.fcd2 .meta { font-size: 12.5px; color: var(--muted); }
.fcd2 .ex, .fcd2 .readbtn { display: none; }
.fcd2 .readbtn { justify-self: start; align-items: center; background: var(--blue); color: #fff; border-radius: 999px; padding: 10px 16px; font-weight: 800; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; margin-top: 4px; }
.fe { display: grid; gap: 10px; }
/* phone: 2–3 featured become a sideways carousel; the next card peeks in */
.fe[data-carousel] { grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scroll-padding: 0 var(--gutter); }
.fe[data-carousel]::-webkit-scrollbar { display: none; }
.fe[data-carousel] > * { scroll-snap-align: start; }
.fdots { display: flex; justify-content: center; gap: 6px; }
.fdots i { width: 7px; height: 7px; border-radius: 999px; background: #C9D0DD; transition: width .35s var(--spring), background .2s; }
.fdots i.on { width: 18px; background: var(--blue); }
/* tablet and desktop: 1 = photo and text side by side; 2 = two equal cards; 3 = one big, two stacked */
@media (min-width: 768px) {
  .fe[data-carousel] { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; }
  .fdots { display: none; }
  .fe.n1 .fcd2 { grid-template-rows: none; grid-template-columns: 1.4fr 1fr; }
  .fe.n1 .ph { aspect-ratio: auto; min-height: 280px; }
  .fe.n1 .bd { padding: 26px 28px; gap: 10px; align-content: center; }
  .fe.n1 b { font-size: 30px; line-height: 1.06; letter-spacing: -0.018em; }
  .fe.n1 .ex { display: block; color: var(--muted); font-size: 15px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .fe.n1 .readbtn { display: inline-flex; }
  .fe.n2 { grid-template-columns: 1fr 1fr; }
  .fe.n2 b { font-size: 22px; }
  .fe.n3 { grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; }
  .fe.n3 > :first-child { grid-row: span 2; grid-template-rows: 1fr auto; }
  .fe.n3 > :first-child .ph { aspect-ratio: auto; min-height: 260px; height: 100%; }
  .fe.n3 > :first-child b { font-size: 26px; }
  .fe.n3 > :not(:first-child) { grid-template-rows: none; grid-template-columns: 42% minmax(0, 1fr); }
  .fe.n3 > :not(:first-child) .ph { aspect-ratio: auto; min-height: 140px; height: 100%; }
}

/* =====================================================================
   Ghost theme additions
   ===================================================================== */
.only-touch:empty { display: none; }
/* Country colors, keyed by the country tag (old tags included until they're renamed). */
.c-taiwan, .c-kaohsiung, .c-taiwan-guides { --g: #EC0001; --group: #EC0001; --wall: url(../pat/tfp-mosaic-dark-tw-bold.svg); --chead-wall: var(--wall); --quiet: url(../pat/tfp-map-roads-tw-quiet.svg); }
.c-hong-kong { --g: #0057B8; --group: #0057B8; --wall: url(../pat/tfp-mosaic-dark-hk-bold.svg); --chead-wall: var(--wall); --quiet: url(../pat/tfp-map-roads-hk-quiet.svg); }
.c-singapore { --g: #FF6B00; --group: #FF6B00; --wall: url(../pat/tfp-mosaic-dark-sg-bold.svg); --chead-wall: var(--wall); --quiet: url(../pat/tfp-map-roads-tfp-quiet.svg); }
.c-japan { --g: #2F7D32; --group: #2F7D32; --wall: url(../pat/tfp-mosaic-dark-jp-bold.svg); --chead-wall: var(--wall); --quiet: url(../pat/tfp-map-roads-tfp-quiet.svg); }
.c-vietnam { --g: #6B1EA1; --group: #6B1EA1; --wall: url(../pat/tfp-mosaic-dark-vn-bold.svg); --chead-wall: var(--wall); --quiet: url(../pat/tfp-map-roads-tfp-quiet.svg); }
.pill.c-updates, .pill.c-template, .pill.c-free-template { --g: var(--blue); }
.pill.c-updates svg, .pill.c-template svg, .pill.c-free-template svg { color: var(--blue); }
/* Any first tag that isn't one of the five countries (Budget Tips, Cheatsheet…): the blue pill, blue pin. */
.pill.c-other { --g: var(--blue); }
.pill.c-other svg { color: var(--blue); }
.pill.c-other.c-taiwan, .pill.c-other.c-kaohsiung, .pill.c-other.c-taiwan-guides { --g: #EC0001; }
.pill.c-other.c-hong-kong { --g: #0057B8; }
.pill.c-other.c-singapore { --g: #FF6B00; }
.pill.c-other.c-japan { --g: #2F7D32; }
.pill.c-other.c-vietnam { --g: #6B1EA1; }
.pill.c-other:is(.c-taiwan, .c-kaohsiung, .c-taiwan-guides, .c-hong-kong, .c-singapore, .c-japan, .c-vietnam) svg { color: var(--pin); }
/* Facebook group card: the country mosaic behind the badge */
.fcard.fb .f-wall { background-image: var(--wall); }
/* Pill sizes by where they sit (rows small, guide header large). */
.row .pill { font-size: 10.5px; padding: 2px 8px 2px 4px; border-width: 2px; }
.row .pill svg { --s: 13px !important; }
.rhead .pill { font-size: 14px; padding: 4px 12px 4px 6px; border-width: 3px; }
.rhead .pill svg { --s: 19px !important; }
/* The guide's pill links back to its country or category page. */
.pill-a { position: relative; justify-self: start; display: inline-flex; border-radius: 999px; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.pill-a::after { content: ''; position: absolute; inset: -6px -4px; } /* 45px tall tap area */
.pill-a:focus-visible { border-radius: 999px; }
@media (hover: hover) { .pill-a:hover .pill { background: var(--soft); } }
/* Country page: the plain list stays for search engines and no-JS; the script groups it by category. */
.cpage.grouped #allGuides { display: none; }
.rmore { justify-self: center; color: var(--blue); font-weight: 700; font-size: 15px; padding: 6px 12px; }
/* Pagination */
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0 0; font-weight: 700; }
.pagination a { color: var(--blue); }
.pagination .page-number { color: var(--muted); font-weight: 600; font-size: 14px; }

/* ---------- About: communities ---------- */
.comm { display: grid; background: var(--surface); border-radius: 20px; overflow: hidden; box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(0, 40, 120, .06); }
.cm { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--soft); color: var(--ink); }
.cm:first-child { border-top: 0; }
.cm .wl { width: 64px; height: 64px; border-radius: 16px; background: var(--g); position: relative; display: grid; place-items: center; overflow: hidden; }
.cm .wl::before { content: ""; position: absolute; inset: 0; background: var(--wall) 0 0 / 140px; opacity: .35; }
.cm .wl img { position: relative; width: 54px; height: 54px; object-fit: contain; }
.cm .nm { display: grid; gap: 2px; min-width: 0; }
.cm .nm b { font-size: 15px; line-height: 1.25; }
.cm .nm small { color: var(--muted); font-size: 12.5px; }
.jbtn { display: inline-flex; align-items: center; gap: 6px; background: var(--g); color: #fff; border-radius: 999px; padding: 8px 12px 8px 8px; font-weight: 800; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.jbtn i { width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--g); display: grid; place-items: center; font: 900 13px/1 Arial, sans-serif; font-style: normal; text-transform: none; }
.jbtn .long { display: none; }
@media (min-width: 768px) {
  .comm { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
  .cm { grid-template-columns: none; grid-template-rows: auto 1fr; padding: 0; border: 0; gap: 0; background: var(--surface); border-radius: 18px; overflow: hidden; box-shadow: 0 1px 0 var(--line), 0 8px 22px rgba(0, 40, 120, .08); text-align: center; }
  .cm .wl { width: auto; height: auto; aspect-ratio: 1 / .8; border-radius: 0; }
  .cm .wl::before { background-size: 160px; }
  .cm .wl img { width: 62%; height: auto; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .3)); }
  .cm .nm { padding: 12px 12px 0; }
  .cm .nm small { display: none; }
  .cm .jbtn { justify-self: center; margin: 10px 12px 14px; }
  .jbtn .long { display: inline; }
  .jbtn .short { display: none; }
}
@media (min-width: 1100px) { .comm { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (hover: hover) and (pointer: fine) { .cm { transition: transform .45s var(--spring), box-shadow .3s; } .cm:hover { transform: translateY(-2px); } }

/* ---------- Ghost post content ---------- */
.gh-content .kg-width-wide { position: relative; width: min(1000px, 100vw - 32px); left: 50%; transform: translateX(-50%); }
.gh-content .kg-width-full { position: relative; width: 100vw; left: 50%; transform: translateX(-50%); }
.gh-content .kg-width-full img { border-radius: 0; }
.gh-content .kg-image { margin: 0 auto; }
.gh-content .kg-embed-card iframe, .gh-content iframe { max-width: 100%; border: 0; border-radius: 14px; }
.gh-content .kg-video-card video { width: 100%; border-radius: 14px; }
.gh-content .kg-toggle-card { border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; }
.gh-content .kg-header-card { border-radius: 18px; overflow: hidden; }
/* Members-only guides: Ghost's "subscribe to keep reading" box, in TFP colors. */
.gh-post-upgrade-cta { margin-top: 1.6em; text-align: center; }
.gh-post-upgrade-cta-content { background: var(--blue) !important; color: #fff; border-radius: 20px; padding: 26px 20px; display: grid; gap: 12px; justify-items: center; }
.gh-post-upgrade-cta h2 { color: #fff; font-size: 24px; margin: 0; }
.gh-post-upgrade-cta p { margin: 0; }
.gh-post-upgrade-cta a { color: #fff; }
.gh-post-upgrade-cta a.gh-btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 999px; background: var(--yellow); color: var(--ink) !important; border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink); font-weight: 800; text-decoration: none; text-transform: uppercase; letter-spacing: .05em; font-size: 14px; }
.gh-post-upgrade-cta small { font-size: 14px; }
.sec-h .sec-more { color: var(--blue); font-weight: 700; font-size: 15px; }

/* ---------- Homepage: the header sits on the banner photo until you scroll past it ---------- */
.home-template .hbar { position: fixed; left: 0; right: 0; top: var(--lbh); z-index: 40; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; transition: background-color .25s, box-shadow .25s; }
.home-template .hbar img { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); transition: filter .25s; }
.home-template .hbar.solid { background: var(--blue); background: color-mix(in srgb, var(--blue) 82%, transparent); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .14); }
.home-template .hbar.solid img { filter: none; }
/* soft shade at the top keeps the logo and menu readable on any header photo */
.home-template .banner::after { background: linear-gradient(180deg, rgba(0, 20, 60, .5) 0%, rgba(0, 20, 60, 0) 30%, rgba(0, 20, 60, 0) 50%, rgba(0, 20, 60, .45) 100%); }
.home-template .banner-in { aspect-ratio: auto; height: calc(62.5vw + var(--safe-t) + 56px); padding-top: calc(var(--safe-t) + 66px); }
@media (min-width: 768px) { .home-template .banner-in { height: calc(360px + 56px); } }
@media (min-width: 1100px) {
  .home-template .topnav { position: fixed; left: 0; right: 0; top: var(--lbh); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; text-shadow: 0 1px 4px rgba(0, 0, 0, .35); transition: background-color .25s, box-shadow .25s; }
  .home-template .topnav:not(.solid) { box-shadow: none; }
  .home-template .topnav img { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); }
  .home-template .topnav .acct { background: rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .home-template .topnav.solid { background: var(--blue); background: color-mix(in srgb, var(--blue) 86%, transparent); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); text-shadow: none; }
  .home-template .topnav.solid img { filter: none; }
  .home-template .banner-in { height: 482px; padding-top: 90px; }
}
@media (prefers-reduced-transparency: reduce) { .home-template .hbar.solid, .home-template .topnav.solid { background: var(--blue) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } }
/* Phone and tablet homepage: the centered logo is 2× larger (64px) on the banner, 20px below the top,
   and eases back to the usual 32px when the bar turns solid, so the bar doesn't take up the screen while you read. */
.home-template .hbar img { height: 32px; transform: translateY(8px) scale(2); transform-origin: 50% 0; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); transition: transform .4s var(--spring), filter .25s; }
.home-template .hbar.solid img { transform: none; filter: none; }
.home-template .banner-in { height: calc(62.5vw + var(--safe-t) + 84px); padding-top: calc(var(--safe-t) + 96px); }
@media (min-width: 768px) { .home-template .banner-in { height: calc(360px + 84px); } }
@media (min-width: 1100px) { .home-template .banner-in { height: 482px; padding-top: 90px; } }

/* ---------- Members-only guides: the locked box ---------- */
.lk-preview { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.gh-content .tfp-lock { margin-top: 1.4em; background: var(--blue); color: #fff; border-radius: 20px; padding: 28px 20px 24px; display: grid; justify-items: center; gap: 10px; text-align: center; }
.tfp-lock .lk { width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, .16); display: grid; place-items: center; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28); }
.gh-content .tfp-lock h2 { margin: 4px 0 0; color: #fff; font-size: 28px; line-height: 1.08; letter-spacing: -0.015em; }
.gh-content .tfp-lock p { margin: 0; font-size: 16px; color: rgba(255, 255, 255, .92); }
.gh-content .tfp-lock .lbtn { margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 28px; border-radius: 999px; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink); font-weight: 800; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: background .15s, box-shadow .12s, transform .45s var(--spring); }
.gh-content .tfp-lock .lbtn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); transition-duration: .08s; }
.gh-content .tfp-lock small { margin-top: 6px; font-size: 14.5px; color: rgba(255, 255, 255, .92); }
.gh-content .tfp-lock small a { color: #fff; font-weight: 700; text-underline-offset: 3px; }
@media (min-width: 768px) { .gh-content .tfp-lock { padding: 34px 28px 28px; } .gh-content .tfp-lock h2 { font-size: 32px; } }
@media (hover: hover) and (pointer: fine) { .gh-content .tfp-lock .lbtn:hover { background: #FFE033; } }

/* ---------- Country pages: plain category icon on guide rows ---------- */
.cat.plain { display: inline-flex; align-items: center; flex: none; background: none; }
.meta .cat.plain { margin-right: -4px; } /* 4px from its name, not the line's 8px gap */

/* ---------- Country bar, phone and tablet: two rows once you scroll past the category tiles ---------- */
/* Top row: back, the country pill, account. Second row: the categories, full width. */
.cs-pill { display: none; }
@media (max-width: 1099px) {
  .cs-top { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; align-items: center; gap: 8px; }
  .cs-top .cs-pill { display: inline-flex; justify-self: center; height: 36px; padding: 0 14px 0 9px; font-size: 14px; border-width: 3px; gap: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); opacity: 0; transform: translateY(4px); visibility: hidden; transition: opacity .2s, transform .45s var(--spring), visibility 0s .2s; }
  .cs-top .cs-pill svg { --s: 18px !important; }
  .cstick.on .cs-top .cs-pill { opacity: 1; transform: none; visibility: visible; transition: opacity .2s, transform .45s var(--spring); }
  .cs-bar { padding: 2px 10px 10px; }
  .cs-bar > .pill { display: none; }
  /* No blur or edge fade on the category pills: Safari draws that combination with stray copies of a pill. */
  .cs-topics { -webkit-mask: none; mask: none; margin: 0 -10px; padding: 0 10px; }
  .cs-t { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 0, 0, .3); }
}

/* =====================================================================
   About page
   ===================================================================== */
/* Hello card: TFP's main logo on the blue mosaic */
.ab-hero { position: relative; overflow: hidden; background: var(--blue); color: #fff; border-radius: 22px; padding: 22px 18px; display: grid; gap: 10px; }
.ab-hero::before { content: ""; position: absolute; inset: 0; background: url(../pat/tfp-mosaic-dark-tfp-bold.svg) 0 0 / 216px; opacity: .35; pointer-events: none; }
.ab-hero > * { position: relative; }
.ab-hero .ab-logo { width: 96px; height: 96px; justify-self: start; filter: drop-shadow(0 6px 14px rgba(0, 20, 60, .35)); }
.ab-hero h2 { margin: 2px 0 0; color: var(--yellow); font-size: 26px; line-height: 1.08; letter-spacing: -0.015em; }
.ab-hero p { font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, .94); }
.ab-hero small { font-size: 12.5px; color: rgba(255, 255, 255, .75); }
@media (min-width: 768px) {
  .ab-hero { grid-template-columns: auto minmax(0, 1fr); column-gap: 22px; align-items: center; padding: 26px 28px; }
  .ab-hero .ab-logo { width: 120px; height: 120px; grid-row: span 3; }
  .ab-hero h2 { font-size: 30px; }
}
/* Founders: the photo as a tilted snapshot with a strip of yellow tape */
.fdrs { display: grid; gap: 14px; }
.fdr { background: var(--surface); border-radius: 20px; padding: 16px 14px; display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 16px; align-items: center; box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(0, 40, 120, .06); }
.fdr .pol { position: relative; background: #fff; padding: 6px 6px 20px; border-radius: 4px; box-shadow: 0 6px 16px rgba(0, 20, 60, .18); transform: rotate(-3deg); }
.fdr:nth-child(2) .pol { transform: rotate(3deg); }
.fdr .pol::before { content: ""; position: absolute; z-index: 1; top: -8px; left: 50%; width: 46px; height: 16px; margin-left: -23px; background: rgba(252, 214, 0, .85); transform: rotate(-4deg); border-radius: 2px; }
.fdr .pol img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.fdr .bd { display: grid; gap: 3px; min-width: 0; }
.fdr b { font-size: 17px; line-height: 1.2; }
.fdr .hd { font-size: 13.5px; color: var(--blue); font-weight: 700; }
.fdr .role { justify-self: start; background: var(--yellow); color: var(--ink); font: 800 10.5px/1 var(--f-body); letter-spacing: .07em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; margin-top: 2px; }
.fdr p { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: #3A3F4C; }
.socs { display: flex; gap: 8px; margin-top: 8px; }
.socs a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--ink); transition: background .15s, color .15s, transform .45s var(--spring); }
.socs a:active { transform: scale(.92); transition-duration: .08s; }
svg.bi { width: 18px; height: 18px; flex: none; display: block; }
@media (min-width: 768px) { .fdrs { grid-template-columns: 1fr 1fr; } .fdr { grid-template-columns: 140px minmax(0, 1fr); } }
@media (hover: hover) and (pointer: fine) { .socs a:hover { background: var(--blue); color: #fff; } }
/* Contributors: smaller founder cards, no role pill; the tilt alternates as rows are added */
.ctrs-h h2 { font-size: 20px; }
.ctrs { gap: 12px; }
.fdr.ctr { border-radius: 18px; padding: 14px; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; box-shadow: 0 1px 0 var(--line), 0 5px 14px rgba(0, 40, 120, .05); }
.ctr .pol { padding: 5px 5px 16px; box-shadow: 0 5px 14px rgba(0, 20, 60, .16); }
.ctr:nth-child(odd) .pol { transform: rotate(-3deg); }
.ctr:nth-child(even) .pol { transform: rotate(3deg); }
.ctr .bd { gap: 2px; }
.ctr b { font-size: 16px; }
.ctr .hd { font-size: 13px; }
.ctr p { font-size: 14px; line-height: 1.45; }
@media (min-width: 768px) { .ctrs { gap: 14px; } .fdr.ctr { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; } }
/* Follow TFP: chips with the network's icon */
.follow .chip svg.bi { width: 17px; height: 17px; color: var(--ink); }
.follow .chip[aria-pressed="true"] svg.bi { color: #fff; }
/* Group cards on tablet and desktop: centered name, short centered Join */
@media (min-width: 768px) {
  .cm .nm { justify-items: center; text-align: center; }
  .cm .jbtn { justify-self: center; }
}

/* ---------- Live counter (homepage) ---------- */
/* At the top: a line under the search field. After scrolling: a chip in the blue bar. */
.live-line { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, .95); font: 600 13.5px/1.3 var(--f-body); text-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.live-line b { font-weight: 800; }
.live-chip { display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, .18); color: #fff; padding: 7px 11px; border-radius: 999px; font: 700 12.5px/1 var(--f-body); white-space: nowrap; flex: none; }
.live-line i, .live-chip i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #34C759; flex: none; }
/* The pulse is a ring that grows and fades (transform and opacity only, so it doesn't repaint every frame). */
.live-line i::after, .live-chip i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(52, 199, 89, .55); animation: livep 2s infinite; }
@keyframes livep { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(2.75); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .live-line i::after, .live-chip i::after { animation: none !important; opacity: 0; } }
/* Fixed-width digits, so the words after the number don't shift when it changes. */
[data-live-n] { font-variant-numeric: tabular-nums; }
/* Phone and tablet: once the bar turns blue, the logo slides left and the chip fades in on the right. */
.hbar .live-chip { position: absolute; right: 12px; top: calc(var(--safe-t) + 26px); transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity .25s; }
.hbar.solid .live-chip { opacity: 1; pointer-events: auto; }
.home-template .hbar a { transition: transform .4s var(--spring); }
.home-template .hbar.solid.has-live a { transform: translateX(calc(-50vw + 48px)); }
/* Desktop: the chip appears next to the search field when the bar turns blue (homepage only). */
.topnav .live-chip { display: none; }
@media (min-width: 1100px) {
  .home-template .topnav.solid .live-chip:not([hidden]) { display: inline-flex; margin-left: auto; margin-right: -12px; }
  .home-template .topnav.solid .live-chip:not([hidden]) + .tsearch { margin-left: 0; }
}

/* Round 28 */
/* Features: blue pill with a blue sparkle, like Updates and Templates. */
.pill.c-features { --g: var(--blue); }
.pill.c-features svg { color: var(--blue); }
.lt h1:has(> svg) { display: flex; align-items: center; gap: 10px; }
.lt h1 svg { color: var(--blue); }
/* Featured: a gold circle with only the star. */
.pill.star-only { padding: 3px; justify-content: center; }
.fcd2 .pill.star-only { padding: 2px; }
/* Both vouchers: on tablet and desktop a drawer from the bottom edge, cards side by side. */
@media (min-width: 768px) {
  .sheet .panel.drawer { top: auto; bottom: 0; width: min(640px, calc(100% - 48px)); border-radius: 26px 26px 0 0; max-height: calc(100% - 24px); padding-bottom: calc(24px + var(--safe-b)); transform: translate(-50%, var(--dy)); }
  .sheet .panel.drawer .panel-body { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .sheet .panel.drawer .sheet-h { grid-column: 1 / -1; }
  .sheet .panel.drawer .vcard { grid-template-rows: auto auto 1fr auto auto; }
  .sheet .panel.drawer .vc-meta { align-self: start; }
}
/* Country page: Community and Templates close the page; side by side on desktop. */
.cfoot .sec { align-content: start; }
@media (min-width: 1100px) {
  .cfoot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
  .cfoot .sec { grid-template-rows: auto 1fr; }
  .ttiles { grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 14px 2px; }
  .ttile { font-size: 12px; }
}

/* Section headings with a blue icon (Explore: Features, Templates). */
.sec-h .ih { display: flex; align-items: center; gap: 8px; }
.sec-h .ih svg { color: var(--blue); flex: none; }

/* ---------- Motion and touch fixes ---------- */
/* Controls behave like app controls: no text selection or callout on long-press, no tap delay.
   Guide text stays selectable. */
.press, .chip, .tabs a, button { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
/* Voucher drawer on a sideways phone: never taller than the screen. When it doesn't fit, the content
   scrolls inside it and only the handle and title drag it; when it fits, the whole drawer drags. */
@media (max-width: 767px) { .sheet .panel { max-height: calc(100dvh - 24px); overflow-y: auto; } }
.sheet .panel { overscroll-behavior: contain; }
.sheet .panel.scrolls { touch-action: pan-y; }
.sheet .panel.scrolls .grab, .sheet .panel.scrolls .sheet-h { touch-action: none; }
/* Bigger tap areas, same look: invisible hit areas around small links. */
.f-cols a { position: relative; display: inline-block; }
.f-cols a::before { content: ""; position: absolute; inset: -4px -8px; }
.sec-h a, .sec-h .sec-more { position: relative; }
.sec-h a::before, .sec-h .sec-more::before { content: ""; position: absolute; inset: -11px -10px; }

/* Desktop country pages: guides as photo cards, two per row (built by the script from the list rows). */
.list.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; background: none; border-radius: 0; overflow: visible; box-shadow: none; }
.list.cards .gcard .meta .cat.plain { margin-right: -6px; } /* 4px from its name, as on the rows */

/* Country pages: What's New. A New tag in the country color, then the guide's category. */
.new-tag { display: inline-flex; align-items: center; background: var(--g, var(--blue)); color: #fff; border-radius: 999px; padding: 3px 9px; font: 800 10.5px/1.2 var(--f-body); letter-spacing: .07em; text-transform: uppercase; }
.new-cat { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; }
.new-cat:empty { display: none; }

/* Launch banner (Nov 2026): a strip fixed above the header on every page, switched by the theme setting
   "Launch banner". The page and every sticky bar move down by its height (--lbh, set by the partial's script).
   It takes over the top safe area, so the bars below it drop theirs. */
.has-lbar { --safe-t: 0px; }
.has-lbar body { padding-top: var(--lbh); }
.lbar { position: fixed; z-index: 50; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 10px; view-transition-name: lbar;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) max(8px, env(safe-area-inset-right, 0px)) 8px max(14px, env(safe-area-inset-left, 0px));
  font-size: 14px; line-height: 1.3; animation: fadeIn .18s ease-out; }
.lbar .lb-t { flex: 1; min-width: 0; }
.lbar .lb-t b { font-weight: 800; }
.lb-go { flex: none; display: inline-flex; align-items: center; gap: 2px; min-height: 34px; padding: 0 10px 0 12px; border-radius: 999px; font-weight: 800; font-size: 13px; letter-spacing: .02em; white-space: nowrap; }
.lb-x { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: inherit; opacity: .7; background: none; border: 0; padding: 0; }
.lbar.lb-new { background: var(--yellow); color: var(--ink); }
.lbar.lb-new .lb-go { background: var(--ink); color: #fff; }
.lbar.lb-email { background: var(--blue); color: #fff; }
.lbar.lb-email .lb-t b { color: var(--yellow); }
.lbar.lb-email .lb-go { background: var(--yellow); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .lb-go:hover { opacity: .88; } .lb-x:hover { opacity: 1; } }
@media (min-width: 1100px) {
  .lbar { padding-left: 24px; padding-right: 16px; }
  .lbar > svg:first-child { margin-left: auto; }
  .lbar .lb-t { flex: none; }
  .lbar .lb-x { margin-left: auto; }
}

/* Launch tour (1.2.9): three slides in the voucher sheet, opened by "Take a tour". The slides swipe sideways
   and snap; the sheet still drags down from its handle, count and buttons. */
.panel.tour .sheet-x { display: grid; top: 27px; } /* level with the 1 of 3 line */
.tour-hd { min-height: 32px; display: flex; align-items: center; font-size: 13px; font-weight: 700; color: var(--muted); }
.tour-trk { display: flex; overflow-x: auto; touch-action: pan-x; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; margin: 0 -20px; }
.tour-trk::-webkit-scrollbar { display: none; }
.tour-trk.drag { scroll-snap-type: none; }
.tour-slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; padding: 0 20px; display: grid; gap: 14px; align-content: start; }
@media (min-width: 768px) { .tour-trk { margin: 0 -24px; } .tour-slide { padding: 0 24px; } }
@media (hover: hover) and (pointer: fine) { .tour-trk { cursor: grab; } .tour-trk.drag { cursor: grabbing; } }
.tour-art { position: relative; overflow: hidden; border-radius: 20px; background: var(--blue); height: 210px; display: grid; place-items: center; padding: 18px; }
.tour-art::before { content: ""; position: absolute; inset: 0; background: url(../pat/tfp-mosaic-dark-tfp-bold.svg) 0 0 / 216px; opacity: .35; pointer-events: none; }
.tour-art > * { position: relative; }
.tour-stack { display: grid; justify-items: center; width: 100%; }
.tour-sb { width: 100%; max-width: 300px; background: #fff; border-radius: 999px; padding: 11px 14px; display: flex; align-items: center; gap: 8px; font-size: 15px; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); }
.tour-sb .cur { width: 2px; height: 18px; background: var(--blue); margin-left: -6px; }
.tour-res { width: 100%; max-width: 300px; background: #fff; border-radius: 14px; margin-top: 8px; padding: 4px 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); }
.tour-res div { display: flex; gap: 8px; align-items: center; padding: 8px 0; font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.tour-res div + div { border-top: 1px solid var(--line); }
.tour-res svg { color: #EC0001; }
.tour-badges { display: flex; gap: 8px; justify-content: center; }
.tour-badges img { width: 52px; height: 52px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .25)); }
.tour-cats { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }
.tour-cats span { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; color: #fff; font-size: 12px; font-weight: 700; }
.tour-cats i { width: 52px; height: 36px; border-radius: 999px; background: #EC0001; color: #fff; display: grid; place-items: center; box-shadow: 0 3px 10px rgba(0, 0, 0, .2); }
.tour-plan { width: 100%; max-width: 300px; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); display: grid; grid-template-columns: 96px 1fr; }
.tour-plan .m { background: #DCE6FF; display: grid; place-items: center; color: var(--blue); }
.tour-plan .b { padding: 12px; display: grid; gap: 3px; }
.tour-plan small { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--blue); }
.tour-plan b { font-family: var(--f-display); font-variation-settings: 'SOFT' 100; font-weight: 900; font-size: 20px; line-height: 1.05; }
.tour-plan .b > span { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.tour-tx { display: grid; gap: 6px; text-align: center; padding: 0 6px; }
.tour-tx h3 { margin: 0; font-family: var(--f-display); font-variation-settings: 'SOFT' 100; font-weight: 900; font-size: 26px; line-height: 1.05; letter-spacing: -0.015em; }
.tour-tx p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.4; }
.tour-dots { display: flex; justify-content: center; gap: 6px; }
.tour-dots i { width: 7px; height: 7px; border-radius: 999px; background: #CDD3DF; transition: width .25s var(--spring), background-color .2s; }
.tour-dots i.on { width: 20px; background: var(--blue); }
.tour-acts { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.tour-acts.one { grid-template-columns: 1fr; }
.tour-acts .btn { min-height: 48px; }

/* 404 page: mascot, headline, search, then the main places to go. */
.nf-hero { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 18px var(--gutter) 6px; }
.nf-art { height: 240px; width: auto; filter: drop-shadow(0 10px 18px rgba(0, 30, 90, .14)); }
.nf-code { font: 800 12px/1 var(--f-body); letter-spacing: .14em; color: var(--blue); background: #fff; border-radius: 999px; padding: 6px 12px; box-shadow: inset 0 0 0 1.5px var(--line); }
.nf-hero h1 { font-size: clamp(28px, 7.5vw, 44px); line-height: 1.08; letter-spacing: -0.02em; max-width: 14em; }
.nf-hero .muted { font-size: 16.5px; max-width: 26em; }
.nf-search { width: 100%; max-width: 520px; margin-top: 8px; box-shadow: inset 0 0 0 1.5px var(--line), 0 6px 18px rgba(20, 30, 60, .06); padding: 6px 8px 6px 16px; }
.nf-links .cbadge { width: 22px; height: 22px; }
@media (min-width: 768px) { .nf-art { height: 320px; } .nf-hero { padding-top: 28px; padding-bottom: 6px; } }

/* /tours/ (page-tours.hbs): GoGoTravel Taiwan tours with creator codes. Taiwan red with the Taiwan mosaic at 20%,
   the About page's taped polaroid for the creator, one main Messenger button. tt- prefix keeps it apart from theme classes. */
.page.tours { --tw: #EC0001; max-width: 1120px; }
.tt-lay { display: grid; grid-template-columns: minmax(0, 1fr); }
.tt-hero { position: relative; overflow: hidden; background: var(--tw); color: #fff; border-radius: 22px; }
.tt-hero::before { content: ""; position: absolute; inset: 0; background: url(../pat/tfp-mosaic-dark-tw-bold.svg) 0 0 / 216px; opacity: .2; pointer-events: none; }
.tt-hero > * { position: relative; }
.tt-rec { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; align-items: center; padding: 20px 18px 6px; }
.tt-pol { position: relative; display: block; background: #fff; padding: 5px 5px 16px; border-radius: 4px; box-shadow: 0 6px 16px rgba(0, 20, 60, .25); transform: rotate(-3deg); }
.tt-pol::before { content: ""; position: absolute; z-index: 1; top: -8px; left: 50%; width: 46px; height: 16px; margin-left: -23px; background: rgba(252, 214, 0, .9); transform: rotate(-4deg); border-radius: 2px; }
.tt-pol img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.tt-who { display: grid; gap: 4px; min-width: 0; }
.tt-by { font: 800 11px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.tt-nm { font: 900 24px/1.1 var(--f-display); letter-spacing: -0.012em; }
.tt-hd { font-weight: 700; font-size: 14px; color: var(--yellow); }
.tt-who q { display: block; margin-top: 4px; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .95); }
.tt-txt { padding: 14px 18px 20px; display: grid; gap: 8px; }
.tt-txt h1 { color: #fff; font-size: 27px; line-height: 1.08; letter-spacing: -0.015em; }
.tt-txt p { font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, .94); }
.tt-aside { padding-top: 14px; gap: 10px; }
.tt-card { background: var(--surface); border-radius: 20px; padding: 18px 16px; display: grid; gap: 12px; box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(0, 40, 120, .06); }
.tt-lbl { font: 800 11.5px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tt-perk { display: flex; align-items: center; gap: 8px; background: var(--yellow); color: var(--ink); border-radius: 12px; padding: 10px 12px; font-weight: 800; font-size: 15.5px; line-height: 1.3; }
.tt-perk svg { width: 20px; height: 20px; flex: none; }
.tt-code { display: block; text-align: center; font: 800 clamp(30px, 11vw, 44px)/1 var(--f-body); letter-spacing: .06em; color: var(--ink); padding: 16px 8px; border: 2px dashed var(--line); border-radius: 14px; background: var(--soft); user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; }
.tt-code.long { font-size: clamp(20px, 7.2vw, 32px); letter-spacing: .03em; }
.tt-from { font-size: 13.5px; color: var(--muted); text-align: center; margin-top: -4px; overflow-wrap: anywhere; }
.tt-msg { font-size: 14px; line-height: 1.45; background: #F0F2F5; border-radius: 16px 16px 16px 4px; padding: 10px 12px; color: #3A3F4C; }
.tt-msg span { white-space: pre-line; }
.tt-msg small { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.tt-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; border-radius: 16px; background: var(--blue); color: #fff; font-weight: 800; font-size: 16.5px; line-height: 1.2; padding: 8px 14px; text-decoration: none; transition: transform .45s var(--spring), background .15s; -webkit-tap-highlight-color: transparent; }
.tt-btn:active { transform: scale(.97); transition-duration: .08s; }
.tt-btn svg { width: 22px; height: 22px; flex: none; }
.tt-hint { text-align: center; font-size: 14.5px; font-weight: 600; color: var(--muted); margin-top: -4px; }
.tt-fallback { display: none; background: #FFF4D6; border-radius: 14px; padding: 12px 14px; font-size: 15px; line-height: 1.45; }
.tt-fallback b { font-size: 18px; letter-spacing: .04em; }
.tt-fallback small { display: block; font-size: 13.5px; color: var(--muted); }
.is-copied .tt-btn { background: var(--ok); }
.is-fallback .tt-fallback { display: block; }
.is-fallback .tt-hint, .is-fallback .tt-msg { display: none; }
.is-fallback .tt-code { border-color: var(--warn); background: #fff; outline: 3px solid rgba(179, 84, 30, .18); }
.tt-cbox { background: var(--surface); border-radius: 16px; box-shadow: 0 1px 0 var(--line); }
.tt-cbox summary { list-style: none; cursor: pointer; padding: 13px 16px; font-weight: 700; font-size: 15px; color: var(--blue); display: flex; justify-content: space-between; align-items: center; }
.tt-cbox summary::-webkit-details-marker { display: none; }
.tt-cbox summary::after { content: "+"; font-size: 20px; line-height: 1; }
.tt-cbox[open] summary::after { content: "\2013"; }
.tt-cform { padding: 0 16px 14px; display: grid; gap: 8px; }
.tt-cform label { font-size: 13.5px; color: var(--muted); }
.tt-crow { display: flex; gap: 8px; }
.tt-crow input { flex: 1; min-width: 0; width: 100%; height: 48px; border: 2px solid var(--line); border-radius: 12px; padding: 0 12px; font: 800 18px var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--soft); }
.tt-crow input:focus { outline: none; border-color: var(--blue); background: #fff; }
.tt-crow button { height: 48px; border: 0; border-radius: 12px; background: var(--ink); color: #fff; font: 800 15.5px var(--f-body); padding: 0 18px; cursor: pointer; }
.tt-note { font-size: 14px; color: var(--muted); }
.tt-note:empty { display: none; }
.tt-note.ok { color: var(--ok); font-weight: 700; }
.tt-why { display: grid; gap: 10px; }
.tt-why div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; background: var(--surface); border-radius: 16px; padding: 12px; box-shadow: 0 1px 0 var(--line); }
.tt-why i { width: 40px; height: 40px; border-radius: 12px; background: var(--soft); color: var(--blue); display: grid; place-items: center; }
.tt-why b { font-size: 15.5px; line-height: 1.25; }
.tt-faq { display: grid; gap: 8px; }
.tt-faq details { background: var(--surface); border-radius: 14px; box-shadow: 0 1px 0 var(--line); }
.tt-faq summary { list-style: none; cursor: pointer; padding: 14px 44px 14px 14px; font-weight: 700; font-size: 15.5px; position: relative; }
.tt-faq summary::-webkit-details-marker { display: none; }
.tt-faq summary::after { content: "+"; position: absolute; right: 16px; top: 11px; font-size: 22px; color: var(--blue); }
.tt-faq details[open] summary::after { content: "\2013"; }
.tt-faq p { padding: 0 14px 14px; font-size: 14.5px; color: #3A3F4C; }
.tt-faq a { color: var(--blue); }
.tt-diy { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); border-radius: 16px; padding: 14px 16px; box-shadow: 0 1px 0 var(--line); color: var(--ink); font-weight: 700; }
.tt-diy span { color: var(--blue); }
@media (min-width: 768px) { .page.tours .sec { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 960px) {
  .tt-lay { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "top aside" "main aside"; align-items: start; }
  .tt-top { grid-area: top; }
  .tt-aside { grid-area: aside; position: sticky; top: 16px; padding-top: 22px; padding-left: 0 !important; }
  .tt-main { grid-area: main; }
  .tt-rec { grid-template-columns: 132px minmax(0, 1fr); gap: 22px; padding: 28px 28px 8px; }
  .tt-txt { padding: 8px 28px 28px; }
  .tt-txt h1 { font-size: 34px; }
  .tt-why { grid-template-columns: repeat(3, 1fr); }
}
@media (hover: hover) and (pointer: fine) { .tt-btn:hover { background: #0046CC; } .is-copied .tt-btn:hover { background: var(--ok); } .tt-diy:hover span { transform: translateX(2px); } }

/* /tours/ "read vs tap" (theme 1.2.19, Nov 6 2026, from mockups/tours-untappable, Ian OK via Manager). A white card with a blue +, arrow
   or filled button is tappable; flat text on the page is for reading. Fixes Clarity dead clicks on Nov 4-6. */

/* 1. Hero: full-bleed on phones, so it reads as the page header, not a tappable banner card. */
@media (max-width: 767px) {
  .page.tours .tt-top { padding-left: 0; padding-right: 0; padding-top: 0; }
  .tt-hero { border-radius: 0; }
  .tt-txt { padding-bottom: 24px; }
}
.tt-txt h1, .tt-txt p, .tt-who { -webkit-user-select: none; user-select: none; }

/* 2. Discount line: plain centered text above the code, no yellow pill (the pill looked like a button). */
.tt-perk { background: none; padding: 0; border-radius: 0; justify-content: center; text-align: center;
  font-size: 16px; color: var(--ink); }
.tt-perk { display: block; text-wrap: balance; }
.tt-perk svg { display: inline-block; vertical-align: -4px; margin-right: 6px; color: #EC0001; }

/* 3. "Why book here": a flat checklist on the page, no white cards, shadows or icon tiles. */
.tt-why { gap: 2px; }
.tt-why div { background: none; box-shadow: none; border-radius: 0; padding: 6px 0;
  grid-template-columns: 24px minmax(0, 1fr); gap: 10px; }
.tt-why i { width: 24px; height: 24px; background: none; border-radius: 0; color: var(--ok); }
.tt-why b { font-weight: 600; font-size: 15.5px; color: var(--fg); }
.tt-why, .page.tours h2 { -webkit-user-select: none; user-select: none; }
@media (min-width: 768px) { .page.tours .tt-why { grid-template-columns: minmax(0, 1fr); } } /* one list, as on phones */

/* 4. FAQ: the accordion rows keep their cards and get a clearer control: + / – in a soft blue circle. */
.tt-faq summary { padding-right: 56px; min-height: 52px; display: flex; align-items: center; }
.tt-faq summary::after { content: "+"; top: 50%; right: 12px; width: 30px; height: 30px; margin-top: -15px;
  border-radius: 999px; background: var(--soft); display: grid; place-items: center;
  font: 700 20px/1 var(--f-body); }
.tt-faq details[open] summary { padding-bottom: 8px; }
.tt-faq details[open] summary::after { content: "\2013"; background: var(--blue); color: #fff; }

/* 5. Site tour, slide 1: the fake search box and results are a picture. Tilt it, tag it "Example",
   and let taps fall through so nothing in it looks or acts like a real result. */
.tour-art .tour-stack { transform: rotate(-2.5deg) scale(.94); pointer-events: none;
  -webkit-user-select: none; user-select: none; }
.tour-art .tour-ex { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--yellow); color: var(--ink);
  font: 800 11px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; padding: 6px 8px; border-radius: 6px; }