/* Medyum — medyumapp.com

   A night sky the app's screenshots can sit in. The palette is the app's own:
   near-black surfaces, amber gold, a little plum and rose from its artwork.
   Type is the app's too: Playfair Display where the app uses it for readings,
   Outfit where it greets you. No JavaScript anywhere — the CSP is
   script-src 'none' — so everything that moves is CSS, and all of it stops for
   visitors who have asked for less motion. */

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/outfit-normal-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: "Outfit";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/outfit-normal-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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/playfair-display-italic-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: "Playfair Display";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/playfair-display-italic-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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/playfair-display-normal-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: "Playfair Display";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/playfair-display-normal-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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  --bg: #07060a;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);
  --ink: #f5f1ea;
  --muted: #a8a1b3;
  --faint: #6e6779;
  --gold: #ffc107;
  --gold-soft: #f5d27a;
  --gold-deep: #c8961c;
  --plum: #6f45b8;
  --rose: #b85d72;
  --line: rgba(255, 255, 255, 0.09);
  --line-gold: rgba(255, 193, 7, 0.26);
  --radius: 22px;
  --shell: min(1160px, calc(100% - 40px));
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --stars-near: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Ccircle cx='124.5' cy='318.1' r='0.63' fill='#ffe7a8' fill-opacity='0.37'/%3E%3Ccircle cx='123.1' cy='18.2' r='0.58' fill='#ffffff' fill-opacity='0.77'/%3E%3Ccircle cx='340.4' cy='114.0' r='0.51' fill='#ffffff' fill-opacity='0.73'/%3E%3Ccircle cx='201.1' cy='396.7' r='0.59' fill='#ffffff' fill-opacity='0.79'/%3E%3Ccircle cx='23.2' cy='131.5' r='0.55' fill='#ffffff' fill-opacity='0.58'/%3E%3Ccircle cx='410.9' cy='52.5' r='0.86' fill='#ffffff' fill-opacity='0.63'/%3E%3Ccircle cx='214.9' cy='129.2' r='0.54' fill='#ffffff' fill-opacity='0.74'/%3E%3Ccircle cx='274.7' cy='260.3' r='1.08' fill='#ffffff' fill-opacity='0.52'/%3E%3Ccircle cx='400.6' cy='244.7' r='0.86' fill='#ffffff' fill-opacity='0.52'/%3E%3Ccircle cx='218.3' cy='100.2' r='0.71' fill='#ffe7a8' fill-opacity='0.69'/%3E%3Ccircle cx='330.4' cy='110.9' r='1.00' fill='#ffffff' fill-opacity='0.45'/%3E%3Ccircle cx='277.3' cy='390.3' r='0.89' fill='#ffffff' fill-opacity='0.47'/%3E%3Ccircle cx='41.8' cy='13.7' r='1.01' fill='#ffffff' fill-opacity='0.51'/%3E%3Ccircle cx='178.7' cy='122.0' r='1.07' fill='#ffffff' fill-opacity='0.74'/%3E%3Ccircle cx='74.5' cy='258.8' r='1.00' fill='#ffffff' fill-opacity='0.56'/%3E%3Ccircle cx='74.2' cy='28.1' r='0.72' fill='#ffffff' fill-opacity='0.58'/%3E%3Ccircle cx='311.2' cy='154.6' r='0.98' fill='#ffffff' fill-opacity='0.70'/%3E%3Ccircle cx='102.8' cy='78.8' r='0.70' fill='#ffffff' fill-opacity='0.66'/%3E%3Ccircle cx='258.4' cy='341.6' r='0.91' fill='#ffe7a8' fill-opacity='0.36'/%3E%3Ccircle cx='374.9' cy='189.9' r='0.78' fill='#ffffff' fill-opacity='0.68'/%3E%3Ccircle cx='330.7' cy='374.2' r='0.77' fill='#ffffff' fill-opacity='0.61'/%3E%3Ccircle cx='247.1' cy='145.7' r='0.95' fill='#ffffff' fill-opacity='0.43'/%3E%3Ccircle cx='389.6' cy='47.7' r='0.95' fill='#ffffff' fill-opacity='0.74'/%3E%3Ccircle cx='367.7' cy='266.3' r='0.53' fill='#ffffff' fill-opacity='0.54'/%3E%3Ccircle cx='137.8' cy='127.0' r='0.61' fill='#ffffff' fill-opacity='0.64'/%3E%3Ccircle cx='108.1' cy='374.9' r='0.63' fill='#ffffff' fill-opacity='0.55'/%3E%3Ccircle cx='40.9' cy='332.2' r='0.71' fill='#ffffff' fill-opacity='0.36'/%3E%3Ccircle cx='159.3' cy='198.9' r='0.59' fill='#ffe7a8' fill-opacity='0.84'/%3E%3Ccircle cx='239.4' cy='299.9' r='1.05' fill='#ffffff' fill-opacity='0.49'/%3E%3Ccircle cx='248.6' cy='356.5' r='1.15' fill='#ffffff' fill-opacity='0.76'/%3E%3Ccircle cx='85.4' cy='142.7' r='0.51' fill='#ffffff' fill-opacity='0.70'/%3E%3Ccircle cx='403.5' cy='46.8' r='0.99' fill='#ffffff' fill-opacity='0.79'/%3E%3Ccircle cx='40.4' cy='32.9' r='0.66' fill='#ffffff' fill-opacity='0.72'/%3E%3Ccircle cx='49.8' cy='318.1' r='0.55' fill='#ffffff' fill-opacity='0.84'/%3E%3C/svg%3E");
  --stars-far: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Ccircle cx='143.2' cy='234.4' r='0.63' fill='#ffe7a8' fill-opacity='0.34'/%3E%3Ccircle cx='12.4' cy='219.7' r='0.33' fill='#ffffff' fill-opacity='0.28'/%3E%3Ccircle cx='36.3' cy='81.2' r='0.47' fill='#ffffff' fill-opacity='0.25'/%3E%3Ccircle cx='153.0' cy='123.5' r='0.42' fill='#ffffff' fill-opacity='0.42'/%3E%3Ccircle cx='35.6' cy='205.7' r='0.45' fill='#ffffff' fill-opacity='0.47'/%3E%3Ccircle cx='98.4' cy='70.9' r='0.53' fill='#ffffff' fill-opacity='0.43'/%3E%3Ccircle cx='197.3' cy='172.8' r='0.52' fill='#ffffff' fill-opacity='0.26'/%3E%3Ccircle cx='92.6' cy='11.4' r='0.39' fill='#ffffff' fill-opacity='0.25'/%3E%3Ccircle cx='242.9' cy='236.1' r='0.40' fill='#ffffff' fill-opacity='0.24'/%3E%3Ccircle cx='23.6' cy='188.4' r='0.38' fill='#ffe7a8' fill-opacity='0.37'/%3E%3Ccircle cx='252.7' cy='143.6' r='0.31' fill='#ffffff' fill-opacity='0.46'/%3E%3Ccircle cx='151.4' cy='46.3' r='0.48' fill='#ffffff' fill-opacity='0.40'/%3E%3Ccircle cx='174.3' cy='96.4' r='0.52' fill='#ffffff' fill-opacity='0.31'/%3E%3Ccircle cx='247.1' cy='229.1' r='0.68' fill='#ffffff' fill-opacity='0.23'/%3E%3Ccircle cx='180.3' cy='70.3' r='0.58' fill='#ffffff' fill-opacity='0.30'/%3E%3Ccircle cx='52.3' cy='186.6' r='0.55' fill='#ffffff' fill-opacity='0.17'/%3E%3Ccircle cx='258.4' cy='231.3' r='0.57' fill='#ffffff' fill-opacity='0.42'/%3E%3Ccircle cx='99.6' cy='218.5' r='0.33' fill='#ffffff' fill-opacity='0.46'/%3E%3Ccircle cx='110.4' cy='198.3' r='0.58' fill='#ffe7a8' fill-opacity='0.47'/%3E%3Ccircle cx='18.2' cy='252.7' r='0.53' fill='#ffffff' fill-opacity='0.30'/%3E%3Ccircle cx='220.8' cy='207.3' r='0.58' fill='#ffffff' fill-opacity='0.44'/%3E%3Ccircle cx='161.3' cy='75.9' r='0.34' fill='#ffffff' fill-opacity='0.16'/%3E%3Ccircle cx='244.8' cy='186.4' r='0.59' fill='#ffffff' fill-opacity='0.15'/%3E%3Ccircle cx='96.7' cy='123.0' r='0.54' fill='#ffffff' fill-opacity='0.33'/%3E%3Ccircle cx='235.8' cy='113.7' r='0.32' fill='#ffffff' fill-opacity='0.47'/%3E%3Ccircle cx='141.5' cy='238.4' r='0.46' fill='#ffffff' fill-opacity='0.38'/%3E%3Ccircle cx='155.7' cy='208.3' r='0.45' fill='#ffffff' fill-opacity='0.17'/%3E%3Ccircle cx='206.5' cy='89.7' r='0.57' fill='#ffe7a8' fill-opacity='0.17'/%3E%3Ccircle cx='29.5' cy='0.7' r='0.34' fill='#ffffff' fill-opacity='0.18'/%3E%3Ccircle cx='236.5' cy='105.9' r='0.38' fill='#ffffff' fill-opacity='0.20'/%3E%3Ccircle cx='165.4' cy='238.9' r='0.67' fill='#ffffff' fill-opacity='0.50'/%3E%3Ccircle cx='189.6' cy='103.1' r='0.54' fill='#ffffff' fill-opacity='0.21'/%3E%3Ccircle cx='227.7' cy='147.1' r='0.48' fill='#ffffff' fill-opacity='0.38'/%3E%3Ccircle cx='37.9' cy='169.4' r='0.31' fill='#ffffff' fill-opacity='0.18'/%3E%3Ccircle cx='160.4' cy='172.4' r='0.47' fill='#ffffff' fill-opacity='0.43'/%3E%3Ccircle cx='230.9' cy='187.8' r='0.61' fill='#ffffff' fill-opacity='0.41'/%3E%3Ccircle cx='42.6' cy='174.9' r='0.66' fill='#ffe7a8' fill-opacity='0.33'/%3E%3Ccircle cx='74.5' cy='34.2' r='0.44' fill='#ffffff' fill-opacity='0.45'/%3E%3Ccircle cx='250.8' cy='195.3' r='0.66' fill='#ffffff' fill-opacity='0.50'/%3E%3Ccircle cx='124.6' cy='67.9' r='0.34' fill='#ffffff' fill-opacity='0.29'/%3E%3Ccircle cx='214.0' cy='161.3' r='0.54' fill='#ffffff' fill-opacity='0.42'/%3E%3Ccircle cx='237.8' cy='179.5' r='0.40' fill='#ffffff' fill-opacity='0.19'/%3E%3Ccircle cx='155.0' cy='4.1' r='0.60' fill='#ffffff' fill-opacity='0.26'/%3E%3Ccircle cx='207.6' cy='60.8' r='0.36' fill='#ffffff' fill-opacity='0.26'/%3E%3Ccircle cx='103.1' cy='217.4' r='0.31' fill='#ffffff' fill-opacity='0.17'/%3E%3Ccircle cx='64.8' cy='185.4' r='0.55' fill='#ffe7a8' fill-opacity='0.24'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* The sticky header would otherwise cover whatever an anchor jumps to. */
  scroll-padding-top: 92px;
  color-scheme: dark;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font: 17px/1.65 var(--sans);
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* The hero's ring and the tilted phones bleed to the screen's edge, not past
   it. Clip rather than hidden: it makes no scroll container, and iOS Safari
   can still pan into overflow that only the body hides. */
