/* kit.css: shared design kit for the swarm product sites. Rules and tokens: DESIGN.md.
   Lives at /kit/kit.css with fonts in /kit/fonts/. Brand: <html data-brand="slug">. No build step, no external requests. */

@font-face{font-family:"Geist";src:url(fonts/Geist-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(fonts/GeistMono-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}

/* ---------- Tokens: light (default) ---------- */
:root{
  color-scheme:light;
  /* surfaces and text */ --bg:#F7F6F2;--surface:#FFFFFF;--sunk:#EFEEE8;--fg:#1B1B18;--muted:#63625B;
  /* lines and states */ --line:#E2E0D8;--line-strong:#CFCCC3;--field-line:#8C8980;--hover:rgb(27 27 24/.045);--press:rgb(27 27 24/.08);
  /* meaning */ --ok:#037735;--warn:#915B02;--bad:#C32928;--info:#0069B7;
  /* accent: brand pairs below set -l and -d */ --accent-l:#1B1B18;--accent-d:#EDEDE8;--on-accent-l:#FFFFFF;--on-accent-d:#141412;--accent:var(--accent-l);--on-accent:var(--on-accent-l);
  --shadow:0 1px 2px rgb(27 27 24/.05),0 6px 20px -10px rgb(27 27 24/.12);
  /* code blocks stay dark in both themes */ --code-bg:#161614;--code-fg:#E8E7E1;--code-muted:#A09F97;--code-str:#A6D99E;--code-key:#F2C46B;--code-line:#2C2C29;
  --font:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  /* space and radius scale (strict) */ --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--r1:4px;--r2:8px;--r3:12px;
  --w:1080px;--measure:68ch;--sun:0;--moon:1;
  /* motion tiers from Fluid Functionalism; exits one tier quicker, easing in */
  --fast:80ms;--mod:160ms;--slow:240ms;--fast-x:60ms;--mod-x:120ms;--slow-x:160ms;--ease:cubic-bezier(.23,1,.32,1);--ease-in:cubic-bezier(.4,0,1,1);
}

/* ---------- Tokens: dark. Keep both dark blocks identical; scripts/contrast.mjs checks. ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#121211;--surface:#1B1B19;--sunk:#0C0C0B;--fg:#EDEDE8;--muted:#A3A29A;
  --line:#2A2A27;--line-strong:#3A3A36;--field-line:#6E6D66;--hover:rgb(237 237 232/.06);--press:rgb(237 237 232/.1);
  --ok:#57C274;--warn:#EB9D2D;--bad:#FF8D81;--info:#66B3FF;
  --accent:var(--accent-d);--on-accent:var(--on-accent-d);--sun:1;--moon:0;
  --shadow:0 0 0 1px rgb(0 0 0/.2),0 8px 24px -12px rgb(0 0 0/.7);--code-bg:#0C0C0B;--code-line:#262623;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#121211;--surface:#1B1B19;--sunk:#0C0C0B;--fg:#EDEDE8;--muted:#A3A29A;
    --line:#2A2A27;--line-strong:#3A3A36;--field-line:#6E6D66;--hover:rgb(237 237 232/.06);--press:rgb(237 237 232/.1);
    --ok:#57C274;--warn:#EB9D2D;--bad:#FF8D81;--info:#66B3FF;
    --accent:var(--accent-d);--on-accent:var(--on-accent-d);--sun:1;--moon:0;
    --shadow:0 0 0 1px rgb(0 0 0/.2),0 8px 24px -12px rgb(0 0 0/.7);--code-bg:#0C0C0B;--code-line:#262623;
  }
}

/* ---------- Brands: one accent pair each (light, dark). On <html> only. ---------- */
[data-brand="txsqueeze"]{--accent-l:#017365;--accent-d:#4AD0BA}
[data-brand="perpledger"]{--accent-l:#066F8D;--accent-d:#3CC5F2}
[data-brand="safebump"]{--accent-l:#5459C9;--accent-d:#9EA9FE}
[data-brand="nocomment"]{--accent-l:#826104;--accent-d:#FDC010}
[data-brand="contractlens"]{--accent-l:#A636A0;--accent-d:#F582ED}
[data-brand="onekeyaway"]{--accent-l:#4E7100;--accent-d:#9CD242}
[data-brand="plainchain"]{--accent-l:#1B1B18;--accent-d:#EDEDE8}
[data-brand="pitcrew"]{--accent-l:#B34100;--accent-d:#FF9369}
[data-brand="mailferret"]{--accent-l:#8E5A27;--accent-d:#E4AA77}
[data-brand="inboxpass"]{--accent-l:#245FD4;--accent-d:#86B1FF}
[data-brand="quotatrace"]{--accent-l:#7C49C9;--accent-d:#BC9CFF}
[data-brand="submitcheck"]{--accent-l:#027634;--accent-d:#5CD07C}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:84px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.6 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
[hidden]{display:none!important}
img,video{max-width:100%;height:auto}
::selection{background:color-mix(in srgb,var(--accent) 24%,transparent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-weight:600;font-size:28px;line-height:34px;letter-spacing:-.022em;margin-bottom:12px}
h3{font-size:18px;line-height:26px;margin:24px 0 8px}
:where(h2,h3):first-child{margin-top:0}
p,ul,ol,dl,pre,blockquote,figure,.table-wrap,.code{margin:0 0 16px}
:where(p,ul,ol,dl,pre,blockquote,figure,.table-wrap,.code,.callout):last-child{margin-bottom:0}
ul,ol{padding-left:1.3em}
li+li{margin-top:6px}
li::marker{color:var(--muted)}
strong,b{font-weight:600}
small,.small{font-size:14px;line-height:20px}
hr{border:0;border-top:1px solid var(--line);margin:32px 0}
a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);transition:text-decoration-color var(--fast),color var(--fast)}
a:hover{text-decoration-color:currentColor}
blockquote{padding:12px 16px;border-left:2px solid var(--line-strong);color:var(--muted)}
code,kbd,samp{font-family:var(--mono);font-size:.88em}
:not(pre)>code{padding:.1em .38em;border:1px solid var(--line);border-radius:4px;background:var(--sunk);overflow-wrap:anywhere}
pre{overflow-x:auto;padding:16px 18px;border:1px solid var(--code-line);border-radius:8px;background:var(--code-bg);color:var(--code-fg);font:13.5px/1.65 var(--mono);tab-size:2}
pre code{font-size:inherit}
.icon{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}

/* ---------- Utilities ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.muted{color:var(--muted)}
.mono{font-family:var(--mono);font-size:.92em}
.num{font-variant-numeric:tabular-nums}
.measure{max-width:var(--measure)}
.stack{display:grid;gap:16px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:16px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.skip{position:absolute;left:12px;top:-60px;z-index:20;padding:8px 12px;border-radius:8px;background:var(--fg);color:var(--bg)}
.skip:focus{top:12px}

/* ---------- Layout ---------- */
.wrap{width:min(100% - 48px,var(--w));margin-inline:auto}
.section{padding-block:72px;border-top:1px solid var(--line)}
.section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:24px}
.section-head h2{margin:0}
.section-head p{color:var(--muted);font-size:14px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px 48px;align-items:start}
.split>.section-head{flex-direction:column;align-items:flex-start;margin:0}
.ruled{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px 32px}
.ruled>*{padding-top:16px;border-top:1px solid var(--line-strong)}
.ruled h3{margin:0 0 6px;font-size:16px;line-height:22px}
.ruled p{color:var(--muted);font-size:15px;line-height:1.55}

/* Ruled frame: hairlines at the content edges on wide screens. */
@media (min-width:1200px){body{background:linear-gradient(var(--line),var(--line)) calc(50% - var(--w)/2 - 24px) 0/1px 100% no-repeat,linear-gradient(var(--line),var(--line)) calc(50% + var(--w)/2 + 24px) 0/1px 100% no-repeat,var(--bg)}}

/* ---------- Header and nav ---------- */
.site-header{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:24px;height:60px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--fg);font-size:17px;font-weight:600;letter-spacing:-.015em;text-decoration:none;white-space:nowrap}
.brand b{font-weight:inherit;color:var(--accent)}
.brand .mark,.mark{width:26px;height:26px;flex:none;display:block}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{display:inline-flex;align-items:center;height:34px;padding:0 10px;border-radius:8px;color:var(--muted);font-size:14px;text-decoration:none;white-space:nowrap;transition:color var(--fast),background-color var(--fast)}
.nav a:hover{color:var(--fg);background:var(--hover)}
.nav a[aria-current="page"]{color:var(--fg);box-shadow:inset 0 -2px 0 var(--accent);border-radius:8px 8px 0 0}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;flex:none;padding:0;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer;transition:color var(--fast),background-color var(--fast)}
.icon-btn:hover{color:var(--fg);background:var(--hover)}
.icon-btn .icon{width:18px;height:18px;stroke-width:1.5;transition:stroke-width var(--fast)}
.icon-btn:hover .icon{stroke-width:2}

/* Icon swap: two glyphs in one cell; arrivals take the fast tier, departures the quicker exit.
   The theme toggle reads --sun and --moon (1 shown, 0 hidden) from the theme tokens. */
.swap{display:grid}
.swap>*{grid-area:1/1;transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease),filter var(--fast) var(--ease)}
.swap>.i-done,[data-copied] .swap>.i-copy{opacity:0;transform:scale(.6);filter:blur(4px);transition-duration:var(--fast-x);transition-timing-function:var(--ease-in)}
[data-copied] .swap>.i-done{opacity:1;transform:none;filter:none}
.theme-toggle .i-sun,.theme-toggle .i-moon{--on:var(--sun);opacity:var(--on);transform:scale(calc(.6 + .4 * var(--on)));filter:blur(calc(4px - 4px * var(--on)))}
.theme-toggle .i-moon{--on:var(--moon)}

/* ---------- Hero ---------- */
.hero{padding-block:64px 56px}
.hero h1{max-width:21ch;font-size:clamp(34px,2.4vw + 18px,52px);line-height:1.04;font-weight:650;letter-spacing:-.032em}
.lead{max-width:60ch;margin-top:24px;color:var(--muted);font-size:19px;line-height:1.55}
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:24px;color:var(--muted);font-size:14px;line-height:20px}
.hero-meta>span{display:inline-flex;align-items:center;gap:6px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero .panel,.hero .agent,.hero .stats{margin-top:32px}
.hero .callout,.ruled+.callout,.table-wrap+.callout{margin-top:24px}

/* ---------- Buttons ---------- */
/* Surface sits 1px inside; a 1px spread fills it out. Press collapses the spread: 1px per side at any width. */
.btn{--b:var(--accent);--bf:var(--on-accent);--bn:var(--b);position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border:0;border-radius:8px;background:none;color:var(--bf);font:550 15px/1 var(--font);text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.btn::before{content:"";position:absolute;inset:1px;z-index:-1;border-radius:calc(8px - 1px);background:var(--bn);box-shadow:0 0 0 1px var(--bn);transition:box-shadow 180ms var(--ease),background-color var(--fast) ease}
.btn:hover{--bn:color-mix(in srgb,var(--b) 86%,var(--fg))}
.btn:active::before{box-shadow:0 0 0 0 var(--bn);transition-duration:var(--fast),var(--fast)}
.btn .icon{width:16px;height:16px;stroke-width:1.5;transition:stroke-width var(--fast)}
.btn:hover .icon{stroke-width:2}
.btn-secondary{--b:var(--surface);--bf:var(--fg)}
.btn-secondary::before{box-shadow:0 0 0 1px var(--line-strong)}
.btn-secondary:hover{--bn:color-mix(in srgb,var(--surface) 94%,var(--fg))}
.btn-secondary:active::before{box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn-ghost{--b:transparent;--bf:var(--fg)}
.btn-ghost:hover{--bn:var(--hover)}
.btn-sm{height:32px;padding:0 12px;font-size:13px;gap:6px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn[aria-busy="true"]{color:transparent;pointer-events:none}
.btn[aria-busy="true"]::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border-radius:50%;border:2px solid var(--bf);border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Free badge and status tags ---------- */
.free{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 8px;border-radius:999px;background:color-mix(in srgb,var(--ok) 11%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 32%,transparent);color:var(--fg);font-size:13px;font-weight:550;line-height:1;white-space:nowrap}
.free .icon{width:14px;height:14px;color:var(--ok);stroke-width:2.25}
.tag{--t:var(--muted);display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 7px;border-radius:4px;background:color-mix(in srgb,var(--t) 8%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t) 36%,transparent);color:var(--t);font:500 11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;vertical-align:middle}
.tag-ok{--t:var(--ok)} .tag-warn{--t:var(--warn)} .tag-bad{--t:var(--bad)} .tag-info{--t:var(--info)} .tag-accent{--t:var(--accent)}
.tag-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* ---------- Forms ---------- */
.field{display:grid;gap:6px;min-width:0}
.label{font-size:14px;line-height:20px;font-weight:550}
.hint{color:var(--muted);font-size:13px;line-height:18px}
.input,.select,.textarea{width:100%;min-width:0;height:40px;padding:0 12px;border:1px solid var(--field-line);border-radius:8px;background:var(--surface);color:var(--fg);font:400 15px/1.4 var(--font);transition:border-color var(--fast),box-shadow var(--fast)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--muted)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.input::placeholder,.textarea::placeholder{color:var(--muted)}
.input[aria-invalid="true"]{border-color:var(--bad)}
.input-mono{font-family:var(--mono);font-size:14px}
.textarea{height:auto;min-height:120px;padding:10px 12px;line-height:1.5;resize:vertical}
.select{width:auto;padding-right:34px;appearance:none;background:linear-gradient(45deg,transparent 50%,var(--muted) 50%) right 17px top 50%/5px 5px no-repeat,linear-gradient(135deg,var(--muted) 50%,transparent 50%) right 12px top 50%/5px 5px no-repeat,var(--surface)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--accent);width:16px;height:16px}
.form-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px}
.form-row>.grow{flex:1 1 260px}
.form-note{margin-top:12px;color:var(--muted);font-size:13px;line-height:18px}
.dropzone{position:relative;display:grid;place-items:center;gap:6px;min-height:168px;padding:24px;border:1.5px dashed var(--field-line);border-radius:8px;background:var(--sunk);color:var(--muted);text-align:center;font-size:14px;transition:border-color var(--fast),background-color var(--fast)}
.dropzone strong{color:var(--fg);font-size:16px;font-weight:550}
.dropzone .icon{width:22px;height:22px;color:var(--accent);stroke-width:1.5}
.dropzone:hover,.dropzone.is-over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.dropzone:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.dropzone input[type="file"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}

/* ---------- Tool panel and results ---------- */
.panel{border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
.panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:14px 20px;border-bottom:1px solid var(--line)}
.panel-head h2,.panel-head h3{margin:0;font-size:16px;line-height:22px;letter-spacing:-.005em}
.panel-head .meta{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font:12px/16px var(--mono)}
.panel-head .meta .icon{width:14px;height:14px}
.panel-body{padding:20px}
.panel-body.grid-2{gap:24px}
.result{padding:20px;border-top:1px solid var(--line)}
.result:empty{display:none}
.result-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.verdict{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:18px;font-weight:600;letter-spacing:-.01em}
.loading{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}
.loading::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid var(--line-strong);border-top-color:var(--accent);animation:spin .7s linear infinite}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;margin:0 0 16px;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--line)}
.stat{padding:14px 18px;background:var(--surface)}
.stat b{display:block;font-size:28px;line-height:34px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat span{display:block;color:var(--muted);font-size:13px;line-height:18px}
.stats:last-child{margin-bottom:0}

/* ---------- Tables ---------- */
.table-wrap{--e:color-mix(in srgb,var(--fg) 12%,transparent);overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:linear-gradient(90deg,var(--surface) 30%,transparent) left/40px 100% no-repeat local,linear-gradient(270deg,var(--surface) 30%,transparent) right/40px 100% no-repeat local,linear-gradient(90deg,var(--e),transparent) left/14px 100% no-repeat,linear-gradient(270deg,var(--e),transparent) right/14px 100% no-repeat,var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:14px;line-height:20px}
.table th,.table td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.table thead th{background:var(--sunk);color:var(--muted);font-size:13px;font-weight:550;white-space:nowrap}
.table tbody tr{transition:background-color var(--fast)}
.table tbody tr:hover{background:var(--hover)}
.table tbody tr:last-child>*{border-bottom:0}
.table .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.table .nowrap,.table td.mono{white-space:nowrap}
.table .sub{display:block;color:var(--muted);font-size:13px}
.trunc{display:inline-block;max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.table-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.table-tools .input{max-width:280px;height:36px}

/* ---------- Code and copy ---------- */
.code{position:relative;overflow:hidden;border:1px solid var(--code-line);border-radius:12px;background:var(--code-bg);color:var(--code-fg)}
.code pre{margin:0;border:0;border-radius:0;background:none;padding:16px 18px}
.code-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;padding:0 6px 0 16px;border-bottom:1px solid var(--code-line);color:var(--code-muted);font:12px/16px var(--mono)}
.code>.copy{position:absolute;top:8px;right:8px}
.code-wrap pre{white-space:pre-wrap;overflow-wrap:anywhere}
.c-mute,.c-prompt{color:var(--code-muted)} .c-str{color:var(--code-str)} .c-key{color:var(--code-key)} .c-acc{color:var(--accent-d)}
.c-prompt{user-select:none}
.copy{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px;border:0;border-radius:6px;background:none;color:var(--code-muted);font:12px/1 var(--mono);cursor:pointer;transition:color var(--fast),background-color var(--fast)}
.copy:hover{color:var(--code-fg);background:rgb(255 255 255/.08)}
.copy .icon{width:14px;height:14px;stroke-width:1.75}
.copy .lbl{display:grid}
.copy .lbl>*{grid-area:1/1}
.copy .lbl>:last-child,[data-copied] .lbl>:first-child{visibility:hidden}
[data-copied] .lbl>:last-child{visibility:visible}
.copy-light{color:var(--muted)}
.copy-light:hover{color:var(--fg);background:var(--hover)}

/* ---------- For AI agents: x402 block ---------- */
.agent{overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.agent-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.agent-head h2,.agent-head h3{margin:0 auto 0 0;display:flex;align-items:center;gap:10px;font-size:18px;line-height:26px}
.agent-head h2 .icon,.agent-head h3 .icon{width:20px;height:20px;color:var(--accent);stroke-width:1.5}
.agent-body{display:grid;gap:24px;padding:20px}
.agent-body>*{margin:0}
.agent-cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;align-items:start}
.agent .table-wrap{border-radius:8px}
.method{display:inline-block;min-width:3.6em;margin-right:8px;padding:2px 6px;border-radius:4px;background:var(--sunk);color:var(--muted);font:500 11px/16px var(--mono);letter-spacing:.04em;text-align:center}
.route{font-family:var(--mono);font-size:13px;white-space:nowrap}
.price{font-family:var(--mono);font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.price small{color:var(--muted);font-size:11px;margin-left:4px}
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 20px;margin:0;font-size:14px;line-height:20px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;overflow-wrap:anywhere}
.links{display:grid;gap:2px;padding:0;list-style:none}
.links li{margin:0}
.links a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;margin-inline:-10px;border-radius:8px;color:var(--fg);text-decoration:none;font-size:14px;transition:background-color var(--fast)}
.links a:hover{background:var(--hover)}
.links a span{color:var(--muted);font-family:var(--mono);font-size:12px}

/* ---------- Callout ---------- */
.callout{--t:var(--info);display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;margin:0 0 16px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--t) 30%,transparent);border-radius:8px;background:color-mix(in srgb,var(--t) 8%,var(--surface));font-size:15px;line-height:1.55}
.callout:not(:has(>.icon)){grid-template-columns:minmax(0,1fr)}
.callout>.icon{width:20px;height:20px;margin-top:2px;color:var(--t);stroke-width:1.75}
.callout p{margin:0}
.callout p+p{margin-top:6px}
.callout-ok{--t:var(--ok)} .callout-warn{--t:var(--warn)} .callout-bad{--t:var(--bad)} .callout-accent{--t:var(--accent)}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:0;padding:0;list-style:none;counter-reset:step}
.steps>li{margin:0;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--surface);counter-increment:step;font-size:15px;line-height:1.55}
.steps>li::before{content:counter(step,decimal-leading-zero);display:block;margin-bottom:12px;color:var(--accent);font:500 12px/16px var(--mono)}
.steps h3{margin:0 0 6px;font-size:16px;line-height:22px}
.steps p{color:var(--muted)}

/* ---------- FAQ ---------- */
.faq{max-width:var(--measure);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;font-weight:550;cursor:pointer;list-style:none;transition:color var(--fast)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{content:"";flex:none;width:7px;height:7px;margin-right:4px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-2px) rotate(45deg);transition:transform var(--mod) var(--ease)}
.faq details[open]>summary::after{transform:translateY(2px) rotate(225deg)}
.faq details>:not(summary){margin:0;padding-bottom:16px}
.faq details[open]>:not(summary){animation:reveal var(--mod) var(--ease)}
@keyframes reveal{from{opacity:0;transform:translateY(-4px)}}
details>summary{cursor:pointer}

/* ---------- Footer and umbrella line ---------- */
.site-footer{padding-block:32px 40px;border-top:1px solid var(--line);color:var(--muted);font-size:14px;line-height:20px}
.site-footer .wrap{display:grid;gap:16px}
.footer-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
.footer-row a{color:var(--muted)}
.footer-row a:hover{color:var(--fg)}
.footer-brand{display:inline-flex;align-items:center;gap:8px;color:var(--fg);font-weight:600}
.footer-brand .mark{width:20px;height:20px}
.umbrella{margin:0;padding-top:16px;border-top:1px dashed var(--line);color:var(--muted)}
.umbrella a{color:var(--fg);font-weight:550;text-decoration:none}
.umbrella a:hover{text-decoration:underline}

/* ---------- Mobile ---------- */
@media (pointer:coarse){
  .btn{height:44px}
  .btn-sm{height:36px}
  .input,.select{height:44px}
  .input,.select,.textarea{font-size:16px}
  .icon-btn{width:44px;height:44px}
}
@media (max-width:860px){
  .agent-cols,.split{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .wrap{width:min(100% - 32px,var(--w))}
  .site-header{position:static}
  .site-header .wrap{flex-wrap:wrap;height:auto;padding-block:10px 0;gap:0 12px}
  .site-header .brand{height:44px}
  .site-header .icon-btn{margin-left:auto}
  .nav{order:3;width:calc(100% + 32px);margin:0 -16px;padding:2px 10px 8px;overflow-x:auto;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .hero{padding-block:36px 40px}
  .lead{font-size:17px}
  .hero .panel,.hero .agent{margin-top:24px}
  .section{padding-block:48px}
  h2{font-size:24px;line-height:30px}
  .grid-2{grid-template-columns:minmax(0,1fr)}
  .panel-head,.panel-body,.result,.agent-head,.agent-body{padding-inline:16px}
  .form-row>.btn{flex:1 1 100%}
  .form-row>.select{flex:1 1 auto}
  .stat b{font-size:24px;line-height:30px}
  .kv{grid-template-columns:minmax(0,1fr);gap:2px}
  .kv dd{margin-bottom:10px}
}
@media (max-width:640px){
  .table-stack{border:0;background:none;overflow:visible}
  .table-stack .table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .table-stack .table,.table-stack tbody,.table-stack tr,.table-stack td{display:block}
  .table-stack tr{margin-bottom:8px;padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
  .table-stack .table td{position:relative;padding:4px 0 4px 7em;border:0;text-align:left;white-space:normal}
  .table-stack td::before{content:attr(data-label);position:absolute;left:0;top:5px;width:6.5em;color:var(--muted);font-size:13px;line-height:18px}
  .table-stack tbody tr:hover{background:var(--surface)}
}

/* ---------- Reduced motion: fades stay, movement goes ---------- */
@media (prefers-reduced-motion:reduce){
  .swap>*{transform:none!important;filter:none!important}
  .faq summary::after{transition:none}
  @keyframes reveal{from{opacity:0}}
  .btn[aria-busy="true"]::after,.loading::before{animation:pulse 1.2s ease-in-out infinite}
  @keyframes pulse{50%{opacity:.35}}
}