/* CAASie base styles: the site-wide layer.
   Everything here is meant to be inherited by every page.
   In Webflow this maps to:
   - :root tokens          -> Variables
   - body, h1-h3, p, a     -> "All Body", "All H1/H2/H3", "All Paragraphs", "All Links" tag styles
   - .cs-* classes         -> a small shared class set (buttons, panels, eyebrow, pills, sections, nav, footer)
   Page-specific styling lives in a separate file and never redefines these.
   Source of tokens: caasie_app/client/src/styles/palettes.scss, plus the carousel brief. */

:root {
  /* Colour */
  --cs-dark1: #001a23;
  --cs-dark2: #00232d;      /* default page background (the live site's teal) */
  --cs-dark3: #012f38;
  --cs-dark4: #103c44;
  --cs-green: #3bd62b;      /* product green: fills, buttons */
  --cs-green-bright: #25f21a; /* the one highlighted word in a headline */
  --cs-mint: #33ea6f;       /* big closing panels */
  --cs-pale: #d6ffd2;       /* pale-green cards, labels on green */
  --cs-text: #f8f8f8;
  --cs-text-soft: #a1bdc2;
  --cs-text-faint: #739399;
  --cs-border: rgba(161, 189, 194, 0.18);
  --cs-border-strong: rgba(161, 189, 194, 0.28);
  --cs-error: #fd6567;

  /* Gradients (backgrounds only, no pseudo-elements, so they port to Webflow) */
  /* Section glows are self-contained blobs that fade to nothing before the section edge, laid over one continuous page colour (body, #001a23). That removes the hard seams between sections. */
  --cs-grad-hero: radial-gradient(ellipse 58% 62% at 88% 38%, rgba(59, 214, 43, 0.20), rgba(59, 214, 43, 0) 70%), radial-gradient(ellipse 46% 56% at 4% 68%, rgba(16, 60, 68, 0.50), rgba(16, 60, 68, 0) 70%);
  --cs-grad-glow-right: radial-gradient(ellipse 58% 52% at 96% 38%, rgba(59, 214, 43, 0.15), rgba(59, 214, 43, 0) 70%);
  --cs-grad-glow-left: radial-gradient(ellipse 58% 52% at 4% 62%, rgba(59, 214, 43, 0.15), rgba(59, 214, 43, 0) 70%);
  --cs-grad-deep: radial-gradient(ellipse 70% 46% at 50% 50%, rgba(16, 60, 68, 0.45), rgba(16, 60, 68, 0) 70%);
  --cs-grad-panel: linear-gradient(160deg, #0e2a33, #0a2028);
  --cs-grad-solid: linear-gradient(150deg, #5cf04b, #2fc821);
  --cs-grad-mint: radial-gradient(70% 90% at 50% 0%, rgba(214, 255, 210, 0.65), rgba(214, 255, 210, 0)), linear-gradient(180deg, #3ff07b, #2bd964);

  /* Type */
  --cs-font: 'Fira Sans', 'Trebuchet MS', Arial, sans-serif;
  --cs-font-label: 'Noto Sans', sans-serif;
  --cs-font-mono: 'Fira Code', monospace;
  /* CORE sizes: what the app can also use (the app's page title tops out near 72px). */
  --cs-size-h1: clamp(40px, 5vw, 72px);
  --cs-size-h2: clamp(32px, 4vw, 56px);
  --cs-size-h3: clamp(22px, 2.2vw, 30px);
  /* EXPRESSIVE sizes: marketing pages only, via .cs-display and .cs-title-xl. */
  --cs-size-display: clamp(48px, 7.2vw, 108px);
  --cs-size-title-xl: clamp(40px, 5.4vw, 80px);
  --cs-size-lead: clamp(19px, 1.9vw, 24px);
  --cs-size-body: 18px;

  /* Shape and space */
  --cs-radius-panel: 24px;
  --cs-radius-control: 10px;
  --cs-section-y: clamp(72px, 9vw, 128px);
  --cs-wrap: 1840px;                       /* use the page: content spreads to the gutters on wide screens */
  --cs-gutter: clamp(20px, 4.5vw, 96px);
  --cs-shadow-glow: 0 0 60px rgba(59, 214, 43, 0.22);
  --cs-shadow-lift: 0 30px 60px rgba(0, 0, 0, 0.4);
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg, video { max-width: 100%; }
p, h1, h2, h3, h4, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }

/* ---------- Tag styles (Webflow: All Body / H1 / H2 / H3 / Paragraphs / Links) ---------- */
body { margin: 0; background: var(--cs-dark1); color: var(--cs-text); font-family: var(--cs-font); font-weight: 300; font-size: var(--cs-size-body); line-height: 1.55; overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3 { font-family: var(--cs-font); font-weight: 800; color: var(--cs-text); letter-spacing: -0.03em; }
h1 { font-size: var(--cs-size-h1); line-height: 1; text-wrap: balance; }
h2 { font-size: var(--cs-size-h2); line-height: 1.04; letter-spacing: -0.028em; text-wrap: balance; }
h3 { font-size: var(--cs-size-h3); line-height: 1.15; letter-spacing: -0.015em; }
p { color: var(--cs-text-soft); text-wrap: pretty; }
a { color: inherit; }

/* ---------- EXPRESSIVE tier (marketing pages only; the app does not use these) ---------- */
.cs-display { font-size: var(--cs-size-display); line-height: 1; letter-spacing: -0.032em; }
.cs-title-xl { font-size: var(--cs-size-title-xl); line-height: 1.03; letter-spacing: -0.032em; }

/* ---------- Headline rule: one green word, then a white full stop ---------- */
.cs-hl { color: var(--cs-green-bright); }
.cs-glow-text { text-shadow: 0 0 44px rgba(37, 242, 26, 0.35); } /* expressive */

/* ---------- Layout ---------- */
.cs-wrap { width: 100%; max-width: var(--cs-wrap); margin: 0 auto; padding: 0 var(--cs-gutter); position: relative; }
.cs-section { position: relative; padding: var(--cs-section-y) 0; overflow: clip; }
.cs-center { text-align: center; }
.cs-center .cs-lead { margin-left: auto; margin-right: auto; }
.cs-bg-hero { background: var(--cs-grad-hero); }
.cs-bg-glow-right { background: var(--cs-grad-glow-right); }
.cs-bg-glow-left { background: var(--cs-grad-glow-left); }
.cs-bg-deep { background: var(--cs-grad-deep); }

/* ---------- Text roles ---------- */
.cs-eyebrow { font-family: var(--cs-font-label); font-weight: 800; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-green); margin-bottom: 24px; }
.cs-lead { font-size: var(--cs-size-lead); line-height: 1.4; color: #b3cacf; max-width: 640px; margin-top: 28px; }
.cs-lead b { font-weight: 700; color: var(--cs-text); }
.cs-meta { font-family: var(--cs-font-label); font-weight: 800; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-text-faint); }
.cs-footnote { font-size: 13px; line-height: 1.45; color: var(--cs-text-faint); max-width: 720px; }
.cs-pill { display: inline-flex; align-items: center; padding: 9px 20px; border-radius: 999px; background: var(--cs-green-bright); color: var(--cs-dark1); font-family: var(--cs-font-label); font-weight: 800; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; }
.cs-pill--outline { background: transparent; border: 2px solid var(--cs-border-strong); color: var(--cs-pale); font-size: 13px; }

/* ---------- Buttons ---------- */
/* CORE button: flat, as in the app (accent1 fill, accent2 edge, accent3 on hover). */
.cs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: var(--cs-radius-control); border: 2px solid var(--cs-mint); background: var(--cs-green); color: var(--cs-dark1); font-family: var(--cs-font); font-weight: 800; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.cs-btn:hover { background: var(--cs-pale); border-color: var(--cs-pale); color: var(--cs-dark1); }
.cs-btn--secondary { background: transparent; border-color: var(--cs-border-strong); color: var(--cs-pale); }
.cs-btn--secondary:hover { background: transparent; border-color: var(--cs-green); color: var(--cs-pale); }
.cs-btn--dark { background: var(--cs-dark1); border-color: var(--cs-dark1); color: var(--cs-text); }
.cs-btn--dark:hover { background: var(--cs-dark3); border-color: var(--cs-dark3); color: var(--cs-text); }
/* EXPRESSIVE modifier: gradient and glow, for hero and closing buttons only. */
.cs-btn--glow { background: var(--cs-grad-solid); box-shadow: 0 10px 34px rgba(59, 214, 43, 0.32); transition: transform .15s, box-shadow .15s; }
.cs-btn--glow:hover { background: var(--cs-grad-solid); transform: translateY(-2px); box-shadow: 0 14px 44px rgba(59, 214, 43, 0.5); }
.cs-btn--small { min-height: 44px; padding: 0 20px; font-size: 14px; }
.cs-btn--big { min-height: 60px; padding: 0 36px; font-size: 17px; }
.cs-btn-note { font-weight: 400; font-size: .85em; text-transform: none; letter-spacing: 0; opacity: .8; }
.cs-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; font-size: 18px; color: var(--cs-pale); }
.cs-link:hover { color: var(--cs-green-bright); }
.cs-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; margin-top: 40px; }
.cs-center .cs-actions { justify-content: center; }

/* ---------- Panels ---------- */
/* CORE panel: subtle surface and border, as in the app. */
.cs-panel { border-radius: var(--cs-radius-panel); background: var(--cs-grad-panel); border: 1.5px solid var(--cs-dark4); padding: 32px; }
/* EXPRESSIVE panels: highlight (green edge and glow) and solid (filled). One per view. */
.cs-panel--hl { border: 3px solid var(--cs-green-bright); box-shadow: var(--cs-shadow-glow); background: linear-gradient(160deg, #11323c, #0b2830); }
.cs-panel--solid { border: 0; background: var(--cs-grad-solid); color: var(--cs-dark1); box-shadow: 0 0 80px rgba(59, 214, 43, 0.35); }
.cs-panel--solid p, .cs-panel--solid h3 { color: var(--cs-dark1); }

/* ---------- Rule between sections ---------- */
.cs-rule { width: 3px; height: 72px; margin: 0 auto; background: linear-gradient(var(--cs-green), rgba(59, 214, 43, 0)); }

/* ---------- Nav (site chrome) ---------- */
.cs-nav { position: sticky; top: 0; z-index: 50; background: rgba(0, 20, 27, 0.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--cs-border); }
.cs-nav-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; padding: 0 var(--cs-gutter); max-width: var(--cs-wrap); margin: 0 auto; }
.cs-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.cs-brand-mark { width: 42px; height: 42px; flex: none; }
.cs-wordmark { font-size: 26px; line-height: 1; color: var(--cs-pale); letter-spacing: -0.01em; }
.cs-wordmark b { font-weight: 800; }
.cs-wordmark span { font-weight: 300; }
.cs-nav-links { display: flex; gap: 32px; }
.cs-nav-link { font-weight: 700; font-size: 15px; color: var(--cs-text-soft); text-decoration: none; padding: 12px 0; }
.cs-nav-link:hover, .cs-nav-link--active { color: var(--cs-text); }
.cs-nav-actions { display: flex; align-items: center; gap: 18px; }

/* ---------- Footer (site chrome) ---------- */
.cs-footer { border-top: 1px solid var(--cs-border); padding: 44px 0 56px; background: var(--cs-dark1); }
.cs-footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.cs-footer-links { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.cs-footer-link { font-size: 15px; color: var(--cs-text-soft); text-decoration: none; padding: 10px 0; }
.cs-footer-link:hover { color: var(--cs-text); }
.cs-footer-note { font-size: 14px; color: var(--cs-text-faint); }

/* ---------- Focus (keyboard) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, video:focus-visible { outline: 3px solid var(--cs-pale); outline-offset: 3px; border-radius: 6px; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cs-btn { transition: none; }
}

/* ---------- Tablet (Webflow 991) ---------- */
@media (max-width: 991px) {
  .cs-nav-links { display: none; }
}

/* ---------- Mobile (Webflow 767) ---------- */
@media (max-width: 767px) {
  :root { --cs-size-body: 17px; --cs-radius-panel: 20px; }
  .cs-nav-row { min-height: 64px; }
  .cs-brand-mark { width: 36px; height: 36px; }
  .cs-wordmark { font-size: 22px; }
  .cs-panel { padding: 24px; }
  .cs-rule { height: 48px; }
}

/* ---------- Small mobile (Webflow 479) ---------- */
@media (max-width: 479px) {
  .cs-btn { width: 100%; }
  .cs-nav .cs-btn { width: auto; }
  .cs-actions { gap: 12px; }
}

/* ============ Nav and footer v2 (shared on every page; generated markup in build-chrome.py) ============ */
.cs-nav-links { align-items: center; gap: clamp(20px, 2.4vw, 36px); }
.cs-nav-item { position: relative; }
.cs-nav-trigger { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; font-family: inherit; }
.cs-chev { width: 12px; height: 12px; transition: transform .2s; }
.cs-nav-trigger[aria-expanded="true"] .cs-chev { transform: rotate(180deg); }
.cs-nav-link--active, .cs-nav-link[aria-current="page"] { color: var(--cs-text); box-shadow: inset 0 -2px 0 var(--cs-green-bright); }
.cs-nav-panel { position: absolute; left: -16px; top: calc(100% + 6px); min-width: 320px; padding: 10px; border-radius: 20px; border: 1px solid var(--cs-border-strong); background: rgba(0, 24, 32, .97); backdrop-filter: blur(14px); box-shadow: 0 30px 70px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s; }
.cs-nav-item:hover .cs-nav-panel, .cs-nav-item:focus-within .cs-nav-panel, .cs-nav-trigger[aria-expanded="true"] + .cs-nav-panel { opacity: 1; visibility: visible; transform: none; }
.cs-nav-item:hover .cs-chev, .cs-nav-item:focus-within .cs-chev { transform: rotate(180deg); }
.cs-nav-menu a { display: block; padding: 12px 16px; border-radius: 12px; text-decoration: none; transition: background .15s; }
.cs-nav-menu a:hover, .cs-nav-menu a:focus-visible { background: rgba(59, 214, 43, .12); }
.cs-nav-menu a[aria-current="page"] { background: rgba(59, 214, 43, .08); }
.cs-nav-menu b { display: block; font-weight: 800; font-size: 16px; color: var(--cs-text); }
.cs-nav-menu span { display: block; margin-top: 2px; font-size: 14px; color: var(--cs-text-faint); }
.cs-nav-burger { display: none; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--cs-dark4); border-radius: 12px; background: none; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.cs-nav-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--cs-text); transition: transform .2s, opacity .2s; }
.cs-nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cs-nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cs-nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.cs-nav-drawer { position: fixed; left: 0; right: 0; top: 76px; bottom: 0; overflow-y: auto; padding: 8px 0 48px; background: rgba(0, 20, 27, .98); backdrop-filter: blur(14px); }
.cs-nav-drawer[hidden] { display: none; }
.cs-drawer-label { margin-top: 28px; font-family: var(--cs-font-label); font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-green); }
.cs-nav-drawer li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--cs-border); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; color: var(--cs-text); text-decoration: none; }
.cs-drawer-actions { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
.cs-drawer-open { overflow: hidden; }
@media (max-width: 991px) { .cs-nav-links { display: none; } .cs-nav-burger { display: inline-flex; } }
@media (min-width: 992px) { .cs-nav-drawer { display: none; } }
@media (max-width: 767px) { .cs-nav-drawer { top: 64px; } }

/* drawer: positioned against the header (a fixed child of a blurred header is sized to the header, not the screen) */
.cs-nav-drawer { position: absolute; top: 100%; left: 0; right: 0; bottom: auto; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); border-top: 1px solid var(--cs-border); }
.cs-nav-drawer { background: var(--cs-dark1); backdrop-filter: none; }

