/* servoki marketing design kit — "rounded liquid"
   Spec: docs/superpowers/specs/2026-06-11-marketing-design-kit.md
   Boxes on neutral ground · green = analytics · blue = convert · no shadows */

:root {
  --bg: #f5f6f8; --bg2: #ffffff;
  --bd: rgba(13, 18, 28, .12); --bd2: rgba(13, 18, 28, .22);
  --tx: #11151c; --mut: #4d5562; --hint: #8a93a3;
  --g20: #d4f0e4; --g40: #a6dfc8; --g60: #4fbf97; --g80: #11936c; --g100: #0a6b4f;
  --gt1: #06392a; --gt2: #1f6b4f;
  --b20: #d9e6f9; --b40: #b3cdf2; --b60: #6f9fe3; --b80: #2f6cc4; --b100: #1f4f9e;
  --bt1: #0d2f5e; --bt2: #2a5798;
  --hero: var(--g80); --herot1: #ffffff; --herot2: #d4f0e4;
  --bandg: #0c7a58; --bandg-tx: #f0fdf8; --bandg-mut: #bdebdb;
  --bandp: #4a3f96; --bandp-tx: #f1effc; --bandp-mut: #c8c2ee;
  --bandc: #a8431f; --bandc-tx: #fdf1ec; --bandc-mut: #f3c4ae;
  --splitg: #0f8a64; --splitb: #2257ad;
  --r-xl: 24px; --r: 16px; --r-s: 10px;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
[data-theme="dark"] {
  --bg: #0b0e14; --bg2: #151b28;
  --bd: rgba(255, 255, 255, .10); --bd2: rgba(255, 255, 255, .18);
  --tx: #eceff4; --mut: #9aa3b2; --hint: #6b7484;
  --g20: #11271f; --g40: #143828; --g60: #1b5a3f; --g80: #14805c; --g100: #37d4a0;
  --gt1: #d9f7ec; --gt2: #8fd9bf;
  --b20: #131c2e; --b40: #16263f; --b60: #1f3a66; --b80: #2c5aa8; --b100: #6ea8ff;
  --bt1: #dce8fd; --bt2: #9cc1ff;
  --hero: var(--g40); --herot1: #ecfff7; --herot2: #9fe1cb;
  --bandg: #0a5c44; --bandg-tx: #d9f7ec; --bandg-mut: #8fd9bf;
  --bandp: #2e2566; --bandp-tx: #e6e2fb; --bandp-mut: #a89fe0;
  --bandc: #7a2f14; --bandc-tx: #fbe9e1; --bandc-mut: #e8a98f;
  --splitg: #0e3b2e; --splitb: #142a4d;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  background: var(--bg); color: var(--tx);
  transition: background-color .3s, color .3s;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-weight: 500; line-height: 1.2; }
h1 { font-size: clamp(30px, 5vw, 40px); letter-spacing: -.02em; line-height: 1.15; }
h2 { font-size: 24px; letter-spacing: -.01em; }
h3 { font-size: 17px; }
p { line-height: 1.65; }
a { color: var(--g100); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--g100); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: 980px; margin: 0 auto; padding: 0 24px; }
.sec { padding: 56px 0; }
.sec-alt { background: var(--bg2); transition: background-color .3s; }
.mono { font-family: var(--mono); }
.mut { color: var(--mut); }
.hint { color: var(--hint); }
.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--g100); font-weight: 500; margin-bottom: 10px;
}
.eyebrow-b { color: var(--b100); }
.lede { font-size: 17px; color: var(--mut); max-width: 640px; }

