/* cenroq-components.css v0.9.0 — generated by make build; tokens + components, no element resets. edit src/*.css, not this file. */
/* cenroq design tokens — the single source of truth for colour, space, type.
 * Brand blue (#367BBC) is canonical across every cenroq surface (apps + reports).
 * Spacing/radius scales follow Tailwind-style conventions so they feel familiar.
 * Override any token on :root in an app to re-theme without touching components. */

/* ── Lato, the cenroq house face — self-hosted on purpose ─────────────────────
 * Never loaded from a font CDN: a Google Fonts <link> sends every visitor's IP
 * to a third party, which contradicts both the DSGVO and what the site itself
 * promises ("zero data egress"). The woff2 files ship in this repo under
 * src/fonts/ (SIL OFL 1.1, see src/fonts/LICENSE.txt) and `make build` mirrors
 * them into dist/fonts/, so the paths below resolve relative to the built CSS.
 *
 * Lato has 100/300/400/700/900 — there is no 500 and no 600. Components are
 * written against the weights that actually exist; see components.css. */
@font-face {
  font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('fonts/lato-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/lato-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/lato-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/lato-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato'; font-style: italic; font-weight: 700; font-display: swap;
  src: url('fonts/lato-latin-700-italic.woff2') format('woff2');
}

:root {
  /* ── Core palette ─────────────────────────────────────────────────────────
   * The canonical cenroq colours. Every role token below resolves to one of
   * these or to a tint derived from them — so re-theming the brand means
   * editing this block and nothing else.
   *
   * Do NOT reference --cenroq-core-* from a component or an app. Reach for the
   * role token instead (--cenroq-brand, --cenroq-ink, …): the role says what a
   * colour is *for*, which is what keeps two projects looking alike when a
   * value here changes. */
  --cenroq-core-navy: #091B2D;     /* body text, dark surfaces (hero/footer bands) */
  --cenroq-core-blue: #367BBC;     /* the brand — headings, links, primary actions */
  --cenroq-core-amber: #FFB100;    /* highlights, key figures, accent rules and glows */
  --cenroq-core-white: #FFFFFF;    /* surfaces, and text on a dark band */
  --cenroq-core-sky: #DCEAF7;      /* filled tiles and cards on a light page */
  --cenroq-core-black: #000000;    /* true black. Rarely correct: body text is navy,
                                    * not black. Use only where pure black is
                                    * required — logo lockups, print, max contrast. */

  /* Brand roles */
  --cenroq-brand: var(--cenroq-core-blue);
  --cenroq-brand-dark: #2C679E;    /* hover/pressed state of the brand blue */
  --cenroq-brand-light: var(--cenroq-core-sky);  /* filled tiles, code backgrounds, hovers */
  --cenroq-dark: var(--cenroq-core-navy);        /* dark bands, sidebars, dark chrome */
  --cenroq-accent: var(--cenroq-core-blue);      /* accent + headings, per the palette */
  --cenroq-action: var(--cenroq-core-amber);     /* attention: key figures, badges, dots */

  /* On a navy band the brand blue sits too close to the background to read.
   * This is the lightened variant for that case only — eyebrows, highlighted
   * words inside a hero heading, terminal prompts. Not a sixth brand colour. */
  --cenroq-brand-bright: #4F95D6;
  --cenroq-accent-soft: var(--cenroq-core-sky);  /* tint behind an accent element */

  /* Text */
  --cenroq-ink: var(--cenroq-core-navy);
  --cenroq-ink-soft: #2a3a52;
  --cenroq-muted: #5A6B80;         /* secondary copy, captions */

  /* Surfaces. --bg stays a hair off-white on purpose: dashboards need a page
   * that is not the same colour as the cards sitting on it. Marketing surfaces
   * that want a pure white page override --cenroq-bg to --cenroq-core-white. */
  --cenroq-bg: #f6f8fb;            /* page background */
  --cenroq-surface: var(--cenroq-core-white);  /* cards, inputs, tables */
  /* The two light tints. Blue-cast, like everything else here — the previous
   * values (#f4f7f9 / #e7edf3) were neutral greys left over from before the
   * palette was corrected, and they read cold next to the brand blue. */
  --cenroq-panel: #F4F9FD;         /* table headers, subtle fills */
  --cenroq-panel-strong: #EAF3FB;  /* filled tiles a step above --panel */

  /* Lines */
  --cenroq-line: #D6E3F0;          /* hairlines on a light surface */
  --cenroq-line-strong: #9DB2C9;   /* dividers that need to be seen */

  /* ── Status (Ampel) ───────────────────────────────────────────────────────
   * One green, one red, one amber, one blue — no second opinion anywhere.
   * Green is the one already flying on the site (status dots, "live"), not a
   * generic UI green; it is desaturated enough to sit next to the brand blue
   * without fighting it. Red is its counterpart at the same weight.
   *
   * Each has a bg/line/ink triplet for soft boxes and pills. Use the base
   * colour for a dot or an icon, the triplet for a filled callout. */
  --cenroq-ok: #2FAE78;            /* success, healthy, "live" */
  --cenroq-ok-bg: #eaf7f1;
  --cenroq-ok-line: #b6e2ce;
  --cenroq-ok-ink: #14603f;
  --cenroq-bad: #D64550;           /* error, failure, critical finding */
  --cenroq-bad-bg: #fdeef0;
  --cenroq-bad-line: #f3c3c7;
  --cenroq-bad-ink: #7d222a;
  --cenroq-warn: var(--cenroq-core-amber);  /* warning — the brand amber */
  --cenroq-warn-bg: #fff4d6;
  --cenroq-warn-line: #eac568;
  --cenroq-warn-ink: #8a5300;
  --cenroq-info: #2563eb;
  --cenroq-info-bg: #e6f1fb;
  --cenroq-info-line: #b9d4ee;
  --cenroq-info-ink: #1c3d5f;

  /* Severity (scan findings — used by the webui's pills) */
  --cenroq-critical: #8b1e3f;
  --cenroq-high: #c2410c;
  --cenroq-medium: #d97706;
  --cenroq-low: #2563eb;

  /* Spacing scale (1 = 4px, Tailwind-ish) */
  --cenroq-space-1: 0.25rem;
  --cenroq-space-2: 0.5rem;
  --cenroq-space-3: 0.75rem;
  --cenroq-space-4: 1rem;
  --cenroq-space-5: 1.5rem;
  --cenroq-space-6: 2rem;
  --cenroq-space-8: 3rem;

  /* Radius (gently rounded — corners are intentionally tight, not pill-soft) */
  --cenroq-radius-sm: 2px;
  --cenroq-radius: 4px;
  --cenroq-radius-lg: 7px;
  --cenroq-radius-pill: 999px;

  /* Shadow */
  --cenroq-shadow-sm: 0 1px 3px rgba(20, 30, 50, 0.06);
  --cenroq-shadow: 0 1px 4px rgba(20, 30, 50, 0.08);
  --cenroq-shadow-lg: 0 8px 28px rgba(20, 30, 50, 0.10);

  /* Type */
  /* Fallback chain per the cenroq font guide: Carlito is metrically close to
   * Lato, so a surface without the webfont keeps its layout. */
  --cenroq-font: 'Lato', 'Carlito', 'Segoe UI', system-ui, sans-serif;
  /* Deliberately NOT Lato: code, terminals and the techie labels (chips, tags,
   * eyebrows) rely on fixed advance width for their look and alignment. */
  --cenroq-font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Weight — Lato ships 300/400/700 and nothing in between. Declaring 500 or 600
   * does not fail loudly; the browser rounds it silently, so the CSS ends up
   * lying about what it renders. These three are the whole vocabulary. */
  --cenroq-weight-light: 300;
  --cenroq-weight-regular: 400;
  --cenroq-weight-bold: 700;

  /* Leading. Steps derived from what the surfaces actually use — the two most
   * common values (1.6 body, 1.55 dense body) stay distinct on purpose; merging
   * them would shift multi-line paragraphs by a visible amount. */
  --cenroq-leading-none: 1;
  --cenroq-leading-tightest: 1.05;   /* display headlines — at 54px, 0.05 of
                                      * leading is ~3px per line, so this needs
                                      * its own step rather than rounding to 1.1 */
  --cenroq-leading-tight: 1.1;       /* section headings */
  --cenroq-leading-snug: 1.35;
  --cenroq-leading-normal: 1.5;
  --cenroq-leading-relaxed: 1.55;
  --cenroq-leading-loose: 1.6;       /* body copy */
  --cenroq-leading-looser: 1.85;

  /* Tracking. Negative for large display type (Lato opens up at size), positive
   * for the uppercase mono labels, which need air to stay legible. */
  --cenroq-tracking-tightest: -0.025em;
  --cenroq-tracking-tighter: -0.02em;
  --cenroq-tracking-tight: -0.015em;
  --cenroq-tracking-normal: 0;
  --cenroq-tracking-slight: 0.04em;
  --cenroq-tracking-wide: 0.06em;
  --cenroq-tracking-wider: 0.08em;
  --cenroq-tracking-widest: 0.1em;   /* uppercase mono labels */

  /* ── Size scale ───────────────────────────────────────────────────────────
   * Eleven fixed steps plus three fluid display steps, derived from the sizes
   * the surfaces actually used — 40 distinct values collapsed to 14. Each step
   * sits on the most common value of the band it absorbs, not on the band's
   * midpoint, which keeps 82% of call sites within half a pixel of where they
   * were.
   *
   * rem, not px: a visitor who has set a larger default font size in the
   * browser gets a larger page. With px nothing happens at all, which is a
   * WCAG problem on a public site. This assumes the browser default root of
   * 16px — do NOT set `html { font-size: 62.5% }`; that old trick silently
   * shrinks every token here to 62.5% of its intended size. */
  --cenroq-text-2xs: 0.625rem;      /* 10px */
  --cenroq-text-xs: 0.6875rem;      /* 11px */
  --cenroq-text-sm: 0.75rem;        /* 12px */
  --cenroq-text-md: 0.8125rem;      /* 13px */
  --cenroq-text-lg: 0.875rem;       /* 14px */
  --cenroq-text-xl: 0.9375rem;      /* 15px */
  --cenroq-text-2xl: 1.0625rem;     /* 17px */
  --cenroq-text-3xl: 1.125rem;      /* 18px */
  --cenroq-text-4xl: 1.3125rem;     /* 21px */
  --cenroq-text-5xl: 1.625rem;      /* 26px */
  --cenroq-text-6xl: 2rem;          /* 32px */

  /* Display steps scale with the viewport, so a consuming project gets correct
   * headline sizing without writing a single media query. The middle term is
   * rem + vw rather than vw alone: a pure-vw clamp ignores browser zoom and
   * text-size settings, which fails WCAG 1.4.4. Ends are pinned to the sizes
   * these headings already used at mobile and at the 1180px container. */
  --cenroq-text-display-sm: clamp(1.625rem, 1.276rem + 1.49vw, 2.375rem);   /* 26 → 38px */
  --cenroq-text-display-md: clamp(1.875rem, 1.526rem + 1.49vw, 2.625rem);   /* 30 → 42px */
  --cenroq-text-display-lg: clamp(2.0625rem, 1.451rem + 2.61vw, 3.375rem);  /* 33 → 54px */

  /* Semantic aliases — reach for these first. A consuming project should be able
   * to say "this is body copy" without knowing which step body copy is; that is
   * what keeps two projects looking alike when someone tweaks the scale. */
  --cenroq-text-hero: var(--cenroq-text-display-lg);      /* the ONE h1 on a page */
  --cenroq-text-display: var(--cenroq-text-display-md);   /* CTA band, chapter opener */
  --cenroq-text-section: var(--cenroq-text-display-sm);   /* section heading (h2) */
  --cenroq-text-h3: var(--cenroq-text-6xl);               /* subsection */
  --cenroq-text-h4: var(--cenroq-text-5xl);               /* large card heading */
  --cenroq-text-h5: var(--cenroq-text-4xl);               /* card / feature heading */
  --cenroq-text-lead: var(--cenroq-text-3xl);             /* intro paragraph under the h1 */
  --cenroq-text-body: var(--cenroq-text-2xl);             /* body copy */
  --cenroq-text-body-sm: var(--cenroq-text-xl);           /* dense body, card content */
  --cenroq-text-ui: var(--cenroq-text-lg);                /* nav, buttons, form controls */
  --cenroq-text-caption: var(--cenroq-text-md);           /* captions, help text */
  --cenroq-text-label: var(--cenroq-text-sm);             /* mono caps labels, tags, chips */
  --cenroq-text-micro: var(--cenroq-text-xs);             /* footer fine print, legal */
  --cenroq-text-badge: var(--cenroq-text-2xs);            /* badges, severity pills */

  --cenroq-weight-body: var(--cenroq-weight-regular);
  --cenroq-weight-heading: var(--cenroq-weight-bold);
  --cenroq-leading-body: var(--cenroq-leading-loose);
  --cenroq-leading-display: var(--cenroq-leading-tightest);
  --cenroq-leading-heading: var(--cenroq-leading-tight);
  --cenroq-tracking-heading: var(--cenroq-tracking-tighter);
  --cenroq-tracking-label: var(--cenroq-tracking-widest);

  /* Focus ring (brand-tinted) */
  --cenroq-focus: 0 0 0 3px rgba(54, 123, 188, 0.30);

  /* ── Marketing surfaces ──────────────────────────────────────────────────
   * Extra tokens the marketing components (hero/cta/footer bands, display type)
   * consume. Dashboards don't use these. Re-theme per surface by overriding on
   * :root, exactly like the brand tokens (the website's bridge does this). */
  /* Steps up from --cenroq-core-navy, not an independent set of greys. */
  --cenroq-dark-2: #0E2742;            /* raised panel / eyebrow chip on a dark band */
  --cenroq-dark-3: #13314F;            /* the step above that */
  --cenroq-dark-line: #1E3550;         /* hairline border on a dark band */
  --cenroq-on-dark: var(--cenroq-core-white);  /* primary text on a dark band */
  --cenroq-on-dark-muted: #9DB2C9;     /* secondary text on a dark band */
  --cenroq-font-display: var(--cenroq-font);  /* headings — Lato carries both roles */
  --cenroq-radius-card: 14px;          /* marketing card radius (vs the tight --cenroq-radius) */
  --cenroq-radius-band: 20px;          /* large rounded panels (map cards, feature panels) */
  --cenroq-container: 1180px;          /* marketing page max width */

  /* How far to push the wordmark down so it *looks* centred. The q descends
   * below the baseline, so the image's bounding box reaches lower than the ink
   * does; centring the box therefore leaves the visible mark sitting high.
   * Measured on cenroq-logo.png (640×154): the lettering body spans rows 4–108,
   * centre 56, against a box centre of 76.5 — a gap of 20.5 rows, or 13.3% of
   * the image height. As a percentage it holds at any rendered size.
   * Apply as transform: translateY(); any surface placing the mark needs it,
   * not just the navbar. */
  --cenroq-logo-optical-nudge: 13.3%;
}
/* cenroq components — namespaced `cenroq-` primitives shared across apps.
 * BEM-ish: cenroq-block--modifier. Page-specific/domain classes stay app-local. */

/* Buttons — the class forms. A raw <button> is styled to match --primary in
 * base.css (deliberately kept out of this file so a components-only build can
 * be adopted without restyling a host page's existing <button>s). */
.cenroq-btn,
.cenroq-btn--primary,
.cenroq-btn--secondary,
.cenroq-btn--accent {
  display: inline-block;
  background: var(--cenroq-brand);
  color: #fff;
  border: 0;
  padding: 0.5rem 1rem;
  border-radius: var(--cenroq-radius);
  font: inherit;
  font-weight: var(--cenroq-weight-bold);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.cenroq-btn:hover,
.cenroq-btn--primary:hover,
.cenroq-btn--accent:hover { filter: brightness(1.08); }
/* Secondary = low-emphasis outline button. */
.cenroq-btn--secondary {
  background: var(--cenroq-surface);
  color: var(--cenroq-brand);
  border: 1px solid var(--cenroq-line);
}
.cenroq-btn--secondary:hover { background: var(--cenroq-brand-light); }
/* Accent = bright cyan CTA (dark text for contrast). */
.cenroq-btn--accent { background: var(--cenroq-accent); color: var(--cenroq-core-white); }
.cenroq-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

/* Card */
.cenroq-card {
  background: var(--cenroq-surface);
  border: 1px solid var(--cenroq-line);
  border-radius: var(--cenroq-radius);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  box-shadow: var(--cenroq-shadow-sm);
}
.cenroq-card h2 {
  margin: 0 0 0.5rem;
  font-size: var(--cenroq-text-2xl);
  color: var(--cenroq-ink-soft);
  border: 0;
  padding: 0;
}

/* Alerts (flash / error / warn / info) */
.cenroq-alert {
  border: 1px solid transparent;
  border-radius: var(--cenroq-radius);
  padding: 0.7rem 0.85rem;
  margin: 1rem 0;
  font-size: var(--cenroq-text-xl);
}
.cenroq-alert--ok   { background: var(--cenroq-ok-bg);   border-color: var(--cenroq-ok-line); }
.cenroq-alert--err  { background: var(--cenroq-bad-bg);  border-color: var(--cenroq-bad-line);  color: var(--cenroq-bad-ink); }
.cenroq-alert--warn { background: var(--cenroq-warn-bg); border-color: var(--cenroq-warn-line); color: var(--cenroq-warn-ink); }
.cenroq-alert--info { background: var(--cenroq-info-bg); border-color: var(--cenroq-info-line); color: var(--cenroq-ink); }

/* Badge — small brand-coloured count/tag */
.cenroq-badge {
  display: inline-block;
  background: var(--cenroq-brand);
  color: #fff;
  border-radius: var(--cenroq-radius-pill);
  padding: 0.05rem 0.45rem;
  font-size: var(--cenroq-text-md);
  margin-left: 0.2rem;
}

/* Status pill (ok / pending / deny) */
.cenroq-status {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: var(--cenroq-radius-pill);
  font-size: var(--cenroq-text-md);
  font-weight: var(--cenroq-weight-regular);
}
.cenroq-status--ok      { background: var(--cenroq-ok-bg);   color: var(--cenroq-ok-ink);   border: 1px solid var(--cenroq-ok-line); }
.cenroq-status--pending { background: var(--cenroq-warn-bg); color: var(--cenroq-warn-ink); border: 1px solid var(--cenroq-warn-line); }
.cenroq-status--deny    { background: var(--cenroq-bad-bg);  color: var(--cenroq-bad-ink);  border: 1px solid var(--cenroq-bad-line); }

/* Severity pill (scan findings) */
.cenroq-pill {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: var(--cenroq-radius-pill);
  font-size: var(--cenroq-text-sm);
  font-weight: var(--cenroq-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--cenroq-tracking-slight);
  color: #fff;
  background: var(--cenroq-muted);
}
.cenroq-pill--critical { background: var(--cenroq-critical); }
.cenroq-pill--high     { background: var(--cenroq-high); }
.cenroq-pill--medium   { background: var(--cenroq-medium); }
.cenroq-pill--low      { background: var(--cenroq-low); }
.cenroq-pill--info     { background: var(--cenroq-info); }

/* Field — horizontal label + control with a hint */
.cenroq-field {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0.4rem 1rem;
  align-items: start;
  margin-top: 0.7rem;
}
.cenroq-field > label { margin: 0; color: var(--cenroq-ink-soft); }
.cenroq-hint { color: var(--cenroq-muted); font-size: var(--cenroq-text-md); }

/* Toggle — pill-shaped inline checkbox/radio container */
.cenroq-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--cenroq-line);
  border-radius: var(--cenroq-radius-pill);
  background: var(--cenroq-surface);
  cursor: pointer;
}
.cenroq-toggle input { width: auto; max-width: none; margin: 0; }

