:root { --background: #f8fafc; --foreground: #0a1628; --card: #ffffff; --card-foreground: #0a1628; --muted-foreground: #5f6d7e; --border: #dce3eb; --navy: #002855; --navy-light: #1a3f6b; --navy-dark: #001a3a; --navy-foreground: #ffffff; --navy-muted: rgba(255,255,255,0.6); --orange: #007aff; --orange-dark: #0062cc; --orange-light: #e6f2ff; --accent-on-dark: #4da3ff; --success: #22c55e; --warning: #eab308; --destructive: #ef4444; --surface: #f8fafc; --secondary: #edf2f7; --header-bg: #05070e; --gradient-hero: radial-gradient(120% 120% at 75% 82%, #02315f 0%, #001a37 35%, #000711 65%, #000000 100%); --gradient-cta: radial-gradient(120% 120% at 50% 115%, #033063 0%, #00152c 45%, #000206 100%); --shadow-card: 0 4px 24px -4px rgba(0,40,85,0.12); --shadow-orange: 0 4px 20px -4px rgba(0,122,255,0.35); --sp-4: 0.25rem; --sp-8: 0.5rem; --sp-12: 0.75rem; --sp-16: 1rem; --sp-20: 1.25rem; --sp-24: 1.5rem; --sp-32: 2rem; --sp-40: 2.5rem; --sp-48: 3rem; --sp-64: 4rem; --sp-80: 5rem; --sp-100: 6.25rem; --section-pad: 6.25rem; --radius: 0.5rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 999px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', sans-serif; background: var(--background); color: var(--foreground); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6 { font-weight: 900; line-height: 1.15; } h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); } h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); } h3 { font-size: 1.125rem; font-weight: 700; } h4 { font-size: 1rem; font-weight: 700; } p { line-height: 1.7; } .container-wrx { max-width: 1152px; margin: 0 auto; padding: 0 1rem; } .section-pad { padding: var(--sp-80) 0; } .section-divider { padding: var(--sp-80) 0; } .section-alt { background: var(--secondary); } .bg-card { background: var(--card); } .eyebrow-orange { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--orange-dark); margin-bottom: 0.5rem; } .eyebrow { color: var(--orange-dark); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; display: block; margin-bottom: 0.5rem; } .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--orange); color: #fff; font-weight: 600; font-size: 0.875rem; padding: 0.75rem 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow-orange); transition: all 0.2s; border: none; cursor: pointer; } .btn-primary:hover { background: var(--orange-dark); transform: translateY(-1px); box-shadow: 0 6px 24px -4px rgba(0,122,255,0.45); } .btn-primary i { font-size: 1rem; } .btn-primary svg { width: 16px; height: 16px; } .btn-ghost { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid #fff; color: #fff; background: transparent; font-weight: 600; font-size: 0.875rem; padding: 0.75rem 1.5rem; border-radius: var(--radius); transition: all 0.2s; cursor: pointer; } .btn-ghost:hover { background: rgba(255,255,255,0.1); } .btn-ghost-navy { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid var(--navy); color: var(--navy); background: transparent; font-weight: 600; font-size: 0.875rem; padding: 0.75rem 1.5rem; border-radius: var(--radius); transition: all 0.2s; cursor: pointer; } .btn-ghost-navy:hover { background: rgba(0,40,85,0.06); } .btn-on-navy { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid #fff; color: #fff; background: transparent; font-weight: 600; font-size: 0.875rem; padding: 0.75rem 1.5rem; border-radius: var(--radius); transition: all 0.2s; } .btn-on-navy:hover { background: rgba(255,255,255,0.1); } .btn-group { display: flex; flex-wrap: wrap; gap: 0.75rem; } .btn-group-center { justify-content: center; } .btn-block { display: block; width: 100%; text-align: center; } .card-feature { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-card); transition: border-color 0.2s, transform 0.2s; } .card-feature:hover { border-color: var(--orange); transform: translateY(-2px); } .card-feature h3 { font-size: 1.125rem; font-weight: 700; color: var(--navy); margin-bottom: 0.5rem; } .card-feature p { font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6; } .icon-box { width: 2.75rem; height: 2.75rem; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; background: var(--orange-light); color: var(--orange); margin-bottom: 1rem; font-size: 1.375rem; } .icon-box.navy { background: var(--navy); color: var(--accent-on-dark); } .icon-box i { font-size: 1.375rem; } .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--header-bg); padding: 0.875rem 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } .site-header .container-wrx { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; flex-wrap: nowrap; gap: 1rem; } .site-logo { flex-shrink: 0; } .site-logo img { height: 28px; } .site-header .btn-primary, .site-header .btn-ghost { padding: 0.5rem 1.05rem; font-size: 0.8125rem; } .nav-desktop { display: flex; align-items: center; gap: 1.4rem; } .nav-desktop a, .nav-desktop button { color: rgba(255,255,255,0.8); font-size: 0.875rem; font-weight: 500; background: none; border: none; cursor: pointer; transition: color 0.2s; white-space: nowrap; } .nav-desktop a:hover, .nav-desktop button:hover { color: #fff; } .nav-right { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; } .nav-right a { white-space: nowrap; } .nav-login { color: rgba(255,255,255,0.8); font-size: 0.875rem; font-weight: 500; } .nav-login:hover { color: #fff; } .nav-caret { display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; margin-left: 4px; vertical-align: middle; } .nav-dropdown { position: relative; } .nav-dropdown-panel { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0,0,0,0.15); min-width: 260px; padding: 0.5rem; margin-top: 0; z-index: 200; } .nav-dropdown-panel::before { content: ''; position: absolute; top: -0.75rem; left: 0; right: 0; height: 0.75rem; } .nav-dropdown:hover .nav-dropdown-panel, .nav-dropdown:focus-within .nav-dropdown-panel { display: block; } .nav-dropdown-panel a { display: block; padding: 0.4rem 0.75rem; border-radius: var(--radius); color: var(--foreground); font-size: 0.8125rem; font-weight: 500; transition: background 0.15s; } .nav-dropdown-panel a:hover { background: var(--secondary); color: var(--foreground); } .nav-dropdown-panel a span { display: block; font-size: 0.6875rem; color: var(--muted-foreground); font-weight: 400; margin-top: 1px; line-height: 1.3; } .nav-dropdown-panel:not(.industries-mega):not(.resources-mega):not(.tools-mega) { min-width: 480px; display: none; grid-template-columns: repeat(2, 1fr); gap: 0; padding: 0.5rem 0.75rem; } .nav-dropdown:hover > .nav-dropdown-panel:not(.industries-mega):not(.resources-mega):not(.tools-mega), .nav-dropdown:focus-within > .nav-dropdown-panel:not(.industries-mega):not(.resources-mega):not(.tools-mega) { display: grid; } .industries-mega { min-width: 580px; grid-template-columns: repeat(3, 1fr); gap: 0.25rem; padding: 0.625rem 0.75rem; } .nav-dropdown:hover .industries-mega, .nav-dropdown:focus-within .industries-mega { display: grid; } .mega-col { display: flex; flex-direction: column; gap: 0.125rem; } .mega-col-heading { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); padding: 0.375rem 0.75rem 0.125rem; } .mega-col a { font-size: 0.8125rem; padding: 0.3rem 0.75rem; } .tools-mega { min-width: 600px; grid-template-columns: repeat(3, 1fr); gap: 0.25rem; padding: 0.625rem 0.75rem; } .nav-dropdown:hover .tools-mega, .nav-dropdown:focus-within .tools-mega { display: grid; } .tools-mega .mega-feature { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; border-top: 1px solid var(--border); margin-top: 0.375rem; padding-top: 0.5rem; } .tools-mega .mega-feature a { padding: 0.3rem 0.6rem; } .tools-mega .mega-feature-star { font-weight: 700; } .tools-mega .mega-feature-all { margin-left: auto; color: var(--primary); font-weight: 600; } .resources-mega { min-width: 260px; } .nav-mobile-btn { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; } .nav-mobile-btn span { display: block; width: 20px; height: 2px; background: #fff; margin: 4px 0; border-radius: 2px; } .mobile-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 300; } .mobile-nav-overlay.is-open { display: block; } .mobile-nav-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 320px; background: #fff; padding: 1.5rem; overflow-y: auto; z-index: 301; } .mobile-nav-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .mobile-nav-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--foreground); } .mobile-nav-body a { display: block; padding: 0.75rem 0; color: var(--foreground); font-weight: 500; border-bottom: 1px solid var(--border); } .mobile-accordion-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border: none; padding: 0.75rem 0; font-weight: 500; font-size: 1rem; color: var(--foreground); cursor: pointer; border-bottom: 1px solid var(--border); } .mobile-accordion-panel { display: none; padding-left: 1rem; } .mobile-accordion-panel a { font-size: 0.875rem; border-bottom: none; padding: 0.5rem 0; } .mobile-accordion-panel.is-open { display: block; } .mobile-nav-footer { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; } .mobile-nav-footer .btn-primary, .mobile-nav-footer .btn-ghost { justify-content: center; } .mobile-nav-footer .btn-ghost { border-color: var(--navy); color: var(--navy); } .hero-section { background: var(--gradient-hero); padding: 6.5rem 1rem 5rem; overflow: hidden; color: #fff; } .hero-section h1 { color: #fff; } .hero-section .subhead { color: rgba(255,255,255,0.75); margin-bottom: 1.5rem; } .hero-section .eyebrow-orange { color: var(--accent-on-dark); } .hero-section.hero-light { background: var(--secondary); padding: 6.5rem 1rem 5rem; } .hero-section.hero-light h1 { color: var(--navy); } .hero-section.hero-light .subhead { color: var(--muted-foreground); } .hero-section.hero-light .eyebrow-orange { color: var(--orange-dark); } .hero-section.hero-light h1 .accent { color: var(--orange); } .hero-section.hero-light .proof-stars svg { fill: var(--orange); } .hero-section.hero-centered { text-align: center; } .hero-section.hero-centered .subhead { margin-inline: auto; } .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; max-width: 1152px; margin: 0 auto; } .hero-text h1 { color: var(--navy-foreground); margin-bottom: var(--sp-20); } .hero-h1-banner { padding: 30px 0 50px; max-width: none; } .hero-text h1 .accent { color: var(--accent-on-dark); } .hero-text .subhead { font-size: 1.125rem; color: rgba(255,255,255,0.75); max-width: 36rem; margin-bottom: var(--sp-32); line-height: 1.7; font-weight: 400; } .hero-text .btn-group { margin-bottom: var(--sp-32); } .hero-text .btn-primary { font-size: 1rem; padding: 0.875rem 1.75rem; } .hero-text .btn-on-navy, .hero-text .btn-ghost { font-size: 1rem; padding: 0.875rem 1.75rem; } .proof-strip { display: flex; align-items: center; gap: 0.5rem; } .proof-stars { display: flex; gap: 2px; } .proof-stars svg { width: 16px; height: 16px; fill: var(--accent-on-dark); } .proof-text { font-size: 0.875rem; color: rgba(255,255,255,0.7); margin-left: 0.25rem; } .hero-section.hero-light .proof-text { color: var(--muted-foreground); } .hero-checks { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: 0.65rem; } .hero-checks li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.95rem; line-height: 1.45; color: rgba(255,255,255,0.85); } .hero-checks li i { color: var(--accent-on-dark); font-size: 1.2rem; flex-shrink: 0; margin-top: 0.05rem; } .hero-section.hero-light .hero-checks li { color: var(--foreground); } .hero-section.hero-light .hero-checks li i { color: var(--orange); } .hero-image { position: relative; } .hero-glow { position: relative; } .hero-glow img, .hero-glow .card-soft { position: relative; z-index: 1; border-radius: var(--radius-lg); overflow: hidden; } .card-soft { border-radius: var(--radius-lg); overflow: hidden; } .card-soft img { width: 100%; display: block; } .card-grid-section { padding: var(--sp-80) 0; } .card-grid-section.bg-card { background: var(--card); } .card-grid-section.section-alt { background: var(--secondary); } .card-grid-section.bg-navy { background: var(--navy); color: var(--navy-foreground); } .card-grid-section.bg-navy h2 { color: #fff; } .card-grid-section.bg-navy p { color: var(--navy-muted); } .card-grid-section.bg-navy .card-feature { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); } .card-grid-section.bg-navy .card-feature h3 { color: #fff; } .card-grid-section.bg-navy .card-feature p { color: var(--navy-muted); } .card-grid-section.bg-navy .icon-box { background: rgba(255,255,255,0.1); color: var(--accent-on-dark); } .card-grid-section.bg-navy .eyebrow-orange, .card-grid-section.bg-navy .eyebrow { color: var(--accent-on-dark); } .card-grid-header { text-align: center; margin-bottom: var(--sp-48); } .card-grid-header h2 { color: var(--navy); margin-bottom: 0.75rem; } .card-grid-header p, .card-grid-header .subhead { color: var(--muted-foreground); max-width: 40rem; margin-inline: auto; } .card-grid { display: grid; gap: 1.5rem; } .cols-2 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-4 { grid-template-columns: repeat(4, 1fr); } .cols-6 { grid-template-columns: repeat(6, 1fr); } .industry-chip { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem 1rem; box-shadow: var(--shadow-card); transition: border-color 0.2s, transform 0.2s; } .industry-chip:hover { border-color: var(--orange); transform: translateY(-2px); } .industry-chip .icon-box { margin-bottom: 0.75rem; width: 3rem; height: 3rem; border-radius: var(--radius-lg); background: var(--navy); color: var(--accent-on-dark); } .industry-chip span { font-size: 0.875rem; font-weight: 600; color: var(--navy); } .split-section { padding: var(--sp-80) 0; } .split-section.section-alt { background: var(--secondary); } .split-section.bg-card { background: var(--card); } .split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; } .split-grid.reverse > :first-child { order: 2; } .split-text .eyebrow-orange { margin-bottom: 0.5rem; } .split-text h2 { color: var(--navy); margin-bottom: 1rem; font-size: clamp(1.5rem, 2.5vw, 1.875rem); } .split-text .split-copy { color: var(--muted-foreground); margin-bottom: 1.25rem; line-height: 1.7; } .split-text ul { display: flex; flex-direction: column; gap: 0.5rem; } .tools-dir-section h2 { text-align: center; } .tools-dir-section .subhead { text-align: center; margin-bottom: 1.5rem; } .tools-dir-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 1.75rem; } .tools-dir-pill { border: 1px solid var(--border); background: var(--card); color: var(--foreground); border-radius: 999px; padding: 0.5rem 1.1rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease; } .tools-dir-pill:hover { border-color: var(--blue, #2f6fed); color: var(--blue, #2f6fed); } .tools-dir-pill.is-active { background: var(--blue, #2f6fed); border-color: var(--blue, #2f6fed); color: #fff; } .tools-dir-group ul { columns: 3; column-gap: 2.5rem; list-style: none; padding: 0; margin: 0; max-width: 56rem; margin-inline: auto; } .tools-dir-group li { margin-bottom: 0.6rem; break-inside: avoid; } .tools-dir-group a { color: var(--foreground); font-weight: 500; } .tools-dir-group a:hover { color: var(--blue, #2f6fed); } @media (max-width: 900px) { .tools-dir-group ul { columns: 2; } } @media (max-width: 600px) { .tools-dir-group ul { columns: 1; } } .video-click-wrap { position: relative; } .video-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(20, 38, 61, 0.82); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(20, 38, 61, 0.35); transition: transform .15s ease, background .15s ease; } .video-play-btn:hover { background: var(--blue, #2f6fed); transform: translate(-50%, -50%) scale(1.06); } .video-play-btn svg { width: 34px; height: 34px; margin-left: 5px; } .split-media-full { margin-top: 50px; margin-bottom: 1.75rem; } .split-media-full .app-video { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .split-text-below { max-width: 62rem; } .split-bullets-row { margin-top: 1.75rem; } .split-bullets-row ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 2.5rem; } @media (max-width: 768px) { .split-bullets-row ul { grid-template-columns: 1fr; } } .split-text li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--foreground); } .split-text li svg { width: 16px; height: 16px; color: var(--success); flex-shrink: 0; } .split-text .btn-group { margin-top: var(--sp-24); } .split-image img { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); width: 100%; } .split-image--bare img { box-shadow: none; border-radius: 0; background: transparent; } .split-grid--mediawide { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 3rem; } .split-grid--mediawide.reverse { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .app-video { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); width: 100%; height: auto; display: block; background: #0b1220; } @media (min-width: 901px) { .hero-grid--media-max { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); } .hero-grid--media-max .hero-image { margin-right: -70px; } } @media (min-width: 1400px) { .hero-grid--media-max .hero-image { margin-right: -150px; } } .section.metrics-section { padding-top: 100px; padding-bottom: 100px; } .metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; max-width: 920px; margin: 2.5rem auto 0; } .metric-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 2rem 1.5rem; text-align: center; } .metric-heading { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin-bottom: 0.6rem; } .metric-value { display: block; font-size: 2.5rem; font-weight: 800; line-height: 1.05; color: var(--orange); margin-bottom: 0.4rem; } .metric-label { display: block; font-size: 0.875rem; line-height: 1.4; color: var(--text-secondary); } .metrics-lead { max-width: 640px; margin: 3rem auto 0; text-align: center; } .metrics-visual { max-width: 420px; margin: 2.5rem auto 0; } .metrics-visual img, .metrics-visual svg { width: 100%; height: auto; display: block; } .compare-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; max-width: 760px; margin: 2.75rem auto 0; text-align: left; } .compare-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 1.5rem; } .compare-card.compare-after { border-color: var(--orange); box-shadow: 0 12px 32px -14px rgba(0,122,255,0.4); } .compare-head { font-size: 0.95rem; font-weight: 800; color: var(--navy); margin-bottom: 1rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--border); } .compare-after .compare-head { color: var(--orange); } .compare-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; } .compare-card li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.95rem; color: var(--foreground); line-height: 1.4; } .cmp-x { color: var(--destructive); font-weight: 800; flex-shrink: 0; } .cmp-v { color: var(--orange); font-weight: 800; flex-shrink: 0; } @media (max-width: 640px) { .compare-cols { grid-template-columns: 1fr; max-width: 420px; } } .media-todo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; min-height: 300px; padding: 2rem; text-align: center; border: 2px dashed var(--border); border-radius: var(--radius-lg); color: var(--text-secondary); background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 12px, #f1f5f9 12px, #f1f5f9 24px); } .media-todo-tag { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--orange); } .media-todo p { margin: 0; font-size: 0.95rem; line-height: 1.45; max-width: 380px; } .media-todo-video { min-height: 340px; } @media (max-width: 720px) { .metrics-grid { grid-template-columns: 1fr; max-width: 380px; } .metric-value { font-size: 2.125rem; } } .split-section + .split-section { } .reviews-section { padding: var(--sp-80) 0; background: var(--secondary); } .testimonials-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; align-items: start; } .testimonials-left .eyebrow-orange { margin-bottom: 0.5rem; } .testimonials-left h2 { color: var(--navy); margin-bottom: 1rem; } .testimonials-left img { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); width: 100%; margin-top: 1rem; } .testimonial-cards { display: grid; gap: 1.25rem; } .testimonial-card { display: flex; flex-direction: column; } .review-stars { display: flex; gap: 2px; margin-bottom: 0.75rem; } .review-card-header .review-stars { margin-bottom: 0; } .review-stars svg { width: 14px; height: 14px; fill: var(--orange); } .review-quote { color: var(--foreground); margin-bottom: 1rem; line-height: 1.7; font-size: 0.9375rem; } .review-footer { font-size: 0.875rem; } .review-name { font-weight: 700; color: var(--navy); } .review-title { color: var(--muted-foreground); } .review-platform { height: 20px; width: auto; opacity: 0.7; transition: opacity 0.2s; } .review-platform-link:hover .review-platform { opacity: 1; } .review-platform-link { margin-right: 0.5rem; } .review-card-header { display: flex; align-items: center; margin-bottom: 0.75rem; } .review-card-body { display: flex; gap: 1rem; align-items: flex-start; } .review-card-body .review-avatar-sm { flex-shrink: 0; margin-top: 0.125rem; } .review-card-content { flex: 1; } .cta-section { background: var(--gradient-cta); padding: 6rem 1rem; text-align: center; } .cta-section h2 { color: var(--navy-foreground); margin-bottom: var(--sp-20); } .cta-section .subhead { font-size: 1.125rem; color: rgba(255,255,255,0.7); max-width: 32rem; margin: 0 auto var(--sp-40); } .cta-section .btn-group { justify-content: center; } .cta-section .btn-primary { font-size: 1rem; padding: 1rem 2rem; } .cta-section .btn-ghost { font-size: 1rem; padding: 1rem 2rem; } .cta-proof { display: flex; justify-content: center; align-items: center; gap: 0.25rem; margin-bottom: 1.5rem; } .cta-proof svg { width: 18px; height: 18px; fill: var(--accent-on-dark); } .cta-proof span { font-size: 0.875rem; color: rgba(255,255,255,0.7); margin-left: 0.5rem; font-weight: 500; } .cta-icon-badge { width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: var(--orange); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; box-shadow: var(--shadow-orange); } .cta-icon-badge i { font-size: 1.75rem; color: #fff; } .cta-fine { font-size: 0.75rem; color: rgba(255,255,255,0.45); margin-top: 1.5rem; } .faq-section { padding: var(--sp-80) 0; } .faq-section .card-grid-header { margin-bottom: 2.5rem; } .faq-card { max-width: 48rem; margin: 0 auto; background: var(--card); border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-card); overflow: hidden; } .faq-item { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); } .faq-item:last-child { border-bottom: none; } .faq-question { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9375rem; font-weight: 600; color: var(--navy); margin-bottom: 0.5rem; } .faq-answer { padding-left: 1.5rem; color: var(--muted-foreground); line-height: 1.7; font-size: 0.875rem; } .pricing-section { padding: var(--sp-80) 0; } .pricing-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .pricing-card { position: relative; border-radius: var(--radius-xl); padding: 2rem; background: var(--card); box-shadow: var(--shadow-card); border: 1px solid var(--border); transition: transform 0.2s; } .pricing-card.highlighted { border: 2px solid var(--orange); box-shadow: 0 0 0 2px var(--orange), var(--shadow-card); transform: translateY(-1rem); } .pricing-badge { position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%); background: var(--orange); color: #fff; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.25rem 0.75rem; border-radius: var(--radius-full); } .pricing-card h3 { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--navy); margin-bottom: 0.5rem; } .pricing-price { margin-bottom: 0.5rem; } .pricing-price .amount { font-size: 3rem; font-weight: 900; color: var(--navy); } .pricing-price .period { color: var(--muted-foreground); font-size: 0.875rem; } .pricing-projects { font-size: 0.9375rem; font-weight: 600; color: var(--navy); margin-bottom: 0.75rem; } .pricing-projects-count { color: var(--orange); font-weight: 800; } .pricing-blurb { font-size: 0.875rem; color: var(--muted-foreground); margin-bottom: 1.5rem; } .pricing-card .btn-primary, .pricing-card .btn-ghost-navy { width: 100%; justify-content: center; } .pricing-overlap { margin-top: -3rem; position: relative; z-index: 10; } .addon-section { padding: 2.5rem 1rem; } .addon-band { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; align-items: center; background: var(--card); border-radius: var(--radius-lg); padding: 2rem 2.5rem; box-shadow: var(--shadow-card); border: 1px solid var(--border); } .addon-info {} .addon-heading { font-size: 1.25rem; font-weight: 900; color: var(--navy); margin-bottom: 0.25rem; } .addon-subtitle { font-size: 0.875rem; color: var(--muted-foreground); } .addon-price-col { text-align: center; padding: 0.5rem 0; border-left: 1px solid var(--border); } .addon-amount { font-size: 1.875rem; font-weight: 900; color: var(--navy); } .addon-period { font-size: 0.875rem; font-weight: 400; color: var(--muted-foreground); } .addon-type { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--orange); margin-top: 0.25rem; } .ct-section { padding: var(--section-pad) 1rem; background: var(--card); } .ct-header { text-align: center; margin-bottom: 3rem; } .ct-header h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 900; color: var(--navy); margin-bottom: 0.75rem; } .ct-subtitle { color: var(--muted-foreground); font-size: 1rem; } .ct-wrapper { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-card); } .ct-table { width: 100%; min-width: 600px; border-collapse: collapse; } .ct-th { padding: 1rem 1.5rem; font-size: 0.875rem; font-weight: 700; text-align: center; background: var(--secondary); color: var(--navy); } .ct-th-feature { text-align: left; font-weight: 600; color: var(--muted-foreground); } .ct-th-highlight { background: var(--navy); color: #fff; } .ct-feature { padding: 0.875rem 1.5rem; font-size: 0.875rem; font-weight: 600; color: var(--foreground); border-top: 1px solid var(--border); } .ct-cell { padding: 0.875rem 1.5rem; text-align: center; border-top: 1px solid var(--border); } .ct-value { font-size: 0.875rem; font-weight: 500; color: var(--foreground); } .ct-dash { display: inline-block; font-size: 1.125rem; line-height: 1; color: var(--muted-foreground); opacity: 0.4; } .ct-row-even { background: var(--card); } .ct-row-odd { background: var(--background); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .breadcrumb { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: rgba(255,255,255,0.6); margin-bottom: 1.5rem; flex-wrap: wrap; } .breadcrumb a { transition: color 0.2s; } .breadcrumb a:hover { color: var(--orange); } .breadcrumb svg { width: 12px; height: 12px; } .verdict-section { padding: 2.5rem 0; } .verdict-box { background: #eef6ff; border: 1.5px solid #a3c4e8; border-left: 4px solid var(--orange); border-radius: var(--radius-lg); padding: 1.5rem 2rem; } .verdict-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--orange); margin-bottom: 0.75rem; } .verdict-label svg { width: 20px; height: 20px; color: var(--orange); } .verdict-box p { font-size: 1rem; line-height: 1.7; font-weight: 500; color: var(--foreground); margin-bottom: 1.25rem; } .verdict-box .btn-primary { margin-top: 0.5rem; } .steps-grid .icon-box { background: var(--navy); color: var(--accent-on-dark); } .blog-featured { padding: 3rem 0; } .featured-post { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; text-decoration: none; color: inherit; transition: border-color 0.2s; } .featured-post:hover { border-color: var(--orange); } .featured-post-img { width: 100%; height: 100%; object-fit: cover; min-height: 16rem; } .featured-post-body { padding: 2rem; } .featured-post-body h2 { font-size: clamp(1.5rem, 2.5vw, 1.875rem); font-weight: 900; color: var(--navy); margin-bottom: 0.75rem; } .featured-post-body p { color: var(--muted-foreground); margin-bottom: 1.25rem; line-height: 1.7; font-size: 0.9375rem; } .post-category { display: inline-block; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--orange); margin-bottom: 0.75rem; } .post-meta { display: flex; gap: 1rem; font-size: 0.75rem; color: var(--muted-foreground); margin-bottom: 1rem; } .post-meta span { display: flex; align-items: center; gap: 0.25rem; } .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .post-card { display: flex; flex-direction: column; overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); transition: border-color 0.2s, transform 0.2s; text-decoration: none; color: inherit; } .post-card:hover { border-color: var(--orange); transform: translateY(-2px); } .post-card-img { width: 100%; height: 12rem; object-fit: cover; } .post-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; } .post-card-body h3 { font-size: 1.0625rem; font-weight: 700; color: var(--navy); margin-bottom: 0.5rem; line-height: 1.35; } .post-card-body p { font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6; margin-bottom: 1rem; flex: 1; } .post-card-body .post-meta { margin-top: auto; justify-content: space-between; } .blog-hero { padding-top: 7.5rem; padding-bottom: 3.75rem; } .blog-hero .breadcrumb { margin-bottom: 1.5rem; } .blog-hero h1 { margin-bottom: 1rem; } .blog-meta { display: flex; gap: 1.5rem; font-size: 0.875rem; color: rgba(255,255,255,0.7); } .blog-hero.has-hero-bg { background-size: cover; background-position: center right; background-repeat: no-repeat; min-height: 21rem; } .article-section { padding: var(--sp-48) 0 var(--sp-80); } .article-body { max-width: 48rem; margin: 0 auto; } .toc-card { background: var(--secondary); border-left: 3px solid var(--orange); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 2.5rem; } .toc-label { display: block; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--navy); margin-bottom: 0.75rem; } .toc-card ul { list-style: none !important; padding: 0 !important; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 2rem; } .toc-card li { font-size: 0.8125rem; line-height: 1.5; padding-left: 1rem; position: relative; } .toc-card li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); } .toc-card a { color: var(--navy); text-decoration: none; transition: color 0.2s; } .toc-card a:hover { color: var(--orange); } .blog-layout { display: grid; grid-template-columns: 240px 1fr; gap: 3rem; align-items: start; max-width: 64rem; margin: 0 auto; } .blog-layout .article-body { max-width: none; margin: 0; } .blog-sidebar { position: sticky; top: 6rem; align-self: start; } .blog-toc-block { background: var(--secondary); border-left: 3px solid var(--orange); border-radius: var(--radius); padding: 1.25rem; } .blog-toc-label { display: block; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--navy); margin-bottom: 0.75rem; } .blog-toc-block ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .blog-toc-block li { font-size: 0.85rem; line-height: 1.4; } .blog-toc-block a { color: var(--muted-foreground); text-decoration: none; } .blog-toc-block a:hover { color: var(--orange); } .article-body h2 { margin-top: var(--sp-48); margin-bottom: var(--sp-16); color: var(--navy); font-size: 1.5rem; font-weight: 900; } .article-body h3 { margin-top: var(--sp-32); margin-bottom: var(--sp-12); color: var(--navy); font-size: 1.25rem; font-weight: 700; } .article-body p { margin-bottom: var(--sp-24); color: var(--foreground); line-height: 1.8; font-size: 1rem; } .article-body ul, .article-body ol { margin-bottom: var(--sp-24); padding-left: 1.5rem; } .article-body ul { list-style: disc; } .article-body ol { list-style: decimal; } .article-body li { margin-bottom: 0.5rem; color: var(--foreground); line-height: 1.7; } .article-body a { color: var(--orange); text-decoration: underline; } .article-body a:hover { color: var(--navy); } .article-body a.btn-primary { color: #fff; text-decoration: none; } .blog-inline-cta { margin: 3rem 0; } .blog-inline-cta h3 { font-size: 1.125rem; font-weight: 900; color: var(--navy); margin-bottom: 0.5rem; } .blog-inline-cta p { font-size: 0.875rem; color: var(--muted-foreground); margin-bottom: 1rem; } .blog-cta { margin: 2.75rem 0; border-radius: 16px; padding: 1.6rem 1.75rem; } .article-body .blog-cta p, .article-body .blog-cta h3, .article-body .blog-cta blockquote { color: inherit; margin: 0; line-height: 1.6; } .article-body .blog-cta a { text-decoration: none; } .article-body .blog-cta a.btn-primary { color: #fff; } .blog-cta .btn-primary { white-space: nowrap; } .blog-cta-stars { color: var(--orange); letter-spacing: 2px; font-size: 1rem; line-height: 1; } .blog-cta-star-empty { color: #d6dae1; } .blog-cta-quote { font-style: italic; } .blog-cta-quote::before { content: "\201C"; } .blog-cta-quote::after { content: "\201D"; } .blog-cta-name { font-weight: 700; display: block; } .blog-cta-role { font-size: 0.8rem; opacity: 0.72; display: block; } .blog-cta-avatar { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .blog-cta-avatar-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--orange); color: #fff; font-weight: 700; font-size: 0.95rem; } .blog-cta-nextstep { display: flex; gap: 1.1rem; align-items: flex-start; } .blog-cta-icon { flex-shrink: 0; width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } .article-body .blog-cta .blog-cta-eyebrow { text-transform: uppercase; letter-spacing: 0.11em; font-size: 0.7rem; font-weight: 700; margin: 0 0 0.4rem; color: var(--orange); } .article-body .blog-cta .blog-cta-headline { font-size: 1.35rem; font-weight: 800; line-height: 1.25; margin: 0 0 0.45rem; } .article-body .blog-cta .blog-cta-text { font-size: 0.95rem; margin: 0 0 1.1rem; } .blog-cta-actions { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; } .article-body .blog-cta .blog-cta-link { font-weight: 700; font-size: 0.9rem; color: var(--orange-dark); } .blog-cta-link:hover { text-decoration: underline; } .blog-cta-dark { background: var(--navy); color: #fff; } .blog-cta-dark .blog-cta-icon { background: var(--orange); color: #fff; } .article-body .blog-cta-dark .blog-cta-link { color: var(--accent-on-dark); } .blog-cta-dark .blog-cta-stars, .blog-cta-split .blog-cta-stars { color: var(--accent-on-dark); } .article-body .blog-cta-dark .blog-cta-eyebrow, .article-body .blog-cta-split .blog-cta-eyebrow { color: var(--accent-on-dark); } .article-body .blog-cta-split .blog-cta-link { color: var(--accent-on-dark); } .blog-cta-cream { background: var(--orange-light); border: 1px solid #bcdcff; color: var(--navy); } .blog-cta-cream .blog-cta-icon { background: var(--orange); color: #fff; } .blog-cta-white { background: #fff; border: 1px solid var(--border); color: var(--navy); box-shadow: 0 6px 24px -10px rgba(0,40,85,0.18); } .blog-cta-white .blog-cta-icon { background: var(--orange-light); color: var(--orange); } .blog-cta-review { background: #fff; border: 1px solid var(--border); color: var(--navy); box-shadow: 0 6px 24px -12px rgba(0,40,85,0.18); } .blog-cta-review-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .blog-cta-review-id { margin-right: auto; } .article-body .blog-cta-review .blog-cta-quote { font-size: 1.1rem; margin: 0 0 1.1rem; } .blog-cta-review-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .article-body .blog-cta .blog-cta-source { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--muted-foreground); } .blog-cta-source img { height: 20px; width: auto; } .blog-cta-split { background: var(--navy); color: #fff; display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.5rem; align-items: center; } .article-body .blog-cta-split .blog-cta-quote { font-size: 1.05rem; margin: 0.6rem 0 0.9rem; } .blog-cta-split .blog-cta-review-head { margin-bottom: 0; } .blog-cta-split-action { border-left: 1px solid rgba(255,255,255,0.16); padding-left: 1.5rem; } .article-body .blog-cta-split-action h3 { font-size: 1.2rem; font-weight: 800; margin: 0 0 0.35rem; } .article-body .blog-cta-split-action p { font-size: 0.85rem; opacity: 0.78; margin: 0 0 1rem; } .blog-cta-proof { background: var(--orange-light); border: 1px solid #bcdcff; color: var(--navy); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .blog-cta-proof-badges { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; } .blog-cta-award { height: 40px; width: auto; } .blog-cta-proof-main { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; } .article-body .blog-cta .blog-cta-proof-text { font-weight: 700; font-size: 0.95rem; margin: 0; } @media (max-width: 640px) { .blog-cta-split { grid-template-columns: 1fr; } .blog-cta-split-action { border-left: 0; border-top: 1px solid rgba(255,255,255,0.16); padding-left: 0; padding-top: 1.25rem; } .blog-cta-proof, .blog-cta-review-foot, .blog-cta-proof-main { justify-content: flex-start; } } .breadcrumb { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: rgba(255,255,255,0.6); flex-wrap: wrap; } .breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.2s; } .breadcrumb a:hover { color: var(--orange); } .breadcrumb span { color: rgba(255,255,255,0.85); } .related-section { padding: var(--sp-80) 0; } .related-heading { font-size: 1.5rem; font-weight: 900; color: var(--navy); margin-bottom: 2rem; } .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .related-card { display: flex; flex-direction: column; overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); text-decoration: none; color: inherit; transition: border-color 0.2s, transform 0.2s; } .related-card:hover { border-color: var(--orange); transform: translateY(-2px); } .related-card-img { width: 100%; height: 11rem; object-fit: cover; } .related-card-body { padding: 1.25rem; } .related-card-body h3 { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 0.75rem; line-height: 1.35; } .related-card-body .link-arrow { font-size: 0.75rem; } .ftab-section { padding: var(--sp-80) 0; background: var(--card); } .ftab-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2rem; align-items: start; } .ftab-nav { display: flex; flex-direction: column; gap: 0.5rem; } .ftab-item { background: none; border: 1px solid transparent; border-radius: var(--radius-lg); padding: 1rem 1.25rem; text-align: left; cursor: pointer; transition: all 0.2s; } .ftab-item:hover { border-color: var(--border); } .ftab-item.is-active { background: var(--card); border-color: var(--orange); box-shadow: var(--shadow-card); } .ftab-title { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 0.25rem; } .ftab-desc { font-size: 0.8125rem; color: var(--muted-foreground); line-height: 1.5; } .ftab-content { position: relative; } .ftab-panel { display: none; } .ftab-panel.is-active { display: block; } .ftab-panel wistia-player, .ftab-panel img { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); } .igrid-section { padding: var(--sp-80) 0; } .igrid-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .igrid-tile { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 0; } .igrid-icon { width: 2.75rem; height: 2.75rem; border-radius: var(--radius); background: var(--orange-light); color: var(--orange); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.25rem; } .igrid-title { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 0.25rem; } .igrid-desc { font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6; } .link-arrow { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--orange-dark); transition: gap 0.2s; } .bg-navy .link-arrow, .card-grid-section.bg-navy .link-arrow { color: var(--accent-on-dark); } .link-arrow:hover { gap: 0.5rem; } .link-arrow::after { content: '→'; } footer { background: var(--header-bg); padding: 4rem 1rem 2rem; } .footer-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem 2rem; margin-bottom: 2.5rem; } .footer-brand-col { grid-column: 1 / -1; max-width: none; margin-bottom: 1rem; } .footer-brand img { height: 28px; } .footer-tagline { font-size: 0.875rem; color: rgba(255,255,255,0.6); max-width: 16rem; margin-top: 1rem; } .footer-col h3, .footer-subgroup h3 { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-on-dark); margin-bottom: 1rem; } .footer-col a { display: block; font-size: 0.875rem; color: rgba(255,255,255,0.7); transition: color 0.2s; margin-bottom: 0.625rem; } .footer-col a:hover { color: #fff; } .footer-subgroup { margin-bottom: 1.5rem; } .footer-subgroup h4 { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-on-dark); margin-bottom: 1rem; } .footer-subgroup a { display: block; font-size: 0.875rem; color: rgba(255,255,255,0.7); transition: color 0.2s; margin-bottom: 0.625rem; } .footer-subgroup a:hover { color: #fff; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 2rem; display: flex; justify-content: space-between; align-items: center; } .footer-bottom span { font-size: 0.75rem; color: rgba(255,255,255,0.4); } .footer-legal { display: flex; gap: 1.25rem; } .footer-legal a { font-size: 0.75rem; color: rgba(255,255,255,0.4); transition: color 0.2s; } .footer-legal a:hover { color: #fff; } .footer-disclaimer { margin-top: 1.25rem; font-size: 0.6875rem; line-height: 1.5; color: rgba(255,255,255,0.35); max-width: 70ch; } .ratings-bar { padding: 3rem 0; } .ratings-grid { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; } .ratings-bar-link { text-align: center; margin-top: 1.5rem; } .rating-platform-card { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; padding: 1.25rem 1.5rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); text-decoration: none; color: inherit; transition: border-color 0.2s, transform 0.2s; min-width: 120px; } } .rating-platform-card:hover { border-color: var(--orange); transform: translateY(-2px); } .rating-platform-icon { height: 2rem; width: auto; } .rating-platform-name { font-size: 0.6875rem; font-weight: 600; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.05em; } .rating-platform-score { display: flex; align-items: baseline; gap: 0.125rem; } .rating-number { font-size: 1.5rem; font-weight: 900; color: var(--navy); } .rating-outof { font-size: 0.75rem; color: var(--muted-foreground); } .rating-stars { font-size: 0.875rem; color: var(--orange); } .star-full { color: var(--orange); } .star-half { color: var(--orange); opacity: 0.5; } .awards-section { padding: var(--sp-80) 0; text-align: center; } .awards-section h2 { font-size: 1.75rem; font-weight: 900; color: var(--navy); margin-bottom: 0.5rem; } .awards-section .subhead { max-width: 36rem; margin: 0 auto 2.5rem; } .awards-grid { display: flex; justify-content: center; align-items: center; gap: 2.5rem; flex-wrap: wrap; } .award-badge-img { height: 7rem; width: auto; } .spotlight-section { padding: var(--sp-80) 0; } .spotlight-section h2 { font-size: 1.75rem; font-weight: 900; color: var(--navy); margin-bottom: 2rem; } .spotlight-grid { display: flex; flex-direction: column; gap: 2rem; } .spotlight-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 2rem; transition: border-color 0.2s; } .spotlight-card:hover { border-color: var(--orange); } .spotlight-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; } .review-avatar { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); } .review-avatar-initials { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; line-height: 1; border: none; text-transform: uppercase; letter-spacing: 0.02em; user-select: none; flex-shrink: 0; } .review-avatar.review-avatar-initials { font-size: 1.25rem; } .review-avatar-sm.review-avatar-initials { font-size: 0.85rem; } .spotlight-meta { flex: 1; } .spotlight-meta strong { display: block; font-size: 1rem; color: var(--navy); } .spotlight-meta span { font-size: 0.8125rem; color: var(--muted-foreground); } .spotlight-stars { margin-top: 0.25rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; } .spotlight-stars .platform-badge img { height: 1.25rem; width: auto; } .spotlight-text { font-size: 0.9375rem; line-height: 1.75; color: var(--foreground); margin: 0; padding-left: 1.25rem; border-left: 3px solid var(--orange); font-style: italic; } .platform-badge { display: inline-flex; opacity: 0.7; transition: opacity 0.2s; } .platform-badge:hover { opacity: 1; } .platform-badge img { height: 1.5rem; width: auto; } .reviews-grid-section { padding: var(--sp-80) 0; } .reviews-grid-section h2 { font-size: 1.75rem; font-weight: 900; color: var(--navy); margin-bottom: 2rem; } .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .review-card-compact { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 1.5rem; display: flex; flex-direction: column; transition: border-color 0.2s; } .review-card-compact:hover { border-color: var(--orange); } .review-compact-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; } .review-avatar-sm { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); } .review-compact-meta { flex: 1; } .review-compact-meta strong { display: block; font-size: 0.875rem; color: var(--navy); } .review-compact-meta span { font-size: 0.75rem; color: var(--muted-foreground); } .review-compact-stars { margin-bottom: 0.75rem; font-size: 0.8125rem; display: flex; align-items: center; gap: 0.5rem; } .review-compact-stars .platform-badge img { height: 1.125rem; width: auto; } .review-compact-quote { font-size: 0.875rem; line-height: 1.6; color: var(--foreground); flex: 1; margin-bottom: 1rem; font-style: italic; } .review-compact-footer { display: flex; align-items: center; justify-content: flex-end; margin-top: auto; } .review-compact-footer .platform-badge img { height: 1.125rem; } .compare-hero { text-align: left; } .compare-hero .subhead { margin-inline: unset; } .workflow-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; } .workflow-card .highlight { background: var(--orange-light); border-radius: var(--radius); padding: 0.125rem 0.5rem; font-weight: 600; } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; text-align: center; } .hero-h1-banner { text-align: center; } .hero-text .subhead { margin-inline: auto; } .hero-text .btn-group { justify-content: center; } .hero-text .proof-strip { justify-content: center; } .hero-text .hero-checks { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; } .split-grid { grid-template-columns: 1fr !important; } .split-grid > * { min-width: 0; } .split-grid.reverse > :first-child { order: 0; } .split-grid--mediawide, .split-grid--mediawide.reverse { grid-template-columns: 1fr; } .split-header-full + .split-grid .split-text ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem 1.25rem; } .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } .card-grid.cols-6 { grid-template-columns: repeat(3, 1fr); } .testimonials-grid { grid-template-columns: 1fr; } .pricing-cards { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; } .pricing-card.highlighted { transform: none; } .footer-grid { grid-template-columns: repeat(3, 1fr); } .footer-brand-col { grid-column: 1 / -1; max-width: none; } .ftab-grid { grid-template-columns: 1fr; } .featured-post { grid-template-columns: 1fr; } .post-grid { grid-template-columns: repeat(2, 1fr); } .related-grid { grid-template-columns: repeat(2, 1fr); } .addon-band { grid-template-columns: 1fr; text-align: center; } .addon-price-col { border-left: none; border-top: 1px solid var(--border); padding-top: 1rem; } } @media (max-width: 1180px) { .nav-demo { display: none; } } @media (max-width: 1040px) { .nav-cta-lead { display: none; } } @media (max-width: 920px) { .nav-desktop { display: none; } .nav-mobile-btn { display: block; margin-left: 0.25rem; } .nav-login { display: none; } .nav-right { margin-left: auto; gap: 0.5rem; } .nav-right .btn-primary { display: inline-flex; } .nav-cta-lead { display: inline; } } @media (max-width: 768px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } .card-grid.cols-3 { grid-template-columns: 1fr; } .card-grid.cols-6 { grid-template-columns: repeat(2, 1fr); } .post-grid { grid-template-columns: 1fr; } .featured-post { grid-template-columns: 1fr; } .featured-post-img { height: 14rem; } .related-grid { grid-template-columns: 1fr; } .reviews-grid { grid-template-columns: 1fr; } .ratings-grid { gap: 1rem; } .rating-platform-card { min-width: 100px; padding: 1rem; } .awards-grid { gap: 1.5rem; } .award-badge-img { height: 5rem; } .hero-section { padding: 5.5rem 1rem 4rem; } .ct-wrapper { border-radius: 0; border-left: none; border-right: none; } } @media (max-width: 640px) { .nav-demo { display: none; } .nav-right .btn-primary { padding: 0.5rem 0.9rem; font-size: 0.8125rem; } .card-grid.cols-4 { grid-template-columns: 1fr; } .card-grid.cols-2 { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; } .toc-card ul { grid-template-columns: 1fr; } } wistia-player { border-radius: var(--radius-lg); overflow: hidden; display: block; } .text-center { text-align: center; } .mx-auto { margin-inline: auto; } .mt-neg-12 { margin-top: -3rem; position: relative; z-index: 10; } .check-icon { color: var(--success); } .warn-icon { color: var(--warning); } .breadcrumb-light { color: var(--muted-foreground); margin-bottom: 1.25rem; } .breadcrumb-light a { color: var(--muted-foreground); } .breadcrumb-light a:hover { color: var(--orange); } .breadcrumb-light span { color: var(--navy); } .academy-spoke-hero, .academy-subhub-hero { background: var(--background); padding: 7rem 1rem 2.5rem; text-align: left; } .academy-spoke-hero .container-wrx, .academy-subhub-hero .container-wrx { margin-inline: auto; } .academy-spoke-hero h1, .academy-subhub-hero h1 { color: var(--navy); } .academy-spoke-hero .subhead, .academy-subhub-hero .subhead { color: var(--muted-foreground); max-width: 46rem; margin-left: 0; } .academy-byline { font-size: 0.8125rem; color: var(--muted-foreground); margin-top: 1rem; margin-bottom: 0; } .academy-byline span { opacity: 0.6; margin: 0 0.4rem; } .kb-updated { font-size: 0.8125rem; color: var(--muted-foreground); margin-top: 0.75rem; margin-bottom: 0; } .academy-body { padding: 0 0 var(--sp-80); } .academy-layout { display: grid; grid-template-columns: 260px 1fr; gap: 3rem; align-items: start; } .academy-sidebar { position: sticky; top: 6rem; align-self: start; } .academy-toc-block { background: var(--secondary); border-left: 3px solid var(--orange); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.5rem; } .academy-toc-label { display: block; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--navy); margin-bottom: 0.75rem; } .academy-toc-block ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .academy-toc-block a { color: var(--muted-foreground); text-decoration: none; font-size: 0.85rem; line-height: 1.4; } .academy-toc-block a:hover { color: var(--orange); } .academy-related { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; } .academy-related p { margin: 0.4rem 0; } .academy-related a { color: var(--navy); text-decoration: none; font-size: 0.85rem; font-weight: 600; } .academy-related a:hover { color: var(--orange); } .academy-main { max-width: 46rem; } .academy-prose h2 { margin-top: var(--sp-48); margin-bottom: var(--sp-16); color: var(--navy); font-size: 1.5rem; font-weight: 900; scroll-margin-top: 6rem; } .academy-prose h3 { margin-top: var(--sp-32); margin-bottom: var(--sp-12); color: var(--navy); font-size: 1.25rem; font-weight: 700; scroll-margin-top: 6rem; } .academy-prose p { margin-bottom: var(--sp-24); color: var(--foreground); line-height: 1.8; } .academy-prose ul, .academy-prose ol { margin-bottom: var(--sp-24); padding-left: 1.5rem; } .academy-prose ul { list-style: disc; } .academy-prose ol { list-style: decimal; } .academy-prose li { margin-bottom: 0.5rem; color: var(--foreground); line-height: 1.7; } .academy-prose a { color: var(--orange); text-decoration: underline; } .academy-prose a:hover { color: var(--navy); } .copy-section { padding: var(--sp-64) 0 var(--sp-80); } .prose-werx { max-width: 46rem; margin: 0 auto; color: var(--foreground); } .prose-werx > :first-child { margin-top: 0; } .prose-werx h2 { margin: 0 0 var(--sp-24); color: var(--navy); font-size: 1.75rem; font-weight: 900; } .prose-werx h3 { margin-top: var(--sp-48); margin-bottom: var(--sp-12); color: var(--navy); font-size: 1.3rem; font-weight: 800; scroll-margin-top: 6rem; } .prose-werx h4 { margin-top: var(--sp-32); margin-bottom: var(--sp-8); color: var(--navy); font-size: 1.0625rem; font-weight: 700; } .prose-werx p { margin-bottom: var(--sp-20); color: var(--foreground); line-height: 1.8; } .prose-werx ul, .prose-werx ol { margin: 0 0 var(--sp-24); padding-left: 1.5rem; } .prose-werx ul { list-style: disc; } .prose-werx ol { list-style: decimal; } .prose-werx li { margin-bottom: var(--sp-12); color: var(--foreground); line-height: 1.7; } .prose-werx li::marker { color: var(--orange); } .prose-werx a { color: var(--orange-dark); text-decoration: underline; text-underline-offset: 2px; } .prose-werx a:hover { color: var(--navy); } .prose-werx a.btn-primary, .prose-werx a.btn-primary:hover { color: #fff; text-decoration: none; } .prose-werx a.btn-ghost-navy, .prose-werx a.btn-ghost-navy:hover { color: var(--navy); text-decoration: none; } .prose-werx strong { color: var(--navy); font-weight: 700; } @media (max-width: 768px) { .copy-section { padding: var(--sp-40) 0 var(--sp-64); } .prose-werx h3 { margin-top: var(--sp-32); } } .academy-note { background: #eef6ff; border: 1px solid #bcdcff; border-left: 4px solid var(--orange); border-radius: var(--radius); padding: 1rem 1.25rem; font-size: 0.9rem; color: var(--foreground); line-height: 1.6; margin: 0 0 var(--sp-32); } .academy-faq { margin-top: var(--sp-48); scroll-margin-top: 6rem; } .academy-faq h2 { color: var(--navy); font-size: 1.5rem; font-weight: 900; margin-bottom: var(--sp-24); } .academy-starthere { padding: var(--sp-80) 0; } .academy-start-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .academy-start-list li { display: flex; gap: 1rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; } .academy-start-num { font-size: 0.9rem; font-weight: 800; color: var(--orange); } .academy-start-list a { display: block; font-weight: 700; color: var(--navy); text-decoration: none; margin-bottom: 0.25rem; } .academy-start-list a:hover { color: var(--orange); } .academy-start-list small { color: var(--muted-foreground); font-size: 0.8rem; line-height: 1.5; } .academy-categories { padding: var(--sp-80) 0; } .academy-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; } .academy-cat-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 1.75rem; text-decoration: none; color: inherit; transition: border-color 0.2s, transform 0.2s; } .academy-cat-card:hover { border-color: var(--orange); transform: translateY(-2px); } .academy-cat-count { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--orange); margin-bottom: 0.5rem; } .academy-cat-card h3 { font-size: 1.125rem; font-weight: 800; color: var(--navy); margin-bottom: 0.5rem; } .academy-cat-card p { font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6; flex: 1; margin-bottom: 1rem; } .academy-strips { padding: 0 0 var(--sp-80); } .academy-strip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .academy-strip-block { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; } .academy-strip-dark { background: var(--navy); border-color: var(--navy); } .academy-strip-dark h2 { color: #fff; } .academy-strip-block h2 { font-size: 1.25rem; font-weight: 800; color: var(--navy); margin: 0.5rem 0 1.25rem; } .academy-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .academy-chip { display: inline-block; padding: 0.5rem 0.9rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; text-decoration: none; } .academy-strip-dark .academy-chip { background: rgba(255,255,255,0.12); color: #fff; } .academy-strip-dark .academy-chip:hover { background: var(--orange); color: #fff; } .academy-chip-light { background: var(--secondary); color: var(--navy); } .academy-chip-light:hover { background: var(--orange); color: #fff; } .academy-subhub-body { padding: 0 0 var(--sp-80); } .academy-subhub-layout { display: grid; grid-template-columns: 300px 1fr; gap: 3rem; align-items: start; } .academy-subhub-aside { position: sticky; top: 6rem; background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: 2rem; } .academy-subhub-aside h2 { font-size: 1.125rem; color: #fff; margin-bottom: 0.75rem; } .academy-subhub-aside p { font-size: 0.875rem; color: rgba(255,255,255,0.8); line-height: 1.6; margin-bottom: 0.5rem; } .academy-subhub-aside a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--accent-on-dark); } .academy-subhub-aside a:hover { color: var(--accent-on-dark); } .academy-spoke-list { display: flex; flex-direction: column; gap: 0.75rem; } .academy-spoke-row { display: flex; align-items: flex-start; gap: 1rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; text-decoration: none; color: inherit; transition: border-color 0.2s; } .academy-spoke-row:hover { border-color: var(--orange); } .academy-spoke-num { font-size: 0.85rem; font-weight: 800; color: var(--navy); background: var(--secondary); border-radius: 8px; padding: 0.35rem 0.55rem; } .academy-spoke-text { flex: 1; } .academy-spoke-text strong { display: block; color: var(--navy); font-size: 1rem; margin-bottom: 0.2rem; } .academy-spoke-text small { color: var(--muted-foreground); font-size: 0.85rem; line-height: 1.5; } .academy-spoke-arrow { color: var(--orange); font-weight: 700; } @media (max-width: 1024px) { .academy-cat-grid { grid-template-columns: repeat(2, 1fr); } .academy-strip-grid { grid-template-columns: 1fr; } .academy-start-list { grid-template-columns: 1fr; } } @media (max-width: 900px) { .academy-layout { grid-template-columns: 1fr; } .academy-sidebar { position: static; } .kb-layout { grid-template-columns: 1fr; } .kb-sidebar { position: static; max-height: none; } .blog-layout { grid-template-columns: 1fr; } .blog-sidebar { position: static; margin-bottom: 2rem; } .academy-subhub-layout { grid-template-columns: 1fr; } .academy-subhub-aside { position: static; } } @media (max-width: 768px) { .academy-cat-grid { grid-template-columns: 1fr; } } .schedule-section { padding: 8rem 0 var(--sp-80); } .schedule-grid { display: grid; grid-template-columns: 1.45fr 1fr; grid-template-rows: min-content 1fr; gap: 4rem; align-items: start; } .schedule-intro { grid-column: 1; grid-row: 1; } .schedule-widget { grid-column: 2; grid-row: 1 / span 2; } .schedule-grid > .schedule-proof { grid-column: 1; grid-row: 2; align-self: start; margin-top: 0; } .schedule-intro .eyebrow-orange { margin-bottom: 0.75rem; } .schedule-title { font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 800; color: var(--navy); line-height: 1.08; margin: 0 0 1.25rem; } .schedule-sub { font-size: 1.125rem; color: var(--muted-foreground); line-height: 1.6; max-width: 46ch; margin: 0 0 2.25rem; } .schedule-checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; } .schedule-checks li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 1.0625rem; color: var(--navy); line-height: 1.5; } .schedule-checks li i { color: var(--orange); font-size: 1.3rem; flex-shrink: 0; margin-top: 0.05rem; } .schedule-proof { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border); } .schedule-reviews { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.75rem; } .schedule-review-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; } .schedule-review-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; } .schedule-review-head .review-avatar-sm { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .schedule-review-meta { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; } .schedule-review-meta strong { font-size: 0.95rem; color: var(--navy); } .schedule-review-meta span { font-size: 0.8rem; color: var(--muted-foreground); } .schedule-review-head .platform-badge { flex-shrink: 0; display: inline-flex; } .schedule-review-head .platform-badge img { width: 26px; height: 26px; } .schedule-review-stars { color: #f5a623; font-size: 1rem; letter-spacing: 1px; margin-bottom: 0.5rem; } .schedule-review-quote { font-size: 0.95rem; color: var(--navy); line-height: 1.55; margin: 0; } .schedule-awards { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; } .schedule-awards img { height: 60px; width: auto; } .schedule-widget { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 12px 40px rgba(2, 8, 23, 0.08); } .schedule-widget .calendly-inline-widget { width: 100%; } @media (max-width: 900px) { .schedule-section { padding: 6.5rem 0 var(--sp-64); } .schedule-grid { grid-template-columns: 1fr; grid-template-rows: auto; gap: 2.5rem; } .schedule-intro { position: static; grid-column: auto; grid-row: auto; } .schedule-widget { grid-column: auto; grid-row: auto; } .schedule-grid > .schedule-proof { grid-column: auto; grid-row: auto; } } @media (max-width: 560px) { .schedule-checks { grid-template-columns: 1fr; gap: 0.9rem; } .schedule-awards img { height: 52px; } } .kb-spoke-hero { background: var(--background); padding: 7rem 1rem 2rem; text-align: left; } .kb-spoke-hero .container-wrx { margin-inline: auto; } .kb-spoke-hero h1 { color: var(--navy); } .kb-spoke-hero .subhead { color: var(--muted-foreground); max-width: 46rem; margin-left: 0; } .kb-body { padding: 0 0 var(--sp-80); } .kb-layout { display: grid; grid-template-columns: 260px 1fr; gap: 3rem; align-items: start; } .kb-main { max-width: 46rem; } .kb-sidebar { position: sticky; top: 6rem; align-self: start; max-height: calc(100vh - 7rem); overflow-y: auto; } .kb-toc-block { background: var(--secondary); border-left: 3px solid var(--orange); border-radius: var(--radius); padding: 0.9rem 1rem; margin-bottom: 1rem; } .kb-toc-label { display: block; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--navy); margin-bottom: 0.5rem; } .kb-toc-block ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.3rem; } .kb-toc-block a { color: var(--muted-foreground); text-decoration: none; font-size: 0.8rem; line-height: 1.35; } .kb-toc-block a:hover { color: var(--orange); } .kb-prose h2 { margin-top: var(--sp-48); margin-bottom: var(--sp-16); color: var(--navy); font-size: 1.5rem; font-weight: 900; scroll-margin-top: 6rem; } .kb-prose h3 { margin-top: var(--sp-32); margin-bottom: var(--sp-12); color: var(--navy); font-size: 1.25rem; font-weight: 700; scroll-margin-top: 6rem; } .kb-prose p { margin-bottom: var(--sp-24); color: var(--foreground); line-height: 1.8; } .kb-prose ul, .kb-prose ol { margin-bottom: var(--sp-24); padding-left: 1.25rem; } .kb-prose ul { list-style: disc; } .kb-prose ol { list-style: decimal; } .kb-prose ol li { margin: .4rem 0; } .kb-prose li { margin-bottom: 0.5rem; color: var(--foreground); line-height: 1.7; } .kb-prose a { color: var(--orange); text-decoration: underline; } .kb-prose a:hover { color: var(--navy); } .kb-faq { margin-top: var(--sp-48); scroll-margin-top: 6rem; } .kb-faq h2 { color: var(--navy); font-size: 1.5rem; font-weight: 900; margin-bottom: var(--sp-24); } .kb-figure { margin: 1.5rem 0; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06); } .kb-figure img { display: block; width: 100%; height: auto; } .kb-figure video { display: block; width: 100%; height: auto; } .kb-figure figcaption { padding: .6rem .9rem; font-size: .85rem; color: #64748b; border-top: 1px solid #e2e8f0; background: #f8fafc; } .kb-figure--phone { max-width: 300px; margin-left: auto; margin-right: auto; border: 0; border-radius: 0; overflow: visible; background: transparent; box-shadow: none; } .kb-figure--phone img, .kb-figure--phone video { width: 100%; border-radius: 28px; box-shadow: 0 14px 40px rgba(15,23,42,.16); } .kb-figure--phone figcaption { border-top: 0; background: transparent; text-align: center; padding-top: .8rem; } .table-wrap { margin: 1.5rem 0; overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 12px; } .table-wrap table { width: 100%; border-collapse: collapse; font-size: .95rem; } .table-wrap thead th { text-align: left; font-weight: 700; color: #0f172a; background: #f1f5f9; padding: .75rem 1rem; border-bottom: 1px solid #e2e8f0; } .table-wrap tbody td { padding: .7rem 1rem; border-bottom: 1px solid #eef2f7; color: #334155; vertical-align: top; } .table-wrap tbody tr:last-child td { border-bottom: 0; } .table-wrap tbody tr:nth-child(even) { background: #f8fafc; } .table-wrap td strong, .table-wrap th strong { color: #0f172a; } .academy-prose ol { padding-left: 1.25rem; } .academy-prose ol li { margin: .4rem 0; } ol.kb-steps { list-style: none; counter-reset: kb-step; padding: 0; margin: 1.1rem 0 1.6rem; } ol.kb-steps > li { counter-increment: kb-step; position: relative; padding: .15rem 0 1.1rem 3rem; margin: 0; line-height: 1.55; } ol.kb-steps > li::before { content: counter(kb-step); position: absolute; left: 0; top: 0; width: 1.95rem; height: 1.95rem; border-radius: 50%; background: #1d4ed8; color: #fff; font-weight: 700; font-size: .9rem; display: flex; align-items: center; justify-content: center; } ol.kb-steps > li:not(:last-child)::after { content: ""; position: absolute; left: .95rem; top: 2.1rem; bottom: -.1rem; width: 2px; background: #dbe3ef; } ol.kb-steps > li:last-child { padding-bottom: 0; } .kb-sidebar .kb-contact-card { margin-top: 1.25rem; padding: 1rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; } .kb-sidebar .kb-contact-card p { margin: .35rem 0 .75rem; font-size: .9rem; color: #64748b; } .kb-contact-btn { display: inline-block; padding: .5rem .9rem; border-radius: 8px; background: #1d4ed8; color: #fff; font-weight: 600; font-size: .9rem; text-decoration: none; } .kb-contact-btn:hover { background: #1e40af; } .kb-contact-strip { text-align: center; padding: 3rem 1rem; background: #f8fafc; border-top: 1px solid #e2e8f0; } .kb-contact-strip h2 { margin: 0 0 .5rem; } .kb-contact-strip p { margin: 0 0 1.25rem; color: #64748b; } .kb-search-section { padding: 1.5rem 0; } .kb-search { position: relative; max-width: 640px; margin: 0 auto; } .kb-search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: #94a3b8; } .kb-search input { width: 100%; padding: .9rem 1rem .9rem 2.9rem; border: 1px solid #cbd5e1; border-radius: 999px; font-size: 1rem; } .kb-search input:focus { outline: none; border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(29,78,216,.15); } .kb-search-results { max-width: 640px; margin: .75rem auto 0; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.08); } .kb-search-hit { display: block; padding: .8rem 1rem; border-bottom: 1px solid #f1f5f9; text-decoration: none; color: inherit; } .kb-search-hit:last-child { border-bottom: 0; } .kb-search-hit:hover { background: #f8fafc; } .kb-search-hit .kb-search-cat { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #ea580c; font-weight: 700; } .kb-search-hit strong { display: block; } .kb-search-hit small { color: #64748b; } .kb-search-empty { padding: 1rem; margin: 0; color: #64748b; } .wx-tool { --app-text:#1A1D1F; --app-muted:#81858B; --app-border:#E6E8EB; --app-blue:#007AFF; --app-radius:10px; --app-shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.05); --app-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; } .wx-tool .calc-wrap { max-width:820px; margin:28px auto 0; padding:0 24px; } .wx-tool .calc { font-family:var(--app-font); background:#fff; border:1px solid var(--app-border); border-radius:var(--app-radius); box-shadow:var(--app-shadow); overflow:hidden; } .wx-tool .calc-body { display:grid; grid-template-columns:1.15fr 1fr; } @media (max-width:640px) { .wx-tool .calc-body { grid-template-columns:1fr; } } .wx-tool .calc-in { padding:20px 22px 12px; } .wx-tool .calc-out { padding:24px 22px; background:radial-gradient(120% 120% at 80% 20%, #123a68 0%, #0a2246 60%, #071a37 100%); color:#fff; display:flex; flex-direction:column; justify-content:center; } .wx-tool .seg { display:flex; gap:4px; background:#f1f4f7; border-radius:9px; padding:4px; margin-bottom:18px; flex-wrap:wrap; } .wx-tool .seg button { flex:1; min-width:72px; border:none; background:none; font-family:var(--app-font); font-size:12.5px; font-weight:600; color:var(--app-muted); padding:8px 4px; border-radius:6px; cursor:pointer; } .wx-tool .seg button.on { background:#fff; color:var(--app-blue); box-shadow:0 1px 2px rgba(16,24,40,.12); } .wx-tool .calc label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--app-muted); margin:0 0 6px; } .wx-tool .fieldwrap { margin-bottom:13px; } .wx-tool .row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .wx-tool .row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; } .wx-tool .inbox { position:relative; } .wx-tool .inbox .u { position:absolute; top:50%; transform:translateY(-50%); right:11px; color:var(--app-muted); font-size:12.5px; pointer-events:none; } .wx-tool .inbox .u.l { left:12px; right:auto; } .wx-tool .calc input { width:100%; font-family:var(--app-font); font-size:15px; color:var(--app-text); padding:10px 12px; min-height:42px; border:1px solid var(--app-border); border-radius:8px; background:#fff; } .wx-tool .calc input.pad-l { padding-left:24px; } .wx-tool .calc input.pad-r { padding-right:30px; } .wx-tool .calc input:focus, .wx-tool .calc select:focus { outline:none; border-color:var(--app-blue); box-shadow:0 0 0 3px rgba(0,122,255,.15); } .wx-tool .calc select { width:100%; font-family:var(--app-font); font-size:15px; color:var(--app-text); padding:10px 12px; min-height:42px; border:1px solid var(--app-border); border-radius:8px; background:#fff; cursor:pointer; } .wx-tool .hint { font-size:11px; color:var(--app-muted); margin:4px 0 0; } .wx-tool .r-big { font-size:38px; font-weight:800; line-height:1; } .wx-tool .r-big small { display:block; font-size:12px; font-weight:600; color:#9fc2ec; text-transform:uppercase; letter-spacing:.05em; margin-top:7px; } .wx-tool .r-rows { margin-top:20px; border-top:1px solid rgba(255,255,255,.15); padding-top:12px; } .wx-tool .r-row { display:flex; justify-content:space-between; padding:6px 0; font-size:14.5px; } .wx-tool .r-row .l { color:#cfe0f3; } .wx-tool .r-row .v { font-weight:700; } .wx-tool .opt { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--app-text); margin:2px 0 12px; cursor:pointer; text-transform:none; letter-spacing:0; } .wx-tool .opt input { width:16px; height:16px; min-height:0; padding:0; accent-color:var(--app-blue); } .wx-tool .note { padding:14px 22px 18px; border-top:1px solid var(--app-border); font-size:12px; color:var(--app-muted); } .wx-tool .calc-dl { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:16px 22px; border-top:1px solid var(--app-border); } .wx-tool .calc-dl-btn { font-family:var(--app-font); font-size:14px; font-weight:600; color:#fff; background:var(--app-blue); border:none; border-radius:8px; padding:11px 18px; min-height:44px; cursor:pointer; transition:background .15s ease; } .wx-tool .calc-dl-btn:hover { background:#006ae0; } .wx-tool .calc-dl-btn:disabled { opacity:.6; cursor:default; } .wx-tool .calc-dl-hint { font-size:12.5px; color:var(--app-muted); flex:1; min-width:180px; } .wx-tool .arow { display:grid; grid-template-columns:1.4fr 1fr 1fr 64px 26px; gap:8px; align-items:center; margin-bottom:8px; } .wx-tool .arow input { width:100%; min-height:38px; padding:8px 10px; font-size:14px; font-family:var(--app-font); color:var(--app-text); border:1px solid var(--app-border); border-radius:8px; background:#fff; } .wx-tool .arow input:focus { outline:none; border-color:var(--app-blue); box-shadow:0 0 0 3px rgba(0,122,255,.15); } .wx-tool .arow .aval { font-size:13px; font-weight:700; color:var(--app-text); text-align:right; white-space:nowrap; } .wx-tool .arow .adel { background:none; border:none; color:var(--app-muted); font-size:20px; line-height:1; cursor:pointer; padding:0; } .wx-tool .arow .adel:hover { color:#d64545; } .wx-tool .arow-head { display:grid; grid-template-columns:1.4fr 1fr 1fr 64px 26px; gap:8px; font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--app-muted); margin-bottom:6px; } .wx-tool .arow-head span:nth-child(2),.wx-tool .arow-head span:nth-child(3),.wx-tool .arow-head span:nth-child(4) { text-align:right; } .wx-tool .calc-add { background:none; border:1px dashed var(--app-border); color:var(--app-blue); font-family:var(--app-font); font-size:13px; font-weight:600; padding:9px 14px; border-radius:8px; cursor:pointer; margin:2px 0 14px; } .wx-tool .calc-add:hover { border-color:var(--app-blue); } .wx-tool .wx-price { border-top:1px solid var(--app-border); padding:14px 22px; } .wx-tool .wx-price-toggle { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--app-text); cursor:pointer; text-transform:none; letter-spacing:0; margin:0; } .wx-tool .wx-price-toggle input { width:16px; height:16px; min-height:0; padding:0; accent-color:var(--app-blue); } .wx-tool .wx-price-body { margin-top:12px; } .wx-tool .wx-price-row { display:grid; grid-template-columns:1fr 108px 88px; gap:10px; align-items:center; padding:7px 0; border-bottom:1px solid var(--app-border); } .wx-tool .wx-price-name { font-size:13px; color:var(--app-text); } .wx-tool .wx-price-name em { color:var(--app-muted); font-style:normal; font-size:12px; } .wx-tool .wx-price-in { position:relative; } .wx-tool .wx-price-cur { position:absolute; left:9px; top:50%; transform:translateY(-50%); color:var(--app-muted); font-size:13px; pointer-events:none; } .wx-tool .wx-price-in input { width:100%; padding:7px 8px 7px 20px; min-height:34px; border:1px solid var(--app-border); border-radius:7px; background:#fff; font-family:var(--app-font); font-size:13px; color:var(--app-text); } .wx-tool .wx-price-in input:focus { outline:none; border-color:var(--app-blue); box-shadow:0 0 0 3px rgba(0,122,255,.15); } .wx-tool .wx-price-line { text-align:right; font-weight:700; font-size:13px; color:var(--app-text); } .wx-tool .wx-price-total { display:flex; justify-content:space-between; align-items:center; padding:12px 0 2px; } .wx-tool .wx-price-total span:first-child { color:var(--app-muted); text-transform:uppercase; font-size:11px; letter-spacing:.03em; font-weight:600; } .wx-tool .wx-price-total-v { font-weight:800; color:#002855; font-size:18px; } .wx-tool .wx-price-note { margin:10px 0 0; font-size:11.5px; color:var(--app-muted); font-style:italic; } .wxdl-overlay { position:fixed; inset:0; z-index:1000; background:rgba(0,26,58,.55); display:none; align-items:center; justify-content:center; padding:20px; } .wxdl-overlay.show { display:flex; } .wxdl-modal { width:100%; max-width:460px; background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 24px 64px rgba(0,26,58,.45); font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; animation:wxdlPop .18s ease-out; } @keyframes wxdlPop { from { transform:translateY(8px) scale(.98); opacity:0; } to { transform:none; opacity:1; } } .wxdl-top { background:#002855; padding:18px 22px; display:flex; align-items:center; } .wxdl-top svg { height:22px; width:auto; } .wxdl-x { margin-left:auto; background:none; border:none; color:#fff; font-size:24px; line-height:1; cursor:pointer; opacity:.8; } .wxdl-x:hover { opacity:1; } .wxdl-body { padding:26px 26px 24px; text-align:center; } .wxdl-spin { width:46px; height:46px; border-radius:50%; border:4px solid rgba(0,122,255,.18); border-top-color:#007AFF; margin:2px auto 16px; animation:wxdlSpin .8s linear infinite; } @keyframes wxdlSpin { to { transform:rotate(360deg); } } .wxdl-check { width:48px; height:48px; border-radius:50%; background:#12b76a; color:#fff; display:flex; align-items:center; justify-content:center; font-size:26px; margin:0 auto 14px; } .wxdl-body h3 { margin:0 0 6px; font-size:19px; color:#002855; } .wxdl-body > div > p { margin:0 0 4px; color:#5b6b7b; font-size:14px; } .wxdl-again { background:none; border:none; color:#007AFF; font:inherit; cursor:pointer; text-decoration:underline; padding:0; } .wxdl-promo { background:rgba(0,122,255,.08); border-radius:12px; padding:18px; text-align:left; margin-top:18px; } .wxdl-promo h4 { margin:0 0 6px; font-size:15px; color:#002855; } .wxdl-promo p { margin:0 0 14px; font-size:13.5px; color:#33506e; line-height:1.5; } .wxdl-cta { display:inline-block; background:#007AFF; color:#fff; text-decoration:none; font-weight:700; font-size:14px; padding:11px 18px; border-radius:8px; } .wxdl-cta:hover { background:#006ae0; } .wxdl-fine { display:block; margin-top:10px; font-size:12px; color:#5b6b7b; } .wx-tool .modal, .wx-tool .wx-modal, .wxdl-modal { max-width:540px !important; } .wx-tool .modal-body, .wx-tool .wx-modal-body, .wxdl-body { padding:38px 34px 30px !important; } .wx-tool .spinner, .wx-tool .wx-spinner, .wxdl-spin { width:70px !important; height:70px !important; border-width:6px !important; margin:8px auto 24px !important; } .wx-tool .modal-body h3, .wx-tool .wx-modal-body h3, .wxdl-body h3 { font-size:23px !important; margin-bottom:8px !important; } .tpl-anim { max-width: 760px; margin: 0 auto; } .tpl-frame { border: 1px solid #dce3ea; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 60px -28px rgba(0,40,85,0.35); background: #fff; } .tpl-bar { display: flex; align-items: center; gap: 7px; padding: 9px 14px; background: #eef2f7; border-bottom: 1px solid #dce3ea; } .tpl-dot { width: 9px; height: 9px; border-radius: 50%; background: #cdd6e0; } .tpl-file { margin-left: 8px; font-size: 12px; color: #5b6b7b; font-weight: 600; } .tpl-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #002855; color: #fff; padding: 15px 18px; } .tpl-co { font-size: 18px; font-weight: 800; letter-spacing: -.2px; display: inline-flex; align-items: center; min-width: 0; } .tpl-co .v.tpl-ph { color: rgba(255,255,255,0.45); } .tpl-co .v.filled { color: #fff; } .tpl-title { font-size: 15px; font-weight: 800; letter-spacing: .6px; color: #fff; white-space: nowrap; } .tpl-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 9px 18px; background: #f5f8fc; border-bottom: 1px solid #e4ebf2; font-size: 12px; color: #5b6b7b; font-weight: 600; } .tpl-tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .tpl-tbl th { background: #003a75; color: #fff; text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; padding: 8px 12px; white-space: nowrap; } .tpl-tbl th.r, .tpl-tbl td.r { text-align: right; } .tpl-tbl th.c, .tpl-tbl td.c { text-align: center; } .tpl-tbl td { padding: 8px 12px; border-bottom: 1px solid #e9eef4; color: #1c2733; } .tpl-tbl tbody tr:nth-child(even) td { background: #f7fafd; } .tpl-tbl td.cell { position: relative; font-variant-numeric: tabular-nums; } .tpl-tbl td.cell.sel { box-shadow: inset 0 0 0 2px #007AFF; background: #eaf3ff !important; border-radius: 3px; } .tpl-tbl td.calc { font-weight: 700; font-variant-numeric: tabular-nums; } .tpl-tbl td.calc.under { color: #0a7d33; } .tpl-tbl td.calc.over { color: #d64545; } .tpl-tbl td.calc.zero { color: #81858b; } .tpl-tbl td.check { text-align: center; } .tpl-tbl td.check.done .v { color: #0a7d33; font-weight: 800; } .tpl-foot td { border-top: 2px solid #002855; border-bottom: none; font-weight: 800; color: #002855; background: #eaf1fb !important; padding: 10px 12px; } .tpl-result td { background: #002855 !important; color: #fff; border: none; font-weight: 800; padding: 12px 14px; } .tpl-result .v { font-size: 16px; } .tpl-result .tpl-sub { font-weight: 500; color: #9fc2ec; font-size: 11px; margin-left: 6px; } .tpl-cap { text-align: center; color: #5b6b7b; font-size: 0.85rem; margin-top: 0.85rem; } .tpl-anim .cur { display: none; width: 2px; height: 16px; background: #fff; margin-left: 2px; vertical-align: -3px; animation: tplBlink 1s step-end infinite; } .tpl-anim td.cell .cur { display: none; height: 14px; background: #007AFF; vertical-align: -2px; } .tpl-anim td.cell.sel .cur { display: inline-block; } .tpl-anim .v.flash { animation: tplFlash .5s ease; } @keyframes tplBlink { 50% { opacity: 0; } } @keyframes tplFlash { 0% { background: #fff2c9; } 100% { background: transparent; } } @media (max-width: 560px) { .tpl-tbl { font-size: 11.5px; } .tpl-tbl th, .tpl-tbl td { padding: 6px 8px; } .tpl-meta { flex-direction: column; gap: 2px; } .tpl-co { font-size: 14px; } .tpl-title { font-size: 12px; } } .wx-tool .modal-body > div > p, .wx-tool .wx-modal-body > div > p, .wxdl-body > div > p { font-size:15px !important; } .tool-disclaimer { border-top:1px solid #e6e8eb; margin-top:8px; padding:22px 0 10px; background:#fafbfc; } .tool-disclaimer .container-wrx { max-width:900px; } .tool-disclaimer p { margin:0; font-size:12px; line-height:1.65; color:#6b7885; } .tool-disclaimer strong { color:#33414d; } .tool-disclaimer a { color:#007AFF; text-decoration:underline; } .wx-tool .grader { font-family:var(--app-font); background:#fff; border:1px solid var(--app-border); border-radius:var(--app-radius); box-shadow:var(--app-shadow); overflow:hidden; } .wx-tool .g-body { padding:6px 22px 4px; } .wx-tool .gq { padding:18px 0; border-bottom:1px solid var(--app-border); } .wx-tool .gq:last-child { border-bottom:none; } .wx-tool .gcat { font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--app-blue); font-weight:700; } .wx-tool .gq h4 { margin:4px 0 12px; font-size:15px; color:var(--app-text); font-weight:600; } .wx-tool .gopt { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--app-border); border-radius:9px; margin-bottom:8px; cursor:pointer; font-size:13.5px; color:var(--app-text); transition:border-color .12s, background .12s; } .wx-tool .gopt:hover { border-color:var(--app-blue); } .wx-tool .gopt.sel { border-color:var(--app-blue); background:rgba(0,122,255,.06); } .wx-tool .gopt input { margin-top:1px; accent-color:var(--app-blue); } .wx-tool .g-actions { display:flex; align-items:center; gap:14px; padding:16px 22px; border-top:1px solid var(--app-border); background:#fafbfc; } .wx-tool .g-btn { font-family:var(--app-font); font-size:14px; font-weight:600; color:#fff; background:var(--app-blue); border:none; border-radius:8px; padding:12px 20px; min-height:46px; cursor:pointer; } .wx-tool .g-btn:disabled { opacity:.5; cursor:default; } .wx-tool .g-progress { font-size:13px; color:var(--app-muted); } .wx-tool .g-res { padding:24px 22px; } .wx-tool .g-score { display:flex; align-items:center; gap:24px; flex-wrap:wrap; } .wx-tool .g-ring { width:118px; height:118px; flex:none; } .wx-tool .g-verdict h3 { margin:0 0 4px; font-size:22px; color:#002855; } .wx-tool .g-verdict p { margin:0; color:var(--app-muted); font-size:14px; max-width:420px; } .wx-tool .g-cats { margin-top:24px; display:grid; gap:13px; } .wx-tool .g-cl { display:flex; justify-content:space-between; font-size:13px; color:var(--app-text); margin-bottom:5px; } .wx-tool .g-cl span:last-child { color:var(--app-muted); font-weight:600; } .wx-tool .g-track { height:8px; background:var(--app-border); border-radius:5px; overflow:hidden; } .wx-tool .g-fill { height:100%; border-radius:5px; transition:width .5s ease; } .wx-tool .g-recs { margin-top:24px; } .wx-tool .g-recs h4 { font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--app-muted); margin:0 0 12px; } .wx-tool .g-rec { padding:13px 15px; border:1px solid var(--app-border); border-left:3px solid var(--app-blue); border-radius:8px; margin-bottom:10px; } .wx-tool .g-rec strong { display:block; font-size:14px; color:var(--app-text); margin-bottom:3px; } .wx-tool .g-rec p { margin:0 0 7px; font-size:13px; color:var(--app-muted); line-height:1.5; } .wx-tool .g-rec a { font-size:13px; color:var(--app-blue); font-weight:600; text-decoration:none; } .wx-tool .g-rec a:hover { text-decoration:underline; } .wx-tool .g-cta { margin-top:24px; padding:22px; background:radial-gradient(120% 120% at 80% 20%, #123a68 0%, #0a2246 60%, #071a37 100%); border-radius:12px; text-align:center; color:#fff; } .wx-tool .g-cta h4 { margin:0 0 6px; font-size:18px; } .wx-tool .g-cta p { margin:0 0 15px; font-size:13.5px; color:#cfe0f3; } .wx-tool .g-trial { display:inline-block; background:var(--app-blue); color:#fff; text-decoration:none; font-weight:700; font-size:14px; padding:12px 24px; border-radius:8px; } .wx-tool .g-trial:hover { background:#006ae0; } .wx-tool .g-res-actions { display:flex; gap:12px; justify-content:center; margin-top:16px; flex-wrap:wrap; } .wx-tool .g-ghost { background:none; border:1px solid var(--app-border); color:var(--app-text); font-family:var(--app-font); font-size:13.5px; font-weight:600; padding:11px 16px; border-radius:8px; cursor:pointer; } .wx-tool .g-ghost:hover { border-color:var(--app-blue); color:var(--app-blue); } .wx-tool .g-wiz { padding:14px 22px 4px; } .wx-tool .g-prog { height:6px; background:var(--app-border); border-radius:4px; overflow:hidden; margin:2px 0 2px; } .wx-tool .g-prog i { display:block; height:100%; background:var(--app-blue); border-radius:4px; transition:width .35s ease; } .wx-tool .g-qwrap { padding:22px 2px 8px; min-height:236px; } .wx-tool .g-nav { display:flex; align-items:center; justify-content:space-between; padding:14px 22px; border-top:1px solid var(--app-border); background:#fafbfc; } .wx-tool .g-back { background:none; border:none; color:var(--app-muted); font-family:var(--app-font); font-size:13.5px; font-weight:600; cursor:pointer; padding:8px 2px; } .wx-tool .g-back:disabled { opacity:.4; cursor:default; } .wx-tool .g-back:not(:disabled):hover { color:var(--app-blue); } .wx-tool .g-sec-h { font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--app-muted); margin:26px 0 12px; font-weight:700; } .wx-tool .g-ex { border:1px solid var(--app-border); border-radius:9px; margin-bottom:10px; overflow:hidden; } .wx-tool .g-ex-head { display:flex; align-items:center; gap:12px; padding:12px 14px; cursor:pointer; } .wx-tool .g-ex-head:hover { background:#fafbfc; } .wx-tool .g-ex-head .nm { flex:1; font-size:13.5px; font-weight:600; color:var(--app-text); } .wx-tool .g-ex-bar { width:84px; height:7px; background:var(--app-border); border-radius:5px; overflow:hidden; flex:none; } .wx-tool .g-ex-bar i { display:block; height:100%; border-radius:5px; } .wx-tool .g-ex-pct { font-size:12.5px; font-weight:700; color:var(--app-muted); width:36px; text-align:right; } .wx-tool .g-ex-chev { color:var(--app-muted); transition:transform .2s; font-size:12px; width:12px; } .wx-tool .g-ex.open .g-ex-chev { transform:rotate(180deg); } .wx-tool .g-ex-body { display:none; padding:2px 14px 15px; } .wx-tool .g-ex.open .g-ex-body { display:block; } .wx-tool .g-ex-body .intro { font-size:13px; color:var(--app-text); margin:0 0 6px; line-height:1.55; } .wx-tool .g-ex-body .lbl { font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--app-muted); font-weight:700; margin:13px 0 6px; } .wx-tool .g-ex-body ul { margin:0; padding-left:18px; } .wx-tool .g-ex-body li { font-size:13px; color:var(--app-text); margin-bottom:5px; line-height:1.5; } .wx-tool .g-ex-body .werx { margin-top:13px; padding:11px 13px; background:rgba(0,122,255,.06); border-radius:8px; font-size:13px; color:#33506e; line-height:1.5; } .wx-tool .g-ex-body .werx a { color:var(--app-blue); font-weight:600; text-decoration:none; display:inline-block; margin-top:4px; } .wx-tool .g-ex-body .werx a:hover { text-decoration:underline; } .wx-tool .hub { max-width:1140px; margin:0 auto; padding:0 24px 8px; font-family:var(--app-font); } .wx-tool .hub-feature { display:flex; gap:20px; align-items:center; padding:22px 26px; border-radius:16px; background:radial-gradient(120% 140% at 85% 15%, #123a68 0%, #0a2246 55%, #071a37 100%); color:#fff; text-decoration:none; margin:6px 0 12px; } .wx-tool .hub-feature .fic { width:58px; height:58px; border-radius:13px; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; font-size:31px; flex:none; } .wx-tool .hub-feature .ft { flex:1; min-width:0; } .wx-tool .hub-feature .tag { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#9fc2ec; margin-bottom:5px; } .wx-tool .hub-feature h3 { margin:0 0 5px; font-size:21px; } .wx-tool .hub-feature p { margin:0; font-size:13.5px; color:#cfe0f3; line-height:1.5; max-width:560px; } .wx-tool .hub-feature .go { margin-left:auto; background:var(--app-blue); color:#fff; padding:12px 20px; border-radius:9px; font-weight:700; font-size:14px; white-space:nowrap; flex:none; } @media(max-width:640px){ .wx-tool .hub-feature { flex-wrap:wrap; } .wx-tool .hub-feature .go { margin-left:0; width:100%; text-align:center; } } .wx-tool .hub-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:14px; } .wx-tool .hub-card { display:flex; flex-direction:column; padding:16px 16px 15px; border:1px solid var(--app-border); border-radius:12px; background:#fff; text-decoration:none; transition:border-color .14s, box-shadow .14s, transform .14s; } .wx-tool .hub-card:hover { border-color:var(--app-blue); box-shadow:0 6px 20px rgba(16,24,40,.08); transform:translateY(-2px); } .wx-tool .hub-card .ic { width:38px; height:38px; border-radius:9px; background:rgba(0,122,255,.1); color:var(--app-blue); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:12px; } .wx-tool .hub-card h4 { margin:0 0 5px; font-size:14.5px; color:var(--app-text); font-weight:600; } .wx-tool .hub-card p { margin:0; font-size:12.5px; color:var(--app-muted); line-height:1.45; } .wx-tool .hub-sec { scroll-margin-top:132px; } .wx-tool .hub-sec-h { font-size:19px; color:#002855; font-weight:700; margin:30px 0 4px; } .wx-tool .hub-sub-h { font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--app-muted); font-weight:700; margin:22px 0 11px; } .wx-tool .hub-count { font-size:13px; color:var(--app-muted); margin:4px 0 16px; } .wx-tool .hub-empty { padding:30px; text-align:center; color:var(--app-muted); font-size:14px; } .wx-tool .hub-nav { display:flex; flex-wrap:wrap; gap:8px; position:sticky; top:60px; background:rgba(255,255,255,.96); backdrop-filter:blur(4px); padding:12px 0; z-index:6; border-bottom:1px solid var(--app-border); margin-bottom:6px; } .wx-tool .hub-nav a { display:inline-block; padding:8px 15px; border:1px solid var(--app-border); border-radius:20px; font-size:13px; font-weight:600; color:var(--app-text); text-decoration:none; } .wx-tool .hub-nav a:hover { border-color:var(--app-blue); color:var(--app-blue); } .wx-tool .hub-search { width:100%; box-sizing:border-box; padding:13px 16px; border:1px solid var(--app-border); border-radius:11px; font-size:15px; font-family:var(--app-font); color:var(--app-text); margin-bottom:12px; } .wx-tool .hub-search:focus { outline:none; border-color:var(--app-blue); box-shadow:0 0 0 3px rgba(0,122,255,.15); } .wx-tool .hub-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; } .wx-tool .hub-chip { padding:8px 15px; border:1px solid var(--app-border); border-radius:20px; font-size:13px; font-weight:600; color:var(--app-text); cursor:pointer; background:#fff; font-family:var(--app-font); } .wx-tool .hub-chip:hover { border-color:var(--app-blue); color:var(--app-blue); } .wx-tool .hub-chip.on { background:var(--app-blue); color:#fff; border-color:var(--app-blue); } .wx-tool .hub-bar { position:sticky; top:60px; z-index:6; background:rgba(255,255,255,.97); backdrop-filter:blur(4px); padding:12px 0 11px; border-bottom:1px solid var(--app-border); margin-bottom:4px; } .wx-tool .hub-bar .hub-search { margin-bottom:10px; } .wx-tool .hub-bar .hub-chips { margin-bottom:0; align-items:center; } .wx-tool .hub-bar .hub-tpl { margin-left:auto; font-size:13px; font-weight:600; color:var(--app-blue); text-decoration:none; padding:8px 4px; white-space:nowrap; } .wx-tool .hub-bar .hub-tpl:hover { text-decoration:underline; } .wx-tool .calc-trust { text-align:center; font-size:12.5px; color:#5b6b7b; margin:14px 0 0; } .wx-tool .wx-overlay { position:fixed; inset:0; z-index:1000; background:rgba(0,26,58,.55); display:none; align-items:center; justify-content:center; padding:20px; } .wx-tool .wx-overlay.show { display:flex; } .wx-tool .wx-modal { width:100%; max-width:460px; background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 24px 64px rgba(0,26,58,.45); animation:wxPop .18s ease-out; } @keyframes wxPop { from { transform:translateY(8px) scale(.98); opacity:0; } to { transform:none; opacity:1; } } .wx-tool .wx-modal-top { background:#002855; padding:18px 22px; display:flex; align-items:center; } .wx-tool .wx-modal-top svg { height:22px; width:auto; } .wx-tool .wx-modal-x { margin-left:auto; background:none; border:none; color:#fff; font-size:24px; line-height:1; cursor:pointer; opacity:.8; } .wx-tool .wx-modal-x:hover { opacity:1; } .wx-tool .wx-modal-body { padding:26px 26px 24px; text-align:center; } .wx-tool .wx-spinner { width:46px; height:46px; border-radius:50%; border:4px solid rgba(0,122,255,.18); border-top-color:var(--app-blue); margin:2px auto 16px; animation:wxSpin .8s linear infinite; } @keyframes wxSpin { to { transform:rotate(360deg); } } .wx-tool .wx-check { width:48px; height:48px; border-radius:50%; background:#12b76a; color:#fff; display:flex; align-items:center; justify-content:center; font-size:26px; margin:0 auto 14px; } .wx-tool .wx-modal-body h3 { margin:0 0 6px; font-size:19px; color:#002855; } .wx-tool .wx-modal-body > div > p { margin:0 0 4px; color:var(--app-muted); font-size:14px; } .wx-tool .wx-promo { background:rgba(0,122,255,.08); border-radius:12px; padding:18px; text-align:left; margin-top:18px; } .wx-tool .wx-promo h4 { margin:0 0 6px; font-size:15px; color:#002855; } .wx-tool .wx-promo p { margin:0 0 14px; font-size:13.5px; color:#33506e; line-height:1.5; } .wx-tool .wx-promo .cta { display:inline-block; background:var(--app-blue); color:#fff; text-decoration:none; font-weight:700; font-size:14px; padding:11px 18px; border-radius:8px; } .wx-tool .wx-promo .cta:hover { background:#006ae0; } .wx-tool .wx-promo .fine { display:block; margin-top:10px; font-size:12px; color:var(--app-muted); } .wx-tool .wx-linklike { background:none; border:none; color:var(--app-blue); font:inherit; cursor:pointer; text-decoration:underline; padding:0; } .data-example { max-width: 640px; margin-left: auto; margin-right: auto; } .ex-doc { background: #fff; border: 1px solid #e2e6ea; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 28px rgba(16,24,40,.08); font-size: .92rem; } .ex-doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; background: #1a1d1f; color: #fff; padding: 14px 20px; } .ex-doc-title { font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; } .ex-doc-sub { color: #b9bdc2; font-size: .78rem; margin-top: 3px; } .ex-doc-brand { text-align: right; } .ex-doc-co { font-weight: 700; font-size: .85rem; } .ex-doc-proj { color: #b9bdc2; font-size: .78rem; margin-top: 3px; } .ex-table { width: 100%; border-collapse: collapse; } .ex-table td { padding: 9px 20px; border-bottom: 1px solid #eef1f4; } .ex-table td.ex-num, .ex-num { color: #81858b; font-weight: 700; font-size: .75rem; width: 2em; font-variant-numeric: tabular-nums; } .ex-table td.ex-amt { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .ex-total { display: flex; justify-content: space-between; align-items: center; background: #eaf3ff; padding: 12px 20px; font-weight: 800; } .ex-total-label .ex-num { margin-right: 6px; } .ex-total-amt { color: #0069dd; font-size: 1.08rem; font-variant-numeric: tabular-nums; } .ex-foot { padding: 10px 20px; color: #5c6066; font-size: .8rem; border-top: 1px solid #eef1f4; } .ex-caption { color: #81858b; font-size: .85rem; margin-top: 10px; text-align: center; } @media (max-width: 560px) { .ex-doc-head { flex-direction: column; } .ex-doc-brand { text-align: left; } .ex-table td { padding: 8px 14px; } } .ex-table.ex-cols thead th { padding: 8px 20px; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #81858b; font-weight: 700; text-align: left; border-bottom: 1px solid #e2e6ea; } .ex-table.ex-cols thead th:nth-child(n+3) { text-align: right; } .ex-neg { color: #d92d20; }