:root {
  color-scheme: light;
  --cream: #EAF4F0;
  --cream-2: #F7FBF8;
  --parch: #D5E8DF;
  --soil: #153B3A;
  --ink: #183532;
  --ink-2: #42615C;
  --muted: #829A92;
  --line: rgba(24, 53, 50, .14);
  --line-strong: rgba(24, 53, 50, .30);
  --moss: #087F78;
  --moss-2: #075C58;
  --sage: #76C8B4;
  --fern: #35A995;
  --copper: #E56B50;
  --copper-2: #F49A79;
  --terra: #D84E72;
  --leaf: #D5B84E;
  --flora: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
  --display: 'Fraunces', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
  --e: cubic-bezier(.22, .8, .28, 1);
  --spring: cubic-bezier(.3, 1.5, .5, 1);
  --sh: 0 26px 54px -32px rgba(24, 53, 50, .35)
}

[data-theme="dark"] {
  color-scheme: dark;
  --cream: #101D1D;
  --cream-2: #172827;
  --parch: #203A37;
  --soil: #091312;
  --ink: #F0F8F3;
  --ink-2: #C5DAD1;
  --muted: #91AAA0;
  --line: rgba(240, 248, 243, .14);
  --line-strong: rgba(240, 248, 243, .28);
  --moss: #55CFC0;
  --moss-2: #83E0D1;
  --sage: #286E67;
  --fern: #76D5C1;
  --copper: #FF9476;
  --copper-2: #FFB59A;
  --terra: #F07891;
  --leaf: #E9CC70;
  --flora: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
  --sh: 0 26px 54px -32px rgba(0, 0, 0, .7)
}
* { box-sizing: border-box }

html { scroll-behavior: smooth; scroll-padding-top: 86px }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .4s, color .4s
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .35;
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 22px 22px
}

a { color: inherit; text-decoration: none }
button, input, select, textarea { font: inherit; color: inherit }
button { cursor: pointer; background: none; border: 0; padding: 0 }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; letter-spacing: -.012em; line-height: 1.04 }
p, ul, ol, figure { margin: 0 }
ul, ol { padding: 0; list-style: none }
::selection { background: var(--copper); color: var(--cream) }
::-webkit-scrollbar { width: 11px; height: 11px }
::-webkit-scrollbar-track { background: var(--cream-2) }
::-webkit-scrollbar-thumb { background: var(--moss); border: 2px solid var(--cream-2); border-radius: 99px }
:focus-visible { outline: 3px solid var(--copper); outline-offset: 3px }

.skip {
  position: fixed;
  top: -4rem;
  left: 1rem;
  z-index: 3000;
  background: var(--ink);
  color: var(--cream);
  padding: .6rem 1rem;
  border-radius: 6px
}
.skip:focus { top: 1rem }

.wrap { width: min(1220px, 100% - 2rem); margin: 0 auto }

/* ══════ BUTTONS ══════ */
.btn-a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .82rem 1.4rem;
  border-radius: 999px;
  background: var(--moss);
  color: var(--cream);
  font-weight: 600;
  font-size: .88rem;
  border: 1px solid var(--moss);
  transition: transform .3s var(--e), box-shadow .3s, background .3s, border-color .3s;
  line-height: 1.2;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .08)
}
.btn-a:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -10px var(--moss); color: var(--cream) }
.btn-a.copper { background: var(--copper); border-color: var(--copper); color: var(--cream) }
.btn-a.copper:hover { background: var(--copper-2); border-color: var(--copper-2); color: var(--cream) }
.btn-a.ghost { background: transparent; color: var(--ink); border-color: var(--line-strong) }
.btn-a.ghost:hover { border-color: var(--moss); color: var(--moss) }
.btn-a.sm { padding: .55rem 1rem; font-size: .8rem; box-shadow: none }

