/* ── Reset ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { display: block; max-width: 100%; }

/* ── Design tokens ──────────────────────────────── */
:root {
  --bg:        #0e0e0e;
  --primary:   #fdfdfd;
  --secondary: #cecece;
  --accent:    #ffdb26;
  --dark:      #2e2e2e;
  --border:    #4b4b4b;
}

/* ── Base ───────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  background-color: var(--bg);
  color: var(--primary);
  font-family: 'Sora', sans-serif;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

.page {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

/* ── Top bar ────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
}

.topbar__logo {
  display: inline-flex;
  align-items: center;
  padding-bottom: 8px;
  text-decoration: none;
}

.topbar__logo img {
  display: block;
  width: auto;
  height: 20px;
}

.topbar__menu {
  display: flex;
  align-items: center;
  gap: 40px;
}

.topbar__menu a {
  display: inline-flex;
  align-items: center;
  color: var(--primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease;
}

.topbar__menu a:hover { opacity: 0.7; }

.topbar__menu img {
  display: block;
  width: 20px;
  height: 20px;
}

/* The hamburger, the word INSTAGRAM and the App Store entry belong to the
   mobile overlay menu; on desktop the nav is an inline row with the Instagram
   glyph and the App Store link is the hero button.
   These carry .topbar__menu so they outrank `.topbar__menu a` and
   `.topbar__menu img` below, which are more specific than a lone class. */
.nav-toggle { display: none; }

.topbar__menu .topbar__ig-label,
.topbar__menu .topbar__appstore { display: none; }

/* ── Screens ────────────────────────────────────── */
/* The home page is one locked screen here and two viewport-tall panels on
   mobile. The wrappers dissolve above the breakpoint, so the desktop layout
   keeps seeing topbar / hero / footer as direct children of .page. */
.screen { display: contents; }

/* Screen two is the mobile home of the title and the button; on desktop both
   live in the hero column, so this block stays out of the flow. */
.cta { display: none; }

/* ── Button ─────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background-color: var(--accent);
  color: var(--dark);
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn:hover  { opacity: 0.88; }
.btn:active { opacity: 0.75; transform: scale(0.98); }

/* ── Hero (home) ────────────────────────────────── */
.hero {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 60px;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 100%;
  max-width: 1312px;
}

.hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__animation {
  height: 100%;
  max-height: 640px;
  width: auto;
  max-width: 323px;
  aspect-ratio: 323 / 640;
  border: 0;
  background: transparent;
  display: block;
  object-fit: cover;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding-right: 60px;
}

.hero__eyebrow {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--secondary);
  transform: translateY(0);
  opacity: 1;
  transition: transform 220ms ease, opacity 220ms ease;
}

.hero__eyebrow.is-leaving,
.hero__eyebrow.is-entering {
  will-change: transform, opacity;
}

.hero__eyebrow.is-leaving {
  transform: translateY(-12px);
  opacity: 0;
}

/* Initial state for the incoming text — applied with no transition so the
   element starts below+invisible, then the class is removed and it slides
   into resting state via the base transition. */
.hero__eyebrow.is-entering {
  transform: translateY(12px);
  opacity: 0;
  transition: none;
}

.hero__title {
  font-size: 48px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--primary);
  margin-top: 20px;
}

/* ── Support page ───────────────────────────────── */
.support {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 60px;
}

.support__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}

.support__eyebrow {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--secondary);
}

.support__title {
  font-size: 48px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--primary);
  margin-top: 20px;
}

/* ── Footer ─────────────────────────────────────── */
.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.footer p {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--secondary);
}

/* ── Responsive: tablet ─────────────────────────── */
@media (max-width: 1100px) {
  .hero__title,
  .support__title { font-size: 40px; }
  .hero__content  { padding-right: 32px; }
  .hero__animation { max-width: 280px; max-height: 555px; }
}

