/*
 * Tilth landing page
 * Colors + typography ported from Garden/Views/Components/DesignTokens.swift
 * so the site reads as one product with the app.
 */

:root {
  /* Paper palette — warm cream base, matches GT.paper / paperDim / paperDeep */
  --paper: oklch(0.965 0.012 75);
  --paper-dim: oklch(0.93 0.015 72);
  --paper-deep: oklch(0.90 0.018 72);

  /* Paper gradient endpoints (GT.paperBackground radial gradient) */
  --paper-grad-start: oklch(0.91 0.02 68);
  --paper-grad-end: oklch(0.88 0.02 72);

  /* Ink — dark warm browns for text */
  --ink: oklch(0.22 0.018 55);
  --ink-dim: oklch(0.38 0.014 55);
  --ink-mute: oklch(0.55 0.012 55);

  /* Rule lines */
  --rule: oklch(0.82 0.018 70);
  --rule-soft: oklch(0.88 0.015 72);

  /* Terracotta accent — GT.accent / accentDim / accentDeep */
  --accent: oklch(0.54 0.125 40);
  --accent-dim: oklch(0.88 0.04 45);
  --accent-deep: oklch(0.42 0.13 40);

  /* Typography
   *
   * Serif stack prioritizes 'New York' (Apple's system serif — what the
   * app uses via `.design(.serif)`), then `ui-serif` which resolves to
   * New York on iOS Safari automatically, then Source Serif 4 as a
   * hand-picked fallback for non-Apple browsers (warmer + wider
   * proportions than Instrument Serif — closer to New York's feel).
   */
  --font-serif: 'New York', ui-serif, 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, 'Menlo', monospace;

  /* Layout */
  --container: 1080px;
  --gutter: clamp(24px, 5vw, 64px);
  --radius-md: 12px;
  --radius-lg: 20px;
}

/* ---------- Reset ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background:
    radial-gradient(
      circle at 20% 0%,
      var(--paper-grad-start) 0%,
      var(--paper-grad-end) 80%
    )
    fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--accent-deep);
}

/* ---------- Typography primitives ---------- */

.display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(42px, 8vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.section-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 18px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 20px;
}

.lede {
  font-size: clamp(18px, 2vw, 20px);
  line-height: 1.5;
  color: var(--ink-dim);
  max-width: 34em;
}

.body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 34em;
  margin-bottom: 14px;
}

.body-muted {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: 34em;
}

strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Hero ---------- */

.hero {
  padding: clamp(56px, 9vw, 112px) var(--gutter) clamp(32px, 5vw, 56px);
}

.hero-inner {
  max-width: var(--container);
  margin: 0 auto;
}

.hero-icon {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(42, 31, 24, 0.08),
    0 8px 24px rgba(42, 31, 24, 0.10);
  margin-bottom: 28px;
  display: block;
}

.hero .lede {
  margin-top: 24px;
}

.app-store {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  padding: 14px 22px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: background 0.15s ease, transform 0.15s ease;
}

.app-store:hover {
  background: var(--accent-deep);
  color: var(--paper);
  transform: translateY(-1px);
}

.app-store-arrow {
  transition: transform 0.2s ease;
}

.app-store:hover .app-store-arrow {
  transform: translate(2px, -2px);
}

