/* ---------- section heads ---------- */
.echo .section-head { max-width: 760px; margin-bottom: 3.5rem; }
.echo .section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.echo .section-head .eyebrow { margin-bottom: 1.1rem; display: inline-block; }
.echo .section-head h2 { margin-bottom: 1.1rem; }
.echo .section-head.center p { margin: 0 auto; max-width: 600px; }

/* ---------- BENTO ---------- */
.echo .symptoms { background: var(--q-cream); }
.echo .bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(180px, auto); gap: 1.2rem; }
.echo .bento-card { background: var(--t-white); border-radius: var(--q-rlg); padding: 2rem; border: 1px solid var(--q-border); transition: all 0.4s var(--q-ease); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.echo .bento-card:hover { transform: translateY(-2px); box-shadow: var(--q-shadow-lg); border-color: rgb(var(--t-gold-rgb) / 0.3); }
.echo .bento-card.dark { background: linear-gradient(160deg, var(--q-forest) 0%, var(--q-forest-deep) 100%); color: var(--q-cream); border: none; }
.echo .bento-card.dark p { color: rgb(var(--t-cream-rgb) / 0.72); }
.echo .bento-card.dark h3 { color: var(--q-cream); }
.echo .bento-card.accent { background: linear-gradient(135deg, var(--q-sand) 0%, var(--t-sand-deep) 100%); }
.echo .icon-wrap { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, rgb(var(--t-sage-rgb) / 0.15), rgb(var(--t-gold-rgb) / 0.15)); display: flex; align-items: center; justify-content: center; color: var(--q-forest); margin-bottom: 1.4rem; transition: transform 0.4s ease; }
.echo .bento-card:hover .icon-wrap { transform: none; }
.echo .bento-card.dark .icon-wrap { background: rgb(var(--t-cream-rgb) / 0.08); color: var(--q-gold); }
.echo .bento-card h3 { font-size: 1.5rem; margin-bottom: 0.7rem; }
.echo .bento-card p { font-size: 0.95rem; }
.echo .bento-1 { grid-column: span 3; grid-row: span 2; }
.echo .bento-2 { grid-column: span 3; }
.echo .bento-3 { grid-column: span 2; }
.echo .bento-4 { grid-column: span 2; }
.echo .bento-5 { grid-column: span 2; }
.echo .bento-6 { grid-column: span 3; }
.echo .bento-7 { grid-column: span 3; }

/* ---------- FRAMEWORK ---------- */
.echo .framework { background: linear-gradient(180deg, var(--q-cream) 0%, var(--q-sand) 100%); }
.echo .framework-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.echo .phase { background: rgb(var(--t-white-rgb) / 0.7); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgb(var(--t-white-rgb) / 0.8); border-radius: var(--q-rlg); padding: 2.5rem 2rem; transition: all 0.4s var(--q-ease); }
.echo .phase:hover { transform: translateY(-2px); background: rgb(var(--t-white-rgb) / 0.95); box-shadow: var(--q-shadow-lg); }
.echo .phase-num { font-family: var(--q-serif); font-size: 3.5rem; font-weight: 400; font-style: italic; color: var(--q-gold); line-height: 1; margin-bottom: 1.3rem; opacity: 0.85; }
.echo .phase h3 { margin-bottom: 0.9rem; }
.echo .phase p { margin-bottom: 1.3rem; }
.echo .phase-list { list-style: none; padding: 0; margin: 0; }
.echo .phase-list li { font-size: 0.88rem; color: var(--q-muted); padding: 0.5rem 0; display: flex; align-items: center; gap: 0.6rem; border-top: 1px solid var(--q-border); }
.echo .phase-list li:first-child { border-top: none; }
.echo .phase-list li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--q-gold); flex-shrink: 0; }

