/* =========================================================================
   EXPERT INSIGHTS — hub + spokes
   CarportCentral Design System v2.5. Namespace .ei26, scoped under
   .cpc-scope. Tokens only, no hardcoded hex. Everything shared (buttons,
   cards, FAQ, pills, eyebrows, forms) comes from cpc-components.css.

   The whole point of this file is that the five stage pages and the seven
   resource pages share one chrome, so moving between them is a repaint of
   the middle of the page and nothing else. The header, the stage rail and
   the footer stay byte-identical between pages, so a prerendered page swaps
   in with nothing visibly moving.
   ========================================================================= */

.cpc-scope.ei26 {
  /* Hero clearance stays on the design-system clamp. It is deliberately NOT
     remeasured in JS: changing the hero's padding after load repaints the
     hero text and re-fires the LCP candidate late. */
  --ei-hdr: var(--cpc-hero-top, clamp(112px, 14vh, 168px));
  --ei-rail-top: 84px;     /* sticky stage rail offset, remeasured in JS */
}

/* ---- Cross-document view transitions — DISABLED, see note ---------------
   Measured on staging 2026-08-21: with `@view-transition { navigation: auto }`
   active, this document recorded NO paint entries at all (no first-paint, no
   FCP, no LCP) even though `load` fired at 3.3s, and Lighthouse scored LCP at
   12.9s and 19.9s on two consecutive runs against 4.9s for the Breakdance
   version on the same host. Chrome render-blocks the incoming document while
   it prepares the transition, and on a page this heavy (3.2 MB, 176 script
   tags of sitewide chrome) that wait swamps the animation it buys.

   The snappy feel does not depend on it. Speculation Rules already prerenders
   the next page on hover, so the click is instant with or without a morph.
   Re-enable only after the sitewide render-blocking CSS/JS is cut down, and
   only with a fresh before/after measurement.
   ---------------------------------------------------------------------- */

/* ---- Hero --------------------------------------------------------------- */
.cpc-scope.ei26 .ei26-hero {
  position: relative;
  background: var(--cpc-dark-deep);
  padding-block: var(--ei-hdr) 0;
  border-bottom: 1px solid var(--cpc-dark-line);
}
.cpc-scope.ei26 .ei26-hero-fx { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.cpc-scope.ei26 .ei26-hero-fx::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--cpc-dark-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--cpc-dark-grid) 1px, transparent 1px),
    linear-gradient(var(--cpc-dark-grid-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--cpc-dark-grid-2) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px, 140px 140px, 140px 140px;
  -webkit-mask-image: radial-gradient(120% 90% at 72% 10%, #000 55%, transparent 100%);
          mask-image: radial-gradient(120% 90% at 72% 10%, #000 55%, transparent 100%);
}
.cpc-scope.ei26 .ei26-hero-fx::after {
  content: ""; position: absolute; top: -40px; right: -40px; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(244,88,11,.26), transparent 62%);
}
.cpc-scope.ei26 .ei26-hero-in { position: relative; z-index: var(--cpc-z-content, 1); max-width: 820px; padding-block: 34px 58px; }
.cpc-scope.ei26 .ei26-hero h1 { color: var(--cpc-on-dark, #fff) !important; margin: 1rem 0 0 !important; }
.cpc-scope.ei26 .ei26-hero .ei26-lede { color: var(--cpc-on-dark-body); margin-top: 1rem; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.62; }
.cpc-scope.ei26 .ei26-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.9rem; }
.cpc-scope.ei26 .ei26-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--cpc-on-dark-muted); }
.cpc-scope.ei26 .ei26-crumbs a { color: var(--cpc-on-dark-muted); text-decoration: none; }
.cpc-scope.ei26 .ei26-crumbs a:hover { color: var(--cpc-orange-dark); }
.cpc-scope.ei26 .ei26-crumbs span { opacity: .5; }

/* ---- Sticky stage rail — the persistent element across every page ------- */
.cpc-scope.ei26 .ei26-rail {
  position: sticky; top: var(--ei-rail-top, 84px); z-index: var(--cpc-z-sticky, 10);
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--cpc-line);
}
.cpc-scope.ei26 .ei26-rail ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.cpc-scope.ei26 .ei26-rail ul::-webkit-scrollbar { display: none; }
.cpc-scope.ei26 .ei26-rail li { flex: 1 0 auto; }
.cpc-scope.ei26 .ei26-rail a {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 18px; white-space: nowrap; text-decoration: none;
  font-size: 14px; font-weight: 600; color: var(--cpc-ink-2);
  border-bottom: 2px solid transparent;
  transition: color var(--cpc-t-state, .15s ease), border-color var(--cpc-t-state, .15s ease), background var(--cpc-t-state, .15s ease);
}
.cpc-scope.ei26 .ei26-rail a .cpc-icon { width: 18px; height: 18px; flex: none; color: currentColor; }
.cpc-scope.ei26 .ei26-rail a:hover { color: var(--cpc-orange-ink); background: var(--cpc-orange-tint); }
.cpc-scope.ei26 .ei26-rail a[aria-current="page"] { color: var(--cpc-orange-ink); border-bottom-color: var(--cpc-orange); }
.cpc-scope.ei26 .ei26-rail .ei26-rail__n { font-variant-numeric: tabular-nums; opacity: .55; font-weight: 700; }

/* ---- The journey: a connected timeline, not five loose cards -------------
   Horizontal on desktop with the connector running behind the nodes, vertical
   on tablet and phone with the connector down the left. The arrow sits in the
   step header beside the title and slides on hover; it is never parked at the
   bottom of the step, where it had nothing to do with the text above it.
   -------------------------------------------------------------------------- */
