/* Plumo design tokens.
   Fonts: <link href="https://fonts.googleapis.com/css2?family=Vend+Sans:wght@400;500;600&family=Inter:opsz,wght@14..32,400;14..32,500&display=swap" rel="stylesheet"> */
:root {
  /* ── Surfaces ── */
  --bg: #FFFFFF;            /* page */
  --surface: #FFFFFF;       /* cards on cream bands */
  --paper: #FAF4EF;         /* cream band (testimonials, pricing, FAQ items) */
  --paper-2: #F8F0E9;       /* cream card / active tab */
  --paper-soft: #FCF9F6;    /* soft cream band (tabs, comparison) */
  --surface-2: var(--paper-2);

  /* ── Text ── */
  --ink: #03294A;           /* headings, buttons, all strong text */
  --text: var(--ink);
  --text-2: #576470;        /* body copy */
  --muted: #6B7782;         /* small muted text (≥ 4.5:1 on cream) */

  /* ── Lines ── */
  --line: #EDE6DF;          /* hairlines on cream */
  --line-2: #EAECF0;        /* hairlines on white */

  /* ── Brand / accent ── */
  --accent: #03294A;        /* the ink pill button — the one strong colour */
  --accent-rgb: 3, 41, 74;
  --accent-soft: #E2DEFF;   /* lilac wash */
  --on-accent: #FFFFFF;
  --accent-hover: #0B3A63;
  --btn-glint: #9FA5FF;     /* the lilac inner highlight on ink buttons */
  /* four pastel fields: each feature / step / value card wears one */
  --lilac: #E2DEFF; --lilac-2: #9FA5FF; --violet: #AC9FF7;
  --pink: #FED3F1; --lime: #F7FE8E; --mint: #C1EFDC; --peach: #FFE9CC;
  --glide: rgba(3, 41, 74, .06);
  /* the signature soft rainbow: chips, CTA strips, hero glow */
  --grad-chip: linear-gradient(90deg, #FED3F1 0%, #FFE9CC 22%, #FFF2BD 50%, #F4F8B5 69%, #F7FE8E 100%);

  /* ── Data / status (mockups only) ── */
  --success: #0FB86A; --success-ink: #077A43; --warning: #F5B33D; --danger: #E5484D; --danger-ink: #C42B30; --info: #9FA5FF;

  /* ── Fonts ── */
  --font-display: "Vend Sans", system-ui, sans-serif;
  --font: "Inter", system-ui, sans-serif;     /* set at display optical size, like Inter Display */
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Radii ── */
  --r-xs: 8px; --r-sm: 12px; --r: 16px; --r-md: 20px; --r-lg: 24px; --r-xl: 32px; --r-step: 40px; --r-pill: 100px;

  /* ── Spacing / layout ── */
  --container: 1280px;      /* content width */
  --band: 1376px;           /* cream / colour bands sit 32px in from the page edge */
  --gutter: 24px;
  --section: 120px;         /* gap between sections */
  --band-pad: 120px;        /* top/bottom padding inside a band */
  --head-gap: 80px;         /* section head → content */

  /* ── Shadows ── */
  --shadow-1: 0 4px 16px rgba(3, 41, 74, .05);
  --shadow-2: 0 24px 60px -24px rgba(3, 41, 74, .18);
  --btn-inset: inset 1px 1px 2px 0 var(--btn-glint), inset -2px -2px 2px 0 rgba(0,0,0,.15), inset 0 17px 24px 0 rgba(0,0,0,.1);

  /* ── Motion ── */
  --ease: cubic-bezier(.25, .46, .45, .94); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur: .6s;
}

/* ── Type scale ── */
.t-display { font: 600 80px/1.05 var(--font-display); letter-spacing: -4px; }
.t-h1 { font: 600 80px/1.05 var(--font-display); letter-spacing: -4px; }
.t-h2 { font: 600 60px/1.2 var(--font-display); letter-spacing: -1.5px; }
.t-h3 { font: 600 48px/1.2 var(--font-display); letter-spacing: -1px; }
.t-h4 { font: 500 24px/1.6 var(--font-display); letter-spacing: -.5px; }
.t-h5 { font: 500 20px/1.5 var(--font-display); }
.t-lead { font: 400 18px/1.7 var(--font); font-variation-settings: "opsz" 32; }
.t-body { font: 400 16px/1.7 var(--font); font-variation-settings: "opsz" 32; }
.t-small { font: 400 14px/1.6 var(--font); font-variation-settings: "opsz" 32; }
.t-label { font: 500 14px/1.7 var(--font-display); }

@media (max-width: 991px) {
  .t-display, .t-h1 { font-size: 60px; letter-spacing: -2.5px; }
  .t-h2 { font-size: 48px; letter-spacing: -1.2px; }
  .t-h3 { font-size: 40px; }
}
@media (max-width: 767px) {
  :root { --section: 96px; --band-pad: 72px; --head-gap: 48px; }
  .t-display, .t-h1 { font-size: 44px; letter-spacing: -1.6px; line-height: 1.08; }
  .t-h2 { font-size: 36px; letter-spacing: -.9px; }
  .t-h3 { font-size: 32px; letter-spacing: -.6px; }
  .t-h4 { font-size: 20px; }
  .t-lead { font-size: 16px; }
}

/* ── Motion off: reduced motion + ?static (the JS adds .static to <html>) ── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.static *, .static *::before, .static *::after { transition: none !important; animation: none !important; }