/* ---------- MEMBERSHIP / PERKS ---------- */
.echo .membership { background: var(--q-forest-deep); color: var(--q-cream); position: relative; overflow: hidden; }
.echo .membership::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 40% at 20% 30%, rgb(var(--t-gold-rgb) / 0.15), transparent 70%), radial-gradient(ellipse 40% 50% at 80% 70%, rgb(var(--t-sage-rgb) / 0.12), transparent 70%); }
.echo .membership .section-head h2 { color: var(--q-cream); }
.echo .membership .section-head p { color: rgb(var(--t-cream-rgb) / 0.7); }
.echo .membership .em-gold { color: var(--q-gold-soft); -webkit-text-fill-color: var(--q-gold-soft); background: none; }
.echo .membership-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; position: relative; }
.echo .perk { background: rgb(var(--t-cream-rgb) / 0.04); border: 1px solid rgb(var(--t-cream-rgb) / 0.08); border-radius: var(--q-rlg); padding: 2.2rem 2rem; transition: all 0.4s ease; position: relative; overflow: hidden; }
.echo .perk::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--q-gold), transparent); opacity: 0; transition: opacity 0.4s ease; }
.echo .perk:hover { background: rgb(var(--t-cream-rgb) / 0.07); border-color: rgb(var(--t-gold-rgb) / 0.3); transform: translateY(-2px); }
.echo .perk:hover::before { opacity: 1; }
.echo .perk-icon { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, rgb(var(--t-gold-rgb) / 0.2), rgb(var(--t-gold-rgb) / 0.05)); border: 1px solid rgb(var(--t-gold-rgb) / 0.2); display: flex; align-items: center; justify-content: center; color: var(--q-gold); margin-bottom: 1.6rem; transition: transform 0.4s ease; }
.echo .perk:hover .perk-icon { transform: none; }
.echo .perk h3, .echo .perk h4 { color: var(--q-cream); margin-bottom: 0.7rem; font-family: var(--q-serif); font-size: 1.35rem; }
.echo .perk p { color: rgb(var(--t-cream-rgb) / 0.65); font-size: 0.95rem; }

/* ---------- CREDIBILITY STRIP ---------- */
.echo .strip { padding: 3rem 0; border-top: 1px solid var(--q-border); border-bottom: 1px solid var(--q-border); background: var(--q-cream); }
.echo .strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; flex-wrap: wrap; }
.echo .strip-item { display: flex; align-items: center; gap: 1rem; }
.echo .strip-num { font-family: var(--q-serif); font-size: 2.4rem; font-weight: 500; color: var(--q-forest); line-height: 1; }
.echo .strip-label { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--q-muted); max-width: 150px; }

/* ---------- CTA ---------- */
.echo .q-cta { background: linear-gradient(160deg, var(--q-forest) 0%, var(--q-forest-deep) 100%); color: var(--q-cream); padding: clamp(5rem, 12vw, 10rem) 0; position: relative; overflow: hidden; }
.echo .q-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 80% 50%, rgb(var(--t-gold-rgb) / 0.18), transparent 70%), radial-gradient(ellipse 50% 40% at 10% 80%, rgb(var(--t-sage-rgb) / 0.15), transparent 70%); }
.echo .q-cta-inner { position: relative; text-align: center; max-width: 820px; margin: 0 auto; }
.echo .q-cta h2 { color: var(--q-cream); margin: 1rem 0 1.4rem; }
.echo .q-cta .em-gold { color: var(--q-gold-soft); -webkit-text-fill-color: var(--q-gold-soft); background: none; }
.echo .q-cta p { color: rgb(var(--t-cream-rgb) / 0.75); font-size: 1.12rem; margin: 0 auto 2.5rem; max-width: 560px; }
.echo .cta-note { margin-top: 1.4rem; font-size: 0.82rem; color: rgb(var(--t-cream-rgb) / 0.5); letter-spacing: 0.05em; }

/* ---------- WELCOME VIDEO ---------- */
.echo .q-video { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.echo .q-video .section-head { margin-bottom: 0; }
.echo .q-video-frame {
  position: relative;
  width: min(960px, 100%);
  margin: 1.75rem auto 0;
  /* Posters are 16:9. The files are 4096x2160, and Vimeo letterboxes that poster. */
  aspect-ratio: 16 / 9;
  border-radius: 28px;
  overflow: hidden;
  background: #194632;
  box-shadow: 0 24px 60px rgba(15, 17, 21, 0.15);
}
.echo .q-video-frame iframe {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(100% * 4096 / 2160 * 9 / 16);
  max-width: none;
  height: 100%;
  transform: translateX(-50%);
  border: 0;
}
.echo .q-video--lead {
  padding: clamp(1.5rem, 3vw, 2.25rem) 0 0;
}
.echo .q-video--lead .q-video-frame {
  margin-top: 0;
}
.echo .q-video--lead + .symptoms {
  padding-top: clamp(2.75rem, 5vw, 4.5rem);
}