/* Pages that keep the generator's layout (landing pages, state-law hubs, root English hubs,
   privacy, terms, support), drawn in the design. Loads after components.css, so these rules
   win ties with the scoped component ones. */

/* ── Type ── */
.lp h1, .lp h2, .lp h3 { font-family: var(--sans); color: var(--fg); }
.lp h1 { font-size: clamp(40px, 5vw, 64px); font-weight: 400; letter-spacing: -.05em; line-height: 1.06; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
/* long words break only when they would overflow; small card titles may hyphenate */
.lp h2, .lp h3 { overflow-wrap: break-word; }
.lp h3, .lp [class*="card"] h2, .lp [class*="__grid"] h2 { hyphens: auto; }
.lp h2 { font-weight: 400; letter-spacing: -.04em; line-height: 1.12; text-wrap: balance; }
.lp .section-heading h2, .lp .cta-band h2, .lp .article-evidence-demo__title { font-size: clamp(30px, 3.6vw, 46px); font-weight: 400; letter-spacing: -.045em; }
.lp h1 em, .lp h2 em, .lp .cta-band h2 span, .lp .cta-band h2 em, .lp .section-heading h2 em, .lp .section-heading h2 span { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; color: var(--muted); }
.lp h1 .lp-sub { display: block; font-family: var(--serif); font-style: italic; letter-spacing: -.02em; color: var(--muted); }
.lp h3 { font-weight: 500; letter-spacing: -.02em; }
.lp .eyebrow { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--gold-ink); }
.lp .lede, .lp .section-lede, .lp .section-sub { color: var(--fg-2); font-size: 17px; line-height: 1.6; }
.lp .breadcrumb { font-size: 13px; color: var(--fg-2); }
.lp .breadcrumb a { color: var(--fg-2); }

/* ── Surfaces: no borders or white bands, grey panels for cards ── */
.lp .section, .lp .page-hero, .lp .bg-white, .lp .section-border { background: transparent; border: 0; box-shadow: none; }
.lp .section { padding-block: clamp(72px, 9vw, 120px); }
.lp .feature-card, .lp .money-detail-card, .lp .record-page-note, .lp .guide-feature, .lp .regional-edition-note .section-container {
  background: var(--panel); border: 0; box-shadow: none; border-radius: 28px;
}
.lp .feature-card h2, .lp .money-detail-card h2, .lp .feature-card h3 { font-size: 20px; font-weight: 500; letter-spacing: -.025em; line-height: 1.25; }
.lp .feature-card:has(.feature-number) h2 { padding-right: 56px; }
.lp .feature-card p, .lp .money-detail-card p { color: var(--fg-2); }
.lp .feature-number { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--muted); }
.lp .regional-edition-note .section-container { padding: clamp(28px, 4vw, 44px); }
.lp .money-screen-crop, .lp .record-page-screen { border: 0; border-radius: 28px; box-shadow: 0 30px 60px -32px rgba(16, 29, 46, .35); }
/* App screenshot cards: flat panels like the hub cards (they are not links), the screenshot
   inset at the top and every screenshot in a row cropped to the same height, so the captions
   line up */
