:root { --bg: #eef3f7; --text: #1f2933; --heading: #102a43; --card: #fbfcfe; --border: #c8d5e3; --accent: #0b7285; --error: #b42318; --muted: #52606d; --notice: #0f5132; --input-bg: #ffffff; --input-text: #1f2933; --topbar-bg: #102a43; --topbar-text: #ffffff; --topbar-link: #d9e2ec; --topbar-link-hover: #ffffff; --topbar-chip-bg: rgba(255, 255, 255, 0.08); --topbar-chip-border: rgba(255, 255, 255, 0.15); --link: #0b7285; --link-hover: #095f70; --link-visited: #0b5f9a; --btn-secondary-bg: #e9f1f7; --btn-secondary-text: #243b53; --btn-secondary-border: #d9e2ec; --column-panel-bg: #f3f7fb; --column-toggle-bg: #ffffff; --column-toggle-text: #243b53; --column-toggle-badge-bg: #d9e2ec; --column-toggle-badge-text: #102a43; --column-popover-shadow: 0 10px 24px rgba(15, 35, 60, 0.14); --column-popover-backdrop: rgba(15, 35, 60, 0.08); --hero-bg: radial-gradient(circle at 50% 25%, #e6f7f3 0%, #f7fbfc 60%, #ffffff 100%); --hero-text: #0f3d50; --warning-accent: #c05621; --warning-accent-bg: rgba(192, 86, 33, 0.12); } .rmm-audit-shell { max-width: none; margin: 0; border: 1px solid color-mix(in srgb, var(--border) 78%, #31537a 22%); } .rmm-audit-form { display: grid; gap: 12px; max-width: 520px; } .roomy-row { margin-top: 10px; gap: 14px; } .rmm-credential-group { display: grid; gap: 12px; padding: 0; border: none; border-radius: 0; background: transparent; } .soft-alert { margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); } .soft-alert-success { background: color-mix(in srgb, var(--card) 80%, #10b981 20%); } .soft-alert-warn { background: color-mix(in srgb, var(--card) 75%, #f59e0b 25%); } .rmm-hero-soft { border: 1px solid color-mix(in srgb, var(--border) 65%, #f59e0b 35%); background: linear-gradient(135deg, color-mix(in srgb, var(--card) 82%, #f8fafc 18%), color-mix(in srgb, var(--card) 78%, #fbbf24 22%)); } .rmm-audit-page { display: grid; gap: 16px; } .rmm-audit-intro { max-width: none; margin: 0; border: 1px solid color-mix(in srgb, var(--border) 78%, #31537a 22%); } .rmm-audit-intro h1 { margin-bottom: 12px; } .rmm-audit-intro p { max-width: 860px; margin: 0; } .rmm-audit-vendor-intro { margin-top: 18px; max-width: 820px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--border) 70%, #31537a 30%); border-radius: 14px; background: linear-gradient(180deg, var(--card) 0%, var(--column-panel-bg) 100%); } .rmm-audit-vendor-intro h2 { margin: 0 0 8px; font-size: 1.18rem; } .rmm-audit-vendor-intro p { margin: 0; max-width: none; } .rmm-audit-shell label { font-weight: 600; } .rmm-audit-shell input, .rmm-audit-shell select { width: 100%; max-width: 100%; } .rmm-help-text { margin: 4px 0 0; color: var(--text-muted); font-size: 0.98rem; } .rmm-button-row { justify-content: flex-start; } .rmm-suggestion-box { max-width: none; border: 1px solid color-mix(in srgb, var(--border) 78%, #31537a 22%); } .rmm-suggestion-copy { max-width: 760px; } .rmm-suggestion-copy h2 { margin-bottom: 10px; } .rmm-suggestion-copy p:last-child { margin-bottom: 0; } .rmm-suggestion-form { display: grid; gap: 12px; max-width: 680px; margin-top: 18px; } .rmm-suggestion-form textarea { width: 100%; max-width: 100%; min-height: 112px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--input-text); resize: vertical; box-sizing: border-box; font: inherit; } .rmm-unlock-card { border: 2px solid color-mix(in srgb, var(--border) 64%, #d97706 36%); box-shadow: 0 10px 24px rgba(15, 35, 60, 0.08); } .rmm-unlock-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 24px; align-items: start; background: linear-gradient( 135deg, color-mix(in srgb, var(--card) 88%, #fff7ed 12%), color-mix(in srgb, var(--card) 92%, #fef3c7 8%) ); } .rmm-unlock-hero-copy h2 { margin-bottom: 10px; } .rmm-unlock-copy { margin-bottom: 12px; font-size: 1rem; } .rmm-unlock-helper { margin: 0; color: var(--muted); font-size: 1rem; max-width: 640px; } .rmm-unlock-hero-form { padding: 18px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--border) 58%, #d97706 42%); background: color-mix(in srgb, var(--card) 86%, #ffffff 14%); } .rmm-unlock-hero-form .rmm-audit-form { max-width: none; } .rmm-unlock-label { margin-top: 4px; font-size: 1rem; font-weight: 700; color: var(--text); } .rmm-unlock-email { min-height: 54px; font-size: 1.05rem; border-width: 2px; border-color: color-mix(in srgb, var(--border) 58%, #d97706 42%); box-shadow: 0 0 0 4px color-mix(in srgb, var(--card) 76%, #fef3c7 24%); } .rmm-unlock-hero-form .button-link { min-width: 220px; min-height: 48px; font-size: 1rem; } @media (max-width: 720px) { .rmm-audit-form { max-width: none; } .rmm-button-row { flex-direction: column; align-items: stretch; } .rmm-horizontal-cards { grid-auto-columns: minmax(220px, 85vw); } .rmm-unlock-hero { grid-template-columns: 1fr; } .rmm-unlock-hero-form { padding: 16px; } } .rmm-score-grid { align-items: stretch; } .metric-card { border: 1px solid var(--border); } .metric-card-strong { border: 2px solid color-mix(in srgb, var(--border) 55%, #f59e0b 45%); } .metric-label { margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; } .stack-list { display: grid; gap: 12px; } .finding-chip { padding: 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--border) 72%, #d97706 28%); background: color-mix(in srgb, var(--card) 88%, #fef3c7 12%); } .rmm-horizontal-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 300px); gap: 12px; overflow-x: auto; padding-bottom: 4px; } .finding-chip-horizontal { min-height: 132px; } .card-border-strong { border: 2px solid color-mix(in srgb, var(--border) 72%, #d97706 28%); } html[data-theme="dark"] { --bg: #0e1620; --text: #d8e3ee; --heading: #ebf2f9; --card: #142234; --border: #2a3f57; --accent: #1fa8be; --error: #ff6b6b; --muted: #a5b7c8; --notice: #73e2b6; --input-bg: #0f1d2d; --input-text: #d8e3ee; --topbar-bg: #0a1320; --topbar-text: #ebf2f9; --topbar-link: #b7cbde; --topbar-link-hover: #ffffff; --topbar-chip-bg: rgba(255, 255, 255, 0.06); --topbar-chip-border: rgba(255, 255, 255, 0.16); --link: #70d3e8; --link-hover: #9de4f2; --link-visited: #9ab6ff; --btn-secondary-bg: #182a3f; --btn-secondary-text: #d8e3ee; --btn-secondary-border: #35506d; --column-panel-bg: #102132; --column-toggle-bg: #16283c; --column-toggle-text: #d8e3ee; --column-toggle-badge-bg: #35506d; --column-toggle-badge-text: #e7f0f8; --column-popover-shadow: 0 12px 28px rgba(0, 0, 0, 0.45); --column-popover-backdrop: rgba(0, 0, 0, 0.22); --hero-bg: radial-gradient(circle at 50% 22%, #153346 0%, #10263a 58%, #142234 100%); --hero-text: #8ad8f0; --warning-accent: #ffb26b; --warning-accent-bg: rgba(255, 178, 107, 0.16); } body { margin: 0; font-family: "Segoe UI", Tahoma, sans-serif; background: var(--bg); color: var(--text); } body.drawer-open { overflow: hidden; } a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:visited { color: var(--link-visited); } a:hover { color: var(--link-hover); } .topbar { background: var(--topbar-bg); color: var(--topbar-text); display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 20px; } .topbar-controls { display: inline-flex; align-items: center; gap: 12px; } .topbar nav { display: inline-flex; align-items: center; flex-wrap: wrap; } .brand { display: inline-flex; align-items: center; gap: 10px; } .brand-mark { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--topbar-chip-bg); box-shadow: inset 0 0 0 1px var(--topbar-chip-border); } .brand-mark svg { width: 26px; height: 26px; display: block; } .brand-text { font-weight: 700; letter-spacing: 0.02em; } .brand-text-link { color: var(--topbar-text); text-decoration: none; font-weight: 700; letter-spacing: 0.02em; } .brand-text-link:visited { color: var(--topbar-text); } .brand-text-link:hover { text-decoration: underline; } .topbar a { color: var(--topbar-link); margin-left: 12px; text-decoration: none; } .topbar a:visited { color: var(--topbar-link); } .topbar a:hover { color: var(--topbar-link-hover); } .topbar-nav-form { display: inline-block; margin: 0 0 0 12px; } .topbar-nav-button { background: none; border: none; color: var(--topbar-link); margin: 0; padding: 0; font: inherit; cursor: pointer; } .topbar-nav-button:hover { color: var(--topbar-link-hover); } .topbar-nav-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .container { max-width: 1200px; margin: 24px auto; padding: 0 16px; } .container-wide { max-width: 1400px; } .site-footer { margin-top: 48px; border-top: 1px solid var(--border); background: var(--card); } .site-footer-inner { max-width: 1200px; margin: 0 auto; padding: 28px 16px 36px; display: grid; grid-template-columns: minmax(320px, 1.7fr) minmax(260px, 1fr); gap: 28px; } .site-footer-brand h2, .site-footer-nav h2 { margin-top: 0; margin-bottom: 10px; font-size: 1rem; } .site-footer-brand p { margin: 0 0 10px; color: var(--muted); max-width: 560px; } .site-footer-meta { font-size: 0.92rem; } .site-footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-content: start; } .site-footer-nav section { display: flex; flex-direction: column; gap: 8px; } .site-footer-nav h2 { margin-bottom: 8px; } .site-footer-nav a { width: fit-content; } .card { background: linear-gradient(180deg, var(--card) 0%, color-mix(in srgb, var(--card) 78%, var(--column-panel-bg) 22%) 100%); border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 16px; box-shadow: 0 12px 28px rgba(15, 35, 60, 0.06); } h1, h2, h3 { color: var(--heading); } .narrow { max-width: 420px; margin: 48px auto; } .login-hero { max-width: 860px; margin: 24px auto 0; padding: 20px; background: var(--hero-bg); } .login-shield-art { margin: 0; font-family: "Courier New", Consolas, monospace; font-size: 13px; line-height: 1.1; text-align: center; color: var(--hero-text); white-space: pre; overflow-x: auto; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .compact-grid { gap: 20px; } .feature-marquee { position: relative; overflow: hidden; margin-bottom: 16px; } .feature-marquee:last-child { margin-bottom: 0; } .feature-marquee-track { display: flex; align-items: stretch; gap: 14px; width: max-content; animation: feature-marquee-scroll 34s linear infinite; } .feature-marquee-track-summary { animation-duration: 48s; } .feature-marquee-section .feature-marquee-track { animation-duration: 52s; } .feature-marquee:hover .feature-marquee-track { animation-play-state: paused; } .feature-marquee-card { min-width: 260px; max-width: 320px; box-sizing: border-box; padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(180deg, var(--card) 0%, var(--column-panel-bg) 100%); box-shadow: 0 10px 24px rgba(15, 35, 60, 0.08); } .feature-marquee-card-summary { min-width: 320px; } .feature-marquee-card h2, .feature-marquee-card p, .feature-marquee-card strong { margin-top: 0; margin-bottom: 0; } .feature-marquee-card p + p, .feature-marquee-card p + strong, .feature-marquee-card strong + p { margin-top: 8px; } .feature-marquee-card .feature-score-label { margin-bottom: 8px; } @keyframes feature-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } } .feature-spotlight { position: relative; overflow: hidden; border-color: rgba(11, 114, 133, 0.28); background: radial-gradient(circle at top right, rgba(11, 114, 133, 0.16), transparent 32%), linear-gradient(135deg, var(--card) 0%, var(--column-panel-bg) 100%); } .feature-spotlight::before { content: ""; position: absolute; inset: auto -80px -120px auto; width: 220px; height: 220px; border-radius: 50%; background: rgba(11, 114, 133, 0.08); filter: blur(8px); pointer-events: none; } .feature-spotlight-alert { border-color: rgba(180, 35, 24, 0.22); background: radial-gradient(circle at top left, rgba(180, 35, 24, 0.12), transparent 34%), linear-gradient(135deg, var(--card) 0%, var(--column-panel-bg) 100%); } .feature-spotlight-alert::before { inset: -100px auto auto -90px; background: rgba(180, 35, 24, 0.08); } .feature-spotlight-layout { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.9fr); gap: 22px; align-items: start; } .feature-spotlight-copy { margin-top: 0; max-width: 720px; color: var(--muted); } .feature-list-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; } .feature-list-item { padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255, 255, 255, 0.36); backdrop-filter: blur(2px); } .feature-list-item strong, .feature-list-item span { display: block; } .feature-list-item span { margin-top: 6px; color: var(--muted); } .feature-spotlight-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; } .feature-score-panel { display: grid; gap: 12px; } .feature-score-card { padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(180deg, var(--card) 0%, var(--column-panel-bg) 100%); box-shadow: 0 8px 24px rgba(15, 35, 60, 0.06); } .feature-score-card p:last-child { margin-bottom: 0; } .feature-score-card-high { border-color: rgba(180, 35, 24, 0.25); background: linear-gradient(180deg, rgba(180, 35, 24, 0.08) 0%, rgba(180, 35, 24, 0.02) 100%), linear-gradient(180deg, var(--card) 0%, var(--column-panel-bg) 100%); } .feature-score-label { margin: 0 0 8px; color: var(--accent); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .feature-score-value { margin: 0 0 8px; font-size: 1.4rem; font-weight: 800; line-height: 1.1; } .feature-alert-panel { display: grid; gap: 12px; } .feature-alert-card { padding: 16px; border: 1px solid rgba(180, 35, 24, 0.18); border-radius: 12px; background: linear-gradient(180deg, rgba(180, 35, 24, 0.07) 0%, rgba(180, 35, 24, 0.01) 100%), linear-gradient(180deg, var(--card) 0%, var(--column-panel-bg) 100%); box-shadow: 0 8px 24px rgba(15, 35, 60, 0.06); } .feature-alert-card p:last-child { margin-bottom: 0; } .feature-alert-label { margin: 0 0 8px; color: var(--error); font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } .feature-alert-title { margin: 0 0 8px; font-size: 1.2rem; font-weight: 800; line-height: 1.15; } .feature-preview { border-color: rgba(11, 114, 133, 0.2); background: radial-gradient(circle at top center, rgba(11, 114, 133, 0.08), transparent 32%), linear-gradient(180deg, var(--card) 0%, var(--column-panel-bg) 100%); text-align: center; } .feature-preview-copy { max-width: 860px; margin: 0 auto; text-align: left; } .feature-preview-points { margin: 14px 0 0; color: var(--muted); } .feature-preview-actions { margin: 16px 0 0; } .feature-preview-frame { margin: 20px auto 0; width: min(100%, 920px); border: 1px solid var(--border); border-radius: 16px; background: var(--card); box-shadow: 0 18px 36px rgba(15, 35, 60, 0.12); overflow: hidden; } .feature-report-preview-frame { background: radial-gradient(circle at top center, rgba(11, 114, 133, 0.08), transparent 30%), linear-gradient(180deg, var(--card) 0%, var(--column-panel-bg) 100%); } .feature-report-preview { display: grid; gap: 16px; padding: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, #ffffff 8%) 0%, color-mix(in srgb, var(--column-panel-bg) 88%, #eef9fb 12%) 100%); } .feature-report-hero, .feature-report-panel { border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(180deg, var(--card) 0%, var(--column-panel-bg) 100%); box-shadow: 0 12px 26px rgba(15, 35, 60, 0.08); } .feature-report-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr); gap: 18px; padding: 18px; border-color: rgba(11, 114, 133, 0.28); background: radial-gradient(circle at top right, rgba(11, 114, 133, 0.1), transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, #f5fdfd 6%) 0%, color-mix(in srgb, var(--column-panel-bg) 82%, #ddf5f6 18%) 100%); } .feature-report-eyebrow { margin: 0 0 8px; color: var(--accent); font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } .feature-report-hero h3, .feature-report-panel h3 { margin: 0; font-size: 1.4rem; } .feature-report-status { margin: 8px 0 10px; color: var(--error); font-weight: 800; } .feature-report-copy { margin: 0; color: var(--muted); } .feature-report-mini-grid, .feature-report-kpi-grid, .feature-report-status-grid { display: grid; gap: 12px; } .feature-report-mini-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; } .feature-report-mini-card, .feature-report-kpi-grid article, .feature-report-status-grid article { padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(180deg, var(--card) 0%, color-mix(in srgb, var(--column-panel-bg) 90%, #ffffff 10%) 100%); text-align: center; } .feature-report-mini-card span, .feature-report-kpi-grid span, .feature-report-status-grid span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; } .feature-report-mini-card strong, .feature-report-kpi-grid strong, .feature-report-status-grid strong { display: block; font-size: 1.7rem; line-height: 1.1; color: #102a43; } .feature-report-two-up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .feature-report-panel { padding: 18px; } .feature-report-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; } .feature-report-kpi-grid-compact strong { font-size: 1.05rem; } .feature-report-status-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; } .feature-report-accent-good { border-color: rgba(45, 212, 191, 0.34); } .feature-report-accent-warn { border-color: rgba(245, 158, 11, 0.34); } .feature-report-panel ul { margin: 12px 0 0 18px; padding: 0; } .feature-report-panel li + li { margin-top: 10px; } .feature-preview-image { display: block; width: 100%; max-width: 920px; height: auto; background: #ffffff; } .feature-preview-caption { margin: 0; padding: 12px 14px; border-top: 1px solid var(--border); background: linear-gradient(180deg, var(--card) 0%, var(--column-panel-bg) 100%); color: var(--muted); font-size: 0.95rem; } html[data-theme="dark"] .feature-spotlight { border-color: rgba(112, 211, 232, 0.42); background: radial-gradient(circle at top right, rgba(112, 211, 232, 0.18), transparent 34%), linear-gradient(145deg, #13273c 0%, #102132 52%, #162c40 100%); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); } html[data-theme="dark"] .feature-spotlight::before { background: rgba(112, 211, 232, 0.12); } html[data-theme="dark"] .feature-spotlight-alert { border-color: rgba(255, 107, 107, 0.38); background: radial-gradient(circle at top left, rgba(255, 107, 107, 0.18), transparent 36%), linear-gradient(145deg, #2b1820 0%, #201821 50%, #1a2533 100%); } html[data-theme="dark"] .feature-spotlight-alert::before { background: rgba(255, 107, 107, 0.12); } html[data-theme="dark"] .feature-list-item { border-color: rgba(112, 211, 232, 0.22); background: linear-gradient(180deg, rgba(19, 39, 60, 0.95) 0%, rgba(14, 29, 45, 0.98) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } html[data-theme="dark"] .feature-score-card { border-color: rgba(112, 211, 232, 0.2); background: linear-gradient(180deg, rgba(21, 40, 59, 0.98) 0%, rgba(12, 24, 37, 0.98) 100%); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.32); } html[data-theme="dark"] .feature-score-card-high { border-color: rgba(255, 107, 107, 0.46); background: linear-gradient(180deg, rgba(255, 107, 107, 0.18) 0%, rgba(255, 107, 107, 0.05) 100%), linear-gradient(180deg, rgba(46, 21, 28, 0.98) 0%, rgba(25, 19, 24, 0.98) 100%); } html[data-theme="dark"] .feature-score-label { color: #9de4f2; } html[data-theme="dark"] .feature-score-card-high .feature-score-label { color: #ffb0b0; } html[data-theme="dark"] .feature-alert-card { border-color: rgba(255, 107, 107, 0.34); background: linear-gradient(180deg, rgba(255, 107, 107, 0.13) 0%, rgba(255, 107, 107, 0.03) 100%), linear-gradient(180deg, rgba(39, 24, 31, 0.98) 0%, rgba(17, 25, 36, 0.98) 100%); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3); } html[data-theme="dark"] .feature-preview { border-color: rgba(112, 211, 232, 0.34); background: radial-gradient(circle at top center, rgba(112, 211, 232, 0.12), transparent 36%), linear-gradient(145deg, #13273c 0%, #102132 52%, #162c40 100%); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); } html[data-theme="dark"] .feature-preview-frame { border-color: rgba(112, 211, 232, 0.18); background: rgba(11, 20, 31, 0.94); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.32); } html[data-theme="dark"] .feature-preview-caption { border-top-color: rgba(112, 211, 232, 0.18); background: linear-gradient(180deg, rgba(21, 40, 59, 0.98) 0%, rgba(12, 24, 37, 0.98) 100%); } html[data-theme="dark"] .feature-report-preview-frame { border-color: rgba(112, 211, 232, 0.18); } html[data-theme="dark"] .feature-report-preview { background: linear-gradient(180deg, rgba(16, 33, 50, 0.98) 0%, rgba(10, 24, 37, 0.98) 100%); } html[data-theme="dark"] .feature-report-hero, html[data-theme="dark"] .feature-report-panel { border-color: rgba(112, 211, 232, 0.2); background: linear-gradient(180deg, rgba(21, 40, 59, 0.98) 0%, rgba(12, 24, 37, 0.98) 100%); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.32); } html[data-theme="dark"] .feature-report-hero { border-color: rgba(112, 211, 232, 0.34); background: radial-gradient(circle at top right, rgba(112, 211, 232, 0.14), transparent 36%), linear-gradient(180deg, rgba(18, 39, 53, 0.98) 0%, rgba(11, 28, 40, 0.98) 100%); } html[data-theme="dark"] .feature-report-mini-card, html[data-theme="dark"] .feature-report-kpi-grid article, html[data-theme="dark"] .feature-report-status-grid article { border-color: rgba(112, 211, 232, 0.16); background: linear-gradient(180deg, rgba(19, 39, 60, 0.95) 0%, rgba(14, 29, 45, 0.98) 100%); } html[data-theme="dark"] .feature-report-mini-card strong, html[data-theme="dark"] .feature-report-kpi-grid strong, html[data-theme="dark"] .feature-report-status-grid strong { color: #f4f7fb; } @media (max-width: 860px) { .feature-report-hero, .feature-report-two-up, .feature-report-status-grid { grid-template-columns: 1fr; } .feature-report-mini-grid, .feature-report-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .feature-report-preview { padding: 12px; } .feature-report-mini-grid, .feature-report-kpi-grid, .feature-report-status-grid { grid-template-columns: 1fr; } .pricing-fit-grid { grid-template-columns: 1fr; } .feature-tier-hero-grid, .feature-tier-card-grid { grid-template-columns: 1fr; } .feature-tier-section-header { flex-direction: column; } } .feature-marquee .feature-marquee-card { min-width: 260px; max-width: 320px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(180deg, var(--card) 0%, var(--column-panel-bg) 100%); box-shadow: 0 10px 24px rgba(15, 35, 60, 0.08); } .feature-marquee .feature-marquee-card-summary { min-width: 320px; } .feature-marquee .feature-marquee-card .feature-score-value, .feature-marquee .feature-marquee-card .feature-alert-title { margin-bottom: 0; font-size: 1.2rem; } html[data-theme="dark"] .feature-marquee .feature-marquee-card { border-color: rgba(112, 211, 232, 0.22); background: linear-gradient(180deg, rgba(21, 40, 59, 0.98) 0%, rgba(12, 24, 37, 0.98) 100%); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28); } @media (prefers-reduced-motion: reduce) { .feature-marquee { overflow: visible; } .feature-marquee-track { width: auto; flex-wrap: wrap; animation: none; } } .dashboard-subtitle { margin-top: -4px; margin-bottom: 16px; color: var(--muted); } .dashboard-kpi-grid { margin-bottom: 16px; } .dashboard-kpi-card { min-height: 120px; } .dashboard-kpi-card h2 { font-size: 1rem; margin-top: 0; } .dashboard-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .dashboard-chart-card h2 { margin-top: 0; } .dashboard-chart-canvas { width: 100%; min-height: 320px; } .dashboard-chart-empty { min-height: 320px; display: grid; place-items: center; text-align: center; color: var(--muted); border: 1px dashed var(--border); border-radius: 8px; background: var(--column-panel-bg); } @media (max-width: 860px) { .dashboard-chart-grid { grid-template-columns: 1fr; } .dashboard-chart-canvas, .dashboard-chart-empty { min-height: 280px; } .site-footer-inner, .site-footer-nav { grid-template-columns: 1fr; } .feature-spotlight-layout, .asset-download-hero-grid, .feature-list-grid, .sales-hero-layout, .sales-preview-layout, .sales-how-grid, .sales-step-row, .sales-kpi-row, .sales-chart-panel, .sales-preview-grid, .sales-testimonial-grid { grid-template-columns: 1fr; } } .public-hero h1 { margin-top: 4px; margin-bottom: 10px; } .eyebrow { margin: 0; color: var(--accent); font-size: 0.86rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .hero-subtitle { margin-top: 0; max-width: 760px; color: var(--muted); } .section-intro { margin-top: 0; color: var(--muted); max-width: 820px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; } .home-hero { position: relative; isolation: isolate; padding-bottom: 46px; margin-bottom: 16px; border-color: rgba(11, 114, 133, 0.24); background: radial-gradient(circle at top right, rgba(11, 114, 133, 0.18), transparent 28%), radial-gradient(circle at bottom left, rgba(192, 86, 33, 0.1), transparent 22%), linear-gradient(135deg, color-mix(in srgb, var(--card) 86%, #ffffff 14%) 0%, color-mix(in srgb, var(--column-panel-bg) 86%, #fff7ed 14%) 100%); box-shadow: 0 22px 44px rgba(15, 35, 60, 0.1); overflow: visible; } .home-hero::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 6px; background: linear-gradient(90deg, #c05621 0%, #f59e0b 42%, var(--accent) 100%); } .home-hero::after { content: ""; position: absolute; inset: auto -120px -140px auto; width: 320px; height: 320px; border-radius: 999px; background: radial-gradient(circle, rgba(11, 114, 133, 0.14) 0%, rgba(245, 158, 11, 0.1) 42%, transparent 72%); pointer-events: none; } .home-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; } .home-hero-copy { position: relative; z-index: 1; margin-bottom: 22px; max-width: 900px; } .home-hero-copy .hero-subtitle { max-width: 760px; color: color-mix(in srgb, var(--muted) 84%, #102a43 16%); } .home-hero-copy::after { content: ">"; position: absolute; right: 0; bottom: -8px; transform: none; color: color-mix(in srgb, var(--accent) 72%, #f59e0b 28%); font-size: 2.4rem; font-weight: 900; line-height: 1; opacity: 0.62; } .home-hero-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; padding-bottom: 8px; } .home-offer-card { position: relative; display: flex; flex-direction: column; min-height: 100%; padding: 18px; border: 1px solid color-mix(in srgb, var(--border) 78%, #31537a 22%); border-radius: 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 90%, #ffffff 10%) 0%, color-mix(in srgb, var(--column-panel-bg) 88%, #edf5fb 12%) 100%); box-shadow: 0 18px 34px rgba(15, 35, 60, 0.12); overflow: hidden; } .home-offer-card::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 5px; background: linear-gradient(90deg, var(--accent) 0%, #f59e0b 100%); } .home-offer-card-primary { border-color: color-mix(in srgb, var(--border) 42%, #c05621 58%); background: radial-gradient(circle at top right, rgba(245, 158, 11, 0.22), transparent 34%), linear-gradient(160deg, color-mix(in srgb, var(--card) 84%, #fff7ed 16%) 0%, color-mix(in srgb, var(--column-panel-bg) 72%, #fef3c7 28%) 100%); box-shadow: 0 26px 50px rgba(15, 35, 60, 0.18); transform: translateY(-4px); } .home-offer-card-secondary { border-color: color-mix(in srgb, var(--border) 52%, #0b7285 32%, #f59e0b 16%); background: radial-gradient(circle at top left, rgba(11, 114, 133, 0.16), transparent 34%), radial-gradient(circle at bottom right, rgba(245, 158, 11, 0.12), transparent 28%), linear-gradient(160deg, color-mix(in srgb, var(--card) 88%, #f8fcfc 12%) 0%, color-mix(in srgb, var(--column-panel-bg) 80%, #fff7ed 20%) 100%); box-shadow: 0 20px 38px rgba(15, 35, 60, 0.14); } .home-offer-card-secondary::before { background: linear-gradient(90deg, var(--accent) 0%, #f59e0b 100%); } .home-offer-card-tertiary { border-color: color-mix(in srgb, var(--border) 48%, #0b7285 30%, #bf4d25 22%); background: radial-gradient(circle at top right, rgba(11, 114, 133, 0.18), transparent 30%), radial-gradient(circle at bottom left, rgba(191, 77, 37, 0.16), transparent 28%), linear-gradient(160deg, color-mix(in srgb, var(--card) 86%, #f7fbfc 14%) 0%, color-mix(in srgb, var(--column-panel-bg) 76%, #fdebdc 24%) 100%); box-shadow: 0 24px 42px rgba(15, 35, 60, 0.16); isolation: isolate; } .home-offer-card-tertiary::before { background: linear-gradient(90deg, #bf4d25 0%, var(--accent) 58%, #f59e0b 100%); } .home-offer-card-tertiary::after { content: ""; position: absolute; right: -32px; top: -28px; width: 152px; height: 152px; border-radius: 999px; background: radial-gradient(circle, rgba(11, 114, 133, 0.22) 0%, rgba(245, 158, 11, 0.14) 38%, transparent 72%); opacity: 0.92; pointer-events: none; z-index: 0; animation: home-offer-report-glow 4.8s ease-in-out infinite; } .home-offer-card-tertiary > * { position: relative; z-index: 1; } .home-offer-label { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; color: #9c4221; font-size: 0.8rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .home-offer-label::before { content: ">"; display: inline-block; color: var(--accent); font-size: 1rem; line-height: 1; } .home-offer-card h2 { margin: 0 0 10px; font-size: 1.58rem; line-height: 1.03; text-wrap: balance; } .home-offer-copy { margin: 0 0 14px; color: color-mix(in srgb, var(--text) 88%, #243b53 12%); line-height: 1.58; } .home-offer-support-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; margin: 0 0 14px; padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--border) 68%, #f59e0b 32%); border-radius: 14px; background: rgba(255, 255, 255, 0.76); } .home-offer-support-label { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--card) 74%, #fff3cd 26%); color: #9c4221; font-size: 0.82rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .home-offer-support-label::before { content: ">"; margin-right: 6px; color: var(--accent); } .home-offer-rotating { display: flex; align-items: center; justify-content: flex-start; margin: 0; min-height: 2.4em; color: var(--accent); font-size: 0.94rem; font-weight: 900; line-height: 1.35; text-align: left; } .home-offer-button { width: 100%; margin-top: auto; min-height: 52px; border-radius: 14px; font-size: 0.94rem; font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; box-shadow: 0 16px 30px rgba(8, 85, 103, 0.22); } .home-offer-button-primary { gap: 10px; background: linear-gradient(180deg, #0b7285 0%, #085567 100%); box-shadow: 0 18px 34px rgba(8, 85, 103, 0.26); } .home-offer-button-arrow { display: inline-block; font-size: 1.05rem; font-weight: 900; transition: transform 160ms ease; } .home-offer-button-primary:hover .home-offer-button-arrow, .home-offer-button-primary:focus-visible .home-offer-button-arrow { transform: translateX(4px); } .home-offer-button-secondary { border: 1px solid rgba(11, 114, 133, 0.34); background: linear-gradient(180deg, color-mix(in srgb, var(--btn-secondary-bg) 52%, #ffffff 48%) 0%, color-mix(in srgb, var(--btn-secondary-bg) 66%, #fff7ed 34%) 100%); color: var(--btn-secondary-text); box-shadow: 0 14px 28px rgba(15, 35, 60, 0.12); } .home-offer-button-tertiary { gap: 10px; background: linear-gradient(180deg, #bf4d25 0%, #9c4221 100%); box-shadow: 0 18px 34px rgba(156, 66, 33, 0.28); } .home-offer-button-tertiary:hover, .home-offer-button-tertiary:focus-visible { filter: none; background: linear-gradient(180deg, #a84320 0%, #7c3419 100%); } .home-offer-button-tertiary:hover .home-offer-button-arrow, .home-offer-button-tertiary:focus-visible .home-offer-button-arrow { transform: translateX(4px); } .home-offer-support-row-report { border-color: color-mix(in srgb, var(--border) 58%, #bf4d25 42%); background: linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 247, 237, 0.92) 100%); } .home-benefits-card { position: relative; border-color: color-mix(in srgb, var(--border) 72%, #28b463 28%); background: linear-gradient(180deg, color-mix(in srgb, var(--card) 82%, #f8fcfa 18%) 0%, color-mix(in srgb, var(--column-panel-bg) 74%, #edf8f0 26%) 100%); box-shadow: 0 18px 34px rgba(15, 35, 60, 0.08); overflow: hidden; } .home-benefits-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 8px; background: linear-gradient(180deg, #28b463 0%, #7ddf8a 100%); } .home-benefits-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin-top: 18px; } .home-benefit-item { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--border) 78%, #28b463 22%); border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, #ffffff 8%) 0%, color-mix(in srgb, var(--column-panel-bg) 88%, #edf5f9 12%) 100%); box-shadow: 0 12px 24px rgba(15, 35, 60, 0.08); font-weight: 700; } .home-benefit-check { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 999px; background: linear-gradient(180deg, #29bf69 0%, #169c51 100%); color: #fff; font-weight: 900; box-shadow: 0 8px 16px rgba(22, 156, 81, 0.28); } .home-offer-button-secondary:visited { color: var(--btn-secondary-text); } .home-offer-button-secondary:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--btn-secondary-bg) 56%, #ffffff 44%) 0%, color-mix(in srgb, var(--btn-secondary-bg) 66%, #fff3cd 34%) 100%); border-color: rgba(11, 114, 133, 0.38); color: var(--text); filter: none; } @keyframes home-offer-report-glow { 0%, 100% { transform: scale(0.94) translate3d(0, 0, 0); opacity: 0.68; } 50% { transform: scale(1.06) translate3d(-8px, 8px, 0); opacity: 1; } } .home-value-grid { align-items: stretch; } .home-value-card { min-height: 220px; padding: 0; border-color: color-mix(in srgb, var(--border) 72%, var(--accent) 28%); background: transparent; perspective: 1200px; overflow: visible; } .home-value-card-inner { position: relative; min-height: 220px; height: 100%; border-radius: 8px; transform-style: preserve-3d; transition: transform 520ms ease; } .home-value-card:hover .home-value-card-inner, .home-value-card:focus-within .home-value-card-inner, .home-value-card:focus .home-value-card-inner { transform: rotateY(180deg); } .home-value-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .home-value-card-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px 22px; border: 1px solid color-mix(in srgb, var(--border) 64%, var(--accent) 36%); border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-sizing: border-box; text-align: center; box-shadow: 0 18px 34px rgba(15, 35, 60, 0.1); } .home-value-card-front { background: radial-gradient(circle at top right, rgba(11, 114, 133, 0.16), transparent 34%), linear-gradient(160deg, color-mix(in srgb, var(--card) 88%, #ffffff 12%) 0%, color-mix(in srgb, var(--column-panel-bg) 82%, #edf5fb 18%) 100%); } .home-value-card-front h2 { margin: 0; font-size: 1.5rem; line-height: 1.12; text-wrap: balance; } .home-value-card-back { transform: rotateY(180deg); background: radial-gradient(circle at top left, rgba(245, 158, 11, 0.18), transparent 34%), linear-gradient(160deg, color-mix(in srgb, var(--card) 86%, #fff7ed 14%) 0%, color-mix(in srgb, var(--column-panel-bg) 74%, #fef3c7 26%) 100%); } .home-value-card-back p { margin: 0; color: var(--text); font-size: 1rem; font-weight: 600; line-height: 1.55; text-wrap: balance; } .button-link { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; min-height: 44px; box-sizing: border-box; border-radius: 6px; text-decoration: none; background: linear-gradient(180deg, #0b7285 0%, #085567 100%); color: #ffffff; font-weight: 600; box-shadow: 0 12px 24px rgba(8, 85, 103, 0.18); } .button-link:visited { color: #ffffff; } .button-link:hover { filter: brightness(0.95); } .button-link-secondary { background: linear-gradient(180deg, var(--btn-secondary-bg) 0%, color-mix(in srgb, var(--btn-secondary-bg) 84%, #ffffff 16%) 100%); border: 1px solid var(--btn-secondary-border); color: var(--btn-secondary-text); } .home-testimonials { border-color: color-mix(in srgb, var(--border) 78%, #31537a 22%); background: radial-gradient(circle at top right, rgba(11, 114, 133, 0.08), transparent 30%), linear-gradient(180deg, color-mix(in srgb, var(--card) 84%, #f8fbfd 16%) 0%, color-mix(in srgb, var(--column-panel-bg) 86%, #edf4f8 14%) 100%); box-shadow: 0 18px 34px rgba(15, 35, 60, 0.08); } .home-testimonials .sales-testimonial-card { border-color: color-mix(in srgb, var(--border) 74%, #31537a 26%); background: linear-gradient(180deg, color-mix(in srgb, var(--card) 90%, #ffffff 10%) 0%, color-mix(in srgb, var(--column-panel-bg) 84%, #eef5f9 16%) 100%); box-shadow: 0 14px 28px rgba(15, 35, 60, 0.09); } .home-testimonials .sales-testimonial-rating { color: #0b7285; font-weight: 800; } .home-testimonials .section-intro, .home-testimonials .sales-testimonial-meta { color: color-mix(in srgb, var(--muted) 86%, #243b53 14%); } .button-link-secondary:visited { color: var(--btn-secondary-text); } .docs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } .doc-journey-card { min-height: 150px; } .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .pricing-plan { position: relative; } .pricing-grid-comparison { align-items: stretch; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .pricing-plan h2 { margin-top: 0; margin-bottom: 12px; font-size: 1.35rem; line-height: 1.2; } .pricing-plan-premium { border-color: rgba(11, 114, 133, 0.32); background: radial-gradient(circle at top right, rgba(11, 114, 133, 0.1), transparent 34%), linear-gradient(180deg, var(--card) 0%, var(--column-panel-bg) 100%); } .plan-price-stack { display: grid; gap: 4px; margin: 0 0 10px; } .plan-price-regular { position: relative; display: inline-flex; align-items: baseline; width: fit-content; margin: 0; font-size: 2.35rem; font-weight: 900; line-height: 1; color: color-mix(in srgb, var(--muted) 68%, #9c4221 32%); } .plan-price-regular::after { content: ""; position: absolute; left: -6px; right: -8px; top: 50%; height: 5px; border-radius: 999px; background: linear-gradient(90deg, #c05621 0%, #f59e0b 100%); transform: rotate(-9deg); box-shadow: 0 2px 8px rgba(192, 86, 33, 0.18); } .sales-hero { padding: 22px; background: radial-gradient(circle at top right, rgba(11, 114, 133, 0.12), transparent 28%), linear-gradient(135deg, var(--card) 0%, var(--column-panel-bg) 100%); } .sales-hero-layout, .sales-preview-layout, .sales-how-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr); gap: 24px; align-items: start; } .sales-hero-copy .hero-subtitle, .sales-hero-copy .section-intro { max-width: 620px; } .asset-download-hero { border-color: rgba(11, 114, 133, 0.24); background: radial-gradient(circle at top right, rgba(11, 114, 133, 0.12), transparent 30%), linear-gradient(135deg, var(--card) 0%, var(--column-panel-bg) 100%); } .asset-download-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); gap: 24px; align-items: start; } .asset-download-panel { position: relative; padding: 24px; border: 1px solid color-mix(in srgb, var(--border) 55%, #c05621 45%); border-radius: 20px; background: radial-gradient(circle at top right, rgba(192, 86, 33, 0.12), transparent 34%), linear-gradient(155deg, color-mix(in srgb, var(--card) 92%, #fff7ed 8%) 0%, color-mix(in srgb, var(--column-panel-bg) 80%, #fef3c7 20%) 100%); box-shadow: 0 18px 36px rgba(15, 35, 60, 0.14); overflow: hidden; transform: translateY(-10px) scale(1.02); } .asset-download-panel::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 6px; background: linear-gradient(90deg, #c05621 0%, #f59e0b 45%, var(--accent) 100%); } .asset-download-panel::after { content: ""; position: absolute; inset: auto -80px -90px auto; width: 220px; height: 220px; border-radius: 999px; background: radial-gradient(circle, rgba(245, 158, 11, 0.26) 0%, rgba(11, 114, 133, 0.16) 42%, transparent 72%); pointer-events: none; } .asset-download-kicker { display: inline-flex; align-items: center; margin: 0 0 10px; padding: 7px 12px; border-radius: 999px; background: linear-gradient(90deg, #c05621 0%, #f59e0b 100%); color: #ffffff; font-size: 0.8rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 10px 24px rgba(192, 86, 33, 0.22); } .asset-download-panel h2 { margin-bottom: 10px; font-size: 2.15rem; line-height: 0.98; } .asset-download-label { margin: 0 0 8px; color: #9c4221; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .asset-download-copy { margin-bottom: 18px; color: var(--text); font-size: 1.08rem; line-height: 1.58; max-width: 28rem; } .asset-download-spotlight { position: relative; margin-bottom: 18px; padding: 16px 18px 16px 20px; border: 1px solid color-mix(in srgb, var(--border) 38%, #f59e0b 62%); border-left: 6px solid #f59e0b; border-radius: 16px; background: linear-gradient(180deg, rgba(255, 243, 205, 0.92) 0%, rgba(255, 247, 237, 0.86) 100%); box-shadow: 0 14px 28px rgba(192, 86, 33, 0.12); } .asset-download-spotlight-label { margin: 0 0 4px; color: #9c4221; font-size: 0.82rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .asset-download-spotlight-text { margin: 0; font-size: 1.06rem; font-weight: 800; line-height: 1.4; } .asset-download-form { display: grid; gap: 12px; position: relative; z-index: 1; } .asset-download-form-label { margin-top: 0; font-size: 1.02rem; font-weight: 900; color: var(--text); } .asset-download-email { min-height: 64px; padding: 14px 16px; font-size: 1.12rem; font-weight: 600; border-width: 2px; border-color: color-mix(in srgb, var(--border) 42%, #c05621 58%); border-radius: 14px; background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%); box-shadow: 0 0 0 8px color-mix(in srgb, var(--card) 62%, #fef3c7 38%), 0 16px 28px rgba(15, 35, 60, 0.08); } .asset-download-email::placeholder { color: color-mix(in srgb, var(--muted) 82%, #9c4221 18%); } .asset-download-email:focus { outline: 3px solid color-mix(in srgb, var(--accent) 52%, #f59e0b 48%); outline-offset: 2px; } .asset-download-input-cue { margin: 2px 0 0; color: #9c4221; font-size: 0.96rem; font-weight: 800; } .asset-download-helper { margin-top: 0; margin-bottom: 0; font-size: 0.95rem; line-height: 1.45; } .asset-download-button { width: 100%; min-height: 60px; border-radius: 14px; font-size: 1.08rem; font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; box-shadow: 0 16px 30px rgba(11, 114, 133, 0.24); } .sample-report-customizer-form { display: grid; gap: 12px; } .sample-report-customizer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .sample-report-customizer-label { display: block; margin: 0 0 8px; color: var(--text); font-size: 0.95rem; font-weight: 800; } .sample-report-customizer-form input:not(.asset-download-email), .sample-report-customizer-form select, .sample-report-customizer-form textarea { width: 100%; max-width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--input-bg); color: var(--input-text); box-sizing: border-box; font: inherit; } .sample-report-customizer-form input:not(.asset-download-email):focus, .sample-report-customizer-form select:focus, .sample-report-customizer-form textarea:focus { outline: 3px solid color-mix(in srgb, var(--accent) 52%, #f59e0b 48%); outline-offset: 2px; } .roadmap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; } .roadmap-grid-secondary { margin-top: 0; } .roadmap-card { padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(180deg, var(--card) 0%, var(--column-panel-bg) 100%); } .roadmap-card h2, .roadmap-card h3 { margin-top: 0; margin-bottom: 10px; } .roadmap-card p:last-child { margin-bottom: 0; } .roadmap-card-primary { border-color: rgba(11, 114, 133, 0.24); background: radial-gradient(circle at top right, rgba(11, 114, 133, 0.08), transparent 34%), linear-gradient(180deg, var(--card) 0%, var(--column-panel-bg) 100%); } .roadmap-panel { transform: none; } .roadmap-request-form textarea { min-height: 132px; resize: vertical; } .roadmap-bullet-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .roadmap-bullet-list li { position: relative; padding: 14px 16px 14px 48px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, #ffffff 6%) 0%, color-mix(in srgb, var(--column-panel-bg) 88%, #eef9fb 12%) 100%); font-weight: 700; } .roadmap-bullet-list li::before { content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; border-radius: 999px; background: linear-gradient(180deg, #0b7285 0%, #1fa8be 100%); box-shadow: 0 6px 14px rgba(11, 114, 133, 0.22); transform: translateY(-50%); } .asset-value-list { display: grid; gap: 12px; margin-top: 18px; } .asset-value-item { padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255, 255, 255, 0.42); } .asset-value-item strong, .asset-value-item span { display: block; } .asset-value-item span { margin-top: 6px; color: var(--muted); } .faq-list { display: grid; gap: 14px; } .faq-item h3 { margin: 0 0 8px; font-size: 1rem; } .faq-item p:last-child { margin-bottom: 0; } html[data-theme="dark"] .asset-download-hero { border-color: rgba(112, 211, 232, 0.36); background: radial-gradient(circle at top right, rgba(112, 211, 232, 0.16), transparent 34%), linear-gradient(145deg, #13273c 0%, #102132 52%, #162c40 100%); } html[data-theme="dark"] .asset-download-panel, html[data-theme="dark"] .asset-value-item { border-color: rgba(112, 211, 232, 0.2); background: linear-gradient(180deg, rgba(21, 40, 59, 0.98) 0%, rgba(12, 24, 37, 0.98) 100%); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28); } html[data-theme="dark"] .home-hero { border-color: rgba(112, 211, 232, 0.34); background: radial-gradient(circle at top right, rgba(112, 211, 232, 0.16), transparent 30%), radial-gradient(circle at bottom left, rgba(255, 178, 107, 0.1), transparent 24%), linear-gradient(145deg, #13273c 0%, #102132 52%, #162c40 100%); } html[data-theme="dark"] .home-offer-card { border-color: rgba(112, 211, 232, 0.2); background: linear-gradient(180deg, rgba(21, 40, 59, 0.98) 0%, rgba(12, 24, 37, 0.98) 100%); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28); } html[data-theme="dark"] .home-offer-card-primary { border-color: rgba(255, 178, 107, 0.42); background: radial-gradient(circle at top right, rgba(255, 178, 107, 0.16), transparent 36%), linear-gradient(160deg, rgba(35, 31, 24, 0.98) 0%, rgba(19, 39, 60, 0.98) 100%); } html[data-theme="dark"] .home-offer-card-secondary { border-color: rgba(112, 211, 232, 0.32); background: radial-gradient(circle at top left, rgba(112, 211, 232, 0.16), transparent 38%), radial-gradient(circle at bottom right, rgba(255, 178, 107, 0.12), transparent 30%), linear-gradient(160deg, rgba(19, 39, 60, 0.98) 0%, rgba(20, 35, 52, 0.98) 100%); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28); } html[data-theme="dark"] .home-offer-card-tertiary { border-color: rgba(255, 178, 107, 0.34); background: radial-gradient(circle at top right, rgba(112, 211, 232, 0.16), transparent 32%), radial-gradient(circle at bottom left, rgba(255, 178, 107, 0.14), transparent 30%), linear-gradient(160deg, rgba(26, 38, 52, 0.98) 0%, rgba(34, 29, 26, 0.98) 100%); box-shadow: 0 18px 34px rgba(0, 0, 0, 0.3); } html[data-theme="dark"] .home-offer-label { color: #ffcf99; } html[data-theme="dark"] .home-offer-copy { color: #f4f7fb; } html[data-theme="dark"] .home-offer-support-row { border-color: rgba(255, 178, 107, 0.34); background: rgba(18, 33, 49, 0.74); } html[data-theme="dark"] .home-offer-support-row-report { border-color: rgba(255, 178, 107, 0.34); background: linear-gradient(180deg, rgba(24, 42, 63, 0.94) 0%, rgba(34, 29, 26, 0.94) 100%); } html[data-theme="dark"] .home-offer-support-label { background: rgba(255, 178, 107, 0.12); color: #ffcf99; } html[data-theme="dark"] .home-offer-button-secondary { border-color: rgba(112, 211, 232, 0.26); background: linear-gradient(180deg, rgba(24, 42, 63, 0.98) 0%, rgba(21, 40, 59, 0.98) 100%); color: #e7f0f8; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22); } html[data-theme="dark"] .home-offer-button-secondary:hover { background: linear-gradient(180deg, rgba(28, 48, 70, 0.98) 0%, rgba(24, 42, 63, 0.98) 100%); border-color: rgba(255, 178, 107, 0.34); } html[data-theme="dark"] .home-offer-button-tertiary { background: linear-gradient(180deg, #c05621 0%, #9c4221 100%); box-shadow: 0 18px 34px rgba(192, 86, 33, 0.24); } html[data-theme="dark"] .home-offer-button-tertiary:hover, html[data-theme="dark"] .home-offer-button-tertiary:focus-visible { background: linear-gradient(180deg, #a84320 0%, #7c3419 100%); } html[data-theme="dark"] .home-value-card { border-color: rgba(112, 211, 232, 0.28); } html[data-theme="dark"] .home-value-card-face { border-color: rgba(112, 211, 232, 0.28); } html[data-theme="dark"] .home-value-card-front { background: radial-gradient(circle at top right, rgba(112, 211, 232, 0.14), transparent 34%), linear-gradient(160deg, rgba(21, 40, 59, 0.98) 0%, rgba(12, 24, 37, 0.98) 100%); } html[data-theme="dark"] .home-value-card-back { background: radial-gradient(circle at top left, rgba(255, 178, 107, 0.16), transparent 36%), linear-gradient(160deg, rgba(35, 31, 24, 0.98) 0%, rgba(19, 39, 60, 0.98) 100%); } html[data-theme="dark"] .home-value-card-back p { color: #f4f7fb; } html[data-theme="dark"] .home-benefit-item { border-color: rgba(74, 222, 128, 0.24); background: linear-gradient(180deg, rgba(19, 39, 60, 0.95) 0%, rgba(14, 29, 45, 0.98) 100%); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24); } html[data-theme="dark"] .home-benefits-card::before { background: linear-gradient(180deg, #34d17d 0%, #178c4a 100%); } html[data-theme="dark"] .doc-audit-cta { border-color: rgba(255, 178, 107, 0.3); background: radial-gradient(circle at top right, rgba(255, 178, 107, 0.12), transparent 34%), linear-gradient(180deg, rgba(35, 31, 24, 0.98) 0%, rgba(19, 39, 60, 0.98) 100%); box-shadow: 0 18px 34px rgba(0, 0, 0, 0.24); } html[data-theme="dark"] .doc-audit-cta-eyebrow { color: #ffcf99; } html[data-theme="dark"] .doc-audit-cta-copy p { color: #d8e3ee; } @media (max-width: 860px) { .home-hero-grid { grid-template-columns: 1fr; } .home-hero-offers { grid-template-columns: 1fr; } .home-offer-card-primary { transform: none; } .home-benefits-grid { grid-template-columns: 1fr; } .doc-audit-cta-body { grid-template-columns: 1fr; } .doc-audit-cta-action .button-link { width: 100%; } .home-hero-copy::after { display: none; } .home-value-card { min-height: auto; perspective: none; } .home-value-card-inner { min-height: auto; transform: none !important; } .home-value-card-face { position: static; min-height: 0; } .home-value-card-front { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: none; } .home-value-card-back { transform: none; border-top-left-radius: 0; border-top-right-radius: 0; } } @media (prefers-reduced-motion: reduce) { .home-offer-card-tertiary::after { animation: none; } .home-value-card-inner { transition: none; } } html[data-theme="dark"] .asset-download-panel { border-color: rgba(255, 178, 107, 0.42); background: radial-gradient(circle at top right, rgba(255, 178, 107, 0.16), transparent 36%), linear-gradient(160deg, rgba(35, 31, 24, 0.98) 0%, rgba(19, 39, 60, 0.98) 100%); } html[data-theme="dark"] .asset-download-kicker { color: #102132; } html[data-theme="dark"] .asset-download-label, html[data-theme="dark"] .asset-download-spotlight-label { color: #ffcf99; } html[data-theme="dark"] .asset-download-copy, html[data-theme="dark"] .asset-download-form-label, html[data-theme="dark"] .asset-download-spotlight-text { color: #f4f7fb; } html[data-theme="dark"] .sample-report-customizer-label { color: #f4f7fb; } html[data-theme="dark"] .roadmap-card { border-color: rgba(112, 211, 232, 0.18); background: linear-gradient(180deg, rgba(21, 40, 59, 0.98) 0%, rgba(12, 24, 37, 0.98) 100%); } html[data-theme="dark"] .roadmap-card-primary { border-color: rgba(112, 211, 232, 0.32); background: radial-gradient(circle at top right, rgba(112, 211, 232, 0.12), transparent 36%), linear-gradient(180deg, rgba(18, 39, 53, 0.98) 0%, rgba(11, 28, 40, 0.98) 100%); } html[data-theme="dark"] .roadmap-bullet-list li { border-color: rgba(112, 211, 232, 0.18); background: linear-gradient(180deg, rgba(21, 40, 59, 0.98) 0%, rgba(12, 24, 37, 0.98) 100%); } html[data-theme="dark"] .asset-download-spotlight { border-color: rgba(255, 178, 107, 0.42); background: linear-gradient(180deg, rgba(255, 178, 107, 0.18) 0%, rgba(255, 178, 107, 0.05) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } html[data-theme="dark"] .asset-download-email { border-color: rgba(255, 178, 107, 0.52); background: linear-gradient(180deg, rgba(24, 33, 44, 0.98) 0%, rgba(17, 25, 36, 0.98) 100%); box-shadow: 0 0 0 8px rgba(255, 178, 107, 0.12), 0 16px 28px rgba(0, 0, 0, 0.24); } html[data-theme="dark"] .asset-download-input-cue { color: #ffcf99; } @media (max-width: 860px) { .asset-download-panel { transform: none; } .sample-report-customizer-grid { grid-template-columns: 1fr; } .roadmap-grid { grid-template-columns: 1fr; } } } .sales-audit-cta { max-width: 700px; margin-bottom: 16px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--border) 72%, #31537a 28%); border-radius: 14px; background: linear-gradient(180deg, var(--card) 0%, var(--column-panel-bg) 100%); } .sales-audit-cta-label { margin: 0 0 6px; color: var(--accent); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .sales-audit-cta-copy { margin: 0; color: var(--muted); } .sales-audit-cta-actions { margin: 12px 0 0; } .sales-emphasis { font-weight: 800; color: var(--warning-accent); background: var(--warning-accent-bg); padding: 0.02em 0.28em; border-radius: 0.28em; } .sales-product-frame, .sales-preview-frame { border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(180deg, var(--card) 0%, var(--column-panel-bg) 100%); box-shadow: 0 18px 36px rgba(15, 35, 60, 0.12); overflow: hidden; } .sales-product-header, .sales-preview-toolbar { height: 42px; border-bottom: 1px solid var(--border); background: rgba(11, 114, 133, 0.06); } .sales-product-header { display: flex; align-items: center; gap: 8px; padding: 0 14px; } .sales-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(11, 114, 133, 0.35); } .sales-product-body, .sales-preview-grid { padding: 16px; } .sales-kpi-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; } .sales-kpi-card, .sales-preview-panel, .sales-step-card, .sales-mini-card, .sales-testimonial-card { border: 1px solid var(--border); border-radius: 12px; background: var(--card); } .sales-kpi-card { padding: 14px; } .sales-kpi-label, .sales-preview-label, .sales-featured-meta, .sales-testimonial-meta { color: var(--muted); } .sales-kpi-label, .sales-preview-label { margin: 0 0 6px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .sales-kpi-value { margin: 0; font-size: 1.7rem; font-weight: 800; color: var(--accent); } .sales-chart-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 1fr); gap: 12px; } .sales-chart-bars, .sales-alert-list { border: 1px solid var(--border); border-radius: 12px; background: var(--card); } .sales-chart-bars { min-height: 180px; display: flex; align-items: flex-end; gap: 10px; padding: 18px; } .sales-chart-bars span { flex: 1 1 0; border-radius: 999px 999px 4px 4px; background: linear-gradient(180deg, var(--accent) 0%, rgba(11, 114, 133, 0.22) 100%); } .sales-alert-list { padding: 16px; } .sales-alert-list p { margin: 0; } .sales-alert-list p + p { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .sales-section-intro, .sales-final-cta { text-align: center; } .sales-rotating-statement { min-height: 2.6em; transition: opacity 320ms ease-in-out, transform 320ms ease-in-out; will-change: opacity, transform; } .sales-rotating-statement.is-swapping { opacity: 0.08; transform: translateY(6px); } .sales-problem-card, .sales-step-card, .sales-mini-card, .sales-testimonial-card { padding: 18px; } .sales-step-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .sales-step-icon { width: 38px; height: 38px; border-radius: 999px; display: inline-grid; place-items: center; margin-bottom: 12px; background: rgba(11, 114, 133, 0.1); color: var(--accent); font-weight: 800; } .sales-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .sales-preview-panel { padding: 14px; } .sales-preview-panel-wide { grid-column: 1 / -1; } .sales-preview-panel ul { margin: 10px 0 0 18px; padding: 0; } .sales-preview-sparkline { min-height: 78px; display: flex; align-items: end; gap: 8px; } .sales-preview-sparkline span { flex: 1 1 0; height: 100%; border-radius: 999px; background: linear-gradient(180deg, rgba(11, 114, 133, 0.9) 0%, rgba(11, 114, 133, 0.18) 100%); } .sales-preview-sparkline span:nth-child(1) { height: 34%; } .sales-preview-sparkline span:nth-child(2) { height: 62%; } .sales-preview-sparkline span:nth-child(3) { height: 48%; } .sales-preview-sparkline span:nth-child(4) { height: 81%; } .sales-preview-sparkline span:nth-child(5) { height: 56%; } .sales-numbered-steps { margin: 14px 0 0 20px; padding: 0; } .sales-numbered-steps li + li { margin-top: 12px; } .sales-featured-testimonial { position: relative; z-index: 0; min-width: 0; align-self: stretch; padding: 22px; border: 1px solid rgba(11, 114, 133, 0.26); border-radius: 16px; background: radial-gradient(circle at top right, rgba(11, 114, 133, 0.12), transparent 38%), linear-gradient(180deg, var(--card) 0%, var(--column-panel-bg) 100%); overflow-wrap: anywhere; } .sales-featured-quote { margin: 0 0 18px; font-size: 1.08rem; line-height: 1.7; overflow-wrap: anywhere; } .sales-featured-author, .sales-testimonial-author { margin: 0; font-weight: 700; } .sales-featured-meta, .sales-testimonial-meta { margin: 4px 0 0; font-size: 0.9rem; } .sales-testimonial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sales-testimonial-rating { margin: 0 0 12px; color: var(--accent); letter-spacing: 0.12em; } .sales-final-cta .section-intro { margin-left: auto; margin-right: auto; } .sales-hero-c { position: relative; overflow: hidden; border: 1px solid rgba(11, 114, 133, 0.16); background: radial-gradient(circle at top left, rgba(191, 77, 37, 0.12), transparent 26%), radial-gradient(circle at top right, rgba(11, 114, 133, 0.18), transparent 34%), linear-gradient(135deg, var(--card) 0%, var(--column-panel-bg) 100%); } .sales-hero-c::after { content: ""; position: absolute; inset: auto -80px -120px auto; width: 280px; height: 280px; border-radius: 999px; background: radial-gradient(circle, rgba(11, 114, 133, 0.12) 0%, transparent 68%); pointer-events: none; } .sales-hero-layout-c { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; } .sales-product-frame-c, .sales-preview-frame-c, .sales-featured-testimonial-c, .sales-final-cta-c { box-shadow: 0 24px 48px rgba(15, 35, 60, 0.18); } .sales-product-frame-c { position: relative; border-color: rgba(11, 114, 133, 0.22); border-radius: 18px; } .sales-hero-copy-c .hero-subtitle, .sales-hero-copy-c .section-intro, .sales-preview-copy-c { max-width: none; } .sales-hero-copy-c h1 { margin-bottom: 10px; line-height: 1.04; text-wrap: balance; } .sales-hero-copy-c .hero-subtitle { margin-bottom: 10px; } .sales-hero-copy-c .section-intro { margin-bottom: 0; } .sales-hero-actions-c { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 14px; } .sales-live-badge { margin: 0 0 0 auto; padding: 6px 10px; border-radius: 999px; background: rgba(191, 77, 37, 0.12); color: var(--warning-accent); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .sales-proof-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; } .sales-proof-strip-c { grid-template-columns: 1fr; gap: 10px; margin-top: 14px; } .sales-proof-card { position: relative; padding: 14px 16px; border: 1px solid rgba(11, 114, 133, 0.18); border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(236, 247, 249, 0.92) 100%); box-shadow: 0 16px 30px rgba(15, 35, 60, 0.10); backdrop-filter: blur(8px); overflow: hidden; } .sales-proof-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(180deg, #0b7285 0%, #34a0b6 100%); } .sales-proof-card-accent { border-color: rgba(191, 77, 37, 0.34); background: radial-gradient(circle at top right, rgba(191, 77, 37, 0.16), transparent 42%), linear-gradient(180deg, rgba(255, 244, 238, 0.98) 0%, rgba(255, 255, 255, 0.92) 100%); box-shadow: 0 20px 36px rgba(191, 77, 37, 0.16); } .sales-proof-card-accent::before { background: linear-gradient(180deg, #c05621 0%, #ef8f5b 100%); } .sales-proof-label { margin: 0 0 4px; font-size: 0.76rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .sales-proof-value { margin: 0; font-size: 1.35rem; font-weight: 800; color: var(--text); line-height: 1.15; } .sales-proof-text { margin: 8px 0 0; color: var(--muted); max-width: 24ch; } .sales-product-body-c { padding: 14px; } .sales-c-frame-label { margin: 0 0 10px; color: var(--accent); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .sales-kpi-row-c { grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; } .sales-kpi-row-c .sales-kpi-card { border-radius: 14px; } .sales-kpi-row-c .sales-kpi-card-primary { order: -1; border-color: rgba(191, 77, 37, 0.26); } .sales-kpi-row-c .sales-kpi-card-primary .sales-kpi-value { font-size: 2rem; } .sales-kpi-row-c .sales-kpi-card:not(.sales-kpi-card-primary) { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; } .sales-kpi-row-c .sales-kpi-card:not(.sales-kpi-card-primary) .sales-kpi-label, .sales-kpi-row-c .sales-kpi-card:not(.sales-kpi-card-primary) .sales-kpi-value { margin: 0; } .sales-kpi-row-c .sales-kpi-card:not(.sales-kpi-card-primary) .sales-kpi-value { font-size: 1rem; } .sales-chart-panel-c { grid-template-columns: 1fr; gap: 8px; } .sales-chart-bars-c { display: none; } .sales-alert-list-c { display: flex; flex-direction: column; gap: 8px; padding: 0; border: none; background: transparent; } .sales-alert-list-c p, .sales-alert-list-c p + p { margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); } .sales-alert-list-c p + p { border-top: 1px solid var(--border); } html[data-theme="dark"] .sales-proof-card { border-color: rgba(112, 211, 232, 0.18); background: linear-gradient(180deg, rgba(20, 34, 52, 0.98) 0%, rgba(16, 33, 50, 0.96) 100%); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28); } html[data-theme="dark"] .sales-proof-card::before { background: linear-gradient(180deg, #70d3e8 0%, #1fa8be 100%); } html[data-theme="dark"] .sales-proof-card-accent { border-color: rgba(255, 178, 107, 0.28); background: radial-gradient(circle at top right, rgba(255, 178, 107, 0.14), transparent 42%), linear-gradient(180deg, rgba(42, 27, 18, 0.96) 0%, rgba(20, 34, 52, 0.96) 100%); box-shadow: 0 20px 36px rgba(0, 0, 0, 0.34); } html[data-theme="dark"] .sales-proof-card-accent::before { background: linear-gradient(180deg, #ffb26b 0%, #c05621 100%); } html[data-theme="dark"] .sales-proof-label { color: #b7cbde; } html[data-theme="dark"] .sales-proof-value { color: #f4f7fb; } html[data-theme="dark"] .sales-proof-text { color: #d8e3ee; } .sales-kpi-card-primary { border-color: rgba(191, 77, 37, 0.24); background: linear-gradient(180deg, rgba(191, 77, 37, 0.08) 0%, var(--card) 100%); transform: translateY(-2px); } .sales-chart-bars-c span:nth-child(4) { background: linear-gradient(180deg, rgba(191, 77, 37, 0.92) 0%, rgba(191, 77, 37, 0.22) 100%); } .sales-alert-list-c strong { color: var(--text); } .sales-section-intro-c { border: 1px solid rgba(11, 114, 133, 0.16); background: radial-gradient(circle at center, rgba(191, 77, 37, 0.10), transparent 40%), radial-gradient(circle at center, rgba(11, 114, 133, 0.10), transparent 62%), linear-gradient(180deg, rgba(11, 114, 133, 0.04), rgba(11, 114, 133, 0.01)); } .sales-rotating-statement-c { max-width: 14ch; margin-left: auto; margin-right: auto; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.08; color: #0f3d50; text-wrap: balance; } html[data-theme="dark"] .sales-rotating-statement-c { color: #f4f7fb; } .sales-problem-card-c { position: relative; border-color: rgba(11, 114, 133, 0.16); border-radius: 16px; background: linear-gradient(180deg, rgba(11, 114, 133, 0.05) 0%, var(--card) 100%); box-shadow: 0 16px 28px rgba(15, 35, 60, 0.08); overflow: hidden; } .sales-problem-card-c::before { content: "Pain"; display: inline-flex; align-items: center; justify-content: center; min-width: 64px; height: 28px; margin-bottom: 14px; padding: 0 10px; border-radius: 999px; background: rgba(191, 77, 37, 0.12); color: var(--warning-accent); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; } .sales-problem-card-c::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #c05621 0%, #0b7285 100%); } .sales-problem-card-c h3 { color: #102a43; } .sales-problem-card-c:nth-child(2) { transform: translateY(-8px); border-color: rgba(191, 77, 37, 0.22); box-shadow: 0 22px 36px rgba(191, 77, 37, 0.14); } .sales-problem-card-c:nth-child(2)::before { background: rgba(191, 77, 37, 0.16); } .sales-process-c { border: 1px solid rgba(11, 114, 133, 0.14); background: linear-gradient(180deg, rgba(11, 114, 133, 0.03) 0%, transparent 100%); } .sales-preview-c { background: radial-gradient(circle at top right, rgba(191, 77, 37, 0.08), transparent 28%), linear-gradient(180deg, rgba(11, 114, 133, 0.02), transparent); } .sales-preview-layout-c { grid-template-columns: 1fr; gap: 18px; } .sales-how-grid-c { align-items: stretch; } .sales-featured-testimonial-c { border-color: rgba(191, 77, 37, 0.22); background: radial-gradient(circle at top right, rgba(191, 77, 37, 0.12), transparent 34%), linear-gradient(180deg, var(--card) 0%, var(--column-panel-bg) 100%); } .sales-final-cta-c { border: 1px solid rgba(11, 114, 133, 0.18); background: radial-gradient(circle at top center, rgba(11, 114, 133, 0.1), transparent 42%), linear-gradient(180deg, rgba(11, 114, 133, 0.06), rgba(255, 255, 255, 0.86)); } @media (min-width: 900px) { .sales-hero-layout-c { grid-template-columns: minmax(0, 1.06fr) minmax(360px, 0.94fr); gap: 28px; align-items: center; } .sales-hero-actions-c { display: flex; flex-wrap: wrap; align-items: center; } .sales-proof-strip-c { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; } .sales-product-body-c { padding: 16px; } .sales-c-frame-label { display: none; } .sales-kpi-row-c { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; } .sales-kpi-row-c .sales-kpi-card { display: block; } .sales-kpi-row-c .sales-kpi-card-primary { order: 0; } .sales-kpi-row-c .sales-kpi-card-primary .sales-kpi-value { font-size: 1.7rem; } .sales-kpi-row-c .sales-kpi-card:not(.sales-kpi-card-primary) .sales-kpi-value { font-size: 1.7rem; } .sales-chart-panel-c { grid-template-columns: minmax(0, 1fr) minmax(220px, 1fr); gap: 12px; } .sales-chart-bars-c { display: flex; } .sales-alert-list-c { display: block; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); } .sales-alert-list-c p, .sales-alert-list-c p + p { padding: 0; border: none; border-radius: 0; background: transparent; } .sales-alert-list-c p + p { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .sales-preview-layout-c { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 24px; align-items: center; } } @media (max-width: 900px) { .sales-proof-strip { grid-template-columns: 1fr; } .sales-problem-card-c:nth-child(2) { transform: none; } } @media (max-width: 640px) { .sales-hero, .sales-process, .sales-preview, .sales-testimonials, .sales-final-cta, .sales-section-intro { padding: 18px; } .sales-hero-layout, .sales-preview-layout, .sales-how-grid { gap: 18px; } .sales-hero-copy { max-width: 100%; } .sales-hero-copy h1, .sales-preview-copy h2, .sales-process h2, .sales-how-grid h2, .sales-testimonials h2, .sales-final-cta h2, .sales-section-intro h2 { font-size: clamp(1.8rem, 7vw, 2.35rem); line-height: 1.1; } .hero-actions { flex-direction: column; align-items: stretch; } .sales-hero-copy .hero-subtitle { margin-bottom: 12px; } .sales-hero-copy .section-intro { display: none; } .hero-actions .button-link { width: 100%; box-sizing: border-box; text-align: center; } .sales-product-header, .sales-preview-toolbar { height: 38px; padding-left: 12px; padding-right: 12px; } .sales-product-frame { box-shadow: 0 12px 24px rgba(15, 35, 60, 0.10); } .sales-product-body, .sales-preview-grid { padding: 12px; } .sales-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sales-kpi-row .sales-kpi-card:first-child { grid-column: 1 / -1; } .sales-kpi-row .sales-kpi-card:first-child .sales-kpi-value { font-size: 1.8rem; } .sales-kpi-card, .sales-preview-panel, .sales-step-card, .sales-mini-card, .sales-testimonial-card, .sales-problem-card { padding: 15px; } .sales-kpi-value { font-size: 1.45rem; } .sales-chart-bars { min-height: 140px; gap: 8px; padding: 14px; } .sales-alert-list { padding: 14px; font-size: 0.95rem; } .sales-alert-list p { line-height: 1.4; } .sales-alert-list p:nth-child(n + 3) { display: none; } .sales-rotating-statement { min-height: 3.1em; } .sales-preview-panel ul, .sales-numbered-steps { margin-left: 16px; } .sales-featured-testimonial { padding: 18px; } .sales-featured-quote { font-size: 1rem; line-height: 1.6; } .sales-testimonial-rating { letter-spacing: 0.08em; } .sales-live-badge { padding: 5px 8px; font-size: 0.72rem; } .sales-proof-card { padding: 14px 14px 14px 16px; } .sales-proof-value { font-size: 1.2rem; } .sales-proof-text { max-width: none; } } @media (max-width: 480px) { .container { margin: 16px auto; padding: 0 12px; } .card { border-radius: 10px; padding: 14px; margin-bottom: 14px; } .public-hero h1 { margin-bottom: 8px; } .hero-subtitle, .section-intro, .sales-alert-list, .sales-mini-card p, .sales-step-card p, .sales-problem-card p, .sales-testimonial-card p, .sales-proof-text { font-size: 0.98rem; line-height: 1.55; } .sales-hero, .sales-process, .sales-preview, .sales-testimonials, .sales-final-cta, .sales-section-intro { padding: 16px 14px; } .sales-product-frame, .sales-preview-frame, .sales-featured-testimonial { border-radius: 14px; } .sales-product-frame { box-shadow: none; } .sales-product-header { display: none; } .sales-product-body, .sales-preview-grid { padding: 10px; } .sales-kpi-row { grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; } .sales-kpi-row .sales-kpi-card:first-child { grid-column: auto; border-color: rgba(11, 114, 133, 0.28); background: linear-gradient(180deg, rgba(11, 114, 133, 0.08) 0%, var(--card) 100%); } .sales-kpi-row .sales-kpi-card:first-child .sales-kpi-label { font-size: 0.74rem; } .sales-kpi-row .sales-kpi-card:first-child .sales-kpi-value { font-size: 1.4rem; } .sales-kpi-row .sales-kpi-card:not(:first-child) { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; } .sales-kpi-row .sales-kpi-card:not(:first-child) .sales-kpi-label { margin: 0; } .sales-kpi-row .sales-kpi-card:not(:first-child) .sales-kpi-value { font-size: 1rem; } .sales-kpi-card, .sales-preview-panel, .sales-step-card, .sales-mini-card, .sales-testimonial-card, .sales-problem-card, .sales-proof-card { border-radius: 10px; padding: 14px; } .sales-kpi-label, .sales-preview-label, .sales-proof-label { font-size: 0.72rem; } .sales-kpi-value, .sales-proof-value { font-size: 1.12rem; } .sales-chart-bars { min-height: 120px; padding: 12px; } .sales-chart-panel { grid-template-columns: 1fr; gap: 8px; } .sales-chart-bars span, .sales-preview-sparkline span { border-radius: 999px 999px 3px 3px; } .sales-chart-bars { min-height: 96px; padding: 10px; } .sales-alert-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; border: none; background: transparent; font-size: 0.84rem; } .sales-alert-list p { margin: 0; padding: 7px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sales-alert-list p + p { margin-top: 0; padding-top: 7px; border-top: none; } .sales-rotating-statement, .sales-rotating-statement-c { max-width: 100%; min-height: 3.2em; font-size: clamp(1.7rem, 8vw, 2.15rem); line-height: 1.08; } .sales-step-icon { width: 34px; height: 34px; margin-bottom: 10px; } .sales-numbered-steps, .sales-preview-panel ul { margin-left: 14px; } .sales-featured-testimonial { padding: 16px; } .sales-featured-quote { font-size: 0.98rem; line-height: 1.55; } .sales-testimonial-rating { margin-bottom: 10px; font-size: 0.95rem; } .sales-live-badge { padding: 4px 7px; font-size: 0.68rem; } .sales-dot:nth-child(3) { display: none; } .topbar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 360px) { .container { padding: 0 10px; } .topbar { padding: 10px; } .topbar nav a, .theme-toggle { font-size: 0.8rem; } .sales-hero, .sales-process, .sales-preview, .sales-testimonials, .sales-final-cta, .sales-section-intro { padding: 14px 12px; } .sales-rotating-statement, .sales-rotating-statement-c { font-size: clamp(1.55rem, 8.5vw, 1.95rem); } .sales-alert-list { font-size: 0.8rem; } .sales-alert-list p { width: 100%; } } @media (max-width: 640px) { .sales-hero-copy-c .section-intro { display: block; font-size: 0.98rem; line-height: 1.5; } .sales-alert-list-c p:nth-child(n + 3) { display: block; } } @media (max-width: 480px) { .sales-product-frame-c { border-radius: 16px; } .sales-product-body-c { padding: 12px; } .sales-c-frame-label { margin-bottom: 8px; } .sales-alert-list-c { display: flex; flex-direction: column; gap: 8px; } .sales-alert-list-c p, .sales-alert-list-c p + p, .sales-alert-list-c p:nth-child(n + 3) { display: block; padding: 9px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); } } .pricing-plan-standard { border-color: var(--accent); } .plan-label { margin: 0 0 6px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); } .plan-price { margin: 0; font-size: 3.3rem; font-weight: 900; line-height: 0.95; color: #9c4221; } .plan-price span, .plan-price-regular span { font-size: 0.95rem; font-weight: 700; color: var(--muted); margin-left: 4px; } .plan-subtitle { color: var(--muted); } .plan-points { margin: 0 0 14px 18px; padding: 0; } .plan-points li + li { margin-top: 5px; } .plan-footnote { margin: 0 0 10px; color: var(--muted); font-size: 0.9rem; } .pricing-comparison-table th:nth-child(2), .pricing-comparison-table th:nth-child(3), .pricing-comparison-table td:nth-child(2), .pricing-comparison-table td:nth-child(3) { text-align: center; } .pricing-comparison-table tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--column-panel-bg) 88%, #ffffff 12%); } .pricing-fit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .pricing-fit-card { padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(180deg, var(--card) 0%, var(--column-panel-bg) 100%); } .pricing-fit-card h3 { margin-top: 0; } .pricing-availability { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; font-size: 1.05rem; font-weight: 900; } .pricing-availability-included { background: rgba(22, 163, 74, 0.12); color: #15803d; box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.18); } .pricing-availability-unavailable { background: rgba(148, 163, 184, 0.14); color: #64748b; box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.2); } .feature-tier-hero { border-color: rgba(11, 114, 133, 0.24); background: radial-gradient(circle at top right, rgba(11, 114, 133, 0.12), transparent 32%), linear-gradient(135deg, var(--card) 0%, var(--column-panel-bg) 100%); } .feature-tier-hero-grid, .feature-tier-card-grid, .feature-tier-detail-list { display: grid; gap: 14px; } .feature-tier-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; } .feature-tier-summary-card, .feature-tier-detail-card, .feature-tier-bridge { border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(180deg, var(--card) 0%, var(--column-panel-bg) 100%); } .feature-tier-summary-card { padding: 18px; } .feature-tier-summary-card h2, .feature-tier-detail-card h3 { margin-top: 0; margin-bottom: 10px; } .feature-tier-summary-card p:last-child, .feature-tier-detail-card p:last-child { margin-bottom: 0; } .feature-tier-summary-card-premium, .feature-tier-section-premium { border-color: rgba(11, 114, 133, 0.28); background: radial-gradient(circle at top right, rgba(11, 114, 133, 0.1), transparent 34%), linear-gradient(180deg, var(--card) 0%, var(--column-panel-bg) 100%); } .feature-tier-section { padding: 20px; } .feature-tier-section-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; } .feature-tier-cta { margin: 0; } .feature-tier-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feature-tier-detail-card { padding: 18px; } .feature-tier-bridge { text-align: center; } .feature-tier-bridge .section-intro { margin-left: auto; margin-right: auto; } html[data-theme="dark"] .plan-price-regular { color: color-mix(in srgb, var(--muted) 78%, #ffcf99 22%); } html[data-theme="dark"] .plan-price-regular::after { box-shadow: 0 2px 10px rgba(255, 178, 107, 0.2); } html[data-theme="dark"] .plan-price { color: #ffcf99; } html[data-theme="dark"] .pricing-plan-premium { border-color: rgba(112, 211, 232, 0.34); background: radial-gradient(circle at top right, rgba(112, 211, 232, 0.12), transparent 36%), linear-gradient(180deg, rgba(21, 40, 59, 0.98) 0%, rgba(12, 24, 37, 0.98) 100%); } html[data-theme="dark"] .pricing-comparison-table tbody tr:nth-child(odd) { background: rgba(19, 39, 60, 0.48); } html[data-theme="dark"] .pricing-fit-card { border-color: rgba(112, 211, 232, 0.18); background: linear-gradient(180deg, rgba(21, 40, 59, 0.98) 0%, rgba(12, 24, 37, 0.98) 100%); } html[data-theme="dark"] .pricing-availability-included { background: rgba(34, 197, 94, 0.16); color: #86efac; box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.24); } html[data-theme="dark"] .pricing-availability-unavailable { background: rgba(100, 116, 139, 0.18); color: #cbd5e1; box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.26); } html[data-theme="dark"] .feature-tier-hero, html[data-theme="dark"] .feature-tier-summary-card, html[data-theme="dark"] .feature-tier-detail-card, html[data-theme="dark"] .feature-tier-bridge { border-color: rgba(112, 211, 232, 0.2); background: linear-gradient(180deg, rgba(21, 40, 59, 0.98) 0%, rgba(12, 24, 37, 0.98) 100%); } html[data-theme="dark"] .feature-tier-summary-card-premium, html[data-theme="dark"] .feature-tier-section-premium { border-color: rgba(112, 211, 232, 0.34); background: radial-gradient(circle at top right, rgba(112, 211, 232, 0.12), transparent 36%), linear-gradient(180deg, rgba(18, 39, 53, 0.98) 0%, rgba(11, 28, 40, 0.98) 100%); } .doc-card h2, .doc-card h3 { margin-top: 0; } .doc-card p:last-child { margin-bottom: 0; } .doc-meta { font-size: 0.86rem; color: var(--muted); margin-bottom: 0; } .doc-intent-label { margin: 0 0 8px; color: var(--accent); font-size: 0.88rem; font-weight: 600; } .breadcrumbs { display: flex; gap: 8px; align-items: center; color: var(--muted); margin-bottom: 12px; font-size: 0.92rem; } .doc-page h1 { margin-top: 4px; } .doc-page { overflow-wrap: anywhere; } .doc-intro p { margin: 0 0 10px; } .doc-intro p:last-child { margin-bottom: 0; } .doc-hero-grid { display: grid; grid-template-columns: minmax(0, 760px) 280px; gap: 16px; align-items: stretch; justify-content: start; margin: 12px 0 14px; } .doc-jump-panel { box-sizing: border-box; display: flex; flex-direction: column; padding: 12px 14px; height: 280px; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(180deg, var(--card) 0%, var(--column-panel-bg) 100%); } .doc-jump-links { display: flex; flex-direction: column; gap: 12px; margin: 0; min-height: 100%; } .doc-jump-links-label { display: block; color: var(--muted); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .doc-jump-links-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; } .doc-jump-links-list a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--border) 86%, var(--accent) 14%); border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, var(--column-panel-bg) 8%) 0%, color-mix(in srgb, var(--column-panel-bg) 92%, var(--card) 8%) 100%); color: color-mix(in srgb, var(--text) 92%, #dbeafe 8%); font-weight: 700; text-decoration: none; line-height: 1.2; white-space: normal; word-break: normal; box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); } .doc-jump-links-list a:visited { color: var(--text); } .doc-jump-links-list a:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 48%, var(--border) 52%); background: linear-gradient(180deg, color-mix(in srgb, var(--column-panel-bg) 88%, var(--accent) 12%) 0%, color-mix(in srgb, var(--card) 82%, var(--accent) 18%) 100%); } .doc-jump-links-list a::after { content: "›"; margin-left: 10px; color: var(--accent); font-size: 1rem; line-height: 1; flex: 0 0 auto; } .doc-audit-cta { margin: 18px 0 16px; padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--border) 66%, #d97706 34%); border-radius: 16px; background: radial-gradient(circle at top right, rgba(245, 158, 11, 0.12), transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--card) 88%, #fff7ed 12%) 0%, color-mix(in srgb, var(--column-panel-bg) 82%, #fef3c7 18%) 100%); box-shadow: 0 16px 30px rgba(15, 35, 60, 0.08); } .doc-audit-cta-hero { box-sizing: border-box; margin: 0; width: 280px; aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: space-between; } .doc-audit-cta-eyebrow { margin: 0 0 10px; color: #9c4221; font-size: 0.82rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .doc-audit-cta-body { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; height: 100%; } .doc-audit-cta-copy h2 { margin: 0 0 8px; font-size: 1.18rem; } .doc-audit-cta-copy p { margin: 0; font-size: 0.94rem; color: color-mix(in srgb, var(--text) 88%, #243b53 12%); } .doc-sample-report-cta .doc-audit-cta-copy p { max-width: 720px; } .doc-audit-cta-action { margin: 0; } .doc-audit-cta-action .button-link { position: relative; isolation: isolate; width: 100%; min-width: 0; min-height: 96px; font-weight: 800; text-align: center; overflow: visible; border-radius: 16px; } .doc-sample-report-cta .doc-audit-cta-action .button-link { min-height: 72px; animation: doc-sample-button-pulse 2.2s ease-in-out infinite; } .doc-audit-cta-action .button-link::before { content: ""; position: absolute; inset: -4px; border-radius: 20px; padding: 1.5px; background: conic-gradient( from 0deg, rgba(245, 158, 11, 0.08) 0deg, rgba(245, 158, 11, 0.45) 70deg, rgba(255, 255, 255, 0.12) 130deg, rgba(245, 158, 11, 0.12) 210deg, rgba(245, 158, 11, 0.55) 290deg, rgba(245, 158, 11, 0.08) 360deg ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; opacity: 0.95; animation: doc-audit-button-trace 4.8s linear infinite; } .doc-sample-report-cta .doc-audit-cta-action .button-link::before { inset: 0; border-radius: 16px; padding: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 100%); -webkit-mask: none; mask: none; opacity: 0.9; animation: none; } .doc-audit-cta-action .button-link::after { content: ""; position: absolute; inset: -7px; border-radius: 23px; background: radial-gradient(circle, rgba(245, 158, 11, 0.22) 0%, rgba(245, 158, 11, 0) 68%); opacity: 0; transform: scale(0.96); z-index: -1; pointer-events: none; animation: doc-audit-button-glow 4.8s ease-in-out infinite; } .doc-sample-report-cta .doc-audit-cta-action .button-link::after { inset: -14px; border-radius: 28px; background: radial-gradient(circle, rgba(245, 158, 11, 0.28) 0%, rgba(245, 158, 11, 0) 74%); animation: doc-sample-button-glow 2.2s ease-in-out infinite; } @keyframes doc-audit-button-trace { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes doc-audit-button-glow { 0%, 100% { opacity: 0.16; transform: scale(0.96); } 50% { opacity: 0.32; transform: scale(1); } } @keyframes doc-sample-button-pulse { 0%, 100% { transform: translateY(0); box-shadow: 0 12px 24px rgba(156, 66, 33, 0.18); } 50% { transform: translateY(-3px) scale(1.02); box-shadow: 0 24px 38px rgba(156, 66, 33, 0.3); } } @keyframes doc-sample-button-glow { 0%, 100% { opacity: 0.16; transform: scale(0.96); } 50% { opacity: 0.38; transform: scale(1.08); } } @media (prefers-reduced-motion: reduce) { .doc-audit-cta-action .button-link::before, .doc-audit-cta-action .button-link::after { animation: none; } .doc-audit-cta-action .button-link::before { opacity: 0.7; } .doc-audit-cta-action .button-link::after { opacity: 0.14; transform: none; } .doc-sample-report-cta .doc-audit-cta-action .button-link, .doc-sample-report-cta .doc-audit-cta-action .button-link::after { animation: none; } } .doc-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 10px; } .doc-summary-card { padding: 16px; border-radius: 8px; background: var(--column-panel-bg); border: 1px solid var(--border); } .doc-summary-card h2 { margin-top: 0; font-size: 1rem; } .doc-summary-card ul { margin: 0; padding-left: 18px; } .doc-review-note { margin-top: 16px; padding: 12px 14px; border-left: 4px solid var(--accent); background: var(--column-panel-bg); border-radius: 8px; } .doc-toc { display: grid; gap: 8px; } .doc-toc a { width: fit-content; } .docs-topic-section + .docs-topic-section { margin-top: 20px; } .doc-section + .doc-section { margin-top: 14px; } .doc-section { scroll-margin-top: 90px; } .doc-section-body { overflow-wrap: anywhere; } .doc-section-body p { margin: 0 0 10px; } .doc-section-body p:last-child { margin-bottom: 0; } .doc-section-body ul, .doc-section-body ol { margin: 0 0 10px 20px; padding: 0; } .doc-section-body li + li { margin-top: 4px; } .doc-visual { margin: 14px 0 0; } .doc-bar-chart { display: grid; gap: 10px; margin-top: 12px; } .doc-bar-row { display: grid; grid-template-columns: minmax(130px, 200px) minmax(120px, 1fr) auto; gap: 10px; align-items: center; } .doc-bar-label, .doc-bar-value { font-size: 0.9rem; } .doc-bar-label { font-weight: 600; } .doc-bar-value { color: var(--muted); } .doc-bar-track { height: 12px; border-radius: 999px; background: var(--column-panel-bg); border: 1px solid var(--border); overflow: hidden; } .doc-bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent) 0%, #f59e0b 100%); } .doc-signal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .doc-signal-card { padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: linear-gradient(180deg, var(--card) 0%, var(--column-panel-bg) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } .doc-signal-card p:last-child { margin-bottom: 0; } .doc-signal-label { margin: 0 0 8px; color: var(--accent); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .doc-signal-value { margin: 0 0 6px; font-size: 1.35rem; font-weight: 800; line-height: 1.1; } .doc-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 12px 0; } .doc-flow-step { min-width: 180px; flex: 1 1 180px; padding: 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--column-panel-bg); } .doc-flow-step strong, .doc-flow-step span { display: block; } .doc-flow-step span { margin-top: 6px; color: var(--muted); } .doc-flow-arrow { display: grid; place-items: center; min-width: 28px; color: var(--accent); font-size: 1.15rem; font-weight: 700; } .doc-citation { margin-top: 10px; font-size: 0.85rem; color: var(--muted); } .doc-mini-note { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--column-panel-bg); border-radius: 8px; color: var(--muted); font-size: 0.92rem; } .summary-box { margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 10px; background: linear-gradient(180deg, var(--card) 0%, var(--column-panel-bg) 100%); } .summary-box p:last-child, .summary-box ul:last-child { margin-bottom: 0; } .caution-box { margin: 12px 0 14px; padding: 14px 16px; border: 1px solid rgba(180, 35, 24, 0.22); border-left: 4px solid var(--error); border-radius: 10px; background: linear-gradient(180deg, rgba(180, 35, 24, 0.06) 0%, rgba(180, 35, 24, 0.02) 100%), linear-gradient(180deg, var(--card) 0%, var(--column-panel-bg) 100%); } .caution-box p:last-child, .caution-box ul:last-child { margin-bottom: 0; } .doc-source-list { display: grid; gap: 8px; } .doc-svg-graphic { width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(180deg, var(--card) 0%, var(--column-panel-bg) 100%); } .doc-svg-graphic rect { fill: var(--column-panel-bg); stroke: var(--border); } .doc-svg-graphic circle:nth-of-type(1) { fill: #2dd4bf; } .doc-svg-graphic circle:nth-of-type(2) { fill: #84cc16; } .doc-svg-graphic circle:nth-of-type(3) { fill: #f59e0b; } .doc-svg-graphic circle:nth-of-type(4) { fill: #ef4444; } .doc-svg-graphic text { fill: var(--text); font-size: 14px; font-family: "Segoe UI", sans-serif; } .doc-code { margin: 10px 0 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; border-left: 4px solid var(--accent); background: var(--column-panel-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); max-width: 100%; box-sizing: border-box; overflow-x: auto; } .doc-code code { display: block; font-family: "Consolas", "Courier New", monospace; font-size: 0.88rem; line-height: 1.4; white-space: pre; min-width: max-content; } .big { font-size: 2rem; margin: 0; } label { display: block; margin: 10px 0 4px; } input, select, button { padding: 8px; border: 1px solid var(--border); border-radius: 6px; } input, select { background: var(--input-bg); color: var(--input-text); } button { background: var(--accent); color: #ffffff; border: none; cursor: pointer; } .theme-toggle { border: 1px solid var(--topbar-chip-border); background: var(--topbar-chip-bg); color: var(--topbar-text); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.01em; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.18); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .topbar { padding: 14px 20px; border-bottom: 1px solid color-mix(in srgb, var(--topbar-chip-border) 55%, #f59e0b 45%); box-shadow: 0 12px 28px rgba(6, 18, 32, 0.22); } .topbar-controls { gap: 14px; } .topbar nav { gap: 10px; } .brand-text-link { font-weight: 800; font-size: 1.08rem; letter-spacing: 0.03em; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18); } .topbar a { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 14px; margin-left: 0; border: 1px solid color-mix(in srgb, var(--topbar-chip-border) 72%, #f59e0b 28%); border-radius: 4px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 100%); color: var(--topbar-link-hover); font-size: 0.92rem; font-weight: 800; letter-spacing: 0.01em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease; } .topbar a:visited { color: var(--topbar-link-hover); } .topbar a:hover { color: #ffffff; background: linear-gradient(180deg, rgba(245, 158, 11, 0.26) 0%, rgba(255, 255, 255, 0.08) 100%); border-color: color-mix(in srgb, var(--topbar-chip-border) 36%, #f59e0b 64%); box-shadow: 0 10px 22px rgba(6, 18, 32, 0.22); transform: translateY(-1px); } .topbar a:focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; } .theme-toggle { background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 100%); font-size: 0.9rem; font-weight: 800; letter-spacing: 0.02em; min-height: 42px; padding: 9px 14px; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } .theme-toggle:hover { background: linear-gradient(180deg, rgba(245, 158, 11, 0.26) 0%, rgba(255, 255, 255, 0.08) 100%); } .filters { display: flex; flex-wrap: wrap; gap: 8px; } table { width: 100%; border-collapse: collapse; } th, td { border-bottom: 1px solid var(--border); text-align: left; padding: 8px; font-size: 0.92rem; } .truncate { max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border: 1px solid var(--btn-secondary-border); } .table-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .table-quick-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .table-quick-filter-label { color: var(--muted); font-size: 0.88rem; font-weight: 600; } .scope-toggle { display: inline-flex; align-items: center; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--column-panel-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .scope-toggle-option { display: inline-flex; align-items: center; justify-content: center; min-width: 88px; padding: 7px 14px; border-radius: 999px; color: var(--muted); font-size: 0.88rem; font-weight: 700; text-decoration: none; transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease; } .scope-toggle-option:visited { color: var(--muted); } .scope-toggle-option:hover { color: var(--text); } .scope-toggle-option.is-active { background: var(--card); color: var(--text); box-shadow: 0 4px 14px rgba(15, 35, 60, 0.12); } html[data-theme="dark"] .scope-toggle-option.is-active { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); } .column-menu { position: relative; } .column-menu-trigger { display: inline-flex; align-items: center; gap: 8px; } .column-menu-status { color: var(--muted); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; } .column-menu-popover { position: absolute; right: 0; top: calc(100% + 8px); width: min(360px, calc(100vw - 28px)); border: 1px solid var(--border); border-radius: 12px; background: var(--column-panel-bg); box-shadow: var(--column-popover-shadow); padding: 12px; z-index: 30; } .column-menu-popover[hidden] { display: none; } .column-menu-help { margin: 0 0 10px; color: var(--muted); font-size: 0.88rem; } .column-menu-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); } .column-picker { display: grid; gap: 8px; max-height: min(280px, 55vh); overflow-y: auto; padding-right: 2px; } .column-picker-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: relative; padding: 4px 0; } .column-picker-item::before, .column-picker-item::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 999px; background: var(--accent); opacity: 0; transition: opacity 120ms ease; } .column-picker-item::before { top: -3px; } .column-picker-item::after { bottom: -3px; } .column-picker-item.is-drop-before::before, .column-picker-item.is-drop-after::after { opacity: 1; } .column-toggle { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 0.88rem; color: var(--column-toggle-text); border: 1px solid var(--border); border-radius: 999px; background: var(--column-toggle-bg); padding: 6px 10px; flex: 1 1 auto; min-width: 0; } .column-drag-handle { position: relative; width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--column-toggle-bg); color: var(--muted); cursor: grab; flex: 0 0 34px; } .column-drag-handle::before { content: ""; position: absolute; inset: 9px 11px; background: radial-gradient(circle, currentColor 1.3px, transparent 1.4px) 0 0 / 6px 6px, radial-gradient(circle, currentColor 1.3px, transparent 1.4px) 6px 0 / 6px 6px; opacity: 0.78; } .column-drag-handle:hover { color: var(--text); } .column-drag-handle:active { cursor: grabbing; } .column-drag-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .column-picker.is-dragging-columns .column-drag-handle { cursor: grabbing; } .column-toggle input { margin: 0; padding: 0; } .column-order-actions { display: inline-flex; gap: 6px; flex: 0 0 auto; } .column-order-button { min-width: 56px; } .column-toggle-required { opacity: 0.8; } .column-toggle-badge { font-size: 0.72rem; background: var(--column-toggle-badge-bg); color: var(--column-toggle-badge-text); border-radius: 999px; padding: 2px 6px; } .table-scroll { overflow-x: auto; } .table-sort-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 0; border: none; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left; } .table-sort-label { min-width: 0; } .table-sort-button:hover { color: var(--link-hover); } .table-sort-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .table-sort-indicator { position: relative; width: 12px; height: 14px; flex: 0 0 12px; color: var(--muted); } .table-sort-indicator::before, .table-sort-indicator::after { content: ""; position: absolute; left: 50%; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform-origin: center; opacity: 0.3; } .table-sort-indicator::before { top: 1px; transform: translateX(-50%) rotate(-135deg); } .table-sort-indicator::after { bottom: 1px; transform: translateX(-50%) rotate(45deg); } .table-sort-button[data-sort-direction="asc"] .table-sort-indicator::before, .table-sort-button[data-sort-direction="desc"] .table-sort-indicator::after { opacity: 1; color: var(--accent); } .table-sort-button[data-sort-direction="asc"] .table-sort-indicator::after, .table-sort-button[data-sort-direction="desc"] .table-sort-indicator::before { opacity: 0.14; } th[aria-sort="ascending"] .table-sort-button, th[aria-sort="descending"] .table-sort-button { color: var(--text); } .device-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .device-actions form { margin: 0; } .defender-drawer-backdrop[hidden], .defender-drawer[hidden] { display: none; } .defender-drawer-backdrop { position: fixed; inset: 0; background: rgba(15, 35, 60, 0.4); z-index: 40; } .defender-drawer { position: fixed; top: 0; right: 0; width: min(420px, calc(100vw - 20px)); height: 100vh; background: var(--card); border-left: 1px solid var(--border); box-shadow: -18px 0 40px rgba(15, 35, 60, 0.22); z-index: 41; display: flex; flex-direction: column; } .defender-drawer-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 20px 16px; border-bottom: 1px solid var(--border); background: radial-gradient(circle at top right, rgba(11, 114, 133, 0.1), transparent 34%), linear-gradient(180deg, var(--card) 0%, var(--column-panel-bg) 100%); } .defender-drawer-eyebrow { margin: 0 0 6px; color: var(--muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .defender-drawer-header h2 { margin: 0 0 6px; font-size: 1.3rem; } .defender-drawer-copy { margin: 0; color: var(--muted); line-height: 1.45; } .defender-drawer-body { padding: 18px 20px 24px; overflow-y: auto; } .defender-detail-row { display: grid; grid-template-columns: minmax(110px, 130px) minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--border); } .defender-detail-row:first-child { padding-top: 0; } .defender-detail-label { color: var(--muted); font-size: 0.84rem; font-weight: 700; letter-spacing: 0.01em; } .defender-detail-value { margin: 0; font-size: 1rem; line-height: 1.5; word-break: break-word; } .col-hidden { display: none; } .error { color: var(--error); } .notice { color: var(--notice); } .field-error { color: var(--error); margin: 6px 0 0; font-size: 0.85rem; } .helper-text { color: var(--muted); font-size: 0.92rem; margin-top: 12px; } .honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } @media (max-width: 900px) { .topbar { flex-wrap: wrap; padding: 10px 14px; } .topbar-controls { width: 100%; justify-content: space-between; } .table-tools { justify-content: stretch; } .table-quick-filters { width: 100%; } .scope-toggle { width: 100%; } .scope-toggle-option { flex: 1 1 0; } .column-menu { width: 100%; } .column-menu-trigger { width: 100%; justify-content: space-between; } .column-menu-popover { right: auto; left: 0; } .column-picker-item { flex-direction: column; align-items: stretch; } .column-drag-handle { align-self: flex-start; } .column-order-actions { justify-content: flex-end; } } @media (max-width: 720px) { .brand-text { font-size: 0.95rem; } .topbar { padding: 10px 12px; } .topbar-controls { flex-direction: column-reverse; align-items: stretch; gap: 10px; } .topbar nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; } .topbar nav a { margin-left: 0; padding: 9px 8px; min-height: 40px; border: 1px solid var(--topbar-chip-border); border-radius: 4px; background: var(--topbar-chip-bg); font-size: 0.86rem; text-align: center; box-sizing: border-box; } .theme-toggle { width: 100%; min-height: 42px; font-size: 0.84rem; padding: 9px 10px; border-radius: 4px; } .login-hero { margin-top: 12px; padding: 12px 8px; } .login-shield-art { font-size: 8px; } .doc-flow { gap: 8px; } .doc-flow-arrow { width: 100%; min-width: 0; transform: rotate(90deg); } .defender-drawer { width: 100vw; } .defender-drawer-header { padding: 16px 16px 14px; } .defender-drawer-body { padding: 16px; } .defender-detail-row { grid-template-columns: 1fr; gap: 4px; } } html[data-theme="dark"] .sales-problem-card-c h3 { color: #f4f7fb; } html[data-theme="dark"] .sales-problem-card-c p { color: #d8e3ee; } .sales-hero-layout-mobile { grid-template-columns: 1fr; gap: 18px; align-items: start; } .sales-hero-copy-mobile .hero-subtitle, .sales-hero-copy-mobile .section-intro, .sales-preview-copy-mobile { max-width: none; } .sales-hero-copy-mobile h1 { line-height: 1.05; text-wrap: balance; } .sales-hero-actions-mobile { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 14px; } .sales-product-frame-mobile { border-radius: 18px; box-shadow: 0 12px 24px rgba(15, 35, 60, 0.10); } .sales-product-frame-mobile .sales-product-header { display: none; } .sales-product-body-mobile { padding: 14px; } .sales-kpi-row-mobile { grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; } .sales-kpi-row-mobile .sales-kpi-card:first-child { border-color: rgba(11, 114, 133, 0.28); background: linear-gradient(180deg, rgba(11, 114, 133, 0.08) 0%, var(--card) 100%); } .sales-kpi-row-mobile .sales-kpi-card:first-child .sales-kpi-value { font-size: 1.8rem; } .sales-kpi-row-mobile .sales-kpi-card:not(:first-child) { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; } .sales-kpi-row-mobile .sales-kpi-card:not(:first-child) .sales-kpi-label, .sales-kpi-row-mobile .sales-kpi-card:not(:first-child) .sales-kpi-value { margin: 0; } .sales-kpi-row-mobile .sales-kpi-card:not(:first-child) .sales-kpi-value { font-size: 1rem; } .sales-chart-panel-mobile { grid-template-columns: 1fr; gap: 8px; } .sales-chart-panel-mobile .sales-chart-bars { display: none; } .sales-chart-panel-mobile .sales-alert-list { display: flex; flex-direction: column; gap: 8px; padding: 0; border: none; background: transparent; } .sales-chart-panel-mobile .sales-alert-list p, .sales-chart-panel-mobile .sales-alert-list p + p { margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); } .sales-chart-panel-mobile .sales-alert-list p + p { border-top: 1px solid var(--border); } .sales-preview-layout-mobile { grid-template-columns: 1fr; gap: 18px; } @media (max-width: 640px) { .sales-hero-copy-mobile .section-intro { display: block; font-size: 0.98rem; line-height: 1.5; } .sales-chart-panel-mobile .sales-alert-list p:nth-child(n + 3) { display: block; } } @media (max-width: 480px) { .sales-product-frame-mobile { border-radius: 16px; box-shadow: none; } .sales-product-body-mobile { padding: 12px; } .sales-chart-panel-mobile .sales-alert-list p, .sales-chart-panel-mobile .sales-alert-list p + p, .sales-chart-panel-mobile .sales-alert-list p:nth-child(n + 3) { display: block; padding: 9px 10px; } } @media (min-width: 900px) { .sales-hero-layout-mobile { grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr); gap: 24px; align-items: center; } .sales-hero-actions-mobile { display: flex; flex-wrap: wrap; align-items: center; } .sales-product-frame-mobile { border-radius: 16px; box-shadow: 0 18px 36px rgba(15, 35, 60, 0.12); } .sales-product-frame-mobile .sales-product-header { display: flex; } .sales-product-body-mobile { padding: 16px; } .sales-kpi-row-mobile { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; } .sales-kpi-row-mobile .sales-kpi-card { display: block; background: var(--card); } .sales-kpi-row-mobile .sales-kpi-card:first-child .sales-kpi-value, .sales-kpi-row-mobile .sales-kpi-card:not(:first-child) .sales-kpi-value { font-size: 1.7rem; } .sales-chart-panel-mobile { grid-template-columns: minmax(0, 1fr) minmax(220px, 1fr); gap: 12px; } .sales-chart-panel-mobile .sales-chart-bars { display: flex; } .sales-chart-panel-mobile .sales-alert-list { display: block; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); } .sales-chart-panel-mobile .sales-alert-list p, .sales-chart-panel-mobile .sales-alert-list p + p { padding: 0; border: none; border-radius: 0; background: transparent; } .sales-chart-panel-mobile .sales-alert-list p + p { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .sales-preview-layout-mobile { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 24px; align-items: center; } }