/* The public pages' own components — everything a visitor sees that the
   signed-in screens have no use for. The chrome around these (the navigation,
   the breadcrumb trail, the footer, the buttons, the DRAFT flag) is in
   chrome.css, and the typographic defaults a public page sets are in base.css,
   because both are shared with the app now.

   Every rule below came out of the homepage design's own inline style block,
   and keeps that design's literal type sizes exactly as the founder approved
   them. The homepage is app/views/marketing/pages/home.html.erb now, and this
   file is the whole of its styling.
   Long-form pages read the seven-step scale in tokens.css instead; a page a
   designer tuned by eye is the one place literals are legitimate, and
   re-mapping this page would visibly change it to gain a consistency no visitor
   can observe. */

/* ---------------------------------------------------------------- Section headline
   The heading that opens a band, on every public page. */
.section-h { font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.25rem); letter-spacing: -0.015em; max-width: 20ch; }
.section-h + .lede { margin-top: var(--s4); }

/* The design carried six inline style="" attributes, each of them blocked by
   style_src :self, because style-src-attr falls back to style-src and the
   policy has no 'unsafe-inline'. Four became the rules below and two were
   folded into the component rule they modified (.pricing__grid's margin-top,
   .price__amt's margin-top: 0). The sixth hid the founder heading, and that is
   now the shell's own .sr. */
.hero__cta .btn, .price__cta .btn { align-self: flex-start; }
.final .cta-note { text-align: center; }

/* ---------------------------------------------------------------- Hero */
.hero { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem); }
.hero__inner { max-width: 42rem; }

.chip {
  display: inline-flex; align-items: center; gap: 0.55em;
  border: 1px solid var(--hair-strong);
  background: var(--surface);
  border-radius: 999px;
  padding: 0.4em 0.85em 0.4em 0.7em;
  font-size: 0.86rem; font-weight: 500; color: var(--ink-body);
}
.chip__mark { width: 15px; height: 15px; flex: none; color: var(--accent-strong); }

.hero h1 {
  font-size: clamp(2.15rem, 1.5rem + 2.9vw, 3.35rem);
  letter-spacing: -0.021em;
  margin-top: var(--s5);
  max-width: 15ch;
}
.hero__sub { margin-top: var(--s5); max-width: 52ch; color: var(--ink-body); font-size: 1.13rem; }
.hero__sub strong { color: var(--ink); }

.hero__cta { margin-top: var(--s6); }

