/* Landing, guide and 404 pages */
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.top.site{position:sticky}
.top.site .in{max-width:1180px;margin:0 auto;width:100%;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
@media (max-width:760px){.top.site .nav{display:flex;order:3;width:100%;overflow-x:auto;flex-wrap:nowrap}.top.site .brand small{display:none}}
.hero{background:var(--hero);color:var(--hero-ink);padding:56px 0 0;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:36px;align-items:center}
.hero h1{font-size:clamp(32px,4.6vw,54px);line-height:1.05;letter-spacing:-.025em;margin:0 0 16px}
.hero p.lead{font-size:18px;color:var(--hero-muted);margin:0 0 24px;max-width:540px}
.hero .ctas{display:flex;gap:10px;flex-wrap:wrap}
.hero .btn.big.primary{background:var(--hero-ink);border-color:var(--hero-ink);color:var(--hero)}
.hero .btn.big.ghost{background:transparent;border-color:var(--hero-muted);color:var(--hero-ink)}
.hero .trust{display:flex;gap:18px;flex-wrap:wrap;margin:22px 0 0;padding:0;list-style:none;color:var(--hero-muted);font-size:13px}
.hero .trust li::before{content:"✓ ";color:var(--ok)}
.hero .shot{align-self:end;border-radius:14px 14px 0 0;overflow:hidden;background:#eef2f7;box-shadow:var(--hero-shadow);border:1px solid var(--line)}
.hero .shot img{display:block;width:100%;height:auto}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.hero .eyebrow{color:var(--hero-eyebrow)}
section.band{padding:64px 0}
section.band.alt{background:var(--panel)}
section.band h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;margin:0 0 10px;line-height:1.15}
section.band .sub{font-size:16px;color:var(--muted);max-width:680px;margin:0 0 28px}
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.feat .card{padding:20px}
.feat h3{font-size:16px;margin:10px 0 6px}
.feat p{margin:0;color:var(--muted);font-size:14px}
.ico{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.split2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center}
.split2.rev>:first-child{order:2}
.split2 img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line);background:#eef2f7;display:block}
.ticks{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:8px}
.ticks li{padding-left:26px;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:var(--ok-bg);box-shadow:inset 0 0 0 5px var(--ok-bg),inset 0 0 0 16px var(--ok)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px}
.chip{border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:600;background:var(--panel)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:s}
.steps .card{padding:20px;counter-increment:s}
.steps .card::before{content:counter(s);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--brand);color:var(--brand-ink);font-weight:800;margin-bottom:10px}
.steps h3{margin:0 0 6px;font-size:16px}
.steps p{margin:0;color:var(--muted)}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:15px;list-style:none;display:flex;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-size:20px;line-height:1;color:var(--muted)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:8px 0 0;color:var(--muted);max-width:820px}
.ctaband{background:#111418;color:#fff;border-radius:18px;padding:36px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.ctaband h2{margin:0;color:#fff}
.ctaband p{margin:4px 0 0;color:#c4ccd8}
.ctaband .btn{margin-left:auto;background:#fff;color:#111418;border-color:#fff}
/* guide */
.doc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;padding:36px 0 20px}
.doc nav.toc{position:sticky;top:76px;align-self:start;display:flex;flex-direction:column;gap:2px;font-size:13.5px}
.doc nav.toc a{color:var(--muted);text-decoration:none;padding:4px 8px;border-radius:6px}
.doc nav.toc a:hover{background:var(--panel);color:var(--ink)}
.doc article{max-width:780px}
.doc h1{font-size:34px;letter-spacing:-.02em;margin:0 0 8px}
.doc h2{font-size:22px;margin:38px 0 10px;padding-top:8px;scroll-margin-top:80px}
.doc h3{font-size:16px;margin:20px 0 6px}
.doc p,.doc li{color:var(--ink);line-height:1.65}
.doc .lead{font-size:17px;color:var(--muted)}
.doc table{border-collapse:collapse;width:100%;font-size:13.5px;margin:10px 0}
.doc th,.doc td{border-bottom:1px solid var(--line);padding:7px 8px;text-align:left;vertical-align:top}
.doc th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.doc code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;background:var(--seg);padding:1px 5px;border-radius:4px}
.doc .tblx{overflow-x:auto}
.callout{border-left:4px solid var(--accent);background:var(--accent-soft);padding:10px 14px;border-radius:0 8px 8px 0;margin:14px 0}
.callout.warn{border-color:var(--warn);background:var(--warn-bg)}
.nf{min-height:60vh;display:grid;place-items:center;text-align:center;padding:40px 20px}
.nf h1{font-size:64px;margin:0}
@media (max-width:980px){
  .hero .wrap,.split2{grid-template-columns:minmax(0,1fr)}
  .split2.rev>:first-child{order:0}
  .feat,.steps{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .doc{grid-template-columns:minmax(0,1fr)}
  .doc nav.toc{position:static;flex-direction:row;flex-wrap:wrap}
}
@media (max-width:620px){
  .feat,.steps{grid-template-columns:minmax(0,1fr)}
  section.band{padding:44px 0}
  .hero{padding-top:36px}
  .ctaband{padding:24px}
  .ctaband .btn{margin-left:0}
}
/* single-column article pages (Learn) */
.doc.doc1{grid-template-columns:minmax(0,1fr)}
.doc.doc1 article{max-width:820px;margin:0 auto}
.doc .faq details p{color:var(--muted)}
.lcard{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);transition:.15s}
.lcard:hover{border-color:var(--accent);transform:translateY(-2px)}
.lcard h3{margin:0 0 6px;font-size:16px}
.lcard p{margin:0 0 10px;color:var(--muted);font-size:14px}
.lcard .more{margin-top:auto;color:var(--accent);font-weight:700;font-size:13px}
/* contact */
.contact{display:flex;gap:20px 32px;align-items:center;flex-wrap:wrap;padding:28px}
.contact h2{margin:0 0 6px}
.contact .sub{margin:0}
.cbtns{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.cbtns .btn.primary{background:#1f9d55;border-color:#1f9d55;color:#fff}
@media (max-width:620px){.cbtns{margin-left:0}.cbtns .btn{flex:1;justify-content:center}}
.doc .ctaband h2{margin:0;padding:0;color:#fff}
.doc .ctaband p{color:#c4ccd8;margin:4px 0 0}
@media (max-width:760px){.top.site{position:static}.top.site .nav a{white-space:nowrap}}
