/* phones: each demo plays its steps like stories, with the caption under it (Batu 16 Oct 23:37, 17 Oct 00:07) */
:root{--m-top:calc(env(safe-area-inset-top,0px) + var(--m-navh,60px))}@media (max-width:640px){:root{--m-top:calc(env(safe-area-inset-top,0px) + var(--m-navh,54px))}}
@media (max-width:640px){
  .m-st{position:relative;grid-column:1/-1;grid-row:auto;margin:0;min-width:0}
  .m-pin{position:relative;display:flex;flex-direction:column;gap:10px;padding:12px 0 18px;box-sizing:border-box}@media (max-width:640px){.m-pin{gap:9px;padding:10.8px 0 16.2px}}
  .m-dev{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:pan-y;-webkit-user-select:none;user-select:none}
  .m-pin>.m-eb{margin:0;text-align:center;flex:none}
  .m-dev{flex:none;min-height:0;position:relative}
  .m-dvi{width:100%;max-width:400px;margin:0 auto;transform-origin:50% 0;transition:transform .35s ease}
  /* a demo too tall for the screen at a readable size shows the part each step is about, and glides between them */
  .m-dev.m-pn{overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 12px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(transparent,#000 12px,#000 calc(100% - 16px),transparent)}
  .m-pn .m-dvi{transition:transform .35s ease,translate .7s cubic-bezier(.4,0,.2,1)}
  .m-dvi>*{margin:0!important}
  /* a held card fills the height of its tallest step: its panel stretches with it, and the AI Content Engine screen keeps its rows at the top */
  .m-dvi>#sv-nr.m-fx{align-content:start}
  .m-dvi>.cn-io.m-fx{display:flex;flex-direction:column}
  .m-dvi>.cn-io.m-fx>.cn-card{flex:1 1 auto}
  .m-cap{flex:none;display:grid;gap:10px;max-width:400px;width:100%;margin:0 auto}@media (max-width:640px){.m-cap{gap:9px}}
  .m-seg{display:flex;gap:6px}@media (max-width:640px){.m-seg{gap:5.4px}}
  .m-seg button{flex:1;height:22px;border:0;padding:0;background:none;cursor:pointer;position:relative}@media (max-width:640px){.m-seg button{height:19.8px}}
  .m-seg button::before{content:"";position:absolute;left:0;right:0;top:9px;height:4px;border-radius:2px;background:currentColor;opacity:.26;transition:opacity .3s}@media (max-width:640px){.m-seg button::before{top:8.1px;height:3.6px}}
  .m-seg button::after{content:"";position:absolute;left:0;top:9px;height:4px;border-radius:2px;background:var(--green);width:0}@media (max-width:640px){.m-seg button::after{top:8.1px;height:3.6px}}
  .m-seg button.dn::after{width:100%}
  .m-seg button.on::after{animation:m-fill var(--d,5s) linear forwards}
  .m-pz .m-seg button.on::after{animation-play-state:paused}
  .m-rd .m-seg button.on::after{animation:none;width:100%}
  @keyframes m-fill{from{width:0}to{width:100%}}
  .m-dvi.m-sl{animation:m-sl .4s cubic-bezier(.2,.8,.2,1)}.m-dvi.m-sr{animation:m-sr .4s cubic-bezier(.2,.8,.2,1)}
  @keyframes m-sl{from{translate:36px 0;opacity:.4}}@keyframes m-sr{from{translate:-36px 0;opacity:.4}}
  .m-cap{grid-template-columns:minmax(0,1fr) auto;column-gap:14px}@media (max-width:640px){.m-cap{column-gap:12.6px}}
  /* Batu 17 Oct 12:56 (the first screen looked like a still picture): the first screen slides in when the demo comes on screen,
     and a moment later it glides aside once to show the edge of the next screen while the next button pulses */
  .m-st.m-pre .m-dvi{opacity:0;translate:56px 0}@media (max-width:640px){.m-st.m-pre .m-dvi{translate:50.4px 0}}
  .m-st .m-dev{overflow-x:clip}
  .m-dvi:is(.m-xol,.m-xor,.m-xil,.m-xir){position:relative}
  .m-dvi.m-xol{animation:m-xol .25s cubic-bezier(.5,0,.9,.4) forwards}.m-dvi.m-xor{animation:m-xor .25s cubic-bezier(.5,0,.9,.4) forwards}
  .m-dvi.m-xir{animation:m-xir .43s cubic-bezier(.1,.6,.2,1) both}.m-dvi.m-xil{animation:m-xil .43s cubic-bezier(.1,.6,.2,1) both}
  @keyframes m-xol{to{left:-60%;opacity:0}}@keyframes m-xor{to{left:60%;opacity:0}}
  @keyframes m-xir{from{left:60%;opacity:0}}@keyframes m-xil{from{left:-60%;opacity:0}}
  .m-st .m-dvi.m-in{animation:m-stin .65s cubic-bezier(.2,.8,.2,1) both}
  @keyframes m-stin{from{opacity:0;translate:56px 0}}
  .m-st.m-hnt .m-dev{overflow-x:clip}
  .m-st.m-hnt .m-dvi{position:relative;animation:m-ndg 1.6s cubic-bezier(.45,0,.2,1)}
  @keyframes m-ndg{0%{left:0}35%,58%{left:-15%}100%{left:0}}
  .m-gh{position:absolute;top:0;left:calc(100% + 14px);width:100%;height:100%;border-radius:24px;background:rgba(16,22,31,.09);box-shadow:inset 0 0 0 1px rgba(16,22,31,.08);pointer-events:none;animation:m-ghf 1.6s both}@media (max-width:640px){.m-gh{left:calc(100% + 12.6px);border-radius:21.6px}}
  .m-dk .m-gh{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
  @keyframes m-ghf{0%{opacity:0}30%,62%{opacity:1}100%{opacity:0}}
  .m-st.m-hnt .m-nx{animation:m-pls 1.1s 2 ease-out}
  @keyframes m-pls{from{box-shadow:0 0 0 0 rgba(2,122,31,.5)}to{box-shadow:0 0 0 13px rgba(2,122,31,0)}}
  .m-dk.m-hnt .m-nx{animation-name:m-plw}
  @keyframes m-plw{from{box-shadow:0 0 0 0 rgba(255,255,255,.55)}to{box-shadow:0 0 0 13px rgba(255,255,255,0)}}
  .m-seg{grid-column:1/-1}
  .m-nx{width:44px;height:44px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;background:var(--green);color:#fff;cursor:pointer;align-self:start;-webkit-tap-highlight-color:transparent}@media (max-width:640px){.m-nx{width:39.6px;height:39.6px}}
  .m-nx svg,.m-pv svg{width:20px;height:20px}@media (max-width:640px){.m-nx svg,.m-pv svg{width:18px;height:18px}}
  .m-nx:active,.m-pv:active{transform:scale(.94)}
  /* back and next (Batu 17 Oct 09:47): back is the quieter of the two and rests at the first step */
  /* back and next sit either side of the step bars, so the caption keeps the full width */
  .m-st .m-cap{grid-template-columns:auto minmax(0,1fr) auto;column-gap:12px;row-gap:8px}@media (max-width:640px){.m-st .m-cap{column-gap:10.8px;row-gap:7.2px}}
  .m-st :is(.m-pv,.m-nx){width:38px;height:38px}@media (max-width:640px){.m-st :is(.m-pv,.m-nx){width:34.2px;height:34.2px}}
  .m-st :is(.m-pv,.m-nx) svg{width:18px;height:18px}@media (max-width:640px){.m-st :is(.m-pv,.m-nx) svg{width:16.2px;height:16.2px}}
  .m-st .m-ct{min-height:66px}@media (max-width:640px){.m-st .m-ct{min-height:59.4px}}
  .m-st .m-nv{display:contents}
  .m-st .m-pv{grid-row:1;grid-column:1;align-self:center}
  .m-st .m-seg{grid-row:1;grid-column:2;align-self:center}
  .m-st .m-nx{grid-row:1;grid-column:3;align-self:center}
  .m-st .m-ct{grid-row:2;grid-column:1/-1}
  .m-pv{width:44px;height:44px;border-radius:50%;padding:0;display:grid;place-items:center;background:transparent;border:1.5px solid var(--green);color:var(--green-strong,var(--green));cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .2s}@media (max-width:640px){.m-pv{width:39.6px;height:39.6px}}
  .m-pv:disabled{opacity:.3;cursor:default}
  .m-dk .m-pv{border-color:rgba(255,255,255,.75);color:#fff}
  .m-ct{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:start;align-content:start;min-height:88px;transition:opacity .2s,transform .3s}@media (max-width:640px){.m-ct{column-gap:10.8px;min-height:79.2px}}
  .m-ct.out{opacity:0;transform:translateY(6px)}@media (max-width:640px){.m-ct.out{transform:translateY(5.4px)}}
  .m-ct .m-n{grid-row:1/3;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;font:700 14px/1 inherit;font-style:normal;overflow:hidden}@media (max-width:640px){.m-ct .m-n{width:27px;height:27px}}
  .m-ct .m-n img,.m-ct .m-n svg{width:100%;height:100%;object-fit:cover;display:block}
  .m-ct b{font-size:18px;line-height:1.25;color:inherit;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px}@media (max-width:640px){.m-ct b{font-size:16.2px;column-gap:7.2px}}
  .m-ct b em{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--green-strong,var(--green));white-space:nowrap}
  .m-ct span{font-size:15px;line-height:1.45;color:inherit}@media (max-width:640px){.m-ct span{font-size:14px}}
  .m-sty .b-al,.m-sty .bn-arw,.m-sty .b-abc,.m-sty .b-con,.m-sty .b-us,.m-sty .b-fs,.m-sty .b-fl2,.m-sty .b-nots,.m-sty .b-catch,.m-sty .b-cpn,.m-sty .bn-igx,.m-sty .b-skins{display:none!important}
  .m-sty .b-h{margin-bottom:8px!important}@media (max-width:640px){.m-sty .b-h{margin-bottom:7.2px!important}}
  .m-clip{overflow:clip!important}
  /* 1 one-click action: the card's parts light up one by one */
  .m-sty .b-ann{display:block!important}
  /* 4 follow & live */
  .m-st[data-s="0"] .b-phh small .on{box-shadow:0 0 0 2px var(--green);border-radius:999px}@media (max-width:640px){.m-st[data-s="0"] .b-phh small .on{border-radius:899.1px}}
  .m-st[data-s="1"] .b-scb{box-shadow:0 0 0 2px var(--green)}
  .m-st[data-s="3"] .b-vsf{box-shadow:0 0 0 2px var(--green);border-radius:10px}@media (max-width:640px){.m-st[data-s="3"] .b-vsf{border-radius:9px}}
  .m-st .b-not.m-toast{position:absolute;left:10px;right:10px;bottom:14px;z-index:5;padding:12px 14px;gap:6px;opacity:0!important;transform:translateY(24px)!important;transition:opacity .35s,transform .5s cubic-bezier(.2,.8,.2,1)!important;pointer-events:none;box-shadow:0 18px 40px -12px rgba(0,0,0,.55),0 0 0 2px var(--green)!important}@media (max-width:640px){.m-st .b-not.m-toast{left:9px;right:9px;bottom:12.6px;padding:10.8px 12.6px;gap:5.4px;transform:translateY(21.6px)!important}}
  .m-st[data-s="2"] .b-not.m-toast{opacity:1!important;transform:none!important}
  .m-st .m-toast header{font-size:13px}
  .m-st .m-toast p{font-size:13px;line-height:1.4}
  .m-st .m-toast .b-mk{padding-top:8px}@media (max-width:640px){.m-st .m-toast .b-mk{padding-top:7.2px}}
  /* the section's eyebrow moves to the top of the held demo */
  .m-sty .b-h .eyebrow{display:none}
  .m-st .b-ph{position:relative}
  /* 3 personalised tips: the caption names the user, so the phone drops its tag, the why line and the input */
  .m-dvi>.ba{padding-top:0!important}
  .m-st #b-pvt,#b-per .m-st .b-why,#b-per .m-st .b-in{display:none!important}
  #b-per .m-st .b-ph{height:auto!important;padding-bottom:14px}@media (max-width:640px){#b-per .m-st .b-ph{padding-bottom:12.6px}}
  #b-per .m-st .b-phs{height:auto!important;padding-top:18px!important}@media (max-width:640px){#b-per .m-st .b-phs{padding-top:16.2px!important}}
  #b-per .m-st .b-pbody{height:auto}
  #b-per .m-st .b-ph::before,#b-per .m-st .b-tp>.b-lb{display:none!important}
  /* 5 favourites: one card at a time */
  .m-st .b-board{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:0!important;overflow:visible!important;margin:0!important;padding:0!important}
  .m-st .b-board>.b-pin{grid-area:1/1;transform:none!important;width:auto!important;margin:0!important;transition:opacity .45s,transform .45s;animation:none!important}
  .m-st[data-s="1"] .b-board>.b-pin:not(.b-pinm),.m-st:not([data-s="1"]) .b-board>.b-pinm{opacity:0!important;pointer-events:none}
  .m-st[data-s="2"] .b-board .b-bi{box-shadow:0 0 0 2px var(--green)}
  .m-st .b-board+.m-dots{display:none}
  /* Sports Clubs */
  .m-sty .cn-hd .eyebrow,.m-sty .cn-tl,.m-sty .cn-sw,.m-sty #cn-igx,.m-st .cn-axs{display:none!important}
  .m-sty .cn-hd{margin-bottom:8px!important}@media (max-width:640px){.m-sty .cn-hd{margin-bottom:7.2px!important}}
  @keyframes m-in{from{opacity:0;transform:translateY(14px)}}
  .m-st #cn-m3{display:grid!important;grid-template-columns:minmax(0,1fr)!important;overflow:visible!important;padding:0!important;margin:0!important;gap:0!important;scroll-snap-type:none}
  .m-st #cn-m3>.cn-mp{grid-area:1/1;width:auto!important;max-width:340px;margin:0 auto!important;transform:none!important;transition:opacity .45s}
  .m-st #cn-m3>.cn-mp:not(.on){opacity:0!important;pointer-events:none}
  .m-st #cn-io{display:block!important}
  .m-st[data-s="0"] #cn-io :is(.cn-flow,.cn-story),.m-st[data-s="1"] #cn-io .cn-data{display:none!important}
  .m-st #cn-io>*{animation:m-in .5s both}
  .m-st #cn-ax{display:block!important}
  .m-st .c-hist{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:0!important}
  .m-st .c-hside{display:contents!important}
  .m-st .c-hist .cw{grid-area:1/1;animation:m-in .5s both;margin:0!important}
  .cn-bd .m-pin>.m-eb{color:#fff!important}
  /* the week: seven rows that flip from somewhere else to in your app */
  .m-st .cn-days{grid-template-columns:minmax(0,1fr)!important;overflow:visible!important;margin:0!important;padding:0!important;gap:6px!important}@media (max-width:640px){.m-st .cn-days{gap:5.4px!important}}
  .m-st .cn-day{height:46px!important}@media (max-width:640px){.m-st .cn-day{height:41.4px!important}}
  .m-st .cn-f{grid-template-columns:44px 30px minmax(0,1fr) auto;justify-items:start;align-items:center;align-content:center;text-align:left;padding:6px 14px;gap:10px;border-radius:12px}@media (max-width:640px){.m-st .cn-f{grid-template-columns:39.6px 27px minmax(0,1fr) auto;padding:5.4px 12.6px;gap:9px;border-radius:10.8px}}
  .m-st .cn-f b{font-size:13px}
  .m-st .cn-f i{width:30px;height:30px}@media (max-width:640px){.m-st .cn-f i{width:27px;height:27px}}
  .m-st .cn-f i svg{width:16px;height:16px}@media (max-width:640px){.m-st .cn-f i svg{width:14.4px;height:14.4px}}
  .m-st .cn-f span{font-size:15px}@media (max-width:640px){.m-st .cn-f span{font-size:14px}}
  .m-st .cn-f small{font-size:12.5px;justify-self:end}
  .m-st .cn-mtr{margin-top:12px;padding:14px 18px;gap:8px 16px}@media (max-width:640px){.m-st .cn-mtr{margin-top:10.8px;padding:12.6px 16.2px;gap:7.2px 14.4px}}
  /* Sports Media */
  .m-st #sv-nr{display:block!important}
  .m-st[data-s="0"] #sv-nr .sv-nrd,.m-st:not([data-s="0"]) #sv-nr .sv-nrf{display:none!important}
  .m-st #sv-nr .sv-nrb{display:block!important}
  .m-st #sv-nr :is(.sv-nrf,.sv-nrd){animation:m-in .5s both}
  /* the draft keeps its full width on a phone: the facts row goes (the captions say it) and the draft shows its first lines */
  .m-st #sv-nr .sv-nrk{display:none!important}
  /* the "No rebuild" sticker sat on the eyebrow; the captions say it */
  .m-st .b-stk.b-nrs{display:none!important}
  /* Match insights: the story keeps its headline, its paragraph and two insights, so it reads at full size */
  #cn-ins .m-st .cn-flow,#cn-ins .m-st .cn-ir~.cn-ir~.cn-ir{display:none!important}
  .m-st #sv-nr .sv-nrp{min-height:0;height:250px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}@media (max-width:640px){.m-st #sv-nr .sv-nrp{height:225px}}
  .m-sty .sv-cep,.m-sty #s-steps,.m-st .sv-cw3::after,.m-st .sv-cwc::before,.m-st .mo-bl{display:none!important}
  .m-st .sv-cw3{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:0!important;padding:0!important;margin:0!important}
  .m-st .sv-cw3>.sv-cwc{grid-area:1/1;margin:0!important;transition:opacity .45s}
  .m-st[data-s="0"] .sv-cwc:not([style*="--j:0"]),.m-st[data-s="1"] .sv-cwc:not([style*="--j:1"]),.m-st[data-s="2"] .sv-cwc:not([style*="--j:2"]){opacity:0!important;pointer-events:none}
  .m-st[data-s="0"] :is(.c-rec,.c-mil),.m-st[data-s="1"] :is(.c-otday,.c-mil),.m-st[data-s="2"] :is(.c-otday,.c-rec){display:none!important}
  /* 6 integration: the sportsbook with the assistant on top; on Your brand it runs through the colours */
  .m-st[data-s="0"] .b-wd,.m-st[data-s="2"] .b-wd .b-mk{box-shadow:0 0 0 2px var(--green)}
  .m-st .b-wd,.m-st .b-wd .b-mk{transition:box-shadow .3s}
}