/*
 * Home page: the bag journey, told in sections.
 *
 * Each chapter is an ordinary section: a two-line headline beside a panel that plays its part of
 * the story while it scrolls into place. Nothing is pinned. UI colours resolve to tokens or a
 * color-mix of one; the --jr-art-* literals are artwork (the box's edges, paper tag, the photo's
 * shadow, the brand mark's ∞ gradient, review-star gold, the delivery map). Sizes inside
 * .jr-canvas are design pixels that journey.js scales to the panel.
 */

.jr {
  --jr-art-shadow: rgba(84, 40, 16, .2);
  --jr-art-paper: #FFFBF2;
  --jr-art-paper-line: #E7DCC8;
  --jr-art-string: #B9A88E;
  --jr-art-kraft-edge: rgba(110, 70, 35, .3);
  --jr-art-map-land: #EFF1F5;
  --jr-art-map-bldg: #E5E8EE;
  --jr-art-map-park: #D7EBD3;
  --jr-art-map-water: #C6DCF2;
  --jr-art-map-casing: #D5D9E2;
  --jr-art-map-label: #8A91A1;
  --jr-art-inf-1: #04A8FB;
  --jr-art-inf-2: #00DBFA;
  --jr-art-star: #FFB400;
  position: relative;
}

/* ---------- chapters ---------- */

/* contain: paint keeps a chapter's animating parts from pulling the rest of the page into one
   GPU layer: an element mid-transition is composited, and everything painted after it that
   overlaps gets promoted with it. */
.jr-ch { padding: var(--s-9) 0; contain: paint; }
.jr-band > .jr-ch + .jr-ch { padding-top: 0; }
.jr-ch__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-8); align-items: center; }
.jr-ch--flip .jr-copy { order: 2; }
.jr-ch--center .jr-ch__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: var(--s-7); }
.jr-ch--center .jr-copy { align-items: center; max-width: 44em; }
.jr-ch--center .jr-h, .jr-ch--cta .jr-h { font-size: clamp(34px, 4.4vw, 64px); }
/* The opener is two lines, wide enough that each keeps to one line, with room above and below so
   it reads as the story's title card rather than one more section. */
.jr-ch.jr-ch--intro { padding-block: clamp(96px, 16vh, 208px) clamp(128px, 20vh, 260px); }
.jr-ch--intro .jr-copy { max-width: 1000px; }
.jr-ch--intro .jr-h { font-size: clamp(30px, 3.9vw, 56px); }
/* Under it, the picture the sentence asks for: the bag alone, wearing the film's price tag, with
   only its shadow for a shelf. The shadow sits under the photo's base and strap, at 89% and 95% of
   its box. The tag hangs from the ring at (447, 183) of the 512px photo, at the film's scale of
   150/540 of the bag, with its price set smaller than the film's so it fits the paper at this size. */
.jr-shelf { --bag: clamp(168px, 16vw, 224px); position: relative; display: grid; justify-items: center; }
.jr-shelf__bag { position: relative; z-index: 1; width: var(--bag); aspect-ratio: 1; }
.jr-shelf__bag img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 8px var(--jr-art-shadow)); }
.jr-shelf__tag { position: absolute; left: 87.3%; top: 35.7%; width: 27.8%; margin-left: -13.9%; transform-origin: 50% 0; overflow: visible; }
.jr-shelf__string { fill: none; stroke: var(--jr-art-string); stroke-width: 3; stroke-linecap: round; }
.jr-shelf__paper { fill: var(--jr-art-paper); stroke: var(--jr-art-paper-line); stroke-width: 2; }
.jr-shelf__ink { fill: var(--jr-art-paper-line); }
.jr-shelf__tag text { font-family: var(--font); font-weight: 800; font-size: 36px; letter-spacing: -1px; fill: var(--ink); }
.jr-shelf__shadow { position: absolute; bottom: calc(var(--bag) * .02); left: 50%; width: calc(var(--bag) * .76); height: calc(var(--bag) * .08); margin-left: calc(var(--bag) * -.34); border-radius: 50%; background: radial-gradient(closest-side, var(--jr-art-shadow), transparent), radial-gradient(closest-side, var(--jr-art-shadow), transparent 70%); }
/* Under the bag, the facts the rest of the page holds and a way to it. Most home visitors stop in
   the first two screens, and only about one in five reached anything after the story (Clarity,
   3–9 Oct 2026), so the price, the setup time and the trial terms are said here as well. */
