/* ==========================================================================
   LifePolicies-Help — campaign landing pages
   /mortgage/protection/, /truckers/life-insurance/, their /quote/ twins and
   their /thanks/ pages.

   Loaded AFTER landing.css and built from it: the ticker, header, type scale,
   limestone ground, dark bands, the white card that climbs over a band, the
   carrier plate, FAQ, agent card, closing band, footer and sticky call bar are
   all landing.css classes used unchanged. This file only adds what a campaign
   page needs that the homepage does not have — a two-button call hero, the
   mortgage balance chart, the driver coverage table, the inline form card and
   the thank-you receipt.

   Every rule is scoped under .cp (on .dc-page) or uses a cp- class, so the
   homepage, which carries neither, renders exactly as it did.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

.cp {
  --cp-band-h: 300px;
  --cp-plot-top: 80px;      /* clears the badge on a 320px phone */
  --cp-plot-bottom: 76px;   /* the card climbs 40px over the band, then axis */
  --cp-plot-side: 16px;
  --cp-warm: #c07a62;       /* the warm tone landing.css uses on dark ground */
}

@media (min-width: 900px) {
  .cp {
    --cp-band-h: 360px;
    --cp-plot-top: 70px;
    --cp-plot-bottom: 82px;
    --cp-plot-side: 34px;
  }
}

/* --------------------------------------------------------------------------
   2. Hero
   -------------------------------------------------------------------------- */

.cp-hero {
  padding: var(--hero-pad-y) var(--padX) var(--hero-pad-b);
}

.cp-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
}

.cp-kicker::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: none;
  background: #a6432b;
}

.cp .dc-h1 {
  max-width: 17ch;
}

/* The one drawn underline under one phrase of the headline — the homepage's
   rotating-word rule, held still. text-decoration rather than a border so a
   phrase that wraps on a 320px phone is underlined on both lines instead of
   once under the box. */
.cp-mark {
  text-decoration-line: underline;
  text-decoration-color: #a6432b;
  text-decoration-thickness: 5px;
  text-underline-offset: 0.16em;
  text-decoration-skip-ink: none;
}

.cp-lede {
  margin: 16px 0 24px;
  max-width: 46ch;
  color: #33332c;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: var(--lede-size);
  line-height: 1.5;
}

@media (max-width: 359px) {
  .cp .dc-h1 {
    font-size: 29px;
  }
}

/* The two hero buttons. Two lines each so they are the same height and so the
   call button says what the tap will do: the number, not just a verb. */
.cp-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 640px;
}

@media (min-width: 560px) {
  .cp-actions {
    grid-template-columns: 1fr 1fr;
  }
}

.cp-btn {
  display: flex;
  min-height: 62px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 12px 18px;
  border: 1.5px solid transparent;
  border-radius: 2px;
  text-align: center;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.cp-btn__main {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.cp-btn__sub {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  opacity: 0.86;
}

.cp-btn__dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

.cp-btn__arrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
}

.cp-btn--call {
  background: #a6432b;
  color: #fcfcf9;
}

.cp-btn--call:hover {
  background: #8c3521;
  color: #fcfcf9;
}

.cp-btn--ink {
  background: #14140f;
  color: #fcfcf9;
}

.cp-btn--ink:hover {
  background: #33332c;
  color: #fcfcf9;
}

/* The quiet call button under a form: an outline, so the form's own submit
   stays the one filled button in the card. */
.cp-btn--line {
  border-color: #14140f;
  background: transparent;
  color: #14140f;
}

.cp-btn--line .cp-btn__dot {
  background: #a6432b;
}

.cp-btn--line:hover {
  background: #14140f;
  color: #fcfcf9;
}

/* The form is a dialog on the call pages, and a dialog with no `open`
   attribute is not rendered without JavaScript — so the control that opens it
   is not offered either. The call button beside it needs nothing. */
html:not(.tl-js) .cp-needs-js {
  display: none;
}

html:not(.tl-js) .cp-actions {
  grid-template-columns: 1fr;
}

.cp-assure {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.cp-assure li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #43433b;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.cp-assure li::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: none;
  background: #a6432b;
}

/* Staffed hours, next to the thing that dials. The square is the staffed-hours
   tab: filled while agents are on the floor, hollow when they are not. */
.cp-status {
  margin: 14px 0 0;
  color: #52524a;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
}

.cp-status > span {
  display: inline;
}

.cp-status__tab {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  vertical-align: 1px;
  border: 1.5px solid #14140f;
}

.cp-status__tab--open {
  border-color: #a6432b;
  background: #a6432b;
}

.cp-status a {
  color: #842f20;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. Form-first hero: the form sits in the fold beside the copy on a wide
   screen, and directly under it on a phone.
   -------------------------------------------------------------------------- */

.cp-hero--form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}

@media (min-width: 1000px) {
  .cp-hero--form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 580px);
    gap: 56px;
  }

  .cp-hero--form .cp-hero__copy {
    position: sticky;
    top: calc(var(--header-h) + 32px);
  }
}

