/* Landing page only. Tokens, fonts, buttons and the board live in style.css.
   Nothing here should be required by /board or /board/admin. */

.landing {
  --lp-paper: #F4F1EA;
  --lp-card: #FFFCF8;
  --lp-line: #E4DDD2;
  --lp-quiet: #E8E3D8;
  --lp-shadow: 0 22px 44px -30px rgba(48, 32, 12, .55);
  background: var(--lp-paper);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .landing {
    --lp-paper: #0C1218;
    --lp-card: #151E28;
    --lp-line: #2A3848;
    --lp-quiet: #1A2430;
    --lp-shadow: 0 22px 44px -28px rgba(0, 0, 0, .65);
  }
}
:root[data-theme="dark"] .landing {
  --lp-paper: #0C1218;
  --lp-card: #151E28;
  --lp-line: #2A3848;
  --lp-quiet: #1A2430;
  --lp-shadow: 0 22px 44px -28px rgba(0, 0, 0, .65);
}

.landing main { padding: 0; }
.landing .site-footer a,
.lp-fine a { color: inherit; }
.lp-wrap { max-width: 1120px; margin: 0 auto; padding-inline: 24px; }

.landing .btn,
.landing .btn-google,
.landing .btn-ghost { border-radius: 10px; }
.landing .btn {
  background: var(--ink); color: var(--lp-paper) !important; border-color: transparent;
}
.landing .btn:hover { filter: none; background: color-mix(in srgb, var(--ink) 86%, var(--g-d)); }

/* header — text links only; the sign-in buttons live in the hero */
.landing .site-header {
  position: sticky; top: 0; z-index: 5;
  border-bottom: 1px solid var(--lp-line);
  background: color-mix(in srgb, var(--lp-paper) 88%, transparent);
  backdrop-filter: blur(10px);
}
.lp-header-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-block: 14px;
}
.lp-brand {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  font: 700 1.25rem/1 var(--font-display); letter-spacing: -0.025em; color: var(--ink);
}
.lp-nav { display: flex; align-items: center; gap: 22px; flex-wrap: nowrap; }
.lp-nav > a { text-decoration: none; font-weight: 500; font-size: .95rem; white-space: nowrap; color: var(--ink-2); }
.lp-nav > a:hover { color: var(--ink); }
.lp-nav > a[aria-current="page"] { color: var(--ink); font-weight: 700; }

.landing h1, .landing h2, .landing h3 { font-family: var(--font-display); text-wrap: balance; }
.lp-section h2, .lp-section h3, .lp-final h2, .lp-hero h1 { margin: 0; }
.landing .eyebrow {
  margin: 0 0 14px; font: 500 .72rem/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: .14em; color: var(--muted);
}
.lp-section h2, .lp-final h2 {
  font-weight: 700; font-size: clamp(1.85rem, 3.2vw, 2.55rem);
  line-height: 1.08; letter-spacing: -0.035em; max-width: 22ch;
}
.lp-sub { max-width: 58ch; margin: 14px 0 0; font-size: 1.05rem; color: var(--ink-2); }
.lp-aside { max-width: 62ch; margin: 22px 0 0; font-size: .95rem; color: var(--muted); }
.lp-fine { margin: 14px 0 0; font-size: .88rem; color: var(--muted); max-width: 52ch; }
.lp-fine a { text-decoration: underline; text-underline-offset: 3px; }

