@font-face { font-family: 'Instrument Sans'; font-weight: 400 700; font-style: normal; font-display: swap; src: url('fonts/instrument-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/ibm-plex-mono-500.woff2') format('woff2'); }

:root {
  --black: #060607;
  --coal: #0e0e11;
  --coal-2: #17171b;
  --line: #27272d;
  --line-2: #3a3a42;
  --ink: #f5f5f2;
  --soft: #cfcfd0;
  --ash: #9b9ba5;
  --bone: #eeece6;
  --bone-line: #cfccc4;
  --fire-1: #ff8a2b;
  --fire-2: #f0400f;
  --fire-3: #e01a04;
  --ok: #37d992;
  --warn: #f5a623;
  --bad: #ff5a5a;
  --sans: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --gutter: clamp(16px, 4.4vw, 64px);
  --chamfer: 9px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--black); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--fire-1); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -.022em; line-height: 1.04; }
p { margin: 0 0 1em; }
code { font: 400 .88em var(--mono); background: var(--coal-2); padding: .12em .36em; overflow-wrap: anywhere; }
pre { margin: 0; overflow-x: auto; font: 400 13.5px/1.65 var(--mono); }
pre code { background: none; padding: 0; overflow-wrap: normal; }
[hidden] { display: none !important; }
.muted { color: var(--ash); }
.pad { padding-inline: var(--gutter); }

/* Navigation: a bar drawn with hairlines, over the page */
.nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; min-height: 64px; padding-inline: var(--gutter); background: rgba(6, 6, 7, .86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand img:first-child { width: 30px; height: 26px; }
.brand img:last-child { width: 104px; height: 12px; object-fit: contain; }
.beta-tag { padding: 1px 7px; border: 1px solid var(--line-2); color: var(--soft); font-size: 12px; line-height: 18px; }
.nav-links { display: flex; gap: 26px; margin-left: 18px; }
.nav-menu { display: none; }
.nav-menu summary { list-style: none; cursor: pointer; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-links a, .nav-menu nav a, .nav-link { color: var(--soft); font-size: 15px; font-weight: 500; text-decoration: none; }
.nav-links a:hover, .nav-menu nav a:hover, .nav-link:hover, .nav-links a[aria-current] { color: var(--ink); }
.nav .nav-user { display: none; }
html.signed-in .nav .nav-guest { display: none; }
html.signed-in .nav .nav-user { display: inline-flex; }
.nav-end { display: flex; align-items: center; gap: 20px; margin-left: auto; }

/* Buttons: the chamfered corner comes from the cut of the logo */
.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 22px; border: 0; background: var(--ink); color: var(--black); font: 600 15.5px var(--sans); text-decoration: none; cursor: pointer; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%); }
.btn:hover { background: #fff; }
.btn:focus-visible { outline-offset: -5px; outline-color: var(--fire-2); }
.btn-small { --chamfer: 7px; min-height: 38px; padding: 6px 15px; font-size: 14.5px; }
.btn-ghost { background: var(--coal-2); color: var(--ink); }
.btn-ghost:hover { background: #24242a; }
.btn-dark { background: var(--black); color: var(--ink); }
.btn-dark:hover { background: #222226; }
.btn-danger { background: #2a1214; color: #ffb9b9; }
.btn-danger:hover { background: #3a181b; }
.btn:disabled { opacity: .5; cursor: default; }
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* Hero: copy on the left, the sample log on the right. They share a grid, so they can never overlap. */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: end; min-height: min(calc(100svh - 64px), 780px); padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(36px, 5vw, 64px); overflow: hidden; border-bottom: 1px solid var(--line); isolation: isolate; }
.hero-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: right top; }
.hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--black) 18%, rgba(6, 6, 7, .72) 52%, rgba(6, 6, 7, .1) 100%), linear-gradient(0deg, var(--black) 2%, rgba(6, 6, 7, 0) 45%); }
.hero-copy { min-width: 0; }
.hero h1 { max-width: 15ch; font-size: clamp(40px, 5.2vw, 80px); line-height: 1.03; letter-spacing: -.03em; }
.hero-copy p { max-width: 52ch; margin: clamp(18px, 2vw, 26px) 0 clamp(22px, 2.4vw, 30px); font-size: clamp(17px, 1.35vw, 19px); line-height: 1.5; color: var(--soft); }
.hero-log { min-width: 0; margin: 0; background: rgba(6, 6, 7, .78); border: 1px solid var(--line-2); backdrop-filter: blur(6px); }
.hero-log figcaption { padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--ash); font-size: 13px; }
.hero-rows { padding: 4px 0; font: 400 12.5px/1 var(--mono); }
.log-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; align-items: center; height: 34px; padding: 0 14px; color: #8a8a94; }
.log-p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.log-r { color: #6d6d77; }
.log-row.is-attack { color: var(--ink); background: rgba(240, 64, 15, .14); box-shadow: inset 0 0 0 1px var(--fire-2); }
.is-attack .log-r { color: var(--fire-1); font-weight: 500; }

/* Sections */
.band { padding: clamp(56px, 7vw, 104px) var(--gutter); border-bottom: 1px solid var(--line); }
.kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; color: var(--soft); font-size: 14.5px; font-weight: 500; }
.kicker::before { content: ''; width: 7px; height: 7px; background: var(--fire-2); transform: rotate(45deg); }
.big { max-width: 24ch; font-size: clamp(32px, 4vw, 56px); }
.statement { font-size: clamp(30px, 4.5vw, 66px); line-height: 1.1; letter-spacing: -.026em; max-width: 24ch; font-weight: 500; margin: 0; }
.lede { max-width: 60ch; margin-top: 22px; font-size: clamp(17px, 1.4vw, 20px); color: var(--soft); }

