/* ============================================================
   Evoogen — content layer stylesheet
   Scope: all public pages (index, support, privacy, terms).
   Every selector is prefixed `eg-` so this file can be linked
   into the self-styled legal pages without collisions.
   Palette tokens are FIXED by the design spec — do not edit.
   ============================================================ */

:root {
  /* Light world (acts 1–2, content layer, sections) */
  --bg-page:        #F4F6F0;
  --field-sky:      #EFF4E8;
  --field-hill-1:   #CBDCBE;
  --field-hill-2:   #A8C394;
  --surface:        #FFFFFF;
  --border:         #DEE5D6;
  --text:           #18231C;
  --text-body:      #3A4733;
  --text-muted:     #5F6A56;   /* warmed toward sage (was #5C6B5E) */
  --accent:         #2B5C43;
  --accent-hover:   #234C37;

  /* Dark world (acts 3–4) */
  --bg-inner:       #0B130E;
  --inner-link:     #2E4A38;
  --inner-node:     #4E7A5C;
  --text-on-dark:   #F1F5EE;
  --text-on-dark-2: #C7D4BB;   /* warm light sage (was cool grey-sage #AEC2B2) */

  /* Gold — Riseven mark + logo detail ONLY (≤2 gold elements outside 3D) */
  --gold:           #E2C25C;
  --gold-deep:      #A9862F;
  --glow:           rgba(226, 194, 92, 0.35);

  --ease-out:  cubic-bezier(0.32, 0.72, 0, 1);
  --ease-soft: cubic-bezier(0.25, 0.8, 0.25, 1);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
}

/* ---------- Base (index + support only; legal pages keep their own base) */

.eg-body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.eg-body * , .eg-body *::before, .eg-body *::after { box-sizing: border-box; }
.eg-body a { color: var(--accent); text-decoration: none; }
.eg-body :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.eg-skip {
  position: absolute;
  left: -9999px;
  top: 16px;
  z-index: 100;
  background: var(--surface);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 999px;
}
.eg-skip:focus-visible { left: 16px; }

.eg-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

/* ---------- Typography helpers */

/* editorial kicker — a hairline dash + tracked small caps, no chip */
.eg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
}
.eg-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--accent);
}
.eg-eyebrow--dark { color: var(--text-on-dark-2); }
.eg-eyebrow--dark::before { background: var(--inner-node); }

/* ---------- Scroll reveal (JS adds .is-in; reduced-motion shows instantly) */

.eg-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.eg-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .eg-reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

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

.eg-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  pointer-events: none;
  transition: transform 0.6s var(--ease-out);
}
.eg-header__bar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: min(1200px, calc(100% - 32px));
  margin-top: 16px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition:
    background-color 0.6s var(--ease-soft),
    border-color 0.6s var(--ease-soft),
    box-shadow 0.6s var(--ease-soft);
}
.eg-header.is-scrolled .eg-header__bar {
  background: rgba(244, 246, 240, 0.78);
  border-color: var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px -24px rgba(24, 35, 28, 0.25);
}
.eg-header.is-dark.is-scrolled .eg-header__bar {
  background: rgba(11, 19, 14, 0.72);
  border-color: rgba(241, 245, 238, 0.12);
  box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.6);
}

.eg-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text);
  text-transform: uppercase;
  transition: color 0.6s var(--ease-soft);
}
.eg-logo i {
  font-style: normal;
  color: var(--gold-deep);            /* gold element 1 of 2 */
  transition: color 0.6s var(--ease-soft);
}
.eg-header.is-dark .eg-logo { color: var(--text-on-dark); }
.eg-header.is-dark .eg-logo i { color: var(--gold); }

.eg-nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 36px); }
.eg-nav a {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-body);
  transition: color 0.45s var(--ease-soft), opacity 0.45s var(--ease-soft);
}
.eg-nav a:hover { color: var(--accent); }
.eg-header.is-dark .eg-nav a { color: var(--text-on-dark-2); }
.eg-header.is-dark .eg-nav a:hover { color: var(--text-on-dark); }

/* ---------- Hero (Act 1 — the ridge photo, scroll zoom toward the head) */

.eg-hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--field-sky);
}

/* media stack: sharp photo + blurred copy masked away from the person.
   --head-x/--head-y = the head's position in the frame; the zoom scales
   the whole stack around this exact point. */
.eg-hero--photo {
  --head-x: 50%;
  --head-y: 60%;
}
.eg-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transform-origin: var(--head-x) var(--head-y);
}
.eg-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* Mercury-style focus: surroundings dream away, the person stays sharp */
.eg-hero__photo--blur {
  filter: blur(14px);
  transform: scale(1.05);
  opacity: 0.75;
  -webkit-mask-image: radial-gradient(ellipse 46% 52% at var(--head-x) var(--head-y), transparent 32%, #000 82%);
          mask-image: radial-gradient(ellipse 46% 52% at var(--head-x) var(--head-y), transparent 32%, #000 82%);
}
.eg-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(244, 246, 240, 0.30), transparent 17%),
    linear-gradient(to top, rgba(11, 19, 14, 0.32), transparent 24%);
}

/* canvas layer — the scroll-scrubbed frame sequence (desktop only) */
.eg-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.eg-hero--canvas .eg-hero__canvas { display: block; }
.eg-hero--canvas .eg-hero__photo--blur { display: none; }

/* focus ring: the person and the area around him stay sharp, the frame
   edges dissolve into blur; the scrub fades it away as the camera closes in */
