/* ─────────────────────────────────────────────────────────────
   join.maxpotential.pro

   Geist + Geist Mono (OFL), self-hosted. latin + latin-ext are split
   so Türkçe ş / ğ / İ come from the font instead of silently falling
   back to a system face mid-word.
   ───────────────────────────────────────────────────────────── */
@font-face{
  font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/assets/fonts/geist-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/assets/fonts/geist-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"GeistMono";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/assets/fonts/geist-mono-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"GeistMono";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/assets/fonts/geist-mono-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── tokens ───────────────────────────────────────────────────
   Sampled from the app, not invented: --void is mp-mobile's splash
   backgroundColor, --lime is the dashboard's --color-primary-500, and
   the gradient stops come off assets/icon.png itself.
   ───────────────────────────────────────────────────────────── */
:root{
  --void:#09090B;
  --panel:#14141B;
  --raised:#1D1D26;
  --line:#2A2A35;
  --ink:#F2F5EF;
  --mute:#8E9587;          /* grey biased toward the lime, not a dead grey */
  --faint:#5C6157;
  --lime:#84FF00;
  --aqua:#18FFF7;

  /* The QR plate is a physical, scannable object — it keeps the bright
     gradient in both themes so the modules never lose contrast. */
  --grad-bright:linear-gradient(118deg,#81FF30 0%,#4DFFC8 52%,#18FFF7 100%);
  --grad:linear-gradient(118deg,#81FF30 0%,#4DFFC8 52%,#18FFF7 100%);
  --on-grad:#07110B;

  --shadow:0 24px 60px -28px rgb(0 0 0 / .85);
  --r:14px;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:"GeistMono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* The page follows the device. No toggle — one less decision for someone
   who is here for three seconds. */
@media (prefers-color-scheme:light){
  :root{
    --void:#F3F7EE; --panel:#FFFFFF; --raised:#F7FAF3; --line:#DDE4D6;
    --ink:#0D1310; --mute:#5C6357; --faint:#8B9284;
    --lime:#4C9600; --aqua:#00A79E;   /* full-chroma lime is unreadable on paper */
    --grad:linear-gradient(118deg,#3C8A00 0%,#00807C 100%);
    --on-grad:#F2FBF0;
    --shadow:0 20px 44px -26px rgb(20 34 18 / .30);
  }
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;background:var(--void);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:8px;}

/* Any class-level `display` beats the UA stylesheet's [hidden] rule, so the
   attribute silently stops working (.timer sets display:flex). Restore it. */
[hidden]{display:none !important;}

/* faint module field — QR modules, turned way down */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(to right,color-mix(in srgb,var(--ink) 5%,transparent) 1px,transparent 1px),
    linear-gradient(to bottom,color-mix(in srgb,var(--ink) 5%,transparent) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(ellipse 90% 65% at 50% 0%,#000 0%,transparent 78%);
}

/* ── shell ────────────────────────────────────────────────── */
.gate{
  position:relative;z-index:1;
  min-height:100%;max-width:1060px;margin:0 auto;
  padding:28px 24px calc(34px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;
}
.mark{display:flex;align-items:center;gap:11px;}
.mark img{border-radius:9px;display:block;}
.mark span{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--mute);
}

.body{flex:1;display:flex;flex-direction:column;}
.copy{display:flex;flex-direction:column;flex:1;min-width:0;}
.pitch{min-width:0;}
.actions{display:flex;flex-direction:column;min-width:0;}

h1{
  margin:0;font-size:clamp(30px,7.4vw,34px);line-height:1.12;
  font-weight:600;letter-spacing:-.03em;text-wrap:balance;
}
.lede{margin:13px 0 0;color:var(--mute);font-size:15px;max-width:34ch;}

/* ── store cards ──────────────────────────────────────────── */
.stores{display:grid;gap:12px;margin-top:26px;}
.card{
  display:flex;align-items:center;gap:13px;padding:15px 16px;text-decoration:none;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .18s,transform .18s;
}
.card:hover{border-color:color-mix(in srgb,var(--lime) 55%,var(--line));transform:translateY(-2px);}
.card__ico{width:26px;height:26px;flex:none;color:var(--ink);}
.card__ico svg{width:100%;height:100%;display:block;}
.card__t{display:flex;flex-direction:column;gap:1px;min-width:0;}
.card__k{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.05em;color:var(--faint);}
.card__v{font-size:15px;font-weight:600;letter-spacing:-.015em;}
.card__meta{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--faint);white-space:nowrap;}

/* ── the one door, thumb-height ───────────────────────────── */
.door{
  display:flex;align-items:center;justify-content:center;gap:11px;
  padding:17px 20px;border-radius:15px;text-decoration:none;
  background:var(--grad);color:var(--on-grad);
  font-size:16.5px;font-weight:650;letter-spacing:-.012em;
  transition:transform .16s ease,filter .16s ease;
}
.door:hover{transform:translateY(-2px);filter:brightness(1.06);}
.door:active{transform:translateY(0);}
.door svg{width:19px;height:19px;flex:none;}

.timer{
  margin-top:16px;border:1px solid var(--line);border-radius:11px;background:var(--panel);
  padding:11px 14px;display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:11.5px;color:var(--mute);
}
.timer__ring{width:17px;height:17px;flex:none;}
.timer__ring circle{fill:none;stroke-width:2.5;}
.timer__ring .bg{stroke:var(--line);}
.timer__ring .fg{stroke:var(--lime);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;}
.timer__txt{flex:1;}
.timer__txt b{color:var(--ink);font-weight:600;}
.timer button{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;
  background:none;border:1px solid var(--line);border-radius:7px;color:var(--mute);
  padding:5px 10px;cursor:pointer;transition:color .16s,border-color .16s;
}
.timer button:hover{color:var(--ink);border-color:var(--mute);}
.timer[data-state="off"]{opacity:.6;}

.hint{margin:14px 0 0;text-align:center;font-size:13px;color:var(--mute);}
.alt{
  margin:18px 0 0;text-align:center;font-family:var(--mono);font-size:12px;
  color:var(--mute);line-height:2.1;
}
.alt a{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;}
.alt a:hover{color:var(--ink);border-color:var(--lime);}
.alt__sep{color:var(--faint);margin:0 10px;}

/* ── QR ───────────────────────────────────────────────────── */
.qr{width:100%;max-width:300px;}
.qr__plate{
  position:relative;padding:16px;border-radius:26px;background:var(--grad-bright);
  box-shadow:0 22px 50px -26px color-mix(in srgb,var(--aqua) 55%,transparent);
  overflow:hidden;
}
.qr__plate canvas{display:block;width:100%;height:auto;aspect-ratio:1;image-rendering:pixelated;}
.qr__sweep{
  position:absolute;inset:0;pointer-events:none;translate:-130% 0;
  background:linear-gradient(105deg,transparent 38%,rgb(255 255 255 / .5) 50%,transparent 62%);
}
.qr.is-in .qr__sweep{animation:sweep 1.15s .35s cubic-bezier(.4,0,.2,1) both;}
@keyframes sweep{from{translate:-130% 0;}to{translate:130% 0;}}
.qr__cap{
  margin:14px 0 0;text-align:center;font-family:var(--mono);font-size:12px;
  font-weight:500;color:var(--mute);
}

/* ── platform variants ────────────────────────────────────────
   One document, three faces. Everything is visible by default so a
   browser with JavaScript off still shows both store cards; the head
   script narrows it down before the first paint.
   ───────────────────────────────────────────────────────────── */
.door,.lede--phone{display:none;}
.qr{display:none;}

/* phone: the pitch floats in whatever space is left, the door stays parked in
   the thumb zone at the bottom */
[data-platform="ios"] .lede--desk,
[data-platform="android"] .lede--desk,
[data-platform="ios"] .stores,
[data-platform="android"] .stores{display:none;}
[data-platform="ios"] .lede--phone,
[data-platform="android"] .lede--phone{display:block;}
[data-platform="ios"] .door,
[data-platform="android"] .door{display:flex;}
[data-platform="ios"] .pitch,
[data-platform="android"] .pitch{margin:auto 0;padding:24px 0;}

/* desktop: the QR carries the page, cards sit under the copy */
[data-platform="desktop"] .qr{display:block;}
@media (min-width:840px){
  [data-platform="desktop"] .body{
    flex-direction:row;align-items:center;justify-content:space-between;gap:64px;
    padding:40px 0;
  }
  [data-platform="desktop"] .copy{flex:0 1 520px;}
  [data-platform="desktop"] .qr{flex:none;}
  [data-platform="desktop"] h1{font-size:46px;letter-spacing:-.034em;}
  [data-platform="desktop"] .lede{font-size:16.5px;max-width:42ch;}
  [data-platform="desktop"] .stores{grid-template-columns:1fr 1fr;}
}
@media (max-width:839px){
  [data-platform="desktop"] .body{justify-content:center;gap:38px;padding:34px 0;}
  [data-platform="desktop"] .qr{margin:0 auto;}
}

/* unknown (no JS): both cards, no QR, no timer */
[data-platform="unknown"] .lede--desk{display:block;}
[data-platform="unknown"] .body{justify-content:center;padding:34px 0;}
@media (min-width:840px){
  [data-platform="unknown"] .stores{grid-template-columns:1fr 1fr;}
}

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