/* The 2027 Jump Start (JT, Sep 19 2026): the banner, the struck regular prices, the savings chips and
   the countdown, on every page that sells. assets/js/jumpstart.js fills in the live numbers; when the
   offer is over, html.jump-closed hides every .jump-on element and each price shows its regular amount.
   Every rule starts with "body" so it wins over a page's own style block (the Sep 19 app lesson). */

body .jump-offer {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: center;
  margin: 0 0 34px; padding: 26px 30px; border-radius: 26px; border: 1.5px solid #E2C878; text-align: left;
  background: radial-gradient(ellipse at 0% 0%, rgba(226,200,120,0.20) 0%, rgba(226,200,120,0) 60%), #131217;
  box-shadow: 0 0 0 6px rgba(226,200,120,0.06);
}
body .jump-offer__eyebrow { margin: 0; font: 700 13px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: #E2C878; }
body .jump-offer__title { margin: 10px 0 0; font: 700 clamp(22px, 2.2vw, 30px)/1.15 var(--font); letter-spacing: -0.02em; color: #fff; text-wrap: balance; }
body .jump-offer__sub { margin: 10px 0 0; font: 400 15px/1.5 var(--font); color: rgba(255,255,255,0.68); }
body .jump-spots { font: 600 17px/1.2 var(--font); color: #fff; }
body .jump-spots b { font-size: 30px; color: #E2C878; margin-right: 4px; }
body .jump-bar { margin-top: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,0.10); overflow: hidden; }
body .jump-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #E6CB6C, #C9A84C); }
body .jump-count { margin-top: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
body .jump-count > div { padding: 10px 4px 9px; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(226,200,120,0.35); text-align: center; }
body .jump-count b { display: block; font: 800 clamp(24px, 2.4vw, 32px)/1 var(--font); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
body .jump-count span { display: block; margin-top: 6px; font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: #E2C878; }

/* the regular price, struck, above the price paid now */
body .jump-was { margin: 0; font: 600 18px/1.2 var(--font); color: rgba(255,255,255,0.55); }
body .jump-was s, body .jump-inline s { font-weight: 700; text-decoration-thickness: 2px; text-decoration-color: rgba(255,110,110,0.9); color: rgba(255,255,255,0.78); }
body .jump-inline s { color: rgba(255,255,255,0.62); margin-right: 6px; }
body .tier-card .jump-was { font-size: 14px; }       /* the fractional price line is small: never outshout it */
/* a block that hugs its text, never inline-block: an inline box merges with the text after it, and the
   words gate then reads the chip and the button beside it as one block (Sep 19) */
body .jump-save {
  display: block; align-self: flex-start; width: fit-content; margin: 6px 0 0; padding: 6px 12px; border-radius: 999px;
  background: rgba(226,200,120,0.14); border: 1px solid rgba(226,200,120,0.5); font: 700 13px/1.2 var(--font); color: #E2C878;
}
body .tier-card .jump-save { margin: 8px 0 16px; }
body .jump-pill {
  width: fit-content; align-self: flex-start; margin-top: 12px; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; background: rgba(226,200,120,0.12); border: 1px solid rgba(226,200,120,0.45);
  font: 700 14px/1.2 var(--font); color: #E2C878;
}
body .jump-pill::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #E2C878; box-shadow: 0 0 0 4px rgba(226,200,120,0.25); }
body .track-body .jump-chip { margin: 6px 0 14px; font: 700 12px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: #E2C878; }

/* the script shows these once it has a number to put in them */
body [data-jump-count][hidden], body [data-jump-spots][hidden], body [data-jump-days][hidden] { display: none; }
/* the offer is over: 10 spots taken or the deadline passed */
html.jump-closed body .jump-on { display: none; }

@media (max-width: 900px) {
  body .jump-offer { grid-template-columns: minmax(0, 1fr); padding: 22px; }
}