.jr-skip { display: grid; justify-items: center; gap: var(--s-5); text-align: center; }
.jr-skip__facts { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; font-size: var(--t-sm); font-weight: 500; color: var(--body); }
.jr-skip__facts li + li::before { content: "\00B7"; margin-inline: var(--s-3); color: var(--muted); }
.jr-skip__ctas { justify-content: center; }
@media (max-width: 560px) {
  .jr-skip__facts { flex-direction: column; gap: var(--s-1); }
  .jr-skip__facts li + li::before { content: none; }
}
/* Share the closing gaps with the neighbouring sections. */
.jr-band > .jr-ch:has(+ .jr-ch--cta) { padding-bottom: var(--s-7); }
.jr-band > .jr-ch.jr-ch--cta { padding-block: var(--s-7) var(--s-6); }
.jr-ch--cta .jr-copy { margin-inline: auto; text-align: center; gap: var(--s-5); }
.elementor .e-con.e-con.section.chg-section { padding-top: var(--s-4); }

.jr-copy { display: flex; flex-direction: column; gap: var(--s-4); max-width: 32em; }
.jr-copy p { margin: 0; }
.jr-stock-loss {
  display: inline-block; padding-inline: .3em; border-radius: 4px;
  background: var(--bad-tint); color: var(--bad); font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.jr-h { margin: 0; font-size: clamp(30px, 3.3vw, 48px); line-height: 1.06; letter-spacing: -.04em; color: var(--ink); text-wrap: balance; }
.jr-h span { display: block; color: var(--muted); }
.jr > .jr-ch .jr-h span, .jr-band--with .jr-h span { color: var(--accent); }
.jr-p { font-size: var(--t-lg); color: var(--body); max-width: 30em; }
.jr-list { max-width: 30em; }
.jr-list li { padding: 5px 0; }

.jr-band--without { background: var(--surface); }
.jr-band--switch { background: var(--ink); }
.jr-band--switch .jr-h { color: var(--white); }
.jr-band--switch .jr-h span { color: var(--accent-on-dark); }
.jr-band--with { background: var(--white); }

/* The copy rises line by line once its top has passed 70% of the way down the screen, as Apple's
   sections do, using the site's own fx-in trigger (fx.js reads --fx-line). */
.jr-copy { --fx-line: .7; }
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .jr-copy.fx-in { opacity: 1; transform: none; }
  .js-reveal .jr-copy.fx-in > *, .js-reveal .jr-copy.fx-in .jr-h span { opacity: 0; transform: translateY(26px); }
  .js-reveal .jr-copy.fx-in.is-in > *, .js-reveal .jr-copy.fx-in.is-in .jr-h span {
    opacity: 1; transform: none;
    transition: opacity .8s var(--fx-ease-out), transform 1s var(--fx-ease-out);
  }
  .js-reveal .jr-copy.fx-in.is-in .jr-h span { transition-delay: .12s; }
  .js-reveal .jr-copy.fx-in.is-in > :nth-child(3) { transition-delay: .22s; }
  .js-reveal .jr-copy.fx-in.is-in > :nth-child(2):last-child { transition-delay: .22s; }

  /* The opener comes into focus, then its second line rises with the gradient flowing in behind
     it. Only the first line is blurred: on the gradient line the filter would sit on the element
     that clips its background to the text, a combination this page has never shipped to Safari. */
  .js-reveal .jr-ch--intro .jr-copy.fx-in > .jr-h { transform: translateY(36px); filter: blur(10px); }
  .js-reveal .jr-ch--intro .jr-copy.fx-in .jr-h span { transform: translateY(36px); background-position: 100% 0; }
  .js-reveal .jr-ch--intro .jr-copy.fx-in.is-in > .jr-h {
    transform: none; filter: none;
    transition: opacity 1s var(--fx-ease-out), transform 1.4s var(--fx-ease-out), filter 1s var(--fx-ease-out);
  }
  .js-reveal .jr-ch--intro .jr-copy.fx-in.is-in .jr-h span {
    transform: none; background-position: 0 0;
    transition: opacity 1s var(--fx-ease-out) .55s, transform 1.4s var(--fx-ease-out) .55s,
      background-position 2.4s cubic-bezier(.45, 0, .2, 1) .55s;
  }

  /* The bag waits for a line higher up than the copy's, so it plays once it is wholly on screen: it
     fades up into place as its shadow gathers under it, and the tag swings once it settles, as a
     pendulum would: easing out to each peak and in to each crossing. */
  .jr-shelf { --fx-line: .65; }
  .js-reveal .jr-shelf.fx-in { opacity: 1; transform: none; }
  .js-reveal .jr-shelf.fx-in .jr-shelf__bag { opacity: 0; transform: translateY(48px); }
  .js-reveal .jr-shelf.fx-in .jr-shelf__shadow { opacity: 0; transform: scale(.6); }
  .js-reveal .jr-shelf.fx-in.is-in .jr-shelf__bag {
    opacity: 1; transform: none;
    transition: opacity .8s var(--fx-ease-out) .1s, transform 1.1s var(--fx-ease-out) .1s;
  }
  .js-reveal .jr-shelf.fx-in.is-in .jr-shelf__shadow { opacity: 1; transform: none; transition: opacity .8s var(--fx-ease-out) .25s, transform 1s var(--fx-ease-out) .25s; }
  .js-reveal .jr-shelf.fx-in.is-in .jr-shelf__tag { animation: jr-swing 3s .6s both; }
  @keyframes jr-swing {
    0%, 20%, 40%, 60%, 80% { transform: rotate(0); animation-timing-function: cubic-bezier(.61, 1, .88, 1); }
    10% { transform: rotate(12deg); animation-timing-function: cubic-bezier(.12, 0, .39, 0); }
    30% { transform: rotate(-7deg); animation-timing-function: cubic-bezier(.12, 0, .39, 0); }
    50% { transform: rotate(4deg); animation-timing-function: cubic-bezier(.12, 0, .39, 0); }
    70% { transform: rotate(-2.4deg); animation-timing-function: cubic-bezier(.12, 0, .39, 0); }
    90% { transform: rotate(1.4deg); animation-timing-function: cubic-bezier(.12, 0, .39, 0); }
    100% { transform: rotate(0); }
  }
}

