/* ==========================================================================
   Frizz landing page
   Unbundled from the Claude Design export. Values here came from the export's
   own inline styles; the palette and type follow
   frizz-concepts/frizz-design-language.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Switzer';
  src: url('../fonts/Switzer-Bold.woff2') format('woff2'),
       url('../fonts/Switzer-Bold.woff') format('woff'),
       url('../fonts/Switzer-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Switzer';
  src: url('../fonts/Switzer-Extrabold.woff2') format('woff2'),
       url('../fonts/Switzer-Extrabold.woff') format('woff'),
       url('../fonts/Switzer-Extrabold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans-Regular.woff2') format('woff2'),
       url('../fonts/GeneralSans-Regular.woff') format('woff'),
       url('../fonts/GeneralSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans-Medium.woff2') format('woff2'),
       url('../fonts/GeneralSans-Medium.woff') format('woff'),
       url('../fonts/GeneralSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans-Semibold.woff2') format('woff2'),
       url('../fonts/GeneralSans-Semibold.woff') format('woff'),
       url('../fonts/GeneralSans-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans-Bold.woff2') format('woff2'),
       url('../fonts/GeneralSans-Bold.woff') format('woff'),
       url('../fonts/GeneralSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

/* Caveat ships split by unicode-range, so the cyrillic cuts only download when
   a page actually uses those characters. */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('../fonts/Caveat-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: 'Caveat';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('../fonts/Caveat-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: 'Caveat';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('../fonts/Caveat-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('../fonts/Caveat-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* surfaces */
  --page: #141414;
  --card: #1E2129;
  --card-2: #2A2F3E;
  --device: #23262C;
  --slot: #1A1D24;

  /* text */
  --ink: #F2F4F9;
  --ink-muted: #B4BBC9;
  --ink-dim: #949BAD;

  /* accent: brand blue appears as light, never as paint on a control */
  --accent: #0495FF;
  --accent-lift: #47CBFF;
  --accent-deep: #0374C7;

  /* semantics */
  --live: #FF2E1F;
  --heart: #FF3B4E;
  --gold: #FFE14D;

  /* One hue per mood. The app sorts people by how they feel, so the nine
     moods are the one place the site earns real colour; everything else stays
     neutral with a single accent. Used by the marquee and the mood chips. */
  --mood-sleep: #8E7BFF;
  --mood-vibe: #2FD9C5;
  --mood-motivate: #FFC94D;
  --mood-laugh: #FF9F45;
  --mood-nostalgic: #FF7BC8;
  --mood-anxious: #6FB4FF;
  --mood-vent: #FF6B6B;
  --mood-celebrate: #FFE14D;
  --mood-lonely: #A78BFA;

  /* lines and glass */
  --hairline: rgba(255, 255, 255, 0.09);
  --hairline-soft: rgba(255, 255, 255, 0.07);
  --hairline-strong: rgba(255, 255, 255, 0.14);
  --glass: rgba(22, 22, 22, 0.45);
  --glass-heavy: rgba(22, 22, 22, 0.55);

  /* the raised cap (design-language section 12) */
  --cap-base: #8E979F;
  --cap-face: #F2F4F9;

  /* motion */
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* type */
  --font-display: 'Switzer', system-ui, sans-serif;
  --font-body: 'General Sans', system-ui, sans-serif;
  --font-hand: 'Caveat', cursive;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* hatched fill standing in for photography that has not landed yet */
  --hatch: repeating-linear-gradient(135deg, rgba(255,255,255,0.045) 0 7px, rgba(255,255,255,0) 7px 16px);
  --hatch-tight: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 6px, rgba(255,255,255,0) 6px 13px);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--page);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: hidden makes this a scroll container, which breaks the
     sticky nav and stops the page scrolling normally. hidden stays first as
     the fallback for browsers without clip. */
  overflow-x: hidden;
  overflow-x: clip;
}

h1, h2, h3, p { margin: 0; }
img { max-width: 100%; display: block; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color .25s ease, opacity .25s ease;
}
a:hover { color: var(--accent-lift); }

:focus-visible {
  outline: 2px solid var(--accent-lift);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 0 0 12px 0;
  background: var(--card);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.page {
  background: var(--page);
  overflow-x: hidden;
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   4. Motion
   -------------------------------------------------------------------------- */

@keyframes fzPulse   { 0%, 100% { opacity: .5; transform: scale(.9) } 50% { opacity: 1; transform: scale(1.15) } }
@keyframes fzRise    { from { opacity: 0; transform: translateY(26px) } to { opacity: 1; transform: none } }
@keyframes fzMark    { from { opacity: 0; transform: scale(.94); filter: blur(14px) } to { opacity: 1; transform: none; filter: blur(0) } }
@keyframes fzFloat   { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)) } 50% { transform: translateY(-14px) rotate(var(--r, 0deg)) } }
@keyframes fzGlow    { 0%, 100% { opacity: .45 } 50% { opacity: .9 } }
@keyframes fzMarquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes fzSheen   { 0% { transform: translateX(-120%) } 100% { transform: translateX(220%) } }
@keyframes fzType    { 0%, 60%, 100% { opacity: .25; transform: translateY(0) } 30% { opacity: 1; transform: translateY(-3px) } }

