/* * Reversible UI UX Pro Max experiment. * Active only when is set by the preview query. */ html[data-theme="pro-max"] { --canvas: #f6f9ff; --surface: #ffffff; --ink: #0a1d38; --ink-soft: #4a607c; --accent: #1f5bea; --accent-strong: #1248ca; --accent-pale: #eaf2ff; --line: #c7d7ea; --night: #071e38; } html[data-theme="pro-max"] body { background: #fff; } html[data-theme="pro-max"] .site-header { background: rgba(255, 255, 255, .96); } html[data-theme="pro-max"] .nav-shell { min-height: 72px; } html[data-theme="pro-max"] .hero { min-height: 0; padding: 92px 0 110px; background: linear-gradient(rgba(31, 91, 234, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 91, 234, .055) 1px, transparent 1px), var(--canvas); background-size: 48px 48px; } html[data-theme="pro-max"] .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 64px; } html[data-theme="pro-max"] .hero-copy { max-width: 1000px; margin-inline: auto; text-align: center; } html[data-theme="pro-max"] .hero .eyebrow { justify-content: center; } html[data-theme="pro-max"] .hero h1 { max-width: 16ch; margin-inline: auto; font-size: clamp(58px, 6.3vw, 88px); line-height: .98; text-wrap: balance; } html[data-theme="pro-max"] .hero-lede { max-width: 760px; margin-inline: auto; text-wrap: pretty; } html[data-theme="pro-max"] .hero-actions { justify-content: center; } html[data-theme="pro-max"] .workflow { width: min(100%, 1120px); min-height: 500px; margin-inline: auto; border: 1px solid #23466d; border-radius: 5px; overflow: hidden; background: var(--night); box-shadow: 0 26px 70px rgba(7, 30, 56, .16); } html[data-theme="pro-max"] .workflow::before { inset: 0; opacity: .55; background-image: linear-gradient(rgba(139, 179, 226, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 179, 226, .11) 1px, transparent 1px); background-size: 32px 32px; mask-image: none; } html[data-theme="pro-max"] .workflow::after { right: 18px; bottom: 18px; } html[data-theme="pro-max"] .workflow-label { top: 24px; left: 28px; color: #e8f2ff; border-color: #385b80; background: #102f50; } html[data-theme="pro-max"] .voice-card { top: 166px; left: 4%; width: 29%; } html[data-theme="pro-max"] .progress-card { top: 154px; right: auto; left: 36%; width: 29%; } html[data-theme="pro-max"] .output-card { right: 4%; bottom: auto; width: 27%; min-height: 148px; } html[data-theme="pro-max"] .blog-card { top: 32px; left: auto; } html[data-theme="pro-max"] .social-card { top: auto; bottom: 24px; } html[data-theme="pro-max"] .connector-one, html[data-theme="pro-max"] .connector-two { top: 237px; right: auto; width: 4%; height: 0; border-width: 2px 0 0; border-radius: 0; } html[data-theme="pro-max"] .connector-one { left: 32%; } html[data-theme="pro-max"] .connector-two { left: 65%; } html[data-theme="pro-max"] .connector-one::after, html[data-theme="pro-max"] .connector-two::after { right: -1px; bottom: -5px; left: auto; transform: rotate(-45deg); } html[data-theme="pro-max"] .flow-card { box-shadow: 9px 10px 0 rgba(3, 16, 31, .2); } html[data-theme="pro-max"] .microcopy { margin-top: 22px; } html[data-theme="pro-max"] #content-system { background: #fff; } html[data-theme="pro-max"] .spotlight-grid { grid-template-columns: minmax(0, 1fr); gap: 60px; } html[data-theme="pro-max"] .spotlight-copy { max-width: 1060px; } html[data-theme="pro-max"] .spotlight-copy > p { max-width: 720px; } html[data-theme="pro-max"] .benefit-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 46px 0 36px; background: var(--line); border: 1px solid var(--line); } html[data-theme="pro-max"] .benefit { grid-template-columns: 1fr; gap: 18px; padding: 28px; background: #fff; } html[data-theme="pro-max"] .input-output-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-top: 4px solid var(--accent); } html[data-theme="pro-max"] .panel-label { grid-column: 1 / -1; margin: 0; padding: 20px 24px; border-bottom: 1px solid var(--line); } html[data-theme="pro-max"] .io-row, html[data-theme="pro-max"] .io-row:first-of-type { padding: 28px 24px; border-top: 0; border-left: 1px solid var(--line); } html[data-theme="pro-max"] .io-row:nth-child(2) { border-left: 0; } html[data-theme="pro-max"] .process-section { background: radial-gradient(circle at 50% 0, rgba(52, 118, 224, .18), transparent 42%), var(--night); } html[data-theme="pro-max"] .theme-preview-bar { color: #dbe9f8; background: var(--night); } html[data-theme="pro-max"] .theme-preview-bar .container { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 12px; font-weight: 550; } html[data-theme="pro-max"] .theme-compare { min-width: 110px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border: 0; border-left: 1px solid #315b87; border-radius: 3px; color: #fff; background: transparent; font-size: 13px; font-weight: 600; text-decoration: none; } html[data-theme="pro-max"] .theme-compare:hover, html[data-theme="pro-max"] .theme-compare:active { background: #12385e; } @media (max-width: 899px) { html[data-theme="pro-max"] .mobile-nav { inset-block-start: 72px; } html[data-theme="pro-max"] .hero { padding: 72px 0 80px; } html[data-theme="pro-max"] .hero-copy { text-align: left; } html[data-theme="pro-max"] .hero .eyebrow, html[data-theme="pro-max"] .hero-actions { justify-content: flex-start; } html[data-theme="pro-max"] .hero h1, html[data-theme="pro-max"] .hero-lede { margin-inline: 0; } html[data-theme="pro-max"] .workflow { min-height: 640px; overflow: visible; background: var(--night); } html[data-theme="pro-max"] .workflow-label { left: 24px; } html[data-theme="pro-max"] .voice-card { top: 86px; left: 7%; width: 72%; } html[data-theme="pro-max"] .progress-card { top: 245px; right: 5%; left: auto; width: 70%; } html[data-theme="pro-max"] .output-card { top: auto; bottom: 34px; width: 43%; } html[data-theme="pro-max"] .blog-card { right: auto; left: 5%; } html[data-theme="pro-max"] .social-card { right: 5%; } html[data-theme="pro-max"] .connector-one { top: 188px; right: 12%; left: auto; width: 10%; height: 58px; border-width: 2px 2px 0 0; border-radius: 0 16px 0 0; } html[data-theme="pro-max"] .connector-two { top: 336px; left: 40%; width: 12%; height: 58px; border-width: 2px 0 0 2px; border-radius: 16px 0 0 0; } html[data-theme="pro-max"] .benefit-list, html[data-theme="pro-max"] .input-output-panel { grid-template-columns: 1fr; } html[data-theme="pro-max"] .benefit { grid-template-columns: 42px 1fr; } html[data-theme="pro-max"] .panel-label { grid-column: auto; } html[data-theme="pro-max"] .io-row, html[data-theme="pro-max"] .io-row:first-of-type, html[data-theme="pro-max"] .io-row:nth-child(2) { border-top: 1px solid var(--line); border-left: 0; } } @media (max-width: 640px) { html[data-theme="pro-max"] .hero { padding: 58px 0 68px; background-size: 36px 36px; } html[data-theme="pro-max"] .hero h1 { font-size: clamp(40px, 11.5vw, 52px); } html[data-theme="pro-max"] .hero-actions .button-ghost { width: auto; } html[data-theme="pro-max"] .workflow { min-height: 620px; } html[data-theme="pro-max"] .theme-preview-bar .container { width: 100%; padding-left: 16px; } } @media (prefers-reduced-motion: reduce) { html[data-theme="pro-max"] .theme-compare { transition: none; } }