/* hero */
.lp-hero { padding-block: clamp(36px, 6vw, 80px) clamp(28px, 4vw, 48px); }
.lp-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .9fr);
  grid-template-areas: "copy card" "actions card";
  column-gap: clamp(28px, 5vw, 72px);
  row-gap: 4px;
  align-items: center;
}
.lp-hero-copy { grid-area: copy; }
.lp-hero-actions { grid-area: actions; align-self: start; }
.label-wrap { grid-area: card; }
.lp-hero h1 {
  font-weight: 800; font-size: clamp(2.5rem, 5.4vw, 4.5rem);
  line-height: .96; letter-spacing: -0.04em; max-width: 12ch;
}
.lp-lede { margin: 18px 0 0; max-width: 42ch; font-size: 1.08rem; line-height: 1.55; color: var(--ink-2); }
.lp-invite {
  display: inline-flex; margin: 22px 0 0; padding: 7px 12px;
  border: 1px solid var(--lp-line); border-radius: 999px;
  background: var(--lp-card); color: var(--ink-2); font-size: .86rem;
}
.lp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* specimen */
.label {
  margin: 0; padding: 18px 22px 16px;
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: 16px;
  box-shadow: var(--lp-shadow);
}
.label-flag {
  display: flex; justify-content: space-between; gap: 12px;
  font: 500 .68rem/1.2 var(--font-mono);
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}
.label-title {
  margin: 14px 0 0 !important; font-size: 1.35rem !important; font-weight: 700;
  letter-spacing: -0.03em; max-width: none !important;
}
.label-score {
  display: flex; align-items: baseline; gap: 8px; margin-top: 4px;
}
.label-num {
  font: 800 clamp(3.6rem, 7vw, 5.2rem)/.9 var(--font-display); letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.label-of { font: 400 .85rem var(--font-mono); color: var(--muted); }
.landing .label-score .chip {
  margin-left: auto; align-self: center; width: 2.5rem; height: 2.5rem;
  border-radius: 8px; font-size: 1.2rem;
}
.meter {
  container-type: inline-size;
  height: 8px; margin: 12px 0 4px; border-radius: 99px;
  background: var(--lp-quiet); overflow: hidden;
}
.meter-fill {
  display: block; height: 100%; border-radius: inherit;
  background-image: linear-gradient(90deg, var(--g-f), var(--g-d) 35%, var(--g-c) 62%, var(--g-b));
  background-size: 100cqi 100%;
  background-repeat: no-repeat;
}

.label-rows { list-style: none; margin: 8px 0 0; padding: 0; }
.label-rows li {
  display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--lp-line);
}
.landing .swatch { width: 10px; height: 10px; border-radius: 99px; }
.landing .swatch-none { background: var(--lp-quiet); border: 1px solid var(--lp-line); }
.row-name {
  font: 600 .78rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.row-calc {
  font: 500 .85rem var(--font-mono); color: var(--ink-2); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.label-foot {
  margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--lp-line);
  font: 400 .78rem var(--font-mono); color: var(--muted);
}
.label-foot strong { color: var(--ink); font-weight: 500; }
.label-note { margin: 10px 2px 0; font-size: .8rem; color: var(--muted); }

/* corpus proof */
.lp-stats { border-block: 1px solid var(--lp-line); }
.lp-stats dl {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0;
}
.lp-stats dl > div {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  padding: 18px 12px;
}
.lp-stats dl > div + div { border-left: 1px solid var(--lp-line); }
.lp-stats dd {
  margin: 0; font: 800 clamp(1.35rem, 2.4vw, 1.7rem)/1 var(--font-display);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.lp-stats dt { margin: 0; font-weight: 500; font-size: .95rem; color: var(--ink-2); }

/* sections */
.lp-section { padding-block: clamp(48px, 6vw, 84px); }
.lp-rule { border-top: 1px solid var(--lp-line); }
.lp-record-band {
  background: color-mix(in srgb, var(--lp-quiet) 55%, var(--lp-paper));
  border-block: 1px solid var(--lp-line);
}

.steps {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 40px);
}
.steps li { padding-top: 14px; border-top: 2px solid var(--ink); }
.step-n { display: block; margin-bottom: 10px; font: 500 .78rem var(--font-mono); color: var(--muted); }
.steps h3 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.03em; }
.steps p { margin: 8px 0 0; max-width: 34ch; color: var(--ink-2); font-size: .98rem; }

.pills {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  margin: 28px 0 0; padding: 0;
}
.pill {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--c); color: var(--c-ink);
  font-weight: 600; font-size: .92rem; line-height: 1;
}
.pill span { font: 500 .88rem var(--font-mono); }

.landing .formula {
  margin: 16px 0 0; padding: 14px 16px; overflow-x: auto;
  background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 10px;
  font: 400 .92rem/1.5 var(--font-mono); color: var(--ink);
}
.landing .formula code { background: none; padding: 0; font-size: inherit; }

