/* Fresh landing — single view when it fits, scroll when it can't. Tokens from tokens.css.
   Left column alignment: logo (ink-tight SVG), kicker, h1, lead, and CTA all align to the
   container edge; the h1 gets a small optical outdent so its ink lines up with the caps. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--fresh-canvas);
  color: var(--fresh-text);
  font: var(--fresh-type-body);
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;
  overflow: hidden; /* released below when the viewport is too small to fit */
}
.dot { color: var(--fresh-green-400); }
img { display: block; }
a { color: inherit; text-decoration: none; }

/* shared container metrics so nav and hero columns align exactly */
.nav, .hero { max-width: 1160px; width: 100%; margin: 0 auto; padding-inline: clamp(20px, 4vw, 32px); }

/* nav */
.nav { flex: 0 0 auto; padding-top: clamp(16px, 3.5vh, 32px); }
.nav-logo { display: inline-block; }
.nav-logo img { height: clamp(20px, 2.6vh + 8px, 26px); width: auto; }

/* hero fills the rest of the viewport */
.hero {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 48px); align-items: center;
  background:
    radial-gradient(80% 60% at 75% 0%, rgba(42, 48, 56, 0.55) 0%, transparent 60%),
    radial-gradient(40% 30% at 82% 10%, rgba(74, 222, 128, 0.07) 0%, transparent 70%);
}
.kicker {
  font: var(--fresh-type-caption); letter-spacing: var(--fresh-tracking-caps);
  text-transform: uppercase; color: var(--fresh-green-400);
  margin-bottom: clamp(10px, 1.8vh, 18px);
}
.hero h1 {
  font-family: var(--fresh-font-display); font-weight: 700;
  /* scales with BOTH width and height so short-wide windows don't blow up */
  font-size: clamp(32px, min(6vw, 9.2vh), 72px);
  line-height: 1.03; letter-spacing: var(--fresh-tracking-display);
  max-width: 14ch;
  margin-left: -0.045em; /* optical: align the D's ink with the caps kicker */
}
.lead {
  font-family: var(--fresh-font-body);
  font-size: clamp(15px, min(1.35vw + 6px, 2.6vh), 19px); line-height: 1.5;
  color: var(--fresh-text-dim);
  margin-top: clamp(12px, 2.4vh, 24px); max-width: 46ch;
}
.hero-cta { margin-top: clamp(16px, 3.4vh, 32px); }
.appstore-badge {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--fresh-surface); color: var(--fresh-text);
  border: 1px solid var(--fresh-border);
  border-radius: 14px; padding: clamp(10px, 1.6vh, 14px) 24px clamp(10px, 1.6vh, 14px) 18px;
}
.appstore-badge span { font: 600 clamp(15px, 2vh, 17px)/1.2 var(--fresh-font-body); }

/* phone mock — scales fluidly with both viewport axes */
.hero-phone { display: flex; justify-content: center; min-height: 0; }
.phone {
  width: clamp(200px, min(23vw, 40svh), 310px);
  border-radius: 15%/7.5%; border: 1px solid var(--fresh-border);
  background: #08090c; padding: 4.5%; position: relative;
  box-shadow: var(--fresh-shadow-float), 0 0 80px rgba(74, 222, 128, 0.06);
}
.phone-notch {
  /* width-based units (cqw) so the notch can never drift into the screen text —
     top/height in % resolve against the phone's varying HEIGHT and collide on tall mocks */
  width: 36cqw; height: 7.5cqw; background: #08090c; border: 1px solid var(--fresh-border);
  border-radius: 14px; position: absolute; top: 7cqw; left: 50%; transform: translateX(-50%); z-index: 2;
}
.phone-screen {
  background: var(--fresh-canvas); border-radius: 12%/6%; padding: 19% 6% 6.5%; overflow: hidden;
}
.ps-kicker { font: 600 clamp(9px, 1.15cqw + 8px, 11px)/1 var(--fresh-font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fresh-text-faint); }
.ps-title { font: 700 clamp(19px, 8.4cqw, 26px)/1.1 var(--fresh-font-display); margin: 8px 0 12px; }
.ps-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--fresh-surface); border: 1px solid var(--fresh-border);
  border-radius: 14px; padding: 9px; margin-bottom: 9px;
}
.ps-img { width: clamp(38px, 16.7cqw, 52px); height: clamp(38px, 16.7cqw, 52px); border-radius: 10px; object-fit: cover; background: var(--fresh-surface-2); flex: 0 0 auto; }
.ps-meta { min-width: 0; flex: 1 1 auto; }
.ps-meta b {
  display: block; font: 600 clamp(11px, 4.2cqw, 13px)/1.25 var(--fresh-font-body);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* keep cards one line tall */
}
.ps-meta span { font: 400 clamp(10px, 3.9cqw, 12px)/1.3 var(--fresh-font-body); color: var(--fresh-text-dim); }
.ps-btn {
  background: var(--fresh-green-400); color: var(--fresh-on-green);
  font: 600 clamp(12px, 4.5cqw, 14px)/1 var(--fresh-font-body); text-align: center;
  border-radius: 999px; padding: 12px; margin-top: 12px;
}
.phone { container-type: inline-size; }

/* ---- small viewports: release the no-scroll rule instead of clipping content ---- */
@media (max-height: 620px), (max-width: 760px) {
  html, body { height: auto; overflow: auto; }
  body { min-height: 100svh; }
  .hero { padding-block: 24px 40px; }
}

/* mid range (761-920): keep the two-column hero but give the phone a larger share */
@media (min-width: 761px) and (max-width: 920px) {
  .hero { gap: 28px; }
  .phone { width: clamp(210px, 26vw, 260px); }
}

/* narrow: stack copy above phone. Everything shares one measure so the h1,
   lead, and phone hold a consistent column width instead of ragged right edges. */
@media (max-width: 760px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
  .hero h1 { font-size: clamp(32px, 9vw, 52px); }
  /* h1 at 9vw wraps at ~62vw; keep the lead inside the same measure */
  .lead { max-width: min(36ch, 62vw); }
  .hero-phone { justify-content: flex-start; }
  .phone { width: clamp(220px, 62vw, 340px); }
}

/* phones: the 62vw measure leaves too much dead space — let content fill the width */
@media (max-width: 600px) {
  .hero h1 { font-size: clamp(34px, 11.2vw, 58px); max-width: none; }
  .kicker { font-size: 14px; }
  .lead { max-width: none; font-size: 17px; }
  .appstore-badge span { font-size: 17px; }
  .phone { width: min(85vw, 400px); }
}