/* ============================================================
   AltMap — product site
   Derived from the SuperCyber design system, but self-contained:
   no webfont request, no icon font, no third-party CDN. A checkout
   page must not go down because someone else's CDN did.
   ============================================================ */

:root {
  --bg: #070810;
  --ink: #f3f4f8;
  --ink-soft: #a7abbd;
  --ink-faint: #6a6f85;

  --glass: rgba(255, 255, 255, 0.035);
  --glass-2: rgba(255, 255, 255, 0.055);
  --line: rgba(255, 255, 255, 0.09);
  --line-soft: rgba(255, 255, 255, 0.06);

  /* AltMap's accent is sampled from its own icon: #1080f0 is the squircle's
     dominant blue, #68b0f8 the light step at the top of its gradient. These are
     the same two values the SuperCyber site themes the AltMap card with, so the
     card and the page it leads to are the same blue. The icon carries one hue
     and so does the page — there is no second brand colour. */
  --accent: #1080f0;
  --accent-2: #68b0f8;
  --accent-glow: rgba(16, 128, 240, 0.34);

  /* The studio mark in the nav, constant across SuperCyber properties. */
  --mark: #2b7fe0;

  --radius: 20px;
  --radius-sm: 14px;
  --maxw: 1040px;

  /* System stack only. Nothing is fetched to render this page. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Ambient background ---------- */
/* One quiet wash, matching the SuperCyber site. It is the only ambient layer,
   and it earns its place: the nav and the tier cards use backdrop-filter, which
   does nothing at all over a flat colour. This replaced three stacked radial
   gradients in three different hues plus a masked grid overlay — the sort of
   decoration that reads as a template rather than as a product. */
.bg-fx {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1100px 700px at 50% -10%, rgba(16, 128, 240, 0.10), transparent 62%),
    var(--bg);
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
a { color: inherit; text-decoration: none; }

/* ---------- Navbar ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  background: rgba(7, 8, 16, 0.55);
  border-bottom: 1px solid var(--line-soft);
}
.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* The nav used to carry a gradient square standing in for a logo. AltMap has a
   real icon, so it uses that — same artwork as the hero, at nav size. The
   padding baked into the icon is why the box is larger than the 26px mark the
   SuperCyber nav uses; the visible squircle matches. */
.brand img {
  width: 31px;
  height: 31px;
  display: block;
  flex-shrink: 0;
  margin: -2px -2px -2px -3px;
}
.nav-links { display: flex; gap: 24px; font-size: 15px; }
.nav-links a { color: var(--ink-soft); transition: color 0.2s; }
.nav-links a:hover { color: var(--ink); }
@media (max-width: 620px) { .nav-links a.hide-sm { display: none; } }

/* ---------- Shared bits ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass);
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
/* Was a three-stop rainbow clipped to the text. One accent word, one colour. */
.accent-word { color: var(--accent); }
kbd {
  display: inline-block;
  padding: 1px 7px;
  margin: 0 1px;
  font-family: var(--mono);
  font-size: 0.88em;
  line-height: 1.5;
  color: var(--ink);
  background: var(--glass-2);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
}

/* ---------- Hero ---------- */
.hero { text-align: center; padding: 84px 0 20px; }
/* The icon is the app's own AppIcon-512, which brings its own rounded corners
   and drop shadow and sits inside transparent padding — 39px each side, 50px
   above, 19px below, on a 512px canvas. A CSS radius or shadow would draw on
   the bounding box rather than on the squircle, so both are gone. The flat icon
   this replaced filled 93% of its canvas against this one's 84.8%, so the box
   grows from 104px to 114px and the margins absorb the uneven air; the visible
   squircle lands within 0.1px of where it used to sit, at the same size. */
.hero img.appicon {
  width: 114px; height: 114px;
  margin: -7.4px 0 21.4px;
}
.hero h1 {
  font-size: clamp(40px, 6.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 12px 0 18px;
}
.hero .tagline {
  font-size: clamp(17px, 2.2vw, 21px);
  color: var(--ink-soft);
  max-width: 580px;
  margin: 0 auto;
}
.hero .price {
  margin: 30px 0 0;
  font-size: 19px;
  color: var(--ink-soft);
}
.hero .price strong {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-right: 8px;
}
.requirement {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-faint);
  letter-spacing: 0.03em;
  margin: 14px 0 0;
}

/* ---------- Buttons ---------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero .btn-row { justify-content: center; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 550;
  border: 1px solid var(--line);
  background: var(--glass);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  color: #0a0b12;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  box-shadow: 0 8px 26px var(--accent-glow);
  font-weight: 650;
}
.btn-primary:hover { box-shadow: 0 12px 34px var(--accent-glow); }
.btn-ghost:hover { border-color: var(--accent); color: #fff; }

/* ---------- Tier comparison ---------- */
/* Same measure as .content. The tiers used to run the full 1040px wrap while
   the prose below sat centred at 760px, so the page had the cards' left edge
   and the paragraphs' left edge 140px apart — the giveaway of a page assembled
   from full-bleed bands rather than laid out. One column, one edge. */
.tiers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 760px;
  margin: 56px auto 20px;
}
@media (max-width: 720px) { .tiers { grid-template-columns: 1fr; } }
.tier {
  position: relative;
  padding: 28px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.tier.paid { border-color: rgba(16, 128, 240, 0.45); background: var(--glass-2); }
.tier h3 {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.tier .cost {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 18px;
}
.tier.paid .cost { color: var(--accent); }
.tier ul { list-style: none; margin: 0; padding: 0; }
.tier li {
  position: relative;
  padding-left: 26px;
  margin: 11px 0;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.55;
}
.tier li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
}
.tier.paid li::before { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.tier li strong { color: var(--ink); font-weight: 600; }

/* ---------- Prose content ---------- */
.content { padding: 26px 0 72px; max-width: 760px; margin: 0 auto; }
.content h1.doc-title {
  font-size: clamp(28px, 5vw, 38px);
  letter-spacing: -0.03em;
  margin: 46px 0 8px;
  font-weight: 700;
}
.content h2 {
  font-size: 23px;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin: 44px 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.content h2::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.content h3 { font-size: 17px; margin: 26px 0 8px; font-weight: 600; }
.content p { color: var(--ink-soft); margin: 0 0 16px; font-size: 17px; }
.content strong { color: var(--ink); font-weight: 600; }
.content ul.plain { color: var(--ink-soft); padding-left: 20px; margin: 0 0 18px; }
.content ul.plain li { margin: 8px 0; }
.content ul.plain li::marker { color: var(--accent); }
.content a.inline { color: var(--accent); border-bottom: 1px solid rgba(16, 128, 240, 0.4); }
.content a.inline:hover { border-bottom-color: var(--accent); }

.meta-line {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 13px;
  margin: 0 0 28px;
  letter-spacing: 0.03em;
}

.callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  margin: 24px 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background:
    linear-gradient(var(--glass), var(--glass)),
    linear-gradient(120deg, var(--accent-glow), transparent);
  background-clip: padding-box;
}
/* Inline SVG rather than an icon font — this site fetches nothing to render.
   Was a ● standing in for an icon that never arrived. */
.callout .ic { color: var(--accent); flex-shrink: 0; line-height: 0; margin-top: 3px; }
.callout .ic svg { width: 21px; height: 21px; display: block; }
.callout div { color: var(--ink); font-size: 15.5px; }

/* ---------- Checkout / status panel ---------- */
.panel {
  padding: 30px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--glass);
  margin: 24px 0;
}
.panel .lede { font-size: 18px; color: var(--ink); margin: 0 0 6px; }
.license-box {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  word-break: break-all;
  padding: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  margin: 16px 0;
  max-height: 220px;
  overflow-y: auto;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line-soft);
  padding: 34px 0 48px;
  color: var(--ink-faint);
  font-size: 14px;
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: space-between;
  align-items: center;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.site-footer a { color: var(--ink-soft); transition: color 0.2s; }
.site-footer a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
  .btn:hover { transform: none; }
}