/* Scroll reveal. main.js sets [data-revealed]; an element that rests somewhere
   other than its natural position carries that offset in --reveal-to. */
[data-reveal] {
  opacity: 0;
  transform: var(--reveal-from, translateY(22px));
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal][data-revealed] {
  opacity: 1;
  transform: var(--reveal-to, none);
}

.rise    { animation: fzRise .8s var(--ease) backwards; }
.rise-1  { animation: fzRise .8s var(--ease) .08s backwards; }
.rise-2  { animation: fzRise .8s var(--ease) .16s backwards; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   5. Shared pieces
   -------------------------------------------------------------------------- */

/* Photography. Every slot that used to show the hatched placeholder now takes
   an <img class="shot">: the container keeps its radius and overflow, the
   image fills it. The hatch stays underneath as the fallback if one fails. */
.shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Eyebrows take the colour of what the section is about rather than all
   defaulting to brand blue. Blue is kept for the whisper feature, which is
   the one the accent actually belongs to. */
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow--live { color: var(--live); }
.eyebrow--gold { color: var(--gold); }
.eyebrow--heart { color: var(--heart); }
.eyebrow--mood { color: var(--mood-vibe); }

/* A live section says so with a pulsing dot, not just a colour. */
.eyebrow--live::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: fzPulse 1.4s ease-in-out infinite;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.wordmark .z {
  background: linear-gradient(180deg, var(--accent-lift), var(--accent-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The raised cap: a solid face floating over a darker base. The base is the
   element, the face is the span, and hover presses the face down onto it. */
.cap {
  display: block;
  position: relative;
  border-radius: 14px;
  background: var(--cap-base);
  padding-bottom: 4px;
  overflow: hidden;
  transition: padding-bottom .2s var(--ease), margin-bottom .2s var(--ease);
}
.cap > span {
  display: block;
  background: var(--cap-face);
  color: var(--page);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 14px;
}
.cap:hover { padding-bottom: 1px; margin-bottom: 3px; }


.badge-18 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 5px 9px;
}

/* App-store badges */
.store-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
/* Apple's and Google's official badge artwork. Both are complete lockups
   including their own wordmarks and their own black grounds, and both brands
   require them unmodified, so the link is a bare wrapper: no card, no border,
   no padding of ours around them.

   The two files share a 3.375 aspect ratio, so one height lines them up.
   Matched size also satisfies both rulebooks at once, since Apple asks that
   its badge is no smaller than any other and Google that its badge is no
   larger than Apple's. */
.store {
  display: block;
  border-radius: 8px;
  transition: transform .3s var(--ease), filter .3s ease;
}
.store img {
  height: 48px;
  width: auto;
  display: block;
}
.store:hover {
  transform: translateY(-3px);
  filter: brightness(1.12);
}

/* --------------------------------------------------------------------------
   6. Nav
   -------------------------------------------------------------------------- */

.nav-shell {
  position: sticky;
  top: 18px;
  z-index: 60;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 10px 14px 10px 22px;
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  transition: box-shadow .4s ease, background .4s ease;
  animation: fzRise .7s var(--ease) backwards;
}
.nav[data-scrolled] { box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6); }

.nav__mark { font-size: 20px; }
.nav__mark:hover { opacity: .8; color: var(--ink); }

.nav__links {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
  font-weight: 500;
}
.nav__links a { color: var(--ink-muted); }
.nav__links a:hover { color: var(--ink); }

.nav__end { display: flex; align-items: center; gap: 10px; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  margin-top: -78px;
  height: 96vh;
  min-height: 760px;
  overflow: hidden;
}

/* The photo slot. Drop a file at assets/img/hero.jpg and it takes over; with
   no file the hatched ground and the brief below stay visible. */
.hero__photo {
  position: absolute;
  inset: -8% 0;
  background: var(--hatch), var(--slot);
  will-change: transform;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* The art direction asked for a night rooftop and the shot is bright
     daylight. Knocking it back gives the copy a ground to sit on and keeps
     the page in one key. Measured, not guessed: see the contrast note on
     .hero__vignette. */
  filter: brightness(0.86) saturate(0.98);
}


/* Originally transparent through the middle, which only works over a dark
   photograph. Over this one the wordmark's deep-blue half fell to 1.95:1, so
   the centre carries a wash too. Targets: 3:1 for the display type and the
   doodles, 4.5:1 for the sub copy. */
.hero__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 85% at 50% 38%, rgba(20,20,20,0.18) 0%, rgba(20,20,20,0.30) 42%, rgba(20,20,20,0.64) 78%, rgba(20,20,20,0.92) 100%);
}

/* A pool of shade under the copy only. Dimming the whole frame to make the
   wordmark legible cost the photograph its life, so the shade is local: faces
   stay bright, the type still gets a ground. */
.hero__copyshade {
  position: absolute;
  inset: 0;
  background: radial-gradient(44% 38% at 50% 45%, rgba(10, 10, 12, 0.68) 0%, rgba(10, 10, 12, 0.42) 55%, rgba(10, 10, 12, 0) 100%);
  pointer-events: none;
}
.hero__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,20,20,0.55) 0%, rgba(20,20,20,0.10) 32%, rgba(20,20,20,0.20) 60%, var(--page) 100%);
}

.hero__copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 0 24px;
}

