/* =====================================================
   THE FERTILITY PROTOCOL - MAIN STYLESHEET
===================================================== */

/* ── VARIABLES ────────────────────────────────────── */
:root {
  --teal:         #2F6F73;
  --teal-dark:    #1C4A4D;
  --teal-pale:    #E8F3F3;
  --mauve:        #9B7FA6;
  --mauve-dark:   #7A6085;
  --mauve-pale:   #F2EDF5;
  --rose:         #D99694;
  --rose-dark:    #B87472;
  --rose-pale:    #FAF0EF;
  --sage:         #7A9E8E;
  --sage-dark:    #5C7D6E;
  --sage-pale:    #EBF3EF;
  --near-black:   #1A2B2C;
  --mid:          #5A6B6C;
  --border:       rgba(26,43,44,0.09);
  --white:        #FFFFFF;
  --offwhite:     #FAFAF8;
  --cream:        #F5EFE6;
  --ph-menstrual: #B56A82;
  --ph-follicular:#8A9E6A;
  --ph-ovulation: #6A8FB5;
  --ph-luteal:    #6B4E8A;
}

/* ── RESET & BASE ───────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--white);
  color: var(--near-black);
  overflow-x: hidden;
  font-size: 16px;
  line-height: 1.6;
  padding-top: 70px;
}

img { max-width:100%; height:auto; display:block; }
a { color: inherit; text-decoration: none; transition: color 0.2s; }

/* ── TYPOGRAPHY ─────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Lora', Georgia, serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--near-black);
}

p { line-height: 1.8; }

.section-heading {
  font-size: clamp(2rem, 2.8vw, 2.8rem);
  margin-bottom: 24px;
}

.section-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  line-height: 1.85;
  font-weight: 300;
  color: var(--mid);
  margin-bottom: 32px;
}

.section-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.93rem;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.7;
  max-width: 460px;
  margin-bottom: 48px;
}

.section-head { margin-bottom: 56px; }

/* ── COLOUR UTILITIES ───────────────────────────────── */
.text-teal    { color: var(--teal); }
.text-mauve   { color: var(--mauve); }
.text-rose    { color: var(--rose); }
.text-sage    { color: var(--sage-dark); }
.logo-dot     { color: var(--rose); }
.dot-rose     { color: var(--rose); }

/* ── LAYOUT ─────────────────────────────────────────── */
.section-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 108px 72px;
}

/* ── EYEBROW LABELS ─────────────────────────────────── */
.eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.63rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 20px;
  height: 1.5px;
  background: currentColor;
  display: block;
  flex-shrink: 0;
}
.eyebrow-lg {
  font-size: 1.32rem;
  letter-spacing: 0.18em;
  margin-bottom: 30px;
}
.eyebrow-lg::before { width: 40px; height: 2px; }
.eyebrow-mauve { color: var(--mauve); }
.eyebrow-teal  { color: var(--teal); }
.eyebrow-sage  { color: var(--sage-dark); }
.eyebrow-rose  { color: var(--rose-dark); }

/* ── BUTTONS ─────────────────────────────────────────── */
.btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 16px 34px;
  display: inline-block;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, color 0.2s;
  border: none;
  line-height: 1;
}

.btn-filled {
  background: var(--mauve);
  color: var(--white);
}
.btn-filled:hover {
  background: var(--mauve-dark);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--mauve);
  border: 1.5px solid var(--mauve);
}
.btn-outline:hover {
  background: var(--mauve);
  color: var(--white);
}

.btn-teal {
  background: var(--teal);
  color: var(--white);
}
.btn-teal:hover { background: var(--teal-dark); }

/* ── NAVIGATION ─────────────────────────────────────── */
.tfp-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 70px;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  font-family: 'Lora', serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--teal);
  line-height: 1.2;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo:hover { color: var(--teal-dark); }
.nav-logo .logo-dot { color: var(--rose); }
.nav-logo .custom-logo { max-height: 48px; width: auto; }

.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
  align-items: center;
  margin: 0; padding: 0;
}

.nav-links > li {
  position: relative;
  display: flex;
  align-items: center;
  height: 70px;
}

.nav-links a {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--mid);
  white-space: nowrap;
  transition: color 0.2s;
  display: block;
}
.nav-links > li > a:hover { color: var(--teal); }

.nav-links > .nav-shop > a,
.nav-links > li:last-child > a {
  background: var(--teal);
  color: var(--white) !important;
  padding: 9px 20px;
  transition: background 0.2s !important;
}
.nav-links > .nav-shop > a:hover,
.nav-links > li:last-child > a:hover {
  background: var(--teal-dark) !important;
}

/* ── DROPDOWN SUBMENUS ──────────────────────────────── */
.nav-links > li > ul.sub-menu {
  display: block;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 2px solid var(--teal);
  box-shadow: 0 12px 40px rgba(26,43,44,0.10);
  z-index: 9999;
  padding: 8px 0;
  list-style: none;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.35s;
  pointer-events: none;
}


.nav-links > li:hover > ul.sub-menu,
.nav-links > li:focus-within > ul.sub-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}

.nav-links > li > ul.sub-menu > li {
  display: block;
  width: 100%;
  position: static;
}

.nav-links > li > ul.sub-menu > li > a {
  display: block;
  padding: 11px 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--mid);
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s, color 0.15s;
}

.nav-links > li > ul.sub-menu > li:last-child > a {
  border-bottom: none;
}

.nav-links > li > ul.sub-menu > li > a:hover {
  background: var(--teal-pale);
  color: var(--teal);
}

/* Chevron on parent items that have sub-menus */
.nav-links > li:has(> ul.sub-menu) > a::after {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 5px;
  vertical-align: middle;
  opacity: 0.5;
  transition: transform 0.18s;
}
.nav-links > li:has(> ul.sub-menu):hover > a::after {
  transform: rotate(180deg);
  opacity: 1;
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-toggle .bar {
  width: 24px; height: 2px;
  background: var(--near-black);
  transition: all 0.3s;
  display: block;
}
.nav-toggle.active .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active .bar:nth-child(2) { opacity: 0; }
.nav-toggle.active .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── HERO ────────────────────────────────────────────── */
.tfp-hero { background: var(--white); }
.hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 72px 52px;
  display: grid;
  grid-template-columns: minmax(0, max-content) 1fr;
  gap: 72px;
  align-items: center;
}
/* The cycle dial: sits on the "The" line of the title, sized in em
   so it scales with the type and always hugs the text */
.hero-the { display: flex; align-items: center; }
.hero-dial-inline {
  display: inline-block;
  width: 1.12em;
  margin-left: 1.25em;
  transform: translateY(10%);
}
.hero-dial-inline svg { width: 100%; height: auto; display: block; }

.hero-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--mauve);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow-line {
  width: 32px; height: 1.5px;
  background: var(--mauve);
  display: block; flex-shrink: 0;
}

.hero-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(3.8rem, 6vw, 6.8rem);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.01em;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
.hero-title .hero-the      { color: var(--near-black); }
.hero-title .hero-fertility { color: var(--teal); }
.hero-title .hero-protocol  { color: var(--near-black); }
.hero-title .logo-dot       { color: var(--rose); }