.cpc-scope.ei26 .ei26-track {
  list-style: none; margin: 2.6rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
}
.cpc-scope.ei26 .ei26-step { position: relative; padding-inline: 12px; }
.cpc-scope.ei26 .ei26-step::before {   /* the connector */
  content: ""; position: absolute; top: 27px; left: 0; right: 0; height: 2px;
  background: var(--cpc-line);
}
.cpc-scope.ei26 .ei26-step:first-child::before { left: 50%; }
.cpc-scope.ei26 .ei26-step:last-child::before  { right: 50%; }

.cpc-scope.ei26 .ei26-step__link {
  display: block; text-decoration: none; color: inherit; cursor: pointer;
  border-radius: var(--cpc-r-md, 12px); padding: 4px 4px 8px; margin: -4px -4px 0;
  transition: background var(--cpc-t-state, .15s ease);
}
.cpc-scope.ei26 .ei26-step__link:hover { background: var(--cpc-orange-tint); }
.cpc-scope.ei26 .ei26-step__link:focus-visible { outline: 2px solid var(--cpc-orange); outline-offset: 3px; }

.cpc-scope.ei26 .ei26-step__node {
  position: relative; z-index: var(--cpc-z-content, 1);
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 18px;
  background: var(--cpc-ground); border: 2px solid var(--cpc-line);
  color: var(--cpc-ink-2);
  transition: border-color var(--cpc-t-state, .15s ease), color var(--cpc-t-state, .15s ease), background var(--cpc-t-state, .15s ease);
}
.cpc-scope.ei26 .ei26-step__node .cpc-icon { width: 24px; height: 24px; color: currentColor; }
.cpc-scope.ei26 .ei26-step__node b {
  position: absolute; right: -5px; bottom: -5px; width: 23px; height: 23px;
  border-radius: 50%; background: var(--cpc-orange); color: #fff;
  border: 2px solid var(--cpc-ground);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  display: grid; place-items: center; line-height: 1;
}
.cpc-scope.ei26 .ei26-step__link:hover .ei26-step__node {
  border-color: var(--cpc-orange); color: var(--cpc-orange-ink); background: var(--cpc-ground);
}

.cpc-scope.ei26 .ei26-step__body  { display: block; }
.cpc-scope.ei26 .ei26-step__head  { display: flex; align-items: center; gap: 8px; }
.cpc-scope.ei26 .ei26-step__title { font-size: 1.06rem; font-weight: 700; color: var(--cpc-ink); letter-spacing: -.01em; }
.cpc-scope.ei26 .ei26-step__arrow {
  width: 17px; height: 17px; flex: none; color: var(--cpc-orange-ink); opacity: .5;
  transition: transform var(--cpc-t-state, .15s ease), opacity var(--cpc-t-state, .15s ease);
}
.cpc-scope.ei26 .ei26-step__link:hover .ei26-step__arrow { opacity: 1; transform: translateX(4px); }
.cpc-scope.ei26 .ei26-step__desc {
  display: block; margin-top: 7px; font-size: 14px; line-height: 1.55; color: var(--cpc-ink-2);
}
.cpc-scope.ei26 .ei26-step__meta {
  display: block; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--cpc-muted);
}
.cpc-scope.ei26 .ei26-step__meta i { font-style: normal; opacity: .55; padding-inline: 2px; }

/* ---- Resource cards ----------------------------------------------------- */
.cpc-scope.ei26 .ei26-res { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cpc-gap-card, 20px); }
/* A four-column track holding two cards reads as a section with two cards
   missing. The count comes from PHP and the grid centres itself. */
.cpc-scope.ei26 .ei26-res--1 { grid-template-columns: minmax(0, 760px); justify-content: center; }
/* One resource is a wide horizontal card, not a narrow one floating in the
   middle of a full-width band. */
.cpc-scope.ei26 .ei26-res--1 .ei26-rescard {
  display: grid; grid-template-columns: 1fr 232px;
  grid-template-areas: "top act" "title act" "desc act";
  align-content: center; gap: 8px 28px; padding: 26px 28px;
}
.cpc-scope.ei26 .ei26-res--1 .ei26-rescard__top  { grid-area: top; justify-content: flex-start; gap: 12px; }
.cpc-scope.ei26 .ei26-res--1 .ei26-rescard h3    { grid-area: title; font-size: 1.15rem !important; }
.cpc-scope.ei26 .ei26-res--1 .ei26-rescard p     { grid-area: desc; font-size: 14.5px; }
.cpc-scope.ei26 .ei26-res--1 .ei26-rescard__meta { display: none; }
.cpc-scope.ei26 .ei26-res--1 .ei26-rescard__act  { grid-area: act; align-self: center; margin-top: 0; padding-top: 0; }
.cpc-scope.ei26 .ei26-res--2 { grid-template-columns: repeat(2, minmax(0, 368px)); justify-content: center; }
.cpc-scope.ei26 .ei26-res--3 { grid-template-columns: repeat(3, minmax(0, 344px)); justify-content: center; }
.cpc-scope.ei26 .ei26-rescard {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--cpc-ground); border: 1px solid var(--cpc-line);
  border-radius: var(--cpc-r-md, 12px); padding: 20px; box-shadow: var(--cpc-shadow-sm);
  transition: transform var(--cpc-t-lift, .18s ease), box-shadow var(--cpc-t-lift, .18s ease), border-color var(--cpc-t-state, .15s ease);
}
.cpc-scope.ei26 .ei26-rescard:hover { transform: translateY(-3px); box-shadow: var(--cpc-shadow-md); border-color: var(--cpc-line-strong); }
.cpc-scope.ei26 .ei26-rescard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cpc-scope.ei26 .ei26-rescard h3 { font-size: 1rem !important; margin: 0 !important; }
.cpc-scope.ei26 .ei26-rescard h3 a { color: inherit; text-decoration: none; }
.cpc-scope.ei26 .ei26-rescard h3 a:hover { color: var(--cpc-orange-ink); }
.cpc-scope.ei26 .ei26-rescard p { font-size: 13.5px; color: var(--cpc-ink-2); line-height: 1.58; margin: 0; }
.cpc-scope.ei26 .ei26-rescard__meta { font-size: 12px; color: var(--cpc-muted); font-weight: 600; }
/* Two peer actions in a 2-column row at every width, phones included. Both
   clear the 48px touch-target floor. The primary carries the verb for this
   specific resource plus its reading time, so a grid of eight cards no longer
   repeats one dead "Read it" eight times. */
