/*
 * Brand guidelines page (brand.html). Generated from the standalone guidelines file:
 * its sections keep their own tokens and rules, scoped to .sb-guide so they never touch the rest of the site.
 * The page has a light and a dark mode; dark also darkens the site's header, menu and footer on this page.
 */
.sb-guide {
  --bg:#FFFFFF; --surface:#F7F8FA; --panel:#F1F3F6; --ice:#EEF2F7;
  --line:#E6E8EC; --line-strong:#8FB8E6;
  --ink:#3A3F48; --navy:#16181D; --muted:#6B717C; --blue:#3D87D3; --blue-ink:#1F5FA8;
  --tile-dark:#0F1216;
  --f-display:"Inter","Helvetica Neue",Arial,sans-serif;
  --f-body:"Inter","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  font-family: var(--f-body); font-size: 16px; line-height: 1.6; color: var(--ink);
}
html[data-theme="dark"] .sb-guide {
  --bg:#0F1216; --surface:#161A20; --panel:#1B2028; --ice:#20262F;
  --line:#2A303A; --line-strong:#3E5878;
  --ink:#D7DEE8; --navy:#FFFFFF; --muted:#A9B3C1; --blue:#8FB8E6; --blue-ink:#8FB8E6;
  --tile-dark:#0F1216; color-scheme:dark
}
.sb-guide section { scroll-margin-top: 110px; }
.sb-guide section:first-child { padding-top: 0; }
.sb-guide section:last-of-type { border-bottom: 0; }

