/* JumboSIM — Jumbo group design language.
   Group DNA is shared with JumboRadar and JumboChat: captain blue, coral,
   paper/night surfaces, mono kickers. The per-product accent here is AMBER
   (the signal arc), which is what keeps the family readable as a family
   without the products looking like clones. Tokens mirror
   agentic-os/shared/brand/tokens/_group-jumbo.json.

   TYPE IS PART OF THE DNA, AND WAS MISSING.
   Until 2026-08-27 this file set --sans to system-ui and --mono to
   ui-monospace, and had no display token at all — so every heading on a
   selling site rendered in whatever font the visitor's OS happened to use.
   The group DNA had specified Bricolage Grotesque / DM Sans / Space Mono all
   along; shared/brand/tokens/jumbosim.json had merely RECORDED the system
   stack off this stylesheet, and its own note called it "a default, not a
   decision". Self-hosted because _headers sets font-src 'self'.
   Vendored by ops/fetch-fonts.py — see ops/font-credits.md. */

/* Display — the destination name and section headings. Nothing else. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;
  src:url('/assets/fonts/BricolageGrotesque-800.woff2') format('woff2')}
/* Body */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/DMSans-400.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/DMSans-500.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/DMSans-700.woff2') format('woff2')}
/* Data — allowances, fares, carriers, labels. */
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/SpaceMono-400.woff2') format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/SpaceMono-700.woff2') format('woff2')}

:root{
  --captain:#3d5ac9; --captain-h:#2f49a8;
  --coral:#e0552e; --coral-soft:#f0a68d;
  --amber:#e9b44c; --amber-deep:#b8842a;
  --ink:#131e33; --mut:#6a7285;
  --paper:#f7f2e9; --card:#ffffff; --subtle:#efe8da; --line:#e7dfd0;
  --night:#0c1526; --panel:#101d33; --nline:#1d2c49;
  --ntext:#f7f2e9; --nmut:#a8b3cc;
  --display:'Bricolage Grotesque','DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'Space Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:16px/1.65 var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:inherit}
/* The display face is spent on headings only — that is the restraint that
   keeps it distinctive rather than shouty. */
h1,h2{font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.04}
img{max-width:100%;display:block}
.wrap{width:min(1120px,92vw);margin:0 auto}

/* ---- header ---- */
.top{background:var(--night);color:var(--ntext)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;height:74px}
.brandline{display:flex;align-items:center;gap:12px;text-decoration:none}
.brandline img{width:34px;height:34px}
.wm{font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:3px;text-transform:uppercase;white-space:nowrap}
.wm b{color:var(--amber);font-weight:700}
.top nav{display:flex;align-items:center;gap:22px;font-family:var(--mono);font-size:11px;letter-spacing:1.8px;text-transform:uppercase}
.top nav a{color:var(--nmut);text-decoration:none;transition:color .16s}
.top nav a:hover{color:var(--ntext)}

/* ---- hero ---- */
.hero{background:linear-gradient(160deg,#0c1526 0%,#101d33 45%,#16264a 100%);color:var(--ntext);
  padding:70px 0 84px;position:relative;overflow:hidden}
/* Signal arcs — the JumboSIM motif, drawn rather than illustrated. */
.hero::before{content:"";position:absolute;right:-140px;top:-90px;width:520px;height:520px;border-radius:50%;
  border:1px solid rgba(233,180,76,.16);box-shadow:0 0 0 60px rgba(233,180,76,.045),0 0 0 130px rgba(233,180,76,.03)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:repeating-linear-gradient(90deg,var(--amber) 0 3px,transparent 3px 26px);opacity:.55}
.hero .wrap{position:relative;z-index:1}
.pill{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:2px;
  color:var(--amber);border:1px solid rgba(233,180,76,.38);background:rgba(233,180,76,.09);
  padding:7px 14px;border-radius:999px;text-transform:uppercase}
.dot{width:7px;height:7px;border-radius:50%;background:var(--amber);animation:blink 2.2s infinite}
@keyframes blink{50%{opacity:.25}}
h1{margin:26px 0 0;font-size:clamp(38px,5.4vw,64px);line-height:1.04;letter-spacing:-.02em;font-weight:800;max-width:15ch}
h1 em{font-style:normal;color:var(--amber)}
.lede{margin-top:18px;max-width:54ch;font-size:clamp(16px,1.5vw,19px);color:var(--nmut)}

/* ---- destination search ---- */
.finder{margin-top:34px;max-width:560px;position:relative}
.finder label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--nmut);margin-bottom:8px}
.finder input{width:100%;padding:15px 17px;border-radius:12px;border:1px solid var(--nline);
  background:rgba(247,242,233,.06);color:var(--ntext);font-family:var(--mono);font-size:16px;font-weight:700}
