:root{
  --bg:#0b0d12; --panel:#12151d; --line:#222834;
  --fg:#e8ecf4; --dim:#9aa4b8; --accent:#c8a46a; --accent-2:#7ea88f;
  --max:760px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.65 ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:.005em;
}
img{max-width:100%;height:auto;display:block}

.site-head{
  max-width:var(--max); margin:0 auto; padding:22px 20px 8px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{
  font-weight:700; letter-spacing:-.02em; font-size:17px;
  color:var(--fg); text-decoration:none;
}
.brand span{color:var(--accent)}
.site-head nav{display:flex; gap:18px}
.site-head nav a{color:var(--dim); text-decoration:none; font-size:14px}
.site-head nav a:hover{color:var(--fg)}

main{max-width:var(--max); margin:0 auto; padding:0 20px 40px}

.hero{padding:34px 0 8px; border-bottom:1px solid var(--line)}
.eyebrow{
  margin:0 0 10px; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent);
}
h1{
  font-size:clamp(32px,7.5vw,52px); line-height:1.04; letter-spacing:-.03em;
  margin:0 0 16px; font-weight:800;
}
.lede{font-size:17.5px; color:#cfd7e6; margin:0 0 26px}
.lede strong{color:var(--fg)}

.demo{
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:#0e1117; margin:0 0 22px;
}
.demo-placeholder{
  aspect-ratio:9/16; max-height:520px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:28px; text-align:center; color:var(--dim); font-size:14px;
}
.play{
  width:56px;height:56px;border-radius:50%;
  border:1.5px solid var(--accent); position:relative;
}
.play::after{
  content:""; position:absolute; left:21px; top:17px;
  border-left:16px solid var(--accent);
  border-top:11px solid transparent; border-bottom:11px solid transparent;
}

.cta-row{display:flex; gap:10px; flex-wrap:wrap; padding-bottom:30px}
.btn{
  display:inline-block; padding:11px 18px; border-radius:999px;
  border:1px solid var(--line); color:var(--fg); text-decoration:none;
  font-size:14.5px; font-weight:600; background:transparent;
}
.btn:hover{border-color:#3a4457}
.btn-primary{background:var(--accent); color:#151009; border-color:var(--accent)}
.btn-primary:hover{filter:brightness(1.06)}

section{padding:38px 0 6px; border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}
h2{
  font-size:clamp(21px,4.4vw,27px); line-height:1.2; letter-spacing:-.02em;
  margin:0 0 18px; font-weight:750;
}
h3{font-size:16.5px; margin:0 0 8px; letter-spacing:-.01em}
p{margin:0 0 16px; color:#cfd7e6}
.answer-block{
  background:var(--panel); border-left:3px solid var(--accent);
  padding:16px 18px; border-radius:0 10px 10px 0; color:var(--fg);
}

.grid3{display:grid; gap:12px; margin:22px 0 8px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 16px 6px}
.card p{font-size:14.5px; color:var(--dim); margin-bottom:10px}

.steps{list-style:none; counter-reset:s; padding:0; margin:22px 0 10px}
.steps li{
  counter-increment:s; position:relative; padding:0 0 20px 46px;
}
.steps li::before{
  content:counter(s); position:absolute; left:0; top:1px;
  width:28px;height:28px;border-radius:50%;
  background:var(--panel); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:var(--accent);
}
.steps p{font-size:15px; color:var(--dim); margin:0}
.steps li{font-size:15px; color:#c2cbdb}
.steps strong{color:var(--fg)}
#steps h3{
  font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin:26px 0 12px; font-weight:700;
}

.prompt{
  background:#0e1117; border:1px solid var(--line); border-radius:12px;
  margin:0 0 14px; overflow:hidden;
}
.prompt-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px; border-bottom:1px solid var(--line);
  font-size:13px; color:var(--accent); letter-spacing:.02em;
}
.copy{
  background:transparent; border:1px solid var(--line); color:var(--dim);
  border-radius:999px; padding:5px 13px; font-size:12.5px; cursor:pointer;
  font-family:inherit;
}
.copy:hover{color:var(--fg); border-color:#3a4457}
.copy.done{color:var(--accent-2); border-color:var(--accent-2)}
.prompt pre{
  margin:0; padding:14px; font-size:13px; line-height:1.62;
  white-space:pre-wrap; word-break:break-word;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:#c9d3e4;
}

.table-wrap{overflow-x:auto; margin:18px 0 10px; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:14.5px}
th,td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top}
th{color:var(--dim); font-weight:600; font-size:13px; letter-spacing:.04em; text-transform:uppercase}
td:first-child{color:var(--fg); font-weight:600}
td{color:#b9c3d4}

.faq details{
  border-bottom:1px solid var(--line); padding:14px 0;
}
.faq details:last-child{border-bottom:0}
.faq summary{
  cursor:pointer; font-weight:650; color:var(--fg); font-size:15.5px;
  list-style:none; display:flex; justify-content:space-between; gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--accent); font-weight:400; flex:none}
.faq details[open] summary::after{content:"–"}
.faq p{margin:10px 0 2px; font-size:15px; color:var(--dim)}

.site-foot{
  max-width:var(--max); margin:0 auto; padding:26px 20px 60px;
  border-top:1px solid var(--line); color:var(--dim); font-size:13.5px;
}
.site-foot p{margin:0 0 8px; color:var(--dim)}
.site-foot strong{color:var(--fg)}
.small{font-size:12.5px; opacity:.75}

@media(min-width:720px){
  .grid3{grid-template-columns:repeat(3,1fr)}
  .demo-placeholder{aspect-ratio:16/10; max-height:none}
}
@media(max-width:520px){
  .site-head nav{gap:14px}
  .site-head nav a{font-size:13px}
}