@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400;500&family=Crimson+Pro:ital,wght@0,400..700;1,400..600&display=swap");
/* ==== tokens/fonts.css ==== */
/* Fonts — CampaignOS ships Geist / Geist Mono / Crimson Pro via next/font/google
   (apps/web/src/app/layout.tsx). No binaries exist in the repo, so consumers
   load the same three families from Google Fonts (see the @import in styles.css).
   Families are byte-identical to the upstream next/font selection. */
:root {
  --font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, monospace;
  --font-heading: var(--font-sans);
  --font-crimson: "Crimson Pro", ui-serif, Georgia, serif;
  --font-serif: var(--font-crimson);
  /* Display serif is RESERVED: hero values only (giant timer, total raised,
     candidate greeting, landing/marketing h1+h2). Never standard headings. */
  --font-display: var(--font-crimson);
}
html { font-family: var(--font-sans); }

/* ==== tokens/colors.css ==== */
/* ── App shell (dashboard) — light. Verbatim from apps/web/src/app/globals.css ── */
:root {
  --background: oklch(0.965 0.002 75);
  --foreground: oklch(0.12 0 0);
  --card: oklch(0.995 0 0);
  --card-foreground: oklch(0.12 0 0);
  --popover: oklch(0.995 0 0);
  --popover-foreground: oklch(0.12 0 0);
  --primary: oklch(0.15 0 0);
  --primary-foreground: oklch(0.98 0 0);
  --secondary: oklch(0.945 0.002 75);
  --secondary-foreground: oklch(0.15 0 0);
  --muted: oklch(0.94 0.002 75);
  --muted-foreground: oklch(0.44 0 0);
  --accent: oklch(0.93 0.003 75);
  --accent-foreground: oklch(0.15 0 0);
  --destructive: oklch(0.50 0.20 25);
  --border: oklch(0.885 0.002 75);
  --input: oklch(0.90 0.002 75);
  --ring: oklch(0.50 0.20 25);

  /* Sidebar surface — one step lighter than the page in light mode */
  --sidebar: oklch(0.975 0.002 75);
  --sidebar-foreground: oklch(0.12 0 0);
  --sidebar-primary: oklch(0.15 0 0);
  --sidebar-primary-foreground: oklch(0.98 0 0);
  --sidebar-accent: oklch(0.93 0.003 75);
  --sidebar-accent-foreground: oklch(0.15 0 0);
  --sidebar-border: oklch(0.885 0.002 75);
  --sidebar-ring: oklch(0.50 0.20 25);

  /* Charts — campaign red first, then a neutral ramp. Deliberately NOT a
     rainbow: data color is red + greys so semantic accents stay meaningful. */
  --chart-1: oklch(0.50 0.20 25);
  --chart-2: oklch(0.45 0 0);
  --chart-3: oklch(0.35 0 0);
  --chart-4: oklch(0.25 0 0);
  --chart-5: oklch(0.15 0 0);

  /* ── Marketing / auth surfaces (CampaignOS landing + login) ── */
  --landing-navy: oklch(0.22 0.05 260);
  --landing-navy-dark: oklch(0.16 0.05 260);
  --landing-red: oklch(0.50 0.20 25);
  --landing-cream: oklch(0.97 0.005 85);

  /* ── Candidate campaign sites (apps/site) — hex, verbatim ── */
  --site-navy: #1B2A4A;
  --site-navy-dark: #0F1B33;
  --site-navy-light: #243558;
  --site-red: #C5283D;
  --site-red-dark: #A01E30;
  --site-red-light: #E03050;
  --site-cream: #F8F6F3;

  /* ── Semantic accents. Each has a MEANING; never pick by taste.
     Values are the Tailwind 50/500/600 stops the app uses. ── */
  --accent-money: #10b981;        /* emerald — money, wins, fundraising */
  --accent-money-text: #059669;
  --accent-money-bg: #ecfdf5;
  --accent-urgent: #ef4444;       /* red — overdue, urgent, errors */
  --accent-urgent-text: #dc2626;
  --accent-urgent-bg: #fef2f2;
  --accent-warning: #f59e0b;      /* amber — warnings, due-soon, pending */
  --accent-warning-text: #d97706;
  --accent-warning-bg: #fffbeb;
  --accent-agent: #6366f1;        /* indigo — AI agents, automation */
  --accent-agent-text: #4f46e5;
  --accent-agent-bg: #eef2ff;
  --accent-people: #3b82f6;       /* blue — contacts, neutral action */
  --accent-people-text: #2563eb;
  --accent-people-bg: #eff6ff;
  --accent-proof: #a855f7;        /* purple — endorsements, social proof */
  --accent-proof-text: #9333ea;
  --accent-proof-bg: #faf5ff;
  --accent-neutral: #64748b;      /* slate — neutral, default */

  /* Text / surface aliases */
  --text-body: var(--foreground);
  --text-muted: var(--muted-foreground);
  --text-inverse: var(--primary-foreground);
  --surface-page: var(--background);
  --surface-card: var(--card);
  --surface-sunken: var(--muted);
  --link: var(--landing-red);
  --link-hover: oklch(0.44 0.20 25);
}

