/* Bothrops portal. Clean (white and soft grays, hairlines, small type) with a little character: a tight display face
   for headlines, mono labels, viper green and sunny accents, the flow drawing on the startup screen.
   Fonts are served by the portal itself (SIL Open Font License, see /assets/fonts), so it looks the same offline
   and air-gapped. */
@font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --bg: #ffffff; --bg-2: #f7f7f5; --hover: #efefec; --active: #e8e8e5;
  --ink: #18181b; --ink-2: #52525b; --ink-3: #8b8b93;
  --line: #e6e6e2; --line-2: #d6d6d1;
  --green: #1fc46b; --green-ink: #12793f; --green-soft: #e3f7eb;
  --sun: #ffcb2e; --amber-soft: #fff4cc; --sky: #3b9bff; --sky-soft: #e3f0ff; --coral: #ff6b4a; --coral-soft: #ffe8e1;
  --danger: #c8321a; --danger-soft: #fdecea;
  --display: "Inter Tight", "Inter", "Segoe UI", system-ui, sans-serif;
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --r: 6px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--ink); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
h1, h2, h3 { margin: 0; font-family: var(--display); line-height: 1.2; letter-spacing: -.015em; font-weight: 650; }
::selection { background: var(--sun); }
[hidden] { display: none !important; }
.boot { min-height: 100vh; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand img { width: 32px; height: 32px; flex: none; }
.hero > .brand img { width: 40px; height: 40px; }
.eyebrow { margin: 0; display: flex; align-items: center; gap: 8px; font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--green); flex: none; }

/* Controls */
button, .btn { font: 500 13.5px/1 var(--sans); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 36px; padding: 0 14px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--bg);
  color: var(--ink); cursor: pointer; transition: background .12s, border-color .12s, color .12s; text-decoration: none; white-space: nowrap; }
button:hover, .btn:hover { background: var(--bg-2); text-decoration: none; }
button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, textarea:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
button:disabled { opacity: .45; cursor: default; }
.primary { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
.primary:not(.small)::after { content: "→"; font-family: var(--mono); font-weight: 500; transition: transform .15s; }
.primary:hover { background: var(--green); border-color: var(--green); color: #0b1a10; }
.primary:hover::after { transform: translateX(3px); }
.primary:disabled:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.danger { color: var(--danger); }
.danger:hover { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 40%, var(--line-2)); }
.danger.solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.danger.solid::after { content: none; }
.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.small { min-height: 30px; padding: 0 10px; font-size: 13px; }
.wide { width: 100%; }

.field { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
input, select, textarea { font: 400 14px/1.3 var(--sans); width: 100%; min-height: 38px; padding: 8px 11px; border-radius: var(--r);
  border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); transition: border-color .12s, box-shadow .12s; }
input:hover, select:hover { border-color: #bdbdb8; }
input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); outline: none; }
input::placeholder { color: var(--ink-3); }
input[readonly] { background: var(--bg-2); color: var(--ink-2); }
select { width: auto; min-height: 32px; padding: 4px 28px 4px 9px; font-size: 13.5px; }
.field select { min-height: 38px; }
.hint { font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
.labelrow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.labelrow a { font-weight: 400; color: var(--ink-2); }
.form { display: grid; gap: 14px; }
.row { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.row > .grow { flex: 1 1 220px; }
.alert { padding: 9px 12px; font-size: 13.5px; border-radius: var(--r); border: 1px solid; border-left-width: 3px; }
.alert.error { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 25%, transparent); border-left-color: var(--danger); }
.alert.ok { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 30%, transparent); border-left-color: var(--green); }
.alert:empty { display: none; }
.section .alert, .linkbox { margin-top: 12px; }

