/* ==========================================================================
   accident.live — /partners
   --------------------------------------------------------------------------
   The firm-facing side of the funnel. It reuses the tokens defined in
   app.css (:root) so the two sides of the business look like one company,
   but it does NOT reuse app.css's layout: the consumer funnel is deliberately
   capped at --measure (560px) because it is a phone-first form, and a page
   sold to firm principals is read on a desktop. Everything here is prefixed
   `p-` so nothing bleeds back into the funnel.
   ========================================================================== */

:root {
  --p-measure:  1080px;
  --p-narrow:   760px;
  --p-hair:     rgba(11, 34, 101, .11);
  --p-hair-lt:  rgba(242, 244, 248, .14);
  --p-card:     0 1px 2px rgba(6, 23, 74, .04), 0 8px 24px rgba(6, 23, 74, .06);
}

body.p-body { background: var(--white); }

.p-inner {
  width: 100%;
  max-width: var(--p-measure);
  margin-inline: auto;
  padding-inline: 20px;
}
.p-inner--narrow { max-width: var(--p-narrow); }

@media (min-width: 720px) { .p-inner { padding-inline: 32px; } }

.p-band { width: 100%; }
.p-band--navy    { background: var(--navy);      color: var(--on-navy); }
.p-band--deep    { background: var(--navy-deep); color: var(--on-navy); }
.p-band--surface { background: var(--surface); }
.p-band--white   { background: var(--white); }

.p-sec { padding-block: 56px; }
@media (min-width: 720px) { .p-sec { padding-block: 84px; } }

/* --- type ----------------------------------------------------------------- */

.p-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 11px/1 var(--font);
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--red);
  margin-bottom: 16px;
}
.p-band--navy .p-kicker, .p-band--deep .p-kicker { color: var(--green-soft); }

.p-h2 {
  font: 700 27px/1.16 var(--font);
  letter-spacing: -.5px;
  color: var(--navy);
  text-wrap: balance;
  margin-bottom: 12px;
}
.p-band--navy .p-h2, .p-band--deep .p-h2 { color: var(--on-navy); }
@media (min-width: 720px) { .p-h2 { font-size: 37px; } }

.p-lede {
  font: 400 15.5px/1.6 var(--font);
  color: var(--muted);
  max-width: 62ch;
  text-wrap: pretty;
}
.p-band--navy .p-lede, .p-band--deep .p-lede { color: var(--on-navy-70); }
@media (min-width: 720px) { .p-lede { font-size: 17px; } }

.p-note {
  font: 400 12px/1.6 var(--font);
  color: var(--muted-2);
  max-width: 78ch;
  text-wrap: pretty;
}
.p-band--navy .p-note, .p-band--deep .p-note { color: var(--on-navy-55); }

/* --- header --------------------------------------------------------------- */

.p-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--navy);
  border-bottom: 1px solid var(--p-hair-lt);
}
.p-header .p-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 62px;
}
.p-header .wordmark { color: var(--on-navy); }
.p-header__side { display: flex; align-items: center; gap: 10px; }
.p-header__back {
  font: 500 12.5px var(--font);
  color: var(--on-navy-70);
  display: none;
}
.p-header__back:hover { color: var(--on-navy); }
@media (min-width: 720px) { .p-header__back { display: inline; } }

/* --- buttons -------------------------------------------------------------- */

.p-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 0 22px;
  border: 1px solid transparent; border-radius: 10px;
  font: 600 15px var(--font);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.p-btn:active { transform: translateY(1px); }
.p-btn svg { flex: none; }

.p-btn--red { background: var(--red); color: #fff; box-shadow: var(--shadow-red); }
.p-btn--red:hover { background: #b30d28; color: #fff; }

.p-btn--navy { background: var(--navy); color: var(--on-navy); }
.p-btn--navy:hover { background: #0d2a7a; color: var(--on-navy); }

.p-btn--ghost { border-color: var(--p-hair); color: var(--navy); background: var(--white); }
.p-btn--ghost:hover { border-color: var(--navy); color: var(--navy); }

.p-btn--ghost-lt { border-color: rgba(242, 244, 248, .28); color: var(--on-navy); }
.p-btn--ghost-lt:hover { border-color: var(--on-navy); color: var(--on-navy); }

.p-btn--sm { min-height: 38px; padding: 0 15px; font-size: 13px; border-radius: 8px; }

.p-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.p-cta-sub { font: 400 12.5px/1.5 var(--font); color: var(--muted-2); }
.p-band--navy .p-cta-sub, .p-band--deep .p-cta-sub { color: var(--on-navy-55); }

/* --- hero ----------------------------------------------------------------- */

.p-hero {
  background:
    radial-gradient(1100px 460px at 78% -12%, rgba(47, 191, 113, .16), transparent 62%),
    linear-gradient(178deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--on-navy);
  padding-block: 52px 56px;
}
@media (min-width: 900px) { .p-hero { padding-block: 76px 84px; } }

.p-hero__grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 900px) { .p-hero__grid { grid-template-columns: 1.15fr .85fr; gap: 56px; } }

.p-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--p-hair-lt);
  border-radius: 999px;
  padding: 7px 14px 7px 11px;
  font: 600 10.5px/1 var(--font);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--on-navy-70);
  margin-bottom: 22px;
}

