:root {
  --forest: #2e6f57;
  --forest-dark: #225442;
  --sage: #6fa67a;
  --mint: #ddeedf;
  --mint-soft: #eef7ef;
  --cream: #fafaf7;
  --surface: #ffffff;
  --charcoal: #24322a;
  --stone: #6e7e72;
  --sand: #e8d8b5;
  --gold: #d7a95b;
  --border: #dce8de;
  --shadow: 0 20px 56px rgba(36, 50, 42, 0.09);
  --radius-lg: 30px;
  --radius-md: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--charcoal); background: var(--cream); font-family: Inter, Manrope, "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; }
.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 10px 16px; color: white; background: var(--forest); border-radius: 999px; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-header { width: min(1180px, calc(100% - 40px)); min-height: 96px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand, .footer-brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; }
.brand img { object-fit: contain; }
.brand span { display: grid; line-height: 1.15; }
.brand strong { color: var(--forest); font-size: 1.08rem; letter-spacing: 0.01em; }
.brand small { margin-top: 5px; color: var(--stone); font-size: 0.8rem; }
nav { display: flex; align-items: center; gap: 28px; }
nav a { color: #48584e; text-decoration: none; font-weight: 700; font-size: 0.93rem; }
nav a:hover { color: var(--forest); }

main, footer { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.hero { min-height: 650px; display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); align-items: stretch; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 34px; box-shadow: var(--shadow); }
.hero-copy { padding: clamp(48px, 6vw, 84px); display: flex; flex-direction: column; justify-content: center; }
.eyebrow { margin: 0 0 18px; color: var(--forest); font-size: 0.78rem; font-weight: 850; letter-spacing: 0.115em; text-transform: uppercase; }
h1, h2, h3, p { overflow-wrap: break-word; }
h1 { max-width: 700px; margin: 0; font-size: clamp(2.65rem, 5vw, 4.65rem); line-height: 1.04; letter-spacing: -0.047em; }
.hero-text { max-width: 570px; margin: 28px 0 0; color: var(--stone); font-size: clamp(1.05rem, 1.5vw, 1.2rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { min-height: 52px; padding: 13px 23px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--forest); border-radius: 999px; text-decoration: none; font-weight: 780; transition: transform 160ms ease, background 160ms ease, color 160ms ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: white; background: var(--forest); }
.button-primary:hover { background: var(--forest-dark); }
.button-secondary { color: var(--forest); background: transparent; }
.button-secondary:hover { background: var(--mint); }
.status { margin: 28px 0 0; display: flex; align-items: center; gap: 9px; color: var(--stone); font-size: 0.86rem; }
.status span { width: 9px; height: 9px; flex: 0 0 auto; background: var(--gold); border-radius: 50%; }
.hero-visual { min-height: 650px; margin: 0; position: relative; background: var(--mint); }
.hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(250, 250, 247, 0.18), transparent 34%); pointer-events: none; }
.hero-visual picture, .hero-visual img { width: 100%; height: 100%; display: block; }
.hero-visual img { object-fit: cover; object-position: 62% center; }
.hero-visual figcaption { position: absolute; z-index: 1; right: 24px; bottom: 24px; max-width: 300px; padding: 11px 16px; color: var(--charcoal); background: rgba(250, 250, 247, 0.9); border-radius: 999px; font-size: 0.82rem; font-weight: 700; backdrop-filter: blur(8px); }

