/* ============================================================
   JOURNAL ARTICLES, case-study style  (journal-*.html)
   ------------------------------------------------------------
   The articles borrow the case studies' language (big type, full-bleed
   plates, red counters, mosaics) and add a few pieces of their own:
   a reading rail, step timelines, checklists, a bandwidth calculator,
   a filterable calendar. Every piece is plain HTML first; journal.js only
   adds behaviour, so the text is all in the page for readers and crawlers.
   Logical properties throughout, so the Arabic pages need no overrides.
   ============================================================ */

/* ---- reading progress + chapter rail --------------------------------- */
.jx-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:900;pointer-events:none}
.jx-progress i{display:block;height:100%;background:var(--red);transform:scaleX(var(--p,0));transform-origin:0 50%}
[dir="rtl"] .jx-progress i{transform-origin:100% 50%}

.jx-rail{position:fixed;inset-inline:0;top:var(--jx-top,0);z-index:790;display:flex;align-items:center;gap:18px;
  padding:0 var(--pad);height:46px;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);opacity:0;transform:translateY(-100%);pointer-events:none;
  transition:opacity .35s var(--ease),transform .45s var(--ease),top .45s var(--ease)}
.jx-rail.is-on{opacity:1;transform:none;pointer-events:auto}
.jx-rail__k{flex:none;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--red);font-weight:600;white-space:nowrap}
.jx-rail ol{list-style:none;margin:0;padding:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;min-width:0;height:100%;align-items:stretch}
.jx-rail ol::-webkit-scrollbar{display:none}
.jx-rail li{flex:none;display:flex}
.jx-rail a{position:relative;display:flex;gap:8px;align-items:center;padding:0 12px;white-space:nowrap;
  font-size:13px;color:var(--muted);transition:color .25s}
.jx-rail a b{font-weight:600;font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted)}
.jx-rail a::after{content:'';position:absolute;inset-inline:12px;bottom:-1px;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease)}
.jx-rail a:hover,.jx-rail a.is-cur{color:var(--ink)}
.jx-rail a.is-cur b{color:var(--red)}
.jx-rail a.is-cur::after{transform:scaleX(1)}
[dir="rtl"] .jx-rail a::after{transform-origin:100% 50%}
@media (max-width:700px){.jx-rail__k{display:none}.jx-rail{height:42px}}
@media (prefers-reduced-motion:reduce){.jx-rail{transition:opacity .2s}}

/* ---- hero ----------------------------------------------------------- */
.jx-hero .cs-hero__title{font-size:clamp(32px,5.6vw,86px);max-width:21ch}
.jx-hero .cs-hero__lead{max-width:50ch}
.jx-hero--split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,64px);align-items:end}
.jx-hero--split .cs-meta{grid-column:1 / -1}
.jx-hero__card{position:relative;border-radius:18px;overflow:hidden;background:var(--black);aspect-ratio:4/5;
  box-shadow:0 30px 80px rgba(0,0,0,.18)}
.jx-hero__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jx-hero__card::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 55%)}
.jx-hero__badge{position:absolute;z-index:2;inset-inline-start:18px;bottom:18px;color:#fff;font-weight:700;letter-spacing:-.03em;
  font-size:clamp(20px,2.2vw,30px);line-height:1}
.jx-hero__badge small{display:block;margin-top:6px;font-size:11.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.75)}
@media (max-width:860px){.jx-hero--split{grid-template-columns:1fr}.jx-hero__card{aspect-ratio:16/10}}

/* the answer, big, right under the hero (same words as the article's lead) */
.jx-sum{padding:clamp(40px,6vw,88px) var(--pad) clamp(10px,2vw,24px)}
.jx-sum__in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:.3fr 1fr;gap:clamp(18px,4vw,64px);align-items:start}
.jx-sum__k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--red);font-weight:600;padding-top:.7em}
.jx-sum__t{font-size:clamp(21px,2.5vw,36px);line-height:1.28;letter-spacing:-.025em;font-weight:500;color:var(--ink);max-width:40ch}
.jx-sum__t strong{font-weight:600}
@media (max-width:760px){.jx-sum__in{grid-template-columns:1fr}.jx-sum__k{padding-top:0}}