/* footer v3: statement and link columns, a "where I run" board, a huge cropped wordmark (Webflow, Resend and Framer cues: big mark, horizon glow, dense columns) */
.cs-footer { position: relative; overflow: clip; padding: clamp(56px, 7vw, 112px) 0 0; border-top: 0; background: var(--cs-dark1); }
.cs-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(59, 214, 43, .7) 30%, rgba(59, 214, 43, .7) 70%, transparent); }
.cs-footer::after { content: ''; position: absolute; left: 10%; right: 10%; top: 0; height: 280px; background: radial-gradient(ellipse at 50% 0, rgba(59, 214, 43, .16), transparent 70%); pointer-events: none; }
.cs-footer > .cs-wrap { position: relative; z-index: 1; }
.cs-foot-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 112px); }
.cs-foot-say { margin-top: clamp(24px, 3vw, 40px); max-width: 14ch; font-weight: 800; font-size: clamp(30px, 3.4vw, 54px); line-height: 1.02; letter-spacing: -0.03em; color: var(--cs-text); }
.cs-foot-intro .cs-actions { margin-top: clamp(24px, 3vw, 36px); }
.cs-foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.cs-foot-title { font-family: var(--cs-font-mono, 'Fira Code', monospace); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #ffd84a; }
.cs-foot-col ul { margin-top: 16px; display: grid; gap: 2px; }
.cs-foot-col a { display: inline-block; padding: 6px 0; font-size: 16px; font-weight: 700; color: var(--cs-text-soft); text-decoration: none; transition: color .15s, transform .15s; }
.cs-foot-col a:hover, .cs-foot-legal a:hover, .cs-mk-cities a:hover { color: var(--cs-green-bright); }
.cs-foot-col a:hover { transform: translateX(3px); }
@media (min-width: 1280px) { .cs-foot-col a { white-space: nowrap; } }

.cs-foot-markets { margin-top: clamp(48px, 6vw, 96px); padding: clamp(24px, 3vw, 36px) 0 0; border-top: 1.5px dashed var(--cs-dark4); }
.cs-mk { display: grid; grid-template-columns: minmax(180px, .22fr) minmax(0, 1fr); gap: 8px 32px; align-items: baseline; padding: 16px 0; border-bottom: 1px dashed rgba(255, 255, 255, .09); }
.cs-mk:last-child { border-bottom: 0; }
.cs-mk-name { font-family: var(--cs-font-mono, 'Fira Code', monospace); font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--cs-text-faint); }
.cs-mk-cities { display: flex; flex-wrap: wrap; gap: 2px 28px; }
.cs-mk-cities li { display: inline-flex; align-items: center; }
.cs-mk-cities a { padding: 4px 0; font-size: 17px; font-weight: 700; color: var(--cs-text); text-decoration: none; transition: color .15s; }