/* Table (explicit class form; raw <table> is already styled in base) */
.cenroq-table {
  border-collapse: collapse;
  width: 100%;
  background: var(--cenroq-surface);
  border: 1px solid var(--cenroq-line);
  border-radius: var(--cenroq-radius);
  overflow: hidden;
}
.cenroq-table th, .cenroq-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--cenroq-line); text-align: left; font-size: var(--cenroq-text-xl); }
.cenroq-table thead th { background: var(--cenroq-panel); color: var(--cenroq-ink-soft); font-weight: var(--cenroq-weight-bold); }
.cenroq-table tr:last-child td { border-bottom: 0; }

/* Tabs */
.cenroq-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--cenroq-line); }
.cenroq-tab {
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  color: var(--cenroq-ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.cenroq-tab--active { color: var(--cenroq-brand); border-bottom-color: var(--cenroq-brand); font-weight: var(--cenroq-weight-bold); }

/* Modal */
.cenroq-modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(14, 27, 44, 0.45);
}
.cenroq-modal {
  background: var(--cenroq-surface);
  border-radius: var(--cenroq-radius);
  box-shadow: var(--cenroq-shadow-lg);
  width: calc(100% - 2rem);
  max-width: 32rem;
  padding: 1.5rem;
}
.cenroq-modal__head { font-size: var(--cenroq-text-2xl); font-weight: var(--cenroq-weight-bold); margin-bottom: 0.5rem; }
.cenroq-modal__actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }

