/* Storm SIM's static pages (`render.ts`): the home page and the destination
   pages, in every language. The shop's dark ground and cyan accent; a system
   font, since these pages load nothing but this file, one small script and,
   where "drop" is written, Dropta. */

/* Drop's wordmark face: "drop" is always set in it, lowercase. */
@font-face {
  font-family: 'Dropta';
  src: url('/fonts/Dropta.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0c1018;
  --surface: rgb(255 255 255 / 0.035);
  --edge: rgb(255 255 255 / 0.08);
  --ink: #ffffff;
  --ink-soft: rgb(255 255 255 / 0.78);
  --ink-muted: rgb(255 255 255 / 0.55);
  --accent: #22d3ee;
  --accent-ink: #04212a;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(60% 40% at 50% 0%, rgb(34 211 238 / 0.12), transparent),
    var(--bg);
  color: var(--ink);
  font:
    16px/1.6 system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.top {
  display: flex;
  position: relative;
  z-index: 2;
  max-width: 52rem;
  margin: 0 auto;
  padding: 16px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* The language and currency picker, then the way into the shop. */
.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 650;
}

.brand img {
  border-radius: 8px;
}

/* Below 420px the name is left to the mark, as in the shop's header: the
   row holds the picker and the longest "Open the shop" ("Ouvrir la
   boutique") beside it. */
@media (max-width: 419.98px) {
  .brand span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Language and currency (`picker` in render.ts), in the skin of the shop's
   own: a round globe that shows its codes from 640px, and a panel hung from
   the header's right edge rather than the globe's, so it stays on a phone's
   screen with no script to measure it. */
.prefs summary {
  display: flex;
  height: 36px;
  min-width: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.04);
  color: rgb(255 255 255 / 0.75);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  list-style: none;
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.prefs summary::-webkit-details-marker {
  display: none;
}

.prefs summary:hover,
.prefs[open] summary {
  border-color: rgb(255 255 255 / 0.2);
  background: rgb(255 255 255 / 0.1);
  color: var(--ink);
}

.prefs summary:focus-visible {
  outline: 2px solid rgb(255 255 255 / 0.3);
  outline-offset: 2px;
}

.prefs-now {
  display: none;
}

@media (min-width: 640px) {
  .prefs summary {
    padding: 0 12px;
  }

  .prefs-now {
    display: inline;
  }
}

.prefs-panel {
  position: absolute;
  top: calc(100% - 4px);
  right: 16px;
  z-index: 10;
  width: min(20rem, calc(100% - 32px));
  max-height: calc(100dvh - 6rem);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 22px;
  background: rgb(22 26 35 / 0.96);
  box-shadow:
    0 24px 64px -16px rgb(0 0 0 / 0.75),
    inset 0 1px 0 rgb(255 255 255 / 0.05);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

.prefs-panel p {
  margin: 0;
  padding: 4px 8px 6px;
  color: rgb(255 255 255 / 0.4);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.prefs-panel ul {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  list-style: none;
}

.prefs-currencies {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgb(255 255 255 / 0.07);
}

.prefs-currencies ul {
  grid-template-columns: repeat(3, 1fr);
}

.prefs-panel a,
.prefs-panel button {
  display: flex;
  width: 100%;
  padding: 8px 10px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: rgb(255 255 255 / 0.75);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
}

.prefs-panel a:hover,
.prefs-panel button:hover {
  background: rgb(255 255 255 / 0.06);
  color: var(--ink);
  text-decoration: none;
}

.prefs-panel a:focus-visible,
.prefs-panel button:focus-visible {
  outline: 2px solid rgb(255 255 255 / 0.3);
  outline-offset: -2px;
}

.prefs-panel .sym {
  color: rgb(255 255 255 / 0.4);
}

/* The current language and currency: the shop's cyan, and a check. */
.prefs-panel [aria-current],
.prefs-panel [aria-pressed='true'] {
  background: rgb(34 211 238 / 0.1);
  box-shadow: inset 0 0 0 1px rgb(34 211 238 / 0.25);
  color: var(--accent);
}

.prefs-panel [aria-current]::after,
.prefs-panel [aria-pressed='true']::after {
  content: '';
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5l2.25 2.25L9.5 3.5' fill='none' stroke='%2322d3ee' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}

/* The way into the shop from every page: a button, tinted rather than
   filled so the hero's own button stays the loudest thing on the page. */
.top-cta {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid rgb(34 211 238 / 0.35);
  border-radius: 999px;
  background: rgb(34 211 238 / 0.12);
  color: var(--accent);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
}

.top-cta:hover {
  border-color: rgb(34 211 238 / 0.6);
  background: rgb(34 211 238 / 0.2);
  text-decoration: none;
}

main {
  max-width: 52rem;
  margin: 0 auto;
  padding: 0 16px 48px;
}

.crumbs {
  margin: 8px 0 24px;
  color: var(--ink-muted);
  font-size: 14px;
}

.crumbs a {
  color: var(--ink-muted);
}

h1 {
  margin: 12px 0 8px;
  font-size: clamp(2rem, 6vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h2 {
  margin: 0 0 12px;
  font-size: 1.25rem;
  line-height: 1.3;
}

section {
  margin-top: 40px;
}

/* The shop's own opening card (`esim-hero.tsx`): a cyan glow from the top
   right, a cooler one opposite, and signal rings spreading from the corner. */
.hero {
  position: relative;
  margin-top: 0;
  padding: 32px 20px 24px;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: 28px;
  background:
    radial-gradient(
      120% 100% at 100% 0%,
      rgb(34 211 238 / 0.16),
      transparent 55%
    ),
    radial-gradient(
      90% 90% at 0% 100%,
      rgb(56 189 248 / 0.08),
      transparent 60%
    ),
    rgb(255 255 255 / 0.025);
}

@media (min-width: 640px) {
  .hero {
    padding: 44px 32px 32px;
  }
}

.hero > :not(.rings) {
  position: relative;
}

.rings {
  position: absolute;
  top: -8rem;
  right: -8rem;
  width: 26rem;
  height: 26rem;
  pointer-events: none;
  background: repeating-radial-gradient(
    circle at center,
    rgb(34 211 238 / 0.2) 0 1px,
    transparent 1px 30px
  );
  -webkit-mask-image: radial-gradient(circle at center, #000, transparent 68%);
  mask-image: radial-gradient(circle at center, #000, transparent 68%);
}

.hero h1 {
  display: flex;
  margin: 0 0 12px;
  align-items: center;
  gap: 14px;
  font-size: clamp(2.125rem, 6vw, 2.875rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero h1 .flag {
  flex-shrink: 0;
}

.lead {
  max-width: 44ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

/* The home page's pitch: one claim per line, each behind a cyan check. */
.points {
  display: grid;
  max-width: 40rem;
  margin: 18px 0 0;
  padding: 0;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.5;
  list-style: none;
}

.points li {
  position: relative;
  padding-left: 32px;
}

.points li::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7 11.5l2.75 2.75L15.5 8.5' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 22px no-repeat,
    rgb(34 211 238 / 0.12);
  box-shadow: inset 0 0 0 1px rgb(34 211 238 / 0.3);
}

.points strong {
  color: var(--ink);
  font-weight: 650;
}

.hero-actions {
  display: flex;
  margin-top: 26px;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.from {
  margin: 0;
  color: var(--ink-muted);
  font-size: 15px;
}

.from strong {
  color: var(--ink);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.facts {
  display: flex;
  margin: 24px 0 0;
  padding: 18px 0 0;
  flex-wrap: wrap;
  gap: 8px 22px;
  border-top: 1px solid var(--edge);
  color: var(--ink-muted);
  font-size: 14px;
  list-style: none;
}

.facts strong {
  color: var(--ink);
  font-weight: 600;
}

.cta {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

.cta:hover {
  text-decoration: none;
  filter: brightness(1.08);
}

/* A second way on, beside the main button and quieter than it. */
.cta-quiet {
  display: inline-block;
  padding: 11px 21px;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
}

.cta-quiet:hover {
  border-color: rgb(255 255 255 / 0.3);
  background: rgb(255 255 255 / 0.05);
  text-decoration: none;
}

/* How to buy with Drop Wallet: its mark, the wordmark in the heading, and
   three numbered steps, side by side once there is room. Drop's indigo, so
   it reads as the wallet's panel rather than the shop's. */
.wallet {
  padding: 24px 20px;
  border: 1px solid var(--edge);
  border-radius: 24px;
  background:
    radial-gradient(
      28rem 16rem at 0% 0%,
      rgb(99 102 241 / 0.2),
      transparent 70%
    ),
    var(--surface);
}

@media (min-width: 640px) {
  .wallet {
    padding: 32px;
  }
}

.wallet-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.wallet-mark {
  flex-shrink: 0;
  filter: drop-shadow(0 8px 24px rgb(99 102 241 / 0.45));
}

.wallet h2 {
  margin: 0;
  font-size: clamp(1.375rem, 4vw, 1.75rem);
  letter-spacing: -0.02em;
}

.wallet-head p {
  margin: 2px 0 0;
  color: var(--ink-muted);
}

/* "drop" as Drop writes it: the Dropta face, lowercase, in the logo's
   indigo-to-blue. Dropta has one weight, so nothing is synthesised bold. */
.drop {
  font-family: 'Dropta', system-ui, sans-serif;
  font-size: 1.12em;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: lowercase;
  background: linear-gradient(90deg, #818cf8, #60a5fa 55%, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.wallet-steps {
  display: grid;
  margin: 24px 0 0;
  padding: 0;
  gap: 12px;
  counter-reset: step;
  list-style: none;
}

@media (min-width: 720px) {
  .wallet-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.wallet-steps li {
  padding: 16px;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: rgb(12 16 24 / 0.6);
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.5;
  counter-increment: step;
}

.wallet-steps li::before {
  content: counter(step);
  display: flex;
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgb(99 102 241 / 0.18);
  color: #a5b4fc;
  font-size: 14px;
  font-weight: 700;
}

.wallet-steps strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 16px;
}

/* The home page's lists, where every "all destinations" link lands. */
#destinations {
  scroll-margin-top: 16px;
}

.plans {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--edge);
  border-radius: 14px;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

.plans th,
.plans td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--edge);
  text-align: left;
}

.plans th {
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.plans td:last-child,
.plans th:last-child {
  text-align: right;
}

.plans tbody tr:last-child td {
  border-bottom: 0;
}

.note,
.more {
  color: var(--ink-muted);
  font-size: 14px;
}

.why {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--ink-soft);
}

.why li {
  margin-bottom: 8px;
}

.why strong {
  color: var(--ink);
}

.dest-grid {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 8px;
  list-style: none;
}

.dest-grid a {
  display: grid;
  padding: 10px 12px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: center;
}

.dest-grid a:hover {
  border-color: rgb(34 211 238 / 0.4);
  text-decoration: none;
}

.dest-grid .flag {
  grid-row: span 2;
  border-radius: 4px;
}

.dest-grid span {
  font-weight: 600;
  line-height: 1.3;
}

.dest-grid small {
  color: var(--ink-muted);
  font-size: 13px;
}

.covered {
  margin: 0;
  padding: 0;
  columns: 3 10rem;
  list-style: none;
  color: var(--ink-soft);
}

.faq details {
  border-bottom: 1px solid var(--edge);
}

.faq summary {
  padding: 12px 0;
  cursor: pointer;
  font-weight: 600;
}

.faq p {
  margin: 0 0 14px;
  color: var(--ink-soft);
}

.foot {
  max-width: 52rem;
  margin: 0 auto;
  padding: 24px 16px 40px;
  border-top: 1px solid var(--edge);
  color: var(--ink-muted);
  font-size: 14px;
}

/* The site's own links, set as quiet navigation rather than cyan body links;
   "drop" keeps its wordmark. */
.foot nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
  margin-bottom: 8px;
}

.foot nav a {
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 600;
}

.foot nav a:hover {
  color: var(--ink);
  text-decoration: none;
}

/* The terms and the privacy policy (`legal.ts`): one readable column, the
   gist up front in the shop's cyan, the detail in numbered sections. */
.legal {
  max-width: 44rem;
}

.legal h1 {
  margin: 0;
}

.updated {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
}

.summary {
  margin: 24px 0 0;
  padding: 16px 18px;
  border: 1px solid rgb(34 211 238 / 0.25);
  border-radius: 16px;
  background: rgb(34 211 238 / 0.06);
  color: var(--ink);
}

.legal section {
  margin-top: 32px;
}

.legal h2 {
  font-size: 1.125rem;
}

.legal section p,
.legal section li,
.legal address {
  color: var(--ink-soft);
}

.legal section p {
  margin: 0 0 12px;
}

.legal ul {
  margin: 0;
  padding-left: 1.25rem;
}

.legal li {
  margin-bottom: 8px;
}

.legal strong {
  color: var(--ink);
  font-weight: 600;
}

.legal address {
  font-style: normal;
}

/* The rest of a long plan list, one tap away (no script). */
.all-plans {
  margin-top: 4px;
}

.all-plans summary {
  padding: 12px 0;
  color: var(--accent);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  list-style: none;
}

.all-plans summary::-webkit-details-marker {
  display: none;
}

.all-plans[open] summary {
  margin-bottom: 4px;
}