/* Ezer landing page
 *
 * Every colour, radius, shadow, duration and easing below mirrors a token from the
 * Ezer design system (ezer-mobile/docs/design-system/tokens.md). Only the display type
 * sizes are web extensions of the mobile ramp — see docs/README.md § Design tokens.
 */

/* ── Fonts (self-hosted Manrope variable, OFL-1.1) ─────────────────────────── */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/manrope-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: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/manrope-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;
}

/* ── Tokens ────────────────────────────────────────────────────────────────── */
:root {
  /* colour — semantic, light mode */
  --bg-canvas: #ffffff;
  --bg-surface-raised: #faf7f2;   /* sand/50 */
  --bg-surface-sunken: #f2ece4;   /* sand/100 */
  --bg-accent-subtle: #fbf3e7;    /* gold/50 */
  --bg-brand: #1b3a2d;            /* green/700 */
  --bg-brand-hover: #1c2a1e;      /* green/800 */
  --bg-deep: #122017;             /* green/900 */
  --accent-subtle: #f6e7ce;       /* gold/100 */
  --accent-strong: #a87249;       /* gold/600 */
  --text-primary: #1c2a1e;
  --text-tertiary: #66605c;       /* warmgrey/500 — body copy on light (5.8:1) */
  --text-brand: #1b3a2d;
  --text-on-brand: #ffffff;
  --text-on-glass-body: #faf7f2;
  --text-on-image-muted: #e5c185; /* gold/300 */
  --border-hairline: #e4dbd0;
  --border-default: #d0c3b2;
  --border-hairline-accent: #c7a46773; /* gold/450 @ 45% */
  --border-accent-ring: #c7a467;
  --border-focus: #c68e63;
  --interactive-primary-bg: #e5c185;
  --interactive-primary-text-on-dark: #122017;
  --surface-on-image-fill: #ffffff0a;
  --icon-tint-on-brand: #e5c18524;

  /* radius */
  --radius-lg: 12px;
  --radius-pill: 100px;

  /* elevation — green-tinted (green/950) */
  --elevation-2: 0 6px 16px -2px #0b140e1a, 0 2px 6px -1px #0b140e0f;
  --elevation-3: 0 12px 32px -4px #0b140e29, 0 4px 12px -2px #0b140e1a;
  --elevation-device: 0 40px 80px -24px #0b140e59, 0 12px 32px -8px #0b140e33;

  /* motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-decelerate: cubic-bezier(0, 0, 0, 1);

  /* layout */
  --container: min(1200px, 100% - clamp(40px, 8vw, 160px));
  --section-pad: clamp(72px, 48.9px + 5.926vw, 120px);
  --nav-h: 72px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 26px;
  color: var(--text-primary);
  background: var(--bg-surface-raised);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 700; color: var(--text-primary); }

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

[id] { scroll-margin-top: calc(var(--nav-h) + 8px); }

.container { width: var(--container); margin-inline: auto; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 20;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--bg-brand);
  color: var(--text-on-brand);
  font-weight: 600;
  transition: top var(--duration-base) var(--easing-standard);
}
.skip-link:focus { top: 12px; }

.icon { flex-shrink: 0; }

/* ── Type ──────────────────────────────────────────────────────────────────── */
.display {
  font-size: clamp(40px, 28.44px + 2.963vw, 64px);
  line-height: 1.07;
  font-weight: 800;
  letter-spacing: -0.023em;
  text-wrap: balance;
}
.title {
  font-size: clamp(34px, 27.26px + 1.728vw, 48px);
  line-height: 1.17;
  font-weight: 800;
  letter-spacing: -0.021em;
  text-wrap: balance;
}
.statement {
  font-size: clamp(26px, 19.26px + 1.728vw, 40px);
  line-height: 1.32;
  font-weight: 700;
  letter-spacing: -0.018em;
  text-wrap: pretty;
}
.lede {
  max-width: 560px;
  font-size: clamp(17px, 15.56px + 0.37vw, 20px);
  line-height: 1.6;
  color: var(--text-tertiary);
  text-wrap: pretty;
}
/* DS Eyebrow: Manrope Bold 12/16, tracking 1 */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-brand);
}
.eyebrow .star { color: var(--border-accent-ring); }
.eyebrow--gold, .eyebrow--gold .star { color: var(--text-on-image-muted); }

