/* The client landing pages. Sizes and gaps stay on one scale: type 12 14 16 18
   20 24 30 36 48 60, space 2 4 8 12 16 24 32 40 48 64 80 96. Everything that
   moves is transform or opacity, on the one curve. */
:root{--ink:#143d2e;--deep:#0f2d22;--deep2:#17352a;--deep3:#1d3f32;--leaf:#17805a;--mint:#8fd4ad;--soft:#eef7f1;
  --line:#d5eede;--muted:#3c6b58;--clay:#d97757;--amber:#b7791f;--curve:cubic-bezier(.22,1,.36,1)}
.skip{position:absolute;inset-inline-start:16px;top:-64px;z-index:60;padding:8px 12px;border-radius:8px;background:#fff;color:var(--ink)}
.skip:focus{top:8px}
main h1,main h2,main h3{font-family:'Gabarito',sans-serif;text-wrap:balance;margin:0}
main p{text-wrap-style:pretty}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
main :focus-visible{outline:2px solid var(--leaf);outline-offset:2px;border-radius:4px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:12px;background:var(--ink);color:#fff;
  font-size:16px;line-height:24px;font-weight:600;text-decoration:none;
  transition:transform .3s var(--curve),opacity .3s var(--curve)}
.btn svg{transition:transform .3s var(--curve)}
.btn:hover{opacity:.92;color:#fff}.btn:hover svg{transform:translateX(4px)}
[dir=rtl] .btn svg{transform:scaleX(-1)}[dir=rtl] .btn:hover svg{transform:scaleX(-1) translateX(4px)}
.btn:active{transform:scale(.98)}
.btn.light{background:#fff;color:var(--ink)}.btn.light:hover{color:var(--ink)}
.linkbtn{border:0;background:none;padding:8px 4px;color:var(--leaf);font:600 16px/24px 'Instrument Sans',sans-serif;cursor:pointer;
  transition:opacity .25s var(--curve)}
.linkbtn:hover{opacity:.7}
.copy{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;
  color:var(--ink);font:600 14px/20px 'Instrument Sans',sans-serif;cursor:pointer;
  transition:transform .25s var(--curve),opacity .25s var(--curve)}
.copy:hover{opacity:.8}.copy:active{transform:scale(.98)}
.copy.ok{color:var(--leaf)}

/* hero */
.as-hero{overflow:hidden}
.as-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;min-height:calc(100vh - 60px);max-height:900px;padding-block:64px}
.as-hero-text>*{opacity:0;transform:translateY(24px);animation:rise .8s var(--curve) forwards}
.as-hero-text>:nth-child(2){animation-delay:.08s}.as-hero-text>:nth-child(3){animation-delay:.16s}
.as-hero-text>:nth-child(4){animation-delay:.24s}.as-hero-text>:nth-child(5){animation-delay:.32s}
@keyframes rise{to{opacity:1;transform:none}}
.as-kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 24px;font-size:14px;line-height:20px;font-weight:600;color:var(--muted)}
.as-kicker .kt{display:flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:6px;background:#fff;border:1px solid var(--line)}
.as-hero h1{max-width:680px;font-size:60px;line-height:60px;font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(90deg,#0f2d22,#17805a);-webkit-background-clip:text;background-clip:text;color:transparent}
.as-hero .lede{max-width:560px;margin:24px 0 0;font-size:20px;line-height:28px;color:var(--muted)}
.as-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:32px}
.as-proof{margin:16px 0 0;font-size:14px;line-height:20px;color:var(--muted)}
.as-orbit{position:relative;height:560px;touch-action:none}
.as-orbit canvas{position:absolute;inset:0;width:100%;height:100%}
.tile{display:flex;align-items:center;justify-content:center;width:112px;height:112px;border:0;border-radius:24px;background:#fff;
  box-shadow:0 2px 4px rgba(20,61,46,.08),0 24px 48px -16px rgba(20,61,46,.3)}
.as-orbit .tile{position:absolute;left:0;top:0;will-change:transform}
.tile.est{background:var(--ink)}
.as-orbit .client{cursor:grab}.as-orbit .client:active{cursor:grabbing}

/* demo */
.as-demo{background:var(--deep);color:#fff;padding:96px 0}
.as-demo h2{font-size:48px;line-height:48px;font-weight:800;text-align:center}
.as-demo .sub{margin:16px auto 0;text-align:center;font-size:18px;line-height:28px;color:#b7d3c5;max-width:680px}
.stage{margin-top:48px;border:1px solid rgba(255,255,255,.09);border-radius:24px;background:var(--deep2);overflow:hidden}
.dtabs{display:flex;gap:4px;padding:8px;border-bottom:1px solid rgba(255,255,255,.09);overflow-x:auto}
.dtab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;border:0;border-radius:12px;background:none;
  color:#b7d3c5;font:500 14px/20px 'Instrument Sans',sans-serif;white-space:nowrap;cursor:pointer;transition:opacity .25s var(--curve)}
.dtab img{background:#fff;border-radius:4px;padding:2px}
.dtab:hover{opacity:.8}.dtab[aria-selected=true]{background:rgba(255,255,255,.12);color:#fff}
.scene{display:grid;grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);align-items:center;padding:48px 40px 16px}
.chat,.result{min-height:440px;border-radius:16px;background:#fff;color:var(--ink);padding:24px}
.you{padding:16px;border-radius:12px;background:var(--soft);border:1px solid var(--line)}
.you .who{margin:0 0 4px;font-size:12px;line-height:16px;color:var(--muted)}
.you p:last-child{margin:0;font-size:16px;line-height:24px}
.server{display:flex;justify-content:space-between;margin:16px 0 8px;font-size:14px;line-height:20px;font-weight:600}
.server .n{font-size:12px;font-weight:400;color:var(--muted)}
.calls{list-style:none;margin:0;padding:0}
.call{position:relative;display:flex;align-items:flex-start;gap:12px;padding:12px 0;opacity:.3;transform:translateY(8px);
  transition:opacity .5s var(--curve),transform .5s var(--curve)}
.call.on{opacity:1;transform:none}
.call .dot{flex:none;position:relative;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:#fff}
.call .dot::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--leaf);transform:scale(0);transition:transform .5s var(--curve)}
.call.done .dot::after{transform:scale(1)}
.call.on:not(.done) .dot{animation:softpulse 1.2s var(--curve) infinite}
@keyframes softpulse{50%{opacity:.4}}
.call .l{margin:0;font-size:14px;line-height:20px;font-weight:600}
.call code{font-size:12px;line-height:16px;color:var(--muted)}
.call .st{margin-inline-start:auto;font-size:12px;line-height:20px;color:var(--leaf);opacity:0;transition:opacity .3s var(--curve)}
.call.done .st{opacity:1}
.wire{position:relative;height:2px;background:rgba(255,255,255,.18)}
.wire i{position:absolute;left:0;top:-7px;width:16px;height:16px;border-radius:50%;background:var(--mint);opacity:0;transform:translateX(0)}
[dir=rtl] .wire i{left:auto;right:0}
.stage.send .wire i{animation:travel 1s var(--curve) forwards}
@keyframes travel{0%{opacity:0;transform:translateX(0)}20%{opacity:1}100%{opacity:1;transform:translateX(80px)}}
[dir=rtl] .stage.send .wire i{animation-name:travelr}
@keyframes travelr{0%{opacity:0;transform:translateX(0)}20%{opacity:1}100%{opacity:1;transform:translateX(-80px)}}
.result{position:relative;overflow:hidden}
.skeleton{position:absolute;inset:24px;display:grid;gap:16px;align-content:start;transition:opacity .5s var(--curve)}
.skeleton i{display:block;height:24px;border-radius:6px;background:var(--soft);animation:softpulse 1.6s var(--curve) infinite}
.skeleton i:first-child{height:64px;width:48%}
.stage.reporting .skeleton{opacity:0}
.report{opacity:0;transform:translateY(16px);transition:opacity .6s var(--curve),transform .6s var(--curve)}
.stage.reporting .report{opacity:1;transform:none}
.rl{margin:0;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.score{margin:4px 0 8px;font:800 60px/60px 'Gabarito',sans-serif;font-variant-numeric:tabular-nums}
.score small{font-size:20px;line-height:28px;font-weight:600;color:var(--muted)}
.bar{height:8px;border-radius:4px;background:var(--soft);overflow:hidden}
.bar i{display:block;height:100%;background:var(--leaf);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.2s var(--curve)}
[dir=rtl] .bar i{transform-origin:100% 50%}
.stage.reporting .bar i{transform:scaleX(.92)}
.checks{list-style:none;margin:16px 0 0;padding:0}
.checks li{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:14px;line-height:20px;opacity:0;transform:translateX(-8px);
  transition:opacity .4s var(--curve),transform .4s var(--curve)}
.checks li.on{opacity:1;transform:none}
.checks .i{width:8px;height:8px;border-radius:50%;background:var(--leaf)}
.checks [data-state=warn] .i{background:var(--amber)}
.checks .v{margin-inline-start:auto;font-size:12px;line-height:16px;color:var(--leaf)}
.checks [data-state=warn] .v{color:var(--amber)}
.plan{margin-top:12px;padding:12px;border-radius:8px;background:var(--soft);opacity:0;transform:translateY(8px);transition:opacity .5s var(--curve),transform .5s var(--curve)}
.plan.on{opacity:1;transform:none}
.plan p:last-child{margin:4px 0 0;font-size:14px;line-height:20px}
.stage .note{margin:0;padding:8px 24px 16px;font-size:12px;line-height:16px;color:#9fc4b2;text-align:end}

/* tagline */
.as-tag{padding:96px 0}
.as-tag p{margin:0 auto;max-width:880px;font:800 60px/60px 'Gabarito',sans-serif;letter-spacing:-.02em;text-wrap:balance}
.as-tag .w{opacity:.28;transition:opacity .5s var(--curve)}.as-tag .w.on{opacity:1}

/* setup */
.as-setup{background:#fff;padding:96px 0;scroll-margin-top:60px}
.as-setup-head{max-width:680px}
.as-setup h2{font-size:48px;line-height:48px;font-weight:800}
.as-setup-head>p{margin:16px 0 0;font-size:18px;line-height:28px;color:var(--muted)}
.urlbox{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px;padding:8px 8px 8px 16px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.urlbox code{font-size:14px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.as-setup-grid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:48px;margin-top:48px;align-items:start}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.step{display:flex;gap:16px;width:100%;padding:16px;border:1px solid transparent;border-radius:12px;background:none;color:var(--ink);text-align:start;cursor:pointer;
  font:400 16px/24px 'Instrument Sans',sans-serif;opacity:.55;transition:opacity .3s var(--curve)}
.step:hover{opacity:.8}
.step[aria-pressed=true]{opacity:1;border-color:var(--line);background:var(--soft)}
.step .num{font:600 14px/24px ui-monospace,monospace;color:var(--leaf)}
.step b{display:block;font-family:'Gabarito',sans-serif;font-size:18px;line-height:28px}
.step b+span{display:block;font-size:14px;line-height:20px;color:var(--muted)}
.showcase{position:relative}
.mock{position:relative;display:grid;grid-template-columns:168px 1fr;height:440px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;font-size:14px;line-height:20px;user-select:none}
.mside{display:flex;flex-direction:column;gap:4px;padding:16px;background:var(--soft)}
.mside p{margin:8px 0 0;font-size:12px;line-height:16px;color:var(--muted)}
.mside span{padding:4px 8px;border-radius:6px}
.mside .m1{transition:opacity .3s var(--curve)}
.mock[data-at="0"] .m1,.mock[data-at="1"] .m1,.mock[data-at="2"] .m1{background:#dcefe4}
.mmain{padding:24px}
.mhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:18px;line-height:28px}
.mhead span{padding:4px 12px;border-radius:8px;background:var(--ink);color:#fff;font-size:14px;line-height:20px}
.mrow{display:flex;align-items:center;gap:8px;padding:12px;border:1px solid var(--line);border-radius:8px;margin-bottom:8px}
.mrow.added{opacity:0;transform:translateY(8px);transition:opacity .5s var(--curve),transform .5s var(--curve)}
.mock[data-at="3"] .mrow.added{opacity:1;transform:none}
.mdialog{position:absolute;left:50%;top:50%;width:340px;max-width:calc(100% - 32px);display:grid;gap:12px;padding:24px;border:1px solid var(--line);border-radius:16px;background:#fff;
  box-shadow:0 24px 48px -16px rgba(20,61,46,.35);opacity:0;transform:translate(-50%,-44%);pointer-events:none;transition:opacity .4s var(--curve),transform .5s var(--curve)}
.mock[data-at="1"] .mdialog,.mock[data-at="2"] .mdialog{opacity:1;transform:translate(-50%,-50%)}
.mdialog label{display:grid;gap:4px;font-size:12px;line-height:16px;color:var(--muted)}
.mdialog .f{padding:8px;border:1px solid var(--line);border-radius:6px;font-size:14px;line-height:20px;color:var(--ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mdialog .mono{font-family:ui-monospace,monospace;font-size:12px}
.mdialog .auth{opacity:.3;transition:opacity .4s var(--curve)}
.mock[data-at="2"] .auth{opacity:1}
.m3{justify-self:end;padding:4px 16px;border-radius:8px;background:var(--ink);color:#fff;font-size:14px}
.cursor{position:absolute;left:0;top:0;transform:translate(120px,380px);transition:transform .9s var(--curve);filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.cursor.tap{animation:tap .3s var(--curve)}
@keyframes tap{50%{opacity:.6}}
.term{border-radius:16px;background:var(--deep);color:#d7eadf;overflow:auto;min-height:280px}
.term .ln{display:block;transition:opacity .4s var(--curve),transform .4s var(--curve)}
.term .ln.off{opacity:0;transform:translateY(8px)}
.film{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--line);background:var(--deep)}
.term pre,.code pre{margin:0;padding:24px;font-size:14px;line-height:20px;white-space:pre}
.on-term{position:absolute;top:12px;inset-inline-end:12px}
.alt{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:48px;align-items:center;margin-top:64px;padding-top:0}
.alt h3{font-size:24px;line-height:32px;font-weight:700}
.alt p{margin:8px 0 0;font-size:16px;line-height:24px;color:var(--muted)}
.code{position:relative;border-radius:12px;background:var(--deep);color:#d7eadf;overflow:auto}
.code pre{padding-inline-end:120px}
.code .copy{position:absolute;top:8px;inset-inline-end:8px}

/* prompts */
.as-asks{padding:96px 0}
.as-asks h2,.as-more h2,.as-faq h2{font-size:36px;line-height:40px;font-weight:800}
.asks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}
.ask{position:relative;display:flex;flex-direction:column;gap:12px;min-height:240px;padding:24px;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;
  transition:transform .5s var(--curve)}
.ask:hover{transform:translateY(-4px)}
.ask .k{margin:0;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--leaf)}
.ask .q{margin:0;font:700 20px/28px 'Gabarito',sans-serif;flex:1}
.ask .reply{display:flex;gap:8px;margin:0;padding:12px;border-radius:8px;background:var(--soft);font-size:14px;line-height:20px;opacity:.0;transform:translateY(8px);transition:opacity .4s var(--curve),transform .4s var(--curve)}
.ask .reply img{flex:none;margin-top:2px}
.ask:hover .reply,.ask:focus-within .reply{opacity:1;transform:none}
.ask .copy{align-self:flex-start}

/* tools */
.as-tools{background:var(--deep);color:#fff;padding:96px 0}
.as-tools-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.as-tools h2{font-size:48px;line-height:48px;font-weight:800}
.as-tools-head p{margin:0;font-size:18px;line-height:28px;color:#b7d3c5}
.diagram{display:grid;grid-template-columns:auto 80px auto minmax(0,1fr);align-items:center;gap:0;margin-top:64px}
.node{display:grid;justify-items:center;gap:8px;padding:24px;border-radius:16px;background:#fff;color:var(--ink);font-size:14px;line-height:20px;font-weight:600}
.node.srv{background:var(--deep3);color:#fff;border:1px solid rgba(255,255,255,.09)}
.link{position:relative;height:2px;background:rgba(255,255,255,.18)}
.link i{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:var(--mint);animation:shuttle 2.4s var(--curve) infinite alternate}
@keyframes shuttle{to{transform:translateX(70px)}}
.tools{list-style:none;margin:0 0 0 48px;padding:0;display:grid;gap:8px}
[dir=rtl] .tools{margin:0 48px 0 0}
.tools li{padding:12px 16px;border:1px solid rgba(255,255,255,.09);border-radius:12px;opacity:.6;transition:opacity .5s var(--curve),transform .5s var(--curve)}
.tools li.on{opacity:1;transform:translateX(8px)}
[dir=rtl] .tools li.on{transform:translateX(-8px)}
.tools code{font-size:14px;line-height:20px;color:var(--mint)}
.tools p{margin:4px 0 0;font-size:14px;line-height:20px;color:#b7d3c5}

/* faq, links, band */
.as-faq{padding:96px 0 48px}
.as-faq .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px}
.qs{display:grid;gap:8px}
.qs details{border:1px solid var(--line);border-radius:12px;background:#fff}
.qs summary{padding:16px;font:700 18px/28px 'Gabarito',sans-serif;cursor:pointer;list-style:none}
.qs summary::-webkit-details-marker{display:none}
.qs .a{padding:0 16px 16px;animation:rise2 .5s var(--curve)}
@keyframes rise2{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.qs .a p{margin:0;font-size:16px;line-height:24px;color:var(--muted)}
.qs a{color:var(--leaf)}
.as-more{padding:48px 0 96px}
.mcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.mc{display:grid;gap:4px;padding:24px;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);text-decoration:none;transition:transform .5s var(--curve)}
.mc:hover{transform:translateY(-4px);color:var(--ink)}
.mc b{font:700 20px/28px 'Gabarito',sans-serif}
.mc span{font-size:14px;line-height:20px;color:var(--muted)}
.mc svg{margin-top:8px;color:var(--leaf)}
.as-band{background:var(--ink);color:#fff;padding:80px 0}
.as-band .wrap{display:grid;justify-items:center;gap:24px;text-align:center}
.as-band .tile{width:80px;height:80px;border-radius:16px;background:rgba(255,255,255,.1)}
.as-band h2{font-size:48px;line-height:48px;font-weight:800;max-width:680px}
footer.site{margin-top:0}

/* reveal */
.js [data-reveal]{opacity:0;transform:translateY(32px);transition:opacity .7s var(--curve),transform .7s var(--curve)}
.js [data-reveal].seen{opacity:1;transform:none}

@media (max-width:1000px){
  .as-hero .wrap{grid-template-columns:minmax(0,1fr);min-height:0;max-height:none;padding-block:48px}
  .as-orbit{height:360px}
  .as-hero h1{font-size:48px;line-height:48px}
  .scene{grid-template-columns:minmax(0,1fr);gap:16px;padding:16px}
  .wire{display:none}
  .chat,.result{min-height:0}.result{min-height:380px}
  .as-tag p{font-size:36px;line-height:40px}
  .as-setup-grid,.alt,.as-tools-head,.as-faq .wrap{grid-template-columns:minmax(0,1fr);gap:24px}
  .asks,.mcs{grid-template-columns:minmax(0,1fr)}
  .ask{min-height:0}.ask .reply{opacity:1;transform:none}
  .diagram{grid-template-columns:minmax(0,1fr);gap:16px}.link{display:none}.tools{margin:0}
  .node{grid-template-columns:auto 1fr;justify-items:start;align-items:center}
  .as-demo h2,.as-setup h2,.as-tools h2,.as-band h2{font-size:36px;line-height:40px}
  .as-demo,.as-setup,.as-tools,.as-asks,.as-tag{padding:64px 0}
  .as-faq{padding:64px 0 32px}.as-more{padding:32px 0 64px}
  .mock{grid-template-columns:minmax(0,1fr);height:400px}.mside{display:none}
  .dtabs{justify-content:flex-start}.dtab{flex:none}
}
@media (max-width:480px){.as-hero h1{font-size:36px;line-height:40px}.as-hero .lede{font-size:18px;line-height:28px}}
@media (prefers-reduced-motion:reduce){
  .scene-box{opacity:1;transform:none}.ring,.sat img,.core::after{animation:none}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .as-hero-text>*{opacity:1;transform:none}
  .js [data-reveal]{opacity:1;transform:none}
  .as-tag .w{opacity:1}
}

/* Per client: every hero is its own picture. */
.as-page .btn{background:var(--accent)}
.as-page .btn.light{background:#fff;color:var(--ink)}
.as-page .linkbtn{color:var(--accent)}
.as-page .step .num,.as-page .ask .k{color:var(--accent)}
.as-hero .wrap{min-height:calc(100vh - 60px)}
.as-hero.flip .as-hero-text{order:2}
.as-hero.dark{background:var(--deep);color:#fff}
.as-hero.dark h1{background:linear-gradient(90deg,#fff,#8fd4ad);-webkit-background-clip:text;background-clip:text;color:transparent}
.as-hero.dark .lede,.as-hero.dark .as-proof,.as-hero.dark .as-kicker{color:#b7d3c5}
.as-hero.dark .btn{background:#fff;color:var(--ink)}
.as-hero.dark .linkbtn{color:var(--mint)}
.as-hero.wide .wrap{grid-template-columns:minmax(0,1fr);min-height:0;max-height:none;justify-items:center;text-align:center;gap:40px;padding-block:48px}
.as-hero.wide .lede{margin-inline:auto}.as-hero.wide h1{margin-inline:auto}
.as-hero.wide .as-actions{justify-content:center}
.as-hero.wide .scene-box{width:100%;max-width:980px;text-align:start}
.scene-box{min-width:0;opacity:0;transform:translateY(32px);animation:rise .9s var(--curve) .3s forwards}
.js .s{opacity:0;transform:translateY(8px);transition:opacity .5s var(--curve),transform .5s var(--curve)}
.js .s.on{opacity:1;transform:none}
.scene-box p{margin:0}
.win,.ide,.zed,.tui,.warp{border-radius:16px;overflow:hidden;font:14px/20px ui-monospace,SFMono-Regular,Menlo,monospace;
  box-shadow:0 2px 4px rgba(0,0,0,.1),0 32px 64px -24px rgba(0,0,0,.5)}
.wbar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#17352a;color:#9fc4b2;font-size:12px;line-height:16px}
.wbar i{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.18)}
.wbar span{margin-inline-start:8px}
.win{background:#0b2019;color:#d7eadf;border:1px solid rgba(255,255,255,.09)}
.pane-b{padding:24px;min-height:380px;overflow:hidden}
.pane-b p{white-space:pre-wrap;word-break:break-word}
.pane-b .pr{color:#fff;margin-top:12px}.pane-b .tl{color:var(--mint);margin-top:12px}.pane-b .dim,.tui .dim{color:#7fa593}.pane-b .bad,.tui .bad{color:#ff9b8a}.pane-b .warn,.tui .warn{color:#f0d58a}
.pane-b .ok,.tui .ok{color:var(--mint)}.pane-b .add{color:#8fe3b4}
.pane-b .strike{text-decoration:line-through;opacity:.8}.pane-b .note{color:#f0d58a}
.ide{display:block;background:#fff;border:1px solid var(--line)}
.ide-b{display:grid;grid-template-columns:140px minmax(0,1.6fr) minmax(0,1fr);min-height:340px;color:var(--ink)}
.files{padding:16px;background:var(--soft);color:var(--muted)}.files .cur{color:var(--ink);font-weight:600}
.edit{padding:16px;overflow-x:auto}.edit p{white-space:pre;text-wrap-mode:nowrap}.edit b{display:inline-block;width:32px;font-weight:400;color:#9fc4b2}
.edit .add{background:#e3f6ea;color:#0f6b4a;margin-inline:-16px;padding-inline:16px}
.agent{display:grid;gap:8px;align-content:start;padding:16px;border-inline-start:1px solid var(--line);font-family:'Instrument Sans',sans-serif}
.me{padding:8px 12px;border-radius:8px;background:var(--soft)}
.tc{color:var(--accent);font-family:ui-monospace,monospace;font-size:12px;line-height:16px}
.say{color:var(--muted)}.say.good{color:var(--leaf);font-weight:600}
.pr-card{display:grid;gap:12px;padding:24px;border:1px solid var(--line);border-radius:16px;background:#fff;font-size:14px;line-height:20px;box-shadow:0 32px 64px -24px rgba(20,61,46,.3)}
.prt{font:700 18px/28px 'Gabarito',sans-serif}.prt em{font-style:normal;color:var(--muted);font-weight:400}
.tag-open{margin-inline-end:8px;padding:2px 8px;border-radius:999px;background:#1a7f37;color:#fff;font:600 12px/16px 'Instrument Sans',sans-serif}
.prc{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.prc li{display:flex;align-items:center;gap:8px}.prc i,.mrw i{width:8px;height:8px;border-radius:50%;background:var(--leaf)}
.cm{padding:12px;border:1px solid var(--line);border-radius:8px}.cm b{font-size:12px;line-height:16px}
.cm.bad{border-color:#f2c1b8}.cm.good{border-color:#a9dfc2}
.diff{padding:8px 12px;border-radius:8px;background:#e3f6ea;font:12px/16px ui-monospace,monospace;color:#0f6b4a}
.zed{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);background:#0b1220;color:#c7d3ea;border:1px solid rgba(255,255,255,.09);border-radius:4px;min-height:320px;text-align:start}
.z-ed,.z-ag{padding:16px;min-width:0}.z-ed{overflow-x:auto}.z-ed p{white-space:pre;text-wrap-mode:nowrap}.z-ed u{text-decoration:none;color:#7aa7ff}.z-ed em{font-style:normal;color:#8fe3b4}
.z-ag{display:grid;gap:8px;align-content:start;border-inline-start:1px solid rgba(255,255,255,.09)}
.zk{color:#6b7a99;font-size:12px;line-height:16px;margin-bottom:8px!important}
.zed .me{background:rgba(255,255,255,.08);color:#fff}.zed .tc{color:#7aa7ff}.zed .say{color:#c7d3ea}
.warp{display:grid;background:#0b1a26;color:#d9e6f2;border:1px solid rgba(255,255,255,.09)}
.blk{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.blk .cmd{color:#fff}.blk .out{color:#8ba7bd;white-space:pre-wrap}
.blk.bad{background:rgba(255,107,87,.1)}.blk.bad .out{color:#ff9b8a}.blk.good{background:rgba(10,132,216,.14)}.blk.good .out{color:#9fd4ff}
.in-bar{padding:16px;color:#6e8aa0}
.tui{background:#14110a;color:#e6dcc4;border:1px solid #4a3f24;border-radius:8px;text-align:start}
.tui-h{display:flex;gap:24px;padding:8px 16px;background:#c98a11;color:#14110a;font-weight:700;font-size:12px;line-height:16px}
.tui-b{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);min-height:300px}
.tui-l,.tui-r{padding:16px;display:grid;gap:8px;align-content:start}
.tui-r{border-inline-start:1px dashed #4a3f24}
.tui .me{background:none;padding:0;color:#fff}.tui .tc{color:#c98a11}.tui .say{color:#e6dcc4}.tui .good{color:#8fd4ad}
.hub{position:relative;height:480px;display:flex;align-items:center;justify-content:center}
.ring{position:absolute;width:400px;height:400px;animation:spin 48s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sat{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px;display:flex;align-items:center;justify-content:center;border-radius:16px;background:#fff;
  box-shadow:0 16px 32px -12px rgba(20,61,46,.3);transform:rotate(calc(var(--i)*45deg)) translateY(-168px) rotate(calc(var(--i)*-45deg))}
.sat img{animation:spin 48s linear infinite reverse}
.core{position:relative;display:grid;justify-items:center;gap:4px;padding:24px;border-radius:24px;background:var(--ink);color:#fff}
.core::after{content:"";position:absolute;inset:0;border-radius:24px;border:2px solid var(--mint);animation:pulse-out 2.4s var(--curve) infinite}
@keyframes pulse-out{from{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.6)}}
.wf{display:grid;gap:16px;padding:24px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 32px 64px -24px rgba(20,61,46,.3);font-size:14px;line-height:20px;text-align:start}
.wf-h{font-weight:600}.wf-h span{color:var(--muted);font-weight:400;margin-inline-start:8px}
.wf-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.job{display:flex;align-items:center;gap:8px;padding:12px;border:1px solid var(--line);border-radius:8px}
.job i{width:12px;height:12px;border-radius:50%;background:var(--leaf)}.job.bad i{background:#cf222e}.job.bad{border-color:#f2c1b8}
.sum{padding:12px 16px;border-radius:8px;background:#fdecea}.sum b{display:block}.sum.good{background:#e3f6ea}
.gl{display:grid;gap:16px}
.stages{display:flex;gap:8px;flex-wrap:wrap}
.stg{display:inline-block;padding:4px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:14px;line-height:20px}
.stg.ok{color:var(--leaf)}.stg.bad{color:#e24329;border-color:#f6c6bb}
.mrw{padding:24px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 32px 64px -24px rgba(20,61,46,.3)}
.mrh{font:700 18px/28px 'Gabarito',sans-serif;margin-bottom:12px!important}
.mrw ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font:14px/20px ui-monospace,monospace}
.mrw li{display:flex;align-items:center;gap:8px}.mrw .bad i{background:#e24329}
.gpt{display:grid;gap:12px;padding:24px;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 32px 64px -24px rgba(20,61,46,.3);font-size:16px;line-height:24px;min-height:440px;align-content:start}
.gpt .u{justify-self:end;max-width:80%;padding:8px 16px;border-radius:16px;background:var(--soft)}
.gpt .s:has(.u){display:grid}
.ccard{padding:16px;border:1px solid var(--line);border-radius:16px}
.ccard .k{font-size:12px;line-height:16px;color:var(--accent);font-weight:600}.ccard .addr{font:14px/20px ui-monospace,monospace}.ccard .dim{color:var(--muted);font-size:14px;line-height:20px}
.ccard .big{font:800 48px/48px 'Gabarito',sans-serif}.ccard small{font-size:18px;color:var(--muted)}
.doc{padding:32px;border:1px solid var(--line);border-radius:16px;background:#fff;font:14px/24px ui-monospace,monospace;box-shadow:0 32px 64px -24px rgba(20,61,46,.3);min-height:400px}
.dn{color:var(--muted);font-size:12px;margin-bottom:16px!important}.hd{font-weight:700;font-size:18px;line-height:28px;margin-bottom:8px!important}
.mk{margin-top:8px!important;padding:4px 8px;border-radius:4px;background:#efe9fb;color:#4b2ea8}
.as-links{padding:64px 0}
.as-links h2{font-size:36px;line-height:40px;font-weight:800}
.lks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:24px}
.lk{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);text-decoration:none;transition:transform .5s var(--curve)}
.lk:hover{transform:translateY(-4px);color:var(--ink)}
.lk .kt{display:flex;width:32px;height:32px;align-items:center;justify-content:center;border-radius:8px;background:var(--soft)}
.lk b{flex:1;font-size:16px;line-height:24px;font-weight:600}.lk svg{color:var(--accent)}
.as-setup-grid>.steps{order:0}
[data-client=claude-code] .as-setup,[data-client=warp] .as-setup,[data-client=opencode] .as-setup{background:var(--soft)}
[data-client=gemini-cli] .as-tag,[data-client=zed] .as-tag,[data-client=opencode] .as-tag{background:var(--deep);color:#fff}
[data-client=github-copilot] .as-asks,[data-client=cursor] .as-asks{background:#fff}
@media (max-width:1000px){
  .as-hero.flip .as-hero-text{order:0}
  .ide-b{grid-template-columns:minmax(0,1fr)}.files{display:none}.agent{border:0}
  .zed,.tui-b{grid-template-columns:minmax(0,1fr)}.z-ag,.tui-r{border:0}
  .wf-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hub{height:360px}.ring{transform:scale(.72)}
  .pane-b{min-height:300px;padding:16px}
  .edit p,.z-ed p{font-size:12px}
}

/* The integration pages that keep their own text below the first screen. */
.as-hero h1,.as-links h2{font-family:'Gabarito',sans-serif;text-wrap:balance;margin:0}
.as-hero p{text-wrap-style:pretty}
.mchimp,.hs,.wp,.cpanelx,.zap,.n8,.cr{font-size:14px;line-height:20px;text-align:start}
.mchimp{display:grid;gap:12px}
.mc-camp,.mc-res,.hs,.cpanelx,.zs,.cr-pop{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 32px 64px -24px rgba(20,61,46,.3)}
.mc-camp{padding:24px}.mc-k,.cr-k{font-size:12px;line-height:16px;color:var(--muted)}.mc-t{font:700 24px/32px 'Gabarito',sans-serif}.mc-r{color:var(--muted)}
.mc-send,.mc-watch{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;background:#ffe01b;color:#241c15;font-weight:600}
.mc-send i,.mc-watch i{width:8px;height:8px;border-radius:50%;background:#241c15}
.mc-res{padding:24px}.mc-res b{font:800 48px/48px 'Gabarito',sans-serif}.mc-res span{color:var(--muted);font-size:18px}.mc-res p{margin-top:4px}
.hs{padding:24px}.hs-h{font-weight:600;margin-bottom:12px!important}
.hs ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hs li{display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:8px;background:var(--soft)}
.hs li b{font:700 20px/28px 'Gabarito',sans-serif;color:var(--leaf)}.hs li b.low{color:#d9532c}
.hs-n{margin-top:12px!important;color:var(--muted)}
.wp{display:grid;grid-template-columns:120px minmax(0,1fr);border-radius:12px;overflow:hidden;box-shadow:0 32px 64px -24px rgba(20,61,46,.3);min-height:320px}
.wp-side{display:grid;align-content:start;gap:4px;padding:12px;background:#1d2327;color:#c3c4c7}.wp-side span{padding:4px 8px}.wp-side .cur{background:#2271b1;color:#fff}
.wp-main{display:grid;gap:12px;align-content:start;padding:24px;background:#f0f0f1;color:#1d2327}
.wp-h{font:700 20px/28px 'Gabarito',sans-serif}.wp-l.ok{color:#00703c}.wp-l.bad{color:#b32d2e}
.wp-main code{display:block;padding:8px 12px;background:#fff;border-radius:4px;font-size:12px;line-height:16px}
.cpanelx{padding:24px;display:grid;gap:12px}
.pn-h{font-weight:600}.pn-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pk .pn-g{grid-template-columns:repeat(2,minmax(0,1fr))}
.pn-g span{padding:12px 8px;border:1px solid var(--line);border-radius:8px;text-align:center;font-size:12px;line-height:16px;color:var(--muted)}
.pn-g .hot{border-color:var(--accent);color:var(--accent);font-weight:600}
.pn-l.bad{color:#b3261e}.pn-l.ok{color:var(--leaf);font-weight:600}
.pn-b{padding:8px 12px;border:0;border-radius:8px;background:var(--accent);color:#fff;font:600 14px/20px 'Instrument Sans',sans-serif}
.zap{display:grid;gap:8px;position:relative}
.zs{display:flex;align-items:center;gap:12px;padding:12px 16px;box-shadow:none}
.zs b{display:flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:6px;background:var(--soft);font-size:12px}
.zs.hot{border-color:var(--accent);color:var(--accent);font-weight:600}
.n8{padding:48px 24px;border-radius:16px;background:#202124;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);background-size:16px 16px;overflow-x:auto}
.n8-c{display:flex;align-items:center;justify-content:center;gap:32px;min-width:760px}
.n8-c .s{position:relative}
.n8-c .s+.s::before{content:"";position:absolute;inset-inline-end:100%;top:50%;width:32px;height:2px;background:#777}
.nn{padding:16px 12px;border-radius:12px;background:#2d2e32;color:#fff;border:1px solid #4a4b50;white-space:nowrap}
.nn.est{border-color:var(--mint);color:var(--mint)}.nn.hot{border-color:#ea4b71;color:#ff9db4}
.cr{border-radius:12px;background:#dee1e6;padding:8px;box-shadow:0 32px 64px -24px rgba(20,61,46,.3)}
.cr-bar{display:flex;align-items:center;gap:8px;padding:4px}.cr-url{flex:1;padding:4px 12px;border-radius:999px;background:#fff;color:#5f6368}.cr-ico{display:flex}
.cr-pop{margin:8px 0 0 auto;max-width:320px;padding:16px;display:grid;gap:8px;min-height:220px;align-content:start}
.cr-a{font:12px/16px ui-monospace,monospace}.cr-w{color:var(--muted)}.cr-r b{font:800 48px/48px 'Gabarito',sans-serif}.cr-r span{color:var(--muted);font-size:18px}.cr-n{color:var(--leaf);font-weight:600}
.as-page .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border:0;border-radius:12px;color:#fff;font-size:16px;line-height:24px;font-weight:600;text-decoration:none}
.as-hero.dark .btn,.as-page .btn.light{color:var(--ink)}

/* The blog: a first screen per post, cards with a colour of their own. */
.post-hero{background:var(--soft);padding:32px 0 64px}
.post-hero .wrap{max-width:1176px;padding:0 24px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:center}
.post-hero h1{margin:0;font:800 48px/48px 'Gabarito',sans-serif;letter-spacing:-.015em;text-wrap:balance;
  background:linear-gradient(90deg,#0f2d22,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.post-hero .lede{margin:16px 0 0;font-size:18px;line-height:28px;color:var(--muted);text-wrap-style:pretty}
.post-hero .byline{margin-top:24px}
.post-hero .crumbs{margin-bottom:24px}
.post-hero.flip .ph-text{order:2}
.post-hero.dark{background:var(--deep);color:#fff}
.post-hero.dark h1{background:linear-gradient(90deg,#fff,#8fd4ad);-webkit-background-clip:text;background-clip:text;color:transparent}
.post-hero.dark .lede,.post-hero.dark .byline,.post-hero.dark .byline a,.post-hero.dark .crumbs,.post-hero.dark .crumbs a{color:#b7d3c5}
.ph-text>*{opacity:0;transform:translateY(24px);animation:rise .8s var(--curve) forwards}
.ph-text>:nth-child(2){animation-delay:.08s}.ph-text>:nth-child(3){animation-delay:.16s}.ph-text>:nth-child(4){animation-delay:.24s}
.bs{display:grid;gap:12px;padding:24px;min-height:320px;align-content:start;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);font-size:14px;line-height:20px;
  box-shadow:0 2px 4px rgba(20,61,46,.06),0 32px 64px -24px rgba(20,61,46,.35)}
.bs p{margin:0}
.bs-h{font:700 18px/28px 'Gabarito',sans-serif}
.bs-l{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bs-l li{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;background:var(--soft)}
.bs-l i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--leaf)}
.bs-l .warn i{background:var(--amber)}.bs-l .bad i{background:#cf222e}
.bs-l b{margin-inline-start:auto;font-weight:600;color:var(--leaf)}.bs-l .warn b{color:var(--amber)}.bs-l .bad b{color:#cf222e}
.bs-v{padding:8px 12px;border-radius:8px;background:var(--ink);color:#fff;font-weight:600}
.bs-v.good{background:var(--leaf)}
.bs-from{padding:12px;border:1px dashed var(--line);border-radius:8px;font-family:ui-monospace,monospace}
.bs-al{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:8px;background:var(--soft)}
.bs-al em{font-style:normal;font-weight:700;color:var(--accent);min-width:48px}
.bs-al code{font-size:12px;line-height:16px;min-width:0;overflow-wrap:anywhere}
.bs-al span{margin-inline-start:auto;font-size:12px;color:var(--leaf);font-weight:600}
.bs-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.bs-2 .k{font-size:12px;line-height:16px;font-weight:600;color:var(--muted);margin-bottom:8px}
.bs-b{display:grid;gap:4px;margin-bottom:8px}
.bs-b i{display:block;height:8px;border-radius:4px;background:var(--accent);transform:scaleX(var(--w));transform-origin:0 50%}
[dir=rtl] .bs-b i{transform-origin:100% 50%}
.bs-ch{position:relative;height:180px}
.bars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:8px}
.bars .s{flex:1;height:100%;display:flex;align-items:flex-end}
.bars i{display:block;width:100%;height:100%;border-radius:4px 4px 0 0;background:var(--accent);transform:scaleY(var(--h));transform-origin:50% 100%}
.bars i.hi{background:#cf222e}
.bs-ch .l{position:absolute;inset-inline:0;z-index:1;border-top:1px dashed #9fc4b2;font-size:12px;line-height:16px;color:var(--muted)}
.bs-ch .l3{bottom:60%;border-color:#cf222e;color:#cf222e}.bs-ch .l1{bottom:20%}
.bs-c{font:14px/20px ui-monospace,monospace;padding:12px;border-radius:8px;background:var(--soft);overflow-wrap:anywhere}
.bs-c.bad{background:#fdecea;color:#b3261e}
.post-page .article h2 .num{color:var(--accent)}
.idx-body{padding-top:32px}
.featured .tag{color:var(--accent)}
.pc-ico{display:flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:12px;background:var(--accent);color:#fff;margin-bottom:12px;transition:transform .5s var(--curve)}
.pc-ico svg{width:20px;height:20px}
.card:hover .pc-ico,a:hover>.pc-ico{transform:scale(1.08)}
.idx-band{background:var(--deep);color:#fff;padding:48px 0}
.idx-band .wrap{max-width:1176px;padding:0 24px}
.idx-band h1{margin:0;font:800 60px/60px 'Gabarito',sans-serif;background:linear-gradient(90deg,#fff,#8fd4ad);-webkit-background-clip:text;background-clip:text;color:transparent}
.idx-band .lede{margin:12px 0 0;max-width:680px;font-size:18px;line-height:28px;color:#b7d3c5}
.idx-band .crumbs,.idx-band .crumbs a,.idx-band .byline,.idx-band .byline a{color:#b7d3c5}
.featured.withscene{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px;align-items:center}
@media (max-width:1000px){
  .post-hero .wrap,.featured.withscene{grid-template-columns:minmax(0,1fr);gap:32px}
  .post-hero.flip .ph-text{order:0}
  .post-hero{padding:24px 0 48px}
  .post-hero h1{font-size:36px;line-height:40px}
  .idx-band h1{font-size:48px;line-height:48px}
  .bs-2{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.ph-text>*{opacity:1;transform:none}}
.post-hero.dark .crumbs *,.idx-band .crumbs *{color:#b7d3c5}