.scale {
  display: flex; gap: 4px; height: 44px; margin-top: 28px;
}
.band {
  display: grid; place-items: center; min-width: 1.7rem; border-radius: 6px;
  font: 800 .95rem var(--font-display);
}
.bands {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px 18px; margin: 16px 0 0;
}
.bands dt { display: flex; align-items: center; gap: 8px; }
.landing .bands .chip { width: 1.7rem; height: 1.7rem; border-radius: 5px; font-size: .85rem; }
.bands .range { font: 500 .78rem var(--font-mono); font-variant-numeric: tabular-nums; color: var(--muted); }
.bands dd { margin: 6px 0 0; font-size: .86rem; color: var(--ink-2); }

/* taxonomy */
.landing .tiles {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
.landing .tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  min-height: 84px; padding: 12px 14px; border-radius: 12px;
  background: var(--c); color: var(--c-ink); font-weight: 600; font-size: .95rem; line-height: 1.2;
}
.landing .tile small {
  font: 500 .68rem/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; opacity: .8;
}
.landing .tile-none {
  background: var(--lp-quiet); color: var(--muted); border: 1px solid var(--lp-line);
}
.legend {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 16px 0 0; padding: 0;
  font: 400 .78rem var(--font-mono); color: var(--ink-2);
}
.legend li { display: inline-flex; align-items: center; gap: 8px; }

/* the part the old page left out */
.record {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.record li {
  padding: 16px 16px 18px;
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-top: 3px solid var(--g-c);
  border-radius: 12px;
}
.record li:nth-child(6n+1) { border-top-color: var(--g-f); }
.record li:nth-child(6n+2) { border-top-color: var(--g-d); }
.record li:nth-child(6n+3) { border-top-color: var(--g-c); }
.record li:nth-child(6n+4) { border-top-color: var(--g-b); }
.record li:nth-child(6n+5) { border-top-color: var(--ink); }
.record li:nth-child(6n+6) { border-top-color: var(--muted); }
.record h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; }
.record p { margin: 8px 0 0; color: var(--ink-2); font-size: .92rem; }

.features {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 36px);
}
.features li { padding-top: 14px; border-top: 2px solid var(--ink); }
.features h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.features p { margin: 8px 0 0; color: var(--ink-2); font-size: .98rem; }

.uses {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 28px; margin: 36px 0 0; padding-top: 22px;
  border-top: 1px solid var(--lp-line);
}
.uses dt { font-weight: 650; font-size: .95rem; font-family: var(--font-display); letter-spacing: -0.02em; }
.uses dd { margin: 6px 0 0; color: var(--ink-2); font-size: .9rem; }

/* honesty */
.lp-honest {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 6vw, 72px); align-items: start;
}
.lp-statement {
  margin: 18px 0 0; max-width: 36ch;
  font: 500 clamp(1.15rem, 2vw, 1.4rem)/1.4 var(--font-display); letter-spacing: -0.015em;
}
.claims { list-style: none; margin: 0; padding: 0; }
.claims li { padding: 16px 0; border-top: 1px solid var(--lp-line); }
.claims li:last-child { border-bottom: 1px solid var(--lp-line); }
.claims h3 { font: 700 1.02rem var(--font-body); letter-spacing: 0; }
.claims p { margin: 4px 0 0; color: var(--ink-2); max-width: 48ch; font-size: .95rem; }

.lp-plans { padding-top: clamp(28px, 4vw, 48px); }
.lp-plans .billing .interval { margin-top: 22px; }
.lp-more { margin: 22px 0 0; }
.lp-more a:not(.btn) { color: var(--accent); }

.lp-faq {
  display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: clamp(24px, 5vw, 72px); align-items: start;
}
.landing details.faq { border-color: var(--lp-line); }
.lp-faq details.faq p a { color: var(--accent); }

