html {
    font-size: 16px;
    margin:0;
    padding:0;
    width: 100%;
    height:100%;
    overflow-x: hidden!important;
    scroll-behavior: smooth;
    font-optical-sizing: auto;
    font-style: normal;
    font-family: "Open Sans", sans-serif;
  }
  
  body {
    margin:0;
    overflow-x: hidden;
    padding:0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .interior {
      width: 100%;
  }
  
  a {
    text-decoration: none;
    transition: all 200ms ease-out;
  }
  
  
  p {
    margin: 0;
    padding: 0;
    font-size:1.2rem;
  }

  h2 {
    font-size:2.2rem;
    font-weight: 500;
  }
  h2 strong {
    font-weight: 800;
  }
  
  .flex {
    display: flex;
  }
  
  .jCenter {
    justify-content: center;
  }
  
  .aCenter {
    align-items: center;
  }
  
  .center_center {
      align-items: center;
      justify-content: center;
  }
  
  .rowDirect {
    flex-direction: row;
  }
  
  .columnDirect {
    flex-direction: column;
  }
  
  #playerStatsLink {
    display: none!important;
  }
  
div[contenteditable="false"] {
  width:100%;
}
table#homepageContentTable {
  display: none;
}

  :root {
    --color-one:#FFFFFF;
    --color-two:#C21313;
    --color-three:#000000;
    --color-four:#CDCBCB;
    --color-five:#5B7DB1;
    --color-six:#FFCD34;
    --rail-base: rgba(204,32,32,.30);
  }

  .heading {
    font-family: "Poppins", sans-serif;
  }

  .subHeading {
    font-style: italic;
  }

/* ---------------------------- Main Content ------------------------------*/
.main {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative; /* Important for absolute positioning inside */
  }

  .homeBanner {
    width:100%;
    background-image: url("https://app.salesdrip.com/users/myteam45743/Media1168.webp");
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 60rem;
  }

  .homeBannerOverlay {
    width:100%;
    height: 60rem;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 100;
    position: absolute;
  }

  .homeBannerContent {
    width: 100%;
    height: 100%;
    justify-content:center;
    align-items:flex-end;
    z-index: 200;
  }

  .heroContent {
    width: 50%;
    min-width: 30rem;
  }

  .heroContent h1 {
    color: var(--color-one);
    font-size: 4rem;
    font-weight: 400;
    line-height: 5rem;
    margin: 0;
    max-width: 36rem;
}

.heroContent strong {
  font-weight: 800;
}

.heroContent p {
  color: var(--color-one);
  font-weight: 100;
  line-height: 2rem;
  font-size: 1.5rem;
  max-width: 60%;
  margin: 2.5rem 0;
}

.heroAction {
  width: 100%;
  gap: 2rem;
}

.heroAction a {
  font-weight: 700;
  font-size: 1.5rem;
  padding: .5rem 1.5rem;
  color:var(--color-one);
  border: 2px solid var(--color-one);
  transition: .4s;
  background-image: linear-gradient(180deg, var(--color-two), var(--color-two));
  background-size: 0% 100%;
  font-weight: 700;
  cursor: pointer;
  background-repeat: no-repeat;
}

.heroAction a:hover {
  background-size: 100% 100%;
  border-color: var(--color-two);
}

.heroAction a.active {
  background-size: 100% 100%;
  border-color: var(--color-two);
}

.heroAction a.active:hover {
  background-color: var(--color-one)!important;
  border-color: var(--color-three);
  background-image: none;
  color: var(--color-two);
}

/* ---- Bulletproof Logo Carousel (drop-in) ---- */
.heroCarousel{
  --gap: 5rem;                 /* spacing between logos */
  --logo-h: clamp(26px, 5vw, 52px);
  --px-per-sec: 60;            /* speed (pixels per second) */
  padding: .75rem 0;
  width: 100%;
    position: absolute;
    top: 52rem;
    align-self: stretch;
  
}
.heroCarousel .logo-viewport{
  overflow: hidden;
  position: relative;
}
.heroCarousel .logo-track{
  display: flex;
  align-items: center;
  gap: var(--gap);
  will-change: transform;
  animation-name: heroMarquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: var(--duration, 20s); /* set by JS */
}
.heroCarousel:hover .logo-track,
.heroCarousel:focus-within .logo-track{
  animation-play-state: paused;
}
/* programmatic pause (used by JS when offscreen) */
.heroCarousel.is-paused .logo-track{
  animation-play-state: paused;
}

