:root {
  --ink: #07112a;
  --muted: #53606d;
  --green: #47743f;
  --green-dark: #315b2e;
  --green-soft: #eef5e9;
  --coral: #ff6558;
  --gold: #f5b73f;
  --cream: #fbf5ec;
  --paper: #fffdf9;
  --line: #eadfd0;
  --shadow: 0 18px 44px rgba(25, 38, 28, .13);
  --shadow-soft: 0 10px 28px rgba(25, 38, 28, .08);
  --max: 720px;
  font-size: 13px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-padding-top: 18px;
}

body {
  margin: 0;
  background: #fffdf9;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.exact-page {
  display: block;
  width: 100%;
  min-height: 100vh;
  background: #fffdf9;
  padding-top: 0;
}

.exact-frame {
  position: relative;
  width: 100%;
  margin: 0 auto;
  animation: exactPageIn .7s ease-out both;
}

.exact-frame > img {
  width: 100%;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 22px 45px rgba(24, 36, 28, .12));
}

.exact-anchor {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  scroll-margin-top: 72px;
  pointer-events: none;
}

.exact-anchor--top {
  top: 0;
}

.exact-anchor--start {
  top: 23.2%;
}

.exact-anchor--reset {
  top: 40.6%;
}

.exact-anchor--guides,
.exact-anchor--starter {
  top: 54.6%;
}

.exact-anchor--ideas {
  top: 70.2%;
}

.exact-anchor--community {
  top: 82%;
}

.exact-anchor--footer {
  top: 91.4%;
}

.exact-band {
  position: absolute;
  left: 0;
  z-index: 8;
  width: 100%;
  pointer-events: none;
  border: 0;
  mix-blend-mode: multiply;
}

.exact-band--hero {
  top: 0;
  height: 23.2%;
  background: linear-gradient(90deg, rgba(255, 255, 255, .02), rgba(238, 245, 233, .16));
}

.exact-band--basics {
  top: 23.2%;
  height: 17.4%;
  background: rgba(238, 245, 233, .22);
}

.exact-band--method {
  top: 40.6%;
  height: 14%;
  background: rgba(255, 248, 238, .32);
}

.exact-band--guides {
  top: 54.6%;
  height: 15.6%;
  background: rgba(251, 245, 236, .45);
}

.exact-spacer {
  position: absolute;
  left: 0;
  z-index: 9;
  width: 100%;
  pointer-events: none;
}

.exact-spacer--ideas {
  top: 68.65%;
  height: 1.25%;
  background: linear-gradient(180deg, rgba(255, 253, 249, .72), rgba(248, 251, 245, .72));
  border: 0;
}

.exact-band--ideas {
  top: 70.2%;
  height: 11.8%;
  background: rgba(246, 250, 243, .26);
}

.exact-ideas-rebuild {
  position: absolute;
  left: 2.1%;
  top: 71.35%;
  z-index: 18;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3.35%;
  width: 95.4%;
  padding: .15% 0 .35%;
  background: rgba(255, 253, 249, .96);
}

.exact-ideas-rebuild article {
  overflow: hidden;
  min-height: 100%;
  border: 1px solid rgba(61, 86, 58, .09);
  border-radius: 14px;
  background: rgba(255, 253, 249, .98);
  box-shadow:
    0 18px 34px rgba(28, 44, 31, .12),
    0 3px 10px rgba(28, 44, 31, .05);
  animation: cardSoftFloat 5.8s ease-in-out infinite;
}

.exact-ideas-rebuild article:nth-child(2) {
  animation-delay: .18s;
}

.exact-ideas-rebuild article:nth-child(3) {
  animation-delay: .36s;
}

.exact-ideas-rebuild article:nth-child(4) {
  animation-delay: .54s;
}

.exact-ideas-rebuild img {
  width: 100%;
  aspect-ratio: 1.45 / .72;
  object-fit: cover;
}

.exact-ideas-rebuild h2 {
  margin: 5.5% 9% 3%;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.68rem, 1.45vw, 1.15rem);
  line-height: 1.08;
}

.exact-ideas-rebuild p {
  margin: 0 9%;
  color: var(--muted);
  font-size: clamp(.52rem, 1.03vw, .78rem);
  line-height: 1.34;
}

.exact-ideas-rebuild strong {
  display: block;
  margin: 6% 9% 8%;
  color: var(--green-dark);
  font-size: clamp(.5rem, .95vw, .72rem);
  line-height: 1.2;
}

.exact-band--community {
  top: 82%;
  height: 9.4%;
  background: rgba(255, 243, 232, .42);
}

.exact-band--footer {
  top: 91.4%;
  height: 8.6%;
  background: rgba(246, 248, 244, .36);
}

.exact-header {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 50;
  display: block;
  width: 100%;
  aspect-ratio: 772 / 60;
  padding: 0;
  overflow: hidden;
  background: #fffdf9;
  border-bottom: 0;
  box-shadow: none;
  transform: translateX(-50%);
}

.exact-header-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.exact-header-link {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
  color: transparent;
  text-decoration: none;
  border-radius: 7px;
}

.exact-header-link:focus-visible {
  outline: 3px solid rgba(255, 101, 88, .55);
  outline-offset: -3px;
}

.exact-header-link--brand {
  left: 2%;
  width: 28%;
}

.exact-header-link--start {
  left: 34.2%;
  width: 9%;
}

.exact-header-link--guides {
  left: 45%;
  width: 11%;
}

.exact-header-link--ideas {
  left: 57.8%;
  width: 10.5%;
}

.exact-header-link--community {
  left: 69.8%;
  width: 11%;
}

.exact-header-link--cta {
  top: 16%;
  left: 81.4%;
  width: 16.6%;
  height: 67%;
}

.exact-header-link--cta:hover {
  transform: none;
}

.exact-hotspot:hover {
  transform: none;
}

.exact-hotspot {
  position: absolute;
  z-index: 20;
  display: block;
  overflow: hidden;
  color: transparent;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: none;
  transition: none;
  animation: none;
}

.exact-hotspot:hover,
.exact-hotspot:focus-visible {
  background: transparent;
  box-shadow: none;
}

.exact-hotspot:focus-visible {
  outline: 0;
}

.exact-hotspot--nav {
  left: 80.5%;
  top: .65%;
  width: 16.6%;
  height: 1.55%;
}

.exact-hotspot--hero {
  left: 4.65%;
  top: 13.25%;
  width: 26.55%;
  height: 2.26%;
}

.exact-hotspot--reset {
  left: 7.4%;
  top: 16.25%;
  width: 14.4%;
  height: 1.2%;
  border-radius: 4px;
  animation-delay: .35s;
}

.exact-hotspot--guide {
  left: 81.6%;
  top: 62.95%;
  width: 11.8%;
  height: 2.7%;
  animation-delay: .7s;
}

.exact-hotspot--footer {
  left: 89.1%;
  top: 94.35%;
  width: 6.6%;
  height: 1.55%;
  animation-delay: 1s;
}

@media (min-width: 900px) {
  .exact-frame,
  .exact-header {
    width: 100%;
  }

  .exact-page img {
    width: 100%;
  }
}

.responsive-page {
  display: none;
}

@keyframes exactPageIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.site-header {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(160px, 1fr);
  align-items: center;
  gap: 1.4rem;
  width: min(100% - 2.2rem, var(--max));
  margin: 0 auto;
  padding: 1rem 0 .8rem;
  background: #fffdf9;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
}

.brand-mark {
  display: block;
  width: 28px;
  height: 52px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 6px 10px rgba(25, 38, 28, .12));
}

.brand strong,
.brand em {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  line-height: .92;
}

.brand strong {
  font-size: 1.48rem;
}

.brand em {
  color: var(--green);
  font-size: 1.23rem;
  font-style: normal;
}

.nav {
  display: flex;
  gap: 2rem;
  align-items: center;
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
}

.nav a,
.footer-links a {
  text-decoration: none;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: 0 1.15rem;
  border: 0;
  border-radius: 7px;
  background: var(--coral);
  color: #fff;
  font: inherit;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 16px 32px rgba(255, 101, 88, .28);
  transition: transform .22s ease, box-shadow .22s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 42px rgba(255, 101, 88, .36);
}

.button--small {
  justify-self: end;
  min-height: 2.75rem;
}

.button--green {
  background: var(--green);
  box-shadow: 0 16px 32px rgba(54, 104, 51, .24);
}

.section {
  width: min(100% - 2.2rem, var(--max));
  margin: 0 auto;
  padding: 2.25rem 0;
}

.responsive-page .feature-strip {
  background: #fffdf9;
}

.responsive-page #start {
  width: 100%;
  max-width: none;
  padding-right: max(1.1rem, calc((100vw - var(--max)) / 2));
  padding-left: max(1.1rem, calc((100vw - var(--max)) / 2));
  background: #f3f8ee;
  border-top: 1px solid rgba(71, 116, 63, .15);
  border-bottom: 1px solid rgba(71, 116, 63, .12);
}

.responsive-page #method {
  width: 100%;
  max-width: none;
  padding-right: max(1.1rem, calc((100vw - var(--max)) / 2));
  padding-left: max(1.1rem, calc((100vw - var(--max)) / 2));
  background: #fff8ee;
}

.responsive-page #ideas {
  width: 100%;
  max-width: none;
  padding-top: 3.3rem;
  padding-right: max(1.1rem, calc((100vw - var(--max)) / 2));
  padding-left: max(1.1rem, calc((100vw - var(--max)) / 2));
  background: #f8fbf5;
  border-top: 1px solid rgba(71, 116, 63, .12);
}

.hero {
  display: grid;
  grid-template-columns: 255px 1fr;
  gap: 1.55rem;
  align-items: center;
  width: min(100% - 2.2rem, var(--max));
  min-height: 285px;
  padding: .8rem 0 1.8rem;
}

.hero-copy {
  padding-top: .7rem;
}

.eyebrow {
  margin: 0 0 .5rem;
  color: var(--green-dark);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

h1,
.section-title {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0;
}

h1 {
  max-width: 250px;
  font-size: 3rem;
  line-height: .88;
}

h1 span {
  display: block;
  color: var(--green);
  font-style: italic;
  font-weight: 500;
}

.hero-text,
.section-intro {
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.42;
}

.hero-text {
  max-width: 235px;
  margin: 1rem 0 1.15rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem 1.1rem;
}

.link-action {
  color: var(--ink);
  font-size: .9rem;
  text-underline-offset: .35rem;
}

.hero-art {
  position: relative;
  min-height: 310px;
  margin-right: -2rem;
}

.hero-art img {
  width: 100%;
  height: 330px;
  object-fit: cover;
  object-position: 42% 47%;
  filter: drop-shadow(0 22px 40px rgba(30, 42, 31, .13));
}

.macro-card,
.mini-card,
.info-card,
.step-card,
.guide-card,
.download-card,
.life-card,
.chat-card,
.community {
  background: rgba(255, 253, 249, .94);
  border: 1px solid rgba(98, 78, 56, .16);
  box-shadow: var(--shadow-soft);
}

.macro-card {
  position: absolute;
  top: 31%;
  right: 4%;
  width: 155px;
  padding: .85rem;
  border-radius: 10px;
  backdrop-filter: blur(10px);
  animation: float 6s ease-in-out infinite;
}

.macro-card__top {
  display: flex;
  justify-content: space-between;
  gap: .7rem;
  margin-bottom: .65rem;
  font-size: .78rem;
}

.macro-card__top span,
.macro-row b {
  color: var(--muted);
  font-weight: 500;
}

.macro-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .35rem .7rem;
  margin-top: .62rem;
  font-size: .72rem;
  font-weight: 800;
}

.macro-row i,
.meter i {
  grid-column: 1 / -1;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9e5dc;
}

.macro-row i::before,
.meter i::before {
  content: "";
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: var(--color);
}

.feature-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  width: min(100% - 2.2rem, var(--max));
  margin: 0 auto;
  padding: 0 0 1rem;
}

.mini-card {
  display: flex;
  align-items: center;
  gap: .95rem;
  min-height: 76px;
  padding: .95rem 1rem;
  border-radius: 0;
  border-right-width: 0;
}

.mini-card:first-child {
  border-radius: 8px 0 0 8px;
}

.mini-card:last-child {
  border-right-width: 1px;
  border-radius: 0 8px 8px 0;
}

.icon,
.step-number {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #fff;
  font-weight: 900;
}