/* Startup screen: the statement and the flow drawing on a gridded gray side, the card on white */
.start { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(440px, .85fr); }
.hero { background-color: var(--bg-2); border-right: 1px solid var(--line); padding: 28px clamp(28px, 5vw, 72px); display: flex; flex-direction: column; gap: 36px; min-width: 0;
  background-image: linear-gradient(rgba(24, 24, 27, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(24, 24, 27, .04) 1px, transparent 1px);
  background-size: 40px 40px; background-position: -1px -1px; }
.hero-copy { margin-top: auto; max-width: 36rem; }
.hero h1 { font-size: clamp(36px, 3.8vw, 54px); font-weight: 700; letter-spacing: -.04em; line-height: 1.02; margin-top: 16px; text-wrap: balance; }
.hero h1 .mark { background: linear-gradient(transparent 60%, var(--green) 60%, var(--green) 92%, transparent 92%); padding: 0 .04em; }
.hero .lead { margin: 16px 0 0; font-size: 15.5px; color: var(--ink-2); max-width: 32rem; }
.points { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 46rem; }
.points li { display: grid; gap: 4px; align-content: start; padding-top: 10px; border-top: 2px solid var(--green); }
.points li:nth-child(2) { border-color: var(--sun); }
.points li:nth-child(3) { border-color: var(--sky); }
.points b { font: 600 14.5px/1.3 var(--display); }
.points span { color: var(--ink-3); font-size: 13px; }
.flowart { width: 100%; max-width: 640px; height: auto; color: var(--ink); margin-bottom: auto; }
.flowart .nd { fill: var(--bg); stroke: var(--line-2); stroke-width: 1.2; }
.flowart .nd.hot { stroke: var(--ink); }
.flowart .wire { fill: none; stroke: var(--ink-3); stroke-width: 1.2; }
.flowart .flow { fill: none; stroke: var(--green); stroke-width: 2.4; stroke-dasharray: 6 10; animation: flow 1.6s linear infinite; }
.flowart .tick { stroke: var(--ink-3); stroke-width: 1; opacity: .5; }
.flowart .lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; fill: currentColor; }
.flowart .lbl.dim { fill: var(--ink-3); }
.flowart .ttl { font-family: var(--display); font-size: 15px; font-weight: 600; fill: currentColor; }
.flowart .code { font-family: var(--mono); font-size: 11px; fill: var(--ink-2); }
.flowart .port { fill: var(--bg); stroke: var(--ink-3); stroke-width: 1.2; }
.flowart .mark-ink { fill: currentColor; }
@keyframes flow { to { stroke-dashoffset: -32; } }
@media (prefers-reduced-motion: reduce) { .flowart .flow { animation: none; } }
.start-foot { margin: 0; font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

.panel { display: flex; align-items: center; justify-content: center; padding: 48px 32px; min-width: 0; }
.card { width: 100%; max-width: 400px; padding: 28px; background: var(--bg); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 5px 5px 0 var(--green); }
.card h2 { font-size: 24px; letter-spacing: -.025em; }
.card .sub { margin: 6px 0 22px; color: var(--ink-3); }
.tabs { display: flex; width: fit-content; gap: 2px; padding: 3px; margin-bottom: 24px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; }
.tabs a { padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--ink-3); text-decoration: none; border-radius: 5px; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); background: var(--bg); box-shadow: 0 0 0 1px var(--line); }
.idp { display: grid; gap: 8px; }
.idp .btn { min-height: 38px; }
.idp .btn:hover { border-color: var(--ink-3); background: var(--bg); }
.idp svg { width: 16px; height: 16px; flex: none; }
.or { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; margin: 18px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.fine { margin: 20px 0 0; font-size: 13px; color: var(--ink-3); text-align: center; }
.fine a { color: var(--ink); }

@media (max-width: 1180px) and (min-width: 901px) {
  .points { grid-template-columns: 1fr; gap: 12px; }
  .points li { border-top: 0; border-left: 2px solid var(--green); padding: 0 0 0 12px; }
  .points li:nth-child(2) { border-color: var(--sun); }
  .points li:nth-child(3) { border-color: var(--sky); }
  .hero-copy { margin-top: 0; }
}
@media (max-width: 900px) {
  .start { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .hero { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px 16px 22px; gap: 18px; background-size: 32px 32px; }
  .hero-copy { margin: 0; }
  .hero h1 { font-size: clamp(28px, 8vw, 40px); margin-top: 10px; }
  .hero .lead, .points, .flowart, .start-foot { display: none; }
  .panel { padding: 24px 16px 40px; align-items: flex-start; }
  .card { max-width: 440px; padding: 22px 18px; box-shadow: 4px 4px 0 var(--green); }
}

/* Signed-in shell: a gray sidebar (wordmark, organisation, sections, you at the bottom) and the page */
.shell { min-height: 100vh; display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; padding: 18px 8px 8px; background: var(--bg-2); border-right: 1px solid var(--line); }
.side > .brand { padding: 2px 10px 14px; }
.orgpick { margin: 0 2px 10px; width: calc(100% - 4px); background: var(--bg); font-weight: 500; }
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav a { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r); color: var(--ink-2); text-decoration: none; }
.nav a svg { width: 16px; height: 16px; flex: none; color: var(--ink-3); }
.nav a:hover { background: var(--hover); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--bg); color: var(--ink); font-weight: 500; box-shadow: 0 0 0 1px var(--line); }
.nav a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 2px 2px 0; background: var(--green); }
.nav a[aria-current="page"] svg { color: var(--green-ink); }
.nav .label { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 16px 10px 8px; }
.nav .label:first-child { padding-top: 4px; }
.nav span.you { display: contents; }