.p-hero h1 {
  font: 700 34px/1.1 var(--font);
  letter-spacing: -1px;
  color: var(--on-navy);
  text-wrap: balance;
  margin-bottom: 18px;
}
@media (min-width: 720px)  { .p-hero h1 { font-size: 46px; letter-spacing: -1.4px; } }
@media (min-width: 1000px) { .p-hero h1 { font-size: 54px; } }
.p-hero h1 em { font-style: normal; color: var(--green-soft); }

.p-hero__sub {
  font: 400 16px/1.58 var(--font);
  color: var(--on-navy-70);
  max-width: 54ch;
  margin-bottom: 26px;
  text-wrap: pretty;
}
@media (min-width: 720px) { .p-hero__sub { font-size: 17.5px; } }

.p-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.p-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--p-hair-lt);
  border-radius: 8px;
  padding: 8px 12px;
  font: 500 12px/1 var(--font);
  color: var(--on-navy-70);
}
.p-chip svg { color: var(--green); }

/* hero side panel — the live spec card */
.p-spec {
  background: rgba(242, 244, 248, .05);
  border: 1px solid var(--p-hair-lt);
  border-radius: 14px;
  padding: 20px;
  backdrop-filter: blur(2px);
}
.p-spec__head {
  display: flex; align-items: center; gap: 8px;
  font: 600 10.5px/1 var(--font);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-navy-55);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--p-hair-lt);
  margin-bottom: 4px;
}
.p-spec__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 11px 0;
  border-bottom: 1px solid rgba(242, 244, 248, .07);
}
.p-spec__row:last-child { border-bottom: 0; padding-bottom: 0; }
.p-spec__k { font: 400 12.5px var(--font); color: var(--on-navy-55); }
.p-spec__v { font: 600 13.5px var(--font); color: var(--on-navy); text-align: right; }
.p-spec__v em { font-style: normal; color: var(--green-soft); }
.p-spec__foot {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--p-hair-lt);
  font: 400 10.5px/1.5 var(--font);
  color: var(--on-navy-55);
}

/* --- generic grids -------------------------------------------------------- */

.p-grid { display: grid; gap: 16px; }
.p-grid--2 { grid-template-columns: 1fr; }
.p-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 640px)  { .p-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px)  { .p-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .p-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.p-head { margin-bottom: 34px; }
@media (min-width: 720px) { .p-head { margin-bottom: 44px; } }

/* --- cards ---------------------------------------------------------------- */

.p-card {
  background: var(--white);
  border: 1px solid var(--p-hair);
  border-radius: 13px;
  padding: 22px;
  box-shadow: var(--p-card);
}
.p-card__n {
  font: 700 11px/1 var(--mono);
  letter-spacing: .06em;
  color: var(--red);
  margin-bottom: 14px;
}
.p-card__t {
  font: 600 16px/1.3 var(--font);
  color: var(--navy);
  margin-bottom: 7px;
  text-wrap: pretty;
}
.p-card__b {
  font: 400 13.5px/1.6 var(--font);
  color: var(--muted);
  text-wrap: pretty;
}
.p-card__b code {
  font: 500 12px var(--mono);
  background: var(--surface);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--ink-2);
}
.p-card__link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  font: 600 12.5px var(--font);
  color: var(--navy);
}
.p-card__link:hover { color: var(--red); gap: 9px; }
.p-card__link svg { transition: transform .15s; }

