:root {
  --cream: #f7f4ec;
  --paper: #fffdf8;
  --forest: #294739;
  --forest-soft: #4f695a;
  --blue: #315b73;
  --muted: #69786f;
  --line: #dce5da;
  --green-soft: #edf5e9;
  --blue-soft: #edf5f8;
  --yellow-soft: #fbf6df;
  --lilac-soft: #f3eef8;
  --peach-soft: #faeee6;
  --shadow: 0 18px 50px rgb(45 65 53 / 9%);
  --radius-large: 32px;
  --radius-medium: 22px;
  --shell: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--forest);
  background: var(--cream);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
}

.product-shell {
  width: min(var(--shell), calc(100% - 40px));
  margin-inline: auto;
}

.product-hero {
  padding: 24px 0 88px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 16%, rgb(217 233 216 / 34%), transparent 28%),
    var(--cream);
}

.product-hero__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 52px;
}

.product-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--forest);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-decoration: none;
}

.product-brand__leaf {
  display: grid;
  width: 29px;
  height: 29px;
  color: #557862;
  background: #e5f0e2;
  border: 1px solid #cedfca;
  border-radius: 50%;
  font-family: inherit;
  font-size: 1.2rem;
  line-height: 1;
  place-items: center;
}

.product-brand--image {
  display: flex;
  flex: 0 0 175px;
  width: 175px;
  height: 52px;
  align-items: center;
  overflow: visible;
  cursor: pointer;
  line-height: 0;
  transform-origin: left center;
  transition: transform 0.2s ease;
}

.product-brand__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  transform: scale(1.35);
}

.product-brand--image:hover {
  transform: scale(1.025);
}

.product-brand--image:focus-visible {
  outline: 2px solid #6f9477;
  outline-offset: 2px;
}

.product-hero__format {
  color: #718078;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.11em;
}

.product-hero__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(42px, 5vw, 64px);
  padding-top: 48px;
}

.product-hero__content {
  max-width: 570px;
}

.product-hero .section-kicker {
  margin-bottom: 16px;
  color: #587663;
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.105em;
}

.section-kicker {
  margin: 0 0 13px;
  color: #5f8068;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  margin-top: 0;
  letter-spacing: -0.035em;
}

.product-hero h1 {
  max-width: 570px;
  margin-bottom: 25px;
  color: #183f31;
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.5rem, 3.25vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.047em;
  line-height: 1.08;
}

.product-hero__title-line {
  white-space: nowrap;
}

.product-hero__subtitle {
  max-width: 550px;
  margin: 0;
  color: #465866;
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  font-weight: 450;
  line-height: 1.67;
}

.product-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  max-width: 570px;
  padding: 0;
  margin: 30px 0 29px;
  list-style: none;
}

.product-stats li {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 6px;
  min-height: 82px;
  padding: 14px 15px;
  border: 1px solid rgb(82 112 94 / 10%);
  border-radius: 16px;
  box-shadow: 0 9px 20px rgb(48 67 54 / 4%);
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
}

.product-stats li:nth-child(1) {
  background: #e9f3e9;
}

.product-stats li:nth-child(2) {
  background: #eaf3f7;
}

.product-stats li:nth-child(3) {
  background: #f3f3dc;
}

.product-stats strong {
  color: #24483a;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

.product-stats span {
  color: #4e6264;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
}

.product-hero .primary-button {
  min-height: 62px;
  padding: 17px 33px;
  border-radius: 18px;
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
}

.product-hero .primary-button:hover {
  background: #315743;
  box-shadow: 0 15px 28px rgb(39 70 53 / 21%);
  transform: translateY(-1px);
}

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 15px 27px;
  color: #ffffff;
  background: var(--forest);
  border: 1px solid var(--forest);
  border-radius: 17px;
  box-shadow: 0 13px 26px rgb(39 70 53 / 18%);
  font-weight: 750;
  text-decoration: none;
  transition: transform 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

.primary-button:hover {
  background: #345b47;
  box-shadow: 0 16px 30px rgb(39 70 53 / 23%);
  transform: translateY(-2px);
}

.primary-button:focus-visible {
  outline: 3px solid rgb(86 132 101 / 35%);
  outline-offset: 3px;
}

.product-hero__meta {
  margin: 14px 0 0;
  color: #5f707c;
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
}

.visual-placeholder {
  position: relative;
  display: grid;
  min-width: 0;
  overflow: hidden;
  background: #f3f5ef;
  border: 1px dashed #bfcfbc;
  border-radius: var(--radius-large);
  place-items: center;
}

.visual-placeholder__label {
  position: absolute;
  right: 18px;
  bottom: 16px;
  left: 18px;
  padding: 8px 12px;
  color: #607268;
  background: rgb(255 253 248 / 88%);
  border: 1px solid rgb(213 224 210 / 88%);
  border-radius: 11px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  backdrop-filter: blur(7px);
}

.product-hero__media {
  position: relative;
  min-width: 0;
  min-height: 570px;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #e4e9e4;
  border-radius: var(--radius-large);
  box-shadow: var(--shadow);
}

.product-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 570px;
  object-fit: cover;
  object-position: 52% 48%;
}

.system-intro {
  padding-block: 72px;
  background: var(--paper);
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
}

.system-intro .section-heading--center {
  max-width: 870px;
}

.system-intro .section-kicker {
  margin-bottom: 12px;
  color: #5c7966;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.11em;
}

.system-intro .section-heading h2 {
  margin: 0 auto 16px;
  color: #183f31;
  font-family: inherit;
  font-size: clamp(2.15rem, 3.5vw, 3.05rem);
  font-weight: 780;
  letter-spacing: -0.045em;
  line-height: 1.1;
}

.system-intro .section-heading > p:last-child {
  max-width: 720px;
  margin: 0 auto;
  color: #465968;
  font-family: inherit;
  font-size: 0.98rem;
  line-height: 1.62;
}

.system-intro__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  margin-top: 31px;
}

.system-intro__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 13px;
  min-height: 142px;
  padding: 22px;
  background: #eef5ea;
  border: 1px solid #d8e5d4;
  border-radius: 19px;
  box-shadow: 0 9px 24px rgb(45 65 53 / 4%);
}

.system-intro__card--blue {
  background: #edf5f8;
  border-color: #d7e6eb;
}

.system-intro__card--yellow {
  background: #faf6e2;
  border-color: #e8e3c9;
}

.system-intro__number {
  color: #6b7f76;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.system-intro__icon {
  display: grid;
  width: 38px;
  height: 38px;
  color: #52715f;
  background: rgb(255 253 248 / 75%);
  border-radius: 12px;
  place-items: center;
}

.system-intro__card--blue .system-intro__icon {
  color: #52758a;
}

.system-intro__card--yellow .system-intro__icon {
  color: #777b50;
}

.system-intro__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.system-intro__card h3 {
  grid-column: 1 / -1;
  margin: 18px 0 5px;
  color: #294b3c;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.system-intro__card p {
  grid-column: 1 / -1;
  margin: 0;
  color: #4a5d68;
  font-size: 0.87rem;
  line-height: 1.5;
}

.situation-section {
  background: #f0f4eb;
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
}

.situation-section .section-heading--center {
  max-width: 940px;
}

.situation-section .section-kicker {
  margin-bottom: 14px;
  color: #5c7966;
  font-family: inherit;
  font-size: 0.73rem;
  font-weight: 650;
  letter-spacing: 0.11em;
}

.situation-section .section-heading h2 {
  max-width: 900px;
  margin: 0 auto 19px;
  color: #183f31;
  font-family: inherit;
  font-size: clamp(2.35rem, 4vw, 3.45rem);
  font-weight: 780;
  letter-spacing: -0.047em;
  line-height: 1.08;
}

.situation-section .section-heading > p:last-child {
  max-width: 760px;
  margin: 0 auto;
  color: #465968;
  font-family: inherit;
  font-size: 1.02rem;
  line-height: 1.68;
}

.situation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 38px;
}

.situation-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 17px;
  min-height: 154px;
  padding: 25px 26px;
  background: rgb(255 253 248 / 90%);
  border: 1px solid #d8e4d5;
  border-radius: 21px;
  box-shadow: 0 10px 25px rgb(45 65 53 / 5%);
}

.situation-card--blue {
  border-color: #d5e5e9;
}

.situation-card--yellow {
  border-color: #e8e3c9;
}

.situation-card--peach {
  border-color: #eadbd0;
}

.situation-card__icon {
  display: grid;
  width: 44px;
  height: 44px;
  color: #52715f;
  background: #e7f1e4;
  border-radius: 14px;
  place-items: center;
}

.situation-card--blue .situation-card__icon {
  color: #52758a;
  background: #e7f1f5;
}

.situation-card--yellow .situation-card__icon {
  color: #777b50;
  background: #f5f1da;
}

.situation-card--peach .situation-card__icon {
  color: #896d5c;
  background: #f7ebe3;
}

.situation-card__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.situation-card h3 {
  margin: 1px 0 7px;
  color: #294b3c;
  font-family: inherit;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.32;
}

.situation-card p {
  margin: 0;
  color: #4a5d68;
  font-size: 0.91rem;
  line-height: 1.55;
}

