/* Landing page styles for Mirror Mirror — extends the design system tokens */
@import url("design-system/colors_and_type.css");

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Offset anchor jumps so section tops clear the sticky nav */
html { scroll-padding-top: 88px; }
body {
  font-family: var(--mythic-font-body);
  color: var(--mythic-text);
  background: var(--mythic-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button { font-family: inherit; }
a { color: inherit; text-decoration: none; }

/* ────── Nav ────── */
.lp-nav {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease-out, background 200ms ease-out;
}
.lp-nav.scrolled {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: var(--mythic-border);
}
.lp-nav__inner {
  max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; gap: 32px;
  padding: 18px 32px;
  /* Reserve the bar's full height even when the links are hidden on mobile, so it
     stays tall enough to contain the docked wordmark instead of letting it bleed
     below the bottom border into the hero. (box-sizing is border-box, so this
     value includes the 36px of vertical padding and matches the desktop bar.) */
  min-height: 55px;
}
.lp-nav__links { display: flex; gap: 28px; }

/* Scroll-docking wordmark — driven by --nav-p (0 = expanded over hero, 1 = docked).
   On desktop it starts large + low (74px) and rises into the bar; the mobile
   override below starts it nearer the top since there's no empty bar to clear. */
.lp-nav__logo {
  position: absolute;
  top: 0; left: 50%;
  transform-origin: top center;
  transform: translate(-50%, calc(74px - 61.5px * var(--nav-p, 0)))
             scale(calc(1 - 0.625 * var(--nav-p, 0)));
  will-change: transform;
  display: block;
}
.lp-nav__links a {
  font-family: var(--mythic-font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--mythic-text);
  opacity: 0.74;
  transition: opacity 180ms ease-out;
}
.lp-nav__links a:hover { opacity: 1; }

/* ────── Buttons ────── */
.lp-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mythic-font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  padding: 10px 16px;
  border-radius: 25px;
  border: 0;
  cursor: pointer;
  transition: background 180ms ease-out, transform 180ms ease-out, box-shadow 180ms ease-out;
}
.lp-btn:active { transform: scale(0.98); }

.lp-btn--primary {
  background: var(--mythic-primary);
  color: #fff;
}
.lp-btn--primary:hover { background: var(--mythic-primary-deep); }

.lp-btn--ghost {
  background: transparent;
  color: var(--mythic-text);
}
.lp-btn--ghost:hover { background: var(--mythic-bg-subtle); }

.lp-btn--dark {
  background: var(--mythic-bg-inverse);
  color: #fff;
}
.lp-btn--dark:hover { background: #000; }

/* ────── Containers ────── */
.lp-container {
  max-width: 1240px; margin: 0 auto;
  padding: 0 32px;
}

/* ────── Hero ────── */
.lp-hero {
  position: relative;
  padding: 64px 0 96px;
  overflow: hidden;
}
/* Keep hero content above the decorative blobs (which are positioned at z-index 0
   and would otherwise paint over — and wash out — the text, especially on mobile). */
.lp-hero .lp-container {
  position: relative;
  z-index: 1;
}
/* Reserves the room the big logo floats over before it docks into the nav */
.lp-hero__logo-spacer { height: 64px; }
.lp-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}
.lp-hero h1 {
  margin: 0 0 24px;
  font-family: var(--mythic-font-display);
  font-weight: 700;
  font-size: clamp(40px, 6.2vw, 84px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--mythic-text);
  text-wrap: balance;
}
.lp-hero h1 .magic {
  background: linear-gradient(120deg, var(--mythic-magic-deep), var(--mythic-magic));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  display: inline-block;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.lp-hero h1 .magic-spark {
  position: absolute;
  right: -22px;
  top: -8px;
  color: var(--mythic-magic);
  animation: sparkle 2.4s ease-in-out infinite;
}
@keyframes sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.9; }
  50% { transform: scale(1.18) rotate(12deg); opacity: 1; }
}
.lp-hero__sub {
  font-family: var(--mythic-font-body);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.5;
  color: var(--mythic-text-mid);
  margin: 0 0 32px;
  max-width: 520px;
  text-wrap: pretty;
}
.lp-hero__sub strong {
  color: var(--mythic-text);
  font-weight: 700;
}