.heroCarousel .logo{ flex: 0 0 auto; }
.heroCarousel .logo img{
  height: var(--logo-h);
  width: auto;
  display: block;
  filter: grayscale(1) opacity(.85);
  transition: transform .2s ease, filter .2s ease, opacity .2s ease;
}
.heroCarousel .logo img:hover{
  filter: none; opacity: 1; transform: scale(1.04);
}

.heroCarousel{ width:100%; align-self:stretch; }
.heroCarousel .logo-viewport{ width:100%; }



@keyframes heroMarquee{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(var(--move, -50%),0,0); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .heroCarousel .logo-track{
    animation: none !important;
    transform: none !important;
  }
}

/* FULL-BLEED, FIXED HEIGHT ROW */
.videoBlock{
  display:flex;
  align-items:stretch;
  gap:0;
  height:40rem;                          /* required height */
  width:100vw;                           /* full page width */
  margin-left:calc(50% - 50vw);          /* flush to left edge even inside centered wrapper */
  padding:0;
}

/* LEFT COLUMN — no margins/padding; fills row height */
.homeVideo{
  flex:0 0 50%;
  position:relative;
  overflow:hidden;
  margin:0;
  padding:0;
  height:100%;
}

/* RIGHT COLUMN */
.videoBlockContent{
  flex:1 1 50%;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-left:4rem;                      /* your gutter on the right side only */
}

/* VIMEO: force true “cover” by sizing to 16:9 width against 100% height */
.homeVideo iframe{
  position:absolute;
  top:50%;
  left:50%;
  height:100%;                            /* fills .homeVideo height */
  width:177.78%;                          /* 16:9 cover math */
  transform:translate(-50%, -50%);        /* centered cropping */
  border:0;
}


a.tcwButton {
  display: flex;
  justify-content: center;
  align-items:center;
  width: 12rem;
  font-weight: 700;
  font-size: 1.5rem;
  padding: .5rem 1.5rem;
  color:var(--color-one);
  border: 2px solid var(--color-one);
  transition: .4s;
  background-image: linear-gradient(180deg, var(--color-two), var(--color-two));
  background-size: 0% 100%;
  font-weight: 700;
  cursor: pointer;
  background-repeat: no-repeat;
}

a.tcwButton:hover {
  background-size: 100% 100%;
  border-color: var(--color-two);
}
a.tcwButton.active {
  background-size: 100% 100%;
  border-color: var(--color-two);
}
a.tcwButton.active:hover {
  background-color:var(--color-one)!important;
  background-image:none;
  color: var(--color-two);
} 

.videoBlockContent p, .videoBlockContent h2  {
  width:90%;
  max-width: 50rem;
}

.tcwQuote {
  width: 100%;
  height: 20rem;
  margin:2rem;
}

.tcwQuote span {
  color: var(--color-two);
  margin-bottom: 1.5rem;
}

.tcwQuote p {
  margin: 0 2rem;
  font-size: 2rem;
}

.tcwStory h2 {
  text-align: center;
  font-weight: 800;
  font-size: 3rem;
}

.tcwStory {
  width: 100%;
  margin-top:4rem;
}

.storyButtons {
  gap: 2rem;
}

.storyButtons a.storyButton.active:hover {
color: var(--color-three);
}

.storyButtons a.storyButton.active {
  color: var(--color-one);
  }

.storyButtons a.storyButton {
  border-color:var(--color-two)!important;
  color: var(--color-three);
  font-size: 1.5rem;
}

.tcwStory h3 {
  font-size: 1.5rem;
  margin: .5rem 0;
}


.tcwSplit {
  width: 100%; 
  margin-top: 2rem;
}

.tcwSplit img {
  width: 50%;
  max-width: 30rem;
  margin-right: 1rem;
}

.storyContent {
  width:50%;
}

/* --- Stats Section --- */
.stats {
  margin: 8rem 0;
  background: var(--bg);
  width: 100%;
}
.stats__inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  text-align: center;
}

.stat__number {
  display: flex;       /* ensures tight control */
  align-items: baseline;
  font-size: 6rem; 
  font-weight: 800;
  color: var(--color-two);
  justify-content: center;
}

.stat__number .aftertext--large {
  font-size: 2em;      /* keep it same height */
  margin-left: 0.05em; /* smaller than before */
}

.stat__number .aftertext {
  font-size: 0.5em;
  font-weight: 700;
  white-space: nowrap;
  margin-left: 0.15em; /* tighten '& Counting' spacing */
}

