/* Pages other than the homepage: Platform, Deployment, About, Contact, 404. Tokens come from 01-counsel.css and home.css. */

/* Opening band: dark, with the page's main visual inside it */
.fp-hero { padding-block: 128px 88px; color: var(--on-dark); background: #18221c; }
.fp-hero h1 { max-width: 14ch; font: 400 clamp(42px, 4.8vw, 66px)/1.04 "Libre Caslon Display", Georgia, serif; letter-spacing: -.03em; }
.fp-hero > .page-width > p { max-width: 60ch; margin-top: 18px; color: var(--on-dark-muted); font-size: 18px; line-height: 1.6; }
.page-h2 { max-width: 18ch; font: var(--display); letter-spacing: -.02em; }

/* Heading left, points right */
.fp-team { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; padding-block: 96px 40px; }
.fp-team h2 { max-width: 18ch; font: var(--display); letter-spacing: -.02em; }
.fp-team .intro { max-width: 44ch; margin-top: 20px; color: var(--muted); font-size: 17px; line-height: 1.6; }
.fp-team ul { display: grid; gap: 36px; margin: 0; padding: 0; list-style: none; }
.fp-team h3 { font: 400 24px/1.2 "Libre Caslon Display", Georgia, serif; letter-spacing: -.01em; }
.fp-team li p, .fp-team .prose p { max-width: 56ch; margin-top: 8px; color: var(--muted); font-size: 16.5px; line-height: 1.6; }
.fp-team .prose p:first-child { margin-top: 0; }

/* ---------------- Platform ---------------- */
/* Router: task-by-model scores, best in each row routed */
.pr-models { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; padding-block: 120px 24px; }
.pr-models .prose p { max-width: 50ch; margin-top: 18px; color: var(--muted); font-size: 17px; line-height: 1.6; }
.rt { margin: 0; padding: 48px; border-radius: 8px; background: var(--frame); }
.rt-card { padding: 22px 24px 18px; border-radius: 10px; background: #fff; box-shadow: 0 30px 70px rgb(0 0 0 / .35); }
.rt-card > p { margin-bottom: 14px; color: var(--muted); font-size: 12px; }
.rt-card strong { display: block; color: var(--ink); font: 400 20px/1.25 "Libre Caslon Display", Georgia, serif; }
.rt table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rt th { padding: 0 0 10px; color: var(--muted); font-size: 11.5px; font-weight: 500; text-align: center; }
.rt th:first-child, .rt td:first-child { text-align: left; }
.rt td { padding: 6px 0; border-top: 1px solid #e7e9e4; text-align: center; font-variant-numeric: tabular-nums; }
.rt td:first-child { padding-right: 12px; font-weight: 600; }
.rt td span { display: inline-block; min-width: 46px; padding: 6px 8px; border-radius: 6px; color: var(--muted); }
.rt td .best { background: var(--accent); color: #fff; font-weight: 600; }
.rt figcaption { margin-top: 18px; color: rgb(238 241 236 / .85); font-size: 13.5px; line-height: 1.55; }

.connect + .closing { margin-top: 24px; }

/* ---------------- Deployment ---------------- */
.dp-hero { padding-bottom: 0; }
.dp-hero h1 { max-width: 13ch; }
.dp-hero .hosting-strip { margin-top: 56px; padding-bottom: 8px; }
.dp-steps { padding-block: 96px 24px; }
.dp-steps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin: 48px 0 0; padding: 0; list-style: none; counter-reset: step; }
.dp-steps li { padding-top: 22px; border-top: 1px solid var(--ink); counter-increment: step; }
.dp-steps li::before { content: counter(step); display: block; margin-bottom: 18px; color: var(--accent); font: 400 40px/1 "Libre Caslon Display", Georgia, serif; }
.dp-steps h3 { font: 400 23px/1.2 "Libre Caslon Display", Georgia, serif; letter-spacing: -.01em; }
.dp-steps p { max-width: 40ch; margin-top: 10px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.dp-models { padding-top: 112px; }

/* ---------------- About ---------------- */
.ab-hero { padding-bottom: 0; }
.ab-hero .page-width > p + p { margin-top: 14px; }
.ab-photo { position: relative; margin: 56px 0 0; }
.ab-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 8px 8px 0 0; }
.ab-photo figcaption { position: absolute; left: 24px; bottom: 20px; color: #fff; font-size: 13px; text-shadow: 0 1px 8px rgb(0 0 0 / .5); }
.ab-founder { display: flex; gap: 20px; align-items: flex-start; }
.ab-founder img { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }

/* ---------------- Contact ---------------- */
.ct { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: start; padding-block: 176px 120px; }
.ct h1 { font: 400 clamp(42px, 4.8vw, 66px)/1.04 "Libre Caslon Display", Georgia, serif; letter-spacing: -.03em; }
.ct .lead { max-width: 46ch; margin-top: 18px; color: var(--muted); font-size: 18px; line-height: 1.6; }
.ct-email { display: inline-block; margin-top: 36px; font: 400 clamp(24px, 2.4vw, 32px)/1.2 "Libre Caslon Display", Georgia, serif; text-decoration: none; border-bottom: 1px solid var(--rule); transition: border-color .2s; }
.ct-email:hover { border-color: currentColor; }
.ct-place { margin-top: 12px; color: var(--muted); font-size: 14px; }
.ct-brief { padding: 36px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--rule), 0 18px 40px rgb(24 38 30 / .06); }
.ct-brief h2 { font: 400 26px/1.2 "Libre Caslon Display", Georgia, serif; }
.ct-brief dl { display: grid; gap: 18px; margin: 24px 0 0; }
.ct-brief dt { font-size: 14px; font-weight: 600; }
.ct-brief dd { margin: 4px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.ct-note { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 13.5px; }
.ct-brief .button { margin-top: 20px; }

/* ---------------- 404 ---------------- */
.nf { min-height: calc(100vh - 180px); padding-block: 200px 120px; }
.nf h1 { font: 400 clamp(42px, 4.8vw, 66px)/1.04 "Libre Caslon Display", Georgia, serif; letter-spacing: -.03em; }
.nf p { max-width: 44ch; margin: 18px 0 32px; color: var(--muted); font-size: 18px; line-height: 1.6; }

@media (max-width: 1100px) {
  .fp-team, .pr-models { grid-template-columns: 1fr; gap: 40px; }
  .ct { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 900px) {
  .fp-hero { padding-block: 112px 80px; }
  .dp-hero, .ab-hero { padding-bottom: 0; }
  .rt { padding: 20px; }
  .dp-steps ol { grid-template-columns: 1fr; gap: 32px; }
  .ct { padding-block: 140px 80px; }
}
@media (max-width: 560px) {
  .fp-hero h1, .ct h1, .nf h1 { font-size: 44px; }
  .fp-hero > .page-width > p { font-size: 16px; }
  .fp-team h2, .page-h2 { font-size: 36px; }
  .rt-card { padding: 16px 14px; }
  .rt td span { min-width: 0; padding: 5px 6px; }
  .ab-photo img { aspect-ratio: 4 / 3; }
  .ct-brief { padding: 24px 20px; }
  .nf { padding-block: 150px 100px; }
}

/* Search landing pages */
.sp-hosting { padding-block: 96px 16px; }
.sp-intro { max-width: 52ch; margin-top: 18px; color: var(--muted); font-size: 17px; line-height: 1.6; }
.sp-hosting .hosting-strip { margin-top: 48px; }
@media (max-width: 560px) { .sp-hosting { padding-block: 72px 8px; } }

/* Feature pages (Associates, Matter Engine, Legal library): a heading, a row of steps, and screenshots on white. */
.feature { padding-block: 120px 0; }
.feature-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; margin: 56px 0 0; padding: 0; list-style: none; }
.feature-steps li { padding-top: 22px; border-top: 1px solid var(--rule); }
.feature-steps h3 { font: 400 22px/1.2 "Libre Caslon Display", Georgia, serif; letter-spacing: -.01em; }
.feature-steps p { margin-top: 12px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.feature-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.feature-split > div > p { max-width: 52ch; color: var(--muted); font-size: 17px; line-height: 1.6; }
.feature-list { margin: 28px 0 0; padding: 0; list-style: none; }
.feature-list li { padding: 16px 0; border-top: 1px solid var(--rule); }
.feature-list b { display: block; font-weight: 600; }
.feature-list span { display: block; margin-top: 4px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.feature-shot { margin: 0; }
.feature-shot figcaption { margin-top: 14px; color: var(--muted); font-size: 13px; line-height: 1.5; }
@media (max-width: 900px) {
  .feature { padding-block: 88px 0; }
  .feature-steps { grid-template-columns: 1fr; gap: 28px; }
  .feature-split { grid-template-columns: 1fr; gap: 40px; }
}