.cp-hero--form .cp-lede {
  margin-bottom: 0;
}

.cp-hero__points {
  display: none;
}

@media (min-width: 1000px) {
  .cp-hero__points {
    display: block;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(20, 20, 15, 0.14);
  }

  .cp-hero__points li {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(20, 20, 15, 0.1);
    color: #43433b;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 16px;
    line-height: 1.5;
  }

  .cp-hero__points span {
    color: #a6432b;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    padding-top: 4px;
  }
}

.cp-formcard {
  margin-top: 0;
  scroll-margin-top: var(--scroll-offset);
}

.cp-formcard__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin-bottom: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(20, 20, 15, 0.12);
}

.cp-formcard__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.cp-formcard__title:focus {
  outline: none;
}

.cp-formcard__meta {
  margin: 0;
  color: #5f5f55;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cp-formcard__call {
  display: grid;
  gap: 8px;
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(20, 20, 15, 0.14);
}

.cp-formcard__call p {
  margin: 0;
  color: #55554d;
  font-size: 13.5px;
  text-align: center;
}

/* Seven steps here rather than the homepage's eight — one segment per step,
   contact step included, so the rule never reads complete while work remains. */
.cp .tl-fit-progress {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* Two across once there is room for two, one across on a phone. */
.tl-fit-options--pair {
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  .tl-fit-options--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cp .tl-fit-question {
  font-size: clamp(22px, 2.1vw, 26px);
}

/* The trust row after a form-first hero, where the hero above already paid
   the top padding. */
.cp-hero--after {
  padding-top: 0;
}

/* --------------------------------------------------------------------------
   4. The explanation stage: a dark band with a drawing, and the card that
   climbs over its lower edge — the homepage's film-and-card, with a figure in
   place of the film.
   -------------------------------------------------------------------------- */

.cp-stage {
  position: relative;
  width: 100%;
}

.cp-band {
  position: relative;
  height: var(--cp-band-h);
  margin: 0;
  overflow: hidden;
  background: #14140f;
  color: #e9eae2;
}

.cp-band__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  max-width: calc(100% - 32px);
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(252, 252, 249, 0.94);
  color: #33332c;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
}

@media (min-width: 900px) {
  .cp-band__badge {
    top: 22px;
    left: 24px;
    font-size: 13px;
  }
}

.cp-stage .dc-card {
  margin-top: -40px;
}

.cp-card__h {
  max-width: 24ch;
  margin: 10px 0 10px;
  font-size: var(--q-size);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.15;
}

.cp-card__p {
  max-width: 54ch;
  margin: 0;
  color: #43433b;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 16px;
  line-height: 1.55;
}

.cp-card__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 900px) {
  .cp-card__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 56px;
    align-items: start;
  }
}

/* ---- 4a. Mortgage balance chart --------------------------------------- */

/* The plot is an SVG stretched to its box (preserveAspectRatio none, strokes
   that do not scale) under HTML labels placed in percentages, so the same
   figure reads at 320px and at 1280px without a second drawing. */
.cp-plot {
  position: absolute;
  top: var(--cp-plot-top);
  right: var(--cp-plot-side);
  bottom: var(--cp-plot-bottom);
  left: var(--cp-plot-side);
  touch-action: pan-y;
}