.lp .money-shot { display: flex; flex-direction: column; padding: 12px; background: var(--panel); border-radius: 30px; }
.lp .money-shot .money-screen-crop { aspect-ratio: 5 / 4; border-radius: 20px; background: #fff; box-shadow: none; transform: none; }
.lp .money-shot .money-screen-crop::after { display: none; }
.lp .money-shot .money-screen-crop--timeline img { object-position: 50% 25%; }
.lp .money-shot figcaption { padding: 22px 16px 16px; }
.lp .money-shot figcaption h3 { font-size: 20px; font-weight: 450; letter-spacing: -.025em; }
.lp .money-shot figcaption p { color: var(--fg-2); font-size: 15px; line-height: 1.6; }

/* ── Buttons and links ── */
.lp .button { border-radius: 999px; font-weight: 450; letter-spacing: -.01em; box-shadow: none; }
.lp .button.primary { background: var(--navy); color: #fff; border: 0; }
.lp .button.primary:hover { background: var(--navy-hover); }
.lp .button.secondary { background: var(--panel); color: var(--fg); border: 0; }
.lp .btn-primary { color: #fff; }
.lp .link-list a, .lp .money-link-list a { background: var(--panel); border: 0; border-radius: 18px; box-shadow: none; font-weight: 450; color: var(--fg); transition: background-color .2s; }
.lp .link-list a:hover, .lp .money-link-list a:hover { background: var(--panel-hover); transform: none; }

/* ── FAQ, as on the rest of the site ── */
.lp .faq-list { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.lp .faq-item { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
.lp .faq-item summary { padding: 20px 0; font-size: 17px; font-weight: 400; letter-spacing: -.02em; color: var(--fg); }
.lp .faq-item summary::-webkit-details-marker { display: none; }
.lp .faq-marker { position: relative; flex: none; width: 14px; height: 14px; background: none; border: 0; }
.lp .faq-marker::before, .lp .faq-marker::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 1.6px; border: 0; border-radius: 2px; background: var(--fg-2); transform: none; transition: transform .3s var(--ease); }
.lp .faq-marker::after { transform: rotate(90deg); }
.lp .faq-item[open] .faq-marker::after { transform: rotate(0); }
.lp .faq-item p { padding: 0 0 20px; font-size: 15.5px; color: var(--fg-2); }

/* ── Tables ── */
.lp .table-scroll { border: 0; border-radius: 18px; background: var(--panel); box-shadow: none; }
.lp table th { font-weight: 500; color: var(--fg); background: #efeee9; }
.lp table td, .lp table th { border-color: var(--line); }

/* ── The closing band becomes a panel ── */
.lp .cta-band { max-width: 1184px; margin: clamp(48px, 6vw, 80px) auto 0; padding: clamp(56px, 7vw, 96px) 24px; background: var(--panel); background-image: none; border-radius: var(--radius); color: var(--fg); }
.lp .cta-band::before, .lp .cta-band::after { display: none; }
.lp .cta-band h2 { color: var(--fg); }
.lp .cta-band p { color: var(--fg-2); }
/* the documentation page's band pins its tagline and note to light colours for the old navy */
.lp .documentation-cta .eyebrow { color: var(--gold-ink); }
.lp .documentation-cta__note { color: var(--fg-2) !important; }

/* ── The high-conflict page's workflow was a navy band; on the light page its text goes dark ── */
.lp .conflict-workflow-layout h2, .lp .conflict-workflow-step h3 { color: var(--fg); }
.lp .conflict-workflow-layout .section-sub, .lp .conflict-workflow-step p { color: var(--fg-2); }
.lp .conflict-workflow-marker { border-color: var(--bg); }
@media (max-width: 1240px) { .lp .cta-band { margin-inline: 28px; } }
@media (max-width: 640px) { .lp .cta-band { margin-inline: 16px; } }

/* ── Rail cards on the state-law hubs ── */
.lp .article-rail-cta { background: var(--panel); border: 0; border-radius: 26px; box-shadow: none; }
.lp .article-rail-cta h2 { font-size: 18px; font-weight: 500; letter-spacing: -.02em; }

/* ── Privacy and terms ── */
.lp .policy-content { font-size: 16.5px; line-height: 1.7; color: #3a404b; }
.lp .policy-content h2 { margin-top: 2em; font-size: clamp(22px, 2.4vw, 28px); font-weight: 450; letter-spacing: -.03em; }
.lp .policy-content a { color: var(--fg); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--gold) 55%, transparent); text-underline-offset: 3px; }

/* ── Record pages: a light hero and the benefit cards on panels ── */
.lp .record-page-hero { background: none; border: 0; }
.lp .record-page-workflow > .record-page-capture > h2, .lp .record-page-capture h2 { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.15; }
.lp .record-page-benefits { background: none; padding-block: 24px 0; }
.lp .record-page-benefits h2, .lp .record-page-benefits h3, .lp .record-page-benefits strong { color: var(--fg); }
.lp .record-page-benefits p, .lp .record-page-benefits li { color: var(--fg-2); }
.lp .record-page-benefits .record-page-benefits__grid { gap: 12px; }
.lp .record-page-benefits .record-page-benefits__grid article { padding: 24px 26px 26px; background: var(--panel); border: 0; border-radius: 28px; }
.lp .record-page-benefits .record-page-benefits__grid article > span { padding-top: 0; font-family: var(--serif); font-style: italic; font-size: 22px; font-weight: 400; line-height: 1; letter-spacing: 0; color: var(--muted); }

/* ── State-law hubs: the trial card stays in view beside the table ── */
.lp .recording-hub-rail { position: sticky; top: 96px; align-self: start; background: none; border: 0; box-shadow: none; padding: 0; }
.lp .policy-content, .lp .policy-hero { max-width: 760px; margin-inline: auto; }