.hero-handle {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  color: var(--mid);
}

.hero-rule {
  width: 48px; height: 2px;
  background: var(--mauve);
  margin-bottom: 24px;
}

.hero-sub {
  font-family: 'Lora', serif;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--mid);
  margin-bottom: 36px;
}

.hero-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── TICKER ──────────────────────────────────────────── */
.tfp-ticker {
  background: var(--near-black);
  padding: 20px 0;
  overflow: hidden;
  border-top: 2px solid var(--mauve);
}

.ticker-track {
  display: flex;
  white-space: nowrap;
  animation: ticker-roll 32s linear infinite;
}

.tk {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.63rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  padding: 0 20px;
  flex-shrink: 0;
  opacity: 0.85;
}
.tk-sep {
  color: var(--mauve);
  padding: 0 4px;
  flex-shrink: 0;
  font-size: 0.63rem;
}

@keyframes ticker-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── ABOUT / PROTOCOL ────────────────────────────────── */
.tfp-about { background: var(--white); }
.tfp-about .section-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.pull-quote {
  border-left: 3px solid var(--mauve);
  padding: 18px 22px;
  background: var(--mauve-pale);
  font-family: 'Lora', serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--near-black);
  margin-bottom: 24px;
}

.milestone-callout {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: var(--teal-pale);
  border: 1px solid rgba(47,111,115,0.15);
  padding: 14px 20px;
}
.milestone-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 300;
  color: var(--teal);
  line-height: 1;
}
.milestone-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  color: var(--teal);
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* Phase Cards */
.about-protocol { display: flex; flex-direction: column; gap: 12px; }

.phase-card {
  display: grid;
  grid-template-columns: 4px 1fr;
  background: var(--white);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
}
.phase-card:hover {
  transform: translateX(5px);
  border-color: var(--phase-colour);
}
.phase-bar { display: block; }
.phase-body { padding: 20px 22px; }
.phase-tag {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 4px;
}
.phase-name {
  font-family: 'Lora', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--near-black);
  margin-bottom: 5px;
}
.phase-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.87rem;
  line-height: 1.65;
  font-weight: 300;
  color: var(--mid);
}

/* "On this site" pill links in the homepage intro */
.story-find { margin-top: 10px; }
.story-find-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--mauve);
  margin-bottom: 14px;
}
.story-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.story-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 999px;
  padding: 13px 24px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.87rem;
  font-weight: 500;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.story-links a:hover { transform: translateX(4px); }
.story-link-arrow {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s;
}
.story-links a:hover .story-link-arrow { transform: translateX(4px); }
/* brand colour rotation */
.story-links li:nth-child(4n+1) a { background: var(--teal-pale);  color: var(--teal-dark); }
.story-links li:nth-child(4n+1) a:hover { background: var(--teal); color: var(--white); }
.story-links li:nth-child(4n+2) a { background: var(--sage-pale);  color: var(--sage-dark); }
.story-links li:nth-child(4n+2) a:hover { background: var(--sage); color: var(--white); }
.story-links li:nth-child(4n+3) a { background: var(--rose-pale);  color: var(--rose-dark); }
.story-links li:nth-child(4n+3) a:hover { background: var(--rose-dark); color: var(--white); }
.story-links li:nth-child(4n+4) a { background: var(--mauve-pale); color: var(--mauve-dark); }
.story-links li:nth-child(4n+4) a:hover { background: var(--mauve); color: var(--white); }

/* ── RESULTS BANNER ──────────────────────────────────── */
.tfp-banner { background: var(--sage-pale); border-top: 1px solid rgba(122,158,142,0.2); border-bottom: 1px solid rgba(122,158,142,0.2); }
.tfp-banner .section-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding-top: 80px;
  padding-bottom: 80px;
}
.banner-heading { font-size: clamp(2rem, 3.2vw, 3.4rem); line-height: 1.15; }
.banner-right { display: flex; flex-direction: column; gap: 22px; }
.banner-point { display: flex; gap: 16px; align-items: flex-start; }
.bp-sym {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--sage-dark);
  flex-shrink: 0;
  line-height: 1.2;
  width: 32px;
}
.bp-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  font-weight: 300;
  color: var(--mid);
}
.bp-text strong {
  font-weight: 500;
  color: var(--near-black);
  display: block;
  margin-bottom: 2px;
}

/* ── SHOP PREVIEW ────────────────────────────────────── */
.tfp-shop-preview { background: var(--white); }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.product-card {
  background: var(--white);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
}
.product-card:hover { transform: translateY(-6px); box-shadow: 0 24px 56px rgba(26,43,44,0.09); }

.product-card-top {
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
}
.product-tag {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 3px 8px;
  margin-bottom: 10px;
  display: inline-block;
}
.product-card-title {
  font-family: 'Lora', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.25;
}

.product-card-body { padding: 24px 22px; }
.product-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.87rem;
  line-height: 1.75;
  font-weight: 300;
  color: var(--mid);
  margin-bottom: 18px;
}
.product-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.2rem;
  font-weight: 300;
  color: var(--teal);
  margin-bottom: 16px;
  line-height: 1;
}
.product-card .price { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 300; color: var(--teal); }

.product-btn {
  display: block;
  width: 100%;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 13px;
  text-align: center;
  color: var(--white);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}
.product-btn:hover { opacity: 0.88; color: var(--white); }

/* ── RECOMMENDED ─────────────────────────────────────── */
.tfp-recommended { background: var(--offwhite); }
.rec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.rec-card {
  background: var(--white);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  display: block;
  text-decoration: none;
}
.rec-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(26,43,44,0.08); }
.rec-card-top { height: 100px; }
.rec-card-body { padding: 16px 18px 20px; }
.rec-card-name {
  font-family: 'Lora', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--near-black);
  margin-bottom: 6px;
}
.rec-card-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.83rem;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.55;
}

/* ── PANTRY & WORKSHOP ───────────────────────────────── */
.tfp-pantry { background: var(--white); }
.pantry-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 64px;
}
.pantry-quote {
  font-family: 'Lora', serif;
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--mid);
}

.recipe-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.recipe-card {
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  display: block;
  text-decoration: none;
  background: var(--white);
}
.recipe-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(26,43,44,0.08); }

.recipe-top {
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  background-size: cover;
  background-position: center;
}
.recipe-badge {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.2);
  color: var(--near-black);
  padding: 3px 8px;
  display: inline-block;
  margin-bottom: 8px;
}
.dark-top .recipe-badge,
.dark-top .recipe-name { color: var(--white); }
.dark-top .recipe-badge { background: rgba(255,255,255,0.2); }

.recipe-name {
  font-family: 'Lora', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--near-black);
  line-height: 1.25;
}

.recipe-body { padding: 20px; background: var(--white); }
.recipe-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.65;
  margin-bottom: 12px;
}
.recipe-link {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 500;
  transition: color 0.2s;
}
.recipe-card:hover .recipe-link { color: var(--teal-dark); }