/* ── App shell — dark. Near-black neutral, white-alpha hairlines ── */
.dark {
  --background: oklch(0.10 0 0);
  --foreground: oklch(0.90 0 0);
  --card: oklch(0.14 0 0);
  --card-foreground: oklch(0.90 0 0);
  --popover: oklch(0.14 0 0);
  --popover-foreground: oklch(0.90 0 0);
  --primary: oklch(0.90 0 0);
  --primary-foreground: oklch(0.10 0 0);
  --secondary: oklch(0.18 0 0);
  --secondary-foreground: oklch(0.85 0 0);
  --muted: oklch(0.18 0 0);
  --muted-foreground: oklch(0.50 0 0);
  --accent: oklch(0.18 0 0);
  --accent-foreground: oklch(0.85 0 0);
  --destructive: oklch(0.55 0.22 25);
  --border: oklch(0.22 0 0);
  --input: oklch(0.20 0 0);
  --ring: oklch(0.55 0.22 25);
  --sidebar: oklch(0.11 0 0);
  --sidebar-foreground: oklch(0.85 0 0);
  --sidebar-primary: oklch(0.90 0 0);
  --sidebar-primary-foreground: oklch(0.10 0 0);
  --sidebar-accent: oklch(0.16 0 0);
  --sidebar-accent-foreground: oklch(0.85 0 0);
  --sidebar-border: oklch(0.22 0 0);
  --sidebar-ring: oklch(0.55 0.22 25);
  --chart-1: oklch(0.55 0.22 25);
  --chart-2: oklch(0.65 0 0);
  --chart-3: oklch(0.50 0 0);
  --chart-4: oklch(0.35 0 0);
  --chart-5: oklch(0.22 0 0);
}

/* ==== tokens/typography.css ==== */
/* Typography — the roles table from apps/web/DESIGN-SYSTEM.md, tokenized.
   Sizes are literal app values (11px eyebrows, 0.9375rem legal prose). */
:root {
  --text-page-title: 1.25rem;      /* h1 — text-xl, font-semibold, tracking-tight */
  --text-page-title-weight: 600;
  --text-section: 0.875rem;        /* h2 — sentence case, font-semibold */
  --text-eyebrow: 0.6875rem;       /* 11px UPPERCASE tracking-wider muted */
  --text-eyebrow-tracking: 0.05em;
  --text-metric: 1.5rem;           /* text-2xl tabular-nums tracking-tight */
  --text-metric-hero: 1.875rem;    /* the one headline number, in Crimson */
  --text-body: 0.875rem;           /* table + app body */
  --text-body-lg: 1rem;            /* prose blocks */
  --text-prose: 0.9375rem;         /* legal / long-form pages */
  --text-small: 0.8125rem;
  --text-xs: 0.75rem;
  --text-micro: 0.625rem;          /* 10px — sidebar group labels, badges */
  --tracking-tight: -0.02em;
  --tracking-wide: 0.05em;
  --tracking-eyebrow-marketing: 0.3em; /* landing eyebrows: 0.28–0.3em */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.65;
}

/* ==== tokens/spacing.css ==== */
/* Spacing — the app's whole vocabulary is five steps. Anything else is drift. */
:root {
  --space-1: 0.25rem;   /* 4px  — gap-1 */
  --space-1-5: 0.375rem;/* 6px  — gap-1.5, tight inline items */
  --space-2: 0.5rem;    /* 8px  — icon + label, badge clusters */
  --space-3: 0.75rem;   /* 12px — inside a section; grid gap between cards */
  --space-4: 1rem;      /* 16px — card interior padding */
  --space-5: 1.25rem;   /* 20px — space-y-5: page container between sections */
  --space-8: 2rem;
  --space-12: 3rem;
  --space-20: 5rem;     /* marketing section padding (py-20) */
  --space-28: 7rem;     /* marketing section padding (sm:py-28) */
  --page-gap: var(--space-5);
  --card-padding: var(--space-4);
  --card-padding-sm: var(--space-3);
  --cell-padding-x: var(--space-3); /* every table cell gets real px-3 */
  --sidebar-width: 16rem;
  --sidebar-width-icon: 3rem;
  --content-max: 72rem;  /* max-w-6xl marketing container */
}

/* ==== tokens/radius.css ==== */
/* Radius — derived from a single --radius, exactly as the app computes it. */
:root {
  --radius: 0.625rem;                        /* 10px */
  --radius-sm: calc(var(--radius) * 0.6);    /* 6px  — sm buttons, icon tiles */
  --radius-md: calc(var(--radius) * 0.8);    /* 8px  */
  --radius-lg: var(--radius);                /* 10px — buttons, inputs */
  --radius-xl: calc(var(--radius) * 1.4);    /* 14px — Card */
  --radius-2xl: calc(var(--radius) * 1.8);   /* 18px */
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);   /* Badge — reads as a full pill */
  --radius-full: 9999px;
}

/* ==== tokens/elevation.css ==== */
/* Elevation — cards carry a hairline RING plus a whisper of shadow. The
   three-layer OKLCH stack is for cards that must feel tangibly raised. */
:root {
  --ring-hairline: 0 0 0 1px oklch(0 0 0 / 0.06); /* Card: ring-foreground/[0.06] */
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.05);
  --shadow-md: 0 4px 12px -4px oklch(0 0 0 / 0.08);   /* hover-lift */
  --shadow-lg: 0 8px 24px -6px oklch(0 0 0 / 0.10);
  --shadow-layered:
    0 1px 2px oklch(0 0 0 / 0.04),
    0 2px 8px oklch(0 0 0 / 0.03),
    0 0 0 1px oklch(0 0 0 / 0.02);
  --shadow-layered-hover:
    0 2px 4px oklch(0 0 0 / 0.06),
    0 8px 24px oklch(0 0 0 / 0.06),
    0 0 0 1px oklch(0 0 0 / 0.03);
  /* Login card on the navy counter — weightless, not dropped */
  --shadow-float: 0 24px 64px -16px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.08);
}
.dark {
  --ring-hairline: 0 0 0 1px oklch(1 0 0 / 0.06);
  --shadow-layered:
    0 1px 2px oklch(0 0 0 / 0.2),
    0 2px 8px oklch(0 0 0 / 0.15),
    0 0 0 1px oklch(1 0 0 / 0.04);
  --shadow-layered-hover:
    0 2px 4px oklch(0 0 0 / 0.3),
    0 8px 24px oklch(0 0 0 / 0.2),
    0 0 0 1px oklch(1 0 0 / 0.06);
}