.cpc-scope.ei26 .ei26-rescard__act {
  margin-top: auto; padding-top: 14px;
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: stretch;
}
.cpc-scope.ei26 .cpc-btn.ei26-go {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 1px; padding: 9px 16px; min-height: 48px; text-align: left; width: 100%;
}
.cpc-scope.ei26 .ei26-go__label { font-size: 14px; font-weight: 600; line-height: 1.25; }
.cpc-scope.ei26 .ei26-go__meta  { font-size: 11.5px; font-weight: 500; line-height: 1.2; opacity: .82; }
.cpc-scope.ei26 .ei26-pdf {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 72px; min-height: 48px; padding: 8px 12px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--cpc-ink-2);
  text-decoration: none; border: 1px solid var(--cpc-line); border-radius: var(--cpc-r-sm, 8px);
  background: var(--cpc-ground); cursor: pointer;
  transition: border-color var(--cpc-t-state, .15s ease), color var(--cpc-t-state, .15s ease), background var(--cpc-t-state, .15s ease);
}
.cpc-scope.ei26 .ei26-pdf:hover { border-color: var(--cpc-orange); color: var(--cpc-orange-ink); background: var(--cpc-orange-tint); }
.cpc-scope.ei26 .ei26-pdf .cpc-icon { width: 18px; height: 18px; color: currentColor; }

/* ---- Stage content blocks ----------------------------------------------- */
.cpc-scope.ei26 .ei26-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cpc-gap-card, 20px); }
.cpc-scope.ei26 .ei26-blocks--2 { grid-template-columns: repeat(2, 1fr); }
/* Five blocks in a two-column track leaves the fifth stranded on the left with
   a hole beside it (Maintaining, Upgrading). The odd one out spans the row and
   sets its list two-up, so the row reads as a deliberate wide card. */
.cpc-scope.ei26 .ei26-blocks--2 > .ei26-block:last-child:nth-child(odd) { grid-column: 1 / -1; }
.cpc-scope.ei26 .ei26-blocks--2 > .ei26-block:last-child:nth-child(odd) .ei26-ul,
.cpc-scope.ei26 .ei26-blocks--2 > .ei26-block:last-child:nth-child(odd) .ei26-rows {
  display: block; columns: 2; column-gap: 34px;
}
.cpc-scope.ei26 .ei26-blocks--2 > .ei26-block:last-child:nth-child(odd) .ei26-ul li,
.cpc-scope.ei26 .ei26-blocks--2 > .ei26-block:last-child:nth-child(odd) .ei26-rows li {
  break-inside: avoid; margin-bottom: 10px;
}
.cpc-scope.ei26 .ei26-block {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--cpc-ground); border: 1px solid var(--cpc-line);
  border-radius: var(--cpc-r-md, 12px); padding: 24px; box-shadow: var(--cpc-shadow-sm);
}
.cpc-scope.ei26 .ei26-block h3 { font-size: 1.08rem !important; margin: 0 !important; display: flex; align-items: center; gap: 10px; }
.cpc-scope.ei26 .ei26-block h3 .cpc-icon { width: 20px; height: 20px; color: var(--cpc-orange); flex: none; }
.cpc-scope.ei26 .ei26-block > p { font-size: 14.5px; color: var(--cpc-ink-2); line-height: 1.62; margin: 0; }
.cpc-scope.ei26 .ei26-block__n {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cpc-orange-tint); color: var(--cpc-orange-ink);
  font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; flex: none;
}
.cpc-scope.ei26 .ei26-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.cpc-scope.ei26 .ei26-rows li { font-size: 14.5px; color: var(--cpc-ink-2); line-height: 1.58; }
.cpc-scope.ei26 .ei26-rows b { color: var(--cpc-ink); font-weight: 700; }
.cpc-scope.ei26 .ei26-block .ei26-ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cpc-scope.ei26 .ei26-block .ei26-ul li { position: relative; padding-left: 22px; font-size: 14.5px; color: var(--cpc-ink-2); line-height: 1.58; }
.cpc-scope.ei26 .ei26-block .ei26-ul li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--cpc-orange); }
.cpc-scope.ei26 .ei26-block .cpc-btn { margin-top: auto; align-self: flex-start; }

/* ---- Primer (two-up intro cards) ---------------------------------------- */
.cpc-scope.ei26 .ei26-primer { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--cpc-gap-card, 20px); }
.cpc-scope.ei26 .ei26-primer .ei26-panel h3 { margin-top: 0 !important; }