.cs-foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; margin-top: clamp(24px, 3vw, 40px); padding: 22px 0; border-top: 1px solid var(--cs-border); font-size: 14px; color: var(--cs-text-faint); }
.cs-foot-legal { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.cs-foot-legal-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--cs-text-faint); text-decoration: none; font: 400 14px/1.4 var(--cs-font); cursor: pointer; }
.cs-foot-legal-link:hover, .cs-foot-legal-link:focus-visible { color: var(--cs-green-bright); }

.cs-foot-mark { --m: clamp(84px, 19vw, 360px); position: relative; z-index: 0; margin-top: clamp(8px, 2vw, 24px); height: calc(var(--m) * .62); overflow: hidden; text-align: center; user-select: none; pointer-events: none; }
.cs-foot-mark span { display: block; font-size: var(--m); line-height: 1; letter-spacing: -0.045em; font-weight: 300; white-space: nowrap; background: linear-gradient(180deg, rgba(59, 214, 43, .42), rgba(59, 214, 43, .02) 82%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-foot-mark b { font-weight: 800; }
@media (max-width: 991px) { .cs-foot-top { grid-template-columns: 1fr; } .cs-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cs-mk { grid-template-columns: 1fr; } }
@media (max-width: 479px) { .cs-foot-cols { gap: 28px 16px; } }

/* nav v3: richer dropdowns (icon tile, title, one line), a footer link inside each panel, Pricing and Resources at top level, a ghost "Get a demo" next to Sign up, and a stronger bar once the page scrolls */
.cs-nav { transition: background .25s, border-color .25s, box-shadow .25s; }
.cs-nav.is-scrolled { background: rgba(0, 18, 24, .92); border-bottom-color: var(--cs-border-strong); box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }
.cs-nav-links { gap: clamp(8px, 1.4vw, 22px); }
.cs-nav-link { position: relative; padding: 12px 10px; border-radius: 10px; transition: color .15s, background .15s; box-shadow: none; }
.cs-nav-link:hover, .cs-nav-item:hover > .cs-nav-link, .cs-nav-item:focus-within > .cs-nav-link { background: rgba(255, 255, 255, .05); color: var(--cs-text); }
.cs-nav-link--active, .cs-nav-link[aria-current="page"] { color: var(--cs-text); box-shadow: none; }
.cs-nav-link--active::after, .cs-nav-link[aria-current="page"]::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--cs-green-bright); box-shadow: 0 0 10px rgba(37, 242, 26, .8); }
.cs-nav-panel { left: -12px; min-width: 380px; padding: 12px; border-radius: 22px; }
.cs-nav-panel--right { left: auto; right: -12px; }
.cs-nav-menu a { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; }
.cs-ni { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(59, 214, 43, .12); color: var(--cs-green-bright); transition: background .15s, color .15s; }
.cs-ni svg { width: 22px; height: 22px; }
.cs-nav-menu a:hover .cs-ni, .cs-nav-menu a:focus-visible .cs-ni { background: var(--cs-green-bright); color: var(--cs-dark1); }
.cs-nt b { display: block; font-weight: 800; font-size: 16px; color: var(--cs-text); }
.cs-nt span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.3; color: var(--cs-text-faint); }
.cs-nav-menu span:not(.cs-ni):not(.cs-nt) { margin-top: 0; }
.cs-nav-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 2px 0; padding: 14px 14px 6px; border-top: 1px solid var(--cs-border-strong); font-weight: 800; font-size: 14px; color: var(--cs-pale); text-decoration: none; }
.cs-nav-foot:hover { color: var(--cs-green-bright); }
.cs-nav-actions { gap: 12px; }
.cs-nav-demo { white-space: nowrap; }
@media (max-width: 1180px) { .cs-nav-demo { display: none; } }
@media (max-width: 991px) { .cs-nav-demo { display: none; } }

