/* GHOST eSIM — cruise landing page.
   Tokens copied from the GHOST eSIM Design System (claude.ai/design c9bdda04).
   Do not invent colours or type sizes — change tokens here only if the DS changes. */

/* ---------- fonts ----------
   Self-hosted rather than linked from fonts.googleapis.com. That link was a
   render-blocking request to a third party which then referenced a second
   origin (fonts.gstatic.com) — two handshakes before any text could paint,
   on a page whose traffic arrives in a cold in-app webview. These are the
   Google-served latin subsets, byte-identical, just served from our origin.
   Anton and Archivo Black are additionally preloaded in index.html: they set
   the hero headline, which is the LCP candidate. */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/Anton-400.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/ArchivoBlack-400.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/Barlow-400.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/Barlow-600.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/Barlow-700.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:italic;font-weight:700;font-display:swap;
  src:url(/assets/fonts/BarlowSemiCondensed-700i.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:italic;font-weight:800;font-display:swap;
  src:url(/assets/fonts/BarlowSemiCondensed-800i.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Nunito';font-style:italic;font-weight:900;font-display:swap;
  src:url(/assets/fonts/Nunito-900i.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  /* --- Core brand --- */
  --ghost-orange:#ef4b24;
  --ghost-cyan:#26abe1;
  --ghost-navy:#253d7e;
  --ghost-green:#066c3b;
  --ghost-ink:#231f20;
  --ghost-black:#010001;
  --ghost-white:#ffffff;
  --ghost-yellow:#fef101;
  --ghost-magenta:#ea008a;

  --neutral-500:#5f5b5c;

  --orange-hover:#ff6038;--orange-press:#cf3b17;
  --cyan-hover:#45bcee;--cyan-press:#1b8ebd;
  --yellow-hover:#fff640;--yellow-press:#e0d500;

  --surface-page:var(--ghost-black);
  --surface-panel:var(--ghost-ink);
  --surface-card:#ffffff;
  --surface-card-dark:#151314;
  --surface-promo:var(--ghost-yellow);

  --text-primary:var(--ghost-white);
  --text-secondary:rgba(255,255,255,.72);
  --text-muted:rgba(255,255,255,.52);
  --text-on-light:var(--ghost-ink);
  --text-on-light-secondary:var(--neutral-500);
  --text-promo:var(--ghost-yellow);
  --text-link:var(--ghost-cyan);

  --border-hairline:rgba(255,255,255,.16);
  --border-hairline-dark:rgba(0,0,0,.14);

  /* --- Type --- */
  --font-display:"Anton","Arial Narrow",sans-serif;
  --font-display-wide:"Archivo Black","Helvetica Neue",Arial,sans-serif;
  --font-label:"Barlow Semi Condensed","Arial Narrow",sans-serif;
  --font-accent:"Nunito","Trebuchet MS",sans-serif;
  --font-ui:"Barlow","Helvetica Neue",Arial,sans-serif;
  --shear-display:-9deg;

  /* --- Effects --- */
  --shadow-type-hard:3px 4px 0 rgba(0,0,0,.85);
  --shadow-puck:0 10px 26px rgba(0,0,0,.35);
  --shadow-pill:0 4px 12px rgba(0,0,0,.30);
  --shadow-card:0 2px 4px rgba(0,0,0,.06),0 12px 28px rgba(0,0,0,.10);
  --shadow-inset-press:inset 0 3px 0 rgba(0,0,0,.22);

  /* --- Shape / space --- */
  --radius-md:12px;--radius-lg:20px;--radius-pill:999px;
  --page-gutter:20px;
  --max-w:1180px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--surface-page);color:var(--text-primary);
  font-family:var(--font-ui);font-size:16px;line-height:1.45;
}
img{max-width:100%;height:auto}
a{color:var(--text-link)}

/* ---------- type voices ---------- */
.display{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  line-height:.9;letter-spacing:-0.01em;transform:skewX(var(--shear-display));
  margin:0;
}
.wide{
  font-family:var(--font-display-wide);text-transform:uppercase;
  line-height:.94;letter-spacing:-0.02em;text-shadow:var(--shadow-type-hard);margin:0;
}
.label{
  font-family:var(--font-label);font-weight:800;font-style:italic;
  text-transform:uppercase;letter-spacing:.01em;line-height:1.02;
}
.accent{font-family:var(--font-accent);font-weight:900;font-style:italic}

/* ---------- header ---------- */
/* 27px block padding, not 12px: the bar's height is set by its tallest child —
   the 36px .btn-sm, taller than either the 21px logo or the marks — so 36+12+12
   = 60px becomes 36+27+27 = 90px, exactly half again.
   The bar keeps the padding and the border so the rule still spans the full
   viewport; the max-width lives on .header-inner, matching how every section
   below pairs an outer gutter with a centred inner container. */
header{
  padding:27px var(--page-gutter);border-bottom:1px solid var(--border-hairline);
}
.header-inner{
  max-width:var(--max-w);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
header img{width:150px;display:block}
/* Cruise-line strip. Matched on height, not width, so lockups of different
   aspect ratios sit optically level — same reasoning as the awards band, and
   the same brightness(0) invert(1) flatten, which is what makes six clashing
   brand palettes (three of them near-black) read as one strip on the dark bar.
   Slightly held back from pure white so they support the GHOST mark rather
   than compete with it. */
/* margin-left:auto eats the free space the header's space-between would other-
   wise split, pushing the strip off centre and up against the CTA. */
.cruise-lines{display:flex;align-items:center;gap:clamp(10px,1.6vw,20px);min-width:0;margin-left:auto}
.cruise-lines img{
  height:clamp(11px,2.4vw,20px);width:auto;flex:0 0 auto;display:block;
  filter:brightness(0) invert(1);opacity:.8;
}
/* Around here the GHOST mark, six cruise marks and the CTA stop fitting one
   line. Drop the strip to its own row instead of shrinking it further — these
   are wordmarks, and below ~11px the names stop being readable. Right-aligned
   on its own row too, so the edge it lines up on doesn't change with width. */
/* Grid, not wrapped flex, once the strip drops to its own row: a flex item lives
   on exactly one line, so the logo could never cover both. Here it spans rows
   1-2 and stretches, making it as tall as CTA + row-gap + marks.
   The rows are still sized by the CTA and the marks — min-height:0 stops the
   spanning logo's 380px intrinsic height from inflating them instead. */
@media (max-width:1000px){
  /* Column 2 is auto — sized to whichever of the CTA or the marks row is wider,
     so it always gets exactly what it needs. Column 1 takes only what's left.
     Sizing it the other way round (auto logo column, 1fr for the rest) is what
     lets the logo encroach: the track would grow to the logo's own max-content
     and squeeze the CTA and marks, and a % max-width on the logo can't stop it,
     because that % resolves against the very track the logo is sizing. */
  .header-inner{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    column-gap:16px;row-gap:12px;align-items:center;
  }
  .header-inner > img{
    grid-area:1 / 1 / 3 / 2;align-self:stretch;justify-self:start;
    height:100%;width:auto;min-height:0;
    /* The lockup is 7.15:1, so the two-row height asks for ~420px of width.
       Where that doesn't fit, contain scales it down rather than overflowing or
       distorting — it stops filling the height instead of breaking the bar. */
    max-width:100%;object-fit:contain;object-position:left center;
  }
  .header-inner > .btn{grid-area:1 / 2 / 2 / 3;justify-self:end}
  .cruise-lines{grid-area:2 / 2 / 3 / 3;justify-content:flex-end}
}
/* Just under 1000px is where the logo is widest relative to the room it has —
   it fills its whole track and runs up against the marks. Holding it to 85%
   leaves the last 15% of the track as breathing room on its right. Bounded at
   821px so it doesn't stack with the ≤820px shrink further down. */
@media (min-width:821px) and (max-width:1000px){
  .header-inner > img{max-width:85%}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:none;border-radius:var(--radius-pill);cursor:pointer;text-decoration:none;
  font-family:var(--font-label);font-weight:800;font-style:italic;text-transform:uppercase;
  letter-spacing:.01em;transition:background .14s cubic-bezier(.2,.7,.25,1),transform .14s cubic-bezier(.2,.7,.25,1);
}
.btn-promo{background:var(--ghost-yellow);color:var(--ghost-ink)}
.btn-promo:hover{background:var(--yellow-hover);transform:translateY(-2px)}
.btn-promo:active{background:var(--yellow-press);transform:scale(.97);box-shadow:var(--shadow-inset-press)}
.btn-outline{background:transparent;color:var(--ghost-white);border:2px solid var(--ghost-white)}
.btn-outline:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.btn-outline:active{background:rgba(255,255,255,.2);transform:scale(.97)}
.btn:focus-visible{outline:3px solid var(--ghost-cyan);outline-offset:2px}
.btn-sm{height:36px;padding:0 18px;font-size:12px}
.btn-lg{height:60px;padding:0 36px;font-size:19px}
.btn-block{width:100%}

/* ---------- stickers ---------- */
.pill{
  display:inline-flex;align-items:center;gap:8px;background:var(--ghost-magenta);color:#fff;
  padding:7px 18px;border-radius:var(--radius-pill);box-shadow:var(--shadow-pill);
  font-family:var(--font-label);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:15px;letter-spacing:.01em;white-space:nowrap;
}
.pill-yellow{background:var(--ghost-yellow);color:var(--ghost-ink)}

.ribbon{
  background:var(--ghost-cyan);color:#fff;width:max-content;max-width:100%;
  clip-path:polygon(0 0,100% 0,calc(100% - 30px) 50%,100% 100%,0 100%);
  padding:10px 60px 12px 24px;transform:rotate(-3deg);
}
.ribbon .accent{font-size:clamp(20px,4.6vw,32px);line-height:1.05}

.puck{
  width:210px;height:210px;border-radius:50%;background:var(--ghost-yellow);
  border:4px dashed var(--ghost-ink);box-shadow:var(--shadow-puck);
  display:grid;place-items:center;color:var(--ghost-ink);transform:rotate(-3deg);
}
.puck-inner{text-align:center;transform:skewX(var(--shear-display))}
.puck-kicker{font-family:var(--font-display);font-size:27px;line-height:.9;text-transform:uppercase;margin-bottom:10px}
.puck-row{display:flex;align-items:flex-start;justify-content:center}
.puck-dollar{font-family:var(--font-display);font-size:47px;line-height:.82}
.puck-int{font-family:var(--font-display);font-size:100px;line-height:.82}
.puck-cents{display:block;font-family:var(--font-display);font-size:39px;line-height:.82;text-align:left}
.puck-terms{display:block;font-family:var(--font-label);font-weight:700;font-size:11px;letter-spacing:.02em;text-transform:uppercase;text-align:left}

/* ---------- hero ---------- */
/* Photo band. Cyan stays as the fallback ground so a missing/slow image degrades to
   the campaign slot rather than to unreadable white. Focal point sits right-of-centre
   on the ship; mobile shifts it further right so the palm doesn't eat the headline. */
.hero-photo{
  position:relative;
  background-color:var(--ghost-cyan);
  /* Root-absolute, not relative: this stylesheet lives in /assets/ under a
     content-hashed name, so a relative path would resolve to /assets/assets/. */
  background-image:url(/assets/hero-photo.jpg);
  background-image:image-set(url(/assets/hero-photo.webp) type("image/webp"),
                             url(/assets/hero-photo.jpg) type("image/jpeg"));
  background-position:58% 46%;
  background-size:cover;
  background-repeat:no-repeat;
  padding:28px var(--page-gutter) 84px;
  min-height:clamp(270px,34vw,430px);
  display:flex;align-items:flex-start;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),0 100%);
}
/* Phones were downloading the full 1920px band. The 1080px variant is ~0.9x of
   a 390px screen at 3x DPR — imperceptible under the scrim, less than half the
   bytes. Keep this breakpoint in step with the media-scoped preloads in
   index.html, or the browser fetches one file and paints the other. */