/* ── Responsive: mobile ─────────────────────────── */
@media (max-width: 768px) {
  .topbar { padding: 20px 24px; }

  /* ── Overlay menu ─────────────────────────────── */
  /* Every nav entry hides behind the toggle and reappears on a full-screen
     Valuedex-yellow panel. The state is one class on <body>, so the panel,
     the scroll lock and the hamburger→X morph are all CSS. */
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    /* 24×16 of bars inside a 40×32 tap target: the padding is cancelled by the
       negative margin, so the icon stays flush with the topbar edge. */
    width: 40px;
    height: 32px;
    padding: 8px;
    margin: -8px;
    background: none;
    border: 0;
    cursor: pointer;
    position: relative;
    z-index: 50; /* above the panel, so the same button closes it */
    -webkit-tap-highlight-color: transparent;
  }

  .nav-toggle__bar {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: var(--primary);
    transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
  }

  /* Bar centres sit one gap + one bar apart (5px + 2px), which is exactly the
     travel each outer bar needs to meet in the middle and cross. */
  body.nav-open .nav-toggle__bar { background-color: var(--dark); }
  body.nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* The panel is switched on, not faded in: iOS Safari re-tints its top and
     bottom bars only once the page settles, so a fade made the bands turn
     yellow a beat after the panel. Instant + the theme-color swap in menu.js
     keeps panel and bars on the same frame. */
  .topbar__menu {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 40;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    background-color: var(--accent);
  }

  html.nav-open,
  body.nav-open { overflow: hidden; }
  body.nav-open .topbar__menu { display: flex; }

  .topbar__menu a {
    color: var(--dark);
    font-size: 24px;
    font-weight: 600;
  }

  /* No glyph on mobile: the word alone, so it balances SUPPORT and APP STORE. */
  .topbar__menu .topbar__ig-icon  { display: none; }
  .topbar__menu .topbar__ig-label { display: inline; }
  .topbar__menu .topbar__appstore { display: inline-flex; }

  /* ── Home: two viewport-tall panels ───────────── */
  .page--home {
    height: auto;
    overflow: visible;
  }

  .page--home .screen {
    display: flex;
    flex-direction: column;
    height: 100dvh;
  }

  /* Screen one holds the phone and nothing else: the animated line is the
     last thing above the fold, so the title and the button are dropped here
     and shown again on screen two. Collapsing the hero wrappers lifts the
     eyebrow out of the desktop text column and puts it under the video. */
  .hero {
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 8px 24px 24px;
  }

  .hero__inner,
  .hero__content,
  .hero__text { display: contents; }

  .hero .hero__title,
  .hero .btn { display: none; }

  .hero__visual {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Fits the free height, then the free width, keeping the phone whole. */
  .hero__animation {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .hero__eyebrow {
    margin-top: 24px;
    font-size: 16px;
    text-align: center;
  }

  /* Screen two: title and button centred, footer on the bottom edge. */
  .cta {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 24px;
    text-align: center;
  }

  .cta .hero__title {
    margin-top: 0;
    font-size: 28px;
  }

  /* ── Support page ─────────────────────────────── */
  .support { padding: 48px 24px; }
  .support__eyebrow { font-size: 16px; }
  .support__title { font-size: 28px; margin-top: 16px; }

  .footer { padding: 24px; }
}

/* ── Responsive: small mobile ───────────────────── */
@media (max-width: 420px) {
  .btn { font-size: 18px; }
}

/* ── Document page (privacy) ────────────────────── */
/* Home and support are locked to the viewport; a legal document is long-form,
   so this modifier releases the height cap and lets the page scroll. */
.page--doc {
  height: auto;
  min-height: 100dvh;
  overflow: visible;
}

.doc {
  flex: 1 1 auto;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 60px 80px;
}

.doc__title {
  font-size: 48px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--primary);
}

.doc__updated {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--border);
}

.doc__lead {
  margin-top: 32px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--secondary);
}

.doc h2 {
  margin-top: 48px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--primary);
}

.doc p,
.doc li {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--secondary);
}

.doc ul {
  margin-top: 8px;
  padding-left: 20px;
}

.doc li { margin-top: 10px; }

.doc li::marker { color: var(--border); }

.doc strong {
  color: var(--primary);
  font-weight: 600;
}

.doc a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.doc a:hover { border-bottom-color: var(--accent); }

/* Contact block — the controller identity the DSA and GDPR both ask for. */
.doc__address {
  margin-top: 16px;
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  font-style: normal;
  color: var(--secondary);
}

/* ── Footer row ─────────────────────────────────── */
/* One line: Need help? | Privacy Policy | 2026 Gebelia Design.
   .footer is already a centered flex row, so only the gap and the item
   styling are needed here.

   The row is a fixed string, so on narrow phones it cannot hold 12px type
   at a fixed gap — at 320px it overflows by 66px. Gap and size are therefore
   fluid: the gap gives way first, then the type, so the line never breaks.
   Both cap at the design values (12px) and stop shrinking at a legible floor. */
.footer {
  gap: clamp(4px, 2vw, 12px);
  font-size: clamp(10px, 3.1vw, 12px);
}

.footer a,
.footer p,
.footer__sep {
  font-size: inherit;
  line-height: 1.2;
  /* Each item keeps its own words together; only the gaps may compress. */
  white-space: nowrap;
}

.footer a {
  font-weight: 500;
  color: var(--secondary);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.footer a:hover { opacity: 0.7; }

.footer__sep { color: var(--border); }

@media (max-width: 768px) {
  .doc { padding: 8px 24px 56px; }
  .doc__title { font-size: 28px; }
  .doc__lead { font-size: 16px; margin-top: 24px; }
  .doc h2 { margin-top: 36px; font-size: 18px; }
  .doc__address { padding: 16px 20px; }
}