.situation-summary {
  max-width: 960px;
  padding: 17px 22px;
  margin: 18px auto 0;
  color: #3e594b;
  background: #e6f0e2;
  border: 1px solid #d1e1ce;
  border-radius: 16px;
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.96rem;
  font-weight: 550;
  line-height: 1.55;
  text-align: center;
}

.nutrition-story {
  background: var(--paper);
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
}

.nutrition-story__heading {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.nutrition-story__heading .section-kicker,
.day-example__heading .section-kicker {
  color: #5c7966;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.11em;
}

.nutrition-story__heading h2 {
  max-width: 880px;
  margin: 0 auto 23px;
  color: #183f31;
  font-family: inherit;
  font-size: clamp(2.35rem, 4vw, 3.45rem);
  font-weight: 780;
  letter-spacing: -0.047em;
  line-height: 1.08;
}

.nutrition-story__intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px;
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

.nutrition-story__intro p {
  padding: 20px 22px;
  margin: 0;
  color: #465968;
  background: #f7f4eb;
  border: 1px solid #e5e5d9;
  border-radius: 18px;
  font-size: 0.98rem;
  line-height: 1.65;
}

.nutrition-changes {
  margin-top: 48px;
}

.nutrition-subheading,
.nutrition-benefits__heading {
  max-width: 800px;
  margin: 0 auto 26px;
  text-align: center;
}

.nutrition-subheading h3,
.nutrition-benefits__heading h3 {
  margin: 0;
  color: #23483a;
  font-family: inherit;
  font-size: clamp(1.65rem, 2.7vw, 2.25rem);
  font-weight: 740;
  letter-spacing: -0.035em;
  line-height: 1.18;
}

.nutrition-subheading > p {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  margin: 13px 0 0;
  color: #61756b;
  background: #f1f5ed;
  border: 1px solid #dde7da;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nutrition-subheading > p span[aria-hidden="true"] {
  color: #8ba092;
  font-size: 1rem;
}

.nutrition-changes__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.nutrition-change-card {
  min-width: 0;
  padding: 25px;
  border: 1px solid rgb(75 107 88 / 11%);
  border-radius: 21px;
  box-shadow: 0 10px 26px rgb(45 65 53 / 5%);
}

.nutrition-change-card--green {
  background: #edf5e9;
}

.nutrition-change-card--blue {
  background: #edf5f8;
}

.nutrition-change-card--yellow {
  background: #fbf6df;
}

.nutrition-change-card--peach {
  background: #faeee6;
}

.nutrition-change-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 19px;
}

.nutrition-change-card__head > span,
.nutrition-benefit-card > span {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  color: #557565;
  background: rgb(255 253 248 / 72%);
  border: 1px solid rgb(86 116 98 / 9%);
  border-radius: 50%;
  font-size: 0.69rem;
  font-weight: 750;
  place-items: center;
}

.nutrition-change-card__head h4 {
  margin: 0;
  color: #23483a;
  font-family: inherit;
  font-size: 1.06rem;
  font-weight: 720;
  letter-spacing: -0.02em;
  line-height: 1.28;
  text-transform: uppercase;
}

.nutrition-change-card__flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 9px;
}

.nutrition-flow-side {
  min-width: 0;
  padding: 14px;
  background: rgb(255 253 248 / 68%);
  border: 1px solid rgb(75 107 88 / 9%);
  border-radius: 14px;
}

.nutrition-flow-side--before {
  background: rgb(255 253 248 / 48%);
}

.nutrition-flow-side small {
  display: block;
  margin-bottom: 6px;
  color: #718178;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.35;
  text-transform: uppercase;
}

.nutrition-flow-side p {
  margin: 0;
  color: #304f43;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.45;
}

.nutrition-flow-arrow {
  align-self: center;
  color: #789084;
  font-size: 1.05rem;
}

.nutrition-change-card__detail {
  padding-top: 14px;
  margin: 15px 0 0;
  color: #465968;
  border-top: 1px solid rgb(75 107 88 / 12%);
  font-size: 0.86rem;
  line-height: 1.55;
}

.nutrition-change-card__foods {
  padding: 9px 11px;
  margin: 13px 0 0;
  color: #4e6a5d;
  background: rgb(255 253 248 / 62%);
  border-radius: 11px;
  font-size: 0.77rem;
  font-weight: 650;
  line-height: 1.45;
  text-align: center;
}

.nutrition-schedule,
.nutrition-action-path {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  margin: 14px 0 0;
  list-style: none;
}

.nutrition-schedule li,
.nutrition-action-path li {
  display: inline-flex;
  align-items: center;
  color: #466255;
  font-size: 0.69rem;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
}

.nutrition-schedule li:not(:last-child)::after,
.nutrition-action-path li:not(:last-child)::after {
  margin-left: 6px;
  color: #91a096;
  content: "→";
  font-weight: 500;
}

.nutrition-alternatives h5 {
  margin: 0 0 14px;
  color: #315246;
  font-size: 0.93rem;
  font-weight: 700;
  line-height: 1.4;
}

.nutrition-alternative-list {
  display: grid;
  gap: 8px;
}

.nutrition-alternative-list p {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) auto minmax(0, 1.15fr);
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  margin: 0;
  background: rgb(255 253 248 / 64%);
  border: 1px solid rgb(113 91 75 / 8%);
  border-radius: 12px;
  color: #596861;
  font-size: 0.8rem;
  line-height: 1.4;
}

.nutrition-alternative-list p > span[aria-hidden="true"] {
  color: #8b8178;
}

.nutrition-alternative-list strong {
  color: #315246;
  font-weight: 700;
}

.nutrition-alternatives__conclusion {
  padding: 14px 16px;
  margin: 15px 0 0;
  color: #294d3f;
  background: rgb(255 253 248 / 78%);
  border-left: 3px solid #94af9c;
  border-radius: 11px;
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.5;
}

.nutrition-benefits {
  margin-top: 52px;
}

.nutrition-benefits__heading .section-kicker {
  margin-bottom: 10px;
}

.nutrition-benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.nutrition-benefit-card {
  min-width: 0;
  padding: 22px 20px;
  background: #fffdf8;
  border: 1px solid #dfe7dc;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgb(45 65 53 / 4%);
}

.nutrition-benefit-card:nth-child(2) > span {
  color: #52758a;
  background: #eaf3f6;
}

.nutrition-benefit-card:nth-child(3) > span {
  color: #777d4e;
  background: #f6f1d9;
}

.nutrition-benefit-card:nth-child(4) > span {
  color: #806b7f;
  background: #f1eaf4;
}

.nutrition-benefit-card h4 {
  margin: 18px 0 9px;
  color: #294c3e;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.nutrition-benefit-card p {
  margin: 0;
  color: #4b5f69;
  font-size: 0.83rem;
  line-height: 1.55;
}

.nutrition-thesis {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 23px;
  max-width: 1030px;
  padding: clamp(28px, 4vw, 43px);
  margin: 48px auto 0;
  color: #284b3d;
  background: #e6f1e6;
  border: 1px solid #cfdfce;
  border-radius: 25px;
  box-shadow: 0 13px 34px rgb(45 65 53 / 6%);
}

.nutrition-thesis__icon {
  display: grid;
  width: 48px;
  height: 48px;
  color: #527563;
  background: rgb(255 253 248 / 78%);
  border-radius: 50%;
  place-items: center;
}

.nutrition-thesis__icon svg,
.nutrition-foundation__icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.nutrition-thesis p {
  margin: 0;
  color: #4b6258;
  font-size: 0.96rem;
  line-height: 1.62;
}

.nutrition-thesis h3 {
  margin: 12px 0 18px;
  color: #183f31;
  font-size: clamp(1.8rem, 3.2vw, 2.55rem);
  font-weight: 780;
  letter-spacing: -0.04em;
  line-height: 1.14;
}

.nutrition-thesis .nutrition-thesis__answer {
  max-width: 760px;
  color: #315346;
  font-size: 1.05rem;
}

.nutrition-action-path {
  justify-content: flex-start;
  margin-top: 21px;
}

.nutrition-action-path li {
  color: #2f5947;
  font-size: 0.82rem;
  font-weight: 700;
}

.nutrition-foundation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  max-width: 1030px;
  padding: 27px 30px;
  margin: 18px auto 0;
  background: #f6f7f0;
  border: 1px solid #dce5d8;
  border-radius: 21px;
}

.nutrition-foundation__icon {
  display: grid;
  width: 43px;
  height: 43px;
  color: #5b7965;
  background: #e8f1e5;
  border-radius: 50%;
  place-items: center;
}