/* Sidebar — vertical navigation on the dark brand colour. Pair with a page
 * layout like `display:grid; grid-template-columns:auto 1fr` in the app. */
.cenroq-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 230px;
  min-height: 100vh;
  padding: 1rem 0.8rem;
  background: var(--cenroq-dark);
  color: #fff;
}
.cenroq-sidebar__brand { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem 1rem; }
.cenroq-sidebar__brand img { height: 30px; display: block; }
.cenroq-sidebar__section {
  padding: 0.9rem 0.7rem 0.3rem;
  font-size: var(--cenroq-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--cenroq-tracking-slight);
  color: rgba(255, 255, 255, 0.45);
}
.cenroq-sidebar a,
.cenroq-sidebar__link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--cenroq-radius);
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: var(--cenroq-text-lg);
}
.cenroq-sidebar a:hover,
.cenroq-sidebar__link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.cenroq-sidebar a.is-active,
.cenroq-sidebar__link--active { background: var(--cenroq-brand); color: #fff; }
.cenroq-sidebar__foot { margin-top: auto; padding: 0.8rem 0.7rem 0.2rem; font-size: var(--cenroq-text-md); color: rgba(255, 255, 255, 0.45); }

/* Icon card — an icon tile beside a title + body (feature / marketing cards) */
.cenroq-icon-card {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  background: var(--cenroq-surface);
  border: 1px solid var(--cenroq-line);
  border-radius: var(--cenroq-radius);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--cenroq-shadow-sm);
}
.cenroq-icon-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--cenroq-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--cenroq-text-4xl);
  background: var(--cenroq-brand-light);
  color: var(--cenroq-brand);
}
.cenroq-icon-card__title { margin: 0 0 0.2rem; font-size: var(--cenroq-text-2xl); }
.cenroq-icon-card__body { margin: 0; color: var(--cenroq-ink-soft); font-size: var(--cenroq-text-lg); }

