/* =========================================================================
   CDCP INFO TEMPLATE (template-cdcp.php)

   Deliberately not the hero+tabs service pattern — this page is reference
   information (what's covered, who's eligible when, what to bring), so it
   reads better as a hero, a coverage grid, a phased eligibility timeline
   and an apply checklist than as tabs. Every rule here is presentation
   only — the words it styles are copied verbatim from the live CDCP page
   into template-cdcp.php's content, not invented by this stylesheet.
   ========================================================================= */

/* -------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------- */
.cdcp-hero.fold { padding-top: calc(var(--fold) + var(--sp-2)); padding-bottom: var(--sp-6); }

.cdcp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: clamp(1.75rem, 3.4vw, 3.6rem);
  align-items: center;
}
.cdcp-hero-copy { max-width: 62ch; }
.cdcp-hero-copy .eyebrow + h1 { margin-top: var(--sp-2); }
.cdcp-hero-copy .lead { margin-top: var(--sp-3); }
.cdcp-hero-copy .lead + .lead { margin-top: var(--sp-2); }

/* The hero heading otherwise carries .d4 (the site's largest display
   size) — matched to .d3 instead so it reads the same size as this
   page's other section headings (What CDCP covers, Who's eligible, etc). */
.cdcp-hero-copy h1 { font-size: var(--fs-d3); }

/* Same treatment as .svc-hero-shot in service-1.css, so a hero photo reads
   identically whichever template a visitor lands on. */
.cdcp-hero-shot {
  position: relative;
  margin: 0; border-radius: var(--r-md); overflow: hidden;
  background: var(--n-10);
  height: 538px;
  box-shadow: 0 30px 60px -34px rgba(var(--deep-rgb), 0.35);
}
.cdcp-hero-shot img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--t-3) var(--ease);
}
@media (hover: hover) {
  .cdcp-hero-shot:hover img { transform: scale(1.05); }
}

.cdcp-hero-actions {
  display: flex; flex-wrap: wrap;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  margin-top: var(--sp-4);
}

/* Quick facts strip — three short chips restating the plan's own key
   numbers (launch date, administrator, eligibility basis) so a visitor
   gets the headline facts before scrolling into the detail below. */
.cdcp-facts {
  display: flex; flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: var(--sp-5);
}
.cdcp-fact {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.65rem 1.05rem;
  border-radius: var(--r-pill);
  background: var(--surface-quiet);
  box-shadow: inset 0 0 0 var(--hair) var(--rule);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
}
.cdcp-fact svg { width: 17px; height: 17px; flex: none; color: var(--leaf); }

/* -------------------------------------------------------------------------
   COVERAGE GRID — "What CDCP covers"
   ------------------------------------------------------------------------- */
.cdcp-coverage.fold { padding-block: calc(var(--fold) / 2); }

.cdcp-coverage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: var(--sp-5);
}
.cdcp-card {
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: 0 22px 44px -34px rgba(var(--deep-rgb), 0.3),
              inset 0 0 0 var(--hair) var(--rule-quiet);
  transition: transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease);
}
@media (hover: hover) {
  .cdcp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 54px -30px rgba(var(--deep-rgb), 0.38),
                inset 0 0 0 var(--hair) var(--rule-quiet);
  }
  .cdcp-card:hover .cdcp-card-icon { transform: scale(1.08) rotate(-4deg); }
}
.cdcp-card-icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--tint-open); color: var(--leaf);
  flex: none;
  transition: transform var(--t-2) var(--ease);
}
.cdcp-card-icon svg { width: 22px; height: 22px; }
.cdcp-card h3 {
  margin-top: var(--sp-3);
  font-size: var(--fs-md); font-weight: 700;
  letter-spacing: var(--track-tight); line-height: 1.25;
}
.cdcp-card p { margin-top: 0.5rem; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-mid); }

/* -------------------------------------------------------------------------
   "FIND YOUR GROUP" CHECKER — sits above the rail it highlights.
   ------------------------------------------------------------------------- */