.icon--green,
.step-number {
  background: linear-gradient(135deg, #8fb26f, var(--green));
}

.icon--coral {
  background: linear-gradient(135deg, #ff9a83, var(--coral));
}

h2,
h3,
p {
  overflow-wrap: anywhere;
}

.mini-card h2,
.info-card h3,
.step-card h3,
.guide-card h3,
.life-card h3,
.download-card h3,
.chat-card h3 {
  margin: 0 0 .35rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
  line-height: 1.1;
}

.mini-card p,
.info-card p,
.step-card p,
.guide-card p,
.life-card p,
.download-card p,
.chat-card p,
blockquote {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.36;
}

.section--center {
  text-align: center;
}

.section-title {
  font-size: 1.8rem;
  line-height: 1.05;
}

.section-intro {
  max-width: 520px;
  margin: .35rem auto 1.4rem;
}

.card-grid {
  display: grid;
  gap: 1rem;
}

.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.info-card,
.guide-card,
.life-card,
.step-card,
.download-card,
.chat-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  text-align: left;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.info-card:hover,
.guide-card:hover,
.life-card:hover,
.step-card:hover,
.download-card:hover,
.chat-card:hover,
.mini-card:hover {
  transform: translateY(-4px);
  border-color: rgba(71, 116, 63, .28);
  box-shadow: var(--shadow);
}

.info-card {
  min-height: 255px;
  padding: 1rem;
}

.info-card img,
.guide-card img,
.life-card img {
  width: 100%;
  height: 132px;
  object-fit: cover;
  margin: -.25rem 0 .75rem;
  border-radius: 8px;
}

.info-card a {
  display: inline-block;
  margin-top: .75rem;
  color: var(--green-dark);
  font-weight: 800;
  text-decoration: none;
}

.meter {
  display: grid;
  gap: .25rem;
  margin-top: .55rem;
  font-weight: 800;
}

.hand-card,
.phone-card {
  display: grid;
  gap: .45rem;
  min-height: 120px;
  margin-bottom: .75rem;
  padding: .8rem;
  border-radius: 8px;
  background: linear-gradient(135deg, #fff, var(--green-soft));
  color: var(--green-dark);
  font-size: .8rem;
  font-weight: 800;
}

.phone-card {
  border: 6px solid #1b1c20;
  border-bottom-width: 14px;
  border-radius: 18px;
  background: #fff;
}

.section--line {
  border-top: 1px solid var(--line);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.35rem;
}

.step-card {
  min-height: 165px;
  padding: 1rem;
}

.step-card--image img {
  width: 132px;
  height: 132px;
  margin: -1.4rem auto .35rem;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 14px 30px rgba(36, 52, 31, .16);
}

.step-number {
  width: 31px;
  height: 31px;
  margin-bottom: .55rem;
  font-size: 1rem;
}

.note {
  margin: 1rem auto 0;
  padding: .7rem 1rem;
  border: 1px solid rgba(71, 116, 63, .35);
  border-radius: 7px;
  background: rgba(255, 255, 255, .78);
  color: var(--green-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
}

.section--warm {
  width: 100%;
  max-width: none;
  padding-right: max(1.1rem, calc((100vw - var(--max)) / 2));
  padding-left: max(1.1rem, calc((100vw - var(--max)) / 2));
  background: radial-gradient(circle at 92% 10%, rgba(143, 178, 111, .18), transparent 15rem), var(--cream);
}

.guide-layout {
  display: grid;
  grid-template-columns: 1fr 118px;
  gap: 1rem;
  align-items: stretch;
}

.guides {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.guide-card,
.life-card {
  padding: .65rem .65rem .9rem;
}

.download-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .75rem;
  padding: 1rem;
}

.heart {
  width: 20px;
  height: 20px;
  border: 2px solid var(--green);
  border-radius: 50%;
}

.community {
  display: grid;
  grid-template-columns: 170px 1fr 260px;
  gap: 1.2rem;
  width: 100%;
  max-width: none;
  padding: 1.35rem max(1.1rem, calc((100vw - var(--max)) / 2));
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  background: linear-gradient(135deg, #fff8ee, #fff);
}

.community-copy {
  text-align: left;
}

.community-image {
  align-self: center;
  width: 170px;
  height: 170px;
  object-fit: cover;
  border-radius: 50%;
  filter: drop-shadow(0 18px 28px rgba(30, 42, 31, .12));
}

.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .7rem;
  margin-top: 1rem;
}

blockquote {
  padding: .8rem;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(25, 38, 28, .06);
}

.chat-card {
  padding: 1rem;
  background: #fff;
}

.chat-bubble {
  margin: .8rem 0 0;
  padding: .65rem .8rem;
  border-radius: 9px;
  background: #f0f2f6;
  color: var(--ink);
  font-size: .78rem;
}

.chat-bubble--reply {
  margin-left: 1.5rem;
  background: #fff7ed;
}

.chat-card ul {
  display: grid;
  gap: .5rem;
  margin: .9rem 0 0;
  padding-left: 1.2rem;
  color: var(--muted);
  font-size: .78rem;
}

.site-footer {
  border-top: 1px solid var(--line);
  background: #fff;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr .72fr .72fr .72fr 1.25fr;
  gap: 1.2rem;
  width: min(100% - 2.2rem, var(--max));
  margin: 0 auto;
  padding: 1.45rem 0 1.3rem;
}

.footer-brand p,
.newsletter p,
.newsletter small,
.footer-bottom,
.footer-links a {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.4;
}

.footer-brand .brand strong {
  font-size: 1.22rem;
}

.footer-brand .brand em {
  font-size: 1rem;
}

.footer-brand .brand-mark {
  width: 24px;
  height: 46px;
}

.socials {
  display: flex;
  gap: .5rem;
  margin-top: .85rem;
}

.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  text-decoration: none;
}

.footer-links,
.newsletter {
  display: grid;
  align-content: start;
  gap: .42rem;
}

.footer-links h2,
.newsletter h2 {
  margin: 0 0 .35rem;
  color: var(--ink);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.newsletter {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.newsletter form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .45rem;
  margin-top: .5rem;
}

.newsletter input,
.newsletter button {
  min-height: 2.4rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
}

.newsletter input {
  min-width: 0;
  padding: 0 .65rem;
}

.newsletter button {
  padding: 0 .8rem;
  border-color: var(--green);
  background: var(--green);
  color: #fff;
  font-weight: 800;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  width: min(100% - 2.2rem, var(--max));
  margin: 0 auto;
  padding: 1.15rem 0 1.6rem;
  border-top: 1px solid var(--line);
}

.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: reveal .7s cubic-bezier(.2, .8, .2, 1) forwards;
}

.delay-1 {
  animation-delay: .12s;
}

.delay-2 {
  animation-delay: .24s;
}

.delay-3 {
  animation-delay: .36s;
}

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes cardSoftFloat {
  0%,
  100% {
    transform: translateY(0);
    box-shadow:
      0 16px 30px rgba(28, 44, 31, .1),
      0 3px 10px rgba(28, 44, 31, .05),
      inset 0 0 0 1px rgba(255, 255, 255, .3);
  }

  50% {
    transform: translateY(-4px);
    box-shadow:
      0 24px 46px rgba(28, 44, 31, .15),
      0 6px 16px rgba(28, 44, 31, .07),
      inset 0 0 0 1px rgba(255, 255, 255, .38);
  }
}

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

@media (min-width: 1180px) {
  :root {
    --max: 1120px;
    font-size: 16px;
  }

  .hero {
    grid-template-columns: 390px 1fr;
    min-height: 425px;
  }

  h1 {
    max-width: 380px;
    font-size: 4.6rem;
  }

  .hero-text {
    max-width: 360px;
    font-size: 1.18rem;
  }

  .hero-art {
    min-height: 430px;
    margin-right: -3rem;
  }

  .hero-art img {
    height: 450px;
  }

  .macro-card {
    width: 230px;
    padding: 1.15rem;
  }
}

@media (max-width: 430px) {
  .exact-page {
    display: none;
  }

  .responsive-page {
    display: block;
  }

  :root {
    font-size: 14px;
  }

  .site-header {
    grid-template-columns: 1fr auto;
  }

  .nav {
    display: none;
  }

  .hero,
  .guide-layout {
    grid-template-columns: 1fr;
  }

  .hero {
    gap: 1.5rem;
    min-height: auto;
    padding-top: 2.2rem;
  }

  .hero-art {
    min-height: 360px;
    margin-right: 0;
  }

  .hero-art img {
    height: 420px;
    border-radius: 20px;
  }

  .feature-strip,
  .four,
  .steps,
  .guides,
  .quotes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mini-card,
  .mini-card:first-child,
  .mini-card:last-child {
    border-radius: 8px;
    border-right-width: 1px;
  }

  .download-card {
    min-height: 190px;
  }

  .community {
    grid-template-columns: 150px 1fr;
  }

  .chat-card {
    grid-column: 1 / -1;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .site-header {
    padding: .9rem 0;
  }

  .brand-mark {
    width: 24px;
    height: 46px;
  }

  .button--small {
    display: none;
  }

  h1 {
    max-width: 100%;
    font-size: clamp(2.8rem, 14vw, 4.1rem);
    line-height: .94;
  }

  .hero-text {
    max-width: 100%;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .hero-art {
    min-height: 320px;
  }

  .hero-art img {
    height: 330px;
  }

  .macro-card {
    position: relative;
    top: auto;
    right: auto;
    width: calc(100% - 1.5rem);
    margin: -5rem auto 0;
  }

  .feature-strip,
  .four,
  .steps,
  .guides,
  .quotes,
  .community,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .section,
  .hero,
  .feature-strip,
  .site-header,
  .footer-grid,
  .footer-bottom {
    width: min(100% - 1.25rem, var(--max));
  }

  .info-card,
  .step-card {
    min-height: auto;
  }

  .community-image {
    width: 150px;
    height: 150px;
    justify-self: center;
  }

  .footer-bottom {
    flex-direction: column;
    gap: .65rem;
    text-align: center;
  }
}

/* Method, real-life, and community reference layouts */
.responsive-page #method.method-section,
.responsive-page #ideas.ideas-section,
.responsive-page #community.community {
  color: #09162b;
  background: #fffefa;
}

.responsive-page #method.method-section {
  padding-block: clamp(5.5rem, 10vw, 9rem) clamp(4.25rem, 8vw, 7rem);
  border: 0;
}

#method .eyebrow,
#ideas .eyebrow,
#community .eyebrow {
  margin-bottom: 1rem;
  color: #467843;
}

#method .section-title {
  max-width: 780px;
  margin: 0;
  text-align: left;
  font-family: var(--font-sans);
  font-size: clamp(2.65rem, 5.3vw, 5.8rem);
  font-weight: 750;
  line-height: .98;
  letter-spacing: 0;
}

#method .method-intro {
  max-width: 570px;
  margin: 1.55rem 0 0;
  color: #536273;
  font-size: clamp(1.05rem, 1.45vw, 1.3rem);
  line-height: 1.55;
}

#method .method-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr) 72px minmax(0, 1fr);
  align-items: start;
  gap: 0;
  margin-top: clamp(3.25rem, 6vw, 5.5rem);
}

#method .method-step-card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-height: 410px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#method .method-copy {
  width: 100%;
  min-height: 0;
  padding: 0;
}

#method .step-number {
  display: grid;
  width: 52px;
  height: 52px;
  margin: 0 0 1.35rem;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #39763d;
  color: #fff;
  font-size: 1.55rem;
  font-weight: 750;
}

#method .method-step-card:nth-of-type(2) .step-number { background: #f06552; }
#method .method-step-card:nth-of-type(3) .step-number { background: #d89d25; }

#method .method-step-card h3 {
  max-width: 290px;
  margin: 0;
  color: #09162b;
  font-family: var(--font-sans);
  font-size: clamp(1.4rem, 2.3vw, 2rem);
  font-weight: 730;
  letter-spacing: 0;
  line-height: 1.08;
}

#method .method-step-card p:not(.step-number) {
  max-width: 315px;
  margin: .8rem 0 0;
  color: #526173;
  font-size: 1rem;
  line-height: 1.5;
}

#method .method-step-card figure {
  position: static;
  display: grid;
  width: min(100%, 250px);
  margin: auto auto 0;
  aspect-ratio: 1;
  place-items: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#method .method-step-card figure::after { display: none; }

#method .method-step-card figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

#method .method-arrow {
  display: grid;
  width: 48px;
  height: 48px;
  margin-top: 2px;
  align-self: start;
  justify-self: center;
  place-items: center;
  border: 1px solid #dfe5dc;
  border-radius: 50%;
  background: #fffefa;
  box-shadow: none;
  color: #39763d;
  font-size: 1.75rem;
}

#method .note {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  margin: clamp(2rem, 5vw, 4.5rem) 0 0;
  padding: 1rem 1.5rem;
  border-top: 1px solid #d9dfd7;
  border-bottom: 1px solid #d9dfd7;
  border-radius: 0;
  background: transparent;
  color: #3d493e;
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  text-align: center;
}

.responsive-page #ideas.ideas-section {
  padding-block: clamp(5.5rem, 9vw, 8rem);
  border-top: 1px solid #e7ebe4;
}

#ideas .ideas-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(250px, .7fr);
  align-items: end;
  gap: clamp(2rem, 6vw, 6rem);
  margin-bottom: clamp(3rem, 5vw, 5rem);
  text-align: left;
}

#ideas .section-title {
  max-width: 770px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(2.6rem, 4.9vw, 5.45rem);
  font-weight: 750;
  letter-spacing: 0;
  line-height: .99;
}

#ideas .ideas-lede {
  max-width: 340px;
  margin: 0;
  padding-left: 1.4rem;
  border-left: 2px solid #d7e2d2;
  color: #5a6978;
  font-size: clamp(1.05rem, 1.45vw, 1.28rem);
  line-height: 1.52;
}

#ideas .card-grid.four {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
}

#ideas .life-card {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(205px, .92fr);
  min-height: 290px;
  overflow: hidden;
  border: 1px solid #e2e7df;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
  transition: transform .35s ease, box-shadow .35s ease;
}

#ideas .life-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 34px rgba(13, 32, 24, .10);
}

#ideas .life-card img {
  width: 100%;
  height: 100%;
  min-height: 290px;
  object-fit: cover;
}

#ideas .life-card > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.35rem, 3vw, 2.25rem);
}

#ideas .life-card .life-icon { display: none; }

#ideas .life-card h3 {
  margin: 0 0 .75rem;
  color: #0b1729;
  font-family: var(--font-sans);
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
  font-weight: 720;
  letter-spacing: 0;
}

#ideas .life-card p {
  margin: 0;
  color: #5c6a76;
  font-size: .98rem;
  line-height: 1.5;
}

#ideas .life-card p:last-child {
  margin-top: 1rem;
  color: #467843;
  font-size: .88rem;
  font-weight: 700;
}

#ideas .ideas-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: clamp(2.25rem, 5vw, 4.25rem);
  padding-top: 1.35rem;
  border-top: 1px solid #dfe5dc;
  color: #0b1729;
}

#ideas .ideas-footer strong {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  font-weight: 600;
}

#ideas .ideas-footer a {
  color: #316936;
  font-size: .95rem;
  font-weight: 750;
  text-decoration: none;
}

.responsive-page #community.community {
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  padding-block: clamp(5.5rem, 10vw, 9rem) 3rem;
  position: relative;
  overflow: visible;
  border-top: 1px solid #e7ebe4;
}

#community .community-copy {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  max-width: 470px;
}

#community .section-title {
  max-width: 450px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(2.75rem, 5vw, 5.3rem);
  font-weight: 750;
  letter-spacing: 0;
  line-height: .98;
}

#community .section-intro,
#community .community-description {
  max-width: 400px;
  color: #596876;
  font-size: clamp(1.05rem, 1.45vw, 1.28rem);
  line-height: 1.52;
}

#community .section-intro { margin: 1.5rem 0 0; }
#community .community-description { margin: .65rem 0 0; }

#community .community-cta {
  min-height: 52px;
  margin-top: 2rem;
  padding: .85rem 1.25rem;
  border-radius: 7px;
  background: #2f6dca;
  box-shadow: none;
  color: #fff;
}

#community .community-cta:hover { background: #215db9; transform: translateY(-2px); }

#community .quotes { display: none; }

#community .community-image {
  grid-column: 2;
  grid-row: 1;
  display: block;
  width: 100%;
  height: clamp(490px, 48vw, 680px);
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 22px 42px rgba(13, 32, 24, .13);
}

#community .chat-card {
  position: absolute;
  z-index: 2;
  right: clamp(1rem, 4vw, 4rem);
  bottom: 132px;
  width: min(375px, 36vw);
  padding: 1.3rem;
  border: 1px solid rgba(220, 228, 218, .95);
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 17px 32px rgba(13, 32, 24, .14);
}

#community .chat-header { color: #0b1729; font-size: 1.05rem; }
#community .chat-meta { color: #647180; }
#community .chat-bubbles { margin-top: 1rem; }

#community .community-benefits {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid #dfe5dc;
  border-bottom: 1px solid #dfe5dc;
}

#community .community-benefits strong {
  padding: 1.25rem 1.5rem;
  color: #2e6235;
  font-size: .95rem;
  text-align: center;
}

#community .community-benefits strong + strong { border-left: 1px solid #dfe5dc; }

@media (max-width: 900px) {
  #method .method-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  #method .method-arrow { display: none; }
  #method .method-step-card { min-height: 380px; }
  #ideas .ideas-heading { grid-template-columns: 1fr; gap: 1.4rem; }
  #community .chat-card { width: min(365px, 44vw); }
}

@media (max-width: 680px) {
  .responsive-page #method.method-section,
  .responsive-page #ideas.ideas-section,
  .responsive-page #community.community { padding-inline: 1.25rem; }
  #method .section-title,
  #ideas .section-title,
  #community .section-title { font-size: clamp(2.55rem, 12vw, 4rem); }
  #method .method-steps { grid-template-columns: 1fr; gap: 3rem; }
  #method .method-step-card { min-height: 0; }
  #method .method-step-card figure { width: min(62vw, 245px); margin-top: 1.5rem; }
  #method .note { justify-content: flex-start; text-align: left; }
  #ideas .card-grid.four { grid-template-columns: 1fr; }
  #ideas .life-card { grid-template-columns: 1fr; }
  #ideas .life-card img { min-height: 210px; height: 210px; }
  #ideas .life-card > div { min-height: 185px; }
  #ideas .ideas-footer { align-items: flex-start; flex-direction: column; }
  .responsive-page #community.community { grid-template-columns: 1fr; gap: 2rem; }
  #community .community-copy, #community .community-image { grid-column: 1; grid-row: auto; }
  #community .community-image { height: min(82vw, 480px); }
  #community .chat-card { position: static; width: auto; margin-top: -4.5rem; margin-inline: 1rem; }
  #community .community-benefits { grid-column: 1; grid-template-columns: 1fr; margin-top: 1rem; }
  #community .community-benefits strong { text-align: left; }
  #community .community-benefits strong + strong { border-top: 1px solid #dfe5dc; border-left: 0; }
}

/* Basics section polish */
#start .four {
  align-items: stretch;
  grid-template-columns: 1.05fr 1.05fr 1.25fr .95fr;
}

#start .info-card {
  display: flex;
  flex-direction: column;
  min-height: 430px;
  padding: clamp(1.35rem, 2vw, 2rem);
  border: 1px solid rgba(91, 75, 54, .13);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 253, 249, .96)),
    radial-gradient(circle at 50% 45%, rgba(238, 245, 233, .42), transparent 12rem);
  box-shadow:
    0 22px 50px rgba(33, 44, 31, .08),
    inset 0 1px 0 rgba(255, 255, 255, .75);
}

#start .info-card h3 {
  margin-bottom: .8rem;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.3rem, 1.6vw, 1.75rem);
  line-height: 1.1;
}

#start .info-card h3 span {
  margin-right: .25rem;
  color: var(--ink);
}

#start .info-card p {
  color: #5a6470;
  font-size: clamp(.88rem, 1vw, 1rem);
  line-height: 1.55;
}

#start .info-card > img {
  order: 2;
  width: 112%;
  height: auto;
  max-height: 250px;
  object-fit: contain;
  margin: auto -6% 1.2rem;
  border-radius: 0;
  filter: drop-shadow(0 16px 24px rgba(27, 36, 25, .16));
}

#start .info-card > img.basics-food-photo {
  width: min(92%, 250px);
  aspect-ratio: 1;
  height: auto;
  max-height: none;
  margin: 1.15rem auto 1.35rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  box-shadow:
    0 20px 34px rgba(27, 36, 25, .17),
    0 0 0 10px rgba(255, 255, 255, .62);
  filter: none;
}

#start .info-card .meter {
  margin-top: 1.2rem;
  gap: .55rem;
}

#start .meter span {
  color: var(--ink);
  font-size: 1rem;
}

#start .meter i {
  height: 9px;
}

#start .hand-card {
  order: 3;
  min-height: auto;
  margin: 1.15rem 0 1.1rem;
  padding: .9rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(244, 248, 240, .92));
  border: 1px solid rgba(71, 116, 63, .1);
  border-radius: 16px;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42);
}

#start .hand-card::before {
  content: none;
}

#start .hand-card span {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: .75rem;
  min-height: 48px;
  padding: .45rem .55rem;
  border-radius: 12px;
  background: rgba(255, 253, 249, .72);
  color: var(--ink);
  font-weight: 800;
}

#start .hand-card span::before {
  content: "";
  position: static;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(238, 245, 233, .9) center / 28px 28px no-repeat url("assets/icons/palm.svg");
}

