/* LimeliJourney marketing site (index.html only).
   Brand register of the "field-guide" identity (docs/DESIGN.md): deep-forest drench at
   the poles, warm paper between, signal lime doing real work, Bricolage display type.
   Token VALUES mirror frontend/assets/css/ui.css but are declared locally so this page
   never couples to dashboard chrome. No frameworks, no libraries. */

:root {
  --ink:        oklch(0.27 0.045 156);
  --ink-soft:   oklch(0.33 0.04 156);
  --ink-deep:   oklch(0.22 0.045 156);
  --ink-line:   oklch(0.40 0.035 156 / 0.5);
  --on-ink:     oklch(0.93 0.02 130);
  --on-ink-mut: oklch(0.74 0.03 140);

  --paper:      oklch(0.985 0.005 120);
  --panel:      oklch(0.998 0.003 120);
  --elevated:   oklch(0.965 0.008 140);
  --border:     oklch(0.905 0.008 150);
  --border-strong: oklch(0.84 0.01 150);

  --text:       oklch(0.25 0.02 158);
  --text-soft:  oklch(0.42 0.016 158);
  --text-mute:  oklch(0.56 0.013 158);

  --lime:       oklch(0.78 0.17 138);
  --lime-ink:   oklch(0.30 0.09 145);
  --lime-soft:  oklch(0.95 0.06 135);
  --lime-line:  oklch(0.86 0.10 138);
  --focus:      oklch(0.78 0.17 138 / 0.40);

  --green:       oklch(0.52 0.13 152);
  --green-hover: oklch(0.47 0.13 152);
  --green-press: oklch(0.43 0.125 152);
  --on-green:    oklch(0.99 0.01 152);

  --font:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;

  --r-sm: 7px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --r-pill: 100px;
  --shadow-1: 0 1px 2px oklch(0.3 0.04 156 / 0.07), 0 1px 1px oklch(0.3 0.04 156 / 0.04);
  --shadow-2: 0 10px 30px oklch(0.3 0.04 156 / 0.10), 0 3px 8px oklch(0.3 0.04 156 / 0.06);
  --shadow-3: 0 24px 60px oklch(0.25 0.045 156 / 0.16), 0 6px 16px oklch(0.25 0.045 156 / 0.08);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io:  cubic-bezier(0.77, 0, 0.175, 1);

  --sp-section: clamp(5rem, 3rem + 7vw, 10rem);
  --sp-gutter:  clamp(1.25rem, 4vw, 3rem);
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); line-height: 1.05; margin: 0; color: inherit; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--lime); color: var(--lime-ink); }

/* ============ The journey route (scroll-drawn, decorative) ============ */
#journey {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 1;
}
#journey .jp {
  fill: none;
  stroke: var(--lime);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.5;
}
#journey .jw { fill: var(--lime); opacity: 0; transition: opacity .4s var(--ease-out); }
#journey .jw.lit { opacity: 0.85; }
@media (max-width: 1279px) { #journey { display: none; } }

/* Sticky-nav offset for in-page anchors */
section[id] { scroll-margin-top: 72px; }

/* ============ Legal pages (terms.html / privacy.html) ============ */
.legal { max-width: 760px; margin: 0 auto; padding: clamp(3rem, 5vw, 5rem) var(--sp-gutter) var(--sp-section); }
.legal h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 650; letter-spacing: -0.025em;
  font-variation-settings: "opsz" 60;
}
.legal .legal-updated { margin-top: 12px; font-size: 0.85rem; color: var(--text-mute); }
.legal-draft {
  margin-top: 22px; padding: 13px 16px; border: 1px solid var(--lime-line);
  background: var(--lime-soft); border-radius: var(--r-md);
  font-size: 0.9rem; color: var(--text-soft);
}
.legal h2 { margin-top: 44px; font-size: 1.35rem; font-weight: 650; letter-spacing: -0.015em; }
.legal p, .legal li { margin-top: 14px; color: var(--text-soft); font-size: 0.97rem; }
.legal ul { padding-left: 22px; margin: 0; }
.legal a { color: var(--green); }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); font-weight: 600; font-size: 1rem; line-height: 1;
  padding: 15px 26px; border-radius: var(--r-pill); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .14s var(--ease-out), background-color .16s var(--ease-out),
              border-color .16s var(--ease-out), color .16s var(--ease-out),
              box-shadow .16s var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn-sm { padding: 10px 18px; font-size: 0.9rem; }
.btn-full { width: 100%; }

