:root{
  --bg:#FAFAF8; --surface:#FFFFFF; --surface-2:#F1F0EC; --surface-3:#EAE8E2;
  --border:#E4E2DC; --border-strong:#D3D0C8;
  --ink:#14171A; --ink-dim:#5B6168; --ink-faint:#8A8F95;
  --accent:#0F8A8A; --accent-ink:#FFFFFF; --accent-soft:#E3F3F1; --accent-strong:#0B6E6E;
  --good:#1E8E5A; --good-soft:#E3F3EA; --warn:#B4740E; --warn-soft:#FBF0DD; --bad:#C4392B; --bad-soft:#FBEAE7;
  --code-bg:#F1F0EC; --shadow:0 1px 2px rgba(20,23,26,0.04), 0 4px 16px rgba(20,23,26,0.05);
  --font-display:'Sora',system-ui,sans-serif; --font-body:'IBM Plex Sans',system-ui,sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#14171A; --surface:#191D21; --surface-2:#1F2327; --surface-3:#262B30;
    --border:#2C3136; --border-strong:#383E44;
    --ink:#EDEEF0; --ink-dim:#9AA1A8; --ink-faint:#6B7278;
    --accent:#3FD1C9; --accent-ink:#06201E; --accent-soft:rgba(63,209,201,0.13); --accent-strong:#63DED7;
    --good:#3FBB80; --good-soft:rgba(63,187,128,0.14); --warn:#E0A63C; --warn-soft:rgba(224,166,60,0.14); --bad:#E2685A; --bad-soft:rgba(226,104,90,0.14);
    --code-bg:#20262A; --shadow:0 1px 2px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.25);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#14171A; --surface:#191D21; --surface-2:#1F2327; --surface-3:#262B30;
  --border:#2C3136; --border-strong:#383E44;
  --ink:#EDEEF0; --ink-dim:#9AA1A8; --ink-faint:#6B7278;
  --accent:#3FD1C9; --accent-ink:#06201E; --accent-soft:rgba(63,209,201,0.13); --accent-strong:#63DED7;
  --good:#3FBB80; --good-soft:rgba(63,187,128,0.14); --warn:#E0A63C; --warn-soft:rgba(224,166,60,0.14); --bad:#E2685A; --bad-soft:rgba(226,104,90,0.14);
  --code-bg:#20262A; --shadow:0 1px 2px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.25);
}

body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); line-height:1.6; }
*{ box-sizing:border-box; }
h1,h2,h3,h4{ font-family:var(--font-display); text-wrap:balance; color:var(--ink); line-height:1.25; margin:0; }
code,pre,kbd{ font-family:var(--font-mono); }
a{ color:var(--accent-strong); text-decoration:none; }
a:hover{ text-decoration:underline; }
p{ margin:0 0 14px; max-width:70ch; }
ul,ol{ margin:0 0 14px; padding-left:22px; max-width:68ch; }
li{ margin-bottom:6px; }
table{ border-collapse:collapse; width:100%; font-size:13.5px; }
th,td{ text-align:left; padding:8px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
th{ font-family:var(--font-display); font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-dim); font-weight:600; }
code{ background:var(--code-bg); border:1px solid var(--border); border-radius:4px; padding:1px 5px; font-size:.9em; color:var(--accent-strong); }
pre{ background:var(--code-bg); border:1px solid var(--border); border-radius:8px; padding:12px 14px; overflow-x:auto; font-size:13px; line-height:1.55; margin:0 0 16px; }
pre code{ background:none; border:none; padding:0; color:var(--ink); }

/* ---- shell ---- */
.topbar{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:30;
  display:flex; align-items:center; gap:16px; height:56px; padding:0 16px;
  background:var(--surface); border-bottom:1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:15px; white-space:nowrap; }