.coming-soon {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------- Screenshot gallery ---------- */
/*
 * Desktop: flex row with 3 shots visible, rest off-screen right, horizontal
 *          scroll via trackpad / shift-scroll.
 * Mobile: same horizontal scroll, snaps to each shot.
 * The App Store screenshots are already complete marketing units with
 * headlines baked in, so they don't need captions or hover states — the
 * gallery just presents them.
 */

.gallery {
  padding: 0 0 clamp(48px, 7vw, 88px);
  overflow: hidden;
}

.gallery-track {
  display: flex;
  gap: 24px;
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge legacy */
}

.gallery-track::-webkit-scrollbar {
  display: none; /* Safari/Chrome */
}

.shot {
  flex: 0 0 auto;
  width: clamp(240px, 22vw, 300px);
  border-radius: 28px;
  overflow: hidden;
  scroll-snap-align: start;
  box-shadow:
    0 1px 2px rgba(42, 31, 24, 0.08),
    0 24px 60px rgba(42, 31, 24, 0.12);
  background: var(--ink);
}

.shot img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Narrative blocks (text-only feature sections) ---------- */

.narrative {
  padding: clamp(40px, 5.5vw, 80px) var(--gutter);
}

.narrative-inner {
  max-width: var(--container);
  margin: 0 auto;
}

/*
 * Alternating "alt" blocks get a subtle paper-dim band behind them, so the
 * three narrative sections read as three beats rather than one long column.
 * The band bleeds edge-to-edge; content stays centered in the container.
 */
.narrative--alt {
  background: var(--paper-dim);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}

/* ---------- Pricing ---------- */

.pricing {
  padding: clamp(48px, 7vw, 96px) var(--gutter);
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.pricing .eyebrow {
  display: inline-block;
}

.pricing .body,
.pricing .body-muted {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Footer ---------- */

footer {
  margin-top: clamp(48px, 7vw, 88px);
  padding: clamp(32px, 5vw, 56px) var(--gutter);
  border-top: 1px solid var(--rule-soft);
  background: var(--paper-dim);
}

.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
}

.wordmark-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.wordmark {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--accent);
  font-weight: 400;
  letter-spacing: -0.005em;
}

.footer-nav {
  display: flex;
  gap: 28px;
  justify-content: center;
}

.footer-nav a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.footer-nav a:hover {
  color: var(--accent);
}

.copyright {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  text-align: right;
}

/* ---------- Responsive ---------- */

@media (max-width: 760px) {
  .shot {
    /* Narrower than full viewport so the edge of the next screenshot
       peeks in, signalling "scroll for more" affordance. */
    width: min(66vw, 320px);
    border-radius: 22px;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }

  .wordmark-group {
    justify-content: center;
  }

  .footer-nav {
    justify-content: center;
  }

  .copyright {
    text-align: center;
  }
}

/* Dark-mode is intentionally left alone for v1.
   The app doesn't have a dark theme either — the paper palette is the brand. */


/* ============================================================
   Guide page — article layout + prose typography
   Scoped with body.guide-page so landing-page rules are untouched.
   ============================================================ */

body.guide-page {
  font-family: var(--font-sans);
}

/* Top bar: back link */
.guide-header {
  padding: 20px var(--gutter);
  border-bottom: 1px solid var(--rule-soft);
}

.guide-back {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.guide-back:hover {
  color: var(--ink);
}

/* Article shell */
.guide {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(56px, 9vw, 96px) var(--gutter) clamp(64px, 8vw, 96px);
}

/* Intro block */
.guide-intro {
  margin-bottom: 56px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--rule-soft);
}

.guide-intro .eyebrow {
  margin-bottom: 16px;
}

.guide-intro h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(36px, 5.5vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 20px;
}

.guide-intro .lede {
  max-width: none;
  margin-top: 8px;
}

/* Prose body */
.guide-body {
  color: var(--ink);
}

.guide-body p {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink-dim);
  margin-bottom: 1.2em;
}

.guide-body p > em:first-child:last-child,
.guide-body p.intro-em {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink);
}

.guide-body > :first-child {
  margin-top: 0;
}

.guide-body h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-top: 2.4em;
  margin-bottom: 0.6em;
  scroll-margin-top: 24px;
  position: relative;
}

.guide-body h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.2;
  color: var(--ink);
  margin-top: 2em;
  margin-bottom: 0.5em;
  scroll-margin-top: 24px;
  position: relative;
}

/* Hover-anchor links injected next to each H2/H3 by guide.html JS. */
.guide-body .heading-link {
  display: inline-block;
  margin-left: 0.4em;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  vertical-align: 0.18em;
  opacity: 0;
  border-bottom: none;
  text-decoration: none;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.guide-body h2:hover .heading-link,
.guide-body h3:hover .heading-link,
.guide-body .heading-link:focus-visible {
  opacity: 1;
}

.guide-body .heading-link:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.guide-body .heading-link.copied {
  opacity: 1;
  color: var(--accent);
}

/* On touch devices (no hover) keep the anchors faintly visible
   so users can still tap-to-copy. */
@media (hover: none) {
  .guide-body .heading-link {
    opacity: 0.45;
  }
}

.guide-body h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 1.8em;
  margin-bottom: 0.5em;
}

