/* ============================================================
   VERDANT SYSTEMS — ops automation, cultivated
   glasshouse white · leaf · sage · clay pot · deep green
   ============================================================ */

:root {
  --white: #F2F4EC;      /* glasshouse white */
  --leaf:  #3A5A40;      /* leaf green */
  --sage:  #A3B18A;      /* sage */
  --clay:  #DDA15E;      /* clay pot */
  --deep:  #344E41;      /* deep green */
  --paper: #F8F9F3;      /* tag paper, cards */
  --clay-dk: #C08847;    /* pot rim (clay, shaded) */
  --soil: #4A3F33;       /* potting soil */
  --dry:  #9A8F79;       /* dead wood */
  --steel: #8A9A8C;      /* glasshouse steel */
  --steel-dk: #6E7F71;
  --text-2: #5C6B57;     /* secondary text (passes on white) */
  --line: rgba(138, 154, 140, 0.38);
  --ease-pop: cubic-bezier(.26, 1.42, .48, 1);
  --ease-out: cubic-bezier(.22, .8, .3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: "Karla", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--deep);
  background-color: var(--white);
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }

h1, h2, h3 { font-family: "Lustria", Georgia, serif; font-weight: 400; line-height: 1.12; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); letter-spacing: -0.01em; max-width: 22ch; }
h3 { font-size: 1.35rem; }

.mono { font-family: "Sometype Mono", ui-monospace, monospace; }

p { max-width: 62ch; }

.eyebrow {
  font-family: "Sometype Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px; height: 1px;
  background: var(--clay);
  vertical-align: middle;
  margin-right: 10px;
}

.section-lede { color: var(--text-2); margin-top: 14px; }

a { color: var(--leaf); text-decoration-color: var(--sage); text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--deep); color: var(--white);
  padding: 10px 16px; border-radius: 4px; transition: top .15s;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------------- buttons ---------------- */