/* ══════ LABELS ══════ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 1rem
}
.eyebrow svg { width: 18px; height: 18px; color: var(--leaf) }
.eyebrow.c { justify-content: center }

/* ══════ NAV ══════ */
.nav {
  position: fixed;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: .8rem;
  height: 58px;
  padding: 0 1rem;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--sh)
}
.logo {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap
}
.logo svg { width: 28px; height: 28px; color: var(--moss) }
.nlinks { display: flex; gap: .1rem; margin: 0 auto }
.nlinks a {
  padding: .45rem .8rem;
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 500;
  color: var(--muted);
  transition: all .25s;
  white-space: nowrap
}
.nlinks a:hover { color: var(--ink) }
.nlinks a.on { color: var(--moss); background: color-mix(in srgb, var(--moss) 10%, transparent) }
.nright { display: flex; align-items: center; gap: .5rem }
.lswitch {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}
.lswitch button { padding: .4rem .65rem; transition: .2s }
.lswitch button.on { background: var(--moss); color: var(--cream) }
.theme {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--parch);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: .95rem;
  transition: .35s
}
.theme:hover { transform: rotate(360deg); background: var(--copper); color: var(--cream) }
.burger {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--parch);
  color: var(--ink);
  place-items: center;
  font-size: 1.05rem
}
.mnav {
  display: none;
  position: fixed;
  inset: 80px 14px 14px;
  z-index: 1090;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 1rem;
  overflow: auto
}
.mnav.open { display: grid; gap: .3rem }
.mnav a { padding: .8rem 1rem; border-radius: 12px; font-weight: 600; color: var(--ink) }
.mnav a:hover { background: var(--parch) }

@media(max-width:980px) {
  .nlinks { display: none }
  .burger { display: grid }
}
@media(max-width:560px) {
  .lswitch span { display: none }
}

/* ══════ WING STRIP ══════ */
.wingstrip { background: var(--moss); color: var(--cream); padding: .55rem 0; overflow: hidden; position: relative }
.wingstrip-track { display: flex; gap: 2.6rem; width: max-content; animation: wingmove 40s linear infinite }
.wingstrip-track span {
  font-family: var(--display);
  font-style: italic;
  font-size: 1rem;
  color: var(--cream);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 2.6rem
}
.wingstrip-track span b { font-style: normal; color: var(--copper-2); font-size: .8rem }
@keyframes wingmove { to { transform: translateX(-50%) } }

/* ══════ SECTIONS ══════ */
main { padding-top: 86px }
.sec { position: relative; padding: clamp(3.5rem, 7vw, 6rem) 0 }
.sec.alt { background: var(--cream-2) }
.sh { max-width: 680px; margin-bottom: 1.8rem }
.sh h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); margin-top: .4rem }
.sh h2 em { font-style: italic; color: var(--copper) }
.sh p { color: var(--muted); margin-top: .6rem; font-size: 1.02rem }

/* ══════ HERO ══════ */
.hero { position: relative; padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden }
.hero::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--leaf) 18%, transparent), transparent 70%);
  pointer-events: none
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center
}
@media(max-width:960px) { .hero-grid { grid-template-columns: 1fr } }
.hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.5rem); margin: .8rem 0 1rem; letter-spacing: -.025em }
.hero h1 em { font-style: italic; color: var(--copper) }
.hero .lede { font-size: 1.08rem; color: var(--muted); max-width: 46ch }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0 1.2rem }
.chips { display: flex; flex-wrap: wrap; gap: .4rem }
.chips span,
.chips li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: color-mix(in srgb, var(--leaf) 10%, var(--cream));
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .4rem .85rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-2)
}
.chips span::before,
.chips li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--leaf) }