/* Stat — a key figure with a label (dashboards, website highlights) */
.cenroq-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; }
.cenroq-stat {
  background: var(--cenroq-surface);
  border: 1px solid var(--cenroq-line);
  border-radius: var(--cenroq-radius);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--cenroq-shadow-sm);
}
.cenroq-stat__value { font-size: var(--cenroq-text-6xl); font-weight: var(--cenroq-weight-bold); line-height: var(--cenroq-leading-tight); color: var(--cenroq-ink); }
.cenroq-stat__label { margin-top: 0.25rem; font-size: var(--cenroq-text-md); text-transform: uppercase; letter-spacing: var(--cenroq-tracking-slight); color: var(--cenroq-muted); }
.cenroq-stat__delta { margin-top: 0.35rem; font-size: var(--cenroq-text-md); font-weight: var(--cenroq-weight-bold); }
.cenroq-stat__delta--up { color: var(--cenroq-ok); }
.cenroq-stat__delta--down { color: var(--cenroq-bad); }

/* Full-width form — controls fill the container instead of the 480px base cap */
.cenroq-form input,
.cenroq-form select,
.cenroq-form textarea { max-width: none; }
.cenroq-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.4rem 1.25rem; }

/* Filterable table — a toolbar with a filter box above a table. The filtering
 * itself is progressive enhancement via cenroq.js (data-cenroq-filter). */
.cenroq-table-filterable { margin-top: 0.75rem; }
.cenroq-table-toolbar { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.5rem; }
.cenroq-table-toolbar input[type=search],
.cenroq-table-filter { width: 18rem; max-width: 100%; margin: 0; }
.cenroq-table-filterable table { margin-top: 0; }

/* ── App chrome (top bar, footer, auth card) ──────────────────────────────── */

/* Top bar — horizontal nav: brand · links · user */
.cenroq-topbar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 0.55rem 1.25rem;
  background: var(--cenroq-surface);
  border-bottom: 1px solid var(--cenroq-line);
  font-size: var(--cenroq-text-xl);
}
.cenroq-topbar__brand { display: flex; align-items: center; flex-shrink: 0; }
.cenroq-topbar__brand img { height: 32px; display: block; }
.cenroq-topbar__links { display: flex; flex-wrap: wrap; gap: 1rem; }
.cenroq-topbar__links a { color: var(--cenroq-ink-soft); text-decoration: none; }
.cenroq-topbar__links a:hover { color: var(--cenroq-brand); }
.cenroq-topbar__user { margin-left: auto; color: var(--cenroq-ink-soft); font-size: var(--cenroq-text-lg); }
.cenroq-topbar__user a { color: var(--cenroq-brand); }

/* Footer */
.cenroq-footer {
  border-top: 1px solid var(--cenroq-line);
  background: var(--cenroq-surface);
  padding: 1rem 1.25rem;
  margin-top: 3rem;
  text-align: center;
  font-size: var(--cenroq-text-md);
  color: var(--cenroq-ink-soft);
}
.cenroq-footer a { color: var(--cenroq-ink-soft); text-decoration: none; }
.cenroq-footer a:hover { color: var(--cenroq-brand); }
.cenroq-footer__sep { margin: 0 0.45rem; opacity: 0.5; }

/* Auth card — centred login / invite / reset card with a wordmark on top */
.cenroq-auth-card {
  background: var(--cenroq-surface);
  max-width: 380px;
  margin: 4rem auto 2rem;
  padding: 2rem 2rem 1.5rem;
  border: 1px solid var(--cenroq-line);
  border-radius: var(--cenroq-radius);
  box-shadow: var(--cenroq-shadow-lg);
}
.cenroq-auth-card__brand { display: block; text-align: center; margin-bottom: 1.25rem; }
.cenroq-auth-card__brand img { height: 44px; }
.cenroq-auth-card h1 { text-align: center; margin: 0 0 1rem; font-size: var(--cenroq-text-4xl); }
.cenroq-auth-card form { max-width: none; margin: 0; }
.cenroq-auth-card form > p { margin-top: 1.5rem; }
.cenroq-auth-card button { width: 100%; padding: 0.65rem; }

