@import url("/assets/css/mobile-polish.v3.2.css?v=25");
/* site-shared.css — v26.14
   - Restore segmented Eng/Esp pill w/ active blue half
   - Shrink language pill & theme toggle at ≤600px
   - Hide header Start Course on home only at ≤450px
   - Normalize banner Start Course to match header (font/case, no underline)
   - Keep previous dropdown guard, hero tweaks, card breakpoints
*/
/* FULL CSS CONTENT INCLUDED */
:root{
  --bg:#f5f7fa; --ink:#222; --muted:#666;
  --brand-blue:#1E88E5; --accent-red:#D54A3A;
  --border:#e6e9ef; --radius:16px; --shadow:-2px 2px 6px rgba(0,0,0,.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.45}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.container{width:min(1100px,92%);margin-inline:auto}
.site-header{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:none;height:auto}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:8px 0;gap:16px;flex-wrap:wrap}
.brand-logo{display:block;width:160px;height:auto;margin:0}
.nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nav a{color:#1d2a3a;text-decoration:none;font-weight:600;opacity:.92}
.nav a:hover{opacity:1}
.cta{background:var(--accent-red);color:#fff;border:none;border-radius:999px;padding:10px 16px;font-weight:800;cursor:pointer}
.cta.big{padding:12px 20px;font-size:1.02rem}
.cta:hover{filter:brightness(.95)}
.dropdown{position:relative}
.btn-more{background:#fff;border:1px solid var(--border);border-radius:10px;padding:8px 12px;cursor:pointer;font-weight:700}
.dropdown .menu{position:absolute;top:calc(100% + 8px);background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:-2px 2px 6px rgba(0,0,0,.10);min-width:220px;display:none;padding:8px;color:#222;z-index:50;left:auto;right:0;max-width:min(320px, calc(100vw - 24px));overflow-wrap:anywhere}
.dropdown .menu a{display:block;padding:8px 10px;border-radius:8px;color:#222;text-decoration:none}
.dropdown .menu a:hover{background:#f6f8ff}
.dropdown.open .menu{display:block}
.dropdown .btn-more[aria-expanded="true"] + .menu{display:block !important;visibility:visible !important;opacity:1 !important;pointer-events:auto !important}
.site-header .dropdown .btn-more[aria-expanded="true"] + .menu{display:block !important;visibility:visible !important;opacity:1 !important;pointer-events:auto !important}

@media (max-width:500px){ .dropdown{position:relative} .dropdown .menu{ right:0 !important; left:auto !important } }
@media (max-width:680px){ .dropdown .menu{ left:0 !important; right:auto !important } }
.hero-wrap{position:relative;padding:0 0 8px 0}
.hero-inner{position:relative}
.hero-img{width:100%;height:auto;border-radius:16px}
.hero-overlay.ul{position:absolute;left:24px;top:24px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:10px;max-width:min(70%,720px)}
.hero-overlay.ul h1{margin:0;font-size:clamp(1.4rem,3.2vw,2.4rem);font-weight:900;color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.35)}
.hero-sub{margin:0;color:#fff;font-size:clamp(1rem,2vw,1.1rem);text-shadow:0 2px 12px rgba(0,0,0,.35)}
.hero-cta-row{margin-top:8px}
.hero-inner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:min(33%,220px);background:linear-gradient(to top, rgba(0,0,0,.52), rgba(0,0,0,0));border-radius:0 0 16px 16px;pointer-events:none;z-index:1}
.cards{position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0 0 10px 0}
.cards.overlap-safe{margin-top:-4px !important}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);
  transition:transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease}
.card:hover{transform:translateY(-1px); box-shadow:-3px 3px 8px rgba(0,0,0,.12)}
.card h3{margin:0 0 6px 0;font-size:1.06rem}
.card p{margin:0;color:var(--muted)}
.page-contact main.container{margin:12px auto 28px !important}
.page-contact .cards{padding-bottom:0 !important}
.page-contact .card + .card{margin-top:8px}
.site-footer{border-top:1px solid var(--border);background:var(--bg);margin-top:4px}
.site-footer .container{display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;padding:6px 0;text-align:center}
.site-footer p{margin:0;color:#333;font-size:.9rem;font-weight:400;line-height:1.2}
.site-footer .links{display:flex;flex-wrap:wrap;gap:8px 12px;justify-content:center;align-items:center;text-align:center;max-width:980px;margin:0 auto}
.site-footer .links a{color:#2b5da6;text-decoration:none;font-weight:400}
.site-footer .links a:hover{text-decoration:underline}

/* Base language pill styles */
.lang{display:inline-flex;align-items:center;gap:0}
.lang a,.lang button{
  font-family:inherit;font-size:14px;font-weight:600;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  height:31px;padding:4px 12px;background:#fff;color:#333;
  border:1px solid var(--border);text-decoration:none;cursor:pointer;
  appearance:none;border-radius:0;margin:0;
}
.lang a + a,.lang button + button,.lang a + button,.lang button + a{ border-left:none }
.lang :first-child{ border-top-left-radius:999px;border-bottom-left-radius:999px }
.lang :last-child{ border-top-right-radius:999px;border-bottom-right-radius:999px }
html[lang="en"] .lang [data-lang="en"],html[lang="es"] .lang [data-lang="es"]{ background:var(--brand-blue);color:#fff;border-color:var(--brand-blue) }
html[lang="en"] .lang [data-lang="es"]:hover,html[lang="es"] .lang [data-lang="en"]:hover{ background:#eef4ff;color:#333;border-color:var(--border) }
.lang a:focus-visible,.lang button:focus-visible{ outline:2px solid var(--brand-blue); outline-offset:2px }

@media (max-width:1200px){ .theme-toggle{ display:inline-flex !important } }
.nav > .theme-toggle, .nav > .lang{ white-space:nowrap; flex:0 0 auto }

@media (max-width:600px){
  .theme-toggle{ gap:4px }
  .theme-toggle button{ width:26px;height:26px;padding:0 !important;display:inline-flex;align-items:center;justify-content:center }
  .theme-toggle svg{ width:16px;height:16px }
}
@media (max-width:680px){
  .nav a, .nav button{ font-size:14px; line-height:1 }
  .nav a[data-course-link]{ font-size:0; position:relative }
  .nav a[data-course-link]::after{ content:"Portal"; font-size:14px; line-height:1; display:inline-block }
  .lang a, .lang button{ height:28px; padding:3px 10px }
}
@media (max-width:600px){
  .hero-overlay.ul{ max-width:95%; transform:translateY(-2px) !important; left:14px; top:10px; gap:8px }
  .hero-overlay.ul h1{ line-height:1.12 }
  .hero-sub{ white-space:nowrap }
}
.hero-cta-row .cta.big{ text-decoration:none !important; text-transform:none; font-size:1.02rem }
@media (max-width:680px){
  .hero-cta-row .cta.big{ min-width:112px; text-align:center; padding:8px 0 !important; font-size:.95rem }
}
@media (max-width:450px){ .page-home .site-header .nav .cta{ display:none !important } }
@media (max-width:820px){ .cards{ grid-template-columns:repeat(2,1fr); gap:14px } }
@media (max-width:520px){ .cards{ grid-template-columns:1fr; gap:12px } }
.page-course .card,.page-course .container > .card,.page-course .course-wrap .card{
  background:transparent !important;box-shadow:none !important;border:0 !important;padding:0 !important;
}
/* site-shared.css — v26.14 (focused fixes)
   Fixes:
   1) Language pill shortens to Eng/Esp at ≤680px
   2) Banner Start Course padding + no underline
   3) Theme toggle shrinks at ≤600px
   4) More dropdown stays within viewport on narrow widths
*/

/* --- Language pill: short labels on small screens --- */
@media (max-width:680px){
  .site-header .nav .lang a[data-lang="en"],
  .site-header .nav .lang a[data-lang="es"]{
    font-size:0 !important;          /* hide long label, keep for a11y */
  }
  .site-header .nav .lang a[data-lang="en"]::after{
    content:"Eng"; font-size:13px; line-height:1; letter-spacing:.1px;
  }
  .site-header .nav .lang a[data-lang="es"]::after{
    content:"Esp"; font-size:13px; line-height:1; letter-spacing:.1px;
  }
  .site-header .nav .lang a,
  .site-header .nav .lang button{
    height:28px !important; padding:3px 10px !important;
  }
}

/* --- Banner CTA: padding + remove underline --- */
.hero-cta-row .cta.big{
  padding:10px 16px !important;
  text-decoration:none !important;
}
@media (max-width:680px){
  .hero-cta-row .cta.big{
    min-width:112px !important;
    padding:8px 14px !important;
    text-decoration:none !important;
  }
}

/* --- Theme toggle: shrink more at ≤600px --- */
@media (max-width:600px){
  .site-header .nav .theme-toggle{ gap:2px !important; }
  .site-header .nav .theme-toggle button{
    width:22px !important; height:22px !important; padding:0 !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
  }
  .site-header .nav .theme-toggle svg{ width:14px !important; height:14px !important; }
}

/* --- More dropdown: keep inside viewport --- */
@media (max-width:680px){
  .site-header .dropdown{ position:relative !important; }
  .site-header .dropdown .menu{
    left:auto !important;
    right:12px !important;
    max-width:calc(100vw - 24px) !important;
    transform:none !important;
  }
}
@media (max-width:500px){
  .site-header .dropdown .menu{
    right:10px !important;
    max-width:calc(100vw - 20px) !important;
  }
}
/* === v26.15 Header/Footer Contrast Fix === */

/* Header nav links: readable in Blue or Dark mode */
html[data-theme="blue"] .site-header .nav a,
html[data-theme="dark"] .site-header .nav a {
  color: #f5f7fa !important;
}

/* Header "More" button contrast */
html[data-theme="blue"] .site-header .btn-more,
html[data-theme="dark"] .site-header .btn-more {
  background: rgba(255,255,255,0.08);
  color: #f5f7fa !important;
  border-color: rgba(255,255,255,0.2);
}

/* Footer text readable in Blue or Dark mode */
html[data-theme="blue"] .site-footer p,
html[data-theme="dark"] .site-footer p {
  color: #f5f7fa !important;
}

/* Footer links also adjust for visibility */
html[data-theme="blue"] .site-footer .links a,
html[data-theme="dark"] .site-footer .links a {
  color: #f5f7fa !important;
  opacity: 0.9;
}
html[data-theme="blue"] .site-footer .links a:hover,
html[data-theme="dark"] .site-footer .links a:hover {
  opacity: 1;
  text-decoration: underline;
}
/* === v26.16 Dropdown Text Contrast Fix === */

/* Force dropdown text to stay dark on all themes */
.site-header .dropdown .menu a,
.site-header .dropdown .menu button,
.site-header .dropdown .menu {
  color: #111 !important;
  background-color: #fff !important;
}

/* Hover effect stays readable but subtle */
.site-header .dropdown .menu a:hover {
  background-color: rgba(0,0,0,0.05) !important;
  color: #000 !important;
}

/* Ensure borders match light styling */
.site-header .dropdown .menu {
  border: 1px solid rgba(0,0,0,0.1) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
}
/* v26.25 — Language pill contrast in Blue/Dark */
html[data-theme="blue"] .site-header .lang a,
html[data-theme="dark"] .site-header .lang a{
  /* Inactive (white) half defaults to black text */
  color:#111 !important;
}

/* Active (blue) half must remain white text in Blue/Dark */
html[data-theme="blue"][lang="en"] .site-header .lang [data-lang="en"],
html[data-theme="dark"][lang="en"] .site-header .lang [data-lang="en"],
html[data-theme="blue"][lang="es"] .site-header .lang [data-lang="es"],
html[data-theme="dark"][lang="es"] .site-header .lang [data-lang="es"]{
  color:#fff !important;
}

/* v26.26 — Footer compact spacing (all pages) */
.site-footer{ margin-top:2px }
.site-footer .container{ padding:6px 0 !important }
.site-footer .links{ gap:10px }
@media (max-width:600px){ .site-footer .container{ padding:6px 0 !important } .site-footer .links{ gap:8px } }
/* v26.27 — Footer readability on very narrow phones */
@media (max-width:420px){
  /* Legal line: a bit smaller, tighter line-height */
  .site-footer p{
    font-size: .80rem;   /* ~12.8px on a 16px root */
    line-height: 1.25;
  }

  /* Footer links: keep readable, but tighter vertical rhythm when they wrap */
  .site-footer .links{
    /* Flex already; ensure wrap and reduce vertical gap between rows */
    flex-wrap: wrap;
    row-gap: 4px;        /* tighter spacing between wrapped rows */
    column-gap: 10px;    /* comfortable horizontal space */
  }
  .site-footer .links a{
    font-size: .90rem;   /* ~14.4px → still very readable */
    line-height: 1.1;    /* reduces that “second line too low” look */
    padding: 0;          /* avoid extra vertical padding in wrapped rows */
  }
}

/* Optional: even narrower devices (tiny phones) */
@media (max-width:360px){
  .site-footer p{ font-size: .78rem; }   /* ≈12.5px */
  .site-footer .links a{ font-size: .88rem; }
}
/* v26.28 — Optional legal line two-line balance for very small screens */
@media (max-width:380px){
  .site-footer p{
    font-size:.78rem;                /* ≈12.5 px */
    line-height:1.25;
    text-align:center;
    max-width:350px;                 /* keeps it from stretching too wide */
    margin-inline:auto;              /* centers within container */
    white-space:normal;              /* allow clean word wrapping */
  }
  /* Optional stronger line break hint */
  .site-footer p br{ display:inline } /* allow inserted <br> to show if present */
}
/* v26.29 — Checkout mobile layout + input sizing */
.page-checkout .container{
  /* breathe just a bit more on smaller screens */
  width: min(1100px, 94%);
}

/* Assume your two boxes live in a grid or flex wrapper. Tidy both cases. */
.page-checkout .checkout-grid{
  display: grid;
  grid-template-columns: 1fr 400px;       /* desktop: form + summary */
  gap: 16px;
}
@media (max-width: 900px){
  .page-checkout .checkout-grid{
    grid-template-columns: 1fr;           /* stack */
  }
  /* reorder: form first, summary second */
  .page-checkout .checkout-form{ order: 1; }
  .page-checkout .order-summary{ order: 2; }

  /* make the summary look “attached” to the flow */
  .page-checkout .order-summary{
    margin-top: 10px;
  }
}

/* If the wrapper is flex instead of grid, this keeps it sane on mobile */
@media (max-width: 900px){
  .page-checkout .checkout-flex{
    display:flex; flex-direction:column; gap:12px;
  }
}

/* Inputs: full-width, readable on phones */
.page-checkout .checkout-form .form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;  /* two-up where it makes sense */
  gap: 12px;
  margin-bottom: 10px;
}
.page-checkout .checkout-form .form-row.full,
.page-checkout .checkout-form .form-row:has(input[type="email"]),
.page-checkout .checkout-form .form-row:has(input[name*="address"]),
.page-checkout .checkout-form .form-row:has(textarea){
  grid-template-columns: 1fr;      /* long fields go full width */
}

.page-checkout .checkout-form label{
  font-size: .95rem;
}
.page-checkout .checkout-form input,
.page-checkout .checkout-form select,
.page-checkout .checkout-form textarea{
  width: 100%;
  min-height: 44px;                 /* good tap target */
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 16px;                  /* avoid iOS zoom-on-focus */
}

/* Zip/City/State block: fall to one per row on phones */
@media (max-width: 900px){
  .page-checkout .checkout-form .row-zip-city-state{
    grid-template-columns: 1fr;     /* stack Zip, City, State */
  }
}

/* Buttons: full width on phones */
@media (max-width: 900px){
  .page-checkout .checkout-form .cta,
  .page-checkout .checkout-form button[type="submit"]{
    width: 100%;
    justify-content: center;
  }
}

/* Card boxes: keep our left+bottom shadow style consistent */
.page-checkout .checkout-form.card,
.page-checkout .order-summary.card{
  box-shadow: var(--shadow);
}

/* Slightly tighter spacing under the stacked summary so the footer isn’t pushed way down */
@media (max-width: 900px){
  .page-checkout .cards{ padding-bottom: 6px }
}
/* v26.30 — Checkout mobile form full-width inputs & single-column grid */
.page-checkout .checkout-grid{
  display:grid;
  grid-template-columns:minmax(260px,1fr) 420px;
  gap:20px;
}
@media (max-width:900px){
  .page-checkout .checkout-grid{
    grid-template-columns:1fr !important; /* stack form + summary */
  }
  .page-checkout .order-summary{ order:2; }
  .page-checkout .checkout-form{ order:1; }
}

/* Inner form grid: 2 cols desktop → 1 col on ≤900px, override any inline grid */
.page-checkout .form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.page-checkout .form-grid > label{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.page-checkout .form-grid input,
.page-checkout .form-grid select,
.page-checkout .form-grid textarea{
  width:100% !important;  /* make each control span its cell */
  min-width:0;            /* allow shrink without overflow */
  padding:12px 14px;
  box-sizing:border-box;
}
@media (max-width:900px){
  .page-checkout .form-grid{
    grid-template-columns:1fr !important;  /* force single column */
  }
  /* Cancel any inline span like style="grid-column:1/3" on mobile */
  .page-checkout .form-grid > *{
    grid-column:auto !important;
  }
  /* Make the submit CTA full-width for better tap target */
  .page-checkout .checkout-form .hero-cta-row .cta{
    width:100%;
    text-align:center;
  }
}
/* v26.31 — Privacy Request & Contact mobile input stacking */
@media (max-width:600px){

  /* Target both forms by their page context */
  body.page-privacy-request form .form-row,
  body.page-contact form .form-row,
  body.page-privacy form .form-row {
    display: flex;
    flex-direction: column;      /* stack vertically */
    gap: 12px;                   /* add spacing between inputs */
  }

  /* Ensure all inputs and textareas stretch full width */
  body.page-privacy-request form input,
  body.page-privacy-request form textarea,
  body.page-contact form input,
  body.page-contact form textarea,
  body.page-privacy form input,
  body.page-privacy form textarea {
    width: 100%;
    box-sizing: border-box;
  }

  /* Optional: make the submit button full width for better tap target */
  body.page-privacy-request form button,
  body.page-contact form button {
    width: 100%;
    max-width: 100%;
  }
}
/* v26.32 — Contact + Privacy Request: stack first row on phones */

/* Most robust: if those forms use a .grid container (common on your site) */
@media (max-width:600px){
  .page-contact form .grid:first-of-type,
  .page-privacy-request form .grid:first-of-type{
    grid-template-columns: 1fr !important;   /* 1 column */
    gap: 12px !important;
  }
  .page-contact form .grid:first-of-type > label,
  .page-privacy-request form .grid:first-of-type > label{
    grid-column: auto !important;            /* let each label be full width */
    width: 100% !important;
  }
  .page-contact form input,
  .page-privacy-request form input{
    width: 100% !important;                  /* make fields stretch full width */
    box-sizing: border-box;
  }
}

/* Fallback if those two fields are wrapped in a flex row instead of grid */
@media (max-width:600px){
  .page-contact form .two-col,
  .page-privacy-request form .two-col{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .page-contact form .two-col > *,
  .page-privacy-request form .two-col > *{
    width: 100% !important;
  }
}
/* v26.36 — Theme toggle fixes: icon color + persistent active ring */

/* 1) Keep theme-toggle icons visible on pages with form styles */
.page-privacy-request .site-header .theme-toggle button,
.page-contact .site-header .theme-toggle button{
  color:#111 !important;                 /* black icons on the white pills */
}

/* Also guard for Blue/Dark themes */
html[data-theme="blue"] .site-header .theme-toggle button,
html[data-theme="dark"] .site-header .theme-toggle button{
  color:#111 !important;
}

/* 2) Make the selected theme show a ring even when not focused */
.theme-toggle button[aria-pressed="true"]{
  outline:2px solid #f6a04d;            /* orange ring */
  outline-offset:2px;
  border-color:#f6a04d33;               /* subtle border tint */
  box-shadow:0 0 0 2px rgba(246,160,77,.12);
}

/* v26.36 — Theme toggle fixes: icon color + persistent active ring */

/* Force visible icon color for the theme toggle on ALL pages */
.site-header .theme-toggle button{ color:#111 !important; }
html[data-theme="blue"] .site-header .theme-toggle button,
html[data-theme="dark"] .site-header .theme-toggle button{ color:#111 !important; }

/* Keep the “selected” ring visible even without focus */
.theme-toggle button[aria-pressed="true"]{
  outline:2px solid #f6a04d;       /* orange ring */
  outline-offset:2px;
  border-color:#f6a04d33;
  box-shadow:0 0 0 2px rgba(246,160,77,.12);
}
/* v26.40 — Course Details header + dropdown + language pill cleanup */

/* 1) Keep header background white in Blue/Dark modes */
html[data-theme="blue"] .site-header,
html[data-theme="dark"] .site-header {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* 2) Nav links: dark text again on white header in Blue/Dark */
html[data-theme="blue"] .site-header .nav a,
html[data-theme="dark"] .site-header .nav a {
  color: #1d2a3a !important;
}

/* 3) More dropdown: always white box + dark text in Blue/Dark */
html[data-theme="blue"] .site-header .dropdown .menu,
html[data-theme="dark"] .site-header .dropdown .menu {
  background-color: #ffffff !important;
}

html[data-theme="blue"] .site-header .dropdown .menu a,
html[data-theme="dark"] .site-header .dropdown .menu a {
  color: #111 !important;
}

/* 4) Language pill — blue active half, white inactive half (all themes) */

/* Active language pill: blue with white text */
html[lang="en"] .site-header .lang [data-lang="en"],
html[lang="es"] .site-header .lang [data-lang="es"] {
  background: var(--brand-blue) !important;
  color: #ffffff !important;
  border-color: var(--brand-blue) !important;
}

/* Inactive language half: white with dark text, even in Blue/Dark */
html[data-theme="blue"] .site-header .lang a,
html[data-theme="dark"] .site-header .lang a {
  background: #ffffff !important;
  color: #111 !important;
}
/* v26.41 — Final header “More” button + language pill fix */

/* 1) "More" button: keep it visible in Blue/Dark (white pill + dark text) */
html[data-theme="blue"] .site-header .btn-more,
html[data-theme="dark"] .site-header .btn-more {
  background: #ffffff !important;
  color: #1d2a3a !important;
  border-color: rgba(0,0,0,0.12) !important;
}

/* 2) Language pill active half for pages WITHOUT data-lang (like course-details)
   - EN page: first link = active
   - ES page: second link = active
*/

/* Base pill look stays as defined earlier (white background, dark text).
   Now explicitly mark the active side blue. */
html[lang="en"] .site-header .lang a:first-child,
html[lang="es"] .site-header .lang a:last-child {
  background: var(--brand-blue) !important;
  color: #ffffff !important;
  border-color: var(--brand-blue) !important;
}

/* Inactive side: make sure it stays white + dark text even in Blue/Dark */
html[lang="en"] .site-header .lang a:last-child,
html[lang="es"] .site-header .lang a:first-child {
  background: #ffffff !important;
  color: #111 !important;
}
/* v26.42 — Course-Details language pill: blue active, white inactive */

/* Default = English version (body has .page-course-details without .es)
   -> First link ("English") active blue, second ("Español") white */
body.page-course-details .site-header .lang a:first-child {
  background: var(--brand-blue) !important;
  color: #fff !important;
  border-color: var(--brand-blue) !important;
}

body.page-course-details .site-header .lang a:last-child {
  background: #fff !important;
  color: #111 !important;
  border-color: var(--border, #e6e9ef) !important;
}

/* Spanish variant = body has .page-course-details.es
   -> Flip it: first ("English") white, second ("Español") blue */
body.page-course-details.es .site-header .lang a:first-child {
  background: #fff !important;
  color: #111 !important;
  border-color: var(--border, #e6e9ef) !important;
}

body.page-course-details.es .site-header .lang a:last-child {
  background: var(--brand-blue) !important;
  color: #fff !important;
  border-color: var(--brand-blue) !important;
}

/* === GLOBAL THEME TOGGLE PILL — colored icons + amber halo === */
.site-header .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: #ffffff;
}

.site-header .theme-toggle button {
  margin: 0;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  opacity: 0.85;
}

/* Icon size */
.site-header .theme-toggle button svg {
  width: 18px;
  height: 18px;
}

/* Per-mode icon colors */
.site-header .theme-toggle button[data-theme-btn="light"] {
  color: #FFC107;   /* amber */
}

.site-header .theme-toggle button[data-theme-btn="slate"] {
  color: #607D8B;   /* blue-gray */
}

.site-header .theme-toggle button[data-theme-btn="blue"] {
  color: #1E88E5;   /* brand blue */
}

.site-header .theme-toggle button[data-theme-btn="dark"] {
  color: #7E57C2;   /* purple */
}

/* Force SVG + paths to use the same per-mode color */
.site-header .theme-toggle button[data-theme-btn="light"],
.site-header .theme-toggle button[data-theme-btn="light"] svg,
.site-header .theme-toggle button[data-theme-btn="light"] * {
  color: #FFC107;
  stroke: #FFC107;
}

.site-header .theme-toggle button[data-theme-btn="slate"],
.site-header .theme-toggle button[data-theme-btn="slate"] svg,
.site-header .theme-toggle button[data-theme-btn="slate"] * {
  color: #607D8B;
  stroke: #607D8B;
}

.site-header .theme-toggle button[data-theme-btn="blue"],
.site-header .theme-toggle button[data-theme-btn="blue"] svg,
.site-header .theme-toggle button[data-theme-btn="blue"] * {
  color: #1E88E5;
  stroke: #1E88E5;
}

.site-header .theme-toggle button[data-theme-btn="dark"],
.site-header .theme-toggle button[data-theme-btn="dark"] svg,
.site-header .theme-toggle button[data-theme-btn="dark"] * {
  color: #7E57C2;
  stroke: #7E57C2;
}

/* Active state: transparent amber circle with darker outline */
.site-header .theme-toggle button[aria-pressed="true"] {
  background: rgba(255, 179, 0, 0.16) !important;        /* soft amber fill */
  border-color: #FFB300 !important;                      /* darker amber outline */
  box-shadow: 0 0 0 2px rgba(255, 143, 0, 0.75) !important;
  opacity: 1 !important;
}

/* Hover: make icon fully visible */
@media (hover:hover) {
  .site-header .theme-toggle button:hover {
    opacity: 1;
  }
}

/* Keep header white in dark/blue modes; just strengthen border slightly */
[data-theme="dark"] .site-header .theme-toggle,
[data-theme="blue"] .site-header .theme-toggle {
  background: #f5f7fb;
  border-color: rgba(148, 163, 184, 0.7);
}

/* v26.43 — Language pill border color normalization in Blue/Dark + cd-lang */
[data-theme="blue"] .lang a,
[data-theme="dark"] .lang a,
[data-theme="blue"] .lang button,
[data-theme="dark"] .lang button,
[data-theme="blue"] .lang-switch a,
[data-theme="dark"] .lang-switch a {
  border-color: var(--border, #e6e9ef) !important;  /* keep soft gray in Blue/Dark */
}

/* Course Details custom pill: ensure outer border stays light gray in Blue/Dark */
[data-theme="blue"] .cd-lang,
[data-theme="dark"] .cd-lang {
  border-color: rgba(148, 163, 184, 0.6) !important;
}
/* === v26.44 — FINAL LANGUAGE PILL OUTLINE NORMALIZATION === */

/* Outer pill container: single light-gray border in ALL themes */
.lang,
.lang-switch,
.cd-lang {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border-radius: 999px;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(148, 163, 184, 0.6) !important; /* soft light gray */
  padding: 0; /* no extra padding on container */
}

/* Make sure Blue/Dark cannot override that border color */
[data-theme="blue"] .lang,
[data-theme="dark"] .lang,
[data-theme="blue"] .lang-switch,
[data-theme="dark"] .lang-switch,
[data-theme="blue"] .cd-lang,
[data-theme="dark"] .cd-lang {
  border-color: rgba(148, 163, 184, 0.6) !important;
}

/* Inner segments: NEVER draw their own borders or outlines */
.lang a,
.lang button,
.lang-switch a,
.cd-lang a {
  border: 0 !important;
  box-shadow: none !important;
}
/* v26.45 — Course Details active language label stays white in Blue/Dark */

/* EN version: first half ("English") is active */
[data-theme="blue"] body.page-course-details .site-header .lang a:first-child,
[data-theme="dark"] body.page-course-details .site-header .lang a:first-child {
  color: #ffffff !important;
}

/* ES version: second half ("Español") is active */
[data-theme="blue"] body.page-course-details.es .site-header .lang a:last-child,
[data-theme="dark"] body.page-course-details.es .site-header .lang a:last-child {
  color: #ffffff !important;
}
/* v26.46 — Active language label stays white in Blue/Dark (global) */

/* When English is the active language */
html[data-theme="blue"][lang="en"] .site-header .lang [data-lang="en"],
html[data-theme="dark"][lang="en"] .site-header .lang [data-lang="en"] {
  color: #ffffff !important;
}

/* When Español is the active language */
html[data-theme="blue"][lang="es"] .site-header .lang [data-lang="es"],
html[data-theme="dark"][lang="es"] .site-header .lang [data-lang="es"] {
  color: #ffffff !important;
}
/* 1) Hero subline: dark text in Light/Slate, keep light in Blue/Dark */
html:not([data-theme]) body.page-course-details .hero-sub,
html[data-theme="light"] body.page-course-details .hero-sub,
html[data-theme="slate"] body.page-course-details .hero-sub {
  color: #111827 !important; /* near-black */
}

/* If Blue/Dark need to stay light over darker backgrounds */
html[data-theme="blue"] body.page-course-details .hero-sub,
html[data-theme="dark"] body.page-course-details .hero-sub {
  color: #e5e7eb !important; /* light gray */
}

/* 2) CD pills, step numbers, and icons: darker blue + visible outline */
body.page-course-details .cd-pill {
  background: #d7e7ff; /* darker than the old pale blue */
  color: #0b3b7a;
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid rgba(30,136,229,0.55);
  font-weight: 600;
}

body.page-course-details .cd-step .num {
  background: #d7e7ff;
  color: #0b3b7a;
  border-radius: 999px;
  border: 1px solid rgba(30,136,229,0.7);
  min-width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

body.page-course-details .cd-icon {
  border-radius: 999px;
  background: #e3edff;
  border: 1px solid rgba(30,136,229,0.35);
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1E88E5;
}

/* 3) Remove horizontal line above footer on ALL pages */
.site-footer {
  border-top: none !important;
}

/* 4) Blue/Dark modes: make key headings/pills white for contrast */

/* Hero heading */
html[data-theme="blue"] body.page-course-details h1,
html[data-theme="dark"] body.page-course-details h1 {
  color: #f9fafb !important;
}

/* Hero bullets text under each icon */
html[data-theme="blue"] body.page-course-details .cd-bullets .item div,
html[data-theme="dark"] body.page-course-details .cd-bullets .item div {
  color: #e5e7eb !important;


/* Force the 4 “At a glance / pricing / final / how it works” hero boxes to stay WHITE in all themes */
body.page-course-details .cd-bullets .item{
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid rgba(148,163,184,0.6) !important;
  border-radius:16px;
}

/* Override theme-specific light text inside those boxes */
html[data-theme="blue"] body.page-course-details .cd-bullets .item div,
html[data-theme="dark"] body.page-course-details .cd-bullets .item div{
  color:#111827 !important;
}
}

/* Trust pills + icon chips */
html[data-theme="blue"] body.page-course-details .cd-pill,
html[data-theme="dark"] body.page-course-details .cd-pill,
html[data-theme="blue"] body.page-course-details .cd-icon,
html[data-theme="dark"] body.page-course-details .cd-icon {
  color: #f9fafb !important;
  border-color: rgba(191,219,254,0.9) !important;
  background: rgba(37,99,235,0.75) !important;
}

/* Section headings below hero */
html[data-theme="blue"] body.page-course-details .cd-section > .cd-container > h2,
html[data-theme="dark"] body.page-course-details .cd-section > .cd-container > h2 {
  color: #f9fafb !important;
}

/* Also the “Quick tour (60 sec)” heading inside .cd-video */
html[data-theme="blue"] body.page-course-details .cd-video h2,
html[data-theme="dark"] body.page-course-details .cd-video h2 {
  color: #f9fafb !important;
}

/* 5) Blue mode: slightly stronger contrast on surfaces */
html[data-theme="blue"] body.page-course-details {
  /* slightly lighter than the deepest blue so cards/sections stand out */
  background-color: #021a3a;
}

html[data-theme="blue"] body.page-course-details .cd-section {
  background: transparent; /* let page bg show; cards will sit on top */
}

/* 6) Dark mode: keep cards WHITE with dark text */

html[data-theme="dark"] body.page-course-details .cd-card {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: rgba(148,163,184,0.6) !important;
}

/* "How it works" card specifically: white-on-dark-page in Dark mode */
html[data-theme="dark"] body.page-course-details .cd-hero .cd-card {
  background: #ffffff !important;
  color: #111827 !important;
}

/* Calculator + compare table cards in Dark mode: same treatment */
html[data-theme="dark"] body.page-course-details .cd-section .cd-card {
  background: #ffffff !important;
  color: #111827 !important;
}

/* Keep the compare table green/red pills visible in all modes */
body.page-course-details .cd-compare td.yes {
  color: #16a34a; /* green checkmarks */
  font-weight: 700;
}
body.page-course-details .cd-compare td.no {
  color: #dc2626; /* red X / ? */
  font-weight: 700;
}

/* 7) Dark mode headings inside cards go back to dark text (not white) */
html[data-theme="dark"] body.page-course-details .cd-card h3,
html[data-theme="dark"] body.page-course-details .cd-card strong,
html[data-theme="dark"] body.page-course-details .cd-card p {
  color: #111827 !important;
}

/* 8) Ensure calculator label text stays readable in all themes */
body.page-course-details section .cd-card label,
body.page-course-details section .cd-card label span,
body.page-course-details section .cd-card #discount-result {
  color: inherit;
}
/* v26.53 — Course Details fine-tune: badge, steps, icons, testimonials */

/* 1) Top badge "Free re-entry for 90 days" / "Reingreso gratis por 90 días"
      → match trust pill styling in all modes */
body.page-course-details .cd-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #d7e7ff; /* same family as trust pills */
  color: #0b3b7a;
  border: 1px solid rgba(30,136,229,0.55);
  font-weight: 600;
  font-size: 0.9rem;
}

/* 2) Dark mode: step numbers 1–4 in "How it works" keep the same blue pill */
html[data-theme="dark"] body.page-course-details .cd-step .num {
  background: #d7e7ff !important;
  color: #0b3b7a !important;
  border-radius: 999px !important;
  border: 1px solid rgba(30,136,229,0.7) !important;
}

/* 3) Testimonials (“Loved by Texas drivers”) —
      boxes always white with dark text, all modes */
body.page-course-details .cd-testimonials .cd-testimonial {
  background: #ffffff !important;
  color: #111827 !important;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,0.5);
  padding: 14px 16px;
  box-shadow: 0 8px 18px rgba(15,23,42,0.06);
}

/* Stars gold in every mode */
body.page-course-details .cd-testimonials .cd-testimonial .cd-stars {
  color: #fbbf24 !important;  /* warm gold */
  font-size: 1.05rem;
}

/* 4) Icons in the 6 "What’s included / Qué incluye" boxes
      → use same pill color + outline as trust pills, all themes */
body.page-course-details .cd-section .grid .cd-card .cd-icon {
  background: #d7e7ff !important; /* match trust pill background */
  color: #0b3b7a !important;
  border-radius: 999px !important;
  border: 1px solid rgba(30,136,229,0.55) !important;
  padding: 6px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ensure SVGs inside those icons inherit the pill color cleanly */
body.page-course-details .cd-section .grid .cd-card .cd-icon svg,
body.page-course-details .cd-section .grid .cd-card .cd-icon * {
  color: inherit !important;
  stroke: currentColor !important;
}

/* 5) Safety: in Dark mode, testimonials stay white even if a global dark rule exists */
html[data-theme="dark"] body.page-course-details .cd-testimonials .cd-testimonial p,
html[data-theme="dark"] body.page-course-details .cd-testimonials .cd-testimonial .cd-user {
  color: #111827 !important;
}
/* v26.54 — Top badge theme alignment for Blue + Dark */

/* BLUE mode — match trust pills exactly */
html[data-theme="blue"] body.page-course-details .cd-badge {
  background: #d7e7ff !important;
  color: #0b3b7a !important;
  border: 1px solid rgba(30,136,229,0.55) !important;
}

/* DARK mode — trust pill style stays the same (light blue pill) */
html[data-theme="dark"] body.page-course-details .cd-badge {
  background: #d7e7ff !important;
  color: #0b3b7a !important;
  border: 1px solid rgba(30,136,229,0.55) !important;
}
/* v26.55 — Match top badge to trust pills in Blue/Dark */

/* Blue + Dark: same as the three trust pills */
html[data-theme="blue"] body.page-course-details .cd-badge,
html[data-theme="dark"] body.page-course-details .cd-badge {
  background: #0b3b7a !important;                 /* dark navy, same as pills */
  color: #ffffff !important;                      /* white text */
  border: 1px solid rgba(255,255,255,0.75) !important; /* light/white outline */
}
/* v26.55 — Match top badge to trust pills in Blue/Dark */

/* Blue + Dark: same as the three trust pills */
html[data-theme="blue"] body.page-course-details .cd-badge,
html[data-theme="dark"] body.page-course-details .cd-badge {
  background: #2563EBBF !important;                 /* dark navy, same as pills */
  color: #ffffff !important;                      /* white text */
  border: 1px solid rgba(255,255,255,0.75) !important; /* light/white outline */
}
/* v27.0 — Global trust-pill + icon system synced to Course Details */

/* Base pill (light/slate look) */
.trust-pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:600;
  border:1px solid rgba(148,163,184,0.8); /* soft gray */
  background:#f9fafb;
  color:#0f172a;
  white-space:nowrap;
}

/* Optional: icon inside pill */
.trust-pill svg {
  width:16px;
  height:16px;
}

/* Blue theme: dark blue fill, white text, light outline */
html[data-theme="blue"] .trust-pill {
  background:#2563EBBF; /* same as your cd-badge / cd-pill */
  color:#ffffff;
  border-color:rgba(255,255,255,0.75);
}

/* Dark theme: same styling as blue (high contrast chip) */
html[data-theme="dark"] .trust-pill {
  background:#2563EBBF;
  color:#ffffff;
  border-color:rgba(255,255,255,0.75);
}

/* Slate theme: slightly stronger gray than light */
html[data-theme="slate"] .trust-pill {
  background:#e5ecf7;
  color:#0f172a;
  border-color:rgba(148,163,184,0.9);
}

/* Light theme: keep soft neutral chip */
html[data-theme="light"] .trust-pill {
  background:#f9fafb;
  color:#0f172a;
  border-color:rgba(148,163,184,0.8);
}

/* Global “trust icon” (matches cd-icon) */
.trust-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.6);
  background:#f9fafb;
}

.trust-icon svg {
  width:18px;
  height:18px;
}

/* Blue/Dark: same ring/contrast as Course Details */
html[data-theme="blue"] .trust-icon,
html[data-theme="dark"] .trust-icon {
  background:#0b2144; /* slightly darker inner */
  border-color:rgba(255,255,255,0.45);
  color:#60a5fa;
}
/* v27.1 — Global feature card / compare box look */

/* Generic card for feature boxes, compare tables, calculators */
.feature-card,
.cd-card,
.cards .card {
  background:#ffffff;
  color:#0f172a;
  border-radius:16px;
  border:1px solid rgba(148,163,184,0.4);
  box-shadow:0 10px 24px rgba(15,23,42,0.10);
}

/* Make sure inner text stays dark even in Blue/Dark */
html[data-theme="blue"] .feature-card,
html[data-theme="dark"] .feature-card,
html[data-theme="blue"] .cd-card,
html[data-theme="dark"] .cd-card,
html[data-theme="blue"] .cards .card,
html[data-theme="dark"] .cards .card {
  background:#ffffff;
  color:#0f172a;
}

/* Comparison table checkmarks (reuse Course Details green/red) */
.feature-card table td.yes,
.cd-card table td.yes {
  color:#16a34a;        /* green */
  font-weight:700;
}

.feature-card table td.no,
.cd-card table td.no {
  color:#dc2626;        /* red */
  font-weight:700;
}
/* v27.2 — Global page background per theme (updated) */

html[data-theme="light"] body,
html[data-theme="slate"] body {
  background:#f5f7fa;
  color:#0f172a;
}

/* Blue: deep navy, same as Course Details feel */
html[data-theme="blue"] body {
  background:#021b33;
  color:#e5e7eb;
}

/* Dark: true dark gray/near-black, distinct from Blue */
html[data-theme="dark"] body {
  background:#020617;
  color:#e5e7eb;
}

/* Ensure section headings stay bright enough in Blue/Dark */
html[data-theme="blue"] h1,
html[data-theme="blue"] h2,
html[data-theme="blue"] h3,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3 {
  color:#f9fafb;
}
/* v27.3 — Footer background follows body in Blue/Dark */

html[data-theme="blue"] .site-footer {
  background:#021b33 !important;
}

html[data-theme="dark"] .site-footer {
  background:#06080b !important;
}
/* v27.4 — Course Details "How it works" card text stays dark in Blue mode */
html[data-theme="blue"] body.page-course-details .cd-hero .cd-card,
html[data-theme="blue"] body.page-course-details .cd-hero .cd-card h3,
html[data-theme="blue"] body.page-course-details .cd-hero .cd-card .cd-step div {
  color: #111827 !important;  /* near-black */
}
/* v27.5 — Course Details insurance calculator styling (all themes) */

/* Stronger layout for the top grid row */
body.page-course-details section .cd-card #insurer,
body.page-course-details section .cd-card #miles {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid rgba(30,136,229,0.75); /* brand blue frame */
  font-size: 0.95rem;
  font-weight: 600;
  background: #e7f0ff;                     /* soft blue fill inside white card */
  color: #0b3b7a;
  box-shadow: 0 3px 8px rgba(15,23,42,0.12);
  box-sizing: border-box;
  appearance: none;                        /* cleaner select in many browsers */
}

/* Label text a bit bolder and cleaner */
body.page-course-details section .cd-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
}

/* Result pill: stands out strongly inside the card */
body.page-course-details #discount-result {
  padding: 12px 14px;
  border-radius: 14px;
  background: #0b3b7a;                     /* deep navy */
  color: #f9fafb !important;               /* white text for contrast */
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(15,23,42,0.25);
}

/* Fine-tune the footnote under the calculator */
body.page-course-details section .cd-card p {
  font-size: 0.85rem;
  line-height: 1.4;
  opacity: 0.9;
}
/* v27.7 — Bulletproof Insurer dropdown arrow */

/* Base: Light / Slate */
body.page-course-details section .cd-card select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;

  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml;utf8,<svg fill='none' stroke='%230b3b7a' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M6 9l6 6 6-6'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 18px 18px !important;

  padding-right: 40px !important;
  cursor: pointer;
}

/* Blue + Dark: white arrow for contrast */
html[data-theme="blue"] body.page-course-details section .cd-card select,
html[data-theme="dark"] body.page-course-details section .cd-card select {
  background-image: url("data:image/svg+xml;utf8,<svg fill='none' stroke='%23ffffff' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M6 9l6 6 6-6'/></svg>") !important;
}


/* NUMBER INPUT — restore spinner visibility */
body.page-course-details section .cd-card input[type="number"] {
  appearance: textfield;      /* Chrome/Edge cleanup */
  -moz-appearance: textfield; /* Firefox cleanup */
  position: relative;
  padding-right: 38px !important;
}

body.page-course-details section .cd-card input[type="number"]::-webkit-inner-spin-button,
body.page-course-details section .cd-card input[type="number"]::-webkit-outer-spin-button {
  opacity: 1 !important;
  background: transparent !important;
  margin: 0;
}

/* Custom spinner icons — always visible and theme-matched */
body.page-course-details section .cd-card input[type="number"] {
  background-image:
    url("data:image/svg+xml;utf8,<svg fill='none' stroke='%230b3b7a' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5-5 5 5'/></svg>"),
    url("data:image/svg+xml;utf8,<svg fill='none' stroke='%230b3b7a' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M7 14l5 5 5-5'/></svg>");
  background-position:
    right 12px 6px,     /* up arrow */
    right 12px calc(100% - 6px); /* down arrow */
  background-repeat: no-repeat;
  background-size: 18px;
}

/* Blue + Dark theme spinner color → white */
html[data-theme="blue"] body.page-course-details section .cd-card input[type="number"],
html[data-theme="dark"] body.page-course-details section .cd-card input[type="number"] {
  background-image:
    url("data:image/svg+xml;utf8,<svg fill='none' stroke='%23ffffff' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5-5 5 5'/></svg>"),
    url("data:image/svg+xml;utf8,<svg fill='none' stroke='%23ffffff' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M7 14l5 5 5-5'/></svg>");
}
/* v27.8 — Normalize insurer arrow: same navy chevron in ALL modes */
html[data-theme="blue"] body.page-course-details section .cd-card select,
html[data-theme="dark"] body.page-course-details section .cd-card select {
  background-image: url("data:image/svg+xml;utf8,<svg fill='none' stroke='%230b3b7a' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M6 9l6 6 6-6'/></svg>") !important;
}
/* v27.3 — Slate header white + trust chip/icon tuning */

/* 1) Slate color mode: keep header white like Light/Blue/Dark */
html[data-theme="slate"] .site-header {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* 2) Trust pills — Light/Slate use same light blue chip as Course Details */

/* No explicit data-theme (fallback), Light, and Slate */
html:not([data-theme]) .trust-pill,
html[data-theme="light"] .trust-pill,
html[data-theme="slate"] .trust-pill {
  background: #D7E7FF !important;
  color: #0b3b7a !important;
  border-color: rgba(30,136,229,0.55) !important;
}

/* Blue/Dark trust pills were already set correctly above, no change here */

/* 3) Trust icons — same chip logic as Course Details */
/* Base look for Light/Slate (and default) */
.trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(30,136,229,0.55);
  background: #D7E7FF;
  color: #1E88E5; /* icon line color in Light/Slate */
}

.trust-icon svg {
  width: 18px;
  height: 18px;
}

/* Blue/Dark: same D7E7FF pill, darker inner icon color */
html[data-theme="blue"] .trust-icon,
html[data-theme="dark"] .trust-icon {
  background: #D7E7FF !important;
  border-color: rgba(30,136,229,0.55) !important;
  color: #0b3b7a !important;
}

/* 4) Extra breathing room under the 6 trust pills on the home six-box grid */
.sixboxes .trust-pill {
  margin-bottom: 2px;
}
/* v27.4 — Remove header bottom border in Slate mode */
html[data-theme="slate"] .site-header {
  border-bottom: none !important;
  box-shadow: none !important; /* in case any theme CSS applies a shadow */
}
/* v27.5 — Slate mode footer uses same background as body */
html[data-theme="slate"] .site-footer {
  background: #f5f7fa !important;  /* match body */
}
/* v27.6 — Restore correct Light mode background on all pages */
html[data-theme="light"] body {
  background: #ffffff !important;  /* pure white, true Light mode */
  color: #0f172a !important;
}

html[data-theme="light"] .site-header,
html[data-theme="light"] .site-footer {
  background: #ffffff !important;
}

/* v27.9 — FINAL trust-pill + trust-icon theme alignment (matches Course Details) */

/* Light / Slate / default: D7E7FF pill, dark text, blue icon, dark blue outline */
html:not([data-theme]) .trust-pill,
html[data-theme="light"] .trust-pill,
html[data-theme="slate"] .trust-pill {
  background: #D7E7FF !important;
  color: #111827 !important; /* dark, readable text */
  border-color: rgba(30,136,229,0.55) !important;
}

html:not([data-theme]) .trust-icon,
html[data-theme="light"] .trust-icon,
html[data-theme="slate"] .trust-icon {
  background: #D7E7FF !important;
  color: #1E88E5 !important; /* icon line color */
  border-color: rgba(30,136,229,0.55) !important;
}

/* Blue / Dark: 2563EBBF pill, white text/icon, light blue outline */
html[data-theme="blue"] .trust-pill,
html[data-theme="dark"] .trust-pill {
  background: #2563EBBF !important;
  color: #ffffff !important;
  border-color: rgba(191,219,254,0.9) !important; /* light blue outline */
}

html[data-theme="blue"] .trust-icon,
html[data-theme="dark"] .trust-icon {
  background: #2563EBBF !important;
  color: #ffffff !important; /* white icon */
  border-color: rgba(191,219,254,0.9) !important;
}

/* Ensure icon sizing stays consistent */
.trust-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.trust-icon svg {
  width: 18px;
  height: 18px;
}
/* v27.9 — Icon outline fix for trust icons + Course Details icons */

/* Trust icons on homepage (six boxes, footer, etc.)
   - Outline shapes only (circle/rect/path)
   - Do NOT touch <text>, so the $ symbol stays visible
*/
.trust-icon svg circle,
.trust-icon svg rect,
.trust-icon svg path {
  fill: none !important;
}

/* Course Details icons:
   same rule — outline style only, no solid blobs
*/
body.page-course-details .cd-icon svg circle,
body.page-course-details .cd-icon svg rect,
body.page-course-details .cd-icon svg path {
  fill: none !important;
}
/* v27.10 — Remove unwanted stroke from dollar-sign text inside trust icons */
.trust-icon svg text {
  stroke: none !important;    /* removes the inner outline */
  fill: currentColor !important;  /* keeps the $ symbol crisp */
}
/* === Global icon outline helpers (trust + course details only) === */
/* Keeps these SVG icons as clean stroked outlines — no weird filled triangles */

.trust-icon svg,
.trust-icon svg *,
.cd-icon svg,
.cd-icon svg * {
  fill: none !important;
  stroke: currentColor !important;
}

/* Consistent sizing for these icons */
.trust-icon svg,
.cd-icon svg {
  width: 18px;
  height: 18px;
}
/* v27.9 — Force Course page footer background to match body in all themes */

/* Light: pure white */
html[data-theme="light"] body.page-course .site-footer,
html:not([data-theme]) body.page-course .site-footer {
  background: #ffffff !important;
}

/* Slate: same soft gray as body */
html[data-theme="slate"] body.page-course .site-footer {
  background: #f5f7fa !important;
}

/* Blue: deep navy body color */
html[data-theme="blue"] body.page-course .site-footer {
  background: #021b33 !important;
}

/* Dark: near-black */
html[data-theme="dark"] body.page-course .site-footer {
  background: #020617 !important;
}
/* v27.10 — Course Details cd-lang: active label white in Blue/Dark only */

html[data-theme="blue"] body.page-course-details .cd-lang a[aria-selected="true"],
html[data-theme="dark"] body.page-course-details .cd-lang a[aria-selected="true"],
html[data-theme="blue"] body.page-course-details.es .cd-lang a[aria-selected="true"],
html[data-theme="dark"] body.page-course-details.es .cd-lang a[aria-selected="true"] {
  color: #ffffff !important;  /* force white text on the active half */
}
/* v27.11 — Legal / Privacy pages theme alignment + content padding */

/* 0) Make sure these pages follow the same body background per theme */
html[data-theme="light"] body.page-privacy-request,
html[data-theme="light"] body.page-privacy,
html[data-theme="light"] body.page-terms,
html[data-theme="light"] body.page-accessibility,
html[data-theme="light"] body.page-sitemap {
  background:#ffffff !important;
  color:#0f172a !important;
}

html[data-theme="slate"] body.page-privacy-request,
html[data-theme="slate"] body.page-privacy,
html[data-theme="slate"] body.page-terms,
html[data-theme="slate"] body.page-accessibility,
html[data-theme="slate"] body.page-sitemap {
  background:#f5f7fa !important;
  color:#0f172a !important;
}

html[data-theme="blue"] body.page-privacy-request,
html[data-theme="blue"] body.page-privacy,
html[data-theme="blue"] body.page-terms,
html[data-theme="blue"] body.page-accessibility,
html[data-theme="blue"] body.page-sitemap {
  background:#021b33 !important;
  color:#e5e7eb !important;
}

html[data-theme="dark"] body.page-privacy-request,
html[data-theme="dark"] body.page-privacy,
html[data-theme="dark"] body.page-terms,
html[data-theme="dark"] body.page-accessibility,
html[data-theme="dark"] body.page-sitemap {
  background:#020617 !important;
  color:#e5e7eb !important;
}

/* 1) Content wrapper = white card with breathing room (fixes box hugging text) */
body.page-privacy-request main > .container,
body.page-privacy main > .container,
body.page-terms main > .container,
body.page-accessibility main > .container,
body.page-sitemap main > .container {
  background:#ffffff;
  border-radius:16px;
  border:1px solid rgba(148,163,184,0.5);
  box-shadow:0 10px 24px rgba(15,23,42,0.08);
  padding:18px 18px 22px;
  margin:18px auto 26px;
}

/* Blue/Dark: keep that box white with dark text for readability */
html[data-theme="blue"] body.page-privacy-request main > .container,
html[data-theme="blue"] body.page-privacy main > .container,
html[data-theme="blue"] body.page-terms main > .container,
html[data-theme="blue"] body.page-accessibility main > .container,
html[data-theme="blue"] body.page-sitemap main > .container,
html[data-theme="dark"] body.page-privacy-request main > .container,
html[data-theme="dark"] body.page-privacy main > .container,
html[data-theme="dark"] body.page-terms main > .container,
html[data-theme="dark"] body.page-accessibility main > .container,
html[data-theme="dark"] body.page-sitemap main > .container {
  background:#ffffff !important;
  color:#0f172a !important;
}

/* Slightly tighter padding on smaller screens */
@media (max-width:640px){
  body.page-privacy-request main > .container,
  body.page-privacy main > .container,
  body.page-terms main > .container,
  body.page-accessibility main > .container,
  body.page-sitemap main > .container {
    padding:14px 14px 18px;
    margin:14px auto 20px;
  }
}

/* 2) Privacy Request: normalize inputs to match global form style */
body.page-privacy-request input,
body.page-privacy-request select,
body.page-privacy-request textarea {
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border, #e5e7eb);
  font-size:16px;
  background:#ffffff;
  color:#0f172a;
  box-sizing:border-box;
}

body.page-privacy-request label {
  font-size:.95rem;
  font-weight:600;
  color:#0f172a;
}

/* Inputs stay light in Blue/Dark so they don't disappear into the background */
html[data-theme="blue"] body.page-privacy-request input,
html[data-theme="blue"] body.page-privacy-request select,
html[data-theme="blue"] body.page-privacy-request textarea,
html[data-theme="dark"] body.page-privacy-request input,
html[data-theme="dark"] body.page-privacy-request select,
html[data-theme="dark"] body.page-privacy-request textarea {
  background:#ffffff !important;
  color:#0f172a !important;
}

/* 3) Footer: force these pages to use the same footer background as global */

html[data-theme="light"] body.page-privacy-request .site-footer,
html[data-theme="light"] body.page-privacy .site-footer,
html[data-theme="light"] body.page-terms .site-footer,
html[data-theme="light"] body.page-accessibility .site-footer,
html[data-theme="light"] body.page-sitemap .site-footer {
  background:#ffffff !important;
}

html[data-theme="slate"] body.page-privacy-request .site-footer,
html[data-theme="slate"] body.page-privacy .site-footer,
html[data-theme="slate"] body.page-terms .site-footer,
html[data-theme="slate"] body.page-accessibility .site-footer,
html[data-theme="slate"] body.page-sitemap .site-footer {
  background:#f5f7fa !important;
}

html[data-theme="blue"] body.page-privacy-request .site-footer,
html[data-theme="blue"] body.page-privacy .site-footer,
html[data-theme="blue"] body.page-terms .site-footer,
html[data-theme="blue"] body.page-accessibility .site-footer,
html[data-theme="blue"] body.page-sitemap .site-footer {
  background:#061827 !important;
}

html[data-theme="dark"] body.page-privacy-request .site-footer,
html[data-theme="dark"] body.page-privacy .site-footer,
html[data-theme="dark"] body.page-terms .site-footer,
html[data-theme="dark"] body.page-accessibility .site-footer,
html[data-theme="dark"] body.page-sitemap .site-footer {
  background:#020617 !important;
}

/* Make sure footer text/links stay readable in Blue/Dark on these pages */
html[data-theme="blue"] body.page-privacy-request .site-footer p,
html[data-theme="blue"] body.page-privacy .site-footer p,
html[data-theme="blue"] body.page-terms .site-footer p,
html[data-theme="blue"] body.page-accessibility .site-footer p,
html[data-theme="blue"] body.page-sitemap .site-footer p,
html[data-theme="blue"] body.page-privacy-request .site-footer .links a,
html[data-theme="blue"] body.page-privacy .site-footer .links a,
html[data-theme="blue"] body.page-terms .site-footer .links a,
html[data-theme="blue"] body.page-accessibility .site-footer .links a,
html[data-theme="blue"] body.page-sitemap .site-footer .links a,
html[data-theme="dark"] body.page-privacy-request .site-footer p,
html[data-theme="dark"] body.page-privacy .site-footer p,
html[data-theme="dark"] body.page-terms .site-footer p,
html[data-theme="dark"] body.page-accessibility .site-footer p,
html[data-theme="dark"] body.page-sitemap .site-footer p,
html[data-theme="dark"] body.page-privacy-request .site-footer .links a,
html[data-theme="dark"] body.page-privacy .site-footer .links a,
html[data-theme="dark"] body.page-terms .site-footer .links a,
html[data-theme="dark"] body.page-accessibility .site-footer .links a,
html[data-theme="dark"] body.page-sitemap .site-footer .links a {
  color:#f5f7fa !important;
}
/******************************************************
 * v27.12 — Privacy Request Final Patch (EN + ES)
 * Safe to append to end of site-shared.css
 ******************************************************/

/* 1) Make labels WHITE on Blue/Dark (currently unreadable) */
html[data-theme="blue"] body.page-privacy-request label,
html[data-theme="dark"] body.page-privacy-request label {
  color:#ffffff !important;
}

/* Also fix inline descriptions */
html[data-theme="blue"] body.page-privacy-request main p,
html[data-theme="dark"] body.page-privacy-request main p {
  color:#ffffff !important;
}

/* 2) Remove textarea resize handle + weird arrows */
body.page-privacy-request textarea {
  resize: none !important;
  overflow-y: auto !important; /* keep scrolling, remove grabber */
}

body.page-privacy-request textarea::-webkit-resizer {
  display:none !important;
}

/* 3) Fix the “extra strip” under footer on some pages */
html, body {
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* 4) Strengthen card wrapper selector — some pages wrap content in <main>, 
      others wrap inside <div class="content"> — so wrap both. */
body.page-privacy-request main,
body.page-privacy-request main .container,
body.page-privacy-request .content,
body.page-privacy main,
body.page-terms main,
body.page-accessibility main,
body.page-sitemap main {
  display: block;
}

/* If the card wrapper is missing (rare), auto-wrap the contents */
body.page-privacy-request main > *:not(.container) {
  max-width:720px;
  margin-inline:auto;
}

/* 5) Placeholders: ensure they show up in Blue/Dark */
html[data-theme="blue"] body.page-privacy-request ::placeholder,
html[data-theme="dark"] body.page-privacy-request ::placeholder {
  color:#cbd5e1 !important; /* soft gray */
}

/* 6) Dropdown (“Request Type”) — missing ES options */
body.page-privacy-request select {
  color:#0f172a !important;
}
/* CONTACT: dropdown must not create horizontal scroll + must stay visible */
body.page-contact .site-header,
body.page-contact .header-inner,
body.page-contact .nav,
body.page-contact .dropdown{
  overflow: visible !important;
}

body.page-contact .dropdown .menu{
  left: auto !important;
  right: 0 !important;
  width: min(260px, calc(100vw - 16px)) !important;
  max-width: calc(100vw - 16px) !important;
  box-sizing: border-box !important;
  z-index: 9999 !important;

  /* keep it on-screen vertically */
  max-height: calc(100vh - var(--sd-header-h, 72px) - 16px) !important;
  overflow: auto !important;

  /* prevent any “push page wider” behavior */
  overflow-wrap: anywhere !important;
}

/* 7) Matching white-card margin in Blue/Dark for consistency */
html[data-theme="blue"] body.page-privacy-request main > .container,
html[data-theme="dark"] body.page-privacy-request main > .container {
  margin-top:32px !important;
  margin-bottom:40px !important;
}
/******************************************************
 * v27.12b — Legal pages: footer strip + card padding
 * Append at the very end of site-shared.css
 ******************************************************/

/* 1) Kill the footer color "strip" by syncing <html> bg to body */

/* Light / default */
html:not([data-theme]),
html[data-theme="light"] {
  background: #ffffff !important;
}

/* Slate */
html[data-theme="slate"] {
  background: #f5f7fa !important;
}

/* Blue */
html[data-theme="blue"] {
  background: #021b33 !important;   /* same as body + footer */
}

/* Dark */
html[data-theme="dark"] {
  background: #020617 !important;   /* same as body + footer */
}


/* 2) Privacy Request card: real white box with padding + margin
      (hit both EN + ES, regardless of inner .container structure) */

/* Treat the <main> itself as the card, and also any direct .container */
body.page-privacy-request main,
body.page-privacy-request main > .container {
  max-width: 880px;
  margin: 32px auto 40px !important;   /* space above/below the box */
  padding: 22px 22px 26px !important;  /* space INSIDE the box */
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid rgba(148,163,184,0.5) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,0.10) !important;
}

/* Make sure headings/intro text inside the card use dark text in all themes */
body.page-privacy-request main h1,
body.page-privacy-request main h2,
body.page-privacy-request main p {
  color: #0f172a !important;
}
/******************************************************
 * v27.12c — Privacy Request text visibility (all themes)
 ******************************************************/

/* Headings + intro text inside the white card */
body.page-privacy-request main h1,
body.page-privacy-request main h2,
body.page-privacy-request main h3,
body.page-privacy-request main p,
body.page-privacy-request main span,
body.page-privacy-request main li {
  color: #0f172a !important;   /* dark, readable on white */
}

/* Form labels */
body.page-privacy-request label {
  color: #0f172a !important;
  font-weight: 600;
}

/* Inputs, selects, textareas: dark text, clear borders */
body.page-privacy-request input,
body.page-privacy-request select,
body.page-privacy-request textarea {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(148,163,184,0.9) !important;
  box-sizing: border-box;
}

/* Placeholder text also readable */
body.page-privacy-request input::placeholder,
body.page-privacy-request textarea::placeholder {
  color: #6b7280 !important;   /* medium gray */
  opacity: 1 !important;
}
/******************************************************
 * v27.12d — Privacy Request card: force dark text in Blue/Dark
 ******************************************************/

/* Make the whole white card use dark text in Blue/Dark */
html[data-theme="blue"] body.page-privacy-request main > .container,
html[data-theme="dark"] body.page-privacy-request main > .container {
  color: #0f172a !important;
}

/* And every element inside that card (headings, labels, help text, etc.) */
html[data-theme="blue"] body.page-privacy-request main > .container * ,
html[data-theme="dark"] body.page-privacy-request main > .container * {
  color: #0f172a !important;
}

/* Keep the red submit button readable */
html[data-theme="blue"] body.page-privacy-request main > .container button[type="submit"],
html[data-theme="dark"] body.page-privacy-request main > .container button[type="submit"] {
  color: #ffffff !important;
}

/* Keep placeholders visible too */
html[data-theme="blue"] body.page-privacy-request input::placeholder,
html[data-theme="blue"] body.page-privacy-request textarea::placeholder,
html[data-theme="dark"] body.page-privacy-request input::placeholder,
html[data-theme="dark"] body.page-privacy-request textarea::placeholder {
  color: #6b7280 !important;
  opacity: 1 !important;
}
/* v27.13 — Bulletproof Privacy Request text visibility on Blue/Dark */

html[data-theme="blue"] body.page-privacy-request,
html[data-theme="dark"] body.page-privacy-request {
  color: #0f172a !important;
}

/* Card heading + helper text inside the white card */
html[data-theme="blue"] body.page-privacy-request h1,
html[data-theme="dark"] body.page-privacy-request h1,
html[data-theme="blue"] body.page-privacy-request h2,
html[data-theme="dark"] body.page-privacy-request h2,
html[data-theme="blue"] body.page-privacy-request p,
html[data-theme="dark"] body.page-privacy-request p,
html[data-theme="blue"] body.page-privacy-request label,
html[data-theme="dark"] body.page-privacy-request label,
html[data-theme="blue"] body.page-privacy-request span,
html[data-theme="dark"] body.page-privacy-request span {
  color: #0f172a !important;   /* dark, readable on white card */
}

/* Inputs/select/textarea: keep white card-style in Blue/Dark */
html[data-theme="blue"] body.page-privacy-request input,
html[data-theme="blue"] body.page-privacy-request select,
html[data-theme="blue"] body.page-privacy-request textarea,
html[data-theme="dark"] body.page-privacy-request input,
html[data-theme="dark"] body.page-privacy-request select,
html[data-theme="dark"] body.page-privacy-request textarea {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #d1d5db !important;
}

/* Details textarea: kill the weird resize/extra arrows */
body.page-privacy-request textarea {
  resize: vertical;         /* only up/down resize or remove entirely if you want */
  overflow: auto;
}
/* v27.14 — Privacy Request intro sentence visibility (EN + ES) */

/* Make the entire white card and its plain text children use dark ink
   in Blue/Dark modes, without touching the red CTA button text */
html[data-theme="blue"] body.page-privacy-request main > .container,
html[data-theme="dark"] body.page-privacy-request main > .container {
  color: #0f172a !important;
}

html[data-theme="blue"] body.page-privacy-request main > .container p,
html[data-theme="blue"] body.page-privacy-request main > .container div,
html[data-theme="blue"] body.page-privacy-request main > .container span,
html[data-theme="blue"] body.page-privacy-request main > .container small,
html[data-theme="dark"] body.page-privacy-request main > .container p,
html[data-theme="dark"] body.page-privacy-request main > .container div,
html[data-theme="dark"] body.page-privacy-request main > .container span,
html[data-theme="dark"] body.page-privacy-request main > .container small {
  color: #0f172a !important;
}
/* v27.15 — FINAL Privacy Request intro text visibility (EN + ES) */

/* Make all non-button text inside <main> dark on Privacy Request in Blue/Dark */
html[data-theme="blue"] body.page-privacy-request main,
html[data-theme="dark"] body.page-privacy-request main {
  color: #0f172a !important;
}

html[data-theme="blue"] body.page-privacy-request main p,
html[data-theme="blue"] body.page-privacy-request main div,
html[data-theme="blue"] body.page-privacy-request main span,
html[data-theme="blue"] body.page-privacy-request main small,
html[data-theme="dark"] body.page-privacy-request main p,
html[data-theme="dark"] body.page-privacy-request main div,
html[data-theme="dark"] body.page-privacy-request main span,
html[data-theme="dark"] body.page-privacy-request main small {
  color: #0f172a !important;
}

/* Keep the red Submit button text white so it doesn't get overridden */
html[data-theme="blue"] body.page-privacy-request main .cta,
html[data-theme="dark"] body.page-privacy-request main .cta,
html[data-theme="blue"] body.page-privacy-request main button[type="submit"],
html[data-theme="dark"] body.page-privacy-request main button[type="submit"] {
  color: #ffffff !important;
}
/* ============================================
   GLOBAL COURSE PAGE STYLING — v27.16.x
   Matches course-details & homepage standards
   ============================================ */

/* Card */
body.page-course .card,
body:not(.page-course) main .card {
  background:#ffffff;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:16px;
  padding:28px 28px 32px;
  box-shadow:0 10px 24px rgba(0,0,0,0.06);
}

/* Headings & text defaults */
body.page-course h1,
body.page-course p,
body.page-course li,
body.page-course ol {
  color:var(--ink);
}

/* Numbered chapter list */
body.page-course ol {
  padding-left:22px;
  margin-top:8px;
}
body.page-course ol li {
  margin-bottom:6px;
}

/* CTA alignment */
body.page-course .cta.big {
  display:inline-block;
  margin-top:18px;
}

/* -----------------------------------------
   COLOR MODES — EXACT MATCH TO COURSE-DETAILS
   ----------------------------------------- */

/* Light mode */
html[data-theme="light"] body.page-course {
  background:#ffffff;
}
html[data-theme="light"] body.page-course .card {
  background:#ffffff;
  border-color:rgba(0,0,0,0.08);
}

/* Slate mode */
html[data-theme="slate"] body.page-course {
  background:#f7f9fc; /* your slate body */
}
html[data-theme="slate"] body.page-course .card {
  background:#ffffff;
  border-color:rgba(0,0,0,0.10);
}

/* Blue mode */
html[data-theme="blue"] body.page-course {
  background:#0b3b7a; /* deep navy from details page */
  color:#ffffff;
}
html[data-theme="blue"] body.page-course .card {
  background:#ffffff10;
  border:1px solid rgba(255,255,255,0.25);
  color:#ffffff;
}
html[data-theme="blue"] body.page-course h1,
html[data-theme="blue"] body.page-course p,
html[data-theme="blue"] body.page-course ol,
html[data-theme="blue"] body.page-course li {
  color:#ffffff;
}
html[data-theme="blue"] body.page-course .cta.big {
  background:#2563EB; /* same CTA blue system-wide */
  color:#ffffff;
}

/* Dark mode */
html[data-theme="dark"] body.page-course {
  background:#111827; /* details-page dark */
  color:#ffffff;
}
html[data-theme="dark"] body.page-course .card {
  background:#ffffff08;
  border:1px solid rgba(255,255,255,0.15);
  color:#ffffff;
}
html[data-theme="dark"] body.page-course h1,
html[data-theme="dark"] body.page-course p,
html[data-theme="dark"] body.page-course ol,
html[data-theme="dark"] body.page-course li {
  color:#ffffff;
}
html[data-theme="dark"] body.page-course .cta.big {
  background:#2563EB;
  color:#ffffff;
}

/* Language toggle selected-state fix */
html[data-theme="blue"] .lang button.active,
html[data-theme="dark"] .lang button.active {
  color:#ffffff !important;
}
/* v27.12 — Course page: restore card look */
body.page-course .card,
body.page-course .container > .card,
body.page-course .course-wrap .card {
  background:#ffffff !important;
  color:#0f172a;
  border-radius:16px;
  border:1px solid rgba(148,163,184,0.4);
  box-shadow:0 10px 24px rgba(15,23,42,0.10);
  padding:18px 18px 22px !important;
}
/* v27.13 — Course page body/footer color lock */
html[data-theme="light"] body.page-course {
  background:#ffffff !important;
  color:#0f172a !important;
}

html[data-theme="slate"] body.page-course {
  background:#f5f7fa !important;
  color:#0f172a !important;
}

html[data-theme="blue"] body.page-course {
  background:#021b33 !important;
  color:#e5e7eb !important;
}

html[data-theme="dark"] body.page-course {
  background:#020617 !important;
  color:#e5e7eb !important;
}

/* Footer matches body on Course page */
html[data-theme="light"] body.page-course .site-footer {
  background:#ffffff !important;
}

html[data-theme="slate"] body.page-course .site-footer {
  background:#f5f7fa !important;
}

html[data-theme="blue"] body.page-course .site-footer {
  background:#021b33 !important;
}

html[data-theme="dark"] body.page-course .site-footer {
  background:#020617 !important;
}
/* v27.14 — Course page main spacing */
.page-course-main {
  padding:24px 0 28px;
  margin:0 auto;
}

@media (max-width:640px){
  .page-course-main {
    padding:18px 0 22px;
  }
}
/* v27.15 — Course page card + text + red CTA (all themes) */

/* Course main spacing */
.page-course-main {
  padding: 24px 0 28px;
  margin: 0 auto;
}

@media (max-width: 640px){
  .page-course-main {
    padding: 18px 0 22px;
  }
}

/* Restore proper white card with shadow on Course page */
body.page-course .page-course-main .card {
  background: #ffffff !important;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,0.4);
  box-shadow: 0 10px 24px rgba(15,23,42,0.10);
  padding: 18px 18px 22px !important;
}

/* Force dark, readable text inside the Course card in all themes */
body.page-course .page-course-main .card h1,
body.page-course .page-course-main .card p,
body.page-course .page-course-main .card li {
  color: #0f172a !important;
}

/* Extra safety for Blue/Dark (override global white headings) */
html[data-theme="blue"] body.page-course .page-course-main .card h1,
html[data-theme="blue"] body.page-course .page-course-main .card p,
html[data-theme="blue"] body.page-course .page-course-main .card li,
html[data-theme="dark"] body.page-course .page-course-main .card h1,
html[data-theme="dark"] body.page-course .page-course-main .card p,
html[data-theme="dark"] body.page-course .page-course-main .card li {
  color: #0f172a !important;
}

/* Course page CTA should always be the red primary */
body.page-course .page-course-main .card .cta.big,
body.page-course .course-cta-row .cta.big {
  background: var(--accent-red) !important;
  color: #ffffff !important;
}
/* v27.16 — Course card visibility in Light/Slate + tighter top spacing */

/* 1) Pull the course card closer to the header */
.page-course-main {
  padding-top: 14px;              /* was 24px; now tighter */
  padding-bottom: 26px;
}

@media (max-width: 640px){
  .page-course-main {
    padding-top: 10px;
    padding-bottom: 20px;
  }
}

/* 2) Light / Slate: give the page a soft gray background so the white card pops */
html:not([data-theme]) body.page-course,
html[data-theme="light"] body.page-course,
html[data-theme="slate"] body.page-course {
  background: #f5f7fa !important;   /* same soft gray you use elsewhere */
}

/* 3) Light / Slate: make the course card outline + shadow stronger */
html:not([data-theme]) body.page-course .page-course-main .card,
html[data-theme="light"] body.page-course .page-course-main .card,
html[data-theme="slate"] body.page-course .page-course-main .card {
  background: #ffffff !important;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,0.9) !important;   /* stronger outline */
  box-shadow: 0 12px 28px rgba(15,23,42,0.14) !important; /* deeper shadow */
}
/* v27.17 — tighten Course card internal spacing */

/* Applies to EN + ES course pages */
body.page-course .card,
body.es.page-course .card {
  padding-top: 24px !important;       /* was 48px+ (theme defaults) */
  padding-bottom: 28px !important;
}

/* Reduce the gap above <h1> */
body.page-course .card h1,
body.es.page-course .card h1 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Reduce the gap under the subtitle <p> */
body.page-course .card p,
body.es.page-course .card p {
  margin-top: 4px !important;
  margin-bottom: 12px !important;
}
/* v27.18 — Checkout card layout + spacing (EN + ES) */

/* 1) Make the main checkout content a centered white card */
body.page-checkout main > .container {
  max-width: 980px;
  margin: 22px auto 26px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,0.45);
  box-shadow: 0 10px 24px rgba(15,23,42,0.10);
  padding: 22px 22px 26px;
}

/* Slightly tighter on phones */
@media (max-width: 640px) {
  body.page-checkout main > .container {
    margin: 14px auto 20px;
    padding: 16px 14px 20px;
  }
}

/* 2) Heading + subtext spacing inside the card */
body.page-checkout main > .container h1 {
  margin-top: 0;
  margin-bottom: 8px;
}

body.page-checkout main > .container p.checkout-subtitle {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 0.95rem;
  color: #4b5563;
}

/* If subtitle isn't using a special class, fall back gracefully */
body.page-checkout main > .container > p:first-of-type {
  margin-top: 0;
  margin-bottom: 16px;
}

/* 3) Form + order summary layout: 2 columns desktop → 1 column mobile */
body.page-checkout .checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
  gap: 18px;
}

@media (max-width: 900px) {
  body.page-checkout .checkout-grid {
    grid-template-columns: 1fr;
  }
  body.page-checkout .checkout-form {
    order: 1;
  }
  body.page-checkout .order-summary {
    order: 2;
  }
}

/* 4) Inner form fields and labels: full width, consistent look */
body.page-checkout .checkout-form label {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: #0f172a;
}

body.page-checkout .checkout-form input,
body.page-checkout .checkout-form select,
body.page-checkout .checkout-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border, #e5e7eb);
  font-size: 16px;
  box-sizing: border-box;
  background: #ffffff;
  color: #0f172a;
}