/* ==== tokens/motion.css ==== */
/* Motion — restrained and functional. Motion means "your action landed". */
:root {
  --ease-out-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* @kind other */ /* the house curve */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ /* badge pop, sticker land */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast: 150ms; /* @kind other */ /* hover / press */
  --dur-base: 200ms; /* @kind other */ /* card transitions, filter chips */
  --dur-entry: 350ms; /* @kind other */ /* fade-in-up */
  --dur-reveal: 700ms; /* @kind other */ /* text-reveal, scroll reveal */
  --stagger-step: 40ms; /* @kind other */ /* stagger-children */
  --press-scale: 0.97; /* @kind other */ /* every button + pill */
  --hover-lift: -1px;   /* cards that navigate */
}

@keyframes fade-in-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes number-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes text-reveal { from { opacity: 0; transform: translateY(16px); letter-spacing: 0.02em; } to { opacity: 1; transform: translateY(0); letter-spacing: -0.02em; } }
@keyframes live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.92); } }
@keyframes badge-pop { 0% { transform: scale(0.6); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes ambient-breath { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes fill-right { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.animate-fade-in-up { animation: fade-in-up var(--dur-entry) ease-out forwards; }
.animate-number-in { animation: number-in 0.6s var(--ease-out-soft) both; }
.animate-text-reveal { animation: text-reveal var(--dur-reveal) var(--ease-out-soft) forwards; }
.animate-live-pulse { animation: live-pulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-ambient-breath { animation: ambient-breath 12s ease-in-out infinite; }
.stagger-children > * { opacity: 0; animation: fade-in-up 0.3s ease-out forwards; }
.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 40ms; }
.stagger-children > *:nth-child(3) { animation-delay: 80ms; }
.stagger-children > *:nth-child(4) { animation-delay: 120ms; }
.stagger-children > *:nth-child(5) { animation-delay: 160ms; }
.stagger-children > *:nth-child(6) { animation-delay: 200ms; }
.stagger-children > *:nth-child(7) { animation-delay: 240ms; }
.stagger-children > *:nth-child(8) { animation-delay: 280ms; }
.hover-lift { transition: transform var(--dur-fast) ease-out, box-shadow var(--dur-fast) ease-out; }
.hover-lift:hover { transform: translateY(var(--hover-lift)); box-shadow: var(--shadow-md); }

a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .hover-lift:hover { transform: none; }
  .stagger-children > * { opacity: 1; animation: none; }
}

/* ==== components/campaignos.css ==== */
/* CampaignOS component classes. One file, class-per-primitive, values lifted
   verbatim from apps/web/src/components/ui/*. Consumers get these for free
   through styles.css; the React components in components/** apply them. */

/* ── Button — apps/web/src/components/ui/button-variants.ts ── */
.cos-btn{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-lg);font-family:var(--font-sans);font-size:.875rem;font-weight:500;white-space:nowrap;transition:all var(--dur-fast) ease-out;outline:none;border:0;cursor:pointer;user-select:none;text-decoration:none;background:none}
.cos-btn:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--ring) 50%,transparent)}
.cos-btn:active{transform:scale(var(--press-scale))}
.cos-btn:disabled,.cos-btn[aria-disabled=true]{pointer-events:none;opacity:.5}
.cos-btn svg,.cos-btn .cos-icon{flex-shrink:0;pointer-events:none;width:16px;height:16px}
.cos-btn--default{background:var(--primary);color:var(--primary-foreground)}
.cos-btn--default:hover{background:color-mix(in srgb,var(--primary) 90%,transparent)}
.cos-btn--outline{border:1px solid var(--border);background:var(--background);color:var(--foreground)}
.cos-btn--outline:hover{background:var(--muted)}
.cos-btn--secondary{background:var(--secondary);color:var(--secondary-foreground)}
.cos-btn--secondary:hover{background:color-mix(in srgb,var(--secondary) 80%,transparent)}
.cos-btn--ghost{color:var(--foreground)}
.cos-btn--ghost:hover{background:var(--muted)}
.cos-btn--destructive{background:color-mix(in srgb,var(--destructive) 10%,transparent);color:var(--destructive)}
.cos-btn--destructive:hover{background:color-mix(in srgb,var(--destructive) 20%,transparent)}
.cos-btn--destructive-outline{border:1px solid color-mix(in srgb,var(--destructive) 30%,transparent);color:var(--destructive)}
.cos-btn--destructive-outline:hover{background:color-mix(in srgb,var(--destructive) 10%,transparent)}
.cos-btn--link{color:var(--primary);text-underline-offset:4px}
.cos-btn--link:hover{text-decoration:underline}
.cos-btn--size-default{height:36px;gap:8px;padding:8px 16px}
.cos-btn--size-sm{height:32px;gap:6px;border-radius:var(--radius-md);padding:0 12px;font-size:.75rem}
.cos-btn--size-sm svg,.cos-btn--size-sm .cos-icon{width:14px;height:14px}
.cos-btn--size-lg{height:40px;gap:8px;border-radius:var(--radius-md);padding:0 24px}
.cos-btn--size-icon{height:36px;width:36px;padding:0}

