/* Joint story ("A day in the flow of money"): the joint lane's own styles on top of the kit (kit.css).
   Opener and close in the cover's night world, the land layer, the Atlas field, case and audience cards,
   the start screen and the end card. Phone variants under .pp-world-phone. No CSS transitions inside
   scenes: motion is tweened on the engine clock, so films are frame-exact. */

/* ---------------------------------------------------------------- land layer (flyers during the dissolve) */
.pp-world.jl-fly { background: transparent !important; overflow: visible !important; z-index: 3; }

/* ---------------------------------------------------------------- the cover world (opener, pilot close) */
.jl-cover { position: absolute; inset: 0; }
.jl-logo { position: absolute; height: 34px; width: auto; }
.jl-cover-eyebrow { position: absolute; font-size: 17px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ad-light); white-space: nowrap; }
.jl-cover-title { position: absolute; font-size: 96px; line-height: 1.02; font-weight: 700; letter-spacing: -.035em; color: #fff; }
.jl-cover-lines { position: absolute; display: flex; flex-direction: column; gap: 16px; }
.jl-cover-line { display: flex; align-items: baseline; gap: 18px; font-size: 32px; font-weight: 600; letter-spacing: -.01em; color: var(--ad-ice); white-space: nowrap; }
.jl-cover-line b { color: #fff; font-weight: 700; }
.jl-cover-line i { font-style: normal; font-size: 17px; font-weight: 700; letter-spacing: .08em; color: var(--ad-light); min-width: 74px; font-variant-numeric: tabular-nums; }
.jl-cover-sub { position: absolute; font-size: 30px; line-height: 1.35; font-weight: 600; color: var(--ad-ice); }
.jl-cover-foot { position: absolute; font-size: 20px; font-weight: 700; letter-spacing: .06em; color: var(--ad-muted); }
.jl-lockups { position: absolute; display: flex; align-items: center; gap: 44px; }
.jl-lockups img { height: 46px; width: auto; display: block; }
.pp-world-phone .jl-logo { height: 22px; }
.pp-world-phone .jl-cover-eyebrow { font-size: 10.5px; letter-spacing: .14em; }
.pp-world-phone .jl-cover-title { font-size: 40px; }
.pp-world-phone .jl-cover-lines { gap: 9px; }
.pp-world-phone .jl-cover-line { font-size: 16px; gap: 10px; }
.pp-world-phone .jl-cover-line i { font-size: 10px; min-width: 40px; }
.pp-world-phone .jl-cover-sub { font-size: 16px; }
.pp-world-phone .jl-cover-foot { font-size: 12px; }
.pp-world-phone .jl-lockups { gap: 18px; flex-direction: column; align-items: flex-start; }
.pp-world-phone .jl-lockups img { height: 28px; }

/* ---------------------------------------------------------------- the Atlas field (constellation on the Atlas's points) */
.jl-mapbox { position: absolute; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .07) inset, 0 30px 80px rgba(0, 0, 0, .45); }
.jl-rlabel { position: absolute; display: grid; grid-template-columns: auto auto auto; align-items: center; column-gap: 9px; row-gap: 2px; padding: 9px 14px 10px; border-radius: 10px;
  background: rgba(16, 21, 40, .92); border: 1.5px solid var(--hue, #7394ff); box-shadow: 0 0 0 4px rgba(255, 255, 255, .03), 0 0 28px color-mix(in srgb, var(--hue, #7394ff) 45%, transparent); white-space: nowrap; z-index: 4; }
.jl-rlabel .jl-rdot { width: 9px; height: 9px; border-radius: 50%; }
.jl-rlabel b { font-size: 17px; font-weight: 700; color: #fff; }
.jl-rlabel em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #b9c3e6; padding: 2px 6px; border-radius: 5px; border: 1px solid rgba(185, 195, 230, .35); }
.jl-rlabel small { grid-column: 2 / span 2; font-size: 13px; color: #8f9abf; }
.pp-world-phone .jl-rlabel { padding: 5px 8px 6px; column-gap: 5px; border-radius: 7px; }
.pp-world-phone .jl-rlabel .jl-rdot { width: 6px; height: 6px; }
.pp-world-phone .jl-rlabel b { font-size: 11px; }
.pp-world-phone .jl-rlabel em { font-size: 7.5px; padding: 1px 4px; }
.pp-world-phone .jl-rlabel small { font-size: 9px; }

/* ---------------------------------------------------------------- cards on the deep field */
.jl-card { position: absolute; border-radius: 20px; background: rgba(13, 19, 48, .94); border: 1px solid var(--ad-line-2); box-shadow: 0 24px 70px rgba(0, 0, 0, .5); padding: 26px 30px; color: var(--ad-text); }
.jl-card .jl-micro { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ad-light); }
.jl-card h4 { margin: 8px 0 0; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.jl-card .jl-row { display: flex; align-items: center; gap: 10px; }
.pp-world-phone .jl-card { border-radius: 12px; padding: 12px 13px; }
.pp-world-phone .jl-card .jl-micro { font-size: 9px; letter-spacing: .12em; }
.pp-world-phone .jl-card h4 { font-size: 15px; margin-top: 4px; }

/* the copilot's draft: statements tagged Fact or Hypothesis, with citation chips */
.jl-draft { margin-top: 18px; border-radius: 14px; background: rgba(0, 77, 237, .08); border: 1px solid rgba(115, 148, 255, .28); padding: 16px 18px 6px; }
.jl-draft-head { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: #cfdcff; margin-bottom: 8px; }
.jl-draft-head img { width: 20px; height: 20px; }
.jl-draft-head span { margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ad-light); }
.jl-st { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: start; padding: 9px 0 10px; border-top: 1px solid rgba(115, 148, 255, .14); }
.jl-st:first-of-type { border-top: 0; }
.jl-tag { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; margin-top: 2px; }
.jl-tag.is-fact { background: rgba(115, 148, 255, .18); color: #cfdcff; }
.jl-tag.is-hyp { background: rgba(255, 181, 71, .16); color: #ffd08a; }
.jl-st p { margin: 0; font-size: 19px; line-height: 1.4; font-weight: 600; color: var(--ad-text); }
.jl-cite { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: 1px; }
.jl-cite i { font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 5px; background: #004ded; color: #fff; }
.pp-world-phone .jl-draft { margin-top: 9px; border-radius: 9px; padding: 8px 9px 2px; }
.pp-world-phone .jl-draft-head { font-size: 10px; margin-bottom: 3px; gap: 6px; }
.pp-world-phone .jl-draft-head img { width: 13px; height: 13px; }
.pp-world-phone .jl-draft-head span { font-size: 8px; }
.pp-world-phone .jl-st { column-gap: 7px; padding: 5px 0 6px; }
.pp-world-phone .jl-tag { font-size: 7px; padding: 2px 4px; border-radius: 4px; }
.pp-world-phone .jl-st p { font-size: 10.5px; }
.pp-world-phone .jl-cite i { font-size: 7px; padding: 1px 3px; }

/* list and audience chips */
.jl-chip { position: absolute; display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 14px; white-space: nowrap; z-index: 5;
  background: rgba(13, 19, 48, .96); border: 1px solid var(--ad-line-2); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); font-size: 18px; font-weight: 700; color: #fff; }
.jl-chip small { font-size: 14px; color: var(--ad-muted); font-weight: 600; }
.jl-chip .jl-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(0, 77, 237, .25); color: #cfdcff; }
.jl-chip .jl-ico svg { width: 18px; height: 18px; }
.jl-chip.is-mint { border-color: rgba(61, 220, 151, .55); box-shadow: 0 0 0 4px rgba(61, 220, 151, .08), 0 16px 40px rgba(0, 0, 0, .45); }
.jl-chip.is-mint .jl-ico { background: rgba(61, 220, 151, .2); color: #3ddc97; }
.jl-chip.is-hold { border-color: rgba(184, 194, 224, .6); }
.jl-chip.is-hold .jl-ico { background: rgba(184, 194, 224, .2); color: #dfe5f7; }
.jl-chip .jl-col { display: flex; flex-direction: column; gap: 2px; }
.pp-world-phone .jl-chip { padding: 6px 9px; gap: 7px; border-radius: 9px; font-size: 10.5px; }
.pp-world-phone .jl-chip small { font-size: 8.5px; }
.pp-world-phone .jl-chip .jl-ico { width: 18px; height: 18px; border-radius: 5px; }
.pp-world-phone .jl-chip .jl-ico svg { width: 11px; height: 11px; }

/* the next attempt strip (m04 close): device -> gate -> account, held live */
.jl-next { position: absolute; }
.jl-next-at { position: absolute; font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ad-light); white-space: nowrap; }
.pp-world-phone .jl-next-at { font-size: 9px; letter-spacing: .12em; }

/* ---------------------------------------------------------------- the start screen (cover world behind the menu) */
.ps.jl-start { background: #04060f; }
.ps.jl-start::before { opacity: 0 !important; }
.jl-start-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.jl-start-sky .pp-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.jl-start-sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 6, 15, .78) 0%, rgba(4, 6, 15, .42) 46%, rgba(4, 6, 15, 0) 72%); }
.ps.jl-start .ps-top, .ps.jl-start .ps-main, .ps.jl-start .ps-foot { z-index: 1; }
.ps.jl-start .ps-preview { display: none; }
.ps.jl-start .ps-track { background: rgba(10, 15, 36, .72); backdrop-filter: blur(6px); }
.ps.jl-start .ps-track.on { background: rgba(20, 31, 70, .82); }
.jl-start-line { margin: 0 0 4px; color: var(--ice, #cfdcff); font-size: clamp(17px, 1.3vw, 26px); line-height: 1.45; max-width: 34em; font-weight: 600; }
/* Wide and laptop screens: the preview is hidden here, so its right-hand padding goes; the three stories sit in
   one row and the stories, the lengths, Start and Play on its own all fit above the fold down to 1366 x 768. */
@media (min-width: 900px) {
  .ps.jl-start .ps-main { padding: clamp(10px, 2.2vh, 44px) 0; }
  .ps.jl-start .ps-main .ps-h1 { font-size: clamp(34px, 3.3vw, 66px); max-width: none; white-space: nowrap; margin: .3em 0 .2em; }
  .ps.jl-start .ps-label { margin: clamp(12px, 2.2vh, 32px) 0 8px; }
  .ps.jl-start .ps-tracks { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1140px; }
  .ps.jl-start .ps-track { padding: clamp(14px, 1.05vw, 22px); column-gap: 14px; }
  .ps.jl-start .ps-actions { margin-top: clamp(14px, 2.4vh, 32px); }
}
/* Phones: the whole menu and Start fit in 390 x 844 (a visitor from the QR code starts without scrolling);
   the tagline repeats the first story card, so it goes; the cards are tighter; Start stays pinned at the bottom. */
@media (max-width: 640px) {
  .ps.jl-start .ps-main { padding: 12px 0 0; }
  .ps.jl-start .ps-main .ps-h1 { font-size: 30px; margin: .25em 0 .1em; }
  .ps.jl-start .jl-start-line { display: none; }
  .ps.jl-start .ps-label { margin: 12px 0 6px; }
  .ps.jl-start .ps-tracks { gap: 8px; }
  .ps.jl-start .ps-track { padding: 12px 14px; row-gap: 2px; }
  .ps.jl-start .ps-track .ps-meta { display: none; }
  .ps.jl-start .ps-track .ps-tl { font-size: 13px; line-height: 1.35; }
  .ps.jl-start .ps-actions { position: sticky; bottom: 0; z-index: 2; margin-top: 12px; padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(4, 6, 15, 0), rgba(4, 6, 15, .92) 30%); }
}
@media (max-width: 640px) { .jl-start-sky::after { background: linear-gradient(180deg, rgba(4, 6, 15, .2) 0%, rgba(4, 6, 15, .78) 60%); } }

/* ---------------------------------------------------------------- the end card in the night world */
.pp-end.jl-end { background: #04060f; }
.jl-end-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.jl-end-sky .pp-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.jl-end-sky::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, rgba(4, 6, 15, .62), rgba(4, 6, 15, .1) 70%); }
.pp-end.jl-end .pp-end-card { position: relative; z-index: 1; }
/* The card sits above the horizon, so the light path rises below the buttons, never through them. */
.pp-end.jl-end { align-items: flex-start; padding-top: max(24px, 13vh); }
@media (max-width: 600px) { .pp-end.jl-end { padding-top: max(16px, 5vh); } }
.jl-end-lockups { display: flex; gap: 28px; justify-content: center; align-items: center; margin: 18px 0 6px; }
.jl-end-lockups img { height: 34px; width: auto; }
@media (max-width: 600px) { .jl-end-lockups { flex-direction: column; gap: 12px; max-width: 100%; } .jl-end-lockups img { height: 26px; max-width: 100%; } }
.jl-end-foot { margin-top: 18px; color: #a3adca; font-weight: 700; letter-spacing: .06em; }

/* the lit group's area (highlight target) */
.jl-region-hl { position: absolute; pointer-events: none; }

/* Tessera moments: event words fit five events on one strip */
.jl-tess .ld-sev-what { width: 176px; font-size: 16px; }
.pp-world-phone.jl-tess .ld-sev-what { width: 290px; font-size: inherit; }

/* the other groups on the map: named, but quiet */
.jl-rlabel.is-quiet { background: rgba(16, 21, 40, .7); border-color: rgba(255, 255, 255, .12); box-shadow: none; }
.jl-rlabel.is-quiet b { color: #c9d1ea; font-size: 15px; }
/* the rule line label sits inside the account card */
.jl-m04 .ld-meter-rule span { left: auto; right: 6px; }

/* Tessera moments, wide: the time labels sit on a small dark plate, so the attention arcs (drawn under
   the labels) pass behind them and never cross a time */
.pp-world-wide.jl-tess .ld-sev-time { padding: 2px 9px; border-radius: 7px; background: rgba(7, 11, 28, .94); }

/* Tessera moments, phone: the key event's strip under the hour (the event rises into it; its tag below) */
.jl-keyev { position: absolute; border-radius: 14px; background: rgba(13, 19, 48, .9); border: 1px solid var(--ad-line-2); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.jl-keyev-tag { position: absolute; left: 50px; top: 70px; max-width: 292px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 7px;
  color: var(--ad-ice); background: rgba(115, 148, 255, .12); border: 1px solid rgba(115, 148, 255, .4); }
.jl-keyev-tag.tone-ok { color: var(--ad-approve); background: rgba(61, 220, 151, .08); border-color: rgba(61, 220, 151, .35); }
.jl-keyev-tag.tone-risk { color: var(--ad-risk); background: rgba(255, 138, 76, .1); border-color: rgba(255, 138, 76, .4); }

/* the offer inside the customer's app (m09 and m12 closes): a picture, a headline and one plain line */
.ld-app .jl-offer { margin: 14px 18px 0; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 1px 0 #ebe4d8, 0 14px 30px rgba(23, 27, 44, .1); border: 1px solid #efe8dc; }
.ld-app .jl-offer-art { height: 150px; display: block; width: 100%; }
.ld-app .jl-offer-body { padding: 14px 16px 16px; }
.ld-app .jl-offer-k { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #a9533a; }
.ld-app .jl-offer-h { margin-top: 5px; font-size: 21px; line-height: 1.18; font-weight: 800; letter-spacing: -.015em; color: #171b2c; }
.ld-app .jl-offer-p { margin-top: 6px; font-size: 14.5px; line-height: 1.4; color: #4d5672; }
.ld-app .jl-offer-badge { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 800; color: #0b6b45; background: #eafaf2; opacity: 0; }
.ld-app .jl-offer-badge i { width: 14px; height: 14px; border-radius: 50%; background: #17b077; display: grid; place-items: center; }
.ld-app .jl-offer-badge i::after { content: ""; width: 6px; height: 3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(0.5px, -1px); }
.ld-app .ld-app-title.jl-hi { font-size: 22px; padding-top: 14px; }

/* ---------------------------------------------------------------- J6.1: one flow of events, two products */
.jl-flow-head { position: absolute; }
.jl-flow-head .ld-headline { margin-top: 14px; }
.jl-flow-box { position: absolute; pointer-events: none; }
.jl-flow-prod { position: absolute; text-align: center; }
.jl-flow-prod img { display: block; height: 34px; width: auto; margin: 0 auto 12px; }
.jl-flow-prod p { margin: 0; font-size: 19px; line-height: 1.35; font-weight: 600; color: var(--ad-ice); }
.jl-flow .jl-flow-hub, .jl-flow .jl-flow-end { border-color: rgba(115, 148, 255, .62); box-shadow: 0 0 0 4px rgba(115, 148, 255, .07), 0 0 34px rgba(74, 108, 255, .28); }
.jl-flow .jl-flow-end .ld-glyph { background: rgba(61, 220, 151, .16); color: var(--ad-approve, #3ddc97); }
.pp-world-phone .jl-flow-head .ld-headline { margin-top: 6px; }
.pp-world-phone .jl-flow-prod { padding: 8px 8px 9px; border-radius: 10px; background: rgba(13, 19, 48, .94); border: 1px solid var(--ad-line-2); }
.pp-world-phone .jl-flow-prod img { height: 15px; margin-bottom: 6px; }
.pp-world-phone .jl-flow-prod p { font-size: 10.5px; line-height: 1.35; }