/* ══ KWICKDO — light theme ══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#FFFFFF; --bg-alt:#FBF7F9; --bg-deep:#F5EEF1;
  --surface:#FFFFFF; --surface-2:#F7F1F4; --surface-3:#EFE6EB;
  --text:#141020; --ink:#141020;
  --ink-700:#FFFFFF; --ink-800:#FBF7F9; --ink-600:#EFE6EB;
  --mist:#6B6478; --mist-light:#403A4D; --faint:#9B93A6;
  --line:#EDE6EA; --line-2:#DCD2D9;
  /* sampled from the logo */
  --logo-warm:#FA4D4B; --logo-mid:#F02A5F; --logo-cool:#E8308A;
  --grad:linear-gradient(115deg,#FA4D4B 0%,#F02A5F 48%,#E8308A 100%);
  --brand:#E02566; --brand-600:#C7175A; --brand-400:#F0537F; --brand-200:#C7175A;
  --brand-tint:#FDEDF3; --brand-tint-2:#FBD9E6;
  --coral:#C0392B; --coral-tint:#FCEEEC;
  --teal:#00857A;  --teal-tint:#E6F5F3;
  --amber:#9A5B00; --amber-tint:#FCF2E0;
  --shadow-sm:0 1px 2px rgba(20,16,32,.05);
  --shadow:0 4px 16px -4px rgba(20,16,32,.10);
  --shadow-lg:0 12px 32px -8px rgba(20,16,32,.18);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;line-height:1.5;min-height:100vh;
  background-image:radial-gradient(900px 480px at 12% -10%,rgba(250,77,75,.07),transparent 62%),
                   radial-gradient(760px 420px at 92% 2%,rgba(232,48,138,.06),transparent 62%);
  background-attachment:fixed}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--brand-tint-2);color:var(--brand-600)}
::-webkit-scrollbar{width:11px}::-webkit-scrollbar-track{background:var(--bg-alt)}
::-webkit-scrollbar-thumb{background:#D9CCD3;border-radius:8px;border:2px solid var(--bg-alt)}
::-webkit-scrollbar-thumb:hover{background:var(--brand-400)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--brand);color:#fff;padding:8px 16px;border-radius:8px}

.container-x{margin:0 auto;width:100%;max-width:1200px;padding:0 20px}
@media(min-width:640px){.container-x{padding:0 32px}}
.narrow{max-width:760px;margin:0 auto}

/* ── header ── */
#hdr{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:all .3s;background:rgba(255,255,255,.72);backdrop-filter:blur(12px)}
#hdr.scrolled{border-bottom-color:var(--line);background:rgba(255,255,255,.92);box-shadow:var(--shadow-sm)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.logo{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.logo-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;
  background:var(--grad);box-shadow:0 4px 14px -2px rgba(232,48,110,.45)}
.logo-mark svg{width:16px;height:16px;color:#fff}
.logo-word{font-size:19px;font-weight:800;letter-spacing:-.035em;color:var(--text)}
.nav-links{display:none;list-style:none;align-items:center;gap:2px}
@media(min-width:1024px){.nav-links{display:flex}}
.nav-links a{padding:8px 16px;border-radius:9999px;font-size:13.5px;font-weight:500;color:var(--mist);transition:.2s}
.nav-links a:hover{color:var(--text);background:var(--surface-2)}
.nav-links a.on{background:var(--brand-tint);color:var(--brand-600);font-weight:600}
.nav-cta{display:none;align-items:center;gap:8px}
@media(min-width:1024px){.nav-cta{display:flex}}
.nav-ghost{padding:8px 14px;border-radius:9999px;font-size:13.5px;font-weight:500;color:var(--mist);transition:.2s}
.nav-ghost:hover{color:var(--text);background:var(--surface-2)}
.mtoggle{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--text);cursor:pointer}
@media(min-width:1024px){.mtoggle{display:none}}
.mtoggle svg{width:20px;height:20px}
.mmenu{border-top:1px solid var(--line);background:rgba(255,255,255,.98);backdrop-filter:blur(16px);box-shadow:var(--shadow)}
.mmenu .container-x{display:flex;flex-direction:column;gap:2px;padding-top:16px;padding-bottom:16px}
.mmenu a{padding:11px 12px;border-radius:10px;font-size:14px;font-weight:500;color:var(--mist-light)}
.mmenu a:hover{background:var(--surface-2);color:var(--text)}
.mmenu-cta{display:flex;gap:8px;margin-top:8px}
.mmenu-cta .btn{flex:1}

