/* Marketing landing page (public/landing.html). Self-contained: does not load base.css or
   components.css so the app shell's element styles never leak in. Brand colours come from
   the same green family as tokens.css so the page hands off cleanly to signup.html. */

:root {
  --l-paper: #FFFFFF;
  --l-field: #EEF5EE;
  --l-ink: #1C2B1C;
  --l-muted: #5F6B5F;
  --l-hair: #D5DDD5;
  --l-brand: #2E7D32;
  --l-brand-deep: #1B5E20;
  --l-brand-hover: #256628;
  --l-amber: #FFC107;

  --l-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --l-max: 1100px;
  --l-gutter: 24px;
  --l-radius: 6px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--l-font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--l-ink);
  background: var(--l-paper);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--l-brand-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--l-brand); }

:focus-visible { outline: 3px solid var(--l-brand); outline-offset: 3px; }

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

.wrap { max-width: var(--l-max); margin: 0 auto; padding-left: var(--l-gutter); padding-right: var(--l-gutter); }

/* Type scale */
h1, h2, h3 { line-height: 1.1; letter-spacing: -0.02em; font-weight: 800; color: var(--l-ink); }
h1 { font-size: clamp(2.25rem, 5.5vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); margin-bottom: 20px; max-width: 22ch; }
h3 { font-size: 1.25rem; letter-spacing: -0.01em; line-height: 1.25; }
p { max-width: 62ch; }
.lede { font-size: 1.1875rem; color: var(--l-muted); }
.num { font-variant-numeric: tabular-nums; }

/* Buttons — same green as the app's .btn-primary so signup feels like the next page, not a new site */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  border-radius: var(--l-radius); border: 2px solid transparent;
  font: inherit; font-weight: 600; font-size: 1rem; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn-primary { background: var(--l-brand); color: #fff; border-color: var(--l-brand); }
.btn-primary:hover { background: var(--l-brand-hover); border-color: var(--l-brand-hover); color: #fff; }
.btn-quiet { background: transparent; color: var(--l-ink); border-color: var(--l-hair); }
.btn-quiet:hover { border-color: var(--l-ink); color: var(--l-ink); }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 1.0625rem; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,0.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--l-hair); }
.nav .wrap { display: flex; align-items: center; gap: 16px; min-height: 64px; position: relative; }
.wordmark { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--l-brand-deep); text-decoration: none; margin-right: auto; white-space: nowrap; }
.wordmark:hover { color: var(--l-brand-deep); }
.nav .btn { min-height: 40px; padding: 0 16px; font-size: 0.9375rem; }

/* Sign-in: a native <details> so it opens without JS; JS only builds the redirect. The panel
   is positioned against the nav (not the summary) so it stays inside the viewport on phones. */
.signin { position: static; }
.signin > summary { list-style: none; cursor: pointer; }
.signin > summary::-webkit-details-marker { display: none; }
.signin-panel {
  position: absolute; right: var(--l-gutter); top: calc(100% + 2px); width: min(360px, calc(100vw - 2 * var(--l-gutter)));
  background: var(--l-paper); border: 1px solid var(--l-hair); border-radius: var(--l-radius);
  box-shadow: 0 12px 32px rgba(28, 43, 28, 0.14); padding: 18px;
}
.signin-panel label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 0.9375rem; }
.signin-row { display: flex; align-items: center; gap: 6px; }
.signin-row input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--l-hair); border-radius: var(--l-radius); font: inherit; font-size: 1rem; color: var(--l-ink);
}
.signin-row input:focus { border-color: var(--l-brand); outline: none; box-shadow: 0 0 0 3px rgba(46,125,50,0.18); }
.signin-suffix { color: var(--l-muted); font-size: 0.9375rem; white-space: nowrap; }
.signin-panel .btn { width: 100%; margin-top: 12px; }
.signin-hint { margin-top: 10px; font-size: 0.875rem; color: var(--l-muted); }