/* Inline form — controls on one row (filters, table-row actions) */
.cenroq-inline-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0; max-width: none; }
.cenroq-inline-form label { flex-direction: row; align-items: center; gap: 0.3rem; margin: 0; }
.cenroq-inline-form input[type=text],
.cenroq-inline-form input[type=number],
.cenroq-inline-form input[type=search] { width: auto; max-width: 11rem; padding: 0.35rem 0.5rem; }
.cenroq-inline-form button { padding: 0.35rem 0.7rem; }

/* Bordered list (downloads, dashboards). --flush removes side padding. */
.cenroq-list { list-style: none; padding: 0; margin: 0; }
.cenroq-list li { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--cenroq-line); }
.cenroq-list li:last-child { border-bottom: 0; }
.cenroq-list li a { color: var(--cenroq-ink); font-weight: var(--cenroq-weight-regular); }
.cenroq-list--flush li { padding: 0.35rem 0; }

/* Responsive card grid (auto-fit) */
.cenroq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }

/* Inline error text (e.g. a "denied" table cell) */
.cenroq-error-inline { color: var(--cenroq-bad-ink); font-weight: var(--cenroq-weight-bold); }

/* Collapsible log / section card */
details.cenroq-log-card {
  background: var(--cenroq-surface);
  border: 1px solid var(--cenroq-line);
  border-radius: var(--cenroq-radius);
  padding: 0.3rem 1.6rem 1.5rem;
  margin: 0 0 2rem;
  box-shadow: var(--cenroq-shadow);
}
details.cenroq-log-card > summary { cursor: pointer; padding: 0.5rem 0; outline: none; user-select: none; }
details.cenroq-log-card > summary h2 { display: inline-block; border-bottom: 0; margin: 0.6rem 0 0; }
details.cenroq-log-card[open] > summary { border-bottom: 1px solid var(--cenroq-line); margin-bottom: 0.4rem; }
details.cenroq-log-card table { margin-top: 0.7rem; }

/* ══════════════════════════════════════════════════════════════════════════
 * MARKETING COMPONENTS — for the public site surfaces (hero, feature grids,
 * pricing, CTA bands, multi-column footer, marketing nav). Namespaced cenroq-*
 * like everything else, colour/type driven by tokens so they re-theme per
 * surface. Geometry is intentionally "marketing" (generous radius/padding, a
 * display type scale, hover lift) — distinct from the tight dashboard defaults
 * above. Built from the cenroq.com reference markup. Dark-band components read
 * the --cenroq-dark* / --cenroq-on-dark* tokens.
 * ════════════════════════════════════════════════════════════════════════ */

/* Layout helpers ---------------------------------------------------------- */
.cenroq-wrap { max-width: var(--cenroq-container); margin: 0 auto; padding: 0 28px; }
.cenroq-section { padding: 88px 0; }

/* Section header — eyebrow + title + description (used above most sections) */
.cenroq-section-head { margin-bottom: 3rem; max-width: 680px; }
.cenroq-section-head__eyebrow {
  font-family: var(--cenroq-font-mono);
  font-size: var(--cenroq-text-sm); letter-spacing: var(--cenroq-tracking-widest); text-transform: uppercase;
  color: var(--cenroq-brand);
  margin-bottom: 14px; display: flex; align-items: center; gap: 10px;
}
/* currentColor, damit der Strich die Textfarbe mitnimmt: auf einem dunklen
 * Band hellt sich das Etikett auf und die Linie ohne zweite Regel mit. */
.cenroq-section-head__eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.cenroq-section-head__title {
  font-family: var(--cenroq-font-display);
  font-size: var(--cenroq-text-display-sm); font-weight: var(--cenroq-weight-bold); line-height: var(--cenroq-leading-tight); letter-spacing: var(--cenroq-tracking-tighter);
  color: var(--cenroq-ink); margin: 0;
}
.cenroq-section-head__desc { margin: 16px 0 0; font-size: var(--cenroq-text-2xl); color: var(--cenroq-muted); line-height: var(--cenroq-leading-loose); }
.cenroq-section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.cenroq-section-head--center .cenroq-section-head__eyebrow { justify-content: center; }

/* Band — a full-bleed dark section (hero / cta / promo). Compose with a
 * .cenroq-wrap inside and, optionally, __glow / __grid decorations. */
.cenroq-band { position: relative; overflow: hidden; background: var(--cenroq-dark); color: var(--cenroq-on-dark); }
.cenroq-band__inner { position: relative; z-index: 2; }
.cenroq-band__glow {
  position: absolute; top: -140px; right: -60px; width: 600px; height: 600px; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--cenroq-brand) 30%, transparent), transparent 65%);
}
.cenroq-band__grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 72% 35%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 70% at 72% 35%, #000, transparent 75%);
}
/* Section header flips to light ink when it sits on a band */
.cenroq-band .cenroq-section-head__title { color: var(--cenroq-on-dark); }
.cenroq-band .cenroq-section-head__eyebrow { color: var(--cenroq-brand-bright); }
.cenroq-band .cenroq-section-head__desc { color: var(--cenroq-on-dark-muted); }

/* Marketing buttons — larger CTA sizing + a ghost (outline-on-dark) variant.
 * .cenroq-btn base lives above; these extend it. */
.cenroq-btn--lg { font-size: var(--cenroq-text-xl); padding: 14px 26px; border-radius: 9px; }
.cenroq-btn--ghost {
  background: transparent; color: var(--cenroq-on-dark);
  border: 1px solid var(--cenroq-dark-line);
  display: inline-flex; align-items: center; gap: 9px;
}
.cenroq-btn--ghost:hover { border-color: var(--cenroq-brand); background: var(--cenroq-dark-2); filter: none; }
.cenroq-btn--ghost svg { width: 15px; height: 15px; }
/* Ghost on a light surface */
.cenroq-btn--ghost-light { background: transparent; color: var(--cenroq-ink); border: 1px solid var(--cenroq-line); }
.cenroq-btn--ghost-light:hover { border-color: var(--cenroq-brand); background: var(--cenroq-brand-light); filter: none; }

/* Hero — headline + subhead + actions, usually on a .cenroq-band. Add
 * --split for a two-column hero (copy + visual). */