.nutrition-foundation__label {
  margin: 0 0 6px;
  color: #617c68;
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nutrition-foundation h3 {
  margin: 0 0 10px;
  color: #294b3c;
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.3;
}

.nutrition-foundation p:not(.nutrition-foundation__label) {
  margin: 0;
  color: #4b5e67;
  font-size: 0.93rem;
  line-height: 1.58;
}

.nutrition-foundation p:not(.nutrition-foundation__label) + p:not(.nutrition-foundation__label) {
  margin-top: 7px;
}

.nutrition-foundation .nutrition-foundation__note {
  padding-top: 10px;
  margin-top: 12px;
  color: #718079;
  border-top: 1px solid #e0e6dc;
  font-size: 0.79rem;
}

.nutrition-transition {
  margin: 27px auto 0;
  color: #62776b;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

.recipe-bridge {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 48px);
  max-width: 1060px;
  padding: clamp(26px, 3vw, 36px);
  margin: 34px auto 0;
  overflow: hidden;
  background: #fbf7ee;
  border: 1px solid #e5e2d7;
  border-radius: 24px;
  box-shadow: 0 16px 40px rgb(61 70 56 / 7%);
}

.recipe-bridge__content {
  min-width: 0;
}

.recipe-bridge .section-kicker {
  margin-bottom: 11px;
  color: #607b68;
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.115em;
}

.recipe-bridge h3 {
  max-width: 500px;
  margin: 0 0 17px;
  color: #183f31;
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.8rem, 2.7vw, 2.35rem);
  font-weight: 780;
  letter-spacing: -0.043em;
  line-height: 1.1;
}

.recipe-bridge__description {
  max-width: 520px;
  margin: 0;
  color: #465968;
  font-size: 0.98rem;
  line-height: 1.65;
}

.recipe-bridge__features {
  display: grid;
  gap: 8px;
  margin-top: 21px;
}

.recipe-bridge__feature {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  background: rgb(255 253 248 / 72%);
  border: 1px solid rgb(77 105 88 / 10%);
  border-radius: 15px;
}

.recipe-bridge__icon {
  display: grid;
  width: 34px;
  height: 34px;
  color: #52715f;
  background: #eaf3e7;
  border-radius: 12px;
  place-items: center;
}

.recipe-bridge__icon--blue {
  color: #52758a;
  background: #e9f3f6;
}

.recipe-bridge__icon--yellow {
  color: #73794b;
  background: #f7f1d7;
}

.recipe-bridge__icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.recipe-bridge__feature h4 {
  margin: 0;
  color: #294b3c;
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.016em;
  line-height: 1.35;
}

.recipe-bridge__feature p {
  margin: 0;
  color: #52636c;
  font-size: 0.8rem;
  line-height: 1.48;
}

.recipe-bridge__media {
  min-width: 0;
  padding: 10px;
  margin: 0;
  background: #f1f4ed;
  border: 1px solid #dfe6db;
  border-radius: 24px;
  box-shadow: 0 18px 40px rgb(45 65 53 / 10%);
}

.recipe-bridge__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 19px;
}

.recipe-bridge__media--placeholder {
  display: grid;
  min-height: 360px;
  align-content: center;
  justify-items: center;
  gap: 16px;
  padding: 36px;
  color: #6b7d73;
  background: #eff4ed;
  border-style: dashed;
  text-align: center;
}

.recipe-bridge__phone-icon {
  display: grid;
  width: 72px;
  height: 72px;
  color: #557564;
  background: #e2eee0;
  border-radius: 22px;
  place-items: center;
}

.recipe-bridge__phone-icon svg {
  width: 35px;
  height: 35px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

.recipe-bridge__media--placeholder > span:last-child {
  max-width: 300px;
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 550;
  line-height: 1.5;
}

.day-example {
  margin-top: 58px;
}

.day-example__heading {
  max-width: 760px;
  margin: 0 auto 28px;
  text-align: center;
}

.day-example__heading h3 {
  margin-bottom: 14px;
  color: #183f31;
  font-family: inherit;
  font-size: clamp(1.95rem, 3.2vw, 2.7rem);
  font-weight: 760;
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.day-example__heading > p:not(.section-kicker):not(.day-example__hint) {
  max-width: 650px;
  margin: 0 auto;
  color: #465968;
  font-size: 1rem;
  line-height: 1.65;
}

.day-example__heading .day-example__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  max-width: 650px;
  margin: 8px auto 0;
  color: #687a70;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.45;
}

.day-example__hint svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: #688174;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.day-plan {
  max-width: 950px;
  padding: clamp(26px, 3.5vw, 40px);
  margin: 0 auto;
  background: #f2f7ef;
  border: 1px solid #d5e3d2;
  border-radius: 28px;
  box-shadow: 0 18px 46px rgb(45 65 53 / 9%);
}

.day-plan__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 23px;
  border-bottom: 1px solid #d9e5d7;
}

.day-plan__header p {
  margin: 0 0 3px;
  color: #214637;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.day-plan__header div > span {
  color: #667970;
  font-size: 0.88rem;
  font-weight: 500;
}

.day-plan__badge {
  padding: 7px 12px;
  color: #55705f;
  background: #fffdf8;
  border: 1px solid #d9e4d7;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 650;
  white-space: nowrap;
}

