/* This is the start of the components.css file */
/* Last revised by your AI friend: 2026-05-29 */

/* ─── Navigation ─────────────────────────────────────────────────── */
:root {
  --nav-height: 68px;
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: var(--color-bg);
  height: var(--nav-height);
}

/* Push main content below fixed nav */
main {
  padding-top: var(--nav-height);
}

.nav__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

@media (min-width: 1024px) {
  .nav__inner {
    padding: var(--space-2) var(--space-8);
  }
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  text-decoration: none;
}

.nav__logo:hover {
  text-decoration: none;
}

.nav__logo img {
  height: 32px;
  width: auto;
}

.nav__logo-text {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.03em;
}

.nav__center {
  display: none;
}

@media (min-width: 860px) {
  .nav__center {
    display: flex;
    gap: var(--space-6);
    align-items: center;
  }

  .nav__center a {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: opacity 0.2s;
    white-space: nowrap;
  }

  .nav__center a:hover {
    opacity: 0.7;
  }
}

.nav__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Mobile: tighter nav so the Download button doesn't get clipped by the viewport edge.
   At 375px the logo + lang toggle + button row was overflowing — shave padding and gaps. */
@media (max-width: 767px) {
  .nav__inner {
    padding: 0 var(--space-2);
    gap: var(--space-2);
  }
  .nav__right {
    gap: var(--space-1);
  }
  .nav__right .btn {
    padding: 10px 16px;
  }
}

/* ─── Language menu (globe icon + dropdown) ──────────────────────── */
.lang-menu {
  position: relative;
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  min-height: 44px;
  min-width: 44px;
  transition: color 0.15s;
}

.lang-toggle:hover {
  color: var(--color-text);
}

.lang-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background-color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 6px;
  width: max-content;
  display: none;
  flex-direction: column;
  gap: 2px;
}

.lang-dropdown--open {
  display: flex;
}

.lang-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: none;
  border: none;
  font-family: var(--font);
  font-size: var(--text-sm);
  color: #000000;
  padding: 9px 12px;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.12s, color 0.12s;
  width: 100%;
}

.lang-option:hover {
  background: none;
  color: #000000;
}

.lang-option--active {
  color: #000000;
  font-weight: 600;
}

.lang-option--active::after {
  content: '';
}

.lang-option--soon {
  opacity: 0.4;
  cursor: default;
}

.lang-option--soon:hover {
  background: none;
  color: var(--color-text-muted);
}


/* ─── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 12px 24px;
  border-radius: 100px;
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  min-height: 44px;
  border: none;
  letter-spacing: -0.01em;
}

.btn:active {
  transform: scale(0.97);
}

.btn--primary {
  background-color: var(--color-text);
  color: var(--color-bg);
}

.btn--primary:hover {
  opacity: 0.9;
  text-decoration: none;
}

.btn--ghost {
  background-color: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.btn--ghost:hover {
  border-color: var(--color-text-muted);
  text-decoration: none;
}

/* App Store badge */
.app-store-badge {
  display: inline-block;
  transition: opacity 0.2s, transform 0.15s;
}

.app-store-badge:hover {
  opacity: 0.85;
  transform: scale(1.02);
}

.app-store-badge:active {
  transform: scale(0.98);
}

.app-store-badge img {
  height: 52px;
  width: auto;
  display: block;
}

/* ─── Section Label ───────────────────────────────────────────────── */
.section-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

/* ─── Hero Section ────────────────────────────────────────────────── */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 0;
  padding-bottom: 0;
}

.hero__content {
  padding: var(--space-1) var(--space-3) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
}

.hero__eyebrow {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.hero__headline {
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 16ch;
  margin: 0 auto var(--space-3);
}

.hero__sub {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 44ch;
  margin: 0 auto var(--space-6);
  line-height: 1.6;
}

/* Badge + QR side by side */
.hero__cta-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  justify-content: center;
}

/* QR placeholder — hidden until QR image is added */
.hero__qr {
  width: 52px;
  height: 52px;
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  display: none; /* show when QR is ready: set display: flex */
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 10px;
  letter-spacing: 0.05em;
}

.hero__qr img {
  width: 100%;
  height: 100%;
  border-radius: 7px;
  object-fit: cover;
}

.hero__typewriter-wrap {
  font-size: var(--text-xl);
  color: var(--color-text-muted);
  font-style: italic;
  min-height: 2.4em;
  margin-bottom: var(--space-6);
}