/* covered-by cards sit on navy */
.p-band--deep .p-card, .p-band--navy .p-card {
  background: rgba(242, 244, 248, .05);
  border-color: var(--p-hair-lt);
  box-shadow: none;
}
.p-band--deep .p-card__t, .p-band--navy .p-card__t { color: var(--on-navy); }
.p-band--deep .p-card__b, .p-band--navy .p-card__b { color: var(--on-navy-70); }
.p-band--deep .p-card__n, .p-band--navy .p-card__n { color: var(--green-soft); }
.p-band--deep .p-card__link, .p-band--navy .p-card__link { color: var(--green-soft); }
.p-band--deep .p-card__link:hover, .p-band--navy .p-card__link:hover { color: #fff; }

/* --- steps ---------------------------------------------------------------- */

.p-steps { display: grid; gap: 26px; counter-reset: pstep; }
@media (min-width: 860px) { .p-steps { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

.p-step { position: relative; padding-top: 22px; border-top: 2px solid var(--navy); }
.p-step__n {
  font: 700 12px/1 var(--mono);
  color: var(--red);
  margin-bottom: 12px;
}
.p-step__t { font: 600 17px/1.28 var(--font); color: var(--navy); margin-bottom: 8px; text-wrap: pretty; }
.p-step__b { font: 400 14px/1.62 var(--font); color: var(--muted); text-wrap: pretty; }

/* --- the funnel transcript ------------------------------------------------ */

.p-split { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .p-split { grid-template-columns: 1fr 1fr; gap: 56px; } }

.p-transcript {
  background: var(--navy-deep);
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.p-transcript__head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 14px; margin-bottom: 6px;
  border-bottom: 1px solid var(--p-hair-lt);
  font: 600 10.5px/1 var(--font);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-navy-55);
}
.p-q {
  display: flex; gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(242, 244, 248, .06);
}
.p-q:last-of-type { border-bottom: 0; }
.p-q__n {
  flex: none; width: 20px;
  font: 500 11px/1.5 var(--mono);
  color: rgba(242, 244, 248, .3);
}
.p-q__t { min-width: 0; }
.p-q__q { font: 400 12.5px/1.45 var(--font); color: var(--on-navy-70); }
.p-q__a { font: 600 12.5px/1.45 var(--font); color: var(--green-soft); margin-top: 2px; }
.p-q--gate .p-q__q::after {
  content: 'GATE';
  display: inline-block; margin-left: 7px;
  font: 700 8.5px/1.6 var(--font); letter-spacing: .08em;
  color: var(--red-tint);
  background: var(--red); border-radius: 3px; padding: 0 4px;
  vertical-align: 1.5px;
}
.p-transcript__foot {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--p-hair-lt);
  font: 400 10.5px/1.55 var(--font);
  color: var(--on-navy-55);
}

/* --- checklist ------------------------------------------------------------ */

.p-checks { display: flex; flex-direction: column; gap: 13px; margin-top: 24px; list-style: none; padding: 0; }
.p-checks li { display: flex; gap: 11px; align-items: flex-start; }
.p-checks svg { color: var(--green); flex: none; margin-top: 2px; }
.p-checks span { font: 400 14.5px/1.55 var(--font); color: var(--ink-2); text-wrap: pretty; }
.p-band--navy .p-checks span, .p-band--deep .p-checks span { color: var(--on-navy-70); }

.p-crosses svg { color: var(--red); }

/* --- pricing table -------------------------------------------------------- */

.p-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 28px; }
.p-table {
  width: 100%; min-width: 520px;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--p-hair);
  border-radius: 12px;
  overflow: hidden;
}
.p-table th, .p-table td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--p-hair);
}
.p-table thead th {
  font: 600 10.5px/1 var(--font);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted-2);
  background: var(--surface);
}
.p-table tbody td { font: 400 13.5px var(--font); color: var(--ink-2); }
.p-table tbody td:first-child { font-weight: 600; color: var(--navy); }
.p-table tbody tr:last-child td { border-bottom: 0; }
.p-table tbody tr:hover td { background: rgba(11, 34, 101, .02); }

/* --- stat strip ----------------------------------------------------------- */

.p-stats {
  display: grid; gap: 1px;
  grid-template-columns: repeat(2, 1fr);
  background: var(--p-hair-lt);
  border: 1px solid var(--p-hair-lt);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 34px;
}
@media (min-width: 860px) { .p-stats { grid-template-columns: repeat(4, 1fr); } }
.p-stat { background: var(--navy-deep); padding: 20px 18px; }
.p-stat__v { font: 700 24px/1.05 var(--font); color: var(--on-navy); letter-spacing: -.5px; margin-bottom: 6px; }
.p-stat__l {
  font: 500 10.5px/1.35 var(--font);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--on-navy-55);
}