#start .hand-card span:nth-child(2)::before {
  background-color: rgba(255, 236, 232, .95);
  background-image: url("assets/icons/fist.svg");
}

#start .hand-card span:nth-child(3)::before {
  background-color: rgba(255, 248, 225, .98);
  background-image: url("assets/icons/thumb.svg");
}

#start .hand-card span:nth-child(4)::before {
  background-color: rgba(232, 244, 250, .98);
  background-image: url("assets/icons/handful.svg");
}

#start .phone-card {
  order: 3;
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 300px;
  margin: 1.15rem auto 1.1rem;
  width: min(220px, 100%);
  aspect-ratio: 9 / 17.5;
  padding: 0;
  border: 10px solid #101216;
  border-bottom-width: 18px;
  border-radius: 34px;
  background: #101216;
  box-shadow:
    0 22px 42px rgba(18, 24, 32, .22),
    0 0 0 1px rgba(255, 255, 255, .35) inset;
}

#start .phone-card::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 2;
  width: 56px;
  height: 16px;
  border-radius: 999px;
  background: #050608;
  transform: translateX(-50%);
}

#start .phone-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 9%;
  border-radius: 22px;
  filter: saturate(.98) contrast(1.02);
}

#start .info-card a,
#start .info-card .info-toggle {
  order: 10;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1rem;
  border: 0;
  background: transparent;
  color: var(--green-dark);
  font: inherit;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}

#start .info-card .info-toggle::after {
  content: "→";
  display: inline-block;
  transition: transform .22s ease;
}

#start .info-card.is-open .info-toggle::after {
  transform: rotate(90deg);
}

#start .info-card .info-toggle:focus-visible {
  outline: 3px solid rgba(71, 116, 63, .28);
  outline-offset: 4px;
  border-radius: 999px;
}

#start .info-more {
  order: 9;
  overflow: hidden;
  margin: .95rem 0 .2rem;
  padding: .9rem;
  border: 1px solid rgba(71, 116, 63, .14);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(244, 248, 240, .9));
  box-shadow: 0 16px 34px rgba(31, 44, 31, .08);
  color: #53606d;
  transform-origin: bottom center;
}

#start .info-more[hidden] {
  display: none;
}

#start .info-card.is-open .info-more {
  animation: cardFlipOpen .34s cubic-bezier(.2, .8, .2, 1) both;
}

#start .info-more strong {
  display: block;
  margin-bottom: .4rem;
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.2;
}

#start .info-more p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.45;
}

@keyframes cardFlipOpen {
  from {
    opacity: 0;
    transform: perspective(700px) rotateX(-76deg) translateY(8px);
  }

  to {
    opacity: 1;
    transform: perspective(700px) rotateX(0) translateY(0);
  }
}

@media (max-width: 900px) {
  #start .four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #start .four {
    grid-template-columns: 1fr;
  }

  #start .info-card {
    min-height: auto;
  }
}

/* Method section polish */
#method .section-title {
  max-width: 920px;
  margin: 0 auto;
}

#method .steps {
  position: relative;
  align-items: stretch;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.2rem, 4vw, 3.4rem);
  margin-top: 1.8rem;
}

#method .step-card {
  position: relative;
  display: grid;
  grid-template-columns: 46% 54%;
  grid-template-rows: auto auto 1fr;
  min-height: 260px;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  overflow: visible;
  border: 1px solid rgba(91, 75, 54, .14);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 253, 249, .98)),
    radial-gradient(circle at 76% 48%, rgba(238, 245, 233, .42), transparent 10rem);
  box-shadow:
    0 22px 52px rgba(33, 44, 31, .09),
    inset 0 1px 0 rgba(255, 255, 255, .75);
  text-align: left;
}

#method .step-card::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: calc(clamp(2.2rem, 4vw, 3.4rem) / -1.65);
  z-index: 5;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-50%);
  box-shadow: 0 12px 24px rgba(49, 91, 46, .28);
}

#method .step-card:last-child::after {
  content: none;
}

#method .step-number {
  grid-column: 1;
  grid-row: 1;
  width: 50px;
  height: 50px;
  margin: 0 0 1.25rem;
  background: var(--green-dark);
  color: #fff;
  font-size: 1.6rem;
  box-shadow: 0 10px 20px rgba(49, 91, 46, .22);
}

#method .step-card h3,
#method .step-card p,
#method .step-examples {
  grid-column: 1;
}

#method .step-card h3 {
  margin: 0 0 .8rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 1.65vw, 1.75rem);
  line-height: 1.05;
}

#method .step-card p {
  color: #5a6470;
  font-size: clamp(.88rem, 1vw, 1rem);
  line-height: 1.48;
}

#method .step-examples {
  margin-top: 1.35rem;
}

#method .step-examples strong {
  display: block;
  margin-bottom: .35rem;
  color: var(--green-dark);
}

#method .step-card img,
#method .step-card--image img {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  justify-self: center;
  width: min(92%, 245px);
  height: auto;
  aspect-ratio: 1;
  margin: 0;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 18px 32px rgba(28, 44, 31, .18);
}

#method .note {
  margin-top: 1.4rem;
}

@media (max-width: 980px) {
  #method .steps {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  #method .step-card::after {
    content: none;
  }

  #method .step-card {
    grid-template-columns: 1fr minmax(160px, 36%);
  }
}

@media (max-width: 640px) {
  #method .step-card {
    grid-template-columns: 1fr;
  }

  #method .step-card img,
  #method .step-card--image img {
    grid-column: 1;
    grid-row: auto;
    width: min(72%, 260px);
    margin: 1rem auto 0;
  }
}

/* Exact-inspired method row */
#method .method-reference {
  display: block;
  width: min(100%, 1180px);
  height: auto;
  margin: 0 auto;
  border-radius: 0;
  box-shadow: none;
}

#method {
  padding-top: clamp(3.5rem, 5vw, 5rem);
}

#method .eyebrow {
  margin-bottom: .45rem;
}

#method .section-title {
  max-width: 980px;
  font-size: clamp(2.35rem, 3.9vw, 3.8rem);
}

#method .steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.6rem;
  width: min(100%, 1260px);
  margin: 1.45rem auto 0;
}

#method .step-card {
  grid-template-columns: 46% 54%;
  min-height: 300px;
  padding: 1.5rem 1.45rem;
  border-radius: 18px;
  background: rgba(255, 253, 249, .92);
  box-shadow: 0 16px 34px rgba(42, 46, 34, .07);
}

#method .step-card::after {
  right: -2.45rem;
  width: 46px;
  height: 46px;
  font-size: 2.25rem;
}

#method .step-number {
  width: 46px;
  height: 46px;
  margin-bottom: 1rem;
  font-size: 1.55rem;
}

#method .step-card h3 {
  max-width: 13rem;
  margin-bottom: .85rem;
  font-size: clamp(1.35rem, 1.55vw, 1.8rem);
}

#method .step-card p {
  max-width: 13.5rem;
  font-size: clamp(.9rem, 1vw, 1.08rem);
  line-height: 1.5;
}

#method .step-examples {
  margin-top: 1.35rem;
}

#method .step-card img,
#method .step-card--image img {
  width: min(108%, 270px);
  max-width: none;
  transform: translateX(.8rem);
}

#method .note {
  margin-top: 1.25rem;
}

@media (max-width: 1100px) {
  #method .steps {
    gap: 1.2rem;
  }

  #method .step-card::after {
    content: none;
  }
}

@media (max-width: 820px) {
  #method .steps {
    grid-template-columns: 1fr;
  }

  #method .step-card {
    grid-template-columns: 1fr minmax(180px, 38%);
  }
}

@media (max-width: 560px) {
  #method .step-card {
    grid-template-columns: 1fr;
  }

  #method .step-card img,
  #method .step-card--image img {
    grid-column: 1;
    grid-row: auto;
    width: min(74%, 260px);
    margin: 1rem auto 0;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* Modern finished site layer */
:root {
  --max: 1180px;
}

body {
  background:
    radial-gradient(circle at 92% 8%, rgba(143, 178, 111, .13), transparent 24rem),
    linear-gradient(180deg, #fffdf9 0%, #fbf7ef 45%, #fffdf9 100%);
}

.exact-page {
  display: none;
}

.responsive-page {
  display: block;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  width: min(100% - 2rem, var(--max));
  min-height: 76px;
  padding: .75rem 0;
  background: rgba(255, 253, 249, .88);
  border-bottom: 1px solid rgba(71, 116, 63, .14);
  box-shadow: 0 14px 40px rgba(25, 38, 28, .08);
  backdrop-filter: blur(18px);
}

.site-header::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  z-index: -1;
  height: 76px;
  background: rgba(255, 253, 249, .88);
  border-bottom: 1px solid rgba(71, 116, 63, .1);
  backdrop-filter: blur(18px);
}

.brand strong {
  font-size: clamp(1.45rem, 2vw, 2rem);
}

.brand em {
  font-size: clamp(1.05rem, 1.35vw, 1.45rem);
}

.nav {
  gap: clamp(1.2rem, 3vw, 3.5rem);
  font-size: .9rem;
}

.button {
  border-radius: 12px;
  box-shadow: 0 16px 34px rgba(255, 101, 88, .24);
}

.section {
  width: min(100% - 2rem, var(--max));
  padding: clamp(4rem, 7vw, 6.5rem) 0;
}

.hero {
  width: min(100% - 2rem, var(--max));
  grid-template-columns: minmax(310px, .82fr) minmax(420px, 1.18fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  min-height: 690px;
  padding: clamp(2rem, 5vw, 4rem) 0 3rem;
}

h1 {
  max-width: 560px;
  font-size: clamp(4rem, 6vw, 6.5rem);
  line-height: .9;
}

.hero-text {
  max-width: 500px;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
}

.hero-art {
  min-height: 560px;
  margin-right: -2rem;
}

.hero-art img {
  height: min(58vw, 650px);
  border-radius: 28px 0 0 28px;
  filter: drop-shadow(0 30px 60px rgba(24, 36, 28, .16));
}

.macro-card {
  width: min(330px, 46%);
  padding: 1.35rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 24px 60px rgba(25, 38, 28, .18);
}

.feature-strip {
  width: min(100% - 2rem, var(--max));
  gap: 1rem;
}

.mini-card,
.mini-card:first-child,
.mini-card:last-child {
  min-height: 112px;
  border-radius: 16px;
  border-right-width: 1px;
  background: rgba(255, 253, 249, .86);
  box-shadow: 0 18px 42px rgba(25, 38, 28, .08);
}

.section--center {
  border-radius: 0;
}

.responsive-page #start,
.responsive-page #method,
.responsive-page #ideas,
.section--warm {
  padding-right: max(1rem, calc((100vw - var(--max)) / 2));
  padding-left: max(1rem, calc((100vw - var(--max)) / 2));
}

.responsive-page #start {
  background: linear-gradient(180deg, #f4f9f0, #fffdf9);
}

.responsive-page #method {
  background: linear-gradient(180deg, #fff8ee, #fffdf9);
}

.section--warm {
  background:
    radial-gradient(circle at 93% 5%, rgba(71, 116, 63, .16), transparent 18rem),
    linear-gradient(180deg, #fbf5ec, #fffaf3);
}

.responsive-page #ideas {
  background: linear-gradient(180deg, #f8fbf5, #fffdf9);
}

.section-title {
  font-size: clamp(2.1rem, 3.5vw, 3.35rem);
}

.section-intro {
  max-width: 720px;
}

.card-grid {
  gap: 1.35rem;
}

.info-card,
.guide-card,
.life-card,
.step-card,
.download-card,
.chat-card,
blockquote {
  border-radius: 16px;
  background: rgba(255, 253, 249, .9);
  box-shadow: 0 18px 42px rgba(25, 38, 28, .08);
}

.info-card,
.step-card {
  padding: 1.35rem;
}

.info-card img,
.guide-card img,
.life-card img {
  height: 190px;
  border-radius: 12px;
}

.guide-card,
.life-card {
  padding: .9rem .9rem 1.25rem;
}

.steps {
  gap: 1.35rem;
}

.note {
  max-width: 900px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
}

.guide-layout {
  grid-template-columns: 1fr minmax(210px, .24fr);
  gap: 1.35rem;
}

.community {
  grid-template-columns: 230px 1fr minmax(280px, .8fr);
  gap: 1.5rem;
  padding-top: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.community-image {
  width: 220px;
  height: 220px;
}

.site-footer {
  background: linear-gradient(180deg, #fff, #fbf7ef);
}

.footer-grid,
.footer-bottom {
  width: min(100% - 2rem, var(--max));
}

@media (max-width: 900px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .nav {
    display: none;
  }

  .hero,
  .guide-layout,
  .community {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
  }

  .hero-art {
    min-height: 380px;
    margin-right: 0;
  }

  .hero-art img {
    height: 420px;
    border-radius: 24px;
  }

  .feature-strip,
  .four,
  .steps,
  .guides,
  .quotes,
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .site-header {
    width: min(100% - 1.25rem, var(--max));
  }

  .button--small {
    display: none;
  }

  .section,
  .hero,
  .feature-strip,
  .footer-grid,
  .footer-bottom {
    width: min(100% - 1.25rem, var(--max));
  }

  h1 {
    font-size: clamp(3rem, 14vw, 4.2rem);
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .feature-strip,
  .four,
  .steps,
  .guides,
  .quotes,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .macro-card {
    position: relative;
    top: auto;
    right: auto;
    width: calc(100% - 1.5rem);
    margin: -4.5rem auto 0;
  }
}

/* Final composition polish */
.hero {
  align-items: center;
}

.hero-art {
  isolation: isolate;
}

.hero-art img {
  object-position: center;
}

.hero-art::before {
  content: "";
  position: absolute;
  inset: auto 8% -4% 8%;
  z-index: -1;
  height: 34%;
  border-radius: 999px;
  background: rgba(47, 75, 48, .12);
  filter: blur(32px);
}

.info-card img,
.guide-card img,
.life-card img,
.step-card--image img,
.community-image {
  object-position: center;
}

.info-card,
.guide-card,
.life-card,
.step-card,
.mini-card,
.download-card,
.chat-card {
  border: 1px solid rgba(78, 92, 70, .11);
}

.life-card {
  min-height: 360px;
}

.life-card img {
  height: 175px;
}

@media (min-width: 641px) and (max-width: 900px) {
  .hero {
    grid-template-columns: minmax(240px, .82fr) minmax(310px, 1.18fr);
    gap: 1.65rem;
    padding-top: 3rem;
  }

  h1 {
    font-size: clamp(3.25rem, 8.8vw, 4.75rem);
  }

  .hero-text {
    font-size: 1rem;
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-actions .button {
    width: auto;
    min-width: 250px;
  }

  .hero-art {
    min-height: 390px;
  }

  .hero-art img {
    height: 390px;
    border-radius: 24px;
  }

  .macro-card {
    top: auto;
    right: 1.25rem;
    bottom: 1.25rem;
    width: min(250px, 72%);
    padding: 1rem;
    border-radius: 16px;
  }

  .feature-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mini-card {
    align-items: flex-start;
    flex-direction: column;
    gap: .7rem;
  }

  .icon {
    width: 46px;
    height: 46px;
  }

  .four,
  .guides {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .info-card img,
  .guide-card img,
  .life-card img {
    height: 210px;
  }
}

@media (max-width: 640px) {
  .hero {
    padding-top: 2rem;
  }

  .hero-art img {
    height: 320px;
    object-position: center;
  }

  .macro-card {
    margin-top: -2.25rem;
    border: 1px solid rgba(71, 116, 63, .12);
    border-radius: 18px;
  }

  .info-card img,
  .guide-card img,
  .life-card img {
    height: 220px;
  }

  .life-card {
    min-height: auto;
  }
}

/* Alena image method redesign */
.responsive-page #method.method-section {
  padding-top: clamp(3.8rem, 5.6vw, 5.8rem);
  padding-bottom: clamp(3.2rem, 5vw, 5rem);
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 255, 255, .88), transparent 20rem),
    linear-gradient(180deg, #fff8ee 0%, #fffdf9 78%);
  border-top: 1px solid rgba(71, 116, 63, .1);
  border-bottom: 1px solid rgba(71, 116, 63, .1);
}

#method .method-reference {
  display: none;
}

#method.method-section .eyebrow {
  margin-bottom: .42rem;
  color: var(--green);
  letter-spacing: .12em;
}

#method.method-section .section-title {
  max-width: 980px;
  margin: 0 auto;
  font-size: clamp(2.35rem, 4.1vw, 3.85rem);
  line-height: .98;
}

.method-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr);
  gap: clamp(.85rem, 1.5vw, 1.25rem);
  align-items: stretch;
  width: min(100%, 1260px);
  margin: clamp(1.35rem, 2vw, 1.8rem) auto 0;
}

