: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; } .site-logo img { height: 28px; } .nav-desktop { display: flex; align-items: center; gap: 2rem; } .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; } .nav-desktop a:hover, .nav-desktop button:hover { color: #fff; } .nav-right { display: flex; align-items: center; gap: 0.75rem; } .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) { 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), .nav-dropdown:focus-within > .nav-dropdown-panel:not(.industries-mega):not(.resources-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; } .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; } .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: 1.5fr 1fr 1fr 1fr 1.05fr; gap: 2.5rem; margin-bottom: 2.5rem; } .footer-brand-col { max-width: 18rem; } .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; } .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(4, 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: 1024px) { .nav-demo { display: none; } } @media (max-width: 768px) { .nav-desktop { display: none; } .nav-mobile-btn { display: block; } .nav-right .btn-primary { display: none; } .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) { .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; } .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); } .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; } .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; } }