/* ---- chapters: heading holds the left while the text scrolls past ----- */
.jx-ch{scroll-margin-top:56px;padding:clamp(54px,7.5vw,108px) var(--pad)}
.jx-ch--grey{background:var(--grey)}
.jx-ch__in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:.38fr 1fr;gap:clamp(24px,5vw,84px);align-items:start}
.jx-ch__head{position:sticky;top:120px}
.jx-ch__n{display:block;font-size:clamp(34px,4vw,60px);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--red);margin-bottom:14px;font-variant-numeric:tabular-nums}
.jx-ch__h{font-size:clamp(22px,2.5vw,36px);font-weight:600;letter-spacing:-.03em;line-height:1.08}
.jx-ch__body{min-width:0}
.jx-ch__body>*{max-width:64ch}
.jx-ch__body>.wide{max-width:none}
@media (max-width:860px){.jx-ch__in{grid-template-columns:1fr}.jx-ch__head{position:static}.jx-ch__n{font-size:34px}}

.jx-prose p{font-size:clamp(16px,1.3vw,19px);line-height:1.72;color:#1a1a1c;margin:0 0 1.3em}
.jx-prose p:first-child:not(.wide)::first-line{font-weight:500}
.jx-prose strong{font-weight:600;color:var(--ink)}
.jx-prose h3{font-size:clamp(18px,1.8vw,24px);font-weight:600;letter-spacing:-.02em;margin:1.7em 0 .55em}
.jx-prose a{color:var(--red);border-bottom:1px solid rgba(232,30,37,.35);transition:border-color .3s}
.jx-prose a:hover{border-color:var(--red)}
.jx-prose ul,.jx-prose ol{margin:0 0 1.35em;padding-inline-start:1.25em}
.jx-prose li{font-size:clamp(15px,1.2vw,17.5px);line-height:1.66;color:#1a1a1c;margin-bottom:.5em}
.jx-prose ul li{list-style:disc}.jx-prose ol li{list-style:decimal}
.jx-prose .svc__table{margin:1.4em 0 1.8em}
.jx-prose .svc__note{margin:1.4em 0}
.drk .jx-prose p,.drk .jx-prose li{color:var(--d-muted)}

/* ---- scroll reveal (only once journal.js has switched it on) ---------- */
.jx-on [data-jx]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.jx-on [data-jx].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.jx-on [data-jx]{opacity:1;transform:none;transition:none}}

/* ---- plate with a caption line ---------------------------------------- */
.jx-cap{display:block;max-width:1180px;margin:12px auto 0;padding:0 var(--pad);font-size:13px;line-height:1.5;color:var(--muted)}

/* ---- cards (a list that wants to be scanned) -------------------------- */
.jx-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:clamp(12px,1.4vw,18px);
  list-style:none;margin:1.4em 0 1.8em;padding:0}
.jx-cards.is-2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.jx-cards.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.jx-cards.is-3{grid-template-columns:1fr}}
.jx-card{position:relative;border:1.5px solid var(--line);border-radius:14px;background:var(--white);padding:clamp(18px,2vw,26px);
  transition:transform .4s var(--ease),border-color .3s,box-shadow .4s var(--ease)}
.jx-card:hover{transform:translateY(-4px);border-color:var(--red);box-shadow:0 18px 40px rgba(0,0,0,.08)}
.jx-card__n{display:block;font-size:12px;font-weight:700;color:var(--red);letter-spacing:.04em;margin-bottom:12px;font-variant-numeric:tabular-nums}
.jx-card__t{display:block;font-size:clamp(16px,1.35vw,19px);font-weight:600;letter-spacing:-.015em;line-height:1.25;margin-bottom:8px;color:var(--ink)}
.jx-card__p{font-size:14.5px;line-height:1.58;color:var(--muted)}
.jx-ch--grey .jx-card{background:var(--white)}

/* ---- steps: a timeline whose line fills as you read ------------------- */
.jx-steps{--p:0;position:relative;list-style:none;margin:1.6em 0 1.8em;padding:0}
.jx-steps::before,.jx-steps::after{content:'';position:absolute;inset-inline-start:17px;top:6px;bottom:6px;width:2px;background:var(--line)}
.jx-steps::after{background:var(--red);transform:scaleY(var(--p));transform-origin:50% 0;transition:transform .25s linear}
.jx-step{position:relative;display:grid;grid-template-columns:36px 1fr;gap:clamp(14px,2vw,26px);padding:0 0 clamp(22px,2.6vw,34px)}
.jx-step:last-child{padding-bottom:0}
.jx-step__n{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--white);
  border:2px solid var(--line);font-size:13px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;
  transition:background .35s var(--ease),border-color .35s,color .35s,transform .35s var(--ease)}