/* grids */
.grid { display: grid; gap: 14px; }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.g-feat { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* boxes & cards */
.box { border-radius: var(--r); padding: 20px; transition: background-color .3s, transform .25s ease; }
.card {
  background: var(--bg2); border: .5px solid var(--bd); border-radius: var(--r);
  padding: 20px; transition: background-color .3s, transform .25s ease, border-color .25s;
}
.lift:hover { transform: translateY(-4px); }
.card.lift:hover { border-color: var(--bd2); }
.box-g20 { background: var(--g20); } .box-g40 { background: var(--g40); }
.box-b20 { background: var(--b20); } .box-b40 { background: var(--b40); }
.gt1 { color: var(--gt1); } .gt2 { color: var(--gt2); }
.bt1 { color: var(--bt1); } .bt2 { color: var(--bt2); }
.icochip {
  display: inline-flex; width: 38px; height: 38px; border-radius: 12px;
  align-items: center; justify-content: center; color: #fff;
}
.icochip-g { background: var(--g80); } .icochip-b { background: var(--b80); }

/* chips */
.chip {
  display: inline-block; font-family: var(--mono); font-size: 11px;
  padding: 5px 11px; border-radius: 999px;
}
.chip-hero { background: rgba(255, 255, 255, .16); color: var(--herot1); }
.chip-g60 { background: var(--g60); color: #fff; }
.chip-g80 { background: var(--g80); color: #fff; letter-spacing: .05em; }
.chip-b80 { background: var(--b80); color: #fff; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer;
  background: var(--g100); color: #fff; border-radius: var(--r-s);
  padding: 11px 18px; font: 500 14px var(--sans);
  transition: transform .15s ease, background-color .3s; text-decoration: none;
}
[data-theme="dark"] .btn { background: #37d4a0; color: #06281c; }
.btn:hover { text-decoration: none; filter: brightness(1.07); }
.btn:active { transform: scale(.97); }
.btn-ghost { background: transparent; color: var(--tx); border: .5px solid var(--bd2); }
[data-theme="dark"] .btn-ghost { background: transparent; color: var(--tx); }
.btn-dark { background: #06281c; color: #d9f7ec; }
[data-theme="dark"] .btn-dark { background: #06281c; color: #d9f7ec; }
.btn-band { background: #eafff6; color: #06392a; }
[data-theme="dark"] .btn-band { background: #eafff6; color: #06392a; }
.arr { transition: transform .2s ease; display: inline-flex; }
.btn:hover .arr, a:hover .arr { transform: translateX(4px); }

/* nav */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; gap: 12px; flex-wrap: wrap;
}
.logo { display: flex; align-items: baseline; gap: 2px; font-size: 17px; font-weight: 500; color: var(--tx); }
.logo:hover { text-decoration: none; }
.logo .cursor { color: var(--g100); }
.nav-links { display: flex; align-items: center; gap: 18px; font-size: 13px; }
.nav-links > a { color: var(--mut); }
.nav-links > a[aria-current="page"] { color: var(--tx); font-weight: 500; }

/* hero */
.hero-shell { max-width: 1108px; margin: 6px auto 0; padding: 0 14px; }
.hero {
  background: var(--hero); border-radius: var(--r-xl); padding: 48px 34px;
  position: relative; overflow: hidden; transition: background-color .3s;
}
.hero h1 { color: var(--herot1); max-width: 640px; }
.hero .sub { color: var(--herot2); max-width: 540px; margin-top: 16px; font-size: 16px; }
.hero .eyebrow { color: var(--herot2); }
.blob {
  position: absolute; right: -70px; top: -50px; width: 340px; height: 340px;
  background: rgba(255, 255, 255, .09); pointer-events: none;
  border-radius: 46% 54% 60% 40%/50% 44% 56% 50%;
  animation: morph 14s ease-in-out infinite alternate;
}
@keyframes morph {
  0% { border-radius: 46% 54% 60% 40%/50% 44% 56% 50%; }
  50% { border-radius: 58% 42% 44% 56%/42% 58% 46% 54%; }
  100% { border-radius: 40% 60% 52% 48%/56% 40% 60% 44%; }
}

/* forms */
.field {
  background: var(--bg2); border: .5px solid var(--bd2); border-radius: var(--r-s);
  color: var(--tx); padding: 11px 14px; font: 400 14px var(--sans);
  flex: 1; min-width: 170px; transition: background-color .3s;
}
.field:focus { outline: 2px solid var(--g100); outline-offset: 1px; }
.waitlist-form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 480px; }
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.form-ok { color: var(--g100); font-size: 14px; font-weight: 500; }

/* comparison table */
.cmp-card { overflow-x: auto; padding: 8px 16px; }
table.cmp { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.cmp td, .cmp th { padding: 10px; border-bottom: .5px solid var(--bd); text-align: left; vertical-align: top; }
.cmp tr:last-child td { border-bottom: none; }
.cmp th { font-weight: 500; font-size: 12.5px; color: var(--hint); }
.cmp th.us { color: var(--g100); }
.cmp .y { color: var(--g100); font-weight: 500; }
.cmp .n { color: var(--hint); }
.cmp .p { color: var(--mut); }

/* bands */
.band-shell { max-width: 1108px; margin: 14px auto 0; padding: 0 14px; }
.band { border-radius: var(--r-xl); padding: 44px 30px; transition: background-color .3s; }
.band-g { background: var(--bandg); }
.band-g h2, .band-g .t1 { color: var(--bandg-tx); }
.band-g .t2 { color: var(--bandg-mut); }
.band-p { background: var(--bandp); }
.band-p .t1 { color: var(--bandp-tx); } .band-p .t2 { color: var(--bandp-mut); }
.band-c { background: var(--bandc); }
.band-c .t1 { color: var(--bandc-tx); } .band-c .t2 { color: var(--bandc-mut); }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.split-g { background: var(--splitg); } .split-b { background: var(--splitb); }
.split .box { border-radius: var(--r-xl); padding: 34px 28px; }
.split h3, .split .t1 { color: #fff; }
.split-g .t2 { color: #d2f5e7; } .split-b .t2 { color: #d6e4fb; }
.btn-outline-w { background: transparent; color: #fff; border: .5px solid rgba(255, 255, 255, .65); }

/* pricing */
.tier h3 { font-size: 15px; }
.price { font-size: 26px; font-weight: 500; }
.tier .per { font-size: 12.5px; color: var(--hint); }
.box-g40 .per { color: var(--gt2); }

/* faq */
.faq details { border-bottom: .5px solid var(--bd); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 500; font-size: 15px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: "+"; color: var(--g100); font-family: var(--mono); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--mut); font-size: 14px; margin-top: 10px; max-width: 700px; }

/* prose (long-form sections) */
.prose { max-width: 720px; }
.prose p { color: var(--mut); margin-top: 12px; font-size: 15px; }
.prose h2 { margin-top: 8px; }
.prose ul { color: var(--mut); font-size: 15px; margin: 12px 0 0 20px; }
.prose li { margin-top: 6px; }
.kicker { font-size: 14px; color: var(--mut); }

/* verdict (AEO answer box) */
.verdict { border-left: none; }
.verdict p { font-size: 15px; }

/* footer */
.footer { background: var(--bg2); padding: 26px 0; margin-top: 14px; transition: background-color .3s; }
.footer-in { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; }
.footer-links a { color: var(--hint); }

/* motion */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.rv.in { opacity: 1; transform: none; }
.pulse { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.draw { stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.6s ease-out; }
.draw.in { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .blob, .pulse { animation: none; }
  .draw { stroke-dashoffset: 0; transition: none; }
  .lift:hover { transform: none; }
}

/* a11y */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--g100); color: #fff;
  padding: 10px 16px; border-radius: 0 0 var(--r-s) 0; z-index: 10;
}
.skip:focus { left: 0; }