/* Live phone screens (English rebuilds). 1em = width/30, so --w scales the whole phone. */
.ph{--w:300px;font-size:calc(var(--w)/30);width:var(--w);aspect-ratio:300/640;flex:none;position:relative;background:#111;border-radius:3.6em;padding:.7em;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#111;box-shadow:0 1.2em 3em #0007}
.ph-in{position:relative;width:100%;height:100%;border-radius:3em;overflow:hidden;background:#f3f4f6;display:flex;flex-direction:column}
.ph .sb{display:flex;justify-content:space-between;align-items:center;padding:1.2em 2em .5em;font-size:1.2em;font-weight:700;flex:none}
.ph .sbi{width:3.4em;height:1em;border-radius:.3em;background:currentColor;opacity:.85}
.ph .hd{display:flex;align-items:center;justify-content:space-between;padding:.6em 1.6em 1em;font-size:1.5em;flex:none}
.ph .hd b{font-weight:700;font-size:1em}
.ph .hd i{width:1em;height:1em}
.ph .bk{border-left:.18em solid #0a7a2f;border-bottom:.18em solid #0a7a2f;transform:rotate(45deg) scale(.55)}
.ph .bd{padding:0 1.6em;display:flex;flex-direction:column;gap:1.2em;flex:1;min-height:0;overflow:hidden}
.ph .hi{position:absolute;bottom:.8em;left:50%;width:11em;height:.45em;margin-left:-5.5em;border-radius:1em;background:#111}
.ph .big{font-size:3em;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ph .mut{color:#6b7078;font-size:1.15em}
.ph .row{display:flex;align-items:center;gap:1.2em;padding:.9em 0;animation:none;width:auto}
.ph .row .t{flex:1;min-width:0}.ph .row .t b{display:block;font-size:1.35em;font-weight:600}.ph .row .t span{font-size:1.1em;color:#6b7078}
.ph .row .am{font-size:1.35em;font-weight:600;font-variant-numeric:tabular-nums}
.ph .ic{width:3.6em;height:3.6em;border-radius:50%;flex:none;display:grid;place-items:center;font-size:1.1em;font-weight:700;color:#fff}
.ph .card{background:#fff;border-radius:1.6em;padding:1.4em}
.ph .tag{display:inline-block;background:#fde9c9;color:#7a4a00;border-radius:2em;padding:.5em 1.1em;font-size:1.1em;font-weight:600}
.ph .btn2{background:#1f9d3c;color:#fff;border-radius:1.2em;text-align:center;padding:1.3em;font-size:1.4em;font-weight:700}
.ph .seg{display:flex;gap:.3em;height:.9em}.ph .seg span{border-radius:1em;transform-origin:left}
.ph .bars{display:flex;align-items:flex-end;gap:.6em;height:12em}
.ph .bars span{flex:1;border-radius:.4em .4em 0 0;height:var(--h);transform-origin:bottom;background:#2fbf4a}
.ph .lbl{display:flex;justify-content:space-between;font-size:1em;color:#8a8f98;margin-top:.5em}
.ph .chips{display:flex;gap:.7em}.ph .chips span{background:#e4e6ea;border-radius:2em;padding:.6em 1.2em;font-size:1.15em;font-weight:600}.ph .chips .on{background:#111;color:#fff}
.ph .tg{width:4.2em;height:2.4em;border-radius:2em;background:#c8ccd2;position:relative;flex:none}
.ph .tg:after{content:"";position:absolute;left:.25em;top:.25em;width:1.9em;height:1.9em;border-radius:50%;background:#fff;transition:none}
.ph .tg.on{background:#1f9d3c}
.ph .tg.on:after{left:2.05em}
.ph .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:.5em .2em;text-align:center;font-size:1.3em}
.ph .cal span{padding:.5em 0;border-radius:50%;position:relative}.ph .cal .d{color:#9aa0a8;font-size:.8em;font-weight:600}
.ph .cal .pay:after{content:"";position:absolute;left:50%;bottom:.1em;width:.35em;height:.35em;margin-left:-.18em;border-radius:50%;background:#f0a22a}
.ph .cal .today{background:#1f9d3c;color:#fff;font-weight:700}
.ph .teal{background:linear-gradient(160deg,#1fb5a8,#0f6d73);color:#fff}
.ph .teal .mut{color:#d3f4f1}

/* animation: play class toggled by JS */
.ph .a{opacity:0;transform:translateY(1em)}
.ph.play .a{animation:phup .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i,0)*90ms + 120ms)}
.ph .gx{transform:scaleX(0);transform-origin:left}
.ph.play .gx{animation:phgx 1.1s cubic-bezier(.3,.7,.2,1) forwards;animation-delay:calc(var(--i,0)*120ms + 250ms)}
.ph .bars span{transform:scaleY(0)}
.ph.play .bars span{animation:phgy .9s cubic-bezier(.3,.7,.2,1) forwards;animation-delay:calc(var(--i,0)*80ms + 250ms)}
.ph .arc{stroke-dasharray:0 100}
.ph.play .arc{animation:pharc 1.5s cubic-bezier(.3,.7,.2,1) forwards;animation-delay:calc(var(--i,0)*150ms + 200ms)}
.ph.play .tg.on:after{animation:phknob .4s ease backwards;animation-delay:calc(var(--i,0)*350ms + 600ms)}
.ph.play .tg.on{animation:phtg .4s ease backwards;animation-delay:calc(var(--i,0)*350ms + 600ms)}
.ph.play .pulse{animation:phpulse 1.6s ease-in-out infinite;animation-delay:1s}
@keyframes phup{to{opacity:1;transform:none}}
@keyframes phgx{to{transform:scaleX(1)}}
@keyframes phgy{to{transform:scaleY(1)}}
@keyframes pharc{to{stroke-dasharray:var(--d) 100}}
@keyframes phknob{from{left:.25em}}
@keyframes phtg{from{background:#c8ccd2}}
@keyframes phpulse{50%{box-shadow:0 0 0 .6em #1f9d3c33;background:#d8f2de}}
@media(prefers-reduced-motion:reduce){.ph .a{opacity:1;transform:none;animation:none!important}.ph .gx,.ph .bars span{transform:none;animation:none!important}.ph .arc{stroke-dasharray:var(--d) 100;animation:none!important}.ph .pulse{animation:none!important}}

/* phone showcases */
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(18px,3vw,36px);justify-items:center;margin-top:8px}
.pgrid .ph{--w:min(300px,78vw)}
.pcap{max-width:300px;text-align:left;margin:14px auto 0;font:500 14px/1.5 var(--body);color:var(--slab-mute)}
.pcap b{color:var(--slab-ink);display:block;font-size:15px;margin-bottom:2px}
.mq .ph{--w:230px}
.gal .ph{--w:210px}
.gal .storyph{height:calc(270px*2.1);width:270px;flex:none;display:block;border-radius:30px;object-fit:cover;cursor:zoom-in;background:#222}
.rows>.row{align-items:flex-start}

/* tip cards */
.tipc{background:#fff;color:#111;border-radius:14px;padding:16px;position:relative;font:500 14px/1.45 var(--body);opacity:0;transform:translateY(14px)}
.tipc.in{animation:phup .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i,0)*140ms)}
.tipc .tg2{display:inline-block;border-radius:20px;padding:5px 11px;font-size:12px;font-weight:700;margin-bottom:34px}
.tipc b{display:block;font-size:15px;margin-bottom:6px}.tipc span{color:#6b7078}
.tipc i{position:absolute;right:12px;top:8px;font-style:normal;color:#9aa0a8}
@media(prefers-reduced-motion:reduce){.tipc{opacity:1;transform:none;animation:none!important}}

/* HTML slides */
.sdeck{margin-top:6px}
.sstage{position:relative;container-type:inline-size;aspect-ratio:16/9;background:linear-gradient(140deg,#0c1712,#0a100d 60%,#102a22);border:1px solid var(--slab-line);border-radius:14px;overflow:hidden}
.sl{position:absolute;inset:0;padding:5cqw 6cqw;display:flex;flex-direction:column;justify-content:center;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s}
.sl.on{opacity:1;visibility:visible}
.sl .ey{font:700 1.2cqw var(--body);letter-spacing:.12em;text-transform:uppercase;color:#7fd39b;margin-bottom:1.6cqw}
.sl h4{font:800 4cqw/1.1 var(--display);margin:0 0 1.6cqw;max-width:20em;text-wrap:balance}
.sl p{font:500 1.7cqw/1.5 var(--body);color:#b8cbc0;margin:0;max-width:34em}
.sl .anim{opacity:0;transform:translateY(2cqw)}
.sl.on .anim{animation:phup .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i,0)*140ms + 200ms)}
.sl .big60{font:800 15cqw/1 var(--display);color:#fff;letter-spacing:-.03em}
.sl .two{display:grid;grid-template-columns:1fr 1fr;gap:4cqw;align-items:center}
.sl .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6cqw;align-items:end;margin-top:2cqw}
.sl .step{background:#ffffff1c;border-radius:1.4cqw;padding:1.6cqw;font:700 1.7cqw/1.3 var(--display)}
.sl .step small{display:block;font:500 1.2cqw/1.4 var(--body);color:#b8cbc0;margin-top:.6cqw}
.sl .step:nth-child(1){height:11cqw}.sl .step:nth-child(2){height:15cqw}.sl .step:nth-child(3){height:19cqw}.sl .step:nth-child(4){height:23cqw;background:#fff;color:#111}.sl .step:nth-child(4) small{color:#4a5a52}
.sl .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6cqw;margin-top:2cqw}
.sl .tiles.three{grid-template-columns:repeat(3,1fr)}
.sl .tile{background:#ffffff14;border:1px solid #ffffff22;border-radius:1.4cqw;padding:1.8cqw;font:700 1.8cqw/1.25 var(--display)}
.sl .tile small{display:block;font:500 1.25cqw/1.45 var(--body);color:#b8cbc0;margin-top:.8cqw}
.sl .tile .n{display:block;font:800 3cqw var(--display);color:#7fd39b;margin-bottom:.8cqw}
.sl .bad{border-color:#e5484d88}.sl .good{border-color:#21c05c88}
.sl .mx{display:grid;grid-template-columns:11cqw repeat(4,1fr);gap:.7cqw 1.2cqw;align-items:center;font:600 1.3cqw var(--body);margin-top:1.4cqw;max-width:62cqw}
.sl .mx .h{color:#7fd39b;font-weight:700}
.sl .dot{height:1.2cqw;border-radius:1cqw;background:#ffffff1f;transform-origin:left;transform:scaleX(0)}
.sl.on .dot{animation:phgx .8s cubic-bezier(.3,.7,.2,1) forwards;animation-delay:calc(var(--i,0)*60ms + 300ms)}
.sl .dot.g{background:#21c05c}.sl .dot.a{background:#f0a22a}.sl .dot.r{background:#e5484d}
.sl .cnt{display:grid;grid-template-columns:repeat(3,1fr);gap:3cqw;margin-top:2cqw}
.sl .cnt b{display:block;font:800 9cqw/1 var(--display);font-variant-numeric:tabular-nums}
.sl .cnt span{font:500 1.5cqw/1.4 var(--body);color:#b8cbc0}
.sl .pb{display:flex;height:1.6cqw;border-radius:2cqw;overflow:hidden;margin-top:2.4cqw;max-width:60cqw;background:#ffffff1f}
.sl .pb i{display:block;transform-origin:left;transform:scaleX(0)}
.sl.on .pb i{animation:phgx 1.2s ease forwards .6s}
.sl .illus{position:absolute;right:3cqw;top:2cqw;font:700 1.1cqw var(--body);color:#9bb2a6;letter-spacing:.08em;text-transform:uppercase}
.sbar{position:absolute;left:0;bottom:0;height:3px;background:var(--green);width:0}
.snav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:1px solid #ffffff40;background:#0b130fcc;color:#fff;font:700 17px var(--body);cursor:pointer;z-index:2}
.snav.p{left:10px}.snav.n{right:10px}
.sdots{display:flex;gap:8px;justify-content:center;margin:12px 0 4px}
.sdots button{width:9px;height:9px;border-radius:50%;border:0;background:#ffffff40;padding:0;cursor:pointer}.sdots button[aria-current="true"]{background:var(--green);width:24px;border-radius:6px}
.scap{font:500 14px/1.45 var(--body);color:var(--slab-mute);text-align:center;margin:6px 0 0}
@media(prefers-reduced-motion:reduce){.sl,.sl .anim{transition:none}.sl .anim{opacity:1;transform:none;animation:none!important}.sl .dot,.sl .pb i{transform:none;animation:none!important}}
@media(max-width:640px){.sl .tiles{grid-template-columns:1fr 1fr}.sl p{font-size:2.4cqw}.sl .step{font-size:2.2cqw}}

.twocol{grid-template-columns:minmax(0,1fr)}
.ph .teal .card .mut,.ph .teal .card .t span{color:#6b7078}
.ph .pop{transform:scale(.4);opacity:0}.ph.play .pop{animation:phpop .8s cubic-bezier(.2,.9,.3,1.3) forwards;animation-delay:calc(var(--i,0)*140ms + 150ms)}
@keyframes phpop{to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.ph .pop{transform:none;opacity:1;animation:none!important}}

/* ---- portfolio integration ---- */
.wrap{grid-template-columns:minmax(0,1fr)}
a.btn{text-decoration:none}
.end a{color:inherit}
.icgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 14px;margin-top:6px}
.icgrid figure{margin:0}
.icgrid img{width:100%;aspect-ratio:1400/730;object-fit:cover;object-position:center;display:block;border-radius:12px;cursor:zoom-in;background:var(--slab-2)}
.icgrid figcaption{font:500 12.5px var(--body);color:var(--slab-mute);margin-top:8px}
@media(max-width:640px){.icgrid{grid-template-columns:1fr}}
.bfam{margin-top:clamp(28px,4vw,48px)}
.bfam h4{font:800 clamp(18px,2vw,24px) var(--display);margin:0 0 16px;color:var(--slab-ink)}
.bset{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.bf{background:#ffffff;border-radius:14px;padding:18px;color:#171717}
.bf.wide{grid-column:span 2}
.bf .bi{display:flex;gap:10px;flex-wrap:nowrap}
.bf .bi img{flex:1 1 0;min-width:0;max-width:150px;height:auto;aspect-ratio:1;object-fit:contain;cursor:zoom-in;border-radius:10px}
.bf p{margin:14px 0 0;font:500 14.5px/1.5 var(--body);color:#4a4c50}
.bf p b{display:block;color:#171717;font:800 16px var(--display);margin-bottom:2px}
@media(max-width:760px){.bset{grid-template-columns:1fr}.bf.wide{grid-column:auto}.bf .bi img{max-width:none}}

/* figma slides */
.sl.fs-w{padding:0}.fs{position:absolute;inset:0}
.fs-t{position:absolute;font:800 4.6cqw/1.05 var(--display);color:#fff;letter-spacing:-.02em}.fs-t.s{font-size:3.4cqw}
.fs-warn{position:absolute;display:flex;gap:.8cqw;align-items:center;font:500 1.5cqw var(--body);color:#cbcdd0}.fs-warn i{display:grid;place-items:center;width:1.7cqw;height:1.7cqw;border-radius:.4cqw;background:#f0a22a;color:#fff;font:800 1.2cqw var(--body);font-style:normal}
.fs-c{position:absolute;font:500 1.7cqw/1.3 var(--body);color:#cbcdd0}
.fsph{position:absolute}.fsph .ph{--w:var(--fw,19cqw)}
.fs-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.fs-svg .arr{fill:none;stroke:#e8efe9;stroke-width:.22;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.fs-svg .arh{fill:none;stroke:#cbcdd0;stroke-width:.22;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.sl.on .fs-svg .arr{animation:fsdraw .9s ease forwards;animation-delay:calc(var(--i,0)*140ms + 600ms)}
.sl.on .fs-svg .arh{animation:fsfade .3s ease forwards;animation-delay:calc(var(--i,0)*140ms + 1400ms)}
@keyframes fsdraw{to{stroke-dashoffset:0}}@keyframes fsfade{to{opacity:1}}
.sl.on .ph .a{animation:phup .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i,0)*90ms + 500ms)}
.sl.on .ph .gx{animation:phgx 1.1s cubic-bezier(.3,.7,.2,1) forwards;animation-delay:calc(var(--i,0)*120ms + 900ms)}
.sl.on .ph .bars span{animation:phgy .9s cubic-bezier(.3,.7,.2,1) forwards;animation-delay:calc(var(--i,0)*80ms + 900ms)}
.sl.on .ph .arc{animation:pharc 1.4s cubic-bezier(.3,.7,.2,1) forwards;animation-delay:calc(var(--i,0)*120ms + 900ms)}
.fs-modal{position:absolute;width:22cqw;background:#fff;border-radius:1.6cqw;padding:2cqw;display:grid;gap:.9cqw;justify-items:center;text-align:center;color:#171717}
.fs-modal .mi{width:8cqw;height:8cqw}.fs-modal b{font:700 1.6cqw var(--display)}.fs-modal p{font:500 1.15cqw/1.4 var(--body);color:#5d5f65;margin:0}.fs-modal .mb{font-size:1.3cqw;padding:.9cqw 0}.fs-modal u{font:600 1.1cqw var(--body);color:#1f9d3c}

.fs .ph .bd{font-size:1.28em;gap:1em}
.fs .fsph .ph .hd{font-size:1.2em}

.fs .fsph .ph .bd{gap:1.5em}

/* light slabs (light theme only) */
:root:not([data-theme="dark"]) .slab{--slab:#eef1ed;--slab-2:#e3e8e4;--slab-ink:#111613;--slab-mute:#56655d;--slab-line:#0a100d1a;background:radial-gradient(900px 480px at 90% 0%,#cfe6e255,transparent 60%),radial-gradient(800px 480px at 5% 100%,#c9ead655,transparent 60%),var(--slab)}
:root:not([data-theme="dark"]) .hero .ladder rect{fill:#fff;stroke:#0a100d14}
:root:not([data-theme="dark"]) .hero .ladder g.st:last-of-type rect{fill:#111613;stroke:none}
:root:not([data-theme="dark"]) .hero .ladder text{fill:#111613}
:root:not([data-theme="dark"]) .hero .ladder text[font-size="15"]{fill:#56655d}
:root:not([data-theme="dark"]) .hero .ladder g.st:last-of-type text{fill:#f3f7f4}
:root:not([data-theme="dark"]) .hero .ladder g.st:last-of-type text[font-size="14"]{fill:#9bb2a6}
:root:not([data-theme="dark"]) .hero .ladder .tip{fill:#56655d}
:root:not([data-theme="dark"]) .slab .ph{box-shadow:0 1.2em 3em #0a100d26}
:root:not([data-theme="dark"]) .slab .sstage{background:linear-gradient(140deg,#ffffff,#f6f8f6 60%,#e6f2eb)}
:root:not([data-theme="dark"]) .slab .sl .ey,:root:not([data-theme="dark"]) .slab .sl .tile .n,:root:not([data-theme="dark"]) .slab .sl .mx .h{color:#178a43}
:root:not([data-theme="dark"]) .slab .sl p,:root:not([data-theme="dark"]) .slab .sl .tile small,:root:not([data-theme="dark"]) .slab .sl .step small,:root:not([data-theme="dark"]) .slab .sl .cnt span,:root:not([data-theme="dark"]) .slab .sl .illus{color:#56655d}
:root:not([data-theme="dark"]) .slab .sl .big60{color:#111613}
:root:not([data-theme="dark"]) .slab .sl .tile{background:#fff;border-color:#0a100d1a;box-shadow:0 1px 2px #0a100d0d}
:root:not([data-theme="dark"]) .slab .sl .bad{border-color:#e5484d99}:root:not([data-theme="dark"]) .slab .sl .good{border-color:#21c05c99}
:root:not([data-theme="dark"]) .slab .sl .step{background:#0a100d0d}:root:not([data-theme="dark"]) .slab .sl .step:nth-child(4){background:#111613;color:#f3f7f4}:root:not([data-theme="dark"]) .slab .sl .step:nth-child(4) small{color:#9bb2a6}
:root:not([data-theme="dark"]) .slab .sl .dot,:root:not([data-theme="dark"]) .slab .sl .pb{background:#0a100d14}
:root:not([data-theme="dark"]) .slab .snav{background:#ffffffe6;border-color:#0a100d26;color:#111613}
:root:not([data-theme="dark"]) .slab .sdots button{background:#0a100d33}:root:not([data-theme="dark"]) .slab .sdots button[aria-current="true"]{background:var(--green)}
:root:not([data-theme="dark"]) .slab .fs-t{color:#111613}
:root:not([data-theme="dark"]) .slab .fs-warn,:root:not([data-theme="dark"]) .slab .fs-c{color:#56655d}
:root:not([data-theme="dark"]) .slab .fs-svg .arr{stroke:#111613}:root:not([data-theme="dark"]) .slab .fs-svg .arh{stroke:#56655d}
:root:not([data-theme="dark"]) .slab .fs-modal{box-shadow:0 1cqw 3cqw #0a100d1f}
:root:not([data-theme="dark"]) .slab .stage{background:#fff}
:root:not([data-theme="dark"]) .slab .stage .nav{background:#ffffffe6;border-color:#0a100d26;color:#111613}:root:not([data-theme="dark"]) .slab .stage .nav:hover{background:#fff}
:root:not([data-theme="dark"]) .slab .thumbs button{background:#fff}

/* financial health screen */
.fhs .ph-in{background:#fff}
.fhs .bd{gap:1.1em}
.fhh{position:relative;margin:0 -1.6em;aspect-ratio:750/600}
.fhg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.fhg text{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
.fha{stroke-dasharray:100;stroke-dashoffset:100}
.fhd{transform-box:view-box;transform-origin:800px 250px;transform:rotate(0deg)}
.fhp{transform-box:fill-box;transform-origin:center;transform:scale(.3);opacity:0}
.fhc{position:absolute;left:66.3%;top:71.7%;width:29.3%;height:24.2%;background:#fff;border-radius:1.1em;box-shadow:0 .3em 1.4em #0a100d14;display:grid;place-content:center;justify-items:center;gap:.15em}
.fhc span{color:#7b8087;font-size:.95em}
.fhc b{font-size:1.1em;font-weight:600;color:#111;white-space:nowrap}.fhc b small{font-size:1em}
@property --n{syntax:"<integer>";inherits:false;initial-value:0}
.fhn{font-style:normal;font-size:2em;font-weight:700;color:#1f9d3c;--n:var(--to);counter-reset:n var(--n)}.fhn:after{content:counter(n)}
.fhl{display:flex;justify-content:space-between;align-items:baseline;font-size:1.55em}.fhl b{font-weight:700}.fhl em{font-style:normal;font-size:.75em;color:#1f9d3c;font-weight:500}
.fhrow{display:flex;gap:.7em;margin-right:-1.6em;overflow:hidden}
.fhi{flex:none;width:9.4em;background:#fff;border-radius:1em;box-shadow:0 .2em 1em #0a100d12;padding:1em;display:grid;gap:.8em;font-size:1em}
.fhri{width:3.4em;height:3.4em}.fhi span{font-size:1.15em}
.fhm{flex:none;width:6.6em;display:grid;justify-items:center;gap:.4em;text-align:center}
.fhm img{width:5.6em;height:5.6em;border-radius:50%;display:block}.fhm span{font-size:.95em;line-height:1.25}
/* gauge plays after the phone lands: arc fills bottom-up, the dot rides it, +5 pops, points tick up */
.sl.on .fha{animation:fhArc 1.6s cubic-bezier(.45,.05,.2,1) forwards 1.1s}
.sl.on .fhd{animation:fhDot 1.6s cubic-bezier(.45,.05,.2,1) forwards 1.1s}
.sl.on .fhp{animation:phpop .6s cubic-bezier(.2,.9,.3,1.3) forwards 2.6s}
.sl.on .fhn{animation:fhNum .6s steps(5,end) forwards 2.6s;--n:var(--from)}
@keyframes fhArc{to{stroke-dashoffset:0}}
@keyframes fhDot{to{transform:rotate(92.8deg)}}
@keyframes fhNum{from{--n:var(--from)}to{--n:var(--to)}}
@media(prefers-reduced-motion:reduce){.fha{stroke-dashoffset:0}.fhd{transform:rotate(92.8deg)}.fhp{transform:none;opacity:1}.sl.on .fha,.sl.on .fhd,.sl.on .fhp,.sl.on .fhn{animation:none!important}.sl.on .fhn{--n:var(--to)}}
/* award sheet, rebuilt from the production modal */
.fs-modal{width:21cqw;padding:1.2cqw 2cqw 2cqw;gap:1cqw;border-radius:1.8cqw;box-shadow:0 1cqw 3cqw #0a100d1f}
.fs-modal .fsgrab{width:3cqw;height:.45cqw;margin-bottom:1.4cqw;border-radius:1cqw;background:#c9ccd0}
.fs-modal img.mi{width:11cqw;height:11cqw;border-radius:50%;display:block;margin-bottom:1cqw}
.fs-modal b{font:800 1.85cqw/1.15 var(--display);color:#111}
.fs-modal p{font-size:1.2cqw;color:#6b6e73}
.fs-modal .mb{color:#fff;width:100%;font-style:normal;font-weight:600;background:#13902b;font-size:1.35cqw;padding:1.1cqw 0;border-radius:1cqw;margin-top:1cqw}
.fs-modal u{text-decoration:none;color:#13902b;font-size:1.2cqw;margin-top:.4cqw}
.fs .fhs .bd{font-size:1.05em;gap:.9em}
.fs .fhs .fhh{margin:0 -1.6em -.6em}

/* screenshot phones + slide 2 labels/arrows */
.ph.shot .ph-in{background:#fff}
.shv{flex:1;min-height:0;position:relative;overflow:hidden;container-type:size}
.shdim .sb{position:relative;z-index:1}
.sl.on .shscroll .scr{animation:shScroll 4.4s cubic-bezier(.45,.05,.35,1) forwards .9s}
@keyframes shScroll{0%,6%{transform:translateY(0)}38%,50%{transform:translateY(calc((-100% + 100cqh)*.42))}100%{transform:translateY(calc(-100% + 100cqh))}}
@media(prefers-reduced-motion:reduce){.sl.on .shscroll .scr{animation:none}}
.fs-lb{width:14cqw;text-align:center;line-height:1.25}
.fs-svg .arr,.fs-svg .arh{stroke-width:.14}
@media(prefers-reduced-motion:reduce){.fs-svg .arr{stroke-dashoffset:0}.fs-svg .arh{opacity:1}}

/* achievements: glass renders + enamel pins */
.bf .bi.pins{flex-wrap:wrap;gap:14px 10px}
.bf .bi.pins figure{margin:0;flex:1 1 110px;max-width:140px;display:grid;justify-items:center;gap:8px;text-align:center}
.bf .bi.pins img{width:112px;max-width:none;height:112px;object-fit:contain;flex:none;border-radius:0}
.bf .bi.pins figcaption{font:500 13px/1.3 var(--body);color:#4a4c50}

/* English rebuilds of the settings and info-sheet screens */
.sx{font-size:1.05em;color:#111;padding:0 1.3em;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
.scr.sx{position:absolute;left:0;right:0;top:0}
.sthd{display:flex;align-items:center;justify-content:space-between;padding:.4em 0 .9em;font-size:1.25em}.sthd b{font-weight:600}
.stbk{width:.6em;height:.6em;border-left:.15em solid #1f9d3c;border-bottom:.15em solid #1f9d3c;transform:rotate(45deg)}
.stx{font-style:normal;width:1.6em;height:1.6em;border-radius:.5em;background:#f0f1f3;color:#8a8f98;display:grid;place-items:center}
.stcard{position:relative;background:#f3f4f6;border-radius:1.1em;padding:1.1em 1.2em}
.sttl{font-size:1.25em;font-weight:600;margin-bottom:.8em}
.stbon{position:absolute;right:-.6em;top:-1.4em;width:9.5em}
.stpts{display:flex;align-items:center;gap:.25em}.stpts b{font-size:1.9em;font-weight:600}.stpts i{font-style:normal;width:1.3em;height:1.3em;border:1px solid #9aa0a8;border-radius:50%;display:grid;place-items:center;font-size:.8em;color:#9aa0a8;margin-left:.3em}
.stsl{height:.35em;border-radius:1em;background:#fff;margin:.8em 0 1em;position:relative}.stsl span{position:absolute;left:0;top:0;bottom:0;width:54%;background:#2b2d31;border-radius:1em}.stsl span:after{content:"";position:absolute;right:-.4em;top:50%;width:.8em;height:.8em;margin-top:-.4em;border-radius:50%;background:#2b2d31}
.stmu{color:#7c7f85;font-size:1.05em;margin-bottom:.4em}.sttx{font-size:.95em;line-height:1.35}
.stbt{display:flex;align-items:center;gap:.9em;margin-top:1em}.stbt i{font-style:normal;background:#2b2d31;color:#fff;border-radius:.8em;padding:.65em 1em;font-size:1.05em}.stbt em{font-style:normal;color:#1f9d3c;font-size:1.05em}
.sttabs{display:grid;grid-template-columns:1fr 1fr;text-align:center;margin:1em -1.3em 0;border-bottom:1px solid #e3e5e8}.sttabs>*{padding:.7em 0;font-size:1.05em}.sttabs b{font-weight:600;border-bottom:.15em solid #1f9d3c}.sttabs span{color:#8a8f98}
.stamt{display:flex;align-items:center;justify-content:space-between;margin-top:1em;padding:.9em 1.1em;border-radius:1em;box-shadow:0 .2em 1em #0a100d14}.stamt b{display:block;font-size:1.7em;font-weight:500}.stamt span{font-size:.75em;color:#7c7f85}.stpie{width:2.2em;height:2.2em;padding-left:.9em;border-left:1px solid #e3e5e8;box-sizing:content-box}
.stbars{display:flex;align-items:flex-end;gap:.5em;height:12em;margin-top:1.2em}.stbars span{flex:1;background:#f0f1f3;border-radius:.6em}
.stmo{display:flex;gap:.5em;margin-top:.5em}.stmo span{flex:1;text-align:center;font-size:.75em;color:#7c7f85}
.stgap{height:.8em;background:#f3f4f6;margin:1.2em -1.3em 0}
.stsec{display:flex;justify-content:space-between;align-items:baseline;margin:1.4em 0 .8em}.stsec b{font-size:1.3em;font-weight:600}.stsec span{color:#7c7f85}.stsec em{font-style:normal;color:#1f9d3c}
.stlist{border-radius:1em;box-shadow:0 .2em 1em #0a100d14;padding:.4em 1.1em}
.strw,.stln{display:flex;align-items:center;gap:1em;padding:.8em 0}.strw>b{font-weight:500}
.stt{flex:1;min-width:0}.stt b{display:block;font-weight:500;font-size:1.05em}.stt span{font-size:.8em;color:#7c7f85}
.stic{width:2.6em;height:2.6em;border-radius:50%;flex:none;display:grid;place-items:center}.stic svg{width:1.6em;height:1.6em}
.sto{width:2.2em;height:2.2em;flex:none;margin:0 .2em}
.stln{border-bottom:1px solid #eceef0}
.stmore{text-align:center;color:#7c7f85;font-size:.85em;padding:.6em 0 .2em}
.stchev{width:.7em;height:.7em;border-right:.12em solid #9aa0a8;border-bottom:.12em solid #9aa0a8;transform:rotate(45deg);margin:.3em auto .7em}
.stsp{height:2.4em}
.sttrk{display:flex;align-items:center;gap:.8em;padding:1em 1.1em;margin-bottom:3em}.sttrk>div{flex:1}.sttrk b{display:block;font-weight:600;font-size:1.05em;margin-bottom:.3em}.sttrk span{font-size:.85em;color:#7c7f85;line-height:1.35}.sttrk img{width:4.6em}
.stprog{display:flex;align-items:center;gap:.6em;margin-top:.7em}.stprog i{flex:1;height:.3em;border-radius:1em;background:linear-gradient(90deg,#9cd33b 33%,#eceef0 0)}.stprog small{font-size:.75em;color:#7c7f85}
/* info sheet: the screen dims, then the sheet slides up */
.stsh{position:absolute;inset:0}
.stdim{position:absolute;inset:-4em 0 0;background:#0008;opacity:0}
.stsheet{position:absolute;left:0;right:0;bottom:0;top:27%;background:#fff;border-radius:1.6em 1.6em 0 0;padding:.8em 1.6em 2.6em;display:flex;flex-direction:column;transform:translateY(100%)}
.stgrab{width:3em;height:.3em;border-radius:1em;background:#d5d7db;margin:0 auto 1.6em}
.stsheet b{font-size:1.6em;font-weight:500;line-height:1.2}
.stsheet img{width:13em;margin:1em auto}
.stsheet p{margin:0;font-size:1.05em;line-height:1.45}
.stcta{margin-top:auto;font-style:normal;text-align:center;background:#1a8f2e;color:#fff;border-radius:.8em;padding:1em 0;font-size:1.05em}
.sl.on .stdim{animation:fsfade .5s ease forwards 1.3s}
.sl.on .stsheet{animation:stUp .8s cubic-bezier(.2,.7,.2,1) forwards 1.4s}
@keyframes stUp{to{transform:none}}
@media(prefers-reduced-motion:reduce){.stdim{opacity:1}.stsheet{transform:none}.sl.on .stdim,.sl.on .stsheet{animation:none}}

.bfam .bsub{margin:clamp(28px,4vw,44px) 0 6px}
.bnote{margin:0 0 16px;font:500 14.5px/1.5 var(--body);color:var(--slab-mute)}
.bf.final{padding:24px}

/* award card inside phone screens */
.ph .awd{display:flex;align-items:center;gap:1em;color:#111}
.ph .awd img{width:7em;height:7em;flex:none;border-radius:50%;object-fit:cover}
.ph .awd b{display:block;font-size:1.3em;font-weight:600;margin:.45em 0 .15em}
.ph .awd .tag{font-size:.95em;padding:.35em .9em}
.ph .awd.sm{padding:.9em 1.2em;gap:.9em}.ph .awd.sm img{width:4.4em;height:4.4em}.ph .awd.sm b{margin:0 0 .1em;font-size:1.2em}

/* phone bezel: white in the light theme, black in the dark one */
:root:not([data-theme="dark"]) .ph{background:#fff;box-shadow:0 .2em .9em #0a100d1a,0 1.4em 3em #0a100d29}
/* scroll gallery as one isometric plane: the rows still slide with the page scroll */
.gal{position:relative;display:block;height:clamp(520px,60vw,800px);margin-top:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}
.giso{position:absolute;left:0;right:0;top:50%;display:flex;flex-direction:column;gap:18px;transform:translateY(-50%) rotateX(56deg) rotateZ(-34deg);transform-origin:50% 50%}
@media(prefers-reduced-motion:reduce){.giso{transform:translateY(-50%) rotateX(56deg) rotateZ(-34deg)}}

/* breathing room between the cover ladder and the phone rows */
.rows{margin-top:clamp(64px,9vw,120px)}
.ladder{margin-bottom:clamp(8px,2vw,24px)}

/* next case */
.nxc{display:block;margin-top:clamp(40px,6vw,90px);padding:clamp(40px,6vw,90px) clamp(20px,4vw,48px);background:var(--ink);color:var(--bg);border-radius:20px;text-decoration:none}
.nxc span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.55}
.nxc b{display:flex;justify-content:space-between;gap:20px;font-size:clamp(30px,5.4vw,84px);letter-spacing:-.04em;font-weight:500;line-height:1.02;margin-top:14px}
.nxc em,.nxc i{font-style:normal}.nxc i{transition:transform .3s}.nxc:hover b i{transform:translateX(12px)}