/* App layout — token-only extensions on top of styles/composed-studio.css */

*, *::before, *::after { box-sizing: border-box; }

a { color: var(--cs-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--cs-focus);
  outline-offset: 2px;
  border-radius: var(--cs-radius-sm);
}

/* Blazor focuses each page's <h1> (tabindex="-1") after navigation so screen
   readers announce it — a real accessibility feature, not a bug. Sighted
   users don't need the visual ring for this programmatic, non-interactive
   focus, so suppress it here rather than disabling the focus call itself. */
[tabindex="-1"]:focus {
  outline: none;
}

.cs-skip-link {
  position: absolute;
  left: -9999px;
}
.cs-skip-link:focus {
  left: var(--cs-space-4);
  top: var(--cs-space-4);
  z-index: 100;
  padding: var(--cs-space-2) var(--cs-space-4);
  background: var(--cs-navy);
  color: var(--cs-white);
  border-radius: var(--cs-radius-sm);
}

/* Header */
.cs-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-space-6);
  min-height: 72px;
}
.cs-brand { display: flex; align-items: center; flex-shrink: 0; line-height: 0; }
.cs-brand img { display: none; width: 220px; height: auto; }
/* Two classes (not one) so this outweighs the equal-specificity `.cs-brand img` /
   `.cs-site-header img` width rules regardless of stylesheet load order — otherwise the
   compact monogram inherits the wide logo's 220px/184px width instead of its own 32px. */
.cs-brand .cs-brand-logo-compact { width: 32px; height: 32px; display: none; }

/* Light theme — wide horizontal logo */
:root[data-theme="light"] .cs-brand .cs-brand-logo-wide.cs-logo-light {
  display: block;
}

/* Dark theme — wide reversed logo */
:root[data-theme="dark"] .cs-brand .cs-brand-logo-wide.cs-logo-dark {
  display: block;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .cs-brand .cs-brand-logo-wide.cs-logo-light { display: block; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .cs-brand .cs-brand-logo-wide.cs-logo-dark { display: block; }
}

@media (max-width: 480px) {
  .cs-brand .cs-brand-logo-wide { display: none !important; }
  :root[data-theme="light"] .cs-brand .cs-brand-logo-compact-light { display: block; }
  :root[data-theme="dark"] .cs-brand .cs-brand-logo-compact-dark { display: block; }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme]) .cs-brand .cs-brand-logo-compact-light { display: block; }
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .cs-brand .cs-brand-logo-compact-dark { display: block; }
  }
}


.cs-nav {
  display: flex;
  align-items: center;
  gap: var(--cs-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.cs-nav a:not(.cs-btn) {
  color: var(--cs-text-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}
.cs-nav a:not(.cs-btn):hover,
.cs-nav a.cs-nav-active { color: var(--cs-text); text-decoration: none; }

.cs-nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  padding: var(--cs-space-2);
  color: var(--cs-text);
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  align-items: center;
  justify-content: center;
}

.cs-theme-toggle {
  background: transparent;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  color: var(--cs-text-muted);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  min-height: 44px;
  padding: 0 var(--cs-space-3);
  text-transform: uppercase;
}
.cs-theme-toggle:hover { color: var(--cs-text); border-color: var(--cs-text-muted); }

.cs-nav-cta { margin-left: var(--cs-space-2); }

/* Hero */
.cs-hero { background: var(--cs-bg); }
.cs-hero h1 span { color: var(--cs-accent); }
.cs-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cs-space-4);
  margin-top: var(--cs-space-8);
}

/* Sections */
.cs-section-surface { background: var(--cs-surface); }
.cs-section-intro {
  max-width: 42rem;
  margin-block: var(--cs-space-4) var(--cs-space-12);
  font-size: 1.0625rem;
}

/* Product cards */
.cs-product-card { display: flex; flex-direction: column; gap: var(--cs-space-4); }
.cs-product-card > .cs-btn { align-self: flex-start; margin-top: auto; }
.cs-product-card .cs-hero-actions { margin-top: auto; }
/* Row: the app's glyph badge (.cs-product-glyph) on the left, name + descriptor stacked in
   their own column on the right (.cs-product-card-headtext) — so every card's descriptor starts
   at the same left edge under the name regardless of how wide that card's product name is. A
   bare flex row directly on name+descriptor previously put them side by side instead, which made
   the descriptor's wrap column drift card to card. */
.cs-product-card-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--cs-space-3);
}
.cs-product-card-headtext {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-1);
  min-width: 0;
}
/* Sized by .as-glyph itself (appsite.css); just keep it from shrinking in the flex row. */
.cs-product-glyph { flex-shrink: 0; }
.cs-product-name {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
  color: var(--cs-text);
}
.cs-product-problem,
.cs-product-solution {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.cs-product-problem strong { color: var(--cs-text); font-weight: 600; }

/* Approach steps */
.cs-approach-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--cs-space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}
.cs-approach-step {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-3);
  padding-top: var(--cs-space-4);
  border-top: 1px solid var(--cs-border);
}
.cs-step-number {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--cs-accent);
}
.cs-step-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
  color: var(--cs-text);
}
.cs-step-description {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--cs-text-muted);
  line-height: 1.6;
}

/* Studio foundation */
.cs-studio-block {
  max-width: 40rem;
}
.cs-studio-block p {
  font-size: 1.0625rem;
  margin-top: var(--cs-space-4);
}

/* CTA */
.cs-contact-cta {
  background: var(--cs-surface);
  border-top: 1px solid var(--cs-border);
}
.cs-cta-copy {
  max-width: 36rem;
  margin: var(--cs-space-4) auto var(--cs-space-8);
  font-size: 1.0625rem;
  text-align: center;
}
.cs-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cs-space-4);
  justify-content: center;
}

