/* Sherlock Garden landing page (www.sherlockgarden.com), ported from the design handoff in
   docs/design-handoff/sherlock-garden-landing/. Every inline style of the reference lives here,
   because the page's CSP allows no inline styles. Two deliberate changes (spec §3.3): smooth
   scrolling only when reduced motion isn't asked for, and muted text sitting directly on the
   cream page darkened to --muted-on-cream for contrast (spec ruling 19). */

:root {
  --green-950: #122b1d;
  --green-900: #1b4332;
  --green-700: #2d6a4f;
  --green-500: #52b788;
  --green-300: #95d5b2;
  --green-100: #d8f3dc;
  --cream: #f6f8f2;
  --card: #ffffff;
  --text: #1c2b22;
  --muted: #66786c;
  --muted-on-cream: #5f7165;
  --line: #eef2ec;
  --line-soft: #f0f4ef;
  --input-border: #dfe7dc;
  --red: #c0392b;
  --red-soft: #fdecea;
  --amber: #b9770e;
  --amber-soft: #fdf3e3;
  --violet-soft: #ede7f6;
  --sun: #fdf3da;
  --wind: #e9f1f5;
  --shadow: 0 1px 2px rgba(18, 43, 29, 0.05), 0 4px 16px rgba(18, 43, 29, 0.06);
  --hero-gradient: linear-gradient(150deg, #122b1d 0%, #1b4332 45%, #2d6a4f 100%);
  --thumb-gradient: linear-gradient(135deg, #d8f3dc, #eef7ef);
}

*, *::before, *::after { box-sizing: border-box; }

/* The success panel and the form swap with the hidden attribute; their display:flex mustn't undo it. */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--green-700); text-decoration: none; }
a:hover { color: var(--green-900); text-decoration: underline; }

.page { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--hero-gradient);
  border-radius: 0 0 28px 28px;
  color: #fff;
}

.hero-watermark {
  position: absolute;
  top: -80px;
  right: -60px;
  font-size: 420px;
  line-height: 1;
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
}

.hero-bar {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand-icon { width: 34px; height: 34px; display: block; }
.brand-name { font-weight: 800; font-size: 1.1rem; letter-spacing: -0.01em; }

.pill-link {
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  padding: 9px 16px;
  border-radius: 999px;
  font-weight: 650;
  font-size: 0.85rem;
  text-decoration: none;
  transition: transform 0.12s ease;
}
.pill-link:hover { color: #fff; text-decoration: none; }
.pill-link:active { transform: scale(0.97); }

.hero-grid {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 24px 72px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 56px;
  align-items: center;
}

.hero-copy { display: flex; flex-direction: column; gap: 22px; }

.status-pill {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 650;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-300); }

.hero-title {
  margin: 0;
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-wrap: balance;
}

.hero-lead {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--green-100);
  max-width: 30em;
  text-wrap: pretty;
}

.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 6px; }

.cta {
  background: #fff;
  color: var(--green-900);
  padding: 15px 24px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.12s ease;
}
.cta:hover { color: var(--green-900); text-decoration: none; }
.cta:active { transform: scale(0.97); }

.cta-note { color: var(--green-300); font-size: 0.9rem; }

/* ---------- The phone mockup (decorative, aria-hidden in the page) ---------- */
.phone-wrap { display: flex; justify-content: center; }

.phone {
  width: 100%;
  max-width: 340px;
  background: var(--green-950);
  border-radius: 44px;
  padding: 10px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}

.phone-screen { background: var(--cream); border-radius: 36px; overflow: hidden; color: var(--text); }

.phone-hero {
  position: relative;
  overflow: hidden;
  background: var(--hero-gradient);
  border-radius: 0 0 22px 22px;
  padding: 30px 18px 20px;
  color: #fff;
}
.phone-watermark { position: absolute; top: -20px; right: -18px; font-size: 120px; opacity: 0.12; }
.phone-greeting { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.phone-date { font-size: 0.78rem; color: var(--green-300); margin-top: 4px; }
.phone-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.12);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 650;
}
.phone-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff8a70; }

