/* OneTime marketing page (#253). Dark neon from the app icon, inside the shared header and footer in dev.css.
   The savings calculator is radio buttons and sibling selectors, so the site CSP stays script-src 'none'.
   The bill amounts here must match BILLS in build.mjs. */
.ot{
  --ot-bg:#070A12; --ot-alt:#0C111D; --ot-card:#111827; --ot-text:#E9EEF8; --ot-muted:#A9B4C8;
  --ot-blue:#2F8CFF; --ot-cyan:#35CFFF; --ot-orange:#FF7A1F; --ot-yellow:#FFC23D;
  --ot-line:rgba(233,238,248,.14);
  --ot-grad:linear-gradient(95deg,var(--ot-cyan),var(--ot-blue) 35%,var(--ot-yellow) 72%,var(--ot-orange));
  background:var(--ot-bg);color:var(--ot-text);
}
.ot img{height:auto}
.ot a{color:var(--ot-cyan);text-underline-offset:3px}
.ot h1,.ot h2,.ot h3{overflow-wrap:break-word}
.ot h1 em,.ot h2 em{font-style:inherit;color:var(--ot-cyan);background:var(--ot-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ot h2{max-width:20em}
.ot-eyebrow{font:600 .78rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ot-cyan);margin-bottom:1rem}
.ot-lede{font-size:clamp(1.1rem,1.8vw,1.35rem);color:var(--ot-text);max-width:32em;margin-top:1.3rem}
.ot-body{color:var(--ot-muted);max-width:38em;margin-top:1rem}
.ot-sec{padding:clamp(3.5rem,8vw,6.5rem) 0;scroll-margin-top:70px}
.ot-alt{background:var(--ot-alt)}

/* hero */
.ot-hero{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(60% 90% at 88% 40%,rgba(47,140,255,.28),transparent 70%),radial-gradient(45% 70% at 100% 90%,rgba(255,122,31,.24),transparent 70%)}
.ot-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center;padding-block:clamp(3rem,8vw,6.5rem)}
.ot-hero h1{font-size:clamp(2.7rem,7.4vw,5.6rem)}
.ot-hero h1 em{display:block}
.ot-hero-art{justify-self:center;width:min(100%,400px)}
.ot-hero-art.phone{width:min(100%,300px)}
.ot-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:2rem}
.ot-cta .row{margin-top:0}
.ot-status{font:600 .78rem/1 var(--mono);letter-spacing:.06em;padding:.85rem 1rem;border:1px solid var(--ot-line);color:var(--ot-text)}
.ot-status b{color:var(--ot-orange);font-weight:700}
.ot-cta .ot-jump{font:700 .8rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ot-text);border-bottom:2px solid var(--ot-orange);padding-bottom:.3rem}
@media (max-width:820px){.ot-hero-grid{grid-template-columns:1fr}.ot-hero-art{width:min(70%,280px);justify-self:start}}

/* savings calculator */
.ot-calc{border:1px solid var(--ot-line);background:var(--ot-card);padding:clamp(1.3rem,3vw,2.4rem);margin-top:2.2rem;min-width:0;position:relative}
.ot-calc legend{float:left;width:100%;font:600 1.1rem/1.4 var(--body);margin-bottom:1rem}
.ot-calc input{position:absolute;opacity:0;width:1px;height:1px}
.ot-presets{clear:both;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
.ot-presets label{display:block;text-align:center;cursor:pointer;font:700 1.15rem/1 var(--mono);padding:1rem .3rem;border:1.5px solid var(--ot-line);color:var(--ot-text)}
.ot-presets label small{display:block;font:500 .68rem/1 var(--mono);color:var(--ot-muted);margin-top:.4rem}
.ot-presets label:hover{border-color:var(--ot-cyan)}
#bill-15:checked~.ot-presets [for=bill-15],#bill-25:checked~.ot-presets [for=bill-25],#bill-50:checked~.ot-presets [for=bill-50],#bill-100:checked~.ot-presets [for=bill-100]{background:var(--ot-blue);border-color:var(--ot-blue);color:#04101F}
#bill-15:checked~.ot-presets [for=bill-15] small,#bill-25:checked~.ot-presets [for=bill-25] small,#bill-50:checked~.ot-presets [for=bill-50] small,#bill-100:checked~.ot-presets [for=bill-100] small{color:#04101F}
#bill-15:focus-visible~.ot-presets [for=bill-15],#bill-25:focus-visible~.ot-presets [for=bill-25],#bill-50:focus-visible~.ot-presets [for=bill-50],#bill-100:focus-visible~.ot-presets [for=bill-100]{outline:3px solid var(--ot-orange);outline-offset:3px}
.ot-result{display:none;margin-top:1.8rem}
#bill-15:checked~.ot-results .r-15,#bill-25:checked~.ot-results .r-25,#bill-50:checked~.ot-results .r-50,#bill-100:checked~.ot-results .r-100{display:block}
.ot-result .say{font-size:clamp(1.15rem,2.2vw,1.5rem)}
.ot-result .say b{color:var(--ot-orange)}
.ot-result .keep{font:900 italic clamp(2.5rem,8vw,4.8rem)/1.05 var(--display);font-stretch:80%;margin-top:.9rem;color:var(--ot-yellow)}
.ot-result .keep-note{color:var(--ot-muted)}
.ot-bar{margin-top:1.1rem}
.ot-bar span{display:block;font:500 .74rem/1.4 var(--mono);color:var(--ot-muted);margin-bottom:.3rem}
.ot-bar i{display:block;height:14px;background:var(--ot-orange)}
.ot-bar.us i{background:var(--ot-cyan);width:6px}
.ot-bar .w15{width:15%}.ot-bar .w25{width:25%}.ot-bar .w50{width:50%}.ot-bar .w100{width:100%}
.ot-fine{font-size:.86rem;color:var(--ot-muted);margin-top:1.5rem}

/* cards */
.ot-grid3,.ot-grid4{display:grid;gap:1.1rem;margin-top:2.2rem}
.ot-grid3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.ot-grid4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.ot-card{background:var(--ot-card);border:1px solid var(--ot-line);padding:1.6rem 1.5rem}
.ot-card h3{font-size:1.4rem;margin-bottom:.7rem}
.ot-card p{color:var(--ot-muted)}
.ot-card .ot-tag{font:600 .72rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ot-muted);margin-bottom:.8rem}
.ot-yours{border-color:var(--ot-orange);box-shadow:0 0 0 1px var(--ot-orange),0 0 36px rgba(255,122,31,.2)}
.ot-yours .ot-tag{color:var(--ot-orange)}
.ot-yours p{color:var(--ot-text)}
.ot-who svg{width:34px;height:34px;fill:none;stroke:var(--ot-cyan);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:.8rem}
.ot-who h3{font-size:1.25rem;margin-bottom:.5rem}
.ot-who p{color:var(--ot-muted)}

/* screenshots and videos */
.ot-shots{display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x proximity;margin-top:2.2rem;padding-bottom:1rem}
.ot-shots figure{flex:0 0 min(70vw,240px);scroll-snap-align:start}
.ot-phone{border-radius:30px;border:1px solid var(--ot-line);box-shadow:0 18px 50px rgba(0,0,0,.5);width:100%;height:auto}
.ot-shots figcaption,.ot-video figcaption{font-size:.9rem;color:var(--ot-muted);margin-top:.7rem}
.ot-videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1.4rem;margin-top:2.6rem}
.ot-video video{width:100%;height:auto;border-radius:18px;background:#000;display:block}
.ot-video h3{font-size:1.15rem;margin-top:.8rem}

/* the No list */
.ot-no-grid,.ot-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(2rem,5vw,4.5rem);align-items:center}
.ot-nolist{list-style:none;padding:0;font:900 italic clamp(1.6rem,3.6vw,2.5rem)/1.2 var(--display);font-stretch:80%;text-transform:uppercase}
.ot-nolist li{padding:.28rem 0;border-bottom:1px solid var(--ot-line)}

/* backup */
.ot-backup-art{display:flex;gap:1.2rem;align-items:flex-start;min-width:0}
.ot-backup-art>img{flex:0 0 min(38%,200px);min-width:0}
.ot-code{flex:1;min-width:0;border:1px solid var(--ot-line);background:#05070D}
.ot-code figcaption{font:500 .72rem/1.4 var(--mono);color:var(--ot-muted);padding:.7rem 1rem;border-bottom:1px solid var(--ot-line)}
.ot-code pre{font:400 .84rem/1.55 var(--mono);color:var(--ot-cyan);padding:1rem;overflow-x:auto}
@media (max-width:640px){.ot-backup-art{flex-direction:column}.ot-backup-art>img{flex:none;width:60%}.ot-code{width:100%}}

/* price */
.ot-price{text-align:center;background:radial-gradient(50% 80% at 50% 50%,rgba(47,140,255,.2),transparent 70%)}
.ot-price .ot-body{margin-inline:auto}
.ot-amount{font:900 italic clamp(4.5rem,16vw,9rem)/1 var(--display);font-stretch:80%;background:var(--ot-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--ot-cyan);padding-right:.08em}
.ot-once{font:900 italic clamp(1.5rem,3.5vw,2.2rem)/1.1 var(--display);font-stretch:80%;text-transform:uppercase;margin-top:.4rem}

/* FAQ */
.ot-faq{max-width:60rem}
.ot-faq h2{margin-bottom:1.8rem}
.ot details{border-top:1px solid var(--ot-line)}
.ot details:last-of-type{border-bottom:1px solid var(--ot-line)}
.ot summary{cursor:pointer;font-weight:600;padding:1.05rem 0}
.ot summary:hover{color:var(--ot-cyan)}
.ot details p{color:var(--ot-muted);padding-bottom:1.2rem;max-width:44em}

/* page foot */
.ot-foot{padding:2.6rem 0;text-align:center;border-top:1px solid var(--ot-line)}
.ot-foot img{margin:0 auto .9rem}
.ot-links{display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem 1.6rem;font:600 .78rem/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.ot-made{color:var(--ot-muted);font-size:.9rem;margin-top:.7rem}