/* ── Badge — radius-4xl reads as a pill at h20 ── */
.cos-badge{display:inline-flex;height:20px;width:fit-content;flex-shrink:0;align-items:center;justify-content:center;gap:4px;overflow:hidden;border-radius:var(--radius-4xl);border:1px solid transparent;padding:2px 8px;font-size:.75rem;font-weight:500;white-space:nowrap;transition:all var(--dur-fast) ease-out}
.cos-badge svg,.cos-badge .cos-icon{width:12px;height:12px}
.cos-badge--default{background:var(--primary);color:var(--primary-foreground)}
.cos-badge--secondary{background:var(--secondary);color:var(--secondary-foreground)}
.cos-badge--destructive{background:color-mix(in srgb,var(--destructive) 10%,transparent);color:var(--destructive)}
.cos-badge--outline{border-color:var(--border);color:var(--foreground)}
.cos-badge--ghost{color:var(--muted-foreground)}
.cos-badge--ghost:hover{background:var(--muted)}

/* ── Card ── */
.cos-card{display:flex;flex-direction:column;gap:16px;overflow:hidden;border-radius:var(--radius-xl);background:var(--card);padding:16px 0;font-size:.875rem;color:var(--card-foreground);box-shadow:var(--shadow-sm),var(--ring-hairline);transition:all var(--dur-base) ease-out}
.cos-card[data-size=sm]{gap:12px;padding:12px 0}
.cos-card[data-hoverable]{cursor:pointer}
.cos-card[data-hoverable]:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg),var(--ring-hairline)}
.cos-card-header{display:grid;grid-auto-rows:min-content;align-items:start;gap:4px;padding:0 16px}
.cos-card[data-size=sm] .cos-card-header,.cos-card[data-size=sm] .cos-card-content{padding:0 12px}
.cos-card-title{font-family:var(--font-heading);font-size:1rem;line-height:1.375;font-weight:500}
.cos-card[data-size=sm] .cos-card-title{font-size:.875rem}
.cos-card-description{font-size:.875rem;color:var(--muted-foreground)}
.cos-card-content{padding:0 16px}
.cos-card-footer{display:flex;align-items:center;border-top:1px solid var(--border);background:color-mix(in srgb,var(--muted) 50%,transparent);padding:16px;margin-bottom:-16px}

/* ── Input ── */
.cos-input{height:32px;width:100%;min-width:0;border-radius:var(--radius-lg);border:1px solid var(--input);background:transparent;padding:4px 10px;font-family:var(--font-sans);font-size:.875rem;color:var(--foreground);transition:all var(--dur-fast) ease-out;outline:none}
.cos-input::placeholder{color:var(--muted-foreground)}
.cos-input:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 50%,transparent)}
.cos-input:disabled{cursor:not-allowed;opacity:.5;background:color-mix(in srgb,var(--input) 50%,transparent)}
.cos-input[aria-invalid=true]{border-color:var(--destructive);box-shadow:0 0 0 3px color-mix(in srgb,var(--destructive) 20%,transparent)}

/* ── FormField ── */
.cos-field{display:flex;flex-direction:column;gap:6px}
.cos-field-label{font-size:.75rem;font-weight:500;color:color-mix(in srgb,var(--foreground) 90%,transparent)}
.cos-field-req{margin-left:2px;color:var(--accent-urgent)}
.cos-field-hint{font-size:.6875rem;color:color-mix(in srgb,var(--muted-foreground) 80%,transparent)}
.cos-field-error{font-size:.6875rem;color:var(--accent-urgent-text)}

/* ── Filters ── */
.cos-pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-full);border:1px solid var(--border);background:var(--background);padding:4px 10px;font-size:.75rem;font-weight:500;color:var(--muted-foreground);cursor:pointer;transition:all var(--dur-fast) ease-out}
.cos-pill:hover{border-color:color-mix(in srgb,var(--foreground) 30%,transparent);background:var(--muted);color:var(--foreground)}
.cos-pill:active{transform:scale(var(--press-scale))}
.cos-pill[aria-pressed=true]{border-color:color-mix(in srgb,var(--foreground) 15%,transparent);background:var(--foreground);color:var(--background);box-shadow:var(--shadow-sm)}
.cos-pill:disabled{cursor:not-allowed;opacity:.5}
.cos-chip{display:inline-flex;flex-shrink:0;align-items:center;gap:4px;border-radius:var(--radius-full);border:1px solid var(--border);background:color-mix(in srgb,var(--muted) 40%,transparent);padding:4px 4px 4px 10px;font-size:.6875rem;font-weight:500;color:var(--foreground);animation:fade-in-up 200ms ease-out}
.cos-chip-x{margin-left:2px;display:inline-flex;border:0;background:none;border-radius:var(--radius-full);padding:2px;color:var(--muted-foreground);cursor:pointer;transition:all var(--dur-fast) ease-out}
.cos-chip-x:hover{background:var(--foreground);color:var(--background)}

/* ── Page / section headers ── */
.cos-page-header{display:flex;flex-direction:column;gap:12px}
@media(min-width:640px){.cos-page-header{flex-direction:row;align-items:flex-start;justify-content:space-between}}
.cos-page-title{font-size:1.25rem;font-weight:600;letter-spacing:var(--tracking-tight);margin:0}
.cos-page-subtitle{margin:2px 0 0;font-size:.875rem;color:var(--muted-foreground)}
.cos-page-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cos-section-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cos-section-header h2{display:flex;align-items:center;gap:6px;margin:0;font-size:.875rem;font-weight:500;text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--muted-foreground)}
.cos-eyebrow{font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--muted-foreground)}

