/* fonts:start (generated by scripts/vendor-fonts.mjs) */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(fonts/inter-tight-normal-200-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/source-serif-4-italic-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* fonts:end */

/* Sprig — site styles. Liquid Glass over the plant's own photo. */
:root {
  --loam: #2C2420;
  --dew: #F2F7F3;
  --night-dew: #121A15;
  --lichen: #8C9A8E;
  --tint: #5B8C5A;
  --hibiscus: #E0506D;
  --sunrise: #FFE2B8;

  --glass: rgba(242, 247, 243, .72);
  --glass-sheet: rgba(242, 247, 243, .86);
  --glass-edge: rgba(255, 255, 255, .55);
  --ink: var(--loam);
  --caption: #3F4B43;          /* Lichen, deepened for 4.5:1 on light glass */
  --hairline: rgba(140, 154, 142, .55);
  --hibiscus-glass: rgba(224, 80, 109, .22);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter Tight", "Roboto Flex", system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Tight", "Roboto Flex", system-ui, sans-serif;
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;

  --gutter: 20px;
  --round: 999px;
  --sheet: 32px;
  --blur: blur(22px) saturate(1.5);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --glass: rgba(18, 26, 21, .64);
    --glass-sheet: rgba(18, 26, 21, .84);
    --glass-edge: rgba(242, 247, 243, .18);
    --ink: var(--dew);
    --caption: rgba(242, 247, 243, .86);
    --hairline: rgba(140, 154, 142, .5);
    --hibiscus-glass: rgba(224, 80, 109, .26);
  }
}
/* Solid fallback when the browser cannot blur what is behind glass */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(242, 247, 243, .95); --glass-sheet: rgba(242, 247, 243, .97); }
  @media (prefers-color-scheme: dark) {
    :root { --glass: rgba(18, 26, 21, .94); --glass-sheet: rgba(18, 26, 21, .96); }
  }
}
@media (max-width: 480px) { :root { --gutter: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: #2d4f2b;          /* deep leaf, under every photo */
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--sunrise); outline-offset: 3px; border-radius: 6px; box-shadow: 0 0 0 6px rgba(44, 36, 32, .55); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 10; background: var(--dew); color: var(--loam); padding: 8px 16px; border-radius: var(--round); }
.skip:focus { left: 16px; }

/* ---------- Grounds: the plant photo is the canvas ---------- */
.ground { position: relative; background-color: #2d4f2b; background-size: cover; background-position: center; isolation: isolate; }
.ground--hero    { background-image: url(shots/ground-hero.jpg); }
.ground--strand  { background-image: url(shots/ground-strand.jpg); }
.ground--care    { background-image: url(shots/ground-care-plans.jpg); }
.ground--list    { background-image: url(shots/ground-care-list.jpg); }
.ground--night   { background-image: url(shots/ground-night.jpg); background-color: #15211a; }
.ground--guide   { background-image: url(shots/ground-guide.jpg); }

.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.glass--night { --glass: rgba(18, 26, 21, .64); --glass-edge: rgba(242, 247, 243, .18); color: var(--dew); --caption: rgba(242, 247, 243, .78); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass--night { --glass: rgba(18, 26, 21, .94); } }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- The Strand (site navigation) ---------- */
.strand {
  position: relative; z-index: 2;
  padding-top: 18px;
  background: linear-gradient(rgba(18, 26, 21, .5), rgba(18, 26, 21, 0));
}
.strand__line { height: 1px; background: rgba(242, 247, 243, .6); margin: 0 var(--gutter); }
.strand__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 0 var(--gutter) 10px; }
.strand__beads { display: flex; gap: 18px; margin: 0; padding: 0 0 0 4px; list-style: none; }
.bead { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--dew); font-size: 13px; line-height: 1.2; text-shadow: 0 1px 3px rgba(18, 26, 21, .7); }
.bead::before { content: ""; width: 1px; height: 10px; background: rgba(242, 247, 243, .6); }
.bead__drop {
  width: 44px; height: 44px; border-radius: 50%; margin-bottom: 6px;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 226, 184, .75) 0 9%, rgba(255, 226, 184, 0) 26%),
    radial-gradient(circle at 50% 62%, #9cc77e 0%, #5B8C5A 46%, #2f5a2c 100%);
  border: 2px solid rgba(242, 247, 243, .55);
  box-shadow: 0 4px 10px rgba(18, 26, 21, .35), inset 0 -4px 8px rgba(18, 26, 21, .3);
  transition: transform .2s;
}
.bead:hover .bead__drop { transform: translateY(3px); }
.bead[aria-current="page"] .bead__drop { border-color: var(--dew); box-shadow: 0 0 0 3px rgba(242, 247, 243, .35), 0 4px 10px rgba(18, 26, 21, .35); }
.bead[aria-current="page"] { font-weight: 650; }
.bead:focus-visible { border-radius: 24px; }
.strand__mark { margin-top: 12px; font-family: var(--display); font-weight: 650; font-size: 17px; color: var(--dew); text-decoration: none; text-shadow: 0 1px 3px rgba(18, 26, 21, .7); }