/* ---------- panels ---------- */

.jr-visual { width: 100%; max-width: 540px; justify-self: center; }
/* Match the native one-star review's 860px crop and 760px card proportions. */
.jr-review-compare { container-type: inline-size; }
.jr-review-compare__eyebrow { position: absolute; z-index: 1; top: var(--s-4); left: var(--s-4); }
.jr-review-compare__eyebrow > span { display: inline-block; padding: 4px var(--s-3); border-radius: var(--r-full); background: var(--accent-tint); color: var(--accent); font-size: var(--t-xs); font-weight: 700; letter-spacing: .02em; }
.jr-review-compare__card { position: absolute; z-index: 1; top: 28.65%; left: 5.81%; width: 88.37%; border-radius: 3.49cqw; overflow: hidden; background: var(--white); box-shadow: 0 5.81cqw 12.79cqw -5.81cqw color-mix(in srgb, var(--ink) 50%, transparent), 0 .23cqw .7cqw color-mix(in srgb, var(--ink) 5%, transparent); }
.jr-review-compare__main { padding: 4.186cqw 5.116cqw 4.65cqw; }
.jr-review-compare__platform { display: flex; align-items: center; gap: 1.86cqw; color: var(--muted); font-size: 3.14cqw; font-weight: 600; }
.jr-review-compare__platform img { width: 4.65cqw; height: 4.65cqw; object-fit: contain; }
.jr-review-compare__stars { display: flex; gap: 1.628cqw; margin-top: 2.558cqw; color: var(--jr-art-star); }
.jr-review-compare__stars svg { display: block; width: 8.14cqw; height: 8.14cqw; }
.jr-review-compare__star-fill { stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.jr-review-compare blockquote { margin: 2.558cqw 0 0; color: var(--ink); font-size: 4.65cqw; font-weight: 650; line-height: 1.2; letter-spacing: -.02em; text-align: left; }
.jr-review-compare__context { margin: 2.558cqw 0 0; color: var(--muted); font-size: clamp(10px, 2.8cqw, 14px); line-height: 1.4; }
.jr-review-compare__before { padding: 3cqw 5.116cqw; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 65%, var(--white)); }
.jr-review-compare__before > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: clamp(8px, 2.3cqw, 11px); }
.jr-review-compare__past-rating { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.jr-review-compare__past-stars { color: var(--jr-art-star); font-size: clamp(10px, 2.8cqw, 14px); letter-spacing: 0; white-space: nowrap; }
.jr-review-compare__past-stars i { color: var(--muted); font-style: normal; }
.jr-review-compare__before p { margin: 1.8cqw 0 0; color: var(--muted); font-size: clamp(10px, 2.8cqw, 14px); line-height: 1.4; }
/* The preceding delivery scene occupies the narrower, five-part grid column. */
@media (min-width: 901px) {
  .jr-panel.jr-review-compare { width: calc(100% * 5 / 6); }
}
@media (prefers-reduced-motion: no-preference) {
  .jr-review-compare.is-playing .jr-review-compare__card { animation: jr-review-enter .85s cubic-bezier(.2,.75,.25,1) both; }
  .jr-review-compare.is-playing .jr-review-compare__star-fill { animation: jr-review-fill .55s calc(.5s + var(--star) * .1s) both; }
  .jr-review-compare.is-playing blockquote { animation: jr-review-enter .7s .7s both; }
  @keyframes jr-review-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes jr-review-fill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
}
.jr-ch--center .jr-visual { max-width: 440px; }
.jr-panel {
  position: relative; width: 100%; aspect-ratio: .77;
  border-radius: var(--r-md); border: 1px solid var(--line);
  box-shadow: var(--shadow-lg); overflow: hidden; isolation: isolate;
  transform-origin: 50% 70%;
  background:
    radial-gradient(70% 50% at 88% 6%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    radial-gradient(70% 50% at 8% 96%, color-mix(in srgb, var(--fx-violet) 7%, transparent), transparent 70%),
    var(--surface);
}
.jr-panel::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(90% 70% at 50% 50%, #000 20%, transparent 78%);
  mask-image: radial-gradient(90% 70% at 50% 50%, #000 20%, transparent 78%);
}
.jr-band--without .jr-panel { border-color: var(--line-strong); }
.jr-panel--bare { background: none; border: 0; box-shadow: none; }
.jr-panel__still { position: absolute; inset: 0; z-index: 1; width: 46%; height: auto; margin: auto; filter: drop-shadow(0 18px 22px var(--jr-art-shadow)); }
.jr-panel--bare::after { display: none; }
.jr-panel__bg { position: absolute; inset: 0; z-index: 0; opacity: 0; }
.jr-panel__bg--b {
  background:
    radial-gradient(80% 60% at 50% 40%, color-mix(in srgb, var(--line-strong) 45%, transparent), transparent 75%),
    linear-gradient(160deg, color-mix(in srgb, var(--line) 70%, var(--surface)), color-mix(in srgb, var(--line-strong) 55%, var(--surface)));
}
.jr-panel__bg--c {
  background:
    radial-gradient(60% 45% at 50% 55%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 72%),
    radial-gradient(70% 50% at 10% 8%, color-mix(in srgb, var(--ok) 9%, transparent), transparent 70%),
    radial-gradient(70% 50% at 92% 94%, color-mix(in srgb, var(--fx-violet) 8%, transparent), transparent 70%),
    var(--white);
}
.jr-panel__chip {
  position: absolute; top: var(--s-4); left: var(--s-4); z-index: 2;
  padding: 4px var(--s-3); border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .02em; opacity: 0;
}
.jr-panel__chip--without { background: var(--white); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-strong); }
.jr-panel__chip--with { background: var(--accent-tint); color: var(--accent); }
.jr-panel--bare .jr-panel__chip { display: none; }
/* On black the clock's 92% white reads grey beside the white shop cards. */
.jr-panel--bare .jr-clock { background: var(--white); }

/* ---------- canvas (design pixels) ---------- */

.jr-canvas {
  position: absolute; left: 0; top: 0; z-index: 1;
  overflow: hidden;
  transform-origin: 0 0; transform: scale(var(--k, .5));
  font-family: var(--font); color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
.jr-world { position: absolute; width: 1080px; height: 1920px; }
.jr-world > * { position: absolute; left: 0; top: 0; }
.jr-world > .jr-clock { left: 540px; top: 520px; }
.jr-world > .jr-rewind { left: 540px; top: 376px; }
.jr-world svg.jr-full { width: 1080px; height: 1920px; overflow: visible; pointer-events: none; }

.jr-bag { width: 100px; height: 100px; visibility: hidden; }
.jr-bag img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 26px 30px var(--jr-art-shadow)); }
.jr-shadow { width: 100px; height: 30px; border-radius: 50%; background: radial-gradient(closest-side, var(--jr-art-shadow), transparent); visibility: hidden; }
.jr-halo {
  width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; visibility: hidden;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 6%, transparent) 60%, transparent);
}
.jr-halo i { position: absolute; inset: 60px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.jr-tag { width: 150px; height: 260px; margin-left: -75px; transform-origin: 75px 0; visibility: hidden; overflow: visible; }
.jr-tag text { font-family: var(--font); font-weight: 800; font-size: 44px; letter-spacing: -1.5px; fill: var(--ink); }

.jr-badge {
  width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
  background: var(--white); color: var(--ink);
  box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--ink) 35%, transparent), 0 0 0 2px var(--white);
  font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; overflow: hidden; visibility: hidden;
}
.jr-badge .jr-badge__o, .jr-badge .jr-badge__n { position: absolute; left: 0; right: 0; text-align: center; line-height: 84px; letter-spacing: -.03em; }
.jr-badge.is-neg { background: var(--bad); color: var(--white); }
.jr-badge.is-zero { color: var(--muted); }

