/* BIMYOURSELF v0.5.5 — M3/Homepage conformance layer. */

.home-hero {
  background: linear-gradient(180deg, var(--paper) 0%, rgba(191,220,207,.14) 100%);
  padding-block: 0;
}
.home-hero .hero-grid {
  grid-template-columns: 1.05fr 1.2fr;
  align-items: stretch;
  min-height: 0;
}
.home-hero .hero-content {
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(24px,3vw,38px) 0;
  padding-right:var(--gutter);
}
.home-hero .hero-img {
  position:relative;
  align-self:stretch;
  min-height:360px;
  aspect-ratio:auto;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
  margin:0;
  overflow:hidden;
}
.home-hero .hero-img img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  margin:0;
}
.home-hero .hero-copy { margin-bottom:10px; }
.home-hero .meta { margin-top:4px; }

.home-axes-intro { text-align:center; max-width:60ch; margin:0 auto 22px; }
.home-axes .axis-card {
  position:relative;
  overflow:hidden;
  padding:20px 22px;
  min-height:150px;
  display:flex;
  align-items:center;
  box-shadow:var(--shadow);
}
.home-axes .axis-card-survive { background:var(--soft-mint); }
.home-axes .axis-card-think { background:var(--soft-pink); }
.home-axes .axis-card-evolve { background:#F2F7F5; }
.home-axes .axis-card-bg-visual { position:absolute; inset:0; opacity:.12; z-index:0; pointer-events:none; }
.home-axes .axis-card-bg-visual img { width:100%; height:100%; object-fit:cover; }
.home-axes .axis-card-inner {
  position:relative;
  z-index:1;
  width:100%;
  display:grid;
  grid-template-columns:108px 1fr;
  gap:18px;
  align-items:center;
}
.home-axes .axis-card-img-wrap.axis-card-symbol {
  width:108px;
  height:108px;
  aspect-ratio:1;
  background:transparent;
  border:0;
  border-radius:0;
  overflow:visible;
  display:flex;
  align-items:center;
  justify-content:center;
}
.home-axes .axis-card-img-wrap.axis-card-symbol img {
  width:90px;
  height:90px;
  object-fit:contain;
}
.home-axes .axis-card-content { gap:5px; }
.home-axes .axis-card-content h3 { margin:0; font-size:19px; }
.home-axes .axis-card-content p { margin:0; line-height:1.35; font-size:14px; }
.home-axes .axis-card-content .text-link { margin-top:6px; }

.home-middle-showcase { padding-top:0; }
.home-middle-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.showcase-card { min-height:230px; display:grid; grid-template-columns:1.1fr .9fr; overflow:hidden; background:var(--surface); border:1px solid var(--border); border-radius:var(--rl); box-shadow:var(--shadow); }
.showcase-card-berry { grid-template-columns:.9fr 1.1fr; background:var(--soft-pink); border-color:rgba(185,71,104,.20); }
.showcase-card-breath { background:#EDF5F1; border-color:var(--border-mint); }
.showcase-card-body { padding:clamp(20px,3vw,30px); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.showcase-card-body h2 { margin:8px 0 10px; font-size:clamp(1.4rem,2vw,1.8rem); }
.showcase-card-img { min-height:220px; overflow:hidden; }
.showcase-card-img img { width:100%; height:100%; object-fit:cover; }
.practice-badge-tag { display:inline-flex; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--mint-ui); }

.home-shop { padding-block:var(--section); }
.home-shop .shop-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--rl); overflow:hidden; box-shadow:var(--shadow); }
.home-shop .shop-grid { display:grid; grid-template-columns:.9fr 1.1fr; align-items:stretch; }
.home-shop .shop-img-box { min-height:300px; background:var(--soft-mint); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.home-shop .shop-img-box img { width:100%; height:100%; object-fit:cover; }
.home-shop .shop-content { padding:clamp(24px,4vw,44px); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.home-shop .shop-content h2 { margin:8px 0 10px; }

.home-gaia { padding-top:0; }
.gaia-bio-card-wide { display:grid; grid-template-columns:1.05fr 1fr; border:1px solid var(--border); border-radius:var(--rl); overflow:hidden; background:var(--surface); box-shadow:var(--shadow); }
.gaia-bio-card-wide .gaia-bio-content { padding:clamp(24px,4vw,44px); }
.gaia-bio-hands-box { min-height:260px; overflow:hidden; }
.gaia-bio-hands-box img { width:100%; height:100%; object-fit:cover; }

.newsletter-box { background:var(--soft-pink); border:1px solid rgba(185,71,104,.20); border-radius:var(--rl); padding:clamp(24px,4vw,42px); }
.newsletter-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,48px); align-items:center; }
.form-row { display:flex; gap:10px; align-items:stretch; }
.form-input, input[type="email"], input[type="text"], textarea {
  min-height:44px; width:100%; padding:10px 12px; border:1px solid var(--form-boundary, var(--text-soft)); border-radius:var(--rs); background:#fff; color:var(--graphite);
}
.form-input:focus-visible, input:focus-visible, textarea:focus-visible { outline:3px solid var(--mint-ui); outline-offset:2px; }
.form-checkbox-label { display:flex; align-items:flex-start; gap:10px; font-family:var(--font-ui); font-size:13px; line-height:1.45; color:var(--text-soft); }

