/* Orbit164 beta testers page (testers/, 2026-11-04). Loaded after site.css and uses its tokens
   and classes; only what this page adds lives here. One accent (the site's violet tint). */

.tst-hero .sub{margin-left:auto; margin-right:auto;}
@media (min-width:1024px){ .tst-hero .sub{margin-left:0;} .tst-hero-shot{justify-content:center;} }

/* What it is: four screens with captions */
.tst-four{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(20px, 2.6vw, 36px);}
.tst-four figure{margin:0; min-width:0;}
.tst-four .shot{width:100%; max-width:300px;}
@media (max-width:1000px){ .tst-four{grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:48px;} }
@media (max-width:560px){ .tst-four{grid-template-columns:1fr; max-width:300px; margin:0 auto; gap:44px;} }

/* Is this you? */
.tst-fit{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(16px, 2.4vw, 28px);}
.tst-card{background:var(--raised); border-radius:var(--r); padding:clamp(22px, 3vw, 32px); box-shadow:0 0 0 1px var(--sep);}
.tst-card--yes{box-shadow:0 0 0 1px rgba(164,151,255,.38);}
.tst-card--yes .ticks li::before{background:var(--tint);}
.tst-card .fine{margin-top:20px;}
@media (max-width:760px){ .tst-fit{grid-template-columns:1fr;} }

/* How it starts */
.tst-path{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(16px, 2.4vw, 28px);}
.tst-path li{display:flex; flex-direction:column; gap:6px; padding:clamp(20px, 2.6vw, 26px); background:var(--raised); border-radius:var(--r); color:var(--text2); font-size:15.5px; line-height:1.5;}
.tst-path b{color:var(--text); font-weight:600; font-size:17px;}
.tst-path .num{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--raised2); color:var(--tint); font-weight:600; font-size:14px; margin-bottom:6px;}
@media (max-width:900px){ .tst-path{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .tst-path{grid-template-columns:1fr;} }

/* Request: always open (a panel, not the main site's fold-out) */
.tst-ask{margin-top:0;}
.tst-ask .ask-in{padding-top:clamp(24px, 3.4vw, 40px);}
.tst-ask .h2{max-width:none;}
.tst-ask .sub{margin-bottom:12px;}
.tst-have{margin-top:18px; text-align:center;}
.tst-faq{padding-bottom:clamp(80px, 10vw, 128px);}
.tst .join{padding-bottom:0;}

/* 2026-11-10: the open beta spots panel (main site markup, site.css .access) above the request box. */
.tst-access{margin-bottom:16px; scroll-margin-top:84px;}

/* 2026-11-10 (owner: "why is there so much bloat on here"): three screens, then the way in. */
.tst-four.tst-three{grid-template-columns:repeat(3, minmax(0, 1fr)); max-width:1000px; margin-left:auto; margin-right:auto;}
@media (max-width:1000px){ .tst-four.tst-three{grid-template-columns:repeat(3, minmax(0, 1fr)); row-gap:48px;} }
@media (max-width:760px){ .tst-four.tst-three{grid-template-columns:1fr; max-width:300px; gap:44px;} }
.tst .join{padding-bottom:clamp(80px, 10vw, 128px);}
/* 2026-11-10 align: the three phones are the same height so their captions line up. Hunt Results is
   390x730, Scan and Vault 390x780: every phone shows at 390:780, top first; the shorter one fills the frame. */
.tst-three .shot img{aspect-ratio:390/780; height:auto; object-fit:cover; object-position:top center;}

/* 2026-11-12 "Hunt together.": the three social screens are all 390x630, so they line up by themselves; the hero is the
   Lounge (390x630 too). The hunt screens below keep their 390:780 frame. */
.tst-soc .shot img{aspect-ratio:390/630; height:auto; object-fit:cover; object-position:top center;}
.tst .feat-head .sub{margin-top:10px;}
/* the hero Lounge is shorter than the old hero phone (630 vs 844 tall), so it shows a little wider on big screens */
@media (min-width:1024px){ .tst-hero .h-front{width:clamp(280px, 26vw, 350px);} }

/* 2026-11-12 epic rebuild: every phone on the page is 390x630 (tool-*, soc-*), so they line up by themselves. */
.tst-frames .shot img{aspect-ratio:390/630; height:auto; object-fit:cover; object-position:top center;}
.tst-vow{margin-top:18px; color:var(--text2); font-size:16px; line-height:1.5; max-width:44ch;}
.tst-vow b{color:var(--text); font-weight:600;}
.tst-flow figcaption b{display:flex; align-items:center; gap:10px;}
.tst-n{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--raised2); color:var(--tint); font-size:13px; font-weight:600; flex:0 0 auto;}
.tst-one{display:flex; justify-content:center;}
.tst-one .shot{width:min(78vw, 320px);}
.tst-privacy .tst-vault-box{background:var(--raised); border-radius:var(--r); padding:clamp(32px, 6vw, 72px); box-shadow:0 0 0 1px rgba(164,151,255,.32);}
.tst-privacy .sub{max-width:52ch;}
.tst-ticks-3{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(12px, 2vw, 28px); margin-top:28px;}
@media (max-width:760px){ .tst-ticks-3{grid-template-columns:1fr;} }
@media (min-width:1024px){ .tst-hero .h-front{width:clamp(250px, 19vw, 280px);} .tst-hero .h-back{width:clamp(180px, 14vw, 210px);} }