.principle { margin: 110px auto; padding: clamp(42px, 7vw, 82px); position: relative; overflow: hidden; text-align: center; background: var(--mint); border: 1px solid rgba(111, 166, 122, 0.35); border-radius: var(--radius-lg); }
.principle::before { content: "P"; position: absolute; top: -72px; left: 28px; color: rgba(46, 111, 87, 0.08); font-size: 15rem; font-weight: 900; line-height: 1; }
.principle h2, .section-heading h2, .community h2, .beta-note h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.12; letter-spacing: -0.035em; }
.principle p:last-child { max-width: 720px; margin: 25px auto 0; color: #53655a; font-size: 1.08rem; }

.recipe-section { padding: 15px 0 110px; scroll-margin-top: 20px; }
.learn-section { padding: 15px 0 92px; scroll-margin-top: 20px; }
.section-heading { max-width: 680px; margin-bottom: 42px; }
.section-heading > p:last-child { color: var(--stone); font-size: 1.08rem; }
.recipe-card { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.recipe-image { min-height: 690px; background: var(--mint); }
.recipe-image picture, .recipe-image img { width: 100%; height: 100%; display: block; }
.recipe-image img { object-fit: cover; object-position: 59% center; }
.recipe-copy { padding: clamp(34px, 5vw, 64px); }
.recipe-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.recipe-meta span, .beta-badge { padding: 7px 12px; color: var(--forest); background: var(--mint-soft); border: 1px solid var(--border); border-radius: 999px; font-size: 0.8rem; font-weight: 800; }
.recipe-copy h3 { margin: 0; font-size: clamp(1.9rem, 3vw, 2.8rem); line-height: 1.12; letter-spacing: -0.03em; }
.recipe-copy > p { color: var(--stone); }
details { border-top: 1px solid var(--border); }
details:last-of-type { border-bottom: 1px solid var(--border); }
summary { padding: 17px 34px 17px 0; position: relative; cursor: pointer; color: var(--charcoal); font-weight: 800; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 5px; color: var(--forest); font-size: 1.3rem; }
details[open] summary::after { content: "–"; }
details ul, details ol, details p { margin: 0 0 20px; padding-left: 22px; color: var(--stone); }
details p { padding-left: 0; }
.review-date { margin: 18px 0 0; font-size: 0.8rem; }

.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.feature-card { min-height: 285px; padding: 32px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 14px 35px rgba(36, 50, 42, 0.06); }
.mint-card { background: var(--mint-soft); }
.sand-card { background: #f5eedf; }
.card-number { width: 52px; height: 52px; display: grid; place-items: center; color: var(--forest); background: rgba(255, 255, 255, 0.76); border: 1px solid rgba(46, 111, 87, 0.13); border-radius: 16px; font-weight: 850; }
.feature-card h3 { margin: auto 0 10px; font-size: 1.38rem; line-height: 1.2; }
.feature-card p { margin: 0; color: var(--stone); }

.beta-note { margin: 30px 0 100px; padding: 42px; display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.beta-mark { width: 76px; height: 76px; display: grid; place-items: center; color: white; background: var(--forest); border-radius: 21px; font-size: 2rem; font-weight: 850; }
.beta-note h2 { font-size: clamp(1.7rem, 3vw, 2.45rem); }
.beta-note p:last-child { margin-bottom: 0; color: var(--stone); }
.beta-badge { white-space: nowrap; background: #f5eedf; border-color: #ead8af; }

.community { margin-bottom: 80px; padding: clamp(42px, 7vw, 78px); display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 7vw, 86px); align-items: center; color: white; background: var(--forest); border-radius: var(--radius-lg); }
.light-eyebrow { color: #c9e3cf; }
.community p:not(.eyebrow) { max-width: 520px; color: #dfede3; font-size: 1.04rem; }
.social-links { display: grid; gap: 12px; }
.social-links a { min-height: 78px; padding: 16px 20px; display: grid; grid-template-columns: 135px 1fr; align-items: center; gap: 18px; color: var(--charcoal); background: white; border-radius: 18px; text-decoration: none; transition: transform 160ms ease, background 160ms ease; }
.social-links a:hover { transform: translateX(4px); background: #f3f8f3; }
.social-links span { color: var(--forest); font-weight: 820; }
.social-links small { color: var(--stone); font-size: 0.84rem; }

footer { padding: 36px 0 46px; display: grid; grid-template-columns: auto 1fr; gap: 10px 30px; align-items: center; border-top: 1px solid var(--border); }
.footer-brand { color: var(--forest); font-weight: 820; }
.footer-brand img { object-fit: contain; }
footer > p { margin: 0; color: var(--stone); }
.disclaimer { grid-column: 2; max-width: 720px; font-size: 0.88rem; }
.copyright { grid-column: 2; font-size: 0.82rem; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

@media (max-width: 920px) {
  .site-header { padding-block: 18px; align-items: flex-start; }
  nav { gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
  .hero { grid-template-columns: 1fr; }
  .hero-visual { min-height: 430px; order: -1; }
  .hero-copy { padding: 48px; }
  .recipe-card { grid-template-columns: 1fr; }
  .recipe-image { min-height: 430px; max-height: 540px; }
  .card-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 235px; }
  .community { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .site-header, main, footer { width: min(100% - 24px, 1180px); }
  .site-header { min-height: 84px; align-items: center; }
  .brand img { width: 48px; height: 48px; }
  nav a:not(:last-child) { display: none; }
  nav a { font-size: 0.88rem; }
  .hero { border-radius: 25px; }
  .hero-visual { min-height: 315px; }
  .hero-visual figcaption { right: 14px; bottom: 14px; left: 14px; text-align: center; }
  .hero-copy { padding: 36px 25px 38px; }
  h1 { font-size: clamp(2.35rem, 13vw, 3.45rem); }
  .hero-actions { display: grid; }
  .button { width: 100%; }
  .status { align-items: flex-start; }
  .status span { margin-top: 7px; }
  .principle { margin: 72px auto; padding: 42px 24px; }
  .principle h2 br { display: none; }
  .recipe-section { padding-bottom: 72px; }
  .recipe-image { min-height: 300px; }
  .recipe-copy { padding: 30px 24px; }
  .feature-card { padding: 26px; min-height: 220px; }
  .learn-section { padding-bottom: 64px; }
  .beta-note { margin: 20px 0 72px; padding: 28px 24px; grid-template-columns: 1fr; }
  .beta-mark { width: 62px; height: 62px; }
  .beta-badge { width: fit-content; }
  .community { padding: 40px 24px; border-radius: 25px; }
  .social-links a { grid-template-columns: 1fr; gap: 2px; }
  footer { grid-template-columns: 1fr; }
  .disclaimer, .copyright { grid-column: 1; }
}

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