.cp-plot svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cp-plot__owed {
  fill: rgba(233, 234, 226, 0.07);
}

.cp-plot__left {
  fill: rgba(192, 122, 98, 0.26);
}

.cp-plot__balance {
  fill: none;
  stroke: #e9eae2;
  stroke-width: 2px;
  stroke-linejoin: round;
}

.cp-plot__cover {
  fill: none;
  stroke: var(--cp-warm);
  stroke-width: 2.5px;
}

.cp-plot__base {
  fill: none;
  stroke: rgba(233, 234, 226, 0.28);
  stroke-width: 1px;
}

.cp-plot__label {
  position: absolute;
  margin: 0;
  color: #e9eae2;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  white-space: nowrap;
  pointer-events: none;
}

.cp-plot__label small {
  display: block;
  color: #a8a89b;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cp-plot__label--cover {
  right: 0;
  top: 9.09%;
  transform: translateY(calc(-100% - 7px));
  text-align: right;
}

.cp-plot__label--cover::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 2.5px;
  margin-right: 7px;
  vertical-align: 4px;
  background: var(--cp-warm);
}

/* Right-aligned in the top of the shaded gap, where the curve has already
   fallen away: centred mid-gap, the curve ran through it on a phone. */
.cp-plot__label--left {
  right: 0;
  top: 23%;
  transform: translateY(-50%);
  text-align: right;
}

.cp-plot__label--owed {
  left: 7%;
  top: 50%;
}

/* On the narrowest phones the two labels in the top of the plot give up
   their second line rather than run into the curve. */
@media (max-width: 359px) {
  .cp-plot__label--left small,
  .cp-plot__label--cover small {
    display: none;
  }
}

@media (min-width: 900px) {
  .cp-plot__label {
    font-size: 13.5px;
  }

  .cp-plot__label--owed {
    left: 12%;
    top: 58%;
  }
}

.cp-plot__axis {
  position: absolute;
  top: 100%;
  margin-top: 9px;
  color: #8a8a7c;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

.cp-plot__axis--start {
  transform: none;
}

.cp-plot__axis--end {
  transform: translateX(-100%);
}

/* The year the explorer below is reading. Positioned by campaign.js from the
   same arithmetic that fills the numbers; the markup ships it at year 10. */
.cp-plot__marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px solid rgba(252, 252, 249, 0.55);
  pointer-events: none;
}

.cp-plot__dot {
  position: absolute;
  left: 0;
  width: 12px;
  height: 12px;
  border: 2px solid #14140f;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.cp-plot__dot--cover {
  top: 9.09%;
  background: var(--cp-warm);
}

.cp-plot__dot--balance {
  background: #fcfcf9;
}

.cp-plot__tag {
  position: absolute;
  top: 100%;
  left: 0;
  padding: 3px 7px;
  border-radius: 2px;
  background: #fcfcf9;
  color: #14140f;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - 8px));
}

/* The explorer: pick a year, read what is owed and what is left over. */
.cp-explorer__label {
  display: block;
  margin: 0 0 4px;
  color: #14140f;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.35;
}

.cp-explorer__label output {
  font-variant-numeric: tabular-nums;
}

.cp-range {
  display: block;
  width: 100%;
  height: 44px;
  margin: 0 0 6px;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.cp-range::-webkit-slider-runnable-track {
  height: 4px;
  background: #c9c9bf;
}

.cp-range::-webkit-slider-thumb {
  width: 28px;
  height: 28px;
  margin-top: -12px;
  border: 3px solid #fcfcf9;
  border-radius: 50%;
  background: #14140f;
  box-shadow: 0 0 0 1.5px #14140f;
  -webkit-appearance: none;
  appearance: none;
}

.cp-range::-moz-range-track {
  height: 4px;
  background: #c9c9bf;
}

.cp-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 3px solid #fcfcf9;
  border-radius: 50%;
  background: #14140f;
  box-shadow: 0 0 0 1.5px #14140f;
}

.cp-range:focus-visible {
  outline: 3px solid #14140f;
  outline-offset: 3px;
}

html:not(.tl-js) .cp-js-only {
  display: none;
}

.cp-readouts {
  margin: 0;
  border-top: 1px solid rgba(20, 20, 15, 0.12);
}