main { overflow-x: clip; }

/* The sky: two drifting layers of stars over two soft colour fields. Fixed and
   behind everything, so it reads as atmosphere rather than decoration. */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60vw 60vw at 8% -12%, rgba(111, 69, 184, 0.22), transparent 62%),
    radial-gradient(55vw 55vw at 100% 108%, rgba(184, 93, 114, 0.16), transparent 60%),
    radial-gradient(44vw 30vw at 70% 8%, rgba(255, 193, 7, 0.07), transparent 70%);
}
.sky::before,
.sky::after {
  content: "";
  position: absolute;
  inset: -20% 0 0;
  background-image: var(--stars-far);
  opacity: 0.55;
}
.sky::after {
  background-image: var(--stars-near);
  opacity: 0.7;
}

a { color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: rgba(255, 193, 7, 0.32); color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.shell { width: var(--shell); margin-inline: auto; }

h1, h2, h3, .serif {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 em, h2 em, .serif em {
  font-style: italic;
  font-weight: 500;
  color: var(--gold-soft);
}
p { text-wrap: pretty; }
strong { font-weight: 600; }

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--gold);
  color: #1c1405;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 14px; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--gold);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.kicker::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.section-title { margin: 0 0 16px; font-size: clamp(32px, 4.4vw, 50px); line-height: 1.08; }
.section-lede { max-width: 620px; margin: 0; color: var(--muted); font-size: 18.5px; }

/* ---------- header ---------- */

.topbar-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid transparent;
}
/* The rule appears once the page has moved, so the hero starts seamless. A
   scroll-driven animation, since there is no script to listen for scrolling. */
