:root{--canvas:#f6f9f7;--paper:#fff;--card:#ecf3ee;--ink:#0c1f16;--muted:#55675d;--line:#dbe5df;--dot:#c6d6cc;
--green:#00754a;--on-green:#fff;--marker:#bfe9d1;
--ok:#0b6b3f;--ok-bg:#dff2e7;--bad:#a1261a;--bad-bg:#fbe7e4;--soft:#5a6b62;--soft-bg:#eef2ef;--warn:#7a4f00;--warn-bg:#fdf0d5;
--deep:#06301f;--deep-ink:#e9f5ee;--deep-muted:#a6c9b6;--deep-line:#1c5139;
--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
--sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--shadow:0 1px 2px rgba(12,31,22,.05),0 24px 56px -28px rgba(12,31,22,.28)}
@media (prefers-color-scheme:dark){:root{--canvas:#0a110d;--paper:#111a15;--card:#15211b;--ink:#e5eee8;--muted:#9bafa3;--line:#24342b;--dot:#22322a;
--green:#4cc38f;--on-green:#04170e;--marker:rgba(76,195,143,.32);
--ok:#8be0b2;--ok-bg:#133222;--bad:#ffb4a8;--bad-bg:#3a1d19;--soft:#a9b9b0;--soft-bg:#1c2922;--warn:#f3c66b;--warn-bg:#382b10;
--deep:#0c2b1d;--deep-line:#22533c;--shadow:0 1px 2px rgba(0,0,0,.4),0 24px 56px -28px rgba(0,0,0,.7)}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);font-kerning:normal}
a{color:var(--green);text-underline-offset:.18em}
a:focus-visible,summary:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:6px}
h1,h2,h3{margin:0}
h1,h2{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;text-align:center}
h2{font-size:clamp(2rem,1.4rem + 2.4vw,3rem);line-height:1.1;text-wrap:balance}
h3{font-size:1.125rem;line-height:1.3;font-weight:650;letter-spacing:-.005em}
p{margin:0 0 1rem}
.wrap{--gutter:1.5rem;max-width:72rem;margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:46rem}
.mono{font-family:var(--mono);font-size:.92em}
.sub{text-align:center;color:var(--muted);max-width:38rem;margin:1rem auto 0;font-size:1.125rem;text-wrap:pretty}
.i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.pill{display:inline-block;padding:.8rem 1.5rem;border-radius:999px;background:var(--green);color:var(--on-green);font-weight:600;text-decoration:none;line-height:1.2;transition:filter .2s,transform .2s,box-shadow .2s}
.pill:hover{filter:brightness(1.1)}
.pill.small{padding:.5rem 1rem;font-size:.9375rem}
.text-link{color:var(--ink);font-weight:500}
.skip{position:absolute;left:1rem;top:-5rem;z-index:20;padding:.6rem 1rem;border-radius:10px;background:var(--green);color:var(--on-green);font-weight:600;text-decoration:none}
.skip:focus{top:.75rem}

.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--canvas) 86%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.75rem;padding-bottom:.75rem}
.logo{display:inline-flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none;font-weight:700;letter-spacing:-.01em}
.mark{width:1.75rem;height:1.75rem;flex:none}
.mark rect{fill:var(--green)}
.mark .tone{fill:var(--on-green);fill-opacity:.2}
.mark .stroke{fill:none;stroke:var(--on-green);stroke-width:24;stroke-linecap:round;stroke-linejoin:round}
nav{display:flex;align-items:center;gap:1.5rem;font-size:.9375rem}
nav a:not(.pill){color:var(--muted);text-decoration:none;transition:color .2s}
nav a:not(.pill):hover{color:var(--ink)}
section[id]{scroll-margin-top:4.5rem}