.guide-body ul,
.guide-body ol {
  margin: 0.6em 0 1.4em;
  padding-left: 1.4em;
}

.guide-body li {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-dim);
  margin-bottom: 0.4em;
}

.guide-body li > strong:first-child {
  color: var(--ink);
}

.guide-body blockquote {
  border-left: 3px solid var(--accent);
  padding: 0.2em 0 0.2em 1.2em;
  margin: 1.8em 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink);
}

.guide-body hr {
  border: none;
  border-top: 1px solid var(--rule-soft);
  margin: 3em 0;
}

.guide-body figure {
  margin: 2em 0;
}

.guide-body figure img {
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow:
    0 1px 2px rgba(42, 31, 24, 0.06),
    0 6px 18px rgba(42, 31, 24, 0.08);
}

.guide-body figcaption {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 12px;
  text-align: center;
}

.guide-body code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--paper-dim);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--ink);
}

.guide-body pre {
  background: var(--paper-dim);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  overflow-x: auto;
  margin: 1.6em 0;
  font-size: 14px;
  line-height: 1.55;
}

.guide-body pre code {
  background: none;
  padding: 0;
}

.guide-body a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-dim);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.guide-body a:hover {
  color: var(--accent-deep);
  border-bottom-color: var(--accent);
}

.guide-body strong {
  color: var(--ink);
  font-weight: 600;
}

.guide-body em {
  font-style: italic;
}

/* Tables (for the symptom × plant matrix and similar) */
.guide-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-size: 15px;
}

.guide-body th,
.guide-body td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule-soft);
  text-align: left;
  vertical-align: top;
}

.guide-body th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.guide-body td {
  color: var(--ink-dim);
}

/* Plant cards — Part 3 PNW plant guide.
   Each card is screenshot-ready for Pinterest pin generation, with a
   distinct visual treatment from the rest of the article body. */
.plant-card {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  padding: 32px 36px 24px;
  margin: 2.5em 0;
  box-shadow:
    0 1px 3px rgba(42, 31, 24, 0.04),
    0 6px 18px rgba(42, 31, 24, 0.06);
}

.plant-card h3 {
  margin-top: 0;
  margin-bottom: 0.5em;
  color: var(--accent-deep);
}

.plant-card .card-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 1.6em;
  margin-bottom: 0.4em;
}

.plant-card ul {
  margin-top: 0.4em;
  margin-bottom: 1em;
}

.plant-card .card-footer {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  margin-top: 1.6em;
  margin-bottom: 0;
  text-align: right;
  border-top: 1px solid var(--rule-soft);
  padding-top: 14px;
}

@media (max-width: 640px) {
  .plant-card { padding: 24px 22px 20px; }
}

/* Pin embed — Pinterest pin images embedded in articles for recognition
   (reader from Pinterest sees the same pin again on the landing page)
   and re-pinning (Pinterest Save button can target embedded pins).
   Uses native lazy-loading so a reader landing at a deep section only
   downloads the pins they scroll past. */
.pin-embed {
  max-width: 480px;
  margin: 2.5em auto;
  display: block;
}

.pin-embed img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow:
    0 1px 3px rgba(42, 31, 24, 0.06),
    0 6px 18px rgba(42, 31, 24, 0.10);
}

.pin-embed figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 12px;
  text-align: center;
}

@media (max-width: 640px) {
  .pin-embed { max-width: 100%; }
}

/* Tilth callout — used for embedded diagnosis screenshots in context */
.tilth-callout {
  background: var(--paper-dim);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin: 2.5em 0;
}

.tilth-callout .eyebrow {
  margin-bottom: 10px;
}

.tilth-callout p {
  margin-bottom: 12px;
}

.tilth-callout figure {
  margin: 16px 0 0;
}

/* Outro — app CTA */
.guide-outro {
  margin-top: 96px;
  padding-top: 56px;
  border-top: 1px solid var(--rule-soft);
  text-align: left;
}

.guide-outro .eyebrow {
  margin-bottom: 16px;
}

.guide-outro h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 20px;
}

.guide-outro .lede {
  max-width: none;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .guide-body p,
  .guide-body li { font-size: 17px; line-height: 1.7; }
  .guide-body blockquote { font-size: 18px; }
}