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

   Loaded AFTER landing.css and built from it: the tokens, the type, the
   header, the navy band, the comparison table, FAQ, agent panel, 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 — drawn in the same
   editorial language: ink buttons, hairline rules, flat navy, one orange rule.

   Every rule is scoped under .cp (on .dc-page) or uses a cp- class, so the
   homepage, which carries neither, is untouched by this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   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: var(--signal); /* the orange that marks coverage on the navy band */
}

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

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

/* Nothing sits above a campaign headline. */
.cp-hero {
  padding: calc(var(--hero-pad-y) + 8px) var(--padX) var(--hero-pad-b);
}

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

/* On a phone the headline is the page, so it takes the width it has. */
@media (max-width: 899px) {
  .cp .dc-h1 {
    font-size: clamp(34px, 10vw, 44px);
    line-height: 1.04;
    word-spacing: 0.02em;
  }
}

/* The one marked phrase in a campaign headline: the homepage's orange rule,
   held still. Painted as a band under the phrase rather than as
   text-decoration, because Safari splits a text-decoration at every space once
   word-spacing is set, which notched the rule in the middle of "Truck
   Drivers". The band is one stroke in every engine. */
.cp-mark {
  background: linear-gradient(var(--signal), var(--signal)) left 100% / 100% 0.055em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Kept on one line, and padded below so no descender ("y" in "Family.")
   ever cuts the rule. */
.cp .dc-h1 .cp-mark {
  white-space: nowrap;
  padding-bottom: 0.1em;
}

.cp-lede {
  margin: 20px 0 30px;
  max-width: 44ch;
  color: var(--text);
  font-size: var(--lede-size);
  line-height: 1.6;
}

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

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

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

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

.cp-btn__main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.2;
}

.cp-btn__main .dc-icon {
  width: 16px;
  height: 16px;
}

.cp-btn__sub {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  opacity: 0.82;
  font-variant-numeric: tabular-nums;
}

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

.cp .cp-btn__dot,
.cp .dc-phone__dot {
  display: none;
}

@media (max-width: 559px) {
  .cp-btn {
    min-height: 58px;
    padding: 11px 18px;
    gap: 2px;
  }

  /* Only the dialog opener: a tel: outline button's second line is its
     phone number and always shows. */
  .cp-btn--line[data-open-quote] .cp-btn__sub {
    display: none;
  }
}

.cp-btn__arrow {
  font-weight: 500;
}

.cp-btn--call {
  background: var(--ink);
  color: #ffffff;
}

.cp-btn--call:hover {
  background: var(--ink-hover);
  color: #ffffff;
}

/* 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: var(--ink);
  background: transparent;
  color: var(--ink);
}

.cp-btn--line:hover {
  background: var(--stone);
  color: var(--ink);
}

.cp-btn--line .cp-btn__sub {
  color: var(--muted);
  opacity: 1;
}

/* 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;
}

/* --------------------------------------------------------------------------
   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: 24px;
  align-items: start;
}

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

  .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: 34px 0 0;
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--ink);
  }

  .cp-hero__points li {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line-strong);
    color: var(--text);
    font-size: 16px;
    line-height: 1.55;
  }

  .cp-hero__points span {
    padding-top: 3px;
    color: var(--signal-text);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
  }
}

.cp-formcard {
  margin-top: 0;
  scroll-margin-top: 0;
}

.cp-formcard__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin-bottom: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.cp-formcard__title {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.15;
}

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

.cp-formcard__meta {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cp-formcard__call {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.cp-formcard__call p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  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));
}

/* fit-form.js moves focus to each new question so a screen reader follows the
   step. After a tap, Safari counts that scripted focus as focus-visible and
   draws the keyboard ring round the question; campaign.js marks the form
   while the visitor is using a pointer, and the ring is kept for keyboards. */
.tl-fit.is-pointer-nav .tl-fit-question:focus-visible {
  box-shadow: none;
}

/* 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(23px, 2.1vw, 28px);
}

/* The trust line 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 navy band with a drawing, and the card that
   climbs over its lower edge.
   -------------------------------------------------------------------------- */

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

.cp-actions + .cp-stage {
  margin-top: 40px;
}

@media (min-width: 900px) {
  .cp-actions + .cp-stage {
    margin-top: 56px;
  }
}

.cp-band {
  position: relative;
  height: var(--cp-band-h);
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
  background: var(--ink);
  color: var(--on-navy);
}

.cp-band__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  max-width: calc(100% - 32px);
  padding: 5px 10px;
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  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: 22ch;
  margin: 12px 0 12px;
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: var(--q-size);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.cp-card__p {
  max-width: 54ch;
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.65;
}

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

@media (min-width: 900px) {
  .cp-card__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 64px;
    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;
}

/* Two neutral tints of the stone: the darker for what is still owed, the
   lighter for what is left for the family. Orange laid over navy turns brown,
   so the accent stays on the coverage line alone. */
.cp-plot__owed {
  fill: rgba(244, 241, 234, 0.04);
}

.cp-plot__left {
  fill: rgba(244, 241, 234, 0.16);
}

.cp-plot__balance {
  fill: none;
  stroke: #ffffff;
  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(244, 241, 234, 0.3);
  stroke-width: 1px;
}