.cdcp-checker {
  margin-top: var(--sp-3);
  padding-block: clamp(0.75rem, 1.3vw, 1.1rem);
  padding-inline: clamp(1.5rem, 2.6vw, 2.2rem);
  background: var(--surface-quiet);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 var(--hair) var(--rule);
}
.cdcp-checker-label {
  font-size: var(--fs-md); font-weight: 700; letter-spacing: var(--track-tight);
}
.cdcp-checker-options {
  display: flex; flex-wrap: wrap; gap: 0.55rem;
  margin-top: var(--sp-3);
}
/* Radio pills — same visual language as .svc1-tab in service-1.css, so a
   visitor who's seen a service page recognises the interaction pattern. */
.cdcp-checker-option {
  position: relative;
}
.cdcp-checker-option input {
  position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
.cdcp-checker-option label {
  display: inline-flex; align-items: center;
  padding: 0.62rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: inset 0 0 0 var(--hair) var(--rule);
  font-size: var(--fs-body); font-weight: 600; color: var(--ink-mid);
  cursor: pointer;
  transition: background var(--t-2) var(--ease), color var(--t-2) var(--ease),
              box-shadow var(--t-2) var(--ease);
}
.cdcp-checker-option input:checked + label {
  background: var(--deep); color: var(--on-deep);
  box-shadow: none;
}
.cdcp-checker-option input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) {
  .cdcp-checker-option label:hover { box-shadow: inset 0 0 0 var(--hair) var(--deep); color: var(--ink); }
  .cdcp-checker-option input:checked + label:hover { color: var(--on-deep); }
}

.cdcp-checker-result {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.9rem;
  margin-top: var(--sp-3);
  padding: 0.9rem 1.2rem;
  background: var(--white);
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 var(--hair) var(--rule);
}
/* The `display: flex` above otherwise outranks the browser's own
   [hidden] { display: none } — author CSS always wins over the UA
   stylesheet regardless of the attribute — so the empty result box showed
   before any pill was ever picked. */
.cdcp-checker-result[hidden] { display: none; }
.cdcp-checker-result strong { font-size: var(--fs-body); font-weight: 700; color: var(--deep); }
.cdcp-checker-result span { font-size: var(--fs-body); color: var(--ink-mid); }

/* -------------------------------------------------------------------------
   ELIGIBILITY RAIL — "Who Qualifies for the CDCP?"
   ------------------------------------------------------------------------- */
.cdcp-timeline.fold { position: relative; padding-block: calc(var(--fold) / 2); }

.cdcp-timeline-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: var(--sp-3);
  counter-reset: cdcp-phase;
}
.cdcp-phase {
  position: relative;
  padding: clamp(1.5rem, 2.4vw, 2.1rem) clamp(1.5rem, 2.2vw, 1.9rem) clamp(1.5rem, 2.4vw, 2.1rem);
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: 0 22px 44px -34px rgba(var(--deep-rgb), 0.3),
              inset 0 0 0 var(--hair) var(--rule-quiet);
}
/* The connecting rail between cards — a plain horizontal line behind the
   number badges, hidden on the last card and on mobile once the grid
   stacks to one column. */
.cdcp-phase::before {
  content: '';
  position: absolute; top: 2.4rem; left: -0.55rem;
  width: 1.1rem; height: var(--hair);
  background: var(--rule);
}
.cdcp-phase:first-child::before { display: none; }

.cdcp-phase-num {
  counter-increment: cdcp-phase;
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--deep); color: var(--on-deep);
  font-size: var(--fs-sm); font-weight: 700;
}
.cdcp-phase-num::before { content: counter(cdcp-phase); }

