/* Tiny Devices page (tiny-devices). Same zine parts as the other app pages; the accent is the
   mint the privacy section uses for this app (fineprint.css .sec-td), with a touch of the
   app's amber. Screenshots are phone-shaped (9:16), so they are framed like Foldman CD's phone. */
:root{--td:#6FD6A8;--td-dk:#1F8F63;--td-amber:#E8731C;--td-char:#17181B}

/* ---------- hero ---------- */
.tdhero{max-width:var(--wrap);margin:0 auto;padding:8px 24px 50px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:30px 56px;align-items:start}
.td-copy{min-width:0;padding-top:10px}
.td-big{font-size:clamp(4.4rem,10vw,9.2rem);line-height:.86;margin:4px 0 0 -4px}
.td-copy .tagline{font-size:clamp(1.6rem,2.8vw,2.3rem);max-width:20ch}
.td-copy .lede{max-width:52ch}
.td-copy .facts{margin:22px 0 6px}
.td-copy .ctas{margin-top:14px}
.td-copy .cta.alt{box-shadow:5px 5px 0 var(--td)}
.td-fine{font-size:.9rem;color:var(--ink2);max-width:54ch;margin-top:18px}
.td-art{position:relative;justify-self:center;width:min(100%,330px);margin:40px 40px 50px 0}
.td-phone{margin:0;position:relative;transform:rotate(3deg)}
.td-phone img{display:block;width:100%;height:auto;border-radius:22px;border:7px solid var(--td-char);outline:2px solid #000;box-shadow:10px 14px 0 rgba(0,0,0,.16)}
.td-phone .tape{left:28%;top:-14px;transform:rotate(-6deg)}
.td-icon{position:absolute;width:112px;right:-46px;top:-26px;border-radius:26px;transform:rotate(9deg);border:3px solid #000;box-shadow:4px 5px 0 #000;z-index:4}
.td-scrawl{position:absolute;font-family:var(--marker);font-size:1.2rem;line-height:1.2;margin:0;z-index:5}
:lang(th) .td-scrawl{line-height:1.45}
.td-scrawl-1{left:-170px;top:56%;max-width:8em;transform:rotate(-6deg)}
.td-arrow-1{position:absolute;left:-84px;top:calc(56% + 62px);width:80px;height:72px}
.td-scrawl-2{right:-40px;bottom:-34px;color:var(--red);transform:rotate(-4deg)}

/* ---------- on the shelf ---------- */
.td-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:30px 56px;align-items:center}
.td-split.flip{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.td-split .lede{max-width:50ch}
.td-ticks{list-style:none;margin:18px 0;padding:0;display:grid;gap:10px;max-width:54ch}
.td-ticks li{position:relative;padding-left:32px}
.td-ticks li::before{content:"";position:absolute;left:0;top:.28em;width:20px;height:20px;border-radius:4px;border:2.5px solid #000;
  background:linear-gradient(var(--td),var(--td)) 50% 50%/8px 8px no-repeat,#fff}
.td-pic{margin:0;position:relative;max-width:340px;justify-self:center;width:100%}
.td-pic img{width:100%;height:auto}
.td-pic.snap img{border-color:#fff}
.td-pic .tape{left:34%;top:-12px;transform:rotate(-4deg)}
.td-pic figcaption{position:static;max-width:none;margin-top:12px}
:lang(th) .td-pic figcaption{line-height:1.4}
.td-pic.t1{transform:rotate(2deg)}
.td-pic.t2{transform:rotate(-2deg)}

/* ---------- built for foldables ---------- */
.td-fold .hinge{margin:26px 0 18px;max-width:560px}
.td-fold .lede{max-width:52ch}
.td-lidnote{max-width:46ch;transform:rotate(-1deg);margin-top:20px;background:var(--td)}

/* ---------- snaps ---------- */
.td-snaps-h{font-size:clamp(1.8rem,3.4vw,2.6rem);margin:0 0 34px 10px;transform:rotate(-2deg)}
.td-collage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 36px;align-items:start;max-width:980px;margin:0 auto}
.td-collage .snap img{width:100%;height:auto}
.td-collage .snap figcaption{position:static;max-width:none;margin-top:12px}
:lang(th) .td-collage .snap figcaption{line-height:1.4}
.td-collage .snap:nth-child(1){transform:rotate(-2deg)}
.td-collage .snap:nth-child(2){transform:rotate(1.6deg);margin-top:36px}
.td-collage .snap:nth-child(3){transform:rotate(-1deg)}
.td-collage .snap .tape{left:50%;top:-12px;transform:translateX(-50%) rotate(3deg)}
.td-collage .snap:nth-child(2) .tape{left:auto;right:-14px;top:-6px;transform:rotate(30deg)}

/* ---------- simulators, the one real thing ---------- */
.td-sim .lede{max-width:56ch}
.td-sim .stamp{margin:0 0 12px;font-size:15px}
.td-real{position:relative}
.td-real .stamp{margin:0 0 12px;font-size:15px}
.td-real .lede{max-width:50ch}
.td-need{list-style:none;margin:16px 0;padding:0;display:grid;gap:10px;max-width:54ch}
.td-need li{position:relative;padding-left:32px}
.td-need li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;border-radius:50%;border:2.5px solid #000;
  background:radial-gradient(circle,#000 0 2px,var(--yellow) 2.5px 5px,#fff 5.5px)}
.td-warn{max-width:48ch;transform:rotate(.8deg);margin-top:22px}

/* ---------- secrets ---------- */
.td-secrets .lede{max-width:50ch}
.td-count{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:baseline;margin:18px 0 6px;padding:0;list-style:none}
.td-count li{font:400 1.25rem/1.1 var(--marker);color:var(--riso)}
.td-count b{font:400 2.4rem/1 var(--cut);color:#000;margin-right:.2em}
:lang(th) .td-count li{line-height:1.5}
.td-secrets .steps h3{font-family:var(--marker);font-weight:400;font-size:1.2rem}

/* ---------- free, then unlock once ---------- */
.td-price-head{max-width:760px;margin:0 0 26px}
.td-price{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 30px;max-width:900px}
.td-card{background:var(--sheet);border:2px solid #000;padding:24px 24px 20px;box-shadow:5px 6px 0 #000}
.td-card:nth-child(1){transform:rotate(-.8deg)}
.td-card:nth-child(2){transform:rotate(.7deg);background:var(--td)}
.td-card h3{font:400 2.1rem/1 var(--cut);margin:0 0 8px}
:lang(th) .td-card h3{font-weight:700;line-height:1.3}
.td-card p{margin:0 0 10px;font-size:.98rem}
.td-code{display:inline-block;font:700 .8rem/1 var(--type);letter-spacing:.12em;border:2px solid #000;padding:4px 7px 3px;margin:0 0 10px!important;background:var(--yellow)}
:lang(th) .td-code{letter-spacing:0;font-size:.9rem}
.td-card ul{margin:6px 0 0;padding-left:1.1em}
.td-card li{margin:0 0 .35em}
.td-card li::marker{content:"✶  "}
.td-fineprice{margin:26px 0 0;max-width:62ch;color:var(--ink2);font-size:.95rem}

/* ---------- small details (J-card) ---------- */
.td-liner{max-width:760px;margin:0 auto}
.td-liner .spine{background:var(--td);color:#000}
.td-hidden{margin:0 0 6px;padding-left:1.2em;display:grid;gap:8px}
.td-hidden li::marker{content:"✶  "}

/* ---------- faq ---------- */
.td-faq .lede{max-width:56ch}
.td-faq .faq{margin-top:22px}

/* ---------- sign-off ---------- */
.td-endgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:46px;align-items:start}
.td-priv{max-width:none;transform:rotate(-1.5deg);background:var(--td)}
.td-priv ul{margin:6px 0 12px;padding-left:1.1em}
.td-priv li{margin:0 0 .4em}
.td-priv li::marker{content:"✶  "}
.td-end .spine{background:var(--td);color:#000}
.td-end .jfront h2{font-size:2.4rem}
.td-end .join-note{margin:0 0 12px}
.td-legal{font-size:.85rem;color:var(--ink2);margin:14px 0 0}
.end-links{margin:6px 0 0;padding:0;list-style:none}
.end-links li{padding:8px 0;border-bottom:1.5px dotted #000}
.end-links a{font-weight:700;text-underline-offset:3px}
.end-links a:hover{background:var(--yellow)}

@media (max-width:1180px){
  .tdhero{grid-template-columns:minmax(0,1fr)}
  .td-art{margin:40px auto 50px;width:min(70%,320px)}
}
@media (max-width:1020px){
  .td-split,.td-split.flip,.td-endgrid{grid-template-columns:minmax(0,1fr)}
  .td-split.flip .td-pic{order:2}
  .td-collage{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 20px}
}
@media (max-width:760px){
  .td-scrawl-1,.td-arrow-1{display:none}
  .td-price{grid-template-columns:minmax(0,1fr)}
  .td-collage{grid-template-columns:repeat(2,minmax(0,1fr))}
  .td-collage .snap:nth-child(3){grid-column:1 / -1;max-width:50%;margin-inline:auto}
}
@media (max-width:640px){
  .tdhero{padding:6px 16px 40px}
  .td-icon{width:84px;right:-26px;top:-20px;border-radius:18px}
  .td-scrawl-2{right:-6px;bottom:-40px}
  .td-art{width:min(78%,300px)}
}