/* ============================================================
   Docket — landing page
   Committed to a single light, warm world regardless of the viewer's
   theme. A marketing page is a poster, not an instrument: it should
   look the same to everyone who is sent the link.
   ============================================================ */
.lp{
  --blush:#FCEFEC;
  --blush-2:#FBE7E2;
  --ink:#161318;
  --ink-2:#5B535F;
  --ink-3:#8C8391;
  --line:#EEDCD7;
  --card:#FFFFFF;
  --violet:#7C3AED;
  --violet-2:#9F67F5;
  --coral:#F2734E;
  --amber:#F0A03C;
  --green:#12996A;
  --grad:linear-gradient(135deg,#8328E2 0%,#CC29A7 50%,#EA5255 100%);
  --shadow-s:0 1px 2px rgba(60,30,40,.05), 0 6px 16px -8px rgba(60,30,40,.14);
  --shadow-m:0 2px 4px rgba(60,30,40,.06), 0 18px 40px -18px rgba(60,30,40,.22);
  --r:16px;
  background:var(--blush);
  color:var(--ink);
  font-family:var(--body);
  min-height:100vh;
  overflow-x:hidden;
}
.lp *{box-sizing:border-box}
.lp-wrap{max-width:1320px;margin:0 auto;padding:0 28px}
@media (max-width:640px){.lp-wrap{padding:0 18px}}

.lp h1,.lp h2,.lp h3{font-family:var(--display);letter-spacing:-.035em;margin:0;text-wrap:balance}
.lp p{margin:0}
.lp a{color:inherit;text-decoration:none}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}

/* ---------- nav ---------- */
.lp-nav{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--blush) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.lp-nav.stuck{border-bottom-color:var(--line)}
.lp-nav-in{display:flex;align-items:center;gap:20px;height:76px;max-width:1320px;margin:0 auto;padding:0 28px}
.lp-logo{width:44px;height:44px;display:grid;place-items:center;flex:none}
.lp-logo svg{width:100%;height:100%;display:block}
.lp-links{display:flex;gap:34px;margin:0 auto;font-size:15px;font-weight:500;color:var(--ink)}
.lp-links a{padding:6px 0;position:relative}
.lp-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--violet);transition:right .22s}
.lp-links a:hover::after{right:0}
.lp-icons{display:flex;gap:10px;flex:none}
.lp-ico{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);
  display:grid;place-items:center;color:var(--ink);transition:transform .12s,box-shadow .16s}
.lp-ico:hover{transform:translateY(-1px);box-shadow:var(--shadow-s)}
@media (max-width:1000px){
  .lp-links{display:none}
  /* .lp-links normally supplies the auto-margin that shoves the sign-in
     cluster to the right edge; once it's gone from the flow, do that on
     the icons themselves instead, or logo/wordmark/icons all bunch up left */
  .lp-icons{margin-left:auto}
}

/* ---------- hero ---------- */
.lp-hero{display:grid;grid-template-columns:minmax(0,0.78fr) minmax(0,1.22fr);gap:40px;
  align-items:center;padding:56px 0 40px}
@media (max-width:1080px){.lp-hero{grid-template-columns:minmax(0,1fr);gap:44px;padding:40px 0 24px}}

.lp-pill{display:inline-flex;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:9px 18px 9px 14px;font-size:14px;
  font-weight:500;box-shadow:var(--shadow-s)}
.lp-pip{width:9px;height:9px;border-radius:50%;background:var(--grad);flex:none}
.lp-h1{font-size:clamp(38px,4.6vw,62px);font-weight:700;line-height:1.04;margin:26px 0 0;max-width:16ch}
.lp-sub{font-size:17px;line-height:1.62;color:var(--ink-2);margin:24px 0 0;max-width:52ch}
.lp-ctas{display:flex;gap:14px;margin:34px 0 0;flex-wrap:wrap}
.lp-cta{display:inline-flex;align-items:center;gap:12px;border-radius:999px;padding:6px 26px 6px 6px;
  font-size:17px;font-weight:600;background:var(--grad);color:#fff;border:0;
  box-shadow:0 6px 20px -8px rgba(124,58,237,.5);transition:transform .12s,box-shadow .18s}