.cdcp-phase-date {
  display: inline-block;
  margin-top: var(--sp-3);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--leaf);
}
.cdcp-phase h3 { margin-top: 0.4rem; font-size: var(--fs-card-t); font-weight: 700; letter-spacing: var(--track-tight); line-height: 1.25; }
.cdcp-phase ul { margin-top: 0.75rem; display: grid; gap: 0.4rem; }
.cdcp-phase li {
  display: flex; align-items: baseline; gap: 0.5rem;
  font-size: var(--fs-body); line-height: 1.55; color: var(--ink-mid);
}
.cdcp-phase li::before {
  content: ''; flex: none;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--sage); margin-top: 0.55em;
}

/* Transient — the phase nearest the middle of the viewport while scrolling.
   A soft lift, not a colour change, so it doesn't compete with the
   deliberate "picked" state below. */
.cdcp-phase.is-inview {
  box-shadow: 0 30px 54px -30px rgba(var(--deep-rgb), 0.4),
              inset 0 0 0 var(--hair) var(--rule-quiet);
  transform: translateY(-3px);
  transition: transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease);
}

/* Persistent — set by the checker above when this phase matches what a
   visitor picked. Outranks .is-inview visually (colour, not just shadow)
   so a deliberate choice always reads as more "on" than a scroll-by. */
.cdcp-phase--picked {
  box-shadow: 0 0 0 2px var(--leaf),
              0 30px 54px -30px rgba(var(--deep-rgb), 0.4);
}
.cdcp-phase--picked .cdcp-phase-num { background: var(--leaf); }
.cdcp-phase--picked::after {
  content: 'Your group';
  position: absolute; top: -0.7rem; right: clamp(1.5rem, 2.2vw, 1.9rem);
  padding: 0.25rem 0.65rem;
  border-radius: var(--r-pill);
  background: var(--leaf); color: var(--white);
  font-size: var(--fs-nano); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
}

.cdcp-age--picked { color: var(--deep); font-weight: 700; }
.cdcp-age--picked::before { background: var(--leaf); }

.cdcp-timeline-note {
  display: flex; align-items: center; gap: 0.7rem;
  margin-top: var(--sp-4);
  padding: 1rem 1.3rem;
  background: var(--tint-open);
  border-radius: var(--r-sm);
  font-size: var(--fs-body); font-weight: 600; color: var(--leaf);
}
.cdcp-timeline-note svg { width: 19px; height: 19px; flex: none; }

/* -------------------------------------------------------------------------
   APPLY — checklist + key-facts card, side by side
   ------------------------------------------------------------------------- */
.cdcp-apply.fold { padding-block: calc(var(--fold) / 2); }

.cdcp-apply-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: var(--sp-5);
  align-items: start;
}

.cdcp-checklist { display: grid; gap: 0.85rem; }
.cdcp-checklist li {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 1rem 1.2rem;
  background: var(--surface-quiet);
  border-radius: var(--r-sm);
  font-size: var(--fs-body); font-weight: 500; color: var(--ink);
}
.cdcp-checklist svg {
  width: 20px; height: 20px; flex: none; margin-top: 0.1rem;
  color: var(--leaf);
}

.cdcp-facts-card {
  padding: clamp(1.75rem, 3vw, 2.4rem);
  background: var(--deep);
  color: var(--on-deep);
  border-radius: var(--r-md);
  box-shadow: 0 30px 60px -34px rgba(var(--deep-rgb), 0.45);
}
.cdcp-facts-card h3 {
  font-size: var(--fs-lg); font-weight: 700; letter-spacing: var(--track-tight);
}
.cdcp-facts-list { margin-top: var(--sp-3); display: grid; gap: var(--sp-3); }
.cdcp-facts-list li { display: flex; gap: 0.75rem; }
.cdcp-facts-list svg { width: 19px; height: 19px; flex: none; margin-top: 0.15rem; color: var(--on-deep-key); }
.cdcp-facts-list span { font-size: var(--fs-body); line-height: 1.6; color: var(--on-deep-mid); }
.cdcp-facts-list strong { display: block; font-size: var(--fs-body); font-weight: 700; color: var(--on-deep); margin-bottom: 0.15rem; }