/* ── type ── */
.h1{font-size:2.5rem;font-weight:800;line-height:1.05;letter-spacing:-.03em;color:var(--text)}
@media(min-width:640px){.h1{font-size:3.5rem}}@media(min-width:1024px){.h1{font-size:4.25rem}}
.h2{font-size:1.75rem;font-weight:800;line-height:1.12;letter-spacing:-.025em;color:var(--text)}
@media(min-width:640px){.h2{font-size:2.25rem}}@media(min-width:1024px){.h2{font-size:2.75rem}}
.h3{font-size:1.15rem;font-weight:700;letter-spacing:-.015em;color:var(--text)}
.lead{font-size:1rem;line-height:1.7;color:var(--mist-light)}
@media(min-width:640px){.lead{font-size:1.1rem}}
.eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--brand-600)}
.muted{color:var(--mist)}
.small{font-size:13px}
.tiny{font-size:11.5px}
.gradient-text{background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}

section{padding:64px 0}
@media(min-width:640px){section{padding:88px 0}}
.sec-tight{padding:40px 0}
.sec-alt{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-alt)}
.sec-head{max-width:760px;margin-bottom:48px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center;max-width:640px}
.sec-head .lead{margin-top:16px}
.divider{height:1px;background:var(--line);margin:40px 0}