/* ---------- Pills ---------- */
.pill { display: inline-flex; align-items: center; gap: 10px; border-radius: var(--round); padding: 12px 22px; font-weight: 600; font-size: 17px; line-height: 1.25; }
.pill--soon { color: var(--ink); }
.pill--soon svg { flex: none; }
.pill--hibiscus { background: rgba(196, 58, 88, .92); color: #fff; font-size: 19px; font-weight: 700; border: 1px solid rgba(255, 255, 255, .4); box-shadow: 0 8px 24px rgba(196, 58, 88, .35); }
.caption { font-size: 13px; line-height: 1.45; color: var(--caption); margin: 0; }
.binomial { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* ---------- Hero ---------- */
.hero { min-height: min(100vh, 920px); display: flex; flex-direction: column; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 30% 45%, rgba(18, 26, 21, 0), rgba(18, 26, 21, .35)); }
.hero__body { flex: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 40px; padding-top: 24px; padding-bottom: 64px; }
.hero__lens { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.hero__copy { max-width: 34rem; padding: 28px 30px; border-radius: var(--sheet); }
.hero__copy p { margin: 0 0 18px; font-size: 19px; line-height: 1.45; }
.hero__copy .caption { margin-top: 14px; font-size: 13px; }
.hero__phones { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: 0; }
.hero__phones img { width: min(44%, 290px); filter: drop-shadow(0 24px 40px rgba(18, 26, 21, .45)); }
.hero__phones img + img { margin-left: -6%; margin-top: 80px; }

/* ---------- The Drop ---------- */
.drop { position: relative; width: clamp(220px, 28vw, 340px); aspect-ratio: 1; display: grid; place-items: center; }
.drop__lens {
  position: absolute; inset: 0; border-radius: 50%;
  background: url(shots/drop-leaf.jpg) 40% 55% / 190% auto no-repeat, #4f8a4a;
  border: 2px solid rgba(242, 247, 243, .7);
  box-shadow: 0 30px 60px rgba(18, 26, 21, .4), inset 0 -18px 40px rgba(18, 26, 21, .35), inset 0 10px 30px rgba(255, 255, 255, .25);
}
.drop__lens::before { /* Sunrise specular at ten o'clock */
  content: ""; position: absolute; left: 14%; top: 13%; width: 30%; height: 18%; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 226, 184, .7), rgba(255, 226, 184, 0) 70%);
  transform: rotate(-35deg);
}
.drop__dew { position: absolute; inset: -18%; border-radius: 50%; pointer-events: none; opacity: 0;
  background:
    radial-gradient(circle at 12% 30%, rgba(242,247,243,.9) 0 5px, transparent 6px),
    radial-gradient(circle at 85% 20%, rgba(242,247,243,.9) 0 4px, transparent 5px),
    radial-gradient(circle at 92% 68%, rgba(242,247,243,.9) 0 6px, transparent 7px),
    radial-gradient(circle at 20% 82%, rgba(242,247,243,.9) 0 4px, transparent 5px),
    radial-gradient(circle at 50% 4%, rgba(242,247,243,.9) 0 3px, transparent 4px),
    radial-gradient(circle at 4% 58%, rgba(242,247,243,.9) 0 3px, transparent 4px),
    radial-gradient(circle at 64% 96%, rgba(242,247,243,.9) 0 5px, transparent 6px);
}
.drop__name { position: absolute; left: 50%; bottom: -6%; transform: translateX(-50%); text-align: center; white-space: nowrap; color: var(--dew); }
.drop__name h1, .drop__name .species { margin: 0; font-family: var(--display); font-size: clamp(56px, 7vw, 92px); line-height: 1; font-weight: 900; letter-spacing: -.02em; text-shadow: 0 2px 18px rgba(18, 26, 21, .65), 0 1px 2px rgba(18, 26, 21, .6); }
.drop__name .binomial { display: block; margin-top: 6px; font-size: 24px; text-shadow: 0 1px 10px rgba(18, 26, 21, .85), 0 1px 2px rgba(18, 26, 21, .7); }
.drop-pad { padding-bottom: 92px; }