/* -------------------------------------------------------------------------
   CLOSING CTA — .svc1-cta's own padding-top (service-1.css) was sized to
   follow that template's full-height treatments section; this page's
   .cdcp-apply fold above it now runs at half padding, so the CTA needs a
   bit of its own top space back rather than borrowing more from the grey
   section above it.
   ------------------------------------------------------------------------- */
.cdcp-cta { margin-top: calc(var(--sp-4) + 50px); }

/* -------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .cdcp-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .cdcp-hero-shot { order: -1; aspect-ratio: 16 / 9; height: auto; }
  .cdcp-coverage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cdcp-timeline-rail { grid-template-columns: minmax(0, 1fr); }
  .cdcp-phase::before { display: none; }
  .cdcp-apply-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  /* Mobile-only unification: every reference page's CTA lands on the same
     top space here, though each keeps its own desktop value above. */
  .cdcp-cta { margin-top: var(--sp-5); }
  .cdcp-hero.fold { padding-bottom: var(--sp-5); }
  .cdcp-hero-shot { aspect-ratio: 4 / 3; }
  .cdcp-coverage-grid { grid-template-columns: minmax(0, 1fr); }
  .cdcp-hero-actions .btn i { display: none; }

  .cdcp-checker { padding-inline: 1.1rem; }
  .cdcp-checker-options { gap: 0.4rem; }
  .cdcp-checker-option label { padding: 0.55rem 0.9rem; font-size: var(--fs-sm); }

  .cdcp-phase { padding: 1.4rem 1.3rem; }
  .cdcp-phase--picked::after { right: 1.3rem; }

  .cdcp-facts-card { padding: 1.5rem; }
}

/* =========================================================================
   FULL-CONTENT SECTIONS

   The page now carries the complete CDCP reference copy from the old site,
   verbatim — nothing summarised, nothing dropped. Everything below styles
   the sections that copy needs (the "Understanding the plan" split, the
   eligibility-criteria cards, the five-step application guide, the after
   -you-apply pair and the closing note). Same tokens, same card language
   and same hover behaviour as the folds above, so the longer page still
   reads as one design rather than two.
   ========================================================================= */

/* -------------------------------------------------------------------------
   SHARED — the standfirst under a section heading, and the "(Source)"
   attribution line the old page printed at the foot of three sections.
   ------------------------------------------------------------------------- */
.cdcp-section-lead { margin-top: var(--sp-3); max-width: 74ch; }

.cdcp-source { margin-top: var(--sp-4); }
.cdcp-source a {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding-bottom: 0.15rem;
  border-bottom: var(--hair) solid var(--rule);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-quiet); text-decoration: none;
  transition: color var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
@media (hover: hover) {
  .cdcp-source a:hover { color: var(--leaf); border-color: var(--leaf); }
}

/* -------------------------------------------------------------------------
   INTRO — "Understanding the Canadian Dental Care Plan". Heading on one
   side, the plan's own definition paragraph on the other, so a 90-word
   block of reference prose gets a column narrow enough to actually read.
   ------------------------------------------------------------------------- */
.cdcp-intro.fold { padding-block: calc(var(--fold) / 2); }

.cdcp-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
}
.cdcp-split-head h2 { margin-top: var(--sp-2); }
.cdcp-split-body {
  padding-left: clamp(1.25rem, 2.2vw, 2rem);
  border-left: 2px solid var(--sage);
}
.cdcp-q {
  font-size: var(--fs-lg); font-weight: 700;
  letter-spacing: var(--track-tight); color: var(--deep);
}
.cdcp-prose {
  margin-top: var(--sp-2);
  font-size: var(--fs-lead); line-height: var(--lh-body);
  color: var(--ink-mid); max-width: 64ch;
}

/* -------------------------------------------------------------------------
   ELIGIBILITY GROUPS — the four "Who qualifies" cards each print the plan's
   own two labelled facts (Eligibility, Application Start Date), so they use
   a definition list rather than the plain bullets the old three-card rail
   carried.
   ------------------------------------------------------------------------- */