/* ── card / grid ── */
.card{border-radius:20px;border:1px solid var(--line);background:var(--surface);transition:.25s;box-shadow:var(--shadow-sm)}
.card-hover:hover{border-color:var(--brand-400);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.p5{padding:20px}.p6{padding:24px}.p7{padding:28px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1023px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:639px){.g2,.g3,.g4{grid-template-columns:1fr}}
.split{display:grid;gap:40px;grid-template-columns:1fr}
@media(min-width:1024px){.split{grid-template-columns:1.5fr 1fr;gap:48px}}
.flex{display:flex}.between{justify-content:space-between}.center-y{align-items:center}
.gap2{gap:8px}.gap3{gap:12px}.gap4{gap:16px}.wrap{flex-wrap:wrap}
.mt2{margin-top:8px}.mt3{margin-top:12px}.mt4{margin-top:16px}.mt5{margin-top:20px}
.mt6{margin-top:24px}.mt8{margin-top:32px}.mb4{margin-top:0;margin-bottom:16px}
.text-center{text-align:center}.text-right{text-align:right}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:9999px;
  font-weight:600;border:none;cursor:pointer;font-family:inherit;transition:.2s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-p{background:var(--brand);color:#fff;box-shadow:0 4px 16px -4px rgba(224,37,102,.45)}
.btn-p:hover{background:var(--brand-600);box-shadow:0 6px 20px -4px rgba(224,37,102,.55)}
.btn-o{border:1px solid var(--line-2);background:var(--surface);color:var(--text)}
.btn-o:hover{border-color:var(--brand-400);background:var(--brand-tint);color:var(--brand-600)}
.btn-danger{background:var(--coral-tint);color:var(--coral);border:1px solid #F2C4BE}
.btn-danger:hover{background:#F8DCD6}
.btn-lg{height:52px;padding:0 32px;font-size:15px}
.btn-md{height:44px;padding:0 24px;font-size:14px}
.btn-sm{height:36px;padding:0 16px;font-size:13px}
.btn-full{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn[disabled]:active{transform:none}

/* ── pills / badges ── */
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:9999px;border:1px solid var(--line);
  background:var(--surface);padding:5px 13px;font-size:11.5px;font-weight:600;color:var(--mist-light);box-shadow:var(--shadow-sm)}
.tag{display:inline-flex;align-items:center;gap:6px;border-radius:8px;padding:4px 9px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.tag svg{width:13px;height:13px}
.st{display:inline-flex;align-items:center;gap:6px;border-radius:9999px;border:1px solid;padding:4px 10px;font-size:11px;font-weight:700}
.st .dot{width:6px;height:6px;border-radius:50%}
.st-teal{border-color:#A9DCD6;background:var(--teal-tint);color:var(--teal)}
.st-teal .dot{background:var(--teal);animation:pulse 2s infinite}
.st-amber{border-color:#E8CE9A;background:var(--amber-tint);color:var(--amber)}
.st-amber .dot{background:var(--amber)}
.st-coral{border-color:#F2B6B9;background:var(--coral-tint);color:var(--coral)}
.st-coral .dot{background:var(--coral)}
.st-brand{border-color:#F6BBD2;background:var(--brand-tint);color:var(--brand-600)}
.st-brand .dot{background:var(--brand)}
.st-mist{border-color:var(--line-2);background:var(--surface-2);color:var(--mist)}
.st-mist .dot{background:var(--mist)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.avatar{display:grid;place-items:center;border-radius:50%;font-weight:800;flex-shrink:0;
  background:var(--grad);color:#fff}
.av-sm{width:32px;height:32px;font-size:11px}
.av-md{width:44px;height:44px;font-size:13px}
.av-lg{width:64px;height:64px;font-size:18px}

/* ── forms ── */
label{display:block;font-size:12.5px;font-weight:600;color:var(--mist-light);margin-bottom:6px}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],
input[type=date],input[type=datetime-local],select,textarea{
  width:100%;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);
  padding:0 16px;height:44px;color:var(--text);font-size:14px;font-family:inherit;outline:none;transition:.2s}
textarea{height:auto;padding:12px 16px;resize:vertical;line-height:1.6}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E8A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
input:disabled{background:var(--surface-2);color:var(--mist)}
input[type=file]{padding:10px;height:auto;font-size:13px}
input[type=range]{width:100%;height:6px;-webkit-appearance:none;appearance:none;background:var(--surface-3);border-radius:9999px;padding:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--brand);cursor:pointer;box-shadow:0 2px 6px rgba(224,37,102,.4)}
.field{margin-bottom:16px}
.field-row{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media(max-width:639px){.field-row{grid-template-columns:1fr}}
.hint{font-size:11.5px;color:var(--mist);margin-top:5px}
.err{font-size:12px;color:var(--coral);margin-top:5px}
.checkline{display:inline-flex;align-items:center;gap:8px;border-radius:9999px;border:1px solid var(--line-2);
  background:var(--surface);padding:8px 14px;font-size:13px;color:var(--mist-light);cursor:pointer;transition:.2s;margin:0 6px 6px 0}
.checkline:hover{border-color:var(--brand-400);color:var(--text);background:var(--brand-tint)}
.checkline input{width:14px;height:14px;accent-color:var(--brand);margin:0}
.flash-wrap{padding-top:16px}
.flash{border-radius:12px;padding:12px 16px;font-size:13.5px;font-weight:500;margin-bottom:8px;border:1px solid}
.flash-ok{background:var(--teal-tint);border-color:#A9DCD6;color:var(--teal)}
.flash-err{background:var(--coral-tint);border-color:#F2B6B9;color:var(--coral)}
.flash-info{background:var(--brand-tint);border-color:#F6BBD2;color:var(--brand-600)}

/* ── tables ── */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  color:var(--mist);padding:12px 16px;background:var(--bg-alt);white-space:nowrap}
.tbl td{padding:12px 16px;border-top:1px solid var(--line)}
.tbl tbody tr:hover{background:var(--bg-alt)}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-sm)}
.num{font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums}
.up{color:var(--teal)}.down{color:var(--coral)}

/* ── misc ── */
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm)}
@media(max-width:639px){.stat-strip{grid-template-columns:repeat(2,1fr)}}
.stat-strip>div{background:var(--surface);padding:24px 16px;text-align:center}
.stat-v{font-size:1.75rem;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.stat-k{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--mist);margin-top:4px}
.bar{height:6px;border-radius:9999px;background:var(--surface-3);overflow:hidden}
.bar>span{display:block;height:100%;border-radius:9999px;background:var(--brand)}
.urgent{color:var(--coral)!important}
.hero-glow{position:absolute;left:50%;top:-18rem;width:36rem;height:36rem;transform:translateX(-50%);
  border-radius:50%;background:rgba(240,42,95,.13);filter:blur(120px);pointer-events:none}
.rel{position:relative}
.grid-bg{position:absolute;inset:0;pointer-events:none;opacity:.8;
  background-image:linear-gradient(rgba(20,16,32,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,16,32,.035) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 55% at 50% 0%,#000,transparent);
  mask-image:radial-gradient(70% 55% at 50% 0%,#000,transparent)}
.faq-item{border-top:1px solid var(--line)}
.faq-item:first-child{border-top:none}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;
  background:none;border:none;color:var(--text);font-family:inherit;font-size:15px;font-weight:600;text-align:left;cursor:pointer}
.faq-q:hover{background:var(--bg-alt)}
.faq-q .ic{flex-shrink:0;width:16px;height:16px;color:var(--brand);transition:transform .3s}
.faq-item.open .faq-q .ic{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 24px 24px;font-size:14px;line-height:1.7;color:var(--mist-light)}
.prose p{margin-bottom:14px;color:var(--mist-light);line-height:1.75}
.prose h2{margin:28px 0 12px}
.list-check{list-style:none}
.list-check li{display:flex;gap:12px;font-size:14px;color:var(--mist-light);margin-bottom:12px}
.list-check svg{flex-shrink:0;width:16px;height:16px;color:var(--teal);margin-top:3px}
.empty{padding:64px 24px;text-align:center}
.crit-row{display:flex;align-items:center;justify-content:space-between;border-radius:10px;
  background:var(--bg-alt);padding:10px 14px;margin-bottom:8px}
.sticky-side{position:sticky;top:88px}
@media(max-width:1023px){.sticky-side{position:static}}
.cd-cells{display:flex;gap:8px}
.cd-cell{min-width:58px;border-radius:12px;border:1px solid var(--line);
  background:var(--bg-alt);padding:8px;text-align:center}
.cd-cell .v{font-family:ui-monospace,monospace;font-size:1.25rem;font-weight:700;color:var(--text)}
.cd-cell .l{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--mist)}
.blind-note{border-radius:12px;border:1px solid #F6BBD2;background:var(--brand-tint);
  padding:16px;font-size:12.5px;line-height:1.65;color:var(--brand-600)}
.ok-note{border-radius:12px;border:1px solid #A9DCD6;background:var(--teal-tint);
  padding:16px;font-size:12.5px;line-height:1.65;color:var(--teal)}
.site-footer{margin-top:96px;border-top:1px solid var(--line);background:var(--bg-alt);padding:56px 0 40px}
.foot-grid{display:grid;gap:40px;grid-template-columns:1.4fr 1fr 1fr 1fr}
@media(max-width:767px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:479px){.foot-grid{grid-template-columns:1fr}}
.foot-blurb{margin-top:16px;max-width:20rem;font-size:14px;line-height:1.7;color:var(--mist)}
.site-footer h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--mist)}
.site-footer ul{list-style:none;margin-top:16px}
.site-footer li{margin-bottom:10px}
.site-footer li a{font-size:13.5px;color:var(--mist-light)}
.site-footer li a:hover{color:var(--brand-600)}
.foot-bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:12.5px;color:var(--mist)}
.foot-bottom a{margin-left:20px}
.foot-bottom a:hover{color:var(--brand-600)}

/* ── logo ── */
.logo{gap:9px}
.logo-mark{width:34px;height:34px;border-radius:0;background:none;box-shadow:none;
  display:grid;place-items:center;flex-shrink:0}
.logo-mark svg{width:34px;height:34px}
.logo-mark svg circle,.logo-mark svg path{stroke:url(#kwickgrad)}
.logo-word{font-size:23px;font-weight:800;letter-spacing:-.045em;color:var(--text);line-height:1}
.logo-do{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.site-footer .logo-word{font-size:21px}
@media(max-width:420px){.logo-mark,.logo-mark svg{width:29px;height:29px}.logo-word{font-size:20px}}