.dotted{position:relative;isolation:isolate}
.dotted::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(var(--dot) 1.2px,transparent 1.4px);background-size:24px 24px;
-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 35%,transparent 80%);mask-image:linear-gradient(to bottom,#000 0,#000 35%,transparent 80%)}
.hero{padding-top:clamp(3.5rem,8vw,6.5rem);padding-bottom:clamp(3rem,6vw,5rem);text-align:center}
.hero h1{font-size:clamp(2.375rem,1.4rem + 3.4vw,4.25rem);line-height:1.1;margin:0 auto}
.hero h1 > span{display:block}
mark{background:var(--marker);color:inherit;padding:0 .14em;border-radius:.14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.star{font-size:.45em;vertical-align:super;text-decoration:none;margin-left:.08em;font-family:var(--sans)}
.lede{color:var(--muted);font-size:1.1875rem;max-width:36rem;margin:1.75rem auto 0}
.actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem 1.75rem;margin:2.25rem 0 0}
.facts{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.5rem;max-width:48rem;margin:2rem auto 0;padding:0;color:var(--muted);font-size:.9375rem}
.facts li{display:inline-flex;align-items:center;gap:.4rem}
.facts .i{color:var(--green)}

.preview{margin-top:clamp(3rem,6vw,4.5rem);text-align:left}
.view{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.tabs{display:flex;gap:.25rem;width:max-content;max-width:100%;margin:0 auto 1.25rem;padding:.25rem;border-radius:999px;background:var(--card);border:1px solid var(--line)}
.tabs label{padding:.45rem 1.1rem;border-radius:999px;font-size:.9375rem;color:var(--muted);cursor:pointer;user-select:none;transition:background-color .25s,color .25s,box-shadow .25s}
.tabs label:hover{color:var(--ink)}
#view-logs:checked ~ .tabs [for=view-logs],#view-domains:checked ~ .tabs [for=view-domains],#view-usage:checked ~ .tabs [for=view-usage]{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(12,31,22,.12)}
#view-logs:focus-visible ~ .tabs [for=view-logs],#view-domains:focus-visible ~ .tabs [for=view-domains],#view-usage:focus-visible ~ .tabs [for=view-usage]{outline:3px solid var(--green);outline-offset:2px}
.window{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.chrome{display:flex;align-items:center;gap:1rem;padding:.65rem 1rem;border-bottom:1px solid var(--line);background:var(--canvas)}
.dots{display:flex;gap:.4rem}
.dots i{width:.7rem;height:.7rem;border-radius:50%;background:var(--line)}
.url{flex:1;max-width:26rem;margin:0 auto;padding:.2rem .75rem;border-radius:7px;background:var(--paper);border:1px solid var(--line);font-size:.8125rem;color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app{display:grid;grid-template-columns:13.5rem minmax(0,1fr);min-height:23rem}
.side{padding:1.1rem .75rem;border-right:1px solid var(--line);font-size:.875rem}
.side .brand{display:flex;align-items:center;gap:.55rem;font-weight:650;margin:0 0 1rem;padding:0 .5rem}
.avatar{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:6px;background:var(--green);color:var(--on-green);font-size:.75rem;font-weight:700}
.side ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.side li{padding:.4rem .6rem;border-radius:7px;color:var(--muted)}
#view-logs:checked ~ .window .nav-logs,#view-domains:checked ~ .window .nav-domains,#view-usage:checked ~ .window .nav-usage{background:var(--card);color:var(--ink);font-weight:600}
.pane{display:none;padding:1.25rem 1.5rem 1.5rem;font-size:.875rem}
#view-logs:checked ~ .window .pane-logs,#view-domains:checked ~ .window .pane-domains,#view-usage:checked ~ .window .pane-usage{display:block}
.pane-title{display:flex;align-items:center;gap:.6rem;font-weight:650;font-size:1rem;margin:0 0 1rem}
.mock{width:100%;border-collapse:collapse}
.mock th{font-weight:500;color:var(--muted);text-align:left;font-size:.8125rem;padding:.5rem .6rem;border-bottom:1px solid var(--line)}
.mock td{padding:.65rem .6rem;border-bottom:1px solid var(--line);white-space:nowrap}
.mock tr:last-child td{border-bottom:0}
.mock .num{text-align:right;font-variant-numeric:tabular-nums}
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.12rem .55rem;border-radius:999px;font-size:.75rem;font-weight:600;line-height:1.5;white-space:nowrap;background:var(--ok-bg);color:var(--ok)}
.chip::before{content:"";width:.375rem;height:.375rem;border-radius:50%;background:currentColor}
.chip.bad{background:var(--bad-bg);color:var(--bad)}
.chip.muted{background:var(--soft-bg);color:var(--soft)}
.meter{margin-bottom:1.25rem}
.meter p{display:flex;justify-content:space-between;gap:1rem;margin:0 0 .45rem;font-variant-numeric:tabular-nums}
.track{display:block;height:.5rem;border-radius:999px;background:var(--card);overflow:hidden}
.fill{display:block;height:100%;border-radius:inherit;background:var(--green)}
.w0{width:0%}.w5{width:5%}.w10{width:10%}.w15{width:15%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}.w55{width:55%}.w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w85{width:85%}.w90{width:90%}.w95{width:95%}.w100{width:100%}
.plan-line{color:var(--muted);margin:1.5rem 0 0;padding-top:1rem;border-top:1px solid var(--line)}

.section{padding-top:clamp(4.5rem,9vw,7.5rem);padding-bottom:clamp(1rem,3vw,2rem)}
.bento{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;margin-top:clamp(2.5rem,5vw,3.5rem)}
@media (min-width:52rem){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{display:flex;flex-direction:column;background:var(--card);border-radius:22px;padding:clamp(1.5rem,3vw,2rem)}
.card > p{color:var(--muted);max-width:44ch;margin:.5rem 0 0;font-size:1rem}
.ui{margin-top:auto;padding-top:1.75rem}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;font-size:.875rem}
.panel p{margin:0}
.panel .label{color:var(--muted);font-size:.8125rem;margin-bottom:.6rem}
.sender{display:flex;align-items:center;gap:.65rem;padding:.7rem .8rem;border:1.5px solid var(--ink);border-radius:10px;font-weight:600}
.sender > span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.radio{width:.95rem;height:.95rem;flex:none;border-radius:50%;border:4px solid var(--ink)}
.checks{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:.8rem!important;color:var(--muted);font-size:.8125rem}
.checks span{display:inline-flex;align-items:center;gap:.3rem}
.checks .i{color:var(--green)}
.rows > p{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
.rows > p:first-child{padding-top:0}
.rows > p:last-child{border-bottom:0;padding-bottom:0}
.rows .mono{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stack{display:grid;gap:.1rem;min-width:0}
.stack .mono{color:var(--muted);font-size:.8125rem}
.rows .foot{justify-content:flex-start;gap:.4rem;color:var(--muted);font-size:.8125rem}
.rows .foot .i{color:var(--green)}
.time{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.8125rem}
.panel .meter{margin-bottom:1rem}
.panel .meter:last-child{margin-bottom:0}
.limit{color:var(--muted);font-size:.8125rem;margin-top:.35rem!important}
.panel .rows + .meter{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}
.meter.over .fill{background:var(--bad)}
.meter.over strong{color:var(--bad)}
.skipped{margin-top:1rem;padding-top:.4rem;border-top:1px solid var(--line)}
.skipped > p:first-child{padding-top:.6rem}
.rows > p.reason{color:var(--muted);font-size:.8125rem}
.alert{background:var(--warn-bg);color:var(--warn);border-radius:10px;padding:.75rem .9rem}
.alert p{margin-top:.25rem;color:var(--ink);opacity:.85}
.key{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-top:.8rem!important}
.scopes{display:inline-flex;gap:.35rem;flex-wrap:wrap}

#code{margin-top:clamp(4.5rem,9vw,7.5rem)}
.deep{background:var(--deep);color:var(--deep-ink);border-radius:28px;padding:clamp(3rem,7vw,5.5rem) clamp(1.25rem,5vw,4rem);text-align:center}
.deep h2{color:#fff}
.deep .sub{color:var(--deep-muted)}
.diff{max-width:38rem;margin:2.5rem auto 0;text-align:left;border:1px solid var(--deep-line);border-radius:14px;background:rgba(0,0,0,.22);overflow:hidden}
.diff figcaption{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 1rem;border-bottom:1px solid var(--deep-line);font-size:.875rem;font-weight:600}
.diff figcaption .mono{color:var(--deep-muted);font-weight:400}
.diff pre{margin:0;padding:.9rem 0;overflow-x:auto;font:400 .8125rem/1.7 var(--mono)}
.diff code{display:block;min-width:max-content}
.line{display:block;padding:0 1rem 0 0;white-space:pre;color:#d4e8dc}
.line .sign{display:inline-block;width:2rem;text-align:center;color:var(--deep-muted);user-select:none}
.line.del{background:rgba(255,120,100,.13);color:#ffbcb0}
.line.add{background:rgba(76,195,143,.17);color:#a3ecc6}
.line.del .sign,.line.add .sign{color:inherit;font-weight:700}
.calls-label{margin:2.5rem 0 1rem;color:var(--deep-muted);font-size:.9375rem}
.calls{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;max-width:44rem}
.calls code{display:inline-block;font:400 .8125rem/1.4 var(--mono);padding:.35rem .7rem;border-radius:8px;border:1px solid var(--deep-line);background:rgba(255,255,255,.05);color:var(--deep-ink)}

#mcp{margin-top:clamp(4.5rem,9vw,7.5rem)}
.agent{display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem;text-align:left}
@media (min-width:60rem){.agent{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem 3.5rem;align-items:center}}
.agent [id]{scroll-margin-top:5.5rem}
.agent-top{grid-column:1/-1;text-align:center;padding-bottom:clamp(2.5rem,5vw,3.5rem);border-bottom:1px solid var(--deep-line)}
.agent-top h2{max-width:26ch;margin:0 auto;text-wrap:balance}
.agent-top .sub{max-width:40rem;margin-top:2.25rem;font-size:1rem}
.clients{list-style:none;margin:2.5rem 0 0;padding:0;display:flex;justify-content:center;gap:clamp(.25rem,2vw,1rem)}
.clients li{display:flex;flex-direction:column;align-items:center;gap:.55rem;flex:0 1 5rem;min-width:0;text-align:center}
.tile{display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:16px;background:#fff;opacity:.4;animation:lit 12s infinite both}
.tile img{width:2rem;height:2rem;object-fit:contain}
.client-name{font-size:.75rem;color:var(--deep-muted);animation:lit-name 12s infinite both}
.cycle{list-style:none;margin:2.25rem 0 0;padding:0;display:grid}
.cycle li{grid-area:1/1;display:flex;flex-direction:column;align-items:center;gap:.9rem;opacity:0;animation:cycle 12s infinite both}
.cycle p{margin:0;font-family:var(--serif);font-size:clamp(1.5rem,1.1rem + 1.6vw,2.125rem);line-height:1.2;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.cycle code{font:400 .8125rem/1.4 var(--mono);padding:.3rem .85rem;border-radius:999px;border:1px solid rgba(76,195,143,.35);background:rgba(76,195,143,.12);color:#a3ecc6}
.clients .n2 *,.cycle .n2{animation-delay:3s}
.clients .n3 *,.cycle .n3{animation-delay:6s}
.clients .n4 *,.cycle .n4{animation-delay:9s}
@keyframes cycle{0%{opacity:0;transform:translateY(.5rem)}4%,21%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-.5rem)}}
@keyframes lit{0%,25%,100%{opacity:.4;transform:none;box-shadow:none}4%,21%{opacity:1;transform:translateY(-3px);box-shadow:0 0 0 3px #4cc38f,0 10px 24px -8px rgba(0,0,0,.5)}}
@keyframes lit-name{0%,25%,100%{color:var(--deep-muted)}4%,21%{color:#fff}}
@media (prefers-reduced-motion:reduce){
.tile,.client-name,.cycle li{animation:none}
.tile{opacity:1}
.cycle{gap:.9rem}
.cycle li{grid-area:auto;opacity:1;flex-direction:row;justify-content:center;flex-wrap:wrap}
.cycle p{font-size:1.25rem}
}
.agent-links{display:flex;justify-content:center;flex-wrap:wrap;gap:.75rem 2rem;margin:1.5rem 0 0;font-size:.9375rem}
.agent-links a{display:inline-flex;align-items:center;gap:.4rem;color:#fff;font-weight:600;text-decoration:none}
.agent-links a:hover{text-decoration:underline}
.agent-links a:focus-visible{outline-color:#7fdcae}
.agent-links .i{color:#7fdcae}
.agent-copy h3{font-size:1.25rem;font-weight:650;color:#fff}
.eyebrow{display:inline-block;margin:0 0 1.25rem;padding:.25rem .75rem;border-radius:999px;border:1px solid var(--deep-line);color:var(--deep-muted);font-size:.8125rem;font-weight:600;letter-spacing:.01em}
.agent-note{display:flex;gap:.6rem;margin:1.5rem 0 0;font-size:.9375rem}
.agent-note .i{color:#7fdcae;margin-top:.3em}
.snippet{margin:1.75rem 0 0;border:1px solid var(--deep-line);border-radius:14px;background:rgba(0,0,0,.22);overflow:hidden}
.snippet figcaption{padding:.6rem 1rem;border-bottom:1px solid var(--deep-line);font-size:.8125rem;font-weight:600}
.snippet pre{margin:0;padding:.9rem 1rem;overflow-x:auto;font:400 .8125rem/1.7 var(--mono);color:#a3ecc6}
.snippet-note{margin:.75rem 0 0;color:var(--deep-muted);font-size:.875rem}
.terminal{margin:0;border:1px solid var(--deep-line);border-radius:16px;background:rgba(0,0,0,.28);overflow:hidden}
.terminal figcaption{display:flex;align-items:center;gap:.75rem;padding:.65rem 1rem;border-bottom:1px solid var(--deep-line);color:var(--deep-muted);font-size:.8125rem}
.terminal .dots i{background:var(--deep-line)}
.turn{padding:1.15rem 1.25rem;border-bottom:1px solid var(--deep-line);font-size:.9375rem}
.turn:last-child{border-bottom:0}
.turn p{margin:0}
.ask{display:flex;gap:.6rem;color:#fff;font-weight:600}
.prompt{color:#7fdcae;font-family:var(--mono)}
.call{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem;margin:.7rem 0!important;padding-left:1.2rem;font:400 .8125rem/1.5 var(--mono)}
.tool-name{padding:.1rem .5rem;border-radius:6px;background:rgba(76,195,143,.17);color:#a3ecc6}
.result{color:var(--deep-muted)}
.answer{padding-left:1.2rem}
.agent-tools{grid-column:1/-1;text-align:center;border-top:1px solid var(--deep-line)}
.agent-tools .calls-label{margin-top:2rem}
.calls .sending code{border-color:#4cc38f;background:rgba(76,195,143,.14);color:#a3ecc6}
.legend{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0;color:var(--deep-muted);font-size:.875rem}
.legend code{font-family:var(--mono);color:#a3ecc6}
.key-dot{width:.6rem;height:.6rem;border-radius:50%;background:#4cc38f}

.letter{margin-top:2.5rem;font-size:1.0625rem;line-height:1.7}
.letter ul{margin:0 0 1.5rem;padding-left:1.25rem}
.letter li{margin-bottom:.6rem}
.letter li::marker{color:var(--green)}
.letter .answers{list-style:none;padding:0}
.answers li{display:flex;gap:.65rem}
.answers .i{color:var(--green);margin-top:.35em}
.signoff{font-family:var(--serif);font-size:1.375rem;font-style:italic;margin-top:2rem}
.rules{margin-top:3rem;padding:clamp(1.5rem,3vw,2rem);border:1px solid var(--line);border-radius:22px;background:var(--paper)}
.rules h3{margin-bottom:.75rem}
.rules p{color:var(--muted)}
.rules p:last-child{margin-bottom:0}

.plans{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;margin-top:clamp(2.5rem,5vw,3.5rem)}
@media (min-width:52rem){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
.plan{background:var(--card);border-radius:22px;padding:clamp(1.5rem,3vw,2rem)}
.plan h3{font-family:var(--serif);font-weight:500;font-size:1.75rem;letter-spacing:-.01em}
.plan > p{color:var(--muted);margin:.25rem 0 1.25rem}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.plan th,.plan td{padding:.7rem 0;border-bottom:1px solid var(--line);text-align:left}
.plan tbody tr:last-child th,.plan tbody tr:last-child td{border-bottom:0}
.plan thead th{font-size:.875rem;font-weight:500;color:var(--muted)}
.plan tbody th{font-weight:600}
.num{text-align:right!important}
.includes{margin-top:1rem;padding:clamp(1.5rem,3vw,2rem);border:1px solid var(--line);border-radius:22px;background:var(--paper)}
.included{list-style:none;margin:1rem 0 1.5rem;padding:0;display:grid;gap:.6rem 1.5rem;grid-template-columns:repeat(auto-fill,minmax(12.5rem,1fr))}
.included li{display:flex;align-items:center;gap:.5rem}
.included .i{color:var(--green)}
.combo{grid-column:1/-1;background:var(--paper);border:1.5px solid var(--green)}
@media (min-width:52rem){.combo{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:1rem 3rem;align-items:start}}
.combo h3{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .75rem}
.badge{display:inline-block;padding:.2rem .7rem;border-radius:999px;background:var(--green);color:var(--on-green);font:600 .8125rem/1.4 var(--sans);letter-spacing:0}
.combo-intro p{color:var(--muted);margin:.6rem 0 1.25rem}
.combo th .emails{display:block;font-weight:400;font-size:.8125rem;color:var(--muted)}
.combo td{padding-left:.75rem;white-space:nowrap}
.combo s{color:var(--muted)}
.combo-price{font-weight:650;color:var(--green)}
.plan .mixed th[scope=rowgroup]{padding:1.5rem 0 .4rem;font-size:.8125rem;font-weight:600;color:var(--muted)}
.notes{margin:0;padding:1.25rem 0 0 1.25rem;border-top:1px solid var(--line);color:var(--muted);font-size:.9375rem}
.notes li{margin-bottom:.3rem}
.compare{max-width:46rem;margin:1.5rem auto 0;text-align:center;color:var(--muted);font-size:.8125rem}

.faq{margin-top:2.5rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 0;font-weight:600;font-size:1.0625rem;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-weight:400;font-size:1.5rem;line-height:1;color:var(--muted);transition:transform .15s}
.faq details[open] summary::after{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}
.faq details p{color:var(--muted);max-width:62ch;margin:0 0 1.35rem}

.cta{text-align:center;padding-bottom:clamp(4.5rem,9vw,7.5rem)}
.cta.dotted::before{-webkit-mask-image:radial-gradient(ellipse at center,#000 25%,transparent 70%);mask-image:radial-gradient(ellipse at center,#000 25%,transparent 70%)}
.cta h2{font-size:clamp(2.5rem,1.5rem + 4vw,4.25rem);line-height:1.08}
.cta h2 span{display:block}
.cta .sub{margin-bottom:2rem}

.foot{border-top:1px solid var(--line);padding:2.5rem 0 3rem;font-size:.9375rem;color:var(--muted)}
.foot p{margin:0 0 .6rem}
.logo.small{font-size:1rem}
.logo.small .mark{width:1.4rem;height:1.4rem}
.foot .links{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}

@media (prefers-reduced-motion:no-preference){
.hero h1,.hero .lede,.hero .actions,.hero .facts,.hero .preview{animation:enter .6s cubic-bezier(.2,.7,.2,1) both}
.hero .lede{animation-delay:.08s}
.hero .actions{animation-delay:.16s}
.hero .facts{animation-delay:.24s}
.hero .preview{animation-delay:.32s}
.hero mark{background:linear-gradient(var(--marker),var(--marker)) 0 0/100% 100% no-repeat;animation:highlight .7s .5s cubic-bezier(.2,.7,.2,1) both}
.pane{animation:pane-in .35s ease-out}
.pane-logs tbody tr{animation:enter .45s cubic-bezier(.2,.7,.2,1) both}
.pane-logs tr:nth-child(1){animation-delay:.35s}
.pane-logs tr:nth-child(2){animation-delay:.45s}
.pane-logs tr:nth-child(3){animation-delay:.55s}
.pane-logs tr:nth-child(4){animation-delay:.65s}
.pane-logs tr:nth-child(5){animation-delay:.75s}
.pane-usage .fill{animation:fill 1.1s .3s cubic-bezier(.2,.7,.2,1) both}
.preview{perspective:1800px}
.pill:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px var(--green)}
.pill:active{transform:none;filter:brightness(.95)}
.text-link{transition:text-underline-offset .2s}
.text-link:hover{text-underline-offset:.35em}
.agent-links .i{transition:transform .2s}
.agent-links a:hover .i{transform:translateX(3px)}
@supports (interpolate-size:allow-keywords){
.faq{interpolate-size:allow-keywords}
.faq details::details-content{height:0;overflow:clip;transition:height .35s cubic-bezier(.2,.7,.2,1),content-visibility .35s allow-discrete}
.faq details[open]::details-content{height:auto}
}
/* Each card's picture acts out its title on an 11 second loop. Every step
   shares the loop's timing (s = slides up, p = pops in, at 8% steps), so a
   card's story stays in order, and --phase staggers the four cards. */
.card-keys{--phase:1.5s}
.card-lookup{--phase:1s}
.card-inbox{--phase:.5s}
.card-codes .rows > p:first-child .chip::before{animation:pulse 1.6s ease-out infinite}
.card-codes .fill{animation:rise 11s var(--phase,0s) infinite both}
.card-codes .meter strong{animation:s5 11s var(--phase,0s) infinite both}
.card-codes .rows > p:nth-child(2) .chip{animation:p5 11s var(--phase,0s) infinite both}
.card-inbox .checks span:nth-child(1) .i{animation:p1 11s var(--phase) infinite both}
.card-inbox .checks span:nth-child(2) .i{animation:p2 11s var(--phase) infinite both}
.card-inbox .checks span:nth-child(3) .i{animation:p3 11s var(--phase) infinite both}
.card-inbox .checks span:nth-child(4) .i{animation:p4 11s var(--phase) infinite both}
.card-inbox .sender .chip{animation:p5 11s var(--phase) infinite both}
.card-inbox .skipped > p:nth-child(1){animation:s6 11s var(--phase) infinite both}
.card-inbox .skipped > p:nth-child(2){animation:s7 11s var(--phase) infinite both}
.card-lookup .rows > p:nth-child(2){animation:s1 11s var(--phase) infinite both}
.card-lookup .rows > p:nth-child(3){animation:s3 11s var(--phase) infinite both}
.card-lookup .rows > p:first-child .chip{animation:p4 11s var(--phase) infinite both}
.card-lookup .rows > p.reason{animation:s5 11s var(--phase) infinite both}
.card-lookup .rows > p.foot{animation:s6 11s var(--phase) infinite both}
.card-keys .alert{animation:drop 11s var(--phase) infinite both}
.card-keys .key{animation:dim 11s var(--phase) infinite both}
@supports (animation-timeline:view()){
.hero > .wrap:not(.preview){animation:drift linear both;animation-timeline:scroll();animation-range:0 75vh}
.preview .window{transform-origin:50% 100%;animation:tilt linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
.bento .card{animation:enter linear both;animation-timeline:view();animation-range:entry 5% entry 70%}
.section h2,.section .sub,.letter,.rules,.plan,.includes,.faq details,.cta p{animation:enter linear both;animation-timeline:view();animation-range:entry 0% cover 25%}
.deep{animation:rise-in linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
}
}
@keyframes enter{from{opacity:0;transform:translateY(14px)}}
@keyframes rise-in{from{opacity:0;transform:translateY(40px) scale(.97)}}
@keyframes drift{to{transform:translateY(-3rem);opacity:.3}}
@keyframes highlight{from{background-size:0 100%}}
@keyframes pane-in{from{opacity:0}}
@keyframes fill{from{width:0}}
@keyframes tilt{from{transform:rotateX(28deg) scale(.94)}}
@keyframes pulse{from{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 55%,transparent)}to{box-shadow:0 0 0 .4rem transparent}}
@keyframes s1{0%,8%{opacity:0;transform:translateY(6px)}13%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes s3{0%,24%{opacity:0;transform:translateY(6px)}29%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes s5{0%,40%{opacity:0;transform:translateY(6px)}45%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes s6{0%,48%{opacity:0;transform:translateY(6px)}53%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes s7{0%,56%{opacity:0;transform:translateY(6px)}61%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes p1{0%,8%{opacity:0;transform:scale(.4)}11%{opacity:1;transform:scale(1.15)}13%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes p2{0%,16%{opacity:0;transform:scale(.4)}19%{opacity:1;transform:scale(1.15)}21%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes p3{0%,24%{opacity:0;transform:scale(.4)}27%{opacity:1;transform:scale(1.15)}29%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes p4{0%,32%{opacity:0;transform:scale(.4)}35%{opacity:1;transform:scale(1.15)}37%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes p5{0%,40%{opacity:0;transform:scale(.4)}43%{opacity:1;transform:scale(1.15)}45%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes rise{0%,8%{width:0;background-color:var(--green)}30%{background-color:var(--green)}40%,90%{width:100%;background-color:var(--bad)}95%,100%{width:0;background-color:var(--bad)}}
@keyframes drop{0%,16%{opacity:0;transform:translateY(-10px)}21%{opacity:1;transform:none;box-shadow:0 0 0 0 color-mix(in srgb,var(--warn) 45%,transparent)}32%{box-shadow:0 0 0 10px transparent}90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes dim{0%,16%{opacity:1}24%,90%{opacity:.5}95%,100%{opacity:1}}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
nav a[aria-current]{color:var(--ink);font-weight:600}
.page-head{padding:clamp(2.75rem,6vw,4.5rem) 0 clamp(1.5rem,3vw,2.25rem)}
.page-head h1{font-size:clamp(2.125rem,1.5rem + 2.4vw,3.25rem);line-height:1.12;text-align:left;text-wrap:balance}
.page-head > p{margin:1rem 0 0;color:var(--muted);font-size:1.125rem;max-width:42rem;text-wrap:pretty}
.page-head > .kicker{margin:0 0 .75rem;font-size:.875rem;font-weight:600;color:var(--green)}
.prose{padding-bottom:clamp(3rem,7vw,5rem);min-width:0}
.prose h2{font-size:clamp(1.5rem,1.25rem + 1vw,2rem);line-height:1.2;text-align:left;margin:2.75rem 0 .75rem}
.prose section:first-child h2{margin-top:.5rem}
.prose section[id]{scroll-margin-top:5rem}
.prose h3{margin:1.75rem 0 .5rem}
.prose ul,.prose ol{margin:0 0 1.25rem;padding-left:1.25rem}
.prose li{margin-bottom:.45rem}
.prose li::marker{color:var(--muted)}
.prose strong{font-weight:650}
.prose p code,.prose li code,.prose td code,.prose th code,.callout code,.step-body code{font:400 .875em/1.4 var(--mono);padding:.08em .32em;border-radius:5px;background:var(--card);white-space:nowrap}
.prose p code,.prose li code,.callout code,.step-body code{-webkit-box-decoration-break:clone;box-decoration-break:clone}
code wbr{white-space:normal}
.callout{margin:0 0 1.25rem;padding:.85rem 1.1rem;border-radius:12px;background:var(--card);font-size:1rem}
.callout.draft{background:var(--warn-bg);color:var(--warn);font-weight:500}
.code{margin:0 0 1.25rem;border-radius:12px;background:var(--deep);color:var(--deep-ink);overflow:hidden}
.code figcaption{padding:.55rem 1rem;border-bottom:1px solid var(--deep-line);font-size:.8125rem;font-weight:600;color:var(--deep-muted)}
.code pre{margin:0;padding:.9rem 1rem;overflow-x:auto;font:400 .8125rem/1.7 var(--mono)}
.table-wrap{margin:0 0 1.25rem;overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.code pre:focus-visible{outline:3px solid var(--green);outline-offset:-3px}
.data{font-size:.9375rem}
.data th,.data td{padding:.65rem .85rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.data thead th{font-size:.8125rem;font-weight:600;color:var(--muted)}
.data tbody tr:last-child th,.data tbody tr:last-child td{border-bottom:0}
.data tbody th{font-weight:600}
.data small{display:block;color:var(--muted);font-size:.8125rem}
.method{display:inline-block;min-width:3.5rem;font:600 .75rem/1.5 var(--mono);color:var(--green)}
.edge{display:block;margin-top:.2rem;font-size:.75rem;font-weight:650;color:var(--ok)}
.data[data-layout=versus] td:has(.edge){background:var(--ok-bg)}

.docs{display:grid;grid-template-columns:minmax(0,1fr);gap:0 3.5rem;align-items:start}
.docs-nav{display:block;padding-top:1.5rem}
.docs-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem}
.docs-nav a{display:block;padding:.3rem .7rem;border-radius:8px;white-space:nowrap}
.docs-nav a[aria-current]{background:var(--card);color:var(--ink);font-weight:600}
.docs-main{min-width:0;max-width:46rem}
@media (min-width:56rem){
.docs{grid-template-columns:11rem minmax(0,1fr)}
.docs-nav{position:sticky;top:4rem;padding-top:clamp(2.75rem,6vw,4.5rem)}
.docs-nav ul{flex-direction:column}
}

.steps{list-style:none;margin:0;padding:0;counter-reset:step}
.step{counter-increment:step;display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem;padding:2.25rem 0;border-top:1px solid var(--line)}
.step-body{min-width:0}
.step-body h2{display:flex;gap:.75rem;align-items:baseline;font-size:clamp(1.375rem,1.2rem + .7vw,1.75rem);line-height:1.2;text-align:left;margin:0 0 .75rem}
.step-body h2::before{content:counter(step);flex:none;display:inline-grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--green);color:var(--on-green);font:650 .9375rem/1 var(--sans);transform:translateY(-.15em)}
.step-body p:last-child{margin-bottom:0}
.shot{margin:0;min-width:0;padding:clamp(.75rem,2vw,1.25rem);border-radius:18px;background:var(--card)}
.shot.dark{background:var(--deep);color:var(--deep-ink)}
.shot .diff{margin:0;max-width:none}
.shot .code{margin:0;background:transparent}
.shot-title{display:flex;justify-content:space-between;align-items:center;gap:.75rem;font-weight:600;margin:0 0 .75rem}
.panel p.shot-title{margin-bottom:.75rem}
.shot-rows{font-size:.8125rem}
.shot-rows td{padding:.45rem .5rem .45rem 0;border-top:1px solid var(--line);overflow-wrap:anywhere}
.shot-rows td:last-child{padding-right:0;text-align:right;white-space:nowrap}
.shot-key{margin:0 0 .75rem;padding:.55rem .7rem;border-radius:8px;background:var(--card);font:400 .8125rem/1.4 var(--mono);overflow-wrap:anywhere}
.shot-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.next-links{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;margin:1.5rem 0 0}
@media (min-width:56rem){.step{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:3rem;align-items:start}}

.picks{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;margin:0 0 1rem}
.pick{padding:1.25rem 1.4rem;border-radius:16px;background:var(--card)}
.pick h2{font:650 1.125rem/1.3 var(--sans);letter-spacing:-.005em;margin:0 0 .6rem}
.pick ul{margin:0;padding-left:1.1rem;font-size:1rem}
.pick li:last-child{margin-bottom:0}
.versus-links{list-style:none;margin:0 0 2rem;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem}
.versus-links a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.25rem;border-radius:14px;background:var(--card);color:var(--ink);text-decoration:none;font-weight:600;transition:background-color .2s}
.versus-links a:hover{background:var(--line)}
@media (min-width:44rem){.picks,.versus-links{grid-template-columns:repeat(2,minmax(0,1fr))}.versus-links{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fine{color:var(--muted);font-size:.875rem}

@media (max-width:44rem){
.app{grid-template-columns:minmax(0,1fr);min-height:0}
.side{display:none}
.pane{padding:1rem}
.mock .wide{display:none}
.mock th,.mock td{padding-left:.35rem;padding-right:.35rem}
nav .section-link{display:none}
nav{gap:1rem}
}
@media (max-width:40rem){
.data,.data tbody{display:block}
.data thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.data tr{display:block;padding:.85rem 1rem;border-bottom:1px solid var(--line)}
.data tbody tr:last-child{border-bottom:0}
.data th,.data td{display:block;padding:0;border:0}
.data tbody th{margin-bottom:.2rem}
.data td + td{margin-top:.45rem}
.data[data-layout=meta] tr{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem 1rem}
.data[data-layout=meta] tbody th{margin:0}
.data[data-layout=meta] td + td{margin:0;flex:1 0 100%}
.data[data-layout=meta] th + td{font-size:.8125rem;color:var(--muted);white-space:nowrap}
.data[data-layout=pairs] tr{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.data[data-layout=pairs] tbody th{margin:0;font-weight:400}
.data[data-layout=pairs] td{flex:none;font-weight:600}
.data[data-layout=compare] tr,.data[data-layout=versus] tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem 1rem}
.data[data-layout=compare] tbody th,.data[data-layout=versus] tbody th{grid-column:1/-1;margin:0}
.data[data-layout=compare] tbody th::after{content:" " attr(data-label);font-weight:400;color:var(--muted);text-transform:lowercase}
.data[data-layout=compare] td,.data[data-layout=versus] td{margin:0}
.data[data-layout=compare] td::before,.data[data-layout=versus] td::before{content:attr(data-label);display:block;margin-bottom:.1rem;font-size:.8125rem;color:var(--muted)}
.data[data-layout=versus] tr{gap:.55rem}
.data[data-layout=versus] td{padding:.6rem .7rem;border-radius:9px;background:var(--card)}
}
@media (max-width:30rem){
.wrap{--gutter:1rem}
.agent{padding-left:1.25rem;padding-right:1.25rem}
.snippet pre{font-size:.6875rem;padding:.8rem .85rem}
.combo td{padding-left:.5rem}
.combo s{font-size:.8125rem}
.logo > span{font-size:.9375rem}
.deep{padding-left:.75rem;padding-right:.75rem;border-radius:20px}
.diff pre{font-size:.65rem}
.line .sign{width:1.5rem}
.tabs label{padding:.4rem .85rem}
.chrome .dots{display:none}
}