/* Footer */
.cs-site-footer {
  background: var(--cs-footer-bg);
  color: var(--cs-footer-text);
  padding-block: var(--cs-space-12);
}
.cs-site-footer a {
  color: color-mix(in srgb, var(--cs-footer-text) 78%, transparent);
  text-decoration: none;
}
.cs-site-footer a:hover { color: var(--cs-footer-text); text-decoration: underline; }
.cs-footer-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cs-space-12);
  flex-wrap: wrap;
}
.cs-footer-logo { width: 220px; height: auto; display: block; }
.cs-footer-tagline {
  margin-top: var(--cs-space-3);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cs-footer-text) 45%, transparent);
}
.cs-footer-nav { display: flex; gap: var(--cs-space-12); }
.cs-footer-nav-col {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-3);
}
.cs-footer-nav-heading {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cs-footer-text) 40%, transparent);
  margin: 0 0 var(--cs-space-1);
}
.cs-footer-legal-modules {
  margin-top: var(--cs-space-8);
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--cs-footer-text) 45%, transparent);
}
.cs-footer-legal-modules a {
  color: color-mix(in srgb, var(--cs-footer-text) 60%, transparent);
}
.cs-footer-rule {
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--cs-footer-text) 12%, transparent);
  margin-block: var(--cs-space-8);
}
.cs-footer-copy {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--cs-footer-text) 40%, transparent);
  margin: 0;
}

/* Inner pages */
.cs-page-hero h1 { max-width: none; }
.cs-page-intro {
  font-size: 1.0625rem;
  max-width: 40rem;
  margin-top: var(--cs-space-4);
}
.cs-page-body {
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 45rem;
  margin-top: var(--cs-space-6);
}
.cs-page-body p + p { margin-top: var(--cs-space-4); }
.cs-legal-notice {
  max-width: 45rem;
  margin-top: var(--cs-space-6);
  padding: var(--cs-space-4) var(--cs-space-6);
  border: 1px solid var(--cs-border);
  border-left: 3px solid var(--cs-accent);
  border-radius: var(--cs-radius-md);
  background: var(--cs-surface);
}
.cs-legal-notice p { margin: 0; font-size: 0.9375rem; }
.cs-legal-notice p + p { margin-top: var(--cs-space-2); }
.cs-evidence-figure {
  max-width: 45rem;
  margin: var(--cs-space-6) 0 0;
}
.cs-evidence-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  background: var(--cs-surface);
}
.cs-evidence-figure figcaption {
  margin-top: var(--cs-space-3);
  font-size: 0.9375rem;
  color: var(--cs-text-muted);
}
.cs-schedule-list {
  list-style: none;
  margin: var(--cs-space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--cs-space-3);
}
.cs-schedule-list a {
  display: block;
  padding: var(--cs-space-3) var(--cs-space-4);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  color: var(--cs-text);
  font-weight: 600;
  text-decoration: none;
}
.cs-schedule-list a:hover { border-color: var(--color-border-strong); background: color-mix(in srgb, var(--cs-text) 4%, transparent); }

/* Help center */
.cs-help-topic {
  display: block;
  text-decoration: none;
  color: inherit;
}
.cs-help-topic .cs-eyebrow { margin-bottom: var(--cs-space-2); }
.cs-help-topic h2 {
  font-size: 1.3125rem;
  margin: 0 0 var(--cs-space-2);
}
.cs-help-topic p {
  font-size: 0.9375rem;
  margin: 0;
}
.cs-help-steps {
  list-style: none;
  counter-reset: cs-help-step;
  margin: var(--cs-space-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-5);
  max-width: 45rem;
}
.cs-help-steps li {
  counter-increment: cs-help-step;
  display: grid;
  /* Two explicit columns, one row: the ::before number sits in the first, and the step's single
     content wrapper <div> in the second — the wrapper is load-bearing, since bare h3+p children
     would auto-place as separate grid items and the paragraph would wrap under the number. */
  grid-template-columns: 2rem 1fr;
  align-items: start;
  gap: var(--cs-space-4);
}
.cs-help-steps li::before {
  content: counter(cs-help-step);
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cs-surface);
  border: 1px solid var(--cs-border);
  color: var(--cs-accent);
  font-weight: 700;
  font-size: 0.875rem;
  font-family: Poppins, Inter, sans-serif;
}
.cs-help-steps h3 {
  font-size: 1.0625rem;
  margin: 0 0 0.25rem;
  color: var(--cs-text);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: normal;
}
.cs-help-steps p { font-size: 0.9375rem; margin: 0; }

