/* The shop: base + chrome + shelf. Ported verbatim from the original site; the
   language/currency switcher rules stay harmless and unused. */

/* Warm paper, near-black ink, one loud accent — the same palette the iOS app
   is built on (ios/Sources/Core/Theme.swift). Brightness comes from where the
   accent lands, never from painting surfaces. */
:root {
  color-scheme: light;
  --canvas: #F6F4EF;
  --surface: #fff;
  --fill: #ECEAE5;
  --ink: #16141C;
  --muted: rgba(22, 20, 28, .62);
  --subtle: rgba(22, 20, 28, .40);
  --edge: rgba(22, 20, 28, .10);
  --accent: #FF4B12;
  --accent-far: #D92D6B;
  --positive: #0EA150;
  --gradient: linear-gradient(135deg, #FF4B12, #D92D6B);
  --shadow: 0 6px 12px rgba(64, 38, 13, .07);
  --shadow-lift: 0 6px 18px rgba(64, 38, 13, .14);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
main { max-width: 620px; margin: 0 auto; padding: 44px 20px 80px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 {
  font-size: clamp(30px, 7.4vw, 44px); line-height: 1.06; letter-spacing: -.03em;
  font-weight: 800; margin: 0 0 12px;
}
h2 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; margin: 40px 0 12px; }
h3 { font-size: 16px; font-weight: 700; margin: 24px 0 4px; }
p { margin: 12px 0; }
ul, ol { margin: 12px 0; padding-left: 22px; }
li { margin: 6px 0; }
p, li { color: var(--muted); }
b, strong { color: var(--ink); font-weight: 600; }
li b, p b, td b { font-weight: 600; }

/* Tiny, heavy, letter-spaced, accent — the app's SectionLabel. */
.brand, .label {
  display: block; font-weight: 800; letter-spacing: .16em; font-size: 12px;
  text-transform: uppercase; color: var(--accent);
}
.brand { margin-bottom: 24px; }
.label { margin: 32px 0 12px; }
.lede { font-size: 18px; line-height: 1.55; color: var(--ink); }
.updated { font-size: 13px; color: var(--subtle); margin: 0 0 8px; }
.fine { font-size: 14px; color: var(--muted); }

/* Cards: white, generous, 20px, hairline edge, very soft warm shadow. */
.card, .step, .spec, .promo {
  border-radius: 20px; padding: 20px;
  background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--shadow);
}
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 16px 0 32px; }
.card b { display: block; margin-bottom: 4px; font-size: 17px; }
.card span { display: block; color: var(--muted); font-size: 14px; line-height: 1.5; }
.card .price { color: var(--accent); }
.steps { display: grid; gap: 12px; margin: 16px 0 32px; }
.step b { display: block; margin-bottom: 4px; }
.step { color: var(--muted); font-size: 15px; line-height: 1.55; }

/* Plan-details card: a stack of label / value rows, as in the app. */
.spec { margin: 16px 0 32px; padding: 8px 20px; }
.spec div {
  display: flex; gap: 16px; justify-content: space-between; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--edge); font-size: 15px;
}
.spec div:last-child { border-bottom: 0; }
.spec span { color: var(--muted); }
.spec b { text-align: right; font-weight: 600; }
/* A value that is also a link keeps a 44px hit area without pushing the row open. */
.spec a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }

/* The one promotional surface allowed to carry the gradient. */
.promo { display: block; background: var(--gradient); border: 0; color: #fff; margin: 16px 0 32px; box-shadow: var(--shadow-lift); }
.promo:hover { text-decoration: none; }
.promo .label { color: #fff; margin: 0 0 8px; }
.promo b { display: block; color: #fff; font-size: 17px; font-weight: 700; line-height: 1.4; }
.promo .go { display: block; margin-top: 8px; font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, .82); }

.note {
  padding: 16px 18px; border-radius: 20px; margin: 24px 0;
  background: rgba(255, 75, 18, .06); border: 1px solid rgba(255, 75, 18, .18);
  color: var(--muted);
}
.note b { color: var(--accent); }

/* Tables scroll inside their own container rather than squashing on a phone. */
.tw {
  overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 16px 0 8px;
  border: 1px solid var(--edge); border-radius: 16px; background: var(--surface);
}
table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--edge); vertical-align: top; color: var(--muted); }
tr:last-child th, tr:last-child td { border-bottom: 0; }
th { color: var(--ink); font-weight: 600; background: var(--fill); }

/* Pills. The gradient is the primary call to action, and nothing else. */
.cta, button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 15px 28px; border: 0; border-radius: 999px;
  font: inherit; font-size: 16px; font-weight: 700; color: #fff; cursor: pointer;
  background: var(--gradient); box-shadow: 0 6px 14px rgba(255, 75, 18, .28);
}
.cta:hover, button:hover { text-decoration: none; opacity: .94; }
.cta:active, button:active { transform: scale(.98); }
button[disabled] { opacity: .55; cursor: default; box-shadow: none; }
.actions { margin: 24px 0 8px; }

