/* MyTrip Builder — marketing site
   Fonts and colors match the live app (src/App.jsx): Heebo + Plus Jakarta Sans,
   and a light-blue primary echoing the logo's cyan "Trip" accent. */
:root{
  --bg:#F5F8F6;
  --surface:#FFFFFF;
  --ink:#1E2A28;
  --muted:#6B7C76;
  --border:#DEE7E2;
  --brand:#29B6F6;
  --brand-dark:#0E86C4;
  --brand-tint:#E9F7FE;
  --amber:#D98E3F;
  --danger:#C1443A;
  --font-heading:'Heebo', Arial, sans-serif;
  --font-body:'Heebo', Arial, sans-serif;
  --font-accent:'Plus Jakarta Sans', 'Heebo', sans-serif;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
.display{ font-family:var(--font-heading); }
a{ color:inherit; }
h1,h2,h3,h4{ font-weight:700; font-family:var(--font-heading); }
.wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(245,248,246,.85);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
/* Logo pinned to the true left edge, everything else clustered at the true right —
   flip the row to physical ltr flow for macro layout, then re-assert rtl inside the
   right-side cluster so the Hebrew nav items still read right-to-left. */
.nav-inner{
  max-width:1280px; margin:0 auto; padding:8px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  direction:ltr;
}
/* brand stays direction:ltr permanently so the icon is always physically
   first/left of the wordmark, regardless of page language — same fixed-
   order approach used for nav-right below. */
.brand{ position:relative; display:flex; align-items:center; gap:8px; text-decoration:none; flex-shrink:0; direction:ltr; }
/* Beta badge and version on one line directly under the logo, left to right. They live in the
   (sticky) nav with the logo, so the nav padding is tightened a little to keep its height close
   to what it was (the sticky section titles below are offset by the nav height). */
.brand{ flex-direction:column; align-items:flex-start; gap:2px; }
.brand-meta{ display:flex; align-items:center; gap:4px; direction:ltr; }
.brand-meta .beta-badge{ font-size:9.5px; line-height:1.4; padding:1px 7px; }
.site-version{
  font-size:9px; font-weight:700; color:var(--muted); white-space:nowrap; letter-spacing:.02em;
}
.brand-combo{ height:38.4px; width:auto; }
/* nav-right stays direction:ltr permanently so the physical left-to-right
   order (via `order` below) is identical in Hebrew and English — only each
   item's own internal content direction changes with the language. */
.nav-right{ display:flex; align-items:center; gap:14px; direction:ltr; }
.nav-links{ display:flex; align-items:center; gap:0; direction:rtl; order:3; }
html[dir="ltr"] .nav-links{ direction:ltr; }
.nav-links a{ color:var(--ink); text-decoration:none; font-size:14px; font-weight:500; white-space:nowrap; transition:color .15s; }
.nav-links a:hover{ color:var(--brand-dark); }
.nav-links a:not(:last-child)::after{ content:"|"; margin-inline:9px; color:var(--border); font-weight:400; }
/* The section links (Solution, Trip wizard, ...) are one drop-down under the brand name. Opens on hover and
   on keyboard focus; on narrow screens it is flattened back into the burger menu's list. */
.nav-group{ position:relative; display:flex; align-items:center; }
.nav-group::after{ content:"|"; margin-inline:9px; color:var(--border); font-weight:400; font-size:14px; }
.nav-group-btn{
  display:inline-flex; align-items:center; gap:5px; background:none; border:0; padding:8px 0;
  font-family:inherit; font-size:14px; font-weight:600; color:var(--ink); cursor:pointer; white-space:nowrap;
}
.nav-group-btn svg{ flex-shrink:0; transition:transform .15s; }
.nav-group:hover .nav-group-btn, .nav-group:focus-within .nav-group-btn{ color:var(--brand-dark); }
.nav-group:hover .nav-group-btn svg, .nav-group:focus-within .nav-group-btn svg{ transform:rotate(180deg); }
.nav-group-menu{
  display:none; position:absolute; top:100%; inset-inline-start:-12px; min-width:200px; z-index:120;
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:6px;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.22);
}
.nav-group:hover .nav-group-menu, .nav-group:focus-within .nav-group-menu{ display:block; }
.nav-group-menu a{ display:block; padding:9px 12px; border-radius:8px; text-align:start; }
.nav-group-menu a:hover{ background:var(--brand-tint); }
.nav-group-menu a::after{ content:none !important; }
.lang-switch, .nav-feedback{
  position:relative; display:flex; align-items:center; justify-content:center; background:none; border:1px solid var(--border);
  color:var(--ink); font-family:inherit; font-size:13.5px; font-weight:600;
  width:32px; height:32px; padding:0; border-radius:50%; cursor:pointer; transition:border-color .15s, color .15s;
  order:2; margin-right:12px;
}
/* icon only: the label stays in the page for screen readers */
.lang-switch span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.lang-switch:hover, .nav-feedback:hover{ border-color:var(--brand); color:var(--brand-dark); }
.lang-switch svg, .nav-feedback svg{ width:16px; height:16px; flex-shrink:0; }
/* the feedback icon sits right before the language icon, so it does not need the language icon's right margin */
.nav-feedback{ margin-right:0; text-decoration:none; }
.nav-cta{
  background:var(--brand); color:#fff; padding:9px 18px; border-radius:100px;
  font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap;
  transition:background .15s; order:1;
}
.nav-cta:hover{ background:var(--brand-dark); }
.nav-icon-btn{
  display:flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:50%; border:1px solid var(--border); color:var(--ink); flex-shrink:0;
  transition:border-color .15s, color .15s; order:1;
}
.nav-icon-btn:hover{ border-color:var(--brand); color:var(--brand-dark); }
.nav-icon-btn svg{ width:17px; height:17px; }
.nav-burger{
  display:none; background:none; border:none; color:var(--ink);
  width:36px; height:36px; align-items:center; justify-content:center;
  border-radius:8px; cursor:pointer; flex-shrink:0; order:4;
}
.nav-burger:hover{ background:var(--brand-tint); }
.nav-burger svg{ width:22px; height:22px; }

