/* ── home.css — the landing: one tree, then today ───────────────────────── */

.hero { text-align:center; padding:clamp(2.2rem,6vw,3.6rem) 0 .5rem; max-width:60ch;
  margin:0 auto; }
.hero h1 { font-size:clamp(2.3rem,6vw,4rem); margin-bottom:.35rem; }
.hero .kicker { font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.1rem,2.6vw,1.5rem); color:var(--sap-deep); margin-bottom:1rem; }
.hero .lede { font-size:1.1rem; color:var(--ink-2); }
.hero .cta { display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin-top:1.4rem; }

/* ── Today band — sits on the soil line ─────────────────────────────────── */
.today { background:var(--soil-soft); border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); }
.today-inner{ max-width:var(--wrap); margin:0 auto; padding:2.2rem clamp(1rem,4vw,2rem); }
.today-head{ display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.today-head h2{ margin:0; font-size:1.5rem; }
.today-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.slot { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.2rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; }
.slot-when{ display:flex; align-items:center; gap:.5rem; font-size:.74rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
.slot-dot{ width:9px; height:9px; border-radius:50%; background:var(--line-strong); }
.slot.done .slot-dot{ background:var(--sap); box-shadow:0 0 0 3px color-mix(in srgb,var(--sap) 25%,transparent); }
.slot-body{ font-family:var(--font-display); font-size:1.12rem; line-height:1.45; }
.slot-mark{ margin-top:auto; align-self:flex-start; font-size:.85rem; padding:.4rem .8rem; }

/* ── Sections ───────────────────────────────────────────────────────────── */
.section{ padding:clamp(3rem,7vw,5rem) 0; }
.sec-head{ max-width:56ch; margin-bottom:2rem; }
.sec-head h2{ margin-bottom:.4rem; }
.sec-head p{ color:var(--ink-2); margin:0; }

.gateways{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.gw { display:block; text-decoration:none; color:inherit; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5rem;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }
.gw:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--sap); }
.gw-mark{ font-size:1.6rem; line-height:1; margin-bottom:.7rem; color:var(--accent,var(--sap-deep)); }
.gw h3{ margin:0 0 .35rem; }
.gw p{ color:var(--ink-2); font-size:.95rem; margin:0 0 .8rem; }
.gw-go{ font-size:.88rem; font-weight:600; color:var(--sap-deep); }

/* ── The claim strip ────────────────────────────────────────────────────── */
.claim { background:linear-gradient(180deg,var(--canopy-050),var(--root-050));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.claim-inner{ max-width:60ch; margin:0 auto; padding:clamp(3rem,7vw,4.5rem) clamp(1rem,4vw,2rem);
  text-align:center; }
.claim blockquote{ margin:0 0 1.2rem; font-family:var(--font-display);
  font-size:clamp(1.3rem,3vw,1.85rem); line-height:1.35; }
.claim .who{ color:var(--ink-3); font-size:.9rem; }

/* ── Principles row ─────────────────────────────────────────────────────── */
.pgrid{ display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.pcell h4{ font-family:var(--font-display); font-size:1.08rem; margin:0 0 .35rem; }
.pcell p{ color:var(--ink-2); font-size:.93rem; margin:0; }
.pcell .mark{ font-size:1.3rem; color:var(--sap-deep); margin-bottom:.5rem; }