/* ── Nav ───────────────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--duration-base) var(--easing-standard),
    border-color var(--duration-base) var(--easing-standard);
}
.nav.is-stuck {
  background: #faf7f2e0;
  border-bottom-color: var(--border-hairline);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__logo { display: flex; align-items: center; min-height: 44px; }
.nav__logo img { width: auto; height: 28px; }
.nav__links { display: flex; align-items: center; gap: 36px; }
.nav__link {
  display: none;
  padding: 12px 0;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  transition: color var(--duration-fast) var(--easing-standard);
}
.nav__link:hover { color: var(--accent-strong); }
.nav__cta {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  background: var(--bg-brand);
  color: var(--text-on-brand);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition:
    background-color var(--duration-fast) var(--easing-standard),
    transform var(--duration-fast) var(--easing-standard);
}
.nav__cta:hover { background: var(--bg-brand-hover); }
.nav__cta:active { transform: scale(0.98); }

@media (min-width: 900px) {
  :root { --nav-h: 88px; }
  .nav__logo img { height: 32px; }
  .nav__link { display: block; }
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hero {
  padding-top: var(--nav-h);
  background: var(--bg-surface-raised) url("assets/img/hero-backdrop.jpg") center top / cover no-repeat;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 48px;
  padding-block: 24px 56px;
}
.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 1.5vw + 14px, 28px);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-hairline-accent);
  background: #ffffffb8;
  color: var(--text-brand);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pill .star { color: var(--border-accent-ring); }

.hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: 8px;
}
.hero__rings {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(660px, 150%);
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.chip {
  position: absolute;
  /* overlaps only the phone's bezel, so it never hides screen content */
  right: calc(50% + 150px);
  bottom: 12%;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: 250px;
  padding: 14px 18px 14px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-hairline);
  background: var(--bg-canvas);
  box-shadow: var(--elevation-3);
}
.chip__text { display: flex; flex-direction: column; gap: 2px; }
.chip__text strong { font-size: 14px; line-height: 20px; }
.chip__text span { font-size: 12px; line-height: 16px; color: var(--text-tertiary); text-wrap: balance; }

@media (max-width: 959px) {
  /* single-column hero: the chip sits under the device instead of beside it */
  .hero__visual { flex-direction: column; gap: 20px; }
  .chip { position: relative; right: auto; bottom: auto; }
}

@media (min-width: 960px) {
  .hero { background-position: center 78%; }
  .hero__grid {
    grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
    column-gap: clamp(24px, 4vw, 60px);
    align-items: center;
    min-height: min(800px, calc(100vh - var(--nav-h)));
    padding-block: 40px 56px;
  }
}

/* ── Store badges (not links yet — nothing to link to until launch) ────────── */
.badges { display: flex; flex-wrap: wrap; gap: 12px 16px; padding-top: 8px; }
.badges--center { justify-content: center; }
.badge {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 64px;
  padding: 0 24px 0 20px;
  border-radius: var(--radius-lg);
  background: var(--bg-brand);
  color: var(--text-on-brand);
  box-shadow: var(--elevation-2);
}
.badge .icon { color: var(--text-on-image-muted); }
.badge__text { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.badge__small {
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--text-on-image-muted);
}
.badge__store { font-size: 19px; line-height: 24px; font-weight: 700; letter-spacing: -0.2px; }
/* on brand green the badge flips to the dark-mode primary pairing: gold/300 + green/900 */
.badge--gold { background: var(--interactive-primary-bg); color: var(--interactive-primary-text-on-dark); box-shadow: none; }
.badge--gold .icon, .badge--gold .badge__small { color: inherit; }
.badge--gold .badge__small { font-weight: 600; }
.badge--gold .badge__store { font-weight: 800; }

@media (max-width: 479px) {
  .badges { flex-direction: column; align-self: stretch; }
  .badge { justify-content: center; }
}