/* Screen mockup — used where the real page needs sign-in and can't be linked directly */
.cs-screen-mock {
  max-width: 26rem;
  margin: var(--cs-space-6) 0;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  background: var(--cs-surface-elevated);
  box-shadow: var(--cs-shadow-sm);
  overflow: hidden;
}
.cs-screen-mock-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-space-3);
  padding: 0.625rem var(--cs-space-4);
  background: var(--cs-surface);
  border-bottom: 1px solid var(--cs-border);
  font-size: 0.75rem;
  color: var(--cs-text-muted);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
}
.cs-screen-mock-badge {
  flex: none;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cs-accent);
  background: color-mix(in srgb, var(--cs-accent) 12%, transparent);
  padding: 0.15rem 0.5rem;
  border-radius: var(--cs-radius-sm);
  white-space: nowrap;
}
.cs-screen-mock-body { padding: var(--cs-space-6); }
.cs-screen-mock-body h3 { font-size: 1.1875rem; margin: 0 0 var(--cs-space-2); }
.cs-screen-mock-body p { font-size: 0.875rem; margin: 0 0 var(--cs-space-4); }
.cs-screen-mock-field { margin-bottom: var(--cs-space-4); }
.cs-screen-mock-label {
  display: block;
  font-size: 0.75rem;
  color: var(--cs-text-muted);
  margin-bottom: var(--cs-space-2);
}
.cs-screen-mock-input {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  background: var(--cs-bg);
  color: var(--cs-text-muted);
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
}
.cs-screen-mock-check {
  display: flex;
  gap: var(--cs-space-3);
  align-items: flex-start;
  font-size: 0.8125rem;
  color: var(--cs-text-muted);
  margin-bottom: var(--cs-space-4);
}
.cs-screen-mock-check input { margin-top: 0.2rem; }
.cs-screen-mock-btn {
  display: inline-block;
  background: var(--cs-blue);
  color: var(--color-action-primaryText);
  border-radius: var(--cs-radius-md);
  padding: 0.625rem 1.125rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.cs-screen-mock-btn.secondary {
  background: transparent;
  color: var(--cs-text);
  border: 1px solid var(--cs-border);
}
.cs-screen-mock-footnote {
  font-size: 0.8125rem;
  color: var(--cs-text-muted);
  border-top: 1px solid var(--cs-border);
  margin-top: var(--cs-space-4);
  padding-top: var(--cs-space-3);
  line-height: 1.6;
}

/* Phone mockup — used to show what an SMS from Composed Studio actually looks like */
.cs-phone-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--cs-space-6);
  margin: var(--cs-space-6) 0;
  max-width: 45rem;
}
.cs-phone-mock figcaption {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cs-text);
  margin-bottom: var(--cs-space-2);
}
.cs-phone-mock-screen {
  background: var(--cs-navy);
  border-radius: var(--cs-radius-lg);
  padding: 0.75rem;
  box-shadow: var(--cs-shadow-sm);
}
.cs-phone-mock-inner {
  background: var(--cs-off-white);
  border-radius: calc(var(--cs-radius-lg) - 0.25rem);
  min-height: 9.5rem;
  padding: 1rem 0.625rem 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--cs-space-2);
}
[data-theme="dark"] .cs-phone-mock-inner { background: var(--primitive-color-neutral-900); }
.cs-msg-from {
  font-size: 0.625rem;
  text-align: center;
  color: var(--cs-slate);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.cs-msg-bubble {
  max-width: 88%;
  padding: 0.5rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}
.cs-msg-bubble.in {
  align-self: flex-start;
  background: var(--cs-white);
  color: var(--cs-navy);
  border-bottom-left-radius: 0.25rem;
}
[data-theme="dark"] .cs-msg-bubble.in { background: var(--primitive-color-neutral-800); color: var(--cs-white); }
.cs-msg-bubble.out {
  align-self: flex-end;
  background: var(--cs-blue);
  color: var(--color-action-primaryText);
  border-bottom-right-radius: 0.25rem;
}
.cs-msg-bubble.carrier {
  align-self: center;
  background: transparent;
  color: var(--cs-slate);
  font-size: 0.6875rem;
  text-align: center;
  max-width: 100%;
}

.cs-principles-list {
  list-style: none;
  margin: var(--cs-space-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-4);
}
.cs-principles-list li {
  padding-left: var(--cs-space-4);
  border-left: 2px solid var(--cs-border);
  font-size: 1.0625rem;
  color: var(--cs-text-muted);
}
.cs-contact-list {
  list-style: none;
  margin: var(--cs-space-8) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-3);
  font-size: 1.0625rem;
}
.cs-contact-note {
  margin-top: var(--cs-space-6);
  font-size: 0.875rem;
  color: var(--cs-text-muted);
}
.cs-products-grid { margin-top: var(--cs-space-8); }
.cs-error-page {
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--cs-space-16) var(--cs-space-4);
}

.cs-text-center { text-align: center; }

.cs-container-narrow { max-width: 45rem; }


/* Responsive */
@media (max-width: 1024px) {
  .cs-approach-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .cs-header-inner { min-height: 64px; }
  .cs-nav-toggle { display: inline-flex; }
  .cs-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--cs-surface-elevated);
    border-top: 1px solid var(--cs-border);
    border-bottom: 1px solid var(--cs-border);
    box-shadow: var(--cs-shadow-md);
    padding: var(--cs-space-4);
    gap: 0;
  }
  .cs-nav.is-open { display: flex; }
  .cs-nav a,
  .cs-nav .cs-btn,
  .cs-nav .cs-theme-toggle {
    padding: var(--cs-space-3) var(--cs-space-4);
    width: 100%;
    justify-content: flex-start;
  }
  .cs-nav-cta { margin-left: 0; margin-top: var(--cs-space-2); }
  .cs-site-header { position: sticky; }
  .cs-site-header .cs-container { position: relative; }
}

.cs-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cs-space-6);
}

.cs-text-muted { color: var(--cs-text-muted); }

@media (max-width: 800px) {
  .cs-grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .cs-approach-steps { grid-template-columns: 1fr; }
  .cs-footer-inner { flex-direction: column; gap: var(--cs-space-8); }
  .cs-footer-nav { flex-direction: column; gap: var(--cs-space-6); }
}

/* ============================================================
   Brand art (theme-aware SVG illustrations)
   ============================================================ */
.cs-art { display: block; max-width: 100%; height: auto; }
.cs-art-ink { stroke: var(--cs-text); }
.cs-art-accent { stroke: var(--cs-accent); }
.cs-art-faint { stroke: var(--cs-border); }
.cs-art-ok { stroke: var(--cs-success); }
.cs-art-warn { stroke: var(--color-status-warning-base); }
.cs-art-dot { fill: var(--cs-border); }
.cs-art-ink-fill { fill: var(--cs-text); }
.cs-art-accent-fill { fill: var(--cs-accent); }
.cs-art-raised { fill: var(--cs-surface-elevated); }