.lp-cta:hover{transform:translateY(-1px);box-shadow:0 10px 28px -8px rgba(124,58,237,.6)}
.lp-cta-arrow{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.22);
  display:grid;place-items:center;flex:none}
.lp-cta2{display:inline-flex;align-items:center;border-radius:999px;padding:15px 28px;font-size:17px;
  font-weight:600;background:var(--card);border:1px solid var(--line);transition:transform .12s,box-shadow .16s}
.lp-cta2:hover{transform:translateY(-1px);box-shadow:var(--shadow-s)}
.lp-trust{display:flex;gap:26px;margin:26px 0 0;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2)}
.lp-trust span{display:flex;align-items:center;gap:7px}
.lp-trust i{width:5px;height:5px;border-radius:50%;border:1px solid var(--ink-3);flex:none}

/* ---------- constellation ---------- */
.lp-const{position:relative;min-height:620px}
@media (max-width:1080px){.lp-const{min-height:0}}
/* scoped to the connector layer only — a descendant selector here would
   stretch every icon and sparkline inside the constellation as well */
.lp-const > svg.lp-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  pointer-events:none;z-index:1}
.lp svg{display:block}
.lp-tick svg{width:12px;height:12px}
.lp-node svg{width:15px;height:15px}
.lp-const .dash{fill:none;stroke:#C9A9E8;stroke-width:1.4;stroke-dasharray:4 6;opacity:.85}
.lp-node{position:absolute;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 3px 10px rgba(60,30,40,.2);z-index:3}
.lp-node.v{background:var(--violet)}
.lp-node.c{background:var(--coral)}

.lp-card{position:absolute;background:var(--card);border:1px solid var(--line);border-radius:13px;
  box-shadow:var(--shadow-m);padding:10px;display:flex;gap:10px;align-items:center;z-index:4;
  animation:lpIn .6s cubic-bezier(.2,.8,.3,1) backwards}
@keyframes lpIn{from{opacity:0;transform:translateY(10px) scale(.97)}}
.lp-av{width:46px;height:46px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-family:var(--display);font-size:15px;font-weight:700;color:#fff;letter-spacing:.01em}
/* Real face instead of initials — same footprint as .lp-av, so every
   inline width/height/border-radius override on a given card still
   applies untouched. Swap the <img src> for real team/customer photos
   whenever they're available; these are stand-ins. */
.lp-av-photo{background:var(--blush-2);overflow:hidden;padding:0}
.lp-av-photo img{width:100%;height:100%;object-fit:cover;display:block}
.lp-card-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.lp-card-t{font-size:13.5px;font-weight:650;display:flex;align-items:center;gap:7px;line-height:1.3}
.lp-card-s{font-size:12px;color:var(--ink-2);line-height:1.4}
.lp-tick{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--violet);
  display:grid;place-items:center;flex:none;color:var(--violet)}
.lp-tick.g{border-color:var(--green);color:var(--green)}
.lp-chip{position:absolute;background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:5px 13px;font-size:12.5px;font-weight:600;color:var(--violet);box-shadow:var(--shadow-s);z-index:5}
.lp-mini{position:absolute;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:9px 14px;box-shadow:var(--shadow-s);z-index:5;display:flex;gap:10px;align-items:center}
.lp-mini-t{font-size:12.5px;font-weight:650;display:flex;align-items:center;gap:6px}
.lp-mini-s{font-size:11.5px;color:var(--ink-3)}

/* the metric card at the centre */
.lp-metric{position:absolute;left:13%;top:15%;width:min(336px,74%);
  background:var(--card);border:1.5px solid #DCC7F2;border-radius:16px;
  box-shadow:0 4px 10px rgba(60,30,40,.07),0 26px 60px -22px rgba(124,58,237,.35);z-index:6;padding:16px 18px;
  transition:opacity .35s ease}
/* cycled between a few campaigns on a timer (see index.html) — proof
   this panel is live data, not a static screenshot */
.lp-metric.lp-metric-fade{opacity:0}
.lp-metric-h{display:flex;align-items:center;gap:10px;padding-bottom:14px}
.lp-metric-h b{font-family:var(--display);font-size:17px;font-weight:650;letter-spacing:-.02em}
.lp-live{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2)}
.lp-live i{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;
  animation:lpPulse 2s ease-in-out infinite}
