/* Hybrid look: light and airy, collectible card, oath that fills Sachin, bin-it-for-six game, ladder. */
:root{--hy-bg:#F2F6FF}
body{background:var(--hy-bg)}
.fold.oath{background:linear-gradient(180deg,#F2F6FF,#E8F0FF)!important;color:#000}
.fold.oath .oath-head h2,.fold.oath .oath-sub,.fold.oath h2,.fold.oath .next-h{color:#000!important}
.fold.oath .eyebrow{color:#005DFF!important}

/* oath: tick each promise and Sachin fills in */
.fillcard{--p:0;background:#fff;border:2px solid #C8D8FF;border-radius:22px;padding:16px;box-shadow:0 14px 34px rgba(0,60,200,.10);display:grid;gap:10px}
.fc-photo{position:relative;height:210px;border-radius:16px;background:#E8F0FF;overflow:hidden;display:flex;justify-content:center}
.fc-photo:before{content:"";position:absolute;left:50%;bottom:-70px;width:200px;height:200px;margin-left:-100px;border-radius:50%;background:#1DC797;opacity:.35}
.fc-photo img{position:absolute;top:8px;height:340px;width:auto;left:50%;transform:translateX(-50%)}
.fc-photo .gray{filter:grayscale(1) brightness(1.1);opacity:.28}
.fc-photo .color{clip-path:inset(calc(100% - var(--p) * 25%) 0 0 0);transition:clip-path .45s cubic-bezier(.2,.8,.2,1)}
.fillcard.full .fc-photo:before{opacity:1;transition:opacity .4s}
.fc-who{font-weight:800;font-size:17px}
.fc-who .empty{color:#9aa4b4}
.fc-list{list-style:none;display:grid;gap:8px;margin:0;padding:0}
.pk{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:2px solid #E8F0FF;border-radius:14px;cursor:pointer;background:#fff;font-size:14px;line-height:1.35;color:#000;transition:border-color .15s,background .15s}
.pk input{position:absolute;opacity:0;pointer-events:none}
.pk .box{flex:none;width:22px;height:22px;border-radius:7px;border:2px solid #C8D8FF;display:grid;place-items:center;background:#fff;margin-top:1px}
.pk input:checked + .box{background:#1DC797;border-color:#000000}
.pk input:checked + .box:after{content:"";width:10px;height:6px;border-left:3px solid #000;border-bottom:3px solid #000;transform:rotate(-45deg) translate(1px,-1px)}
.pk:has(input:checked){border-color:#1DC797;background:#EEFBF6}
.pk:has(input:focus-visible){outline:3px solid #005DFF}
.fc-count{font-size:13px;color:#3a4452;margin:0}.fc-count b{color:#000}
.pk-err{color:#b3261e;font-size:13px;font-weight:600;margin:0 0 8px}

/* collectible card + share */
.cert.card3d img{display:block;width:100%;height:auto;border-radius:18px;transform:rotate(-1.5deg);filter:drop-shadow(0 18px 28px rgba(0,40,140,.18))}
.share-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 20px}
.share-grid .btn,.share-grid a.btn{display:flex;align-items:center;justify-content:center;text-align:center;border-radius:99px;padding:12px 14px;font-weight:700;font-size:15px;border:0;cursor:pointer;text-decoration:none}
.share-grid .btn-primary{background:#005DFF;color:#fff;grid-column:1/-1;font-size:16px;padding:14px}
.share-grid .btn-sec{background:#fff;color:#000;box-shadow:inset 0 0 0 2px #000}
.share-grid .wa{background:#1DC797;color:#000}

/* bin it for six */
.over-lbl{font-size:12px;font-weight:700;opacity:.85}
.b6-name{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);background:#fff;color:#000;font-weight:800;font-size:15px;border-radius:99px;padding:6px 16px;box-shadow:0 6px 16px rgba(0,0,0,.18);white-space:nowrap}
.ov-clock.ring i{background:#1DC797}
.b6-bins{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.b6-bin{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px 8px;background:#fff;border:2px solid #C8D8FF;border-radius:16px;box-shadow:0 4px 0 #C8D8FF;cursor:pointer;font:inherit;color:#000;transition:transform .12s,box-shadow .12s}
.b6-bin svg{width:44px;height:auto;overflow:visible}
.b6-bin span{font-size:12px;font-weight:800;text-align:center}
.b6-bin kbd{position:absolute;left:6px;top:3px;font:700 10px Poppins,sans-serif;color:#4a5560}
@media (hover:none){.b6-bin kbd{display:none}}
.b6-bin:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #005DFF}
.b6-bin:disabled{cursor:default}.b6-bin.right{background:#E2F6EE;border-color:#1DC797;box-shadow:0 4px 0 #1DC797}.b6-bin.miss{background:#EEF1F7;border-color:#C8D8FF}
.b6-msg{margin:10px 0 0;min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center;background:#fff;border-radius:12px;padding:8px 12px;font-size:14px;color:#3a4452}
.b6-msg.ok{background:#1DC797;color:#000}.b6-msg.know{background:#E8F0FF;color:#000}

/* v2: full figure fills bottom-up as you tick; post-oath screen fits one screen */
.fc-photo{height:236px;background:linear-gradient(180deg,#E8F0FF,#C8D8FF)}
.fc-photo:before{width:170px;height:170px;margin-left:-85px;bottom:-30px;opacity:.5}
.fc-photo img{top:6px;height:236px;width:auto}
.fc-photo .gray{filter:grayscale(1) contrast(.9) brightness(1.25);opacity:.35}
.fc-photo .color{clip-path:inset(calc(100% - var(--p) * 25%) 0 0 0)}
.fc-photo:after{content:attr(data-n);position:absolute;right:10px;top:10px;background:#005DFF;color:#fff;font:800 12px Poppins,sans-serif;border-radius:99px;padding:4px 10px}
.fc-list{gap:6px}.pk{padding:8px 10px;font-size:13.5px}
.done{align-items:center;gap:28px}
.cert{display:flex;justify-content:center}
.cert.card3d img{width:auto;max-width:100%;max-height:min(calc(calc(100 * var(--vh)) - 250px),620px);transform:rotate(-1deg)}
.share-grid{margin:4px 0 12px}
.share-grid .btn,.share-grid a.btn{padding:10px 12px;font-size:14px}.share-grid .btn-primary{padding:12px}
.next-grid{gap:8px}.next-grid .next{padding:10px 12px}.next-grid .next small{display:none}
.next-h{margin-bottom:8px}
.cert{background:none!important;box-shadow:none!important;padding:0!important;border:0!important}
.cert.card3d img{max-height:min(calc(calc(100 * var(--vh)) - 300px),600px)}
.done .next-grid .next:nth-child(1){display:none}
.fold.oath .oath-head{margin-bottom:10px}

/* split pledge card: ticks left, big standalone Sachin right */
.splitcard{display:grid;grid-template-columns:1.1fr 1fr;padding:0;gap:0;background:#fff;border:3px solid #000000;border-radius:28px;box-shadow:10px 10px 0 #000000;overflow:hidden}
.sc-left{padding:22px 24px;display:grid;gap:10px;align-content:start}
.sc-h{display:flex;justify-content:space-between;align-items:center}.sc-h b{font-size:22px;letter-spacing:-.02em}
.sc-all{background:none;border:0;color:#005DFF;font:700 13px Poppins,sans-serif;cursor:pointer}
.sc-left .form{margin-top:4px;gap:8px 12px}
.sc-right{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 0;background:#F2F6FF;border-left:3px solid #000000}
.segs{display:flex;gap:8px;width:70%;max-width:260px}.segs i{flex:1;height:8px;border-radius:99px;background:#D3DEF7}.segs i.on{background:#1DC797}
.sc-cap{font-size:13px;font-weight:600;color:#0a2a6b;text-align:center;margin:10px 0 0;max-width:30ch}.sc-cap b{color:#000}
.splitcard .fc-photo{position:relative;flex:1;width:100%;min-height:330px;height:auto;background:none;overflow:visible}
.splitcard .fc-photo:before,.splitcard .fc-photo:after{display:none}
.splitcard .fc-photo img{position:absolute;bottom:0;top:auto;left:50%;transform:translateX(-50%);height:100%;max-height:520px;width:auto}
.splitcard .fc-photo .gray{filter:grayscale(1) contrast(.95);opacity:.55}
@media (max-width:860px){.splitcard{grid-template-columns:1fr}.sc-right{order:-1;border-left:0;border-bottom:3px solid #000000}.splitcard .fc-photo{min-height:250px}}


/* bin it for six: behind-the-batter canvas */
.b3-wrap{position:relative;margin-top:10px;border-radius:18px;overflow:hidden;background:#DDE8FF;touch-action:none;user-select:none;-webkit-user-select:none}
.b3{display:block;width:100%;touch-action:none;cursor:crosshair}
.b3-in{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;background:#fff;border-radius:14px;padding:6px 18px;box-shadow:0 8px 20px rgba(0,0,0,.2);pointer-events:none}
.b3-in small{font:800 10px Poppins,sans-serif;letter-spacing:.14em;color:#005DFF}.b3-in b{font-size:16px}
.b3-wrap .ov-pop{top:38%}

/* ===== Bin it for six: full-screen like a real match ===== */
body.b3-on .sheet-panel{inset:0!important;left:0!important;top:0!important;transform:none!important;width:100%!important;max-width:none!important;max-height:none!important;height:100%!important;border-radius:0!important;animation:none!important}
body.b3-on .sheet-top,body.b3-on .hud{display:none!important}
body.b3-on .sheet-body{padding:0!important;overflow:hidden!important}
body.b3-on .gm{height:calc(100 * var(--vh));height:calc(100 * var(--vh))}
.b3-wrap{position:relative;height:100%;min-height:calc(100 * var(--vh));min-height:calc(100 * var(--vh));margin:0;border-radius:0;overflow:hidden;background:#C8D8FF;touch-action:none;user-select:none;-webkit-user-select:none}
.b3{display:block;touch-action:none}
.b3-score{position:absolute;left:14px;top:14px;display:flex;align-items:baseline;gap:6px;background:#000;color:#fff;border-radius:16px;padding:8px 16px;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.b3-score b{font-size:clamp(28px,calc(5 * var(--vw)),44px);font-weight:800;line-height:1;letter-spacing:-.015em}.b3-score small{color:#1DC797;font-weight:800;font-size:13px}
.b3-mult{background:#1DC797;color:#000;font-weight:800;font-size:12px;border-radius:99px;padding:2px 9px;margin-left:4px}
.b3-over{position:absolute;left:50%;top:12px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px}
.b3-over span{background:#fff;color:#000;font-weight:800;font-size:14px;letter-spacing:.08em;border-radius:99px;padding:6px 20px;box-shadow:0 6px 16px rgba(0,0,0,.2)}
.b3-dots{display:flex;gap:10px}.b3-dots i{width:clamp(22px,calc(3.4 * var(--vw)),32px);height:clamp(22px,calc(3.4 * var(--vw)),32px);border-radius:50%;background:rgba(255,255,255,.4);border:2px solid rgba(255,255,255,.75);display:grid;place-items:center;font:800 13px Poppins,sans-serif;font-style:normal;color:#fff}
.b3-dots i.cur{background:rgba(0,93,255,.55);border-color:#fff}.b3-dots i.four{background:#005DFF;border-color:#fff}.b3-dots i.six{background:#1DC797;color:#000;border-color:#fff}.b3-dots i.dot{background:#fff;color:#000}
.b3-x{position:absolute;right:14px;top:14px;width:46px;height:46px;border-radius:50%;border:0;background:#fff;color:#000;font-size:28px;line-height:1;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.2)}
.b3-wrap .ov-pop{top:34%;font-family:Poppins,sans-serif;font-weight:900;font-style:italic;font-size:clamp(54px,calc(11 * var(--vw)),120px);letter-spacing:-.04em;color:#C8D8FF;-webkit-text-stroke:7px #000000;paint-order:stroke fill;background:none;border-radius:0;padding:0;text-shadow:0 8px 0 rgba(0,0,0,.35);white-space:nowrap}
.b3-wrap .ov-pop.six{color:#1DC797;background:none}.b3-wrap .ov-pop.four{color:#fff;background:none;box-shadow:none}.b3-wrap .ov-pop.dot{color:#C8D8FF;background:none;font-size:clamp(54px,calc(11 * var(--vw)),120px)}
.b3-coach{position:absolute;left:14px;bottom:16px;display:flex;align-items:center;gap:0;max-width:min(calc(62 * var(--vw)),520px);pointer-events:none}
.b3-coach .av{flex:none;width:76px;height:76px;border-radius:50%;overflow:hidden;border:4px solid #fff;background:#C8D8FF;box-shadow:0 8px 20px rgba(0,0,0,.25);position:relative;z-index:1}
.b3-coach .av img{position:absolute;left:50%;top:-2px;width:92px;height:auto;transform:translateX(-50%)}
.b3-coach p{margin:0 0 0 -14px;background:#fff;color:#000;font-weight:700;font-size:clamp(14px,calc(2.2 * var(--vw)),19px);line-height:1.3;padding:12px 18px 12px 26px;border-radius:0 22px 22px 0;box-shadow:0 8px 20px rgba(0,0,0,.2)}
.b3-coach.ok p{background:#E2F6EE}.b3-coach.know p{background:#fff}
.b3-in{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;background:#fff;border-radius:18px;padding:8px 22px 8px 10px;box-shadow:0 10px 24px rgba(0,0,0,.22);pointer-events:none}
.b3-in img{width:52px;height:52px;border-radius:12px;background:#F2F6FF;padding:4px}.b3-in span{display:grid;line-height:1.15}
.b3-in small{font:800 11px Poppins,sans-serif;letter-spacing:.16em;color:#005DFF}.b3-in b{font-size:clamp(18px,calc(2.6 * var(--vw)),26px);font-weight:800}
.b3-keys{position:absolute;right:16px;bottom:16px;margin:0;background:rgba(0,0,0,.78);color:#fff;font-weight:700;font-size:13px;border-radius:99px;padding:8px 16px;pointer-events:none}
@media (max-width:700px){.b3-coach{max-width:calc(46 * var(--vw));bottom:84px}.b3-coach .av{width:56px;height:56px}.b3-coach .av img{width:68px}.b3-in{bottom:14px}.b3-keys{display:none}}
@media (max-width:1150px){.b3-coach{bottom:104px;max-width:min(calc(70 * var(--vw)),520px)}}
.b3-wrap .ov-pop{top:46%}
.b3-flash{position:absolute;inset:0;background:#fff;pointer-events:none;z-index:4}
@media (max-height:780px){.b3-in img{display:none}.b3-in{padding:6px 18px;bottom:10px}.b3-in b{font-size:18px}.b3-coach{bottom:70px}}

/* ===== fold 5: the games, fold 6: the leaderboard ===== */
.fold.gamesfold{background:#fff}
.fold.board{background:linear-gradient(180deg,#F2F6FF,#E8F0FF)}
.fold.gamesfold .wrap,.fold.board .wrap{max-width:1200px;margin:0 auto}
.fold.gamesfold .duo,.fold.board .duo{margin-bottom:6px}
.gf-lead{max-width:46ch;margin-bottom:22px}
.gf-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:6px}
.gf-picker .pick{min-height:340px}
.lb-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:center}
.lb-text .lad-you{margin-top:20px}
.lb-art .podium{margin-bottom:12px}
.lb-art .lad-list{margin:0}
@media (max-width:860px){.gf-picker{grid-template-columns:1fr}.gf-picker .pick{min-height:200px}.lb-grid{grid-template-columns:1fr;gap:24px}}

/* ===== leaderboard v2: podium bars + table, and a You card ===== */
.fold.board .lb2{display:grid;grid-template-columns:1.6fr 1fr;gap:22px;align-items:start;margin-top:8px;text-align:left}
.lb2-board,.lb2-me{background:#fff;border:3px solid #000000;border-radius:24px;box-shadow:8px 8px 0 #000000;padding:20px 22px}
.lb2-me{background:#E2F6EE}
.lb2-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}.lb2-head b{font-size:18px}
.lb2-tag{font-size:12px;font-weight:700;color:#005DFF;background:#E8F0FF;border-radius:99px;padding:4px 12px}
.lb2-pod{display:flex;align-items:flex-end;justify-content:center;gap:12px;margin:14px 0 18px}
.lb2-col{flex:1;max-width:200px;text-align:center}
.lb2-av{width:48px;height:48px;border-radius:50%;background:#E2F6EE;border:2px solid #C8D8FF;display:grid;place-items:center;font-weight:800;font-size:18px;margin:0 auto 6px}
.lb2-col.me .lb2-av{background:#1DC797;border-color:#000000}
.lb2-col b{display:block;font-size:15px}.lb2-col small{display:block;font-size:12px;color:#3a4452}
.lb2-bar{margin-top:10px;border:2px solid #000000;border-bottom:0;border-radius:14px 14px 0 0;display:grid;place-items:start center;padding-top:8px}
.lb2-bar i{font-style:normal;font-weight:800;font-size:34px;line-height:1;color:#000000}
.lb2-col.first .lb2-bar{height:150px;background:#005DFF}.lb2-col.first .lb2-bar i{color:#fff}
.lb2-col.second .lb2-bar{height:112px;background:#C8D8FF}.lb2-col.third .lb2-bar{height:86px;background:#E2F6EE}
.lb2-col.me .lb2-bar{box-shadow:0 0 0 3px #1DC797}
.lb2-t{width:100%;border-collapse:collapse;font-size:14px}
.lb2-t th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#4a5560;text-align:left;padding:8px 10px;border-bottom:2px solid #E8F0FF}
.lb2-t td{padding:11px 10px;border-bottom:1px solid #EAF0FD}
.lb2-t td.n{font-weight:800;color:#005DFF;width:34px}.lb2-t td.s{text-align:right}
.lb2-t tr.cur td{background:#E2F6EE}.lb2-t tr.cur td:first-child{border-radius:12px 0 0 12px}.lb2-t tr.cur td:last-child{border-radius:0 12px 12px 0}
.lb2-next{font-size:11px;font-weight:800;color:#005DFF;background:#E8F0FF;border-radius:99px;padding:3px 10px}
.lb2-who{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.lb2-me-av{flex:none;width:52px;height:52px;border-radius:50%;background:#1DC797;border:3px solid #000000;display:grid;place-items:center;font-weight:800;font-size:22px}
.lb2-who b{display:block;font-size:20px;line-height:1.1}.lb2-who small{font-size:13px;color:#3a4452}
.lb2-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#C8D8FF;border:1px solid #C8D8FF;border-radius:14px;overflow:hidden;margin:0 0 16px}
.lb2-stats div{background:#FFFFFF;padding:10px 12px}.lb2-stats dt{font-size:11px;color:#4a5560;margin-bottom:2px}.lb2-stats dd{font-size:14px;font-weight:700;line-height:1.25}
.lb2-th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#4a5560;font-weight:800;margin:0 0 8px}
.lb2-titles{display:grid;gap:8px;margin-bottom:16px}
.lb2-titles div{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#fff;border:2px solid #C8D8FF;border-radius:12px;padding:9px 12px;opacity:.7}
.lb2-titles div.on{opacity:1;border-color:#1DC797}.lb2-titles b{font-size:13px}.lb2-titles small{font-size:12px;color:#3a4452;font-weight:600}
.lb2-play{width:100%;justify-content:center;display:flex}
.lb2-me .lad-note{margin:10px 0 0;text-align:center}
@media (max-width:860px){.fold.board .lb2{grid-template-columns:1fr}.lb2-board,.lb2-me{padding:16px}.lb2-col.first .lb2-bar{height:120px}.lb2-col.second .lb2-bar{height:90px}.lb2-col.third .lb2-bar{height:70px}}
.lb2-t td,.lb2-t .lad-chip,.lb2-t .lad-done,.lb2-next{white-space:nowrap}
@media (max-width:860px){.lb2-t{font-size:13px}.lb2-t th,.lb2-t td{padding:10px 5px}.lb2-t td.n{width:22px}.lb2-t .lad-chip,.lb2-t .lad-done,.lb2-next{font-size:11px;padding:3px 8px}}
.lb2-stats dt,.lb2-stats dd{margin:0;text-align:left}

/* ===== leaderboard v3: plain rank / player / score / move ===== */
.lb2-av.sm{width:34px;height:34px;font-size:12px;margin:0;flex:none}
.lb2-pl{display:flex;align-items:center;gap:12px}.lb2-pl b{font-size:14px}
.lb2-you{font-style:normal;font-size:10px;font-weight:800;color:#fff;background:#1DC797;border-radius:99px;padding:2px 8px}
.lb2-t th.r,.lb2-t td.sc{text-align:right}.lb2-t th.c,.lb2-t td.mv-c{text-align:center;width:64px}
.lb2-t td.sc{font-weight:800;color:#000000;white-space:nowrap}
.lb2-t tr.pin td{border-top:2px dashed #C8D8FF}
.mv{font-size:13px;font-weight:700;color:#6b7686}.mv.up{color:#000000}.mv.dn{color:#005DFF}
.lb2-goal{margin:0 0 16px;padding:10px 12px;border-radius:12px;background:#fff;border:2px dashed #C8D8FF;font-size:14px;font-weight:700;text-align:center}
.lb2-col b{white-space:nowrap}
@media (max-width:860px){.lb2-pl{gap:8px}.lb2-t th.c,.lb2-t td.mv-c{width:44px}}

/* ===== hero: Sachin on his own, cropped just below his hands (no green disc, no dotted ring) ===== */
.hero-pic .disc,.hero-pic .ring{display:none}
.hero-pic{aspect-ratio:1416/1815;overflow:hidden}
.hero-pic img{height:auto;width:100%;display:block}
/* desktop: sit exactly on top of the ticker and fill the screen below the nav (head ~30px under it) */
@media (min-width:861px){
  .hero{--th:calc(36px + clamp(18px,calc(2 * var(--vw)),30px) * 1.5)}   /* the ticker's real height */
  .hero-pic{bottom:var(--th);height:min(calc((100% - var(--th) - 100px) / .894),880px)}
}
@media (max-width:860px){ .hero .ticker{margin-top:0} }   /* phone: he stands right on the ticker, no floating gap */

/* ===== hero: headline all black; ticker = two filled phrases, no green line, no stars ===== */
.h1 .ln2{color:inherit}
.hero .ticker{border-top:0}
.hero .ticker .ticker-in{gap:64px;padding-right:64px}   /* equal halves so the loop never jumps */
.hero .ticker .ticker-in span,.hero .ticker .ticker-in span:nth-of-type(even){color:#fff;-webkit-text-stroke:0;paint-order:normal}
@media (min-width:861px){ .hero{--th:calc(32px + clamp(18px,calc(2 * var(--vw)),30px) * 1.5)} }

/* ===== join strip: action green with black text ===== */
.btn-oath{background:#005DFF;color:#fff;box-shadow:0 14px 30px rgba(0,93,255,.32)}
.btn-oath .arr{width:auto;height:auto;border-radius:0;background:none;color:#fff;display:grid;place-items:center;font-size:0}
.btn-oath .arr svg{display:block}
.btn-oath:hover{background:#000;color:#fff}
.btn-oath:hover .arr{background:none;color:#fff}

/* ===== scroll strips: 15% slower than before ===== */
.ticker-in{animation-duration:37.65s}                 /* was 32s */
.hero .ticker .ticker-in{animation-duration:77.6s}    /* same on-screen speed (-15%): measured for one phrase + star */

/* ===== colour guidelines: 80% light family + 20% saturated/dark =====
   Paper white #FFFFFF · Source mint #E2F6EE · Ice blue #E8F0FF · Mist blue #F2F6FF · Cloud grey #F5F5F5 · Outline blue #C8D8FF (1-2px rules)
   Accents: Action blue #005DFF · Action green #1DC797 · Ink black #000000 · Photo navy #202D58 (shirt tone only, never a flat surface) */
:root{--pal-white:#FFFFFF;--pal-mint:#E2F6EE;--pal-ice:#E8F0FF;--pal-mist:#F2F6FF;--pal-cloud:#F5F5F5;--pal-outline:#C8D8FF;--pal-blue:#005DFF;--pal-green:#1DC797;--pal-ink:#000000;--pal-navy:#202D58;--grey:#E8F0FF}
.fold.problem{background:#E2F6EE}                 /* was outline blue: that colour is for rules, not whole surfaces */
.fold.board{background:#E8F0FF}

/* ===== Bin it for six runs in a full-screen frame (Alok's player, see /bifs) ===== */
.bifs-frame{position:fixed;inset:0;width:100%;height:100%;height:calc(100 * var(--vh));border:0;z-index:300;background:#F4F7FF}
body.bifs-on{overflow:hidden}
.intro .in-bins span{width:26%;max-width:110px}
.intro .in-bins img{width:100%;height:auto;animation:inbob 1.8s ease-in-out infinite}
.intro .in-bins span:nth-child(2) img{animation-delay:.2s}.intro .in-bins span:nth-child(3) img{animation-delay:.4s}

/* ===== hero strip: one phrase, written as #SachinWithRecykal (not all capitals) ===== */
.hero .ticker .ticker-in span,.hero .ticker .ticker-in span:nth-of-type(even){text-transform:none;letter-spacing:-.005em}

/* ===== Bin it for six card: the render shows as it is (no blue wash from the bottom) ===== */
.pick.p-sort .cover:after{display:none}
.pick.p-sort b,.pick.p-sort small{text-shadow:0 1px 3px rgba(0,0,0,.65),0 2px 16px rgba(0,0,0,.45)}

/* ===== oath fold: Sachin cropped just below his hands, like the landing fold, and scaled up to fill the panel ===== */
.splitcard .fc-photo img{top:auto;bottom:0;height:100%;max-height:640px;width:auto;aspect-ratio:1416/1815;object-fit:cover;object-position:top}
@media (max-width:860px){ .fix-art .bins{margin-top:84px} }   /* the popping item chips float above the bins: keep them clear of the text above */

/* ===== challenge fold: your score card + every way to send it ===== */
.fold.challenge{background:#F2F6FF}
.fold.challenge .wrap{max-width:1200px;margin:0 auto}
.ch-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;text-align:left}
.ch-text .lead{max-width:460px}
.ch-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border:2px solid #000;border-radius:99px;background:#fff;margin:24px 0 18px}
.ch-tab{border:0;background:none;border-radius:99px;padding:9px 18px;font-weight:800;font-size:13.5px;cursor:pointer;color:#000;transition:background .2s,color .2s}
.ch-tab.on{background:#000;color:#fff}
.ch-f{display:grid;gap:6px;font-size:13px;font-weight:700;margin-bottom:16px;max-width:440px}
.ch-f input{border:2px solid #C8D8FF;border-radius:14px;padding:12px 14px;font-size:16px;background:#fff;color:#000;width:100%}
.ch-f input:focus{outline:none;border-color:#005DFF}
.ch-row{display:flex;gap:10px;max-width:440px}.ch-row .btn{flex:1;justify-content:center;white-space:nowrap;display:flex;align-items:center;gap:8px}
.ch-wa{display:flex;align-items:center;justify-content:center;width:100%;max-width:440px;margin-top:10px;background:#1DC797;color:#000}
.ch-wa:hover{background:#000;color:#fff}
.ch-big{max-width:440px;width:100%;justify-content:center;display:flex;gap:10px}
.ch-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;max-width:440px}
.ch-links button{border:2px solid #C8D8FF;background:#fff;color:#000;border-radius:99px;padding:8px 16px;font-size:13px;font-weight:700;cursor:pointer;transition:border-color .2s,background .2s}
.ch-links button:hover{border-color:#000;background:#E8F0FF}
.ch-card{display:grid;justify-items:center}
.ch-frame{width:min(100%,430px)}
.ch-frame img{width:100%;height:auto;display:block;transform:rotate(2deg);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.ch-frame img:hover{transform:rotate(0)}
.ch-note{font-size:13px;color:#3a4452;margin-top:10px;text-align:center;min-height:19px}
@media (max-width:860px){.ch-grid{grid-template-columns:1fr;gap:24px}.ch-card{order:-1}.ch-frame{width:min(100%,340px)}.ch-row{max-width:none}.ch-f,.ch-links,.ch-wa,.ch-big{max-width:none}}
.ch-row .btn-primary{background:#005DFF;color:#fff}.ch-row .btn-primary:hover{background:#000}
.ch-big{background:#005DFF;color:#fff}.ch-big:hover{background:#000}

/* ===== Follow the bottle card: the story's first scene (the bottle on the station-shop shelf) on a light card, black text, no blue wash ===== */
.pick.p-bottle{background:#E8F0FF;color:#000}
.pick.p-bottle .cover:after{display:none}
.pick.p-bottle b,.pick.p-bottle small{color:#000;text-shadow:none}
.pick.p-bottle small{opacity:.8}
.pick.p-bottle .go{background:#000;color:#fff}

/* ===== round 4 ===== */
/* hero strip: same look as the oath strip (green, black text, stars between) */
.hero .ticker{background:#1DC797;color:#000}
.hero .ticker .ticker-in{gap:30px;padding-right:30px}
.hero .ticker .ticker-in span,.hero .ticker .ticker-in span:nth-of-type(even){color:#000}
.hero .ticker i{color:#000}
/* "The top scorers." on one line */
.fold.board h2.duo span,.fold.board h2.duo em{display:inline}
/* leaderboard card as tall as the You card */
.fold.board .lb2{align-items:stretch}
.lb2-board{display:flex;flex-direction:column}
.lb2-pod{flex:1;margin-bottom:12px}
/* challenge fold: card on the right with the send options under it */
.ch-frame{width:min(100%,340px)}
.ch-actions{width:min(100%,400px);margin-top:20px}
.ch-actions .ch-row,.ch-actions .ch-wa,.ch-actions .ch-links,.ch-actions .ch-big{max-width:none;width:100%}
.ch-actions .ch-links{justify-content:center}
@media (max-width:860px){.ch-card{order:-1}.ch-frame{width:min(100%,300px)}}

/* folds: content centred in the part of the screen under the nav, and the oath fold fits on one screen (nav above, strip below) */
@media (min-width:861px){
  .fold:not(.oath){padding-top:calc(71px + clamp(14px,calc(2.4 * var(--vh)),26px));padding-bottom:clamp(14px,calc(2.4 * var(--vh)),26px)}
  .fold.oath{padding-top:calc(71px + 10px);padding-bottom:calc(32px + clamp(18px,calc(2 * var(--vw)),30px) * 1.5 + 10px)}
  .fold.oath .oath-head{margin-bottom:8px}
  .fold.oath .oath-head h2{margin-top:2px}
  .fold.oath .oath-sub{margin-top:4px}
  .splitcard .sc-left{padding:14px 20px;gap:7px}
  .splitcard .sc-h b{font-size:19px}
  .splitcard .pk{padding:6px 10px;font-size:13px;line-height:1.3}
  .splitcard .fc-list{gap:5px}
  .splitcard .form{gap:6px 12px;margin-top:2px}
  .splitcard .form label.f{gap:3px;font-size:12.5px}
  .splitcard .form input[type=text],.splitcard .form input[type=email]{height:38px;font-size:15px}
  .splitcard .check{font-size:12.5px}
  .splitcard .submitrow{gap:4px;margin-top:2px}
  .splitcard .submitrow .btn{padding:11px 20px;font-size:15px}
  .splitcard .fine{font-size:11px;line-height:1.3}
}

/* challenge fold: the card scales with the screen height so card + send options always fit; the pills sit on one row */
.ch-frame{width:min(100%,340px,calc((calc(100 * var(--vh)) - 330px) * .8))}
.ch-actions{width:min(100%,460px)}
.ch-links{gap:6px;flex-wrap:nowrap}.ch-links button{padding:7px 11px;font-size:12px;white-space:nowrap}
@media (max-width:860px){.ch-frame{width:min(100%,300px)}.ch-links{flex-wrap:wrap}}
/* shorter laptop screens: tighten the oath and leaderboard folds so each still fits one screen */
@media (min-width:861px) and (max-height:780px){
  .splitcard .form input[type=text],.splitcard .form input[type=email]{height:34px}
  .splitcard .pk{padding:4px 10px}
  .splitcard .sc-left{padding:10px 18px;gap:5px}
  .lb2-board,.lb2-me{padding:12px 18px}
  .lb2-who{margin-bottom:8px}
  .lb2-stats{margin-bottom:8px}.lb2-stats div{padding:6px 10px}
  .lb2-goal{margin-bottom:8px;padding:6px 10px}
  .lb2-titles{gap:5px;margin-bottom:8px}.lb2-titles div{padding:6px 10px}
  .fold.board .lead{margin-top:6px}
}
@media (min-width:861px) and (max-height:780px){
  .fold.board .lead,.lb2-me .lad-note,.lb2-th,.lb2-titles{display:none}
}

/* hero strip: bold and outlined phrases alternate */
.hero .ticker .ticker-in span:nth-of-type(even){color:transparent;-webkit-text-stroke:1.6px #000}
/* heading accents: "behaviour" green, "scorers." blue */
.fix h2 em{color:#1DC797}
.fold.board h2.duo em{color:#005DFF}

/* ===== one game ===== */
.gf-picker{grid-template-columns:1fr}
.gf-picker .pick{min-height:clamp(260px,calc(42 * var(--vh)),380px)}
.lb2-me{display:flex;flex-direction:column}
.lb2-play{margin-top:auto}
.lb2-me .lb2-goal{margin-top:2px}
/* the three hero buttons share the width of the join bar */
.ctas > *{min-width:0;width:100%}
.ctas .cta-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:10px}
.ctas .vcard,.ctas .gcard{min-width:0;height:60px}
@media (max-width:860px){.gf-picker .pick{min-height:200px}}

/* ===== share block (after the oath and in the challenge fold): pastel until hovered ===== */
.sp{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid #C8D8FF;background:#E8F0FF;color:#000;border-radius:14px;padding:11px 14px;font:700 14px Poppins,sans-serif;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.sp:hover,.sp:focus-visible{background:#000;border-color:#000;color:#fff;outline:none}
.sp-main:hover,.sp-main:focus-visible{background:#005DFF;border-color:#005DFF;color:#fff}
.sp-wa:hover,.sp-wa:focus-visible{background:#1DC797;border-color:#1DC797;color:#000}
.sp-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sp-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.sp-links .sp{border-radius:99px;padding:8px 16px;font-size:13px}
.sp-h{font-weight:800;font-size:17px;margin:0 0 10px;color:#000}
.sharepad{width:100%;max-width:420px}
.done{align-items:center}
/* challenge fold: heading and name on the left, the card in the middle, send options on the right */
.ch-grid{grid-template-columns:1fr auto 1fr;gap:40px}
.ch-frame{width:min(100%,380px,calc((calc(100 * var(--vh)) - 200px) * .8))}
.ch-actions{width:100%;max-width:340px;justify-self:start}
.ch-big{margin-bottom:16px}
@media (max-width:860px){.ch-grid{grid-template-columns:1fr;gap:24px}.ch-card{order:-1}.ch-actions{max-width:none}.ch-frame{width:min(100%,300px)}}
.ch-grid{grid-template-columns:minmax(0,1fr) 380px minmax(0,1fr)}
@media (max-width:860px){.ch-grid{grid-template-columns:1fr}}
.ch-f{margin-top:20px}

/* ===== sketch round: icons share block, post-oath layout, games fold, hero row ===== */
.sp-icons{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.sp-ic{width:52px;height:52px;border-radius:50%;border:2px solid #000;background:#000;color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .18s,color .18s}
.sp-ic:hover,.sp-ic:focus-visible{background:#fff;color:#000;outline:none}
.sp-save{display:block;width:100%;border:2px solid #000;background:#fff;color:#000;border-radius:12px;padding:13px 16px;font:700 15px Poppins,sans-serif;cursor:pointer;transition:background .18s,color .18s}
.sp-save:hover,.sp-save:focus-visible{background:#000;color:#fff;outline:none}
.sp-h{font-weight:800;font-size:20px;margin:0 0 12px}
.done{display:grid;grid-template-columns:auto minmax(0,460px);gap:clamp(28px,calc(5 * var(--vw)),72px);justify-content:center;align-items:center;text-align:left}
.done-info .eyebrow{margin-bottom:6px}
.done-info h2{margin-top:4px}.done-info h2 em{font-style:normal;color:#005DFF}
.done-info .oath-sub{margin:10px 0 22px}
.sharepad{max-width:none}
@media (max-width:860px){.done{grid-template-columns:1fr;justify-items:center}.done-info{width:100%}}
/* games fold: text left, game right */
.gf-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(28px,calc(4 * var(--vw)),64px);align-items:center}
.gf-text h2{font-size:clamp(28px,calc(3.4 * var(--vw)),52px);line-height:1.06;margin:0}
.gf-text .lead{margin-top:16px;max-width:380px}
.gf-picker .pick{min-height:clamp(240px,calc(40 * var(--vh)),340px)}
@media (max-width:860px){.gf-grid{grid-template-columns:1fr}}
/* hero: the three buttons in one row, as wide as the join bar was */
@media (min-width:861px){
  .ctas{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .ctas .cta-row{display:contents}
  .ctas .btn-oath{padding:0 14px;height:64px;font-size:14px;gap:6px}
  .ctas .btn-oath .arr svg{width:22px;height:22px}
  .ctas .vcard,.ctas .gcard{height:64px;margin:0}
  .ctas .vthumb,.ctas .gthumb{flex:0 0 46px;width:46px}
  .ctas .vband{padding:0 8px;gap:4px}
  .ctas .vband .vlabel b{font-size:13px;line-height:1.15}
  .ctas .vband .arr{display:none}
  .ctas .play{width:22px;height:22px}
}

/* ===== round: games, hero spacing, challenge layout, scrolling leaderboard ===== */
.gf-text h2 em{font-style:normal;color:#1DC797}
.gf-picker .pick{min-height:clamp(340px,calc(58 * var(--vh)),520px)}
/* hero lines up with the other folds (same 1100px content width) */
@media (min-width:861px){
  .hero{padding-left:max(var(--pad),calc((calc(100 * var(--vw)) - 1200px) / 2));padding-right:max(var(--pad),calc((calc(100 * var(--vw)) - 1200px) / 2))}
  .hero-pic{right:max(var(--pad),calc((calc(100 * var(--vw)) - 1200px) / 2))}
}
/* challenge fold: text + name + share on the left, the card on the right */
.ch-grid{grid-template-columns:minmax(0,1fr) 380px;gap:64px}
.ch-text .lead{max-width:none}
.ch-text .ch-actions{max-width:420px;justify-self:auto;margin-top:18px}
.ch-text h2.duo span,.ch-text h2.duo em{white-space:normal;text-wrap:balance}   /* never clip a word */
@media (max-width:860px){.ch-grid{grid-template-columns:1fr}}
/* leaderboard: podium stays, ranks 4-25 scroll */
.lb2-pod{flex:none}
.lb2-board{min-height:0}
.lb2-scroll{flex:1 1 0;min-height:150px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#C8D8FF transparent}
.lb2-t thead th{position:sticky;top:0;background:#fff;z-index:1}

/* ===== spacing round ===== */
@media (min-width:861px){
  .hero{padding-left:max(var(--pad),calc((calc(100 * var(--vw)) - 1320px) / 2));padding-right:max(var(--pad),calc((calc(100 * var(--vw)) - 1320px) / 2))}
  .hero-pic{right:max(var(--pad),calc((calc(100 * var(--vw)) - 1320px) / 2))}
  .cert.card3d img{max-height:calc(calc(100 * var(--vh)) - 71px - 100px - 56px)}
}
/* wide screens: content is capped at 1220px, so the headline stops growing and never touches Sachin's shoulder */
@media (min-width:861px){
  .hero .h1{font-size:min(clamp(29px,min(calc(3.66 * var(--vw)),calc(6.5 * var(--vh)),56px),56px),var(--h1fit,999px))}
  .hero .sub{font-size:min(clamp(18px,min(calc(2.1 * var(--vw)),calc(3.7 * var(--vh))),36px),var(--subfit,999px))}
  .hero .ctas{max-width:min(600px,calc(42 * var(--vw)),var(--ctaw,9999px))}
  .hero .ctas.stack{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero .ctas.stack .btn-oath{grid-column:1 / -1}
}
/* challenge: icons and Save image share one row, as wide as the name field */
.ch-text .ch-actions{max-width:440px;width:100%}
.ch-actions .sp-icons{flex-wrap:nowrap;align-items:stretch;gap:8px;margin-bottom:0}
.ch-actions .sp-ic{width:46px;height:46px;flex:none}
.ch-actions .sp-save{flex:1;min-width:0;width:auto;height:46px;padding:0 10px;border-radius:23px}
.sharepad .sp-icons{flex-wrap:wrap}.sharepad .sp-save{flex:1 0 100%;margin-top:4px}
/* games fold: columns can't collide, heading a touch smaller */
.gf-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.gf-text h2{font-size:clamp(26px,calc(2.9 * var(--vw)),44px);overflow-wrap:anywhere}
/* game card: "Start game" bottom right */
.pick.p-sort .go{top:auto;right:16px;bottom:16px;width:auto;height:auto;padding:10px 20px;border-radius:99px;font:800 14px Poppins,sans-serif;background:#fff;color:#000;box-shadow:0 4px 14px rgba(0,0,0,.25)}

/* ===== round: heading line break, auto-rolling ranks, You card tiles, bigger challenge card ===== */
.gf-text h2 em{display:block}
.lb2-t{table-layout:fixed;width:100%}
.lb2-hd{flex:none}
.lb2-scroll{overflow:hidden;scrollbar-width:none}.lb2-scroll::-webkit-scrollbar{display:none}
.lb2-roll{animation:lbroll 75s linear infinite;will-change:transform}
.lb2-scroll:hover .lb2-roll{animation-play-state:paused}
@keyframes lbroll{to{transform:translateY(-50%)}}
@media (prefers-reduced-motion:reduce){.lb2-roll{animation:none}.lb2-scroll{overflow-y:auto}}
.lb2-stats{grid-template-columns:1fr 1fr;gap:10px;background:none;border:0;border-radius:0;margin-bottom:12px}
.lb2-stats div{border:2px solid #C8D8FF;border-radius:14px;background:#fff;padding:16px 14px;min-height:112px;display:flex;flex-direction:column;justify-content:space-between}
.lb2-stats dt{font-size:12px;font-weight:700;color:#3a4452}
.lb2-stats dd{font-size:34px;font-weight:800;line-height:1;letter-spacing:-.02em}
.lb2-goal{background:#fff;border:2px solid #C8D8FF;border-style:solid;padding:12px;font-size:15px;margin-bottom:12px}
.fold.board .lb2{margin-top:30px}
.fold.challenge .wrap{max-width:1280px}
.ch-grid{grid-template-columns:minmax(0,1fr) 456px}
.ch-frame{width:min(100%,456px,calc((calc(100 * var(--vh)) - 190px) * .8))}
.ch-text h2{font-size:clamp(26px,calc(2.9 * var(--vw)),42px)}
.fold.board .lead{max-width:none}
.fold.board .lb2{margin-top:22px}
.lb2-stats div{min-height:90px}
.lb2-col.first .lb2-bar{height:118px}.lb2-col.second .lb2-bar{height:88px}.lb2-col.third .lb2-bar{height:68px}
.lb2-av{width:42px;height:42px}

.fix h2 em:after{display:none}
.gf-text h2{line-height:1.2}
.lb2-me .lb2-stats{flex:1;grid-auto-rows:1fr;margin-bottom:12px}
.lb2-me .lb2-stats div{min-height:0}

/* You card tiles: content centred, icon on top, big number, caption */
.lb2-me .lb2-stats div{align-items:center;justify-content:center;text-align:center;gap:6px;padding:14px 10px}
.lb2-ico{width:46px;height:46px;border-radius:50%;background:#E2F6EE;border:2px solid #C8D8FF;display:grid;place-items:center;font:800 20px Poppins,sans-serif;color:#005DFF;margin-bottom:4px}
.lb2-me .lb2-stats dd{order:2;font-size:44px;text-align:center}
.lb2-me .lb2-stats dt{order:3;font-size:13px;color:#000;font-weight:800}
.lb2-me .lb2-stats small{order:4;font-size:12px;color:#3a4452}
.lb2-me .lb2-stats .lb2-ico{order:1}

/* ===== wider side margins (-50px each side on desktop) ===== */
@media (min-width:861px){
  :root{--pad:max(18px,calc(clamp(20px,calc(5 * var(--vw)),72px) - 50px))}
}

/* every section headline uses the hero headline's size (set by the hero fit script) */
@media (min-width:861px){
  .fold h2,.fold .oath-head h2,.fold .gf-text h2,.fold .ch-text h2{font-size:var(--hsize,clamp(29px,min(calc(3.66 * var(--vw)),calc(6.5 * var(--vh)),56px),56px))}
}

/* hero: Sachin sits 25% of his width further right */
@media (min-width:861px){ .hero-pic{translate:25% 0} }
/* equal space above and below the content in every fold: each fold is one full screen, the nav takes the top strip,
   and the content is centred in what is left, so nothing from the next fold peeks in */
@media (min-width:861px){
  .fold:not(.oath){min-height:calc(100 * var(--vh));padding-top:var(--navh,71px);padding-bottom:0}
  .fold.oath{padding-top:var(--navh,71px);padding-bottom:calc(32px + clamp(18px,calc(2 * var(--vw)),30px) * 1.5)}
}

/* =====================================================================
   MOBILE ONLY (phones, 860px and narrower). Nothing here applies to desktop.
   One fold = one screen, content centred, equal space above and below.
   ===================================================================== */
@media (max-width:860px){
  :root{--mnav:72px}
  /* scrolling strip: the hero's -22px bottom margin was clipping its lower half, so the text looked stuck to the bottom */
  html body .hero .ticker{margin-bottom:0}
  html body .hero .ticker .ticker-in span{line-height:1.2}
  html body .hero .ticker,html body .oath .ticker{padding:14px 0}
  /* hero: one full screen, photo stands on the strip */
  html body .hero{min-height:100vh;min-height:100svh}
  html body .hero .hero-pic{overflow:hidden;flex:1 1 0;min-height:300px;height:auto;width:100%;aspect-ratio:auto;margin:6px 0 0;align-self:stretch}
  html body .hero .hero-pic img{position:absolute;left:0;right:0;top:0;bottom:auto;margin:0 auto;height:128%;width:auto;max-width:none;object-fit:contain;object-position:top}   /* a little larger, feet tucked behind the strip */
  /* every other fold: one full screen, content centred between the nav and the bottom edge */
  html body .fold{min-height:0;display:flex;flex-direction:column;justify-content:center;padding-top:32px;padding-bottom:32px;scroll-margin-top:var(--mnav)}
  html body .fold.oath{padding-bottom:72px;padding-top:32px}
  html body .fold.oath .wrap{margin-bottom:24px}
  html body .fold.oath .ticker{margin-top:auto}
  html body .fold .doodle{display:none}   /* decorative shapes were sitting on top of the headings */
  /* games fold: text first, card below (a later desktop rule was keeping two columns) */
  html body .fold.gamesfold .gf-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  html body .fold.gamesfold .gf-text .lead{max-width:none}
  html body .gf-picker{grid-template-columns:minmax(0,1fr)}
  html body .gf-picker .pick{min-height:300px}
  /* the "Start game" button sits below the description instead of on top of it */
  html body .pick.p-sort .go{position:relative;z-index:2;order:3;align-self:flex-start;margin-top:12px;right:auto;bottom:auto;top:auto}
  /* challenge fold: one column that fits the phone */
  html body .fold.challenge .ch-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  html body .fold.challenge .wrap,html body .fold.challenge .ch-text,html body .fold.challenge .ch-card{min-width:0;max-width:100%}
  html body .ch-text .ch-actions{max-width:none;width:100%}
  html body .ch-actions .sp-icons{flex-wrap:wrap}
  html body .ch-actions .sp-save{flex:1 0 100%;margin-top:4px}
  html body .fold.challenge .ch-text h2,html body .fold.challenge .ch-text .lead{max-width:100%}
  html body .fold.challenge .ch-text .lead{margin-top:12px}
}

/* =====================================================================
   DESKTOP: side margins scale with the screen. The content columns used fixed pixel caps (1100-1340px), which only
   look right when the scaled page is ~1800px wide. On a narrower scaled page the caps filled the whole width and everything
   hugged the edges. Now the content is at most 74.4% of the page width (same proportion as the approved laptop),
   and the fixed caps still apply above that, so the approved laptop is unchanged.
   ===================================================================== */
@media (min-width:861px){
  html body .wrap{max-width:min(1340px,calc(74.4 * var(--vw)))}
  html body .fold.gamesfold .wrap,html body .fold.board .wrap{max-width:min(1200px,calc(74.4 * var(--vw)))}
  html body .fold.challenge .wrap{max-width:min(1280px,calc(74.4 * var(--vw)))}
  html body .pledge,html body .done{max-width:min(1220px,calc(74.4 * var(--vw)))}
  html body .hero{padding-left:max(var(--pad),calc((100 * var(--vw) - min(1320px,calc(74.4 * var(--vw)))) / 2));padding-right:max(var(--pad),calc((100 * var(--vw) - min(1320px,calc(74.4 * var(--vw)))) / 2))}
  html body .hero-pic{right:max(var(--pad),calc((100 * var(--vw) - min(1320px,calc(74.4 * var(--vw)))) / 2))}
}

/* leaderboard fold: a slightly shorter podium and list so there is more room above and below it */
@media (min-width:861px){
  html body .lb2-col.first .lb2-bar{height:112px}
  html body .lb2-col.second .lb2-bar{height:84px}
  html body .lb2-col.third .lb2-bar{height:64px}
  html body .lb2-scroll{min-height:100px}
  html body .lb2-pod{margin:8px 0 10px}
  html body .lb2-board,html body .lb2-me{padding:16px 22px}
}

/* =====================================================================
   Problem + fix in one fold; headline accent colours alternate blue / green down the page
   (problem blue, oath green, games blue, leaderboard green, challenge blue)
   ===================================================================== */
/* problem and fix as one rail: a dot per step, joined by a line */
.pf-rail{margin-top:clamp(24px,calc(4 * var(--vh)),36px);max-width:540px}
.pf-step{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:16px}
.pf-rl{display:flex;flex-direction:column;align-items:center}
.pf-dot{flex:none;width:26px;height:26px;border-radius:50%;background:#005DFF}
.pf-dot.green{background:#1DC797}
.pf-line{flex:1;width:3px;margin:6px 0;border-radius:2px;background:#005DFF;opacity:.3}
.pf-c{padding-top:2px}
.pf-step:first-child .pf-c{padding-bottom:clamp(14px,calc(2.4 * var(--vh)),22px)}
.pf-k{margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#0B8F6B}
.pf-k.blue{color:#005DFF}
.pf-c .lead{margin:0;max-width:none}
.pf-body p{margin:0;font-size:clamp(17px,calc(1.3 * var(--vw)),20px);font-weight:600;line-height:1.4;letter-spacing:-.005em;color:#000}
@media (min-width:861px){ .pf-rail{max-width:600px} .pf-body p{text-wrap:balance} }
html body .fold.problem .wrap.two{align-items:center}
html body .fold.oath .oath-head h2 em,html body .fold.oath .done-info h2 em{color:#1DC797}
html body .fold.gamesfold .gf-text h2 em{color:#005DFF}
html body .fold.board h2.duo em{color:#1DC797}
html body .fold.challenge h2.duo em{color:#005DFF}
/* the oath fold no longer has the strip at its bottom: same equal space above and below as the other folds */
@media (min-width:861px){ html body .fold.oath{padding-bottom:0} }
@media (max-width:860px){ html body .fold.oath{padding-bottom:32px} }

/* =====================================================================
   Home fold: the two secondary buttons are outlined pills (icon, label, arrow)
   ===================================================================== */
html body .ctas .pillbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 18px;border:1.5px solid #C4CAD6;border-radius:14px;background:rgba(255,255,255,.7);color:#000;font:600 15px/1.15 Poppins,system-ui,sans-serif;text-decoration:none;cursor:pointer;width:auto;min-width:0;white-space:nowrap;transition:border-color .2s,background .2s,transform .2s}
html body .ctas .pillbtn:hover{border-color:#1DC797;background:#fff;transform:translateY(-2px)}
html body .ctas .pillbtn b{font-weight:700}
html body .ctas .pillbtn .pb-ic{flex:none}
html body .ctas .pillbtn .pb-ar{flex:none;margin-left:2px}
@media (min-width:861px){
  /* all three on one line; the hero fit script adds .stack (button on top, pills below) only when the line would touch Sachin */
  html body .ctas,html body .hero .ctas{display:flex;flex-wrap:nowrap;align-items:stretch;gap:12px;max-width:var(--ctaw,none)}
  html body .ctas .cta-row{display:contents}
  html body .ctas .btn-oath{flex:0 1 auto;width:auto;min-width:0;white-space:normal;text-align:left}
  html body .ctas .pillbtn{height:auto;min-height:48px;white-space:normal;padding:0 14px;gap:8px;font-size:14px;line-height:1.2;text-align:left;justify-content:flex-start;flex:0 1 auto}
  html body .ctas .pillbtn .pb-ic{width:24px;height:24px}
  html body .ctas .pillbtn .pb-ar{width:18px;height:18px;margin-left:0}
  html body .ctas .btn-oath{padding-left:18px;padding-right:18px;font-size:15px;gap:10px}
  html body .hero .ctas.stack{display:grid;grid-template-columns:auto auto;justify-content:start}
  html body .hero .ctas.stack .btn-oath{grid-column:1 / -1;width:100%}
}
@media (max-width:860px){
  /* phone: all three buttons on one line, equal thirds (blue button text and arrow; pills with the icon above the label) */
  html body .ctas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:stretch}
  html body .ctas .cta-row{display:contents}
  html body .ctas .btn-oath{grid-column:auto;height:auto;min-height:76px;padding:8px 12px;gap:6px;font-size:14px;line-height:1.2;white-space:normal;text-align:left;justify-content:space-between}
  html body .ctas .btn-oath .arr svg{width:18px;height:18px}
  html body .ctas .pillbtn{flex-direction:column;justify-content:center;height:auto;min-height:76px;padding:8px 6px;gap:5px;font-size:12.5px;line-height:1.2;white-space:normal;text-align:center}
  html body .ctas .pillbtn .pb-ic{width:26px;height:26px}
  html body .ctas .pillbtn .pb-ar{display:none}
}
@media (max-width:340px){
  html body .ctas .btn-oath{font-size:12.5px;padding:8px 9px}
  html body .ctas .pillbtn{font-size:11.5px;padding:8px 4px}
}

/* problem + fix fold (desktop): the counter box is exactly as tall as the text beside it */
@media (min-width:861px){
  html body .fold.problem .wrap.two{align-items:stretch}
  html body .fold.problem .meter{display:flex;flex-direction:column;justify-content:space-between;align-self:stretch}
}

/* =====================================================================
   Main menu: Products, Solutions, Explore Recykal, Contact Us, Media Kit
   ===================================================================== */
.nav-links .nv-item{position:relative}
.nav-links .nv-top{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:6px 0;font:inherit;font-weight:500;color:inherit;cursor:pointer}
.nav-links .nv-top .nv-ar{transition:transform .2s}
.nav-links .nv-dd{position:absolute;top:100%;left:-14px;margin-top:6px;background:#fff;border:1px solid rgba(0,0,0,.09);border-radius:16px;box-shadow:0 18px 40px rgba(0,30,80,.14);padding:8px;z-index:70;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s,transform .18s,visibility .18s}
.nav-links .nv-dd:before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-links .nv-list{min-width:220px}
.nav-links .nv-dd a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px!important;border-radius:10px;font-size:14.5px;font-weight:500;color:#000;white-space:nowrap}
.nav-links .nv-dd a:after{display:none!important}
.nav-links .nv-dd a:hover{background:#E8F0FF;color:#005DFF}
.nav-links .nv-item:hover>.nv-dd,.nav-links .nv-item:focus-within>.nv-dd,.nav-links .nv-item.open>.nv-dd{opacity:1;visibility:visible;transform:none}
.nav-links .nv-item:hover .nv-ar,.nav-links .nv-item.open .nv-ar{transform:rotate(180deg)}
.nav-links .nv-sub{position:relative}
.nav-links .nv-fly{position:absolute;left:100%;top:-8px;margin-left:4px;min-width:200px;background:#fff;border:1px solid rgba(0,0,0,.09);border-radius:16px;box-shadow:0 18px 40px rgba(0,30,80,.14);padding:8px;opacity:0;visibility:hidden;transform:translateX(-4px);transition:opacity .18s,transform .18s,visibility .18s}
.nav-links .nv-fly:before{content:"";position:absolute;top:0;bottom:0;left:-8px;width:8px}
.nav-links .nv-sub:hover>.nv-fly,.nav-links .nv-sub:focus-within>.nv-fly{opacity:1;visibility:visible;transform:none}
.nav-links .nv-ch{flex:none;opacity:.6}
.nav-links .nv-mega{display:grid;grid-template-columns:1fr 1fr;gap:6px 28px;padding:20px 22px;min-width:470px;border-radius:20px}
.nav-links .nv-mega .nv-col{display:flex;flex-direction:column;gap:2px}
.nav-links .nv-h{margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#6b7280}
.nav-links .nv-mega a{font-size:16px;padding:9px 10px!important;margin:0 -10px}
.nav-links .nv-plain{padding:6px 0}
@media (max-width:860px){
  .nav-links{max-height:calc(100vh - 70px);overflow:auto;gap:0}
  .nav-links .nv-item{width:100%;border-bottom:1px solid #eee}
  .nav-links .nv-top{width:100%;justify-content:space-between;padding:14px 0;font-size:17px}
  .nav-links .nv-dd{position:static;margin:0;border:0;border-radius:0;box-shadow:none;padding:0 0 10px;opacity:1;visibility:visible;transform:none;display:none;min-width:0}
  .nav-links .nv-dd:before{display:none}
  .nav-links .nv-item.open>.nv-dd{display:block}
  .nav-links .nv-item:hover>.nv-dd{display:none}
  .nav-links .nv-item.open:hover>.nv-dd{display:block}
  .nav-links .nv-dd a{width:auto;border-bottom:0;font-size:16px;padding:11px 8px!important}
  .nav-links .nv-mega{padding:0 0 10px;min-width:0}
  .nav-links .nv-item.open>.nv-mega{display:block}
  .nav-links .nv-mega .nv-col{margin-bottom:10px}
  .nav-links .nv-mega a{margin:0}
  .nav-links .nv-fly{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-left:2px solid #E8F0FF;border-radius:0;margin:0 0 4px 14px;padding:0 0 0 6px;min-width:0}
  .nav-links .nv-fly:before{display:none}
  .nav-links .nv-ch{display:none}
  .nav-links .nv-plain{padding:14px 0!important;border-bottom:1px solid #eee}
}

/* Solutions menu: group titles are labels, their pages open in a side panel; EPR and Source Supply expand in place */
.nav-links .nv-subtop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:10px;font-size:14.5px;font-weight:500;color:#000;white-space:nowrap;cursor:default;outline:0}
.nav-links .nv-sub:hover>.nv-subtop,.nav-links .nv-sub:focus-within>.nv-subtop{background:#E8F0FF;color:#005DFF}
.nav-links .nv-grp>a .nv-dn{flex:none;opacity:.6;transition:transform .2s}
.nav-links .nv-grp:hover>a .nv-dn,.nav-links .nv-grp:focus-within>a .nv-dn{transform:rotate(180deg)}
.nav-links .nv-inl{display:none;padding:0 0 4px 12px}
.nav-links .nv-inl a{font-weight:400!important;font-size:14px!important;padding:8px 14px!important}
.nav-links .nv-grp:hover>.nv-inl,.nav-links .nv-grp:focus-within>.nv-inl{display:block}
@media (max-width:860px){
  .nav-links .nv-subtop{font-size:16px;padding:11px 8px;cursor:default;color:#005DFF;font-weight:600;background:none}
  .nav-links .nv-sub:hover>.nv-subtop{background:none;color:#005DFF}
  .nav-links .nv-grp>a .nv-dn{display:none}
  .nav-links .nv-inl{display:block;padding:0 0 4px 8px;border-left:2px solid #E8F0FF;margin-left:10px}
  .nav-links .nv-fly{margin-bottom:8px}
}

/* Media Kit: a filled, fully rounded pill in the action blue */
html body .nav-links a.nv-media{background:#005DFF;color:#fff;border-radius:999px;padding:10px 22px;font-weight:600;line-height:1.2;transition:background .2s,transform .2s,box-shadow .2s}
html body .nav-links a.nv-media:after{display:none}
html body .nav-links a.nv-media:hover{background:#0047CC;transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,93,255,.28)}
@media (max-width:860px){
  html body .nav-links a.nv-media{width:auto;align-self:flex-start;margin:14px 0 6px;padding:12px 26px!important;border-bottom:0;font-size:16px}
}

/* live leaderboard: empty / loading line and the "put your score on the board" box on the result screen */
.lb2-empty{margin:0;padding:22px 10px;text-align:center;color:#4a5560;font-size:14px}
.lb2-col.empty{opacity:.45}
.lb2-col.empty .lb2-av{background:#fff}
.lb-post{margin:12px 0;padding:14px 16px;border:2px solid #C8D8FF;border-radius:16px;background:#fff;text-align:center;font-family:Poppins,system-ui,sans-serif}
.lb-k{margin:0 0 8px;font-size:15px;font-weight:600;color:#000}
.lb-s{margin:0 0 6px;font-size:14px;color:#1c2330}
.lb-n{margin:8px 0 0;font-size:12px;color:#4a5560}
.lb-err{margin:6px 0 0;font-size:13px;font-weight:600;color:#C0392B}
.lb-form{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.lb-form input{flex:1 1 160px;min-width:0;height:44px;padding:0 14px;border:2px solid #C8D8FF;border-radius:12px;font:500 15px Poppins,system-ui,sans-serif;color:#000;background:#fff}
.lb-form input:focus{outline:0;border-color:#005DFF}
.lb-form .btn{flex:0 0 auto;height:44px;padding:0 18px}

/* =====================================================================
   Round: smaller oath button, calmer games heading on phones, readable game-card text, safer "SIX!"
   ===================================================================== */
html body .splitcard .submitrow{align-items:center;gap:6px;margin-top:4px}
html body .splitcard .submitrow .btn{width:auto;min-width:0;padding:11px 30px;font-size:15px;font-weight:700;border-radius:12px}
@media (max-width:860px){
  html body .fold.gamesfold .gf-text h2{margin-top:14px}
  html body .fold.gamesfold .gf-text .eyebrow{margin-bottom:0}
  /* text on the game card: a soft dark band behind it so it can always be read */
  html body .pick.p-sort .cover:after{display:block;content:"";position:absolute;left:0;right:0;bottom:0;height:72%;background:linear-gradient(to top,rgba(4,18,52,.9) 0%,rgba(4,18,52,.72) 45%,rgba(4,18,52,0) 100%)}
  html body .pick.p-sort b{font-size:22px}
  html body .pick.p-sort small{font-size:14px;font-weight:500;line-height:1.35;opacity:1;text-shadow:0 1px 2px rgba(0,0,0,.7)}
}

/* Media Kit is the first item in the menu */
@media (min-width:861px){ html body .nav-links a.nv-media{margin-right:6px} }
@media (max-width:860px){ html body .nav-links a.nv-media:first-child{margin:8px 0 12px} }

/* phones: Media Kit stays in the header, just left of the menu button, at all times */
.nv-media-top{display:none}
@media (max-width:860px){
  html body .nav .nv-media-top{display:inline-flex;align-items:center;margin-left:auto;margin-right:6px;padding:8px 16px;border-radius:999px;background:#005DFF;color:#fff;font:600 14px/1.2 Poppins,system-ui,sans-serif;white-space:nowrap;text-decoration:none}
  html body .nav .nv-media-top:active{background:#0047CC}
  html body .nav-links a.nv-media{display:none}
}
@media (max-width:340px){
  html body .nav .nv-media-top{padding:7px 12px;font-size:13px;margin-right:2px}
}

/* desktop: the header lines up with the page content (same side margins as the folds). Logo on the left content edge, the menu strip
   ends on the right content edge with no empty space after "Contact Us". Once the page is scrolled, the "Join Sachin's team" button
   appears at the right edge and the strip slides left to make room. */
@media (min-width:861px){
  html body .nav{display:flex;align-items:center;justify-content:space-between;
    padding-left:max(var(--pad),calc((100 * var(--vw) - min(1320px,calc(74.4 * var(--vw)))) / 2));
    padding-right:max(var(--pad),calc((100 * var(--vw) - min(1320px,calc(74.4 * var(--vw)))) / 2))}
  html body .nav .nav-links{display:contents}
  html body .nav .nv-strip{display:flex;align-items:center;gap:clamp(14px,calc(2.2 * var(--vw)),34px);font-weight:500;font-size:15px;margin-left:auto;transition:margin-right .35s ease}
  html body .nav .nav-cta{position:absolute;top:0;bottom:0;margin-top:auto;margin-bottom:auto;height:max-content;right:max(var(--pad),calc((100 * var(--vw) - min(1320px,calc(74.4 * var(--vw)))) / 2))}
  html body.past-hero .nav .nv-strip{margin-right:210px}
}
@media (max-width:860px){ html body .nv-strip{display:contents} }

/* name asked on the game's intro screen */
.in-name{display:block;margin:12px 0 4px;text-align:left}
.in-name span{display:block;font-size:12px;font-weight:700;margin-bottom:6px;color:#000}
.in-name input{width:100%;box-sizing:border-box;height:46px;border:2px solid #C8D8FF;border-radius:12px;padding:0 14px;font:500 16px Poppins,system-ui,sans-serif;color:#000;background:#fff}
.in-name input:focus{outline:0;border-color:#005DFF}
.in-name input.bad{border-color:#C0392B}
.in-name small{display:block;margin-top:6px;font-size:12px;color:#4a5560}
.in-as{margin:10px 0 4px;font-size:14px;color:#1c2330}

/* game intro: everything, including the name box and Start, fits in one view */
@media (min-width:861px){
  html body .intro{flex-direction:row;align-items:stretch;gap:28px}
  html body .intro .in-art{flex:0 0 38%;aspect-ratio:auto;max-height:none;min-height:300px}
  html body .intro .in-body{flex:1;min-width:0;padding:2px 0 0}
  html body .intro .in-steps{margin-top:12px}
  html body .intro .in-steps li{padding:8px 12px;font-size:14px}
  html body .intro .in-name{margin:10px 0 2px}
  html body .intro .in-name input{height:42px}
  html body .intro .in-bins{align-items:center;gap:6px;padding:0 12px}
  html body .intro .in-bins span{width:30%;max-width:120px}
}
@media (max-width:860px) and (max-height:720px){
  html body .intro .in-art{max-height:72px}
  html body .intro .in-body{padding-top:8px}
  html body .intro .in-body h3{font-size:24px;margin-bottom:4px}
  html body .intro .in-line{font-size:14px}
  html body .intro .in-steps{margin-top:10px;gap:6px}
  html body .intro .in-steps li{padding:6px 10px;font-size:13px}
  html body .intro .in-steps b{flex-basis:22px;height:22px;font-size:12px}
  html body .intro .in-best{margin-top:8px}
  html body .intro .in-name{margin:8px 0 0}
  html body .intro .in-name input{height:42px}
  html body .intro .in-name small{display:none}
}

/* result screen: the real score card */
html body .res-top.has-card{background:none;border:0;box-shadow:none;padding:0;margin:0 auto}
html body .res-card{display:block;width:min(100%,320px);height:auto;margin:0 auto;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.12)}

/* oath fold: clear air between the headline and the card */
@media (min-width:861px){html body .fold.oath .oath-head{margin-bottom:26px}}
@media (max-width:860px){html body .fold.oath .oath-head{margin-bottom:14px}}

/* "Hear it from Sachin": the film plays in a pop-up on the page */
.vmodal{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;padding:16px}
.vmodal[hidden]{display:none}
.vbox{position:relative;width:min(960px,92vw,calc(82vh * 16 / 9));aspect-ratio:16/9;background:#000;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.vframe,.vframe iframe{width:100%;height:100%;border:0;border-radius:14px;display:block}
.vclose{position:absolute;top:-48px;right:0;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:#000;font-size:26px;line-height:1;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center}
.vclose:focus-visible{outline:3px solid #1DC797;outline-offset:2px}
@media (max-width:860px){.vbox{width:100%;max-height:none}.vclose{top:-52px}}
.vbox.tall{width:min(420px,92vw);height:min(calc(100 * var(--vh) - 90px),760px);aspect-ratio:auto;background:#fff}
.vbox.tall .vframe,.vbox.tall .vframe iframe{border-radius:14px;background:#fff}

/* Leaderboard: a long name can never push the card out of the screen. Podium names wrap onto at most three lines; names in the list wrap onto at most two lines, and the name on the "you" card ends in "..." when it does not fit. */
.fold.board .lb2{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
@media (max-width:860px){.fold.board .lb2{grid-template-columns:minmax(0,1fr)}}
.lb2>*,.lb2-board,.lb2-me,.lb2-pod,.lb2-col{min-width:0}
.lb2-col b{white-space:normal;overflow-wrap:anywhere;line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
@media (max-width:480px){.lb2-col b{font-size:13px}}
.lb2-t{table-layout:fixed}
.lb2-t td:nth-child(2){overflow:hidden}
.lb2-pl{min-width:0}
.lb2-pl .lb2-av,.lb2-pl .lb2-you{flex:none}
.lb2-pl b{min-width:0;overflow:hidden;white-space:normal;overflow-wrap:anywhere;line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.lb2-who>span:last-child{min-width:0}
.lb2-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
@media (max-width:360px){.lb2-t col:nth-child(1){width:34px!important}.lb2-t col:nth-child(3){width:64px!important}.lb2-pl{gap:6px}.lb2-pl .lb2-av{width:30px;height:30px;font-size:11px}}
/* name guard message under a name box */
.ng-err{display:block;color:#C62828;font-size:12px;font-style:normal;font-weight:600;line-height:1.3;margin-top:5px}