/* Plotting Plants — marketing site stylesheet.
   Design tokens, body background, and the .sheet-grain / .frame / tab recipes are ported
   verbatim from plan.html so the site matches the app pixel-for-pixel. */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&display=swap');

:root{
  --paper:#f3eee2; --paper2:#ece5d5; --panel:#fbf8f0;
  --ink:#232a1d; --ink2:#525a45; --ink3:#7d8366;
  --forest:#2C4734; --moss:#5f7350; --olive:#8a9468; --sage:#8b9a73; --sage-l:#aeb892;
  --clay:#b0552f; --clay-d:#8f4324; --clay-l:#cc7d57;
  --gold:#c08a36; --gold-l:#d8aa5b;
  --blush:#c79aa8; --blush-l:#e4c6cf;
  --stone:#9a9182; --stone-l:#c3bba9; --mulch:#b29170;
  --asphalt:#6f6a62; --lawn:#cdd4b4;
  --line:rgba(35,42,29,.55); --line-soft:rgba(35,42,29,.16); --line-strong:rgba(35,42,29,.34);
  --serif:'Lora',Georgia,'Times New Roman',serif;
  --body:'Spectral',Georgia,serif;
  --ui:'Hanken Grotesk',-apple-system,'Segoe UI',system-ui,sans-serif;
  --cardline:#d9cdb5; --cardline-strong:#c7b999;
  --shadow:0 1px 2px rgba(40,33,20,.06),0 8px 26px -12px rgba(40,33,20,.22);
  --shadow-lg:0 24px 60px -28px rgba(30,40,28,.5);
  /* season + category bands (from the app's CATBG / season badge colors) */
  --spring:#6f9a4e; --summer:#caa23f; --fall:#b8551f; --winter:#5f7d92;
  --cat-maple-a:#DBE3C6; --cat-maple-b:#C7D3AC;
  --cat-tree-a:#DBE3C6; --cat-tree-b:#C7D3AC;
  --cat-conifer-a:#CBD7C7; --cat-conifer-b:#B0C2B2;
  --cat-shrub-a:#DFE5CC; --cat-shrub-b:#CBD6B5;
  --cat-hydrangea-a:#EAD9D2; --cat-hydrangea-b:#DBBFB9;
  --cat-perennial-a:#EAD9D2; --cat-perennial-b:#DBBFB9;
  --cat-grass-a:#EBE1C4; --cat-grass-b:#D9CB9E;
}

/* ---------- base / reset ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scrollbar-gutter:stable; }
html,body{ margin:0; }
body{
  font-family:var(--body); color:var(--ink); line-height:1.6; font-size:17px;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(176,85,47,.10), transparent 60%),
    radial-gradient(900px 600px at -6% 8%, rgba(51,69,47,.12), transparent 55%),
    linear-gradient(160deg,var(--paper),var(--paper2));
  background-attachment:fixed;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
/* faint paper tooth (from the planting-plan iteration) */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}
img,svg{ max-width:100%; }
a{ color:var(--clay-d); text-decoration:none; }
a:hover{ color:var(--clay); }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:1180px; margin-inline:auto; padding-inline:clamp(16px,4vw,34px); }
.wrap-narrow{ max-width:780px; }
.section{ padding-block:clamp(34px,5vw,64px); }
.section--tight{ padding-block:clamp(24px,3vw,40px); }
.section + .section{ border-top:1px solid var(--line-soft); }
.section-head{ max-width:760px; margin-bottom:clamp(26px,3.4vw,42px); }
.section-head.center{ margin-inline:auto; text-align:center; }

/* ---------- type ---------- */
.kicker{
  font-family:var(--ui); font-size:11.5px; font-weight:600; letter-spacing:.3em;
  text-transform:uppercase; color:var(--clay); margin:0 0 14px;
  display:flex; align-items:center; gap:13px;
}
.kicker.center{ justify-content:center; }
.kicker::after{ content:""; height:1px; flex:1; max-width:200px;
  background:linear-gradient(90deg,var(--line-strong),transparent); }
.kicker.center::before{ content:""; height:1px; flex:1; max-width:200px;
  background:linear-gradient(90deg,transparent,var(--line-strong)); }

h1,h2,h3,.display{ font-family:var(--serif); color:var(--ink); font-weight:600; line-height:1.04; margin:0 0 .4em; }
h1{ font-size:clamp(30px,4.6vw,48px); letter-spacing:-.01em; }
.display{ font-size:clamp(34px,6vw,64px); line-height:.98; letter-spacing:-.015em; }
.display em{ font-style:italic; color:var(--clay); }
h2{ font-size:clamp(23px,3vw,35px); letter-spacing:-.01em; }
h3{ font-size:clamp(18px,1.6vw,21px); }
p{ margin:0 0 1.1em; }
.lead{ font-family:var(--body); font-size:clamp(17px,1.5vw,21px); line-height:1.55; color:var(--ink2); }
.muted{ color:var(--ink3); }
.serif-note{ font-family:var(--body); font-style:italic; color:var(--ink2); }
strong{ color:var(--ink); font-weight:600; }
.eyebrow{ font-family:var(--ui); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--moss); }