.finder input::placeholder{color:#5f6f92;font-weight:400}
.finder input:focus{outline:0;border-color:var(--amber);background:rgba(247,242,233,.09)}
.hint{margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:1.4px;color:var(--nmut)}

/* ---- sections ---- */
section.band{padding:74px 0}
.kick{font-family:var(--mono);font-size:11px;letter-spacing:2.4px;color:var(--captain);text-transform:uppercase}
h2{font-size:clamp(27px,3.4vw,40px);line-height:1.1;letter-spacing:-.015em;margin-top:12px;font-weight:800}
.sub{margin-top:14px;max-width:62ch;color:var(--mut);font-size:17px}

/* ---- coverage board ---- */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:12px;margin-top:30px}
/* A sellable card is an <a> now, so it needs the link underline removed —
   the country name and its price were both arriving underlined. */
.place{display:flex;flex-direction:column;gap:5px;text-decoration:none;padding:16px 17px;border:1px solid var(--line);border-radius:13px;
  background:var(--card);cursor:pointer;text-align:left;font-family:var(--sans);
  transition:transform .15s var(--ease),box-shadow .15s,border-color .15s}
.place:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(19,30,51,.1);border-color:var(--amber)}
.place .fl{font-size:21px;line-height:1}
.place .nm{font-size:16px;font-weight:700;line-height:1.25}
.place .pr{margin-top:3px;font-family:var(--mono);font-size:16px;font-weight:700;color:var(--captain)}
.place .pr span{display:block;font-size:9px;letter-spacing:1.4px;color:var(--mut);font-weight:400;margin-bottom:2px}
.place.open{border-color:var(--captain);box-shadow:0 14px 30px rgba(19,30,51,.1)}
/* A country we cover but do not sell yet. It stays on the board because the
   coverage is real, and it reads quieter than the four we can actually sell. */
.place.cov .pr{font-family:inherit;font-size:13px;font-weight:600;color:var(--mut)}
.place.cov{border-style:dashed}
.more{margin-top:22px;text-align:center}
.linkbtn{background:none;border:1px solid var(--line);border-radius:9px;padding:11px 20px;cursor:pointer;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--captain);text-transform:uppercase}
.linkbtn:hover{background:var(--subtle)}
.empty{margin-top:26px;font-family:var(--mono);font-size:11.5px;letter-spacing:1.4px;color:var(--mut)}

/* ---- plan ladder ---- */
.plans{margin-top:22px;background:var(--night);color:var(--ntext);border-radius:16px;overflow:hidden}
.plans-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:18px 22px;border-bottom:1px solid var(--nline)}
.plans-head .who{display:flex;align-items:center;gap:11px;font-size:19px;font-weight:700}
.plans-head .who i{font-style:normal;font-size:23px}
/* The carrier line sits under the destination, quiet: it is reassurance for
   the person who recognises the name, not a headline. */
.plans-head .who{flex-wrap:wrap}
.nets{flex-basis:100%;display:flex;align-items:center;gap:9px;margin-top:5px;
  font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:1.1px;color:var(--nmut)}
.nets b{font-size:9px;letter-spacing:1.3px;color:var(--amber);border:1px solid var(--amber);
  border-radius:3px;padding:2px 5px}
.plans-head button{background:none;border:1px solid var(--nline);border-radius:8px;padding:8px 13px;cursor:pointer;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:1.4px;color:var(--nmut);text-transform:uppercase}
.plans-head button:hover{color:var(--ntext);border-color:var(--nmut)}
/* ---- the coverage board's plan panel is gone -----------------------------
   Plans live on their own page now (site/esim/*.html). What used to be here was
   an accordion inside the board: no URL, and every fact hidden behind a click.
   The panel styles were deleted with it. */