/* soil meter */
.meter-card {
  background: var(--parch);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  padding: 1.3rem 1.3rem 1.2rem;
  position: relative;
  box-shadow: var(--sh)
}
.meter-card::before {
  content: "";
  position: absolute;
  top: 6px; left: 6px; right: 6px; bottom: 6px;
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  pointer-events: none
}
.meter-card .mc-head { display: flex; justify-content: space-between; align-items: center; gap: .7rem; margin-bottom: .9rem }
.meter-card h3 { font-family: var(--display); font-size: 1.1rem; font-weight: 600 }
.meter-card .state { font-family: var(--display); font-style: italic; color: var(--copper); font-size: .88rem }
.meter-ctl { margin-bottom: .7rem }
.meter-ctl label {
  display: flex;
  justify-content: space-between;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .35rem
}
.meter-ctl output { color: var(--ink); font-variant-numeric: tabular-nums }
.meter-range { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: transparent }
.meter-range::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--terra) 0 30%, var(--copper) 30% 60%, var(--leaf) 60% 100%);
  box-shadow: inset 0 0 0 1px var(--line)
}
.meter-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--line-strong);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .15);
  cursor: ew-resize
}
.meter-range::-moz-range-track {
  height: 10px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--terra) 0 30%, var(--copper) 30% 60%, var(--leaf) 60% 100%);
  box-shadow: inset 0 0 0 1px var(--line)
}
.meter-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--cream); border: 1px solid var(--line-strong) }

.vines { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; overflow: hidden }
.vines svg { position: absolute; width: 100%; height: 100% }
.vine-path {
  fill: none;
  stroke: var(--leaf);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: drawvine 2.8s var(--e) forwards
}
.vine-path.v2 { animation-delay: .3s }
.vine-path.v3 { animation-delay: .6s }
.vine-path.v4 { animation-delay: .9s }
@keyframes drawvine { to { stroke-dashoffset: 0 } }
.leaf-dot { fill: var(--leaf); opacity: 0; animation: popin .5s var(--spring) forwards }
@keyframes popin {
  from { opacity: 0; transform: scale(0) }
  to { opacity: 1; transform: scale(1) }
}

.hero-bot {
  position: relative;
  aspect-ratio: 420/360;
  background: var(--parch);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--sh);
  margin-top: 1rem
}
.hero-bot svg { position: absolute; inset: 0; width: 100%; height: 100% }
.hero-bot .tag {
  position: absolute;
  top: .8rem;
  left: 1rem;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--copper);
  display: flex;
  align-items: center;
  gap: .4rem;
  z-index: 2
}
.hero-bot .tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--leaf) }
.hero-bot svg text { font-family: var(--sans); font-size: 10px; font-weight: 600; fill: var(--muted) }
.hero-bot svg .room-label { font-family: var(--display); font-size: 13px; font-weight: 600; fill: var(--ink) }
.hero-bot svg .room-label.it { font-style: italic }
.room-group { cursor: pointer; outline: none }
.room-group .room { transition: fill .3s var(--e) }
.room-group:hover .room,
.room-group:focus-visible .room { fill: color-mix(in srgb, var(--copper) 28%, var(--cream-2)) }
.room-group.on .room { fill: var(--leaf) }
.room-group.on .room-label { fill: var(--cream) }
.room-group.on text:not(.room-label) { fill: var(--cream) }
.bloom { fill: var(--terra); opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center }
.room-group.on .bloom { animation: bloomin .8s var(--spring) forwards }
@keyframes bloomin {
  0% { opacity: 0; transform: scale(0) rotate(-20deg) }
  60% { opacity: 1; transform: scale(1.1) rotate(5deg) }
  100% { opacity: 1; transform: scale(1) rotate(0) }
}
.bloom.b2 { fill: var(--copper-2); animation-delay: .15s }
.bloom.b3 { fill: var(--sage); animation-delay: .3s }
.plant-stem { stroke: var(--leaf); stroke-width: 1.5; fill: none; stroke-linecap: round }
.plant-leaf { fill: var(--leaf); transform-box: fill-box; transform-origin: center bottom }
.hero-bot .ground { fill: var(--soil); opacity: .35 }
[data-theme="dark"] .hero-bot .ground { opacity: .55 }
.hero-bot .health-ring { fill: none; stroke-width: 3 }
.health-txt { font-family: var(--display); font-size: 11px; font-weight: 600; fill: var(--ink) }

