/* ============================================================================
   inner guru — components (page composition; tokens only)
   UI strictly neutral. Colour enters ONLY through photography (warm portraits)
   and precious-stone (agate) textures, per "colour is brought through imagery".
   ============================================================================ */

/* --- Header ---------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface-page) 86%, transparent);
  backdrop-filter: saturate(120%) blur(10px);
  border-bottom: var(--border-hairline) solid var(--border-subtle);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-lg); padding-block: var(--space-md);
}
.site-nav { display: flex; align-items: center; gap: var(--space-xl); }
.site-nav a:not(.btn) {
  font-family: var(--font-mono); font-size: var(--type-small);
  text-decoration: none; color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}
.site-nav a:not(.btn):hover { color: var(--text-primary); }
.nav-toggle { display: none; }

@media (max-width: 52rem) {
  .nav-toggle {
    display: inline-flex; background: transparent; border: 0; cursor: pointer;
    font-family: var(--font-mono); font-size: var(--type-label); text-transform: uppercase;
    letter-spacing: var(--tracking-caps); color: var(--text-primary); padding: var(--space-xs);
  }
  .site-nav {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; align-items: stretch; gap: var(--space-md);
    background: var(--surface-raised);
    border-bottom: var(--border-hairline) solid var(--border-subtle);
    padding: var(--space-lg) var(--gutter);
    box-shadow: var(--shadow-soft);
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav .btn { width: 100%; }
}

/* --- Reusable media: warm portrait inside a precious-stone (agate) frame ---- */
/* Echoes the deck's poster + innerguru.com hero treatment: an agate texture as
   the frame, the portrait inset. This is where the page's colour comes from. */
.stone-frame {
  position: relative;
  padding: clamp(0.85rem, 2.6vw, 2rem);
  border-radius: var(--radius-lg);
  background-size: cover; background-position: center;
  box-shadow: var(--shadow-soft);
}
.stone-frame--blue  { background-image: url("../assets/img/stone-hero.jpg"); }
.stone-frame--blush { background-image: url("../assets/img/stone-experience.jpg"); }
.stone-frame--gold  { background-image: url("../assets/img/stone-divider.jpg"); }
.stone-frame--light { background-image: url("../assets/img/stone-light.jpg"); }
.stone-frame__photo {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius-md); display: block;
}
.stone-frame__mark {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--color-white); text-align: center; line-height: 0.92;
  font-size: clamp(1.1rem, 1.4vw + 0.6rem, 1.7rem);
  text-shadow: 0 2px 20px rgba(36, 30, 29, 0.5);
  pointer-events: none;
}
.portrait {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius-lg); display: block;
}

/* --- Hero ------------------------------------------------------------------ */
.hero { overflow: hidden; }
.hero__inner {
  display: grid; gap: var(--space-2xl); align-items: center;
  padding-block: clamp(var(--space-lg), 4vh, var(--space-2xl)) var(--space-2xl);
}
@media (min-width: 60rem) {
  .hero__inner { grid-template-columns: 1.02fr 0.98fr; gap: clamp(var(--space-2xl), 5vw, var(--space-4xl)); }
}
.hero__text { display: grid; gap: var(--space-md); align-content: center; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-xs); }
.hero__note { font-family: var(--font-mono); font-size: var(--type-small); color: var(--text-faint); }
.hero__media { width: min(100%, 27rem); margin-inline: auto; }

/* --- Feature split (text + portrait) --------------------------------------- */
.feature { display: grid; gap: var(--space-2xl); align-items: center; }
@media (min-width: 56rem) {
  .feature { grid-template-columns: 1fr 1fr; gap: clamp(var(--space-2xl), 5vw, var(--space-4xl)); }
  .feature--media-first .feature__media { order: -1; }
}
.feature__media { width: min(100%, 28rem); }
.feature__body { display: grid; gap: var(--space-lg); }

/* --- Stone divider band (full-bleed agate strip) --------------------------- */
.stone-band { height: clamp(130px, 18vw, 240px); background: url("../assets/img/stone-divider.jpg") center / cover no-repeat; }