/* ---- Resource page prose ------------------------------------------------ */
.cpc-scope.ei26 .ei26-doc { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.cpc-scope.ei26 .ei26-doc > * { min-width: 0; }
.cpc-scope.ei26 .ei26-sec + .ei26-sec { margin-top: clamp(36px, 5vw, 56px); }
.cpc-scope.ei26 .ei26-sec h2 { margin: 0 0 1.1rem !important; }
.cpc-scope.ei26 .ei26-sec h3 { margin: 1.6rem 0 .7rem !important; font-size: 1.05rem !important; }
.cpc-scope.ei26 .ei26-sec p { font-size: 16px; color: var(--cpc-ink-2); line-height: 1.66; }
.cpc-scope.ei26 .ei26-panel { background: var(--cpc-ground); border: 1px solid var(--cpc-line); border-radius: var(--cpc-r-md, 12px); padding: 20px; box-shadow: var(--cpc-shadow-sm); }
.cpc-scope.ei26 .ei26-panel h3 { margin: 0 0 .5rem !important; font-size: 1rem !important; }
.cpc-scope.ei26 .ei26-panel p  { margin: 0; font-size: 14.5px; }
.cpc-scope.ei26 .ei26-panel .cpc-pill { margin-bottom: 8px; }
.cpc-scope.ei26 .ei26-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.cpc-scope.ei26 .ei26-grid3,
.cpc-scope.ei26 .ei26-checkgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cpc-scope.ei26 .ei26-cols { columns: 2; column-gap: 32px; list-style: none; margin: 0; padding: 0; font-size: 14.5px; color: var(--cpc-ink-2); }
.cpc-scope.ei26 .ei26-cols li { break-inside: avoid; padding: 5px 0 5px 20px; position: relative; }
.cpc-scope.ei26 .ei26-cols li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 6px; height: 6px; border-radius: 50%; background: var(--cpc-orange); }
.cpc-scope.ei26 .ei26-dl { margin: 0; }
.cpc-scope.ei26 .ei26-dl > div { padding: 14px 0; border-top: 1px solid var(--cpc-line); }
.cpc-scope.ei26 .ei26-dl > div:last-child { border-bottom: 1px solid var(--cpc-line); }
.cpc-scope.ei26 .ei26-dl dt { font-weight: 700; color: var(--cpc-ink); font-size: 15px; margin: 0 0 4px; }
.cpc-scope.ei26 .ei26-dl dd { margin: 0; font-size: 14.5px; color: var(--cpc-ink-2); line-height: 1.6; }
.cpc-scope.ei26 .ei26-ol { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: var(--cpc-ink-2); line-height: 1.62; }
.cpc-scope.ei26 .ei26-ol b { color: var(--cpc-ink); }
.cpc-scope.ei26 .ei26-check,
.cpc-scope.ei26 .ei26-warn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; color: var(--cpc-ink-2); line-height: 1.58; }
.cpc-scope.ei26 .ei26-check li,
.cpc-scope.ei26 .ei26-warn li { position: relative; padding-left: 28px; }
.cpc-scope.ei26 .ei26-check li::before {
  content: ""; position: absolute; left: 0; top: .18em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--cpc-go-tint, #E4F4EC) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23137A45' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat;
}
.cpc-scope.ei26 .ei26-warn li::before {
  content: ""; position: absolute; left: 0; top: .18em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--cpc-warn-tint, #FFF4E5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A5300' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center/12px no-repeat;
}
.cpc-scope.ei26 .ei26-tip {
  background: var(--cpc-orange-tint); border-left: 3px solid var(--cpc-orange);
  border-radius: var(--cpc-r-sm, 8px); padding: 14px 16px; font-size: 14.5px !important;
  color: var(--cpc-ink-2) !important; margin: 1.2rem 0 0 !important;
}
.cpc-scope.ei26 .ei26-tip b { color: var(--cpc-ink); }
.cpc-scope.ei26 .ei26-rule {
  background: var(--cpc-dark); color: var(--cpc-on-dark, #fff);
  border-radius: var(--cpc-r-md, 12px); padding: 22px 24px;
  font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 700; text-align: center;
}
.cpc-scope.ei26 .ei26-stat { display: flex; gap: 20px; align-items: center; background: var(--cpc-tint); border: 1px solid var(--cpc-line); border-radius: var(--cpc-r-md, 12px); padding: 22px 24px; margin-top: 1.2rem; }
.cpc-scope.ei26 .ei26-stat .n { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; color: var(--cpc-orange-ink); letter-spacing: -.02em; line-height: 1; flex: none; }
.cpc-scope.ei26 .ei26-stat .t { font-size: 14.5px; color: var(--cpc-ink-2); line-height: 1.58; }
.cpc-scope.ei26 .ei26-tablewrap { overflow-x: auto; border: 1px solid var(--cpc-line); border-radius: var(--cpc-r-md, 12px); background: var(--cpc-ground); margin-top: 1rem; }
.cpc-scope.ei26 .ei26-table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 14.5px; margin: 0; }
.cpc-scope.ei26 .ei26-table th,
.cpc-scope.ei26 .ei26-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--cpc-line); vertical-align: top; }
.cpc-scope.ei26 .ei26-table thead th { background: var(--cpc-tint-2); font-weight: 700; color: var(--cpc-ink); font-size: 13.5px; }
.cpc-scope.ei26 .ei26-table tbody th { font-weight: 700; color: var(--cpc-ink); white-space: nowrap; }
.cpc-scope.ei26 .ei26-table tbody tr:last-child th,
.cpc-scope.ei26 .ei26-table tbody tr:last-child td { border-bottom: 0; }