/* Mobile: the longest hook is the German magnesium line, which wraps to 5 lines
   on a 375px screen (iPhone SE). Reserve that height so the page below never
   jumps as the line types out and erases. German is the worst case across all
   six languages — longest by character count and it carries the unbreakable
   word "Magnesiumaufnahme" — so 5 lines covers every language.

   The 5-line reserve sets the gap below the typewriter. On top of that there was
   ~96px of spacing (this margin + the graffiti's top padding) before "Offline is
   the new black", which read as a big void — worst on the shorter languages where
   the typed line only fills 3 of the 5 reserved lines. Pull the graffiti up close
   to the reserved box on mobile so it sits just under the hook, not glued to it. */
@media (max-width: 767px) {
  .hero__typewriter-wrap {
    min-height: 5lh;
    margin-bottom: var(--space-2);
  }
}

.hero__typewriter {
  display: inline;
  border-right: 2px solid var(--color-accent);
  padding-right: 2px;
  animation: blink 1s step-end infinite;
}

/* ─── Graffiti Fonts ──────────────────────────────────────────────── */
@font-face {
  font-family: 'Rock Salt';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/rock-salt.woff2') format('woff2');
}

@font-face {
  font-family: 'Permanent Marker';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/permanent-marker.woff2') format('woff2');
}

/* Three fonts. All locally hosted. Each one a different kind of handwriting. */

.graffiti {
  font-family: 'Rock Salt', cursive;
  font-size: clamp(2.5rem, 8vw, 6rem);
  color: #FF2D78;
  padding: var(--space-6) var(--space-3) var(--space-2);
  transform: rotate(-2deg);
  transform-origin: left center;
  max-width: max-content;
  line-height: 1;
  user-select: none;
}

/* Mobile: tighten the top gap so "Offline is the new black" sits close under the
   typewriter's reserved 5-line box instead of floating a screen away. Pairs with
   the reduced .hero__typewriter-wrap margin-bottom above. */
@media (max-width: 767px) {
  .graffiti {
    padding-top: var(--space-2);
  }
}

.graffiti--marker {
  font-family: 'Permanent Marker', cursive;
  font-size: clamp(1.2rem, 3vw, 2rem);
  color: rgba(255, 255, 255, 0.55);
  transform: rotate(-1.5deg);
  transform-origin: right center;
  margin-left: auto;
  padding: var(--space-6) var(--space-6) var(--space-2) var(--space-3);
}

/* ─── Anxiety Spike Section ───────────────────────────────────────── */
.anxiety {
  background-color: var(--color-bg);
  text-align: center;
  padding: var(--space-6) var(--space-3) var(--space-6);
}

.anxiety__questions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.anxiety__q {
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  max-width: 36ch;
  margin: 0 auto;
}

.anxiety__q--visible {
  opacity: 1;
  transform: translateY(0);
}

.anxiety__q--dim {
  opacity: 0.2;
  color: var(--color-text-muted);
  transition: opacity 0.3s ease, color 0.3s ease;
}

.anxiety__q--lit {
  opacity: 1 !important;
  color: var(--color-text) !important;
  animation: thought-intrude 0.12s ease forwards;
}

/* The thought pops in like it interrupted something. */
@keyframes thought-intrude {
  0%   { opacity: 0.2; }
  40%  { opacity: 1.0; }
  100% { opacity: 1.0; }
}

.anxiety__answer {
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-accent);
  text-shadow: 0 0 40px color-mix(in srgb, var(--color-accent) 60%, transparent),
               0 0 80px color-mix(in srgb, var(--color-accent) 30%, transparent);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease 0.4s, transform 0.8s ease 0.4s;
  line-height: 1.3;
  margin-top: var(--space-6);
}

.anxiety__answer--visible {
  opacity: 1;
  transform: translateY(0);
}

.anxiety__clarification {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin: var(--space-3) auto 0;
  text-align: center;
  max-width: 44ch;
  opacity: 0;
  transition: opacity 0.6s ease 1.2s;
}

.anxiety__answer--visible ~ .anxiety__clarification {
  opacity: 1;
}

/* ─── Identity / No Servers ───────────────────────────────────────── */
.identity {
  padding: var(--space-16) var(--space-3);
}

.identity__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
}