.phone-tasks { padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px; }
.phone-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); }

.task {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--task-color);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
}
.task-overdue { --task-color: var(--red); --task-soft: var(--red-soft); }
.task-due { --task-color: var(--amber); --task-soft: var(--amber-soft); }
.task-upcoming { --task-color: var(--green-700); --task-soft: var(--green-100); }
.task-thumb {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--thumb-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.task-text { min-width: 0; flex: 1; }
.task-name { font-weight: 750; font-size: 0.84rem; color: var(--green-900); }
.task-job { font-size: 0.74rem; color: var(--muted); }
.task-badge {
  background: var(--task-soft);
  color: var(--task-color);
  font-size: 0.64rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.phone-tabs {
  display: flex;
  justify-content: space-around;
  padding: 10px 8px 14px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.88);
  margin-top: 8px;
  font-size: 0.62rem;
  color: var(--muted);
}
.phone-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 6px; }
.phone-tab.is-active {
  color: var(--green-700);
  font-weight: 650;
  background: var(--green-100);
  border-radius: 999px;
  padding: 4px 12px;
}
.phone-tab-icon { font-size: 1rem; }

/* ---------- Section labels and headings ---------- */
.eyebrow { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); }
.eyebrow-cream { color: var(--muted-on-cream); }

.section-title {
  margin: 0;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--green-900);
  text-wrap: balance;
}

/* ---------- What it does ---------- */
.features { max-width: 1120px; margin: 0 auto; padding: 88px 24px 24px; width: 100%; }
.features-eyebrow { margin-bottom: 14px; }
.features-title { margin-bottom: 40px; max-width: 20em; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
}

.feature {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.tint-red { background: var(--red-soft); }
.tint-sun { background: var(--sun); }
.tint-wind { background: var(--wind); }
.tint-violet { background: var(--violet-soft); }
.feature-title { margin: 0; font-weight: 750; font-size: 1.05rem; color: var(--green-900); letter-spacing: -0.01em; }
.feature-body { margin: 0; font-size: 0.93rem; line-height: 1.5; color: var(--muted); text-wrap: pretty; }

/* ---------- Always the why ---------- */
.why {
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 24px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 40px;
  align-items: center;
}
.why-copy { display: flex; flex-direction: column; gap: 14px; }
.why-text {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--muted-on-cream);
  max-width: 30em;
  text-wrap: pretty;
}

