:root{--bg:#fbfbfa;--surface:#fff;--ink:#111;--muted:#666;--line:#e8e8e5;--accent:#3157ff;--accent-soft:#eef1ff;--max:1120px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:inherit;text-decoration:none}.wrap{width:min(var(--max),calc(100% - 40px));margin:auto}
header{position:sticky;top:0;z-index:10;background:rgba(251,251,250,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{height:70px;display:flex;align-items:center;justify-content:space-between}.brand{font-weight:800;letter-spacing:-.03em}.navlinks{display:flex;gap:24px;color:#444;font-size:14px}.navlinks a:hover{color:#000}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid #111;background:#111;color:#fff;padding:11px 17px;border-radius:9px;font-weight:650;font-size:14px}.btn.secondary{background:transparent;color:#111;border-color:#d8d8d4}
.hero{padding:112px 0 96px;max-width:850px}.eyebrow{font-size:13px;font-weight:750;text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}h1{font-size:clamp(48px,7vw,82px);line-height:.98;letter-spacing:-.065em;margin:18px 0 25px}h2{font-size:clamp(30px,4vw,46px);line-height:1.05;letter-spacing:-.045em;margin:0 0 16px}h3{line-height:1.2;margin:0 0 8px}.lead{font-size:20px;color:var(--muted);max-width:700px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.section{padding:78px 0;border-top:1px solid var(--line)}.sectionhead{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:28px}.sectionhead p{max-width:520px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px;transition:transform .2s ease,box-shadow .2s ease}.card:hover{transform:translateY(-3px);box-shadow:0 12px 35px rgba(0,0,0,.06)}.icon{width:42px;height:42px;border-radius:11px;background:var(--accent-soft);display:grid;place-items:center;font-weight:800;color:var(--accent);margin-bottom:28px}.meta{font-size:13px;color:var(--muted)}.arrow{display:inline-block;margin-top:22px;font-weight:700}
.band{background:#111;color:#fff;border-radius:22px;padding:46px}.band p{color:#bbb;max-width:650px}.band .btn{background:#fff;color:#111;border-color:#fff}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:0 35px}.faq details{border-top:1px solid var(--line);padding:18px 0}.faq summary{cursor:pointer;font-weight:700}.faq p{color:var(--muted);margin:10px 0 0}
footer{padding:45px 0;border-top:1px solid var(--line);color:#777;font-size:14px}.footerrow{display:flex;justify-content:space-between;gap:20px}.footerlinks{display:flex;gap:18px}
.pagehero{padding:75px 0 55px;max-width:780px}.pagehero h1{font-size:clamp(42px,6vw,68px)}.breadcrumbs{font-size:13px;color:#777;margin-bottom:20px}.app-hero{display:grid;grid-template-columns:1.5fr 1fr;gap:50px;align-items:center}.appbox{background:#111;color:#fff;border-radius:20px;padding:35px;min-height:270px;display:flex;flex-direction:column;justify-content:space-between}.appbox .small{color:#aaa}.featuregrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.featuregrid .card{min-height:160px}.doc-layout{display:grid;grid-template-columns:230px 1fr;gap:55px}.sidebar{position:sticky;top:100px;height:max-content}.sidebar a{display:block;padding:7px 0;color:#666;font-size:14px}.sidebar a:hover{color:#111}.doc h1{font-size:clamp(38px,5vw,58px)}.doc h2{font-size:30px;margin-top:42px}.doc p,.doc li{color:#444}.note{padding:18px 20px;background:var(--accent-soft);border-radius:12px;margin:24px 0}.search{width:100%;padding:14px 16px;border:1px solid #ddd;border-radius:10px;font:inherit;background:#fff}
@media(max-width:800px){.navlinks{display:none}.hero{padding:80px 0}.grid,.featuregrid,.faq,.app-hero,.doc-layout{grid-template-columns:1fr}.sidebar{position:static}.band{padding:30px}.sectionhead{display:block}.footerrow{display:block}.footerlinks{margin-top:14px}}

.bloggrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.post{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px}.post .tag{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);font-weight:800}.post h3{font-size:24px;letter-spacing:-.03em;margin-top:10px}.post p{color:var(--muted)}.post .date{font-size:13px;color:#888}.article{max-width:780px}.article h1{font-size:clamp(42px,6vw,64px)}.article h2{font-size:30px;margin-top:42px}.article h3{font-size:21px;margin-top:28px}.article p,.article li{color:#444}.article .answer{background:var(--accent-soft);padding:22px;border-radius:13px;margin:26px 0}.related{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:800px){.bloggrid,.related{grid-template-columns:1fr}}

.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin:24px 0;background:var(--surface)}
.tablewrap table{border-collapse:collapse;width:100%;font-size:14px}
.tablewrap th,.tablewrap td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tablewrap thead th{background:#f6f6f4;font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:750;white-space:nowrap}
.tablewrap tbody tr:last-child td,.tablewrap tbody tr:last-child th{border-bottom:0}
.tablewrap tbody th{font-weight:650;color:var(--ink)}
.sidegroup{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:#999;font-weight:750;margin:20px 0 2px}
.sidebar a.on{color:var(--accent);font-weight:650}

.linklist{list-style:none;margin:14px 0 0;padding:0}
.linklist li{margin:0 0 8px}
.linklist a{color:var(--accent);font-size:14px}
.linklist a:hover{text-decoration:underline}

/* --- hero: two-column with highlighted headline --- */
.hero{max-width:none;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:60px;align-items:center;padding:96px 0 84px}
.hero-copy{max-width:640px}
.hero h1{font-size:clamp(40px,5.4vw,68px);line-height:1.05;letter-spacing:-.035em;margin:16px 0 0}
.hero .lead{margin-top:22px}
.hl{color:var(--accent);background:var(--accent-soft);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.02em .14em;border-radius:12px}
/* primary CTA is brand blue site-wide; .band re-asserted below because it
   sits on #111 and needs the white treatment (equal specificity, so order wins) */
.btn:not(.secondary){background:var(--accent);border-color:var(--accent);color:#fff}
.band .btn{background:#fff;color:#111;border-color:#fff}
.hero-art svg{width:100%;height:auto;display:block}
@media(max-width:800px){.hero{grid-template-columns:1fr;gap:44px;padding:64px 0 56px}.hero-art{max-width:420px}}

/* --- prose link styling: content areas only, never nav/footer/cards --- */
.doc a:not(.btn),.article a:not(.btn),.answer a:not(.btn),.lead a:not(.btn){color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.doc a:not(.btn):hover,.article a:not(.btn):hover,.answer a:not(.btn):hover,.lead a:not(.btn):hover{text-decoration-thickness:2px}
/* headline breathes a little more on desktop; mobile stays tight */
/* 1.3 clears the highlight's own box (Inter's em box ~1.21em + padding),
   so the two highlighted lines never overlap */
@media(min-width:801px){.hero h1{line-height:1.3}}

/* --- mobile nav: hamburger + dropdown panel --- */
.menu-btn{display:none;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer;padding:0;color:var(--ink)}
.menu-btn svg{display:block}
@media(max-width:800px){
  .menu-btn{display:inline-flex}
  .navlinks.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);padding:6px 20px 14px;gap:2px;box-shadow:0 16px 28px rgba(17,17,17,.08)}
  .navlinks.open a{padding:13px 2px;border-bottom:1px solid var(--line);color:var(--ink);font-size:15px}
  .navlinks.open a:last-child{border-bottom:none}
}

/* --- 404 page --- */
.notfound{padding:96px 0 80px;max-width:640px;text-align:center;margin:0 auto}
.notfound .eyebrow{justify-content:center}
.notfound h1{font-size:clamp(38px,6vw,58px);line-height:1.1;letter-spacing:-.03em;margin:14px 0 0}
.notfound .lead{margin:18px auto 0;max-width:46ch}
.notfound .actions{justify-content:center;margin-top:32px}
.waveform{display:block;margin:36px auto 0}
.wf-bar{transform-box:fill-box;transform-origin:50% 100%;animation:wf-bounce 1.1s ease-in-out infinite}
@keyframes wf-bounce{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.7)}}
@media(prefers-reduced-motion:reduce){.wf-bar{animation:none}}
.notfound-links{display:flex;gap:10px;justify-content:center;margin-top:44px;color:var(--muted);font-size:14px}
.notfound-links a{color:var(--muted)}.notfound-links a:hover{color:var(--ink)}

.search-empty{margin-top:16px;font-size:14px;color:var(--muted)}.search-empty a{color:var(--accent)}