.method-step-card {
  position: relative;
  display: block;
  min-height: 308px;
  overflow: hidden;
  padding: clamp(1.15rem, 1.7vw, 1.55rem);
  border: 1px solid rgba(78, 92, 70, .13);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 251, 244, .9)),
    radial-gradient(circle at 78% 42%, rgba(71, 116, 63, .09), transparent 12rem);
  box-shadow:
    0 26px 60px rgba(28, 38, 29, .1),
    0 1px 0 rgba(255, 255, 255, .9) inset;
  text-align: left;
  transform: translateY(0);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.method-step-card:hover {
  border-color: rgba(71, 116, 63, .28);
  box-shadow:
    0 34px 72px rgba(28, 38, 29, .14),
    0 1px 0 rgba(255, 255, 255, .95) inset;
  transform: translateY(-6px);
}

.method-copy {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  width: 48%;
  min-width: 138px;
  min-height: 260px;
}

#method .method-copy .step-number {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 0 1rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #47743f, #2f5d2b);
  color: #fff;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  box-shadow: 0 13px 26px rgba(49, 91, 46, .28);
}

#method .method-copy h3 {
  max-width: 11rem;
  margin: 0 0 .7rem;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.24rem, 1.32vw, 1.48rem);
  font-weight: 900;
  line-height: 1.04;
}

#method .method-copy p {
  max-width: 11.5rem;
  margin: 0;
  color: #526071;
  font-size: clamp(.82rem, .88vw, .94rem);
  font-weight: 650;
  line-height: 1.42;
}

#method .method-copy .step-examples {
  margin-top: auto;
  padding-top: .95rem;
  color: #495666;
}

#method .method-copy .step-examples strong {
  display: block;
  margin-bottom: .32rem;
  color: var(--green-dark);
}

.method-image {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -2.3rem;
  width: min(66%, 230px);
  margin: 0;
  transform: translateY(-50%);
}

.method-image::before {
  content: "";
  position: absolute;
  inset: 12% 9% -9%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(49, 61, 41, .16);
  filter: blur(18px);
}

.method-image img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  box-shadow:
    0 24px 38px rgba(30, 35, 26, .18),
    0 0 0 10px rgba(255, 255, 255, .55);
}

.method-arrow {
  display: grid;
  place-items: center;
  align-self: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg, #47743f, #315b2e);
  color: #fff;
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 16px 30px rgba(49, 91, 46, .3);
}

#method.method-section .note {
  width: min(100%, 1120px);
  margin: 1.35rem auto 0;
  padding: .78rem 1.25rem;
  border: 1px solid rgba(71, 116, 63, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 12px 30px rgba(33, 44, 31, .06);
  color: #1f2a23;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.05rem, 1.25vw, 1.3rem);
}

@media (max-width: 1120px) {
  .method-steps {
    grid-template-columns: 1fr;
    width: min(100%, 760px);
  }

  .method-arrow {
    width: 40px;
    height: 40px;
    margin: -.15rem auto;
    transform: rotate(90deg);
  }

  .method-step-card {
    min-height: 270px;
  }

  .method-image {
    width: min(100%, 270px);
    right: -.7rem;
  }

  #method .method-copy p,
  #method .method-copy h3 {
    max-width: 22rem;
  }
}

@media (max-width: 640px) {
  .responsive-page #method.method-section {
    padding-top: 3.2rem;
    padding-bottom: 3.2rem;
  }

  #method.method-section .section-title {
    font-size: clamp(2.15rem, 11vw, 3.15rem);
  }

  .method-steps {
    gap: .8rem;
  }

  .method-step-card {
    min-height: auto;
    padding: 1.15rem;
    border-radius: 20px;
  }

  .method-copy {
    width: 100%;
    min-height: 0;
  }

  #method .method-copy .step-number {
    width: 46px;
    height: 46px;
    margin-bottom: .85rem;
    font-size: 1.45rem;
  }

  #method .method-copy h3,
  #method .method-copy p {
    max-width: none;
  }

  #method .method-copy .step-examples {
    margin-top: 0;
    padding-top: .9rem;
  }

  .method-image {
    position: relative;
    top: auto;
    right: auto;
    justify-self: center;
    width: min(78vw, 260px);
    margin: 1.1rem auto .25rem;
    transform: none;
  }

  .method-image img {
    box-shadow:
      0 20px 34px rgba(30, 35, 26, .16),
      0 0 0 8px rgba(255, 255, 255, .58);
  }

  .method-arrow {
    width: 36px;
    height: 36px;
    font-size: 1.75rem;
  }

  #method.method-section .note {
    border-radius: 18px;
  }
}

/* Guides download CTA moved below the cards */
#guides .guide-layout {
  display: block;
  width: min(100%, 1160px);
  margin: 0 auto;
}

#guides .guides {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.starter-download {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(180px, .42fr);
  gap: 1rem;
  align-items: center;
  width: min(100%, 980px);
  margin: 1.25rem auto 0;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(71, 116, 63, .16);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(255, 248, 238, .9)),
    radial-gradient(circle at 83% 40%, rgba(255, 101, 88, .12), transparent 14rem);
  box-shadow: 0 20px 48px rgba(25, 38, 28, .08);
  text-align: left;
}

.starter-download .starter-kicker {
  margin: 0 0 .25rem;
  color: var(--green);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.starter-download h3 {
  margin: 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 1.65vw, 1.85rem);
  line-height: 1.08;
}

.starter-download .button {
  justify-self: center;
  min-width: 220px;
  box-shadow: 0 18px 38px rgba(255, 101, 88, .24);
}

.starter-download > p {
  margin: 0;
  color: #566373;
  font-size: .95rem;
  font-weight: 650;
  line-height: 1.35;
}

@media (max-width: 900px) {
  #guides .guides {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .starter-download {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .starter-download .button {
    justify-self: start;
  }
}

@media (max-width: 640px) {
  #guides .guides {
    grid-template-columns: 1fr;
  }

  .starter-download {
    padding: 1rem;
    border-radius: 18px;
  }

  .starter-download .button {
    width: 100%;
    min-width: 0;
  }
}

/* Whole-card flip for basics cards */
#start .info-card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  perspective: 1200px;
}

#start .info-card-inner {
  position: relative;
  width: 100%;
  min-height: inherit;
  transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.2, .8, .2, 1);
}

#start .info-card.is-open .info-card-inner {
  transform: rotateY(180deg);
}

#start .info-face {
  display: flex;
  flex-direction: column;
  min-height: inherit;
  padding: clamp(1.35rem, 2vw, 2rem);
  border: 1px solid rgba(91, 75, 54, .13);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 253, 249, .97)),
    radial-gradient(circle at 50% 45%, rgba(238, 245, 233, .42), transparent 12rem);
  box-shadow:
    0 22px 50px rgba(33, 44, 31, .08),
    inset 0 1px 0 rgba(255, 255, 255, .75);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#start .info-face--back {
  position: absolute;
  inset: 0;
  justify-content: center;
  background:
    radial-gradient(circle at 82% 14%, rgba(71, 116, 63, .13), transparent 10rem),
    linear-gradient(145deg, #fffdf9, #f3f8ee);
  transform: rotateY(180deg);
}

#start .info-face--back h3 {
  margin: .6rem 0 .85rem;
  font-size: clamp(1.55rem, 2vw, 2.15rem);
}

#start .info-face--back p {
  color: #4f5e69;
  font-size: 1.02rem;
  line-height: 1.55;
}

#start .domain-link {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 1rem;
  padding: .55rem .8rem;
  border: 1px solid rgba(71, 116, 63, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: var(--green-dark);
  font-size: .95rem;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(33, 44, 31, .08);
}

#start .flip-label {
  color: var(--green);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#start .info-face--back .info-toggle {
  margin-top: 1.2rem;
}

#start .info-card.is-open .info-face--front {
  pointer-events: none;
  visibility: hidden;
}

#start .info-card:not(.is-open) .info-face--back {
  pointer-events: none;
  visibility: hidden;
}

#start .info-card.is-open .info-face--back {
  visibility: visible;
}

#start .info-card.is-open .info-toggle::after {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  #start .info-card-inner {
    transition: none;
  }
}

/* Final override: keep tracking phone mockup contained inside its card */
#start .info-face--front > img.basics-food-photo {
  order: 2;
  width: min(92%, 250px);
  height: auto;
  aspect-ratio: 1;
  max-height: none;
  margin: 1.15rem auto 1.35rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  box-shadow:
    0 20px 34px rgba(27, 36, 25, .17),
    0 0 0 10px rgba(255, 255, 255, .62);
  filter: none;
}

#start .info-face--front .phone-card {
  isolation: isolate;
  width: min(170px, 78%);
  min-height: 0;
  max-height: 255px;
  aspect-ratio: 9 / 17.5;
  margin: .95rem auto 1rem;
  padding: 8px;
  border: 2px solid #2a2d31;
  border-radius: 31px;
  background:
    linear-gradient(145deg, #050608, #1e2228 42%, #050608);
  box-shadow:
    0 22px 42px rgba(18, 24, 32, .26),
    0 0 0 3px #07080a,
    0 0 0 5px rgba(255, 255, 255, .14),
    inset 0 1px 3px rgba(255, 255, 255, .25),
    inset 0 -10px 18px rgba(0, 0, 0, .38);
}

#start .info-face--front .phone-card::before {
  top: 14px;
  left: 50%;
  z-index: 4;
  width: 54px;
  height: 15px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  background:
    radial-gradient(circle at 80% 50%, #23272d 0 3px, transparent 4px),
    linear-gradient(180deg, #030405, #121419);
  box-shadow:
    0 2px 5px rgba(0, 0, 0, .4),
    inset 0 1px 1px rgba(255, 255, 255, .12);
  transform: translateX(-50%);
}

#start .info-face--front .phone-card::after {
  content: "";
  position: absolute;
  inset: 10px 10px 12px;
  z-index: 3;
  border-radius: 23px;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, .24), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 34%);
  pointer-events: none;
  mix-blend-mode: screen;
}

#start .info-face--front .phone-shell {
  position: absolute;
}

#start .info-face--front .phone-card .phone-button {
  position: absolute;
  z-index: -1;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #1c2025, #07080a);
  box-shadow: inset 1px 0 1px rgba(255, 255, 255, .16);
}

#start .info-face--front .phone-card .phone-button--left {
  top: 62px;
  left: -8px;
  height: 34px;
}

#start .info-face--front .phone-card .phone-button--left + .phone-button--left {
  top: 108px;
}

#start .info-face--front .phone-card .phone-button--right {
  top: 86px;
  right: -8px;
  height: 54px;
}

#start .info-face--front .phone-card > img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 23px;
  object-fit: cover;
  object-position: 50% 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

@media (max-width: 640px) {
  #start .info-face--front .phone-card {
    width: min(185px, 64vw);
    max-height: 285px;
  }
}

/* MacroAlign phone art already includes the device frame */
#start .info-face--front .phone-card {
  width: min(155px, 72%);
  max-height: 300px;
  aspect-ratio: 693 / 1409;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: transparent;
  box-shadow: 0 24px 42px rgba(18, 24, 32, .16);
}

#start .info-face--front .phone-card::before,
#start .info-face--front .phone-card::after {
  content: none;
}

#start .info-face--front .phone-card > img {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 24px;
  object-fit: contain;
  object-position: center;
  box-shadow: none;
}

@media (max-width: 640px) {
  #start .info-face--front .phone-card {
    width: min(175px, 60vw);
    max-height: 330px;
  }
}

/* Starter pack lead form modal */
body.modal-open {
  overflow: hidden;
}

.starter-modal[hidden] {
  display: none;
}

.starter-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}

.starter-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 17, 42, .42);
  backdrop-filter: blur(8px);
}

.starter-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 460px);
  padding: clamp(1.35rem, 4vw, 2rem);
  border: 1px solid rgba(71, 116, 63, .16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 12%, rgba(71, 116, 63, .14), transparent 12rem),
    linear-gradient(180deg, #fffdf9, #fbf5ec);
  box-shadow: 0 34px 80px rgba(7, 17, 42, .28);
}

