/* =====
       Shared editorial surface (case studies + audit request and similar pages).
       Loaded by case_studies.html inline historically; request_ai_implementation_audit
       links this file. Body: .hello-marketing-page. Base tokens: hello_brand_tokens.css.
       ===== */

    /* Hero garnish: decorative right-side accent, screen-blended over the dark gradient */
    .hero--cs-garnish::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: url(/assets/images/hero/cs-hero-opt-2.png) no-repeat right center / cover;
      mix-blend-mode: screen;
      opacity: 0.2;
    }

    /* === PROOF STRIP v2: editorial thin-weight numbers, no gradient clip,
       context disclosure row in place of buried italic footnote.
       Numbers carry visual weight through scale + light weight contrast
       rather than heavy fill + gradient. Items breathe; labels are uppercase
       tracking. Context note is a first-class design element. */
    .cs-proof-strip {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0;
    }
    @media (min-width: 720px) {
      .cs-proof-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (min-width: 1100px) {
      .cs-proof-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    }
    .cs-proof-strip__item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      text-align: center;
      padding: 12px 16px;
      position: relative;
      border-bottom: 1px solid var(--slate-100);
    }
    .cs-proof-strip__item:nth-child(5) {
      grid-column: 1 / -1;
      border-bottom: none;
    }
    .cs-proof-strip__item:nth-child(4) {
      border-bottom: none;
    }
    @media (min-width: 720px) {
      .cs-proof-strip__item:nth-child(4),
      .cs-proof-strip__item:nth-child(5) {
        border-bottom: none;
      }
      .cs-proof-strip__item:nth-child(5) {
        grid-column: auto;
      }
    }
    /* Vertical hairlines between items at desktop */
    @media (min-width: 1100px) {
      .cs-proof-strip__item {
        border-bottom: none;
        padding: 14px 20px;
      }
      .cs-proof-strip__item:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 22%;
        bottom: 22%;
        width: 1px;
        background: var(--slate-100);
      }
    }
    /* Editorial number: thin weight + larger scale. The contrast between
       the 300-weight number and the 600-weight uppercase label reads
       as contemporary and intentional rather than decorative. */
    .cs-proof-strip__val {
      font-size: clamp(21px, 2.6vw, 30px);
      font-weight: 300;
      letter-spacing: -0.04em;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      color: var(--brand-primary);
    }

    /* Proof band: half the default marketing-band vertical padding so the
       trust strip reads as a thin signal row, not a full section. */
    .hello-marketing-page .cs-proof-band {
      padding-top: calc(var(--home-section-pad-y) / 2);
      padding-bottom: calc(var(--home-section-pad-y) / 2);
    }
    .cs-proof-strip__lbl {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--slate-500);
      line-height: 1.4;
      max-width: 16ch;
    }

    /* Context disclosure: treats the methodology note as a first-class
       design element rather than fine print. A thin rule creates a clear
       visual pause, the info icon signals intent, the "Context" label
       makes the disclosure scannable and trustworthy. */
    .cs-proof-context {
      display: flex;
      align-items: center;
      gap: 7px;
      margin: 14px auto 0;
      max-width: 960px;
    }
    .cs-proof-context__icon {
      flex-shrink: 0;
      width: 13px;
      height: 13px;
      color: var(--slate-400);
      display: block;
    }
    .cs-proof-context__icon svg {
      width: 13px;
      height: 13px;
      display: block;
    }
    .cs-proof-context__body {
      font-size: 12px;
      line-height: 1.5;
      color: var(--slate-500);
    }
    .cs-proof-context__label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--slate-400);
      margin-right: 5px;
    }

    /* === SELF-DIAGNOSE: 6-card grid of operational drag patterns ========== */
    .cs-diagnose-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      margin-top: 28px;
    }
    @media (min-width: 720px) {
      .cs-diagnose-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    }
    @media (min-width: 1100px) {
      .cs-diagnose-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    }
    .cs-diagnose-card {
      gap: 10px;
      padding: 22px 22px 20px;
    }
    /* Icon: small circle badge — cleaner and more refined than the square
       tile. Color invert on hover signals interaction without the toy-like
       scale pop. Card lift is handled by .hello-feature-card hover. */
    .cs-diagnose-card__icon {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--brand-surface-tint, #eff6ff);
      color: var(--brand-primary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease, color 0.2s ease;
      flex-shrink: 0;
    }
    .cs-diagnose-card__icon svg {
      width: 17px;
      height: 17px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .cs-diagnose-card:hover .cs-diagnose-card__icon {
      background: var(--brand-primary);
      color: #fff;
    }
    .cs-diagnose-card__title {
      font-size: 15px;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.02em;
      color: var(--navy);
      margin: 0;
    }
    .cs-diagnose-card__body {
      font-size: 13px;
      line-height: 1.6;
      color: var(--slate-600);
      margin: 0;
    }
    @media (prefers-reduced-motion: reduce) {
      .cs-diagnose-card__icon { transition: none; }
    }

    /* === SECTION DEK + TITLE: match index prose width (full column, not ~62ch) === */
    .hello-marketing-page .hello-marketing-band .hello-marketing-inner > .hello-section-heading {
      max-width: var(--hello-marketing-prose-max-width);
    }
    .hello-marketing-page .hello-marketing-band .hello-marketing-inner > .subtitle {
      margin: 0;
      padding: 0;
      font-size: clamp(15px, 1.9vw, 17px);
      line-height: 1.65;
      color: var(--slate-600);
      max-width: var(--hello-marketing-prose-max-width);
      text-wrap: balance;
    }

    /* === IMPLEMENTATION MOTION SELECTOR: two primary paths =============== */
    .cs-motion-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      margin-top: 32px;
      width: 100%;
      align-items: stretch;
      box-sizing: border-box;
    }
    @media (min-width: 900px) {
      .cs-motion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    }
    .cs-motion-grid > .cs-motion-card {
      min-width: 0;
    }
    .cs-motion-card.hello-feature-card {
      display: flex;
      flex-direction: column;
      height: 100%;
      align-items: stretch;
    }
    .hello-feature-card > .cs-motion-card__tag {
      align-self: flex-start;
    }

    /* Audit deliverables: two explicit flex rows — equal width + equal height per row via
       flex cross-axis stretch (no grid row alignment, height:100%, or flex-grow on body). */
    #deliverables .rai-deliverables-stack {
      display: flex;
      flex-direction: column;
      gap: 22px;
      margin-top: 32px;
      width: 100%;
      box-sizing: border-box;
    }
    @media (min-width: 900px) {
      #deliverables .rai-deliverables-stack {
        gap: 28px;
      }
    }
    #deliverables .rai-deliverables-row {
      display: flex;
      flex-direction: column;
      gap: 22px;
      align-items: stretch;
    }
    @media (min-width: 900px) {
      #deliverables .rai-deliverables-row {
        flex-direction: row;
        gap: 28px;
      }
    }
    #deliverables .rai-deliverables-row .cs-motion-card.hello-feature-card {
      flex: 1 1 0;
      min-width: 0;
      min-height: 0;
      height: auto;
      align-self: stretch;
    }

    .cs-motion-card {
      min-height: 100%;
      gap: 16px;
    }
    .cs-motion-card__tag {
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      padding: 6px 10px;
      border-radius: 6px;
      background: var(--brand-surface-tint);
      border: 1px solid var(--brand-primary-subtle, #bfdbfe);
      color: var(--brand-primary);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .cs-motion-card__title {
      margin: 0;
      color: var(--navy);
      font-size: clamp(18px, 2.2vw, 22px);
      font-weight: 700;
      letter-spacing: -0.025em;
      line-height: 1.25;
    }
    .cs-motion-card__body {
      margin: 0;
      color: var(--slate-600);
      font-size: 14px;
      line-height: 1.65;
    }
    /* Proof metrics: editorial pair, no box backgrounds or borders.
       A thin top rule separates the proof from the card body. Numbers
       use the same 300-weight editorial treatment as the proof strip. */
    .cs-motion-card__proof {
      display: flex;
      gap: 0;
      padding-top: 14px;
      border-top: 1px solid var(--slate-100);
      margin: 0;
    }
    .cs-motion-card__metric {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding-right: 16px;
      position: relative;
    }
    .cs-motion-card__metric:not(:last-child)::after {
      content: "";
      position: absolute;
      right: 0;
      top: 8%;
      bottom: 8%;
      width: 1px;
      background: var(--slate-100);
    }
    .cs-motion-card__metric:last-child {
      padding-right: 0;
      padding-left: 16px;
    }
    .cs-motion-card__metric strong {
      display: block;
      color: var(--brand-primary);
      font-size: clamp(21px, 2.4vw, 26px);
      font-weight: 300;
      line-height: 1;
      letter-spacing: -0.04em;
      font-variant-numeric: tabular-nums;
    }
    .cs-motion-card__metric span {
      display: block;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--slate-500);
      line-height: 1.4;
    }
    .cs-motion-card__fit {
      margin: 0;
      color: var(--slate-700);
      font-size: 13.5px;
      line-height: 1.6;
    }
    .cs-motion-card__cta {
      margin-top: auto;
      display: inline-flex;
      align-items: center;
      gap: 0;
      color: var(--brand-primary);
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      letter-spacing: -0.005em;
    }
    .cs-motion-card__cta::after {
      content: "\2192";
      display: inline-block;
      margin-left: 6px;
      font-weight: 400;
      font-size: 15px;
      transition: transform 0.2s ease;
    }
    .cs-motion-card__cta:hover { color: var(--brand-primary-hover); text-decoration: none; }
    .cs-motion-card__cta:hover::after { transform: translateX(4px); }
    @media (prefers-reduced-motion: reduce) { .cs-motion-card__cta::after { transition: none; } }

    /* === MID-PAGE CTA (index-aligned widths: prose max-width for heading + lede) === */
    .cs-mid-cta {
      text-align: center;
      background: var(--brand-surface-tint, #eff6ff);
    }
    .cs-mid-cta .subtitle {
      max-width: var(--hello-marketing-prose-max-width);
      margin-left: auto;
      margin-right: auto;
    }
    /* Stronger than .hello-marketing-inner > .subtitle { margin: 0 } so mid-CTA dek re-centers. */
    .hello-marketing-page .hello-marketing-band.cs-mid-cta .hello-marketing-inner > .subtitle {
      margin-left: auto;
      margin-right: auto;
      max-width: var(--hello-marketing-prose-max-width);
      text-align: center;
    }
    .hello-marketing-page .hello-marketing-band.cs-mid-cta .hello-marketing-inner > .hello-section-heading {
      text-align: center;
      max-width: var(--hello-marketing-prose-max-width);
      margin-left: auto;
      margin-right: auto;
    }
    .hello-marketing-page .hello-marketing-band.cs-mid-cta .hello-marketing-inner > .hello-section-lede {
      max-width: var(--hello-marketing-prose-max-width);
      margin-left: auto;
      margin-right: auto;
    }
    .cs-mid-cta__buttons {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      margin-top: 28px;
    }

    /* === GOVERNANCE PILLARS: compliance posture cards ================== */
    .cs-governance-grid {
      list-style: none;
      margin: 32px 0 0;
      padding: 0;
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }
    @media (min-width: 720px) {
      .cs-governance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    }
    @media (min-width: 1040px) {
      .cs-governance-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    .cs-governance-card {
      padding: 22px 22px 20px;
      gap: 10px;
    }
    /* Circle icon — consistent with diagnose and implemented card vocabulary.
       Color-invert on hover; card lift handles the interaction signal. */
    .cs-governance-card__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--brand-surface-tint);
      color: var(--brand-primary);
      flex-shrink: 0;
      transition: background 0.2s ease, color 0.2s ease;
    }
    .cs-governance-card__icon svg {
      width: 17px;
      height: 17px;
      display: block;
    }
    .cs-governance-card:hover .cs-governance-card__icon {
      background: var(--brand-primary);
      color: #fff;
    }
    .cs-governance-card__title {
      font-size: 15px;
      font-weight: 700;
      color: var(--navy);
      letter-spacing: -0.02em;
      margin: 0;
      line-height: 1.25;
    }
    .cs-governance-card__desc {
      font-size: 13px;
      line-height: 1.55;
      color: var(--slate-600);
      margin: 0;
    }
    @media (prefers-reduced-motion: reduce) {
      .cs-governance-card__icon { transition: none; }
    }

    /* === CASE STUDY INTRO ================================================= */
    .cs-catalog-intro { margin-bottom: 24px; }
    .cs-catalog-heading { margin-bottom: 16px; }

    /* === FILTER PILL ROW: 5 implementation-focus pills =================== */
    .cs-catalog-toolbar {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin: 0 0 28px;
    }
    .cs-catalog-toolbar__label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--slate-500);
    }
    .cs-filter-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .cs-filter-pill {
      min-height: 44px;
      padding: 9px 14px;
      border: 1px solid var(--slate-200);
      border-radius: 6px;
      background: #fff;
      color: var(--slate-700);
      cursor: pointer;
      font: inherit;
      font-size: 13px;
      font-weight: 600;
      transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, background-color 0.15s ease;
    }
    .cs-filter-pill:hover {
      border-color: var(--brand-primary-muted);
      color: var(--brand-primary);
    }
    .cs-filter-pill:focus-visible {
      outline: 2px solid var(--brand-primary);
      outline-offset: 2px;
    }
    .cs-filter-pill[aria-pressed="true"] {
      background: var(--brand-primary);
      border-color: var(--brand-primary);
      color: #fff;
      box-shadow: 0 10px 28px -18px rgba(29, 78, 216, 0.55);
    }
    .cs-results-status {
      margin: 2px 0 0;
      color: var(--slate-500);
      font-size: 13px;
      line-height: 1.5;
    }
    .cs-catalog-advanced {
      max-width: 100%;
    }
    .cs-catalog-advanced summary {
      cursor: pointer;
      color: var(--brand-primary);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.5;
      text-decoration: none;
    }
    .cs-catalog-advanced summary:hover { color: var(--brand-primary-hover); text-decoration: underline; }
    .cs-catalog-advanced__body {
      margin-top: 12px;
    }
    /* All chrome inherited from .hello-form-select (see
       hello_brand_tokens.css form primitive). Width matches a single
       .cs-pio-card: full width in the 1-col layout, half width (minus
       half the 24px gap) at the 2-col breakpoint. */
    .cs-catalog-select {
      max-width: 100%;
    }
    @media (min-width: 1100px) {
      .cs-catalog-select { max-width: calc(50% - 12px); }
    }

    /* === P/I/O CARDS: Problem / Implementation / Outcome ================= */
    .cs-pio-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 22px;
    }
    @media (min-width: 1100px) {
      .cs-pio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    }
    .cs-pio-card {
      gap: 16px;
      padding: 28px 28px 24px;
    }
    .cs-pio-card__fit {
      margin: 0;
      padding: 12px 14px;
      border-radius: 6px;
      background: var(--slate-50);
      border: 1px solid var(--slate-200);
      color: var(--slate-700);
      font-size: 13px;
      line-height: 1.55;
    }
    .cs-pio-card__fit strong {
      color: var(--navy);
      font-weight: 700;
    }
    .cs-pio-card__head { display: flex; flex-direction: column; gap: 4px; }
    .cs-pio-card__type {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--brand-primary);
      margin: 0;
    }
    .cs-pio-card__name {
      font-size: clamp(20px, 2.2vw, 24px);
      font-weight: var(--hello-section-heading-weight, 700);
      line-height: var(--hello-section-heading-line-height, 1.25);
      letter-spacing: var(--hello-section-heading-tracking, -0.025em);
      color: var(--hello-section-heading-ink, var(--navy));
      margin: 4px 0 0;
    }
    .cs-pio-card__specialty {
      font-size: 13px;
      font-weight: 500;
      color: var(--slate-600);
      margin: 0;
      line-height: 1.45;
    }
    .cs-pio-card__intro {
      font-size: 14px;
      line-height: 1.65;
      color: var(--slate-700);
      margin: 0;
    }
    /* === P/S/O Transformation Arc ======================================
       Three narrative beats with progressively heavier visual treatment.
       Problem (compressed tension, muted italic) to Hello deployed
       (structural hero, numbered manifest of the stack in brand-tint
       tiles) to Outcome (the payoff, larger navy body). Chevron
       connectors tie the arc together. The metrics band below closes
       the loop with hard proof. */
    .cs-pio-card__arc { display: flex; flex-direction: column; }

    .cs-pio-card__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin: 0 0 10px;
    }
    .cs-pio-card__eyebrow::before {
      content: "";
      display: inline-block;
      width: 3px;
      height: 12px;
      border-radius: 1px;
      background: currentColor;
    }
    .cs-pio-card__section--problem .cs-pio-card__eyebrow { color: #b91c1c; }
    .cs-pio-card__section--implementation .cs-pio-card__eyebrow { color: var(--brand-primary); }
    .cs-pio-card__section--outcome .cs-pio-card__eyebrow { color: var(--brand-primary); }

    .cs-pio-card__problem-copy {
      font-size: 14.5px;
      line-height: 1.6;
      color: var(--slate-600);
      margin: 0;
      font-style: italic;
      letter-spacing: -0.005em;
    }

    .cs-pio-card__connector {
      display: flex;
      align-items: center;
      padding: 8px 0;
    }
    .cs-pio-card__connector-line {
      flex: 1;
      height: 1px;
      background: var(--slate-100);
    }
    .cs-pio-card__connector-arrow {
      width: 16px;
      height: 16px;
      color: var(--slate-300);
      flex-shrink: 0;
      margin: 0 8px;
    }

    .cs-pio-card__manifest {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }
    .cs-pio-card__manifest li {
      display: flex;
      align-items: center;
      padding: 10px 12px;
      background: var(--brand-surface-tint);
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      color: var(--navy);
      line-height: 1.3;
      transition: background 0.2s ease;
    }
    .cs-pio-card:hover .cs-pio-card__manifest li { background: #e0ecfe; }

    .cs-pio-card__outcome-copy {
      font-size: 14.5px;
      line-height: 1.55;
      color: var(--navy);
      margin: 0;
      font-weight: 500;
      letter-spacing: -0.01em;
    }

    .cs-pio-card__metrics {
      display: flex;
      gap: 0;
      padding-top: 14px;
      border-top: 1px solid var(--slate-100);
    }
    .cs-pio-card__metric {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding-right: 16px;
      position: relative;
    }
    .cs-pio-card__metric:not(:last-child)::after {
      content: "";
      position: absolute;
      right: 0;
      top: 8%;
      bottom: 8%;
      width: 1px;
      background: var(--slate-100);
    }
    .cs-pio-card__metric:last-child {
      padding-right: 0;
      padding-left: 16px;
    }
    .cs-pio-card__metric-val {
      font-size: clamp(21px, 2.4vw, 28px);
      font-weight: 300;
      color: var(--brand-primary);
      letter-spacing: -0.04em;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    .cs-pio-card__metric-lbl {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--slate-500);
      line-height: 1.4;
    }
    .cs-pio-card__services {
      padding-top: 14px;
      border-top: 1px solid var(--slate-100);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .cs-pio-card__services-label {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--slate-500);
      margin: 0;
    }
    .cs-pio-card__services-chips {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .cs-pio-card__services-chips li {
      font-size: 11px;
      font-weight: 600;
      color: var(--slate-600);
      background: var(--slate-50);
      border: 1px solid var(--slate-200);
      padding: 5px 10px;
      border-radius: 6px;
      letter-spacing: 0.005em;
    }
    .cs-pio-card__cta {
      margin-top: auto;
      padding-top: 4px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13.5px;
      font-weight: 700;
      color: var(--brand-primary);
      text-decoration: none;
      letter-spacing: -0.005em;
    }
    .cs-pio-card__cta::after {
      content: "\2192";
      font-weight: 500;
      font-size: 16px;
      line-height: 1;
      transition: transform 0.25s ease;
    }
    .cs-pio-card__cta:hover { color: var(--brand-primary-hover, #2563eb); }
    .cs-pio-card__cta:hover::after { transform: translateX(4px); }
    @media (prefers-reduced-motion: reduce) { .cs-pio-card__cta::after { transition: none; } }

    /* === SECTION KICKER: small flanked uppercase label above section headings */
    .cs-section-kicker {
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      font-size: 11.5px;
      font-weight: 600;
      color: var(--brand-primary);
      margin: 0 0 10px;
    }
    .cs-section-kicker::before,
    .cs-section-kicker::after {
      content: "";
      display: inline-block;
      width: 24px;
      height: 1px;
      background: var(--brand-primary);
      opacity: 0.35;
      vertical-align: middle;
      margin: 0 10px;
      transform: translateY(-1px);
    }
    .cs-implemented-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
      margin-top: 32px;
    }
    @media (min-width: 720px) {
      .cs-implemented-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    }
    @media (min-width: 1040px) {
      .cs-implemented-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    }
    .cs-implemented-card {
      gap: 12px;
      padding: 24px 22px 20px;
    }
    /* Icon: circle badge, consistent with diagnose cards. Color-invert on
       hover; card lift from .hello-feature-card handles the interaction. */
    .cs-implemented-card__icon {
      width: 38px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: var(--brand-surface-tint, #eff6ff);
      color: var(--brand-primary);
      flex-shrink: 0;
      transition: background 0.2s ease, color 0.2s ease;
    }
    .cs-implemented-card__icon svg {
      width: 20px;
      height: 20px;
      display: block;
    }
    .cs-implemented-card:hover .cs-implemented-card__icon {
      background: var(--brand-primary);
      color: #fff;
    }
    .cs-implemented-card__title {
      font-size: 15px;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.02em;
      color: var(--navy);
      margin: 0;
    }
    .cs-implemented-card__body {
      font-size: 13px;
      line-height: 1.6;
      color: var(--slate-600);
      margin: 0;
    }
    @media (prefers-reduced-motion: reduce) {
      .cs-implemented-card__icon { transition: none; }
    }

    /* === WHICH OPERATING PROBLEM MATCHES YOUR PRACTICE? Self-diagnostic === */
    /* === MATCH MATRIX: problem to motion to proof to next step ============ */
    .cs-match-table-wrap {
      margin-top: 32px;
      overflow-x: auto;
      border: 1px solid var(--slate-200);
      border-radius: 12px;
      background: #fff;
    }
    .cs-match-table {
      width: 100%;
      min-width: 720px;
      border-collapse: collapse;
      text-align: left;
    }
    .cs-match-table th,
    .cs-match-table td {
      padding: 14px 18px;
      vertical-align: top;
      border-bottom: 1px solid var(--slate-100);
      font-size: 13.5px;
      line-height: 1.55;
    }
    .cs-match-table th {
      color: var(--slate-500);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      background: var(--slate-50);
    }
    .cs-match-table tbody tr:last-child td { border-bottom: none; }
    .cs-match-table strong {
      color: var(--navy);
      font-weight: 700;
    }
    .cs-match-table a {
      color: var(--brand-primary);
      font-weight: 700;
      text-decoration: none;
      white-space: nowrap;
    }
    .cs-match-table a:hover { color: var(--brand-primary-hover); text-decoration: underline; }

    /* === FINAL CTA: dark band with dual buttons ========================= */
    .cs-final-cta {
      background: linear-gradient(135deg, var(--navy, #0f172a) 0%, #1e293b 100%);
      color: #f1f5f9;
      position: relative;
      overflow: hidden;
      padding: 64px 16px 56px;
    }
    @media (min-width: 768px) {
      .cs-final-cta { padding: 88px 24px 72px; }
    }
    /* Center narrow heading + lede blocks (same issue as cs-mid-cta: prose max-width without horiz auto). */
    .hello-marketing-page .hello-marketing-band.cs-final-cta .hello-marketing-inner > .hello-section-heading {
      text-align: center;
      max-width: var(--hello-marketing-prose-max-width);
      margin-left: auto;
      margin-right: auto;
    }
    .hello-marketing-page .hello-marketing-band.cs-final-cta .hello-marketing-inner > .hello-section-lede {
      max-width: var(--hello-marketing-prose-max-width);
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }
    .cs-final-cta__buttons {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      margin-top: 28px;
    }
    .cs-final-cta__btn-secondary {
      background: transparent;
      color: #ffffff !important;
      border: 1px solid rgba(255, 255, 255, 0.55);
      font-weight: 600;
    }
    .cs-final-cta__btn-secondary:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: #ffffff;
    }