.plans-foot{padding:14px 22px;font-family:var(--mono);font-size:10px;letter-spacing:1.3px;color:var(--nmut)}

/* ---- bundles ---- */
.bundles{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:13px;margin-top:30px}
.bundle{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;cursor:pointer;text-align:left;
  transition:transform .15s var(--ease),box-shadow .15s,border-color .15s}
.bundle:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(19,30,51,.1);border-color:var(--amber)}
.bundle h3{font-size:19px;font-weight:700}
.bundle .cnt{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;color:var(--mut);margin-top:6px;text-transform:uppercase}
.bundle .pr{font-family:var(--mono);font-size:19px;font-weight:700;color:var(--captain);margin-top:13px}

/* ---- steps ---- */
.plain{background:var(--subtle)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:16px;margin-top:32px}
.step{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px}
.step .n{font-family:var(--mono);font-size:11px;letter-spacing:1.6px;color:var(--amber-deep);margin-bottom:12px}
.step h3{font-size:18px;font-weight:700;margin-bottom:8px}
.step p{color:var(--mut);font-size:15px}

/* ---- faq ---- */
.faq{margin-top:30px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:18px 0;font-size:17px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--captain);font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 0 18px;color:var(--mut);font-size:15.5px;max-width:70ch}

/* ---- footer ---- */
footer{background:var(--night);color:var(--nmut);padding:54px 0 46px;border-top:1px solid var(--nline)}
.fgrid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
footer h4{font-family:var(--mono);font-size:11px;letter-spacing:2.2px;color:var(--ntext);margin-bottom:10px}
footer a{color:var(--nmut);text-decoration:none;line-height:2}
footer a:hover{color:var(--ntext)}
.legal{margin-top:32px;border-top:1px solid var(--nline);padding-top:20px;font-size:13px;line-height:1.75}

@media (max-width:760px){
  .top nav a:not(.keep){display:none}
  .hero{padding:52px 0 64px}
  section.band{padding:56px 0}
}
@media (prefers-reduced-motion:reduce){ .dot{animation:none} html{scroll-behavior:auto} }

/* ---- Part of Jumbo ----
   Three sites, one group. Each footer lists all three and marks the one you
   are standing on with a filled amber pip instead of linking it to itself. */
.jgroup{display:grid}
.jgroup a,.jgroup span{display:flex;align-items:center;gap:9px;font-size:14px;line-height:2;text-decoration:none}
.jgroup i{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:1.3px;color:#5f6f92;text-transform:uppercase}
.jgroup a{color:var(--nmut)}
.jgroup a:hover{color:var(--ntext)}
.jgroup a::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;border:1px solid #3a4a6b}
.jgroup .here{color:var(--ntext);font-weight:700}
.jgroup .here::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 3px rgba(233,180,76,.18)}

/* ---- legal pages (terms, privacy, cookies) + 404 ----
   Generated by build_legal.py, same shell as the landing page so a footer link
   doesn't drop the visitor into a different-looking site. Long-form documents
   on the paper ground with the section index parked in the margin. */
.lgl-head{background:linear-gradient(160deg,#0c1526 0%,#101d33 60%,#16264a 100%);color:var(--ntext);
  padding:48px 0 54px;position:relative;overflow:hidden}
.lgl-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:repeating-linear-gradient(90deg,var(--amber) 0 3px,transparent 3px 26px);opacity:.5}
.lgl-head .kick{color:var(--amber)}
.lgl-head h1{font-size:clamp(32px,4.4vw,50px);line-height:1.05;letter-spacing:-.02em;font-weight:800;margin-top:13px}
.lgl-head p{margin-top:14px;max-width:60ch;color:var(--nmut);font-size:17px}
.lgl-stamp{display:inline-block;margin-top:23px;font-family:var(--mono);font-size:11px;letter-spacing:1.8px;
  color:var(--nmut);border:1px dashed var(--nline);border-radius:8px;padding:8px 13px;text-transform:uppercase}
