/* ==========================================================
   Elisio — offers.css  (offers.html only)
   Sticky jump bar, five vertical chapters (one system,
   five compositions), the private roster.
   ========================================================== */

.offers {
  --jump-h: 76px;                        /* sticky bar incl. its padding */
  --chap: clamp(72px, 9vw, 128px);       /* rhythm between chapters */
  --sticky-top: calc(var(--header-h) + var(--jump-h) + 24px);
}

/* ========== JUMP BAR ========== */
.offers__body + .cta-band { padding-top: 0; }

/* The strip carries the header's scrolled tint: the page colour at rest
   (so it's invisible under the hero), a frosted extension of the header
   once it sticks. */
.jump {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  padding-block: 10px;
  background: rgba(15, 12, 36, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 1px 0 var(--line);      /* closes the header + strip stack */
}
.jump__pill {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--r-pill);
}
.jump__bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-target-group: auto;            /* links track the chapter in view (CSS only) */
}
.jump__bar::-webkit-scrollbar { display: none; }
.jump__bar li { flex-shrink: 0; }
.jump__bar a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 18px;
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-2);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.jump__bar a:hover { color: var(--text); background: var(--lilac-wash); }
html:not(.js) .jump__bar a:target-current,   /* CSS-only fallback (Chromium) when scripts are off */
.jump__bar a.is-current {
  color: var(--text);
  background: var(--lilac-wash);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.jump__bar a:focus-visible { outline-offset: -3px; border-radius: var(--r-pill); }
.jump__split {
  display: flex;
  align-items: center;
}
.jump__split::before {                  /* verticals | roster */
  content: '';
  width: 1px;
  height: 20px;
  margin-inline: 6px;
  background: var(--line-2);
}
@property --jump-fade {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@keyframes jump-fade { to { --jump-fade: 32px; } }
@media (max-width: 760px) {
  .offers { --jump-h: 60px; }            /* header + strip stay near 124px */
  .jump { padding-block: 4px; }
  .jump__bar a { padding-inline: 15px; }
  /* one row that scrolls sideways: fade the far edge so the hidden
     links read as "more", and pad the end so the last one clears it.
     The near edge fades in once the row has been scrolled. */
  .jump__bar {
    padding: 3px;
    scroll-padding-inline: 24px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--jump-fade, 0px), #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--jump-fade, 0px), #000 calc(100% - 40px), transparent);
  }
  .jump__split { padding-right: 32px; }
  @supports (animation-timeline: scroll()) {
    .jump__bar {
      animation: jump-fade linear both;
      animation-timeline: scroll(self inline);
      animation-range: 0px 32px;
    }
  }
}

/* ========== CHAPTER SYSTEM ========== */
.chapter {
  margin-block: var(--chap);
  scroll-margin-top: calc(var(--jump-h) + 8px);
}
.jump + .chapter { margin-top: clamp(40px, 6vw, 88px); }
.chapter--band {
  margin-block: 0;
  padding-block: var(--chap);
  scroll-margin-top: calc(var(--jump-h) - 24px);
  background: var(--night-2);
  border-block: 1px solid var(--line);
}

/* Title: a hairline with the orb sitting on it, then name + subtitle */
.chapter__title {
  position: relative;
  display: grid;
  gap: 10px;
  padding-top: 30px;
  border-top: 1px solid var(--line-2);
}
.chapter__title::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #FFE3B8 0%, #FFB547 30%, #9A82F6 75%);
  box-shadow: 0 0 0 5px var(--night), 0 0 18px rgba(185, 166, 255, 0.55);
}
.chapter--band .chapter__title::before { box-shadow: 0 0 0 5px var(--night-2), 0 0 18px rgba(185, 166, 255, 0.55); }
.chapter__name {
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
}
.chapter__sub {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--text-2);
}
.chapter__lede { margin-top: var(--s-5); max-width: 56ch; }
.chapter__lede + .chapter__body { margin-top: var(--s-5); }
.chapter__body p { color: var(--text-2); max-width: 58ch; }
.chapter__body p + p { margin-top: 1em; }
.chapter__body .money { font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.chapter__tags { margin-top: var(--s-6); }

/* Stats: label above, figure below, hairline on the left */
.vstats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5) var(--s-4);
  margin-top: var(--s-7);
}
.vstats > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: var(--s-4);
  border-left: 1px solid var(--line-2);
}
.vstats dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.35;
  color: var(--lilac);
}
.vstats dd {
  margin-top: auto;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.625rem, 2.6vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}
