@charset "UTF-8"; /*!
 * Bootstrap  v5.3.3 (https://getbootstrap.com/)
 * Copyright 2011-2024 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */ :root, [data-bs-theme=light] { --bs-blue: #0d6efd; --bs-indigo: #6610f2; --bs-purple: #6f42c1; --bs-pink: #d63384; --bs-red: #dc3545; --bs-orange: #fd7e14; --bs-yellow: #ffc107; --bs-green: #198754; --bs-teal: #20c997; --bs-cyan: #0dcaf0; --bs-black: #000; --bs-white: #fff; --bs-gray: #6c757d; --bs-gray-dark: #343a40; --bs-gray-100: #f8f9fa; --bs-gray-200: #e9ecef; --bs-gray-300: #dee2e6; --bs-gray-400: #ced4da; --bs-gray-500: #adb5bd; --bs-gray-600: #6c757d; --bs-gray-700: #495057; --bs-gray-800: #343a40; --bs-gray-900: #212529; --bs-primary: #0d6efd; --bs-secondary: #6c757d; --bs-success: #198754; --bs-info: #0dcaf0; --bs-warning: #ffc107; --bs-danger: #dc3545; --bs-light: #f8f9fa; --bs-dark: #212529; --bs-primary-rgb: 13, 110, 253; --bs-secondary-rgb: 108, 117, 125; --bs-success-rgb: 25, 135, 84; --bs-info-rgb: 13, 202, 240; --bs-warning-rgb: 255, 193, 7; --bs-danger-rgb: 220, 53, 69; --bs-light-rgb: 248, 249, 250; --bs-dark-rgb: 33, 37, 41; --bs-primary-text-emphasis: #052c65; --bs-secondary-text-emphasis: #2b2f32; --bs-success-text-emphasis: #0a3622; --bs-info-text-emphasis: #055160; --bs-warning-text-emphasis: #664d03; --bs-danger-text-emphasis: #58151c; --bs-light-text-emphasis: #495057; --bs-dark-text-emphasis: #495057; --bs-primary-bg-subtle: #cfe2ff; --bs-secondary-bg-subtle: #e2e3e5; --bs-success-bg-subtle: #d1e7dd; --bs-info-bg-subtle: #cff4fc; --bs-warning-bg-subtle: #fff3cd; --bs-danger-bg-subtle: #f8d7da; --bs-light-bg-subtle: #fcfcfd; --bs-dark-bg-subtle: #ced4da; --bs-primary-border-subtle: #9ec5fe; --bs-secondary-border-subtle: #c4c8cb; --bs-success-border-subtle: #a3cfbb; --bs-info-border-subtle: #9eeaf9; --bs-warning-border-subtle: #ffe69c; --bs-danger-border-subtle: #f1aeb5; --bs-light-border-subtle: #e9ecef; --bs-dark-border-subtle: #adb5bd; --bs-white-rgb: 255, 255, 255; --bs-black-rgb: 0, 0, 0; --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); --bs-body-font-family: var(--bs-font-sans-serif); --bs-body-font-size: 1rem; --bs-body-font-weight: 400; --bs-body-line-height: 1.5; --bs-body-color: #212529; --bs-body-color-rgb: 33, 37, 41; --bs-body-bg: #fff; --bs-body-bg-rgb: 255, 255, 255; --bs-emphasis-color: #000; --bs-emphasis-color-rgb: 0, 0, 0; --bs-secondary-color: rgba(33, 37, 41, 0.75); --bs-secondary-color-rgb: 33, 37, 41; --bs-secondary-bg: #e9ecef; --bs-secondary-bg-rgb: 233, 236, 239; --bs-tertiary-color: rgba(33, 37, 41, 0.5); --bs-tertiary-color-rgb: 33, 37, 41; --bs-tertiary-bg: #f8f9fa; --bs-tertiary-bg-rgb: 248, 249, 250; --bs-heading-color: inherit; --bs-link-color: #0d6efd; --bs-link-color-rgb: 13, 110, 253; --bs-link-decoration: underline; --bs-link-hover-color: #0a58ca; --bs-link-hover-color-rgb: 10, 88, 202; --bs-code-color: #d63384; --bs-highlight-color: #212529; --bs-highlight-bg: #fff3cd; --bs-border-width: 1px; --bs-border-style: solid; --bs-border-color: #dee2e6; --bs-border-color-translucent: rgba(0, 0, 0, 0.175); --bs-border-radius: 0.375rem; --bs-border-radius-sm: 0.25rem; --bs-border-radius-lg: 0.5rem; --bs-border-radius-xl: 1rem; --bs-border-radius-xxl: 2rem; --bs-border-radius-2xl: var(--bs-border-radius-xxl); --bs-border-radius-pill: 50rem; --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175); --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075); --bs-focus-ring-width: 0.25rem; --bs-focus-ring-opacity: 0.25; --bs-focus-ring-color: rgba(13, 110, 253, 0.25); --bs-form-valid-color: #198754; --bs-form-valid-border-color: #198754; --bs-form-invalid-color: #dc3545; --bs-form-invalid-border-color: #dc3545; } [data-bs-theme=dark] { color-scheme: dark; --bs-body-color: #dee2e6; --bs-body-color-rgb: 222, 226, 230; --bs-body-bg: #212529; --bs-body-bg-rgb: 33, 37, 41; --bs-emphasis-color: #fff; --bs-emphasis-color-rgb: 255, 255, 255; --bs-secondary-color: rgba(222, 226, 230, 0.75); --bs-secondary-color-rgb: 222, 226, 230; --bs-secondary-bg: #343a40; --bs-secondary-bg-rgb: 52, 58, 64; --bs-tertiary-color: rgba(222, 226, 230, 0.5); --bs-tertiary-color-rgb: 222, 226, 230; --bs-tertiary-bg: #2b3035; --bs-tertiary-bg-rgb: 43, 48, 53; --bs-primary-text-emphasis: #6ea8fe; --bs-secondary-text-emphasis: #a7acb1; --bs-success-text-emphasis: #75b798; --bs-info-text-emphasis: #6edff6; --bs-warning-text-emphasis: #ffda6a; --bs-danger-text-emphasis: #ea868f; --bs-light-text-emphasis: #f8f9fa; --bs-dark-text-emphasis: #dee2e6; --bs-primary-bg-subtle: #031633; --bs-secondary-bg-subtle: #161719; --bs-success-bg-subtle: #051b11; --bs-info-bg-subtle: #032830; --bs-warning-bg-subtle: #332701; --bs-danger-bg-subtle: #2c0b0e; --bs-light-bg-subtle: #343a40; --bs-dark-bg-subtle: #1a1d20; --bs-primary-border-subtle: #084298; --bs-secondary-border-subtle: #41464b; --bs-success-border-subtle: #0f5132; --bs-info-border-subtle: #087990; --bs-warning-border-subtle: #997404; --bs-danger-border-subtle: #842029; --bs-light-border-subtle: #495057; --bs-dark-border-subtle: #343a40; --bs-heading-color: inherit; --bs-link-color: #6ea8fe; --bs-link-hover-color: #8bb9fe; --bs-link-color-rgb: 110, 168, 254; --bs-link-hover-color-rgb: 139, 185, 254; --bs-code-color: #e685b5; --bs-highlight-color: #dee2e6; --bs-highlight-bg: #664d03; --bs-border-color: #495057; --bs-border-color-translucent: rgba(255, 255, 255, 0.15); --bs-form-valid-color: #75b798; --bs-form-valid-border-color: #75b798; --bs-form-invalid-color: #ea868f; --bs-form-invalid-border-color: #ea868f; } *, *::before, *::after { box-sizing: border-box; } @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } } body { margin: 0; font-family: var(--bs-body-font-family); font-size: var(--bs-body-font-size); font-weight: var(--bs-body-font-weight); line-height: var(--bs-body-line-height); color: var(--bs-body-color); text-align: var(--bs-body-text-align); background-color: var(--bs-body-bg); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } hr { margin: 1rem 0; color: inherit; border: 0; border-top: var(--bs-border-width) solid; opacity: 0.25; } h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { margin-top: 0; margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2; color: var(--bs-heading-color); } h1, .h1 { font-size: calc(1.375rem + 1.5vw); } @media (min-width: 1200px) { h1, .h1 { font-size: 2.5rem; } } h2, .h2 { font-size: calc(1.325rem + 0.9vw); } @media (min-width: 1200px) { h2, .h2 { font-size: 2rem; } } h3, .h3 { font-size: calc(1.3rem + 0.6vw); } @media (min-width: 1200px) { h3, .h3 { font-size: 1.75rem; } } h4, .h4 { font-size: calc(1.275rem + 0.3vw); } @media (min-width: 1200px) { h4, .h4 { font-size: 1.5rem; } } h5, .h5 { font-size: 1.25rem; } h6, .h6 { font-size: 1rem; } p { margin-top: 0; margin-bottom: 1rem; } abbr[title] { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; cursor: help; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; } address { margin-bottom: 1rem; font-style: normal; line-height: inherit; } ol, ul { padding-left: 2rem; } ol, ul, dl { margin-top: 0; margin-bottom: 1rem; } ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; } dt { font-weight: 700; } dd { margin-bottom: 0.5rem; margin-left: 0; } blockquote { margin: 0 0 1rem; } b, strong { font-weight: bolder; } small, .small { font-size: 0.875em; } mark, .mark { padding: 0.1875em; color: var(--bs-highlight-color); background-color: var(--bs-highlight-bg); } sub, sup { position: relative; font-size: 0.75em; line-height: 0; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } a { color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)); text-decoration: underline; } a:hover { --bs-link-color-rgb: var(--bs-link-hover-color-rgb); } a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none; } pre, code, kbd, samp { font-family: var(--bs-font-monospace); font-size: 1em; } pre { display: block; margin-top: 0; margin-bottom: 1rem; overflow: auto; font-size: 0.875em; } pre code { font-size: inherit; color: inherit; word-break: normal; } code { font-size: 0.875em; color: var(--bs-code-color); word-wrap: break-word; } a > code { color: inherit; } kbd { padding: 0.1875rem 0.375rem; font-size: 0.875em; color: var(--bs-body-bg); background-color: var(--bs-body-color); border-radius: 0.25rem; } kbd kbd { padding: 0; font-size: 1em; } figure { margin: 0 0 1rem; } img, svg { vertical-align: middle; } table { caption-side: bottom; border-collapse: collapse; } caption { padding-top: 0.5rem; padding-bottom: 0.5rem; color: var(--bs-secondary-color); text-align: left; } th { text-align: inherit; text-align: -webkit-match-parent; } thead, tbody, tfoot, tr, td, th { border-color: inherit; border-style: solid; border-width: 0; } label { display: inline-block; } button { border-radius: 0; } button:focus:not(:focus-visible) { outline: 0; } input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } button, select { text-transform: none; } [role=button] { cursor: pointer; } select { word-wrap: normal; } select:disabled { opacity: 1; } [list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator { display: none !important; } button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } button:not(:disabled), [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled) { cursor: pointer; } ::-moz-focus-inner { padding: 0; border-style: none; } textarea { resize: vertical; } fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } legend { float: left; width: 100%; padding: 0; margin-bottom: 0.5rem; font-size: calc(1.275rem + 0.3vw); line-height: inherit; } @media (min-width: 1200px) { legend { font-size: 1.5rem; } } legend + * { clear: left; } ::-webkit-datetime-edit-fields-wrapper, ::-webkit-datetime-edit-text, ::-webkit-datetime-edit-minute, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-year-field { padding: 0; } ::-webkit-inner-spin-button { height: auto; } [type=search] { -webkit-appearance: textfield; outline-offset: -2px; }   ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-color-swatch-wrapper { padding: 0; } ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; } ::file-selector-button { font: inherit; -webkit-appearance: button; } output { display: inline-block; } iframe { border: 0; } summary { display: list-item; cursor: pointer; } progress { vertical-align: baseline; } [hidden] { display: none !important; } .lead { font-size: 1.25rem; font-weight: 300; } .display-1 { font-size: calc(1.625rem + 4.5vw); font-weight: 300; line-height: 1.2; } @media (min-width: 1200px) { .display-1 { font-size: 5rem; } } .display-2 { font-size: calc(1.575rem + 3.9vw); font-weight: 300; line-height: 1.2; } @media (min-width: 1200px) { .display-2 { font-size: 4.5rem; } } .display-3 { font-size: calc(1.525rem + 3.3vw); font-weight: 300; line-height: 1.2; } @media (min-width: 1200px) { .display-3 { font-size: 4rem; } } .display-4 { font-size: calc(1.475rem + 2.7vw); font-weight: 300; line-height: 1.2; } @media (min-width: 1200px) { .display-4 { font-size: 3.5rem; } } .display-5 { font-size: calc(1.425rem + 2.1vw); font-weight: 300; line-height: 1.2; } @media (min-width: 1200px) { .display-5 { font-size: 3rem; } } .display-6 { font-size: calc(1.375rem + 1.5vw); font-weight: 300; line-height: 1.2; } @media (min-width: 1200px) { .display-6 { font-size: 2.5rem; } } .list-unstyled { padding-left: 0; list-style: none; } .list-inline { padding-left: 0; list-style: none; } .list-inline-item { display: inline-block; } .list-inline-item:not(:last-child) { margin-right: 0.5rem; } .initialism { font-size: 0.875em; text-transform: uppercase; } .blockquote { margin-bottom: 1rem; font-size: 1.25rem; } .blockquote > :last-child { margin-bottom: 0; } .blockquote-footer { margin-top: -1rem; margin-bottom: 1rem; font-size: 0.875em; color: #6c757d; } .blockquote-footer::before { content: "— "; } .img-fluid { max-width: 100%; height: auto; } .img-thumbnail { padding: 0.25rem; background-color: var(--bs-body-bg); border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); max-width: 100%; height: auto; } .figure { display: inline-block; } .figure-img { margin-bottom: 0.5rem; line-height: 1; } .figure-caption { font-size: 0.875em; color: var(--bs-secondary-color); } .container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; width: 100%; padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5); margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .container-sm, .container { max-width: 540px; } } @media (min-width: 768px) { .container-md, .container-sm, .container { max-width: 720px; } } @media (min-width: 992px) { .container-lg, .container-md, .container-sm, .container { max-width: 960px; } } @media (min-width: 1200px) { .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1140px; } } @media (min-width: 1400px) { .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1320px; } } :root { --bs-breakpoint-xs: 0; --bs-breakpoint-sm: 576px; --bs-breakpoint-md: 768px; --bs-breakpoint-lg: 992px; --bs-breakpoint-xl: 1200px; --bs-breakpoint-xxl: 1400px; } .form-label { margin-bottom: 0.5rem; } .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: #0d6efd; --bs-btn-border-color: #0d6efd; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0b5ed7; --bs-btn-hover-border-color: #0a58ca; --bs-btn-focus-shadow-rgb: 49, 132, 253; --bs-btn-active-color: #fff; --bs-btn-active-bg: #0a58ca; --bs-btn-active-border-color: #0a53be; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #0d6efd; --bs-btn-disabled-border-color: #0d6efd; } .btn-secondary { --bs-btn-color: #fff; --bs-btn-bg: #6c757d; --bs-btn-border-color: #6c757d; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #5c636a; --bs-btn-hover-border-color: #565e64; --bs-btn-focus-shadow-rgb: 130, 138, 145; --bs-btn-active-color: #fff; --bs-btn-active-bg: #565e64; --bs-btn-active-border-color: #51585e; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #6c757d; --bs-btn-disabled-border-color: #6c757d; } .navbar { --bs-navbar-padding-x: 0; --bs-navbar-padding-y: 0.5rem; --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.65); --bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), 0.8); --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3); --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1); --bs-navbar-brand-padding-y: 0.3125rem; --bs-navbar-brand-margin-end: 1rem; --bs-navbar-brand-font-size: 1.25rem; --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1); --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1); --bs-navbar-nav-link-padding-x: 0.5rem; --bs-navbar-toggler-padding-y: 0.25rem; --bs-navbar-toggler-padding-x: 0.75rem; --bs-navbar-toggler-font-size: 1.25rem; --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15); --bs-navbar-toggler-border-radius: var(--bs-border-radius); --bs-navbar-toggler-focus-width: 0.25rem; --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out; position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x); }   @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/Inter/Inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/Inter/Inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/JetBrainsMono/JetBrainsMono-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/JetBrainsMono/JetBrainsMono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }   :root { color-scheme: dark; --surface: #0f131c; --surface-container-lowest: #0a0e17; --surface-container-low: #181b25; --surface-container: #1c1f29; --surface-container-high: #262a34; --surface-container-highest: #31353f; --surface-bright: #353943; --primary: #ffd99a; --primary-container: #f2b94c; --on-primary: #422d00; --secondary: #4edea3; --tertiary: #9eeaff; --error: #ffb4ab; --error-container: #93000a; --on-error-container: #ffdad6; --bg: var(--surface); --bg-card: var(--surface-container-low); --bg-card-hover: var(--surface-container-high); --bg-elevated: var(--surface-container); --bg-inset: var(--surface-container-lowest); --bg-nav: color-mix(in srgb, var(--bg) 94%, transparent); --accent: var(--primary); --accent-hover: #ffdea9; --accent-glow: color-mix(in srgb, var(--primary-container) 15%, transparent); --accent-subtle: color-mix(in srgb, var(--primary-container) 8%, transparent); --accent-border: color-mix(in srgb, var(--primary-container) 30%, transparent); --accent-grid: color-mix(in srgb, var(--primary-container) 3%, transparent); --cta-bg: var(--primary-container); --cta-hover: var(--primary); --cta-text: var(--surface-container-lowest); --danger: var(--error); --warning: var(--primary); --success: var(--secondary);   --critical: #ff6b6b; --danger-subtle: color-mix(in srgb, var(--error) 10%, var(--bg-inset)); --danger-border: color-mix(in srgb, var(--error) 40%, var(--bg-inset)); --success-subtle: color-mix(in srgb, var(--secondary) 10%, transparent); --success-border: color-mix(in srgb, var(--secondary) 25%, transparent); --info-subtle: color-mix(in srgb, var(--tertiary) 8%, var(--bg-inset)); --info-border: color-mix(in srgb, var(--tertiary) 30%, var(--bg-inset)); --text: #dfe2ef; --text-muted: #d3c4b0; --text-dim: #9c8f7c; --border: var(--surface-container-highest); --border-light: #4f4536; --border-hover: #9c8f7c; --overlay: color-mix(in srgb, var(--bg-inset) 75%, transparent); --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace; --font-display: 'Inter', system-ui, sans-serif; --font-body: var(--font-display); --text-body: 15px; --text-small: 13px; --text-code: 12px; --headline-xl: 56px; --headline-lg: 40px; --headline-md: 28px; --headline-sm: 20px; --tracking-headline: -0.025em; --radius: 0.25rem; --radius-xs: 0.125rem; --radius-sm: var(--radius); --radius-md: var(--radius); --radius-lg: 0.375rem; --radius-xl: 0.5rem; --radius-pill: 9999px;   --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 72px; --space-4xl: 96px;   --content-space-scale: 1.2; --space-block-2xs: calc(var(--space-2xs) * var(--content-space-scale)); --space-block-xs: calc(var(--space-xs) * var(--content-space-scale)); --space-block-sm: calc(var(--space-sm) * var(--content-space-scale)); --space-block-md: calc(var(--space-md) * var(--content-space-scale)); --space-block-lg: calc(var(--space-lg) * var(--content-space-scale)); --space-block-xl: calc(var(--space-xl) * var(--content-space-scale)); --space-block-2xl: calc(var(--space-2xl) * var(--content-space-scale)); --space-block-3xl: calc(var(--space-3xl) * var(--content-space-scale)); --space-block-4xl: calc(var(--space-4xl) * var(--content-space-scale)); --shadow-glow: 0 0 24px var(--accent-glow); --shadow-glow-lg: 0 0 24px var(--accent-border); --shadow-surface: 0 1px 0 var(--border); --shadow-card-hover: inset 0 1px 0 var(--accent-border); --shadow-overlay: 0 0 0 1px var(--border-light); --shadow-lg: 0 18px 50px color-mix(in srgb, var(--surface-container-lowest) 55%, transparent);   --motion-time-scale: 1.3; --motion-fast: calc(220ms * var(--motion-time-scale)); --motion-reveal: calc(560ms * var(--motion-time-scale)); --motion-step: calc(240ms * var(--motion-time-scale)); --motion-stagger: calc(160ms * var(--motion-time-scale)); --motion-intro-step: calc(var(--motion-stagger) / 2); --motion-media: calc(var(--motion-reveal) + var(--motion-stagger)); --motion-ease: cubic-bezier(0.22, 1, 0.36, 1); --transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease); --transition-slow: all calc(0.3s * var(--motion-time-scale)) ease; --navbar-height: 64px; }   *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;   -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--text-body); line-height: 1.6; min-height: 100vh; overflow-x: hidden; }   @supports (-webkit-touch-callout: none) { .loading-blazor, .loading-screen { height: -webkit-fill-available; } body, .page-container, .hero, .riskscore-page, .shared-files-page, .legal-page, .bc-page { min-height: -webkit-fill-available; } } a { color: var(--accent); text-decoration: none; transition: var(--transition); -webkit-tap-highlight-color: transparent; } a:hover { color: var(--accent-hover); } button { font-family: var(--font-body); cursor: pointer; border: none; outline: none;   -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }   .loading-blazor { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; height: 100dvh; gap: var(--space-lg); } .loading-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; height: 100dvh; gap: var(--space-lg); } .loading-logo { width: 48px; height: 48px; background-size: contain; background-repeat: no-repeat; background-position: center;   font-family: initial; font-weight: initial; font-size: initial; color: initial; background-color: initial; padding: initial; border-radius: initial; border: initial; } .loading-bar { width: 120px; height: 3px; background: var(--border); border-radius: var(--radius-xs); overflow: hidden; } .loading-bar-fill { width: 40%; height: 100%; background: var(--accent); border-radius: var(--radius-xs); animation: loading-slide calc(1.2s * var(--motion-time-scale)) ease-in-out infinite; } @keyframes loading-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }   #blazor-error-ui { display: none; position: fixed; bottom: 0; width: 100%; padding: var(--space-sm); background: var(--error-container); color: var(--on-error-container); text-align: center; font-family: var(--font-mono); font-size: 13px; z-index: 9999; } #blazor-error-ui .reload { color: var(--on-error-container); text-decoration: underline; margin-left: var(--space-xs); }   .page-container { min-height: 100vh; min-height: 100dvh; } .section-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-lg); }   .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: background-color calc(.3s * var(--motion-time-scale)) ease, border-color calc(.3s * var(--motion-time-scale)) ease, box-shadow calc(.3s * var(--motion-time-scale)) ease; padding: 0 var(--space-lg); background: var(--bg-nav); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); } .navbar.scrolled { background: var(--bg-nav); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-surface); backdrop-filter: blur(12px); } .navbar-inner { width: 100%; max-width: 1440px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: var(--navbar-height); } .navbar-logo { display: flex; align-items: center; gap: 10px; } .navbar-logo-mark { width: 32px; height: 32px; object-fit: contain; border-radius: var(--radius-sm); } .navbar-logo-text { font-family: var(--font-mono); font-size: 14px; color: var(--text-muted); letter-spacing: 0.05em; } .navbar-links { display: flex; gap: var(--space-lg); align-items: center; } .navbar-link { white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; background: none; color: var(--text-muted); font-size: 13px; letter-spacing: 0.03em; transition: var(--transition); } .navbar-link:hover { color: var(--text); } .navbar-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; white-space: nowrap; background: var(--cta-bg); color: var(--cta-text); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; transition: var(--transition); font-family: var(--font-body); } .navbar-cta:hover { background: var(--cta-hover); color: var(--cta-text); }   .navbar-toggle { display: none; background: none; color: var(--text-muted); font-size: 24px; padding: var(--space-2xs);   min-width: 44px; min-height: 44px; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; } @media (max-width: 1279px) { .navbar-links { display: none; } .navbar-links.open { display: flex; flex-direction: column; position: absolute; top: var(--navbar-height); left: 0; right: 0; background: var(--bg); padding: var(--space-lg); gap: var(--space-xs); align-items: stretch; max-height: calc(100dvh - var(--navbar-height)); overflow-y: auto; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-surface); } .navbar-toggle { display: inline-flex; } }   .hero { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; position: relative; overflow: hidden; padding: 120px var(--space-lg) 80px; } .hero-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(var(--accent-grid) 1px, transparent 1px), linear-gradient(90deg, var(--accent-grid) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; } .hero-glow { position: absolute; top: -20%; right: -10%; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, var(--accent-subtle) 0%, transparent 70%); -webkit-filter: blur(40px); filter: blur(40px);   -webkit-transform: translateZ(0); transform: translateZ(0); pointer-events: none; } .hero-content { max-width: 1200px; margin: 0 auto; width: 100%; opacity: 0; transform: translateY(30px); animation: hero-enter calc(0.8s * var(--motion-time-scale)) cubic-bezier(0.16, 1, 0.3, 1) calc(0.2s * var(--motion-time-scale)) forwards; } @keyframes hero-enter { to { opacity: 1; transform: translateY(0); } }   .hero-content, .about-photo-img, .promise-card, .contact-option, .btn-primary, .service-cta-btn { -webkit-backface-visibility: hidden; backface-visibility: hidden; } .hero-badge { display: inline-flex; align-items: center; gap: var(--space-xs); background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-pill); padding: 6px var(--space-md); margin-bottom: var(--space-xl); } .hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 8px var(--accent-glow); animation: pulse-dot calc(2s * var(--motion-time-scale)) ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .hero-badge-text { font-size: 12px; color: var(--text-muted); letter-spacing: 0.05em; } .hero-headline { font-family: var(--font-display); font-size: clamp(36px, 5vw, var(--headline-xl)); font-weight: 800; line-height: 1.143; color: var(--text); max-width: 800px; margin-bottom: var(--space-lg); -webkit-user-select: none !important; user-select: none !important; letter-spacing: -0.03em; } .hero-headline-accent { color: var(--accent); } .hero-subline { font-size: clamp(14px, 1.5vw, 18px); color: var(--text-muted); max-width: 560px; line-height: 1.7; margin-bottom: var(--space-2xl); } .hero-cta-group { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-bottom: 64px; } .btn-primary { background: var(--cta-bg); color: var(--cta-text); padding: 14px 28px; border-radius: var(--radius-md); font-size: 15px; font-weight: 600; transition: var(--transition); box-shadow: var(--shadow-glow); font-family: var(--font-body); } .btn-primary:disabled { background-color: var(--cta-bg); cursor: not-allowed; opacity: 0.7; box-shadow: none; transform: none; } .btn-primary:hover { transform: none; box-shadow: var(--shadow-glow-lg); background: var(--cta-hover); color: var(--cta-text); } .btn-secondary { background: var(--bg-card); color: var(--text); border: 1px solid var(--border-light); padding: 14px 28px; border-radius: var(--radius-md); font-size: 15px; font-weight: 500; transition: var(--transition); font-family: var(--font-body); } .btn-secondary:hover { border-color: var(--border-hover); color: var(--text); background: var(--bg-card-hover); } .btn-full { width: 100%; text-align: center; }   .hero-metrics {   display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 700px; }   @media (min-width: 768px) { .hero-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); } } .hero-metric { border-left: 2px solid var(--accent); padding-left: var(--space-md); } .hero-metric-value { font-size: 28px; font-weight: 700; color: var(--accent); } .hero-metric-label { font-size: 12px; color: var(--text-dim); line-height: 1.4; } a.hero-metric { min-height: 44px; color: inherit; text-decoration: none; } a.hero-metric .hero-metric-label { text-decoration: underline; text-underline-offset: 3px; }   .section { padding: calc(100px * var(--content-space-scale)) var(--space-lg); border-top: 1px solid var(--border); } .section[id], .promise-section { scroll-margin-top: calc(var(--navbar-height) + 20px); } .section-label { font-size: 11px; color: var(--accent); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: var(--space-block-md); } .section-title { font-family: var(--font-display); font-size: clamp(28px, 3.5vw, var(--headline-lg)); font-weight: 700; color: var(--text); max-width: 700px; line-height: 1.2; margin-bottom: var(--space-block-2xl); letter-spacing: var(--tracking-headline); }   .problem-header { display: grid; gap: var(--space-lg); margin-bottom: 40px; } .problem-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; background: var(--accent-subtle); border: 1px solid var(--accent-border); border-radius: var(--radius-sm); } .problem-eyebrow-dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .problem-subtitle { max-width: 720px; font-family: var(--font-mono); font-size: var(--text-small); line-height: 1.7; color: var(--text-muted); } .problem-status { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: var(--space-xs) var(--space-md); font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--text-muted); background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--radius-xl); } .problem-status-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 8px var(--danger-border); animation: pulse-dot calc(2s * var(--motion-time-scale)) ease-in-out infinite; } .problem-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }   .problem-card { --severity: var(--danger); --severity-subtle: var(--danger-subtle); --severity-border: var(--danger-border); display: flex; flex-direction: column; min-width: 0; padding: var(--space-lg); background: var(--bg-card); border: 1px solid var(--border); border-top: 2px solid var(--severity-border); border-radius: var(--radius-xl); transition: var(--transition); } .problem-card.severity-warning { --severity: var(--warning); --severity-subtle: var(--accent-subtle); --severity-border: var(--accent-border); } .problem-card:hover { background: var(--bg-card-hover); border-color: var(--border-light); border-top-color: var(--severity); } .problem-card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-sm); margin-bottom: var(--space-lg); } .problem-index { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } .problem-badge { padding: 3px var(--space-xs); font-family: var(--font-mono); font-size: 11px; font-weight: 600; line-height: 1.4; white-space: nowrap; color: var(--severity); background: var(--severity-subtle); border: 1px solid var(--severity-border); border-radius: var(--radius-sm); } .problem-metric { margin-bottom: var(--space-sm); font-size: 36px; font-weight: 600; line-height: 1.1; color: var(--severity); } .problem-card-title { margin-bottom: var(--space-sm); font-family: var(--font-mono); font-size: 15px; font-weight: 700; line-height: 1.4; letter-spacing: normal; color: var(--text); } .problem-desc { flex: 1; margin-bottom: var(--space-lg); font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--text-muted); } .problem-indicator { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin: 0; padding-top: var(--space-md); border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 12px; line-height: 1.5; } .problem-indicator dt { flex: 1 1 auto; min-width: 0; color: var(--text-dim); }   .problem-indicator dd { flex: 0 0 auto; max-width: 60%; margin: 0; font-weight: 600; text-align: right; color: var(--severity); } .problem-callout { display: flex; flex-direction: column; gap: var(--space-lg); margin-top: 40px; padding: var(--space-lg); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); } .problem-closing { margin-bottom: var(--space-xs); font-family: var(--font-mono); font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--text); } .problem-closing-prefix { color: var(--accent); } .problem-closing-detail { font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--text-muted); } .problem-cta { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-sm) 20px; font-family: var(--font-mono); font-size: var(--text-small); font-weight: 600; line-height: 1.4; text-align: center; color: var(--accent); background: var(--accent-subtle); border: 1px solid var(--accent-border); border-radius: var(--radius-md); transition: var(--transition); } .problem-cta:hover { color: var(--accent-hover); background: var(--accent-glow); border-color: var(--accent); } @media (min-width: 640px) { .problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) { .problem-callout { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--space-xl) 40px; } .problem-cta { flex-shrink: 0; } .problem-closing { font-size: 18px; } } @media (min-width: 1024px) { .problem-header { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } .problem-status { justify-self: end; white-space: nowrap; } .problem-subtitle { font-size: 14px; } .problem-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); } .problem-card { padding: 28px; } }   .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; } .service-cta-btn { background: var(--cta-bg); color: var(--cta-text); padding: var(--space-sm) 20px; border-radius: var(--radius-md); font-size: var(--text-body); font-weight: 600; transition: var(--transition); box-shadow: var(--shadow-glow); margin-top: 20px; border: none; cursor: pointer; font-family: var(--font-body); align-self: flex-start; } .service-cta-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow-lg); background: var(--cta-hover); color: var(--cta-text); } .service-card { display: flex; flex-direction: column; min-width: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; position: relative; overflow: hidden; transition: var(--transition); } .service-card:hover { border-color: var(--border-light); background: var(--bg-card-hover); box-shadow: var(--shadow-card-hover); } .service-card.highlight { border-color: var(--accent); box-shadow: var(--shadow-card-hover); } .service-card-glow { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), transparent); } .service-card-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-sm); } .service-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; } .service-step { font-size: 11px; color: var(--text-dim); letter-spacing: 0.1em; line-height: 1.5; } .service-step-special { color: var(--accent); font-weight: 700; } .service-badge, .service-duration { display: inline-flex; align-items: center; min-height: 24px; padding: var(--space-2xs) var(--space-xs); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); color: var(--text-dim); font-family: var(--font-mono); font-size: 10px; font-weight: 600; line-height: 1.4; } .service-badge { color: var(--accent); background: var(--accent-subtle); border-color: var(--accent-border); letter-spacing: 0.04em; } .service-title { font-family: var(--font-display); font-size: var(--headline-sm); font-weight: 600; color: var(--text); margin-bottom: var(--space-xs); line-height: 1.4; letter-spacing: -0.01em; } .service-tag { font-size: 12px; color: var(--accent); background: var(--accent-subtle); display: inline-block; max-width: 100%; padding: var(--space-2xs) 10px; border-radius: var(--radius); margin-bottom: var(--space-md); overflow-wrap: anywhere; } .service-desc { font-size: 13px; color: var(--text-muted); line-height: 1.7; } .service-features { margin-bottom: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--border); } .service-features-title, .service-packages-title { margin: 0 0 var(--space-sm); color: var(--text); font-size: 12px; font-weight: 700; } .service-feature-list { display: flex; flex-direction: column; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; line-height: 1.55; } .service-feature-list li { position: relative; padding-left: 16px; overflow-wrap: anywhere; } .service-feature-list li::before { content: "›"; position: absolute; left: 0; color: var(--accent); font-weight: 700; } .service-feature-more { margin-top: var(--space-sm); border-top: 1px solid var(--border); } .service-feature-more summary { display: flex; align-items: center; min-height: 44px; color: var(--accent); cursor: pointer; font-family: var(--font-mono); font-size: 11px; font-weight: 600; } .service-feature-more[open] summary { margin-bottom: var(--space-xs); } .service-packages { margin-bottom: var(--space-md); } .service-package-list { display: grid; gap: var(--space-xs); margin: 0; } .service-package { min-width: 0; padding: var(--space-sm); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-inset); } .service-package dt { margin-bottom: var(--space-2xs); color: var(--text); font-size: 12px; font-weight: 700; } .service-package dd { display: flex; flex-direction: column; gap: var(--space-2xs); margin: 0; color: var(--text-muted); font-family: var(--font-mono); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; } .service-package strong { color: var(--accent); font-weight: 700; } .service-card-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-sm); margin-top: auto; } .service-card-actions .service-detail-link, .service-card-actions .service-supporting-link, .service-card-actions .service-cta-btn { margin-top: 0; } .service-card-actions .service-detail-link, .service-card-actions .service-supporting-link { display: inline-flex; align-items: center; min-height: 44px; } .service-cta-btn.service-cta-btn-secondary { background: var(--bg-card); color: var(--text); border: 1px solid var(--border-light); box-shadow: none; } .service-cta-btn.service-cta-btn-secondary:hover { background: var(--bg-card-hover); color: var(--text); border-color: var(--border-hover); box-shadow: none; } .services-note { margin-top: var(--space-xl); padding: var(--space-md) var(--space-lg); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); } .services-note p { font-size: 13px; color: var(--text-muted); line-height: 1.6; } .services-note strong { color: var(--text); }   .service-detail-link { align-self: flex-start; color: var(--accent); font-family: var(--font-mono); font-size: 13px; font-weight: 600; margin-top: var(--space-block-md); transition: var(--transition); } .service-detail-link:hover { color: var(--accent-hover); }   .service-detail-container { max-width: 760px; } .service-detail-back { color: var(--text-dim); display: inline-block; font-size: 13px; margin-bottom: var(--space-block-xl); transition: var(--transition); } .service-detail-back:hover { color: var(--text-muted); } .service-detail-title { color: var(--text); font-family: var(--font-display); font-size: clamp(30px, 5vw, 44px); font-weight: 700; line-height: 1.15; margin-bottom: calc(20px * var(--content-space-scale)); } .service-detail-lead { color: var(--text-muted); font-size: 16px; line-height: 1.7; margin-bottom: var(--space-block-sm); } .service-detail-author { color: var(--text-dim); display: flex; flex-wrap: wrap; font-size: 13px; gap: var(--space-block-xs) var(--space-xs); margin: 0 0 var(--space-block-xl); } .service-detail-author a { text-decoration: underline; text-underline-offset: 3px; } .service-detail-provider, .service-detail-block-intro, .service-detail-block-note { color: var(--text-muted); font-size: 14px; line-height: 1.7; } .service-detail-provider { margin: 0 0 var(--space-block-xl); } .service-detail-block-intro { margin: 0 0 var(--space-block-md); } .service-detail-block-note { border-top: 1px solid var(--border); margin: var(--space-block-md) 0 0; padding-top: var(--space-block-md); } .service-detail-block { border-left: 3px solid var(--accent); margin-bottom: var(--space-block-xl); padding-left: 20px; }   .service-detail-block-boundary { border-left-color: var(--border-light); } .service-detail-block-faq { border-left-color: var(--tertiary); } .service-detail-block-title { color: var(--text); font-size: 17px; font-weight: 700; margin-bottom: var(--space-block-sm); } .service-detail-steps, .service-detail-list { color: var(--text-muted); display: flex; flex-direction: column; font-size: 14px; gap: calc(10px * var(--content-space-scale)) 10px; line-height: 1.7; margin: 0; padding-left: 20px; } .service-detail-steps { list-style: decimal; } .service-detail-list { list-style: disc; } .service-detail-price { color: var(--accent); background: var(--accent-subtle); border-radius: var(--radius); display: inline-block; font-size: 13px; margin-bottom: var(--space-block-sm); padding: calc(6px * var(--content-space-scale)) var(--space-sm); } .service-detail-duration { color: var(--text-muted); font-family: var(--font-mono); font-size: 13px; margin: 0 0 var(--space-block-xs); } .service-detail-package-list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: var(--space-block-md); } .service-detail-note { color: var(--text-muted); font-size: 14px; line-height: 1.7; margin: 0 0 var(--space-block-xs); } .service-detail-faq-list { display: flex; flex-direction: column; gap: var(--space-block-xs) var(--space-xs); } .service-detail-faq { border-bottom: 1px solid var(--border); padding-bottom: var(--space-block-xs); } .service-detail-faq summary { color: var(--text); cursor: pointer; font-size: 14px; font-weight: 600; line-height: 1.6; min-height: 44px; padding: calc(10px * var(--content-space-scale)) 0; } .service-detail-faq p, .service-detail-next-step p { color: var(--text-muted); font-size: 14px; line-height: 1.7; margin: 0 0 var(--space-block-sm); } .service-detail-next-link { align-items: center; color: var(--accent); display: inline-flex; font-size: 14px; font-weight: 600; min-height: 44px; } .service-detail-next-link:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; } .service-detail-related-links { display: flex; flex-direction: column; gap: var(--space-block-xs) var(--space-xs); } .service-detail-related-links a { align-items: center; display: inline-flex; font-size: 14px; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; } .service-detail-offer-list { display: grid; gap: var(--space-block-md) var(--space-md); } .service-detail-offer { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-block-md) var(--space-md); } .service-detail-offer h3 { color: var(--text); font-size: 15px; margin: 0 0 var(--space-block-xs); } .service-detail-offer p { color: var(--text-muted); font-size: 14px; line-height: 1.7; margin: 0 0 var(--space-block-sm); } .service-detail-offer a { display: inline-flex; font-size: 14px; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; } .service-detail-cta { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-top: calc(40px * var(--content-space-scale)); padding: calc(28px * var(--content-space-scale)) 28px; } .service-detail-cta-title { color: var(--text); font-family: var(--font-display); font-size: var(--headline-sm); font-weight: 600; margin-bottom: var(--space-block-sm); line-height: 1.4; letter-spacing: -0.01em; } .service-detail-cta-copy { color: var(--text-muted); font-size: 14px; line-height: 1.7; margin-bottom: calc(20px * var(--content-space-scale)); } .service-detail-cta .btn-primary { align-items: center; box-sizing: border-box; display: inline-flex; justify-content: center; line-height: 1.4; max-width: 100%; text-align: center; } .service-detail-cta-footnote { color: var(--text-dim); font-size: 12px; line-height: 1.6; margin: var(--space-block-md) 0 0; }   .author-page { min-height: calc(100vh - var(--navbar-height)); padding: calc(var(--navbar-height) + var(--space-block-2xl)) var(--space-md) var(--space-block-3xl); } .author-container { margin: 0 auto; max-width: 1080px; } .author-breadcrumbs { margin-bottom: var(--space-block-xl); } .author-breadcrumbs ol { color: var(--text-dim); display: flex; flex-wrap: wrap; font-size: 13px; gap: var(--space-block-xs) var(--space-xs); list-style: none; } .author-breadcrumbs li + li::before { color: var(--border-hover); content: "/"; margin-right: var(--space-xs); } .author-breadcrumbs a { text-decoration: underline; text-underline-offset: 3px; } .author-hero { align-items: center; display: grid; gap: var(--space-block-xl) var(--space-xl); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-block-3xl); } .author-hero h1 { color: var(--text); font-family: var(--font-display); font-size: clamp(36px, 7vw, 60px); letter-spacing: var(--tracking-headline); line-height: 1; margin-bottom: var(--space-block-sm); } .author-role { color: var(--accent); font-family: var(--font-mono); font-size: 15px; line-height: 1.6; margin-bottom: var(--space-block-xs); } .author-location { color: var(--text-dim); font-size: 13px; margin-bottom: var(--space-block-lg); } .author-intro { color: var(--text-muted); font-size: 18px; line-height: 1.75; max-width: 720px; } .author-meta { border-top: 1px solid var(--border); color: var(--text-dim); display: flex; flex-wrap: wrap; font-size: 12px; gap: var(--space-block-sm) var(--space-lg); margin-top: var(--space-block-lg); padding-top: var(--space-block-sm); } .author-meta strong, .author-meta time { color: var(--text-muted); font-weight: 500; } .author-photo { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); display: block; justify-self: center; overflow: hidden; width: min(100%, 280px); } .author-photo img { aspect-ratio: 4 / 5; display: block; height: auto; object-fit: cover; object-position: center top; width: 100%; } .author-content-grid { display: grid; gap: var(--space-block-lg) var(--space-lg); grid-template-columns: minmax(0, 1fr); } .author-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: var(--space-block-lg); padding: calc(clamp(24px, 5vw, 40px) * var(--content-space-scale)) clamp(24px, 5vw, 40px); } .author-section h2 { color: var(--text); font-family: var(--font-display); font-size: var(--headline-md); letter-spacing: -0.015em; line-height: 1.2; margin-bottom: var(--space-block-md); } .author-section p { color: var(--text-muted); line-height: 1.75; margin-bottom: var(--space-block-sm); } .author-section p:last-child { margin-bottom: 0; } .author-focus ul { display: grid; gap: var(--space-block-sm) var(--space-sm); grid-template-columns: minmax(0, 1fr); list-style: none; } .author-focus li { border-left: 3px solid var(--accent); color: var(--text-muted); line-height: 1.65; padding: var(--space-block-xs) 0 var(--space-block-xs) var(--space-md); } .author-link-grid { display: grid; gap: var(--space-block-sm) var(--space-sm); grid-template-columns: minmax(0, 1fr); margin-top: var(--space-block-lg); } .author-link-card { background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; gap: var(--space-block-xs) var(--space-xs); min-height: 44px; padding: var(--space-block-md) var(--space-md); } .author-link-card:hover { border-color: var(--accent-border); } .author-link-card-static:hover { border-color: var(--border); } .author-link-card strong { color: var(--text); font-size: 15px; } .author-link-card span { color: var(--text-muted); font-size: 13px; line-height: 1.65; } .author-link-card .author-link-action { color: var(--accent); font-weight: 600; margin-top: auto; } .author-profile-link { align-items: center; display: inline-flex; font-weight: 600; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; } @media (min-width: 720px) { .author-content-grid, .author-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .author-focus ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 900px) { .author-hero { gap: var(--space-block-3xl) var(--space-3xl); grid-template-columns: minmax(0, 1fr) 320px; } .author-photo { justify-self: end; width: 320px; } }   .case-study-page { --text: #fff; --text-muted: #fff; --text-dim: #fff; color: var(--text); min-height: calc(100vh - var(--navbar-height)); padding: calc(var(--navbar-height) + var(--space-block-lg)) var(--space-md) var(--space-block-3xl); } .case-study-container { margin: 0 auto; max-width: 1248px; } .case-study-breadcrumbs { margin-bottom: var(--space-block-2xl); } .case-study-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; font-family: var(--font-mono); font-size: 11px; gap: var(--space-block-2xs) 12px; list-style: none; } .case-study-breadcrumbs li + li::before { content: "/"; margin-right: 12px; color: var(--accent); } .case-study-breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; } .case-study-page a:focus-visible { outline: 2px solid var(--tertiary); outline-offset: 5px; } .case-study-page a:hover { text-decoration: underline; text-underline-offset: 4px; } .case-study-index-header, .case-study-hero { position: relative; isolation: isolate; padding: var(--space-block-lg) 0 var(--space-block-xl); margin-bottom: var(--space-block-lg); } .case-study-index-header { min-height: 440px; display: flex; flex-direction: column; justify-content: center; padding-block: var(--space-block-2xl); } .case-study-editorial { position: absolute; z-index: -2; inset: 0 0 0 auto; width: 56%; max-width: 700px; pointer-events: none; overflow: hidden; -webkit-mask-image: radial-gradient(ellipse closest-side at center, #000 40%, rgb(0 0 0 / 85%) 60%, rgb(0 0 0 / 35%) 80%, transparent 100%); mask-image: radial-gradient(ellipse closest-side at center, #000 40%, rgb(0 0 0 / 85%) 60%, rgb(0 0 0 / 35%) 80%, transparent 100%); } .case-study-editorial img { width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: .65; } .case-study-index-header::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--bg) 32%, color-mix(in srgb, var(--bg) 80%, transparent) 55%, color-mix(in srgb, var(--bg) 30%, transparent) 100%), linear-gradient(0deg, var(--bg), transparent 28%, transparent 78%, var(--bg)); } @media (max-width: 767px) { .case-study-index-header { min-height: 460px; } .case-study-editorial { width: 100%; max-width: 540px; } .case-study-editorial img { object-position: center 22%; opacity: .38; } .case-study-index-header::after { background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 75%, transparent), color-mix(in srgb, var(--bg) 45%, transparent)), linear-gradient(0deg, var(--bg), transparent 35%, transparent 78%, var(--bg)); } }   .case-study-hero::before { content: ""; position: absolute; z-index: -1; pointer-events: none; top: 0; left: 15%; width: min(65%, 384px); height: 320px; max-height: 100%; border-radius: 50%; background: color-mix(in srgb, var(--primary) 5%, transparent); filter: blur(64px); } .case-study-index-header h1, .case-study-hero h1 { font-family: var(--font-display); font-size: clamp(34px, 4.8vw, 56px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; margin-bottom: var(--space-block-lg); max-width: 900px; text-wrap: balance; } .case-study-intro, .case-study-summary { font-size: 18px; line-height: 1.75; max-width: 820px; } .case-study-context { font-size: 13px; line-height: 1.7; margin-top: var(--space-block-lg); max-width: 820px; } .case-study-card-label, .case-study-page .section-label { color: var(--accent); font-family: var(--font-mono); font-size: 11px; font-weight: 600; line-height: 1.6; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-block-sm); } .case-study-proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-block-md) var(--space-md); margin: 0 0 var(--space-block-xl); list-style: none; padding: 0; } .case-study-detail-proof { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .case-study-proof { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-block-sm) var(--space-sm); padding: var(--space-block-lg) var(--space-lg); background: var(--bg-card); border: 1px solid transparent; border-radius: var(--radius); min-width: 0; } .case-study-index .case-study-proof { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-items: start; } .case-study-proof .case-study-card-label { margin: 0; } .case-study-proof strong { color: var(--text); font-family: var(--font-mono); font-size: clamp(18px, 1.8vw, 24px); line-height: 1.5; font-weight: 600; } .case-study-proof > span[aria-hidden] { color: var(--success); align-self: end; } a.case-study-proof:hover { border-color: var(--accent-border); text-decoration: none; } .case-study-disclosure { display: flex; align-items: center; gap: var(--space-block-md) var(--space-md); background: var(--bg-inset); padding: var(--space-block-lg) var(--space-lg); margin: var(--space-block-xl) 0 var(--space-block-3xl); font-size: 13px; line-height: 1.7; border-radius: var(--radius); } .case-study-disclosure > span { color: var(--accent); font-size: 28px; } .case-study-feature { position: relative; display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: var(--space-block-3xl); } .case-study-feature::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--primary-container), var(--secondary)); } .case-study-feature-copy { padding: calc(clamp(24px, 4vw, 48px) * var(--content-space-scale)) clamp(24px, 4vw, 48px); } .case-study-feature h2, .case-study-dossiers > h2, .case-study-contact h2, .case-study-section h2 { font-size: clamp(24px, 2.8vw, 36px); line-height: 1.2; letter-spacing: var(--tracking-headline); font-weight: 700; margin-bottom: var(--space-block-lg); text-wrap: balance; } .case-study-feature p, .case-study-card p, .case-study-section p, .case-study-section li, .case-study-contact p { font-size: 15px; line-height: 1.75; } .case-study-feature .case-study-card-label, .case-study-card .case-study-card-label, .case-study-contact .case-study-card-label { font-size: 11px; } .case-study-feature-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-block-lg) var(--space-lg); margin: var(--space-block-xl) 0; } .case-study-feature-notes h3, .case-study-card-results h4 { color: var(--secondary); font-family: var(--font-mono); font-size: 12px; margin-bottom: var(--space-block-xs); } .case-study-feature-notes > div { border-top: 1px solid var(--border); padding-top: var(--space-block-md); } .case-study-feature-evidence { background: var(--bg-elevated); padding: var(--space-block-xl) var(--space-xl); display: flex; flex-direction: column; justify-content: center; } .case-study-feature-evidence ul { display: grid; list-style: none; gap: var(--space-block-md) var(--space-md); } .case-study-feature-evidence li { display: flex; gap: var(--space-block-sm) var(--space-sm); padding: var(--space-block-lg) var(--space-lg); background: var(--bg-inset); font-family: var(--font-mono); font-size: 14px; line-height: 1.7; } .case-study-feature-evidence li span { color: var(--secondary); } .case-study-action { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-block-sm) var(--space-sm); min-height: 44px; padding: var(--space-block-sm) 24px; background: var(--primary-container); color: var(--on-primary); border-radius: var(--radius); font-size: 14px; font-weight: 600; } .case-study-page .case-study-action:hover { background: var(--primary); text-decoration: none; } .case-study-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-block-lg) var(--space-lg); } .case-study-card { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: var(--space-block-md); min-width: 0; padding: var(--space-block-lg) var(--space-lg); background: var(--bg-card); border: 1px solid transparent; border-radius: var(--radius); } .case-study-card:hover { border-color: var(--border); } .case-study-card:nth-child(2) .case-study-card-label { color: var(--secondary); } .case-study-card:nth-child(3) .case-study-card-label { color: var(--tertiary); } .case-study-card h3 { font-size: 22px; line-height: 1.3; letter-spacing: var(--tracking-headline); margin-bottom: 0; } .case-study-card-results { background: var(--bg-inset); padding: var(--space-block-lg) var(--space-lg); margin: 0 calc(-1 * var(--space-lg)); } .case-study-card ul { padding-left: 18px; font-size: 14px; line-height: 1.75; } .case-study-card li + li { margin-top: var(--space-block-sm); } .case-study-card li::marker { color: var(--secondary); } .case-study-card > a { display: flex; align-items: center; min-height: 44px; align-self: end; font-size: 13px; color: var(--accent); } .case-study-meta { display: flex; flex-wrap: wrap; gap: var(--space-block-sm) var(--space-lg); font-family: var(--font-mono); font-size: 11px; line-height: 1.8; margin-top: var(--space-block-lg); padding-top: var(--space-block-md); border-top: 1px solid var(--border); } .case-study-meta a { text-decoration: underline; text-underline-offset: 4px; } .case-study-detail-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--space-block-2xl) var(--space-2xl); align-items: start; margin-top: var(--space-block-3xl); } .case-study-narrative { min-width: 0; } .case-study-section { margin-bottom: var(--space-block-2xl); } .case-study-section ul { list-style: none; display: grid; gap: var(--space-block-md) var(--space-md); margin-top: var(--space-block-lg); padding: 0; } .case-study-section li { background: var(--bg-card); border-radius: var(--radius); padding: var(--space-block-lg) var(--space-lg); } #case-study-approach ul { counter-reset: approach; } #case-study-approach li { counter-increment: approach; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-md); } #case-study-approach li::before { content: counter(approach, decimal-leading-zero); color: var(--accent); font-family: var(--font-mono); font-size: 13px; } .case-study-results li { border-left: 2px solid var(--secondary); } .case-study-takeaways ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .case-study-takeaways li { border-top: 2px solid var(--accent-border); } .case-study-sidebar { position: sticky; top: calc(var(--navbar-height) + var(--space-lg)); } .case-study-sidebar .case-study-section { background: var(--bg-card); border-radius: var(--radius); padding: var(--space-block-lg) var(--space-lg); margin-bottom: var(--space-block-lg); } .case-study-sidebar h2 { font-family: var(--font-mono); color: var(--accent); font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase; } .case-study-contributor { display: flex; align-items: center; gap: var(--space-block-md) var(--space-md); min-width: 0; margin-bottom: var(--space-block-lg); color: var(--text); font-size: 18px; font-weight: 600; } .case-study-contributor picture { flex: 0 0 auto; } .case-study-contributor img { display: block; width: 88px; height: 88px; object-fit: cover; object-position: center 38%; border-radius: var(--radius); } .case-study-contributor > span { min-width: 0; } .case-study-contributor > span > span { color: var(--accent); } .case-study-sidebar ul { margin: 0; } .case-study-sidebar li { padding: 0; } .case-study-related-links { display: flex; flex-direction: column; gap: var(--space-block-sm) var(--space-sm); } .case-study-related-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-size: 14px; } .case-study-project-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-block-md) var(--space-md); border-top: 1px solid var(--border); padding-top: var(--space-block-xl); margin-top: var(--space-block-xl); } .case-study-project-nav a { display: flex; flex-direction: column; padding: var(--space-block-lg) var(--space-lg); background: var(--bg-card); border-radius: var(--radius); } .case-study-project-nav strong { font-size: 16px; line-height: 1.5; } .case-study-contact { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); align-items: center; gap: var(--space-block-xl) var(--space-xl); background: var(--bg-card); border-radius: var(--radius); padding: calc(clamp(24px, 4vw, 48px) * var(--content-space-scale)) clamp(24px, 4vw, 48px); margin-top: var(--space-block-3xl); } .case-study-contact::before { content: ""; position: absolute; z-index: -1; pointer-events: none; right: -32px; top: -32px; width: 192px; height: 192px; background: color-mix(in srgb, var(--primary) 10%, transparent); border-radius: 50%; filter: blur(32px); } .case-study-contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-block-md) var(--space-md); margin-top: var(--space-block-lg); } .case-study-contact-actions > a:not(.case-study-action) { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; } .case-study-author { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: var(--space-block-xs) var(--space-md); background: var(--bg-elevated); padding: var(--space-block-lg) var(--space-lg); border-radius: var(--radius); min-width: 0; } .case-study-author-portrait { grid-row: span 2; } .case-study-author-portrait img { display: block; width: 80px; height: 80px; object-fit: cover; object-position: center 38%; border-radius: var(--radius); } .case-study-author strong { color: var(--text); font-size: 18px; align-self: end; } .case-study-author > span:last-child { font-size: 13px; line-height: 1.6; align-self: start; } @media (max-width: 1023px) { .case-study-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .case-study-contact { grid-template-columns: minmax(0, 1fr); } .case-study-author { max-width: 440px; } .case-study-feature { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .case-study-detail-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-block-lg) var(--space-lg); } .case-study-sidebar { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-block-lg) var(--space-lg); } .case-study-sidebar .case-study-section { margin: 0; } } @media (max-width: 767px) { .case-study-grid, .case-study-index .case-study-proof-grid { grid-template-columns: minmax(0, 1fr); } .case-study-card { display: flex; flex-direction: column; grid-row: auto; gap: var(--space-block-md) var(--space-md); } .case-study-card-results { margin-block: 0; } .case-study-card > a { align-self: start; } .case-study-index .case-study-proof { display: flex; grid-row: auto; } } @media (max-width: 639px) { .case-study-proof-grid, .case-study-grid, .case-study-feature, .case-study-feature-notes, .case-study-takeaways ul, .case-study-sidebar, .case-study-project-nav, .case-study-contact { grid-template-columns: minmax(0, 1fr); } .case-study-author { grid-template-columns: 64px minmax(0, 1fr); padding: var(--space-block-md) var(--space-md); column-gap: var(--space-sm); } .case-study-author-portrait img { width: 64px; height: 64px; } .case-study-contributor img { width: 64px; height: 64px; } .case-study-contact-actions .case-study-action { width: 100%; } .case-study-proof { padding: var(--space-block-lg) var(--space-lg); } .case-study-feature-evidence { padding: var(--space-block-lg) var(--space-lg); } .case-study-breadcrumbs { margin-bottom: var(--space-block-lg); } .case-study-index-header h1, .case-study-hero h1 { font-size: 34px; } }   .knowledge-page { min-height: calc(100vh - var(--navbar-height)); padding: calc(var(--navbar-height) + var(--space-block-2xl)) var(--space-md) var(--space-block-3xl); } .knowledge-container { margin: 0 auto; max-width: 960px; } .knowledge-article-container { max-width: 820px; } .knowledge-breadcrumbs { margin-bottom: var(--space-block-xl); } .knowledge-breadcrumbs ol { color: var(--text-dim); display: flex; flex-wrap: wrap; font-size: 13px; gap: var(--space-block-xs) var(--space-xs); list-style: none; } .knowledge-breadcrumbs li + li::before { color: var(--border-hover); content: "/"; margin-right: var(--space-xs); } .knowledge-breadcrumbs a { text-decoration: underline; text-underline-offset: 3px; } .knowledge-hub-header, .knowledge-article-hero { margin-bottom: var(--space-block-2xl); } .knowledge-hub-header h1, .knowledge-article-hero h1 { color: var(--text); font-family: var(--font-display); font-size: clamp(34px, 6vw, 52px); letter-spacing: var(--tracking-headline); line-height: 1.08; margin-bottom: var(--space-block-md); } .knowledge-hub-header > p:last-child, .knowledge-summary { color: var(--text-muted); font-size: 17px; line-height: 1.75; max-width: 760px; } .knowledge-card-grid { display: grid; gap: var(--space-block-lg) var(--space-lg); grid-template-columns: minmax(0, 1fr); } .knowledge-card, .knowledge-author-note, .knowledge-section, .knowledge-answer, .knowledge-next-step, .knowledge-related { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: calc(clamp(22px, 5vw, 36px) * var(--content-space-scale)) clamp(22px, 5vw, 36px); } .knowledge-card { display: flex; flex-direction: column; } .knowledge-topic { color: var(--accent); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; margin-bottom: var(--space-block-sm); text-transform: uppercase; } .knowledge-card h2, .knowledge-section h2, .knowledge-answer h2, .knowledge-next-step h2, .knowledge-related h2 { color: var(--text); font-family: var(--font-display); font-size: var(--headline-sm); line-height: 1.35; margin-bottom: var(--space-block-sm); } .knowledge-card > p:not(.knowledge-topic), .knowledge-author-note p, .knowledge-section p, .knowledge-section li, .knowledge-answer p, .knowledge-next-step p { color: var(--text-muted); font-size: 15px; line-height: 1.75; } .knowledge-card-meta, .knowledge-article-meta { border-top: 1px solid var(--border); color: var(--text-dim); display: flex; flex-wrap: wrap; font-size: 12px; gap: var(--space-block-xs) var(--space-lg); margin-top: var(--space-block-lg); padding-top: var(--space-block-sm); } .knowledge-card > a, .knowledge-author-note a, .knowledge-source-list a, .knowledge-next-step a, .knowledge-related a { align-items: center; display: inline-flex; font-size: 14px; font-weight: 600; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; } .knowledge-card > a { margin-top: var(--space-block-sm); } .knowledge-author-note { margin-top: var(--space-block-xl); } .knowledge-author-note p { margin-bottom: var(--space-block-sm); } .knowledge-article-meta a, .knowledge-article-meta time { color: var(--text-muted); } .knowledge-answer { border-left: 3px solid var(--accent); margin-bottom: var(--space-block-lg); } .knowledge-answer p + p, .knowledge-section p + p { margin-top: var(--space-block-sm); } .knowledge-section { margin-bottom: var(--space-block-lg); } .knowledge-section ul, .knowledge-section ol { display: flex; flex-direction: column; gap: calc(10px * var(--content-space-scale)) 10px; margin: var(--space-block-sm) 0 0; padding-left: 22px; } .knowledge-results { border-left: 3px solid var(--success); } .knowledge-limits { border-left: 3px solid var(--border-light); } .knowledge-checklist ul { list-style: none; padding-left: 0; } .knowledge-checklist li { align-items: flex-start; display: flex; gap: var(--space-block-sm) var(--space-sm); } .knowledge-checklist li span { color: var(--success); flex: 0 0 auto; font-weight: 700; } .knowledge-source-list { list-style: none; padding-left: 0 !important; } .knowledge-next-step { border-left: 3px solid var(--accent); margin-bottom: var(--space-block-lg); } .knowledge-next-step-links { display: flex; flex-wrap: wrap; gap: var(--space-block-xs) var(--space-lg); margin-top: var(--space-block-md); } .knowledge-next-step-links a { display: inline-flex; align-items: center; min-height: 44px; } .knowledge-next-step-contact { color: var(--accent); } .knowledge-matrix-scroll { margin-top: var(--space-block-md); overflow-x: auto; } .knowledge-matrix { border-collapse: collapse; min-width: 700px; width: 100%; } .knowledge-matrix th, .knowledge-matrix td { border: 1px solid var(--border); color: var(--text-muted); font-size: 14px; line-height: 1.55; padding: var(--space-block-sm) var(--space-sm); text-align: left; vertical-align: top; } .knowledge-matrix thead th, .knowledge-matrix tbody th { color: var(--text); font-weight: 600; } .knowledge-matrix thead th { background: var(--bg-card-hover); } .knowledge-related { display: grid; gap: var(--space-block-lg) var(--space-lg); grid-template-columns: minmax(0, 1fr); } .knowledge-related > div { display: flex; flex-direction: column; } .legacy-insight-pdf { align-items: flex-end; background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-lg); display: flex; gap: var(--space-block-lg) var(--space-lg); justify-content: space-between; margin-bottom: var(--space-block-lg); padding: calc(clamp(22px, 5vw, 36px) * var(--content-space-scale)) clamp(22px, 5vw, 36px); } .legacy-insight-pdf h2 { color: var(--text); font-family: var(--font-display); font-size: var(--headline-sm); line-height: 1.35; margin-bottom: var(--space-block-xs); } .legacy-insight-file-name { color: var(--text-muted); font-family: var(--font-mono); font-size: 13px; overflow-wrap: anywhere; } .legacy-insight-pdf-meta { display: flex; flex-wrap: wrap; gap: var(--space-block-xs) var(--space-lg); margin-top: var(--space-block-md); } .legacy-insight-pdf-meta > div { display: flex; gap: var(--space-block-2xs) var(--space-2xs); } .legacy-insight-pdf-meta dt, .legacy-insight-file-facts { color: var(--text-dim); font-size: 12px; } .legacy-insight-pdf-meta dd { color: var(--text-muted); font-size: 12px; margin: 0; } .legacy-insight-file-facts { margin-top: var(--space-block-xs); } .legacy-insight-download { flex: 0 0 auto; margin-top: 0; text-align: center; } @media (min-width: 760px) { .knowledge-card-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .knowledge-related { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }     .knowledge-redesign { --text: #fff; --text-muted: #fff; --text-dim: #fff; color: var(--text); min-height: calc(100vh - var(--navbar-height)); padding: calc(var(--navbar-height) + var(--space-block-lg)) var(--space-md) var(--space-block-3xl); } .knowledge-redesign .knowledge-container { max-width: 1248px; margin-inline: auto; } .knowledge-redesign .knowledge-breadcrumbs { margin-bottom: var(--space-block-2xl); } .knowledge-redesign .knowledge-breadcrumbs ol { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-block-2xs) 12px; list-style: none; font: 11px/1.7 var(--font-mono); } .knowledge-redesign .knowledge-breadcrumbs li + li::before { content: "/"; color: var(--accent); margin-right: 12px; } .knowledge-redesign .knowledge-breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; } .knowledge-redesign a:hover { text-decoration: underline; text-underline-offset: 4px; } .knowledge-redesign a:focus-visible, .knowledge-redesign .knowledge-matrix-scroll:focus-visible { outline: 2px solid var(--tertiary); outline-offset: 4px; } .knowledge-redesign .knowledge-hub-header > p:last-child, .knowledge-redesign .knowledge-summary { max-width: 820px; font-size: 18px; line-height: 1.75; } .knowledge-redesign .knowledge-topic, .knowledge-redesign .section-label { color: var(--accent); font: 600 11px/1.6 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--space-block-sm); } .knowledge-redesign .knowledge-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-block-lg) var(--space-lg); } .knowledge-redesign .knowledge-card { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: var(--space-block-md); min-width: 0; padding: var(--space-block-lg) var(--space-lg); border: 1px solid transparent; border-radius: var(--radius); background: var(--bg-card); } .knowledge-redesign .knowledge-card:hover { border-color: var(--border); } .knowledge-redesign .knowledge-card:nth-child(3n + 2) .knowledge-topic { color: var(--secondary); } .knowledge-redesign .knowledge-card:nth-child(3n) .knowledge-topic { color: var(--tertiary); } .knowledge-redesign .knowledge-card .knowledge-topic { margin: 0; } .knowledge-redesign .knowledge-card h2 { font-size: 22px; line-height: 1.3; letter-spacing: var(--tracking-headline); } .knowledge-redesign .knowledge-card > p:not(.knowledge-topic), .knowledge-redesign .knowledge-author-note > p, .knowledge-redesign .knowledge-section p, .knowledge-redesign .knowledge-section li, .knowledge-redesign .knowledge-answer p, .knowledge-redesign .knowledge-next-step p { font-size: 15px; line-height: 1.75; } .knowledge-redesign .knowledge-card-meta, .knowledge-redesign .knowledge-article-meta { display: flex; flex-wrap: wrap; gap: var(--space-block-sm) var(--space-lg); border-top: 1px solid var(--border); padding-top: var(--space-block-md); font: 11px/1.8 var(--font-mono); } .knowledge-redesign .knowledge-article-meta { margin-top: var(--space-block-lg); } .knowledge-redesign .knowledge-article-meta a { text-decoration: underline; text-underline-offset: 4px; } .knowledge-redesign .knowledge-card > a { display: inline-flex; align-items: center; min-height: 44px; align-self: end; color: var(--accent); font-size: 13px; } .knowledge-redesign .knowledge-author-note { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); align-items: center; gap: var(--space-block-xl) var(--space-xl); background: var(--bg-card); padding: calc(clamp(24px, 4vw, 48px) * var(--content-space-scale)) clamp(24px, 4vw, 48px); border-radius: var(--radius); margin-top: var(--space-block-3xl); } .knowledge-redesign .knowledge-author-profile { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: var(--space-block-xs) var(--space-md); min-width: 0; padding: var(--space-block-lg) var(--space-lg); border-radius: var(--radius); background: var(--bg-elevated); } .knowledge-redesign .knowledge-author-profile picture { grid-row: span 2; } .knowledge-redesign .knowledge-author-profile img { display: block; width: 80px; height: 80px; object-fit: cover; object-position: center 38%; border-radius: var(--radius); } .knowledge-redesign .knowledge-author-profile strong { color: var(--text); font-size: 18px; align-self: end; } .knowledge-redesign .knowledge-author-profile > span { color: var(--accent); font-size: 13px; line-height: 1.6; align-self: start; } .knowledge-redesign .knowledge-detail-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; gap: var(--space-block-2xl) var(--space-2xl); margin-top: var(--space-block-xl); } .knowledge-redesign .knowledge-narrative { min-width: 0; } .knowledge-redesign .knowledge-answer { background: var(--bg-card); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: var(--space-block-lg) var(--space-lg); margin-bottom: var(--space-block-2xl); } .knowledge-redesign .knowledge-section { background: none; border: 0; padding: 0; margin-bottom: var(--space-block-2xl); } .knowledge-redesign .knowledge-section h2, .knowledge-redesign .knowledge-answer h2, .knowledge-redesign .knowledge-next-step h2 { font-size: clamp(24px, 2.8vw, 36px); font-weight: 700; line-height: 1.2; letter-spacing: var(--tracking-headline); text-wrap: balance; margin-bottom: var(--space-block-lg); } .knowledge-redesign .knowledge-answer p + p, .knowledge-redesign .knowledge-section p + p { margin-top: var(--space-block-md); } .knowledge-redesign .knowledge-section ul, .knowledge-redesign .knowledge-section ol { display: grid; gap: var(--space-block-md) var(--space-md); margin-top: var(--space-block-lg); list-style: none; padding: 0; } .knowledge-redesign .knowledge-section li { background: var(--bg-card); padding: var(--space-block-lg) var(--space-lg); border-radius: var(--radius); } .knowledge-redesign .knowledge-section ol { counter-reset: article-step; } .knowledge-redesign .knowledge-section ol > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-block-md) var(--space-md); counter-increment: article-step; } .knowledge-redesign .knowledge-section ol > li::before { content: counter(article-step, decimal-leading-zero); color: var(--accent); font: 13px/1.8 var(--font-mono); } .knowledge-redesign .knowledge-results li { border-left: 2px solid var(--secondary); } .knowledge-redesign .knowledge-limits li { border-left: 2px solid var(--border); } .knowledge-redesign .knowledge-checklist ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .knowledge-redesign .knowledge-checklist li { display: flex; align-items: flex-start; gap: var(--space-block-sm) var(--space-sm); border-top: 2px solid var(--success-border); } .knowledge-redesign .knowledge-checklist li span { color: var(--success); flex: 0 0 auto; } .knowledge-redesign .knowledge-source-list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); overflow-wrap: anywhere; } .knowledge-redesign .knowledge-section .knowledge-source-list li { padding-block: var(--space-block-sm); } .knowledge-redesign .knowledge-sidebar { position: sticky; top: calc(var(--navbar-height) + var(--space-lg)); min-width: 0; } .knowledge-redesign .knowledge-sidebar .knowledge-author-note { display: flex; flex-direction: column-reverse; align-items: stretch; gap: var(--space-block-lg) var(--space-lg); padding: var(--space-block-lg) var(--space-lg); margin: 0 0 var(--space-block-lg); } .knowledge-redesign .knowledge-sidebar .knowledge-author-profile { background: none; padding: 0; } .knowledge-redesign .knowledge-sidebar .knowledge-author-note > p { font-size: 13px; } .knowledge-redesign .knowledge-related { background: none; border: 0; padding: 0; display: grid; gap: var(--space-block-lg) var(--space-lg); } .knowledge-redesign .knowledge-related > div { display: flex; flex-direction: column; gap: var(--space-block-sm) var(--space-sm); padding: var(--space-block-lg) var(--space-lg); border-radius: var(--radius); background: var(--bg-card); } .knowledge-redesign .knowledge-related h2 { color: var(--accent); font: 600 13px/1.6 var(--font-mono); letter-spacing: .03em; text-transform: uppercase; } .knowledge-redesign .knowledge-related a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; line-height: 1.7; } .knowledge-redesign .knowledge-next-step { border: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-block-lg) var(--space-lg); padding: calc(clamp(24px, 4vw, 48px) * var(--content-space-scale)) clamp(24px, 4vw, 48px); border-radius: var(--radius); background: var(--bg-card); margin-top: var(--space-block-xl); } .knowledge-redesign .knowledge-next-step > p { max-width: 820px; } .knowledge-redesign .knowledge-next-step h2 { margin-bottom: 0; } .knowledge-redesign .knowledge-next-step-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-block-md) var(--space-lg); } .knowledge-redesign .knowledge-next-step-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-size: 14px; } .knowledge-redesign .knowledge-next-step-links .knowledge-next-step-contact { color: var(--on-primary); background: var(--primary-container); padding: var(--space-block-sm) 24px; border-radius: var(--radius); justify-content: center; gap: var(--space-block-sm) var(--space-sm); font-weight: 600; } .knowledge-redesign .knowledge-next-step-links .knowledge-next-step-contact:hover { background: var(--primary); text-decoration: none; } .knowledge-redesign .knowledge-matrix-scroll { max-width: 100%; overflow-x: auto; margin-top: var(--space-block-lg); border: 1px solid var(--border); border-radius: var(--radius); } .knowledge-redesign .knowledge-matrix { width: 100%; min-width: 700px; border-collapse: collapse; } .knowledge-redesign .knowledge-matrix th, .knowledge-redesign .knowledge-matrix td { padding: var(--space-block-md) var(--space-md); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; font-size: 14px; line-height: 1.65; } .knowledge-redesign .knowledge-matrix thead th { background: var(--bg-card-hover); font: 600 12px/1.6 var(--font-mono); } .knowledge-redesign .knowledge-matrix tbody tr:nth-child(odd) { background: var(--bg-card); } .knowledge-redesign .knowledge-matrix tbody tr:nth-child(even) { background: var(--bg-elevated); } @media (max-width: 1023px) { .knowledge-redesign .knowledge-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .knowledge-redesign .knowledge-detail-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-block-lg) var(--space-lg); } .knowledge-redesign .knowledge-sidebar { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-block-lg) var(--space-lg); } .knowledge-redesign .knowledge-sidebar .knowledge-author-note { margin: 0; align-self: start; } .knowledge-redesign .knowledge-author-note { grid-template-columns: minmax(0, 1fr); } .knowledge-redesign .knowledge-author-profile { max-width: 440px; } } @media (max-width: 767px) { .knowledge-redesign .knowledge-card-grid { grid-template-columns: minmax(0, 1fr); } .knowledge-redesign .knowledge-card { display: flex; flex-direction: column; grid-row: auto; gap: var(--space-block-md) var(--space-md); } .knowledge-redesign .knowledge-card > a { align-self: start; } } @media (max-width: 639px) { .knowledge-redesign .knowledge-sidebar, .knowledge-redesign .knowledge-checklist ul { grid-template-columns: minmax(0, 1fr); } .knowledge-redesign .knowledge-author-profile { padding: var(--space-block-md) var(--space-md); grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--space-sm); } .knowledge-redesign .knowledge-author-profile img { width: 64px; height: 64px; } .knowledge-redesign .knowledge-breadcrumbs { margin-bottom: var(--space-block-lg); } .knowledge-redesign .knowledge-next-step-links { align-items: stretch; flex-direction: column; } .knowledge-redesign .knowledge-next-step-contact { width: 100%; } } .knowledge-redesign .knowledge-hub-header, .knowledge-redesign .knowledge-article-hero { margin-bottom: var(--space-block-lg); } .knowledge-redesign .knowledge-hub-header h1, .knowledge-redesign .knowledge-article-hero h1 { max-width: 900px; font-size: clamp(34px, 4.8vw, 56px); line-height: 1.12; font-weight: 800; letter-spacing: -.03em; margin-bottom: var(--space-block-lg); text-wrap: balance; } .knowledge-redesign .knowledge-author-note > p { margin-bottom: 0; } .knowledge-redesign h1, .knowledge-redesign h2, .knowledge-redesign h3 { hyphens: auto; overflow-wrap: anywhere; } .knowledge-redesign .knowledge-next-step-links .knowledge-next-step-contact { text-decoration: none; }   .results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .result-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; padding: 28px; } .result-company { font-size: 13px; color: var(--accent); font-weight: 600; margin-bottom: 20px; } .result-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: var(--space-sm); } .result-check { color: var(--success); font-size: 14px; margin-top: 2px; flex-shrink: 0; } .result-text { font-size: 13px; color: var(--text-muted); line-height: 1.5; } .result-case-link, .results-all-link { align-items: center; display: inline-flex; font-size: 13px; font-weight: 600; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; } .result-case-link { margin-top: var(--space-sm); order: 2; } .results-all-link { margin-top: var(--space-lg); }   .final-cta { padding: 80px var(--space-lg); border-top: 1px solid var(--border); text-align: center; background: var(--bg-inset); } .final-cta-box { max-width: 720px; } .final-cta-title { font-family: var(--font-display); font-size: clamp(30px, 4vw, 40px); font-weight: 700; color: var(--text); margin-bottom: 14px; } .final-cta-subline, .final-cta-note, .final-cta-description, .final-cta-footnote p { max-width: 640px; margin-left: auto; margin-right: auto; } .final-cta-subline { font-size: 16px; color: var(--accent); margin-bottom: var(--space-xs); } .final-cta-note { font-size: 13px; color: var(--text-dim); margin-bottom: 20px; } .final-cta-description { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-bottom: 28px; } .final-cta-footnote p { font-size: 12px; color: var(--text-dim); margin-top: 18px; }   .riskscore-page { min-height: 100vh; min-height: 100dvh; padding: calc(100px * var(--content-space-scale)) var(--space-lg) calc(60px * var(--content-space-scale)); display: flex; align-items: center; justify-content: center; } .riskscore-container { max-width: 60rem; width: 100%; } .riskscore-result-container { max-width: 700px; width: 100%; } .riskscore-back { background: none; color: var(--text-dim); font-size: 13px; margin-bottom: var(--space-block-xl); transition: var(--transition); } .riskscore-back:hover { color: var(--text-muted); } .riskscore-intro { max-width: 760px; } .riskscore-intro-kicker { color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 0; margin-bottom: var(--space-block-sm); text-transform: uppercase; } .riskscore-intro-title { color: var(--text); font-family: var(--font-display); font-size: clamp(30px, 5vw, 48px); font-weight: 700; line-height: 1.15; margin-bottom: calc(20px * var(--content-space-scale)); } .riskscore-intro-copy { color: var(--text-muted); font-size: 16px; line-height: 1.7; margin-bottom: var(--space-block-xl); max-width: 680px; } .riskscore-intro-grid { display: grid; gap: var(--space-block-sm) var(--space-sm); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--space-block-xl); } .riskscore-intro-item { align-items: flex-start; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-muted); display: flex; font-size: 14px; gap: calc(10px * var(--content-space-scale)) 10px; line-height: 1.45; min-height: 58px; padding: calc(14px * var(--content-space-scale)) var(--space-md); } .riskscore-intro-icon { flex-shrink: 0; font-size: 18px; line-height: 1.2; } .riskscore-intro-result { border-left: 3px solid var(--accent); margin-bottom: var(--space-block-xl); padding-left: 20px; } .riskscore-intro-result h2 { color: var(--text); font-size: 17px; font-weight: 700; margin-bottom: var(--space-block-xs); } .riskscore-intro-result p { color: var(--text-muted); font-size: 14px; line-height: 1.7; margin: 0; } .riskscore-intro-expectations { color: var(--text-muted); font-size: 14px; font-weight: 600; margin-bottom: var(--space-block-lg); } .riskscore-intro-expectations span { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-sizing: border-box; display: inline-block; margin: 0 14px calc(10px * var(--content-space-scale)) 0; max-width: 100%; padding: calc(10px * var(--content-space-scale)) var(--space-sm); } .riskscore-intro-actions { display: flex; flex-wrap: wrap; gap: var(--space-block-sm) var(--space-sm); } .riskscore-intro-actions-top { justify-content: center; margin-bottom: calc(40px * var(--content-space-scale)); }   .riskscore-intro-preview { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: var(--space-block-xl); padding: calc(20px * var(--content-space-scale)) 22px; } .riskscore-intro-preview .risk-gauge { background: transparent; border: 0; border-radius: 0; margin-bottom: 18px; padding: 0; } .riskscore-intro-preview-label { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; margin-bottom: calc(14px * var(--content-space-scale)); text-transform: uppercase; } .riskscore-intro-preview-class { align-items: center; color: var(--text); display: flex; font-size: 16px; font-weight: 700; gap: calc(10px * var(--content-space-scale)) 10px; margin-bottom: var(--space-block-md); } .riskscore-intro-preview-rows { display: flex; flex-direction: column; gap: calc(10px * var(--content-space-scale)) 10px; margin-bottom: var(--space-block-md); } .riskscore-intro-preview-row { align-items: center; color: var(--text-muted); display: flex; font-size: 14px; gap: calc(10px * var(--content-space-scale)) 10px; margin: 0; min-width: 0; overflow-wrap: break-word; } .riskscore-intro-preview-note { border-top: 1px solid var(--border); color: var(--text-dim); font-size: 13px; line-height: 1.65; margin: 0; overflow-wrap: break-word; padding-top: calc(14px * var(--content-space-scale)); } .riskscore-dot { border-radius: 50%;   flex: 0 0 auto; width: 9px; height: 9px; min-width: 9px; min-height: 9px; align-self: center; } .riskscore-dot-critical { background: var(--critical); } .riskscore-dot-elevated { background: var(--warning); } .riskscore-dot-stable { background: var(--success); }   .riskscore-intro-audience { display: grid; gap: var(--space-block-md) var(--space-md); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--space-block-xl); } .riskscore-intro-audience-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: calc(18px * var(--content-space-scale)) 20px; } .riskscore-intro-audience-card-not { border-left: 3px solid var(--border-light); } .riskscore-intro-audience-card h2 { color: var(--text); font-size: 15px; font-weight: 700; margin-bottom: calc(10px * var(--content-space-scale)); } .riskscore-intro-audience-card p { color: var(--text-muted); font-size: 14px; line-height: 1.65; margin: 0; overflow-wrap: break-word; } .riskscore-intro-result-portable { margin-top: var(--space-block-sm); }   .riskscore-intro-authority { color: var(--text-dim); font-size: 12px; line-height: 1.6; margin-bottom: var(--space-block-lg); max-width: 680px; overflow-wrap: break-word; }   .riskscore-intro-confidentiality { color: var(--text-dim); font-size: 12px; line-height: 1.6; margin-top: var(--space-block-md); max-width: 680px; overflow-wrap: break-word; }   .riskscore-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-xs); } .riskscore-progress-text { font-size: 12px; color: var(--text-dim); } .riskscore-progress-pct { font-size: 12px; color: var(--accent); } .riskscore-progress-bar { width: 100%; height: 3px; background: var(--border); border-radius: var(--radius-xs); margin-bottom: 40px; overflow: hidden; } .riskscore-progress-meter { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 100%; border: 0; background: transparent; } .riskscore-progress-meter::-webkit-progress-bar { background: transparent; } .riskscore-progress-meter::-webkit-progress-value { background: var(--accent); border-radius: var(--radius-xs); transition: width var(--motion-step) ease; } .riskscore-progress-meter::-moz-progress-bar { background: var(--accent); border-radius: var(--radius-xs); transition: width var(--motion-step) ease; }   .riskscore-dims { display: flex; gap: var(--space-block-xs) var(--space-xs); margin-bottom: var(--space-block-xl); flex-wrap: wrap; } .riskscore-dim-tab { font-size: 12px; padding: 6px var(--space-sm); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-card); color: var(--text-dim); transition: var(--transition); display: flex; align-items: flex-start; gap: 6px; min-width: 0; } .riskscore-dim-tab.active { background: var(--accent-glow); color: var(--accent); border-color: var(--accent-border); } .riskscore-dim-tab.done { background: var(--success-subtle); color: var(--success); border-color: var(--success-border); }   .riskscore-question { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--text); margin-bottom: calc(28px * var(--content-space-scale)); line-height: 1.3; }   .riskscore-options { display: flex; flex-direction: column; gap: var(--space-block-sm) var(--space-sm); } .riskscore-option { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-md) 20px; display: flex; align-items: center; gap: 14px; text-align: left; transition: var(--transition); color: var(--text-muted); font-size: 14px; width: 100%; } .riskscore-option:hover { border-color: var(--border-light); background: var(--bg-card-hover); box-shadow: var(--shadow-card-hover); } .riskscore-option.selected { background: var(--accent-glow); border-color: var(--accent); color: var(--text); } .riskscore-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: var(--transition); } .riskscore-option.selected .riskscore-radio { border-color: var(--accent); } .riskscore-question-actions { display: flex; justify-content: flex-start; margin-top: var(--space-block-lg); } .riskscore-question-back:disabled { cursor: not-allowed; opacity: 0.45; } .riskscore-radio-fill { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); opacity: 0; transform: scale(0); transition: all calc(0.2s * var(--motion-time-scale)) ease; } .riskscore-option.selected .riskscore-radio-fill { opacity: 1; transform: scale(1); }   .result-score-big { display: flex; align-items: baseline; gap: var(--space-md); margin-bottom: var(--space-xs); } .result-score-number { font-size: 72px; font-weight: 700; line-height: 1; } .result-score-max { font-size: 24px; color: var(--text-dim); } .result-level { font-size: 18px; font-weight: 600; margin-bottom: var(--space-md); } .result-bar { width: 100%; height: 8px; background: var(--border); border-radius: var(--radius); margin-bottom: var(--space-xl); overflow: hidden; } .result-bar-meter { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 100%; border: 0; background: transparent; } .result-bar-meter::-webkit-progress-bar { background: transparent; } .dim-breakdown-meter { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 100%; border: 0; background: transparent; } .dim-breakdown-meter::-webkit-progress-bar { background: transparent; } .result-description { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-bottom: 28px; } .result-teaser-classification { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: var(--space-lg); padding: var(--space-lg); } .result-teaser-classification strong { display: block; font-family: var(--font-display); font-size: 34px; font-weight: 700; line-height: 1.1; } .result-teaser-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin-bottom: var(--space-lg); } .result-teaser-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; } .result-teaser-label { display: block; color: var(--text-dim); font-size: 11px; letter-spacing: 0.08em; margin-bottom: var(--space-xs); text-transform: uppercase; } .result-report-preview { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px var(--space-lg); } .result-report-preview-title { color: var(--text); font-size: 15px; font-weight: 600; margin: 0 0 var(--space-sm); } .result-report-preview-list { color: var(--text-muted); display: grid; gap: var(--space-xs); font-size: 13px; line-height: 1.6; margin: 0; padding-left: 18px; } .result-teaser-findings { margin-bottom: var(--space-lg); } .result-teaser-findings-list { display: grid; gap: var(--space-sm); list-style: none; margin: 0; padding: 0; } .result-teaser-finding { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-md) 18px; } .result-teaser-finding strong, .result-teaser-finding span { display: block; } .result-teaser-finding strong { font-size: 14px; margin-bottom: 6px; } .result-teaser-finding span { color: var(--text-muted); font-size: 13px; line-height: 1.6; } .result-priority-risks { margin-bottom: var(--space-lg); } .result-priority-risks-list { counter-reset: none; display: grid; gap: var(--space-sm); list-style: none; margin: 0; padding: 0; } .result-priority-risk { align-items: start; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); display: grid; gap: var(--space-sm); grid-template-columns: 34px minmax(0, 1fr); padding: var(--space-md) 18px; } .result-priority-risk-rank { align-items: center; background: var(--bg-elevated); border-radius: var(--radius); color: var(--text); display: flex; font-size: 14px; font-weight: 700; height: 34px; justify-content: center; line-height: 1; width: 34px; } .result-priority-risk-header { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-xs); } .result-priority-risk-header strong { color: var(--text); font-size: 14px; } .result-priority-risk-header span { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text-muted); font-size: 11px; font-weight: 700; line-height: 1; padding: 6px var(--space-xs); } .result-priority-risk p { color: var(--text-muted); font-size: 13px; line-height: 1.6; margin: 0; } .result-priority-risk p.result-priority-risk-action { margin-top: 6px; } .result-priority-risk--locked .result-priority-risk-locked-body { filter: blur(5px); pointer-events: none; user-select: none; } .result-priority-risk-lock-notice { background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-sm); color: var(--text-muted); font-size: 12px; font-style: italic; margin-top: 10px; padding: 7px 10px; text-align: center; }   .dim-breakdown-label { font-size: 12px; color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--space-md); } .dim-breakdown-item { margin-bottom: var(--space-md); } .dim-breakdown-header { display: flex; justify-content: space-between; margin-bottom: 6px; } .dim-breakdown-name { font-size: 13px; color: var(--text); } .dim-breakdown-score { font-size: 13px; font-weight: 600; } .dim-breakdown-bar { width: 100%; height: 4px; background: var(--border); border-radius: var(--radius-xs); overflow: hidden; } .result-bar-meter.risk-stable-bg::-webkit-progress-value, .dim-breakdown-meter.risk-stable-bg::-webkit-progress-value { background: var(--success); } .result-bar-meter.risk-warning-bg::-webkit-progress-value, .dim-breakdown-meter.risk-warning-bg::-webkit-progress-value { background: var(--warning); } .result-bar-meter.risk-danger-bg::-webkit-progress-value, .dim-breakdown-meter.risk-danger-bg::-webkit-progress-value { background: var(--danger); } .result-bar-meter.risk-critical-bg::-webkit-progress-value, .dim-breakdown-meter.risk-critical-bg::-webkit-progress-value { background: var(--critical); } .result-bar-meter.risk-stable-bg::-moz-progress-bar, .dim-breakdown-meter.risk-stable-bg::-moz-progress-bar { background: var(--success); } .result-bar-meter.risk-warning-bg::-moz-progress-bar, .dim-breakdown-meter.risk-warning-bg::-moz-progress-bar { background: var(--warning); } .result-bar-meter.risk-danger-bg::-moz-progress-bar, .dim-breakdown-meter.risk-danger-bg::-moz-progress-bar { background: var(--danger); } .result-bar-meter.risk-critical-bg::-moz-progress-bar, .dim-breakdown-meter.risk-critical-bg::-moz-progress-bar { background: var(--critical); }   .risk-stable { color: var(--success); } .risk-warning { color: var(--warning); } .risk-danger { color: var(--danger); } .risk-critical { color: var(--critical); } .risk-stable-bg { background: var(--success); } .risk-warning-bg { background: var(--warning); } .risk-danger-bg { background: var(--danger); } .risk-critical-bg { background: var(--critical); }   .risk-gauge { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); margin-bottom: var(--space-lg); } .risk-gauge-svg { width: 100%; max-width: 320px; height: auto; } .risk-gauge-zone { stroke-width: 20; stroke-linecap: butt; } .risk-gauge-zone-stable { stroke: var(--success); } .risk-gauge-zone-warning { stroke: var(--warning); } .risk-gauge-zone-danger { stroke: var(--danger); } .risk-gauge-zone-critical { stroke: var(--critical); } .risk-gauge-needle { stroke: var(--text); stroke-width: 4; stroke-linecap: round;   transform-box: view-box; transform-origin: 100px 100px; transform: rotate(var(--risk-gauge-angle, -90deg)); transition: transform calc(600ms * var(--motion-time-scale)) var(--motion-ease); } .risk-gauge-pivot { fill: var(--text); } .risk-gauge-readout { margin-top: var(--space-xs); display: flex; align-items: baseline; gap: 6px; font-family: var(--font-mono); } .risk-gauge-score { font-size: 42px; font-weight: 700; line-height: 1; color: var(--text); } .risk-gauge-score-suffix { font-size: 16px; color: var(--text-muted); } .risk-gauge-classification { margin-top: var(--space-xs); font-family: var(--font-display); font-size: 20px; font-weight: 700; } .risk-gauge-description { margin-top: var(--space-sm); margin-bottom: 0; font-size: 14px; color: var(--text-muted); line-height: 1.7; } @media (prefers-reduced-motion: reduce) { .risk-gauge-needle { transition: none; } } @media (max-width: 480px) { .risk-gauge { padding: var(--space-md); } .risk-gauge-score { font-size: 34px; } }   .email-form-card { align-items: center; background: var(--bg-card); border: 1px solid var(--accent); border-radius: var(--radius-lg); display: grid; gap: var(--space-block-lg) var(--space-lg); grid-template-columns: minmax(0, 1fr) auto; margin-top: calc(40px * var(--content-space-scale)); overflow: hidden; padding: calc(28px * var(--content-space-scale)) 28px; } .email-form-content { min-width: 0; } .email-form-content .email-form-subtitle { margin-bottom: var(--space-block-sm); } .email-form-content .email-form-subtitle:last-of-type { margin-bottom: var(--space-block-lg); } .email-form-profile { align-items: center; align-self: stretch; background: var(--bg-elevated); border: 1px solid var(--accent-border); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-block-sm) var(--space-sm); justify-content: center; margin: 0; padding: calc(14px * var(--content-space-scale)) 14px; } .email-form-profile-photo-wrap { border-radius: var(--radius-md); height: 148px; overflow: hidden; width: 112px; } .email-form-profile-photo { display: block; height: 100%; object-fit: cover; object-position: center top; width: 100%; } .email-form-profile-caption { color: var(--accent); font-size: 11px; font-weight: 700; line-height: 1.4; max-width: 128px; text-align: center; } .email-form-standalone { max-width: 480px; width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: calc(36px * var(--content-space-scale)) 36px; } .email-form-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--text); margin-bottom: var(--space-block-xs); } .email-form-subtitle { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: calc(28px * var(--content-space-scale)); } .form-group { margin-bottom: var(--space-md); } .form-row { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; } .form-input { width: 100%; padding: var(--space-sm) 14px; background: var(--bg-inset); border: 1px solid var(--border-light); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-mono); font-size: 14px; transition: var(--transition);   -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }   @media (hover: none) and (pointer: coarse) { .form-input { font-size: 16px; } } .form-input:focus { outline: none; border-color: var(--accent); } .form-input::placeholder { color: var(--text-dim); } .form-consent { display: flex; align-items: flex-start; gap: 10px; } .form-consent input[type="checkbox"] { margin-top: var(--space-2xs); accent-color: var(--accent); } .form-consent label { font-size: 11px; color: var(--text-dim); line-height: 1.5; } .form-consent a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .form-note { font-size: 11px; color: var(--text-dim); margin-top: 20px; line-height: 1.5; } .form-error-banner { background: var(--danger-subtle); color: var(--danger); border: 1px solid var(--danger-border); border-radius: var(--radius-lg); padding: var(--space-sm) var(--space-md); font-size: 13px; margin-bottom: var(--space-md); line-height: 1.5; } .workshop-recommendation-banner { background: var(--accent-subtle); color: var(--warning); border: 1px solid var(--accent-border); border-radius: var(--radius-lg); padding: var(--space-sm) var(--space-md); font-size: 13px; line-height: 1.5; margin-bottom: var(--space-md); } .workshop-recommendation-banner p { margin: var(--space-xs) 0 0; } .workshop-recommendation-summary { cursor: pointer; font-weight: 600; } @media (max-width: 640px) { .result-teaser-panel, .form-row, .feedback-context-list div { grid-template-columns: 1fr; } }   .feedback-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: calc(28px * var(--content-space-scale)) 28px; margin-top: var(--space-block-lg); } .feedback-card--done { text-align: center; } .feedback-context { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: calc(20px * var(--content-space-scale)) var(--space-lg); margin: var(--space-block-lg) 0; } .feedback-context-list { display: grid; gap: var(--space-block-sm) var(--space-sm); margin: 0; } .feedback-context-list div { display: grid; grid-template-columns: minmax(120px, 0.35fr) 1fr; gap: var(--space-block-md) var(--space-md); align-items: baseline; } .feedback-context-list dt { color: var(--text-dim); font-size: 12px; font-weight: 700; margin: 0; } .feedback-context-list dd { color: var(--text); font-size: 14px; margin: 0; overflow-wrap: anywhere; } .feedback-thanks { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); } .feedback-choice-group { display: flex; gap: calc(10px * var(--content-space-scale)) 10px; flex-wrap: wrap; } .feedback-choice-btn, .feedback-scale-btn { background: var(--bg); border: 1px solid var(--border-light); border-radius: var(--radius-sm); color: var(--text-muted); font-size: 13px; padding: 10px var(--space-md); min-height: 44px; cursor: pointer; transition: var(--transition); -webkit-tap-highlight-color: transparent; } .feedback-choice-btn:hover, .feedback-scale-btn:hover { border-color: var(--accent); color: var(--text); } .feedback-choice-btn.is-selected, .feedback-scale-btn.is-selected { border-color: var(--accent); color: var(--accent); font-weight: 700; } .feedback-scale { display: flex; gap: var(--space-block-xs) var(--space-xs); } .feedback-scale-btn { flex: 1; padding: 10px 0; text-align: center; } .feedback-scale-legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-dim); margin-top: calc(6px * var(--content-space-scale)); } .feedback-textarea { resize: vertical; min-height: 96px; }   .feedback-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-block-sm) var(--space-sm); margin-top: calc(20px * var(--content-space-scale)); } @media (max-width: 480px) { .feedback-actions { grid-template-columns: 1fr; } .feedback-choice-group { gap: var(--space-block-xs) var(--space-xs); } .feedback-choice-btn { flex: 1; padding: 10px var(--space-xs); } .feedback-scale { gap: calc(6px * var(--content-space-scale)) 6px; } }   .error-overlay-backdrop { position: fixed; inset: 0; background: var(--overlay); z-index: 9998; cursor: pointer; } .error-overlay { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; background: var(--bg-elevated); border-radius: var(--radius-lg); padding: var(--space-xl) 28px var(--space-lg); box-shadow: var(--shadow-overlay); max-width: 420px; width: 90%; text-align: center; border-top: 4px solid var(--danger); } .error-overlay-icon { font-size: 36px; margin-bottom: var(--space-sm); line-height: 1; color: var(--danger); } .error-overlay-message { font-size: 14px; color: var(--text); line-height: 1.6; margin: 0 0 20px; } .error-overlay-close { min-width: 120px; }   .info-banner { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 9997; display: flex; align-items: center; gap: var(--space-sm); background: var(--info-subtle); border: 1px solid var(--info-border); color: var(--tertiary); border-radius: var(--radius-lg); padding: var(--space-sm) var(--space-md); max-width: 480px; width: calc(100% - 32px); box-shadow: var(--shadow-surface); font-size: 13px; line-height: 1.5; } .info-banner-message { flex: 1; } .info-banner-close { background: none; border: none; color: var(--tertiary); font-size: 18px; line-height: 1; cursor: pointer; padding: 0; }   .motivational-banner { display: flex; align-items: flex-start; gap: var(--space-sm); background: var(--info-subtle); border: 1px solid var(--info-border); border-left: 4px solid var(--tertiary); color: var(--tertiary); border-radius: var(--radius-lg); padding: 14px var(--space-md); margin: var(--space-md) 0; font-size: 14px; line-height: 1.6; box-shadow: var(--shadow-surface); opacity: 0; transform: translateY(-8px); animation: motivational-banner-enter calc(0.35s * var(--motion-time-scale)) ease-out forwards; } .motivational-banner-icon { flex-shrink: 0; color: var(--tertiary); margin-top: 1px; } .motivational-banner-message { flex: 1; font-weight: 500; } .motivational-banner-close { flex-shrink: 0; background: none; border: none; color: var(--tertiary); font-size: 18px; line-height: 1; cursor: pointer; padding: var(--space-2xs); margin: -4px; } @keyframes motivational-banner-enter { to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .motivational-banner { animation: none; opacity: 1; transform: none; } }   .success-page { text-align: center; max-width: 520px; width: 100%; } .success-icon { font-size: 48px; margin-bottom: var(--space-lg); } .success-title { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--text); margin-bottom: var(--space-block-sm); } .success-text { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-bottom: var(--space-block-xl); } .success-next-step { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-block-lg) var(--space-lg); text-align: left; margin-bottom: var(--space-block-xl); } .success-next-label { font-size: 12px; color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--space-block-sm); } .success-next-text { font-size: 14px; color: var(--text); line-height: 1.7; }   .footer { padding: 60px var(--space-lg); border-top: 1px solid var(--border); background: var(--bg-inset); } .footer-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-xl); } .footer-brand-name { font-size: 14px; color: var(--text); font-weight: 600; margin-bottom: var(--space-xs); } .footer-brand-info { font-size: 12px; color: var(--text-dim); line-height: 1.8; } .footer-links-title { font-size: 11px; color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--space-sm); } .footer-links-list { font-size: 12px; color: var(--text-muted); line-height: 2; } .footer-links-list a { color: var(--text-muted); transition: var(--transition); } .footer-links-list a:hover { color: var(--text); } .success-page-link { display: inline-block; margin-top: var(--space-block-lg); text-decoration: none; } .success-next-step-compact { margin-top: var(--space-block-md); } .footer-links-wrapper { display: flex; gap: var(--space-xl); } .email-form-title-compact { font-size: 24px; } .email-submit-btn { margin-top: var(--space-xs); } .section-title-compact { margin-bottom: var(--space-block-lg); } .result-dimension-block { margin-bottom: 40px; } .result-contextual-recommendations { margin-bottom: 40px; } .result-system-context { margin-bottom: var(--space-md); } .context-text-preline { white-space: pre-line; }   .shared-files-page { min-height: 100vh; min-height: 100dvh; padding-top: calc(var(--navbar-height) + var(--space-block-2xl)); } .shared-files-groups { display: grid; gap: calc(20px * var(--content-space-scale)) 20px; } .shared-files-header { margin-bottom: var(--space-block-xl); } .shared-files-header .section-title-compact { margin-bottom: var(--space-block-sm); } .shared-files-header > p:last-child { color: var(--text-muted); line-height: 1.7; max-width: 760px; } .shared-group-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-block-lg) var(--space-lg); } .shared-group-title { font-family: var(--font-display); font-size: 24px; margin-bottom: calc(18px * var(--content-space-scale)); } .shared-file-list { list-style: none; display: grid; gap: calc(10px * var(--content-space-scale)) 10px; } .shared-file-item { display: flex; justify-content: space-between; align-items: center; gap: var(--space-block-md) var(--space-md); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: calc(14px * var(--content-space-scale)) var(--space-md); } .shared-file-title { color: var(--text); margin-bottom: calc(2px * var(--content-space-scale)); } .shared-file-meta { color: var(--text-dim); font-size: 12px; } .shared-file-download { margin-top: 0; white-space: nowrap; } .shared-file-actions { align-items: center; display: flex; flex: 0 0 auto; gap: var(--space-block-sm) var(--space-sm); } .shared-file-context { align-items: center; display: inline-flex; font-size: 13px; font-weight: 600; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; } .shared-files-author-note { margin-top: var(--space-block-xl); } .shared-files-message { color: var(--text-muted); } .shared-files-error { background: var(--danger-subtle); color: var(--danger); border: 1px solid var(--danger-border); border-radius: var(--radius-md); padding: var(--space-block-sm) var(--space-md); }   @media (max-width: 768px) { :root { --navbar-height: 56px; } .navbar { padding: 0 var(--space-md); } .navbar-links.open { top: var(--navbar-height); padding: 20px var(--space-md) var(--space-lg); } .hero { min-height: auto; padding: calc(var(--navbar-height) + 36px) 20px 56px; } .section { padding: calc(60px * var(--content-space-scale)) 20px; } .services-grid, .results-grid { grid-template-columns: 1fr; } .legacy-insight-pdf, .shared-file-item { align-items: stretch; flex-direction: column; } .legacy-insight-download, .shared-file-download { width: 100%; } .shared-file-actions { align-items: stretch; flex-direction: column; } .shared-file-context { justify-content: center; } .hero-cta-group { flex-direction: column; } .hero-cta-group .btn-primary, .hero-cta-group .btn-secondary { width: 100%; text-align: center; } .footer-inner { flex-direction: column; align-items: flex-start; } .footer-links-wrapper { width: 100%; } .final-cta { padding: 64px 20px; } .service-detail-cta .btn-primary { padding: 14px 16px; width: 100%; } .result-score-number { font-size: 56px; } .riskscore-dims { gap: calc(6px * var(--content-space-scale)) 6px; } .riskscore-dim-tab { font-size: 11px; padding: 5px var(--space-xs); } }   .hero-industry { margin-top: 80px; padding-top: 40px; border-top: 1px solid var(--border); max-width: 600px; } .hero-industry-label { font-size: 11px; color: var(--accent); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 20px; font-weight: 500; } .hero-industry-main { font-size: clamp(16px, 1.8vw, 20px); font-weight: 600; color: var(--text); line-height: 1.5; margin-bottom: var(--space-md); } .hero-industry-details { font-size: 13px; color: var(--text-dim); line-height: 1.6; } @media (max-width: 768px) { .hero-industry { margin-top: 60px; padding-top: 30px; } .hero-industry-main { font-size: 16px; line-height: 1.4; } .hero-industry-details { font-size: 12px; } }   .promise-section { padding: 4rem 0; background: var(--surface-container-high); margin: 2rem 0; } .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .promise-headline { text-align: center; font-size: 2.5rem; font-weight: 700; color: var(--text); margin-bottom: 3rem; } .promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 1000px; margin: 0 auto; } .promise-card { background: var(--bg-card); padding: 2rem; border-radius: var(--radius-lg); text-align: center; box-shadow: var(--shadow-surface); border: 1px solid var(--border); transition: var(--transition); } .promise-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); background: var(--bg-card-hover); } .promise-icon { font-size: 2.5rem; color: var(--success); font-weight: bold; display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; background: var(--success-subtle); border-radius: 50%; margin: 0 auto 1.5rem; } .promise-title { font-size: 1.25rem; font-weight: 600; color: var(--text); margin-bottom: 1rem; line-height: 1.4; } .promise-text { font-size: 1rem; color: var(--text-muted); line-height: 1.6; margin: 0; }   @media (max-width: 768px) { .promise-section { padding: 3rem 0; } .promise-headline { font-size: 2rem; margin-bottom: 2rem; } .promise-grid { grid-template-columns: 1fr; gap: 1.5rem; } .promise-card { padding: 1.5rem; } .promise-text br { display: none; } } @media (max-width: 480px) { .container { padding: 0 0.75rem; } .promise-headline { font-size: 1.75rem; } .promise-title { font-size: 1.1rem; } }   .about-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; align-items: start; } .about-photo { position: relative; } .about-photo-img { width: 100%; max-width: 280px; height: 280px; border-radius: 50%; border: 1px solid var(--border); transition: var(--transition); object-fit: cover; object-position: center 30%; } .about-photo-img:hover { border-color: var(--accent); transform: scale(1.02); } .about-content { display: flex; flex-direction: column; gap: 20px; } .about-name { font-family: var(--font-display); font-size: 36px; font-weight: 700; color: var(--text); line-height: 1.1; margin: 0; } .about-subtitle { font-size: 18px; color: var(--accent); font-weight: 600; line-height: 1.3; } .about-location { font-size: 14px; color: var(--text-muted); font-weight: 500; } .about-text { display: flex; flex-direction: column; gap: var(--space-md); } .about-text p { font-size: 15px; color: var(--text-muted); line-height: 1.7; margin: 0; } .about-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); } .about-tag { font-size: 12px; color: var(--tertiary); background: var(--bg-card); border: 1px solid var(--border); padding: 6px var(--space-sm); border-radius: var(--radius-sm); transition: var(--transition); } .about-tag:hover { border-color: var(--info-border); color: var(--tertiary); } .about-links { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-xs); } .about-link { font-size: 14px; color: var(--accent); font-weight: 600; text-decoration: none; transition: var(--transition); } .about-link:hover { color: var(--accent-hover); transform: translateX(4px); }   @media (max-width: 768px) { .about-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; } .about-photo { justify-self: center; } .about-photo-img { max-width: 240px; } .about-name { font-size: 28px; } .about-subtitle { font-size: 16px; } .about-links { justify-content: center; } } @media (max-width: 480px) { .about-tags { justify-content: center; } .about-links { flex-direction: column; align-items: center; gap: var(--space-md); } }   .contact-intro { max-width: 600px; margin-bottom: var(--space-block-2xl); } .contact-intro p { font-size: 16px; color: var(--text-muted); line-height: 1.7; margin-bottom: var(--space-block-xs); } .contact-intro p:last-child { color: var(--accent); font-weight: 600; } .contact-expectations { max-width: 760px; margin: calc(calc(-1 * var(--space-md)) * var(--content-space-scale)) 0 var(--space-block-2xl); padding-left: 22px; color: var(--text-muted); } .contact-expectations li { padding-left: var(--space-xs); font-size: 14px; line-height: 1.7; } .contact-expectations li + li { margin-top: var(--space-block-xs); } .contact-expectations li::marker { color: var(--accent); } .contact-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-block-lg) var(--space-lg); } .contact-option { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; display: flex; gap: 20px; transition: var(--transition); position: relative; overflow: hidden; } .contact-option:hover { border-color: var(--border-light); transform: translateY(-2px); box-shadow: var(--shadow-card-hover); background: var(--bg-card-hover); } .contact-option-icon { font-size: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: var(--accent-subtle); border: 1px solid var(--accent-border); border-radius: var(--radius-md); } .contact-option-content { flex: 1; display: flex; flex-direction: column; } .contact-option-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--text); margin-bottom: var(--space-xs); } .contact-option-text { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; flex-grow: 1; } .contact-option-cta { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--accent); font-weight: 600; transition: var(--transition); align-self: flex-start; } .contact-option-cta:hover { color: var(--accent-hover); transform: translateX(4px); }   @media (max-width: 768px) { .contact-options { grid-template-columns: 1fr; gap: calc(20px * var(--content-space-scale)) 20px; } .contact-option { padding: var(--space-lg); gap: var(--space-md); } .contact-option-icon { width: 50px; height: 50px; font-size: 28px; } .contact-option-title { font-size: 18px; } } .legal-page, .imprint-page { padding-top: calc(80px * var(--content-space-scale)); padding-bottom: calc(80px * var(--content-space-scale)); }   .legal-page { padding-top: calc(80px * var(--content-space-scale));   min-height: 100vh; min-height: 100dvh; }   @media screen { .legal-page > .container > h1 { margin-bottom: var(--space-block-xl); } .legal-page > .container > h2 { margin-block: var(--space-block-2xl) var(--space-block-lg); } .legal-page > .container > h3 { margin-block: var(--space-block-xl) var(--space-block-sm); } .legal-page > .container > :is(p, ul, ol, address) { margin-bottom: var(--space-block-md); } .legal-page > .container > :is(ul, ol) > li + li { margin-top: var(--space-block-xs); } } .legal-hero { padding: calc(60px * var(--content-space-scale)) 0 calc(40px * var(--content-space-scale)); text-align: center; position: relative; } .legal-hero-content { max-width: 700px; margin: 0 auto; } .legal-hero-title { font-family: var(--font-display); font-size: clamp(32px, 4vw, 48px); font-weight: 700; color: var(--text); margin-bottom: var(--space-block-sm); line-height: 1.2; } .legal-hero-subtitle { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin: 0; } .legal-nav { display: flex; flex-wrap: wrap; gap: var(--space-block-sm) var(--space-sm); justify-content: center; margin: calc(40px * var(--content-space-scale)) 0 calc(60px * var(--content-space-scale)); } .legal-chip { display: inline-flex; align-items: center; padding: var(--space-xs) var(--space-md); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-muted); font-size: 13px; font-weight: 500; text-decoration: none; transition: var(--transition); letter-spacing: 0.02em; } .legal-chip:hover { border-color: var(--border-light); color: var(--text); background: var(--bg-card-hover); } .legal-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-block-xl) var(--space-xl); margin-bottom: var(--space-block-lg); transition: var(--transition); } .legal-card:hover { border-color: var(--border-light); background: var(--bg-card-hover); box-shadow: var(--shadow-card-hover); } .legal-card-title { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--text); margin: 0 0 calc(20px * var(--content-space-scale)) 0; line-height: 1.3; } .legal-card-subtitle { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--text); margin: var(--space-block-lg) 0 var(--space-block-sm) 0; line-height: 1.4; } .legal-card p { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-bottom: var(--space-block-md); } .legal-card p:last-child { margin-bottom: 0; } .legal-card strong { color: var(--text); font-weight: 600; } .legal-kv { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-block-sm) 20px; align-items: start; } .legal-kv-key { font-size: 12px; color: var(--text-dim); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding-top: calc(2px * var(--content-space-scale)); } .legal-kv-value { font-size: 14px; color: var(--text-muted); line-height: 1.6;   word-break: break-word; overflow-wrap: anywhere; } .legal-kv-value strong { color: var(--text); } .legal-hint { margin-top: var(--space-block-md); font-size: 12px; color: var(--text-dim); font-style: italic; padding: var(--space-block-sm) var(--space-md); background: var(--accent-subtle); border: 1px solid var(--accent-border); border-radius: var(--radius-sm); } .legal-update { margin-top: calc(60px * var(--content-space-scale)); padding-top: calc(40px * var(--content-space-scale)); border-top: 1px solid var(--border); } .legal-update-content { text-align: center; } .legal-update small { font-size: 12px; color: var(--text-dim); }   @media (max-width: 768px) { .legal-page { padding-top: calc(64px * var(--content-space-scale)); } .legal-hero { padding: calc(40px * var(--content-space-scale)) 0 calc(30px * var(--content-space-scale)); } .legal-nav { margin: calc(30px * var(--content-space-scale)) 0 calc(40px * var(--content-space-scale)); gap: var(--space-block-xs) var(--space-xs); } .legal-chip { padding: 6px var(--space-sm); font-size: 12px; } .legal-card { padding: var(--space-block-lg) 20px; margin-bottom: calc(20px * var(--content-space-scale)); } .legal-card-title { font-size: 20px; margin-bottom: var(--space-block-md); } .legal-card-subtitle { font-size: 16px; margin: calc(20px * var(--content-space-scale)) 0 calc(10px * var(--content-space-scale)) 0; } .legal-kv { grid-template-columns: 1fr; gap: calc(6px * var(--content-space-scale)) 0; } .legal-kv-key { font-size: 11px; margin-top: var(--space-block-sm); } .legal-kv-key:first-child { margin-top: 0; } .legal-update { margin-top: calc(40px * var(--content-space-scale)); padding-top: calc(30px * var(--content-space-scale)); } } @media (max-width: 480px) { .legal-card { padding: calc(20px * var(--content-space-scale)) var(--space-md); } .section-container { padding: 0 var(--space-md); } }   .riskscore-option-text { flex: 1; line-height: 1.5; word-wrap: break-word; }   .riskscore-dim-tab { display: flex; align-items: flex-start; gap: 6px; min-width: 0; flex: 1; } .dim-icon { flex-shrink: 0; font-size: 14px; } .dim-title { font-size: 11px; word-break: break-word; overflow-wrap: break-word; line-height: 1.3; }   @media (max-width: 768px) { .riskscore-page { padding: calc(80px * var(--content-space-scale)) var(--space-md) calc(40px * var(--content-space-scale)); } .riskscore-intro-grid { grid-template-columns: 1fr; } .riskscore-intro-audience { grid-template-columns: 1fr; } .riskscore-intro-expectations span { display: block; margin-right: 0; width: 100%; } .riskscore-intro-actions .btn-primary { text-align: center; width: 100%; } .riskscore-dims { gap: calc(6px * var(--content-space-scale)) 6px; } .riskscore-dim-tab { padding: var(--space-xs) 10px; min-width: 0; flex: 1; } .dim-title { font-size: 10px; } .riskscore-option { padding: 14px var(--space-md); gap: var(--space-sm); } .riskscore-option-text { font-size: 13px; } .email-form-card { align-items: flex-start; grid-template-columns: 1fr; padding: var(--space-block-lg) var(--space-lg); } .email-form-profile { align-items: center; flex-direction: row; justify-content: flex-start; width: 100%; } .email-form-profile-photo-wrap { flex: 0 0 auto; height: 128px; width: 96px; } .email-form-profile-caption { max-width: none; text-align: left; } } @media (max-width: 480px) { .riskscore-page { padding: calc(60px * var(--content-space-scale)) var(--space-sm) calc(30px * var(--content-space-scale)); } .riskscore-dims { flex-wrap: wrap; gap: var(--space-block-2xs) var(--space-2xs); } .riskscore-dim-tab { padding: 6px var(--space-xs); flex: 1 1 calc(50% - 2px); min-width: 0; } .dim-title { font-size: 9px; } .email-form-card { padding: calc(20px * var(--content-space-scale)) 20px; } .email-form-profile { padding: var(--space-block-sm) var(--space-sm); } }   @media (prefers-reduced-motion: reduce) { .riskscore-progress-meter::-webkit-progress-value, .riskscore-progress-meter::-moz-progress-bar { transition: none; } .riskscore-option { transition: none; } .riskscore-radio-fill { transition: none; } } @media (max-width: 480px) { .navbar-logo-text { display: none; }   .hero-subline br { display: none; } .contact-option { flex-direction: column; } .contact-option-cta { align-self: stretch; } .final-cta-subline { font-size: 15px; } .final-cta-description { font-size: 13px; } }   a.btn-secondary, a.service-cta-btn { display: inline-block; text-decoration: none; }   code, pre, kbd, samp, .hero-badge-text, .hero-metric-value, .hero-metric-label, .section-label, .hero-industry-label, .hero-industry-details, .problem-metric, .service-step, .service-tag, .service-detail-price, .result-company, .result-score-number, .result-score-max, .result-teaser-label, .result-priority-risk-rank, .result-priority-risk-header span, .riskscore-intro-kicker, .riskscore-intro-preview-label, .riskscore-progress-text, .riskscore-progress-pct, .riskscore-dim-tab, .dim-breakdown-label, .dim-breakdown-score, .about-tag, .about-location, .shared-file-meta, .success-next-label { font-family: var(--font-mono); } code, pre, kbd, samp { color: var(--tertiary); background-color: var(--bg-inset); border-radius: var(--radius); } .hero-metric-value, .problem-metric, .result-score-number, .risk-gauge-score { font-variant-numeric: tabular-nums; letter-spacing: -0.03em; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); letter-spacing: var(--tracking-headline); } .navbar-link:hover, .footer-links-list a:hover { color: var(--accent); } .service-detail-link:hover, .about-link:hover, .contact-option-cta:hover, .legal-card a:hover, .footer-links-list a:hover { text-decoration: underline; text-underline-offset: 3px; } .result-card { transition: var(--transition); } .result-card:hover { background: var(--bg-card-hover); border-color: var(--border-light); box-shadow: var(--shadow-card-hover); } .feedback-choice-btn.is-selected, .feedback-scale-btn.is-selected { background: var(--accent-subtle); } .form-input.invalid, .form-input[aria-invalid="true"] { border-color: var(--danger); } .validation-message { color: var(--danger); } :where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .btn-primary:focus-visible, .navbar-cta:focus-visible, .service-cta-btn:focus-visible, .bc-action-primary:focus-visible { outline-color: var(--text); } .btn-primary:active:not(:disabled), .navbar-cta:active, .service-cta-btn:active, .bc-action-primary:active { background: var(--accent-hover); color: var(--cta-text); box-shadow: none; } .btn-primary:disabled:hover { background: var(--cta-bg); box-shadow: none; transform: none; } ::selection { background: var(--primary); color: var(--on-primary); } @media (prefers-reduced-motion: reduce) { .hero-badge-dot, .problem-status-dot { animation: none; } }   .home-page .section, .home-page .promise-section { padding: var(--space-4xl) 0; margin: 0; scroll-margin-top: 80px; } .home-page #problem { padding-block: 80px; } .home-page .section-container { width: 100%; max-width: 1152px; padding-inline: var(--space-md); } .home-page .section-label { margin-bottom: var(--space-xs); font-weight: 600; line-height: 1.5; } .home-page .section-title { max-width: 600px; font-size: 30px; line-height: 1.1; margin-bottom: var(--space-2xl); } .home-page .hero { display: block; min-height: 0; padding: 64px 0 80px; } .home-page .hero-glow { top: 25%; left: 50%; right: auto; width: 800px; height: 500px; transform: translate(-50%, -50%); filter: blur(64px); } .home-page .hero-content { position: relative; max-width: 1024px; padding-inline: var(--space-md); text-align: center; opacity: 1; transform: none; animation: none; } .home-page .hero-badge { padding: 6px 14px; } .home-page .hero-badge-dot { width: 8px; height: 8px; flex-shrink: 0; } .home-page .hero-badge-text { letter-spacing: normal; } .home-page .hero-headline { max-width: none; font-size: 36px; line-height: 1.12; letter-spacing: var(--tracking-headline); overflow-wrap: anywhere; } .home-page .hero-subline { max-width: 672px; margin: 0 auto 40px; font-size: 16px; line-height: 1.625; } .home-page .hero-subline br { display: none; } .home-page .hero-cta-group { flex-direction: column; align-items: center; justify-content: center; } .home-page .hero-cta-group a { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: var(--space-sm) var(--space-lg); font-size: 14px; line-height: 20px; } .home-page .hero-metrics { max-width: 768px; margin-inline: auto; padding-block: var(--space-lg); border-block: 1px solid var(--border); gap: var(--space-lg); text-align: left; } .home-page .hero-metric { padding-block: var(--space-2xs); } .home-page .hero-metric-value { font-size: 24px; line-height: 1.2; } .home-page .hero-metric-label { margin-top: var(--space-2xs); } .home-page .hero-industry { max-width: 768px; margin: 56px auto 0; padding: var(--space-lg); text-align: left; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); } .home-page .hero-industry-label { margin-bottom: var(--space-xs); } .home-page .hero-industry-main { font-size: 16px; line-height: 1.375; margin: 0; } .home-page .hero-industry-details { font-size: 12px; line-height: 1.4; margin-top: 14px; padding-top: var(--space-sm); border-top: 1px solid var(--border); } .home-page .promise-grid, .home-page .services-grid, .home-page .results-grid, .home-page .contact-options { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); max-width: none; } .home-page .problem-eyebrow { margin-bottom: 20px; } .home-page .problem-section .section-title { max-width: none; margin-bottom: var(--space-md); } .home-page .promise-headline { font-size: 30px; font-weight: 800; line-height: 1.1; margin-bottom: 56px; } .home-page .promise-card { padding: var(--space-xl); } .home-page .promise-icon { width: 48px; height: 48px; font-size: 20px; } .home-page .promise-title { max-width: 240px; margin-inline: auto; font-family: var(--font-mono); font-size: 18px; font-weight: 700; line-height: 1.375; } .home-page .promise-text { font-family: var(--font-mono); font-size: 12px; line-height: 1.625; } .home-page .service-card { padding: var(--space-lg); } .home-page #leistungen .section-title, .home-page #ergebnisse .section-title { margin-bottom: var(--space-md); } .home-page .services-intro, .home-page .results-intro { max-width: 720px; margin: 0 0 var(--space-2xl); color: var(--text-muted); font-family: var(--font-mono); font-size: 13px; line-height: 1.625; } .home-page .service-card.highlight { box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-card-hover); } .home-page .service-step { margin-bottom: 0; } .home-page .service-title { font-weight: 700; margin-bottom: var(--space-sm); hyphens: auto; overflow-wrap: anywhere; } .home-page .service-tag { align-self: flex-start; padding: 6px var(--space-sm); margin-bottom: 20px; border: 1px solid var(--border); } .home-page .service-desc, .home-page .services-note p { font-family: var(--font-mono); font-size: 12px; line-height: 1.625; } .home-page .service-desc { margin-bottom: var(--space-md); } .home-page .service-detail-link { margin-top: 0; font-size: 12px; } .home-page .service-cta-btn { align-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 44px; margin-top: 0; padding: 10px var(--space-md); text-align: center; font-size: 12px; line-height: 1.4; white-space: normal; } .home-page .services-note { margin-top: 40px; padding: 20px; } .home-page .services-note p { margin: 0; } .home-page .services-note .service-detail-link { display: inline-flex; align-items: center; min-height: 44px; } .home-page .result-card { padding: var(--space-lg); } .home-page .result-company { font-size: 12px; margin-bottom: var(--space-lg); } .home-page .result-item { margin-bottom: var(--space-xs); } .home-page .result-item:last-child { margin-bottom: 0; } .home-page .result-text { font-family: var(--font-mono); font-size: 12px; } .home-page .result-check { font-size: 12px; margin-top: 0; } .home-page .home-section-intro { max-width: 720px; margin: calc(-1 * var(--space-lg)) 0 var(--space-2xl); color: var(--text-muted); font-family: var(--font-mono); font-size: 13px; line-height: 1.625; } .home-page .home-knowledge-grid, .home-page .home-faq-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } .home-page .home-knowledge-card, .home-page .home-faq-item { min-width: 0; padding: var(--space-lg); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); } .home-page .home-knowledge-card { display: flex; flex-direction: column; } .home-page .home-knowledge-type { margin: 0 0 var(--space-sm); color: var(--accent); font-family: var(--font-mono); font-size: 11px; line-height: 1.5; } .home-page .home-knowledge-card h3, .home-page .home-faq-item h3 { margin: 0 0 var(--space-sm); color: var(--text-primary); font-size: 18px; line-height: 1.35; overflow-wrap: anywhere; } .home-page .home-knowledge-card > p:last-of-type, .home-page .home-faq-item p, .home-page .home-faq-next-step p { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; line-height: 1.625; } .home-page .home-knowledge-card > p:last-of-type { margin: 0 0 var(--space-lg); } .home-page .home-knowledge-card a, .home-page .home-section-link, .home-page .home-faq-next-step a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-decoration: none; } .home-page .home-knowledge-card a { margin-top: auto; } .home-page .home-knowledge-card a:hover, .home-page .home-section-link:hover, .home-page .home-faq-next-step a:hover { text-decoration: underline; text-underline-offset: 4px; } .home-page .home-section-link { margin-top: var(--space-lg); } .home-page .home-faq-item p, .home-page .home-faq-next-step p { margin: 0; } .home-page .home-faq-next-step { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); margin-top: var(--space-xl); padding: var(--space-lg); background: var(--accent-subtle); border: 1px solid var(--accent-border); border-radius: var(--radius-lg); } .home-page .about-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; text-align: left; } .home-page .about-photo { display: flex; justify-content: center; justify-self: stretch; } .home-page .about-photo picture { display: block; width: 256px; height: 256px; padding: 6px; border-radius: 50%; background: linear-gradient(45deg, var(--accent-border), var(--border), transparent); } .home-page .about-photo-img { display: block; width: 100%; max-width: none; height: 100%; } .home-page .about-content { gap: 0; min-width: 0; } .home-page .about-name { font-size: 30px; font-weight: 800; margin-bottom: var(--space-xs); } .home-page .about-subtitle { font-family: var(--font-mono); font-size: 14px; margin-bottom: var(--space-xs); } .home-page .about-location { font-size: 12px; margin-bottom: var(--space-lg); } .home-page .about-text { margin-bottom: var(--space-lg); } .home-page .about-text p { font-family: var(--font-mono); font-size: 12px; line-height: 1.625; } .home-page .about-tags { margin: 0 0 var(--space-lg); justify-content: flex-start; } .home-page .about-tag { padding: var(--space-2xs) 10px; font-size: 11px; } .home-page .about-links { margin: 0; flex-direction: row; justify-content: flex-start; } .home-page .about-link { font-family: var(--font-mono); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; } .home-page .final-cta-box { max-width: 896px; } .home-page .final-cta-title { font-size: 30px; font-weight: 800; line-height: 1; margin-bottom: var(--space-md); } .home-page .final-cta-subline, .home-page .final-cta-note, .home-page .final-cta-description, .home-page .final-cta-footnote { font-family: var(--font-mono); } .home-page .final-cta-subline { max-width: none; font-size: 16px; font-weight: 600; } .home-page .final-cta-note { font-size: 12px; margin-bottom: var(--space-lg); } .home-page .final-cta-description { max-width: 672px; font-size: 12px; line-height: 1.625; margin-bottom: var(--space-xl); } .home-page .final-cta .btn-primary { display: inline-flex; padding: 14px 28px; font-size: 14px; } .home-page .final-cta-footnote p { font-size: 11px; margin-top: var(--space-md); } .home-page #contact .section-title { font-size: 36px; margin-bottom: var(--space-lg); } .home-page .contact-intro { max-width: 672px; } .home-page .contact-intro p { font-family: var(--font-mono); font-size: 12px; line-height: 1.625; } .home-page .contact-expectations li { font-family: var(--font-mono); font-size: 12px; line-height: 1.625; } .home-page .contact-option { flex-direction: column; padding: var(--space-lg); gap: var(--space-lg); } .home-page .contact-option-icon { width: 48px; height: 48px; font-size: 20px; } .home-page .contact-option-title { font-size: 16px; font-weight: 700; line-height: 1.5; } .home-page .contact-option-text { font-family: var(--font-mono); font-size: 12px; margin-bottom: var(--space-lg); } .home-page .contact-option-cta { font-family: var(--font-mono); font-size: 12px; } @media (min-width: 640px) { .home-page .section-container, .home-page .hero-content { padding-inline: var(--space-lg); } .home-page .hero-headline { font-size: 48px; } .home-page .hero-subline { font-size: 18px; } .home-page .hero-subline br { display: inline; } .home-page .hero-cta-group { flex-direction: row; } .home-page .hero-cta-group a { width: auto; } .home-page .hero-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } .home-page .hero-metric-value { font-size: 30px; } .home-page .hero-industry { padding: 28px; } .home-page .hero-industry-main { font-size: 18px; } .home-page .section-title, .home-page .promise-headline, .home-page .about-name, .home-page .final-cta-title { font-size: 36px; } .home-page .promise-grid { gap: var(--space-xl); } .home-page .service-card { padding: var(--space-lg); } .home-page .contact-option { padding: 28px; } .home-page .about-photo picture { width: 288px; height: 288px; } .home-page .about-subtitle { font-size: 16px; } .home-page .final-cta-subline { font-size: 18px; } .home-page #contact .section-title { font-size: 48px; } .home-page .contact-intro p { font-size: 14px; } } @media (min-width: 768px) { .home-page .hero { padding-block: var(--space-4xl) 112px; } .home-page .hero-headline { font-size: 60px; } .home-page .promise-grid, .home-page .contact-options { grid-template-columns: repeat(3, minmax(0, 1fr)); } .home-page .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-page .home-knowledge-grid, .home-page .home-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-page .home-faq-next-step { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-xl); } .home-page .home-faq-next-step p { max-width: 680px; } .home-page .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }   @supports (grid-template-rows: subgrid) { .home-page .service-card { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 0; } .home-page .service-card-header { grid-row: 1; } .home-page .service-title { grid-row: 2; } .home-page .service-tag { grid-row: 3; } .home-page .service-desc { grid-row: 4; } .home-page .service-features { grid-row: 5; } .home-page .service-packages { grid-row: 6; } .home-page .service-card-actions { display: grid; grid-row: 7 / span 2; grid-template-rows: subgrid; row-gap: var(--space-sm); margin-top: 0; } .home-page .service-card-actions .service-detail-link { grid-row: 1; } .home-page .service-card-actions .service-supporting-link { grid-row: 1; } .home-page .service-card-actions .service-cta-btn { grid-row: 2; } } .home-page .about-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .home-page .final-cta-title { font-size: 48px; } } @media (min-width: 1024px) { .home-page .section-container, .home-page .hero-content { padding-inline: var(--space-xl); } .home-page .problem-section .section-title { font-size: 48px; } .home-page .home-knowledge-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .home-page .about-grid { gap: 56px; } .home-page .about-photo picture { width: 320px; height: 320px; } }   @keyframes motion-reveal { from { opacity: 0; translate: 0 10px; scale: .985; } to { opacity: 1; translate: 0 0; scale: 1; } } @keyframes motion-hero { from { opacity: .65; translate: 0 8px; } to { opacity: 1; translate: 0 0; } } @keyframes motion-feedback { from { opacity: .65; } to { opacity: 1; } }   @keyframes motion-editorial { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } } @keyframes motion-media { from { opacity: .65; translate: 0 10px; scale: 1.025; } to { opacity: 1; translate: 0 0; scale: 1; } } @keyframes motion-line-inline { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes motion-line-block { from { transform: scaleY(0); } to { transform: scaleY(1); } }   body :is(a, button, input, select, textarea, summary), body :is(.service-card, .result-card, .home-knowledge-card, .case-study-card, .knowledge-card, .fp-package, .choice-card, .check-card) { transition: var(--transition); } body .navbar-resources-toggle::after, body .rs-newsletter-toggle { transition: transform var(--motion-fast) var(--motion-ease); } body :is(.service-detail-faq, .fp-faq) > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-block-sm) var(--space-sm); list-style: none; } body :is(.service-detail-faq, .fp-faq) > summary::-webkit-details-marker { display: none; } body :is(.service-detail-faq, .fp-faq) > summary::after { content: ""; flex: 0 0 6px; width: 6px; height: 6px; margin-right: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--motion-fast) var(--motion-ease); } body :is(.service-detail-faq, .fp-faq)[open] > summary::after { transform: rotate(225deg); }   .home-page :is(.promise-card, .about-photo-img, .about-link, .contact-option, .contact-option-cta):hover { transform: none; } .hero-badge-dot, .problem-status-dot { animation: none; } @media (prefers-reduced-motion: no-preference) { .motion-enter { animation: motion-reveal var(--motion-reveal) var(--motion-ease) calc(var(--motion-order, 0) * var(--motion-stagger)) backwards; } [data-motion="hero"] { animation: motion-hero var(--motion-reveal) var(--motion-ease) backwards; } .hero-subline[data-motion="hero"] { animation-delay: calc(80ms * var(--motion-time-scale)); } .hero-cta-group[data-motion="hero"] { animation-delay: calc(160ms * var(--motion-time-scale)); } [data-motion="step"], .booking-result:not([hidden]), .inquiry-status:not([hidden]), .inquiry-booking:not([hidden]) { animation: motion-feedback var(--motion-step) ease-out; } .navbar-resources[open] > .navbar-resource-links, .navbar-links.open { animation: motion-reveal var(--motion-step) var(--motion-ease); } :is(.service-detail-faq, .fp-faq)[open] > p, .service-feature-more[open] > ul, .rs-newsletter-disclosure[open] > :not(summary) { animation: motion-feedback var(--motion-step) ease-out; } } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { body :is(.btn-primary, .btn-secondary, .service-cta-btn, .fp-button, .rs-download, .booking-submit, .newsletter-submit, .inquiry-submit-row button):hover:not(:disabled) { transform: translateY(-2px); } body :is(.author-link-card, .link-hub-link):hover { transform: translateY(-2px); } body :is(.service-card, .result-card, .home-knowledge-card, .case-study-card, .knowledge-card, .fp-package):has(a:hover) { border-color: var(--border-light); background-color: var(--bg-card-hover); } body :is(.btn-primary, .btn-secondary, .service-cta-btn, .fp-button, .rs-download, .booking-submit, .newsletter-submit, .inquiry-submit-row button):active:not(:disabled) { transform: translateY(0); } }   @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } body *, body *::before, body *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } @media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { body :is(a, button):hover { transform: none !important; } } @media print { :root { --content-space-scale: 1; } body *, body *::before, body *::after { animation: none !important; transition: none !important; } }