/* Deskmates shared design system.
   Warm tinted neutrals, nothing pure black or white. Restrained frame,
   personality lives in each widget's demo. */
:root{
  --bg:oklch(94.2% 0.006 62); --panel:oklch(98.6% 0.004 62); --soft:oklch(96.4% 0.005 62);
  --ink:oklch(19% 0.012 62); --ink2:oklch(46% 0.012 62);
  /* faint was 66%, which read as 2.63:1 on the ground — below AA for the
     eyebrows, captions and footer that use it. 52% clears 4.5:1; the step down
     from ink2 is carried by size, case and tracking, not by washing it out. */
  --faint:oklch(52% 0.010 62);
  --line:oklch(90.5% 0.006 62);
  --ember:oklch(72% 0.17 48); --sprout:oklch(80% 0.15 145); --puddle:oklch(80% 0.10 205);
  --spark:oklch(87% 0.14 92); --boulder:oklch(76% 0.02 265); --breeze:oklch(80% 0.10 250);
  --accent:var(--ember);
  --r:20px; --r-lg:28px;
  --sans:-apple-system,"SF Pro Display","SF Pro Text",system-ui,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --out:cubic-bezier(.22,1,.36,1);
  --shadow:0 26px 60px -30px oklch(20% 0.03 62 / .32);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
[hidden]{display:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--faint);text-transform:uppercase}

.btn{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;padding:13px 24px;
  border-radius:999px;background:var(--ink);color:var(--bg);cursor:pointer;border:1px solid var(--ink);
  transition:transform .22s var(--out),box-shadow .22s var(--out)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 26px -14px oklch(20% .03 62/.55)}
.btn:active{transform:translateY(0)}
.btn.light{background:var(--panel);color:var(--ink);border-color:var(--line)}
.btn.text{background:none;border-color:transparent;color:var(--ink)}
.btn.text:hover{transform:none;box-shadow:none;opacity:.62}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

nav{position:sticky;top:0;z-index:60;background:oklch(94.2% .006 62/.76);backdrop-filter:blur(14px);
  border-bottom:1px solid oklch(20% .01 62/.06)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.back{font-size:13px;color:var(--faint)}.back:hover{color:var(--ink)}
.navlinks{display:flex;gap:26px;align-items:center;font-size:14px;color:var(--ink2)}
.navlinks a:not(.btn):hover{color:var(--ink)}
@media(max-width:760px){.navlinks a:not(.btn){display:none}}

.hero{text-align:center;padding:70px 0 30px;position:relative}
h1{font-size:clamp(40px,7vw,78px);font-weight:700;letter-spacing:-.042em;line-height:.99;max-width:17ch;margin:16px auto 0}
.hero .sub{color:var(--ink2);font-size:clamp(17px,2.1vw,20px);max-width:46ch;margin:20px auto 0}
.cta{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:28px}
.micro{margin-top:15px;font-size:13px;color:var(--faint)}

section{padding:78px 0}
.center{text-align:center}
h2{font-size:clamp(27px,4.2vw,44px);font-weight:700;letter-spacing:-.032em;line-height:1.06}
.lead{color:var(--ink2);font-size:18.5px;max-width:52ch;margin:15px auto 0}
.statement{font-size:clamp(25px,3.8vw,38px);font-weight:600;letter-spacing:-.022em;line-height:1.28;
  max-width:22ch;margin:0 auto;text-align:center;text-wrap:balance}
.statement b{color:oklch(58% .16 44)}

.feats{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:44px}
.feat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;
  box-shadow:0 14px 40px -30px oklch(20% .03 62/.3)}
.feat.big{grid-column:1/-1;display:flex;gap:28px;align-items:center}
.feat h3{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:12px 0 6px}
.feat.big h3{margin-top:0}
.feat p{color:var(--ink2);font-size:15px}
.feat .ic{font-size:24px}
.pill{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:oklch(52% .17 44);
  border:1px solid oklch(52% .17 44/.4);border-radius:999px;padding:3px 10px;margin-bottom:11px}
@media(max-width:720px){.feats{grid-template-columns:1fr}.feat.big{flex-direction:column;align-items:flex-start}}