/* ── BLOG PREVIEW ────────────────────────────────────── */
.tfp-blog-preview { background: var(--offwhite); }
.blog-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 20px;
  margin-top: 48px;
}
.blog-card {
  background: var(--white);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(26,43,44,0.08); }
.blog-card-link { display: block; text-decoration: none; color: inherit; }

.blog-img {
  height: 188px;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  background-size: cover;
  background-position: center;
}
.blog-card--featured .blog-img { height: 244px; }
.blog-tag {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  background: rgba(0,0,0,0.22);
  padding: 4px 9px;
}
.blog-body { padding: 24px 20px; }
.blog-title {
  font-family: 'Lora', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--near-black);
  line-height: 1.45;
  margin-bottom: 10px;
}
.blog-card--featured .blog-title { font-size: 1.25rem; }
.blog-excerpt {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.86rem;
  line-height: 1.7;
  font-weight: 300;
  color: var(--mid);
  margin-bottom: 16px;
}
.blog-read {
  display: block;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.63rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  transition: opacity 0.2s;
}
.blog-card:hover .blog-read { opacity: 0.75; }

/* ── NEWSLETTER ──────────────────────────────────────── */
.tfp-newsletter { background: var(--teal-dark); }
.tfp-newsletter .section-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding-top: 96px;
  padding-bottom: 96px;
}
.nl-heading {
  font-family: 'Lora', serif;
  font-size: clamp(2.2rem, 3.2vw, 3.6rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 18px;
}
.nl-heading .text-mauve { color: var(--mauve); }
.nl-heading .logo-dot   { color: var(--rose); }
.nl-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  line-height: 1.8;
  font-weight: 300;
  color: rgba(255,255,255,0.55);
}
.nl-form { display: flex; flex-direction: column; gap: 12px; }
.nl-input {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  padding: 16px 20px;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}
.nl-input::placeholder { color: rgba(255,255,255,0.3); }
.nl-input:focus { border-color: var(--mauve); }
.nl-btn {
  background: var(--mauve);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 18px;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  width: 100%;
}
.nl-btn:hover { background: var(--mauve-dark); }
.nl-note {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.64rem;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.05em;
}

/* ── FOOTER ──────────────────────────────────────────── */
.tfp-footer { background: var(--near-black); }
.footer-inner { max-width: 1280px; margin: 0 auto; padding: 72px 72px 32px; }
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 48px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-logo {
  font-family: 'Lora', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 14px;
}
.footer-logo .logo-dot { color: var(--rose); }
.footer-tagline {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  line-height: 1.8;
  font-weight: 300;
  color: rgba(255,255,255,0.35);
  max-width: 220px;
  margin-bottom: 20px;
}
.footer-social {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mauve);
  font-weight: 500;
}
.footer-col-heading {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
  margin-bottom: 18px;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; }
.footer-links a {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.84rem;
  font-weight: 300;
  color: rgba(255,255,255,0.5);
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--mauve); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; }
.footer-copy, .footer-domains {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  color: rgba(255,255,255,0.2);
  font-weight: 300;
}

/* ── BLOG / SINGLE / PAGE TEMPLATES ─────────────────── */
.tfp-main .section-inner { padding-top: 60px; padding-bottom: 80px; }
.blog-card-full { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--border); }
.post-title { font-size: 1.5rem; margin-bottom: 8px; }
.post-title a { color: var(--near-black); }
.post-title a:hover { color: var(--teal); }
.post-meta { font-family: 'DM Sans', sans-serif; font-size: 0.75rem; color: var(--mid); margin-bottom: 12px; }
.post-excerpt { font-family: 'DM Sans', sans-serif; font-size: 0.9rem; color: var(--mid); line-height: 1.7; }

.single-post-content { max-width: 920px; margin: 0 auto; }
.single-post-content h1 { font-size: clamp(2rem,3.5vw,3rem); margin-bottom: 20px; }
.single-post-content p { margin-bottom: 20px; font-family: 'Lora', serif; font-size: 1rem; line-height: 1.85; color: var(--mid); }
.single-post-content h2 { font-size: 1.5rem; margin: 40px 0 16px; }
.single-post-content h3 { font-size: 1.2rem; margin: 32px 0 12px; }
.single-post-content ul, .single-post-content ol { padding-left: 24px; margin-bottom: 20px; }
.single-post-content li { margin-bottom: 8px; font-family: 'DM Sans', sans-serif; color: var(--mid); }

.page-content { max-width: 1120px; margin: 0 auto; }
.page-content h1 { font-size: clamp(2rem,3.5vw,3rem); margin-bottom: 24px; }
.page-body {
  font-family: 'Lora', serif;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--mid);
}
.page-body p { margin-bottom: 18px; }


/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .section-inner { padding: 80px 48px; }
  .hero-inner { padding: 48px 48px 44px; gap: 48px; }
  .footer-inner { padding: 60px 48px 28px; }
  .footer-top { grid-template-columns: 1fr 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
  .rec-grid { grid-template-columns: repeat(4,1fr); }
}