.day-plan__meals {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.day-plan__status {
  padding: 18px;
  margin: 0;
  color: #607168;
  background: #fffdf8;
  border: 1px solid #dce6d9;
  border-radius: 14px;
  text-align: center;
}

.day-plan__status--error {
  color: #735e55;
  background: #fff8f2;
  border-color: #eadbd1;
}

.day-plan .meal-card {
  overflow: hidden;
  background: linear-gradient(135deg, #fffefd 0%, #fafcf8 100%);
  border: 1px solid #e2e7df;
  border-radius: 14px;
  box-shadow: 0 2px 5px rgb(47 72 56 / 4%);
  transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

@media (hover: hover) {
  .day-plan .meal-card:hover {
    background: linear-gradient(135deg, #ffffff 0%, #f8fbf6 100%);
    border-color: #ccd9c9;
    box-shadow: 0 8px 18px rgb(47 72 56 / 8%);
  }
}

.day-plan .meal-card.is-open {
  background: linear-gradient(135deg, #ffffff 0%, #f5faf4 100%);
  border-color: #c6d8c3;
  box-shadow: 0 9px 20px rgb(47 72 56 / 9%);
}

.day-plan .meal-card__trigger {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) max-content 30px;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 72px;
  padding: 12px 16px;
  color: #2f4337;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.day-plan .meal-card__trigger::before {
  display: grid;
  width: 42px;
  height: 42px;
  color: #3e5d45;
  background: #f0f5ee;
  border: 1px solid #d9e5d6;
  border-radius: 11px;
  content: "";
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  place-items: center;
}

.day-plan .meal-card:nth-child(1) .meal-card__trigger::before { content: "01"; }
.day-plan .meal-card:nth-child(2) .meal-card__trigger::before { content: "02"; }
.day-plan .meal-card:nth-child(3) .meal-card__trigger::before { content: "03"; }
.day-plan .meal-card:nth-child(4) .meal-card__trigger::before { content: "04"; }
.day-plan .meal-card:nth-child(5) .meal-card__trigger::before { content: "05"; }

.day-plan .meal-card__trigger > span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

.day-plan .meal-card__trigger > span:first-child::after {
  color: #6b776f;
  content: "";
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.35;
}

.day-plan .meal-card:nth-child(1) .meal-card__trigger > span:first-child::after { content: "Начало дня"; }
.day-plan .meal-card:nth-child(2) .meal-card__trigger > span:first-child::after { content: "Лёгкий перекус"; }
.day-plan .meal-card:nth-child(3) .meal-card__trigger > span:first-child::after { content: "Основной приём пищи"; }
.day-plan .meal-card:nth-child(4) .meal-card__trigger > span:first-child::after { content: "Небольшая пауза"; }
.day-plan .meal-card:nth-child(5) .meal-card__trigger > span:first-child::after { content: "Спокойное завершение дня"; }

.day-plan .meal-card__calories {
  color: #6a786f;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
}

.day-plan .meal-card__icon,
.day-plan .menu-dish__icon {
  display: grid;
  flex: 0 0 auto;
  color: #486654;
  background: #eef5ec;
  border: 1px solid #d5e3d2;
  border-radius: 50%;
  font-weight: 500;
  line-height: 1;
  place-items: center;
  transition: transform 230ms ease, background-color 230ms ease, border-color 230ms ease;
}

.day-plan .meal-card__icon {
  width: 30px;
  height: 30px;
  font-size: 1.12rem;
}

.day-plan .meal-card.is-open > .meal-card__trigger .meal-card__icon,
.day-plan .menu-dish.is-open > .menu-dish__trigger .menu-dish__icon {
  background: #deeedb;
  border-color: #bdd2ba;
  transform: rotate(180deg);
}

.day-plan .meal-card__body,
.day-plan .menu-dish__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 260ms ease;
}

.day-plan .meal-card.is-open > .meal-card__body,
.day-plan .menu-dish.is-open > .menu-dish__body {
  grid-template-rows: 1fr;
}

.day-plan .meal-card__body-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 18px;
  opacity: 0;
  transition: padding 230ms ease, opacity 180ms ease;
}

.day-plan .meal-card.is-open > .meal-card__body > .meal-card__body-inner {
  padding-bottom: 18px;
  opacity: 1;
}

.day-plan .meal-card__summary {
  width: fit-content;
  max-width: 100%;
  padding: 7px 10px;
  margin: 4px 0 10px;
  color: #5f7066;
  background: #f7f9f5;
  border: 1px solid #e2e8df;
  border-radius: 9px;
  font-size: 0.79rem;
  font-weight: 600;
  line-height: 1.4;
}

.day-plan .meal-card__dishes {
  display: grid;
  gap: 9px;
}

.day-plan .menu-dish {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e3ebe1;
  border-radius: 17px;
  box-shadow: 0 4px 12px rgb(47 72 56 / 6%);
  transition: border-color 230ms ease, box-shadow 230ms ease;
}

.day-plan .menu-dish.is-open {
  border-color: #cddfc9;
  box-shadow: 0 12px 26px rgb(47 72 56 / 10%);
}

.day-plan .menu-dish__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 54px;
  padding: 12px 15px;
  color: #30473a;
  background: #fbfdf9;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.day-plan .menu-dish.is-open > .menu-dish__trigger {
  background: #f7fbf5;
  border-bottom: 1px solid #e5ede3;
}

.day-plan .menu-dish__title {
  min-width: 0;
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.4;
}

.day-plan .menu-dish__icon {
  width: 26px;
  height: 26px;
  margin-left: 12px;
  font-size: 1rem;
}

.day-plan .menu-markdown {
  min-height: 0;
  overflow: hidden;
  padding: 0 20px;
  color: #3e5145;
  font-size: 0.94rem;
  line-height: 1.58;
  opacity: 0;
  transform: translateY(-5px);
  transition: padding 260ms ease, opacity 210ms ease, transform 260ms ease;
}

.day-plan .menu-dish.is-open > .menu-dish__body .menu-markdown {
  padding: 20px;
  opacity: 1;
  transform: translateY(0);
}

.day-plan .menu-markdown > :first-child { margin-top: 0; }
.day-plan .menu-markdown > :last-child { margin-bottom: 0; }

.day-plan .menu-markdown p,
.day-plan .menu-markdown ul,
.day-plan .menu-markdown ol {
  margin: 10px 0;
}

.day-plan .menu-markdown ul { padding-left: 22px; }

.day-plan .menu-markdown h1,
.day-plan .menu-markdown h2,
.day-plan .menu-markdown h3,
.day-plan .menu-markdown h4 {
  margin: 20px 0 10px;
  color: #385444;
  font-family: inherit;
  line-height: 1.3;
}

.day-plan .menu-markdown h2 {
  padding: 10px 12px;
  margin-top: 24px;
  background: #f2f7f0;
  border-left: 3px solid #acc6a9;
  border-radius: 8px;
  font-size: 1.04rem;
}

.day-plan .menu-markdown h3 { font-size: 1rem; }

.day-plan .menu-markdown ol {
  padding: 0;
  list-style: none;
  counter-reset: recipe-step;
}

.day-plan .menu-markdown ol li {
  position: relative;
  min-height: 25px;
  padding-left: 38px;
  counter-increment: recipe-step;
}

.day-plan .menu-markdown ol li::before {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: 25px;
  height: 25px;
  color: #4d6e55;
  background: #e7f1e5;
  border: 1px solid #cfe0cc;
  border-radius: 50%;
  content: counter(recipe-step);
  font-size: 0.77rem;
  font-weight: 700;
  place-items: center;
}

.day-plan .menu-markdown ol li + li { margin-top: 10px; }

.day-plan .menu-markdown__image {
  display: block;
  width: min(82%, 560px);
  height: auto;
  margin: 0 auto 20px;
  object-fit: contain;
  border: 1px solid #edf1eb;
  border-radius: 16px;
  box-shadow: 0 10px 22px rgb(47 72 56 / 13%);
}

.day-plan .recipe-description {
  margin: 0 0 16px;
  color: #637168;
  line-height: 1.58;
}

.day-plan .recipe-meta {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 10px;
  margin: 0 0 20px;
}

.day-plan .recipe-meta__item,
.day-plan .recipe-macros {
  min-width: 0;
  padding: 11px 12px;
  margin: 0;
  background: #edf6ec;
  border: 1px solid #d9e8d6;
  border-radius: 12px;
}

.day-plan .recipe-meta__item--calories {
  background: #edf5fa;
  border-color: #d9e7ef;
}

.day-plan .recipe-macros {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5f7066;
  background: #f7f9f5;
  border-color: #e2e8df;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

.day-plan .recipe-meta__label,
.day-plan .recipe-meta__value { display: block; }

.day-plan .recipe-meta__label {
  color: #607067;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.day-plan .recipe-meta__value {
  margin-top: 5px;
  color: #284133;
  font-size: 0.93rem;
  font-weight: 700;
  line-height: 1.3;
}

.day-plan .recipe-ingredients {
  padding: 15px;
  margin: 20px 0;
  background: #fff8e5;
  border: 1px solid #f1e4bd;
  border-radius: 14px;
}

.day-plan .recipe-ingredients__list {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.day-plan .recipe-ingredients__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgb(181 155 91 / 18%);
}

.day-plan .recipe-ingredients__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.day-plan .recipe-ingredients__amount {
  flex: 0 0 auto;
  color: #68562e;
  font-weight: 700;
  text-align: right;
}

.day-plan .recipe-note,
.day-plan .menu-markdown blockquote {
  padding: 10px 12px;
  background: #f3f8f2;
  border: 1px solid #dce9d9;
  border-left: 3px solid #aac6a7;
  border-radius: 9px;
}

.day-plan .recipe-title__icon,
.day-plan .recipe-heading__icon,
.day-plan .recipe-inline-label__icon { display: none; }

.day-plan .recipe-why {
  margin: 0 0 20px;
  overflow: hidden;
  background: #f5f8f0;
  border: 1px solid #dfe8d8;
  border-radius: 14px;
}

.day-plan .recipe-why__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  color: #36513f;
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.day-plan .recipe-why__icon {
  display: grid;
  width: 25px;
  height: 25px;
  margin-left: 12px;
  background: #eaf3e6;
  border: 1px solid #d2e1cc;
  border-radius: 50%;
  place-items: center;
}

.day-plan .recipe-why__body {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: max-height 280ms ease, opacity 200ms ease, visibility 0s linear 280ms;
}

.day-plan .recipe-why.is-open .recipe-why__body {
  max-height: 1200px;
  visibility: visible;
  opacity: 1;
  transition: max-height 320ms ease, opacity 220ms ease;
}

.day-plan .recipe-why__body-inner {
  padding: 0 16px 15px;
  border-top: 1px solid #e3ebde;
}

.day-plan__footer {
  padding: 14px 17px;
  margin: 13px 0 0;
  color: #3d6350;
  background: #e4efe2;
  border: 1px solid #d3e2d0;
  border-radius: 14px;
  font-size: 0.86rem;
  font-weight: 650;
  text-align: center;
}

.landing-section {
  padding: 90px 0;
}

.landing-section--tinted {
  background: #f0f4eb;
}

.landing-section--soft-blue {
  background: #edf4f6;
}

.section-heading {
  max-width: 650px;
}

.section-heading--center {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}

.section-heading--wide {
  max-width: 900px;
}

.section-heading h2,
.size-content h2,
.included-card h2,
.final-cta h2 {
  margin-bottom: 17px;
  color: var(--forest);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.15rem, 4vw, 3.6rem);
  line-height: 1.06;
}

.section-heading > p:last-child,
.size-content > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 1.03rem;
}

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(44px, 6vw, 76px);
}

.product-demo {
  min-width: 0;
}

.overview-section .section-heading {
  max-width: 460px;
}

.overview-section .section-kicker {
  margin-bottom: 15px;
  color: #5c7966;
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.73rem;
  font-weight: 650;
  letter-spacing: 0.11em;
}

.overview-section .section-heading h2 {
  margin-bottom: 21px;
  color: #183f31;
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.55rem, 4vw, 3.5rem);
  font-weight: 780;
  letter-spacing: -0.047em;
  line-height: 1.08;
}

.overview-section .section-heading > p:last-child {
  max-width: 440px;
  color: #465968;
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.02rem;
  line-height: 1.68;
}

.magnet-showcase {
  display: grid;
  min-height: 470px;
  padding: clamp(18px, 2.2vw, 28px);
  margin: 0;
  overflow: hidden;
  background: #edf3e9;
  border: 1px solid #d8e3d4;
  border-radius: 27px;
  box-shadow: 0 19px 45px rgb(45 65 53 / 10%);
  place-items: center;
}

.magnet-showcase img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 510px;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 14px 32px rgb(43 66 51 / 13%);
}

.feature-tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  margin: 16px 0 0;
  list-style: none;
}

.feature-tags li {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 62px;
  padding: 12px 14px;
  color: #294b3c;
  background: rgb(255 253 248 / 92%);
  border: 1px solid #dce5da;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgb(45 65 53 / 4%);
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.3;
}

.feature-tags svg {
  width: 30px;
  height: 30px;
  padding: 6px;
  flex: 0 0 auto;
  color: #557765;
  background: var(--green-soft);
  border-radius: 10px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.feature-tags li:nth-child(2) svg {
  color: #53788c;
  background: var(--blue-soft);
}

.feature-tags li:nth-child(3) svg {
  color: #768150;
  background: var(--yellow-soft);
}

.feature-tags li:nth-child(4) svg {
  color: #70617d;
  background: var(--lilac-soft);
}

.ecosystem-section {
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
}

.ecosystem-section .section-heading {
  max-width: 1040px;
}

.ecosystem-section .section-kicker {
  color: #5c7966;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.11em;
}

.ecosystem-section .section-heading h2 {
  color: #183f31;
  font-family: inherit;
  font-size: clamp(1.85rem, 3.1vw, 2.75rem);
  font-weight: 750;
  line-height: 1.18;
  letter-spacing: -0.04em;
}

.ecosystem-section .section-heading > p:last-child {
  max-width: 760px;
  color: #465968;
  line-height: 1.65;
}

.ecosystem-product {
  display: grid;
  grid-template-columns: minmax(0, 1.95fr) minmax(270px, 1fr);
  align-items: stretch;
  gap: 0;
  padding: 16px;
  margin-top: 40px;
  overflow: hidden;
  background: #f4f7f1;
  border: 1px solid #dbe6da;
  border-radius: 29px;
  box-shadow: 0 16px 42px rgb(45 65 53 / 7%);
}

.ecosystem-product__media {
  min-width: 0;
  margin: 0;
}

.ecosystem-product__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 22px;
}