.cdcp-timeline-rail--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cdcp-timeline-rail--4 .cdcp-phase h3 { font-size: var(--fs-lg); }

.cdcp-def { margin-top: var(--sp-3); }
.cdcp-def dt {
  font-size: var(--fs-nano); font-weight: 700;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-quiet);
}
.cdcp-def dd { margin-top: 0.2rem; font-size: var(--fs-body); line-height: 1.55; color: var(--ink-mid); }
.cdcp-def dd + dt { margin-top: 0.9rem; }

/* Overrides .cdcp-phase ul's own top margin — this list sits inside a dd
   that already spaces itself, so it only needs the smaller gap. */
.cdcp-phase .cdcp-subdates { margin-top: 0.35rem; }

/* -------------------------------------------------------------------------
   ELIGIBILITY CRITERIA — three cards, same surface as .cdcp-card above but
   carrying a bulleted list instead of a single sentence.
   ------------------------------------------------------------------------- */
.cdcp-criteria.fold { padding-block: calc(var(--fold) / 2); }

.cdcp-criteria-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: var(--sp-5);
}
.cdcp-criteria-card {
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: 0 22px 44px -34px rgba(var(--deep-rgb), 0.3),
              inset 0 0 0 var(--hair) var(--rule-quiet);
  transition: transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease);
}
@media (hover: hover) {
  .cdcp-criteria-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 54px -30px rgba(var(--deep-rgb), 0.38),
                inset 0 0 0 var(--hair) var(--rule-quiet);
  }
  .cdcp-criteria-card:hover .cdcp-card-icon { transform: scale(1.08) rotate(-4deg); }
}
.cdcp-criteria-card h3 {
  margin-top: var(--sp-3);
  font-size: var(--fs-card-t); font-weight: 700;
  letter-spacing: var(--track-tight); line-height: 1.25;
}
.cdcp-criteria-card ul { margin-top: var(--sp-3); display: grid; gap: 0.6rem; }
/* Bullet positioned rather than flexed, unlike the plain-text lists further
   up: these items carry inline <strong> and <a>, and a flex li would make
   every one of those a flex item with the row gap wedged in beside it. */
.cdcp-criteria-card li {
  position: relative; padding-left: 1.15rem;
  font-size: var(--fs-body); line-height: 1.6; color: var(--ink-mid);
}
.cdcp-criteria-card li::before {
  content: '';
  position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--sage);
}

/* -------------------------------------------------------------------------
   APPLY — the plan's own five numbered steps, every word of each kept
   visible rather than folded into an accordion, so nothing on this page is
   a click away from being read.
   ------------------------------------------------------------------------- */
.cdcp-sub {
  margin-top: var(--sp-6);
  font-size: var(--fs-xl); font-weight: 700;
  letter-spacing: var(--track-tight); color: var(--ink);
}

.cdcp-extlink { margin-top: var(--sp-3); }
.cdcp-extlink a {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.8rem 1.25rem;
  border-radius: var(--r-pill);
  background: var(--tint-open); color: var(--leaf);
  font-size: var(--fs-body); font-weight: 700; text-decoration: none;
  transition: transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease);
}
.cdcp-extlink a svg { width: 17px; height: 17px; flex: none; }
.cdcp-extlink-note { font-weight: 500; color: var(--ink-mid); }
@media (hover: hover) {
  .cdcp-extlink a:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -18px rgba(var(--deep-rgb), 0.45);
  }
}

