/* Developer-docs look: white app bar, tab row with an underline on the active tab, hero band, cards. */
:root { --bg:#ffffff; --surface:#f8f9fa; --fg:#202124; --muted:#5f6368; --line:#dadce0;
        --blue:#1a73e8; --blue-bg:#e8f0fe; --hero1:#e8f0fe; --hero2:#fce8f1; --card:#ffffff;
        --note:#fef7e0; --note-fg:#7a5900; --note-line:#fbbc04; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#202124; --surface:#292a2d; --fg:#e8eaed; --muted:#9aa0a6; --line:#3c4043;
          --blue:#8ab4f8; --blue-bg:#283142; --hero1:#1f2a3c; --hero2:#2e2230; --card:#292a2d;
          --note:#3a3220; --note-fg:#fdd663; --note-line:#fdd663; }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
       font:16px/1.6 Roboto,"Google Sans",system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:var(--blue); text-decoration:none; }
a:hover { text-decoration:underline; }
.wrap { max-width:1080px; margin:0 auto; padding:0 24px; }

/* App bar + tabs */
header { background:var(--bg); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:2;
         box-shadow:0 1px 2px rgba(60,64,67,.08); }
.top { display:flex; align-items:center; justify-content:space-between; gap:16px; height:60px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--fg); font-size:20px; font-weight:500; }
.brand:hover { text-decoration:none; }
.logo { width:28px; height:28px; flex:none; }
.brand small { color:var(--muted); font-size:14px; font-weight:400; padding-left:10px;
               border-left:1px solid var(--line); }
.btn { display:inline-block; background:var(--blue); color:#fff; font-weight:500; font-size:14px;
       padding:8px 18px; border-radius:4px; }
@media (prefers-color-scheme: dark) { .btn { color:#202124; } }
.btn:hover { text-decoration:none; filter:brightness(1.08); }
.btn.ghost { background:transparent; color:var(--blue); border:1px solid var(--line); }
nav.tabs { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
nav.tabs a { color:var(--muted); font-size:14px; font-weight:500; padding:12px 12px 10px; white-space:nowrap;
             border-bottom:3px solid transparent; }
nav.tabs a:hover { color:var(--fg); text-decoration:none; }
nav.tabs a[aria-current="page"] { color:var(--blue); border-bottom-color:var(--blue); }

/* Hero */
.hero { background:linear-gradient(120deg,var(--hero1),var(--hero2)); border-bottom:1px solid var(--line); }
.hero .wrap { padding-top:64px; padding-bottom:64px; }
.eyebrow { display:inline-block; font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
           color:var(--blue); background:var(--bg); padding:4px 10px; border-radius:12px; margin-bottom:18px; }
h1 { font-size:clamp(30px,4.6vw,46px); line-height:1.15; font-weight:400; letter-spacing:-.01em; margin:0 0 16px; }
.lead { font-size:18px; color:var(--muted); max-width:640px; margin:0 0 28px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; }

/* Content */
main .wrap { padding-top:48px; padding-bottom:48px; }
.pagehead { background:var(--surface); border-bottom:1px solid var(--line); }
.pagehead .wrap { padding-top:40px; padding-bottom:32px; }
.pagehead h1 { font-size:clamp(28px,4vw,36px); margin:0 0 8px; }
.pagehead p { color:var(--muted); margin:0; }
h2 { font-size:24px; font-weight:400; margin:8px 0 20px; }
p { margin:0 0 14px; }
.muted { color:var(--muted); }

.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-bottom:48px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:24px; }
.card .ic { width:40px; height:40px; border-radius:50%; background:var(--blue-bg); color:var(--blue);
            display:grid; place-items:center; font-size:20px; margin-bottom:14px; }
.card h3 { margin:0 0 6px; font-size:17px; font-weight:500; }
.card p { margin:0; color:var(--muted); font-size:15px; }

.note { background:var(--note); color:var(--note-fg); border-left:4px solid var(--note-line);
        border-radius:4px; padding:14px 18px; margin:8px 0 24px; font-size:15px; }
.note b { font-weight:600; }

footer { background:var(--surface); border-top:1px solid var(--line); }
footer .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
               padding-top:28px; padding-bottom:40px; color:var(--muted); font-size:14px; }
footer a { color:var(--muted); }
footer .links { display:flex; flex-wrap:wrap; gap:20px; }

/* Single-page site: tabs jump to sections; keep the target clear of the sticky header. */
section[id] { scroll-margin-top:120px; }
.section { padding:48px 0; border-bottom:1px solid var(--line); }
.section:last-child { border-bottom:0; }
address { font-style:normal; color:var(--muted); }