/* ── Phone frame ───────────────────────────────────────────────────────────── */
.phone {
  position: relative;
  flex-shrink: 0;
  width: var(--phone-w);
  padding: var(--phone-bezel);
  border-radius: var(--phone-r);
  background: var(--bg-deep);
  box-shadow: var(--elevation-device);
}
.phone__screen {
  aspect-ratio: 402 / 874; /* Figma screen frames are 402 × 874 */
  overflow: hidden;
  border-radius: calc(var(--phone-r) - var(--phone-bezel));
  background: var(--bg-surface-sunken) url("assets/img/logomark.svg") center / 22% auto no-repeat;
}
.phone__screen img { width: 100%; height: 100%; object-fit: cover; }
.phone--hero { --phone-w: min(340px, 78vw); --phone-bezel: 10px; --phone-r: 48px; }
.phone--step { --phone-w: 256px; --phone-bezel: 8px; --phone-r: 36px; box-shadow: var(--elevation-3); }

/* ── Sections ──────────────────────────────────────────────────────────────── */
.section { padding-block: var(--section-pad); }
.section--canvas { background: var(--bg-canvas); }
.section--sand { background: var(--bg-surface-raised); }
.section--brand { background: var(--bg-brand); color: var(--text-on-brand); }

.section__head { display: flex; flex-direction: column; gap: 20px; margin-bottom: clamp(40px, 4vw + 8px, 72px); }
.section__head > div { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 700px) {
  .section__head--center { align-items: center; text-align: center; }
}
.section__lede { font-size: clamp(16px, 0.25vw + 15px, 18px); line-height: 1.65; color: #faf7f2d1; }

@media (min-width: 900px) {
  .section__head--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    column-gap: 80px;
    align-items: end;
  }
}

/* What Ezer is */
.what { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
.what__body { display: flex; flex-direction: column; gap: clamp(40px, 3vw + 16px, 56px); }
.what__notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px 56px;
  padding-top: clamp(32px, 2vw + 16px, 40px);
  border-top: 1px solid var(--border-hairline);
}
.note { display: flex; flex-direction: column; gap: 12px; }
.note p { color: var(--text-tertiary); }

@media (min-width: 720px) {
  .what__notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .what { grid-template-columns: 280px minmax(0, 1fr); column-gap: 80px; }
  .what__eyebrow { height: 52px; } /* optically centres on the statement's first line */
}