/* Hero */
.hero { background: var(--l-field); border-bottom: 1px solid var(--l-hair); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
.hero h1 { max-width: 14ch; margin-bottom: 20px; }
.hero .lede { margin-bottom: 32px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.hero-note { margin-top: 16px; font-size: 0.9375rem; color: var(--l-muted); }

/* The fill record: the one object on the page that is allowed to be loud. */
.ticket {
  background: var(--l-paper); border: 1px solid var(--l-hair); border-left: 6px solid var(--l-brand);
  border-radius: var(--l-radius); padding: 22px 24px 20px; box-shadow: 0 18px 40px rgba(28, 43, 28, 0.10);
  max-width: 460px; justify-self: end; width: 100%;
}
.ticket-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding-bottom: 12px; border-bottom: 1px solid var(--l-hair); }
.ticket-head strong { font-size: 1.25rem; letter-spacing: -0.01em; white-space: nowrap; }
.ticket-head span { color: var(--l-muted); font-size: 0.9375rem; }
.ticket dl { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 0; margin-top: 8px; }
.ticket dt, .ticket dd { padding: 7px 0; border-bottom: 1px solid var(--l-field); font-size: 0.9375rem; }
.ticket dt { color: var(--l-muted); }
.ticket dd { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ticket dt.sub, .ticket dd.sub { padding-left: 14px; }
.ticket dt.sub { color: var(--l-ink); font-weight: 500; }
.ticket dt.sub::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--l-brand); margin-right: 8px; vertical-align: 2px; }
.ticket dt.total, .ticket dd.total { border-bottom: 0; padding-top: 12px; font-size: 1.0625rem; }
.ticket dd.total { color: var(--l-brand-deep); font-size: 1.375rem; font-weight: 800; }
.ticket-foot { margin-top: 10px; font-size: 0.8125rem; color: var(--l-muted); }

/* Sections */
.section { padding: 80px 0; }
.section + .section { border-top: 1px solid var(--l-hair); }
.section-intro { margin-bottom: 40px; }

/* Problem: two-column plain list, no boxes */
.problem-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.problem-list li { padding: 20px 0; border-top: 1px solid var(--l-hair); }
.problem-list li strong { display: block; font-size: 1.125rem; margin-bottom: 4px; letter-spacing: -0.01em; }
.problem-list li p { color: var(--l-muted); font-size: 1rem; }

/* How it works: a real sequence, so it earns numbering */
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.steps li { counter-increment: step; position: relative; padding-top: 18px; border-top: 3px solid var(--l-brand); }
.steps li::before {
  content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--l-brand); color: #fff;
  font-weight: 800; font-size: 1.0625rem; margin-bottom: 14px; font-variant-numeric: tabular-nums;
}
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--l-muted); font-size: 1rem; }

