/* =============================================================
   MERGED STYLESHEET
   Combines:
     - respondent-subpages.css  → numbered "ccb-steps" + components
     - timeline.css             → horizontally-scrolling rail timeline*/
button.btn:hover, button.btn:focus, input[type="button"].btn:hover, input[type="button"].btn:focus, input[type="submit"].btn:hover, input[type="submit"].btn:focus, a.btn:not(.tooltip-link):hover, a.btn:not(.tooltip-link):focus {
  text-decoration: none;
  background-color: #002347 !important;
  border-color: #002347 !important;
  color: #fff;
}
button.btn:active, input[type="button"].btn:active, input[type="submit"].btn:active, a.btn:not(.tooltip-link):active {
  border-style: inset;
  border-color: #BFBFBF !important;
  background-color: #000000 !important;
}
button.btn:focus, input[type="button"].btn:focus, input[type="submit"].btn:focus, a.btn:not(.tooltip-link):focus {
  z-index: 3;
  outline: 4px solid #0076AD !important;
}
/* Breadcrumb on #EEF1F8 background */
.breadcrumb {
  background-color: #EEF1F8 !important;
}
.breadcrumb a {
  color: #3C6EB9 !important;
}
.breadcrumb a:hover, .breadcrumb a:focus {
  color: #1A4480 !important;
  text-decoration: none !important;
}
/* Current page (non-link) */
.breadcrumb .breadcrumb-item.active, .breadcrumb [aria-current="page"] {
  color: #162E51 !important;
  font-weight: 600 !important;
}
.breadcrumb .breadcrumb-item.active a {
  text-decoration: none !important;
}
.top-half {
  background-color: #eef1f8;
  border-bottom: 1px solid #95989f;
  margin-top: -15px;
}
.top-half a {
  color: #3C6EB9 !important;
  text-decoration: underline;
}
.top-half a:hover {
   color: #1A4480 !important;
   text-decoration: none;
}
.border-blue {
  border: solid 2px #bec9e6 !important;
  background-color: #EEF1F8;
}
.bg-light-blue {
  background-color: #eef1f8;
}
.table-primary {
  background-color: #4476C1;
  color: white;
}
.ccb-overview li {
  font-size: 1.25rem;
}
.info-card {
  background-color: #eef1f8; /* Light blue background */
  padding: 2rem;
  border-radius: 0.25rem;
  transition: background-color 0.3s ease;
  height: 100%;
}
.info-card:hover {
  background-color: #d8e6f5; /* Slightly darker on hover */
}
.info-card hr {
  border: none;
  height: 3px;
  width: 30px;
  background-color: #6c7a89;
  margin: 0 0 0.5rem 0;
}
.info-card a {
  font-weight: 600;
  color: #2a6ebd;
  margin: 0;
  font-size: 1.1rem;
}
.info-alert {
  display: flex;
  align-items: stretch;
  background-color: #e2ecf8;
  border-radius: .25rem;
  overflow: hidden;
}
.info-alert .icon-pane {
  background-color: #eef1f8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .75rem .875rem;
  flex: 0 0 auto;
}
.info-alert .icon {
  background-color: #000;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.info-alert .text-pane {
  padding: 1rem;
  flex: 1 1 auto;
  white-space: normal;
  margin-bottom: 0;
}
.info-alert .text-pane a {
  color: #276bba;
  font-weight: 600;
  text-decoration: underline !important;
}
.info-alert .text-pane a:hover {
  color: #1A4480 !important;
  text-decoration: none !important;
}
.alert-info .icon {
  background-color: #000;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.table-warning {
    background-color: #f1efe3 !important;
}
.table-warning tbody + tbody, .table-warning td, .table-warning th, .table-warning thead th {
  border-color: #dee2e6;
  border-bottom-width: 2px;
} 
ul.check-list {
  padding-left: 1.25rem;
}
ul.check-list > li {
  list-style: none;
  position: relative;
  padding-left: 1.5em;
  margin-bottom: .5rem;
}
ul.check-list > li::before {
  content: '\2713';
  font-weight: 900;
  position: absolute;
  left: 0;
  color: black;
}
.sub-bullets {
  padding-left: 5em;
}
.steps-wrap {
  margin-top: .75rem;
}
.ccb-steps {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.ccb-step .step-body .step-title ~ ul > li {
  list-style: disc;
}
.ccb-step {
  --gap: 2.5rem;
  margin-bottom: var(--gap);
  position: relative;
}
.ccb-step:last-child {
  margin-bottom: 0;
}
.step-row {
  display: flex;
  align-items: stretch;
}
.step-col {
  position: relative;
  flex: 0 0 56px;
  width: 56px;
  margin-right: 18px;
}
.step-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #2f67b2;
  color: #fff;
  font-weight: 700;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 5px;
}
.step-body {
  flex: 1 1 auto;
  min-width: 0;
}
.step-title {
  margin-top: .70rem;
  margin-bottom: 1rem;
  font-weight: 500;
}
.step-body p {
  margin-bottom: 1rem;
}
.step-rule {
  width: 100%;
  height: 4px;
  background: #a5b5c2;
  border: 0;
  margin: 1.25rem 0;
}
.alert {
  color: black;
}
.alert-warning {
  background: #f1efe3;
  border: none;
}
/* Vertical connector centered on the step circle */
.step-col::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 56px;
  bottom: calc(var(--gap) * -1);
  width: 2px;
  background: #e0e6f4;
}
.ccb-step:last-child .step-col::after {
  display: none;
}
@media (max-width: 575.98px) {
  .step-row {
    flex-direction: row;
  }
}
.cal-timeline {
  margin-top: .75rem;
}
.cal-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cal-item {
  --icon: 42px;
  --gap: 2px;
  position: relative;
  margin-bottom: var(--gap);
}
.cal-item:last-child {
  margin-bottom: 0;
}
.cal-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cal-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cal-col {
  position: relative;
  flex: 0 0 var(--icon);
  width: var(--icon);
  /* margin-right removed — the gap on .cal-row handles spacing */
}

