/* View as agent (website/design/agent-view, direction A "The page melts"). The switch sits
   above the page heading; Agent drains the real page, then a terminal types the markdown twin. */
.hv{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 0 18px}
#pricing .hv{justify-content:flex-start}
.hvs{position:relative;display:inline-flex;padding:4px;border-radius:999px;background:rgba(17,17,17,.06);box-shadow:inset 0 0 0 1px var(--line)}
.hvs button{position:relative;z-index:1;height:34px;padding:0 16px;border:0;background:none;border-radius:999px;font:600 13.5px var(--sans);color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:color .3s}
.hvs button[aria-checked="true"]{color:var(--ink)}
.hvs .knob{position:absolute;top:4px;left:4px;height:34px;width:0;border-radius:999px;background:var(--white);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--line);transition:translate .52s cubic-bezier(.34,1.56,.64,1),width .38s var(--ease)}
.hvs.agent .knob{background:#141413;box-shadow:none}.hvs.agent button[aria-checked="true"]{color:#5fbf8a}
.hvl{font-size:13px;color:var(--ink-3)}
.is-dark .hvs{background:rgba(255,255,255,.06)}

/* the melt: a fixed layer over the visible screen (the live page is never restyled). It holds
   the on-screen text re-set in mono at the same spots; only opacity and transform animate. */
.avm{position:fixed;inset:0;z-index:999;pointer-events:none;overflow:hidden;contain:strict}
.avm .wash{position:absolute;inset:0;background:#141413;opacity:0;transition:opacity .28s cubic-bezier(.22,1,.36,1);will-change:opacity}
.avm .ghost{position:absolute;inset:0;opacity:0;transform:translateY(6px);transition:opacity .2s ease-out .06s,transform .3s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
.avm .ghost span{position:absolute;font:13px/1.5 var(--mono);color:#b4b1a9;white-space:normal;overflow-wrap:anywhere}
.avm .ghost span.b{font-size:22px;line-height:1.25;color:#e8e6df}
.avm.in .wash,.avm.in .ghost{opacity:1}.avm.in .ghost{transform:none}

/* the terminal */
.avt{position:fixed;inset:0;z-index:1000;transition:opacity .22s ease-out,transform .28s cubic-bezier(.22,1,.36,1);background:#141413;color:#e8e6df;display:flex;flex-direction:column;overflow:hidden;font:15px/1.55 var(--sans)}
.avt .req{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;padding:12px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid #2e2d2a;font:12.5px var(--mono);color:#b4b1a9}
.avt .req>span{min-width:0;overflow-wrap:anywhere}
.avt .req .m,.avt .req .ok{color:#5fbf8a;font-weight:500}.avt .req .dim{color:#6b685f}
.avt .req .sp{flex:1}
.avt .back{height:34px;padding:0 14px;border:0;border-radius:9px;background:#2a2926;color:#f2f1ee;font:600 13px var(--sans);cursor:pointer;transition:scale .45s cubic-bezier(.34,1.56,.64,1)}
.avt .back:active{scale:.94}
.avt .back:focus-visible{outline:2px solid #5fbf8a;outline-offset:2px}
.avt.enter{opacity:0;transform:translateY(8px)}
.avt .body{flex:1;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.avt .ttl{max-width:900px;padding:22px 16px 0;margin:0 auto}
.avt .ttl h2{margin:0;font:600 clamp(20px,calc(2.6*var(--vw,1vw)),26px)/1.2 var(--serif);color:#f2f1ee}
.avt .ttl p{margin:4px 0 0;font-size:13.5px;color:#8f8c84}
.avt .md{max-width:900px;margin:0 auto;padding:18px 16px 18px;font:13.5px/1.75 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;color:#d9d6ce;contain:layout paint}
.avt .md .h{color:#f2f1ee;font-weight:500}.avt .md .hm{color:#5fbf8a}.avt .md .a{color:#7fb2ff}.avt .md .u,.avt .md .li{color:#6b685f}.avt .md .q{color:#e8b86d}
.avt .md .cur{display:inline-block;width:8px;height:15px;background:#5fbf8a;vertical-align:-2px;animation:avblink 1s steps(1) infinite}
@keyframes avblink{50%{opacity:0}}
.avt .note{max-width:900px;margin:0 auto;padding:4px 16px 28px;font-size:12.5px;color:#8f8c84}
.avt .note p{margin:0 0 6px}
/* the free check closes the terminal; it fades up once the twin has finished typing */
.avt .cta{max-width:868px;margin:0 auto 32px;padding:18px 20px;border-radius:14px;background:#1f1e1c;box-shadow:inset 0 0 0 1px #2e2d2a;display:flex;flex-direction:column;align-items:flex-start;gap:6px;opacity:0;transform:translateY(8px);transition:opacity .3s ease-out,transform .45s cubic-bezier(.22,1,.36,1)}
.avt.typed .cta{opacity:1;transform:none}
.avt .cta b{font:600 17px var(--display,var(--sans));color:#f2f1ee}
.avt .cta p{margin:0;font-size:14px;color:#a8a69e}
.avt .cta .go{margin-top:8px;display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;background:var(--coral-btn,#d43a22);color:#fff;font:600 14px var(--sans);text-decoration:none;transition:scale .45s cubic-bezier(.34,1.56,.64,1)}
.avt .cta .go:active{scale:.96}
.avt .cta .go:focus-visible{outline:2px solid #5fbf8a;outline-offset:2px}
@media(max-width:900px){.avt .cta{margin:0 16px 28px}}
@media(max-width:760px){.avt .md{font-size:12.5px}.avt .req{font-size:11.5px}}
@media(prefers-reduced-motion:reduce){.avt .cta,.avt,.hvs .knob,.hvs button{transition:none!important}.avt .md .cur{animation:none}}
/* the scroll captions sit over the hero; they hold no links, so let clicks reach the switch */
.cap{pointer-events:none}