nav { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 32px; font-size: 15px; }
nav a, footer a, .back { display: inline-flex; align-items: center; min-height: 44px; }
.back { color: var(--muted); font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.back:hover { color: var(--accent); }

form { margin: 16px 0 8px; display: grid; gap: 16px; }
label { display: block; font-size: 14px; color: var(--ink); margin-bottom: 6px; font-weight: 600; }
label span { display: block; font-weight: 400; color: var(--muted); margin-top: 2px; }
input, textarea {
  width: 100%; padding: 13px 14px; border-radius: 12px; font: inherit; font-size: 16px;
  min-height: 48px; background: var(--fill); border: 1px solid var(--edge); color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--subtle); }
input:focus, textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px rgba(255, 75, 18, .14); }
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

.result { padding: 16px 18px; border-radius: 20px; font-size: 15px; color: var(--muted); margin-top: 16px; }
.result b { display: block; }
.result.ok { background: rgba(14, 161, 80, .08); border: 1px solid rgba(14, 161, 80, .28); }
.result.ok b { color: var(--positive); }
.result.bad { background: rgba(217, 45, 107, .07); border: 1px solid rgba(217, 45, 107, .28); }

footer {
  margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--edge);
  font-size: 13px; color: var(--subtle);
}
footer b { color: var(--muted); font-weight: 600; }
footer a { color: var(--muted); margin-right: 16px; }
footer a:hover { color: var(--accent); }

@media (max-width: 480px) {
  main { padding: 28px 16px 64px; }
  .card, .step, .promo { padding: 16px; }
  .spec { padding: 4px 16px; }
  .cards { grid-template-columns: 1fr; }
}

/* Glass over a warm wash, the way iOS 26 does it: the page has a light behind
   it, and everything that floats borrows from what is underneath instead of
   painting itself opaque. Blur is expensive, so it is spent on the few things
   that genuinely sit above the content — the bar, the dock, the buy button —
   and cards get translucency and a light edge rather than a full blur. */
body {
  padding-bottom: 120px;
  background:
    radial-gradient(60rem 40rem at 12% -8%, rgba(255,75,18,.16), transparent 60%),
    radial-gradient(48rem 34rem at 92% 2%, rgba(217,45,107,.14), transparent 62%),
    radial-gradient(52rem 40rem at 50% 108%, rgba(255,138,61,.12), transparent 60%),
    var(--canvas);
  background-attachment: fixed;
}
main { --maintop: 96px; max-width: 640px; margin: 0 auto; padding: var(--maintop) 20px 40px; }
body { overflow-x: clip; }

/* Floating bar: a glass pill that stays with you rather than a header band. */
.topbar {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 50; width: min(1080px, calc(100% - 24px));
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px 9px 18px; border-radius: 999px;
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 1px 1px rgba(64,38,13,.05), 0 10px 30px rgba(64,38,13,.10);
}
.topbar .mark { display: flex; flex: none; }
.topbar .mark img { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 1px 3px rgba(64,38,13,.18); }
.topbar .brand { margin: 0; }
.topbar .tagline { margin-right: auto; font-size: 13px; font-weight: 600; color: var(--subtle); white-space: nowrap; }
@media (max-width: 620px) { .topbar .brand { margin-right: auto; } }
@media (max-width: 620px) { .topbar .tagline { display: none; } }
.loginbtn {
  /* Plain text in the bar: the base button style is a filled pill, and every
     part of it has to be undone here. */
  display: inline; min-height: 0; padding: 6px 8px; border: 0; border-radius: 0;
  background: none; box-shadow: none; -webkit-appearance: none; appearance: none;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--accent); cursor: pointer;
}
.loginbtn:hover { color: var(--ink); opacity: 1; }
.loginbtn:active { transform: none; }
.topbar .navlinks { display: none; gap: 18px; margin-right: 8px; }
.topbar .navlinks a { color: var(--muted); font-size: 14px; font-weight: 600; }
.topbar .navlinks a:hover { color: var(--ink); text-decoration: none; }
/* Two words and a dotted underline in the bar; the selects themselves live in
   a panel that only appears when someone actually wants to change something. */
.prefsbtn {
  display: inline; min-height: 0; padding: 6px 2px; border: 0; border-radius: 0;
  background: none; box-shadow: none; -webkit-appearance: none; appearance: none;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--subtle); cursor: pointer;
  white-space: nowrap;
}
.prefsbtn:hover { color: var(--ink); opacity: 1; }
.prefsbtn:active { transform: none; }
.prefs {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  display: grid; gap: 10px; padding: 14px; min-width: 240px;
  border-radius: 20px; border: 1px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 1px 2px rgba(64,38,13,.06), 0 18px 44px rgba(64,38,13,.18);
}
.prefs .build { font-size: 11px; color: var(--subtle); text-align: right; }
.prefs label { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 14px; color: var(--muted); }
.prefs select { min-width: 132px; }