.btn {
  display: inline-block;
  font-family: "Karla", sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
  padding: 13px 24px;
  border-radius: 4px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-deep { background: var(--deep); color: var(--white); }
.btn-deep:hover { background: var(--leaf); box-shadow: 0 6px 16px rgba(52,78,65,.22); }
.btn-clay { background: var(--clay); color: #2A3B30; }
.btn-clay:hover { box-shadow: 0 6px 16px rgba(221,161,94,.35); }
.btn-line { background: transparent; color: var(--deep); border-color: var(--steel); }
.btn-line:hover { border-color: var(--deep); }
.btn-wide { width: 100%; }

/* ---------------- header ---------------- */
.site-head {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 28px;
  padding: 14px 32px;
  background: rgba(242, 244, 236, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--deep); }
.brand-mark { width: 30px; height: 30px; }
.brand-name { font-family: "Lustria", serif; font-size: 1.22rem; letter-spacing: .01em; }
.site-nav { display: flex; gap: 22px; margin-left: auto; }
.site-nav a {
  font-size: 0.95rem; font-weight: 500; text-decoration: none; color: var(--deep);
  border-bottom: 2px solid transparent; padding: 2px 0;
}
.site-nav a:hover { border-bottom-color: var(--clay); }
.head-cta { padding: 9px 18px; }

/* ---------------- hero ---------------- */
.hero { position: relative; overflow: hidden; }
.glasshouse {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  max-width: 1120px; margin: 0 auto;
  padding: 96px 32px 72px;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 48px;
  align-items: end;
}
.hero h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.3rem);
  letter-spacing: -0.015em;
  margin: 8px 0 22px;
}
.hero h1 .soft { color: var(--text-2); }
.lede { font-size: 1.15rem; max-width: 54ch; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.hero-facts { margin-top: 34px; font-size: 0.82rem; color: var(--text-2); letter-spacing: .02em; max-width: none; }

.hero-plant { justify-self: center; text-align: center; }
.hero-plant .plant { width: min(240px, 100%); height: auto; display: block; margin: 0 auto; }
.hero-plant figcaption { font-size: 0.78rem; color: var(--text-2); margin-top: 10px; }

/* glasshouse draw-on (JS adds .drawn to hero) */
.js-anim .glasshouse .draw { stroke-dashoffset: var(--len, 0); stroke-dasharray: var(--len, none); }
.js-anim .hero.drawn .glasshouse .draw {
  transition: stroke-dashoffset 1.4s var(--ease-out);
  stroke-dashoffset: 0;
}

/* ---------------- plant growth engine ---------------- */
.plant .tag-txt {
  font-family: "Sometype Mono", ui-monospace, monospace;
  font-size: 9px; fill: var(--deep); letter-spacing: .04em;
}
.plant .p-seed { opacity: 0; }
.plant .p-leaf, .plant .p-hang, .plant .p-bloom { transform-box: fill-box; }
.plant .p-leaf  { transform-origin: 50% 100%; }
.plant .p-hang  { transform-origin: 50% 0%; }
.plant .p-bloom { transform-origin: 50% 50%; }
.note-txt { fill: var(--clay-dk); font-style: italic; }

/* grown plants breathe — the glasshouse is alive */
.js-anim .plant-unit .p-growth {
  transform-box: view-box; transform-origin: 110px 256px;
  animation: plantsway 6.5s ease-in-out infinite alternate;
}
.js-anim .plant-unit[data-bed="1"] .p-growth { animation-delay: -1.8s; animation-duration: 7.3s; }
.js-anim .plant-unit[data-bed="2"] .p-growth { animation-delay: -3.5s; animation-duration: 6.1s; }
.js-anim .plant-unit[data-bed="3"] .p-growth { animation-delay: -5s; animation-duration: 7.9s; }
.js-anim .hero-plant .p-growth {
  transform-box: view-box; transform-origin: 110px 256px;
  animation: plantsway 5.8s ease-in-out infinite alternate;
}
@keyframes plantsway {
  from { transform: rotate(-0.8deg); }
  to   { transform: rotate(0.8deg); }
}

/* ---------------- why bots die ---------------- */
.deaths { padding: 110px 0 90px; border-top: 1px solid var(--line); }
.death-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
  margin-top: 52px;
}
.death-grid article { border-top: 2px solid var(--sage); padding-top: 20px; }
.death-tag { font-size: 0.76rem; letter-spacing: .08em; color: var(--clay-dk); text-transform: uppercase; margin-bottom: 12px; }
.death-grid h3 { margin-bottom: 10px; }
.death-grid p:not(.death-tag) { color: var(--text-2); font-size: 0.99rem; }
.turn {
  margin: 60px auto 0; text-align: center; max-width: 56ch;
  font-size: 1.14rem;
}
.turn strong { font-weight: 700; color: var(--leaf); }

/* ---------------- greenhouse bench ---------------- */
.bench-section { position: relative; }
.js-scrub .bench-section { height: 380vh; }
.bench-stage {
  border-top: 1px solid var(--line);
  background:
    linear-gradient(rgba(163,177,138,0.10), rgba(242,244,236,0) 40%),
    repeating-linear-gradient(90deg, rgba(138,154,140,0.14) 0, rgba(138,154,140,0.14) 1px, transparent 1px, transparent 84px);
  padding-bottom: 56px;
}
.js-scrub .bench-stage {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-bottom: 0; overflow: hidden;
}
.bench-head {
  display: flex; align-items: end; justify-content: space-between; gap: 32px;
  width: 100%;
  padding-top: 56px;
}
.bench-lede { color: var(--text-2); margin-top: 10px; }
.legend { font-size: 0.78rem; color: var(--text-2); text-align: right; line-height: 1.9; }

.season {
  display: flex; align-items: center; gap: 14px;
  max-width: 1120px; margin: 20px auto 6px; padding: 0 32px;
  width: 100%; font-size: 0.75rem; color: var(--text-2);
  letter-spacing: .08em; text-transform: uppercase;
}
.season-track {
  flex: 0 1 260px; height: 4px; border-radius: 2px;
  background: rgba(138,154,140,.3); overflow: hidden;
}
.season-fill { display: block; width: 0%; height: 100%; background: var(--leaf); border-radius: 2px; }
.season { display: none; }
.js-scrub .season { display: flex; }

