/* Pulsyr: brand manual §06 tokens. Shared by the landing and the legal pages.
   Cream/ink base; pink belongs to the mark and nothing else. */
:root{
  --canvas:#fffaf0; --surface-soft:#faf5e8; --surface-card:#f5f0e0; --surface-strong:#ebe6d6;
  --ink:#0a0a0a; --body:#3a3a3a; --muted:#6f6a5c; --hairline:#eae5d9;
  --link:#4f46e5;              /* 6.0:1 on cream: AA for body text */
  --pink:#ff4d8b;              /* the dot. Never text, never a background. */
  --measure:37rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --canvas:#0e0e10; --surface-soft:#17171a; --surface-card:#1c1c20; --surface-strong:#242429;
    --ink:#f5f3ee; --body:#c9c7c1; --muted:#8f8d88; --hairline:#2a2a30;
    --link:#818cf8;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--canvas); color:var(--body);
  /* Inter if the reader has it; system stack otherwise. No webfont request: the
     privacy policy commits to sending nothing to a third party. */
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--link)}
h1,h2,h3{color:var(--ink); margin:0}
.wrap{max-width:64rem; margin:0 auto; padding:0 1.5rem}
.prose{max-width:var(--measure)}

/* Type scale: manual §08 ratios, sized up for reading rather than UI density */
.display{font-size:clamp(2.25rem,6vw,3.25rem); line-height:1.05; font-weight:700; letter-spacing:-.04em}
.h2{font-size:clamp(1.5rem,3.5vw,1.875rem); line-height:1.15; font-weight:700; letter-spacing:-.03em}
.h3{font-size:1.25rem; line-height:1.3; font-weight:600; letter-spacing:-.02em}
.lede{font-size:1.1875rem; color:var(--body)}
.small{font-size:.9375rem}
.label{font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.8125rem}

/* The mark */
.mark{display:block}
.mark .stroke{stroke:currentColor; stroke-width:5; stroke-linecap:round; stroke-linejoin:round}
.mark .dot{fill:var(--pink)}
@media (prefers-reduced-motion:no-preference){
  .mark-hero .dot{animation:beat 1.6s linear infinite}
}
@keyframes beat{0%,40%,100%{opacity:.35}55%{opacity:1}}

/* Section divider: the mark's own waveform carried on a hairline: the rule the
   brand draws instead of a plain <hr>. */
.rule{display:flex; align-items:center; gap:1rem; margin:5rem 0; color:var(--ink)}
.rule::before,.rule::after{content:""; flex:1; height:1px; background:var(--hairline)}
.rule svg{flex:none; opacity:.5}

/* Header */
.top{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem 0}
.brand{display:flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--ink)}
.brand span{font-size:1.125rem; font-weight:600; letter-spacing:-.035em}
.topnav{display:flex; align-items:center; gap:1.5rem}
.topnav a{color:var(--muted); text-decoration:none; font-size:.9375rem; font-weight:500}
.topnav a:hover{color:var(--ink)}
@media (max-width:640px){.topnav .hide-sm{display:none}}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; height:48px;
     padding:0 1.5rem; border-radius:12px; font-size:.9375rem; font-weight:600;
     text-decoration:none; border:1px solid transparent; transition:opacity .15s,transform .1s}
.btn:hover{opacity:.85} .btn:active{transform:scale(.98)}
.btn-primary{background:var(--ink); color:var(--canvas)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--hairline)}
.btn-row{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem}

/* Hero */
.hero{padding:4rem 0 0}
.hero .display{margin:1.25rem 0 0}
.hero .lede{margin:1.5rem 0 0}
/* Editorial stagger: the claim runs wider than the measure, the supporting text
   stays at reading width. Balances the page without resorting to a split hero. */
.hero-head{max-width:52rem}
.eyebrow{display:flex; align-items:center; gap:.625rem; color:var(--muted)}
.eyebrow .mark{color:var(--ink)}

/* Command block: the hero's only visual. It's what you actually paste. */
.cmd{margin-top:2.5rem; background:var(--surface-card); border:1px solid var(--hairline);
     border-radius:14px; overflow:hidden}
.cmd-head{display:flex; justify-content:space-between; align-items:center; gap:1rem;
          padding:.625rem 1rem; border-bottom:1px solid var(--hairline); color:var(--muted)}
.cmd pre{margin:0; padding:1rem 1.25rem; overflow-x:auto; color:var(--ink);
         font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
         font-size:.8125rem; line-height:1.7}
.cmd .tok{color:var(--muted)}

/* Mechanism: real tool names as the structure, because they are the steps */
.step{display:grid; grid-template-columns:11rem 1fr; gap:2rem; padding:1.75rem 0;
      border-top:1px solid var(--hairline)}
.step:last-child{border-bottom:1px solid var(--hairline)}
.step-name{color:var(--ink); font-weight:600}
.step p{margin:.375rem 0 0}
@media (max-width:640px){.step{grid-template-columns:1fr; gap:.5rem}}

/* Comparison cards */
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:1.25rem; margin-top:2rem}
.card{background:var(--surface-soft); border:1px solid var(--hairline); border-radius:16px; padding:1.75rem}
.card h3{margin-bottom:.75rem}
.card ul{margin:0; padding-left:1.1rem}
.card li{margin:.4rem 0}

/* Features */
.feats{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.75rem 2.5rem; margin-top:2.5rem}
.feat h3{font-size:1rem; font-weight:600; margin-bottom:.375rem}
.feat p{margin:0; font-size:.9375rem}

