/* =========================================================
   FaceUpper — Programme card (the "offer map" node)
   Split out of velo.css so the design system can ship it.
   velo.css remains the source for everything else.
   ========================================================= */

:root {
  /* Also defined in velo.css, which still needs it for .eyebrow.
     Duplicated here so this file is self-contained in the DS bundle. */
  --fu-gold-500: #A48B66;
}


[data-offer-map]:empty {
  min-height: 1120px;
}
@media (max-width: 520px) {
  [data-offer-map]:empty { min-height: 3600px; }
}

/* Screen-reader suffix on buy/explore and on the related-offer chips. Index
   gets this from velo.css; product pages load this file instead. */
.omap .vh, .offer-card .vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.omap {
  --fu-bone-50: #FFFFFF;
  max-width: 1080px;
  margin: clamp(32px, 3.6vw, 48px) auto 0;
  display: grid;
  gap: clamp(44px, 5.5vw, 72px);
}
.omap__label { text-align: left; }
.omap__label h3 {
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.12;
  letter-spacing: -.012em;
}
.omap__label p {
  margin: 8px 0 0; max-width: 52ch;
  font-size: 14px; line-height: 1.5; color: var(--fu-text-muted);
}
.omap__path {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
  grid-template-rows: 1fr;
  align-items: stretch;
  gap: 0;
}
/* A stage is the package card plus its course list beneath it. */
.omap__stage { display: flex; flex-direction: column; min-width: 0; }
.omap__stage > .omap__node { flex: 0 0 auto; }
.omap__then {
  position: relative;
  /* Stay level with the package cards when a stage's courses are open. */
  align-self: start;
  margin-top: calc(var(--offer-card-height, 164px) / 2 - 12px);
  height: 24px;
  z-index: 1;
  pointer-events: none;
}
.omap__then::before,
.omap__then::after { content: ""; position: absolute; }
.omap__then::before {
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--fu-gold-500) 22%,
    var(--fu-gold-500) 78%,
    transparent
  );
  opacity: .65;
  transform: translateY(-50%);
}
.omap__then::after {
  top: 50%; left: 50%;
  width: 7px; height: 7px;
  border: 1px solid var(--fu-gold-500);
  background: var(--fu-bg);
  transform: translate(-50%, -50%) rotate(45deg);
}
.omap__pkgs, .omap__alts {
  margin-top: 14px;
  display: grid;
  gap: 12px;
}
.omap__pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.omap__alts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.omap__node {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(168px, 1fr);
  align-self: stretch;
  width: 100%; min-width: 0; min-height: 164px;
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--fu-bone-50);
  border: 1px solid var(--fu-bloom-200);
  color: var(--fu-ink-900);
  overflow-wrap: break-word;
  transition: border-color var(--fu-dur-base) var(--fu-ease-out);
}
.omap__node:hover,
.omap__node:focus-visible,
.omap__node:focus-within {
  border-color: var(--fu-gold-500);
}
.omap__node[data-omap-expand] {
  cursor: pointer;
  isolation: isolate;
  transition: border-color var(--fu-dur-base) var(--fu-ease-out),
              transform var(--fu-dur-fast) var(--fu-ease-out);
}
.omap__node[data-omap-expand] .omap__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    165deg,
    rgba(164, 139, 102, .2),
    rgba(118, 66, 72, .42) 68%
  );
  opacity: 0;
  transition: opacity var(--fu-dur-base) var(--fu-ease-out);
}
.omap__node[data-omap-expand]:hover {
  transform: translateY(-1px);
}
.omap__node[data-omap-expand]:hover,
.omap__node[data-omap-expand]:focus-visible,
.omap__node[data-omap-expand]:focus-within {
  border-color: var(--fu-bloom-200);
}
.omap__node--pro[data-omap-expand]:hover,
.omap__node--pro[data-omap-expand]:focus-visible,
.omap__node--pro[data-omap-expand]:focus-within {
  border-color: var(--fu-border);
}
.omap__node[aria-current="page"] {
  outline: 2px solid var(--fu-bloom-500);
  /* -1px keeps the ring on the border: at -2px its inner pixel sat in the
     padding box, where the positioned photo painted over it. */
  outline-offset: -1px;
  box-shadow: 0 0 0 4px var(--fu-bloom-100);
}
.omap__node[aria-current="page"]:focus-visible {
  box-shadow: 0 0 0 4px var(--fu-gold-200);
}
/* The photo's anti-aliased rounded edge lets the media background through;
   match it to the ring so no light fringe shows at the corners. */