.starter-modal__close {
  position: absolute;
  top: .8rem;
  right: .85rem;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(71, 116, 63, .1);
  color: var(--green-dark);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.starter-modal__kicker {
  margin: 0 0 .45rem;
  color: var(--green);
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.starter-modal h2 {
  margin: 0 2rem .65rem 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 6vw, 2.65rem);
  line-height: .98;
}

.starter-modal p {
  color: #53606d;
  font-size: 1rem;
  line-height: 1.5;
}

.starter-form {
  display: grid;
  gap: .72rem;
  margin-top: 1.1rem;
}

.starter-form label {
  color: var(--ink);
  font-size: .92rem;
  font-weight: 900;
}

.starter-form input {
  width: 100%;
  min-height: 48px;
  padding: 0 .95rem;
  border: 1px solid rgba(83, 96, 109, .22);
  border-radius: 12px;
  background: rgba(255, 255, 255, .86);
  color: var(--ink);
  font: inherit;
  outline: none;
}

.starter-form input:focus {
  border-color: rgba(71, 116, 63, .52);
  box-shadow: 0 0 0 4px rgba(71, 116, 63, .12);
}

.starter-form .button {
  width: 100%;
  margin-top: .35rem;
  border: 0;
}

.starter-success[hidden] {
  display: none;
}

.starter-success {
  display: grid;
  gap: .75rem;
  margin-top: 1.1rem;
  padding: 1rem;
  border: 1px solid rgba(71, 116, 63, .18);
  border-radius: 16px;
  background: rgba(255, 255, 255, .72);
}

.starter-success strong {
  color: var(--green-dark);
  font-size: 1.05rem;
}

.starter-success p {
  margin: 0;
}

.starter-success .button {
  width: 100%;
}

.starter-modal__fine {
  margin: .85rem 0 0;
  font-size: .86rem;
}

/* Keep italic hero word from clipping on narrow screens */
h1 span {
  max-width: 100%;
  overflow: visible;
}

@media (max-width: 760px) {
  h1 {
    max-width: min(100%, 10ch);
  }

  h1 span {
    width: fit-content;
    max-width: calc(100vw - 2rem);
    font-size: .9em;
    line-height: .92;
    white-space: nowrap;
  }
}

@media (max-width: 430px) {
  h1 {
    font-size: clamp(2.72rem, 12.4vw, 3.45rem);
  }

  h1 span {
    font-size: .86em;
  }
}

/* Finished landing-page visual system */
:root {
  --max: 1240px;
  --ink: #101b34;
  --muted: #596678;
  --paper: #fffefa;
  --line: #e8e4d9;
}

html { scroll-behavior: smooth; }

body {
  background:
    linear-gradient(180deg, #fffefa 0%, #fffefa 22%, #f6f9f2 22%, #fffefa 45%, #fcf6ee 45%, #fffefa 70%, #f6f9f2 70%, #fffefa 100%);
  color: var(--ink);
}

.site-header {
  display: grid;
  grid-template-columns: minmax(235px, 1fr) auto minmax(235px, 1fr);
  align-items: center;
  width: min(100% - 3rem, var(--max));
  min-height: 86px;
  padding: .8rem 0;
  border: 0;
  background: rgba(255, 254, 250, .82);
  box-shadow: none;
}

.site-header::before {
  height: 86px;
  background: rgba(255, 254, 250, .9);
  border-bottom: 1px solid rgba(15, 27, 52, .08);
  box-shadow: 0 10px 30px rgba(22, 31, 36, .05);
}

.brand { gap: 0; text-decoration: none; }
.brand strong { font-size: clamp(1.45rem, 2vw, 2.05rem); letter-spacing: -.025em; }
.brand em { margin-top: -.18rem; font-size: clamp(1rem, 1.4vw, 1.38rem); letter-spacing: -.015em; }

.nav { justify-self: center; gap: clamp(1.65rem, 3.2vw, 3.4rem); }
.nav a { position: relative; padding: .55rem 0; font-weight: 750; }
.nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: .15rem;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
}
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
.site-header > .button { justify-self: end; }

.button {
  min-height: 48px;
  padding: .82rem 1.2rem;
  border-radius: 10px;
  font-weight: 850;
  box-shadow: 0 13px 28px rgba(255, 101, 88, .19);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.button:hover { box-shadow: 0 18px 34px rgba(255, 101, 88, .26); filter: saturate(1.06); transform: translateY(-2px); }

.hero {
  grid-template-columns: minmax(335px, .76fr) minmax(520px, 1.24fr);
  gap: clamp(3rem, 6vw, 6.5rem);
  min-height: 650px;
  padding-top: clamp(3rem, 5.5vw, 5.5rem);
  padding-bottom: clamp(3rem, 5vw, 5.25rem);
}

.hero-copy { max-width: 560px; }
.hero-copy .eyebrow { margin-bottom: 1rem; }
h1 { max-width: 590px; font-size: clamp(4.25rem, 6.05vw, 6.75rem); line-height: .92; letter-spacing: -.04em; }
h1 span { display: inline-block; padding: 0 .04em .06em; }
.hero-text { max-width: 470px; margin-top: 1.6rem; font-size: clamp(1.08rem, 1.45vw, 1.28rem); line-height: 1.55; }
.hero-actions { gap: 1.05rem; margin-top: 2rem; }
.link-action { font-weight: 800; }

.hero-art { min-height: 500px; margin-right: -3.5rem; }
.hero-art img { height: min(52vw, 650px); border-radius: 30px 0 0 30px; }
.hero-art::before { inset: auto 12% -4% 15%; height: 32%; background: rgba(71, 116, 63, .13); }
.macro-card { width: min(315px, 45%); padding: 1.4rem; border: 1px solid rgba(255, 255, 255, .7); border-radius: 18px; box-shadow: 0 24px 55px rgba(16, 27, 52, .18); }

.feature-strip { position: relative; z-index: 2; margin-top: -1.75rem; }
.mini-card, .mini-card:first-child, .mini-card:last-child {
  min-height: 124px;
  padding: 1.35rem 1.4rem;
  border: 1px solid rgba(17, 27, 51, .08);
  border-radius: 14px;
  background: rgba(255, 254, 250, .92);
  box-shadow: 0 14px 32px rgba(20, 34, 25, .07);
  transition: transform .24s ease, box-shadow .24s ease;
}
.mini-card:hover { box-shadow: 0 22px 40px rgba(20, 34, 25, .11); transform: translateY(-4px); }
.mini-card h2 { font-size: 1.18rem; }

.section { padding-top: clamp(5.5rem, 8vw, 8rem); padding-bottom: clamp(5.5rem, 8vw, 8rem); }
.section-title { max-width: 920px; margin-right: auto; margin-left: auto; font-size: clamp(2.45rem, 3.75vw, 4.15rem); line-height: 1.03; letter-spacing: -.035em; }
.section-intro { margin-top: .75rem; font-size: 1.06rem; }
.eyebrow { font-weight: 850; letter-spacing: .14em; }

.responsive-page #start { background: linear-gradient(180deg, #f4f8f1 0%, #fffefa 100%); }
.responsive-page #method { background: linear-gradient(180deg, #fff8ef 0%, #fffefa 100%); }
.section--warm { background: linear-gradient(180deg, #fdf4ea 0%, #fffaf3 100%); }
.responsive-page #ideas { background: linear-gradient(180deg, #f4f8f0 0%, #fffefa 100%); }

#start .card-grid { align-items: stretch; margin-top: 2.35rem; }
#start .info-face { min-height: 100%; padding: 1.6rem; border-radius: 16px; box-shadow: 0 16px 35px rgba(18, 34, 26, .07); }
#start .info-face:hover { box-shadow: 0 24px 46px rgba(18, 34, 26, .11); }
#start .info-face h3 { font-size: 1.28rem; letter-spacing: -.02em; }
#start .info-face p { font-size: .95rem; line-height: 1.5; }
#start .info-toggle { margin-top: auto; }

#method .method-steps { margin-top: 2.5rem; }
.method-step-card { border-radius: 18px; }
.method-arrow { width: 42px; height: 42px; }

#guides .guides { gap: 1.25rem; margin-top: 2.35rem; }
.guide-card { overflow: hidden; padding: 0 0 1.25rem; border-radius: 15px; background: #fffefa; box-shadow: 0 14px 34px rgba(18, 34, 26, .07); transition: transform .24s ease, box-shadow .24s ease; }
.guide-card:hover { box-shadow: 0 24px 44px rgba(18, 34, 26, .11); transform: translateY(-5px); }
.guide-card img { width: 100%; height: 220px; border-radius: 0; }
.guide-card h3, .guide-card p { margin-right: 1.1rem; margin-left: 1.1rem; }
.starter-download { margin-top: 1.8rem; border-radius: 16px; }

#ideas .card-grid { margin-top: 2.5rem; }
.life-card { overflow: hidden; min-height: 0; padding: 0 0 1.4rem; border-radius: 16px; background: #fffefa; box-shadow: 0 14px 34px rgba(18, 34, 26, .07); transition: transform .24s ease, box-shadow .24s ease; }
.life-card:hover { box-shadow: 0 24px 44px rgba(18, 34, 26, .11); transform: translateY(-5px); }
.life-card img { width: 100%; height: 200px; border-radius: 0; }
.life-card h3, .life-card p { margin-right: 1.2rem; margin-left: 1.2rem; }
.life-card h3 { margin-top: 1.2rem; }

.community { padding-top: clamp(5rem, 7vw, 7rem); padding-bottom: clamp(5rem, 7vw, 7rem); }
.community-image { width: 250px; height: 250px; border-radius: 22px; box-shadow: 0 22px 45px rgba(16, 27, 52, .13); }
.chat-card { border-radius: 18px; background: rgba(255, 254, 250, .9); }
.site-footer { border-top: 1px solid rgba(16, 27, 52, .08); }

@media (max-width: 1050px) {
  .site-header { grid-template-columns: 1fr auto; }
  .nav { display: none; }
  .hero { grid-template-columns: minmax(280px, .82fr) minmax(410px, 1.18fr); gap: 2.5rem; }
  .hero-art { margin-right: -1.5rem; }
}

@media (max-width: 760px) {
  .site-header { width: min(100% - 1.5rem, var(--max)); min-height: 72px; }
  .site-header::before { height: 72px; }
  .site-header > .button { display: none; }
  .hero { grid-template-columns: 1fr; min-height: 0; gap: 2rem; padding-top: 2.25rem; }
  .hero-art { min-height: 0; margin-right: 0; }
  .hero-art img { height: min(104vw, 490px); border-radius: 20px; }
  .macro-card { width: min(300px, calc(100% - 2rem)); }
  h1 { max-width: 100%; font-size: clamp(3.25rem, 13.5vw, 4.55rem); }
  .section { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .section-title { font-size: clamp(2.25rem, 10vw, 3.15rem); }
  .feature-strip { margin-top: 0; }
  .guide-card img { height: 245px; }
  .life-card img { height: 230px; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy { animation: landing-rise .7s cubic-bezier(.2,.8,.2,1) both; }
  .hero-art { animation: landing-rise .8s .08s cubic-bezier(.2,.8,.2,1) both; }
}

@keyframes landing-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Product-launch finish: restrained, editorial, and performance-minded */
:root {
  --ink: #0d1930;
  --muted: #526174;
  --green: #436e3d;
  --green-dark: #2e562c;
  --coral: #f75f52;
  --paper: #fffefa;
  --line: rgba(13, 25, 48, .1);
}

body {
  background: var(--paper);
  text-rendering: optimizeLegibility;
}

.site-header {
  width: min(100% - 4rem, 1320px);
  min-height: 92px;
}

.site-header::before {
  height: 92px;
  background: rgba(255, 254, 250, .94);
  box-shadow: 0 1px 0 rgba(13, 25, 48, .07), 0 12px 32px rgba(13, 25, 48, .035);
}

.brand strong { font-weight: 800; }
.brand em { color: var(--green); }
.nav a { color: var(--ink); font-size: .92rem; letter-spacing: .01em; }
.site-header > .button {
  min-width: 196px;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(247, 95, 82, .18);
}

.hero {
  width: min(100% - 4rem, 1320px);
  grid-template-columns: minmax(360px, .82fr) minmax(560px, 1.18fr);
  gap: clamp(3.5rem, 7vw, 8.5rem);
  min-height: 710px;
  padding-top: clamp(4rem, 7vw, 7.5rem);
  padding-bottom: clamp(3.5rem, 6vw, 6.25rem);
}

.hero-copy { align-self: center; }
.hero-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.35rem;
  color: var(--green-dark);
}
.hero-copy .eyebrow::before {
  width: 26px;
  height: 1px;
  background: currentColor;
  content: "";
}

h1 {
  max-width: 620px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4.75rem, 6.55vw, 7.75rem);
  font-weight: 700;
  line-height: .88;
  letter-spacing: -.055em;
}

h1 span {
  color: var(--green);
  font-style: italic;
  font-weight: 500;
}

.hero-text {
  max-width: 430px;
  margin-top: 1.9rem;
  color: var(--muted);
  font-size: clamp(1.08rem, 1.42vw, 1.3rem);
  font-weight: 460;
  line-height: 1.55;
}

.hero-actions { margin-top: 2.35rem; }
.hero-actions .button { min-width: 248px; }
.link-action { color: var(--ink); }

.hero-art {
  min-height: 570px;
  margin-right: -4rem;
}

.hero-art img {
  height: min(52vw, 695px);
  border-radius: 36px 0 0 36px;
  box-shadow: 0 30px 65px rgba(19, 28, 31, .12);
}

.hero-art::before {
  inset: auto 12% -3% 16%;
  height: 26%;
  background: rgba(67, 110, 61, .16);
  filter: blur(44px);
}

.macro-card {
  width: min(330px, 44%);
  padding: 1.55rem;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 16px;
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 28px 60px rgba(13, 25, 48, .18);
  backdrop-filter: blur(16px);
}

.feature-strip {
  width: min(100% - 4rem, 1320px);
  margin-top: -2rem;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 254, 250, .92);
  box-shadow: 0 20px 50px rgba(17, 29, 22, .07);
  overflow: hidden;
}

.mini-card,
.mini-card:first-child,
.mini-card:last-child {
  min-height: 132px;
  padding: 1.65rem 1.8rem;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.mini-card:last-child { border-right: 0; }
.mini-card:hover { background: #fff; box-shadow: none; transform: none; }
.mini-card h2 { margin-bottom: .35rem; font-family: Georgia, "Times New Roman", serif; font-size: 1.38rem; letter-spacing: -.025em; }
.mini-card p { color: var(--muted); }

.section { padding-top: clamp(6.75rem, 10vw, 10.5rem); padding-bottom: clamp(6.75rem, 10vw, 10.5rem); }
.responsive-page #start { background: linear-gradient(180deg, #f7faf4 0%, #fffefa 92%); }
.responsive-page #method { background: linear-gradient(180deg, #fff9f1 0%, #fffefa 92%); }
.section--warm { background: linear-gradient(180deg, #fdf6ed 0%, #fffefa 94%); }
.responsive-page #ideas { background: linear-gradient(180deg, #f6f9f3 0%, #fffefa 92%); }

.section-title {
  max-width: 980px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.8rem, 4vw, 4.65rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.045em;
}
.section-intro { color: var(--muted); font-size: 1.08rem; }

#start .card-grid { gap: 1rem; }
#start .info-face {
  padding: 1.7rem;
  border: 1px solid rgba(13, 25, 48, .09);
  border-radius: 14px;
  background: rgba(255, 254, 250, .95);
  box-shadow: 0 14px 32px rgba(18, 34, 26, .055);
}
#start .info-face:hover { box-shadow: 0 22px 42px rgba(18, 34, 26, .09); }
#start .info-face h3 { font-family: Georgia, "Times New Roman", serif; font-size: 1.42rem; }
#start .info-toggle { font-size: .82rem; letter-spacing: .02em; }

.method-step-card {
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(24, 35, 26, .075);
}
.method-step-card:hover { box-shadow: 0 26px 54px rgba(24, 35, 26, .11); }
.method-arrow { box-shadow: 0 14px 30px rgba(49, 91, 46, .24); }

.guide-card,
.life-card {
  border: 1px solid rgba(13, 25, 48, .08);
  border-radius: 14px;
  box-shadow: 0 13px 28px rgba(18, 34, 26, .06);
}
.guide-card:hover,
.life-card:hover { box-shadow: 0 23px 44px rgba(18, 34, 26, .1); }
.guide-card h3,
.life-card h3 { font-family: Georgia, "Times New Roman", serif; font-size: 1.38rem; letter-spacing: -.025em; }
.starter-download { border-radius: 14px; box-shadow: 0 18px 40px rgba(18, 34, 26, .065); }

.community { width: min(100% - 4rem, 1320px); }
.community-image { width: 265px; height: 265px; border-radius: 18px; }
.chat-card { border: 1px solid rgba(13, 25, 48, .08); border-radius: 16px; box-shadow: 0 18px 42px rgba(18, 34, 26, .065); }
.site-footer { background: #fbfaf6; }

@media (max-width: 1120px) {
  .hero { grid-template-columns: minmax(300px, .86fr) minmax(440px, 1.14fr); gap: 3rem; }
  .hero-art { margin-right: -2rem; }
  h1 { font-size: clamp(4.1rem, 7.2vw, 6.25rem); }
}

@media (max-width: 900px) {
  .site-header, .hero, .feature-strip, .community { width: min(100% - 2rem, 1320px); }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-art { min-height: 470px; margin-right: 0; }
  .hero-art img { height: min(88vw, 590px); border-radius: 28px; }
  .feature-strip { gap: 1px; background: var(--line); }
  .mini-card, .mini-card:first-child, .mini-card:last-child { border: 0; background: #fffefa; }
}

@media (max-width: 640px) {
  .site-header { min-height: 74px; }
  .site-header::before { height: 74px; }
  .brand strong { font-size: 1.42rem; }
  .brand em { font-size: 1rem; }
  .hero { padding-top: 3rem; padding-bottom: 4rem; }
  h1 { font-size: clamp(3.25rem, 14vw, 4.45rem); line-height: .9; }
  .hero-text { font-size: 1.05rem; }
  .hero-art { min-height: 0; }
  .hero-art img { height: min(110vw, 450px); border-radius: 20px; }
  .macro-card { width: min(285px, calc(100% - 1.5rem)); padding: 1.15rem; }
  .feature-strip { margin-top: 0; border-radius: 12px; }
  .mini-card, .mini-card:first-child, .mini-card:last-child { min-height: 112px; padding: 1.2rem; }
  .section { padding-top: 5rem; padding-bottom: 5rem; }
  .section-title { font-size: clamp(2.35rem, 10vw, 3.25rem); }
}

/* Launch Editorial overhaul */
:root { font-size: 15px; }

body {
  background: #fffefa;
  color: #0d1930;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  width: 100%;
  min-height: 88px;
  padding: 0 max(1.5rem, calc((100vw - 1320px) / 2));
  border-bottom: 1px solid rgba(13, 25, 48, .08);
  background: rgba(255, 254, 250, .94);
  box-shadow: 0 10px 30px rgba(13, 25, 48, .035);
  backdrop-filter: blur(18px);
}

.site-header::before { content: none; }
.site-header .brand { justify-self: start; }
.site-header > .button { justify-self: end; min-width: 190px; }

.nav {
  display: flex;
  justify-self: center;
  gap: clamp(1.75rem, 3.1vw, 3.5rem);
}

.nav a {
  color: #0d1930;
  font-size: 1rem;
  font-weight: 720;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(13, 25, 48, .12);
  border-radius: 50%;
  background: #fffefa;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  margin: 4px auto;
  border-radius: 999px;
  background: #0d1930;
  transition: transform .2s ease;
}

.hero {
  width: min(100% - 3rem, 1320px);
  grid-template-columns: minmax(370px, .78fr) minmax(560px, 1.22fr);
  gap: clamp(4rem, 8vw, 9rem);
  min-height: 740px;
  padding-top: clamp(4.8rem, 8vw, 8.75rem);
  padding-bottom: clamp(4.6rem, 7vw, 7.5rem);
}

h1 { font-size: clamp(5rem, 6.65vw, 7.7rem); }
.hero-text { max-width: 455px; font-size: clamp(1.15rem, 1.3vw, 1.34rem); }
.hero-art { min-height: 600px; }
.hero-art img { height: min(52vw, 710px); border-radius: 34px 0 0 34px; }

.feature-strip {
  width: min(100% - 3rem, 1320px);
  margin-top: -2.75rem;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(16, 30, 23, .07);
}

.mini-card h2 { font-size: 1.5rem; }
.mini-card p,
.info-face p,
.guide-card p,
.life-card p,
.footer-brand p,
.newsletter p { font-size: 1rem; line-height: 1.55; }

.section { padding-top: clamp(7rem, 10vw, 10rem); padding-bottom: clamp(7rem, 10vw, 10rem); }
.section-title { font-size: clamp(3.1rem, 4.25vw, 5rem); }
.section-intro { font-size: 1.15rem; }

.responsive-page #start { background: #f7faf4; }
.responsive-page #method.method-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 10%, rgba(109, 151, 94, .25), transparent 28rem),
    linear-gradient(145deg, #142235, #0b1625 70%);
  border: 0;
}

#method.method-section .eyebrow,
#method.method-section .section-title,
#method.method-section .note { color: #fffefa; }
#method.method-section .eyebrow { color: #c6dfb8; }
#method.method-section .note {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
  box-shadow: none;
}

.method-step-card {
  min-height: 334px;
  border: 0;
  border-radius: 14px;
  background: #fffefa;
  box-shadow: 0 24px 55px rgba(0, 0, 0, .22);
}

.method-step-card:hover { transform: translateY(-5px); }
.method-image img { box-shadow: 0 22px 42px rgba(12, 19, 27, .22), 0 0 0 8px rgba(255, 255, 255, .82); }
.method-arrow { background: #f7f4ed; color: #213d2a; box-shadow: 0 16px 30px rgba(0, 0, 0, .25); }

.section--warm { background: #fff8ef; }
.responsive-page #ideas { background: #fffefa; }
.guide-card,
.life-card { border-radius: 12px; box-shadow: 0 14px 34px rgba(13, 25, 48, .065); }
.guide-card img,
.life-card img { filter: saturate(.96) contrast(1.02); }

.community {
  width: min(100% - 3rem, 1320px);
  padding-top: clamp(6rem, 8vw, 8rem);
  padding-bottom: clamp(6rem, 8vw, 8rem);
}

.site-footer { border-top: 1px solid rgba(13, 25, 48, .1); background: #f5f6f0; }
.footer-grid,
.footer-bottom { width: min(100% - 3rem, 1320px); }
.footer-links h2,
.newsletter h2 { font-size: 1rem; }
.footer-links a,
.newsletter small { font-size: .92rem; }

@media (max-width: 1080px) {
  .site-header {
    grid-template-columns: 1fr auto auto;
    gap: .75rem;
    min-height: 76px;
  }

  .site-header > .button { min-width: auto; }
  .nav-toggle { display: block; justify-self: end; }
  .nav {
    position: absolute;
    top: calc(100% + .65rem);
    right: 1.25rem;
    left: 1.25rem;
    display: grid;
    gap: 0;
    padding: .65rem;
    border: 1px solid rgba(13, 25, 48, .1);
    border-radius: 14px;
    background: rgba(255, 254, 250, .98);
    box-shadow: 0 20px 45px rgba(13, 25, 48, .13);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease;
  }

  .nav a { padding: .9rem 1rem; border-radius: 8px; }
  .nav a:hover { background: #f1f6ed; }
  body.nav-open .nav { opacity: 1; pointer-events: auto; transform: translateY(0); }
  body.nav-open .nav-toggle span:first-child { transform: translateY(2.75px) rotate(45deg); }
  body.nav-open .nav-toggle span:last-child { transform: translateY(-2.75px) rotate(-45deg); }

  .hero { grid-template-columns: minmax(300px, .85fr) minmax(420px, 1.15fr); gap: 3rem; }
  h1 { font-size: clamp(4.3rem, 7.2vw, 6.1rem); }
  .hero-art { min-height: 470px; margin-right: -1.5rem; }
  .hero-art img { height: min(54vw, 570px); }
}

@media (max-width: 780px) {
  .site-header { padding: 0 1.15rem; }
  .site-header > .button { display: none; }
  .hero,
  .feature-strip,
  .community,
  .footer-grid,
  .footer-bottom { width: min(100% - 2rem, 1320px); }
  .hero { grid-template-columns: 1fr; min-height: 0; gap: 2.5rem; padding-top: 3.8rem; padding-bottom: 4.7rem; }
  .hero-art { min-height: 0; margin-right: 0; }
  .hero-art img { height: min(110vw, 520px); border-radius: 22px; }
  h1 { font-size: clamp(3.55rem, 14.5vw, 5.05rem); }
  .hero-text { font-size: 1.12rem; }
  .feature-strip { grid-template-columns: 1fr; margin-top: 0; }
  .mini-card, .mini-card:first-child, .mini-card:last-child { min-height: auto; padding: 1.35rem; border-bottom: 1px solid var(--line); border-right: 0; }
  .mini-card:last-child { border-bottom: 0; }
  .section { padding-top: 5.75rem; padding-bottom: 5.75rem; }
  .section-title { font-size: clamp(2.65rem, 11vw, 3.7rem); }
  .method-step-card { min-height: auto; }
}

/* Meal-background hero based on the approved composition */
.hero {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: clamp(590px, 52vw, 760px);
  margin: 0;
  padding: clamp(4.2rem, 7.4vw, 8rem) max(3rem, calc((100vw - 1540px) / 2 + 3.5rem)) clamp(5.2rem, 7vw, 7rem);
  background-color: #fffefa;
  background-image:
    linear-gradient(90deg, #fffefa 0%, rgba(255, 254, 250, .98) 28%, rgba(255, 254, 250, .74) 42%, rgba(255, 254, 250, .12) 62%, rgba(255, 254, 250, 0) 75%),
    url("assets/macro-meal-side-background.png");
  background-position: center, right center;
  background-repeat: no-repeat;
  background-size: cover, auto 100%;
}

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: min(44vw, 650px);
  margin: 0;
}

.hero-copy .eyebrow {
  display: block;
  margin: 0 0 1.35rem;
  color: #087027;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(.92rem, 1.15vw, 1.15rem);
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.hero-copy .eyebrow::before { content: none; }

.hero h1 {
  margin: 0;
  color: #071221;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(4.7rem, 6.1vw, 7.4rem);
  font-weight: 900;
  line-height: .84;
  letter-spacing: -.075em;
}

.hero h1 span { color: inherit; font-style: normal; }

.hero-text {
  max-width: 33rem;
  margin-top: 1.65rem;
  color: #1d2b3f;
  font-size: clamp(1.2rem, 1.45vw, 1.55rem);
  font-weight: 500;
  line-height: 1.45;
}

.hero-actions { margin-top: 2rem; }
.hero-actions .button {
  min-width: 275px;
  min-height: 58px;
  padding: .9rem 1.35rem;
  border-radius: 8px;
  background: #087027;
  box-shadow: 0 16px 30px rgba(7, 112, 39, .2);
  font-size: 1.08rem;
}
.hero-actions .button:hover { background: #075e22; box-shadow: 0 20px 36px rgba(7, 112, 39, .25); }
.hero-actions .button span { margin-left: 1.45rem; font-size: 1.9rem; line-height: .6; vertical-align: -.12em; }

.feature-strip {
  position: relative;
  z-index: 2;
  width: min(100% - 7rem, 1540px);
  margin-top: -1.65rem;
  background: rgba(255, 254, 250, .96);
}

@media (max-width: 1050px) {
  .hero {
    min-height: 600px;
    padding-right: 2rem;
    padding-left: 2rem;
    background-image:
      linear-gradient(90deg, #fffefa 0%, rgba(255, 254, 250, .96) 42%, rgba(255, 254, 250, .55) 59%, rgba(255, 254, 250, .06) 78%),
      url("assets/macro-meal-side-background.png");
  }

  .hero-copy { max-width: 48vw; }
  .hero h1 { font-size: clamp(4.2rem, 7.1vw, 5.6rem); }
  .hero-text { font-size: 1.2rem; }
  .feature-strip { width: min(100% - 3rem, 1540px); }
}

@media (max-width: 780px) {
  .hero {
    align-items: flex-start;
    min-height: 670px;
    padding: 4.5rem 1.35rem 2rem;
    background-image:
      linear-gradient(180deg, rgba(255, 254, 250, .98) 0%, rgba(255, 254, 250, .95) 41%, rgba(255, 254, 250, .26) 61%, rgba(255, 254, 250, 0) 78%),
      url("assets/macro-meal-side-background.png");
    background-position: center, 62% bottom;
    background-size: cover, auto 72%;
  }

  .hero-copy { max-width: 100%; }
  .hero h1 { font-size: clamp(4rem, 17vw, 5.25rem); line-height: .86; }
  .hero-text { max-width: 27rem; margin-top: 1.35rem; font-size: 1.13rem; }
  .hero-actions { margin-top: 1.55rem; }
  .hero-actions .button { width: auto; min-width: 0; }
  .feature-strip { width: min(100% - 2rem, 1540px); margin-top: -1rem; }
}

/* Start-with-the-basics editorial learning grid */
.responsive-page #start {
  padding-top: clamp(5.75rem, 8vw, 8.5rem);
  padding-bottom: clamp(5.5rem, 8vw, 8rem);
  background: #fffefa;
}

#start .eyebrow {
  margin-bottom: 1.35rem;
  color: #087027;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(.92rem, 1.15vw, 1.1rem);
  font-weight: 900;
  letter-spacing: .11em;
}

#start .section-title {
  max-width: 52rem;
  color: #071221;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(3.5rem, 5.3vw, 6.4rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.07em;
}

#start .section-intro {
  max-width: 38rem;
  margin: 1.45rem auto 0;
  color: #17243a;
  font-size: clamp(1.2rem, 1.5vw, 1.5rem);
  font-weight: 500;
  line-height: 1.45;
}

#start .card-grid.four {
  width: min(100%, 1540px);
  margin: clamp(3.7rem, 5vw, 5rem) auto 0;
  padding-top: 2.25rem;
  border-top: 1px solid #d8dce0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

#start .info-card {
  min-height: 410px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  perspective: 1200px;
}

#start .info-card-inner { min-height: 410px; }

#start .info-face {
  min-height: 410px;
  padding: .55rem clamp(1.25rem, 2.2vw, 2.65rem) 1.25rem;
  border: 0;
  border-right: 1px solid #d8dce0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#start .info-card:last-child .info-face { border-right: 0; }

#start .info-face--back {
  border: 1px solid rgba(7, 112, 39, .2);
  border-radius: 14px;
  background: #f5faf1;
  box-shadow: 0 16px 34px rgba(13, 25, 48, .08);
}

#start .info-face--front h3 {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 52px;
  margin: 0 0 1.3rem;
  color: #071221;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.26rem, 1.55vw, 1.7rem);
  font-weight: 850;
  letter-spacing: -.045em;
  line-height: 1.02;
}

#start .info-face--front h3 span {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, #167b31, #74ae5a);
  color: #fff;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: 0 7px 15px rgba(7, 112, 39, .16);
}

#start .info-card:nth-child(2) .info-face--front h3 span,
#start .info-card:nth-child(4) .info-face--front h3 span {
  background: linear-gradient(145deg, #ff5648, #ff806d);
  box-shadow: 0 7px 15px rgba(255, 86, 72, .16);
}

#start .info-face--front p {
  max-width: 16rem;
  margin: 0;
  color: #17243a;
  font-size: clamp(1.05rem, 1.25vw, 1.3rem);
  font-weight: 500;
  line-height: 1.6;
}

#start .info-toggle {
  gap: .85rem;
  margin-top: auto;
  padding: 1.2rem 0 0;
  color: #087027;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  font-weight: 850;
}

#start .info-toggle::after { content: "→"; font-size: 1.7em; line-height: .4; }

#start .macro-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}

#start .macro-tags span {
  padding: .55rem 1rem;
  border-radius: 999px;
  background: linear-gradient(145deg, #167b31, #70a955);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  box-shadow: 0 8px 14px rgba(7, 112, 39, .13);
}

#start .macro-tags span:nth-child(2) { background: linear-gradient(145deg, #ffc02d, #ffd86e); color: #17243a; }
#start .macro-tags span:nth-child(3) { background: linear-gradient(145deg, #ff5648, #ff806d); }

#start .hand-card {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .15rem;
  margin: 1.5rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#start .hand-card span {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: .45rem;
  min-height: 0;
  padding: 0 .15rem;
  border-radius: 0;
  background: transparent;
  color: #162238;
  font-size: .9rem;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
}

#start .hand-card span::before {
  width: 46px;
  height: 58px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-size: contain;
}

#start .tracking-visual {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.45rem 0 0;
}

#start .tracking-ring {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: conic-gradient(#ffbf35 0 33%, #ff5b4d 33% 50%, #23863a 50% 83%, #e8ece5 83% 100%);
}

#start .tracking-ring::before {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: #fffefa;
  content: "";
}

#start .tracking-ring::after {
  position: absolute;
  color: #071221;
  content: "✓";
  font-size: 3rem;
  font-weight: 900;
}

