/* Moat: de website van de app. Kleuren en rondingen komen uit de app (enum Tokens in
   RockspaceRootView.swift); Tanker en de gerasterde beelden uit de promofilmpjes. */

@font-face {
  font-family: "Tanker";
  src: url("fonts/Tanker-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #000000;
  --surface: #141416;
  --elevated: #1f1f23;
  --border: #2a2a2e;
  --text: #ffffff;
  --muted: #8e8e93;
  --faint: #48484a;
  --accent: #0a84ff;
  --accent-soft: rgba(10, 132, 255, 0.16);
  --red: #ff453a;
  --r-small: 14px;
  --r-medium: 22px;
  --r-large: 32px;
  --display: "Tanker", "Arial Narrow", Impact, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --page: min(1200px, 100% - 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.55 var(--body);
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* De ring uit het app-icoon: de gracht om de burcht. Komt terug in de knoppen, de lijsten,
   achter de telefoon en in de footer. */
.ring { width: 1em; height: 1em; flex: none; }

/* ---------- Knoppen: blauwe pil met een zwart bolletje waarin de ring staat ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 6px 24px 6px 6px;
  border-radius: 999px;
  font: 600 17px/1 var(--body);
  text-decoration: none; white-space: nowrap;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.btn .knob {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  font-size: 24px;
  transition: transform .5s ease-out;
}
.btn:hover .knob { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .btn:hover .knob { transform: none; } }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary .knob { background: #000; color: var(--accent); }
.btn-primary:hover { box-shadow: 0 0 0 6px var(--accent-soft); }
.btn-secondary { background: var(--surface); color: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.btn-secondary .knob { background: var(--accent); color: #000; }
.btn-secondary:hover { background: var(--elevated); }
.btn small { display: block; font-size: 12px; font-weight: 500; color: inherit; opacity: .72; margin-bottom: 3px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Navigatie: zwevende pil ---------- */
.nav {
  position: fixed; z-index: 50; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px;
  padding: 6px 6px 6px 14px;
  background: rgba(20, 20, 22, .72);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  max-width: calc(100% - 24px);
}
.nav .brand {
  display: flex; flex: none; align-items: center; gap: 8px; margin-right: 10px;
  font: 22px/1 var(--display); letter-spacing: .02em; text-decoration: none;
}
.nav .brand img { width: 26px; height: 26px; border-radius: 7px; }
.nav a.link {
  padding: 10px 14px; border-radius: 999px;
  font-size: 15px; color: #d8d8dc; text-decoration: none;
}
.nav a.link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav .get {
  white-space: nowrap;
  margin-left: 6px; padding: 10px 18px; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none;
}

/* ---------- Hero ---------- */
/* Lagen, van achter naar voor: het woord MOAT, Hercules, de telefoon, de tekst. */
.hero {
  position: relative;
  min-height: max(820px, 100svh);
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;
}
.hero-word {
  position: absolute; z-index: 1; left: 0; right: 0; top: 84px;
  margin: 0; text-align: center;
  font: min(36vw, 560px)/0.8 var(--display);
  letter-spacing: -0.01em;
  color: #f2f2f2;
  text-shadow: 0 0 48px rgba(255, 255, 255, .22);
  user-select: none;
  white-space: nowrap;
}
.hero-word span { display: inline; }
.hero-statue {
  position: absolute; z-index: 2;
  left: 60%; bottom: 0; transform: translateX(-50%);
  width: min(56vw, max(700px, 80svh));
  -webkit-mask-image:
    linear-gradient(to bottom, #000 58%, transparent 96%),
    linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, #000 58%, transparent 96%),
    linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-composite: intersect;
}
.phone.hero-phone {
  position: absolute; z-index: 3;
  right: max(28px, 50% - 560px); bottom: 64px;
  width: 244px; margin: 0;
  transform: rotate(5deg);
}
.hero-copy {
  position: absolute; z-index: 4;
  left: max(28px, 50% - 600px); bottom: 56px;
  max-width: 560px;
}
.hero h1 {
  margin: 0 0 14px;
  font: 64px/0.9 var(--display);
  letter-spacing: .005em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .65);
}
.hero-copy p {
  margin: 0 0 24px; color: #d0d0d4; max-width: 44ch;
  text-shadow: 0 1px 18px rgba(0, 0, 0, .9);
}
.hero-copy .fine { margin: 14px 0 0; font-size: 14px; color: var(--muted); max-width: none; }
/* Een stukje van het echte blokscherm, los over het beeld. */
.hero-chip {
  position: absolute; z-index: 3;
  left: calc(60% - 330px); top: 404px;
  width: 280px; border-radius: 999px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08);
  transform: rotate(-3deg);
}
/* Filmkorrel over de hele hero, zoals in de promofilmpjes. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .16; mix-blend-mode: overlay;
}
/* ---------- Telefoon met een echt scherm ---------- */
.phone {
  position: relative;
  padding: 7px;
  border-radius: 40px;
  background: #0b0b0d;
  box-shadow:
    inset 0 0 0 1px #3a3a40,
    0 30px 80px rgba(0, 0, 0, .7),
    0 0 0 1px rgba(0, 0, 0, .9);
}
.phone img { border-radius: 33px; width: 100%; }

/* ---------- Secties ---------- */
.section { width: var(--page); margin: 0 auto; padding: 120px 0 0; }
.section-head { max-width: 640px; margin-bottom: 48px; }
.label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px; margin-bottom: 18px;
  border-radius: 999px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: 14px; color: #d8d8dc;
}
.label .ring { color: var(--accent); font-size: 18px; }
h2 {
  margin: 0 0 14px;
  font: 64px/0.92 var(--display);
  letter-spacing: .005em;
}
.lead { margin: 0; color: var(--muted); font-size: 19px; max-width: 52ch; }

/* Bento: twee brede en twee smalle tegels, in elkaar geschoven. */
.bento {
  display: grid; gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tile {
  position: relative; overflow: hidden;
  min-height: 560px;
  border-radius: var(--r-large);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  isolation: isolate;
}
.tile.wide { grid-column: span 2; }
.tile > .bg {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
}
.tile-text {
  position: absolute; left: 32px; bottom: 30px; right: 32px;
  max-width: 340px;
}
.tile.wide .tile-text { right: auto; }
.tile h3 { margin: 0 0 8px; font: 40px/0.95 var(--display); letter-spacing: .01em; }
.tile p { margin: 0; color: #c9c9ce; font-size: 16px; }
.tile .tag {
  display: inline-block; margin-bottom: 12px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); font-size: 13px; color: #e6e6ea;
}
.tile .phone {
  position: absolute; width: 230px;
}
.tile-session .phone { right: 56px; top: 48px; transform: rotate(-4deg); }
.tile-strict .phone { right: -28px; top: 24px; width: 170px; transform: rotate(6deg); }
.tile-strict .tile-text { max-width: 240px; }
.tile-schedules .phone { right: 64px; top: 52px; transform: rotate(4deg); }
.tile-phonefree .tile-text { max-width: 300px; }

/* Voortgang: lijst links, telefoon rechts met de ring erachter. */
.split {
  display: grid; gap: 56px; align-items: center;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.points li {
  display: grid; grid-template-columns: 30px 1fr; gap: 0 12px;
  padding: 16px 18px; border-radius: var(--r-medium);
  background: rgba(255, 255, 255, .03);
}
.points .ring { color: var(--accent); font-size: 24px; margin-top: 2px; grid-row: span 2; }
.points b { font-weight: 600; }
.points span { color: var(--muted); font-size: 16px; }
.halo {
  position: relative; display: grid; place-items: center;
  min-height: 600px;
}
.halo > .ring {
  position: absolute; z-index: 0;
  width: 560px; height: 560px; color: var(--accent);
  opacity: .9;
  filter: drop-shadow(0 0 60px rgba(10, 132, 255, .45));
}
.halo .phone { position: relative; z-index: 1; width: 270px; transform: rotate(-3deg); }

/* Moat Elite */
.elite {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  border-radius: var(--r-large);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  overflow: hidden;
}
.elite-col { padding: 40px; }
.elite-col + .elite-col { background: #0a1a2e; box-shadow: inset 1px 0 0 var(--border); position: relative; overflow: hidden; }
.elite-col h3 { margin: 0 0 4px; font: 40px/1 var(--display); letter-spacing: .01em; }
.elite-col .sub { margin: 0 0 24px; color: var(--muted); font-size: 16px; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checks li { display: flex; gap: 10px; align-items: baseline; }
.checks .ring { color: var(--accent); font-size: 16px; transform: translateY(2px); }
.elite-col:first-child .checks .ring { color: var(--muted); }
.prices {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  margin: 28px 0 18px; padding: 6px;
  border-radius: var(--r-medium); background: rgba(0, 0, 0, .35);
}
.price { padding: 14px 14px 12px; border-radius: 16px; }
.price.main { background: var(--accent); }
.price .what { font-size: 14px; color: #d8d8dc; }
.price.main .what { color: #fff; }
.price .amount { font: 34px/1.1 var(--display); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.price .per { font-size: 13px; color: #b9b9be; }
.price.main .per { color: #e8f2ff; }
.fineprint { margin: 0; font-size: 13px; color: var(--muted); max-width: 62ch; }
.elite-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }

/* Privé */
.private {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center;
  padding: 36px 40px; border-radius: var(--r-large);
  background: rgba(255, 255, 255, .03);
}
.private .ring { font-size: 72px; color: var(--accent); }
.private h2 { font-size: 44px; margin-bottom: 8px; }
.private p { margin: 0; color: var(--muted); max-width: 62ch; }
.private a { color: #fff; }

/* Mac en Windows: een scherm met het eiland in de notch, daaronder de downloads. Het eiland heeft
   de vorm van de notch (boven recht, onder rond), met het slot links en de afteller rechts. */
.desk {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-large);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
.desk-screen { position: relative; height: 340px; }
.desk-screen .bg {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}
.desk-bar {
  display: flex; justify-content: center;
  height: 34px;
  background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.island {
  display: flex; align-items: center; justify-content: space-between; gap: 120px;
  height: 40px; padding: 0 18px 2px;
  border-radius: 0 0 18px 18px;
  background: #000;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
  font: 600 15px/1 var(--body); font-variant-numeric: tabular-nums;
}
.island .ring { font-size: 18px; color: var(--accent); }
.desk-body {
  display: grid; gap: 40px; align-items: end;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  margin-top: -96px; padding: 0 40px 40px;
}
.desk-body .lead { max-width: 46ch; }
.desk-cta { flex-direction: column; align-items: stretch; }
.desk-cta .btn { min-height: 64px; }
.desk-get .fine { margin: 14px 0 0; font-size: 14px; color: var(--muted); }

/* ---------- Footer: woordmerk over de breedte, Constantijn erachter ---------- */
.footer {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: 140px; padding: 110px 0 0;
  border-top: 1px solid var(--border);
}
.footer-bg {
  position: absolute; z-index: -1; right: max(-200px, 50% - 820px); top: 0;
  width: 760px; max-width: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  opacity: .75;
}
.footer-inner { width: var(--page); margin: 0 auto; }
.footer-cta h2 { font-size: 88px; margin-bottom: 24px; }
.footer-cols {
  display: grid; grid-template-columns: repeat(4, minmax(0, 180px)); gap: 24px;
  margin-top: 96px;
}
.footer-cols h4 { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--muted); }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-cols a { color: #e6e6ea; text-decoration: none; font-size: 16px; }
.footer-cols a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-meta { margin: 30px 0 0; color: var(--muted); font-size: 14px; }
.footer-meta a { color: var(--muted); }
/* Alleen de bovenkant van het woord steekt boven de rand uit. Geen klikken: de tekstvakken van
   zo'n grote letter lopen boven de regel uit en lagen over de onderste links. */
.wordmark {
  display: block; margin: 40px auto -0.48em;
  pointer-events: none;
  text-align: center;
  font: 44vw/0.8 var(--display);
  letter-spacing: -0.01em;
  color: #2a2a2e;
  background: radial-gradient(circle, #6e6e73 36%, transparent 44%) 0 0 / .022em .022em;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  user-select: none;
  white-space: nowrap;
}

/* ---------- Juridische en losse pagina's ---------- */
.bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px max(20px, 50% - 380px);
  background: rgba(0, 0, 0, .78);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.bar .brand {
  display: flex; align-items: center; gap: 8px;
  font: 22px/1 var(--display); letter-spacing: .02em; text-decoration: none;
}
.bar .brand img { width: 26px; height: 26px; border-radius: 7px; }
.switch {
  display: inline-flex; padding: 4px; gap: 2px;
  border-radius: 999px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
.switch a {
  padding: 7px 14px; border-radius: 999px;
  font-size: 14px; text-decoration: none; color: var(--muted);
}
.switch a[aria-current="true"] { background: #fff; color: #000; font-weight: 600; }
.doc-hero {
  position: relative; height: 240px; overflow: hidden;
}
.doc-hero img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent);
  mask-image: linear-gradient(to bottom, #000 30%, transparent);
  opacity: .8;
}
.doc { width: min(760px, 100% - 40px); margin: -120px auto 0; position: relative; }
.doc h1 { margin: 0 0 10px; font: 72px/0.9 var(--display); letter-spacing: .005em; }
.doc .updated { margin: 0 0 32px; color: var(--muted); font-size: 15px; }
.doc h2 { font-size: 34px; margin: 48px 0 10px; line-height: 1; }
.doc h3 { font-size: 18px; margin: 28px 0 6px; }
.doc p, .doc li { color: #dcdce0; }
.doc ul { padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc li::marker { color: var(--accent); }
.doc a { color: var(--accent); text-underline-offset: 3px; }
.doc .intro { font-size: 19px; color: #e6e6ea; }
.doc .box {
  margin: 24px 0; padding: 20px 22px; border-radius: var(--r-medium);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border);
}
.doc .box p { margin: 0; }
.doc .box p + p { margin-top: 10px; }
.doc section[hidden] { display: none; }
.doc details {
  border-radius: var(--r-medium); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  margin: 8px 0;
}
.doc summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; font-weight: 600; font-size: 17px;
}
.doc summary::-webkit-details-marker { display: none; }
.doc summary .ring { color: var(--accent); font-size: 22px; transition: transform .4s ease-out; }
.doc details[open] summary .ring { transform: rotate(180deg); }
.doc details > div { padding: 0 22px 18px; }
.doc details > div p { margin: 0 0 10px; }
.mini-footer {
  width: min(760px, 100% - 40px); margin: 96px auto 0; padding: 28px 0 48px;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  font-size: 14px; color: var(--muted);
}
.mini-footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.mini-footer a { color: #d8d8dc; text-decoration: none; }
.mini-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Uitnodiging */
.invite-code {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 28px 0; padding: 10px 10px 10px 26px;
  border-radius: 999px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
.invite-code .code {
  font: 44px/1 var(--display); letter-spacing: .04em;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.copy {
  appearance: none; border: 0; cursor: pointer;
  padding: 14px 20px; border-radius: 999px;
  background: var(--accent); color: #fff; font: 600 15px/1 var(--body);
}
.steps { counter-reset: s; list-style: none; padding: 0 !important; margin: 0 0 32px; }
.steps li { counter-increment: s; display: flex; gap: 14px; align-items: baseline; margin: 10px 0; }
.steps li::before {
  content: counter(s);
  display: inline-grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  font: 18px/1 var(--display);
}

/* ---------- Mobiel ---------- */
@media (max-width: 900px) {
  .hero-statue { width: min(80vw, 80svh); left: 62%; }
  .hero-chip { left: 6%; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .tile.wide { grid-column: auto; }
  .split, .elite, .desk-body { grid-template-columns: minmax(0, 1fr); }
  .elite-col + .elite-col { box-shadow: inset 0 1px 0 var(--border); }
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-meta { grid-column: 1 / -1; margin-top: 0; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .nav { top: 10px; padding-left: 10px; }
  .nav a.link { display: none; }
  .nav .brand { margin-right: 18px; }

  .hero { min-height: 0; padding-bottom: 36px; }
  .hero-stage { position: relative; height: 600px; }
  .hero-word { top: 80px; left: 14px; text-align: left; font-size: 66vw; line-height: 0.78; }
  .hero-word span { display: block; }
  .hero-statue { left: 66%; width: 108vw; max-width: none; }
  .phone.hero-phone { width: 128px; right: 14px; bottom: 0; padding: 5px; border-radius: 24px; }
  .phone.hero-phone img { border-radius: 19px; }
  .hero-chip { left: 14px; top: auto; bottom: 150px; width: 190px; }
  .hero-copy { position: relative; left: auto; bottom: auto; padding: 0 20px; max-width: none; margin-top: -8px; }
  .hero h1 { font-size: 56px; }
  .btn { width: 100%; }

  .section { padding-top: 88px; }
  h2 { font-size: 48px; }
  .lead { font-size: 17px; }
  .tile { min-height: 0; aspect-ratio: auto; display: flex; flex-direction: column; justify-content: flex-end; }
  .tile .phone, .tile-strict .phone, .tile-session .phone, .tile-schedules .phone {
    position: relative; right: auto; top: auto;
    width: 200px; margin: 36px auto -120px;
  }
  .tile-strict .phone { transform: rotate(4deg); }
  .tile-text { position: relative; left: auto; right: auto; bottom: auto; padding: 150px 24px 26px; max-width: none; }
  .tile-phonefree { min-height: 460px; }
  .tile-phonefree .tile-text { padding-top: 0; }
  .tile .phone + .tile-text { padding-top: 140px; background: linear-gradient(to top, rgba(0,0,0,.85) 55%, transparent); }
  .tile h3 { font-size: 36px; }

  .halo { min-height: 480px; }
  .halo > .ring { width: 330px; height: 330px; }
  .halo .phone { width: 220px; }

  .elite-col { padding: 28px 22px; }
  .elite-cols-2 { grid-template-columns: 1fr; }
  .prices { grid-template-columns: 1fr; }
  .price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  .price .what { flex: 1 0 100%; }
  .private { grid-template-columns: 1fr; padding: 28px 22px; gap: 14px; }
  .desk-screen { height: 220px; }
  .desk-body { margin-top: -40px; padding: 0 22px 28px; gap: 28px; }
  .island { gap: 64px; }
  .private .ring { font-size: 48px; }
  .private h2 { font-size: 38px; }

  .footer { margin-top: 100px; padding-top: 80px; }
  .footer-bg { width: 520px; right: -170px; top: 10px; }
  .footer-cta h2 { font-size: 64px; }
  .footer-cols { grid-template-columns: 1fr 1fr; margin-top: 64px; }

  .doc-hero { height: 180px; }
  .doc { margin-top: -90px; }
  .doc h1 { font-size: 54px; }
  .doc h2 { font-size: 30px; }
  .invite-code { flex-direction: column; align-items: stretch; border-radius: var(--r-medium); padding: 18px; text-align: center; }
  .invite-code .code { font-size: 40px; }
}

.invite-hero img { object-position: 50% 28%; }
.doc .btn { text-decoration: none; }
.doc .btn-primary, .doc .btn-secondary { color: #fff; }
.doc > section { scroll-margin-top: 260px; }

/* ---------- Melding zolang een storelink nog ontbreekt ---------- */
.store-toast {
  position: fixed; z-index: 50; left: 50%; bottom: 28px;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  padding: 12px 20px; border-radius: 999px;
  background: var(--elevated); color: var(--text);
  box-shadow: 0 0 0 1px var(--border), 0 18px 50px rgba(0, 0, 0, .6);
  font-size: 15px; white-space: nowrap;
  transition: opacity .25s ease-out, transform .35s ease-out;
}
.store-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }