/* NuitCap waitlist — shared styles for every page in site/.
   Motion follows two springs (generated from Apple's damping/response model):
   --spring       damping 1.0, response 0.4s  → default, no overshoot
   --spring-bouncy damping 0.8, response 0.4s → only after a user's own gesture */
:root{
  color-scheme:light dark;
  --text:#1d1d1f; --text-2:#6e6e73; --text-3:#86868b;
  --bg:#ffffff; --bg-2:#f5f5f7; --tile:#ffffff; --tile-alt:#1d1d1f; --plan:#f5f5f7;
  --line:#d2d2d7; --field:#f5f5f7; --field-focus:#ffffff;
  --band:#000000;
  --blue:#0071e3; --blue-hover:#0077ed; --link:#0066cc;
  --orange:#ff9f0a; --red:#ff3b30; --green:#1f9d47;
  --ios-bg:#ffffff; --ios-track:#e5e5ea; --ios-group:#f2f2f7; --ios-sep:rgba(60,60,67,.18);
  --notif:rgba(245,245,247,.92);
  --nav:rgba(255,255,255,.72); --nav-edge:rgba(0,0,0,.1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,sans-serif;
  --spring:linear(0,.0604,.1882,.3329,.4697,.5883,.6861,.7639,.8244,.8706,.9053,.9312,.9503,.9642,.9744,.9817,.987,.9908,.9935,.9954,.9967,.9977,.9984,.9989,1);
  --spring-bouncy:linear(0,.0323,.1114,.2159,.3306,.4449,.5522,.6483,.7316,.8015,.8586,.904,.939,.9653,.9844,.9977,1.0064,1.0116,1.0143,1.0152,1.0148,1.0137,1.0121,1.0104,1.0087,1.007,1.0055,1.0042,1.0032,1.0023,1.0015,1.001,1);
  --settle:600ms;
}
@supports not (transition-timing-function:linear(0,1)){
  :root{--spring:cubic-bezier(.2,.8,.2,1); --spring-bouncy:cubic-bezier(.3,1.25,.4,1)}
}
@media (prefers-color-scheme:dark){
  :root{
    --text:#f5f5f7; --text-2:#a1a1a6; --text-3:#86868b;
    --bg:#000000; --bg-2:#101011; --tile:#1c1c1e; --tile-alt:#2c2c2e; --plan:#1c1c1e;
    --line:#424245; --field:#1c1c1e; --field-focus:#2c2c2e;
    --band:#161617;
    --link:#2997ff; --green:#30d158;
    --ios-bg:#000000; --ios-track:#2c2c2e; --ios-group:#1c1c1e; --ios-sep:rgba(84,84,88,.6);
    --notif:rgba(58,58,60,.92);
    --nav:rgba(22,22,23,.72); --nav-edge:rgba(255,255,255,.12);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
[id]{scroll-margin-top:48px}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg);
  font-size:1.0625rem;line-height:1.47;letter-spacing:-.022em;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
a,button,summary,input{touch-action:manipulation}
:focus-visible{outline:3px solid rgba(0,113,227,.6);outline-offset:3px;border-radius:8px}
.wrap{max-width:980px;margin:0 auto;padding:0 22px}

/* Global nav — a translucent layer content scrolls under. The edge line only
   appears once something is actually under it (app.js toggles .scrolled). */
.nav{position:sticky;top:0;z-index:10;height:48px;background:var(--nav);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 1px 0 var(--nav-edge);transition:box-shadow .3s ease}
.js .nav{box-shadow:0 1px 0 transparent}
.js .nav.scrolled{box-shadow:0 1px 0 var(--nav-edge)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:100%}
.brand{display:flex;align-items:center;gap:8px;color:var(--text);font-weight:600;font-size:1.0625rem;letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand img{width:24px;height:24px}
.nav-links{display:flex;align-items:center;gap:26px;font-size:.75rem;letter-spacing:-.01em}
.nav-links a{color:var(--text);opacity:.8;transition:opacity .2s}
.nav-links a:hover{opacity:1;text-decoration:none}
.nav-links a.pill{color:#fff;opacity:1}

/* Buttons — feedback on press, instantly; release settles on the spring */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:.4em;border:0;cursor:pointer;
  background:var(--blue);color:#fff;border-radius:980px;font-family:inherit;font-weight:400;letter-spacing:-.01em;
  transition:transform var(--settle) var(--spring),background-color .2s}
.pill:hover{background:var(--blue-hover);text-decoration:none}
.pill:active{transform:scale(.96);transition:transform 90ms ease-out,background-color .2s}
.pill.sm{font-size:.75rem;padding:4px 11px}
.pill.lg{font-size:1.0625rem;padding:12px 22px}
.chev{display:inline-block;transition:transform var(--settle) var(--spring)}
.chev:active{transform:scale(.97);transition-duration:90ms}
.chev::after{content:"";display:inline-block;width:.42em;height:.42em;border-right:1.6px solid currentColor;border-top:1.6px solid currentColor;
  transform:rotate(45deg);margin-left:.35em;vertical-align:.08em;transition:transform var(--settle) var(--spring)}
.chev[href^="#"]::after{transform:rotate(135deg);vertical-align:.2em}
.chev:hover::after{transform:translateY(2px) rotate(135deg)}

/* Hero */
.hero{text-align:center;padding:72px 0 0;overflow:hidden}
.hero h1{font-size:clamp(2.5rem,7vw,5rem);line-height:1.05;letter-spacing:-.015em;font-weight:600;margin:0 auto}
.hero .sub{font-size:clamp(1.1875rem,2.4vw,1.5rem);line-height:1.33;font-weight:400;max-width:34ch;margin:18px auto 0;letter-spacing:.009em}
.ctas{display:flex;gap:28px;justify-content:center;align-items:center;margin-top:30px;flex-wrap:wrap}
.ctas .chev{font-size:1.0625rem}
.fine{font-size:.875rem;color:var(--text-2);margin-top:16px;letter-spacing:-.016em}

/* iPhone — a picture of the product, so its internals stay in px */
.stage{margin-top:56px;display:flex;justify-content:center;
  background:linear-gradient(to bottom,var(--bg) 0%,var(--bg) 55%,var(--bg-2) 55%)}
.iphone{width:320px;height:660px;border-radius:56px;background:#1d1d1f;padding:12px;position:relative;
  box-shadow:0 0 0 2px #3a3a3c inset,0 30px 60px -20px rgba(0,0,0,.35),0 18px 36px -18px rgba(0,0,0,.3)}
.screen{width:100%;height:100%;border-radius:44px;background:var(--ios-bg);color:var(--text);overflow:hidden;position:relative;
  text-align:left;letter-spacing:-.01em}
.island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:96px;height:28px;border-radius:20px;background:#000;z-index:2}
.sbar{display:flex;justify-content:space-between;align-items:center;padding:16px 26px 0 30px;font-size:14px;font-weight:600}
.sbar svg{fill:currentColor}
.ios{padding:22px 18px 0}
.ios small{display:block;font-size:13px;color:var(--text-3)}
.ios h2{font-size:30px;line-height:1.1;font-weight:700;margin:2px 0 0;letter-spacing:.005em}
.ring{display:block;margin:18px auto 6px}
.ring .track{stroke:var(--ios-track)}
.ring .val{stroke:url(#g);stroke-linecap:round;stroke-dasharray:578;stroke-dashoffset:77}
.ring-num{font-size:52px;font-weight:700;letter-spacing:-.03em;fill:currentColor;font-variant-numeric:tabular-nums}
.ring-sub{font-size:14px;fill:var(--text-3)}
.left{text-align:center;font-size:15px;font-weight:600;margin:4px 0 14px}
.left span{color:var(--orange)}
.group{background:var(--ios-group);border-radius:12px;overflow:hidden}
.row{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;font-size:15px}
.row+.row{border-top:.5px solid var(--ios-sep)}
.row b{font-weight:600}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px}
.hint{margin-top:12px;font-size:13px;color:var(--text-2);line-height:1.35;padding:0 4px}

/* The equation — dark band */
.dark{background:var(--band);color:#f5f5f7;text-align:center;padding:110px 0 120px}
.dark h2{font-size:clamp(2rem,5.2vw,3.5rem);line-height:1.07;font-weight:600;letter-spacing:-.005em;margin:0 auto;max-width:18ch}
.dark h2 .dim{color:#86868b}
.equation{display:flex;justify-content:center;align-items:flex-start;gap:clamp(8px,3vw,36px);margin:70px 0 0;flex-wrap:wrap}
.term{display:flex;flex-direction:column;align-items:center;gap:6px}
.term b{font-size:clamp(2.75rem,10vw,7rem);font-weight:600;line-height:1;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;min-width:2.9ch;transition:color .25s ease}
.term span{font-size:.9375rem;color:#86868b}
.op{font-size:clamp(1.625rem,6vw,4rem);color:#6e6e73;font-weight:300;line-height:1.3}
.term.total b{color:var(--red)}
.term.total.under b{color:#f5f5f7}
.verdict{font-size:1.0625rem;font-weight:600;margin:36px 0 0;color:#ff6961;min-height:1.5em}
.verdict.under{color:#30d158}
.dark .note{font-size:.875rem;color:#86868b;max-width:52ch;margin:28px auto 0;letter-spacing:-.016em}
.try{font-size:.875rem;color:#a1a1a6;margin:44px 0 0}

/* Range — iOS-style track that fills to the thumb; the thumb grows on press */
.js-only{display:none}
.js .js-only{display:block}
.range{-webkit-appearance:none;appearance:none;width:clamp(96px,18vw,180px);height:28px;margin:10px 0 0;background:transparent;cursor:pointer;
  --p:50%;--fill:#f5f5f7}
.range:focus-visible{outline-offset:2px}
.range::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(to right,var(--fill) 0 var(--p),#48484a var(--p) 100%)}
.range::-moz-range-track{height:4px;border-radius:2px;background:#48484a}
.range::-moz-range-progress{height:4px;border-radius:2px;background:var(--fill)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-12px;border-radius:50%;background:#fff;
  box-shadow:0 .5px 4px rgba(0,0,0,.24),0 3px 8px rgba(0,0,0,.2);transition:transform var(--settle) var(--spring-bouncy)}
.range::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:#fff;
  box-shadow:0 .5px 4px rgba(0,0,0,.24),0 3px 8px rgba(0,0,0,.2);transition:transform var(--settle) var(--spring-bouncy)}
.range:active::-webkit-slider-thumb{transform:scale(1.15);transition:transform 90ms ease-out}
.range:active::-moz-range-thumb{transform:scale(1.15);transition:transform 90ms ease-out}
.range.airbnb{--fill:#ff5a5f}.range.booking{--fill:#4f8af0}

/* Sections & tiles */
.section{padding:110px 0}
.section.grey{background:var(--bg-2)}
.head{text-align:center;margin-bottom:56px}
.head h2{font-size:clamp(2rem,5vw,3rem);line-height:1.08;font-weight:600;margin:0;letter-spacing:-.003em}
.head p{font-size:1.3125rem;color:var(--text-2);margin:12px auto 0;max-width:40ch;line-height:1.38;letter-spacing:.011em}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.tile{background:var(--tile);border-radius:28px;padding:40px 36px;overflow:hidden;position:relative;min-height:300px}
.tile h3{font-size:1.75rem;line-height:1.14;font-weight:600;margin:0 0 10px;letter-spacing:.007em}
.tile p{margin:0;color:var(--text-2);max-width:36ch}
.t-wide{grid-column:span 4}.t-narrow{grid-column:span 2}.t-half{grid-column:span 3}
.t-dark{background:var(--tile-alt);color:#f5f5f7}.t-dark p{color:#a1a1a6}

/* Tile art */
.field{margin-top:28px;display:grid;gap:10px;max-width:420px}
.field div{background:var(--bg-2);border-radius:12px;padding:12px 14px;font-size:.875rem;display:flex;justify-content:space-between;color:var(--text-2);letter-spacing:-.016em}
.field div b{color:var(--text);font-weight:500}
.field .ok{color:var(--green);font-weight:600}
.merge{margin-top:30px;display:grid;gap:8px;font-size:.8125rem}
.bar{height:30px;border-radius:8px;display:flex;align-items:center;padding:0 10px;color:#fff;font-weight:500;width:70%}
.bar.a{background:#ff5a5f}
.bar.b{background:#2f6fde;opacity:.35;text-decoration:line-through}
.merge em{font-style:normal;color:var(--text-2)}
.notif{margin-top:34px;background:var(--notif);border-radius:20px;padding:12px 14px;display:flex;gap:12px;align-items:flex-start;max-width:360px;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.25)}
.notif img{width:38px;height:38px;border-radius:9px}
.notif .top{display:flex;justify-content:space-between;font-size:.8125rem;color:var(--text-2)}
.notif .top b{color:var(--text);font-weight:600}
.notif .msg{font-size:.875rem;line-height:1.3;margin-top:2px}
.doc{margin-top:30px;width:150px;height:190px;background:#fff;border-radius:10px;box-shadow:0 14px 34px -14px rgba(0,0,0,.6);padding:16px;color:#1d1d1f}
.doc i{display:block;height:6px;border-radius:3px;background:#e5e5ea;margin-bottom:8px}
.doc b{display:block;font-size:.8125rem;margin-bottom:12px}
.doc i:nth-child(3){width:70%}.doc i:nth-child(5){width:85%}.doc i:nth-child(6){width:50%}

/* Scroll reveal — only armed by app.js, only for content below the fold.
   Things arrive from where they'd come from: tiles rise, the copied booking
   slides into line with the original, the notification drops from above. */
[data-reveal]{transition:opacity var(--settle) var(--spring),transform var(--settle) var(--spring);
  transition-delay:calc(var(--i,0) * 70ms)}
.is-pre{opacity:0;transform:translateY(28px)}
.bar.b,.merge em,.notif{transition:transform var(--settle) var(--spring),opacity .3s ease,filter .4s ease}
.is-pre .bar.b{transform:translateX(17%);opacity:1;text-decoration-color:transparent}
.bar.b{transition-delay:.35s,.85s;text-decoration-color:currentColor}
.is-pre .merge em{opacity:0}
.merge em{transition-delay:0s,1.1s}
.is-pre .notif{transform:translateY(-22px) scale(.96);opacity:0;filter:blur(6px)}
.notif{transition-delay:.3s,.3s,.3s}

/* Pricing */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.plan{background:var(--plan);border-radius:22px;padding:30px 24px;display:flex;flex-direction:column}
.plan h3{margin:0;font-size:1.3125rem;font-weight:600;letter-spacing:.011em}
.plan .price{font-size:2.5rem;font-weight:600;letter-spacing:-.02em;margin:14px 0 2px}
.plan .per{font-size:.875rem;color:var(--text-2);letter-spacing:-.016em}
.plan ul{list-style:none;padding:0;margin:20px 0 0;font-size:.9375rem;color:var(--text-2);display:grid;gap:8px}
.plan.featured{box-shadow:0 0 0 2px var(--blue)}
.plan .tag{font-size:.75rem;color:var(--orange);font-weight:600;margin:2px 0 0;min-height:18px}
.offer{text-align:center;margin-top:32px;font-size:.9375rem;color:var(--text-2)}

/* FAQ — the answer opens with the spring; reopening mid-close reverses from
   where it is (CSS transitions retarget from the current value). */
.faq{max-width:760px;margin:0 auto}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-size:1.3125rem;font-weight:600;position:relative;letter-spacing:.011em}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:16px;font-size:1.875rem;font-weight:300;color:var(--text-2);
  transition:transform var(--settle) var(--spring)}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 24px;color:var(--text-2);max-width:62ch}
@supports (interpolate-size:allow-keywords) and selector(::details-content){
  :root{interpolate-size:allow-keywords}
  details::details-content{block-size:0;overflow:clip;opacity:0;
    transition:block-size var(--settle) var(--spring),opacity .3s ease,content-visibility var(--settle) allow-discrete}
  details[open]::details-content{block-size:auto;opacity:1}
}

/* Final CTA + sign-up */
.final{text-align:center;padding:120px 0}
.final h2{font-size:clamp(2.25rem,6vw,4rem);line-height:1.06;font-weight:600;margin:0;letter-spacing:-.015em}
.final p{font-size:1.3125rem;color:var(--text-2);margin:14px 0 0;letter-spacing:.011em}
.email{display:flex;max-width:460px;margin:34px auto 0;background:var(--field);border-radius:980px;padding:5px;
  box-shadow:0 0 0 1px transparent;transition:box-shadow .2s,background-color .2s}
.email:focus-within{box-shadow:0 0 0 2px var(--blue);background:var(--field-focus)}
.email.invalid{box-shadow:0 0 0 2px var(--red)}
.email input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:1.0625rem;padding:10px 18px;color:var(--text)}
.email input::placeholder{color:var(--text-3)}
.email input:focus{outline:none}
.email .pill{padding:10px 20px;font-size:.9375rem;min-width:6.5em}
.email.sending .pill{pointer-events:none;opacity:.7}
.spinner{width:1em;height:1em;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.final .form-msg{font-size:.875rem;color:var(--red);margin:12px auto 0;min-height:1.4em;letter-spacing:-.016em}
.final .form-msg:empty{visibility:hidden}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.final .consent{font-size:.8125rem;color:var(--text-3);margin:6px auto 0;max-width:46ch;letter-spacing:-.01em}
.consent a{color:var(--text-2);text-decoration:underline}
.done{display:flex;flex-direction:column;align-items:center;gap:10px;margin:34px auto 0;max-width:460px}
.done[hidden]{display:none}
.done .check{width:56px;height:56px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;
  animation:pop var(--settle) var(--spring-bouncy) both}
.done .check svg{width:26px;height:26px}
.done .check path{stroke-dasharray:30;stroke-dashoffset:30;animation:draw .35s .15s ease-out forwards}
.done strong{font-size:1.3125rem;font-weight:600;letter-spacing:.011em}
.done span{color:var(--text-2)}
@keyframes pop{from{transform:scale(.6);opacity:0}}
@keyframes draw{to{stroke-dashoffset:0}}

/* Legal & status pages */
.page{padding:64px 0 96px}
.page h1{font-size:clamp(2rem,5vw,3rem);line-height:1.08;font-weight:600;margin:0 0 8px;letter-spacing:-.003em}
.page .lead{color:var(--text-2);margin:0 0 40px}
.page h2{font-size:1.3125rem;font-weight:600;margin:36px 0 8px;letter-spacing:.011em}
.page p,.page li{max-width:68ch}
.page ul{padding-left:20px}
.status{text-align:center;padding:140px 0}
.status h1{font-size:clamp(2.25rem,6vw,3.5rem);line-height:1.06;font-weight:600;margin:0;letter-spacing:-.005em}
.status p{font-size:1.3125rem;color:var(--text-2);margin:16px auto 0;max-width:36ch;letter-spacing:.011em}
.status .pill{margin-top:34px}

footer{background:var(--bg-2);color:var(--text-2);font-size:.75rem;line-height:1.5;padding:22px 0 30px;letter-spacing:-.01em}
footer p{margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer a{color:var(--text-2)}

@media (max-width:860px){
  .nav-links a:not(.pill){display:none}
  .tiles{grid-template-columns:1fr}.t-wide,.t-narrow,.t-half{grid-column:auto}
  .tile{padding:32px 26px;min-height:0}
  /* Pricing becomes a swipeable row: native momentum, snaps card by card,
     the next card peeks so it's obvious there's more */
  .plans{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;
    margin:0 -22px;padding:4px 22px 16px;scroll-padding-inline:22px;scrollbar-width:none;overscroll-behavior-x:contain}
  .plans::-webkit-scrollbar{display:none}
  .plan{flex:0 0 min(78%,300px);scroll-snap-align:start}
}
@media (max-width:520px){
  .iphone{width:290px;height:600px}
  .section,.dark,.final{padding:80px 0}
  .equation{margin-top:48px;gap:6px;flex-wrap:nowrap}
  .term b{font-size:2.5rem}
  .op{font-size:1.5rem;line-height:1.6}
  .range{width:76px}
}

/* Accessibility preferences */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.2s !important;transition-delay:0s !important;animation:none !important}
  .is-pre,.is-pre .bar.b,.is-pre .notif{transform:none;filter:none}
  .pill:active,.chev:active{transform:none}
  .done .check path{stroke-dashoffset:0}
}
@media (prefers-reduced-transparency:reduce){
  .nav{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
  .notif{background:var(--bg-2)}
}
@media (prefers-contrast:more){
  :root{--text-2:#424245;--text-3:#545458;--line:#86868b;--nav-edge:rgba(0,0,0,.5)}
  .nav{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
  .email{box-shadow:0 0 0 1px var(--text-2)}
  .plan,.tile{box-shadow:0 0 0 1px var(--line)}
}
@media (prefers-contrast:more) and (prefers-color-scheme:dark){
  :root{--text-2:#d1d1d6;--text-3:#aeaeb2;--line:#8e8e93;--nav-edge:rgba(255,255,255,.5)}
}