.pick { position: relative; }
.pick select {
  appearance: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink);
  background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.8);
  border-radius: 999px; padding: 8px 28px 8px 14px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(64,38,13,.06);
}
.pick::after {
  content: ''; position: absolute; right: 12px; top: 50%; width: 5px; height: 5px;
  border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}

/* On a phone the bar has to hold four controls: the wordmark is the one that
   can go, since the icon already says whose site this is. */
@media (max-width: 560px) {
  .topbar { gap: 6px; padding: 8px 16px 8px 12px; }
  .loginbtn { white-space: nowrap; padding: 6px 4px; }
  .pick select { font-size: 12px; padding: 8px 24px 8px 11px; max-width: 104px; text-overflow: ellipsis; }
  .pick::after { right: 10px; }
}

/* The dock. A pill that floats clear of the edge, not a bar glued to it. */
.tabs {
  display: none;
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(5px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  width: min(440px, calc(100% - 28px));
  grid-template-columns: repeat(4, 1fr); gap: 2px;
  padding: 8px; border-radius: 28px;
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 1px 1px rgba(64,38,13,.05), 0 6px 16px rgba(64,38,13,.08);
}
html[data-signedin="true"] .tabs { display: grid; }
.tabs .adminlink { display: none; }
html[data-admin="true"] .tabs { grid-template-columns: repeat(5, 1fr); }
html[data-admin="true"] .tabs .adminlink { display: flex; }
.tabs .ico {
  display: block; width: 23px; height: 23px; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.tabs a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600; color: var(--subtle); text-decoration: none;
  padding: 7px 0 5px; border-radius: 20px; transition: background .18s ease, color .18s ease;
}
.tabs a:hover { color: var(--muted); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--accent); background: rgba(255,75,18,.10); }
.tabs svg { width: 22px; height: 22px; }

/* Whatever is pinned above the dock floats with it. */
.stickybar {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 39;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: min(560px, calc(100% - 28px));
}
html[data-signedin="true"] .stickybar { bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
.stickybar .inner { width: 100%; }
.stickybar .cta { box-shadow: 0 10px 30px rgba(217,45,107,.34), 0 2px 6px rgba(64,38,13,.12); }

@media (min-width: 900px) {
  main { --maintop: 120px; max-width: 1080px; padding: var(--maintop) 28px 60px; }
  .topbar .navlinks { display: flex; }
  /* Signed in, the dock is how you move between your things on a desktop too.
     Signed out there is nothing to move between, so a single support button
     takes its place. */
  .tabs { display: none; }
  
  html[data-signedin="true"] body { padding-bottom: 96px; }
  body { padding-bottom: 40px; }
  /* On a wide screen the button is part of the page, under the details it
     belongs to, rather than a thing floating over the corner — but it stays
     reachable: sticky holds it at the foot of the window until the page has
     been scrolled far enough for its real place to arrive. */
  .stickybar {
    position: sticky; transform: none; width: auto; padding: 0; margin-top: 14px;
    background: none; bottom: 24px;
  }
  html[data-signedin="true"] .stickybar { bottom: 104px; }
}

/* Surfaces. Translucent rather than white, so the wash behind the page shows
   through and nothing looks stuck on. */
.card, .place, .plan, .period, .planwrap, .details, .step3, .trust div, .faq details, .note {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 1px 2px rgba(64,38,13,.05), 0 8px 24px rgba(64,38,13,.07);
}
.place, .plan, .period, .planwrap, .details, .step3, .faq details { border-radius: 20px; }

.hero {
  position: relative; overflow: hidden;
  margin: calc(var(--maintop) * -1) calc(50% - 50vw) 28px; width: 100vw;
  border-radius: 0 0 34px 34px;
}
.hero img { display: block; width: 100%; height: clamp(260px, 30vw, 420px); object-fit: cover; }
/* Dark at the foot, clear at the head: the glass bar reads against the sky, the
   headline against the sea. */
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,12,8,.20) 0%, rgba(20,12,8,0) 34%, rgba(20,12,8,.52) 100%);
}
.hero-copy { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 0 clamp(20px, 5vw, 40px) clamp(22px, 3vw, 34px); text-align: center; }
.hero-copy h2 {
  margin: 0 0 8px; color: #fff; letter-spacing: -.025em; line-height: 1.08;
  font-size: clamp(24px, 5.2vw, 46px); text-shadow: 0 2px 18px rgba(0,0,0,.42);
}
.hero-copy p {
  margin: 0 auto; max-width: 36rem; color: rgba(255,255,255,.92);
  font-size: clamp(13px, 2.2vw, 17px); line-height: 1.45; text-shadow: 0 1px 12px rgba(0,0,0,.42);
}

.explain { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; }
.explain figure, .step3 figure { margin: 0; }
.explain svg, .step3 svg { width: 100%; height: auto; display: block; }
.step3 figure { width: 96px; margin-bottom: 10px; }

