/* The rest of the CSS: every screen after the landing page. Loaded as a hashed file. It comes after critical.css in the cascade. */
/* ---------- onboarding ---------- */
fieldset{border:0;padding:0;margin:20px 0 0;min-width:0}
legend,.lbl{padding:0;font-weight:600;font-size:15px;margin-bottom:6px;display:block}
.seg4{display:grid;grid-template-columns:repeat(4,1fr);border:1.5px solid var(--ink);border-radius:8px;overflow:hidden}
.seg4 button{padding:12px 2px;text-align:center;font-size:14.5px;font-variant-numeric:tabular-nums;border-inline-start:1px solid var(--ink)}
.seg4 button:first-child{border-inline-start:0}
.seg4 button[aria-checked=true]{background:var(--ink);color:#fff;font-weight:600}
input[type=text]{width:100%;font:inherit;color:inherit;border:1.5px solid var(--ink);border-radius:8px;padding:12px;background:#fff}
.building{flex:1;display:grid;place-content:center;justify-items:center;gap:8px;padding:30px;text-align:center}
.building .seal{width:150px;margin-bottom:18px;transform:rotate(-10deg);animation:slam .45s cubic-bezier(.2,.8,.3,1.25) 1.5s both}
.building p{opacity:0;animation:rise .35s forwards;font-size:16px}
.building p:nth-of-type(2){animation-delay:.5s}.building p:nth-of-type(3){animation-delay:1s}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- plan ---------- */
.dayhead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 10px}
.dayhead .d{font:600 62px/.86 var(--serif);letter-spacing:-.03em}
.dayhead .d small{display:block;font:500 13px/1 var(--sans);color:var(--ink2);margin-bottom:7px;letter-spacing:0}
.dayhead .d i{font:500 16px/1 var(--sans);color:var(--ink2);letter-spacing:0;font-style:normal}
.dayhead .m{font-size:13.5px;color:var(--ink2);text-align:end;line-height:1.4}
.dayhead .m b{display:block;color:var(--ink);font-weight:600}
.ruler{width:100%;height:auto}
.next{background:var(--sheet);border:1.5px solid var(--ink);border-radius:10px;padding:16px;margin:16px 0 0}
.next .k{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;font-weight:600;margin-bottom:8px}
.next h3{font:600 21px/1.22 var(--serif);margin:0 0 6px}
[dir=rtl] .next h3{font:700 19px/1.45 var(--sans)}
.next p{margin:0 0 14px;font-size:14.5px;color:var(--ink2)}
.ph{display:flex;justify-content:space-between;align-items:baseline;margin:20px 0 0;padding-bottom:6px;border-bottom:1px solid var(--ink);font-size:13.5px}
.ph b{font-weight:600}.ph span{color:var(--ink2)}
.step{display:grid;grid-template-columns:36px 1fr auto 16px;gap:10px;align-items:start;padding:12px 0;border-bottom:1px solid var(--rule);text-decoration:none}
.step>.ico{width:16px;height:16px;color:var(--off);margin-top:4px;grid-column:4}
.step .dn{font:600 18px/1.3 var(--sans)}
.step .tt{font-weight:500;line-height:1.3;display:block}
.step .au{font-size:13px;color:var(--ink2);display:block;margin-top:2px}
.st{font-size:13px;font-weight:600;text-align:end;max-width:112px;line-height:1.3;padding-top:2px}
.st.due{color:var(--due)}.st.ok{color:var(--stamp)}.st.soft{color:var(--ink2);font-weight:500}
details.donelist{margin-top:24px}
details.donelist summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);font-weight:600;font-size:15px}
details.donelist summary::-webkit-details-marker{display:none}
details.donelist summary::after{content:"+";font-weight:400;font-size:22px;line-height:.8}
details.donelist[open] summary::after{content:"\2013"}
.step.done .tt,.step.done .dn{color:var(--ink2);font-weight:400}