/* ============================================================
   Scroll reveal (ADR-0001). Hidden state exists only when JS
   has claimed the page (html.cs-js); reduced motion collapses.
   ============================================================ */
html.cs-js .cs-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--motion-duration-slow) var(--motion-easing-enter),
              transform var(--motion-duration-slow) var(--motion-easing-enter);
}
html.cs-js .cs-reveal.is-in { opacity: 1; transform: none; }
html.cs-js .cs-reveal[data-reveal-delay="1"] { transition-delay: 90ms; }
html.cs-js .cs-reveal[data-reveal-delay="2"] { transition-delay: 180ms; }
html.cs-js .cs-reveal[data-reveal-delay="3"] { transition-delay: 270ms; }
@media (prefers-reduced-motion: reduce) {
  html.cs-js .cs-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   Split hero
   ============================================================ */
.cs-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--cs-space-12);
}
.cs-hero-art-wrap { justify-self: center; width: min(100%, 460px); }
@media (max-width: 900px) {
  .cs-hero-split { grid-template-columns: 1fr; gap: var(--cs-space-8); }
  .cs-hero-art-wrap { display: none; }
}

.cs-feature-list {
  list-style: none;
  margin: var(--cs-space-8) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-4);
}
.cs-feature-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--cs-space-3);
  align-items: baseline;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--cs-text-muted);
}
.cs-feature-list li strong { color: var(--cs-text); font-weight: 600; }
.cs-feature-mark {
  width: 8px; height: 8px;
  background: var(--cs-accent);
  border-radius: 2px;
  transform: translateY(-1px);
}
/* ============================================================
   Capability grid (products page)
   ============================================================ */
.cs-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cs-space-6);
  margin-top: var(--cs-space-8);
}
.cs-capability {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  padding: var(--cs-space-6);
  background: var(--cs-surface-elevated);
  transition: border-color var(--motion-duration-fast) var(--motion-easing-standard),
              transform var(--motion-duration-fast) var(--motion-easing-standard);
}
.cs-capability:hover { border-color: var(--color-border-strong); transform: translateY(-2px); }
.cs-capability h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 var(--cs-space-2);
  color: var(--cs-text);
  display: flex;
  align-items: center;
  gap: var(--cs-space-3);
}
.cs-capability p { margin: 0; font-size: 0.9375rem; line-height: 1.6; }
.cs-capability-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--cs-accent);
  letter-spacing: 0.08em;
}
@media (max-width: 1024px) { .cs-capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cs-capability-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Method band (home)
   ============================================================ */
.cs-method-band { background: var(--cs-surface); border-block: 1px solid var(--cs-border); }
.cs-method-link { font-weight: 600; font-size: 0.9375rem; }

/* Playbook trail — nodes share the exact grid (columns + gap) as the step
   cards below, so each dot sits above its card by construction rather than
   by matching hand-picked SVG coordinates to a separately-laid-out grid. */
.cs-method-track { position: relative; margin-top: var(--cs-space-8); }
.cs-method-line {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 120px;
}
.cs-method-nodes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--cs-space-8);
  height: 120px;
  align-items: center;
}
.cs-method-node { justify-self: center; }
.cs-method-node-dot {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  border: 3px solid var(--cs-text);
  background: var(--cs-bg);
}
.cs-method-node-dot.is-accent {
  border-color: var(--cs-accent);
  position: relative;
}
.cs-method-node-dot.is-accent::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 9999px;
  background: var(--cs-accent);
}
/* Zigzag to match the connecting line beneath: odd nodes sit low, even sit high. */
.cs-method-node:nth-child(odd) .cs-method-node-dot { transform: translateY(28px); }
.cs-method-node:nth-child(even) .cs-method-node-dot { transform: translateY(-28px); }

@media (max-width: 1024px) {
  /* .cs-approach-steps drops to a 2-column grid here — the trail no longer
     has a matching 4-wide layout to sit above, so it steps aside. */
  .cs-method-track { display: none; }
}

/* ============================================================
   CTA band — deep-ink full-bleed
   ============================================================ */
.cs-contact-cta {
  background: var(--cs-footer-bg);
  border-top: none;
}
.cs-contact-cta h2,
.cs-contact-cta .cs-cta-copy { color: var(--cs-footer-text); }
.cs-contact-cta .cs-cta-copy { color: color-mix(in srgb, var(--cs-footer-text) 72%, transparent); }
.cs-contact-cta .cs-btn-secondary {
  color: var(--cs-footer-text);
  border-color: color-mix(in srgb, var(--cs-footer-text) 32%, transparent);
}
.cs-contact-cta .cs-btn-secondary:hover {
  border-color: color-mix(in srgb, var(--cs-footer-text) 60%, transparent);
  background: color-mix(in srgb, var(--cs-footer-text) 8%, transparent);
}

/* ============================================================
   Contact page path cards / What-we-look-for checklist
   ============================================================ */
.cs-path-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cs-space-6);
  margin-top: var(--cs-space-8);
}
.cs-path-card { display: flex; flex-direction: column; gap: var(--cs-space-3); }
.cs-path-card h2 { font-size: 1.25rem; margin: 0; }
.cs-path-card p { margin: 0; font-size: 0.9375rem; }
.cs-path-card .cs-btn { align-self: flex-start; margin-top: auto; padding-top: var(--cs-space-3); }
@media (max-width: 720px) { .cs-path-cards { grid-template-columns: 1fr; } }