@keyframes lpPulse{0%,100%{opacity:1}50%{opacity:.35}}
.lp-metric-g{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
.lp-metric-g > div{padding:14px 0}
.lp-metric-g > div{min-width:0;overflow:hidden;position:relative}
.lp-metric-g > div:nth-child(2){padding-left:18px;border-left:1px solid var(--line)}
.lp-lbl{font-size:12.5px;color:var(--ink-2);margin-bottom:5px}
.lp-big{font-family:var(--mono);font-size:21px;font-weight:600;letter-spacing:-.04em;line-height:1.1}
.lp-of{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.lp-bar{height:6px;border-radius:99px;background:#F0E6F7;overflow:hidden;margin-top:9px;position:relative}
.lp-bar i{position:absolute;inset:0 38% 0 0;background:var(--grad);border-radius:99px;transition:inset .5s ease}
.lp-pct{position:absolute;right:0;top:2px;font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
.lp-metric-f{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);
  padding-top:14px;gap:10px}
.lp-metric-f .lp-lbl{white-space:nowrap;font-size:11.5px}
.lp-metric-f > div:not(:first-child){padding-left:10px;border-left:1px solid var(--line)}
.lp-mid{font-family:var(--mono);font-size:19px;font-weight:600;letter-spacing:-.03em}
.lp-mid.g{color:var(--green)}

/* stacked fallback under 1080px — desktop only, same as .lp-const itself.
   On phones the headline should be the very first thing on the page, so
   neither the constellation nor this card-stack stand-in shows there. */
.lp-const-stack{display:none;flex-direction:column;gap:12px}
.lp-hero-avrow{display:none}
@media (max-width:1080px){
  .lp-const{display:none}
  .lp-const-stack{display:flex;order:-1}
  .lp-hero-avrow{display:flex;flex-direction:column;gap:10px;order:1}
}
@media (max-width:640px){
  /* true phone widths: no pill badge, no card stack — straight into the
     headline. Tablets (641–1080px) still get the card stack above, since
     there's room for it there. */
  .lp-pill{display:none}
  .lp-const-stack{display:none !important}
}
/* the wordmark next to the nav icon — shown at every width now */
.lp-nav-wordmark{display:inline-flex;align-items:center;font-family:var(--display);
  font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.lp-stack-card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-s);padding:14px;display:flex;gap:13px;align-items:center}
.lp-hero-av-photos{display:flex}
.lp-hero-av-photos .lp-av{width:40px;height:40px;border-radius:50%;margin-left:-10px;
  border:2px solid var(--blush);box-shadow:var(--shadow-s)}
.lp-hero-av-photos .lp-av:first-child{margin-left:0}
.lp-hero-av-txt{font-size:13px;color:var(--ink-2)}

/* ---------- benefit strip ---------- */
.lp-strip{background:color-mix(in oklab,var(--card) 62%,transparent);border:1px solid var(--line);
  border-radius:20px;display:grid;grid-template-columns:repeat(4,1fr);margin:32px 0 0}
@media (max-width:940px){.lp-strip{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.lp-strip{grid-template-columns:1fr}}
.lp-ben{display:flex;gap:15px;padding:26px 24px;align-items:flex-start}
.lp-ben:not(:first-child){border-left:1px solid var(--line)}
@media (max-width:940px){
  .lp-ben:nth-child(3){border-left:0}
  .lp-ben:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:560px){
  .lp-ben{border-left:0 !important}
  .lp-ben:not(:first-child){border-top:1px solid var(--line)}
}
.lp-ben-i{width:46px;height:46px;border-radius:50%;background:#F5EDFB;display:grid;place-items:center;
  flex:none;color:var(--violet)}
.lp-ben h3{font-size:15.5px;font-weight:650;letter-spacing:-.02em}
.lp-ben p{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin-top:4px}

/* ---------- generic section ---------- */
.lp-sec{padding:96px 0}
.lp-sec.tint{background:var(--blush-2)}
.lp-eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--violet)}
.lp-h2{font-size:clamp(30px,3.4vw,44px);font-weight:700;line-height:1.1;margin:14px 0 0;max-width:22ch}
.lp-lede{font-size:17px;line-height:1.62;color:var(--ink-2);margin:18px 0 0;max-width:56ch}
.lp-sec-head{margin-bottom:52px}
.lp-sec-head.mid{text-align:center;margin-left:auto;margin-right:auto}
.lp-sec-head.mid .lp-h2,.lp-sec-head.mid .lp-lede{margin-left:auto;margin-right:auto}

/* ---------- the chain ---------- */
.lp-chain{display:flex;flex-direction:column;gap:0;background:var(--card);border:1px solid var(--line);
  border-radius:20px;overflow:hidden;box-shadow:var(--shadow-m)}
.lp-link{display:grid;grid-template-columns:1fr 74px 1fr;align-items:center;gap:0;padding:22px 26px}
.lp-link:not(:first-child){border-top:1px solid var(--line)}
.lp-link:hover{background:#FDF8F6}
.lp-act{display:flex;gap:13px;align-items:center;min-width:0}
.lp-act-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.lp-act-t{font-size:15px;font-weight:650}
.lp-act-s{font-size:13px;color:var(--ink-3)}
.lp-arrow{display:grid;place-items:center;color:var(--violet)}
.lp-eff{display:flex;flex-direction:column;gap:3px;text-align:right}
.lp-eff-t{font-size:13px;color:var(--ink-2)}
.lp-eff-v{font-family:var(--mono);font-size:19px;font-weight:600;letter-spacing:-.03em}
.lp-eff-v.g{color:var(--green)}
.lp-eff-v.c{color:var(--coral)}
@media (max-width:760px){
  .lp-link{grid-template-columns:1fr;gap:14px;text-align:left}
  .lp-arrow{transform:rotate(90deg);justify-self:start}
  .lp-eff{text-align:left}
}

/* ---------- how it works ---------- */
.lp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:980px){.lp-steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.lp-steps{grid-template-columns:1fr}}
.lp-step{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 22px;
  box-shadow:var(--shadow-s);position:relative}
.lp-step-n{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--violet);
  letter-spacing:.06em}