/* --- Benefit band (the opening promise) ------------------------------------ */
.benefit-band { position: relative; overflow: hidden; }
.benefit-band__wash {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../assets/img/stone-light.jpg") center / cover no-repeat;
  opacity: 0.22;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.benefit-band > .container { position: relative; z-index: 1; }
.benefit-band__lead { max-width: 22ch; margin-bottom: var(--space-2xl); }
.benefits { display: grid; gap: var(--space-xl); }
@media (min-width: 40rem) { .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); } }
@media (min-width: 64rem) { .benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.benefit { display: grid; gap: var(--space-sm); align-content: start; }
.benefit__k { font-family: var(--font-mono); font-size: var(--type-small); color: var(--text-faint); letter-spacing: var(--tracking-caps); }
.benefit h3 { font-size: var(--type-h3); }
.benefit p { color: var(--text-muted); max-width: 34ch; }

/* --- Tagline gemstone band (full-bleed, text over agate) ------------------- */
.tagline-band {
  position: relative; overflow: hidden;
  display: grid; place-items: center; text-align: center;
  min-height: clamp(280px, 42vw, 460px);
  padding: var(--space-3xl) var(--gutter);
}
.tagline-band__media {
  position: absolute; inset: 0; z-index: 0;
  background: url("../assets/img/stone-tagline.jpg") center / cover no-repeat;
}
.tagline-band__media::after {
  content: ""; position: absolute; inset: 0;
  background: color-mix(in srgb, var(--color-ink) 34%, transparent);
}
.tagline-band__text {
  position: relative; z-index: 1;
  color: var(--color-white);
  text-shadow: 0 2px 26px rgba(36, 30, 29, 0.5);
}

/* --- Closing CTA over gemstone --------------------------------------------- */
.cta-stone { position: relative; overflow: hidden; }
.cta-stone__media {
  position: absolute; inset: 0; z-index: 0;
  background: url("../assets/img/stone-cta.jpg") center / cover no-repeat;
}
.cta-stone__media::after {
  content: ""; position: absolute; inset: 0;
  background: color-mix(in srgb, var(--color-ink) 72%, transparent);
}
.cta-stone > .container { position: relative; z-index: 1; }

/* --- Pillars (the promise) ------------------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}
.pillar { display: grid; gap: var(--space-sm); align-content: start; }
.pillar__mark { width: 28px; height: 28px; color: var(--text-primary); }
.pillar h3 { font-size: var(--type-h3); }
.pillar p { color: var(--text-muted); max-width: 36ch; }

/* --- Steps (how it works) -------------------------------------------------- */
.steps { display: grid; gap: var(--space-xl); margin-top: var(--space-2xl); }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); } }
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-lg); align-items: start; }
.step__num {
  font-family: var(--font-serif); font-style: italic; font-size: var(--type-h3);
  color: var(--text-primary);
  border: var(--border-hairline) solid var(--border-strong);
  border-radius: var(--radius-pill);
  width: 3rem; height: 3rem; display: grid; place-items: center; flex: none;
}
.step h3 { font-size: var(--type-h3); margin-bottom: var(--space-2xs); }
.step p { color: var(--text-muted); }
.steps__note { margin-top: var(--space-2xl); max-width: var(--measure); font-size: var(--type-small); color: var(--text-faint); font-style: italic; }

/* --- Experience (portrait poster + spoken-session cue) --------------------- */
.experience { display: grid; gap: var(--space-2xl); align-items: center; }
@media (min-width: 56rem) { .experience { grid-template-columns: 1.05fr 0.95fr; } }
.experience__media { width: min(100%, 26rem); margin-inline: auto; display: grid; gap: var(--space-lg); justify-items: center; }
.session-cue {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  border: var(--border-hairline) solid var(--border-strong); border-radius: var(--radius-pill);
  padding: 0.7em 1.3em; color: var(--text-muted);
  font-family: var(--font-mono); font-size: var(--type-small);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
}
.session-cue__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-primary); animation: pulse 2.6s var(--ease) infinite; }

/* --- Methods --------------------------------------------------------------- */
.methods__cards { display: grid; gap: var(--space-lg); margin-top: var(--space-xl); }
@media (min-width: 44rem) { .methods__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.method-card {
  background: var(--surface-raised);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: grid; gap: var(--space-sm); align-content: start;
}
.method-card h3 { font-size: var(--type-h3); }
.method-card p { color: var(--text-muted); }
.method-card--soon { background: transparent; border-style: dashed; }
.method-card__tag {
  font-family: var(--font-mono); font-size: var(--type-label);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--text-faint);
}