.sb-guide section {padding-block:44px 8px;border-bottom:1px solid var(--line)}
.sb-guide h2 {font-family:var(--f-display);font-weight:600;color:var(--navy);font-size:26px;margin:0 0 6px;display:flex;gap:14px;align-items:baseline;letter-spacing:-.015em}
.sb-guide h2 .n {color:var(--blue)}
.sb-guide .sub {font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-ink);margin:0 0 22px}
.sb-guide p {max-width:66ch;margin:0 0 14px}
.sb-guide h3 {font-family:var(--f-body);font-weight:600;color:var(--navy);font-size:17px;margin:0 0 4px}
.sb-guide .label {font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin:26px 0 10px}
.sb-guide .grid {display:grid;gap:16px}
.sb-guide .g2 {grid-template-columns:repeat(2,minmax(0,1fr))}
.sb-guide .g3 {grid-template-columns:repeat(3,minmax(0,1fr))}
.sb-guide .g4 {grid-template-columns:repeat(4,minmax(0,1fr))}
.sb-guide .card {background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:18px 20px;min-width:0}
.sb-guide .card p {font-size:15px;color:var(--muted);margin:0}
.sb-guide .panel {background:var(--panel);border:1.5px solid var(--line-strong);border-radius:10px;padding:22px 26px}
.sb-guide .panel p, .sb-guide .card p {max-width:none}
.sb-guide .rules {margin:0;padding:0;list-style:none;display:grid;gap:8px}
.sb-guide .rules li {display:flex;gap:12px;font-size:16px}
.sb-guide .rules li::before {content:"";flex:0 0 7px;height:7px;border-radius:50%;background:var(--blue);margin-top:10px}
.sb-guide .rules.no li::before {background:#B4475A}
.sb-guide .names {border:1px solid var(--line);border-radius:8px;overflow-x:auto}
.sb-guide .names table {width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.sb-guide .names th, .sb-guide .names td {text-align:left;padding:11px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.sb-guide .names th {font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);background:var(--surface)}
.sb-guide .names tr:last-child td {border-bottom:0}
.sb-guide .names td:first-child {font-weight:700;color:var(--navy);white-space:nowrap}
.sb-guide .wrong {color:#B4475A;text-decoration:line-through;text-decoration-thickness:1px}
.sb-guide .logo-tile {border-radius:10px;display:flex;align-items:center;justify-content:center;aspect-ratio:16/8;padding:28px;max-width:100%}
.sb-guide .logo-tile img {width:78%}
.sb-guide .logo-tile.light {background:#FFFFFF;border:1px solid var(--line)}
.sb-guide .logo-tile.dark {background:var(--tile-dark)}
.sb-guide .cap {font-size:13px;color:var(--muted);margin-top:8px}
.sb-guide .clear {position:relative;background:#FFFFFF;border:1px dashed var(--line-strong);border-radius:10px;padding:34px;display:flex;justify-content:center}
.sb-guide .clear img {width:60%;outline:1px dashed #8FB8E6;outline-offset:22px}
.sb-guide .sw {border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg);display:flex;flex-direction:column;min-width:0}
.sb-guide .sw .chip {height:78px}
.sb-guide .sw .meta {padding:10px 12px 12px;display:grid;gap:2px}
.sb-guide .sw .name {font-weight:700;color:var(--navy);font-size:15px}
.sb-guide .sw .role {font-size:13px;color:var(--muted)}
.sb-guide .hex {font-family:var(--f-mono);font-size:13px;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;text-align:left;justify-self:start}
.sb-guide .hex:hover {color:var(--blue)}
.sb-guide .hex[data-done]::after {content:"  copied";color:var(--blue);font-family:var(--f-body)}
.sb-guide .spec {border:1px solid var(--line);border-radius:8px;overflow-x:auto}
.sb-guide .spec table {width:100%;border-collapse:collapse;min-width:560px}
.sb-guide .spec td {padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:14px;color:var(--muted)}
.sb-guide .spec tr:last-child td {border-bottom:0}
.sb-guide .spec td:first-child {width:46%}
.sb-guide .t-title {font-family:var(--f-display);font-weight:600;font-size:24px;letter-spacing:.04em;text-transform:uppercase;color:var(--navy)}
.sb-guide .t-title b {color:var(--blue);font-weight:600;margin-right:10px}
.sb-guide .t-sub {font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-ink)}
.sb-guide .t-label {font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.sb-guide .t-card {font-weight:700;font-size:17px;color:var(--navy)}
.sb-guide .t-body {font-size:15px;color:var(--ink)}
.sb-guide .t-big {font-family:var(--f-display);font-weight:600;font-size:28px;color:var(--blue)}
.sb-guide .t-cap {font-size:13px;font-style:italic;color:var(--muted)}
.sb-guide .slide {aspect-ratio:16/9;max-width:100%;background:#FFFFFF;border:1px solid #E6E8EC;border-radius:8px;padding:4.2% 5.2%;color:#3A3F48;display:flex;flex-direction:column;gap:3%;container-type:inline-size}
.sb-guide .slide .st {font-family:var(--f-display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#16181D;font-size:4.2cqw;line-height:1.1}
.sb-guide .slide .st b {color:#3D87D3;margin-right:2cqw;font-weight:600}
.sb-guide .slide .ss {font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#1F5FA8;font-size:1.7cqw}
.sb-guide .slide .cards {display:grid;grid-template-columns:repeat(4,1fr);gap:2cqw;flex:1}
.sb-guide .slide .c {border:1px solid #E6E8EC;border-radius:1cqw;padding:2cqw}
.sb-guide .slide .c b {display:block;color:#16181D;font-size:1.9cqw}
.sb-guide .slide .c span {display:block;color:#6B717C;font-size:1.45cqw;line-height:1.35;margin-top:.8cqw}
.sb-guide .slide.dark {background:#0F1216;border-color:#0F1216;justify-content:center}
.sb-guide .slide.dark .st {color:#FFFFFF}
.sb-guide .slide.dark .ss {color:#8FC7FF;letter-spacing:0;text-transform:none;font-weight:400;font-size:2cqw}
.sb-guide .mock-row {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sb-guide .comp {display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.sb-guide .stat-row {display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.sb-guide .stat {background:var(--bg);border:1px solid var(--line-strong);border-radius:6px;text-align:center;padding:10px 4px}
.sb-guide .stat b {display:block;font-family:var(--f-display);font-weight:600;font-size:22px;color:var(--blue)}
.sb-guide .stat span {font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}
.sb-guide .circles {display:flex;gap:10px}
.sb-guide .circ {width:38px;height:38px;border-radius:50%;background:var(--ice);color:var(--blue);display:grid;place-items:center;font-weight:700}
.sb-guide .pill {display:inline-block;border:1px solid var(--line-strong);border-radius:6px;padding:4px 12px;font-size:13px;font-weight:700;color:var(--navy);background:var(--bg)}
.sb-guide .chip-m {display:inline-block;border:1px solid #B9D3E8;border-radius:999px;padding:4px 14px;font-size:13px;color:var(--navy);background:var(--surface)}
.sb-guide .people {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sb-guide .person img {width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;display:block}
.sb-guide .person b {display:block;color:var(--navy);margin-top:10px}
.sb-guide .person span {display:block;font-size:14px;color:var(--blue);font-weight:600}
.sb-guide .person small {display:block;font-size:13px;color:var(--muted)}
.sb-guide .platform {display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:center}
.sb-guide .platform img {width:100%;max-width:240px}
.sb-guide .layers {list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.sb-guide .layers li {display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.sb-guide .layers li b {color:var(--navy)}
.sb-guide .layers .k {color:var(--muted);font-variant-numeric:tabular-nums}
.sb-guide .layers small {color:var(--muted);display:block}
.sb-guide .contact {display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.sb-guide .addr {font-family:var(--f-mono);font-size:16px;color:var(--navy);user-select:all}
.sb-guide button.copy {font:inherit;font-size:14px;font-weight:600;color:var(--blue);background:var(--bg);border:1px solid var(--line-strong);border-radius:6px;padding:6px 14px;cursor:pointer}
.sb-guide button.copy:hover {background:var(--panel)}
@media (max-width:900px) {
.sb-guide .g4, .sb-guide .people {grid-template-columns:repeat(2,minmax(0,1fr))}
.sb-guide .g3, .sb-guide .comp {grid-template-columns:minmax(0,1fr)}
.sb-guide .mock-row, .sb-guide .g2 {grid-template-columns:minmax(0,1fr)}
.sb-guide .platform {grid-template-columns:minmax(0,1fr)}
}

/* captions are short notes in small type: the body-text measure would wrap them early */
.sb-guide p.cap { max-width: none; }

/* the illustration follows the theme */
.sb-guide .platform img.on-dark { display: none; }
html[data-theme="dark"] .sb-guide .platform img.on-light { display: none; }
html[data-theme="dark"] .sb-guide .platform img.on-dark { display: block; }

/* downloads */
.sb-guide .dl-all { display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 20px; padding: 10px 18px; border-radius: 8px;
  background: var(--navy); color: var(--bg); font-weight: 600; font-size: 15px; text-decoration: none; }
.sb-guide .dl-all:hover { background: var(--blue-ink); color: #FFFFFF; }
.sb-guide .dl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sb-guide .dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 10px 12px; align-items: center;
  padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); text-decoration: none; }
.sb-guide .dl:hover { border-color: var(--line-strong); }
.sb-guide .dl:hover i { color: var(--blue); }
.sb-guide .dl-prev { grid-column: 1 / -1; display: grid; place-items: center; height: 96px; padding: 14px; border-radius: 6px;
  background: #FFFFFF; border: 1px solid var(--line); }
.sb-guide .dl-prev.is-dark { background: #0F1216; border-color: #0F1216; }
.sb-guide .dl-prev img { display: block; width: auto; height: auto; max-width: 100%; max-height: 66px; }
.sb-guide .dl-prev.is-photo { padding: 0; overflow: hidden; }
.sb-guide .dl-prev.is-photo img { width: 100%; height: 96px; max-height: none; object-fit: cover; object-position: center 22%; }
.sb-guide .dl-meta { display: grid; gap: 2px; min-width: 0; }
.sb-guide .dl-meta b { font-size: 14px; font-weight: 600; color: var(--navy); }
.sb-guide .dl-meta small { font-size: 12px; color: var(--muted); }
.sb-guide .dl i { font-size: 18px; color: var(--muted); }
@media (max-width: 900px) { .sb-guide .dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sb-guide .dl-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the page around the guidelines ---------- */
.ax-brand-actions { display: flex; flex-wrap: wrap; gap: 10px; }
a.theme-btn { text-decoration: none; }
.theme-btn.is-primary { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.theme-btn.is-primary:hover { background: var(--brand-ink); border-color: var(--brand-ink); color: #FFFFFF; }
html[data-theme="dark"] .ax-brand .theme-btn.is-primary { color: #111419; }
.ax-brand-hero .ax-role-lede { margin-bottom: 24px; }
.theme-btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--wash); color: var(--mute); font: 500 14px var(--font); cursor: pointer; }
.theme-btn:hover { color: var(--ink); border-color: #C3C8D0; }
.theme-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* dark mode: the site's own dark.css does the frame; here only what is particular to this page */
html[data-theme="dark"] .ax-brand .theme-btn:hover { border-color: #3E5878; }
html[data-theme="dark"] .sb-guide .logo-tile.dark { border: 1px solid var(--line); }