.stat__label {
  margin-top: 10px;
  font-size: clamp(18px, 3vw, 28px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.2;
}
.stat__label span {
  display: block;
}

.tcwCareers {
  width: 100%;
  height: 50rem;
  align-items:center;
}

.careersContent {
  width: 50%;
  margin: 0 3rem 10rem 3rem;
}

.careersImg {
  width: 50%;
  display: flex;
  align-items:flex-end;
  justify-content: flex-end;
  height: 100%;
  background-image: url(https://app.salesdrip.com/users/myteam45743/Media1171.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 80% 10%;
}

.careerSVG {
  position: absolute;
  height: 160px;
  right: -100px;
}


/* ---------- Pill Nav with Sliding Background ---------- */
.solutionsNav{
  position: relative;
  gap: 1rem;
  height: 6rem;
  padding: .5rem;
  border-radius: 30px;
  background: #d9d9d9;
  margin-bottom: 3rem;
  overflow: hidden;
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  margin: 0 auto 3rem;
  box-sizing: border-box;               /* ensures slider corners clip nicely */
}

.tcwSolution{
  position: relative;
  z-index: 1;                     /* keep text above the slider */
  padding: .6rem 1.1rem;
  border: 0;
  background: transparent;
  border-radius: 1.4rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: #2b2b2b;
  white-space: nowrap;
}

.tcwSolution.active{
  color: #fff;                    /* white text on red slider */
}

/* the red sliding background */
.solutionsNav__slider{
  position: absolute;
  top: .5rem;                     /* match container padding */
  left: .5rem;
  height: calc(100% - 1rem);      /* container height minus top/bottom pad */
  width: 0;
  background: var(--color-two);
  border-radius: 1.6rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.12) inset, 0 4px 10px rgba(0,0,0,.08);
  transition: transform .30s ease, width .30s ease;
  will-change: transform, width;
  z-index: 0;
}

/* ---------- Content styles (yours, slightly tightened) ---------- */
.solutionContent{ display:none; gap:2rem; align-items:center; }
.solutionContent.active{ display:flex; }
.solutionContent img{ width:50%; border-radius:5px; box-shadow:0 4px 10px rgba(0,0,0,.08); }
.solutionContent h3{ font-weight:600; font-size:2.4rem; margin-bottom:1rem; max-width:20rem; }
.solutionContent p{ font-size:1.2rem; max-width:30rem; }

.tcwSolutions h2{ text-align:center; margin-bottom:2rem; }
a.solutionButton{
  background-color: var(--color-three);
  color:var(--color-one);
  border:2px solid var(--color-two)!important;
  font-size:1.1rem;
  padding:.7rem 1.4rem; border-radius:2rem; text-decoration:none;
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  .solutionsNav__slider{ transition: none; }
}



/* ---------- Partners Section ---------- */
.tcwPartners {
  background-color: var(--color-three);
  width: 100%;
  padding: 4rem 0;
  margin-top: 5rem;
}

.tcwPartners h2 {
  color: var(--color-one);
  font-weight: 800;
  max-width:1300px;
  width: 100%;
}

.partnerCarousel{
  --gap: 2rem;
  position: relative;
  margin: 2rem 3rem 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  flex-direction: column;
}

.partnerCarousel.one-per .partnerCard{ 
  flex: 0 0 100% !important;  
}

.partnerTrack{
  display: flex;
  gap: var(--gap);
  will-change: transform;
  transform: translateX(0);
  transition: transform .45s ease;
}


.partnerCard{
  flex: 0 0 calc((100% - var(--gap) * 2) / 3);
  color: #fff;
  border-radius: 14px;
  max-width:1300px;
  padding: 1.25rem;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  min-height: 320px;
}

.partnerCard blockquote {
  font-size:1.8rem;
}

p.partnerSince {
  font-weight: 800;
  font-size:1.5rem;
  margin: 3rem 0;
}


.partnerCarousel.one-per .partnerTrack{ 
  gap: 0;                  
}

.partnerCarousel.one-per .partnerCard{
  flex: 0 0 100%;          
  max-width: 1300px;       
  margin-inline: auto;     
}

@media (max-width: 1400px){
  .partnerCarousel.one-per{ padding-inline: 1rem; }
}


.partnerCard__text{ display: flex; flex-direction: column; }
.partnerLogo{ width: 180px; height: auto; opacity: .9; }
.partnerName{ margin: 0 0 .5rem; letter-spacing: .02em; color: #ff3b30; font-weight: 700; }
.partnerSince{ opacity: .75; margin: .5rem 0 1rem; font-size: .95rem; }
blockquote{ margin: 0 0 1rem; line-height: 1.5; }
.author{ opacity: .7; font-size: .9rem; margin-top: auto; }

.partnerCard__media{
  display: grid;
  place-items: center;
  border-radius: 10px;
  overflow: hidden;
}
.partnerCard__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.partnerControls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width:100%;
  max-width:1300px;
}

.partnerBtn{
  width:44px; height:44px; border-radius:50%;
  margin:.5rem;
  border:2px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.8);
  color:#000;                 /* icon color via currentColor */
  display:grid; place-items:center;
  cursor:pointer;
  backdrop-filter:blur(3px);
  transition:background .2s ease, transform .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.partnerBtn .icon{
  width:20px; height:20px; display:block;
  pointer-events:none;       /* don’t steal clicks/drags */
}

.partnerBtn:hover{ background:rgba(255,255,255,.95); }
.partnerBtn:active{ transform:scale(.98); }



.partnerBtn:hover{ background: rgba(255,255,255,.18); transform: translateY(-1px); }
.partnerBtn:active{ transform: translateY(0); }

/* One-card view: slide = full viewport, content capped at 1300px */
.partnerCarousel.one-per .partnerTrack{
  gap: 0;  /* no spacing between slides */
}

.partnerCarousel.one-per .partnerCard{
  flex: 0 0 100%;       /* slide width = viewport width */
  width: 100%;
  max-width: none;      /* override earlier 1300px cap on the slide itself */
  margin: 0;            /* don't center the slide with margins */

  /* Center inner content and cap at 1300px without an extra wrapper */
  box-sizing: border-box;
  padding-left:  max(16px, calc((100% - 1300px) / 2));
  padding-right: max(16px, calc((100% - 1300px) / 2));
}

@media (max-width: 1200px){
  .partnerCard{ flex: 0 0 calc((100% - var(--gap)) / 2); }
}
@media (max-width: 700px){
  .partnerCarousel{ margin: 1rem 1rem 0; }
  .partnerCard{ flex: 0 0 100%; grid-template-columns: 1fr; }
  .partnerLogo{ width: 140px; }
}

.tcwMessage {
  margin: 4rem 0;
}

.tcwMessage h2 {
  text-align:center;
  font-weight:800;
  max-width: 1000px;
}

footer {
  width: 95%;
  margin-top: 2rem;
}

.footerContent {
  width: 100%;
  border-top: 2px solid #aaa;
  justify-content: space-between;
  align-items: center;
}

.social-icons {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 6px;
}

.icon-link {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #c81818;                /* <- your TCW red; change as needed */
  text-decoration: none;
}

.social-icon {
  width: 32px; height: 32px;
  display: block;
  /* optional subtle shadow like the reference */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.15));
}

