/* ============================================================
     KITE DESIGN TOKENS
     Swap these for the exact brand hex values from the design
     system - everything below is driven off these variables.
     ============================================================ */
  :root{
    --ink:#0b140f;          /* headings / primary text */
    --body:#3f5047;         /* body copy */
    --dim:#63746b;          /* secondary / captions */
    --faint:#91a199;
    --bg:#ffffff;
    --surface:#f2f7f5;      /* section backgrounds, icon circles */
    --surface-2:#eaf0ed;
    --line:#e2e9e6;
    --line-2:#d0dcd6;
    --amber:#12b76a;        /* long weekend accent */
    --amber-ink:#05603a;
    --amber-soft:#ecfdf3;
    --teal:#039855;         /* USD / dollars */
    --teal-soft:#ecfdf3;
    --coral:#04622d;        /* biggest break */
    --coral-soft:#d1fadf;
    --r:16px;
    --r-lg:24px;
    --shadow:0 1px 2px rgba(11,20,15,.04), 0 8px 24px -12px rgba(11,20,15,.10);
    --shadow-lg:0 2px 4px rgba(11,20,15,.05), 0 18px 44px -16px rgba(11,20,15,.18);
    --max:1200px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{margin:0;background:var(--bg);color:var(--body);
    font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.6;
    -webkit-font-smoothing:antialiased}
  img{max-width:100%;display:block}
  a{color:inherit}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
  h1,h2,h3,h4{font-family:'Bricolage Grotesque',sans-serif;color:var(--ink);margin:0;letter-spacing:-.015em}

  /* eyebrow + section heading pattern from kiteapp.xyz */
  .eyebrow{font-size:13px;font-weight:600;color:var(--dim);letter-spacing:.06em;margin:0 0 10px}
  .sec-h2{font-family:'Bricolage Grotesque';font-weight:700;font-size:clamp(25px,3.6vw,38px);line-height:1.12;margin:0 0 8px}
  .sub{font-family:'Bricolage Grotesque';font-weight:500;color:var(--faint);font-size:clamp(16px,2vw,19px);margin:0 0 30px}

  /* ---------- nav ---------- */
  .nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);
    backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .nav .row{display:flex;align-items:center;gap:26px;height:66px}
  .logo{display:flex;align-items:center;gap:9px;font-family:'Bricolage Grotesque';font-weight:700;
    font-size:18px;color:var(--ink);text-decoration:none;letter-spacing:-.02em}
  .logo .mark{width:26px;height:26px;border-radius:7px;background:var(--ink);color:#fff;
    display:grid;place-items:center;font-size:14px}
  .nav .links{display:flex;gap:22px;margin-left:8px;font-size:14.5px;font-weight:500;color:var(--body)}
  .nav .links a{text-decoration:none}
  .nav .links a:hover{color:var(--ink)}
  .nav .cta-sm{margin-left:auto;font-family:'Bricolage Grotesque';font-weight:700;font-size:14px;
    background:var(--ink);color:#fff;text-decoration:none;padding:10px 18px;border-radius:10px;
    white-space:nowrap;transition:transform .16s}
  .nav .cta-sm:hover{transform:translateY(-1px)}
  @media(max-width:860px){.nav .links{display:none}}

  /* ---------- breadcrumb ---------- */
  .crumb{font-size:13.5px;color:var(--dim);padding:22px 0 0}
  .crumb a{text-decoration:none;color:var(--dim)}
  .crumb a:hover{color:var(--ink)}
  .crumb b{color:var(--ink);font-weight:600}
  .crumb span{margin:0 7px;color:var(--line-2)}

  /* ---------- hero ---------- */
  .hero{padding:48px 0 8px;position:relative;overflow:hidden}
  .hero .kicker{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
    color:var(--amber-ink);background:var(--amber-soft);border:1px solid #a6f4c5;
    padding:6px 13px;border-radius:999px;margin-bottom:20px}
  .hero h1{font-weight:700;font-size:clamp(33px,5.6vw,56px);line-height:1.05;margin:0 0 18px;max-width:20ch}
  .hero p.lede{font-size:clamp(16px,2.2vw,19px);color:var(--body);max-width:56ch;margin:0 0 26px}
  .pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
  .pill{font-size:13.5px;font-weight:500;color:var(--body);background:var(--surface);
    border:1px solid var(--line);border-radius:999px;padding:7px 14px}
  .pill b{color:var(--ink);font-weight:600}

  /* ---------- country cards (screenshot 1) ---------- */
  /* ---------------------------------------------------------------------------
     SEASONAL GUIDE — "The best time to visit X".
     Ported from .wrow in kite-holiday-planner. Alternating rows: copy on one
     side, a 4:5 photograph on the other, flipping every other row.

     1.55fr / 1fr, and reversed on .flip. The photo is the narrower column
     because the copy is a full paragraph plus chips plus two buttons; an even
     split left the text cramped and the picture enormous.

     ORDER, NOT DIRECTION, does the flipping. .flip swaps the grid ratio and sets
     order:2 on the copy, which keeps the copy first in the DOM on every row —
     so a screen reader and the mobile stack both read title-then-picture
     throughout, and only the visual order alternates.

     The picture bleeds 40px past the container above 1200px, which is what stops
     the rows reading as a plain two-column table. Below 820px everything stacks
     to one column with the photo on top.
     --------------------------------------------------------------------------- */
  /* .seasons, not .when. The prototype already uses .when for the date label on a
     break page (.det-head .when), and while that one is scoped a class deeper, a bare
     .when rule here still reached it — harmless today, a puzzle later. */
  .seasons{background:var(--bg)}
  .wlist{display:grid;gap:0;margin-top:30px}
  .wrow{display:grid;grid-template-columns:1.55fr 1fr;gap:64px;align-items:center;padding:56px 0}
  .wrow.flip{grid-template-columns:1fr 1.55fr}
  .wrow + .wrow{border-top:1px solid var(--line)}
  .wrow.flip .wcopy{order:2}
  /* An eyebrow, not a pill. It arrived as a bordered green chip, which read as a
     third piece of chrome next to the place chips and the buttons below it.
     Values are our .eyebrow's — Inter 14/500 at .05em in --dim — but the class is
     NOT reused: `.hero-country ~ section .eyebrow` centres and blocks every
     eyebrow after the country hero, and this one has to stay left in its column. */
  .wb-m{display:block;font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:14px;
    font-weight:500;letter-spacing:.05em;color:var(--dim)}
  .wb-t{font-family:'Bricolage Grotesque';font-weight:700;font-size:clamp(28px,3.4vw,42px);
    color:var(--ink);margin:16px 0 0;line-height:1.08;letter-spacing:-.02em}
  .wb-best{display:block;margin-top:10px;font-size:14px;color:var(--dim)}
  .wcopy p{margin:18px 0 0;font-size:16px;color:var(--body)}
  .wb-p{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
  .wb-p span{font-size:12.5px;font-weight:500;color:var(--ink);background:var(--surface);
    border:1px solid var(--line);border-radius:8px;padding:6px 11px}
  .wb-cta{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
  /* The site's button, not the prototype's. .cta-main is 44px on a 999px radius in
     Inter 500/14 at #0bbc69, darkening to #039855 and lifting 2px on hover — these
     mirror it declaration for declaration so the two cannot drift.
     The secondary is NOT .cta-ghost: that one is translucent white for the dark
     hero and would vanish here. It follows .dbtn's light treatment instead, at
     44px so it sits level with the primary. */
  .wbtn{display:inline-flex;align-items:center;justify-content:center;height:44px;
    padding:0 24px;border-radius:999px;font-family:'Inter',system-ui,-apple-system,sans-serif;
    font-weight:500;font-size:14px;text-decoration:none;background:#0bbc69;color:#fff;
    transition:transform .16s,background .15s,box-shadow .16s}
  .wbtn:hover{background:#039855;transform:translateY(-2px);
    box-shadow:0 12px 30px -10px rgba(18,183,106,.6)}
  .wbtn.ghost{background:var(--bg);color:var(--ink);border:1px solid var(--line)}
  .wbtn.ghost:hover{background:var(--surface);border-color:var(--line-2);
    transform:translateY(-2px);box-shadow:none}
  .wimg{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;
    box-shadow:var(--shadow-lg)}
  .wimg img{width:100%;height:100%;object-fit:cover;display:block}
  @media(min-width:1200px){
    .wimg{margin-right:-40px}
    .wrow.flip .wimg{margin-right:0;margin-left:-40px}
  }
  @media(max-width:820px){
    .wrow,.wrow.flip{grid-template-columns:1fr;gap:26px;padding:40px 0}
    .wrow.flip .wcopy{order:0}
    .wimg,.wrow.flip .wimg{order:-1;margin:0 auto;max-width:400px;width:100%}
  }

  /* ---------------------------------------------------------------------------
     COUNTRY CARDS — the label sits ON the photograph.
     Ported from .v2s in kite-holiday-planner/travel/holiday-planner-v2.html.

     It was a white card: a 4:3 image block with a "N holiday breaks" badge over
     it, then a row underneath holding a round flag, the name and the tagline.
     Now the photo IS the card, 4:5, with a bottom-up gradient and the label
     stacked over it — flag, then name, then tagline.

     4:5 IS WHY THIS FITS FOR FREE. The photographs in
     public/travel-planner/countries are 1080x1350, which is exactly 4:5, so the
     old 4:3 frame was cropping a third of every one of them away. This shows the
     whole picture.

     The flag stays OURS — round, hotlinked with an emoji fallback, via
     flagImg(c,'ccflag') — rather than the source's 30x20 rectangle, because
     round flags are what the rest of this planner uses. It gains a white ring
     here, which it did not need on white.
     --------------------------------------------------------------------------- */
  .grid-countries{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    gap:20px;margin:30px 0 0}
  .cc{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;
    border-radius:var(--r-lg);text-decoration:none;box-shadow:var(--shadow);
    transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s}
  .cc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
  .cc>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  /* Transparent until 46% so the top half of the photo is untouched, then four
     stops down to near-opaque. A two-stop gradient over the same distance leaves
     a visible edge where it starts. */
  .cc .sc{position:absolute;inset:0;background:linear-gradient(180deg,
    rgba(6,30,18,0) 46%,rgba(6,30,18,.3) 60%,rgba(5,26,15,.78) 79%,rgba(4,22,13,.93))}
  .cc .tx{position:absolute;left:0;right:0;bottom:0;padding:20px}
  .cc .ccflag{display:block;width:28px;height:28px;border-radius:50%;object-fit:cover;
    box-shadow:0 0 0 1.5px rgba(255,255,255,.6),0 2px 6px rgba(0,0,0,.35);margin-bottom:12px}
  .cc .flag-fb{width:28px;height:28px;display:grid;place-items:center;font-size:20px;
    line-height:1;margin-bottom:12px}
  .cc h3{font-family:'Bricolage Grotesque';font-weight:700;font-size:20px;color:#fff;
    margin:7px 0 0;line-height:1.15}
  .cc p{margin:6px 0 0;font-size:13px;color:rgba(255,255,255,.76)}

  /* ---------- section band ---------- */
  .band{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    margin-top:76px;padding:64px 0}
  section.blk{padding:64px 0}

  /* ---------- long weekend cards ---------- */
  .lw-list{display:grid;gap:14px}
  .lwc{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;
    background:var(--bg);border:1px solid var(--line);border-left:4px solid var(--amber);
    border-radius:var(--r);padding:18px 20px;text-decoration:none;box-shadow:var(--shadow);
    transition:transform .18s,box-shadow .18s,border-color .18s}
  .lwc:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
  .lwc.big{border-left-color:var(--coral);background:linear-gradient(90deg,var(--coral-soft),var(--bg) 42%)}
  .lwc .dr{font-family:'Bricolage Grotesque';font-weight:700;font-size:15.5px;color:var(--ink);min-width:112px}
  .lwc .dr small{display:block;font-family:'Inter';font-weight:400;font-size:12px;color:var(--dim);margin-top:2px}
  .lwc .mid{min-width:0}
  .lwc .t{font-family:'Bricolage Grotesque';font-weight:700;font-size:16.5px;color:var(--ink);margin:0 0 3px}
  .lwc .d{font-size:14px;color:var(--dim);margin:0}
  .lwc .bridge{display:inline-flex;gap:7px;align-items:flex-start;font-size:12.5px;color:var(--teal);
    background:var(--teal-soft);border-radius:8px;padding:5px 10px;margin-top:9px;line-height:1.45}
  .lwc .bridge b{color:var(--ink)}
  .db{text-align:center;background:var(--amber-soft);border:1px solid #a6f4c5;border-radius:12px;
    padding:10px 13px;min-width:70px;flex:0 0 auto}
  .lwc.big .db{background:var(--coral-soft);border-color:#6ce9a6}
  .db .n{font-family:'Bricolage Grotesque';font-weight:700;font-size:25px;line-height:1;color:var(--amber-ink)}
  .lwc.big .db .n{color:#05603a}
  .db .u{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-top:4px}
  .tagbig{position:absolute;top:-1px;right:-1px;font-size:10px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:#fff;background:var(--coral);padding:4px 10px;border-radius:0 var(--r) 0 10px}
  .lwc{position:relative;overflow:hidden}

  /* ---------- full calendar table ---------- */
  .mlab{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
    display:flex;align-items:center;gap:12px;margin:26px 0 10px}
  .mlab::after{content:"";flex:1;height:1px;background:var(--line)}
  .crow{display:grid;grid-template-columns:92px 1fr auto;gap:14px;align-items:center;
    padding:11px 14px;border:1px solid var(--line);border-radius:11px;margin-bottom:7px;background:var(--bg)}
  .crow .cd{font-family:'Bricolage Grotesque';font-weight:700;font-size:14px;color:var(--ink)}
  .crow .cd small{display:block;font-family:'Inter';font-weight:400;font-size:11.5px;color:var(--dim)}
  .crow .cn{font-size:14.5px;color:var(--body)}
  .crow .cn em{font-style:normal;color:var(--faint);font-size:12.5px}
  .tt{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    padding:4px 9px;border-radius:7px;white-space:nowrap}
  .tt.pub{color:var(--teal);background:var(--teal-soft)}
  .tt.fes{color:var(--dim);background:var(--surface-2)}
  .tt.lw{color:#fff;background:var(--amber)}
  .crow.islw{border-color:#a6f4c5;background:var(--amber-soft)}

  /* ---------- trip type cards (screenshot 2) ---------- */
  .trips{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:18px}
  .tc{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:24px 18px;
    text-align:center;text-decoration:none;box-shadow:var(--shadow);
    transition:transform .18s,box-shadow .18s,border-color .18s;display:block}
  .tc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
  .tc .ic{width:60px;height:60px;border-radius:50%;background:var(--surface-2);
    display:grid;place-items:center;margin:0 auto 15px;transition:background .18s}
  .tc:hover .ic{background:var(--amber-soft)}
  .tc .ic svg{width:26px;height:26px;stroke:var(--ink);fill:none;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
  .tc .tl{font-family:'Bricolage Grotesque';font-weight:700;font-size:15.5px;color:var(--ink);line-height:1.3}
  .tc .ts{font-size:12.5px;color:var(--dim);margin-top:6px}
  .tc .via{display:inline-block;margin-top:11px;font-size:11px;font-weight:600;color:var(--faint);
    border:1px solid var(--line);border-radius:999px;padding:3px 10px}

  /* ---------- holiday detail ---------- */
  .det-head{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:start;
    padding:26px 0 34px;border-bottom:1px solid var(--line)}
  .det-head h1{font-weight:700;font-size:clamp(28px,4.4vw,44px);line-height:1.08;margin:0 0 14px;max-width:24ch}
  .det-head .when{display:inline-flex;align-items:center;gap:10px;font-family:'Bricolage Grotesque';font-weight:700;
    font-size:15px;color:var(--amber-ink);background:var(--amber-soft);border:1px solid #a6f4c5;
    border-radius:10px;padding:9px 14px;margin-bottom:16px}
  .det-head p{font-size:17px;color:var(--body);max-width:62ch;margin:0}
  .daybig{text-align:center;background:var(--ink);color:#fff;border-radius:18px;padding:20px 22px;min-width:118px}
  .daybig .n{font-family:'Bricolage Grotesque';font-weight:700;font-size:44px;line-height:1;color:var(--amber)}
  .daybig .u{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
    color:rgba(255,255,255,.7);margin-top:7px}
  @media(max-width:700px){.det-head{grid-template-columns:1fr}.daybig{justify-self:start}}

  .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
    background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:30px 0 0}
  .fact{background:var(--bg);padding:17px 19px}
  .fact .k{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
  .fact .v{font-family:'Bricolage Grotesque';font-weight:500;font-size:15px;color:var(--ink);line-height:1.4}

  .inc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-top:26px}
  .inc h4{font-size:14px;font-weight:700;margin:0 0 10px}
  .inc ul{margin:0;padding-left:19px;font-size:14.5px;color:var(--body)}
  .inc li{margin-bottom:5px}
  .inc li:last-child{margin-bottom:0}

  /* usd strip */
  .usd{display:flex;gap:18px;align-items:center;background:var(--ink);border-radius:var(--r-lg);
    padding:26px 28px;margin:34px 0 0;color:#fff;flex-wrap:wrap}
  .usd .ic{width:46px;height:46px;border-radius:12px;background:rgba(18,183,106,.16);
    display:grid;place-items:center;flex:0 0 auto;font-family:'Bricolage Grotesque';font-weight:700;color:var(--amber);font-size:15px}
  .usd .tx{flex:1;min-width:220px}
  .usd h4{color:#fff;font-size:17px;margin:0 0 5px}
  .usd p{margin:0;font-size:14px;color:rgba(255,255,255,.72);max-width:64ch}
  .usd a{margin-left:auto;font-family:'Bricolage Grotesque';font-weight:700;font-size:14px;background:var(--amber);
    color:var(--ink);text-decoration:none;padding:12px 20px;border-radius:10px;white-space:nowrap}

  .backlink{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
    color:var(--dim);text-decoration:none;margin:34px 0 0}
  .backlink:hover{color:var(--ink)}

  /* redirect notice modal */
  .modal-bg{position:fixed;inset:0;background:rgba(11,20,15,.5);backdrop-filter:blur(3px);
    z-index:100;display:none;place-items:center;padding:24px}
  .modal-bg.on{display:grid}
  .modal{background:#fff;border-radius:20px;padding:30px;max-width:430px;width:100%;box-shadow:var(--shadow-lg)}
  .modal h3{font-size:20px;margin:0 0 10px}
  .modal p{font-size:14.5px;color:var(--body);margin:0 0 8px}
  .modal .part{display:flex;align-items:center;gap:10px;background:var(--surface);
    border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:16px 0;
    font-family:'Bricolage Grotesque';font-weight:700;color:var(--ink);font-size:15px;word-break:break-all}
  .modal .btns{display:flex;gap:10px;margin-top:18px}
  .modal .btns a,.modal .btns button{flex:1;text-align:center;font-family:'Bricolage Grotesque';font-weight:700;
    font-size:14.5px;padding:13px;border-radius:11px;text-decoration:none;cursor:pointer;border:none}
  .modal .go{background:var(--ink);color:#fff}
  .modal .cx{background:var(--surface);color:var(--body);border:1px solid var(--line)}


  /* ---------- who's going: style chips ---------- */
  .chips{display:flex;flex-wrap:wrap;gap:10px}
  .chip{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:'Bricolage Grotesque';
    font-weight:500;font-size:14.5px;color:var(--body);background:var(--bg);
    border:1px solid var(--line);border-radius:999px;padding:10px 18px;transition:all .16s}
  .chip svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
  .chip:hover{border-color:var(--line-2);color:var(--ink)}
  .chip.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
  .chipnote{font-size:13.5px;color:var(--dim);margin:14px 0 0}
  .chipnote b{color:var(--ink)}

  /* ---------- destination cards ---------- */
  .dgroup{font-family:'Bricolage Grotesque';font-weight:700;font-size:14px;color:var(--ink);
    display:flex;align-items:center;gap:10px;margin:26px 0 12px;text-transform:none}
  .dgroup span{font-family:'Inter';font-weight:500;font-size:12px;color:var(--dim);
    background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
  .dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
  .dcard{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
    padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;
    transition:transform .18s,box-shadow .18s}
  .dcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
  .dtop{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
  .dname{font-family:'Bricolage Grotesque';font-weight:700;font-size:16px;color:var(--ink);line-height:1.25;flex:1}
  .dhrs{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--teal);
    background:var(--teal-soft);border-radius:7px;padding:4px 9px;white-space:nowrap;flex:0 0 auto}
  .dwhy{font-size:13.5px;color:var(--dim);margin:0 0 15px;flex:1}
  .dbtns{display:flex;gap:8px}
  .dbtn{flex:1;text-align:center;font-family:'Bricolage Grotesque';font-weight:700;font-size:13px;
    text-decoration:none;padding:10px 12px;border-radius:10px;border:1px solid var(--line);
    color:var(--body);background:var(--surface);transition:all .16s;white-space:nowrap}
  .dbtn:hover{border-color:var(--line-2);color:var(--ink)}
  .dbtn.primary{background:var(--ink);border-color:var(--ink);color:#fff;flex:2}
  .dbtn.primary:hover{color:#fff;opacity:.9}
  .muted{color:var(--faint)}
  .tagsub{font-family:'Bricolage Grotesque';font-weight:500;font-size:clamp(17px,2.4vw,21px);color:var(--amber-ink);margin:0 0 16px}
  .pitchline{font-family:'Bricolage Grotesque';font-weight:700;font-size:18px;color:var(--amber-ink);
    margin:0 0 14px !important;max-width:48ch}

  /* ---------- flights row ---------- */
  .flightrow{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:var(--bg);
    border:1px solid var(--line);border-radius:var(--r);padding:20px 24px;margin-top:30px;
    box-shadow:var(--shadow)}
  .flightrow h4{font-family:'Bricolage Grotesque';font-size:16px;margin:0 0 4px}
  .flightrow p{margin:0;font-size:13.5px;color:var(--dim)}
  .flightrow a{margin-left:auto;font-family:'Bricolage Grotesque';font-weight:700;font-size:14px;
    background:var(--amber);color:var(--ink);text-decoration:none;padding:12px 20px;
    border-radius:10px;white-space:nowrap}
  @media(max-width:560px){.flightrow a{margin-left:0;width:100%;text-align:center}}


  /* ================= TRAVEL HUB ================= */
  .thero{position:relative;overflow:hidden;background:#0b140f;color:#fff;padding:0}
  .theroart{position:absolute;inset:0;z-index:0}
  .theroart svg{width:100%;height:100%;object-fit:cover}

  /* ---------------------------------------------------------------------------
     HERO MOSAIC — five columns of country photos drifting past each other.
     Ported from kite-holiday-planner/travel/holiday-planner-v2.html (.v2mos),
     renamed onto our .thero* family so it reads as part of this hero rather
     than as a foreign block.

     HOW THE LOOP IS SEAMLESS: each column holds the nine tiles TWICE and
     travels exactly -50%, so the moment it finishes it is showing the second
     copy in the position the first copy started at. Any other distance, or one
     copy of the tiles, and you get a visible jump. Do not change -50% without
     changing the duplication to match.

     Three durations across five columns (46s / 58s reversed / 52s) so the grid
     never resolves into a single sliding sheet.

     inset:-8% -2% bleeds the grid past the hero on all sides: the tiles are
     mid-drift at the top and bottom edges, and cropping them at the boundary is
     what stops the animation reading as a filmstrip.

     NO OPACITY ON THIS LAYER. It was .55, and that is what made the right-hand
     side look veiled however far the scrim fell off: opacity here is uniform, so
     the photos sat at 55% over a near-black background everywhere, and the
     gradient could only ever add to that. Legibility is the scrim's job alone
     now, which is the only way it can be heavy on the left and absent on the
     right.
     --------------------------------------------------------------------------- */
  .theromos{position:absolute;inset:-8% -2%;z-index:0;display:grid;
    grid-template-columns:repeat(5,1fr);gap:14px}
  .therocol{display:grid;gap:14px;align-content:start;will-change:transform;
    animation:thero-drift 46s linear infinite}
  .therocol:nth-child(even){animation-direction:reverse;animation-duration:58s}
  .therocol:nth-child(3){animation-duration:52s}
  .therocol img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px;display:block}
  @keyframes thero-drift{from{transform:translateY(0)}to{transform:translateY(-50%)}}
  /* 90deg — a straight left-to-right wipe, not the source's 105deg tilt.
     Opaque behind the copy, effectively gone by the right edge: .94 at 0% down to
     .01 at 100%. The 40% stop is where the copy column ends (.theroin-body is
     36rem, which is about 40% of a 1440px viewport), so the fall-off starts after
     the text rather than under it.
     .01 rather than 0 or `transparent`: an explicit low alpha keeps the same
     colour in the interpolation. Fading to `transparent` in sRGB drifts through
     grey on some engines, which shows as a washed band across the photos. */
  .theroscrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,
    rgba(4,20,12,.96) 0%,rgba(4,20,12,.92) 38%,rgba(4,20,12,.5) 60%,
    rgba(4,20,12,.14) 80%,rgba(4,20,12,.01) 100%)}
  /* TWO columns on a phone, not three. Three divided a 390px viewport into ~126px
     tiles against ~288px on a 1440px desktop, so the frames visibly shrank rather
     than just fitting differently; two puts them at ~196px. Fewer, larger frames
     also read as the same wall at a different crop, which three did not.
     The scrim goes vertical here because the copy is no longer in a left column. */
  @media(max-width:900px){
    .theromos{grid-template-columns:repeat(2,1fr)}
    .theroscrim{background:linear-gradient(180deg,rgba(4,20,12,.72),rgba(4,20,12,.93) 60%)}
  }
  @media(prefers-reduced-motion:reduce){.therocol{animation:none}}
  /* The accent on "Kite" in the hero title. */
  .thero h1 .kg{color:#32d583}
  .theroin{position:relative;z-index:2;padding:96px 24px 88px}
  .kicker.dark{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.2);color:#6ce9a6}
  /* Bigger, and tracked tighter to match. It was clamp(34,5.6vw,58) — sized for
     the old three-line headline — and one short line at that size looked lost in
     a 100svh hero. Still short of the source's 96px ceiling. */
  .thero h1{color:#fff;font-size:clamp(40px,6.6vw,76px);line-height:1.02;
    letter-spacing:-.03em;margin:0 0 20px;text-shadow:0 2px 30px rgba(0,0,0,.35)}
  .lede.light{color:rgba(255,255,255,.86);max-width:56ch;text-shadow:0 1px 14px rgba(0,0,0,.3)}
  .herobtns{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 30px}
  .cta-main{display:inline-flex;align-items:center;font-family:'Bricolage Grotesque';font-weight:700;font-size:15px;
    background:var(--amber);color:var(--ink);text-decoration:none;padding:14px 26px;border-radius:12px;
    transition:transform .16s,box-shadow .16s}
  .cta-main:hover{transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(18,183,106,.6)}
  .cta-ghost{display:inline-flex;align-items:center;font-family:'Bricolage Grotesque';font-weight:700;font-size:15px;
    background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);color:#fff;
    text-decoration:none;padding:14px 26px;border-radius:12px;transition:background .16s}
  .cta-ghost:hover{background:rgba(255,255,255,.18)}
  .herostats{display:flex;gap:26px;flex-wrap:wrap;font-size:13.5px;color:rgba(255,255,255,.72)}
  .herostats b{color:#fff;font-family:'Bricolage Grotesque';font-weight:700;font-size:16px;margin-right:5px}

  /* use case cards */
  .usecases{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:24px}
  .ucard{background:var(--bg);border:1px solid var(--line);border-radius:22px;overflow:hidden;
    text-decoration:none;box-shadow:var(--shadow);display:flex;flex-direction:column;
    transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s,border-color .2s}
  .ucard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
  .uart{aspect-ratio:16/7;overflow:hidden;background:var(--surface)}
  .uart svg{width:100%;height:100%;display:block}
  /* Photographs replaced the generated artwork on the two hub cards. Same box, so
     nothing around them moved. Sources live in content/planner-source (gitignored);
     these were cropped to 16:7 and encoded at 1200x525. */
  .uart img{width:100%;height:100%;object-fit:cover;display:block}
  .ubody{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
  .upill{align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--amber-ink);background:var(--amber-soft);border:1px solid #a6f4c5;
    border-radius:999px;padding:5px 12px;margin-bottom:13px}
  .upill.alt{color:#05603a;background:#ecfdf3;border-color:#a6f4c5}
  .ubody h3{font-family:'Bricolage Grotesque';font-weight:700;font-size:21px;margin:0 0 9px;color:var(--ink)}
  .ubody p{font-size:14.5px;color:var(--dim);margin:0 0 16px;flex:1}
  .umeta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
  .umeta span{font-size:11.5px;font-weight:600;color:var(--body);background:var(--surface);
    border:1px solid var(--line);border-radius:999px;padding:5px 11px}
  .ugo{font-family:'Bricolage Grotesque';font-weight:700;font-size:14px;color:var(--ink)}

  /* pay modules */
  .paygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
  .paycard{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--shadow)}
  .payhead{display:flex;align-items:center;gap:12px;margin-bottom:14px}
  .payic{width:40px;height:40px;border-radius:11px;background:var(--ink);color:var(--amber);
    display:grid;place-items:center;font-size:17px;flex:0 0 auto}
  .payic.qr{background:var(--teal-soft);color:var(--teal)}
  .payhead h4{font-family:'Bricolage Grotesque';font-weight:700;font-size:18px;margin:0}
  .paycard p{font-size:14.5px;color:var(--dim);margin:0 0 15px}
  .paylist{list-style:none;margin:0;padding:0}
  .paylist li{font-size:14px;color:var(--body);padding:8px 0 8px 24px;position:relative;
    border-top:1px solid var(--line)}
  .paylist li:first-child{border-top:none}
  .paylist li::before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:700}
  .paylist b{color:var(--ink);font-family:'Bricolage Grotesque'}
  .paynote{font-size:12.5px;color:var(--faint);margin:14px 0 0 !important}

  /* DCC education */
  .dcc{background:var(--bg);border:1px solid var(--line);border-radius:22px;padding:32px;box-shadow:var(--shadow)}
  .dcclabel{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-ink);margin:0 0 8px}
  .dcc h3{font-family:'Bricolage Grotesque';font-weight:700;font-size:clamp(21px,3vw,28px);margin:0 0 24px}
  .dccrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
  .dccbox{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;position:relative}
  .dccbox.good{background:var(--teal-soft);border-color:#a6f4c5}
  .dccnum{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--ink);
    color:#fff;font-family:'Bricolage Grotesque';font-weight:700;font-size:14px;margin-bottom:13px}
  .dccbox h4{font-family:'Bricolage Grotesque';font-weight:700;font-size:16.5px;margin:0 0 10px;line-height:1.3}
  .dccbox p{font-size:14px;color:var(--body);margin:0 0 10px}
  .dccbox p:last-child{margin-bottom:0}
  .dccbad{background:#ecfdf3;border-left:3px solid var(--coral);padding:11px 13px;border-radius:0 8px 8px 0;font-size:13.5px !important}
  .dccgood{background:rgba(255,255,255,.7);border-left:3px solid var(--teal);padding:11px 13px;border-radius:0 8px 8px 0;font-size:13.5px !important}

  /* conference cards */
  .confgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin-bottom:34px}
  .confcard{background:var(--bg);border:1px solid var(--line);border-radius:20px;overflow:hidden;
    text-decoration:none;box-shadow:var(--shadow);display:flex;flex-direction:column;
    transition:transform .2s,box-shadow .2s,border-color .2s}
  .confcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
  .confcard.feat{border-color:#6ce9a6;box-shadow:0 0 0 3px var(--amber-soft),var(--shadow)}
  .cfart{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface)}
  .cfart svg{width:100%;height:100%;display:block}
  /* A real photograph, where one has been supplied. Same box as the generated
     artwork it replaces, so nothing around it moves. See confPhoto(). */
  .cfphoto{width:100%;height:100%;object-fit:cover;display:block}
  .cftag{position:absolute;top:12px;left:12px;font-size:11px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.94);border-radius:999px;
    padding:5px 11px;box-shadow:0 2px 8px rgba(11,20,15,.16)}
  .cfkite{position:absolute;top:12px;right:12px;font-size:11px;font-weight:700;color:#fff;
    background:var(--ink);border-radius:999px;padding:5px 11px}
  .cfbody{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
  .cfdate{font-family:'Bricolage Grotesque';font-weight:700;font-size:13.5px;color:var(--amber-ink);margin-bottom:7px}
  .cfdate em{font-style:normal;color:var(--faint);font-weight:400}
  .cfbody h3{font-family:'Bricolage Grotesque';font-weight:700;font-size:19px;margin:0 0 6px;color:var(--ink);line-height:1.25}
  .cfloc{font-size:13.5px;color:var(--body);margin:0 0 10px}
  .cfnear{font-size:13px;color:var(--dim);margin:0 0 16px;flex:1}

  /* conference hero */
  .cfhero{position:relative;border-radius:24px;overflow:hidden;margin:20px 0 30px;min-height:280px;
    display:flex;align-items:flex-end}
  .cfheroart{position:absolute;inset:0}
  .cfheroart svg{width:100%;height:100%;object-fit:cover}
  .cfheroin{position:relative;z-index:2;padding:34px;width:100%;
    background:linear-gradient(0deg,rgba(11,20,15,.88),rgba(11,20,15,.25) 70%,transparent)}
  .cfherotag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink);background:var(--amber);border-radius:999px;padding:5px 12px;margin-bottom:14px}
  .cfhero h1{color:#fff;font-size:clamp(27px,4.4vw,44px);line-height:1.08;margin:0 0 10px}
  .cfherometa{color:rgba(255,255,255,.85);font-size:15.5px;margin:0;font-family:'Bricolage Grotesque';font-weight:500}
  .cfherometa em{font-style:normal;color:rgba(255,255,255,.6)}
  .cflead{font-size:18px;color:var(--body);max-width:70ch;margin:0 0 8px}
  .cfh3{font-family:'Bricolage Grotesque';font-weight:700;font-size:19px;margin:30px 0 10px}
  .cfbodytext{font-size:15.5px;color:var(--body);max-width:70ch;margin:0}
  .kv{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:12px}
  .kvrow{display:grid;grid-template-columns:190px 1fr;gap:16px;padding:14px 18px;border-top:1px solid var(--line);background:var(--bg)}
  .kvrow:first-child{border-top:none}
  .kvk{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
  .kvv{font-size:14.5px;color:var(--ink)}
  @media(max-width:600px){.kvrow{grid-template-columns:1fr;gap:5px}}

  .ticketrow{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:var(--bg);
    border:1px solid var(--line);border-radius:16px;padding:22px 26px;box-shadow:var(--shadow)}
  .ticketrow h4{font-family:'Bricolage Grotesque';font-size:17px;margin:0 0 5px}
  .ticketrow p{margin:0;font-size:14px;color:var(--dim);max-width:60ch}
  .ticketrow a{margin-left:auto;font-family:'Bricolage Grotesque';font-weight:700;font-size:14.5px;background:var(--ink);
    color:#fff;text-decoration:none;padding:13px 22px;border-radius:11px;white-space:nowrap}
  .ticketrow.alt a{background:var(--amber);color:var(--ink)}
  @media(max-width:600px){.ticketrow a{margin-left:0;width:100%;text-align:center}}


  /* ---- ticket offers ---- */
  .cfoffer{position:absolute;top:12px;right:12px;font-size:11px;font-weight:700;color:var(--ink);
    background:var(--amber);border-radius:999px;padding:5px 11px;box-shadow:0 2px 8px rgba(11,20,15,.18)}
  .cfoffer.end{background:var(--surface-2);color:var(--dim)}
  .offerbox{background:var(--bg);border:1px solid var(--line);border-left:4px solid var(--line-2);
    border-radius:14px;padding:22px 24px;margin-top:14px;box-shadow:var(--shadow)}
  .offerbox.live{border-left-color:var(--amber);background:linear-gradient(90deg,var(--amber-soft),var(--bg) 46%)}
  .offerbox.ended{border-left-color:var(--coral)}
  .offerbox.none{border-left-color:var(--line-2)}
  .offertop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
  .offerpill{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--dim)}
  .offerbox.live .offerpill{background:var(--amber);color:var(--ink)}
  .offerbox.ended .offerpill{background:var(--coral-soft);color:#05603a}
  .offertop h4{font-family:'Bricolage Grotesque';font-weight:700;font-size:17px;margin:0}
  .offerbox p{font-size:14.5px;color:var(--body);margin:0 0 12px;max-width:70ch}
  .offercode{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--ink);
    border-radius:11px;padding:13px 18px;margin:0 0 12px}
  .offercode .ocl{display:block;font-size:10.5px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:3px}
  .offercode b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:17px;color:var(--amber);letter-spacing:.04em}
  .offercode .ocby{font-size:12.5px;color:rgba(255,255,255,.62);margin-left:auto}
  .offerends{font-size:13.5px !important;color:var(--ink) !important}
  .offerends b{color:var(--amber-ink)}
  .offerchk{font-size:12px !important;color:var(--faint) !important;margin:0 !important}


  .offercode{flex-wrap:wrap}
  .occhips{display:flex;gap:8px;flex-wrap:wrap;width:100%;margin-top:12px;
    padding-top:12px;border-top:1px solid rgba(255,255,255,.14)}
  .occhips code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;font-weight:700;
    color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
    border-radius:7px;padding:5px 11px;letter-spacing:.02em}

  footer.ft{background:var(--ink);color:rgba(255,255,255,.62);padding:52px 0 40px;margin-top:80px;font-size:13px}
  footer.ft .fl{display:flex;gap:40px;flex-wrap:wrap;margin-bottom:28px}
  footer.ft h5{color:#fff;font-family:'Bricolage Grotesque';font-size:13px;margin:0 0 12px;letter-spacing:.03em}
  footer.ft a{color:rgba(255,255,255,.62);text-decoration:none;display:block;margin-bottom:7px}
  footer.ft a:hover{color:#fff}
  footer.ft .fine{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;line-height:1.7;
    font-size:11.5px;color:rgba(255,255,255,.42);max-width:92ch}

  .protobar{background:#0b140f;color:#fff;font-size:12.5px;padding:9px 0;text-align:center;
    font-family:'Bricolage Grotesque';letter-spacing:.02em}
  .protobar b{color:var(--amber)}
  @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}


/* ---------- header ----------
   FIXED, like the React nav. It was sticky while the "PROTOTYPE" strip was above it;
   with that gone, fixed is right — a transparent bar can only sit over the dark hero
   if it overlaps it, and overlapping is what makes the landing page's nav work.

   #app clears the bar and the hero pulls back up under it, so the hero is a true full
   viewport with the nav floating on top, while every other view still starts below. */
#site-header{position:fixed;inset:0 0 auto 0;z-index:60;background:transparent;
  border-bottom:1px solid transparent;transition:background .2s ease,border-color .2s ease}
#app{padding-top:64px}
/* EVERY COLOURED HERO PULLS BACK UP UNDER THE BAR, not just the hub's.
   #app's 64px top padding clears the fixed header. A hero that does not cancel it
   starts 64px down the page, and those 64px are #app's own white — so on any page with
   a coloured hero you get a white band across the top that looks exactly like a solid
   white nav bar, even though #site-header is transparent. That was the reported bug:
   the "white nav background" was never the nav.
   .thero had this from the start; .hero-planner (holiday + conference planners) and
   .hero-country (the nine country pages) did not.
   Their inner .wrap keeps its own top padding (96px and 104px), so the copy still
   clears the bar by 32-40px after the pull-up. */
.thero,.hero-planner,.hero-country{margin-top:-64px}
/* Scrolled states, mirroring nav.tsx exactly: transparent at the top, then frosted —
   kite-deep/40 over a dark section, background/60 over a light one. Both back off when
   a dropdown or the mobile menu is open, because those make the bar opaque white. */
#site-header.scrolled.on-dark:not(.shell-light):not(.menu-open){
  background:rgba(4,98,45,.4);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom-color:rgba(255,255,255,.1)}
#site-header.scrolled:not(.on-dark):not(.shell-light):not(.menu-open){
  background:rgba(252,253,252,.6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom-color:rgba(226,233,230,.5)}
/* White UI while a dark section is under the bar — links, logo and burger together,
   the same set nav.tsx switches via whiteUI. */
#site-header.on-dark:not(.shell-light):not(.menu-open) .nav-links a{color:rgba(255,255,255,.8)}
#site-header.on-dark:not(.shell-light):not(.menu-open) .nav-links a:hover{color:#fff}
#site-header.on-dark:not(.shell-light):not(.menu-open) .nav-burger{color:#fff}
#site-header.on-dark:not(.shell-light):not(.menu-open) .nav .nav-geo{color:rgba(255,255,255,.8)}
#site-header.on-dark:not(.shell-light):not(.menu-open) .nav .nav-geo:hover{color:#fff;background:rgba(255,255,255,.1)}
#site-header.on-dark:not(.shell-light):not(.menu-open) .brand-w{display:block}
#site-header.on-dark:not(.shell-light):not(.menu-open) .brand-d{display:none}
#site-header .nav{position:static;display:flex;align-items:center;gap:30px;height:64px;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0}
/* No underlines anywhere in the shell. The React nav carries no "no-underline" class
   at all — it relies on Tailwind's Preflight, which sets a{text-decoration:inherit}
   globally. A static page has no Preflight, so the browser default underline shows
   through on any link the shell does not override — which is what happened to the
   dropdown lists. One rule at the top of the scope rather than per-element. */
#site-header a{text-decoration:none}
#site-header .brand{display:flex;align-items:center;text-decoration:none}
#site-header .brand img{height:26px;width:auto}
/* This bar is ALWAYS a light surface, unlike the country pages' — which sit over a
   dark hero and start out transparent with the white mark showing. So the ink mark is
   the one that shows here; leaving the default would put a white logo on white. */
#site-header .brand-w{display:none}
#site-header .brand-d{display:block}
/* 18px, at every width. It was 26px, and a 20px-until-1280-then-26px version in between
   which was worse than either: THE WRAP CAPS AT 1200px, so past that the row keeps
   growing while the space it sits in does not. Widening the gap on wide screens is
   therefore the one thing that cannot help.
   Six labels and their carets are 425px of text, so the row is 515px here. */
#site-header .nav-links{display:none;gap:18px}
#site-header .nav-links a{color:#63746b;font-size:14px;font-weight:450;text-decoration:none;transition:color .15s}
#site-header .nav-links a:hover{color:#0b140f}
#site-header .nav-cta{margin-left:auto}
/* Country control. Scoped through .nav — (1,2,0) — because STYLE is injected after this
   stylesheet and its own `#site-header .nav-geo` colour, written for the card country
   pages' permanently dark bar, would otherwise win the tie and leave white on white.
   .shell-light there is (1,2,0) too and DOES win, which is correct: an open panel makes
   this bar white as well. */
#site-header .nav .nav-geo{color:#63746b;background:none}
#site-header .nav .nav-geo:hover{color:#0b140f;background:rgba(11,20,15,.05)}
#site-header .btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:500;line-height:1;text-decoration:none;background:#0bbc69;color:#fff;transition:background .15s}
#site-header .btn:hover{background:#039855}
/* The dropdown triggers are inline-FLEX, which is what puts the caret on the text's
   optical centre instead of its baseline. An inline <svg> with width and height but no
   display sits on the baseline, so the chevron rendered low against the label — the
   nine card country pages never showed it because their own stylesheet adds
   vertical-align:-1px to it, and nothing else did.
   Same construction as the React nav: flex, items-center, a 4px gap. The gap replaces
   the caret's own margin-left so the two cannot both apply. */
#site-header .nav-links a.mega-t{display:inline-flex;align-items:center;gap:4px}
#site-header .caret{width:13px;height:13px;margin-left:0;stroke:currentColor;fill:none;stroke-width:2;transition:transform .2s}
#site-header .mega-t[aria-expanded="true"] .caret{transform:rotate(180deg)}
/* burger */
#site-header .nav-burger{display:flex;align-items:center;justify-content:center;margin-left:auto;width:42px;height:42px;padding:0;border:0;background:none;color:#0b140f;cursor:pointer}
#site-header .nav-burger svg{width:26px;height:26px}
#site-header .nav-burger .ic-x{display:none}
#site-header.menu-open .nav-burger .ic-bars{display:none}
#site-header.menu-open .nav-burger .ic-x{display:block}
/* mobile menu */
#site-header .mobile-menu{display:none;position:absolute;left:0;right:0;top:64px;flex-direction:column;padding:8px 24px 40px;background:#fff;border-bottom:1px solid #e2e9e6;max-height:calc(100dvh - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch}
#site-header.menu-open{background:#fff;border-bottom-color:#e2e9e6}
#site-header.menu-open .mobile-menu{display:flex}
#site-header .mobile-menu a{color:#0b140f;font-size:16px;font-weight:500;padding:14px 0;border-bottom:1px solid #eef3f0;text-decoration:none}
#site-header .mobile-menu .mm-label{margin:0;padding:14px 0 6px;border-bottom:1px solid #eef3f0;color:#63746b;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
#site-header .mobile-menu a.mm-sub{padding-left:14px;font-size:15px;color:#3f5047}
#site-header .mobile-menu .mm-cat{margin:0;padding:12px 0 4px 14px;border-bottom:1px solid #eef3f0;color:#91a199;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
#site-header .mobile-menu a.mm-deep{padding-left:28px}
#site-header .mobile-menu .mm-sub.mm-off{display:block;padding:14px 0 14px 28px;border-bottom:1px solid #eef3f0;color:#91a199;font-size:15px}
#site-header .mobile-menu .btn{margin-top:14px;border-bottom:0;color:#fff}

/* ==================== MOBILE NAV, MATCHED TO components/layout/nav.tsx ====================
   Measured off the React nav rather than approximated. Everything here is scoped to
   #site-header and lives in BASE_CSS, which only the travel planner receives — the ten
   country pages style their own shell and are NOT touched by these rules.

   The React nav, for the record:
     bar            container, flex, h-16 (64px), items-center, justify-between
     logo           h-7 (28px)
     burger         h-10 w-10 (40px), rounded-lg, hover bg-foreground/5, md:hidden
     bar CTA        hidden md:block  ->  NO CTA in the mobile bar at all
     menu           fixed inset-0 h-[100svh] bg-background, pt-20 pb-8, overflow-y-auto
     row            border-b border-border/60, py-3.5, text-base, font-medium, fg/80
     group label    IDENTICAL to a row — not an eyebrow
     sub-row        border-b border-border/40, py-2.5, pl-6, text-sm, fg/70
     category       text-[11px], font-semibold, uppercase, tracking-wide, fg/40
     menu CTA       full width, Button default = h-11 (44px), rounded-full            */

/* 1. No CTA in the mobile bar. It was showing a 36px "Get the Kite app" pill beside the
   burger, which the landing page does not have and which crowds a 375px bar. The
   country pages already hid it below 900px; the planner never did. */
@media(max-width:900px){ #site-header .nav-cta{display:none} }

/* 2. Burger and logo to the React sizes, with the hover state it has and this did not. */
#site-header .brand img{height:28px}
#site-header .nav-burger{width:40px;height:40px;border-radius:8px;transition:background .15s}
#site-header .nav-burger:hover{background:rgba(11,20,15,.05)}
#site-header.on-dark:not(.shell-light):not(.menu-open) .nav-burger:hover{background:rgba(255,255,255,.1)}

/* 3. THE MENU IS A DROPDOWN UNDER THE BAR. Reverted, and here is why.
   It was briefly a full-screen overlay — position:fixed, inset:0, z-index:1, 100svh — to
   match the React nav. That broke the close button, and the reason is worth keeping:

   .mobile-menu is a CHILD of .wrap.nav, alongside the logo and the burger. Giving the
   PARENT z-index:2 does nothing to lift its other children; within .wrap.nav's stacking
   context a positioned child at z-index:1 paints above its non-positioned siblings. So
   the white overlay covered the logo and the burger. The X was there, display:block,
   painted underneath a full-screen white panel. "The close icon is missing."

   Making it a full-screen overlay correctly would mean moving .mobile-menu OUT of
   .wrap.nav in buildHeader so it is a SIBLING of the bar row — which is exactly how the
   React nav does it (menu z-30, header z-40, siblings). That is a markup change across
   every generated page for a layout the nine card-country pages do not use.

   So: the same dropdown those pages use, which is also what the earlier rule in this
   stylesheet already did. top:64px clears the bar, max-height keeps it on screen, and the
   bar is never covered because the menu starts below it. Nothing here to override. */

/* 4. Row metrics. The group label was a 12px uppercase eyebrow; in React it is just
   another row, same size and weight as the links around it. */
#site-header .mobile-menu a{padding:14px 0;font-size:16px;font-weight:500;color:rgba(11,20,15,.8);
  border-bottom:1px solid rgba(226,233,230,.6)}
#site-header .mobile-menu a:hover{color:#0b140f}
#site-header .mobile-menu .mm-label{margin:0;padding:14px 0;border-bottom:1px solid rgba(226,233,230,.6);
  color:rgba(11,20,15,.8);font-size:16px;font-weight:500;letter-spacing:normal;text-transform:none}
/* a.mm-sub, not just .mm-sub: an earlier rule is #site-header .mobile-menu a.mm-sub,
   which is (1,2,1) and outranks a class-only selector at (1,2,0). Matching its shape and
   winning on order is the fix; bumping !important would have hidden the reason. */
#site-header .mobile-menu a.mm-sub,
#site-header .mobile-menu .mm-sub{padding:10px 0 10px 24px;font-size:14px;color:rgba(11,20,15,.7);
  border-bottom:1px solid rgba(226,233,230,.4)}
#site-header .mobile-menu a.mm-deep{padding-left:24px}
#site-header .mobile-menu span.mm-sub.mm-off,
#site-header .mobile-menu .mm-sub.mm-off{padding:10px 0 10px 24px;font-size:14px;
  color:rgba(11,20,15,.4);border-bottom:1px solid rgba(226,233,230,.4)}
#site-header .mobile-menu .mm-cat{padding:12px 0 4px 16px;border-bottom:0;
  color:rgba(11,20,15,.4);font-size:11px;font-weight:600;letter-spacing:.02em}

/* 5. The coming-soon badge was WHITE ON WHITE here.
   The shared rule in STYLE is written for the country pages' dark menu
   (background rgba(255,255,255,.12), text rgba(255,255,255,.72)) and is unscoped, so it
   applied to this white one too. It only became visible now that Resources introduced a
   coming-soon item — Glossary — into the mobile menu. */
#site-header .mobile-menu .mega-soon{background:#e7f6ee;box-shadow:inset 0 0 0 1px #c6e8d6;
  color:#0a6b3a}

/* 6. Menu CTA: full width, sized by PADDING rather than a fixed height.
   Copied from the card-country pages, where this reads correctly: they set no height at
   all and let padding:13px 24px define it, which lands at about 45px. This previously set
   height:44px against #site-header .btn's height:36px and rendered thin, so the explicit
   height is gone rather than fought — height:auto is stated so the earlier 36px cannot
   apply. */
#site-header .mobile-menu .btn{display:flex;width:100%;height:auto;margin-top:14px;
  padding:13px 24px;font-size:15.5px;line-height:1.2;justify-content:center;
  border-bottom:0;color:#fff}

@media(min-width:901px){
/* IN FLOW, NOT ABSOLUTELY CENTRED — and this is the fix for "Help is touching
   Countries", after two attempts at it that were not.
   The row used to be position:absolute;left:50%, centred in the bar. Two consequences,
   both bad. It was out of flow, so when it ran out of room it slid UNDER the globe and
   the CTA instead of pushing them. And being centred, its half-width had to clear the
   WIDER of the two sides on both sides: a 118px logo against 303px of globe plus "Get
   the Kite app", so 185px of the bar was unusable by construction and six items never
   fitted.
   As a normal flex child it sits after the brand, exactly like the React nav's
   [data-nav-row], and .nav-geo's margin-left:auto still pushes the cluster right. It
   also makes the two navs match, which is what Jyothish was actually looking at: the
   landing page had the items beside the logo and the planner had them centred. */
#site-header .nav-links{display:flex;position:static;left:auto;top:auto;transform:none}
/* SPACED LIKE THE REACT NAV, which is the thing that was actually being compared.
   components/layout/nav.tsx puts three children in a justify-between flex row: brand,
   the data-nav-row element, and one wrapper holding the globe and the CTA. That splits
   the leftover space into two EQUAL gaps, so the row sits a third of the way in — closer
   to the logo than to the middle, because the right-hand cluster is wider than the logo.
   This bar has four children and no wrapper, and it put margin-left:auto on .nav-geo,
   which dumps ALL the slack on one side and jams the row up against the brand.
   Auto margins on both sides of the row reproduce justify-between exactly: the slack is
   halved either side of it. .nav-geo therefore must NOT keep its own auto margin, or the
   two autos split the free space between them and the row drifts back. */
#site-header .nav-links{margin-left:auto;margin-right:auto}
#site-header .nav-geo{margin-left:0}
#site-header .nav-burger{display:none}
}
/* THE BURGER HOLDS UNTIL 1040px, and this is the actual fix for "Help is touching
   Countries" rather than the gap tinkering above.
   .nav-links is ABSOLUTELY CENTRED in the bar (left:50%), which means it is out of flow:
   when it runs out of room it does not push the globe and the CTA aside, it slides under
   them. And because it is centred, its half-width has to clear the WIDER of the two
   sides on both sides — the logo is about 118px, the globe plus "Get the Kite app" plus
   the flex gap is about 303px, so 185px of the bar is unusable by construction.
   With six nav items there is not enough left below roughly 1040px at any gap. Measured
   against the real Inter metrics: at 18px the row is 515px and the tightest clearance
   above 1040px is 16px, at 1280px and beyond where the label shows and the wrap has
   stopped growing.
   A later rule with equal specificity, so it overrides the block above for this band
   only. The alternative was un-centring the row, which changes the look of every static
   page; this reuses the burger, which is already the answer at 900px. */
@media(min-width:901px) and (max-width:1039px){
#site-header .nav-links{display:none}
#site-header .nav-burger{display:flex}
#site-header .nav-geo{display:none}
#site-header .nav-cta{display:none}
}
/* ---------- footer ---------- */
.site-footer{background:#f2f7f5;border-top:1px solid #e2e9e6;color:#3f5047;padding:64px 0 0;margin-top:64px}
.site-footer a{text-decoration:none}
.site-footer .foot-top{display:flex;flex-direction:column;gap:48px}
.site-footer .foot-logo{height:32px;width:auto}
.site-footer .foot-tagline{margin:24px 0 0;font-weight:700;font-size:clamp(34px,4.4vw,52px);line-height:1.02;letter-spacing:-.03em;color:#0b140f}
.site-footer .foot-tagline span{display:block}
.site-footer .foot-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 40px}
/* font-family IS REQUIRED HERE. The travel planner sets h1,h2,h3,h4 to Bricolage
   globally, and this rule named every other property but not the family, so the
   footer's column titles inherited a display face while the links under them stayed
   Inter. The nine card country pages never showed it because their own stylesheet
   sets .foot-col h4{font-family:InterV}. Naming it here fixes the one surface that
   was wrong without touching the ones that were right. */
.site-footer .foot-col h4{margin:0 0 14px;font-family:'Inter',system-ui,sans-serif;
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#63746b}
.site-footer .foot-col a{display:block;margin-bottom:11px;color:#3f5047;font-size:15px}
.site-footer .foot-col a:hover{color:#027a48}
.site-footer .foot-col .foot-sub{color:#0b140f;font-weight:600;margin-top:8px}
.site-footer .foot-col p.foot-sub{margin:8px 0 11px;font-size:15px}
.site-footer .foot-sublist{display:flex;flex-direction:column}
.site-footer .foot-sublist a{padding-left:12px}
.site-footer .foot-sublist a::before{content:"\2022";margin-right:8px;color:#91a199}
.site-footer .foot-seclist{display:flex;flex-direction:column}
.site-footer .foot-seclist a{padding-left:12px}
.site-footer .foot-bot{display:flex;flex-direction:column;gap:20px;border-top:1px solid #e2e9e6;margin-top:56px;padding-top:28px}
.site-footer .foot-copy{flex-shrink:0;max-width:200px;margin:0;font-size:12px;color:#63746b}
.site-footer .foot-legal{display:flex;flex-direction:column;gap:12px;flex:1}
.site-footer .foot-legal p{margin:0;font-size:12px;line-height:1.6;color:#63746b}
.site-footer .foot-wordmark{display:block;width:100%;height:auto;margin-top:40px;opacity:.95;user-select:none}
@media(min-width:640px){.site-footer .foot-cols{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
@media(min-width:1024px){
.site-footer .foot-top{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:64px}
.site-footer .foot-cols{grid-template-columns:repeat(5,1fr);flex:1;min-width:0}
.site-footer .foot-bot{flex-direction:row;gap:44px}
}


/* eyebrows: plain uppercase text, not a filled pill.
   TWO classes, not one — .kicker is the hero eyebrow and .eyebrow is the section
   eyebrow ("Choose your trip", "Two ways to pay"). They were styled differently from
   each other AND from the site: .kicker was a 13px/600 filled pill, .eyebrow was
   13px/600 grey at .06em and not uppercase. Both now match the site's eyebrow:
   text-sm font-medium uppercase tracking-wider text-primary. */
.hero .kicker,.kicker,.eyebrow{display:inline-block;padding:0;border:0;background:none;border-radius:0;
  font-family:'Inter',system-ui,sans-serif;font-size:14px;font-weight:500;letter-spacing:.05em;
  text-transform:uppercase;color:#0bbc69;margin:0 0 12px}
.kicker.dark{background:none;border:0;color:#32d583}
/* breadcrumb on the dark hub hero; the prototype's own .crumb is grey and would vanish */
.crumb-dark{display:block;margin:0 0 18px;padding:0;font-size:13px;color:rgba(255,255,255,.6)}
.crumb-dark a{color:rgba(255,255,255,.6);text-decoration:none}
.crumb-dark a:hover{color:#fff}
.crumb-dark b{color:rgba(255,255,255,.9);font-weight:500}
.crumb-dark span{margin:0 7px;color:rgba(255,255,255,.35)}
/* headings: 600 at tracking-tight, matching font-display everywhere else */
h1,h2,h3,h4,.sec-h2,.cfh3,.dccbox h4{font-weight:600;letter-spacing:-.025em}
.hero h1{font-weight:600;letter-spacing:-.025em}
/* buttons: the pill from components/ui/button.tsx */
.cta-main,.cta-ghost,.dbtn,.ugo,.ticketrow a,.modal .btns a,.modal .btns button{
  border-radius:999px;font-weight:500;font-size:14px;
  font-family:'Inter',system-ui,-apple-system,sans-serif}
.cta-main,.cta-ghost{height:44px;padding:0 24px;justify-content:center}
.cta-main{background:#0bbc69;color:#fff}
.cta-main:hover{background:#039855}
.dbtn{height:36px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center}
/* subtitles: --faint fails AA on white; --dim is the site's muted-foreground */
.sub{color:var(--dim)}

/* --- hub hero: one full viewport, stats pinned to the foot ---
   Same shape as the /compare hero. 64px is the sticky header, which is in flow, so
   the hero only needs the remainder. svh not vh: on mobile, vh is the tallest the
   viewport ever gets, so the band would sit under the browser chrome. */
.thero{min-height:100svh;display:flex;flex-direction:column}
/* width:100% is load-bearing, and the whole reason the hero copy did not line up with
   the logo. .wrap carries margin:0 auto. Making .thero a COLUMN flex container turns
   those into CROSS-axis auto margins, and per flexbox an auto cross margin defeats
   align-self:stretch — so .theroin stopped filling the 1200px container, became
   shrink-to-fit (~756px at a 1252px viewport) and centred itself. The copy then sat
   ~222px right of the logo, but only above the 900px breakpoint, where max-width
   actually clamps. width:100% restores the stretch. */
.theroin{display:flex;flex-direction:column;align-items:flex-start;flex:1;width:100%;padding:0 24px}
.theroin-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:104px 0 40px}
/* Text block matches the landing page hero: left-aligned, capped at max-w-xl (36rem),
   vertically centred. Its left edge lands on the Kite logo because both sit in the same
   .wrap, so the alignment holds at every width.

   The art stays a FULL-BLEED backdrop rather than a right-hand column — the landing
   page does the same — and is anchored right so the subject sits on that side. For an
   inline <svg> that is preserveAspectRatio, not object-position: object-fit only applies
   to replaced elements, so the rule that was here did nothing. See THEME.markup. */
.theroin-body{max-width:36rem;width:100%;align-self:flex-start;margin-left:0}
@media(max-width:900px){.theroin-body{max-width:none}}
/* the proof strip becomes a band across the foot, like the homepage's trusted-by rail.
   The hairline runs the FULL viewport while the text stays on the container: a border
   on this element would stop at the .wrap edges. .thero clips overflow, so the 100vw
   rule cannot introduce a horizontal scrollbar. */
/* align-self:stretch + width:100% for the same reason .theroin needs it — the column
   is align-items:flex-start, so without this the band shrink-wraps to its content and
   sits left, and justify-content:center has no free space to distribute. */
.herostats{position:relative;align-self:stretch;width:100%;margin:0;padding:20px 0;
  justify-content:center;gap:34px;row-gap:10px}
.herostats::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:100vw;height:1px;background:rgba(255,255,255,.14)}

/* --- the two use-case cards --- */
/* eyebrow, not a filled chip — same rule as every other eyebrow on the page */
.upill,.upill.alt{align-self:flex-start;background:none;border:0;padding:0;margin:0 0 10px;
  font-family:'Inter',system-ui,sans-serif;font-size:14px;font-weight:500;letter-spacing:.05em;
  text-transform:uppercase;color:#0bbc69}
/* the "go" line was plain bold text and did not read as a control. Now the site's
   Button: rounded-full, primary, white. The whole card is still the link — this is
   the affordance, not a second target. */
.ugo{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;
  height:40px;margin-top:18px;padding:0 20px;border-radius:999px;background:#0bbc69;color:#fff;
  font-family:'Inter',system-ui,sans-serif;font-size:14px;font-weight:500;transition:background .15s}
.ucard:hover .ugo{background:#039855}

/* The two notes under these cards are informational, not body copy — issuer/bank
   disclosure and a market-availability caveat. Set as helper text and separated by a
   hairline so they read as a footnote to the card rather than its last claim.
   Also moved off --faint, which is 2.71:1 on white and fails AA, onto --dim at 4.95:1
   — the same fix the subtitles needed. */
.paynote{margin:18px 0 0 !important;padding-top:14px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.5;color:var(--dim)}

/* ================= COUNTRY PAGES ================= */
/* THE FLAG BACKDROP IS GONE. The hero is the planner's green fade now - the same
   seven stops .hero-planner uses on both hubs, so arriving from the hub no longer
   changes the surface under you.

   That flips the hero from dark to LIGHT, which is why every colour below moved with
   it: white copy on a near-black flag became #033619 on a pale fade, the ticker
   hairline went from white at 16% to --line, and data-nav-dark came off the header so
   the nav stops rendering itself white over a white hero.

   Deleted with it: the flag layer, the veil over it, the 16s wave keyframes and their
   reduced-motion guard. Nothing else used them. The moving flag survives on the React
   country pages at /countries/<slug>, where the shader version lives. */
.hero-country{position:relative;overflow:hidden;padding:0;text-align:center;
  color:#033619;background:
  linear-gradient(180deg,
    rgba(8,130,60,.20) 0%,
    rgba(8,130,60,.176) 18%,
    rgba(8,130,60,.138) 36%,
    rgba(8,130,60,.093) 54%,
    rgba(8,130,60,.049) 72%,
    rgba(8,130,60,.017) 88%,
    rgba(8,130,60,0) 100%),
  #ffffff}
/* 2. centred hero */
.hero-country .wrap{position:relative;z-index:2;display:flex;flex-direction:column;width:100%;padding:104px 24px 0}
.hero-country .heroin-body{display:flex;flex-direction:column;align-items:center;padding-bottom:40px}
.hero-country .backtop{align-self:center;margin:0 0 20px;color:rgba(3,54,25,.72)}
.hero-country .backtop:hover{color:#033619}
.hero-country .countryeyebrow{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px}
.hero-country .eyebrow{color:#033619}
.hero-country h1{max-width:26ch;margin:0 auto 14px;color:#033619;text-wrap:balance}
.hero-country p.tagsub{max-width:60ch;margin:0 auto 12px;color:rgba(3,54,25,.9)}
.hero-country p.lede{max-width:74ch;margin:0 auto;color:#033619}
/* 3. the ticker, same as the other planner heroes */
.hero-country .pills{position:relative;align-self:stretch;width:100%;justify-content:center;
  gap:34px;row-gap:10px;margin:0;padding:20px 0 22px}
.hero-country .pills::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:100vw;height:1px;background:var(--line)}
/* rgba(3,54,25,.75), not --dim. The ticker is 14px, so it needs 4.5:1, and --dim
   (#63746b) measures 3.76:1 against the darkest point of the fade above — #cee6d8,
   where rgba(8,130,60,.20) sits over white. This composites to #366249 for 5.31:1.
   (.hero-planner's ticker on the hubs has the same problem with --dim on the same
   gradient; that one predates this change and is untouched.) */
.hero-country .pill{background:none;border:0;padding:0;border-radius:0;font-size:14px;
  color:rgba(3,54,25,.75)}
.hero-country .pill b{color:var(--ink);font-weight:inherit}

/* 5. long-weekend cards, three to a row.
   The grid itself is defined in the mobile-fix block further down — this rule used a
   floor of one third of the CONTAINER, which three columns satisfy at any width, so it
   shipped three 113px cards to a phone. Kept as a comment because the mistake is easy
   to make again: a percentage floor in minmax() is not a minimum. */
.lwc.lwcard{display:flex;flex-direction:column;align-items:flex-start;gap:0;
  border-left:1px solid var(--line);padding:22px 20px 20px;text-align:left}
.lwc.lwcard.big{border-left-color:var(--line);background:linear-gradient(180deg,#ecfdf3,var(--bg) 46%)}
/* HIERARCHY, top to bottom: the flag, then how much time you get, then what the break
   is, then when, then the detail. The days-off count was a 34px numeral competing with
   the name for first read; as a green eyebrow it labels the card instead. */
.lwc.lwcard .tagbig{position:relative;top:auto;right:auto;bottom:auto;align-self:flex-start;
  overflow:hidden;isolation:isolate;
  margin:0 0 12px;padding:3px 9px;border-radius:999px;background:#04622d;color:#fff;
  font-family:'Inter',system-ui,sans-serif;font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase}
/* A glint that crosses the pill, then waits. Held at 55-100% of the cycle so it reads as
   an occasional highlight rather than a barber's pole -- constant motion next to the
   card's text would fight it for attention, and there is one of these per country.
   position:relative (not static) so ::after has this pill as its containing block; the
   prototype's absolute top/right are still cancelled, so it stays in flow. */
.lwc.lwcard .tagbig::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.5) 50%,transparent 75%);
  transform:translateX(-100%);animation:tagshimmer 3.6s ease-in-out infinite}
@keyframes tagshimmer{
  0%{transform:translateX(-100%)}
  55%,100%{transform:translateX(100%)}
}
@media(prefers-reduced-motion:reduce){.lwc.lwcard .tagbig::after{animation:none;opacity:0}}
.lwdays{font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:500;
  letter-spacing:.05em;text-transform:uppercase;color:#0bbc69;margin-bottom:8px}
.lwc.lwcard .t{font-family:'Bricolage Grotesque';font-weight:600;font-size:19px;
  line-height:1.25;letter-spacing:-.02em;color:var(--ink);margin:0 0 6px}
.lwc.lwcard .dr{min-width:0;margin:0 0 10px;font-size:14px;font-weight:400;color:var(--dim)}
.lwc.lwcard .d{margin:0;font-size:13.5px;line-height:1.5;color:var(--dim)}
.lwc.lwcard .bridge{display:block;margin-top:14px}

/* more air above "Tap a holiday" — the ticker band sits directly on top of it */
.hero-country ~ .blk{padding-top:76px}

/* --- FULL CALENDAR: month cards --- */
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;
  margin:36px 0 0;text-align:left}
.mcard{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.mcard h3{margin:0 0 14px;font-size:15px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--dim)}
.mcard.empty{background:var(--surface);border-style:dashed}
.mnone{margin:0;font-size:14px;color:var(--faint)}
.mlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.mlist li{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:baseline;
  position:relative;padding-left:14px}
/* state as a marker, not a repeated word */
.mlist li::before{content:"";position:absolute;left:0;top:6px;width:8px;height:8px;
  border-radius:50%;background:var(--line-2)}
.mlist li.pub::before{background:#12b76a}
.mlist li.lw::before{background:#027a48;box-shadow:0 0 0 3px #d1fadf}
.mlist li.fes::before{background:var(--bg);box-shadow:inset 0 0 0 2px #027a48}
.mday{font-family:'Bricolage Grotesque';font-weight:600;font-size:17px;color:var(--ink);
  line-height:1.1;font-variant-numeric:tabular-nums}
.mday em{display:block;font-style:normal;font-family:'Inter',system-ui,sans-serif;
  font-size:11px;font-weight:400;color:var(--faint);margin-top:2px}
.mnm{font-size:14.5px;line-height:1.4;color:var(--body)}
.mkey{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;
  margin:24px 0 0;font-size:12.5px;color:var(--dim)}
.mkey .k{width:9px;height:9px;border-radius:50%;margin-left:16px}
.mkey .k:first-child{margin-left:0}
.mkey .k.lw{background:#027a48;box-shadow:0 0 0 3px #d1fadf}
.mkey .k.pub{background:#12b76a}
.mkey .k.fes{background:var(--bg);box-shadow:inset 0 0 0 2px #027a48}

/* ==================== LONG-WEEKEND DETAIL PAGE ==================== */
/* back button sits above the title, so it needs top margin removed and bottom added */
.det-head{padding-top:8px}
.backtop+.det-head,.wrap>.backtop{margin-top:22px}

/* the holidays, now under the title rather than crushed into a fact cell.
   Bulletless: each line already starts with a proper noun and ends with a bracketed
   date, so a bullet adds a second left edge for no gain. The green rule does the job of
   grouping them. */
.hlist{list-style:none;margin:16px 0 0;padding:0 0 0 15px;border-left:2px solid #a6f4c5;
  display:flex;flex-direction:column;gap:7px;max-width:62ch}
.hlist li{font-size:15px;line-height:1.45;color:var(--body)}

/* Thailand's title is 46 characters ("King's Birthday, Asarnha Bucha and Khao Phansa").
   Left unbounded it collides with the days numeral in this 1fr/auto grid, so the
   measure is capped and the two columns given real space between them. */
.det-head{gap:40px}
.det-head h1{max-width:26ch}
.detdesc{max-width:62ch}

/* two facts, not three: keep them honest widths rather than letting auto-fit stretch
   each to half the page */
.facts.facts2{grid-template-columns:repeat(auto-fit,minmax(190px,320px));justify-content:start}

/* "Before you book" reuses the kite-50 panel from "Know before you tap" so the planner
   has one voice for advisory content. Tips, not rules: no numerals. */
.dcc.dcctips{padding:34px 34px 30px;margin:0 0 28px}
.dcc.dcctips h3{font-size:clamp(21px,2.6vw,27px);margin:0 0 20px}
.dcctiplist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
/* divider above each tip only -- a border under the last one closes the panel off and
   reads as the end of the section rather than the end of a tip (same call as .dccrule) */
.dcctiplist li{position:relative;padding:14px 0 14px 26px;border-top:1px solid #c9ead9;
  font-size:15.5px;line-height:1.55;color:var(--body)}
.dcctiplist li:first-child{border-top:0;padding-top:0}
.dcctiplist li:last-child{padding-bottom:0}
/* a check, not a bullet: these are things to do, and the tick reads as advice rather
   than as another list of features */
.dcctiplist li::before{content:"";position:absolute;left:2px;top:19px;width:9px;height:5px;
  border-left:1.8px solid #027a48;border-bottom:1.8px solid #027a48;
  transform:rotate(-45deg)}
.dcctiplist li:first-child::before{top:5px}

/* --- detail head: one centred column ---------------------------------------
   With the days-off tile gone there is no second column, so the 1fr/auto grid
   collapses to one and the whole block centres, matching every other travel-planner
   page. */
/* 2. the rule under the hero goes -- with the block centred it read as an underline
   for the title rather than a section boundary. */
.det-head{display:block;text-align:center;padding:26px 0 30px;border-bottom:0}
/* 1. the date was a bordered amber-green pill, which read as a status badge on a page
   where nothing about the date is a status. Now a plain eyebrow, same as the rest of
   the planner. */
.det-head .when{display:block;background:none;border:0;padding:0;border-radius:0;
  font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:500;
  letter-spacing:.05em;text-transform:uppercase;color:#0bbc69;margin:0 0 10px}
/* 3. title centred; subtitle and body given a wider measure now that nothing sits
   beside them. 30ch on the h1 still breaks Thailand's 51-character title onto two
   lines rather than letting it run the full container width. */
.det-head h1{max-width:30ch;margin-left:auto;margin-right:auto}
.det-head .pitchline{max-width:72ch;margin-left:auto;margin-right:auto}
.det-head .detdesc{max-width:76ch;margin-left:auto;margin-right:auto}
/* the holiday list loses its left rule -- a left edge inside centred content reads as
   a mistake. Centred, it needs no marker to group it. */
.hlist{border-left:0;padding-left:0;align-items:center;text-align:center;
  margin-left:auto;margin-right:auto}

/* 4. two facts, two columns, filling the width.
   The blank third cell was self-inflicted: .facts paints its 1px gaps by showing a
   --line background THROUGH the grid, so with auto-fit and justify-content:start the
   leftover track showed that background as an empty bordered cell. Two explicit equal
   columns leave no leftover. */
.facts.facts2{grid-template-columns:1fr 1fr;justify-content:stretch;text-align:center}

/* --- the merged "where to go" section ------------------------------------- */
.dsthead{text-align:center;max-width:62ch;margin:0 auto}
.chips{justify-content:center}
.chipnote{text-align:center}
/* 6. Phosphor icons are FILLED paths on a 256 viewBox. The prototype's chip rule set
   fill:none with a stroke, which turns a filled glyph into a hollow outline -- the same
   trap the trip and stay icons hit. */
.chip svg{width:17px;height:17px;fill:currentColor;stroke:none;stroke-width:0}
/* 5. selected pill and primary CTA in brand green, not near-black. --ink reads as a
   neutral "pressed" state; this is a choice the page is built around, so it should look
   like the brand. #027a48 on white is 4.6:1, and white on #027a48 is 5.4:1. */
.chip.on{background:#0bbc69;border-color:#0bbc69;color:#fff}
.chip.on svg{color:#fff}
.dbtn.primary{background:#0bbc69;border-color:#0bbc69;color:#fff}
.dbtn.primary:hover{background:#039855;border-color:#039855}
/* the hours badge on each destination card, to match */
/* the hours badge keeps the prototype's own accent; it sits on a light-green
   surface where --primary would be about 2.3:1 and effectively vanish. */
.dhrs{color:var(--teal);background:var(--teal-soft)}

/* ==================== MOBILE + CTA COLOUR FIXES ====================
   Found by auditing the generated CSS rather than by resizing a window. */

/* 1. "Tap a holiday" cards were unusable on a phone.
   The floor was min(100%,(100% - 36px)/3) — a THIRD OF THE CONTAINER. That is not a
   minimum in any useful sense: three columns satisfy it at every width, so a 375px
   phone got three 113px cards. The floor has to be absolute for auto-fit to have
   anything to break against.
   max(280px, a third) keeps both behaviours: on a wide container the third wins and
   caps the row at three; under about 900px the 280px wins and the row drops to two,
   then one. min(100%, ...) stops the 280px overflowing a container narrower than that.
   auto-fit still collapses empty tracks, so Vietnam's two breaks stay two wide cards. */
.lw-list{display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,max(280px,(100% - 36px)/3)),1fr))}

/* 2. (Nothing here. The country tiles are React — components/sections/country-tiles.tsx
   — and were never this stylesheet's business; the note that used to sit here pointed at
   public/countries/index.html, which no longer exists.) */

/* 3. Full-bleed dividers use width:100vw, which is wider than the page whenever a
   vertical scrollbar is present — that is a horizontal scrollbar on desktop and a
   pannable page on some mobile browsers. .hero-country already clipped its own;
   these two did not. */
.hero-planner{overflow:hidden}
.herostats{overflow:hidden}

/* 4. Dark text on a green button. Four rules still paired --amber (#12b76a) with --ink:
   the flight-search CTA, the USD strip CTA, and the conference hero and offer tags.
   Now white on #0bbc69 like every other CTA on the planner.
   WORTH KNOWING: these four were the only green surfaces that PASSED contrast — ink on
   #12b76a is 7.14:1, white on #0bbc69 is 2.50:1. This trades measured contrast for
   consistency with the brand green, which is the call Jyothish already made for the
   rest of the site. If --primary is ever darkened, these follow it. */
.flightrow a,.usd a{background:#0bbc69;color:#fff}
.flightrow a:hover,.usd a:hover{background:#039855}
.cfherotag,.cfoffer{background:#0bbc69;color:#fff}

/* 7. air above "Before you book" -- it follows a dense grid of destination cards and
   was butting straight up against them. */
.dcc.dcctips{margin:52px 0 28px}

/* 4. every section below the hero is centred */
.hero-country ~ .blk .eyebrow,.hero-country ~ .blk .sec-h2,.hero-country ~ .blk .sub,
.hero-country ~ .band .eyebrow,.hero-country ~ .band .sec-h2,.hero-country ~ .band .sub,
.hero-country ~ section .eyebrow,.hero-country ~ section .sec-h2,.hero-country ~ section .sub{
  text-align:center}
.hero-country ~ .blk .eyebrow,.hero-country ~ .band .eyebrow,.hero-country ~ section .eyebrow{display:block}
.hero-country ~ .blk .sec-h2,.hero-country ~ .blk .sub,
.hero-country ~ .band .sec-h2,.hero-country ~ .band .sub,
.hero-country ~ section .sec-h2,.hero-country ~ section .sub{margin-left:auto;margin-right:auto}
.hero-country ~ .blk .sub,.hero-country ~ .band .sub,.hero-country ~ section .sub{max-width:62ch}

/* --- HOLIDAY PLANNER hero ---
   #08823C at 20%, fading to nothing over white.

   SMOOTHNESS: six stops on an ease-out curve rather than two. A plain two-stop fade
   from a saturated green bands visibly, because the eye is most sensitive to change
   in the lighter half where a linear ramp moves fastest. The extra stops flatten that.
   The previous version also HELD the green to 55% and then dropped, which is the hard
   edge that was showing.

   THE COPY IS DARK NOW, and has to be: at 20% the darkest point of the hero is #cee6d8,
   where white text measures 1.32:1. Dark text was not a style choice here.
   kite-700 and --dim fail too (4.11 and 3.76), so the eyebrow takes kite-800 and the
   breadcrumb takes --body. */
.hero-planner{padding:0;text-align:center;background:
  linear-gradient(180deg,
    rgba(8,130,60,.20) 0%,
    rgba(8,130,60,.176) 18%,
    rgba(8,130,60,.138) 36%,
    rgba(8,130,60,.093) 54%,
    rgba(8,130,60,.049) 72%,
    rgba(8,130,60,.017) 88%,
    rgba(8,130,60,0) 100%),
  #ffffff}
.hero-planner .wrap{display:flex;flex-direction:column;width:100%;padding:96px 24px 0}
.hero-planner .heroin-body{display:flex;flex-direction:column;align-items:center;padding-bottom:44px}
.hero-planner .crumb-planner{align-self:center;margin:0 0 18px;padding:0;font-size:13px;color:#033619}
.hero-planner .crumb-planner a{color:#033619;opacity:.75;text-decoration:none}
.hero-planner .crumb-planner a:hover{opacity:1}
.hero-planner .crumb-planner b{color:#033619;font-weight:500}
.hero-planner .crumb-planner span{margin:0 7px;color:var(--line-2)}
.hero-planner .kicker{color:#033619}
/* Two lines for the title, three for the subtitle — both were capped tighter (20ch and
   56ch) than the copy needs, so they broke to three and four. */
.hero-planner h1{max-width:30ch;margin:0 auto 18px;color:#033619;text-wrap:balance}
.hero-planner p.lede{max-width:78ch;margin:0 auto;color:#033619;text-wrap:pretty}
/* the conference hero carries a .tagsub between the h1 and the lede; the holiday one
   does not, so it needs the same colour and measure applied explicitly */
.hero-planner p.tagsub{max-width:60ch;margin:0 auto 12px;color:#033619;opacity:.85}
/* the ticker sits at the foot, where the wash has faded out entirely */
.hero-planner .pills{position:relative;justify-content:center;gap:34px;row-gap:10px;
  margin:0;padding:20px 0 24px}
.hero-planner .pills::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:100vw;height:1px;background:var(--line)}
.hero-planner .pill{background:none;border:0;padding:0;border-radius:0;font-size:14px;color:var(--dim)}
/* one weight across the ticker — the numerals were 600 against 500 labels */
.hero-planner .pill b{color:var(--ink);font-weight:inherit}

/* --- "Why Kite for travel" icon tiles ---
   The same soft-accent tile as the pay cards on the hub, so the two icon treatments on
   the site match. Replaces an inline-styled numeral. */
.tc .ic.tripic{width:44px;height:44px;margin:0 0 14px;border-radius:12px;background:#ecfdf3;
  color:#027a48;display:grid;place-items:center}
/* fill, not stroke. The prototype's card icons are line drawings, so .tc .ic svg sets
   fill:none with a 1.7px stroke — applied to a Phosphor regular icon, which is a SOLID
   path, that renders the outline of a filled shape and looks broken. (0,4,0) beats the
   prototype's (0,3,0). */
.tc .ic.tripic svg{width:24px;height:24px;display:block;fill:currentColor;stroke:none}
/* the tile keeps its colour on hover; the prototype swaps .tc .ic to amber-soft */
.tc:hover .ic.tripic{background:#d1fadf}

/* --- conference list: month heading + one pill per surface --- */
.mlab.mlab-month{gap:16px;font-family:'Bricolage Grotesque';font-size:20px;font-weight:600;
  letter-spacing:-.02em;text-transform:none;color:var(--ink);margin:44px 0 18px}
.mlab.mlab-month::after{order:2}
.mlab-month .mcount{order:3;flex:0 0 auto;font-family:'Inter',system-ui,sans-serif;font-size:13px;
  font-weight:400;letter-spacing:0;color:var(--dim)}
/* the offer label now sits in the card body, so it is static rather than pinned to the
   artwork, and it reads as a line of fact next to the date */
.cfmeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cfbody .cfoffer{position:static;top:auto;right:auto;left:auto;flex:0 0 auto;
  padding:2px 8px;border-radius:999px;background:#ecfdf3;color:#027a48;
  font-family:'Inter',system-ui,sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.02em;text-transform:none;box-shadow:none}
.cfbody .cfoffer.end{background:var(--surface-2);color:var(--dim)}

/* --- conference detail: back button, widths, step + CTA colours --- */
/* a back control instead of a crumb, per Jyothish */
.backtop{display:inline-flex;align-items:center;gap:7px;margin:26px 0 0;font-size:14px;
  font-weight:500;color:var(--dim);text-decoration:none;transition:color .15s}
.backtop:hover{color:var(--ink)}
.backtop svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* copy runs the full container; it was capped at 70ch, about half the width available */
.cflead,.cfbodytext{max-width:none}
/* CTA colours. Both ticket buttons were off the system: the primary was --ink (near
   black) and the .alt was the accent with DARK text on it. components/ui/button.tsx is
   primary green with white text, so that is what both use now. */
.ticketrow a,.ticketrow.alt a{display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 24px;background:#0bbc69;color:#fff}
.ticketrow a:hover,.ticketrow.alt a:hover{background:#039855}
/* the live-offer accents follow the same rule: white on primary, not ink on accent */
.offerbox.live .offerpill{background:#0bbc69;color:#fff}
.offerbox.live{border-left-color:#0bbc69}

/* --- ticket offers --- */
/* 4. no left rail. The 4px border was doing the same job as the gradient and made the
   box read as a callout bar; the gradient stays. */
.offerbox{border-left:1px solid var(--line)}
.offerbox.live{border-left-color:var(--line)}
.offerbox.ended,.offerbox.none{border-left-color:var(--line)}
/* 5. a live state should look live */
.offerbox.live .offerpill{display:inline-flex;align-items:center;gap:7px;background:#0bbc69;color:#fff}
.livedot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:livepulse 1.8s ease-out infinite}
@keyframes livepulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}
  70%{box-shadow:0 0 0 6px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
@media(prefers-reduced-motion:reduce){.livedot{animation:none}}
/* the freshness note now sits below the box, centred, and reads as a caption for it */
.offerchk{margin:10px auto 0 !important;max-width:70ch;text-align:center;color:var(--dim) !important}

/* the code slab: green rather than a black block in the middle of a light page */
.offercode{background:#05603a;align-items:center}
.offercode .ocwrap>div{display:flex;flex-direction:column}
.offercode b{color:#a6f4c5}
.offercode .ocl{color:rgba(255,255,255,.6)}
.offercode .ocby{color:rgba(255,255,255,.66)}
/* a real button, so it works by keyboard and by tap — the point of it on mobile */
/* icon only, no container, sitting right beside the code */
.ocwrap{display:flex;align-items:center;gap:10px}
.occopy{display:inline-flex;align-items:center;justify-content:center;padding:4px;margin:0;
  border:0;border-radius:6px;background:none;color:rgba(255,255,255,.6);cursor:pointer;
  transition:color .15s}
.occopy:hover{color:#fff}
.occopy svg{width:18px;height:18px;fill:currentColor;display:block}
.occopy.copied{color:#6ce9a6}
/* the .ocby credit no longer needs to claim the free space */
.offercode .ocby{margin-left:0}
/* the freshness note on one line where there is room for it */
@media(min-width:900px){.offerchk{max-width:none !important;white-space:nowrap}}

/* Phosphor icons in the stay cards. Same fill-not-stroke override the trip cards need,
   because .tc .ic svg is written for line drawings. */
.tc .ic.stayic svg{width:26px;height:26px;display:block;fill:currentColor;stroke:none}
.tc .ic.stayic{background:#ecfdf3;color:#027a48}
.tc:hover .ic.stayic{background:#d1fadf}

/* breathing room before the closing card */

/* --- the partner hand-off dialog --- */
.modal .part{display:flex;align-items:center;justify-content:center;gap:14px;padding:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;margin:14px 0 12px}
.phand-kite{height:24px;width:auto;display:block}
.phand-arrow{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:var(--dim);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.phand-logo{width:22px;height:22px;flex:0 0 auto;border-radius:5px;object-fit:contain}
.phand-to{display:flex;flex-direction:column;gap:1px;font-family:'Bricolage Grotesque';
  font-weight:600;font-size:15px;line-height:1.25;color:var(--ink);text-align:left}
.phand-sub{font-family:'Inter',system-ui,sans-serif;font-size:12.5px;font-weight:400;
  color:var(--dim)}
#mcount{margin-left:7px;font-variant-numeric:tabular-nums;opacity:.75}
.modal .btns{align-items:center}
.modal .btns a,.modal .btns button{flex:1;padding:0 22px;height:44px;
  display:inline-flex;align-items:center;justify-content:center}
/* The confirm button doubles as the progress indicator: a kite-100 track with a
   kite-500 fill sweeping across it as the countdown runs.
   ONE label, in #033619, readable on both — 11.94:1 on the track and 5.18:1 on the
   fill. kite-500 is the darkest fill that clears 4.5:1 with this text; kite-600 drops
   to about 4.0, which is why the fill is not darker. */
.modal .go{position:relative;overflow:hidden;background:#d1fadf;color:#033619}
.modal .go .gofill{position:absolute;left:0;top:0;bottom:0;width:0;background:#12b76a;
  border-radius:inherit;pointer-events:none}
.modal .go .golabel{position:relative;z-index:1;white-space:nowrap}
.modal .go:hover{background:#a6f4c5}
.modal .cx{background:var(--bg);color:var(--body);border:1px solid var(--line)}
.modal .cx:hover{background:var(--surface)}

/* --- country cards --- */
/* Two rules lived here, styling the holiday-break chip and the image inside the
   card's .art wrapper. Both elements are gone: the country card is now the
   photograph itself with the label over it, the chip was removed as not relevant,
   and there is no .art wrapper any more. See .cc in content/travel-planner.html.

   Worth remembering WHY this was the hard one to delete. These are BASE_CSS, so
   every shell build re-injects them into the prototype — removing them from
   content/travel-planner.html looked like it worked and then silently came back
   on the next build. Overrides for prototype markup belong next to the markup
   unless they genuinely have to win the cascade.

   (And no backticks in here: this comment is inside a JS template literal.) */

/* --- the "Where are you based?" section is centred --- */
/* .eyebrow is display:inline-block, so text-align on the element only aligns text
   INSIDE the box — it does not move the box. That is why the eyebrow stayed left while
   the heading centred. display:block is what actually centres it. */
.blk-centred .eyebrow{display:block;text-align:center}
.blk-centred .sec-h2,.blk-centred .sub{text-align:center}
.blk-centred .sec-h2,.blk-centred .sub{margin-left:auto;margin-right:auto}
.blk-centred .sub{max-width:60ch}

/* --- subtitles move off the display face ---
   Audited every class on Bricolage: headings, numerals and button labels keep it, which
   is how font-display is used on the site. These four are running text and should not
   have had it — .sub is the section subtitle, .tagsub and .cfherometa are hero
   subtitles on the holiday and conference views, .pitchline is body copy. */
.sub,.tagsub,.pitchline,.cfherometa{font-family:'Inter',system-ui,-apple-system,sans-serif}

/* --- closing card, matching components/sections/cta.tsx ---
   Same gradient (kite-500 -> kite-700), same radial highlight from the top edge, same
   2.5rem radius and centred white text the landing page and every product page close
   on. Overrides the prototype's dark .usd strip.
   .usd a is (0,2,0), so the button needs .usd a.usdcta to win. */
/* margin-top here, NOT in a separate .usd rule earlier in the sheet: this rule sets
   margin and comes later, so it was overriding the spacing every time. */
.usd{display:block;position:relative;overflow:hidden;border:0;margin:56px 0 0;text-align:center;
  background:linear-gradient(to bottom right,#12b76a,#027a48);border-radius:40px;padding:60px 32px 64px}
.usd::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 120% at 50% 0%,rgba(255,255,255,.25),transparent 70%)}
/* The cap moves off the wrapper and onto the HEADING only, which is how the site's
   own CTA does it: the h2 is max-w-xl there and the body carries no width limit at all
   (it is even sm:whitespace-nowrap). A 640px wrapper was constraining both, so the
   body wrapped far earlier than it needed to. */
.usdin{position:relative;z-index:1;max-width:none;margin:0 auto}
.usd h2{max-width:640px;margin:0 auto;color:#fff;font-size:clamp(30px,4.4vw,48px);
  line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
/* One line from 1024px up. Scoped to a breakpoint for the same reason the site's own
   CTA scopes its nowrap to sm: below it the heading has to be free to wrap or it runs
   off the card. The cap comes down from 48px to 44px because at 48 the 41-character
   line needs ~1010px against 1088px of card — too close to trust across fonts and
   platforms. 44px needs ~930px, which clears comfortably at every width in range. */
@media(min-width:1024px){
.usd h2{max-width:none;white-space:nowrap;font-size:clamp(30px,3.7vw,44px)}
}
.usd p{margin:20px auto 0;max-width:880px;font-size:18px;line-height:1.6;color:rgba(255,255,255,.85)}
.usd p.usdnote{margin-top:14px;max-width:880px;font-size:16px;color:rgba(255,255,255,.72)}
/* The closing CTA is the store badges plus the QR, matching the card country pages
   and the React <DownloadRow />. It was a single white "Download Kite" pill.

   THE RESETS COME FIRST AND ARE NOT OPTIONAL. Two earlier rules style every anchor
   inside .usd as a solid pill - .usd a{background:var(--amber);padding:12px 20px;
   border-radius:10px} and .flightrow a,.usd a{background:#0bbc69} - so without
   these the badge artwork would sit on green rounded rectangles with padding.

   The QR magnifies from bottom CENTRE rather than the card pages' bottom left,
   because this row is centred; scaling 3.3x from the left edge would throw it off
   to one side. It is hidden below 700px, where you cannot scan the screen you are
   holding - same rule the country pages use. */
.usd .dlwrap{display:flex;align-items:center;justify-content:center;gap:12px;
  flex-wrap:wrap;margin:32px 0 0}
.usd .dlwrap a.dlbadge{margin:0;padding:0;height:auto;background:none;border-radius:0;
  box-shadow:none;display:inline-block;transition:transform .2s ease}
.usd .dlwrap a.dlbadge:hover{background:none;transform:scale(1.03)}
.usd .dlbadge img{height:52px;width:auto;display:block}
.usd .dlqr{height:52px;width:52px;cursor:pointer;transition:transform .3s ease;
  transform-origin:bottom center}
.usd .dlqr:hover{transform:scale(3.3);position:relative;z-index:60;
  filter:drop-shadow(0 20px 45px rgba(0,0,0,.45))}
@media(max-width:700px){.usd .dlqr{display:none}}
@media(max-width:600px){.usd{padding:44px 22px 48px;border-radius:28px}}

/* --- "Know before you tap": a light-green panel, not a third card grid ---
   kite-50, the soft-accent surface already used for the pay icons and card eyebrows.
   Sets the section apart from the white cards either side without going heavy.

   NOTE ON THE ACCENT COLOUR: the eyebrow and the toggle use kite-700, NOT the primary
   green every other eyebrow on this page uses. Primary measures 2.37:1 on this panel
   and fails WCAG AA; kite-700 is 5.13:1. Light-on-light is where the standard eyebrow
   colour stops working. */
.dcc{position:relative;background:#ecfdf3;border:1px solid #c9ead9;color:var(--body);
  border-radius:24px;padding:44px 40px}
.dcc .dcclabel{font-family:'Inter',system-ui,sans-serif;font-size:14px;font-weight:500;
  letter-spacing:.05em;text-transform:uppercase;color:#027a48;margin:0 0 12px}
.dcc h3{color:var(--ink);font-size:clamp(25px,3.6vw,38px);line-height:1.12;margin:0 0 32px}
.dccrules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
/* Divider ABOVE each rule only. A border below the last one closed the list off and
   read as the end of the section rather than the end of a rule. */
.dccrule{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  padding:26px 0;border-top:1px solid #c9ead9}
.dccrule:last-child{padding-bottom:0}
/* The prototype makes this a 28px INK TILE with white text — a chip that suited the
   old card layout. It does not suit a stacked list, and overriding only its colour is
   what made the numbers vanish: grey on near-black. So the tile is removed outright
   (background, size, radius, centring) and these become plain index numerals.
   kite-700 on the kite-50 panel is 5.13:1. */
.dcc .dccnum{display:block;width:auto;height:auto;padding:0;margin:0;border-radius:0;
  background:none;color:#027a48;font-family:'Bricolage Grotesque';font-size:18px;
  font-weight:600;line-height:1.4;font-variant-numeric:tabular-nums}
.dccmain h4{color:var(--ink);font-size:clamp(18px,2.2vw,22px);line-height:1.25;margin:0 0 8px}
.dcccost{margin:0;font-size:16px;color:var(--body)}
.dcccost b{color:var(--ink);font-weight:600}
/* the disclosure: a quiet control, not a button competing with the CTAs */
.dccwhy{margin-top:14px}
.dccwhy summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;list-style:none;
  font-size:14px;color:#027a48;transition:color .15s}
.dccwhy summary::-webkit-details-marker{display:none}
.dccwhy summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.dccwhy[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.dccwhy summary:hover{color:#05603a}
.dccwhy p{margin:14px 0 0;font-size:15px;line-height:1.6;color:var(--body)}
.dccwhy p b{color:var(--ink)}
@media(max-width:600px){
.dcc{padding:32px 22px;border-radius:20px}
.dccrule{grid-template-columns:1fr;gap:6px}
}

/* --- "Two ways to pay" icons ---
   One background for both. They were an ink/amber tile and a teal-soft tile, which
   read as two unrelated things rather than two ways of doing the same thing. Now the
   site's soft-accent treatment, matching the icon circles on the product pages. */
.payic,.payic.qr{background:#ecfdf3;color:#027a48;border-radius:12px;width:44px;height:44px;
  display:grid;place-items:center}
.payic svg{width:24px;height:24px;display:block}


/* --- full-width dropdown panel, matching the React nav's MegaPanel ---
   Everything here is inside the page's own 901px breakpoint, the one that swaps
   .nav-links for the burger. Both the panel and the white bar it brings with it are
   desktop-only, and .shell-light ties with .menu-open on specificity — so leaving it
   unscoped meant a resize with a panel open could strand a white bar behind the dark
   mobile menu. */
.mega{display:none}
.brand{gap:0}
.brand-d{display:none}
.mega-soon{display:inline-flex;align-items:center;white-space:nowrap;margin-left:8px;padding:3px 8px;border-radius:999px;background:#e7f6ee;box-shadow:inset 0 0 0 1px #c6e8d6;color:#0a6b3a;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
/* THE SHIMMER, to match the React nav's ComingSoonBadge.
   app/globals.css gives .coming-soon-badge a light sweep on a loop; this badge is the
   same thing in the generated shell and had no animation, so the same item shimmered on
   a React route and sat flat on a static page. position/overflow are what let the sweep
   be clipped to the pill. Honoured prefers-reduced-motion, as the React one is. */
.mega-soon{position:relative;overflow:hidden}
.mega-soon::after{content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);
  transform:translateX(-130%);animation:mega-sheen 2.8s ease-in-out infinite}
@keyframes mega-sheen{to{transform:translateX(120%)}}
@media(prefers-reduced-motion:reduce){.mega-soon::after{animation:none}}
@media(min-width:901px){
.mega{display:block;position:absolute;left:0;right:0;top:64px;z-index:55;background:#fff;border-bottom:1px solid rgba(0,0,0,.08);box-shadow:0 18px 40px -32px rgba(4,60,28,.35);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}
.mega.open{opacity:1;visibility:visible}
/* The panel contents line up with the nav row above them: many columns under the row's
   first item, one column under its own trigger. The offset is a margin-left set from JS
   — see the alignment note in the script.
   width:max-content is load-bearing. A block-level grid is as wide as its container, so
   its offsetWidth would swallow the whole row and the script's clamp would compute a
   maximum shift of zero. */
.mega-pad{padding:40px 0}
.mega-grid{display:grid;grid-template-columns:repeat(2,max-content);width:max-content;gap:32px 48px}
.mega-grid.one{display:block}
.mega-cat{margin:0 0 16px;font-size:14px;font-weight:600;color:#0b1f16}
.mega-list{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.mega-list a{color:#5b6b62;font-size:14px;transition:color .15s}
.mega-list a:hover{color:#0b1f16}
.mega-off{color:rgba(91,107,98,.55);font-size:14px;cursor:default}
}
@media(min-width:1024px){.mega-grid{grid-template-columns:repeat(4,max-content)}}
/* --- keep the nav row on ONE line ---
   .nav-links is absolutely positioned at left:50% to centre it in the bar. For an
   absolutely positioned box with `width:auto`, shrink-to-fit is capped at
   (containing block − left), i.e. HALF the bar — so once the labels needed more than
   that, flex shrank the items and the text wrapped inside them. "Kite Cards",
   "Products" and "Programs" broke to two lines first, the last two because a caret
   adds to their width.
   width:max-content opts out of shrink-to-fit entirely; nowrap is the belt-and-braces.
   The row measures 585px against 645px of clear space at the 901px breakpoint — the
   narrowest it ever renders — so the existing 26px gap is kept rather than tightened. */
@media(min-width:901px){
.nav-links{width:max-content;max-width:none;flex-wrap:nowrap}
.nav-links a{white-space:nowrap}
}
/* The bar becomes one white surface with the open panel, so everything coloured for a
   dark backdrop has to switch too — the other trigger, the logo and the burger all
   read white-on-white otherwise. Same reason as `lightBar` in components/layout/nav.tsx. */
@media(min-width:901px){
#site-header.shell-light{background:#fff;border-bottom:1px solid rgba(0,0,0,.08);-webkit-backdrop-filter:none;backdrop-filter:none}
#site-header.shell-light .nav-links a{color:#5b6b62}
#site-header.shell-light .nav-links a:hover,#site-header.shell-light .nav-links a.mega-t[aria-expanded="true"]{color:#0b1f16}
#site-header.shell-light .brand{color:#0b1f16}
#site-header.shell-light .nav-burger{color:#0b1f16}
#site-header.shell-light .brand-w{display:none}
#site-header.shell-light .brand-d{display:block}
}
/* --- the country control beside the download CTA ---
   Countries left the nav row for this; see `countrySelector` in lib/content.ts.

   A SIBLING of .nav-cta, not a child of it. On the card country pages .nav-cta is
   display:none below 901px and opacity:0 until .past-hero — i.e. it fades in a screen
   into the page. This control is persistent, so it cannot inherit that.

   It carries the margin-left:auto that pushes the right-hand cluster over. .nav-cta
   keeps its own (harmless once this one has already taken up the slack) so nothing
   breaks on a page where this is display:none.

   Desktop only, on the same 901px breakpoint as .nav-links: below it the burger owns
   the right-hand side and the menu carries its own Countries row.

   Colours here are for a DARK bar, which is what the pages receiving only this
   stylesheet have. The grey/on-dark pair for pages that take the base stylesheet lives
   there — scoped one class deeper, because this file loads afterwards. */
#site-header .nav-geo{display:none}
@media(min-width:901px){
#site-header .nav-geo{display:inline-flex;align-items:center;gap:6px;margin-left:auto;height:36px;padding:0 10px;border-radius:999px;color:rgba(255,255,255,.72);font-size:14px;font-weight:500;line-height:1;text-decoration:none;transition:color .15s,background .15s}
#site-header .nav-geo:hover{color:#fff;background:rgba(255,255,255,.1)}
#site-header .nav-geo>svg{width:18px;height:18px;flex:none}
/* TWO auto margins in one flex row SPLIT the free space between them, they do not both
   push right — which is why this control landed in the middle of the bar, behind the
   centred nav links, on every page that also styles `.nav-cta{margin-left:auto}` (the
   /countries hub and the nine card country pages). The auto margin belongs to whichever
   element comes first, so .nav-cta gives its up whenever this one is present.
   (1,2,0) — it has to outrank both the pages' own `.nav-cta` rule and the base
   stylesheet's `#site-header .nav-cta`. */
#site-header .nav-geo~.nav-cta{margin-left:0}
/* Wins over the 18px above on specificity, not order: (1,2,0) against (1,1,1). */
#site-header .nav-geo .caret{width:12px;height:12px;margin-left:2px}
/* Icon-only in the narrow desktop band.
   .nav-links is absolutely centred, so it does not give way to the right-hand cluster —
   it just gets overlapped. The note above .nav-links{width:max-content} measured 585px of
   row against 645px of clear space at the 901px breakpoint, i.e. 60px of slack; taking
   Countries OUT of the row bought about 90px back, and putting it here as a labelled
   control spends roughly 150. That is a collision at the bottom of the range and nowhere
   near one on an actual desktop, so the WORD is what gives way, not the control. */
#site-header .nav-geo>span{display:none}
/* 1200, not 1080. The word "Countries" is about 78px, and switching it on at 1080 made
   the right-hand cluster grow by that much precisely inside the band where a six-item row
   is tightest. Measured: with the 20px gap above and this at 1200, nothing overlaps down
   to about 925px. */
@media(min-width:1200px){#site-header .nav-geo>span{display:inline}}
#site-header.shell-light .nav-geo{color:#5b6b62;background:none}
#site-header.shell-light .nav-geo:hover{color:#0b1f16;background:rgba(11,20,15,.05)}
}
/* The same link in the burger menu. Colour is inherited from each page's own
   `.mobile-menu a` rule — deliberately not set here, because that rule is white on the
   country pages and near-black on the base stylesheet. Only the icon layout is ours. */
.mobile-menu .mm-geo{display:flex;align-items:center;gap:8px}
.mobile-menu .mm-geo svg{width:18px;height:18px;flex:none}
/* --- mobile menu: product categories are one level deeper than the group label --- */
.mobile-menu .mm-cat{margin:0;padding:12px 0 4px 14px;border-bottom:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.42);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.mobile-menu a.mm-deep{padding-left:28px}
.mobile-menu .mm-sub.mm-off{display:block;padding:14px 0 14px 28px;border-bottom:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.4);font-size:15px}
.mobile-menu .mega-soon{background:rgba(255,255,255,.12);box-shadow:none;color:rgba(255,255,255,.72)}
/* --- footer: Products is grouped into Store / Spend / Send --- */
.foot-col .foot-seclist{display:flex;flex-direction:column}
.foot-col .foot-seclist a{padding-left:12px}
.foot-col p.foot-sub{margin:8px 0 11px;color:var(--ink);font-size:15px;font-weight:600}
/* --- SIX NAV ITEMS DO NOT FIT, and this block is why it has to be said twice ---
   The same two rules exist in BASE_CSS, which is what the travel planner gets. The nine
   card-country pages do NOT take BASE_CSS: they carry their own hand-written nav styles
   from before this generator existed, and all this file injects into them is the block
   you are reading. So the fix has to be repeated here or those nine pages keep the
   overlap. Found the hard way, after fixing the planner and seeing the card pages
   unchanged.
   #site-header prefixes give these an id's worth of specificity, so they beat the
   pages' own bare .nav-links and .nav-burger rules whatever the source order. */
#site-header .nav-links{gap:18px}
/* The card pages set .nav-links{position:absolute;left:50%} themselves; same reasoning
   as the note in BASE_CSS, so the same correction, with an id's worth of specificity. */
@media(min-width:901px){
#site-header .nav-links{position:static;left:auto;top:auto;transform:none}
/* SPACED LIKE THE REACT NAV, which is the thing that was actually being compared.
   components/layout/nav.tsx puts three children in a justify-between flex row: brand,
   the data-nav-row element, and one wrapper holding the globe and the CTA. That splits
   the leftover space into two EQUAL gaps, so the row sits a third of the way in — closer
   to the logo than to the middle, because the right-hand cluster is wider than the logo.
   This bar has four children and no wrapper, and it put margin-left:auto on .nav-geo,
   which dumps ALL the slack on one side and jams the row up against the brand.
   Auto margins on both sides of the row reproduce justify-between exactly: the slack is
   halved either side of it. .nav-geo therefore must NOT keep its own auto margin, or the
   two autos split the free space between them and the row drifts back. */
#site-header .nav-links{margin-left:auto;margin-right:auto}
#site-header .nav-geo{margin-left:0}
}
@media(min-width:901px) and (max-width:1039px){
#site-header .nav-links{display:none}
#site-header .nav-burger{display:flex}
#site-header .nav-geo{display:none}
#site-header .nav-cta{display:none}
}