/* ---------- step ---------- */
.stampbox{float:inline-end;width:98px;margin:-2px -2px 4px 10px;transform:rotate(-9deg)}
[dir=rtl] .stampbox{margin:-2px 10px 4px -2px;transform:rotate(9deg)}
.dl{display:grid;grid-template-columns:auto 1fr;gap:0 16px;border-top:1px solid var(--ink);margin:14px 0 0;clear:both}
.dl dt,.dl dd{margin:0;padding:9px 0;border-bottom:1px solid var(--rule);font-size:14.5px}
.dl dt{color:var(--ink2)}
.dl dd{font-weight:600;text-align:end}
.dl dd.bad{color:var(--due)}
.todo{list-style:none;margin:0;padding:0}
.todo li{padding:0}
.todo li>*{display:flex;gap:10px;padding:7px 0;font-size:15px;width:100%}
.todo .bx{width:18px;height:18px;border:1.5px solid var(--ink);border-radius:3px;flex:none;margin-top:3px;display:grid;place-items:center}
.todo .bx .ico{width:13px;height:13px;stroke-width:2.6;display:none}
.todo .ok .bx,.todo [aria-checked=true] .bx{background:var(--stamp);border-color:var(--stamp);color:#fff}
.todo .ok .bx .ico,.todo [aria-checked=true] .bx .ico{display:block}
.opts{border-top:1px solid var(--ink)}
.opt{display:grid;grid-template-columns:22px 1fr auto;gap:2px 12px;padding:13px 0;border-bottom:1px solid var(--rule);width:100%;align-items:start}
.opt .rd{width:20px;height:20px;border:1.5px solid var(--ink);border-radius:50%;margin-top:2px;display:grid;place-items:center;grid-row:1/4}
.opt[aria-checked=true] .rd::after,.opt.on .rd::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--ink)}
.opt b{font-weight:600}
.opt .pr{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:end}
.opt .pr.tag{font-size:13px;color:var(--stamp)}
.opt .ds{grid-column:2/-1;font-size:13.5px;color:var(--ink2)}
.opt .mt{grid-column:2/-1;font-size:13px;margin-top:3px;display:flex;gap:2px 14px;flex-wrap:wrap}
.opt .mt .g{color:var(--brass);font-weight:600}
.opt[aria-checked=true],.opt.on{background:var(--sheet);margin:0 -18px;padding:13px 18px;width:calc(100% + 36px)}
.opt.flat{grid-template-columns:1fr auto}
.opt.flat .rd{display:none}.opt.flat .ds,.opt.flat .mt{grid-column:1/-1}

.slam{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:rgba(244,244,241,.86)}
.slam svg{width:220px;transform:rotate(-10deg);animation:slam .45s cubic-bezier(.2,.8,.3,1.25) both}
@keyframes slam{0%{transform:rotate(-24deg) scale(2.5);opacity:0}55%{opacity:1}100%{transform:rotate(-10deg) scale(1);opacity:1}}

/* ---------- cash ---------- */
.say{font:600 23px/1.25 var(--serif);margin:6px 0 6px;letter-spacing:-.01em}
[dir=rtl] .say{font:700 21px/1.5 var(--sans);letter-spacing:0}
.figs{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);padding:10px 0;margin:14px 0 14px}
.figs small{display:block;font-size:12.5px;color:var(--ink2)}
.figs b{font:600 19px/1.25 var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.chart svg{width:100%;height:auto;overflow:visible}
.legend{display:flex;gap:4px 14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink2);margin-top:6px}
.legend i{display:inline-block;width:18px;border-top:2.5px solid var(--ink);vertical-align:middle;margin-inline-end:5px}
.legend i.p1{border-top:2.5px dashed var(--stamp)}.legend i.p2{border-top:2.5px dashed var(--due)}
.sees{border-inline-start:3px solid var(--due);padding-inline-start:14px;margin:20px 0 0;font-size:15px}
.sees b{display:block;font-size:13.5px;margin-bottom:2px}
.sees.ok{border-color:var(--stamp)}

/* ---------- record ---------- */
.plaque{width:100%;height:auto;margin:4px 0 2px;filter:drop-shadow(0 12px 12px rgba(17,19,24,.22))}
.plaque .pop{animation:pop .7s cubic-bezier(.2,1.6,.4,1) .15s both;transform-box:fill-box;transform-origin:center}
@keyframes pop{0%{transform:scale(0) rotate(-50deg);opacity:0}100%{transform:none;opacity:1}}
.unlock{border:1.5px solid var(--ink);background:var(--sheet);border-radius:10px;padding:13px 16px;margin:2px 0 14px;animation:rise .4s both}
.unlock b{display:block;font:600 21px/1.2 var(--serif)}
[dir=rtl] .unlock b{font:700 19px/1.4 var(--sans)}
.unlock span{font-size:14px;color:var(--ink2)}
.unlock span{display:block}
.unlock .btn{margin-top:12px}
.scoreline{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:18px}
.scoreline b{font:600 42px/1 var(--serif);letter-spacing:-.02em}
.scoreline b small{font:500 14px/1 var(--sans);color:var(--ink2);letter-spacing:0}
.scoreline span{font-size:14px;color:var(--ink2);text-align:end}
.meter{position:relative;height:6px;background:var(--rule);margin:12px 0 22px}
.meter span{position:absolute;inset-block:0;inset-inline-start:0;background:var(--ink)}
.meter i{position:absolute;top:-4px;width:1.5px;height:14px;background:var(--ink)}
.meter em{position:absolute;top:11px;font-style:normal;font-size:11px;color:var(--ink2);transform:translateX(-50%);font-variant-numeric:tabular-nums}
[dir=rtl] .meter em{transform:translateX(50%)}
.meter em.hit{color:var(--brass);font-weight:600}
.credit{background:var(--sheet);border:1.5px solid var(--ink);border-radius:10px;padding:14px 16px;margin:18px 0 12px}
.credit small{font-size:13px;font-weight:600}
.credit p{font-size:14.5px;color:var(--ink2)}
.credit b{display:block;font:600 34px/1.1 var(--serif);letter-spacing:-.02em;margin:2px 0 6px}
[dir=rtl] .credit b{font:700 28px/1.3 var(--sans);letter-spacing:0}
.rows .sn{font-weight:600;min-width:58px;color:var(--brass);letter-spacing:1px}
.rows .cur{font-weight:600}
.rows .dim{color:var(--ink2)}.rows .dim .sn{color:var(--off)}