.cs-criteria-list {
  list-style: none;
  margin: var(--cs-space-8) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cs-space-6);
}
.cs-criteria-list li {
  border-left: 2px solid var(--cs-accent);
  padding-left: var(--cs-space-4);
}
.cs-criteria-list strong { display: block; color: var(--cs-text); font-weight: 600; margin-bottom: var(--cs-space-1); }
.cs-criteria-list span { font-size: 0.9375rem; color: var(--cs-text-muted); line-height: 1.6; }
@media (max-width: 720px) { .cs-criteria-list { grid-template-columns: 1fr; } }

/* Section header block: eyebrow + heading + intro kept on one rhythm */
.cs-section-head { max-width: 46rem; }
.cs-section-head .cs-section-intro { margin-bottom: 0; }

/* ============================================================
   Catalog index (WEB-007) — job-grouped app lockups
   ============================================================ */
.cs-lockup-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cs-space-6);
  margin-top: var(--cs-space-8);
}
@media (max-width: 800px) {
  .cs-lockup-list { grid-template-columns: 1fr; }
}
.cs-lockup-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cs-space-2);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  padding: var(--cs-space-6);
  background: var(--cs-surface-elevated);
  transition: border-color var(--motion-duration-fast) var(--motion-easing-standard),
              transform var(--motion-duration-fast) var(--motion-easing-standard);
}
.cs-lockup-card:hover { border-color: var(--color-border-strong); transform: translateY(-2px); }
/* Panel eyebrow: a deliberately smaller size than the page/section-header .cs-eyebrow (which
   stays large — see composed-studio.css). At panel scale, a lockup like "CERTFLEET · WORKFORCE
   CREDENTIAL & COMPLIANCE TRACKING" set at the section-header size wraps to two lines of heavy
   caps that overwhelm the card. Matches .cs-product-descriptor's size, so the two different card
   patterns on the site (home preview cards, /products-style lockup cards) read at one consistent
   "small label in a card" scale. Applies to every panel type that uses .cs-eyebrow inside it:
   .cs-lockup-card (Products/Pricing) and .cs-card (BundlePage member cards, ArticlesIndexPage
   article-collection cards). Reserves two lines' worth of height (at this smaller size) so a card
   whose eyebrow or headline wraps to a second line doesn't push its blurb and button out of
   alignment with its neighbors in the same grid row. */
.cs-lockup-card .cs-eyebrow,
.cs-card .cs-eyebrow {
  font-size: 0.8125rem;
  line-height: 1.4;
  min-height: 2.8em;
}
.cs-lockup-card h3 { margin: 0; font-size: 1.375rem; min-height: 2.2em; }
.cs-lockup-card h3 a { color: var(--cs-text); text-decoration: none; }
.cs-lockup-card h3 a:hover { color: var(--cs-accent); text-decoration: underline; }
.cs-lockup-blurb { margin: 0; max-width: 56ch; font-size: 0.9375rem; }
/* Push the CTA to the bottom of the card regardless of blurb length, so
   buttons line up along the same baseline across a row. */
.cs-lockup-card .cs-btn { margin-top: auto; }

.cs-quiet-link {
  display: inline-block;
  margin-top: var(--cs-space-4);
  font-size: 0.9375rem;
  color: var(--cs-text-muted);
  text-decoration: underline;
  text-decoration-color: var(--cs-border);
}
.cs-quiet-link:hover { color: var(--cs-accent); text-decoration-color: currentColor; }

/* Quiet platform-composability strip */
.cs-platform-strip p { max-width: 42rem; margin-inline: auto; }

/* ============================================================
   Works-with + bundle cross-link (per-app pages, WEB-007/008)
   ============================================================ */
.cs-bundle-callout {
  margin-top: var(--cs-space-6);
  padding: var(--cs-space-4) var(--cs-space-6);
  border: 1px solid var(--cs-border);
  border-left: 3px solid var(--cs-accent);
  border-radius: var(--cs-radius-md);
  background: var(--cs-surface);
}
.cs-bundle-callout p { margin: 0; font-size: 0.9375rem; }
.cs-bundle-callout p + p { margin-top: var(--cs-space-2); }
.cs-bundle-callout a { font-weight: 600; }

/* ============================================================
   Pricing tiers (per-app + bundle pages, WEB-007/008)
   ============================================================ */
.cs-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cs-space-6);
  margin-top: var(--cs-space-8);
}
.cs-tier-card { display: flex; flex-direction: column; gap: var(--cs-space-2); }
.cs-tier-name { margin: 0; font-size: 1.0625rem; font-weight: 600; color: var(--cs-text); }
.cs-tier-price { margin: var(--cs-space-1) 0 0; font-size: 1.75rem; font-weight: 700; color: var(--cs-text); }
.cs-tier-price span { font-size: 0.8125rem; font-weight: 500; color: var(--cs-text-muted); }
.cs-tier-annual { margin: 0; font-size: 0.8125rem; color: var(--cs-text-muted); }
.cs-tier-limit {
  align-self: flex-start;
  margin: var(--cs-space-1) 0 0;
  padding: 0.125rem 0.625rem;
  border-radius: var(--radius-full, 9999px);
  background: var(--cs-surface);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cs-accent);
}
.cs-tier-buyer { margin: 0; font-size: 0.875rem; }
@media (max-width: 1024px) { .cs-tier-grid { grid-template-columns: 1fr; } }

.cs-pricing-note { margin-top: var(--cs-space-6); font-size: 0.875rem; }

.cs-stat-tile {
  display: inline-flex;
  flex-direction: column;
  gap: var(--cs-space-1);
  padding: var(--cs-space-4) var(--cs-space-6);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  background: var(--cs-surface-elevated);
}
.cs-stat-value { margin: 0; font-family: Poppins, Inter, sans-serif; font-size: 2.25rem; font-weight: 700; line-height: 1; color: var(--cs-accent); }
.cs-stat-label { margin: 0; font-size: 0.8125rem; color: var(--cs-text-muted); }