.usermenu { position: relative; margin-top: auto; }
.usermenu > button { width: 100%; justify-content: flex-start; gap: 10px; padding: 8px; min-height: 0; border-color: transparent; background: transparent; text-align: left; }
.usermenu > button:hover { background: var(--hover); }
.usermenu .name { display: grid; min-width: 0; flex: 1; }
.usermenu .name b, .usermenu .name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu .name b { font-weight: 500; font-size: 13.5px; }
.usermenu .name small { color: var(--ink-3); font-size: 12px; font-weight: 400; }
.usermenu .chev { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--sun); color: var(--ink); font: 500 12px/1 var(--mono);
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
.menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); background: var(--bg); border: 1px solid var(--line-2); border-radius: 8px;
  box-shadow: 4px 4px 0 var(--green); padding: 4px; display: grid; z-index: 10; }
.menu .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-size: 13.5px; }
.menu .who b { font-weight: 500; }
.menu .who small { display: block; color: var(--ink-3); font: 400 11.5px/1.4 var(--mono); }
.menu a, .menu button { justify-content: flex-start; border: 0; border-radius: 4px; background: transparent; min-height: 32px; padding: 0 10px; color: var(--ink); font: 400 13.5px/1 var(--sans); display: flex; align-items: center; text-decoration: none; }
.menu a:hover, .menu button:hover { background: var(--bg-2); }