.places { display: grid; gap: 10px; }
.place { display: flex; align-items: center; gap: 12px; padding: 14px 16px; width: 100%; text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }
.place:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(64,38,13,.06), 0 14px 32px rgba(64,38,13,.12); text-decoration: none; }
.place .fl { font-size: 26px; line-height: 1; }
.place .nm { flex: 1; font-weight: 600; }
.place .sub { display: block; font-size: 13px; color: var(--subtle); font-weight: 400; }
.place .pr { font-weight: 700; color: var(--accent); white-space: nowrap; display: flex; align-items: center; }
.place .pr .chev { width: 20px; height: 20px; color: var(--muted); }

.search { position: relative; margin: 0 auto 10px; }
.search input {
  width: 100%; padding: 16px 20px; font-size: 17px; font-family: inherit; color: var(--ink);
  background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.8);
  border-radius: 20px; outline: none;
  box-shadow: 0 1px 2px rgba(64,38,13,.05), 0 8px 24px rgba(64,38,13,.07);
}
.search input:focus { border-color: rgba(255,75,18,.5); box-shadow: 0 0 0 4px rgba(255,75,18,.10); }
.places > .grouphead, .places > .cta { grid-column: 1 / -1; }

/* A place found by name, rather than one in a list of many. */
.place.rich { align-items: flex-start; padding: 16px 18px; }
.place.rich .nm { display: block; font-size: 17px; }
.facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 7px; font-size: 13px; color: var(--muted); font-weight: 500; }
.facts b { padding: 2px 8px; border-radius: 999px; background: rgba(14,161,80,.12); color: var(--positive); font-size: 12px; font-weight: 800; }
.place.rich .pr { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.place.rich .go { font-size: 13px; font-weight: 700; color: var(--accent); }
/* Search results end where the page's own story starts. */
.places[data-mode="search"] { margin-bottom: 52px; }
.placeshead { margin: 6px 0 10px; }
.grouphead { margin: 16px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.places .grouphead:first-child { margin-top: 2px; }
[hidden] { display: none !important; }
.scope { display: flex; gap: 6px; justify-content: center; margin: 26px 0 10px; }
.scope button {
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.8);
  background: rgba(255,255,255,.7); color: var(--muted); cursor: pointer;
}
.scope button[aria-pressed="true"] { background: var(--gradient); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(217,45,107,.28); }

.pagehead { display: flex; align-items: center; gap: 10px; margin: -20px 0 20px; }
.shelfgrid[data-step="period"] { min-height: calc(100svh - var(--maintop) - 130px); }
.pagehead h1 { margin: 0; }
.backbtn {
  flex: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--accent);
  background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 2px 8px rgba(64,38,13,.10);
}
.backbtn svg { width: 19px; height: 19px; }
.backbtn:hover { background: #fff; }

.period { display: flex; align-items: center; justify-content: flex-start; gap: 14px; padding: 18px; margin-bottom: 12px; font-size: 19px; font-weight: 600; width: 100%; text-align: left; font-family: inherit; color: var(--ink); cursor: pointer; }
.radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--subtle); flex: none; }
[aria-pressed="true"] > .radio, .period[data-on="true"] > .radio { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 46%, transparent 47%); }