/* ══════ HERBARIUM (services) ══════ */
.herb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem }
@media(max-width:960px) { .herb-grid { grid-template-columns: repeat(2, 1fr) } }
@media(max-width:600px) { .herb-grid { grid-template-columns: 1fr } }
.specimen {
  background: var(--parch);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.4rem;
  position: relative;
  box-shadow: var(--sh);
  cursor: pointer;
  transition: transform .4s var(--e), box-shadow .4s, border-color .3s
}
.specimen::before {
  content: "";
  position: absolute;
  top: 6px; left: 6px; right: 6px; bottom: 6px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  pointer-events: none
}
.specimen:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 30px 60px -32px rgba(31, 46, 37, .5); border-color: var(--copper) }
.specimen.on { border-color: var(--moss); background: var(--cream) }
.specimen .cat {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--copper);
  background: var(--cream);
  padding: .2rem .5rem;
  border-radius: 3px;
  border: 1px solid var(--line)
}
.specimen .latin { font-family: var(--display); font-style: italic; font-size: .78rem; color: var(--muted); margin-top: .6rem; display: block }
.specimen .em { font-size: 2.2rem; display: block; line-height: 1; margin-top: .8rem }
.specimen h3 { font-family: var(--display); font-size: 1.15rem; margin: .4rem 0 .3rem; font-weight: 600 }
.specimen .sub { font-size: .78rem; color: var(--muted); font-weight: 500 }
.specimen p { font-size: .84rem; color: var(--ink-2); margin-top: .7rem; line-height: 1.55 }
.specimen .ask { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700; color: var(--moss); margin-top: .8rem }
.specimen .ask i { transition: transform .3s var(--e) }
.specimen:hover .ask i { transform: translateX(3px) }

/* ══════ WHY — GROWING PRINCIPLES ══════ */
.princ { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem }
@media(max-width:960px) { .princ { grid-template-columns: repeat(2, 1fr) } }
@media(max-width:600px) { .princ { grid-template-columns: 1fr } }
.principle {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem 1.3rem;
  position: relative;
  box-shadow: var(--sh)
}
.principle .stem {
  position: absolute;
  top: 1.3rem;
  left: 1.2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--leaf) 15%, var(--parch));
  display: grid;
  place-items: center;
  font-size: 1.4rem
}
.principle .bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--leaf), var(--copper));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s var(--e)
}
.principle.in .bar { transform: scaleX(1) }
.principle h3 { font-family: var(--display); font-size: 1.12rem; margin: 3.4rem 0 .4rem; font-weight: 600 }
.principle p { font-size: .9rem; color: var(--muted) }

/* ══════ PROPERTY SECTIONS ══════ */
.room-tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start }
@media(max-width:920px) { .room-tool { grid-template-columns: 1fr } }
.panel-i {
  background: var(--parch);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.5rem;
  position: relative;
  box-shadow: var(--sh)
}
.panel-i::before {
  content: "";
  position: absolute;
  top: 7px; left: 7px; right: 7px; bottom: 7px;
  border: 1px dashed var(--line-strong);
  border-radius: 11px;
  pointer-events: none
}
.panel-i .lede { font-size: .98rem; color: var(--ink-2); margin: 0 0 .9rem }
.ticks { position: relative }
.ticks li { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; padding: .3rem 0; color: var(--ink-2) }
.ticks li::before {
  content: "✓";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--leaf);
  color: var(--cream);
  font-size: .62rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  margin-top: .28rem;
  flex: 0 0 auto
}
.panel-i .btn-a { margin-top: 1rem; position: relative; z-index: 1 }

