/* ============================================================
   Sprigwise — AI-Powered Plant Recommendation Platform
   GEB 5114 Venture MVP · single-page app styling
   ============================================================ */

:root {
  --green-900: #14361f;
  --green-800: #1b5e20;
  --green-700: #2e7d32;
  --green-600: #388e3c;
  --green-500: #4caf50;
  --leaf:      #7cb342;
  --leaf-soft: #aed581;
  --sun:       #f6c344;
  --sky:       #4fc3f7;
  --soil:      #8d6e63;
  --bg:        #f5f7f2;
  --bg-card:   #ffffff;
  --ink:       #1f2a22;
  --ink-soft:  #4a5a50;
  --line:      #e3e9dd;
  --danger:    #d84a3c;
  --warn:      #e98a17;
  --shadow:    0 4px 18px rgba(28, 56, 33, .08);
  --shadow-lg: 0 18px 50px rgba(28, 56, 33, .16);
  --radius:    16px;
  --radius-sm: 10px;
  --maxw:      1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.2; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--green-700); }
button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }
/* keyboard focus visibility (a11y) */
:focus-visible { outline: 3px solid var(--green-600); outline-offset: 2px; border-radius: 4px; }
.opt:focus-visible, .chip:focus-visible, .fav-btn:focus-visible, .drop:focus-visible { outline: 3px solid var(--green-600); outline-offset: 2px; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---------- header ---------- */
header.site {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 18px; height: 64px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.25rem; color: var(--green-800); cursor: pointer; letter-spacing: -.01em; }
.brand .logo { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 3px 8px rgba(46,125,50,.32); display: block; }
.brand small { display:block; font-size:.6rem; font-weight:600; letter-spacing:.14em; color:var(--leaf); text-transform:uppercase; margin-top:-2px;}
.nav .spacer { flex: 1; }
.nav button.link {
  background: none; border: none; color: var(--ink-soft); font-weight: 600; font-size: .95rem;
  padding: 8px 10px; border-radius: 8px;
}
.nav button.link:hover { color: var(--green-700); background: #eef3e9; }
.nav button.link.active { color: var(--green-800); }
.badge-pro {
  font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: linear-gradient(135deg, var(--sun), #f0a92e); color: #5a3d00;
  padding: 4px 9px; border-radius: 999px; border: 1px solid #e7a92c;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 999px; font-weight: 700; font-size: .98rem;
  padding: 13px 26px; transition: transform .08s ease, box-shadow .2s, background .2s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green-700); color: #fff; box-shadow: 0 6px 16px rgba(46,125,50,.28); }
.btn-primary:hover { background: var(--green-800); }
.btn-ghost { background: #eef3e9; color: var(--green-800); }
.btn-ghost:hover { background: #e2ebd9; }
.btn-outline { background: #fff; color: var(--green-800); border: 1.5px solid var(--line); }
.btn-outline:hover { border-color: var(--leaf); }
.btn-sun { background: linear-gradient(135deg, var(--sun), #f0a92e); color: #5a3d00; box-shadow: 0 6px 16px rgba(240,169,46,.3); }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 16px; font-size: .85rem; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1200px 400px at 80% -10%, rgba(124,179,66,.22), transparent 60%),
    radial-gradient(900px 350px at 10% 0%, rgba(79,195,247,.14), transparent 55%),
    linear-gradient(180deg, #fbfdf8, var(--bg));
  padding: 64px 0 40px;
}
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); letter-spacing: -.02em; color: var(--green-900); }
.hero h1 .accent { color: var(--green-600); }
.hero .lead { font-size: 1.18rem; color: var(--ink-soft); max-width: 34ch; }
.hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.hero .stat-strip { display: flex; gap: 22px; margin-top: 28px; flex-wrap: wrap; }
.hero .stat b { display: block; font-size: 1.5rem; color: var(--green-800); }
.hero .stat span { font-size: .82rem; color: var(--ink-soft); }

.yard-card {
  background: var(--bg-card); border-radius: 22px; box-shadow: var(--shadow-lg);
  padding: 18px; transform: rotate(1.4deg); border: 1px solid var(--line);
}
.yard-card .photo {
  height: 190px; border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(246,195,68,.35), transparent 40%),
    linear-gradient(0deg, #6c9b3f, #8fc04e 55%, #bfe08a);
  position: relative; overflow: hidden;
}
.yard-card .photo .sun { position:absolute; top:14px; right:18px; font-size:2rem; filter: drop-shadow(0 0 12px rgba(246,195,68,.8)); }
.yard-card .photo .ground { position:absolute; bottom:0; left:0; right:0; height:34%; background: linear-gradient(0deg,#5d4037,#795548); }
.yard-card .scan {
  position:absolute; left:0; right:0; height:3px; background: linear-gradient(90deg, transparent, var(--leaf), transparent);
  animation: scan 2.6s ease-in-out infinite; box-shadow: 0 0 10px var(--leaf);
}
@keyframes scan { 0%,100%{ top:8%; } 50%{ top:88%; } }
.yard-card .readout { display:flex; gap:8px; margin-top:14px; }
.chip-read { flex:1; background:#f1f6ec; border:1px solid var(--line); border-radius:10px; padding:8px 10px; text-align:center; }
.chip-read b { display:block; font-size:.95rem; color:var(--green-800); }
.chip-read span { font-size:.68rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; }

/* ---------- how it works ---------- */
.section { padding: 52px 0; }
.section h2 { font-size: 1.8rem; text-align: center; color: var(--green-900); }
.section .sub { text-align: center; color: var(--ink-soft); max-width: 60ch; margin: 0 auto 34px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px; text-align: center; box-shadow: var(--shadow);
}
.step .ic { font-size: 2.2rem; margin-bottom: 10px; }
.step .n { font-size:.72rem; font-weight:800; color:var(--leaf); letter-spacing:.12em; }
.step h3 { font-size: 1.1rem; }
.step p { color: var(--ink-soft); font-size: .94rem; margin: 0; }

.feature-band { background: linear-gradient(135deg, var(--green-800), var(--green-600)); color: #fff; border-radius: 22px; padding: 34px; margin-top: 14px; }
.feature-band h2 { color: #fff; text-align: left; }
.feature-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 10px; }
.feature-grid .f { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 16px; }
.feature-grid .f .ic { font-size: 1.5rem; }
.feature-grid .f b { display:block; margin: 6px 0 3px; }
.feature-grid .f span { font-size: .85rem; opacity: .85; }

/* ---------- wizard ---------- */
.wizard { max-width: 720px; margin: 0 auto; }
.progress { display: flex; align-items: center; gap: 6px; margin-bottom: 26px; }
.progress .dot { flex:1; height: 6px; border-radius: 999px; background: var(--line); transition: background .3s; }
.progress .dot.done { background: var(--leaf); }
.progress .dot.active { background: var(--green-600); }
.step-card {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow);
}
.step-card .eyebrow { font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--leaf); }
.step-card h2 { font-size: 1.5rem; text-align:left; }
.step-card .hint { color: var(--ink-soft); font-size: .95rem; }

.drop {
  border: 2px dashed var(--leaf-soft); border-radius: 14px; background: #f6faf1;
  padding: 30px; text-align: center; transition: border-color .2s, background .2s; cursor: pointer;
}
.drop:hover, .drop.drag { border-color: var(--green-600); background: #eef6e6; }
.drop .ic { font-size: 2.6rem; }
.drop p { margin: 8px 0 0; color: var(--ink-soft); }
#yardPreview { display:none; margin-top:16px; }
#yardPreview img { width:100%; max-height: 260px; object-fit: cover; border-radius: 12px; border:1px solid var(--line); }
.analysis {
  margin-top: 14px; background: #f1f6ec; border:1px solid var(--line); border-radius: 12px; padding: 14px 16px;
}
.analysis .row { display:flex; align-items:center; gap:10px; }
.analysis .bar { flex:1; height:10px; border-radius:999px; background:#dfe7d6; overflow:hidden; }
.analysis .bar i { display:block; height:100%; background: linear-gradient(90deg, var(--sun), var(--leaf)); }
.analysis .verdict { font-weight:700; color: var(--green-800); }

.field { margin-bottom: 18px; }
.field label.lab { display:block; font-weight:700; margin-bottom:8px; font-size: .98rem; }
.field .desc { color: var(--ink-soft); font-size: .85rem; margin: -4px 0 8px; }
input[type=text], input[type=number], select {
  width:100%; padding: 13px 14px; border:1.5px solid var(--line); border-radius: 11px; font-size: 1rem; background:#fff; color:var(--ink);
}
input:focus, select:focus { outline: none; border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(124,179,66,.18); }
.zone-readout { margin-top:10px; background:#eef6e6; border:1px solid var(--leaf-soft); border-radius:11px; padding:12px 14px; display:none; }
.zone-readout.show { display:block; }
.zone-readout b { color: var(--green-800); }

.opt-grid { display: grid; gap: 10px; }
.opt-grid.cols-3 { grid-template-columns: repeat(3,1fr); }
.opt-grid.cols-2 { grid-template-columns: repeat(2,1fr); }
.opt {
  border:1.5px solid var(--line); border-radius:12px; padding:14px 12px; text-align:center; background:#fff;
  transition: all .15s; user-select:none;
}
.opt:hover { border-color: var(--leaf-soft); }
.opt.sel { border-color: var(--green-600); background:#eef6e6; box-shadow: 0 0 0 3px rgba(124,179,66,.15); }
.opt .ic { font-size: 1.5rem; display:block; }
.opt b { display:block; font-size:.92rem; margin-top:4px; }
.opt span { font-size:.74rem; color: var(--ink-soft); }

.chips { display:flex; flex-wrap:wrap; gap:9px; }
.chip {
  border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:9px 15px; font-weight:600; font-size:.9rem;
  display:inline-flex; align-items:center; gap:7px; transition: all .15s;
}
.chip:hover { border-color: var(--leaf-soft); }
.chip.sel { border-color: var(--green-600); background: var(--green-700); color:#fff; }

.wizard-nav { display:flex; justify-content: space-between; margin-top: 24px; gap: 12px; }

/* ---------- results ---------- */
.results-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom: 8px; }
.profile-pills { display:flex; flex-wrap:wrap; gap:8px; margin: 6px 0 10px; }
.pill { background:#fff; border:1px solid var(--line); border-radius:999px; padding:6px 13px; font-size:.83rem; font-weight:600; color:var(--ink-soft); }
.pill b { color: var(--green-800); }
.toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin: 14px 0 22px; }
.toolbar select { width:auto; padding:9px 12px; font-size:.9rem; }
.toolbar .count { color: var(--ink-soft); font-size:.9rem; margin-left:auto; }

.cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(290px,1fr)); gap: 18px; }
.pcard {
  background: var(--bg-card); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden;
  box-shadow: var(--shadow); display:flex; flex-direction:column; transition: transform .12s, box-shadow .2s;
}
.pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.pcard .top { position:relative; height: 118px; display:flex; align-items:center; justify-content:center; }
.pcard .emoji { font-size: 3.4rem; filter: drop-shadow(0 4px 6px rgba(0,0,0,.15)); }
/* real plant photo (Wikipedia) replaces the emoji tile when it loads */
.pcard .top.has-img { background-size: cover !important; background-position: center; }
.pcard .top.has-img .emoji { display: none; }
.pcard .top.has-img:before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.24)); }
.pcard .top.has-img .cat-tag, .pcard .top.has-img .ring { z-index: 2; }
.pcard .ring {
  position:absolute; top:12px; right:12px; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; background: conic-gradient(var(--leaf) calc(var(--p)*1%), #e7ece1 0);
}
.pcard .ring i { width:42px; height:42px; border-radius:50%; background:#fff; display:grid; place-items:center; font-weight:800; font-size:.82rem; color:var(--green-800); font-style:normal; }
.pcard .cat-tag { position:absolute; top:14px; left:14px; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; background:rgba(255,255,255,.85); padding:4px 8px; border-radius:999px; color:var(--ink-soft); }
.pcard .body { padding: 14px 16px 16px; flex:1; display:flex; flex-direction:column; }
.pcard .name { font-size: 1.12rem; font-weight:700; color:var(--green-900); }
.pcard .sci { font-style:italic; color: var(--ink-soft); font-size:.82rem; margin-bottom: 8px; }
.pcard .quick { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.pcard .q { font-size:.72rem; background:#f1f6ec; border:1px solid var(--line); border-radius:8px; padding:3px 7px; color:var(--ink-soft); }
.pcard .why { list-style:none; padding:0; margin:0 0 12px; }
.pcard .why li { font-size:.85rem; color:var(--ink); padding-left:18px; position:relative; margin-bottom:3px; }
.pcard .why li:before { content:"✓"; position:absolute; left:0; color: var(--green-600); font-weight:800; }
.pcard .why li.warn { color: var(--warn); }
.pcard .why li.warn:before { content:"⚠"; color: var(--warn); }
.pcard .actions { display:flex; gap:8px; margin-top:auto; }
.pcard .actions .btn { flex:1; }
.fav-btn { background:#fff; border:1.5px solid var(--line); border-radius:11px; width:42px; display:grid; place-items:center; font-size:1.1rem; }
.fav-btn.on { background:#fff0f0; border-color:#f3c0c0; }

/* freemium lock */
.locked { position:relative; }
.locked .pcard { filter: blur(5px) saturate(.7); pointer-events:none; }
.lock-overlay {
  position:absolute; inset:0; display:grid; place-items:center; z-index:3;
}
.paywall {
  grid-column: 1 / -1; background: linear-gradient(135deg, var(--green-800), var(--green-600)); color:#fff;
  border-radius: var(--radius); padding: 28px; text-align:center; box-shadow: var(--shadow-lg);
}
.paywall h3 { color:#fff; font-size:1.4rem; }
.paywall p { opacity:.9; max-width: 50ch; margin: 0 auto 16px; }

/* ---------- modal ---------- */
.modal-back { position:fixed; inset:0; background: rgba(20,40,25,.55); backdrop-filter: blur(3px); z-index:60; display:none; align-items:flex-start; justify-content:center; padding: 30px 16px; overflow:auto; }
.modal-back.show { display:flex; }
.modal {
  background: var(--bg-card); border-radius: 20px; max-width: 720px; width:100%; box-shadow: var(--shadow-lg);
  overflow:hidden; animation: pop .18s ease;
}
@keyframes pop { from{ transform: scale(.96); opacity:0; } to{ transform: scale(1); opacity:1; } }
.modal .mhead { padding: 24px 26px; color:#fff; position:relative; }
.modal .mhead .close { position:absolute; top:16px; right:16px; background:rgba(255,255,255,.2); border:none; color:#fff; width:34px; height:34px; border-radius:50%; font-size:1.2rem; }
.modal .mhead .memoji { font-size: 3rem; }
.modal .mhead h2 { color:#fff; font-size:1.6rem; text-align:left; margin:6px 0 2px; }
.modal .mhead .msci { font-style:italic; opacity:.9; }
.modal .mbody { padding: 22px 26px 26px; }
.badges { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.bdg { font-size:.78rem; font-weight:700; padding:5px 11px; border-radius:999px; background:#eef6e6; color:var(--green-800); border:1px solid var(--leaf-soft); }
.bdg.warn { background:#fff3e0; color:#9a5b00; border-color:#f0c27a; }
.bdg.tox  { background:#fdecea; color:#a3271a; border-color:#f0b5ad; }
.care-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-bottom: 18px; }
.care { background:#f7faf3; border:1px solid var(--line); border-radius:12px; padding: 12px 14px; }
.care .k { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); font-weight:700; }
.care .v { font-weight:600; color:var(--ink); }
.match-break { margin: 6px 0 18px; }
.match-break .mb { display:flex; align-items:center; gap:10px; margin-bottom:7px; }
.match-break .mb span { width: 92px; font-size:.84rem; color:var(--ink-soft); }
.match-break .mb .bar { flex:1; height:9px; background:#e7ece1; border-radius:999px; overflow:hidden; }
.match-break .mb .bar i { display:block; height:100%; background: var(--leaf); }
.match-break .mb b { width: 34px; text-align:right; font-size:.82rem; }
.season { display:grid; grid-template-columns: repeat(12,1fr); gap:3px; margin: 6px 0 18px; }
.season .mo { text-align:center; font-size:.62rem; color:var(--ink-soft); }
.season .cell { height: 10px; border-radius:3px; background:#e7ece1; }
.season .cell.bloom { background: var(--sun); }
.season .cell.plant { background: var(--leaf); }
.retailers { display:flex; gap:10px; flex-wrap:wrap; }
.retailers a { flex:1; min-width: 130px; text-align:center; text-decoration:none; }

/* ---------- garden ---------- */
.garden-stats { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
.gstat { background: var(--bg-card); border:1px solid var(--line); border-radius:14px; padding:16px 22px; box-shadow:var(--shadow); }
.gstat b { display:block; font-size:1.7rem; color: var(--green-800); }
.gstat span { font-size:.82rem; color:var(--ink-soft); }
.garden-list { display:grid; gap:12px; }
.grow { background:var(--bg-card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; display:flex; align-items:center; gap:14px; box-shadow:var(--shadow); }
.grow .gem { font-size:2.2rem; }
.grow .gmain { flex:1; }
.grow .gmain b { color:var(--green-900); }
.grow .gmain span { display:block; font-size:.82rem; color:var(--ink-soft); }
.grow select { width:auto; padding:8px 10px; font-size:.85rem; }
.empty { text-align:center; padding: 60px 20px; color: var(--ink-soft); }
.empty .ic { font-size: 3rem; }

/* ---------- pricing ---------- */
.price-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.tier { background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.tier.feat { border-color: var(--leaf); box-shadow: var(--shadow-lg); position:relative; }
.tier.feat .ribbon { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--sun); color:#5a3d00; font-size:.7rem; font-weight:800; padding:4px 12px; border-radius:999px; text-transform:uppercase; letter-spacing:.05em; }
.tier h3 { font-size:1.2rem; color:var(--green-900); }
.tier .price { font-size:2.1rem; font-weight:800; color:var(--green-800); }
.tier .price small { font-size:.9rem; font-weight:600; color:var(--ink-soft); }
.tier ul { list-style:none; padding:0; margin:14px 0 20px; flex:1; }
.tier li { padding:7px 0 7px 24px; position:relative; font-size:.92rem; border-bottom:1px solid var(--line); }
.tier li:before { content:"✓"; position:absolute; left:0; color:var(--green-600); font-weight:800; }
.tier li.off { color:var(--ink-soft); }
.tier li.off:before { content:"—"; color:var(--line); }

/* ---------- venture / pitch page ---------- */
.venture-hero { background: linear-gradient(135deg, var(--green-800), var(--green-600)); color:#fff; border-radius:22px; padding:34px; margin-bottom:30px; box-shadow:var(--shadow-lg); }
.venture-hero .eyebrow { color: var(--leaf-soft); font-weight:800; letter-spacing:.14em; font-size:.74rem; text-transform:uppercase; }
.venture-hero h2 { color:#fff; text-align:left; font-size:1.9rem; margin:.2em 0; }
.venture-hero p { font-size:1.1rem; opacity:.95; max-width:60ch; margin:0; }
.block-title { font-size:1.35rem; color:var(--green-900); margin:34px 0 4px; }
.block-sub { color:var(--ink-soft); margin-bottom:18px; }
.stat-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.stat-cards .sc { background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); }
.stat-cards .sc b { display:block; font-size:1.9rem; color:var(--green-700); }
.stat-cards .sc span { color:var(--ink-soft); font-size:.92rem; }
.layers { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.layer { background:var(--bg-card); border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:var(--shadow); }
.layer .ic { font-size:1.7rem; }
.layer b { display:block; margin:8px 0 4px; color:var(--green-900); }
.layer span { font-size:.86rem; color:var(--ink-soft); }

/* Business Model Canvas (9-block) */
.bmc {
  display:grid; gap:10px;
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas:
    "kp ka vp cr cs"
    "kp kr vp ch cs"
    "cost cost cost rev rev";
}
.bmc .blk { background:var(--bg-card); border:1px solid var(--line); border-radius:12px; padding:14px; box-shadow:var(--shadow); }
.bmc .blk h4 { font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--leaf); margin-bottom:8px; }
.bmc .blk ul { margin:0; padding-left:15px; font-size:.84rem; color:var(--ink); }
.bmc .blk li { margin-bottom:3px; }
.bmc .vp { background:linear-gradient(160deg,#eef6e6,#fff); border-color:var(--leaf-soft); }
.bmc .vp h4 { color:var(--green-700); }
.kp{grid-area:kp}.ka{grid-area:ka}.kr{grid-area:kr}.vp{grid-area:vp}.cr{grid-area:cr}.ch{grid-area:ch}.cs{grid-area:cs}.cost{grid-area:cost}.rev{grid-area:rev}
.rev-list { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.rev-item { display:flex; gap:12px; background:var(--bg-card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; box-shadow:var(--shadow); }
.rev-item .ic { font-size:1.5rem; }
.rev-item b { color:var(--green-800); }
.rev-item span { display:block; font-size:.85rem; color:var(--ink-soft); }
.hyp { background:#f7faf3; border-left:4px solid var(--leaf); border-radius:8px; padding:13px 16px; margin-bottom:12px; }
.hyp b { color:var(--green-800); }
.hyp span { color:var(--ink-soft); font-size:.88rem; }
.team-row { display:flex; flex-wrap:wrap; gap:12px; }
.member { display:flex; align-items:center; gap:10px; background:var(--bg-card); border:1px solid var(--line); border-radius:999px; padding:7px 18px 7px 7px; box-shadow:var(--shadow); }
.member .av { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; background:var(--green-600); }
.member b { font-size:.95rem; }
@media (max-width: 860px) {
  .stat-cards, .layers, .rev-list { grid-template-columns:1fr 1fr; }
  .bmc { grid-template-columns:1fr 1fr; grid-template-areas:none; }
  .bmc .blk { grid-area:auto !important; }
}
@media (max-width: 520px) {
  .stat-cards, .layers, .rev-list, .bmc { grid-template-columns:1fr; }
}

/* ---------- toast ---------- */
#toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(120%);
  background: var(--green-900); color:#fff; padding: 13px 22px; border-radius: 999px; font-weight:600;
  box-shadow: var(--shadow-lg); z-index:80; transition: transform .3s ease; max-width: 90vw;
}
#toast.show { transform: translateX(-50%) translateY(0); }

/* ---------- footer ---------- */
footer.site { background: var(--green-900); color: #cfe0c5; padding: 30px 0; margin-top: 40px; font-size:.88rem; }
footer.site .wrap { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; }
footer.site b { color:#fff; }
footer.site .disc { opacity:.92; max-width: 64ch; font-size:.8rem; }
footer.site a { color:#dff0d4; text-decoration:underline; }

/* ---------- review fixes: a11y, locked teaser, tap targets ---------- */
html { scroll-padding-top: 80px; }
.modal .mhead { background: linear-gradient(135deg, var(--green-800), var(--green-600)); } /* never white-on-white */
.locked-teaser .locked-msg { font-size: .85rem; color: var(--ink-soft); margin: 10px 0 12px; }
.modal .close { width: 44px; height: 44px; }
.fav-btn { min-height: 44px; }
.nav button.link { min-height: 40px; display: inline-flex; align-items: center; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .toolbar select, .grow select { font-size: 16px; }   /* prevent iOS focus zoom */
  .tier.feat { margin-top: 18px; }                      /* ribbon clearance when grid stacks */
  .hero-grid { grid-template-columns: 1fr; }
  .yard-card { transform: none; max-width: 420px; }
  .steps, .feature-grid, .price-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .opt-grid.cols-3 { grid-template-columns: 1fr 1fr; }
  .care-grid { grid-template-columns: 1fr; }
  .nav { flex-wrap: wrap; height: auto; padding: 8px 0; gap: 8px; }
  .nav button.link { padding: 6px 9px; font-size: .85rem; }
}
@media (max-width: 520px) {
  .retailers a { min-width: 100%; }
  .opt-grid.cols-3, .opt-grid.cols-2 { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .step-card { padding: 20px; }
}

/* ===== Survival Forecast (the differentiator) ===== */
.forecast { background: linear-gradient(160deg, #f3f9ee, #eaf3e2); border: 1px solid #cfe4bf;
  border-radius: 16px; padding: 16px 18px; margin: 4px 0 18px; box-shadow: 0 6px 20px rgba(46,125,50,.10); }
.fc-head { display: flex; align-items: center; gap: 12px; }
.fc-emoji { font-size: 1.7rem; }
.fc-title { font-weight: 800; color: #14361f; font-size: 1.08rem; line-height: 1.1; }
.fc-sub { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5a8a3f; }
.fc-num { margin-left: auto; font-size: 2.5rem; font-weight: 900; color: #1b5e20; line-height: 1; }
.fc-num small { font-size: 1.1rem; font-weight: 800; }
.fc-int { font-size: .9rem; color: #3f5a45; margin: 8px 0 6px; }
.fc-int b { color: #1b5e20; }
.ci-bar { position: relative; height: 10px; border-radius: 6px; background: #d8e8cb; overflow: hidden; margin: 6px 0 12px; }
.ci-range { position: absolute; top: 0; height: 100%; background: linear-gradient(90deg,#7cb342,#2e7d32); border-radius: 6px; opacity: .55; }
.ci-dot { position: absolute; top: -3px; width: 4px; height: 16px; background: #1b5e20; border-radius: 3px; transform: translateX(-2px); box-shadow: 0 0 0 2px #fff; }
.fc-conf { font-size: .86rem; color: #3f5a45; line-height: 1.4; }
.fc-conf b { color: #14361f; }
.met-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.met { background: #fff; border: 1px solid #d9e6cc; color: #2c4a30; border-radius: 999px;
  padding: 5px 11px; font-size: .8rem; font-weight: 600; }

/* ===== Install banner (PWA) ===== */
.install-banner { display: flex; align-items: center; gap: 12px; max-width: 1100px;
  margin: 14px auto 0; padding: 11px 16px; background: linear-gradient(135deg,#eaf3e2,#dff0d0);
  border: 1px solid #cfe4bf; border-radius: 14px; box-shadow: 0 4px 14px rgba(46,125,50,.10); }
.install-banner[hidden] { display: none !important; }
.ib-ic { font-size: 1.6rem; }
.ib-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.ib-txt b { color: #14361f; font-size: .98rem; }
.ib-txt span { font-size: .84rem; color: #3f5a45; }
.ib-x { background: none; border: none; font-size: 1.5rem; color: #5a8a3f; cursor: pointer; line-height: 1; padding: 0 4px; }
@media (max-width: 520px) { .ib-txt span { display: none; } }

/* ===== Store "coming soon" badges ===== */
.store-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.store-badge { display: inline-flex; align-items: center; gap: 9px; background: #14361f; color: #fff;
  border-radius: 12px; padding: 8px 15px; }
.store-badge.live { background: #2e7d32; }
.store-badge .sb-ic { font-size: 1.35rem; line-height: 1; }
.store-badge .sb-txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store-badge .sb-txt small { font-size: .62rem; opacity: .82; text-transform: uppercase; letter-spacing: .06em; }
.store-badge .sb-txt b { font-size: .92rem; }