.lgl{padding:52px 0 82px}
.lgl-grid{display:grid;grid-template-columns:232px 1fr;gap:54px;align-items:start}
.lgl-toc-in{position:sticky;top:22px}
.lgl-toc h4{font-family:var(--mono);font-size:10px;letter-spacing:2.2px;color:var(--mut);
  margin-bottom:10px;text-transform:uppercase}
.lgl-toc a{display:block;font-size:13px;line-height:1.45;padding:8px 0;color:var(--mut);
  border-bottom:1px solid var(--line);text-decoration:none}
.lgl-toc a:last-child{border-bottom:0}
.lgl-toc a:hover{color:var(--captain)}
.lgl-body{max-width:74ch}
.lgl-body h3{font-size:22px;font-weight:800;margin:40px 0 4px;scroll-margin-top:24px}
.lgl-body h3:first-child{margin-top:0}
.lgl-body h3 em{font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:2px;color:var(--amber-deep);
  display:block;margin-bottom:7px}
.lgl-body p{color:var(--mut);font-size:15.5px;margin-top:11px}
.lgl-body ul{margin:13px 0 0;padding-left:0;list-style:none}
.lgl-body li{color:var(--mut);font-size:15.5px;padding:8px 0 8px 20px;position:relative;border-bottom:1px solid var(--subtle)}
.lgl-body li:last-child{border-bottom:0}
.lgl-body li::before{content:"";position:absolute;left:0;top:16px;width:6px;height:6px;border-radius:50%;background:var(--amber)}
.lgl-body a{color:var(--captain);text-decoration:underline;text-underline-offset:2px}
.lgl-body strong{color:var(--ink)}
.lgl-cross{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.lgl-cross a{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--captain);border:1px solid var(--line);border-radius:8px;padding:10px 15px;text-decoration:none;background:var(--card)}
.lgl-cross a:hover{background:var(--subtle)}
.lgl-cross a.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
@media(max-width:900px){
  .lgl-grid{grid-template-columns:1fr;gap:24px}
  .lgl-toc-in{position:static}
  .lgl-toc a{display:inline-block;border-bottom:0;padding:6px 14px 6px 0}
}

/* buttons — used by the 404 page */
.cta{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;text-decoration:none;font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:1.4px;padding:13px 22px;border-radius:9px;text-transform:uppercase;
  transition:transform .16s var(--ease),background .16s,border-color .16s}
.btn-primary{background:var(--amber);color:var(--night)}
.btn-primary:hover{background:#f2c469;transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--nline);color:var(--ntext)}
.btn-ghost:hover{border-color:var(--nmut);transform:translateY(-2px)}


/* Language picker in the nav.
   A <details>, so it opens without JavaScript — this is chrome on every page,
   and the control a reader needs in order to FIND their own language must not
   itself require a script.

   These rules were briefly written between the "/* ====" of the section banner
   below and its closing, which put them inside a CSS comment where they did
   nothing at all and the page looked unstyled. They live above it now. */
.langpick{position:relative}
.langpick summary{display:flex;align-items:center;gap:7px;cursor:pointer;
  list-style:none;list-style-type:none;color:var(--nmut);padding:6px 10px;
  border-radius:99px;border:1px solid var(--nline);
  transition:color .16s,border-color .16s}
.langpick summary::-webkit-details-marker{display:none}
.langpick summary::marker{content:""}
.langpick summary:hover{color:var(--ntext);border-color:var(--nmut)}
.langpick summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.langpick summary b{font-weight:400;letter-spacing:1.2px}
.langpick[open] summary{color:var(--ntext);border-color:var(--nmut)}
.langpick-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:60;
  min-width:212px;background:var(--panel);border:1px solid var(--nline);
  border-radius:12px;padding:8px;box-shadow:0 18px 44px rgba(0,0,0,.42);
  display:flex;flex-direction:column;gap:1px}
.langpick-h{margin:2px 8px 6px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--nmut);opacity:.75}
.langpick-menu a,.langpick-menu .lang-now{display:block;padding:8px 10px;
  border-radius:8px;text-decoration:none;font-family:var(--sans);font-size:14px;
  letter-spacing:0;text-transform:none;color:var(--nmut)}