/* mist pipe */
.mist-pipe {
  position: relative;
  max-width: 1060px; margin: 18px auto 0; padding: 0 32px;
  width: 100%;
}
.pipe-label {
  position: absolute; top: -16px; right: 32px;
  font-size: 0.72rem; color: var(--text-2); letter-spacing: .03em;
}
.nozzle-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 3px solid var(--steel);
  border-radius: 2px;
  height: 0;
}
.nozzle {
  position: relative; justify-self: center;
  width: 10px; height: 10px; margin-top: -1px;
  background: var(--steel);
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}
.mist {
  position: absolute; left: 50%; top: 12px;
  width: 26px; height: 26px; margin-left: -13px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(163,177,138,0.5), rgba(242,244,236,0) 70%);
  opacity: 0; pointer-events: none;
}
.misting .mist { animation: mistfall 2.6s var(--ease-out) both; }
.misting .m2 { animation-delay: .35s; }
.misting .m3 { animation-delay: .7s; }
@keyframes mistfall {
  0%   { opacity: 0; transform: translateY(0) scale(.5); }
  25%  { opacity: .85; }
  100% { opacity: 0; transform: translateY(64px) scale(1.9); }
}
.rainbow {
  position: absolute; right: 16%; top: 8px;
  width: 130px; height: 64px;
  opacity: 0; transition: opacity 1s ease;
  pointer-events: none;
}
.misting .rainbow { opacity: .5; transition-delay: .8s; }
.mist-eta {
  position: absolute; top: -16px; left: 32px;
  font-size: 0.72rem; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* the bench row */
.bench-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1120px; margin: 0 auto; padding: 0 32px;
  width: 100%;
  align-items: end;
}
.plant-unit { display: flex; flex-direction: column; margin: 0; }
.plot { position: relative; display: flex; justify-content: center; }
.plant-unit .plant { width: 100%; max-width: 230px; height: auto; display: block; }
/* the bench board: per-column segments that join into one continuous plank */
.plot::before {
  content: ""; position: absolute;
  left: -11px; right: -11px; bottom: -13px; height: 15px;
  background: linear-gradient(#C99B63, #B98A50);
  box-shadow: 0 2px 0 rgba(74,63,51,.22);
}
/* a steel leg under each plot */
.plot::after {
  content: ""; position: absolute;
  left: calc(50% - 5px); top: calc(100% + 8px);
  width: 10px; height: 44px;
  background: var(--steel);
}
.plot svg { position: relative; }
.plant-unit figcaption { padding-top: 66px; transition: opacity .5s ease; }
.js-scrub .plant-unit figcaption { opacity: .55; }
.js-scrub .plant-unit.is-active figcaption { opacity: 1; }
.cap-latin { font-size: 0.74rem; color: var(--clay-dk); letter-spacing: .04em; margin-bottom: 8px; font-style: italic; }
.plant-unit h3 { font-size: 1.18rem; margin-bottom: 8px; }
.plant-unit figcaption p:not(.cap-latin) { font-size: 0.92rem; color: var(--text-2); line-height: 1.6; }


/* ---------------- pruning ---------------- */
.pruning { padding: 120px 0; border-top: 1px solid var(--line); }
.prune-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 64px; align-items: center;
}
.prune-copy p { margin-top: 16px; }
.prune-copy h2 { margin-top: 0; }
.prune-stat { font-size: 0.82rem; color: var(--clay-dk); letter-spacing: .04em; }
.prune-result { min-height: 3.2em; color: var(--text-2); font-style: italic; }
.prune-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.prune-scene { position: relative; }
.prune-scene svg { width: 100%; height: auto; display: block; }
.prune-label {
  position: absolute; right: 2%; top: 52%;
  font-size: 0.74rem; line-height: 1.7; color: var(--text-2);
  background: var(--paper); border: 1px solid var(--line);
  padding: 8px 12px; border-radius: 3px;
  max-width: 220px;
}

