/* Sort Them All - site styles. Colours come from the app's DesignTokens.swift. */
:root{
  color-scheme:light dark;
  --canvas:#F8F3EC; --card:#FFFDF9; --well:#EFE7DB; --line:#E5DCCF;
  --ink:#1E1E20; --soft:#6D6A66;
  --green:#1A8A42; --green-hi:#2AA952; --link:#1A8A42;
  --amber:#F5B328; --red:#E5483E;
  --shadow:0 1px 2px rgba(30,30,32,.06),0 8px 24px rgba(30,30,32,.08);
  --round:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --text:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --maxw:1120px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --canvas:#1A1917; --card:#24221F; --well:#2B2925; --line:#36332E;
    --ink:#F6F2EC; --soft:#ADA79F; --link:#4CC46F;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --canvas:#1A1917; --card:#24221F; --well:#2B2925; --line:#36332E;
  --ink:#F6F2EC; --soft:#ADA79F; --link:#4CC46F;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{background:var(--canvas);color:var(--ink);font:17px/1.55 var(--text);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--round);font-weight:800;letter-spacing:-.02em;line-height:1.1;text-wrap:balance;overflow-wrap:break-word}
p{text-wrap:pretty}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
@media(max-width:480px){.wrap{padding:0 16px}}
.soft{color:var(--soft)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--green-hi);outline-offset:3px;border-radius:6px}

/* nav */
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--round);font-weight:800;font-size:19px;text-decoration:none;white-space:nowrap}
.brand img{width:34px;height:34px;border-radius:9px}
.nav nav{display:flex;gap:22px}
.nav nav a{color:var(--soft);font-size:15px;text-decoration:none}
.nav nav a:hover{color:var(--ink)}
@media(max-width:640px){.nav .opt{display:none}}

/* store badge: "coming soon" until store.js has the live URL */
.store{display:inline-flex;align-items:center;gap:10px;font-family:var(--round);font-weight:700;font-size:18px;
  padding:15px 24px;border-radius:16px;white-space:nowrap;text-decoration:none}