.planwrap { margin-bottom: 10px; overflow: hidden; transition: box-shadow .16s ease; }
.planwrap[data-on="true"] { box-shadow: 0 0 0 2px var(--accent), 0 10px 28px rgba(255,75,18,.18); }
.banner { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); background: rgba(255,75,18,.11); padding: 8px 10px; }
.plan { display: flex; align-items: center; justify-content: flex-start; gap: 14px; padding: 16px; border: 0; border-radius: 0; box-shadow: none; background: transparent; width: 100%; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.plan .vol { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.plan .meta { font-size: 13px; color: var(--muted); }
.plan .right { margin-left: auto; text-align: right; }
.plan .price { font-size: 18px; font-weight: 800; }
.plan .perday { font-size: 13px; color: var(--subtle); }

.details { padding: 18px; margin: 14px 0; }
.details h3 { margin: 0 0 6px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.kv { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--edge); font-size: 15px; }
.kv:last-child { border-bottom: 0; }
.kv span:first-child { color: var(--muted); }
.kv span:last-child { font-weight: 600; text-align: right; overflow-wrap: anywhere; }

.cta {
  display: block; width: 100%; text-align: center; padding: 17px 22px; border: 0;
  border-radius: 999px; background: var(--gradient); color: #fff; font: inherit; font-weight: 700;
  font-size: 17px; cursor: pointer; box-shadow: 0 8px 24px rgba(217,45,107,.30);
  transition: transform .14s ease, box-shadow .14s ease;
}
.cta:hover { transform: translateY(-1px); text-decoration: none; }
.cta[disabled] { opacity: .45; cursor: default; box-shadow: none; transform: none; }
.authbtn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; height: 48px; margin: 0 0 10px; padding: 0 18px;
  border-radius: 999px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  background: rgba(255,255,255,.9); color: var(--ink);
  border: 1px solid rgba(22,20,28,.14); box-shadow: 0 1px 2px rgba(64,38,13,.06);
}
.authbtn:hover { background: #fff; }
.authbtn:disabled { opacity: .45; cursor: not-allowed; }
.authbtn:disabled:hover { background: rgba(255,255,255,.9); }
.consent { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); cursor: pointer; }
.consent input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--accent); cursor: pointer; }
.consent a { color: var(--ink); text-decoration: underline; }
.consentplan { margin: 0 0 6px; }
.authbtn svg { width: 19px; height: 19px; flex: none; }
.authbtn.apple { background: #000; color: #fff; border-color: #000; }
.authbtn.apple:hover { background: #151515; }
#google { margin: 0 0 10px; display: flex; justify-content: center; min-height: 44px; }
#google > div { width: 100% !important; }
/* On a phone, nothing to show is still a whole screen: the footer waits below
   the fold rather than sitting under two lines of text. */
.pagefill { display: flex; flex-direction: column; }
/* Nothing to show yet: the one action sits in the middle of the screen rather
   than tucked under the title. */
.fillmid { flex: 1; display: flex; align-items: center; justify-content: center; padding: 28px 0; }
.fillmid .cta { width: 100%; max-width: 420px; }
@media (max-width: 899px) {
  .pagefill { min-height: calc(100svh - var(--maintop) - 32px); }
  .pagefill[data-filled="true"] { min-height: 0; }
}

/* Placeholders that hold the shape of what is coming, with a light passing
   over them, instead of a page that says "loading" and then jumps. */
.sk { position: relative; overflow: hidden; background: rgba(64,38,13,.07); border-radius: 12px; }
.sk::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  animation: sheen 1.5s infinite;
}
@keyframes sheen { to { transform: translateX(100%); } }
.sk-title { display: inline-block; width: min(62vw, 300px); height: .78em; vertical-align: middle; border-radius: 10px; }
.sk-row { height: 62px; margin-bottom: 12px; border-radius: 22px; }
.sk-place { height: 58px; margin-bottom: 10px; border-radius: 20px; }
@media (prefers-reduced-motion: reduce) { .sk::after { animation: none; } }

#choices { margin-top: 4px; }
/* Stripe draws its wallet button in an iframe we cannot style, so the radius
   is handed to it through the appearance and matched here. */
#express { margin-bottom: 10px; }
.sheetprice { margin-left: 10px; color: var(--accent); }
.backwallets {
  display: flex; align-items: center; gap: 6px; width: auto; min-height: 0; margin: 0 0 12px;
  padding: 6px 2px; border: 0; border-radius: 0; background: none; box-shadow: none;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--accent); cursor: pointer;
}
.backwallets:active { transform: none; }
.backwallets svg { width: 16px; height: 16px; }
#expresswait {
  display: flex; align-items: center; justify-content: center; height: 48px;
  margin-bottom: 10px; border-radius: 24px;
  font-size: 15px; font-weight: 600; color: var(--subtle);
}
#usecard { margin-top: 0; }
/* Google's button caps at 400, so the other two stop there too, and its iframe
   — which draws ~20px of transparent margin around the visible pill — is
   centred and clipped so all three visible buttons line up exactly. */
#choices > * { max-width: 400px; margin-left: auto; margin-right: auto; }
#google {
  display: grid; place-items: center; overflow: hidden;
  height: 52px; margin-bottom: 10px; border-radius: 999px;
  background: rgba(255,255,255,.9); border: 1px solid rgba(22,20,28,.14);
  box-shadow: 0 1px 2px rgba(64,38,13,.06);
}
#google > div { transform: scale(1.1); transform-origin: center; }