/* shears */
.shears .blade { transform-box: fill-box; transform-origin: 0% 50%; transition: transform .16s cubic-bezier(.5,0,.8,.4); }
.shears .blade-a { transform: rotate(17deg); transform-origin: 0px 0px; }
.shears .blade-b { transform: rotate(-17deg); transform-origin: 0px 0px; }
.shears { opacity: 0; transition: opacity .4s ease; }
.prune-armed .shears { opacity: 1; }
.snipped .shears .blade-a, .snipped .shears .blade-b { transform: rotate(0deg); }

/* the fall */
.dead-branch { transform-box: view-box; transform-origin: 262px 300px; }
.snipped .dead-branch { animation: branchfall 1.15s cubic-bezier(.4,.05,.7,.4) .14s forwards; }
@keyframes branchfall {
  30% { transform: rotate(11deg); opacity: 1; }
  100% { transform: rotate(34deg) translateY(150px); opacity: 0; }
}
.regrow .dead-branch { animation: branchback .8s var(--ease-pop) forwards; }
@keyframes branchback {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .snipped .dead-branch { animation: none; opacity: 0; transition: opacity .4s; }
  .regrow .dead-branch { animation: none; opacity: 1; }
}
.prune-scene.snipped .prune-label { opacity: 0; }
.prune-label, .prune-note { transition: opacity .5s; }
.snipped .prune-note { opacity: 0; }

/* ---------------- care schedule ---------------- */
.schedule { padding: 110px 0; background: rgba(163,177,138,0.14); border-top: 1px solid var(--line); }
.cron-card {
  margin-top: 40px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.cron-row {
  display: grid;
  grid-template-columns: 150px 90px 1fr 150px;
  gap: 18px; align-items: baseline;
  padding: 16px 24px;
  font-size: 0.88rem;
  border-bottom: 1px dashed var(--line);
}
.cron-row:last-child { border-bottom: none; }
.cron-expr { color: var(--text-2); }
.cron-verb { color: var(--leaf); font-weight: 500; }
.cron-what { font-family: "Karla", sans-serif; color: var(--deep); }
.cron-eta { text-align: right; color: var(--clay-dk); font-variant-numeric: tabular-nums; }

/* ---------------- harvest ledgers ---------------- */
.harvests { padding: 120px 0; }
.ledger-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  margin-top: 48px;
}
.ledger {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 26px 26px 22px;
  background-image: repeating-linear-gradient(
    transparent 0, transparent 27px, rgba(138,154,140,0.14) 27px, rgba(138,154,140,0.14) 28px);
}
.ledger header .mono { font-size: 0.72rem; letter-spacing: .1em; color: var(--clay-dk); }
.ledger h3 { margin: 6px 0 18px; font-size: 1.16rem; }
.ledger dl div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 5px 0; align-items: baseline;
}
.ledger dt { font-size: 0.88rem; color: var(--text-2); }
.ledger dt span { font-size: 0.78rem; color: var(--sage); display: block; }
.ledger dd { font-size: 0.88rem; }
.ledger .yield { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 12px; }
.ledger .yield dd { font-size: 1.02rem; font-weight: 500; color: var(--leaf); white-space: nowrap; }
.ledger .arrow { color: var(--clay-dk); }
.ledger-note { margin-top: 16px; font-size: 0.9rem; color: var(--text-2); font-style: italic; }