@supports (animation-timeline: scroll()) {
  .topbar-wrap {
    animation: topbar-stick linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 40px;
  }
  @keyframes topbar-stick { to { border-bottom-color: var(--line); } }
}

.topbar {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 1 auto; min-width: 0; }
/* The wordmark file is drawn for 3x displays; the attributes carry the real
   layout size so a stale stylesheet cannot blow it up. */
.brand img { width: auto; height: 30px; max-width: 100%; }

.nav { display: flex; align-items: center; gap: 24px; font-size: 15px; color: var(--muted); }
.nav a { text-decoration: none; transition: color 0.15s; }
.nav a:hover { color: var(--ink); }
.nav .lang { color: var(--gold-soft); }

.button,
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-soft), #e0a020);
  color: #241a05 !important;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(224, 160, 32, 0.2);
  transition: transform 0.15s, box-shadow 0.15s;
}
.button:hover,
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 16px 36px rgba(224, 160, 32, 0.28); }
.nav-cta { padding: 10px 18px; font-size: 14.5px; }

/* ---------- store badges ---------- */

.store-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 168px;
  padding: 11px 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.35);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.store-badge:hover { border-color: var(--line-gold); background: rgba(255, 193, 7, 0.06); transform: translateY(-1px); }
.store-badge svg { width: 26px; height: 26px; flex: none; fill: currentColor; }
.store-badge-small { display: block; font-size: 11.5px; line-height: 1.1; color: var(--muted); }
.store-badge-name { display: block; font-size: 18px; line-height: 1.15; font-weight: 600; white-space: nowrap; }
.store-note { margin: 14px 0 0; color: var(--faint); font-size: 14px; }