/* --- Audience -------------------------------------------------------------- */
.audience { display: grid; gap: var(--space-2xl); margin-top: var(--space-xl); }
@media (min-width: 48rem) { .audience { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.audience__col h3 { font-size: var(--type-h3); margin-bottom: var(--space-md); }
.audience__col p { color: var(--text-muted); max-width: 42ch; }

/* --- Care note ------------------------------------------------------------- */
.care {
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  padding: var(--space-xl);
  max-width: var(--measure);
}
.care p { color: var(--text-muted); }
.care p + p { margin-top: var(--space-sm); }

/* --- FAQ (accordion) ------------------------------------------------------- */
.faq { max-width: var(--measure); margin-top: var(--space-xl); }
.faq__item { border-top: var(--border-hairline) solid var(--border-subtle); }
.faq__item:last-child { border-bottom: var(--border-hairline) solid var(--border-subtle); }
.faq__q {
  width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-lg) 0;
  font-family: var(--font-sans); font-size: var(--type-h3); color: var(--text-primary);
}
.faq__icon { flex: none; transition: transform var(--dur) var(--ease); color: var(--text-muted); font-family: var(--font-mono); }
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }
.faq__a { overflow: hidden; max-height: 0; transition: max-height var(--dur) var(--ease); }
.faq__a-inner { padding-bottom: var(--space-lg); color: var(--text-muted); max-width: var(--measure); }

/* --- Final CTA ------------------------------------------------------------- */
.final-cta { text-align: center; display: grid; gap: var(--space-lg); justify-items: center; }
.final-cta .lede { margin-inline: auto; text-align: center; color: color-mix(in srgb, var(--text-on-inverse) 75%, transparent); }

/* --- Footer ---------------------------------------------------------------- */
.site-footer { background: var(--surface-inverse); color: var(--text-on-inverse); padding-block: var(--space-2xl); }
.site-footer__top { display: flex; flex-wrap: wrap; gap: var(--space-xl); justify-content: space-between; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.site-footer__links a { font-family: var(--font-mono); font-size: var(--type-small); color: color-mix(in srgb, var(--text-on-inverse) 75%, transparent); text-decoration: none; }
.site-footer__links a:hover { color: var(--text-on-inverse); }
.site-footer .wordmark { color: var(--text-on-inverse); }
.site-footer__legal {
  margin-top: var(--space-xl); padding-top: var(--space-lg);
  border-top: var(--border-hairline) solid color-mix(in srgb, var(--text-on-inverse) 18%, transparent);
  font-family: var(--font-mono); font-size: var(--type-small);
  color: color-mix(in srgb, var(--text-on-inverse) 60%, transparent);
  display: grid; gap: var(--space-xs); max-width: var(--measure);
}
.site-footer__legal a { color: inherit; }

/* --- Session preview modal ------------------------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: var(--gutter);
  background: color-mix(in srgb, var(--color-ink) 55%, transparent);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__panel {
  position: relative;
  background: var(--surface-page);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  max-width: 34rem; width: 100%;
  padding: clamp(var(--space-xl), 5vw, var(--space-3xl));
  text-align: center;
  display: grid; gap: var(--space-lg); justify-items: center;
  transform: translateY(12px) scale(0.99);
  transition: transform var(--dur-slow) var(--ease);
}
.modal.is-open .modal__panel { transform: none; }
.modal__close {
  position: absolute; top: var(--space-md); right: var(--space-md);
  background: transparent; border: 0; cursor: pointer; font-size: 1.25rem; line-height: 1;
  color: var(--text-muted); padding: var(--space-xs);
}
.modal__close:hover { color: var(--text-primary); }
.modal__prompt { font-family: var(--font-sans); font-size: var(--type-h3); line-height: var(--leading-snug); max-width: 28ch; }
.modal__prompt em { font-family: var(--font-serif); font-style: italic; }
.modal__mic {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  border: var(--border-hairline) solid var(--border-strong); border-radius: var(--radius-pill);
  padding: 0.8em 1.4em; color: var(--text-muted);
  font-family: var(--font-mono); font-size: var(--type-label); text-transform: uppercase; letter-spacing: var(--tracking-caps);
}
.modal__mic-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-primary); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0%,100% { opacity: 0.3; transform: scale(0.85);} 50% { opacity: 1; transform: scale(1.15);} }
@media (prefers-reduced-motion: reduce) { .modal__mic-dot { animation: none; } }
.modal__disclaimer { font-family: var(--font-mono); font-size: var(--type-small); color: var(--text-muted); max-width: 34ch; }