/*
 * Kalozi landing page.
 *
 * A separate stylesheet from styles.css on purpose. styles.css is shared with /privacy,
 * /terms and /support — store-blocking pages whose worst failure mode is a legal document
 * that renders wrong. Landing-page styling has no business being able to break them.
 *
 * Two hard constraints come from the Content-Security-Policy in vercel.json, and both are
 * easy to violate by accident:
 *
 *   style-src 'self'   — NO inline <style> blocks and NO style="" attributes. They are
 *                        silently dropped by the browser.
 *   default-src 'none' — there is no font-src, so webfonts are blocked, data: URIs
 *                        included. A @font-face here would fall back silently. The system
 *                        stack is the only option, so the typography earns its character
 *                        from scale, weight and tracking instead.
 *
 * img-src is 'self', which is why every screenshot is served from /img on this origin.
 *
 * Colours mirror src/theme/tokens.js, duplicated rather than imported because this site
 * deploys independently of the mobile toolchain (see styles.css for the same note).
 *
 * Logical properties throughout (inline-start, padding-inline) rather than left/right.
 * The app ships Arabic with full RTL, and a marketing page that cannot be mirrored is a
 * page that has to be rebuilt the day someone wants an Arabic version.
 */

.landing {
  /* tokens.js accent.soft / accent.softDark — the tint the app uses behind lime chips.
     Reused here as the hero wash so the page is tinted with a real brand value rather
     than an invented pastel. */
  --wash: #edffc7;
  --shot-frame: rgba(11, 11, 15, 0.08);
  --shot-shadow: 0 2px 6px rgba(11, 11, 15, 0.05), 0 28px 60px -24px rgba(11, 11, 15, 0.3);
}

@media (prefers-color-scheme: dark) {
  .landing {
    --wash: #2a3315;
    --shot-frame: rgba(255, 255, 255, 0.12);
    --shot-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 28px 60px -24px rgba(0, 0, 0, 0.8);
  }
}

/* The landing page runs wider than the 46rem measure the legal pages are set to — long-form
   reading wants a narrow column, a landing page does not. Body padding is zeroed so sections
   can own their own inline padding. */
.landing {
  padding-inline: 0;
  padding-bottom: 0;
}

.wrap-wide {
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* --- Shared section furniture -------------------------------------------------------- */

.eyebrow {
  font-size: 0.75rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin: 0;
}

.section {
  padding-block: 4.5rem;
}

.section-head {
  max-width: 34rem;
  margin-bottom: 2.5rem;
}

.section-head h2 {
  font-size: clamp(1.625rem, 3.4vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0.5rem 0 0.625rem;
}

.section-head p {
  color: var(--text-secondary);
  margin: 0;
}

/* --- Header -------------------------------------------------------------------------- */

/* styles.css gives `header` a bottom border that reads as a divider above the hero.
   Drop it here and let the hero's own edge do the work. */
.landing > .wrap-wide > header {
  border-bottom: 0;
  margin-bottom: 0;
}

/* --- Screenshots --------------------------------------------------------------------- */

/*
 * These are real captures of the shipping app at 1206x2622, downscaled to the width they
 * are actually displayed at (plus a 2x variant), never upscaled.
 *
 * The app is light-themed, so every screenshot is near-white. Against a light page that
 * leaves them with no edge at all — hence the frame and the shadow, which is what makes
 * them read as a phone screen instead of a washed-out rectangle. The radius approximates
 * an iPhone's display corner; it is intentionally larger than the 24px card radius, which
 * is a card, not a device.
 */
.shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2rem;
  border: 1px solid var(--shot-frame);
  box-shadow: var(--shot-shadow);
}

.shot-wrap {
  max-width: 17.5rem;
  margin-inline: auto;
}

.shot-hero {
  border-radius: 2.25rem;
}

.shot-hero-wrap {
  max-width: 22rem;
  margin-inline: auto;
}

/* --- Hero ---------------------------------------------------------------------------- */

/*
 * The hero follows the app rather than contrasting with it: light ground, one lime note,
 * big type. An earlier revision made this card near-black, which looked striking on its own
 * and then disagreed with every screenshot the moment real captures existed. The product is
 * light; the site is light.
 */
.hero {
  background:
    radial-gradient(60% 70% at 15% 0%, var(--wash), transparent 70%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 3.5rem);
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  margin-top: 1.5rem;
}

@media (min-width: 56rem) {
  .hero {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.hero h1 {
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-wrap: balance;
  margin: 0.875rem 0 1rem;
}

.hero-lede {
  color: var(--text-secondary);
  font-size: 1.0625rem;
  margin: 0 0 1.75rem;
  max-width: 34rem;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
}

.hero-note {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin: 0;
}

/* --- Alternating screenshot rows ------------------------------------------------------ */

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 56rem) {
  .split {
    grid-template-columns: 0.9fr 1.1fr;
  }

  /* The shot leads on the first row and trails on the second, so the eye zig-zags down the
     page instead of running down a single column. `order` rather than a reordered DOM, so
     the reading order stays shot-then-copy for a screen reader in both cases. */
  .split-reverse .split-media {
    order: 2;
  }
}

.split-copy h2 {
  font-size: clamp(1.625rem, 3.4vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0.5rem 0 0.75rem;
}

.split-copy p {
  color: var(--text-secondary);
  margin: 0 0 1rem;
}

.split-copy p:last-child {
  margin-bottom: 0;
}

.split-copy strong {
  color: var(--text);
  font-weight: 600;
}

/* --- Steps --------------------------------------------------------------------------- */

/* Numbered because this genuinely is a sequence — the spec's "max 3 taps from app open to a
   logged meal" is the claim being illustrated, and the order is the point. */

.steps {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  counter-reset: step;
}

.step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  counter-increment: step;
}

.step::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--accent);
  /* Never white on lime — it fails contrast badly. See CLAUDE.md §1. */
  color: var(--ink);
  font-weight: 700;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.875rem;
}