.vstats dd.money { color: var(--amber); }
.vstats dd small,
.ring__num small {
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lilac);
}

/* Solid panel (not glass: it doesn't float or link) */
.panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 4vw, 52px);
  border-radius: var(--r-panel);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, #1D1748 0%, #140F33 100%);
}

/* ========== E-COMMERCE ========== */
.ecom__head { display: grid; gap: var(--s-5) var(--s-8); }
.ecom__head .chapter__lede { margin-top: 0; }
.vstats--trio {
  margin-top: clamp(40px, 5vw, 64px);
  gap: var(--s-3);
  padding-block: clamp(28px, 4vw, 48px);
  border-block: 1px solid var(--line);
}
.vstats--trio > div { padding-left: clamp(12px, 2vw, 32px); }
.vstats--trio dt { font-size: var(--fs-small); }
.vstats--trio dd {
  font-size: clamp(2rem, 7.6vw, 7rem);
  font-weight: 800;
  letter-spacing: -0.05em;
}
.ecom__body { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: 1em var(--s-8); }
.ecom__body p + p { margin-top: 0; }
@media (min-width: 900px) {
  .ecom__head { grid-template-columns: 5fr 6fr; align-items: end; }
  .ecom__body { grid-template-columns: 1fr 1fr; }
}

/* ========== SAAS ========== */
.saas__grid { display: grid; gap: var(--s-6); }
.pull {
  background:
    radial-gradient(70% 60% at 0% 0%, rgba(185, 166, 255, 0.16), transparent 70%),
    radial-gradient(80% 70% at 100% 100%, rgba(139, 115, 242, 0.28), transparent 70%),
    linear-gradient(160deg, #1D1748 0%, #140F33 100%);
}
.pull__fig {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(6rem, 13vw, 11rem);
  line-height: 0.9;
  letter-spacing: -0.06em;
  color: var(--text);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .pull__fig,
  .rail__fig {                          /* a multiple and a customer spend, not payouts: no amber */
    width: fit-content;
    padding-right: 0.04em;
    background-image: linear-gradient(100deg, #FFFFFF 0%, #E4DCFF 45%, #B9A6FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.pull__cap {
  margin-top: var(--s-4);
  max-width: 24ch;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--text);
}
.ratio {
  display: grid;
  gap: 14px;
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.ratio__row { display: grid; gap: 8px; }
.ratio__label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.ratio__bar {
  display: block;
  width: calc(var(--v, 1) * 100%);
  height: 10px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--lilac-deep), var(--lilac));
}
.ratio__row--low .ratio__label { color: var(--text-3); }
.ratio__row--low .ratio__bar { background: var(--line-2); }
@media (min-width: 640px) and (max-width: 999px) {
  .pull {                               /* figure left, caption right, bars across */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--s-7);
    align-items: end;
  }
  .pull__cap { margin-top: 0; }
  .ratio { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .saas__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "pull title" "pull copy";
    grid-template-rows: auto 1fr;
    column-gap: clamp(56px, 7vw, 112px);
    row-gap: 0;
  }
  .saas__title { grid-area: title; }
  .saas__copy { grid-area: copy; }
  .pull { grid-area: pull; align-self: start; position: sticky; top: var(--sticky-top); }
}

