/* ══ BRAND, AWWWARDS PASS, PHASE 1 (17 Oct 2026, PREVIEW) ═════════════════════
   Daniel: "I feel like the site doesn't look near as cool as it did a few days
   ago… the header font and the hero. The overall colors don't match our brand
   at all", then, after the research and plan (LOG.md, 17 Oct), "Build it".

   Starts again from the live site's own look (main.css + hero.css: heavy
   Poppins, the italic gradient line, the logo gradient), NOT from the calm,
   parchment and serif passes, which are unlinked (css/calm.css and
   css/editorial.css stay in the repo, unused).
   Phase 1 = the top of the page and How it works as a scroll story.
   Kept from the last rounds: the live reels, the floating island nav, the
   arrow in a circle on buttons, the deep violet membership card.
   ⚠️ No marquee, no carousel, no sticky bottom bar, no custom cursor.
   ⚠️ No copy changes. */

:root {
  --cm-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --br-violet: #6b2ac1; --br-magenta: #a52fa8; --br-pink: #e0407a;
  --br-grad: linear-gradient(100deg, #6b2ac1 0%, #a52fa8 50%, #e0407a 100%);
  --br-night: #140a30; --br-ink: #1b1530;
  --br-ease: cubic-bezier(.32, .72, 0, 1);
}

/* ── the floating island nav (white glass, color logo) ── */
.nav, .nav.scrolled { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav .nav-inner {
  width: min(1200px, calc(100% - 28px)); margin: 12px auto 0; padding: 8px 8px 8px 26px;
  border-radius: 999px; background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: 0 0 0 1px rgba(27, 21, 48, .06), 0 18px 40px -24px rgba(36, 20, 88, .35), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.nav.scrolled .nav-inner { background: rgba(255, 255, 255, .86); }
.nav .nav-logo .nl-color { display: inline; }
.nav .nav-logo .nl-white { display: none; }
.nav .nav-logo img { height: 26px; }
.nav .nav-links a, .nav .nl-right a:not(.btn) { color: rgba(27, 21, 48, .78); }
.nav .nav-links a:hover, .nav .nl-right a:not(.btn):hover { color: var(--br-ink); }
.nav .nl-right a.btn-white, .nav.scrolled .nl-right a.btn-white {
  background: var(--br-ink); color: #fff; box-shadow: none; padding: 10px 20px;
}
.nav .nl-right a.btn-white:hover { transform: none; background: #2a2148; }
.nav .nav-burger span { background: var(--br-ink); }
@media (max-width: 900px) {
  .nav .nav-inner { width: calc(100% - 20px); margin-top: 10px; padding: 6px 6px 6px 8px; }
  .nav .nav-burger { left: 6px; }
  .nav:has(.nav-burger.open) .nav-logo .nl-color { display: inline; }
  .nav:has(.nav-burger.open) .nav-logo .nl-white { display: none; }
  .nav-burger.open span { background: var(--br-ink); }
  .nav:not(.scrolled):has(.nav-burger.open) .nl-right a.btn-white { color: #fff; box-shadow: none; }
  /* the menu: frosted, the links rise in one after another */
  .mobile-menu { background: rgba(250, 246, 255, .92); backdrop-filter: blur(28px) saturate(1.4); -webkit-backdrop-filter: blur(28px) saturate(1.4); transition: opacity .6s var(--br-ease); }
  .mobile-menu a { color: var(--br-ink); font-weight: 800; font-size: 1.7rem; letter-spacing: -.02em; opacity: 0; transform: translateY(26px); transition: opacity .7s var(--br-ease), transform .7s var(--br-ease); }
  .mobile-menu a.btn { font-size: 1.05rem; color: #fff; }
  .mobile-menu.open a { opacity: 1; transform: none; }
  .mobile-menu.open a:nth-child(2) { transition-delay: .04s; } .mobile-menu.open a:nth-child(3) { transition-delay: .08s; }
  .mobile-menu.open a:nth-child(4) { transition-delay: .12s; } .mobile-menu.open a:nth-child(5) { transition-delay: .16s; }
  .mobile-menu.open a:nth-child(6) { transition-delay: .2s; }  .mobile-menu.open a:nth-child(7) { transition-delay: .24s; }
  .mobile-menu.open a:nth-child(8) { transition-delay: .28s; } .mobile-menu.open a:nth-child(9) { transition-delay: .32s; }
}

/* ── buttons: the brand gradient pill, the arrow in its own circle ── */
.btn-primary, .pc-btn { gap: 14px; transition: transform .5s var(--br-ease), box-shadow .5s var(--br-ease), background .5s var(--br-ease); }
.btn-primary { background: var(--br-grad); background-size: 140% 100%; box-shadow: 0 14px 30px -14px rgba(165, 47, 168, .7); }
.btn-primary:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 18px 34px -14px rgba(165, 47, 168, .8); }
.btn-primary:active, .pc-btn:active { transform: scale(.98); }
.btn-primary::after, .pc-btn::after {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; margin-right: -18px;
  background: rgba(255, 255, 255, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h9m-3.5-4L15 10l-4.5 4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
  transition: transform .5s var(--br-ease), background-color .5s var(--br-ease);
}
.btn-primary:hover::after, .pc-btn:hover::after { transform: translate(3px, -1px) scale(1.06); background-color: rgba(255, 255, 255, .28); }
.pc-btn::after { margin-right: -10px; }
.mobile-menu a.btn-primary::after { margin-right: -14px; }
/* the closing card's button is white on the gradient: its arrow goes violet */
.cta .btn-primary::after { background-color: rgba(107, 42, 193, .1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h9m-3.5-4L15 10l-4.5 4' fill='none' stroke='%236b2ac1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ══ THE HERO ══════════════════════════════════════════════════════════════ */
/* one center line, the phone below the words with app cards floating round it */
.hx-main { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 0; padding-top: 118px; padding-bottom: 0; }
.hx-copy { margin: 0 auto; max-width: 900px; }
.hx-eyebrow { margin: 0 auto; }
.hx-sub { margin-left: auto; margin-right: auto; max-width: 34ch; }
.hx-ctas { justify-content: center; }
.hx h1 { font-size: clamp(3.4rem, 8.4vw, 7.6rem); line-height: .94; letter-spacing: -.045em; margin-top: 22px; }
.hx h1 em { font-weight: 500; letter-spacing: -.03em; background-size: 200% 100%; animation: brShine 9s ease-in-out infinite alternate; }
@keyframes brShine { from { background-position: 0% 0; } to { background-position: 100% 0; } }
/* the words rise out of a mask, one after another (brand.js wraps them) */
.hx h1 .l { animation: none !important; }
.hx h1 .wd { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .02em .08em; margin-bottom: -.08em; }
.hx h1 .wd > span { display: inline-block; transform: translateY(108%); animation: brUp 1s var(--br-ease) forwards; animation-delay: calc(.08s + var(--i, 0) * .085s); }
.hx h1 em .wd > span { background: var(--br-grad); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-right: .05em; }
.hx h1 em .wd:nth-child(2) > span { background-position: 100% 0; }
@keyframes brUp { to { transform: none; } }

.hx-stage { position: relative; width: min(760px, 100%); height: auto; padding: 44px 0 0; margin: 0 auto; overflow: visible;
  -webkit-mask-image: none; mask-image: none; display: flex; justify-content: center; }
.film-hero { width: min(360px, 80vw); animation: brRise 1.2s .35s var(--br-ease) both; }
@keyframes brRise { from { opacity: 0; transform: translateY(60px) scale(.96); } to { opacity: 1; transform: none; } }
/* a soft brand glow behind the phone */
.hx-stage::before { content: ""; position: absolute; left: 50%; top: 18%; width: 120%; max-width: 760px; aspect-ratio: 1; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(165, 47, 168, .22), rgba(107, 42, 193, .12) 45%, transparent 72%); filter: blur(10px); }

/* the floating app cards */
.fc {
  position: absolute; z-index: 3; text-align: left; color: var(--br-ink);
  background: rgba(255, 255, 255, .84); backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border-radius: 20px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 24px 50px -22px rgba(36, 20, 88, .45), 0 2px 6px rgba(36, 20, 88, .08);
  opacity: 0; animation: brPop .9s var(--br-ease) forwards;
}
.fc > * { margin: 0; }
.fc-note { top: 12%; left: calc(50% - 330px); animation-delay: 1.1s; }
.fc-note, .fc-why, .fc-hello { display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px; border-radius: 999px; font-weight: 700; font-size: 14px; white-space: nowrap; }
.fc-note i, .fc-why i, .fc-hello i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--br-grad); flex: none; }
.fc-note svg, .fc-why svg, .fc-hello svg { width: 16px; height: 16px; }
.fc-why { top: 47%; right: calc(50% - 330px); animation-delay: 1.45s; }
.fc-hello { bottom: 13%; left: calc(50% - 330px); animation-delay: 1.8s; }
@keyframes brPop { from { opacity: 0; transform: translateY(24px) scale(.9); } to { opacity: 1; transform: none; } }
/* the cards drift (brand.js adds the scroll parallax on top, on .fc-in) */
.fc-in { display: block; }

@media (max-width: 900px) {
  .hx-main { padding-top: 100px; }
  .hx-stage { padding-top: 36px; }
  .film-hero { width: min(300px, 74vw); }
  .fc-note { left: 6px; top: 12%; font-size: 13px; }
  .fc-why { right: 6px; top: 50%; font-size: 13px; }
  .fc-hello { left: 6px; bottom: 12%; font-size: 13px; }
  .hx-proof ul { justify-items: center; }
  .hx-proof li { justify-content: center; }
}
@media (max-width: 560px) {
  .hx h1 { font-size: clamp(2.9rem, 13.4vw, 3.5rem); }
  .hx h1 em { font-size: .92em; white-space: nowrap; }
}
@media (max-width: 380px) { .fc-note, .fc-why, .fc-hello { font-size: 12px; } }

/* ══ HOW IT WORKS: THE STORY ════════════════════════════════════════════════ */
/* ⚠️ STICKY NEEDS THIS. html and body carry overflow-x: hidden (no sideways
   scroll), which turns body into its own scroll box, and a sticky child of a
   box that never scrolls never sticks. clip hides the same overflow without
   making a scroll box. Old Safari without clip keeps hidden: the story then
   scrolls past normally, still readable. */
@supports (overflow: clip) { html, body { overflow-x: clip; } }
/* the reels sit right on the page: no box behind the phones */
.film { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.film > .poster, .film > iframe { border-radius: 0; }
.how.story { padding: 0; overflow: clip; }
.story-intro { text-align: center; padding: clamp(84px, 10vw, 128px) 0 8px; }
.story-intro h2 { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -.04em; margin: 8px auto 14px; max-width: 14ch; }
.story-intro p { margin: 0 auto; max-width: 40ch; color: rgba(255, 255, 255, .82); }
.story-track { position: relative; height: 340svh; }
.story-stick {
  position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; align-items: center;
  padding: 92px 16px 22px; gap: 14px;
}
.story-head { width: min(620px, 100%); text-align: center; flex: none; position: relative; z-index: 1; }
/* the chapter number, huge and faint behind the phone (js/story.js sets it) */
.story-big { position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none;
  font-weight: 800; font-size: min(78vh, 62vw); line-height: .8; letter-spacing: -.08em; color: rgba(255, 255, 255, .055);
  transition: opacity .5s var(--br-ease); }
.story-stick > .story-phone { position: relative; z-index: 1; }
.story-bar { display: flex; gap: 6px; width: 168px; margin: 0 auto 16px; }
.story-bar i { position: relative; flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.story-bar i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.story-chs { display: grid; }
.ch { grid-area: 1 / 1; opacity: 0; transform: translateY(22px); transition: opacity .55s var(--br-ease), transform .7s var(--br-ease); pointer-events: none; }
.ch.on { opacity: 1; transform: none; pointer-events: auto; }
.ch-n { display: inline-block; font-weight: 800; font-size: .78rem; letter-spacing: .22em; padding: 6px 12px; border-radius: 999px; color: #fff;
  background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
.ch h3 { margin: 12px 0 10px; font-weight: 800; font-size: clamp(2.5rem, 9vw, 4.4rem); line-height: .98; letter-spacing: -.045em; color: #fff; }
.ch p { margin: 0 auto; max-width: 36ch; font-size: 1.02rem; line-height: 1.6; color: rgba(255, 255, 255, .84); }
.ch p b { color: #fff; }
.story-phone { flex: 1; min-height: 0; width: 100%; display: flex; justify-content: center; }
.story .film-how { height: 100%; width: auto; max-width: 88vw; aspect-ratio: 1080 / 1900; }
.film[data-cap="0"] { aspect-ratio: 1080 / 1900; }
@media (max-width: 640px) {
  .story-stick { padding: 90px 14px 16px; gap: 10px; }
  .story-big { font-size: 92vw; top: 58%; }
  .ch h3 { font-size: 2.6rem; margin: 10px 0 8px; }
  .ch p { font-size: .98rem; line-height: 1.55; }
  .story-intro { padding-top: 72px; }
}
/* reduced motion, or no script: the three steps simply stack with the poster */
.story.static .story-track { height: auto; }
.story.static .story-stick { position: relative; height: auto; padding-top: 24px; padding-bottom: 72px; }
.story.static .story-chs { gap: 26px; }
.story.static .ch { grid-area: auto; opacity: 1; transform: none; }
.story.static .story-bar, .story.static .story-big { display: none; }
.story.static .story-phone { flex: none; height: 560px; }

/* ── the membership card in the deep royal room ── */
.plans .pc {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(124, 77, 255, .3), transparent 55%),
    linear-gradient(160deg, #2c176a 0%, #200f52 52%, #170a3c 100%);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .03), 0 0 0 9px rgba(255, 255, 255, .1),
              0 60px 110px -50px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.plans .pc::before { background: conic-gradient(from var(--pc-a), transparent 0deg, #8b5cf6 40deg, #e0407a 80deg, transparent 130deg, transparent 360deg); padding: 1.5px; }
.plans .pc-icon { color: #ffc4e0; }

@media (prefers-reduced-motion: reduce) {
  .hx h1 .wd > span { transform: none; animation: none; }
  .fc, .film-hero { animation: none; opacity: 1; }
  .hx h1 em { animation: none; }
  .mobile-menu a { transition: none; transform: none; }
}