.cp-plot__label {
  position: absolute;
  z-index: 1;
  margin: 0;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  pointer-events: none;
}

.cp-plot__label small {
  display: block;
  color: var(--on-navy-muted);
  font-size: 11px;
  font-weight: 500;
}

.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%;
  text-shadow: 0 0 4px var(--ink), 0 0 8px var(--ink);
}

@media (max-width: 559px) {
  .cp-plot__label--owed small {
    display: none;
  }
}

/* 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: var(--on-navy-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  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 dashed rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

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

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

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

.cp-plot__tag {
  position: absolute;
  top: 100%;
  left: 0;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  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: var(--ink);
  font-size: 16px;
  font-weight: 600;
  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: 3px;
  background: var(--line-strong);
}

.cp-range::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  margin-top: -10.5px;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 1.5px var(--ink);
  -webkit-appearance: none;
  appearance: none;
}

.cp-range::-moz-range-track {
  height: 3px;
  background: var(--line-strong);
}

.cp-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 1.5px var(--ink);
}

.cp-range:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

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

.cp-readouts {
  margin: 0;
  border-top: 1px solid var(--ink);
}

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

.cp-readouts dt {
  color: var(--muted);
  font-size: 14px;
}

.cp-readouts dd {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
}

.cp-readouts__left dd {
  color: var(--signal-text);
}

.cp-readouts__left dt::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  vertical-align: -1px;
  /* The chart's "left for your family" tint as it lands on the navy band. */
  background: #374456;
}

.cp-explorer__say {
  margin: 14px 0 0;
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.6;
}

.cp-fine {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

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

/* Operator-supplied line art (originals/truck-line-art.png), recoloured from
   its near-black ground onto this page's navy by tools/build-images.py, and
   cut into two crops. The band takes that exact navy and each crop's own
   aspect ratio, so the picture fills it edge to edge with no seam, and the
   frame is reserved before the file arrives — nothing moves when it lands.

   The crops switch at 560px, here and in the <picture> media queries, which
   must agree: below it (every phone held upright) the tractor and the front
   of the trailer at 7:5; from 560px the whole rig at 11:4. Between 560 and
   900px that band is short, so the card climbs 24px over it instead of 40 and
   the road and lane markings stay clear. */
.cp .cp-band--truck {
  height: auto;
  aspect-ratio: 7 / 5;
  background: #13233a;
}

@media (min-width: 560px) {
  .cp .cp-band--truck {
    aspect-ratio: 11 / 4;
  }
}

@media (min-width: 560px) and (max-width: 899px) {
  .cp .cp-band--truck + .dc-card {
    margin-top: -24px;
  }
}

.cp-truck,
.cp-truck__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* The box and the crop share an aspect ratio, so `cover` changes nothing but a
   sub-pixel rounding — it is there so a rounding error can never open a
   hairline of band colour along one edge. */
.cp-truck__img {
  object-fit: cover;
  object-position: 50% 50%;
}

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

/* Drawn in the certainty materials, in ink: 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 var(--ink);
}

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

.cp-matrix__row:last-child {
  border-bottom-color: var(--line-strong);
}

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

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

.cp-swatch--solid {
  background: var(--ink);
}

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

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

.cp-swatch--none {
  border: 1.5px solid var(--control);
}

.cp-matrix__t {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.cp-matrix__d {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
}

.cp-matrix__v {
  grid-column: 2;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.cp-matrix__v b {
  color: var(--ink);
  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: var(--muted);
  font-size: 13px;
  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: 36px;
}

.cp-section__h2 {
  max-width: 20ch;
  margin: 14px 0 0;
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: var(--h2-size);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.06;
  text-wrap: balance;
}

.cp .dc-product__name {
  font-size: 27px;
}

.cp-verdict {
  color: var(--ink);
  font-weight: 700;
}

.cp-carriers__note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* The agent panel without a portrait: 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 footer, so a reviewer who never
   scrolls into the footer still meets them. */
.cp-disclose {
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.cp-disclose__inner {
  padding: 36px var(--padX) 24px;
}

.cp-disclose p {
  max-width: 88ch;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.65;
}

.cp-disclose a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  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: 58px;
}

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

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

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

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

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

.cp-receipt__line {
  margin: 8px 0 0;
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.35;
}

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

.cp-receipt__fix {
  margin: 10px 0 0;
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.6;
}

.cp-receipt__fix a,
.cp-thanks__p a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

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

.cp-thanks__p {
  max-width: 58ch;
  margin: 0;
  color: var(--text);
  font-size: 16.5px;
  line-height: 1.6;
}

/* What to have ready: the homepage's steps — large orange serif numerals
   under one heavy rule, divided by hairlines. */
.cp-checklist {
  max-width: 760px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}

.cp-checklist li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-strong);
}

.cp-checklist__n {
  color: var(--signal);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 38px;
  font-weight: 400;
  line-height: 0.95;
  font-variant-numeric: lining-nums;
}

.cp-checklist__t {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
}

.cp-checklist__d {
  margin: 0;
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.6;
}

.cp-thanks__driving {
  margin-top: 20px;
  padding: 14px 16px;
  border-left: 3px solid var(--ink);
  background: var(--stone);
  color: var(--ink);
}

.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: 48px 0 10px;
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.012em;
}

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