main.content { padding: 32px clamp(16px, 4vw, 48px) 64px; max-width: 1000px; width: 100%; }
.pagehead { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.pagehead h1 { font-size: 24px; letter-spacing: -.025em; }
.pagehead p { margin: 4px 0 0; color: var(--ink-3); font: 400 11.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.section { border: 1px solid var(--line); border-radius: 8px; padding: 20px; margin-bottom: 20px; }
.section h2 { font-size: 16px; margin-bottom: 4px; }
.section > p { margin: 0 0 16px; color: var(--ink-3); }
.section.danger-zone { border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat { padding: 14px 16px 16px; border: 1px solid var(--line); border-top: 3px solid var(--green); border-radius: 8px; min-width: 0; }
.stat:nth-child(2) { border-top-color: var(--sun); }
.stat:nth-child(3) { border-top-color: var(--sky); }
.stat small { display: block; color: var(--ink-3); font: 500 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.stat b { display: block; font: 650 28px/1.15 var(--display); letter-spacing: -.03em; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat:nth-child(3) b { font: 500 14px/1.3 var(--sans); letter-spacing: 0; margin-top: 16px; }

.badge { display: inline-block; padding: 3px 8px; font: 500 10.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--line); }
.badge.owner { background: var(--green-soft); color: var(--green-ink); border-color: transparent; }
.badge.admin { background: var(--amber-soft); color: #7a5a00; border-color: transparent; }

.list { display: grid; }
.item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.item:first-child { border-top: 0; }
.item .avatar { background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--line); }
.list .item:nth-child(4n+1) .avatar { background: var(--green-soft); color: var(--green-ink); border-color: transparent; }
.list .item:nth-child(4n+2) .avatar { background: var(--amber-soft); color: #7a5a00; border-color: transparent; }
.list .item:nth-child(4n+3) .avatar { background: var(--sky-soft); color: #1d5fa8; border-color: transparent; }
.list .item:nth-child(4n+4) .avatar { background: var(--coral-soft); color: #a53a22; border-color: transparent; }
.item .avatar svg { width: 16px; height: 16px; }
.item .who b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .who small { display: block; color: var(--ink-3); font: 400 12px/1.4 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .acts { display: flex; gap: 8px; }
.empty { color: var(--ink-3); padding: 6px 0; font: 400 12px/1.4 var(--mono); }
.linkbox { display: flex; gap: 8px; }
.linkbox input { font-family: var(--mono); font-size: 12.5px; }
.pending-title { margin-top: 24px; }
textarea.settings { font: 400 12.5px/1.6 var(--mono); background: var(--bg-2); resize: none; }

.banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; padding: 8px 8px 8px 14px;
  border: 1px solid #f3dc8c; border-left: 3px solid var(--sun); border-radius: 8px; background: var(--amber-soft); font-size: 13.5px; }
.banner b { font-weight: 500; word-break: break-all; }

dialog { border: 1px solid var(--line-2); border-radius: 10px; padding: 22px; width: min(440px, calc(100vw - 32px)); background: var(--bg); color: var(--ink); box-shadow: 5px 5px 0 var(--green); }
dialog::backdrop { background: rgba(24, 24, 27, .25); }
dialog h2 { font-size: 20px; margin-bottom: 6px; }
dialog p { color: var(--ink-2); margin: 0 0 16px; }
dialog .row { justify-content: flex-end; margin-top: 18px; }

.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 9px 14px; border-radius: 8px;
  font: 500 12.5px/1.3 var(--mono); z-index: 50; max-width: calc(100vw - 32px); box-shadow: 4px 4px 0 var(--green); }

/* Phones: the sidebar becomes a bar (wordmark, organisation, you) with the sections scrolling underneath */
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: sticky; z-index: 5; height: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 12px 0; }
  .side > .brand { padding: 0 4px 0 0; font-size: 12px; letter-spacing: .14em; gap: 8px; }
  .brand img, .hero > .brand img { width: 28px; height: 28px; }
  .orgpick { margin: 0; width: 100%; }
  .usermenu { margin: 0; }
  .usermenu > button { width: auto; padding: 4px; }
  .usermenu .name, .usermenu .chev { display: none; }
  .avatar { width: 30px; height: 30px; }
  .menu { left: auto; right: 0; bottom: auto; top: calc(100% + 6px); min-width: 230px; }
  .nav { grid-column: 1 / -1; grid-row: 2; flex-direction: row; overflow-x: auto; gap: 2px; margin: 0 -12px; padding: 4px 8px; border-top: 1px solid var(--line); }
  .nav .label, .nav .you { display: none; }
  .nav a { flex: none; padding: 7px 10px; }
  .nav a[aria-current="page"] { background: transparent; box-shadow: none; }
  .nav a[aria-current="page"]::before { left: 10px; right: 10px; top: auto; bottom: -4px; width: auto; height: 2px; border-radius: 0; }
  main.content { padding: 22px 16px 48px; }
  .pagehead h1 { font-size: 22px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { grid-column: 1 / -1; }
  .section { padding: 16px; }
  .item { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .item .acts { grid-column: 2 / -1; }
  .row > button { flex: 1 1 auto; }
}

/* Welcome site: the front page for visitors */
.site { min-height: 100vh; background: var(--bg); overflow-x: clip; }
.sitenav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 28px; height: 60px; padding: 0 clamp(16px, 4vw, 48px);
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.sitenav .jumps { display: flex; gap: 22px; }
.sitenav .jumps a { color: var(--ink-2); text-decoration: none; font-size: 13.5px; }
.sitenav .jumps a:hover { color: var(--ink); }
.sitenav .navacts { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.site main { display: block; }
.wl-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  padding: clamp(48px, 8vw, 104px) clamp(16px, 4vw, 48px) clamp(40px, 6vw, 80px); border-bottom: 1px solid var(--line);
  background-color: var(--bg-2); background-image: linear-gradient(rgba(24, 24, 27, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(24, 24, 27, .04) 1px, transparent 1px);
  background-size: 40px 40px; background-position: -1px -1px; }
.wl-hero h1 { font-size: clamp(40px, 5.6vw, 76px); font-weight: 700; letter-spacing: -.045em; line-height: 1; margin-top: 18px; text-wrap: balance; }
.wl-hero h1 .mark { background: linear-gradient(transparent 60%, var(--green) 60%, var(--green) 92%, transparent 92%); padding: 0 .04em; }
.wl-hero .lead { font-size: 17px; color: var(--ink-2); margin: 20px 0 0; max-width: 34rem; }
.ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.ctas .btn { min-height: 42px; padding: 0 18px; font-size: 14px; }
.wl-art { background: var(--bg); border: 1px solid var(--line-2); border-radius: 10px; padding: 18px; box-shadow: 6px 6px 0 var(--green); min-width: 0; }
.wl-art svg { display: block; width: 100%; max-width: none; height: auto; margin: 0; }
.strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; padding: 18px 16px; border-bottom: 1px solid var(--line);
  font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.strip span::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--green); margin-right: 10px; vertical-align: 1px; }

.wl-sec { max-width: 1160px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) clamp(16px, 4vw, 48px) 0; }
.wl-sec h2, .wl-cta h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; margin-top: 14px; max-width: 22ch; text-wrap: balance; }
.wl-sec .lead { font-size: 16px; color: var(--ink-2); margin: 16px 0 0; max-width: 38rem; }
.steps { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.steps li { border: 1px solid var(--line); border-radius: 10px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.steps .num { font: 500 12px/1 var(--mono); color: var(--green-ink); letter-spacing: .08em; }
.steps h3 { font-size: 20px; letter-spacing: -.02em; }
.steps p { margin: 0; color: var(--ink-2); }
.steps code { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line-2); font: 12px/1.4 var(--mono); color: var(--ink-3); }
.feats { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.feat { padding: 22px 22px 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 6px; align-content: start; }
.feat::before { content: ""; width: 22px; height: 3px; background: var(--green); margin-bottom: 8px; }
.feat.sun::before { background: var(--sun); }
.feat.sky::before { background: var(--sky); }
.feat.coral::before { background: var(--coral); }
.feat b { font: 650 16px/1.3 var(--display); letter-spacing: -.01em; }
.feat span { color: var(--ink-2); font-size: 13.5px; }
.wl-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.ticks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.ticks li { padding-left: 28px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 12px; height: 7px; border-left: 2px solid var(--green-ink); border-bottom: 2px solid var(--green-ink); transform: rotate(-45deg); }
.archart { color: var(--ink); }
.archart .zone { fill: var(--green-soft); stroke: var(--green); stroke-width: 1; stroke-dasharray: 4 4; }
.archart .nd { fill: var(--bg); stroke: var(--line-2); stroke-width: 1.2; }
.archart .nd.hot { stroke: var(--ink); }
.archart .wire { fill: none; stroke: var(--ink-3); stroke-width: 1.2; }
.archart .flow { fill: none; stroke: var(--green); stroke-width: 2.4; stroke-dasharray: 6 10; animation: flow 1.6s linear infinite; }
.archart .lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; fill: currentColor; }
.archart .lbl.dim { fill: var(--ink-3); }
.archart .ttl { font-family: var(--display); font-size: 15px; font-weight: 600; fill: currentColor; }
.archart .code { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .archart .flow { animation: none; } }
.roles { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: 10px; }
.roles li { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; padding: 16px 18px; }
.roles li + li { border-top: 1px solid var(--line); }
.roles .badge { justify-self: start; }
.roles span:last-child { color: var(--ink-2); }
.sitefoot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: clamp(56px, 8vw, 96px); padding: 22px clamp(16px, 4vw, 48px);
  border-top: 1px solid var(--line); font: 400 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.sitefoot .brand img { width: 24px; height: 24px; }

@media (max-width: 960px) {
  .sitenav .jumps { display: none; }
  .wl-hero, .wl-split { grid-template-columns: 1fr; }
  .steps, .feats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .sitenav { height: 56px; gap: 12px; }
  .sitenav .brand { font-size: 12px; letter-spacing: .14em; gap: 8px; }
  .sitenav .brand img { width: 28px; height: 28px; }
  .sitenav .btn.ghost { padding: 0 8px; }
  .wl-hero { padding-top: 36px; }
  .wl-hero .lead { font-size: 15.5px; }
  .ctas .btn { flex: 1 1 auto; }
  .wl-art { padding: 10px; box-shadow: 4px 4px 0 var(--green); }
  .steps, .feats { grid-template-columns: 1fr; }
  .roles li { grid-template-columns: 1fr; gap: 6px; }
}
.wl-art .flowart { display: block; }
/* Industries: a marquee that drifts left, pauses on hover, and fades out at both edges */
.marquee { margin: 36px calc(50% - 50vw) 0; overflow: hidden; padding: 4px 0 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.track { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; width: max-content; will-change: transform; }
.marquee { cursor: grab; touch-action: pan-y; user-select: none; }
.marquee.dragging { cursor: grabbing; }
.marquee.dragging .ucase { pointer-events: none; }
.marquee img { -webkit-user-drag: none; }
.ucase { flex: 0 0 300px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); overflow: hidden; }
.uart { height: 132px; position: relative; overflow: hidden; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.uart img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .62; filter: grayscale(1); transition: opacity .25s; }
.ucase:hover .uart img { opacity: .85; }
.uart::after { content: ""; position: absolute; inset: auto 0 0; height: 36px; background: linear-gradient(transparent, color-mix(in srgb, var(--bg) 55%, transparent)); }
.ubody { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px 20px; flex: 1; border-top: 3px solid var(--green); margin-top: -1px; }
.ucase.sun .ubody { border-top-color: var(--sun); }
.ucase.sky .ubody { border-top-color: var(--sky); }
.ucase.coral .ubody { border-top-color: var(--coral); }
.ucase .sector { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ucase h3 { font-size: 20px; letter-spacing: -.02em; }
.ucase p { margin: 0; color: var(--ink-2); font-size: 13.5px; }
.ucase .eg { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.ucase .eg span { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2); }
@media (max-width: 640px) {
  .ucase { flex-basis: 264px; }
}
.wl-sec { scroll-margin-top: 24px; }
/* Where the data lives: the sources in the deployment drawing, and the wall of muted marks below it */
.archart .logo path { fill: var(--ink); stroke: none; }
.wl-logos { padding-top: 48px; }
.logowall { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.logowall li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 104px; padding: 16px 10px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink-3); transition: color .15s, background .15s; text-align: center; }
.logowall svg { width: 30px; height: 30px; fill: currentColor; opacity: .7; transition: opacity .15s; }
.logowall li.plain svg { opacity: .35; }
.logowall span { font-size: 12.5px; line-height: 1.25; }
.logowall li:hover { color: var(--ink); background: var(--bg-2); }
.logowall li:hover svg { opacity: 1; }
.fineprint { margin: 12px 0 0; font-size: 11.5px; color: var(--ink-3); }
@media (max-width: 960px) { .logowall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .logowall { grid-template-columns: repeat(3, minmax(0, 1fr)); } .logowall li { min-height: 88px; } }

.credits { margin-top: 10px; font-size: 11.5px; color: var(--ink-3); }
.credits summary { cursor: pointer; width: fit-content; }
.credits summary:hover { color: var(--ink); }
.credits ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.credits a { color: var(--ink-2); }

/* The closing call to action: the hero's gridded grey band, heading on the left, buttons on the right */
.wl-cta { margin-top: clamp(64px, 9vw, 112px); padding: clamp(48px, 7vw, 88px) clamp(16px, 4vw, 48px); border-top: 1px solid var(--line);
  background-color: var(--bg-2); background-image: linear-gradient(rgba(24, 24, 27, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(24, 24, 27, .04) 1px, transparent 1px);
  background-size: 40px 40px; background-position: -1px -1px; }
.wl-cta-in { max-width: 1064px; margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.wl-cta h2 .mark { background: linear-gradient(transparent 60%, var(--green) 60%, var(--green) 92%, transparent 92%); padding: 0 .04em; }
.wl-cta .lead { font-size: 16px; color: var(--ink-2); margin: 14px 0 0; }
.wl-cta .ctas { margin-top: 0; }
.site main + .sitefoot { margin-top: 0; }

/* Industry cards open a panel that grows out of the card */
.ucase { cursor: pointer; transition: border-color .15s, transform .15s; }
.ucase:hover { border-color: var(--line-2); }
.ucase:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.ucase .ubody::after { content: "See the use case →"; font: 500 12px/1 var(--mono); color: var(--ink-3); padding-top: 14px; transition: color .15s; }
.ucase:hover .ubody::after { color: var(--green-ink); }
dialog.umodal { width: min(880px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: auto; border-radius: 12px; border: 1px solid var(--line-2);
  box-shadow: 8px 8px 0 var(--green); transform-origin: 0 0; }
dialog.umodal.sun { box-shadow: 8px 8px 0 var(--sun); }
dialog.umodal.sky { box-shadow: 8px 8px 0 var(--sky); }
dialog.umodal.coral { box-shadow: 8px 8px 0 var(--coral); }
.uhero { height: 150px; position: relative; background: var(--bg-2); border-bottom: 1px solid var(--line); overflow: hidden; }
.uhero img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); opacity: .7; }
.uclose { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: 50%; background: var(--bg); font-size: 20px; line-height: 1; }
.ucontent { padding: 24px 28px 28px; }
.umodal .sector { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
dialog.umodal h2 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 700; letter-spacing: -.03em; margin: 10px 0 0; }
dialog.umodal .lead { font-size: 15.5px; color: var(--ink-2); margin: 10px 0 0; max-width: 46rem; }
.ucols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; margin: 24px 0; align-items: start; }
.ucols h3 { font-size: 15px; margin-bottom: 10px; }
.ucols .ticks { margin: 0; }
.utwin { padding: 16px 18px; border-radius: 10px; background: var(--green-soft); }
.umodal.sun .utwin { background: var(--amber-soft); }
.umodal.sky .utwin { background: var(--sky-soft); }
.umodal.coral .utwin { background: var(--coral-soft); }
dialog.umodal .utwin p { color: var(--ink); margin: 0; }
.umodal .eg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.umodal .eg span { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--ink-2); }
.umodal .wl-art { box-shadow: none; padding: 12px; }
.umodal .ctas { margin-top: 22px; }
@media (max-width: 640px) {
  .uhero { height: 120px; }
  .ucontent { padding: 18px 16px 20px; }
  .ucols { grid-template-columns: 1fr; gap: 16px; }
  dialog.umodal { box-shadow: 5px 5px 0 var(--green); }
}

/* Audience pages: the site links, the audience cards, before/after, four steps, and the extra drawing parts */
.sitenav .jumps a[aria-current="page"] { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.aucards { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.aucards a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 22px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink);
  background: var(--bg); transition: border-color .15s, box-shadow .15s, transform .15s; }
.aucards a:hover { border-color: var(--ink); box-shadow: 5px 5px 0 var(--green); transform: translate(-2px, -2px); }
.aucards .sector { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--green-ink); }
.aucards b { font: 650 20px/1.2 var(--display); letter-spacing: -.02em; }
.aucards .aut { color: var(--ink-2); font-size: 13.5px; }
.aucards .go { margin-top: auto; padding-top: 10px; font: 500 12px/1 var(--mono); color: var(--ink-3); }
.aucards a:hover .go { color: var(--green-ink); }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.compare > div { border: 1px solid var(--line); border-radius: 10px; padding: 22px; }
.compare .now { border-color: var(--line-2); border-top: 3px solid var(--green); box-shadow: 5px 5px 0 var(--green-soft); }
.compare .was { background: var(--bg-2); border-top: 3px solid var(--line-2); }
.compare h3 { font-size: 17px; margin-bottom: 12px; }
.compare ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.compare li { padding-left: 26px; position: relative; }
.compare .was li { color: var(--ink-2); }
.compare .was li::before { content: ""; position: absolute; left: 3px; top: 10px; width: 11px; height: 1.6px; background: var(--coral); transform: rotate(45deg); box-shadow: 0 0 0 0 var(--coral); }
.compare .was li::after { content: ""; position: absolute; left: 3px; top: 10px; width: 11px; height: 1.6px; background: var(--coral); transform: rotate(-45deg); }
.compare .now li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 12px; height: 7px; border-left: 2px solid var(--green-ink); border-bottom: 2px solid var(--green-ink); transform: rotate(-45deg); }
.steps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.footlinks { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footlinks a { color: var(--ink-3); text-decoration: none; }
.footlinks a:hover { color: var(--ink); }
.archart .lbl.sm { font-size: 9.5px; }
.archart .soft { fill: var(--green-soft); stroke: var(--green); stroke-width: 1.2; }
.archart .band { fill: var(--green-soft); stroke: var(--green); stroke-width: 1.2; }
.archart .chip { fill: var(--bg); stroke: var(--line-2); stroke-width: 1; }
.archart .code.ink { fill: var(--ink); }
.archart .dotc { fill: var(--line-2); }
.archart .tick { stroke: var(--line-2); stroke-width: 1; }
.archart .dash { fill: none; stroke: var(--coral); stroke-width: 1.4; stroke-dasharray: 5 5; }
.archart .xc { fill: var(--bg); stroke: var(--coral); stroke-width: 1.4; }
.archart .x { stroke: var(--coral); stroke-width: 2; stroke-linecap: round; }
@media (max-width: 960px) {
  .steps.four { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .compare, .steps.four { grid-template-columns: 1fr; }
  .sitefoot { flex-direction: column; align-items: flex-start; }
}

/* Inbox: what waits for owners and admins; the count in the nav, the band on the overview. */
.nav a .count { margin-left: auto; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--green); color: #fff; font: 600 11px/16px var(--mono); text-align: center; }
.waitband { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; padding: 12px 16px; border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 8px; color: var(--ink-2); text-decoration: none; }
.waitband:hover { background: var(--hover); }
.waitband b { color: var(--ink); margin-right: 4px; }
.waitband svg { width: 16px; height: 16px; flex: none; color: var(--green-ink); }
.waitband svg:last-child { margin-left: auto; transform: rotate(90deg); color: var(--ink-3); }
.inboxitem { align-items: start; }
.inboxitem .who small { display: block; }
.inboxitem .who .badge.kind { margin-left: 8px; vertical-align: 1px; }
.section > p.more { color: var(--ink-2); font-weight: 500; }
.inboxitem .note { display: block; margin: 6px 0 0; padding: 4px 10px; border-left: 3px solid var(--line); color: var(--ink-2); font-size: 13px; quotes: none; }
.inboxitem .outcome { margin-top: 4px; color: var(--ink-2); }
.inboxitem.declined .outcome { color: #a53a22; }
.badge.pending { background: var(--amber-soft); color: #7a5a00; border-color: transparent; }
.badge.approved { background: var(--green-soft); color: var(--green-ink); border-color: transparent; }
.badge.declined { background: var(--coral-soft); color: #a53a22; border-color: transparent; }

/* Policies: each rule's fixed options, the chosen one marked; what it means below. */
.prules { display: grid; }
.prule { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px; padding: 16px 0; border-top: 1px solid var(--line); }
.prule:first-child { border-top: 0; }
.pwhat b { display: block; font-weight: 600; }
.pwhat small { display: block; margin-top: 3px; color: var(--ink-3); font-size: 13px; line-height: 1.45; }
.pset { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.seg { display: inline-flex; flex-wrap: wrap; align-self: flex-start; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); padding: 2px; gap: 2px; }
.seg button { min-height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); font-size: 13px; }
.seg button:hover:not(:disabled) { background: var(--hover); }
.seg button.on { background: var(--bg); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .06); }
.seg button:disabled { cursor: default; }
.seg button:disabled:not(.on) { opacity: .6; }
.pchoice { color: var(--ink-2); font-size: 13px; line-height: 1.45; }
@media (max-width: 760px) { .prule { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
/* Deployments: when each was last heard from, its data planes' sandbox. */
.dstate { margin-top: 4px; color: var(--ink-2) !important; }
.dplanes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dp { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); font: 500 11px/1.5 var(--mono); color: var(--ink-2); }
.dp.ok { background: var(--green-soft); color: var(--green-ink); border-color: transparent; }
.dp.warn { background: var(--amber-soft); color: #7a5a00; border-color: transparent; }
.dp.bad { background: var(--coral-soft); color: #a53a22; border-color: transparent; }

/* Deployments: each environment and what it connects to (names and status, no settings). */
.denvs { display: grid; gap: 4px; margin-top: 10px; }
.denv summary { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; color: var(--ink-2); list-style: none; }
.denv summary::-webkit-details-marker { display: none; }
.denv summary::before { content: "›"; display: inline-block; width: 10px; color: var(--ink-3); transition: transform .15s; }
.denv[open] summary::before { transform: rotate(90deg); }
.denv summary b { color: var(--ink); font-weight: 600; }
.dconns { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px 20px; }
.dconn { white-space: nowrap; padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; color: var(--ink-3); }
.dconn b { color: var(--ink); font-weight: 600; font-family: var(--mono); font-size: 11.5px; }
.dconn.bad { border-color: transparent; background: var(--coral-soft); color: #a53a22; }
.denv small { display: block; margin: 6px 0 0 20px; color: var(--ink-3); }

/* Getting started (/o/<id>/start): three numbered steps, the finished one ticked */
.getsteps { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.getsteps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; }
.getsteps .num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); font: 600 14px/1 var(--mono); color: var(--ink-2); }
.getsteps li.done .num { background: var(--green); border-color: var(--green); color: #0b1a10; }
.getsteps h2 { font-size: 17px; margin: 6px 0 6px; }
.getsteps p { margin: 0 0 10px; color: var(--ink-2); }
.getsteps li.done h2 { color: var(--ink-2); }
.getdl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; }
.getdl small { color: var(--ink-3); font-size: 12.5px; }
.getsteps .getnote { font-size: 12.5px; color: var(--ink-3); margin: 0; text-align: left; }
@media (max-width: 640px) { .getsteps li { grid-template-columns: 1fr; gap: 10px; } }
.getdl .sha { flex-basis: 100%; word-break: break-all; }
.getdl .sha code { font-size: 12px; user-select: all; }