/* About page — same night design as the app */
body.about{height:auto;background:var(--bg);color:var(--soft);font-size:16px;line-height:1.6}
.about a{text-decoration:none}
.a-wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.a-nav .a-wrap{display:flex;align-items:center;gap:30px;height:64px}
.a-nav .brand{color:#fff}
.a-links{display:flex;gap:24px;font-size:14px}
.a-links a{color:var(--soft)}
.a-links a:hover{color:#fff}
.a-right{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:14px}
.a-login{color:var(--accent)}
.a-login:hover{color:#C4E0F8}
.a-btn{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:6px;background:#fff;color:#08101F;font-weight:600;font-size:14px;white-space:nowrap}
.a-btn:hover{background:#DDE6F2}
.a-btn-line{background:none;color:#fff;border:1px solid var(--line-2)}
.a-btn-line:hover{background:none;border-color:var(--accent-2)}

.a-hero{background:radial-gradient(ellipse 75% 60% at 50% 120%,rgba(156,203,245,.22),transparent 72%),linear-gradient(180deg,#050913 0%,#071026 60%,#0B1633 100%);text-align:center;padding:120px 0 130px}
.a-hero h1{color:#fff;font-weight:400;font-size:clamp(32px,4.6vw,54px);line-height:1.1;letter-spacing:-.02em}
.a-hero p{max-width:34em;margin:18px auto 30px;font-size:17px;color:var(--soft)}
.a-note{display:block;margin-top:14px;font-size:13px;color:var(--faint)}

.a-sec{padding:96px 0;border-top:1px solid var(--line)}
.a-alt{background:#070D1D}
.a-sec h2{color:#fff;font-weight:400;font-size:clamp(26px,3vw,36px);line-height:1.15;letter-spacing:-.015em;max-width:20em}
.a-intro{margin-top:14px;max-width:38em;color:var(--soft)}
.a-prompt{margin-top:48px;color:#fff;font-size:clamp(19px,2vw,23px);line-height:1.35;max-width:32em}
.a-prompt small{display:block;font-size:13px;color:var(--faint);margin-bottom:6px}
.a-versus{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:48px}
.a-versus h3{font-size:14px;font-weight:600;color:var(--faint);margin-bottom:8px}
.a-versus .them p{color:var(--faint);text-decoration:line-through;text-decoration-color:#E0484E;text-decoration-thickness:1.5px}
.a-versus .us h3{color:var(--accent)}
.a-versus .us p{color:#E8EDF5}

.a-feats{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:40px 48px}
.a-feats svg{width:28px;height:28px;color:var(--accent);margin-bottom:14px}
.a-feats h3{color:#fff;font-size:17px;font-weight:600;margin-bottom:6px}
.a-feats p{font-size:15px;color:var(--soft)}

.a-plans{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-2)}
.a-plan{padding:30px 30px 6px 0}
.a-plan+.a-plan{padding-left:30px;border-left:1px solid var(--line)}
.a-plan h3{font-size:15px;font-weight:600;color:var(--accent)}
.a-price{margin-top:10px;color:#fff;font-size:40px;line-height:1;letter-spacing:-.02em}
.a-price span{font-size:15px;color:var(--faint);margin-left:4px;letter-spacing:0}
.a-plan ul{list-style:none;margin:20px 0 26px;padding:0}
.a-plan li{padding:6px 0;font-size:15px}
.a-fine{margin-top:30px;font-size:13px;color:var(--faint)}

.a-faq{margin-top:36px;max-width:760px}
.a-faq details{border-top:1px solid var(--line);padding:18px 0}
.a-faq details:last-child{border-bottom:1px solid var(--line)}
.a-faq summary{cursor:pointer;list-style:none;color:#fff;font-size:17px;display:flex;justify-content:space-between;gap:16px}
.a-faq summary::-webkit-details-marker{display:none}
.a-faq summary::after{content:"+";color:var(--accent);font-size:20px;line-height:1}
.a-faq details[open] summary::after{content:"–"}
.a-faq p{margin-top:10px;max-width:40em}

.a-foot{border-top:1px solid var(--line);padding:26px 0;font-size:13px;color:var(--faint)}
.a-foot .a-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.a-foot nav{margin-left:auto;display:flex;gap:20px}
.a-foot a{color:var(--soft)}
.a-foot a:hover{color:var(--accent)}

@media (max-width:860px){
  .a-links{display:none}
  .a-versus,.a-feats,.a-plans{grid-template-columns:1fr}
  .a-plan,.a-plan+.a-plan{padding:26px 0 16px;border-left:0;border-bottom:1px solid var(--line)}
  .a-sec{padding:72px 0}
  .a-hero{padding:80px 0 90px}
}
@media (max-width:420px){.a-login{display:none}}

/* (literally) - small aside next to the headline */
.lit{font-size:.4em;font-style:italic;font-weight:400;letter-spacing:0;color:var(--soft,#8a94a6);opacity:.75;margin-left:.15em;white-space:nowrap}


/* (literally) - small aside next to the headline */
.lit{font-size:.4em;font-style:italic;font-weight:400;letter-spacing:0;color:var(--soft,#8a94a6);opacity:.75;margin-left:.15em;white-space:nowrap}