/* Sortroll website. App tokens and components (resolved from the approved sortroll.css), plus page layout. */

/* tokens */
.tk{--bg:#FFFFFF;--surf:#F2F2F4;--sunk:#E7E7EA;--ink:#000000;--ink2:#6E6E73;--hair:rgba(0,0,0,.08);--sep:#E5E5EA;--org:#000000;--onk:#FFFFFF;--del:#D70015;--icon:#000000;--invsurf:#1C1C1E;--invink2:#98989F;--card-sh:0 6px 20px rgba(0,0,0,.08)}
.tk[data-theme="dark"]{--bg:#000000;--surf:#1C1C1E;--sunk:#2C2C2E;--ink:#FFFFFF;--ink2:#98989F;--hair:rgba(255,255,255,.1);--sep:#38383A;--org:#FFFFFF;--onk:#000000;--del:#FF453A;--icon:#1C1C1E;--invsurf:#F2F2F4;--invink2:#6E6E73;--card-sh:0 10px 30px rgba(0,0,0,.6)}
@media (prefers-color-scheme:dark){
.tk[data-theme="auto"]{--bg:#000000;--surf:#1C1C1E;--sunk:#2C2C2E;--ink:#FFFFFF;--ink2:#98989F;--hair:rgba(255,255,255,.1);--sep:#38383A;--org:#FFFFFF;--onk:#000000;--del:#FF453A;--icon:#1C1C1E;--invsurf:#F2F2F4;--invink2:#6E6E73;--card-sh:0 10px 30px rgba(0,0,0,.6)}
}

/* base */
.tk{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;font-size:17px;line-height:1.45}
.tk,.tk *,.tk *::before,.tk *::after{box-sizing:border-box}
.tk h1,.tk h2,.tk h3,.tk p,.tk ul,.tk ol,.tk figure{margin:0;padding:0}
.tk ul{list-style:none}
.tk a{color:inherit}
.tk svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tk :focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.web{background:var(--bg);container:w/inline-size;overflow-x:clip}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--ink);color:var(--bg)!important;padding:12px 16px;border-radius:12px;font-weight:650;text-decoration:none}
.skip:focus{top:12px}

/* type */
.h-1,.h-2,.h-3,.num{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;font-weight:700}
.h-1{font-size:clamp(42px,6.1cqi,80px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.h-2{font-size:clamp(34px,4.6cqi,60px);line-height:1.05;letter-spacing:-.025em;text-wrap:balance}
.h-3{font-size:22px;line-height:1.2;letter-spacing:-.01em}
.lead{font-size:clamp(19px,1.7cqi,22px);line-height:1.4;color:var(--ink2);text-wrap:pretty}
.num{font-size:clamp(72px,8cqi,104px);line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sml{font-size:15px;color:var(--ink2)}
.cap-l{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}

/* layout */
.wrap{max-width:1200px;margin:0 auto;padding-inline:20px}
.sec{padding-block:72px}
.head{display:flex;flex-direction:column;gap:14px;max-width:760px;margin-bottom:36px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:20px;letter-spacing:-.02em;text-decoration:none}
.navl{display:none;gap:28px;font-size:15px;font-weight:600}
.navl a{text-decoration:none;padding:12px 0}
.navl a:hover{color:var(--ink2)}
.appicon{width:32px;height:32px;stroke:none}
.appicon *{stroke:none}
.ai-bg{fill:var(--icon)}

/* app components */
.btn{appearance:none;font:inherit;font-size:17px;font-weight:650;min-height:56px;padding:12px 22px;border:0;border-radius:14px;background:var(--surf);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:10px;text-align:center;line-height:1.2;cursor:pointer;text-decoration:none}
.btn.pri{background:var(--org);color:var(--onk)}
.btn.des{background:var(--del);color:var(--onk);width:100%;cursor:default}
.btn.sm{min-height:44px;font-size:15px;border-radius:12px;padding:8px 14px}
.btn:hover{opacity:.85}.btn:active{opacity:.7}
.ib{width:44px;height:44px;border-radius:50%;background:var(--surf);color:var(--ink);display:grid;place-items:center;flex:none}
.ib svg{width:22px;height:22px}
.chip{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--k,var(--org));flex:none}
.chip svg{width:15px;height:15px;stroke-width:2.6}
.chip.lg{width:40px;height:40px;background:var(--surf)}
.chip.lg svg{width:20px;height:20px}
.chip.dir{color:var(--ink)}
.k-org,.k-fav,.k-later{--k:var(--ink)}
.k-skip{--k:var(--ink2)}
.k-del{--k:var(--del)}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:4px 14px 4px 4px;border:1px solid transparent;border-radius:999px;background:var(--surf);color:var(--ink);font-size:15px;font-weight:650;line-height:1.1;white-space:nowrap}
.pill.k-del{border:1px dashed var(--ink2)}
.pill.v{flex-direction:column;width:58px;padding:5px 3px 9px;border-radius:18px;gap:5px;white-space:normal;text-align:center;font-size:12.5px;min-height:0}
.pill.armed{transform:scale(1.1);background:var(--k);color:var(--onk)}
.pill.armed .chip{color:inherit}
.pill.dim{opacity:.45}
.pm{appearance:none;font:inherit;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:4px 14px;border:0;border-radius:999px;background:var(--surf);color:var(--ink);font-size:15px;font-weight:650}
.pm svg{width:16px;height:16px}
button.pm{cursor:pointer}
.pm[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.pg{font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums;font-weight:500;padding-right:4px}
.list{border-radius:16px;background:var(--surf);overflow:hidden}
.li{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 14px;border-top:1px solid var(--sep);background:var(--surf);color:var(--ink);font-size:17px;width:100%;text-align:left}
.li:first-child{border-top:0}
.li .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.li .tx span{font-size:13px;color:var(--ink2)}
.rowl{flex:1;min-width:0}
.li .val{color:var(--ink);font-weight:600;font-size:17px;font-variant-numeric:tabular-nums}
.th{width:44px;height:44px;border-radius:8px;overflow:hidden;flex:none;background:var(--sunk)}
.th img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.ck{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--org);color:var(--onk)}
.ck svg{width:15px;height:15px;stroke-width:3}
.tile{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--sunk);display:block}
.tile img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.tile .badge{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--del);color:var(--onk)}
.tile .badge svg{width:15px;height:15px;stroke-width:3}
.tile img.btm{object-position:bottom}
.tile.keep img{opacity:.3}
.tile.keep .badge{background:var(--surf);border:1.5px solid var(--ink2)}
.kp{position:absolute;left:6px;bottom:6px;font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--surf);color:var(--ink)}