.icon-link:hover   { color: #a71212; }
.icon-link:active  { transform: translateY(1px); }

header {
  width: 95%;
  position: absolute;
  z-index: 500;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header img.headLogo {
  width: 9rem;
}

header a.tcwMenuButton {
  font-weight: 700;
  font-size: 1.5rem;
  padding: .5rem 1.5rem;
  color: var(--color-one);
  border: 2px solid var(--color-one);
  transition: .4s;
  font-weight: 700;
  cursor: pointer;
  background-color: var(--color-two);
}
header a.tcwMenuButton:hover {
  background-color:var(--color-one);
  color:var(--color-two);
}





#nav {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  gap: 13%;
  width: 810px;
}

#nav > li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove any marker bullets across browsers */
#nav > li::marker{ content: "" !important; }

/* Ensure no custom separators show up */
#nav > li + li::before{
  content: none !important;
  display: none !important;
}

/* Links: no underline, override Salesdrip inline styles */
#nav a {
  color: #f2f2f2 !important;
  text-decoration: none !important;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: .2px;
}

/* Keep hover clean too */
#nav a:hover,
#nav a:focus{
  text-decoration: none !important;
  color:var(--color-two)!important;
}

/* Remove any “active” underline/border styles */
#nav a.activeNav{
  text-decoration: none !important;
  border: 0 !important;
}

.footerMenu ul#nav {
  width: 100%;
  display: flex;
  justify-content: space-around;
  gap: unset;
  align-items: center;
}

.footerMenu #nav a {
  color: var(--color-three)!important;
}

footer .footerMenu #nav > li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
footer .footerMenu #nav > li::marker{ content: "" !important; }