#start .tracking-visual ul {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

#start .tracking-visual li {
  position: relative;
  padding-left: 1.15rem;
  color: #17243a;
  font-size: .88rem;
  font-weight: 650;
  line-height: 1.25;
}

#start .tracking-visual li::before {
  position: absolute;
  top: .25rem;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #23863a;
  content: "";
}

#start .tracking-visual li:nth-child(2)::before { background: #ffbf35; }
#start .tracking-visual li:nth-child(3)::before { background: #ff5b4d; }

@media (max-width: 1000px) {
  #start .card-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #start .info-card:nth-child(2) .info-face { border-right: 0; }
  #start .info-card:nth-child(-n + 2) .info-face { border-bottom: 1px solid #d8dce0; }
}

@media (max-width: 640px) {
  #start .section-title { font-size: clamp(3rem, 13.5vw, 4.45rem); }
  #start .section-intro { font-size: 1.12rem; }
  #start .card-grid.four { grid-template-columns: 1fr; margin-top: 3rem; }
  #start .info-card, #start .info-card-inner, #start .info-face { min-height: 340px; }
  #start .info-face { padding: .4rem 0 1.5rem; border-right: 0; border-bottom: 1px solid #d8dce0; }
  #start .info-card:last-child .info-face { border-bottom: 0; }
  #start .info-face--front h3 { font-size: 1.45rem; }
#start .tracking-visual { max-width: 310px; }
}

/* Final section reference overrides: must stay at stylesheet end. */
.responsive-page #method.method-section,
.responsive-page #ideas.ideas-section,
.responsive-page #community.community { color: #09162b; background: #fffefa; }

.responsive-page #method.method-section { padding-block: clamp(5.5rem, 10vw, 9rem) clamp(4.25rem, 8vw, 7rem); border: 0; }
#method .eyebrow, #ideas .eyebrow, #community .eyebrow { margin-bottom: 1rem; color: #467843; }
#method .section-title { max-width: 780px; margin: 0; text-align: left; font-family: var(--font-sans); font-size: clamp(2.65rem, 5.3vw, 5.8rem); font-weight: 750; line-height: .98; letter-spacing: 0; }
#method .method-intro { max-width: 570px; margin: 1.55rem 0 0; color: #536273; font-size: clamp(1.05rem, 1.45vw, 1.3rem); line-height: 1.55; }
#method .method-steps { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr) 72px minmax(0, 1fr); align-items: start; gap: 0; margin-top: clamp(3.25rem, 6vw, 5.5rem); }
#method .method-step-card { display: grid; grid-template-rows: auto auto 1fr; min-height: 410px; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#method .method-copy { width: 100%; min-height: 0; padding: 0; }
#method .step-number { display: grid; width: 52px; height: 52px; margin: 0 0 1.35rem; place-items: center; border: 0; border-radius: 50%; background: #39763d; color: #fff; font-size: 1.55rem; font-weight: 750; }
#method .method-step-card:nth-of-type(2) .step-number { background: #f06552; }
#method .method-step-card:nth-of-type(3) .step-number { background: #d89d25; }
#method .method-step-card h3 { max-width: 290px; margin: 0; color: #09162b; font-family: var(--font-sans); font-size: clamp(1.4rem, 2.3vw, 2rem); font-weight: 730; letter-spacing: 0; line-height: 1.08; }
#method .method-step-card p:not(.step-number) { max-width: 315px; margin: .8rem 0 0; color: #526173; font-size: 1rem; line-height: 1.5; }
#method .method-step-card figure { position: static; display: grid; width: min(100%, 250px); margin: auto auto 0; aspect-ratio: 1; place-items: center; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#method .method-step-card figure::after { display: none; }
#method .method-step-card figure img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
#method .method-arrow { display: grid; width: 48px; height: 48px; margin-top: 2px; align-self: start; justify-self: center; place-items: center; border: 1px solid #dfe5dc; border-radius: 50%; background: #fffefa; box-shadow: none; color: #39763d; font-size: 1.75rem; }
#method .note { display: flex; align-items: center; justify-content: center; min-height: 70px; margin: clamp(2rem, 5vw, 4.5rem) 0 0; padding: 1rem 1.5rem; border-top: 1px solid #d9dfd7; border-bottom: 1px solid #d9dfd7; border-radius: 0; background: transparent; color: #3d493e; font-family: var(--font-serif); font-size: clamp(1.05rem, 1.5vw, 1.35rem); text-align: center; }

.responsive-page #ideas.ideas-section { padding-block: clamp(5.5rem, 9vw, 8rem); border-top: 1px solid #e7ebe4; }
#ideas .ideas-heading { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(250px, .7fr); align-items: end; gap: clamp(2rem, 6vw, 6rem); margin-bottom: clamp(3rem, 5vw, 5rem); text-align: left; }
#ideas .section-title { max-width: 770px; margin: 0; font-family: var(--font-sans); font-size: clamp(2.6rem, 4.9vw, 5.45rem); font-weight: 750; letter-spacing: 0; line-height: .99; }
#ideas .ideas-lede { max-width: 340px; margin: 0; padding-left: 1.4rem; border-left: 2px solid #d7e2d2; color: #5a6978; font-size: clamp(1.05rem, 1.45vw, 1.28rem); line-height: 1.52; }
#ideas .card-grid.four { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 0; }
#ideas .life-card { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(205px, .92fr); min-height: 290px; overflow: hidden; border: 1px solid #e2e7df; border-radius: 10px; background: #fff; box-shadow: none; transition: transform .35s ease, box-shadow .35s ease; }
#ideas .life-card:hover { transform: translateY(-5px); box-shadow: 0 18px 34px rgba(13, 32, 24, .10); }
#ideas .life-card img { width: 100%; height: 100%; min-height: 290px; object-fit: cover; }
#ideas .life-card > div { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: clamp(1.35rem, 3vw, 2.25rem); }
#ideas .life-card .life-icon { display: none; }
#ideas .life-card h3 { margin: 0 0 .75rem; color: #0b1729; font-family: var(--font-sans); font-size: clamp(1.25rem, 1.8vw, 1.65rem); font-weight: 720; letter-spacing: 0; }
#ideas .life-card p { margin: 0; color: #5c6a76; font-size: .98rem; line-height: 1.5; }
#ideas .life-card p:last-child { margin-top: 1rem; color: #467843; font-size: .88rem; font-weight: 700; }
#ideas .ideas-footer { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; margin-top: clamp(2.25rem, 5vw, 4.25rem); padding-top: 1.35rem; border-top: 1px solid #dfe5dc; color: #0b1729; }
#ideas .ideas-footer strong { font-family: var(--font-serif); font-size: clamp(1.15rem, 1.8vw, 1.55rem); font-weight: 600; }
#ideas .ideas-footer a { color: #316936; font-size: .95rem; font-weight: 750; text-decoration: none; }