/* ========== FINANCE ========== */
.fin { position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(48px, 5vw, 72px); }
.fin::before {                          /* warm light behind the payout */
  content: '';
  position: absolute;
  z-index: -1;
  top: -10%;
  right: -10%;
  width: min(900px, 90vw);
  aspect-ratio: 1.4;
  background: radial-gradient(closest-side, rgba(255, 181, 71, 0.13), transparent);
  pointer-events: none;
}
.fin__top { display: grid; gap: var(--s-5); align-items: end; }
.fin__figure { display: grid; gap: 12px; }
.fin__figure dt { font-size: var(--fs-small); font-weight: 700; color: var(--lilac); }
.fin__dom {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(5.5rem, 21vw, 14rem);
  line-height: 0.8;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums lining-nums;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .fin__dom {
    width: fit-content;
    padding: 0.06em 0.04em 0.06em 0;
    background-image: linear-gradient(170deg, #FFE7C2 0%, #FFB547 45%, #E8923A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.fin__cols {
  display: grid;
  gap: var(--s-7);
  margin-top: clamp(36px, 5vw, 72px);
}
.fin__lead .chapter__lede { margin-top: 0; }
@media (min-width: 900px) {
  .fin__top { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-7); }
  .fin__figure { justify-self: end; }
  .fin__cols { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(56px, 7vw, 112px); }
}

/* ========== TRAVEL ========== */
.travel__grid { display: grid; gap: var(--s-6); }
.travel__copy .chapter__lede { margin-top: 0; }
.rail {
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(139, 115, 242, 0.3), transparent 70%),
    linear-gradient(160deg, #1D1748 0%, #140F33 100%);
}
.rail__lead { display: grid; gap: 12px; }
.rail__lead dt { font-size: var(--fs-small); font-weight: 700; color: var(--lilac); }
.rail__fig {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(3.5rem, 6.4vw, 5.75rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}
.season {
  margin-top: clamp(28px, 3.5vw, 40px);
  padding-top: 26px;
}
.season__months {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4px;
}
.season__months span {
  position: relative;
  display: grid;
  place-items: center;
  height: 40px;
  border-radius: var(--r-ctl);
  background: var(--lilac-wash);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-3);
}
.season__months .is-peak {
  background: var(--lilac);
  color: var(--night);
}
.season__months em {                    /* small tag above a peak month */
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--lilac);
}
.season__cap {
  margin-top: var(--s-4);
  font-size: var(--fs-small);
  color: var(--text-2);
}
.vstats--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(28px, 3.5vw, 40px);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
@media (min-width: 1000px) {
  .travel__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "title rail" "copy rail";
    grid-template-rows: auto 1fr;
    column-gap: clamp(56px, 7vw, 112px);
    row-gap: 0;
  }
  .travel__title { grid-area: title; }
  .travel__copy { grid-area: copy; margin-top: var(--s-5); }
  .rail { grid-area: rail; align-self: start; position: sticky; top: var(--sticky-top); }
}