.tool {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--sh);
  position: relative
}
.tool::before {
  content: "";
  position: absolute;
  top: 6px; left: 6px; right: 6px; bottom: 6px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  pointer-events: none;
  z-index: 1
}
.tool-h {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  padding: .8rem 1.1rem;
  background: var(--moss);
  color: var(--cream);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  position: relative;
  z-index: 2
}
.tool-h span { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: .82rem; color: color-mix(in srgb, var(--cream) 75%, var(--moss)) }
.tool-b { padding: 1.2rem 1.15rem 1.4rem }
.q { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 1rem 0 .5rem }
.q:first-child { margin-top: 0 }
.chips2 { display: flex; flex-wrap: wrap; gap: .4rem }
.chip {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: .55rem .9rem;
  font-size: .84rem;
  font-weight: 600;
  background: var(--parch);
  transition: .2s;
  text-align: left;
  color: var(--ink)
}
.chip:hover { border-color: var(--copper); background: var(--cream) }
.chip.on { background: var(--moss); color: var(--cream); border-color: var(--moss) }
.verdict {
  margin-top: .9rem;
  border-radius: 12px;
  padding: .9rem 1rem;
  background: var(--parch);
  border-left: 4px solid var(--copper);
  font-size: .9rem;
  color: var(--ink-2)
}
.verdict b { display: block; font-size: 1rem; margin-bottom: .2rem; color: var(--ink) }
.verdict.good { border-color: var(--leaf) }
.verdict.skip { border-color: var(--terra) }
.tool-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; margin-top: .9rem; font-size: .8rem; color: var(--muted) }

/* insurance match */
.match { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1.2rem }
.mcol h4 { font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem }
.mbtn {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: .6rem .85rem;
  font-size: .82rem;
  background: var(--parch);
  margin-bottom: .45rem;
  transition: .2s;
  position: relative;
  line-height: 1.35;
  color: var(--ink)
}
.mbtn.term { font-weight: 700 }
.mbtn:hover { border-color: var(--copper) }
.mbtn.sel { border-color: var(--copper); box-shadow: inset 0 0 0 1px var(--copper) }
.mbtn.done {
  border-style: dashed;
  border-color: var(--leaf);
  background: color-mix(in srgb, var(--leaf) 12%, var(--cream));
  color: var(--muted);
  cursor: default
}
.mbtn.done::after { content: "✓"; position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); color: var(--leaf); font-weight: 800 }
.mbtn.bad { animation: shake .4s }
@keyframes shake {
  25% { transform: translateX(-4px) }
  75% { transform: translateX(4px) }
}

/* real estate triage */
.pool { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 2.6rem }
.bins { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: .9rem }
.bin { border: 1px dashed var(--line-strong); border-radius: 12px; padding: .7rem; min-height: 130px; background: var(--parch) }
.bin h4 { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .45rem; display: flex; justify-content: space-between; gap: .4rem }
.bin.fine h4 { color: var(--leaf) }
.bin.neg h4 { color: var(--copper) }
.bin.chk h4 { color: var(--terra) }
.bin .chip { display: block; width: 100%; margin-bottom: .35rem; font-size: .78rem; padding: .42rem .55rem }
.bin small { display: block; color: var(--muted); font-size: .74rem; margin-top: .3rem; line-height: 1.4 }
.bin .em { color: var(--muted); font-size: .78rem; font-style: italic }