.omap__node[aria-current="page"] .omap__media {
  background: var(--fu-bloom-500);
}
.omap__node[data-omap-expand]:hover .omap__media::after {
  opacity: 1;
}
.omap__node[data-omap-expand]:hover .omap__media img:not([data-photo-layout]) {
  transform: scale(1.06);
}
.omap__kids {
  margin: 10px 0 0 22px;
  padding-left: 14px;
  border-left: 1px solid var(--fu-gold-200);
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.omap__kids[hidden] { display: none; }
.omap__node--pro,
.omap__node--pkg { border-color: var(--fu-border); }
.omap__node[data-omap-expand][aria-expanded="true"],
.omap__node[data-omap-expand][aria-expanded="true"]:hover,
.omap__node[data-omap-expand][aria-expanded="true"]:focus-visible,
.omap__node[data-omap-expand][aria-expanded="true"]:focus-within {
  border-color: var(--fu-gold-500);
  box-shadow: inset 0 0 0 1px var(--fu-gold-500);
}
/* Expanded current card: keep the halo alongside the expander's inset line. */
.omap__node[aria-current="page"][aria-expanded="true"],
.omap__node[aria-current="page"][aria-expanded="true"]:hover,
.omap__node[aria-current="page"][aria-expanded="true"]:focus-within {
  box-shadow: inset 0 0 0 1px var(--fu-gold-500), 0 0 0 4px var(--fu-bloom-100);
}
.omap__node[aria-current="page"][aria-expanded="true"]:focus-visible {
  box-shadow: inset 0 0 0 1px var(--fu-gold-500), 0 0 0 4px var(--fu-gold-200);
}
.omap__node--alt {
  display: flex; flex-direction: column;
  grid-template-columns: none;
  min-height: 0;
  border-radius: 18px;
  border-color: var(--fu-border);
}
.omap__kids .omap__node--alt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  grid-template-areas: "body media";
  min-height: 0;
  border-radius: 14px;
}
.omap__media {
  position: relative;
  display: block;
  min-height: 164px;
  overflow: hidden;
  background: var(--fu-cream-100);
}
.omap__node--alt .omap__media {
  flex: 0 0 auto;
  min-height: 0;
  aspect-ratio: 4 / 3;
}
.omap__kids .omap__node--alt .omap__media {
  grid-area: media;
  aspect-ratio: auto;
  min-height: 0;
}
.omap__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 18%;
  opacity: 1;
  transform: scale(1.02);
  transition: transform 900ms var(--fu-ease-out);
}
@property --wipe {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
[data-photo-cycle] { --course-wipe: 900ms; }
/* A narrow soft edge, not an opacity blend of the two faces. */
[data-photo-cycle] .offer-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  --wipe: 0%;
  opacity: 1;
  z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 12%), transparent var(--wipe));
  mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 12%), transparent var(--wipe));
  transition: --wipe var(--course-wipe) var(--fu-ease-in-out), transform 900ms var(--fu-ease-out);
}
[data-photo-cycle] .offer-media img.is-under {
  --wipe: 120%;
  -webkit-mask-image: none;
  mask-image: none;
  z-index: 0;
  transition: transform 900ms var(--fu-ease-out);
}
[data-photo-cycle] .offer-media img.is-on {
  --wipe: 120%;
  z-index: 1;
}
[data-photo-cycle] .omap__meter {
  position: absolute;
  z-index: 2;
  left: 10px;
  right: 10px;
  bottom: 8px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fu-bg) 55%, transparent);
  pointer-events: none;
  overflow: hidden;
}
[data-photo-cycle] .omap__meter > span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--fu-bloom-500);
  transform: scaleX(0);
  transform-origin: left center;
}
.omap__path .omap__inc > span {
  transition: background-color var(--course-wipe) var(--fu-ease-out),
              border-color var(--course-wipe) var(--fu-ease-out),
              color var(--course-wipe) var(--fu-ease-out);
}
.omap__path .omap__inc > span.is-on {
  background: color-mix(in srgb, var(--fu-bloom-500) 14%, var(--fu-paper));
  border-color: color-mix(in srgb, var(--fu-bloom-500) 42%, var(--fu-border-strong));
  color: var(--fu-bloom-500);
}
.omap__node--start .omap__media img { object-position: var(--photo-position, center); }
.omap__alts .omap__shot--360 {
  object-fit: cover;
  object-position: center;
  transform: none;
}
.omap__body {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  min-width: 0;
  padding: 16px 16px 14px;
  background: var(--fu-bone-50);
}
.omap__node--alt .omap__body { flex: 1 1 auto; padding: 12px 12px 13px; }
.omap__kids .omap__node--alt .omap__body {
  grid-area: body;
  padding: 10px 12px 9px;
}
.omap__lead {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.omap__n {
  font-family: var(--fu-font-display); font-weight: 400;
  font-size: 18px; line-height: 1;
  color: var(--fu-gold-500); font-variant-numeric: tabular-nums;
}
.omap__badge {
  display: inline-flex; align-items: center;
  max-width: 100%;
  min-height: 22px; margin-top: 6px; padding: 2px 8px;
  border-radius: var(--fu-radius-pill);
  background: var(--fu-bloom-500); color: #FFFFFF;
  font-size: 9px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.25;
}
.omap__name {
  display: block; margin: 0;
  font-family: var(--fu-font-display);
  font-size: clamp(16px, 1.25vw, 19px); line-height: 1.15; letter-spacing: -.01em;
  transition: color var(--fu-dur-fast) var(--fu-ease-out);
}
.omap__node--alt .omap__name { margin-top: 4px; font-size: 15px; }
.omap__kids .omap__node--alt .omap__name { font-size: 14px; }
.omap__inc {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
}
.omap__inc > span {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
  border-radius: var(--fu-radius-pill);
  background: var(--fu-paper);
  border: 1px solid var(--fu-border-strong);
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
}
.omap__inc span.is-on {
  background: var(--fu-bloom-500);
  border-color: var(--fu-bloom-500);
  color: #FFFFFF;
}
.omap__meta, .omap__tag {
  display: block; margin-top: 4px; max-width: 100%;
  font-size: 12.5px; line-height: 1.4; color: var(--fu-ink-700);
}
.omap__tag {
  margin-top: 0;
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fu-bloom-500);
}
.omap__price {
  display: block; margin-top: 6px; padding-top: 0;
  font-size: 13.5px; letter-spacing: .02em; color: var(--fu-ink-700);
  font-variant-numeric: tabular-nums;
}
.omap__node--alt .omap__price { margin-top: 4px; font-size: 13px; }
.omap__kids .omap__acts { padding-top: 6px; gap: 6px 10px; flex-wrap: nowrap; }
.omap__kids .omap__buy { height: 28px; padding: 0 11px; font-size: 11.5px; }
.omap__kids .omap__more { min-height: 28px; font-size: 12px; }
.omap__acts {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 16px;
  margin-top: auto; padding-top: 12px;
}
.omap__buy {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 16px;
  border-radius: var(--fu-radius-pill);
  background: transparent;
  border: 1px solid var(--fu-bloom-500);
  color: var(--fu-bloom-500);
  font-size: 12.5px; font-weight: 500; letter-spacing: .02em;
  transition: background var(--fu-dur-base) var(--fu-ease-out),
              color var(--fu-dur-base) var(--fu-ease-out),
              transform var(--fu-dur-fast) var(--fu-ease-out);
}
.omap__buy:hover {
  background: var(--fu-bloom-500); color: #FFFFFF;
  transform: translateY(-1px);
}
.omap__buy:active { transform: translateY(0); }
.omap__node--start .omap__buy {
  background: var(--fu-bloom-500); color: #FFFFFF;
}
.omap__node--start .omap__buy:hover {
  background: var(--fu-bloom-600); border-color: var(--fu-bloom-600);
}
.omap__more {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 36px;
  font-size: 13px; font-weight: 500; color: var(--fu-bloom-500);
  transition: color var(--fu-dur-fast) var(--fu-ease-out);
}
.omap__more:hover {
  color: var(--fu-bloom-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.omap__node[aria-current="page"] .omap__more {
  background: var(--fu-bloom-100);
  color: var(--fu-bloom-600);
  border: 1px solid var(--fu-bloom-200);
  padding: 0 10px;
  height: 28px;
  min-height: 28px;
  border-radius: var(--fu-radius-pill);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: default;
}
.omap__node[aria-current="page"] .omap__more:hover {
  color: var(--fu-bloom-600);
  text-decoration: none;
}
.omap__kids .omap__node[aria-current="page"] .omap__more {
  height: 26px;
  min-height: 26px;
}

@media (prefers-reduced-motion: reduce) {
  .omap__media img { transform: none; transition: none; }
  [data-photo-cycle] .offer-media img,
  [data-photo-cycle] .offer-media img.is-under,
  .omap__path .omap__inc > span { transition: none; }
  [data-photo-cycle] .omap__meter { display: none; }
  .omap__node[data-omap-expand],
  .omap__node[data-omap-expand] .omap__media::after { transition: none; }
  .omap__node[data-omap-expand]:hover,
  .omap__node[data-omap-expand]:focus-visible,
  .omap__node[data-omap-expand]:focus-within { transform: none; }
}
@media (max-width: 900px) {
  .omap__path { grid-template-columns: 1fr; grid-template-rows: none; gap: 0; }
  .omap__then {
    width: 24px;
    height: 40px;
    margin: 0 auto;
  }
  .omap__then::before {
    top: 0; bottom: 0; left: 50%; right: auto;
    width: 1px; height: auto;
    background: linear-gradient(
      180deg,
      transparent,
      var(--fu-gold-500) 18%,
      var(--fu-gold-500) 82%,
      transparent
    );
    transform: translateX(-50%);
  }
  .omap__then::after {
    top: 50%; right: auto; bottom: auto; left: 50%;
    width: 7px; height: 7px;
    clip-path: none;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .omap__alts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .omap__node { min-height: 148px; }
  .omap__media { min-height: 148px; }
  .omap__body { padding: 14px; }
}
@media (max-width: 520px) {
  .omap__pkgs, .omap__alts { grid-template-columns: 1fr; }
  .omap__then { width: 24px; height: 48px; }
  .omap__then::after { width: 8px; height: 8px; }
  .omap__node {
    display: flex; flex-direction: column;
    width: 100%; min-height: 0;
  }
  .omap__media { order: -1; min-height: 0; aspect-ratio: 16 / 10; }
  .omap__kids .omap__node--alt {
    grid-template-columns: minmax(0, 1fr) 96px;
  }
}

/* Shared photo presentation. The catalog owns sources, dimensions and focal
   points; the card context only decides the space available to the photo. */
.offer-media { position: relative; display: block; flex-shrink: 0; }
/* Focus LIBERA's centred photo on the head and shoulders. Anchoring the zoom
   at the top preserves the hairline in the desktop and mobile frames. */
.offer-media img.omap__shot--libera {
  width: 100%; max-width: 100%; inset: 0;
  object-fit: cover; object-position: var(--photo-position, center top);
  transform: scale(1.4);
  transform-origin: center top;
}
.offer-media img[data-photo-layout] {
  object-position: var(--photo-position, center);
  transform: none;
}
/* A hidden, inert copy of the original Starter is the responsive size reference.
   Its natural layout is deliberately excluded from the uniform-card rules. */
[data-offer-map], [data-offer-alts] { position: relative; }
[data-offer-alts] { max-width: 1080px; margin-left: auto; margin-right: auto; }
.offer-size-reference.omap {
  position: absolute; top: 0; left: 0; right: 0;
  margin: 0 auto;
  visibility: hidden; pointer-events: none;
}
.offer-size-reference .omap__path { margin-top: 0; }
.omap__pkgs, .omap__alts, [data-offer-alts] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
}
.omap__node.offer-card, .card.offer-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "body media";
  height: var(--offer-card-height);
  min-height: 0;
}
.offer-card > .omap__body, .offer-card > .card__in { grid-area: body; }
.offer-card > .offer-media {
  grid-area: media;
  width: 100%; height: 100%; min-height: 0;
  aspect-ratio: auto;
  order: 0;
}
/* Every offer keeps the same equal description/photo split, with media on the right. */
.offer-media img[data-photo-layout="expanded"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Fill the side space during a cycle so the previous photo cannot show through. */
  background: var(--fu-surface);
}
.omap__kids .offer-card .omap__acts {
  flex-wrap: wrap;
}
/* Courses inside a stage are contents, not peers: a compact row with a
   small photo, sized by their copy rather than by the package frame. */
.omap__kids .omap__node.offer-card {
  height: auto; min-height: 0;
  grid-template-columns: minmax(0, 1fr) 128px;
  border-radius: 14px;
}
.omap__kids .offer-card > .offer-media { height: auto; align-self: stretch; }
/* Related offers keep all their copy within the same compact Starter frame. */
.card.offer-card .card__in { padding: 12px 16px; min-width: 0; }
.card.offer-card .num { margin: 0; font-size: 10px; line-height: 1.4; }
.card.offer-card h3 { margin: 4px 0 0; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.15; }
.card.offer-card p:not(.num) { margin: 4px 0 0; font-size: 12.5px; line-height: 1.4; }
.card.offer-card .price { font-size: 13.5px; }
.card.offer-card .card__cta { margin-top: auto; padding-top: 8px; gap: 8px 16px; }
.card.offer-card .card__cta .fu-btn { height: 36px; padding: 0 16px; font-size: 12.5px; }
.card.offer-card .pc__ex { font-size: 13px; }
/* Course pages: the package that includes the current course leads the pair,
   with the map's ring, one line of course chips (current course filled) and
   the bundle saving. The other course steps back to an outline button. */
.card.offer-card--lead {
  border-color: var(--fu-bloom-500);
  box-shadow: 0 0 0 4px var(--fu-bloom-100);
}
.card.offer-card--lead > .offer-media { background: var(--fu-bloom-500); }
.card.offer-card .omap__inc { margin: 8px 0 0; }
.card.offer-card .omap__inc span.is-here {
  background: var(--fu-bloom-500);
  border-color: var(--fu-bloom-500);
  color: #FFFFFF;
}
.card.offer-card .card__save {
  margin-left: 6px;
  font-size: 12px; font-weight: 400; letter-spacing: 0;
  color: var(--fu-ink-700);
}
.card.offer-card--sib .btn-buy {
  background: transparent;
  color: var(--fu-bloom-500);
}
.card.offer-card--sib .btn-buy:hover,
.card.offer-card--sib .btn-buy:focus-visible,
.card.offer-card--sib .btn-buy:active {
  background: var(--fu-bloom-500);
  color: var(--fu-text-invert);
}
@media (max-width: 900px) {
  .omap__pkgs, .omap__alts, [data-offer-alts] { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .omap__node.offer-card, .card.offer-card {
    display: flex; flex-direction: column;
  }
  .offer-card > .offer-media {
    order: -1;
    height: var(--offer-media-height);
    flex: 0 0 var(--offer-media-height);
  }
  .offer-card > .omap__body, .offer-card > .card__in { flex: 1; }
  .omap__kids .omap__node.offer-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
  }
  .omap__kids .offer-card > .offer-media { order: 0; height: auto; flex: none; }
}