/* TakeMeSomewhere night look, in the OZAG Technologies house style:
   deep navy with a faint grid, gold for the one thing to press and for the highlighted words,
   a heavy wide headline face, green checks for what you get. Loaded after style.css (default on;
   ?look=classic shows the old light look). */
:root {
  --night: #0a1322;
  --ink: #0d1a2e;          /* dark blocks: header, footer, featured cards */
  --ocean: #16324a;
  --tide: #8fd5ff;         /* links */
  --gold: #f5c044;
  --gold-hi: #ffd36b;
  --coral: var(--gold);    /* every primary action turns gold */
  --on-coral: #0a1322;
  --coral-soft: rgba(245,192,68,.14);
  --foam: var(--night);
  --card: #0f1d33;
  --card-hi: #13243e;
  --mist: rgba(255,255,255,.09);
  --muted: #9fb0c6;
  --fg: #eef3f8;
  --check: #34d399;
  --ok-soft: rgba(52,211,153,.14); --warn-soft: rgba(245,192,68,.16); --bad-soft: rgba(239,68,68,.16);
  --plane: #f5c044; --plane-shade: #c9971f; --label-price: #a87a0c;
  --display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --text: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
body {
  background:
    radial-gradient(900px 520px at 88% 8%, rgba(245,192,68,.07), transparent 60%),
    radial-gradient(900px 600px at 0% 100%, rgba(52,211,153,.07), transparent 60%),
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px) 0 0 / 56px 56px,
    var(--night);
  font-size: 17px;
}
a:hover { color: #fff; }
h1, h2, h3 { color: #fff; font-family: var(--display); }
h1 { font-weight: 900; font-stretch: 125%; letter-spacing: -0.035em; line-height: .98; }
h2 { font-weight: 800; font-stretch: 112%; letter-spacing: -0.02em; }
h3 { font-weight: 800; font-stretch: 112%; }
.accent { color: var(--gold); }
:focus-visible { outline-color: var(--gold); }

/* header: the gold button is the only colour in it */
.site-head { background: rgba(10,19,34,.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--mist); position: sticky; top: 0; z-index: 20; }
.wordmark { font-family: var(--display); font-stretch: 112%; font-weight: 900; }
.site-nav a, .head-actions a.text { color: #d6dfeb; font-weight: 600; }
.site-nav a[aria-current="page"] { background: rgba(255,255,255,.08); color: #fff; }
.head-actions .button { border-radius: 10px; }
.site-foot { background: #070e1a; border-top: 1px solid var(--mist); }

/* buttons: gold, a little square like OZAG's */
.button, button, input[type=submit] { border-radius: 10px; font-weight: 800; }
.button:hover, button:hover { background: var(--gold-hi); }
.button.secondary, button.secondary, .button.small.secondary, button.small.secondary {
  background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); }
.button.secondary:hover, button.secondary:hover { background: rgba(255,255,255,.06); color: #fff; }
.button.small:not(.secondary), button.small:not(.secondary) { color: var(--on-coral); }

/* hero */
.hero { background: transparent; padding-top: 56px; }
.news-pill { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: #e4ebf4; text-decoration: none; font-size: .95rem; margin-bottom: 26px; }
.news-pill:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.news-tag { background: rgba(52,211,153,.18); color: #6ee7b7; font-weight: 800; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 10px; }
.eyebrow { color: var(--gold); font-weight: 800; font-size: .85rem; letter-spacing: .28em; text-transform: uppercase; margin: 0 0 14px; }
.hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); }
.hero .lead { color: #c7d2e0; font-size: 1.15rem; }
.hero-points { color: #e4ebf4; gap: 12px; }
.hero-points li { padding-left: 34px; }
.hero-points li::before { width: 20px; height: 20px; top: .12em; border-radius: 50%; background: transparent; border: 1.6px solid var(--check);
  -webkit-mask: none; }
.hero-points li::after { content: ""; position: absolute; left: 6px; top: calc(.12em + 5px); width: 8px; height: 5px;
  border-left: 1.8px solid var(--check); border-bottom: 1.8px solid var(--check); transform: rotate(-45deg); }
.hero-demo a { color: #fff; }
.trust-row { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: #b8c4d4; font-size: .92rem; }
.trust-row li::before { content: "✓"; color: var(--check); margin-right: 8px; font-weight: 800; }

/* cards: navy panels with a hairline border */
.pass, .section.alt, .routes a, .plan, .panel, table.flights, .trip, article.trip, .verdict, .reason, .airline-rows li,
.alternatives a, .trip-card, .price-card, .airline-list li, .amounts, .demo-card, .trip-tiles a, .tour-panel, .mock-fare,
.mock-letter, .transfer-card, .tier, .feature-strip > div, .unlock, .alert-box, .card, form.card-form {
  background: linear-gradient(180deg, var(--card-hi), var(--card)); border-color: var(--mist); color: var(--fg);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 48px -30px rgba(0,0,0,.9); }
.pass { border: 1px solid var(--mist); }
.tier.featured, .plan.featured { box-shadow: 0 0 0 1.5px var(--gold), 0 24px 60px -30px rgba(245,192,68,.45); }
.routes a:hover, .trip-tiles a:hover, .alternatives a:hover { border-color: rgba(245,192,68,.5); }

/* badges */
.badge, .tag, .chip, .manual { background: rgba(255,255,255,.06); color: #dbe4ef; border: 1px solid rgba(255,255,255,.14); }
.tier .note, .plan .note { background: rgba(245,192,68,.16); color: var(--gold); }

/* forms */
input, select, textarea { background: #0b172a; color: var(--fg); border-color: rgba(255,255,255,.14); border-radius: 10px; }
input::placeholder, textarea::placeholder { color: #6f819a; }
.pass-tabs button { color: var(--muted); }
.pass-tabs button[aria-selected="true"] { color: #fff; box-shadow: inset 0 -3px 0 var(--gold); }
.pop-tabs button, .tour-tabs button, .days a, .mock-days span { background: var(--card); color: var(--fg); border-color: var(--mist); }
.pop-tabs button[aria-selected="true"], .tour-tabs button[aria-selected="true"], .days a.chosen, .mock-days span.on {
  background: var(--gold); color: var(--on-coral); border-color: var(--gold); }
.tour-tabs button[aria-selected="true"] *, .pop-tabs button[aria-selected="true"] *, .mock-days span.on b { color: var(--on-coral) !important; }
.tour-tabs button small, .pop-tabs button small { color: var(--muted); }

/* light tints become quiet navy */
.notice.info, .compare-links, .prefilled { background: rgba(143,213,255,.08); }
table.flights th, .tiles div { background: #0c1a2f; }
table.flights tr.best { background: rgba(245,192,68,.07); box-shadow: inset 4px 0 0 var(--gold); }
.phone-screen { background: #0b172a; }
.bubble, .offer-list li { background: var(--card-hi); color: var(--fg); }
.demo-share { background: rgba(52,211,153,.12); color: #a7f3d0; }
.hotel-cta { background: rgba(245,192,68,.08); border-color: rgba(245,192,68,.3); }
.cheap-five { background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.4); }
.al-badge, .button.dark, .mic { background: #1a2f4b; }
.demo-video { box-shadow: 0 0 0 1px var(--mist), 0 30px 60px -30px rgba(0,0,0,.9); }
@media (max-width: 520px) { .eyebrow { letter-spacing: .16em; font-size: .78rem; } .news-pill { font-size: .88rem; } }
/* the wide headline face needs more room: keep the header on one line, the hero headline a little smaller */
.wrap { width: min(1240px, 100% - 32px); }
@media (min-width: 761px) {
  .site-head .wrap { flex-wrap: nowrap; gap: 18px; }
  .site-nav { flex-wrap: nowrap; gap: 2px; }
  .site-nav a, .head-actions a.text { padding: 8px 9px; font-size: .92rem; white-space: nowrap; }
  .head-actions .button { white-space: nowrap; }
}
.hero h1 { font-size: clamp(2.4rem, 4.6vw, 4rem); }
html[lang="nl"] .hero h1 { font-size: clamp(2.1rem, 3.6vw, 3.15rem); }