/* --- fit / who it's for --------------------------------------------------- */

.p-fit {
  display: block;
  background: var(--white);
  border: 1px solid var(--p-hair);
  border-radius: 13px;
  padding: 22px;
  box-shadow: var(--p-card);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.p-fit:hover {
  border-color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(6,23,74,.05), 0 14px 32px rgba(6,23,74,.1);
}
.p-fit__tag {
  font: 700 10px/1 var(--font);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}
.p-fit__t { font: 600 16.5px/1.3 var(--font); color: var(--navy); margin-bottom: 8px; }
.p-fit__b { font: 400 13.5px/1.6 var(--font); color: var(--muted); text-wrap: pretty; }
.p-fit__go {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 15px;
  font: 600 12.5px var(--font); color: var(--navy);
}
.p-fit:hover .p-fit__go { color: var(--red); }

/* --- FAQ ------------------------------------------------------------------ */

.p-faq { border-top: 1px solid var(--p-hair); margin-top: 8px; }
.p-faq details { border-bottom: 1px solid var(--p-hair); }
.p-faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 19px 0;
  cursor: pointer;
  list-style: none;
  font: 600 15.5px/1.4 var(--font);
  color: var(--navy);
  text-wrap: pretty;
}
.p-faq summary::-webkit-details-marker { display: none; }
.p-faq summary::after {
  content: '';
  flex: none;
  width: 11px; height: 11px;
  margin-top: 5px;
  border-right: 2px solid var(--muted-2);
  border-bottom: 2px solid var(--muted-2);
  transform: rotate(45deg);
  transition: transform .18s;
}
.p-faq details[open] summary::after { transform: rotate(-135deg); margin-top: 9px; }
.p-faq summary:hover { color: var(--red); }
.p-faq__a {
  padding: 0 0 20px;
  max-width: 74ch;
  font: 400 14.5px/1.65 var(--font);
  color: var(--muted);
  text-wrap: pretty;
}
.p-faq__a a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.p-faq__a a:hover { color: var(--red); }
.p-faq__a + .p-faq__a { margin-top: -8px; }

/* --- final CTA ------------------------------------------------------------ */

.p-final { text-align: center; }
.p-final .p-h2 { margin-inline: auto; }
.p-final .p-lede { margin-inline: auto; margin-bottom: 30px; }
.p-final .p-cta-row { justify-content: center; }
.p-final .p-btn { min-height: 58px; font-size: 16.5px; padding-inline: 30px; }

/* --- footer --------------------------------------------------------------- */

.p-footer { background: var(--navy-deep); color: rgba(242, 244, 248, .6); }
.p-footer .p-inner { padding-block: 40px 44px; }
.p-footer__top {
  display: flex; flex-wrap: wrap; gap: 24px 40px;
  justify-content: space-between;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--p-hair-lt);
  margin-bottom: 24px;
}
.p-footer__links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.p-footer__links a { font: 500 12.5px var(--font); color: rgba(242, 244, 248, .6); }
.p-footer__links a:hover { color: #fff; }
.p-footer__disc {
  font: 400 11px/1.65 var(--font);
  color: rgba(242, 244, 248, .45);
  max-width: 84ch;
  margin-bottom: 16px;
  text-wrap: pretty;
}
.p-footer__disc a { color: var(--gold); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.p-footer__disc a:hover { color: #fff; }
.p-footer__copy { font: 400 10.5px/1.6 var(--font); color: rgba(242, 244, 248, .38); }

/* --- related pages row (top of the first section after the hero) --------- */

.p-related {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin-bottom: 34px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--p-hair);
}
.p-related__k {
  font: 600 10.5px var(--font);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-right: 4px;
}
.p-related a {
  font: 500 13px var(--font);
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.p-related a:hover { color: var(--red); }

/* --- sticky firm CTA (mobile) --------------------------------------------- */

.p-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--navy-deep);
  border-top: 1px solid var(--p-hair-lt);
  padding-bottom: env(safe-area-inset-bottom);
}
.p-sticky .p-inner { display: flex; gap: 10px; padding-block: 10px; }
.p-sticky .p-btn { flex: 1; min-height: 46px; font-size: 14px; }
.p-sticky-tail { height: 76px; }
@media (min-width: 900px) {
  .p-sticky { display: none; }
  .p-sticky-tail { display: none; }
}