/* =====================================================================
   financeos.css — page-local component vocabulary for suite.jps-iq.com
   ---------------------------------------------------------------------
   Extends the group design system (styles.css). No new visual language:
   colours, type scale and spacing come from styles.css; this file only
   adds the structural components the FinanceOS pages need (layer stacks,
   process chains, triads, solution lists, diagnostic tables).

   Previously these rules were inlined per page. One shared file keeps the
   pages consistent and cacheable — and makes a component change one edit
   instead of ten.
   ===================================================================== */

/* Problem table */
    .problem-table { width: 100%; border-collapse: collapse; margin-top: 2rem; }
    .problem-table th { padding: 0.75rem 1rem; font-size: 0.8rem; font-weight: 700;
      letter-spacing: 0.06em; text-transform: uppercase; background: var(--c-bg-alt); }
    .problem-table th:first-child { color: var(--c-ink-3); text-align: left; }
    .problem-table th:last-child { color: var(--c-brand); text-align: left; }
    .problem-table td { padding: 0.75rem 1rem; border-top: 1px solid var(--c-line);
      font-size: var(--fs-sm); vertical-align: top; }
    .problem-table td:first-child { color: var(--c-ink-3); }
    .problem-table td:last-child { color: var(--c-ink); font-weight: 500; }

    /* Module grid */
    .module-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
      gap: 1rem; margin-top: 1.5rem;
    }
    .module-card {
      background: #fff; border: 1px solid var(--c-line);
      border-radius: 8px; padding: 1.25rem 1.25rem 1rem;
    }
    .module-card--core { border-color: var(--c-brand); background: var(--c-brand-50); }
    .module-card__tag {
      font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em;
      text-transform: uppercase; color: var(--c-brand);
      display: block; margin-bottom: 0.4rem;
    }
    .module-card__tag--enterprise { color: #0B7A56; }
    .module-card__tag--addon { color: var(--c-ink-3); }
    .module-card h4 { font-size: var(--fs-sm); font-weight: 600; margin: 0 0 0.4rem; color: var(--c-ink); }
    .module-card p { font-size: var(--fs-xs); color: var(--c-ink-3); margin: 0; line-height: 1.5; }

    /* Edition cards */
    .edition-grid { display: grid; gap: 1.5rem; margin-top: 2rem; }
    @media (min-width: 860px) { .edition-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
    .edition-card {
      border: 1.5px solid var(--c-line); border-radius: 12px;
      padding: 2rem; background: var(--c-bg);
    }
    .edition-card--lead { border-color: var(--c-brand); background: linear-gradient(135deg, #EAF3FA 0%, #fff 60%); }
    .edition-label {
      display: inline-block; font-size: 0.72rem; font-weight: 700;
      letter-spacing: 0.07em; text-transform: uppercase;
      padding: 0.2rem 0.65rem; border-radius: 4px; margin-bottom: 1rem;
    }
    .edition-label--pro { background: var(--c-brand-50); color: var(--c-brand); }
    .edition-label--ent { background: #D4EDE3; color: #0B7A56; }
    .edition-card h3 { font-size: 1.3rem; margin: 0 0 0.5rem; }
    .edition-card .edition-sub { color: var(--c-ink-3); font-size: var(--fs-sm); margin-bottom: 1.25rem; }
    .edition-card ul { list-style: none; padding: 0; margin: 0 0 1.5rem; }
    .edition-card ul li { font-size: var(--fs-sm); color: var(--c-ink-2);
      padding: 0.3rem 0 0.3rem 1.4rem; position: relative; border-top: 1px solid var(--c-line); }
    .edition-card ul li::before {
      content: "✓"; position: absolute; left: 0;
      color: var(--c-brand); font-weight: 700; font-size: 0.8rem;
    }

    /* Onboarding timeline */
    .onboarding-steps { display: grid; gap: 0.75rem; margin-top: 1.5rem; }
    @media (min-width: 700px) { .onboarding-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    .onboarding-step { background: var(--c-bg-alt); border-radius: 8px; padding: 1.25rem 1.25rem 1rem; }
    .onboarding-step__num { font-size: 0.72rem; font-weight: 700; color: var(--c-brand);
      letter-spacing: 0.07em; text-transform: uppercase; display: block; margin-bottom: 0.5rem; }
    .onboarding-step h4 { font-size: var(--fs-sm); font-weight: 600; margin: 0 0 0.3rem; }
    .onboarding-step p { font-size: var(--fs-xs); color: var(--c-ink-3); margin: 0; line-height: 1.5; }

    /* Security table */
    .security-table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; font-size: var(--fs-sm); }
    .security-table th { padding: 0.6rem 0.9rem; text-align: left; font-size: 0.75rem;
      font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
      background: var(--c-bg-deep); color: rgba(255,255,255,0.7); }
    .security-table td { padding: 0.65rem 0.9rem; border-top: 1px solid var(--c-line);
      vertical-align: top; }
    .security-table td:first-child { font-weight: 600; color: var(--c-ink); white-space: nowrap; }
    .security-table td:nth-child(2) { color: var(--c-ink-2); }
    .security-table td:last-child { color: var(--c-ink-3); font-size: var(--fs-xs); }

    /* Timeline */
    .beta-timeline { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }
    @media (min-width: 680px) { .beta-timeline { flex-direction: row; flex-wrap: wrap; } }
    .beta-step { display: flex; align-items: flex-start; gap: 0.75rem; flex: 1 1 160px; }
    .beta-step__dot {
      width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; margin-top: 0.1rem;
      background: var(--c-brand-50); border: 2px solid var(--c-brand);
      display: flex; align-items: center; justify-content: center;
      font-size: 0.7rem; font-weight: 700; color: var(--c-brand);
    }
    .beta-step--active .beta-step__dot { background: var(--c-brand); color: #fff; }
    .beta-step__text strong { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }
    .beta-step__text span { font-size: var(--fs-xs); color: var(--c-ink-3); }
    /* Dark section text fixes */
    .section--deep .feature-bullets li,
    .cta-final .feature-bullets li { color: rgba(255,255,255,0.85) !important; }
    .section--deep .feature-bullets li::before,
    .cta-final .feature-bullets li::before { background: rgba(255,255,255,0.6) !important; }
    .cta-final .beta-step__text strong { color: #fff !important; }
    .cta-final .beta-step__text span { color: rgba(255,255,255,0.65) !important; }
    .cta-final .beta-step__dot { border-color: rgba(255,255,255,0.5); color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.1); }
    .cta-final .beta-step--active .beta-step__dot { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }

    /* Flow diagram */
    .payment-flow {
      background: var(--c-bg-deep); border-radius: 12px; padding: 2rem;
      color: #fff; margin-top: 1.5rem;
    }
    .payment-flow-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.07em;
      text-transform: uppercase; color: #A6D6F0; margin-bottom: 1.25rem; }
    .payment-flow-steps { display: flex; flex-direction: column; gap: 0.6rem; }
    .pf-step { display: flex; align-items: flex-start; gap: 0.75rem; }
    .pf-step__n { width: 24px; height: 24px; border-radius: 50%; background: var(--c-brand);
      color: #fff; font-size: 0.7rem; font-weight: 700; display: flex; align-items: center;
      justify-content: center; flex-shrink: 0; margin-top: 0.1rem; }
    .pf-step p { font-size: var(--fs-sm); color: rgba(255,255,255,0.85); margin: 0; line-height: 1.5; }
    .pf-step strong { color: #fff; }

    /* Module card hover effect */
    .module-card {
      transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
      cursor: default;
    }
    .module-card:hover {
      box-shadow: 0 4px 20px rgba(26,119,179,0.13);
      border-color: var(--c-brand);
      transform: translateY(-2px);
    }
    .module-card__more {
      list-style: none; padding: 0; margin: 0;
      max-height: 0; overflow: hidden; opacity: 0;
      transition: max-height 0.32s ease, opacity 0.22s ease, margin-top 0.22s ease;
    }
    .module-card:hover .module-card__more {
      max-height: 320px; opacity: 1;
      border-top: 1px solid var(--c-line);
      margin-top: 0.75rem; padding-top: 0.55rem;
    }
    .module-card__more li {
      font-size: 0.71rem; color: var(--c-ink-3);
      padding: 0.17rem 0 0.17rem 1rem;
      position: relative; line-height: 1.4;
    }
    .module-card__more li::before {
      content: "→"; position: absolute; left: 0;
      color: var(--c-brand); font-size: 0.65rem; top: 0.22rem;
    }


    /* Positioning / Demarcation block */
    .positioning-block {
      display: grid; gap: 1.25rem; margin-top: 2.5rem;
    }
    @media (min-width: 860px) { .positioning-block { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
    .positioning-block__is,
    .positioning-block__isnot { border-radius: 10px; padding: 1.75rem; }
    .positioning-block__is { background: rgba(26,119,179,0.2); border: 1px solid rgba(26,119,179,0.4); }
    .positioning-block__isnot { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); }
    .positioning-block__label {
      display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em;
      text-transform: uppercase; margin-bottom: 1.1rem; padding-bottom: 0.6rem;
      border-bottom: 1px solid rgba(255,255,255,0.15);
    }
    .positioning-block__label--is { color: #6DCFB0; }
    .positioning-block__label--isnot { color: rgba(255,255,255,0.4); }
    .positioning-block__is ul,
    .positioning-block__isnot ul { list-style: none; padding: 0; margin: 0; }
    .positioning-block__is ul li,
    .positioning-block__isnot ul li {
      font-size: var(--fs-xs); padding: 0.4rem 0 0.4rem 1.4rem;
      position: relative; border-top: 1px solid rgba(255,255,255,0.06); line-height: 1.5;
    }
    .positioning-block__is ul li { color: rgba(255,255,255,0.88); }
    .positioning-block__isnot ul li { color: rgba(255,255,255,0.5); }
    .positioning-block__is ul li::before { content: "✓"; position: absolute; left: 0;
      color: #6DCFB0; font-weight: 700; font-size: 0.75rem; top: 0.45rem; }
    .positioning-block__isnot ul li::before { content: "✕"; position: absolute; left: 0;
      color: rgba(255,120,120,0.6); font-size: 0.7rem; top: 0.45rem; }
    .positioning-block__is ul li strong,
    .positioning-block__isnot ul li strong { color: #fff; }

    /* Architecture diagram */
    .positioning-arch {
      margin-top: 2.5rem; background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 2rem;
    }
    .positioning-arch__label {
      display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em;
      text-transform: uppercase; color: #A6D6F0; margin-bottom: 1.5rem;
    }
    .positioning-arch__flow {
      display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
      margin-bottom: 1.75rem;
    }
    @media (min-width: 720px) {
      .positioning-arch__flow { flex-direction: row; justify-content: center; }
    }
    .positioning-arch__node {
      border-radius: 8px; padding: 1rem 1.5rem; text-align: center; min-width: 180px;
      display: flex; flex-direction: column; gap: 0.25rem;
    }
    .positioning-arch__node--erp { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); }
    .positioning-arch__node--fos { background: rgba(26,119,179,0.35); border: 2px solid var(--c-brand); }
    .positioning-arch__node--bank { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); }
    .positioning-arch__node strong { color: #fff; font-size: var(--fs-sm); }
    .positioning-arch__node span { color: rgba(255,255,255,0.65); font-size: var(--fs-xs); }
    .positioning-arch__node--fos span { color: rgba(255,255,255,0.85); }
    .positioning-arch__sub { font-size: 0.68rem !important; font-style: italic; }
    .positioning-arch__arrow { color: #A6D6F0; font-size: 0.8rem; font-weight: 600;
      padding: 0.25rem 0.5rem; white-space: nowrap; }
    .positioning-arch__output {
      display: grid; gap: 0.75rem; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.25rem;
    }
    @media (min-width: 600px) { .positioning-arch__output { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    .positioning-arch__output-item { text-align: center; }
    .positioning-arch__output-item strong { display: block; color: #fff; font-size: var(--fs-xs); margin-bottom: 0.2rem; }
    .positioning-arch__output-item span { color: rgba(255,255,255,0.5); font-size: 0.68rem; }
    /* Differentiator section */
    .diff-grid { display: flex; flex-direction: column; gap: 2rem; margin-top: 2.5rem; }
    .diff-card {
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
      border-radius: 12px; padding: 2rem;
    }
    .diff-card__head { display: flex; gap: 1.25rem; align-items: flex-start; margin-bottom: 1rem; }
    .diff-card__icon {
      background: var(--c-brand); color: #fff; font-size: 0.7rem; font-weight: 800;
      letter-spacing: 0.08em; padding: 0.4rem 0.6rem; border-radius: 6px;
      flex-shrink: 0; margin-top: 0.2rem;
    }
    .diff-card__super { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em;
      text-transform: uppercase; color: #A6D6F0; margin-bottom: 0.4rem; }
    .diff-card h3 { font-size: 1.1rem; color: #fff; margin: 0; line-height: 1.35; }
    .diff-card > p { color: rgba(255,255,255,0.8); font-size: var(--fs-sm); line-height: 1.7; margin-bottom: 1.5rem; }
    .diff-compare { display: grid; gap: 1rem; }
    @media (min-width: 700px) { .diff-compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
    .diff-compare__col { border-radius: 8px; padding: 1.25rem; }
    .diff-compare__col--before { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
    .diff-compare__col--after { background: rgba(26,119,179,0.25); border: 1px solid rgba(26,119,179,0.5); }
    .diff-compare__label { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em;
      text-transform: uppercase; margin-bottom: 0.75rem; }
    .diff-compare__col--before .diff-compare__label { color: rgba(255,255,255,0.4); }
    .diff-compare__col--after .diff-compare__label { color: #A6D6F0; }
    .diff-compare__col ul { list-style: none; padding: 0; margin: 0; }
    .diff-compare__col ul li { font-size: var(--fs-xs); padding: 0.25rem 0 0.25rem 1.1rem;
      position: relative; line-height: 1.4; border-top: 1px solid rgba(255,255,255,0.06); }
    .diff-compare__col--before ul li { color: rgba(255,255,255,0.5); }
    .diff-compare__col--before ul li::before { content: "✕"; position: absolute; left: 0;
      color: rgba(255,100,100,0.7); font-size: 0.65rem; top: 0.3rem; }
    .diff-compare__col--after ul li { color: rgba(255,255,255,0.9); }
    .diff-compare__col--after ul li::before { content: "✓"; position: absolute; left: 0;
      color: #A6D6F0; font-weight: 700; font-size: 0.65rem; top: 0.3rem; }
    /* Diff table */
    .diff-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
    .diff-table th { padding: 0.6rem 0.9rem; text-align: left; font-size: 0.7rem; font-weight: 700;
      letter-spacing: 0.06em; text-transform: uppercase; background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.7); }
    .diff-table td { padding: 0.6rem 0.9rem; border-top: 1px solid rgba(255,255,255,0.08);
      vertical-align: middle; color: rgba(255,255,255,0.75); }
    .diff-table td:first-child { font-weight: 600; color: #fff; }
    .diff-table__bad { color: rgba(255,120,120,0.85) !important; }
    .diff-table__warn { color: rgba(255,200,80,0.85) !important; }
    .diff-table__good { color: rgba(100,220,160,0.95) !important; font-weight: 600 !important; }

/* ---------------------------------------------------------------
       FinanceOS 2026-08-27 · product-DNA + claim-discipline rework
       (page-local only — shared tokens and components untouched)
       --------------------------------------------------------------- */

    /* Maturity / product-status labels ------------------------------ */
    .mat {
      display: inline-flex; align-items: center; gap: 0.35rem;
      font-size: 0.66rem; font-weight: 800; letter-spacing: 0.09em;
      text-transform: uppercase; padding: 0.24rem 0.55rem;
      border-radius: 4px; border: 1px solid transparent;
      margin-bottom: 0.75rem; max-width: 100%;
    }
    .mat::before {
      content: ""; width: 6px; height: 6px; border-radius: 50%;
      background: currentColor; flex-shrink: 0;
    }
    .mat--verified { background: #D9EFE5; border-color: #9BD3BC; color: #0B6B4F; }
    .mat--pilot    { background: #FDF0D8; border-color: #EFCE91; color: #8A5A08; }
    .mat--dev      { background: var(--c-brand-50); border-color: #A9CFE7; color: #14608F; }
    .mat--roadmap  { background: #ECEFF2; border-color: #CFD6DD; color: #55606B; }
    .mat--inline {
      margin: 0 0 0 0.4rem; font-size: 0.6rem; padding: 0.14rem 0.4rem;
      vertical-align: 0.08em; white-space: nowrap;
    }
    .section--deep .mat--verified,
    .cta-final .mat--verified { background: rgba(109,207,176,0.16); border-color: rgba(109,207,176,0.5); color: #8FE0C4; }
    .section--deep .mat--roadmap { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.7); }
    .section--deep .mat--dev { background: rgba(166,214,240,0.14); border-color: rgba(166,214,240,0.4); color: #A6D6F0; }
    .section--deep .mat--pilot { background: rgba(239,206,145,0.14); border-color: rgba(239,206,145,0.45); color: #EFCE91; }

    .mat-legend { display: grid; gap: 1rem; margin-top: 2rem; }
    @media (min-width: 700px)  { .mat-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (min-width: 1120px) { .mat-legend { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    .mat-legend__item {
      background: #fff; border: 1px solid var(--c-line); border-radius: 10px;
      padding: 1.25rem;
    }
    .mat-legend__item p { margin: 0; font-size: var(--fs-xs); color: var(--c-ink-3); line-height: 1.6; }

    /* Global pre-release status strip under the hero ----------------- */
    .status-strip {
      margin-top: 2.5rem; padding: 1.1rem 1.35rem;
      background: var(--c-bg-alt); border: 1px solid var(--c-line);
      border-left: 3px solid var(--c-brand); border-radius: 8px;
      font-size: var(--fs-sm); color: var(--c-ink-2); line-height: 1.65;
      max-width: 90ch;
    }
    .status-strip strong { color: var(--c-ink); }

    .status-note {
      margin-top: 2.5rem; padding: 1.75rem;
      background: var(--c-bg-deep); border-radius: 12px; color: rgba(255,255,255,0.82);
    }
    .status-note h3 { color: #fff; font-size: var(--fs-md); margin: 0 0 0.75rem; }
    .status-note p { font-size: var(--fs-sm); line-height: 1.7; margin: 0 0 0.85rem; max-width: 82ch; }
    .status-note p:last-child { margin-bottom: 0; }
    .status-note strong { color: #fff; }

    /* Use-case cards ------------------------------------------------ */
    .usecase-grid {
      display: grid; gap: 1.25rem; margin-top: 2rem;
      grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    }
    .usecase {
      background: #fff; border: 1px solid var(--c-line); border-radius: 12px;
      padding: 1.5rem 1.5rem 1.35rem; display: flex; flex-direction: column;
      transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }
    .usecase:hover { border-color: var(--c-brand-100); box-shadow: 0 10px 26px -18px rgba(11,27,43,0.24); transform: translateY(-2px); }
    .usecase h3 { font-size: 1.1rem; margin: 0 0 0.6rem; color: var(--c-ink); }
    .usecase p { font-size: var(--fs-sm); color: var(--c-ink-2); line-height: 1.65; margin: 0 0 0.75rem; }
    .usecase__note {
      font-size: var(--fs-xs) !important; color: var(--c-ink-3) !important;
      border-top: 1px solid var(--c-line); padding-top: 0.75rem; margin-top: auto !important;
    }
    .usecase__link { font-size: var(--fs-xs); font-weight: 700; color: var(--c-brand); margin-top: 0.85rem; }

    /* Seven-pillar grid --------------------------------------------- */
    .pillar-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
      gap: 1.25rem; margin-top: 2rem;
    }

    /* Layer stack (dark) -------------------------------------------- */
    .layer-stack { margin-top: 2rem; display: flex; flex-direction: column; align-items: stretch; }
    .layer {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.13);
      border-radius: 12px; padding: 1.25rem 1.5rem;
      display: flex; flex-direction: column; gap: 0.3rem;
    }
    .layer--core { background: rgba(26,119,179,0.32); border: 2px solid var(--c-brand); }
    .layer__tag {
      font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em;
      text-transform: uppercase; color: #A6D6F0;
    }
    .layer__title { color: #fff; font-size: var(--fs-sm); line-height: 1.45; }
    .layer__meta { color: rgba(255,255,255,0.6); font-size: var(--fs-xs); line-height: 1.5; }
    .layer-arrow { text-align: center; color: #A6D6F0; font-size: 1rem; padding: 0.35rem 0; line-height: 1; }

    /* Canonical / security tables ----------------------------------- */
    .canon-label {
      display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
      text-transform: uppercase; color: #A6D6F0; margin-bottom: 0.9rem;
    }
    .canon-label--ink { color: var(--c-ink-3); }
    .canon-wrap { margin-top: 2rem; }

    /* Provider adapters --------------------------------------------- */
    .adapters { margin-top: 2.5rem; }
    .adapter-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
    @media (min-width: 780px) { .adapter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    .adapter {
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
      border-radius: 10px; padding: 1.25rem;
      display: flex; flex-direction: column; gap: 0.4rem;
    }
    .adapter--now { background: rgba(26,119,179,0.22); border-color: rgba(26,119,179,0.55); }
    .adapter strong { color: #fff; font-size: var(--fs-sm); }
    .adapter span { color: rgba(255,255,255,0.68); font-size: var(--fs-xs); line-height: 1.55; }
    /* light-section variant */
    .adapter-grid--light .adapter { background: #fff; border-color: var(--c-line); }
    .adapter-grid--light .adapter--now { background: var(--c-brand-50); border-color: #A9CFE7; }
    .adapter-grid--light .adapter strong { color: var(--c-ink); }
    .adapter-grid--light .adapter span { color: var(--c-ink-3); }

    /* Fine print ---------------------------------------------------- */
    .fine-print {
      margin-top: 1.5rem; font-size: var(--fs-xs); line-height: 1.65;
      color: rgba(255,255,255,0.62); max-width: 78ch;
    }
    .fine-print--ink { color: var(--c-ink-3); }
    .fine-print em { color: rgba(255,255,255,0.8); font-style: italic; }
    .fine-print--ink em { color: var(--c-ink-2); }

    /* Product-world routing cards ----------------------------------- */
    .module-card--link { display: flex; flex-direction: column; text-decoration: none; }
    .module-card--link:hover { border-color: var(--c-brand); box-shadow: 0 4px 20px rgba(26,119,179,0.13); transform: translateY(-2px); }
    .module-card__go { font-size: var(--fs-xs); font-weight: 700; color: var(--c-brand); margin-top: 0.75rem; }
    .module-card--soon { background: var(--c-bg-alt); border-style: dashed; }
    .module-card h4 { margin-top: 0; }

    /* Horizontally scrollable wrappers (wide tables) ---------------- */
    .scroll-x { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
    .scroll-x > table { min-width: 640px; }

    /* Hero trust band ---------------------------------------------- */
    .hero .trust-claims { justify-content: flex-start; }

    /* --- Hero claim line ------------------------------------------- */
    .hero-claim {
      font-size: clamp(1.15rem, 1.1vw + 0.8rem, 1.55rem);
      font-weight: 700; letter-spacing: -0.01em; color: var(--c-brand);
      margin: 0 0 1.1rem;
    }

    /* --- "Who knows finance?" grid --------------------------------- */
    .knows-grid {
      display: grid; gap: 0.85rem; margin-top: 2rem;
      grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    }
    .knows {
      background: #fff; border: 1px solid var(--c-line); border-radius: 10px;
      padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 0.2rem;
    }
    .knows strong { color: var(--c-ink); font-size: var(--fs-sm); }
    .knows span { color: var(--c-ink-3); font-size: var(--fs-sm); }
    .knows--q { background: var(--c-bg-deep); border-color: var(--c-bg-deep); }
    .knows--q strong { color: #fff; }
    .knows--q span { color: rgba(255,255,255,0.75); }

    /* --- See / Control / Act triad --------------------------------- */
    .triad { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
    @media (min-width: 900px) { .triad { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    .triad__col {
      background: #fff; border: 1px solid var(--c-line); border-radius: 16px;
      padding: 1.75rem 1.6rem 1.5rem; display: flex; flex-direction: column;
    }
    .triad__col--mid { border-color: var(--c-brand-100); box-shadow: 0 12px 34px -22px rgba(11,27,43,0.22); }
    .triad__num {
      font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em;
      color: var(--c-brand); margin-bottom: 0.6rem;
    }
    .triad__col h3 { font-size: 1.5rem; margin: 0 0 0.35rem; letter-spacing: -0.02em; }
    .triad__claim { font-weight: 700; color: var(--c-ink); font-size: var(--fs-sm); margin: 0 0 0.6rem !important; }
    .triad__col > p { font-size: var(--fs-sm); color: var(--c-ink-3); line-height: 1.6; margin: 0 0 1rem; }
    .triad__col ul { list-style: none; padding: 0; margin: 0 0 1rem; }
    .triad__col ul li {
      font-size: var(--fs-xs); color: var(--c-ink-2); padding: 0.3rem 0 0.3rem 1rem;
      border-top: 1px solid var(--c-line); position: relative; line-height: 1.45;
    }
    .triad__col ul li::before {
      content: ""; position: absolute; left: 0; top: 0.85em;
      width: 5px; height: 5px; border-radius: 50%; background: var(--c-brand-100);
    }
    .triad__foot {
      margin-top: auto; font-size: var(--fs-xs); font-weight: 700;
      letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-brand);
    }
    .triad__closing {
      margin-top: 2.5rem; text-align: center; font-size: clamp(1.1rem, 1vw + 0.7rem, 1.4rem);
      font-weight: 700; color: var(--c-ink); letter-spacing: -0.01em;
    }

    /* --- Solution areas ------------------------------------------- */
    /* --- Solution areas: a routing index, not seven cards -------------
       This section is a routing layer — seven doors, one line each. It was
       built as seven separate full-width cards, and that was wrong twice
       over: each card was mostly empty space with the link stranded at the
       bottom, and seven equal boxes read as a feature grid, which is the
       one thing this section must not look like.

       Now: one bordered list with divided rows. The eye runs down the
       titles, the problem sentence sits directly under its title, and the
       destination label is on the same line, right-aligned. The whole row
       is the link, so the target is a row rather than eight words. */
    .sol-list {
      margin-top: 2.5rem;
      max-width: 960px;
      background: #fff;
      border: 1px solid var(--c-line);
      border-radius: 14px;
      overflow: hidden;
    }
    .sol {
      display: grid;
      grid-template-columns: 2.25rem minmax(0, 1fr) auto;
      column-gap: 1rem;
      row-gap: 0.2rem;
      align-items: center;
      padding: 0.95rem 1.3rem;
      border-top: 1px solid var(--c-line);
      text-decoration: none;
      color: inherit;
      scroll-margin-top: 140px;
      transition: background 0.18s ease;
    }
    .sol:first-child { border-top: 0; }
    .sol:hover, .sol:focus-visible { background: var(--c-bg-alt); outline: none; }
    .sol:focus-visible { box-shadow: inset 3px 0 0 var(--c-brand); }
    .sol__num {
      grid-column: 1; grid-row: span 2;
      font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em;
      color: var(--c-brand); font-variant-numeric: tabular-nums;
      align-self: center;
    }
    .sol h3 {
      grid-column: 2; grid-row: 1;
      font-size: 1.02rem; margin: 0; letter-spacing: -0.01em;
      color: var(--c-ink); line-height: 1.3;
    }
    .sol:hover h3 { color: var(--c-brand); }
    .sol__claim {
      grid-column: 2; grid-row: 2;
      font-size: var(--fs-sm); color: var(--c-ink-3);
      margin: 0; line-height: 1.5; font-weight: 400;
    }
    .sol__go {
      grid-column: 3; grid-row: span 2;
      justify-self: end; align-self: center;
      display: inline-flex; align-items: center; gap: 0.4rem;
      font-size: var(--fs-xs); font-weight: 600; color: var(--c-ink-3);
      white-space: nowrap; padding-left: 1.5rem;
      transition: color 0.18s ease;
    }
    .sol:hover .sol__go, .sol:focus-visible .sol__go { color: var(--c-brand); }
    .sol__go span {
      transition: transform 0.18s ease;
      display: inline-block;
    }
    .sol:hover .sol__go span { transform: translateX(3px); }

    /* Below the point where title, sentence and destination stop fitting
       on one line, the destination moves under the text rather than
       squeezing the problem sentence into three words. */
    @media (max-width: 760px) {
      .sol {
        grid-template-columns: 2rem minmax(0, 1fr);
        padding: 1rem 1.1rem;
      }
      .sol__num { grid-row: span 3; align-self: start; padding-top: 0.15rem; }
      .sol__go {
        grid-column: 2; grid-row: 3;
        justify-self: start; padding-left: 0; margin-top: 0.35rem;
      }
    }

    /* --- Multi-* grid --------------------------------------------- */
    .multi-grid {
      display: grid; gap: 1.25rem; margin-top: 2.5rem;
      grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    }
    .multi {
      background: var(--c-bg-alt); border: 1px solid var(--c-line); border-radius: 12px;
      padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem;
    }
    .multi__label {
      font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--c-brand);
    }
    .multi strong { font-size: var(--fs-md); color: var(--c-ink); line-height: 1.35; }
    .multi p { font-size: var(--fs-xs); color: var(--c-ink-3); line-height: 1.6; margin: 0; }
    .multi .mat { margin: auto 0 0; }

    /* --- Architecture stack --------------------------------------- */
    .arch { margin-top: 2rem; display: flex; flex-direction: column; }
    .arch__layer {
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.13);
      border-radius: 12px; padding: 1.25rem 1.5rem;
    }
    .arch__layer--core { background: rgba(26,119,179,0.28); border: 2px solid var(--c-brand); }
    .arch__tag {
      display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em;
      text-transform: uppercase; color: #A6D6F0; margin-bottom: 0.75rem;
    }
    .arch__items { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.75rem; }
    .chip {
      display: inline-flex; align-items: baseline; gap: 0.35rem;
      background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16);
      border-radius: 6px; padding: 0.32rem 0.6rem;
      font-size: var(--fs-xs); color: #fff;
    }
    .chip em { font-style: normal; font-size: 0.62rem; letter-spacing: 0.06em;
      text-transform: uppercase; color: rgba(255,255,255,0.55); }
    .chip--muted { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.6); }
    .chip--core { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.3); }
    .arch__meta { font-size: var(--fs-xs); color: rgba(255,255,255,0.6); line-height: 1.5; }
    .arch__arrow { text-align: center; color: #A6D6F0; padding: 0.35rem 0; line-height: 1; }

    .canon-story {
      margin-top: 2.5rem; background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 1.75rem;
    }
    .canon-story h3 { color: #fff; font-size: 1.3rem; margin: 0 0 0.75rem; }
    .canon-story > p { color: rgba(255,255,255,0.78); font-size: var(--fs-sm); line-height: 1.7; margin: 0 0 1.5rem; max-width: 88ch; }
    .canon-story__grid { display: grid; gap: 1rem; }
    @media (min-width: 760px) { .canon-story__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    .canon-story__grid strong { display: block; color: #fff; font-size: var(--fs-sm); margin-bottom: 0.3rem; }
    .canon-story__grid span { color: rgba(255,255,255,0.65); font-size: var(--fs-xs); line-height: 1.55; }

    /* --- Process chains ------------------------------------------- */
    .chain {
      background: #fff; border: 1px solid var(--c-line); border-radius: 14px;
      padding: 1.5rem; margin-top: 1.5rem;
    }
    .chain__label {
      display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--c-ink-3); margin-bottom: 1.1rem;
    }
    .chain__steps {
      list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem;
      grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
    }
    .chain__steps li {
      display: flex; gap: 0.6rem; align-items: flex-start;
      background: var(--c-bg-alt); border-radius: 8px; padding: 0.7rem 0.8rem;
    }
    .chain__steps li > div { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
    .chain__steps strong { font-size: var(--fs-xs); color: var(--c-ink); line-height: 1.35; }
    .chain__steps .mat { margin: 0; }
    .chain__n {
      flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
      background: var(--c-brand); color: #fff; font-size: 0.62rem; font-weight: 700;
      display: inline-flex; align-items: center; justify-content: center; margin-top: 0.1rem;
    }

    /* --- CFO control block ---------------------------------------- */
    .cfo {
      margin-top: 2.5rem; background: var(--c-bg-deep); border-radius: 16px;
      padding: 1.75rem; color: #fff;
    }
    .cfo__head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; margin-bottom: 1.25rem; }
    .cfo__label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #A6D6F0; }
    .cfo__disclaimer { font-size: var(--fs-xs); color: rgba(255,255,255,0.5); }
    .cfo__rows { display: grid; gap: 0.6rem; }
    .cfo__row {
      display: grid; gap: 0.5rem; align-items: center;
      background: rgba(255,255,255,0.06); border-radius: 10px; padding: 0.9rem 1.1rem;
    }
    @media (min-width: 760px) { .cfo__row { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); } }
    .cfo__fig strong { display: block; font-size: clamp(1.3rem, 1.4vw + 0.6rem, 1.75rem); color: #fff; letter-spacing: -0.02em; }
    .cfo__fig span { font-size: var(--fs-xs); color: rgba(255,255,255,0.6); }
    .cfo__act span { font-size: var(--fs-sm); color: rgba(255,255,255,0.85); }
    .cfo__act span::before { content: "→ "; color: #A6D6F0; }
    .cfo__foot {
      margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.14);
      font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em;
      text-transform: uppercase; color: #A6D6F0; text-align: center;
    }
    .cfo-groups {
      display: grid; gap: 0.85rem; margin-top: 1.5rem;
      grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    }
    .cfo-groups > div {
      background: var(--c-bg-alt); border: 1px solid var(--c-line); border-radius: 10px;
      padding: 0.9rem 1.1rem;
    }
    .cfo-groups strong { display: block; font-size: var(--fs-sm); color: var(--c-ink); margin-bottom: 0.2rem; }
    .cfo-groups span { font-size: var(--fs-xs); color: var(--c-ink-3); }

    /* --- Governance grid ------------------------------------------ */
    .gov-grid {
      display: grid; gap: 1rem; margin-top: 2.5rem;
      grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    }
    .gov {
      background: #fff; border: 1px solid var(--c-line); border-radius: 10px;
      padding: 1.15rem 1.25rem; display: flex; flex-direction: column; gap: 0.15rem;
    }
    .gov strong { font-size: var(--fs-sm); color: var(--c-ink); }
    .gov > span:last-child { font-size: var(--fs-xs); color: var(--c-ink-3); line-height: 1.55; }

/* ---------------------------------------------------------------------
   Header overflow below the drawer breakpoint
   ---------------------------------------------------------------------
   Pre-existing group-wide defect, not introduced here: on narrow
   viewports .nav-actions (language switch + primary CTA + burger) is
   wider than the container, so the whole document scrolls sideways.
   Below 1024px the mobile drawer already carries the same primary CTA,
   so hiding the header copy of it removes the overflow without changing
   the navigation design or losing the call to action.

   This belongs in the shared styles.css for every business unit; it is
   applied here so the FinanceOS pages do not ship a horizontal scroll.
   --------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .nav-actions > .btn--primary { display: none; }
}

/* ---------------------------------------------------------------------
   Capability list inside a light why-card
   ---------------------------------------------------------------------
   .feature-bullets is designed for the dark .feature-block and sets
   near-white text — inside a white .why-card that renders as bullets
   with invisible labels. This is the light-surface equivalent, matching
   the .triad__col list treatment so the two read as one family.
   --------------------------------------------------------------------- */
.card-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.card-list li {
  position: relative;
  font-size: var(--fs-xs);
  color: var(--c-ink-2);
  line-height: 1.5;
  padding: 0.35rem 0 0.35rem 1rem;
  border-top: 1px solid var(--c-line);
}
.card-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.95em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-brand-100);
}

/* =====================================================================
   Lead form
   ---------------------------------------------------------------------
   Taken verbatim from the group's own lead-form component (as used by the
   NetSuite business unit) so that a FinanceOS form looks and behaves like
   every other JPS-iQ form. The component is designed for a dark surface,
   which is why every contact block on this host is a .section--deep.
   Only the two-column wrapper below is new, and it is layout only.
   ===================================================================== */
.contact-grid { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s-9); }
}
.contact-points { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
.contact-points li {
  position: relative; padding-left: 1.75rem;
  color: rgba(255,255,255,0.85); font-size: var(--fs-base); line-height: 1.55;
}
.contact-points li::before {
  content: ""; position: absolute; left: 0; top: 0.55rem;
  width: 0.75rem; height: 0.75rem; border-radius: 2px;
  background: var(--c-brand); box-shadow: 0 0 0 3px rgba(26,119,179,0.25);
}
.contact-points strong { display: block; color: #fff; margin-bottom: 0.15rem; }

.lead-form {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: var(--s-6);
  display: grid;
  gap: var(--s-4);
}
@media (min-width: 768px) { .lead-form { padding: var(--s-7); } }
.lead-form__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@media (min-width: 640px) { .lead-form__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.lead-form__field { display: flex; flex-direction: column; gap: 0.4rem; }
.lead-form__field label {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.7);
}
.lead-form__opt {
  font-weight: 500; text-transform: none; letter-spacing: 0;
  color: rgba(255,255,255,0.45); margin-left: 0.35rem;
}
.lead-form__honeypot {
  position: absolute !important; left: -10000px !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important;
}
.lead-form__field--full { grid-column: 1 / -1; }
.lead-form__field input,
.lead-form__field select,
.lead-form__field textarea {
  appearance: none; -webkit-appearance: none;
  width: 100%; padding: 0.8rem 0.9rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-sm);
  color: #fff; font: inherit; font-size: var(--fs-base);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.lead-form__field textarea { resize: vertical; min-height: 3.5rem; }
.lead-form__field input::placeholder,
.lead-form__field textarea::placeholder { color: rgba(255,255,255,0.45); }
.lead-form__field select {
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.7) 50%),
                    linear-gradient(135deg, rgba(255,255,255,0.7) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}
.lead-form__field select option { color: var(--c-ink); background: #fff; }
.lead-form__field input:focus,
.lead-form__field select:focus,
.lead-form__field textarea:focus {
  outline: none; border-color: var(--c-brand); background: rgba(26,119,179,0.12);
}
/* Error marking only after a user interaction — :user-invalid, not
   :invalid:not(:placeholder-shown), which marked every empty required
   field red before the user had done anything. */
.lead-form__field input:user-invalid:not(:placeholder-shown),
.lead-form__field select:user-invalid:not(:placeholder-shown),
.lead-form__field textarea:user-invalid:not(:placeholder-shown) { border-color: #E0807A; }
.lead-form__consent {
  display: flex; align-items: flex-start; gap: 0.7rem;
  font-size: var(--fs-sm); color: rgba(255,255,255,0.78); line-height: 1.5;
}
.lead-form__consent input[type="checkbox"] {
  margin-top: 0.25rem; width: 1.05rem; height: 1.05rem;
  accent-color: var(--c-brand); flex-shrink: 0;
}
.lead-form__consent a { color: #A6D6F0; border-bottom: 1px dotted rgba(166,214,240,0.5); }
.lead-form__consent a:hover { color: #fff; border-color: #fff; }
.lead-form__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-4); margin-top: var(--s-2);
}
.lead-form__notice {
  font-size: var(--fs-xs); color: rgba(255,255,255,0.55);
  max-width: 36ch; line-height: 1.45;
}
.lead-form__status {
  margin-top: var(--s-3); font-size: var(--fs-sm);
  color: rgba(255,255,255,0.85); line-height: 1.55;
}
.lead-form__status:empty { display: none; }
.lead-form.is-sent .lead-form__row,
.lead-form.is-sent .lead-form__consent,
.lead-form.is-sent .lead-form__actions { display: none; }
.lead-form.is-sent .lead-form__status {
  padding: var(--s-5); border: 1px solid rgba(166,214,240,0.35);
  background: rgba(26,119,179,0.12); border-radius: var(--radius-sm); color: #fff;
}

/* ---------------------------------------------------------------------
   Grid tracks must not be sized by a select's widest option
   ---------------------------------------------------------------------
   A <select> reports its widest option as its min-content width, so an
   auto-sized grid track containing "DACH (Germany, Austria, Switzerland)"
   grows past the viewport and the whole page scrolls sideways on a phone.
   minmax(0, …) plus min-width:0 makes the tracks honour the container
   instead of the content. Same defect exists in the shared form component
   for the other business units.
   --------------------------------------------------------------------- */
.contact-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}
.lead-form__row { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .lead-form__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.lead-form__field { min-width: 0; }
.lead-form__field select,
.lead-form__field input,
.lead-form__field textarea { max-width: 100%; }
.lead-form { grid-template-columns: minmax(0, 1fr); }

/* ---------------------------------------------------------------------
   Long labels and long German compounds
   ---------------------------------------------------------------------
   Two more min-content traps on narrow viewports: a button label that
   cannot wrap ("Discuss your finance operations architecture") sizes the
   hero column, and a long German compound sizes a .pillars column at
   tablet width. Both are content-independent fixes.
   --------------------------------------------------------------------- */
.hero-grid > * { min-width: 0; }
.pillars { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pillars.pillars--4up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .pillars.pillars--4up { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pillar h3, .pillar p, .why-card h3, .multi strong, .knows strong, .gov strong,
.usecase h3, .sol h3, .triad__col h3 { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
@media (max-width: 640px) {
  .hero-actions .btn,
  .cta-final-actions .btn,
  .lead-form__actions .btn { white-space: normal; text-align: center; }
}

/* ---------------------------------------------------------------------
   Hero visual — architecture silhouette (diagram, type C)
   ---------------------------------------------------------------------
   The homepage hero panel used to repeat the lead paragraph as a
   pull-quote: the same message twice, and a lot of empty gradient in the
   most valuable space on the site. The most useful thing this panel can
   do is answer "where does FinanceOS sit" before the visitor scrolls, so
   it now carries a three-band silhouette of the same layer stack that
   section 03 explains in full — same visual language, no new component
   family, and titled as a diagram so it cannot read as a product
   surface. The solution and platform pages keep their pull-quote: there
   the panel is not competing with an unanswered question.
   --------------------------------------------------------------------- */
.hv-stack { display: flex; flex-direction: column; gap: 0.5rem; margin: 1.15rem 0; }
.hv-layer {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  display: flex; flex-direction: column; gap: 0.12rem;
}
.hv-layer b { font-size: var(--fs-sm); color: #fff; font-weight: 600; line-height: 1.3; }
.hv-layer span { font-size: var(--fs-xs); color: rgba(255,255,255,0.72); line-height: 1.45; }
/* The control layer is the subject of the page, so it is the one band
   that inverts — it reads as "this is the part that is new". */
.hv-layer--core { background: rgba(255,255,255,0.94); border-color: #fff; }
.hv-layer--core b { color: #0B1B2B; }
.hv-layer--core span { color: #2A3B4D; }

/* ---------------------------------------------------------------------
   Process chain — a deliberate wrap
   ---------------------------------------------------------------------
   auto-fit put the eight steps into 5 + 3, which reads as a wrapped list
   rather than a chain. The step count now decides the column count, so
   eight steps break 4 + 4 and six break 3 + 3.
   --------------------------------------------------------------------- */
.chain__steps { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) {
  .chain__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .chain__steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chain__steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------
   Smallest phones and long German compounds
   ---------------------------------------------------------------------
   Two failures that only appear below 360px, which the first sweep did
   not cover: an auto-fit floor of 300px cannot shrink into the 272px a
   320px viewport leaves, so the grid pushed the document sideways — every
   floor is now min(Npx, 100%). And a long German compound in a heading
   had nothing to break on. Neither changes anything above 360px.
   --------------------------------------------------------------------- */
.section h1, .section h2, .section h3, .section h4,
.section p, .section li, .hero h1, .hero p,
.eyebrow, .lead, .sol__claim, .knows strong, .knows span {
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------
   Horizontal scrollers need to look scrollable
   ---------------------------------------------------------------------
   .scroll-x works — the document does not move — but on a phone the
   difference table is simply cut off at the viewport edge with no hint
   that it can be swiped, which reads as a broken layout rather than a
   scroller.

   A gradient fade was tried first and thrown out: with
   background-attachment: local the fade sizes to the scrolled content
   rather than the visible box, on the dark section it would be navy over
   navy anyway, and it is precisely the kind of declaration that renders
   differently in Safari. One honest line of text is more reliable than a
   clever gradient, so that is what ships.
   --------------------------------------------------------------------- */
.scroll-x { scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.scroll-hint {
  display: none;
  margin: 0.7rem 0 0;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.65);
}
.section:not(.section--deep) .scroll-hint { color: var(--c-ink-3); }
@media (max-width: 719px) {
  .scroll-hint { display: block; }
}

/* ---------------------------------------------------------------------
   Section heads must not be sized by their longest word
   ---------------------------------------------------------------------
   .section-head declares a single free-space column track, and a bare
   fr track has an automatic minimum of min-content — so the track can
   never be narrower than the widest word in it. A German compound like "zusammengehalten" therefore made
   the whole heading block 332px wide inside a 272px container, and the
   page scrolled sideways on a 320px phone. overflow-wrap does not help:
   it breaks the visual line but does not reduce the min-content
   contribution. minmax(0, 1fr) does.

   This is the third instance of the same root cause in this codebase (a
   select's widest option, a .pillars floor, and now this), and all three
   are in shared components — the fix belongs in styles.css for every
   business unit. Applied here so the FinanceOS pages do not ship it.
   --------------------------------------------------------------------- */
.section-head { grid-template-columns: minmax(0, 1fr); }
.hero-grid > *, .contact-grid > *, .why-grid > *, .cards > * { min-width: 0; }

/* ---------------------------------------------------------------------
   Row discipline: the column count has to divide the item count
   ---------------------------------------------------------------------
   Every card grid here was declared with an auto-fit track floor.
   That derives the column count from the available width and knows
   nothing about how many items it has to place. In the 1344px content
   column of a 1440px desktop a 220px floor yields five columns — so a
   six-card block renders as five cards and then the sixth alone on its
   own line with four empty cells beside it. The same arithmetic puts a
   lone card under a row of three in the four-item grids between 900 and
   1280px, and under a row of two in the three-item grids on a tablet.

   Nothing chose any of that. It is the width arithmetic showing through,
   and it reads as a broken layout because that is what a card stranded
   beside four empty cells looks like.

   The item count is known when the page is generated, so the build
   writes it into the class attribute (rowfit.py) and each count gets a
   ladder of column counts that divide it:

     n=3   1 → 3                    (never 2 + 1)
     n=4   1 → 2 → 4                (2x2 in the middle, not 3 + 1)
     n=5   1 → 3 → 5                (3 + 2 has a trailing gap, no orphan)
     n=6   1 → 2 → 3                (2x2x2, then 3 + 3 — never 5 + 1)

   Declared last in the file on purpose: these are single-class
   selectors, exactly as specific as the component rules they replace, so
   source order is what settles it.
   --------------------------------------------------------------------- */
.rowfit--n3, .rowfit--n4, .rowfit--n5, .rowfit--n6 {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 620px) {
  .rowfit--n4, .rowfit--n6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .rowfit--n3, .rowfit--n5, .rowfit--n6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1120px) {
  .rowfit--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1300px) {
  .rowfit--n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------
   Headings should not end on a single hanging word
   ---------------------------------------------------------------------
   "Jede Bewegung hinterlässt eine / Spur." and "Different systems. One
   finance / language." break with one short word alone on the last
   line, because the browser fills each line greedily and stops. It is
   the smallest of the faults on this list and the most visible, since it
   happens in the largest type on the page. text-wrap: balance asks the
   browser to even out the lines instead; where it is not supported
   nothing changes, so there is no fallback to write.
   --------------------------------------------------------------------- */
h1, h2, .sol h3, .usecase h3, .pillar h3, .section-head h2 {
  text-wrap: balance;
}

/* ---------------------------------------------------------------------
   No white band between the last section and the footer
   ---------------------------------------------------------------------
   .site-footer carries margin-top: var(--s-9) — 104px. On the group's
   pages that is breathing room below a light closing section. Here it
   lands in three different places, and two of them are wrong:

     the confirmation pages close on .section--deep, whose background is
     #0B1B2B — the footer's own background, exactly. A 104px white strip
     between two blocks of identical colour reads as a page that failed
     to load its last block.

     the assessment pages close on a light grey section, so the sequence
     is grey, then a white strip, then navy: two seams where the design
     has one.

   Every section on these pages already ends with 144px of its own
   bottom padding, so the margin was adding a second gap on top of a
   sufficient one. Removing it changes nothing visible on the twelve
   pages that close on white and closes the seam on the six that do not.
   --------------------------------------------------------------------- */
.site-footer { margin-top: 0; }