.langpick-menu a:hover{background:rgba(247,242,233,.08);color:var(--ntext)}
.langpick-menu .lang-now{color:var(--ntext);background:rgba(247,242,233,.06);
  font-weight:600}
.langpick-h2{margin-top:9px;padding-top:9px;border-top:1px solid var(--nline)}
.curpick{display:flex;gap:4px;padding:0 4px 2px}
.curbtn{flex:1;padding:7px 0;border-radius:8px;border:1px solid var(--nline);
  background:transparent;color:var(--nmut);font-family:var(--mono);font-size:11px;
  letter-spacing:.8px;cursor:pointer;transition:color .16s,background .16s,border-color .16s}
.curbtn:hover{color:var(--ntext);border-color:var(--nmut)}
.curbtn:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.curbtn[aria-pressed="true"]{color:var(--night);background:var(--amber);
  border-color:var(--amber);font-weight:700}
.langpick-cur{margin:7px 8px 2px;padding-top:9px;border-top:1px solid var(--nline);
  font-family:var(--sans);font-size:11.5px;line-height:1.5;letter-spacing:0;
  text-transform:none;color:var(--nmut);opacity:.8}
.legal-en{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--nline);
  font-size:12.5px;line-height:1.6;opacity:.72;max-width:70ch}
@media (max-width:560px){.langpick summary b{display:none}
  .langpick-menu{right:-8px;min-width:196px}}

/* ==========================================================================

   DESTINATION PAGE  —  /esim/<slug>

   An arrival band carrying the photograph and the place name, with the buy card
   lifted over its lower edge so the fare is on screen before anyone scrolls.
   The plan cards are boarding-pass stubs: the Jumbo group DNA names boarding
   passes as family vernacular, and this puts the one distinctive move on the
   control people actually use. Everything around it stays quiet.

   Family, not clone: shares the group faces and the captain/amber/paper bones
   with JumboRadar, and takes none of its cyan, its radar scope or its crop
   marks — those are JumboRadar's own face.
   ========================================================================== */

/* No padding here: the section below the fold owns the gap to the footer, and
   a stray 10px on the page wrapper made it 74 against 64 above. */

/* ---- head and the two columns ----
   The destination is drawn, not photographed. A photograph of the place competes
   with the thing being bought; an illustration sits beside it and stays quiet.
   Marco compared a photo band, a photo-band-plus-illustration combination and
   this, and chose this — 2026-08-27. */
.dest-head{padding:24px 0 18px}
.crumbs{display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--mut)}
.crumbs a{color:var(--captain);text-decoration:none}
.crumbs a:hover{text-decoration:underline}

.dest-grid{display:grid;grid-template-columns:minmax(0,0.86fr) minmax(0,1fr);gap:48px;align-items:start}
.dest-art{margin:0;border-radius:16px;overflow:hidden;background:var(--night);
  box-shadow:0 18px 46px rgba(12,21,38,.16)}
.dest-art img{width:100%;height:auto;display:block}

.dest-main h1{font-size:clamp(30px,3.6vw,44px)}
.dest-nets{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:1.3px;color:var(--mut)}
.dest-nets b{font-size:9px;letter-spacing:1.4px;color:var(--amber-deep);
  border:1px solid var(--amber);border-radius:3px;padding:2px 6px}

.dest-say{padding-top:20px}
.dest-lede{font-size:15.5px;line-height:1.6;color:var(--mut)}
.facts{list-style:none;margin-top:20px;display:grid;gap:10px;
  font-size:14px;line-height:1.55;color:var(--mut)}
.facts li{padding-left:21px;position:relative}
.facts li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
  border-radius:50%;background:var(--amber)}

.buycard{margin-top:20px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:20px}

.pk-set{border:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.pk-set legend{grid-column:1/-1;font-family:var(--mono);font-size:10px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--mut);margin-bottom:2px}

/* ---- the plan boxes ----
   Read top to bottom: what you get, how long, then the price under a rule.
   These were boarding-pass stubs with the fare across a perforation to the
   right. Marco could not read them — the eye had to travel sideways to pair a
   size with a price, and five of them together were noise. The ticket idea was
   mine and it lost to legibility, which is the correct outcome for the one
   control the page exists for. */