/* ---------- phone frame ----------
   Screenshots are raw iPhone 16 Pro captures: status bar and Dynamic Island
   are already in them, so the frame supplies only the bezel. Its geometry is
   proportional, so it holds at every size, and the aspect-ratio reserves the
   space before the image arrives, so nothing shifts. */

.device {
  position: relative;
  width: 100%;
  padding: 3.2%;
  border-radius: 15.5% / 7.1%;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.26), transparent 7% 92%, rgba(255, 255, 255, 0.16)),
    linear-gradient(160deg, #4b4852, #0b0a0e 38%, #29262e 72%, #09080b);
  box-shadow:
    0 50px 90px -20px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 0 0 3px rgba(0, 0, 0, 0.75);
  isolation: isolate;
}
.device img {
  width: 100%;
  height: auto;
  aspect-ratio: 1206 / 2622;
  object-fit: cover;
  border-radius: 12.6% / 5.8%;
  background: #111;
}

/* ---------- hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
  padding: clamp(40px, 7vw, 84px) 0 clamp(56px, 8vw, 100px);
}
.eyebrow {
  display: inline-block;
  margin-bottom: 22px;
  padding: 8px 15px;
  border: 1px solid var(--line-gold);
  border-radius: 999px;
  background: rgba(255, 193, 7, 0.06);
  color: var(--gold-soft);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
}
.hero h1 { margin: 0 0 22px; font-size: clamp(46px, 6.6vw, 84px); line-height: 1.02; }
.hero-copy { max-width: 500px; margin: 0 0 32px; color: var(--muted); font-size: clamp(18px, 1.7vw, 20.5px); }

/* Three phones held like a hand of cards — the way the app's own deck fans —
   in front of a slowly turning astrolabe. */