/* ---------- nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(243,238,226,.82); backdrop-filter:blur(8px);
  border-bottom:1.5px solid var(--line);
}
.site-nav .nav-in{
  display:flex; align-items:center; gap:18px;
  padding-block:11px; min-height:60px;
}
.brand{ display:inline-flex; align-items:center; gap:10px; color:var(--ink); flex:0 0 auto; }
.brand:hover{ color:var(--ink); }
.brand .mark{ width:30px; height:30px; flex:0 0 auto; }
.brand .wordmark{ font-family:var(--serif); font-weight:600; font-size:21px; letter-spacing:-.01em; line-height:1; }
.brand .wordmark .lp{ color:var(--forest); }
.nav-links{ display:flex; align-items:center; gap:4px; margin-left:auto; flex-wrap:wrap; }
.nav-links a{
  font-family:var(--body); font-size:14.5px; font-weight:600; color:var(--ink2);
  padding:8px 15px; border-radius:999px; transition:.18s; white-space:nowrap;
}
.nav-links a:hover{ color:var(--ink); background:rgba(255,255,255,.5); }
.nav-links a.on{ background:var(--forest); color:#f3efe2; box-shadow:0 6px 16px rgba(51,69,47,.28); }
.nav-links a.on:hover{ color:#f3efe2; }
.nav-cta{ flex:0 0 auto; }

/* ---------- buttons ---------- */
.btn{
  font-family:var(--ui); font-weight:600; font-size:14.5px; letter-spacing:.01em;
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 22px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .16s, box-shadow .16s, background .16s, border-color .16s;
  text-align:center;
}
.btn svg{ width:17px; height:17px; }
.btn--clay{ background:var(--clay); color:#fff; box-shadow:0 8px 22px -12px rgba(176,85,47,.8); }
.btn--clay:hover{ background:var(--clay-d); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn--forest{ background:var(--forest); color:#f3efe2; }
.btn--forest:hover{ background:#22382a; color:#f3efe2; transform:translateY(-2px); }
.btn--ghost{ background:rgba(255,255,255,.4); color:var(--ink2); border-color:var(--line); }
.btn--ghost:hover{ color:var(--ink); border-color:var(--clay); }
.btn--lg{ padding:15px 28px; font-size:16px; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* ---------- cards ---------- */
.card-grid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); }
.card-grid.cols-3{ grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
.card{
  background:var(--panel); border:1px solid var(--cardline); border-radius:16px;
  box-shadow:var(--shadow); overflow:hidden; position:relative;
  transition:transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s, border-color .24s;
  display:flex; flex-direction:column;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--cardline-strong); }
.card__body{ padding:22px; }
.card__icon{ width:30px; height:30px; margin-bottom:13px; color:var(--moss); }
.card h3{ margin-bottom:.35em; }
.card p{ font-size:15px; color:var(--ink2); margin:0; }
.card .small{ font-size:13px; }
/* category art band */
.card__art{ height:104px; border-bottom:1px solid var(--cardline); position:relative; display:flex; align-items:center; padding-left:20px; }
.card__art img{ width:42px; height:42px; }
.art-maple{ background:linear-gradient(135deg,var(--cat-maple-a),var(--cat-maple-b)); }
.art-tree{ background:linear-gradient(135deg,var(--cat-tree-a),var(--cat-tree-b)); }
.art-conifer{ background:linear-gradient(135deg,var(--cat-conifer-a),var(--cat-conifer-b)); }
.art-shrub{ background:linear-gradient(135deg,var(--cat-shrub-a),var(--cat-shrub-b)); }
.art-hydrangea{ background:linear-gradient(135deg,var(--cat-hydrangea-a),var(--cat-hydrangea-b)); }
.art-perennial{ background:linear-gradient(135deg,var(--cat-perennial-a),var(--cat-perennial-b)); }
.art-grass{ background:linear-gradient(135deg,var(--cat-grass-a),var(--cat-grass-b)); }

/* ---------- badges / swatches ---------- */
.badge{
  font-family:var(--ui); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; padding:4px 11px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; line-height:1;
}
.badge--new{ background:var(--moss); } .badge--existing{ background:var(--stone); }
.badge--spring{ background:var(--spring); } .badge--summer{ background:var(--summer); }
.badge--fall{ background:var(--fall); } .badge--winter{ background:var(--winter); }
.badge--alpha{ background:transparent; color:var(--clay-d); border:1px solid var(--clay); }
.swatch-row{ display:flex; gap:7px; }
.swatch{ width:34px; height:34px; border-radius:8px; box-shadow:inset 0 0 0 1px rgba(35,42,29,.12); }
.sw-spring{ background:var(--spring); } .sw-summer{ background:var(--summer); }
.sw-fall{ background:var(--fall); } .sw-winter{ background:var(--winter); }
.tag{ font-family:var(--ui); font-size:13px; font-weight:600; color:var(--ink2);
  border:1px solid var(--cardline); background:rgba(255,255,255,.45); padding:7px 14px; border-radius:999px;
  display:inline-flex; align-items:center; gap:8px; }
.tag img{ width:18px; height:18px; }
.tag-row{ display:flex; flex-wrap:wrap; gap:10px; }

/* ---------- plan-sheet figure (sheet-grain + frame, verbatim from app) ---------- */
.sheet{ position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:8px; box-shadow:var(--shadow); overflow:hidden; }
.sheet-grain{ position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:repeating-linear-gradient(0deg,transparent 0 19px,var(--line-soft) 19px 20px),
                   repeating-linear-gradient(90deg,transparent 0 19px,var(--line-soft) 19px 20px); z-index:0; }
.frame{ position:absolute; inset:8px; border:1px solid var(--line-soft); border-radius:3px; pointer-events:none; z-index:6; }
.sheet img{ display:block; position:relative; z-index:2; width:100%; }
.figure-cap{ font-family:var(--ui); font-size:12px; letter-spacing:.04em; color:var(--ink3);
  margin-top:10px; display:flex; align-items:center; gap:8px; }

/* ---------- split / steps / audiences ---------- */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center; }
.split.rev .split-media{ order:-1; }
.step{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; padding-block:clamp(28px,4vw,46px); }
.step + .step{ border-top:1px solid var(--line-soft); }
.step:nth-child(even) .step-media{ order:-1; }
.step-no{ font-family:var(--serif); font-size:15px; font-weight:600; color:#fff; background:var(--clay);
  width:34px; height:34px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px; }
.aud{ display:grid; grid-template-columns:200px 1fr; gap:clamp(24px,4vw,52px); align-items:start;
  padding-block:clamp(30px,4.5vw,56px); }
.aud + .aud{ border-top:1px solid var(--line-soft); }
.aud-glyph{ width:120px; height:120px; }
.aud h2{ margin-bottom:.5em; }
.now-next{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:8px; }
.now-next .col h4{ font-family:var(--ui); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; margin:0 0 12px; }
.now-next .now h4{ color:var(--forest); } .now-next .next h4{ color:var(--clay); }
.now-next ul{ margin:0; padding:0; list-style:none; }
.now-next li{ position:relative; padding-left:22px; margin-bottom:10px; font-size:15.5px; color:var(--ink2); }
.now-next li::before{ content:""; position:absolute; left:2px; top:9px; width:8px; height:8px; border-radius:2px; }
.now-next .now li::before{ background:var(--moss); }
.now-next .next li::before{ background:var(--clay-l); border:1px solid var(--clay); background:transparent; }

/* ---------- ledger (works today / coming) ---------- */
.ledger{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--cardline);
  border-radius:16px; overflow:hidden; background:var(--panel); box-shadow:var(--shadow); }
.ledger--single{ grid-template-columns:1fr; }
.ledger .col{ padding:clamp(22px,3vw,32px); }
.ledger .col + .col{ border-left:1px solid var(--line-soft); }
.ledger h3{ display:flex; align-items:center; gap:10px; font-family:var(--ui); font-size:13px;
  letter-spacing:.12em; text-transform:uppercase; font-weight:700; }
.ledger .today h3{ color:var(--forest); } .ledger .coming h3{ color:var(--clay); }
.ledger ul{ list-style:none; margin:0; padding:0; }
.ledger li{ position:relative; padding-left:24px; margin-bottom:11px; color:var(--ink2); font-size:15.5px; }
.ledger li::before{ position:absolute; left:0; top:0; font-family:var(--ui); font-weight:700; }
.ledger .today li::before{ content:"\2713"; color:var(--moss); }
.ledger .coming li::before{ content:"\2192"; color:var(--clay-l); }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; background:var(--forest); color:#f0ecde; border-radius:20px;
  padding:clamp(34px,5vw,60px) clamp(26px,4vw,54px); overflow:hidden; text-align:center; }