.identity__logo-col {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  padding-top: var(--space-2);
}

.identity__logo {
  width: clamp(100px, 20vw, 220px);
  height: auto;
}

.identity__right-col {
  flex: 1;
  min-width: 0;
}

.identity__tagline {
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: var(--space-8);
}

.identity__screenshots {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .identity__inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
  }
  .identity__right-col {
    width: 100%;
  }
  .identity__tagline {
    text-align: center;
  }
  .identity__screenshots {
    justify-content: center;
  }
}

/* ─── Inline Pill Highlights ─────────────────────────────────────── */
.pill-highlight {
  display: inline;
  border-radius: 999px;
  padding: 0.05em 0.5em;
  font-weight: 600;
}

.pill-highlight--pink {
  background: color-mix(in srgb, #FBBF24 15%, #1a1a1a);
  border: 1px solid color-mix(in srgb, #FBBF24 40%, transparent);
  color: #FBBF24;
}

.pill-highlight--green {
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.35);
  color: #34D399;
}

/* ─── Trust / Real Photos ─────────────────────────────────────────── */
.trust {
  padding: var(--space-6) var(--space-3);
}

.trust__inner {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.trust__text-col {
  flex: 1;
  min-width: 0;
}

.trust__screenshot-col {
  flex: 0 0 auto;
  display: flex;
  gap: var(--space-4);
}

.trust__headline {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: var(--space-4);
}

.trust__line {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--color-text);
  line-height: 1.7;
  margin-bottom: var(--space-2);
}

.trust__hook {
  color: var(--color-text-muted);
  font-size: var(--text-2xl);
  font-weight: 700;
  font-style: normal;
}

.trust__line--pivot {
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  color: var(--color-text);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

@media (max-width: 767px) {
  .trust__inner {
    flex-direction: column;
    gap: var(--space-6);
  }
  .trust__screenshot-col {
    align-self: center;
  }
}

.screenshot-card {
  flex: 0 0 auto;
  scroll-snap-align: center;
  margin: 0;
  border-radius: 40px;
  transition: transform 0.3s ease;
}

.screenshot-card img {
  display: block;
  width: clamp(200px, 28vw, 280px);
  height: auto;
  border-radius: 36px;
  border: 2px solid rgba(255, 255, 255, 0.55);
}

/* Border variants */
.screenshot-card--blue {
  box-shadow: none;
}

.screenshot-card--white {
  box-shadow:
    0 0 40px color-mix(in srgb, #ffffff 20%, transparent),
    0 0 80px color-mix(in srgb, #ffffff 8%, transparent);
}

.screenshot-card--hotpink {
  box-shadow:
    0 0 40px color-mix(in srgb, #FF2D78 25%, transparent),
    0 0 80px color-mix(in srgb, #FF2D78 12%, transparent);
}

/* no modifier needed for none — just no class */

@media (max-width: 767px) {
  .screenshot-card img {
    width: 42vw;
  }

  .screenshots__scroll {
    justify-content: flex-start;
  }
}

/* ─── Pricing Section ─────────────────────────────────────────────── */
.pricing {
  background-color: var(--color-bg);
  padding: var(--space-20) var(--space-3);
}

.pricing__inner {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.pricing__screenshots {
  flex: 0 0 auto;
  display: flex;
  gap: var(--space-4);
}

.pricing__copy {
  flex: 1;
  min-width: 0;
}

.pricing__headline {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: var(--space-4);
}

.pricing__line {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--color-text);
  line-height: 1.7;
  margin-bottom: var(--space-2);
}

.pricing__line--muted {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-3);
}

@media (max-width: 767px) {
  /* The .pricing { padding: var(--space-20) ... } declaration above is invalid
     because --space-20 isn't defined, so padding falls back to 0. That left
     the pricing section flush against the viewport while trust and footer
     had a 48px indent. Restore matching horizontal padding on mobile only. */
  .pricing {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  /* Without align-items: stretch, the inner flex children get centered to their
     content width, so the headline+copy end up shifted left of where trust's
     text col sits (and don't line up with the footer either). Stretch makes
     them fill the container so text starts at the same 48px indent. */
  .pricing__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
  }
  .pricing__screenshots {
    justify-content: center;
  }
}

/* ─── Pills Section ───────────────────────────────────────────────── */
.pills-section {
  background-color: var(--color-bg);
  overflow: hidden;
  position: relative;
}

.pills-section__header {
  text-align: center;
  position: relative;
  z-index: 2;
  padding-bottom: var(--space-2);
}

.pills-section__free-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  letter-spacing: 0.02em;
}

.pills-section__headline {
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-2);
}

.pills-section__tagline {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  opacity: 0;
  transition: opacity 1s ease;
}

.pills-section__tagline--visible {
  opacity: 1;
}

/* Physics container */
.pills-canvas {
  position: relative;
  width: 100%;
  height: 360px;
  overflow: hidden;
}

/* Fallback static grid for prefers-reduced-motion */
.pills-static {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: var(--space-4) 0;
}

@media (prefers-reduced-motion: reduce) {
  .pills-canvas { display: none; }
  .pills-static { display: flex; }
}

/* ─── Nutrient Pill Component ─────────────────────────────────────── */
.pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: default;
  user-select: none;
  background-color: color-mix(in srgb, var(--pill-color, #4ade80) 15%, #1a1a1a);
  border: 1px solid color-mix(in srgb, var(--pill-color, #4ade80) 40%, transparent);
  color: var(--pill-color, #4ade80);
  will-change: transform;
  /* Pill is positioned by Matter.js physics */
}

/* Static pill (for fallback grid — no absolute positioning) */
.pill--static {
  position: static;
}

/* ─── Final CTA Section ───────────────────────────────────────────── */
.final-cta {
  text-align: center;
  padding: var(--space-10) var(--space-3) var(--space-6);
  background-color: var(--color-bg);
  position: relative;
  overflow: hidden;
}

/* no glow */

.final-cta__headline {
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-1);
}

.final-cta__pun {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  margin: var(--space-1) auto var(--space-8);
  text-align: center;
}

.final-cta__sub {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 36ch;
  margin: 0 auto var(--space-6);
  line-height: 1.6;
}

/* ─── Footer ──────────────────────────────────────────────────────── */
.footer {
  background-color: var(--color-bg);
  padding: var(--space-4) var(--space-3) var(--space-4);
}

.footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.footer__contact-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

/* When the contact title is a link (to /support), keep it looking exactly like
   the plain title: block layout (stacks above the email) and normal text color,
   not the muted link color. The subtle :hover from .footer__contact a still applies.

   2026-05-30: Deliberately NOT given the blue (--color-accent) hover that the
   .footer__links nav links get. "Contact Us" is the bold title of the contact
   block, not a peer of that muted, equal-weight nav row, so it keeps the subtle
   opacity fade from .footer__contact a:hover. A bold heading flashing blue looked
   louder than the understated nav links. The gray fade is on purpose — not a bug. */
.footer__contact a.footer__contact-title {
  display: block;
  color: var(--color-text);
}

.footer__contact a,
.footer__contact span {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
}

.footer__contact a:hover {
  opacity: 0.7;
}

.footer__bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-width);
}

.footer__icon {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer__icon img {
  height: 48px;
  width: auto;
  opacity: 1;
}

.footer__graffiti {
  font-family: 'Permanent Marker', cursive;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.28);
  line-height: 1.3;
  user-select: none;
  white-space: nowrap;
}

.footer__links {
  display: flex;
  flex-direction: row;
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
}

.footer__links a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.footer__links a:hover {
  color: var(--color-accent);
}

.footer__legal {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Mobile: stack the footer bar contents vertically, left-aligned.
   Desktop keeps the row layout (links | legal | contact).
   Icon + graffiti row above stays centered as-is.
   Horizontal padding matches the section+container indent used elsewhere
   (24px section + 24px container = 48px) so all text on mobile lines up
   to the same left edge. */
@media (max-width: 767px) {
  .footer {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
  /* The two graffiti phrases flank the logo on desktop. On a phone the longest
     pairs (French and German) are far too wide to sit beside the 48px logo at a
     readable size — they'd have to shrink to ~8px or run off the edges. Stack
     them instead: phrase, logo, phrase. Full size, no clipping, and the
     mountains/metro pairing still reads top to bottom. */
  .footer__icon {
    flex-direction: column;
    gap: var(--space-2);
  }
  .footer__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .footer__links {
    flex-direction: column;
    gap: var(--space-1);
    align-items: flex-start;
  }
}

/* ─── Section reveal utility (used by IntersectionObserver) ──────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* This is the end of the components.css file */