/* mortgage */
.seg2 { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; margin-bottom: .9rem }
.seg2 button { padding: .45rem .9rem; font-size: .8rem; font-weight: 700; color: var(--muted); transition: .2s }
.seg2 button.on { background: var(--moss); color: var(--cream) }
.dim2 { margin: .4rem 0 .8rem }
.dim2 label { display: flex; justify-content: space-between; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .25rem }
.dim2 output { color: var(--ink); font-variant-numeric: tabular-nums }
.dim2 input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; background: transparent; margin: 0 }
.dim2 input::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: var(--parch); box-shadow: inset 0 0 0 1px var(--line) }
.dim2 input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--copper);
  border: 1px solid var(--line);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .15)
}
.dim2 input::-moz-range-track { height: 6px; border-radius: 99px; background: var(--parch); box-shadow: inset 0 0 0 1px var(--line) }
.dim2 input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--copper); border: 1px solid var(--line) }
.band-out { margin-top: .6rem; background: var(--parch); border-radius: 12px; padding: .9rem 1rem; font-size: .9rem; color: var(--ink-2); border-left: 4px solid var(--copper) }
.band-out b { font-size: 1.1rem; display: block; margin-bottom: .25rem; color: var(--ink) }
.bring { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem }
.bring span { font-size: .72rem; font-weight: 700; border: 1px solid var(--line); border-radius: 999px; padding: .25rem .6rem; background: var(--cream); color: var(--ink) }

/* ══════ GUESTBOOK ══════ */
.guestbook { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem }
@media(max-width:960px) { .guestbook { grid-template-columns: repeat(2, 1fr) } }
@media(max-width:600px) { .guestbook { grid-template-columns: 1fr } }
.entry {
  position: relative;
  background: var(--parch);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem 1.3rem 1.2rem;
  box-shadow: var(--sh);
  transform: rotate(var(--r, 0deg));
  transition: transform .35s var(--spring)
}
.entry::before {
  content: "";
  position: absolute;
  top: 6px; left: 6px; right: 6px; bottom: 6px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  pointer-events: none
}
.entry:hover { transform: rotate(0) translateY(-4px) }
.entry .e { font-family: var(--display); font-style: italic; font-size: .8rem; color: var(--copper) }
.entry .who { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem }
.entry .av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--cream);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  border: 1px solid var(--line);
  flex: 0 0 auto
}
.entry .who b { display: block; font-size: .9rem }
.entry .who span { font-size: .74rem; color: var(--muted) }
.entry .stars { color: var(--copper-2); letter-spacing: .12em; font-size: .85rem; margin-bottom: .5rem }
.entry q { font-family: var(--display); font-size: .95rem; line-height: 1.55; quotes: "\201C" "\201D"; color: var(--ink) }
.entry .job { display: inline-block; margin-top: .7rem; font-family: var(--display); font-style: italic; font-size: .72rem; color: var(--copper) }

/* ══════ FAQ — GARDEN ALMANAC ══════ */
.almanac { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; align-items: start }
@media(max-width:820px) { .almanac { grid-template-columns: 1fr } }
.fq { border-top: 1px solid var(--line) }
.fq:last-child { border-bottom: 1px solid var(--line) }
.fqb {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .8rem;
  align-items: center;
  text-align: left;
  padding: .95rem .2rem;
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ink)
}
.fqb .n { font-size: .62rem; font-weight: 700; letter-spacing: .14em; color: var(--copper); font-family: var(--sans) }
.fqb .adj {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--parch);
  display: grid;
  place-items: center;
  font-size: .7rem;
  transition: .4s var(--spring);
  color: var(--moss)
}
.fq.open .adj { background: var(--moss); color: var(--cream); transform: rotate(45deg) }
.fqa { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--e) }
.fq.open .fqa { grid-template-rows: 1fr }
.fqa-in { position: relative; padding: 0 .2rem 1.1rem 2.4rem; font-size: .9rem; color: var(--muted) }
.fqa-in::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(var(--leaf), var(--copper));
  opacity: .5;
  border-radius: 4px
}
.fqa-in .tg { display: inline-block; font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--copper); margin-bottom: .3rem }