.cta-band h2{ color:#fbf8f0; }
.cta-band p{ color:#cdd4b4; max-width:560px; margin-inline:auto; }
.cta-band .btn--clay{ box-shadow:0 12px 30px -14px rgba(0,0,0,.6); }
.cta-band .grain{ position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:repeating-linear-gradient(0deg,transparent 0 23px,rgba(255,255,255,.05) 23px 24px),
                   repeating-linear-gradient(90deg,transparent 0 23px,rgba(255,255,255,.05) 23px 24px); }
.cta-band > *{ position:relative; z-index:1; }

/* ---------- hero ---------- */
.hero{ padding-top:clamp(38px,5vw,72px); padding-bottom:clamp(34px,5vw,64px); }
.hero-grid{ display:grid; grid-template-columns:1.02fr 1.1fr; gap:clamp(28px,4.5vw,60px); align-items:center; }
.hero .display{ margin-bottom:.5em; }
.hero-note{ font-family:var(--ui); font-size:13px; color:var(--ink3); margin-top:18px;
  display:inline-flex; align-items:center; gap:8px; }
.hero-note .dot{ width:8px; height:8px; border-radius:999px; background:var(--moss); box-shadow:0 0 0 4px rgba(95,115,80,.18); }
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.5vw,30px); margin-top:30px; align-items:start; }
.stat .n{ font-family:var(--serif); font-size:clamp(26px,3vw,34px); font-weight:600; color:var(--forest); line-height:1; }
.stat .l{ font-family:var(--ui); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); margin-top:5px; }
.hero-img{ display:block; width:100%; height:auto; border-radius:12px; border:1px solid var(--cardline);
  box-shadow:var(--shadow-lg); background:var(--panel); }
