/* Emily — landing page styles (workstream B).
 *
 * Page-only layout. Every colour, radius, shadow and space comes from the tokens
 * in base.css; nothing here invents a palette, so light and dark both work with
 * no extra rules. Only .landing-* and .demo-* classes are defined here, and the
 * demo panel reuses the product's own chat and card classes from chat.css.
 *
 * Mobile first: single column from 320px up, wider grids from 640px/900px.
 * No rule here may cause horizontal scrolling or clip text. */

.landing-page {
  --landing-max: 1080px;
  --landing-gutter: var(--space-4);
  /* Height of the sticky bar (two rows on a phone, one from 720px) plus a little
     air, so an in-page anchor never lands underneath it. */
  --landing-anchor: 7.5rem;

  height: auto;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
}

@media (min-width: 720px) {
  .landing-page { --landing-gutter: var(--space-5); --landing-anchor: 5rem; }
}

.landing-wrap {
  width: 100%;
  max-width: var(--landing-max);
  margin-inline: auto;
  padding-inline: var(--landing-gutter);
}

/* ------------------------------------------------------------ skip link */

.landing-skip {
  position: absolute;
  top: -100px;
  left: var(--space-3);
  z-index: 50;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-weight: 650;
}
.landing-skip:focus { top: var(--space-2); }

/* -------------------------------------------------------------- top bar */

.landing-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  padding-top: env(safe-area-inset-top);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.landing-topbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  width: 100%;
  max-width: var(--landing-max);
  margin-inline: auto;
  padding: var(--space-2) var(--landing-gutter);
}

.landing-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.05rem;
}
.landing-brand:hover { text-decoration: none; }
.landing-brand-mark { font-size: 1.15rem; line-height: 1; }
.landing-brand-name { white-space: nowrap; }

.landing-nav {
  display: flex;
  flex-wrap: wrap;
  order: 3;
  flex: 1 1 100%;
  gap: var(--space-1);
  margin-inline: calc(var(--space-2) * -1);
}
.landing-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 0.92rem;
  font-weight: 600;
}
.landing-nav a:hover {
  color: var(--text);
  background: var(--surface-2);
  text-decoration: none;
}

.landing-topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}

@media (min-width: 720px) {
  .landing-brand { flex: 0 0 auto; }
  .landing-nav { order: 0; flex: 0 1 auto; margin-inline: auto; }
}

/* The language switcher sits between the brand and the two actions, so it takes
   the compact size of base.css's own select and never the full width: the bar must
   stay one row on a laptop and two on a phone. */
.landing-lang-select {
  width: auto;
  min-height: 38px;
  padding: 7px 30px 7px 10px;
  font-size: 0.85rem;
  background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px;
}

/* A 320px phone fits the brand, the language switcher, both actions and the
   three section links in two rows only if everything gives up a little padding:
   measured so the bar stays ~108px instead of growing to a third row over the
   hero. */
@media (max-width: 440px) {
  .landing-brand { font-size: 0.95rem; }
  .landing-lang-select { max-width: 88px; font-size: 0.8rem; }
  .landing-btn-signin,
  .landing-btn-start { font-size: 0.85rem; padding-inline: var(--space-2); }
}

/* ----------------------------------------------------------------- hero */

.landing-hero {
  padding-block: var(--space-6) var(--space-5);
  /* The one wash on the page: the product's own hero treatment, built only from
     the accent-soft token, exactly as base.css paints the sign-in screen. */
  background:
    radial-gradient(120% 80% at 50% -10%, var(--accent-soft) 0%, transparent 62%),
    var(--bg);
}

.landing-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.landing-eyebrow {
  min-height: 32px;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}

.landing-h1 {
  max-width: 20ch;
  font-size: clamp(2rem, 1.3rem + 3.4vw, 3.05rem);
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.landing-hero-sub {
  max-width: 46ch;
  color: var(--text-dim);
  font-size: clamp(1rem, 0.94rem + 0.35vw, 1.15rem);
  line-height: 1.5;
}

.landing-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
}
.landing-cta {
  min-height: 48px;
  padding-inline: var(--space-5);
  font-size: 1rem;
}

.landing-trust {
  display: flex;
  flex-direction: column;
  /* Left-aligned, so the three checkmarks share one x on a phone. The row
     becomes centred as a group from 900px. */
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-dim);
  font-size: 0.9rem;
}
.landing-trust li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  max-width: 36ch;
  text-align: left;
}
.landing-trust li::before {
  content: "✓";
  flex: 0 0 auto;
  color: var(--good);
  font-weight: 700;
}

@media (min-width: 900px) {
  .landing-hero { padding-block: var(--space-7) var(--space-6); }
  .landing-trust {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2) var(--space-5);
  }
  .landing-trust li { max-width: none; }
}

/* -------------------------------------------------------------- sections */

.landing-section {
  padding-block: var(--space-6);
  scroll-margin-top: var(--landing-anchor);
}
@media (min-width: 900px) {
  .landing-section { padding-block: var(--space-7); }
}

.landing-band { background: var(--surface-2); }

