:root {
  --forest-950: #102c25;
  --forest-900: #173b31;
  --forest-800: #255244;
  --forest-700: #356c57;
  --leaf: #81a35d;
  --leaf-soft: #dce7c9;
  --paper: #f2eee3;
  --paper-warm: #e8dfcd;
  --ink: #19332b;
  --muted: #68766d;
  --sun: #e7a83a;
  --clay: #cc6d4a;
  --cream: #fffaf0;
  --line: rgba(25, 51, 43, 0.14);
  --shadow: 0 24px 70px rgba(23, 59, 49, 0.14);
  --font-title: "FZKai-Z03", "STKaiti", "KaiTi", serif;
  --font-body: "Microsoft YaHei UI", "PingFang SC", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: var(--font-body); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }

.mobile-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 14% 8%, rgba(231, 168, 58, 0.18), transparent 23rem),
    radial-gradient(circle at 92% 78%, rgba(129, 163, 93, 0.2), transparent 28rem),
    #d6ddcf;
  overflow-x: hidden;
}

.ambient { position: fixed; pointer-events: none; filter: blur(1px); opacity: 0.7; }
.ambient-one { width: 220px; height: 220px; left: -120px; top: 18%; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; }
.ambient-two { width: 300px; height: 300px; right: -180px; bottom: 7%; border: 1px solid rgba(23,59,49,.12); transform: rotate(35deg); }

.phone-shell {
  width: min(100%, 470px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 22px calc(96px + env(safe-area-inset-bottom));
  background:
    linear-gradient(90deg, transparent 96%, rgba(25,51,43,.025) 96%),
    var(--paper);
  background-size: 28px 28px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.phone-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}

.mobile-header {
  height: 76px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 20;
}

.brand { display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; }
.brand > span:last-child { display: flex; flex-direction: column; }
.brand b { font-family: var(--font-title); font-size: 20px; letter-spacing: .08em; }
.brand small { font-size: 9px; color: var(--muted); letter-spacing: .1em; margin-top: 2px; }
.brand-mark { width: 31px; height: 31px; border-radius: 50% 50% 44% 56%; background: var(--forest-900); position: relative; overflow: hidden; transform: rotate(-8deg); }
.brand-mark i { position: absolute; width: 6px; height: 19px; border-radius: 100% 0; background: var(--paper); transform-origin: bottom; bottom: 3px; left: 13px; }
.brand-mark i:nth-child(1) { transform: rotate(-40deg); }
.brand-mark i:nth-child(2) { transform: rotate(0); height: 23px; }
.brand-mark i:nth-child(3) { transform: rotate(40deg); }
.status-pill { border: 1px solid rgba(204,109,74,.24); border-radius: 99px; padding: 7px 10px; background: rgba(204,109,74,.08); color: #a44f36; font-size: 11px; font-weight: 700; }

.view { display: none; position: relative; z-index: 2; animation: viewIn .42s cubic-bezier(.2,.8,.2,1); }
.view.is-active { display: block; }
@keyframes viewIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.hero-mobile { padding: 26px 0 20px; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; color: var(--forest-700); font-size: 10px; font-weight: 800; letter-spacing: .11em; }
.eyebrow span { width: 28px; height: 2px; background: var(--sun); display: inline-block; }
.hero-mobile h1, .page-intro h1 { font-family: var(--font-title); font-size: clamp(42px, 12vw, 57px); line-height: 1.05; letter-spacing: -.035em; margin: 0; font-weight: 800; }
.hero-mobile h1 em { color: var(--clay); font-style: normal; position: relative; }
.hero-mobile h1 em::after { content: ""; position: absolute; height: 7px; left: -4px; right: -4px; bottom: 3px; background: rgba(231,168,58,.35); z-index: -1; transform: rotate(-1deg); }
.hero-copy, .page-intro > p:last-child { font-size: 14px; line-height: 1.85; color: var(--muted); margin: 20px 0; max-width: 390px; }

.mini-network { height: 185px; position: relative; margin: 12px -8px 4px; }
.mini-network::before { content: ""; position: absolute; inset: 12px 8px; border: 1px solid rgba(23,59,49,.08); border-radius: 50%; transform: rotate(-7deg); }
.mini-network svg { width: 100%; height: 100%; overflow: visible; }
.hero-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.primary-button { min-height: 52px; border: 0; border-radius: 6px 22px 6px 22px; padding: 0 19px; background: var(--forest-900); color: var(--cream); display: inline-flex; align-items: center; justify-content: center; gap: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 28px rgba(23,59,49,.2); transition: transform .18s, background .18s; }
.primary-button:hover { background: var(--forest-800); transform: translateY(-2px); }
.primary-button:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.primary-button span { font-size: 20px; }
.text-button { border: 0; background: none; min-height: 42px; color: var(--forest-700); font-weight: 800; text-decoration: underline; text-decoration-color: rgba(53,108,87,.24); text-underline-offset: 5px; cursor: pointer; }

.pulse-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 20px -22px 32px; padding: 18px 22px; background: rgba(255,250,240,.45); }
.pulse-strip article { text-align: center; border-right: 1px solid var(--line); }
.pulse-strip article:last-child { border-right: 0; }
.pulse-strip b { display: block; font-family: var(--font-title); font-size: 29px; color: var(--forest-900); }
.pulse-strip span { font-size: 10px; color: var(--muted); }

.section-card { background: rgba(255,250,240,.72); border: 1px solid rgba(25,51,43,.1); padding: 24px 20px; border-radius: 4px 32px 4px 32px; }
.section-heading .kicker, .kicker { color: var(--clay); font-size: 9px; font-weight: 900; letter-spacing: .16em; margin: 0 0 8px; }
.section-heading h2 { font-family: var(--font-title); font-size: 31px; margin: 0; }
.section-heading > p:last-child { color: var(--muted); font-size: 12px; margin: 6px 0 0; }
.method-path { list-style: none; padding: 0; margin: 25px 0 0; }
.method-path li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 16px 0; border-top: 1px dashed rgba(25,51,43,.14); }
.method-path li > span { font-family: var(--font-title); color: var(--sun); font-size: 20px; }
.method-path b { font-size: 14px; }
.method-path p { color: var(--muted); font-size: 11px; line-height: 1.6; margin: 4px 0 0; }
.boundary-note { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; margin: 22px 0; color: var(--muted); }
.boundary-note > span { background: var(--forest-900); color: white; font-size: 9px; border-radius: 2px 9px 2px 9px; padding: 5px 8px; }
.boundary-note p { margin: 1px 0 0; font-size: 11px; line-height: 1.55; }

.mobile-footer { position: fixed; z-index: 30; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 470px); min-height: calc(70px + env(safe-area-inset-bottom)); padding: 8px 12px env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(242,238,227,.94); backdrop-filter: blur(16px); border-top: 1px solid rgba(25,51,43,.12); }
.mobile-footer button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 3px; color: #8b918b; cursor: pointer; }
.mobile-footer button > span { width: 29px; height: 29px; display: grid; place-items: center; font-family: var(--font-title); font-size: 16px; border-radius: 50%; }
.mobile-footer button b { font-size: 9px; }
.mobile-footer button.is-active { color: var(--forest-900); }
.mobile-footer button.is-active > span { background: var(--forest-900); color: var(--cream); transform: translateY(-4px); }

