/* Landing page only - the app SPA (style.css) still owns the shared header, vars, .btn, and the result-card, badge,
   "at a glance", chat and alert components the page shows. Those are the real components, so the page matches the app
   in light and dark with nothing to keep in sync by hand. */
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.landing {
  background: var(--bg);
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --measure: 62ch;
  --sec: clamp(56px, 8vw, 112px); /* the one vertical rhythm between sections */
  scroll-padding-top: 76px;       /* anchors land below the fixed header */
}
body.landing .wrap { max-width: 1280px; }
body.landing :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
body.landing .btn { text-decoration: none; }
.lp-btn-lg { padding: 13px 26px; font-size: 15px; }

/* header */
.lp-nav { display: flex; gap: 22px; }
.lp-nav a { color: var(--muted); text-decoration: none; font-weight: 500; }
.lp-nav a:hover { color: var(--ink); }
.lp-cta { display: flex; align-items: center; gap: 10px; }
@media (max-width: 720px) { .lp-nav { display: none; } }

/* type: Newsreader for every heading, set large and close; the system sans for text, as in the app */
.lp-hero h1, .lp-h2, .lp-final-cta h2, .lp-feat h3, .lp-who h3, .lp-steps h3, .lp-price { font-family: var(--serif); font-optical-sizing: auto; }
.lp-hero h1 { font-weight: 500; font-size: clamp(40px, 5.3vw, 56px); line-height: 1.02; letter-spacing: -.03em; margin: 0 0 .45em; max-width: 12.5em; text-wrap: balance; }
.lp-h2 { font-weight: 500; font-size: clamp(30px, 3.5vw, 40px); line-height: 1.08; letter-spacing: -.022em; margin: 0 0 .4em; text-wrap: balance; }
.lp-h2-sm { font-size: clamp(20px, 2.2vw, 24px); }
.lp-sec-head { max-width: var(--measure); margin-bottom: 32px; }
.lp-sec-head p { color: var(--muted); margin: 0; font-size: 17px; line-height: 1.6; }

/* hero: the pitch on the left, a real results panel on the right */
.lp-hero { padding: clamp(36px, 6vw, 80px) 0 clamp(40px, 6vw, 72px); }
.lp-hero-in { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: start; } /* start: the pitch and its button stay at the top, not centred against the taller panel */
@media (max-width: 960px) { .lp-hero-in { grid-template-columns: 1fr; } }
.lp-sub { color: var(--muted); max-width: 54ch; margin: 0 0 30px; font-size: 17px; line-height: 1.62; }
.lp-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.lp-hero-note { color: var(--muted); font-size: 15px; margin: 16px 0 0; max-width: 58ch; }
.lp-jump { display: none; }
.lp-hero-brand { display: none; } /* the header carries the name on wide screens; on phones it hides it, so the hero does */

/* the specimen: the app's own search bar and cards, read-only */
.lp-specimen { margin: 0; }
.lp-frame { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: 0 24px 60px -30px rgb(15 118 110 / .45); }
.lp-frame .searchbar { box-shadow: none; }
.lp-count { margin: 12px 2px; font-size: 15px; }
.lp-frame .card { margin-bottom: 10px; transition: none; }
.lp-frame .card:hover { border-color: var(--line); }
.lp-frame .less-relevant { margin: 12px 0 0; }
.lp-frame .muted { color: var(--muted); }
.lp-specimen figcaption { color: var(--muted); font-size: 13px; padding: 12px 4px 0; }

/* the six databases */
.lp-sources { padding-block: clamp(32px, 4vw, 52px); border-block: 1px solid var(--line); }
.lp-source-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px clamp(24px, 4vw, 56px); }
@media (max-width: 900px) { .lp-source-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lp-source-list { grid-template-columns: 1fr; gap: 16px; } }
.lp-source-list li { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--line); }
.lp-source-list strong { font-size: 15px; }
.lp-source-list span { color: var(--muted); font-size: 15px; line-height: 1.5; }

/* the product tour: four panels of real components. Without script they all show, one under another; with it, the
   tab bar below is built and one panel shows at a time. */
