/* Shared by /product, /docs, /pricing: content pages under the landing's nav and footer. */
.p-hero{padding:90px 0 60px;text-align:center}
.p-kick{font:600 13px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--accent-ink)}
.p-hero h1{font-size:clamp(38px,5vw,68px);font-weight:400;letter-spacing:-.02em;line-height:1.08;margin:16px auto 0;max-width:980px}
.p-hero p{font-size:20px;color:var(--text);max-width:680px;margin:24px auto 0}
.p-cta{display:flex;gap:14px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.p-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--dark);font-weight:500;padding:12px 28px;border-radius:99px;font-size:17px}
.p-btn.ghost{background:#fff;box-shadow:0 0 0 1px #e6e2db}
.p-sec{padding:70px 0}
.p-sec h2{font-size:clamp(30px,3vw,42px);font-weight:400;letter-spacing:-.01em;line-height:1.15;max-width:760px}
.p-sec .lead{font-size:18px;color:var(--text);max-width:640px;margin-top:14px}
.center{text-align:center}.center h2,.center .lead{margin-left:auto;margin-right:auto}

/* product */
.shot{margin:10px auto 0;max-width:1180px;border-radius:18px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(80,40,0,.35),0 0 0 1px #ebe7e0}
.shot img{display:block;width:100%}
.loop{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px;counter-reset:l}
.loop article{background:#fff;border-radius:16px;padding:24px 22px;position:relative;counter-increment:l}
.loop article::before{content:counter(l,decimal-leading-zero);font:600 13px var(--mono);color:var(--accent-ink)}
.loop h3{font-size:21px;font-weight:500;margin:10px 0 8px}
.loop p{color:var(--text);font-size:16px}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#e9e5de;border-radius:16px;overflow:hidden;margin-top:44px}
.feat div{background:#fff;padding:26px 24px}
.feat b{display:block;font-size:18px;font-weight:600;margin-bottom:6px}
.feat span{color:var(--text);font-size:15.5px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.code{background:var(--dark);color:#e6e6e6;font:14px/1.75 var(--mono);padding:22px 24px;border-radius:14px;white-space:pre;overflow-x:auto}
.code .c{color:#7a7a7a}.code .k{color:var(--accent)}.code .s{color:#9ccfe8}

/* docs */
.docs{display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px;padding:60px 0 40px}
.toc{position:sticky;top:110px;align-self:start;display:flex;flex-direction:column;gap:4px;font-size:15px}
.toc b{font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mute);margin:14px 0 6px}
.toc b:first-child{margin-top:0}
.toc a{color:var(--text);padding:4px 10px;border-radius:8px}
.toc a:hover{background:#fff;color:var(--ink)}
.doc h1{font-size:44px;font-weight:400;letter-spacing:-.02em}
.doc>p.lead{font-size:19px;color:var(--text);margin:12px 0 10px;max-width:680px}
.doc h2{font-size:28px;font-weight:500;margin:56px 0 12px;scroll-margin-top:110px;letter-spacing:-.01em}
.doc h3{font-size:19px;font-weight:600;margin:26px 0 8px}
.doc p,.doc li{font-size:16.5px;color:var(--text);max-width:720px}
.doc p+p{margin-top:10px}
.doc ul,.doc ol{padding-left:22px;margin:8px 0}
.doc code{font:14px var(--mono);background:#fff;border:1px solid #ebe7e0;border-radius:6px;padding:1px 6px;color:var(--ink)}
.doc .code{margin:14px 0}
.doc table{border-collapse:collapse;margin:14px 0;font-size:15px;width:100%;max-width:760px}
.doc th,.doc td{text-align:left;padding:9px 12px;border-bottom:1px solid #e6e2db;vertical-align:top}
.doc th{font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.doc td code{white-space:nowrap}
.tabs-c{display:flex;gap:6px;margin-top:14px}
.tabs-c button{font:500 14px var(--sans);padding:6px 14px;border-radius:99px;background:#fff;box-shadow:0 0 0 1px #e6e2db}
.tabs-c button.on{background:var(--dark);color:#fff;box-shadow:none}
.tabs-c+.code{margin-top:10px}
.callout{background:var(--soft);border-radius:12px;padding:14px 18px;margin:16px 0;max-width:760px;font-size:16px}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
.plan{background:#fff;border-radius:18px;padding:26px 22px;display:flex;flex-direction:column}
.plan.pop{box-shadow:0 0 0 2px var(--accent),0 30px 60px -30px rgba(255,101,0,.45)}
.plan .tag{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--accent-ink);min-height:16px}
.plan h3{font-size:22px;font-weight:600;margin-top:6px}
.plan .price{font-size:44px;font-weight:500;letter-spacing:-.02em;margin:10px 0 0}
.plan .per{color:var(--mute);font-size:14px}
.plan ul{list-style:none;margin:20px 0 24px;display:flex;flex-direction:column;gap:9px;font-size:15px;color:var(--text);flex:1}
.plan li::before{content:"✓ ";color:var(--accent)}
.plan li b{color:var(--ink)}
.plan .p-btn{justify-content:center;font-size:15px;padding:11px 18px}
.ent{display:flex;justify-content:space-between;align-items:center;gap:30px;background:var(--dark);color:#fff;border-radius:18px;padding:30px 34px;margin-top:16px}
.ent h3{font-size:24px;font-weight:500}.ent p{color:#aaa;margin-top:6px;max-width:640px}
.faq{max-width:820px;margin:30px auto 0}
.faq details{background:#fff;border-radius:14px;padding:18px 22px;margin-bottom:10px}
.faq summary{font-size:18px;font-weight:500;cursor:pointer}
.faq details p{color:var(--text);margin-top:10px;font-size:16px}

@media (max-width:1000px){
  .loop,.feat,.plans{grid-template-columns:1fr 1fr}
  .split,.docs{grid-template-columns:1fr}
  .toc{position:static;flex-direction:row;flex-wrap:wrap}
  .toc b{width:100%}
  .ent{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  .loop,.feat,.plans{grid-template-columns:1fr}
  .p-hero{padding:60px 0 40px}
  .doc h1{font-size:34px}
}

.docs>*{min-width:0}
.doc table{display:block;overflow-x:auto}
@media (max-width:1000px){.toc{display:none}}