.cenroq-hero { padding: 92px 0 84px; }
.cenroq-hero__inner { position: relative; z-index: 2; }
.cenroq-hero--split .cenroq-hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; }
.cenroq-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--cenroq-font-mono); font-size: var(--cenroq-text-sm); letter-spacing: var(--cenroq-tracking-slight); text-transform: uppercase;
  color: var(--cenroq-brand-bright);
  padding: 7px 13px; border: 1px solid var(--cenroq-dark-line); border-radius: 100px;
  background: var(--cenroq-dark-2); margin-bottom: 26px;
}
/* Display headings run Bold — the default carries the weight a hero needs.
 * --light drops one headline to Lato Light for a quieter, more editorial look;
 * it is the exception, not the house style. (Lato has no 500/600, so the whole
 * scale is 300 / 400 / 700 — nothing in between exists to reach for.) */
.cenroq-hero__title { font-family: var(--cenroq-font-display); font-size: var(--cenroq-text-display-lg); line-height: var(--cenroq-leading-tightest); font-weight: var(--cenroq-weight-bold); letter-spacing: var(--cenroq-tracking-tighter); color: var(--cenroq-on-dark); margin: 0; }
.cenroq-hero__title--light { font-weight: var(--cenroq-weight-light); letter-spacing: var(--cenroq-tracking-tight); }
.cenroq-hero__title b, .cenroq-hero__accent { color: var(--cenroq-brand-bright); font-weight: inherit; }
.cenroq-hero__sub { margin-top: 24px; font-size: var(--cenroq-text-3xl); color: var(--cenroq-on-dark-muted); max-width: 530px; line-height: var(--cenroq-leading-loose); }
.cenroq-hero__actions { display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap; }
/* The split hero stacks before the visual column gets too narrow to hold its
 * content (a .cenroq-terminal's longest line needs ~320px). The 40px gap
 * carries over as the vertical rhythm between copy and visual. */
@media (max-width: 900px) { .cenroq-hero--split .cenroq-hero__inner { grid-template-columns: 1fr; } }

/* A small glowing status dot (e.g. inside an eyebrow) */
.cenroq-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cenroq-ok); box-shadow: 0 0 9px var(--cenroq-ok); }

/* Mono chip cluster (capability tags on a dark hero) */
.cenroq-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.cenroq-chip {
  font-family: var(--cenroq-font-mono); font-size: var(--cenroq-text-sm); color: var(--cenroq-on-dark-muted);
  padding: 6px 12px; border: 1px solid var(--cenroq-dark-line); border-radius: 7px;
  background: color-mix(in srgb, var(--cenroq-dark) 70%, transparent); transition: border-color .2s, color .2s;
}
.cenroq-chip:hover { border-color: var(--cenroq-brand); color: var(--cenroq-on-dark); }
.cenroq-chip--ai { border-color: color-mix(in srgb, var(--cenroq-action) 45%, transparent); color: var(--cenroq-action); }

/* CTA band — centred closing call-to-action. Use on a .cenroq-band. */
.cenroq-cta-band__inner { text-align: center; padding: 80px 0; position: relative; z-index: 2; }
.cenroq-cta-band__title { font-family: var(--cenroq-font-display); font-size: var(--cenroq-text-display-md); font-weight: var(--cenroq-weight-bold); line-height: var(--cenroq-leading-tight); letter-spacing: var(--cenroq-tracking-tighter); color: var(--cenroq-on-dark); margin: 0 0 18px; }
.cenroq-cta-band__title--light { font-weight: var(--cenroq-weight-light); letter-spacing: var(--cenroq-tracking-tight); }
.cenroq-cta-band__text { font-size: var(--cenroq-text-2xl); color: var(--cenroq-on-dark-muted); max-width: 480px; margin: 0 auto 32px; }
.cenroq-cta-band__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Fixed-column grids (marketing feature/benefit grids are fixed, not auto-fit
 * like .cenroq-grid). Collapse responsively. */
.cenroq-grid--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cenroq-grid--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .cenroq-grid--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cenroq-grid--2, .cenroq-grid--3 { grid-template-columns: 1fr; } }

/* Icon card — marketing flavour. Horizontal icon + text (like the site's
 * benefit cards): generous radius/padding + hover lift. Pairs with a grid. */
.cenroq-icon-card--marketing {
  border-radius: var(--cenroq-radius-card); padding: 28px 26px; gap: 18px; box-shadow: none;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.cenroq-icon-card--marketing:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(9,27,45,.08); border-color: var(--cenroq-brand); }
.cenroq-icon-card--marketing .cenroq-icon-card__icon { width: 46px; height: 46px; border-radius: 11px; background: var(--cenroq-brand-light); font-size: 0; }
.cenroq-icon-card--marketing .cenroq-icon-card__icon svg { width: 23px; height: 23px; stroke: var(--cenroq-brand); fill: none; stroke-width: 1.7; }
.cenroq-icon-card--marketing .cenroq-icon-card__title { font-family: var(--cenroq-font-display); font-size: var(--cenroq-text-3xl); font-weight: var(--cenroq-weight-bold); color: var(--cenroq-ink); margin: 0 0 8px; }
.cenroq-icon-card--marketing .cenroq-icon-card__body { font-size: var(--cenroq-text-lg); color: var(--cenroq-muted); line-height: var(--cenroq-leading-loose); }

/* Feature card — vertical (icon on top), for a 3-up capability grid.
 * --accent gives the amber "spotlight" treatment. */
.cenroq-feature { position: relative; overflow: hidden; background: var(--cenroq-surface); border: 1px solid var(--cenroq-line); border-radius: var(--cenroq-radius-card); padding: 26px 24px; transition: transform .25s, border-color .25s, box-shadow .25s; }
.cenroq-feature:hover { transform: translateY(-4px); border-color: var(--cenroq-brand); box-shadow: 0 14px 34px rgba(9,27,45,.08); }
.cenroq-feature__icon { width: 42px; height: 42px; border-radius: 10px; background: var(--cenroq-brand-light); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.cenroq-feature__icon svg { width: 21px; height: 21px; stroke: var(--cenroq-brand); fill: none; stroke-width: 1.7; }
.cenroq-feature__title { font-family: var(--cenroq-font-display); font-size: var(--cenroq-text-3xl); font-weight: var(--cenroq-weight-bold); color: var(--cenroq-ink); margin: 0 0 9px; }
.cenroq-feature__body { font-size: var(--cenroq-text-lg); color: var(--cenroq-muted); line-height: var(--cenroq-leading-relaxed); }
.cenroq-feature--accent { border-color: color-mix(in srgb, var(--cenroq-action) 50%, transparent); }
.cenroq-feature--accent:hover { border-color: var(--cenroq-action); box-shadow: 0 14px 34px color-mix(in srgb, var(--cenroq-action) 12%, transparent); }
.cenroq-feature--accent .cenroq-feature__icon { background: color-mix(in srgb, var(--cenroq-action) 14%, transparent); }
.cenroq-feature--accent .cenroq-feature__icon svg { stroke: var(--cenroq-action); }
.cenroq-feature__tag { position: absolute; top: 18px; right: 18px; font-family: var(--cenroq-font-mono); font-size: var(--cenroq-text-2xs); letter-spacing: var(--cenroq-tracking-wide); text-transform: uppercase; color: var(--cenroq-action); background: color-mix(in srgb, var(--cenroq-action) 14%, transparent); padding: 3px 7px; border-radius: 5px; }

/* Stepper — numbered process with a connector line between steps */
.cenroq-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; position: relative; }
.cenroq-step { position: relative; }
.cenroq-step__num { position: relative; z-index: 1; font-family: var(--cenroq-font-display); font-weight: var(--cenroq-weight-bold); font-size: var(--cenroq-text-lg); color: var(--cenroq-brand); width: 34px; height: 34px; border: 2px solid var(--cenroq-brand); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; background: var(--cenroq-surface); }
.cenroq-step__title { font-family: var(--cenroq-font-display); font-size: var(--cenroq-text-4xl); font-weight: var(--cenroq-weight-bold); color: var(--cenroq-ink); margin: 0 0 9px; }
.cenroq-step__body { font-size: var(--cenroq-text-lg); color: var(--cenroq-muted); line-height: var(--cenroq-leading-loose); }
.cenroq-step:not(:last-child)::after { content: ""; position: absolute; top: 17px; left: 48px; right: -28px; height: 2px; background: linear-gradient(90deg, var(--cenroq-brand), var(--cenroq-line)); }
@media (max-width: 900px) { .cenroq-steps { grid-template-columns: 1fr; gap: 28px; } .cenroq-step:not(:last-child)::after { display: none; } }