.btn-lime { background: var(--lime); color: var(--lime-ink); box-shadow: 0 0 0 0 oklch(0.78 0.17 138 / 0); }
@media (hover: hover) and (pointer: fine) {
  .btn-lime:hover { background: oklch(0.83 0.17 136); box-shadow: 0 6px 22px oklch(0.78 0.17 138 / 0.35); }
}
.btn-ghost { background: transparent; color: var(--on-ink); border-color: var(--ink-line); }
@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover { border-color: var(--lime-line); color: oklch(0.97 0.02 130); background: oklch(0.4 0.04 156 / 0.3); }
}
.btn-green { background: var(--green); color: var(--on-green); }
@media (hover: hover) and (pointer: fine) { .btn-green:hover { background: var(--green-hover); } }
.btn-green:active { background: var(--green-press); }
.btn-outline { background: transparent; color: var(--green); border-color: var(--border-strong); }
@media (hover: hover) and (pointer: fine) { .btn-outline:hover { border-color: var(--green); background: var(--lime-soft); } }

/* ============ Nav ============ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: oklch(0.27 0.045 156 / 0.9);
  border-bottom: 1px solid transparent;
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.nav.scrolled {
  background: oklch(0.25 0.045 156 / 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--ink-line);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto; padding: 14px var(--sp-gutter);
  display: flex; align-items: center; gap: 28px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { display: block; }
.wordmark {
  font-family: var(--display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: -0.02em; color: var(--on-ink); line-height: 1;
}
.wordmark .dot { color: var(--lime); }
.nav-links { display: flex; gap: 4px; margin-left: 8px; }
.nav-links a {
  font-size: 0.925rem; font-weight: 500; color: var(--on-ink-mut);
  text-decoration: none; padding: 8px 12px; border-radius: var(--r-pill);
  transition: color .15s var(--ease-out), background-color .15s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: var(--on-ink); background: oklch(0.4 0.04 156 / 0.35); }
}
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.signin {
  font-size: 0.925rem; font-weight: 500; color: var(--on-ink-mut); text-decoration: none;
  transition: color .15s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .signin:hover { color: var(--on-ink); } }

/* ============ Forest sections shared ============ */
.hero, .ai, .start { position: relative; background: var(--ink); color: var(--on-ink); overflow: clip; }
.contours {
  position: absolute; inset: -20% -10%;
  background:
    repeating-radial-gradient(ellipse 90% 70% at 78% 12%,
      transparent 0 54px, oklch(0.78 0.17 138 / 0.045) 54px 55.5px),
    repeating-radial-gradient(ellipse 110% 90% at 10% 95%,
      transparent 0 74px, oklch(0.93 0.02 130 / 0.03) 74px 75.5px);
  pointer-events: none;
}

/* ============ Hero ============ */
.hero-inner {
  position: relative; z-index: 2;
  max-width: 1200px; margin: 0 auto;
  min-height: min(calc(100svh - 62px), 940px);
  padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) var(--sp-gutter) clamp(4rem, 3rem + 5vw, 7rem);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-ink-mut);
}
.kicker-pin { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.hero h1 {
  margin: 20px 0 0;
  font-size: clamp(2.9rem, 1.8rem + 5vw, 5.6rem);
  font-weight: 700; letter-spacing: -0.03em;
  font-variation-settings: "opsz" 96;
  color: oklch(0.97 0.015 130);
}
.hero h1 span { display: block; }
.hero-sub {
  margin: 26px 0 0; max-width: 34rem;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); line-height: 1.72;
  color: var(--on-ink-mut);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero-note { margin-top: 22px; font-size: 0.85rem; color: oklch(0.62 0.03 145); }

/* Hero load choreography: one orchestrated stagger, pure CSS. */
.ld { opacity: 0; transform: translateY(14px); animation: rise .7s var(--ease-out) forwards; }
.ld-1 { animation-delay: .05s } .ld-2 { animation-delay: .14s } .ld-3 { animation-delay: .23s }
.ld-4 { animation-delay: .34s } .ld-5 { animation-delay: .46s } .ld-6 { animation-delay: .58s }
@keyframes rise { to { opacity: 1; transform: none; } }

/* The funnel map */
.hero-map { margin: 0; position: relative; }
.hero-map svg { width: 100%; display: block; }
#funnel-path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: draw 1.7s var(--ease-io) .55s forwards;
  filter: drop-shadow(0 0 10px oklch(0.78 0.17 138 / 0.35));
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.wp { opacity: 0; animation: wpin .5s var(--ease-out) calc(.62s + var(--wd)) forwards; }
@keyframes wpin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wp-dot { fill: var(--lime); }
.wp-core { fill: var(--ink); }
.wp-end .wp-dot { filter: drop-shadow(0 0 12px oklch(0.78 0.17 138 / 0.6)); }
.wp-label {
  font-family: var(--font); font-size: 15px; font-weight: 500;
  fill: var(--on-ink-mut);
}
.wp-label-end { fill: oklch(0.95 0.05 132); font-weight: 600; }
.hero-map-caption {
  margin-top: 10px; font-size: 0.85rem; color: oklch(0.62 0.03 145); text-align: right;
}

/* ============ Feature sections (paper) ============ */
.feature { padding: var(--sp-section) 0; position: relative; z-index: 2; }
.feature-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-gutter);
  display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: clamp(2.5rem, 5vw, 5.5rem); align-items: center;
}
.feature-flip .feature-inner { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); }
.feature-flip .feature-copy { order: 2; }
.feature-flip .frame { order: 1; }

