/* Corners pages on slowthings.studio. Colours follow the app: paper, ink, clay, sea. */
@font-face{font-family:"Geist";src:url("/till/fonts/Geist.ttf") format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/till/fonts/GeistMono.ttf") format("truetype");font-weight:100 900;font-display:swap}
:root{--paper:#F3EDE2;--paper-2:#EAE2D3;--card:#FBF8F2;--line:#DCD2C0;--ink:#2B2622;--ink-2:#5A514A;--muted:#857A70;
  --clay:#C8553D;--sea:#4E6E73;--peach:#F2C9A8;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;
  --serif:Georgia,"Times New Roman",serif;--hand:"Segoe Print","Bradley Hand","Comic Sans MS",cursive}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:400 17px/1.65 var(--sans);background:var(--paper);
  background-image:radial-gradient(rgba(43,38,34,.07) 1px,transparent 1px);background-size:18px 18px;
  padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:var(--clay)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:4px}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
.narrow{max-width:760px}
.label{font:400 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
b{color:var(--ink);font-weight:600}

.top{position:sticky;top:0;z-index:5;background:rgba(243,237,226,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:62px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:600 22px/1 var(--serif);letter-spacing:-.3px}
.brand img{width:34px;height:34px;border-radius:9px;display:block}
.top nav{display:flex;gap:4px}
.top nav a{text-decoration:none;color:var(--ink-2);font:400 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:10px;border-radius:8px}
.top nav a:hover{background:var(--paper-2);color:var(--ink)}

h1{font:600 clamp(38px,6.4vw,64px)/1.04 var(--serif);letter-spacing:-.02em;margin:14px 0 18px}
h1 span{color:var(--clay)}
h2{font:600 clamp(28px,4vw,38px)/1.12 var(--serif);letter-spacing:-.015em;margin:10px 0 12px}
.lead{font-size:19px;color:var(--ink-2);margin:0 0 26px;max-width:540px}
.hand{font-family:var(--hand);color:var(--sea)}

.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:12px;text-decoration:none;font:600 15px/1.2 var(--sans);border:1px solid transparent;cursor:pointer}
.btn.primary{background:var(--ink);color:#fff}.btn.primary:hover{background:#000}
.btn.clay{background:var(--clay);color:#fff}
.btn.ghost{border-color:var(--line);color:var(--ink);background:var(--card)}
.btn svg{width:17px;height:17px;fill:currentColor;flex:none}
.cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.facts{display:flex;flex-wrap:wrap;gap:6px 18px;margin:22px 0 0;padding:0;list-style:none}
.facts li{font:400 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.facts li::before{content:"✓ ";color:var(--clay)}

/* Paper photos with tape, drawn in CSS (no screenshots yet) */
.pile{position:relative;height:380px;max-width:420px;margin:0 auto;width:100%}
.photo{position:absolute;background:#fff;padding:12px 12px 44px;border-radius:3px;box-shadow:0 14px 30px rgba(43,38,34,.16),0 1px 0 rgba(43,38,34,.06)}
.photo i{display:block;width:100%;height:100%;border-radius:1px}
.photo span{position:absolute;left:0;right:0;bottom:10px;text-align:center;font:400 20px/1 var(--hand);color:var(--ink-2)}
.photo::before{content:"";position:absolute;top:-12px;left:50%;width:92px;height:26px;margin-left:-46px;background:rgba(242,201,168,.85);
  transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.p1{width:210px;height:250px;left:4%;top:40px;transform:rotate(-7deg)}
.p1 i{background:linear-gradient(160deg,#9FB7B9,#4E6E73 60%,#2F4649)}
.p2{width:200px;height:236px;right:4%;top:10px;transform:rotate(5deg)}
.p2 i{background:linear-gradient(200deg,#F2C9A8,#C8553D 70%,#8E3524)}
.p2::before{background:rgba(78,110,115,.55)}
.p3{width:190px;height:220px;left:26%;top:150px;transform:rotate(-1.5deg)}
.p3 i{background:linear-gradient(180deg,#E9DCC3,#C9B58F 55%,#8A7553)}
.p3::before{background:rgba(253,251,246,.92);border:1px solid rgba(0,0,0,.05)}

.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:40px;align-items:center;padding:64px 0 40px}
section{padding:48px 0}
.section-lead{color:var(--ink-2);max-width:620px;margin:0 0 28px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}
.card h3{font:600 18px/1.3 var(--sans);margin:0 0 6px}
.card p{margin:0;color:var(--ink-2);font-size:16px}
.card ul{margin:8px 0 0;padding-left:20px}.card li{color:var(--ink-2);margin-bottom:6px;font-size:16px}
.dot{width:28px;height:28px;border-radius:50%;margin-bottom:12px}
.plan .price{font:600 15px/1.3 var(--mono);color:var(--muted);margin:2px 0 10px}
.plan.plus{border-color:var(--clay)}

.help h3{font:400 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:30px 0 10px}
.help .card{padding:6px 22px}
details{border-bottom:1px solid var(--paper-2);padding:14px 0}details:last-child{border-bottom:0}
summary{cursor:pointer;color:var(--ink);font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 18px/1 var(--mono);color:var(--muted)}details[open] summary::after{content:"–"}
details p{margin:8px 0 2px;color:var(--ink-2)}

/* Text pages (privacy, terms, delete) */
.doc main{padding:24px 0 64px}
.doc h1{font-size:clamp(34px,6vw,46px);margin:10px 0 8px}
.doc h2{font:400 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:34px 0 10px}
.doc h2 + p,.doc h2 + ul{margin-top:0}
.doc p,.doc li{color:var(--ink-2)}
.doc ul,.doc ol{padding-left:20px}.doc li{margin-bottom:6px}
.doc .card{margin:0 0 18px}
.doc .card p{font-size:17px;margin:0 0 10px}.doc .card p:last-child{margin:0}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;vertical-align:top;padding:10px 0;border-bottom:1px solid var(--paper-2)}
th{font:400 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-right:16px;width:34%}
td{color:var(--ink-2)}
tr:last-child td,tr:last-child th{border-bottom:0}

footer{border-top:1px solid var(--line);margin-top:24px;padding:22px 0 40px}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
footer a{color:var(--ink);text-decoration:none}footer a:hover{text-decoration:underline}
footer .links{display:flex;flex-wrap:wrap;gap:8px 20px}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding:40px 0 24px}
  .grid3,.grid2{grid-template-columns:1fr}
}
@media (max-width:520px){
  .top nav a.hide-sm{display:none}
  section{padding:36px 0}
  .pile{height:330px}
  .p1{width:170px;height:205px}.p2{width:165px;height:195px}.p3{width:160px;height:185px;top:135px;left:22%}
  .card{padding:18px}
  th{display:block;width:auto;padding-bottom:0;border:0}td{display:block;padding-top:4px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}