.lp-tour { padding-block: var(--sec) calc(var(--sec) * .6); }
.lp-tour-body:not(.is-tabbed) .lp-panel + .lp-panel { border-top: 1px solid var(--line); }
.lp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 8px; overflow-x: auto; scrollbar-width: none; }
.lp-tabs::-webkit-scrollbar { display: none; }
.lp-tab { flex: 0 0 auto; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; padding: 12px 18px; font-weight: 600; font-size: 17px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.lp-tab:hover { color: var(--ink); }
.lp-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); }
.lp-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px clamp(28px, 5vw, 72px); align-items: start; padding-block: 40px; }
@media (max-width: 900px) { .lp-panel { grid-template-columns: 1fr; padding-block: 28px; } }
.lp-tour-body.is-tabbed .lp-panel[hidden] { display: none; }
.lp-tour-body.is-tabbed .lp-panel.is-entering { animation: lp-in .22s ease-out; }
@keyframes lp-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .lp-tour-body.is-tabbed .lp-panel.is-entering { animation: none; } }
.lp-feat + .lp-feat { margin-top: 28px; }
.lp-feat h3 { font-weight: 600; font-size: 24px; line-height: 1.2; letter-spacing: -.012em; margin: 0 0 .35em; }
.lp-feat p { color: var(--muted); margin: 0; max-width: 56ch; line-height: 1.65; font-size: 15px; }
.lp-panel-demo { min-width: 0; }
@media (min-width: 901px) { .lp-tour-body.is-tabbed .lp-panel-demo { position: sticky; top: 88px; } }

/* inside the demos */
.lp-pills, .lp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-chips { margin: 12px 0 0; gap: 4px; }
.lp-chips .chip { cursor: default; margin: 0; }
.lp-chips .chip em { font-style: normal; color: var(--muted); font-size: 12px; margin-left: 2px; }
.lp-frame .glance { margin-bottom: 12px; }
.lp-sheet { margin: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 15px; }
.lp-sheet div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 14px; }
.lp-sheet div + div { border-top: 1px solid var(--line); }
.lp-sheet dt { color: var(--muted); flex: 0 0 auto; }
.lp-sheet dd { margin: 0; font-weight: 600; text-align: right; }
.lp-src { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; font-size: 11px; font-weight: 700; background: var(--good-bg); color: var(--good); white-space: nowrap; }
.lp-chat { display: grid; gap: 10px; }
.lp-chat .msg { font-size: 15px; }
.lp-cite { display: inline-block; padding: 0 6px; border-radius: 8px; font-size: 12px; font-weight: 700; background: var(--good-bg); color: var(--good); white-space: nowrap; }
.lp-frame .alert-list { margin: 0; }
.lp-frame .alert-list .card { margin-bottom: 0; }
.lp-folders { list-style: none; margin: 12px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.lp-folders li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; }
.lp-folders li + li { border-top: 1px solid var(--line); }
.lp-folders span { color: var(--muted); }