/* ══════ FORMS ══════ */
.lb { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem }
.fi {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--parch);
  color: var(--ink);
  padding: .72rem .85rem;
  margin-bottom: .85rem;
  transition: border-color .2s, box-shadow .2s
}
.fi:focus { outline: none; border-color: var(--copper); box-shadow: 0 0 0 3px color-mix(in srgb, var(--copper) 22%, transparent) }
select.fi {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0h10L5 6z' fill='%23B87333'/></svg>");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2rem
}
select.fi option { color: var(--ink); background: var(--parch) }
textarea.fi { min-height: 110px; resize: vertical }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .9rem }
@media(max-width:540px) { .two { grid-template-columns: 1fr } }
.chk { display: flex; gap: .6rem; align-items: flex-start; font-size: .82rem; color: var(--muted); margin: .1rem 0 1rem }
.chk input { width: 17px; height: 17px; margin-top: .2rem; accent-color: var(--moss); flex: 0 0 auto }
.ok { display: none; margin-top: .8rem; border: 1px dashed var(--leaf); border-radius: 10px; padding: .65rem .85rem; font-size: .84rem; font-weight: 700; color: var(--leaf) }
.ok.on { display: block; animation: popin .4s var(--spring) }
.unsub { font-size: .82rem; color: var(--muted); margin-top: .8rem }
.unsub button,
.unsub a { color: var(--copper); font-weight: 700; text-decoration: underline; text-underline-offset: 3px }

/* ══════ NEWSLETTER ══════ */
.seed-pouch { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.4rem; align-items: start }
@media(max-width:920px) { .seed-pouch { grid-template-columns: 1fr } }
.pouch {
  position: relative;
  background: var(--parch);
  border: 1px solid var(--line);
  border-radius: 6px 6px 16px 16px;
  padding: 2rem 1.4rem 1.4rem;
  box-shadow: var(--sh)
}
.pouch::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: inset 0 0 0 2px var(--line-strong)
}
.pouch h3 { font-family: var(--display); font-size: 1.1rem; margin: .3rem 0 .9rem }
.pouch li { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem 0; border-top: 1px dashed var(--line); font-size: .88rem; color: var(--ink-2) }
.pouch li:first-child { border-top: 0 }
.pouch li i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--leaf);
  color: var(--cream);
  display: grid;
  place-items: center;
  font-size: .62rem;
  flex: 0 0 auto;
  margin-top: .15rem
}
.pouch b { display: block; color: var(--ink) }
.pouch span { color: var(--muted); font-size: .84rem }

/* ══════ CONTACT ══════ */
.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.4rem; align-items: start }
@media(max-width:920px) { .contact-grid { grid-template-columns: 1fr } }
.info li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  padding: .7rem 0;
  border-top: 1px dashed var(--line);
  font-size: .9rem;
  align-items: start
}
.info li:first-child { border-top: 0; padding-top: 0 }
.info .e {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--parch);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  border: 1px solid var(--line);
  flex: 0 0 auto
}
.info b { display: block; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700 }
.info a:hover { color: var(--copper) }
.map-botanic { margin-top: 1rem; border-radius: 14px; overflow: hidden; position: relative; background: var(--parch); border: 1px solid var(--line) }
.map-botanic svg { display: block; width: 100%; height: auto }
.map-botanic span {
  position: absolute;
  left: .7rem;
  bottom: .6rem;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .25rem .55rem
}

/* ══════ FOOTER ══════ */
footer { background: var(--moss); color: var(--cream); padding: 3rem 0 1.4rem; position: relative }
footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--copper), var(--copper-2), var(--copper))
}
.fgrid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2rem }
footer h5 { font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--copper-2); margin: 0 0 .8rem }
footer a { display: block; font-size: .88rem; opacity: .85; padding: .15rem 0; transition: .2s }
footer a:hover { opacity: 1; color: var(--copper-2) }
footer p { font-size: .88rem; opacity: .85 }
.flogo { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--display); font-size: 1.2rem; font-weight: 600; color: var(--cream); margin-bottom: .8rem }
.flogo svg { width: 26px; height: 26px; color: var(--copper-2) }
.soc { display: flex; gap: .45rem; margin-top: .9rem }
.soc a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--cream) 32%, transparent);
  display: grid;
  place-items: center;
  padding: 0;
  opacity: 1
}
.soc a:hover { background: var(--copper); color: var(--cream); border-color: var(--copper) }
.fbot {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--cream) 22%, transparent);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem;
  font-size: .8rem;
  opacity: .85
}
.fbot button,
.fbot a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; display: inline; padding: 0 }
.fbot button:hover,
.fbot a:hover { color: var(--copper-2); opacity: 1 }

