/* ==================================================
   The Inner Decode Method — Mani
   Brand layer for the Calmind template.
   Loaded LAST so it wins over style.css / coloring.css / scheme-01.css.
   Palette sampled from the approved design comp:
     cream #FFF5E2 · dusty blue #99B8CD · tan #E7DBC3
     ink #252627 · body #3D3734 · heading brown #64422D
   ================================================== */

/* ---------- 1. brand tokens ---------- */
/* style.css declares its variables on the `*` selector, so the override
   has to use `*` too (same specificity, later source order = wins). */
* {
  --primary-color: #99B8CD;
  --primary-color-rgb: 153, 184, 205;
  --secondary-color: #64422D;
  --secondary-color-rgb: 100, 66, 45;

  --bg-default: #FFF5E2;
  --bg-light: #FBF1DD;
  --bg-dark-1: #252627;
  --bg-dark-1-rgb: 37, 38, 39;
  --bg-dark-2: #1B1C1D;
  --bg-color-even: #F4E9D2;
  --bg-color-odd: #FFF5E2;

  --body-font-color: #3D3734;
  --heading-font-color: #64422D;
  --footer-background-color: #252627;

  --btn-color: #252627;
  --btn-hover-color: #FFF5E2;
  --btn-hover-bg: #252627;
  --btn-rounded: 60px;
  --btn-padding: 12px 38px;
  --btn-font-size: 15px;

  --subtitle-font: var(--body-font);
  --subtitle-color: #8A6A4F;
  --subtitle-color-dark: #99B8CD;
  --subtitle-letter-spacing: 3px;

  --rounded-1: 14px;
  --container-max-width: 1240px;
}

html,
body {
  background: var(--bg-default);
}

/* ---------- 2. buttons: white pill, dark label ---------- */
a.btn-main,
a.btn-main:active,
a.btn-main:focus,
a.btn-main:visited,
.btn-main,
input[type=button].btn-main {
  background: #ffffff;
  color: #252627;
  box-shadow: 0 6px 24px rgba(37, 38, 39, .10);
  transition: all .25s ease;
}

a.btn-main:hover,
.btn-main:hover {
  background: #252627;
  color: #FFF5E2;
  box-shadow: 0 8px 28px rgba(37, 38, 39, .28);
}

/* outline variant used in the header bar */
a.btn-main.btn-line {
  background: transparent;
  color: #FFF5E2;
  border: solid 1px rgba(255, 245, 226, .55);
  box-shadow: none;
}

a.btn-main.btn-line:hover {
  background: #FFF5E2;
  color: #252627;
  border-color: #FFF5E2;
}

/* ---------- 3. header / wordmark ---------- */
#topbar {
  border-bottom: solid 1px rgba(255, 245, 226, .12);
}

#topbar .topbar-widget a {
  color: rgba(255, 245, 226, .72);
  font-size: 13px;
  letter-spacing: .3px;
}

/* wordmark — used in both the header and the footer, so it is not
   scoped to #logo (the footer has no #logo wrapper). */
.logo-text {
  display: inline-block;
  line-height: 1;
  text-decoration: none;
}

.logo-text .lt-name {
  display: block;
  font-family: var(--heading-font);
  font-size: 30px;
  letter-spacing: .04em;
  color: #FFF5E2;
}

.logo-text .lt-sub {
  display: block;
  margin-top: 5px;
  font-family: var(--body-font);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255, 245, 226, .60);
}

footer .logo-text .lt-name {
  font-size: 28px;
}

footer .logo-text:hover .lt-name {
  color: #99B8CD;
}

/* ---------- 4. hero ---------- */
/* The image is declared here, NOT via data-bgimage: designesia.js applies a
   `background` shorthand for data-bgimage elements, which resets
   background-position and would break the framing of the shot. */
#hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  background-color: #1B2530;
  background-image: url(../images/mani/hero.webp);
  background-size: cover;
  background-position: 50% 18%;
  background-repeat: no-repeat;
}

#hero .hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
      rgba(20, 26, 32, .78) 0%,
      rgba(20, 26, 32, .55) 38%,
      rgba(20, 26, 32, .12) 68%,
      rgba(20, 26, 32, .22) 100%);
}

/* padding-top/bottom only — a shorthand here would wipe out the
   .container side padding and let text run to the screen edge on mobile. */
#hero .hero-inner {
  position: relative;
  z-index: 2;
  padding-top: 190px;
  padding-bottom: 110px;
}