.landing-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.landing-section-head-center {
  align-items: center;
  text-align: center;
}

.landing-h2 {
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.landing-lede {
  max-width: 62ch;
  color: var(--text-dim);
  font-size: 1rem;
}

/* ------------------------------------------------------------ demo panel */

.landing-demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 900px) {
  .landing-demo-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--space-5);
  }
}

.demo-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.demo-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.demo-panel-title {
  min-width: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

/* Shown only when scripting is off, so an empty frame never stands in for the
   demo: the tint is the page's own accent-soft, not a warning. */
.demo-noscript {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 0.88rem;
  line-height: 1.45;
}

/* The frame is phone-like: it scrolls inside, the page never does. */
.demo-scroll {
  height: 21rem;
  padding: var(--space-3);
  background: var(--surface-2);
}
@media (min-width: 900px) {
  .demo-scroll { height: 25rem; }
}

.demo-composer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
}

.demo-examples {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* A chip that wraps instead of pushing the frame wider than a 320px phone. */
.demo-example {
  min-height: 44px;
  max-width: 100%;
  height: auto;
  padding: 10px 12px;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
  line-height: 1.3;
  transition: background 0.15s ease;
}

.demo-form { display: flex; flex-direction: column; }

.demo-composer-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.demo-input {
  flex: 1 1 auto;
  min-width: 0;
  border-radius: var(--radius-lg);
}
.demo-send {
  flex: 0 0 auto;
  padding-inline: var(--space-5);
}

.demo-foot-note { margin: 0; }

/* ----------------------------------------------------------- month panel */

.demo-month {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.demo-total {
  font-size: clamp(1.7rem, 1.4rem + 1.6vw, 2.1rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.demo-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.demo-bars:empty { display: none; }
.demo-bars > * { min-width: 0; }

/* The rows reuse the product's .expense-row-label column, whose 4.2rem basis is
   sized for a full-width ledger list. In this narrow panel it wraps the longest
   starter category onto two lines, so one bar row stands taller than its
   neighbours and its bar sits lower. Widened and kept on one line inside
   #demo-bars only; the shared product class itself is untouched. */
#demo-bars .expense-row-label {
  flex: 0 0 5.4rem;
  white-space: nowrap;
}

.demo-status {
  color: var(--text-dim);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}
.demo-status:empty { display: none; }

/* ------------------------------------------------------------- how it works */

.landing-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) {
  .landing-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

.landing-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}
.landing-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 0.9rem;
  font-weight: 700;
}
.landing-step-body {
  color: var(--text-dim);
  font-size: 0.92rem;
}

/* ------------------------------------------------------------- features */

.landing-features {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .landing-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .landing-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.landing-feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.landing-feature-emoji {
  font-size: 1.5rem;
  line-height: 1;
}
.landing-feature-body {
  color: var(--text-dim);
  font-size: 0.92rem;
}

/* -------------------------------------------------------------- pricing */

.landing-price-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: 34rem;
  margin-inline: auto;
  padding: var(--space-5);
  text-align: center;
  box-shadow: var(--shadow);
}

.landing-price-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2);
}
.landing-price-amount {
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.3rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.landing-price-period {
  color: var(--text-dim);
  font-size: 1.05rem;
  font-weight: 650;
}
.landing-price-per {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding-inline: 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 0.82rem;
  font-weight: 650;
}

.landing-price-lede {
  max-width: 46ch;
  color: var(--text-dim);
  font-size: 1rem;
}

.landing-price-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.landing-price-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--text-dim);
  font-size: 0.95rem;
}
.landing-price-list li::before {
  content: "✓";
  flex: 0 0 auto;
  color: var(--good);
  font-weight: 700;
}

.landing-price-cta { min-height: 48px; font-size: 1rem; }

.landing-price-fine {
  max-width: 54ch;
  color: var(--text-faint);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* ------------------------------------------------------------------ faq */

.landing-faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.landing-faq-item {
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}
.landing-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.landing-faq-question::-webkit-details-marker { display: none; }
.landing-faq-question::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--accent-text);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}
.landing-faq-item[open] .landing-faq-question::after { content: "−"; }
.landing-faq-answer {
  max-width: 62ch;
  padding: 0 var(--space-4) var(--space-4);
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------- footer */

.landing-footer {
  padding-block: var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.landing-footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.landing-footer-brand {
  font-weight: 650;
  overflow-wrap: anywhere;
}

.landing-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
  margin-inline: calc(var(--space-2) * -1);
}
.landing-footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.landing-footer-links a:hover { background: var(--surface-2); text-decoration: none; }

.landing-footer-note {
  max-width: 62ch;
  color: var(--text-dim);
  font-size: 0.88rem;
}

@media (min-width: 900px) {
  .landing-footer-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
  }
  .landing-footer-note { flex: 1 1 100%; }
}

/* --------------------------------------------------- reduced motion off */

@media (prefers-reduced-motion: reduce) {
  .landing-page,
  .landing-page *,
  .landing-page *::before,
  .landing-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}