.lp-step h3{font-size:18px;font-weight:650;margin:12px 0 0}
.lp-step p{font-size:14px;color:var(--ink-2);line-height:1.55;margin-top:8px}

/* ---------- use cases ---------- */
.lp-cases{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (max-width:860px){.lp-cases{grid-template-columns:1fr}}
.lp-case{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;
  box-shadow:var(--shadow-s);display:flex;flex-direction:column;gap:13px}
.lp-case-r{display:inline-flex;align-self:flex-start;background:#F5EDFB;color:var(--violet);
  border-radius:999px;padding:5px 13px;font-size:12.5px;font-weight:650}
.lp-case h3{font-size:20px;font-weight:650}
.lp-case p{font-size:14.5px;color:var(--ink-2);line-height:1.6}
.lp-case ul{margin:4px 0 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.lp-case li{display:flex;gap:10px;font-size:14px;color:var(--ink-2);line-height:1.5}
.lp-case li b{color:var(--violet);flex:none}

/* ---------- features ---------- */
.lp-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:980px){.lp-feats{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.lp-feats{grid-template-columns:1fr}}
.lp-feat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;
  box-shadow:var(--shadow-s)}
.lp-feat-i{width:42px;height:42px;border-radius:11px;background:var(--grad);display:grid;
  place-items:center;color:#fff;margin-bottom:15px}
.lp-feat h3{font-size:16.5px;font-weight:650}
.lp-feat p{font-size:14px;color:var(--ink-2);line-height:1.55;margin-top:7px}

/* ---------- pricing ---------- */
.lp-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
@media (max-width:940px){.lp-tiers{grid-template-columns:1fr}}
.lp-tier{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px 26px;
  box-shadow:var(--shadow-s);display:flex;flex-direction:column;gap:16px}
.lp-tier.feature{border:1.5px solid transparent;background:
  linear-gradient(var(--card),var(--card)) padding-box, var(--grad) border-box;
  box-shadow:0 4px 10px rgba(60,30,40,.07),0 26px 60px -22px rgba(124,58,237,.3)}
.lp-tier-top{display:flex;align-items:center;gap:10px}
.lp-tier h3{font-size:19px;font-weight:650}
.lp-tier-tag{margin-left:auto;background:var(--grad);color:#fff;border-radius:999px;padding:4px 11px;
  font-size:11.5px;font-weight:700;letter-spacing:.04em}
.lp-price{display:flex;align-items:flex-end;gap:8px}
.lp-price b{font-family:var(--display);font-size:40px;font-weight:700;letter-spacing:-.04em;line-height:1}
.lp-price span{font-size:14px;color:var(--ink-3);padding-bottom:5px}
.lp-tier-d{font-size:14px;color:var(--ink-2);line-height:1.55}
.lp-tier ul{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.lp-tier li{display:flex;gap:10px;font-size:14px;color:var(--ink-2);line-height:1.5}
.lp-tier li svg{flex:none;margin-top:3px;color:var(--violet)}
.lp-tier .lp-cta,.lp-tier .lp-cta2{width:100%;justify-content:center;font-size:15.5px}

/* ---------- pricing comparison table (pricing.html) ---------- */
.lp-compare-wrap{background:var(--card);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow-s);overflow:auto}
.lp-compare{font-size:14px;min-width:520px}
.lp-compare th,.lp-compare td{padding:13px 18px;text-align:center;border-bottom:1px solid var(--line)}
.lp-compare thead th{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);text-align:center}
.lp-compare thead th:first-child{text-align:left}
.lp-compare tbody th{text-align:left;font-weight:500;color:var(--ink-2);white-space:nowrap}
.lp-compare tbody tr:last-child th,.lp-compare tbody tr:last-child td{border-bottom:0}
.lp-compare td.yes{color:var(--violet);font-weight:700}
.lp-compare td.no{color:var(--ink-3)}

/* ---------- faq ---------- */
.lp-faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:0;
  background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow-m)}