/* --- Hide Salesdrip placeholders so they don't push content --- */
/* fallback: first item in your markup is the spans-only li */
footer .footerMenu #nav > li:first-child{ display: none !important; }

/* robust: hide ANY li that doesn't have a direct <a> */
@supports selector(:has(> a)){
  footer .footerMenu #nav > li:not(:has(> a)){ display: none !important; }
}

/* optional: belt-and-suspenders for known placeholders by id */
@supports selector(:has(*)){
  footer .footerMenu #nav > li:has(> span#homepageMainLink),
  footer .footerMenu #nav > li:has(> span#calendarMainLink),
  footer .footerMenu #nav > li:has(> span#eventsListLink),
  footer .footerMenu #nav > li:has(> span#storeLink){ display:none !important; }
}

/* links: clean (no underline) */
footer .footerMenu #nav a {
  color: #111;
  text-decoration: none !important;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .2px;
}
footer .footerMenu #nav a:hover,
footer .footerMenu #nav a:focus{
  text-decoration: none !important;
  color: var(--color-two)!important;
}

/* --- Hard-disable any dropdowns (not allowed) --- */
footer .footerMenu #nav li ul{ display:none !important; visibility:hidden !important; }
footer .footerMenu #nav li:hover > ul,
footer .footerMenu #nav li:focus-within > ul{ display:none !important; }

/* small screens: tighten spacing */
@media (max-width: 720px){
  footer .footerMenu #nav{ gap: 40px; }
}

.footerMenu {
  padding: 3rem 0;
}

.contactBanner {
  width: 100%;
  background-color: var(--color-three);
  height: 60rem;
}

.contactForm {
  width: 50%;
}
.contactVideo {
  width: 50%;
}

.contactForm h2 {
  color: var(--color-one);
  font-weight:800;
  margin-top: 6rem;
}
.contactForm p {
  color: var(--color-one);
}
/* Split the banner 50/50 and let both sides stretch */
.contactBanner{
  display: flex !important;
  align-items: stretch !important;   /* override any center_center vertical centering */
  justify-content: center;
  gap: 32px;                         /* optional spacing between halves */
  width: 100%;
}

.contactBanner .contactVideo,
.contactBanner .contactForm{
  flex: 1 1 50%;
  max-width: 50%;
  min-width: 0;                      /* prevent overflow */
}

/* 50/50 split still */
.contactBanner {
  display: flex;
  align-items: stretch !important;
  width: 100%;
  max-width: 1300px;
}
.contactBanner .contactVideo,
.contactBanner .contactForm{
  flex:1 1 50%;
  max-width:50%;
  min-width:0;
}

.contactBG {
  background-color: var(--color-three);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 5rem;
}

/* --- square video with safe crop --- */
.contactBanner .contactVideo{
  position:relative;
  aspect-ratio:1 / 1;   /* make the column itself a perfect square */
  overflow:hidden;
}

/* Fill & crop: assume 16:9 source, so make the iframe wider than tall */
.contactBanner .contactVideo > iframe{
  position:absolute;
  top:50%;
  left:50%;
  height:100%;
  width:207.78%;          /* 16/9 = 1.7778 -> covers the square */
  transform:translate(-50%,-50%);
  border:0;
  display:block;
}

/* Stack on small screens (optional) */
@media (max-width: 960px){
  .contactBanner{ flex-direction:column; }
  .contactBanner .contactVideo,
  .contactBanner .contactForm{ max-width:100%; }
}

.contactAccount h2 {
  font-size: 5rem;
  color: var(--color-two);
}


.contactAccount .subHeading {
  color: var(--color-two);
  font-size:1.5rem;
}


.contactAccount { position: relative; }
.contactAccount h2 strong { color: var(--tcw-red); }

/* ===== Timeline (Accountability flow) ===== */

/* global knobs */
.acctFlow__list{
  --left-col: 110px;       /* wider column for dots/rail (more space from text) */
  --col-gap: 36px;         /* space between rail column and content */
  --row-gap: 72px;         /* vertical space between steps (more height) */
  --rail-base: #f4c9c9;    /* pale rail */
  --rail-red:  var(--color-two);  /* progress/dot red */
  --ring:      #f4c9c9;    /* dot ring */
}

/* container */
.acctFlow{
  position: relative;
  max-width: 980px;
  margin: 1.25rem auto 0;
  padding-left: 18px; /* room for curl svg on the far left */
}

