@font-face { font-family:'Inter'; font-style:normal; font-display:swap; font-weight:100 900;
  src:url(../fonts/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-display:swap; font-weight:100 900;
  src:url(../fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
:root {
  --bg:#f5f6f8; --surface:#ffffff; --surface-2:#f1f2f5; --text:#16181d; --muted:#646b76;
  --border:#e6e8ec;
  --accent:#a8380a; --accent-2:#ff9b4d; --accent-weak:rgba(255,155,77,.16);
  --brand:#ff9b4d; --brand-hover:#ff8a2e; --on-brand:#111111;
  --ok:#15803d; --okbg:rgba(34,197,94,.12);
  --warn:#92400e; --warnbg:rgba(245,158,11,.14);
  --info:#1d4ed8; --infobg:rgba(37,99,235,.10);
  --danger:#b91c1c; --dangerbg:rgba(239,68,68,.12);
  --r:14px; --r-lg:18px;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 14px 30px -18px rgba(16,24,40,.22);
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
}
html[data-theme="dark"] {
  --bg:#0d0f14; --surface:#161922; --surface-2:#1e222c; --text:#e7e9ef; --muted:#98a0b0;
  --border:rgba(255,255,255,.09);
  --accent:#ffb27a; --accent-2:#ff9b4d; --accent-weak:rgba(255,155,77,.16);
  --brand:#ff9b4d; --brand-hover:#ffad6b; --on-brand:#111111;
  --ok:#4ade80; --okbg:rgba(34,197,94,.16);
  --warn:#fbbf24; --warnbg:rgba(245,158,11,.16);
  --info:#93c5fd; --infobg:rgba(59,130,246,.16);
  --danger:#f87171; --dangerbg:rgba(248,113,113,.16);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 36px -20px rgba(0,0,0,.75);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
}
* { box-sizing:border-box; }
body { margin:0; font-family:'Inter',-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--text); min-height:100vh; -webkit-font-smoothing:antialiased;
  transition:background-color .2s ease, color .2s ease; }
h1 { font-size:25px; font-weight:700; letter-spacing:-.02em; margin:0 0 18px; }
h2 { font-size:18px; font-weight:600; letter-spacing:-.01em; margin:0 0 12px; }
a { color:inherit; }

.pill { font-size:12px; padding:4px 12px; border-radius:999px; font-weight:600; }
.pill.paid { background:var(--okbg); color:var(--ok); }

.btnlink { text-decoration:none; display:inline-flex; align-items:center; gap:6px; border-radius:11px;
  font-weight:600; font-size:14px; padding:10px 16px; }
.primarylink { background:var(--brand); color:var(--on-brand); box-shadow:var(--shadow-sm); }
.primarylink:hover { background:var(--brand-hover); }
.ghostlink { background:var(--surface); color:var(--text); border:1px solid var(--border); }
.btnlink.lg { padding:13px 22px; font-size:15px; }

.stickytop { position:sticky; top:0; z-index:20; }
.nav { position:relative; display:flex; align-items:center; gap:18px; padding:14px 28px;
  background:var(--surface); border-bottom:1px solid var(--border); }
.nav .brand { display:flex; align-items:center; gap:9px; font-weight:700; font-size:16px; text-decoration:none; color:var(--text); }
.nav .brand .mk { width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
/* Brand logo lockup (light/dark swap keyed on the theme attribute). */
.brand .logo { height:38px; width:auto; display:block; }
.brand .logo-dark { display:none; }
html[data-theme="dark"] .brand .logo-light { display:none; }
html[data-theme="dark"] .brand .logo-dark { display:block; }
.nav .links { display:flex; gap:4px; margin-left:6px; }
.nav .links a { text-decoration:none; color:var(--muted); font-size:14px; font-weight:500; padding:8px 12px; border-radius:8px; }
.nav .links a:hover { color:var(--text); background:var(--surface-2); }
/* Dropdown nav (pure CSS: opens on hover or keyboard focus) */
.nav .navdrop { position:relative; }
.nav .navdrop-btn { background:none; border:none; cursor:pointer; color:var(--muted); font-size:14px; font-weight:500;
  padding:8px 12px; border-radius:8px; font-family:inherit; display:inline-flex; align-items:center; gap:5px; }
.nav .navdrop-btn:hover { color:var(--text); background:var(--surface-2); }
.nav .navdrop .caret { font-size:10px; }
.nav .navdrop-menu { position:absolute; top:calc(100% + 6px); left:0; min-width:200px; background:var(--surface);
  border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:6px; display:none; flex-direction:column; z-index:30; }
/* Invisible bridge across the 6px gap so hover stays continuous from button to menu. */
.nav .navdrop-menu::before { content:""; position:absolute; top:-6px; left:0; right:0; height:6px; }
.nav .navdrop:hover .navdrop-menu, .nav .navdrop:focus-within .navdrop-menu, .nav .navdrop.open .navdrop-menu { display:flex; }
.nav .navdrop.closed .navdrop-menu { display:none; }
.nav .navdrop-menu a { text-decoration:none; color:var(--text); font-size:14px; padding:8px 10px; border-radius:8px; white-space:nowrap; }
.nav .navdrop-menu a:hover { background:var(--surface-2); color:var(--accent); }
.nav .navcta { margin-left:auto; display:flex; align-items:center; gap:10px; }

.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer;
  transition:background .15s, border-color .15s; }
.theme-toggle:hover { background:var(--surface-2); }

.wrap { max-width:1040px; margin:0 auto; padding:0 28px; }
.hero { display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; padding:60px 0 52px; }
.eyebrow { display:inline-block; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-weak); padding:5px 11px; border-radius:999px; }
.display { font-size:44px; line-height:1.08; letter-spacing:-.03em; font-weight:700; margin:16px 0 14px; }
.lead { font-size:17px; color:var(--muted); line-height:1.6; margin:0 0 22px; max-width:520px; }
.herobtns { display:flex; gap:12px; flex-wrap:wrap; }
.microcopy { font-size:12.5px; color:var(--muted); margin-top:16px; }
.artcard { background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:16px 18px; }
.artcard + .artcard { margin-top:-16px; margin-left:36px; }
.arow { display:flex; justify-content:space-between; font-size:13px; padding:6px 0; }
.arow .l { color:var(--muted); }

.section { padding:54px 0; border-top:1px solid var(--border); }
.center { text-align:center; }
.section h2 { font-size:28px; letter-spacing:-.02em; margin:0; }
.sub { text-align:center; color:var(--muted); max-width:560px; margin:8px auto 34px; line-height:1.6; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.step { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px; box-shadow:var(--shadow); }
.step .n { width:30px; height:30px; border-radius:9px; background:var(--accent-weak); color:var(--accent); font-weight:700;
  display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.step h3 { margin:0 0 6px; font-size:16px; } .step p { margin:0; color:var(--muted); font-size:14px; line-height:1.55; }
.featgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feat { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px; }
.feat .ic { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#fff; margin-bottom:10px; }
.feat h3 { font-size:15px; margin:0 0 6px; } .feat p { font-size:13.5px; color:var(--muted); margin:0; line-height:1.55; }
.pricegrid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1000px; margin:0 auto; align-items:start; }
.pricegrid.two { grid-template-columns:repeat(2,1fr); max-width:700px; }
.req { color:var(--danger); font-weight:700; }
.hint-inline { color:var(--muted); font-weight:400; font-size:12px; }
.price { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:26px; box-shadow:var(--shadow); }
.price.on { border:2px solid var(--accent); }
.price .amt { font-size:34px; font-weight:700; letter-spacing:-.02em; } .price .amt small { font-size:14px; color:var(--muted); font-weight:500; }
.price ul { list-style:none; padding:0; margin:14px 0 18px; } .price li { font-size:14px; color:var(--muted); padding:5px 0; }
.price .pricenote { font-size:11px; color:var(--muted); margin:10px 0 0; line-height:1.5; }
.footer { text-align:center; color:var(--muted); font-size:13px; padding:34px 28px; border-top:1px solid var(--border); }
.footer .footcopy { margin-bottom:10px; }
.footer .footlinks { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.footer .footlinks a { color:var(--muted); text-decoration:none; font-weight:500; }
.footer .footlinks a:hover { color:var(--text); text-decoration:underline; }
/* Legal pages (privacy / terms / license agreement) */
.legal { max-width:820px; padding-top:36px; padding-bottom:48px; }
.legal h2 { font-size:20px; margin:28px 0 8px; }
.legal p, .legal li { color:var(--text); line-height:1.6; }
.legal ul { padding-left:20px; }
.legal .legal-updated { color:var(--muted); font-style:italic; margin-top:-4px; }
.legal .legal-indent { padding-left:24px; }
.legal .legal-draft { background:var(--warnbg,#fff7e6); color:var(--warn,#8a5a00); border:1px solid var(--warnborder,#f0d089);
  border-radius:10px; padding:12px 14px; font-size:13px; margin-bottom:20px; }

@media (max-width:820px) {
  .hero { grid-template-columns:1fr; gap:28px; padding:36px 0; } .display { font-size:33px; }
  .steps, .featgrid, .pricegrid, .pricegrid.two { grid-template-columns:1fr; } .nav .links { display:none; } .artcard + .artcard { margin-left:0; }
}

/* Forms */
.field { margin-bottom:16px; }
.field label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.field input { width:100%; padding:11px 13px; border-radius:11px; border:1px solid var(--border); background:var(--surface-2);
  color:var(--text); font-size:14px; font-family:inherit; transition:border-color .15s, box-shadow .15s; }
.field input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-weak); }
.field .hint { font-size:12px; color:var(--muted); margin-top:5px; }
.form-error { background:var(--dangerbg); color:var(--danger); border-radius:11px; padding:11px 13px; font-size:13.5px;
  margin-bottom:18px; }
.form-error ul { margin:6px 0 0; padding-left:18px; } .form-error li { margin:2px 0; }
.field .val-msg { color:var(--danger); font-size:12.5px; margin-top:5px; display:block; }
.checkrow { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); margin-bottom:16px; }
.checkrow input { width:auto; }

/* Documentation page */
.dochead { padding:38px 28px 6px; }
.doclayout { display:grid; grid-template-columns:215px 1fr; gap:40px; align-items:start; padding-bottom:64px; }
.docnav { position:sticky; top:84px; display:flex; flex-direction:column; gap:1px; }
.docnav .gp { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  margin:16px 0 4px; padding:0 10px; }
.docnav .gp:first-child { margin-top:0; }
.docnav a { text-decoration:none; color:var(--muted); font-size:13.5px; padding:6px 10px; border-radius:8px; line-height:1.35; }
.docnav a:hover { color:var(--text); background:var(--surface-2); }
.doc { min-width:0; }
.doc-section { scroll-margin-top:84px; }
.doc h2 { font-size:24px; letter-spacing:-.02em; margin:34px 0 10px; padding-top:18px; border-top:1px solid var(--border); }
.doc-section:first-child h2, #overview h2 { border-top:none; padding-top:0; margin-top:6px; }
.doc h3 { font-size:17px; margin:24px 0 8px; }
.doc p { color:var(--muted); line-height:1.65; margin:0 0 12px; }
.doc .note { background:var(--infobg); color:var(--info); border-radius:11px; padding:12px 15px; font-size:14px; }
.doclist { margin:0 0 14px; padding-left:20px; color:var(--muted); line-height:1.65; }
.doclist li { margin:6px 0; }
.doclist strong, .doc p strong { color:var(--text); }
.doc code { background:var(--surface-2); border:1px solid var(--border); border-radius:6px; padding:1px 6px;
  font-size:13px; color:var(--text); }
.shot { display:block; width:100%; height:auto; border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow); margin:16px 0 8px; }
.faq { border:1px solid var(--border); border-radius:12px; background:var(--surface); margin-bottom:10px; overflow:hidden; }
.faq summary { cursor:pointer; padding:14px 16px; font-weight:600; font-size:14.5px; list-style:none; display:flex;
  align-items:center; justify-content:space-between; gap:12px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--muted); font-weight:700; font-size:18px; }