/* device and sorter */
.dev{--s:.8;position:relative;width:calc(414px*var(--s));height:calc(868px*var(--s));flex:none;margin-inline:auto}
.phone{position:absolute;left:calc(12px*var(--s));top:calc(12px*var(--s));transform:scale(var(--s));transform-origin:0 0;width:390px;height:844px;border-radius:56px;background:var(--bg);color:var(--ink);overflow:hidden;display:flex;flex-direction:column;padding:54px 0 34px;box-shadow:0 0 0 10px #0B0A0C,0 0 0 12px #34313A,0 30px 60px rgba(0,0,0,.18)}
.phone::after{content:"";position:absolute;bottom:9px;left:50%;width:134px;height:5px;margin-left:-67px;border-radius:3px;background:var(--ink);opacity:.85;z-index:9}
.hdr{position:relative;z-index:6;display:flex;align-items:flex-start;justify-content:space-between;padding:4px 16px 0;min-height:64px;gap:12px}
.hdr .l{display:flex;gap:8px}
.pre{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.stage{position:relative;flex:1}
.at{position:absolute;display:flex;justify-content:center;align-items:center;z-index:5}
.at.up{top:8px;left:0;right:0}
.at.down{bottom:12px;left:0;right:0}
.at.left{left:4px;top:62px;height:560px}
.at.right{right:4px;top:62px;height:560px}
.card{position:absolute;left:66px;top:62px;width:258px;height:560px;border-radius:18px;overflow:hidden;background:var(--sunk);box-shadow:var(--card-sh)}
.card img{display:block;width:100%;height:100%;object-fit:cover}
.card.next{transform:translateY(8px) scale(.94)}
.scaled{--s:.72;width:calc(390px*var(--s));height:calc(692px*var(--s));flex:none;margin-inline:auto}
.scaled .stage{width:390px;height:692px;transform:scale(var(--s));transform-origin:0 0}

/* preset switcher shows one screenshot per preset */
.card .p{display:none}
[data-p="0"] .p0,[data-p="1"] .p1,[data-p="2"] .p2,[data-p="3"] .p3{display:block}

/* hero swipe loop: 4 cards, 3s each, one timeline offset by --i */
.i0{--i:0}.i1{--i:1}.i2{--i:2}.i3{--i:3}
.dR{--dx:84px;--dy:8px;--r:8deg;--fx:440px;--fy:40px;--fr:18deg}
.dL{--dx:-84px;--dy:8px;--r:-8deg;--fx:-440px;--fy:40px;--fr:-18deg}
.dD{--dx:6px;--dy:96px;--r:2deg;--fx:20px;--fy:760px;--fr:6deg}
.dU{--dx:-6px;--dy:-96px;--r:-2deg;--fx:-20px;--fy:-760px;--fr:-6deg}
.demo .card,.demo .pill,.demo .touch,.demo .ct i{animation-duration:12s;animation-iteration-count:infinite;animation-delay:calc(var(--i)*3s - 12s)}
.demo .card{animation-name:sr-card;animation-timing-function:linear}
.demo .pill{animation-name:sr-label;animation-timing-function:ease-out}
.demo .pill .chip{color:inherit}
.demo .touch{animation-name:sr-touch;animation-timing-function:linear}
.demo .ct{display:inline-grid;text-align:right}
.demo .ct i{grid-area:1/1;font-style:normal;opacity:0;animation-name:sr-count;animation-timing-function:step-end}
.touch{position:absolute;left:50%;top:46%;width:48px;height:48px;margin:-24px;border-radius:50%;background:rgba(0,0,0,.3);box-shadow:0 0 0 6px rgba(255,255,255,.4);opacity:0;z-index:2}
.demo.paused *{animation-play-state:paused}
@keyframes sr-card{
0%{transform:none;opacity:1;z-index:3}
5%{transform:none;animation-timing-function:cubic-bezier(.3,.1,.3,1)}
11%{transform:translate(var(--dx),var(--dy)) rotate(var(--r))}
14%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));animation-timing-function:ease-in}
19%{transform:translate(var(--fx),var(--fy)) rotate(var(--fr));opacity:1;z-index:3}
19.01%{transform:translateY(8px) scale(.94);opacity:0;z-index:1}
74.99%{transform:translateY(8px) scale(.94);opacity:0;z-index:1}
75%{transform:translateY(8px) scale(.94);opacity:1;z-index:2}
91%{transform:translateY(8px) scale(.94);animation-timing-function:cubic-bezier(.2,.9,.3,1.2)}
97%{transform:none}
100%{transform:none;opacity:1;z-index:2}
}
@keyframes sr-label{
0%,8%{background-color:var(--surf);color:var(--ink);transform:none;opacity:1}
10%,17%{background-color:var(--k);color:var(--onk);transform:scale(1.1);opacity:1}
20%,33%{background-color:var(--surf);color:var(--ink);transform:none;opacity:1}
35%,43%{opacity:.45}46%,58%{opacity:1}
60%,68%{opacity:.45}71%,83%{opacity:1}
85%,93%{opacity:.45}96%,100%{opacity:1}
}
@keyframes sr-touch{
0%,3%{opacity:0;transform:scale(1.3)}
5%,13%{opacity:1;transform:none}
15%,100%{opacity:0;transform:none}
}
@keyframes sr-count{0%{opacity:1}19%{opacity:0}94%{opacity:1}}
@media (prefers-reduced-motion:reduce){
.demo *{animation:none!important}
.demo .card{opacity:0}
.demo .card.i0{opacity:1;z-index:3}
.demo .card.i1{opacity:1;transform:translateY(8px) scale(.94)}
.demo .ct i.i0{opacity:1}
.touch,.pzrow{display:none}
}
.pzrow{display:flex;justify-content:center;margin-top:18px}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;padding-block:20px 56px}
.hero .copy{display:flex;flex-direction:column;gap:20px}
.hero .ask{max-width:520px}