/* ────── Store buttons ────── */
.lp-store-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.lp-store-btns--center { justify-content: center; }
.lp-store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px 10px 18px;
  border-radius: 999px;
  background: var(--mythic-text);
  color: var(--mythic-text-on-dark);
  font-family: var(--mythic-font-body);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  box-shadow: var(--mythic-shadow-sm);
  transition: background 180ms ease-out, transform 180ms ease-out;
}
.lp-store-btn:hover { background: #000; transform: translateY(-1px); }
.lp-store-btn:active { transform: translateY(0) scale(0.98); }
.lp-store-btn:focus-visible {
  outline: 2px solid var(--mythic-primary);
  outline-offset: 3px;
}
.lp-store-btn small {
  display: block;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.02em;
  opacity: 0.7;
  margin-bottom: 2px;
}

/* ────── Phone stage ────── */
.lp-phone-stage {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  min-height: 640px;
}
.lp-phone {
  width: 320px;
  height: 640px;
  border-radius: 48px;
  background: var(--mythic-bg-inverse);
  padding: 8px;
  box-shadow:
    0 60px 100px -40px rgba(16,24,40,0.25),
    0 24px 50px -20px rgba(16,24,40,0.15),
    0 0 0 1px rgba(0,0,0,0.04);
  position: relative;
  z-index: 2;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lp-phone__screen {
  width: 100%; height: 100%;
  border-radius: 40px;
  background: var(--mythic-bg);
  overflow: hidden;
  position: relative;
}
.lp-phone__notch {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 24px;
  background: var(--mythic-bg-inverse);
  border-radius: 999px;
  z-index: 5;
}
.lp-phone__status {
  position: absolute; top: 0; left: 0; right: 0;
  height: 44px;
  padding: 14px 28px 0;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mythic-font-body);
  font-weight: 700; font-size: 13px;
  color: var(--mythic-text);
  z-index: 4;
}

/* Floating decoration cards around phone */
.lp-float-card {
  position: absolute;
  background: #fff;
  border: 1px solid var(--mythic-border);
  border-radius: 12px;
  box-shadow: var(--mythic-shadow-sm);
  padding: 12px 14px;
  z-index: 3;
  animation: floaty 6s ease-in-out infinite;
}
.lp-float-card--magic {
  background: var(--mythic-magic-gradient);
  color: #fff;
  border: 0;
  box-shadow: 0 8px 28px -8px rgba(138,43,226,0.45), 0 0 4px 0 var(--mythic-magic);
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.lp-float-card--delay { animation-delay: -3s; }

body.hide-floats .lp-float-card { display: none; }

body.no-pulse .magic-cta-pulse { animation: none; }
.magic-cta-pulse {
  border-radius: 12px;
  animation: magicPulse 1.8s ease-in-out infinite;
}
@keyframes magicPulse {
  0%, 100% { box-shadow: 0 0 4px 0 rgba(138, 43, 226, 0.0); }
  50%      { box-shadow: 0 0 22px 0 rgba(138, 43, 226, 0.55); }
}

/* Background blobs */
.lp-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.lp-blob--green {
  background: var(--mythic-primary-soft);
  width: 480px; height: 480px;
  top: -120px; right: -100px;
  opacity: 0.7;
}
.lp-blob--purple {
  background: var(--mythic-magic-soft);
  width: 380px; height: 380px;
  bottom: -80px; left: 30%;
  opacity: 0.55;
}
.lp-blob--gold {
  background: var(--mirror-gold-soft);
  width: 360px; height: 360px;
  top: 30%; left: -140px;
  opacity: 0.9;
}

/* ────── Section common ────── */
.lp-section {
  padding: 96px 0;
  position: relative;
}
.lp-section--subtle { background: var(--mythic-bg-subtle); }
.lp-section--dark {
  background: var(--mythic-bg-inverse);
  color: #fff;
}
.lp-eyebrow {
  display: inline-block;
  font-family: var(--mythic-font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mythic-primary);
  margin-bottom: 16px;
}
.lp-section h2 {
  margin: 0 0 16px;
  font-family: var(--mythic-font-display);
  font-weight: 700;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: inherit;
  text-wrap: balance;
}
.lp-section__lead {
  font-family: var(--mythic-font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.55;
  color: var(--mythic-text-mid);
  max-width: 580px;
  margin: 0 0 56px;
  text-wrap: pretty;
}
.lp-section--dark .lp-section__lead { color: rgba(255,255,255,0.7); }

/* ────── Pillars grid ────── */
.lp-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.lp-pillar {
  background: var(--mythic-bg);
  border: 1px solid var(--mythic-border);
  border-radius: 24px;
  padding: 28px;
  display: flex; flex-direction: column; gap: 20px;
  min-height: 360px;
  position: relative;
  overflow: hidden;
  transition: transform 240ms ease-out, box-shadow 240ms ease-out;
}
.lp-pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--mythic-shadow-sm);
}
.lp-pillar__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--mythic-primary-soft);
  color: var(--mythic-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lp-pillar__icon--magic {
  background: var(--mythic-magic-soft);
  color: var(--mythic-magic);
}
.lp-pillar h3 {
  margin: 0;
  font-family: var(--mythic-font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--mythic-text);
}
.lp-pillar p {
  margin: 0;
  font-family: var(--mythic-font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  color: var(--mythic-text-mid);
  text-wrap: pretty;
}
.lp-pillar__visual {
  margin-top: auto;
  padding-top: 8px;
}

/* ────── Magic section (purple feature) ────── */
.lp-magic {
  background: radial-gradient(circle at 80% 20%, #2d1448 0%, #16140F 60%);
  color: #fff;
  border-radius: 32px;
  padding: 72px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.lp-magic::after {
  content: "";
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(138,43,226,0.4) 0%, transparent 70%);
  top: -200px; right: -200px;
  pointer-events: none;
}
.lp-magic .lp-eyebrow {
  color: var(--mythic-magic-soft);
}
.lp-magic h2 { color: #fff; }
.lp-magic__lead {
  font-family: var(--mythic-font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
  max-width: 480px;
  margin: 0 0 32px;
  text-wrap: pretty;
}
.lp-magic__demo {
  position: relative;
  z-index: 2;
}

/* magic floating cards */
.lp-magic-card {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 18px 20px;
}
.lp-magic-card h4 {
  margin: 0 0 10px;
  font-family: var(--mythic-font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d4b4f5;
}
/* prompt chips in the magic section */
.lp-prompt-chip {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 14px 18px;
  font-family: var(--mythic-font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  color: #fff;
  letter-spacing: -0.01em;
  cursor: default;
  transition: background 200ms ease-out, border-color 200ms ease-out, transform 200ms ease-out;
}
.lp-prompt-chip svg { color: #c89bf0; flex-shrink: 0; }
.lp-prompt-chip:hover {
  background: rgba(138,43,226,0.18);
  border-color: rgba(138,43,226,0.5);
  transform: translateX(2px);
}

.lp-magic-card ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.lp-magic-card li {
  position: relative;
  padding-left: 18px;
  font-family: var(--mythic-font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255,255,255,0.92);
}
.lp-magic-card li::before {
  content: "\2726";
  position: absolute;
  left: 0; top: 0;
  color: var(--mythic-magic);
  line-height: 1.45;
}

/* ────── Final CTA ────── */
.lp-final {
  text-align: center;
  padding: 120px 32px;
  background: var(--mythic-bg);
  position: relative;
  overflow: hidden;
}
.lp-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, var(--mythic-primary-soft) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, var(--mythic-magic-soft) 0%, transparent 50%);
  opacity: 0.6;
  pointer-events: none;
}
.lp-final > * { position: relative; z-index: 1; }
.lp-final h2 {
  font-family: var(--mythic-font-display);
  font-weight: 700;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0 0 24px;
  text-wrap: balance;
}
.lp-final__sub {
  font-family: var(--mythic-font-body);
  font-weight: 500;
  font-size: 18px;
  color: var(--mythic-text-mid);
  max-width: 540px;
  margin: 0 auto 40px;
  text-wrap: pretty;
}

/* ────── Footer ────── */
.lp-footer {
  border-top: 1px solid var(--mythic-border);
  padding: 32px 0 40px;
}
.lp-footer__inner {
  display: flex; align-items: center; gap: 24px;
  max-width: 1240px; margin: 0 auto;
  padding: 0 32px;
}
.lp-footer__copy {
  font-family: var(--mythic-font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--mythic-text-mid);
  flex: 1;
}
.lp-footer__links {
  display: flex; gap: 24px;
}
.lp-footer__links a {
  font-family: var(--mythic-font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--mythic-text-mid);
  transition: color 180ms ease-out;
}
.lp-footer__links a:hover { color: var(--mythic-text); }

/* ────── Tab switcher for phone screens ────── */
.lp-phone-tabs {
  position: absolute;
  bottom: -56px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
  background: var(--mythic-bg);
  border: 1px solid var(--mythic-border);
  border-radius: 999px;
  padding: 4px;
  box-shadow: var(--mythic-shadow-sm);
  z-index: 4;
}
.lp-phone-tabs button {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--mythic-font-body);
  font-weight: 700;
  font-size: 12px;
  color: var(--mythic-text-mid);
  letter-spacing: -0.01em;
  transition: background 180ms ease-out, color 180ms ease-out;
}
.lp-phone-tabs button.active {
  background: var(--mythic-text);
  color: #fff;
}

/* ────── Wordmark (mark + name) ────── */
.lp-wordmark {
  display: inline-flex; align-items: center;
  gap: calc(var(--wm) * 0.3);
  font-family: var(--mythic-font-display);
  font-weight: 700;
  font-size: var(--wm);
  letter-spacing: -0.035em;
  color: var(--mythic-text);
  white-space: nowrap;
  line-height: 1;
}
.lp-wordmark img {
  width: calc(var(--wm) * 1.6);
  height: calc(var(--wm) * 1.6);
  display: block;
}

/* ────── Hero pill ────── */
.lp-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  margin-bottom: 22px;
  border-radius: 999px;
  background: var(--mythic-bg);
  border: 1px solid var(--mythic-border);
  box-shadow: var(--mythic-shadow-xs);
  font-family: var(--mythic-font-body);
  font-weight: 700; font-size: 12px;
  letter-spacing: -0.005em;
  color: var(--mythic-text);
}
.lp-pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mythic-primary);
  animation: pulseDot 2s ease-out infinite;
}
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(18, 193, 1, 0.45); }
  70% { box-shadow: 0 0 0 8px rgba(18, 193, 1, 0); }
  100% { box-shadow: 0 0 0 0 rgba(18, 193, 1, 0); }
}

