/* ===== AspenMD reskin overrides (applied on top of DirectMeds markup) ===== */
:root{
  --a-teal:#0A556C; --a-teal-deep:#043136; --a-teal-mid:#1E6D83;
  --a-sage:#83B196; --a-mist:#E6F0F4;
}

/* --- brand gradients: peach/lavender -> airy teal --- */
.from-yellow-200,.from-yellow-100{
  --tw-gradient-from:#E9F1EC var(--tw-gradient-from-position) !important;
  --tw-gradient-to:rgb(233 241 236 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important;
}
.to-purple-300,.to-purple-100{
  --tw-gradient-to:#C3DDE0 var(--tw-gradient-to-position) !important;
}

/* --- buttons: black -> teal, hover -> deep teal --- */
.bg-black{background-color:var(--a-teal) !important;}
.hover\:bg-blue-500:hover{background-color:var(--a-teal-deep) !important;}
.hover\:bg-gray-800:hover{background-color:var(--a-teal-deep) !important;}

/* --- blue accents -> teal --- */
.bg-blue-500{background-color:var(--a-teal) !important;}
.text-blue-500{color:var(--a-teal-mid) !important;}
.bg-blue-50{background-color:var(--a-mist) !important;}
.border-blue-500{border-color:var(--a-teal) !important;}
.ring-blue-500{--tw-ring-color:var(--a-teal) !important;}

/* --- calculator range slider (#51B3FA) -> teal --- */
.sema-info .sema-info-slider .slider{background:var(--a-teal-mid) !important;}

/* --- calculator "you could lose" tag + any yellow/purple pill gradients handled above --- */

/* --- keep the AspenMD wordmark crisp in nav/footer --- */
img[src$="logo.png"]{max-width:150px;height:auto;}

/* --- hero: kill the giant line-height gap between headline and subhead --- */
h1 br{display:none;}
h1 span[style]{display:block; margin-top:12px; line-height:1.4; font-weight:300;}

/* --- before/after comparison slider: make handle grabbable --- */
.custom-image-slider{cursor:ew-resize;}
.slider-handle{z-index:11;}

/* ===== additions: patterns adapted from competitor teardown =====
   Hand-written because css/tw.css is a precompiled Tailwind build with no
   toolchain here: lg:sticky, perspective and rotate-y are NOT compiled in,
   so those utilities silently no-op. Do not swap these for classes. */

/* --- sticky claim column: claim pins while proof scrolls past it --- */
@media (min-width:1024px){
  .a-sticky{position:sticky; top:6rem; align-self:start;}
}

/* --- full-bleed breakout: let a row escape its padded container --- */
.a-bleed{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* --- faded edges: the affordance that says "there is more, keep scrolling" --- */
.a-fade-edges{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);
}
@media (max-width:767px){
  .a-fade-edges{
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 3%,#000 92%,transparent 100%);
            mask-image:linear-gradient(to right,transparent 0,#000 3%,#000 92%,transparent 100%);
  }
}

/* --- aggregate stat band --- */
.a-stat-num{
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' on,'zero' on;
  letter-spacing:-0.04em;
  line-height:1;
  color:var(--a-teal);
}