@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-latin-500-normal.woff2') format('woff2');}
:root{
  --bg:#0A0F0A; --bg-2:#0E150F; --surface:#111A13; --line:#1E2B21; --line-2:#2A3A2D;
  --text:#E6EDE7; --muted:#9BAA9E; --faint:#768A7B;
  --green:#22C55E; --green-hi:#4ADE80; --green-dim:#3E7A52; --green-wash:rgba(34,197,94,.08);
  --amber:#fbbf24; --red:#F87171; --ink:#04210F; --control-border:#8aa894;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:Inter,'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r:8px; --max:1160px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  --control-height-touch:44px; --radius-control:var(--r);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body:not(.shell) :is(h1,h2,h3,h4,h5,h6,[id]){scroll-margin-top:72px}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
code,kbd,pre,.mono{font-family:var(--mono);font-variant-ligatures:none;font-feature-settings:"calt" 0,"liga" 0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
a.sr:focus,a.sr:focus-visible{position:fixed;top:12px;left:12px;z-index:80;width:auto;height:auto;min-height:44px;margin:0;padding:12px 16px;overflow:visible;clip:auto;clip-path:none;white-space:normal;background:#0e150f;color:var(--text);border:1px solid var(--line-2);border-radius:8px;font:600 15px/1.2 var(--sans);text-decoration:none}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}

/* header. Only the page header sticks. A title block inside the page does not. */
body>header{position:sticky;top:0;z-index:10;background:rgba(10,15,10,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;min-block-size:4rem;flex-wrap:nowrap;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 18px var(--mono);color:var(--green);letter-spacing:-.01em;white-space:nowrap;flex:none}
.brand svg{width:30px;height:30px;flex:none}
.brand .cur{display:inline-block;width:8px;height:11px;flex:0 0 8px;overflow:hidden;background:var(--green);margin-left:2px;vertical-align:baseline;animation:blink 1.1s steps(1) infinite}
header nav{position:static;min-width:0;flex:1 1 auto;display:flex;justify-content:flex-end}
header nav ul{justify-content:flex-end}
.nav nav > ul{flex-wrap:nowrap}
nav ul{display:flex;align-items:center;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
nav a{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:8px;text-decoration:none;font:500 14px var(--mono);color:var(--muted)}
nav a:hover{color:var(--text);background:var(--surface)}
nav a.signin{color:var(--text);border:1px solid var(--line-2);margin-left:8px}
nav a.signin:hover{border-color:var(--green-dim)}
a.gh-star{gap:6px;white-space:nowrap}
a.gh-star .gh{width:16px;height:16px;flex:none;display:block}
a.gh-star .gh-count{color:var(--faint);font-variant-numeric:tabular-nums}
.nav-burger{display:none}
.nav-check{position:absolute;inset:0;width:44px;height:44px;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.nav-check:focus{outline:none}
.nav-burger:focus-within{outline:2px solid var(--green);outline-offset:3px;border-radius:8px}
.burger{position:relative;display:block;width:18px;height:2px;background:currentColor;border-radius:1px}
.burger::before,.burger::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;border-radius:1px}
.burger::before{top:-6px}
.burger::after{top:6px}
.nav-backdrop{display:none}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px;border-radius:8px;font:600 15px var(--mono);text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s}
.btn-primary{background:var(--green);color:#04210F}
.btn-primary:hover{background:var(--green-hi)}
.btn-ghost{border:1px solid var(--control-border);color:var(--text);background:var(--bg-2)}
.btn-ghost:hover{border-color:var(--green-dim)}
.btn-ghost .p{color:var(--green)}
a.btn[aria-busy="true"],button[aria-busy="true"]{cursor:progress;pointer-events:none}

/* hero */
.hero{position:relative;padding:88px 0 96px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(34,197,94,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(34,197,94,.05) 1px,transparent 1px);
  background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 30% 30%,#000,transparent);mask-image:radial-gradient(ellipse 70% 60% at 30% 30%,#000,transparent)}
.hero::after{content:"";position:absolute;left:-20%;top:-260px;width:140%;height:700px;background:radial-gradient(closest-side,rgba(34,197,94,.12),transparent);pointer-events:none}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:56px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:500 13px var(--mono);color:var(--muted);border:1px solid var(--line-2);border-radius:999px;padding:5px 12px 5px 10px;background:var(--bg-2)}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.18)}
h1{font:700 clamp(36px,5vw,58px)/1.06 var(--mono);letter-spacing:-.035em;margin:22px 0 0;color:#F2F7F3}
h1 em{font-style:normal;color:var(--green)}
.lede{font-size:18px;color:var(--muted);margin:22px 0 0;max-width:34em}
.lede code{color:var(--text);background:var(--surface);border:1px solid var(--line);padding:1px 6px;border-radius:6px;font-size:.88em}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.fine{margin-top:16px;font:13px var(--mono);color:var(--faint)}

/* terminal */
.term{background:#070B07;border:1px solid var(--line-2);border-radius:14px;box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(34,197,94,.04);overflow:hidden}
.term-bar{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.term-bar i{width:11px;height:11px;border-radius:50%;background:#253227}
.term-bar span{margin-left:10px;font:12px var(--mono);color:var(--faint)}
.term pre{margin:0;padding:20px 22px 24px;font:13px/1.7 var(--mono);color:var(--text);overflow-x:auto;min-height:440px}
.t-p{color:var(--green)} .t-ok{color:var(--green)} .t-d{color:var(--faint)} .t-m{color:var(--muted)}
.t-a{color:var(--amber)} .t-in{color:#7DD3FC} .t-h{color:#F2F7F3}
.caret{display:inline-block;width:.6em;height:1.15em;background:var(--green);vertical-align:-.22em;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.reveal{opacity:0;transition:opacity .25s}
.reveal.on{opacity:1}

/* sections */
section{padding:88px 0;border-top:1px solid var(--line)}
.kicker{font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
h2{font:700 clamp(26px,3.2vw,36px)/1.15 var(--mono);letter-spacing:-.03em;margin:12px 0 0;color:#F2F7F3}
.sub{color:var(--muted);margin:14px 0 0;max-width:40em}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;counter-reset:s}
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.step .n{font:600 13px var(--mono);color:var(--green)}
.step h3,.card h3{font:700 18px/1.3 var(--mono);margin:12px 0 8px;letter-spacing:-.01em}
.step p,.card p{margin:0;color:var(--muted);font-size:15px}
.step code{display:block;margin-top:18px;padding:10px 12px;border-radius:8px;background:#070B07;border:1px solid var(--line);font-size:12.5px;line-height:1.6;color:var(--text);white-space:pre-wrap;overflow-wrap:break-word}
.step code b{color:var(--green);font-weight:500}

.works{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.works .card{padding:22px}
.chip{display:inline-flex;align-items:baseline;gap:8px;font:600 15px var(--mono);color:var(--text)}
.chip::before{content:">";color:var(--green)}
.works p{margin-top:10px}
.works .card{display:flex;flex-direction:column;align-items:flex-start}
.works a{color:var(--green)}
.st{display:inline-block;font:600 11.5px var(--mono);letter-spacing:.04em;padding:2px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted);margin-bottom:12px}
.st-ok{color:var(--green);border-color:var(--green-dim);background:rgba(34,197,94,.08)}
.st-wip{color:var(--amber);border-color:rgba(251,191,36,.45);background:rgba(251,191,36,.07)}

table{width:100%;border-collapse:separate;border-spacing:0;margin-top:40px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:15px}
th,td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:baseline}
tr:last-child :is(td,th){border-bottom:0}
thead th{font:600 14px var(--mono);background:var(--bg-2);color:var(--text)}
thead th small{display:block;font-weight:400;color:var(--faint);margin-top:2px}
tbody th{font:500 14px var(--mono);color:var(--muted);width:22%;vertical-align:baseline}
thead th:not(:first-child){width:39%}
.doc article table:has(thead > tr > th:nth-child(4)) thead th:not(:first-child){width:auto}
tbody th[scope="row"]{width:auto;white-space:nowrap;overflow-wrap:normal;word-break:normal;vertical-align:baseline}
.doc article table:has(thead > tr > th:nth-child(2):last-child) thead th:first-child,
.doc article table:has(thead > tr > th:nth-child(2):last-child) tbody th{width:35%}
.doc article table:has(thead > tr > th:nth-child(2):last-child) thead th:last-child{width:65%}
td{color:var(--text)}
td .y{color:var(--green);font-family:var(--mono)}
td code{font-size:13.5px;color:var(--green)}
code .flag{white-space:nowrap}
.col-hi{background:rgba(34,197,94,.035)}

.pricing{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:20px;margin-top:40px;align-items:stretch;min-width:0}
.plan{min-width:0}
.plan .price{font:700 40px var(--mono);letter-spacing:-.03em;margin:10px 0 2px;color:#F2F7F3;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:4px;max-width:100%}
.plan .price small{font-size:15px;font-weight:500;color:var(--faint);letter-spacing:0}
.plan .price s{white-space:nowrap;text-decoration-thickness:2px}
.beta{font-weight:600;color:var(--green);white-space:normal}
.plan .price .beta{font:600 16px/1.3 var(--sans);letter-spacing:0}
.plan .vat{margin:0;font:13px/1.4 var(--sans);color:var(--faint)}
.plan ul{list-style:none;padding:0;margin:18px 0 0;font-size:15px;color:var(--muted)}
.plan li{padding:5px 0 5px 22px;position:relative}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--green);font-family:var(--mono)}
.plan.pro{border-color:var(--green-dim);background:linear-gradient(180deg,rgba(34,197,94,.07),var(--bg-2) 60%)}
.tag{font:600 12px var(--mono);color:var(--green);border:1px solid var(--green-dim);border-radius:999px;padding:2px 9px;margin-left:8px;vertical-align:2px}
.plan .btn{margin-top:22px;width:100%;max-width:100%;justify-content:center;white-space:normal;height:auto;min-height:48px;text-align:center}
.plan .btn .cmd{overflow-wrap:normal;word-break:normal;white-space:normal}
.plan .btn .pkg{white-space:nowrap}
.selfhost{background:transparent;border-style:dashed}
.note{margin-top:20px;display:flex;gap:10px;align-items:flex-start;font:13px/1.6 var(--mono);color:var(--muted)}
.note span{min-width:0}
.note b{color:var(--amber);font-weight:600}

.cookie-banner{position:fixed;z-index:40;left:var(--space-4);right:var(--space-4);bottom:var(--space-4);max-width:40rem;margin-inline:auto;min-width:0;background:var(--bg-2);color:var(--text);border:1px solid var(--control-border);border-radius:var(--r);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}
.cookie-banner p{margin:0;max-width:75ch}
.cookie-title{font-weight:600;font-family:var(--sans)}
.cookie-banner a{color:var(--green-hi);min-height:var(--control-height-touch);display:inline-flex;align-items:center}
.cookie-actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.cookie-actions .btn{flex:1 1 0;justify-content:center;min-width:var(--control-height-touch);min-height:var(--control-height-touch)}
.foot a[data-cookie-settings]{position:relative}
.foot a[data-cookie-settings]::after{content:"";position:absolute;left:0;right:0;top:50%;height:var(--control-height-touch);transform:translateY(-50%)}
footer{border-top:1px solid var(--line);padding:44px 0 56px;font:14px var(--mono);color:var(--faint)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:flex-start}
.foot ul{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;margin:0;padding:0}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--green)}
.legal{margin-top:28px;font-size:15px;line-height:1.55;color:var(--faint);max-width:70em}

@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr;gap:44px}
  .steps{grid-template-columns:1fr}
  .works{grid-template-columns:1fr 1fr}
  .pricing{grid-template-columns:1fr 1fr}
  .pricing .selfhost{grid-column:1/-1}
}
.foot a,.crumbs a,.card a,a[href*="github.com/telegraphic-dev/a2a-exposed/issues"]{display:inline-flex;align-items:center;min-height:44px}
.doc article :is(p,li,td,th) a:not(.btn){position:relative}
.doc article :is(p,li,td,th) a:not(.btn)::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
.card p a,.sub a{position:relative;display:inline;overflow-wrap:normal}
.card p a::after,.sub a::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
@media (max-width:919px){
  .nav{position:relative}
  .nav-burger{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;min-height:44px;padding:0;color:var(--text);border-radius:8px;cursor:pointer;z-index:3}
  .nav-burger:hover{background:var(--surface)}
  header nav{flex:none}
  .nav nav > ul{display:none}
  header:has(.nav-check:checked){height:auto;max-height:none;overflow:visible;background:#0a0f0a;backdrop-filter:none;z-index:40}
  header:has(.nav-check:checked) .nav{flex-wrap:wrap;height:auto;min-block-size:auto;max-height:none;overflow:visible}
  header:has(.nav-check:checked) .brand{min-height:56px}
  header:has(.nav-check:checked) .nav-burger{position:absolute;top:10px;right:28px}
  header:has(.nav-check:checked) nav{flex:1 1 100%;display:flex;flex-direction:column;align-items:stretch}
  header nav:has(.nav-check:checked) > ul{display:flex;position:relative;z-index:2;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:4px;width:100%;margin:0;padding:8px 0 16px;background:#0a0f0a;border-top:1px solid var(--line);justify-content:flex-start}
  header nav:has(.nav-check:checked) .burger{background:transparent}
  header nav:has(.nav-check:checked) .burger::before{top:0;transform:rotate(45deg)}
  header nav:has(.nav-check:checked) .burger::after{top:0;transform:rotate(-45deg)}
  header:has(.nav-check:checked) .nav-backdrop{display:block;position:absolute;z-index:1;left:0;right:0;top:100%;height:100vh;cursor:pointer}
  .nav nav a{display:flex;width:100%;min-height:44px;justify-content:flex-start;padding:0 20px}
  .nav nav a.signin{margin-left:0}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  header:has(.nav-check:checked) .nav-burger{right:20px}
  .hide-xs{display:none}
  .brand{font-size:16px} .brand svg{width:26px;height:26px}
  .hero{padding:56px 0 64px}
  .lede{font-size:16.5px}
  .ctas .btn{width:100%;justify-content:center;white-space:normal;height:auto;min-height:48px;padding-top:12px;padding-bottom:12px}
  .term pre{padding:16px;min-height:0;font-size:0;line-height:0;white-space:pre-wrap;overflow-wrap:anywhere}
  .term pre span{font-size:11.5px;line-height:1.7}
  .reveal:not(.on){display:none}
  section{padding:64px 0}
  .works,.pricing{grid-template-columns:1fr}
  .card,.step,.doc article,td,code,.mono{overflow-wrap:anywhere}
  td code{white-space:normal;overflow-wrap:break-word}
  table,thead,tbody,tr,th,td{display:block}
  thead{display:none}
  table{border:0;margin-top:28px}
  tbody tr{border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;background:var(--bg-2);overflow:hidden}
  tbody td{padding:8px 16px;border:0;color:var(--text)}
  tbody th,tbody tr > :first-child{width:auto;padding:12px 16px 4px;border:0;color:var(--green);font:600 14px var(--mono)}
  tbody td:last-child{padding-bottom:14px}
  tbody td[data-label]::before,tbody td[data-l]::before{display:block;margin-bottom:2px;font:500 12.5px var(--mono);color:var(--faint)}
  tbody td[data-label]::before{content:attr(data-label)}
  tbody td[data-l]::before{content:attr(data-l)}
  .col-hi{background:transparent}
}
@media (min-width:641px){
  td code{white-space:normal;overflow-wrap:break-word}
}
pre,pre *,code,.mono{font-variant-ligatures:none !important;font-feature-settings:"calt" 0,"liga" 0 !important}
.t-faint{color:var(--faint)}
@media (prefers-reduced-motion:reduce){.caret,.brand .cur{animation:none}.reveal,.reveal:not(.on){display:inline;opacity:1;transition:none}}

/* Shared navbar. Menu through 920px; links inline from 921px. */
header.app-header{position:sticky;top:0;z-index:30;display:block;width:100%;height:56px;margin:0;padding:0;box-sizing:border-box;background:rgba(10,15,10,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.app-header .nav{display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:8px;height:55px;min-block-size:0;padding-top:0;padding-bottom:0}
header.app-header .brand{flex:none;min-width:0;min-height:var(--control-height-touch);gap:10px;color:var(--green);font:700 18px/1 var(--mono)}
header.app-header .brand img{width:30px;height:30px;flex:none}
header.app-header .brand-name{display:inline-flex;align-items:center;overflow:visible;text-overflow:clip;white-space:nowrap}
header.app-header .nav-menu{display:none;margin:0}
header.app-header .nav-toggle{display:none}
header.app-header .nav-toggle::-webkit-details-marker{display:none}
header.app-header .app-nav{display:flex;flex:1 1 auto;align-items:center;justify-content:flex-end;gap:4px;min-width:0}
header.app-header .app-nav a{display:inline-flex;align-items:center;width:auto;min-height:44px;padding:0 12px;border-radius:8px;background:transparent;color:#4ade80;font:500 15px/1.2 var(--sans);text-decoration:none}
header.app-header .app-nav a:hover,header.app-header .app-nav a:focus-visible{background:transparent;color:#4ade80;text-decoration:underline;text-underline-offset:.18em}
header.app-header .app-nav a[aria-current="page"]:hover,header.app-header .app-nav a[aria-current="page"]:focus-visible{background:rgba(230,237,231,.08);color:var(--text)}
header.app-header .app-nav a.button.primary{height:var(--control-height-touch);min-height:var(--control-height-touch);padding:0 var(--space-4);border:1px solid transparent;border-radius:var(--radius-control);background:var(--green);color:var(--ink);font:600 15px/1 var(--sans);text-decoration:none}
header.app-header .app-nav a.button.primary:hover,header.app-header .app-nav a.button.primary:focus-visible{background:var(--green-hi);color:var(--ink);text-decoration:none;filter:none}
header.app-header .account-button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--text);cursor:pointer}
header.app-header .account-button:hover,header.app-header .account-button:focus-visible{background:rgba(230,237,231,.08)}
header.app-header .photo{width:32px;height:32px;border-radius:999px;background:var(--line);display:inline-flex;align-items:center;justify-content:center;overflow:hidden;object-fit:cover;font:600 14px/1 var(--sans);color:var(--text)}
header.app-header .menu-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
header.app-header .account-menu{position:relative}
header.app-header .account-menu > div{position:absolute;right:0;z-index:2;min-width:14rem;padding:12px 16px;background:#0e150f;border:1px solid var(--line);border-radius:8px}
header.app-header .account-menu > div a{display:inline-flex;align-items:center;min-height:44px;color:var(--green-hi);font:500 15px/1.2 var(--sans);text-decoration:none}
header.app-header .account-menu > div a:hover,header.app-header .account-menu > div a:focus-visible{background:transparent;color:var(--green-hi);text-decoration:underline;text-underline-offset:.18em}
header.app-header .account-menu button.sign-out{display:flex;width:100%;justify-content:center;align-items:center;box-sizing:border-box;min-height:44px;margin-top:8px;padding:.4rem .75rem;background:transparent;color:var(--text);border:1px solid var(--control-border);border-radius:8px;font:inherit;font-weight:600;cursor:pointer}
header.app-header .nav-toggle,header.app-header .app-nav > a[href="/app"]{position:relative;padding-right:2rem}
header.app-header .nav-count{position:absolute;top:50%;right:2px;display:inline-flex;align-items:center;justify-content:center;min-width:1rem;height:1rem;margin:0;padding:0 .12rem;border-radius:999px;background:var(--amber);color:var(--bg);font:700 11px/1 var(--sans);transform:translateY(-50%)}
header.app-header .nav-menu[open] > .nav-toggle .nav-count{display:none}
svg[hidden]{display:none}
h1{overflow-wrap:anywhere}
@media (max-width:920px){
  header.app-header{height:56px;min-height:56px;max-height:56px}
  header.app-header .nav{flex-wrap:nowrap;gap:4px;height:55px;min-height:0;max-height:55px}
  header.app-header .nav > noscript{flex:1 0 100%;min-width:0}
  header.app-header .nav > noscript form,header.app-header .nav > noscript p{margin:0}
  header.app-header .nav > noscript button.sign-out{width:auto;max-width:100%}
  header.app-header .nav-menu{display:block;margin-left:auto;width:max-content;flex:none}
  header.app-header .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:44px;height:44px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--text);font:500 15px/1 var(--sans);cursor:pointer;list-style:none}
  header.app-header .nav-toggle{width:auto;min-width:44px;flex:none}
  header.app-header .nav-toggle:hover,header.app-header .nav-toggle:focus-visible{background:rgba(230,237,231,.08)}
  header.app-header .app-nav{display:none}
  header.app-header .nav-menu[open] ~ .app-nav{display:flex;flex-direction:column;align-items:stretch;position:absolute;top:56px;left:0;right:0;width:100%;z-index:40;box-sizing:border-box;background:#0e150f;border:1px solid var(--line-2);border-top:0;border-radius:0 0 12px 12px;box-shadow:0 16px 28px rgba(0,0,0,.45);padding:8px 20px 20px}
  header.app-header .nav-menu[open] ~ .app-nav a{width:100%}
  header.app-header .brand{font-size:16px;flex:none;overflow:visible}
  header.app-header .brand-name{overflow:visible;text-overflow:clip}
  header.app-header .brand img{width:26px;height:26px}
  header.app-header .account-menu{margin-left:0;flex:none}
  header.app-header .app-nav a.button.primary{height:44px;min-height:44px}
}
@media (max-width:360px){
  header.app-header .wrap{padding-left:12px;padding-right:12px}
  header.app-header .nav{gap:0}
  header.app-header .brand{gap:4px;margin-right:14px;font-size:12px}
  header.app-header .brand img{width:18px;height:18px}
  header.app-header .nav-toggle{padding-left:0;padding-right:1.25rem}
}
@media (min-width:921px){
  header.app-header .nav-toggle,header.app-header .nav-menu{display:none}
  header.app-header .app-nav{display:flex}
}
@media (max-width:640px){
  header.app-header .nav-toggle{width:auto;min-width:44px;flex:none}
  header.app-header .nav-menu[open] > .nav-toggle{margin-left:4px}
  header.app-header .brand{box-sizing:border-box;min-height:44px;padding-top:9px;padding-bottom:9px}
  header.app-header .nav-menu[open] ~ .app-nav{padding-left:20px;padding-right:20px}
  header.app-header .nav-menu[open] ~ .app-nav a:not(.button){padding-left:0;padding-right:0}
  .foot{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px 0}
  .foot ul,.foot nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;width:100%;margin:0;padding:0}
  .foot a{display:inline-flex;align-items:center;justify-content:flex-start;box-sizing:border-box;min-width:44px;min-height:44px;margin:0;padding:10px 4px;font-size:14px}
  .crumbs a{display:inline-flex;align-items:center;justify-content:flex-start;box-sizing:border-box;min-width:44px;min-height:44px;margin:0 -8px;padding:10px 8px;font-size:12.5px}
  .crumbs{display:flex;flex-wrap:wrap;align-items:center;column-gap:0;row-gap:2px}
  .crumb-current{flex:1 1 100%;min-width:0;overflow-wrap:anywhere}
  .crumb-sep{margin:0 6px;color:var(--faint)}
  .doc article :is(p,li) a:not(.btn){display:inline;padding:0;margin:0;text-align:start}
  .doc article li > a:only-child:not(.btn){display:inline-flex;align-items:center;box-sizing:border-box;min-width:44px;min-height:44px;padding:0;margin:0}
  .doc article li > a:only-child:not(.btn)::after{content:none}
}
.crumb-sep{margin:0 6px;color:var(--faint)}
.table-scroll{display:block;width:100%;max-width:100%;min-width:0;overflow-x:auto}
.table-scroll>table{width:max-content;min-width:100%}
.table-scroll:focus-visible,.code-scroll:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.table-scroll.can-scroll::after{content:"Scroll sideways";display:block;margin-top:var(--space-2);font:500 .8125rem/1.4 var(--sans);color:var(--muted)}
.doc article .copy-control{position:absolute;z-index:2;top:var(--space-2);right:var(--space-2);box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:var(--control-height-touch);min-width:var(--control-height-touch);max-width:var(--control-height-touch);height:var(--control-height-touch);min-height:var(--control-height-touch);margin:0;padding:0;color:var(--muted);background:transparent;border:1px solid transparent;border-radius:var(--radius-control);cursor:pointer}
.doc article .copy-control[hidden]{display:none}
.doc article .copy-control:hover{color:var(--text);background:var(--bg);border-color:var(--line-2)}
.doc article .copy-control:focus:not(:focus-visible){outline:none}
.doc article .copy-control:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.doc article .copy-control[data-state="copied"],.doc article .copy-control[data-state="failed"]{color:var(--text);background:transparent;border-color:transparent}
.doc article .copy-control .icon{flex:none}
.doc article .copy-control[data-state="copied"] .copy-text,.doc article .copy-control[data-state="failed"] .copy-text{position:absolute;top:calc(100% + var(--space-3));right:0;z-index:2;width:max-content;height:auto;margin:0;padding:var(--space-1) var(--space-2);overflow:visible;clip:auto;border:1px solid var(--line-2);border-radius:var(--radius-control);background:var(--bg);color:var(--text);font:500 14px/1.3 var(--sans);white-space:nowrap;text-align:left}
.doc article .table-scroll a{overflow-wrap:normal;word-break:normal}
a .ext{margin-left:.25em}
@media (max-width:375px){
  .pricing,.plan{min-width:0}
  .plan .btn{white-space:normal;max-width:100%;height:auto;min-height:48px}
}
@media (min-width:641px){
  .table-scroll{overflow-x:auto;min-width:0}
  .table-scroll>table{width:100%;min-width:0}
  .doc article .table-scroll{width:min(calc(var(--max) - 56px), calc(100vw - 56px));max-width:none}
  .doc article .table-scroll a{white-space:nowrap}
}
@media (max-width:640px){
  .table-scroll{overflow-x:visible}
  .table-scroll>table{width:100%;min-width:0}
  .table-scroll::after{content:none}
}

/* Article pages. The homepage keeps the mockup's section layout. */
body:not(.shell) .doc :is(h1,h2,h3,h4,h5,h6,[id]){scroll-margin-top:72px}

.doc{padding:56px 0 88px}
.doc h1{font:700 clamp(32px,4vw,46px)/1.12 var(--mono);letter-spacing:-.03em;margin:16px 0 0;color:#F2F7F3}
.doc h2{font:700 clamp(22px,2.4vw,28px)/1.25 var(--mono);letter-spacing:-.02em;margin:40px 0 10px;color:#F2F7F3}
.doc h3{font:700 18px/1.35 var(--mono);margin:28px 0 8px;color:#F2F7F3}
.doc p,.doc li{color:var(--muted)}
.doc strong{color:var(--text);font-weight:600}
.doc article a{color:var(--green)}
.doc article a.btn{text-decoration:none}
.doc article a.btn-primary{color:#04210F}
.doc article a.btn-ghost{color:var(--text)}
.doc{min-width:0}
.doc article{max-width:44rem;min-width:0;overflow-wrap:anywhere}
.doc article code{color:var(--text);background:var(--surface);border:1px solid var(--line);padding:1px 6px;border-radius:6px;font-size:.88em}
.doc article pre{background:#070B07;border:1px solid var(--line-2);border-radius:12px;padding:16px 18px;overflow-x:auto}
.doc article .code-frame{position:relative;display:block;width:100%;max-width:100%;min-width:0;background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r)}
.doc article .code-frame pre{background:transparent;border:0;border-radius:0}
.doc article .code-scroll{display:block;width:100%;max-width:100%;min-width:0;overflow-x:auto}
.doc article .code-scroll>pre{overflow-x:visible;width:max-content;min-width:100%;max-width:none;margin:0}
.doc article .code-frame:has(.copy-control) .code-scroll{box-sizing:border-box;width:auto;margin-right:calc(var(--control-height-touch) + var(--space-2) + var(--space-2));padding-right:var(--space-2)}
.doc article pre code{background:none;border:0;padding:0;color:var(--text);font-size:13px;line-height:1.65}
.doc article td .st,.doc article th .st{margin:0}
.doc article blockquote{margin:20px 0;padding:12px 16px;border-left:3px solid var(--green-dim);background:var(--bg-2);border-radius:0 10px 10px 0;color:var(--muted)}
.doc article hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.crumbs{font:13px var(--mono);color:var(--faint)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--green)}
.crumb-current{color:var(--faint);min-width:0;overflow-wrap:anywhere}
.updated{margin:14px 0 0;font:13px var(--mono);color:var(--faint)}
.updated .stamp{white-space:nowrap}
.banner{margin-top:18px;border-radius:10px;padding:10px 14px;font:14px/1.5 var(--mono);border:1px solid var(--line-2);max-width:44rem}
.banner-ok{color:var(--green);border-color:var(--green-dim);background:rgba(34,197,94,.08)}
.banner-wip{color:var(--amber);border-color:rgba(251,191,36,.45);background:rgba(251,191,36,.07)}
.banner-no{color:var(--muted);background:var(--bg-2)}
.status-ok{color:var(--green)}
.status-bad{color:var(--amber)}
.doc article ul,.doc article ol{padding-left:1.2em}
.doc article li{margin:6px 0}
.doc article table{font-size:14.5px}

/* /app is rendered by control and links /site.css last. These beat app.css's narrow column. */
body.shell{max-width:none;padding:0 0 4rem}
body.shell header{margin:0;padding-bottom:0;border-bottom:1px solid var(--line)}
body.shell main{max-width:32rem;margin:0 auto;padding:56px 28px 0}
/* v0.7.25 sets body:has(.setup){width:min(45rem,100%)} and floors .setup at 40rem.
   body.shell only cleared max-width, and body{margin:0} drops the centred margin, so the banner and header sat in a left-hand 45rem column.
   The shell stays the full window. The setup page's main is a centred 45rem (720px) column. min-width:0 lets that column shrink under 40rem. */
body.shell:has(.setup){width:100%;max-width:none}
body.shell main:has(.setup){max-width:45rem}
body.shell .setup{min-width:0;width:100%;max-width:100%}
/* v0.7.27 lists the inbox wizard in ol.steps. The homepage .steps rule is a three-column grid and loads after app.css. */
body.shell .setup .steps{display:block;gap:0;margin-top:0;counter-reset:none}
body.shell main,body.shell main h1{min-width:0;max-width:100%}
body.shell main h1{font:700 clamp(28px,4vw,40px)/1.15 var(--mono);letter-spacing:-.03em;margin:0 0 1.25rem;color:#F2F7F3;overflow-wrap:anywhere}
body.shell footer{margin-top:4rem}
body.shell .foot nav{display:flex;flex-wrap:wrap;gap:6px 22px}
body.shell .foot a{min-height:44px}
/* app.css does not size inputs. The short pill and the label sitting on the field were this overlay. */
body.shell form label{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%}
body.shell input:not([type="hidden"]),
body.shell select{box-sizing:border-box;display:block;width:100%;min-height:48px;height:auto;padding:12px 14px;font:600 15px/1.2 var(--font);color:var(--text);background:var(--bg-2);border:1px solid var(--control-border);border-radius:8px}
body.shell header .nav-check{position:absolute;inset:0;box-sizing:border-box;display:block;width:44px;height:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:0;background:transparent;font-size:16px;opacity:0;cursor:pointer}
body.shell .providers{margin-top:8px}
body.shell .account-legal a{position:relative}
body.shell .account-legal a::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
body.shell button.provider{font-family:var(--sans)}
body.shell input[type="email"]{width:100%;min-height:48px;font-size:16px}
body.shell button.provider-email{color:var(--text);background:transparent;border:1px solid var(--control-border)}
body.shell button.provider-email:hover:not(:disabled):not([aria-disabled="true"]){background:var(--hover-wash);color:var(--text)}
body.shell button.secondary{color:var(--text);background:transparent;border:1px solid var(--control-border)}
body.shell .status-banner{margin:1rem 0;padding:.9rem 1rem;border:1px solid var(--green-dim);border-radius:8px;background:rgba(34,197,94,.08);color:var(--green)}
body.shell button.button.primary,
body.shell .wake button.button.primary{min-height:40px;color:var(--ink);background:var(--accent);border:1px solid transparent;border-radius:8px;padding:.6rem 1.1rem}
/* The owner token and its Copy button share one row. The input shrinks; the button stays as wide as its label. */
body.shell .token .token-actions{display:flex;flex-wrap:nowrap;gap:.75rem;align-items:center;min-width:0}
body.shell .token .token-value{flex:1 1 auto;min-width:0;width:auto;max-width:100%}
body.shell .token .copy-token{flex:none;width:auto;white-space:nowrap}
body.shell pre{overflow-wrap:anywhere;white-space:pre-wrap;background:var(--bg-2);color:var(--text);border:1px solid var(--control-border);border-radius:8px}
body.shell .overview,
body.shell .peers,
body.shell .records{overflow-wrap:anywhere}
body.shell .overview h2,
body.shell .peers h2,
body.shell .records h2,
body.shell .wake h2{font:700 20px/1.3 var(--mono);letter-spacing:-.02em;margin:48px 0 12px;padding-top:16px;border-top:1px solid var(--green-dim);color:#F2F7F3}
body.shell .overview h3,
body.shell .peers h3,
body.shell .records h3,
body.shell .advanced h3{font:700 16px/1.35 var(--mono);margin:24px 0 8px;color:#F2F7F3}
body.shell .overview dl,
body.shell .peers dl,
body.shell .records dl{margin:0}
body.shell .peers .confirm,
body.shell .records .confirm,
body.shell .overview .confirm{margin:var(--space-4) 0;padding:var(--space-4) var(--space-5);background:var(--bg-2);color:var(--text);border:1px solid var(--control-border);border-radius:var(--radius-control)}
body.shell section.advanced #rotate-confirm,
body.shell .agent-page #rotate-confirm{margin:var(--space-4) 0;padding:var(--space-4) var(--space-5);background:var(--bg-2);color:var(--text);border:1px solid var(--control-border);border-radius:var(--radius-control)}
body.shell .peers article > form > button.danger:not(.fill),
body.shell .records article > form > button.danger:not(.fill){min-height:44px}
body.shell .peers .alert[role="status"],
body.shell .records .alert[role="status"]{background:rgba(34,197,94,.08);color:var(--green);border-color:var(--green-dim)}
body.shell .peers .actions form,
body.shell .peers article > form,
body.shell .records article > form{margin:0}
@media (max-width:640px){
  body.shell .wake-actions,
  body.shell .wake-actions form,
  body.shell .wake-actions button{width:100%}
  body.shell .overview button.button.primary,
  body.shell .records button.button.primary{width:100%}
  body.shell .overview .token .copy-token,
  body.shell .records .token .copy-token{width:auto;flex:none}
  body.shell .peers .actions{flex-direction:column;align-items:stretch}
  body.shell .peers .actions button,
  body.shell .peers article > form button{width:100%}
}