.cal-body {
  flex: 1;
}
.cal-icon {
  width: var(--icon);
  height: var(--icon);
  display: block;
}
.cal-col::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: var(--icon);
  bottom: calc(var(--gap) * -1);
  border-left: 2px dotted #d7dbe4;
}
.cal-item:last-child .cal-col::after {
  display: none;
}
.cal-col.no-line::after {
  border-left: none;
}
.cal-body ol {
  list-style-position: inside;
  padding-left: 0;
  margin-left: 0;
}
@media (max-width: 575.98px) {
  .cal-sep {
    margin-left: calc(var(--icon) + 14px);
  }
}
@media (max-width: 767.98px) {
  .no-border-sm {
    border-left: 0 !important;
  }
  .no-pl-sm {
    padding-left: 0 !important;
  }
  .no-pl-sm {
    padding-left: 0 !important;
  }
}
/* =============================================================
   SR-ONLY (from timeline.css)
   ============================================================= */
.sr-only:not(.sr-only-focusable) {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.alert-primary {
  background-color: #e2ecf8;
  border-left: none;
}
/* ============================================
   BASE ACCORDION STRUCTURE
   ============================================ */

.accordion > .card > .card-header {
    text-align: left;
    font-weight: bold;
}
.accordion > .card > .card-header:hover {
    color: inherit !important;
}
.accordion > .card:not(:last-of-type) {
    border-bottom: 1px solid #ddd;
}
.accordion .card {
    border: 1px solid #ddd;
    border-radius: 0;
    margin-bottom: 5px;
}

/* Default grey accordion: black border + divider (mirrors blue/yellow) */
.accordion:not(.accordion-blue):not(.accordion-yellow):not(.accordion-dark-blue) .card {
    border: 1px solid #000000 !important;
}
.accordion:not(.accordion-blue):not(.accordion-yellow):not(.accordion-dark-blue) .card-header {
    border: none;
}
.accordion:not(.accordion-blue):not(.accordion-yellow):not(.accordion-dark-blue) .accordion-button {
    border-bottom: 1px solid #000000;
}

/* Header wrapper */
.accordion .card-header {
    background-color: #eaebec;
    padding: 0;
}

/* Heading element inside the header */
.accordion .accordion-heading {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* Toggle button */
.accordion-button {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Text section */
.accordion .header-text {
    flex: 1;
    padding: 10px 20px;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;
    color: #000;
}

/* Icon slot in front of the card heading */
.accordion .header-heading-icon {
    display: flex;
    align-self: center;
    padding: 10px 0 10px 20px;
}
.accordion .header-heading-icon + .header-text {
    padding-left: 0px;
}

/* Toggle icon section */
.accordion .header-icon {
    background-color: #bbbdc0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    color: white;
}

/* Remove default caret */
.accordion .card-header::after {
    display: none;
}

/* Create toggle icon using ::before */
.accordion .header-icon::before {
    content: "+";
    font-size: 28px;
    line-height: 1;
    font-weight: bolder;
    position: relative;
    top: -2px;
}

/* Toggle minus icon when expanded */
.accordion-button[aria-expanded="true"] .header-icon::before {
    content: "−";
}

/* Body */
.accordion .card-body {
    background-color: #fff;
    padding: 20px;
    font-size: 15px;
    line-height: 1.6;
}

/* Links */
.accordion a {
    color: #2A6BBF;
}


/* Focus, hover, and click ring for accordion toggles */
.accordion .accordion-button:focus-visible::after,
.accordion .accordion-button:hover::after,
.accordion .accordion-button:active::after {
    content: "";
    position: absolute;
    inset: 0;
    outline: 3px solid #000000;
    outline-offset: -3px;
    pointer-events: none;
    z-index: 2;
}

/* ============================================
   BLUE VERSION
   ============================================ */

.accordion.accordion-blue .card {
    border: 1px solid #4a5fa5 !important;
}
.accordion.accordion-blue .card-header {
    background-color: #e7eaf5;
    border: none;
}
.accordion.accordion-blue .accordion-button {
    border-bottom: 1px solid #4a5fa5;
}
.accordion.accordion-blue .header-heading-icon {
    width: 55px;
    height: 30px;
    background-image: url("/claimant/infringement/images/CCBdotGov_2025Refresh_ClaimantPages_IconChecklist.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.accordion.accordion-blue ul.check-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.accordion.accordion-blue ul.check-list > li {
    position: relative;
    padding: 5px 0 5px 20px;
    border-bottom: 1px dotted #2A6BBF;
}
.accordion.accordion-blue ul.check-list > li::before {
    content: '✓';
    font-weight: 1000;
    position: absolute;
    left: 0;
    top: 5px;
    color: #2A6BBF;
}

/* ============================================
   YELLOW VERSION
   ============================================ */

.accordion.accordion-yellow .card {
    border: 1px solid #8a8154 !important;
}
.accordion.accordion-yellow .card-header {
    background-color: #f1efe3;
    border: none;
}
.accordion.accordion-yellow .accordion-button {
    border-bottom: 1px solid #8a8154;
}
.accordion.accordion-yellow .header-heading-icon {
    width: 55px;
    height: 30px;
    background-image: url("/claimant/infringement/images/CCBdotGov_2025Refresh_ClaimantPages_IconTips.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.accordion.accordion-yellow ul.tips-list {
    margin: 0;
    padding-left: 15px;
    list-style: disc !important;
}
.accordion.accordion-yellow ul.tips-list > li {
    position: relative;
    padding: 4px 0 4px 5px;
    line-height: 1.6;
}

/* ============================================
   DARK BLUE VERSION
   ============================================ */

.accordion.accordion-dark-blue .card {
    border: 1px solid #2f67b2 !important;
}
.accordion.accordion-dark-blue .card-header {
    background-color: #2f67b2;
    position: relative;
    border: none;
}
.accordion.accordion-dark-blue .header-text {
    color: #fff;
}
.accordion.accordion-dark-blue .header-icon {
    background-color: #7c9fd3;
}
.card-banner {
  background-color: #4378bb;
  padding: 0.75rem;
  color: #fff;
  text-align: left;
}
.card-banner-title {
  font-weight: 700;
  font-size: 1rem;
  display: block;
}
.card-body-blue {
  padding-top: 1.25rem;
  border: 1px solid #4378bb;
  background-color: #fff;
  position: relative;
}
.card-link-list {
  list-style: none;
  padding-right: 1rem;
  padding-left: 1rem;
}
.card-illustration {
  position: absolute;
  bottom: 0rem;
  right: -.9rem;
  width: 103px;
}
.card-illustration img {
  width: 100%;
  height: auto;
}
.card-title {
  font-weight: 600;
  font-size: 1.25rem;
  color: #386ab5;
}
.border-blue {
  border: 2px solid #4378bb;
}

/* =============================================================
   SCROLLING RAIL TIMELINE  (from timeline.css)
   ============================================================= */
/* Desktop / default */ :root {
  --rail-color: #4476C1;
  --panel-bg: #eef2fa;
  --card-border: #4476C1;
  --rule: #D9E8F6;
  --step-w: 150px;
  --gap: 24px;
  --pad-top: 70px;
}

/* Numbered variant — redefine dot diameter inside the numbered timeline
   so the connector math and dot size stay in sync */
.timeline-numbered { --dot-d: 18px; }

.timeline-wrap {
  border-radius: .5rem;
  padding: 1.25rem 1rem 1rem;
  position: relative;
}
.timeline-alert {
  --tl-alert-before: 6;
  --tl-alert-span: 6;
  margin-top: .75rem;
  display: block;
  width: calc(var(--tl-alert-span) * var(--step-w) + (var(--tl-alert-span) - 1) * var(--gap));
  margin-left: calc(var(--tl-alert-before) * (var(--step-w) + var(--gap)));
}
.alert-warning.timeline-alert {
  background-color: #f1efe3;
  border: 1px solid #f1efe3;
  color: #142e50;
  padding: .75rem 1rem;
  margin-bottom: 0;
}
.timeline-scroller {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .5rem;
  position: relative;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
}
.timeline-scroller::-webkit-scrollbar {
  height: 0;
}
.timeline-steps {
  position: relative;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.timeline-steps::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 19px;
  border-top: 2px solid var(--rail-color);
  border-radius: 2px;
}
.timeline-step {
  position: relative;
  flex: 0 0 var(--step-w);
  width: var(--step-w);
  padding-top: 50px;
  margin-right: var(--gap);
  scroll-snap-align: start;
}
.timeline-step:last-child {
  margin-right: 0;
}
@media (min-width: 768px) {
  .timeline-scroller > .timeline-steps {
    position: relative;
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  .timeline-scroller > .timeline-steps > li.timeline-step {
    display: block;
    align-items: initial;
    margin: 0 var(--gap) 0 0;
  }
  .timeline-scroller > .timeline-steps > li.timeline-step:last-child {
    margin-right: 0;
  }
  .timeline-scroller > .timeline-steps::before {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    top: 19px;
    border-top: 2px solid var(--rail-color);
    border-radius: 2px;
  }
  .timeline-scroller > .timeline-steps > .timeline-step {
    position: relative;
    flex: 0 0 var(--step-w);
    width: var(--step-w);
    padding-top: 50px;
    margin-right: var(--gap);
    scroll-snap-align: start;
  }
}
#timelineSteps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.timeline-step:focus {
  outline: 3px solid #3f77c5;
  outline-offset: -3px;
  border-radius: .25rem;
}
.timeline-card p:focus, .timeline-card .strong:focus {
  outline: 3px solid #3f77c5;
  outline-offset: 0px;
  border-radius: .25rem;
}
.rail-dot, .card-dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: var(--rail-color);
  border-radius: 50%;
  z-index: 2;
  box-sizing: content-box;
}
.rail-dot {
  top: 10px;
  width: 20px;
  height: 20px;
}
/* Numbered variant only — desktop */
.timeline-numbered .rail-dot {
  top: 6px;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3a66a8;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
}
.card-dot {
  top: calc(var(--pad-top) - 23px);
  width: 6px;
  height: 6px;
}
.connector {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: calc(var(--pad-top) - 36px);
  background: var(--rail-color);
  z-index: 1;
}
.left-end-cap {
  position: absolute;
  top: 13px;
  left: 1.5%;
  transform: translateX(-50%);
  width: 2px;
  height: calc(var(--pad-top) - 56px);
  background: var(--rail-color);
  z-index: 1;
}
.right-end-cap {
  position: absolute;
  top: 13px;
  left: 99%;
  transform: translateX(-50%);
  width: 2px;
  height: calc(var(--pad-top) - 56px);
  background: var(--rail-color);
  z-index: 1;
}
.timeline-card {
  background: #fcfdff;
  border: 1px solid var(--card-border);
  padding: 1rem 1.3rem;
  text-align: center;
  min-height: 430px;
}
.timeline-card-heading {
  font-weight: 800;
  color: #142e50;
  margin-bottom: .25rem;
}
.card-toplevel {
  height: 135px;
}
.card-middlelevel {
  height: 118px;
}
.light-border {
  border-bottom: 6px solid var(--rule);
  margin-bottom: .5rem;
}
.timeline-card p {
  margin-bottom: .35rem;
}
.timeline-card p.strong {
  font-weight: 700;
}
.timeline-scrollbar {
  padding: .25rem .5rem;
  margin-top: 2rem;
}
.sb-track {
  --arrow: 40px;
  --gutter: 0px;
  --thumb-w: 160px;
  --thumb-gap: 6px;
  --inset: calc(var(--gutter) + var(--arrow) + var(--thumb-gap));
  position: relative;
  height: 26px;
  width: 100%;
  background: #6e7790;
  border-radius: 50rem;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .18), 0 0 0 1px rgba(90, 99, 122, .8);
  contain: layout paint;
}
.sb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--arrow);
  height: 26px;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  z-index: 3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: background .12s ease, box-shadow .12s ease;
}
.sb-arrow:hover {
  background: #002347;
  color: #fff;
}
.sb-arrow:active {
  background: #00346b;
  color: #fff;
}
button.sb-arrow:focus-visible {
  background: #002347;
  color: #fff;
  outline: 2px solid #fff;
  outline-offset: -4px;
}
.sb-left {
  left: var(--gutter);
  border-radius: 50rem 0 0 50rem;
}
.sb-right {
  right: var(--gutter);
  border-radius: 0 50rem 50rem 0;
}
.sb-thumb {
  position: absolute;
  left: var(--inset);
  top: 50%;
  transform: translateY(-50%) translateX(var(--sb-x, 0)) translateZ(0);
  width: var(--thumb-w);
  height: 24px;
  background: #fff;
  border-radius: 50rem;
  cursor: grab;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 0 0 1px rgba(70, 79, 102, .8), inset 0 1px 0 rgba(255, 255, 255, .9);
  will-change: transform;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.sb-thumb:active {
  cursor: grabbing;
  outline: 2px solid #002347;
  outline-offset: 2px;
}
.sb-thumb:focus-visible {
  outline: 2px solid #002347;
  outline-offset: 2px;
}
/* Mobile ≤ 767.98px */
@media (max-width: 767.98px) {
  :root {
    --rail-x: 18px;
    --dot-d: 16px;
    --card-dot-d: 6px;
    --conn-h: 2px;
    --card-border-w: 2px;
    --pad-left: 40px;
    --alert-w: 112px;
    --col1-min: 88px;
    --col2-min: 88px;
    --col3-min: 88px;
    --cell-min-h: 104px;
    --sep-w: 6px;
    --sep1: 0.365;
    --sep2: 0.6825;
    --card-pad-v: 1rem;
    --card-pad-h: .75rem;
    --focus-ring: 3px;
    --focus-pad: 0px;
  }
  .timeline-step {
    position: relative;
  }
  .timeline-step:focus {
    outline: none;
  }
  .timeline-step:focus::after, .timeline-step:focus-within::after {
    content: "";
    position: absolute;
    pointer-events: none;
    top: calc(-1 * var(--focus-pad));
    bottom: calc(-1 * var(--focus-pad));
    left: calc(var(--rail-x) - var(--focus-pad));
    right: calc(-1 * var(--focus-pad));
    border: var(--focus-ring) solid #3f77c5;
    border-radius: .25rem;
  }
  .timeline-scroller {
    overflow-x: hidden;
    overflow-y: visible;
    padding-bottom: 0;
    scrollbar-width: none;
  }
  .timeline-scroller::-webkit-scrollbar {
    height: 0;
  }
  .timeline-scrollbar {
    display: none;
  }
  .timeline-wrap {
    padding-left: 0;
  }
  .timeline-steps {
    display: block;
    width: 100%;
  }
  .timeline-steps > li.timeline-step {
    display: block;
    align-items: initial;
    flex: none;
    width: auto;
    padding-left: var(--pad-left);
    padding-top: 0;
    margin: 0 0 var(--gap) 0;
  }
  .timeline-steps::before {
    content: "";
    position: absolute;
    left: var(--rail-x);
    top: 0;
    bottom: 0;
    border-left: 2px solid var(--rail-color);
    border-top: none;
  }
  .timeline-step {
    flex: none;
    width: auto;
    padding-left: var(--pad-left);
    padding-top: 0;
    margin: 0 0 var(--gap) 0;
    position: relative;
  }
  .rail-dot {
    position: absolute;
    left: var(--rail-x);
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--dot-d);
    height: var(--dot-d);
  }
  /* Numbered variant — mobile (≤767.98px) */
  .timeline-numbered .rail-dot {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    font-size: 1.2rem;
  }
  .connector {
    position: absolute;
    top: calc(50% - var(--conn-h) / 2);
    left: calc(var(--rail-x) + var(--dot-d) / 3);
    height: var(--conn-h);
    width: calc(var(--pad-left) - (var(--rail-x) + var(--dot-d) / 2) - max(var(--card-border-w), 0px) / 2);
    background: var(--rail-color);
    transform: none;
  }
  /* Numbered variant — span connector from the 18px dot's edge to the card edge */
  .timeline-numbered .connector {
    left: calc(var(--rail-x) + 9px);
    width: calc(var(--pad-left) - var(--rail-x) - 9px);
  }
  .card-dot {
    position: absolute;
    top: calc(50% - var(--card-dot-d) / 2);
    left: calc(var(--pad-left) - var(--card-dot-d) / 5);
    width: var(--card-dot-d);
    height: var(--card-dot-d);
  }
  .left-end-cap {
    position: absolute;
    top: 0%;
    width: 11px;
    height: 2px;
    background: var(--rail-color);
    left: calc(var(--rail-x) + 1px);
    transform: translateX(-50%);
  }
  .right-end-cap {
    position: absolute;
    top: 99%;
    width: 11px;
    height: 2px;
    background: var(--rail-color);
    left: calc(var(--rail-x) + 1px);
    transform: translateX(-50%);
  }
  .timeline-card {
    display: grid;
    grid-template-columns: minmax(var(--col1-min), 1.15fr) minmax(var(--col2-min), 1fr) minmax(var(--col3-min), 1fr);
    align-items: stretch;
    text-align: center;
    min-height: auto;
    padding: var(--card-pad-v) var(--card-pad-h);
    box-sizing: border-box;
    position: relative;
    font-size: 1rem;
    line-height: 1.35;
  }
  .timeline-card-heading {
    font-size: 1rem;
    line-height: 1.2;
  }
  .timeline-card p {
    margin-bottom: .4rem;
  }
  .timeline-card .card-toplevel, .timeline-card .card-middlelevel, .timeline-card .card-bottomlevel {
    min-width: 0;
    min-height: var(--cell-min-h);
    padding: var(--card-pad-v) calc(var(--card-pad-h) + 0px);
    box-sizing: border-box;
    overflow-wrap: normal;
    word-break: keep-all;
    white-space: normal;
    hyphens: manual;
    -webkit-hyphens: manual;
  }
  .card-toplevel {
    margin-left: -15px;
  }
  .timeline-card .light-border {
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: var(--card-pad-v);
  }
  .card-toplevel {
    align-content: center;
  }
  .card-middlelevel {
    height: auto;
    align-content: center;
  }
  .card-bottomlevel {
    align-content: center;
  }
  .timeline-card::before, .timeline-card::after {
    content: "";
    position: absolute;
    top: var(--card-pad-v);
    bottom: var(--card-pad-v);
    width: var(--sep-w);
    background: #e2ecf8;
    pointer-events: none;
  }
  .timeline-card::before {
    left: calc(var(--card-pad-h) + (100% - 2*var(--card-pad-h)) * var(--sep1));
    transform: translateX(-50%);
  }
  .timeline-card::after {
    left: calc(var(--card-pad-h) + (100% - 2*var(--card-pad-h)) * var(--sep2));
    transform: translateX(-50%);
  }
  .timeline-card p.strong {
    grid-column: 3;
    font-weight: 700;
    align-self: center;
    margin: 0;
    overflow-wrap: normal;
    word-break: keep-all;
  }
  .timeline-card .card-bottomlevel:empty {
    min-height: var(--cell-min-h);
  }
  .timeline-wrap {
    padding-right: calc(var(--alert-w) + 10px);
  }
  .timeline-alert {
    position: absolute;
    right: 0;
    left: auto;
    width: var(--alert-w);
    margin: 0;
    padding: .75rem .75rem 1rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 0;
    pointer-events: none;
  }
  .timeline-alert .tl-alert-label {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    white-space: normal;
    text-align: center;
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: manual;
    position: absolute;
    top: 50%;
  }
  .timeline-card-heading {
    font-weight: 700;
  }
  .no-pl-md {
    padding-left: 0 !important;
  }
}
/* Phones ≤ 575.98px: vertical timeline + 3-column cards */
@media (max-width: 575.98px) {
  :root {
    --pad-left: 8px;
    --col1-min: 87px;
    --col2-min: 87px;
    --col3-min: 87px;
    --cell-min-h: 108px;
    --rail-x: 9px;
    --dot-d: 16px;
    --conn-h: 2px;
    --card-dot-d: 5px;
    --rail-color: #4476C1;
    --panel-bg: #eef2fa;
    --card-border: #4476C1;
    --rule: #D9E8F6;
    --step-w: 190px;
    --gap: 25.5px;
    --pad-top: 70px;
    --alert-w: 40px;
  }
  .timeline-scroller {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding-bottom: 0 !important;
  }
  .timeline-scrollbar {
    display: none !important;
  }
  .timeline-steps {
    display: block !important;
    width: 100% !important;
  }
  .timeline-steps::before {
    content: "";
    position: absolute;
    left: var(--pad-left);
    top: 0;
    bottom: 0;
    border-left: 2px solid var(--rail-color);
    border-top: 0;
    border-radius: 0;
  }
  .timeline-step {
    flex: none;
    width: auto;
    padding-left: 20px !important;
    margin-left: 0 !important;
    padding-top: 0;
    margin: 0 0 var(--gap) 0;
    position: relative;
  }
  .rail-dot {
    position: absolute;
    left: var(--rail-x);
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--dot-d);
    height: var(--dot-d);
  }
  /* Numbered variant — phones (≤575.98px) */
  .timeline-numbered .rail-dot {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    font-size: .6rem;
  }
  .connector {
    top: calc(50% - var(--conn-h) / 2);
    left: 10px;
    transform: none;
    height: 2px;
    width: 11px;
    background: var(--rail-color);
  }
  /* Numbered variant — start the stub past the 18px dot so it doesn't run under the numeral */
  .timeline-numbered .connector {
    left: 18px;
    width: 4px;
  }
  .card-dot {
    position: absolute;
    top: calc(50% - var(--card-dot-d) / 2);
    left: calc(var(--pad-left) - var(--card-dot-d) / 5);
    width: var(--card-dot-d);
    height: var(--card-dot-d);
  }
  /* Numbered variant — move card-dot to the connector endpoint (card edge), clear of the numeral */
  .timeline-numbered .card-dot {
    left: 20px;
  }
  .left-end-cap {
    position: absolute;
    top: 0;
    width: 11px;
    height: 2px;
    background: var(--rail-color);
    left: calc(var(--rail-x) + 0px);
    transform: translateX(-50%);
  }
  .right-end-cap {
    position: absolute;
    top: 99%;
    width: 11px;
    height: 2px;
    background: var(--rail-color);
    left: calc(var(--rail-x) + 0px);
    transform: translateX(-50%);
  }
  .timeline-card {
    display: grid !important;
    grid-template-columns: minmax(var(--col1-min), 1.15fr) minmax(var(--col2-min), 1fr) minmax(var(--col3-min), 1fr);
    align-items: stretch;
    text-align: center !important;
    padding: 10px 5px 10px 5px;
    min-height: auto;
    position: relative;
    box-sizing: border-box;
    font-size: 1rem;
    line-height: 1.35;
    width: 100% !important;
  }
  .timeline-card .light-border {
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: .5rem;
  }
  .timeline-card .card-toplevel, .timeline-card .card-middlelevel, .timeline-card .card-bottomlevel {
    min-width: 0;
    min-height: var(--cell-min-h);
    box-sizing: border-box;
    word-break: keep-all;
    overflow-wrap: normal;
    white-space: normal;
    hyphens: none;
    -webkit-hyphens: none;
  }
  .timeline-card .card-toplevel {
    border-right: 6px solid #e2ecf8;
    padding: 0;
  }
  .timeline-card .card-middlelevel {
    border-right: 6px solid #e2ecf8;
    padding: 0;
  }
  .timeline-card .card-bottomlevel {
    border-right: 0;
    padding: 0;
  }
  .card-toplevel {
    margin-left: -5px;
  }
  .card-bottomlevel {
    margin-left: 2px;
  }
  .timeline-card::before, .timeline-card::after, .timeline-card .card-toplevel::after, .timeline-card .card-middlelevel::after {
    display: none !important;
    content: none !important;
  }
  .timeline-card-heading {
    font-size: 1rem;
    padding-right: 25px;
    padding-left: 25px;
  }
  .timeline-card p {
    padding-right: 10px;
    padding-left: 10px;
  }
  .timeline-card p.strong {
    grid-column: 3;
    font-weight: 600;
    align-self: center;
    word-break: keep-all;
    overflow-wrap: normal;
  }
  .timeline-wrap {
    padding: 0 3rem 0 .2rem;
  }
  .timeline-alert {
    position: absolute !important;
    right: 0;
    left: auto;
    width: var(--alert-w);
    height: 100%;
    margin: 0;
    padding: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    pointer-events: none;
    font-size: 1rem;
  }
  .timeline-alert .tl-alert-label {
    writing-mode: vertical-lr !important;
  }
  .col-md-6.no-pl-sm {
    padding-left: 0 !important;
  }
}