/* ---------------- companion chart ---------------- */
.companions { padding: 110px 0; border-top: 1px solid var(--line); }
.chart-scroll { margin-top: 44px; overflow-x: auto; }
.companion-chart { border-collapse: collapse; margin: 0 auto; }
.companion-chart th, .companion-chart td {
  width: 44px; height: 40px; text-align: center;
  border: 1px solid rgba(138,154,140,0.25);
  font-weight: 400;
}
.companion-chart thead th { height: 108px; vertical-align: bottom; border: none; padding-bottom: 8px; }
.companion-chart thead th span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: "Sometype Mono", monospace; font-size: 0.78rem; color: var(--deep);
}
.companion-chart thead td { border: none; }
.companion-chart tbody th {
  text-align: right; padding-right: 14px; width: auto;
  font-family: "Sometype Mono", monospace; font-size: 0.78rem; color: var(--deep);
  border: none; white-space: nowrap;
}
.companion-chart td.self { color: var(--sage); background: rgba(163,177,138,0.12); }
.dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; }
.dot.d1 { background: var(--leaf); }
.dot.d2 { background: transparent; border: 2.5px solid var(--sage); }
.dot.d3 { background: transparent; border: 2.5px solid var(--clay-dk); position: relative; }
.dot.d3::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 2.5px; background: var(--clay-dk);
  transform: translate(-50%, -50%) rotate(-45deg);
}
.chart-legend {
  display: flex; gap: 28px; justify-content: center; flex-wrap: wrap;
  margin-top: 26px; font-size: 0.8rem; color: var(--text-2);
}
.chart-legend span { display: inline-flex; align-items: center; gap: 8px; }
.chart-foot { text-align: center; margin: 20px auto 0; color: var(--text-2); font-size: 0.95rem; }

/* ---------------- climate strip ---------------- */
.climate {
  background: var(--deep); color: var(--white);
  padding: 90px 0;
  background-image: repeating-linear-gradient(
    90deg, rgba(242,244,236,0.05) 0, rgba(242,244,236,0.05) 1px, transparent 1px, transparent 84px);
}
.climate .eyebrow { color: var(--sage); }
.climate .eyebrow::before { background: var(--clay); }
.climate h2 { color: var(--white); }
.gauge-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  margin-top: 54px;
}
.gauge { text-align: center; }
.gauge svg { width: min(150px, 80%); height: auto; overflow: visible; }
.g-arc { fill: none; stroke: rgba(242,244,236,0.35); stroke-width: 2; }
.g-ticks path { stroke: rgba(242,244,236,0.45); stroke-width: 1.5; }
.g-needle {
  stroke: var(--clay); stroke-width: 2.5; stroke-linecap: round;
  transform-box: view-box; transform-origin: 60px 66px;
  transform: rotate(var(--deg, 0deg));
}
.js-anim .g-needle { animation: needlesway 6s ease-in-out infinite alternate; }
@keyframes needlesway {
  from { transform: rotate(calc(var(--deg, 0deg) - 1.2deg)); }
  to   { transform: rotate(calc(var(--deg, 0deg) + 1.2deg)); }
}
.g-hub { fill: var(--clay); }
.gauge figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.g-name { font-size: 0.72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sage); }
.g-val { font-family: "Lustria", serif; font-size: 1.9rem; }
.g-val small { font-size: 1.1rem; color: var(--sage); }
.climate-foot { margin-top: 48px; font-size: 0.78rem; color: var(--sage); letter-spacing: .04em; }

/* ---------------- seed packets ---------------- */
.prices { padding: 120px 0; }
.packet-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  margin-top: 52px; align-items: stretch;
}
.packet {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 30px 28px 26px;
  display: flex; flex-direction: column;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
/* seed-packet sawtooth top edge */
.packet::before {
  content: "";
  position: absolute; left: -1px; right: -1px; top: -7px; height: 8px;
  background: var(--paper);
  clip-path: polygon(0 100%, 2.5% 0, 5% 100%, 7.5% 0, 10% 100%, 12.5% 0, 15% 100%, 17.5% 0, 20% 100%, 22.5% 0, 25% 100%, 27.5% 0, 30% 100%, 32.5% 0, 35% 100%, 37.5% 0, 40% 100%, 42.5% 0, 45% 100%, 47.5% 0, 50% 100%, 52.5% 0, 55% 100%, 57.5% 0, 60% 100%, 62.5% 0, 65% 100%, 67.5% 0, 70% 100%, 72.5% 0, 75% 100%, 77.5% 0, 80% 100%, 82.5% 0, 85% 100%, 87.5% 0, 90% 100%, 92.5% 0, 95% 100%, 97.5% 0, 100% 100%);
}
.packet:hover { transform: translateY(-6px) rotate(-0.4deg); box-shadow: 0 14px 30px rgba(52,78,65,.12); }
.packet-mid { border-color: var(--clay); }
.packet-mid::before { background: var(--clay); }
.packet-art {
  height: 86px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 3px;
  background: rgba(163,177,138,0.1);
  margin-bottom: 18px;
}
.packet-art svg { width: 92px; height: 70px; }
.packet-kind { font-size: 0.7rem; letter-spacing: .14em; color: var(--clay-dk); }
.packet h3 { font-size: 1.5rem; margin: 6px 0 2px; }
.packet-sub { color: var(--text-2); font-size: 0.94rem; margin-bottom: 14px; }
.packet-price { font-size: 1.02rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; margin-bottom: 14px; }
.packet-price .mono { color: var(--leaf); font-weight: 500; }
.packet ul { list-style: none; flex: 1; }
.packet li { padding: 5px 0 5px 22px; position: relative; font-size: 0.95rem; color: var(--text-2); }
.packet li::before {
  content: ""; position: absolute; left: 2px; top: 12px;
  width: 10px; height: 10px;
  background: var(--sage);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); /* seed shape */
}
.packet-germ { margin-top: 16px; font-size: 0.74rem; color: var(--text-2); letter-spacing: .06em; }

