/* BEM Chat public pages (pricing, sign-up, terms, privacy, comparison): the homepage's look, shared.
   2026-10-04: these pages took the redesigned homepage's palette and type (white, ink, one violet; Bricolage
   Grotesque + Figtree). The variable and class NAMES are the old ones on purpose (--paper, --verm, --serif ...):
   each page's own rules are written against them, so the look changed without touching those rules.
   --serif is now the display face and --verm the violet accent. */
/* Colours and type: app/web/chat_tokens.css, inlined by the server into each page before this sheet (batch 6a). */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.6;
     font-size:16.5px;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
a{color:inherit}
::selection{background:var(--verm);color:#fff}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a:focus-visible,.btn:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--verm);outline-offset:3px}

/* masthead */
.topline{display:none}
header{display:flex;align-items:center;gap:20px;padding:18px 0}
.logo{font-family:var(--serif);font-weight:800;font-size:20px;letter-spacing:-.02em;white-space:nowrap;
      text-decoration:none;display:flex;align-items:center;gap:5px;min-height:44px}
.logo::before{content:"";width:32px;height:32px;border-radius:9px;margin-right:5px;flex:none;
      background:var(--verm) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 13'%3E%3Cpath d='M4.2 1.3h7.6a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3H2.3a1 1 0 0 1-1-1V4.3a3 3 0 0 1 2.9-3z' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3C/svg%3E") center/15px no-repeat}
.logo em{font-style:normal;color:var(--verm)}
.logo .dot{display:none}
header nav{margin-left:auto;display:flex;align-items:center;gap:6px}
header nav a{text-decoration:none;white-space:nowrap;font-size:15px;font-weight:600;color:var(--ink2);padding:12px;border-radius:9px}
header nav a:hover,header nav a[aria-current]{color:var(--ink);background:var(--paper2)}
header nav a[href="/signup"]{order:9;margin-left:6px;background:var(--verm);color:#fff;padding:11px 18px;border-radius:12px;font-weight:700}
header nav a[href="/signup"]:hover{background:var(--verm2);color:#fff}

/* type */
.kicker{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--verm);margin-bottom:14px}
h1{font-family:var(--serif);font-weight:800;font-size:clamp(38px,6vw,68px);line-height:1.04;
   letter-spacing:-.025em;max-width:18ch}
h1 em{font-style:normal;color:var(--verm)}
h2,h3{letter-spacing:-.02em}
p.sub{max-width:600px;margin:20px 0 0;color:var(--ink2);font-size:18px}
.sechead{display:flex;align-items:baseline;gap:14px;padding:64px 0 10px}
.sechead .no{font-family:var(--serif);font-weight:800;font-size:15px;color:var(--verm)}
.sechead h2{font-family:var(--serif);font-weight:700;font-size:clamp(26px,4vw,40px);letter-spacing:-.025em;line-height:1.08}
p.seclead{color:var(--ink2);max-width:620px;margin:6px 0 0;font-size:16.5px}
.btn{display:inline-block;background:var(--verm);color:#fff;text-decoration:none;font-weight:700;
     font-size:16px;padding:13px 24px;border-radius:12px;text-align:center;
     border:2px solid var(--verm);cursor:pointer;font-family:var(--sans);
     transition:background .15s ease,color .15s ease,transform .15s ease}
.btn:hover{background:var(--verm2);border-color:var(--verm2);transform:translateY(-1px)}
.btn:disabled{opacity:.55;cursor:default;transform:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--hair)}
.btn.ghost:hover{background:#fff;color:var(--ink);border-color:var(--ink)}
.arrowlink{font-weight:700;font-size:15px;text-decoration:none;color:var(--verm);display:inline-block;padding:11px 0}
.arrowlink:hover{color:var(--verm2)}
.note{color:var(--ink2);font-size:14px}

footer{margin-top:72px;padding:34px 0 110px;color:var(--ink2);
       font-size:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{color:var(--ink2);display:inline-block;padding:12px 4px;margin:0 -4px} footer a:hover{color:var(--verm)}

/* reveal */
.rise{opacity:0;transform:translateY(14px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}
@keyframes rise{to{opacity:1;transform:none}}
/* the headline is the first thing painted: never faded in (a faded headline delayed first paint, audit 2026-10-04) */
h1.rise,h1 .rise,.kicker.rise{opacity:1;transform:none;animation:none}
@media (prefers-reduced-motion: reduce){.rise{animation:none;opacity:1;transform:none} html{scroll-behavior:auto}}

/* phones */
@media(max-width:820px){
  .wrap{padding:0 16px}
  .sechead{padding-top:48px}
}
@media(max-width:720px){
  header{gap:10px}
  header nav a:not(.signin):not([href="/signup"]){display:none}
  header nav a[href="/signup"]{padding:11px 14px;margin-left:0}
}