.jr-world .jr-win {
  position: absolute; left: 0; top: 0;
  width: 336px; height: 304px; margin: -152px 0 0 -168px; border-radius: 26px;
  background: var(--white); border: 2px solid var(--line);
  box-shadow: 0 40px 90px -44px color-mix(in srgb, var(--ink) 40%, transparent), 0 2px 6px color-mix(in srgb, var(--ink) 5%, transparent);
  overflow: hidden; visibility: hidden;
}
.jr-win .jr-win__bar { height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 2px solid var(--line); font-size: 27px; font-weight: 600; color: var(--body); }
.jr-win .jr-win__bar img { width: 32px; height: 32px; object-fit: contain; }
.jr-win .jr-win__tile { position: relative; margin: 14px 18px 0; height: 140px; border-radius: 18px; display: grid; place-items: center; overflow: hidden; background: var(--tint); }
.jr-win .jr-win__tile::after { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--line) 55%, var(--surface)); opacity: calc(var(--a1, 0) * .85); }
.jr-win .jr-win__tile img { position: relative; z-index: 1; height: 124px; width: 124px; object-fit: contain; filter: drop-shadow(0 10px 10px var(--jr-art-shadow)); }
.jr-win .jr-win__foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 0; }
.jr-win .jr-win__price { font-size: 34px; font-weight: 700; letter-spacing: -.02em; }

