/* ==================================================================
   the_reason — /phenotype-protocol and /dna-protocol
   Layout mirrors the Framer pages: fixed nav → 60vh hero with the
   pricing card over a masked radial gradient → 640px body column →
   80vh footer.
   ================================================================== */

.protocol {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background: var(--c-bg);
}

/* nav on sub-pages: fixed, fades in from y=-10 on load */
.protocol .nav { position: fixed; left: 0; top: 0; }
.protocol .nav__inner > .icon-btn { order: 0; }
.protocol .nav__inner > .nav-logo { order: 1; }

/* hero */
.protocol__hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  width: 100%;
  height: 60vh;
  min-height: 420px;
  padding: 80px 16px 0;
  overflow: clip;
}
.protocol__card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1.58416;
}
.protocol__grad {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 0;
  height: 80vh;
  overflow: clip;
  background: radial-gradient(100% 100% at 50% 100%, #fcfcfc 0%, #8b9380 100%);
  -webkit-mask-image: linear-gradient(#000 0%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(#000 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.protocol--pro .protocol__grad {
  background: radial-gradient(100% 105% at 50% 105.7%, #736a5e 0%, #12120d 100%);
}

/* body column */
.protocol__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 640px;
  padding: 0 0 120px;
  border-radius: 24px;
}
.protocol__body > * { width: 100%; }

.protocol__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 16px 40px;
  text-align: center;
  overflow: clip;
}
.protocol__header .t-h2-display { color: var(--c-black); }
.protocol__header .t-h2-serif { color: var(--c-ink-40); }

.protocol__order { display: flex; justify-content: center; padding: 0 16px 52px; }
.protocol__order .btn { flex: 1 0 0; }

.protocol__intro { padding: 0 16px 40px; overflow: clip; }
.protocol--pro .protocol__intro { padding: 0 24px 40px; }
.protocol__intro p { color: var(--c-black); opacity: .8; }

/* benefits card */
.protocol__cards { display: flex; padding: 0 0 52px; }
.benefits {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  background: var(--c-white);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.benefits__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 24px;
  border-radius: 16px;
}
.benefits__group--sage { background: radial-gradient(100% 100% at 50% 100%, #fcfcfc 0%, rgba(139,147,128,.64) 100%); }
.benefits__group--dark { background: radial-gradient(100% 105% at 50% 105.7%, #736a5e 0%, #12120d 100%); overflow: hidden; }
.benefits__group--white { background: var(--c-white); }
.benefits__head {
  display: flex;
  align-items: center;
  gap: 40px;
  width: 100%;
  padding: 0 0 12px;
  overflow: clip;
}
.benefits__head h6 { flex: 1; opacity: .8; color: var(--c-ink-80); }
.benefits__group--dark .benefits__head h6 { color: var(--c-white-68); opacity: 1; }
.benefits__group--white .benefits__head h6 { color: var(--c-ink-40); opacity: 1; }
.benefits__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 40px;
  width: 100%;
  padding: 12px 0;
}
.benefits__row + .benefits__row::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--c-line-10);
}
.benefits__group--dark .benefits__row + .benefits__row::before { background: var(--c-white-10); }
.benefits__row p { flex: 1 0 0; opacity: .8; color: var(--c-black); }
.benefits__group--dark .benefits__row p { color: var(--c-white); opacity: 1; }

/* text sections */
.protocol__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 0 24px 40px;
  overflow: clip;
}
.protocol__text > * { width: 100%; }
.protocol__text .label { opacity: .8; color: var(--c-black); }
.protocol__text .body { opacity: .8; color: var(--c-black); }
.protocol--pro .protocol__text .body { color: var(--c-ink-80); }
.protocol--pro .protocol__text .body--balance { text-wrap: balance; }
.protocol__text .body p + p { margin-top: 20px; }
.protocol__divider { display: flex; align-items: center; padding: 0 24px 40px; overflow: clip; }
.protocol__divider .divider__line { background: var(--c-line-10); }
.protocol__spacer { height: 40px; overflow: clip; }

/* cross-sell + founder wrappers */
.protocol__margin { display: flex; padding: 0 8px; overflow: clip; }
.protocol__margin--founder { max-width: 920px; }

@media (max-width: 1023.98px) {
  .protocol__card { max-width: min(100vw - 32px, 400px); }
  .protocol--ess .protocol__cards { padding: 0 8px 52px; }
}
@media (max-width: 809.98px) {
  .protocol__hero { min-height: 380px; }
}