.waypoint-tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--green); margin-bottom: 18px;
}
.waypoint-tag.on-dark { color: var(--lime); }
.waypoint-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 0 4px oklch(0.78 0.17 138 / 0.18);
}
.feature h2, .ai h2 {
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  font-weight: 650; letter-spacing: -0.025em;
  font-variation-settings: "opsz" 60;
}
.feature-copy > p { margin-top: 18px; color: var(--text-soft); max-width: 36rem; }

.checks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 13px; }
.checks li { position: relative; padding-left: 32px; color: var(--text-soft); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--lime-soft); border: 1px solid var(--lime-line);
}
.checks li::after {
  content: ""; position: absolute; left: 5px; top: 9.5px;
  width: 9px; height: 5px;
  border-left: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
.checks-dark li { color: var(--on-ink-mut); }
.checks-dark li::before { background: oklch(0.4 0.06 145 / 0.4); border-color: oklch(0.78 0.17 138 / 0.35); }
.checks-dark li::after { border-color: var(--lime); }

/* Product frames (hand-built vignettes, not screenshots) */
.frame {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-3); overflow: hidden;
}
.frame-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 13px 18px; border-bottom: 1px solid var(--border);
  background: var(--elevated);
}
.frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.frame-title { margin-left: 10px; font-size: 0.82rem; font-weight: 600; color: var(--text-mute); }

/* Report vignette */
.report { padding: 20px 22px 14px; }
.report-head, .report-row {
  display: grid; grid-template-columns: 1.1fr 1.6fr 0.6fr 0.85fr;
  gap: 14px; align-items: center;
}
.report-head {
  font-size: 0.72rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-mute); padding: 4px 0 12px; border-bottom: 1px solid var(--border);
}
.report-row { padding: 13px 0; border-bottom: 1px solid oklch(0.94 0.006 150); }
.report-row:last-of-type { border-bottom: 0; }
.r-name { font-weight: 600; font-size: 0.95rem; }
.r-bar { display: flex; align-items: center; gap: 10px; }
.r-bar i {
  display: block; height: 10px; border-radius: 5px; flex: 1;
  background: linear-gradient(90deg, var(--green), var(--lime));
  transform-origin: left center; transform: scaleX(var(--w, 1));
}
html.js .rv:not(.in) .r-bar i { transform: scaleX(0.001); }
.in .r-bar i { transition: transform .9s var(--ease-out) .25s; }
.r-bar em { font-style: normal; font-size: 0.85rem; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.r-num { font-size: 0.92rem; color: var(--text-soft); font-variant-numeric: tabular-nums; text-align: right; }
.r-rev { color: var(--green); font-weight: 650; }
.report-foot { padding-top: 12px; font-size: 0.75rem; color: var(--text-mute); }

/* Campaign vignette */
.campaign { padding: 22px; display: grid; gap: 18px; }
.campaign-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.c-name { font-weight: 650; font-size: 1.02rem; letter-spacing: -0.01em; }
.c-meta { margin-top: 5px; font-size: 0.88rem; color: var(--text-mute); }
.c-meta strong { color: var(--green); }
.pill {
  display: inline-flex; align-items: center; padding: 5px 12px;
  border-radius: var(--r-pill); font-size: 0.78rem; font-weight: 650;
}
.pill-live { background: var(--lime); color: var(--lime-ink); }
.capbox { background: var(--elevated); border: 1px solid var(--border); border-radius: var(--r-md); padding: 15px 16px; }
.capbox-row { display: flex; justify-content: space-between; font-size: 0.88rem; color: var(--text-soft); }
.capbox-row strong { color: var(--text); font-variant-numeric: tabular-nums; }
.capmeter { margin-top: 10px; height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.capmeter i {
  display: block; height: 100%; border-radius: 4px; background: var(--green);
  transform-origin: left center; transform: scaleX(var(--w, 1));
}
html.js .rv:not(.in) .capmeter i { transform: scaleX(0.001); }
.in .capmeter i { transition: transform .9s var(--ease-out) .3s; }
.capbox-note { margin-top: 10px; font-size: 0.8rem; color: var(--text-mute); }
.campaign-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: 0.82rem; font-weight: 550; color: var(--text-soft);
  padding: 7px 13px; border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  background: var(--panel);
}

/* ============ AI section (forest) ============ */
.ai { padding: var(--sp-section) 0; }
.ai-inner {
  position: relative; z-index: 2;
  max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-gutter);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 5vw, 5rem); align-items: start;
}
.ai h2 { color: oklch(0.97 0.015 130); }
.ai-copy > p { margin-top: 20px; color: var(--on-ink-mut); max-width: 36rem; line-height: 1.75; }