.hero-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(640px, 118vw);
}
.astrolabe {
  position: absolute;
  width: min(620px, 118%);
  aspect-ratio: 1;
  color: rgba(255, 207, 90, 0.34);
  filter: drop-shadow(0 0 18px rgba(255, 193, 7, 0.12));
}
.hero-stage::before {
  content: "";
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 193, 7, 0.2), rgba(111, 69, 184, 0.12) 45%, transparent 70%);
  filter: blur(10px);
}
.fan { position: relative; width: min(520px, 100%); height: min(560px, 108vw); }
.fan .device {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 46%;
  transform-origin: 50% 130%;
}
.fan .device:nth-child(1) { transform: translateX(-50%) rotate(-12deg) translateY(4%); z-index: 1; }
.fan .device:nth-child(2) { transform: translateX(-50%) translateY(-5%); z-index: 3; }
.fan .device:nth-child(3) { transform: translateX(-50%) rotate(12deg) translateY(4%); z-index: 2; }
.fan .device:nth-child(1) img,
.fan .device:nth-child(3) img { filter: brightness(0.82); }

/* ---------- statement ---------- */

.statement {
  margin: 0 auto;
  padding: clamp(40px, 6vw, 70px) 20px;
  max-width: 900px;
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.3;
  color: #efe7da;
}
.statement::before,
.statement::after {
  content: "✦";
  display: block;
  margin: 0 auto 18px;
  color: var(--gold);
  font-style: normal;
  font-size: 15px;
  opacity: 0.8;
}
.statement::after { margin: 18px auto 0; }

/* ---------- how it works ---------- */

.steps { padding: clamp(50px, 8vw, 96px) 0 clamp(20px, 4vw, 40px); }
.step-grid {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 30px 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
}
.step::before {
  counter-increment: step;
  content: counter(step, upper-roman);
  display: block;
  margin-bottom: 18px;
  font-family: var(--display);
  font-style: italic;
  font-size: 30px;
  line-height: 1;
  color: var(--gold);
}
.step h3 { margin: 0 0 8px; font-size: 22px; }
.step p { margin: 0; color: var(--muted); font-size: 16.5px; }

/* ---------- features ---------- */

.features { padding: clamp(40px, 6vw, 80px) 0 20px; }
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(30px, 6vw, 90px);
  padding: clamp(40px, 6vw, 80px) 0;
}
.feature + .feature { border-top: 1px solid var(--line); }
.feature:nth-child(even) .feature-copy { order: 2; }
.feature h2 { margin: 0 0 16px; font-size: clamp(32px, 3.8vw, 46px); line-height: 1.08; }
.feature-copy > p { margin: 0 0 22px; color: var(--muted); font-size: 18px; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 28px; color: #e5ddd0; }
.ticks li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--gold);
  font-size: 13px;
}
.feature-shot { position: relative; display: grid; place-items: center; min-height: 420px; }
.feature-shot::before {
  content: "";
  position: absolute;
  width: 88%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 193, 7, 0.14), transparent 65%);
}
.feature-shot .device { width: min(300px, 74%); }
/* Sized by ratio, not height, so both phones always fit their box. */
.pair { position: relative; width: min(440px, 100%); aspect-ratio: 44 / 62; }
.pair .device { position: absolute; width: 57%; }
.pair .device:first-child { left: 0; top: 0; transform: rotate(-5deg); z-index: 2; }
.pair .device:last-child { right: 0; bottom: 0; transform: rotate(6deg); }
.pair .device:last-child img { filter: brightness(0.85); }

/* ---------- more ---------- */