.cta.ghost { background: rgba(255,255,255,.8); color: var(--ink); border: 1px solid rgba(255,255,255,.85); box-shadow: 0 2px 10px rgba(64,38,13,.08); }
.field {
  width: 100%; padding: 15px 17px; font: inherit; color: var(--ink);
  background: rgba(255,255,255,.85); border: 1px solid rgba(22,20,28,.10);
  border-radius: 16px; outline: none; margin: 8px 0;
}
.field:focus { border-color: rgba(255,75,18,.55); box-shadow: 0 0 0 4px rgba(255,75,18,.10); }
.err { color: #C0392B; font-size: 14px; margin: 8px 0; }
.note { border-radius: 16px; padding: 14px 16px; font-size: 14px; color: var(--muted); }
.legalnote { font-size: 12px; color: var(--subtle); margin: 12px 2px 0; line-height: 1.5; }
.qr { display: block; margin: 18px auto; width: 240px; height: 240px; background: #fff; border-radius: 20px; padding: 10px; box-shadow: 0 10px 30px rgba(64,38,13,.14); }

.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0 8px; }
/* Three columns on a phone leave each claim two words wide. */
@media (max-width: 560px) { .trust { grid-template-columns: 1fr; } .trust div { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; } .trust b { flex: none; } }
.trust div { border-radius: 18px; padding: 14px 16px; }
.trust b { display: block; font-size: 15px; }
.trust span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.faq details { padding: 2px 18px; margin-bottom: 8px; }
.faq summary { cursor: pointer; font-weight: 600; padding: 14px 0; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; float: right; color: var(--accent); font-weight: 700; }
.faq details[open] summary::after { content: '–'; }
.faq p { margin: 0 0 14px; font-size: 14.5px; }
.steps3 { display: grid; gap: 12px; margin: 16px 0 8px; }
.step3 { padding: 18px; }
.step3 figure { margin: 0 0 10px; }
.step3 figure img { display: block; width: 104px; height: 104px; border-radius: 20px; }
.step3 b { display: block; margin-bottom: 4px; }
.muted-small { font-size: 13px; color: var(--subtle); text-align: center; margin-top: 18px; }

/* The checkout sheet: up from the bottom on a phone, a centred card on a
   desktop, glass in both. */
.scrim {
  position: fixed; inset: 0; z-index: 60; background: rgba(22,20,28,.34);
  backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s ease;
}
.scrim[data-open="true"] { opacity: 1; }
/* Hidden by visibility, not display: the wallet button is an iframe Stripe
   cannot render into a box with no layout, and mounting it only when the sheet
   opens is what made Apple Pay arrive seconds late. */
.sheet {
  visibility: hidden;
  position: fixed; z-index: 61; left: 0; right: 0; bottom: 0;
  max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 10px 20px calc(26px + env(safe-area-inset-bottom, 0px));
  border-radius: 30px 30px 0 0;
  background: rgba(250,248,245,.86);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-top: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 -12px 44px rgba(64,38,13,.20);
  transform: translateY(102%); transition: transform .32s cubic-bezier(.23,1,.32,1);
}
.sheet[data-open="true"] { transform: translateY(0); visibility: visible; }

/* An eSIM, told the way the app tells it: what it is, how much is left in a
   ring you can read at a glance, then the figures under it. */
.esim { padding: 18px; border-radius: 24px; background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--shadow); margin-bottom: 14px; }
.esim.live { box-shadow: 0 0 0 1px rgba(255,75,18,.25), 0 10px 28px rgba(255,75,18,.12); }
.esimhead { display: flex; align-items: flex-start; gap: 12px; }
.esimhead b { display: block; font-size: 17px; }
.esimhead .sub { display: block; font-size: 12px; color: var(--subtle); margin-top: 2px; overflow-wrap: anywhere; }
.pill { flex: none; margin-left: auto; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pill.live { background: rgba(14,161,80,.12); color: var(--positive); }
.pill.ready { background: rgba(255,75,18,.12); color: var(--accent); }
.pill.done { background: var(--fill); color: var(--muted); }
.usage { display: flex; align-items: center; gap: 16px; margin: 16px 0 6px; }
.usage b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.usage span { font-size: 13px; color: var(--muted); }
.ring { width: 76px; height: 76px; flex: none; transform: rotate(-90deg); }
.ring .track { fill: none; stroke: var(--fill); stroke-width: 8; }
.ring .arc { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.esim .stats { margin: 6px 0 12px; }
.esim .cta { margin-top: 8px; }
.esim .topup {
  display: inline; width: auto; min-height: 0; margin: 4px 0 0; padding: 6px 2px;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--accent); cursor: pointer;
}
.esim .topup:hover { opacity: 1; text-decoration: underline; }
.esim .topup:active { transform: none; }
.lagnote { text-align: center; margin-top: 14px; }
/* A way to reach a person from any page, for a visitor with no account. Quiet
   on purpose: it is a door, not an offer. */
.supportdot { display: none; }
html:not([data-signedin="true"]) .supportdot {
  position: fixed; right: 18px; z-index: 40;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.86); border: 1px solid var(--edge);
  box-shadow: 0 2px 6px rgba(64,38,13,.10), 0 12px 28px rgba(64,38,13,.12);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
}
@media (min-width: 900px) { html:not([data-signedin="true"]) .supportdot { right: 24px; bottom: 24px; } }
.supportdot i {
  display: block; width: 25px; height: 25px; background: var(--muted);
  -webkit-mask: url(/img/chat.png) center / contain no-repeat;
  mask: url(/img/chat.png) center / contain no-repeat;
}
.supportdot:hover { text-decoration: none; }
.supportdot:hover i { background: var(--ink); }
.donebox { text-align: center; padding: 8px 0 18px; }
.donebox .tick {
  width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
  display: grid; place-items: center; font-size: 26px; color: #fff; background: var(--gradient);
  box-shadow: 0 10px 26px rgba(217,45,107,.28);
}
.donebox p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.textlink {
  display: inline; width: auto; min-height: 0; margin: 10px 0 0; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--accent); cursor: pointer;
}
.textlink:hover { opacity: 1; text-decoration: underline; }
.textlink:active { transform: none; }
.sectionhead { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 22px 0 8px; }
#orders .kv .sub { font-size: 12.5px; color: var(--subtle); font-weight: 400; }
.topups .plan { border: 1px solid var(--edge); border-radius: 18px; margin-bottom: 8px; padding: 14px 16px; background: var(--surface); }
.topups .plan .right { margin-left: auto; text-align: right; }
.topups .plan .price { display: block; font-size: 17px; font-weight: 800; }
.topups .plan .perday { font-size: 13px; color: var(--subtle); }