/* Demo */
.demo-sec { padding-block: clamp(60px, 8vw, 120px); border-bottom: 1px solid var(--line); }
.demo-head { display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: flex-end; justify-content: space-between; margin-bottom: clamp(26px, 3vw, 40px); }
.demo { position: relative; border: 1px solid var(--line-2); background: var(--coal); transition: border-color .2s, box-shadow .2s; }
.demo.is-blocked { border-color: var(--fire-2); box-shadow: 0 0 0 1px var(--fire-2), 0 0 90px -20px rgba(240, 64, 15, .85); }
.demo-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.demo-tab { min-height: 48px; padding: 8px 20px; background: none; border: 0; border-right: 1px solid var(--line); color: var(--ash); font: 500 15px var(--sans); cursor: pointer; }
.demo-tab:hover { color: var(--ink); }
.demo-tab[aria-selected="true"] { background: var(--ink); color: var(--black); }
.demo-body { padding: clamp(18px, 2.6vw, 34px); }
.demo-label { display: block; margin-bottom: 8px; color: var(--soft); font-size: 15px; }
input.demo-input[type=text] { width: 100%; min-height: 60px; padding: 14px 16px; background: var(--black); border: 1px solid var(--line-2); color: var(--ink); font: 400 clamp(16px, 1.7vw, 21px) var(--mono); }
.demo-presets { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 26px; }
.demo-presets button { padding: 2px 0; background: none; border: 0; border-bottom: 1px solid var(--line-2); color: var(--ash); font: 400 14.5px var(--sans); cursor: pointer; }
.demo-presets button:hover { color: var(--ink); border-color: var(--ink); }
.demo-out { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); gap: clamp(20px, 3vw, 44px); }
.demo-code { min-width: 0; padding: 20px; background: var(--black); font: 400 clamp(14px, 1.3vw, 17px)/1.75 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--soft); }
.demo-code .val { padding: 1px 3px; background: rgba(55, 217, 146, .15); color: #a5f3cf; }
.demo.is-blocked .demo-code .val { background: linear-gradient(90deg, var(--fire-1), var(--fire-2)); color: #160602; font-weight: 500; }
.demo-verdict h3 { margin-bottom: 8px; font-size: clamp(32px, 3.6vw, 52px); color: var(--ok); }
.demo.is-blocked .demo-verdict h3 { color: var(--fire-1); }
.demo-verdict p { margin: 0; font-size: 15.5px; color: var(--soft); }
.demo-note { margin: 12px 0 0; color: var(--ash); font-size: 14px; }

/* Split: image on one half, the argument on the other */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.split-art { position: relative; min-height: 420px; overflow: hidden; background: var(--coal); border-right: 1px solid var(--line); }
.split-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-trace { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(22px, 4vw, 60px); font: 400 clamp(13px, 1.25vw, 16.5px)/1.6 var(--mono); color: #66666f; }
.split-trace b { font-weight: 400; color: var(--ink); }
.split-trace i { font-style: normal; display: inline-block; padding: 0 4px; outline: 1.5px solid var(--fire-2); color: var(--fire-1); }
.split-text { padding: clamp(50px, 7vw, 110px) var(--gutter); min-width: 0; }
.how { margin: 34px 0 0; padding: 0; list-style: none; counter-reset: step; }
.how li { counter-increment: step; display: grid; grid-template-columns: 34px minmax(0, 1fr); padding: 20px 0; border-top: 1px solid var(--line); }
.how li::before { content: counter(step); color: var(--ash); font-size: 15px; line-height: 1.7; }
.how h3 { margin-bottom: 6px; font-size: 21px; letter-spacing: -.012em; line-height: 1.25; }
.how p { margin: 0; color: var(--soft); font-size: 16px; }
.how pre { margin-top: 10px; color: var(--soft); }

/* Features as rows */
.rows { margin-top: clamp(34px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) minmax(0, 220px); gap: 12px clamp(20px, 3vw, 48px); align-items: center; min-height: 130px; padding: 24px 0; border-top: 1px solid var(--line); text-decoration: none; }
.row h3 { font-size: clamp(22px, 2vw, 30px); line-height: 1.15; }
.row p { margin: 0; color: var(--soft); font-size: 16.5px; max-width: 54ch; }
.row-art { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.row:hover h3 { color: var(--fire-1); }

/* Secured by Vantor */
.secured { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.secured-badge { display: inline-block; margin-top: 22px; }
.secured-side img.sello { width: min(100%, 300px); margin-left: auto; }
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(26px, 4vw, 64px); margin-top: clamp(40px, 5vw, 70px); }
.compare h3 { margin-bottom: 14px; font-size: 22px; line-height: 1.25; letter-spacing: -.012em; }
.compare ul { margin: 0; padding: 0; list-style: none; }
.compare li { padding: 14px 0; border-top: 1px solid var(--line); color: var(--soft); font-size: 16px; }

/* Numbers measured, not promised */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(30px, 4vw, 50px); border-top: 1px solid var(--line); }
.fact { padding: 22px 22px 22px 0; }
.fact + .fact { padding-left: 22px; border-left: 1px solid var(--line); }
.fact b { display: block; font-size: clamp(32px, 4.4vw, 62px); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; margin-bottom: 8px; }
.fact span { color: var(--soft); font-size: 15px; display: block; }

.tile-list { margin: 0; padding: 0; list-style: none; }
.tile-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 8px clamp(20px, 4vw, 60px); padding: 26px 0; border-top: 1px solid var(--line); }
.tile-list h3 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; }
.tile-list p { margin: 0; color: var(--soft); max-width: 62ch; }

.final { padding: clamp(64px, 8vw, 120px) var(--gutter); }
.final h2 { margin-bottom: 26px; font-size: clamp(32px, 4vw, 56px); }

/* Closing in the light, the one moment of contrast in the page */
.footer { background: var(--bone); color: #17171a; }
.footer-top { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; padding: clamp(34px, 4vw, 56px) var(--gutter); border-bottom: 1px solid var(--bone-line); }
.footer-brand { display: flex; align-items: center; gap: clamp(12px, 2vw, 22px); }
.footer-brand img:first-child { width: clamp(38px, 4.4vw, 58px); height: auto; }
.wordmark-dark { width: clamp(150px, 19vw, 260px); height: auto; filter: invert(1) brightness(.12); }
.footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.footer-grid > div { padding: clamp(26px, 3vw, 40px) var(--gutter) clamp(30px, 4vw, 54px); border-right: 1px solid var(--bone-line); }
.footer-grid > div:last-child { border-right: 0; }
.footer-grid h2 { margin-bottom: 16px; font-size: 14px; font-weight: 500; letter-spacing: 0; line-height: 1.4; color: #5c5a55; }
.footer-grid a:not(.inline) { display: block; padding: 4px 0; font-size: 17px; font-weight: 500; text-decoration: none; }
.footer-grid a:not(.inline):hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-grid p { margin: 0; font-size: 15.5px; color: #3a3935; }
.footer :focus-visible { outline-color: #17171a; }

.spaced { margin-top: clamp(24px, 3vw, 36px); }
.spaced-lg { margin-top: clamp(30px, 4vw, 54px); }
.panel-shot { width: 100%; height: auto; margin-top: clamp(30px, 4vw, 54px); border: 1px solid var(--line-2); }
.panel-note { margin: 12px 0 0; font-size: 14.5px; }
.lede.first { margin-top: 0; margin-bottom: 20px; }
.inline-fire { color: var(--fire-1); }
.hint { margin: 8px 0 0; font-size: 14px; }
.sub { margin-bottom: 12px; font-size: 21px; line-height: 1.25; letter-spacing: -.012em; }

/* Features page */
.page-head { padding: clamp(48px, 6vw, 88px) var(--gutter) clamp(36px, 4vw, 56px); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(38px, 5vw, 72px); letter-spacing: -.03em; }
.feat-wrap { display: grid; grid-template-columns: 230px minmax(0, 1fr); padding-inline: var(--gutter); }
.feat-index { position: sticky; top: 64px; align-self: start; padding: 34px 20px 34px 0; }
.feat-index a { display: block; padding: 5px 0; color: var(--ash); font-size: 15px; font-weight: 500; text-decoration: none; }
.feat-index a:hover { color: var(--ink); }
.feat-main { min-width: 0; border-left: 1px solid var(--line); }
.feat { padding: clamp(40px, 6vw, 84px) 0 clamp(40px, 6vw, 84px) clamp(22px, 4vw, 60px); border-bottom: 1px solid var(--line); }
.feat:last-child { border-bottom: 0; }
.feat h2 { margin-bottom: 14px; font-size: clamp(28px, 3vw, 44px); }
.feat-lead { max-width: 58ch; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.4; color: var(--soft); }
.feat-img { width: 100%; aspect-ratio: 3 / 1.25; object-fit: cover; margin: 26px 0; }
.feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 44px); margin-top: 28px; }
.exhibit { min-width: 0; background: var(--coal); border: 1px solid var(--line); }
.exhibit-cap { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--ash); font-size: 13.5px; }
.exhibit pre { padding: 15px; color: var(--soft); }
.exhibit .no { color: #ff9d7a; }
.exhibit .si { color: #79e6b6; }
.points { margin: 0; padding: 0; list-style: none; }
.points li { padding: 10px 0; border-top: 1px solid var(--line); color: var(--soft); font-size: 16px; }
.points li:first-child { border-top: 0; padding-top: 0; }
.check-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 15px; }
.exhibit-cap + .check-row { border-top: 0; }
.mark { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--black); font: 700 12px/1 var(--sans); margin-top: 3px; }
.mark-ok { background: var(--ok); }
.mark-warn { background: var(--warn); }
.mark-bad { background: var(--bad); }

/* Configurator */
.conf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); align-items: start; border-top: 1px solid var(--line); }
.conf-opts { min-width: 0; padding-right: clamp(20px, 4vw, 56px); }
.conf-out { position: sticky; top: 84px; margin-block: 24px; background: var(--coal); border: 1px solid var(--line-2); }
.conf-out-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); font: 400 13.5px var(--mono); color: var(--soft); }
.conf-out-actions { display: flex; gap: 6px; }
.conf-out pre { max-height: min(56vh, 520px); padding: 15px; overflow: auto; color: var(--ink); }
.conf-warn { padding: 12px 14px; border-top: 1px solid var(--line); font-size: 14.5px; }
.conf-warn p { margin: 0 0 8px; padding-left: 18px; position: relative; color: #ffd9a0; }
.conf-warn p:last-child { margin-bottom: 0; }
.conf-warn p::before { content: '!'; position: absolute; left: 0; color: var(--warn); font-weight: 700; }
.conf-sec { padding: 28px 0; border-bottom: 1px solid var(--line); }
.conf-sec:last-child { border-bottom: 0; }
.conf-sec h2, .conf-sec h3.conf-title { margin-bottom: 6px; font-size: 22px; line-height: 1.25; letter-spacing: -.012em; }
.conf-sec > p { max-width: 62ch; margin-bottom: 14px; color: var(--soft); font-size: 15.5px; }
.presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.preset { padding: 16px; background: var(--coal); border: 1px solid var(--line-2); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.preset:hover { border-color: var(--soft); }
.preset[aria-pressed="true"] { border-color: var(--fire-2); box-shadow: inset 0 0 0 1px var(--fire-2); }
.preset b { display: block; margin-bottom: 4px; font-size: 18px; font-weight: 600; }
.preset span { display: block; color: var(--soft); font-size: 14.5px; line-height: 1.4; }
.rule-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.rule-row b { display: block; font-weight: 600; font-size: 16px; }
.rule-row span.d { display: block; color: var(--ash); font-size: 14px; line-height: 1.35; }
.seg { display: inline-flex; border: 1px solid var(--line-2); }
.seg button { min-height: 34px; padding: 4px 10px; background: none; border: 0; border-right: 1px solid var(--line-2); color: var(--soft); font: 500 13.5px var(--sans); cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--black); }
.seg button[data-v="block"][aria-pressed="true"] { background: var(--fire-2); color: #fff; }
.fieldset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.toggle { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 15.5px; cursor: pointer; }
.toggle input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--fire-2); flex: none; }
.toggle small { display: block; color: var(--ash); font-size: 14px; }

