/* Circl phone layer: loaded last. Fixes that only matter on touch screens. */

/* iPhone zooms the whole page when you tap a field under 16px. Keep every field at 16px on touch screens. */
@media (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),textarea,select{font-size:16px!important}
}

/* Bigger tap areas without changing how things look */
.who-btn{position:relative}
.who-btn::before{content:"";position:absolute;inset:-11px -6px}
.tskip{padding:11px 16px}
header.top .brand{min-height:40px}
.lp-foot a{display:inline-block;padding:6px 2px}

/* Buttons feel like an app: no text selection or iOS long-press menu on controls */
button,[role=button],.tile,.chip,nav.tabs{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* Landing marquee: smooth on phones (GPU), pauses while touched, and still drifts gently with Reduce Motion on */
.lp-track{will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;animation-name:lpDrift}
@keyframes lpDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.lp-marquee:active .lp-track{animation-play-state:paused}
@media (hover:hover){.lp-marquee:hover .lp-track{animation-play-state:paused}}
@media (prefers-reduced-motion:reduce){
  .lp-track{animation:lpDrift 110s linear infinite!important}
  .lp-marquee.rev .lp-track{animation-direction:reverse!important;animation-duration:130s!important}
}
@media (max-width:520px){
  .lp-track{animation-duration:42s}
  .lp-marquee.rev .lp-track{animation-duration:50s}
}

/* Landing hero rings: keep them moving on phones too, drawn on the GPU */
.front-rings .orbit,.front-rings .r2{will-change:transform}

/* Phone landing: tighter spacing so the Join button and app screens sit higher */
@media (max-width:520px){
  .front.lp-hero{padding-block:22px 14px;gap:18px}
  .lp-screens{width:min(250px,66vw);margin-top:26px}
  .lp-feat{padding:14px}
  .lp-more>section{scroll-margin-top:70px}
}

/* Smooth momentum scrolling inside scroll boxes and sheets */
.sheet,.lp-marquee,.snap,.tdd-list{-webkit-overflow-scrolling:touch}

/* ---------- Password reset screens ---------- */
.reset-check{display:flex;flex-direction:column;align-items:center;gap:14px;margin:22px auto 0;max-width:360px;text-align:center}
.rc-ic{width:72px;height:72px;border-radius:22px;background:var(--panel);display:grid;place-items:center;font-size:34px}
.rc-tips{list-style:none;margin:0;padding:14px 16px;background:var(--panel);border-radius:16px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted);width:100%;box-sizing:border-box}
.rc-tips b{color:var(--ink)}
.pw-wrap{position:relative}
.pw-wrap .in{width:100%;padding-right:64px;box-sizing:border-box}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);font:700 13px var(--body);padding:10px 8px;cursor:pointer}

/* ---------- Centred landing page ---------- */
.lp-more{text-align:center}
.lp-feat{flex-direction:column;align-items:center;text-align:center;gap:10px;padding:20px 18px}
.lp-feat small{max-width:32ch;margin-inline:auto}
.lp-more .faq summary{justify-content:center;text-align:center;position:relative;padding-inline:34px}
.lp-more .faq summary span{position:absolute;right:14px}
.lp-more .faq p{text-align:center;margin-inline:auto;max-width:40ch}
.lp-more section>h2,.lp-more section>.lab{text-align:center}