/* Pricing */
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.25rem; margin-top:2.5rem}
.plan{background:var(--surface-soft); border:1px solid var(--hairline); border-radius:16px;
      padding:1.75rem; display:flex; flex-direction:column}
.plan-featured{border-color:var(--ink)}
.price{font-size:2rem; font-weight:700; color:var(--ink); letter-spacing:-.03em; margin:.75rem 0 .25rem}
.price small{font-size:.875rem; font-weight:500; color:var(--muted); letter-spacing:0}
.plan ul{list-style:none; margin:1.25rem 0 0; padding:0; flex:1}
.plan li{margin:.5rem 0; font-size:.9375rem; padding-left:1.25rem; position:relative}
.plan li::before{content:"·"; position:absolute; left:.375rem; color:var(--muted)}
.plan .btn{margin-top:1.5rem; width:100%}
.note{margin-top:1.5rem; color:var(--muted)}

/* FAQ: native <details>, no JS. Open state marked by the hairline going solid. */
.faq{margin-top:2.5rem; border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{list-style:none; cursor:pointer; padding:1.25rem 2.5rem 1.25rem 0; position:relative;
             color:var(--ink); font-weight:600; font-size:1.0625rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:.25rem; top:1.1rem;
                    font-size:1.25rem; font-weight:400; color:var(--muted)}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{color:var(--ink)}
.faq p{margin:0 0 1.5rem; max-width:var(--measure)}

/* Closing CTA */
.closer{margin-top:5rem; padding:4.5rem 0; background:var(--surface-soft);
        border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline)}
.closer-in{text-align:center; color:var(--ink)}
.closer .mark{margin:0 auto 1.25rem}
.closer .lede{max-width:34rem; margin:.75rem auto 0}

/* Footer */
.foot{border-top:1px solid var(--hairline); background:var(--surface-soft)}
.foot-in{display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; padding:2.5rem 0}
.foot a{color:var(--muted); text-decoration:none; display:block; margin:.35rem 0; font-size:.9375rem}
.foot a:hover{color:var(--ink); text-decoration:underline}
.entity{font-size:.875rem; color:var(--muted); max-width:22rem}

/* ── Legal documents (generated from legal/*.md by build.py) ─────────────────── */
.doc{max-width:44rem; margin:0 auto; padding:0 1.5rem 5rem}
.doc h1{font-size:clamp(1.75rem,4vw,2.25rem); line-height:1.15; letter-spacing:-.03em; margin:2.5rem 0 1.5rem}
.doc h2{font-size:1.25rem; font-weight:600; letter-spacing:-.02em; margin:2.5rem 0 .75rem; color:var(--ink)}
.doc h3{font-size:1.0625rem; font-weight:600; margin:1.75rem 0 .5rem}
.doc p{margin:1rem 0}
.doc ul,.doc ol{margin:1rem 0; padding-left:1.35rem}
.doc li{margin:.4rem 0}
.doc hr{border:0; border-top:1px solid var(--hairline); margin:2.5rem 0}
.doc code{background:var(--surface-strong); padding:1px 6px; border-radius:6px; font-size:.9em}
.doc blockquote{margin:1.5rem 0; padding:1rem 1.25rem; background:var(--surface-card);
                border-left:3px solid var(--hairline); border-radius:0 10px 10px 0}
.doc blockquote p{margin:.25rem 0}
.doc table{width:100%; border-collapse:collapse; margin:1.25rem 0; font-size:.9375rem; display:block; overflow-x:auto}
.doc th,.doc td{text-align:left; padding:.6rem .75rem; border-bottom:1px solid var(--hairline); vertical-align:top}
.doc th{color:var(--ink); font-weight:600; font-size:.8125rem; letter-spacing:.04em; text-transform:uppercase}
.doc em{color:var(--muted)}

:where(a,button,summary):focus-visible{outline:2px solid var(--link); outline-offset:2px; border-radius:4px}

/* Header sign-in: the only nav item that is an action, so it gets a border and
   nothing louder. */
.nav-cta{color:var(--ink); border:1px solid var(--hairline); border-radius:9px; padding:.35rem .75rem}
.nav-cta:hover{background:var(--surface-strong)}

/* Compatible clients. The claim is that the client is interchangeable, so every
   mark is drawn in one ink at one size: no vendor colours competing for the eye,
   and none of them implying an endorsement. Marks are from simple-icons (CC0),
   used nominatively to state compatibility.
   The pink stays where the manual puts it: on the section's own mark, not here. */
.clients{margin:4rem 0 0}
.clients-head{display:flex; align-items:center; gap:.5rem}
.client-row{
  display:flex; flex-wrap:wrap; gap:.85rem 2rem; align-items:center;
  list-style:none; padding:0; margin:1.25rem 0 0;
}
.client-row li{display:flex; align-items:center; gap:.5rem; color:var(--muted); transition:color .15s}
.client-row li:hover{color:var(--ink)}
.client-row svg{width:18px; height:18px; fill:currentColor; flex:none}
.client-row span{font-size:.9375rem; font-weight:500; white-space:nowrap}
.client-note{color:var(--muted); max-width:var(--measure); margin:1.25rem 0 0}

/* Language switcher: three real links, no JavaScript, so each language is a URL
   a crawler and a bookmark can both hold. */
.langs{display:flex; align-items:center; gap:.5rem; font-size:.8125rem}
.langs a{color:var(--muted); text-decoration:none}
.langs a:hover{color:var(--ink)}
.langs a[aria-current]{color:var(--ink); font-weight:600}
@media (max-width:640px){ .langs{gap:.4rem; font-size:.75rem} }