/* The offer: a bright strip above everything, with a clock that actually runs.
   It only exists while the half hour does. */
.offerbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 9px 16px calc(9px + env(safe-area-inset-top, 0px));
  background: var(--gradient); color: #fff;
  font-size: 14px; font-weight: 700; text-align: center; line-height: 1.25;
}
.offertext { max-width: 62vw; }
.plan .was { display: inline-block; margin-top: 2px; color: var(--muted); font-size: 13px; font-weight: 500; text-decoration: line-through; opacity: .8; }
@media (max-width: 560px) { .offerbar { gap: 8px; font-size: 12.5px; } .offerclock { min-width: 74px; } }
.offerclock { font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: .02em; min-width: 82px; }
html[data-offer="true"] .topbar { top: 56px; }
html[data-offer="true"] main { padding-top: calc(var(--maintop) + 44px); }

/* Admin. Dense on purpose: it is a dashboard, not a page to enjoy. */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 16px 0 6px; }
.metrics div { padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--edge); }
.metrics b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.metrics span { font-size: 13px; color: var(--muted); }
.funnel { display: grid; gap: 8px; }
.frow { display: grid; grid-template-columns: 1fr 2fr auto; gap: 12px; align-items: center; font-size: 14px; }
.fname { color: var(--muted); }
.fbar { height: 10px; border-radius: 999px; background: var(--fill); overflow: hidden; }
.fbar i { display: block; height: 100%; background: var(--gradient); }
.fnum { font-variant-numeric: tabular-nums; font-weight: 700; }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 110px; padding: 8px 0 18px; }
.spark:empty { display: none; }
.spark span { position: relative; flex: 1 1 auto; max-width: 26px; height: 100%; display: flex; align-items: flex-end; }
.spark i { display: block; width: 100%; background: var(--accent); opacity: .75; border-radius: 3px 3px 0 0; }
.spark em { position: absolute; bottom: -16px; left: 0; right: 0; text-align: center; font-size: 10px; font-style: normal; color: var(--positive); }
.tablewrap { overflow-x: auto; }
.tablewrap table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tablewrap th, .tablewrap td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--edge); white-space: nowrap; }
.tablewrap th { color: var(--muted); font-weight: 600; }
.tablewrap code { font-size: 11.5px; color: var(--subtle); }

/* Support: a transcript that fills the screen and a composer pinned under it,
   the same shape as the app's. */
.chat { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding: 4px 0 8px; }
@media (max-width: 899px) { .chat { height: calc(100svh - var(--maintop) - 210px); } }
@media (min-width: 900px) { .chat { height: 52vh; min-height: 320px; } }
.chatempty { margin: auto; text-align: center; max-width: 24rem; padding: 20px; }
.chatempty b { display: block; font-size: 19px; margin-bottom: 6px; }
.chatempty p { margin: 0; color: var(--muted); font-size: 14.5px; }
.bubble {
  max-width: 78%; align-self: flex-start; padding: 11px 14px; border-radius: 20px;
  background: rgba(255,255,255,.85); border: 1px solid var(--edge);
  font-size: 15px; line-height: 1.45; overflow-wrap: anywhere;
}
.bubble.mine { align-self: flex-end; background: var(--gradient); border-color: transparent; color: #fff; }
.bubble p { margin: 0; }
.bubble img { display: block; max-width: 220px; border-radius: 14px; margin-bottom: 6px; }
.bubble .who { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: var(--accent); margin-bottom: 4px; }
.bubble time { display: block; margin-top: 4px; font-size: 11.5px; opacity: .7; }
.bubble.typing { display: flex; gap: 5px; padding: 14px; }
.bubble.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: blink 1.1s infinite; }
.bubble.typing i:nth-child(2) { animation-delay: .18s; }
.bubble.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.composer { position: sticky; bottom: 0; padding: 8px 0 2px; background: linear-gradient(180deg, transparent, var(--canvas) 22%); }
@media (max-width: 899px) { .composer { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); } }
.composerrow { display: flex; align-items: flex-end; gap: 8px; }
.composer textarea {
  flex: 1; resize: none; font: inherit; font-size: 15px; line-height: 1.4; color: var(--ink);
  padding: 12px 16px; border-radius: 22px; border: 1px solid var(--edge);
  background: rgba(255,255,255,.9); height: 46px; min-height: 46px; max-height: 120px;
}
.composer .attach, .composer .send {
  flex: none; align-self: flex-end; display: grid; place-items: center;
  width: 46px; height: 46px; min-height: 0; margin: 0;
  padding: 0; border-radius: 50%; cursor: pointer; border: 0; box-shadow: none;
}
.composer .attach { background: rgba(255,75,18,.10); color: var(--accent); }
.composer .attach svg, .composer .send svg { width: 21px; height: 21px; }
.composer .send { background: var(--gradient); color: #fff; }
.composer .send[disabled] { background: rgba(64,38,13,.10); color: var(--subtle); opacity: 1; }
.shots { display: flex; gap: 8px; padding-bottom: 8px; }
.shots span { position: relative; }
.shots img { width: 58px; height: 58px; object-fit: cover; border-radius: 12px; display: block; }
.shots button {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; min-height: 0; padding: 0;
  border-radius: 50%; background: var(--ink); color: #fff; font-size: 14px; line-height: 1; box-shadow: none;
}

.flagrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  min-height: 0; padding: 4px 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font: inherit; font-size: 20px; line-height: 1.2; cursor: pointer; color: var(--ink);
  -webkit-appearance: none; appearance: none; text-align: left;
}
.flagrow:hover { opacity: 1; }
.flagrow:active { transform: none; }
.flagrow .more { font-size: 14px; font-weight: 700; color: var(--accent); align-self: center; }
.countrylist { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 18px; }
.countrylist div { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 15px; border-bottom: 1px solid var(--edge); }
.countrylist span { font-size: 19px; }