.site-header .nav .btn-primary,
.site-header .nav .btn-primary:visited,
.site-header .nav .btn-primary:hover,
.site-header .nav .btn-primary:focus-visible {
  color:#fff;
}

.modal-overlay[aria-hidden="true"] { visibility:hidden; }
.modal-overlay[aria-hidden="false"], .modal-overlay.is-open { visibility:visible; }
.site-footer .footer-grid { grid-template-columns:1.4fr 1fr 1fr 1fr; }

@media (max-width:960px) {
  .home-hero .hero-grid,
  .home-middle-grid,
  .home-shop .shop-grid,
  .gaia-bio-card-wide,
  .newsletter-grid { grid-template-columns:1fr; }
  .home-hero .hero-content { padding-right:0; }
  .home-hero .hero-img { min-height:240px; order:2; }
  .showcase-card { grid-template-columns:1fr; }
  .showcase-card-img { min-height:190px; }
  .home-axes .axis-card-inner { grid-template-columns:90px 1fr; }
  .home-axes .axis-card-img-wrap.axis-card-symbol { width:90px; height:90px; }
  .home-axes .axis-card-img-wrap.axis-card-symbol img { width:76px; height:76px; }
  .site-footer .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:640px) {
  .home-hero .hero-content { padding-block:28px; }
  .home-hero .hero-img { min-height:210px; }
  .home-axes .axis-card { min-height:0; padding:18px; }
  .home-axes .axis-card-inner { grid-template-columns:76px 1fr; gap:12px; }
  .home-axes .axis-card-img-wrap.axis-card-symbol { width:76px; height:76px; }
  .home-axes .axis-card-img-wrap.axis-card-symbol img { width:68px; height:68px; }
  .form-row { flex-direction:column; }
  .site-footer .footer-grid { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  .home-hero *, .showcase-card *, .home-shop *, .home-gaia * { transition:none !important; animation:none !important; }
}


/* RC8 — DOI confirmation popup shown only when navigation.js sees ?confirmed=1. */
.by-confirmation-popup {
  position: fixed;
  z-index: 99990;
  top: clamp(88px, 12vh, 140px);
  left: 50%;
  width: min(560px, calc(100vw - 32px));
  transform: translate(-50%, -12px);
  opacity: 0;
  visibility: hidden;
  padding: clamp(26px, 4vw, 38px);
  border: 1px solid var(--border-mint);
  border-radius: var(--rl);
  background: linear-gradient(135deg, #FFFFFF 0%, var(--soft-mint) 100%);
  box-shadow: 0 24px 70px rgba(32, 37, 34, .20);
  text-align: center;
  transition: opacity .24s ease, transform .24s ease, visibility .24s ease;
}

.by-confirmation-popup.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.by-confirmation-popup.is-leaving {
  opacity: 0;
  transform: translate(-50%, -8px);
}

.by-confirmation-popup h2 {
  margin: 8px 36px 8px;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
}

.by-confirmation-popup p {
  margin: 0 auto;
  max-width: 34ch;
  font-size: 1rem;
  line-height: 1.55;
}

.by-confirmation-popup__signoff {
  display: block;
  margin-top: 16px;
  font-family: var(--font-ui);
  font-size: .88rem;
  color: var(--text-soft);
}

.by-confirmation-popup__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--graphite);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.by-confirmation-popup__close:hover {
  background: rgba(54, 94, 77, .08);
}

.by-confirmation-popup__close:focus-visible {
  outline: 3px solid var(--mint-ui);
  outline-offset: 2px;
}

@media (max-width:640px) {
  .by-confirmation-popup {
    top: 82px;
    padding: 26px 22px 24px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .by-confirmation-popup {
    transition: none;
  }
}


/* RC9 — compact neutral DOI confirmation toast. Overrides RC8 visual only. */
.by-confirmation-popup {
  top: 86px;
  right: 24px;
  left: auto;
  width: min(390px, calc(100vw - 32px));
  transform: translateY(-8px);
  padding: 18px 44px 18px 20px;
  border: 1px solid #D8DAD9;
  border-radius: 10px;
  background: #F7F7F6;
  box-shadow: 0 8px 24px rgba(32, 37, 34, .12);
  text-align: left;
}

.by-confirmation-popup.is-visible {
  transform: translateY(0);
}

.by-confirmation-popup.is-leaving {
  transform: translateY(-6px);
}

.by-confirmation-popup .eyebrow {
  display: none;
}

.by-confirmation-popup h2 {
  margin: 0 0 4px;
  font-size: 1.08rem;
  line-height: 1.25;
}

.by-confirmation-popup p {
  margin: 0;
  max-width: none;
  font-size: .9rem;
  line-height: 1.45;
  color: #525856;
}

.by-confirmation-popup__signoff {
  display: none;
}

.by-confirmation-popup__close {
  top: 7px;
  right: 8px;
  width: 30px;
  height: 30px;
  font-size: 22px;
  color: #666B69;
}

.by-confirmation-popup__close:hover {
  background: #E9EAE9;
}

@media (max-width:640px) {
  .by-confirmation-popup {
    top: 74px;
    right: 16px;
    left: 16px;
    width: auto;
    padding: 16px 42px 16px 18px;
  }
}


/* RC10 — centered DOI welcome panel. */
.by-confirmation-popup {
  top: 50%;
  right: auto;
  left: 50%;
  width: min(620px, calc(100vw - 40px));
  transform: translate(-50%, calc(-50% - 10px));
  padding: clamp(28px, 4vw, 42px) clamp(34px, 5vw, 54px);
  border: 1px solid #D9DBDA;
  border-radius: 14px;
  background: #F7F7F6;
  box-shadow: 0 18px 48px rgba(32, 37, 34, .16);
  text-align: center;
}

.by-confirmation-popup.is-visible {
  transform: translate(-50%, -50%);
}

.by-confirmation-popup.is-leaving {
  transform: translate(-50%, calc(-50% - 8px));
}

.by-confirmation-popup h2 {
  margin: 0 34px 10px;
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  line-height: 1.2;
}

.by-confirmation-popup p {
  margin: 0 auto;
  max-width: 38ch;
  font-size: 1rem;
  line-height: 1.55;
  color: #525856;
}

.by-confirmation-popup__signoff {
  display: block;
  margin-top: 16px;
  font-family: var(--font-ui);
  font-size: .9rem;
  color: #6A706D;
}

.by-confirmation-popup__close {
  top: 10px;
  right: 12px;
}

@media (max-width:640px) {
  .by-confirmation-popup {
    top: 50%;
    right: auto;
    left: 50%;
    width: calc(100vw - 28px);
    padding: 28px 28px 26px;
    transform: translate(-50%, calc(-50% - 8px));
  }

  .by-confirmation-popup.is-visible {
    transform: translate(-50%, -50%);
  }

  .by-confirmation-popup.is-leaving {
    transform: translate(-50%, calc(-50% - 6px));
  }
}


/* RC11 — consent spacing + Mug profile fields. */
.newsletter-form .form-checkbox-field {
  padding-block: 10px;
  min-height: 56px;
  display: flex;
  align-items: center;
}
.newsletter-form .form-checkbox-label {
  margin: 0;
}
.mug-profile-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width:640px) {
  .mug-profile-row { grid-template-columns: 1fr; }
}

/* RC12 structured Practice/Mug fields */
.practice-profile-row,
.practice-location-row,
.mug-profile-row,
.mug-location-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.newsletter-box .form-checkbox-field { padding-block:12px; }
@media (max-width:640px) {
  .practice-profile-row,
  .practice-location-row,
  .mug-profile-row,
  .mug-location-row { grid-template-columns:1fr; }
}


/* RC13 — Practice visual differentiation + operational Contact form. */
.practice-notify-box {
  background: var(--soft-mint);
  border-color: var(--border-mint);
}

.contact-form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rl);
  padding: clamp(24px, 4vw, 36px);
  box-shadow: var(--shadow);
  margin-top: 32px;
}

.contact-form-card form {
  display:flex;
  flex-direction:column;
  gap:16px;
}

.contact-name-row,
.contact-meta-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.contact-form-card .form-field {
  min-width:0;
}

.contact-form-card textarea.form-input {
  min-height:150px;
  resize:vertical;
}

.contact-privacy-note {
  margin:0;
  font-size:.85rem;
  line-height:1.45;
  color:var(--text-soft);
}

.contact-form-status {
  min-height:1.5em;
  font-size:.92rem;
}

.contact-honeypot {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

@media (max-width:640px) {
  .contact-name-row,
  .contact-meta-row {
    grid-template-columns:1fr;
  }
}