#hero h1 {
  font-size: 78px;
  line-height: 1.02em;
  color: #FFF5E2;
  margin-bottom: 22px;
}

#hero .hero-kicker {
  font-family: var(--body-font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #99B8CD;
  margin-bottom: 26px;
}

#hero .hero-lead {
  font-size: 21px;
  line-height: 1.6em;
  color: rgba(255, 245, 226, .88);
  max-width: 520px;
  margin-bottom: 38px;
}

/* price reassurance sitting beside the hero CTA */
#hero .hero-price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-left: 20px;
  font-size: 14px;
  letter-spacing: .04em;
  color: rgba(255, 245, 226, .70);
}

#hero .hero-price strong {
  font-size: 16px;
  color: #FFF5E2;
}

#hero .hero-price s {
  color: rgba(255, 245, 226, .45);
  text-decoration-color: rgba(153, 184, 205, .8);
}

/* ---------- 5. section rhythm ---------- */
.sec-cream {
  background: #FFF5E2;
}

.sec-blue {
  background: #99B8CD;
}

.sec-ink {
  background: #252627;
}

.sec-tan {
  background: #F4E9D2;
}

.lead-intro {
  font-size: 20px;
  line-height: 1.75em;
  color: #4A423C;
}

.rule-brand {
  width: 64px;
  height: 2px;
  background: #99B8CD;
  border: 0;
  opacity: 1;
  margin: 0 0 26px;
}

/* ---------- 6. "This is for you if..." cards ---------- */
.fit-card {
  height: 100%;
  padding: 44px 34px 40px;
  border-radius: var(--rounded-1);
  background: #FBF0D9;
  border: solid 1px rgba(100, 66, 45, .10);
  transition: transform .3s ease, box-shadow .3s ease;
}

.fit-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(100, 66, 45, .13);
}

.fit-card .fit-num {
  font-family: var(--heading-font);
  font-size: 52px;
  line-height: 1;
  color: #99B8CD;
  display: block;
  margin-bottom: 18px;
}

.fit-card h3 {
  font-size: 25px;
  line-height: 1.3em;
  margin-bottom: 14px;
}

.fit-card p {
  margin-bottom: 0;
  color: #554C45;
}

.fit-card.is-ink {
  background: #252627;
  border-color: #252627;
}

.fit-card.is-ink h3 {
  color: #FFF5E2;
}

.fit-card.is-ink p {
  color: rgba(255, 245, 226, .72);
}

.fit-card.is-blue {
  background: #99B8CD;
  border-color: #99B8CD;
}

.fit-card.is-blue .fit-num {
  color: #FFF5E2;
}

.fit-card.is-blue h3 {
  color: #24333D;
}

.fit-card.is-blue p {
  color: #33454F;
}

/* photo variant — image sits full-bleed at the top of the card, with the
   step number reversed out over the bottom-left corner of the shot. */
.fit-card.has-media {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.fit-media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #1B1C1D;
}

.fit-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

.fit-card.has-media:hover .fit-media img {
  transform: scale(1.06);
}

/* legibility scrim under the number */
.fit-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
      rgba(20, 22, 24, 0) 42%,
      rgba(20, 22, 24, .55) 100%);
}

