:root {
  --soil-ink: #2f251f;
  --soil-brown: #5b321f;
  --soil-deep: #2a1b15;
  --soil-clay: #a9562f;
  --soil-paper: #f5ead8;
  --soil-paper-light: #fbf6ec;
  --soil-green: #17623f;
  --soil-lime: #9bd22f;
  --soil-yellow: #e9b83f;
  --soil-line: rgba(74, 48, 34, 0.18);
}

.soil-page { background: var(--soil-paper-light); color: var(--soil-ink); }
.soil-page .site-header { background: rgba(250, 245, 235, 0.94); box-shadow: none; }
.soil-page .product-nav a.is-current::after { background: var(--soil-clay); }
.soil-page .button-primary, .soil-page .mobile-cta { background: var(--soil-green); }
.soil-shell { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }

.soil-hero { position: relative; min-height: 700px; overflow: hidden; background: #d8b58d url("../assets/soil-calculator/hero-landscape.webp") center / cover no-repeat; }
.soil-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(248,228,196,.2), transparent 58%); }
.soil-hero-brown { display: none; }
.soil-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 52% 48%; min-height: 700px; }
.soil-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 72px 58px 100px 0; color: var(--soil-ink); }
.soil-hero .soil-kicker { color: #7d4a2b; }
.soil-kicker, .soil-heading > p, .soil-process-head > p, .soil-gallon-copy > p, .soil-materials-copy > p, .soil-boundary-copy > p, .soil-faq-intro > p { margin: 0 0 16px; color: var(--soil-yellow); font-size: 15px; font-weight: 800; }
.soil-product-sign { display: flex; align-items: center; gap: 14px; margin-bottom: 38px; font-size: 22px; font-weight: 800; }
.soil-product-sign img { width: 58px; height: 58px; border-radius: 8px; }
.soil-hero h1 { max-width: 620px; margin: 0; font-family: var(--font-display); font-size: 64px; line-height: 1.08; font-weight: 650; letter-spacing: 0; }
.soil-hero-lead { max-width: 530px; margin: 24px 0 0; color: #5f4d40; font-size: 18px; line-height: 1.8; }
.soil-actions { display: flex; gap: 12px; margin-top: 34px; }
.soil-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 0 24px; border: 1px solid transparent; border-radius: 6px; font: inherit; font-size: 16px; font-weight: 750; text-decoration: none; cursor: pointer; transition: transform 180ms ease, background 180ms ease; }
.soil-button:hover { transform: translateY(-2px); }
.soil-button-main { background: var(--soil-lime); color: #243014; }
.soil-button-ghost { border-color: rgba(91, 50, 31, 0.45); color: var(--soil-brown); background: rgba(255,248,237,.38); }
.soil-hero-visual { position: relative; min-width: 0; }
.soil-phone { position: absolute; bottom: -30px; margin: 0; overflow: hidden; border: 8px solid #181612; border-radius: 34px; background: #fff; box-shadow: 0 30px 60px rgba(47, 27, 16, 0.26); }
.soil-phone img { display: block; width: 100%; height: auto; }
.soil-phone-back { left: 0; width: 294px; }
.soil-phone-front { right: 2%; width: 250px; }

.soil-material-strip { padding: 28px 0 34px; border-block: 1px solid rgba(91,50,31,.16); background: #d5aa7b; }
.soil-material-strip h2 { margin: 0 0 18px; font-size: 22px; }
.soil-material-row { display: grid; grid-template-columns: repeat(13, minmax(62px, 1fr)); gap: 10px; }
.soil-material-row figure { min-width: 0; margin: 0; text-align: center; }
.soil-material-row img { display: block; width: 72px; max-width: 100%; aspect-ratio: 1; margin: 0 auto 7px; object-fit: contain; filter: drop-shadow(0 7px 8px rgba(66,39,24,.12)); }
.soil-material-row figcaption { color: #49362b; font-size: 12px; font-weight: 700; white-space: nowrap; }

.soil-heading { max-width: 820px; margin: 0 auto 48px; text-align: center; }
.soil-heading-left { max-width: 760px; margin-left: 0; text-align: left; }
.soil-heading > p { color: var(--soil-clay); }
.soil-heading h2, .soil-process h2, .soil-gallon h2, .soil-materials h2, .soil-library h2, .soil-boundary h2, .soil-faq h2, .soil-entry h2 { margin: 0; font-family: var(--font-display); font-size: 42px; line-height: 1.22; letter-spacing: 0; }
.soil-outcomes { padding: 72px 0 74px; background: #f8e7cf; }
.soil-outcomes .soil-heading { max-width: none; margin: 0 0 26px; text-align: left; }
.soil-outcome-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.soil-outcome-grid article { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr; min-width: 0; min-height: 420px; padding: 0 28px; border-right: 1px solid var(--soil-line); }
.soil-outcome-grid article:first-child { padding-left: 0; }
.soil-outcome-grid article:last-child { padding-right: 0; border-right: 0; }
.soil-outcome-grid article > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: end; column-gap: 14px; }
.soil-outcome-grid span { grid-row: 1 / 3; align-self: start; color: var(--soil-clay); font-family: var(--font-display); font-size: 40px; }
.soil-outcome-grid h3 { margin: 0; font-size: 22px; }
.soil-outcome-grid p { margin: 4px 0 0; color: #6d5c50; font-size: 14px; }
.soil-outcome-visual { min-height: 320px; margin: 18px 0 0; background-repeat: no-repeat; background-position: center bottom; background-size: contain; }
.soil-outcome-capacity { background-image: url("../assets/soil-calculator/outcome-capacity-transparent.webp"); background-position: calc(50% - 12px) bottom; }
.soil-outcome-volume { background-image: url("../assets/soil-calculator/outcome-volume-transparent.webp"); }
.soil-outcome-weight { background-image: url("../assets/soil-calculator/outcome-weight-transparent.webp"); }

.soil-process { padding: 96px 0 0; overflow: hidden; background: var(--soil-deep); color: #fff8ef; }
.soil-process .soil-shell { display: grid; grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); align-items: end; gap: 48px; }
.soil-process-head { align-self: center; padding-bottom: 92px; }
.soil-process-head ol { margin: 36px 0 0; padding: 0; list-style: none; }
.soil-process-head li { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 14px; margin-top: 20px; color: rgba(255,248,239,.8); line-height: 1.55; }
.soil-process-head b { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--soil-paper); color: var(--soil-brown); }
.soil-process-phones { display: flex; align-items: flex-end; justify-content: center; gap: 14px; min-width: 0; }
.soil-process-phones figure { width: 30%; max-width: 228px; margin: 0 0 -104px; overflow: hidden; border: 7px solid #151310; border-radius: 30px; background: #fff; box-shadow: 0 22px 46px rgba(0,0,0,.28); }
.soil-process-phones figure:nth-child(2) { margin-bottom: -56px; }
.soil-process-phones img { display: block; width: 100%; height: auto; }

.soil-gallon { position: relative; padding: 132px 0 96px; background: #d7b187 url("../assets/soil-calculator/gallon-clay-background.webp") center / cover no-repeat; }
.soil-gallon::before { content: ""; position: absolute; inset: 0; background: rgba(215,177,135,.48); }
.soil-gallon-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 84px; }
.soil-gallon-copy > p { color: #6f3c24; }
.soil-gallon-copy > span, .soil-materials-copy > span, .soil-boundary-copy > span { display: block; margin-top: 22px; color: #665144; font-size: 17px; line-height: 1.8; }
.soil-gallon-values { display: flex; gap: 10px; margin-top: 30px; }
.soil-gallon-values b { display: grid; min-width: 104px; gap: 4px; padding: 15px; border: 1px solid rgba(77,45,27,.22); background: rgba(255,247,234,.6); font-size: 16px; }
.soil-gallon-values small { color: var(--soil-green); font-size: 20px; }
.soil-gallon-phones { display: flex; align-items: flex-end; justify-content: center; gap: 20px; }
.soil-gallon-phones figure { width: 220px; margin: 0; overflow: hidden; border: 7px solid #171512; border-radius: 30px; background: #fff; box-shadow: 0 24px 42px rgba(64,37,20,.22); }
.soil-gallon-phones figure:first-child { transform: translateY(26px) rotate(-3deg); }
.soil-gallon-phones img { display: block; width: 100%; }

.soil-materials { position: relative; padding: 0; background: #ead6b8 url("../assets/soil-calculator/material-density-paper.webp") center / cover no-repeat; }
.soil-materials::before { content: ""; position: absolute; inset: 0; background: rgba(246,229,201,.28); }
.soil-materials-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 34% 66%; width: min(calc(100% - 48px), var(--container)); max-width: none; min-height: 430px; margin: 0 auto; padding-block: 18px; gap: 0; }
.soil-materials-copy { align-self: center; width: 100%; padding: 20px 34px; }
.soil-materials-copy > p { color: var(--soil-clay); }
.soil-materials-copy h2 { font-size: clamp(36px, 2.2vw, 42px); }
.soil-materials-copy > span { margin-top: 16px; font-size: 15.5px; line-height: 1.7; }
.soil-materials-copy dl { margin: 22px 0 0; border-top: 1px solid var(--soil-line); }
.soil-materials-copy dl div { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--soil-line); }
.soil-materials-copy dt { font-weight: 700; }
.soil-materials-copy dd { margin: 0; color: var(--soil-green); font-weight: 800; }
.soil-materials figure { min-width: 0; height: 100%; margin: 0; overflow: hidden; border: 3px solid rgba(255,248,237,.72); border-radius: 72px; background: transparent; box-shadow: 0 18px 48px rgba(85,53,31,.12); }
.soil-materials figure img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.soil-library { padding: 100px 0; background: var(--soil-paper-light); }
.soil-library-showcase { display: grid; grid-template-columns: minmax(300px, .84fr) minmax(0, 1.16fr); align-items: start; gap: 86px; margin-top: 42px; border-top: 1px solid var(--soil-line); }
.soil-library-sticky { position: sticky; top: 108px; min-height: calc(100svh - 142px); display: grid; place-items: center; }
.soil-library-screen { width: min(100%, 320px); margin: 0; overflow: hidden; border: 7px solid #191713; border-radius: 34px; background: #fff; box-shadow: 0 28px 70px rgba(71,43,27,.17); }
.soil-library-screen img { display: block; width: 100%; }
.soil-library-steps { display: grid; gap: max(76px, 14vh); padding: 12vh 0 16vh; }
.soil-library-step { position: relative; width: min(100%, 510px); min-height: 190px; padding: 30px 34px; overflow: hidden; border: 1px solid rgba(89,57,38,.15); border-radius: 8px; background: rgba(255,255,255,.28); color: var(--soil-ink); font: inherit; text-align: left; opacity: .55; transform: translateY(12px); cursor: pointer; transition: opacity .32s ease, transform .32s ease, border-color .32s ease, background .32s ease, box-shadow .32s ease; }
.soil-library-step::before { content: ""; position: absolute; inset: 18px auto 18px 0; width: 3px; background: var(--soil-clay); opacity: 0; transform: scaleY(.6); transition: opacity .32s ease, transform .32s ease; }
.soil-library-step.is-active { border-color: rgba(169,86,47,.35); background: #fffdf8; box-shadow: 0 18px 44px rgba(91,50,31,.08); opacity: 1; transform: translateY(0); }
.soil-library-step.is-active::before { opacity: 1; transform: scaleY(1); }
.soil-library-step > span { position: absolute; top: 28px; right: 30px; color: var(--soil-clay); font-weight: 800; }
.soil-library-step h3 { margin: 0 0 12px; font-family: var(--font-display); font-size: 28px; line-height: 1.25; }
.soil-library-step p { max-width: 410px; margin: 0; color: #66584e; font-size: 15px; line-height: 1.7; }
.soil-library-step ul { margin: 18px 0 0; padding: 0; list-style: none; }
.soil-library-step li { padding: 8px 0; border-top: 1px solid var(--soil-line); color: #77675b; font-size: 14px; }

.soil-boundary { padding: 0; background: #3e2f26; color: #fff8ef; }
.soil-boundary-shell { width: min(100%, 1981px); }
.soil-boundary-stage { position: relative; aspect-ratio: 1981 / 793; }
.soil-boundary-stage-art { display: block; width: 100%; height: 100%; object-fit: contain; }
.soil-boundary-copy { position: absolute; top: 15.5%; left: 12.6%; width: 47%; min-width: 0; }
.soil-boundary-copy > p { color: var(--soil-yellow); }
.soil-boundary-copy h2 { max-width: 760px; font-size: clamp(28px, 3vw, 48px); }
.soil-boundary-copy > span { display: block; max-width: 790px; margin-top: 22px; color: rgba(255,248,239,.72); font-size: clamp(13px, 1.15vw, 17px); line-height: 1.8; }
.soil-boundary-stage-label { position: absolute; top: 63.8%; width: 220px; color: #fff8ef; text-align: center; transform: translateX(-50%); }
.soil-boundary-stage-label b, .soil-boundary-stage-label small { display: block; }
.soil-boundary-stage-label b { font-size: clamp(13px, 1.15vw, 17px); }
.soil-boundary-stage-label small { margin-top: 7px; color: rgba(255,248,239,.58); font-size: clamp(10px, .85vw, 13px); line-height: 1.5; }
.soil-boundary-stage-label-size { left: 15.5%; }
.soil-boundary-stage-label-calc { left: 29.1%; }
.soil-boundary-stage-label-result { left: 54.5%; }
.soil-boundary-mobile { display: none; }
.soil-boundary-diagram { grid-template-columns: 1fr; gap: 14px; align-items: center; margin-top: 44px; }
.soil-boundary-node { min-width: 0; text-align: center; }
.soil-boundary-node figure { width: 108px; height: 108px; margin: 0 auto 16px; overflow: hidden; border-radius: 50%; }
.soil-boundary-node figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.soil-boundary-node b, .soil-boundary-node small { display: block; }
.soil-boundary-node b { color: #fff8ef; font-size: 16px; }
.soil-boundary-node small { margin-top: 7px; color: rgba(255,248,239,.58); font-size: 12px; line-height: 1.5; }
.soil-boundary-link { position: relative; height: 1px; margin: 0 12px 66px; background: rgba(233,184,63,.7); }
.soil-boundary-link::after { content: ""; position: absolute; top: -4px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--soil-yellow); }
.soil-boundary-factors { position: relative; display: grid; gap: 12px; margin: 0 18px 62px; padding: 12px 24px; border-inline: 1px solid rgba(233,184,63,.32); }
.soil-boundary-factors::before, .soil-boundary-factors::after { content: ""; position: absolute; top: 50%; width: 20px; border-top: 1px solid rgba(233,184,63,.7); }
.soil-boundary-factors::before { right: 100%; }
.soil-boundary-factors::after { left: 100%; }
.soil-boundary-factors b { position: relative; padding-left: 16px; color: #e8d7c2; font-size: 13px; font-weight: 650; }
.soil-boundary-factors b::before { content: ""; position: absolute; top: .48em; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--soil-yellow); }
.soil-boundary-phone { position: relative; align-self: center; width: 320px; margin: 0; overflow: visible; border: 7px solid #181512; border-radius: 34px; background: #fff; box-shadow: 0 30px 60px rgba(0,0,0,.28); }
.soil-boundary-phone img { display: block; width: 100%; border-radius: 27px; }

.soil-faq { padding: 100px 0; background: var(--soil-paper-light); }
.soil-faq-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 100px; }
.soil-faq-intro > p { color: var(--soil-clay); }
.soil-faq-intro > span { display: block; margin-top: 20px; color: #756256; line-height: 1.8; }
.soil-faq-list details { border-bottom: 1px solid var(--soil-line); }
.soil-faq-list summary { padding: 21px 42px 21px 0; font-size: 17px; font-weight: 760; cursor: pointer; }
.soil-faq-list details p { margin: 0; padding: 0 36px 22px 0; color: #6c5a4f; line-height: 1.75; }

.soil-entry { position: relative; overflow: hidden; background: url("../assets/soil-calculator/material-density-banner.webp") center 58% / cover no-repeat; }
.soil-entry::before { content: ""; position: absolute; inset: 0; background: rgba(57,31,21,.87); }
.soil-entry .entry-layout { position: relative; z-index: 1; }
.soil-entry .entry-copy .eyebrow { color: var(--soil-yellow); }
.soil-entry .entry-copy h2 { color: #fff8ef; }
.soil-entry .entry-copy > p { color: rgba(255,248,239,.74); }
.soil-entry .entry-steps li { border-color: rgba(255,255,255,.2); background: rgba(255,253,248,.94); }
.soil-entry .entry-steps span { color: var(--soil-clay); background: #f7e9db; border-color: rgba(169,86,47,.18); }
.soil-entry-panel .qr-live-code { background: #fff; }
.soil-entry-panel .button { width: 100%; }

.soil-footer { background: #eee2d0; }
.soil-footer .footer-product.is-current { border-color: var(--soil-clay); }
.soil-dialog .dialog-qr { overflow: hidden; background: #fffdf8; }
.soil-dialog .dialog-qr img { width: 146px; height: 146px; aspect-ratio: 1; object-fit: contain; }

@media (max-width: 1000px) {
  .soil-hero-grid { grid-template-columns: 55% 45%; }
  .soil-hero h1 { font-size: 50px; }
  .soil-hero-copy { padding-right: 30px; }
  .soil-phone-back { left: 1%; width: 226px; }
  .soil-phone-front { right: 2%; width: 194px; }
  .soil-material-row { grid-template-columns: repeat(7, minmax(68px, 1fr)); row-gap: 18px; }
  .soil-process .soil-shell { grid-template-columns: 1fr; }
  .soil-process-head { padding-bottom: 20px; }
  .soil-process-phones { max-width: 760px; margin-inline: auto; }
  .soil-gallon-grid { gap: 44px; }
  .soil-library-showcase { grid-template-columns: minmax(270px, .8fr) minmax(0, 1.2fr); gap: 48px; }
  .soil-faq-grid { gap: 50px; }
}

@media (max-width: 900px) {
  .soil-materials-grid { grid-template-columns: 1fr; width: 100%; min-height: 0; aspect-ratio: auto; }
  .soil-materials-copy { width: min(calc(100% - 40px), 620px); margin-inline: auto; padding: 64px 0; }
  .soil-materials figure { height: auto; margin: 0 20px 22px; border-radius: 32px; aspect-ratio: 16 / 11; }
  .soil-boundary { padding: 74px 0; }
  .soil-boundary-shell { width: min(calc(100% - 28px), var(--container)); }
  .soil-boundary-stage { aspect-ratio: auto; }
  .soil-boundary-stage-art, .soil-boundary-stage-label { display: none; }
  .soil-boundary-copy { position: static; width: 100%; }
  .soil-boundary-copy h2 { font-size: 34px; }
  .soil-boundary-copy > span { font-size: 15px; }
  .soil-boundary-mobile { display: grid; gap: 40px; }
  .soil-boundary-phone { justify-self: center; width: min(280px, 82vw); }
  .soil-library-showcase { grid-template-columns: 1fr; gap: 28px; }
  .soil-library-sticky { position: relative; top: auto; min-height: auto; padding-top: 42px; }
  .soil-library-screen { width: min(280px, 76vw); }
  .soil-library-steps { gap: 14px; padding: 0; }
  .soil-library-step { width: 100%; min-height: 0; padding: 24px; opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .soil-shell { width: min(calc(100% - 28px), var(--container)); }
  .soil-hero { min-height: 850px; background-position: 58% center; }
  .soil-hero-brown { width: 100%; height: 540px; border-bottom-right-radius: 76px; }
  .soil-hero-grid { display: block; min-height: 850px; }
  .soil-hero-copy { justify-content: flex-start; min-height: 540px; padding: 38px 6px 44px; }
  .soil-kicker { margin-bottom: 22px; }
  .soil-product-sign { margin-bottom: 28px; font-size: 20px; }
  .soil-product-sign img { width: 50px; height: 50px; }
  .soil-hero h1 { font-size: 40px; }
  .soil-hero-lead { font-size: 16px; line-height: 1.7; }
  .soil-actions { flex-wrap: wrap; margin-top: 24px; }
  .soil-hero-visual { position: absolute; right: 0; bottom: 0; left: 0; height: 390px; }
  .soil-phone { bottom: -82px; border-width: 6px; border-radius: 24px; }
  .soil-phone-front { right: 0; width: 168px; }
  .soil-phone-back { left: 0; width: 190px; }
  .soil-material-strip { padding: 30px 0; }
  .soil-material-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 10px; }
  .soil-material-row img { width: 64px; }
  .soil-material-row figcaption { font-size: 11px; }
  .soil-heading { margin-bottom: 32px; }
  .soil-heading h2, .soil-process h2, .soil-gallon h2, .soil-materials h2, .soil-library h2, .soil-boundary h2, .soil-faq h2, .soil-entry h2 { font-size: 34px; }
  .soil-outcomes, .soil-materials, .soil-library, .soil-boundary, .soil-faq { padding: 74px 0; }
  .soil-materials { padding: 0; }
  .soil-outcome-grid { grid-template-columns: 1fr; }
  .soil-outcome-grid article, .soil-outcome-grid article:first-child, .soil-outcome-grid article:last-child { min-height: 0; padding: 26px 0; border-right: 0; border-bottom: 1px solid var(--soil-line); }
  .soil-outcome-grid article:last-child { border-bottom: 0; }
  .soil-outcome-grid article > div { grid-template-columns: auto 1fr; }
  .soil-outcome-visual { min-height: 280px; }
  .soil-process { padding-top: 74px; }
  .soil-process-head { padding: 0 0 12px; }
  .soil-process-phones { gap: 5px; width: calc(100% + 12px); margin-left: -6px; }
  .soil-process-phones figure { width: 34%; margin-bottom: -34px; border-width: 5px; border-radius: 20px; }
  .soil-process-phones figure:nth-child(2) { margin-bottom: -6px; }
  .soil-gallon { padding: 92px 0 74px; }
  .soil-gallon-grid, .soil-materials-grid, .soil-faq-grid { grid-template-columns: 1fr; }
  .soil-gallon-phones { order: -1; gap: 10px; }
  .soil-gallon-phones figure { width: 46%; border-width: 5px; border-radius: 22px; }
  .soil-gallon-values { flex-wrap: wrap; }
  .soil-materials-grid { gap: 0; }
  .soil-library-screen { justify-self: center; width: min(280px, 82vw); margin-top: 0; }
  .soil-boundary-link { width: 1px; height: 34px; margin: 0 auto; background: rgba(233,184,63,.7); }
  .soil-boundary-link::after { top: auto; right: -4px; bottom: -2px; }
  .soil-boundary-factors { justify-self: center; width: min(260px, 88%); margin: 0; text-align: left; }
  .soil-boundary-factors::before, .soil-boundary-factors::after { display: none; }
  .soil-boundary-phone { width: min(280px, 82vw); }
  .soil-dialog .dialog-qr img { width: min(116px, 82%); height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .soil-button { transition: none; }
}