.live-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  animation: fzRise .8s var(--ease) .1s backwards;
}
.live-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  animation: fzPulse 1.4s ease-in-out infinite;
}
.live-pill__text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.hero__mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(96px, 17vw, 268px);
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--ink);
  text-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  animation: fzMark 1.1s var(--ease) .05s backwards;
}
.hero__mark .z {
  background: linear-gradient(180deg, var(--accent-lift) 10%, var(--accent-deep) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 34px rgba(4, 149, 255, 0.45));
  animation: fzGlow 3.6s ease-in-out 1.2s infinite;
}

.hero__tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.1vw, 30px);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-align: center;
  animation: fzRise .9s var(--ease) .45s backwards;
}
.hero__sub {
  max-width: 440px;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-muted);
  text-wrap: pretty;
  animation: fzRise .9s var(--ease) .6s backwards;
}

.hero__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  animation: fzRise .9s var(--ease) .8s backwards;
}
.hero__scroll span:first-child {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hero__scroll-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0));
  animation: fzGlow 2.4s ease-in-out infinite;
}

/* Doodles: the hand-drawn layer over the hero and the mood cards. */
.doodles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.doodle {
  position: absolute;
  animation: fzFloat 6.5s ease-in-out infinite;
}
.doodle--accent { color: var(--accent); filter: drop-shadow(0 0 18px rgba(4, 203, 255, 0.55)); }
.doodle--heart  { color: var(--heart);  filter: drop-shadow(0 0 18px rgba(255, 59, 78, 0.45)); }
.doodle--gold   { color: var(--gold);   filter: drop-shadow(0 0 16px rgba(255, 225, 77, 0.35)); }
.doodle--white  { color: #FFFFFF;       filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.5)); }

.scribble {
  position: absolute;
  font-family: var(--font-hand);
  font-weight: 700;
  color: var(--ink);
  animation: fzFloat 7.8s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   8. Rooms
   -------------------------------------------------------------------------- */

.rooms { padding: 130px 24px 120px; background: var(--page); }

.section-head {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-align: center;
}
.section-lede {
  max-width: 520px;
  text-align: center;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.get { margin-top: 14px; }

/* Three phones: a hero device flanked by two tilted ones. */
.phones {
  position: relative;
  width: 100%;
  margin-top: 64px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.phones__glow {
  position: absolute;
  left: 50%;
  top: 6%;
  transform: translateX(-50%);
  width: min(620px, 70%);
  height: 70%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(4,149,255,0.20), rgba(4,149,255,0) 70%);
  filter: blur(10px);
  animation: fzGlow 5s ease-in-out infinite;
}

.phone {
  position: relative;
  flex: 0 0 auto;
  border-radius: 38px;
  padding: 9px;
  background: var(--device);
  border: 1px solid var(--hairline);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
}
.phone__screen {
  border-radius: 30px;
  overflow: hidden;
  background: var(--page);
  aspect-ratio: 9/19.5;
  display: flex;
  flex-direction: column;
}

.phone--side { width: 252px; }
.phone--left  { margin-right: -26px; --reveal-from: translateY(80px) rotate(-4deg); --reveal-to: translateY(46px) rotate(-4deg); }
.phone--right { margin-left: -26px;  --reveal-from: translateY(80px) rotate(4deg);  --reveal-to: translateY(46px) rotate(4deg); }

.phone--hero {
  z-index: 3;
  width: 302px;
  border-radius: 46px;
  padding: 10px;
  border-color: rgba(255, 255, 255, 0.11);
  box-shadow: 0 60px 120px rgba(0, 0, 0, 0.7), 0 0 60px rgba(4, 149, 255, 0.10);
  --reveal-from: translateY(70px);
}
.phone--hero .phone__screen {
  position: relative;
  border-radius: 37px;
  align-items: center;
}

.phone__bar {
  padding: 16px 14px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.phone__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.phone__chip {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 3px 7px;
}

.tile-grid {
  padding: 0 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tile {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 16px;
  overflow: hidden;
  background: var(--hatch-tight), var(--card);
}
.tile__live {
  position: absolute;
  top: 7px;
  left: 7px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--live);
  border-radius: 999px;
  padding: 2px 6px;
  animation: fzGlow 1.6s ease-in-out infinite;
}
.tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 16, 26, 0) 55%, rgba(8, 16, 26, 0.78) 100%);
  pointer-events: none;
}
.tile__live { z-index: 2; }
.tile__meta {
  position: absolute;
  z-index: 2;
  bottom: 7px;
  left: 7px;
  font-size: 9px;
  color: var(--ink);
  font-weight: 500;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

/* The app's tab bar. A floating glass pill rather than a bar welded to the
   bottom edge, the active tab lit from behind instead of painted in, and
   unread counts on the two tabs that carry messages. */
.tabbar {
  position: relative;
  margin: auto 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  padding: 7px 8px;
  border-radius: 999px;
  background: rgba(30, 32, 38, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}
.tabbar__item {
  position: relative;
  flex: 1 1 0;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.42);
  transition: color .3s ease, background .3s ease;
}
.tabbar__item svg { width: 17px; height: 17px; display: block; }

.tabbar__item--on {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.tabbar__badge {
  position: absolute;
  top: -2px;
  right: 12%;
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--live);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
  box-shadow: 0 0 0 2px rgba(24, 26, 31, 0.9);
}

/* Hero phone: the splash */
.splash__glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 52%;
  background: radial-gradient(70% 70% at 50% 20%, rgba(4,149,255,0.16), rgba(4,149,255,0) 70%);
}
.splash__stack {
  position: relative;
  width: 100%;
  height: 44%;
  margin-top: 12%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.splash__card {
  position: absolute;
  width: 44%;
  aspect-ratio: 3/4;
  border-radius: 18px;
  overflow: hidden;
  background: var(--hatch-tight), var(--card);
  border: 1px solid var(--hairline-soft);
}
.splash__card--l { transform: rotate(-16deg) translateX(-52%); }
.splash__card--r { transform: rotate(15deg) translateX(52%); }
.splash__card--c {
  position: relative;
  width: 50%;
  border-radius: 20px;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 6px, rgba(255,255,255,0) 6px 13px), #22262E;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
}
.splash__wordmark {
  margin-top: 8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.splash__wordmark .wordmark { font-size: 52px; letter-spacing: -0.04em; line-height: 1; }
.splash__hand {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink-muted);
}
.splash__foot {
  margin: auto 0 26px;
  width: 78%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.splash__cta {
  position: relative;
  width: 100%;
  border-radius: 16px;
  background: var(--cap-base);
  padding-bottom: 5px;
  overflow: hidden;
}
.splash__cta > div {
  border-radius: 16px;
  background: var(--cap-face);
  color: var(--page);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 14px 0;
}
.splash__sheen {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34%;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
  animation: fzSheen 4.6s ease-in-out 1.6s infinite;
}
.splash__fine { font-size: 11px; color: var(--ink-dim); }

/* Right phone: chemistry */
.match {
  margin: 0 12px;
  padding: 12px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  gap: 11px;
}
.match__avatar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 5px, rgba(255,255,255,0) 5px 11px), var(--card-2);
  border: 2px solid var(--heart);
  flex: 0 0 auto;
}
.match__text { display: flex; flex-direction: column; gap: 2px; }
.match__name { font-size: 13px; font-weight: 600; color: var(--ink); }
.match__score { font-size: 11px; color: var(--ink-dim); }