/* ---------------- garden walk ---------------- */
.walk { padding: 120px 0 130px; background: rgba(163,177,138,0.14); border-top: 1px solid var(--line); }
.walk-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px; align-items: start;
}
.walk-copy p { margin-top: 16px; }
.walk-honest { font-style: italic; color: var(--text-2); }
.walk-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--steel);
  border-radius: 6px;
  padding: 30px 32px 24px;
  box-shadow: 0 1px 0 var(--line), 0 18px 40px rgba(52,78,65,.1);
}
/* appointment-card corner notches */
.walk-card::before, .walk-card::after {
  content: ""; position: absolute; top: 50%; width: 16px; height: 16px;
  background: rgba(163,177,138,0.32); border: 1px solid var(--steel);
  border-radius: 50%; transform: translateY(-50%);
}
.walk-card::before { left: -9px; }
.walk-card::after { right: -9px; }
.card-head {
  font-size: 0.72rem; letter-spacing: .16em; color: var(--clay-dk);
  text-align: center; margin-bottom: 22px;
  padding-bottom: 14px; border-bottom: 1px dashed var(--line);
}
.field { margin-bottom: 16px; }
.field label {
  display: block; font-family: "Sometype Mono", monospace;
  font-size: 0.74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-2); margin-bottom: 6px;
}
.field input, .field textarea {
  width: 100%;
  font-family: "Karla", sans-serif; font-size: 1rem; color: var(--deep);
  background: var(--white);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 11px 12px;
  transition: border-color .15s;
}
.field input:focus, .field textarea:focus { border-color: var(--leaf); outline: 2px solid var(--leaf); outline-offset: 1px; }
.field ::placeholder { color: #97A192; opacity: 1; }
.card-foot {
  margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line);
  font-size: 0.7rem; text-align: center; color: var(--text-2); letter-spacing: .06em;
}
.walk-done { text-align: center; padding: 18px 6px 8px; }
.done-head { font-family: "Lustria", serif; font-size: 1.6rem; margin-bottom: 10px; }
.walk-done p:not(.done-head) { color: var(--text-2); }
.walk-card.is-done .field, .walk-card.is-done .btn, .walk-card.is-done .card-foot { display: none; }