/* Features: hairline rows, three across */
.features { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.features li { padding: 22px 0 24px; border-top: 1px solid var(--l-hair); }
.features h3 { font-size: 1.0625rem; margin-bottom: 6px; }
.features p { color: var(--l-muted); font-size: 0.9375rem; }

/* Operator band */
.operator { background: var(--l-brand-deep); color: #fff; }
.operator .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding-top: 88px; padding-bottom: 88px; align-items: start; }
.operator h2, .operator h3 { color: #fff; }
.operator p { color: rgba(255,255,255,0.86); }
.operator p + p { margin-top: 16px; }
.operator .figures { list-style: none; display: grid; gap: 22px; padding-top: 8px; }
.operator .figures li { border-top: 1px solid rgba(255,255,255,0.25); padding-top: 14px; }
.operator .figures strong { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.operator .figures span { color: rgba(255,255,255,0.8); font-size: 0.9375rem; }

/* Pricing: the only bordered panel on the page */
.pricing { background: var(--l-field); }
.plan {
  background: var(--l-paper); border: 2px solid var(--l-brand); border-radius: 10px;
  padding: 36px 36px 32px; max-width: 520px;
}
.plan h3 { font-size: 1.125rem; color: var(--l-muted); font-weight: 600; margin-bottom: 12px; }
.plan-price { font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 8px; }
.plan-price-amount { display: none; font-size: 3rem; font-variant-numeric: tabular-nums; }
.plan-price-amount small { font-size: 1.125rem; font-weight: 600; color: var(--l-muted); letter-spacing: 0; }
.plan-price-fallback { display: block; font-size: 2rem; }
.plan-price.has-price .plan-price-amount { display: inline; }
.plan-price.has-price .plan-price-fallback { display: none; }
.plan-terms { color: var(--l-muted); margin-bottom: 24px; }
.plan ul { list-style: none; margin-bottom: 28px; }
.plan li { padding: 9px 0 9px 28px; border-top: 1px solid var(--l-hair); position: relative; font-size: 1rem; }
.plan li::before { content: ""; position: absolute; left: 4px; top: 16px; width: 12px; height: 7px; border-left: 2.5px solid var(--l-brand); border-bottom: 2.5px solid var(--l-brand); transform: rotate(-45deg); }
.plan .btn { width: 100%; }
.plan-fine { margin-top: 12px; font-size: 0.875rem; color: var(--l-muted); text-align: center; }

/* FAQ */
.faq { max-width: 760px; }
.faq details { border-top: 1px solid var(--l-hair); }
.faq details:last-child { border-bottom: 1px solid var(--l-hair); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; font-weight: 600; font-size: 1.0625rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 24px; width: 10px; height: 10px;
  border-right: 2px solid var(--l-brand); border-bottom: 2px solid var(--l-brand); transform: rotate(45deg);
  transition: transform 160ms ease;
}
.faq details[open] summary::after { transform: rotate(225deg); top: 30px; }
.faq details p { padding: 0 0 20px; color: var(--l-muted); }
.faq details p + p { margin-top: -8px; }

/* Final CTA */
.closing .wrap { padding-top: 96px; padding-bottom: 96px; }
.closing h2 { max-width: 18ch; }
.closing .lede { margin-bottom: 28px; }

/* Footer */
.footer { border-top: 1px solid var(--l-hair); padding: 32px 0 40px; font-size: 0.9375rem; color: var(--l-muted); }
.footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: baseline; }
.footer .wordmark { font-size: 1rem; margin-right: 0; }
.footer nav { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-left: auto; }
.footer a { color: var(--l-muted); }
.footer a:hover { color: var(--l-brand-deep); }

/* Responsive */
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; padding-top: 48px; padding-bottom: 56px; }
  .ticket { justify-self: start; max-width: 520px; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operator .wrap { grid-template-columns: 1fr; padding-top: 64px; padding-bottom: 64px; }
  .section { padding: 64px 0; }
}
@media (max-width: 600px) {
  body { font-size: 1rem; }
  .nav .wrap { gap: 8px; min-height: 56px; }
  .nav .btn { padding: 0 12px; font-size: 0.875rem; min-height: 38px; }
  .wordmark { font-size: 1.125rem; }
  .problem-list, .features { grid-template-columns: 1fr; }
  .plan { padding: 26px 22px 24px; }
  .plan-price-amount { font-size: 2.5rem; }
  .plan-price-fallback { font-size: 1.625rem; }
  .ticket { padding: 18px 18px 16px; }
  .closing .wrap { padding-top: 64px; padding-bottom: 64px; }
  .footer nav { margin-left: 0; }
}

/* Legal pages (terms.html, privacy.html): one readable column, no marketing furniture. */
.legal { padding: 48px 0 80px; }
.legal article { max-width: 720px; }
.legal h1 { font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: 8px; }
.legal-meta { color: var(--l-muted); font-size: 0.9375rem; margin-bottom: 36px; }
.legal h2 { font-size: 1.375rem; margin: 40px 0 12px; max-width: none; }
.legal h3 { font-size: 1.0625rem; margin: 20px 0 8px; }
.legal p, .legal li { max-width: none; }
.legal p + p { margin-top: 12px; }
.legal ul, .legal ol { padding-left: 22px; margin: 10px 0 14px; }
.legal li + li { margin-top: 6px; }
.legal table { border-collapse: collapse; width: 100%; margin: 12px 0 18px; font-size: 0.9375rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--l-hair); }
.legal th { color: var(--l-muted); font-weight: 600; }
.legal .lawyer { background: #FFF8E1; border-left: 4px solid var(--l-amber); padding: 10px 14px; font-size: 0.9375rem; }
@media (max-width: 600px) { .legal { padding: 32px 0 56px; } }