.page-intro.compact { padding: 34px 0 12px; }
.page-intro.compact h1 { font-size: 43px; }
.page-intro.compact > p:last-child { margin-top: 13px; }
.session-gate { text-align: center; padding: 34px 26px; background: var(--forest-900); color: var(--cream); border-radius: 4px 42px 4px 42px; margin: 18px 0; }
.gate-icon { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 15px; border-radius: 50%; background: var(--sun); color: var(--forest-950); font-family: var(--font-title); font-size: 25px; }
.session-gate h2 { font-family: var(--font-title); font-size: 25px; margin: 0; }
.session-gate p { color: rgba(255,255,255,.68); font-size: 12px; line-height: 1.7; }
.session-gate .primary-button { background: var(--cream); color: var(--forest-900); width: 100%; box-shadow: none; margin-top: 10px; }
.stack-form { padding: 14px 0; transition: opacity .2s; }
.stack-form.is-locked { display: none; }
.form-progress { display: flex; align-items: center; gap: 10px; margin: 10px 0 24px; }
.form-progress > span { width: 34px; height: 7px; border-radius: 99px; background: linear-gradient(90deg, var(--sun) 65%, var(--paper-warm) 65%); }
.form-progress.second > span { background: linear-gradient(90deg, var(--leaf) 100%, var(--paper-warm) 100%); }
.form-progress b { font-size: 13px; }
.form-progress small { margin-left: auto; color: var(--muted); font-size: 10px; }
fieldset { border: 0; padding: 0; margin: 0 0 28px; min-width: 0; }
legend { font-family: var(--font-title); font-size: 20px; font-weight: 800; margin-bottom: 13px; }
.choice-grid { display: grid; gap: 9px; }
.choice-grid.two { grid-template-columns: repeat(2, 1fr); }
.choice-grid.three { grid-template-columns: repeat(3, 1fr); }
.choice-grid label, .choice-list label, .crop-choice label { position: relative; cursor: pointer; }
.choice-grid input, .choice-list input, .crop-choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-grid label > span { min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 4px 15px 4px 15px; background: rgba(255,250,240,.54); font-size: 12px; text-align: center; padding: 8px 4px; transition: .18s; }
.choice-grid input:checked + span, .choice-list input:checked + span, .crop-choice input:checked + span { border-color: var(--forest-700); background: var(--forest-900); color: var(--cream); box-shadow: 0 8px 20px rgba(23,59,49,.14); }
.terrain { width: 35px; height: 15px; margin-bottom: 5px; display: block; border-bottom: 2px solid currentColor; opacity: .75; }
/* Use stepped contour lines so terraces do not read as a sloping field. */
.terrain.gentle { position: relative; border: 0; height: 17px; }
.terrain.gentle::before {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 1px;
  width: 31px;
  height: 13px;
  background:
    linear-gradient(currentColor, currentColor) 0 100% / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 12px 65% / 10px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 22px 30% / 10px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 10px 65% / 2px 37% no-repeat,
    linear-gradient(currentColor, currentColor) 20px 30% / 2px 37% no-repeat;
}
.terrain.slope { transform: skewY(-25deg); }
.choice-list { display: grid; gap: 9px; }
.choice-list label > span { min-height: 58px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); border-radius: 3px 18px 3px 18px; background: rgba(255,250,240,.54); padding: 10px 14px; transition: .18s; }
.choice-list b { font-size: 13px; }
.choice-list small { margin-top: 4px; font-size: 10px; color: var(--muted); }
.choice-list input:checked + span small { color: rgba(255,255,255,.64); }
.optional-fields { margin: -2px 0 26px; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); padding: 15px 0 2px; }
.optional-fields summary { font-weight: 800; font-size: 12px; cursor: pointer; margin-bottom: 20px; }
.optional-fields summary small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.stack-form > .primary-button { width: 100%; }
.field-label { display: grid; gap: 8px; font-family: var(--font-title); font-size: 18px; font-weight: 800; margin: 0 0 18px; }
.field-label input { height: 49px; border: 1px solid var(--line); border-radius: 4px 15px 4px 15px; background: var(--cream); padding: 0 14px; color: var(--ink); outline: none; }
.field-label input:focus { border-color: var(--forest-700); }
.saved-field { margin: 8px 0 24px; padding: 18px; border-left: 4px solid var(--leaf); background: rgba(220,231,201,.55); }
.saved-field b { font-family: var(--font-title); font-size: 19px; display: block; }
.saved-field p { font-size: 11px; color: var(--muted); margin: 6px 0 0; }
.crop-choice { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.crop-choice label > span { min-height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50% 50% 5px 5px; background: rgba(255,250,240,.6); font-size: 11px; transition: .18s; }
.crop-choice i { display: block; font-family: var(--font-title); font-size: 22px; font-style: normal; margin-bottom: 3px; }
.crop-choice label.is-primary > span { border-color: #c18d25; box-shadow: 0 0 0 2px rgba(193,141,37,.18), 0 8px 20px rgba(23,59,49,.14); }
.crop-choice label.is-primary > span::after { content: "主要"; position: absolute; top: 7px; right: 8px; color: rgba(255,250,240,.78); font-size: 8px; letter-spacing: .08em; }
.crop-choice-tip { margin: 10px 0 14px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.crop-other-label { margin-top: 0; }
.field-label select { height: 49px; border: 1px solid var(--line); border-radius: 4px 15px 4px 15px; background: var(--cream); padding: 0 14px; color: var(--ink); outline: none; font-family: var(--font-body); font-size: 14px; }
.field-label select:focus { border-color: var(--forest-700); }
.planting-window { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.network-intro { padding-bottom: 0; }
.view-switch { display: inline-grid; grid-template-columns: 1fr 1fr; background: var(--paper-warm); padding: 4px; border-radius: 99px; margin: 4px 0 12px; }
.view-switch button { min-width: 78px; border: 0; border-radius: 99px; padding: 8px 13px; background: transparent; font-size: 11px; cursor: pointer; }
.view-switch button.is-active { background: var(--forest-900); color: white; }
.network-stage { min-height: 430px; margin: 0 -12px; position: relative; }
.network-stage svg { width: 100%; height: 430px; overflow: visible; }
.network-edge { fill: none; stroke: rgba(53,108,87,.34); stroke-width: calc(var(--edge-width) * 1px); stroke-linecap: round; animation: dashIn 1.4s ease both; }
.network-edge.edge-1 { stroke: rgba(231,168,58,.46); }
.network-edge.edge-2 { stroke: rgba(204,109,74,.38); }
@keyframes dashIn { from { stroke-dasharray: 500; stroke-dashoffset: 500; } to { stroke-dasharray: 500; stroke-dashoffset: 0; } }
.network-node circle { stroke-width: 1.4; }
.group-node circle { fill: var(--forest-900); stroke: var(--leaf); }
.crop-node circle { fill: var(--crop); stroke: rgba(255,255,255,.8); filter: drop-shadow(0 6px 10px rgba(25,51,43,.16)); }
.network-node text { text-anchor: middle; fill: white; font-family: var(--font-body); font-size: 10px; font-weight: 800; }
.network-node .node-sub { font-size: 8.5px; fill: rgba(255,255,255,.72); font-weight: 500; }
.crop-node .crop-glyph { font-family: var(--font-title); font-size: 16px; fill: var(--forest-950); }
.crop-node .crop-name, .crop-node .crop-count { text-anchor: start; fill: var(--ink); }
.crop-node .crop-name { font-size: 11px; }
.crop-node .crop-count { fill: var(--muted); font-size: 9px; }
.edge-count { text-anchor: middle; font-size: 10px; font-weight: 700; fill: var(--forest-900); }
.empty-graph { min-height: 300px; display: grid; place-items: center; color: var(--muted); font-size: 12px; text-align: center; }
.network-list { display: grid; gap: 10px; min-height: 430px; padding: 12px 0; }
.network-list article { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 15px; background: rgba(255,250,240,.66); border: 1px solid var(--line); border-radius: 3px 18px 3px 18px; }
.network-list b { font-size: 13px; }
.network-list p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 10px; }
.network-list strong { color: var(--clay); font-family: var(--font-title); }

.empty-state { text-align: center; padding: 42px 22px; background: rgba(255,250,240,.58); border: 1px dashed rgba(25,51,43,.18); border-radius: 4px 34px 4px 34px; }
.empty-orbit { width: 96px; height: 96px; margin: 0 auto 22px; border: 1px solid rgba(25,51,43,.18); border-radius: 50%; display: grid; place-items: center; position: relative; }
.empty-orbit::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--sun); position: absolute; top: 4px; right: 13px; }
.empty-orbit span { width: 51px; height: 51px; display: grid; place-items: center; background: var(--forest-900); color: white; border-radius: 50%; font-family: var(--font-title); font-size: 25px; }
.empty-state h2 { font-family: var(--font-title); margin: 0; }
.empty-state p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.empty-state .primary-button { width: 100%; margin-top: 12px; }
.mirror-card { border: 1px solid var(--line); background: rgba(255,250,240,.66); border-radius: 4px 34px 4px 34px; overflow: hidden; }
.mirror-head { padding: 20px; background: var(--forest-900); color: var(--cream); }
.mirror-head small { color: rgba(255,255,255,.6); font-size: 9px; }
.mirror-head h2 { font-family: var(--font-title); font-size: 22px; line-height: 1.45; margin: 7px 0 0; }
.mirror-columns { display: grid; }
.mirror-column { padding: 18px; border-bottom: 1px solid var(--line); }
.mirror-column:last-child { border-bottom: 0; }
.mirror-column > span { display: block; color: var(--clay); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.mirror-column h3 { font-family: var(--font-title); margin: 6px 0 13px; font-size: 18px; }
.distribution-row { display: grid; grid-template-columns: 42px 1fr 38px; gap: 8px; align-items: center; margin: 8px 0; font-size: 10px; }
.distribution-row .bar { height: 8px; background: var(--paper-warm); border-radius: 99px; overflow: hidden; }
.distribution-row .bar i { display: block; height: 100%; background: var(--leaf); border-radius: inherit; }
.distribution-row.is-own .bar i { background: var(--clay); }
.distribution-row strong { text-align: right; font-size: 10px; }
.confidence-line { padding: 11px 18px; background: var(--leaf-soft); color: var(--forest-800); font-size: 10px; line-height: 1.5; }
.navigation-card { margin-top: 18px; background: var(--forest-950); color: var(--cream); padding: 22px; border-radius: 4px 34px 4px 34px; position: relative; overflow: hidden; }
.navigation-card::after { content: "田"; position: absolute; right: -5px; bottom: -31px; font-family: var(--font-title); font-size: 130px; color: rgba(255,255,255,.04); }
.nav-label { display: inline-flex; border: 1px solid rgba(255,255,255,.24); border-radius: 99px; padding: 5px 9px; font-size: 9px; }
.navigation-card h2 { font-family: var(--font-title); font-size: 25px; margin: 12px 0 6px; }
.navigation-card > p { color: rgba(255,255,255,.68); font-size: 11px; line-height: 1.7; }
.route-line { display: grid; grid-template-columns: 1fr 26px 1fr; gap: 7px; align-items: stretch; margin: 18px 0; }
.route-line article { padding: 13px 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); }
.route-line span { font-size: 8px; color: rgba(255,255,255,.55); }
.route-line b { display: block; font-family: var(--font-title); font-size: 19px; margin-top: 5px; }
.route-arrow { display: grid; place-items: center; color: var(--sun); font-size: 20px; }
.reason-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.reason-chips span { background: rgba(231,168,58,.15); color: #f3c36f; border-radius: 99px; padding: 6px 8px; font-size: 9px; }
.no-alternative { border-left: 3px solid var(--sun); padding-left: 12px; }
.trial-form { margin: 17px 0; padding: 19px; border: 1px solid var(--line); background: rgba(255,250,240,.65); }
.trial-form h3 { font-family: var(--font-title); margin: 0; }
.trial-form p { color: var(--muted); font-size: 10px; }
.trial-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.trial-row input { min-width: 0; height: 44px; border: 1px solid var(--line); background: white; padding: 0 11px; }
.trial-row button { border: 0; background: var(--forest-900); color: white; padding: 0 12px; font-size: 11px; font-weight: 800; }
.trial-note { width: 100%; margin-top: 9px; height: 40px; border: 1px solid var(--line); background: white; padding: 0 11px; font-size: 12px; }

/* 地块适配结论分级（P1） */
.saved-field .suit-list { display: grid; gap: 7px; margin-top: 10px; }
.suit-chip {
  display: grid;
  grid-template-columns: 26px auto 1fr;
  grid-template-areas: "i b e" "i s s";
  align-items: center;
  column-gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--crop, var(--sun));
  border-radius: 3px 12px 3px 12px;
  background: rgba(255,250,240,.6);
}
.suit-chip i {
  grid-area: i;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--crop, var(--sun));
  color: var(--forest-950);
  font-family: var(--font-title); font-style: normal; font-size: 14px;
}
.suit-chip b { grid-area: b; font-size: 13px; color: var(--forest-900); }
.suit-chip em {
  grid-area: e; justify-self: end;
  font-style: normal; font-size: 9px; font-weight: 800;
  border-radius: 99px; padding: 3px 8px;
  background: rgba(231,168,58,.16); color: #9a6c14;
}
.suit-chip small { grid-area: s; font-size: 10px; color: var(--muted); line-height: 1.5; }
.suit-chip.suitable { background: rgba(220,231,201,.6); }
.suit-chip.suitable em { background: rgba(47,125,82,.16); color: #2f7d52; }
.suit-chip.unsuitable { background: rgba(204,109,74,.09); }
.suit-chip.unsuitable em { background: rgba(166,61,44,.16); color: #a63d2c; }

/* 试种账回看（P1） */
.trial-records { margin: 17px 0; padding: 16px; border: 1px dashed var(--line); background: rgba(255,250,240,.5); }
.trial-records h3 { font-family: var(--font-title); font-size: 17px; margin: 0 0 12px; }
.trial-records ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.trial-records li { display: grid; grid-template-columns: 14px 1fr auto; align-items: start; gap: 9px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 3px 12px 3px 12px; background: white; }
.trial-crop-dot { width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--crop, var(--sun)); }
.trial-records li span { display: flex; flex-direction: column; gap: 2px; }
.trial-records li b { font-size: 13px; color: var(--forest-900); }
.trial-records li em { font-style: normal; font-size: 11px; color: var(--clay); }
.trial-records li small { font-size: 10px; color: var(--muted); }
.trial-records li time { font-size: 9px; color: var(--muted); white-space: nowrap; }

.consent-dialog { width: min(calc(100% - 28px), 420px); border: 0; padding: 0; border-radius: 4px 38px 4px 38px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 100px rgba(16,44,37,.45); overflow: hidden; }
.consent-dialog::backdrop { background: rgba(16,44,37,.68); backdrop-filter: blur(5px); }
.consent-dialog form { padding: 28px 24px 22px; position: relative; }
.dialog-grain { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(130deg, transparent 58%, rgba(129,163,93,.12)); }
.dialog-symbol { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--forest-900); color: white; font-family: var(--font-title); font-size: 20px; margin-bottom: 18px; }
.consent-dialog h2 { font-family: var(--font-title); font-size: 29px; margin: 0 0 16px; }
.consent-dialog ul { list-style: none; padding: 0; margin: 0 0 20px; }
.consent-dialog li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: 11px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.consent-dialog li span { color: var(--clay); font-weight: 900; }
.consent-check { display: flex; align-items: center; gap: 9px; padding: 12px; background: var(--leaf-soft); font-size: 11px; }
.consent-check input { accent-color: var(--forest-900); width: 18px; height: 18px; }
.consent-dialog menu { padding: 0; display: grid; grid-template-columns: .7fr 1.3fr; gap: 8px; margin: 18px 0 0; }
.consent-dialog .primary-button { min-height: 46px; font-size: 11px; }
.toast { position: fixed; z-index: 100; bottom: 92px; left: 50%; transform: translate(-50%, 18px); background: var(--forest-950); color: white; padding: 11px 16px; border-radius: 99px; font-size: 11px; opacity: 0; pointer-events: none; transition: .2s; max-width: calc(100% - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Desktop presentation dashboard */
.dashboard-body { min-height: 100vh; background: var(--forest-950); color: var(--cream); background-image: radial-gradient(circle at 85% 0, rgba(129,163,93,.16), transparent 34rem), linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: auto, 32px 32px, 32px 32px; }
.dash-header { height: 86px; padding: 0 clamp(28px, 4vw, 74px); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,.1); position: sticky; top: 0; z-index: 20; background: rgba(16,44,37,.9); backdrop-filter: blur(16px); }
.dashboard-brand b { color: white; font-size: 24px; }
.dashboard-brand small { color: rgba(255,255,255,.54); }
.dashboard-brand .brand-mark { background: var(--sun); }
.dashboard-brand .brand-mark i { background: var(--forest-950); }
.dash-meta { display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.55); font-size: 11px; }
.dash-meta i { width: 1px; height: 17px; background: rgba(255,255,255,.18); }
.dash-meta strong { background: var(--clay); color: white; border-radius: 99px; padding: 6px 10px; font-size: 9px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(310px, .65fr); gap: 20px; padding: 44px clamp(28px,4vw,74px) 80px; max-width: 1680px; margin: 0 auto; }
.dash-hero { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: end; padding: 14px 0 25px; }
.eyebrow.light { color: var(--forest-700); }
.dash-hero h1 { margin: 0; font-family: var(--font-title); font-size: clamp(44px,5.1vw,82px); line-height: 1.02; font-weight: 800; max-width: 1000px; }
.dash-hero > div:first-child > p:last-child { color: rgba(255,255,255,.6); max-width: 720px; line-height: 1.8; font-size: 15px; }
.dash-hero > div:first-child strong { color: var(--sun); }
.hero-equation { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; align-items: center; padding: 22px; border: 1px solid rgba(255,255,255,.12); border-radius: 3px 30px 3px 30px; background: rgba(255,255,255,.035); }
.hero-equation span { text-align: center; font-family: var(--font-title); font-size: 18px; }
.hero-equation b { color: var(--sun); }
.hero-equation em { grid-column: 1 / -1; color: #b8d39f; text-align: center; font-style: normal; font-size: 11px; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,.12); }
.dash-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dash-stats article { min-height: 116px; padding: 20px 22px; background: var(--paper); color: var(--ink); border-radius: 3px 24px 3px 24px; position: relative; overflow: hidden; }
.dash-stats article::after { content: ""; width: 64px; height: 64px; position: absolute; right: -20px; bottom: -21px; border: 13px solid rgba(129,163,93,.15); border-radius: 50%; }
.dash-stats small { display: block; color: var(--muted); font-size: 10px; }
.dash-stats b { font-family: var(--font-title); font-size: 42px; margin-top: 9px; display: inline-block; }
.dash-stats span { font-size: 10px; color: var(--muted); margin-left: 5px; }
.dash-stats .snapshot-stat { background: var(--sun); }
.dash-panel { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); border-radius: 3px 30px 3px 30px; padding: 27px; }
.network-panel { min-height: 610px; }
.panel-heading { display: flex; justify-content: space-between; gap: 20px; align-items: start; }
.panel-heading h2 { font-family: var(--font-title); font-size: 27px; margin: 3px 0 0; }
.legend { display: flex; flex-wrap: wrap; gap: 13px; color: rgba(255,255,255,.62); font-size: 11px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.group-dot { background: var(--leaf); }
.crop-dot { background: var(--sun); }
.legend .line-dot { height: 2px; width: 19px; border-radius: 0; background: rgba(255,255,255,.35); }
.dashboard-network { height: 470px; }
.dashboard-network svg { width: 100%; height: 100%; overflow: visible; }
.dashboard-network .group-node text { font-size: 11px; }
.dashboard-network .group-node .node-sub { font-size: 8px; }
.dashboard-network .crop-node .crop-glyph { font-size: 21px; }
.dashboard-network .crop-node .crop-name { fill: white; font-size: 14px; }
.dashboard-network .crop-node .crop-count { fill: rgba(255,255,255,.55); font-size: 9px; }
.dashboard-network .network-edge { stroke: rgba(181,204,155,.27); }
.dashboard-network .network-edge.edge-1 { stroke: rgba(231,168,58,.38); }
.dashboard-network .edge-count { fill: rgba(255,250,240,.92); }
.network-boundary { display: flex; gap: 12px; align-items: center; border-top: 1px dashed rgba(255,255,255,.12); padding-top: 14px; font-size: 9px; color: rgba(255,255,255,.48); }
.network-boundary b { color: #b9d49e; }
.signal-panel { min-height: 610px; }
.crop-signal-list { display: grid; gap: 13px; margin-top: 25px; }
.crop-signal { padding: 15px; background: rgba(255,255,255,.04); border-left: 3px solid var(--signal-color); }
.crop-signal header { display: flex; justify-content: space-between; align-items: center; }
.crop-signal h3 { font-family: var(--font-title); font-size: 19px; margin: 0; }
.crop-signal header span { font-size: 9px; border-radius: 99px; padding: 5px 8px; background: rgba(255,255,255,.08); }
.crop-signal .signal-bar { height: 9px; margin: 13px 0 7px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.crop-signal .signal-bar i { display: block; height: 100%; width: var(--share); background: var(--signal-color); }
.crop-signal p { display: flex; justify-content: space-between; margin: 0; color: rgba(255,255,255,.48); font-size: 9px; }
.sample-warning { display: grid; grid-template-columns: 38px 1fr; gap: 10px; margin-top: 24px; padding: 15px; background: rgba(204,109,74,.11); border: 1px solid rgba(204,109,74,.25); }
.sample-warning > span { width: 34px; height: 34px; display: grid; place-items: center; background: var(--clay); border-radius: 50%; font-weight: 900; }
.sample-warning p { margin: 0; color: rgba(255,255,255,.58); font-size: 10px; line-height: 1.6; }
.sample-warning b { color: white; display: block; }
.proof-panel { grid-column: 1 / -1; }
.proof-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 16px; align-items: center; margin-top: 26px; }
.proof-flow article { min-height: 132px; padding: 20px; background: rgba(255,255,255,.04); border-top: 2px solid rgba(255,255,255,.18); }
.proof-flow article.accent { background: rgba(231,168,58,.1); border-color: var(--sun); }
.proof-flow article span { color: var(--sun); font-family: var(--font-title); font-size: 22px; }
.proof-flow article b { display: block; font-family: var(--font-title); font-size: 19px; margin: 7px 0; }
.proof-flow article p { margin: 0; color: rgba(255,255,255,.5); font-size: 11px; line-height: 1.65; }
.proof-flow > i { color: var(--sun); font-style: normal; }
.proof-panel blockquote { margin: 25px 0 2px; font-family: var(--font-title); font-size: clamp(24px,3vw,43px); text-align: center; color: #bdd6a4; }
.phone-demo-panel { grid-column: 1 / -1; min-height: 690px; display: grid; grid-template-columns: minmax(320px,.8fr) 1.2fr; gap: clamp(45px,8vw,130px); align-items: center; padding: 55px clamp(32px,7vw,110px); overflow: hidden; }
.phone-preview { width: 375px; height: 650px; justify-self: center; background: #ede9df; border: 10px solid #0a1d18; border-radius: 44px; overflow: hidden; box-shadow: 0 35px 90px rgba(0,0,0,.35); position: relative; }
.preview-speaker { width: 92px; height: 22px; background: #0a1d18; position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); top: -3px; border-radius: 0 0 14px 14px; }
.phone-preview iframe { width: 100%; height: 100%; border: 0; }
.phone-copy h2 { font-family: var(--font-title); font-size: clamp(32px,4vw,56px); line-height: 1.12; margin: 10px 0 26px; }
.phone-copy ul { list-style: none; padding: 0; margin: 0 0 30px; }
.phone-copy li { display: grid; grid-template-columns: 38px 1fr; gap: 10px; padding: 13px 0; border-bottom: 1px dashed rgba(255,255,255,.12); color: rgba(255,255,255,.7); font-size: 12px; }
.phone-copy li span { color: var(--sun); font-family: var(--font-title); }
.phone-copy .primary-button { width: fit-content; }
.dash-footer { border-top: 1px solid rgba(255,255,255,.1); min-height: 80px; padding: 0 clamp(28px,4vw,74px); display: flex; justify-content: space-between; align-items: center; color: rgba(255,255,255,.4); font-size: 10px; }

body.embed .mobile-header, body.embed .mobile-footer { display: none; }
body.embed .phone-shell { width: 100%; min-height: 100vh; padding-bottom: 20px; box-shadow: none; }
body.embed .hero-mobile { padding-top: 32px; }

@media (max-width: 1050px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .signal-panel, .network-panel { grid-column: 1; }
  .dash-hero { grid-template-columns: 1fr; }
  .hero-equation { max-width: 650px; }
  .phone-demo-panel { grid-template-columns: 1fr; }
  .phone-copy { max-width: 700px; justify-self: center; }
}

@media (max-width: 720px) {
  .dashboard-grid { padding: 30px 18px 60px; }
  .dash-header { padding: 0 18px; }
  .dash-meta span, .dash-meta i { display: none; }
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
  .proof-flow { grid-template-columns: 1fr; }
  .proof-flow > i { transform: rotate(90deg); justify-self: center; }
  .legend { display: none; }
  .phone-demo-panel { padding: 32px 15px; }
  .phone-preview { width: min(100%, 375px); }
  .dash-footer { flex-direction: column; justify-content: center; gap: 6px; text-align: center; }
}

@media (min-width: 471px) {
  .phone-shell { border-left: 1px solid rgba(255,255,255,.55); border-right: 1px solid rgba(255,255,255,.55); }
}

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

/* Mobile home refresh: keep the data flow, replace the first impression. */
.mobile-body {
  background: #cbd5c8;
}

.mobile-body .phone-shell {
  background: var(--cream);
  padding-top: 0;
}

.mobile-body .mobile-header {
  min-height: 82px;
  margin: 0 -22px;
  padding: 0 22px;
  background: var(--forest-950);
  color: var(--cream);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.mobile-body .brand b {
  color: var(--cream);
  font-size: 21px;
  letter-spacing: .16em;
}

.mobile-body .brand small {
  color: rgba(255,255,255,.58);
  letter-spacing: .04em;
}

.mobile-body .brand:focus {
  outline: none;
}

.mobile-body .brand:focus-visible {
  outline: 2px solid #a9cf9b;
  outline-offset: 4px;
  border-radius: 6px;
}

.mobile-body .brand-mark {
  background: var(--cream);
  transform: none;
}

.mobile-body .brand-mark i {
  background: var(--forest-900);
}

.mobile-body .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  padding: 7px 0 7px 8px;
  background: transparent;
  color: rgba(255,255,255,.62);
  font-size: 10px;
  white-space: nowrap;
}

.mobile-body .status-pill > i {
  width: 8px;
  height: 8px;
  display: block;
  border-radius: 50%;
  background: #72db9b;
  box-shadow: 0 0 0 4px rgba(114,219,155,.14), 0 0 18px rgba(114,219,155,.68);
}

.mobile-body .status-pill strong {
  color: #72db9b;
  font-weight: 800;
}

.mobile-body .hero-mobile {
  margin: 0 -22px;
  padding: 0;
  background: var(--cream);
}

.mobile-body .hero-copy-block {
  padding: 33px 22px 22px;
}

.mobile-body .hero-copy-block .eyebrow {
  margin-bottom: 19px;
  color: var(--forest-700);
  font-size: 9px;
  letter-spacing: .08em;
}

.mobile-body .hero-copy-block h1 {
  font-family: var(--font-title);
  font-size: clamp(42px, 12vw, 57px);
  line-height: 1.06;
  letter-spacing: -.045em;
  color: var(--forest-950);
}

.mobile-body .hero-copy-block h1 em {
  color: #bc861d;
  font-style: normal;
}

.mobile-body .hero-copy-block .hero-copy {
  max-width: 330px;
  margin: 20px 0 0;
  color: #59685e;
  font-size: 13px;
  line-height: 1.8;
}

.mobile-body .hero-field-visual {
  min-height: 385px;
  position: relative;
  overflow: hidden;
  background: var(--forest-950);
}

.mobile-body .hero-field-image {
  display: block;
  width: 100%;
  height: 385px;
  object-fit: cover;
  object-position: center center;
}

.mobile-body .hero-visual-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(7, 31, 24, .1);
}

.mobile-body .hero-network-overlay {
  position: absolute;
  inset: 4px 0 28px;
  pointer-events: none;
  opacity: .44;
  mix-blend-mode: screen;
}

.mobile-body .hero-network-overlay svg {
  width: 100%;
  height: 100%;
}

.mobile-body .hero-network-overlay .crop-name,
.mobile-body .hero-network-overlay .crop-count {
  display: none;
}

.mobile-body .hero-network-overlay .network-node circle {
  stroke: rgba(255,255,255,.7);
}

.mobile-body .hero-network-overlay .network-edge {
  stroke: rgba(255,250,240,.8);
}

.mobile-body .hero-plot-callout {
  position: absolute;
  z-index: 4;
  right: 16px;
  bottom: 22px;
  left: 48px;
  display: grid;
  grid-template-columns: 38px 1fr 15px;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 10px 12px 10px 10px;
  border: 1px solid rgba(255,255,255,.27);
  border-radius: 18px 5px 18px 5px;
  background: rgba(189, 74, 48, .92);
  color: var(--cream);
  box-shadow: 0 14px 30px rgba(12,31,24,.28);
}

.mobile-body .crop-seal {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,250,240,.92);
  color: #ba6b34;
  font-family: var(--font-title);
  font-size: 21px;
}

.mobile-body .hero-plot-callout b {
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
}

.mobile-body .hero-plot-callout b strong {
  font-family: var(--font-title);
  font-size: 21px;
}

.mobile-body .hero-plot-callout small {
  display: block;
  margin-top: 3px;
  color: rgba(255,250,240,.78);
  font-size: 9px;
  line-height: 1.45;
}

.mobile-body .callout-arrow {
  color: var(--cream);
  font-size: 27px;
  line-height: 1;
}

.mobile-body .hero-actions {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 24px 22px 17px;
  background: var(--forest-950);
}

.mobile-body .hero-actions .primary-button,
.mobile-body .hero-actions .secondary-button {
  width: 100%;
  min-height: 58px;
  border-radius: 17px 5px 17px 5px;
  font-size: 14px;
  letter-spacing: .04em;
}

.mobile-body .hero-actions .primary-button {
  border: 1px solid rgba(255,250,240,.55);
  background: var(--forest-800);
  color: var(--cream);
  box-shadow: 0 10px 22px rgba(0,0,0,.16);
}

.mobile-body .hero-actions .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 1px solid rgba(255,250,240,.34);
  background: transparent;
  color: rgba(255,250,240,.72);
  cursor: pointer;
}

.mobile-body .hero-actions .secondary-button:hover,
.mobile-body .hero-actions .secondary-button:focus-visible {
  border-color: rgba(255,250,240,.72);
  color: var(--cream);
}

.mobile-body .action-icon {
  color: #a9cf9b;
  font-size: 20px;
  line-height: 1;
}

.mobile-body .hero-actions .primary-button > span:last-child,
.mobile-body .hero-actions .secondary-button > span:last-child {
  margin-left: auto;
  font-size: 22px;
}

.mobile-body .home-signal-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 13px 22px 22px;
  background: var(--forest-950);
  color: rgba(255,250,240,.82);
}

.mobile-body .home-signal-row > div:not(.signal-note) {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 10px;
}

.mobile-body .home-signal-row b {
  color: var(--cream);
  font-family: var(--font-title);
  font-size: 23px;
}

.mobile-body .signal-participation .signal-dot {
  width: 7px;
  height: 7px;
  margin-right: 1px;
  border-radius: 50%;
  background: #a9cf9b;
}

.mobile-body .signal-note {
  grid-column: 1 / -1;
  margin-top: 4px;
  color: rgba(255,250,240,.5);
  font-size: 9px;
  letter-spacing: .03em;
}

.mobile-body .steps-section {
  padding: 34px 22px 30px;
  background: var(--cream);
}

.mobile-body .steps-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--forest-700);
}