.ecosystem-product__content {
  display: flex;
  min-width: 0;
  padding: clamp(30px, 4vw, 52px);
  flex-direction: column;
  justify-content: center;
  background: #eef5f4;
  border-radius: 0 22px 22px 0;
}

.ecosystem-product__content h3 {
  margin: 0 0 23px;
  color: #23483a;
  font-family: inherit;
  font-size: clamp(1.45rem, 2.1vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
}

.ecosystem-section .check-list {
  gap: 13px;
  color: #465968;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
}

.ecosystem-section .check-list li::before {
  top: 3px;
  left: 0;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #dfeee2;
  content: "";
}

.ecosystem-section .check-list li::after {
  position: absolute;
  top: 9px;
  left: 6px;
  width: 9px;
  height: 5px;
  border-left: 1.7px solid #527b6a;
  border-bottom: 1.7px solid #527b6a;
  content: "";
  transform: rotate(-45deg);
}

.ecosystem-access-note {
  align-self: flex-start;
  padding: 7px 11px;
  margin: 22px 0 0;
  color: #557064;
  background: #e2eee5;
  border: 1px solid #d3e4d7;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
}

.useful-section {
  background: #f2f7ef;
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
}

.useful-section .section-heading {
  max-width: 820px;
}

.useful-section .section-heading h2 {
  color: #183f31;
  font-family: inherit;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 780;
  letter-spacing: -0.045em;
  line-height: 1.1;
}

.useful-section__lead {
  max-width: 760px;
  margin: 16px auto 0;
  color: #465968;
  font-size: 1rem;
  line-height: 1.65;
}

.useful-history {
  display: grid;
  grid-template-columns: 106px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 18px 22px;
  margin-top: 26px;
  color: #465968;
  background: rgb(255 253 248 / 78%);
  border: 1px solid rgb(75 107 88 / 14%);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgb(45 65 53 / 4%);
}

.useful-history__accent {
  display: flex;
  min-height: 76px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #23483a;
  background: #e8f1e6;
  border: 1px solid rgb(75 107 88 / 10%);
  border-radius: 15px;
}

.useful-history__accent strong {
  font-size: 1.65rem;
  font-weight: 780;
  letter-spacing: -0.04em;
  line-height: 1;
}

.useful-history__accent span {
  margin-top: 4px;
  color: #5a7165;
  font-size: 0.73rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.useful-history__content h3 {
  margin: 0 0 7px;
  color: #294b3c;
  font-family: inherit;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.useful-history__content p {
  margin: 0;
  font-size: 0.91rem;
  line-height: 1.56;
}

.useful-history__content .useful-history__caption {
  padding-top: 8px;
  margin-top: 9px;
  color: #5b7065;
  border-top: 1px solid rgb(75 107 88 / 11%);
  font-size: 0.78rem;
  font-weight: 570;
  line-height: 1.45;
}

.useful-history + .useful-grid {
  margin-top: 18px;
}

.useful-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.useful-card {
  min-width: 0;
  padding: 24px 23px;
  background: #f7f4eb;
  border: 1px solid rgb(75 107 88 / 11%);
  border-radius: 21px;
  box-shadow: 0 10px 26px rgb(45 65 53 / 5%);
}

.useful-card--green {
  background: #edf5e9;
}

.useful-card--blue {
  background: #edf5f8;
}

.useful-card--peach {
  background: #faeee6;
}

.useful-card__number {
  display: grid;
  width: 40px;
  height: 40px;
  color: #315746;
  background: rgb(255 253 248 / 76%);
  border: 1px solid rgb(86 116 98 / 10%);
  border-radius: 50%;
  font-size: 0.77rem;
  font-weight: 700;
  place-items: center;
}

.useful-card h3 {
  margin: 20px 0 10px;
  color: #23483a;
  font-family: inherit;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.3;
}

.useful-card p {
  margin: 0;
  color: #465968;
  font-size: 0.91rem;
  line-height: 1.58;
}

.useful-card .useful-card__note {
  padding-top: 12px;
  margin-top: 14px;
  color: #536d61;
  border-top: 1px solid rgb(75 107 88 / 13%);
  font-size: 0.82rem;
  font-weight: 550;
}

.useful-important {
  padding: 19px 21px;
  margin-top: 16px;
  color: #465968;
  background: rgb(255 253 248 / 72%);
  border: 1px solid #dce6da;
  border-radius: 17px;
  box-shadow: 0 7px 20px rgb(45 65 53 / 3%);
}

.useful-important h3 {
  margin: 0 0 9px;
  color: #294b3c;
  font-family: inherit;
  font-size: 1.04rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.35;
}

.useful-important p {
  max-width: 980px;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.58;
}

.day-example-section .day-example {
  margin-top: 0;
}

.check-list {
  display: grid;
  gap: 9px;
  padding: 0;
  margin: 0;
  color: #526a5d;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 27px;
}

.check-list li::before {
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  width: 19px;
  height: 19px;
  color: #477059;
  background: #dfeedd;
  border-radius: 50%;
  content: "✓";
  font-size: 0.7rem;
  font-weight: 800;
  place-items: center;
}

.steps-section {
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
}

.steps-section .section-kicker {
  color: #5c7966;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.11em;
}

.steps-section .section-heading h2 {
  margin-bottom: 0;
  color: #183f31;
  font-family: inherit;
  font-size: clamp(2.1rem, 3.5vw, 3rem);
  font-weight: 750;
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.steps-section .steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding: 0;
  margin: 40px 0 0;
  list-style: none;
  counter-reset: none;
}

.steps-section .step-card {
  display: flex;
  min-height: 224px;
  padding: 30px;
  flex-direction: column;
  background: rgb(255 253 248 / 88%);
  border: 1px solid #d8e4e5;
  border-radius: 21px;
  box-shadow: 0 10px 26px rgb(45 65 53 / 5%);
}

.steps-section .step-card:nth-child(1) {
  border-color: #d7e5d5;
}

.steps-section .step-card:nth-child(2) {
  border-color: #d4e4e9;
}

.steps-section .step-card:nth-child(3) {
  border-color: #e6e2c9;
}

.step-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.steps-section .step-card__number {
  color: #6b7f76;
  font-family: inherit;
  font-size: 1.72rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}

.step-card__icon {
  display: grid;
  width: 43px;
  height: 43px;
  flex: 0 0 auto;
  color: #527260;
  background: #e8f2e7;
  border-radius: 50%;
  place-items: center;
}

.steps-section .step-card:nth-child(2) .step-card__icon {
  color: #52758a;
  background: #e7f1f5;
}

.steps-section .step-card:nth-child(3) .step-card__icon {
  color: #767a50;
  background: #f3f0d9;
}

.step-card__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.steps-section .step-card h3 {
  margin: auto 0 9px;
  padding-top: 34px;
  color: #23483a;
  font-family: inherit;
  font-size: 1.38rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.steps-section .step-card p {
  margin: 0;
  color: #465968;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.55;
}

.size-section {
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
}

.size-section .size-grid,
.included-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(390px, 1.08fr);
  align-items: center;
  gap: clamp(42px, 7vw, 88px);
}

.size-section .size-content {
  max-width: 470px;
}

.size-section .section-kicker {
  color: #5c7966;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.11em;
}

.size-section .size-content h2 {
  margin-bottom: 22px;
  color: #183f31;
  font-family: inherit;
  font-size: clamp(2.35rem, 3.55vw, 3.2rem);
  font-weight: 750;
  letter-spacing: -0.045em;
  line-height: 1.1;
}

.size-section .size-value {
  margin: 30px 0 22px;
  color: #23483a;
  font-family: inherit;
  font-size: clamp(3.35rem, 5.8vw, 5.25rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.065em;
}

.size-section .size-value span {
  color: #71867a;
  font-size: 0.48em;
  font-weight: 500;
}

.size-section .size-value small {
  margin-left: 7px;
  color: #6b7b71;
  font-family: inherit;
  font-size: 0.18em;
  font-weight: 600;
  letter-spacing: 0;
}

.size-section .size-content > p:last-child {
  margin: 0;
  color: #465968;
  font-family: inherit;
  font-size: 1.03rem;
  line-height: 1.67;
}

.size-visual {
  min-width: 0;
  padding: 24px 26px 17px;
  margin: 0;
  background: #eef4eb;
  border: 1px solid #d8e3d5;
  border-radius: 26px;
  box-shadow: 0 16px 40px rgb(45 65 53 / 8%);
}

.size-visual__image {
  position: relative;
  padding: 0;
}

.size-visual__image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 14px 30px rgb(43 66 51 / 12%);
}

.included-section {
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
}

.included-section .included-grid {
  grid-template-columns: minmax(0, 0.76fr) minmax(390px, 1.24fr);
}

.included-section .included-card {
  padding: clamp(32px, 3.3vw, 42px);
  background: var(--paper);
  border: 1px solid #dbe5da;
  border-radius: 25px;
  box-shadow: 0 12px 32px rgb(45 65 53 / 6%);
}

.included-section .section-kicker {
  color: #5c7966;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.11em;
}

.included-section .included-card h2 {
  margin-bottom: 23px;
  color: #183f31;
  font-family: inherit;
  font-size: clamp(2.25rem, 3.6vw, 3.15rem);
  font-weight: 750;
  letter-spacing: -0.042em;
  line-height: 1.1;
}

.included-section .included-card h3 {
  margin: 0 0 22px;
  color: #294f3f;
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.included-card__group + .included-card__group {
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid #e2e9df;
}

.included-section .included-card__group h3 {
  margin-bottom: 15px;
  font-size: 1.08rem;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

.included-section .check-list--large {
  gap: 13px;
  color: #465f53;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.55;
}

.included-section .check-list li::before {
  top: 3px;
  width: 21px;
  height: 21px;
  background: #e1eee0;
  content: "";
}

.included-section .check-list li::after {
  position: absolute;
  top: 9px;
  left: 6px;
  width: 9px;
  height: 5px;
  border-left: 1.7px solid #4d735b;
  border-bottom: 1.7px solid #4d735b;
  content: "";
  transform: rotate(-45deg);
}

.included-access-note {
  margin: 17px 0 0;
  color: #687a70;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.5;
}

.included-visual {
  display: flex;
  min-width: 0;
  padding: clamp(18px, 2.4vw, 28px);
  margin: 0;
  flex-direction: column;
  justify-content: center;
  background: #eff4eb;
  border: 1px solid #d8e3d5;
  border-radius: 27px;
  box-shadow: 0 16px 40px rgb(45 65 53 / 8%);
}

.included-visual img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 13px 30px rgb(43 66 51 / 12%);
}

.included-visual figcaption {
  margin-top: 13px;
  color: #6b7d73;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  text-align: center;
}

.checkout-page {
  min-height: 100vh;
  background: var(--cream);
}

.checkout-page-header {
  padding: 17px 0;
  background: rgb(255 253 248 / 92%);
  border-bottom: 1px solid #dce5da;
}

.checkout-page-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.checkout-back-link {
  color: #526b5e;
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.checkout-back-link:hover {
  color: #294739;
}

.checkout-section {
  scroll-margin-top: 18px;
  background: var(--paper);
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
}

.checkout-page .checkout-section {
  padding: 50px 0 72px;
  background: var(--cream);
}

.checkout-heading {
  max-width: 790px;
}

.checkout-heading h2 {
  margin-bottom: 15px;
  color: #183f31;
  font-family: inherit;
  font-size: clamp(2.25rem, 3.8vw, 3.25rem);
  font-weight: 780;
  letter-spacing: -0.045em;
  line-height: 1.1;
}

.checkout-heading > p:last-child {
  max-width: 690px;
  margin: 0 auto;
  color: #50616b;
  font-size: 1rem;
  line-height: 1.65;
}

.checkout-reassurance {
  margin: 16px auto 0;
  color: #61736a;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.5;
  text-align: center;
}

.checkout-reassurance span {
  padding-inline: 7px;
  color: #9aaba0;
}

.checkout-reassurance + .checkout-layout {
  margin-top: 24px;
}

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.62fr);
  align-items: start;
  gap: clamp(22px, 3vw, 36px);
  margin-top: 42px;
}

.checkout-form {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.checkout-panel,
.checkout-summary {
  min-width: 0;
  padding: clamp(24px, 3vw, 32px);
  background: #fbfaf4;
  border: 1px solid #dce5da;
  border-radius: 24px;
  box-shadow: 0 12px 34px rgb(45 65 53 / 6%);
}

.checkout-panel {
  margin: 0;
}

.checkout-panel legend {
  width: 100%;
  padding: 0;
  margin: 0 0 22px;
  color: #244b3a;
  font-size: 1.2rem;
  font-weight: 720;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.checkout-panel legend span {
  color: #71877a;
}

.checkout-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.checkout-fields .checkout-field:last-child {
  grid-column: 1 / -1;
}

.checkout-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
  color: #345346;
  font-size: 0.88rem;
  font-weight: 650;
}

.checkout-field > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.checkout-field em {
  color: #78867e;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 500;
}

.checkout-field input {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  color: #28483b;
  background: #fffdf8;
  border: 1px solid #d4dfd2;
  border-radius: 13px;
  outline: none;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 450;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.checkout-field input::placeholder {
  color: #89948e;
}

.checkout-field input:focus {
  border-color: #779684;
  box-shadow: 0 0 0 3px rgb(91 126 106 / 11%);
}

.checkout-field input[aria-invalid="true"] {
  background: #fffaf7;
  border-color: #bf7c6f;
  box-shadow: 0 0 0 3px rgb(178 102 88 / 9%);
}

.checkout-field__hint,
.checkout-field__error {
  display: block;
  min-height: 1.1em;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.4;
}

.checkout-field__hint {
  margin-top: -1px;
  color: #75827a;
}

.checkout-field__error {
  color: #9b574c;
}

.checkout-field__hint + .checkout-field__error {
  margin-top: -6px;
}

.checkout-field__error--standalone {
  margin-top: 9px;
}

.delivery-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin-bottom: 20px;
}

.delivery-option {
  position: relative;
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  min-height: 86px;
  padding: 15px;
  color: #38564a;
  background: #fffdf8;
  border: 1px solid #d8e2d6;
  border-radius: 15px;
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.delivery-option:hover,
.delivery-option:has(input:checked) {
  background: #f2f7ef;
  border-color: #afc5b2;
  box-shadow: 0 7px 17px rgb(45 65 53 / 5%);
}

.delivery-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.delivery-option__marker {
  position: relative;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: #fffdf8;
  border: 1.5px solid #9cb0a0;
  border-radius: 50%;
}

.delivery-option input:checked + .delivery-option__marker {
  border-color: #4d735b;
  box-shadow: inset 0 0 0 5px #fffdf8;
  background: #4d735b;
}

.delivery-option input:focus-visible + .delivery-option__marker {
  outline: 3px solid rgb(91 126 106 / 14%);
  outline-offset: 2px;
}

.delivery-option strong,
.delivery-option small {
  display: block;
}

.delivery-option strong {
  font-size: 0.92rem;
  line-height: 1.35;
}

.delivery-option small {
  margin-top: 4px;
  color: #718078;
  font-size: 0.74rem;
  font-weight: 450;
  line-height: 1.4;
}

.delivery-panel[hidden],
.pickup-mock[hidden],
.pickup-selected[hidden],
.checkout-status[hidden],
.checkout-success[hidden] {
  display: none;
}

.checkout-secondary-button {
  min-height: 48px;
  padding: 11px 17px;
  margin-top: 4px;
  color: #315746;
  background: #e9f2e6;
  border: 1px solid #cfe0cc;
  border-radius: 13px;
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  transition: background-color 180ms ease, transform 180ms ease;
}

.checkout-secondary-button:hover {
  background: #e1eddd;
  transform: translateY(-1px);
}

.pickup-mock,
.pickup-selected {
  padding: 15px 16px;
  margin-top: 14px;
  background: #edf5f8;
  border: 1px solid #d6e5e8;
  border-radius: 14px;
}

.pickup-mock p {
  margin: 0;
  color: #50636e;
  font-size: 0.82rem;
  line-height: 1.5;
}

.pickup-mock button,
.pickup-selected button {
  padding: 0;
  margin-top: 8px;
  color: #315b73;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.pickup-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #edf5e9;
  border-color: #d5e5d2;
}

.pickup-selected small,
.pickup-selected strong {
  display: block;
}

.pickup-selected small {
  color: #718078;
  font-size: 0.7rem;
}

.pickup-selected strong {
  margin-top: 2px;
  color: #315346;
  font-size: 0.88rem;
  line-height: 1.4;
}

.pickup-selected button {
  flex: 0 0 auto;
  margin-top: 0;
  color: #557564;
}

.postal-fields {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.postal-fields:not([hidden]) {
  display: grid;
}

.postal-fields .checkout-field {
  grid-column: span 8;
}

.postal-fields .checkout-field--short {
  grid-column: span 4;
}

.postal-fields .checkout-field--wide {
  grid-column: 1 / -1;
}

.checkout-summary {
  position: sticky;
  top: 22px;
}

.checkout-summary > h3 {
  margin: 0 0 20px;
  color: #244b3a;
  font-size: 1.35rem;
  font-weight: 740;
  letter-spacing: -0.025em;
}

.checkout-product {
  display: grid;
  grid-template-columns: 102px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  padding-bottom: 20px;
  border-bottom: 1px solid #dde6da;
}

.checkout-product img {
  display: block;
  width: 102px;
  height: 102px;
  padding: 6px;
  object-fit: contain;
  background: #eef4eb;
  border: 1px solid #d8e3d5;
  border-radius: 14px;
}

.checkout-product strong,
.checkout-product span {
  display: block;
}

.checkout-product strong {
  color: #294b3c;
  font-size: 0.98rem;
  line-height: 1.35;
}

.checkout-product p {
  margin: 5px 0 7px;
  color: #687870;
  font-size: 0.76rem;
  line-height: 1.45;
}

.checkout-product span {
  color: #4f685b;
  font-size: 0.8rem;
  font-weight: 650;
}

.checkout-totals {
  display: grid;
  gap: 12px;
  margin: 22px 0;
}

.checkout-totals > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  color: #5d6e65;
  font-size: 0.88rem;
}

.checkout-totals dt,
.checkout-totals dd {
  margin: 0;
}

.checkout-totals dd {
  color: #344f44;
  font-weight: 650;
  text-align: right;
}

.checkout-totals__grand {
  padding-top: 15px;
  margin-top: 3px;
  border-top: 1px solid #dbe4d8;
  font-size: 1.05rem !important;
  font-weight: 700;
}

.checkout-totals__grand dd {
  color: #183f31;
  font-size: 1.25rem;
}

.checkout-pay-button {
  width: 100%;
  min-height: 58px;
  cursor: pointer;
  font-family: inherit;
}

.checkout-status {
  padding: 12px 14px;
  margin-top: 12px;
  color: #3d5b4d;
  background: #e8f2e5;
  border: 1px solid #d1e2ce;
  border-radius: 12px;
  font-size: 0.8rem;
  line-height: 1.5;
}

.checkout-status.is-error {
  color: #865146;
  background: #fbefea;
  border-color: #ecd5ce;
}

.checkout-consent {
  margin: 13px 0 0;
  color: #75827b;
  font-size: 0.7rem;
  line-height: 1.5;
}

.checkout-consent a {
  color: #526d5f;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.checkout-payment-hint {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
  color: #687870;
  font-size: 0.72rem;
}

.checkout-payment-hint b {
  padding: 4px 7px;
  color: #526d5f;
  background: #eef4eb;
  border: 1px solid #dae5d8;
  border-radius: 7px;
  font-size: 0.67rem;
  font-weight: 700;
}

.checkout-success {
  max-width: 710px;
  padding: clamp(28px, 4vw, 42px);
  margin: 30px auto 0;
  background: #edf5e9;
  border: 1px solid #d3e4d0;
  border-radius: 24px;
  box-shadow: 0 12px 34px rgb(45 65 53 / 6%);
  text-align: center;
}

.checkout-success h3 {
  margin: 0 0 12px;
  color: #183f31;
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  font-weight: 760;
}

.checkout-success p {
  margin: 7px 0;
  color: #52655b;
}

.checkout-success strong {
  display: block;
  margin: 15px 0;
  color: #294b3c;
}

.checkout-success .primary-button {
  margin-top: 16px;
}

.faq-section {
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
}

.faq-section .section-kicker {
  color: #5c7966;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.11em;
}

.faq-section .section-heading h2 {
  margin-bottom: 0;
  color: #183f31;
  font-family: inherit;
  font-size: clamp(2.2rem, 3.7vw, 3.15rem);
  font-weight: 760;
  letter-spacing: -0.042em;
  line-height: 1.12;
}

.faq-list {
  display: grid;
  gap: 11px;
  max-width: 900px;
  margin: 38px auto 0;
}

.faq-item {
  overflow: hidden;
  background: rgb(255 253 248 / 92%);
  border: 1px solid #d9e4d7;
  border-radius: 17px;
  box-shadow: 0 8px 22px rgb(45 65 53 / 4%);
}

.faq-item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  color: #294b3c;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.4;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary span {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  background: #e7f1e4;
  border-radius: 50%;
}

.faq-item summary span::before,
.faq-item summary span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background: #557564;
  content: "";
  transition: transform 200ms ease;
  transform: translate(-50%, -50%);
}

.faq-item summary span::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] summary span::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq-item > p {
  padding: 0 62px 20px 20px;
  margin: 0;
  color: #4a5d68;
  font-size: 0.92rem;
  line-height: 1.65;
}

.faq-item .faq-item__pending {
  color: #786d4c;
}

.order-section {
  background: var(--paper);
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
}

.order-card {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
  align-items: stretch;
  gap: clamp(32px, 5vw, 62px);
  padding: clamp(20px, 2.4vw, 30px);
  background: #f2f6ee;
  border: 1px solid #d8e3d5;
  border-radius: 29px;
  box-shadow: 0 18px 46px rgb(45 65 53 / 8%);
}

.order-card__media {
  display: grid;
  min-width: 0;
  min-height: 490px;
  padding: 18px;
  margin: 0;
  background: #e9f1e6;
  border-radius: 22px;
  place-items: center;
}

.order-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: contain;
  border-radius: 17px;
  box-shadow: 0 14px 32px rgb(43 66 51 / 12%);
}

.order-card__content {
  display: flex;
  min-width: 0;
  padding: clamp(18px, 2.8vw, 36px) clamp(10px, 2vw, 24px);
  flex-direction: column;
  justify-content: center;
}

.order-card__content .section-kicker {
  color: #5c7966;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.11em;
}

.order-card__content h2 {
  margin: 0 0 12px;
  color: #183f31;
  font-family: inherit;
  font-size: clamp(2.05rem, 3.3vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.047em;
  line-height: 1.08;
}

.order-card__subtitle {
  margin: 0;
  color: #465968;
  font-size: 1.02rem;
  line-height: 1.62;
}

.order-card__list {
  gap: 12px;
  margin: 25px 0;
  color: #465f53;
  font-size: 0.98rem;
  line-height: 1.5;
}

.order-card__list li::before {
  top: 2px;
  width: 21px;
  height: 21px;
  background: #e1eee0;
  content: "";
}

.order-card__list li::after {
  position: absolute;
  top: 8px;
  left: 6px;
  width: 9px;
  height: 5px;
  border-left: 1.7px solid #4d735b;
  border-bottom: 1.7px solid #4d735b;
  content: "";
  transform: rotate(-45deg);
}

.order-card__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  padding: 0;
  margin: 25px 0;
  list-style: none;
}

.order-card__facts li {
  display: flex;
  min-width: 0;
  min-height: 82px;
  padding: 12px 9px;
  flex-direction: column;
  justify-content: center;
  background: #fffdf8;
  border: 1px solid #dce6d9;
  border-radius: 14px;
  text-align: center;
}

.order-card__facts strong {
  color: #244b3a;
  font-size: 1.35rem;
  line-height: 1.1;
}

.order-card__facts span {
  margin-top: 4px;
  color: #65766d;
  font-size: 0.72rem;
  line-height: 1.3;
}

.order-card__price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
  margin: 0 0 22px;
  border-top: 1px solid #dbe5d8;
  border-bottom: 1px solid #dbe5d8;
}

