@import url("tokens.css");
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--fs-16);line-height:24px;-webkit-font-smoothing:antialiased}
/* layout */
.ds-wrap{max-width:var(--content);margin:0 auto;padding:0 var(--gutter)}
.ds-section{padding-top:var(--s24);padding-bottom:var(--s24)}
.ds-section.tall{padding-top:var(--s32);padding-bottom:var(--s32)}
/* type */
.t-display{font-size:var(--fs-64);line-height:68px;letter-spacing:-.03em;font-weight:var(--fw-medium);text-wrap:balance}
.t-h2{font-size:var(--fs-48);line-height:52px;letter-spacing:-.03em;font-weight:var(--fw-regular);text-wrap:balance}
.t-sub{font-size:var(--fs-32);line-height:40px;letter-spacing:-.02em;font-weight:var(--fw-regular)}
.t-h3{font-size:var(--fs-24);line-height:32px;letter-spacing:-.02em;font-weight:var(--fw-medium)}
.t-lead{font-size:var(--fs-20);line-height:32px;color:var(--text-2);text-wrap:pretty}
.t-body{font-size:var(--fs-16);line-height:24px;color:var(--text-2);text-wrap:pretty}
.t-label{font-size:var(--fs-12);line-height:16px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
/* section header: centered, short, no eyebrow clutter */
.sec-head{display:flex;flex-direction:column;align-items:center;gap:var(--s4);text-align:center;max-width:672px;margin:0 auto var(--s12)}
/* buttons: pills, two weights only */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 var(--s6);border:0;border-radius:var(--r-pill);font:inherit;font-size:var(--fs-16);font-weight:var(--btn-weight);cursor:pointer;text-decoration:none;transition:background var(--t-fast) ease-out,color var(--t-fast) ease-out}
.btn.primary{background:var(--ink);color:var(--on-ink)}
.btn.primary:hover{opacity:.88}
.btn.soft{background:var(--card);color:var(--ink)}
.btn.soft:hover{background:var(--card-2)}
.btn.sm{height:32px;padding:0 var(--s4);font-size:14px}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* announcement pill: one line above the hero title */
.announce{display:inline-flex;align-items:center;gap:var(--s2);padding:6px 6px 6px 12px;border-radius:var(--r-pill);background:var(--card);font-size:13px;line-height:20px;text-decoration:none;color:var(--ink)}
.announce span.go{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--bg)}
/* segmented control (plan / role / use-case pickers) */
.seg{display:inline-flex;padding:2px;border-radius:var(--r-pill);background:var(--card)}
.seg button{border:0;background:transparent;color:var(--text-2);font:inherit;font-size:12px;font-weight:500;padding:4px 12px;border-radius:var(--r-pill);cursor:pointer;transition:all var(--t-fast) ease-out}
.seg button[aria-pressed="true"]{background:var(--bg);color:var(--ink)}
/* avatar-pill row: the quiet filter chips (name pills that grow an icon when active) */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{display:inline-flex;align-items:center;gap:var(--s2);height:32px;padding:0 var(--s3);border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--rule);font-size:14px;color:var(--text-2);background:transparent;border:0;cursor:pointer;transition:all var(--t-fast) ease-out}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);box-shadow:none}
/* cards: soft surface, big radius, no border, no shadow */
.card{background:var(--card);border-radius:var(--r-card);padding:var(--s8);display:flex;flex-direction:column;gap:var(--s3)}
.card h3{font-size:16px;line-height:24px;font-weight:500}
.card p{color:var(--text-2)}
.card .stage{margin-top:auto;padding-top:var(--s8)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
/* product frame: real UI (dark) inside a rounded stage */
.frame{background:var(--night);border-radius:var(--r-card);overflow:hidden;color:var(--chalk)}
.frame.shot{aspect-ratio:16/9;position:relative}
.frame.shot img,.frame.shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* stat / list rows with hairline */
.rows{list-style:none;padding:0}
.rows li{padding:var(--s4) 0;border-top:1px solid var(--rule)}
.rows li:last-child{border-bottom:1px solid var(--rule)}
/* FAQ */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;justify-content:space-between;gap:var(--s6);padding:20px 0;font-weight:500;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--text-3);transition:transform var(--t-fast) ease-out}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq p{padding:0 44px 24px 0;color:var(--text-2)}
/* motion: blur-in reveal, the only entrance animation */
.reveal{opacity:0;filter:blur(4px);transform:translateY(12px);transition:opacity var(--t-reveal) var(--ease),filter var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease)}
.reveal.in{opacity:1;filter:none;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;filter:none;transform:none;transition:none}}
@media (max-width:900px){.t-display{font-size:var(--fs-32);line-height:36px}.t-h2{font-size:var(--fs-32);line-height:40px}.grid-2{grid-template-columns:1fr}.ds-section{padding-top:var(--s16);padding-bottom:var(--s16)}}