/* WindowWise — site-wide stylesheet. Meadow-themed: warm sky over
   rolling green hills, sun-yellow accent, leaf-green CTA. Mobile-first.

   Drop a 1920x1080 meadow-hero.jpg at /assets/meadow-hero.jpg and
   uncomment the background-image line in .hero-bg below to swap the
   SVG meadow for a real photographic backdrop. */

:root {
  color-scheme: light;
  --meadow-sky-top: #a3d2ec;
  --meadow-sky-mid: #c8e4f1;
  --meadow-sky-low: #e6f0d8;
  --meadow-cream: #f7f4ec;
  --meadow-cream-warm: #fbf8ee;
  --leaf-deep: #1a2c20;
  --leaf-mid: #2c7d52;
  --leaf-bright: #3da06b;
  --leaf-soft: #4a5d52;
  --leaf-faded: #889589;
  --sun-warm: #f5d76e;
  --sun-bright: #fff8df;
  --grass-deep: #6b9a3a;
  --grass-bright: #92b850;
  --line-soft: rgba(31, 48, 36, 0.08);
  --line-strong: rgba(31, 48, 36, 0.16);
  --shadow-sm: 0 1px 2px rgba(31, 48, 36, 0.04), 0 1px 3px rgba(31, 48, 36, 0.06);
  --shadow-md: 0 2px 6px rgba(31, 48, 36, 0.05), 0 4px 16px rgba(31, 48, 36, 0.08);
  --shadow-lg: 0 4px 12px rgba(31, 48, 36, 0.06), 0 12px 36px rgba(31, 48, 36, 0.10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--leaf-deep);
  background: var(--meadow-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--leaf-mid); text-decoration: none; transition: color 0.15s ease; }
a:hover { text-decoration: underline; }

/* ---------- Top nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 244, 236, 0.78);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  font-weight: 700;
  font-size: 18px;
  color: var(--leaf-deep);
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.brand-leaf {
  width: 26px;
  height: 26px;
  display: inline-block;
  flex: 0 0 auto;
}
.nav-links {
  display: flex;
  gap: 24px;
  font-size: 14px;
  font-weight: 500;
}
.nav-links a {
  color: var(--leaf-soft);
  white-space: nowrap;
  position: relative;
  padding: 4px 0;
  transition: color 0.18s ease;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--leaf-mid);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s ease;
}
.nav-links a:hover { color: var(--leaf-deep); text-decoration: none; }
.nav-links a:hover::after { transform: scaleX(1); }
@media (max-width: 520px) {
  .nav-inner { padding: 12px 16px; gap: 12px; }
  .nav-links { gap: 14px; font-size: 12px; }
  .brand { font-size: 15px; gap: 8px; }
  .brand-leaf { width: 22px; height: 22px; }
}

/* ---------- Hero (meadow scene) ---------- */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 640px;
  padding: 80px 20px 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 760px) {
  .hero {
    min-height: 520px;
    padding: 56px 20px 36px;
  }
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    /* Uncomment when meadow-hero.jpg lands */
    /* url(/assets/meadow-hero.jpg) center/cover, */
    linear-gradient(180deg,
      var(--meadow-sky-top) 0%,
      var(--meadow-sky-mid) 45%,
      var(--meadow-sky-low) 70%,
      #d8e8b6 88%,
      var(--grass-bright) 100%);
}
.hero-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
/* Sun — translates along an arc up-and-slightly-right then back to
   origin, with rays rotating around the disc center the whole time
   (so light moves WITH the sun). Halo breathing + disc pulse layer
   on top of the arc travel. Each element uses transform-box: fill-box
   + transform-origin: center so rotations/scales pivot around the
   sun's local center (0,0) regardless of where the parent has
   translated to.

   Color philosophy: warm cream + golden core = morning sun, not
   blazing midday. Opacity high enough to feel inviting, low enough
   not to dominate the scene. */
/* Outer sun position — anchors the sun in viewBox coords. On wide
   viewports the sun rises from behind the left hills (x=200) and
   pendulums all the way across to the right side. On narrow
   viewports the right edge of the viewBox is cropped off, so we
   shift the start anchor inward and shorten the arc — sun climbs
   up the left edge in a small arc and comes back, partially
   off-screen at the lowest point. */