/* ── StatCard ── */
.cos-stat-label{font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--muted-foreground);margin:0}
.cos-stat-value{margin:4px 0 0;font-size:1.5rem;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-tight);animation:number-in .6s var(--ease-out-soft) both}
.cos-stat-hint{margin:2px 0 0;font-size:.6875rem;color:color-mix(in srgb,var(--muted-foreground) 80%,transparent)}
.cos-stat-icon{display:flex;height:24px;width:24px;flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-sm)}
.cos-stat-badge{margin:6px 0 0;display:inline-flex;align-items:center;gap:4px;border-radius:var(--radius-full);padding:2px 8px;font-size:.75rem;font-weight:500}

/* ── EmptyState ── */
.cos-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 0}
.cos-empty[data-bare]{padding:24px 0}
.cos-empty-title{margin:12px 0 0;font-size:.875rem;font-weight:500}
.cos-empty-desc{margin:4px 0 0;max-width:24rem;font-size:.75rem;color:var(--muted-foreground)}

/* ── AlertBanner ── */
.cos-alert{display:flex;align-items:center;gap:12px;padding:4px 16px}
.cos-alert-icon{display:flex;height:36px;width:36px;flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-md)}
.cos-alert-title{margin:0;font-size:.875rem;font-weight:500;line-height:1.25}
.cos-alert-desc{margin:2px 0 0;font-size:.75rem;color:var(--muted-foreground)}

/* ── Table (ledger) — dense record tables ── */
.cos-table{width:100%;border-collapse:collapse;font-size:.75rem}
.cos-table th{padding:10px 12px;text-align:left;font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--muted-foreground);border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--muted) 50%,transparent);white-space:nowrap}
.cos-table td{padding:10px 12px;border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent)}
.cos-table tbody tr:last-child td{border-bottom:0}
.cos-table tbody tr{transition:background var(--dur-fast) ease-out}
.cos-table tbody tr:hover{background:color-mix(in srgb,var(--muted) 30%,transparent)}
.cos-table .cos-subject{font-size:.875rem;font-weight:500;position:sticky;left:0;z-index:1;background:var(--card)}
.cos-table thead .cos-subject{background:color-mix(in srgb,var(--muted) 50%,var(--card))}
.cos-table tbody tr:hover .cos-subject{background:color-mix(in srgb,var(--muted) 30%,var(--card))}
.cos-table .cos-num{text-align:right;font-variant-numeric:tabular-nums}
.cos-table .cos-divide{border-right:1px solid color-mix(in srgb,var(--border) 50%,transparent)}
.cos-sortable{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:0;font:inherit;text-transform:inherit;letter-spacing:inherit;color:inherit;cursor:pointer}
.cos-sortable[data-active]{color:var(--accent-money-text)}

/* ── Sidebar ── */
.cos-sidebar{display:flex;width:var(--sidebar-width);flex-shrink:0;flex-direction:column;background:var(--sidebar);color:var(--sidebar-foreground);border-right:1px solid var(--sidebar-border)}
.cos-sidebar-header{display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--sidebar-border);padding:12px}
.cos-sidebar-content{display:flex;min-height:0;flex:1;flex-direction:column;overflow:auto;padding:8px}
.cos-sidebar-group{display:flex;width:100%;flex-direction:column;padding:8px 0}
.cos-sidebar-group-label{display:flex;height:32px;flex-shrink:0;align-items:center;padding:0 8px;font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:var(--tracking-wide);color:color-mix(in srgb,var(--muted-foreground) 60%,transparent)}
.cos-sidebar-group-label[data-mono]{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.1em}
.cos-nav-item{display:flex;width:100%;align-items:center;gap:8px;overflow:hidden;border-radius:var(--radius-md);border:0;background:none;padding:8px;text-align:left;font-size:.875rem;color:inherit;cursor:pointer;transition:background var(--dur-fast) ease-out,color var(--dur-fast) ease-out}
.cos-nav-item:hover{background:var(--sidebar-accent);color:var(--sidebar-accent-foreground)}
.cos-nav-item[data-active]{background:var(--sidebar-accent);font-weight:500;color:var(--sidebar-accent-foreground)}
.cos-nav-item svg,.cos-nav-item .cos-icon{width:16px;height:16px;flex-shrink:0}
.cos-nav-badge{display:inline-flex;height:16px;min-width:16px;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--muted);padding:0 4px;font-size:.625rem;font-weight:500;color:color-mix(in srgb,var(--foreground) 70%,transparent)}
.cos-sidebar-footer{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--sidebar-border);padding:12px}