.step h3 {
  margin: 0 0 0.25rem;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.step p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

/* --- Feature groups ------------------------------------------------------------------ */

.features {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.feature h3 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.feature ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.feature li {
  color: inherit;
  padding-inline-start: 1.125rem;
  position: relative;
}

.feature li + li {
  margin-top: 0.5rem;
}

.feature li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.6em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--accent);
}

/* --- Honesty block ------------------------------------------------------------------- */

/* Reuses .card from styles.css for the ground, and only adds the accent rail. The claim it
   carries — estimates, safety floors, not medical advice — is the one piece of copy on this
   page that is a commitment rather than a pitch, so it gets a visual weight of its own. */
.honest {
  border-inline-start: 3px solid var(--accent);
}

.honest p + p {
  margin-top: 0.875rem;
}

.honest p:last-child {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  margin-bottom: 0;
}

/* --- Closing call -------------------------------------------------------------------- */

.close {
  background:
    radial-gradient(70% 60% at 50% 100%, var(--wash), transparent 70%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.25rem);
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

@media (min-width: 56rem) {
  .close {
    grid-template-columns: 1.1fr 0.9fr;
    text-align: start;
  }
}

.close h2 {
  margin: 0 0 0.625rem;
  font-size: clamp(1.625rem, 3.4vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.close-copy > p {
  color: var(--text-secondary);
  margin: 0 0 1.75rem;
  max-width: 32rem;
}

.close-terms {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 1.5rem 0 0;
  max-width: 40rem;
}

/* The honest stand-in for the download button while the App Store URL does not exist yet.
   Colour is inherited deliberately: the same element appears in the hero and in the closing
   card, and `inherit` resolves correctly on both without a second class. */
.soon {
  font-weight: 600;
  color: inherit;
}

/* --- Footer -------------------------------------------------------------------------- */

.landing > .wrap-wide > footer {
  margin-top: 3rem;
}

/* --- Motion -------------------------------------------------------------------------- */

/* One restrained entrance on the hero screenshot. The app's own scan-beam was tried here and
   removed: swept over a real capture it reads as a rendering artefact rather than the
   product's signature moment. */
.shot-hero {
  animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.1s both;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shot-hero {
    animation: none;
  }
}