/* ---------------- footer ---------------- */
.site-foot { background: var(--deep); color: var(--white); }
.foot-roofline { display: block; width: 100%; height: 60px; background: #E7EBDE; }
.site-foot .foot-grid {
  display: grid; grid-template-columns: 1.2fr 0.7fr 1.1fr; gap: 56px;
  padding-top: 64px; padding-bottom: 48px;
}
.foot-brand { font-family: "Lustria", serif; font-size: 1.4rem; margin-bottom: 10px; }
.foot-line { color: var(--sage); font-size: 0.96rem; }
.foot-mail { margin-top: 16px; font-size: 0.88rem; }
.foot-mail a { color: var(--clay); text-decoration-color: rgba(221,161,94,.5); }
.foot-nav { display: flex; flex-direction: column; gap: 9px; }
.foot-nav a { color: var(--white); text-decoration: none; font-size: 0.95rem; opacity: .85; }
.foot-nav a:hover { opacity: 1; text-decoration: underline; text-decoration-color: var(--clay); }
.foot-note { font-size: 0.78rem; color: var(--sage); line-height: 1.8; }
.credit {
  text-align: center; padding: 22px 32px 26px;
  border-top: 1px solid rgba(242,244,236,0.14);
  font-size: 0.78rem; color: var(--sage);
  max-width: none;
}
.credit a { color: var(--sage); }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 1080px) {
  .bench-row { gap: 14px; }
  .prune-grid { gap: 40px; }
}

@media (max-width: 880px) {
  .site-nav { display: none; }
  .glasshouse { display: none; } /* slice-zoom puts rooflines through the headline */
  .hero-inner { grid-template-columns: 1fr; padding-top: 64px; }
  .hero-plant { justify-self: start; }
  .hero-plant .plant { width: 190px; }

  /* bench: stacked, grow-on-enter */
  .js-scrub .bench-section { height: auto; }
  .js-scrub .bench-stage { position: static; height: auto; display: block; overflow: visible; padding-bottom: 56px; }
  .bench-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .legend { text-align: left; }
  .season { display: none !important; }
  .mist-pipe { margin-top: 40px; }
  .pipe-label { display: none; } /* collides with the countdown at narrow widths */
  .bench-row { grid-template-columns: 1fr; gap: 64px; max-width: 480px; }
  .plant-unit figcaption { padding-top: 32px; }
  .js-scrub .plant-unit figcaption { opacity: 1; }
  .plot { max-width: 260px; margin: 0 auto; width: 100%; }
  .plot::after { display: none; } /* no legs between stacked shelves */

  .death-grid { grid-template-columns: 1fr; gap: 32px; }
  .prune-grid { grid-template-columns: 1fr; }
  .prune-scene { max-width: 480px; }
  .ledger-grid { grid-template-columns: 1fr; max-width: 480px; }
  .gauge-row { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
  .packet-grid { grid-template-columns: 1fr; max-width: 420px; }
  .walk-grid { grid-template-columns: 1fr; gap: 48px; }
  .site-foot .foot-grid { grid-template-columns: 1fr; gap: 36px; }

  .cron-row { grid-template-columns: 1fr; gap: 2px; padding: 14px 20px; }
  .cron-eta { text-align: left; }
}

@media (max-width: 420px) {
  .wrap { padding: 0 20px; }
  .site-head { padding: 12px 20px; gap: 12px; }
  .brand-name span { display: none; }
  .head-cta { margin-left: auto; font-size: 0.88rem; padding: 8px 14px; }
  .hero-inner { padding: 48px 20px 56px; }
  .lede { font-size: 1.05rem; }
  .companion-chart th, .companion-chart td { width: 34px; height: 32px; }
  .dot { width: 11px; height: 11px; }
  .dot.d3::after { width: 9px; }
  .companion-chart tbody th { font-size: 0.68rem; padding-right: 8px; }
  .companion-chart thead th span { font-size: 0.68rem; }
  .companion-chart thead th { height: 88px; }
  .prune-label { position: static; max-width: none; margin-top: 12px; }
  .walk-card { padding: 24px 20px 20px; }
}

/* ============================================================
   reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .btn, .packet { transition: none; }
  .btn:hover, .packet:hover { transform: none; }
  .js-anim .g-needle { animation: none; }
  .misting .mist { animation: none; opacity: 0; }
  .misting .rainbow { opacity: 0; }
  .js-anim .glasshouse .draw { stroke-dashoffset: 0 !important; stroke-dasharray: none !important; transition: none; }
  .plant-unit figcaption { transition: none; }
  .js-anim .plant-unit .p-growth, .js-anim .hero-plant .p-growth { animation: none; }
}