/* Forms */
.auth { display: grid; place-items: center; min-height: calc(100svh - 64px); padding: 40px var(--gutter); }
.auth-box { width: 100%; max-width: 410px; }
.auth-box h1 { margin-bottom: 8px; font-size: 36px; }
.field { display: block; margin-top: 18px; }
.field > span { display: block; margin-bottom: 6px; font-size: 14.5px; font-weight: 500; }
.field small { display: block; margin-top: 5px; color: var(--ash); font-size: 13.5px; }
input[type=text], input[type=email], input[type=password], input[type=number] { width: 100%; min-height: 46px; padding: 9px 12px; background: var(--coal); border: 1px solid var(--line-2); color: var(--ink); font: 400 16px var(--sans); }
input:focus { border-color: var(--soft); }
.check { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font-size: 14.5px; }
.check input { margin-top: 4px; accent-color: var(--fire-2); width: 17px; height: 17px; flex: none; }
.form-error { margin-top: 14px; padding: 10px 13px; background: rgba(255, 90, 90, .1); border: 1px solid #6a2c31; font-size: 14.5px; }
.form-ok { margin-top: 14px; padding: 10px 13px; background: rgba(55, 217, 146, .09); border: 1px solid #1f5c43; font-size: 14.5px; }
.form-warn { margin-bottom: 18px; padding: 12px 14px; background: rgba(245, 166, 35, .09); border: 1px solid #5c4a1f; font-size: 15px; }
.btn-wide { width: 100%; margin-top: 22px; }
.auth-alt { margin-top: 18px; color: var(--ash); font-size: 15px; }
.auth-alt a, .prose a { color: var(--fire-1); }

/* Legal and docs */
.prose { max-width: 760px; padding-block: clamp(36px, 6vw, 72px); }
.prose h1 { margin-bottom: 20px; font-size: clamp(36px, 5vw, 60px); }
.prose h2 { margin: 42px 0 12px; font-size: 26px; line-height: 1.2; }
.prose h3 { margin: 28px 0 8px; font-size: 19px; line-height: 1.3; }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose pre { margin: 0 0 18px; padding: 14px 16px; background: var(--coal); border: 1px solid var(--line); }
.legal { padding-inline: var(--gutter); }
.table { margin: 0 0 20px; overflow-x: auto; border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { background: var(--coal); color: var(--ash); font-weight: 500; }
tr:last-child td { border-bottom: 0; }
.docs { display: grid; grid-template-columns: 230px minmax(0, 1fr); padding-inline: var(--gutter); }
.docs-nav { position: sticky; top: 64px; align-self: start; padding: 34px 20px 0 0; }
.docs-nav a { display: block; padding: 5px 0; color: var(--ash); font-size: 15px; font-weight: 500; text-decoration: none; }
.docs-nav a:hover, .docs-nav a[aria-current] { color: var(--ink); }
.docs main { min-width: 0; padding-left: clamp(22px, 4vw, 60px); border-left: 1px solid var(--line); }

/* Panel: a working tool, so it stays quiet */
.app { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: calc(100svh - 64px); }
.side { position: sticky; top: 64px; align-self: start; display: flex; flex-direction: column; height: calc(100svh - 64px); overflow-y: auto; border-right: 1px solid var(--line); }
.side-sec { padding: 18px 16px; border-bottom: 1px solid var(--line); }
.side-title { margin-bottom: 8px; color: var(--ash); font-size: 13.5px; }
.side a { display: flex; align-items: center; gap: 9px; padding: 7px 9px; margin-inline: -9px; color: var(--soft); font-size: 15px; font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.side a:hover { color: var(--ink); background: var(--coal); }
.side a[aria-current] { color: var(--ink); background: var(--coal-2); }
.side-foot { margin-top: auto; border-top: 1px solid var(--line); border-bottom: 0; }
.side-foot button { width: 100%; }
.dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #72727c; }
.dot-protected { background: var(--ok); }
.dot-observing { background: var(--warn); }
.dot-revoked, .dot-invalid { background: var(--bad); }
.main { min-width: 0; padding: clamp(20px, 3vw, 38px) var(--gutter) 80px; }
.head { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
.head h1 { font-size: clamp(30px, 3.6vw, 48px); overflow-wrap: anywhere; }
.status { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; color: var(--soft); font-size: 15px; }
.status::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #72727c; flex: none; }
.status-protected::before { background: var(--ok); }
.status-observing::before { background: var(--warn); }
.status-revoked::before, .status-invalid::before { background: var(--bad); }
.tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.tabs a { padding: 10px 0; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--ash); font-size: 15px; font-weight: 500; text-decoration: none; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current] { color: var(--ink); border-color: var(--fire-2); }
.box { min-width: 0; margin-bottom: 18px; padding: clamp(16px, 2vw, 24px); background: var(--coal); border: 1px solid var(--line); }
.box h2 { margin-bottom: 12px; font-size: 20px; line-height: 1.25; letter-spacing: -.012em; }
.box > p:last-child { margin-bottom: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.grid-2 .box { margin-bottom: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 22px; border-block: 1px solid var(--line); }
.stat { padding: 18px 18px 18px 0; }
.stat + .stat { padding-left: 18px; border-left: 1px solid var(--line); }
.stat b { display: block; margin-bottom: 4px; font-size: clamp(30px, 3.4vw, 46px); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; }
.stat span { color: var(--ash); font-size: 14.5px; }
.next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; align-items: center; margin-bottom: 22px; padding: 18px 20px; background: var(--coal-2); border-left: 3px solid var(--fire-2); }
.next h2 { margin-bottom: 4px; font-size: 19px; line-height: 1.25; letter-spacing: -.01em; }
.next p { margin: 0; color: var(--soft); font-size: 15px; }
.steps-mini { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 22px; padding: 0; list-style: none; font-size: 14.5px; color: var(--ash); }
.steps-mini li { display: flex; align-items: center; gap: 7px; }
.steps-mini li::before { content: ''; width: 9px; height: 9px; border: 1.5px solid var(--line-2); border-radius: 50%; }
.steps-mini li.done { color: var(--soft); }
.steps-mini li.done::before { background: var(--ok); border-color: var(--ok); }
.token-row { display: flex; gap: 8px; align-items: stretch; }
.token-row input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; }
.code-block { padding: 13px 15px; background: var(--black); color: var(--soft); }
.range { display: inline-flex; border: 1px solid var(--line-2); }
.range button { min-height: 36px; padding: 5px 13px; background: none; border: 0; color: var(--ash); font: 500 14px var(--sans); cursor: pointer; }
.range button[aria-pressed="true"] { background: var(--ink); color: var(--black); }
.chart { position: relative; width: 100%; }
.chart svg { width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.chart-tip { position: absolute; z-index: 5; pointer-events: none; padding: 7px 10px; background: var(--black); border: 1px solid var(--line-2); font-size: 13px; white-space: nowrap; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; color: var(--ash); font-size: 13.5px; }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; }
.bars { display: grid; gap: 10px; font-size: 14.5px; }
.bar-row { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 10px; align-items: center; }
.bar-track { display: flex; gap: 2px; align-items: center; }
.bar-seg { height: 14px; }
.bar-seg:last-of-type { border-radius: 0 4px 4px 0; }
.bar-val { margin-left: 8px; color: var(--ash); font-size: 13.5px; }
details.more summary { margin-top: 10px; color: var(--ash); font-size: 14px; cursor: pointer; }
.empty { padding: clamp(22px, 3vw, 36px); border: 1px dashed var(--line-2); }
.empty h2 { margin-bottom: 8px; font-size: 26px; line-height: 1.15; }
.lic-table a { color: var(--ink); font-weight: 600; text-decoration: none; }
.lic-table a:hover { color: var(--fire-1); }
.radar-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 15.5px; }
.verify { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 340px); align-items: center; gap: clamp(32px, 6vw, 96px); min-height: min(68vh, 640px); padding: clamp(48px, 7vw, 96px) var(--gutter); overflow: hidden; border-bottom: 1px solid var(--line); }
.verify-state { display: flex; align-items: center; gap: 10px; margin: 0 0 clamp(18px, 2.4vw, 28px); color: var(--ash); font-size: 17px; font-weight: 500; }
.verify-state::before { content: ''; flex: none; width: 22px; height: 22px; border: 1.5px solid var(--line-2); border-radius: 50%; background: center / 12px no-repeat; }
.verify[data-state="loading"] .verify-state::before { border-top-color: var(--soft); animation: verify-spin .9s linear infinite; }
.verify[data-state="verified"] .verify-state { color: var(--ok); }
.verify[data-state="verified"] .verify-state::before { border-color: var(--ok); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4 4.8 9 10 3.2' fill='none' stroke='%2337d992' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.verify[data-state="unverified"] .verify-state { color: var(--bad); }
.verify[data-state="unverified"] .verify-state::before { border-color: var(--bad); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3 9 9M9 3 3 9' fill='none' stroke='%23ff5a5a' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.verify h1 { max-width: 18ch; font-size: clamp(38px, 6vw, 84px); overflow-wrap: anywhere; }
.verify[data-state="unverified"] h1, .verify[data-state="error"] h1 { font-size: clamp(32px, 4.4vw, 60px); }
.verify-rows { max-width: 620px; margin: clamp(30px, 4vw, 48px) 0 0; }
.verify-rows > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 16px; }
.verify-rows > div:last-child { border-bottom: 1px solid var(--line); }
.verify-rows dt { color: var(--ash); }
.verify-rows dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.verify-note { max-width: 58ch; margin: 22px 0 0; color: var(--soft); font-size: 16px; }
.verify .btn { margin-top: 26px; }
.verify-seal { width: 100%; clip-path: inset(22%); transform: scale(1.55); mix-blend-mode: lighten; transition: filter .3s, opacity .3s; }
.verify[data-state="loading"] .verify-seal, .verify[data-state="error"] .verify-seal { opacity: .35; filter: grayscale(1); }
.verify[data-state="unverified"] .verify-seal { opacity: .22; filter: grayscale(1); }
.verify-facts .compare { margin-top: 0; }
.verify-facts h2 { margin-bottom: 14px; font-size: 22px; line-height: 1.25; letter-spacing: -.012em; }
@keyframes verify-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .verify[data-state="loading"] .verify-state::before { animation: none; }
  .verify-seal { transition: none; }
}
@media (max-width: 760px) {
  .verify { display: block; min-height: 0; }
  .verify-seal { display: none; }
  .verify-rows > div { grid-template-columns: 104px minmax(0, 1fr); }
}

@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-menu { display: block; }
  .nav-menu summary { display: grid; gap: 6px; width: 38px; height: 38px; place-content: center; }
  .nav-menu summary span { display: block; width: 20px; height: 1.5px; background: var(--ink); }
  .nav-menu[open] nav { position: absolute; top: 100%; left: 0; right: 0; display: grid; gap: 0; background: var(--black); border-block: 1px solid var(--line); }
  .nav-menu[open] nav a { padding: 15px var(--gutter); border-top: 1px solid var(--line); font-size: 18px; }
  .nav-menu[open] nav a:first-child { border-top: 0; }
  .nav-end { gap: 12px; }
  .nav-link { display: none; }
  .hero, .demo-out, .split, .secured, .feat-grid, .conf, .grid-2, .tile-list li { grid-template-columns: minmax(0, 1fr); }
  .hero { min-height: 0; align-items: start; }
  .secured-side img.sello { margin-left: 0; }
  .split-art { border-right: 0; border-bottom: 1px solid var(--line); min-height: 340px; }
  .row { grid-template-columns: minmax(0, 1fr); }
  .row-art { display: none; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(3) { padding-left: 0; border-left: 0; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid > div:nth-child(2) { border-right: 0; }
  .footer-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--bone-line); }
  .feat-wrap, .docs { grid-template-columns: minmax(0, 1fr); }
  .feat-index, .docs-nav { position: static; display: flex; flex-wrap: wrap; gap: 2px 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .feat-main, .docs main { border-left: 0; padding-left: 0; }
  .feat { padding-left: 0; }
  .conf-opts { padding-right: 0; }
  .conf-out { position: static; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .side-foot { margin-top: 0; }
  .fieldset-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .beta-tag { display: none; }
  .btn-small { padding-inline: 12px; }
  .rule-row { grid-template-columns: minmax(0, 1fr); }
  .presets { grid-template-columns: minmax(0, 1fr); }
  .next { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .demo { transition: none; }
}
@media (forced-colors: active) {
  .bar-seg { background: CanvasText !important; }
  .btn { border: 1px solid ButtonText; clip-path: none; }
}

/* Docs home */
.doc-list { margin: 28px 0; border-bottom: 1px solid var(--line); }
.doc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 4px 24px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); text-decoration: none; }
.prose .doc-row { color: var(--ink); }
.prose .doc-row h2 { margin: 0; font-size: 20px; }
.doc-row p { margin: 0; color: var(--soft); font-size: 15.5px; }
.doc-row:hover h2 { color: var(--fire-1); }
@media (max-width: 620px) { .doc-row { grid-template-columns: minmax(0, 1fr); } }