/* Comparison matrix — a CSS-grid table with check/dash cells and a highlighted
 * column. Built as a grid (not <table>) so the base table styling never bites. */
.cenroq-compare { border: 1px solid var(--cenroq-line); border-radius: 16px; overflow: hidden; }
.cenroq-compare__row { display: grid; grid-template-columns: 1.1fr 1.45fr 1.45fr; }
.cenroq-compare__row + .cenroq-compare__row { border-top: 1px solid var(--cenroq-line); }
.cenroq-compare__cell { padding: 20px 24px; font-size: var(--cenroq-text-lg); color: var(--cenroq-ink); line-height: var(--cenroq-leading-normal); }
.cenroq-compare__cell--label { background: var(--cenroq-panel); font-weight: var(--cenroq-weight-bold); font-size: var(--cenroq-text-lg); display: flex; align-items: center; }
.cenroq-compare__cell--featured { background: var(--cenroq-brand-light); }
.cenroq-compare__row--head .cenroq-compare__cell { background: var(--cenroq-dark); padding: 26px 24px; }
.cenroq-compare__row--head .cenroq-compare__cell h3 { color: var(--cenroq-on-dark); font-family: var(--cenroq-font-display); font-size: var(--cenroq-text-4xl); font-weight: var(--cenroq-weight-bold); margin: 0; border: 0; padding: 0; }
.cenroq-compare__row--head .cenroq-compare__cell--featured { background: var(--cenroq-brand-dark); }
.cenroq-compare__check { display: inline-flex; align-items: center; gap: 8px; }
.cenroq-compare__check svg { width: 16px; height: 16px; stroke: var(--cenroq-brand); fill: none; stroke-width: 2.2; flex-shrink: 0; }
.cenroq-compare__dash { color: var(--cenroq-line-strong); }
@media (max-width: 720px) { .cenroq-compare__row, .cenroq-compare__row--head { grid-template-columns: 1fr; } }

/* Pricing plans — tier cards, --featured highlights one, __badge is a ribbon */
.cenroq-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cenroq-plan { position: relative; border: 1px solid var(--cenroq-line); border-radius: 16px; padding: 34px 30px; background: var(--cenroq-surface); }
.cenroq-plan--featured { border-color: var(--cenroq-brand); background: var(--cenroq-brand-light); }
.cenroq-plan__tag { font-family: var(--cenroq-font-mono); font-size: var(--cenroq-text-xs); letter-spacing: var(--cenroq-tracking-wider); text-transform: uppercase; color: var(--cenroq-muted); margin-bottom: 14px; }
.cenroq-plan__title { font-family: var(--cenroq-font-display); font-size: var(--cenroq-text-5xl); font-weight: var(--cenroq-weight-bold); color: var(--cenroq-ink); margin: 0 0 6px; }
.cenroq-plan__price { font-family: var(--cenroq-font-mono); font-size: var(--cenroq-text-md); color: var(--cenroq-muted); margin-bottom: 22px; }
.cenroq-plan__price b { color: var(--cenroq-ink); font-size: var(--cenroq-text-xl); }
.cenroq-plan__badge { position: absolute; top: -11px; right: 26px; background: var(--cenroq-action); color: var(--cenroq-dark); font-family: var(--cenroq-font-mono); font-size: var(--cenroq-text-2xs); font-weight: var(--cenroq-weight-regular); letter-spacing: var(--cenroq-tracking-slight); text-transform: uppercase; padding: 5px 12px; border-radius: 6px; }
@media (max-width: 720px) { .cenroq-plans { grid-template-columns: 1fr; } }

/* Check list — svg-tick bullets (feature lists, plan contents, hero points) */
.cenroq-check-list { list-style: none; display: flex; flex-direction: column; gap: 13px; padding: 0; margin: 0; }
.cenroq-check-list li { display: flex; gap: 11px; font-size: var(--cenroq-text-lg); color: var(--cenroq-ink); line-height: var(--cenroq-leading-normal); }
.cenroq-check-list li svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; stroke: var(--cenroq-brand); fill: none; stroke-width: 2; }