.order-card__price span {
  color: #65766d;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.order-card__price strong {
  color: #1f4937;
  font-size: clamp(1.45rem, 2.2vw, 1.7rem);
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.order-card__content .primary-button {
  align-self: flex-start;
}

.final-cta {
  padding: 80px 0;
  background: var(--forest);
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
}

.final-cta__inner {
  max-width: 820px;
  text-align: center;
}

.final-cta .section-kicker {
  margin-bottom: 14px;
  color: #bcd4c1;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.11em;
}

.final-cta h2 {
  max-width: 720px;
  margin: 0 auto 19px;
  color: #fffdf7;
  font-family: inherit;
  font-size: clamp(2.45rem, 4.6vw, 3.65rem);
  font-weight: 800;
  letter-spacing: -0.047em;
  line-height: 1.08;
}

.final-cta__inner > p:not(.section-kicker) {
  max-width: 690px;
  margin: 0 auto 29px;
  color: #d9e5dc;
  font-family: inherit;
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.68;
}

.final-cta .primary-button--large {
  min-height: 64px;
  padding: 18px 35px;
  color: var(--forest);
  background: #fffdf7;
  border-color: #fffdf7;
  border-radius: 17px;
  box-shadow: 0 15px 32px rgb(10 25 17 / 24%);
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
}

.final-cta .primary-button--large:hover {
  color: var(--forest);
  background: #f5f8f1;
  box-shadow: 0 18px 36px rgb(10 25 17 / 29%);
  transform: translateY(-2px);
}

.purchase-details {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

.purchase-details span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #c8d9cc;
  font-family: "Onest", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
}

.purchase-details svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

@media (max-width: 960px) {
  .product-brand--image {
    flex-basis: 145px;
    width: 145px;
    height: 48px;
  }

  .product-hero__grid,
  .overview-grid,
  .size-section .size-grid,
  .included-section .included-grid,
  .checkout-layout,
  .order-card {
    grid-template-columns: 1fr;
  }

  .product-hero__content,
  .section-heading,
  .size-section .size-content {
    max-width: 760px;
  }

  .product-hero__media,
  .product-hero__media img {
    min-height: 520px;
  }

  .overview-grid .section-heading {
    max-width: 740px;
  }

  .ecosystem-product {
    grid-template-columns: minmax(0, 1.65fr) minmax(250px, 1fr);
  }

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

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

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

  .nutrition-principle {
    min-height: 205px;
  }

  .recipe-bridge {
    grid-template-columns: minmax(0, 1fr);
  }

  .recipe-bridge__content,
  .recipe-bridge h3,
  .recipe-bridge__description {
    max-width: 760px;
  }

  .recipe-bridge__media--placeholder {
    min-height: 340px;
  }

  .order-card__media {
    min-height: 440px;
  }

  .order-card__content {
    max-width: 720px;
  }

  .checkout-summary {
    position: static;
  }
}

@media (max-width: 760px) {
  .product-shell {
    width: min(100% - 28px, var(--shell));
  }

  .product-hero {
    padding-bottom: 64px;
  }

  .checkout-page-header {
    padding: 13px 0;
  }

  .checkout-page .checkout-section {
    padding: 42px 0 62px;
  }

  .product-hero__grid {
    gap: 40px;
    padding-top: 38px;
  }

  .product-hero__format {
    display: none;
  }

  .product-brand--image {
    flex-basis: 125px;
    width: 125px;
    height: 40px;
  }

  .product-hero h1 {
    font-size: clamp(2.3rem, 7vw, 3rem);
  }

  .landing-section {
    padding: 70px 0;
  }

  .system-intro__grid,
  .situation-grid,
  .useful-grid,
  .steps-section .steps-grid {
    grid-template-columns: 1fr;
  }

  .useful-grid {
    gap: 14px;
  }

  .useful-card {
    padding: 22px 21px;
  }

  .useful-history {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 18px 19px;
  }

  .useful-history__accent {
    min-height: 0;
    width: max-content;
    flex-direction: row;
    gap: 6px;
    padding: 9px 13px;
    border-radius: 999px;
  }

  .useful-history__accent strong {
    font-size: 1.08rem;
  }

  .useful-history__accent span {
    margin-top: 0;
  }

  .useful-important {
    padding: 17px 19px;
  }

  .situation-card {
    min-height: 0;
  }

  .system-intro__card {
    min-height: 0;
  }

  .steps-section .step-card {
    min-height: 0;
  }

  .ecosystem-product {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }

  .ecosystem-product__content {
    padding: 30px 24px;
    border-radius: 0 0 20px 20px;
  }

  .checkout-fields,
  .delivery-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .checkout-fields .checkout-field:last-child {
    grid-column: auto;
  }

  .postal-fields .checkout-field,
  .postal-fields .checkout-field--short,
  .postal-fields .checkout-field--wide {
    grid-column: 1 / -1;
  }

  .nutrition-story__heading h2 br {
    display: none;
  }

  .nutrition-story__intro,
  .nutrition-changes__grid,
  .nutrition-benefits__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .nutrition-thesis {
    grid-template-columns: minmax(0, 1fr);
  }

  .nutrition-principles {
    grid-template-columns: minmax(0, 1fr);
  }

  .nutrition-principle {
    min-height: 0;
  }

  .day-plan .recipe-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .day-plan .recipe-meta__item--portion {
    grid-column: 1 / -1;
  }

  .order-card {
    padding: 14px;
    border-radius: 24px;
  }

  .order-card__content {
    padding: 24px 16px 18px;
  }
}

@media (max-width: 520px) {
  .product-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .product-hero__content {
    display: contents;
  }

  .product-hero .section-kicker {
    order: 1;
  }

  .product-hero h1 {
    order: 2;
  }

  .product-hero__subtitle {
    order: 3;
  }

  .product-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    order: 4;
  }

  .product-hero h1 {
    font-size: clamp(2.05rem, 9vw, 2.4rem);
  }

  .product-hero__media {
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 22px 0;
    order: 5;
  }

  .product-hero__media img {
    width: 100%;
    height: auto;
    min-height: 0;
    object-fit: contain;
  }

  .product-hero .primary-button {
    order: 6;
  }

  .product-hero__meta {
    order: 7;
  }

  .product-stats li {
    align-items: center;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 10px 7px;
    text-align: center;
  }

  .product-stats span {
    font-size: 0.67rem;
    line-height: 1.2;
  }

  .primary-button {
    width: 100%;
  }

  .checkout-page-header__inner {
    gap: 14px;
  }

  .checkout-page-header .product-brand {
    font-size: 0.92rem;
  }

  .checkout-back-link {
    font-size: 0.76rem;
  }

  .checkout-reassurance {
    max-width: 320px;
  }

  .landing-section {
    padding: 58px 0;
  }

  .system-intro {
    padding-block: 52px;
  }

  .system-intro .section-heading h2 {
    font-size: clamp(1.95rem, 9vw, 2.45rem);
  }

  .system-intro__card {
    padding: 19px;
  }

  .section-heading h2,
  .size-content h2,
  .included-card h2,
  .final-cta h2 {
    font-size: clamp(2rem, 10vw, 2.75rem);
  }

  .magnet-showcase,
  .size-visual {
    min-height: 340px;
  }

  .magnet-showcase {
    padding: 12px;
  }

  .feature-tags {
    grid-template-columns: 1fr;
  }

  .included-section .included-card {
    padding: 22px;
    border-radius: 23px;
  }

  .checkout-layout {
    margin-top: 32px;
  }

  .checkout-panel,
  .checkout-summary {
    padding: 21px 18px;
    border-radius: 21px;
  }

  .checkout-product {
    grid-template-columns: 84px minmax(0, 1fr);
  }

  .checkout-product img {
    width: 84px;
    height: 84px;
  }

  .pickup-selected {
    align-items: flex-start;
    flex-direction: column;
  }

  .situation-section .section-heading h2 {
    font-size: clamp(2rem, 10vw, 2.55rem);
  }

  .situation-card {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
    padding: 21px 18px;
  }

  .situation-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .situation-summary {
    padding: 15px 17px;
    text-align: left;
  }

  .size-section .size-value {
    font-size: clamp(3.1rem, 17vw, 4.6rem);
  }

  .final-cta {
    padding: 64px 0;
  }

  .nutrition-story__heading h2 {
    font-size: clamp(2rem, 10vw, 2.55rem);
  }

  .nutrition-story__intro p,
  .nutrition-change-card,
  .nutrition-benefit-card {
    padding: 20px 18px;
  }

  .nutrition-subheading > p {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    border-radius: 14px;
    text-align: left;
  }

  .nutrition-subheading > p span[aria-hidden="true"] {
    transform: rotate(90deg);
  }

  .nutrition-change-card__flow,
  .nutrition-alternative-list p {
    grid-template-columns: minmax(0, 1fr);
  }

  .nutrition-flow-arrow,
  .nutrition-alternative-list p > span[aria-hidden="true"] {
    justify-self: center;
    transform: rotate(90deg);
  }

  .nutrition-schedule,
  .nutrition-action-path {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .nutrition-schedule li:not(:last-child)::after,
  .nutrition-action-path li:not(:last-child)::after {
    margin-left: 8px;
    transform: rotate(90deg);
  }

  .nutrition-foundation {
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
    padding: 22px;
  }

  .nutrition-thesis {
    gap: 17px;
    padding: 23px 20px;
    border-radius: 22px;
  }

  .recipe-bridge {
    gap: 28px;
    padding: 23px 18px;
    margin-top: 30px;
    border-radius: 23px;
  }

  .recipe-bridge h3 {
    font-size: clamp(1.8rem, 9vw, 2.25rem);
  }

  .recipe-bridge__media {
    padding: 7px;
    border-radius: 20px;
  }

  .recipe-bridge__media--placeholder {
    min-height: 320px;
    padding: 24px;
  }

  .recipe-bridge__media img {
    border-radius: 15px;
  }

  .day-example {
    margin-top: 48px;
  }

  .day-example__heading h3 {
    font-size: clamp(1.8rem, 9vw, 2.25rem);
  }

  .day-plan {
    padding: 21px 18px;
    border-radius: 23px;
  }

  .day-plan__header {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .day-plan .meal-card__trigger {
    grid-template-columns: 38px minmax(0, 1fr) 30px;
    gap: 8px;
    min-height: 68px;
    padding: 11px 12px;
  }

  .day-plan .meal-card__trigger::before {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  .day-plan .meal-card__calories {
    grid-column: 2;
    grid-row: 2;
    white-space: normal;
  }

  .day-plan .meal-card__trigger > span:first-child {
    grid-column: 2;
    grid-row: 1;
  }

  .day-plan .meal-card__trigger > span:first-child::after {
    content: none !important;
  }

  .day-plan .meal-card__icon {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .day-plan .meal-card__body-inner {
    padding-inline: 12px;
  }

  .day-plan .menu-dish.is-open > .menu-dish__body .menu-markdown {
    padding: 16px;
  }

  .day-plan .menu-markdown__image {
    width: 100%;
  }

  .day-plan .recipe-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .day-plan .recipe-meta__item--portion {
    grid-column: auto;
  }

  .day-plan .recipe-macros {
    min-height: 58px;
  }

  .faq-item summary {
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 12px;
    padding: 16px;
  }

  .faq-item summary span {
    width: 28px;
    height: 28px;
  }

  .faq-item > p {
    padding: 0 16px 18px;
  }

  .order-card__media {
    min-height: 330px;
    padding: 10px;
  }

  .order-card__facts {
    gap: 6px;
  }

  .order-card__facts li {
    min-height: 76px;
    padding-inline: 6px;
  }

  .order-card__content .primary-button {
    align-self: stretch;
  }
}