/* ============================================================================
   Squado — Brand & Design System
   ----------------------------------------------------------------------------
   Extracted from the landing page so every new page (blog, about, docs,
   changelog, legal, contact) shares one look. Link it before any page styles:

     <link rel="stylesheet" href="/brand.css">

   Then use the tokens and component classes below. Page-specific styles go in
   a separate <style> block or file — never redefine a token here inline.

   Font: Inter (variable), self-hosted from /fonts/inter-var.woff2 — no
   render-blocking third-party request and no visitor IPs sent to Google.
   Preload it in each page's <head>:
     <link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin/>
   ========================================================================== */

/* ── Self-hosted Inter (variable) ─────────────────────────────────────────── */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/fonts/inter-var.woff2') format('woff2');
}

/* ── Self-hosted Cabinet Grotesk — headings only ──────────────────────────────
   Inter carries running text; it is the most saturated UI face there is and
   reads as stock when it also sets the headlines. Preload cabinet-700 in each
   page's <head> alongside inter-var. */
@font-face{font-family:'CabinetGrotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/cabinet-500.woff2') format('woff2')}
@font-face{font-family:'CabinetGrotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/cabinet-700.woff2') format('woff2')}
@font-face{font-family:'CabinetGrotesk';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/cabinet-800.woff2') format('woff2')}

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root{
  /* Surfaces (light-only — the marketing site is deliberately single-theme) */
  --bg:#fff;            /* page background            */
  --bg-s:#F8F8FC;       /* subtle fill (section, chip) */
  --bg-s2:#F0EEFF;      /* brand-tinted fill           */
  --line:#E4E2F0;       /* default border              */
  --line-s:#EEECF8;     /* hairline / inner border     */

  /* Ink (text) — a violet-biased neutral, not pure grey */
  --ink:#14122E;        /* headings, primary text      */
  --ink-2:#54526E;      /* body text                   */
  --ink-3:#9C9AB5;      /* muted, captions, notes      */

  /* Brand */
  --brand:#5B4FE8;
  --brand-2:#8B5CF6;
  --grad:linear-gradient(120deg,#5B4FE8,#8B5CF6);

  /* Semantic (paired with a tint background) */
  --ok:#059669;   --ok-bg:#D1FAE5;
  --warn:#D97706;  --warn-bg:#FEF3C7;
  --err:#DC2626;   --err-bg:#FEE2E2;
  --info:#2563EB;  --info-bg:#DBEAFE;

  /* Type */
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --display:'CabinetGrotesk','Inter',-apple-system,BlinkMacSystemFont,sans-serif;

  /* Radius */
  --r:8px; --r-sm:6px; --r-xs:4px; --r-pill:99px;

  /* Elevation */
  --sh-card:0 12px 44px rgba(20,18,46,.09);
  /* Neutral elevation. A violet-tinted halo under a violet button is the
     stock generated-SaaS glow; keep depth achromatic. */
  --sh-cta:0 1px 2px rgba(20,18,46,.16);
  --sh-soft:0 10px 30px -8px rgba(91,79,232,.18);

  /* Rhythm */
  --pad-x:32px;
  --maxw:1120px;      /* nav / footer width  */
  --maxw-read:1020px; /* content column      */
}

/* ── Reset / base ────────────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-xs)}

/* ── Layout helpers ──────────────────────────────────────────────────────── */
.wrap{max-width:var(--maxw-read);margin:0 auto;padding:80px var(--pad-x)}
.wrap-wide{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x)}
.section{border-top:1px solid var(--line)}
.section.tint{background:var(--bg-s)}
.center{text-align:center}
.stack{display:flex;flex-direction:column}

/* ── Typography ──────────────────────────────────────────────────────────── */
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand);margin-bottom:12px;
}
.eyebrow::before{content:'';display:block;width:14px;height:2px;background:var(--brand);border-radius:2px}
.eyebrow.center{justify-content:center}

/* Headings carry the display face everywhere, so every page in the site
   shares one voice without each having to declare it. */
h1,h2,h3,h4,.h-display,.sh{font-family:var(--display)}

.h-display{font-size:clamp(34px,5.2vw,58px);font-weight:800;letter-spacing:-.035em;line-height:1.05}
.sh{font-size:clamp(26px,3.5vw,40px);font-weight:800;letter-spacing:-.032em;line-height:1.08;margin-bottom:12px}
.sp{font-size:15px;color:var(--ink-2);line-height:1.7;max-width:520px}
.lead{font-size:17px;color:var(--ink-2);line-height:1.7}

/* Emphasis inside a heading. Solid brand: animated gradient text is
   decorative rather than meaningful, and is one of the loudest stock tells. */
.gr{color:var(--brand)}

/* Prose — for long-form pages (blog, legal). Wrap body copy in .prose */
.prose{color:var(--ink-2);font-size:16px;line-height:1.75;max-width:68ch}
.prose h2{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--ink);margin:38px 0 12px}
.prose h3{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:28px 0 8px}
.prose p{margin:0 0 16px}
.prose a{color:var(--brand);font-weight:600}
.prose a:hover{text-decoration:underline}
.prose ul,.prose ol{margin:0 0 16px 20px;display:flex;flex-direction:column;gap:6px}
.prose code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em;background:var(--bg-s);border:1px solid var(--line);border-radius:var(--r-xs);padding:1px 5px}
.prose blockquote{border-left:3px solid var(--brand);padding:4px 0 4px 16px;color:var(--ink);font-weight:500;margin:0 0 16px}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);
  font-weight:700;border-radius:var(--r);cursor:pointer;transition:all .15s;border:1.5px solid transparent;line-height:1}