.eg-hero__focus {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  -webkit-backdrop-filter: blur(11px);
          backdrop-filter: blur(11px);
  -webkit-mask-image: radial-gradient(ellipse 38% 48% at var(--head-x) calc(var(--head-y) - 6%), transparent 36%, #000 82%);
          mask-image: radial-gradient(ellipse 38% 48% at var(--head-x) calc(var(--head-y) - 6%), transparent 36%, #000 82%);
}
.eg-hero--canvas .eg-hero__focus { display: block; }
.eg-hero--canvas .eg-hero__scrim {
  background: linear-gradient(to top, rgba(11, 19, 14, 0.28), transparent 22%);
}

/* story lines shown while the cinematic plays (vanilla CSS transitions) */
.eg-hero__story {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.eg-story__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 34%;
  margin: 0 auto;
  width: min(86vw, 24ch);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.2vw, 2.9rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.22;
  text-wrap: balance;
  color: #AEC2B2;            /* muted sage — same tone as the "we treat it that way" line */
  text-shadow:
    0 2px 26px rgba(11, 19, 14, 0.70),
    0 0 70px rgba(11, 19, 14, 0.45);
  /* hidden until the scrub timeline drives it (GSAP sets inline styles;
     no CSS transitions here — they would fight the scrubbed values) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(34px);
  filter: blur(10px);
}
.eg-story__line em {
  font-style: italic;
  color: #AEC2B2;   /* pinned: the cinematic word stays exactly as-is */
}
/* "We believe" appears centred on the golden flash — hidden at rest, the
   scrub blooms it in over the glow the instant the next frame arrives */
.eg-story__line[data-line="2"] { top: 40%; }

/* the three reflective lines bloom one-by-one in different places as the camera
   drifts toward the figure (upper-left, middle-right, lower-left), then clear
   as the frame transitions. Hidden at rest — GSAP drives their entrance. */
.eg-story__line--side {
  width: min(34ch, 36vw);
  font-size: clamp(1.2rem, 2.1vw, 1.9rem);
  text-shadow:
    0 2px 22px rgba(11, 19, 14, 0.85),
    0 0 60px rgba(11, 19, 14, 0.55);
}
.eg-story__line[data-line="3"] { top: 22%; left: 7%;  right: auto; text-align: left; margin: 0; }
.eg-story__line[data-line="4"] { top: 44%; right: 7%; left: auto;  text-align: right; margin: 0; }
.eg-story__line[data-line="5"] { top: 64%; left: 8%;  right: auto; text-align: left; margin: 0; }

/* ---- Recap: once the cinematic has played through, the video stops reversing
   and scrolling back reveals the home screen (person, frame 0) with the closing
   line. Composed as a cinematic "manifesto still": a unified scrim + one light
   type family keep the frame calm, legible, premium. GSAP keeps writing inline
   styles as the pinned range scrubs, so the resting state is forced !important. */
.eg-hero--recap .eg-hero__inner,
.eg-hero--recap .eg-story__line {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}
.eg-hero--recap .eg-scrollhint { opacity: 0 !important; }
/* on the recap still, hide the reflective side lines — only the headline and
   "We believe" remain, keeping the frozen frame calm and uncluttered */
.eg-hero--recap .eg-story__line--side { display: none !important; }

/* cinematic scrim: darkens the top (so the cream headline reads) and the bottom
   (for the closing line), vignettes the corners, and leaves the sunrise centre
   open — the photo stays the hero, the words sit calmly within it */
.eg-hero--recap .eg-hero__scrim {
  background:
    linear-gradient(to bottom, rgba(8,13,9,0.46), rgba(8,13,9,0.06) 24%, transparent 40%),
    linear-gradient(to top,    rgba(8,13,9,0.66), rgba(8,13,9,0.14) 30%, transparent 54%),
    radial-gradient(125% 95% at 50% 40%, transparent 44%, rgba(8,13,9,0.5) 100%);
}

/* headline joins the light family so the whole frame reads as one film still */
.eg-hero--recap .eg-hero__inner { padding-top: 13vh !important; }
.eg-hero--recap .eg-hero__inner h1 {
  color: #AEC2B2;
  text-shadow: 0 2px 30px rgba(8,13,9,0.55), 0 0 80px rgba(8,13,9,0.35);
}

/* reflective lines — crisp cream, muted-sage emphasis, calm editorial rhythm */
.eg-hero--recap .eg-story__line {
  color: #AEC2B2;
  line-height: 1.34;
  letter-spacing: -0.018em;
  text-shadow: 0 2px 24px rgba(8,13,9,0.72), 0 0 56px rgba(8,13,9,0.45);
}
/* closing line — small, right-aligned, tucked bottom-right, hairline above it */
.eg-hero--recap .eg-story__line[data-line="2"] {
  top: auto; bottom: 9%; left: auto; right: 6vw; margin: 0;
  width: min(32ch, 40vw);
  text-align: right;
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  line-height: 1.4;
  padding-top: 20px;
}
.eg-hero--recap .eg-story__line[data-line="2"]::before {
  content: "";
  position: absolute;
  top: 0; right: 0; left: auto; transform: none;
  width: 40px; height: 1px;
  background: rgba(241, 245, 238, 0.55);
}

@media (max-width: 1023px) {
  /* the cinematic and its captions are desktop-only; the copy lives in #about */
  .eg-hero__story { display: none; }

  /* On phones the scrub canvas never runs, so the static photo IS the hero.
     The dream-blur layer was tuned for a wide desktop frame; on a tall portrait
     crop it covers most of the viewport and reads as low-res. Pull it back to a
     gentle edge vignette and widen the in-focus window so the subject stays
     crisp — the sharpness the photo already carries now actually shows. */
  .eg-hero--photo .eg-hero__photo--blur {
    filter: blur(5px);
    transform: scale(1.02);
    opacity: 0.5;
    -webkit-mask-image: radial-gradient(ellipse 86% 74% at 50% 52%, transparent 56%, #000 94%);
            mask-image: radial-gradient(ellipse 86% 74% at 50% 52%, transparent 56%, #000 94%);
  }
}


.eg-hero--photo .eg-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24vh clamp(20px, 4vw, 48px) 0;   /* headline sits lower, nearer centre */
  margin-bottom: auto;
}
.eg-hero h1 {
  margin: 0;
  max-width: min(94vw, 1160px);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.6vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.04;
  text-wrap: balance;
  color: #DCE6D8;            /* brighter sage-cream — reads more clearly over the photo */
  text-shadow: 0 1px 2px rgba(8, 13, 9, 0.6), 0 2px 26px rgba(8, 13, 9, 0.74), 0 0 84px rgba(8, 13, 9, 0.52);
}
.eg-scrollhint {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.eg-hero--photo .eg-scrollhint { color: rgba(241, 245, 238, 0.9); }
.eg-scrollhint::after {
  content: "";
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, currentColor, transparent);
  animation: eg-drip 2.6s var(--ease-soft) infinite;
}
@keyframes eg-drip {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (prefers-reduced-motion: reduce) {
  .eg-scrollhint::after { animation: none; }
}

/* ---------- About (Act 2 — three statements) */

.eg-about {
  background: var(--bg-page);
  padding-block: clamp(110px, 16vh, 180px);
}
.eg-about__head { max-width: 940px; }
.eg-about__lead {
  margin: 26px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.14;
  text-wrap: balance;
}
.eg-about__lead em {
  font-style: italic;
  color: var(--accent);
}
.eg-about__intro {
  margin: 28px 0 0;
  max-width: 58ch;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.75;
  color: var(--text-body);
}
.eg-about__list {
  display: flex;
  flex-direction: column;
  gap: clamp(72px, 12vh, 130px);
  margin-top: clamp(72px, 11vh, 120px);
}

/* About — "what we believe" trio (replaces the numbered statements) */
.eg-beliefs {
  margin-top: clamp(64px, 9vh, 110px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
}
.eg-belief {
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.eg-belief h3 {
  margin: 0 0 14px;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text);
}
.eg-belief p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-body);
  max-width: 36ch;
}
@media (max-width: 767px) {
  .eg-beliefs { grid-template-columns: 1fr; gap: 0; margin-top: clamp(48px, 7vh, 72px); }
  .eg-belief { padding-block: 26px 0; }
  .eg-belief p { max-width: none; }
}
.eg-statement {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 28px;
  align-items: start;
  max-width: 980px;
}
.eg-statement:nth-child(2) { margin-left: auto; }   /* editorial stagger */
.eg-statement__n {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.eg-statement p {
  margin: 0;
  font-size: clamp(1.6rem, 3.4vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.22;
  text-wrap: balance;
}
.eg-statement em {
  font-style: normal;
  color: var(--text-muted);
}

/* ---------- Product (Act 3 — dark world) */

.eg-product {
  position: relative;
  background: var(--bg-inner);
  color: var(--text-on-dark);
  padding-block: clamp(100px, 14vh, 160px) 0;
  overflow: hidden;
}
/* light → dark threshold */
.eg-product::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 140px;
  background: linear-gradient(to bottom, var(--bg-page), transparent);
  opacity: 0.06;
  pointer-events: none;
}
.eg-product__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.eg-product__mark {
  width: 96px;
  height: 96px;
  margin-bottom: 34px;
  filter: drop-shadow(0 22px 46px rgba(201, 162, 74, 0.42));
}
.eg-product h1,
.eg-product h2 {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.8vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.08;
  max-width: 18ch;
  text-wrap: balance;
}
.eg-product__tagline {
  margin: 22px 0 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text-on-dark);
}
.eg-product__tagline em {
  font-style: italic;
  color: #8FD9C9;
}
.eg-product__lead {
  margin: 22px 0 0;
  max-width: 52ch;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.7;
  color: var(--text-on-dark-2);
}

/* ---------- Features (Act 4 — four cards on the network) */

.eg-features__kicker { margin-top: clamp(64px, 9vh, 110px); }
.eg-features {
  margin-top: clamp(26px, 4vh, 44px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
.eg-card { grid-column: span 4; }

/* bare editorial columns — a hairline rule instead of yet another card */
.eg-card {
  border-top: 1px solid rgba(241, 245, 238, 0.16);
  transition: border-color 0.5s var(--ease-soft);
}
.eg-card:hover { border-color: rgba(241, 245, 238, 0.32); }
.eg-card__core { padding: 24px 0 0; }
.eg-card__node {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-bottom: 18px;
}
.eg-card__node svg {
  width: 21px;
  height: 21px;
  color: #7FA98C;
}
.eg-card h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-on-dark);
}
.eg-card p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--text-on-dark-2);
}
.eg-card p em { font-style: normal; color: var(--text-on-dark); }

/* ---------- Three coaches, one memory (dark act — signature coach orbs)
   Same dark glass language as the feature cards; the three coach brand
   colours (gold / mint / lavender) are the app's own coach identities,
   used here as glowing orbs — meaning, not decoration. */

.eg-coaches { margin-top: clamp(76px, 10vh, 130px); }
.eg-coaches__head { max-width: 760px; }
.eg-coaches__title {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--text-on-dark);
}
.eg-coaches__lead {
  margin: 22px 0 0;
  max-width: 60ch;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.72;
  color: var(--text-on-dark-2);
}
.eg-coaches__lead em { font-style: normal; color: var(--text-on-dark); }