/* decorative curl (thin & light; tweak here) */
.acctFlow__curl {
  position: absolute;
  left: -335px;
  top: -60px;
  width: 520px;
  height: 360px;
  pointer-events: none;
}
.acctFlow__curl{
  --curl-color: var(--color-two);
  --curl-width: 1px;        /* thinner stroke */
  --curl-opacity: 1;      /* lighter tint */
}
.acctFlow__curl path{
  stroke: var(--curl-color);
  stroke-width: var(--curl-width);
  opacity: var(--curl-opacity);
}

/* list scaffold */
.acctFlow__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  row-gap: var(--row-gap);
}

/* each row = (rail column) + (content) */
.acctFlow__step{
  /* JS sets --p: 0 → 1 while scrolling */
  --p: 0;
  display: grid;
  grid-template-columns: var(--left-col) 1fr;
  column-gap: var(--col-gap);     /* MORE spacing from rail to text */
  align-items: start;
  position: relative;
}

/* ===== RAIL =====
   Each step draws one segment. It extends by row-gap to meet the next dot.
   The last step draws no segment (so it won't extend past the last dot). */
.acctFlow__rail{
  position: absolute;
  left: calc(var(--left-col) / 2);  /* center of the left column */
  top: 0;
  height: calc(100% + var(--row-gap));
  width: 3px;
  transform: translateX(-50%);
  background: var(--rail-base);
  border-radius: 2px;
}
.acctFlow__step:last-child .acctFlow__rail{
  height: 0;                 /* STOP here: no tail beyond last dot */
  background: transparent;
}
.acctFlow__rail::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rail-red);
  transform-origin: top;
  transform: scaleY(var(--p));
  border-radius: 2px;
  transition: transform 120ms linear;
}
.acctFlow__step:last-child .acctFlow__rail::after{
  transform: scaleY(0);      /* ensure no red visible on the last step */
}

/* ===== DOT ===== */
.acctFlow__dot{
  --sz: 24px;                             /* larger dots */
  position: absolute;
  left: calc(var(--left-col) / 2);
  top: 0;
  width: var(--sz);
  height: var(--sz);
  transform: translate(-50%, -50%);       /* center dot on rail start */
  border-radius: 50%;
  pointer-events: none;
}
/* conic-gradient pie fill */
.acctFlow__dot::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(var(--rail-red) calc(var(--p) * 360deg), #ffffff 0);
  box-shadow: 0 0 0 4px var(--ring) inset; /* thicker ring to suit bigger dot */
  transition: transform 120ms linear;      /* noop for conic; used by fallback */
}
/* fallback for very old browsers */
@supports not (background: conic-gradient(#000 0 0)){
  .acctFlow__dot{ background: #fff; box-shadow: 0 0 0 4px var(--ring) inset; }
  .acctFlow__dot::before{
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--rail-red);
    transform: scale(var(--p));
    transform-origin: 50% 50%;
    transition: transform 120ms linear;
  }
}

/* ===== CONTENT ===== */
.acctFlow__body{
  grid-column: 2;
  color: #111;
}
.acctFlow__body h3{
  margin: 0 0 .25rem 0;
  font: 700 1.4rem/1.25 "Poppins", system-ui, -apple-system, Arial, sans-serif;
}
.acctFlow__num{
  margin: 0 0 .5rem 0;
  font: italic 600 1.05rem/1.1 "Poppins", system-ui, Arial, sans-serif;
  color: #222;
  opacity: .9;
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .acctFlow__list{ --left-col: 100px; --col-gap: 28px; --row-gap: 60px; }
}
@media (max-width: 720px){
  .acctFlow__list{ --left-col: 86px; --col-gap: 22px; --row-gap: 48px; }
  .acctFlow__dot{ --sz: 20px; }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .acctFlow__rail::after{ transition: none !important; }
  .acctFlow__dot::before{ transition: none !important; }
}



.movingTruckContent h2 {
  max-width: 45rem;
  font-size: 4rem
}

/* Moving truck scroll animation */
.movingTruck {
  position: relative;          /* hide the off-screen truck */
  --truck-p: 0;                  /* progress 0..1 – set by JS */
  --truck-start: 12vw;           /* where the truck starts (to the right) */
  --truck-end:  -38vw;           /* where it ends (further left) */
}

.mTruckWrap { width: 100%; }

.animatedTruck {
  will-change: transform;
  transform: translateX(
    calc(var(--truck-start) + (var(--truck-end) - var(--truck-start)) * var(--truck-p))
  );
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animatedTruck { transform: none !important; }
}