/* how */
.steps{display:grid;gap:16px}
.step{background:var(--surf);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.step .vis{--surf:var(--bg);height:288px;display:flex;flex-direction:column;justify-content:center;gap:10px;margin-bottom:12px}
.step .vis.row{flex-direction:row;align-items:center;gap:8px;justify-content:center;overflow:hidden}
.step .vis .pill{--surf:var(--bg)}
.mini{width:122px;height:265px;border-radius:12px;overflow:hidden;flex:none;box-shadow:var(--card-sh);transform:rotate(-6deg)}
.mini img{display:block;width:100%;height:100%;object-fit:cover}

/* rules */
.rules{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;align-items:center}
.seg{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
ul.acts{display:grid;gap:12px;margin-top:56px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.act{display:flex;gap:12px;align-items:flex-start;background:var(--surf);border-radius:16px;padding:14px 16px 16px}
.act .chip{margin-top:-1px}
.act strong{display:block;font-weight:650}
.act span.d{display:block;font-size:15px;color:var(--ink2);line-height:1.35}
.act.k-del{background:transparent;border:1px dashed var(--ink2)}

/* safe */
.safe{display:grid;gap:16px}
.tilecard{background:var(--surf);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:12px}
.onbg{--surf:var(--bg)}
.review{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.review .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}

/* smart */
.smart{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;align-items:center}
.smartvis{--surf:var(--bg);background:var(--sunk);border-radius:20px;padding:24px 8px;display:flex;justify-content:center;overflow:hidden}
.points{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.points li{display:flex;gap:12px;align-items:flex-start}
.tag{display:inline-block;font-size:13px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--ink);color:var(--bg);vertical-align:middle}

/* privacy */
.priv{display:grid;gap:16px}
.priv .list .li{min-height:60px}

/* pricing */
.plans{display:grid;gap:16px}
.plan{background:var(--surf);border-radius:20px;padding:28px 24px;display:flex;flex-direction:column;gap:18px}
.plan.pro .list{--surf:var(--bg)}
.feat{display:flex;flex-direction:column;gap:10px}
.feat li{display:flex;gap:10px;align-items:flex-start;line-height:1.35}
.feat svg{width:18px;height:18px;margin-top:2px}
.pr{display:flex;align-items:center;gap:12px;min-height:72px;padding:10px 16px;border-top:1px solid var(--sep);background:var(--surf)}
.pr:first-child{border-top:0}
.pr .tx{flex:1;min-width:0}
.pr .tx strong{display:block;font-weight:650}
.pr .tx>span{font-size:14px;color:var(--ink2);line-height:1.3;display:block}
.after{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:28px;text-align:center}

/* faq */
.faq{display:grid;gap:24px}
.qa{border-top:1px solid var(--sep);background:var(--surf)}
.qa:first-child{border-top:0}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:12px 18px;font-weight:650;cursor:pointer}
.qa summary::-webkit-details-marker{display:none}
.qa summary svg{transition:transform .2s;color:var(--ink2)}
.qa[open] summary svg{transform:rotate(180deg)}
.qa p{padding:0 18px 18px;color:var(--ink2);max-width:680px}
@media (prefers-reduced-motion:reduce){.qa summary svg{transition:none}}

/* final */
.inv{--icon:var(--invsurf);background:var(--ink);color:var(--bg);border-radius:24px;padding:48px 24px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.inv .lead{color:var(--invink2)}
.inv .ask{width:100%;max-width:520px}
.inv .appicon{width:72px;height:72px}

/* footer */
.foot{padding-block:32px 40px;display:flex;flex-direction:column;gap:18px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 24px}
.foot nav a{font-size:15px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.foot nav a:hover{color:var(--ink2)}
.legal{font-size:13px;color:var(--ink2);line-height:1.5}

/* call to action */
.cta{display:flex;flex-direction:column;text-align:left;color:var(--ink)}
p.soon{display:flex;align-items:center;justify-content:center;align-self:flex-start;min-height:56px;padding:12px 24px;border-radius:14px;background:var(--surf);font-size:17px;font-weight:650;line-height:1.2;text-align:center}
.cta.inv2{color:var(--bg)}
.cta.inv2 p.soon{align-self:center;background:var(--invsurf)}
.cta.inv2 .bslot{justify-content:center}
.bslot{display:flex;padding-block:14px}
a.badge{display:grid;place-items:center;width:162px;height:54px;border-radius:9px;background:#000000;color:#FFFFFF;box-shadow:inset 0 0 0 1px #A6A6A6;font-size:12px;font-weight:600;line-height:1.2;text-align:center;text-decoration:none;padding:0 8px}

/* legal pages */
.article{max-width:680px;margin:0 auto;padding:48px 0 72px;display:flex;flex-direction:column;gap:16px}
.article .h-3{margin-top:24px}
.article p,.article li{color:var(--ink2)}
.article strong{color:var(--ink)}
.article ul{display:flex;flex-direction:column;gap:6px;padding-left:20px;list-style:disc}
.ph{background:var(--sunk);color:var(--ink);border-radius:6px;padding:1px 6px;font-size:.92em;font-weight:600}
.sup{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}

/* phones */
@container w (max-width:639px){
p.soon{align-self:stretch}
}

/* small phones */
@container w (max-width:370px){
.dev{--s:.68}
.scaled{--s:.62}
}

/* wider than phone */
@container w (min-width:640px){
.wrap{padding-inline:40px}
.navl{display:flex}
.sec{padding-block:112px}
.head{margin-bottom:56px}
.safe{grid-template-columns:repeat(2,minmax(0,1fr))}
.safe .tall{grid-row:span 2}
.priv,.plans{grid-template-columns:repeat(2,minmax(0,1fr))}
.inv{padding:96px 40px;border-radius:32px}
.foot{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}
.legal{flex-basis:100%}
.plan{padding:36px 32px}
}
@container w (min-width:960px){
.steps{grid-template-columns:repeat(3,minmax(0,1fr))}
.hero{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:72px;padding-block:32px 96px}
.hero .dev{--s:.86;margin:0}
.rules{grid-template-columns:auto minmax(0,1fr);gap:88px}
.rules .dev{--s:.78;margin:0}
.smart{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:88px}
.faq{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:start}
.faq .head{margin:0}
}

/* page reset (was the design tool's <helmet> block) */
body{margin:0}

/* launch state — one data-launch attribute on .web switches the whole page.
   Both states ship in the HTML; this hides the one that isn't current, so it
   works with JS off. Class selectors only, so the .tk p / .tk ul resets above
   are not in play. */
[data-launch="live"] .pre-launch{display:none}
[data-launch="soon"] .post-launch{display:none}

/* Reduced motion: the design lists .pzrow in the hide list at line 164, but
   .pzrow{display:flex} is declared two lines later and wins on source order,
   so the Pause control stayed on screen with nothing left to pause.
   Re-asserting the design's own intent. */
@media (prefers-reduced-motion:reduce){.pzrow{display:none}}

/* legal pages: the sub-processor table. The design has no table component, so
   this borrows the .list hairline treatment. Scrolls inside its own box on
   narrow screens rather than widening the page. */
.article table{width:100%;border-collapse:collapse;font-size:15px;text-align:left}
.article th,.article td{padding:10px 12px;border-top:1px solid var(--sep);vertical-align:top;color:var(--ink2)}
.article thead th{border-top:0;color:var(--ink);font-weight:650}
.article .tw{overflow-x:auto;border-radius:12px;background:var(--surf)}