.addons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 34px; }
.addon {
  border: 1px solid var(--ink-line); border-radius: var(--r-lg);
  background: oklch(0.31 0.045 156 / 0.6); padding: 20px;
}
.addon-flag {
  display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--lime-ink);
  background: var(--lime); border-radius: var(--r-pill); padding: 3px 10px;
}
.addon h3 { margin-top: 12px; font-size: 1.1rem; font-weight: 650; color: var(--on-ink); }
.addon p { margin-top: 8px; font-size: 0.9rem; line-height: 1.6; color: var(--on-ink-mut); }

/* Chat vignette */
.chat {
  background: oklch(0.985 0.005 120); border-radius: var(--r-xl);
  box-shadow: var(--shadow-3); overflow: hidden; color: var(--text);
}
.chat-bar {
  padding: 14px 20px; font-family: var(--display); font-weight: 650; font-size: 0.95rem;
  background: var(--elevated); border-bottom: 1px solid var(--border);
}
.chat-body { padding: 22px; display: grid; gap: 14px; }
.msg { max-width: 88%; padding: 12px 16px; border-radius: var(--r-lg); font-size: 0.93rem; line-height: 1.6; }
.msg-user { justify-self: end; background: var(--ink); color: var(--on-ink); border-bottom-right-radius: 5px; }
.msg-ai { justify-self: start; background: var(--elevated); border: 1px solid var(--border); border-bottom-left-radius: 5px; color: var(--text-soft); }

/* chat stagger: driven by .in on the AI section */
.cs { opacity: 0; transform: translateY(10px); }
.in-chat .cs { animation: rise .5s var(--ease-out) forwards; }
.in-chat .cs-1 { animation-delay: .1s } .in-chat .cs-2 { animation-delay: .65s } .in-chat .cs-3 { animation-delay: 1.25s }

.action { border: 1px solid var(--lime-line); background: var(--lime-soft); border-radius: var(--r-lg); overflow: hidden; }
.action-head {
  padding: 9px 16px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--green);
  border-bottom: 1px solid var(--lime-line);
}
.action-body { padding: 13px 16px; font-size: 0.95rem; }
.action-body s { color: var(--text-mute); }
.action-body strong { color: var(--green); }
.action-foot { display: flex; align-items: center; gap: 14px; padding: 0 16px 14px; }
.action-btn {
  display: inline-flex; padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--green); color: var(--on-green); font-size: 0.85rem; font-weight: 600;
  transition: opacity .3s var(--ease-out);
}
.action-applied {
  font-size: 0.85rem; font-weight: 600; color: var(--green);
  opacity: 0; transition: opacity .3s var(--ease-out);
}
.action.applied .action-btn { opacity: 0.35; }
.action.applied .action-applied { opacity: 1; }

/* ============ Pricing ============ */
.pricing { padding: var(--sp-section) var(--sp-gutter); max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }
.pricing-head { max-width: 40rem; }
.pricing-head h2 {
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); font-weight: 650; letter-spacing: -0.025em;
  font-variation-settings: "opsz" 60;
}
.pricing-head p { margin-top: 16px; color: var(--text-soft); }

