/* Fresh theme preview: botanical-conservatory palette. Deep monstera emerald, variegated cream, mint, terracotta and blush. Navy kept for headings and the wordmark. */
:root {
  --font: "Nunito", ui-rounded, "SF Pro Rounded", "Avenir Next Rounded", "Segoe UI", system-ui, sans-serif;
  --ink: #26313d; --navy: #182153; --line: #d9e5da;
  --bg: #fbf8ee; --soft: #f1f5ec; --sage: #e2ede4;
  --leaf: #1f5a3f; --leaf-dark: #163f2c; --acc: #1f5a3f; --terra: #a8502f; --blush: #f6dcd6;
  --t1: #dcebe0; --t2: #f5edd6; --t3: #f6dcd6; --t4: #d9e6dc;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #26313d; --navy: #182153; --line: #d9e5da; --bg: #fbf8ee; --soft: #f1f5ec; --sage: #e2ede4; --acc: #1f5a3f; --t1: #dcebe0; --t2: #f5edd6; --t3: #f6dcd6; --t4: #d9e6dc; }
}
body { background: var(--bg); color: var(--ink); }
h1, h2, h3 { color: var(--navy); font-weight: 800; letter-spacing: -.01em; }
a { color: var(--leaf); }
.top { background: color-mix(in srgb, var(--bg) 94%, transparent); border-bottom-color: var(--line); }
.brand { color: var(--navy); }
.nav a { color: var(--ink); }
.nav a:hover { background: var(--sage); }
.eyebrow { color: var(--terra); }
.chips span { border-color: var(--leaf); color: var(--leaf); }
.call, .btn, .mbar a.bk { background: var(--leaf); color: #fff !important; }
.btn:hover { background: var(--leaf-dark); }
.btn.ghost { background: transparent; color: var(--leaf) !important; border: 2px solid var(--leaf); }
.size button[aria-pressed=true] { background: var(--leaf); color: #fff; }
.mbar a { border-color: var(--leaf); color: var(--leaf); }
.hero { background: linear-gradient(180deg, #e3eee5 0%, var(--bg) 100%); }
.portrait { border-radius: 2.6rem 2.6rem 2.6rem .8rem; background: #d5e6d9; box-shadow: 0 30px 60px -32px rgba(31, 90, 63, .55); }
.t1, .t1:hover { background: var(--leaf); }
.t1 b, .t1 span { color: #fff; }
.t2 { background: var(--t1); }
.t3 { background: var(--t3); }
.quote { background: var(--leaf); }
.quote blockquote { color: #fbf8ee; }
.quote cite { color: #cfe3d3; }
.quote cite a { color: #fff; }
.values { background: var(--soft); }
.notice { background: var(--t2); }
.card { border-color: var(--line); }
.rail .dot { background: var(--terra); }
.b:first-child, .b:first-child:hover { background: var(--leaf); }
.b:first-child, .b:first-child h3 { color: #fff; }
.badges img { border-color: var(--line); }
.foot { background: #173f2e; color: #dbe9de; }
.foot a { color: #fff; }
.social a { border-color: rgba(251, 248, 238, .4); color: #fbf8ee; }
.social a:hover { background: rgba(251, 248, 238, .14); border-color: #fbf8ee; color: #fff; }
.review a[aria-current] { background: var(--leaf); }
section { padding: clamp(3rem, 7vw, 5.5rem) 0; }

/* Real botanical photography (credits in the footer and in image-credits.md) */
.quote { position: relative; overflow: hidden; background: var(--leaf); }
.quote::before { content: ""; position: absolute; inset: -2%; background: url(/assets/plants/philodendron-band.jpg) center / cover; }
.quote::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 58, 41, .95) 0%, rgba(20, 58, 41, .86) 50%, rgba(20, 58, 41, .6) 100%); }
.quote .wrap { position: relative; z-index: 1; }
.foot .photo-credit { margin: .9rem 0 0; font-size: .52rem; line-height: 1.4; opacity: .6; }
.foot .photo-credit a { color: inherit; text-decoration-thickness: 1px; }
.hero { position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: min(46rem, 62%); background: url(/assets/plants/monstera-albo-hero.jpg) center / cover; opacity: .32; -webkit-mask-image: linear-gradient(to left, #000 25%, transparent 100%); mask-image: linear-gradient(to left, #000 25%, transparent 100%); pointer-events: none; transform: translateY(var(--py, 0px)); will-change: transform; }
.hero .wrap { position: relative; z-index: 1; }
@media (max-width: 900px) { .hero::before { width: 100%; opacity: .16; } }

/* Motion: a slow drift on the hero leaf (driven by scroll, via new.js) and a gentle zoom on the quote band. Both are still and calm for anyone whose system asks for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .quote::before { animation: kenburns 22s ease-in-out infinite alternate; }
}
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.09); } }

/* Logo in the header */
.brand img { display: block; height: 20px; width: auto; }
@media (max-width: 600px) { .brand img { height: 15px; } }