.hero-svg .sun-position {
  transform: translate(200px, 520px);
}

.hero-svg .sun-arc-anim {
  animation: sun-arc-wide 220s ease-in-out infinite;
}
.hero-svg .sun-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: sun-halo-breathe 14s ease-in-out infinite;
}
.hero-svg .sun-disc {
  transform-box: fill-box;
  transform-origin: center;
  animation: sun-disc-pulse 10s ease-in-out infinite;
}
.hero-svg .sun-rays {
  transform-box: fill-box;
  transform-origin: center;
  animation: sun-rays-spin 110s linear infinite;
}

/* Wide viewport — full sunrise-to-sunset pendulum across the whole
   viewBox. Going behind the hero text mid-arc is intentional. */
@keyframes sun-arc-wide {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(450px, -260px); }
  50%  { transform: translate(900px, 0); }
  75%  { transform: translate(450px, -260px); }
  100% { transform: translate(0, 0); }
}

/* Narrow viewport — small arc anchored near the left edge of the
   visible viewBox area (which on phones is roughly viewBox X
   560-880 because preserveAspectRatio="slice" crops the sides).
   Sun climbs up the left edge a bit, peaks slightly right, comes
   back. Some halo bleeds into the cropped area — that's intentional
   per founder direction. */
@media (max-width: 760px) {
  .hero-svg .sun-position {
    transform: translate(540px, 540px);
  }
  .hero-svg .sun-arc-anim {
    animation: sun-arc-narrow 170s ease-in-out infinite;
  }
}
@keyframes sun-arc-narrow {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(140px, -240px); }
  100% { transform: translate(0, 0); }
}

@keyframes sun-halo-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.82; }
  50%      { transform: scale(1.05); opacity: 0.95; }
}
@keyframes sun-disc-pulse {
  0%, 100% { opacity: 0.96; }
  50%      { opacity: 1; }
}
@keyframes sun-rays-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Clouds — outer group sways left↔right then back across the sky
   (no abrupt snap to start), inner group bobs gently up↔down. The
   ease-in-out timing on the swing means clouds slow at each
   endpoint, like a real lazy afternoon breeze. Asynchronous
   durations + offsets so they never sync into a mechanical pattern. */
.hero-svg .cloud-drift {
  animation: drift-cross linear infinite;
}
.hero-svg .drift-1 { animation-duration: 36s; animation-delay:    0s; }
.hero-svg .drift-2 { animation-duration: 50s; animation-delay:  -16s; }
.hero-svg .drift-3 { animation-duration: 44s; animation-delay:  -28s; }
.hero-svg .drift-4 { animation-duration: 60s; animation-delay:  -40s; }

.hero-svg .cloud-bob {
  animation: cloud-bob ease-in-out infinite;
}
.hero-svg .bob-1 { animation-duration: 18s; animation-delay:  -2s; }
.hero-svg .bob-2 { animation-duration: 22s; animation-delay:  -8s; }
.hero-svg .bob-3 { animation-duration: 26s; animation-delay: -14s; }
.hero-svg .bob-4 { animation-duration: 20s; animation-delay:  -5s; }

/* Parade: spawn off-screen left (-300px clears the widest cloud's
   140px radius), travel across the 1440 viewBox at steady linear
   speed, exit off-screen right (1740px), then loop back to start.
   Asynchronous durations per cloud so they never sync up. */
@keyframes drift-cross {
  0%   { transform: translateX(-300px); }
  100% { transform: translateX(1740px); }
}
@keyframes cloud-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* Grass — slow asymmetric sway; rotates around the bottom of each
   blade. ease-in-out + asynchronous durations so the meadow whispers
   rather than flutters. */