/* "Why it matters" — a quiet gold-ruled aside, the only warm accent on dark */
.eg-coaches__why {
  margin: clamp(34px, 5vh, 52px) 0 0;
  max-width: 62ch;
  padding: 4px 0 4px 26px;
  border-left: 2px solid var(--gold-deep);
  font-size: 1.04rem;
  line-height: 1.7;
  color: var(--text-on-dark-2);
}
.eg-coaches__why strong { color: var(--gold); font-weight: 600; }

.eg-coachgrid {
  margin-top: clamp(34px, 5vh, 56px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* single quiet surface, coach-tinted wash; the serif quote is the anchor */
.eg-coach {
  border-radius: 20px;
  background: linear-gradient(180deg, var(--coach-tint), rgba(241, 245, 238, 0.015) 62%);
  border: 1px solid rgba(241, 245, 238, 0.09);
  transition: border-color 0.5s var(--ease-soft), background-color 0.5s var(--ease-soft);
}
.eg-coach:hover { border-color: rgba(241, 245, 238, 0.18); }
.eg-coach__core {
  height: 100%;
  padding: clamp(28px, 3vw, 38px) clamp(26px, 2.6vw, 34px) clamp(30px, 3vw, 38px);
  display: flex;
  flex-direction: column;
}
.eg-coach__orb {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  margin-bottom: 22px;
  background: radial-gradient(circle at 34% 30%, var(--orb-hi), var(--orb-lo));
  box-shadow:
    0 10px 24px -8px var(--orb-glow),
    inset 0 2px 5px rgba(255, 255, 255, 0.35),
    inset 0 -3px 7px rgba(11, 19, 14, 0.28);
}
.eg-coach--goals   { --orb-hi: #F0D283; --orb-lo: #C79B3D; --orb-glow: rgba(226, 194, 92, 0.55); --coach-tint: rgba(226, 194, 92, 0.06); }
.eg-coach--habit   { --orb-hi: #6FE7D9; --orb-lo: #1F9C93; --orb-glow: rgba(43, 182, 172, 0.50); --coach-tint: rgba(43, 182, 172, 0.055); }
.eg-coach--reflect { --orb-hi: #B49BFB; --orb-lo: #6E58C2; --orb-glow: rgba(123, 102, 201, 0.50); --coach-tint: rgba(123, 102, 201, 0.065); }
/* coach name as a quiet tracked label — the quote carries the weight */
.eg-coach h4 {
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-on-dark-2);
}
.eg-coach__quote {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 1.7vw, 1.55rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.eg-coach--goals   .eg-coach__quote { color: #EAD08A; }
.eg-coach--habit   .eg-coach__quote { color: #6FD9CC; }
.eg-coach--reflect .eg-coach__quote { color: #B9A4FB; }
.eg-coach p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--text-on-dark-2);
}

/* ---------- Mockups + CTA (Act 4 finale, dark dissolves to light) */

.eg-finale {
  position: relative;
  margin-top: clamp(84px, 11vh, 130px);
  padding-bottom: clamp(90px, 12vh, 140px);
  background: linear-gradient(to bottom, transparent 0%, var(--bg-page) 86%);
}
.eg-phones {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(18px, 3vw, 44px);
  padding-top: 30px;
}
.eg-phone {
  width: clamp(180px, 19vw, 240px);
  aspect-ratio: 9 / 19.2;
  border-radius: 38px;
  padding: 9px;
  background: #1C271F;
  border: 1px solid rgba(241, 245, 238, 0.12);
  box-shadow:
    0 60px 90px -50px rgba(11, 19, 14, 0.55),
    inset 0 1px 0 rgba(241, 245, 238, 0.1);
}
.eg-phone--l { transform: translateY(34px) rotate(-3deg); }
.eg-phone--r { transform: translateY(34px) rotate(3deg); }
.eg-phone__screen {
  position: relative;
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 44px 16px 16px;
}
.eg-phone__notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  height: 16px;
  border-radius: 999px;
  background: #1C271F;
}
/* abstract placeholder UI inside screens */
.eg-ui-ring {
  width: 78px;
  height: 78px;
  margin: 10px auto 2px;
  border-radius: 50%;
  border: 5px solid var(--border);
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  transform: rotate(-40deg);
}
.eg-ui-line {
  height: 9px;
  border-radius: 999px;
  background: var(--border);
}
.eg-ui-line--w60 { width: 60%; }
.eg-ui-line--w80 { width: 80%; }
.eg-ui-line--w45 { width: 45%; }
.eg-ui-bubble {
  align-self: flex-start;
  width: 74%;
  padding: 10px 12px;
  border-radius: 14px 14px 14px 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.eg-ui-bubble--me {
  align-self: flex-end;
  width: 58%;
  border-radius: 14px 14px 4px 14px;
  background: var(--accent);
  border-color: var(--accent);
}
.eg-ui-bubble--me .eg-ui-line { background: rgba(241, 245, 238, 0.45); }
.eg-ui-bars {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 86px;
  margin-top: auto;
  padding: 0 6px;
}
.eg-ui-bars i {
  flex: 1;
  border-radius: 6px 6px 0 0;
  background: var(--field-hill-1);
}
.eg-ui-bars i:nth-child(2) { height: 55%; background: var(--field-hill-2); }
.eg-ui-bars i:nth-child(1) { height: 35%; }
.eg-ui-bars i:nth-child(3) { height: 75%; background: var(--accent); }
.eg-ui-bars i:nth-child(4) { height: 50%; background: var(--field-hill-2); }
.eg-ui-bars i:nth-child(5) { height: 90%; background: var(--accent); }

.eg-coming {
  display: flex;
  justify-content: center;
  margin-top: clamp(64px, 9vh, 110px);
}
.eg-coming__pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--accent);
  color: #F1F5EE;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 24px 50px -22px rgba(43, 92, 67, 0.55);
}
.eg-coming__pill svg { display: block; }

/* ── App-screen mockups inside the phones ───────────────────────────────────
   Real Riseven UI language: a cool-white "aurora" canvas (#EEF0FA with soft
   gold + mint pastel blooms), milky glass cards, and the app's own gold / mint
   accents — deliberately NOT the site's green, because the app reads gold. */
.am {
  padding: 30px 11px 12px !important;
  gap: 7px !important;
  background:
    radial-gradient(60% 38% at 86% 6%, rgba(232, 199, 120, 0.34), transparent 70%),
    radial-gradient(55% 34% at 8% 56%, rgba(192, 134, 60, 0.15), transparent 70%),
    radial-gradient(62% 42% at 72% 99%, rgba(124, 215, 200, 0.30), transparent 70%),
    #EEF0FA !important;
  font-family: -apple-system, "SF Pro Display", system-ui, "Segoe UI", sans-serif;
  font-size: 9px;
  color: #15172A;
  overflow: hidden;
}
.am .am-card {
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 11px;
  box-shadow: 0 4px 12px rgba(21, 23, 40, 0.06);
  padding: 9px 10px;
}
.am-lbl {
  display: flex; align-items: center; gap: 5px;
  font-size: 7.3px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #5C6184; margin-bottom: 6px;
}
.am-lbl::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.am-lbl--gold { color: #B6892F; }
.am-lbl--mint { color: #1F9C93; }
.am-card p { margin: 0; font-size: 9.5px; line-height: 1.45; color: #15172A; }

/* Home */
.am-h1 { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: #15172A; }
.am-sub { font-size: 7.6px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #9398B8; margin: 2px 0 3px; }
.am-card--gold { box-shadow: 0 5px 16px rgba(199, 155, 61, 0.18); }
.am-goal { display: flex; align-items: center; gap: 7px; font-size: 9.5px; padding: 2px 0; color: #15172A; }
.am-goal i { width: 5px; height: 5px; border-radius: 50%; background: #C0863C; flex: none; }
.am-pl { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.am-pl__bar { width: 3px; height: 24px; border-radius: 2px; background: #C79B3D; flex: none; }
.am-pl__bar--r { background: #7B66C9; }
.am-pl span { display: flex; flex-direction: column; line-height: 1.2; }
.am-pl b { font-size: 9.5px; font-weight: 600; color: #15172A; }
.am-pl em { font-style: normal; font-size: 8px; color: #9398B8; margin-top: 1px; }

/* Momentum */
.am-top { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; color: #15172A; }
.am-hero { box-shadow: 0 5px 16px rgba(43, 182, 172, 0.18); }
.am-num { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: #15172A; }
.am-chg { font-size: 9px; font-weight: 700; color: #2BB6AC; margin-top: 3px; }
.am-seg {
  display: flex; gap: 2px; padding: 3px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 9px;
}
.am-seg span {
  flex: 1; text-align: center; font-size: 7.3px; font-weight: 600;
  color: #9398B8; padding: 4px 0; border-radius: 6px;
}
.am-seg .on { background: rgba(199, 155, 61, 0.16); color: #B6892F; font-weight: 700; }
.am-chart { padding: 8px 8px 6px; }
.am-chart svg { display: block; width: 100%; height: 44px; }
.am-row { display: flex; align-items: center; gap: 6px; font-size: 9px; padding: 2px 0; }
.am-i { width: 6px; height: 6px; border-radius: 2px; flex: none; }
.am-i--mint { background: #2BB6AC; }
.am-row span { flex: 1; color: #15172A; }
.am-row b { color: #2BB6AC; font-weight: 700; font-size: 8.5px; }

/* Coach chat */
.am-chead { display: flex; align-items: center; gap: 7px; padding: 1px 1px 4px; }
.am-av {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #E8C778, #C79B3D);
  box-shadow: 0 3px 10px rgba(199, 155, 61, 0.4);
}
.am-ci { display: flex; flex-direction: column; line-height: 1.3; }
.am-ci b { font-size: 10px; font-weight: 700; color: #15172A; }
.am-ci i { font-style: normal; font-size: 7.4px; color: #2BB6AC; font-weight: 600; }
.am-thread { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.am-msg { max-width: 86%; font-size: 9px; line-height: 1.4; padding: 7px 9px; border-radius: 12px; }
.am-msg--coach {
  align-self: flex-start; color: #15172A;
  background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.8);
  border-bottom-left-radius: 4px; box-shadow: 0 3px 10px rgba(21, 23, 40, 0.05);
}
.am-msg--me {
  align-self: flex-end; color: #FFFFFF;
  background: linear-gradient(180deg, #C79B3D, #B6892F);
  border-bottom-right-radius: 4px;
}
.am-bar {
  margin-top: auto; display: flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 999px; padding: 6px 7px 6px 12px;
}
.am-bar span { flex: 1; font-size: 8.4px; color: #9398B8; }
.am-send { width: 20px; height: 20px; border-radius: 50%; flex: none; background: #C79B3D; position: relative; }
.am-send::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 5px; height: 5px; transform: translate(-62%, -50%) rotate(45deg);
  border-top: 1.5px solid #fff; border-right: 1.5px solid #fff;
}

/* ── Home v2 — greeting + Goals / Habits / Reflect + bottom nav ───────────── */
.am--home { gap: 6px !important; padding-bottom: 8px !important; }
.am-date { font-size: 7px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #9398B8; }
.am-greet { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: #15172A; margin: -1px 0 2px; }

.am-mhead { display: flex; align-items: center; justify-content: space-between; }
.am-orb { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.am-orb svg { width: 14px; height: 14px; }
.am-orb--gold { background: radial-gradient(circle at 34% 30%, #E8C778, #C79B3D); box-shadow: 0 4px 10px rgba(199, 155, 61, 0.4); }
.am-orb--mint { width: 22px; height: 22px; background: radial-gradient(circle at 34% 30%, #6FE7D9, #1F9C93); box-shadow: 0 4px 10px rgba(43, 182, 172, 0.38); }
.am-orb--lav  { width: 22px; height: 22px; background: radial-gradient(circle at 34% 30%, #B49BFB, #6E58C2); box-shadow: 0 4px 10px rgba(123, 102, 201, 0.38); }
.am-orb--mint svg, .am-orb--lav svg { width: 12px; height: 12px; }
.am-chip { width: 19px; height: 19px; border-radius: 50%; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.85); display: grid; place-items: center; flex: none; box-shadow: 0 2px 6px rgba(21, 23, 40, 0.06); }
.am-chip svg { width: 11px; height: 11px; }

.am-gcard { background: linear-gradient(180deg, rgba(232, 199, 120, 0.22), rgba(255, 255, 255, 0.74)); border-color: rgba(232, 199, 120, 0.5); box-shadow: 0 6px 18px rgba(199, 155, 61, 0.16); }
.am-gtitle { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: #15172A; margin: 9px 0 1px; }
.am-gsub { font-size: 8px; color: #6B7088; margin-bottom: 9px; }
.am-prog { display: flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 600; color: #15172A; }
.am-flag { width: 7px; height: 9px; flex: none; background: #C79B3D; clip-path: polygon(0 0, 100% 28%, 0 56%, 0 100%); }
.am-prog__name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-prog__pct { color: #B6892F; font-weight: 700; }
.am-bar2 { height: 5px; border-radius: 999px; background: rgba(199, 155, 61, 0.18); margin: 6px 0 9px; overflow: hidden; }
.am-bar2 i { display: block; height: 100%; width: 40%; border-radius: 999px; background: linear-gradient(90deg, #E8C778, #C79B3D); }
.am-gbtn { text-align: center; font-size: 9px; font-weight: 700; color: #15172A; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 9px; padding: 6px 0; box-shadow: 0 2px 8px rgba(21, 23, 40, 0.05); }

.am-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.am-mini { padding: 9px 9px 10px; }
.am-mini--mint { background: linear-gradient(180deg, rgba(124, 215, 200, 0.24), rgba(255, 255, 255, 0.72)); border-color: rgba(43, 182, 172, 0.32); }
.am-mini--lav  { background: linear-gradient(180deg, rgba(167, 139, 250, 0.22), rgba(255, 255, 255, 0.72)); border-color: rgba(123, 102, 201, 0.30); }
.am-mtitle { font-family: var(--font-display); font-size: 12px; font-weight: 600; color: #15172A; margin: 7px 0 1px; }
.am-msub { font-size: 7px; color: #6B7088; margin-bottom: 7px; line-height: 1.3; }
.am-hrow { display: flex; align-items: center; gap: 5px; font-size: 8.5px; color: #15172A; padding: 2px 0; }
.am-check { width: 10px; height: 10px; border-radius: 50%; border: 1.4px solid #B7BCD0; flex: none; }
.am-check--on { border-color: #1F9C93; background: #1F9C93; position: relative; }
.am-check--on::after { content: ""; position: absolute; left: 2.7px; top: 1.3px; width: 2.6px; height: 4.6px; border-right: 1.4px solid #fff; border-bottom: 1.4px solid #fff; transform: rotate(40deg); }
.am-ins { font-size: 7.6px; line-height: 1.4; color: #3A3F58; }
.am-ins b { color: #15172A; font-weight: 700; }

.am-nav { margin-top: auto; display: flex; justify-content: space-around; align-items: center; padding: 6px 6px; background: rgba(255, 255, 255, 0.74); border: 1px solid rgba(255, 255, 255, 0.82); border-radius: 13px; box-shadow: 0 4px 12px rgba(21, 23, 40, 0.06); }
.am-nav__i { width: 22px; height: 18px; display: grid; place-items: center; }
.am-nav__i svg { width: 15px; height: 15px; }
.am-nav__i--on { background: rgba(199, 155, 61, 0.16); border-radius: 8px; }

/* ── Momentum v2 — achievement markers + drivers heading ─────────────────── */
.am-chart { position: relative; }
.am-mk { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #E8C778; border: 1.4px solid #fff; box-shadow: 0 0 0 2px rgba(232, 199, 120, 0.38); }
.am-mk--1 { left: 25%; top: 60%; }
.am-mk--2 { left: 64%; top: 31%; }
.am-mtitle2 { font-size: 8px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #5C6184; margin-bottom: 6px; }
.am-i--gold { background: #C79B3D; }
.am-b--gold { color: #B6892F !important; }

/* ── Chat v2 — mountain hero + goal-breakdown steps ──────────────────────── */
.am-hero2 { align-self: stretch; height: 44px; border-radius: 11px; margin-bottom: 5px; overflow: hidden; background: linear-gradient(135deg, #C79B3D, #9A7320); box-shadow: 0 4px 12px rgba(154, 115, 32, 0.3); }
.am-hero2 svg { width: 100%; height: 100%; display: block; }
.am-msg--coach b { font-weight: 700; }
.am-steps { display: flex; flex-direction: column; gap: 4px; align-self: stretch; }
.am-step { display: flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 9px; padding: 5px 7px; font-size: 8px; line-height: 1.25; color: #15172A; box-shadow: 0 2px 8px rgba(21, 23, 40, 0.04); }
.am-step i { width: 13px; height: 13px; border-radius: 50%; flex: none; display: grid; place-items: center; font-style: normal; font-size: 7px; font-weight: 700; color: #fff; background: linear-gradient(180deg, #C79B3D, #B6892F); }

/* ---------- Principles */

.eg-principles {
  background: var(--bg-page);
  padding-block: clamp(110px, 15vh, 180px);
}
.eg-principles__grid {
  margin-top: clamp(52px, 7vh, 80px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.eg-principle {
  padding: 7px;
  border-radius: 26px;
  background: rgba(24, 35, 28, 0.025);
  border: 1px solid var(--border);
}
.eg-principle__core {
  height: 100%;
  padding: clamp(26px, 3vw, 36px);
  border-radius: 19px;
  background: var(--surface);
  box-shadow: 0 30px 60px -42px rgba(24, 35, 28, 0.28);
}
.eg-principle h3 {
  margin: 0 0 12px;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.eg-principle p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.68;
  color: var(--text-body);
}
.eg-section-head h2 {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

/* ---------- Support strip */

.eg-support {
  padding-block: 0 clamp(110px, 15vh, 180px);
}
.eg-support__card {
  padding: 8px;
  border-radius: 32px;
  background: rgba(24, 35, 28, 0.025);
  border: 1px solid var(--border);
}
.eg-support__inner {
  position: relative;
  overflow: hidden;
  border-radius: 25px;
  background:
    radial-gradient(50% 60% at 50% -8%, rgba(78, 122, 92, 0.14), transparent 72%),
    radial-gradient(60% 70% at 12% 108%, rgba(226, 194, 92, 0.10), transparent 70%),
    radial-gradient(60% 70% at 92% 104%, rgba(43, 92, 67, 0.09), transparent 70%),
    var(--surface);
  padding: clamp(48px, 7vw, 84px) clamp(28px, 6vw, 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 40px 80px -56px rgba(24, 35, 28, 0.35);
}
.eg-support__orb {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 26px;
  background: radial-gradient(circle at 32% 28%, var(--accent), var(--accent-hover));
  box-shadow: 0 16px 34px -12px rgba(43, 92, 67, 0.55);
}
.eg-support__orb svg { width: 27px; height: 27px; }
.eg-support__inner h1,
.eg-support__inner h2 {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.eg-faqpage__h2 {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.1;
}
.eg-support__lead {
  margin: 18px auto 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.66;
  color: var(--text-body);
}
.eg-support__inner .eg-btn { margin-top: 32px; }
.eg-support__inner .eg-faqlink {
  display: inline-block;
  margin-top: 22px;
  font-size: 0.95rem;
  font-weight: 600;
}
.eg-support__inner .eg-faqlink:hover { color: var(--accent-hover); }
.eg-btn--lg {
  padding: 13px 14px 13px 30px;
  font-size: 16px;
}
.eg-btn--lg .eg-btn__ico { width: 38px; height: 38px; }

/* primary button — accent only, button-in-button trailing icon */
.eg-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 26px;
  border-radius: 999px;
  background: var(--accent);
  color: #F1F5EE !important;
  font-size: 15px;
  font-weight: 600;
  transition: background-color 0.5s var(--ease-soft), transform 0.5s var(--ease-out);
}
.eg-btn:hover { background: var(--accent-hover); }
.eg-btn:active { transform: scale(0.98); }
.eg-btn__ico {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(241, 245, 238, 0.14);
  display: grid;
  place-items: center;
  transition: transform 0.5s var(--ease-out);
}
.eg-btn:hover .eg-btn__ico { transform: translate(2px, -1px) scale(1.05); }

/* ---------- Footer (shared with legal pages) */

.eg-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-page);
  padding-block: 56px 48px;
  font-family: var(--font);
}
.eg-footer__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}
.eg-footer__id {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--text-muted);
}
.eg-footer__id strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 10px;
}
.eg-footer__site {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text) !important;
  text-decoration: none;
  margin-bottom: 10px;
  transition: color 0.4s var(--ease-soft);
}
.eg-footer__site:hover { color: var(--accent) !important; }
.eg-footer__links {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}
.eg-footer__links a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-body);
  text-decoration: none;
  transition: color 0.4s var(--ease-soft);
}
.eg-footer__links a:hover { color: var(--accent); }
.eg-footer__copy {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-muted);
}

/* ---------- Legal/support page chrome (pages with own content styles) */

.eg-subpage-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 26px clamp(20px, 4vw, 48px) 0;
  font-family: var(--font);
}
.eg-subpage-top .eg-logo { text-decoration: none; }
.eg-subpage-top .eg-nav a { text-decoration: none; }

/* ---------- Support page (FAQ) */

.eg-faqpage {
  padding-top: clamp(90px, 12vh, 140px);
  padding-bottom: clamp(100px, 14vh, 160px);
}
.eg-faqpage h1 {
  margin: 24px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 5.2vw, 3.8rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.06;
}
.eg-faqpage__sub {
  margin: 22px 0 0;
  max-width: 50ch;
  font-size: 1.05rem;
  color: var(--text-body);
}
.eg-faq {
  margin-top: clamp(48px, 7vh, 72px);
  max-width: 820px;
}
.eg-faq details {
  border-top: 1px solid var(--border);
}
.eg-faq details:last-child { border-bottom: 1px solid var(--border); }
.eg-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 4px;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.eg-faq summary::-webkit-details-marker { display: none; }
.eg-faq summary::after {
  content: "+";
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-weight: 400;
  color: var(--text-muted);
  transition: transform 0.45s var(--ease-out), background-color 0.45s var(--ease-soft);
}
.eg-faq details[open] summary::after {
  transform: rotate(45deg);
  background: var(--surface);
}
.eg-faq .eg-faq__a {
  padding: 0 4px 26px;
  max-width: 64ch;
  color: var(--text-body);
  font-size: 0.99rem;
  line-height: 1.7;
}
.eg-faq .eg-faq__a p { margin: 0 0 12px; }
.eg-faq .eg-faq__a p:last-child { margin-bottom: 0; }

/* ============================================================
   Responsive — 1200 is the natural max; 768 and 390 below
   ============================================================ */

@media (max-width: 1023px) {
  .eg-card { grid-column: span 12; }
  .eg-coachgrid { grid-template-columns: 1fr; }
  .eg-principles__grid { grid-template-columns: 1fr; }
  .eg-statement:nth-child(2) { margin-left: 0; }
  .eg-phone--c { display: block; }
}

@media (max-width: 767px) {
  .eg-body { font-size: 16px; }
  .eg-nav { gap: 16px; }
  .eg-nav a { font-size: 12.5px; }
  .eg-statement { grid-template-columns: 1fr; gap: 14px; }
  .eg-statement__n { padding-top: 10px; width: 88px; }
  /* Show all three app screens on mobile too. The mockup internals are sized in
     fixed px, so the whole trio is shrunk as a unit with `zoom` (scales content
     AND layout box together) to fit a narrow screen — three screens at a glance,
     just like desktop. */
  .eg-phones { gap: 10px; zoom: 0.54; justify-content: center; }
  .eg-phone--l, .eg-phone--r { display: block; transform: none; }
  .eg-phone--l, .eg-phone--c, .eg-phone--r { flex: 0 0 auto; }
  .eg-phone { width: 188px; }
  .eg-support__core { justify-content: center; text-align: center; }
  .eg-support__core h2 { max-width: none; }
  .eg-footer__row { flex-direction: column; }
}

@media (max-width: 480px) {
  .eg-header__bar { padding: 10px 16px; gap: 12px; }
  .eg-logo { font-size: 13px; letter-spacing: 0.2em; }
  .eg-nav { gap: 12px; }
  .eg-nav a { font-size: 11.5px; }
  .eg-hero__inner { padding-top: 110px; }
}

/* ── Our apps — chooser section (Riseven / Haxli) ─────────────────────────── */
.eg-apps {
  background: var(--bg-page);
  padding-block: clamp(90px, 12vh, 150px);
  border-top: 1px solid var(--border);
}
.eg-apps__title {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.12;
  text-wrap: balance;
}
.eg-apps__lead {
  margin: 20px 0 0;
  max-width: 54ch;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.7;
  color: var(--text-body);
}
.eg-appgrid {
  margin-top: clamp(44px, 6vh, 72px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 32px);
}
.eg-app {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3.2vw, 38px);
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 24px 50px -34px rgba(24, 35, 28, 0.35);
  transition: transform 0.5s var(--ease-out), border-color 0.5s var(--ease-soft), box-shadow 0.5s var(--ease-soft);
}
/* quiet per-app wash so the two cards aren't clones of each other */
.eg-appgrid .eg-app:first-child {
  background: linear-gradient(155deg, rgba(226, 194, 92, 0.10), var(--surface) 52%);
}
.eg-appgrid .eg-app:last-child {
  background: linear-gradient(155deg, rgba(122, 151, 204, 0.12), var(--surface) 52%);
}
.eg-app:hover {
  transform: translateY(-4px);
  border-color: #CBD6C0;
  box-shadow: 0 34px 62px -34px rgba(24, 35, 28, 0.42);
}
.eg-app__top { display: flex; align-items: center; gap: 16px; }
.eg-app__icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: block;
  flex-shrink: 0;
  box-shadow: 0 12px 26px -12px rgba(24, 35, 28, 0.4);
}
.eg-app__icon--haxli {
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #8AACDE, #5A7BBC);
  color: #fff;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}
.eg-app__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}
.eg-app__tag {
  margin: 3px 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.eg-app__desc {
  margin: 20px 0 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-body);
  flex: 1;
}
.eg-app__actions {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.eg-apps .eg-appbtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  transition: transform 0.3s var(--ease-out), background 0.3s var(--ease-soft), border-color 0.3s;
}
.eg-apps .eg-appbtn:active { transform: scale(0.97); }
.eg-apps .eg-appbtn--store {
  background: var(--accent);
  color: #F1F5EE;
  box-shadow: 0 18px 38px -20px rgba(43, 92, 67, 0.6);
}
.eg-apps .eg-appbtn--store:hover { background: var(--accent-hover); }
.eg-apps .eg-appbtn--store svg { display: block; }
.eg-apps .eg-appbtn--ghost {
  background: transparent;
  color: var(--accent);
  padding-inline: 8px;
  gap: 6px;
}
.eg-apps .eg-appbtn--ghost::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 1.6px solid currentColor;
  border-right: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease-out);
}
.eg-apps .eg-appbtn--ghost:hover { color: var(--accent-hover); }
.eg-apps .eg-appbtn--ghost:hover::after { transform: rotate(45deg) translate(2px, -2px); }
.eg-apps .eg-appbtn--soon {
  background: rgba(24, 35, 28, 0.06);
  color: var(--text-muted);
  cursor: default;
}
/* App Store pill is now a live <a> — keep its text light on the green fill */
.eg-body a.eg-coming__pill { color: #F1F5EE; }
.eg-body a.eg-coming__pill:hover { background: var(--accent-hover); }
@media (max-width: 767px) {
  .eg-appgrid { grid-template-columns: 1fr; }
}