.btn-lg{padding:12px 24px;font-size:14.5px}
.btn-md{padding:8px 18px;font-size:13.5px}
.btn-sm{padding:6px 13px;font-size:12.5px}

.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--sh-cta)}
.btn-primary:hover{opacity:.93;transform:translateY(-1px)}
.btn-outline{color:var(--ink-2);border-color:var(--line);background:var(--bg)}
.btn-outline:hover{border-color:var(--brand);color:var(--brand)}
.btn-ghost{color:var(--ink-2);background:none}
.btn-ghost:hover{background:var(--bg-s);color:var(--ink)}
/* On a gradient/dark band */
.btn-white{background:#fff;color:var(--brand);font-weight:800}
.btn-white:hover{opacity:.95;transform:translateY(-1px)}
.btn-on-brand{border-color:rgba(255,255,255,.28);color:#fff}
.btn-on-brand:hover{background:rgba(255,255,255,.1)}

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x);height:60px;display:flex;align-items:center;justify-content:space-between}
.nav-logo img{height:34px}
.nav-links{display:flex;gap:2px;font-size:13.5px;color:var(--ink-2)}
.nav-links a{padding:6px 12px;border-radius:var(--r-sm);transition:.12s}
.nav-links a:hover{color:var(--ink);background:var(--bg-s)}
.nav-links a[aria-current="page"]{color:var(--brand);font-weight:600}
.nav-r{display:flex;gap:10px;align-items:center}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:18px;transition:all .2s}
.card-hover:hover{border-color:rgba(91,79,232,.4);box-shadow:var(--sh-soft);transform:translateY(-3px)}
/* Gradient-border card (pricing "popular", feature highlight) */
/* Solid brand rule; the gradient-border trick is a stock tell. */
.card-grad{border-color:var(--brand)}
.card-ic{width:32px;height:32px;border-radius:var(--r-sm);background:var(--bg-s2);color:var(--brand);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ── Pills / badges ──────────────────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  padding:3px 10px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--bg-s);color:var(--ink-2)}
.pill-brand{background:var(--bg-s2);border-color:rgba(91,79,232,.3);color:var(--brand)}
.pill-ok{background:var(--ok-bg);border-color:transparent;color:var(--ok)}
.pill-warn{background:var(--warn-bg);border-color:transparent;color:var(--warn)}
.pill-err{background:var(--err-bg);border-color:transparent;color:var(--err)}
.pill-info{background:var(--info-bg);border-color:transparent;color:var(--info)}
.pill-live{gap:6px}
.pill-live::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;animation:blink 1.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* ── Forms (contact, waitlist, etc — the landing had none; internal pages will) */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.input,.textarea,.select{
  width:100%;font-family:var(--sans);font-size:14px;color:var(--ink);
  border:1.5px solid var(--line);border-radius:var(--r);padding:10px 12px;background:var(--bg);transition:.15s}
.input::placeholder,.textarea::placeholder{color:var(--ink-3)}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--bg-s2)}
.textarea{resize:vertical;min-height:96px;line-height:1.6}

/* ── FAQ / accordion ─────────────────────────────────────────────────────── */
.faq-item{border:1px solid var(--line);border-radius:var(--r);margin-bottom:7px;background:#fff;overflow:hidden}
.faq-q{width:100%;background:none;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:15px 17px;text-align:left;font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink);transition:color .12s}
.faq-q:hover,.faq-q[aria-expanded="true"]{color:var(--brand)}
.faq-x{font-size:18px;font-weight:300;color:var(--ink-3);transition:transform .2s;line-height:1;flex-shrink:0}
.faq-q[aria-expanded="true"] .faq-x{transform:rotate(45deg);color:var(--brand)}
.faq-item:has([aria-expanded="true"]){border-color:rgba(91,79,232,.25)}
.faq-a{display:none;font-size:13px;color:var(--ink-2);line-height:1.75;padding:0 17px 15px}
.faq-a.open{display:block}

/* ── CTA band (gradient) ─────────────────────────────────────────────────── */
/* Same ink as the footer. Flat field, no decorative grid overlay. */
.cta-band{background:var(--ink);padding:84px var(--pad-x);text-align:center;position:relative;overflow:hidden}

.cta-band h2{position:relative;font-size:clamp(26px,4vw,46px);font-weight:900;letter-spacing:-.04em;line-height:1.06;color:#fff;max-width:620px;margin:0 auto 14px}
.cta-band p{position:relative;font-size:15.5px;color:rgba(255,255,255,.8);max-width:480px;margin:0 auto 28px;line-height:1.65}
.cta-band .btn-row{position:relative;display:flex;gap:11px;justify-content:center;flex-wrap:wrap}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer{border-top:1px solid var(--line);padding:28px var(--pad-x)}
.foot-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.foot-logo img{height:24px}
.foot-links{display:flex;gap:16px;font-size:12.5px;color:var(--ink-3);flex-wrap:wrap}
.foot-links a:hover{color:var(--brand)}
.foot-copy{font-size:11.5px;color:var(--ink-3)}

/* ── Scroll reveal (add class="reveal", toggle .in via IntersectionObserver) */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ── Grids ───────────────────────────────────────────────────────────────── */
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:800px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .wrap{padding-top:56px;padding-bottom:56px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
}