.mood-chips {
  margin: 14px 12px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mood-chip {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-muted);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 5px 9px;
}
.mood-chip--on {
  color: var(--page);
  background: var(--ink);
  border-color: transparent;
}

.rows { margin: 14px 12px 0; display: flex; flex-direction: column; gap: 8px; }
.row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border-radius: 14px;
  background: var(--card);
}
.row__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--card-2);
  flex: 0 0 auto;
}
.row__line {
  height: 8px;
  flex: 1;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
}

.phone__pill {
  margin: auto 12px 14px;
  padding: 11px 14px;
  border-radius: 999px;
  background: var(--glass-heavy);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.phone__pill span:last-child { font-size: 12px; font-weight: 600; color: var(--ink); }
.bolt { color: var(--accent); display: flex; animation: fzGlow 2.8s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   9. Whisper
   -------------------------------------------------------------------------- */

.whisper { padding: 0 0 40px; background: var(--page); }

.whisper__grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) minmax(340px, 1.15fr);
  gap: clamp(32px, 6vw, 90px);
  align-items: center;
}

.whisper__copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 60px 0;
}
.whisper__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 4.6vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
.whisper__lede {
  max-width: 420px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.points { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.point {
  display: flex;
  align-items: center;
  gap: 12px;
  --reveal-from: translateY(18px);
  transition-duration: .7s;
}
.point__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}
.point span:last-child { font-size: 15px; color: var(--ink); }

/* The mockup: a live room seen over one shoulder, with the whisper landing on
   top of it. Built the same way as the phones above, so it reads as the app
   rather than as a photo slot waiting for art. */
.whisper__stage {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 40px 0;
  --reveal-from: translateY(40px);
  transition-duration: 1s;
}
.whisper__stage-glow {
  position: absolute;
  left: 50%;
  top: 12%;
  transform: translateX(-50%);
  width: min(520px, 90%);
  height: 72%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(4,149,255,0.18), rgba(4,149,255,0) 70%);
  filter: blur(10px);
  animation: fzGlow 5.4s ease-in-out infinite;
  pointer-events: none;
}

.room {
  position: relative;
  width: min(340px, 100%);
  border-radius: 46px;
  padding: 10px;
  background: var(--device);
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: 0 60px 120px rgba(0, 0, 0, 0.7), 0 0 60px rgba(4, 149, 255, 0.10);
}
.room__screen {
  position: relative;
  border-radius: 37px;
  overflow: hidden;
  background: var(--page);
  aspect-ratio: 9/19.5;
  display: flex;
  flex-direction: column;
}

/* The room's own ground. A flex column so the composer settles at the bottom
   of the screen and the thread takes whatever height is left, rather than
   everything being pinned at guessed percentages.

   This used to carry the hatched placeholder fill, which read as "art
   pending" once every other slot had real photography. It is an app screen,
   so it gets an app surface: a dark ground lit from the top where the room's
   own video would be. */
.room__stage {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(4, 149, 255, 0.16) 0%, rgba(4, 149, 255, 0) 62%),
    radial-gradient(90% 50% at 80% 100%, rgba(142, 123, 255, 0.13) 0%, rgba(142, 123, 255, 0) 70%),
    linear-gradient(180deg, #1B1F27 0%, #15181E 55%, #121419 100%);
}
.room__stage-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,20,20,0.45) 0%, rgba(20,20,20,0) 26%, rgba(13,13,13,0.75) 100%);
}