.pk{cursor:pointer}
/* Five plans in two columns leave the last one beside an empty cell. It used to
   stretch across the row to fill it, but that made one plan a different shape
   from the other four — and shape is how you tell these apart at a glance. The
   empty cell reads as "that is all there is", which is true. */
.pk input{position:absolute;opacity:0;width:0;height:0}
.pk-in{position:relative;display:block;height:100%;padding:15px 16px 14px;
  border:1.5px solid var(--line);border-radius:12px;background:var(--paper);
  transition:border-color .12s,background .12s,color .12s}
.pk-size{display:block;font-family:var(--mono);font-size:21px;font-weight:700;letter-spacing:.4px;
  white-space:nowrap}
.pk-days{display:block;margin-top:2px;font-size:13px;color:var(--mut)}
/* The rule is the whole point: it keeps the price from reading as part of the
   allowance. */
.pk-fare{display:block;margin-top:11px;padding-top:11px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:19px;font-weight:700;white-space:nowrap}

.pk:hover .pk-in{border-color:var(--captain)}
.pk input:focus-visible + .pk-in{outline:2px solid var(--captain);outline-offset:3px}
/* Selected: the whole box fills. Unmistakable, and the only place on this page
   where boldness is spent. */
.pk input:checked + .pk-in{background:var(--captain);border-color:var(--captain);color:#fff}
.pk input:checked + .pk-in .pk-days{color:rgba(255,255,255,.78)}
.pk input:checked + .pk-in .pk-fare{border-top-color:rgba(255,255,255,.32)}

.pk-best{position:absolute;top:-9px;left:14px;z-index:2;padding:2px 8px;border-radius:20px;
  background:var(--amber);color:#101010;font-family:var(--mono);font-size:8.5px;
  font-weight:700;letter-spacing:1.2px;text-transform:uppercase}

/* ---- the gate and the fare ---- */
.ack{display:flex;gap:11px;align-items:flex-start;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--line);font-size:14px;line-height:1.5;cursor:pointer}
.ack input{margin-top:2px;width:18px;height:18px;accent-color:var(--captain);flex:0 0 auto;cursor:pointer}

.buy-act{margin-top:18px}
.tot{display:flex;align-items:baseline;gap:10px}
.tot span{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mut)}
.tot b{font-family:var(--mono);font-size:28px}
.tot b.is-empty{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--mut)}
.paybtn{width:100%;margin-top:14px;padding:16px 24px;border:0;border-radius:10px;
  background:var(--captain);color:#fff;font:inherit;font-weight:700;font-size:16px;
  cursor:pointer;transition:background .14s,transform .14s var(--ease)}
.paybtn:hover:not([disabled]){background:var(--captain-h);transform:translateY(-1px)}
.paybtn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.paybtn[disabled]{background:var(--subtle);color:var(--mut);cursor:not-allowed}

.compat-open{display:block;width:100%;margin-top:10px;padding:13px 18px;
  background:none;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;
  transition:border-color .12s,background .12s}
.compat-open:hover{border-color:var(--ink);background:var(--subtle)}
.paynote{margin-top:9px;font-family:var(--mono);font-size:9px;letter-spacing:1px;
  text-transform:uppercase;color:var(--mut);text-align:center;line-height:1.5}

/* Reassurance, not fine print. Sentence case at reading size, separated from
   the buy controls by a hairline so it reads as a promise about the purchase
   rather than another control. */
.guarantee{margin-top:14px;padding-top:13px;border-top:1px solid var(--subtle);
  font-size:13px;line-height:1.45;color:var(--mut);text-align:center}
.guarantee a{color:var(--ink);font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--line)}
.guarantee a:hover{border-bottom-color:var(--ink)}

/* ---- below the fold ---- */
/* ---- below the fold: one panel, three cells ----
   These were three bare columns of unrelated shapes — a pair of paragraphs, a
   numbered list and a definition list — with different left edges, different
   rhythms and ragged bottoms. JumboRadar already solved this in the family:
   one bordered panel, hairline dividers, and the same internal structure in
   every cell. */
/* Symmetric: the panel sits 64px below the buy column and 64px above the
   footer. It was 64 above and 18 below, so the section looked shoved onto the
   footer. */