/* Avatar — initials-in-gradient, or an <img>. --lg for team/bio cards. */
.cenroq-avatar { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font-family: var(--cenroq-font-display); font-weight: var(--cenroq-weight-bold); font-size: var(--cenroq-text-3xl); color: #fff; background: linear-gradient(135deg, var(--cenroq-brand), var(--cenroq-brand-dark)); }
.cenroq-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cenroq-avatar--lg { width: 72px; height: 72px; font-size: var(--cenroq-text-5xl); }

/* Marketing navbar — light sticky bar: logo · links · dropdown · CTA · burger.
 * (Distinct from the dashboard .cenroq-topbar.) */
.cenroq-navbar { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--cenroq-surface) 85%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--cenroq-line); }
.cenroq-navbar__inner { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.cenroq-navbar__logo { display: inline-flex; align-items: center; }
/* Nudged down by --cenroq-logo-optical-nudge — the mark's descender drags its
 * bounding box below the ink, so box-centring leaves it looking high. */
.cenroq-navbar__logo img { height: 30px; width: auto; display: block; transform: translateY(var(--cenroq-logo-optical-nudge)); }
.cenroq-navbar__links { display: flex; gap: 34px; align-items: center; }
.cenroq-navbar__links a { color: var(--cenroq-muted); font-size: var(--cenroq-text-lg); font-weight: var(--cenroq-weight-regular); text-decoration: none; transition: color .2s; }
.cenroq-navbar__links a:hover, .cenroq-navbar__links a.is-active { color: var(--cenroq-ink); }
.cenroq-navbar__cta { background: var(--cenroq-brand); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: var(--cenroq-text-lg); font-weight: var(--cenroq-weight-bold); text-decoration: none; transition: background .2s, transform .2s; }
.cenroq-navbar__cta:hover { background: var(--cenroq-brand-dark); transform: translateY(-1px); }
.cenroq-navbar__burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
.cenroq-navbar__burger span { width: 24px; height: 2px; background: var(--cenroq-ink); border-radius: 2px; }
/* Nav dropdown (hover/focus mega-menu) */
.cenroq-nav-dd { position: relative; display: inline-flex; align-items: center; }
.cenroq-nav-dd::after { content: ""; position: absolute; left: -12px; right: -12px; top: 100%; height: 18px; }
.cenroq-nav-dd__toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--cenroq-muted); font-size: var(--cenroq-text-lg); font-weight: var(--cenroq-weight-regular); transition: color .2s; }
.cenroq-nav-dd:hover .cenroq-nav-dd__toggle, .cenroq-nav-dd__toggle.is-active { color: var(--cenroq-ink); }
.cenroq-nav-dd__caret { font-size: var(--cenroq-text-2xs); opacity: .6; transition: transform .2s; }
.cenroq-nav-dd:hover .cenroq-nav-dd__caret { transform: rotate(180deg); }
.cenroq-nav-dd__menu { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(6px); background: var(--cenroq-surface); border: 1px solid var(--cenroq-line); border-radius: 12px; box-shadow: var(--cenroq-shadow-lg); padding: 8px; min-width: 232px; opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; z-index: 60; }
.cenroq-nav-dd:hover .cenroq-nav-dd__menu, .cenroq-nav-dd:focus-within .cenroq-nav-dd__menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.cenroq-nav-dd__menu a { display: block; padding: 10px 14px; border-radius: 8px; font-size: var(--cenroq-text-lg); color: var(--cenroq-muted); text-decoration: none; font-weight: var(--cenroq-weight-regular); }
.cenroq-nav-dd__menu a:hover { background: var(--cenroq-panel); color: var(--cenroq-ink); }
@media (max-width: 900px) { .cenroq-navbar__links { display: none; } .cenroq-navbar__burger { display: flex; } .cenroq-nav-dd__menu { display: none; } }

/* Multi-column site footer (distinct from the simple .cenroq-footer). Usually
 * on the dark brand colour: brand blurb + link columns + a bottom legal bar. */
.cenroq-site-footer { border-top: 1px solid var(--cenroq-dark-line); padding: 52px 0 40px; background: var(--cenroq-dark); color: var(--cenroq-on-dark-muted); }
.cenroq-site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
.cenroq-site-footer__brand img { height: 27px; display: block; margin-bottom: 14px; }
.cenroq-site-footer__brand p { font-size: var(--cenroq-text-md); color: var(--cenroq-on-dark-muted); max-width: 260px; line-height: var(--cenroq-leading-relaxed); margin: 0; }
.cenroq-site-footer__col h4 { font-family: var(--cenroq-font-mono); font-size: var(--cenroq-text-xs); letter-spacing: var(--cenroq-tracking-wider); text-transform: uppercase; color: var(--cenroq-on-dark-muted); margin: 0 0 16px; border: 0; padding: 0; }
.cenroq-site-footer__col a { display: block; font-size: var(--cenroq-text-lg); color: color-mix(in srgb, var(--cenroq-on-dark) 76%, var(--cenroq-dark)); margin-bottom: 11px; text-decoration: none; transition: color .2s; }
.cenroq-site-footer__col a:hover { color: var(--cenroq-on-dark); }
.cenroq-site-footer__bottom { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--cenroq-dark-line); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.cenroq-site-footer__bottom span, .cenroq-site-footer__legal a { font-size: var(--cenroq-text-sm); color: var(--cenroq-on-dark-muted); font-family: var(--cenroq-font-mono); }
.cenroq-site-footer__legal { display: flex; gap: 22px; flex-wrap: wrap; }
.cenroq-site-footer__legal a { text-decoration: none; }
.cenroq-site-footer__legal a:hover { color: var(--cenroq-on-dark); }
@media (max-width: 900px) { .cenroq-site-footer__grid { grid-template-columns: 1fr 1fr; } }

/* Terminal — a mock console (static or with a blinking cursor). Dark chrome. */
.cenroq-terminal { background: #050d16; border: 1px solid var(--cenroq-dark-line); border-radius: 12px; padding: 20px 22px; font-family: var(--cenroq-font-mono); font-size: var(--cenroq-text-md); color: var(--cenroq-on-dark-muted); }
.cenroq-terminal__bar { display: flex; gap: 7px; margin-bottom: 16px; }
.cenroq-terminal__bar i { width: 11px; height: 11px; border-radius: 50%; display: block; background: var(--cenroq-dark-line); }
.cenroq-terminal__bar i:nth-child(1) { background: #e06c5b; }
.cenroq-terminal__bar i:nth-child(2) { background: var(--cenroq-action); }
.cenroq-terminal__bar i:nth-child(3) { background: #5bb97a; }
.cenroq-terminal__line { margin-bottom: 8px; }
.cenroq-terminal__prompt { color: var(--cenroq-brand-bright); }
.cenroq-terminal__ok { color: var(--cenroq-ok); }
.cenroq-terminal__cursor { display: inline-block; width: 8px; height: 15px; background: var(--cenroq-brand-bright); vertical-align: middle; margin-left: 3px; animation: cenroq-blink 1.1s step-end infinite; }
@keyframes cenroq-blink { 50% { opacity: .25; } }

/* Logo marquee — an infinite horizontal scroll of member/customer logos.
 * Duplicate the track's children so the -50% loop is seamless. */
.cenroq-marquee { overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.cenroq-marquee__track { display: flex; gap: 54px; width: max-content; animation: cenroq-marq 32s linear infinite; }
.cenroq-marquee:hover .cenroq-marquee__track { animation-play-state: paused; }
.cenroq-marquee__logo { font-family: var(--cenroq-font-display); font-weight: var(--cenroq-weight-bold); font-size: var(--cenroq-text-4xl); color: var(--cenroq-muted); white-space: nowrap; letter-spacing: var(--cenroq-tracking-tighter); transition: color .2s; }
.cenroq-marquee__logo:hover { color: var(--cenroq-ink); }
@keyframes cenroq-marq { to { transform: translateX(-50%); } }

/* Respect reduced-motion for every animated marketing component */
@media (prefers-reduced-motion: reduce) {
  .cenroq-terminal__cursor, .cenroq-marquee__track { animation: none; }
}