.plans {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px; margin-top: clamp(2.5rem, 4vw, 4rem); align-items: stretch;
}
.plan {
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 30px 28px;
  box-shadow: var(--shadow-1);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
}
.plan-featured {
  background: var(--ink); color: var(--on-ink);
  border-color: var(--ink); box-shadow: var(--shadow-3);
  position: relative;
}
.plan-flag {
  position: absolute; top: -13px; left: 28px;
  background: var(--lime); color: var(--lime-ink);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 13px; border-radius: var(--r-pill);
}
.plan-name { font-family: var(--display); font-size: 1.25rem; font-weight: 650; }
.plan-tag { margin-top: 6px; font-size: 0.88rem; color: var(--text-mute); }
.plan-featured .plan-tag { color: var(--on-ink-mut); }
.plan-price { margin-top: 22px; display: flex; align-items: baseline; gap: 7px; }
.plan-price strong {
  font-family: var(--display); font-size: 2.6rem; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.plan-price span { font-size: 0.9rem; color: var(--text-mute); }
.plan-featured .plan-price span { color: var(--on-ink-mut); }
.plan-usd { margin-top: 5px; font-size: 0.82rem; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.plan-featured .plan-usd { color: var(--on-ink-mut); }
.plan-meter { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); font-size: 0.9rem; color: var(--text-soft); }
.plan-featured .plan-meter { border-top-color: var(--ink-line); }
.plan-featured .plan-meter { color: var(--on-ink-mut); }
.plan-meter strong { color: var(--green); }
.plan-featured .plan-meter strong { color: var(--lime); }
.plan-list { list-style: none; margin: 22px 0 26px; padding: 20px 0 0; border-top: 1px solid var(--border); display: grid; gap: 10px; flex: 1; }
.plan-featured .plan-list { border-top-color: var(--ink-line); }
.plan-list li { position: relative; padding-left: 26px; font-size: 0.92rem; color: var(--text-soft); }
.plan-featured .plan-list li { color: var(--on-ink-mut); }
.plan-list li::before {
  content: ""; position: absolute; left: 2px; top: 7px;
  width: 8px; height: 4.5px;
  border-left: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
.plan-featured .plan-list li::before { border-color: var(--lime); }
.plans-noscript { margin-top: 3rem; color: var(--text-soft); }

/* Reveal stagger for plans */
html.js .plans .plan { opacity: 0; transform: translateY(18px); }
.plans.in .plan { animation: rise .65s var(--ease-out) forwards; }
.plans.in .plan:nth-child(1) { animation-delay: .05s }
.plans.in .plan:nth-child(2) { animation-delay: .15s }
.plans.in .plan:nth-child(3) { animation-delay: .25s }

.addon-strip { margin-top: clamp(3rem, 5vw, 4.5rem); }
.addon-strip h3 { font-size: 1.15rem; font-weight: 650; }
.addon-strip-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
.addon-item {
  display: grid; gap: 6px; align-content: start;
  padding: 20px; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--elevated);
}
.addon-item strong { font-size: 0.98rem; }
.addon-item span { font-size: 0.87rem; color: var(--text-soft); line-height: 1.55; }
.addon-item em { font-style: normal; font-size: 0.8rem; font-weight: 650; color: var(--green); }
.pricing-fine { margin-top: 26px; font-size: 0.82rem; color: var(--text-mute); max-width: 46rem; }

/* ============ FAQ ============ */
.faq { padding: 0 var(--sp-gutter) var(--sp-section); position: relative; z-index: 2; }
.faq-inner { max-width: 780px; margin: 0 auto; }
.faq h2 {
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); font-weight: 650; letter-spacing: -0.02em;
  font-variation-settings: "opsz" 60;
}
.faq-list { margin-top: 30px; border-top: 1px solid var(--border); }
.qa { border-bottom: 1px solid var(--border); }
.qa-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 4px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font); font-size: 1.05rem; font-weight: 600; color: var(--text);
  transition: color .15s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .qa-q:hover { color: var(--green); } }
.qa-icon { position: relative; width: 18px; height: 18px; flex: none; }
.qa-icon::before, .qa-icon::after {
  content: ""; position: absolute; background: var(--green); border-radius: 1px;
  transition: transform .22s var(--ease-out);
}
.qa-icon::before { left: 0; top: 8px; width: 18px; height: 2px; }
.qa-icon::after { left: 8px; top: 0; width: 2px; height: 18px; }
.qa.open .qa-icon::after { transform: scaleY(0.1); }
.qa-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .24s var(--ease-out);
}
.qa.open .qa-a { grid-template-rows: 1fr; }
.qa-a-inner { overflow: hidden; padding: 0 40px 0 4px; color: var(--text-soft); font-size: 0.97rem; }
.qa.open .qa-a-inner { padding-bottom: 22px; }

