/* ==========================================================================
   EiyoHub marketing site
   Palette lifted from the app itself (app/nutrition.tsx, app/workout.tsx).
   ========================================================================== */

:root {
  /* Surfaces */
  --ground:        #08140e;
  --surface:       #101d16;
  --card:          #1b2a22;
  --line:          #2d3f35;
  --line-soft:     rgba(242, 201, 76, 0.14);

  /* Ink */
  --ink:           #f0fdf4;
  --ink-muted:     #c2dfce;
  --ink-dim:       #8ba393;
  --ink-faint:     #6b7f73;

  /* Accent */
  --gold:          #f2c94c;
  --gold-soft:     rgba(242, 201, 76, 0.12);
  --gold-line:     rgba(242, 201, 76, 0.32);

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* Rhythm: measure widened and gutter tightened so the hero headline
     can hold its three intended lines at a larger size. */
  --gutter: clamp(1.25rem, 3vw, 2rem);
  --measure: 1280px;

  --r-sm: 10px;
  --r-md: 16px;
  --r-xl: 34px;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-muted);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  color: var(--ink);
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

p { margin: 0; }

/* Kept for real interactive elements (links, buttons). The feature
   showcase rows are non-interactive and never take focus. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(4.5rem, 10vw, 8rem); }

/* ── Header ──────────────────────────────────────────────────────────────── */

/* No bottom border in any state: nothing should sit between the bar and the
   page behind it. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(8, 20, 14, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Header only: 10% off the left gutter, 5% off the bar height. */
.masthead .wrap { padding-left: calc(var(--gutter) * 0.9); }

.masthead__inner {
  display: flex;
  align-items: center;
  height: 82px;
}

/* Shared by the header and the footer, so both scale together.
   Wordmark up 10%; the mark stays at 39px. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.brand__mark {
  width: 39px;
  height: 39px;
  fill: var(--gold);
  flex: none;
}

/* ── Store badges ────────────────────────────────────────────────────────── */

.storerow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.storebtn {
  display: inline-flex;
  align-items: center;
  gap: 0.78rem;
  padding: 0.8rem 1.3rem;
  background: #000;
  border: none;
  border-radius: 11px;
  text-decoration: none;
  color: #fff;
}

.storebtn__mark { width: 31px; height: 31px; flex: none; }

.storebtn__txt {
  display: flex;
  flex-direction: column;
  line-height: 1.12;
  text-align: left;
}

.storebtn__sm { font-size: 0.8125rem; font-weight: 400; }

.storebtn__lg {
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 8vw, 5.5rem) clamp(3rem, 7vw, 5rem);
}

/* Bleeds the hero ground into the features surface so the two sections join
   on a gradient instead of a hard edge. Sits behind hero content (z-index 0
   against the grid's 1). */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(120px, 18vw, 230px);
  background: linear-gradient(180deg, transparent 0%, var(--surface) 100%);
  pointer-events: none;
  z-index: 0;
}

/* The hero runs wider than the rest of the page so the enlarged headline and
   phone frames both fit without forcing extra line breaks. */
.hero .wrap { max-width: 1560px; }

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

/* Reduced 15% from the previous 5.75rem cap. The vw step is the knob that
   governs whether "Track what you eat," holds line one at mid widths. */
/* The clamp MIN is what phones get: 5.4vw only exceeds it above ~593px, so a
   3rem floor left "Track what you eat," at 48px on every phone, needing 401px
   of a 335px viewport. Lowering the floor changes nothing above 593px. */
.hero__title {
  font-size: clamp(2rem, 5.4vw, 4.9rem);
  letter-spacing: -0.042em;
  line-height: 1.04;
  margin-top: 0;
}

.hero__title em { font-style: normal; color: var(--gold); }

/* Width tracks the headline's longest line ("Track what you eat,") so the
   paragraph ends flush with it rather than overshooting to its right. */
.hero__sub {
  margin-top: 1.6rem;
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  line-height: 1.55;
  max-width: 45rem;
  color: var(--ink-muted);
}

