/* ==========================================================================
   sproutevergreen.com — the marketing sites own stylesheet.

   Shared by index.html and privacy.html so the two cannot drift apart. It is
   deliberately separate from css/styles.css: that file is the app, shipped and
   precached, and this one is a site about the app. They agree on the token
   NAMES so a value can be read across, but each owns its own copy.

   The four faces are the same files the app serves, copied into site/fonts/
   because a Pages project can only publish from inside its own root. Replace
   one here and replace it in css/fonts/ in the same commit.
   ========================================================================== */

@font-face {
  font-family: 'PP Hatton';
  src: url('fonts/hatton-ultralight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PP Hatton';
  src: url('fonts/hatton-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* The other three faces, self-hosted too as of the store build.
   --------------------------------------------------------------------------
   They came from Google until now, which cost a second origin on every cold
   start, an IP address handed to a third party for nothing, and a native
   shell that could not render itself correctly on a first launch with no
   network — a service worker cannot precache a Google woff2 by name, because
   the URL is not knowable until the stylesheet has been parsed.

   Cormorant and Jost are the variable fonts, axis-clipped to the weights the
   app actually draws and subsetted here. That is not a detail: as eight
   static files these were 254KB, and as three variable ones they are 124KB
   for a wider range. Jost alone went from four files at 104KB to one at 24.
   Sacramento has a single weight, so there is nothing to vary and it stays
   the static subset Google was already serving.

   The weight ranges are real ranges, not a formality. Jost is declared
   300-600 because the Profile rows ask for 600 and were being given a
   synthesised fake bold; Cormorant is 300-400 because nothing in the sheet
   asks the body serif for more, and a clipped axis is a smaller file.

   latin and latin-ext stay separate for the reason Google separates them.
   Only latin is precached in sw.js — latin-ext is fetched the first time
   someone's plant is called Aloë and cached by the same-origin handler from
   then on.

   All three are SIL Open Font License; see fonts/LICENSES.md. */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-var.woff2') format('woff2');
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
  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: 'Cormorant Garamond';
  src: url('fonts/cormorant-var-ext.woff2') format('woff2');
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-var-italic.woff2') format('woff2');
  font-weight: 300 400;
  font-style: italic;
  font-display: swap;
  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: 'Cormorant Garamond';
  src: url('fonts/cormorant-var-italic-ext.woff2') format('woff2');
  font-weight: 300 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  src: url('fonts/jost-var.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
  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: 'Jost';
  src: url('fonts/jost-var-ext.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sacramento';
  src: url('fonts/sacramento-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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: 'Sacramento';
  src: url('fonts/sacramento-400-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* One committed dark world. Sprout is dark-first and its whole character is
   the deep field, so a light variant of this page would be a different
   product. Everything is painted explicitly so it holds on either host. */
:root{
  --field:#0A1410; --well:#060E0B; --raise:#0E1B15;
  --ink:#F3F6F1; --ink-2:#A6B4AC; --ink-3:#6F7E76;
  --glow:#3FBE8B; --mint:#9FD3BE; --leaf:#2F9A70;
  --hair:rgba(243,246,241,.11);
  --sun:#E0C47A;
  --display:'PP Hatton',Didot,'Times New Roman',serif;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost','Century Gothic',-apple-system,BlinkMacSystemFont,sans-serif;
  --script:'Sacramento',cursive;
}
*{box-sizing:border-box}
body{ background:var(--field); color:var(--ink); font-family:var(--serif);
      font-size:18px; line-height:1.62; margin:0; -webkit-font-smoothing:antialiased; }
.wrap{ max-width:1080px; margin-inline:auto; padding-inline:24px; }
section{ padding-block:clamp(64px,10vw,120px); }
.band{ background:var(--well); border-block:1px solid var(--hair); }

/* Display face: 200 at 28px and up, 500 below. Hatton ships two weights and
   the size picks between them, standing in for an optical size axis. */
h1,h2,h3{ font-family:var(--display); font-weight:200; text-wrap:balance; margin:0; }
.eyebrow{ font-family:var(--sans); font-weight:500; font-size:11px; letter-spacing:.2em;
          text-transform:uppercase; color:var(--glow); margin:0 0 14px; }
p{ margin:0 0 1em; max-width:62ch; color:var(--ink-2); }
p.lead{ font-size:clamp(19px,2.2vw,23px); color:var(--ink); }
strong{ color:var(--ink); font-weight:400; }

/* ---- Hero. The wash is sun raking across a floor, which is the one idea
   the whole app is built on. It appears here and nowhere else. ---- */
.hero{ position:relative; overflow:hidden; padding-block:clamp(72px,13vw,150px); }
.hero::before{ content:''; position:absolute; inset:-30% -10% auto -10%; height:150%;
  background:linear-gradient(107deg, transparent 22%, color-mix(in srgb, var(--sun) 13%, transparent) 38%,
             color-mix(in srgb, var(--sun) 4%, transparent) 55%, transparent 70%);
  pointer-events:none; }
.hero > *{ position:relative; }
/* The lockup, sized off one variable so the mark cannot drift from the
   wordmark at any viewport.

   Three things this gets right that the first pass did not. The mark is
   centred on the wordmark's own line rather than on the two-line block, so
   it sits beside SPROUT instead of floating between the lines. Its viewBox
   is cropped to the sprig's drawn extent (x 22-78, y 24-84) so the box is
   the mark — untrimmed, 56% of its width is empty and a 14px gap renders
   as nearer 35. And there is no text-indent: the brand guide applies one to
   cancel the trailing gap that tracking leaves after the last letter, which
   pulls a *centred* wordmark left. Left-aligned there is nothing to cancel,
   and the indent was pushing SPROUT out of line with the script beneath. */
.lockup{ margin-bottom:38px; --wm:clamp(36px,7vw,58px); --mk:calc(var(--wm)*0.96);
         /* 52/68, the cropped viewBox's own aspect. Declared once so the
            mark's width and the script's indent cannot disagree. */
         --mkw:calc(var(--mk)*0.7647); }
.wm-row{ display:flex; align-items:center; gap:calc(var(--wm)*0.26); }
.lockup .m{ width:var(--mkw); height:var(--mk); color:var(--glow); flex:none; }
.lockup .m svg{ width:100%; height:100%; display:block; }
.word{ font-family:var(--display); font-weight:200; font-size:var(--wm);
       letter-spacing:.2em; text-transform:uppercase; line-height:1; }
.script{ font-family:var(--script); font-size:calc(var(--wm)*0.56); color:var(--mint);
         line-height:1; margin-top:calc(var(--wm)*0.12);
         /* Hangs under SPROUT, not under the mark. */
         padding-left:calc(var(--mkw) + var(--wm)*0.26); }
h1{ font-size:clamp(34px,6.4vw,62px); line-height:1.08; letter-spacing:.005em; max-width:17ch; }
h1 em{ font-style:normal; color:var(--glow); }
.hero p.lead{ margin-top:22px; }

.cta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:38px; }
.btn{ font-family:var(--sans); font-weight:400; font-size:14px; letter-spacing:.09em;
      text-transform:uppercase; text-decoration:none; padding:15px 28px; border-radius:2px;
      display:inline-block; transition:background .18s ease, border-color .18s ease; }
.btn-1{ background:var(--leaf); color:#04100A; border:1px solid var(--leaf); }
.btn-1:hover{ background:var(--glow); border-color:var(--glow); }
.btn-2{ border:1px solid var(--hair); color:var(--ink-2); }
.btn-2:hover{ border-color:var(--mint); color:var(--ink); }
.soon{ font-family:var(--sans); font-size:12px; letter-spacing:.13em; text-transform:uppercase;
       color:var(--ink-3); }

/* ---- Two-column feature ---- */
.split{ display:grid; grid-template-columns:1fr; gap:clamp(34px,6vw,70px); align-items:center; }
@media (min-width:860px){ .split{ grid-template-columns:1fr 460px; } .split.flip > .shot{ order:-1; } }
.shot{ margin:0; }
.shot img{ width:100%; max-width:100%; display:block; border:1px solid var(--hair); border-radius:12px; }
.shot .ph{ display:flex; flex-direction:column; align-items:center; justify-content:center;
          gap:10px; width:100%; border:1px dashed var(--hair); border-radius:12px;
          background:color-mix(in srgb, var(--ink) 3%, transparent); text-align:center; padding:24px; }
.ph-l{ font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.ph-n{ font-family:var(--sans); font-size:12.5px; color:var(--ink-3); max-width:26ch; line-height:1.5; }
.shot figcaption{ font-family:var(--sans); font-size:11.5px; letter-spacing:.12em;
                  text-transform:uppercase; color:var(--ink-3); margin-top:14px; }
h2{ font-size:clamp(27px,4.2vw,40px); line-height:1.16; margin-bottom:18px; }

/* ---- The light ladder. Five rungs is the app's real scale, not a
   decoration — every room is placed on it and every species matched to it. ---- */
.ladder{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.ladder li{ font-family:var(--sans); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
            padding:7px 13px; border:1px solid var(--hair); border-radius:100px; color:var(--ink-2);
            display:flex; align-items:center; gap:8px; }
.ladder i{ width:9px; height:9px; border-radius:50%; display:block; }

/* ---- Feature grid ---- */
.grid{ display:grid; grid-template-columns:1fr; gap:clamp(30px,4vw,52px); }
@media (min-width:760px){ .grid{ grid-template-columns:repeat(3,1fr); } }
.grid h3{ font-weight:500; font-size:20px; letter-spacing:.02em; margin-bottom:10px; }
.grid p{ font-size:16.5px; margin:0; }
.fig{ font-family:var(--display); font-weight:200; font-size:52px; line-height:1;
      color:var(--glow); display:block; margin-bottom:12px; }

/* ---- The app's own voice, quoted rather than described ---- */
.quote{ border-left:2px solid var(--leaf); padding-left:26px; margin:0; }
.quote p{ font-size:clamp(20px,2.6vw,26px); color:var(--ink); font-style:italic;
         max-width:34ch; text-wrap:balance; }
.quote cite{ font-family:var(--sans); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
             color:var(--ink-3); font-style:normal; }

footer{ border-top:1px solid var(--hair); padding-block:46px; }
.foot{ display:flex; flex-wrap:wrap; gap:18px 34px; align-items:center; justify-content:space-between; }
.foot a{ font-family:var(--sans); font-size:13px; letter-spacing:.06em; color:var(--ink-2);
         text-decoration:none; }
.foot a:hover{ color:var(--glow); }
.foot small{ font-family:var(--sans); font-size:12px; color:var(--ink-3); letter-spacing:.04em; }
a:focus-visible,.btn:focus-visible{ outline:2px solid var(--glow); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }

/* ==========================================================================
   privacy.html — a long read rather than a pitch, so it takes a narrower
   measure and its own heading rhythm. Everything else comes from the tokens
   above, which is the point of sharing this file: the policy page cannot
   drift away from the site that links it.

   Scoped under .doc rather than reusing .wrap. The landing page's .wrap is a
   1080px full-width column and this one is a 44rem reading column; one name
   for both would have meant whichever rule came last silently reshaping the
   other page.
   ========================================================================== */

.doc{ max-width:44rem; margin-inline:auto; padding:8vh 24px 14vh; }
.doc h1{ font-weight:200; font-size:clamp(38px,9vw,62px); letter-spacing:.06em;
         text-transform:uppercase; margin:0 0 6px; }
.doc h2{ font-weight:500; font-size:22px; letter-spacing:.04em;
         text-transform:uppercase; margin:46px 0 12px; }
.doc .sub{ font-family:var(--sans); font-size:12px; letter-spacing:.16em;
           text-transform:uppercase; color:var(--ink-3); margin:0 0 8px; }
.doc .note{ font-family:var(--sans); font-size:13px; color:var(--ink-3); }
/* The 62ch measure upstream is for a 1080px column; here the 44rem wrapper
   already sets the line length and the cap would narrow it twice. */
.doc p, .doc li{ font-size:17px; }
.doc p{ max-width:none; }
.doc li{ margin-bottom:8px; color:var(--ink-2); }
.doc strong{ font-weight:500; }
.doc hr{ border:0; border-top:1px solid var(--hair); margin:40px 0; }
.doc a{ color:var(--leaf); }
.doc a:hover{ color:var(--glow); }