@media (prefers-reduced-motion: no-preference) {
  .drop__lens { animation: condense 1.1s cubic-bezier(.2, .8, .2, 1) both; }
  .drop__dew { animation: gather 1.1s cubic-bezier(.4, 0, .2, 1) both; }
  .drop__name h1, .drop__name .species { animation: thicken 1.3s cubic-bezier(.3, .7, .2, 1) .15s both; }
  .drop__name .binomial { animation: settle .6s ease-out .9s both; }
  .drop__lens::before { animation: glint .8s ease-out 1s both; }
}
@keyframes condense { 0% { transform: scale(.55); opacity: 0; filter: blur(10px); } 60% { opacity: 1; } 100% { transform: scale(1); opacity: 1; filter: blur(0); } }
@keyframes gather { 0% { opacity: 1; transform: scale(1.15); } 75% { opacity: .8; } 100% { opacity: 0; transform: scale(.5); } }
@keyframes thicken { 0% { font-weight: 200; opacity: 0; } 25% { opacity: 1; } 100% { font-weight: 900; opacity: 1; } }
@keyframes settle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes glint { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Features ---------- */
.features { padding-block: 96px; }
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; }
.feature + .feature { margin-top: 96px; }
.feature__shot { display: flex; justify-content: center; }
.feature__shot img { width: min(100%, 300px); filter: drop-shadow(0 24px 40px rgba(18, 26, 21, .45)); }
.feature--flip .feature__shot { order: 2; }
.panel { border-radius: var(--sheet); padding: 32px; max-width: 32rem; }
.panel h2, .panel h3 { font-family: var(--display); font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -.012em; margin: 0 0 14px; }
.panel p { margin: 0 0 14px; }
.panel p:last-child { margin-bottom: 0; }

.drops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 120px; justify-items: center; }
.disc { width: min(100%, 320px); aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 15% 13%; }
.disc h3 { font-family: var(--display); font-size: 22px; font-weight: 650; line-height: 1.2; margin: 0 0 8px; }
.disc p { margin: 0; font-size: 16px; line-height: 1.45; }
.disc .caption { margin-top: 8px; }
.disc--hibiscus .caption { color: var(--ink); }
.disc--hibiscus { background-image: linear-gradient(var(--hibiscus-glass), var(--hibiscus-glass)); border-color: rgba(224, 80, 109, .55); }

/* ---------- Privacy at a glance ---------- */
.glance { padding-block: 96px; }
.glance__sheet { border-radius: var(--sheet); padding: 40px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
.glance h2 { font-family: var(--display); font-size: 44px; line-height: 1.05; font-weight: 750; letter-spacing: -.02em; margin: 0 0 12px; }
.glance__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; }
.glance__list li { display: grid; grid-template-columns: 16px 1fr; gap: 12px; align-items: start; }
.glance__list li::before { content: ""; width: 14px; height: 14px; margin-top: 5px; border-radius: 50%; border: 1.5px solid var(--lichen); }
.glance__list strong { display: block; font-weight: 650; }

/* ---------- Pricing ---------- */
.pricing { padding-block: 96px; }
.pricing__sheet { border-radius: var(--sheet); padding: 40px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; align-items: center; }
.pricing__sheet > img { width: 100%; filter: drop-shadow(0 20px 30px rgba(18, 26, 21, .35)); }
.pricing h2 { font-family: var(--display); font-size: 34px; font-weight: 700; margin: 0; line-height: 1.1; }
.price { font-family: var(--display); font-weight: 900; font-size: clamp(56px, 7vw, 80px); line-height: 1; letter-spacing: -.03em; margin: 18px 0 6px; }
.plans { display: flex; gap: 18px; margin: 24px 0; flex-wrap: wrap; }
.plan { width: 132px; height: 132px; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; line-height: 1.25; }
.plan strong { font-family: var(--display); font-size: 26px; font-weight: 750; }
.plan span { font-size: 13px; }
.plan--year { border: 3px solid var(--tint); }
.pricing__lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 26px 0 18px; }
.pricing__lists h3 { font-size: 17px; margin: 0 0 6px; font-weight: 650; }
.pricing__lists ul { margin: 0; padding-left: 1.1em; }

/* ---------- FAQ ---------- */
.faq { padding-block: 96px; }
.faq__title { color: var(--dew); font-family: var(--display); font-size: 44px; font-weight: 750; letter-spacing: -.02em; line-height: 1.05; margin: 0 0 28px; text-shadow: 0 2px 12px rgba(18, 26, 21, .6); }
.faq__list { display: grid; gap: 12px; max-width: 46rem; }
details { border-radius: 28px; padding: 0; }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px 18px 26px; font-weight: 650; border-radius: 28px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--lichen);
  background: linear-gradient(currentColor, currentColor) center / 11px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 11px no-repeat; transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
