:root{color-scheme:dark;--bg:#111111;--panel:#191919;--fg:#ededed;--muted:#b4b4b4;--dim:#9a9a9a;--line:#2e2e2e;--white:#ededed;--green:#a9cbb3}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:radial-gradient(ellipse 70% 650px at 78% 320px,#ffffff09,transparent 75%),radial-gradient(ellipse 55% 600px at 8% 900px,#ffffff05,transparent 75%),var(--bg);background-repeat:no-repeat;color:var(--fg);font-family:'Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
a:focus-visible,summary:focus-visible{outline:3px solid #ededed;outline-offset:5px;border-radius:4px}
img{max-width:100%}
.wrap{width:min(1200px,calc(100% - 96px));margin-inline:auto}
.skip{position:fixed;left:16px;top:-100px;z-index:10;background:#ededed;color:#111;padding:12px 16px}.skip:focus{top:12px}

/* header */
.header{min-height:88px;display:flex;align-items:center;gap:32px;border-bottom:1px solid #ffffff14}
.brand{display:inline-flex;align-items:center;gap:12px;flex:none}
.brand img{display:block;border-radius:10px}
.brand span{font-size:22px;font-weight:650;letter-spacing:-.5px}
.header nav{display:flex;gap:28px;margin-left:auto;font-size:14px;color:var(--muted)}
.header nav a:hover,.nav-cta:hover{color:#fff}
.nav-cta{font-size:14px;font-weight:600;border:1px solid #ffffff2e;border-radius:999px;padding:9px 16px}

/* hero */
.hero{padding:64px 0 40px}
.eyebrow{display:flex;align-items:center;gap:9px;color:#c9c9c9;font-size:13px;margin:0 0 22px}
.eyebrow.muted{color:var(--dim)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
h1{font-size:clamp(40px,5.2vw,72px);line-height:1.04;letter-spacing:-2px;font-weight:600;margin:0;max-width:980px}
h1 span{display:block;color:#bdbdbd}
.lead{max-width:700px;font-size:19px;line-height:1.6;color:#bdbdbd;margin:24px 0 0}
.actions{display:flex;align-items:center;gap:28px;margin-top:32px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;gap:18px;border-radius:999px;padding:15px 24px;font-size:15px;font-weight:600}
.button span{font-size:18px}
.primary{background:var(--white);color:#141414}.primary:hover{background:#fff}
.text-link{font-size:14px;color:#d0d0d0;border-bottom:1px solid #666;padding:6px 0}.text-link:hover{color:#fff}

/* screenshots */
.shot{margin:0}
.frame{display:block;border:1px solid #ffffff1f;border-radius:14px;overflow:hidden;background:#0d0d0d;box-shadow:0 24px 70px #0006}
.frame img{display:block;width:100%;height:auto}
.crop-01,.crop-04,.crop-06{position:relative}
.crop-01{aspect-ratio:1280/1090}.crop-04{aspect-ratio:1280/1110}.crop-06{aspect-ratio:1280/870}
.crop-01 img,.crop-04 img,.crop-06 img{height:100%;object-fit:cover;object-position:top}
.hero-shot{margin-top:52px}
figcaption{font-size:14px;color:#a9a9a9;margin-top:14px;max-width:820px;line-height:1.6}

/* pain */
.pain{border-top:1px solid var(--line);padding:56px 0 60px;margin-top:40px}
h2{font-size:clamp(30px,3.4vw,46px);line-height:1.1;letter-spacing:-1.2px;font-weight:600;margin:0}
.pain-list{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pain-list li{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 22px 24px;font-size:16px;line-height:1.6;color:#c4c4c4}
.pain-list b{display:block;color:var(--fg);font-size:18px;margin-bottom:8px;font-weight:650}
.origin{margin:28px 0 0;max-width:760px;font-size:17px;line-height:1.65;color:#cfcfcf;border-left:2px solid var(--green);padding-left:18px}

/* how */
.how{border-top:1px solid var(--line);padding-top:56px}
.intro{margin-bottom:48px}
.step{display:grid;grid-template-columns:320px minmax(0,1fr);gap:48px;align-items:start;padding-bottom:72px}
.copy{position:sticky;top:28px;padding-top:6px}
.num{display:block;font-size:13px;color:var(--green);margin-bottom:14px;font-weight:600}
.copy h3{font-size:28px;line-height:1.2;letter-spacing:-.6px;font-weight:600;margin:0 0 16px}
.copy p{font-size:16px;line-height:1.7;color:var(--muted);margin:0}

/* pilot */
.pilot{border-top:1px solid var(--line);padding:64px 0;display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.pilot-copy>p:not(.eyebrow){font-size:17px;line-height:1.7;color:var(--muted);max-width:440px;margin:22px 0 28px}
.plan{background:linear-gradient(135deg,#232323,#171717);border:1px solid #ffffff1f;border-radius:16px;padding:30px}
.price-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.price-row div{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:#141414}
.price-row b{display:block;font-size:28px;letter-spacing:-.5px;line-height:1.15}
.price-row span{font-size:14px;color:var(--dim)}
.steps{list-style:none;padding:0;margin:24px 0 0;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:0 0 16px 44px}
.steps li:before{content:counter(s);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:#2b2b2b;font-size:13px;font-weight:700;display:grid;place-items:center}
.steps strong{display:block;font-size:17px;font-weight:650}
.steps span{display:block;font-size:15px;color:var(--muted);line-height:1.6;margin-top:2px}
.small{font-size:13px;color:var(--dim);line-height:1.6;margin:8px 0 0;border-top:1px solid var(--line);padding-top:16px}

/* faq */
.faq{border-top:1px solid var(--line);padding:60px 0;display:grid;grid-template-columns:1fr 1.3fr;gap:64px}
details{border-top:1px solid var(--line)}details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;font-size:17px;font-weight:600;padding:18px 36px 18px 0;position:relative}
summary::-webkit-details-marker{display:none}
summary:after{content:'+';position:absolute;right:4px;top:14px;color:#ccc;font-size:22px;font-weight:400}
details[open] summary:after{content:'−'}
details p{font-size:15px;line-height:1.7;color:var(--muted);margin:0 24px 20px 0}

/* closing */
.closing{border-top:1px solid var(--line);padding:64px 0 72px}
.closing>p{font-size:18px;line-height:1.6;color:var(--muted);margin:20px 0 28px;max-width:560px}
.closing small{display:block;margin-top:14px;font-size:13px;color:var(--dim)}
.footer{border-top:1px solid #ffffff14;display:flex;align-items:center;gap:24px;padding:20px 0 28px}
.footer .brand span{font-size:18px}
.footer p{margin:0 0 0 auto;font-size:13px;color:var(--dim)}

@media(max-width:1000px){
  .wrap{width:calc(100% - 56px)}
  .step{grid-template-columns:1fr;gap:22px;padding-bottom:56px}
  .copy{position:static}
  .copy p{max-width:680px}
  .pilot,.faq{grid-template-columns:1fr;gap:32px}
  .pain-list{grid-template-columns:1fr}
}
@media(max-width:640px){
  .wrap{width:calc(100% - 32px)}
  .header{min-height:72px;gap:12px}
  .header nav{display:none}
  .brand img{width:40px;height:37px;border-radius:8px}
  .brand span{font-size:19px}
  .nav-cta{margin-left:auto;font-size:13px;padding:8px 13px}
  .hero{padding:36px 0 24px}
  h1{letter-spacing:-1.2px}
  .lead{font-size:16px}
  .button{font-size:14px;padding:14px 20px;width:100%;justify-content:center}
  .actions{gap:14px}
  .hero-shot{margin-top:32px}
  .frame{border-radius:10px}
  figcaption{font-size:13px}
  .pain{padding:40px 0;margin-top:24px}
  .pain-list li{padding:18px}
  .origin{font-size:15px}
  .how{padding-top:40px}
  .intro{margin-bottom:32px}
  .copy h3{font-size:23px}
  .copy p{font-size:15px}
  .pilot{padding:44px 0}
  .plan{padding:20px}
  .price-row{grid-template-columns:1fr}
  .price-row b{font-size:24px}
  .faq{padding:44px 0}
  summary{font-size:16px}
  .closing{padding:44px 0 52px}
  .closing>p{font-size:16px}
  .footer{flex-wrap:wrap}
  .footer p{margin:0;flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}