.more { padding: clamp(50px, 8vw, 100px) 0; }
.more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
}
.tile {
  position: relative;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.tile:hover { border-color: var(--line-gold); background: rgba(255, 193, 7, 0.04); transform: translateY(-2px); }
.tile svg { width: 34px; height: 34px; margin-bottom: 16px; color: var(--gold-soft); }
.tile h3 { margin: 0 0 6px; font-size: 21px; }
.tile p { margin: 0; color: var(--muted); font-size: 16px; }
.premium {
  position: absolute;
  top: 22px;
  right: 20px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-gold);
  color: var(--gold-soft);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- gallery ---------- */

.gallery { padding: clamp(40px, 6vw, 80px) 0; }
.gallery-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 230px);
  gap: 26px;
  margin-top: 36px;
  padding: 10px max(20px, calc((100vw - 1160px) / 2)) 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, transparent, #000 5% 95%, transparent);
}
.gallery-strip::-webkit-scrollbar { display: none; }
.gallery-strip figure { margin: 0; scroll-snap-align: center; }
.gallery-strip figcaption { margin-top: 14px; text-align: center; color: var(--muted); font-size: 15px; }

/* ---------- trust ---------- */

.trust { padding: clamp(50px, 7vw, 90px) 0; }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 36px;
}
.trust-item { padding: 26px 24px; border-top: 1px solid var(--line-gold); }
.trust-item h3 { margin: 0 0 8px; font-size: 21px; }
.trust-item p { margin: 0; color: var(--muted); font-size: 16px; }
.trust-item a { color: var(--gold-soft); }

/* ---------- call to action ---------- */

.cta {
  position: relative;
  margin: clamp(30px, 5vw, 60px) auto clamp(50px, 7vw, 90px);
  padding: clamp(44px, 7vw, 76px) clamp(24px, 5vw, 60px);
  border: 1px solid var(--line);
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 193, 7, 0.16), transparent 60%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  text-align: center;
  overflow: hidden;
}
.cta h2 { margin: 0 0 14px; font-size: clamp(36px, 5vw, 58px); line-height: 1.05; }
.cta p { max-width: 540px; margin: 0 auto 28px; color: var(--muted); font-size: 18px; }
.cta .store-buttons { justify-content: center; }

.disclaimer {
  margin: 0 auto 80px;
  max-width: 860px;
  padding: 20px 24px;
  border: 1px solid var(--line-gold);
  border-radius: 18px;
  background: rgba(255, 193, 7, 0.045);
  color: #e3dcea;
  font-size: 15px;
}
.disclaimer strong { color: var(--gold-soft); }

/* ---------- footer ---------- */

.footer { padding: 46px 0 30px; color: var(--muted); font-size: 14.5px; }
.footer-grid { display: flex; justify-content: space-between; gap: 30px; padding-bottom: 34px; }
.footer p { max-width: 300px; }
.footer .brand img { height: 26px; }
.footer-links { display: flex; gap: 18px; align-content: flex-start; flex-wrap: wrap; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--ink); }
.fine { padding-top: 20px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--faint); }

/* ---------- legal and support pages ---------- */

