/* Swipefold site — a contact-sheet feel: photos on white slides, cut lines in pink, plum-to-night colours from the app icon's hills. */
:root{
  --bg:#f5f1f4; --paper:#ffffff; --ink:#1a141b; --muted:#685c69; --line:#e2d9df;
  --accent:#8e5572; --accent-ink:#ffffff; --accent-soft:#f3e5ee; --cut:#ff3d71;
  --f-display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141016; --paper:#1e1820; --ink:#f1ebf0; --muted:#a898a7; --line:#30272f;
  --accent:#d39bbb; --accent-ink:#1f1220; --accent-soft:#3d2738; --cut:#ff5c88; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141016; --paper:#1e1820; --ink:#f1ebf0; --muted:#a898a7; --line:#30272f;
  --accent:#d39bbb; --accent-ink:#1f1220; --accent-soft:#3d2738; --cut:#ff5c88; color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.55}
a{color:var(--accent)}
img,svg{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* header */
.top{padding-block:20px}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--f-display);font-weight:800;font-stretch:110%;font-size:22px;letter-spacing:-.01em}
.logo img{width:34px;height:34px;border-radius:9px}
.logo .wm span{color:var(--accent)}
.top nav{display:flex;gap:20px;font-size:15px}
.top nav a{color:var(--muted);text-decoration:none}
.top nav a:hover{color:var(--ink)}

/* hero */
.hero{padding-block:36px 24px}
.hero .wrap{display:grid;gap:40px;align-items:center}
@media (min-width:880px){.hero .wrap{grid-template-columns:1.05fr .95fr}}
.eyebrow{font-family:var(--f-mono);font-size:13px;color:var(--muted);letter-spacing:.02em;margin:0 0 14px}
h1{font-family:var(--f-display);font-weight:800;font-stretch:112%;font-size:clamp(38px,6vw,64px);line-height:1.02;letter-spacing:-.025em;margin:0 0 20px;text-wrap:balance}
h1 em{font-style:normal;color:var(--accent)}
.lede{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:34em;margin:0 0 28px}
.stores{display:flex;flex-wrap:wrap;gap:10px}
.store{display:inline-flex;flex-direction:column;justify-content:center;border:1.5px solid var(--ink);border-radius:12px;padding:9px 16px;min-width:170px;background:var(--paper)}
.store small{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.store b{font-size:17px;font-weight:700}
.note{font-size:14px;color:var(--muted);margin-top:14px}

/* phone demo */
.demo{display:flex;flex-direction:column;align-items:center;gap:18px}
.phone{width:min(300px,78vw);border-radius:36px;background:#0b0c10;padding:12px;box-shadow:0 30px 60px -30px rgba(46,34,64,.55)}
.screen{border-radius:26px;overflow:hidden;background:#fff}
.post-head{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:12px;font-weight:600;color:#14161b;background:#fff}
.post-head i{width:22px;height:22px;border-radius:50%;background:linear-gradient(160deg,#8e5572,#2e2240)}
.viewport{aspect-ratio:4/5;overflow:hidden;position:relative;background:#fff}
.strip{display:flex;height:100%;width:500%;animation:swipe 14s infinite}
.strip svg{width:100%;height:100%;display:block}
@keyframes swipe{
  0%,14%{transform:translateX(0)} 20%,34%{transform:translateX(-20%)} 40%,54%{transform:translateX(-40%)}
  60%,74%{transform:translateX(-60%)} 80%,94%{transform:translateX(-80%)} 100%{transform:translateX(0)}}
.dots{display:flex;justify-content:center;gap:5px;padding:9px 0 12px;background:#fff}
.dots b{width:6px;height:6px;border-radius:50%;background:#cfd3db}
.dots b:first-child{animation:dot 14s infinite}
.dots b:nth-child(2){animation:dot 14s infinite -11.2s}
.dots b:nth-child(3){animation:dot 14s infinite -8.4s}
.dots b:nth-child(4){animation:dot 14s infinite -5.6s}
.dots b:nth-child(5){animation:dot 14s infinite -2.8s}
@keyframes dot{0%,19%{background:#8e5572}20%,100%{background:#cfd3db}}
.sheet{width:100%;max-width:460px}
.sheet figcaption{font-family:var(--f-mono);font-size:12px;color:var(--muted);text-align:center;margin-top:8px}
.sheet .frame{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:8px}
@media (prefers-reduced-motion: reduce){.strip,.dots b{animation:none!important}.dots b:first-child{background:#8e5572}}

/* sections */
section{padding-block:56px}
h2{font-family:var(--f-display);font-weight:800;font-stretch:108%;font-size:clamp(28px,4vw,40px);letter-spacing:-.02em;line-height:1.1;margin:0 0 12px;text-wrap:balance}
.sub{color:var(--muted);max-width:40em;margin:0 0 32px}
.modes{display:grid;gap:18px}
@media (min-width:760px){.modes{grid-template-columns:repeat(3,1fr)}}
.mode{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:12px}
.mode .art{border-radius:10px;background:var(--bg);padding:12px;display:flex;align-items:center;justify-content:center;height:200px}
.mode .art svg{max-height:100%;width:auto;max-width:100%}
.mode h3{margin:0;font-size:20px;font-family:var(--f-display);font-weight:700}
.mode p{margin:0;color:var(--muted);font-size:15.5px}
.mode .spec{font-family:var(--f-mono);font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px;margin-top:auto}

.details{display:grid;gap:0;border-top:1px solid var(--line)}
@media (min-width:760px){.details{grid-template-columns:1fr 1fr;column-gap:40px}}
.detail{padding:18px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:28px 1fr;gap:12px}
.detail svg{width:24px;height:24px;color:var(--accent);margin-top:2px}
.detail h3{margin:0 0 4px;font-size:17px}
.detail p{margin:0;color:var(--muted);font-size:15.5px}

.privacy-band{background:linear-gradient(160deg,#8e5572,#2e2240);color:#ffffff}
.privacy-band .wrap{display:grid;gap:20px;align-items:center}
@media (min-width:760px){.privacy-band .wrap{grid-template-columns:1.4fr 1fr}}
.privacy-band h2{color:inherit}
.privacy-band p{margin:0;opacity:.9}
.privacy-band a{color:inherit;font-weight:700}

footer{padding-block:36px;color:var(--muted);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
footer a{color:var(--muted)}

.vids{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (min-width:760px){.vids{grid-template-columns:repeat(4,minmax(0,1fr))}}
.vids figure{margin:0;display:flex;flex-direction:column;gap:8px}
.vids img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:16px;display:block;background:#1e1820;box-shadow:0 18px 40px -24px rgba(46,34,64,.6)}
.vids figcaption{font-family:var(--f-mono);font-size:12px;color:var(--muted);text-align:center}

/* privacy page */
.doc{max-width:720px;padding-block:24px 64px}
.doc h1{font-size:clamp(34px,5vw,48px)}
.doc h2{font-size:22px;margin-top:36px}
.doc p,.doc li{color:var(--ink)}
.doc .updated{font-family:var(--f-mono);font-size:13px;color:var(--muted)}
.doc ul{padding-left:20px}
.doc li{margin-bottom:6px}