/* What makes Ezer different */
.why { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.why__stack { display: flex; flex-direction: column; gap: 16px; }
.card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-hairline-accent);
  background: var(--surface-on-image-fill);
}
.card--feature { display: flex; flex-direction: column; gap: 20px; padding: clamp(28px, 2vw + 16px, 40px); padding-bottom: 128px; }
.card--row { display: flex; gap: clamp(16px, 1vw + 10px, 20px); padding: clamp(24px, 1vw + 18px, 28px) clamp(24px, 1.5vw + 16px, 32px); }
.card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--icon-tint-on-brand);
  color: var(--text-on-image-muted);
}
.card__icon .icon { width: 22px; height: 22px; }
.card__icon--lg { width: 56px; height: 56px; }
.card__icon--lg .icon { width: 26px; height: 26px; }
.card__title { margin-bottom: 6px; font-size: 20px; line-height: 28px; font-weight: 700; }
.card__title--lg {
  max-width: 440px;
  margin-bottom: 0;
  font-size: clamp(26px, 1vw + 22px, 32px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.card__body { position: relative; font-size: 15px; line-height: 24px; color: #faf7f2d1; }
.card--feature .card__body { max-width: 440px; font-size: 16px; line-height: 26px; }
.card__rings {
  position: absolute;
  right: -64px;
  bottom: -104px;
  width: 240px;
  max-width: none;
  opacity: 0.7;
  pointer-events: none;
}

@media (min-width: 900px) {
  .why { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .why__stack { gap: 24px; }
  .card--row { flex: 1; }
  .card--feature { min-height: 520px; padding-bottom: 40px; }
  .card__rings { right: -120px; bottom: -150px; width: 420px; }
}

/* How it works */
.steps-scroller { width: var(--container); margin-inline: auto; }
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 32px; }
.step { display: flex; flex-direction: column; align-items: center; text-align: center; }
.step .phone { margin-bottom: 32px; }
.step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-subtle);
  color: var(--text-brand);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
}
/* DS Heading/H2: Manrope Bold 22/28, tracking -0.25 */
.step__title { margin-bottom: 10px; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.25px; }
.step__body { max-width: 280px; font-size: 15px; line-height: 24px; color: var(--text-tertiary); }

@media (min-width: 1100px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  /* swipeable row with a peek of the next step */
  .steps-scroller {
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .steps-scroller::-webkit-scrollbar { display: none; }
  .steps { display: flex; gap: 16px; width: max-content; padding: 0 20px 36px; }
  .step { flex: 0 0 260px; align-items: flex-start; text-align: left; scroll-snap-align: start; }
  .step .phone { margin-bottom: 24px; }
}

/* For pastors */
.pastors {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: clamp(36px, 5vw + 16px, 100px);
  padding: clamp(32px, 4vw + 8px, 64px) clamp(24px, 4vw + 8px, 64px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-hairline-accent);
  background: var(--bg-accent-subtle);
}
.pastors > div { display: flex; flex-direction: column; gap: 16px; }
.pastors .eyebrow .icon { width: 18px; height: 18px; }
.pastors__title {
  font-size: clamp(28px, 1.2vw + 23px, 36px);
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.pastors__body { font-size: clamp(16px, 0.2vw + 15px, 17px); line-height: 1.65; color: var(--text-tertiary); }

@media (min-width: 900px) {
  .pastors { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 80px; align-items: center; }
}

/* ── Coming soon ───────────────────────────────────────────────────────────── */
.soon {
  position: relative;
  overflow: hidden;
  padding-block: clamp(80px, 6vw + 56px, 128px);
  background: var(--bg-brand);
  color: var(--text-on-brand);
  text-align: center;
}
.emblem { position: relative; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; }
.emblem__rings { position: absolute; inset: 0; width: 100%; height: 100%; }
.emblem__mark { position: relative; width: 36px; height: 36px; }
.soon__inner { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.soon__title {
  font-size: clamp(40px, 32.3px + 1.975vw, 56px);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -0.023em;
}
.soon__lede { max-width: 520px; font-size: clamp(16px, 0.25vw + 15px, 18px); line-height: 1.65; color: #faf7f2d1; }
.soon .badges { padding-top: 12px; }

/* ── Footer ────────────────────────────────────────────────────────────────── */
.footer { padding-block: 32px; background: var(--bg-deep); color: #faf7f2b8; font-size: 14px; line-height: 20px; }
.footer__inner { display: flex; flex-direction: column; gap: 12px; }
.footer__brand { display: flex; flex-direction: column; gap: 12px; }
.footer__legal { font-size: 13px; line-height: 18px; }

@media (min-width: 900px) {
  .footer { padding-block: 47px; }
  .footer__inner { flex-direction: row; align-items: center; justify-content: space-between; }
  .footer__brand { flex-direction: row; align-items: center; gap: 24px; }
}

/* ── Motion: calm and brief; reduce-motion gets a cross-fade only ──────────── */
.reveal-pending { opacity: 0; transform: translateY(16px); }
[data-reveal] {
  transition:
    opacity var(--duration-slow) var(--easing-decelerate),
    transform var(--duration-slow) var(--easing-decelerate);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-pending { transform: none; }
  .nav__cta:active { transform: none; }
}

/* ── 404 ───────────────────────────────────────────────────────────────────── */
.notfound { min-height: 100vh; display: flex; align-items: center; }
.notfound__link {
  display: inline-flex;
  align-items: center;
  height: 52px;
  margin-top: 12px;
  padding: 0 28px;
  border-radius: var(--radius-pill);
  background: var(--interactive-primary-bg);
  color: var(--interactive-primary-text-on-dark);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: transform var(--duration-fast) var(--easing-standard);
}
.notfound__link:active { transform: scale(0.98); }