.cp-readouts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(20, 20, 15, 0.08);
}

.cp-readouts dt {
  color: #5f5f55;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cp-readouts dd {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.cp-readouts__left dd {
  color: #14140f;
}

.cp-readouts__left dt::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  vertical-align: -1px;
  background: rgba(192, 122, 98, 0.55);
}

.cp-explorer__say {
  margin: 12px 0 0;
  color: #33332c;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 15.5px;
  line-height: 1.5;
}

.cp-fine {
  margin: 12px 0 0;
  color: #5f5f55;
  font-size: 12.5px;
  line-height: 1.5;
}

/* ---- 4b. The truck --------------------------------------------------- */

/* A line drawing, not a photograph: there is no licensed truck image, and a
   stock rig would be a stranger's truck. Wider than the band on a phone and
   anchored right, so the band crops the trailer the way a camera would and
   the tractor stays large. */
.cp-truck {
  position: absolute;
  right: 0;
  bottom: 40px;
  width: 190%;
  height: calc(100% - 96px);
  overflow: visible;
}

@media (min-width: 620px) {
  .cp-truck {
    width: 120%;
  }
}

@media (min-width: 900px) {
  .cp-truck {
    right: 3%;
    width: 94%;
    height: calc(100% - 110px);
  }
}

.cp-truck__line {
  fill: none;
  stroke: #e9eae2;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cp-truck__faint {
  fill: none;
  stroke: rgba(233, 234, 226, 0.4);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.cp-truck__road {
  fill: none;
  stroke: rgba(233, 234, 226, 0.34);
  stroke-width: 1.5;
}

.cp-truck__lane {
  fill: none;
  stroke: rgba(233, 234, 226, 0.2);
  stroke-width: 3;
  stroke-dasharray: 34 30;
}

.cp-truck__wheel {
  fill: #14140f;
  stroke: #e9eae2;
  stroke-width: 2;
}

.cp-truck__hub {
  fill: none;
  stroke: rgba(233, 234, 226, 0.55);
  stroke-width: 1.5;
}

.cp-truck__lamp {
  fill: var(--cp-warm);
}

.cp-truck__glass {
  fill: rgba(233, 234, 226, 0.1);
  stroke: #e9eae2;
  stroke-width: 1.5;
}

/* ---- 4c. What reaches your family ------------------------------------ */

/* Drawn in the site's certainty materials: solid is written into a contract
   you own, dashed lasts only as long as the job, hatched pays only in some
   cases, and an empty outline does not pay your family at all. Every row
   also says it in words, so nothing rests on the pattern alone. */
.cp-matrix {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(20, 20, 15, 0.12);
}

.cp-matrix__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 4px 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(20, 20, 15, 0.1);
}

.cp-matrix__row:last-child {
  border-bottom-color: rgba(20, 20, 15, 0.22);
}

.cp-swatch {
  display: block;
  width: 44px;
  height: 14px;
  margin-top: 4px;
}

.cp-matrix__row > .cp-swatch {
  grid-row: span 2;
}

.cp-swatch--solid {
  background: #14140f;
}

