/* Tokens, reset, layout, nav, buttons. Dark opening, then bands that alternate dark and cream. */
:root {
  --bg: #121316; --fg: #EDE9DD; --muted: #A19E93; --line: rgba(237,233,221,.16);
  --card: #1B1C21; --accent: #FFD43B; --accent-ink: #121316;
  --inv-bg: #EDE9DD; --inv-fg: #121316; --inv-muted: #5A574F; --inv-line: rgba(18,19,22,.18);
  --inv-card: #E1DCCD; --inv-accent: #2F6594; --inv-accent-ink: #FFFFFF;
  --pc-bg: #17181C; --pc-fg: #EDE9DD; --pc-muted: #A8A59A; --pc-line: rgba(237,233,221,.16);
  --pc-accent: #FFD43B; --pc-accent-ink: #121316;
  --tile: #F4F1E8;
  --font-display: 'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --font-body: 'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono: 'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --gutter: clamp(16px,5vw,72px); --wrap: 1240px; color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:#EDE9DD; --fg:#121316; --muted:#5A574F; --line:rgba(18,19,22,.18); --card:#E1DCCD; --accent:#2F6594; --accent-ink:#FFF;
    --inv-bg:#121316; --inv-fg:#EDE9DD; --inv-muted:#A19E93; --inv-line:rgba(237,233,221,.16); --inv-card:#1B1C21; --inv-accent:#FFD43B; --inv-accent-ink:#121316;
    --pc-bg:#1D1E24; color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg:#EDE9DD; --fg:#121316; --muted:#5A574F; --line:rgba(18,19,22,.18); --card:#E1DCCD; --accent:#2F6594; --accent-ink:#FFF;
  --inv-bg:#121316; --inv-fg:#EDE9DD; --inv-muted:#A19E93; --inv-line:rgba(237,233,221,.16); --inv-card:#1B1C21; --inv-accent:#FFD43B; --inv-accent-ink:#121316;
  --pc-bg:#1D1E24; color-scheme: light;
}
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-body); font-size:17px; line-height:1.6; overflow-x:hidden;
  padding-left:max(0px,env(safe-area-inset-left,0px)); padding-right:max(0px,env(safe-area-inset-right,0px)); transition: background .3s, color .3s; }
body::before { content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:30; background:var(--bg); }
a { color:inherit; text-decoration:none; }
a:focus-visible,button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
h1,h2,h3,p,ul,ol,dl,dd { margin:0; padding:0; } ul,ol { list-style:none; }
img { max-width:100%; display:block; }

.band { background:var(--bg); color:var(--fg); padding-block:clamp(56px,9vw,110px); transition: background .3s, color .3s; }
.band--inv { --bg:var(--inv-bg); --fg:var(--inv-fg); --muted:var(--inv-muted); --line:var(--inv-line); --card:var(--inv-card); --accent:var(--inv-accent); --accent-ink:var(--inv-accent-ink); }
.wrap { max-width:calc(var(--wrap) + 2*var(--gutter)); margin-inline:auto; padding-left:max(var(--gutter),env(safe-area-inset-left,0px)); padding-right:max(var(--gutter),env(safe-area-inset-right,0px)); }

.eyebrow { font-family:var(--font-mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.h2 { font-family:var(--font-display); font-weight:800; font-size:clamp(44px,7vw,92px); line-height:.95; letter-spacing:.005em; text-transform:uppercase; text-wrap:balance; }
.lede { font-size:clamp(18px,2vw,21px); max-width:62ch; }
.sec-head { display:grid; gap:14px; margin-bottom:clamp(32px,5vw,56px); }
.sec-head p { color:var(--muted); max-width:60ch; }

.nav { position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:var(--bg); border-bottom:1px solid var(--line); transition: background .3s; }
.nav__in { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; }
.nav__mark { font-family:var(--font-display); font-weight:800; font-size:24px; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.nav__links { display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; min-width:0; margin-left:auto; }
.nav__links::-webkit-scrollbar { display:none; }
.nav__links a { padding:8px 12px; border-radius:999px; font-size:15px; font-weight:500; white-space:nowrap; color:var(--muted); transition:color .2s,background .2s; }
.nav__links a:hover,.nav__links a.on { color:var(--fg); background:var(--line); }
.theme { flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; border:1.5px solid var(--line); background:transparent; color:var(--fg); cursor:pointer; transition:border-color .2s, transform .3s; }
.theme:hover { border-color:var(--fg); transform:rotate(18deg); }
.theme svg { width:18px; height:18px; }
.theme .sun { display:none; } :root[data-theme="dark"] .theme .moon { display:none; } :root[data-theme="dark"] .theme .sun { display:block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme .moon { display:none; } :root:not([data-theme]) .theme .sun { display:block; } }

.btn { display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:999px; font:inherit; font-weight:600; font-size:15px; border:1.5px solid transparent; cursor:pointer; transition:transform .2s,background .2s,color .2s,border-color .2s; }
.btn--solid { background:var(--accent); color:var(--accent-ink); } .btn--solid:hover { transform:translateY(-2px); }
.btn--line { border-color:var(--line); color:var(--fg); background:transparent; } .btn--line:hover { border-color:var(--fg); }
.btn span[aria-hidden] { display:inline-block; transition:transform .2s; } .btn:hover span[aria-hidden] { transform:translate(2px,-2px); }
.cta { display:flex; flex-wrap:wrap; gap:10px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
.chips li { font-family:var(--font-mono); font-size:13.5px; padding:5px 11px; border:1px solid var(--line); border-radius:999px; }
.more { margin-top:28px; color:var(--muted); } .more a { color:var(--fg); text-decoration:underline; text-underline-offset:3px; font-weight:600; }
.foot { padding-block:28px; font-size:14px; background:var(--bg); color:var(--muted); border-top:1px solid var(--line); }
.foot .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; }

/* logo tiles: a light tile keeps every brand mark readable on dark and cream bands */
.logo { flex:none; width:56px; height:56px; display:grid; place-items:center; border-radius:14px; background:var(--tile); box-shadow:0 1px 0 rgba(0,0,0,.08); }
.logo img { width:58%; height:58%; object-fit:contain; }
.logo--mono { background:transparent; border:1.5px dashed var(--line); color:var(--muted); font-family:var(--font-mono); font-size:11px; font-weight:500; text-align:center; line-height:1.1; padding:2px; }

@media (max-width:860px) { .nav__mark { display:none; } }
@media (max-width:480px) { body { font-size:16px; } }

mark.green-highlight {
    background-color: #d1fae5;
    color: #065f46;
    padding: 0.12em 0.3em;
    border-radius: 4px;
}