@media (max-width: 960px) {
  .nav-inner { padding: 0 24px; }
  .nav-toggle { display: flex; }

  .nav-links {
    display: none;
    position: fixed;
    top: 70px; left: 0; right: 0;
    background: var(--white);
    flex-direction: column;
    padding: 16px 0;
    gap: 0;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    overflow-y: auto;
    max-height: calc(100vh - 70px);
  }
  .nav-links.open { display: flex; }

  .nav-links > li { border-bottom: 1px solid var(--border); width: 100%; }
  .nav-links > li > a { display: block; padding: 14px 24px; font-size: 0.8rem; }
  .nav-links > .nav-shop > a,
  .nav-links > li:last-child > a { background: none; padding: 14px 24px; color: var(--teal) !important; }
  .nav-links > li { height: auto; display: block; }

  /* Mobile: submenus stack below parent, hidden until toggled */
  .nav-links > li > ul.sub-menu {
    position: static;
    visibility: visible;
    opacity: 1;
    transform: none;
    box-shadow: none;
    border: none;
    border-top: none;
    border-left: 3px solid var(--teal-pale);
    padding: 0;
    margin: 0 0 0 24px;
    min-width: 0;
    display: none;
    pointer-events: auto;
    transition: none;
  }
  .nav-links > li > ul.sub-menu.mobile-open { display: block; }
  .nav-links > li.menu-item-has-children.open > ul.sub-menu { display: block; }
  .nav-links > li > ul.sub-menu > li > a {
    font-size: 0.75rem;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
  }
  .nav-links > li:has(> ul.sub-menu) > a::after { display: none; }

  .hero-inner { grid-template-columns: 1fr; gap: 32px; padding: 48px 24px 40px; }
  .tfp-about .section-inner,
  .tfp-banner .section-inner,
  .pantry-intro { grid-template-columns: 1fr; gap: 40px; }
  .section-inner { padding: 60px 24px; }
  .shop-grid,
  .recipe-grid,
  .blog-grid { grid-template-columns: 1fr; }
  .tfp-newsletter .section-inner { grid-template-columns: 1fr; gap: 36px; }
  .rec-grid { grid-template-columns: 1fr 1fr; }
  .footer-inner { padding: 48px 24px 24px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

@media (max-width: 560px) {
  .hero-title { font-size: clamp(3rem, 12vw, 3.8rem); }
  .rec-grid { grid-template-columns: 1fr; }
  .hero-buttons { flex-direction: column; }
  .hero-buttons .btn { text-align: center; }
}

/* ── ANIMATIONS ──────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-eyebrow { animation: fadeUp 0.7s ease both 0.1s; }
.hero-title   { animation: fadeUp 0.7s ease both 0.2s; }
.hero-handle  { animation: fadeUp 0.5s ease both 0.3s; }
.hero-rule    { animation: fadeUp 0.5s ease both 0.35s; }
.hero-sub     { animation: fadeUp 0.7s ease both 0.4s; }
.hero-buttons { animation: fadeUp 0.7s ease both 0.5s; }

/* ── BLOCK CONTENT POLISH (pages and posts) ──────────
   Automatic styling for editor blocks, so tinted cards,
   columns, lists, tables, buttons and separators look
   designed with zero manual styling. */

/* tinted cards pad and round themselves */
.page-body .wp-block-group.has-background,
.single-post-content .wp-block-group.has-background {
  padding: 26px 30px;
  border-radius: 10px;
  margin: 0 0 26px;
}
.page-body .wp-block-column.has-background,
.single-post-content .wp-block-column.has-background {
  padding: 26px 26px 30px;
  border-radius: 10px;
}

/* columns breathe */
.page-body .wp-block-columns,
.single-post-content .wp-block-columns {
  gap: 20px;
  margin: 0 0 26px;
}

/* headings sit correctly inside cards and on the page */
.page-body h2 { font-size: 1.5rem; margin: 38px 0 14px; }
.page-body h3 { font-size: 1.15rem; margin: 30px 0 10px; }
.page-body .has-background h2:first-child,
.page-body .has-background h3:first-child,
.single-post-content .has-background h2:first-child,
.single-post-content .has-background h3:first-child { margin-top: 0; }
.page-body .has-background > :last-child,
.single-post-content .has-background > :last-child { margin-bottom: 0; }

/* body copy and lists */
.page-body p { margin-bottom: 18px; }
.page-body ul, .page-body ol { padding-left: 22px; margin: 0 0 20px; }
.page-body li { margin-bottom: 10px; line-height: 1.75; }
.page-body li:last-child { margin-bottom: 0; }

/* separators render as brand hairlines */
.page-body hr.wp-block-separator,
.single-post-content hr.wp-block-separator {
  border: none;
  border-top: 1px solid #E4E1DB;
  margin: 44px 0;
  width: 100%;
  background: none;
  height: 0;
}

/* images: soft corners, styled captions */
.page-body .wp-block-image img,
.single-post-content .wp-block-image img { border-radius: 10px; }
.page-body figcaption,
.single-post-content figcaption {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  color: var(--mid);
  letter-spacing: 0.04em;
  margin-top: 8px;
}

/* quotes match the brand pull-quote */
.page-body blockquote:not(.pull-quote),
.single-post-content blockquote:not(.pull-quote) {
  border-left: 3px solid var(--mauve);
  padding: 18px 22px;
  background: var(--mauve-pale);
  border-radius: 0 10px 10px 0;
  font-family: 'Lora', serif;
  margin: 0 0 26px;
}
.page-body blockquote p:last-child { margin-bottom: 0; }

/* tables (e.g. the Recommendations summary) */
.page-body .wp-block-table table,
.single-post-content .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
}
.page-body .wp-block-table th,
.single-post-content .wp-block-table th {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--white);
  background: var(--teal-dark);
  text-align: left;
  padding: 12px 16px;
  border: none;
}
.page-body .wp-block-table td,
.single-post-content .wp-block-table td {
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid #E4E1DB;
}
.page-body .wp-block-table tr:nth-child(even) td { background: var(--offwhite); }
.page-body .wp-block-table a { color: var(--teal); font-weight: 500; }

/* buttons take the brand button style */
.page-body .wp-block-button__link:not([class*="background-color"]):not(.is-style-outline .wp-block-button__link),
.single-post-content .wp-block-button__link:not([class*="background-color"]):not(.is-style-outline .wp-block-button__link) {
  background: var(--teal);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 15px 30px;
  border-radius: 0;
  border: none;
  transition: background 0.2s;
}
.page-body .wp-block-button__link:not([class*="background-color"]):hover,
.single-post-content .wp-block-button__link:not([class*="background-color"]):hover { background: var(--teal-dark); }
.page-body .wp-block-button__link,
.single-post-content .wp-block-button__link {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 15px 30px;
  border-radius: 0;
}
.page-body .is-style-outline .wp-block-button__link,
.single-post-content .is-style-outline .wp-block-button__link {
  background: transparent;
  border: 1.5px solid currentColor;
}

/* Cover banners: page header treatment */
.page-body .wp-block-cover {
  margin-bottom: 44px;
  padding: 64px 24px;
}
.page-body .wp-block-cover h1,
.page-body .wp-block-cover h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.8rem, 5vw, 4.4rem);
  color: var(--white);
  line-height: 1.05;
  margin: 0 0 8px;
}
.page-body .wp-block-cover p {
  color: #C9D6D6;
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  max-width: 560px;
}
.tfp-eyebrow-light {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.63rem !important;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 500;
  color: #C6DAD8 !important;
  max-width: none !important;
}

/* white cards with a coloured phase edge keep a hairline frame */
.page-body .wp-block-column.has-white-background-color {
  border: 1px solid rgba(26,43,44,0.09);
}

/* mobile: cards keep comfortable padding */
@media (max-width: 560px) {
  .page-body .wp-block-group.has-background,
  .single-post-content .wp-block-group.has-background { padding: 20px 18px; }
  .page-body .wp-block-column.has-background { padding: 20px 18px 22px; }
}

/* ── ALIGNMENT AND BAND FIXES ──────────────────────────
   Kept at the end of the file on purpose: these must win
   the cascade over the generic block rules above. */
.page-body .alignwide,
.single-post-content .alignwide {
  width: 100%;
  max-width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none;
}
.page-body .alignfull,
.single-post-content .alignfull {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
  transform: none;
}

/* full-width tinted bands: square corners, generous padding,
   and their content centred to the page column */