.store svg{width:20px;height:20px;flex:none}
.store.soon{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.store.live{background:linear-gradient(180deg,var(--green-hi),var(--green));color:#fff;box-shadow:0 3px 0 #146B33}
.store.live:hover{filter:brightness(1.05)}
.store.live:active{transform:translateY(2px);box-shadow:0 1px 0 #146B33}
.store-note{margin-top:12px;font-size:15px;color:var(--soft)}
@media(max-width:360px){.store{font-size:16px;padding:14px 18px}}

/* hero */
.hero{padding:24px 0 72px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
.hero .logo{width:min(100%,400px);margin-bottom:28px}
.hero h1{font-size:clamp(34px,4.6vw,56px)}
.hero .lede{font-size:clamp(18px,1.6vw,21px);color:var(--soft);max-width:32em;margin:18px 0 30px}
.phone{border-radius:34px;overflow:hidden;background:var(--card);box-shadow:var(--shadow),0 0 0 1px var(--line);max-width:340px;width:100%;justify-self:center}
.phone img{width:100%}
@media(max-width:820px){
  .hero{padding:8px 0 56px}
  .hero .wrap{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero .logo{width:min(80%,320px);margin-bottom:22px}
  .phone{max-width:300px}
}

/* sections */
.sec{padding:72px 0}
.sec h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:12px}
.sec .intro{color:var(--soft);font-size:19px;max-width:36em;margin-bottom:36px}
.band{background:var(--well)}

/* try one */
.try .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.try h2{margin-bottom:12px}
.opts{list-style:none;display:grid;gap:10px}
.opts button{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;
  padding:16px 20px;font-family:var(--round);font-size:19px;font-weight:700;border-radius:16px;background:var(--card);
  box-shadow:inset 0 0 0 2px var(--line);cursor:pointer}
.opts button:hover:not([disabled]){box-shadow:inset 0 0 0 2px var(--soft)}
.opts button[disabled]{cursor:default;opacity:.55}
.opts button.right{opacity:1;box-shadow:inset 0 0 0 2px var(--green-hi)}
.opts button.right::after{content:"Right";color:var(--link);font-size:16px}
.opts button.wrong{opacity:1;box-shadow:inset 0 0 0 2px var(--red)}
.opts button.wrong::after{content:"Not this one";color:var(--soft);font-size:16px;font-weight:600}
.why{margin-top:16px;min-height:1.6em;color:var(--soft)}
@media(max-width:820px){.try .wrap{grid-template-columns:minmax(0,1fr);gap:24px}}

/* steps with screenshots */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.steps li{display:flex;flex-direction:column;gap:16px}
.steps .phone{max-width:none;border-radius:26px}
.steps h3{font-size:22px}
.steps p{color:var(--soft)}
@media(max-width:820px){
  .steps{grid-template-columns:minmax(0,1fr);gap:44px}
  .steps .phone{max-width:300px;align-self:flex-start}
}

/* facts list */
.facts{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;border-top:1px solid var(--line)}
.facts li{padding:20px 0;border-bottom:1px solid var(--line)}
.facts b{display:block;font-family:var(--round);font-size:20px;margin-bottom:2px}
.facts span{color:var(--soft)}
@media(max-width:700px){.facts{grid-template-columns:minmax(0,1fr)}}

/* screenshot strip: scrolls inside itself, never the page */
.strip{display:flex;gap:20px;overflow-x:auto;padding:4px 4px 16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.strip figure{flex:0 0 auto;width:240px;scroll-snap-align:start}
.strip figure.wide{width:376px}
.strip .phone{border-radius:24px;max-width:none}
@media(max-width:480px){.strip figure{width:200px}.strip figure.wide{width:313px}}
.strip figure.wide .phone{border-radius:18px}
.strip figcaption{margin-top:12px;font-size:15px;color:var(--soft)}

/* free and plus */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.plan{background:var(--card);border-radius:22px;padding:26px;box-shadow:var(--shadow)}
.plan h3{font-size:22px;margin-bottom:10px}
.plan ul{list-style:none;display:grid;gap:8px;color:var(--soft)}
.plan li{padding-left:22px;position:relative}
.plan li::before{content:"";position:absolute;left:2px;top:.6em;width:9px;height:9px;border-radius:3px;background:var(--amber)}
.plan.plus li::before{background:var(--green-hi)}
.plans-note{margin-top:20px;color:var(--soft);font-size:15px;max-width:44em}
@media(max-width:900px){.plans{grid-template-columns:minmax(0,1fr)}}

/* faq */
.faq{max-width:780px}
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{font-family:var(--round);font-size:20px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--link);font-weight:600}
.faq details[open] summary::after{content:"\2212"}
.faq p{color:var(--soft);margin-top:10px}
.faq a,.page a{color:var(--link)}

/* closing */
.final{padding:80px 0 88px;text-align:center}
.final img{width:96px;height:96px;border-radius:22px;margin:0 auto 22px;box-shadow:var(--shadow)}
.final h2{font-size:clamp(28px,3.6vw,44px);margin-bottom:12px}
.final p{color:var(--soft);margin-bottom:28px}

/* text pages */
.page{max-width:760px;margin:0 auto;padding:32px 24px 72px}
@media(max-width:480px){.page{padding:24px 16px 56px}}
.page h1{font-size:clamp(32px,5vw,44px);margin-bottom:10px}
.page h2{font-size:23px;margin:36px 0 10px}
.page h3{font-size:19px;margin:22px 0 6px}
.page p,.page li{margin-bottom:12px}
.page ul{padding-left:22px}
.page .updated{color:var(--soft);margin-bottom:24px}
.page .summary{background:var(--card);border-radius:18px;padding:20px 22px;box-shadow:var(--shadow);margin:8px 0 8px}
.page .summary ul{margin:0}
.page .summary li:last-child{margin-bottom:0}
.mail{font-family:var(--round);font-weight:800;font-size:22px;overflow-wrap:anywhere}

/* footer */
footer{border-top:1px solid var(--line);padding:28px 0 40px;color:var(--soft);font-size:15px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}