/* nav icon tile: must beat the older ".cs-nav-menu span" rule (block, grey, margin-top) */
.cs-nav-menu .cs-ni { display: grid; place-items: center; width: 42px; height: 42px; margin: 0; font-size: 0; color: var(--cs-green-bright); background: rgba(59, 214, 43, .12); }
.cs-nav-menu .cs-ni svg { display: block; width: 22px; height: 22px; }
.cs-nav-menu a:hover .cs-ni, .cs-nav-menu a:focus-visible .cs-ni { color: var(--cs-dark1); background: var(--cs-green-bright); }
.cs-nav-menu .cs-nt { display: block; margin: 0; }
.cs-nav-menu .cs-nt b { display: block; }
.cs-nav-menu .cs-nt span { display: block; margin-top: 2px; font-size: 14px; color: var(--cs-text-faint); }


/* ---------- Text links: one treatment everywhere ----------
   A wavy underline that takes its colour from the link (soft at rest, full on hover). It covers inline links in text and the standalone arrow links.
   It is not applied to buttons, the nav, the footer, cards or rows: those are whole-block links with their own hover. */
.cs-link, .cs-link-inline,
:where(p, dd, dt, figcaption, blockquote, .cs-footnote, .au-a, .cp-prose, .bl-prose, .ct-body, .cp-fact-text, .bp-ev-s, .bp-evidence-n) a:not([class]) {
  text-decoration: underline wavy;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  text-decoration-skip-ink: none;
  transition: text-decoration-color .15s, color .15s;
}
.cs-link:hover, .cs-link:focus-visible, .cs-link-inline:hover, .cs-link-inline:focus-visible,
:where(p, dd, dt, figcaption, blockquote, .cs-footnote, .au-a, .cp-prose, .bl-prose, .ct-body, .cp-fact-text, .bp-ev-s, .bp-evidence-n) a:not([class]):hover {
  text-decoration-color: currentColor;
}