.cs-table-scroll { overflow-x: auto; margin-top: var(--cs-space-6); }
.cs-pricing-table { width: 100%; min-width: 32rem; border-collapse: collapse; font-size: 0.9375rem; }
.cs-pricing-table th,
.cs-pricing-table td { text-align: left; padding: var(--cs-space-3) var(--cs-space-4); border-bottom: 1px solid var(--cs-border); }
.cs-pricing-table th { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cs-text-muted); }
.cs-pricing-table td { color: var(--cs-text); }
.cs-pricing-save { color: var(--cs-success); font-weight: 600; }

/* ============================================================
   Bundle pricing calculator (WEB-015 follow-up)
   ============================================================ */
.cs-calculator {
  margin-top: var(--cs-space-8);
  padding: var(--cs-space-6);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  background: var(--cs-surface-elevated);
}

.cs-calculator-question {
  margin: 0 0 var(--cs-space-4);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cs-text);
}

.cs-calculator-apps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--cs-space-3);
}

.cs-app-select {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "job check" "name check";
  align-items: center;
  column-gap: var(--cs-space-3);
  row-gap: 0.125rem;
  padding: var(--cs-space-4);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  background: var(--cs-surface);
  cursor: pointer;
  transition: border-color var(--motion-duration-fast, 120ms) var(--motion-easing-standard, ease);
}
.cs-app-select:hover { border-color: var(--cs-accent); }
.cs-app-select input[type="checkbox"] {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.cs-app-select-job { grid-area: job; font-size: 1rem; font-weight: 700; color: var(--cs-text); }
.cs-app-select-name { grid-area: name; font-size: 0.8125rem; font-weight: 500; color: var(--cs-text-muted); }
.cs-app-select-check {
  grid-area: check;
  width: 1.25rem;
  height: 1.25rem;
  border: 1.5px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-bg);
}
.cs-app-select input:checked ~ .cs-app-select-check {
  border-color: var(--cs-accent);
  background: var(--cs-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.cs-app-select:has(input:checked) {
  border-color: var(--cs-accent);
  background: var(--cs-surface-elevated);
}
.cs-app-select input:focus-visible ~ .cs-app-select-check {
  outline: 2px solid var(--cs-focus);
  outline-offset: 2px;
}

.cs-calculator-quantity {
  margin-top: var(--cs-space-4);
  padding-top: var(--cs-space-4);
  border-top: 1px solid var(--cs-border);
}
.cs-calculator-quantity label {
  display: block;
  margin-bottom: var(--cs-space-2);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cs-text);
}
.cs-calculator-quantity input[type="number"] {
  width: 100%;
  max-width: 12rem;
  min-height: 44px;
  padding: 0.6rem 0.875rem;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  background: var(--cs-bg);
  color: var(--cs-text);
  font-size: 0.9375rem;
}
.cs-calculator-quantity input[type="number"]:focus-visible {
  outline: 2px solid var(--cs-focus);
  outline-offset: 1px;
}

.cs-calculator-billing {
  display: flex;
  align-items: center;
  gap: var(--cs-space-4);
  margin-top: var(--cs-space-6);
  padding-top: var(--cs-space-6);
  border-top: 1px solid var(--cs-border);
}
.cs-calculator-billing-label { font-size: 0.875rem; font-weight: 600; color: var(--cs-text); }

.cs-toggle {
  display: inline-flex;
  padding: 0.25rem;
  border: 1px solid var(--cs-border);
  border-radius: var(--radius-full, 9999px);
  background: var(--cs-surface);
}
.cs-toggle-option {
  position: relative;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-full, 9999px);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cs-text-muted);
  cursor: pointer;
}
.cs-toggle-option input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.cs-toggle-option:has(input:checked) {
  background: var(--cs-accent);
  color: var(--cs-white, #fff);
}
.cs-toggle-option input:focus-visible {
  outline: 2px solid var(--cs-focus);
  outline-offset: 2px;
}

.cs-calculator-output {
  margin-top: var(--cs-space-6);
  padding-top: var(--cs-space-6);
  border-top: 1px solid var(--cs-border);
}
.cs-calculator-empty { margin: 0; }
.cs-calculator-total { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cs-space-2); }
.cs-calculator-savings { margin: 0; color: var(--cs-success); font-weight: 600; }
.cs-calculator-savings-total { font-weight: 700; }
.cs-calculator-breakdown { margin-top: var(--cs-space-4); }

/* The calculator section is unusually tall (calculator + ladder table + note), so the standard
   section padding on both sides of the transition into the first priced-app section below reads
   as an oversized gap. Tighten just this one transition rather than the shared .cs-section rule. */
.cs-pricing-hero { padding-bottom: var(--cs-space-8); }
#bundle-pricing { padding-top: var(--cs-space-8); padding-bottom: var(--cs-space-8); }
#bundle-pricing + section { padding-top: var(--cs-space-8); }

/* Pricing hero: left-aligned, spanning the full container width instead of the shared
   .cs-section-head/.cs-page-intro reading-width caps that would otherwise confine it to a narrow
   column on the left half of a wide page. */
.cs-pricing-hero .cs-section-head { max-width: none; }
.cs-pricing-hero .cs-page-intro { max-width: none; }
/* ============================================================
   Recommender (WEB-009) — static-SSR question steps
   ============================================================ */