.prices{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:800px;margin:44px auto 0;text-align:left}
.price{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 30px;position:relative}
.price.pro{background:oklch(21% .015 62);color:oklch(96% .004 62);border-color:oklch(21% .015 62)}
.price .pn{font-size:13.5px;font-weight:600;color:var(--faint)}
.price.pro .pn{color:oklch(74% .01 62)}
.price .amt{font-size:48px;font-weight:700;letter-spacing:-.035em;margin:8px 0 0}
.price .amt small{font-size:15px;font-weight:600;color:var(--faint)}
.price .sm{font-size:12.5px;color:var(--faint);margin-top:2px}
.price ul{list-style:none;margin:20px 0 24px;display:flex;flex-direction:column;gap:11px}
.price li{font-size:14.5px;color:var(--ink2);display:flex;gap:9px;line-height:1.35}
.price.pro li{color:oklch(86% .008 62)}
.price li:before{content:"✓";color:oklch(58% .16 44);font-weight:700;flex:none}
.price.pro li:before{color:var(--accent)}
.price .btn{width:100%;justify-content:center}
.price.pro .btn{background:var(--panel);color:oklch(21% .015 62);border-color:var(--panel)}
.badge{position:absolute;top:20px;right:22px;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  color:var(--accent);border:1px solid oklch(72% .17 48/.45);border-radius:999px;padding:4px 10px}
@media(max-width:640px){.prices{grid-template-columns:1fr}}

/* get-it sheet */
.modal{position:fixed;inset:0;z-index:100;background:oklch(20% .02 62/.44);backdrop-filter:blur(7px);
  display:flex;align-items:center;justify-content:center;padding:24px;animation:fade .2s}
.modal[hidden]{display:none}
@keyframes fade{from{opacity:0}}
.sheet{position:relative;background:var(--panel);border-radius:var(--r-lg);max-width:452px;width:100%;
  padding:36px 32px 28px;box-shadow:0 40px 90px -30px oklch(15% .03 62/.5);animation:rise .34s var(--out)}
@keyframes rise{from{transform:translateY(18px) scale(.97);opacity:0}}
.sheet h3{font-size:23px;font-weight:700;letter-spacing:-.026em}
.sheet>div>p{color:var(--ink2);font-size:14.5px;margin-top:7px}
.sheet ol{margin:18px 0 20px;padding-left:19px;display:flex;flex-direction:column;gap:9px}
.sheet li{font-size:14px;color:var(--ink2)}
.sheet code{font-family:var(--mono);font-size:12.5px;background:var(--soft);border:1px solid var(--line);
  border-radius:6px;padding:1px 6px}
.sheet .btn{width:100%;justify-content:center}
.sheet .fine{font-size:12.5px;color:var(--faint);margin-top:13px;text-align:center}
.sheet .x{position:absolute;top:14px;right:16px;background:none;border:none;font-size:15px;color:var(--faint);cursor:pointer}
.sheet .x:hover{color:var(--ink)}
.sheet .peek{display:flex;justify-content:center;margin-bottom:6px;font-size:30px}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .85s var(--out),transform .85s var(--out)}
.reveal.in{opacity:1;transform:none}
.stag>*{opacity:0;transform:translateY(22px);transition:opacity .6s var(--out),transform .6s var(--out)}
.stag.in>*{opacity:1;transform:none}
.stag.in>*:nth-child(2){transition-delay:.07s}.stag.in>*:nth-child(3){transition-delay:.14s}
.stag.in>*:nth-child(4){transition-delay:.21s}.stag.in>*:nth-child(5){transition-delay:.28s}
.stag.in>*:nth-child(6){transition-delay:.35s}

footer{border-top:1px solid var(--line);padding:36px 0;color:var(--faint);font-size:13px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{color:var(--ink2)}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .reveal,.stag>*{opacity:1;transform:none}
}

/* keyboard: let people jump past the nav */
.skip{position:absolute;left:-9999px;top:0;background:var(--panel);color:var(--ink);
  padding:10px 16px;border-radius:0 0 12px 0;z-index:200;font-size:14px;font-weight:600}
.skip:focus{left:0}

/* touch: every control clears 44px on a finger */
@media(pointer:coarse){
  button,.btn,.tb,.reset,.copybtn,.replay{min-height:44px}
}