.hero__cta { margin-top: 2.25rem; }

/* ── Phone mockup ────────────────────────────────────────────────────────── */

.phones {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(0.4rem, 0.8vw, 0.6rem);
}

/* Hero frames: cap raised a further 15% (243px -> 279px). The vw step stays
   modest so the pair still fits the hero's right column at mid widths. */
.phone {
  position: relative;
  width: clamp(160px, 17vw, 279px);
  aspect-ratio: 9 / 19.5;
  background: linear-gradient(160deg, #263a2f, #16241c);
  border-radius: var(--r-xl);
  padding: 7px;
  box-shadow: 0 32px 70px -22px rgba(0, 0, 0, 0.85),
              0 0 0 1px rgba(242, 201, 76, 0.1);
  flex: none;
}

.phone--lift { transform: translateY(-26px); }

/* Larger frame used inside the feature showcase rows */
.phone--lg { width: clamp(210px, 25vw, 280px); }

.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--r-xl) - 7px);
  overflow: hidden;
  /* Card tone, not --surface: the features section now uses --surface, and a
     matching screen would dissolve into the page behind it. */
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone__screen img { width: 100%; height: 100%; object-fit: cover; }

.phone__notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 16px;
  background: #0b1611;
  border-radius: 100px;
  z-index: 2;
}

/* Placeholder shown until a real screenshot is dropped in */
.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  height: 100%;
  padding: 1.25rem;
  text-align: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(242, 201, 76, 0.08), transparent 62%),
    repeating-linear-gradient(45deg,
      rgba(255, 255, 255, 0.014) 0 10px,
      transparent 10px 20px);
}

.slot__mark { width: 34px; height: 34px; fill: var(--gold); opacity: 0.5; }

.slot__label {
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--ink-muted);
  letter-spacing: -0.01em;
}

.slot__hint { font-size: 0.6875rem; color: var(--ink-faint); line-height: 1.4; }

/* ── Feature showcase ────────────────────────────────────────────────────── */

/* Picks up where the hero gradient lands, so the seam is invisible.
   Top padding sits the heading just below the fold, so it arrives on the
   first scroll rather than being buried. */
#features {
  background: var(--surface);
  padding-top: clamp(3rem, 7vw, 6rem);
}

/* No max-width: the heading is meant to hold a single line at desktop widths.
   The vw step is tuned so it stays on one line down to ~900px before wrapping. */
.feathead { text-align: center; }

.feathead h2 {
  font-size: clamp(2.4rem, 5.4vw, 4.25rem);
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--gold);
}

.show {
  display: grid;
  gap: clamp(4rem, 9vw, 7rem);
  margin-top: clamp(3.125rem, 6.25vw, 5rem);
}

.show__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

/* Visually mirror alternate rows without disturbing DOM reading order.
   The template is swapped too, not just the column assignments: otherwise the
   phone lands in the 1fr column on flipped rows and the 0.8fr column on the
   rest, leaving the media ~25% wider on one side and the copy narrower. */
.show__row--flip             { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
.show__row--flip .show__copy  { grid-column: 2; grid-row: 1; }
.show__row--flip .show__media { grid-column: 1; grid-row: 1; }

.show__copy h3 {
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  letter-spacing: -0.032em;
  line-height: 1.06;
}

.show__copy p {
  margin-top: 1.1rem;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  color: var(--ink-dim);
  max-width: 36rem;
}

.show__media {
  position: relative;
  display: flex;
  justify-content: center;
}

/* Gold bloom behind each showcase frame */
.show__media::before {
  content: "";
  position: absolute;
  inset: -14% -10%;
  /* ellipse, not circle: the box is taller than wide, and a farthest-corner
     circle needs more horizontal radius than the box has, so its fade never
     completes at the left/right edges and leaves a hard vertical cut. */
  background: radial-gradient(ellipse,
              rgba(242, 201, 76, 0.13) 0%,
              rgba(242, 201, 76, 0.04) 42%,
              transparent 70%);
  pointer-events: none;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

/* Distinct panel in the app's card surface. No border and no top margin: the
   colour change alone separates it, with no extra line between the two. */
.foot {
  background: var(--card);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
}

/* Columns sit directly after the brand block rather than being pushed to
   the far edge, closing the dead space in the middle. */
.foot__grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2.5rem, 7vw, 6rem);
}