/* Blue + Dark: keep inputs white so they pop off the dark backgrounds */
html[data-theme="blue"] body.page-checkout .checkout-form input,
html[data-theme="blue"] body.page-checkout .checkout-form select,
html[data-theme="blue"] body.page-checkout .checkout-form textarea,
html[data-theme="dark"] body.page-checkout .checkout-form input,
html[data-theme="dark"] body.page-checkout .checkout-form select,
html[data-theme="dark"] body.page-checkout .checkout-form textarea {
  background: #ffffff !important;
  color: #0f172a !important;
}

/* 5) Zip / City / State row — 3-up desktop → stacked on mobile */
body.page-checkout .row-zip-city-state {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr 1.1fr;
  gap: 10px;
}

@media (max-width: 900px) {
  body.page-checkout .row-zip-city-state {
    grid-template-columns: 1fr;
  }
}

/* 6) Order summary box matches card look */
body.page-checkout .order-summary {
  background: #f9fafb;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.5);
  padding: 14px 14px 16px;
}

/* Titles and amounts inside summary */
body.page-checkout .order-summary h2,
body.page-checkout .order-summary h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 1rem;
}

body.page-checkout .order-summary .total-line {
  font-weight: 700;
  margin-top: 10px;
}

/* 7) Submit button: full width on phones, red style consistent with CTAs */
body.page-checkout .checkout-form button[type="submit"],
body.page-checkout .checkout-form .cta {
  background: var(--accent-red, #D54A3A);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 11px 18px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

@media (max-width: 900px) {
  body.page-checkout .checkout-form button[type="submit"],
  body.page-checkout .checkout-form .cta {
    width: 100%;
  }
}

/* 8) Blue / Dark modes: keep checkout card itself white with dark text */
html[data-theme="blue"] body.page-checkout main > .container,
html[data-theme="dark"] body.page-checkout main > .container {
  background: #ffffff !important;
  color: #0f172a !important;
}
/* v27.19 — Checkout form label contrast fix for Blue/Dark modes */
html[data-theme="blue"] body.page-checkout .checkout-form label,
html[data-theme="dark"] body.page-checkout .checkout-form label,
html[data-theme="blue"] body.page-checkout .checkout-form .field-label,
html[data-theme="dark"] body.page-checkout .checkout-form .field-label {
  color: #ffffff !important;
}

/* Optional: make small helper text white too if present */
html[data-theme="blue"] body.page-checkout .checkout-form .hint,
html[data-theme="dark"] body.page-checkout .checkout-form .hint {
  color: #f1f5f9 !important;
}
/* v27.20 — Verify page theme + card alignment */

/* 0) Body background per theme */
html[data-theme="light"] body.page-verify {
  background:#ffffff !important;
  color:#0f172a !important;
}

html[data-theme="slate"] body.page-verify {
  background:#f5f7fa !important;
  color:#0f172a !important;
}

html[data-theme="blue"] body.page-verify {
  background:#021b33 !important;
  color:#e5e7eb !important;
}

html[data-theme="dark"] body.page-verify {
  background:#020617 !important;
  color:#e5e7eb !important;
}

/* 1) White card wrapper with padding + shadow (like Privacy pages) */
body.page-verify main > .container {
  background:#ffffff;
  border-radius:16px;
  border:1px solid rgba(148,163,184,0.5);
  box-shadow:0 10px 24px rgba(15,23,42,0.08);
  padding:18px 18px 22px;
  margin:18px auto 26px;
}

/* Blue/Dark: card stays white with dark text for readability */
html[data-theme="blue"] body.page-verify main > .container,
html[data-theme="dark"] body.page-verify main > .container {
  background:#ffffff !important;
  color:#0f172a !important;
}

/* Slightly tighter on phones */
@media (max-width:640px){
  body.page-verify main > .container {
    padding:14px 14px 18px;
    margin:14px auto 20px;
  }
}

/* 2) Form inputs on Verify page (match Checkout/Privacy style) */
body.page-verify form input,
body.page-verify form select,
body.page-verify form textarea {
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border, #e5e7eb);
  font-size:16px;
  background:#ffffff;
  color:#0f172a;
  box-sizing:border-box;
}

body.page-verify form label {
  font-size:.95rem;
  font-weight:600;
  color:#0f172a;
  display:block;
  margin-bottom:4px;
}

/* Ensure labels stay visible in Blue/Dark */
html[data-theme="blue"] body.page-verify form label,
html[data-theme="dark"] body.page-verify form label {
  color:#ffffff !important;
}

/* Inputs stay light in Blue/Dark so they pop off the dark body */
html[data-theme="blue"] body.page-verify form input,
html[data-theme="blue"] body.page-verify form select,
html[data-theme="blue"] body.page-verify form textarea,
html[data-theme="dark"] body.page-verify form input,
html[data-theme="dark"] body.page-verify form select,
html[data-theme="dark"] body.page-verify form textarea {
  background:#ffffff !important;
  color:#0f172a !important;
}

/* 3) Verify CTA button = same red pill as Start Course */
body.page-verify .verify-cta {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:12px;
}

/* If we use .verify-cta .cta.big, reuse existing CTA styles; just ensure width on mobile */
@media (max-width:600px){
  body.page-verify .verify-cta .cta.big {
    width:100%;
    text-align:center;
  }
}

/* 4) Footer background matches body on Verify page */
html[data-theme="light"] body.page-verify .site-footer {
  background:#ffffff !important;
}

html[data-theme="slate"] body.page-verify .site-footer {
  background:#f5f7fa !important;
}

html[data-theme="blue"] body.page-verify .site-footer {
  background:#021b33 !important;
}

html[data-theme="dark"] body.page-verify .site-footer {
  background:#020617 !important;
}

/* Make footer text/links readable on Blue/Dark */
html[data-theme="blue"] body.page-verify .site-footer p,
html[data-theme="blue"] body.page-verify .site-footer .links a,
html[data-theme="dark"] body.page-verify .site-footer p,
html[data-theme="dark"] body.page-verify .site-footer .links a {
  color:#f5f7fa !important;
}
/* Verify page card – tighten top padding */
.verify-card {
  padding-top: 20px !important;
}

/* Default card padding fix for all pages */
.card {
  padding: 24px 28px !important;
}
.card h1 {
  margin-top: 0 !important;
}
/* Cert page buttons: match site pill height (don’t affect header) */
.page-cert main button,
.page-cert main .btn,
.page-cert main .btn-pill,
.page-cert .card button,
.page-cert .card .btn,
.page-cert .card .btn-pill{
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}
/* Remove focus ring from theme buttons (keeps design clean) */
.theme-toggle button:focus,
.theme-toggle button:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}
/* ===== ES FOOTER: force proper spacing (works even if <a> tags have no whitespace) ===== */


/* Remove the “extra blank line” feel between legal line + links */
html[lang="es"] .site-footer p,
html[lang="es"] footer.footer.footer-es .footer-legal{
  margin:0 0 6px 0 !important;
  line-height:1.5 !important;
}
/* Footer links should NOT be underlined (EN + ES, both footer systems) */
.site-footer a,
footer.footer a{
  text-decoration:none !important;
}
.site-footer a:hover,
footer.footer a:hover{
  text-decoration:none !important;
}
/* Tighten footer spacing (ES + EN, both footer systems) */
.site-footer p,
footer.footer .footer-legal{
  margin:0 0 0px 0 !important;
}

.site-footer .links,
footer.footer .footer-links{
  margin-top:0 !important;
}
/* Guaranteed spacing even if anchors have no whitespace between them */
.site-footer .links,
footer.footer .footer-links{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px 16px !important;
  align-items:center !important;
}

/* Course-Details videos (silent loop + main video) */
.video-loop-wrap,
.video-main-wrap{
  max-width: 1100px;
  margin: 0 auto 32px;
  padding: 0 16px;
}

.video-loop,
.video-main{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background: #000;
  display: block;
}

/* Silent loop feels passive but clickable */
.video-loop{
  cursor: pointer;
}

@media (max-width: 768px){
  .video-loop-wrap,
  .video-main-wrap{
    margin-bottom: 24px;
  }
}


/* ===== Seat-time bar: Course portal spacing fix (only /course/) =====
   Some pages inject different padding; enforce consistent breathing room on Course page only.
*/
body.page-course .sd-seat-time-bar,
body.page-course #sd-seat-time,
body.page-course .sd-seat-time,
body.page-course .course-time-bar,
body.page-course .timer-bar{
  padding: 14px 12px !important;
}
/* COURSE PAGE ONLY — timer bar padding override (Course Portal) */
body.page-course .sd-seat-time-bar,
body.page-course #sd-seat-time,
body.page-course .sd-seat-time,
body.page-course .course-time-bar,
body.page-course .timer-bar{
  padding: 14px 12px !important; /* match the good pages */
}

/* Ensure the right-side buttons aren’t hugging the top */
body.page-course .sd-seat-time-bar .ct-right,
body.page-course #sd-seat-time .ct-right{
  align-items: center !important;
}
/* CERT: "Back to Course" must be visibly gray in ALL themes */
body.page-cert a[href="/course/"],
body.page-cert a[href="/es/course/"],
body.page-cert a[href^="/course/"],
body.page-cert a[href^="/es/course/"]{
  background:#e5e7eb !important;   /* gray fill */
  color:#111 !important;
  border:1px solid rgba(0,0,0,.18) !important;
}