/* ---------- Eyebrow / buttons (shared) ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-accent); font-size:12.5px; font-weight:700; letter-spacing:.02em;
  color:var(--brand-dark); background:var(--brand-tint);
  border:1px solid rgba(41,182,246,.28);
  padding:6px 14px 6px 16px; border-radius:100px; margin-bottom:20px;
}
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--brand); flex-shrink:0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:100px; font-size:15px; font-weight:700;
  text-decoration:none; transition:transform .15s, background .15s, border-color .15s, color .15s;
}
.btn svg{ width:17px; height:17px; flex-shrink:0; }
.btn-primary{ background:var(--brand); color:#fff; box-shadow:0 10px 24px -8px rgba(41,182,246,.55); }
.btn-primary:hover{ background:var(--brand-dark); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--border); }
.btn-ghost:hover{ border-color:var(--brand); color:var(--brand-dark); }

/* ---------- Hero ---------- */
.hero{ padding:64px 0 84px; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero h1{
  font-size:clamp(26px,3.6vw,42px);
  line-height:1.2; font-weight:800; color:var(--ink); margin:0 0 20px;
}
.hero h1 em{ font-style:normal; color:var(--brand-dark); }
.lead{ font-size:17px; line-height:1.75; color:var(--muted); max-width:520px; margin:0 0 30px; }
.hero-ctas{ display:flex; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.hero-ctas .btn-primary{ padding:11px 22px; font-size:14px; }
.hero-section-links{ display:flex; flex-wrap:wrap; row-gap:10px; }
.hero-section-links a{ font-size:13.5px; font-weight:600; color:var(--brand-dark); text-decoration:none; transition:color .15s; }
.hero-section-links a:hover{ color:var(--brand); text-decoration:underline; }
.hero-section-links a:not(:last-child)::after{ content:"|"; margin-inline:12px; color:var(--muted); font-weight:400; }

.hero-visual{ position:relative; height:440px; }
.route-svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.route-svg path{ fill:none; stroke:var(--brand); stroke-width:2; stroke-dasharray:2 9; stroke-linecap:round; opacity:.55; }
.route-ring{
  position:absolute; width:11px; height:11px; margin:-5.5px 0 0 -5.5px;
  border-radius:50%; border:2.5px solid var(--brand); background:var(--surface);
}
.phone{
  position:absolute; width:225px; border-radius:26px; background:var(--surface);
  border:1px solid var(--border); padding:11px;
  box-shadow:0 24px 48px -18px rgba(14,134,196,.30), 0 4px 14px rgba(30,42,40,.08);
}
.phone.a{ top:6px; inset-inline-start:0; transform:rotate(-3deg); }
.phone.b{ bottom:6px; inset-inline-start:78px; transform:rotate(2.5deg); }
.screen{ display:block; }
.screen img{ display:block; width:100%; height:auto; border-radius:14px; }

/* ---------- Solution summary ---------- */
.summary{ padding:72px 0; background:var(--brand-tint); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.summary .sec-head{ margin-bottom:40px; }
.summary-inner{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.summary h3{ font-size:clamp(21px,2.6vw,27px); margin:0 0 16px; }
.summary-inner > .reveal > p{ color:var(--ink); opacity:.78; line-height:1.75; font-size:15.5px; margin:0; }
.facts{ display:flex; flex-direction:column; gap:22px; }
.fact{ display:flex; gap:16px; align-items:flex-start; }
.fact .n{ font-family:var(--font-accent); font-weight:800; color:var(--brand-dark); font-size:14px; padding-top:2px; flex-shrink:0; }
.fact .t{ font-size:14.5px; line-height:1.6; color:var(--ink); }

/* ---------- Section heads ---------- */
/* The title is a sibling of .sec-head (not nested inside it) specifically so its sticky
   containing block is .wrap - which spans the section's full height - rather than the short
   .sec-head box. That's what keeps it pinned just below the main nav for the section's whole
   scroll instead of releasing again a moment after it appears. Needs an opaque background per
   section (they alternate) or content scrolling underneath would show through while it's stuck. */
.sec-title{
  text-align:center; max-width:560px; font-size:clamp(26px,3.2vw,34px);
  margin:0 auto 12px; padding:8px 14px; border-radius:8px;
  position:sticky; top:74px; z-index:10; background:var(--bg);
}
@media (max-width:1279px){ .sec-title{ top:68px; } }
.summary .sec-title{ background:var(--brand-tint); }
.wizard-spotlight .sec-title{ background:var(--surface); }
.sec-head{ text-align:center; max-width:560px; margin:0 auto 46px; }
.sec-head p{ color:var(--muted); font-size:15.5px; line-height:1.6; margin:0; }

/* ---------- Wizard spotlight ---------- */
.wizard-spotlight{ padding:84px 0; background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.wizard-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:900px; margin:0 auto 40px; }
.wizard-card{
  border:1.5px solid var(--border); border-radius:18px; padding:28px;
  background:var(--bg); transition:border-color .2s, box-shadow .2s, transform .2s;
}
.wizard-card:hover{ border-color:var(--brand); box-shadow:0 16px 34px -20px rgba(14,134,196,.32); transform:translateY(-3px); }
.wizard-tag{
  display:inline-block; font-family:var(--font-accent); font-size:11.5px; font-weight:800;
  letter-spacing:.02em; color:var(--brand-dark); background:var(--brand-tint);
  padding:5px 12px; border-radius:100px; margin-bottom:14px;
}
.wizard-card h3{ font-size:18px; margin:0 0 10px; }
.wizard-card p{ margin:0; color:var(--muted); font-size:14.5px; line-height:1.65; }
.wizard-steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:900px; margin:0 auto 22px;
}
.wizard-step{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  background:var(--bg); border:1px solid var(--border); border-radius:16px; padding:18px 14px;
}
.wizard-step span:first-child{
  display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%;
  background:var(--brand); color:#fff; font-family:var(--font-accent); font-weight:800; font-size:12.5px; flex-shrink:0;
  margin-bottom:2px;
}
.wizard-step-title{ font-size:14px; font-weight:700; color:var(--ink); }
.wizard-step-desc{ font-size:12.5px; color:var(--muted); line-height:1.5; }
.wizard-note{ text-align:center; max-width:640px; margin:0 auto; color:var(--muted); font-size:14px; line-height:1.7; }

/* ---------- Capabilities ---------- */
#capabilities{ padding:84px 0; }
.cap-category{ margin-top:48px; }
.cap-category:first-of-type{ margin-top:8px; }
.cap-cat-h{ font-size:15px; font-weight:800; color:var(--brand-dark); text-transform:uppercase; letter-spacing:.04em; margin:0 0 18px; padding-inline-start:14px; border-inline-start:3px solid var(--brand); }
.cap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cap-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s, border-color .2s; }
.cap-card:hover{ border-color:var(--brand); box-shadow:0 16px 34px -18px rgba(14,134,196,.26); transform:translateY(-3px); }
.cap-card-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.cap-ic{ width:36px; height:36px; border-radius:10px; background:var(--brand-tint); color:var(--brand-dark); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cap-ic svg{ width:19px; height:19px; stroke:currentColor; }
.cap-card h4{ font-size:15px; margin:0; color:var(--ink); line-height:1.35; }
.cap-card p{ font-size:13.5px; line-height:1.6; color:var(--muted); margin:0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.cap-card.expanded p{ -webkit-line-clamp:unset; overflow:visible; }
.cap-more{ align-self:flex-start; margin-top:8px; background:none; border:none; padding:0; color:var(--brand-dark); font-family:inherit; font-weight:700; font-size:12.5px; cursor:pointer; }
.cap-more:hover{ text-decoration:underline; }
.cap-more .less-label{ display:none; }
.cap-card.expanded .cap-more .more-label{ display:none; }
.cap-card.expanded .cap-more .less-label{ display:inline; }

/* ---------- How it works ---------- */
.how{ padding:84px 0; background:var(--bg); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.how-list{ display:flex; flex-direction:column; max-width:680px; margin:0 auto; }
.how-item{ display:flex; gap:24px; padding:26px 0; border-bottom:1px solid var(--border); }
.how-item:last-child{ border-bottom:none; padding-bottom:0; }
.how-n{ font-family:var(--font-accent); font-size:28px; color:var(--brand-dark); font-weight:800; flex-shrink:0; width:48px; }
.how-item h3{ margin:0 0 6px; font-size:17px; }
.how-item p{ margin:0; color:var(--muted); font-size:14.5px; line-height:1.6; }

/* ---------- Audience ---------- */
#audience{ padding:76px 0 92px; }
.tags{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.tag{ padding:10px 20px; border-radius:100px; background:var(--surface); border:1px solid var(--border); font-size:14px; font-weight:600; color:var(--ink); }

/* ---------- CTA banner ---------- */
.cta-banner{
  max-width:640px; margin:0 auto; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:26px; text-align:center; color:var(--ink);
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.cta-banner:hover{ border-color:var(--brand); box-shadow:0 16px 34px -18px rgba(14,134,196,.26); transform:translateY(-3px); }
.cta-banner h2{ font-size:15px; margin:0 0 8px; color:var(--ink); }
.cta-banner p{ color:var(--muted); margin:0 0 16px; font-size:13.5px; }

/* ---------- Footer ---------- */
footer{ padding:56px 0 30px; }
.foot-grid{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
  padding-bottom:26px; border-bottom:1px solid var(--border); margin-bottom:20px;
  direction:ltr;
}
.foot-links{ display:flex; flex-direction:column; gap:14px; direction:rtl; }
html[dir="ltr"] .foot-links{ direction:ltr; }
.foot-row{ display:flex; gap:26px; flex-wrap:wrap; }
.foot-links a{ color:var(--ink); text-decoration:none; font-size:14px; font-weight:500; display:inline-flex; align-items:center; gap:6px; }
.foot-links a:hover{ color:var(--brand-dark); }
.beta-badge{ font-family:var(--font-accent); font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-dark); background:rgba(41,182,246,.14); padding:2px 8px; border-radius:100px; line-height:1.5; }
.soon{ font-family:var(--font-accent); font-size:9.5px; font-weight:800; color:var(--amber); background:rgba(217,142,63,.16); padding:2px 7px; border-radius:100px; }
.foot-bottom{ display:flex; justify-content:space-between; color:var(--muted); font-size:13px; flex-wrap:wrap; gap:8px; direction:ltr; }
.foot-legal a{ color:inherit; text-decoration:none; }
.foot-legal a:hover{ color:var(--brand-dark); text-decoration:underline; }

/* ---------- Reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ height:380px; width:100%; max-width:420px; margin:0 auto; overflow:hidden; }
  .summary-inner{ grid-template-columns:1fr; gap:36px; }
  .cap-grid{ grid-template-columns:repeat(2,1fr); }
  .wizard-grid{ grid-template-columns:1fr; }
}
/* The full nav (7 links + language switch + CTA) needs up to ~1250px depending on the language
   (measured with the fallback font, the widest case); collapse to the burger menu below 1280px
   so labels never wrap or run off the edge. */
@media (max-width:1279px){
  .nav-inner{ padding-inline:16px; gap:8px; }
  .nav-right{ position:static; }
  .nav-links{
    display:none; position:absolute; top:100%; inset-inline:0;
    background:var(--surface); border-bottom:1px solid var(--border);
    flex-direction:column; align-items:stretch; gap:0; padding:8px 24px;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:12px 0; border-bottom:1px solid var(--border); }
  .nav-links a:last-child{ border-bottom:none; }
  .nav-links a:not(:last-child)::after{ content:none; }
  .nav-group{ display:block; }
  .nav-group::after{ content:none; }
  .nav-group-btn{ display:none; }
  .nav-group-menu{ display:block; position:static; min-width:0; border:0; border-radius:0; padding:0; box-shadow:none; background:none; }
  .nav-group-menu a{ padding:12px 0; border-radius:0; }
  .nav-group-menu a:hover{ background:none; }
  .nav-group-menu a:last-child{ border-bottom:1px solid var(--border); }
  .nav-burger{ display:flex; }
}
@media (max-width:860px){
  .nav-cta{ display:none; }
}
@media (max-width:640px){
  /* The wordmark's width is fixed to its height (auto width, no distortion) - it never
     shrank on its own, so on narrow phones it could push nav-right (lang switch + burger)
     past the viewport edge with no visible overflow affordance, hiding the menu entirely. */
  .brand-combo{ height:30px; }
  .cap-grid{ grid-template-columns:1fr; }
  .hero{ padding:40px 0 60px; }
  .foot-grid{ flex-direction:column; align-items:flex-start; }
  .wizard-steps{ grid-template-columns:1fr; }
}

/* ---------- Back to top ---------- */
.back-to-top{
  position:fixed; inset-inline-end:20px; bottom:20px; z-index:90;
  width:44px; height:44px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface); color:var(--ink); display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 6px 18px -6px rgba(0,0,0,.18);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s, transform .2s, visibility .2s, border-color .15s, color .15s;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ border-color:var(--brand); color:var(--brand-dark); }
.back-to-top svg{ width:20px; height:20px; }

/* ---------- Guides (static articles under /guides/ and /he/guides/) ---------- */
a.lang-switch{ text-decoration:none; }
.gd-article{ max-width:760px; margin:0 auto; padding:20px 24px 72px; }
.gd-article.gd-index{ max-width:1000px; }
.gd-breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); }
.gd-breadcrumb a{ color:var(--muted); text-decoration:none; }
.gd-breadcrumb a:hover{ color:var(--brand-dark); text-decoration:underline; }
.gd-article h1{ font-size:clamp(28px,4.2vw,40px); line-height:1.2; font-weight:800; color:var(--ink); margin:16px 0 12px; }
.gd-meta{ color:var(--muted); font-size:13.5px; margin:0 0 22px; }
.gd-tldr{ margin:0 0 26px; padding:14px 18px; border-inline-start:4px solid var(--brand); background:var(--brand-tint); border-radius:10px; font-size:16px; line-height:1.7; }
.gd-tldr strong{ color:var(--brand-dark); }
.gd-lead{ font-size:18px; line-height:1.75; color:var(--ink); opacity:.85; margin:0 0 26px; }
.gd-toc{ background:var(--brand-tint); border-radius:14px; padding:16px 22px; margin:0 0 34px; }
.gd-toc strong{ display:block; margin-bottom:8px; font-size:14px; color:var(--brand-dark); }
.gd-toc ol{ margin:0; padding-inline-start:20px; }
.gd-toc li{ margin:5px 0; font-size:15px; }
.gd-toc a{ color:var(--ink); text-decoration:none; }
.gd-toc a:hover{ color:var(--brand-dark); text-decoration:underline; }
.gd-article h2{ font-size:clamp(21px,2.6vw,26px); line-height:1.3; font-weight:800; color:var(--ink); margin:40px 0 12px; scroll-margin-top:84px; }
.gd-article p, .gd-article li{ font-size:16.5px; line-height:1.8; }
.gd-article p{ margin:0 0 16px; }
.gd-article ul, .gd-article ol{ margin:0 0 18px; padding-inline-start:24px; }
.gd-article li{ margin:6px 0; }
.gd-article section a, .gd-lead a{ color:var(--brand-dark); }
.gd-tip{ border-inline-start:4px solid var(--brand); background:var(--brand-tint); border-radius:10px; padding:14px 18px; margin:0 0 18px; }
.gd-tip p{ margin:0; }
.gd-faq h3{ font-size:17px; font-weight:700; color:var(--ink); margin:22px 0 6px; }
.gd-faq p{ margin:0; }
.gd-cta{ margin:44px 0 0; padding:28px 24px; border:1px solid var(--border); border-radius:18px; background:var(--surface); text-align:center; }
.gd-cta h2{ margin:0 0 8px; font-size:22px; }
.gd-cta p{ color:var(--muted); margin:0 0 18px; }
.gd-cta-btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.gd-related{ margin-top:40px; }
.gd-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.gd-related .gd-grid{ margin-top:14px; }
.gd-index .gd-grid{ margin-top:28px; }
.gd-card{ display:flex; flex-direction:column; gap:8px; border:1px solid var(--border); border-radius:16px; padding:18px; background:var(--surface); text-decoration:none; color:var(--ink); transition:border-color .15s, transform .15s; }
.gd-card:hover{ border-color:var(--brand); transform:translateY(-2px); }
.gd-card h3{ margin:0; font-size:17px; line-height:1.35; font-weight:700; color:var(--ink); }
.gd-card p{ margin:0; font-size:14px; line-height:1.6; color:var(--muted); }
.home-guides{ margin-top:8px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.home-guides-all{ margin:22px 0 48px; text-align:center; font-weight:700; }
.home-guides-all a{ color:var(--brand-dark); text-decoration:none; }
.home-guides-all a:hover{ text-decoration:underline; }
.home-guides-all span{ color:var(--muted); margin:0 8px; }
.gd-card-meta{ margin-top:auto; font-size:12.5px; font-weight:600; color:var(--brand-dark); }
.gd-article .gd-toc li{ font-size:15px; line-height:1.5; margin:6px 0; }
.bk-disclosure{ font-size:13px; color:var(--muted); margin:10px 0 0; }
.bk-disclosure a{ color:var(--brand-dark); }
.gd-toc .gd-toc-flat{ list-style:none; padding-inline-start:0; margin-inline-start:0; }

/* Beta benefits strip + popup (filled by main.js from get_pilot_public_stats; hidden while the pilot is off) */
.pilot-strip[hidden], .pilot-modal[hidden]{ display:none; }
.pilot-strip{ margin:0 0 18px; }
.pilot-inner{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; border:1px solid var(--border); border-radius:16px; padding:16px 20px 18px; background:rgba(41,182,246,.07); }
.pilot-title{ font-size:15px; margin:0; color:var(--ink); }
.pilot-main{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
/* The number is drawn like a tear-off calendar tile: dark body, two binder rings, a top band with "of 100". */
.pilot-cal{ position:relative; display:flex; flex-direction:column; width:104px; flex:0 0 auto; margin-top:8px; border-radius:16px; background:#2F3B38; color:#fff; box-shadow:0 10px 20px -12px rgba(0,0,0,.55); }
.pilot-cal-top{ height:26px; border-bottom:3px solid #fff; border-radius:16px 16px 0 0; }
.pilot-cal-num{ padding:8px 4px 0; text-align:center; font-family:var(--font-accent); font-size:56px; font-weight:800; line-height:1.05; font-variant-numeric:tabular-nums; }
.pilot-cal-of{ padding:0 6px 11px; text-align:center; font-size:13px; font-weight:700; letter-spacing:.02em; white-space:nowrap; opacity:.92; }
.pilot-cal-ring{ position:absolute; top:-9px; width:11px; height:22px; border-radius:6px; background:#2F3B38; border:2px solid #fff; }
.pilot-cal-ring-a{ inset-inline-start:24px; }
.pilot-cal-ring-b{ inset-inline-end:24px; }
.pilot-main-text{ display:flex; flex-direction:column; gap:8px; min-width:0; flex:1 1 150px; }
.pilot-spots-label{ font-size:17px; font-weight:800; line-height:1.3; color:var(--ink); }
.pilot-stats{ display:flex; flex-wrap:wrap; gap:4px 16px; }
.pilot-stat{ display:flex; align-items:baseline; gap:6px; }
.pilot-num{ font-family:var(--font-accent); font-size:15px; font-weight:800; color:var(--brand-dark); font-variant-numeric:tabular-nums; }
.pilot-label{ font-size:12.5px; color:var(--muted); }
.pilot-more{ white-space:nowrap; }
.pilot-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(15,30,45,.55); }
.pilot-card{ background:var(--surface); color:var(--ink); border-radius:18px; max-width:560px; width:100%; max-height:calc(100vh - 32px); overflow:auto; padding:22px 22px 18px; box-shadow:0 24px 60px -20px rgba(0,0,0,.45); }
.pilot-card h2{ font-size:18px; margin:0 0 8px; }
.pilot-card p{ font-size:14px; color:var(--muted); margin:0 0 10px; }
.pilot-card ul{ margin:0 0 12px; padding-inline-start:20px; font-size:14px; line-height:1.55; }
.pilot-card li{ margin-bottom:8px; }
.pilot-note{ font-size:12.5px; }
.pilot-actions{ display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width:560px){ .pilot-inner{ padding:14px 14px 16px; } .pilot-cal{ width:92px; } .pilot-cal-num{ font-size:48px; } .pilot-cal-ring-a{ inset-inline-start:20px; } .pilot-cal-ring-b{ inset-inline-end:20px; } }

/* ---------- Travel journals highlight (home) ---------- */
.btn-journal{ background:#fff7e0; color:#7a4b00; border:1.5px solid #f0b429; font-weight:700; }
.btn-journal:hover{ background:#ffefc0; border-color:#d99a10; color:#5c3800; }
.btn-journal svg{ width:18px; height:18px; flex-shrink:0; }
.hero-section-links a.is-hot, .nav-links a.is-hot{ color:#a15c00; font-weight:700; }
.hero-section-links a.is-hot:hover, .nav-links a.is-hot:hover{ color:#7a4b00; }
.journals-sec{ padding:84px 0; background:#fffaf0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.journals-sec .sec-title{ background:#fffaf0; }
.jr-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:8px; }
.jr-item{ background:var(--surface); border:1px solid #f1dfae; border-radius:16px; padding:22px 20px; }
.jr-ic{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; background:#fff1c9; color:#8a5300; margin-bottom:12px; }
.jr-ic svg{ width:22px; height:22px; }
.jr-item h3{ margin:0 0 6px; font-size:16.5px; }
.jr-item p{ margin:0; color:var(--muted); font-size:14px; line-height:1.6; }
.jr-cta{ text-align:center; margin:30px 0 0; }
@media (max-width:900px){ .jr-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .jr-grid{ grid-template-columns:1fr; } .journals-sec{ padding:60px 0; } }