.legal { max-width: 820px; padding: 40px 0 90px; }
.legal-nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 36px;
  color: var(--gold);
  font-size: 14.5px;
}
.legal-nav a { text-decoration: none; }
.legal-nav a:hover { text-decoration: underline; }
.legal-note {
  padding: 18px 20px;
  margin: 20px 0;
  border: 1px solid var(--line-gold);
  border-radius: 16px;
  background: rgba(255, 193, 7, 0.05);
}
.legal-note strong { color: var(--gold-soft); }
.legal hr { margin: 64px 0; border: 0; border-top: 1px solid var(--line); }
.legal-footer {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
.legal h1 { font-size: clamp(36px, 5vw, 52px); margin: 0 0 10px; }
.legal h2 { margin: 40px 0 12px; font-size: 24px; }
.legal h3 { margin: 26px 0 8px; font-size: 18px; font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
.legal p, .legal li { color: #ded8e6; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal .updated { color: var(--muted); font-size: 15px; }
.legal table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14.5px; }
.legal th, .legal td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal th { background: rgba(255, 255, 255, 0.04); }
.legal .table-scroll { overflow-x: auto; }
.text-link { color: var(--gold); }

/* ---------- coming-soon dialog ----------
   Driven by :target: the badges link to the dialog and the close control links
   back to #. With no script allowed, this keeps the interaction and the CSP. */

.coming-soon {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 3, 6, 0.74);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s, visibility 0.22s;
}
.coming-soon:target { opacity: 1; visibility: visible; }
.coming-soon-panel {
  position: relative;
  width: min(420px, 100%);
  padding: 36px 30px 30px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    radial-gradient(circle at 80% 0%, rgba(255, 193, 7, 0.15), transparent 60%),
    #121016;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  text-align: center;
  transform: translateY(12px) scale(0.97);
  transition: transform 0.22s;
}
.coming-soon:target .coming-soon-panel { transform: none; }
.coming-soon-panel h2 { margin: 0 0 10px; font-size: 30px; }
.coming-soon-panel p { margin: 0 0 22px; color: var(--muted); font-size: 16px; }
/* Behind the panel and over the whole viewport: a tap outside dismisses. */
.coming-soon-dismiss { position: absolute; inset: 0; z-index: -1; }
.coming-soon-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.coming-soon-close:hover { background: rgba(255, 255, 255, 0.06); }

/* ---------- motion ----------
   All of it is progressive: without support the page is simply still, and
   none of it runs for visitors who prefer reduced motion. */

@media (prefers-reduced-motion: no-preference) {
  /* The sky drifts, one layer slower than the other. */
  .sky::before { animation: drift 180s linear infinite; }
  .sky::after { animation: drift 120s linear infinite reverse, twinkle 7s ease-in-out infinite alternate; }
  @keyframes drift { to { transform: translateY(20%); } }
  @keyframes twinkle { from { opacity: 0.45; } to { opacity: 0.8; } }

  .astrolabe { animation: turn 160s linear infinite; }
  @keyframes turn { to { rotate: 360deg; } }

  /* Above the fold, so it plays once on load, each part a beat behind. */
  .hero-copy-block > * { animation: rise-in 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  .hero-copy-block > :nth-child(1) { animation-delay: 0.05s; }
  .hero-copy-block > :nth-child(2) { animation-delay: 0.13s; }
  .hero-copy-block > :nth-child(3) { animation-delay: 0.21s; }
  .hero-copy-block > :nth-child(4) { animation-delay: 0.29s; }
  .hero-copy-block > :nth-child(5) { animation-delay: 0.37s; }
  @keyframes rise-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
  }

  /* The hand of phones deals out from a single stack, like the app's deck. */
  .fan .device { animation: deal 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  .fan .device:nth-child(1) { --to: translateX(-50%) rotate(-12deg) translateY(4%); animation-delay: 0.25s; }
  .fan .device:nth-child(2) { --to: translateX(-50%) translateY(-5%); animation-delay: 0.1s; }
  .fan .device:nth-child(3) { --to: translateX(-50%) rotate(12deg) translateY(4%); animation-delay: 0.35s; }
  @keyframes deal {
    from { opacity: 0; transform: translateX(-50%) translateY(10%) scale(0.94); }
    to { opacity: 1; transform: var(--to); }
  }

  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 25%;
    }
    @keyframes reveal-in {
      from { opacity: 0; transform: translateY(28px); }
      to { opacity: 1; transform: none; }
    }
  }
}

/* ---------- smaller screens ---------- */

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; text-align: center; }
  .hero-copy { margin-inline: auto; }
  .hero .store-buttons { justify-content: center; }
  .hero-stage { min-height: 0; margin-top: 10px; }
  .fan { height: min(520px, 112vw); }
  .feature { grid-template-columns: 1fr; }
  .feature:nth-child(even) .feature-copy { order: 0; }
  .feature-shot { min-height: 0; }
  .step-grid, .more-grid, .trust-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  :root { --shell: min(100% - 32px, 1160px); }
  body { font-size: 16.5px; }
  .topbar { height: 66px; }
  .nav a:not(.nav-cta):not(.lang) { display: none; }
  .nav { gap: 16px; }
  .step-grid, .more-grid, .trust-grid { grid-template-columns: 1fr; }
  .footer-grid { display: block; }
  .footer-links { margin-top: 24px; }
  .store-badge { min-width: 0; flex: 1 1 150px; }
  /* The tilted phones' corners reach ~20px past the pair; keep them inside
     the gutter, as iOS Safari can pan to overflow the body hides. */
  .pair { width: min(440px, 86%); margin-inline: auto; }
}