.jr-pill { position: relative; height: 52px; width: 172px; border-radius: 26px; font-size: 28px; font-weight: 650; }
.jr-pill > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; border-radius: 26px; opacity: 0; }
.jr-pill i { width: 12px; height: 12px; border-radius: 50%; display: block; background: var(--ok); }
.jr-pill .jr-p-left, .jr-pill .jr-p-three { background: var(--ok-tint); color: var(--ok); }
.jr-pill .jr-p-sold { background: var(--accent); color: var(--white); }
.jr-pill .jr-p-out { background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 2px var(--line); }
.jr-pill .jr-p-edit { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 3px var(--accent); font-variant-numeric: tabular-nums; }
.jr-pill .jr-p-edit b { display: inline-block; width: 3px; height: 28px; background: var(--accent); margin-left: 2px; }
.jr-pill.is-stale i { background: var(--warn); }
.jr-pill.is-stale .jr-p-left { background: var(--warn-tint); color: var(--warn); }

.jr-ripple { border-radius: 50%; border: 4px solid color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); opacity: 0; pointer-events: none; }
.jr-pulse { width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 18%, transparent); opacity: 0; }
.jr-route { fill: none; stroke: color-mix(in srgb, var(--accent) 34%, transparent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 12 16; }

.jr-clock {
  height: 66px; width: 236px; margin-left: -118px; border-radius: 33px;
  background: color-mix(in srgb, var(--white) 92%, transparent);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--ink) 40%, transparent), 0 0 0 2px var(--white);
  font-size: 30px; font-weight: 650; font-variant-numeric: tabular-nums; visibility: hidden;
}
.jr-clock svg { display: block; }