/* one-second input -> output artifact (near-wordless) */
.io {
  margin-top: var(--s7);
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center; gap: var(--s4);
  padding: var(--s5);
  border: 1px solid var(--hair); border-radius: var(--radius);
  background: var(--surface);
}
@media (max-width: 540px) {
  .io { grid-template-columns: minmax(0,1fr); gap: var(--s3); }
  .io__arrow svg { transform: rotate(90deg); }
}
.io__cap { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); font-weight: 600; margin-bottom: var(--s3); }
.io__sheet { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 6px; overflow: hidden; font-size: 0.76rem; }
.io__sheet span { background: var(--ground); padding: 0.32em 0.55em; color: var(--ink-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.io__sheet .io__n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.io__arrow { display: flex; justify-content: center; color: var(--accent-strong); }
.io__arrow svg { width: 40px; height: 20px; }
.io__file { display: flex; align-items: center; gap: 0.55em; padding: var(--s4); border: 1px solid var(--hair-strong); border-radius: var(--radius-sm); background: var(--ground); }
.io__file svg { width: 18px; height: 18px; color: var(--ink-muted); flex: none; }
.io__file b { color: var(--ink); font-weight: 600; font-size: 0.95rem; }
.io__file .io__check { color: var(--good); margin-left: auto; }

/* hero trust contract */
.contract { margin-top: var(--s6); display: grid; gap: var(--s3); max-width: 54ch; }
.contract__row { display: flex; gap: var(--s3); font-size: 0.94rem; color: var(--ink-muted); line-height: 1.5; }
.contract__row svg { flex: none; width: 17px; height: 17px; margin-top: 3px; color: var(--ink); }
.contract__row strong { color: var(--ink-body); }
.contract__row a { font-weight: 600; }

/* ---------------------------------------------------------------- Preview artifact (lives in How it works) */
.review {
  margin: var(--s7) 0 0;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 0 var(--hair), 0 18px 40px -28px oklch(0.30 0.05 264 / 0.5);
  overflow: hidden;
}
.review__chrome {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: baseline; justify-content: space-between;
  padding: var(--s3) var(--s4);
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--hair);
  font-size: 0.85rem;
}
.review__file { display: inline-flex; align-items: center; gap: 0.5em; color: var(--ink); font-weight: 600; }
.review__file svg { width: 15px; height: 15px; color: var(--ink-muted); }
.review__file span { color: var(--ink-muted); font-weight: 500; }
.review__status { color: var(--ink-muted); }
.review__status b { color: var(--ink); font-weight: 600; }

.review__body { padding: var(--s4); display: grid; gap: var(--s3); }

/* the customer's billing in plain columns, no LEDES internals */
.preview__cap { color: var(--ink-muted); font-size: 0.96rem; max-width: 60ch; margin: 0 0 var(--s3); }
.preview__cap strong { color: var(--ink-body); }
.ptable-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--hair); border-radius: var(--radius-sm); background: var(--ground); }
table.ptable { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 34rem; }
table.ptable th, table.ptable td { text-align: left; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--hair); white-space: nowrap; }
table.ptable thead th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); font-weight: 600; background: var(--surface-sunk); }
table.ptable th.num, table.ptable td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.ptable tbody tr:last-child td { border-bottom: 0; }
table.ptable td { color: var(--ink); }
table.ptable td.desc { white-space: normal; color: var(--ink-body); font-weight: 400; min-width: 14rem; }

/* ---------------------------------------------------------------- LEDES explainer (serif counterpoint) */
.explainer { background: var(--surface); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.explainer__grid { display: grid; gap: var(--s5); }
@media (min-width: 860px) { .explainer__grid { grid-template-columns: minmax(0, 20ch) minmax(0, 1fr); gap: clamp(2rem,5vw,4rem); align-items: start; } }
.explainer h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); letter-spacing: -0.015em; }
.explainer__body { font-family: var(--serif); font-size: 1.22rem; line-height: 1.6; color: var(--ink-body); max-width: 60ch; }
.explainer__body p + p { margin-top: var(--s4); }
.explainer__body strong { font-family: var(--sans); font-weight: 600; font-size: 0.95em; }

/* ---------------------------------------------------------------- How it works: three plain steps */
.steps { list-style: none; margin: var(--s7) 0 0; padding: 0; display: grid; gap: var(--s6); counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); } }
.step { display: grid; gap: var(--s3); align-content: start; }
.step__n {
  counter-increment: step;
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent-strong);
  font-size: 0.9rem; display: flex; align-items: center; gap: var(--s3);
}
.step__n::before { content: "Step " counter(step); }
.step__n::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.step h3 { font-size: 1.12rem; }
.step p { color: var(--ink-muted); font-size: 0.98rem; }
.step p strong { color: var(--ink-body); }

/* the control narrative, stated once */
.handoff { max-width: 68ch; margin-top: var(--s7); }
.handoff__lead { font-weight: 600; color: var(--ink); font-size: 1.08rem; }
.handoff p + p { margin-top: var(--s4); }
.handoff p:not(.handoff__lead) { color: var(--ink-muted); }
.handoff strong { color: var(--ink-body); }