.fit-card.has-media .fit-media .fit-num {
  position: absolute;
  z-index: 2;
  left: 26px;
  bottom: 12px;
  margin: 0;
  font-size: 46px;
  color: #FFF5E2;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}

.fit-card.has-media .fit-body {
  flex: 1 1 auto;
  padding: 30px 30px 34px;
}

.fit-card.has-media h3 {
  font-size: 23px;
}

.fit-summary {
  border-top: solid 1px rgba(100, 66, 45, .18);
  margin-top: 56px;
  padding-top: 30px;
  font-size: 18px;
  line-height: 1.75em;
  color: #554C45;
}

/* ---------- 7. pull quote ---------- */
.pull-quote {
  font-family: var(--heading-font);
  font-size: 46px;
  line-height: 1.28em;
  color: #FFF5E2;
  margin: 0 auto 26px;
  max-width: 900px;
}

.pull-quote-by {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #99B8CD;
}

/* ---------- 8. what's included ---------- */
.incl-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.incl-list li {
  display: flex;
  gap: 22px;
  padding: 26px 0;
  border-bottom: solid 1px rgba(100, 66, 45, .14);
}

.incl-list li:first-child {
  padding-top: 0;
}

.incl-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.incl-list .incl-num {
  flex: 0 0 auto;
  font-family: var(--heading-font);
  font-size: 20px;
  line-height: 44px;
  width: 44px;
  height: 44px;
  text-align: center;
  border-radius: 50%;
  background: #99B8CD;
  color: #24333D;
}

.incl-list h3 {
  font-size: 22px;
  margin-bottom: 6px;
}

.incl-list p {
  margin-bottom: 0;
  color: #554C45;
}

.img-frame {
  border-radius: var(--rounded-1);
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(37, 38, 39, .16);
}

.img-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* the price card makes the text column much taller than the photo, so on
   desktop the photo stretches to match instead of floating in empty space. */
@media only screen and (min-width: 992px) {
  .img-frame.is-fill {
    height: 100%;
  }

  .img-frame.is-fill img {
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
  }
}

/* ---------- 8b. investment / early bird card ---------- */
.price-card {
  position: relative;
  overflow: hidden;
  margin-top: 46px;
  padding: 38px 40px 34px;
  border-radius: 18px;
  background: linear-gradient(150deg, #2E2F31 0%, #1E1F20 58%, #252627 100%);
  box-shadow: 0 26px 60px rgba(37, 38, 39, .26);
}

/* soft brand glow, top-right */
.price-card::before {
  content: "";
  position: absolute;
  top: -130px;
  right: -100px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(153, 184, 205, .30) 0%, rgba(153, 184, 205, 0) 70%);
}

.price-flag {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 7px 16px;
  border-radius: 60px;
  background: #99B8CD;
  color: #1F2C35;
  font-family: var(--body-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.price-head {
  position: relative;
  z-index: 1;
  margin-top: 22px;
  font-family: var(--heading-font);
  font-size: 26px;
  line-height: 1.2em;
  color: #FFF5E2;
}

.price-compare {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 22px 0 32px;
  padding-top: 24px;
  border-top: solid 1px rgba(255, 245, 226, .14);
}

.price-label {
  display: block;
  margin-bottom: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 245, 226, .48);
}

.price-value {
  display: block;
  font-family: var(--heading-font);
  line-height: 1;
  white-space: nowrap;
}

.price-value em {
  font-style: normal;
  font-size: .34em;
  font-weight: 600;
  letter-spacing: .12em;
  color: rgba(255, 245, 226, .55);
}

.price-col.is-was .price-value {
  font-size: 34px;
  color: rgba(255, 245, 226, .46);
}

.price-col.is-was .price-value s {
  text-decoration-color: #99B8CD;
  text-decoration-thickness: 2px;
}

.price-col.is-now .price-label {
  color: #99B8CD;
}

.price-col.is-now .price-value {
  font-size: 54px;
  color: #FFF5E2;
}

/* thin arrow linking the old price to the new one */
.price-arrow {
  flex: 0 0 auto;
  position: relative;
  width: 46px;
  height: 2px;
  background: rgba(255, 245, 226, .26);
}

.price-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -4px;
  width: 10px;
  height: 10px;
  border-top: solid 2px rgba(255, 245, 226, .26);
  border-right: solid 2px rgba(255, 245, 226, .26);
  transform: rotate(45deg);
}

.price-save {
  display: inline-block;
  margin-top: 13px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #99B8CD;
}

a.btn-main.price-cta {
  position: relative;
  z-index: 1;
}

.price-meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: solid 1px rgba(255, 245, 226, .12);
}

.price-meta span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: rgba(255, 245, 226, .66);
}

.price-meta i {
  font-size: 15px;
  color: #99B8CD;
}

/* ---------- 9. testimonials ---------- */
.tm-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #E7DBC3;
  border-radius: var(--rounded-1);
  padding: 38px 34px 30px;
}

/* the `p` selector is required: style.css sets `.text-light p{color}` directly
   on the paragraph, and a direct rule always beats an inherited one. */
.tm-card .tm-quote,
.tm-card .tm-quote p {
  font-size: 16.5px;
  line-height: 1.72em;
  color: #3A322B;
}

.tm-card .tm-quote {
  margin-bottom: 26px;
  flex: 1 1 auto;
}

.tm-card .tm-quote p:last-child {
  margin-bottom: 0;
}

.tm-card .tm-quote strong {
  color: #24201C;
}

.tm-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: solid 1px rgba(58, 50, 43, .16);
  padding-top: 20px;
}