.cdcp-steps { margin-top: var(--sp-4); display: grid; gap: 1rem; }
.cdcp-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: 0 22px 44px -34px rgba(var(--deep-rgb), 0.3),
              inset 0 0 0 var(--hair) var(--rule-quiet);
  transition: transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease);
}
@media (hover: hover) {
  .cdcp-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 54px -30px rgba(var(--deep-rgb), 0.38),
                inset 0 0 0 var(--hair) var(--rule-quiet);
  }
}
.cdcp-step-num {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--deep); color: var(--on-deep);
  font-size: var(--fs-md); font-weight: 700;
}
.cdcp-step-body h4 {
  font-size: var(--fs-card-t); font-weight: 700;
  letter-spacing: var(--track-tight); line-height: 1.25;
}
.cdcp-step-body > p {
  margin-top: 0.6rem;
  font-size: var(--fs-body); line-height: 1.65;
  color: var(--ink-mid); max-width: 78ch;
}
.cdcp-step-list { margin-top: 0.9rem; display: grid; gap: 0.5rem; }
/* Same positioned bullet, and for the same reason — see the note on
   .cdcp-criteria-card li above. */
.cdcp-step-list li {
  position: relative; padding-left: 1.15rem;
  font-size: var(--fs-body); line-height: 1.6; color: var(--ink-mid);
}
.cdcp-step-list li::before {
  content: '';
  position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--sage);
}
.cdcp-step-list strong { color: var(--ink); font-weight: 700; }
.cdcp-step-list a { color: var(--leaf); font-weight: 700; }

.cdcp-step-sub {
  margin-top: var(--sp-3);
  font-size: var(--fs-nano); font-weight: 700;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-quiet);
}
.cdcp-step-dates {
  margin-top: 0.7rem;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem;
}
.cdcp-step-dates li {
  display: grid; gap: 0.15rem;
  padding: 0.85rem 1rem;
  background: var(--surface-quiet);
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 var(--hair) var(--rule);
}
.cdcp-step-dates strong { font-size: var(--fs-sm); font-weight: 700; color: var(--deep); }
.cdcp-step-dates span { font-size: var(--fs-sm); color: var(--ink-mid); }

/* -------------------------------------------------------------------------
   AFTER YOU APPLY — the two confirmation facts beside the three tips, then
   the page's own closing note.
   ------------------------------------------------------------------------- */
.cdcp-after.fold { padding-block: calc(var(--fold) / 2); }

.cdcp-after-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: var(--sp-5);
  align-items: start;
}
.cdcp-checklist li { line-height: 1.6; }
.cdcp-checklist strong { color: var(--deep); font-weight: 700; }

.cdcp-close {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(1rem, 2.4vw, 2rem);
  margin-top: var(--sp-5);
  padding: clamp(1.5rem, 2.8vw, 2.2rem) clamp(1.5rem, 3vw, 2.6rem);
  background: var(--surface-quiet);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 var(--hair) var(--rule);
}
.cdcp-close p {
  flex: 1 1 34ch;
  max-width: 62ch;
  font-size: var(--fs-body); line-height: 1.65; color: var(--ink-mid);
}
.cdcp-close-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* -------------------------------------------------------------------------
   RESPONSIVE — for the sections above only. The rails these break down are
   wider than the three-up ones further up the file, so they need their own
   earlier breakpoint rather than sharing the 1024px one.
   ------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .cdcp-timeline-rail--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cdcp-timeline-rail--4 .cdcp-phase::before { display: none; }
}
@media (max-width: 1024px) {
  .cdcp-split { grid-template-columns: minmax(0, 1fr); }
  .cdcp-criteria-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cdcp-after-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .cdcp-timeline-rail--4 { grid-template-columns: minmax(0, 1fr); }
  .cdcp-criteria-grid { grid-template-columns: minmax(0, 1fr); }
  .cdcp-step-dates { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cdcp-split-body { padding-left: 1.1rem; }
  .cdcp-sub { margin-top: var(--sp-5); }
  .cdcp-step { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; padding: 1.4rem 1.3rem; }
  .cdcp-step-num { width: 36px; height: 36px; }
  .cdcp-close { padding: 1.4rem 1.3rem; }
  .cdcp-close-actions { width: 100%; }
  .cdcp-close-actions .btn { flex: 1 1 100%; justify-content: center; }
}