/* ===== Motion and extras (loaded after styles.css) ===== */
.slash-line{display:inline-grid;align-items:stretch;justify-content:normal;height:auto;line-height:inherit;white-space:normal;vertical-align:top}
.slash-line>*{grid-area:1/1}
.slash-ghost{visibility:hidden}
.slash-live{display:inline-flex;align-items:center;justify-content:center;justify-self:center;align-self:center}
.h1 .slash-line{white-space:nowrap}
.slash-line.is-done .slash-text{animation:slash-pop .45s cubic-bezier(.2,.8,.3,1)}
.pill{display:inline-flex;align-items:center;gap:6px}

/* ===== Browser logos in the top pill ===== */
.pill-brands{padding-left:8px}
.pill-brands .brand-ico{display:block;flex-shrink:0}
.pill-brands .brand-ico+.brand-ico{margin-left:-2px}

/* ===== Reveal on scroll ===== */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1);transition-delay:var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* ===== Libraries pop-up ===== */
.lib-wrap{position:relative}
.lib-pop{position:absolute;right:12px;top:-20px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 10px;background:var(--foreground);color:var(--background);border-radius:999px;box-shadow:0 10px 24px rgba(0,0,0,.18);font-size:13px;line-height:18px;white-space:nowrap;opacity:0;transform:translateY(8px) scale(.7);transform-origin:right bottom}
.lib-pop b{font-weight:600}
.lib-wrap.in .lib-pop{animation:lib-pop-in .5s .5s cubic-bezier(.2,.8,.3,1.4) forwards,lib-float 3.2s 1.1s ease-in-out infinite alternate}
@keyframes lib-pop-in{to{opacity:1;transform:none}}
@keyframes lib-float{from{opacity:1;transform:translateY(0)}to{opacity:1;transform:translateY(-6px)}}
.lib-dot{width:8px;height:8px;border-radius:50%;background:#3ba755;box-shadow:0 0 0 0 rgba(59,167,85,.6);animation:lib-ping 1.8s infinite}
@keyframes lib-ping{70%{box-shadow:0 0 0 7px rgba(59,167,85,0)}100%{box-shadow:0 0 0 0 rgba(59,167,85,0)}}
.lib-ticker{display:inline-block;height:18px;overflow:hidden;padding:0 8px;border-radius:999px;background:color-mix(in oklab,var(--background) 16%,transparent);font-family:var(--mono);font-size:12px}
.lib-roll{display:flex;flex-direction:column;animation:lib-roll 10.5s cubic-bezier(.7,0,.3,1) infinite}
.lib-roll span{height:18px}
@keyframes lib-roll{0%,12%{transform:translateY(0)}16.6%,28.6%{transform:translateY(-18px)}33.3%,45.3%{transform:translateY(-36px)}50%,62%{transform:translateY(-54px)}66.6%,78.6%{transform:translateY(-72px)}83.3%,95.3%{transform:translateY(-90px)}100%{transform:translateY(-108px)}}
@media (max-width:720px){.lib-pop{position:static;margin-bottom:12px;transform-origin:left bottom}}
@media (prefers-reduced-motion:reduce){.lib-pop{opacity:1;transform:none}.lib-wrap.in .lib-pop{animation:none}.lib-roll,.lib-dot{animation:none}}

/* ===== Pricing (matches app.slashthat.app/pricing) ===== */
.bill{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:20px}
.bill-toggle{display:inline-flex;align-items:center;padding:4px;background:var(--card);border:1px solid var(--border);border-radius:999px}
.bill-toggle button{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border:0;border-radius:999px;background:transparent;color:var(--muted-foreground);font:inherit;font-size:14px;line-height:20px;font-weight:500;cursor:pointer;transition:background-color .15s,color .15s}
.bill-toggle button:hover{color:var(--foreground)}
.bill-toggle button[aria-pressed="true"]{background:#059669;color:#fff}
.bill-save{padding:2px 8px;border-radius:999px;background:#d1fae5;color:#047857;font-size:11px;line-height:16px;font-weight:600}
.bill-toggle button[aria-pressed="true"] .bill-save{background:rgba(52,211,153,.3);color:#d1fae5}
:root[data-theme="dark"] .bill-toggle button[aria-pressed="false"] .bill-save{background:rgba(16,185,129,.15);color:#6ee7b7}
.bill-note{font-size:12px;line-height:16px;color:var(--muted-foreground)}
[data-cycle="yearly"] .m,[data-cycle="monthly"] .y{display:none}
.plans{gap:20px}
.plans .plan{gap:0;padding:24px}
.plans .plan.featured{border-color:color-mix(in oklab,var(--primary) 60%,transparent)}
.plans .popular{top:-12px;left:24px;right:auto;padding:2px 12px;font-weight:600}
.plan-name{text-align:center;font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground)}
.plan-price{margin-top:12px;text-align:center;font-size:30px;line-height:36px;font-weight:600;white-space:nowrap}
.plan-price small{font-size:16px;font-weight:400;color:var(--muted-foreground)}
.plan-billed{margin-top:4px;text-align:center;font-size:12px;line-height:16px;color:var(--muted-foreground)}
.plan-feats{margin:24px 0 24px;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:20px;color:var(--muted-foreground)}
.plan-feats li{display:flex;align-items:flex-start;gap:8px}
.plan-feats li svg{flex-shrink:0;margin-top:2px;color:var(--primary)}
.plan-feats li.lead-feat{font-weight:500;color:var(--foreground)}
.plans .plan-btn{margin-top:auto;width:100%;min-height:36px;font-size:14px}

/* ===== Why cards: centered, modern icons ===== */
.why-card{align-items:center;text-align:center;padding:32px 28px}
.why-ico{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:4px;border-radius:16px;color:var(--hl);background:linear-gradient(180deg,color-mix(in oklab,var(--hl) 16%,transparent),color-mix(in oklab,var(--hl) 6%,transparent));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--hl) 22%,transparent)}
.why-card .h3{max-width:260px}

/* ===== Field demo ===== */
.mono-brand{font-family:var(--mono);font-weight:600;letter-spacing:-.04em}
.demo-dots{display:inline-flex;gap:6px;margin-left:auto}
.demo-dots button{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:var(--border);cursor:pointer;transition:width .25s,background-color .25s}
.demo-dots button[aria-pressed="true"]{width:20px;background:var(--hl)}
.demo-card.swap .demo-top,.demo-card.swap .demo-text{animation:out-in .35s ease both}

/* ===== Final button with browser logos ===== */
.btn-brands{gap:10px}
.brand-pair{display:inline-flex;align-items:center;padding:3px 5px;border-radius:999px;background:#fff}
.brand-pair svg{display:block}
.brand-pair svg+svg{margin-left:-2px}
.demo-top .badge{white-space:nowrap;flex-shrink:0}