.dest-more{margin-top:64px;padding-bottom:64px}
.dest-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.dest-panel .cell{padding:30px 30px 34px;border-left:1px solid var(--line)}
.dest-panel .cell:first-child{border-left:0}
.cell-kick{font-family:var(--mono);font-size:9.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--captain);margin-bottom:10px}
.dest-panel h2{font-size:20px;margin-bottom:16px}
.dest-panel p{color:var(--mut);font-size:14.5px;line-height:1.62}
.dest-panel .cell > p + p{margin-top:12px}

/* Numbered because installing IS a sequence — the other two cells are not, and
   do not get numerals. The marker sits on the cell's own left edge so all three
   columns start at the same place. */
.dest-steps{list-style:none;counter-reset:step;display:grid;gap:15px;
  font-size:14.5px;line-height:1.6;color:var(--mut)}
.dest-steps li{counter-increment:step;position:relative;padding-left:30px}
.dest-steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:2px;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--amber-deep)}
.dest-steps b{color:var(--ink);display:block;margin-bottom:2px}

/* A fixed label column, so every value starts on the same line whatever the
   label's length. */
.spec{display:grid;grid-template-columns:74px minmax(0,1fr);gap:11px 16px;font-size:14px}
.spec dt{font-family:var(--mono);font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--mut);padding-top:3px}
.spec dd{color:var(--ink);line-height:1.45}

/* ---- the compatibility answer ---- */
/* margin:auto is what centres a modal <dialog> — the UA stylesheet sets it and
   the `*{margin:0}` reset at the top of this file wipes it out, which pinned
   this to the top-left corner. */
.compat-dlg{margin:auto;width:min(560px,92vw);max-height:86vh;padding:30px;border:0;border-radius:16px;
  background:var(--card);color:var(--ink);box-shadow:0 30px 80px rgba(19,30,51,.3)}
.compat-dlg::backdrop{background:rgba(12,21,38,.62)}
.compat-dlg h2{font-size:25px;margin-bottom:12px;padding-right:34px}
.compat-dlg h3{font-family:var(--mono);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--captain);margin:22px 0 8px}
.compat-dlg p{color:var(--mut);font-size:14.5px;line-height:1.65}
.compat-dlg ul{margin:10px 0 0 19px;display:grid;gap:9px;font-size:14.5px;line-height:1.6;color:var(--mut)}
.compat-dlg b{color:var(--ink)}
.dlg-note{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.dlg-x{position:absolute;top:20px;right:20px;width:32px;height:32px;border:0;border-radius:50%;
  background:var(--subtle);color:var(--ink);font-size:19px;line-height:1;cursor:pointer}
.dlg-x:hover{background:var(--line)}

/* ---- the bar that follows you on a phone ---- */
.minibar{display:none}
@media (max-width:900px){
  .dest-grid{grid-template-columns:1fr;gap:22px}
  /* A 4:5 illustration eats the whole first screen on a phone and pushes the
     fare out of sight. Crop it to a band and hold the horizon. */
  .dest-art{aspect-ratio:16/11}
  .dest-art img{height:100%;object-fit:cover;object-position:center 58%}
  /* Fare before prose once it stacks: the answer people came for should not sit
     under four paragraphs. */
  .dest-body{display:flex;flex-direction:column}
  .buycard{order:-1;padding:18px}
  .dest-say{padding-top:26px}
  /* On a phone the follow-along bar covers the foot of the page, so the
     bottom gap carries the same 44px plus room for the bar. */
  .dest-more{margin-top:44px;padding-bottom:calc(44px + 76px)}
  /* Stacked, the dividers have to turn horizontal or the cells run together. */
  .dest-panel{grid-template-columns:1fr}
  .dest-panel .cell{border-left:0;border-top:1px solid var(--line);padding:26px 22px 28px}
  .dest-panel .cell:first-child{border-top:0}

  .minibar:not([hidden]){display:flex;align-items:center;gap:14px;
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:var(--card);border-top:1px solid var(--line);
    box-shadow:0 -8px 26px rgba(19,30,51,.12)}
  .minibar .tot{flex:0 1 auto}
  .minibar .tot b{font-size:21px}
  .minibar .minibtn{flex:1 1 auto;padding:14px 18px;border:0;border-radius:10px;
    background:var(--captain);color:#fff;font:inherit;font-weight:700;font-size:15px;cursor:pointer}
}


/* ---- contact ----------------------------------------------------------
   Every class here is ct-prefixed. Two collisions on this stylesheet have
   already shipped — .band turned the homepage dark, .steps rewrote a list —
   because a new block borrowed a name an existing component already owned. */
.ct{padding:44px 0 90px}
.ct-grid{display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:start}
.ct-first{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:22px 24px;margin-bottom:30px}
.ct-first h2{font-size:18px;margin-bottom:12px}
.ct-form{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px}
.ct-row{margin-bottom:18px}
.ct-row label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--mut);margin-bottom:7px}
.ct-row label span{text-transform:none;letter-spacing:0;font-family:var(--sans);opacity:.75}
.ct-row input,.ct-row select,.ct-row textarea{width:100%;font:inherit;font-size:15px;
  color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px}
