/* ==========================================================================
   127 Evergreen Lane Chronicles — marketing site
   Shared stylesheet. No build step, no dependencies (see AWS_BACKEND.md for
   why the full Flutter-web approach was abandoned for these static pages).

   The palette mirrors the Flutter app: the seed colour is Forest Evergreen
   #1B4332 (PreferenceService.defaultThemeColor), and the tonal ramp is taken
   from the app's own "Forest & Moss" palette in lib/constants/app_palettes.dart.
   Light/dark follow the OS the way the app's ThemeMode does.
   ========================================================================== */

:root {
  --bg: #f6f9f6;
  --surface: #ffffff;
  --surface-2: #edf4ee;
  --primary: #1b4332;
  --primary-hover: #2d6a4f;
  --on-primary: #ffffff;
  --container: #d8f3dc;
  --on-container: #10291e;
  --text: #16201a;
  --muted: #566159;
  --outline: #dce6de;
  --shadow: 0 1px 2px rgba(16, 41, 30, .06), 0 8px 24px rgba(16, 41, 30, .06);
  --shadow-lg: 0 2px 4px rgba(16, 41, 30, .07), 0 16px 48px rgba(16, 41, 30, .10);
  --radius: 16px;
  --radius-lg: 28px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e120f;
    --surface: #161c18;
    --surface-2: #1d251f;
    --primary: #95d5b2;
    --primary-hover: #b7e4c7;
    --on-primary: #0b2418;
    --container: #24402f;
    --on-container: #d8f3dc;
    --text: #e5ede7;
    --muted: #a0aea4;
    --outline: #2a352c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .45), 0 16px 48px rgba(0, 0, 0, .4);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; letter-spacing: -.015em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); font-weight: 700; text-wrap: balance; }
/* The split hero gives the copy a narrower column, so the headline needs to
   come down a step and wrap on its own rather than at a hard-coded <br>. */
.hero-split h1 { font-size: clamp(1.85rem, 3.6vw, 2.55rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 650; }
h3 { font-size: 1.15rem; font-weight: 650; }
p { margin: 0 0 1.1em; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* A prose column keeps the page frame's full width so its left edge stays lined
   up with the logo and nav, and caps only the reading measure. Collapsing
   .wrap itself to 720px would re-centre it and visibly misalign body copy
   against the header on the text-heavy pages. */
.prose { max-width: 720px; }
.wrap.prose { max-width: 1080px; }
.wrap.prose > * { max-width: 720px; }
.muted { color: var(--muted); }
.center { text-align: center; }

/* --- Header ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--outline);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
}

/* Text wordmark rather than the app icon: the icon is a detailed illustration
   that turns to mush below ~64px. It gets shown at a proper size in the hero. */
.brand {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--text);
  letter-spacing: -.02em;
}
.brand:hover { text-decoration: none; }
.brand .mark { color: var(--primary); font-weight: 800; }
.brand small {
  font-size: .72rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.site-nav a {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .93rem;
  font-weight: 550;
  color: var(--muted);
}
.site-nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.site-nav a[aria-current="page"] { background: var(--container); color: var(--on-container); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-tonal { background: var(--container); color: var(--on-container); }
.btn-tonal:hover { background: color-mix(in srgb, var(--container) 82%, var(--text)); }
.btn-outline { border-color: var(--outline); color: var(--text); background: transparent; }
.btn-outline:hover { background: var(--surface-2); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

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

.hero { padding: clamp(56px, 9vw, 104px) 0 clamp(40px, 6vw, 72px); }
.hero .eyebrow {
  display: inline-block;
  background: var(--container);
  color: var(--on-container);
  border-radius: 999px;
  padding: 6px 15px;
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: 22px;
}
.hero p.lead {
  font-size: clamp(1.06rem, 2.2vw, 1.22rem);
  color: var(--muted);
  max-width: 620px;
  margin-bottom: 32px;
}

.hero-split {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.hero-split .hero-copy p.lead { margin-bottom: 32px; }
.app-icon {
  width: min(100%, 300px);
  /* height:auto is load-bearing: the <img height> attribute is a presentational
     hint that otherwise wins over aspect-ratio and stretches the icon vertically. */
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 22%;
  display: block;
  margin-inline: auto;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--outline);
}

@media (max-width: 860px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-split .hero-art { order: -1; }
  .app-icon { width: min(58%, 210px); }
}

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

section { padding: clamp(44px, 6vw, 76px) 0; }
section.tinted { background: var(--surface-2); }
.section-head { max-width: 660px; margin-bottom: 40px; }
.section-head p { color: var(--muted); margin-bottom: 0; }

/* --- Cards -------------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 18px;
}

/* Five items: an auto-fit grid strands the fifth on a row of its own. A
   10-track grid divides evenly instead — 5 across on desktop, then 3 + 2 with
   the pair widened so both rows stay flush. */
.grid-5 {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 18px;
}
.grid-5 > * { grid-column: span 2; }
.grid-5 .card { padding: 22px 20px; }

@media (max-width: 1023px) {
  .grid-5 { grid-template-columns: repeat(6, 1fr); }
  .grid-5 > :nth-child(4),
  .grid-5 > :nth-child(5) { grid-column: span 3; }
}

@media (max-width: 679px) {
  .grid-5 { grid-template-columns: 1fr; }
  .grid-5 > *,
  .grid-5 > :nth-child(4),
  .grid-5 > :nth-child(5) { grid-column: auto; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow);
}
.card h3 { margin-bottom: .4em; }
.card p { color: var(--muted); font-size: .95rem; margin-bottom: 0; }

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--container);
  color: var(--on-container);
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: 16px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--shadow-lg);
}

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

details.faq {
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  padding: 4px 22px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}
details.faq summary {
  cursor: pointer;
  font-weight: 600;
  padding: 18px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1;
  flex-shrink: 0;
}
details.faq[open] summary::after { content: "\2212"; }
details.faq .faq-body { padding-bottom: 20px; color: var(--muted); font-size: .96rem; }
details.faq .faq-body p:last-child { margin-bottom: 0; }

/* --- Callout ------------------------------------------------------------ */

.callout {
  border-left: 4px solid var(--primary);
  background: var(--surface-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px;
  margin: 28px 0;
  font-size: .95rem;
}
.callout p:last-child { margin-bottom: 0; }

/* --- Contact strip ------------------------------------------------------ */

.contact-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  font-size: 1.05rem;
  margin-bottom: 8px;
}
.contact-line strong { font-weight: 650; }

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

.site-footer {
  border-top: 1px solid var(--outline);
  padding: 48px 0 56px;
  font-size: .9rem;
  color: var(--muted);
  background: var(--surface);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 36px;
}
.site-footer h4 {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text);
  margin: 0 0 14px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--primary); }
.legal-note {
  border-top: 1px solid var(--outline);
  padding-top: 24px;
  font-size: .84rem;
  line-height: 1.6;
}
.legal-note p { margin-bottom: .7em; }
.legal-note p:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .site-nav a { padding: 8px 10px; font-size: .88rem; }
  .brand small { display: none; }
}