/* ===================================================================== FinanceOS Product Language — Release 1 --------------------------------------------------------------------- Die visuelle Sprache des freigegebenen Homepage-Prototyps (02.09.2026), aus der Einzeldatei in ein Asset ausgegliedert, damit Homepage, Use Cases und Plattformseiten dieselbe Produktwelt teilen. LADEREIHENFOLGE — verbindlich: 1. assets/css/styles.css Gruppen-Tokens und Chrome. Kanonisch, niemals forken. 2. assets/css/financeos-product.css diese Datei. 3. assets/css/consent.css Seiten, die diese Datei laden, laden NICHT financeos.css. Grund: financeos.css belegt .cff-*, .sec* und .story* mit anderer Bedeutung. Die 13 Modulseiten und die Plattformseiten der Welle 1 bleiben unveraendert auf financeos.css. Geprueft: 19 Breiten von 320 bis 3440 px, WCAG AA, ohne JavaScript vollstaendig lesbar. ===================================================================== */ /* --------------------------------------------------------------------- Layout helpers --------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--s-5); } @media (min-width: 768px) { .container { padding: 0 var(--s-6); } } @media (min-width: 1024px) { .container { padding: 0 var(--s-7); } } /* --------------------------------------------------------------------- Buttons --------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0.875rem 1.375rem; border-radius: 999px; font-weight: 600; font-size: var(--fs-sm); letter-spacing: 0.01em; border: 1.5px solid transparent; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); white-space: nowrap; } .btn svg { width: 16px; height: 16px; } .btn--primary { background: var(--c-brand); color: #fff; border-color: var(--c-brand); } .btn--primary:hover { background: var(--c-brand-700); border-color: var(--c-brand-700); color: #fff; transform: translateY(-1px); } .btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line); } .btn--ghost:hover { border-color: var(--c-brand); color: var(--c-brand); } .section--deep .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.25); } .section--deep .btn--ghost:hover { border-color: #fff; color: #fff; } .btn--lg { padding: 1.05rem 1.75rem; font-size: var(--fs-base); } /* --------------------------------------------------------------------- Header / Nav --------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.85); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .site-header.is-scrolled { border-color: var(--c-line); background: rgba(255,255,255,0.96); } .nav { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: var(--s-5); } .brand { display: flex; align-items: center; gap: var(--s-3); color: var(--c-ink); font-weight: 600; font-size: var(--fs-base); letter-spacing: -0.01em; } .brand-mark { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-brand); color: #fff; border-radius: 8px; font-weight: 700; font-size: 0.875rem; letter-spacing: 0; } .brand-name { display: flex; flex-direction: column; line-height: 1.1; } .brand-name strong { font-weight: 600; color: var(--c-ink); } .brand-name span { font-size: var(--fs-xs); color: var(--c-ink-3); font-weight: 500; } .nav-links { display: none; list-style: none; margin: 0; padding: 0; gap: var(--s-6); align-items: center; } .nav-links a { color: var(--c-ink-2); font-weight: 500; font-size: var(--fs-sm); } .nav-links a:hover { color: var(--c-brand); } .nav-actions { display: flex; align-items: center; gap: var(--s-3); } .lang-switch { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--c-line); border-radius: 999px; padding: 2px; background: #fff; } .lang-switch a { font-size: var(--fs-xs); font-weight: 600; padding: 0.3rem 0.65rem; color: var(--c-ink-3); border-radius: 999px; letter-spacing: 0.04em; } .lang-switch a.is-active { background: var(--c-brand); color: #fff; } .lang-switch a:not(.is-active):hover { color: var(--c-brand); } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--c-line); background: #fff; color: var(--c-ink); } .nav-toggle:hover { border-color: var(--c-brand); color: var(--c-brand); } @media (min-width: 1024px) { .nav-links { display: flex; } .nav-toggle { display: none; } } /* Mobile drawer */ /* Row 2 — secondary, dezente Story-/In-Page-Navigation der aktuellen Seite. Bewusst visuell leichter als Zeile 1 (kleiner, gedeckte Farbe, duenner Trenner). */ .story-nav-wrap { display: none; } @media (min-width: 1024px) { .story-nav-wrap { display: block; border-top: 1px solid var(--c-line); background: var(--c-bg-alt); } } .story-nav { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--s-5); height: 44px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .story-nav::-webkit-scrollbar { display: none; } .story-nav > li { flex-shrink: 0; } .story-nav a { color: var(--c-ink-3); font-weight: 500; font-size: var(--fs-xs); white-space: nowrap; } .story-nav a:hover { color: var(--c-brand); } .nav-drawer { position: fixed; inset: var(--header-h) 0 0 0; background: #fff; z-index: 49; padding: var(--s-6) var(--s-5); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); border-top: 1px solid var(--c-line); overflow-y: auto; } .nav-drawer.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .nav-drawer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); } .nav-drawer a { display: block; padding: var(--s-3) 0; font-size: var(--fs-md); color: var(--c-ink); font-weight: 500; border-bottom: 1px solid var(--c-line); } .nav-drawer .btn { margin-top: var(--s-5); width: 100%; justify-content: center; } @media (min-width: 1024px) { .nav-drawer { display: none; } } /* --------------------------------------------------------------------- Footer --------------------------------------------------------------------- */ .site-footer { background: #0B1B2B; color: rgba(255,255,255,0.78); padding: var(--s-9) 0 var(--s-7); margin-top: var(--s-9); } .footer-grid { display: grid; gap: var(--s-7); grid-template-columns: minmax(0, 1fr); } @media (min-width: 768px) { .footer-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); } } .footer-grid h5 { color: #fff; font-size: var(--fs-sm); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; margin: 0 0 var(--s-4); } .footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); } .footer-grid a { color: rgba(255,255,255,0.78); font-size: var(--fs-sm); } .footer-grid a:hover { color: #fff; } .footer-brand p { color: rgba(255,255,255,0.7); font-size: var(--fs-sm); max-width: 38ch; } .footer-legal { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,0.12); display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); justify-content: space-between; font-size: var(--fs-xs); color: rgba(255,255,255,0.6); } .footer-legal a { color: rgba(255,255,255,0.7); } .footer-legal a:hover { color: #fff; } .footer-entities { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); margin-top: var(--s-6); font-size: var(--fs-xs); color: rgba(255,255,255,0.6); } @media (min-width: 768px) { .footer-entities { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .footer-entities strong { display: block; color: #fff; font-weight: 600; margin-bottom: 2px; font-size: var(--fs-sm); } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--c-brand); color: #fff; padding: 0.6rem 1rem; border-radius: 0 0 8px 8px; z-index: 100; } .skip-link:focus { left: 12px; } /* ===================================================================== BU-specific extensions (NetSuite and shared BU components) ===================================================================== */ /* BU header — extends base brand block with unit tag */ .brand-bu { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-brand); background: var(--c-brand-50); padding: 0.2rem 0.55rem; border-radius: 999px; margin-left: 0.35rem; } .brand-parent { display: none; font-size: var(--fs-xs); color: var(--c-ink-3); margin-left: var(--s-4); padding-left: var(--s-4); border-left: 1px solid var(--c-line); } .brand-parent a { color: var(--c-ink-3); font-weight: 500; } .brand-parent a:hover { color: var(--c-brand); } @media (min-width: 768px) { .brand-parent { display: inline-flex; align-items: center; gap: 0.35rem; } } /* Breadcrumb back to group */ .bu-crumb { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--fs-xs); color: var(--c-ink-3); font-weight: 500; letter-spacing: 0.04em; } .bu-crumb a { color: var(--c-ink-3); text-decoration: none; border-bottom: 1px dotted currentColor; } .bu-crumb a:hover { color: var(--c-brand); border-color: var(--c-brand); } /* === Master-brand logo (JPS-iQ) — added for launch === */ .brand-logo { display: block; height: 44px; width: auto; max-width: 260px; } .brand-logo--footer { height: 52px; max-width: 280px; } .brand-name--hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* override legacy .brand-mark sizing for BU pages that still fall back on text */ .brand .brand-mark + .brand-name { margin-left: 0.75rem; } /* ========================================================================= LAUNCH FIX PATCH — applied across all BU sites ========================================================================= */ /* --- 1. Contact-box ghost buttons on dark gradient --- */ .cta-final .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.38); background: rgba(255, 255, 255, 0.04); } .cta-final .btn--ghost:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.10); } /* --- 2. Header compactness — prevent brand-block wrapping --- */ .site-header .nav { gap: var(--s-5); } .site-header .brand { display: inline-flex; align-items: center; gap: 0.85rem; flex-wrap: nowrap; min-width: 0; max-width: 100%; flex-shrink: 0; } .site-header .brand-logo { height: 40px; width: auto; max-width: 180px; flex-shrink: 0; } .site-header .brand-name { min-width: 0; flex-shrink: 1; } .site-header .brand-name strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 320px; } /* Logo itself already says 'JPS-iQ SOLUTIONS' → entity sub-line and 'part of JPS-iQ Solutions Group' are redundant in the HEADER. Both remain visible in the footer and imprint. */ .site-header .brand-name > span { display: none !important; } .site-header .brand-parent { display: none !important; } @media (max-width: 900px) { .site-header .brand-name { display: none; } .site-header .brand-logo { height: 36px; max-width: 160px; } } .mid-cta .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-5); text-align: center; } .mid-cta .btn--primary { background: #fff; color: var(--c-bg-deep); border-color: #fff; } .mid-cta .btn--primary:hover { background: rgba(255,255,255,0.9); color: var(--c-bg-deep); border-color: rgba(255,255,255,0.9); } @media (min-width: 760px) { .mid-cta .container { flex-wrap: nowrap; justify-content: space-between; text-align: left; gap: var(--s-7); } } /* ============================================================ * Long-word overflow safety (DE compound words) * Added: 2026-04-30 — fixes Skalierungspfad / Schatten-Tools etc. * Applies safe word-break + hyphenation to elements that use * large or fixed-width typography. Conservative: only breaks * when a word would otherwise overflow. * Hyphens disabled 2026-08-08: browser dictionary-based hyphens * produced wrong breaks on brand terms and English loanwords * (e.g. "SuiteSuc-cess", "Ma-nufacturing"). overflow-wrap still * prevents container overflow. * ============================================================ */ .feature-metrics strong, .feature-metrics span, .hero h1, .section-head h2, .feature-block h2, .cta-final h2, .industry h4, .why-card h3, .pillar h3, .method-step h3, .split-list h4, .hero-meta strong, .brand-name strong, .brand-name span, .bu-crumb, .feature-badge, .hero-badge, .eyebrow, .service-card h3, .service-card__tag, .platform-card__name { overflow-wrap: break-word; word-break: normal; hyphens: none; -webkit-hyphens: none; } /* ========================================================================= JPS-iQ group-wide nav standard — Fachthemen mega-menu / BU-switcher / mobile accordion. Shared, identical pattern across every BU site. Added per binding rule in CLAUDE.md (2026-08-16). ========================================================================= */ .nav-flyout { position: relative; } .nav-flyout__trigger { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; background: none; border: none; font: inherit; font-size: var(--fs-sm); color: var(--c-ink-2); cursor: pointer; padding: var(--s-2) 0; line-height: 1.3; } .nav-flyout__trigger:hover, .nav-flyout__trigger:focus-visible { color: var(--c-brand); } .nav-flyout__trigger:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 3px; border-radius: 4px; } .nav-flyout__chev { transition: transform 0.15s ease; flex-shrink: 0; } .nav-flyout__trigger[aria-expanded="true"] .nav-flyout__chev { transform: rotate(180deg); } .nav-flyout__panel { position: absolute; top: 100%; left: 0; margin-top: var(--s-3); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(11,27,43,0.16), 0 2px 8px rgba(11,27,43,0.06); padding: var(--s-4); min-width: 260px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; z-index: 60; } .nav-flyout__panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); } /* Content-based sizing: the mega-menu hugs its actual content instead of stretching to a fixed minimum width. Prevents oversized flyouts with large empty gaps when a BU has few groups/short labels, while still capping the width so it can't run unbounded on very wide content. Groups never wrap to a second row (nowrap); only an individual label's text wraps if it is longer than a single column can comfortably hold. */ .nav-flyout__panel--mega { width: max-content; max-width: min(720px, calc(100vw - 32px)); padding: var(--s-4) var(--s-5); } .nav-flyout__panel--align-right { left: auto; right: 0; } .bu-switch { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); } .bu-switch li a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); color: var(--c-ink-2); text-decoration: none; font-size: var(--fs-sm); white-space: nowrap; } .bu-switch li a:hover, .bu-switch li a:focus-visible { background: var(--c-brand-50); color: var(--c-brand-700); } .bu-switch li.is-current a { font-weight: 700; color: var(--c-ink); background: var(--c-brand-50); } .bu-switch__tag, .bu-switch__current { font-size: var(--fs-xs); color: var(--c-ink-3); font-weight: 500; } .bu-switch li.is-current .bu-switch__current { color: var(--c-brand-700); } .mega-menu { display: flex; gap: var(--s-5); align-items: flex-start; flex-wrap: nowrap; } .mega-menu__col { flex: 0 0 auto; min-width: 130px; } .mega-menu__heading { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-ink-3); font-weight: 700; margin-bottom: var(--s-2); } .mega-menu__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); } .mega-menu__col li a { display: block; padding: var(--s-2); border-radius: var(--radius-sm); color: var(--c-ink-2); text-decoration: none; font-size: var(--fs-sm); max-width: 240px; white-space: normal; } .mega-menu__col li a:hover, .mega-menu__col li a:focus-visible { background: var(--c-brand-50); color: var(--c-brand-700); } .mega-menu__col li.is-current a { font-weight: 700; color: var(--c-brand-700); } .mega-menu__lang-note { font-size: var(--fs-xs); color: var(--c-ink-3); font-weight: 500; } /* Mobile accordion (inside .nav-drawer) */ .nav-accordion { border-bottom: 1px solid var(--c-line); } .nav-accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; background: none; border: none; text-align: left; font: inherit; font-size: var(--fs-md); font-weight: 500; color: var(--c-ink); padding: var(--s-3) 0; cursor: pointer; } .nav-accordion__trigger[aria-expanded="true"] .nav-flyout__chev { transform: rotate(180deg); } .nav-accordion__panel { display: none; flex-direction: column; padding: 0 0 var(--s-2) var(--s-2); } .nav-accordion__panel.is-open { display: flex; } .nav-accordion__panel a { padding: var(--s-2) !important; font-size: var(--fs-sm) !important; font-weight: 400 !important; border-bottom: none !important; color: var(--c-ink-2) !important; } .nav-accordion__panel a.is-current { font-weight: 700 !important; color: var(--c-brand-700) !important; } .nav-accordion__group-label { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-ink-3); font-weight: 700; padding: var(--s-3) var(--s-2) var(--s-1); } @media (prefers-reduced-motion: reduce) { .nav-flyout__panel, .nav-flyout__chev { transition: none !important; } } .site-footer { margin-top: 0; } .nav-flyout__panel--mega { max-width: min(1000px, calc(100vw - 32px)); } .mega-menu { flex-wrap: wrap; row-gap: var(--s-5); } .mega-menu__col { flex: 1 1 168px; max-width: 240px; } /* ==================================================== JPS-iQ CD TOKENS */ :root{ --c-brand:#1A77B3; --c-brand-700:#155E8E; --c-brand-800:#11456A; --c-brand-50:#EAF3FA; --c-brand-100:#D3E6F4; --c-ink:#0B1B2B; --c-ink-2:#2A3B4D; --c-ink-3:#5A6B7D; --c-line:#E2E8EE; --c-bg:#FFFFFF; --c-bg-alt:#F5F8FB; --c-bg-deep:#0B1B2B; --c-bg-deep-2:#0F2438; /* dark surfaces derived from the CD's own deep navy */ --d-surf:#16324A; --d-surf-2:#1D3E59; --d-edge:#22405C; /* semantic product colours — fills and lines */ --f-eff:#2FA39C; --f-auth:#D6A24A; --f-evid:#C0B092; --f-rec:#7BA0C4; /* semantic product colours — text on a dark ground (AA verified) */ --dk-eff:#4ECDC4; --dk-auth:#E3B25C; --dk-evid:#CFC0A4; --dk-rec:#9DBFDE; --dk-link:#74BCE8; --dk-fg:#E8EFF5; --dk-fg2:#C9D6E2; --dk-dim:#A2B4C6; /* semantic product colours — text on a light ground (AA verified) */ --lt-eff:#0C6E68; --lt-auth:#7A5410; --lt-evid:#6E6046; --lt-rec:#3E617D; --ff-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue", Helvetica,Arial,sans-serif; /* the one product add-on: a system mono for module terms, architecture layers, band labels and other system-side marks. Never for headings, body copy, buttons or navigation. */ --ff-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas, "Liberation Mono",monospace; /* corporate type scale — the same tokens the group stylesheet uses */ --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-base:1rem; --fs-md:1.125rem; --fs-lg:1.375rem; --fs-xl:1.75rem; --fs-2xl:clamp(1.875rem,2vw + 1rem,2.625rem); --fs-3xl:clamp(2.25rem,3vw + 1rem,3.5rem); --fs-4xl:clamp(2.75rem,4.5vw + 1rem,5rem); --header-h:112px; --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6.5rem; --max-w:1440px; --wrap:1240px; --radius:16px; --radius-sm:10px; --r-surf:12px; --r-card:16px; --r-chip:8px; --ease:cubic-bezier(.2,.7,.2,1); --dur:300ms; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;font-family:var(--ff-sans);font-size:1rem;line-height:1.6; color:var(--c-ink);background:var(--c-bg);-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} img,svg{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} h1,h2,h3,h4{margin:0;font-family:var(--ff-sans);font-weight:600; line-height:1.12;letter-spacing:-.015em;text-wrap:balance} p{margin:0} ul{margin:0;padding:0;list-style:none} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} :focus-visible{outline:3px solid var(--c-brand);outline-offset:3px;border-radius:4px} .sec--deep :focus-visible,.sec--deep2 :focus-visible{outline-color:var(--dk-link)} /* ================================================ SECTIONS AND GROUNDS A section declares a ground; every component below reads the tokens the ground sets. No component knows whether it is on white or on navy. */ .sec{position:relative;padding:var(--s-9) var(--s-5)} .wrap{max-width:var(--wrap);margin:0 auto;position:relative} .sec--light,.sec--alt{ --sec-chip:#EDF2F7; --sec-tile-edge:#D5DFE9; --sec-bg:var(--c-bg); --sec-fg:var(--c-ink); --sec-fg2:var(--c-ink-2); --sec-dim:var(--c-ink-3); --sec-rule:var(--c-line); --sec-surf:var(--c-bg); --sec-surf-2:var(--c-brand-50); --sec-edge:var(--c-line); --t-eff:var(--lt-eff); --t-auth:var(--lt-auth); --t-evid:var(--lt-evid); --t-rec:var(--lt-rec); --t-link:var(--c-brand-700); background:var(--c-bg);color:var(--c-ink)} .sec--alt{--sec-bg:var(--c-bg-alt);--sec-surf:var(--c-bg); background:var(--c-bg-alt)} .sec--deep,.sec--deep2{ --sec-chip:var(--d-surf); --sec-tile-edge:var(--d-edge); --sec-bg:var(--c-bg-deep); --sec-fg:var(--dk-fg); --sec-fg2:var(--dk-fg2); --sec-dim:var(--dk-dim); --sec-rule:var(--d-edge); --sec-surf:var(--d-surf); --sec-surf-2:var(--d-surf-2); --sec-edge:var(--d-edge); --t-eff:var(--dk-eff); --t-auth:var(--dk-auth); --t-evid:var(--dk-evid); --t-rec:var(--dk-rec); --t-link:var(--dk-link); background:var(--c-bg-deep);color:var(--dk-fg)} .sec--deep2{--sec-bg:var(--c-bg-deep-2);background:var(--c-bg-deep-2)} /* consecutive product sections are one chapter — no seam, no repeated padding */ .sec--deep + .sec--deep,.sec--deep2 + .sec--deep2, .sec--deep + .sec--deep2,.sec--deep2 + .sec--deep{padding-top:0} .sec--alt + .sec--alt{padding-top:0} .sec--tight{padding-top:var(--s-7);padding-bottom:var(--s-7)} .eyebrow{display:block;font:600 var(--fs-xs)/1.2 var(--ff-sans); letter-spacing:.14em;text-transform:uppercase;color:var(--c-brand); margin-bottom:var(--s-4)} .sec--deep .eyebrow,.sec--deep2 .eyebrow{color:var(--dk-link)} .h-hero{font-size:var(--fs-3xl);letter-spacing:-.025em} .h-sec{font-size:var(--fs-2xl);letter-spacing:-.02em} .h-moment{font-size:var(--fs-4xl);letter-spacing:-.025em; line-height:1.06} .lead{margin-top:var(--s-5);font-size:clamp(1.125rem,.6vw + 1rem,1.375rem);line-height:1.58; color:var(--sec-fg2);max-width:64ch} .measure{max-width:62ch} /* ======================================================= MATURITY CHIP Kept in the system for capability and module pages. Not used on the homepage: the owner brief of 2026-09-02 takes maturity out of the sales story and leaves it where a capability is actually named. No colour. Four differentiators: mark form, border style, opacity, label. */ .mchip{display:inline-flex;align-items:center;gap:.55em; font:600 .6875rem/1 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase; padding:.45em .75em .45em .6em;border:1px solid currentColor; border-radius:var(--r-chip);white-space:nowrap} .mchip::before{content:"";width:10px;height:10px;border-radius:50%;flex:none; box-sizing:border-box} .mchip--v::before{background:currentColor} .mchip--p::before{width:6px;height:6px;margin:2px;background:currentColor; box-shadow:0 0 0 1.5px var(--sec-bg),0 0 0 3px currentColor} .mchip--d::before{border:1.5px dotted currentColor} .mchip--c::before{border:1.5px dashed currentColor} .mchip--p{opacity:.94} .mchip--d{opacity:.82} .mchip--c{opacity:.68;border-style:dashed} /* ============================================================= BUTTONS */ /* .btn / .btn--primary / .btn--ghost / .btn--lg come from the corporate stylesheet unchanged (pill radius, corporate padding and hover lift). The only addition is a ghost button on the deep navy ground, which the group CD does not define yet. */ .sec--deep .btn--ghost,.sec--deep2 .btn--ghost{color:var(--dk-fg); border-color:var(--d-edge);background:transparent} .sec--deep .btn--ghost:hover,.sec--deep2 .btn--ghost:hover{ color:var(--dk-link);border-color:var(--dk-link)} .btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)} .tlink{display:inline-flex;align-items:center;gap:.4em;min-height:44px; font:600 var(--fs-sm)/1 var(--ff-sans);color:var(--t-link); border-bottom:1px solid transparent} .tlink:hover{border-bottom-color:currentColor} /* ================================================================ HERO */ .hero{display:grid;grid-template-columns:minmax(0, 1.14fr) minmax(0, .86fr);gap:var(--s-7); align-items:center} .hero__meta{grid-column:1 / -1} .hero__meta{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--s-6); margin:var(--s-6) 0 0;padding-top:var(--s-5); border-top:1px solid var(--sec-rule)} .hero__meta dt{margin-bottom:.5em;font:600 .6875rem/1.3 var(--ff-mono); letter-spacing:.11em;text-transform:uppercase;color:var(--sec-dim)} .hero__meta dd{margin:0;font-size:.9375rem;color:var(--sec-fg2)} @media (max-width:960px){.hero{grid-template-columns:minmax(0, 1fr);gap:var(--s-7)} .hero__meta{grid-template-columns:minmax(0, 1fr);gap:var(--s-4);margin-top:var(--s-7)}} /* the finance chain — abstract nodes, real module names, one travelling signal */ .chain{background:var(--sec-surf-2);border:1px solid var(--sec-edge); border-radius:var(--r-card);padding:var(--s-6)} .sec--deep .chain,.sec--deep2 .chain{background:var(--d-surf)} .chain__l{margin-bottom:var(--s-6);font:600 .6875rem/1 var(--ff-mono); letter-spacing:.12em;text-transform:uppercase;color:var(--sec-dim)} .chain__track{position:relative;display:grid;grid-template-columns:repeat(5, minmax(0, 1fr)); gap:.35rem;align-items:start} .chain__track::before{content:"";position:absolute;left:10%;right:10%;top:11px; height:1px;background:var(--sec-edge)} .chain__n{position:relative;text-align:center;font-size:.6875rem;line-height:1.3; color:var(--sec-dim)} .chain__n::before{content:"";position:relative;z-index:1;display:block; width:9px;height:9px;margin:7px auto .7rem;border-radius:50%; background:var(--f-rec);box-shadow:0 0 0 5px var(--sec-surf-2)} .sec--deep .chain__n::before,.sec--deep2 .chain__n::before{ box-shadow:0 0 0 5px var(--d-surf)} .chain__n--fx::before{background:var(--f-eff)} .chain__n--fx{color:var(--t-eff);font-weight:600} .chain__fx{margin-top:var(--s-6);padding-top:var(--s-4); border-top:1px dashed var(--sec-edge);display:flex;justify-content:space-between; gap:var(--s-4);font:600 .6875rem/1.4 var(--ff-mono);letter-spacing:.06em; color:var(--t-eff)} .chain__fx b:last-child{font-weight:400;color:var(--sec-dim);text-align:right} .chain__over{margin-top:var(--s-5);padding-top:var(--s-4); border-top:1px solid var(--sec-edge)} .chain__over b{display:block;margin-bottom:.55rem;font:600 .6875rem/1 var(--ff-mono); letter-spacing:.12em;text-transform:uppercase;color:var(--sec-dim)} .chain__over ul{display:flex;flex-wrap:wrap;gap:.35rem} .chain__over li{padding:.3em .6em;font:600 .6875rem/1.3 var(--ff-mono); letter-spacing:.04em;border:1px solid var(--sec-edge);border-radius:var(--r-chip)} .chain__over li:nth-child(1){color:var(--t-rec)} .chain__over li:nth-child(2),.chain__over li:nth-child(3){color:var(--t-auth)} .chain__over li:nth-child(4){color:var(--t-evid)} .pulse{position:absolute;top:7px;left:10%;z-index:2;width:9px;height:9px; border-radius:50%;background:var(--f-eff); box-shadow:0 0 0 5px var(--sec-surf-2),0 0 14px var(--f-eff); animation:run 7s var(--ease) infinite} .sec--deep .pulse,.sec--deep2 .pulse{ box-shadow:0 0 0 5px var(--d-surf),0 0 16px var(--f-eff)} @keyframes run{0%,8%{left:10%;opacity:0}13%{opacity:1} 80%{left:90%;opacity:1}88%,100%{left:90%;opacity:0}} @media (prefers-reduced-motion:reduce){.pulse{animation:none;left:90%;opacity:1}} /* =========================================================== CFO PAIN */ .pain{display:grid;grid-template-columns:auto minmax(0,1.12fr) minmax(0,.88fr); column-gap:var(--s-8);row-gap:var(--s-8);margin-top:var(--s-8);align-items:start} .pain__n{padding-top:.55rem;font:600 .8125rem/1 var(--ff-mono); letter-spacing:.1em;color:var(--t-link);white-space:nowrap} .pain__q{font-family:var(--ff-sans);font-size:var(--fs-lg);font-weight:600; line-height:1.34;letter-spacing:-.015em;color:var(--sec-fg)} .pain__a{padding-top:.3rem;font-size:1.0625rem;color:var(--sec-fg2)} .pain__close{margin-top:var(--s-8);padding-top:var(--s-5); border-top:1px solid var(--sec-rule)} .pain__close span{display:block;max-width:46ch;font-family:var(--ff-sans); font-size:var(--fs-lg);font-weight:600;letter-spacing:-.015em; line-height:1.3} @media (max-width:1040px){.pain{grid-template-columns:auto minmax(0, 1fr); column-gap:var(--s-6);row-gap:var(--s-7)}.pain__a{padding-top:var(--s-4)}} @media (max-width:720px){.pain{grid-template-columns:minmax(0, 1fr)}.pain__n{padding-top:0}} /* ======================================================= BRAND MOMENT */ .moment{padding-top:var(--s-9);padding-bottom:var(--s-8)} .moment__mark{width:72px;height:3px;background:var(--f-eff); margin-bottom:var(--s-6);border-radius:2px} .moment__top{display:grid;grid-template-columns:minmax(0, 1.06fr) minmax(0, .94fr);gap:var(--s-8); align-items:start} .moment h2{max-width:16ch} .moment p{max-width:56ch;padding-top:.7rem;font-size:1.1875rem;line-height:1.6; color:var(--sec-fg2)} .moment__next{margin-top:var(--s-7);display:flex;align-items:center;gap:var(--s-4); font:600 .8125rem/1 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase; color:var(--t-eff)} .moment__next::after{content:"";flex:1;height:1px; background:linear-gradient(90deg,var(--f-eff),transparent)} @media (max-width:920px){.moment__top{grid-template-columns:minmax(0, 1fr);gap:var(--s-6); align-items:start}} /* the connection, drawn once, at full width */ .mviz{margin-top:var(--s-8)} .mviz__rail{position:relative;padding-bottom:var(--s-6)} .mviz__rail ul{display:flex;flex-wrap:wrap;gap:var(--s-5); justify-content:space-between} .mviz__rail li{font:600 .6875rem/1 var(--ff-mono);letter-spacing:.12em; text-transform:uppercase;padding-bottom:.75rem} .mviz__rail li:nth-child(1){color:var(--t-rec)} .mviz__rail li:nth-child(2),.mviz__rail li:nth-child(3){color:var(--t-auth)} .mviz__rail li:nth-child(4){color:var(--t-evid)} .mviz__rail::after{content:"";position:absolute;left:0;right:0;bottom:var(--s-4); height:10px;border:1px solid var(--sec-dim);border-bottom:0;opacity:.55; border-radius:4px 4px 0 0} .mviz__cap{margin-bottom:var(--s-3);font:600 .6875rem/1 var(--ff-mono); letter-spacing:.12em;text-transform:uppercase;color:var(--sec-dim)} .mviz__track{position:relative;display:grid; grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-4);padding-top:var(--s-5)} .mviz__track::before{content:"";position:absolute;left:10%;right:10%;top:calc(var(--s-5) + 8px); height:2px;background:linear-gradient(90deg,var(--f-rec) 0%,var(--f-rec) 45%, var(--f-eff) 62%,var(--f-eff) 100%);border-radius:1px} .mviz__n{position:relative;text-align:center} .mviz__n::before{content:"";position:relative;z-index:1;display:block; width:18px;height:18px;margin:0 auto var(--s-4);border-radius:50%; background:var(--sec-bg);border:2px solid var(--f-rec)} .mviz__n--fx::before{border-color:var(--f-eff);background:var(--f-eff)} .mviz__n b{display:block;font-size:var(--fs-base);font-weight:600; color:var(--sec-fg)} .mviz__n--fx b{color:var(--t-eff)} .mviz__n span{display:block;margin-top:.4em;font-size:.8125rem;line-height:1.4; color:var(--sec-dim)} @media (max-width:760px){ .mviz__track{grid-template-columns:minmax(0, 1fr);gap:var(--s-5);padding-top:var(--s-5)} .mviz__track::before{left:8px;right:auto;top:var(--s-5);bottom:1.2rem; width:2px;height:auto;background:linear-gradient(180deg,var(--f-rec),var(--f-eff))} .mviz__n{text-align:left;padding-left:var(--s-6)} .mviz__n::before{position:absolute;left:0;top:2px;margin:0} .mviz__rail ul{gap:var(--s-3)} .mviz__rail::after{display:none}} /* ================================================ CONNECTED FINANCE FLOW */ .cff{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:var(--s-6); margin-top:var(--s-6)} .cff-tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:var(--s-5)} .cff-tab{display:inline-flex;align-items:center;min-height:46px;padding:0 1.15em; font:600 .8125rem/1 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase; border:1px solid var(--sec-edge);border-radius:var(--radius-sm); color:var(--sec-dim);transition:all var(--dur) var(--ease)} .cff-tab:hover{color:var(--sec-fg)} .cff-tab.is-on{border-color:var(--f-eff);color:var(--t-eff);background:var(--sec-surf)} .sec--light .cff-tab.is-on{background:#F0FAF9} [data-enhanced] .cff-pane{display:none} [data-enhanced] .cff-pane.is-on{display:block} .cff-sit{max-width:72ch;font-size:1.0625rem;color:var(--sec-fg)} .cff-sit b{display:block;font-family:var(--ff-sans); font-size:var(--fs-lg);font-weight:600;letter-spacing:-.015em; margin-bottom:.4em} .cff-sit span{display:block;color:var(--sec-fg2);font-size:.9375rem} .cff-band{margin-top:var(--s-5);padding-top:var(--s-5); border-top:1px solid var(--sec-rule)} .cff-bl{margin-bottom:var(--s-4);font:600 .6875rem/1 var(--ff-mono); letter-spacing:.13em;text-transform:uppercase;color:var(--sec-dim)} .cff-bl--fx{color:var(--t-eff)} .cff-src{display:flex;flex-wrap:wrap;gap:var(--s-3)} .cff-src li{padding:.6em .85em;font-size:.875rem;color:var(--sec-fg2); border:1px dashed var(--sec-edge);border-radius:var(--radius-sm)} .cff-src b{display:block;margin-bottom:.2em;font:600 .8125rem/1.3 var(--ff-mono); letter-spacing:.03em;color:var(--t-rec)} .cff-mods{display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:.5rem; position:relative} .cff-mod{position:relative;display:block;width:100%;text-align:left; padding:.9rem .85rem;background:var(--sec-surf); border:1px solid var(--sec-tile-edge); border-radius:var(--r-surf);transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease),transform var(--dur) var(--ease)} .sec--light .cff-mod{background:var(--c-bg-alt)} .cff-mod b{display:block;font:600 var(--fs-sm)/1.25 var(--ff-sans); color:var(--sec-fg)} .cff-mod i{display:block;margin-top:.4em;font:400 .6875rem/1.3 var(--ff-mono); letter-spacing:.04em;font-style:normal;color:var(--sec-dim)} .cff-mod:hover{border-color:var(--f-eff)} .cff-mod.is-on{border-color:var(--f-eff);background:var(--sec-surf-2); box-shadow:inset 0 0 0 1px var(--f-eff)} .sec--light .cff-mod.is-on{background:#F0FAF9} .cff-mod.is-on b{color:var(--t-eff)} .cff-mod.is-far{background:transparent} .cff-mod.is-far b,.cff-mod.is-far i{color:var(--sec-dim)} /* causality made visible: the selected module grows a line toward the effects */ .cff-mod::after{content:"";position:absolute;left:50%;bottom:-1px;width:2px; height:0;background:var(--f-eff);border-radius:1px; transition:height var(--dur) var(--ease)} .cff-mod.is-on::after{height:calc(var(--s-5) + 1px)} .cff-fxs{display:grid;gap:.35rem} .cff-fx{display:grid;grid-template-columns:12rem minmax(0, 1fr);gap:var(--s-4); align-items:baseline;padding:.7rem .9rem;border-left:3px solid var(--sec-edge); border-radius:0 var(--radius-sm) var(--radius-sm) 0; transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)} .cff-fx b{font:600 .8125rem/1.35 var(--ff-mono);letter-spacing:.04em; color:var(--sec-dim)} .cff-fx span{font-size:.9375rem;color:var(--sec-fg2)} .cff-fx.is-on{border-left-color:var(--f-eff);background:var(--sec-surf)} .sec--light .cff-fx.is-on{background:#F0FAF9} .cff-fx.is-on b{color:var(--t-eff)} .cff-fx.is-on span{color:var(--sec-fg)} .cff-fx.is-far{border-left-color:var(--sec-edge)} .cff-fx.is-far b,.cff-fx.is-far span{color:var(--sec-dim)} @media (prefers-reduced-motion:no-preference){ .cff-fx.is-on{animation:fxin .32s var(--ease)} @keyframes fxin{from{transform:translateX(-6px);opacity:.35}to{transform:none;opacity:1}}} .cff-dec{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:var(--s-5)} .cff-dec > div{padding:var(--s-5);border:1px solid var(--sec-edge); border-radius:var(--r-card);background:var(--sec-surf)} .sec--light .cff-dec > div{background:var(--c-bg-alt)} .cff-dec b{display:block;margin-bottom:.45em; font:600 var(--fs-base)/1.3 var(--ff-sans)} .cff-dec p{font-size:.9375rem;color:var(--sec-fg2)} .d-auth{border-top:3px solid var(--f-auth)!important} .d-auth b{color:var(--t-auth)} .d-ev{border-top:3px solid var(--f-evid)!important} .d-ev b{color:var(--t-evid)} .cff-panels{margin-top:var(--s-5)} [data-enhanced] .cff-panel{display:none} [data-enhanced] .cff-panel.is-on{display:block} .cff-panel{margin-top:var(--s-4);padding:var(--s-6);background:var(--sec-surf); border:1px solid var(--sec-edge);border-left:3px solid var(--f-eff); border-radius:var(--r-card)} .sec--light .cff-panel{background:var(--c-bg-alt)} .cff-panel h4{font:600 var(--fs-md)/1.3 var(--ff-sans); letter-spacing:-.015em;color:var(--sec-fg)} .cff-panel h4 span{margin-left:.65em;font:400 .75rem/1 var(--ff-mono); letter-spacing:.05em;color:var(--sec-dim)} .cff-panel .role{margin-top:.55em;max-width:66ch;font-size:.9375rem; color:var(--sec-fg2)} .cff-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:var(--s-5);margin-top:var(--s-6)} .cff-kv > div{padding-top:.7rem;border-top:1px solid var(--sec-edge)} .cff-kv dt{margin-bottom:.5em;font:600 .6875rem/1 var(--ff-mono); letter-spacing:.09em;text-transform:uppercase;color:var(--sec-dim)} .cff-kv dd{margin:0;font-size:.9375rem;color:var(--sec-fg)} .cff-kv .k-eff{border-top-color:var(--f-eff)} .cff-kv .k-eff dt,.cff-kv .k-eff dd{color:var(--t-eff)} .cff-why{margin-top:var(--s-5);padding-top:var(--s-4); border-top:1px dashed var(--sec-edge);font-size:.9375rem;color:var(--sec-fg2)} .cff-why b{font:600 .6875rem/1 var(--ff-mono);letter-spacing:.09em; text-transform:uppercase;color:var(--sec-dim);margin-right:.5em} .entry__more{margin-top:var(--s-7)} .moment__p2{margin-top:var(--s-5)} .cff-conn{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem; margin-top:var(--s-4)} .cff-conn > span{font:600 .6875rem/1 var(--ff-mono);letter-spacing:.09em; text-transform:uppercase;color:var(--sec-dim)} .cff-go{display:inline-flex;align-items:center;gap:.35em;min-height:40px; padding:0 .85em;font:600 .8125rem/1 var(--ff-sans);color:var(--t-eff); border:1px solid var(--sec-edge);border-radius:var(--radius-sm); transition:all var(--dur) var(--ease)} .cff-go:hover{border-color:var(--f-eff);background:var(--sec-surf-2)} .cff-rail{align-self:start;position:sticky; top:calc(var(--header-h,112px) + 1rem);padding:var(--s-6); background:var(--sec-surf);border:1px solid var(--sec-edge); border-radius:var(--r-card)} .sec--light .cff-rail{background:var(--c-bg-alt)} .cff-rail h3{margin-bottom:var(--s-4);font:600 var(--fs-base)/1.3 var(--ff-sans)} .cff-rail li{padding:.85rem 0;border-top:1px solid var(--sec-edge)} .cff-rail b{display:block;margin-bottom:.45em;font:600 .75rem/1 var(--ff-mono); letter-spacing:.09em;text-transform:uppercase} .cff-rail p{font-size:.875rem;color:var(--sec-fg2)} .r-case b{color:var(--t-rec)} .r-ctrl b{color:var(--t-auth)} .r-auth b{color:var(--t-auth)} .r-evid b{color:var(--t-evid)} @media (max-width:1000px){.cff{grid-template-columns:minmax(0, 1fr)} .cff-rail{position:static}.cff-mods{grid-template-columns:repeat(2, minmax(0, 1fr))} .cff-mod::after{display:none}.cff-fx{grid-template-columns:minmax(0, 1fr);gap:.2rem} .cff-dec{grid-template-columns:minmax(0, 1fr)}} /* ====================================================== MODULE ENTRIES */ .entry{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--s-6); margin-top:var(--s-8)} .entry__c{padding:var(--s-6);background:var(--sec-surf); border:1px solid var(--sec-edge);border-radius:var(--r-card); border-top:3px solid var(--c-brand);display:flex;flex-direction:column} .sec--alt .entry__c{background:var(--c-bg)} .entry__c h3{font-size:var(--fs-lg);max-width:19ch} .entry__c p{margin-top:var(--s-4);flex:1;font-size:1rem;color:var(--sec-fg2)} .entry__c .tlink{margin-top:var(--s-4)} .entry__close{margin-top:var(--s-7);padding-top:var(--s-5); border-top:1px solid var(--sec-rule);max-width:76ch;font-size:1.1875rem; color:var(--sec-fg2)} .entry__close a{display:inline-flex;align-items:center;min-height:44px; color:var(--t-link);border-bottom:1px solid currentColor} @media (max-width:900px){.entry{grid-template-columns:minmax(0, 1fr);gap:var(--s-5)}} /* ================================================ PRODUCT ARCHITECTURE */ .arch{position:relative;margin-top:var(--s-6)} .arch__spine{position:absolute;top:var(--sy,0);bottom:3.5rem;left:var(--sx,50%); width:2px;border-radius:1px;opacity:0;pointer-events:none;z-index:0; background:linear-gradient(180deg,var(--f-eff),rgba(47,163,156,.18)); transition:left var(--dur) var(--ease),top var(--dur) var(--ease),opacity .2s} .arch.is-sel .arch__spine{opacity:1} .arch__layer{position:relative;z-index:1;padding:var(--s-6) 0; border-top:1px solid var(--sec-rule)} .arch__layer:first-of-type{border-top:0;padding-top:0} .arch__h{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s-4); margin-bottom:var(--s-5)} .arch__h b{font:600 .75rem/1 var(--ff-mono);letter-spacing:.13em; text-transform:uppercase;color:var(--sec-dim)} .arch__h span{font-size:.9375rem;color:var(--sec-fg2)} .l-mod .arch__h b{color:var(--t-link)} .l-cross .arch__h b{color:var(--t-auth)} .l-found .arch__h b{color:var(--t-evid)} .l-sor .arch__h b{color:var(--t-rec)} .arch__grp{margin-bottom:var(--s-5)} .arch__grp:last-child{margin-bottom:0} .arch__gn{margin-bottom:.7rem;font:600 .6875rem/1 var(--ff-mono); letter-spacing:.11em;text-transform:uppercase;color:var(--sec-dim);opacity:.85} /* an auto-fit grid takes its column count from width and knows nothing about the item count, which is what leaves a single card on the last row */ .mtiles{display:grid;gap:.5rem;grid-template-columns:minmax(0, 1fr)} @media (min-width:420px){.mtiles{grid-template-columns:repeat(2, minmax(0, 1fr))}} @media (min-width:600px){.mtiles--n4,.mtiles--n6{grid-template-columns:repeat(2, minmax(0, 1fr))}} @media (min-width:820px){.mtiles--n3,.mtiles--n6{grid-template-columns:repeat(3, minmax(0, 1fr))}} @media (min-width:1120px){.mtiles--n4{grid-template-columns:repeat(4, minmax(0, 1fr))}} .mtile{padding:.85rem .95rem;background:var(--sec-surf); border:1px solid var(--sec-tile-edge);border-radius:var(--r-surf);cursor:pointer; transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)} .sec--light .mtile{background:var(--c-bg-alt)} .sec--alt .mtile{background:var(--c-bg)} .mtile__a{display:flex;align-items:center;gap:.4em;min-height:44px; font:600 var(--fs-sm)/1.25 var(--ff-sans);color:var(--sec-fg)} .mtile__a::after{content:"\2192";font-weight:400;color:var(--sec-dim)} .mtile i{display:block;margin-top:.25em;font:400 .6875rem/1.35 var(--ff-mono); letter-spacing:.03em;font-style:normal;color:var(--sec-dim)} .mtile:hover{border-color:var(--c-brand)} .mtile:hover .mtile__a::after{color:var(--c-brand)} .mtile.is-on{border-color:var(--f-eff);background:var(--sec-surf-2); box-shadow:inset 0 0 0 1px var(--f-eff)} .sec--light .mtile.is-on,.sec--alt .mtile.is-on{background:#F0FAF9} .mtile.is-on .mtile__a{color:var(--t-eff)} .mtile.is-on .mtile__a::after{color:var(--t-eff)} .arch.is-sel .mtile:not(.is-on){background:transparent} .arch.is-sel .mtile:not(.is-on) .mtile__a{color:var(--sec-dim)} .chips{display:grid;gap:.45rem;grid-template-columns:minmax(0, 1fr)} @media (min-width:480px){.chips--n5,.chips--n6{grid-template-columns:repeat(2, minmax(0, 1fr))}} @media (min-width:780px){.chips--n6{grid-template-columns:repeat(3, minmax(0, 1fr))} .chips--n5{grid-template-columns:repeat(3, minmax(0, 1fr))}} @media (min-width:1060px){.chips--n5{grid-template-columns:repeat(5, minmax(0, 1fr))}} .chip{display:flex;align-items:center;gap:.65em;min-height:44px;padding:.5em .85em; font:600 .8125rem/1.3 var(--ff-sans);color:var(--sec-fg2); background:var(--sec-chip); border:1px solid var(--sec-tile-edge);border-radius:var(--radius-sm); transition:all var(--dur) var(--ease)} .chip::before{content:"";width:8px;height:8px;flex:none;border:1px solid currentColor} .l-cross .chip::before{background:var(--f-auth);border-color:var(--f-auth)} .l-found .chip::before{background:var(--f-evid);border-color:var(--f-evid); transform:rotate(45deg)} .l-sor .chip::before{background:none;border-color:var(--f-rec);border-radius:50%} .arch.is-sel .chip:not(.is-on){color:var(--sec-dim);border-color:var(--sec-edge)} .arch.is-sel .chip:not(.is-on)::before{background:none;border-color:var(--sec-dim)} .arch.is-sel .chip.is-on{background:var(--sec-surf);border-color:currentColor} .sec--light .arch.is-sel .chip.is-on,.sec--alt .arch.is-sel .chip.is-on{ background:var(--c-bg)} .l-cross .chip.is-on{color:var(--t-auth)} .l-found .chip.is-on{color:var(--t-evid)} .l-sor .chip.is-on{color:var(--t-rec)} .arch__sel{margin-top:var(--s-5);padding-top:var(--s-5);min-height:2.4rem; border-top:1px dashed var(--sec-edge);font-size:.9375rem;color:var(--sec-fg2)} .arch__sel b{color:var(--sec-fg);font-weight:600} .arch__note{margin-top:var(--s-6);max-width:70ch;font-size:1.0625rem; color:var(--sec-fg2)} .arch__note b{color:var(--sec-fg);font-weight:600} @media (max-width:820px){.arch__spine{display:none}} /* ============================================ CONTROL / AUTHORITY / EVIDENCE */ .ctrl{display:grid;gap:var(--s-6);margin-top:var(--s-7);grid-template-columns:minmax(0, 1fr)} @media (min-width:640px){.ctrl{grid-template-columns:repeat(2, minmax(0, 1fr))}} @media (min-width:1120px){.ctrl--n4{grid-template-columns:repeat(4, minmax(0, 1fr))} .ctrl--n3,.ctrl--n6{grid-template-columns:repeat(3, minmax(0, 1fr))}} .ctrl__c{padding-top:var(--s-5);border-top:3px solid var(--f-auth)} .ctrl__c--evid{border-top-color:var(--f-evid)} .ctrl__c--rec{border-top-color:var(--f-rec)} .ctrl__c h3{margin-bottom:.6rem;font-size:var(--fs-md)} .ctrl__c p{font-size:.9375rem;color:var(--sec-fg2)} /* ==================================================== MANAGEMENT STORY */ .story{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1.02fr);gap:var(--s-8); align-items:start;margin-top:var(--s-6)} .story__q{max-width:21ch;font-size:var(--fs-xl);letter-spacing:-.02em; line-height:1.2} .story__p{margin-top:var(--s-5);max-width:58ch;font-size:1.0625rem; color:var(--sec-fg2)} .story__p + .story__p{margin-top:var(--s-4)} .story__side{padding:var(--s-6);background:var(--sec-surf); border:1px solid var(--sec-edge);border-radius:var(--r-card)} .sec--light .story__side{background:var(--c-bg-alt)} .sec--alt .story__side{background:var(--c-bg)} .story__step{display:grid;grid-template-columns:auto minmax(0, 1fr);gap:var(--s-4); padding:.9rem 0;border-bottom:1px solid var(--sec-edge)} .story__step:last-of-type{border-bottom:0} .story__d{width:9px;height:9px;margin-top:.55rem;border-radius:50%; background:var(--f-rec)} .story__step--fx .story__d{background:var(--f-eff)} .story__step--auth .story__d{background:var(--f-auth)} .story__step--ev .story__d{background:var(--f-evid)} .story__step b{display:block;font-size:var(--fs-sm);font-weight:600} .story__step span{font-size:.9375rem;color:var(--sec-fg2)} .story__step--fx b{color:var(--t-eff)} .story__step--auth b{color:var(--t-auth)} .story__step--ev b{color:var(--t-evid)} .story__foot{margin-top:var(--s-5);padding-top:var(--s-4); border-top:1px dashed var(--sec-edge);font-size:.875rem;color:var(--sec-dim)} @media (max-width:920px){.story{grid-template-columns:minmax(0, 1fr);gap:var(--s-6)}} /* ================================================================= FAQ */ .faq{margin-top:var(--s-7);border-top:1px solid var(--sec-rule)} .faq details{border-bottom:1px solid var(--sec-rule)} .faq summary{display:flex;align-items:baseline;gap:var(--s-5); padding:var(--s-5) 0;list-style:none;cursor:pointer; font-family:var(--ff-sans);font-size:var(--fs-md);font-weight:600; letter-spacing:-.015em} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";margin-left:auto;font:400 1.4rem/1 var(--ff-mono); color:var(--t-link)} .faq details[open] summary::after{content:"\2013"} .faq__b{padding:0 0 var(--s-5);max-width:70ch;color:var(--sec-fg2)} .faq__b p + p{margin-top:var(--s-4)} .faq__b em{font-style:normal;font-weight:600;color:var(--sec-fg)} .after-faq{margin-top:var(--s-5);font-size:.875rem;color:var(--sec-dim)} .after-faq a{display:inline-flex;align-items:center;min-height:44px; color:var(--t-link);border-bottom:1px solid currentColor} /* ============================================================ CTA/FOOT */ .cta{display:grid;grid-template-columns:minmax(0, 1.08fr) minmax(0, .92fr);gap:var(--s-8); align-items:center} .cta h2{max-width:21ch} .cta p{margin-top:var(--s-5);max-width:52ch;font-size:1.1875rem; color:var(--sec-fg2)} .cta__box{padding:var(--s-7);background:var(--sec-surf); border:1px solid var(--sec-edge);border-radius:var(--r-card); border-left:3px solid var(--c-brand)} .sec--alt .cta__box{background:var(--c-bg)} .sec--deep .cta__box,.sec--deep2 .cta__box{border-left-color:var(--dk-link)} .cta__box dt{margin-bottom:.4em;font:600 var(--fs-xs)/1.2 var(--ff-sans); letter-spacing:.1em;text-transform:uppercase;color:var(--sec-dim)} .cta__box dd{margin:0 0 var(--s-5);font-size:.9375rem} .cta__box dd:last-child{margin-bottom:0} @media (max-width:900px){.cta{grid-template-columns:minmax(0, 1fr);gap:var(--s-6)}} .skip{position:absolute;left:-9999px;padding:.9em 1.2em} .skip:focus{left:var(--s-5);top:.5rem;z-index:99;background:var(--c-bg); color:var(--c-ink);border-radius:var(--radius-sm)} /* prototype only: names the module link instead of dropping the reader on a 404 */ .protonote{position:fixed;left:50%;bottom:1.25rem;transform:translateX(-50%); z-index:80;max-width:min(560px,92vw);padding:.85em 1.15em; background:var(--c-bg-deep);color:var(--dk-fg); border:1px solid var(--dk-link);border-radius:var(--radius-sm); font:600 .875rem/1.35 var(--ff-sans);box-shadow:0 10px 30px rgba(11,27,43,.35)} [hidden]{display:none!important} .vbadge{position:fixed;right:1rem;top:4.6rem;z-index:70;padding:.5em .8em; font:600 .6875rem/1 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase; border-radius:var(--radius-sm);background:var(--c-brand);color:#fff; box-shadow:0 6px 18px rgba(11,27,43,.25)} :root{ --r-surf:8px; --r-card:12px; --r-chip:6px; } /* ---- dark: the product speaks. Density, texture, tighter geometry. */ .sec--deep,.sec--deep2{padding-top:6rem;padding-bottom:6rem} .sec--deep > .wrap,.sec--deep2 > .wrap{max-width:1340px} .sec--deep .cff-bl,.sec--deep2 .cff-bl{letter-spacing:.17em} .sec--deep .arch__h b,.sec--deep2 .arch__h b, .sec--deep .arch__gn,.sec--deep2 .arch__gn{letter-spacing:.16em} .sec--deep .hero__meta dt{letter-spacing:.15em} .cff-mod{padding:1.05rem 1rem} .cff-mod i{margin-top:.5em} .mtile{padding:1rem} .sec--deep .chip,.sec--deep2 .chip{min-height:48px} /* No grid, no blueprint, no texture. Depth on the deep navy comes from three things only, and each of them carries meaning: 1. a light source at the top of every product chapter — one soft radial in the effect colour at 5.5% plus a 2.8% white wash. Tone in tone, no pattern, and it lifts the headline instead of decorating the background. When two dark sections form one chapter, only the first one gets it, so the chapter reads as a single surface. 2. surface differentiation — plates on --d-surf against the --c-bg-deep ground, and the selected state one step up on --d-surf-2. 3. the FinanceOS connection lines that already exist: the module stubs in the flow, the architecture spine, the chain tracks. Those are product explanation, not ornament. */ .sec--deep::before,.sec--deep2::before{content:"";position:absolute;inset:0; pointer-events:none;z-index:0; background: radial-gradient(88% 62% at 12% 0%,rgba(47,163,156,.055),transparent 62%), linear-gradient(180deg,rgba(255,255,255,.028),transparent 40%)} .sec--deep + .sec--deep::before,.sec--deep2 + .sec--deep2::before, .sec--deep + .sec--deep2::before,.sec--deep2 + .sec--deep::before{display:none} .sec--deep > .wrap,.sec--deep2 > .wrap{z-index:1} /* the bands are named in colour at the rule, not again in the copy */ .cff-band--fx{border-top:2px solid var(--f-eff)} .cff-band--dec{border-top:2px solid var(--f-auth)} .cff-rail{box-shadow:inset 3px 0 0 var(--f-auth)} .cff-panel{border-left-width:4px} .arch__layer.l-cross{box-shadow:inset 0 2px 0 var(--f-auth);border-top:0} .arch__layer.l-found{box-shadow:inset 0 2px 0 var(--f-evid);border-top:0} .arch__layer.l-sor{box-shadow:inset 0 2px 0 var(--f-rec);border-top:0} .hero-sec::after{content:"";position:absolute;inset:0 0 auto 0;height:3px; z-index:2;background:linear-gradient(90deg,var(--c-brand) 0%,var(--f-eff) 50%, var(--f-auth) 78%,var(--f-evid) 100%)} .moment__mark{width:96px;height:4px} /* ---- light: we are talking about the reader. Air, measure, softness. */ .sec--light,.sec--alt{padding-top:7.75rem;padding-bottom:7.75rem; font-size:1.0625rem;line-height:1.68} .sec--light > .wrap,.sec--alt > .wrap{max-width:1160px} .sec--light .lead,.sec--alt .lead{line-height:1.62;max-width:58ch} .sec--light .h-sec,.sec--alt .h-sec{letter-spacing:-.024em} .sec--light .entry__c,.sec--alt .entry__c, .sec--light .story__side,.sec--alt .story__side, .sec--light .cta__box,.sec--alt .cta__box{ box-shadow:0 14px 38px rgba(11,27,43,.055)} .sec--light .faq summary,.sec--alt .faq summary{font-size:var(--fs-md)} .sec--light .pain__a,.sec--alt .pain__a{font-size:1.0625rem;line-height:1.68} /* leaving a product chapter: one hairline of the effect colour, so the transition reads as deliberate rather than as a change of stylesheet */ .sec--deep + .sec--light::before,.sec--deep2 + .sec--light::before, .sec--deep + .sec--alt::before,.sec--deep2 + .sec--alt::before{ content:"";position:absolute;inset:0 0 auto 0;height:1px; background:linear-gradient(90deg,var(--f-eff),rgba(47,163,156,0) 42%)} /* ---- the four-stage hero teaser, same stages the flow uses */ .chain__track{grid-template-columns:repeat(4, minmax(0, 1fr))} .chain__n b{display:block;min-height:2.5em;font-size:var(--fs-sm); font-weight:600;line-height:1.25;color:var(--sec-fg)} .chain__n--fx b{color:var(--t-eff)} .chain__n s{display:block;margin-top:.35em;text-decoration:none; font:400 .6875rem/1.4 var(--ff-mono);letter-spacing:.02em;color:var(--sec-dim)} @media (max-width:520px){ .chain__track{grid-template-columns:minmax(0, 1fr);gap:var(--s-4)} .chain__track::before{left:4px;right:auto;top:12px;bottom:12px;width:1px; height:auto} .chain__n{text-align:left;padding-left:var(--s-6)} .chain__n::before{position:absolute;left:0;top:4px;margin:0} .pulse{display:none}} /* ---- restated last: the chapter and tight rules must survive the per-ground padding above */ .sec--deep + .sec--deep,.sec--deep2 + .sec--deep2, .sec--deep + .sec--deep2,.sec--deep2 + .sec--deep{padding-top:0} .sec--alt + .sec--alt,.sec--light + .sec--light{padding-top:0} .sec.sec--tight{padding-top:4.25rem;padding-bottom:4.25rem} /* phones: the same content, less air between chapters */ @media (max-width:600px){ .sec--light,.sec--alt{padding-top:4.5rem;padding-bottom:4.5rem} .sec--deep,.sec--deep2{padding-top:4rem;padding-bottom:4rem} .sec.sec--tight{padding-top:3.25rem;padding-bottom:3.25rem} .moment{padding-top:4.75rem} .mviz{margin-top:var(--s-7)} .sec--deep + .sec--deep,.sec--deep2 + .sec--deep2, .sec--deep + .sec--deep2,.sec--deep2 + .sec--deep, .sec--alt + .sec--alt,.sec--light + .sec--light{padding-top:0}} /* ---- one finding from putting the production header into a 320px viewport. The corporate .nav-actions row (brand + language switch + Demo-buchen button + burger) has a 425px minimum, so the page scrolls sideways below about 430px. That is a pre-existing group-CD defect, not something this page introduced — the same header does it on every business unit. The override is scoped to this page only and loses nothing, because the mobile drawer already carries the same Demo-buchen button. Promoting it into assets/css/styles.css is a separate owner decision. */ @media (max-width:430px){.nav-actions .btn--primary{display:none}} /* ---- second chrome finding, and this one is mine --------------------- The five-column module mega-menu clips its first column. The cap I added to financeos.css when the nav grew from three to five columns raised the panel to 1000px, and the group's edge detection then right-aligns it to a trigger whose right edge sits at about 850px — so the panel starts at a negative x and the FINANCE STEERING column is cut off. Capping the width fixed the overflow on the right and created a clip on the left. A panel that is nearly as wide as the page should not be anchored to a trigger at all. Fixed to the viewport under the sticky header it can neither overflow nor clip, at any width, and the group's align-right class becomes harmless. Suite-local — it changes the FinanceOS nav only, and belongs in draft/suite/assets/css/financeos.css, not in the group stylesheet. Nothing is live yet: the five-column nav is draft-stage. */ .nav-flyout__panel--mega{position:fixed;right:auto; left:calc(50vw - min(520px,(100vw - 32px)/2)); top:calc(var(--header-h,112px) + 6px); width:min(1040px,calc(100vw - 32px));max-width:none} @media (max-width:1023px){.nav-flyout__panel--mega{display:none}} /* ===================================================================== Integrationsschicht — nur beim Betrieb neben styles.css nötig --------------------------------------------------------------------- Der Prototyp war eine Einzeldatei: dort erbten Überschriften die Farbe vom Abschnitt. In der Produktion lädt styles.css davor und setzt h1..h4 { color: var(--c-ink) } als Elementregel — Vererbung greift dann nicht mehr, und auf dunklem Grund stünde Tinte auf Navy. Deshalb nimmt hier jedes farbsetzende Element sein Token aus derselben Gruppe wie die Fläche hinter ihm. ===================================================================== */ .sec h1, .sec h2, .sec h3, .sec h4, .sec .h-hero, .sec .h-sec, .sec .h-moment { color: var(--sec-fg); } .sec p, .sec li, .sec span, .sec b, .sec i, .sec strong, .sec summary, .sec td, .sec th { color: inherit; } .sec { color: var(--sec-fg); } .sec .lead, .sec .pain__close, .sec .protonote { color: var(--sec-fg2); } .sec .eyebrow { color: var(--t-link); } .sec a { color: var(--t-link); } .sec .btn--primary { color: #fff; } .sec .btn--ghost { color: var(--sec-fg); } /* Die Reifegrad-Pills tragen ihre eigene Achse und dürfen nicht von der Abschnittsfarbe überschrieben werden. */ .sec .mchip { color: inherit; } /* Buttons tragen ihre eigene Fläche und dürfen NICHT auf .sec beschränkt sein: der CTA im mobilen Drawer und der im Header liegen außerhalb jeder Sektion und bekämen sonst Tinte auf Brand-Blau — 1,07:1. Derselbe Specificity-Fehler, den der Prototyp schon einmal hatte. */ .btn--primary { color: #fff; } .btn--primary:hover, .btn--primary:focus-visible { color: #fff; } /* styles.css setzt .nav-drawer a und .site-header a als Nachfahrenselektor (0,2,0) und schlaegt damit .btn--primary (0,1,0). Deshalb hier dieselbe Klassenzahl plus Element (0,2,1) — nicht !important. */ .nav-drawer a.btn--primary, .nav-actions a.btn--primary, .site-header a.btn--primary, .site-footer a.btn--primary { color: #fff; } /* ===================================================================== Release-1-Korrekturen — gemessen, nicht vermutet ===================================================================== */ /* 1 · Tap-Targets. Die Modul- und Querlinks waren 15 bis 19 px hoch. Ein Link, der als Ziel gedacht ist, braucht 44 px, auch wenn er typografisch eine Zeile ist. */ .tlink a, .mtile__a a, .after-faq a, .entry__close a { display: inline-flex; align-items: center; min-height: 44px; } /* 2 · Buttons brechen bei 320 px aus dem Viewport, weil .btn ein white-space: nowrap traegt und "Request an architecture conversation" 350 px braucht. Auf kleinen Schirmen darf die Beschriftung umbrechen — ein abgeschnittener CTA ist schlimmer als ein zweizeiliger. */ @media (max-width: 640px) { .btn, .btn--lg { white-space: normal; text-align: center; max-width: 100%; } .btn-row { flex-wrap: wrap; } .btn-row > .btn { flex: 1 1 100%; justify-content: center; } /* Der Kontaktkasten fuehrt lange Eigennamen; die duerfen brechen. */ .cta__box span, .cta__box b { overflow-wrap: anywhere; } } /* 3 · Bildunterschriften und Randbemerkungen brauchen eine eigene Klasse. .protonote ist der fixierte Prototyp-Hinweis (position:fixed, dunkle Pille, z-index 80) und darf nicht als Caption zweckentfremdet werden. */ .sec-note { margin: 1.1rem 0 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--sec-dim); max-width: 68ch; } .sec-note a { color: var(--t-link); display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid currentColor; } .sec-label { display: block; margin: 1.2rem 0 .5rem; font: 500 var(--fs-xs)/1.4 var(--ff-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sec-dim); } /* Reine Sprungmarke ohne eigene Darstellung. scroll-margin-top haelt das Ziel unter dem Sticky-Header, statt es dahinter zu schieben. */ .anchor { display: block; height: 0; scroll-margin-top: calc(var(--header-h, 122px) + 8px); } /* ===================================================================== Lead-Formular auf hellem Grund --------------------------------------------------------------------- Das Gruppen-Formular (.lead-form in financeos.css) ist fuer dunkle Flaechen gebaut: jede Farbe darin ist ein rgba(255,255,255,…). Der Kontaktabschnitt dieser Seiten liegt auf hellem Grund, und der Grund ist eine eingefrorene Designentscheidung — hell ist die Finance- Realitaet des Kunden, dunkel das Produkt. Deshalb steht hier dieselbe Komponente grundneutral: Struktur und Verhalten identisch (gleiche Klassennamen, gleiches Markup, gleiche is-sent-Logik aus site.js), Farben aus den Abschnitts-Tokens. Die minmax(0,…)-Regeln sind uebernommen, weil ein