/* Steppy additions on top of the landing template:
   the waitlist form and the "Every screen" rail. Tokens come from landing.css. */

html{scroll-padding-top:90px}

/* ===== Waitlist form ===== */
.wl{position:relative}
.wl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wl-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.wl-field{
  display:flex;align-items:center;gap:6px;padding:6px;
  border-radius:20px;
  background:linear-gradient(155deg,rgba(255,255,255,.1),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 22px 48px -22px rgba(0,0,0,.85);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  transition:border-color .25s ease,box-shadow .25s ease;
}
.wl-field:focus-within{
  border-color:rgba(var(--accent-rgb),.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 4px rgba(var(--accent-rgb),.18),0 22px 48px -22px rgba(0,0,0,.85);
}
.wl-dark .wl-field{background:rgba(var(--bg-rgb),.55);border-color:rgba(255,255,255,.22)}

.wl input[type=email]{
  flex:1;min-width:0;height:50px;padding:0 14px;
  background:transparent;border:0;outline:0;
  color:var(--ink);font:500 16px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
}
.wl input[type=email]::placeholder{color:rgba(var(--ink-rgb),.42)}

.wl button{
  position:relative;flex:none;height:50px;padding:0 22px;border:0;border-radius:15px;cursor:pointer;
  background:linear-gradient(180deg,#FF7E55,var(--accent) 55%,#E4502A);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 28px -12px rgba(var(--accent-rgb),.9);
  color:#fff;font:800 19px/1 var(--display);letter-spacing:.01em;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.wl button:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 18px 34px -12px rgba(var(--accent-rgb),1)}
.wl button:active{transform:scale(.97)}
.wl button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wl button[disabled]{cursor:progress}

.wl-spin{
  display:none;position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;
  border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:zzspin .7s linear infinite;
}
.wl.is-loading .wl-label{visibility:hidden}
.wl.is-loading .wl-spin{display:block}

.wl-msg{min-height:22px;margin:10px 4px 0;font-size:14.5px;line-height:1.45;color:rgba(var(--ink-rgb),.7)}
.wl-msg:empty{min-height:0;margin:0}
.wl.is-error .wl-msg{color:#FF9C8A}
.wl.is-error .wl-field{border-color:rgba(255,120,100,.7)}
.wl-dark.is-error .wl-msg{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.4)}

/* Joined: the field folds away, a confirmation takes its place */
.wl.is-done .wl-field{display:none}
.wl.is-done .wl-msg{
  display:flex;align-items:center;gap:12px;margin:0;padding:16px 18px;border-radius:20px;
  background:linear-gradient(155deg,rgba(var(--accent-2-rgb),.2),rgba(var(--accent-2-rgb),.06));
  border:1px solid rgba(var(--accent-2-rgb),.45);
  color:var(--ink);font-size:16px;font-weight:600;
  animation:wlpop .5s cubic-bezier(.2,.9,.3,1.25);
}
.wl-dark.is-done .wl-msg{background:rgba(var(--bg-rgb),.6)}
.wl.is-done .wl-msg::before{
  content:"";flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--accent-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23080A11' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/17px no-repeat;
  box-shadow:0 0 22px rgba(var(--accent-2-rgb),.6);
}
@keyframes wlpop{0%{opacity:0;transform:scale(.92)}100%{opacity:1;transform:none}}
@keyframes wlshake{0%,100%{transform:none}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.wl.is-shake .wl-field{animation:wlshake .4s ease}

.wl-footer-btn{
  display:inline-flex;align-items:center;padding:12px 20px;border-radius:15px;
  background:linear-gradient(180deg,#FF7E55,var(--accent) 55%,#E4502A);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 26px -14px rgba(var(--accent-rgb),.9);
  color:#fff !important;font:800 18px/1 var(--display);
  transition:transform .2s ease;
}
.wl-footer-btn:hover{transform:translateY(-2px)}

/* script.js tints the open FAQ row with the template's teal; keep it on brand */
[data-faq][data-open="1"]{background:linear-gradient(155deg,rgba(var(--accent-rgb),.13),rgba(var(--accent-3-rgb),.05)) !important}

/* ===== Every screen rail ===== */
.rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.rail-nav{display:flex;gap:10px}
.rail-nav button{
  width:50px;height:50px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(155deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .2s ease,opacity .25s ease,background .25s ease;
}
.rail-nav button:hover{background:linear-gradient(155deg,rgba(255,255,255,.16),rgba(255,255,255,.06))}
.rail-nav button:active{transform:scale(.92)}
.rail-nav button[disabled]{opacity:.3;cursor:default}
.rail-nav svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:250px;gap:26px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:10px 4px 30px;margin:0 -4px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);
  outline:none;
}
.rail.at-end{-webkit-mask-image:none;mask-image:none}
.rail::-webkit-scrollbar{display:none}
.rail:focus-visible{box-shadow:0 0 0 2px rgba(var(--accent-rgb),.6);border-radius:20px}

.rail-card{margin:0;scroll-snap-align:start}
.rail-card img{
  width:100%;height:auto;border-radius:30px;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 34px 70px -30px rgba(0,0,0,.95);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease;
}
.rail-card:hover img{transform:translateY(-8px);box-shadow:0 44px 80px -30px rgba(0,0,0,.95),0 0 40px -14px rgba(var(--accent-rgb),.5)}
.rail-card figcaption{display:flex;flex-direction:column;gap:5px;padding:18px 4px 0}
.rail-card strong{font:800 22px/1.05 var(--display);color:var(--ink)}
.rail-card span{font-size:14.5px;line-height:1.45;color:rgba(var(--ink-rgb),.62)}

/* Hero cluster: iPhone 17 screenshots are taller than the template assumes,
   so the stacked layouts need more room and smaller phones. */
@media (max-width:880px){
  .hero-visual{height:700px !important}
}
@media (max-width:560px){
  .hero-visual{height:505px !important}
  .hero-visual img:nth-of-type(2){width:228px !important;margin-left:-114px !important}
  .hero-visual img:nth-of-type(1),
  .hero-visual img:nth-of-type(3){width:172px !important}
}
@media (max-width:380px){
  .hero-visual{height:460px !important}
  .hero-visual img:nth-of-type(2){width:206px !important;margin-left:-103px !important}
  .hero-visual img:nth-of-type(1),
  .hero-visual img:nth-of-type(3){width:154px !important}
}

@media (max-width:720px){
  .rail-nav{display:none}
  .rail{grid-auto-columns:210px;gap:18px}
}
@media (max-width:440px){
  .wl-field{flex-direction:column;align-items:stretch;padding:6px}
  .wl button{width:100%}
  .rail{grid-auto-columns:64vw}
}