.foot__brand { max-width: 24rem; }

/* Footer store buttons revert to their pre-enlargement size so the pair fits
   on a single row. The hero buttons keep the larger treatment. */
.foot .storebtn {
  gap: 0.65rem;
  padding: 0.68rem 1.1rem;
  border-radius: 9px;
}

.foot .storebtn__mark { width: 26px; height: 26px; }
.foot .storebtn__sm   { font-size: 0.6875rem; }
.foot .storebtn__lg   { font-size: 1.125rem; }

.foot__tag { margin-top: 0.9rem; font-size: 1rem; color: var(--ink-muted); }

.foot__brand .storerow { margin-top: 1.5rem; }

/* The wordmark sits centred against the 39px logo mark, so it starts ~19.5px
   down while the column headings start at their block's top edge. This offset
   drops the headings onto the same line as "EiyoHub". */
.foot__cols {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 6vw, 4.5rem);
  padding-top: calc((39px - 0.75rem * 1.08) / 2);
}

.foot__col h4 {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 0.9rem;
}

.foot__col ul { list-style: none; margin: 0; padding: 0;
                display: flex; flex-direction: column; gap: 0.6rem; }

.foot__col a {
  font-size: 0.875rem;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 150ms ease;
}

.foot__col a:hover { color: var(--gold); }

.foot__base {
  margin-top: 1.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { max-width: 36rem; }
  .phones { margin-top: 1rem; }
  .phone--lift { transform: none; }

  /* Both templates reset explicitly: .show__row--flip also sets one, and
     relying on source order alone to beat it would break on a reorder. */
  .show__row,
  .show__row--flip { grid-template-columns: 1fr; gap: 2.5rem; }
  .show__row--flip .show__copy,
  .show__row--flip .show__media { grid-column: 1; grid-row: auto; }
  .show__media { order: 2; }
}