@media (max-width:700px){
  .hero-photo{
    background-image:url(/assets/hero-photo-1080.jpg);
    background-image:image-set(url(/assets/hero-photo-1080.webp) type("image/webp"),
                               url(/assets/hero-photo-1080.jpg) type("image/jpeg"));
  }
}
/* Type protection over photography. DS allows a scrim where a hard band won't fit —
   kept light so the photo still reads; the hook also carries the hard offset shadow. */
.hero-photo::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(1,0,1,.55) 0%,rgba(1,0,1,.15) 46%,rgba(1,0,1,0) 72%);
}
.hero-photo-inner{max-width:var(--max-w);margin:0 auto;position:relative;z-index:1;width:100%}
.hero-hook{font-size:clamp(30px,7vw,56px);color:#fff;max-width:14ch}
/* Sits in flow directly beneath the hook so hook + icon read as one left-aligned unit. */
.hero-icon{display:block;margin-top:16px;width:clamp(64px,12vw,120px);opacity:.95}

.hero-panel{background:var(--ghost-black);padding:0 var(--page-gutter) 20px;position:relative}
.hero-panel-inner{max-width:var(--max-w);margin:0 auto;position:relative}
.hero-stack{padding-top:26px;max-width:820px}
.hero-line-1{font-size:clamp(52px,12vw,104px)}
.hero-line-2{font-size:clamp(24px,5vw,44px);margin-top:8px;letter-spacing:.05em}
.hero-puck{position:absolute;right:8px;top:-150px}
.hero-ribbon{margin:26px 0 0}
.hero-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;align-items:center}
.hero-sub{margin:14px 0 0;color:var(--text-secondary);font-size:14px}