/* ---------- Tick: one icon everywhere ----------
   A rounded SVG tick drawn as a mask, so it takes the text colour and size of whatever holds it (a badge, a step, a list item).
   Use <span class="cs-tick" aria-hidden="true"></span>. Do not type a tick character: it changes shape between fonts and platforms. */
.cs-tick { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -0.12em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.8l4.6 4.6L19 7.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.8l4.6 4.6L19 7.2'/%3E%3C/svg%3E") center / contain no-repeat; }


/* ============ Nav v4: icon-only logo, a clear login ============
   The wordmark is dropped from the bar (it stays in the footer). The row is a three-column grid so the links stay centred whatever the sides hold.
   Actions at the right have three levels: Get a demo (text), Log in (outlined button), Sign up (solid). Log in stays in the bar at every width. */
.cs-nav-row { display: grid; grid-template-columns: 1fr auto 1fr; justify-content: normal; gap: 24px; }
.cs-nav-row .cs-brand { justify-self: start; }
.cs-nav-actions { justify-self: end; }
.cs-brand--icon .cs-brand-mark { width: 46px; height: 46px; border-radius: 10px; transition: transform .2s, box-shadow .2s; }
.cs-brand--icon:hover .cs-brand-mark { transform: scale(1.06); box-shadow: 0 0 24px rgba(59, 214, 43, .5); }
.cs-nav-demo { padding: 12px 6px; font-weight: 700; font-size: 15px; color: var(--cs-text-soft); text-decoration: none; white-space: nowrap; }
.cs-nav-demo:hover { color: var(--cs-text); }
.cs-nav-login { white-space: nowrap; }
@media (max-width: 1180px) { .cs-nav-demo { display: none; } }
@media (max-width: 991px) { .cs-nav-row { grid-template-columns: auto 1fr; } .cs-nav-login { display: inline-flex; } }
@media (max-width: 767px) { .cs-nav-login { display: inline-flex; } .cs-brand--icon .cs-brand-mark { width: 40px; height: 40px; } .cs-nav-actions { gap: 8px; } .cs-nav .cs-btn--small { padding: 10px 14px; font-size: 14px; } }

/* Text for screen readers only */
.cs-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============ Motion (shared): one spring curve for entries and exits ============
   Page change uses cross-document view transitions (the nav stays put). Sections reveal as they scroll in (chrome.js adds .mo-hide, then .mo-in).
   Menus and the drawer spring open and ease out. Reduced motion switches all of it off. Elements are only hidden after the script runs, so nothing is stuck invisible without it. */
:root { --cs-spring: cubic-bezier(.34, 1.4, .64, 1); --cs-ease-out: cubic-bezier(.4, 0, .2, 1); }
@supports (animation-timing-function: linear(0, 1)) {
  :root { --cs-spring: linear(0, .22 8%, .62 17%, .93 27%, 1.06 36%, 1.07 44%, 1.03 56%, .99 70%, 1 85%, 1); }
}
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .cs-nav { view-transition-name: cs-nav; }
  ::view-transition-old(root) { animation: cs-page-out .16s var(--cs-ease-out) both; }
  ::view-transition-new(root) { animation: cs-page-in .55s var(--cs-spring) both; }
  @keyframes cs-page-out { to { opacity: 0; transform: translateY(-6px); } }
  @keyframes cs-page-in { from { opacity: 0; transform: translateY(14px); } }

  /* Individual translation leaves component rotations/positioning intact during cleanup. */
  .mo-hide { opacity: 0; translate: 0 var(--mo-distance, 22px); }
  .mo-in { opacity: 1; translate: none; transition: opacity .35s var(--cs-ease-out), translate .7s var(--cs-spring); transition-delay: var(--mo-delay, 0s); }

  .cs-nav-panel { transform: translateY(-8px) scale(.97); transform-origin: 20% 0; transition: opacity .16s var(--cs-ease-out), transform .45s var(--cs-spring), visibility .16s; }
  .cs-nav-item:hover .cs-nav-panel, .cs-nav-item:focus-within .cs-nav-panel, .cs-nav-trigger[aria-expanded="true"] + .cs-nav-panel { transform: none; }
  .cs-chev { transition: transform .4s var(--cs-spring); }
  .cs-nav-drawer:not([hidden]) { animation: cs-drawer-in .45s var(--cs-spring) both; }
  .cs-nav-drawer.is-leaving { animation: cs-drawer-out .2s var(--cs-ease-out) both; }
  .cs-nav-drawer:not([hidden]) li { animation: cs-drawer-in .5s var(--cs-spring) both; }
  .cs-nav-drawer li:nth-child(2) { animation-delay: .03s; } .cs-nav-drawer li:nth-child(3) { animation-delay: .06s; } .cs-nav-drawer li:nth-child(4) { animation-delay: .09s; } .cs-nav-drawer li:nth-child(n+5) { animation-delay: .12s; }
  @keyframes cs-drawer-in { from { opacity: 0; transform: translateY(-10px); } }
  @keyframes cs-drawer-out { to { opacity: 0; transform: translateY(-10px); } }
}