.hero-svg .grass-blade {
  transform-origin: bottom center;
  animation: grass-sway 7s ease-in-out infinite;
}
.hero-svg .grass-blade-2 { animation-duration:  9s; animation-delay: -2s; }
.hero-svg .grass-blade-3 { animation-duration: 11s; animation-delay: -5s; }
@keyframes grass-sway {
  0%, 100% { transform: rotate(-1.5deg); }
  50%      { transform: rotate(1.5deg); }
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  text-align: center;
  color: var(--leaf-deep);
}
.hero h1 {
  font-size: clamp(38px, 6.4vw, 68px);
  font-weight: 700;
  margin: 0 0 18px;
  letter-spacing: -1.4px;
  line-height: 1.04;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.hero p {
  font-size: clamp(16px, 1.7vw, 20px);
  color: rgba(31, 48, 36, 0.82);
  max-width: 560px;
  margin: 0 auto 40px;
  line-height: 1.55;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn:hover {
  transform: translateY(-2px);
  text-decoration: none;
  box-shadow: var(--shadow-md);
}
.btn-primary {
  background: var(--leaf-deep);
  color: white;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: #2c4a38; }
.btn-secondary {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  color: var(--leaf-deep);
  border: 1px solid var(--line-soft);
}
.btn-secondary:hover { background: white; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* ---------- Hero store badges (Apple-style "Download on the App Store" pill) ---------- */

/* Grid layout for uniform reflow — all four badges drop together:
   wide enough → 4 in one row, otherwise → 1 column, all stacked.
   No middle 2x2 stage: avoids the awkward "row 1 in 2-col, row 2
   in 1-col" sour-spot that mismatched label widths produced under
   flex. The 540px breakpoint is the natural width below which 4
   badges in a row start to crowd. */
.hero-stores {
  display: grid;
  gap: 10px;
  justify-content: center;
  grid-template-columns: 1fr;
  margin: 0 auto 20px;
  max-width: 320px;
}
@media (min-width: 540px) {
  .hero-stores {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 880px;
  }
}
.hero-store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 12px;
  background: var(--leaf-deep);
  color: white;
  border-radius: 10px;
  text-decoration: none;
  font-family: inherit;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
  box-shadow: var(--shadow-sm);
  min-width: 0;
  /* Don't fill the full grid cell on narrow screens — badges stay
     compact and center within the column to keep the visual rhythm
     tight. Wide screens still need fluid 1fr columns to share width
     evenly across 4 badges. */
  width: max-content;
  max-width: 100%;
  justify-self: center;
  box-sizing: border-box;
}
.hero-store-badge:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.hero-store-badge[aria-disabled="true"] {
  opacity: 0.78;
  cursor: default;
}
.hero-store-badge[aria-disabled="true"]:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}
.hero-store-badge svg {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}
.hero-store-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1;
  min-width: 0;
}
.hero-store-overline {
  font-size: 10px;
  letter-spacing: 0.4px;
  opacity: 0.78;
  margin-bottom: 3px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-store-store {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-free-tag {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--leaf-deep);
  opacity: 0.78;
  text-transform: uppercase;
}
.hero-secondary-link {
  display: inline-block;
  margin-top: 6px;
  color: var(--leaf-deep);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 0.15s ease;
}
.hero-secondary-link:hover {
  border-bottom-color: var(--leaf-deep);
  text-decoration: none;
}

/* ---------- Section dividers (wave SVG) ---------- */

.section-divider {
  display: block;
  width: 100%;
  height: 48px;
  fill: white;
}
.section-divider.flip { transform: scaleY(-1); }

/* ---------- Sections ---------- */

section { padding: 88px 20px; position: relative; }
.section-inner {
  max-width: 1080px;
  margin: 0 auto;
}
section h2 {
  font-size: clamp(26px, 3.8vw, 40px);
  font-weight: 700;
  margin: 0 0 14px;
  letter-spacing: -0.7px;
  line-height: 1.15;
}
section .lede {
  font-size: 17px;
  color: var(--leaf-soft);
  max-width: 660px;
  margin: 0 0 48px;
  line-height: 1.6;
}
section .center { text-align: center; margin-left: auto; margin-right: auto; }
section.alt { background: white; }
section.dark {
  background: var(--leaf-deep);
  color: var(--meadow-cream);
}
section.dark h2 { color: white; }
section.dark .lede { color: rgba(247, 244, 236, 0.72); }

/* ---------- Feature cards ---------- */

.cards {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card {
  background: white;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 28px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--line-strong);
}
.card h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: -0.2px;
}
.card p {
  font-size: 14.5px;
  color: var(--leaf-soft);
  margin: 0;
  line-height: 1.55;
}
.card .icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #e8f3df 0%, #c2dfa7 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--leaf-mid);
  margin-bottom: 18px;
}
.card .icon svg { width: 22px; height: 22px; }