.grabber { width: 40px; height: 5px; border-radius: 999px; background: rgba(22,20,28,.18); margin: 4px auto 14px; }
.sheet h2 { margin: 0 0 20px; font-size: 21px; }
.sheet .fine { margin-top: 10px; }

/* On a wide screen the shelf keeps a readable column and the details sit
   beside it, in view while the customer compares rows, instead of stretching
   every plan across a thousand pixels. */
@media (min-width: 900px) {
  .shelfgrid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 28px; align-items: start; }
  .shelfgrid .side { position: sticky; top: 104px; }
  .shelfgrid .details { margin-top: 0; }
  .places { grid-template-columns: repeat(3, 1fr); }
  .trust { grid-template-columns: repeat(3, 1fr); }
  .steps3 { grid-template-columns: repeat(3, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .faq { columns: 2; column-gap: 12px; }
  .faq details { break-inside: avoid; }
  h1 { font-size: 54px; }
  .hero-wrap { text-align: center; max-width: 44rem; margin: 0 auto 6px; }
  .sheet { left: 50%; right: auto; width: 460px; transform: translate(-50%, 102%); padding: 10px 26px 30px; }
  .sheet[data-open="true"] { transform: translate(-50%, 0); visibility: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet, .scrim, .cta, .place { transition: none; }
}

/* A destination with a photograph of its own: the storefront's hero band,
   with the back chevron and the title sitting on its darker foot. Without a
   photograph the page keeps the plain header above. */
.hero-dest { margin-bottom: 22px; }
.h1tag { white-space: nowrap; }
a.backbtn { text-decoration: none; color: inherit; }
.periodrow { display: flex; gap: 10px; margin: 0 0 16px; }
.esimcheck { display: flex; align-items: flex-start; gap: 12px; margin: -4px 0 16px; padding: 12px 14px; border-radius: 16px; background: rgba(14,161,80,.09); border: 1px solid rgba(14,161,80,.25); font-size: 14px; line-height: 1.35; }
.esimcheck .icon { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #0EA150; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.esimcheck .muted { color: var(--muted); font-size: 13px; }
.esimcheck[data-status="likely"] { background: rgba(255,170,0,.1); border-color: rgba(255,170,0,.3); }
.esimcheck[data-status="likely"] .icon { background: #E69A00; }
.esimcheck[data-status="unknown"] { background: rgba(22,20,28,.04); border-color: rgba(22,20,28,.1); }
.esimcheck[data-status="unknown"] .icon { background: var(--muted); }
.periodrow .period { flex: 1 1 0; width: auto; margin: 0; padding: 12px 14px; font-size: 16px; justify-content: center; gap: 10px; border-radius: 16px; white-space: nowrap; }
.periodrow .period[data-on="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.periodrow .period .radio { width: 18px; height: 18px; }
@media (max-width: 480px) { .periodrow { gap: 6px; } .periodrow .period { padding: 11px 4px; font-size: 14px; gap: 6px; border-radius: 14px; } .periodrow .period .radio { width: 16px; height: 16px; } }
.hero-dest .hero-copy {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 0 clamp(16px, 4vw, 32px) clamp(18px, 3vw, 28px);
}
.hero-dest .hero-copy h1 {
  margin: 0; color: #fff; letter-spacing: -.025em; line-height: 1.08;
  font-size: clamp(26px, 5.2vw, 46px); text-shadow: 0 2px 18px rgba(0,0,0,.45);
  overflow-wrap: anywhere;
}
.hero-dest .backbtn {
  color: #fff; background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.35);
  backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.hero-dest .backbtn:hover { background: rgba(255,255,255,.34); }
@media (min-width: 900px) { .hero-dest .hero-copy h1 { font-size: 46px; } }