.faq[open] summary::after { content:"\2013"; }
.faq summary:hover { background:var(--surface-2); }
.faq p { padding:0 16px 14px; margin:0; font-size:14px; }
.doc-cta { text-align:center; margin-top:42px; padding-top:28px; border-top:1px solid var(--border); }
.doc-cta p { font-size:16px; font-weight:600; color:var(--text); margin-bottom:14px; }
@media (max-width:820px) {
  .doclayout { grid-template-columns:1fr; gap:8px; }
  .docnav { position:static; flex-direction:row; flex-wrap:wrap; gap:4px; margin-bottom:8px;
    border-bottom:1px solid var(--border); padding-bottom:14px; }
  .docnav .gp { width:100%; margin:8px 0 0; }
}

/* Studer Works additions */
.field select, .field textarea { width:100%; padding:11px 13px; border-radius:11px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); font-size:14px; font-family:inherit; transition:border-color .15s, box-shadow .15s; }
.field select:focus, .field textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-weak); }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:26px; }
.form-ok { background:var(--okbg); color:var(--ok); border-radius:12px; padding:16px 18px; font-size:15px; line-height:1.55; }
button.btnlink { border:none; cursor:pointer; font-family:inherit; }
button.btnlink:disabled { opacity:.55; cursor:not-allowed; }
.captcha { margin:4px 0 16px; min-height:78px; }
.heroart { background:linear-gradient(160deg,var(--accent-weak),transparent 70%), var(--surface); border:1px solid var(--border);
  border-radius:20px; box-shadow:var(--shadow); padding:22px; }