/* levels of evidence: one dark band, the page's single strong contrast */
.lp-evidence { background: #0c2b29; color: #e6efee; padding-block: var(--sec); }
:root[data-theme="dark"] .lp-evidence { background: #0f3a36; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-evidence { background: #0f3a36; } }
.lp-ev-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px clamp(28px, 6vw, 96px); align-items: center; }
@media (max-width: 900px) { .lp-ev-in { grid-template-columns: 1fr; } }
.lp-evidence .lp-h2 { color: #fff; }
.lp-ev-copy p { color: #b9cfcc; margin: 0 0 14px; max-width: 54ch; font-size: 17px; line-height: 1.65; }
.lp-ev-copy .lp-ev-note { font-size: 15px; color: #8fa9a6; }
.lp-ladder { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgb(255 255 255 / .16); }
.lp-ladder li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid rgb(255 255 255 / .16); }
.lp-ladder strong { display: block; font-size: 17px; color: #fff; }
.lp-ladder span:not(.lvl-meter) { color: #b9cfcc; font-size: 15px; line-height: 1.45; }
.lp-ladder .lvl-meter { margin: 0; gap: 4px; }
.lp-ladder .lvl-meter i { width: 18px; height: 10px; background: rgb(255 255 255 / .16); }
.lp-ladder .lvl-meter i.on { background: #2dd4bf; }
.lp-ladder .lvl-meter.l4 i.on, .lp-ladder .lvl-meter.l5 i.on { background: #fcd34d; }

/* who it is for */
.lp-who { padding-block: var(--sec) calc(var(--sec) * .5); }
.lp-who-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 64px); margin-top: 28px; }
@media (max-width: 800px) { .lp-who-grid { grid-template-columns: 1fr; gap: 24px; } }
.lp-who-grid > div { border-top: 2px solid var(--brand); padding-top: 16px; }
.lp-who h3 { font-weight: 600; font-size: 24px; letter-spacing: -.01em; margin: 0 0 .3em; }
.lp-who p { color: var(--muted); margin: 0; max-width: 40ch; line-height: 1.65; }

/* how it works: a real sequence, so the steps are numbered by the list itself */
.lp-how { padding-block: calc(var(--sec) * .5); }
.lp-steps { list-style: none; counter-reset: step; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 720px) { .lp-steps { grid-template-columns: 1fr; } }
.lp-steps li { counter-increment: step; border-left: 3px solid var(--brand); padding-left: 16px; }
.lp-steps li::before { content: counter(step); font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--brand); display: block; margin-bottom: 8px; }
.lp-steps h3 { font-weight: 600; font-size: 20px; margin: 0 0 .25em; }
.lp-steps p { color: var(--muted); margin: 0; max-width: 34ch; line-height: 1.6; }

/* pricing */
.lp-pricing { padding-block: calc(var(--sec) * .5); }
.lp-pricing .lp-features-intro { max-width: var(--measure); margin-bottom: 28px; }
.lp-pricing .lp-features-intro p { color: var(--muted); margin: 0; font-size: 17px; line-height: 1.6; }
.lp-plan-free { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px clamp(24px, 5vw, 64px); align-items: center; border: 1px solid var(--brand); border-radius: 16px; background: var(--surface); padding: 24px clamp(16px, 3vw, 32px); }
@media (max-width: 800px) { .lp-plan-free { grid-template-columns: 1fr; } }
.lp-plan-free h3 { margin: 0; }
.lp-price { font-size: 40px; font-weight: 500; margin: 0; line-height: 1.1; }
.lp-plan-free ul { list-style: none; margin: 0; padding: 0; color: var(--muted); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
@media (max-width: 1100px) { .lp-plan-free ul { grid-template-columns: 1fr; } }
.lp-plan-free li::before { content: "✓ "; color: var(--brand); font-weight: 700; }
.lp-soon { color: var(--muted); max-width: var(--measure); margin: 18px 0 0; font-size: 15px; }

/* faq: the heading stays beside the list on wide screens */
.lp-faq { padding-block: calc(var(--sec) * .5) var(--sec); }
.lp-faq-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px clamp(28px, 5vw, 80px); align-items: start; }
@media (min-width: 901px) { .lp-faq .lp-sec-head { position: sticky; top: 88px; } }
@media (max-width: 900px) { .lp-faq-in { grid-template-columns: 1fr; } }
.lp-faq .lp-sec-head { margin-bottom: 0; }
.lp-faq-list { max-width: 820px; border-top: 1px solid var(--line); }
.lp-faq-list details { border-bottom: 1px solid var(--line); }
.lp-faq-list summary { cursor: pointer; padding: 18px 0; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lp-faq-list summary::-webkit-details-marker { display: none; }
.lp-faq-list summary::after { content: "+"; font-size: 24px; color: var(--brand); flex: 0 0 auto; }
.lp-faq-list details[open] summary::after { content: "\2212"; }
.lp-faq-list details p { color: var(--muted); margin: 0 0 20px; max-width: var(--measure); line-height: 1.65; }

/* final call to action */
.lp-final-cta { background: var(--brand); color: var(--brand-ink); padding: clamp(40px, 6vw, 72px) 0; }
.lp-final-in { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; }
.lp-final-cta h2 { font-weight: 500; font-size: clamp(30px, 3.2vw, 40px); letter-spacing: -.02em; margin: 0 0 .2em; }
.lp-final-cta p { opacity: .9; margin: 0; }
.lp-final-cta .btn { background: var(--brand-ink); color: var(--brand); }
.lp-final-cta .btn:hover { filter: brightness(.96); }
.lp-final-cta .btn:focus-visible { outline-color: var(--brand-ink); }

/* phones */
@media (max-width: 560px) {
  .lp-cta { gap: 6px; }
  .lp-cta .btn { padding: 0 12px; min-height: 40px; display: inline-grid; place-items: center; font-size: 15px; }
  .lp-hero { padding: 24px 0 32px; }
  .lp-hero-brand { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
  .lp-hero-logo { display: block; width: 40px; height: 40px; border-radius: 8px; }
  .lp-hero-name { font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
  .lp-tabs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 24px; }
  .lp-hero-in { gap: 28px; }
  .lp-hero h1 { font-size: 30px; line-height: 1.06; }
  .lp-sub { font-size: 15px; margin-bottom: 20px; }
  .lp-hero-cta { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
  .lp-hero-cta .btn { text-align: center; min-height: 48px; display: grid; place-items: center; padding: 10px 14px; }
  .lp-hero-note { margin-top: 12px; }
  .lp-jump { display: flex; gap: 22px; margin: 14px 0 0; font-weight: 600; }
  .lp-jump a { padding: 13px 0; }

  .lp-frame { padding: 10px; border-radius: 12px; }
  .lp-frame .searchbar { flex-wrap: nowrap; }
  .lp-frame .searchbar .search-field { flex: 1 1 0; }
  .lp-frame .searchbar .btn[type=submit] { flex: 0 0 auto; }
  .lp-frame .card { padding: 14px; }

  .lp-tab { padding: 12px 14px; font-size: 15px; }
  .lp-feat h3 { font-size: 20px; }
  .lp-ladder li { gap: 14px; }
  .lp-ladder .lvl-meter i { width: 14px; }
  .lp-faq-list summary { padding: 18px 0; }
  .lp-final-in .btn, .lp-plan-free .btn { width: 100%; text-align: center; min-height: 48px; display: grid; place-items: center; }
}