/* Clone Labs Tools: shared look for the login, payment, pricing and dashboard pages */
:root {
  --violet: #661AFF; --violet-hover: #5512E0; --violet-soft: #9B7BFF; --lilac: #DCD3FF; --lilac-bg: #F4F0FF;
  --night: #141742; --night-2: #0C0E2E; --ink: #1A1C33; --graphite: #4A4D63; --steel: #8B8EA6; --line: #E6E4F0; --bg: #F7F5FD; --card: #fff;
  --ok: #1B7F3B; --ok-bg: #E7F6EC; --err: #A02232; --err-bg: #FDE8EA; --pay: #1FAF55; --pay-hover: #17944A;
  --f-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif; --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; --f-logo: "Quicksand", "Figtree", sans-serif;
  --r: 22px; --shadow: 0 30px 60px -40px rgba(20,23,66,.45), 0 1px 0 rgba(20,23,66,.04);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; --ink: #F5F3FF; --graphite: #CBC6E6; --steel: #8F92B5; --line: rgba(220,211,255,.14); --bg: #0C0E2E; --card: #161A4A; --lilac-bg: rgba(155,123,255,.12); --ok-bg: rgba(18,160,127,.15); --ok: #6FE0B0; --err-bg: rgba(217,58,74,.15); --err: #FF8A96; }
}
:root[data-theme="dark"] { color-scheme: dark; --ink: #F5F3FF; --graphite: #CBC6E6; --steel: #8F92B5; --line: rgba(220,211,255,.14); --bg: #0C0E2E; --card: #161A4A; --lilac-bg: rgba(155,123,255,.12); --ok-bg: rgba(18,160,127,.15); --ok: #6FE0B0; --err-bg: rgba(217,58,74,.15); --err: #FF8A96; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.55 var(--f-body); color: var(--ink); background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
a { color: var(--violet); font-weight: 600; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* Top bar */
.top { background: var(--night); color: #fff; position: relative; z-index: 5; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.logo { display: inline-flex; flex-direction: column; align-items: center; color: #fff; text-decoration: none; line-height: 1; }
.logo-word { font-family: var(--f-logo); font-weight: 700; font-size: 26px; letter-spacing: -.02em; white-space: nowrap; }
.logo-flask { display: inline-block; width: .6em; height: .95em; margin: 0 .02em; overflow: visible; vertical-align: baseline; }
.logo-flask .glass { fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; }
.logo-flask .liquid, .logo-flask .bubble { fill: var(--violet-soft); }
.logo-sub { font-family: var(--f-logo); font-weight: 600; font-size: 10.5px; letter-spacing: .32em; padding-left: .32em; margin-top: 2px; color: var(--lilac); }
.tnav { display: flex; align-items: center; gap: 4px; }
.tnav a { color: #DCD3FF; text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 12px; border-radius: 999px; }
.tnav a:hover, .tnav a[aria-current="page"] { color: #fff; background: rgba(155,123,255,.16); }
.tnav .tnav-cta { background: #fff; color: var(--violet); margin-left: 6px; padding: 9px 16px; }
.tnav .tnav-cta:hover { background: var(--lilac-bg); color: var(--violet); }
@media (max-width: 560px) { .tnav a:not(.tnav-cta) { padding: 8px 8px; font-size: 14px; } .logo-word { font-size: 23px; } }

/* Page heading band */
.band { background: radial-gradient(1100px 380px at 85% -20%, rgba(102,26,255,.55), transparent 60%), var(--night); color: #fff; padding: 34px 0 96px; }
.band .kicker { color: var(--violet-soft); font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.band h1 { font-family: var(--f-display); font-size: clamp(2rem, 4.6vw, 2.9rem); line-height: 1.08; letter-spacing: -.02em; margin: 8px 0 10px; }
.band p { color: #CBC6E6; margin: 0; max-width: 620px; font-size: 1.05rem; }
.lift { margin-top: -64px; position: relative; padding-bottom: 64px; }

/* Cards, buttons, forms */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(20px, 3vw, 30px); box-shadow: var(--shadow); }
h2 { font-family: var(--f-display); font-size: 1.35rem; line-height: 1.2; margin: 0 0 12px; }
h3 { font-family: var(--f-display); font-size: 1.1rem; margin: 0 0 6px; }
.muted { color: var(--steel); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 999px; border: 1.5px solid transparent; font: 700 15.5px var(--f-body); cursor: pointer; text-decoration: none; transition: background .2s, transform .2s, border-color .2s; }
.btn:hover { transform: translateY(-1px); }
.btn[disabled] { opacity: .6; cursor: wait; transform: none; }
.btn-p { background: var(--violet); color: #fff; }
.btn-p:hover { background: var(--violet-hover); }
.btn-o { background: transparent; color: var(--violet); border-color: var(--violet); }
.btn-o:hover { background: var(--lilac-bg); }
.btn-pay { background: var(--pay); color: #fff; }
.btn-pay:hover { background: var(--pay-hover); }
.btn-block { width: 100%; }
.link { border: 0; background: none; padding: 0; color: var(--violet); font: 600 14.5px var(--f-body); cursor: pointer; text-decoration: underline; }
form.stack { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-size: 14px; font-weight: 700; }
label small { font-weight: 500; color: var(--steel); }
input, select { font: 500 16px var(--f-body); padding: 13px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); outline: none; width: 100%; }
input:focus, select:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(102,26,255,.14); }
.msg { border-radius: 12px; padding: 10px 12px; font-size: 14px; margin: 0; }
.msg.err { color: var(--err); background: var(--err-bg); }
.msg.ok { color: var(--ok); background: var(--ok-bg); }
.note { font-size: 14px; color: var(--graphite); background: var(--lilac-bg); border-radius: 14px; padding: 12px 14px; margin: 0; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--graphite); font-size: 15px; }
.checks li::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B7F3B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/13px no-repeat; margin-top: 1px; }
.checks b { color: var(--ink); }
.spin { width: 52px; height: 52px; margin: 6px auto 14px; border-radius: 50%; border: 5px solid var(--lilac-bg); border-top-color: var(--violet); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 3s; } .btn:hover { transform: none; } }

/* Footer */
.foot { color: var(--steel); font-size: 14px; padding: 26px 16px 34px; text-align: center; }
.foot a { color: var(--steel); font-weight: 600; margin: 0 6px; }