/* travelkit — shared design tokens, typography, header and footer.
   Page-specific layout stays in the page itself. */

:root{
  --paper:#fff; --paper-2:#f1f4f7; --paper-3:#e8edf2;
  --ink:#0b1520; --ink-2:#56677a; --ink-3:#8798a8;
  --rule:#d6dee6;
  --brand:#1c7fc4; --brand-light:#29b6f6; --brand-dark:#125c93; --brand-tint:#eaf4fb;
  --pin:#b3412c; --go:#1d7a4c;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --shadow: 0 1px 2px rgba(11,21,32,.06), 0 8px 24px -12px rgba(11,21,32,.18);
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0e1319; --paper-2:#151b23; --paper-3:#1b232d;
    --ink:#eef3f8; --ink-2:#9fb0c1; --ink-3:#71828f;
    --rule:#242e39; --brand-tint:#10283a;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px}
a{color:var(--brand); text-underline-offset:3px}
h2{font-size:clamp(24px,3.2vw,32px); letter-spacing:-.025em; font-weight:720; margin:0 0 12px}
section{padding:64px 0}

/* header — deliberately opaque: a translucent backdrop-filter layer washed out
   the CTA label in Chrome, and a readable call to action beats a frosted bar. */
header{
  position:sticky; top:0; z-index:20;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.bar{display:flex; align-items:center; gap:12px; height:64px}
.logo{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit}
.logo img{width:34px; height:auto; display:block}
.logo b{font-size:19px; font-weight:700; letter-spacing:-.02em}
.bar nav{margin-left:auto; display:flex; gap:22px; align-items:center}
.bar nav a{color:var(--ink-2); text-decoration:none; font-size:15px}
.bar nav a:hover{color:var(--ink)}
.btn{
  display:inline-block; background:var(--brand); color:#fff; text-decoration:none;
  font-weight:650; font-size:15px; padding:9px 17px; border-radius:9px;
  border:1px solid var(--brand-dark);
}
.btn:hover{background:var(--brand-dark)}
/* `.bar nav a` outranks `.btn` on specificity and would paint the CTA label
   in body-text grey on blue. Restate it at matching weight. */
.bar nav a.btn, .bar nav a.btn:hover{color:#fff}
@media(max-width:640px){ .bar nav a:not(.btn){display:none} }

/* footer */
footer{border-top:1px solid var(--rule); padding:32px 0 44px; font-size:14.5px; color:var(--ink-3)}
.foot-row{display:flex; gap:22px; flex-wrap:wrap; align-items:center}
footer a{color:var(--ink-2); text-decoration:none}
footer a:hover{color:var(--ink); text-decoration:underline}
.foot-legal{margin-left:auto}
@media(max-width:640px){ .foot-legal{margin-left:0; width:100%} }

/* legal pages */
.legal{max-width:760px; padding:52px 24px 72px; margin:0 auto}
.legal h1{font-size:clamp(28px,4vw,38px); letter-spacing:-.028em; font-weight:740; margin:0 0 28px}
.legal h2{font-size:20px; margin:36px 0 10px; letter-spacing:-.018em; font-weight:680}
.legal h3{font-size:16.5px; margin:24px 0 6px; font-weight:660}
.legal p{color:var(--ink-2); margin:0 0 13px}
.legal ul{color:var(--ink-2); margin:0 0 13px; padding-left:22px}
.legal li{margin-bottom:6px}
.legal .addr{color:var(--ink); font-style:normal; line-height:1.75; margin:0 0 13px}
.legal .updated{font-size:14px; color:var(--ink-3); margin-top:40px; padding-top:18px; border-top:1px solid var(--rule)}
.todo{
  background:#fff4e5; border:1px solid #e0a758; color:#7a4b06;
  border-radius:9px; padding:13px 16px; margin:0 0 22px; font-size:15px;
}
@media (prefers-color-scheme: dark){
  .todo{background:#2b2008; border-color:#7a5a1c; color:#f0c477}
}