.tm-foot img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.tm-foot .tm-name {
  font-family: var(--body-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6B5B4B;
}

/* ---------- 10. FAQ ---------- */
#faq .accordion-section-title {
  font-family: var(--heading-font);
  font-size: 20px;
  color: #64422D;
}

#faq .faq-bullets {
  padding-left: 18px;
  margin: 12px 0 0;
}

#faq .faq-bullets li {
  margin-bottom: 10px;
}

/* ---------- 11. closing CTA ---------- */
#book .cta-title {
  font-size: 52px;
  line-height: 1.12em;
  color: #FFF5E2;
  margin-bottom: 18px;
}

#book .cta-sub {
  font-size: 18px;
  color: rgba(255, 245, 226, .78);
  margin-bottom: 34px;
}

/* early bird pill above the closing CTA button.
   flex + fit-content (not inline-flex) so the button drops to its own line. */
#book .cta-price {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  margin: 0 auto 32px;
  padding: 11px 14px 11px 24px;
  border: solid 1px rgba(255, 245, 226, .18);
  border-radius: 60px;
  background: rgba(255, 245, 226, .04);
}

#book .cta-price s {
  font-size: 17px;
  color: rgba(255, 245, 226, .45);
  text-decoration-color: #99B8CD;
  text-decoration-thickness: 2px;
}

#book .cta-price strong {
  font-family: var(--heading-font);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  color: #FFF5E2;
}

#book .cta-price-tag {
  padding: 6px 13px;
  border-radius: 60px;
  background: #99B8CD;
  color: #1F2C35;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

#book .cta-meta {
  margin-top: 26px;
  font-size: 14px;
  letter-spacing: .06em;
  color: rgba(255, 245, 226, .55);
}

/* ---------- 12. footer ---------- */
footer {
  background: #252627;
}

footer .widget h2.hs-5 {
  color: #FFF5E2;
}

footer a {
  color: rgba(255, 245, 226, .70);
}

footer a:hover {
  color: #99B8CD;
}

footer .foot-was {
  color: rgba(255, 245, 226, .42);
  text-decoration-color: #99B8CD;
}

footer .foot-now {
  color: #FFF5E2;
  font-weight: 700;
}

.subfooter {
  border-top: solid 1px rgba(255, 245, 226, .12);
}

/* ---------- 13. responsive ---------- */
@media only screen and (max-width: 1199px) {
  #hero h1 {
    font-size: 62px;
  }

  .pull-quote {
    font-size: 38px;
  }

  #book .cta-title {
    font-size: 42px;
  }
}

@media only screen and (max-width: 991px) {
  #hero {
    min-height: 0;
    background-position: 72% 15%;
  }

  #hero .hero-inner {
    padding-top: 150px;
    padding-bottom: 300px;
  }

  #hero .hero-veil {
    background: linear-gradient(180deg, rgba(20, 26, 32, .82) 0%, rgba(20, 26, 32, .62) 38%, rgba(20, 26, 32, .18) 70%, rgba(20, 26, 32, .30) 100%);
  }
}

@media only screen and (max-width: 991px) {
  /* the hero price no longer fits beside the button */
  #hero .hero-price {
    display: flex;
    margin: 18px 0 0;
  }
}

@media only screen and (max-width: 767px) {
  #hero h1 {
    font-size: 44px;
  }

  #hero .hero-lead {
    font-size: 18px;
  }

  .pull-quote {
    font-size: 28px;
  }

  #book .cta-title {
    font-size: 34px;
  }

  .fit-card {
    padding: 34px 26px;
  }

  /* has-media keeps its own padding on the body instead */
  .fit-card.has-media {
    padding: 0;
  }

  .fit-card.has-media .fit-body {
    padding: 26px 26px 30px;
  }

  .price-card {
    padding: 32px 26px 28px;
  }

  .price-head {
    font-size: 23px;
  }

  /* stack the comparison and turn the arrow downward */
  .price-compare {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .price-arrow {
    width: 2px;
    height: 34px;
    margin-left: 3px;
  }

  .price-arrow::after {
    right: -4px;
    top: auto;
    bottom: 0;
    transform: rotate(135deg);
  }

  .price-col.is-now .price-value {
    font-size: 46px;
  }

  .price-meta {
    gap: 10px 0;
    flex-direction: column;
  }

  #book .cta-price {
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 20px;
    padding: 16px 20px;
  }
}