/* ══════ INNER PAGES ══════ */
.legal-wrap {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  background: var(--parch);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.8rem 1.6rem;
  box-shadow: var(--sh)
}
.legal-wrap::before {
  content: "";
  position: absolute;
  top: 7px; left: 7px; right: 7px; bottom: 7px;
  border: 1px dashed var(--line-strong);
  border-radius: 11px;
  pointer-events: none
}
.legal-wrap .leg { position: relative; z-index: 1 }
.legal-note { max-width: 860px; margin: 1rem auto 0; font-size: .82rem; color: var(--muted); text-align: center }
.narrow { max-width: 620px; margin: 0 auto }
.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  background: var(--moss);
  color: var(--cream);
  border-radius: 18px;
  padding: 1.7rem 1.8rem;
  box-shadow: var(--sh);
  margin-top: 2.4rem
}
.cta-band h3 { font-family: var(--display); font-size: clamp(1.2rem, 2.4vw, 1.6rem); margin: 0 0 .3rem; color: var(--cream) }
.cta-band p { font-size: .9rem; opacity: .85; margin: 0 }

/* ══════ LEGAL (also used in modals) ══════ */
.leg { padding: .85rem 0; border-bottom: 1px dashed var(--line) }
.leg:last-child { border-bottom: 0 }
.leg h6 { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--copper); margin: 0 0 .3rem }
.leg p { font-size: .9rem; color: var(--muted) }

/* ══════ MODAL (kept for compatibility) ══════ */
.modal-content { background: var(--cream); color: var(--ink); border: 0; border-radius: 18px; position: relative; box-shadow: var(--sh) }
.modal-content::before {
  content: "";
  position: absolute;
  top: 7px; left: 7px; right: 7px; bottom: 7px;
  border: 1px dashed var(--line-strong);
  border-radius: 13px;
  pointer-events: none
}
.modal-header { border-bottom: 1px solid var(--line) }
.modal-title { font-family: var(--display); font-weight: 600; font-size: 1.2rem }
.modal-title small { display: block; font-family: var(--sans); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--copper); font-weight: 700; margin-bottom: .15rem }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) }

/* ══════ TOAST / TOP / REVEAL ══════ */
.toast {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translate(-50%, 10px);
  z-index: 1300;
  background: var(--moss);
  color: var(--cream);
  border-radius: 999px;
  padding: .65rem 1rem;
  font-size: .82rem;
  font-weight: 700;
  opacity: 0;
  transition: .3s var(--e);
  pointer-events: none;
  box-shadow: var(--sh);
  max-width: 86vw;
  text-align: center
}
.toast.on { opacity: 1; transform: translate(-50%, 0) }
.totop {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1200;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--copper);
  color: var(--cream);
  font-size: 1.05rem;
  display: grid;
  place-items: center;
  box-shadow: var(--sh);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: .3s var(--e)
}
.totop.on { opacity: 1; visibility: visible; transform: none }
.rv { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--e), transform .8s var(--e); transition-delay: var(--d, 0s) }
.rv.in { opacity: 1; transform: none }

@media(prefers-reduced-motion:reduce) {
  * { animation: none !important; transition: none !important }
  .rv { opacity: 1; transform: none }
}
@media(max-width:960px) {
  .contact-grid, .seed-pouch, .room-tool { grid-template-columns: 1fr }
}
@media(max-width:560px) { .fgrid { grid-template-columns: 1fr 1fr } }
@media(max-width:420px) { .fgrid { grid-template-columns: 1fr } }