.cs-recommender-options {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-4);
  margin-top: var(--cs-space-8);
  max-width: 40rem;
}
.cs-recommender-option {
  display: block;
  padding: var(--cs-space-4) var(--cs-space-5);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  color: var(--cs-text);
  text-decoration: none;
}
.cs-recommender-option:hover { border-color: var(--color-border-strong); background: color-mix(in srgb, var(--cs-text) 4%, transparent); }
.cs-recommender-option strong { display: block; font-size: 1.0625rem; font-weight: 600; }
.cs-recommender-option span { display: block; margin-top: var(--cs-space-1); font-size: 0.875rem; color: var(--cs-text-muted); }
.cs-recommender-progress { font-size: 0.8125rem; color: var(--cs-text-muted); }
.cs-recommender-result {
  margin-top: var(--cs-space-8);
  padding: var(--cs-space-6);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  background: var(--cs-surface-elevated);
  max-width: 40rem;
}
.cs-recommender-result p { margin: 0 0 var(--cs-space-4); }
.cs-recommender-result p:last-of-type { margin-bottom: 0; }

/* ============================================================
   Articles — hub, index, and detail pages
   ============================================================ */
/* 760px = the layout-spec `content` archetype's maxContentWidth. */
.cs-article-container { max-width: 47.5rem; }

.cs-article-date { margin: var(--cs-space-3) 0 0; font-size: 0.8125rem; color: var(--cs-text-muted); }

/* Article detail hero image -- vendored alongside its article (content/articles/README.md,
   wwwroot/{appSlug}/images/articles/{slug}.png), same 16:9 crop and radius as the listing
   thumbnails below so an article's art looks consistent between hub and detail. */
.cs-article-hero-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--cs-radius-lg);
  margin: 0 0 var(--cs-space-6);
}

/* Article listings are cards on the same 2-up grid as the product catalog
   (.cs-lockup-list), so every listing surface on the site shares one column
   and padding rhythm. The <li>s carry .cs-card for the standard panel padding
   rather than inventing a tighter divider-list treatment. */
.cs-article-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cs-space-6);
  list-style: none;
  margin: var(--cs-space-8) 0 0;
  padding: 0;
}
@media (max-width: 800px) {
  .cs-article-list { grid-template-columns: 1fr; }
}
.cs-article-list-item {
  display: flex;
  flex-direction: column;
  transition: border-color var(--motion-duration-fast) var(--motion-easing-standard),
              transform var(--motion-duration-fast) var(--motion-easing-standard);
}
.cs-article-list-item:hover { border-color: var(--color-border-strong); transform: translateY(-2px); }
/* Bleeds to the card's edges (cancels .cs-card's 1.75rem padding) so the thumbnail reads as a
   photo cropped to the card, not a framed inset panel. */
.cs-article-list-item .cs-article-thumbnail {
  display: block;
  width: calc(100% + 3.5rem);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: -1.75rem -1.75rem var(--cs-space-4);
  border-radius: var(--cs-radius-lg) var(--cs-radius-lg) 0 0;
}
.cs-article-list-item h2,
.cs-article-list-item h3 { margin: 0; font-size: 1.125rem; }
.cs-article-list-item h2 a,
.cs-article-list-item h3 a { color: var(--cs-text); text-decoration: none; }
.cs-article-list-item h2 a:hover,
.cs-article-list-item h3 a:hover { color: var(--cs-accent); }
.cs-article-list-item p { margin: var(--cs-space-3) 0 0; font-size: 0.9375rem; color: var(--cs-text-muted); }
/* Date sits flush at the card's bottom so it aligns across a row regardless
   of how long each description runs. */
.cs-article-list-item .cs-article-date { margin-top: auto; padding-top: var(--cs-space-4); }

/* /articles collection cards — one per app, on the same 2-up grid as the
   product catalog. Each card previews a few titles and defers the full list
   to that app's own hub, so this page's length tracks app count, not corpus
   size. */
.cs-article-collections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cs-space-6);
  margin-top: var(--cs-space-8);
}
@media (max-width: 800px) {
  .cs-article-collections { grid-template-columns: 1fr; }
}
.cs-article-collection {
  display: flex;
  flex-direction: column;
  transition: border-color var(--motion-duration-fast) var(--motion-easing-standard),
              transform var(--motion-duration-fast) var(--motion-easing-standard);
}
.cs-article-collection:hover { border-color: var(--color-border-strong); transform: translateY(-2px); }
.cs-article-collection-title { margin: 0; font-size: 1.25rem; }
.cs-article-collection-title a { color: var(--cs-text); text-decoration: none; }
.cs-article-collection-title a:hover { color: var(--cs-accent); }
.cs-article-collection-count {
  margin: var(--cs-space-2) 0 0;
  font-size: 0.8125rem;
  color: var(--cs-text-muted);
}
.cs-article-preview {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-3);
  margin: var(--cs-space-5) 0 0;
  padding: 0;
}
.cs-article-preview li { padding-left: var(--cs-space-4); position: relative; }
.cs-article-preview li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cs-accent);
}
.cs-article-preview a { font-size: 0.9375rem; line-height: 1.5; color: var(--cs-text); text-decoration: none; }
.cs-article-preview a:hover { color: var(--cs-accent); text-decoration: underline; }
/* Pinned to the bottom so the CTA aligns across a row regardless of title lengths. */
.cs-article-collection-all { margin-top: auto; padding-top: var(--cs-space-6); }

/* Panels below use the site's standard uniform panel padding (space-6),
   matching .cs-capability and .cs-lockup-card, rather than the tighter
   asymmetric values these started with. */
