/* Landing page only. Deliberately self-contained rather than sharing the
   app's styles.css — that stylesheet is tuned for the dense app-shell UI
   (compact controls, 6px-radius buttons) and fighting it would fight the
   more editorial marketing treatment this page wants. The palette below
   intentionally matches styles.css's :root tokens so the page still reads
   as the same product once a visitor clicks through to sign in/app.html. */

:root {
  --ink: #18201d;
  --paper: #f5f7f4;
  --panel: #ffffff;
  --muted: #5f6b65;
  --line: #d7ded9;
  --accent: #1f6f5b;
  --accent-strong: #144a3d;
  --flag-amber: #f0b432;
  --flag-red: #d9433f;
  --flag-purple: #6558d3;
  --ok: #247044;

  --display-font: "Fraunces", Georgia, "Times New Roman", serif;
  --body-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono-font: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body-font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

h1, h2, h3 {
  font-family: var(--display-font);
  font-weight: 560;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Just scale the glyph down and let the browser's native super/sub
   vertical-align do the positioning — the earlier position:relative + top
   + line-height:0 combination reserved layout space at the unshifted
   position while painting the glyph elsewhere, which is what tore the
   "1H/13C" apart from its base text instead of fixing it. */
sup, sub {
  font-size: 0.7em;
}

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- shared bits ---------- */

.eyebrow {
  font-family: var(--body-font);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin: 0 0 14px;
}

.eyebrow-center {
  text-align: center;
}

.section-title {
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem);
  max-width: 20ch;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: var(--body-font);
  font-weight: 750;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 24px rgba(20, 74, 61, 0.28);
}

.btn-primary:hover {
  background: var(--accent-strong);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.btn-compact {
  padding: 9px 20px;
  font-size: 0.86rem;
}

.btn-large {
  padding: 16px 34px;
  font-size: 1.05rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-family: var(--body-font);
  font-weight: 900;
  font-size: 0.8rem;
}

.brand-word {
  font-family: var(--display-font);
  font-weight: 600;
  font-size: 1.08rem;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--body-font);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.tag-warning {
  background: #fff4dd;
  color: #8b5b00;
}

.tag-missing {
  background: #ffeef0;
  color: #9c2f2f;
}

.tag-review {
  background: #ece9fb;
  color: #4a3fa0;
}

.tag-ok {
  background: #eaf7ee;
  color: var(--ok);
}

.flag-triangle {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--flag-amber);
  color: #4a3900;
  font-weight: 900;
  font-size: 0.72rem;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px clamp(20px, 5vw, 64px);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-nav {
  display: flex;
  gap: 28px;
  margin-right: auto;
  font-size: 0.92rem;
  font-weight: 650;
}

.site-nav a {
  text-decoration: none;
  color: var(--muted);
}

.site-nav a:hover {
  color: var(--ink);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.link-signin {
  text-decoration: none;
  font-weight: 650;
  font-size: 0.92rem;
  color: var(--ink);
}

.link-signin:hover {
  color: var(--accent-strong);
}

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

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(56px, 7vw, 100px);
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px) clamp(56px, 8vw, 104px);
}

/* Grid items default to min-width: auto, i.e. they refuse to shrink below
   their content's min-content width — for the h1 that's the width of its
   longest unbreakable word ("Information?"), which can be wider than this
   column's actual track share. Without this the column (and the "?") was
   overflowing straight into .hero-visual regardless of max-width. */
.hero-copy {
  min-width: 0;
}

.hero-copy > * {
  opacity: 0;
  transform: translateY(14px);
  animation: hero-rise 0.7s ease forwards;
}

.hero-copy > *:nth-child(1) { animation-delay: 0.02s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.1s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.2s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.3s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.38s; }

@keyframes hero-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero h1 {
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
  max-width: 15ch;
}

.hero-sub {
  margin-top: 20px;
  max-width: 46ch;
  font-size: 1.12rem;
  color: var(--muted);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.hero-fineprint {
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--muted);
}

.hero-visual {
  display: grid;
  gap: 14px;
}

.visual-caption {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}

.transform-card {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(24, 32, 29, 0.1);
}

.transform-block {
  padding: 16px;
  border-radius: 12px;
}

.transform-before {
  background: #fbfaf6;
  border: 1px dashed var(--line);
}

.transform-after {
  background: #101714;
  color: #e8f1ec;
}

.transform-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 8px;
}

.transform-after .transform-label {
  color: #8fb5a6;
}

.transform-text {
  font-family: var(--mono-font);
  font-size: 0.82rem;
  line-height: 1.6;
}

.transform-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

/* ---------- problem ---------- */

.problem {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px) clamp(56px, 8vw, 96px);
}

.problem h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.15rem);
  max-width: 22ch;
  margin-bottom: 28px;
}

.problem-list {
  display: grid;
  gap: 16px;
}

.problem-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 1rem;
  color: var(--ink);
}

.problem-list .flag-triangle {
  margin-top: 1px;
}

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

.features {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 40px) clamp(20px, 5vw, 64px) clamp(56px, 8vw, 96px);
  text-align: center;
}

.features .section-title {
  margin: 0 auto 40px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  text-align: left;
}

.feature-card {
  padding: 26px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.feature-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  box-shadow: 0 18px 36px rgba(24, 32, 29, 0.08);
}

.feature-card h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.feature-card p {
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.55;
}

.feature-card-wide {
  grid-column: span 2;
  background: linear-gradient(135deg, #eef4f1, var(--panel) 60%);
}

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

.how-it-works {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 40px) clamp(20px, 5vw, 64px) clamp(64px, 9vw, 112px);
  text-align: center;
}

.how-it-works .section-title {
  margin: 0 auto 44px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  text-align: left;
}

.steps li {
  display: grid;
  gap: 10px;
}

.step-id {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono-font);
  font-weight: 700;
  font-size: 1.05rem;
}

.steps h3 {
  font-size: 1.1rem;
}

.steps p {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

/* ---------- final CTA ---------- */

.final-cta {
  background: var(--ink);
  color: #f2f5f3;
  text-align: center;
  padding: clamp(56px, 9vw, 104px) clamp(20px, 5vw, 64px);
  display: grid;
  gap: 26px;
  justify-items: center;
}

.final-cta h2 {
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.7rem);
  max-width: 18ch;
  color: #fff;
}

.final-cta-fineprint {
  max-width: 44ch;
  font-size: 0.86rem;
  color: #9fb0a8;
}

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

.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 28px clamp(20px, 5vw, 64px);
  font-size: 0.85rem;
  color: var(--muted);
}

.brand-footer .brand-word {
  font-size: 0.95rem;
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    order: -1;
  }

  .feature-card-wide {
    grid-column: span 2;
  }
}

@media (max-width: 720px) {
  .site-nav {
    display: none;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .feature-card-wide {
    grid-column: span 1;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .header-actions .link-signin {
    display: none;
  }
}