/* ============ Section rhythm: every section reads as its own band ============
   Before, sections shared one near-black base and differed only by a soft glow, so they blended together. Now: alternate sections sit on a raised teal
   surface, each section starts with a hairline, and a short green tab at the content edge marks the start. Heroes and the closing panel keep their own look. */
main > section.cs-section:not(.cs-bg-hero):not(.hm-hero):not(.hm-close) { border-top: 1px solid var(--cs-border); }
main > section.cs-section:not(.cs-bg-hero):not(.hm-hero):not(.hm-close)::before { content: ''; position: absolute; top: -1px; left: max(var(--cs-gutter), calc((100% - var(--cs-wrap)) / 2 + var(--cs-gutter))); z-index: 1; width: 56px; height: 3px; border-radius: 0 0 3px 3px; background: var(--cs-green-bright); box-shadow: 0 0 16px rgba(37, 242, 26, .5); }
main > section.cs-section:nth-of-type(even):not(.cs-bg-hero):not(.hm-hero):not(.hm-close) { background-color: #03262f; }
main > section.hm-logos { background-color: #03262f; border-block: 1px solid var(--cs-border); }

/* Text actions use the same link contract whether navigation uses an anchor or a button. */
button.cs-link, button.cs-link-inline { border: 0; background: transparent; font-family: inherit; cursor: pointer; padding: 8px 0; min-height: 44px; }
.cs-link-inline { color: var(--cs-green-bright); }
.cs-link-inline:hover, .cs-link-inline:focus-visible { color: var(--cs-pale); }

/* Shared native modal surface. Mirrors the app's raised panel and 240ms entrance/exit. */
.cs-modal { width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; margin: auto; padding: 28px; border: 1px solid var(--cs-border-strong); border-radius: 24px; color: var(--cs-text); font-family: var(--cs-font); background: linear-gradient(180deg, #ffffff09, #ffffff03), var(--cs-dark2); box-shadow: 0 24px 80px #0006; opacity: .6; transform: translateY(16px) scale(.98); transition: opacity 240ms ease, transform 240ms var(--cs-ease-out), display 240ms allow-discrete, overlay 240ms allow-discrete; }
.cs-modal[open] { opacity: 1; transform: none; }
.cs-modal::backdrop { background: #001319b8; transition: background-color 240ms ease, display 240ms allow-discrete, overlay 240ms allow-discrete; }
.cs-modal:not([open])::backdrop { background: transparent; }
.cs-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.cs-modal-title { font-size: 28px; line-height: 1.15; letter-spacing: -.03em; }
.cs-modal-close { display: grid; place-items: center; flex: none; width: 44px; min-height: 44px; margin-top: -8px; border: 0; border-radius: var(--cs-radius-control); background: transparent; color: var(--cs-text-soft); cursor: pointer; font: 28px/1 var(--cs-font); transition: background .15s, color .15s; }
.cs-modal-close:hover { background: var(--cs-dark3); color: var(--cs-text); }
@starting-style {
  .cs-modal[open] { opacity: .6; transform: translateY(16px) scale(.98); }
  .cs-modal[open]::backdrop { background: transparent; }
}
@media (max-width: 767px) {
  .cs-modal { margin: auto auto max(12px, env(safe-area-inset-bottom)); padding: 22px; transform: translateY(2.5rem) scale(.98); }
  .cs-modal[open] { transform: none; }
  @starting-style { .cs-modal[open] { transform: translateY(2.5rem) scale(.98); } }
}
@media (prefers-reduced-motion: reduce) { .cs-modal, .cs-modal::backdrop { transition: none; } }
html:has(.cs-modal[open]) { overflow: hidden; }

/* Shared disclosure: app-style surface, full-row trigger and trailing chevron.
   Use .cs-disclosure on details, with trigger on summary and body on its content wrapper. */
.cs-disclosure { overflow: clip; border: 1px solid var(--cs-border); border-radius: 16px; background: color-mix(in srgb, var(--cs-dark4) 36%, var(--cs-dark1)); }
.cs-disclosure-trigger { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 12px 16px; list-style: none; cursor: pointer; font: 700 14px/1.4 var(--cs-font); color: var(--cs-text-soft); transition: background-color 160ms ease, color 160ms ease; }
.cs-disclosure-trigger::-webkit-details-marker { display: none; }
.cs-disclosure-trigger::marker { content: ''; }
.cs-disclosure-trigger:hover, .cs-disclosure-trigger:focus-visible, .cs-disclosure[open] > .cs-disclosure-trigger { background: color-mix(in srgb, var(--cs-green) 8%, var(--cs-dark1)); color: var(--cs-text); }
.cs-disclosure[open] > .cs-disclosure-trigger { border-bottom: 1px solid var(--cs-border); }
.cs-disclosure-chevron { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--cs-green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 160ms ease; }
.cs-disclosure[open] > .cs-disclosure-trigger .cs-disclosure-chevron { transform: rotate(180deg); }
.cs-disclosure-body { padding: 16px; }
@media (prefers-reduced-motion: reduce) { .cs-disclosure-trigger, .cs-disclosure-chevron { transition: none; } }

/* A video is an explicit request to its provider; no player loads while reading. */
.cs-media-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; aspect-ratio: 16 / 9; padding: 24px; border: 1px solid var(--cs-border); border-radius: 18px; background: var(--cs-dark3); text-align: center; }
.cs-media-placeholder .cs-footnote { margin: 0; }
.cs-media-placeholder--poster { position: relative; padding: 0; overflow: hidden; }
.cs-media-placeholder--poster > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-media-play { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: linear-gradient(transparent, #00151c44); }
.cs-media-play-icon { display: grid; place-items: center; width: clamp(56px, 6vw, 80px); aspect-ratio: 1; border-radius: 50%; background: var(--cs-green-bright); color: var(--cs-dark1); box-shadow: 0 8px 32px #0006; transition: transform 180ms ease; }
.cs-media-play-icon svg { width: 45%; height: 45%; }
.cs-media-play:hover .cs-media-play-icon, .cs-media-play:focus-visible .cs-media-play-icon { transform: scale(1.08); }
.cs-media-play:focus-visible { outline: 3px solid var(--cs-green-bright); outline-offset: -6px; }
@media (prefers-reduced-motion: reduce) { .cs-media-play-icon { transition: none; } }

/* Support lives outside the website. Keep the existing link treatment and add a destination cue. */
a[href^="https://support.caasie.co"]::after { content: '↗'; display: inline-block; flex-shrink: 0; margin-left: .35em; color: currentColor; text-decoration: none; }