/* ==========================================================================
   CrysMed — Hero ALTERNATE (v2), for side-by-side comparison only.
   Height is locked to the current hero's measured height (394px) so the two
   can be judged on design alone. All classes are `halt-` prefixed so nothing
   here can affect the live hero.
   ========================================================================== */

:root { --halt-h: 394px; }

/* ==========================================================================
   Carousel shell — height locked to the original hero (394px)
   ========================================================================== */

.hcar {
  height: var(--halt-h);
  background: var(--surface);
  overflow: hidden;
}
.hcar > .container { height: 100%; padding-block: var(--sp-3); position: relative; }

.hcar__viewport { height: 100%; border-radius: 22px; overflow: hidden; }
.hcar__track {
  display: flex;
  height: 100%;
  transition: transform .55s cubic-bezier(.45, .05, .2, 1);
  will-change: transform;
}
.hcar__slide { flex: 0 0 100%; height: 100%; min-width: 0; }

/* Controls — arrows + dots grouped in the free band beneath the copy column.
   Centred arrows previously landed on the paragraph, and bottom-centred dots
   were covered by the search panel that overlaps upward from below. */
.hcar__controls {
  position: absolute;
  left: calc(var(--sp-6) * 2);          /* aligns with the copy's text edge */
  bottom: var(--sp-5);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.hcar__arrow {
  width: 30px; height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--brand-tint-strong);
  background: rgba(255,255,255,.9);
  color: var(--ink-900);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(150,95,45,.14);
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
  flex-shrink: 0;
}
.hcar__arrow svg { width: 15px; height: 15px; }
.hcar__arrow:hover { background: #fff; border-color: var(--brand-700); color: var(--brand-700); }

/* Dots */
.hcar__dots {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: var(--sp-2);
}
.hcar__dot {
  width: 7px; height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  transition: width .25s var(--ease), background-color .25s var(--ease);
}
.hcar__dot.is-active { width: 22px; border-radius: 4px; background: var(--white); }

/* The shared search card overlaps upward by -40px, which was tuned for the old
   flat hero. Against the carousel's rounded card it clipped the corners and
   covered the dots — so neutralise it here only. deals.html keeps its overlap. */
.hcar + .hero-search-zone .search-panel--card { margin-top: var(--sp-5); }

/* Inset rounded card — sky gradient, matching the "featured" banner-card
   treatment from the new design system (new-designs reference). */
.halt__card {
  height: 100%;
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  background: linear-gradient(120deg, var(--ref-sky-500) 0%, var(--ref-sky-300) 100%);
}

/* ---------- Left: copy ---------- */
.halt__copy {
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 3;
}
.halt__eyebrow {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}
.halt__headline {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.04;
  color: var(--white);
  margin: var(--sp-1) 0 var(--sp-1);
}
.halt__headline em { font-style: normal; color: var(--white); }
.halt__sub {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: rgba(255, 255, 255, .82);
  max-width: 40ch;
  margin-bottom: var(--sp-2);
}

.halt__cta { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.halt__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8125rem;
  font-weight: var(--fw-bold);
  padding: .625rem var(--sp-5);
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.halt__btn--solid { background: var(--white); color: var(--ref-teal-700); }
.halt__btn--solid:hover { background: var(--white); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(1,40,50,.22); }
.halt__btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.55); }
.halt__btn--ghost:hover { border-color: var(--white); background: rgba(255,255,255,.12); }

.halt__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}
.halt__trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .6875rem;
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, .82);
  white-space: nowrap;
}
.halt__trust svg { width: 14px; height: 14px; color: rgba(255, 255, 255, .82); flex-shrink: 0; }

/* ---------- Right: layered stage ---------- */
.halt__stage { position: relative; overflow: hidden; }

/* soft circular wash behind the product shot */
.halt__glow {
  position: absolute;
  top: 50%; left: 4%;
  width: 118%; aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 45%, rgba(64, 177, 234, .55) 0%, rgba(64, 177, 234, .22) 45%, rgba(64, 177, 234, 0) 72%);
}
/* Skyline plate — real asset. The shot is already bright, so it only needs a
   light cool wash and a radial mask so it dissolves before reaching the
   headline column instead of ending on a hard edge. */