/* ── Misc primitives ── */
.cos-separator{flex-shrink:0;background:var(--border)}
.cos-separator[data-orientation=horizontal]{height:1px;width:100%}
.cos-separator[data-orientation=vertical]{width:1px;align-self:stretch}
.cos-skeleton{position:relative;overflow:hidden;border-radius:var(--radius-md);background:var(--muted);isolate:isolate}
.cos-skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--foreground) 6%,transparent),transparent);animation:shimmer 1.8s ease-in-out infinite}
.cos-crumbs{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none;font-size:.875rem;color:var(--muted-foreground)}
.cos-crumbs li{display:flex;align-items:center;gap:4px}
.cos-crumbs [data-current]{font-weight:500;color:var(--foreground)}
.cos-pagination{display:flex;align-items:center;justify-content:center;gap:12px}
.cos-pagination span{font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--muted-foreground)}
.cos-countdown{display:flex;flex-shrink:0;align-items:center;gap:8px;border-radius:var(--radius-lg);border:0;padding:8px 12px;cursor:pointer;transition:background var(--dur-base) ease-out;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--foreground) 5%,transparent);background:var(--muted);color:var(--foreground)}
.cos-countdown[data-urgency=week]{background:var(--accent-urgent-bg);color:#b91c1c;box-shadow:inset 0 0 0 1px rgba(254,202,202,.5)}
.cos-countdown[data-urgency=fortnight]{background:var(--accent-warning-bg);color:#b45309;box-shadow:inset 0 0 0 1px rgba(253,230,138,.5)}
.cos-countdown[data-urgency=month]{background:#fff7ed;color:#c2410c;box-shadow:inset 0 0 0 1px rgba(254,215,170,.5)}
.cos-countdown-num{margin:0;font-size:.875rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.cos-countdown-label{margin:0;font-size:.6875rem;line-height:1;color:var(--muted-foreground)}


/* ═══ Marketing surfaces — navy stage / cream relief / white body.
   Values lifted from src/components/landing/* and apps/site/components/*.
   Every block takes data-tone="light" (default) or "dark" (navy stage). ═══ */
.cos-mk-eyebrow{margin:0;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-eyebrow-marketing);color:var(--landing-red)}
.cos-mk-eyebrow[data-tone=dark]{color:rgba(255,255,255,.5)}
.cos-mk-h{margin:12px 0 0;font-family:var(--font-display);font-weight:600;letter-spacing:var(--tracking-tight);line-height:1.1;color:var(--landing-navy);text-wrap:pretty}
.cos-mk-h[data-tone=dark]{color:#fff}
.cos-mk-h[data-level="1"]{font-size:clamp(2.5rem,4.6vw,4.25rem)}
.cos-mk-h[data-level="2"]{font-size:clamp(1.875rem,2.6vw,2.5rem)}
.cos-mk-h[data-level="3"]{font-size:1.375rem;font-family:var(--font-sans);font-weight:600}
.cos-mk-sub{margin:16px 0 0;font-size:1rem;line-height:1.65;color:color-mix(in srgb,var(--landing-navy) 55%,transparent)}
.cos-mk-sub[data-tone=dark]{color:rgba(255,255,255,.55)}

.cos-mk-card{border-radius:var(--radius-xl);border:1px solid color-mix(in srgb,var(--landing-navy) 8%,transparent);background:color-mix(in srgb,var(--landing-cream) 40%,#fff);padding:28px;transition:border-color var(--dur-base) ease-out,box-shadow var(--dur-base) ease-out}
.cos-mk-card:hover{border-color:color-mix(in srgb,var(--landing-red) 25%,transparent);box-shadow:var(--shadow-lg)}
.cos-mk-card[data-tone=dark]{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.03)}
.cos-mk-card[data-tone=dark]:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06);box-shadow:none}
.cos-mk-tile{display:flex;height:44px;width:44px;flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-lg);background:color-mix(in srgb,var(--landing-red) 8%,transparent);color:var(--landing-red)}
.cos-mk-card[data-tone=dark] .cos-mk-tile{background:color-mix(in srgb,var(--landing-red) 12%,transparent)}
.cos-mk-card-title{margin:0;font-size:1rem;font-weight:600;color:var(--landing-navy)}
.cos-mk-card[data-tone=dark] .cos-mk-card-title{color:#fff}
.cos-mk-card-body{margin:6px 0 0;font-size:.875rem;line-height:1.6;color:color-mix(in srgb,var(--landing-navy) 55%,transparent)}
.cos-mk-card[data-tone=dark] .cos-mk-card-body{color:rgba(255,255,255,.45)}
.cos-mk-bullets{margin:16px 0 0;padding:16px 0 0 0;list-style:none;display:grid;gap:6px;border-top:1px solid color-mix(in srgb,var(--landing-navy) 6%,transparent)}
.cos-mk-card[data-tone=dark] .cos-mk-bullets{border-top-color:rgba(255,255,255,.08)}
.cos-mk-bullets li{display:flex;gap:8px;font-size:.8125rem;line-height:1.5;color:color-mix(in srgb,var(--landing-navy) 45%,transparent)}
.cos-mk-card[data-tone=dark] .cos-mk-bullets li{color:rgba(255,255,255,.4)}
.cos-mk-bullets li span{margin-top:2px;flex-shrink:0;color:color-mix(in srgb,var(--landing-red) 50%,transparent)}

.cos-mk-gate{margin:14px 0 0;display:flex;align-items:center;gap:8px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--accent-money) 8%,transparent);padding:7px 10px;font-size:.75rem;font-weight:500;color:var(--accent-money-text)}
.cos-mk-card[data-tone=dark] .cos-mk-gate{background:color-mix(in srgb,var(--accent-money) 14%,transparent);color:color-mix(in srgb,var(--accent-money) 70%,#fff)}

/* Compact mode — print collateral and tight grids. Halves the padding, shrinks
   the tile, drops the body to a single tight line. */
.cos-mk-card[data-compact]{padding:14px}
.cos-mk-card[data-compact] .cos-mk-tile{height:32px;width:32px;border-radius:var(--radius-md)}
.cos-mk-card[data-compact] .cos-mk-card-title{font-size:.875rem}
.cos-mk-card[data-compact] .cos-mk-card-body{margin-top:3px;font-size:.75rem;line-height:1.45}
.cos-mk-card[data-compact] .cos-mk-gate{margin-top:10px;padding:5px 8px;font-size:.6875rem}
.cos-mk-card[data-compact]:hover{box-shadow:none;border-color:color-mix(in srgb,var(--landing-navy) 8%,transparent)}
.cos-mk-price[data-compact]{padding:16px}
.cos-mk-price[data-compact] .cos-mk-price-amt{font-size:1.625rem}

/* Print — never split a card across a page boundary. */
@media print{.cos-mk-card,.cos-mk-price,.cos-mk-step,.cos-mk-quote{break-inside:avoid}}

.cos-mk-step{display:flex;gap:24px;align-items:flex-start;border-radius:var(--radius-xl);border:1px solid color-mix(in srgb,var(--landing-navy) 8%,transparent);background:color-mix(in srgb,var(--landing-cream) 40%,#fff);padding:24px}
.cos-mk-step[data-tone=dark]{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.03)}
.cos-mk-step-num{font-family:var(--font-display);font-size:2rem;font-weight:700;line-height:1;color:color-mix(in srgb,var(--landing-red) 60%,transparent)}
/* Dark tone must re-color the descendants the step renders — same contract as
   .cos-mk-card[data-tone=dark]. Without these the title sits navy-on-navy. */
.cos-mk-step[data-tone=dark] .cos-mk-step-num{color:color-mix(in srgb,var(--landing-red) 55%,#fff)}
.cos-mk-step[data-tone=dark] .cos-mk-tile{background:rgba(255,255,255,.08);color:color-mix(in srgb,var(--landing-red) 55%,#fff)}
.cos-mk-step[data-tone=dark] .cos-mk-card-title{color:#fff}
.cos-mk-step[data-tone=dark] .cos-mk-card-body{color:rgba(255,255,255,.62)}

.cos-mk-metric{text-align:center}
.cos-mk-metric-v{margin:0;font-family:var(--font-display);font-size:2.5rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-tight);line-height:1;color:var(--landing-navy)}
.cos-mk-metric[data-tone=dark] .cos-mk-metric-v{color:#fff}
.cos-mk-metric-l{margin:6px 0 0;font-size:.875rem;color:color-mix(in srgb,var(--landing-navy) 55%,transparent)}
.cos-mk-metric[data-tone=dark] .cos-mk-metric-l{color:rgba(255,255,255,.45)}

.cos-mk-price{display:flex;flex-direction:column;border-radius:var(--radius-xl);border:1px solid color-mix(in srgb,var(--landing-navy) 10%,transparent);background:#fff;padding:28px}
.cos-mk-price[data-featured]{border-color:color-mix(in srgb,var(--landing-red) 45%,transparent);box-shadow:var(--shadow-lg)}
.cos-mk-price[data-tone=dark]{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.cos-mk-price-name{margin:0;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--landing-red)}
.cos-mk-price-fig{margin:10px 0 0;display:flex;align-items:baseline;gap:6px}
.cos-mk-price-amt{font-family:var(--font-display);font-size:2.25rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-tight);line-height:1;color:var(--landing-navy)}
.cos-mk-price[data-tone=dark] .cos-mk-price-amt{color:#fff}
.cos-mk-price-cad{font-size:.875rem;color:color-mix(in srgb,var(--landing-navy) 50%,transparent)}
.cos-mk-price[data-tone=dark] .cos-mk-price-cad{color:rgba(255,255,255,.45)}
.cos-mk-price-note{margin:8px 0 0;font-size:.8125rem;line-height:1.55;color:color-mix(in srgb,var(--landing-navy) 55%,transparent)}
.cos-mk-price[data-tone=dark] .cos-mk-price-note{color:rgba(255,255,255,.45)}

.cos-mk-tiers{width:100%;border-collapse:collapse;font-size:.8125rem}
.cos-mk-tiers th{padding:8px 12px;text-align:left;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-wide);color:color-mix(in srgb,var(--landing-navy) 50%,transparent);border-bottom:1px solid color-mix(in srgb,var(--landing-navy) 10%,transparent)}
.cos-mk-tiers td{padding:9px 12px;border-bottom:1px solid color-mix(in srgb,var(--landing-navy) 6%,transparent);color:var(--landing-navy)}
.cos-mk-tiers td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.cos-mk-tiers tr:last-child td{border-bottom:0}

.cos-mk-quote{display:flex;flex-direction:column;height:100%;border-radius:var(--radius-xl);border:1px solid color-mix(in srgb,var(--landing-navy) 5%,transparent);background:var(--landing-cream);padding:28px}
.cos-mk-quote-mark{font-family:var(--font-display);font-size:2.75rem;line-height:1;color:color-mix(in srgb,var(--landing-red) 20%,transparent);user-select:none;margin-bottom:14px}
.cos-mk-quote blockquote{margin:0;flex:1;font-size:1rem;font-style:italic;line-height:1.65;color:color-mix(in srgb,var(--landing-navy) 75%,transparent)}
.cos-mk-quote-attr{margin-top:22px;border-top:1px solid color-mix(in srgb,var(--landing-navy) 8%,transparent);padding-top:14px}

.cos-mk-cta{padding:96px 24px;text-align:center;background:var(--landing-cream)}
.cos-mk-cta[data-tone=dark]{background:var(--landing-navy)}
.cos-mk-btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--radius-lg);border:0;background:var(--landing-red);padding:15px 32px;font-family:var(--font-sans);font-size:1rem;font-weight:600;color:#fff;cursor:pointer;text-decoration:none;transition:filter var(--dur-fast) ease-out,box-shadow var(--dur-fast) ease-out}
.cos-mk-btn:hover{filter:brightness(1.1);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--landing-red) 50%,transparent);color:#fff}
.cos-mk-btn[data-variant=quiet]{background:transparent;border:2px solid color-mix(in srgb,var(--landing-navy) 20%,transparent);color:var(--landing-navy);padding:13px 30px}
.cos-mk-btn[data-variant=quiet]:hover{filter:none;box-shadow:none;background:color-mix(in srgb,var(--landing-navy) 5%,transparent)}
.cos-mk-btn[data-tone=dark][data-variant=quiet]{border-color:rgba(255,255,255,.2);color:#fff}
.cos-mk-btn[data-tone=dark][data-variant=quiet]:hover{background:rgba(255,255,255,.1)}

.cos-mk-legal{margin:0;font-size:.6875rem;line-height:1.6;color:color-mix(in srgb,var(--landing-navy) 70%,transparent)}
.cos-mk-legal[data-tone=dark]{color:rgba(255,255,255,.55)}

/* ==== template ==== */
body{margin:0;background:#fff;font-family:var(--font-sans);-webkit-font-smoothing:antialiased}*{box-sizing:border-box}a{color:var(--landing-red);text-decoration:none}a:hover{color:oklch(0.44 0.20 25)}@keyframes pos-pulse{0%,100%{opacity:.45}50%{opacity:1}}
/* ==== hover affordances (from style-hover in source template) ==== */
header nav a:hover, header a[href="#login"]:hover, footer a:hover { color: #fff !important; }
a[href="#demo"]:hover { filter: brightness(1.1); }
section#top a[href="#system"]:hover { background: rgba(255,255,255,.12) !important; }
section a[href^="https://"]:hover { color: var(--landing-red) !important; }
html { scroll-behavior: smooth; }

/* ==== intake-flow animation ==== */
@keyframes cos-fly{0%{offset-distance:0%;opacity:0}12%{opacity:1}62%{opacity:1}86%{opacity:0}100%{offset-distance:100%;opacity:0}}
@keyframes cos-crawl{to{stroke-dashoffset:-12}}
@keyframes cos-hub{0%{transform:scale(1);opacity:.5}70%{opacity:0}100%{transform:scale(1.12);opacity:0}}
@media (prefers-reduced-motion:reduce){[data-dur]{animation:none!important;opacity:1!important}}

/* ==== site-wide navy grid background ==== */
body{background-color:var(--landing-navy);background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);background-size:60px 60px}

/* Contact form (in #demo CTA section) */
#contact-form input::placeholder,
#contact-form textarea::placeholder { color: rgba(255, 255, 255, 0.42); }
#contact-form input:focus,
#contact-form textarea:focus { outline: none; border-color: rgba(255, 255, 255, 0.45); }
@media (max-width: 640px) {
  #contact-form > div:first-child { grid-template-columns: 1fr; }
}

/* ==== mobile / iOS suitability ====
   The page markup carries desktop-fixed inline styles, so these overrides
   target the inline values via [style*=...] and win with !important. */
html { -webkit-text-size-adjust: 100%; }
header { -webkit-backdrop-filter: blur(12px); }

@media (max-width: 900px) {
  /* Case-study / feature card grids collapse to one column */
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
  [style*="grid-template-columns: 1.05fr 0.95fr"] { grid-template-columns: 1fr !important; }
  /* Footer: brand block full width, link columns two-up */
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  /* Section containers: tighter gutters and vertical rhythm */
  [style*="padding: 104px 32px"] { padding: 64px 20px !important; }
  [style*="padding: 96px 32px"] { padding: 64px 20px !important; }
  [style*="padding: 96px 32px 104px"] { padding: 64px 20px 72px !important; }
  [style*="padding: 56px 32px 40px"] { padding: 44px 20px 32px !important; }

  /* Nav: logo + CTA stay on the first row; links wrap to a scrollable row */
  header div[style*="max-width: 1152px"] {
    flex-wrap: wrap !important;
    height: auto !important;
    padding: 10px 16px !important;
    row-gap: 2px;
  }
  header nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 18px !important;
  }
  header nav::-webkit-scrollbar { display: none; }
  header nav a { padding: 8px 0; font-size: 14.5px !important; }
  header a[href="#demo"], header a[href="/#demo"] { height: 34px !important; padding: 0 12px !important; font-size: 13px !important; }
  header div[style*="max-width: 1152px"] > div[style*="margin-left: auto"] { gap: 10px !important; }
  header a[href="/"] span { font-size: 17px !important; }
  /* /#login has no target anywhere on the site; drop it from the cramped mobile header */
  header a[href="/#login"], header a[href="#login"] { display: none; }

  /* Display type scales down instead of overflowing */
  h1[style*="font-size: 60px"] { font-size: clamp(2.125rem, 9vw, 3.25rem) !important; }
  h2[style*="font-size: 44px"], h2[style*="font-size: 46px"] { font-size: clamp(1.75rem, 7.5vw, 2.5rem) !important; }

  /* Two-column content grids stack */
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 220px 1fr"] { grid-template-columns: 1fr !important; }

  /* Footer bottom bar wraps instead of squeezing the Truvo logo */
  footer div[style*="justify-content: space-between"] { flex-wrap: wrap; gap: 24px; }

  /* Dense mockup tables scroll inside their card instead of widening the page */
  .cos-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* iOS Safari zooms the page when a focused field is under 16px */
  input, select, textarea { font-size: 16px !important; }
}

/* ==== navy re-theme: class-styled marketing cards ==== */
.cos-mk-card, .cos-mk-step {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.13);
}
.cos-mk-card-title { color: #fff; }
.cos-mk-card-body { color: rgba(255, 255, 255, 0.62); }
.cos-mk-bullets { border-top-color: rgba(255, 255, 255, 0.1); }
.cos-mk-bullets li { color: rgba(255, 255, 255, 0.55); }
.cos-mk-step-num { color: color-mix(in srgb, var(--landing-red) 55%, #fff); }
.cos-mk-tile { background: rgba(255, 255, 255, 0.08); color: color-mix(in srgb, var(--landing-red) 55%, #fff); }
.cos-mk-legal { color: rgba(255, 255, 255, 0.5); }
.cos-mk-gate { background: color-mix(in srgb, var(--accent-money) 14%, transparent); color: color-mix(in srgb, var(--accent-money) 70%, #fff); }