/* closing */
.lp-final {
  background: var(--band); color: var(--band-ink);
  padding-block: clamp(48px, 7vw, 88px);
}
.lp-final-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px 48px;
}
.lp-final h2 { max-width: 12ch; color: var(--band-ink); font-size: clamp(2.1rem, 4vw, 3.1rem); }
.lp-final .btn-google {
  background: #fff; color: #0E1621 !important; border-color: transparent;
}
.lp-final .btn-google:hover { background: #F4F1EA; filter: none; }
.lp-final .btn { background: #fff; color: #0E1621 !important; border-color: transparent; }
.lp-final .btn:hover { filter: none; background: #F4F1EA; }
.lp-final .btn-ghost {
  background: transparent; color: var(--band-ink) !important;
  border-color: color-mix(in srgb, var(--band-ink) 40%, transparent);
}
.lp-final .btn-ghost:hover { background: color-mix(in srgb, var(--band-ink) 8%, transparent); filter: none; }
.lp-final .lp-fine { color: color-mix(in srgb, var(--band-ink) 72%, transparent); }
.lp-final .lp-fine a { color: inherit; }
.lp-final .lp-cta { margin-top: 0; }
.lp-final-actions { max-width: 420px; }

.landing .site-footer { background: var(--lp-paper); border-top: 1px solid var(--lp-line); }

/* sign-in wall (gate.html extends this template) */
.wall { padding-block: clamp(64px, 12vw, 160px); }
.wall h1 {
  font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1; letter-spacing: -0.035em; max-width: 14ch;
}
.wall .lp-lede { max-width: 42ch; }
.lp-nav-secondary { display: inline; }

/* inner marketing pages: same paper and header, quieter type than the home hero */
.landing main.market {
  max-width: 1120px; margin: 0 auto;
  padding: clamp(32px, 5vw, 64px) 24px 80px;
}
.landing main.market h1 { max-width: 18ch; }
.landing main.market .lede a,
.landing .doc-body a,
.landing .pricing-notes a,
.landing .faq-groups a,
.landing .blog-list a,
.landing details.faq a { color: var(--accent); }
.landing .plan {
  background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 14px;
  box-shadow: none;
}
.landing .plan-featured { border-top: 3px solid var(--g-d); box-shadow: var(--lp-shadow); }
.landing .plan-flag {
  border-radius: 999px; background: var(--ink); color: var(--lp-paper);
}
.landing .billing .interval {
  border: 1px solid var(--lp-line); background: var(--lp-card);
}
.landing .billing .interval-thumb { background: var(--ink); }
.landing .billing[data-interval="monthly"] .interval button[data-interval="monthly"],
.landing .billing[data-interval="yearly"] .interval button[data-interval="yearly"] {
  color: var(--lp-paper);
}
.landing .doc-toc { top: 76px; }
.landing .doc-body h2,
.landing .doc-body h3 { scroll-margin-top: 76px; }
.landing .doc-toc ol { border-left-color: var(--lp-line); }
.landing .blog-list li,
.landing details.faq,
.landing details.faq:last-of-type { border-color: var(--lp-line); }
.landing .auth-form input {
  background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 10px;
}
.landing .auth-form button { border-radius: 10px; }

@media (max-width: 980px) {
  .bands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .uses { grid-template-columns: 1fr 1fr; }
  .landing .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .lp-hero-in {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "card" "actions";
  }
  .lp-hero h1 { max-width: 14ch; }
  .lp-honest, .lp-faq, .lp-final-in { grid-template-columns: 1fr; display: grid; }
  .lp-final-in { display: grid; }
  .record, .features { grid-template-columns: 1fr 1fr; }
  .scale { height: 36px; }
}
@media (max-width: 640px) {
  .lp-nav-secondary { display: none; }
  .lp-nav > a.lp-nav-secondary[aria-current="page"] { display: inline; }
  .lp-header-in { gap: 10px; }
  .lp-nav { gap: 14px; }
  .lp-brand { font-size: 1.08rem; gap: 8px; }
  .lp-wrap, .landing main.market { padding-inline: 16px; }
  .steps, .record, .features, .uses, .bands, .landing .plans { grid-template-columns: minmax(0, 1fr); }
  .lp-stats dl { grid-template-columns: 1fr; }
  .lp-stats dl > div { justify-content: flex-start; }
  .lp-stats dl > div + div { border-left: 0; border-top: 1px solid var(--lp-line); }
  .lp-cta .btn, .lp-cta .btn-google, .lp-cta .btn-ghost { flex: 1 1 100%; }
  .landing .tiles { grid-template-columns: 1fr 1fr; }
}