html[data-theme="blue"] body.page-cert a[href^="/course/"],
html[data-theme="blue"] body.page-cert a[href^="/es/course/"],
html[data-theme="dark"] body.page-cert a[href^="/course/"],
html[data-theme="dark"] body.page-cert a[href^="/es/course/"]{
  background:rgba(255,255,255,.78) !important; /* still gray-ish, but readable on dark bars */
  color:#111 !important;
  border:1px solid rgba(255,255,255,.28) !important;
}
/* CERT: align the blue shield icon to the text baseline */
body.page-cert .locked-row,
body.page-cert .lock-row,
body.page-cert .cert-locked,
body.page-cert .gate-line{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

body.page-cert .locked-row svg,
body.page-cert .lock-row svg,
body.page-cert .cert-locked svg,
body.page-cert .gate-line svg{
  flex:0 0 auto !important;
  position:relative !important;
  top:-1px !important;             /* nudge up */
}
/* CERT GATE: align shield icon perfectly with the Locked line */
body.page-cert #certGate .cert-gate-line{
  display:flex !important;
  align-items:flex-start !important; /* lets us control icon via padding */
  gap:10px !important;
}

body.page-cert #certGate .cert-gate-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:18px !important;
  height:18px !important;
  flex:0 0 18px !important;
  margin-top:2px !important;        /* <-- lifts icon to match text baseline */
}