/* Pre-launch store badge: same shape, not a link */
.lp-store-btn--soon { cursor: default; }
.lp-store-btn--soon:hover { background: var(--mythic-text); transform: none; }
.lp-store-btn--ghost {
  background: var(--mythic-bg);
  color: var(--mythic-text);
  border: 1px solid var(--mythic-border);
}
.lp-store-btn--ghost:hover { background: var(--mythic-bg-subtle); }

/* Floating card text */
.lp-float-card { font-family: var(--mythic-font-body); }
.lp-float-card__tag {
  display: flex; align-items: center; gap: 4px;
  font-weight: 700; font-size: 11px;
  color: var(--mythic-primary);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.lp-float-card__big {
  font-family: var(--mythic-font-display);
  font-weight: 700; font-size: 16px;
  margin-top: 4px; letter-spacing: -0.015em;
}
.lp-float-card__meta {
  font-weight: 500; font-size: 11px;
  color: var(--mythic-text-mid);
  margin-top: 2px;
}

/* Voice screen bits */
.lp-wave {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  height: 80px;
  margin: 26px 0 6px;
}
.lp-wave span {
  width: 4px; border-radius: 999px;
  background: var(--mythic-primary);
  opacity: 0.85;
  animation: wave 1.1s ease-in-out infinite;
  transform-origin: center;
}
@keyframes wave {
  0%, 100% { transform: scaleY(0.45); }
  50% { transform: scaleY(1); }
}
.lp-mic {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--mythic-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  animation: micPulse 1.8s ease-out infinite;
}
@keyframes micPulse {
  0% { box-shadow: 0 0 0 0 rgba(18, 193, 1, 0.4); }
  70% { box-shadow: 0 0 0 18px rgba(18, 193, 1, 0); }
  100% { box-shadow: 0 0 0 0 rgba(18, 193, 1, 0); }
}
.lp-caret {
  display: inline-block;
  width: 2px; height: 1em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: var(--mythic-primary);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Progress photo placeholders */
.lp-photo-tile {
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  background: linear-gradient(160deg, #EEF2F7 0%, #DDE5EF 100%);
  color: rgba(24,27,24,0.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--mythic-font-body);
  font-weight: 700; font-size: 11px;
  position: relative; overflow: hidden;
}
.lp-photo-tile::after {
  /* the mirror's glass glint */
  content: "";
  position: absolute; inset: -40% -10% auto auto;
  width: 40%; height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  transform: rotate(28deg);
}
.lp-photo-tile--now {
  background: linear-gradient(160deg, #E7FFE0 0%, #CDEFC6 100%);
  color: var(--mythic-primary-deep);
}

/* Pillar extras */
.lp-pillar__icon--gold {
  background: var(--mirror-gold-soft);
  color: #B98900;
}
.lp-mini-card {
  background: var(--mythic-bg);
  border: 1px solid var(--mythic-border);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--mythic-shadow-sm);
}
.lp-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mythic-font-body);
  font-weight: 800; font-size: 12px;
  color: var(--mythic-primary-deep);
  background: var(--mythic-primary-soft);
  padding: 5px 10px; border-radius: 999px;
}

/* Magic section extras */
.lp-magic__try {
  font-family: var(--mythic-font-body);
  font-weight: 700; font-size: 13px;
  color: #d4b4f5;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.lp-magic__demo { display: flex; justify-content: center; }

/* ────── Capture lineup ────── */
.lp-ways-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.lp-way {
  background: var(--mythic-bg);
  border: 1px solid var(--mythic-border);
  border-radius: 20px;
  padding: 22px;
  transition: transform 240ms ease-out, box-shadow 240ms ease-out;
}
.lp-way:hover { transform: translateY(-3px); box-shadow: var(--mythic-shadow-sm); }
.lp-way__icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--mythic-text); color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.lp-way h3, .lp-tile h3, .lp-privacy h3 {
  margin: 0 0 6px;
  font-family: var(--mythic-font-display);
  font-weight: 700; font-size: 19px;
  letter-spacing: -0.015em;
  color: var(--mythic-text);
}
.lp-way p, .lp-tile p, .lp-privacy p {
  margin: 0;
  font-family: var(--mythic-font-body);
  font-weight: 500; font-size: 14px; line-height: 1.5;
  color: var(--mythic-text-mid);
  text-wrap: pretty;
}

/* ────── Everywhere ────── */
.lp-everywhere {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.lp-tile h3 { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.lp-tile__visual {
  height: 220px;
  border-radius: 24px;
  background: var(--mythic-bg-subtle);
  border: 1px solid var(--mythic-border);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.lp-tile__visual--dark {
  background: radial-gradient(circle at 70% 20%, #2a2a24 0%, var(--mythic-bg-inverse) 70%);
  border-color: transparent;
}
.lp-watch {
  width: 150px; height: 178px;
  border-radius: 44px;
  background: #000;
  border: 6px solid #2C2C2E;
  box-shadow: 0 20px 40px -16px rgba(0,0,0,0.6);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.lp-watch__mic {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--mythic-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.lp-widget {
  width: 170px; height: 170px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 20px 40px -18px rgba(16,24,40,0.3), 0 0 0 1px rgba(16,24,40,0.04);
  padding: 14px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.lp-widget__head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mythic-font-body);
  font-weight: 800; font-size: 12px;
}
.lp-widget__actions { display: flex; justify-content: space-between; }
.lp-widget__actions span {
  width: 30px; height: 30px; border-radius: 10px;
  background: var(--mythic-bg-subtle);
  display: flex; align-items: center; justify-content: center;
}
.lp-health {
  width: 82%;
  display: flex; flex-direction: column; gap: 10px;
}
.lp-health__row {
  display: flex; align-items: center; gap: 10px;
  background: #fff;
  border: 1px solid var(--mythic-border);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: var(--mythic-shadow-sm);
  font-family: var(--mythic-font-body);
}
.lp-health__icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: #FFE4E8; color: #FF2D55;
  display: flex; align-items: center; justify-content: center;
}
.lp-health__title { font-weight: 700; font-size: 13px; }
.lp-health__meta { font-weight: 500; font-size: 11px; color: var(--mythic-text-mid); }
.lp-health__kcal { font-family: var(--mythic-font-display); font-weight: 700; font-size: 13px; }

/* ────── Privacy ────── */
.lp-privacy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.lp-privacy {
  display: flex; gap: 14px; align-items: flex-start;
}
.lp-privacy > svg {
  color: var(--mythic-primary);
  margin-top: 2px;
}

/* Final CTA mark */
.lp-final__mark {
  display: block;
  margin: 0 auto 18px;
  animation: floaty 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ────── Mobile ────── */
@media (max-width: 1080px) {
  .lp-float-card { display: none; }
}
@media (max-width: 960px) {
  .lp-hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .lp-phone-stage { min-height: 580px; }
  .lp-pillars { grid-template-columns: 1fr; }
  .lp-magic {
    grid-template-columns: 1fr;
    padding: 48px 32px;
    gap: 40px;
  }
  .lp-ways-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-everywhere { grid-template-columns: 1fr; }
  .lp-privacy-grid { grid-template-columns: 1fr; }
  .lp-nav__links { display: none; }
  .lp-section { padding: 64px 0; }

  /* With the links gone, the bar would otherwise sit at the top as an empty white
     strip. Collapse it to nothing at rest and let it grow back in (with the docked
     wordmark) as the page scrolls — driven by --nav-p set on .lp-nav. */
  .lp-nav__inner {
    min-height: calc(55px * var(--nav-p, 0));
    padding-top: calc(18px * var(--nav-p, 0));
    padding-bottom: calc(18px * var(--nav-p, 0));
  }
  /* Start the wordmark near the top (no empty bar to clear) and dock it into the bar. */
  .lp-nav__logo {
    transform: translate(-50%, calc(40px - 27.5px * var(--nav-p, 0)))
               scale(calc(1 - 0.625 * var(--nav-p, 0)));
  }
}
@media (max-width: 600px) {
  .lp-container { padding: 0 20px; }
  .lp-ways-grid { grid-template-columns: 1fr; }
  .lp-phone-tabs button { padding: 8px 10px; }
  .lp-hero__logo-spacer { height: 88px; }
  .lp-footer__inner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 0 20px; }
}
@media (max-width: 600px) {
  .lp-nav__logo .lp-wordmark { --wm: 28px !important; }
  .lp-hero h1 .magic-spark { right: -18px; top: -6px; }
}