/* ---- Sidebar ------------------------------------------------------------ */
.cpc-scope.ei26 .ei26-side { position: sticky; top: calc(var(--ei-rail-top, 84px) + 68px); display: flex; flex-direction: column; gap: 16px; }
.cpc-scope.ei26 .ei26-side__box { background: var(--cpc-ground); border: 1px solid var(--cpc-line); border-radius: var(--cpc-r-md, 12px); padding: 20px; box-shadow: var(--cpc-shadow-sm); }
.cpc-scope.ei26 .ei26-side__box h3 { font-size: .95rem !important; margin: 0 0 .8rem !important; }
.cpc-scope.ei26 .ei26-toc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cpc-scope.ei26 .ei26-toc a { display: block; padding: 7px 10px; border-radius: var(--cpc-r-sm, 8px); font-size: 13.5px; color: var(--cpc-ink-2); text-decoration: none; line-height: 1.45; }
.cpc-scope.ei26 .ei26-toc a:hover { background: var(--cpc-orange-tint); color: var(--cpc-orange-ink); }
.cpc-scope.ei26 .ei26-side__box--dark { background: var(--cpc-dark); border-color: var(--cpc-dark); }
.cpc-scope.ei26 .ei26-side__box--dark h3,
.cpc-scope.ei26 .ei26-side__box--dark p { color: var(--cpc-on-dark, #fff); }
.cpc-scope.ei26 .ei26-side__box--dark p { font-size: 13.5px; color: var(--cpc-on-dark-body); margin: 0 0 14px; line-height: 1.55; }

/* ---- Video embed (lazy facade, no third-party JS until clicked) --------- */
.cpc-scope.ei26 .ei26-video { position: relative; aspect-ratio: 16/9; border-radius: var(--cpc-r-md, 12px); overflow: hidden; border: 1px solid var(--cpc-line); background: var(--cpc-dark); }
.cpc-scope.ei26 .ei26-video iframe,
.cpc-scope.ei26 .ei26-video img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.cpc-scope.ei26 .ei26-video button {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; cursor: pointer;
  background: rgba(26,25,27,.35); display: grid; place-items: center;
}
.cpc-scope.ei26 .ei26-video button::after {
  content: ""; width: 74px; height: 74px; border-radius: 50%;
  background: var(--cpc-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/32px no-repeat;
  box-shadow: var(--cpc-shadow-cta);
}

/* ---- Pager -------------------------------------------------------------- */
.cpc-scope.ei26 .ei26-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cpc-gap-card, 20px); }
.cpc-scope.ei26 .ei26-pager a {
  display: flex; flex-direction: column; gap: 4px; text-decoration: none;
  border: 1px solid var(--cpc-line); border-radius: var(--cpc-r-md, 12px);
  padding: 20px 22px; background: var(--cpc-ground); box-shadow: var(--cpc-shadow-sm);
  transition: transform var(--cpc-t-lift, .18s ease), box-shadow var(--cpc-t-lift, .18s ease), border-color var(--cpc-t-state, .15s ease);
}
.cpc-scope.ei26 .ei26-pager a:hover { transform: translateY(-3px); box-shadow: var(--cpc-shadow-md); border-color: var(--cpc-line-strong); }
.cpc-scope.ei26 .ei26-pager .lbl { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cpc-muted); }
.cpc-scope.ei26 .ei26-pager .ttl { font-size: 1.02rem; font-weight: 700; color: var(--cpc-ink); }
.cpc-scope.ei26 .ei26-pager a:hover .ttl { color: var(--cpc-orange-ink); }
.cpc-scope.ei26 .ei26-pager .next { text-align: right; }