body.page-cert #certGate .cert-gate-icon svg{
  display:block !important;
  width:18px !important;
  height:18px !important;
}
/* CERT: Back to Course must be gray-filled on ALL themes */
body.page-cert #certGate a.cert-back-btn{
  background:#e5e7eb !important;
  color:#111 !important;
  border:1px solid rgba(0,0,0,.18) !important;
}

/* specifically in blue/dark: keep it light (not blending into the page) */
html[data-theme="blue"] body.page-cert #certGate a.cert-back-btn,
html[data-theme="dark"] body.page-cert #certGate a.cert-back-btn{
  background:rgba(255,255,255,.82) !important;
  color:#111 !important;
  border:1px solid rgba(255,255,255,.28) !important;
}
/* CERT: Final Status must remain BLUE */
body.page-cert #certGate a.btn-pill.primary{
  background: var(--brand-blue, #1E88E5) !important;
  border: 1px solid rgba(30,136,229,.45) !important;
  color:#fff !important;
}
body.page-cert #certGate a.btn-pill.primary:hover{
  filter:brightness(.96) !important;
}
/* CERT: remove any default callout icon (the old low shield) */
body.page-cert #certGate.callout::before,
body.page-cert #certGate.callout::after,
body.page-cert #certGate .callout-icon,
body.page-cert #certGate > .icon,
body.page-cert #certGate > svg{
  display:none !important;
  content:none !important;
}
/* CERT: force the inline shield to be BLUE FILLED with WHITE check */
body.page-cert #certGate .cert-gate-icon{
  color:#1E88E5 !important;          /* drives currentColor */
}

body.page-cert #certGate .cert-gate-icon svg path:first-child{
  fill: currentColor !important;     /* blue filled shield */
  stroke: currentColor !important;   /* keep outline blue */
}

body.page-cert #certGate .cert-gate-icon svg path:last-child{
  stroke:#fff !important;            /* white check */
}
/* ===== Seat-time ribbon: stop covering content on small screens ===== */
/* Targets common ribbon ids/classes used across pages */
:root{ --seat-ribbon-h: 56px; }

/* Give pages bottom breathing room only if ribbon is fixed */
body.has-seat-ribbon{ padding-bottom: var(--seat-ribbon-h); }

/* Default ribbon look (desktop can stay fixed if you want) */
.seat-time-ribbon, .sd-seat-ribbon, #seatTimeRibbon, #seat-time-ribbon, .sd-seat-time-ribbon{
  z-index: 40;
  max-width: 100%;
}

/* On phones: stop the “screen-covering” behavior */
@media (max-width: 520px){
  .seat-time-ribbon, .sd-seat-ribbon, #seatTimeRibbon, #seat-time-ribbon, .sd-seat-time-ribbon{
    position: sticky !important;      /* stays visible but DOESN'T overlay content while you scroll */
    bottom: auto !important;
    top: calc(var(--sd-header-h, 72px) + 62px) !important; /* sits under header + timer bar */
    margin: 10px 12px 12px !important;
    border-radius: 14px !important;

    padding: 10px 12px !important;    /* smaller */
    font-size: 13px !important;       /* smaller */
    line-height: 1.25 !important;
  }
}
/* =========================
   CONTACT PAGE FIXES
   ========================= */

/* 1) Prevent any horizontal overflow on mobile */
body.page-contact, body.page-contact *{
  max-width: 100%;
}
body.page-contact{
  overflow-x: hidden;
}
body.page-contact .container,
body.page-contact .card{
  overflow-x: hidden;
}

/* 2) Force inputs to always be white with black text (ALL themes, filled/unfilled) */
html[data-theme] body.page-contact input,
html[data-theme] body.page-contact select,
html[data-theme] body.page-contact textarea{
  background: #fff !important;
  color: #111 !important;
  border: 1px solid rgba(209,213,219,1) !important;
}

/* Placeholder readability */
html[data-theme] body.page-contact input::placeholder,
html[data-theme] body.page-contact textarea::placeholder{
  color: rgba(17,17,17,.55) !important;
}

/* Autofill (Chrome) — prevents the “turns white after blur” effect */
html[data-theme] body.page-contact input:-webkit-autofill,
html[data-theme] body.page-contact input:-webkit-autofill:hover,
html[data-theme] body.page-contact input:-webkit-autofill:focus,
html[data-theme] body.page-contact input:-webkit-autofill:active,
html[data-theme] body.page-contact textarea:-webkit-autofill,
html[data-theme] body.page-contact textarea:-webkit-autofill:hover,
html[data-theme] body.page-contact textarea:-webkit-autofill:focus,
html[data-theme] body.page-contact textarea:-webkit-autofill:active,
html[data-theme] body.page-contact select:-webkit-autofill,
html[data-theme] body.page-contact select:-webkit-autofill:hover,
html[data-theme] body.page-contact select:-webkit-autofill:focus,
html[data-theme] body.page-contact select:-webkit-autofill:active{
  -webkit-text-fill-color: #111 !important;
  caret-color: #111 !important;
  box-shadow: 0 0 0px 1000px rgba(255,255,255,.98) inset !important;
  transition: background-color 9999s ease-out 0s;
}

/* 3) Make the email display pill wrap safely instead of pushing off-screen */
body.page-contact .contact-email-pill,
body.page-contact .contact-email-pill *{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 4) Style the Copy button */
body.page-contact .copy-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(209,213,219,1);
  background: rgba(255,255,255,.92);
  color: #111;
  font-weight: 800;
  cursor: pointer;
}
body.page-contact .copy-btn:hover{ filter: brightness(.98); }
body.page-contact .copy-btn:active{ filter: brightness(.95); }

/* tighter mobile spacing so cards don’t feel cramped */
@media (max-width: 480px){
  body.page-contact .card{ padding: 16px !important; }
}
/* CONTACT: Copy button = standard blue CTA */
body.page-contact .copy-btn,
body.page-contact button.copy-btn,
body.page-contact .btn-copy{
  background: var(--brand-blue, #1E88E5) !important;
  color: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}
body.page-contact .copy-btn:hover,
body.page-contact button.copy-btn:hover,
body.page-contact .btn-copy:hover{
  filter: brightness(.95) !important;
}
/* CONTACT: header aligns to the same container width as body */
body.page-contact .site-header .container{
  width: min(1100px, 92%) !important;
  margin-inline: auto !important;
}
body.page-contact .header-inner{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* CONTACT: keep support email on one clean line */
body.page-contact .support-email,
body.page-contact .support-pill,
body.page-contact .email-pill,
body.page-contact .email-box{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-weight: 600 !important;   /* less bold */
  font-size: 14px !important;    /* slightly smaller */
}
@media (max-width: 520px){
  body.page-contact .support-email,
  body.page-contact .support-pill,
  body.page-contact .email-pill,
  body.page-contact .email-box{
    font-size: 13px !important;
  }
}
/* =========================
   CONTACT — FINAL OVERRIDES
   ========================= */

/* 1) Force header + page body to same container width */
body.page-contact .site-header .container,
body.page-contact main.container,
body.page-contact .site-footer .container{
  width: min(1100px, 92%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* If your contact page main is NOT using .container, this catches it */
body.page-contact main{
  width: min(1100px, 92%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 2) Copy button = blue (your exact HTML: .copy-row button.btn-pill) */
body.page-contact .copy-row button.btn-pill{
  background: #1E88E5 !important;
  color: #fff !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  padding: 8px 12px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
body.page-contact .copy-row button.btn-pill:hover{ filter: brightness(.95) !important; }

/* 3) Support email stays ONE line (no wrap) */
body.page-contact .copy-row{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}

body.page-contact .copy-row .copy-pill{
  display: block !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-weight: 600 !important;  /* less bold so it fits better */
}

/* Keep the outer pill border readable in dark/blue without adding inner rings */
html[data-theme="dark"] body.page-contact .site-header .theme-toggle,
html[data-theme="blue"] body.page-contact .site-header .theme-toggle{
  border-color: rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.08) !important;
}
/* ===== Theme toggle: exact spec (matches other pages) ===== */
.site-header .theme-toggle button[aria-pressed="true"]{
  background: rgba(255, 179, 0, 0.16) !important;
  border-color: #FFB300 !important;
  box-shadow: 0 0 0 2px rgba(255, 143, 0, 0.75) !important;
  opacity: 1 !important;
}

[data-theme="dark"] .site-header .theme-toggle,
[data-theme="blue"] .site-header .theme-toggle{
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.7);
}
/* CONTACT — Copy button under email (EN + ES safe) */
body.page-contact .copy-row{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:8px !important;
}

body.page-contact .copy-row .btn-pill{
  align-self:flex-start !important;
}


/* =========================
   CONTACT PAGE BODY STYLING
   ========================= */

body.page-contact .card,
body.page-contact .support-card,
body.page-contact .contact-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:24px;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}

/* Make the 3 cards equal spacing */
body.page-contact .card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}
body.page-contact .copy-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
}

body.page-contact .copy-pill{
  background:#f5f7fb;
  padding:10px 16px;
  border-radius:999px;
  font-weight:600;
  border:1px solid rgba(0,0,0,.06);
  color:#111827;
  word-break:break-word;
}

/* Clickable link look (requested) */
body.page-contact a.contact-link{
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.page-contact a.contact-link:hover{ opacity:.9; }

/* Copy button should look like other blue buttons */
body.page-contact .btn-pill.contact-copy-btn{
  background: var(--primary);
  color: #fff;
  border: 1px solid rgba(0,0,0,.08);
}
body.page-contact .btn-pill.contact-copy-btn:hover{ filter: brightness(.96); }
body.page-contact input,
body.page-contact textarea{
  width:100%;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
  font-family:inherit;
  font-size:14px;
}

/* Force white inputs + black text in Blue/Dark modes */
html[data-theme="blue"] body.page-contact input,
html[data-theme="blue"] body.page-contact textarea,
html[data-theme="dark"] body.page-contact input,
html[data-theme="dark"] body.page-contact textarea{
  background:#fff !important;
  color:#111827 !important;
}
html[data-theme="blue"] body.page-contact input::placeholder,
html[data-theme="blue"] body.page-contact textarea::placeholder,
html[data-theme="dark"] body.page-contact input::placeholder,
html[data-theme="dark"] body.page-contact textarea::placeholder{
  color: rgba(17,24,39,.55) !important;
}

/* Spanish: place Copiar under email */
body.page-contact.lang-es .copy-row{
  flex-direction: column;
  align-items: flex-start;
}
body.page-contact.lang-es .copy-pill{ width:100%; }

/* Narrow screens: avoid overflow */
@media (max-width: 720px){
  body.page-contact .grid-3{ grid-template-columns: 1fr !important; }
}

body.page-contact textarea{
  min-height:120px;
  resize:vertical;
}

body.page-contact input:focus,
body.page-contact textarea:focus{
  outline:none;
  border-color:#1E88E5;
  box-shadow:0 0 0 2px rgba(30,136,229,.15);
}
body.page-contact .send-btn,
body.page-contact button[type="submit"]{
  background:#D54A3A;
  color:#fff;
  border:none;
  border-radius:999px;
  padding:12px 20px;
  font-weight:800;
  cursor:pointer;
}

body.page-contact button[type="submit"]:hover{
  filter:brightness(.95);
}
/* =========================
   CONTACT FORCE OVERRIDES
   (works even if body class differs)
   ========================= */

/* Stop any right-side overflow on narrow screens */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg { max-width: 100%; height: auto; }

/* Make any contact page main content behave */
body .contact-wrap,
body main.contact,
body main .contact,
body main .contact-grid,
body main .card-grid,
body main .support-grid,
body main .support-cards,
body main .contact-cards {
  max-width: 100%;
}

/* Force the 3 top cards into a responsive grid if present */
body main .card-grid,
body main .support-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 18px !important;
}

/* Generic “card” look */
body main .card,
body main .support-card,
body main .contact-card,
body main section.card {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 16px !important;
  padding: 22px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.05) !important;
  max-width: 100% !important;
}

/* Copy row: keep it from blowing out the right side */
body main .copy-row{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap: wrap !important;
  max-width: 100% !important;
}

/* Email pill: prevent wrapping/overflow */
body main .copy-pill{
  background:#f5f7fb !important;
  padding:10px 14px !important;
  border-radius:999px !important;
  border:1px solid rgba(0,0,0,.08) !important;
  font-weight:600 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Force Copy/Copiar button to site blue */
body main .copy-row .btn-pill{
  background:#1E88E5 !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  padding:8px 14px !important;
  font-weight:800 !important;
  cursor:pointer !important;
}
body main .copy-row .btn-pill:hover{ filter:brightness(.95) !important; }

/* Form controls: modernize + consistent */
body main input,
body main textarea,
body main select{
  width:100% !important;
  padding:10px 14px !important;
  border-radius:10px !important;
  border:1px solid rgba(0,0,0,.16) !important;
  background:#fff !important;
  color:#111 !important;
  font-family:inherit !important;
  font-size:14px !important;
  box-sizing:border-box !important;
  max-width:100% !important;
}
body main textarea{ min-height:120px !important; resize:vertical !important; }

body main input:focus,
body main textarea:focus,
body main select:focus{
  outline:none !important;
  border-color:#1E88E5 !important;
  box-shadow:0 0 0 2px rgba(30,136,229,.15) !important;
}

/* Make submit match your CTA */
body main button[type="submit"],
body main .send-btn{
  background:#D54A3A !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  padding:12px 20px !important;
  font-weight:900 !important;
  cursor:pointer !important;
}
body main button[type="submit"]:hover{ filter:brightness(.95) !important; }
/* CONTACT — force support email text black in all themes */
body.page-contact .copy-pill,
[data-theme="dark"] body.page-contact .copy-pill,
[data-theme="blue"] body.page-contact .copy-pill {
  color: #111 !important;
}
/* CONTACT: make theme-toggle outline match Light/Slate weight */
html[data-theme="dark"] body.page-contact .site-header .theme-toggle,
html[data-theme="blue"] body.page-contact .site-header .theme-toggle{
  border: 1px solid rgba(148,163,184,.70) !important;  /* slightly lighter */
  background: rgba(245,247,251,.10) !important;        /* less “solid” */
  box-shadow: none !important;                          /* removes “thicker” look */
}



/* === CONTACT: Premium + Conversion (FAQ + Resend shortcut) === */
body.page-contact .contact-wrap{
  padding: 18px 0 28px;
}
body.page-contact .contact-hero h1,
body.page-contact h1{
  letter-spacing: -0.02em;
}
body.page-contact .card,
body.page-contact .support-card,
body.page-contact .contact-card{
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, .10);
  box-shadow: 0 12px 26px rgba(2, 6, 23, .08);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90));
}
html[data-theme="blue"] body.page-contact .card,
html[data-theme="dark"] body.page-contact .card,
html[data-theme="blue"] body.page-contact .support-card,
html[data-theme="dark"] body.page-contact .support-card,
html[data-theme="blue"] body.page-contact .contact-card,
html[data-theme="dark"] body.page-contact .contact-card{
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
}