.cs-article-takeaways {
  margin-top: var(--cs-space-10);
  padding: var(--cs-space-6);
  border: 1px solid var(--cs-border);
  border-left: 3px solid var(--cs-accent);
  border-radius: var(--cs-radius-lg);
  background: var(--cs-surface-elevated);
}
.cs-article-takeaways h2 { margin: 0 0 var(--cs-space-4); font-size: 1rem; }
.cs-article-takeaways ul { margin: 0; padding-left: 1.25rem; }
.cs-article-takeaways li { margin-bottom: var(--cs-space-3); font-size: 0.9375rem; line-height: 1.6; }
.cs-article-takeaways li:last-child { margin-bottom: 0; }

.cs-article-prose { margin-top: var(--cs-space-10); }
.cs-article-prose h2 { margin: var(--cs-space-8) 0 var(--cs-space-3); font-size: 1.375rem; }
.cs-article-prose h3 { margin: var(--cs-space-6) 0 var(--cs-space-2); font-size: 1.125rem; }
.cs-article-prose p { margin: 0 0 var(--cs-space-4); line-height: 1.7; }
.cs-article-prose ul,
.cs-article-prose ol { margin: 0 0 var(--cs-space-4); padding-left: 1.5rem; }
.cs-article-prose li { margin-bottom: var(--cs-space-2); line-height: 1.6; }

.cs-article-faq { margin-top: var(--cs-space-12); }
.cs-article-faq h2 { margin: 0 0 var(--cs-space-6); font-size: 1.375rem; }
.cs-article-faq details {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  background: var(--cs-surface-elevated);
  margin-bottom: var(--cs-space-4);
  padding: var(--cs-space-6);
}
.cs-article-faq details:last-child { margin-bottom: 0; }
.cs-article-faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--cs-text);
}
.cs-article-faq details p { margin: var(--cs-space-4) 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--cs-text-muted); }

.cs-article-cta {
  margin-top: var(--cs-space-12);
  padding: var(--cs-space-8);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  background: var(--cs-surface-elevated);
  text-align: center;
}
.cs-article-cta-headline { margin: 0 0 var(--cs-space-6); font-size: 1.125rem; font-weight: 600; color: var(--cs-text); }

.cs-article-related { margin-top: var(--cs-space-12); }
.cs-article-related h2 { margin: 0 0 var(--cs-space-6); font-size: 1.375rem; }
.cs-article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--cs-space-6);
  margin-top: var(--cs-space-6);
}
.cs-article-card { transition: border-color var(--motion-duration-fast) var(--motion-easing-standard); }
.cs-article-card:hover { border-color: var(--color-border-strong); }
.cs-article-card h3 { margin: 0; font-size: 1rem; line-height: 1.4; }
.cs-article-card h3 a { color: var(--cs-text); text-decoration: none; }
.cs-article-card h3 a:hover { color: var(--cs-accent); }
.cs-article-card p { margin: var(--cs-space-3) 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--cs-text-muted); }

/* Product chips — the home hero's above-the-fold path into each product's marketing site, and
   the /products at-a-glance strip (funnel work: no product lives on "page two"). */
.cs-app-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--cs-space-2);
  padding: 0;
  margin: var(--cs-space-6) 0 0;
}
.cs-app-chip {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--cs-border);
  border-radius: 999px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--cs-text-muted);
  text-decoration: none;
  transition: border-color var(--motion-duration-fast) var(--motion-easing-standard),
              color var(--motion-duration-fast) var(--motion-easing-standard);
}
.cs-app-chip:hover { border-color: var(--cs-accent); color: var(--cs-accent); text-decoration: none; }
.cs-app-chip strong { color: var(--cs-text); font-weight: 600; }
.cs-app-chip:hover strong { color: var(--cs-accent); }
.cs-catalog-strip { margin-top: var(--cs-space-6); }

/* Home product-card descriptor line — the catalog descriptor under the name, so an unknown
   brand name never stands alone. Spacing above it comes from the parent .cs-product-card-headtext
   flex gap, not its own margin (avoids doubling up the two). */
.cs-product-descriptor {
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cs-text-muted);
}

/* Catalog-card price note — the floor tier from the app's own vendored pricing spec. */
.cs-price-note { margin: 0; font-size: 0.875rem; color: var(--cs-text-muted); }

/* Compact platform hero — suite-homepage pattern: a short platform promise and a fast path into
   the apps; the app grid directly below does the showcasing, so the hero doesn't have to. */
.cs-hero-compact.cs-section { padding-block: clamp(2rem, 3.5vw, 3rem); }
.cs-hero-compact h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.cs-hero-compact .cs-hero-art-wrap { width: min(100%, 380px); }

/* Path-card eyebrow (Contact.razor): tighter bottom margin than the default .cs-eyebrow, since
   the heading follows immediately with no intervening lede. */
.cs-eyebrow-tight { margin-bottom: 0; }

/* Legal-page version/last-updated note (LegalPageShell.razor): smaller and set off from the
   heading above it. */
.cs-legal-version-note { font-size: 0.875rem; margin-top: var(--cs-space-2); }

/* Name-led app headings (Pricing.razor): the app name is the heading and the catalog descriptor
   sits under it on its own line. Replaces the old "Name · Descriptor" eyebrow stacked above a
   heading that repeated the name. */
.cs-section-descriptor {
  margin: var(--cs-space-2) 0 0;
  font-size: 1.0625rem;
  color: var(--cs-text-muted);
}
.cs-lockup-descriptor {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--cs-text-muted);
}
/* The stock lockup card reserves two lines of heading height so headline-led cards line up in a
   grid row. A name-led card's heading is a short product name, so that reservation would just
   open a gap above the descriptor — the descriptor and the bottom-aligned actions keep these
   cards aligned instead. */
.cs-lockup-card-named h3 { min-height: 0; }
.cs-lockup-card .cs-hero-actions { margin-top: auto; }