.hero-solo{ max-width:920px; margin-inline:auto; text-align:center; }
.hero-solo .lead{ max-width:60ch; margin-inline:auto; }
.hero-solo .btn-row, .hero-solo .stat-row{ justify-content:center; }
.hero-solo .hero-note{ justify-content:center; }

/* ---------- footer ---------- */
.site-foot{ border-top:1.5px solid var(--line); background:rgba(236,229,213,.5); margin-top:20px; }
.foot-in{ display:grid; grid-template-columns:1.3fr 1fr 1.4fr; gap:clamp(24px,4vw,52px); padding-block:clamp(38px,5vw,58px); }
.foot-in h4{ font-family:var(--ui); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); margin:0 0 14px; font-weight:700; }
.foot-links{ display:flex; flex-direction:column; gap:9px; }
.foot-links a{ color:var(--ink2); font-size:15px; }
.foot-links a:hover{ color:var(--clay); }
.alpha-note{ background:var(--panel); border:1px solid var(--cardline); border-radius:16px; padding:20px 22px; box-shadow:var(--shadow); }
.alpha-note .badge{ margin-bottom:10px; }
.alpha-note p{ font-size:14.5px; color:var(--ink2); margin:0; }
.foot-base{ border-top:1px solid var(--line-soft); padding-block:18px; display:flex; flex-wrap:wrap;
  gap:10px 24px; align-items:center; font-family:var(--ui); font-size:12.5px; color:var(--ink3); }
.foot-base .zone{ margin-left:auto; }
.credit{ font-size:11.5px; color:var(--ink3); margin-top:10px; }

/* ---------- small utilities ---------- */
.foot-blurb{ margin-top:14px; max-width:38ch; font-size:14.5px; color:var(--ink2); }
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.mt-s{ margin-top:18px; } .mt-m{ margin-top:30px; }
.maxw{ max-width:62ch; } .maxw.mx-auto{ margin-inline:auto; }
.lead + .btn-row{ margin-top:26px; }
.split-text p:last-child, .step-text p:last-child{ margin-bottom:0; }

/* ---------- responsive ---------- */
@media (max-width:920px){
  .hero-grid,.split,.step,.ledger,.now-next,.foot-in{ grid-template-columns:1fr; }
  .step:nth-child(even) .step-media{ order:0; }
  .split.rev .split-media{ order:1; } .split.rev .split-text{ order:0; }
  .ledger .col + .col{ border-left:none; border-top:1px solid var(--line-soft); }
  .aud{ grid-template-columns:1fr; }
  .aud-glyph{ width:88px; height:88px; }
}
@media (max-width:720px){
  body{ font-size:16px; }
  .site-nav .nav-in{ flex-wrap:wrap; gap:10px 14px; }
  .nav-links{ order:3; width:100%; margin-left:0; gap:2px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:4px; flex-wrap:nowrap; }
  .nav-links a{ padding:7px 12px; font-size:14px; }
  .nav-cta{ margin-left:auto; }
  .foot-base .zone{ margin-left:0; width:100%; }
}
@media (max-width:560px){
  .btn-row{ gap:10px; } .btn{ width:100%; justify-content:center; }
  .btn-row .btn{ width:auto; } .stat-row{ grid-template-columns:repeat(2,1fr); gap:20px 16px; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
  .card:hover,.btn--clay:hover,.btn--forest:hover{ transform:none; }
}