.room__top {
  position: relative;
  z-index: 2;
  padding: 16px 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.room__live {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  background: var(--glass-heavy);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.room__live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live);
  animation: fzPulse 1.4s ease-in-out infinite;
}
.room__live-text {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.room__count {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-muted);
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--glass-heavy);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

/* the four faces in the room, one of them picked */
.room__faces {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  padding: 0 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.face {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 16px;
  overflow: hidden;
  background: var(--hatch-tight), var(--card);
  border: 1px solid var(--hairline-soft);
  transition: border-color .4s ease, box-shadow .4s ease;
}
/* Names and tags sit on photography, so each face carries its own foot of
   shade rather than depending on what is in frame. */
.face::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 16, 26, 0) 55%, rgba(8, 16, 26, 0.78) 100%);
  pointer-events: none;
}
.face__name {
  position: absolute;
  z-index: 2;
  left: 7px;
  bottom: 6px;
  font-size: 9px;
  font-weight: 500;
  color: var(--ink);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
/* the one being whispered to: a rim of light, never a fill */
.face--picked {
  border-color: rgba(4, 149, 255, 0.65);
  box-shadow: 0 0 0 1px rgba(4, 149, 255, 0.35), 0 0 26px rgba(4, 149, 255, 0.32);
}
.face--picked .face__name { color: var(--ink); }
/* A 16%-alpha accent tint reads fine on the dark page and vanishes over a
   bright sky. Solid dark ground instead: accent on this chip measures 5.6:1,
   well past the 3:1 floor, and it holds whatever the photo does. */
.face__tag {
  position: absolute;
  z-index: 2;
  top: 6px;
  left: 6px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(8, 20, 32, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(4, 149, 255, 0.35);
  border-radius: 999px;
  padding: 2px 6px;
}

/* Where the whisper and its reply live: the slack between the faces and the
   composer, so both float over the room without covering anyone's face. */
.room__thread {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  min-height: 0;
}

/* The whisper itself lands once and stays: it is the thing the section is
   about, and cycling it out left the room empty for a beat. Only the answer
   loops. Percentages are the shared 11s clock. */
@keyframes fzBeatTyping {
  0%, 14%   { opacity: 0; transform: translateY(6px) }
  20%, 40%  { opacity: 1; transform: none }
  46%, 100% { opacity: 0; transform: translateY(-4px) }
}
@keyframes fzBeatReply {
  0%, 44%   { opacity: 0; transform: translateY(8px) }
  52%, 92%  { opacity: 1; transform: none }
  98%, 100% { opacity: 0; transform: translateY(-4px) }
}

/* the whisper itself, floating over the room */
.whisper-note {
  align-self: flex-end;
  max-width: 82%;
  padding: 12px 15px;
  border-radius: 18px 18px 18px 6px;
  background: var(--glass-heavy);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  animation: fzRise 1s var(--ease) 1.1s backwards;
}
.whisper-note__kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
}
.whisper-note__body { font-size: 14px; line-height: 1.5; color: var(--ink); }
.whisper-note__seal {
  display: block;
  margin-top: 7px;
  font-size: 10px;
  color: var(--ink-dim);
}

/* The typing dots and the answer occupy one cell, so the room reserves a
   single slot for them rather than a gap the height of both. */
.whisper-answer {
  align-self: flex-start;
  display: grid;
  align-items: end;
  justify-items: start;
}
.whisper-answer > * { grid-area: 1 / 1; }

/* the reply, still typing */
.whisper-reply {
  padding: 11px 14px;
  border-radius: 18px 18px 6px 18px;
  background: var(--glass-heavy);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  align-items: center;
  gap: 5px;
  animation: fzBeatTyping 11s var(--ease) 1s infinite both;
}
.whisper-reply span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-muted);
  animation: fzType 1.4s ease-in-out infinite;
}
.whisper-reply span:nth-child(2) { animation-delay: .18s; }
.whisper-reply span:nth-child(3) { animation-delay: .36s; }

/* Alex's answer, sharing the cell with the typing dots it replaces. */
.whisper-back {
  padding: 10px 14px;
  border-radius: 18px 18px 6px 18px;
  background: var(--glass-heavy);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  animation: fzBeatReply 11s var(--ease) 1s infinite both;
}