.mobile-body .steps-heading > span {
  flex: 1;
  height: 1px;
  background: rgba(53,108,87,.27);
}

.mobile-body .steps-heading h2 {
  margin: 0;
  white-space: nowrap;
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 700;
}

.mobile-body .steps-art {
  display: block;
  width: calc(100% + 20px);
  height: auto;
  margin: 20px -10px 11px;
  mix-blend-mode: multiply;
}

.mobile-body .steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.mobile-body .steps-grid article {
  min-width: 0;
}

.mobile-body .steps-grid article > b {
  color: var(--forest-700);
  font-family: var(--font-title);
  font-size: 25px;
  font-weight: 700;
}

.mobile-body .steps-grid h3 {
  margin: 3px 0 7px;
  color: var(--forest-950);
  font-family: var(--font-title);
  font-size: 15px;
}

.mobile-body .steps-grid p {
  min-height: 32px;
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.65;
}

@media (max-width: 360px) {
  .mobile-body .brand b { font-size: 18px; }
  .mobile-body .brand small { font-size: 8px; }
  .mobile-body .status-pill span { display: none; }
  .mobile-body .hero-copy-block h1 { font-size: 39px; }
  .mobile-body .hero-field-visual,
  .mobile-body .hero-field-image { min-height: 350px; height: 350px; }
  .mobile-body .hero-plot-callout { left: 18px; right: 12px; }
  .mobile-body .steps-heading h2 { font-size: 16px; }
  .mobile-body .steps-grid { gap: 5px; }
  .mobile-body .steps-grid p { font-size: 8px; }
}