body.page-contact .copy-row{
  flex-wrap: wrap;
}
body.page-contact .copy-pill{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.page-contact .copy-row .btn-pill{
  background: var(--brand-blue);
  color: #fff;
  border-color: rgba(0,0,0,.08);
}
body.page-contact .copy-row .btn-pill:hover{ filter: brightness(.95); }
body.page-contact .copy-row .btn-pill:active{ transform: translateY(1px); }

body.page-contact .contact-faq{
  margin-top: 22px;
  padding-top: 12px;
}
body.page-contact .contact-faq h2{
  font-size: 1.25rem;
  margin: 0 0 6px 0;
}
body.page-contact .contact-faq .faq-lede{
  margin: 0 0 12px 0;
  color: var(--muted);
}
body.page-contact .contact-faq .faq-item{
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.75);
  margin: 10px 0;
}
html[data-theme="blue"] body.page-contact .contact-faq .faq-item,
html[data-theme="dark"] body.page-contact .contact-faq .faq-item{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
body.page-contact .contact-faq summary{
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}
body.page-contact .contact-faq summary::-webkit-details-marker{ display:none; }
body.page-contact .contact-faq summary:after{
  content: "▾";
  float: right;
  opacity: .75;
}
body.page-contact .contact-faq details[open] summary:after{
  content: "▴";
}
body.page-contact .contact-faq .faq-a{
  margin-top: 8px;
  color: var(--ink);
  opacity: .95;
  line-height: 1.55;
}
html[data-theme="blue"] body.page-contact .contact-faq .faq-a,
html[data-theme="dark"] body.page-contact .contact-faq .faq-a{
  color: rgba(255,255,255,.92);
}
/* Contact page clickable link styling */
body.page-contact .contact-link,
body.page-contact a[href*="cert"],
body.page-contact a[href*="privacy"],
body.page-contact a[href*="faq"]{
  color: #1E88E5 !important;
 /* text-decoration: underline !important; */
  font-weight: 600;
}
/* Shared row layout */
.form-row{
  display:flex;
  gap:16px;
}

.form-row > div{
  flex:1;
}

@media (max-width:640px){
  .form-row{
    flex-direction:column;
  }
}
/* Premium card surfaces */
.premium-card{
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(148,163,184,.25);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

/* Dark + Blue modes */
html[data-theme="dark"] .premium-card,
html[data-theme="blue"] .premium-card{
  background: linear-gradient(145deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* =========================
   CONTACT PREMIUM + FAQ + RESEND (v1)
   Paste at BOTTOM of /assets/css/site-shared.css
   ========================= */
body.page-contact{overflow-x:hidden}

/* Premium card surface (subtle gradient + soft border) */
html[data-theme="light"] body.page-contact .premium-card,
html[data-theme="slate"] body.page-contact .premium-card{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}
html[data-theme="blue"] body.page-contact .premium-card,
html[data-theme="dark"] body.page-contact .premium-card{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
}

/* Make links look clickable */
body.page-contact a.contact-link{
  color: var(--brand-blue) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Copy row + pill */
body.page-contact .copy-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
body.page-contact .copy-col{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
body.page-contact .copy-pill{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:10px 14px;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid rgba(0,0,0,.12);
  color:#111 !important;
  font-weight:600;
}
html[data-theme="blue"] body.page-contact .copy-pill,
html[data-theme="dark"] body.page-contact .copy-pill{
  background:#ffffff !important;
  color:#111 !important;
  border:1px solid #d1d5db !important;
}

/* Copy button matches primary */
body.page-contact .btn-copy.primary{
  background: var(--brand-blue) !important;
  color:#fff !important;
  border: none !important;
  box-shadow: 0 8px 16px rgba(30,136,229,.25);
}
body.page-contact .btn-copy.primary:hover{filter:brightness(.95)}

/* Form grid: Name + Email on one line (desktop), stack on mobile */
body.page-contact .contact-form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media (max-width:720px){
  body.page-contact .contact-form-grid{grid-template-columns:1fr}
}

/* Force inputs white + black text in blue/dark */
html[data-theme="blue"] body.page-contact input,
html[data-theme="blue"] body.page-contact textarea,
html[data-theme="dark"] body.page-contact input,
html[data-theme="dark"] body.page-contact textarea{
  background:#ffffff !important;
  color:#111 !important;
  border:1px solid #d1d5db !important;
}
html[data-theme="blue"] body.page-contact input::placeholder,
html[data-theme="blue"] body.page-contact textarea::placeholder,
html[data-theme="dark"] body.page-contact input::placeholder,
html[data-theme="dark"] body.page-contact textarea::placeholder{
  color:#6b7280 !important;
}

/* FAQ accordion */
body.page-contact .contact-faq{margin:16px 0;padding:16px;border-radius:16px}
body.page-contact .faq-accordion details{
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  padding:10px 12px;
  background: rgba(255,255,255,.70);
  margin:10px 0;
}
html[data-theme="blue"] body.page-contact .faq-accordion details,
html[data-theme="dark"] body.page-contact .faq-accordion details{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
}
body.page-contact .faq-accordion summary{
  cursor:pointer;
  font-weight:800;
  list-style:none;
}
body.page-contact .faq-accordion summary::-webkit-details-marker{display:none}
body.page-contact .faq-body{margin-top:8px;color:inherit;opacity:.95;line-height:1.5}
/* CONTACT — FAQ accordion */
body.page-contact .contact-faq{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(0,0,0,.08);
}

html[data-theme="blue"] body.page-contact .contact-faq,
html[data-theme="dark"] body.page-contact .contact-faq{
  border-top:1px solid rgba(255,255,255,.14);
}

body.page-contact .faq-title{
  margin:0 0 10px 0;
  font-size:1.05rem;
  font-weight:800;
}

body.page-contact .faq-item{
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
  margin:10px 0;
}

html[data-theme="blue"] body.page-contact .faq-item,
html[data-theme="dark"] body.page-contact .faq-item{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
}

body.page-contact .faq-item > summary{
  cursor:pointer;
  font-weight:800;
  list-style:none;
}

body.page-contact .faq-item > summary::-webkit-details-marker{ display:none; }

body.page-contact .faq-body{
  margin-top:8px;
  color:inherit;
  opacity:.92;
  line-height:1.45;
}
/* CONTACT — prevent link styling from affecting footer */
body.page-contact .site-footer a{
  text-decoration:none !important;
  font-weight:600 !important;
}
body.page-contact .site-footer a:hover{
  text-decoration:underline !important;
}
/* CONTACT — premium card surfaces (blue/dark) */
html[data-theme="blue"] body.page-contact .card,
html[data-theme="blue"] body.page-contact .support-card,
html[data-theme="blue"] body.page-contact .contact-card,
html[data-theme="dark"] body.page-contact .card,
html[data-theme="dark"] body.page-contact .support-card,
html[data-theme="dark"] body.page-contact .contact-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,.22),
    0 0 0 1px rgba(0,0,0,.10) inset !important;
}
/* CONTACT — unify footer link color (EN + ES) */

body.page-contact .site-footer a{
  color:#1E88E5 !important;   /* Standard brand link blue */
  text-decoration:none !important;
  font-weight:600 !important;
}

body.page-contact .site-footer a:hover{
  text-decoration:underline !important;
}
/* CONTACT footer — match HOME footer look (no hover underline, not bold) */
body.page-contact .site-footer .links a,
body.page-contact .site-footer a{
  color: rgba(29, 42, 58, .86) !important;  /* HOME-like ink */
  font-weight: 400 !important;             /* not bold */
  text-decoration: none !important;        /* never underline */
}

body.page-contact .site-footer .links a:hover,
body.page-contact .site-footer a:hover{
  color: rgba(29, 42, 58, 1) !important;   /* slightly stronger on hover */
  text-decoration: none !important;        /* still no underline */
}

/* Blue/Dark modes — keep HOME footer behavior (light ink, no underline) */
html[data-theme="blue"] body.page-contact .site-footer a,
html[data-theme="dark"] body.page-contact .site-footer a{
  color: rgba(246, 248, 252, .88) !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}
html[data-theme="blue"] body.page-contact .site-footer a:hover,
html[data-theme="dark"] body.page-contact .site-footer a:hover{
  color: rgba(246, 248, 252, 1) !important;
  text-decoration: none !important;
}
/* Contact success message */
body.page-contact .contact-sent{
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(67,160,71,.10);
  border: 1px solid rgba(67,160,71,.25);
  color: #0f172a;
  font-weight: 600;
}
html[data-theme="blue"] body.page-contact .contact-sent,
html[data-theme="dark"] body.page-contact .contact-sent{
  color: rgba(246,248,252,.95);
  background: rgba(67,160,71,.12);
  border-color: rgba(67,160,71,.30);
}

/* subtle success animation */
body.page-contact .contact-sent.pop{
  animation: contactPop .35s ease-out;
}
@keyframes contactPop{
  from{ transform: translateY(-6px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}
/* Premium card surfaces (Contact only) */
html[data-theme="blue"] body.page-contact .card,
html[data-theme="dark"] body.page-contact .card{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.06)
    ) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}
body.page-contact .micro-trust{
  margin: 8px 0 0;
  color: rgba(29,42,58,.75);
  font-size: .95rem;
}
html[data-theme="blue"] body.page-contact .micro-trust,
html[data-theme="dark"] body.page-contact .micro-trust{
  color: rgba(246,248,252,.72);
}
/* Contact validation visuals */
body.page-contact input:invalid,
body.page-contact textarea:invalid{
  border-color: rgba(213,74,58,.55) !important;
  box-shadow: 0 0 0 3px rgba(213,74,58,.14) !important;
}

body.page-contact input:focus,
body.page-contact textarea:focus{
  outline: none !important;
  border-color: rgba(30,136,229,.65) !important;
  box-shadow: 0 0 0 3px rgba(30,136,229,.16) !important;
}
/* === QUIZ OPTION ALIGNMENT FIX (global) === */
/* Locks radio + text into a stable left-aligned layout (prevents drift) */

.quiz-options{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Each option is a label.quiz-option */
label.quiz-option{
  /* override any flex/space-between behavior */
  display: grid !important;
  grid-template-columns: 28px 1fr;
  column-gap: 14px;

  align-items: center !important;
  justify-content: start !important;

  text-align: left !important;
  white-space: normal !important;

  /* if anything was pushing content right */
  margin-left: 0 !important;
}

/* Radio alignment */
label.quiz-option input[type="radio"]{
  margin: 0 !important;
  justify-self: start;
  align-self: center;
}

/* Any wrapper spans inside label should not push right */
label.quiz-option *{
  margin-left: 0 !important;
  text-align: left !important;
}

/* ===============================
   Contact page footer link colors by theme
   Light / Slate = blue
   Blue / Dark = white
   =============================== */
html:not([data-theme]) body.page-contact .site-footer .links a,
html:not([data-theme]) body.page-contact .site-footer .links a:visited,
html[data-theme="light"] body.page-contact .site-footer .links a,
html[data-theme="light"] body.page-contact .site-footer .links a:visited,
html[data-theme="slate"] body.page-contact .site-footer .links a,
html[data-theme="slate"] body.page-contact .site-footer .links a:visited{
  color: var(--link, #1E88E5) !important;
  font-weight: 400;
}

html:not([data-theme]) body.page-contact .site-footer .links a:hover,
html[data-theme="light"] body.page-contact .site-footer .links a:hover,
html[data-theme="slate"] body.page-contact .site-footer .links a:hover{
  color: var(--link, #1E88E5) !important;
  text-decoration: underline;
}

html[data-theme="blue"] body.page-contact .site-footer .links a,
html[data-theme="blue"] body.page-contact .site-footer .links a:visited,
html[data-theme="dark"] body.page-contact .site-footer .links a,
html[data-theme="dark"] body.page-contact .site-footer .links a:visited{
  color: #f5f7fa !important;
  font-weight: 400;
}

html[data-theme="blue"] body.page-contact .site-footer .links a:hover,
html[data-theme="dark"] body.page-contact .site-footer .links a:hover{
  color: #f5f7fa !important;
  text-decoration: underline;
}

/* ===============================
   Header More dropdown: consistent spacing
   (prevents odd gaps between items across pages)
   =============================== */
.site-header .dropdown .menu{
  padding: 6px 0 !important;
}
.site-header .dropdown .menu > *{
  margin: 0 !important;
}
.site-header .dropdown .menu hr,
.site-header .dropdown .menu .divider{
  display: none !important;
}
.site-header .dropdown .menu a{
  display: block;
  padding: 8px 14px !important;
  margin: 0 !important;
  line-height: 1.15 !important;
  text-decoration: none;
}

html[data-theme="slate"] .site-header .dropdown .menu a + a,
html[data-theme="blue"]  .site-header .dropdown .menu a + a,
html[data-theme="dark"]  .site-header .dropdown .menu a + a{
  border-top-color: rgba(148, 163, 184, 0.18);
}


/* ===== Premium chapter timer / progress bar ===== */
.premium-course-bar{
  position:sticky;
  top:72px;
  z-index:24;
  padding:10px 0 0;
}
.premium-course-bar__inner{
  width:min(1100px,92%);
  margin:0 auto;
  padding:16px 18px;
  border-radius:22px;
  border:1px solid rgba(148,163,184,.24);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.94));
  box-shadow:0 14px 34px rgba(15,23,42,.12);
  backdrop-filter: blur(10px);
}
.premium-course-bar__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.premium-course-bar__eyebrow{
  display:inline-block;
  margin-bottom:6px;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--brand-blue,#1E88E5);
}
.premium-course-bar__headline{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-weight:800;
  font-size:1.05rem;
}
.premium-course-bar__chapter{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(30,136,229,.12);
  border:1px solid rgba(30,136,229,.22);
}
.premium-course-bar__dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.12);
}
.premium-course-bar__message{
  opacity:.96;
}
.premium-course-bar__reassurance{
  margin:8px 0 0;
  font-size:.92rem;
  opacity:.84;
}
.premium-course-bar__save{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:8px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:.9rem;
  border:1px solid rgba(148,163,184,.28);
  white-space:nowrap;
}
.premium-course-bar__saveicon{
  width:10px;
  height:10px;
  border-radius:999px;
  background:currentColor;
  opacity:.9;
  flex:0 0 auto;
}
.premium-course-bar__save--saved{
  background:rgba(34,197,94,.10);
  border-color:rgba(34,197,94,.22);
  color:#15803d;
}
.premium-course-bar__save--saving{
  background:rgba(245,158,11,.10);
  border-color:rgba(245,158,11,.24);
  color:#b45309;
}
.premium-course-bar__save--error{
  background:rgba(239,68,68,.10);
  border-color:rgba(239,68,68,.22);
  color:#b91c1c;
}
.premium-course-bar__metrics{
  display:grid;
  grid-template-columns:minmax(220px,1.15fr) 1fr 1fr;
  gap:12px;
}
.premium-metric{
  border:1px solid rgba(148,163,184,.22);
  background:rgba(255,255,255,.72);
  border-radius:18px;
  padding:14px;
}
.premium-metric__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.premium-metric__label{
  display:block;
  font-size:.8rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.68;
}
.premium-metric__value{
  display:block;
  margin-top:6px;
  font-size:2rem;
  line-height:1;
  letter-spacing:.02em;
}
.premium-metric__sub{
  display:block;
  margin-top:8px;
  font-size:.93rem;
  opacity:.8;
}
.premium-metric__percent{
  font-weight:900;
}
.premium-progress{
  width:100%;
  height:12px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(148,163,184,.22);
}
.premium-progress__fill{
  display:block;
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, #1E88E5, #22c55e);
  transition:width .35s ease;
}
.premium-progress--chapters .premium-progress__fill{
  background:linear-gradient(90deg, #1E88E5, #60a5fa);
}
.premium-course-bar__bottom{
  margin-top:14px;
}
.premium-course-steps{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
}
.premium-step{
  border:1px solid rgba(148,163,184,.22);
  background:rgba(255,255,255,.72);
  border-radius:16px;
  padding:12px 10px;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-height:82px;
}
.premium-step__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:999px;
  background:rgba(148,163,184,.18);
  font-weight:900;
}
.premium-step__text{
  font-weight:800;
  font-size:.92rem;
}
.premium-step__status{
  font-size:.83rem;
  opacity:.78;
}
.premium-step[data-status="complete"]{
  border-color:rgba(34,197,94,.24);
  background:rgba(34,197,94,.10);
}
.premium-step[data-status="complete"] .premium-step__num{
  background:rgba(34,197,94,.2);
  color:#166534;
}
.premium-step[data-status="unlocked"],
.premium-step[data-status="active"]{
  border-color:rgba(30,136,229,.24);
  background:rgba(30,136,229,.08);
}
.premium-step[data-status="active"] .premium-step__num{
  background:#1E88E5;
  color:#fff;
}
.premium-step[data-status="locked"]{
  opacity:.72;
}
.premium-course-bar__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  font-size:.93rem;
}
.premium-course-bar__focus,
.premium-course-bar__next{
  opacity:.82;
}
html[data-theme="blue"] .premium-course-bar__inner,
html[data-theme="dark"] .premium-course-bar__inner{
  background:linear-gradient(180deg, rgba(15,23,42,.92), rgba(30,41,59,.88));
  border-color:rgba(148,163,184,.20);
  box-shadow:0 18px 42px rgba(2,6,23,.42);
}
html[data-theme="blue"] .premium-metric,
html[data-theme="dark"] .premium-metric,
html[data-theme="blue"] .premium-step,
html[data-theme="dark"] .premium-step{
  background:rgba(255,255,255,.06);
  border-color:rgba(148,163,184,.20);
}
html[data-theme="blue"] .premium-course-bar__chapter,
html[data-theme="dark"] .premium-course-bar__chapter{
  background:rgba(30,136,229,.18);
  border-color:rgba(96,165,250,.22);
}
html[data-theme="blue"] .premium-progress,
html[data-theme="dark"] .premium-progress{
  background:rgba(255,255,255,.12);
}
html[data-theme="blue"] .premium-course-bar__save--saved,
html[data-theme="dark"] .premium-course-bar__save--saved{ color:#86efac; }
html[data-theme="blue"] .premium-course-bar__save--saving,
html[data-theme="dark"] .premium-course-bar__save--saving{ color:#fcd34d; }
html[data-theme="blue"] .premium-course-bar__save--error,
html[data-theme="dark"] .premium-course-bar__save--error{ color:#fca5a5; }
@media (max-width: 980px){
  .premium-course-bar{ top:64px; }
  .premium-course-bar__metrics{ grid-template-columns:1fr; }
  .premium-course-steps{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .premium-course-bar__foot{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 640px){
  .premium-course-bar{ top:58px; }
  .premium-course-bar__inner{ width:min(100%, calc(100% - 16px)); padding:14px; border-radius:18px; }
  .premium-course-bar__top{ flex-direction:column; }
  .premium-course-bar__headline{ align-items:flex-start; }
  .premium-metric__value{ font-size:1.55rem; }
  .premium-course-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 420px){
  .premium-course-steps{ grid-template-columns:1fr; }
}


/* v27.31 — More dropdown Course Details links must not inherit Course Portal pill styling */
html[data-theme="blue"] .site-header .dropdown .menu a[href*="/course-details/"],
html[data-theme="blue"] .site-header .dropdown .menu a[href*="/details/"],
html[data-theme="blue"] .site-header .dropdown .menu a[href*="/es/course-details/"],
html[data-theme="blue"] .site-header .dropdown .menu a[href*="/es/details/"],
html[data-theme="dark"] .site-header .dropdown .menu a[href*="/course-details/"],
html[data-theme="dark"] .site-header .dropdown .menu a[href*="/details/"],
html[data-theme="dark"] .site-header .dropdown .menu a[href*="/es/course-details/"],
html[data-theme="dark"] .site-header .dropdown .menu a[href*="/es/details/"]{
  background:#ffffff !important;
  color:#111111 !important;
  border:0 !important;
  box-shadow:none !important;
}

html[data-theme="blue"] .site-header .dropdown .menu a[href*="/course-details/"]:hover,
html[data-theme="blue"] .site-header .dropdown .menu a[href*="/details/"]:hover,
html[data-theme="blue"] .site-header .dropdown .menu a[href*="/es/course-details/"]:hover,
html[data-theme="blue"] .site-header .dropdown .menu a[href*="/es/details/"]:hover,
html[data-theme="dark"] .site-header .dropdown .menu a[href*="/course-details/"]:hover,
html[data-theme="dark"] .site-header .dropdown .menu a[href*="/details/"]:hover,
html[data-theme="dark"] .site-header .dropdown .menu a[href*="/es/course-details/"]:hover,
html[data-theme="dark"] .site-header .dropdown .menu a[href*="/es/details/"]:hover{
  background:#f6f8ff !important;
  color:#111111 !important;
  border:0 !important;
  box-shadow:none !important;
}


/* ES home footer centered second-row fix */
.page-home-es .site-footer .links{
  display:inline-flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:center !important;
  gap:8px 12px !important;
  width:auto !important;
  max-width:980px !important;
  margin:0 auto !important;
}
.page-home-es .site-footer .container{
  align-items:center !important;
  text-align:center !important;
}




/* Spanish home footer natural wrap fix */
.links-es-home{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:center !important;
  gap:8px 12px !important;
  width:auto !important;
  max-width:980px !important;
  margin:0 auto !important;
  text-align:center !important;
}
.links-es-home a{
  white-space:nowrap;
}


/* ES home footer final center lock */
.page-home-es .site-footer .links.links-es-home{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:center !important;
  align-content:center !important;
  text-align:center !important;
  gap:8px 12px !important;
  width:auto !important;
  max-width:980px !important;
  margin:0 auto !important;
}
.page-home-es .site-footer .links.links-es-home a{
  display:inline-flex !important;
  white-space:nowrap !important;
}






/* v27.31 — Certificate success reassurance readability fix */
html body .success-page .success-reassurance{
  background:#dbeafe !important;
  color:#0f172a !important;
  border:1px solid rgba(59,130,246,0.22) !important;
  box-shadow:none !important;
}
html body .success-page .success-reassurance strong{
  color:#0f172a !important;
}
html body .success-page .success-reassurance p{
  color:#1e293b !important;
}

html[data-theme="blue"] body .success-page .success-reassurance,
html[data-theme="dark"] body .success-page .success-reassurance,
html[data-theme="slate"] body .success-page .success-reassurance,
body.dark .success-page .success-reassurance,
body.theme-dark .success-page .success-reassurance{
  background:#1e3a5f !important;
  color:#f8fafc !important;
  border:1px solid rgba(147,197,253,0.30) !important;
  box-shadow:none !important;
}
html[data-theme="blue"] body .success-page .success-reassurance strong,
html[data-theme="dark"] body .success-page .success-reassurance strong,
html[data-theme="slate"] body .success-page .success-reassurance strong,
body.dark .success-page .success-reassurance strong,
body.theme-dark .success-page .success-reassurance strong{
  color:#ffffff !important;
}
html[data-theme="blue"] body .success-page .success-reassurance p,
html[data-theme="dark"] body .success-page .success-reassurance p,
html[data-theme="slate"] body .success-page .success-reassurance p,
body.dark .success-page .success-reassurance p,
body.theme-dark .success-page .success-reassurance p{
  color:#dbeafe !important;
}


/* v27.32 — Spanish success page blue/dark readability safety */
html body .success-page .success-reassurance{
  background:#dbeafe !important;
  color:#0f172a !important;
  border:1px solid rgba(59,130,246,0.22) !important;
}
html body .success-page .success-reassurance strong{color:#0f172a !important;}
html body .success-page .success-reassurance p{color:#1e293b !important;}
html[data-theme="blue"] body .success-page .success-reassurance,
html[data-theme="dark"] body .success-page .success-reassurance,
html[data-theme="slate"] body .success-page .success-reassurance,
body.dark .success-page .success-reassurance,
body.theme-dark .success-page .success-reassurance,
body.blue .success-page .success-reassurance,
body.theme-blue .success-page .success-reassurance{
  background:#1e3a5f !important;
  color:#f8fafc !important;
  border:1px solid rgba(147,197,253,.30) !important;
}
html[data-theme="blue"] body .success-page .success-reassurance strong,
html[data-theme="dark"] body .success-page .success-reassurance strong,
html[data-theme="slate"] body .success-page .success-reassurance strong,
body.dark .success-page .success-reassurance strong,
body.theme-dark .success-page .success-reassurance strong,
body.blue .success-page .success-reassurance strong,
body.theme-blue .success-page .success-reassurance strong{color:#ffffff !important;}
html[data-theme="blue"] body .success-page .success-reassurance p,
html[data-theme="dark"] body .success-page .success-reassurance p,
html[data-theme="slate"] body .success-page .success-reassurance p,
body.dark .success-page .success-reassurance p,
body.theme-dark .success-page .success-reassurance p,
body.blue .success-page .success-reassurance p,
body.theme-blue .success-page .success-reassurance p{color:#dbeafe !important;}


/* v27.33 — Spanish success page dark readability safety */
html[data-theme="dark"] body .success-page,
body.dark .success-page,
body.theme-dark .success-page{
  color:#e5e7eb !important;
}
html[data-theme="dark"] body .success-page .success-card,
body.dark .success-page .success-card,
body.theme-dark .success-page .success-card{
  background:#0f172a !important;
  color:#e5e7eb !important;
  border:1px solid rgba(255,255,255,.08) !important;
}
html[data-theme="dark"] body .success-page .success-detail-item,
body.dark .success-page .success-detail-item,
body.theme-dark .success-page .success-detail-item,
html[data-theme="dark"] body .success-page .success-info-box,
body.dark .success-page .success-info-box,
body.theme-dark .success-page .success-info-box{
  background:#111827 !important;
  color:#e5e7eb !important;
  border:1px solid rgba(255,255,255,.08) !important;
}
html[data-theme="dark"] body .success-page .success-detail-item strong,
html[data-theme="dark"] body .success-page .success-info-box h3,
html[data-theme="dark"] body .success-page .success-info-box p,
body.dark .success-page .success-detail-item strong,
body.dark .success-page .success-info-box h3,
body.dark .success-page .success-info-box p,
body.theme-dark .success-page .success-detail-item strong,
body.theme-dark .success-page .success-info-box h3,
body.theme-dark .success-page .success-info-box p{
  color:#e5e7eb !important;
}
html[data-theme="dark"] body .success-page .success-detail-item .label,
body.dark .success-page .success-detail-item .label,
body.theme-dark .success-page .success-detail-item .label{
  color:#cbd5e1 !important;
  opacity:1 !important;
}
/* More specific selectors for blue/dark modes */
body.blue-mode footer a.contact-link,
body.dark-mode footer a.contact-link {
    color: white !important;
}

body.blue-mode footer a.contact-link:hover,
body.dark-mode footer a.contact-link:hover {
    color: #ffeb3b !important;  /* Yellow hover color */
    text-decoration: underline;
}

/* Reset for light/slate modes */
body.light-mode footer a.contact-link,
body.slate-mode footer a.contact-link {
    color: initial !important;
}
/* v27.34 — Header menu final override: keep all dropdown rows blue, including course-details/details */
.site-header .dropdown .menu,
.site-header .dropdown.open .menu,
.site-header .dropdown .btn-more[aria-expanded="true"] + .menu,
html[data-theme="light"] .site-header .dropdown .menu,
html[data-theme="slate"] .site-header .dropdown .menu,
html[data-theme="blue"] .site-header .dropdown .menu,
html[data-theme="dark"] .site-header .dropdown .menu{
  background:#2f6f8f !important;
  background-color:#2f6f8f !important;
  border:1px solid #1f4f68 !important;
  border-radius:0 !important;
  overflow:hidden !important;
  padding:0 !important;
  box-shadow:0 18px 34px rgba(15,23,42,.24) !important;
}
.site-header .dropdown .menu a,
.site-header .dropdown .menu a:link,
.site-header .dropdown .menu a:visited,
.site-header .dropdown .menu a:focus,
.site-header .dropdown .menu a:active,
.site-header .dropdown .menu a[href*="/course-details/"],
.site-header .dropdown .menu a[href*="/details/"],
.site-header .dropdown .menu a[href*="/es/course-details/"],
.site-header .dropdown .menu a[href*="/es/details/"],
html[data-theme="light"] .site-header .dropdown .menu a,
html[data-theme="slate"] .site-header .dropdown .menu a,
html[data-theme="blue"] .site-header .dropdown .menu a,
html[data-theme="dark"] .site-header .dropdown .menu a,
html[data-theme="blue"] .site-header .dropdown .menu a[href*="/course-details/"],
html[data-theme="blue"] .site-header .dropdown .menu a[href*="/details/"],
html[data-theme="blue"] .site-header .dropdown .menu a[href*="/es/course-details/"],
html[data-theme="blue"] .site-header .dropdown .menu a[href*="/es/details/"],
html[data-theme="dark"] .site-header .dropdown .menu a[href*="/course-details/"],
html[data-theme="dark"] .site-header .dropdown .menu a[href*="/details/"],
html[data-theme="dark"] .site-header .dropdown .menu a[href*="/es/course-details/"],
html[data-theme="dark"] .site-header .dropdown .menu a[href*="/es/details/"]{
  display:block !important;
  background:#2f6f8f !important;
  background-color:#2f6f8f !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  font-weight:200 !important;
  border:0 !important;
  border-bottom:1px solid #1f4f68 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  text-decoration:none !important;
  text-shadow:none !important;
}
.site-header .dropdown .menu a:hover,
.site-header .dropdown .menu a:focus:hover,
.site-header .dropdown .menu a[href*="/course-details/"]:hover,
.site-header .dropdown .menu a[href*="/details/"]:hover,
html[data-theme="blue"] .site-header .dropdown .menu a[href*="/course-details/"]:hover,
html[data-theme="blue"] .site-header .dropdown .menu a[href*="/details/"]:hover,
html[data-theme="blue"] .site-header .dropdown .menu a[href*="/es/course-details/"]:hover,
html[data-theme="blue"] .site-header .dropdown .menu a[href*="/es/details/"]:hover,
html[data-theme="dark"] .site-header .dropdown .menu a[href*="/course-details/"]:hover,
html[data-theme="dark"] .site-header .dropdown .menu a[href*="/details/"]:hover,
html[data-theme="dark"] .site-header .dropdown .menu a[href*="/es/course-details/"]:hover,
html[data-theme="dark"] .site-header .dropdown .menu a[href*="/es/details/"]:hover{
  background:#245f7f !important;
  background-color:#245f7f !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border-bottom:1px solid #1f4f68 !important;
}
.site-header .dropdown .menu a:last-child{border-bottom:0 !important;}
@media (max-width:680px){
  .site-header .dropdown .menu,
  .site-header .dropdown.open .menu,
  .site-header .dropdown .btn-more[aria-expanded="true"] + .menu{
    border-radius:0 !important;
  }
}

/* v27.35 — Narrow-screen gutters: reduce side margins without touching phone edges */
@media (max-width:620px){
  .container,
  .site-header .container,
  .site-header .container.header-inner{
    width:calc(100% - 18px) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}
@media (max-width:380px){
  .container,
  .site-header .container,
  .site-header .container.header-inner{
    width:calc(100% - 12px) !important;
  }
}


/* v12 mobile gutter fix: keep same reduced gutter from 620px down */
@media (max-width: 620px){
  .ddtd-hero .container,
  .ddtd-section .container,
  .ddtd-page .container,
  .site-header .container,
  .site-header .container.header-inner{
    width: calc(100% - 18px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 560px){
  .ddtd-hero .container,
  .ddtd-section .container,
  .ddtd-page .container,
  .site-header .container,
  .site-header .container.header-inner{
    width: calc(100% - 18px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}




/* v27.36 course-details homepage-header exactness fixes:
   equal header control spacing, Spanish inactive language color,
   and full-width working dropdown at 680px and below. */
body.page-course-details .site-header,
body.page-course-details .site-header .header-inner,
body.page-course-details .site-header .nav{
  overflow:visible !important;
}
body.page-course-details .site-header{z-index:9999 !important;}
body.page-course-details .site-header .nav{
  column-gap:10px !important;
  row-gap:10px !important;
}
body.page-course-details .site-header .nav > .theme-toggle,
body.page-course-details .site-header .nav > .lang,
body.page-course-details .site-header .nav > .lang-switch,
body.page-course-details .site-header .nav > .dropdown{
  margin-left:0 !important;
  margin-right:0 !important;
}
body.page-course-details .site-header .dropdown .btn-more{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:31px !important;
  min-height:31px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  line-height:1 !important;
  font-weight:200 !important;
  background:#2f6f8f !important;
  border-color:#275f7a !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
body.page-course-details .site-header .dropdown .menu{
  display:none !important;
}
body.page-course-details .site-header .dropdown.open .menu,
body.page-course-details .site-header .dropdown .btn-more[aria-expanded="true"] + .menu{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  z-index:10000 !important;
}
html[data-theme="blue"] body.page-course-details.es .site-header .lang a[data-lang="en"],
html[data-theme="dark"] body.page-course-details.es .site-header .lang a[data-lang="en"],
html[data-theme="slate"] body.page-course-details.es .site-header .lang a[data-lang="en"],
body.page-course-details.es .site-header .lang a[data-lang="en"]{
  background:#ffffff !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
}
html[data-theme="blue"] body.page-course-details.es .site-header .lang a[data-lang="es"],
html[data-theme="dark"] body.page-course-details.es .site-header .lang a[data-lang="es"],
html[data-theme="slate"] body.page-course-details.es .site-header .lang a[data-lang="es"],
body.page-course-details.es .site-header .lang a[data-lang="es"]{
  background:var(--brand-blue, #1E88E5) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
html[data-theme="blue"] body.page-course-details:not(.es) .site-header .lang a[data-lang="en"],
html[data-theme="dark"] body.page-course-details:not(.es) .site-header .lang a[data-lang="en"],
html[data-theme="slate"] body.page-course-details:not(.es) .site-header .lang a[data-lang="en"],
body.page-course-details:not(.es) .site-header .lang a[data-lang="en"]{
  background:var(--brand-blue, #1E88E5) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
html[data-theme="blue"] body.page-course-details:not(.es) .site-header .lang a[data-lang="es"],
html[data-theme="dark"] body.page-course-details:not(.es) .site-header .lang a[data-lang="es"],
html[data-theme="slate"] body.page-course-details:not(.es) .site-header .lang a[data-lang="es"],
body.page-course-details:not(.es) .site-header .lang a[data-lang="es"]{
  background:#ffffff !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
}
@media (min-width:761px){
  body.page-course-details .site-header .nav{column-gap:12px !important;}
}
@media (min-width:621px) and (max-width:760px){
  body.page-course-details .site-header .nav{column-gap:6px !important;}
}
@media (max-width:680px){
  body.page-course-details .site-header{
    position:relative !important;
    overflow:visible !important;
    z-index:9999 !important;
  }
  body.page-course-details .site-header .dropdown{
    position:static !important;
  }
  body.page-course-details .site-header .dropdown.open .menu,
  body.page-course-details .site-header .dropdown .btn-more[aria-expanded="true"] + .menu{
    display:block !important;
    position:absolute !important;
    top:100% !important;
    left:0 !important;
    right:0 !important;
    width:100vw !important;
    max-width:100vw !important;
    min-width:0 !important;
    margin:0 !important;
    transform:none !important;
    border-left:0 !important;
    border-right:0 !important;
    border-radius:0 !important;
    padding:0 !important;
    z-index:10000 !important;
    background:#2f6f8f !important;
    background-color:#2f6f8f !important;
  }
  body.page-course-details .site-header .dropdown .menu a,
  body.page-course-details .site-header .dropdown .menu a:link,
  body.page-course-details .site-header .dropdown .menu a:visited{
    display:block !important;
    width:100% !important;
    border-radius:0 !important;
    border-bottom:1px solid #1f4f68 !important;
    background:#2f6f8f !important;
    background-color:#2f6f8f !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    padding:13px 18px !important;
    font-weight:200 !important;
  }
  body.page-course-details .site-header .dropdown .menu a:last-child{border-bottom:0 !important;}
}


/* v27.37 — Global approved mobile header spacing override
   Reduces the space below the second-row controls on narrow screens.
   Kept at the bottom and intentionally high-specificity so it can beat older page-level header rules. */
@media (max-width: 620px) {
  html body .site-header .container.header-inner,
  html body .site-header .header-inner.header-inner,
  html body .site-header .header-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 8px !important;
    row-gap: 10px !important;
    align-items: start !important;
    justify-content: stretch !important;
    padding-top: 10px !important;
    padding-bottom: 2px !important;
  }
}

@media (max-width: 380px) {
  html body .site-header .container.header-inner,
  html body .site-header .header-inner.header-inner,
  html body .site-header .header-inner {
    row-gap: 14px !important;
    padding-bottom: 2px !important;
  }
}

/* ==========================================================
   v28.0 — Full-site visual refresh batch 1
   Source of truth: approved checkout conversion refresh palette.
   Scope: home, course-details, FAQ, and contact only.
   Checkout is intentionally not targeted.
========================================================== */
:root{
  --dd-refresh-blue:#1E88E5;
  --dd-refresh-blue-2:#38bdf8;
  --dd-refresh-green:#22c55e;
  --dd-refresh-green-2:#34d399;
  --dd-refresh-red:#f9413d;
  --dd-refresh-ink:#0f172a;
  --dd-refresh-muted:#334155;
  --dd-refresh-line:rgba(56,189,248,.36);
  --dd-refresh-stripe:linear-gradient(90deg,#1E88E5,#20c997,#43A047);
  --dd-refresh-surface:radial-gradient(circle at top left, rgba(30,136,229,.16), transparent 35%), radial-gradient(circle at top right, rgba(67,160,71,.12), transparent 31%), linear-gradient(180deg,rgba(255,255,255,.98),rgba(240,249,255,.94) 58%,rgba(236,253,245,.90));
  --dd-refresh-surface-slate:radial-gradient(circle at top left, rgba(30,136,229,.13), transparent 35%), radial-gradient(circle at top right, rgba(67,160,71,.10), transparent 31%), linear-gradient(180deg,#ffffff 0%,#eef4fb 54%,#e6edf7 100%);
  --dd-refresh-surface-blue:radial-gradient(circle at top left, rgba(30,136,229,.28), transparent 38%), radial-gradient(circle at top right, rgba(67,160,71,.18), transparent 34%), linear-gradient(180deg,#12324a 0%,#0c2033 100%);
  --dd-refresh-surface-dark:radial-gradient(circle at top left, rgba(56,189,248,.18), transparent 36%), radial-gradient(circle at top right, rgba(34,197,94,.13), transparent 34%), linear-gradient(180deg,#111827 0%,#06080f 100%);
}

html[data-theme="light"] body.page-home:not(.faq-page),
html:not([data-theme]) body.page-home:not(.faq-page),
html[data-theme="light"] body.faq-page,
html:not([data-theme]) body.faq-page,
html[data-theme="light"] body.page-contact,
html:not([data-theme]) body.page-contact,
html[data-theme="light"] body.page-course-details,
html:not([data-theme]) body.page-course-details{
  background:
    radial-gradient(circle at 14% 0%, rgba(30,136,229,.20), transparent 36%),
    radial-gradient(circle at 86% 4%, rgba(67,160,71,.15), transparent 32%),
    linear-gradient(180deg,#fbfdff 0%,#eef7ff 46%,#e9f8ef 100%) !important;
  color:#0f172a !important;
}
html[data-theme="slate"] body.page-home:not(.faq-page),
html[data-theme="slate"] body.faq-page,
html[data-theme="slate"] body.page-contact,
html[data-theme="slate"] body.page-course-details{
  background:
    radial-gradient(circle at 14% 0%, rgba(30,136,229,.16), transparent 36%),
    radial-gradient(circle at 86% 4%, rgba(67,160,71,.12), transparent 32%),
    linear-gradient(180deg,#f8fafc 0%,#e8eef7 46%,#dde7f2 100%) !important;
  color:#0f172a !important;
}
html[data-theme="blue"] body.page-home:not(.faq-page),
html[data-theme="blue"] body.faq-page,
html[data-theme="blue"] body.page-contact,
html[data-theme="blue"] body.page-course-details{
  background:
    radial-gradient(circle at 16% 0%, rgba(30,136,229,.38), transparent 34%),
    radial-gradient(circle at 82% 8%, rgba(34,197,94,.22), transparent 32%),
    linear-gradient(180deg,#061f3a 0%,#041729 48%,#03111f 100%) !important;
  color:#eaf7ff !important;
}
html[data-theme="dark"] body.page-home:not(.faq-page),
html[data-theme="dark"] body.faq-page,
html[data-theme="dark"] body.page-contact,
html[data-theme="dark"] body.page-course-details{
  background:
    radial-gradient(circle at 15% 0%, rgba(56,189,248,.18), transparent 34%),
    radial-gradient(circle at 85% 6%, rgba(34,197,94,.13), transparent 32%),
    linear-gradient(180deg,#0b1118 0%,#06080f 48%,#020409 100%) !important;
  color:#f8fafc !important;
}

html[data-theme="blue"] body.page-home:not(.faq-page) .site-footer,
html[data-theme="blue"] body.faq-page .site-footer,
html[data-theme="blue"] body.page-contact .site-footer,
html[data-theme="blue"] body.page-course-details .site-footer{
  background:linear-gradient(180deg,#061b2f,#061b2f) !important;
  border-top-color:rgba(125,211,252,.18) !important;
}
html[data-theme="dark"] body.page-home:not(.faq-page) .site-footer,
html[data-theme="dark"] body.faq-page .site-footer,
html[data-theme="dark"] body.page-contact .site-footer,
html[data-theme="dark"] body.page-course-details .site-footer{
  background:linear-gradient(180deg,#0b1118,#0b1118) !important;
  border-top-color:rgba(255,255,255,.10) !important;
}
html[data-theme="slate"] body.page-home:not(.faq-page) .site-footer,
html[data-theme="slate"] body.faq-page .site-footer,
html[data-theme="slate"] body.page-contact .site-footer,
html[data-theme="slate"] body.page-course-details .site-footer{
  background:#f6f8fb !important;
  border-top-color:rgba(15,23,42,.12) !important;
}

/* Premium panel/card system */
body.page-home:not(.faq-page) .trust-status .trust-card,
body.page-home:not(.faq-page) .sixboxes .feature-card,
body.page-home:not(.faq-page) .course-paths-card,
body.page-home:not(.faq-page) .path-card,
body.page-home:not(.faq-page) .inscalc-inner,
body.faq-page .faq-hero,
body.faq-page .faq-card,
body.faq-page .faq-help,
body.faq-page .faq-path-link,
body.page-contact main > .card,
body.page-contact main .card,
body.page-contact .contact-faq-inline .faq-item,
body.page-course-details .ddtd-hero-card,
body.page-course-details .ddtd-box,
body.page-course-details .cd-card,
body.page-course-details .cd-paths-panel,
body.page-course-details .cd-path-card,
body.page-course-details .cd-testimonial,
body.page-course-details .cd-insurance-explain{
  position:relative !important;
  overflow:hidden !important;
  border-radius:20px !important;
  background:var(--dd-refresh-surface) !important;
  border:2px solid var(--dd-refresh-line) !important;
  box-shadow:0 18px 42px rgba(14,165,233,.13), 0 4px 14px rgba(15,23,42,.07) !important;
  color:#0f172a !important;
}
html[data-theme="slate"] body.page-home:not(.faq-page) .trust-status .trust-card,
html[data-theme="slate"] body.page-home:not(.faq-page) .sixboxes .feature-card,
html[data-theme="slate"] body.page-home:not(.faq-page) .course-paths-card,
html[data-theme="slate"] body.page-home:not(.faq-page) .path-card,
html[data-theme="slate"] body.page-home:not(.faq-page) .inscalc-inner,
html[data-theme="slate"] body.faq-page .faq-hero,
html[data-theme="slate"] body.faq-page .faq-card,
html[data-theme="slate"] body.faq-page .faq-help,
html[data-theme="slate"] body.faq-page .faq-path-link,
html[data-theme="slate"] body.page-contact main > .card,
html[data-theme="slate"] body.page-contact main .card,
html[data-theme="slate"] body.page-contact .contact-faq-inline .faq-item,
html[data-theme="slate"] body.page-course-details .ddtd-hero-card,
html[data-theme="slate"] body.page-course-details .ddtd-box,
html[data-theme="slate"] body.page-course-details .cd-card,
html[data-theme="slate"] body.page-course-details .cd-paths-panel,
html[data-theme="slate"] body.page-course-details .cd-path-card,
html[data-theme="slate"] body.page-course-details .cd-testimonial,
html[data-theme="slate"] body.page-course-details .cd-insurance-explain{
  background:var(--dd-refresh-surface-slate) !important;
  border-color:rgba(30,136,229,.34) !important;
  box-shadow:0 18px 42px rgba(15,23,42,.12), 0 0 0 1px rgba(255,255,255,.60) inset !important;
  color:#0f172a !important;
}
html[data-theme="blue"] body.page-home:not(.faq-page) .trust-status .trust-card,
html[data-theme="blue"] body.page-home:not(.faq-page) .sixboxes .feature-card,
html[data-theme="blue"] body.page-home:not(.faq-page) .course-paths-card,
html[data-theme="blue"] body.page-home:not(.faq-page) .path-card,
html[data-theme="blue"] body.page-home:not(.faq-page) .inscalc-inner,
html[data-theme="blue"] body.faq-page .faq-hero,
html[data-theme="blue"] body.faq-page .faq-card,
html[data-theme="blue"] body.faq-page .faq-help,
html[data-theme="blue"] body.faq-page .faq-path-link,
html[data-theme="blue"] body.page-contact main > .card,
html[data-theme="blue"] body.page-contact main .card,
html[data-theme="blue"] body.page-contact .contact-faq-inline .faq-item,
html[data-theme="blue"] body.page-course-details .ddtd-hero-card,
html[data-theme="blue"] body.page-course-details .ddtd-box,
html[data-theme="blue"] body.page-course-details .cd-card,
html[data-theme="blue"] body.page-course-details .cd-paths-panel,
html[data-theme="blue"] body.page-course-details .cd-path-card,
html[data-theme="blue"] body.page-course-details .cd-testimonial,
html[data-theme="blue"] body.page-course-details .cd-insurance-explain{
  background:var(--dd-refresh-surface-blue) !important;
  border-color:#38bdf8 !important;
  box-shadow:0 22px 54px rgba(0,0,0,.42), 0 0 0 1px rgba(56,189,248,.14) inset !important;
  color:#f8fafc !important;
}
html[data-theme="dark"] body.page-home:not(.faq-page) .trust-status .trust-card,
html[data-theme="dark"] body.page-home:not(.faq-page) .sixboxes .feature-card,
html[data-theme="dark"] body.page-home:not(.faq-page) .course-paths-card,
html[data-theme="dark"] body.page-home:not(.faq-page) .path-card,
html[data-theme="dark"] body.page-home:not(.faq-page) .inscalc-inner,
html[data-theme="dark"] body.faq-page .faq-hero,
html[data-theme="dark"] body.faq-page .faq-card,
html[data-theme="dark"] body.faq-page .faq-help,
html[data-theme="dark"] body.faq-page .faq-path-link,
html[data-theme="dark"] body.page-contact main > .card,
html[data-theme="dark"] body.page-contact main .card,
html[data-theme="dark"] body.page-contact .contact-faq-inline .faq-item,
html[data-theme="dark"] body.page-course-details .ddtd-hero-card,
html[data-theme="dark"] body.page-course-details .ddtd-box,
html[data-theme="dark"] body.page-course-details .cd-card,
html[data-theme="dark"] body.page-course-details .cd-paths-panel,
html[data-theme="dark"] body.page-course-details .cd-path-card,
html[data-theme="dark"] body.page-course-details .cd-testimonial,
html[data-theme="dark"] body.page-course-details .cd-insurance-explain{
  background:var(--dd-refresh-surface-dark) !important;
  border-color:rgba(125,211,252,.48) !important;
  box-shadow:0 22px 54px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.08) inset !important;
  color:#f8fafc !important;
}

body.page-home:not(.faq-page) .trust-status .trust-card::before,
body.page-home:not(.faq-page) .sixboxes .feature-card::before,
body.page-home:not(.faq-page) .course-paths-card::before,
body.page-home:not(.faq-page) .path-card::before,
body.page-home:not(.faq-page) .inscalc-inner::before,
body.faq-page .faq-hero::before,
body.faq-page .faq-card::before,
body.faq-page .faq-help::before,
body.faq-page .faq-path-link::before,
body.page-contact main > .card::before,
body.page-contact main .card::before,
body.page-contact .contact-faq-inline .faq-item::before,
body.page-course-details .ddtd-hero-card::before,
body.page-course-details .ddtd-box::before,
body.page-course-details .cd-card::before,
body.page-course-details .cd-paths-panel::before,
body.page-course-details .cd-path-card::before,
body.page-course-details .cd-testimonial::before,
body.page-course-details .cd-insurance-explain::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:18px !important;
  right:18px !important;
  height:4px !important;
  border-radius:0 0 999px 999px !important;
  background:var(--dd-refresh-stripe) !important;
  z-index:0 !important;
}
body.page-home:not(.faq-page) .trust-status .trust-card > *,
body.page-home:not(.faq-page) .sixboxes .feature-card > *,
body.page-home:not(.faq-page) .course-paths-card > *,
body.page-home:not(.faq-page) .path-card > *,
body.page-home:not(.faq-page) .inscalc-inner > *,
body.faq-page .faq-hero > *,
body.faq-page .faq-card > *,
body.faq-page .faq-help > *,
body.faq-page .faq-path-link > *,
body.page-contact main > .card > *,
body.page-contact main .card > *,
body.page-contact .contact-faq-inline .faq-item > *,
body.page-course-details .ddtd-hero-card > *,
body.page-course-details .ddtd-box > *,
body.page-course-details .cd-card > *,
body.page-course-details .cd-paths-panel > *,
body.page-course-details .cd-path-card > *,
body.page-course-details .cd-testimonial > *,
body.page-course-details .cd-insurance-explain > *{
  position:relative !important;
  z-index:1 !important;
}

/* Stronger readable type inside dark/blue refreshed panels. */
html[data-theme="blue"] body.page-home:not(.faq-page) .trust-status p,
html[data-theme="blue"] body.page-home:not(.faq-page) .course-paths p,
html[data-theme="blue"] body.page-home:not(.faq-page) .feature-card p,
html[data-theme="blue"] body.page-home:not(.faq-page) .path-card span:last-child,
html[data-theme="blue"] body.page-home:not(.faq-page) .inscalc-copy p,
html[data-theme="blue"] body.faq-page .faq-a,
html[data-theme="blue"] body.faq-page .faq-card p,
html[data-theme="blue"] body.faq-page .faq-card li,
html[data-theme="blue"] body.faq-page .faq-help .muted,
html[data-theme="blue"] body.page-contact p,
html[data-theme="blue"] body.page-contact .faq-a,
html[data-theme="blue"] body.page-course-details .ddtd-hero-sub,
html[data-theme="blue"] body.page-course-details .ddtd-box p,
html[data-theme="blue"] body.page-course-details .cd-card p,
html[data-theme="blue"] body.page-course-details .cd-path-card .desc,
html[data-theme="blue"] body.page-course-details .cd-quote,
html[data-theme="dark"] body.page-home:not(.faq-page) .trust-status p,
html[data-theme="dark"] body.page-home:not(.faq-page) .course-paths p,
html[data-theme="dark"] body.page-home:not(.faq-page) .feature-card p,
html[data-theme="dark"] body.page-home:not(.faq-page) .path-card span:last-child,
html[data-theme="dark"] body.page-home:not(.faq-page) .inscalc-copy p,
html[data-theme="dark"] body.faq-page .faq-a,
html[data-theme="dark"] body.faq-page .faq-card p,
html[data-theme="dark"] body.faq-page .faq-card li,
html[data-theme="dark"] body.faq-page .faq-help .muted,
html[data-theme="dark"] body.page-contact p,
html[data-theme="dark"] body.page-contact .faq-a,
html[data-theme="dark"] body.page-course-details .ddtd-hero-sub,
html[data-theme="dark"] body.page-course-details .ddtd-box p,
html[data-theme="dark"] body.page-course-details .cd-card p,
html[data-theme="dark"] body.page-course-details .cd-path-card .desc,
html[data-theme="dark"] body.page-course-details .cd-quote{
  color:rgba(248,250,252,.88) !important;
}
html[data-theme="blue"] body.page-home:not(.faq-page) h1,
html[data-theme="blue"] body.page-home:not(.faq-page) h2,
html[data-theme="blue"] body.page-home:not(.faq-page) h3,
html[data-theme="blue"] body.faq-page h1,
html[data-theme="blue"] body.faq-page h2,
html[data-theme="blue"] body.faq-page h3,
html[data-theme="blue"] body.page-contact h1,
html[data-theme="blue"] body.page-contact h2,
html[data-theme="blue"] body.page-contact h3,
html[data-theme="blue"] body.page-course-details h1,
html[data-theme="blue"] body.page-course-details h2,
html[data-theme="blue"] body.page-course-details h3,
html[data-theme="dark"] body.page-home:not(.faq-page) h1,
html[data-theme="dark"] body.page-home:not(.faq-page) h2,
html[data-theme="dark"] body.page-home:not(.faq-page) h3,
html[data-theme="dark"] body.faq-page h1,
html[data-theme="dark"] body.faq-page h2,
html[data-theme="dark"] body.faq-page h3,
html[data-theme="dark"] body.page-contact h1,
html[data-theme="dark"] body.page-contact h2,
html[data-theme="dark"] body.page-contact h3,
html[data-theme="dark"] body.page-course-details h1,
html[data-theme="dark"] body.page-course-details h2,
html[data-theme="dark"] body.page-course-details h3{
  color:#ffffff !important;
}

/* Checkout-style trust pills and badges. */
body.page-home:not(.faq-page) .trust-pill,
body.page-home:not(.faq-page) .pill.trust-pill,
body.page-home:not(.faq-page) .paths-eyebrow,
body.page-home:not(.faq-page) .trust-status .kicker,
body.page-course-details .ddtd-pill,
body.page-course-details .ddtd-badge,
body.page-course-details .cd-badge,
body.page-course-details .cd-paths-eyebrow,
body.page-course-details .cd-calc-eyebrow,
body.faq-page .kicker,
body.faq-page .faq-video-cta,
body.page-contact .response-badge{
  background:#e0f2fe !important;
  border:2px solid #38bdf8 !important;
  color:#075985 !important;
  box-shadow:0 10px 22px rgba(14,165,233,.16) !important;
  font-weight:900 !important;
}
body.page-home:not(.faq-page) .inscalc-pill:nth-child(2),
body.page-course-details .ddtd-pill:nth-child(2),
body.page-course-details .cd-mini-btn.primary,
body.page-contact .response-badge{
  background:#dcfce7 !important;
  border-color:#22c55e !important;
  color:#14532d !important;
  box-shadow:0 10px 22px rgba(34,197,94,.18) !important;
}
html[data-theme="blue"] body.page-home:not(.faq-page) .trust-pill,
html[data-theme="blue"] body.page-home:not(.faq-page) .pill.trust-pill,
html[data-theme="blue"] body.page-home:not(.faq-page) .paths-eyebrow,
html[data-theme="blue"] body.page-home:not(.faq-page) .trust-status .kicker,
html[data-theme="blue"] body.page-course-details .ddtd-pill,
html[data-theme="blue"] body.page-course-details .ddtd-badge,
html[data-theme="blue"] body.page-course-details .cd-badge,
html[data-theme="blue"] body.page-course-details .cd-paths-eyebrow,
html[data-theme="blue"] body.page-course-details .cd-calc-eyebrow,
html[data-theme="blue"] body.faq-page .kicker,
html[data-theme="blue"] body.faq-page .faq-video-cta,
html[data-theme="blue"] body.page-contact .response-badge,
html[data-theme="dark"] body.page-home:not(.faq-page) .trust-pill,
html[data-theme="dark"] body.page-home:not(.faq-page) .pill.trust-pill,
html[data-theme="dark"] body.page-home:not(.faq-page) .paths-eyebrow,
html[data-theme="dark"] body.page-home:not(.faq-page) .trust-status .kicker,
html[data-theme="dark"] body.page-course-details .ddtd-pill,
html[data-theme="dark"] body.page-course-details .ddtd-badge,
html[data-theme="dark"] body.page-course-details .cd-badge,
html[data-theme="dark"] body.page-course-details .cd-paths-eyebrow,
html[data-theme="dark"] body.page-course-details .cd-calc-eyebrow,
html[data-theme="dark"] body.faq-page .kicker,
html[data-theme="dark"] body.faq-page .faq-video-cta,
html[data-theme="dark"] body.page-contact .response-badge{
  background:#0b4f75 !important;
  border-color:#7dd3fc !important;
  color:#ffffff !important;
  box-shadow:0 12px 26px rgba(0,0,0,.30) !important;
}

/* Stronger buttons and button-like links. */
body.page-home:not(.faq-page) .cta,
body.page-home:not(.faq-page) .btn-primary,
body.page-home:not(.faq-page) .hero-cta-row .cta.big,
body.page-course-details .ddtd-btn-primary,
body.page-course-details .cd-mini-btn.primary,
body.faq-page .faq-cta a.primary,
body.faq-page .faq-video-cta,
body.page-contact button[type="submit"],
body.page-contact .contact-submit,
body.page-contact .contact-copy-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  border-radius:999px !important;
  border:1px solid rgba(0,0,0,.06) !important;
  background:#f9413d !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  font-weight:950 !important;
  text-decoration:none !important;
  box-shadow:0 14px 30px rgba(249,65,61,.28) !important;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}
body.page-home:not(.faq-page) .cta:hover,
body.page-home:not(.faq-page) .btn-primary:hover,
body.page-course-details .ddtd-btn-primary:hover,
body.page-course-details .cd-mini-btn.primary:hover,
body.faq-page .faq-cta a.primary:hover,
body.faq-page .faq-video-cta:hover,
body.page-contact button[type="submit"]:hover,
body.page-contact .contact-submit:hover,
body.page-contact .contact-copy-btn:hover{
  transform:translateY(-1px) !important;
  filter:brightness(1.03) !important;
  box-shadow:0 18px 40px rgba(249,65,61,.36) !important;
}
body.page-home:not(.faq-page) .btn-ghost,
body.page-course-details .ddtd-btn-secondary,
body.page-course-details .cd-mini-btn,
body.page-course-details .ddtd-guarantee-link,
body.faq-page .faq-video-btn,
body.faq-page .faq-cta a:not(.primary),
body.faq-page .faq-path-link .cta-mini,
body.page-contact .contact-link{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:38px !important;
  padding:9px 13px !important;
  border-radius:999px !important;
  border:2px solid #38bdf8 !important;
  background:#e0f2fe !important;
  color:#075985 !important;
  -webkit-text-fill-color:#075985 !important;
  font-weight:900 !important;
  text-decoration:none !important;
  box-shadow:0 10px 22px rgba(14,165,233,.14) !important;
}
body.page-course-details .ddtd-guarantee-link{
  width:max-content !important;
  max-width:100% !important;
}
html[data-theme="blue"] body.page-home:not(.faq-page) .btn-ghost,
html[data-theme="blue"] body.page-course-details .ddtd-btn-secondary,
html[data-theme="blue"] body.page-course-details .cd-mini-btn,
html[data-theme="blue"] body.page-course-details .ddtd-guarantee-link,
html[data-theme="blue"] body.faq-page .faq-video-btn,
html[data-theme="blue"] body.faq-page .faq-cta a:not(.primary),
html[data-theme="blue"] body.faq-page .faq-path-link .cta-mini,
html[data-theme="blue"] body.page-contact .contact-link,
html[data-theme="dark"] body.page-home:not(.faq-page) .btn-ghost,
html[data-theme="dark"] body.page-course-details .ddtd-btn-secondary,
html[data-theme="dark"] body.page-course-details .cd-mini-btn,
html[data-theme="dark"] body.page-course-details .ddtd-guarantee-link,
html[data-theme="dark"] body.faq-page .faq-video-btn,
html[data-theme="dark"] body.faq-page .faq-cta a:not(.primary),
html[data-theme="dark"] body.faq-page .faq-path-link .cta-mini,
html[data-theme="dark"] body.page-contact .contact-link{
  background:#0b4f75 !important;
  border-color:#7dd3fc !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  box-shadow:0 12px 26px rgba(0,0,0,.30) !important;
}

/* FAQ and contact internals: clearer panels without breaking accordion JS. */
body.faq-page .faq-item,
body.page-contact .contact-faq-inline .faq-item{
  border:1px solid rgba(30,136,229,.22) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.72) !important;
  box-shadow:0 8px 18px rgba(15,23,42,.06) !important;
}
html[data-theme="blue"] body.faq-page .faq-item,
html[data-theme="dark"] body.faq-page .faq-item,
html[data-theme="blue"] body.page-contact .contact-faq-inline .faq-item,
html[data-theme="dark"] body.page-contact .contact-faq-inline .faq-item{
  background:rgba(255,255,255,.065) !important;
  border-color:rgba(125,211,252,.22) !important;
  box-shadow:none !important;
}
body.faq-page .faq-q,
body.page-contact .contact-faq-inline summary{
  color:#0f172a !important;
  font-weight:900 !important;
}
html[data-theme="blue"] body.faq-page .faq-q,
html[data-theme="dark"] body.faq-page .faq-q,
html[data-theme="blue"] body.page-contact .contact-faq-inline summary,
html[data-theme="dark"] body.page-contact .contact-faq-inline summary{
  color:#ffffff !important;
}

/* Forms: checkout-style readable inputs. */
body.page-contact input:not([type="hidden"]),
body.page-contact textarea,
body.page-course-details input,
body.page-course-details select,
body.page-course-details textarea{
  background:#ffffff !important;
  color:#0f172a !important;
  -webkit-text-fill-color:#0f172a !important;
  border:2px solid #60a5fa !important;
  border-radius:16px !important;
  box-shadow:0 10px 24px rgba(2,6,23,.10), 0 0 0 4px rgba(30,136,229,.08) !important;
  font-weight:800 !important;
}
body.page-contact input:not([type="hidden"]):focus,
body.page-contact textarea:focus,
body.page-course-details input:focus,
body.page-course-details select:focus,
body.page-course-details textarea:focus{
  border-color:#0ea5e9 !important;
  box-shadow:0 12px 28px rgba(2,6,23,.14), 0 0 0 5px rgba(14,165,233,.22) !important;
}
body.page-contact input::placeholder,
body.page-contact textarea::placeholder,
body.page-course-details input::placeholder,
body.page-course-details textarea::placeholder{
  color:#64748b !important;
  -webkit-text-fill-color:#64748b !important;
  font-weight:700 !important;
}
body.page-contact .copy-pill{
  background:#ffffff !important;
  color:#0f172a !important;
  -webkit-text-fill-color:#0f172a !important;
  border:2px solid #60a5fa !important;
  box-shadow:0 10px 24px rgba(2,6,23,.10), 0 0 0 4px rgba(30,136,229,.08) !important;
}

@media (max-width:720px){
  body.page-contact .grid-3,
  body.page-contact .grid-2{
    grid-template-columns:1fr !important;
  }
}
@media (max-width:640px){
  body.page-home:not(.faq-page) .trust-status .trust-card,
  body.page-home:not(.faq-page) .sixboxes .feature-card,
  body.page-home:not(.faq-page) .course-paths-card,
  body.page-home:not(.faq-page) .path-card,
  body.page-home:not(.faq-page) .inscalc-inner,
  body.faq-page .faq-hero,
  body.faq-page .faq-card,
  body.faq-page .faq-help,
  body.faq-page .faq-path-link,
  body.page-contact main > .card,
  body.page-contact main .card,
  body.page-contact .contact-faq-inline .faq-item,
  body.page-course-details .ddtd-hero-card,
  body.page-course-details .ddtd-box,
  body.page-course-details .cd-card,
  body.page-course-details .cd-paths-panel,
  body.page-course-details .cd-path-card,
  body.page-course-details .cd-testimonial,
  body.page-course-details .cd-insurance-explain{
    border-radius:18px !important;
  }
  body.page-home:not(.faq-page) .trust-status .trust-card::before,
  body.page-home:not(.faq-page) .sixboxes .feature-card::before,
  body.page-home:not(.faq-page) .course-paths-card::before,
  body.page-home:not(.faq-page) .path-card::before,
  body.page-home:not(.faq-page) .inscalc-inner::before,
  body.faq-page .faq-hero::before,
  body.faq-page .faq-card::before,
  body.faq-page .faq-help::before,
  body.faq-page .faq-path-link::before,
  body.page-contact main > .card::before,
  body.page-contact main .card::before,
  body.page-contact .contact-faq-inline .faq-item::before,
  body.page-course-details .ddtd-hero-card::before,
  body.page-course-details .ddtd-box::before,
  body.page-course-details .cd-card::before,
  body.page-course-details .cd-paths-panel::before,
  body.page-course-details .cd-path-card::before,
  body.page-course-details .cd-testimonial::before,
  body.page-course-details .cd-insurance-explain::before{
    left:14px !important;
    right:14px !important;
  }
}

/* ==========================================================
   v28.1 — Checkout-source visual refresh refinements
   Scope: first-batch non-checkout pages only.
   Checkout remains untouched.
========================================================== */
:root{
  --dd-v281-main-surface: radial-gradient(circle at top left, rgba(30,136,229,.18), transparent 34%), radial-gradient(circle at top right, rgba(67,160,71,.13), transparent 30%), rgba(255,255,255,.94);
  --dd-v281-main-surface-slate: radial-gradient(circle at top left, rgba(30,136,229,.14), transparent 34%), radial-gradient(circle at top right, rgba(67,160,71,.10), transparent 30%), rgba(255,255,255,.92);
  --dd-v281-main-surface-blue: radial-gradient(circle at top left, rgba(30,136,229,.32), transparent 38%), radial-gradient(circle at top right, rgba(67,160,71,.20), transparent 34%), rgba(12,27,43,.88);
  --dd-v281-main-surface-dark: radial-gradient(circle at top left, rgba(56,189,248,.20), transparent 38%), radial-gradient(circle at top right, rgba(34,197,94,.14), transparent 34%), rgba(12,18,30,.92);
  --dd-v281-stripe: linear-gradient(90deg,#1E88E5,#20c997,#43A047);
  --dd-v281-orange:#f59e0b;
  --dd-v281-yellow:#fffbeb;
}

/* Put the outside page canvas back to the normal theme feel. Keep the premium gradient inside body cards. */
html[data-theme="light"] body.page-home:not(.faq-page),
html:not([data-theme]) body.page-home:not(.faq-page),
html[data-theme="light"] body.faq-page,
html:not([data-theme]) body.faq-page,
html[data-theme="light"] body.page-contact,
html:not([data-theme]) body.page-contact,
html[data-theme="light"] body.page-course-details,
html:not([data-theme]) body.page-course-details{
  background:#ffffff !important;
}
html[data-theme="slate"] body.page-home:not(.faq-page),
html[data-theme="slate"] body.faq-page,
html[data-theme="slate"] body.page-contact,
html[data-theme="slate"] body.page-course-details{
  background:#f6f8fb !important;
}
html[data-theme="blue"] body.page-home:not(.faq-page),
html[data-theme="blue"] body.faq-page,
html[data-theme="blue"] body.page-contact,
html[data-theme="blue"] body.page-course-details{
  background:#061b2f !important;
}
html[data-theme="dark"] body.page-home:not(.faq-page),
html[data-theme="dark"] body.faq-page,
html[data-theme="dark"] body.page-contact,
html[data-theme="dark"] body.page-course-details{
  background:#0b1118 !important;
}

/* Checkout-style main body card surfaces: gradient lives inside the card, not across the whole page. */
body.page-contact main > section.card,
body.page-course-details .ddtd-hero-card,
body.page-course-details .ddtd-box,
body.page-course-details .cd-card,
body.page-course-details .cd-paths-panel,
body.page-course-details .cd-insurance-explain,
body.faq-page .faq-hero,
body.faq-page .faq-card,
body.faq-page .faq-help,
body.page-home:not(.faq-page) .trust-status .trust-card,
body.page-home:not(.faq-page) .sixboxes .feature-card,
body.page-home:not(.faq-page) .course-paths-card,
body.page-home:not(.faq-page) .inscalc-inner{
  background:var(--dd-v281-main-surface) !important;
  border:1px solid rgba(148,163,184,.26) !important;
  box-shadow:0 24px 70px rgba(2,6,23,.14) !important;
}
html[data-theme="slate"] body.page-contact main > section.card,
html[data-theme="slate"] body.page-course-details .ddtd-hero-card,
html[data-theme="slate"] body.page-course-details .ddtd-box,
html[data-theme="slate"] body.page-course-details .cd-card,
html[data-theme="slate"] body.page-course-details .cd-paths-panel,
html[data-theme="slate"] body.page-course-details .cd-insurance-explain,
html[data-theme="slate"] body.faq-page .faq-hero,
html[data-theme="slate"] body.faq-page .faq-card,
html[data-theme="slate"] body.faq-page .faq-help,
html[data-theme="slate"] body.page-home:not(.faq-page) .trust-status .trust-card,
html[data-theme="slate"] body.page-home:not(.faq-page) .sixboxes .feature-card,
html[data-theme="slate"] body.page-home:not(.faq-page) .course-paths-card,
html[data-theme="slate"] body.page-home:not(.faq-page) .inscalc-inner{
  background:var(--dd-v281-main-surface-slate) !important;
  border-color:rgba(148,163,184,.30) !important;
}
html[data-theme="blue"] body.page-contact main > section.card,
html[data-theme="blue"] body.page-course-details .ddtd-hero-card,
html[data-theme="blue"] body.page-course-details .ddtd-box,
html[data-theme="blue"] body.page-course-details .cd-card,
html[data-theme="blue"] body.page-course-details .cd-paths-panel,
html[data-theme="blue"] body.page-course-details .cd-insurance-explain,
html[data-theme="blue"] body.faq-page .faq-hero,
html[data-theme="blue"] body.faq-page .faq-card,
html[data-theme="blue"] body.faq-page .faq-help,
html[data-theme="blue"] body.page-home:not(.faq-page) .trust-status .trust-card,
html[data-theme="blue"] body.page-home:not(.faq-page) .sixboxes .feature-card,
html[data-theme="blue"] body.page-home:not(.faq-page) .course-paths-card,
html[data-theme="blue"] body.page-home:not(.faq-page) .inscalc-inner,
html[data-theme="dark"] body.page-contact main > section.card,
html[data-theme="dark"] body.page-course-details .ddtd-hero-card,
html[data-theme="dark"] body.page-course-details .ddtd-box,
html[data-theme="dark"] body.page-course-details .cd-card,
html[data-theme="dark"] body.page-course-details .cd-paths-panel,
html[data-theme="dark"] body.page-course-details .cd-insurance-explain,
html[data-theme="dark"] body.faq-page .faq-hero,
html[data-theme="dark"] body.faq-page .faq-card,
html[data-theme="dark"] body.faq-page .faq-help,
html[data-theme="dark"] body.page-home:not(.faq-page) .trust-status .trust-card,
html[data-theme="dark"] body.page-home:not(.faq-page) .sixboxes .feature-card,
html[data-theme="dark"] body.page-home:not(.faq-page) .course-paths-card,
html[data-theme="dark"] body.page-home:not(.faq-page) .inscalc-inner{
  background:var(--dd-v281-main-surface-blue) !important;
  border-color:rgba(255,255,255,.13) !important;
  box-shadow:0 28px 80px rgba(0,0,0,.44) !important;
}
html[data-theme="dark"] body.page-contact main > section.card,
html[data-theme="dark"] body.page-course-details .ddtd-hero-card,
html[data-theme="dark"] body.page-course-details .ddtd-box,
html[data-theme="dark"] body.page-course-details .cd-card,
html[data-theme="dark"] body.page-course-details .cd-paths-panel,
html[data-theme="dark"] body.page-course-details .cd-insurance-explain,
html[data-theme="dark"] body.faq-page .faq-hero,
html[data-theme="dark"] body.faq-page .faq-card,
html[data-theme="dark"] body.faq-page .faq-help,
html[data-theme="dark"] body.page-home:not(.faq-page) .trust-status .trust-card,
html[data-theme="dark"] body.page-home:not(.faq-page) .sixboxes .feature-card,
html[data-theme="dark"] body.page-home:not(.faq-page) .course-paths-card,
html[data-theme="dark"] body.page-home:not(.faq-page) .inscalc-inner{
  background:var(--dd-v281-main-surface-dark) !important;
}

/* Stop every nested card from getting a top stripe. Use the checkout pattern: only primary body panels get it. */
body.page-home:not(.faq-page) .trust-status .trust-card::before,
body.page-home:not(.faq-page) .sixboxes .feature-card::before,
body.page-home:not(.faq-page) .course-paths-card::before,
body.page-home:not(.faq-page) .path-card::before,
body.page-home:not(.faq-page) .inscalc-inner::before,
body.faq-page .faq-hero::before,
body.faq-page .faq-card::before,
body.faq-page .faq-help::before,
body.faq-page .faq-path-link::before,
body.page-contact main > .card::before,
body.page-contact main .card::before,
body.page-contact .contact-faq-inline .faq-item::before,
body.page-course-details .ddtd-hero-card::before,
body.page-course-details .ddtd-box::before,
body.page-course-details .cd-card::before,
body.page-course-details .cd-paths-panel::before,
body.page-course-details .cd-path-card::before,
body.page-course-details .cd-testimonial::before,
body.page-course-details .cd-insurance-explain::before{
  content:none !important;
  display:none !important;
}
body.page-contact main > section.card::before,
body.page-course-details .ddtd-hero-card::before,
body.page-course-details .ddtd-box::before,
body.page-course-details .cd-card::before,
body.page-course-details .cd-paths-panel::before,
body.faq-page .faq-hero::before,
body.faq-page .faq-card::before,
body.page-home:not(.faq-page) .trust-status .trust-card::before,
body.page-home:not(.faq-page) .sixboxes .feature-card::before,
body.page-home:not(.faq-page) .course-paths-card::before,
body.page-home:not(.faq-page) .inscalc-inner::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  top:0 !important;
  left:24px !important;
  right:24px !important;
  height:4px !important;
  border-radius:0 0 999px 999px !important;
  background:var(--dd-v281-stripe) !important;
  z-index:0 !important;
}

/* Contact: three top boxes should line up cleanly and use checkout-style side accent, not top stripes. */
body.page-contact .grid-3{
  align-items:stretch !important;
}
body.page-contact .grid-3 > .card{
  display:flex !important;
  flex-direction:column !important;
  min-height:154px !important;
  height:100% !important;
  justify-content:flex-start !important;
  border:2px solid rgba(14,165,233,.30) !important;
  border-left:6px solid #1E88E5 !important;
  border-radius:16px !important;
  background:#ffffff !important;
  box-shadow:0 10px 24px rgba(2,6,23,.08) !important;
}
body.page-contact .grid-3 > .card:nth-child(2){
  background:#f0fdf4 !important;
  border-color:rgba(34,197,94,.38) !important;
  border-left-color:#22c55e !important;
}
body.page-contact .grid-3 > .card:nth-child(3){
  background:#fffbeb !important;
  border-color:rgba(245,158,11,.40) !important;
  border-left-color:#f59e0b !important;
}
html[data-theme="blue"] body.page-contact .grid-3 > .card,
html[data-theme="dark"] body.page-contact .grid-3 > .card{
  background:#0b2a3f !important;
  border-color:#38bdf8 !important;
  border-left-color:#38bdf8 !important;
  box-shadow:0 12px 28px rgba(0,0,0,.30) !important;
}
html[data-theme="blue"] body.page-contact .grid-3 > .card:nth-child(2),
html[data-theme="dark"] body.page-contact .grid-3 > .card:nth-child(2){
  background:#0f3c2c !important;
  border-color:#34d399 !important;
  border-left-color:#34d399 !important;
}
html[data-theme="blue"] body.page-contact .grid-3 > .card:nth-child(3),
html[data-theme="dark"] body.page-contact .grid-3 > .card:nth-child(3){
  background:#3b2a0b !important;
  border-color:#fbbf24 !important;
  border-left-color:#fbbf24 !important;
}
body.page-contact .grid-3 > .card h3,
body.page-contact .grid-3 > .card p,
body.page-contact .grid-3 > .card span,
html[data-theme="blue"] body.page-contact .grid-3 > .card h3,
html[data-theme="blue"] body.page-contact .grid-3 > .card p,
html[data-theme="blue"] body.page-contact .grid-3 > .card span,
html[data-theme="dark"] body.page-contact .grid-3 > .card h3,
html[data-theme="dark"] body.page-contact .grid-3 > .card p,
html[data-theme="dark"] body.page-contact .grid-3 > .card span{
  color:inherit !important;
}

/* Contact form/input outline: checkout-style, visible but not thick. */
body.page-contact input:not([type="hidden"]),
body.page-contact textarea,
body.page-course-details input,
body.page-course-details select,
body.page-course-details textarea{
  border:1px solid rgba(148,163,184,.55) !important;
  border-radius:14px !important;
  box-shadow:0 8px 22px rgba(2,6,23,.08) !important;
  outline:none !important;
}
body.page-contact input:not([type="hidden"]):focus,
body.page-contact textarea:focus,
body.page-course-details input:focus,
body.page-course-details select:focus,
body.page-course-details textarea:focus{
  border-color:#38bdf8 !important;
  box-shadow:0 10px 24px rgba(2,6,23,.10), 0 0 0 3px rgba(56,189,248,.20) !important;
}
body.page-contact .copy-pill{
  border:1px solid rgba(148,163,184,.55) !important;
  border-radius:14px !important;
  box-shadow:0 8px 22px rgba(2,6,23,.08) !important;
}

/* Response time should be a clean text line, not another box crowding the submit row. */
body.page-contact .response-badge{
  display:block !important;
  margin:10px 0 0 0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#166534 !important;
  -webkit-text-fill-color:#166534 !important;
  font-weight:900 !important;
  line-height:1.35 !important;
}
html[data-theme="blue"] body.page-contact .response-badge,
html[data-theme="dark"] body.page-contact .response-badge{
  color:#86efac !important;
  -webkit-text-fill-color:#86efac !important;
}

/* Course details: keep secondary CTA and price badge in yellow/orange so they stand out like before. */
body.page-course-details .ddtd-btn-secondary,
body.page-course-details .ddtd-badge,
html[data-theme="blue"] body.page-course-details .ddtd-btn-secondary,
html[data-theme="dark"] body.page-course-details .ddtd-btn-secondary,
html[data-theme="blue"] body.page-course-details .ddtd-badge,
html[data-theme="dark"] body.page-course-details .ddtd-badge,
html[data-theme="slate"] body.page-course-details .ddtd-btn-secondary,
html[data-theme="slate"] body.page-course-details .ddtd-badge{
  background:#fffbeb !important;
  border:2px solid #f59e0b !important;
  color:#7c2d12 !important;
  -webkit-text-fill-color:#7c2d12 !important;
  box-shadow:0 12px 26px rgba(245,158,11,.22) !important;
}
body.page-course-details .ddtd-badge strong,
body.page-course-details .ddtd-badge small,
html[data-theme="blue"] body.page-course-details .ddtd-badge strong,
html[data-theme="blue"] body.page-course-details .ddtd-badge small,
html[data-theme="dark"] body.page-course-details .ddtd-badge strong,
html[data-theme="dark"] body.page-course-details .ddtd-badge small{
  color:#7c2d12 !important;
  -webkit-text-fill-color:#7c2d12 !important;
}

/* Eyebrows/kickers should be compact pills, not full-width bars. */
body.page-course-details .cd-paths-eyebrow,
body.page-course-details .cd-calc-eyebrow,
body.faq-page .kicker,
body.page-home:not(.faq-page) .paths-eyebrow,
body.page-home:not(.faq-page) .inscalc-eyebrow,
body.page-home:not(.faq-page) .trust-status .kicker{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:max-content !important;
  max-width:100% !important;
  padding:7px 12px !important;
  border-radius:999px !important;
  line-height:1.1 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  background:#e0f2fe !important;
  border:2px solid #38bdf8 !important;
  color:#075985 !important;
  -webkit-text-fill-color:#075985 !important;
  box-shadow:0 10px 22px rgba(14,165,233,.16) !important;
}
body.page-course-details .cd-calc-eyebrow,
body.page-home:not(.faq-page) .inscalc-eyebrow{
  background:#dcfce7 !important;
  border-color:#22c55e !important;
  color:#14532d !important;
  -webkit-text-fill-color:#14532d !important;
  box-shadow:0 10px 22px rgba(34,197,94,.18) !important;
}
html[data-theme="blue"] body.page-course-details .cd-paths-eyebrow,
html[data-theme="blue"] body.page-course-details .cd-calc-eyebrow,
html[data-theme="blue"] body.faq-page .kicker,
html[data-theme="blue"] body.page-home:not(.faq-page) .paths-eyebrow,
html[data-theme="blue"] body.page-home:not(.faq-page) .inscalc-eyebrow,
html[data-theme="blue"] body.page-home:not(.faq-page) .trust-status .kicker,
html[data-theme="dark"] body.page-course-details .cd-paths-eyebrow,
html[data-theme="dark"] body.page-course-details .cd-calc-eyebrow,
html[data-theme="dark"] body.faq-page .kicker,
html[data-theme="dark"] body.page-home:not(.faq-page) .paths-eyebrow,
html[data-theme="dark"] body.page-home:not(.faq-page) .inscalc-eyebrow,
html[data-theme="dark"] body.page-home:not(.faq-page) .trust-status .kicker{
  background:#e0f2fe !important;
  border-color:#38bdf8 !important;
  color:#075985 !important;
  -webkit-text-fill-color:#075985 !important;
}
html[data-theme="blue"] body.page-course-details .cd-calc-eyebrow,
html[data-theme="blue"] body.page-home:not(.faq-page) .inscalc-eyebrow,
html[data-theme="dark"] body.page-course-details .cd-calc-eyebrow,
html[data-theme="dark"] body.page-home:not(.faq-page) .inscalc-eyebrow{
  background:#dcfce7 !important;
  border-color:#22c55e !important;
  color:#14532d !important;
  -webkit-text-fill-color:#14532d !important;
}

/* Course details insurance calculator buttons: strong contrast in blue/dark modes. */
body.page-course-details .cd-mini-links{
  gap:10px !important;
  flex-wrap:wrap !important;
}
body.page-course-details .cd-mini-btn,
html[data-theme="blue"] body.page-course-details .cd-mini-btn,
html[data-theme="dark"] body.page-course-details .cd-mini-btn{
  background:#e0f2fe !important;
  border:2px solid #38bdf8 !important;
  color:#075985 !important;
  -webkit-text-fill-color:#075985 !important;
  box-shadow:0 10px 22px rgba(14,165,233,.16) !important;
}
body.page-course-details .cd-mini-btn.primary,
html[data-theme="blue"] body.page-course-details .cd-mini-btn.primary,
html[data-theme="dark"] body.page-course-details .cd-mini-btn.primary{
  background:#f9413d !important;
  border-color:#f9413d !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  box-shadow:0 14px 30px rgba(249,65,61,.28) !important;
}

/* FAQ video play button: keep the triangle visible on the white circle. */
body.faq-page .faq-video-btn .play,
html[data-theme="blue"] body.faq-page .faq-video-btn .play,
html[data-theme="dark"] body.faq-page .faq-video-btn .play{
  background:#ffffff !important;
  color:#1E88E5 !important;
  -webkit-text-fill-color:#1E88E5 !important;
  box-shadow:0 0 0 1px rgba(30,136,229,.12) inset !important;
}
body.faq-page .faq-video-btn,
html[data-theme="blue"] body.faq-page .faq-video-btn,
html[data-theme="dark"] body.faq-page .faq-video-btn{
  background:#1E88E5 !important;
  border-color:#38bdf8 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* FAQ Popular Course Path cards: no text/button collision. */
body.faq-page .faq-path-link{
  min-height:170px !important;
  padding:16px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  border:2px solid rgba(14,165,233,.30) !important;
  border-left:6px solid #1E88E5 !important;
  background:#ffffff !important;
  box-shadow:0 10px 24px rgba(2,6,23,.08) !important;
}
body.faq-page .faq-path-link:before{
  content:none !important;
  display:none !important;
}
body.faq-page .faq-path-link span:not(.faq-path-icon):not(.faq-path-button){
  margin-bottom:14px !important;
  color:#334155 !important;
}
body.faq-page .faq-path-button{
  position:static !important;
  left:auto !important;
  bottom:auto !important;
  margin-top:auto !important;
  align-self:flex-start !important;
  min-height:30px !important;
  padding:7px 12px !important;
  background:#e0f2fe !important;
  border:2px solid #38bdf8 !important;
  color:#075985 !important;
  -webkit-text-fill-color:#075985 !important;
  box-shadow:0 8px 18px rgba(14,165,233,.14) !important;
}
html[data-theme="blue"] body.faq-page .faq-path-link,
html[data-theme="dark"] body.faq-page .faq-path-link{
  background:#0b2a3f !important;
  border-color:#38bdf8 !important;
  border-left-color:#38bdf8 !important;
  box-shadow:0 12px 28px rgba(0,0,0,.30) !important;
}
html[data-theme="blue"] body.faq-page .faq-path-link strong,
html[data-theme="dark"] body.faq-page .faq-path-link strong{
  color:#ffffff !important;
}
html[data-theme="blue"] body.faq-page .faq-path-link span:not(.faq-path-icon):not(.faq-path-button),
html[data-theme="dark"] body.faq-page .faq-path-link span:not(.faq-path-icon):not(.faq-path-button){
  color:rgba(248,250,252,.86) !important;
}
html[data-theme="blue"] body.faq-page .faq-path-button,
html[data-theme="dark"] body.faq-page .faq-path-button{
  background:#e0f2fe !important;
  border-color:#38bdf8 !important;
  color:#075985 !important;
  -webkit-text-fill-color:#075985 !important;
}
body.faq-page .faq-path-link:nth-child(2),
body.faq-page .faq-path-link:nth-child(4){
  border-left-color:#22c55e !important;
}
body.faq-page .faq-path-link:nth-child(3),
body.faq-page .faq-path-link:nth-child(5){
  border-left-color:#f59e0b !important;
}

/* Home calculator eyebrow: make it visible in blue/dark; it was blending into the card. */
body.page-home:not(.faq-page) .inscalc-eyebrow{
  margin-bottom:10px !important;
}

@media (max-width:720px){
  body.page-contact .grid-3 > .card{
    min-height:auto !important;
  }
  body.page-contact main > section.card::before,
  body.page-course-details .ddtd-hero-card::before,
  body.page-course-details .ddtd-box::before,
  body.page-course-details .cd-card::before,
  body.page-course-details .cd-paths-panel::before,
  body.faq-page .faq-hero::before,
  body.faq-page .faq-card::before,
  body.page-home:not(.faq-page) .trust-status .trust-card::before,
  body.page-home:not(.faq-page) .sixboxes .feature-card::before,
  body.page-home:not(.faq-page) .course-paths-card::before,
  body.page-home:not(.faq-page) .inscalc-inner::before{
    left:16px !important;
    right:16px !important;
  }
}

/* v28.1 high-specificity safeguards for later in-page styles. */
body.page-course-details main.ddtd-page > section.cd-section.cd-panelized .cd-calc-eyebrow,
body.page-course-details main.ddtd-page > section.cd-section#insurance-discount.cd-panelized .cd-calc-eyebrow,
body.page-course-details main.ddtd-page > section.cd-section.cd-paths-section .cd-paths-panel .cd-paths-eyebrow{
  display:inline-flex !important;
  align-items:center !important;
  width:max-content !important;
  max-width:100% !important;
  padding:7px 12px !important;
  border-radius:999px !important;
  border:2px solid #38bdf8 !important;
  background:#e0f2fe !important;
  color:#075985 !important;
  -webkit-text-fill-color:#075985 !important;
  box-shadow:0 10px 22px rgba(14,165,233,.16) !important;
}
body.page-course-details main.ddtd-page > section.cd-section#insurance-discount.cd-panelized .cd-calc-eyebrow{
  background:#dcfce7 !important;
  border-color:#22c55e !important;
  color:#14532d !important;
  -webkit-text-fill-color:#14532d !important;
  box-shadow:0 10px 22px rgba(34,197,94,.18) !important;
}
html[data-theme="blue"] body.page-course-details main.ddtd-page > section.cd-section#insurance-discount.cd-panelized .cd-result .cd-mini-btn,
html[data-theme="dark"] body.page-course-details main.ddtd-page > section.cd-section#insurance-discount.cd-panelized .cd-result .cd-mini-btn,
html[data-theme="blue"] body.page-course-details main.ddtd-page > section.cd-section#insurance-discount.cd-panelized .cd-mini-links .cd-mini-btn,
html[data-theme="dark"] body.page-course-details main.ddtd-page > section.cd-section#insurance-discount.cd-panelized .cd-mini-links .cd-mini-btn{
  background:#e0f2fe !important;
  border:2px solid #38bdf8 !important;
  color:#075985 !important;
  -webkit-text-fill-color:#075985 !important;
  box-shadow:0 10px 22px rgba(14,165,233,.16) !important;
}
html[data-theme="blue"] body.page-course-details main.ddtd-page > section.cd-section#insurance-discount.cd-panelized .cd-result .cd-mini-btn.primary,
html[data-theme="dark"] body.page-course-details main.ddtd-page > section.cd-section#insurance-discount.cd-panelized .cd-result .cd-mini-btn.primary,
html[data-theme="blue"] body.page-course-details main.ddtd-page > section.cd-section#insurance-discount.cd-panelized .cd-mini-links .cd-mini-btn.primary,
html[data-theme="dark"] body.page-course-details main.ddtd-page > section.cd-section#insurance-discount.cd-panelized .cd-mini-links .cd-mini-btn.primary{
  background:#f9413d !important;
  border-color:#f9413d !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  box-shadow:0 14px 30px rgba(249,65,61,.28) !important;
}

html[data-theme="blue"] body.faq-page main.faq-shell .faq-hero,
html[data-theme="blue"] body.faq-page main.faq-shell .faq-card,
html[data-theme="blue"] body.faq-page main.faq-shell .faq-help,
html[data-theme="dark"] body.faq-page main.faq-shell .faq-hero,
html[data-theme="dark"] body.faq-page main.faq-shell .faq-card,
html[data-theme="dark"] body.faq-page main.faq-shell .faq-help{
  background:var(--dd-v281-main-surface-blue) !important;
  border-color:rgba(255,255,255,.13) !important;
  box-shadow:0 28px 80px rgba(0,0,0,.44) !important;
}
html[data-theme="dark"] body.faq-page main.faq-shell .faq-hero,
html[data-theme="dark"] body.faq-page main.faq-shell .faq-card,
html[data-theme="dark"] body.faq-page main.faq-shell .faq-help{
  background:var(--dd-v281-main-surface-dark) !important;
}
body.faq-page main.faq-shell .faq-card-header .kicker,
html[data-theme="blue"] body.faq-page main.faq-shell .faq-card-header .kicker,
html[data-theme="dark"] body.faq-page main.faq-shell .faq-card-header .kicker{
  display:inline-flex !important;
  width:max-content !important;
  max-width:100% !important;
  border-radius:999px !important;
  padding:7px 12px !important;
  background:#e0f2fe !important;
  border:2px solid #38bdf8 !important;
  color:#075985 !important;
  -webkit-text-fill-color:#075985 !important;
  box-shadow:0 10px 22px rgba(14,165,233,.16) !important;
}
body.faq-page main.faq-shell .faq-paths-card .faq-path-grid .faq-path-link{
  min-height:170px !important;
  padding:16px !important;
  display:flex !important;
  flex-direction:column !important;
  border:2px solid rgba(14,165,233,.30) !important;
  border-left:6px solid #1E88E5 !important;
  background:#ffffff !important;
  box-shadow:0 10px 24px rgba(2,6,23,.08) !important;
}
body.faq-page main.faq-shell .faq-paths-card .faq-path-grid .faq-path-link::before{
  content:none !important;
  display:none !important;
}
html[data-theme="blue"] body.faq-page main.faq-shell .faq-paths-card .faq-path-grid .faq-path-link,
html[data-theme="dark"] body.faq-page main.faq-shell .faq-paths-card .faq-path-grid .faq-path-link{
  background:#0b2a3f !important;
  border-color:#38bdf8 !important;
  border-left-color:#38bdf8 !important;
  box-shadow:0 12px 28px rgba(0,0,0,.30) !important;
}
body.faq-page main.faq-shell .faq-paths-card .faq-path-grid .faq-path-button,
html[data-theme="blue"] body.faq-page main.faq-shell .faq-paths-card .faq-path-grid .faq-path-button,
html[data-theme="dark"] body.faq-page main.faq-shell .faq-paths-card .faq-path-grid .faq-path-button{
  position:static !important;
  left:auto !important;
  bottom:auto !important;
  margin-top:auto !important;
  align-self:flex-start !important;
  background:#e0f2fe !important;
  border:2px solid #38bdf8 !important;
  color:#075985 !important;
  -webkit-text-fill-color:#075985 !important;
}

/* ==========================================================
   v28.2 — Contact page compact-button + alignment refinements
   Scope: EN/ES contact pages only. Checkout untouched.
========================================================== */
body.page-contact .grid-3{
  align-items:stretch !important;
  grid-auto-rows:1fr !important;
}
body.page-contact .grid-3 > .card{
  margin:0 !important;
  padding:16px !important;
  min-height:150px !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
}
body.page-contact .grid-3 > .card h3{
  margin:0 0 8px 0 !important;
  line-height:1.2 !important;
}
body.page-contact .grid-3 > .card p{
  margin:0 !important;
  line-height:1.45 !important;
}
body.page-contact .grid-3 > .card .copy-row{
  margin:6px 0 0 0 !important;
  align-items:flex-start !important;
}
body.page-contact .grid-3 > .card .copy-row + p{
  margin-top:10px !important;
}

/* Keep contact helper buttons clearly clickable without looking oversized. */
body.page-contact .contact-link,
html[data-theme="blue"] body.page-contact .contact-link,
html[data-theme="dark"] body.page-contact .contact-link,
body.page-contact .btn-pill.contact-copy-btn,
body.page-contact button.btn-pill.contact-copy-btn,
body.page-contact .copy-row button.btn-pill,
html[data-theme="blue"] body.page-contact .btn-pill.contact-copy-btn,
html[data-theme="blue"] body.page-contact button.btn-pill.contact-copy-btn,
html[data-theme="dark"] body.page-contact .btn-pill.contact-copy-btn,
html[data-theme="dark"] body.page-contact button.btn-pill.contact-copy-btn{
  min-height:30px !important;
  height:auto !important;
  padding:6px 11px !important;
  border-radius:999px !important;
  border-width:1.5px !important;
  font-size:.9rem !important;
  line-height:1.05 !important;
  box-shadow:0 8px 18px rgba(14,165,233,.16) !important;
}
body.page-contact .copy-row .btn-pill.contact-copy-btn,
body.page-contact .copy-row button.btn-pill{
  padding-left:13px !important;
  padding-right:13px !important;
}

/* Response time should remain simple text, including blue/dark modes. */
body.page-contact div.response-badge,
html[data-theme="light"] body.page-contact div.response-badge,
html:not([data-theme]) body.page-contact div.response-badge,
html[data-theme="slate"] body.page-contact div.response-badge,
html[data-theme="blue"] body.page-contact div.response-badge,
html[data-theme="dark"] body.page-contact div.response-badge{
  display:block !important;
  width:auto !important;
  min-height:0 !important;
  margin:10px 0 0 0 !important;
  padding:0 !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  color:#166534 !important;
  -webkit-text-fill-color:#166534 !important;
  font-weight:900 !important;
  line-height:1.35 !important;
}
html[data-theme="blue"] body.page-contact div.response-badge,
html[data-theme="dark"] body.page-contact div.response-badge{
  color:#86efac !important;
  -webkit-text-fill-color:#86efac !important;
}

@media (max-width:720px){
  body.page-contact .grid-3{
    grid-template-columns:1fr !important;
    grid-auto-rows:auto !important;
    gap:12px !important;
  }
  body.page-contact .grid-3 > .card{
    min-height:0 !important;
    padding:15px !important;
  }
}
@media (max-width:520px){
  body.page-contact .contact-link,
  html[data-theme="blue"] body.page-contact .contact-link,
  html[data-theme="dark"] body.page-contact .contact-link,
  body.page-contact .btn-pill.contact-copy-btn,
  body.page-contact button.btn-pill.contact-copy-btn,
  body.page-contact .copy-row button.btn-pill,
  html[data-theme="blue"] body.page-contact .btn-pill.contact-copy-btn,
  html[data-theme="blue"] body.page-contact button.btn-pill.contact-copy-btn,
  html[data-theme="dark"] body.page-contact .btn-pill.contact-copy-btn,
  html[data-theme="dark"] body.page-contact button.btn-pill.contact-copy-btn{
    min-height:28px !important;
    padding:5px 9px !important;
    border-width:1px !important;
    font-size:.82rem !important;
    line-height:1.05 !important;
  }
  body.page-contact .contact-form .fine{
    display:block !important;
    line-height:1.35 !important;
  }
  body.page-contact .contact-form .fine .contact-link{
    margin-left:2px !important;
    vertical-align:baseline !important;
  }
}



/* v28.32 — Approved sitemap responsive gutter system port
   Copies the approved sitemap left/right body gutter behavior to the refreshed
   Details, FAQ, and Insurance Discount Calculator pages. Checkout is untouched. */
body.page-details > main.container,
body.faq-page main.container.faq-shell,
body.page-insurance-calc main > section.cd-section{
  box-sizing:border-box !important;
}

body.page-details > main.container,
body.faq-page main.container.faq-shell{
  padding-left:8px !important;
  padding-right:8px !important;
}

body.page-insurance-calc main > section.cd-section{
  padding-left:8px !important;
  padding-right:8px !important;
}

@media (max-width:720px){
  body.page-details > main.container,
  body.faq-page main.container.faq-shell,
  body.page-insurance-calc main > section.cd-section{
    padding-left:6px !important;
    padding-right:6px !important;
  }
}

@media (max-width:560px){
  body.page-details > main.container,
  body.faq-page main.container.faq-shell,
  body.page-insurance-calc main > section.cd-section{
    padding-left:3px !important;
    padding-right:3px !important;
  }
}

@media (max-width:420px){
  body.page-details > main.container,
  body.faq-page main.container.faq-shell,
  body.page-insurance-calc main > section.cd-section{
    padding-left:2px !important;
    padding-right:2px !important;
  }

  body.page-details .details-hero{padding-left:10px !important; padding-right:10px !important;}
  body.page-details main > section.card:not(.details-hero){padding-left:10px !important; padding-right:10px !important;}
  body.faq-page .faq-hero{padding-left:10px !important; padding-right:10px !important;}
  body.faq-page .faq-card-header,
  body.faq-page .faq-start-panel{padding-left:10px !important; padding-right:10px !important;}
  body.page-insurance-calc .inscalc-section-box{padding-left:10px !important; padding-right:10px !important;}
}

/* v28.33 — Approved sitemap responsive gutter system port for legal/support pages */
body.page-accessibility main.container,
body.page-privacy main.container,
body.page-terms main.container.terms-main,
body.page-terms .terms-main,
body.page-privacy-request-v3 main.pr-main{
  box-sizing:border-box !important;
}

body.page-accessibility main.container,
body.page-privacy main.container,
body.page-terms main.container.terms-main,
body.page-terms .terms-main{
  width:100% !important;
  max-width:1100px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:8px !important;
  padding-right:8px !important;
}

body.page-privacy-request-v3 main.pr-main{
  width:100% !important;
  max-width:1120px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:8px !important;
  padding-right:8px !important;
}

@media (max-width:720px){
  body.page-accessibility main.container,
  body.page-privacy main.container,
  body.page-terms main.container.terms-main,
  body.page-terms .terms-main,
  body.page-privacy-request-v3 main.pr-main{
    padding-left:6px !important;
    padding-right:6px !important;
  }
}

@media (max-width:560px){
  body.page-accessibility main.container,
  body.page-privacy main.container,
  body.page-terms main.container.terms-main,
  body.page-terms .terms-main,
  body.page-privacy-request-v3 main.pr-main{
    padding-left:3px !important;
    padding-right:3px !important;
  }
}

@media (max-width:420px){
  body.page-accessibility main.container,
  body.page-privacy main.container,
  body.page-terms main.container.terms-main,
  body.page-terms .terms-main,
  body.page-privacy-request-v3 main.pr-main{
    padding-left:2px !important;
    padding-right:2px !important;
  }
}



/* v28.35 — Approved sitemap responsive gutter system port for home, contact, and course-details pages.
   Mirrors the approved sitemap behavior: 8px base, 6px under 720px,
   3px under 560px, and 2px under 420px. Checkout is intentionally untouched. */
body.page-home .hero-wrap > .container,
body.page-home .trust-status > .container,
body.page-home .sixboxes.container,
body.page-home .course-paths > .container,
body.page-home .inscalc-strip > .container,
body.page-contact main.container,
body.page-course-details .ddtd-hero > .container,
body.page-course-details .ddtd-section > .container{
  box-sizing:border-box !important;
}

body.page-home .hero-wrap > .container,
body.page-home .trust-status > .container,
body.page-home .sixboxes.container,
body.page-home .course-paths > .container,
body.page-home .inscalc-strip > .container{
  width:100% !important;
  max-width:1100px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:8px !important;
  padding-right:8px !important;
}

body.page-contact main.container{
  width:100% !important;
  max-width:1100px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:8px !important;
  padding-right:8px !important;
}

body.page-course-details .ddtd-hero > .container,
body.page-course-details .ddtd-section > .container{
  width:100% !important;
  max-width:1180px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:8px !important;
  padding-right:8px !important;
}

@media (max-width:720px){
  body.page-home .hero-wrap > .container,
  body.page-home .trust-status > .container,
  body.page-home .sixboxes.container,
  body.page-home .course-paths > .container,
  body.page-home .inscalc-strip > .container,
  body.page-contact main.container,
  body.page-course-details .ddtd-hero > .container,
  body.page-course-details .ddtd-section > .container{
    padding-left:6px !important;
    padding-right:6px !important;
  }
}

@media (max-width:560px){
  body.page-home .hero-wrap > .container,
  body.page-home .trust-status > .container,
  body.page-home .sixboxes.container,
  body.page-home .course-paths > .container,
  body.page-home .inscalc-strip > .container,
  body.page-contact main.container,
  body.page-course-details .ddtd-hero > .container,
  body.page-course-details .ddtd-section > .container{
    padding-left:3px !important;
    padding-right:3px !important;
  }
}

@media (max-width:420px){
  body.page-home .hero-wrap > .container,
  body.page-home .trust-status > .container,
  body.page-home .sixboxes.container,
  body.page-home .course-paths > .container,
  body.page-home .inscalc-strip > .container,
  body.page-contact main.container,
  body.page-course-details .ddtd-hero > .container,
  body.page-course-details .ddtd-section > .container{
    padding-left:2px !important;
    padding-right:2px !important;
  }
}


/* ==========================================================
   v28.36 — Home insurance calculator visible-card gutter fix
   The insurance card is also the .container element, so padding alone
   creates internal spacing but no visible outside gutter. Match the
   approved sitemap gutter feel while aligning with other home cards.
========================================================== */
body.page-home:not(.faq-page) .inscalc-strip{
  box-sizing:border-box !important;
  width:100% !important;
  max-width:none !important;
  padding:18px 0 !important;
}
body.page-home:not(.faq-page) .inscalc-strip > .container.inscalc-inner{
  box-sizing:border-box !important;
  width:calc(100% - 16px) !important;
  max-width:1084px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding:18px !important;
}
@media (max-width:720px){
  body.page-home:not(.faq-page) .inscalc-strip > .container.inscalc-inner{
    width:calc(100% - 12px) !important;
  }
}
@media (max-width:560px){
  body.page-home:not(.faq-page) .inscalc-strip > .container.inscalc-inner{
    width:calc(100% - 6px) !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }
}
@media (max-width:420px){
  body.page-home:not(.faq-page) .inscalc-strip > .container.inscalc-inner{
    width:calc(100% - 4px) !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }
}


/* buyer-intent-course-details-style-v28-40 */
/* v28.40 buyer-intent landing page refresh: course-details card style without changing outer body background. */
body.ddtd-page,
body.ddtd-page main.ddtd-page{
  background:#ffffff!important;
  background-image:none!important;
}
html[data-theme="slate"] body.ddtd-page,
html[data-theme="slate"] body.ddtd-page main.ddtd-page{
  background:#f5f7fa!important;
  background-image:none!important;
}
html[data-theme="blue"] body.ddtd-page,
html[data-theme="blue"] body.ddtd-page main.ddtd-page{
  background:#021b33!important;
  background-image:none!important;
}
html[data-theme="dark"] body.ddtd-page,
html[data-theme="dark"] body.ddtd-page main.ddtd-page{
  background:#020617!important;
  background-image:none!important;
}
body.ddtd-page .ddtd-hero-card,
body.ddtd-page .ddtd-section .ddtd-grid > div > .ddtd-box:not(.ddtd-final),
body.ddtd-page .ddtd-section .ddtd-side > .ddtd-box{
  border:1px solid rgba(14,165,233,.28)!important;
  background:
    linear-gradient(90deg,#0ea5e9 0%,#14b8a6 48%,#22c55e 100%) top left/100% 4px no-repeat,
    radial-gradient(circle at 4% 0%,rgba(14,165,233,.16) 0%,rgba(14,165,233,0) 36%),
    radial-gradient(circle at 96% 4%,rgba(34,197,94,.16) 0%,rgba(34,197,94,0) 38%),
    linear-gradient(135deg,#ffffff 0%,#eefaff 52%,#effdf4 100%)!important;
  box-shadow:0 22px 58px rgba(15,23,42,.11),0 2px 10px rgba(14,165,233,.08)!important;
}
html[data-theme="slate"] body.ddtd-page .ddtd-hero-card,
html[data-theme="slate"] body.ddtd-page .ddtd-section .ddtd-grid > div > .ddtd-box:not(.ddtd-final),
html[data-theme="slate"] body.ddtd-page .ddtd-section .ddtd-side > .ddtd-box{
  border-color:rgba(14,165,233,.32)!important;
  background:
    linear-gradient(90deg,#0ea5e9 0%,#14b8a6 48%,#22c55e 100%) top left/100% 4px no-repeat,
    radial-gradient(circle at 5% 0%,rgba(14,165,233,.14) 0%,rgba(14,165,233,0) 36%),
    radial-gradient(circle at 95% 4%,rgba(34,197,94,.14) 0%,rgba(34,197,94,0) 38%),
    linear-gradient(135deg,#ffffff 0%,#f1f8ff 52%,#f0fbf4 100%)!important;
  box-shadow:0 22px 58px rgba(15,23,42,.12),0 2px 10px rgba(14,165,233,.08)!important;
}
html[data-theme="blue"] body.ddtd-page .ddtd-hero-card,
html[data-theme="blue"] body.ddtd-page .ddtd-section .ddtd-grid > div > .ddtd-box:not(.ddtd-final),
html[data-theme="blue"] body.ddtd-page .ddtd-section .ddtd-side > .ddtd-box{
  border-color:rgba(56,189,248,.42)!important;
  background:
    linear-gradient(90deg,#0ea5e9 0%,#14b8a6 48%,#22c55e 100%) top left/100% 4px no-repeat,
    radial-gradient(circle at 4% 0%,rgba(14,165,233,.24) 0%,rgba(14,165,233,0) 38%),
    radial-gradient(circle at 96% 4%,rgba(34,197,94,.22) 0%,rgba(34,197,94,0) 40%),
    linear-gradient(135deg,#06233b 0%,#061b31 48%,#062a23 100%)!important;
  box-shadow:0 22px 58px rgba(0,0,0,.36),0 2px 12px rgba(14,165,233,.12)!important;
}
html[data-theme="dark"] body.ddtd-page .ddtd-hero-card,
html[data-theme="dark"] body.ddtd-page .ddtd-section .ddtd-grid > div > .ddtd-box:not(.ddtd-final),
html[data-theme="dark"] body.ddtd-page .ddtd-section .ddtd-side > .ddtd-box{
  border-color:rgba(148,163,184,.26)!important;
  background:
    linear-gradient(90deg,#0ea5e9 0%,#14b8a6 48%,#22c55e 100%) top left/100% 4px no-repeat,
    radial-gradient(circle at 4% 0%,rgba(14,165,233,.16) 0%,rgba(14,165,233,0) 38%),
    radial-gradient(circle at 96% 4%,rgba(34,197,94,.16) 0%,rgba(34,197,94,0) 40%),
    linear-gradient(135deg,#0f172a 0%,#020617 58%,#07150f 100%)!important;
  box-shadow:0 22px 58px rgba(0,0,0,.44),0 2px 12px rgba(14,165,233,.10)!important;
}
/* Keep smaller panels inside cards clean so we do not stack gradient-on-gradient. */
body.ddtd-page .ddtd-step,
body.ddtd-page .ddtd-feature,
body.ddtd-page .ddtd-link-list a,
body.ddtd-page .ddtd-faq details,
body.ddtd-page .ddtd-stat,
body.ddtd-page .ddtd-alert{
  background:#ffffff!important;
  background-image:none!important;
  border-color:rgba(14,165,233,.18)!important;
}
html[data-theme="slate"] body.ddtd-page .ddtd-step,
html[data-theme="slate"] body.ddtd-page .ddtd-feature,
html[data-theme="slate"] body.ddtd-page .ddtd-link-list a,
html[data-theme="slate"] body.ddtd-page .ddtd-faq details,
html[data-theme="slate"] body.ddtd-page .ddtd-stat,
html[data-theme="slate"] body.ddtd-page .ddtd-alert{
  background:#ffffff!important;
  background-image:none!important;
  border-color:rgba(14,165,233,.20)!important;
}
html[data-theme="blue"] body.ddtd-page .ddtd-step,
html[data-theme="blue"] body.ddtd-page .ddtd-feature,
html[data-theme="blue"] body.ddtd-page .ddtd-link-list a,
html[data-theme="blue"] body.ddtd-page .ddtd-faq details,
html[data-theme="blue"] body.ddtd-page .ddtd-stat,
html[data-theme="blue"] body.ddtd-page .ddtd-alert{
  background:rgba(255,255,255,.075)!important;
  background-image:none!important;
  border-color:rgba(148,210,255,.18)!important;
}
html[data-theme="dark"] body.ddtd-page .ddtd-step,
html[data-theme="dark"] body.ddtd-page .ddtd-feature,
html[data-theme="dark"] body.ddtd-page .ddtd-link-list a,
html[data-theme="dark"] body.ddtd-page .ddtd-faq details,
html[data-theme="dark"] body.ddtd-page .ddtd-stat,
html[data-theme="dark"] body.ddtd-page .ddtd-alert{
  background:rgba(255,255,255,.065)!important;
  background-image:none!important;
  border-color:rgba(148,163,184,.18)!important;
}
body.ddtd-page .ddtd-mini-trust .ddtd-pill{
  background:linear-gradient(180deg,#f8fdff 0%,#eaf7ff 100%)!important;
  border:2px solid rgba(14,165,233,.58)!important;
  color:#07345a!important;
  box-shadow:0 10px 22px rgba(14,165,233,.10)!important;
}
body.ddtd-page .ddtd-mini-trust .ddtd-pill:nth-child(2){
  background:linear-gradient(180deg,#f8fff9 0%,#e9fbea 100%)!important;
  border-color:rgba(34,197,94,.58)!important;
  color:#064e3b!important;
}
body.ddtd-page .ddtd-mini-trust .ddtd-pill:nth-child(3){
  background:linear-gradient(180deg,#f8fdff 0%,#e8f7ff 100%)!important;
  border-color:rgba(14,165,233,.58)!important;
  color:#07345a!important;
}
html[data-theme="blue"] body.ddtd-page .ddtd-mini-trust .ddtd-pill,
html[data-theme="dark"] body.ddtd-page .ddtd-mini-trust .ddtd-pill{
  background:rgba(255,255,255,.085)!important;
  border-color:rgba(56,189,248,.42)!important;
  color:#f8fbff!important;
  box-shadow:0 10px 24px rgba(0,0,0,.22)!important;
}
html[data-theme="blue"] body.ddtd-page .ddtd-mini-trust .ddtd-pill:nth-child(2),
html[data-theme="dark"] body.ddtd-page .ddtd-mini-trust .ddtd-pill:nth-child(2){
  background:rgba(34,197,94,.105)!important;
  border-color:rgba(34,197,94,.46)!important;
  color:#f8fbff!important;
}
body.ddtd-page .ddtd-kicker{
  background:#e7f7ff!important;
  border:2px solid rgba(14,165,233,.38)!important;
  color:#07518f!important;
}
html[data-theme="blue"] body.ddtd-page .ddtd-kicker,
html[data-theme="dark"] body.ddtd-page .ddtd-kicker{
  background:rgba(255,255,255,.09)!important;
  border-color:rgba(56,189,248,.34)!important;
  color:#d9efff!important;
}


/* buyer-intent-course-details-polish-v28-41 */
/* Match Course Details trust-pill/guarantee treatments and keep nested panels clean. */
body.ddtd-page .ddtd-mini-trust{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:9px !important;
  align-items:stretch !important;
}
body.ddtd-page .ddtd-mini-trust .ddtd-pill{
  justify-content:center !important;
  text-align:center !important;
  white-space:normal !important;
  line-height:1.15 !important;
  min-width:0 !important;
  min-height:38px !important;
  padding:9px 8px !important;
  border-radius:999px !important;
  border:2px solid #38bdf8 !important;
  background:#e7f7ff !important;
  background-image:none !important;
  color:#075985 !important;
  -webkit-text-fill-color:#075985 !important;
  box-shadow:0 10px 22px rgba(14,165,233,.12) !important;
}
body.ddtd-page .ddtd-mini-trust .ddtd-pill:nth-child(2){
  border-color:#22c55e !important;
  background:#ecfdf5 !important;
  color:#065f46 !important;
  -webkit-text-fill-color:#065f46 !important;
  box-shadow:0 10px 22px rgba(34,197,94,.12) !important;
}
body.ddtd-page .ddtd-mini-trust .ddtd-pill:nth-child(3){
  border-color:#38bdf8 !important;
  background:#e7f7ff !important;
  color:#075985 !important;
  -webkit-text-fill-color:#075985 !important;
}
html[data-theme="slate"] body.ddtd-page .ddtd-mini-trust .ddtd-pill{
  background:#f0f9ff !important;
  border-color:#38bdf8 !important;
  color:#075985 !important;
  -webkit-text-fill-color:#075985 !important;
}
html[data-theme="slate"] body.ddtd-page .ddtd-mini-trust .ddtd-pill:nth-child(2){
  background:#ecfdf5 !important;
  border-color:#22c55e !important;
  color:#065f46 !important;
  -webkit-text-fill-color:#065f46 !important;
}
html[data-theme="blue"] body.ddtd-page .ddtd-mini-trust .ddtd-pill{
  background:rgba(14,165,233,.16) !important;
  border-color:rgba(125,211,252,.62) !important;
  color:#f8fbff !important;
  -webkit-text-fill-color:#f8fbff !important;
  box-shadow:0 10px 24px rgba(0,0,0,.22) !important;
}
html[data-theme="blue"] body.ddtd-page .ddtd-mini-trust .ddtd-pill:nth-child(2){
  background:rgba(34,197,94,.15) !important;
  border-color:rgba(74,222,128,.64) !important;
  color:#f8fbff !important;
  -webkit-text-fill-color:#f8fbff !important;
}
html[data-theme="dark"] body.ddtd-page .ddtd-mini-trust .ddtd-pill{
  background:rgba(255,255,255,.075) !important;
  border-color:rgba(125,211,252,.42) !important;
  color:#f8fbff !important;
  -webkit-text-fill-color:#f8fbff !important;
  box-shadow:0 10px 24px rgba(0,0,0,.28) !important;
}
html[data-theme="dark"] body.ddtd-page .ddtd-mini-trust .ddtd-pill:nth-child(2){
  background:rgba(34,197,94,.105) !important;
  border-color:rgba(74,222,128,.46) !important;
  color:#f8fbff !important;
  -webkit-text-fill-color:#f8fbff !important;
}

body.ddtd-page .ddtd-box .ddtd-steps .ddtd-step,
body.ddtd-page .ddtd-box .ddtd-faq details{
  background:#ffffff !important;
  background-image:none !important;
  border:1px solid rgba(14,165,233,.18) !important;
  box-shadow:none !important;
}
html[data-theme="slate"] body.ddtd-page .ddtd-box .ddtd-steps .ddtd-step,
html[data-theme="slate"] body.ddtd-page .ddtd-box .ddtd-faq details{
  background:#ffffff !important;
  background-image:none !important;
  border-color:rgba(14,165,233,.20) !important;
}
html[data-theme="blue"] body.ddtd-page .ddtd-box .ddtd-steps .ddtd-step,
html[data-theme="blue"] body.ddtd-page .ddtd-box .ddtd-faq details{
  background:rgba(255,255,255,.075) !important;
  background-image:none !important;
  border-color:rgba(148,210,255,.18) !important;
}
html[data-theme="dark"] body.ddtd-page .ddtd-box .ddtd-steps .ddtd-step,
html[data-theme="dark"] body.ddtd-page .ddtd-box .ddtd-faq details{
  background:rgba(255,255,255,.065) !important;
  background-image:none !important;
  border-color:rgba(148,163,184,.18) !important;
}

body.ddtd-page .ddtd-guarantee-link{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:max-content !important;
  max-width:100% !important;
  min-height:38px !important;
  margin:10px auto 2px !important;
  padding:9px 13px !important;
  border-radius:999px !important;
  border:2px solid #38bdf8 !important;
  background:#e0f2fe !important;
  background-image:none !important;
  color:#075985 !important;
  -webkit-text-fill-color:#075985 !important;
  font:inherit !important;
  font-size:13.5px !important;
  line-height:1.2 !important;
  font-weight:950 !important;
  text-align:center !important;
  text-decoration:none !important;
  text-underline-offset:0 !important;
  box-shadow:0 10px 22px rgba(14,165,233,.14) !important;
  cursor:pointer !important;
}
body.ddtd-page .ddtd-guarantee-link span{
  color:inherit !important;
  -webkit-text-fill-color:inherit !important;
  text-decoration:none !important;
}
html[data-theme="slate"] body.ddtd-page .ddtd-guarantee-link{
  background:#e0f2fe !important;
  border-color:#38bdf8 !important;
  color:#075985 !important;
  -webkit-text-fill-color:#075985 !important;
}
html[data-theme="blue"] body.ddtd-page .ddtd-guarantee-link,
html[data-theme="dark"] body.ddtd-page .ddtd-guarantee-link{
  background:#0b4f75 !important;
  border-color:#7dd3fc !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  box-shadow:0 12px 26px rgba(0,0,0,.30) !important;
}
body.ddtd-page .ddtd-guarantee-link:hover{
  transform:translateY(-1px) !important;
  filter:brightness(1.03) !important;
}
@media (max-width:720px){
  body.ddtd-page .ddtd-mini-trust{
    grid-template-columns:1fr !important;
  }
  body.ddtd-page .ddtd-mini-trust .ddtd-pill{
    font-size:13px !important;
  }
}


/* buyer-intent-course-details-color-balance-v28-42 */
/* Keep buyer-intent pages aligned with the approved Course Details look: softer card blend, clean nested panels, and matching trust pills. */
body.ddtd-page .ddtd-hero-card,
body.ddtd-page .ddtd-section .ddtd-grid > div > .ddtd-box:not(.ddtd-final),
body.ddtd-page .ddtd-section .ddtd-side > .ddtd-box{
  border-color:rgba(14,165,233,.28) !important;
  background:
    linear-gradient(90deg,#0ea5e9 0%,#14b8a6 50%,#22c55e 100%) top left/100% 4px no-repeat,
    radial-gradient(circle at 4% 0%,rgba(14,165,233,.12) 0%,rgba(14,165,233,0) 34%),
    radial-gradient(circle at 96% 4%,rgba(34,197,94,.07) 0%,rgba(34,197,94,0) 34%),
    linear-gradient(135deg,#ffffff 0%,#f5fbff 58%,#f3fbf6 100%) !important;
  box-shadow:0 22px 58px rgba(15,23,42,.11),0 2px 10px rgba(14,165,233,.08) !important;
}
html[data-theme="slate"] body.ddtd-page .ddtd-hero-card,
html[data-theme="slate"] body.ddtd-page .ddtd-section .ddtd-grid > div > .ddtd-box:not(.ddtd-final),
html[data-theme="slate"] body.ddtd-page .ddtd-section .ddtd-side > .ddtd-box{
  border-color:rgba(14,165,233,.30) !important;
  background:
    linear-gradient(90deg,#0ea5e9 0%,#14b8a6 50%,#22c55e 100%) top left/100% 4px no-repeat,
    radial-gradient(circle at 5% 0%,rgba(14,165,233,.11) 0%,rgba(14,165,233,0) 34%),
    radial-gradient(circle at 95% 4%,rgba(34,197,94,.06) 0%,rgba(34,197,94,0) 34%),
    linear-gradient(135deg,#ffffff 0%,#f5faff 58%,#f4fbf6 100%) !important;
}
html[data-theme="blue"] body.ddtd-page .ddtd-hero-card,
html[data-theme="blue"] body.ddtd-page .ddtd-section .ddtd-grid > div > .ddtd-box:not(.ddtd-final),
html[data-theme="blue"] body.ddtd-page .ddtd-section .ddtd-side > .ddtd-box{
  border-color:rgba(56,189,248,.36) !important;
  background:
    linear-gradient(90deg,#0ea5e9 0%,#14b8a6 50%,#22c55e 100%) top left/100% 4px no-repeat,
    radial-gradient(circle at 4% 0%,rgba(14,165,233,.16) 0%,rgba(14,165,233,0) 36%),
    radial-gradient(circle at 96% 4%,rgba(34,197,94,.08) 0%,rgba(34,197,94,0) 36%),
    linear-gradient(135deg,#082742 0%,#061b31 58%,#05201b 100%) !important;
  box-shadow:0 22px 58px rgba(0,0,0,.36),0 2px 12px rgba(14,165,233,.12) !important;
}
html[data-theme="dark"] body.ddtd-page .ddtd-hero-card,
html[data-theme="dark"] body.ddtd-page .ddtd-section .ddtd-grid > div > .ddtd-box:not(.ddtd-final),
html[data-theme="dark"] body.ddtd-page .ddtd-section .ddtd-side > .ddtd-box{
  border-color:rgba(148,163,184,.24) !important;
  background:
    linear-gradient(90deg,#0ea5e9 0%,#14b8a6 50%,#22c55e 100%) top left/100% 4px no-repeat,
    radial-gradient(circle at 4% 0%,rgba(14,165,233,.12) 0%,rgba(14,165,233,0) 36%),
    radial-gradient(circle at 96% 4%,rgba(34,197,94,.06) 0%,rgba(34,197,94,0) 36%),
    linear-gradient(135deg,#0f172a 0%,#020617 62%,#050d09 100%) !important;
  box-shadow:0 22px 58px rgba(0,0,0,.44),0 2px 12px rgba(14,165,233,.10) !important;
}

/* Match Course Details trust-pills in blue/dark: do not let the center pill turn into a dark green block. */
html[data-theme="blue"] body.ddtd-page .ddtd-mini-trust .ddtd-pill,
html[data-theme="blue"] body.ddtd-page .ddtd-mini-trust .ddtd-pill:nth-child(2),
html[data-theme="blue"] body.ddtd-page .ddtd-mini-trust .ddtd-pill:nth-child(3),
html[data-theme="dark"] body.ddtd-page .ddtd-mini-trust .ddtd-pill,
html[data-theme="dark"] body.ddtd-page .ddtd-mini-trust .ddtd-pill:nth-child(2),
html[data-theme="dark"] body.ddtd-page .ddtd-mini-trust .ddtd-pill:nth-child(3){
  background:rgba(255,255,255,.08) !important;
  background-image:none !important;
  border-color:rgba(255,255,255,.22) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  box-shadow:0 10px 24px rgba(0,0,0,.22) !important;
}
html[data-theme="dark"] body.ddtd-page .ddtd-mini-trust .ddtd-pill,
html[data-theme="dark"] body.ddtd-page .ddtd-mini-trust .ddtd-pill:nth-child(2),
html[data-theme="dark"] body.ddtd-page .ddtd-mini-trust .ddtd-pill:nth-child(3){
  background:rgba(255,255,255,.075) !important;
  border-color:rgba(255,255,255,.20) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.28) !important;
}

/* Clean stacked/internal panels so they do not inherit the blue/green body-card blend. */
body.ddtd-page .ddtd-box .ddtd-steps .ddtd-step,
body.ddtd-page .ddtd-box .ddtd-faq details,
body.ddtd-page .ddtd-box .ddtd-feature,
body.ddtd-page .ddtd-box .ddtd-link-list a,
body.ddtd-page .ddtd-box .ddtd-stat{
  background:#ffffff !important;
  background-image:none !important;
  border-color:rgba(14,165,233,.18) !important;
  box-shadow:none !important;
}
html[data-theme="slate"] body.ddtd-page .ddtd-box .ddtd-steps .ddtd-step,
html[data-theme="slate"] body.ddtd-page .ddtd-box .ddtd-faq details,
html[data-theme="slate"] body.ddtd-page .ddtd-box .ddtd-feature,
html[data-theme="slate"] body.ddtd-page .ddtd-box .ddtd-link-list a,
html[data-theme="slate"] body.ddtd-page .ddtd-box .ddtd-stat{
  background:#ffffff !important;
  background-image:none !important;
  border-color:rgba(14,165,233,.20) !important;
}
html[data-theme="blue"] body.ddtd-page .ddtd-box .ddtd-steps .ddtd-step,
html[data-theme="blue"] body.ddtd-page .ddtd-box .ddtd-faq details,
html[data-theme="blue"] body.ddtd-page .ddtd-box .ddtd-feature,
html[data-theme="blue"] body.ddtd-page .ddtd-box .ddtd-link-list a,
html[data-theme="blue"] body.ddtd-page .ddtd-box .ddtd-stat{
  background:rgba(255,255,255,.075) !important;
  background-image:none !important;
  border-color:rgba(148,210,255,.18) !important;
}
html[data-theme="dark"] body.ddtd-page .ddtd-box .ddtd-steps .ddtd-step,
html[data-theme="dark"] body.ddtd-page .ddtd-box .ddtd-faq details,
html[data-theme="dark"] body.ddtd-page .ddtd-box .ddtd-feature,
html[data-theme="dark"] body.ddtd-page .ddtd-box .ddtd-link-list a,
html[data-theme="dark"] body.ddtd-page .ddtd-box .ddtd-stat{
  background:rgba(255,255,255,.065) !important;
  background-image:none !important;
  border-color:rgba(148,163,184,.18) !important;
}


/* buyer-intent-course-details-v28-43-pill-color-and-kicker-icon-fix */
/* Exact Course Details blue/dark pill color copied to buyer-intent hero trust pills. */
html[data-theme="blue"] body.ddtd-page .ddtd-mini-trust .ddtd-pill,
html[data-theme="blue"] body.ddtd-page .ddtd-mini-trust .ddtd-pill:nth-child(2),
html[data-theme="blue"] body.ddtd-page .ddtd-mini-trust .ddtd-pill:nth-child(3),
html[data-theme="dark"] body.ddtd-page .ddtd-mini-trust .ddtd-pill,
html[data-theme="dark"] body.ddtd-page .ddtd-mini-trust .ddtd-pill:nth-child(2),
html[data-theme="dark"] body.ddtd-page .ddtd-mini-trust .ddtd-pill:nth-child(3){
  background:#0b4f75 !important;
  background-image:none !important;
  border-color:#7dd3fc !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  box-shadow:0 12px 26px rgba(0,0,0,.30) !important;
}
html[data-theme="blue"] body.ddtd-page .ddtd-mini-trust .ddtd-pill::before,
html[data-theme="blue"] body.ddtd-page .ddtd-mini-trust .ddtd-pill:nth-child(2)::before,
html[data-theme="blue"] body.ddtd-page .ddtd-mini-trust .ddtd-pill:nth-child(3)::before,
html[data-theme="dark"] body.ddtd-page .ddtd-mini-trust .ddtd-pill::before,
html[data-theme="dark"] body.ddtd-page .ddtd-mini-trust .ddtd-pill:nth-child(2)::before,
html[data-theme="dark"] body.ddtd-page .ddtd-mini-trust .ddtd-pill:nth-child(3)::before{
  color:#7dd3fc !important;
  -webkit-text-fill-color:#7dd3fc !important;
}
/* Center the white checkmark inside the green circle in Start Online Today pills. */
body.ddtd-page .ddtd-start-box .ddtd-kicker::before,
body.page-course-details .ddtd-start-box .ddtd-kicker::before{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  line-height:1 !important;
  padding:0 0 2px 0 !important;
  box-sizing:border-box !important;
  font-family:Arial, Helvetica, sans-serif !important;
  font-size:14px !important;
  font-weight:900 !important;
  text-align:center !important;
  border-radius:50% !important;
}