.halt__skyline {
  position: absolute;
  inset: 0 0 0 2%;
  background-image: url("../img/hero-building.jpg");
  background-size: cover;
  background-position: 42% 42%;
  background-repeat: no-repeat;
  filter: saturate(.8) brightness(1.05);
  opacity: .58;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 44%, rgba(0,0,0,.4) 63%, transparent 79%);
  mask-image: radial-gradient(circle at 50% 50%, #000 44%, rgba(0,0,0,.4) 63%, transparent 79%);
}

/* Membership card, floating left of the phone */
.halt__memcard {
  position: absolute;
  z-index: 2;
  left: 2%;
  bottom: 10%;
  width: 172px;
  padding: 12px 13px 10px;
  border-radius: 12px;
  background: linear-gradient(140deg, #fffdfb 0%, #fdf3e8 100%);
  box-shadow: 0 14px 30px rgba(150,95,45,.22);
  overflow: hidden;
}
.halt__memcard-brand { display: flex; align-items: center; gap: 5px; }
.halt__memcard-brand svg { width: 13px; height: 13px; color: var(--brand-700); }
.halt__memcard-brand b { font-size: .8125rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink-900); }
.halt__memcard-brand b span { color: var(--brand-700); }
.halt__memcard-tag { display: block; font-size: .4375rem; color: var(--ink-500); margin: 1px 0 0 18px; letter-spacing: .02em; }
.halt__memcard-mark {
  position: absolute;
  right: 8px; bottom: 20px;
  width: 62px; height: 38px;
  color: var(--brand-500);
  opacity: .28;
}
.halt__memcard-level {
  display: block;
  margin-top: 22px;
  font-size: .5rem;
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-700);
}

/* Stethoscope prop — real asset, shot on white. `multiply` knocks the white
   ground out against the card's cream so it reads as a cut-out without
   needing a transparent PNG. Sits behind the phone, bleeding off the edge. */
.halt__steth {
  position: absolute;
  z-index: 4;
  right: -7%;
  bottom: -14%;
  width: 250px;
  aspect-ratio: 4 / 3;
  background-image: url("../img/hero-steth.jpg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  filter: contrast(1.04);
  pointer-events: none;
}

/* ---------- Phone: built at natural size, scaled to fit the locked height ---------- */
.halt__phone {
  --pw: 292px;             /* natural phone width  */
  --ph: 604px;             /* natural phone height */
  --pscale: .615;          /* scale so it reads large but fits 394px band */
  position: absolute;
  z-index: 3;
  right: 6%;
  top: 50%;
  width: var(--pw);
  height: var(--ph);
  transform: translateY(-50%) scale(var(--pscale));
  transform-origin: center;
  border-radius: 42px;
  padding: 9px;
  background: linear-gradient(150deg, #3a3a3c 0%, #1c1c1e 45%, #3a3a3c 100%);
  box-shadow: 0 26px 54px rgba(120,72,32,.34);
}
.halt__screen {
  height: 100%;
  border-radius: 34px;
  background: #fff;
  overflow: hidden;
  padding: 16px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  position: relative;
}
/* dynamic-island */
.halt__screen::before {
  content: "";
  position: absolute;
  top: 9px; left: 50%;
  transform: translateX(-50%);
  width: 78px; height: 21px;
  border-radius: 12px;
  background: #1c1c1e;
  z-index: 2;
}

.halt__app-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-top: 26px; }
.halt__app-top b { display: block; font-size: 15px; font-weight: 800; color: var(--ink-900); letter-spacing: -.02em; }
.halt__app-top span { font-size: 10px; color: var(--ink-500); }
.halt__bell { width: 17px; height: 17px; color: var(--ink-700); flex-shrink: 0; }

.halt__app-search {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 9.5px;
  color: var(--ink-500);
}
.halt__app-search svg { width: 12px; height: 12px; flex-shrink: 0; }

.halt__app-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.halt__app-quick a { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 8px; color: var(--ink-700); }
.halt__app-quick span {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--brand-tint-strong);
  background: var(--brand-tint);
  display: flex; align-items: center; justify-content: center;
}
.halt__app-quick svg { width: 15px; height: 15px; color: var(--brand-700); }

