/* Landing pages + guides (generated by scripts/landing-pages.mjs).
   Loaded after styles.css and legal.css, which supply the tokens, nav, footer, doc-hero,
   contents list, doc sections, callouts and FAQ. This file adds only what those lack. */

/* Breadcrumb on the plum hero */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 28px;
  font-size: .85rem; color: rgba(255, 240, 244, .62);
}
.crumbs a { color: rgba(255, 240, 244, .78); transition: color .2s; }
.crumbs a:hover { color: #fff; }
.crumbs [aria-current] { color: #fff; }
.crumbs span[aria-hidden] { opacity: .45; }

.doc-hero__lede {
  max-width: 62ch; margin-top: 20px;
  font-size: var(--fs-lead); line-height: 1.65; color: rgba(255, 240, 244, .82);
}

/* Place / guide cards: same surface as the policy pages' sent-grid */
.page-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.page-card { padding: 18px 18px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); font-size: .95rem; line-height: 1.6; }
.page-card__label {
  display: block; margin-bottom: 8px;
  font-family: var(--f-mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wine);
}
.doc .page-card__label a:not(.btn):not(.link) { color: var(--wine); text-decoration: none; }
.doc .page-card__label a:not(.btn):not(.link):hover { color: var(--coral-deep); }
.doc .page-card__label a::after { content: " →"; }

/* Chip links (same pill as the homepage "Dating by state" row) */
.page-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.doc a.chip-link:not(.btn):not(.link) {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 99px;
  font-size: .88rem; font-weight: 600; color: var(--charcoal); text-decoration: none;
  border: 1px solid rgba(29, 26, 28, .14); background: #fff;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.doc a.chip-link:not(.btn):not(.link):hover { border-color: var(--wine); color: var(--charcoal); transform: translateY(-1px); }

.doc .faq__list { margin-top: 6px; }

/* Closing call to action: a plum panel like the homepage's final section */
.page-cta {
  margin-top: 56px; padding: clamp(28px, 4vw, 44px); border-radius: var(--r-lg);
  color: #fff; text-align: center;
  background:
    radial-gradient(600px 300px at 90% 0%, rgba(140, 43, 78, .55), transparent 65%),
    linear-gradient(180deg, var(--plum-950), var(--plum-900));
}
.page-cta h2 { font-family: var(--f-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; }
.page-cta p { max-width: 52ch; margin: 12px auto 22px; color: rgba(255, 240, 244, .78); }

@media (max-width: 720px) {
  .page-cards { grid-template-columns: 1fr; }
  .page-cta .btn { width: 100%; }
}

/* 404: the plum hero fills the screen; no cream curve or summary card below it */
.doc-hero--404 { min-height: 100vh; padding-bottom: 96px; }
.doc-hero--404::after { display: none; }
.page-links--hero { margin-top: 32px; gap: 12px; }