/* proof band */
.proof{border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline);padding:17px var(--page-gutter)}
.proof-inner{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.chip{display:flex;align-items:center;gap:14px}
/* Sprite icons take the brand yellow straight from `color`. This replaced an
   invert/sepia/saturate stack that existed only to tint black CDN artwork —
   it resolved to ~#ffff00, so --ghost-yellow is the same mark, on-brand. */
.chip-ico{width:44px;height:44px;flex:0 0 auto;color:var(--ghost-yellow)}
.chip span{font-family:var(--font-label);font-weight:800;font-style:italic;text-transform:uppercase;font-size:17px;line-height:1.02;color:#fff}

/* awards band — five badge marks. The art is pure black paths, so brightness(0)
   flattens it and invert(1) lifts it to white on the dark page. Matching on
   height rather than width keeps badges of different aspect ratios optically
   level; the square and winged marks would otherwise tower over the portraits. */
.awards{padding-top:30px;padding-bottom:30px}
/* Centred, not space-between: five marks across the full max-width strand
   themselves against the gutters and stop reading as one row. */
.awards-inner{max-width:var(--max-w);margin:0 auto;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:clamp(22px,5vw,54px)}
/* 104px is the floor at which the award names inside the art stay legible. */
.awards-inner img{height:104px;width:auto;flex:0 0 auto;filter:brightness(0) invert(1)}

/* ---------- sections ---------- */
section{padding:32px var(--page-gutter)}
.section-inner{max-width:var(--max-w);margin:0 auto}
.section-h{font-size:clamp(34px,7vw,56px);margin-bottom:28px;color:#26abe1;}
.section-h-b{font-size:clamp(34px,7vw,56px);margin-bottom:28px;color:black;}
.section-h-w{font-size:clamp(34px,7vw,56px);margin-bottom:28px;color:white;}
.section-sub{color:var(--text-secondary);max-width:90ch;margin:-16px 0 28px}

/* ports */
.port-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
/* Two columns: icon, then the name stacked over the region. */
.port{
  display:grid;grid-template-columns:auto 1fr;align-items:center;
  column-gap:8px;row-gap:2px;background:var(--surface-card-dark);
  border:1px solid var(--border-hairline);border-radius:var(--radius-md);padding:10px 12px;
}
.port-check{grid-column:1;grid-row:1/span 2;width:18px;height:18px;color:var(--ghost-yellow)}
.port b{grid-column:2;grid-row:1;font-family:var(--font-label);font-weight:800;font-style:italic;text-transform:uppercase;font-size:14px;letter-spacing:.01em;line-height:1.1}
.port small{grid-column:2;grid-row:2;color:var(--text-muted);font-size:11px;text-transform:uppercase;font-family:var(--font-label);font-style:italic;font-weight:700;line-height:1.1}
.port-miss{margin-top:20px;color:var(--text-muted);font-size:14px;max-width:62ch}
.port-miss a{color:var(--text-link)}

/* "And many more" — the one cell in the grid that is an action rather than a
   port. order:1 pins it last no matter where it sits in the markup. Cyan edge
   and the plus (not a check) keep it from reading as another covered port. */
.port-more{
  order:1;text-decoration:none;color:var(--text-primary);cursor:pointer;
  border-color:var(--ghost-cyan);
  transition:background .14s cubic-bezier(.2,.7,.25,1),
             border-color .14s cubic-bezier(.2,.7,.25,1),
             transform .14s cubic-bezier(.2,.7,.25,1);
}
.port-more:hover{background:rgba(38,171,225,.14);border-color:var(--cyan-hover);transform:translateY(-2px)}
.port-more:active{transform:scale(.98)}
.port-more:focus-visible{outline:3px solid var(--ghost-cyan);outline-offset:2px}
.port-more-ico{grid-column:1;grid-row:1/span 2;width:18px;height:18px;color:var(--ghost-cyan)}
.port-more small{color:var(--text-link)}

/* math — light band */
.math{background:#f6f6f6;color:var(--text-on-light)}
.math .section-h{color:var(--ghost-ink)}
.math-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.math-card{background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:26px}
.math-card h3{font-family:var(--font-label);font-weight:800;font-style:italic;text-transform:uppercase;font-size:19px;margin:0 0 14px}
.math-card ul{margin:0;padding:0;list-style:none}
.math-card li{padding:9px 0;border-bottom:1px solid var(--border-hairline-dark);font-size:15px;display:flex;justify-content:space-between;gap:12px}
.math-card li:last-child{border-bottom:none}
.math-total{font-family:var(--font-display);font-size:44px;line-height:.9;transform:skewX(var(--shear-display));display:inline-block;margin-top:14px}
.math-ghost{background:var(--ghost-black);color:#fff}
.math-ghost li{border-bottom-color:var(--border-hairline)}
.math-ghost .math-total{color:var(--text-promo)}
.sup {vertical-align: super;font-size:0.8em;}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{background:var(--surface-card-dark);border:1px solid var(--border-hairline);border-radius:var(--radius-md);padding:24px}
.step-num{font-family:var(--font-display);font-size:44px;line-height:.9;color:var(--text-promo);transform:skewX(var(--shear-display));display:inline-block}
.step h3{font-family:var(--font-label);font-weight:800;font-style:italic;text-transform:uppercase;font-size:19px;margin:10px 0 8px}
.step p{margin:0;color:var(--text-secondary);font-size:15px}

/* guarantee — green band */
.guarantee{background:#066c3b;color:white;text-align:center}
.guarantee .section-h{margin-bottom:10px}
/* Sized in em so the badge tracks the heading's clamp() instead of needing its
   own breakpoints. The counter-skew cancels .display's shear — the type is
   meant to lean, the artwork isn't.

   It's the black ring that's bound to the text, not the badge's outer edge: the
   ring is 45.6 of the artwork's 64.75 units tall, so 64.75/45.6 = 1.42em sizes
   the ring to exactly 1em and lets the gold sunburst spill past it. The negative
   block margins pull the image's margin box back to 1em so that spill overflows
   the line box instead of inflating it and re-spacing the heading. */

/* Pulse rides on the standalone `scale` property, not `transform`, so it can't
   clobber the skew/rotate below. Uniform scale commutes with both, so the order
   the engine composes them in doesn't matter here. */
@keyframes guarantee-pulse{
  0%,100%{scale:1}
  50%{scale:1.07}
}
.guarantee-icon{
  height:1.42em;width:auto;margin-block:-.21em;
  vertical-align:-.06em;margin-right:.3em;
  /* Counter-skew first, then rotate: the parent's skew is applied on top of this,
     so cancelling it here leaves a clean -25deg tilt rather than a sheared one. */
  transform:skewX(calc(-1 * var(--shear-display))) rotate(-25deg);
  animation:guarantee-pulse 2.4s ease-in-out infinite;
}
.guarantee p{font-size:clamp(18px,4vw,28px);margin:0 auto;max-width:50ch}

/* plans */
#plans{text-align:center}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:820px;margin:0 auto}
.plan{
  background:var(--surface-card-dark);border:2px solid var(--border-hairline);
  border-radius:var(--radius-lg);padding:20px;display:grid;gap:16px;color:#fff;text-decoration:none;
  transition:border-color .14s cubic-bezier(.2,.7,.25,1);
}
.plan:hover{border-color:var(--cyan-hover)}
.plan-selected{border-color:var(--ghost-cyan)}
.plan-top{display:flex;align-items:center;justify-content:center;gap:8px}
.plan-region{font-family:var(--font-label);font-weight:800;font-style:italic;text-transform:uppercase;font-size:19px}
.badge{background:var(--ghost-yellow);color:var(--ghost-ink);border-radius:var(--radius-pill);padding:4px 12px;font-family:var(--font-label);font-weight:700;font-style:italic;text-transform:uppercase;font-size:12px}
.plan-data{display:flex;align-items:flex-end;justify-content:center;gap:14px}
.plan-gb{font-family:var(--font-display);font-size:44px;line-height:.9;transform:skewX(var(--shear-display));display:inline-block}
.plan-days{color:var(--text-secondary);font-size:14px;padding-bottom:4px}
.plan-bottom{display:flex;align-items:center;justify-content:center;gap:12px}
.plan-price{display:flex;align-items:flex-start;color:var(--text-promo)}
.plan-price .d{font-family:var(--font-display);font-size:20px;line-height:.9}
.plan-price .i{font-family:var(--font-display);font-size:40px;line-height:.9}
.plan-price .c{font-family:var(--font-display);font-size:18px;line-height:.9}
.plan-note{color:var(--text-muted);font-size:13px;margin-top:16px}

/* faq */
.faq{max-width:820px;text-align:center}
.faq details{
  background:var(--surface-card-dark);border:1px solid var(--border-hairline);
  border-radius:var(--radius-md);margin-bottom:10px;
  /* Lets block-size interpolate to `auto` below. Scoped here rather than :root
     so no other height animation on the page changes behaviour. */
  interpolate-size:allow-keywords;
}
/* The answer slides open instead of snapping. content-visibility is a discrete
   property, so it needs allow-discrete to hold `visible` for the whole run —
   without it the text pops in at the end and the height animates over nothing. */
.faq details::details-content{
  block-size:0;overflow:hidden;
  transition:block-size .38s cubic-bezier(.2,.7,.25,1),
             content-visibility .38s allow-discrete;
}
.faq details[open]::details-content{block-size:auto}
.faq summary{
  cursor:pointer;padding:16px 18px;font-family:var(--font-label);font-weight:800;font-style:italic;
  text-transform:uppercase;font-size:16px;list-style:none;display:flex;justify-content:center;gap:12px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
/* Chevron drawn from two borders on a rotated square, so it inherits the promo
   colour and needs no asset. -45deg points it right, +45deg points it down. */
.faq summary::after{
  content:"";flex:none;width:9px;height:9px;
  border-right:3px solid var(--text-promo);border-bottom:3px solid var(--text-promo);
  transform:rotate(-45deg);transform-origin:60% 60%;
  transition:transform .34s cubic-bezier(.2,.7,.25,1);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0;padding:0 18px 16px;color:var(--text-secondary);font-size:15px}
.faq summary:focus-visible{outline:3px solid var(--ghost-cyan);outline-offset:2px}

/* final cta */
.final{text-align:center;padding-bottom:96px}
.final .pill{margin-bottom:22px}
.final .ribbon{margin:26px auto 0;transform:rotate(-3deg)}
.final-sub{color:var(--text-secondary);font-size:14px;margin-top:16px}

/* footer */
footer{background:var(--surface-panel);padding:40px var(--page-gutter) 110px}
.footer-inner{max-width:var(--max-w);margin:0 auto;display:flex;flex-wrap:wrap;gap:24px;align-items:center}
.footer-inner img{width:170px}
.url-pill{background:var(--ghost-yellow);border-radius:var(--radius-pill);padding:8px 22px}
.url-pill span{font-family:var(--font-accent);font-weight:900;font-style:italic;font-size:17px;color:var(--ghost-ink)}
.footer-links{display:flex;gap:18px;margin-left:auto;font-size:13px}
.footer-links a{color:var(--text-secondary);text-decoration:none}
.legal{max-width:var(--max-w);margin:22px auto 0;color:var(--text-muted);font-size:12px}

/* sticky mobile CTA */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;padding:10px var(--page-gutter);
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:rgba(1,0,1,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--border-hairline);z-index:50;
  transform:translateY(110%);transition:transform .22s cubic-bezier(.2,.7,.25,1);
}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta .btn{height:52px;font-size:16px}

/* ---------- coverage popover ---------- */
/* The inline "full 115-country list" trigger. Still an <a> to the plan page for
   no-JS visitors, so it keeps the standard link treatment. */
.cov-link{color:var(--text-link);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.cov-link:hover{color:var(--cyan-hover)}
.cov-link:focus-visible{outline:3px solid var(--ghost-cyan);outline-offset:2px;border-radius:3px}

.cov-overlay{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  padding:var(--page-gutter);
  background:rgba(1,0,1,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .18s cubic-bezier(.2,.7,.25,1);
}
.cov-overlay.is-open{opacity:1}
.cov-overlay[hidden]{display:none}
/* Scroll lock, and drop the sticky CTA so it can't sit under the scrim.
   position:fixed rather than overflow:hidden — iOS Safari ignores the latter on
   <body> and scrolls the page behind the scrim anyway. The inline `top` that
   preserves the reader's place is set by lockScroll() in index.html. */
body.cov-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}
body.cov-open .sticky-cta{display:none}

.cov-modal{
  display:flex;flex-direction:column;width:100%;max-width:760px;max-height:min(86vh,780px);
  background:var(--surface-panel);border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-puck);overflow:hidden;
  transform:translateY(10px) scale(.99);
  transition:transform .18s cubic-bezier(.2,.7,.25,1);
}
.cov-overlay.is-open .cov-modal{transform:none}

.cov-head{display:flex;align-items:flex-start;gap:16px;padding:22px 22px 0}
.cov-head-text{flex:1;min-width:0}
.cov-title{font-size:clamp(30px,6vw,46px);color:var(--ghost-cyan)}
.cov-sub{margin:10px 0 0;color:var(--text-secondary);font-size:14px;max-width:52ch}
.cov-close{
  flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;
  background:transparent;color:#fff;border:1px solid var(--border-hairline);
  border-radius:var(--radius-pill);cursor:pointer;
  transition:background .14s cubic-bezier(.2,.7,.25,1);
}
.cov-close svg{width:16px;height:16px}
.cov-close:hover{background:rgba(255,255,255,.12)}
.cov-close:focus-visible{outline:3px solid var(--ghost-cyan);outline-offset:2px}

.cov-search{position:relative;margin:18px 22px 0}
.cov-search-ico{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--text-muted);pointer-events:none;
}
.cov-input{
  width:100%;height:48px;padding:0 16px 0 44px;
  background:var(--surface-card-dark);color:var(--text-primary);
  border:1px solid var(--border-hairline);border-radius:var(--radius-pill);
  font-family:var(--font-ui);font-size:16px;/* 16px keeps iOS from zooming on focus */
  transition:border-color .14s cubic-bezier(.2,.7,.25,1);
}
.cov-input::placeholder{color:var(--text-muted)}
.cov-input:focus{outline:none;border-color:var(--ghost-cyan)}
.cov-input:focus-visible{outline:3px solid var(--ghost-cyan);outline-offset:2px}
.cov-input::-webkit-search-cancel-button{filter:invert(1);opacity:.5;cursor:pointer}

.cov-count{
  margin:10px 22px 0;color:var(--text-muted);
  font-family:var(--font-label);font-weight:700;font-style:italic;
  text-transform:uppercase;font-size:12px;letter-spacing:.02em;
}

/* overflow-anchor:none — without it Chrome's scroll anchoring fights the
   scrollTop reset in filter() and leaves the list mid-scroll after a search. */
.cov-results{
  flex:1;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none;
  padding:14px 22px 22px;-webkit-overflow-scrolling:touch;
}
.cov-group{margin-top:14px}
.cov-group:first-child{margin-top:0}
.cov-group[hidden]{display:none}
.cov-group-h{
  display:flex;align-items:center;gap:8px;margin:0 0 8px;
  padding-bottom:6px;border-bottom:1px solid var(--border-hairline);
  font-family:var(--font-label);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:14px;letter-spacing:.01em;color:var(--ghost-cyan);
}
.cov-group-h span{color:var(--text-muted);font-weight:700}

.cov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px;margin:0;padding:0;list-style:none}
.cov-item{
  display:flex;align-items:center;gap:8px;
  background:var(--surface-card-dark);border:1px solid var(--border-hairline);
  border-radius:var(--radius-md);padding:9px 12px;
  font-family:var(--font-label);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:13px;letter-spacing:.01em;line-height:1.15;
}
.cov-item[hidden]{display:none}
.cov-check{flex:0 0 auto;width:14px;height:14px;color:var(--ghost-yellow)}

.cov-empty{
  margin:0;padding:22px;border:1px dashed var(--border-hairline);border-radius:var(--radius-md);
  color:var(--text-secondary);font-size:15px;
}
.cov-empty[hidden]{display:none}
.cov-empty b{color:var(--text-primary)}

.cov-foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 22px;border-top:1px solid var(--border-hairline);background:var(--ghost-black);
}
.cov-foot-note{margin:0;color:var(--text-muted);font-size:13px;max-width:44ch}

@media (max-width:560px){
  .cov-overlay{padding:0}
  .cov-modal{max-width:none;max-height:100%;height:100%;border:none;border-radius:0}
  .cov-head{padding:18px 16px 0}
  .cov-search{margin:14px 16px 0}
  .cov-count{margin:10px 16px 0}
  .cov-results{padding:12px 16px 20px}
  .cov-grid{grid-template-columns:1fr 1fr;gap:6px}
  .cov-foot{padding:14px 16px calc(14px + env(safe-area-inset-bottom))}
  .cov-foot .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .cov-overlay,.cov-modal{transition:none}
  .cov-modal{transform:none}
  .faq summary::after{transition:none}
  .faq details::details-content{transition:none}
  /* Indefinite motion is the kind this query exists for — kill it, keep the tilt. */
  .guarantee-icon{animation:none}
}

/* ---------- mobile ---------- */
@media (max-width:820px){
  .proof-inner{grid-template-columns:1fr;gap:16px}
  /* All five still fit one row down to 320px at this size; wrapping five marks
     gives a lopsided 4+1 last row, so shrink rather than wrap. */
  .awards-inner{gap:24px}
  .awards-inner img{height:62px}
  .math-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  /* scale(.82) still reserves the puck's full 210px box, so claw back the 38px
     of phantom space underneath it rather than leaving a gap before the ribbon */
  .hero-puck{position:static;margin:18px auto -38px;transform:rotate(-3deg) scale(.82);transform-origin:center top}
  .hero-cta-row .btn{width:100%}
  header .btn{display:none}
  section{padding:48px var(--page-gutter)}
}
@media (min-width:821px){
  .sticky-cta{display:none}
  header img{width:170px}
}
@media (max-width:480px){
  .awards-inner{gap:16px}
  .awards-inner img{height:52px}
  .ribbon{padding:9px 44px 11px 18px}
  .ribbon .accent{font-size:17px}
  /* Narrow crop: push past the palm so the ship, not fronds, fills the band. */
  .hero-photo{background-position:70% 48%}
}