.jr-ticket {
  width: 330px; height: 226px; margin: -113px 0 0 -165px; border-radius: 26px; background: var(--white); padding: 22px 24px; visibility: hidden;
  box-shadow: 0 36px 80px -40px color-mix(in srgb, var(--ink) 50%, transparent), 0 2px 6px color-mix(in srgb, var(--ink) 5%, transparent);
  -webkit-mask: radial-gradient(circle 12px at 0 150px, transparent 11px, #000 12px) 0 0 / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 150px, transparent 11px, #000 12px) 100% 0 / 51% 100% no-repeat;
  mask: radial-gradient(circle 12px at 0 150px, transparent 11px, #000 12px) 0 0 / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 150px, transparent 11px, #000 12px) 100% 0 / 51% 100% no-repeat;
}
.jr-ticket .jr-tk__h { display: flex; align-items: center; gap: 12px; font-size: 25px; font-weight: 600; color: var(--muted); }
.jr-ticket .jr-tk__h img { width: 34px; height: 34px; object-fit: contain; }
.jr-ticket .jr-tk__b { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.jr-ticket .jr-tk__thumb { width: 84px; height: 84px; border-radius: 18px; background: var(--surface); display: grid; place-items: center; }
.jr-ticket .jr-tk__thumb img { width: 74px; height: 74px; object-fit: contain; }
.jr-ticket .jr-tk__amt { font-size: 40px; font-weight: 700; letter-spacing: -.02em; }
.jr-ticket .jr-tk__perf { position: absolute; left: 24px; right: 24px; top: 150px; border-top: 3px dashed var(--line-strong); }
.jr-ticket .jr-tk__f { position: absolute; left: 24px; right: 24px; top: 166px; display: flex; justify-content: space-between; font-size: 22px; color: var(--muted); }

.jr-stamp { padding: 6px 26px 8px; border: 6px solid var(--bad); border-radius: 16px; color: var(--bad); font-size: 44px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; background: color-mix(in srgb, var(--white) 75%, transparent); visibility: hidden; }
.jr-bubble { padding: 22px 30px; border-radius: 36px; background: var(--line); font-size: 32px; font-weight: 500; color: var(--ink); white-space: nowrap; visibility: hidden; }
.jr-bubble::after { content: ''; position: absolute; left: -8px; bottom: 0; width: 30px; height: 30px; background: var(--line); border-bottom-right-radius: 24px; clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.jr-refund { height: 72px; padding: 0 30px; border-radius: 36px; background: var(--white); display: flex; align-items: center; gap: 12px; font-size: 30px; font-weight: 650; white-space: nowrap; visibility: hidden; box-shadow: 0 18px 36px -20px color-mix(in srgb, var(--ink) 45%, transparent), 0 0 0 2px var(--white); }

.jr-review {
  width: 760px; margin-left: -380px; padding: 36px 44px 40px; border-radius: 30px; background: var(--white); visibility: hidden;
  box-shadow: 0 50px 110px -50px color-mix(in srgb, var(--ink) 50%, transparent), 0 2px 6px color-mix(in srgb, var(--ink) 5%, transparent);
}
.jr-review .jr-rv__h { display: flex; align-items: center; gap: 16px; font-size: 27px; font-weight: 600; color: var(--muted); }
.jr-review .jr-rv__h img { width: 40px; height: 40px; object-fit: contain; }
.jr-review .jr-rv__stars { display: flex; gap: 14px; margin-top: 22px; }
.jr-review .jr-rv__st { position: relative; display: block; width: 70px; height: 70px; }
.jr-review .jr-rv__st svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.jr-review .jr-rv__fill { position: absolute; inset: 0; }
.jr-review .jr-rv__q { font-size: 40px; font-weight: 650; letter-spacing: -.02em; margin-top: 22px; line-height: 1.2; }

.jr-cursor { width: 58px; height: 70px; visibility: hidden; filter: drop-shadow(0 6px 8px color-mix(in srgb, var(--ink) 25%, transparent)); }
.jr-cursor path { fill: var(--ink); stroke: var(--white); stroke-width: 2.2; stroke-linejoin: round; }
.jr-rewind { width: 132px; height: 132px; margin-left: -66px; border-radius: 50%; background: var(--white); display: grid; place-items: center; box-shadow: 0 26px 50px -24px color-mix(in srgb, var(--ink) 45%, transparent); visibility: hidden; }
.jr-plus3 { height: 76px; padding: 0 28px; border-radius: 38px; background: var(--accent); color: var(--white); font-size: 34px; font-weight: 700; display: flex; align-items: center; gap: 8px; white-space: nowrap; box-shadow: 0 20px 40px -18px color-mix(in srgb, var(--accent) 70%, transparent); visibility: hidden; }
.jr-flash { width: 1100px; height: 1100px; margin: -550px 0 0 -550px; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--white) 90%, transparent), color-mix(in srgb, var(--accent) 22%, transparent) 30%, color-mix(in srgb, var(--accent) 8%, transparent) 55%, transparent); }

.jr-pin { width: 128px; height: 128px; margin: -64px 0 0 -64px; border-radius: 50%; background: var(--white); display: grid; place-items: center; visibility: hidden; box-shadow: 0 26px 50px -22px color-mix(in srgb, var(--ink) 45%, transparent), 0 0 0 2px var(--white); }
.jr-pin .jr-pin__a, .jr-pin .jr-pin__b { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; }
.jr-pin .jr-pin__b { background: var(--ok); opacity: 0; }

/* The box's faces are the kraft texture under a light overlay; the cut edges catch the light. */
.jr-kf { stroke: var(--jr-art-kraft-edge); stroke-width: 1.5; stroke-linejoin: round; }
.jr-kedge { stroke: color-mix(in srgb, var(--white) 55%, transparent); stroke-width: 2; stroke-linecap: round; }
.jr-boxAO { fill: var(--ink); }
.jr-tapeShade { fill: var(--ink); opacity: .26; }

/* The delivery map: a quiet city under the route, in the colours of a phone's maps app. */
.jr-map, .jr-track, .jr-org, .jr-ring, .jr-trk, .jr-ship { visibility: hidden; }
.jr-m-land { fill: var(--jr-art-map-land); }
.jr-m-bldg { fill: var(--jr-art-map-bldg); }
.jr-m-park { fill: var(--jr-art-map-park); }
.jr-m-water { fill: none; stroke: var(--jr-art-map-water); stroke-width: 74; }
.jr-m-case, .jr-m-road { fill: none; }
.jr-m-case { stroke: var(--jr-art-map-casing); stroke-width: 22; }
.jr-m-road { stroke: var(--white); stroke-width: 16; }
.jr-m-case.is-wide { stroke-width: 34; }
.jr-m-road.is-wide { stroke-width: 28; }
.jr-m-label { font: 600 17px var(--font); letter-spacing: .03em; fill: var(--jr-art-map-label); }
.jr-rt-case { fill: none; stroke: var(--white); stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; }
.jr-rt-todo { fill: none; stroke: color-mix(in srgb, var(--accent) 50%, transparent); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1 19; }
.jr-rt-done { fill: none; stroke: var(--accent); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.jr-org circle { fill: var(--white); stroke: var(--line-strong); stroke-width: 2; }
.jr-ring { fill: none; stroke: var(--accent); stroke-width: 4; }
.jr-trk { fill: var(--white); stroke: var(--accent); stroke-width: 6; }
.jr-world > .jr-ship { left: 540px; top: 1580px; }
.jr-ship {
  height: 66px; border-radius: 33px; overflow: hidden; white-space: nowrap;
  background: var(--white); box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--ink) 40%, transparent), 0 0 0 2px var(--white);
  font-size: 30px; font-weight: 650;
}
.jr-ship > span { display: flex; align-items: center; justify-content: center; gap: 12px; height: 100%; padding: 0 30px; }
.jr-ship .jr-ship__b { position: absolute; inset: 0; background: var(--ok); color: var(--white); opacity: 0; }
.jr-ship svg { display: block; }


/* ---------- small screens ---------- */

@media (max-width: 900px) {
  .jr-ch { padding: var(--s-8) 0; }
  .jr-band > .jr-ch:has(+ .jr-ch--cta) { padding-bottom: var(--s-6); }
  .jr-band > .jr-ch.jr-ch--cta { padding-block: var(--s-6) var(--s-5); }
  .jr-ch.jr-ch--intro { padding-block: clamp(72px, 11vh, 128px) clamp(96px, 14vh, 160px); }
  .jr-ch__grid, .jr-ch--center .jr-ch__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); text-align: left; justify-items: stretch; }
  .jr-ch--flip .jr-copy { order: 0; }
  .jr-ch--center .jr-copy { align-items: flex-start; }
  .jr-copy { max-width: none; }
  .jr-h { font-size: clamp(28px, 7.6vw, 40px); }
  .jr-p { font-size: var(--t-base); }
  .jr-visual, .jr-ch--center .jr-visual { max-width: 460px; }
  .jr-ch--cta .jr-copy { text-align: center; align-items: center; }
  .jr-ch--cta .jr-h { font-size: clamp(30px, 7.6vw, 40px); line-height: 1.1; }
}