.halt__app-head { display: flex; align-items: baseline; justify-content: space-between; }
.halt__app-head b { font-size: 11px; font-weight: 800; color: var(--ink-900); }
.halt__app-head span { font-size: 8.5px; color: var(--brand-700); font-weight: var(--fw-semibold); }

.halt__app-deals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.halt__app-deals > div { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.halt__app-deals i { display: block; height: 40px; font-size: 6px; font-style: normal; }
.halt__app-deals b { display: block; font-size: 8px; font-weight: var(--fw-bold); color: var(--ink-900); padding: 4px 4px 0; line-height: 1.2; }
.halt__app-deals em { display: block; font-style: normal; font-size: 7px; color: var(--brand-700); padding: 1px 4px 5px; }

.halt__app-provider {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px;
}
.halt__app-provider > i { width: 34px; height: 34px; border-radius: 7px; font-size: 6px; font-style: normal; flex-shrink: 0; }
.halt__app-provider div { flex: 1; min-width: 0; }
.halt__app-provider b { display: block; font-size: 9px; font-weight: var(--fw-bold); color: var(--ink-900); }
.halt__app-provider span { display: block; font-size: 7.5px; color: var(--ink-500); }
.halt__app-provider em { display: block; font-style: normal; font-size: 7.5px; font-weight: var(--fw-bold); color: #d8a33a; }
.halt__app-chev { font-size: 13px; color: var(--ink-300); }

.halt__app-tabs {
  margin-top: auto;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  padding: 7px 0 10px;
}
.halt__app-tabs a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 7px; color: var(--ink-300); }
.halt__app-tabs svg { width: 14px; height: 14px; }
.halt__app-tabs .is-active { color: var(--brand-700); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .halt__phone { --pscale: .5; right: 2%; }
  .halt__memcard { width: 148px; }
  .halt__headline { font-size: 2rem; }
  .hcar__arrow--prev { left: var(--sp-4); }
  .hcar__arrow--next { right: var(--sp-4); }
}
@media (max-width: 900px) {
  /* The 394px lock is a desktop constraint; let it breathe below that. */
  .hcar { height: auto; }
  .halt__card { grid-template-columns: minmax(0, 1fr); }
  .halt__copy { padding-bottom: var(--sp-6); }
  .halt__stage { height: 300px; }
  .halt__phone { --pscale: .46; right: 50%; transform: translate(50%, -50%) scale(var(--pscale)); }
  .halt__memcard { left: 6%; bottom: 6%; }
  .hcar__arrow { display: none; }
  .hcar__dots { bottom: var(--sp-4); }
}

/* Phone widths: same illustration, scaled down further and copy tightened so
   the whole hero fits closer to one screen instead of a long scroll. */
@media (max-width: 640px) {
  .halt__copy { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
  .halt__headline { font-size: 1.625rem; line-height: 1.1; margin: 4px 0 6px; }
  .halt__sub { font-size: .8125rem; max-width: none; margin-bottom: var(--sp-3); }
  .halt__cta { flex-wrap: wrap; margin-bottom: var(--sp-3); }
  .halt__btn { flex: 1 1 auto; }
  .halt__trust {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--sp-4);
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .halt__trust li { flex-shrink: 0; }

  .halt__stage { height: 190px; }
  .halt__phone { --pscale: .3; }
  .halt__memcard { width: 118px; padding: 9px 10px 8px; left: 3%; bottom: 8%; }
  .halt__memcard-brand b { font-size: .6875rem; }
  .halt__memcard-tag { font-size: .375rem; }
  .halt__memcard-level { margin-top: 14px; font-size: .4375rem; }
  .halt__memcard-mark { width: 46px; height: 28px; right: 6px; bottom: 14px; }
  .halt__steth { width: 160px; right: -10%; bottom: -12%; }
}

/* Respect reduced-motion: no sliding animation, no autoplay (JS also checks). */
@media (prefers-reduced-motion: reduce) {
  .hcar__track { transition: none; }
}