.brand .mark{ width:22px; height:22px; border-radius:6px; background:var(--accent); display:inline-flex; align-items:center; justify-content:center; color:var(--accent-ink); font-size:12px; font-weight:700; flex:none; }
.brand .tag{ font-size:11px; font-weight:600; color:var(--ink-faint); border:1px solid var(--border-strong); border-radius:4px; padding:1px 6px; letter-spacing:.04em; }
.searchwrap{ flex:1; max-width:420px; position:relative; }
#search{
  width:100%; height:34px; border-radius:7px; border:1px solid var(--border-strong); background:var(--surface-2);
  color:var(--ink); font-family:var(--font-body); font-size:13.5px; padding:0 12px 0 32px;
}
#search:focus{ outline:2px solid var(--accent-soft); outline-offset:1px; border-color:var(--accent); }
.searchwrap svg{ position:absolute; left:10px; top:9px; width:16px; height:16px; color:var(--ink-faint); pointer-events:none; }
.navtoggle{
  display:none; align-items:center; justify-content:center; width:34px; height:34px; border-radius:7px;
  border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); cursor:pointer; flex:none;
}
.ghlink{ margin-left:auto; font-size:13px; color:var(--ink-dim); white-space:nowrap; }

.shell{ display:flex; max-width:1240px; margin:0 auto; }
.sidebar{
  width:252px; flex:none; padding:20px 12px 60px; height:calc(100vh - 56px); position:sticky; top:56px;
  overflow-y:auto; border-right:1px solid var(--border);
}
.navgroup{ margin-bottom:18px; }
.navtitle{ font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); padding:0 10px 6px; }
.navlink{
  display:block; padding:6px 10px; border-radius:6px; font-size:13.5px; color:var(--ink-dim);
  margin-bottom:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.navlink:hover{ background:var(--surface-2); color:var(--ink); text-decoration:none; }
.navlink.active{ background:var(--accent-soft); color:var(--accent-strong); font-weight:600; }
.navlink.sub{ padding-left:20px; font-size:13px; }
.nav-empty{ padding:10px; font-size:13px; color:var(--ink-faint); }

.content{ flex:1; min-width:0; padding:40px 40px 100px; }
.page{ max-width:720px; }
.eyebrow{ font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-strong); margin-bottom:8px; }
.page h1{ font-size:30px; margin-bottom:10px; }
.lead{ font-size:16.5px; color:var(--ink-dim); max-width:62ch; margin-bottom:26px; }
.page h2{ font-size:19px; margin:34px 0 12px; padding-top:6px; border-top:1px solid var(--border); padding-top:22px; }
.page h2:first-of-type{ border-top:none; padding-top:0; margin-top:0; }
.page h3{ font-size:15.5px; margin:20px 0 8px; }

.steps{ list-style:none; padding:0; margin:0 0 20px; counter-reset:step; }
.steps li{ position:relative; padding:2px 0 18px 40px; margin:0; counter-increment:step; border-left:1px solid var(--border); margin-left:15px; }
.steps li:last-child{ border-left:1px solid transparent; padding-bottom:0; }
.steps li::before{
  content:counter(step); position:absolute; left:-15px; top:0; width:30px; height:30px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent-strong); font-family:var(--font-display); font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center; border:1px solid var(--border);
}
.steps .stitle{ font-weight:600; color:var(--ink); display:block; margin-bottom:3px; font-size:14.5px; }

.callout{ display:flex; gap:10px; padding:12px 14px; border-radius:8px; margin:0 0 18px; font-size:13.5px; border:1px solid var(--border); }
.callout .ico{ flex:none; width:18px; height:18px; margin-top:1px; }
.callout.note{ background:var(--accent-soft); border-color:transparent; }
.callout.note .ico{ color:var(--accent-strong); }
.callout.tip{ background:var(--good-soft); border-color:transparent; }
.callout.tip .ico{ color:var(--good); }
.callout.warn{ background:var(--warn-soft); border-color:transparent; }
.callout.warn .ico{ color:var(--warn); }
.callout p{ margin:0; max-width:60ch; }
.callout strong{ color:var(--ink); }

