/* Storm SIM's static pages (`render.ts`): the home page and the destination
   pages. The shop's dark ground and cyan accent; a system font, since these
   pages load nothing but this file 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;
  max-width: 52rem;
  margin: 0 auto;
  padding: 16px;
  align-items: center;
  justify-content: space-between;
}

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

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

/* 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;
}