/* manaMOBILE cellular sub-site — shared SHELL stylesheet.
 *
 * Scope: tokens, reset, page container, header/nav/wordmark, hero, section
 * labels. That is what every cellular page genuinely has in common.
 *
 * Component libraries are NOT here on purpose. Each page's own components
 * (.plan on /cellular, .plan-card on /calling, .card on /international, ...)
 * live in a short page-local block. They are different components that merely
 * look similar, and pooling them under generic names like .cta or .badge made
 * them leak across pages: the shared .cta set width:100% and broke
 * international.html's .card .cta, and the shared .badge leaked margin into
 * calling.html's plan badge. Keep page components page-local.
 *
 * Served from /mana_mobile/cellular.css (see build_for_pages.sh).
 */

/* Tokens live in /mana_mobile/tokens.css, which every page links before this
   file. Keeping a second copy here is what let the pages drift apart. */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Satoshi", system-ui, -apple-system, sans-serif;
  background: radial-gradient(120% 70% at 50% -12%, #16404f 0%, var(--deep) 55%, var(--abyss) 100%) no-repeat, var(--abyss);
  background-attachment: fixed;
  color: var(--foam);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.page { max-width: 480px; margin: 0 auto; padding: 0 20px 80px; }

/* ── Site header ── */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(11, 28, 39, .82);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; max-width: 960px; margin: 0 auto; padding: 12px 20px; gap: 16px; }
.brand { text-decoration: none; flex: 0 0 auto; }
.brand svg { height: 42px; width: auto; vertical-align: middle; }
/* Wordmark "mana" is #1a1a1a, invisible on dark. Recolour just that run and
   leave the brand teal of "MOBILE" alone. */
.brand svg tspan[fill="#1a1a1a"] { fill: var(--foam); }
.lang-pick {
  width: auto; font-size: 12px; color: var(--mist);
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 5px 8px; cursor: pointer; font-family: inherit;
}
.lang-pick option { background: var(--deep); color: var(--foam); }
.nav-links { display: flex; align-items: center; gap: 16px; min-width: 0; }
.nav-link { color: var(--sunset); text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap; }
.nav-link:hover { text-decoration: underline; }

/* The header ran out of room below ~430px: the wordmark is 4.7:1, so at 42px
   tall it alone eats 199px and pushed the language picker off screen. */
@media (max-width: 430px) {
  .nav-inner { gap: 10px; padding: 10px 14px; }
  .brand svg { height: 30px; }
  .nav-link { font-size: .8rem; }
  .lang-pick { font-size: 11px; padding: 4px 7px; }
}

/* ── Hero ── */
.hero { text-align: center; padding: 36px 0 12px; }
.hero .tag {
  display: inline-block;
  background: rgba(255, 122, 61, .12);
  border: 1px solid rgba(255, 122, 61, .3);
  color: var(--sunset);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; padding: 5px 14px; border-radius: 20px;
  margin-bottom: 16px;
}
.hero h1 { font-size: 34px; font-weight: 800; color: var(--foam); letter-spacing: -.045em; line-height: 1.06; margin-bottom: 8px; }
.hero .sub { font-size: 15px; color: var(--mist); line-height: 1.55; max-width: 340px; margin: 0 auto; }
.hero-price { font-size: 15px; font-weight: 700; color: var(--foam); margin-top: 10px; }
.trust-top { text-align: center; font-size: 12px; color: var(--mist); margin: 6px 0 20px; font-weight: 500; }

/* ── Section labels ──
   Left-aligned by default, which is what /cellular wants. /international and
   /calling centre theirs in their own page-local blocks. Note /cellular uses
   this class on both a <div> and an inline <label>, and text-align cannot move
   an inline element, so centring here silently mis-aligned one of them. */
.section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--mist); margin: 30px 0 12px; }

@media (max-width: 380px) {
  .hero h1 { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}