/* ---------- providers, programmes, messages, plans ---------- */
.cats{display:flex;gap:22px;overflow-x:auto;margin:14px -18px 0;padding:0 18px;border-bottom:1px solid var(--ink);scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cats button{padding:13px 0 11px;font-size:15px;color:var(--ink2);white-space:nowrap;border-bottom:3px solid transparent;min-width:44px;text-align:center;flex:none}
.cats button[aria-selected=true]{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
.cats+.opts{border-top:0}
.prog{padding:16px 0;border-bottom:1px solid var(--rule);display:grid;gap:5px}
.prog:first-of-type{border-top:1px solid var(--ink)}
.prog small{font-size:12.5px;color:var(--ink2)}
.prog h3{font:600 18px/1.25 var(--serif);margin:0}
[dir=rtl] .prog h3{font:700 17px/1.45 var(--sans)}
.prog .by{font-size:13px;color:var(--ink2)}
.prog p{font-size:14.5px}
.prog .why{font-size:13.5px;color:var(--stamp);font-weight:500}
.prog .btn{min-height:44px;margin-top:6px}
.sheet-bg{position:absolute;inset:0;background:rgba(17,19,24,.45);z-index:5;display:flex;align-items:flex-end}
.sheet{background:var(--sheet);border-top:2px solid var(--ink);padding:18px 18px 20px;padding-bottom:calc(20px + env(safe-area-inset-bottom));width:100%;animation:up .22s both;max-height:88%;overflow:auto;overscroll-behavior:contain}
.has-sheet .view{overflow:hidden}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.sheet h3{font:600 19px/1.25 var(--serif);margin:0 0 2px}
[dir=rtl] .sheet h3{font:700 18px/1.45 var(--sans)}
.thread{display:grid;gap:10px}
.msg{background:var(--sheet);border:1px solid var(--rule);border-radius:2px 12px 12px 12px;padding:11px 13px;max-width:92%;font-size:15px}
[dir=rtl] .msg{border-radius:12px 2px 12px 12px}
.msg small{display:block;font-size:12px;color:var(--ink2);margin-bottom:3px}
.msg a{font-weight:600;font-size:14.5px;padding-bottom:2px;min-height:44px}
.msg.later{background:transparent;border-style:dashed;border-color:var(--off);color:var(--ink2)}
.sw{width:40px;height:23px;border-radius:99px;background:var(--ink);position:relative;flex:none;align-self:center}
.sw::after{content:"";position:absolute;top:2.5px;inset-inline-end:2.5px;width:18px;height:18px;border-radius:50%;background:#fff}
.sw.off{background:var(--off)}.sw.off::after{inset-inline-end:auto;inset-inline-start:2.5px}
.tier{border-top:1px solid var(--ink);padding:14px 0 16px}
.tier header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.tier header b{font-weight:600;font-size:16px}
.tier .p{font:600 24px/1 var(--serif);white-space:nowrap;letter-spacing:-.01em}
.tier .p small{font:400 13px/1 var(--sans);color:var(--ink2);letter-spacing:0}
[dir=rtl] .tier .p{font:700 20px/1.2 var(--sans);letter-spacing:0}
.tier ul{margin:0;padding:0;list-style:none;display:grid;gap:5px;font-size:14.5px}
.tier li{display:flex;gap:8px}
.tier li .ico{width:17px;height:17px;margin-top:3px;stroke-width:2.2}
.tier.em{border:1.5px solid var(--ink);border-radius:10px;background:var(--sheet);padding:14px 16px 16px;margin-top:6px}

.toast{flex:none;margin:8px 18px;background:var(--ink);color:#fff;border-radius:8px;padding:12px 14px;font-size:14px;animation:rise .25s both;text-align:center}

/* ---------- all screens ---------- */
#shots{display:none;padding:28px 28px 60px;min-height:100%}
#shots>header{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:22px}
#shots>header h1{font:600 36px/1 var(--serif);margin:0}
#shots>header .cta{display:flex;margin:0;gap:18px;align-items:center}
#shots>header .btn{width:auto}
.shots-grid{display:flex;flex-wrap:wrap;gap:26px 22px;direction:ltr}
.shot{width:254px}
.shot-frame{width:254px;height:536px;border:6px solid var(--ink);border-radius:28px;overflow:hidden;background:var(--ink);display:block;cursor:pointer}
.shot-frame .app{width:390px;height:844px;transform:scale(.6205);transform-origin:0 0;pointer-events:none}
.shot>p{margin:8px 2px 0;font-size:13.5px;color:var(--ink2)}
body.is-shots #stage{display:none}
body.is-shots #shots{display:block}


.risk{color:var(--due);font-weight:600;font-size:14.5px;margin-top:8px}
.lock{border:1.5px dashed var(--ink2);border-radius:10px;padding:12px 14px;margin-top:16px;display:grid;gap:0;font-size:14.5px}
.learn{margin-top:22px;border-top:1px solid var(--ink)}
.learn summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:13px 0;font-weight:600;font-size:15px;border-bottom:1px solid var(--rule)}
.learn summary::-webkit-details-marker{display:none}
.learn summary::after{content:"+";font-weight:400;font-size:22px;line-height:.8}
.learn[open] summary::after{content:"\2013"}
.learn p,.learn ul{font-size:14.5px;margin:10px 0 0}
.learn b{display:block;font-size:14px;margin-top:12px}
.learn ul,.plain{padding-inline-start:20px}
.plain{font-size:15px;margin:12px 0 0}
.banks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.bk{border:1.5px solid var(--rule);background:var(--sheet);border-radius:10px;padding:10px 6px;display:grid;justify-items:center;gap:4px;font-size:12.5px;text-align:center;min-height:96px;align-content:center}
.bk[aria-checked=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.bk .mono{height:30px;min-width:34px;padding:0 6px;display:grid;place-items:center;border:1px solid var(--ink);border-radius:6px;font:600 12px/1 var(--sans)}
.bk small{color:var(--stamp);font-weight:600;font-size:11px}
#capn{font:600 26px/1.2 var(--serif);text-align:center;border:1.5px solid var(--ink);border-radius:8px;padding:8px;width:100%;background:#fff;color:inherit}
input[type=range]{width:100%;accent-color:var(--ink);margin:5px 0 0;height:44px}
.caprow{display:flex;justify-content:space-between;font-size:12px;color:var(--ink2)}
.ext{width:16px;height:16px;margin-inline-start:6px}

.up{display:flex;align-items:center;min-height:44px;gap:10px;border:1px solid var(--ink);border-radius:10px;padding:10px 12px;margin-top:14px;font-size:14px;line-height:1.35;background:var(--sheet);color:inherit;text-decoration:none}
.up i{font:600 11px/1 var(--sans);letter-spacing:.04em;background:var(--ink);color:#fff;padding:5px 7px;border-radius:4px;flex:none}
/* no letter-spacing on Arabic: it breaks the joins on iOS */
[dir=rtl] .up i{letter-spacing:0}
.up>span{flex:1}
.up .ico{flex:none;width:18px;height:18px}
.skip{display:block;width:100%;margin:6px 0 0;background:none;border:0;font:500 14.5px var(--sans);color:var(--ink2);text-decoration:underline;text-underline-offset:3px;padding:10px;min-height:44px;cursor:pointer;text-align:center}
.opt .mr{color:var(--ink);font-weight:600}
.bk{background:#fff;min-height:74px}
.bk img{max-width:100%;height:auto}
.bk img.dk{border-radius:5px}
h2.sk{color:var(--due)}
.opt.off{color:var(--ink2)}.opt.off .rd{border-color:var(--ink2)}.opt.off b{font-weight:500}.opt.off .ds{color:var(--ink2)}
.rows>.start{justify-content:flex-start}
.ico.inl{display:inline;vertical-align:-4px}
.ph.first{margin-top:0}
.m12{margin:12px 0 14px!important}
/* ---------- sizes, for the rules above ---------- */
@media (max-width:899px),(max-height:639px){
  #shots{padding:18px 14px 40px}
  .shots-grid{justify-content:center}
}
@media (max-height:480px){
  .toast{margin:6px 18px;padding:8px 14px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.building p{opacity:1}}