/* ============ Start / final CTA ============ */
.start { padding: var(--sp-section) 0; }
.start-inner {
  position: relative; z-index: 2;
  max-width: 1100px; margin: 0 auto; padding: 0 var(--sp-gutter);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 5vw, 5rem); align-items: center;
}
.start-leaf { width: 46px; height: 46px; filter: drop-shadow(0 0 14px oklch(0.78 0.17 138 / 0.4)); }
.start h2 {
  margin-top: 20px;
  font-size: clamp(2rem, 1.4rem + 2.8vw, 3.4rem); font-weight: 700; letter-spacing: -0.03em;
  font-variation-settings: "opsz" 80;
  color: oklch(0.97 0.015 130);
}
.start-copy p { margin-top: 20px; color: var(--on-ink-mut); max-width: 32rem; line-height: 1.75; }

.start-form {
  background: var(--paper); border-radius: var(--r-xl); box-shadow: var(--shadow-3);
  padding: 30px 28px; display: grid; gap: 16px; color: var(--text);
}
.ff { display: grid; gap: 7px; }
.ff label { font-size: 0.85rem; font-weight: 600; color: var(--text-soft); }
.ff input, .ff select {
  font-family: var(--font); font-size: 0.98rem; color: var(--text);
  padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--panel); width: 100%;
  transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.ff input:focus, .ff select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--focus); }
.ff input[aria-invalid="true"] { border-color: oklch(0.56 0.17 27); }
.start-form .btn { margin-top: 6px; }
.ff-note { font-size: 0.82rem; color: var(--text-mute); text-align: center; }

/* ============ Footer ============ */
.footer { background: var(--ink-deep); color: var(--on-ink-mut); position: relative; z-index: 2; }
.footer-inner {
  max-width: 1200px; margin: 0 auto; padding: 34px var(--sp-gutter);
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.footer .wordmark { font-size: 1rem; }
.footer-links { display: flex; gap: 20px; margin-left: 8px; }
.footer-links a {
  font-size: 0.88rem; color: var(--on-ink-mut); text-decoration: none;
  transition: color .15s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .footer-links a:hover { color: var(--on-ink); } }
.footer-legal { margin-left: auto; font-size: 0.82rem; color: oklch(0.58 0.03 145); }

/* ============ Scroll reveals (progressive enhancement) ============ */
html.js .rv { opacity: 0; transform: translateY(16px); }
html.js .rv.in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
html.js .rv-d1.in { transition-delay: .12s; }
html.js .rv-d2.in { transition-delay: .24s; }

/* ============ Responsive ============ */
@media (max-width: 960px) {
  .hero-inner, .ai-inner, .start-inner, .feature-inner,
  .feature-flip .feature-inner { grid-template-columns: 1fr; }
  .feature-flip .feature-copy { order: 1; }
  .feature-flip .frame { order: 2; }
  .hero-map { max-width: 560px; }
  .addons { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; max-width: 460px; }
  .addon-strip-items { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-inner { gap: 16px; }
  body { font-size: 1rem; }
}
@media (max-width: 560px) {
  .signin { display: none; }
  .hero-actions .btn { width: 100%; }
  .report-head, .report-row { grid-template-columns: 1fr 1.4fr 0.9fr; }
  .report-head span:nth-child(3), .report-row .r-num:not(.r-rev) { display: none; }
}

/* ============ Reduced motion: keep fades, kill movement ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ld, .wp { animation: none; opacity: 1; transform: none; }
  #funnel-path { animation: none; stroke-dashoffset: 0; }
  html.js .rv { transform: none; transition: opacity .3s ease; }
  html.js .rv.in { transform: none; }
  html.js .rv:not(.in) .r-bar i,
  html.js .rv:not(.in) .capmeter i { transform: scaleX(var(--w, 1)); }
  .in .r-bar i, .in .capmeter i { transition: none; }
  html.js .plans .plan { opacity: 1; transform: none; animation: none; }
  .plans.in .plan { animation: none; }
  .cs { opacity: 1; transform: none; }
  .in-chat .cs { animation: none; }
  .plan, .btn, .qa-a { transition-duration: 0.01ms; }
  #journey .jp { stroke-dashoffset: 0 !important; }
}