/* the composer at the bottom of the room */
.room__composer {
  position: relative;
  z-index: 2;
  margin: 0 14px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px 9px 14px;
  border-radius: 999px;
  background: var(--glass-heavy);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.room__composer-text {
  flex: 1;
  font-size: 11px;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.room__composer-send {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  border: 1px solid rgba(4, 149, 255, 0.45);
  box-shadow: 0 0 18px rgba(4, 149, 255, 0.28);
  flex: 0 0 auto;
}

/* Sits over the phone's left edge like a sticker, so it needs to clear the
   device rather than slide under it. Kept level with the gap between the faces
   and the whisper so it lands on bare ground, not on the composer. */
.whisper__hand {
  position: absolute;
  z-index: 4;
  left: 2%;
  bottom: 33%;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 30px;
  color: var(--ink);
  --r: -6deg;
  transform: rotate(-6deg);
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  animation: fzFloat 7s ease-in-out infinite;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   10. Marquee
   -------------------------------------------------------------------------- */

.marquee {
  padding: 70px 0 10px;
  overflow: hidden;
  background: var(--page);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: fzMarquee 34s linear infinite;
}
.marquee__run {
  display: flex;
  gap: 34px;
  padding-right: 34px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 48px);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
/* Outlined, each in its own mood colour. The band is the one place the nine
   moods appear together, so it is where the palette gets to show itself. */
.marquee__run span {
  color: transparent;
  -webkit-text-stroke: 1px currentColor;
  transition: color .4s ease;
}
.marquee__run span:nth-child(1) { color: var(--mood-sleep); }
.marquee__run span:nth-child(2) { color: var(--mood-vibe); }
.marquee__run span:nth-child(3) { color: var(--mood-motivate); }
.marquee__run span:nth-child(4) { color: var(--mood-laugh); }
.marquee__run span:nth-child(5) { color: var(--mood-nostalgic); }
.marquee__run span:nth-child(6) { color: var(--mood-anxious); }
.marquee__run span:nth-child(7) { color: var(--mood-vent); }
.marquee__run span:nth-child(8) { color: var(--mood-celebrate); }
.marquee__run span:nth-child(9) { color: var(--mood-lonely); }

/* --------------------------------------------------------------------------
   11. Moods
   -------------------------------------------------------------------------- */

.moods {
  position: relative;
  margin-top: 50px;
  padding: 110px 24px 120px;
  overflow: hidden;
}
.moods__ground {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, var(--accent-deep) 0%, #1183D8 46%, var(--accent-lift) 100%);
}
.moods__inner { position: relative; max-width: 1200px; margin: 0 auto; }
.moods__head {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(280px, 0.8fr);
  gap: 40px;
  align-items: start;
}
.moods__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(42px, 5vw, 70px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  text-wrap: balance;
  --reveal-from: translateY(24px);
  transition-duration: .9s;
}
.moods__lede {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  text-wrap: pretty;
  --reveal-from: translateY(24px);
  transition-duration: .9s;
}

.moods__grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 22px);
  align-items: end;
}
.mood-card {
  position: relative;
  aspect-ratio: 3/4.4;
  border-radius: 24px;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, rgba(0,0,0,0.10) 0 7px, rgba(0,0,0,0) 7px 16px), rgba(10, 40, 66, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  --reveal-from: translateY(70px);
  transition-duration: .9s;
}
.mood-card:nth-child(1) { --reveal-to: translateY(30px); }
.mood-card:nth-child(3) { --reveal-to: translateY(-26px); }
.mood-card:nth-child(4) { --reveal-to: translateY(14px); }
/* The label sits on photography now, so it needs its own ground to stay
   readable rather than relying on whatever happens to be in frame. */
.mood-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 25, 40, 0) 45%, rgba(8, 20, 34, 0.72) 100%);
  pointer-events: none;
}
.mood-card__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 14px;
  font: 500 10px/1.5 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------------------------
   11b. More ways in
   Each card takes its own hue from the feature it describes, so the row reads
   as three different things rather than three blue boxes.
   -------------------------------------------------------------------------- */

.ways { padding: 120px 24px 20px; background: var(--page); }

.ways__head {
  max-width: 1200px;
  margin: 0 auto 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.ways__grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.way {
  position: relative;
  overflow: hidden;
  padding: 30px 28px 26px;
  border-radius: 26px;
  background: var(--card);
  border: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 12px;
  --reveal-from: translateY(22px);
  transition: transform .35s var(--ease), border-color .35s ease;
}
.way:hover { transform: translateY(-3px); }

/* the hue only ever appears as light: a glow behind the icon and a rule at
   the top, never as a fill on the card */
.way::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--way-hue), transparent 80%);
}
.way::after {
  content: '';
  position: absolute;
  top: -40%;
  left: -20%;
  width: 70%;
  height: 120%;
  background: radial-gradient(50% 50% at 50% 50%, var(--way-hue), transparent 70%);
  opacity: .10;
  pointer-events: none;
}

.way__icon {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--way-hue);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.way__icon svg { width: 21px; height: 21px; }

.way__title {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.way__body {
  position: relative;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-muted);
  text-wrap: pretty;
}
.way__meta {
  position: relative;
  margin-top: auto;
  padding-top: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--way-hue);
}

.way--confess { --way-hue: var(--mood-nostalgic); }
.way--global  { --way-hue: var(--mood-vibe); }
.way--chem    { --way-hue: var(--heart); }

.way--confess:hover { border-color: rgba(255, 123, 200, 0.45); }
.way--global:hover  { border-color: rgba(47, 217, 197, 0.45); }
.way--chem:hover    { border-color: rgba(255, 59, 78, 0.45); }

/* --------------------------------------------------------------------------
   12. Safety strip
   -------------------------------------------------------------------------- */

.safety-strip { padding: 90px 24px; background: var(--page); }
.safety-strip__grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
}
.safety-strip__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  --reveal-from: translateY(20px);
}
.safety-strip__item strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.safety-strip__item span {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   13. Content pages (about, community, safety, privacy, support)
   -------------------------------------------------------------------------- */

.doc { padding: 180px 24px 40px; background: var(--page); }
.doc__inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.doc__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 7vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.doc__lede {
  max-width: 620px;
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink-muted);
}