.cp-swatch--dashed {
  background: repeating-linear-gradient(90deg, #14140f 0 9px, transparent 9px 14px);
}

.cp-swatch--hatched {
  border: 1.5px solid #14140f;
  background: repeating-linear-gradient(135deg, #14140f 0 1.5px, transparent 1.5px 6px);
}

.cp-swatch--none {
  border: 1.5px solid rgba(20, 20, 15, 0.45);
}

.cp-matrix__t {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.cp-matrix__d {
  margin: 2px 0 0;
  color: #43433b;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 15px;
  line-height: 1.5;
}

.cp-matrix__v {
  grid-column: 2;
  margin: 6px 0 0;
  color: #52524a;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.cp-matrix__v b {
  color: #14140f;
  font-weight: 700;
}

@media (min-width: 900px) {
  .cp-matrix__row {
    grid-template-columns: 52px minmax(0, 1fr) 200px;
    gap: 4px 20px;
    align-items: start;
  }

  .cp-matrix__row > .cp-swatch {
    width: 52px;
    grid-row: auto;
  }

  .cp-matrix__v {
    grid-column: 3;
    margin: 3px 0 0;
    text-align: right;
  }
}

.cp-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  color: #5f5f55;
  font-size: 12.5px;
  line-height: 1.4;
}

.cp-key li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.cp-key .cp-swatch {
  width: 22px;
  height: 9px;
  margin: 0;
}

/* --------------------------------------------------------------------------
   5. Sections that sit between the landing.css ones
   -------------------------------------------------------------------------- */

.cp-section {
  padding: var(--sec-pad-y) var(--padX);
}

.cp-section__head {
  margin-bottom: 28px;
}

.cp-section__h2 {
  max-width: 20ch;
  margin: 16px 0 0;
  font-size: var(--h2-size);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.cp-section__lede {
  max-width: 52ch;
  margin: 14px 0 0;
  color: #43433b;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 17px;
  line-height: 1.55;
}

/* The comparison cards carry a verdict row at the foot, lined up across all
   three by landing.css's own margin-top: auto on .dc-product__facts. */
.cp .dc-product__name {
  font-size: 23px;
}

.cp-verdict {
  color: #14140f;
}

.cp-carriers__note {
  margin: 12px 0 0;
  color: #5f5f55;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}

/* The agent card without a portrait: the homepage's avatar is a stock face,
   and a stock face beside "talk to a licensed agent" reads as a named person
   who does not exist. */
.cp .dc-agent__head {
  display: block;
}

/* The page's own disclosures, above the shared footer, so a reviewer who never
   scrolls into the footer still meets them. */
.cp-disclose {
  border-top: 1px solid rgba(20, 20, 15, 0.14);
}

.cp-disclose__inner {
  padding: 30px var(--padX) 8px;
}

.cp-disclose p {
  max-width: 88ch;
  margin: 0 0 10px;
  color: #52524a;
  font-size: 13px;
  line-height: 1.6;
}

.cp-disclose a {
  color: #842f20;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The closing band's call button carries the number, so it can wrap. */
.cp .dc-cta__primary,
.cp .dc-cta__ghost {
  display: inline-flex;
  align-items: center;
  min-height: 54px;
}

/* --------------------------------------------------------------------------
   6. Thank-you pages
   -------------------------------------------------------------------------- */

.cp-thanks {
  padding: var(--hero-pad-y) var(--padX) var(--sec-pad-y);
}

.cp-thanks .dc-h1 {
  max-width: 18ch;
}

.cp-receipt {
  max-width: 640px;
  margin: 26px 0 0;
}

.cp-receipt .dc-card {
  margin-top: 0;
}

.cp-receipt__line {
  margin: 8px 0 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.4;
}

.cp-receipt__line b {
  font-variant-numeric: tabular-nums;
}

.cp-receipt__fix {
  margin: 10px 0 0;
  color: #43433b;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 15.5px;
  line-height: 1.5;
}

.cp-receipt__fix a,
.cp-thanks__p a {
  color: #842f20;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cp-thanks__sooner {
  display: grid;
  gap: 10px;
  max-width: 640px;
  margin: 28px 0 0;
}

.cp-thanks__p {
  max-width: 58ch;
  margin: 0;
  color: #43433b;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 16.5px;
  line-height: 1.55;
}

.cp-checklist {
  max-width: 760px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.cp-checklist li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid rgba(20, 20, 15, 0.14);
}

.cp-checklist__n {
  padding-top: 3px;
  color: #a6432b;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.08em;
}

.cp-checklist__t {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.cp-checklist__d {
  margin: 0;
  color: #43433b;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 15.5px;
  line-height: 1.5;
}

.cp-thanks__driving {
  margin-top: 20px;
  padding: 12px 14px;
  border-left: 4px solid #14140f;
  background: #f4f4ee;
}

.cp-actions--single {
  grid-template-columns: 1fr;
  max-width: 360px;
}

@media (min-width: 560px) {
  .cp-actions--single {
    grid-template-columns: 1fr;
  }
}

.cp-thanks__h2 {
  margin: 44px 0 10px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

@media (prefers-reduced-motion: reduce) {
  .cp-btn {
    transition: none;
  }
}