@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700;9..144,900&family=Nunito:wght@500;700;900&display=swap');

:root {
  --soil: #6b4128;
  --deep: #183d29;
  --leaf: #2f8f4f;
  --mint: #dff6cf;
  --cream: #fff8df;
  --lime: #a9dc59;
  --clay: #c06b3e;
  --warn: #fff0bd;
  --shadow: 0 24px 70px rgba(20, 61, 34, .18);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--deep);
  font-family: 'Nunito', sans-serif;
  background: radial-gradient(circle at 15% 10%, #fff7ba 0 14%, transparent 25%), linear-gradient(135deg, #eefbd8, #bde7b7 45%, #7cc58d);
  overflow-x: hidden;
}
.leaf-bg::before, .leaf-bg::after {
  content: '';
  position: fixed;
  width: 460px; height: 460px;
  border-radius: 60% 40% 55% 45%;
  background: rgba(47,143,79,.11);
  transform: rotate(-28deg);
  z-index: -1;
}
.leaf-bg::before { right: -140px; top: -80px; }
.leaf-bg::after { left: -170px; bottom: -130px; transform: rotate(28deg); }
.shell { width: min(1100px, calc(100% - 28px)); margin: 0 auto; padding: 26px 0 42px; }
.card {
  background: rgba(255, 248, 223, .84);
  border: 2px solid rgba(24,61,41,.12);
  border-radius: 34px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  padding: 24px;
}
.hero { display: grid; grid-template-columns: 1.3fr .7fr; gap: 20px; align-items: center; min-height: 250px; }
.eyebrow { font-weight: 900; text-transform: uppercase; letter-spacing: .12em; color: #3f7b2f; }
h1 { font: 900 clamp(2.5rem, 8vw, 5.9rem)/.86 'Fraunces', serif; margin: 0; letter-spacing: -.06em; }
h2 { font: 900 1.55rem/1 'Fraunces', serif; margin: 0 0 16px; }
h3 { margin: 0 0 8px; font-size: 1rem; }
.subtitle { font-size: 1.15rem; max-width: 58ch; }
.plant-illustration { position: relative; min-height: 220px; }
.sun { position: absolute; right: 16px; top: 2px; width: 86px; height: 86px; background: #ffd95a; border-radius: 50%; box-shadow: 0 0 0 16px rgba(255,217,90,.25); }
.pot { position:absolute; bottom:8px; right:60px; width:120px; height:92px; background: var(--clay); clip-path: polygon(12% 0, 88% 0, 76% 100%, 24% 100%); border-radius: 10px; }
.pot span { position:absolute; top:16px; left:18px; right:18px; height:8px; background: rgba(255,255,255,.25); border-radius: 50px; }
.stem { position:absolute; right:118px; bottom:84px; width:10px; height:126px; background: #47733c; border-radius: 12px; transform: rotate(-5deg); }
.leaf { position:absolute; width:88px; height:45px; background: var(--leaf); border-radius: 100% 0 100% 0; transform-origin: 0 100%; box-shadow: inset 0 -8px rgba(24,61,41,.12); }
.l1 { right:127px; bottom:170px; transform: rotate(-38deg); }
.l2 { right:55px; bottom:150px; transform: scaleX(-1) rotate(-35deg); background:#65aa42; }
.l3 { right:128px; bottom:112px; transform: rotate(-10deg); background:#3e9a5b; }
.l4 { right:70px; bottom:104px; transform: scaleX(-1) rotate(-8deg); background:#8bbf46; }
.timer { display:grid; grid-template-columns: 1fr auto; gap:18px; align-items:center; margin-top:18px; background: linear-gradient(135deg, rgba(255,248,223,.92), rgba(221,246,207,.92)); }
.label { margin:0; text-transform: uppercase; letter-spacing:.14em; font-weight:900; color:#527a39; }
.countdown { font: 900 clamp(2.55rem, 10vw, 7.2rem)/.92 'Fraunces', serif; letter-spacing:-.08em; overflow-wrap:anywhere; }
.next-action { font-size:1.1rem; margin:.2rem 0 0; }
.timer-buttons { display:flex; flex-direction:column; gap:10px; min-width:230px; }
button, select {
  border: 0; border-radius: 999px; padding: 13px 17px; font: 900 1rem 'Nunito', sans-serif;
  color: var(--deep); background:#e9f6c0; box-shadow: inset 0 -3px rgba(24,61,41,.08); cursor:pointer;
}
button.primary { background: var(--deep); color: var(--cream); }
button.ghost { background: transparent; border: 2px solid rgba(24,61,41,.18); box-shadow:none; }
.grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px; margin-top:18px; }
ul, ol { padding-left: 1.25rem; } li { margin: .6rem 0; }
.checks { list-style:none; padding:0; margin:0; }
.checks > li { margin: .75rem 0; }
.check-card {
  width:100%; display:grid; grid-template-columns: 44px 1fr auto; gap:12px; align-items:center; text-align:left;
  background:rgba(255,255,255,.42); border-radius:22px; padding:14px; box-shadow: inset 0 -3px rgba(24,61,41,.06), 0 10px 24px rgba(24,61,41,.06);
}
.check-card:active { transform: scale(.99); }
.check-card small { display:block; margin-top:3px; font-weight:700; line-height:1.32; }
.check-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:14px; background:#dff6cf; font-size:1.35rem; }
.check-card em { font-style:normal; font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; background:#f7eaa7; border-radius:99px; padding:5px 8px; }
.rule.strong { font: 900 1.5rem 'Fraunces', serif; margin-bottom: 10px; }
.meter { height:18px; background:#e4d4a1; border-radius:99px; overflow:hidden; margin:16px 0 8px; }
.meter span { display:block; height:100%; width:42%; background: linear-gradient(90deg, #3f9b59, #d4bd43); border-radius:99px; transition: width .3s; }
.hint { font-weight:900; }
.danger-soft { background: rgba(255,240,189,.86); }
.timeline { counter-reset: step; list-style:none; padding:0; }
.timeline li { position:relative; padding-left:42px; }
.timeline li::before { counter-increment: step; content: counter(step); position:absolute; left:0; top:-2px; width:28px; height:28px; border-radius:50%; background:var(--leaf); color:white; display:grid; place-items:center; font-weight:900; }
.log-card { margin-top:18px; }
.log-head, .log-form { display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; }
.log-form { justify-content:flex-start; }
.care-log { list-style:none; padding:0; margin-bottom:0; }
.care-log li { background:rgba(255,255,255,.42); border-radius:18px; padding:12px 14px; }

.guide-modal {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: end center;
  background: rgba(12, 39, 24, .42); opacity:0; pointer-events:none; transition: opacity .18s ease; padding: 18px;
}
.guide-modal.open { opacity:1; pointer-events:auto; }
.guide-sheet {
  width: min(680px, 100%); max-height: 92vh; overflow:auto; position:relative;
  background: linear-gradient(180deg, #fffbe6, #e9f8d2); border: 2px solid rgba(24,61,41,.16);
  border-radius: 34px; box-shadow: 0 30px 90px rgba(7,31,17,.38); padding: 22px;
  transform: translateY(18px); transition: transform .2s ease;
}
.guide-modal.open .guide-sheet { transform: translateY(0); }
.guide-close { position:absolute; top:14px; right:14px; width:44px; height:44px; padding:0; font-size:2rem; line-height:1; background:#173d29; color:#fff8df; }
.guide-text { font-size:1.05rem; line-height:1.45; }
.guide-columns { display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.guide-columns > div { background: rgba(255,255,255,.42); border-radius: 22px; padding: 14px; }
.guide-columns ul { margin:0; }
.guide-graphic { min-height: 250px; margin: 6px 0 18px; border-radius: 28px; background: linear-gradient(135deg, #dff6cf, #fff0bd); position:relative; overflow:hidden; border: 2px solid rgba(24,61,41,.1); }
.guide-art { position:relative; min-height:250px; }
.guide-sun { position:absolute; right:42px; top:18px; width:78px; height:78px; background:#ffd95a; border-radius:50%; box-shadow:0 0 0 15px rgba(255,217,90,.22), 0 0 42px rgba(255,188,35,.35); }
.window-frame { position:absolute; inset:18px 22px auto auto; width:160px; height:130px; border:8px solid rgba(255,255,255,.55); border-radius:22px; }
.shade-beam { position:absolute; left:0; top:0; width:70%; height:100%; background:linear-gradient(105deg, rgba(255,255,255,.75), rgba(255,255,255,.12)); clip-path: polygon(0 0, 82% 0, 58% 100%, 0 100%); }
.no-sun, .low-tag, .keep-tag, .cut-tag, .tick, .cross, .dry-top, .light-tag, .depth-label, .air-bubbles { position:absolute; font-weight:900; border-radius:999px; padding:8px 12px; background:#fff8df; box-shadow:0 8px 20px rgba(24,61,41,.12); }
.no-sun { right:22px; bottom:22px; color:#9a3d21; text-align:center; line-height:1.05; font-size:.82rem; }
.light-tag { left:22px; top:22px; color:#2f6f3f; }
.mini-pot { position:absolute; bottom:28px; left:50%; margin-left:-45px; width:90px; height:70px; background:var(--clay); clip-path: polygon(12% 0, 88% 0, 76% 100%, 24% 100%); }
.mini-pot span { position:absolute; top:12px; left:14px; right:14px; height:7px; border-radius:50px; background:rgba(255,255,255,.25); }
.mini-stem { position:absolute; left:50%; bottom:88px; width:10px; height:104px; background:#47733c; border-radius:8px; transform:rotate(-4deg); z-index:2; }
.branch { position:absolute; left:50%; bottom:152px; width:54px; height:8px; background:#47733c; border-radius:99px; transform-origin:left center; z-index:1; }
.branch.left { transform:rotate(-28deg) translateX(-2px); }
.branch.right { transform:rotate(24deg) translateX(0); bottom:137px; }
.mini-leaf { position:absolute; width:72px; height:38px; background:#3e9a5b; border-radius:100% 0 100% 0; z-index:3; box-shadow: inset 0 -7px rgba(24,61,41,.12); }
.mini-leaf::after, .good-leaf::after, .sad-leaf::after { content:''; position:absolute; left:12px; top:50%; width:70%; height:3px; background:rgba(255,255,255,.32); border-radius:99px; transform:rotate(-18deg); }
.mini-leaf.a { left:calc(50% - 88px); bottom:156px; transform:rotate(-24deg); }
.mini-leaf.b { left:calc(50% + 18px); bottom:136px; transform:scaleX(-1) rotate(-22deg); background:#88bd4d; }
.mini-leaf.c { left:calc(50% - 32px); bottom:178px; width:58px; height:32px; transform:rotate(-6deg); background:#65aa42; }
.soil-box { position:absolute; left:40px; right:40px; bottom:40px; height:88px; background:#7a4a2f; border-radius:0 0 24px 24px; box-shadow: inset 0 18px #9b6744; }
.soil-box i { position:absolute; left:0; right:0; top:-16px; height:30px; border-radius:50%; background:#8b5a3a; }
.soil-box b { position:absolute; right:18px; top:22px; color:#fff8df; font-size:1.25rem; }
.finger { position:absolute; left:42%; top:16px; width:48px; height:174px; background:#f0b37f; border-radius:25px 25px 18px 18px; transform:rotate(6deg); box-shadow: inset -8px 0 rgba(134,73,45,.18), 0 8px 18px rgba(24,61,41,.12); z-index:2; }
.finger .nail { position:absolute; left:10px; right:10px; top:8px; height:22px; background:#ffe1c4; border-radius:18px 18px 10px 10px; box-shadow: inset 0 -3px rgba(164,92,56,.12); }
.finger .knuckle { position:absolute; left:8px; right:8px; height:3px; background:rgba(125,72,46,.24); border-radius:99px; }
.finger .k1 { top:68px; } .finger .k2 { top:108px; }
.depth-line { position:absolute; left:calc(42% + 62px); bottom:102px; width:95px; border-top:4px dashed rgba(24,61,41,.35); }
.depth-label { left:42px; top:28px; color:#765324; }
.drop { position:absolute; right:62px; top:54px; width:35px; height:48px; background:#66b6e8; border-radius:50% 50% 50% 0; transform:rotate(-45deg); opacity:.35; }
.water-tray { position:absolute; left:48px; right:48px; bottom:20px; height:45px; border:5px solid #5aa6c8; border-top:0; border-radius:0 0 24px 24px; }
.water-tray span { position:absolute; left:10px; right:10px; bottom:6px; height:11px; background:#7cc9e8; border-radius:99px; }
.wick { position:absolute; left:50%; bottom:50px; width:12px; height:96px; background:repeating-linear-gradient(180deg,#e9d09d 0 9px,#d8bd86 9px 14px); border-radius:99px; transform:translateX(-50%); z-index:1; }
.low-tag { left:28px; top:28px; color:#2d6d79; }
.air-bubbles { right:34px; bottom:74px; color:#2d6d79; background:rgba(255,248,223,.75); }
.good-leaf, .sad-leaf { position:absolute; width:132px; height:70px; border-radius:100% 0 100% 0; z-index:2; box-shadow: inset 0 -8px rgba(24,61,41,.12); }
.leaf-stem { position:absolute; height:10px; background:#47733c; border-radius:99px; z-index:1; }
.leaf-stem.left { left:68px; top:132px; width:105px; transform:rotate(-18deg); }
.leaf-stem.right { right:84px; top:146px; width:95px; transform:rotate(18deg); }
.good-leaf { left:52px; top:72px; background:#3e9a5b; transform:rotate(-20deg); }
.sad-leaf { right:62px; top:88px; background:#b98247; transform:rotate(20deg); filter:saturate(.8); }
.scissors { position:absolute; right:72px; bottom:42px; font-size:3.2rem; transform:rotate(-20deg); z-index:3; }
.keep-tag { left:32px; bottom:34px; color:#2f8f4f; }
.cut-tag { right:24px; bottom:98px; color:#9a3d21; font-size:.85rem; }
.firm-stem, .bad-stem { position:absolute; bottom:42px; width:34px; height:145px; border-radius:16px; }
.firm-stem { left:32%; background:#47733c; }
.firm-stem span, .bad-stem span { position:absolute; left:50%; top:-34px; width:70px; height:36px; background:#3e9a5b; border-radius:100% 0 100% 0; transform:rotate(-25deg); }
.bad-stem { right:32%; background:linear-gradient(#38251d, #111); transform:skewX(-8deg); }
.bad-stem span { background:#5b4634; filter:saturate(.7); }
.tick { left:19%; top:32px; color:#2f8f4f; }
.cross { right:12%; top:32px; color:#8f3b2f; }
.sticky-card { position:absolute; left:50%; top:34px; width:115px; height:150px; margin-left:-58px; background:#ffd95a; border-radius:18px; box-shadow:inset 0 -18px rgba(159,117,26,.12); }
.sticky-card span { position:absolute; left:20px; right:20px; top:24px; height:96px; border-radius:14px; background:rgba(255,255,255,.22); }
.gnat { position:absolute; font-size:3rem; color:#17291c; animation: floaty 2s ease-in-out infinite; }
.g1 { left:80px; top:70px; } .g2 { right:86px; top:86px; animation-delay:.25s; } .g3 { left:48%; bottom:56px; animation-delay:.5s; }
.dry-top { left:34px; bottom:30px; color:#765324; }
.pwa-card { margin-top:18px; display:grid; grid-template-columns: 1fr 190px; gap:18px; align-items:center; background: linear-gradient(135deg, rgba(255,248,223,.88), rgba(223,246,207,.88)); }
.install-btn { background:#c9f06f; }
.phone-widget { justify-self:end; width:170px; min-height:150px; border-radius:34px; padding:18px; color:#fff8df; background:linear-gradient(160deg,#183d29,#2f8f4f); box-shadow:0 18px 42px rgba(24,61,41,.24); display:grid; place-items:center; text-align:center; }
.phone-widget span { font-size:2rem; }
.phone-widget b { font:900 1.65rem/.95 'Fraunces', serif; letter-spacing:-.04em; }
.phone-widget small { text-transform:uppercase; letter-spacing:.12em; font-weight:900; opacity:.85; }
body.modal-open { overflow:hidden; }
@keyframes floaty { 50% { transform: translateY(-8px); } }
@media (max-width: 760px) {
  .hero, .timer, .grid { grid-template-columns:1fr; }
  .plant-illustration { min-height:190px; }
  .timer-buttons { min-width:0; }
  .countdown { font-size: clamp(2.35rem, 14vw, 4.9rem); }
  .check-card { grid-template-columns: 38px 1fr; }
  .check-card em { grid-column: 2; width:max-content; }
  .guide-modal { padding: 10px; }
  .guide-sheet { border-radius: 28px; padding: 18px; }
  .guide-columns { grid-template-columns:1fr; }
  .pwa-card { grid-template-columns:1fr; }
  .phone-widget { justify-self:stretch; width:auto; min-height:120px; }
  .guide-sun { right:26px; top:22px; width:62px; height:62px; }
  .window-frame { right:10px; width:126px; }
  .no-sun { right:12px; font-size:.72rem; }
  .light-tag, .depth-label { left:14px; font-size:.78rem; }
  .soil-box { left:22px; right:22px; }
  .finger { left:39%; }
  .depth-line { left:calc(39% + 58px); width:70px; }
  .good-leaf, .sad-leaf { width:108px; height:58px; }
  .good-leaf { left:22px; }
  .sad-leaf { right:24px; }
  .leaf-stem.left { left:36px; }
  .leaf-stem.right { right:40px; }
}