/* ---- Final CTA band ----------------------------------------------------- */
.cpc-scope.ei26 .ei26-cta { position: relative; background: var(--cpc-dark-deep); overflow: hidden; }
.cpc-scope.ei26 .ei26-cta-in { position: relative; z-index: var(--cpc-z-content, 1); text-align: center; max-width: 720px; margin-inline: auto; }
.cpc-scope.ei26 .ei26-cta h2 { color: var(--cpc-on-dark, #fff) !important; margin: .6rem 0 0 !important; }
.cpc-scope.ei26 .ei26-cta p  { color: var(--cpc-on-dark-body); margin: 1rem 0 0; font-size: 16px; line-height: 1.62; }
.cpc-scope.ei26 .ei26-cta .ei26-hero-cta { justify-content: center; }

/* ---- Primer with a single panel ----------------------------------------
   Four of the five stages have exactly one "why this matters" panel. Left in
   a two-column track it sat hard against the left edge with a hole beside it.
   One panel gets a centred column and lays its rows out two-up instead.
   ------------------------------------------------------------------------ */
.cpc-scope.ei26 .ei26-primer--one { grid-template-columns: minmax(0, 900px); justify-content: center; }
.cpc-scope.ei26 .ei26-primer--one .ei26-panel { padding: 28px 30px; }
.cpc-scope.ei26 .ei26-primer--one .ei26-panel h3 { font-size: 1.15rem !important; margin-bottom: .9rem !important; }
.cpc-scope.ei26 .ei26-primer--one .ei26-rows { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 30px; }

/* ---- Colour swatches ----------------------------------------------------
   Carport Central's own 300x300 swatch images, served from
   wp-content/uploads/expert-insights/swatches/. The chip is the image itself,
   so there is no painted approximation to drift from the real panel.
   ------------------------------------------------------------------------ */
.cpc-scope.ei26 .ei26-swatches {
  list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 20px 16px;
}
.cpc-scope.ei26 .ei26-swatch { display: flex; flex-direction: column; gap: 10px; }
.cpc-scope.ei26 .ei26-swatch__chip {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  background: var(--cpc-tint);
  border: 1px solid var(--cpc-line); border-radius: var(--cpc-r-md, 12px);
  box-shadow: var(--cpc-shadow-sm);
}
.cpc-scope.ei26 .ei26-swatch__name { font-size: 14.5px; font-weight: 700; color: var(--cpc-ink); line-height: 1.3; }
.cpc-scope.ei26 .ei26-swatch__note { font-size: 12px; color: var(--cpc-warn); line-height: 1.35; margin-top: -4px; }

/* ---- Vertical rhythm ---------------------------------------------------- */
/* The FAQ heading sat directly on the first question. Every accordion on
   every page gets air between the two. */
.cpc-scope.ei26 .cpc-faq { margin-top: 2.2rem; }

/* Anchor jumps (#journey, #resources, #faq) must clear the sticky rail. */
.cpc-scope.ei26 section[id] { scroll-margin-top: calc(var(--ei-rail-top, 84px) + 72px); }
.cpc-scope.ei26 #faq h2   { margin-bottom: .4rem !important; }

/* The closing CTA and the testimonial strip below it were running into their
   neighbours. Both get their own breathing room, wider than a normal band. */
.cpc-scope.ei26 .ei26-cta { padding-block: clamp(76px, 9vw, 124px); margin-top: clamp(24px, 4vw, 48px); }
.ei26-testimonials { padding-block: clamp(40px, 6vw, 72px); }
.ei26-testimonials > *:first-child { margin-top: 0; }

/* ---- Breakpoints -------------------------------------------------------- */
@media (max-width: 1200px) {
  .cpc-scope.ei26 .ei26-res { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
  .cpc-scope.ei26 { --ei-rail-top: 95px; }

  /* The journey turns vertical. A five-across timeline below 1000px is the
     cramped layout, not the fix for it. */
  .cpc-scope.ei26 .ei26-track { grid-template-columns: 1fr; margin-top: 2rem; }
  .cpc-scope.ei26 .ei26-step  { padding-inline: 0; }
  .cpc-scope.ei26 .ei26-step::before {
    top: 58px; bottom: -4px; left: 26px; right: auto; width: 2px; height: auto;
  }
  .cpc-scope.ei26 .ei26-step:first-child::before,
  .cpc-scope.ei26 .ei26-step:last-child::before { left: 26px; right: auto; }
  .cpc-scope.ei26 .ei26-step:last-child::before { display: none; }
  .cpc-scope.ei26 .ei26-step__link {
    display: grid; grid-template-columns: 54px 1fr; gap: 18px;
    padding: 8px 8px 26px; margin: 0 -8px;
  }
  .cpc-scope.ei26 .ei26-step__node { margin-bottom: 0; }
  /* The site's fixed "Build Now" and "Stories" rails sit over the right edge
     on phones. Anything meaningful pinned to that edge disappears under them,
     so the arrow and the kind pill move inboard instead. */
  .cpc-scope.ei26 .ei26-step__head   { justify-content: flex-start; }
  .cpc-scope.ei26 .ei26-rescard__top { justify-content: flex-start; gap: 12px; }
  .cpc-scope.ei26 .ei26-step__title { font-size: 1.12rem; }
  .cpc-scope.ei26 .ei26-step__desc  { font-size: 15px; }

  .cpc-scope.ei26 .ei26-doc      { grid-template-columns: 1fr; }
  .cpc-scope.ei26 .ei26-side     { position: static; }
  .cpc-scope.ei26 .ei26-blocks,
  .cpc-scope.ei26 .ei26-grid3,
  .cpc-scope.ei26 .ei26-checkgrid { grid-template-columns: repeat(2, 1fr); }
  .cpc-scope.ei26 .ei26-res,
  .cpc-scope.ei26 .ei26-res--3   { grid-template-columns: repeat(2, 1fr); justify-content: stretch; }
  .cpc-scope.ei26 .ei26-res--2   { grid-template-columns: repeat(2, 1fr); justify-content: stretch; }
  .cpc-scope.ei26 .ei26-rail li  { flex: 0 0 auto; }
  .cpc-scope.ei26 .ei26-primer--one .ei26-rows { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .cpc-scope.ei26 .ei26-blocks,
  .cpc-scope.ei26 .ei26-blocks--2,
  .cpc-scope.ei26 .ei26-primer,
  .cpc-scope.ei26 .ei26-grid2,
  .cpc-scope.ei26 .ei26-grid3,
  .cpc-scope.ei26 .ei26-checkgrid,
  .cpc-scope.ei26 .ei26-res,
  .cpc-scope.ei26 .ei26-res--1,
  .cpc-scope.ei26 .ei26-res--2,
  .cpc-scope.ei26 .ei26-res--3,
  .cpc-scope.ei26 .ei26-pager { grid-template-columns: 1fr; }
  .cpc-scope.ei26 .ei26-cols  { columns: 1; }
  .cpc-scope.ei26 .ei26-blocks--2 > .ei26-block:last-child:nth-child(odd) .ei26-ul,
  .cpc-scope.ei26 .ei26-blocks--2 > .ei26-block:last-child:nth-child(odd) .ei26-rows { columns: 1; display: flex; flex-direction: column; }
  .cpc-scope.ei26 .ei26-res--1 .ei26-rescard {
    display: flex; grid-template-columns: none; grid-template-areas: none; padding: 20px;
  }
  .cpc-scope.ei26 .ei26-res--1 .ei26-rescard__act { margin-top: auto; padding-top: 14px; }
  .cpc-scope.ei26 .ei26-pager .next { text-align: left; }
  .cpc-scope.ei26 .ei26-stat  { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cpc-scope.ei26 .ei26-swatches { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .cpc-scope.ei26 .ei26-hero-cta .cpc-btn { width: 100%; }
  .cpc-scope.ei26 .ei26-rail a { padding: 13px 14px; font-size: 13.5px; }
  /* The two card actions stay side by side. A 72px icon button next to a
     full-width primary is the layout that looks broken on a 375px screen. */
  .cpc-scope.ei26 .ei26-rescard__act { grid-template-columns: 1fr 92px; }
  .cpc-scope.ei26 .ei26-pdf { min-width: 0; font-size: 11px; }
  .cpc-scope.ei26 .ei26-step__link { grid-template-columns: 46px 1fr; gap: 14px; }
  .cpc-scope.ei26 .ei26-step__node { width: 46px; height: 46px; }
  .cpc-scope.ei26 .ei26-step::before { top: 50px; left: 22px; }
}

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cpc-scope.ei26 *,
  .cpc-scope.ei26 *::before,
  .cpc-scope.ei26 *::after { transition: none !important; animation: none !important; }
}

/* ---- Small utilities used by the two templates -------------------------- */
.cpc-scope.ei26 .ei26-mt   { margin-top: 2.2rem; }
.cpc-scope.ei26 .ei26-mt-s { margin-top: 12px; }
.cpc-scope.ei26 .ei26-cta .cpc-eyebrow { color: var(--cpc-orange-dark); }

/* ---- Interactive checklist ----------------------------------------------
   A checklist rendered as numbered headings is an article with numbers in
   front of it. This is the same six items as a tool: a rail that fills as you
   read, a node that lights when an item reaches you, and a real checkbox per
   item whose state lives on the visitor's own device.

   Every interactive part is added by script and revealed with [hidden], so a
   no-JS visitor gets the complete checklist as static, readable content and
   never sees a dead control.
   ------------------------------------------------------------------------ */
.cpc-scope.ei26 .ei26-clsec { scroll-margin-top: calc(var(--ei-rail-top, 84px) + 90px); }

/* Progress header */
.cpc-scope.ei26 .ei26-prog {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 1.4rem; padding: 16px 20px;
  background: var(--cpc-tint); border: 1px solid var(--cpc-line);
  border-radius: var(--cpc-r-md, 12px);
}
.cpc-scope.ei26 .ei26-prog__ring { width: 46px; height: 46px; flex: none; transform: rotate(-90deg); }
.cpc-scope.ei26 .ei26-prog__ring circle { fill: none; stroke-width: 5; }
.cpc-scope.ei26 .ei26-prog__ring .track { stroke: var(--cpc-line-strong); }
.cpc-scope.ei26 .ei26-prog__ring .pie {
  stroke: var(--cpc-orange); stroke-linecap: round;
  transition: stroke-dashoffset .35s ease;
}
.cpc-scope.ei26 .ei26-prog__txt { margin: 0 !important; flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; }
.cpc-scope.ei26 .ei26-prog__txt strong { font-size: 15px; color: var(--cpc-ink); font-variant-numeric: tabular-nums; }
.cpc-scope.ei26 .ei26-prog__txt span { font-size: 13px; color: var(--cpc-ink-2); line-height: 1.45; }

/* The rail */
.cpc-scope.ei26 .ei26-cl {
  --ei-fill: 0%;
  list-style: none; margin: 1.6rem 0 0; padding: 0; position: relative;
}
.cpc-scope.ei26 .ei26-cl::before,
.cpc-scope.ei26 .ei26-cl::after {
  content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px;
}
.cpc-scope.ei26 .ei26-cl::before { background: var(--cpc-line); }
.cpc-scope.ei26 .ei26-cl::after {
  background: var(--cpc-orange); bottom: auto; height: var(--ei-fill);
  max-height: calc(100% - 44px); transition: height .12s linear;
}

/* A step */
.cpc-scope.ei26 .ei26-cl__item { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; }
.cpc-scope.ei26 .ei26-cl__item + .ei26-cl__item { margin-top: 16px; }
.cpc-scope.ei26 .ei26-cl__node {
  position: relative; z-index: var(--cpc-z-content, 1);
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cpc-ground); border: 2px solid var(--cpc-line-strong);
  color: var(--cpc-muted); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums;
  transition: background var(--cpc-t-state, .15s ease), border-color var(--cpc-t-state, .15s ease),
              color var(--cpc-t-state, .15s ease), box-shadow var(--cpc-t-state, .15s ease);
}
.cpc-scope.ei26 .ei26-cl__node > * { grid-area: 1 / 1; }
.cpc-scope.ei26 .ei26-cl__check { width: 22px; height: 22px; opacity: 0; transform: scale(.5); transition: opacity .18s ease, transform .18s ease; }

/* Reached while scrolling */
.cpc-scope.ei26 .ei26-cl__item.is-live .ei26-cl__node { border-color: var(--cpc-orange); color: var(--cpc-orange-ink); box-shadow: 0 0 0 5px var(--cpc-orange-tint); }
.cpc-scope.ei26 .ei26-cl__item.is-live .ei26-cl__card { border-color: var(--cpc-line-strong); }

/* Ticked */
.cpc-scope.ei26 .ei26-cl__item.is-done .ei26-cl__node { background: var(--cpc-go); border-color: var(--cpc-go); color: #fff; box-shadow: none; }
.cpc-scope.ei26 .ei26-cl__item.is-done .ei26-cl__n { opacity: 0; }
.cpc-scope.ei26 .ei26-cl__item.is-done .ei26-cl__check { opacity: 1; transform: scale(1); }
.cpc-scope.ei26 .ei26-cl__item.is-done .ei26-cl__card { background: var(--cpc-tint); }
.cpc-scope.ei26 .ei26-cl__item.is-done .ei26-cl__card > p { color: var(--cpc-muted); }

.cpc-scope.ei26 .ei26-cl__card {
  background: var(--cpc-ground); border: 1px solid var(--cpc-line);
  border-radius: var(--cpc-r-md, 12px); padding: 20px 22px; box-shadow: var(--cpc-shadow-sm);
  transition: background var(--cpc-t-state, .15s ease), border-color var(--cpc-t-state, .15s ease);
}
.cpc-scope.ei26 .ei26-cl__card h3 { margin: 0 0 .55rem !important; font-size: 1.05rem !important; display: flex; align-items: flex-start; gap: 10px; }
.cpc-scope.ei26 .ei26-cl__card h3 .cpc-icon { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--cpc-orange); }
.cpc-scope.ei26 .ei26-cl__card p { margin: 0; font-size: 15px; color: var(--cpc-ink-2); line-height: 1.62; }

/* The tick control */
.cpc-scope.ei26 .ei26-cl__tick {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 16px;
  min-height: 48px; padding: 8px 14px 8px 8px; cursor: pointer;
  border: 1px solid var(--cpc-line); border-radius: var(--cpc-r-pill, 100px);
  font-size: 14px; font-weight: 600; color: var(--cpc-ink-2);
  transition: border-color var(--cpc-t-state, .15s ease), color var(--cpc-t-state, .15s ease), background var(--cpc-t-state, .15s ease);
}
.cpc-scope.ei26 .ei26-cl__tick:hover { border-color: var(--cpc-orange); color: var(--cpc-orange-ink); background: var(--cpc-orange-tint); }
.cpc-scope.ei26 .ei26-cl__tick input {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cpc-scope.ei26 .ei26-cl__box {
  width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--cpc-line-strong); color: transparent;
  transition: background var(--cpc-t-state, .15s ease), border-color var(--cpc-t-state, .15s ease), color var(--cpc-t-state, .15s ease);
}
.cpc-scope.ei26 .ei26-cl__box svg { width: 16px; height: 16px; }
/* The focus ring is the only keyboard affordance here. Never remove it. */
.cpc-scope.ei26 .ei26-cl__tick input:focus-visible + .ei26-cl__box { outline: 2px solid var(--cpc-orange); outline-offset: 3px; }
.cpc-scope.ei26 .ei26-cl__item.is-done .ei26-cl__tick { border-color: var(--cpc-go); color: var(--cpc-go); background: var(--cpc-go-tint); }
.cpc-scope.ei26 .ei26-cl__item.is-done .ei26-cl__box { background: var(--cpc-go); border-color: var(--cpc-go); color: #fff; }
.cpc-scope.ei26 .ei26-cl__item.is-done .ei26-cl__ticktxt::after { content: " \2014 done"; font-weight: 400; }

/* All clear */
.cpc-scope.ei26 .ei26-allset {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 22px; padding: 22px 24px;
  background: var(--cpc-go-tint); border: 1px solid var(--cpc-go);
  border-radius: var(--cpc-r-md, 12px);
}
.cpc-scope.ei26 .ei26-allset > div { flex: 1 1 260px; }
.cpc-scope.ei26 .ei26-allset .cpc-iconbox { background: var(--cpc-ground); color: var(--cpc-go); }
.cpc-scope.ei26 .ei26-allset .cpc-iconbox .cpc-icon { color: var(--cpc-go); }
.cpc-scope.ei26 .ei26-allset h3 { margin: 0 0 .35rem !important; font-size: 1.05rem !important; }
.cpc-scope.ei26 .ei26-allset p { margin: 0; font-size: 14.5px; color: var(--cpc-ink-2); line-height: 1.58; }

/* Sidebar mirror */
.cpc-scope.ei26 .ei26-side__count { margin: 0 0 10px !important; font-size: 14.5px; color: var(--cpc-ink); font-variant-numeric: tabular-nums; }
.cpc-scope.ei26 .ei26-side__bar { height: 8px; border-radius: 8px; background: var(--cpc-tint-2); overflow: hidden; margin-bottom: 14px; }
.cpc-scope.ei26 .ei26-side__bar span { display: block; height: 100%; width: 0; background: var(--cpc-orange); border-radius: 8px; transition: width .35s ease; }

@media (max-width: 560px) {
  .cpc-scope.ei26 .ei26-cl__item { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
  .cpc-scope.ei26 .ei26-cl::before,
  .cpc-scope.ei26 .ei26-cl::after { left: 16px; }
  .cpc-scope.ei26 .ei26-cl__node { width: 34px; height: 34px; font-size: 13px; }
  .cpc-scope.ei26 .ei26-cl__check { width: 17px; height: 17px; }
  .cpc-scope.ei26 .ei26-cl__card { padding: 16px 16px 18px; }
  .cpc-scope.ei26 .ei26-cl__tick { width: 100%; justify-content: flex-start; }
  .cpc-scope.ei26 .ei26-allset .cpc-btn { width: 100%; }
}

/* The card title carries the topic icon; pin its colour so it survives being
   moved onto any surface (Design System section 9). */
.cpc-scope.ei26 .ei26-cl__card h3 .cpc-icon { color: var(--cpc-orange) !important; }

/* The site's fixed "Build Now" and "Stories" rails sit over the right edge at
   every width. On phones they land on the hero copy and on the right end of
   the hero buttons, where they can swallow a tap. Hold the hero inner column
   clear of them. Verified at 375px. */
@media (max-width: 767px) {
  .cpc-scope.ei26 .ei26-hero-in { padding-right: 48px; }
}

/* The specialist band lives in the footer, outside .cpc-scope, so it cannot
   inherit the scroll-margin the in-page sections use. Give it enough clearance
   for the fixed header plus the sticky stage rail when a CTA jumps to it. */
#cpc-help-cta-title { scroll-margin-top: calc(var(--ei-rail-top, 95px) + 80px); }