.responsive-page #community.community { display: grid; grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr); gap: clamp(2.5rem, 6vw, 7rem); padding-block: clamp(5.5rem, 10vw, 9rem) 3rem; position: relative; overflow: visible; border-top: 1px solid #e7ebe4; }
#community .community-copy { grid-column: 1; grid-row: 1; align-self: center; max-width: 470px; }
#community .section-title { max-width: 450px; margin: 0; font-family: var(--font-sans); font-size: clamp(2.75rem, 5vw, 5.3rem); font-weight: 750; letter-spacing: 0; line-height: .98; }
#community .section-intro, #community .community-description { max-width: 400px; color: #596876; font-size: clamp(1.05rem, 1.45vw, 1.28rem); line-height: 1.52; }
#community .section-intro { margin: 1.5rem 0 0; }
#community .community-description { margin: .65rem 0 0; }
#community .community-cta { min-height: 52px; margin-top: 2rem; padding: .85rem 1.25rem; border-radius: 7px; background: #2f6dca; box-shadow: none; color: #fff; }
#community .community-cta:hover { background: #215db9; transform: translateY(-2px); }
#community .quotes { display: none; }
#community .community-image { grid-column: 2; grid-row: 1; display: block; width: 100%; height: clamp(490px, 48vw, 680px); object-fit: cover; border-radius: 12px; box-shadow: 0 22px 42px rgba(13, 32, 24, .13); }
#community .chat-card { position: absolute; z-index: 2; right: clamp(1rem, 4vw, 4rem); bottom: 132px; width: min(375px, 36vw); padding: 1.3rem; border: 1px solid rgba(220, 228, 218, .95); border-radius: 10px; background: rgba(255, 255, 255, .96); box-shadow: 0 17px 32px rgba(13, 32, 24, .14); }
#community .chat-header { color: #0b1729; font-size: 1.05rem; }
#community .chat-meta { color: #647180; }
#community .chat-bubbles { margin-top: 1rem; }
#community .community-benefits { display: grid; grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: clamp(2rem, 5vw, 4rem); border-top: 1px solid #dfe5dc; border-bottom: 1px solid #dfe5dc; }
#community .community-benefits strong { padding: 1.25rem 1.5rem; color: #2e6235; font-size: .95rem; text-align: center; }
#community .community-benefits strong + strong { border-left: 1px solid #dfe5dc; }

@media (max-width: 900px) { #method .method-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } #method .method-arrow { display: none; } #method .method-step-card { min-height: 380px; } #ideas .ideas-heading { grid-template-columns: 1fr; gap: 1.4rem; } #community .chat-card { width: min(365px, 44vw); } }
@media (max-width: 680px) { .responsive-page #method.method-section, .responsive-page #ideas.ideas-section, .responsive-page #community.community { padding-inline: 1.25rem; } #method .section-title, #ideas .section-title, #community .section-title { font-size: clamp(2.55rem, 12vw, 4rem); } #method .method-steps { grid-template-columns: 1fr; gap: 3rem; } #method .method-step-card { min-height: 0; } #method .method-step-card figure { width: min(62vw, 245px); margin-top: 1.5rem; } #method .note { justify-content: flex-start; text-align: left; } #ideas .card-grid.four { grid-template-columns: 1fr; } #ideas .life-card { grid-template-columns: 1fr; } #ideas .life-card img { min-height: 210px; height: 210px; } #ideas .life-card > div { min-height: 185px; } #ideas .ideas-footer { align-items: flex-start; flex-direction: column; } .responsive-page #community.community { grid-template-columns: 1fr; gap: 2rem; } #community .community-copy, #community .community-image { grid-column: 1; grid-row: auto; } #community .community-image { height: min(82vw, 480px); } #community .chat-card { position: static; width: auto; margin-top: -4.5rem; margin-inline: 1rem; } #community .community-benefits { grid-column: 1; grid-template-columns: 1fr; margin-top: 1rem; } #community .community-benefits strong { text-align: left; } #community .community-benefits strong + strong { border-top: 1px solid #dfe5dc; border-left: 0; } }

/* Exact visual sequence for the beginner macro method reference. */
#method .method-steps { position: relative; padding: 2rem 1.5rem 1.6rem; }
#method .method-steps::before {
  position: absolute;
  z-index: 0;
  top: 3rem;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid #d3d9d9;
  border-top: 0;
  border-radius: 46px;
  content: "";
}
#method .method-steps::after {
  position: absolute;
  z-index: 1;
  right: -1px;
  bottom: -1px;
  width: 15px;
  height: 15px;
  border-right: 2px solid #d3d9d9;
  border-bottom: 2px solid #d3d9d9;
  content: "";
  transform: translateX(-1px) rotate(135deg);
  transform-origin: center;
}
#method .method-step-card, #method .method-arrow { position: relative; z-index: 1; }
#method .method-step-card { grid-template-rows: auto 1fr; min-height: 370px; }
#method .method-copy { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: start; column-gap: 1rem; }
#method .step-number { grid-column: 1; grid-row: 1 / span 2; width: 64px; height: 64px; margin: 0; font-size: 1.8rem; }
#method .method-step-card h3 { grid-column: 2; margin: .85rem 0 0; font-size: clamp(1.3rem, 1.85vw, 1.75rem); white-space: nowrap; }
#method .method-step-card p:not(.step-number) { grid-column: 2; margin: .7rem 0 0; font-size: clamp(.96rem, 1.2vw, 1.12rem); }
#method .method-step-card figure { width: min(82%, 245px); margin: 1rem auto 0; }
#method .method-arrow {
  width: calc(100% - 14px);
  height: 2px;
  margin-top: 2rem;
  border: 0;
  border-radius: 0;
  background: #c7cdcf;
  box-shadow: none;
  color: transparent;
  font-size: 0;
}
#method .method-arrow::after {
  position: absolute;
  top: -6px;
  right: -1px;
  width: 14px;
  height: 14px;
  border-top: 2px solid #c7cdcf;
  border-right: 2px solid #c7cdcf;
  content: "";
  transform: rotate(45deg);
}
#method .note { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2rem; min-height: 0; margin-top: 2.35rem; padding: 1.6rem 4.7rem 1.6rem 5.8rem; border-top: 1px solid #d9dfd7; border-bottom: 0; text-align: left; }
#method .note::before { position: absolute; width: 48px; height: 48px; margin-left: -3.95rem; border-radius: 50%; background: #eff7ed; content: ""; }
#method .note p { position: relative; z-index: 1; margin: 0; color: #15213a; font-family: var(--font-sans); font-size: clamp(1.05rem, 1.6vw, 1.38rem); font-weight: 650; }
#method .note a { align-self: center; color: #21632d; font-family: var(--font-sans); font-size: clamp(.98rem, 1.3vw, 1.15rem); font-weight: 750; text-decoration: none; white-space: nowrap; }
#method .note a span { margin-left: .55rem; font-size: 1.4em; }

@media (max-width: 900px) {
  #method .method-steps { padding: 0; }
  #method .method-steps::before, #method .method-steps::after { display: none; }
  #method .method-copy { grid-template-columns: 55px minmax(0, 1fr); column-gap: .8rem; }
  #method .step-number { width: 52px; height: 52px; font-size: 1.5rem; }
  #method .method-step-card h3 { margin-top: .6rem; white-space: normal; }
  #method .note { padding-inline: 1.5rem; }
}

@media (max-width: 680px) {
  #method .method-step-card { min-height: 0; }
  #method .method-copy { grid-template-columns: 58px minmax(0, 1fr); }
  #method .method-step-card figure { margin-top: 1.5rem; }
  #method .note { grid-template-columns: 1fr; gap: 1rem; padding: 1.4rem 1.25rem; }
  #method .note::before { display: none; }
}

/* Free tools section reference layout. */
.responsive-page #guides.section--warm {
  padding-block: clamp(5rem, 9vw, 8rem);
  background: #fffefa;
  border-top: 1px solid #e4e9e1;
}
#guides .eyebrow { margin-bottom: 1rem; color: #21632d; }
#guides .section-title {
  max-width: none;
  margin: 0;
  color: #09162b;
  font-family: var(--font-sans);
  font-size: clamp(2.55rem, 5.15vw, 5.65rem);
  font-weight: 750;
  letter-spacing: 0;
  line-height: .98;
}
#guides .section-intro { margin: 1rem 0 0; color: #526173; font-size: clamp(1.05rem, 1.4vw, 1.28rem); }
#guides .guide-layout { display: block; margin-top: clamp(2.8rem, 5vw, 4.5rem); }
#guides .card-grid.guides { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; margin: 0; }
#guides .guide-card { position: relative; display: flex; min-height: 465px; flex-direction: column; align-items: center; padding: 1.2rem 1rem 1rem; overflow: hidden; border: 1px solid #dbe3d9; border-radius: 9px; background: #fff; box-shadow: none; text-align: center; }
#guides .guide-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(13, 32, 24, .09); }
#guides .guide-number { position: absolute; top: 1rem; left: 1rem; display: grid; width: 36px; height: 36px; place-items: center; border: 1.5px solid #2b6b36; border-radius: 50%; color: #21632d; font-size: 1.1rem; font-weight: 750; }
#guides .guide-card img { width: min(100%, 175px); height: 205px; margin-top: 4rem; object-fit: contain; object-position: center; filter: none; }
#guides .guide-card h3 { min-height: 2.5em; margin: 1rem 0 .55rem; color: #0b1729; font-family: var(--font-sans); font-size: clamp(1.05rem, 1.3vw, 1.35rem); font-weight: 750; letter-spacing: 0; line-height: 1.05; }
#guides .guide-card p { min-height: 4.3em; margin: 0; color: #526173; font-size: .84rem; line-height: 1.38; }
#guides .guide-card > a { display: flex; width: 100%; min-height: 43px; align-items: center; justify-content: center; gap: .55rem; margin-top: auto; border-radius: 5px; background: #168332; color: #fff; font-size: .94rem; font-weight: 750; text-decoration: none; }
#guides .guide-card--portion img { width: 130px; height: 205px; padding: 1rem; opacity: .9; }
#guides .starter-download { display: grid; grid-template-columns: minmax(270px, .8fr) minmax(0, 1.25fr) auto; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); min-height: 235px; margin-top: 1.25rem; padding: 1.5rem clamp(1.5rem, 4vw, 4rem); border: 1.5px solid #31723b; border-radius: 10px; background: #fbfdf9; box-shadow: none; text-align: left; }
#guides .starter-stack { position: relative; height: 188px; }
#guides .starter-stack img { position: absolute; bottom: 0; width: 105px; height: 166px; border: 1px solid #d8ded5; border-radius: 3px; background: #fff; object-fit: contain; box-shadow: 0 8px 15px rgba(13, 32, 24, .10); }
#guides .starter-stack img:nth-child(1) { left: 0; transform: rotate(-7deg); }
#guides .starter-stack img:nth-child(2) { left: 72px; transform: rotate(-2deg); }
#guides .starter-stack img:nth-child(3) { left: 145px; transform: rotate(3deg); }
#guides .starter-stack img:nth-child(3) { left: 145px; transform: rotate(5deg); }
#guides .starter-download > div:nth-child(2) { max-width: 570px; }
#guides .starter-kicker { display: inline-flex; margin: 0 0 1rem; padding: .38rem .75rem; border: 1px solid #dce5db; border-radius: 5px; color: #21632d; font-size: .78rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
#guides .starter-download h3 { margin: 0; color: #09162b; font-family: var(--font-sans); font-size: clamp(1.65rem, 2.6vw, 2.6rem); font-weight: 750; letter-spacing: 0; line-height: 1.06; }
#guides .starter-description { margin: .75rem 0 0; color: #526173; font-size: 1rem; }
#guides .starter-download .button { width: max-content; min-width: 210px; min-height: 50px; margin: 0; border-radius: 6px; background: #168332; box-shadow: none; }
#guides .starter-meta { grid-column: 2 / -1; margin: -2.35rem 0 0; color: #526173; font-size: .9rem; }
#guides .starter-meta span { padding-inline: .75rem; color: #21632d; }

@media (max-width: 1100px) {
  #guides .card-grid.guides { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #guides .starter-download { grid-template-columns: 245px 1fr; }
  #guides .starter-download .button { grid-column: 2; }
  #guides .starter-meta { grid-column: 2; margin: -1rem 0 0; }
}
@media (max-width: 680px) {
  #guides .card-grid.guides { grid-template-columns: 1fr; }
  #guides .guide-card { min-height: 410px; }
  #guides .guide-card img { height: 180px; margin-top: 3.2rem; }
  #guides .starter-download { grid-template-columns: 1fr; padding: 1.5rem; }
  #guides .starter-stack { width: 290px; margin-inline: auto; transform: scale(.82); transform-origin: top center; }
  #guides .starter-download .button, #guides .starter-meta { grid-column: auto; margin: 0; }
  #guides .starter-download .button { width: 100%; }
}

/* Real-life cards: image above copy, with editorial breathing room. */
#ideas .card-grid.four { gap: clamp(1.25rem, 2.4vw, 2.25rem); }
#ideas .life-card { grid-template-columns: 1fr; grid-template-rows: minmax(230px, 285px) auto; min-height: 0; }
#ideas .life-card img { height: 100%; min-height: 0; aspect-ratio: auto; }
#ideas .life-card > div { display: block; min-height: 0; padding: clamp(1.35rem, 2.4vw, 2.1rem) clamp(1.4rem, 2.7vw, 2.35rem) clamp(1.6rem, 3vw, 2.35rem); }
#ideas .life-card h3 { margin-bottom: .8rem; }
#ideas .life-card p { max-width: 34rem; font-size: clamp(.97rem, 1.15vw, 1.08rem); line-height: 1.55; }

@media (max-width: 680px) {
  #ideas .card-grid.four { gap: 1.5rem; }
  #ideas .life-card { grid-template-rows: 225px auto; }
  #ideas .life-card img { height: 225px; }
  #ideas .life-card > div { min-height: 0; padding: 1.4rem 1.25rem 1.7rem; }
}

/* Definitive Method section reset and mockup match. */
.responsive-page #method.method-section {
  overflow: visible;
  padding-top: clamp(5rem, 7vw, 7rem);
  padding-bottom: clamp(4rem, 6vw, 6rem);
  background: #fffefa;
  text-align: left;
}

#method.method-section > .eyebrow {
  margin: 0 0 1rem;
  color: #176428;
  text-align: left;
}

#method.method-section > .section-title {
  max-width: 760px;
  margin: 0;
  color: #09162b;
  font-family: var(--font-sans);
  font-size: clamp(3.1rem, 5vw, 5.3rem);
  font-weight: 780;
  line-height: .98;
  letter-spacing: 0;
  text-align: left;
}

#method.method-section > .method-intro {
  max-width: 590px;
  margin: 1.15rem 0 0;
  color: #425269;
  font-size: clamp(1.05rem, 1.4vw, 1.32rem);
  font-weight: 450;
  line-height: 1.48;
  text-align: left;
}

#method.method-section > .method-steps {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr) 70px minmax(0, 1fr);
  align-items: start;
  width: 100%;
  margin: 2.2rem 0 0;
  padding: 1.2rem 1rem 1.5rem;
  gap: 0;
}

#method.method-section > .method-steps::before {
  top: 3.25rem;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid #d2d8d8;
  border-top: 0;
  border-radius: 44px;
  background: transparent;
}

#method.method-section > .method-steps > .method-step-card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(150px, auto) 205px;
  min-width: 0;
  min-height: 355px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: #fffefa;
  box-shadow: none;
  text-align: left;
  transform: none;
}

#method.method-section > .method-steps > .method-step-card:hover {
  border: 0;
  box-shadow: none;
  transform: none;
}

#method.method-section .method-step-card > .method-copy {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  width: 100%;
  min-width: 0;
  min-height: 150px;
  padding: 0;
  column-gap: 1rem;
}

#method.method-section .method-copy > .step-number {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #17752f;
  box-shadow: none;
  color: #fff;
  font-size: 1.65rem;
  font-weight: 780;
}

#method.method-section .method-step-card:nth-of-type(2) .method-copy > .step-number {
  background: #ff5c4f;
}

#method.method-section .method-step-card:nth-of-type(3) .method-copy > .step-number {
  background: #f3ae1a;
}

