/* One button system for the page. Loaded after the other stylesheets so it replaces the old
   button sizes, including the shrunken sizes in the mobile media queries. */
:root{--purple-hover:#5f3dd7;--ink-hover:#36372f;--ring:0 0 0 3px #f7f7f0,0 0 0 6px #7250ed}

.button,.hero-actions .button,.closing .button,.live-copy .button{gap:10px;min-height:52px;padding:0 24px;border-radius:999px;font-size:16px;font-weight:550;letter-spacing:-.01em;line-height:1;white-space:nowrap;transition:background .25s ease,box-shadow .25s ease,transform .18s cubic-bezier(.3,.7,.4,1.4)}
.button:hover{transform:translateY(-1px)}
.button:active{transform:translateY(1px) scale(.98);transition-duration:.08s}
.button:focus-visible,.text-link:focus-visible{outline:none;box-shadow:var(--ring)}
.button .i,.text-link .i,.demo-bottom .i,.footer .i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.3,.7,.4,1.4)}
.button:hover .i-up,.text-link:hover .i-up,.footer a:hover .i-up{transform:translate(2px,-2px)}
.button:hover .i-down,.text-link:hover .i-down{transform:translateY(2px)}
.button:hover .i-right,.demo-bottom button:hover .i-right{transform:translateX(3px)}

/* Primary: one per view, violet. */
.button-purple{background:var(--purple);color:#fff;box-shadow:inset 0 1px 0 #ffffff33,0 1px 2px #2b136a33,0 8px 20px #7250ed33}
.button-purple:hover{background:var(--purple-hover)}
/* Strong neutral: ink, for colored panels and the header. */
.button-ink{background:var(--ink);color:#fff;box-shadow:inset 0 1px 0 #ffffff1f,0 1px 2px #21221f33,0 8px 20px #21221f1f}
.button-ink:hover{background:var(--ink-hover)}
/* Secondary: white raised. */
.button-light{background:#fff;color:var(--ink);box-shadow:0 1px 2px #21221f12,0 6px 18px #21221f0f,inset 0 0 0 1px #21221f0d}
.button-light:hover{background:#fbfbf7;box-shadow:0 1px 2px #21221f14,0 10px 24px #21221f14,inset 0 0 0 1px #21221f12}
.button-small,.header .button-small{min-height:42px;padding:0 18px;font-size:15px;gap:8px}
.button-small .i{width:16px;height:16px}

/* Quiet text action. */
.text-link{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:550;color:var(--ink);border-radius:8px;padding:6px 2px;transition:color .25s}
.text-link:hover{color:var(--purple)}

/* Placements */
.hero-actions{gap:12px;margin-top:32px;flex-wrap:wrap}
.header .button{margin-left:0}
.demo-bottom button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;background:#fff;font-size:14px;font-weight:600;box-shadow:0 1px 2px #21221f12,0 4px 12px #21221f0d,inset 0 0 0 1px #21221f12;transition:box-shadow .25s,transform .18s}
.demo-bottom button:hover{box-shadow:0 1px 2px #21221f14,0 8px 18px #21221f14,inset 0 0 0 1px #21221f17}
.demo-bottom button:active{transform:scale(.97)}
.demo-bottom button span{font-size:inherit;color:inherit}
.demo-bottom .i{width:16px;height:16px;color:var(--purple)}
.idea-arrow{background:var(--purple);color:#fff}
.idea-arrow .i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.live-copy .button{margin-top:4px}
.closing-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.closing .button{font-size:16px}
.closing .button-light{background:#fff;color:var(--ink)}
.closing .button-light:hover{background:#f4f0ff}
.closing .text-link{color:#fff}
.closing .text-link:hover{color:#e9e2ff}
.closing .button:focus-visible,.closing .text-link:focus-visible{box-shadow:0 0 0 3px #7653e9,0 0 0 6px #fff}
.footer>a:not(.logo){display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600}
.footer .i{width:15px;height:15px}

@media(max-width:1180px){.hero-actions .button{padding:0 22px;font-size:16px;gap:10px;min-height:52px}.text-link{font-size:15px}}
@media(max-width:900px){.hero-actions{flex-direction:row;align-items:center}.button-small{font-size:14px}}
@media(max-width:680px){
  .header .button{min-height:40px;padding:0 15px;font-size:14px;gap:7px}
  .hero-actions .button,.closing .button,.live-copy .button{min-height:50px;font-size:15px;padding:0 20px}
  .hero-actions .text-link{font-size:15px}
  .demo-bottom button{font-size:13px}
}
@media(max-width:380px){.header .button{font-size:13px;padding:0 13px}.hero-actions .button{font-size:15px;padding:0 18px}}
@media(prefers-reduced-motion:reduce){.button,.button .i,.text-link .i{transition:none}.button:hover,.button:active{transform:none}}
.chip-cta{font-weight:600}
.chip-cta .i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.chip-cta:hover>span{transform:translateX(3px)}