.lp-q{border-top:1px solid var(--line)}
.lp-q:first-child{border-top:0}
.lp-q summary{cursor:pointer;padding:22px 26px;font-size:16.5px;font-weight:650;display:flex;
  align-items:center;gap:16px;list-style:none}
.lp-q summary::-webkit-details-marker{display:none}
.lp-q summary::after{content:"+";margin-left:auto;font-family:var(--mono);font-size:20px;
  color:var(--violet);flex:none;transition:transform .2s}
.lp-q[open] summary::after{transform:rotate(45deg)}
.lp-q p{padding:0 26px 24px;font-size:14.5px;color:var(--ink-2);line-height:1.65;max-width:62ch}

/* ---------- closing cta + footer ---------- */
.lp-close{background:#191419;color:#fff;border-radius:24px;padding:64px 48px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:20px}
@media (max-width:600px){.lp-close{padding:44px 24px}}
.lp-close h2{font-size:clamp(28px,3.4vw,42px);font-weight:700;line-height:1.1;max-width:24ch;color:#fff}
.lp-close p{font-size:16.5px;color:rgba(255,255,255,.7);max-width:50ch;line-height:1.6}
.lp-foot{padding:44px 0 56px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;
  font-size:13.5px;color:var(--ink-3);border-top:1px solid var(--line);margin-top:64px}
.lp-foot-links{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){
  .lp-card,.lp-live i{animation:none !important}
}