/* ========== EDUCATION ========== */
.edu__inner {
  max-width: 820px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.edu .chapter__title { width: 100%; justify-items: center; }
.edu .chapter__title::before { left: 50%; margin-left: -5.5px; }
.ring {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  margin-top: clamp(32px, 4vw, 48px);
}
.ring__dial {
  position: relative;
  width: clamp(208px, 24vw, 272px);
  aspect-ratio: 1;
}
.ring__dial::before {                   /* the orb's light, inside the ring */
  content: '';
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, rgba(255, 221, 170, 0.18), rgba(139, 115, 242, 0.16) 55%, transparent 72%);
}
.ring__dial svg {
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ring__track { fill: none; stroke: var(--line); stroke-width: 9; }
.ring__arc { fill: none; stroke: url(#ring-g); stroke-width: 9; stroke-linecap: round; }
.ring__num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(3.25rem, 5.4vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.05em;
}
.ring__cap {
  max-width: 26ch;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-2);
}
.edu .chapter__lede { margin-top: clamp(32px, 4vw, 48px); margin-inline: auto; }
.edu__body {
  margin-top: var(--s-6);
  text-align: left;
}
.path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 0;
  margin-block: var(--s-4) var(--s-5);
}
.path li { display: flex; align-items: center; }
.path li + li::before {                 /* connector between steps */
  content: '';
  width: 22px;
  height: 1px;
  margin-inline: 6px;
  background: linear-gradient(90deg, var(--line-2), var(--lilac));
}
.path span {
  padding: 8px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
.path li:last-child span { border-color: rgba(185, 166, 255, 0.55); color: var(--lilac); }
.vstats--center { width: 100%; max-width: 640px; text-align: left; }
.edu__body,
.edu .chapter__tags { width: 100%; max-width: 640px; }
.edu .chapter__tags { justify-content: flex-start; }
@media (max-width: 760px) {
  .edu .chapter__lede { text-align: left; }
}

/* ========== ROSTER ========== */
.roster .section-head { margin-bottom: clamp(32px, 4vw, 56px); }
.roster__stage { position: relative; display: grid; }
.ledger {
  grid-area: 1 / 1;
  display: grid;
  padding-block: var(--s-3);
  filter: blur(2.5px);
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(95% 80% at 35% 50%, #000 50%, transparent 100%);
  mask-image: radial-gradient(95% 80% at 35% 50%, #000 50%, transparent 100%);
  user-select: none;
  pointer-events: none;
}
.ledger__row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 0.8fr 0.7fr 0.5fr;
  align-items: center;
  gap: var(--s-5);
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.3vw, 1.1875rem);
  color: var(--text-2);
}
.ledger__row > span { white-space: nowrap; overflow: hidden; }
.ledger__row .money { text-align: right; }
.ledger__name {
  display: inline-block;
  width: var(--w, 6ch);
  max-width: 100%;
  height: 0.85em;
  border-radius: 4px;
  background: var(--text-3);
}
.ledger__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lilac);
}
.ledger__status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.ledger__status.is-paused { color: var(--text-3); }
.ledger__status.is-paused::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

.roster__card {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: end;
  max-width: 540px;
  padding: clamp(28px, 4vw, 52px);
  border-radius: var(--r-panel);
}
.roster__card .label { margin-bottom: var(--s-4); }
.roster__statement {
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
}
.roster__body { margin: var(--s-4) 0 var(--s-6); color: var(--text-2); }

.triplet {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5) var(--s-4);
  margin-top: clamp(48px, 6vw, 88px);
}
.triplet > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: var(--s-5);
  border-left: 1px solid var(--line-2);
}
.triplet dt { font-size: var(--fs-small); font-weight: 700; line-height: 1.35; color: var(--lilac); }
.triplet dd {
  margin-top: auto;
  font-weight: 700;
  font-size: var(--fs-figure);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--text);
}

@media (max-width: 760px) {
  .ledger__row {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 0.5fr);
    gap: var(--s-3);
    padding-block: 10px;
    font-size: 0.9375rem;
  }
  .ledger__row span:nth-child(3) { display: none; }
  .ledger__row:nth-child(n+7) { display: none; }
  .roster__card { grid-area: 2 / 1; margin-top: -120px; justify-self: stretch; max-width: none; }
}

/* ========== SMALL SCREENS ========== */
@media (max-width: 480px) {
  .offers .cta-band h2 { font-size: var(--fs-h2); }   /* longer than the home CTA */
  .vstats { gap: var(--s-4) var(--s-3); }
  .vstats > div,
  .triplet > div { padding-left: var(--s-3); }
  .vstats--trio > div { padding-left: 10px; }
  .triplet dd { font-size: 2.5rem; }
  .path { flex-direction: column; align-items: flex-start; gap: 0; }
  .path li { flex-direction: column; align-items: flex-start; }
  .path li + li::before {               /* the connector turns vertical */
    width: 1px;
    height: 12px;
    margin: 0 0 0 26px;
    background: linear-gradient(180deg, var(--line-2), var(--lilac));
  }
}