.page-body .wp-block-group.alignfull.has-background,
.single-post-content .wp-block-group.alignfull.has-background {
  border-radius: 0;
  padding: 64px 24px;
}
.page-body .wp-block-group.alignfull.has-background > *,
.single-post-content .wp-block-group.alignfull.has-background > * {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

/* banner cover: sits flush under the nav, content centred to the page column */
.page-body > .wp-block-cover:first-child { margin-top: -60px; }
.page-body .wp-block-cover .wp-block-cover__inner-container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

/* lead paragraphs breathe */
.page-body .has-large-font-size,
.single-post-content .has-large-font-size { line-height: 1.8; }

/* ── DETAILS (accordion) BLOCKS ────────────────────── */
.page-body .wp-block-details,
.single-post-content .wp-block-details {
  border-radius: 10px;
  padding: 4px 26px;
  margin-bottom: 12px;
}
.page-body .wp-block-details summary,
.single-post-content .wp-block-details summary {
  font-family: 'Lora', serif;
  font-weight: 700;
  color: var(--near-black);
  font-size: 1.02rem;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
}
.page-body .wp-block-details summary::-webkit-details-marker { display: none; }
.page-body .wp-block-details summary::after,
.single-post-content .wp-block-details summary::after {
  content: '+';
  float: right;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--teal);
}
.page-body .wp-block-details[open] summary::after,
.single-post-content .wp-block-details[open] summary::after { content: '\2212'; }
.page-body .wp-block-details[open] { padding-bottom: 22px; }
.page-body .wp-block-details > *:not(summary) { margin-bottom: 14px; }
.page-body .wp-block-details > *:last-child { margin-bottom: 0; }

/* library rows: compact two line cards */
.page-body .tfp-library-row { gap: 22px; }
.page-body .tfp-library-row .wp-block-column p { margin-bottom: 5px; }
.page-body .tfp-library-row img { border-radius: 8px; }

/* jump-to lists inside tinted groups */
.page-body .wp-block-group.has-background ul.wp-block-list li { margin-bottom: 12px; }

/* ── NUMBERED STEP TIMELINE (.tfp-steps group) ───────
   Flex + baseline alignment: the numeral sits on the same
   baseline as the heading text regardless of font size. */
.page-body .tfp-steps {
  counter-reset: tfpstep;
  border-left: 1px solid #E4E1DB;
  padding-left: 66px;
  margin: 30px 0 30px 24px;
}
.page-body .tfp-steps h3 {
  display: flex;
  align-items: baseline;
  margin: 32px 0 6px -66px;
  font-size: 1.06rem;
}
.page-body .tfp-steps h3:first-child { margin-top: 0; }
.page-body .tfp-steps h3::before {
  counter-increment: tfpstep;
  content: counter( tfpstep, decimal-leading-zero );
  flex: 0 0 66px;
  width: 66px;
  padding-right: 18px;
  text-align: right;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 300;
  color: var(--teal);
  line-height: 1;
}
.page-body .tfp-steps p {
  font-family: 'DM Sans', sans-serif;
  font-size: .9rem;
  font-weight: 300;
  line-height: 1.75;
  margin-bottom: 0;
}
.page-body .tfp-steps p.has-deep-teal-color {
  border-left: 2px solid var(--teal-pale);
  padding-left: 14px;
  margin-top: 10px;
}
@media (max-width: 640px) {
  .page-body .tfp-steps { padding-left: 0; margin-left: 0; border-left: none; }
  .page-body .tfp-steps h3 { display: block; margin-left: 0; }
  .page-body .tfp-steps h3::before { display: block; width: auto; text-align: left; padding: 0; margin-bottom: 2px; }
}