.ct-row textarea{resize:vertical;min-height:120px}
.ct-row input:focus,.ct-row select:focus,.ct-row textarea:focus{outline:2px solid var(--captain);
  outline-offset:1px;border-color:var(--captain)}
.ct-send{width:100%;margin-top:4px}
.ct-note{font-size:13px;color:var(--mut);margin-top:12px;line-height:1.5}
/* Off-screen rather than display:none — a bot reading the DOM sees a normal
   field, while a person never reaches it. */
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-side{display:flex;flex-direction:column;gap:16px}
.ct-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.ct-card h3{font-size:14px;margin-bottom:8px}
.ct-card p{font-size:14px;color:var(--mut);line-height:1.55}
.ct-card a{color:var(--captain)}
@media(max-width:820px){ .ct-grid{grid-template-columns:1fr;gap:26px} }

/* The way out of the troubleshooting list on the order page. */
.ord-help{background:var(--subtle);border-radius:12px;padding:14px 16px;margin:18px 0;
  font-size:15px;line-height:1.55}
.ord-help a{color:var(--captain)}

/* Numbered sequence inside a long document. Its own name because `steps` is the
   homepage's three-column card grid and `dest-steps` belongs to the product
   page — borrowing either would inherit a layout written for somewhere else.
   The counter and the left offset override .lgl-body li, which paints a round
   bullet in exactly the spot the number needs. */
.doc-steps{list-style:none;counter-reset:docstep;margin:16px 0 0;padding-left:0}
.doc-steps li{counter-increment:docstep;position:relative;padding:10px 0 10px 34px;
  border-bottom:1px solid var(--subtle);color:var(--mut);font-size:15.5px}
.doc-steps li:last-child{border-bottom:0}
.doc-steps li::before{content:counter(docstep,decimal-leading-zero);
  position:absolute;left:0;top:11px;width:auto;height:auto;border-radius:0;background:none;
  font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--amber-deep)}
.doc-steps b{color:var(--ink);display:block;margin-bottom:2px}

/* ---- touch feedback ----------------------------------------------------
   Every button here had a :hover state and no :active one. There is no hover
   on a phone, so a tap produced nothing at all until the network answered —
   which is why the order-link button read as broken when it was working. On
   iOS a control that does not respond to touch immediately is a broken
   control, whatever it does afterwards.

   tap-highlight is turned off because iOS otherwise paints its own grey box
   over ours; we replace it with a state we control rather than removing
   feedback. */
.paybtn, .ct-send, .compat-open, .minibtn{-webkit-tap-highlight-color:transparent;
  touch-action:manipulation}
.paybtn:active:not([disabled]){background:var(--captain-h);transform:scale(.985);
  transition-duration:.06s}
.compat-open:active{background:var(--subtle);transform:scale(.99);transition-duration:.06s}
.minibtn:active:not([disabled]){transform:scale(.985);transition-duration:.06s}

/* The submitted state. Set by script; without script the button simply keeps
   its normal appearance and the form still posts. */
.paybtn.is-busy, .ct-send.is-busy{background:var(--mut);cursor:progress;transform:none}