.heroart .arow .r { font-weight:600; }
.heroart .tag { display:inline-block; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px;
  background:var(--accent-weak); color:var(--accent); margin:2px 4px 2px 0; }
.prodgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.prodcard { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:18px;
  padding:24px; box-shadow:var(--shadow); text-decoration:none; color:var(--text); transition:transform .08s ease, border-color .08s ease; }
a.prodcard:hover { transform:translateY(-2px); border-color:var(--accent); }
.prodcard h3 { margin:12px 0 6px; font-size:19px; } .prodcard p { color:var(--muted); font-size:14px; line-height:1.55; margin:0 0 14px; flex:1; }
.prodcard .go { color:var(--accent); font-weight:600; font-size:14px; }
.prodcard.soon { border-style:dashed; box-shadow:none; }
.price h3 { margin:0 0 4px; font-size:18px; } .price .blurb { color:var(--muted); font-size:14px; margin:0 0 12px; }
.price li::before { content:"\2713"; color:var(--accent); font-weight:700; margin-right:8px; }
.price .btnlink { width:100%; justify-content:center; }
.price .soonlink { background:var(--surface-2); color:var(--muted); border:1px dashed var(--border); cursor:default; }
.ic.c1, .ic.c3, .ic.c5 { background:#111111; color:var(--brand); }
.ic.c2, .ic.c4, .ic.c6 { background:var(--brand); color:#111111; }
html[data-theme="dark"] .ic.c1, html[data-theme="dark"] .ic.c3, html[data-theme="dark"] .ic.c5 { background:#2a2d36; }
.cta-band { margin:10px 0 56px; padding:34px; border-radius:20px; text-align:center;
  background:#111111; color:#fff; border:1px solid var(--border); }
.cta-band h2 { font-size:26px; margin:0 0 8px; color:#fff; } .cta-band p { margin:0 0 18px; opacity:.85; }
.cta-band .btnlink { background:var(--brand); color:var(--on-brand); }
@media (max-width:820px) { .prodgrid, .grid2 { grid-template-columns:1fr; } .cta-band { padding:26px 20px; } }
.prodcard .prodic { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:700; }
.prodcard .prodmeta { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 14px; }
.pill.plat { background:var(--surface-2); color:var(--muted); border:1px solid var(--border); font-weight:600; font-size:11.5px; padding:3px 10px; }
.prodcard .pricefrom { font-size:13px; color:var(--text); font-weight:600; margin-left:4px; }
.prodcard h3 .pill { vertical-align:middle; margin-left:6px; }
.legal h3 { font-size:16px; margin:20px 0 6px; }
.price .packs { display:flex; flex-direction:column; gap:8px; }
.price .pack { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px; padding:8px 10px;
  border:1px solid var(--border); border-radius:11px; background:var(--surface-2); }
.price .packlabel { font-weight:600; font-size:14px; } .price .packprice { font-size:14px; color:var(--muted); }
.price .pack .btnlink { width:auto; padding:7px 14px; font-size:13px; }
.heroshot { display:block; border-radius:16px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); }
.heroshot img, .shotfig img { display:block; width:100%; height:auto; }
.shotgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.shotfig { margin:0; background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
.shotfig figcaption { padding:12px 14px; font-size:13.5px; color:var(--muted); line-height:1.5; }
.shotfig figcaption strong { color:var(--text); }
@media (max-width:820px) { .shotgrid { grid-template-columns:1fr; } }
.prodcard .prodimg { display:block; width:calc(100% + 48px); height:auto; margin:-24px -24px 16px; border-bottom:1px solid var(--border); }
.carousel { position:relative; max-width:940px; margin:0 auto; }
.cartrack { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; border-radius:16px;
  border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow); scrollbar-width:none; }
.cartrack::-webkit-scrollbar { display:none; }
.cartrack:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.carslide { flex:0 0 100%; margin:0; scroll-snap-align:center; }
.carslide img { display:block; width:100%; height:auto; border-bottom:1px solid var(--border); }
.carslide figcaption { padding:14px 18px; font-size:14px; color:var(--muted); line-height:1.5; }
.carslide figcaption strong { color:var(--text); }
.carbtn { position:absolute; top:42%; transform:translateY(-50%); z-index:2; width:44px; height:44px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:26px; line-height:1; cursor:pointer;
  box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; }
.carbtn:hover { background:var(--brand); color:var(--on-brand); border-color:var(--brand); }
.carbtn:disabled { opacity:.35; cursor:default; background:var(--surface); color:var(--text); }
.carprev { left:-22px; } .carnext { right:-22px; }
.cardots { display:flex; justify-content:center; gap:8px; margin-top:14px; }
.cardot { width:24px; height:24px; border:none; padding:7px; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.cardot::before { content:""; display:block; width:10px; height:10px; border-radius:999px; background:var(--muted); }
.cardot.on::before { background:var(--brand); width:24px; }
.cardot.on { width:38px; }
@media (max-width:820px) { .carprev { left:6px; } .carnext { right:6px; } .carbtn { width:38px; height:38px; font-size:22px; } }
.launch { display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center; text-align:center;
  max-width:760px; margin:0 auto 18px; padding:10px 16px; border-radius:12px; font-size:14.5px;
  background:color-mix(in srgb, var(--brand) 16%, var(--surface)); border:1px solid color-mix(in srgb, var(--brand) 55%, transparent); }
.launch .launchtag { background:var(--brand); color:var(--on-brand); font-weight:700; font-size:12px; padding:3px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em; }
.launch code { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:1px 7px; font-weight:700; }
/* Documentation guides */
.docnav a.here { color:var(--text); font-weight:700; background:var(--surface-2); }
.docnav .docsub { display:flex; flex-direction:column; margin:2px 0 8px 10px; border-left:2px solid var(--border); }
.docnav .docsub a { font-size:12.8px; padding:4px 10px; }
.docshot { margin:14px 0 20px; }
.docshot img { display:block; max-width:100%; height:auto; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); }
.docshot.narrow img { max-width:560px; }
.docshot figcaption { font-size:13px; color:var(--muted); margin-top:8px; line-height:1.5; }
.doc ol.docsteps { counter-reset:step; list-style:none; padding:0; margin:0 0 16px; }
.doc ol.docsteps > li { counter-increment:step; position:relative; padding:2px 0 14px 42px; color:var(--muted); line-height:1.65; }
.doc ol.docsteps > li::before { content:counter(step); position:absolute; left:0; top:0; width:28px; height:28px; border-radius:999px;
  background:var(--brand); color:var(--on-brand); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; }
.doc ol.docsteps > li strong { color:var(--text); }
.doc pre.cmd { background:#14161c; color:#e7e9ef; border:1px solid var(--border); border-radius:10px; padding:12px 14px; overflow-x:auto;
  font-size:13px; line-height:1.55; margin:8px 0 14px; white-space:pre; }
.doc pre.cmd .c { color:#8b93a3; }
.doc table.doctable { width:100%; border-collapse:collapse; margin:8px 0 16px; font-size:14px; }
.doc table.doctable th, .doc table.doctable td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:top; }
.doc table.doctable th { color:var(--text); font-weight:700; background:var(--surface-2); }
.doc table.doctable td { color:var(--muted); }
.doc .tip { background:var(--okbg); color:var(--ok); border-radius:11px; padding:12px 15px; font-size:14px; }
.doc .warn { background:var(--warnbg); color:var(--warn); border-radius:11px; padding:12px 15px; font-size:14px; }
.guidegrid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:10px 0 20px; }
.guidecard { display:block; text-decoration:none; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 18px; }
.guidecard:hover { border-color:var(--accent); }
.guidecard b { display:block; font-size:15.5px; margin-bottom:4px; } .guidecard span { color:var(--muted); font-size:13.5px; line-height:1.5; }
@media (max-width:820px) { .guidegrid { grid-template-columns:1fr; } .docshot.narrow img { max-width:100%; } }

/* Accessibility */
.doc :not(pre) > code { overflow-wrap:anywhere; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skiplink { position:absolute; left:12px; top:-60px; z-index:100; background:var(--surface); color:var(--text); padding:10px 14px;
  border-radius:10px; border:2px solid var(--accent); font-weight:600; text-decoration:none; }
.skiplink:focus { top:12px; }
main:focus { outline:none; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.doc pre:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* Cookies and terms notice */
.sitenotice { position:fixed; left:16px; right:16px; bottom:16px; z-index:50; max-width:760px; margin:0 auto; display:flex;
  gap:16px; align-items:center; background:var(--surface); color:var(--text); border:1px solid var(--border);
  border-radius:var(--r); box-shadow:var(--shadow); padding:14px 16px; }
.sitenotice[hidden] { display:none; }
.sitenotice p { margin:0; font-size:14px; line-height:1.5; flex:1; }
.sitenotice a { color:var(--accent); }
.sitenotice .btnlink { flex:none; }
@media (max-width:560px) { .sitenotice { flex-direction:column; align-items:stretch; } }

/* Long addresses and file names in doc tables wrap on narrow phones. */
.doctable code { overflow-wrap:anywhere; }

/* Development-site banner (every environment except Production) */
.devbar { background:#7c2d12; color:#fff7ed; text-align:center; font-size:13.5px; line-height:1.45; padding:8px 16px; }
.devbar strong { color:#fff; }
body:has(.devbar) .docnav { top:124px; }
.devbar-short { display:none; }
@media (max-width:700px) {
  .devbar { font-size:12.5px; padding:6px 12px; }
  .devbar-long { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .devbar-short { display:inline; }
}

/* Product-tour video */
.tour { max-width:940px; margin:0 auto; }
.tour video { width:100%; aspect-ratio:16/9; border-radius:var(--r-lg); background:#0d0f14; box-shadow:var(--shadow); display:block; }
.tour details { margin-top:12px; color:var(--muted); font-size:14px; }
.tour summary { cursor:pointer; font-weight:600; color:var(--text); }
.tour ol { line-height:1.55; padding-left:22px; }