.doc__blocks {
  display: flex;
  flex-direction: column;
  gap: 34px;
  margin-top: 44px;
}
.doc__block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  --reveal-from: translateY(20px);
}
.doc__block h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.doc__block p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-muted);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.card {
  padding: 24px;
  border-radius: 24px;
  background: var(--card);
  border: 1px solid var(--hairline);
  --reveal-from: translateY(20px);
}
.card--pad { padding: 26px; }
.card__stat {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 38px;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.card__label { font-size: 14px; color: var(--ink-dim); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 34px;
}
.card-grid--wide { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card__head {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}
.card__head--lg { font-size: 19px; }
.card__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-muted);
}
.card__body--loose { line-height: 1.7; }
.card__body--lg { font-size: 16px; }
.card--stack { display: flex; flex-direction: column; gap: 10px; }
.card--stack-lg { display: flex; flex-direction: column; gap: 14px; }

.doc__section {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.doc__h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--ink);
  --reveal-from: translateY(20px);
}

.steps { display: flex; flex-direction: column; gap: 12px; }
.step {
  display: flex;
  gap: 16px;
  align-items: baseline;
  --reveal-from: translateY(16px);
  transition-duration: .7s;
}
.step__n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--accent);
  min-width: 22px;
}
.step__text {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-muted);
}

.callout {
  margin-top: 44px;
  padding: 28px;
  border-radius: 24px;
  background: var(--card);
  border: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 8px;
  --reveal-from: translateY(20px);
}

.mail-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
  padding: 30px;
  border-radius: 24px;
  background: var(--card);
  border: 1px solid var(--hairline);
  transition: transform .35s var(--ease), border-color .35s ease;
  animation: fzRise .8s var(--ease) .24s backwards;
}
.mail-card:hover {
  transform: translateY(-3px);
  border-color: rgba(4, 149, 255, 0.5);
}
.mail-card__text { display: flex; flex-direction: column; gap: 6px; }
.mail-card__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.mail-card__address {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 44px;
}
.chip {
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--hairline);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.chip:hover { border-color: rgba(4, 149, 255, 0.5); color: var(--ink); }
.chip[aria-disabled='true'] {
  color: var(--ink-dim);
  cursor: not-allowed;
}
.chip[aria-disabled='true']:hover { border-color: var(--hairline); }

/* --------------------------------------------------------------------------
   Legal documents
   Long-form prose, so it gets a narrower measure, numbered sections and real
   list styling. The rest of the site's voice rules do not apply here: these
   have to be precise before they are charming.
   -------------------------------------------------------------------------- */

.legal { max-width: 720px; }
.legal__updated {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.legal__toc {
  margin-top: 30px;
  padding: 24px 26px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--hairline);
}
.legal__toc strong {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 14px;
}
.legal__toc ol {
  margin: 0;
  padding-left: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 26px;
  font-size: 14px;
  color: var(--ink-muted);
}
.legal__toc a { color: var(--ink-muted); }
.legal__toc a:hover { color: var(--ink); }

.legal__section {
  margin-top: 46px;
  scroll-margin-top: 110px;
}
.legal__section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 14px;
}
.legal__section h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  margin: 22px 0 8px;
}
.legal__section p,
.legal__section li {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-muted);
}
.legal__section p + p { margin-top: 14px; }
.legal__section ul,
.legal__section ol {
  margin: 12px 0 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legal__section strong { color: var(--ink); font-weight: 600; }

/* Regulatory scope for a global launch has not been through counsel yet. This
   has to be impossible to miss on the page itself, not just in the repo. */
.legal__pending {
  margin-top: 30px;
  padding: 22px 24px;
  border-radius: 18px;
  background: rgba(255, 225, 77, 0.06);
  border: 1px solid rgba(255, 225, 77, 0.35);
}
.legal__pending-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.legal__pending-tag::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.legal__pending p { font-size: 15px; line-height: 1.7; color: var(--ink-muted); }
.legal__pending p + p { margin-top: 12px; }
.legal__pending ul + p { margin-top: 14px; }
.legal__pending ul {
  margin: 12px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-muted);
}
.legal__pending strong { color: var(--ink); }

.legal__callout {
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--accent);
}
.legal__callout p { font-size: 15px; }

.doc__note {
  margin-top: 34px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-dim);
  --reveal-from: translateY(20px);
}

/* --------------------------------------------------------------------------
   14. Closing CTA and the waitlist
   -------------------------------------------------------------------------- */

.cta { padding: 120px 24px 0; background: var(--page); }
.cta__card {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px);
  border-radius: 32px;
  background: var(--card);
  border: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  --reveal-from: translateY(24px);
  transition-duration: .9s;
}
.cta__glow {
  position: absolute;
  right: -10%;
  top: -40%;
  width: 50%;
  height: 180%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(4,149,255,0.22), rgba(4,149,255,0) 70%);
  animation: fzGlow 6s ease-in-out infinite;
  pointer-events: none;
}
.cta__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cta__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.cta__sub { font-size: 16px; color: var(--ink-muted); }

/* Waitlist form. The input is a quiet well, the button is the raised cap. */
/* Fixed basis rather than auto: the status line under the field varies a lot
   in length, and letting it size the column makes the card reflow. */