.jx-ch--grey .jx-step__n{background:var(--grey)}
.jx-step.is-on .jx-step__n{background:var(--red);border-color:var(--red);color:#fff;transform:scale(1.08)}
.jx-step__t{display:block;font-size:clamp(17px,1.5vw,21px);font-weight:600;letter-spacing:-.02em;line-height:1.25;margin:5px 0 8px;color:var(--ink)}
.jx-step__p{font-size:clamp(15px,1.2vw,17px);line-height:1.65;color:var(--muted)}
.jx-step__p strong{color:var(--ink)}
.jx-step__k{display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--red);font-weight:600;margin-top:12px}

/* ---- checklist: tick it off, it remembers ----------------------------- */
.jx-check{border:1.5px solid var(--line);border-radius:16px;background:var(--white);padding:clamp(18px,2.4vw,32px);margin:1.4em 0 1.8em}
.jx-check__top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.jx-check__title{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--red);font-weight:600}
.jx-check__count{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.jx-check__bar{height:4px;border-radius:4px;background:var(--line);overflow:hidden;margin-bottom:clamp(8px,1.4vw,16px)}
.jx-check__bar i{display:block;height:100%;background:var(--red);transform:scaleX(var(--p,0));transform-origin:0 50%;transition:transform .45s var(--ease)}
[dir="rtl"] .jx-check__bar i{transform-origin:100% 50%}
.jx-check__list{list-style:none;margin:0;padding:0}
.jx-check__row{display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start;padding:clamp(11px,1.3vw,15px) 0;border-top:1px solid var(--line);cursor:pointer}
.jx-check__row:first-child{border-top:0}
.jx-check__row input{position:absolute;opacity:0;pointer-events:none}
.jx-check__box{width:24px;height:24px;border-radius:7px;border:2px solid #c9c9cf;display:grid;place-items:center;margin-top:1px;
  transition:background .25s,border-color .25s,transform .25s var(--ease)}
.jx-check__box svg{width:14px;height:14px;opacity:0;transform:scale(.4);transition:opacity .2s,transform .3s var(--ease);color:#fff}
.jx-check__row:hover .jx-check__box{border-color:var(--red)}
.jx-check__row input:focus-visible+.jx-check__box{outline:2px solid var(--ink);outline-offset:2px}
.jx-check__row input:checked+.jx-check__box{background:var(--red);border-color:var(--red)}
.jx-check__row input:checked+.jx-check__box svg{opacity:1;transform:none}
.jx-check__txt{font-size:clamp(15px,1.2vw,17px);line-height:1.55;color:var(--muted)}
.jx-check__txt b{color:var(--ink);font-weight:600;transition:color .25s}
.jx-check__row input:checked~.jx-check__txt b{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(232,30,37,.55)}
.jx-check__foot{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(12px,1.6vw,20px);padding-top:clamp(12px,1.6vw,18px);border-top:1px solid var(--line)}
.jx-btn{font:inherit;font-size:13px;font-weight:500;padding:9px 16px;border-radius:100px;border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;
  transition:background .25s,border-color .25s,color .25s}
.jx-btn:hover,.jx-btn:focus-visible{background:var(--ink);border-color:var(--ink);color:#fff}
.jx-check.is-done .jx-check__count{color:var(--red);font-weight:600}

/* ---- the chain: stages joined by a line that lights up in turn --------- */
.jx-chain{list-style:none;margin:1.6em 0 1.8em;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:clamp(10px,1.2vw,16px);counter-reset:jxc}
.jx-link{position:relative;border:1.5px solid var(--line);border-radius:14px;padding:clamp(16px,1.8vw,22px);background:var(--white);
  transition:border-color .35s,transform .4s var(--ease),box-shadow .4s var(--ease),background .35s}
.jx-link::after{content:'';position:absolute;top:50%;inset-inline-end:calc(-1 * clamp(10px,1.2vw,16px));width:clamp(10px,1.2vw,16px);height:2px;background:var(--line);transition:background .35s}
.jx-link:last-child::after{display:none}
.jx-link.is-on,.jx-link:hover{border-color:var(--red);transform:translateY(-3px);box-shadow:0 16px 36px rgba(232,30,37,.1)}
.jx-link.is-on::after{background:var(--red)}
.jx-link__n{display:block;font-size:12px;font-weight:700;color:var(--red);margin-bottom:10px}
.jx-link__t{display:block;font-size:16px;font-weight:600;letter-spacing:-.015em;margin-bottom:6px;color:var(--ink)}
.jx-link__p{display:block;font-size:13.5px;line-height:1.5;color:var(--muted)}
.jx-link__c{display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.45;color:var(--ink)}
.jx-link__c i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:3px}
@media (max-width:760px){.jx-link::after{display:none}}

/* ---- calculator ------------------------------------------------------- */
.jx-calc{border:1.5px solid var(--ink);border-radius:18px;background:var(--ink);color:#fff;padding:clamp(20px,2.8vw,38px);margin:1.4em 0 1.8em}
.jx-calc__k{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:6px}
.jx-calc__h{font-size:clamp(20px,2vw,28px);font-weight:600;letter-spacing:-.025em;line-height:1.15;margin-bottom:clamp(16px,2vw,26px)}
.jx-calc__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:clamp(12px,1.6vw,20px)}
.jx-calc label{display:block;font-size:12px;color:var(--d-muted);margin-bottom:7px}
.jx-calc select,.jx-calc input[type=number]{width:100%;font:inherit;font-size:15px;color:#fff;background:rgba(255,255,255,.07);border:1px solid var(--d-line);
  border-radius:10px;padding:11px 12px;appearance:none;-webkit-appearance:none}
.jx-calc select{background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px;background-repeat:no-repeat}
[dir="rtl"] .jx-calc select{background-position:18px 52%,13px 52%}
.jx-calc select option{color:#000}
.jx-calc input[type=range]{width:100%;accent-color:var(--red)}
.jx-calc__rng{display:flex;justify-content:space-between;font-size:11.5px;color:var(--d-muted);margin-top:2px}
.jx-calc__out{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:clamp(12px,1.6vw,20px);margin-top:clamp(18px,2.4vw,30px);
  padding-top:clamp(16px,2vw,26px);border-top:1px solid var(--d-line)}
.jx-calc__v{display:block;font-size:clamp(30px,4vw,56px);font-weight:700;letter-spacing:-.04em;line-height:.95;color:#fff;font-variant-numeric:tabular-nums}
.jx-calc__v small{font-size:.38em;font-weight:600;color:var(--d-muted);letter-spacing:0;margin-inline-start:4px}
.jx-calc__l{display:block;margin-top:8px;font-size:12.5px;color:var(--d-muted)}
.jx-calc__verdict{grid-column:1 / -1;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.07);font-size:14.5px;line-height:1.45}
.jx-calc__verdict i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--d-muted)}
.jx-calc__verdict.is-ok i{background:#28c76f}.jx-calc__verdict.is-tight i{background:#ffb020}.jx-calc__verdict.is-no i{background:var(--red)}
.jx-calc__meter{grid-column:1 / -1;height:8px;border-radius:8px;background:rgba(255,255,255,.12);overflow:hidden}
.jx-calc__meter i{display:block;height:100%;width:100%;background:var(--red);transform:scaleX(var(--s,0));transform-origin:0 50%;transition:transform .5s var(--ease),background .3s}
[dir="rtl"] .jx-calc__meter i{transform-origin:100% 50%}
.jx-calc__meter.is-ok i{background:#28c76f}.jx-calc__meter.is-tight i{background:#ffb020}
.jx-calc__src{display:block;margin-top:14px;font-size:12px;color:var(--d-muted)}

/* ---- calendar: filter chips, a "next up" card, a table you can read ---- */
.jx-next{display:flex;align-items:center;gap:clamp(14px,2vw,26px);flex-wrap:wrap;border:1.5px solid var(--line);border-radius:16px;padding:clamp(16px,2vw,26px);margin:0 0 1.6em;background:var(--white)}
.jx-next__n{font-size:clamp(40px,5.4vw,78px);font-weight:700;letter-spacing:-.05em;line-height:.85;color:var(--red);font-variant-numeric:tabular-nums}
.jx-next__n small{display:block;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:16px}
.jx-next__t{flex:1;min-width:200px}
.jx-next__k{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:6px}
.jx-next__e{display:block;font-size:clamp(18px,1.9vw,26px);font-weight:600;letter-spacing:-.025em;line-height:1.15}
.jx-next__m{display:block;margin-top:6px;font-size:14px;color:var(--muted)}
.jx-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1.2em;padding:0;list-style:none}
.jx-chip{font:inherit;font-size:13px;padding:8px 15px;border-radius:100px;border:1.5px solid var(--line);background:var(--white);color:var(--ink);cursor:pointer;
  transition:background .25s,border-color .25s,color .25s}
.jx-chip:hover{border-color:var(--ink)}
.jx-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.jx-chip em{font-style:normal;opacity:.55;margin-inline-start:4px;font-size:11.5px}
.jx-cal tbody tr{transition:opacity .3s,background .25s}
.jx-cal tbody tr[hidden]{display:none}
.jx-cal tbody tr:hover td{background:rgba(232,30,37,.04)}
.jx-cal .jx-st{display:inline-block;margin-inline-start:8px;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;border-radius:100px;padding:3px 8px;vertical-align:middle;white-space:nowrap}
.jx-st.is-soon{background:var(--red);color:#fff}.jx-st.is-now{background:#28c76f;color:#fff}.jx-st.is-past{background:var(--line);color:var(--muted)}
.jx-cal tr.is-past td{color:var(--muted)}
.jx-cal__none{padding:18px;font-size:14px;color:var(--muted)}

/* ---- a quiet two-sided note ------------------------------------------- */
.jx-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,22px);margin:1.4em 0 1.8em}
.jx-duo__c{border-radius:14px;padding:clamp(18px,2.2vw,28px);border:1.5px solid var(--line);background:var(--white)}
.jx-duo__c.is-dark{background:var(--ink);border-color:var(--ink);color:#fff}
.jx-duo__k{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:10px}
.jx-duo__t{display:block;font-size:clamp(18px,1.7vw,24px);font-weight:600;letter-spacing:-.02em;line-height:1.15;margin-bottom:8px}
.jx-duo__p{font-size:14.5px;line-height:1.6;color:var(--muted)}
.jx-duo__c.is-dark .jx-duo__p{color:var(--d-muted)}
@media (max-width:700px){.jx-duo{grid-template-columns:1fr}}

/* ---- keep reading ------------------------------------------------------ */
.jx-more{padding:clamp(54px,7vw,100px) var(--pad);border-top:1px solid var(--line)}
.jx-more__in{max-width:1180px;margin:0 auto}
.jx-more__h{font-size:clamp(22px,2.6vw,38px);font-weight:600;letter-spacing:-.03em;margin-bottom:clamp(20px,2.6vw,34px)}
.jx-more__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:clamp(14px,1.6vw,22px)}
.jx-more__c{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;border:1.5px solid var(--line);background:var(--white);transition:transform .4s var(--ease),border-color .3s,box-shadow .4s var(--ease)}
.jx-more__c:hover{transform:translateY(-4px);border-color:var(--red);box-shadow:0 18px 40px rgba(0,0,0,.08)}
.jx-more__c img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
.jx-more__b{padding:16px 18px 20px}
.jx-more__t{display:block;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:8px}
.jx-more__n{display:block;font-size:clamp(16px,1.4vw,19px);font-weight:600;letter-spacing:-.015em;line-height:1.25}

/* ---- the article's own call to action ----------------------------------- */
.jx-cta{padding:0 var(--pad) clamp(40px,5vw,70px)}
.jx-cta .article-cta{max-width:1180px;margin:0 auto}

/* ---- intro paragraph after the short answer, countdown, budget split ---- */
.jx-ch--intro{padding-bottom:0}
.jx-ch--intro .jx-ch__body>*{max-width:64ch}
.jx-count[hidden]{display:none}
.jx-split{margin:1.8em 0}
.jx-split__bar{display:flex;gap:6px;height:clamp(84px,10vw,120px)}
.jx-split__bar span{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:14px 16px;border-radius:14px;font-size:13px;font-weight:600;letter-spacing:.02em;
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--ease) .15s;min-width:0}
[dir="rtl"] .jx-split__bar span{transform-origin:100% 50%}
.jx-split__bar b{font-size:clamp(26px,3.4vw,44px);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.jx-split__a{background:var(--ink);color:#fff}
.jx-split__b{background:var(--red);color:#fff;transition-delay:.35s}
.jx-split.is-in .jx-split__bar span,html:not(.jx-on) .jx-split__bar span{transform:none}
@media (prefers-reduced-motion:reduce){.jx-split__bar span{transform:none;transition:none}}

.jx-credit{max-width:1368px;margin:10px auto 0;padding:0 var(--pad);font-size:12px;color:var(--muted);text-align:end}
.jx-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.jx-credit a:hover{color:var(--ink)}
.jx-credit span{margin:0 4px}

.jx-watch__more{margin-top:clamp(24px,3vw,40px)}