@media (max-width: 560px) {
  /* ── Header ──────────────────────────────────────────────────────────── */
  .masthead__inner { height: 72px; }
  .brand           { font-size: 1.32rem; }
  .brand__mark     { width: 33px; height: 33px; }

  /* ── Vertical rhythm ─────────────────────────────────────────────────────
     The desktop clamps bottom out far too generous for a phone, leaving long
     empty runs between sections. */
  .hero      { padding-block: 2rem 2.5rem; }
  .section   { padding-block: 3rem; }
  #features  { padding-top: 2.5rem; }
  .show      { gap: 1.25rem; margin-top: 2rem; }

  /* ── Hero: left-aligned, large ───────────────────────────────────────────
     The desktop <br>s force "Track what you eat," onto one line, which caps
     the type at ~40px on a 375px screen. Dropping them lets the headline wrap
     naturally, so it can run at 3.5rem — big enough that the phone frames sit
     below the fold and have to be scrolled to. */
  .hero__copy    { text-align: left; }
  /* Scales with the viewport: a fixed size left the frames above the fold on
     taller phones, which get proportionally more vertical room. */
  .hero__title   { font-size: clamp(3.5rem, 16vw, 5.5rem); line-height: 1.02; }
  .hero__title br { display: none; }
  .hero__sub     { margin-top: 1.25rem; }
  .hero__cta     { margin-top: 1.9rem; display: flex; justify-content: flex-start; }
  .phones        { margin-top: 4.5rem; }

  /* Feature cards stay centred; only the hero is left-aligned. */
  .show__copy   { text-align: center; }
  .show__copy p { margin-inline: auto; }

  /* ── Type scale ──────────────────────────────────────────────────────── */
  .feathead h2   { font-size: 2.3125rem; letter-spacing: -0.032em; }
  .show__copy h3 { font-size: 1.5rem; }

  /* ── Store buttons ───────────────────────────────────────────────────────
     Stacked and left-aligned at a capped width rather than stretched edge to
     edge, so they read as badges instead of form controls. */
  .storerow {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .storebtn {
    flex: 0 0 auto;
    width: 100%;
    max-width: 15rem;
    padding: 0.7rem 1.1rem;
    justify-content: flex-start;
  }

  .storebtn__lg   { font-size: 1.1875rem; }
  .storebtn__mark { width: 27px; height: 27px; }

  /* Footer pair runs smaller than the hero's, and stays left. */
  .foot .storebtn      { max-width: 12.5rem; padding: 0.58rem 0.95rem; }
  .foot .storebtn__mark{ width: 23px; height: 23px; }
  .foot .storebtn__sm  { font-size: 0.625rem; }
  .foot .storebtn__lg  { font-size: 1rem; }

  /* ── Hero frames ─────────────────────────────────────────────────────────
     Two sit side by side, so each takes a little under half the viewport once
     gutters and the inter-phone gap are removed. 46vw overflowed at every
     phone size. */
  .phone { width: min(150px, 40vw); }

  /* ── Feature cards ───────────────────────────────────────────────────────
     Five identical text-then-floating-phone blocks read as one long scroll
     with no structure. Each feature becomes a contained card with the frame
     cropped at its lower edge, giving the eye a clear unit per feature and
     stopping the phones from drifting between sections. */
  .show__row,
  .show__row--flip {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 2.25rem 1.25rem 0;
    overflow: hidden;
    gap: 1.5rem;
  }

  /* Bleeds the frame past the card's lower edge, where overflow crops it. */
  .show__media { margin-bottom: -18%; }

  /* The card provides the containment the bloom used to; keeping both makes
     the card corners look smudged. */
  .show__media::before { display: none; }

  .phone--lg {
    width: min(250px, 66vw);
    box-shadow: 0 -12px 40px -18px rgba(0, 0, 0, 0.9);
  }

  /* ── Footer ──────────────────────────────────────────────────────────────
     Legal and Contact stack into one column rather than sitting side by side,
     which left both cramped at phone width. */
  .foot__grid { flex-direction: column; gap: 2.5rem; }
  .foot__cols {
    padding-top: 0;          /* stacked: no wordmark row to align against */
    flex-direction: column;
    gap: 1.75rem;
  }
}

/* ── Legal pages (terms, privacy) ─────────────────────────────────────────────
   The source markup uses <strong> two ways: as section headings at top level,
   and inline inside <li> (e.g. "Supabase"). Only direct children are styled as
   headings so inline emphasis is left alone. Content is otherwise untouched. */

.legal {
  max-width: 46rem;
  margin-inline: auto;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem);
  color: var(--ink-muted);
  font-size: 1rem;
  line-height: 1.75;
}

/* Section headings */
.legal > strong {
  display: block;
  color: var(--ink);
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.25;
  margin-top: 2.75rem;
  margin-bottom: 0.85rem;
  scroll-margin-top: 6rem;
}

/* Page title: the first top-level strong */
.legal > strong:first-child {
  margin-top: 0;
  font-size: clamp(2rem, 5vw, 2.75rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.legal p { margin-bottom: 1.1rem; }

.legal ul {
  margin: 0 0 1.4rem;
  padding-left: 1.35rem;
  list-style: none;
}

.legal li {
  position: relative;
  margin-bottom: 0.6rem;
}

.legal li::before {
  content: "";
  position: absolute;
  left: -1.1rem;
  top: 0.68em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.65;
}

/* Inline emphasis inside list items stays inline, just brighter */
.legal li strong { color: var(--ink); font-weight: 650; }

.legal a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.legal a:hover { color: #f7d76b; }

/* The source separates sections with <br>; spacing now comes from heading
   margins, so the breaks would double it up. */
.legal br { display: none; }

@media (max-width: 560px) {
  .legal { font-size: 0.96875rem; }
  .legal > strong { font-size: 1.1875rem; margin-top: 2.25rem; }
}