/* ---------------------------------------------------------------- Portals */
.portals__row { display: grid; gap: var(--s4); margin-top: var(--s6); }
@media (min-width: 720px) { .portals__row { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.portal {
  border: 1px solid var(--hair); border-radius: var(--radius-sm); padding: var(--s4);
  background: var(--surface); display: grid; gap: var(--s2);
}
.portal b { color: var(--ink); font-size: 1rem; }
.portal span { color: var(--ink-muted); font-size: 0.86rem; }

/* ---------------------------------------------------------------- FAQ */
.faq { display: grid; gap: 0; margin-top: var(--s6); border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s5) 0;
  display: flex; align-items: baseline; gap: var(--s4); justify-content: space-between;
  font-weight: 600; color: var(--ink); font-size: 1.08rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { flex: none; color: var(--accent-strong); font-weight: 400; font-size: 1.4rem; line-height: 1; transition: transform 0.15s ease; }
.faq details[open] summary .plus { transform: rotate(45deg); }
.faq .answer { padding: 0 0 var(--s5); max-width: var(--measure); color: var(--ink-muted); }
.faq .answer p + p { margin-top: var(--s3); }
.faq .answer strong { color: var(--ink-body); }

/* ---------------------------------------------------------------- Pricing */
.pricing { background: var(--surface); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
/* One column since the comparison was removed; the card is capped so it doesn't
   stretch to the full 1180px wrap and read as a banner. The margin-top was the
   design's inline style attribute. */
.pricing__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; margin-top: var(--s6); }
.pricing__grid > .price { max-width: 30rem; }
.price {
  border: 1px solid var(--hair-strong); border-radius: var(--radius); background: var(--ground);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.price__amt { display: flex; align-items: baseline; gap: 0.35em; margin-top: 0; }
.price__amt .n { font-size: clamp(2.4rem, 2rem + 2vw, 3rem); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price__amt .u { color: var(--ink-muted); font-weight: 500; }
.price__sub { color: var(--ink-muted); margin-top: var(--s2); font-size: 0.96rem; display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.price__cta { margin-top: var(--s6); }

/* ---------------------------------------------------------------- Founder */
.founder__grid { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 720px) { .founder__grid { grid-template-columns: auto minmax(0,1fr); gap: var(--s6); } }
.founder__avatar {
  width: 68px; height: 68px; border-radius: 50%; flex: none;
  background: var(--ink); color: oklch(0.95 0.02 66);
  display: grid; place-items: center; font-weight: 700; font-size: 1.4rem; letter-spacing: 0.02em;
}
.founder__note { font-family: var(--serif); font-size: 1.3rem; line-height: 1.5; color: var(--ink); max-width: 54ch; }
.founder__sig { margin-top: var(--s4); font-family: var(--sans); font-size: 0.95rem; color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.founder__sig b { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- Final CTA */
.final { text-align: center; }
.final h2 { font-size: clamp(1.7rem, 1.4rem + 1.6vw, 2.5rem); letter-spacing: -0.018em; max-width: 22ch; margin-inline: auto; }
.final p { color: var(--ink-muted); margin: var(--s4) auto 0; max-width: 52ch; }
.final .cta-cluster { align-items: center; margin-top: var(--s6); }

/* ---------------------------------------------------------------- Motion
   The shell's reduced-motion block covers .enter and .btn; this is the one
   homepage-only transition it has to reach. */
@media (prefers-reduced-motion: reduce) {
  .faq summary .plus { transition: none; }
}

/* ---- the legal pages (privacy, terms) --------------------------------------
   One reading column on the body measure. Headings are numbered in the copy,
   so the rules here only set rhythm: a section gap before each h2, a smaller
   one before each h3, and list bullets that the reset removed. */
.legal__body { max-width: var(--measure); }
.legal__body h1 { font-size: var(--step-3); }
.legal__body .legal__effective { margin-top: var(--s3); color: var(--ink-muted); }
.legal__body h2 { font-size: var(--step-1); font-weight: 700; color: var(--ink); letter-spacing: -0.015em; margin-top: var(--s7); }
.legal__body h3 { font-size: var(--step-0); font-weight: 600; color: var(--ink); margin-top: var(--s5); }
.legal__body p, .legal__body li { color: var(--ink-body); line-height: 1.6; }
.legal__body p, .legal__body ul, .legal__body address { margin-top: var(--s4); }
.legal__body ul { padding-left: 1.2em; list-style: disc; }
.legal__body li + li { margin-top: var(--s2); }
.legal__body strong { color: var(--ink); font-weight: 600; }
.legal__body address { font-style: normal; }