.why-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.why-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.why-thumb {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--thumb-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
.why-plant { flex: 1; }
.why-plant-name { font-weight: 750; color: var(--green-900); }
.why-plant-meta { font-size: 0.8rem; color: var(--muted); }

.why-task {
  padding: 16px 18px;
  border-left: 4px solid var(--task-color);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.why-task-due {
  --task-color: var(--amber);
  --badge-bg: var(--amber-soft);
  --badge-text: var(--amber);
  border-bottom: 1px solid var(--line-soft);
}
.why-task-soon { --task-color: var(--green-500); --badge-bg: var(--green-100); --badge-text: var(--green-900); }
.why-task-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.why-task-name { font-weight: 650; }
.why-badge {
  background: var(--badge-bg);
  color: var(--badge-text);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.why-task-reason { margin: 0; font-size: 0.88rem; color: var(--muted); line-height: 1.45; }

/* ---------- The invite card ---------- */
.invite { max-width: 1120px; margin: 0 auto; padding: 40px 24px 88px; width: 100%; }

.invite-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
  padding: clamp(28px, 5vw, 56px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 40px;
}
.invite-card > * { min-width: 0; }

.invite-copy { display: flex; flex-direction: column; gap: 14px; }
.invite-text { margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.invite-hints {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--text);
}

.invite-form { position: relative; display: flex; flex-direction: column; gap: 16px; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field-label { font-size: 0.85rem; font-weight: 650; color: var(--green-900); }
.field-input {
  font: inherit;
  font-size: 1rem;
  padding: 14px 16px;
  border: 1px solid var(--input-border);
  border-radius: 12px;
  background: var(--cream);
  color: var(--text);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.field-input:focus { border-color: var(--green-500); background: #fff; }
.field-input[aria-invalid='true'] { border-color: var(--red); }
.field-textarea { resize: vertical; line-height: 1.45; }

input::placeholder, textarea::placeholder { color: var(--muted-on-cream); }
input:focus-visible, textarea:focus-visible { outline: 2px solid #2d6a4f; outline-offset: 1px; }

/* The honeypot: off-screen rather than display:none or type=hidden, so simple bots still fill it. */
.invite-honeypot { position: absolute; left: -10000px; top: 0; width: 1px; height: 1px; overflow: hidden; }

.invite-error {
  margin: 0;
  background: var(--red-soft);
  color: var(--red);
  font-size: 0.88rem;
  font-weight: 650;
  padding: 10px 14px;
  border-radius: 12px;
}
.invite-error:empty { display: none; }

/* The Turnstile widget and its note. With nothing to show (the usual, invisible check) the
   wrapper is 0px tall and its negative margin takes back the form gap it would add, so the
   handoff's spacing holds. landing.js adds .has-challenge when Cloudflare shows a challenge,
   and removes it when the widget is reset, so the widget keeps its room until then.
   The container is never display:none: landing.js measures its width before rendering. */
.invite-check { display: flex; flex-direction: column; margin-top: -16px; }
.invite-turnstile { max-width: 100%; }
.invite-check.has-challenge .invite-turnstile { margin-top: 16px; }
.invite-check-note { margin: 0; font-size: 0.88rem; font-weight: 650; color: var(--green-900); }
.invite-check-note:not(:empty) { margin-top: 16px; }

.invite-submit {
  font: inherit;
  font-weight: 650;
  font-size: 1rem;
  background: var(--green-700);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 15px 20px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.12s ease;
}
.invite-submit:hover:not(:disabled) { background: var(--green-900); }
.invite-submit:active:not(:disabled) { transform: scale(0.97); }
.invite-submit:disabled { cursor: not-allowed; }
.invite-submit[aria-disabled='true'] { cursor: progress; }

/* "Please turn on JavaScript…". landing.js removes .no-js-note as it starts; the note waits
   1.5s before showing so it never flashes while landing.js loads. With scripting off, the
   <noscript> copy of the line shows at once and this one stays out of the way. */
.invite-nojs { margin: 0; font-size: 0.85rem; font-weight: 650; color: var(--red); }
.no-js-note { visibility: hidden; animation: no-js-reveal 0s linear 1.5s forwards; }
.invite-form:has(noscript p) .no-js-note { display: none; }
@keyframes no-js-reveal { to { visibility: visible; } }

.invite-fine { margin: 0; font-size: 0.8rem; color: var(--muted); }
.invite-privacy { margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.invite-privacy a { text-decoration: underline; }

.invite-sent,
.invite-closed {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  background: var(--green-100);
  border-radius: 18px;
  padding: 32px;
}
.invite-sent-emoji { font-size: 2.2rem; }
.invite-sent-title,
.invite-closed-title { margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; color: var(--green-900); }
.invite-sent-text,
.invite-closed-text { margin: 0; font-size: 0.98rem; line-height: 1.5; color: var(--green-900); overflow-wrap: anywhere; }
.invite-again {
  font: inherit;
  font-weight: 650;
  font-size: 0.88rem;
  background: none;
  border: none;
  color: var(--green-700);
  padding: 0;
  cursor: pointer;
  margin-top: 4px;
  transition: transform 0.12s ease;
}
.invite-again:hover { color: var(--green-900); text-decoration: underline; }
.invite-again:active { transform: scale(0.97); }

/* ---------- Footer ---------- */
.footer { margin-top: auto; border-top: 1px solid var(--line); }
.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--muted-on-cream);
}
.footer-brand { display: flex; align-items: center; gap: 8px; }
.footer-icon { width: 22px; height: 22px; display: block; }
.footer-name { font-weight: 700; color: var(--green-900); }