@media (max-width: 445px) {
  .timeline-card {
    display: grid !important;
    grid-template-columns: minmax(var(--col1-min), 1.15fr) minmax(var(--col2-min), 1fr) minmax(var(--col3-min), 1fr);
    align-items: stretch;
    text-align: center !important;
    padding: 10px 5px 10px 5px;
    min-height: auto;
    position: relative;
    box-sizing: border-box;
    font-size: .85rem;
    line-height: 1.35;
    width: 100% !important;
  }
  .timeline-card-heading {
    font-size: .85rem;
    padding-right: 25px;
    padding-left: 25px;
  }
  .timeline-card p {
    padding-right: 10px;
    padding-left: 10px;
  }
  .timeline-card p.strong {
    grid-column: 3;
    font-weight: 600;
    align-self: center;
    word-break: keep-all;
    overflow-wrap: normal;
  }
  .timeline-wrap {
    padding: 0 3rem 0 .2rem;
  }
  .timeline-alert {
    position: absolute !important;
    right: 0;
    left: auto;
    width: var(--alert-w);
    height: 100%;
    margin: 0;
    padding: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    pointer-events: none;
    font-size: .85rem;
  }
}
@media (max-width: 390px) {
  .timeline-card {
    font-size: .70rem;
    line-height: 1.35;
    width: 100% !important;
  }
  .timeline-card-heading {
    font-size: .70rem;
    padding-right: 15px;
    padding-left: 15px;
  }
  .timeline-card p {
    padding-right: 10px;
    padding-left: 10px;
  }
  .timeline-wrap {
    padding: 0 3rem 0 .2rem;
  }
  .timeline-alert {
    font-size: .80rem;
  }
}
@media (max-width: 991.98px) {
  .no-pl-lg {
    padding-left: 0 !important;
  }
}
.info-alert a {
  color: #276bba !important; /* darker blue */
}

.info-alert a:hover,
.info-alert a:focus {
  color: #162e51; /* a touch darker on interaction */
}