/* ---------- Phone mockup ---------- */

.phone-row {
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
@media (max-width: 760px) {
  .phone-row { grid-template-columns: 1fr; gap: 28px; }
}
.phone-text h2 { margin-bottom: 16px; }
.phone-text p {
  font-size: 16.5px;
  color: var(--leaf-soft);
  line-height: 1.6;
  margin: 0 0 14px;
}
.phone-frame {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  aspect-ratio: 9 / 19.5;
  background: var(--leaf-deep);
  border-radius: 36px;
  padding: 12px;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.phone-frame::before {
  /* notch */
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 26px;
  background: var(--leaf-deep);
  border-radius: 14px;
  z-index: 2;
}
.phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  background:
    linear-gradient(180deg, #4d7a91 0%, #6b95a5 50%, #4a5e6a 100%);
  position: relative;
  overflow: hidden;
}
.phone-screen .temp {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: white;
  width: 100%;
}
.phone-screen .temp-big {
  font-size: 84px;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -3px;
  font-feature-settings: "tnum" 1;
}
.phone-screen .temp-label {
  font-size: 14px;
  opacity: 0.85;
  margin-top: 4px;
  letter-spacing: 0.3px;
}
.phone-screen .nudge {
  position: absolute;
  bottom: 44px;
  left: 14px;
  right: 14px;
  background: rgba(255,255,255,0.92);
  border-radius: 14px;
  padding: 14px 16px;
  text-align: left;
  color: var(--leaf-deep);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.phone-screen .nudge .nudge-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--leaf-mid);
  margin-bottom: 4px;
}
.phone-screen .nudge .nudge-body {
  font-size: 12px;
  color: var(--leaf-deep);
  line-height: 1.4;
}
.phone-screen::after {
  /* sun glow on screen */
  content: "";
  position: absolute;
  top: 8%;
  right: 12%;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(255,238,170,0.9), rgba(255,238,170,0) 70%);
}

/* ---------- Download grid ---------- */