.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:0 0 20px; }
.card{ border:1px solid var(--border); border-radius:9px; padding:14px 16px; background:var(--surface); }
.card h4{ font-size:14px; margin-bottom:5px; }
.card p{ font-size:13px; color:var(--ink-dim); margin:0; }
.card a{ font-size:13px; }

.pill{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:20px; font-family:var(--font-mono); }
.pill.good{ background:var(--good-soft); color:var(--good); }
.pill.warn{ background:var(--warn-soft); color:var(--warn); }
.pill.bad{ background:var(--bad-soft); color:var(--bad); }
.pill.neutral{ background:var(--surface-3); color:var(--ink-dim); }

.flow{ display:flex; align-items:stretch; gap:6px; flex-wrap:wrap; margin:18px 0 24px; }
.flow .fbox{ flex:1; min-width:118px; border:1px solid var(--border); border-radius:8px; padding:10px 12px; background:var(--surface); font-size:12.5px; }
.flow .fbox.main{ border-color:var(--accent); background:var(--accent-soft); }
.flow .fbox b{ display:block; font-family:var(--font-display); font-size:13px; margin-bottom:2px; }
.flow .fbox span{ color:var(--ink-dim); }
.flow .arrow{ align-self:center; color:var(--ink-faint); font-size:16px; flex:none; }
@media (max-width:640px){ .flow .arrow{ transform:rotate(90deg); } .flow{ flex-direction:column; } }
/* A three-column table of filenames does not fit a phone. It scrolls inside
   its own box instead of pushing the whole page sideways. */
@media (max-width:640px){
  table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  th,td{ padding:8px 10px; }
}

.planes{ display:grid; grid-template-columns:1.4fr 1fr; gap:14px; margin:18px 0 24px; }
.plane{ border:1px solid var(--border); border-radius:10px; padding:14px; }
.plane.tinted{ background:var(--surface-2); }
.plane .ptitle{ font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px; }
.plane .svc{ display:flex; align-items:center; justify-content:center; text-align:center; border:1px solid var(--border-strong); border-radius:7px; padding:9px 6px; font-size:12.5px; font-weight:600; background:var(--surface); margin-bottom:7px; }
.plane .svc:last-child{ margin-bottom:0; }
.plane .svc.hl{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-strong); }

.prevnext{ display:flex; justify-content:space-between; gap:16px; margin-top:44px; padding-top:20px; border-top:1px solid var(--border); }
.prevnext a{ flex:1; border:1px solid var(--border); border-radius:8px; padding:12px 14px; font-size:13px; }
.prevnext a:hover{ border-color:var(--border-strong); text-decoration:none; background:var(--surface-2); }
.prevnext .lbl{ display:block; color:var(--ink-faint); font-size:11px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:3px; }
.prevnext .next{ text-align:right; }

.backdrop{ display:none; }

@media (max-width:900px){
  .cards{ grid-template-columns:1fr; }
  .planes{ grid-template-columns:1fr; }
  .navtoggle{ display:flex; }
  .searchwrap{ max-width:none; }
  .brand .tag{ display:none; }
  .sidebar{
    position:fixed; left:0; top:56px; bottom:0; width:78vw; max-width:300px; background:var(--surface);
    transform:translateX(-100%); transition:transform .18s ease; z-index:40; box-shadow:var(--shadow);
  }
  .sidebar.open{ transform:translateX(0); }
  .backdrop.open{ display:block; position:fixed; inset:56px 0 0 0; background:rgba(0,0,0,.35); z-index:35; }
  .content{ padding:28px 18px 80px; }
  .page h1{ font-size:25px; }
}

/* A deep-linked section (#page/section) lands below the sticky top bar, not under it. */
[id^="sec-"]{ scroll-margin-top:72px; }
.toc{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 22px; }
.toc a{ font-size:12.5px; border:1px solid var(--border); border-radius:20px; padding:3px 10px; background:var(--surface); }
.toc a:hover{ border-color:var(--accent); text-decoration:none; }
.fields{ margin:0 0 16px; }
.fields td:first-child{ white-space:nowrap; font-weight:600; }