/* Brand asset and dual-end responsive composition. */
.brand-logo {
  display: block;
  flex: 0 0 auto;
  width: 138px;
  height: 68px;
  object-fit: contain;
  object-position: center;
  border-radius: 12px;
}

.mobile-body .brand-logo {
  width: 126px;
  height: 64px;
  padding: 4px 8px;
  background: rgba(255,250,240,.96);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

.dashboard-brand .brand-logo {
  width: 154px;
  height: 72px;
  padding: 3px 8px;
  background: rgba(255,250,240,.98);
  box-shadow: 0 8px 22px rgba(0,0,0,.16);
}

.dashboard-brand { gap: 0; }

@media (min-width: 821px) {
  .mobile-body {
    background:
      radial-gradient(circle at 8% 12%, rgba(231,168,58,.17), transparent 27rem),
      radial-gradient(circle at 94% 72%, rgba(129,163,93,.16), transparent 32rem),
      #cbd5c8;
  }

  .mobile-body .phone-shell {
    width: min(100%, 1480px);
    padding: 0 48px 54px;
    background: var(--cream);
    box-shadow: 0 28px 90px rgba(23,59,49,.16);
  }

  .mobile-body .mobile-header {
    min-height: 96px;
    margin: 0 -48px;
    padding: 0 48px;
  }

  .mobile-body .brand-logo {
    width: 160px;
    height: 78px;
    padding: 4px 10px;
    border-radius: 14px;
  }

  .mobile-body .status-pill {
    padding-right: 4px;
    font-size: 11px;
  }

  .mobile-body .hero-mobile {
    display: grid;
    grid-template-columns: minmax(360px, .8fr) minmax(540px, 1.2fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "copy visual"
      "actions visual"
      "signal visual";
    column-gap: clamp(46px, 6vw, 100px);
    align-items: stretch;
    margin: 0;
    padding: 66px 0 0;
    background: transparent;
  }

  .mobile-body .hero-copy-block {
    grid-area: copy;
    align-self: end;
    padding: 0 0 18px;
  }

  .mobile-body .hero-copy-block .eyebrow {
    margin-bottom: 26px;
    font-size: 10px;
  }

  .mobile-body .hero-copy-block h1 {
    max-width: 620px;
    font-size: clamp(56px, 5.7vw, 94px);
    line-height: 1.02;
  }

  .mobile-body .hero-copy-block .hero-copy {
    max-width: 420px;
    margin-top: 30px;
    font-size: 15px;
    line-height: 1.95;
  }

  .mobile-body .hero-field-visual {
    grid-area: visual;
    min-height: clamp(520px, 45vw, 690px);
    height: 100%;
    border-radius: 30px 6px 30px 6px;
    box-shadow: 0 24px 58px rgba(23,59,49,.2);
  }

  .mobile-body .hero-field-image {
    height: 100%;
    min-height: inherit;
    object-position: center center;
  }

  .mobile-body .hero-plot-callout {
    right: 24px;
    bottom: 28px;
    left: 72px;
  }

  .mobile-body .hero-actions {
    grid-area: actions;
    align-self: start;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 18px 0 0;
    background: transparent;
  }

  .mobile-body .hero-actions .primary-button,
  .mobile-body .hero-actions .secondary-button {
    flex: 1 1 220px;
    width: auto;
    min-height: 58px;
  }

  .mobile-body .home-signal-row {
    grid-area: signal;
    align-self: end;
    padding: 22px 0 22px;
    background: transparent;
    border-top: 1px solid var(--line);
    color: var(--muted);
  }

  .mobile-body .home-signal-row b {
    color: var(--forest-900);
  }

  .mobile-body .signal-note {
    color: var(--muted);
  }

  .mobile-body .steps-section {
    margin-top: 62px;
    padding: 54px 0 48px;
    border-top: 1px solid var(--line);
  }

  .mobile-body .steps-heading h2 {
    font-size: 22px;
  }

  .mobile-body .steps-art {
    width: min(100%, 820px);
    margin: 28px auto 18px;
  }

  .mobile-body .steps-grid {
    width: min(100%, 820px);
    margin: 0 auto;
    gap: 28px;
  }

  .mobile-body .steps-grid article {
    padding: 10px 16px 0;
    border-left: 1px solid var(--line);
  }

  .mobile-body .steps-grid article:first-child {
    border-left: 0;
  }

  .mobile-body .steps-grid article > b {
    font-size: 31px;
  }

  .mobile-body .steps-grid h3 {
    font-size: 19px;
  }

  .mobile-body .steps-grid p {
    font-size: 11px;
    line-height: 1.8;
  }

  .mobile-body .view:not([data-view="home"]) {
    width: min(100%, 1120px);
    margin: 0 auto;
  }

  .mobile-body .view[data-view="field"] .page-intro,
  .mobile-body .view[data-view="network"] .page-intro,
  .mobile-body .view[data-view="guide"] .page-intro {
    padding-top: 62px;
  }

  .mobile-body .view[data-view="field"] .stack-form,
  .mobile-body .view[data-view="field"] #intentionPanel {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
  }

  .mobile-body .view[data-view="network"] .network-stage {
    margin-left: 0;
    margin-right: 0;
  }

  .mobile-body .view[data-view="network"] .network-stage svg {
    height: 530px;
  }

  .mobile-body .view[data-view="guide"] .mirror-card,
  .mobile-body .view[data-view="guide"] .navigation-card,
  .mobile-body .view[data-view="guide"] .trial-form {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
  }

  .mobile-body .mobile-footer {
    width: min(100%, 1480px);
    padding-left: 48px;
    padding-right: 48px;
  }
}

@media (min-width: 1200px) {
  .mobile-body .hero-mobile {
    grid-template-columns: minmax(430px, .78fr) minmax(620px, 1.22fr);
    column-gap: 110px;
  }

  .mobile-body .hero-copy-block h1 {
    font-size: clamp(68px, 5.2vw, 96px);
  }
}

@media (max-width: 720px) {
  .dashboard-brand .brand-logo {
    width: 118px;
    height: 60px;
    padding: 3px 6px;
    border-radius: 10px;
  }

  .dash-header {
    min-height: 76px;
    height: auto;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .dash-meta strong {
    padding: 5px 8px;
  }
}

@media (max-width: 360px) {
  .mobile-body .brand-logo {
    width: 110px;
    height: 58px;
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* Refined brand header: let the supplied mark sit in breathing room. */
.mobile-body .mobile-header {
  background: var(--cream);
  color: var(--forest-950);
  border-bottom: 1px solid rgba(25,51,43,.12);
  box-shadow: 0 8px 22px rgba(23,59,49,.06);
}

.mobile-body .mobile-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  width: 42px;
  height: 2px;
  background: var(--sun);
}

.mobile-body .brand-logo {
  width: 136px;
  height: 72px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.mobile-body .status-pill {
  border: 1px solid rgba(53,108,87,.2);
  border-radius: 99px;
  padding: 7px 10px;
  background: rgba(220,231,201,.38);
  color: var(--forest-700);
}

.mobile-body .status-pill strong {
  color: var(--forest-700);
}

/* The desktop view is a warm agricultural signal board, not a generic dark admin panel. */
.dashboard-body {
  --dash-paper: #fffaf0;
  --dash-paper-deep: #efe7d8;
  --dash-ink: #173b31;
  --dash-green: #234f3f;
  --dash-red: #b85d42;
  background: #d6dfd4;
  color: var(--dash-ink);
  background-image:
    radial-gradient(circle at 8% 4%, rgba(231,168,58,.22), transparent 26rem),
    radial-gradient(circle at 92% 54%, rgba(129,163,93,.2), transparent 30rem),
    linear-gradient(rgba(23,59,49,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,59,49,.035) 1px, transparent 1px);
  background-size: auto, auto, 36px 36px, 36px 36px;
}

.dash-header {
  height: 104px;
  padding: 0 clamp(28px, 4vw, 74px);
  background: rgba(255,250,240,.94);
  border-bottom: 1px solid rgba(25,51,43,.12);
  box-shadow: 0 8px 28px rgba(23,59,49,.08);
}

.dashboard-brand {
  gap: 18px;
}

.dashboard-brand .brand-logo {
  width: 180px;
  height: 88px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.dashboard-brand-note {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-left: 18px;
  border-left: 1px solid rgba(25,51,43,.18);
}

.dashboard-brand-note b {
  color: var(--dash-ink);
  font-family: var(--font-title);
  font-size: 18px;
  letter-spacing: .08em;
}

.dashboard-brand-note small {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .08em;
}

.dash-meta {
  color: var(--muted);
}

.dash-meta i {
  background: rgba(25,51,43,.18);
}

.dash-meta strong {
  background: var(--dash-red);
}

.dashboard-grid {
  padding-top: 58px;
  padding-bottom: 92px;
}

.dash-hero {
  padding: 28px 0 42px;
}

.dash-hero h1 {
  color: var(--dash-ink);
  letter-spacing: -.055em;
}

.dash-hero > div:first-child > p:last-child {
  color: #53685d;
}

.dash-hero > div:first-child strong {
  color: var(--dash-red);
}

.hero-equation {
  border-color: rgba(25,51,43,.14);
  background: rgba(255,250,240,.72);
  box-shadow: 0 18px 40px rgba(23,59,49,.08);
}

.hero-equation span {
  color: var(--dash-ink);
}

.hero-equation em {
  color: var(--dash-green);
  border-top-color: rgba(25,51,43,.14);
}

.dash-stats article {
  background: rgba(255,250,240,.9);
  border: 1px solid rgba(25,51,43,.1);
  box-shadow: 0 15px 34px rgba(23,59,49,.08);
}

.dash-stats .snapshot-stat {
  background: #e7a83a;
}

/* P1：演示样本横幅——KPI 大数字来自 19 户演示库，明确标注避免被误读为真实结论。 */
.demo-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: -4px;
  padding: 11px 16px;
  border: 1px solid rgba(169,126,44,.3);
  border-radius: 3px 14px 3px 14px;
  background: rgba(231,168,58,.12);
}
.demo-banner span {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #7a5a17;
  background: #e7a83a;
  border-radius: 99px;
  padding: 3px 10px;
}
.demo-banner p {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  color: #6b5a35;
}

.dash-panel {
  background: rgba(255,250,240,.74);
  border-color: rgba(25,51,43,.12);
  box-shadow: 0 18px 44px rgba(23,59,49,.1);
}

.network-panel {
  background: var(--dash-green);
  border-color: rgba(255,250,240,.14);
  box-shadow: 0 22px 50px rgba(23,59,49,.2);
}

.signal-panel {
  background: var(--dash-paper);
  color: var(--dash-ink);
}

.signal-panel .panel-heading h2 {
  color: var(--dash-ink);
}

/* P0：network/proof 面板是深绿底，标题此前继承深墨 #173b31 叠深绿 #234f3f，
 * 对比度仅 1.33:1 几乎看不见。这里与 signal-panel 对齐，深底用米白标题。 */
.network-panel .panel-heading h2,
.proof-panel .panel-heading h2 {
  color: var(--cream);
}

.signal-panel .crop-signal {
  background: var(--dash-paper-deep);
  border-left-color: var(--signal-color);
}

.signal-panel .crop-signal h3 {
  color: var(--dash-ink);
}

.signal-panel .crop-signal header span {
  color: var(--dash-green);
  background: rgba(53,108,87,.09);
}

.signal-panel .crop-signal .signal-bar {
  background: rgba(25,51,43,.12);
}

.signal-panel .crop-signal p {
  color: var(--muted);
}

.signal-panel .sample-warning {
  background: #fbefe4;
  border-color: rgba(184,93,66,.25);
}

.signal-panel .sample-warning p {
  color: #6c6259;
}

.signal-panel .sample-warning b {
  color: var(--dash-ink);
}

.signal-panel .sample-warning > span {
  background: var(--dash-red);
}

.proof-panel,
.phone-demo-panel {
  background: var(--dash-green);
  border-color: rgba(255,250,240,.14);
  box-shadow: 0 22px 50px rgba(23,59,49,.2);
}

.proof-panel blockquote {
  color: #e4c46c;
}

.phone-copy h2 {
  color: var(--cream);
}

.dash-footer {
  background: var(--forest-950);
  border-top-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.62);
}

@media (min-width: 821px) {
  .mobile-body .mobile-header {
    background: var(--cream);
    border-bottom-color: rgba(25,51,43,.12);
  }

  .mobile-body .mobile-header::before {
    left: 48px;
  }

  .mobile-body .brand-logo {
    width: 174px;
    height: 86px;
  }
}

@media (max-width: 720px) {
  .dashboard-brand {
    gap: 0;
  }

  .dashboard-brand .brand-logo {
    width: 132px;
    height: 68px;
    padding: 0;
  }

  .dashboard-brand-note {
    display: none;
  }

  .dash-header {
    background: var(--cream);
    box-shadow: 0 8px 22px rgba(23,59,49,.08);
  }
}

/* Approved reference composition for the public home screen. */
.mobile-body {
  background: #d8ded3;
}

.mobile-body .phone-shell {
  width: min(100%, 470px);
  padding: 0 22px 96px;
  background: #fbf6eb;
  box-shadow: 0 24px 70px rgba(23,59,49,.14);
}

.mobile-body .mobile-header {
  min-height: 86px;
  margin: 0 -22px;
  padding: 8px 17px 8px 16px;
  background: linear-gradient(103deg, #0b6047 0%, #073b31 100%);
  border-bottom: 3px solid rgba(255,250,240,.36);
  box-shadow: none;
}

.mobile-body .mobile-header::before { display: none; }

/* The logo is kept at its natural ratio and sits on a quiet cream plaque. */
.mobile-body .brand-logo {
  width: 158px;
  height: 69px;
  padding: 3px 7px;
  border-radius: 12px;
  background: rgba(255,250,240,.97);
  box-shadow: 0 7px 16px rgba(0,0,0,.12);
}

.mobile-body .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 0 7px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255,250,240,.82);
  font-size: 10px;
}

.mobile-body .status-pill > i {
  width: 8px;
  height: 8px;
  display: block;
  border-radius: 50%;
  background: #72db9b;
  box-shadow: 0 0 0 4px rgba(114,219,155,.15), 0 0 16px rgba(114,219,155,.68);
}

.mobile-body .status-pill strong { color: #76dc9e; font-weight: 800; }

.mobile-body .hero-mobile {
  position: relative;
  margin: 0 -22px;
  padding: 0;
  background: #fbf6eb;
}

.mobile-body .hero-step-count {
  position: absolute;
  z-index: 8;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,250,240,.86);
  font-family: var(--font-title);
  font-size: 22px;
  letter-spacing: .08em;
  text-shadow: 0 1px 10px rgba(16,44,37,.22);
}

.mobile-body .hero-copy-block {
  position: relative;
  z-index: 3;
  min-height: 292px;
  padding: 62px 28px 22px;
  background: linear-gradient(180deg, #fbf6eb 0%, #f8f1e5 82%, rgba(248,241,229,.88) 100%);
}

.mobile-body .hero-copy-block .eyebrow { display: none; }

.mobile-body .hero-copy-block h1 {
  max-width: 370px;
  color: #102e26;
  font-family: var(--font-title);
  font-size: clamp(41px, 11vw, 57px);
  line-height: 1.1;
  letter-spacing: -.055em;
}

.mobile-body .hero-copy-block h1 em { color: #bd861b; font-style: normal; }
.mobile-body .hero-copy-block h1 em::after { display: none; }

.mobile-body .hero-copy-block .hero-copy {
  max-width: 330px;
  margin: 21px 0 0;
  color: #56665c;
  font-size: 13px;
  line-height: 1.85;
}

.mobile-body .hero-field-visual {
  height: 638px;
  min-height: 638px;
  position: relative;
  overflow: hidden;
  background: #092f26;
}

.mobile-body .hero-field-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.mobile-body .hero-visual-wash {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(251,246,235,.38) 0%, transparent 17%, transparent 56%, rgba(6,39,30,.1) 78%, rgba(6,39,30,.8) 100%),
    linear-gradient(90deg, rgba(5,38,30,.26), transparent 45%, rgba(5,38,30,.04));
}

.mobile-body .hero-network-overlay {
  z-index: 2;
  inset: 0 0 26px;
  opacity: .28;
  mix-blend-mode: screen;
}

.mobile-body .hero-network-overlay .crop-name,
.mobile-body .hero-network-overlay .crop-count { display: none; }
.mobile-body .hero-network-overlay .network-node circle { stroke: rgba(255,255,255,.78); }
.mobile-body .hero-network-overlay .network-edge { stroke: rgba(255,250,240,.76); }

.mobile-body .hero-plot-callout {
  position: absolute;
  z-index: 5;
  right: 16px;
  bottom: 23px;
  left: 56px;
  display: grid;
  grid-template-columns: 42px 1fr 15px;
  align-items: center;
  gap: 10px;
  min-height: 82px;
  padding: 11px 13px 11px 11px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 20px 7px 20px 7px;
  background: rgba(202,91,59,.94);
  color: #fffaf0;
  box-shadow: 0 16px 34px rgba(12,31,24,.28);
}

.mobile-body .crop-seal {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,250,240,.95);
  color: #b86234;
  font-family: var(--font-title);
  font-size: 22px;
}

.mobile-body .hero-plot-callout b { display: block; font-size: 14px; letter-spacing: .02em; }
.mobile-body .hero-plot-callout b strong { font-family: var(--font-title); font-size: 23px; }
.mobile-body .hero-plot-callout small { display: block; margin-top: 4px; color: rgba(255,250,240,.8); font-size: 9px; line-height: 1.45; }
.mobile-body .callout-arrow { color: #fffaf0; font-size: 28px; line-height: 1; }

.mobile-body .hero-actions {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 25px 28px 17px;
  background: linear-gradient(180deg, #0c4938 0%, #082f26 100%);
}

.mobile-body .hero-actions .primary-button,
.mobile-body .hero-actions .secondary-button {
  width: 100%;
  min-height: 63px;
  border-radius: 21px 6px 21px 6px;
  font-size: 15px;
  letter-spacing: .05em;
}

.mobile-body .hero-actions .primary-button {
  border: 1px solid rgba(255,250,240,.66);
  background: #26714f;
  color: #fffaf0;
  box-shadow: 0 11px 24px rgba(0,0,0,.16);
}

.mobile-body .hero-actions .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 1px solid rgba(255,250,240,.43);
  background: transparent;
  color: rgba(255,250,240,.8);
  cursor: pointer;
}

.mobile-body .hero-actions .secondary-button:hover,
.mobile-body .hero-actions .secondary-button:focus-visible { border-color: rgba(255,250,240,.82); color: #fffaf0; }
.mobile-body .action-icon { color: #b8dcaa; font-size: 22px; line-height: 1; }
.mobile-body .hero-actions .primary-button > span:last-child,
.mobile-body .hero-actions .secondary-button > span:last-child { margin-left: auto; font-size: 24px; }

.mobile-body .home-signal-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 9px;
  padding: 11px 28px 26px;
  background: #082f26;
  color: rgba(255,250,240,.82);
}

.mobile-body .home-signal-row > div:not(.signal-note) { display: flex; align-items: baseline; gap: 5px; font-size: 10px; }
.mobile-body .home-signal-row b { color: #fffaf0; font-family: var(--font-title); font-size: 24px; }
.mobile-body .signal-participation .signal-dot { width: 7px; height: 7px; margin-right: 1px; border-radius: 50%; background: #b8dcaa; }
.mobile-body .signal-note { grid-column: 1 / -1; margin-top: 4px; color: rgba(255,250,240,.48); font-size: 9px; }

.mobile-body .steps-section { padding: 42px 28px 40px; background: #fbf6eb; }
.mobile-body .steps-heading { display: flex; align-items: center; gap: 9px; color: #356c57; }
.mobile-body .steps-heading > span { flex: 1; height: 1px; background: rgba(53,108,87,.3); }
.mobile-body .steps-heading h2 { margin: 0; white-space: nowrap; color: #356c57; font-family: var(--font-title); font-size: 18px; font-weight: 700; }
.mobile-body .steps-art { display: block; width: calc(100% + 26px); height: auto; margin: 24px -13px 13px; mix-blend-mode: multiply; }
.mobile-body .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.mobile-body .steps-grid article { min-width: 0; }
.mobile-body .steps-grid article > b { color: #356c57; font-family: var(--font-title); font-size: 26px; font-weight: 700; }
.mobile-body .steps-grid h3 { margin: 3px 0 7px; color: #102e26; font-family: var(--font-title); font-size: 15px; }
.mobile-body .steps-grid p { min-height: 32px; margin: 0; color: #68766d; font-size: 9px; line-height: 1.65; }

@media (max-width: 820px) {
  .mobile-body .phone-shell {
    width: 100%;
    max-width: 100vw;
    margin: 0;
  }

  .mobile-body .mobile-header {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Let the field image begin behind the headline instead of starting as a new block. */
  .mobile-body .hero-mobile {
    overflow: hidden;
  }

  .mobile-body .hero-copy-block {
    min-height: 330px;
    padding-top: 64px;
    background:
      linear-gradient(90deg, #fbf6eb 0%, rgba(251,246,235,.98) 34%, rgba(251,246,235,.82) 55%, rgba(251,246,235,.3) 78%, rgba(251,246,235,0) 100%),
      linear-gradient(180deg, rgba(251,246,235,.99) 0%, rgba(251,246,235,.82) 64%, rgba(251,246,235,0) 100%);
  }

  .mobile-body .hero-field-visual {
    height: 930px;
    min-height: 930px;
    margin-top: -330px;
    z-index: 1;
  }

  .mobile-body .hero-field-image {
    position: absolute;
    inset: 0;
    object-position: center top;
  }

  .mobile-body .hero-visual-wash {
    background:
      linear-gradient(180deg, rgba(251,246,235,.08) 0%, transparent 31%, rgba(6,39,30,.05) 62%, rgba(6,39,30,.84) 100%),
      linear-gradient(90deg, rgba(251,246,235,.16), transparent 40%, rgba(5,38,30,.08));
  }

  /* One continuous hero canvas: the copy fades into the same field image. */
  .mobile-body .hero-mobile {
    background-color: #fbf6eb;
    background-image: url("/assets/farmland-network-hero.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 1100px;
  }

  .mobile-body .hero-copy-block {
    min-height: 405px;
    padding-top: 64px;
    background:
      linear-gradient(90deg, rgba(251,246,235,.98) 0%, rgba(251,246,235,.91) 29%, rgba(251,246,235,.52) 56%, rgba(251,246,235,.12) 78%, rgba(251,246,235,0) 100%);
  }

  .mobile-body .hero-copy-block::after {
    content: "";
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: -112px;
    left: 0;
    height: 150px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(251,246,235,.68) 0%, rgba(251,246,235,.28) 46%, rgba(251,246,235,0) 100%);
  }

  .mobile-body .hero-copy-block h1 {
    max-width: 390px;
    font-family: "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", serif;
    font-size: clamp(40px, 10.2vw, 53px);
    line-height: 1.12;
    letter-spacing: -.06em;
  }

  .mobile-body .hero-field-visual {
    margin-top: -405px;
    background: transparent;
  }

  .mobile-body .hero-field-image { opacity: 0; }
}

@media (min-width: 821px) {
  .mobile-body .hero-actions {
    flex-direction: row;
  }
}

/* 同意弹窗已改用原生 <dialog>.showModal()：焦点/Esc/::backdrop 由浏览器接管，
 * 不再手工切换 hidden 与自定义遮罩层。默认 UA 样式会水平垂直居中。 */
.consent-dialog { max-height: calc(100dvh - 2em); overflow: auto; }

@media (max-width: 360px) {
  .mobile-body .brand-logo { width: 138px; }
  .mobile-body .status-pill span { display: none; }
  .mobile-body .hero-copy-block { padding-left: 23px; padding-right: 23px; }
  .mobile-body .hero-copy-block h1 { font-size: 39px; }
  .mobile-body .hero-plot-callout { left: 24px; right: 12px; }
  .mobile-body .hero-actions, .mobile-body .steps-section { padding-left: 23px; padding-right: 23px; }
}

@media (min-width: 821px) {
  .mobile-body .phone-shell { width: min(100%, 1480px); padding: 0 54px 54px; background: #fbf6eb; }
  .mobile-body .mobile-header { min-height: 104px; margin: 0 -54px; padding: 12px 54px; }
  .mobile-body .brand-logo { width: 190px; height: 82px; }
  .mobile-body .status-pill { font-size: 13px; }
  .mobile-body .hero-mobile { display: grid; grid-template-columns: minmax(410px,.82fr) minmax(560px,1.18fr); grid-template-rows: auto auto auto; grid-template-areas: "copy visual" "actions visual" "signal visual"; column-gap: clamp(48px,7vw,110px); align-items: stretch; margin: 0; background: #fbf6eb; }
  .mobile-body .hero-step-count { display: none; }
  .mobile-body .hero-copy-block { grid-area: copy; min-height: 0; align-self: end; padding: 74px 0 25px; background: transparent; }
  .mobile-body .hero-copy-block h1 { max-width: 650px; font-size: clamp(58px,5.7vw,92px); line-height: 1.04; }
  .mobile-body .hero-copy-block .hero-copy { max-width: 450px; margin-top: 30px; font-size: 16px; }
  .mobile-body .hero-field-visual { grid-area: visual; height: 760px; min-height: 760px; border-radius: 0; box-shadow: 0 24px 58px rgba(23,59,49,.2); }
  .mobile-body .hero-plot-callout { right: 26px; bottom: 28px; left: 100px; }
  .mobile-body .hero-actions { grid-area: actions; align-self: start; display: flex; gap: 13px; padding: 18px 0 17px; background: transparent; }
  .mobile-body .hero-actions .primary-button, .mobile-body .hero-actions .secondary-button { flex: 1 1 250px; width: auto; }
  .mobile-body .home-signal-row { grid-area: signal; align-self: end; padding: 20px 0 23px; border-top: 1px solid rgba(25,51,43,.14); background: transparent; color: #68766d; }
  .mobile-body .home-signal-row b { color: #173b31; }
  .mobile-body .signal-note { color: #68766d; }
  .mobile-body .steps-section { margin-top: 64px; padding: 57px 0 50px; border-top: 1px solid rgba(25,51,43,.12); }
  .mobile-body .steps-heading h2 { font-size: 24px; }
  .mobile-body .steps-art { width: min(100%,920px); margin: 30px auto 20px; }
  .mobile-body .steps-grid { width: min(100%,920px); margin: 0 auto; gap: 32px; }
  .mobile-body .steps-grid article { padding: 10px 18px 0; border-left: 1px solid rgba(25,51,43,.14); }
  .mobile-body .steps-grid article:first-child { border-left: 0; }
  .mobile-body .steps-grid article > b { font-size: 34px; }
  .mobile-body .steps-grid h3 { font-size: 20px; }
  .mobile-body .steps-grid p { font-size: 12px; line-height: 1.8; }
}

/* Final logo integration: the header now uses the logo's own field palette. */
.mobile-body .mobile-header {
  min-height: 98px;
  background:
    radial-gradient(circle at 7% 18%, rgba(255,255,255,.78), transparent 18%),
    radial-gradient(circle at 82% 100%, rgba(192,211,169,.72), transparent 30%),
    linear-gradient(104deg, #f4f0df 0%, #e4ead8 52%, #cbdcc8 100%);
  border-bottom: 1px solid rgba(31,76,57,.18);
  box-shadow: 0 10px 22px rgba(62,91,67,.1);
}

.mobile-body .brand-logo {
  width: 178px;
  height: 82px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
}

.mobile-body .status-pill {
  position: static;
  width: auto;
  max-width: none;
  min-width: 0;
  margin-left: auto;
  transform: none;
  justify-content: flex-start;
  white-space: nowrap;
  overflow: visible;
  color: #35664f;
  font-size: 10px;
  font-weight: 700;
}

.mobile-body .status-pill > i {
  background: #4fa96f;
  box-shadow: 0 0 0 4px rgba(79,169,111,.14), 0 0 14px rgba(79,169,111,.45);
}

.mobile-body .status-pill strong { color: #397b54; }

.mobile-body .hero-copy-block {
  padding-top: 58px;
  background: linear-gradient(180deg, #fbf6eb 0%, #f7f0e4 78%, rgba(247,240,228,.9) 100%);
}

.mobile-body .hero-step-count {
  color: rgba(53,108,87,.62);
  text-shadow: none;
}

.mobile-body .home-signal-row {
  background: linear-gradient(180deg, #0b4b39 0%, #082f26 100%);
}

.mobile-body .hero-actions {
  background: linear-gradient(180deg, #0b4b39 0%, #082f26 100%);
}

@media (max-width: 360px) {
  .mobile-body .brand-logo { width: 154px; height: 76px; }
}

@media (min-width: 821px) {
  .mobile-body .mobile-header {
    min-height: 116px;
    background:
      radial-gradient(circle at 8% 16%, rgba(255,255,255,.82), transparent 20%),
      radial-gradient(circle at 84% 110%, rgba(192,211,169,.72), transparent 32%),
      linear-gradient(104deg, #f4f0df 0%, #e4ead8 52%, #cbdcc8 100%);
  }

  .mobile-body .brand-logo { width: 236px; height: 102px; }
  .mobile-body .status-pill { color: #35664f; font-size: 13px; }
  .mobile-body .hero-copy-block { padding-top: 74px; }
}

/* Reference-faithful mobile hero: one continuous farmland canvas, no section seam. */
@media (max-width: 820px) {
  .mobile-body .hero-mobile {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: transparent;
  }

  .mobile-body .hero-mobile::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    height: 1315px;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(247,242,231,.12) 0%, rgba(247,242,231,0) 22%, rgba(5,42,32,.04) 63%, rgba(5,42,32,.68) 100%),
      url("/assets/farmland-network-hero.png") center top / 100% 1315px no-repeat;
  }

  .mobile-body .hero-mobile::after {
    content: "";
    position: absolute;
    z-index: 2;
    right: -8%;
    bottom: -1px;
    left: -8%;
    height: 54px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(251,246,235,0) 0%, rgba(251,246,235,.84) 100%);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  }

  .mobile-body .hero-copy-block {
    position: relative;
    z-index: 3;
    min-height: 365px;
    padding-top: 58px;
    background:
      linear-gradient(180deg, rgba(251,246,235,.96) 0%, rgba(251,246,235,.88) 46%, rgba(251,246,235,.54) 76%, rgba(251,246,235,0) 100%),
      linear-gradient(90deg, rgba(251,246,235,.9) 0%, rgba(251,246,235,.76) 34%, rgba(251,246,235,.38) 62%, rgba(251,246,235,0) 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,.82) 84%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,.82) 84%, transparent 100%);
  }

  .mobile-body .hero-copy-block::after {
    content: "";
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: -180px;
    left: 0;
    height: 250px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(251,246,235,.72) 0%, rgba(251,246,235,.46) 32%, rgba(251,246,235,.18) 70%, rgba(251,246,235,0) 100%);
  }

  .mobile-body .hero-field-visual {
    position: relative;
    z-index: 3;
    height: 650px;
    min-height: 650px;
    margin-top: 0;
    background: transparent;
    box-shadow: none;
  }

  .mobile-body .hero-field-image {
    opacity: 0;
  }

  .mobile-body .hero-visual-wash {
    background:
      linear-gradient(180deg, rgba(5,42,32,0) 0%, rgba(5,42,32,.03) 44%, rgba(5,42,32,.2) 78%, rgba(5,42,32,.72) 100%),
      linear-gradient(90deg, rgba(5,42,32,.04), transparent 48%, rgba(5,42,32,.08));
  }

  .mobile-body .hero-network-overlay .group-node text {
    display: none;
  }

  .mobile-body .hero-actions {
    position: relative;
    z-index: 3;
    padding-top: 18px;
    padding-bottom: 17px;
    background: linear-gradient(180deg, rgba(8,47,38,.32) 0%, rgba(8,47,38,.78) 100%);
  }

  .mobile-body .hero-plot-callout {
    left: 142px;
  }

  .mobile-body .hero-actions {
    padding-right: 56px;
    padding-left: 56px;
  }

  .mobile-body .home-signal-row {
    position: relative;
    z-index: 3;
    background: rgba(8,47,38,.78);
  }

  .mobile-body .steps-section {
    position: relative;
    z-index: 4;
    margin-top: -1px;
  }
}

/* Reference scale pass: keep the mobile poster composition within one viewport. */
@media (max-width: 820px) {
  .mobile-body .mobile-header {
    min-height: 76px;
    height: 76px;
    padding: 3px 14px;
  }

  .mobile-body .brand-logo {
    width: 220px;
    height: 70px;
  }

  .mobile-body .status-pill {
    font-size: 9px;
  }

  .mobile-body .hero-mobile {
    height: 630px;
    min-height: 630px;
  }

  .mobile-body .hero-mobile::before {
    height: 630px;
    background:
      linear-gradient(180deg, rgba(247,242,231,.24) 0%, rgba(247,242,231,.02) 30%, rgba(5,42,32,.08) 62%, rgba(5,42,32,.82) 100%),
      url("/assets/farmland-network-hero.png") center top / 100% 630px no-repeat;
  }

  .mobile-body .hero-mobile::after {
    height: 38px;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  }

  .mobile-body .hero-step-count {
    top: 13px;
    font-size: 17px;
  }

  .mobile-body .hero-copy-block {
    position: absolute;
    inset: 0 0 auto;
    height: 255px;
    min-height: 255px;
    padding: 32px 28px 0;
    background:
      linear-gradient(180deg, rgba(251,246,235,.96) 0%, rgba(251,246,235,.78) 54%, rgba(251,246,235,0) 100%),
      linear-gradient(90deg, rgba(251,246,235,.94) 0%, rgba(251,246,235,.68) 42%, rgba(251,246,235,0) 100%);
  }

  .mobile-body .hero-copy-block {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .mobile-body .hero-copy-block h1 {
    max-width: 365px;
    font-size: clamp(38px, 9.2vw, 45px);
    line-height: 1.07;
  }

  .mobile-body .hero-copy-block .hero-copy {
    max-width: 330px;
    margin-top: 12px;
    font-size: 10px;
    line-height: 1.65;
  }

  .mobile-body .hero-field-visual {
    position: absolute;
    inset: 0;
    z-index: 1;
    height: 630px;
    min-height: 630px;
    margin: 0;
  }

  .mobile-body .hero-visual-wash {
    background:
      linear-gradient(180deg, rgba(251,246,235,.06) 0%, transparent 42%, rgba(5,42,32,.2) 74%, rgba(5,42,32,.78) 100%),
      linear-gradient(90deg, rgba(251,246,235,.1), transparent 42%, rgba(5,42,32,.08));
  }

  .mobile-body .hero-network-overlay {
    opacity: .34;
  }

  .mobile-body .hero-network-overlay .group-node text,
  .mobile-body .hero-network-overlay .crop-glyph {
    display: none;
  }

  .mobile-body .hero-plot-callout {
    right: 16px;
    bottom: 165px;
    left: 142px;
    grid-template-columns: 34px 1fr 12px;
    gap: 8px;
    min-height: 55px;
    padding: 8px 10px 8px 8px;
    border-radius: 16px 6px 16px 6px;
  }

  .mobile-body .crop-seal {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }

  .mobile-body .hero-plot-callout b { font-size: 11px; }
  .mobile-body .hero-plot-callout b strong { font-size: 19px; }
  .mobile-body .hero-plot-callout small { margin-top: 2px; font-size: 7px; }
  .mobile-body .callout-arrow { font-size: 22px; }

  .mobile-body .hero-actions {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: 50px;
    left: 0;
    display: grid;
    gap: 8px;
    padding: 0 57px;
    background: transparent;
  }

  .mobile-body .hero-actions .primary-button,
  .mobile-body .hero-actions .secondary-button {
    min-height: 48px;
    border-radius: 16px 5px 16px 5px;
    font-size: 12px;
  }

  .mobile-body .hero-actions .primary-button > span:last-child,
  .mobile-body .hero-actions .secondary-button > span:last-child { font-size: 20px; }
  .mobile-body .action-icon { font-size: 17px; }

  .mobile-body .home-signal-row {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: 0;
    left: 0;
    grid-template-columns: 1fr 1fr;
    padding: 7px 28px 10px;
    background: linear-gradient(180deg, rgba(8,47,38,.1) 0%, rgba(8,47,38,.72) 100%);
  }

  .mobile-body .home-signal-row > div:not(.signal-note) { font-size: 9px; }
  .mobile-body .home-signal-row b { font-size: 18px; }
  .mobile-body .signal-note { margin-top: 2px; font-size: 7px; }

  .mobile-body .steps-section {
    height: 260px;
    min-height: 260px;
    padding: 24px 28px 18px;
  }

  .mobile-body .steps-heading h2 { font-size: 16px; }
  .mobile-body .steps-art { margin: 13px -13px 8px; }
  .mobile-body .steps-grid { gap: 9px; }
  .mobile-body .steps-grid article > b { font-size: 23px; }
  .mobile-body .steps-grid h3 { margin: 2px 0 5px; font-size: 13px; }
  .mobile-body .steps-grid p { font-size: 8px; line-height: 1.5; }
}

@media (min-width: 821px) {
  .mobile-body .hero-copy-block h1 {
    max-width: 560px;
    font-size: clamp(52px, 4.6vw, 72px);
    line-height: 1.05;
  }

  .mobile-body .hero-actions,
  .mobile-body .home-signal-row {
    background: transparent;
  }

  .mobile-body .hero-actions .secondary-button {
    border-color: rgba(25,51,43,.28);
    background: rgba(255,250,240,.5);
    color: #356c57;
  }

  .mobile-body .hero-actions .secondary-button .action-icon {
    color: #356c57;
  }
}

/* Desktop home: keep the reference composition, but recompose it for a wide screen. */
@media (min-width: 821px) {
  .mobile-body {
    background: #d9e2d6;
  }

  .mobile-body .phone-shell {
    width: min(100%, 1440px);
    max-width: none;
    padding: 0 0 72px;
    background: #fbf6eb;
    box-shadow: 0 20px 70px rgba(31, 76, 57, .16);
  }

  .mobile-body .mobile-header {
    height: 116px;
    min-height: 116px;
    margin: 0;
    padding: 4px clamp(42px, 6vw, 92px);
  }

  .mobile-body .brand-logo {
    width: 250px;
    height: 108px;
  }

  .mobile-body .status-pill {
    padding: 10px 14px;
    font-size: 14px;
  }

  .mobile-body .hero-mobile {
    display: block;
    position: relative;
    isolation: isolate;
    height: 900px;
    min-height: 900px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
  }

  .mobile-body .hero-mobile::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(247,242,231,.28) 0%, rgba(247,242,231,0) 25%, rgba(5,42,32,.04) 55%, rgba(5,42,32,.78) 100%),
      linear-gradient(90deg, rgba(251,246,235,.86) 0%, rgba(251,246,235,.38) 32%, rgba(251,246,235,0) 62%),
      url("/assets/farmland-network-hero.png") center top / cover no-repeat;
  }

  .mobile-body .hero-mobile::after {
    content: "";
    position: absolute;
    z-index: 2;
    right: -4%;
    bottom: -1px;
    left: -4%;
    height: 58px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(251,246,235,0) 0%, rgba(251,246,235,.92) 100%);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  }

  .mobile-body .hero-step-count {
    display: block;
    position: absolute;
    z-index: 5;
    top: 28px;
    right: 0;
    left: 0;
    color: rgba(53,108,87,.7);
    font-size: 22px;
    text-shadow: none;
  }

  .mobile-body .hero-copy-block {
    position: absolute;
    z-index: 3;
    inset: 0 0 auto;
    height: 390px;
    min-height: 0;
    padding: 88px clamp(48px, 8vw, 116px) 0;
    background:
      linear-gradient(180deg, rgba(251,246,235,.95) 0%, rgba(251,246,235,.76) 62%, rgba(251,246,235,0) 100%),
      linear-gradient(90deg, rgba(251,246,235,.94) 0%, rgba(251,246,235,.72) 30%, rgba(251,246,235,.18) 58%, rgba(251,246,235,0) 78%);
    -webkit-mask-image: none;
    mask-image: none;
  }

  .mobile-body .hero-copy-block::after {
    display: none;
  }

  .mobile-body .hero-copy-block .eyebrow {
    display: none;
  }

  .mobile-body .hero-copy-block h1 {
    max-width: 720px;
    font-size: clamp(58px, 6vw, 88px);
    line-height: 1.04;
    letter-spacing: -.06em;
  }

  .mobile-body .hero-copy-block .hero-copy {
    max-width: 520px;
    margin-top: 26px;
    font-size: 15px;
    line-height: 1.85;
  }

  .mobile-body .hero-field-visual {
    position: absolute;
    z-index: 1;
    inset: 0;
    height: 900px;
    min-height: 900px;
    margin: 0;
    background: transparent;
    box-shadow: none;
  }

  .mobile-body .hero-field-image {
    opacity: 0;
  }

  .mobile-body .hero-visual-wash {
    background:
      linear-gradient(180deg, rgba(251,246,235,.04) 0%, transparent 38%, rgba(5,42,32,.14) 68%, rgba(5,42,32,.78) 100%),
      linear-gradient(90deg, rgba(251,246,235,.04), transparent 45%, rgba(5,42,32,.12));
  }

  .mobile-body .hero-network-overlay {
    opacity: .34;
  }

  .mobile-body .hero-network-overlay .group-node text,
  .mobile-body .hero-network-overlay .crop-glyph {
    display: none;
  }

  .mobile-body .hero-plot-callout {
    right: clamp(42px, 7vw, 104px);
    bottom: 224px;
    left: auto;
    width: min(360px, 31vw);
    min-height: 92px;
    padding: 14px 16px 14px 13px;
    border-radius: 24px 8px 24px 8px;
  }

  .mobile-body .crop-seal {
    width: 48px;
    height: 48px;
    font-size: 22px;
  }

  .mobile-body .hero-plot-callout b {
    font-size: 15px;
  }

  .mobile-body .hero-plot-callout b strong {
    font-size: 26px;
  }

  .mobile-body .hero-plot-callout small {
    margin-top: 5px;
    font-size: 10px;
  }

  .mobile-body .callout-arrow {
    font-size: 30px;
  }

  .mobile-body .hero-actions {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: 78px;
    left: 0;
    display: grid;
    grid-template-columns: minmax(0, 720px);
    justify-content: center;
    gap: 13px;
    margin: 0;
    padding: 0 28px;
    background: transparent;
  }

  .mobile-body .hero-actions .primary-button,
  .mobile-body .hero-actions .secondary-button {
    width: 100%;
    min-height: 66px;
    border-radius: 22px 7px 22px 7px;
    font-size: 17px;
  }

  .mobile-body .hero-actions .primary-button > span:last-child,
  .mobile-body .hero-actions .secondary-button > span:last-child {
    font-size: 29px;
  }

  .mobile-body .action-icon {
    font-size: 22px;
  }

  .mobile-body .home-signal-row {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 12px 48px;
    padding: 13px 30px 17px;
    background: linear-gradient(180deg, rgba(8,47,38,.12) 0%, rgba(8,47,38,.84) 100%);
    color: rgba(255,250,240,.82);
  }

  .mobile-body .home-signal-row > div:not(.signal-note) {
    font-size: 12px;
  }

  .mobile-body .home-signal-row b {
    font-size: 24px;
  }

  .mobile-body .signal-note {
    grid-column: 1 / -1;
    margin-top: 0;
    font-size: 9px;
    text-align: center;
  }

  .mobile-body .steps-section {
    position: relative;
    z-index: 4;
    height: 342px;
    min-height: 342px;
    margin: -1px 0 0;
    padding: 42px clamp(42px, 7vw, 100px) 34px;
    background: #fbf6eb;
    border-top: 0;
    overflow: hidden;
  }

  .mobile-body .steps-heading h2 {
    font-size: 24px;
  }

  .mobile-body .steps-art {
    width: min(100%, 980px);
    margin: 20px auto 14px;
  }

  .mobile-body .steps-grid {
    width: min(100%, 980px);
    margin: 0 auto;
    gap: 30px;
  }

  .mobile-body .steps-grid article {
    padding: 8px 18px 0;
    border-left: 1px solid rgba(25,51,43,.14);
  }

  .mobile-body .steps-grid article:first-child {
    border-left: 0;
  }

  .mobile-body .steps-grid article > b {
    font-size: 34px;
  }

  .mobile-body .steps-grid h3 {
    margin: 3px 0 6px;
    font-size: 19px;
  }

  .mobile-body .steps-grid p {
    font-size: 11px;
    line-height: 1.7;
  }

  .mobile-body .mobile-footer {
    width: min(100%, 1440px);
  }
}

/* Keep all four product areas discoverable, including on the home poster. */
.mobile-body .mobile-footer {
  display: grid !important;
}

.mobile-body .phone-shell {
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

/* The supplied mark is vertically composed; give it a real brand slot instead of shrinking it into a wordmark. */
.mobile-body .mobile-header {
  min-height: 92px;
  height: 92px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.mobile-body .brand-logo {
  width: 158px;
  height: 88px;
  object-fit: contain;
}

/* The hero should flow cleanly into the three-step explanation without a foggy overlay. */
.mobile-body .hero-mobile::after {
  display: none !important;
}

/* Final poster composition: text, field image and actions share one continuous canvas. */
@media (max-width: 820px) {
  .mobile-body .hero-mobile {
    height: 720px;
    min-height: 720px;
    background: transparent;
  }

  .mobile-body .hero-mobile::before {
    inset: 0;
    height: auto;
    background:
      linear-gradient(180deg, rgba(251,247,238,.95) 0%, rgba(251,247,238,.76) 25%, rgba(251,247,238,.18) 47%, rgba(7,45,34,.05) 64%, rgba(5,42,32,.78) 100%),
      linear-gradient(90deg, rgba(251,247,238,.93) 0%, rgba(251,247,238,.78) 32%, rgba(251,247,238,.35) 53%, rgba(251,247,238,0) 74%),
      url("/assets/farmland-network-hero.png") center top / cover no-repeat;
  }

  .mobile-body .hero-copy-block {
    height: auto;
    min-height: 0;
    padding: 39px 28px 0;
    background: transparent !important;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .mobile-body .hero-copy-block::after { display: none; }

  .mobile-body .hero-copy-block h1 {
    max-width: 372px;
    color: #102e26;
    font-size: clamp(42px, 10.4vw, 51px);
    line-height: 1.08;
    text-shadow: 0 1px 0 rgba(255,255,255,.6);
  }

  .mobile-body .hero-copy-block .hero-copy {
    max-width: 345px;
    margin-top: 19px;
    color: #30443b;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.72;
    text-shadow: 0 1px 0 rgba(255,255,255,.7);
  }

  .mobile-body .hero-field-visual {
    height: 720px;
    min-height: 720px;
  }

  .mobile-body .hero-visual-wash {
    background:
      linear-gradient(180deg, transparent 0%, transparent 47%, rgba(6,42,32,.08) 65%, rgba(5,42,32,.78) 100%),
      linear-gradient(90deg, rgba(251,247,238,.06), transparent 46%, rgba(5,42,32,.08));
  }

  .mobile-body .hero-plot-callout { bottom: 193px; }
  .mobile-body .hero-actions { bottom: 55px; }
  .mobile-body .home-signal-row { bottom: 0; }
}

@media (min-width: 821px) {
  .mobile-body .hero-mobile {
    height: min(820px, 64vw);
    min-height: 700px;
    background: transparent;
  }

  .mobile-body .hero-mobile::before {
    background:
      linear-gradient(180deg, rgba(251,247,238,.87) 0%, rgba(251,247,238,.46) 35%, rgba(251,247,238,.05) 55%, rgba(5,42,32,.68) 100%),
      linear-gradient(90deg, rgba(251,247,238,.93) 0%, rgba(251,247,238,.72) 29%, rgba(251,247,238,.22) 52%, rgba(251,247,238,0) 70%),
      url("/assets/farmland-network-hero.png") center top / cover no-repeat;
  }

  .mobile-body .hero-copy-block {
    height: auto;
    min-height: 0;
    padding: clamp(70px, 8vw, 126px) clamp(52px, 8vw, 150px) 0;
    background: transparent;
  }

  .mobile-body .hero-copy-block .hero-copy {
    max-width: 500px;
    color: #2f4339;
    font-size: 16px;
    font-weight: 600;
  }

  .mobile-body .hero-field-visual { height: 100%; min-height: 0; }
  .mobile-body .hero-visual-wash { background: linear-gradient(180deg, transparent 44%, rgba(5,42,32,.73) 100%); }
}

/* Show both network views as one readable, scrollable story instead of a tab switch. */
.mobile-body .network-panel-block {
  margin-top: 22px;
}

.mobile-body .network-panel-block > h2 {
  margin: 0 0 8px;
  color: var(--forest-900);
  font-family: var(--font-title);
  font-size: 21px;
  line-height: 1.25;
}

.mobile-body .network-panel-block + .network-panel-block {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.mobile-body .optional-fields.always-visible {
  display: grid;
  gap: 22px;
}

.mobile-body .optional-fields.always-visible fieldset {
  margin: 0;
}

@media (max-width: 360px) {
  .mobile-body .brand-logo {
    width: 142px;
    height: 86px;
  }
}

@media (min-width: 821px) {
  .mobile-body .mobile-header {
    min-height: 116px;
    height: 116px;
  }

  .mobile-body .brand-logo {
    width: 204px;
    height: 110px;
  }

  .mobile-body .mobile-footer {
    min-height: 78px;
    padding: 10px 38px 12px;
    background: rgba(248,244,233,.96);
    border-top-color: rgba(31,76,57,.18);
  }

  .mobile-body .mobile-footer button {
    flex-direction: row;
    justify-content: center;
    gap: 9px;
    font-size: 13px;
  }

  .mobile-body .mobile-footer button > span {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }

  .mobile-body .mobile-footer button b {
    font-size: 13px;
  }
}

/* Narrow-screen guardrails for the poster controls. */
@media (max-width: 820px) {
  .mobile-body .mobile-header {
    gap: 8px;
  }

  .mobile-body .brand {
    min-width: 0;
  }

  .mobile-body .brand-logo {
    width: 190px;
    max-width: 190px;
    flex: 0 1 190px;
  }

  .mobile-body .status-pill {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-body .hero-plot-callout {
    min-width: 0;
    overflow: hidden;
  }

  .mobile-body .hero-plot-callout > div {
    min-width: 0;
    overflow: hidden;
  }

  .mobile-body .hero-plot-callout b,
  .mobile-body .hero-plot-callout small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-body .hero-actions .primary-button,
  .mobile-body .hero-actions .secondary-button {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .mobile-body .brand-logo {
    width: 154px;
    max-width: 154px;
    flex-basis: 154px;
  }
}

/* The four product areas belong to the page flow, not a floating overlay. */
.mobile-body .phone-shell {
  padding-bottom: 0;
}

.mobile-body .mobile-footer {
  position: relative;
  z-index: 5;
  left: auto;
  bottom: auto;
  transform: none;
  width: calc(100% + 44px);
  min-height: calc(78px + env(safe-area-inset-bottom));
  margin: 30px -22px 0;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: rgba(242,238,227,.98);
  border-top: 1px solid rgba(25,51,43,.14);
  box-shadow: 0 -8px 24px rgba(25,51,43,.05);
  backdrop-filter: none;
}

@media (min-width: 821px) {
  .mobile-body .mobile-footer {
    width: 100%;
    min-height: 82px;
    margin: 44px 0 0;
    padding: 12px 48px;
  }
}

/* Keep the three-step explanation as one composition: labels above, field cards below. */
.mobile-body .steps-section {
  position: relative;
  isolation: isolate;
  height: auto;
  min-height: 316px;
  overflow: hidden;
  padding: 27px 24px 24px;
  background: #fbf6eb;
}

.mobile-body .steps-heading {
  position: relative;
  z-index: 2;
}

.mobile-body .steps-heading h2 {
  font-size: 17px;
}

.mobile-body .steps-art {
  position: absolute;
  z-index: 0;
  right: 2px;
  bottom: 4px;
  left: 2px;
  display: block;
  width: calc(100% - 4px);
  max-width: none;
  margin: 0;
  mix-blend-mode: multiply;
  opacity: .96;
  pointer-events: none;
}

.mobile-body .steps-grid {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 224px;
  margin: 13px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.mobile-body .steps-grid article {
  position: relative;
  min-width: 0;
  padding: 0 2px;
  border: 0;
  background: transparent;
}

.mobile-body .steps-grid article > b {
  display: block;
  color: #356c57;
  font-family: var(--font-title);
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
}

.mobile-body .steps-grid h3 {
  margin: 5px 0 5px;
  color: #173b30;
  font-family: var(--font-title);
  font-size: 14px;
  line-height: 1.2;
}

.mobile-body .steps-grid p {
  min-height: 0;
  margin: 0;
  color: #69766d;
  font-size: 8px;
  line-height: 1.58;
}

.mobile-body .steps-grid article:not(:last-child)::after {
  position: absolute;
  top: 54px;
  right: -9px;
  z-index: 3;
  color: #537a67;
  content: "→";
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

@media (max-width: 360px) {
  .mobile-body .steps-section {
    min-height: 290px;
    padding-right: 17px;
    padding-left: 17px;
  }

  .mobile-body .steps-grid {
    min-height: 204px;
    gap: 4px;
  }

  .mobile-body .steps-grid article > b { font-size: 23px; }
  .mobile-body .steps-grid h3 { font-size: 12px; }
  .mobile-body .steps-grid p { font-size: 7px; }
}

@media (min-width: 821px) {
  .mobile-body .steps-section {
    min-height: 382px;
    padding: 38px clamp(44px, 7vw, 120px) 26px;
  }

  .mobile-body .steps-heading h2 { font-size: 24px; }

  .mobile-body .steps-art {
    right: clamp(34px, 6vw, 110px);
    bottom: 3px;
    left: clamp(34px, 6vw, 110px);
    width: auto;
  }

  .mobile-body .steps-grid {
    width: min(100%, 980px);
    min-height: 260px;
    margin-top: 22px;
    gap: 34px;
  }

  .mobile-body .steps-grid article {
    padding: 0 18px;
  }

  .mobile-body .steps-grid article > b { font-size: 35px; }
  .mobile-body .steps-grid h3 { margin-top: 7px; font-size: 20px; }
  .mobile-body .steps-grid p { font-size: 11px; line-height: 1.72; }
  .mobile-body .steps-grid article:not(:last-child)::after {
    top: 73px;
    right: -21px;
    font-size: 29px;
  }
}

/* Preserve the reference poster's three-line headline on narrow phones. */
@media (max-width: 820px) {
  .mobile-body .hero-copy-block h1 {
    max-width: 100%;
    font-size: clamp(37px, 8.95vw, 40px);
    letter-spacing: -.045em;
  }
}

/* The reference uses three separate explanations, not text layered on one long image. */
.mobile-body .steps-section {
  min-height: 0;
  height: auto;
  overflow: visible;
  padding: 34px 24px 42px;
}

.mobile-body .steps-art {
  display: none !important;
}

.mobile-body .steps-grid {
  min-height: 0;
  margin-top: 22px;
  gap: 10px;
  align-items: start;
}

.mobile-body .steps-grid .step-card {
  display: flex;
  min-height: 205px;
  padding: 0 2px;
  flex-direction: column;
  align-items: flex-start;
  overflow: visible;
}

.mobile-body .steps-grid .step-card > b {
  font-size: 27px;
}

.mobile-body .steps-grid .step-card h3 {
  margin: 5px 0 5px;
  font-size: 14px;
}

.mobile-body .steps-grid .step-card p {
  min-height: 0;
  font-size: 8px;
  line-height: 1.58;
}

.mobile-body .step-visual {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / .88;
  margin-top: auto;
  background-image: url("/assets/field-steps-strip.png");
  background-repeat: no-repeat;
  background-size: 300% auto;
  filter: drop-shadow(0 8px 8px rgba(42, 59, 34, .12));
}

.mobile-body .step-card:nth-child(1) .step-visual { background-position: 0 50%; }
.mobile-body .step-card:nth-child(2) .step-visual { background-position: 50% 50%; }
.mobile-body .step-card:nth-child(3) .step-visual { background-position: 100% 50%; }

.mobile-body .steps-grid .step-card:not(:last-child)::after {
  top: 78px;
  right: -9px;
}

/* Restore clear agricultural glyphs inside the hero network, as in the reference map. */
.mobile-body .hero-network-overlay {
  opacity: .6;
}

.mobile-body .hero-network-overlay .crop-glyph {
  display: block !important;
  fill: #fff8e8 !important;
  font-size: 20px !important;
}

.mobile-body .hero-network-overlay .crop-node circle {
  fill: color-mix(in srgb, var(--crop) 78%, #ffffff) !important;
  stroke: rgba(255,255,255,.86);
}

@media (max-width: 360px) {
.mobile-body .steps-section { padding-right: 17px; padding-left: 17px; }
}

/* Home uses the approved reference as one uninterrupted visual canvas. */
.mobile-body .home-layout-legacy { display: none; }
.mobile-body .reference-home-poster {
  position: relative;
  width: 100%;
  max-width: 1280px;
  aspect-ratio: 1280 / 2550;
  margin: 0 auto;
  overflow: hidden;
  background: #f7f4e9;
}
.mobile-body .reference-home-art {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
  image-rendering: -webkit-optimize-contrast;
}
.mobile-body .poster-header-surface {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 7.15%;
  background: #edf2e3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(25,73,54,.12);
}
.mobile-body .poster-brand-replace {
  width: 44%;
  height: 100%;
  padding: .75% 1.35%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.mobile-body .poster-brand-replace .poster-brand-logo {
  width: 25%;
  height: 94%;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: center;
}
.mobile-body .poster-brand-replace > span {
  min-width: 0;
  margin-left: 2.4%;
  color: #153f32;
  text-align: left;
}
.mobile-body .poster-brand-replace b {
  display: block;
  font-family: var(--font-title);
  font-size: clamp(17px, 3.75vw, 48px);
  line-height: 1;
  letter-spacing: .16em;
  white-space: nowrap;
}
.mobile-body .poster-brand-replace small {
  display: block;
  margin-top: 7%;
  color: rgba(21,63,50,.74);
  font-size: clamp(7px, 1.22vw, 15px);
  letter-spacing: .08em;
  white-space: nowrap;
}
.mobile-body .poster-status {
  position: absolute;
  right: 3.2%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 34%;
  color: #356b4b;
  font-size: clamp(8px, 1.22vw, 16px);
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
}
.mobile-body .poster-status i {
  font-style: normal;
  color: #76b85d;
  font-size: 1.4em;
  line-height: 1;
}
.mobile-body .poster-status > span { font-size: 0; }
.mobile-body .poster-status b { color: #2b7350; font-size: clamp(8px, 1.22vw, 16px); }
.mobile-body .poster-hotspot {
  position: absolute;
  z-index: 3;
  left: 13.4%;
  width: 72.8%;
  height: 5.45%;
  border: 0;
  border-radius: 18px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mobile-body .poster-hotspot:focus-visible { outline: 3px solid #e2b94f; outline-offset: 5px; }
.mobile-body .poster-start-hotspot { top: 59.15%; }
.mobile-body .poster-network-hotspot { top: 66.1%; }
.mobile-body.home-active .mobile-header { display: none; }
.mobile-body.home-active .phone-shell { padding-top: 0; }
.mobile-body.home-active .mobile-footer {
  position: static;
  transform: none;
  width: 100%;
  min-height: 76px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: #f7f3e8;
  border-top: 1px solid rgba(20,72,57,.14);
  box-shadow: none;
}
.mobile-body.home-active .mobile-footer button { min-height: 54px; }

/* 首页「村域实时信号」条：替代海报里写死的静态数字，随后台数据实时刷新。 */
.mobile-body .home-signal-bar {
  margin: 0;
  padding: 12px clamp(18px, 4.5vw, 34px) 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mobile-body .home-signal-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--forest-800);
}
.mobile-body .home-signal-head .signal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #72db9b;
  box-shadow: 0 0 0 4px rgba(114,219,155,.15), 0 0 14px rgba(114,219,155,.6);
}
.mobile-body .home-signal-crops {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mobile-body .home-signal-crop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--crop, var(--sun));
  border-radius: 3px 14px 3px 14px;
  background: rgba(255,250,240,.6);
}
.mobile-body .home-signal-crop i {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--crop, var(--sun));
  color: var(--forest-950);
  font-family: var(--font-title);
  font-style: normal;
  font-size: 14px;
}
.mobile-body .home-signal-crop b { font-size: 13px; color: var(--forest-900); }
.mobile-body .home-signal-crop em {
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.mobile-body .home-signal-crop small {
  font-size: 9px;
  border-radius: 99px;
  padding: 2px 7px;
  background: rgba(129,163,93,.14);
  color: var(--forest-700);
}
.mobile-body .home-signal-crop small.high { background: rgba(204,109,74,.14); color: #a44f36; }
.mobile-body .home-signal-crop small.rising { background: rgba(231,168,58,.16); color: #9a6c14; }
.mobile-body .home-signal-empty { font-size: 12px; color: var(--muted); }
.mobile-body .home-signal-meta { font-size: 9.5px; color: var(--muted); letter-spacing: .03em; }

/* 首页核心命题：诚实展示「一块地适合种，不等于一村人都适合同时种」 */
.home-proposition {
  margin: 0;
  padding: 14px clamp(18px, 4.5vw, 34px);
  text-align: center;
  font-family: var(--font-title);
  font-size: clamp(15px, 3.4vw, 19px);
  line-height: 1.7;
  letter-spacing: .03em;
  color: var(--forest-900);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 760px) {
  .mobile-body .reference-home-poster {
    /* The supplied poster is 1280px wide; do not upscale it on desktop. */
    max-width: 1280px;
    background: #f7f4e9;
  }
  .mobile-body .poster-brand-replace { width: 38%; }
  .mobile-body .poster-hotspot { left: 13.4%; width: 72.8%; border-radius: 28px; }
}
@media (min-width: 821px) {
  .mobile-body .steps-section {
    min-height: 0;
    padding: 52px clamp(44px, 7vw, 120px) 58px;
  }

  .mobile-body .steps-grid {
    min-height: 0;
    margin-top: 32px;
    gap: 40px;
  }

  .mobile-body .steps-grid .step-card {
    min-height: 295px;
    padding: 0 18px;
  }

  .mobile-body .steps-grid .step-card > b { font-size: 35px; }
  .mobile-body .steps-grid .step-card h3 { font-size: 20px; }
  .mobile-body .steps-grid .step-card p { font-size: 11px; line-height: 1.72; }
  .mobile-body .steps-grid .step-card:not(:last-child)::after { top: 98px; right: -22px; }
}

/* ============ 新增：多地块（F3）/ 打印（F6）/ 重试（F5）/ 免责声明 ============ */

.my-fields-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 6px;
  padding: 10px 12px;
  background: rgba(247, 243, 232, .9);
  border: 1px solid rgba(20, 72, 57, .16);
  border-radius: 14px;
}
.my-fields-title {
  font-size: 11px;
  color: #19332b;
  opacity: .6;
  margin-right: 2px;
  flex-shrink: 0;
}
.my-field-chip {
  border: 1px solid rgba(20, 72, 57, .22);
  background: #fffdf6;
  color: #19332b;
  font-size: 12px;
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
}
.my-field-chip i {
  font-style: normal;
  font-size: 10px;
  color: #79a85b;
  background: rgba(121, 168, 91, .14);
  padding: 1px 6px;
  border-radius: 999px;
}
.my-field-chip.is-current {
  border-color: #d9784f;
  background: #fff1e6;
  color: #8a3f1d;
  box-shadow: 0 0 0 2px rgba(217, 120, 79, .16);
}
.my-field-chip:hover { border-color: #d9784f; }

.print-nav-button {
  display: block;
  margin: 14px auto 4px;
  border: 1px solid rgba(20, 72, 57, .25);
  background: #fffdf6;
  color: #19332b;
  font-size: 13px;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
.print-nav-button:hover { background: #f1e9d6; }

.nav-disclaimer {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed rgba(20, 72, 57, .25);
  font-size: 11px;
  color: #19332b;
  opacity: .62;
  text-align: center;
}

.nav-source {
  margin-top: 10px;
  font-size: 11px;
  color: #19332b;
  opacity: .55;
}

.empty-actions {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

.graph-retry {
  margin-top: 10px;
  border: 1px solid rgba(20, 72, 57, .25);
  background: #fffdf6;
  color: #19332b;
  font-size: 12px;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
.graph-retry:hover { background: #f1e9d6; }

/* 数据三态标签（B7）：演示（灰棕）/ 待核（橙）/ 已核（绿）/ 离线（红） */
#evidenceBadgeText.evidence-demo { color: #8a6d3b; }
#evidenceBadgeText.evidence-pending { color: #c2662f; }
#evidenceBadgeText.evidence-verified { color: #2f7d52; }
#evidenceBadgeText.evidence-offline { color: #b03a2e; }
.dash-meta strong.evidence-demo { color: #8a6d3b; }
.dash-meta strong.evidence-pending { color: #c2662f; }
.dash-meta strong.evidence-verified { color: #2f7d52; }
.dash-meta strong.evidence-offline { color: #b03a2e; }

.withdraw-row {
  margin: 18px 0 8px;
  text-align: center;
}
.withdraw-row .text-button {
  font-size: 12px;
  color: rgba(176, 58, 46, .85);
  text-decoration: underline;
}

/* T5 看板数据透明度 */
.transparency-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.transparency-grid article {
  background: #f7f3e8;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}
.transparency-grid small { display: block; font-size: 11px; color: rgba(25,51,43,.6); margin-bottom: 4px; }
.transparency-grid b { font-size: 15px; color: #19332b; }
.tp-materials { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tp-material {
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(20,72,57,.2);
  color: rgba(25,51,43,.7);
}
.tp-material.verified { background: rgba(121,168,91,.18); color: #2f7d52; }
.tp-material.submitted { background: rgba(217,120,79,.16); color: #8a3f1d; }
.tp-material.waiting { background: rgba(25,51,43,.08); }

/* 打印导航卡：只显示导航卡本体，其余全部隐藏 */
@media print {
  body.printing-navigation * { visibility: hidden !important; }
  body.printing-navigation #navigationCard,
  body.printing-navigation #navigationCard * { visibility: visible !important; }
  body.printing-navigation #navigationCard {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    box-shadow: none;
    border: 1px solid #ccc;
  }
  body.printing-navigation .print-nav-button,
  body.printing-navigation #trialForm { display: none !important; }
}