.stores {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: 760px;
  margin: 0 auto;
}
.store-card {
  background: white;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 20px;
  text-decoration: none;
  color: var(--leaf-deep);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.14s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.store-card:hover {
  text-decoration: none;
  transform: translateY(-3px);
  border-color: var(--leaf-mid);
  box-shadow: var(--shadow-md);
}
.store-card[aria-disabled="true"] {
  cursor: default;
  opacity: 0.55;
}
.store-card[aria-disabled="true"]:hover {
  transform: none;
  border-color: var(--line-soft);
  box-shadow: none;
}
.store-card .platform {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--leaf-soft);
  font-weight: 600;
}
.store-card .label {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.store-card .status {
  font-size: 13px;
  color: var(--leaf-soft);
}

/* ---------- How-it-works steps ---------- */

.steps {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.step {
  background: var(--meadow-cream-warm);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 26px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.step:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.step .num {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--leaf-mid), var(--leaf-bright));
  color: white;
  text-align: center;
  line-height: 30px;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 14px;
  box-shadow: 0 2px 4px rgba(44, 125, 82, 0.25);
}
.step h3 {
  font-size: 16px;
  margin: 0 0 8px;
  letter-spacing: -0.2px;
}
.step p { font-size: 14px; color: var(--leaf-soft); margin: 0; line-height: 1.5; }

/* ---------- FAQ list ---------- */

.faq { max-width: 720px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--line-soft);
  padding: 18px 0;
}
.faq summary {
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 32px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: -2px;
  color: var(--leaf-mid);
  font-weight: 300;
  font-size: 24px;
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { content: "−"; }
.faq p {
  margin: 12px 0 0;
  color: var(--leaf-soft);
  line-height: 1.65;
  font-size: 15px;
}

/* ---------- Founder note (testimonial-style) ---------- */

.founder-note {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
.founder-note blockquote {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.55;
  color: var(--meadow-cream);
  margin: 0 0 24px;
  letter-spacing: -0.2px;
}
.founder-note blockquote::before {
  content: "“";
  display: block;
  font-size: 56px;
  color: var(--sun-warm);
  line-height: 0.6;
  margin-bottom: 16px;
}
.founder-note .signature {
  font-size: 14px;
  color: rgba(247, 244, 236, 0.62);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

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

footer {
  border-top: 1px solid var(--line-soft);
  padding: 48px 20px 36px;
  background: var(--meadow-cream);
}
footer .footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
}
@media (max-width: 760px) {
  footer .footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 420px) {
  footer .footer-inner { grid-template-columns: 1fr; }
}
footer .footer-brand .brand {
  margin-bottom: 12px;
}
footer .footer-brand p {
  font-size: 13px;
  color: var(--leaf-soft);
  margin: 0;
  line-height: 1.5;
  max-width: 280px;
}
footer .footer-col h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--leaf-faded);
  margin: 0 0 14px;
  font-weight: 600;
}
footer .footer-col a {
  display: block;
  font-size: 14px;
  color: var(--leaf-soft);
  margin-bottom: 8px;
}
footer .footer-col a:hover { color: var(--leaf-deep); text-decoration: none; }
footer .footer-bottom {
  max-width: 1100px;
  margin: 36px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--leaf-faded);
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Page-content (sub-pages) ---------- */

.page-header {
  padding: 64px 20px 32px;
  text-align: center;
  background: linear-gradient(180deg, var(--meadow-sky-low) 0%, var(--meadow-cream) 100%);
}
.page-header h1 {
  font-size: clamp(30px, 4.4vw, 46px);
  margin: 0 0 14px;
  letter-spacing: -0.8px;
  line-height: 1.1;
}
.page-header p { color: var(--leaf-soft); font-size: 17px; max-width: 580px; margin: 0 auto; }

.prose {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px 80px;
}
.prose h2 {
  font-size: 22px;
  margin: 40px 0 14px;
  letter-spacing: -0.3px;
}
.prose p { margin: 0 0 14px; line-height: 1.65; color: var(--leaf-deep); }
.prose ul { padding-left: 22px; margin: 0 0 16px; }
.prose ul li { margin-bottom: 6px; line-height: 1.55; }
.prose .stub {
  background: linear-gradient(135deg, #fff8df 0%, #fdebb0 100%);
  border-left: 3px solid var(--sun-warm);
  padding: 16px 18px;
  border-radius: 0 10px 10px 0;
  font-size: 14px;
  color: var(--leaf-deep);
  margin: 18px 0;
}

/* ---------- Forms ---------- */

.form-card {
  background: white;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 28px;
  max-width: 560px;
  margin: 0 auto;
  box-shadow: var(--shadow-sm);
}
.form-card label {
  display: block;
  font-size: 13px;
  color: var(--leaf-soft);
  font-weight: 500;
  margin: 12px 0 6px;
}
.form-card input, .form-card textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  background: white;
  color: var(--leaf-deep);
  transition: border-color 0.15s ease;
}
.form-card input:focus, .form-card textarea:focus {
  outline: none;
  border-color: var(--leaf-mid);
}
.form-card textarea { min-height: 120px; resize: vertical; }
.form-card .row-actions { margin-top: 22px; }

/* ---------- Scroll-fade-in (animation utility) ---------- */

.fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
  .hero-svg .cloud-drift,
  .hero-svg .cloud-bob,
  .hero-svg .grass-blade,
  .hero-svg .sun-arc-anim,
  .hero-svg .sun-halo,
  .hero-svg .sun-disc-outer,
  .hero-svg .sun-disc-inner,
  .hero-svg .sun-rays { animation: none; }
}