.waitlist {
  position: relative;
  flex: 0 1 430px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.waitlist__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}
.waitlist__input {
  flex: 1 1 180px;
  min-width: 0;
  height: 56px;
  padding: 0 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.waitlist__input::placeholder { color: var(--ink-dim); }
.waitlist__input:hover { border-color: rgba(255, 255, 255, 0.16); }
.waitlist__input:focus {
  outline: none;
  border-color: rgba(4, 149, 255, 0.55);
  box-shadow: 0 0 24px rgba(4, 149, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}
.waitlist__input[aria-invalid='true'] { border-color: rgba(255, 59, 78, 0.6); }

.waitlist__submit {
  flex: 0 0 auto;
  border: 0;
  padding: 0 0 4px;
  font: inherit;
  cursor: pointer;
  background: var(--cap-base);
  border-radius: 16px;
  overflow: hidden;
  transition: padding-bottom .2s var(--ease), margin-bottom .2s var(--ease);
}
.waitlist__submit > span {
  display: block;
  height: 52px;
  line-height: 52px;
  padding: 0 26px;
  border-radius: 16px;
  background: var(--cap-face);
  color: var(--page);
  font-size: 15px;
  font-weight: 600;
}
.waitlist__submit:hover { padding-bottom: 1px; margin-bottom: 3px; }
.waitlist__submit[disabled] { cursor: progress; opacity: .7; }

.waitlist__note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-dim);
  min-height: 20px;
}
.waitlist__note[data-tone='ok'] { color: var(--accent-lift); }
.waitlist__note[data-tone='bad'] { color: var(--heart); }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.footer { background: var(--page); }
.footer__top {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 24px 70px;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 40px;
  align-items: center;
}
.footer__mark { display: flex; flex-direction: column; gap: 14px; }
.footer__mark .wordmark {
  font-size: clamp(52px, 7vw, 104px);
  line-height: 0.9;
  letter-spacing: -0.045em;
}
.footer__mark .wordmark .z {
  filter: drop-shadow(0 0 26px rgba(4, 149, 255, 0.4));
  animation: fzGlow 4.2s ease-in-out infinite;
}
.footer__hand {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 30px;
  color: var(--ink-muted);
}
.footer__get {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.footer__get > span { font-size: 15px; font-weight: 600; color: var(--ink); }
.footer__get .store img { height: 42px; }

.footer__bottom { max-width: 1200px; margin: 0 auto; padding: 0 24px 60px; }
.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px;
  padding-top: 50px;
  border-top: 1px solid var(--hairline);
}
.footer__col { display: flex; flex-direction: column; gap: 14px; }
.footer__col > span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.footer__col a { font-size: 14px; color: var(--ink-muted); }
.footer__col a:hover { color: var(--ink); }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
}
.footer__legal > span { font-size: 13px; color: var(--ink-dim); }
.footer__legal-links { display: flex; gap: 22px; }
.footer__legal-links a { font-size: 13px; color: var(--ink-dim); }
.footer__legal-links a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   16. Responsive
   The export carried no media queries at all. These are the smallest set that
   keeps every section readable down to 360px.
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .whisper__grid { grid-template-columns: 1fr; gap: 20px; }
  .whisper__copy { padding: 60px 0 0; }
  .whisper__stage { padding: 20px 0 60px; }
  /* Once the section stacks there is no bare ground beside the phone for the
     sticker to sit on, and it lands on the whisper itself. */
  .whisper__hand { display: none; }
  .moods__head { grid-template-columns: 1fr; gap: 20px; }
  .moods__grid { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .mood-card:nth-child(3) { --reveal-to: translateY(0); }
  .footer__top { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 900px) {
  /* Only the hero phone stays; the flanking two stop fitting well before the
     screen does, and shrinking all three loses the screens they are showing. */
  .phone--side { display: none; }
  .phones { margin-top: 44px; }
}

@media (max-width: 760px) {
  .nav {
    gap: 14px;
    padding: 10px 12px 10px 16px;
    max-width: calc(100vw - 24px);
  }
  .nav__links { display: none; }
  .nav__end .badge-18 { display: none; }

  .hero { height: auto; min-height: 0; padding: 150px 0 90px; }
  .hero__photo { position: absolute; inset: 0; }
  .hero__copy { position: relative; inset: auto; gap: 20px; }
  .hero__scroll { display: none; }
  .doodles { display: none; }

  .rooms { padding: 90px 20px 80px; }
  .moods { padding: 80px 20px 90px; }
  .safety-strip { padding: 70px 20px; }
  .cta { padding: 80px 20px 0; }
  .doc { padding: 140px 20px 20px; }
  .footer__top { padding: 70px 20px 50px; }
  .footer__bottom { padding: 0 20px 50px; }

  .cta__card { flex-direction: column; align-items: stretch; }
  .waitlist { min-width: 0; }
  .waitlist__submit, .waitlist__submit > span { width: 100%; text-align: center; }
}

@media (max-width: 480px) {
  .moods__grid { grid-template-columns: 1fr; }
  .mood-card { aspect-ratio: 16/10; }
  .mood-card:nth-child(n) { --reveal-to: translateY(0); }
  /* the badges are fixed artwork, so they shrink rather than stretch */
  .store img { height: 42px; }
}