/* ── JUMP TO pills ─────────────────────────────────── */
.page-body ul.tfp-jump {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.page-body ul.tfp-jump li { margin: 0; }
.page-body ul.tfp-jump li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-radius: 999px;
  padding: 14px 24px;
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.35;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.page-body ul.tfp-jump li a::after {
  content: '\2193';
  font-size: 1rem;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.page-body ul.tfp-jump li a:hover { transform: translateY(2px); }
.page-body ul.tfp-jump li a:hover::after { transform: translateY(3px); }
.page-body ul.tfp-jump li a { background: #F4F1EC; color: var(--near-black); }
.page-body ul.tfp-jump li a:hover { background: var(--teal); color: var(--white); }
.page-body ul.tfp-jump li:last-child a::after { content: '\203A'; font-size: 1.3rem; }
@media (max-width: 640px) {
  .page-body ul.tfp-jump { grid-template-columns: 1fr; }
}

/* ── PHASE FLOW CARDS (inside accordions) ──────────── */
.page-body .tfp-phase-card {
  padding: 20px 24px !important;
  border-radius: 0 10px 10px 0;
  margin-bottom: 0 !important;
}
.page-body .tfp-phase-card h3 {
  margin: 2px 0 6px;
  font-size: 1.08rem;
}
.page-body .tfp-phase-card p {
  font-family: 'DM Sans', sans-serif;
  font-size: .87rem;
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: 0;
}
.page-body p.tfp-flow-arrow {
  font-size: 1.4rem;
  line-height: 1;
  color: var(--mid);
  opacity: .45;
  margin: 10px 0 !important;
}

/* ── CONCEPTION STAGE CARDS ────────────────────────── */
.page-body .tfp-stage {
  padding: 24px 26px !important;
  border-radius: 0 0 10px 10px;
  margin-bottom: 0 !important;
  box-shadow: 0 8px 24px rgba(26,43,44,.05);
}
.page-body .tfp-stage h3 { margin: 2px 0 8px; font-size: 1.2rem; }
.page-body .tfp-stage > p {
  font-family: 'DM Sans', sans-serif;
  font-size: .89rem;
  font-weight: 300;
  line-height: 1.72;
}
.page-body ul.tfp-stage-facts {
  list-style: none;
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid #E4E1DB;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.page-body ul.tfp-stage-facts li {
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  font-weight: 300;
  line-height: 1.6;
  margin: 0;
}
.page-body ul.tfp-stage-facts li strong {
  display: block;
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--mid);
  margin-bottom: 3px;
}

/* ── CYCLE SYNCING phase grids ─────────────────────── */
.page-body .tfp-phase-grid { gap: 12px !important; margin-bottom: 12px !important; }
.page-body .tfp-phase-grid .wp-block-column { padding: 18px 20px !important; border-radius: 10px; }
.page-body .tfp-phase-grid .wp-block-column p.tfp-cat-label {
  font-size: .82rem !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--near-black);
  margin: 0 0 8px;
}
.page-body .tfp-phase-grid .wp-block-column figure.tfp-cat-icon {
  margin: 0 0 8px;
}
.page-body .tfp-phase-grid .wp-block-column figure.tfp-cat-icon img {
  width: 34px;
  height: auto;
  border-radius: 0;
}
.page-body .tfp-phase-grid .wp-block-column p:last-child {
  font-family: 'DM Sans', sans-serif;
  font-size: .84rem;
  font-weight: 300;
  line-height: 1.65;
  margin-bottom: 0;
}
@media (max-width: 640px) {
  .page-body ul.tfp-stage-facts { grid-template-columns: 1fr; gap: 10px; }
}

/* conception stage table: roomier rows, tighter meta columns */
.page-body .tfp-stage-table td:first-child { white-space: nowrap; }
.page-body .tfp-stage-table td:nth-child(n+3) {
  font-size: .8rem;
  color: var(--mid);
}
@media (max-width: 700px) {
  .page-body .tfp-stage-table table { font-size: .8rem; }
  .page-body .tfp-stage-table th, .page-body .tfp-stage-table td { padding: 9px 10px; }
}

/* card image tops (homepage recommended + recipe cards) */
.rec-card-top, .recipe-top, .product-card-top {
  background-size: cover;
  background-position: center;
}

/* jump pills: colour rotation restored, arrows always down */
.page-body ul.tfp-jump li a { background: #F4F1EC; color: var(--near-black); }
.page-body ul.tfp-jump li:nth-child(4n+1) a { background: var(--teal-pale);  color: var(--teal-dark); }
.page-body ul.tfp-jump li:nth-child(4n+1) a:hover { background: var(--teal); color: #fff; }
.page-body ul.tfp-jump li:nth-child(4n+2) a { background: var(--sage-pale);  color: var(--sage-dark); }
.page-body ul.tfp-jump li:nth-child(4n+2) a:hover { background: var(--sage); color: #fff; }
.page-body ul.tfp-jump li:nth-child(4n+3) a { background: var(--rose-pale);  color: var(--rose-dark); }
.page-body ul.tfp-jump li:nth-child(4n+3) a:hover { background: var(--rose-dark); color: #fff; }
.page-body ul.tfp-jump li:nth-child(4n+4) a { background: var(--mauve-pale); color: var(--mauve-dark); }
.page-body ul.tfp-jump li:nth-child(4n+4) a:hover { background: var(--mauve); color: #fff; }
.page-body ul.tfp-jump li:last-child a::after { content: '\2193'; font-size: 1rem; }

/* accordions under a section can be forced neutral */
.page-body .wp-block-details.has-neutral-tint-background-color { background: #F4F1EC !important; }

/* journey steps: coloured indented notes */
.page-body .tfp-steps p.tfp-note {
  background: var(--teal-pale);
  border-left: 3px solid var(--teal);
  padding: 12px 16px;
  margin-top: 12px;
  border-radius: 0 8px 8px 0;
  font-size: .85rem;
  color: var(--teal-dark);
}

/* every day recipes card rows */
.page-body .tfp-recipe-row { gap: 26px !important; margin-bottom: 34px !important; }
.page-body .tfp-recipe-row h3 { margin: 4px 0 6px; font-size: 1.05rem; }
.page-body .tfp-recipe-row p { font-size: .86rem; }

/* ===== COSMETIC POLISH v1.0.3 (rebuilt pages + new homepage rows only) ===== */
:is(.page-id-36,.page-id-117,.page-id-120,.page-id-121,.page-id-236,.page-id-242) .formkit-form{max-width:640px !important;margin-left:auto !important;margin-right:auto !important;border:1px solid #E7E1D8;border-radius:8px;}
:is(.page-id-36,.page-id-117,.page-id-120,.page-id-121,.page-id-236,.page-id-242) .formkit-form [data-style="minimal"]{padding:20px 22px !important;}
:is(.page-id-36,.page-id-117,.page-id-120,.page-id-121,.page-id-236,.page-id-242) .formkit-form .formkit-header h1,:is(.page-id-36,.page-id-117,.page-id-120,.page-id-121,.page-id-236,.page-id-242) .formkit-form .formkit-header h2{font-size:20px !important;margin-bottom:4px !important;}
:is(.page-id-36,.page-id-117,.page-id-120,.page-id-121,.page-id-236,.page-id-242) .formkit-form .formkit-subheader,:is(.page-id-36,.page-id-117,.page-id-120,.page-id-121,.page-id-236,.page-id-242) .formkit-form .formkit-subheader p{font-size:13.5px !important;margin:4px 0 10px !important;}
:is(.page-id-36,.page-id-117,.page-id-120,.page-id-121,.page-id-236,.page-id-242) .formkit-form .formkit-input{padding:9px 12px !important;font-size:14px !important;}
:is(.page-id-36,.page-id-117,.page-id-120,.page-id-121,.page-id-236,.page-id-242) .formkit-form .formkit-guarantee{font-size:11.5px !important;margin-top:4px !important;}
:is(.page-id-36,.page-id-117,.page-id-120,.page-id-121,.page-id-236,.page-id-242) .formkit-form .formkit-background{display:none !important;}
:is(.page-id-36,.page-id-117,.page-id-120,.page-id-121,.page-id-236,.page-id-242) .page-body > h2.wp-block-heading{margin-top:2.4em;margin-bottom:.6em;}
:is(.page-id-36,.page-id-117,.page-id-120,.page-id-121,.page-id-236,.page-id-242) .page-body > p + .wp-block-columns{margin-top:1.4em;}
:is(.page-id-36,.page-id-117,.page-id-120,.page-id-121,.page-id-236,.page-id-242) .page-body > .wp-block-group{margin-top:2em;margin-bottom:2em;border-radius:10px;}
:is(.page-id-36,.page-id-117,.page-id-120,.page-id-121,.page-id-236,.page-id-242) .page-body > .wp-block-group.alignfull{border-radius:0;}
:is(.page-id-36,.page-id-117,.page-id-120,.page-id-121,.page-id-236,.page-id-242) .page-body > .wp-block-separator{margin:2.6em auto;max-width:120px;opacity:.5;}
:is(.page-id-36,.page-id-117,.page-id-120,.page-id-121,.page-id-236,.page-id-242) .wp-block-details{border-radius:10px;padding:14px 18px;margin-bottom:14px;}
:is(.page-id-36,.page-id-117,.page-id-120,.page-id-121,.page-id-236,.page-id-242) .wp-block-details summary{cursor:pointer;font-weight:700;padding:4px 0;}
:is(.page-id-36,.page-id-117,.page-id-120,.page-id-121,.page-id-236,.page-id-242) .wp-block-table table{border-collapse:collapse;width:100%;}
:is(.page-id-36,.page-id-117,.page-id-120,.page-id-121,.page-id-236,.page-id-242) .wp-block-table th{background:#E7EFEF;font-family:"DM Sans",sans-serif;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;padding:10px 12px;text-align:left;}
:is(.page-id-36,.page-id-117,.page-id-120,.page-id-121,.page-id-236,.page-id-242) .wp-block-table td{padding:10px 12px;border-bottom:1px solid #E3DED6;}
:is(.page-id-36,.page-id-117,.page-id-120,.page-id-121,.page-id-236,.page-id-242) .wp-block-buttons{margin-top:1.2em;}
@media (max-width:700px){
 .tfp-finder-band .section-inner{flex-direction:column;align-items:flex-start;}
 .tfp-track-row .section-inner > div{flex-direction:column;}
 :is(.page-id-36,.page-id-117,.page-id-120,.page-id-121,.page-id-236,.page-id-242) .page-body > h2.wp-block-heading{margin-top:1.8em;}
}

/* ===== DESKTOP BREATHE PASS v1.1.1 ===== */
@media (min-width:1200px){
  .page-content{max-width:1240px;}
  .page-body .wp-block-cover .wp-block-cover__inner-container,
  .page-body .wp-block-group.alignfull.has-background > *{max-width:1240px;}
  .page-body .wp-block-columns,.single-post-content .wp-block-columns{gap:56px;}
  .page-body .wp-block-columns.tfp-recipe-row{gap:28px;}
  .page-body .wp-block-cover{padding:84px 24px;margin-bottom:56px;}
  .page-body h2{margin-top:52px;font-size:1.65rem;}
  .page-body .wp-block-group.has-background{padding:34px 38px;}
  .page-body .wp-block-column.has-background{padding:30px 32px 34px;}
  .page-body .wp-block-group.alignfull.has-background{padding:76px 24px;}
}
@media (min-width:1440px){
  .page-content{max-width:1320px;}
  .page-body .wp-block-cover .wp-block-cover__inner-container,
  .page-body .wp-block-group.alignfull.has-background > *{max-width:1320px;}
  .page-body .wp-block-columns,.single-post-content .wp-block-columns{gap:70px;}
  .page-body .wp-block-columns.tfp-recipe-row{gap:32px;}
}


/* ===== DESIGN FEEDBACK PASS v1.2 ===== */
/* (4) Current page highlight, sage tint. Last item is the Tracker CTA, excluded. */
.tfp-nav .nav-links li.current-menu-item:not(:last-child) > a,
.tfp-nav .nav-links li.current_page_item:not(:last-child) > a{
  background:#DFE9E0; color:#1A2B2C; border-radius:999px; padding:8px 14px;
}

/* (1) Protocol top 50/50 balance */
.page-id-36 .rc-stage{margin-inline:auto;}
@media (min-width:1200px){
  .page-id-36 .page-body > .wp-block-columns:first-of-type > .wp-block-column:first-child{flex-basis:56%;}
  .page-id-36 .page-body > .wp-block-columns:first-of-type > .wp-block-column:last-child{flex-basis:44%;}
}

/* (2) Flip decks: fluid height, text never clips */
.rc-stage,.tfpd-stage{max-width:min(480px,100%);}
.page-id-36 .rc-stage{height:auto;}
.page-id-36 .rc-card{display:grid; height:auto; min-height:500px;}
.page-id-36 .rc-face{position:static; grid-area:1/1; height:100%;}
.tfpd-stage{height:auto;}
.tfpd-card{display:grid; height:auto; min-height:500px;}
.tfpd-face{position:static; grid-area:1/1; height:100%;}
@media (max-width:640px){
  .rc-face,.tfpd-face{padding:24px 20px;}
  .rc-face p,.rc-face li,.tfpd-face p,.tfpd-face li{font-size:clamp(12.5px,3.4vw,15px); line-height:1.55;}
  .tfpd-pts{margin-bottom:40px;}
}

/* (5) Homepage: drop phase column to align with the left heading */
@media (min-width:1024px){ .tfp-about .about-protocol{margin-top:64px;} }

/* Images conform to their card slots; the grid keeps its built dimensions */
img.tfp-img-slot-filled{height:180px !important; min-height:0 !important; width:100% !important; object-fit:cover !important;}
.tfp-card img.tfp-img-slot-filled{height:120px !important;}


/* v1.2.1 deck overrides at ID specificity (page styles use IDs) */
#rulesCarousel .rc-stage{margin-inline:auto; height:auto; max-width:min(440px,100%);}
#rulesCarousel .rc-card{aspect-ratio:auto; display:grid; height:auto; min-height:525px;}
#rulesCarousel .rc-face{position:static; grid-area:1/1; inset:auto; overflow:visible;}
#tfpDisruptors .tfpd-stage{height:auto; max-width:min(440px,100%);}
#tfpDisruptors .tfpd-card{aspect-ratio:auto; display:grid; height:auto; min-height:500px;}
#tfpDisruptors .tfpd-face{position:static; grid-area:1/1; inset:auto; overflow:visible;}
@media (max-width:640px){
  #rulesCarousel .rc-face,#tfpDisruptors .tfpd-face{padding:24px 20px;}
  #rulesCarousel .rc-card{min-height:480px;}
  #tfpDisruptors .tfpd-card{min-height:460px;}
}


/* ===== SPACING RHYTHM PASS v1.3 ===== */
/* Bottom signup form breathes from the content above it, site-wide */
.page-body .seva-form.formkit-form{margin-top:56px !important;}
/* Tracker: calendar and spreadsheet demo blocks off the grids above them */
#tfpCalDemo,#tfpSheetDemo{margin-top:44px !important;}
/* Homepage: For him note clears the phase cards */
.tfp-about .section-sub{margin-top:26px;}
@media (max-width:781px){
  .tfp-about .section-sub{margin-top:34px;}
  .page-body .seva-form.formkit-form{margin-top:40px !important;}
  #tfpCalDemo,#tfpSheetDemo{margin-top:34px !important;}
}


/* ===== TRACKER: two signup boxes, visually distinct ===== */
/* The app waitlist wears the brand teal so it reads as a different offer from the weekly guides */
form.formkit-form[data-uid="e42037e818"]{background-color:#E4EFEE !important;border:1px solid #C7DBD9;}
form.formkit-form[data-uid="e42037e818"] .formkit-submit{background-color:#2F5F62 !important;}
form.formkit-form[data-uid="e42037e818"] .formkit-submit span{color:#FFFFFF !important;}
/* the weekly guides box keeps the cream and mauve identity */
form.formkit-form[data-uid="e9e1cb70ec"]{border:1px solid #EADFD3;}
/* both boxes fill their column evenly */
.page-id-121 .wp-block-column .formkit-form{max-width:100% !important;width:100% !important;}
.page-id-121 .wp-block-column{display:flex;}
.page-id-121 .wp-block-column > *{width:100%;}

/* Tracker: strip the pattern wrapper so both signup boxes read as single cards */
.page-id-121 .wp-block-column .wp-block-group.has-neutral-tint-background-color{background:transparent !important;padding:0 !important;}
.page-id-121 .wp-block-column .formkit-form{margin:0 !important;}
.page-id-121 .wp-block-columns{align-items:flex-start;}

/* Tracker: equal height signup cards so the pair sits level */
.page-id-121 .wp-block-columns{align-items:stretch !important;}
.page-id-121 .wp-block-column{display:flex;flex-direction:column;}
.page-id-121 .wp-block-column > *{width:100%;flex:1 1 auto;display:flex;flex-direction:column;}
.page-id-121 .wp-block-column .formkit-form{flex:1 1 auto;display:flex !important;flex-direction:column;justify-content:center;}

/* Tracker: force both signup cards to the full column height */
.page-id-121 .wp-block-column > *{height:100% !important;}
.page-id-121 .wp-block-column .formkit-form{height:100% !important;box-sizing:border-box;}

/* Tracker: the column is the visible card, so the pair is always level */
.page-id-121 .wp-block-column{background:#FAF7F4;border:1px solid #EADFD3;border-radius:4px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;}
.page-id-121 .wp-block-column:first-child{background:#E4EFEE;border-color:#C7DBD9;}
.page-id-121 .wp-block-column .wp-block-group,.page-id-121 .wp-block-column .formkit-form{background:transparent !important;border:0 !important;box-shadow:none !important;height:auto !important;}

/* correction: card styling belongs only to the signup pair, not every column row */
.page-id-121 .wp-block-column{background:transparent;border:0;border-radius:0;overflow:visible;}
.page-id-121 .wp-block-columns:has(.formkit-form) > .wp-block-column{background:#FAF7F4;border:1px solid #EADFD3;border-radius:4px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;}
.page-id-121 .wp-block-columns:has(.formkit-form) > .wp-block-column:first-child{background:#E4EFEE;border-color:#C7DBD9;}

/* correction 2: clear the stray tint from non signup first columns */
.page-id-121 .wp-block-columns > .wp-block-column:first-child{background:transparent;border:0;border-radius:0;}
.page-id-121 .wp-block-columns:has(.formkit-form) > .wp-block-column:first-child{background:#E4EFEE;border:1px solid #C7DBD9;border-radius:4px;}

/* Recommendations: breathing room around the jump pills */
.page-id-120 #tfpRecTop > div:has(.tfp-bigpills){margin-top:44px;}
.page-id-120 #tfpRecTop .tfp-bigpills{margin-top:16px;}
.page-id-120 #tfpSwaps{margin-top:54px;}

/* ==========================================================
   SIGNUP DUO v1.4
   Free weekly-email Kit form (left) paired with the paid
   weekly recipe guides panel (right), on every page that
   shows the Kit embed. Colours sampled from the existing
   "First month free" panel on /weekly-recipe-guides/:
     panel background  #F1EBF4
     panel border      #E3D8EA
     button            #9B7FA6  (--mauve)
     button hover      #7A6085  (--mauve-dark)
     body text         #5A6B6C  (--mid)
     heading           #1A2B2C  (--near-black)
   ========================================================== */

.tfp-signup-duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch;max-width:1080px;width:100%;margin:56px auto 0;box-sizing:border-box;}

/* The Kit embed carries its own background and 4px radius inline, so the
   grid item IS the visible card (same technique proven on the Tracker page).
   Kit embeds resist percentage heights, so height stays auto and the grid
   stretch does the levelling; flex centres the content inside the card. */
.tfp-signup-duo > form.formkit-form,
.tfp-signup-duo > form.seva-form{margin:0 !important;width:100% !important;max-width:none !important;min-width:0;height:auto !important;align-self:stretch;display:flex !important;flex-direction:column;justify-content:center;box-sizing:border-box;overflow:hidden;}
.tfp-signup-duo > form.formkit-form > div{width:100%;box-sizing:border-box;}
.tfp-signup-duo > form.formkit-form .formkit-background{display:none !important;}

/* SIGNUP DUO v1.4 corrections */

/* An earlier rule sets .page-body .seva-form.formkit-form{margin-top:56px !important}
   which is more specific than the reset above and pushed the Kit card 56px
   below the guides panel. Re-reset it at higher specificity so the two
   columns start on the same line and finish level. */
.tfp-signup-duo > form.seva-form.formkit-form{margin:0 !important;margin-top:0 !important;margin-bottom:0 !important;}

/* Home page: the Kit embed lives in the right half of the two-column
   newsletter section, which leaves the pair only ~250px per column.
   Let that section stack so the duo gets the full section width. */
.tfp-newsletter .section-inner:has(.tfp-signup-duo){grid-template-columns:1fr;}
.tfp-newsletter .nl-left:has(~ .nl-right .tfp-signup-duo){max-width:720px;}
.tfp-newsletter .nl-right:has(.tfp-signup-duo){width:100%;}
.tfp-newsletter .nl-right .tfp-signup-duo{margin-top:8px;}

.tfp-signup-alt{background:#F1EBF4;border:1px solid #E3D8EA;border-radius:4px;padding:30px;margin:0;display:flex;flex-direction:column;justify-content:center;text-align:left;box-sizing:border-box;min-width:0;align-self:stretch;}

.tfp-signup-alt .tfp-alt-or{font-family:"DM Sans",sans-serif;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#9B7FA6;margin:0 0 12px;}

.tfp-signup-alt h3{font-family:"Cormorant Garamond",Georgia,serif;font-size:40px;font-weight:600;line-height:1.2;letter-spacing:0;color:#1A2B2C;margin:0 0 12px;}

.tfp-signup-alt p{font-family:"DM Sans",sans-serif;font-size:18px;line-height:1.8;color:#5A6B6C;margin:0 0 16px;}

.tfp-signup-alt .tfp-alt-price{font-size:16px;font-weight:600;color:#7A6085;margin:0 0 22px;}

.tfp-signup-alt .tfp-alt-btn{align-self:flex-start;display:inline-block;background:#9B7FA6;color:#FFFFFF !important;font-family:"DM Sans",sans-serif;font-size:16px;font-weight:600;letter-spacing:.02em;line-height:1;text-decoration:none !important;padding:14px 26px;border:0;border-radius:3px;transition:background-color .2s ease;}
.tfp-signup-alt .tfp-alt-btn:hover,
.tfp-signup-alt .tfp-alt-btn:focus{background:#7A6085;color:#FFFFFF !important;text-decoration:none !important;}

/* 901-1100px is where the two columns are narrowest; ease the type
   down a step so the panel never crowds or overflows. */
@media (max-width:1100px) and (min-width:901px){
  .tfp-signup-alt{padding:26px 24px;}
  .tfp-signup-alt h3{font-size:34px;}
  .tfp-signup-alt p{font-size:17px;line-height:1.7;}
}

@media (max-width:900px){
  .tfp-signup-duo{grid-template-columns:1fr;gap:18px;margin:40px auto 0;}
  .tfp-signup-alt{padding:26px 22px;}
  .tfp-signup-alt h3{font-size:32px;}
  .tfp-signup-alt p{font-size:17px;line-height:1.7;}
}

/* ============================================================
   SALES PAGE 562: guide preview sits in the top three-column row
   (intro / preview / offer panel). Portrait 1000x1140; the grid
   column sets its width, so no desktop max-width cap is needed.
   Below 900px the row stacks intro, panel, image and the image
   is capped and centred so it does not dominate the phone view.
   ============================================================ */
.page-id-562 #tfpTop .tfp-shot{
  margin:0;
}
.page-id-562 #tfpTop .tfp-shot img{
  width:100%;
  height:auto;
  display:block;
  margin:0 auto;
  border-radius:6px;
}
@media (max-width:600px){
  .page-id-562 #tfpTop .tfp-shot img{max-width:320px;}
}

/* ============================================================
   NAV BREATHING ROOM v1.5
   Between ~1150px and the 960px hamburger breakpoint the links
   block ran flush into the two-line logo (measured gap: 0px).
   Guarantee a minimum gap, and let the nav compress gracefully
   through the squeeze band instead of colliding.
   ============================================================ */
.tfp-nav .nav-links{
  margin-left:36px;
}
@media (max-width:1180px) and (min-width:1024px){
  .tfp-nav .nav-links{gap:18px;margin-left:32px;}
  .tfp-nav .nav-links a{font-size:.75rem;letter-spacing:.07em;}
  .tfp-nav .nav-links > li:last-child > a{padding:8px 16px;}
}
@media (max-width:1023px) and (min-width:961px){
  .tfp-nav .nav-links{gap:14px;margin-left:28px;}
  .tfp-nav .nav-links a{font-size:.72rem;letter-spacing:.05em;}
  .tfp-nav .nav-links > li:last-child > a{padding:7px 13px;}
}