#method.method-section .method-copy > h3 {
  grid-column: 2;
  grid-row: 1;
  max-width: none;
  margin: .65rem 0 0;
  color: #09162b;
  font-family: var(--font-sans);
  font-size: clamp(1.2rem, 1.65vw, 1.65rem);
  font-weight: 760;
  line-height: 1.08;
  white-space: nowrap;
}

#method.method-section .method-copy > p {
  grid-column: 2;
  grid-row: 2;
  max-width: 260px;
  margin: .72rem 0 0;
  color: #425269;
  font-size: clamp(.92rem, 1.08vw, 1.05rem);
  font-weight: 450;
  line-height: 1.42;
}

#method.method-section .method-step-card > .method-image {
  position: static;
  z-index: 1;
  display: grid;
  align-self: end;
  justify-self: center;
  width: 190px;
  height: 190px;
  margin: 0;
  place-items: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

#method.method-section .method-step-card > .method-image::before,
#method.method-section .method-step-card > .method-image::after {
  display: none;
}

#method.method-section .method-image > img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  mix-blend-mode: multiply;
  object-fit: contain;
  transform: none;
}

#method.method-section > .method-steps > .method-arrow {
  position: relative;
  z-index: 2;
  display: block;
  align-self: start;
  justify-self: center;
  width: 54px;
  height: 2px;
  margin-top: 1.8rem;
  border: 0;
  border-radius: 0;
  background: #c4cacc;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  transform: none;
}

#method.method-section > .method-steps > .method-arrow::after {
  top: -6px;
  right: -1px;
  display: block;
  width: 14px;
  height: 14px;
  border-top: 2px solid #c4cacc;
  border-right: 2px solid #c4cacc;
  transform: rotate(45deg);
}

#method.method-section > .note {
  width: 100%;
  margin: 2rem 0 0;
  padding: 1.45rem 2rem;
  border: 0;
  border-top: 1px solid #d6dcda;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #09162b;
}

@media (max-width: 1050px) {
  #method.method-section > .method-steps {
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) 48px minmax(0, 1fr);
    padding-inline: 0;
  }

  #method.method-section .method-step-card > .method-copy {
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: .7rem;
  }

  #method.method-section .method-copy > .step-number {
    width: 48px;
    height: 48px;
    font-size: 1.4rem;
  }

  #method.method-section .method-copy > h3 {
    margin-top: .45rem;
    white-space: normal;
  }

  #method.method-section .method-step-card > .method-image {
    width: 165px;
    height: 165px;
  }

  #method.method-section > .method-steps > .method-arrow {
    width: 36px;
    margin-top: 1.45rem;
  }
}

/* Crisp real-life photography and typography. */
#ideas .life-card.reveal {
  opacity: 1;
  animation: none;
  transform: none;
}

#ideas .life-card {
  grid-template-rows: minmax(220px, 260px) auto;
  background: #fff;
  isolation: isolate;
}

#ideas .life-card:hover {
  transform: translateY(-3px);
}

#ideas .life-card > img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
  filter: none;
  image-rendering: auto;
  object-fit: cover;
  object-position: center;
  transform: none;
}

#ideas .life-card > div {
  padding: clamp(1.55rem, 2.5vw, 2.2rem) clamp(1.55rem, 2.8vw, 2.4rem) clamp(1.75rem, 3vw, 2.45rem);
  background: #fff;
  text-align: left;
}

#ideas .life-card h3 {
  margin: 0 0 .72rem;
  color: #09162b;
  font-size: clamp(1.35rem, 1.75vw, 1.7rem);
  font-weight: 780;
  line-height: 1.15;
  text-rendering: optimizeLegibility;
}

#ideas .life-card p {
  max-width: 38rem;
  margin: 0;
  color: #344257;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  font-weight: 480;
  line-height: 1.58;
  text-rendering: optimizeLegibility;
}

@media (max-width: 680px) {
  #ideas .life-card {
    grid-template-rows: 210px auto;
  }

  #ideas .life-card > img {
    height: 210px;
  }
}

@media (max-width: 780px) {
  #method.method-section > .method-steps {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 0;
  }

  #method.method-section > .method-steps::before,
  #method.method-section > .method-steps::after,
  #method.method-section > .method-steps > .method-arrow {
    display: none;
  }

  #method.method-section > .method-steps > .method-step-card {
    grid-template-rows: auto auto;
    min-height: 0;
    padding-bottom: 2rem;
    border-bottom: 1px solid #d6dcda;
  }

  #method.method-section .method-step-card > .method-copy {
    min-height: 0;
  }

  #method.method-section .method-step-card > .method-image {
    width: min(56vw, 210px);
    height: min(56vw, 210px);
    margin-top: 1.5rem;
  }

  #method.method-section > .note {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding-inline: 0;
  }
}

/* Hero: three-word lockup without a white overlay filter. */
.responsive-page .hero {
  background-color: #f7f7f5;
  background-image: url("assets/macro-meal-side-background.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.responsive-page .hero-copy {
  align-self: center;
}

.responsive-page .hero h1 {
  max-width: 8ch;
  letter-spacing: 0;
}

.responsive-page .hero h1 > span {
  display: block;
  width: max-content;
  max-width: 100%;
  color: inherit;
  font-style: normal;
  white-space: nowrap;
}

.responsive-page .hero-text {
  max-width: 34rem;
  margin: 1.75rem 0 0;
  color: #142238;
  font-size: clamp(1.22rem, 1.5vw, 1.55rem);
  font-weight: 620;
  line-height: 1.55;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
}

@media (max-width: 780px) {
  .responsive-page .hero {
    display: block;
    min-height: 0;
    padding: 3.5rem 1.35rem 0;
    background-color: #fffefa;
    background-image: none;
  }

  .responsive-page .hero-copy {
    align-self: flex-start;
    max-width: 34rem;
    margin: 0 auto;
  }

  .responsive-page .hero h1 {
    max-width: none;
    font-size: clamp(3.75rem, 16vw, 5rem);
    line-height: .88;
  }

  .responsive-page .hero-text {
    max-width: 29rem;
    margin-top: 1.4rem;
    color: #142238;
    font-size: clamp(1.12rem, 4.8vw, 1.28rem);
    font-weight: 560;
    line-height: 1.55;
    text-shadow: none;
    text-wrap: pretty;
  }

  .responsive-page .hero-actions {
    margin-top: 1.7rem;
  }

  .responsive-page .hero-actions .button {
    width: 100%;
    min-height: 56px;
  }

  .responsive-page .hero::after {
    display: block;
    width: calc(100% + 2.7rem);
    height: clamp(285px, 72vw, 420px);
    margin: 2.5rem -1.35rem 0;
    background-image: url("assets/macro-meal-side-background.png");
    background-position: 64% center;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
  }
}

/* Start with the Basics: distinct animated component cards. */
#start .card-grid.four {
  gap: clamp(1rem, 1.8vw, 1.6rem);
  padding-top: 0;
  border-top: 0;
}

#start .info-card.reveal {
  min-height: 440px;
  opacity: 1;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: 0 12px 28px rgba(19, 42, 30, .09);
  animation: basics-card-in .65s cubic-bezier(.2, .8, .2, 1) backwards;
  transform: none;
  transition: transform .3s ease, box-shadow .3s ease;
}

#start .info-card:nth-child(1) { animation-delay: .04s; }
#start .info-card:nth-child(2) { animation-delay: .12s; }
#start .info-card:nth-child(3) { animation-delay: .2s; }
#start .info-card:nth-child(4) { animation-delay: .28s; }

#start .info-card:hover {
  box-shadow: 0 22px 46px rgba(19, 42, 30, .14);
  transform: translateY(-7px);
}

#start .info-card:focus-within {
  box-shadow: 0 0 0 3px rgba(23, 117, 47, .16), 0 20px 42px rgba(19, 42, 30, .13);
}

#start .info-card-inner {
  min-height: 440px;
  border-radius: 18px;
  transition: transform .72s cubic-bezier(.2, .72, .2, 1);
}

#start .info-face {
  min-height: 440px;
  padding: clamp(1.45rem, 2vw, 2rem);
  overflow: hidden;
  border: 1px solid #dce5da;
  border-radius: 18px;
  background: #fff;
  box-shadow: none;
}

#start .info-card:last-child .info-face,
#start .info-card:nth-child(-n + 4) .info-face {
  border-right: 1px solid #dce5da;
  border-bottom: 1px solid #dce5da;
}

#start .info-face--front {
  background: linear-gradient(180deg, #fff 0%, #fbfdf9 100%);
}

#start .info-face--back {
  border: 1px solid #cdddc9;
  border-radius: 18px;
  background: #f3f8ef;
  box-shadow: none;
}

#start .info-face--front h3 {
  min-height: 54px;
  margin-bottom: 1.1rem;
}

#start .info-face--front p {
  color: #3e4d5f;
  line-height: 1.55;
}

#start .info-toggle {
  transition: color .2s ease, transform .2s ease;
}

#start .info-toggle:hover {
  color: #174f25;
  transform: translateX(3px);
}

@keyframes basics-card-in {
  from {
    opacity: 0;
    transform: translateY(22px) scale(.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #start .info-card.reveal {
    animation: none;
    transition: none;
  }

  #start .info-card-inner {
    transition-duration: .01ms;
  }
}

@media (max-width: 1000px) {
  #start .card-grid.four {
    gap: 1.35rem;
  }
}

@media (max-width: 640px) {
  #start .card-grid.four {
    gap: 1.2rem;
  }

  #start .info-card.reveal,
  #start .info-card-inner,
  #start .info-face {
    min-height: 390px;
  }

  #start .info-card:hover {
    transform: translateY(-3px);
  }
}

/* Premium four-guide product collection. */
.responsive-page #guides.section--warm {
  background: #f7f6f1;
}

#guides .card-grid.guides {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.45rem);
}

#guides .guide-card {
  min-height: 570px;
  padding: 1.1rem 1.1rem 1.15rem;
  border-color: #d9dfd7;
  background: #fff;
}

#guides .guide-card img,
#guides .guide-card--portion img {
  width: 100%;
  height: 300px;
  margin-top: 3.3rem;
  padding: 0;
  border-radius: 6px;
  background: #fff;
  filter: none;
  object-fit: contain;
  opacity: 1;
}

#guides .guide-card:nth-child(3) img,
#guides .guide-card:nth-child(4) img {
  height: 325px;
  margin-top: 2.3rem;
}

#guides .guide-card h3 {
  min-height: 0;
  margin: 1.25rem 0 .65rem;
  font-size: clamp(1.18rem, 1.45vw, 1.48rem);
}

#guides .guide-card p {
  min-height: 0;
  color: #455367;
  font-size: .92rem;
  line-height: 1.5;
}

#guides .guide-included {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  border: 1px solid #d5e1d3;
  border-radius: 5px;
  background: #f1f7ef;
  color: #245f30;
  font-size: .86rem;
  font-weight: 760;
}

#guides .starter-download {
  grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr) auto;
  min-height: 290px;
  margin-top: 1.5rem;
  padding-block: 2rem;
  border-color: #244e2c;
  background: #fff;
}

#guides .starter-stack {
  width: 330px;
  height: 230px;
}

#guides .starter-stack img {
  bottom: 8px;
  width: 118px;
  height: 195px;
  object-fit: contain;
}

#guides .starter-stack img:nth-child(1) {
  left: 0;
  transform: rotate(-8deg);
}

#guides .starter-stack img:nth-child(2) {
  left: 72px;
  transform: rotate(-3deg);
}

#guides .starter-stack img:nth-child(3) {
  left: 145px;
  transform: rotate(3deg);
}

#guides .starter-stack img:nth-child(4) {
  left: 216px;
  transform: rotate(8deg);
}

#guides .bundle-price {
  display: grid;
  grid-template-columns: minmax(110px, 145px) max-content;
  align-items: baseline;
  gap: 1rem;
  margin: 1.25rem 0 0;
  color: #415064;
}

#guides .bundle-price span {
  font-size: .9rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .06em;
}

#guides .bundle-price strong {
  display: block;
  min-width: 3ch;
  color: #13213a;
  font-family: var(--font-sans);
  font-size: clamp(2rem, 2.7vw, 2.75rem);
  line-height: 1;
  white-space: nowrap;
  word-break: keep-all;
}

#guides .starter-download .button {
  min-width: 235px;
  background: #183f23;
}

#guides .starter-download .button:hover {
  background: #0f3219;
}

@media (max-width: 1100px) {
  #guides .card-grid.guides {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #guides .starter-download {
    grid-template-columns: 280px 1fr;
  }
}

@media (max-width: 680px) {
  #guides .card-grid.guides {
    grid-template-columns: 1fr;
  }

  #guides .guide-card {
    min-height: 535px;
  }

  #guides .guide-card img,
  #guides .guide-card--portion img {
    height: 275px;
  }

  #guides .guide-card:nth-child(3) img,
  #guides .guide-card:nth-child(4) img {
    height: 305px;
  }

  #guides .starter-download {
    grid-template-columns: 1fr;
  }

  #guides .starter-stack {
    height: 205px;
    margin-bottom: -1rem;
  }

  #guides .starter-download .button {
    width: 100%;
  }
}

/* Free 1-Week Macro Jumpstart offer. */
.responsive-page .free-jumpstart {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(360px, .92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(3.25rem, 7vw, 7.5rem);
  padding-block: clamp(5.75rem, 8vw, 8.5rem);
}

.responsive-page .free-jumpstart::before {
  content: "";
  position: absolute;
  inset: 0 50%;
  z-index: -1;
  width: 100vw;
  background: #f0f4ed;
  border-block: 1px solid #dfe7dc;
  transform: translateX(-50%);
}

.free-jumpstart__visual {
  position: relative;
  width: min(100%, 530px);
  justify-self: center;
}

.free-jumpstart__visual img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  object-fit: cover;
  box-shadow:
    0 34px 70px rgba(18, 44, 32, .2),
    0 8px 22px rgba(18, 44, 32, .12);
  transition: transform .45s ease, box-shadow .45s ease;
}

.free-jumpstart__visual:hover img {
  transform: translateY(-6px);
  box-shadow:
    0 42px 82px rgba(18, 44, 32, .24),
    0 12px 28px rgba(18, 44, 32, .14);
}

.free-jumpstart__badge {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: .55rem .85rem;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 6px;
  background: #fff;
  color: #18452d;
  font-size: .8rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: 0 10px 24px rgba(7, 26, 18, .16);
}

.free-jumpstart__content {
  max-width: 620px;
}

.free-jumpstart__content .eyebrow {
  margin-bottom: 1.2rem;
  color: #356b3d;
}

.free-jumpstart__content h2 {
  max-width: 11ch;
  margin: 0;
  color: #101b34;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.2rem, 5vw, 5.6rem);
  line-height: .98;
  letter-spacing: 0;
}

.free-jumpstart__lede {
  max-width: 580px;
  margin: 1.75rem 0 0;
  color: #49566a;
  font-size: clamp(1.08rem, 1.35vw, 1.28rem);
  line-height: 1.65;
}

.free-jumpstart__outcomes {
  display: grid;
  gap: 0;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  border-block: 1px solid #cfdacf;
}

.free-jumpstart__outcomes li {
  position: relative;
  padding: 1rem .5rem 1rem 2.2rem;
  color: #1c2b3d;
  font-size: 1rem;
  font-weight: 740;
  line-height: 1.45;
}

.free-jumpstart__outcomes li + li {
  border-top: 1px solid #dbe3d9;
}

.free-jumpstart__outcomes li::before {
  content: "✓";
  position: absolute;
  top: .92rem;
  left: .2rem;
  color: #2d7038;
  font-size: 1.18rem;
  font-weight: 900;
}

.free-jumpstart__action {
  margin-top: 2rem;
}

.free-jumpstart__button {
  min-width: min(100%, 360px);
  justify-content: center;
  background: #174b2a;
  box-shadow: 0 18px 34px rgba(23, 75, 42, .22);
}

.free-jumpstart__button:hover {
  background: #103c20;
  box-shadow: 0 23px 40px rgba(23, 75, 42, .28);
}

.free-jumpstart__action p {
  margin: .85rem 0 0;
  color: #657166;
  font-size: .82rem;
  font-weight: 650;
}

@media (max-width: 920px) {
  .responsive-page .free-jumpstart {
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
    gap: 2.5rem;
  }

  .free-jumpstart__content h2 {
    font-size: clamp(2.8rem, 6.5vw, 4.5rem);
  }
}

@media (max-width: 720px) {
  .responsive-page .free-jumpstart {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding-block: 5rem;
  }

  .free-jumpstart__visual {
    width: min(88vw, 470px);
  }

  .free-jumpstart__content {
    max-width: none;
  }

  .free-jumpstart__content h2 {
    max-width: 12ch;
    font-size: clamp(2.9rem, 12vw, 4.5rem);
  }

  .free-jumpstart__button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .free-jumpstart__visual img {
    transition: none;
  }

  .free-jumpstart__visual:hover img {
    transform: none;
  }
}