details > div { padding: 0 26px 22px; }
details > div p { margin: 0 0 10px; max-width: 40rem; }
details > div p:last-child { margin: 0; }

/* ---------- Footer ---------- */
.footer { padding: 0 0 40px; }
.footer__sheet { border-radius: var(--sheet); padding: 28px 32px; display: flex; flex-wrap: wrap; gap: 18px 40px; justify-content: space-between; align-items: center; }
.footer__about { font-family: var(--serif); font-style: italic; font-size: 17px; max-width: 30rem; margin: 0; }
.footer nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; }
.footer__fine { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; border-top: 1px solid var(--hairline); padding-top: 14px; }

/* ---------- Document pages: a sheet over the plant's photo ---------- */
.doc-ground { min-height: 100vh; display: flex; flex-direction: column; }
.sheet { background: var(--glass-sheet); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-edge);
  border-radius: var(--sheet); max-width: 48rem; margin: 28px auto 40px; padding: 18px 44px 44px; }
.sheet::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--lichen); margin: 0 auto 26px; opacity: .8; }
.sheet h1 { font-family: var(--display); font-size: 44px; line-height: 1.05; font-weight: 750; letter-spacing: -.02em; margin: 0; }
.sheet .binomial--sub { font-size: 20px; margin: 6px 0 22px; color: var(--caption); }
.sheet h2 { font-family: var(--display); font-size: 22px; font-weight: 650; line-height: 1.25; margin: 34px 0 8px; }
.sheet h3 { font-size: 17px; font-weight: 650; margin: 22px 0 4px; }
.sheet p, .sheet li { max-width: 40rem; }
.sheet p { margin: 0 0 12px; }
.sheet ul { padding-left: 1.2em; margin: 0 0 12px; }
.sheet li { margin-bottom: 6px; }
.sheet .meta { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 10px 0; margin-bottom: 8px; }
.sheet .note { border-radius: 22px; padding: 16px 20px; background: var(--hibiscus-glass); border: 1px solid rgba(224, 80, 109, .45); margin: 18px 0; }
.contact-pill { background: var(--tint); color: #fff; text-decoration: none; display: inline-flex; border-radius: var(--round); padding: 12px 22px; font-weight: 650; }
.contact-pill { background: #3f6e3e; }
.doc-ground .footer { margin-top: auto; }
.sheet details { border: 1px solid var(--hairline); margin-bottom: 10px; }
.sheet summary { padding: 14px 18px 14px 22px; }
.sheet details > div { padding: 0 22px 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero__body { grid-template-columns: 1fr; gap: 36px; padding-top: 12px; }
  .hero__copy { margin: 0 auto; }
  .feature, .glance__sheet, .pricing__sheet { grid-template-columns: 1fr; }
  .feature { gap: 28px; }
  .feature--flip .feature__shot { order: 0; }
  .feature .panel { margin: 0 auto; }
  .feature__shot img { width: min(62%, 260px); }
  .drops { grid-template-columns: 1fr; gap: 20px; margin-top: 80px; }
  .disc { padding: 48px 42px; }
  .pricing__sheet > img { width: min(60%, 240px); margin: 0 auto; }
}
@media (max-width: 480px) {
  body { font-size: 17px; }
  .features, .glance, .pricing, .faq { padding-block: 64px; }
  .feature + .feature { margin-top: 64px; }
  .panel, .glance__sheet, .pricing__sheet { padding: 26px 22px; }
  .panel h2, .panel h3, .pricing h2 { font-size: 28px; }
  .glance h2, .faq__title { font-size: 34px; }
  .glance__list { grid-template-columns: 1fr; }
  .pricing__lists { grid-template-columns: 1fr; }
  .plan { width: 116px; height: 116px; }
  .plan strong { font-size: 22px; }
  .hero__copy { padding: 22px 22px; }
  .hero__copy p { font-size: 17px; }
  .drop__name .binomial { font-size: 24px; }
  .sheet { padding: 16px 22px 30px; margin: 20px 0 32px; }
  .sheet h1 { font-size: 34px; }
  .footer__sheet { padding: 24px 22px; }
  .strand__beads { gap: 14px; }
  .disc { width: min(100%, 300px); }
  summary { padding: 16px 18px 16px 22px; }
  details > div { padding: 0 22px 20px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }