/** Shopify CDN: Minification failed

Line 2904:7 Unexpected "text("
Line 2926:139 Unterminated string token
Line 2931:6 Comments in CSS use "/* ... */" instead of "//"
Line 2933:296 Unterminated string token
Line 2954:45 Unexpected "{"
Line 2954:47 Expected identifier but found "'landing-page.css'"
Line 2955:0 Unexpected "{"
Line 2955:1 Unexpected "{"
Line 2955:7 Expected ":"
Line 2956:0 Unexpected "<"
... and 79 more hidden warnings

**/
/* =========================================================
   Courseware.com page styles converted from the CTM versions.
   Primary green: #3F8F4E
   Dark green:    #2D6F39
   Soft green:    #EAF6EC
   ========================================================= */

/* =========================================================

   CCDI PAGE (Light Courseware.com Style)

   Scoped so it won't affect other pages

   ========================================================= */



.cw-ccdi{

  --cw-accent: #3F8F4E;

  --cw-accent-dark: #2D6F39;

  --cw-accent-soft: #EAF6EC;



  --cw-text: #0D1321;

  --cw-muted: rgba(13, 19, 33, 0.70);

  --cw-muted-2: rgba(13, 19, 33, 0.50);



  --cw-border: rgba(10,20,40,0.08);

  --cw-border-strong: rgba(10,20,40,0.14);



  --cw-radius-lg: 22px;

  --cw-radius-md: 14px;

  --cw-radius-sm: 10px;



  --cw-shadow-soft: 0 18px 45px rgba(10, 20, 40, 0.08);

  --cw-shadow-card: 0 10px 24px rgba(10, 20, 40, 0.08);

}



/* Container */

.cw-ccdi .ccdi-container{

  width: min(1100px, 92vw);

  margin: 0 auto;

}



/* Eyebrow / headings */

.cw-ccdi .ccdi-eyebrow{

  text-align:center;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 1.8px;

  color: var(--cw-accent);

  margin-bottom: 10px;

  text-transform: uppercase;

}

.cw-ccdi .ccdi-h2{

  text-align:center;

  font-size: clamp(28px, 3.6vw, 40px);

  line-height: 1.15;

  margin: 0 0 10px 0;

  font-weight: 900;

}

.cw-ccdi .ccdi-sub{

  text-align:center;

  margin: 0 auto 34px;

  color: var(--cw-muted);

  font-size: 16px;

  max-width: 70ch;

}

.cw-ccdi .ccdi-accent{

  color: var(--cw-accent);

}



/* Buttons */

.cw-ccdi .ccdi-btn{

  display:inline-flex;

  align-items:center;

  gap: 10px;

  padding: 12px 22px;

  border-radius: 999px;

  font-weight: 900;

  font-size: 14px;

  text-decoration:none;

  transition: 0.2s ease;

  border: 1px solid transparent;

}

.cw-ccdi .ccdi-btn-primary{

  color: #fff;

  background: linear-gradient(180deg, var(--cw-accent), var(--cw-accent-dark));

  box-shadow: 0 10px 22px rgba(63, 143, 78, 0.18);

}

.cw-ccdi .ccdi-btn-primary:hover{

  transform: translateY(-1px);

}

.cw-ccdi .ccdi-btn-secondary{

  color: var(--cw-text);

  background: #fff;

  border-color: var(--cw-border);

}

.cw-ccdi .ccdi-btn-secondary:hover{

  border-color: var(--cw-border-strong);

}

.cw-ccdi .ccdi-btn-arrow{ font-size: 15px; }



/* Hero */

.cw-ccdi .ccdi-hero{

  padding: 70px 0 50px;

  background:

    /* radial-gradient(1000px 500px at 50% -10%, #fff, transparent 55%),

    linear-gradient(180deg, #F7F8FB, #FFFFFF 55%); */

  border-bottom: 1px solid var(--cw-border);

}

.cw-ccdi .ccdi-pill{

  display:flex;

  align-items:center;

  gap: 8px;

  padding: 8px 14px;

  border-radius: 999px;

  background: #fff;

  border: 1px solid var(--cw-border);

  font-size: 12px;

  font-weight: 800;

  color: var(--cw-muted);

  box-shadow: 0 6px 14px rgba(10,20,40,0.06);

}

.cw-ccdi .ccdi-pill-inline{

  box-shadow: none;

}

.cw-ccdi .ccdi-pill-spark{

  color: var(--cw-accent);

}

.cw-ccdi .ccdi-hero .ccdi-pill{

  margin: 0 auto 18px;

  display:flex;

  width: fit-content;

}



.cw-ccdi .ccdi-hero-title{

  text-align:center;

  font-size: clamp(40px, 5.6vw, 64px);

  line-height: 1.02;

  font-weight: 900;

  letter-spacing: -1px;

  margin: 0 0 14px 0;

}

.cw-ccdi .ccdi-hero-sub{

  text-align:center;

  color: var(--cw-muted);

  font-size: 17px;

  max-width: 70ch;

  margin: 0 auto 26px;

}

.cw-ccdi .ccdi-hero-cta{

  display:flex;

  justify-content:center;

  gap: 12px;

  flex-wrap: wrap;

  margin-bottom: 38px;

}



/* Stats */

.cw-ccdi .ccdi-stats{

  display:grid;

  grid-template-columns: repeat(3, minmax(0,1fr));

  gap: 14px;

  max-width: 720px;

  margin: 0 auto;

}

.cw-ccdi .ccdi-stat{

  text-align:center;

  padding: 16px 10px;

  border-radius: var(--cw-radius-md);

  background: #fff;

  border: 1px solid var(--cw-border);

  box-shadow: var(--cw-shadow-card);

}

.cw-ccdi .ccdi-stat-number{

  font-size: 30px;

  font-weight: 900;

  letter-spacing: -0.5px;

}

.cw-ccdi .ccdi-stat-label{

  font-size: 12.5px;

  color: var(--cw-muted-2);

  font-weight: 700;

}



/* Generic sections */

.cw-ccdi .ccdi-section{

  padding: 70px 0;

}

.cw-ccdi .ccdi-section-soft{

  /* background: linear-gradient(180deg, #F7F8FB, #FFFFFF); */

  border-top: 1px solid var(--cw-border);

  border-bottom: 1px solid var(--cw-border);

}



/* Services cards */

.cw-ccdi .ccdi-card-grid{

  display:grid;

  grid-template-columns: repeat(2, minmax(0,1fr));

  gap: 18px;

}

.cw-ccdi .ccdi-card{

  background: #fff;

  border: 1px solid var(--cw-border);

  border-radius: var(--cw-radius-lg);

  padding: 28px 26px;

  box-shadow: var(--cw-shadow-card);

  transition: 0.2s ease;

}

.cw-ccdi .ccdi-card:hover{

  border-color: var(--cw-border-strong);

  transform: translateY(-2px);

  background: #FFF4D6

}

.cw-ccdi .ccdi-icon-badge{

  width: 56px;

  height: 56px;

  border-radius: 14px;

  display:grid;

  place-items:center;

  background: linear-gradient(135deg, #65B96F, var(--cw-accent));

  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);

  margin-bottom: 18px;

}

.cw-ccdi .ccdi-icon-badge svg{

  width: 28px;

  height: 28px;

  fill: none;

  stroke: #fff;

  stroke-width: 1.7;

}

.cw-ccdi .ccdi-card-title{

  font-size: 22px;

  font-weight: 900;

  margin: 0 0 10px 0;

}

.cw-ccdi .ccdi-card-body{

  color: var(--cw-muted);

  font-size: 15px;

  line-height: 1.5;

  margin: 0 0 18px 0;

}

.cw-ccdi .ccdi-list{

  list-style: none;

  margin: 0 0 22px 0;

  padding: 0;

  display: grid;

  gap: 8px;

}



.cw-ccdi .ccdi-list li{

  position: relative;

  padding-left: 28px;

  color: var(--cw-muted);

  font-size: 14px;

  font-weight: 600;

}



/* Clean checkmark */

.cw-ccdi .ccdi-list li::before{

  content: "✓";

  position: absolute;

  left: 0;

  top: 0.05em;

  width: 18px;

  height: 18px;

  border-radius: 999px;

  display: grid;

  place-items: center;



  background: var(--cw-accent-soft);

  border: 1px solid var(--cw-border);

  color: var(--cw-accent);



  font-size: 12.5px;

  font-weight: 900;

  line-height: 1;

}

.cw-ccdi .ccdi-card-link{

  font-weight: 900;

  color: var(--cw-accent);

  text-decoration: none;

  font-size: 14px;

}

.cw-ccdi .ccdi-card-link:hover{

  text-decoration: underline;

}



/* Process */

.cw-ccdi .ccdi-process{

  display:grid;

  grid-template-columns: repeat(4, minmax(0,1fr));

  gap: 18px;

  margin-top: 24px;

}

.cw-ccdi .ccdi-process-step{

  background: #fff;

  border: 1px solid var(--cw-border);

  border-radius: var(--cw-radius-lg);

  padding: 26px 22px;

  box-shadow: var(--cw-shadow-card);

  text-align:center;

  position: relative;

}

.cw-ccdi .ccdi-step-dot{

  width: 34px;

  height: 34px;

  border-radius: 999px;

  background: var(--cw-accent);

  color: #fff;

  display:grid;

  place-items:center;

  font-size: 11px;

  font-weight: 900;

  position: absolute;

  top: -14px;

  left: 50%;

  transform: translateX(-50%);

  box-shadow: 0 8px 16px rgba(63,143,78,0.18);

}

.cw-ccdi .ccdi-step-icon{

  width: 80px;

  height: 80px;

  border-radius: 999px;

  border: 1px solid var(--cw-border);

  background: #fff;

  display:grid;

  place-items:center;

  margin: 10px auto 14px;

}

.cw-ccdi .ccdi-step-icon svg{

  width: 34px;

  height: 34px;

  fill: none;

  stroke: var(--cw-accent);

  stroke-width: 1.8;

}

.cw-ccdi .ccdi-process-step h4{

  font-size: 18px;

  font-weight: 900;

  margin: 0 0 8px 0;

}

.cw-ccdi .ccdi-process-step p{

  margin: 0;

  color: var(--cw-muted);

  font-size: 14px;

  line-height: 1.5;

}



/* CTA card */

.cw-ccdi .ccdi-cta-card{

  background: #fff;

  border: 1px solid var(--cw-border);

  border-radius: var(--cw-radius-lg);

  padding: clamp(26px, 3.5vw, 46px);

  box-shadow: var(--cw-shadow-soft);

  text-align:center;

}

.cw-ccdi .ccdi-cta-card .ccdi-pill{

  margin: 0 auto 16px;

  width: fit-content;

}

.cw-ccdi .ccdi-cta-divider{

  height: 1px;

  background: var(--cw-border);

  margin: 34px auto 18px;

  width: min(520px, 85%);

}

.cw-ccdi .ccdi-trust-title{

  font-size: 12px;

  font-weight: 800;

  display: flex;

    justify-content: center;

  color: var(--cw-muted-2);

  margin-bottom: 10px;

}

.cw-ccdi .ccdi-trust-tags{

  display:flex;

  justify-content:center;

  gap: 14px;

  flex-wrap: wrap;

}

.cw-ccdi .ccdi-trust-tags span{

  font-size: 12.5px;

  font-weight: 800;

  color: var(--cw-muted);

}

.cw-ccdi .ccdi-process-step{

  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;

}



.cw-ccdi .ccdi-step-icon{

  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;

}



.cw-ccdi .ccdi-step-icon svg{

  transition: stroke 0.2s ease;

}



/* Hover state on the whole step card */

.cw-ccdi .ccdi-process-step:hover{

  transform: scale(1.03);

  border-color: var(--cw-border-strong);

  box-shadow: 0 16px 34px rgba(10, 20, 40, 0.12);

}



/* When hovering the card, change the circle icon */

.cw-ccdi .ccdi-process-step:hover .ccdi-step-icon{

  background: var(--cw-accent);

  border-color: var(--cw-accent);

  transform: scale(1.04);

}



/* Make the icon strokes white on hover */

.cw-ccdi .ccdi-process-step:hover .ccdi-step-icon svg{

  stroke: #fff;

}

/* =========================================================

   MODAL

   ========================================================= */

.ccdi-modal{

  position: fixed;

  inset: 0;

  z-index: 9999;

  display: none;

}

.ccdi-modal.is-open{ display: block; }



.ccdi-modal-backdrop{

  position: absolute;

  inset: 0;

  background: rgba(10, 15, 30, 0.55);

  backdrop-filter: blur(6px);

}



.ccdi-modal-panel{

  position: relative;

  width: min(1040px, 94vw);

  max-height: 92vh;

  overflow: auto;

  margin: 4vh auto;

  background: #fff;

  border: 1px solid rgba(10,20,40,0.10);

  border-radius: 22px;

  box-shadow: 0 22px 60px rgba(10,20,40,0.18);

  padding: clamp(18px, 2.5vw, 28px);

}



.ccdi-modal-header{

  display:flex;

  align-items:center;

  justify-content: space-between;

  gap: 12px;

  margin-bottom: 10px;

}



.ccdi-modal-close{

  display:grid;

  place-items:center;

  width: 38px;

  height: 38px;

  border-radius: 10px;

  border: 1px solid rgba(10,20,40,0.10);

  background: #fff;

  font-size: 22px;

  line-height: 1;

  cursor: pointer;

}



/* Lock page scroll when modal open */

html.ccdi-lock, body.ccdi-lock{

  overflow: hidden !important;

}



/* =========================================================

   WIZARD (Light Courseware.com)

   Scoped by class names inside modal

   ========================================================= */



.gcw-wizard-wrap{

  --gcw-accent: #3F8F4E;

  --gcw-accent-dark: #2D6F39;

  --gcw-accent-soft: #EAF6EC;

  --gcw-glow: rgba(63, 143, 78, 0.18);



  --gcw-panel: rgba(255,255,255,0.98);

  --gcw-panel-2: rgba(255,255,255,0.98);



  --gcw-border: rgba(10,20,40,0.08);

  --gcw-border-strong: rgba(10,20,40,0.14);



  --gcw-text: #0D1321;

  --gcw-muted: rgba(13, 19, 33, 0.70);

  --gcw-muted-2: rgba(13, 19, 33, 0.50);



  --gcw-radius-lg: 22px;

  --gcw-radius-md: 14px;

  --gcw-radius-sm: 10px;



  --gcw-shadow-soft: 0 18px 45px rgba(10, 20, 40, 0.08);

  --gcw-shadow-card: 0 10px 24px rgba(10, 20, 40, 0.08);



  --gcw-focus: rgba(63, 143, 78, 0.18);

}



.gcw-wizard{

  width: min(980px, 100%);

  margin: 0 auto;

}



.gcw-hero{

  text-align:center;

  margin: 8px 0 18px;

}

.gcw-hero h1{

  margin: 0 0 10px 0;

  font-size: clamp(28px, 4.2vw, 40px);

  line-height: 1.08;

  font-weight: 900;

  letter-spacing: -0.6px;

}

.gcw-hero-white{ color: var(--gcw-text); display:block; }

.gcw-hero-red{ color: var(--gcw-accent); display:block; }

.gcw-hero p{

  margin:0;

  color: var(--gcw-muted);

  font-size: 15.5px;

}



.gcw-progress-wrap{

  margin: 10px auto 22px;

  width: min(820px, 95%);

}

.gcw-progress-labels{

  display:flex;

  justify-content: space-between;

  font-size: 12px;

  color: var(--gcw-muted-2);

  margin-bottom: 10px;

}

.gcw-step-label.is-active{

  color: var(--gcw-accent);

  font-weight: 800;

}

.gcw-progress-line{

  position: relative;

  height: 4px;

  background: rgba(10, 20, 40, 0.08);

  border-radius: 999px;

  overflow:hidden;

}

.gcw-progress-fill{

  position:absolute;

  left:0; top:0; bottom:0;

  background: linear-gradient(90deg, var(--gcw-accent), #FF5858);

  border-radius: 999px;

}



.gcw-panel{

  background: #FFFFFF;

  border: 1px solid var(--gcw-border);

  border-radius: var(--gcw-radius-lg);

  padding: clamp(20px, 3vw, 36px);

  box-shadow: var(--gcw-shadow-soft);

}



.gcw-step{ display:none; }

.gcw-step.is-active{ display:block; }



.gcw-panel-title{

  font-size: 20px;

  font-weight: 900;

  margin: 6px 0 22px;

}



/* Options */

.gcw-option-grid{

  display:grid;

  grid-template-columns: repeat(2, minmax(0,1fr));

  gap: 16px;

}



.gcw-option-card{

  position: relative;

  display:flex;

  gap: 16px;

  padding: 20px 20px;

  border-radius: var(--gcw-radius-md);

  background: #FFFFFF;

  border: 1px solid var(--gcw-border);

  box-shadow: var(--gcw-shadow-card);

  cursor: pointer;

  transition: 0.22s ease;

  min-height: 155px;

}

.gcw-option-card:hover{

  border-color: var(--gcw-border-strong);

  transform: translateY(-2px);

}

.gcw-option-card input{

  position:absolute;

  opacity:0;

  pointer-events:none;

}

.gcw-option-card:has(input:checked){

  border-color: rgba(221, 37, 37, 0.55);

  background: linear-gradient(180deg, var(--gcw-accent-soft), #FFFFFF);

  box-shadow: 0 0 0 2px rgba(221, 37, 37, 0.12), var(--gcw-shadow-card);

}



.gcw-option-icon{

  width: 52px;

  height: 52px;

  border-radius: 14px;

  display:grid;

  place-items:center;

  flex: 0 0 auto;

  background: linear-gradient(135deg, #65B96F, var(--gcw-accent));

  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);

}

.gcw-option-icon svg{

  width: 24px;

  height: 24px;

  fill: none;

  stroke: #FFFFFF;

  stroke-width: 1.7;

}



.gcw-option-title{

  font-size: 16px;

  font-weight: 900;

  line-height: 1.2;

}

.gcw-option-sub{

  font-size: 12.6px;

  color: var(--gcw-muted);

  line-height: 1.4;

  max-width: 26ch;

}



/* Forms */

.gcw-form-grid{

  display:grid;

  grid-template-columns: repeat(2, minmax(0,1fr));

  gap: 16px 20px;

}

.gcw-form-grid.two-col{ margin-top: 16px; }



.gcw-field label{

  display:block;

  font-size: 12.5px;

  color: var(--gcw-muted);

  margin-bottom: 8px;

  font-weight: 800;

}

.gcw-req{ color: var(--gcw-accent); }



.gcw-input-wrap input,

.gcw-input-wrap select,

.gcw-input-wrap textarea{

  width: 100%;

  color: var(--gcw-text);

  background: #FFFFFF;

  border: 1px solid var(--gcw-border);

  border-radius: var(--gcw-radius-sm);

  padding: 12px 14px;

  font-size: 13.8px;

  outline: none;

  transition: 0.2s ease;

}

.gcw-input-wrap textarea{

  resize: vertical;

  min-height: 130px;

}

.gcw-input-wrap input:focus,

.gcw-input-wrap select:focus,

.gcw-input-wrap textarea:focus{

  border-color: rgba(221, 37, 37, 0.45);

  box-shadow: 0 0 0 3px var(--gcw-focus);

}



/* Footer buttons */

.gcw-panel-footer{

  display:flex;

  align-items:center;

  justify-content: space-between;

  padding-top: 20px;

  margin-top: 18px;

  border-top: 1px solid var(--gcw-border);

}

.gcw-ghost-btn{

  display:inline-flex;

  align-items:center;

  gap: 10px;

  padding: 10px 12px;

  background: transparent;

  border: 1px solid transparent;

  color: var(--gcw-muted-2);

  font-size: 13.2px;

  font-weight: 800;

  border-radius: 10px;

  cursor: pointer;

  transition: 0.2s ease;

}

.gcw-ghost-btn:hover{

  color: var(--gcw-text);

  background: rgba(0,0,0,0.04);

  border-color: var(--gcw-border);

}

.gcw-ghost-btn:disabled{

  opacity: 0.45;

  cursor:not-allowed;

}

.gcw-primary-btn{

  display:inline-flex;

  align-items:center;

  gap: 12px;

  padding: 12px 22px;

  border-radius: 999px;

  background: linear-gradient(180deg, var(--gcw-accent), var(--gcw-accent-dark));

  border: 1px solid rgba(0,0,0,0.04);

  color: #fff;

  font-size: 13.5px;

  font-weight: 900;

  cursor: pointer;

  box-shadow: 0 10px 22px rgba(63, 143, 78, 0.18);

  transition: 0.2s ease;

}

.gcw-primary-btn:hover{

  transform: translateY(-1px);

}



.gcw-arrow-left, .gcw-arrow-right{

  font-size: 14px;

  opacity: 0.9;

}



/* Responsive */

@media (max-width: 1100px){

  .cw-ccdi .ccdi-process{ grid-template-columns: repeat(2, minmax(0,1fr)); }

}

@media (max-width: 980px){

  .cw-ccdi .ccdi-card-grid{ grid-template-columns: 1fr; }

  .gcw-option-grid{ grid-template-columns: 1fr; }

  .gcw-option-sub{ max-width: 100%; }

}

@media (max-width: 820px){

  .cw-ccdi .ccdi-stats{ grid-template-columns: 1fr; }

  .gcw-form-grid{ grid-template-columns: 1fr; }

}



  .ctm-launch-timeline{

    max-width: 980px;

    margin: 0 auto;

    padding: 48px 20px;

    color: #fff;

  }



  .ctm-launch-timeline__top{

    display:flex;

    justify-content:center;

    margin-bottom: 10px;

  }



  .ctm-pill{

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 14px;

    border-radius: 999px;

    background: #fff;

    border: 1px solid var(--cw-border);

    font-size: 12px;

    font-weight: 800;

    color: var(--cw-muted);

    box-shadow: 0 6px 14px rgba(10, 20, 40, 0.06);

  }



  .ctm-launch-timeline h2{

    text-align:center;

    font-size: clamp(28px, 3.6vw, 40px);

    line-height: 1.15;

    margin: 0 0 10px 0;

    font-weight: 900;

  }



  .ctm-timeline{

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 26px;

    padding: 10px 0;

  }



  /* center line */

  .ctm-timeline::before{

    content:"";

    position:absolute;

    left: 50%;

    top: 0;

    bottom: 0;

    width: 2px;

    transform: translateX(-50%);

    background: var(--cw-accent);

    opacity: .9;

  }



  .ctm-step{

    display:grid;

    grid-template-columns: 1fr 86px 1fr;

    align-items: center;

    min-height: 92px;

  }



  .ctm-step__content{

    max-width: 360px;

  }



  .ctm-step__day{

    display:inline-flex;

    align-items:center;

    padding: 4px 10px;

    font-size: 12px;

    border-radius: 999px;

    background: var(--cw-accent);

    border: 1px solid var(--cw-accent);

    margin-bottom: 10px;

  }



  .ctm-step__title{

    font-size: 20px;

    font-weight: 800;

    margin: 0 0 8px 0;

  }



  .ctm-step__desc{

    margin: 0;

    font-size: 14px;

    line-height: 1.6;

    color: var(--cw-muted);

  }



  .ctm-step__marker{

    position: relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width: 42px;

    height: 42px;

    margin: 0 auto;

    border-radius: 999px;

    background: var(--cw-accent);

    border: 2px solid var(--cw-accent);

    color: var(--cw-tex);

    font-weight: 800;

    font-size: 12px;

    letter-spacing: .08em;

    z-index: 1;

    box-shadow: 0 0 0 6px rgba(0,0,0,.25);

  }



  /* Left steps */

  .ctm-step--left .ctm-step__content{

    justify-self: end;

    text-align: right;

  }

  .ctm-step--left .ctm-step__spacer{ grid-column: 3; }



  /* Right steps */

  .ctm-step--right .ctm-step__content{

    grid-column: 3;

    justify-self: start;

    text-align: left;

  }

  .ctm-step--right .ctm-step__spacer{ grid-column: 1; }



  /* Mobile: line + markers on the left, all text on the right */

  @media (max-width: 820px){

  .cw-ccdi .ctm-timeline{

    padding-left: 10px;

  }



  /* move line to left rail */

  .cw-ccdi .ctm-timeline::before{

    left: 26px;

    transform: none;

  }



  /* step becomes a positioned block */

  .cw-ccdi .ctm-step{

    display:block;

    position: relative;

    padding-left: 78px; /* space for marker + line */

    min-height: 64px;

  }



  .cw-ccdi .ctm-step__marker{

    position:absolute;

    left: 17px;

    top: 14px;

    transform: translateX(-50%);

    margin: 0;

    width: 42px;

    height: 42px;

  }



  .cw-ccdi .ctm-step__marker::after{

    inset:-7px;

  }



  /* keep content readable and consistent */

  .cw-ccdi .ctm-step__content{

    max-width: none;

    box-shadow: none;     /* optional: remove card look on mobile */

    border: 0;            /* optional: remove border on mobile */

    padding: 0;           /* optional: remove padding on mobile */

    background: transparent;

  }



  .cw-ccdi .ctm-step__spacer{ display:none; }

}

/* =========================================================

   SAMPLE PACK FORM (CTM-CCDI SKIN)

   Paste at bottom of landing-page.css

   ========================================================= */



.cw-ccdi .download-section{

  padding: 0;

}



.cw-ccdi .download-container{

  width: min(1100px, 92vw);

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1.05fr 0.95fr;

  gap: 22px;

  align-items: start;

}



.cw-ccdi .download-form-wrapper{

  background: #fff;

  border: 1px solid var(--cw-border);

  border-radius: var(--cw-radius-lg);

  padding: clamp(18px, 2.5vw, 28px);

  box-shadow: var(--cw-shadow-soft);

}



.cw-ccdi #downloadForm{

  display: grid;

  gap: 12px;

}



.cw-ccdi .cw-input{

  width: 100%;

  color: var(--cw-text);

  background: #FFFFFF;

  border: 1px solid var(--cw-border);

  border-radius: var(--cw-radius-sm);

  padding: 12px 14px;

  font-size: 14px;

  outline: none;

  transition: 0.2s ease;

  appearance: none;

}



.cw-ccdi .cw-input::placeholder{

  color: rgba(13, 19, 33, 0.55);

  font-weight: 600;

}



.cw-ccdi .cw-input:focus{

  border-color: rgba(221, 37, 37, 0.45);

  box-shadow: 0 0 0 3px rgba(63, 143, 78, 0.18);

}



.cw-ccdi select.cw-input{

  background-image:

    linear-gradient(45deg, transparent 50%, rgba(13,19,33,0.55) 50%),

    linear-gradient(135deg, rgba(13,19,33,0.55) 50%, transparent 50%),

    linear-gradient(to right, transparent, transparent);

  background-position:

    calc(100% - 18px) calc(50% - 3px),

    calc(100% - 12px) calc(50% - 3px),

    calc(100% - 2.5rem) 0.5rem;

  background-size: 6px 6px, 6px 6px, 1px 1.5em;

  background-repeat: no-repeat;

  padding-right: 42px;

  line-height: 1.2;

}



/* state wrapper (your JS will toggle display inline) */

.cw-ccdi #state-wrapper{

  display: block;

}

.cw-ccdi #state-wrapper[style\*="display:none"]{

  display: none !important;

}



/* Submit button (recaptcha button) */

.cw-ccdi #downloadForm button[type="submit"]{

  width: 100%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;



  padding: 12px 22px;

  border-radius: 999px;



  font-weight: 900;

  font-size: 14px;



  color: #fff;

  background: linear-gradient(180deg, var(--cw-accent), var(--cw-accent-dark));

  box-shadow: 0 10px 22px rgba(63, 143, 78, 0.18);



  border: 1px solid rgba(0,0,0,0.04);

  cursor: pointer;

  transition: 0.2s ease;

}



.cw-ccdi #downloadForm button[type="submit"]:hover{

  transform: translateY(-1px);

}



.cw-ccdi #downloadForm button[type="submit"]:disabled{

  opacity: 0.6;

  cursor: not-allowed;

  transform: none;

}



/* Helper paragraph under the form */

.cw-ccdi .download-form-wrapper > p{

  margin: 14px 0 0;

  color: var(--cw-muted);

  font-size: 13.5px;

  line-height: 1.5;

}



/* Validation UX */

.cw-ccdi #downloadForm .cw-input:invalid{

  border-color: rgba(221, 37, 37, 0.25);

}



.cw-ccdi #downloadForm .cw-input:focus:invalid{

  border-color: rgba(221, 37, 37, 0.55);

  box-shadow: 0 0 0 3px rgba(63, 143, 78, 0.18);

}



/* Optional: if you add class "is-submitted" via JS on submit click */

.cw-ccdi #downloadForm.is-submitted .cw-input:invalid{

  border-color: rgba(221, 37, 37, 0.55);

  box-shadow: 0 0 0 3px rgba(221, 37, 37, 0.12);

}



/* Sales column (if you populate it later) */

.cw-ccdi .download-sales{

  /* background: linear-gradient(180deg, #F7F8FB, #FFFFFF); */

  border: 1px solid var(--cw-border);

  border-radius: var(--cw-radius-lg);

  padding: clamp(18px, 2.5vw, 28px);

  box-shadow: var(--cw-shadow-card);

  min-height: 240px;

}



@media (max-width: 980px){

  .cw-ccdi .download-container{

    grid-template-columns: 1fr;

  }

}



/* iOS: prevent zoom-on-focus by keeping inputs >= 16px on very small screens */

@media (max-width: 480px){

  .cw-ccdi .cw-input{

    font-size: 16px;

  }

}



/* =========================================================

   FAQ ACCORDION (CCDI)

   ========================================================= */



.cw-ccdi .ccdi-faq{

  padding: 10px 22px; /* overrides card padding for a cleaner accordion */

}



.cw-ccdi .ccdi-faq-item{

  border-bottom: 1px solid var(--cw-border);

  padding: 0;

}



.cw-ccdi .ccdi-faq-item:last-child{

  border-bottom: 0;

}



.cw-ccdi .ccdi-faq-item summary{

  list-style: none;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;



  padding: 18px 6px;

  cursor: pointer;



  font-weight: 900;

  font-size: 16px;

  color: var(--cw-text);

}



.cw-ccdi .ccdi-faq-item summary::-webkit-details-marker{

  display: none;

}



/* The “more info” indicator */

.cw-ccdi .ccdi-faq-item summary::after{

  content: "+";

  flex: 0 0 auto;



  width: 34px;

  height: 34px;

  border-radius: 999px;



  display: grid;

  place-items: center;



  border: 1px solid var(--cw-border);

  background: #fff;

  color: var(--cw-accent);



  font-weight: 900;

  font-size: 16px;



  transition: 0.2s ease;

}



.cw-ccdi .ccdi-faq-item[open] summary::after{

  content: "–";

  background: var(--cw-accent-soft);

  border-color: rgba(221, 37, 37, 0.25);

}



/* Answer block */

.cw-ccdi .ccdi-faq-body{

  padding: 0 6px 18px 6px;

  color: var(--cw-muted);

  font-size: 14.5px;

  line-height: 1.6;

}



/* Nice UX: hover + focus */

.cw-ccdi .ccdi-faq-item summary:hover{

  color: var(--cw-accent-dark);

}



.cw-ccdi .ccdi-faq-item summary:focus-visible{

  outline: 3px solid rgba(63, 143, 78, 0.18);

  outline-offset: 4px;

  border-radius: 12px;

}

/* Remove yellow hover/glow on the FAQ card */

.cw-ccdi .ccdi-faq.ccdi-card:hover{

  background: #fff;

  transform: none;

  border-color: var(--cw-border);

}


/* =========================================================
   COURSEWARE LIBRARY PAGE — reader-* layout
   ========================================================= */

/* Break the custom landing page out of Shopify's standard narrow page wrapper */
.page-width--narrow:has(.reader-page){
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page-width--narrow:has(.reader-page) > .main-page-title,
.page-width--narrow:has(.reader-page) .main-page-title{
  display: none !important;
}

.page-width--narrow:has(.reader-page) .rte{
  margin: 0 !important;
  max-width: none !important;
}

/* Keep the page predictable inside Shopify RTE styles */
.cw-ccdi.reader-page{
  width: 100%;
  max-width: none;
  overflow: hidden;
  color: var(--cw-text);
}

.cw-ccdi.reader-page *{
  box-sizing: border-box;
}

.cw-ccdi.reader-page img{
  max-width: 100%;
  height: auto;
}

/* Hero */
.cw-ccdi .reader-hero{
  padding: 54px 0 64px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 5%, rgba(63,143,78,.12), transparent 38%),
    linear-gradient(180deg, #f7fbf8 0%, #ffffff 78%);
  border-bottom: 1px solid var(--cw-border);
}

.cw-ccdi .reader-hero-pill{
  width: fit-content;
  margin: 0 auto 28px;
}

.cw-ccdi .reader-hero-title{
  max-width: 900px;
  margin: 26px auto 14px;
  font-size: clamp(40px, 5.5vw, 66px);
  line-height: 1.02;
  letter-spacing: -1.7px;
  font-weight: 900;
  text-align: center;
}

.cw-ccdi .reader-hero-sub{
  max-width: 760px;
  margin: 0 auto 26px;
  color: var(--cw-muted);
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.6;
  text-align: center;
}

.cw-ccdi .reader-hero-cta{
  margin-bottom: 34px;
}

.cw-ccdi .reader-stats{
  max-width: 790px;
}

/* Cover carousel */
.cw-ccdi .reader-cover-wrap{
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 14px;
  max-width: 940px;
  margin: 0 auto;
}

.cw-ccdi .reader-scene{
  overflow: hidden;
  padding: 14px 8px 22px;
}

.cw-ccdi .reader-carousel{
  display: flex;
  align-items: stretch;
  gap: 18px;
  width: max-content;
  transform: translateX(0);
  transition: transform .45s ease;
}

.cw-ccdi .reader-cover{
  width: 178px;
  min-width: 178px;
  min-height: 238px;
  padding: 20px 17px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  color: #fff;
  box-shadow: 0 16px 28px rgba(10,20,40,.15);
  transform: rotate(-1deg);
  border: 1px solid rgba(255,255,255,.24);
}

.cw-ccdi .reader-cover:nth-child(even){
  transform: rotate(1deg);
}

.cw-ccdi .reader-cover span{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  opacity: .9;
}

.cw-ccdi .reader-cover strong{
  display: block;
  font-size: 24px;
  line-height: 1.02;
  letter-spacing: -.4px;
}

.cw-ccdi .reader-cover em{
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  opacity: .9;
}

.cw-ccdi .cover-red{ background: linear-gradient(145deg,#3f8f4e,#255f31); }
.cw-ccdi .cover-blue{ background: linear-gradient(145deg,#315f80,#17364e); }
.cw-ccdi .cover-cream{ background: linear-gradient(145deg,#b89b63,#795f31); }
.cw-ccdi .cover-coral{ background: linear-gradient(145deg,#b96855,#824133); }
.cw-ccdi .cover-dark{ background: linear-gradient(145deg,#3b4450,#171c22); }
.cw-ccdi .cover-green{ background: linear-gradient(145deg,#4e9b66,#28623a); }
.cw-ccdi .cover-purple{ background: linear-gradient(145deg,#725d8f,#44345c); }
.cw-ccdi .cover-gold{ background: linear-gradient(145deg,#b88b36,#79591e); }

.cw-ccdi .reader-arrow{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--cw-border);
  background: #fff;
  color: var(--cw-text);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  box-shadow: var(--cw-shadow-card);
  transition: .2s ease;
}

.cw-ccdi .reader-arrow:hover{
  transform: translateY(-1px);
  border-color: var(--cw-accent);
  color: var(--cw-accent-dark);
}

/* Section helpers */
.cw-ccdi .reader-section-tight{
  padding-top: 56px;
  padding-bottom: 56px;
}

.cw-ccdi .reader-big-h2{
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}

.cw-ccdi .reader-pill-grid{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 980px;
  margin: 0 auto;
}

.cw-ccdi .reader-feature-grid{
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px;
}

/* Popular course cards */
.cw-ccdi .reader-course-grid{
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 18px;
}

.cw-ccdi .reader-course-card{
  background: #fff;
  border: 1px solid var(--cw-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--cw-shadow-card);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.cw-ccdi .reader-course-card:hover{
  transform: translateY(-3px);
  border-color: rgba(63,143,78,.32);
  box-shadow: 0 15px 32px rgba(10,20,40,.11);
}

.cw-ccdi .reader-course-image-wrap{
  aspect-ratio: 4 / 3;
  padding: 18px;
  background: #f7f9f8;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--cw-border);
}

.cw-ccdi .reader-course-image-wrap img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cw-ccdi .reader-course-card > strong{
  display: block;
  padding: 15px 16px 3px;
  font-size: 16px;
  line-height: 1.25;
  color: var(--cw-text);
}

.cw-ccdi .reader-course-card > span{
  display: block;
  padding: 0 16px 16px;
  color: var(--cw-muted-2);
  font-size: 12.5px;
  font-weight: 700;
}

.cw-ccdi .reader-center-cta{
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

/* Categories */
.cw-ccdi .reader-category-grid{
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 960px;
  margin: 0 auto;
}

.cw-ccdi .reader-category-grid span{
  padding: 11px 16px;
  border: 1px solid var(--cw-border);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 14px rgba(10,20,40,.05);
  color: var(--cw-muted);
  font-size: 13px;
  font-weight: 800;
}

/* Delivery split */
.cw-ccdi .reader-split{
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(36px,6vw,74px);
  align-items: center;
}

.cw-ccdi .reader-left-eyebrow,
.cw-ccdi .reader-left-h2{
  text-align: left;
}

.cw-ccdi .reader-left-h2{
  margin-bottom: 16px;
}

.cw-ccdi .reader-left-copy{
  color: var(--cw-muted);
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 22px;
}

.cw-ccdi .reader-large-list{
  margin-bottom: 26px;
}

.cw-ccdi .reader-large-list li{
  font-size: 15px;
}

.cw-ccdi .reader-preview-stack{
  position: relative;
  min-height: 330px;
}

.cw-ccdi .reader-doc-card{
  position: absolute;
  width: min(390px, 86%);
  padding: 26px 24px;
  border: 1px solid var(--cw-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(10,20,40,.12);
}

.cw-ccdi .reader-doc-card span{
  display: block;
  margin-bottom: 9px;
  color: var(--cw-accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.cw-ccdi .reader-doc-card strong{
  display: block;
  color: var(--cw-text);
  font-size: 17px;
  line-height: 1.45;
}

.cw-ccdi .reader-doc-card.doc-one{
  top: 8px;
  left: 3%;
  transform: rotate(-3deg);
}

.cw-ccdi .reader-doc-card.doc-two{
  top: 108px;
  right: 2%;
  transform: rotate(3deg);
}

.cw-ccdi .reader-doc-card.doc-three{
  top: 210px;
  left: 10%;
  transform: rotate(-1deg);
}

/* Testimonials */
.cw-ccdi .reader-testimonial-section{
  overflow: hidden;
}

.cw-ccdi .reader-testimonial-section .reader-hero-pill{
  margin-bottom: 16px;
}

.cw-ccdi .reader-marquee{
  width: 100%;
  overflow: hidden;
  margin-top: 30px;
  padding: 5px 0 10px;
}

.cw-ccdi .reader-marquee-track{
  display: flex;
  gap: 16px;
  width: max-content;
  animation: readerMarquee 42s linear infinite;
}

.cw-ccdi .reader-marquee-track:hover{
  animation-play-state: paused;
}

.cw-ccdi .reader-marquee article{
  width: 330px;
  min-width: 330px;
  padding: 22px;
  border: 1px solid var(--cw-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--cw-shadow-card);
  color: var(--cw-text);
  font-size: 15px;
  line-height: 1.55;
}

.cw-ccdi .reader-marquee article span{
  display: block;
  margin-top: 14px;
  color: var(--cw-muted-2);
  font-size: 12.5px;
  font-weight: 800;
}

@keyframes readerMarquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-35%); }
}

/* Sample form */
.cw-ccdi .reader-sample-pill{
  width: fit-content;
  margin: 0 auto 16px;
}

.cw-ccdi .reader-sample-sub{
  max-width: 760px;
}

.cw-ccdi .reader-download-section{
  max-width: 720px;
  margin: 0 auto;
}

.cw-ccdi .reader-download-container{
  width: 100%;
  max-width: 100%;
  grid-template-columns: 1fr;
}

.cw-ccdi .reader-checkbox-label{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--cw-muted);
  font-size: 12.5px;
  line-height: 1.45;
  cursor: pointer;
}

.cw-ccdi .reader-checkbox-label input{
  margin-top: 3px;
  accent-color: var(--cw-accent);
}

/* Fix leftover CTM visual colors */
.cw-ccdi .ccdi-card:hover{
  background: #f7fbf8;
}

.cw-ccdi .cw-input:focus{
  border-color: rgba(63,143,78,.48);
}

.cw-ccdi #downloadForm .cw-input:invalid{
  border-color: var(--cw-border);
}

.cw-ccdi #downloadForm .cw-input:focus:invalid{
  border-color: rgba(63,143,78,.48);
}

.cw-ccdi .ccdi-faq-item[open] summary::after{
  border-color: rgba(63,143,78,.26);
}

/* Responsive */
@media (max-width: 980px){
  .cw-ccdi .reader-course-grid{
    grid-template-columns: repeat(3,minmax(0,1fr));
  }

  .cw-ccdi .reader-split{
    grid-template-columns: 1fr;
  }

  .cw-ccdi .reader-preview-stack{
    max-width: 620px;
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 760px){
  .cw-ccdi .reader-hero{
    padding: 36px 0 48px;
  }

  .cw-ccdi .reader-cover-wrap{
    grid-template-columns: 38px minmax(0,1fr) 38px;
    gap: 6px;
  }

  .cw-ccdi .reader-arrow{
    width: 36px;
    height: 36px;
    font-size: 23px;
  }

  .cw-ccdi .reader-cover{
    width: 145px;
    min-width: 145px;
    min-height: 205px;
    padding: 16px 14px;
  }

  .cw-ccdi .reader-cover strong{
    font-size: 20px;
  }

  .cw-ccdi .reader-feature-grid{
    grid-template-columns: 1fr;
  }

  .cw-ccdi .reader-course-grid{
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .cw-ccdi .reader-left-eyebrow,
  .cw-ccdi .reader-left-h2{
    text-align: center;
  }
}

@media (max-width: 520px){
  .cw-ccdi .reader-course-grid{
    grid-template-columns: 1fr;
  }

  .cw-ccdi .reader-preview-stack{
    min-height: 390px;
  }

  .cw-ccdi .reader-doc-card{
    width: 90%;
  }

  .cw-ccdi .reader-doc-card.doc-one{ left: 2%; }
  .cw-ccdi .reader-doc-card.doc-two{ right: 1%; }
  .cw-ccdi .reader-doc-card.doc-three{ left: 4%; }

  .cw-ccdi .reader-marquee article{
    width: 280px;
    min-width: 280px;
  }
}

@media (prefers-reduced-motion: reduce){
  .cw-ccdi .reader-marquee-track{
    animation: none;
  }

  .cw-ccdi .reader-carousel,
  .cw-ccdi .reader-arrow,
  .cw-ccdi .reader-course-card{
    transition: none;
  }
}


Pasted text(20261001-134515).txt
Document

Pasted text (2)(20261001-134524).txt
Document

Pasted markdown (3).md
Document
I need to recreate two pages on another website we own. Here is the code for CTM and i need it for CW. I also added in the CSS that I know will need to be udpated to match theother brand

Worked for 1m 33s




I recreated both CTM pages as Courseware.com versions. The original pages use the CTM-scoped classes and CTM form styling, so I converted those to cw-ccdi / cw-input throughout, including the supporting CSS. 
 

I also changed the CTM red styling to a Courseware-style green palette and renamed the CSS variables so these pages can live separately from the CTM implementation. The original CSS was built around the CTM red values #DD2525, #B91D1D, and #FFE9EA. 

Here are the three ready-to-use files:

A couple of important changes I made: the license link now points to Courseware.com's live license page, which exists on the current site. 
 I also changed visible Corporate Training Materials references to Courseware.com and retained the existing Shopify course-image URLs because those assets can still be used from the other Shopify store.

One thing I deliberately did not change: the form still submits to:

https://admin.corporatetrainingmaterials.com/crm/process-download-ctm.php

I couldn't verify a separate process-download-cw.php endpoint. Since changing that blindly could break lead capture, I left the working CRM endpoint intact. Courseware.com does currently have a free-course lead form, so we can replace this with its exact processing endpoint once we identify it. 

For the colors I used:

#3F8F4E – primary Courseware green
#2D6F39 – dark green
#EAF6EC – light/soft green

Those visually fit the current Courseware.com branding; I would treat them as a working palette rather than an official published brand specification.

If you're putting these into the same Shopify theme on Courseware.com, the next useful step is for me to go through the CSS with you and tell you exactly what to paste into base.css/theme.css, and what HTML goes into each new Shopify page, so you don't end up duplicating unnecessary CSS. 


courseware-free-sample-page.html
HTML

courseware-course-library-page.html
HTML

courseware-pages.css
Code
sorry i forgot to include this page as well {{ 'landing-page.css' | asset_url | stylesheet_tag }}
{{ page.content }}
<script> 
/* =========================================================
   Smooth scroll for internal anchors on THIS page
   ========================================================= */
(function(){
  function smoothScroll(e){
    const link = e.target.closest('.ctm-ccdi a[href^="#"]');
    if(!link) return;

    const id = link.getAttribute('href');
    if(!id || id.length < 2) return;

    const target = document.querySelector(id);
    if(!target) return;

    e.preventDefault();
    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
  document.addEventListener('click', smoothScroll);
})();
</script>

<script>
  const viewport = document.getElementById('carousel-viewport');
  const track = document.getElementById('carousel-track');
  const btnNext = document.querySelector('.carousel-btn.next');
  const btnPrev = document.querySelector('.carousel-btn.prev');

  let scrollAmount = 0;
  const logoWidth = track.querySelector('img').offsetWidth + 400; // image + gap

  // Duplicate logos for seamless looping
  track.innerHTML += track.innerHTML;

  function scrollNext() {
    scrollAmount += logoWidth;

    if (scrollAmount >= track.scrollWidth / 2) {
      scrollAmount = 0;
      viewport.scrollLeft = 0;
    }

    viewport.scrollTo({
      left: scrollAmount,
      behavior: 'smooth'
    });
  }

  function scrollPrev() {
    scrollAmount -= logoWidth;

    if (scrollAmount < 0) {
      scrollAmount = track.scrollWidth / 2 - logoWidth;
      viewport.scrollLeft = scrollAmount;
    }

    viewport.scrollTo({
      left: scrollAmount,
      behavior: 'smooth'
    });
  }

  // Auto-scroll every 3 seconds
  let autoScroll = setInterval(scrollNext, 3000);

  // Button controls
  btnNext.addEventListener('click', () => {
    clearInterval(autoScroll);
    scrollNext();
    autoScroll = setInterval(scrollNext, 3000); // restart interval
  });

  btnPrev.addEventListener('click', () => {
    clearInterval(autoScroll);
    scrollPrev();
    autoScroll = setInterval(scrollNext, 3000); // restart interval
  });

  document.getElementById("Country").addEventListener("change", function () {
  const selectedCountry = this.value;
  const stateWrapper = document.getElementById("state-wrapper");
  const usStates = document.getElementById("us-states");
  const caProvinces = document.getElementById("ca-provinces");

  if (selectedCountry === "US") {
    stateWrapper.style.display = "block";
    usStates.style.display = "block";
    caProvinces.style.display = "none";
  } else if (selectedCountry === "CA") {
    stateWrapper.style.display = "block";
    usStates.style.display = "none";
    caProvinces.style.display = "block";
  } else {
    stateWrapper.style.display = "none";
  }
});
 
  
</script>
     <script src="https://www.google.com/recaptcha/api.js"></script>
     <script>
  function onSubmit(token) {
    const form = document.getElementById("downloadForm");

    if (form.checkValidity()) {
      form.submit();  // valid, let it go
    } else {
      form.reportValidity(); // show browser validation messages
      grecaptcha.reset(); // reset the captcha since form wasn't submitted
    }
  }
       
 </script>
    <script>
document.querySelectorAll('.accordion-header').forEach(header => {
  header.addEventListener('click', function() {
    const item = this.parentElement;
    item.classList.toggle('active');
    // Optionally close others:
    document.querySelectorAll('.accordion-item').forEach(i => {
      if (i !== item) i.classList.remove('active');
    });
  });
});
</script>
  <!-- Your code -->
<script>
  // US states and CA provinces
  const US_STATES = [
    ["AL","Alabama"],["AK","Alaska"],["AZ","Arizona"],["AR","Arkansas"],["CA","California"],
    ["CO","Colorado"],["CT","Connecticut"],["DE","Delaware"],["DC","District of Columbia"],
    ["FL","Florida"],["GA","Georgia"],["HI","Hawaii"],["ID","Idaho"],["IL","Illinois"],
    ["IN","Indiana"],["IA","Iowa"],["KS","Kansas"],["KY","Kentucky"],["LA","Louisiana"],
    ["ME","Maine"],["MD","Maryland"],["MA","Massachusetts"],["MI","Michigan"],["MN","Minnesota"],
    ["MS","Mississippi"],["MO","Missouri"],["MT","Montana"],["NE","Nebraska"],["NV","Nevada"],
    ["NH","New Hampshire"],["NJ","New Jersey"],["NM","New Mexico"],["NY","New York"],
    ["NC","North Carolina"],["ND","North Dakota"],["OH","Ohio"],["OK","Oklahoma"],["OR","Oregon"],
    ["PA","Pennsylvania"],["RI","Rhode Island"],["SC","South Carolina"],["SD","South Dakota"],
    ["TN","Tennessee"],["TX","Texas"],["UT","Utah"],["VT","Vermont"],["VA","Virginia"],
    ["WA","Washington"],["WV","West Virginia"],["WI","Wisconsin"],["WY","Wyoming"]
  ];

  const CA_PROVINCES = [
    ["AB","Alberta"],["BC","British Columbia"],["MB","Manitoba"],["NB","New Brunswick"],
    ["NL","Newfoundland and Labrador"],["NS","Nova Scotia"],["ON","Ontario"],
    ["PE","Prince Edward Island"],["QC","Quebec"],["SK","Saskatchewan"],
    ["NT","Northwest Territories"],["NU","Nunavut"],["YT","Yukon"]
  ];

  const countryEl = document.getElementById("Country");
  const stateWrapper = document.getElementById("state-wrapper");
  const stateEl = document.getElementById("State");

  function populateStateOptions(list) {
    // keep the placeholder, remove the rest
    stateEl.innerHTML = '<option value="" selected disabled hidden>Select your state / province...</option>';
    for (const [val, label] of list) {
      const opt = document.createElement("option");
      opt.value = val;
      opt.textContent = label;
      stateEl.appendChild(opt);
    }
  }

  function handleCountryChange() {
    const c = countryEl.value;

    if (c === "US") {
      populateStateOptions(US_STATES);
      stateWrapper.style.display = "block";
      stateEl.required = true;
      stateEl.value = ""; // force user to choose
    } else if (c === "CA") {
      populateStateOptions(CA_PROVINCES);
      stateWrapper.style.display = "block";
      stateEl.required = true;
      stateEl.value = "";
    } else {
      // Hide and not required for other countries
      stateWrapper.style.display = "none";
      stateEl.required = false;
      stateEl.value = "";
      // Optional: clear options back to just the placeholder
      stateEl.innerHTML = '<option value="" selected disabled hidden>Select your state / province...</option>';
    }
  }

  countryEl.addEventListener("change", handleCountryChange);
  // Initialize on load in case a value is pre-selected
  handleCountryChange();
</script>
…
Yes — this is the Shopify page template that ties the page content and CSS together. For Courseware.com, the main required change is the smooth-scroll selector from .ctm-ccdi to .cw-ccdi.

I’d also clean up one issue in the existing version: you currently have two separate Country change handlers, one looking for #us-states / #ca-provinces, and another dynamically populating #State. Those can conflict. Your newer dynamic State version is cleaner, so I’d keep that one and remove the older handler.

Here is the Courseware.com version I’d use:

{{ 'landing-page.css' | asset_url | stylesheet_tag }}

{{ page.content }}

<script>
/* =========================================================
   Smooth scroll for internal anchors on THIS page
   ========================================================= */
(function () {
  function smoothScroll(e) {
    const link = e.target.closest('.cw-ccdi a[href^="#"]');
    if (!link) return;

    const id = link.getAttribute('href');
    if (!id || id.length < 2) return;

    const target = document.querySelector(id);
    if (!target) return;

    e.preventDefault();

    target.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    });
  }

  document.addEventListener('click', smoothScroll);
})();
</script>


<script>
/* =========================================================
   Logo Carousel
   ========================================================= */
(function () {
  const viewport = document.getElementById('carousel-viewport');
  const track = document.getElementById('carousel-track');
  const btnNext = document.querySelector('.carousel-btn.next');
  const btnPrev = document.querySelector('.carousel-btn.prev');

  // Do nothing if this page does not contain the carousel
  if (!viewport || !track) return;

  const firstImage = track.querySelector('img');
  if (!firstImage) return;

  let scrollAmount = 0;
  const logoWidth = firstImage.offsetWidth + 400;

  // Duplicate logos for seamless looping
  track.innerHTML += track.innerHTML;

  function scrollNext() {
    scrollAmount += logoWidth;

    if (scrollAmount >= track.scrollWidth / 2) {
      scrollAmount = 0;
      viewport.scrollLeft = 0;
    }

    viewport.scrollTo({
      left: scrollAmount,
      behavior: 'smooth'
    });
  }

  function scrollPrev() {
    scrollAmount -= logoWidth;

    if (scrollAmount < 0) {
      scrollAmount = track.scrollWidth / 2 - logoWidth;
      viewport.scrollLeft = scrollAmount;
    }

    viewport.scrollTo({
      left: scrollAmount,
      behavior: 'smooth'
    });
  }

  let autoScroll = setInterval(scrollNext, 3000);

  if (btnNext) {
    btnNext.addEventListener('click', function () {
      clearInterval(autoScroll);
      scrollNext();
      autoScroll = setInterval(scrollNext, 3000);
    });
  }

  if (btnPrev) {
    btnPrev.addEventListener('click', function () {
      clearInterval(autoScroll);
      scrollPrev();
      autoScroll = setInterval(scrollNext, 3000);
    });
  }
})();
</script>


<script src="https://www.google.com/recaptcha/api.js"></script>

<script>
/* =========================================================
   reCAPTCHA Form Submission
   ========================================================= */
function onSubmit(token) {
  const form = document.getElementById('downloadForm');

  if (!form) return;

  if (form.checkValidity()) {
    form.submit();
  } else {
    form.reportValidity();

    if (typeof grecaptcha !== 'undefined') {
      grecaptcha.reset();
    }
  }
}
</script>


<script>
/* =========================================================
   Accordion
   ========================================================= */
document.querySelectorAll('.accordion-header').forEach(function (header) {
  header.addEventListener('click', function () {
    const item = this.parentElement;

    item.classList.toggle('active');

    document.querySelectorAll('.accordion-item').forEach(function (i) {
      if (i !== item) {
        i.classList.remove('active');
      }
    });
  });
});
</script>


<script>
/* =========================================================
   US States / Canadian Provinces
   ========================================================= */
(function () {

  const US_STATES = [
    ["AL","Alabama"],
    ["AK","Alaska"],
    ["AZ","Arizona"],
    ["AR","Arkansas"],
    ["CA","California"],
    ["CO","Colorado"],
    ["CT","Connecticut"],
    ["DE","Delaware"],
    ["DC","District of Columbia"],
    ["FL","Florida"],
    ["GA","Georgia"],
    ["HI","Hawaii"],
    ["ID","Idaho"],
    ["IL","Illinois"],
    ["IN","Indiana"],
    ["IA","Iowa"],
    ["KS","Kansas"],
    ["KY","Kentucky"],
    ["LA","Louisiana"],
    ["ME","Maine"],
    ["MD","Maryland"],
    ["MA","Massachusetts"],
    ["MI","Michigan"],
    ["MN","Minnesota"],
    ["MS","Mississippi"],
    ["MO","Missouri"],
    ["MT","Montana"],
    ["NE","Nebraska"],
    ["NV","Nevada"],
    ["NH","New Hampshire"],
    ["NJ","New Jersey"],
    ["NM","New Mexico"],
    ["NY","New York"],
    ["NC","North Carolina"],
    ["ND","North Dakota"],
    ["OH","Ohio"],
    ["OK","Oklahoma"],
    ["OR","Oregon"],
    ["PA","Pennsylvania"],
    ["RI","Rhode Island"],
    ["SC","South Carolina"],
    ["SD","South Dakota"],
    ["TN","Tennessee"],
    ["TX","Texas"],
    ["UT","Utah"],
    ["VT","Vermont"],
    ["VA","Virginia"],
    ["WA","Washington"],
    ["WV","West Virginia"],
    ["WI","Wisconsin"],
    ["WY","Wyoming"]
  ];

  const CA_PROVINCES = [
    ["AB","Alberta"],
    ["BC","British Columbia"],
    ["MB","Manitoba"],
    ["NB","New Brunswick"],
    ["NL","Newfoundland and Labrador"],
    ["NS","Nova Scotia"],
    ["ON","Ontario"],
    ["PE","Prince Edward Island"],
    ["QC","Quebec"],
    ["SK","Saskatchewan"],
    ["NT","Northwest Territories"],
    ["NU","Nunavut"],
    ["YT","Yukon"]
  ];

  const countryEl = document.getElementById('Country');
  const stateWrapper = document.getElementById('state-wrapper');
  const stateEl = document.getElementById('State');

  // Do nothing on pages without the download form
  if (!countryEl || !stateWrapper || !stateEl) return;

  function populateStateOptions(list) {
    stateEl.innerHTML =
      '<option value="" selected disabled hidden>Select your state / province...</option>';

    list.forEach(function (item) {
      const opt = document.createElement('option');

      opt.value = item[0];
      opt.textContent = item[1];

      stateEl.appendChild(opt);
    });
  }

  function handleCountryChange() {
    const country = countryEl.value;

    if (country === 'US') {
      populateStateOptions(US_STATES);

      stateWrapper.style.display = 'block';
      stateEl.required = true;
      stateEl.value = '';

    } else if (country === 'CA') {
      populateStateOptions(CA_PROVINCES);

      stateWrapper.style.display = 'block';
      stateEl.required = true;
      stateEl.value = '';

    } else {
      stateWrapper.style.display = 'none';

      stateEl.required = false;
      stateEl.value = '';

      stateEl.innerHTML =
        '<option value="" selected disabled hidden>Select your state / province...</option>';
    }
  }

  countryEl.addEventListener('change', handleCountryChange);

  // Initialize in case the country already has a value
  handleCountryChange();

})();
</script>
What I changed
The important brand-specific change is:

const link = e.target.closest('.cw-ccdi a[href^="#"]');
instead of:

const link = e.target.closest('.ctm-ccdi a[href^="#"]');
I also made the JavaScript safer. For example, if one of your two CW pages doesn't contain the logo carousel, the old code would try to run:

track.querySelector('img')
when track doesn't exist and throw a JavaScript error. The revised version simply skips carousel code on pages without a carousel.

I also removed this entire older block from your CTM version:

document.getElementById("Country").addEventListener("change", function () {
   ...
});
because the later US_STATES / CA_PROVINCES script already handles the same job and is the better implementation.

And you can keep:

{{ 'landing-page.css' | asset_url | stylesheet_tag }}
as long as the Courseware.com theme has the new CW CSS saved as landing-page.css.

So the three pieces now fit together as:

Shopify template — the code above
landing-page.css — the Courseware.com CSS I created
Page content — either of the two Courseware.com HTML files I created earlier
That should give you a cleaner CW implementation than simply copying the CTM template verbatim.

ok here is the live page https://courseware.com/pages/courseware-library i can see there are some CSS stuff we need to fix


Worked for 1m 48s

Yes — I can see the main issue now.

The live page content itself is there correctly: the custom hero, popular-course grid, category section, delivery section, process, testimonials, form, and FAQ are all rendering. 

The biggest CSS problem is that the page HTML uses a large set of custom reader-* classes, but the stylesheet we carried over from CTM never had styles for those classes. That affects the hero carousel, course grid, category pills, document stack, testimonial marquee, and some spacing/layout pieces.

I also found three other things worth fixing:

Shopify is still showing its default “Courseware Library” page title above our custom hero. 
The page is likely still sitting inside Shopify’s standard narrow page-content wrapper, which can constrain a landing page like this.
There were a few leftover CTM colors in the converted CSS, including red validation borders and the yellow card-hover background.
I created an updated full CSS file that addresses those issues and adds all the missing reader-* styling:

What I’d do now
Replace the contents of your Courseware.com landing-page.css with that fixed version.

That should immediately improve the areas that currently look off, especially:

The course-cover carousel at the top
The 12 popular course cards
The training-category pills
The Instructor Guide / Participant Manual / PowerPoint stack
The testimonial cards
The sample form layout
Overall page width and spacing
Removal of the duplicate Shopify page heading
There is one separate non-CSS issue I see on the live page: after our new FAQ, the site's older testimonial section beginning with “Courseware.com is relied upon by hundreds of companies worldwide!” is still present. 

I would remove that old block rather than style it, because the new page already has its own testimonial section. That will give the page a much cleaner ending. 


courseware-pages-fixed.css
Code
closer but still looks off https://courseware.com/pages/courseware-library


Worked for 40s

Yes — this version is closer, but the remaining problem is mostly theme interference plus some over-styled components.

The live page confirms the custom landing content is rendering correctly from the hero through the FAQ. 
 What still makes it feel “off” is:

Shopify’s native page title/wrapper is still influencing the page.
The landing page is visually a little too rounded/card-heavy compared with the rest of Courseware.com.
Some spacing and section widths still feel like the CTM design rather than CW.
The old testimonial block still appears after the FAQ, starting with “Courseware.com is relied upon by hundreds of companies worldwide!”. 
I made a second-pass CSS that is more restrained and closer to the existing Courseware.com look.

Use this full replacement
If you prefer to keep your current CSS and only add overrides at the bottom, use this instead:

The v2 changes make the page:

flatter and less “app-like”
less pill-heavy
less rounded
more consistent with CW’s green
wider and cleaner
better spaced
more restrained on shadows
cleaner on the course cards and buttons
stronger at overriding Shopify’s normal page wrapper
One change CSS cannot solve
The old testimonial section after the FAQ is still being generated by the existing Courseware page/template. The new page finishes its FAQ around “What do I receive in the free sample?”, then the old testimonial content immediately begins. 

That block should be removed from the Shopify template/section rather than styled.

I would fix that next. Once that old section is gone, the page should feel much more like one intentionally designed landing page instead of a new page embedded inside the old Courseware template. 


courseware-pages-fixed-v2.css
Code

courseware-live-page-override.css
Code
Which code do i add into the CSS?
Use the override-only CSS and paste it at the very bottom of your existing landing-page.css.

That way you don’t replace everything you already have; these rules simply take priority over the earlier ones.

Use this file:

So your process is:

Open landing-page.css in Shopify.
Scroll all the way to the bottom.
Paste the entire contents of courseware-live-page-override.css.
Save.
Refresh the live Courseware Library page.
Do not use both files. The courseware-pages-fixed-v2.css file is a full combined stylesheet, while the override file is specifically made to be appended to what you already have.


courseware-live-page-override.css
Code

 

  box-shadow: 0 12px 30px rgba(23,33,27,.10) !important;
}

/* Process cards */
.cw-ccdi .ccdi-process-step{
  border-radius: 12px !important;
  padding: 28px 20px 24px !important;
  box-shadow: 0 7px 22px rgba(23,33,27,.06) !important;
}

.cw-ccdi .ccdi-step-icon{
  width: 66px !important;
  height: 66px !important;
}

/* Form */
.cw-ccdi .reader-download-section{
  max-width: 660px !important;
}

.cw-ccdi .download-form-wrapper{
  background: #fff;
  padding: 30px !important;
  border: 1px solid var(--cw-border);
  border-radius: 14px;
  box-shadow: 0 8px 25px rgba(23,33,27,.06);
}

.cw-ccdi .cw-input{
  width: 100% !important;
  min-height: 48px !important;
  padding: 11px 13px !important;
  margin-bottom: 12px !important;
  border: 1px solid rgba(23,33,27,.16) !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: var(--cw-text) !important;
  box-shadow: none !important;
}

/* FAQ */
.cw-ccdi .ccdi-faq{
  max-width: 900px !important;
}

.cw-ccdi .ccdi-faq-item{
  border-radius: 8px !important;
}

/* Mobile */
@media (max-width: 990px){
  .cw-ccdi .ccdi-container{
    width: min(100% - 36px, 1180px) !important;
  }

  .cw-ccdi .reader-course-grid{
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  }

  .cw-ccdi .reader-split{
    gap: 40px !important;
  }
}

@media (max-width: 750px){
  .cw-ccdi .ccdi-container{
    width: min(100% - 28px, 1180px) !important;
  }

  .cw-ccdi .ccdi-section{
    padding: 58px 0 !important;
  }

  .cw-ccdi .reader-hero{
    padding: 34px 0 52px !important;
  }

  .cw-ccdi .reader-hero-title{
    font-size: clamp(36px,11vw,48px) !important;
  }

  .cw-ccdi .reader-hero-sub{
    font-size: 16px !important;
  }

  .cw-ccdi .reader-course-grid{
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }

  .cw-ccdi .ccdi-stats{
    grid-template-columns: 1fr !important;
    max-width: 460px !important;
  }
}

@media (max-width: 480px){
  .cw-ccdi .reader-course-grid{
    grid-template-columns: 1fr !important;
  }

  .cw-ccdi .download-form-wrapper{
    padding: 20px !important;
  }
}