/** * EmailPerfect marketing page — critical CSS (plain, no Tailwind). * Loaded synchronously in index.html to prevent FOUC before the Vite/Tailwind bundle. * Keep in sync with index.html layout and design tokens. */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; } body { margin: 0; min-height: 100vh; background: #fafafa; color: #111827; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; } /* Matches Tailwind `hidden` until the bundle loads */ .hidden { display: none !important; } .geo-sr-summary { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } #landing-entrance-overlay { position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: #fff; opacity: 1; transition: opacity 450ms ease-out; } /* ----- Marketing shell ----- */ #static-marketing-page { padding-top: 100px; } #static-pricing-page { padding-top: 100px; background: #fafafa; } #static-toolkit-page { padding-top: 100px; background: #fafafa; } #static-security-page { padding-top: 100px; background: #fafafa; } #static-toolkit-page[hidden] { display: none !important; } #static-security-page[hidden] { display: none !important; } #marketing-header { position: fixed; top: 0; right: 0; left: 0; z-index: 100; background: transparent; } #marketing-header-inner { width: 100%; max-width: 1320px; margin-left: auto; margin-right: auto; padding: 16px 24px; } #marketing-header-shell { width: 100%; } #marketing-header-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 4px 28px; } .marketing-header-pill { display: flex; flex-direction: column; align-items: stretch; border-radius: 32px; padding: 4px; background: rgb(223 223 223 / 50%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 4px 14px rgba(17, 24, 39, 0.08); } #marketing-header-shell.is-open.marketing-header-pill { border-radius: 32px; } #marketing-header-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 22px; color: inherit; text-decoration: none; } #marketing-header-brand img { display: block; width: 22px; height: 22px; flex-shrink: 0; } #marketing-header-brand span { font-size: 16px; font-weight: 600; line-height: 1; color: #111827; } #marketing-header-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 9999px; background: transparent; cursor: pointer; } .marketing-header-menu-icon { position: relative; display: block; width: 22px; height: 14px; } .marketing-header-menu-line { position: absolute; left: 0; width: 22px; height: 2px; border-radius: 9999px; background: #111827; transition: transform 260ms cubic-bezier(0.45, 0.05, 0.55, 0.95), top 260ms cubic-bezier(0.45, 0.05, 0.55, 0.95); } .marketing-header-menu-line:first-child { top: 0; } .marketing-header-menu-line:last-child { top: 12px; } #marketing-header-shell.is-open .marketing-header-menu-line:first-child { top: 6px; transform: rotate(45deg); } #marketing-header-shell.is-open .marketing-header-menu-line:last-child { top: 6px; transform: rotate(-45deg); } #marketing-header-nav-wrap { max-height: 0; overflow: hidden; transition: max-height 320ms cubic-bezier(0.45, 0.05, 0.55, 0.95); } #marketing-header-shell.is-open #marketing-header-nav-wrap { max-height: 240px; } #marketing-header-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 0 28px; } #marketing-header-shell.is-open #marketing-header-nav { padding-bottom: 4px; } #marketing-header-nav a, #marketing-header-nav button { display: flex; align-items: center; justify-content: flex-start; width: 100%; height: auto; margin: 0; padding: 12px 0; border: 0; background: transparent; font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1.25; color: #111827; text-decoration: none; cursor: pointer; transition: opacity 150ms ease; } #marketing-header-nav a:hover, #marketing-header-nav button:hover { opacity: 0.65; } @media (min-width: 768px) { #marketing-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } #marketing-header-shell { display: contents; } #marketing-header-bar, #marketing-header-nav-wrap { display: flex; align-items: center; max-height: none; overflow: visible; border-radius: 9999px; padding: 24px 32px; background: rgb(223 223 223 / 50%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 4px 14px rgba(17, 24, 39, 0.08); } #marketing-header-bar { flex: 0 1 auto; } #marketing-header-nav-wrap { flex: 0 1 auto; } #marketing-header-toggle { display: none; } #marketing-header-nav { flex-direction: row; align-items: center; gap: 32px; min-height: 22px; padding: 0; } #marketing-header-nav a, #marketing-header-nav button { display: inline-flex; justify-content: center; width: auto; height: 22px; padding: 0; line-height: 22px; } } @media (max-width: 767px) { #static-marketing-page { padding-top: 84px; } #static-pricing-page { padding-top: 84px; } } /* Hero */ #hero-slice { position: relative; overflow: hidden; background: #eee; margin: 0; border: 0; } #hero-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2rem; width: 100%; max-width: 1320px; margin: 0 auto; padding: 2rem 1.5rem 0; text-align: center; } @media (min-width: 768px) { #hero-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 2.5rem; min-height: 580px; height: auto; padding: 48px 1.5rem; text-align: right; } } @media (min-width: 1024px) { #hero-inner { gap: 4rem; } } #hero-copy { display: flex; flex-direction: column; gap: 1.5rem; align-items: center; width: 100%; } @media (min-width: 768px) { #hero-copy { position: relative; z-index: 2; align-self: center; align-items: flex-end; width: 100%; } } #hero-headline { position: relative; width: fit-content; max-width: 100%; margin: 0; font-size: clamp(2.25rem, 10vw, 64px); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; color: #111827; } #hero-headline::after { content: '.'; position: absolute; } @media (min-width: 768px) { #hero-headline { max-width: 640px; margin-left: auto; font-size: 64px; } } #hero-subline { position: relative; width: fit-content; max-width: 500px; margin: 0; font-size: 18px; line-height: 1.625; color: #374151; } #hero-subline::after { content: '.'; position: absolute; } @media (min-width: 768px) { #hero-subline { margin-left: auto; } } #hero-no-cc { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; margin: 0; font-size: 16px; font-weight: 500; line-height: 1.4; color: #111827; } #hero-no-cc svg { flex-shrink: 0; color: #111827; } @media (min-width: 768px) { #hero-no-cc { justify-content: flex-end; } } #hero-cta-row, #properties-cta-row, #why-emailperfect-cta-row { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding-top: 0.25rem; } @media (min-width: 768px) { #hero-cta-row { justify-content: flex-end; width: auto; } } #properties-cta-row, #why-emailperfect-cta-row { padding-top: 1.5rem; } #hero-join-btn, #hero-plans-link, #properties-join-btn, #properties-plans-link, #why-emailperfect-join-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 9999px; padding: 16px 32px; font-size: 16px; font-weight: 500; line-height: 1; cursor: pointer; font-family: inherit; text-decoration: none; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; } #hero-join-btn, #properties-join-btn, #why-emailperfect-join-btn { border: 1px solid #111827; background: #111827; color: #fff; } #hero-join-btn:hover, #properties-join-btn:hover, #why-emailperfect-join-btn:hover { border-color: #374151; background: #374151; } #hero-plans-link, #properties-plans-link { border: 2px solid #111827; background: transparent; color: #111827; padding: 16px 12px 16px 32px; } #hero-plans-link:hover, #properties-plans-link:hover { background: rgba(17, 24, 39, 0.06); } #hero-plans-link svg, #properties-plans-link svg { width: 16px; height: 16px; flex-shrink: 0; } #hero-video { display: block; min-width: 0; width: 100%; max-width: none; height: auto; padding: 0; border: 0; outline: 0; box-shadow: none; background: transparent; clip-path: inset(1px); } @media (max-width: 767px) { #hero-video { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); transform: scale(1.1); transform-origin: top center; } } @media (min-width: 768px) { #hero-video { position: relative; z-index: 1; align-self: stretch; margin-left: -100px; transform: scale(1.1); transform-origin: center; } } /* Editor + properties view slices */ #editor-view-slice { position: relative; background: #fff; padding-top: 7rem; padding-bottom: 3rem; } #properties-view-slice { background: #fff; padding-top: 7rem; padding-bottom: 5rem; } @media (max-width: 639px) { #properties-view-slice { padding-top: 4rem; padding-bottom: 0; } } #editor-view-panel { position: relative; display: flex; flex-direction: column; gap: 40px; overflow: hidden; border-radius: 32px; background: #eee; } #editor-view-tabs { position: relative; z-index: 2; display: flex; flex-shrink: 0; justify-content: center; padding: 36px 24px 0; } #editor-view-tabs-track { position: relative; display: inline-flex; align-items: stretch; padding: 4px; border-radius: 9999px; background: #fff; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 4px 14px rgba(17, 24, 39, 0.08); } #editor-view-tabs-shuttle { position: absolute; top: 4px; left: 4px; z-index: 0; border-radius: 9999px; background: #111827; pointer-events: none; transition: left 280ms cubic-bezier(0.45, 0.05, 0.55, 0.95), width 280ms cubic-bezier(0.45, 0.05, 0.55, 0.95), height 280ms cubic-bezier(0.45, 0.05, 0.55, 0.95); will-change: left, width, height; } .editor-view-tab { position: relative; z-index: 1; margin: 0; padding: 12px 16px; border: 0; background: transparent; font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1; color: #111827; cursor: pointer; transition: color 200ms ease; } .editor-view-tab.is-active { color: #fff; } #editor-view-caption { display: grid; flex-shrink: 0; padding: 0 24px; text-align: center; } .editor-view-caption { grid-area: 1 / 1; margin: 0; font-size: 1.5rem; font-weight: 400; line-height: 1.3; color: #888; opacity: 0; transition: opacity 280ms ease; pointer-events: none; } .editor-view-caption.is-active { opacity: 1; } #editor-view-stage { position: relative; width: 100%; height: 40vw; overflow: hidden; max-width: 90%; margin: auto; max-height: 580px; } #editor-view-images { position: relative; width: 100%; height: 100%; } .editor-view-slide { position: absolute; bottom: 0; left: 50%; display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; opacity: 0; transform: translateX(-50%); transition: opacity 280ms ease; pointer-events: none; user-select: none; -webkit-user-drag: none; } .editor-view-slide.is-active { opacity: 1; } #properties-view-panel { position: relative; display: flex; align-items: center; justify-content: center; height: 680px; overflow: hidden; border-radius: 32px; background: #eee; } #properties-view-header { max-width: 920px; margin: 0 auto 4rem; text-align: center; } #properties-view-header h2 { margin: 0; font-size: 40px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: #101828; } #properties-view-header p { margin: 1rem auto 0; max-width: 860px; font-size: 18px; font-weight: 500; line-height: 1.5; color: #4a5565; } @media (max-width: 767px) { #properties-view-panel { height: 380px; } #properties-view-header h2 { font-size: clamp(2rem, 8vw, 2.75rem); } } #properties-view-visual { position: relative; display: block; width: 100%; max-width: 100%; transform-origin: center center; } #properties-view-image { position: relative; display: block; width: 100%; max-width: 100%; height: auto; opacity: 1; } #properties-view-flows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .properties-flow-line { fill: none; stroke: #101828; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; vector-effect: non-scaling-stroke; } .properties-flow-energy { fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; vector-effect: non-scaling-stroke; stroke-dasharray: 10 22; opacity: 0.9; animation: properties-flow-energy 1.6s linear infinite; } .properties-flow[data-flow="b"] .properties-flow-energy { animation-duration: 1.9s; animation-delay: -0.35s; } .properties-flow[data-flow="c"] .properties-flow-energy { animation-duration: 2.2s; animation-delay: -0.7s; } @keyframes properties-flow-energy { to { stroke-dashoffset: -32; } } #properties-view-visual:not(.is-revealed) { opacity: 0; transform: translateY(var(--properties-reveal-y, 120px)) scale(1.1); } #properties-view-visual.is-revealed { animation: properties-view-image-reveal 900ms ease-out forwards; } #properties-view-visual:not(.is-revealed) .properties-flow-energy { animation-play-state: paused; opacity: 0; } @keyframes properties-view-image-reveal { from { opacity: 0; transform: translateY(var(--properties-reveal-y, 120px)) scale(1.1); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (max-width: 767px) { #properties-view-visual { --properties-reveal-y: 80px; } } @media (min-width: 1400px) { #properties-view-visual { --properties-reveal-y: 200px; } } @media (prefers-reduced-motion: reduce) { #properties-view-visual.is-revealed { animation: none; opacity: 1; transform: translateY(0) scale(1); } } /* Why EmailPerfect slice */ #why-emailperfect-slice { background: #fff; padding-top: 5rem; padding-bottom: 7rem; } @media (max-width: 639px) { #why-emailperfect-slice { padding-top: 5rem; padding-bottom: 4rem; } } #why-emailperfect-inner { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 1.5rem; text-align: center; } #why-emailperfect-inner h2 { margin: 0; max-width: 920px; font-size: 40px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: #101828; } #why-emailperfect-lede { margin: 1rem 0 0; max-width: 660px; font-size: 18px; font-weight: 500; line-height: 1.5; color: #4a5565; } #why-emailperfect-stage { position: relative; width: 100%; max-width: 1100px; margin-top: 2.5rem; --why-card-height: 220px; min-height: var(--why-card-height); } #why-emailperfect-cta-row { margin-top: 2.5rem; } #why-emailperfect-tools { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; width: 100%; transition: opacity 500ms ease, visibility 500ms ease; } .why-tool-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.875rem; min-height: var(--why-card-height, 220px); padding: 1.25rem 1rem; border-radius: 24px; background: #131313; color: #fff; overflow: hidden; transition: transform 800ms cubic-bezier(0.45, 0.05, 0.55, 0.95), opacity 500ms ease; } .why-tool-mark { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; } .why-tool-logo { display: block; max-width: 100%; max-height: 100%; object-fit: contain; } .why-tool-icon { display: block; width: 40px; height: 40px; color: #fff; } .why-tool-label { position: relative; z-index: 1; font-size: 16px; font-weight: 600; line-height: 1.35; text-align: center; } .why-tool-strike { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } .why-tool-strike line { stroke: #ef4444; stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: var(--strike-len, 500); stroke-dashoffset: var(--strike-len, 500); transition: stroke-dashoffset 1000ms cubic-bezier(0.22, 1, 0.36, 1); } .why-tool-card.is-crossed .why-tool-strike line { stroke-dashoffset: 0; } #why-emailperfect-tools.is-merging .why-tool-card { z-index: 2; } #why-emailperfect-result { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 700ms ease; } #why-emailperfect-stage.is-complete #why-emailperfect-tools { opacity: 0; visibility: hidden; pointer-events: none; } #why-emailperfect-stage.is-complete #why-emailperfect-result { opacity: 1; visibility: visible; pointer-events: auto; } .why-result-card { position: relative; display: flex; align-items: center; justify-content: center; width: min(100%, 760px); min-height: var(--why-card-height, 220px); padding: 2.5rem 2rem; border-radius: 32px; background: #eee; overflow: hidden; transform: scale(0.88); } #why-emailperfect-stage.is-complete .why-result-card { animation: why-result-card-pop 900ms cubic-bezier(0.34, 1.25, 0.64, 1) forwards; } @keyframes why-result-card-pop { 0% { transform: scale(0.88); } 38% { transform: scale(1.07); } 58% { transform: scale(0.97); } 76% { transform: scale(1.03); } 90% { transform: scale(0.995); } 100% { transform: scale(1); } } .why-result-copy { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; line-height: 1.25; color: #101828; text-align: center; } .why-result-loader { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; overflow: hidden; background: #0b99ff; } .why-result-loader::before { content: ""; position: absolute; top: 0; left: 0; width: 45%; height: 100%; background: linear-gradient( 90deg, transparent 0%, #1d4ed8 25%, #0b99ff 40%, #1d4ed8 55%, #0b99ff 70%, transparent 100% ); animation: why-result-loader-wipe 1.6s linear infinite; } @keyframes why-result-loader-wipe { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } } @media (max-width: 639px) { #editor-view-slice { padding-top: 4rem; padding-bottom: 0; } .ship-emails-feature { text-align: center; } #editor-view-panel { gap: 24px; } .editor-view-caption { font-size: 1.2rem; } #why-emailperfect-tools { display: none; } #why-emailperfect-result { position: static; opacity: 1; visibility: visible; pointer-events: auto; } .why-result-card { transform: none; animation: none; } #why-emailperfect-stage { min-height: auto; } } @media (max-width: 767px) { #why-emailperfect-inner h2 { font-size: clamp(2rem, 8vw, 2.75rem); } #why-emailperfect-tools { overflow-x: auto; grid-template-columns: repeat(5, minmax(120px, 1fr)); } .why-tool-label { font-size: 14px; } } @media (prefers-reduced-motion: reduce) { .why-tool-card.is-crossed .why-tool-strike line { stroke-dashoffset: 0; transition: none; } #why-emailperfect-result { transition: none; } .why-result-card, #why-emailperfect-stage.is-complete .why-result-card { animation: none; transform: none; } .why-result-loader::before { animation: none; transform: translateX(0); width: 100%; background: linear-gradient(90deg, #0b99ff 0%, #1d4ed8 50%, #0b99ff 100%); } } @media (prefers-reduced-motion: reduce) { #editor-view-tabs-shuttle { transition: none; } } @media (prefers-reduced-motion: reduce) { .properties-flow-energy { animation: none; opacity: 0; } } @media (min-width: 1400px) { #editor-view-images { opacity: 0; transform: translateY(80px) scale(0.9); transform-origin: center bottom; } #editor-view-images.is-revealed { animation: editor-view-images-reveal 900ms ease-out forwards; } #properties-view-visual { width: 872px; height: 580px; max-width: none; } #properties-view-image { width: 872px; height: 580px; max-width: none; } @keyframes editor-view-images-reveal { from { opacity: 0; transform: translateY(80px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes panel-image-reveal { from { opacity: 0; transform: translate(-50%, 200px); } to { opacity: 1; transform: translate(-50%, 0); } } @media (prefers-reduced-motion: reduce) { #editor-view-images.is-revealed { animation: none; opacity: 1; transform: translateY(0) scale(1); } } } /* Design control slice */ #design-control-slice { overflow: hidden; background: #fff; padding-top: 5rem; padding-bottom: 4rem; } #design-control-slice > div:first-child { max-width: 980px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; text-align: center; } #design-control-slice h2 { margin: 0; font-size: 40px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: #101828; } #design-control-slice p { margin: 1.5rem auto 0; max-width: 660px; font-size: 18px; font-weight: 500; line-height: 1.5; color: #4a5565; } #design-control-crawler { margin-top: 3rem; overflow: hidden; } .design-control-crawler-track { display: flex; width: max-content; flex-shrink: 0; will-change: transform; } .design-control-crawler-track.is-ready { animation: design-control-crawl 120s linear infinite; } .design-control-crawler-set { display: flex; align-items: center; flex-shrink: 0; gap: 24px; padding-right: 24px; } .design-control-crawler-set img { display: block; height: 580px; width: auto; max-width: none; flex-shrink: 0; pointer-events: none; user-select: none; -webkit-user-drag: none; } @media (max-width: 767px) { .design-control-crawler-set img { height: 480px; } } @keyframes design-control-crawl { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-1 * var(--crawl-distance, 0px)), 0, 0); } } @media (prefers-reduced-motion: reduce) { .design-control-crawler-track { animation: none; } } /* Ship emails slice */ #ship-emails-slice { background: #fff; padding-top: 5rem; padding-bottom: 5rem; } @media (max-width: 639px) { #ship-emails-slice { padding-top: 1rem; padding-bottom: 1rem; } } #ship-emails-slice > div > div:first-child { max-width: 920px; margin-left: auto; margin-right: auto; text-align: center; } #ship-emails-slice > div > div:first-child h2 { margin: 0; font-size: 40px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: #101828; } #ship-emails-slice > div > div:first-child p { margin: 1.5rem auto 0; max-width: 860px; font-size: 18px; font-weight: 500; line-height: 1.5; color: #4a5565; } #ship-emails-slice > div > div:last-child { display: grid; gap: 2.5rem; margin-top: 3rem; } @media (min-width: 1024px) { #ship-emails-slice > div > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } } .ship-emails-feature video { display: block; width: 100%; max-width: none; } .ship-emails-feature h3 { margin: 1.5rem 0 0; font-size: 24px; font-weight: 600; line-height: 1.375; color: #101828; } .ship-emails-feature p { margin: 0.75rem 0 0; font-size: 18px; font-weight: 500; line-height: 1.5; color: #4a5565; } /* Email made perfect slice */ #email-made-perfect-slice { background: #fff; padding-top: 5rem; padding-bottom: 7rem; } @media (max-width: 639px) { #email-made-perfect-slice { padding-top: 1rem; padding-bottom: 4rem; } } #email-made-perfect-slice > div > h2 { margin: 0; text-align: center; font-size: 40px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: #101828; } #email-made-perfect-slice > div > div { display: grid; gap: 2.5rem; margin-top: 3rem; } @media (min-width: 1024px) { #email-made-perfect-slice > div > div { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } } .email-made-perfect-feature { text-align: center; } .email-made-perfect-feature video { display: block; width: 100%; max-width: none; } .email-made-perfect-feature h3 { margin: 1.5rem 0 0; font-size: 24px; font-weight: 600; line-height: 1.375; color: #101828; } .email-made-perfect-feature p { margin: 0.75rem 0 0; font-size: 18px; font-weight: 500; line-height: 1.5; color: #4a5565; } /* Output code slice — ~800px layout: header + 540px stage */ #output-code-slice { background: #eee; padding-bottom: 0; overflow: hidden; } .output-code-header { padding-top: 3.5rem; overflow: visible; } .output-code-header h2 { margin: 0; font-size: 40px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: #101828; } .output-code-header p { margin: 1rem auto 0; max-width: 860px; font-size: 18px; font-weight: 500; line-height: 1.5; color: #4a5565; } #output-code-mockup { display: block; width: 540px; max-width: calc(100% - 3rem); height: auto; margin: 80px auto -16px; will-change: filter; } #output-code-frame { position: relative; z-index: 1; width: 100%; max-width: 1600px; height: 540px; margin-top: -540px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; overflow: hidden; box-sizing: border-box; pointer-events: none; } #output-code-stage { position: relative; width: 100%; height: 100%; overflow: hidden; } #output-code-html { position: absolute; bottom: 0; left: 50%; z-index: 3; display: block; height: auto; max-width: none; --output-code-html-scale: 0.5; transform: translate(-50%, calc(100% + 24px)) scale(var(--output-code-html-scale)); transform-origin: bottom center; pointer-events: none; user-select: none; -webkit-user-drag: none; will-change: transform; } @media (max-width: 767px) { #output-code-mockup { margin-top: -20px; transform: scale(0.75); transform-origin: center bottom; } #output-code-frame { padding-left: 0; padding-right: 0; overflow: visible; } #output-code-stage { overflow: visible; } #output-code-html { --output-code-html-scale: 0.1875; } .output-code-icon { --output-code-icon-scale: 0.125; } } @media (prefers-reduced-motion: reduce) { #output-code-html { transform: translate(-50%, 0) scale(var(--output-code-html-scale)); } } .output-code-icon { position: absolute; display: block; height: auto; max-width: none; opacity: 0; --output-code-icon-scale: 0.25; transform: translate(-50%, -50%) scale(var(--output-code-icon-scale)); transform-origin: center center; pointer-events: none; user-select: none; -webkit-user-drag: none; will-change: left, top, opacity, transform; animation: output-code-icon-bob var(--output-code-bob-duration, 6.5s) linear var(--output-code-bob-delay, 0s) infinite; } @keyframes output-code-icon-bob { 0%, 100% { transform: translate(calc(-50% + var(--output-code-bob-distance-x, 6px)), -50%) scale(var(--output-code-icon-scale)); } 25%, 75% { transform: translate(-50%, calc(-50% - var(--output-code-bob-distance, 10px) * 0.707)) scale(var(--output-code-icon-scale)); } 50% { transform: translate( calc(-50% - var(--output-code-bob-distance-x, 6px)), calc(-50% - var(--output-code-bob-distance, 10px)) ) scale(var(--output-code-icon-scale)); } } #output-code-stage .output-code-icon:nth-child(2) { --output-code-bob-distance: 9px; --output-code-bob-distance-x: 5px; --output-code-bob-duration: 6.2s; --output-code-bob-delay: -0.4s; } #output-code-stage .output-code-icon:nth-child(3) { --output-code-bob-distance: 12px; --output-code-bob-distance-x: 8px; --output-code-bob-duration: 7.4s; --output-code-bob-delay: -1.8s; } #output-code-stage .output-code-icon:nth-child(4) { --output-code-bob-distance: 10px; --output-code-bob-distance-x: 4px; --output-code-bob-duration: 8.1s; --output-code-bob-delay: -3.2s; } #output-code-stage .output-code-icon:nth-child(5) { --output-code-bob-distance: 11px; --output-code-bob-distance-x: 6px; --output-code-bob-duration: 6.8s; --output-code-bob-delay: -0.9s; } #output-code-stage .output-code-icon:nth-child(6) { --output-code-bob-distance: 13px; --output-code-bob-distance-x: 7px; --output-code-bob-duration: 7.9s; --output-code-bob-delay: -2.5s; } #output-code-stage .output-code-icon:nth-child(7) { --output-code-bob-distance: 8px; --output-code-bob-distance-x: 5px; --output-code-bob-duration: 9.2s; --output-code-bob-delay: -4.1s; } #output-code-stage .output-code-icon:nth-child(8) { --output-code-bob-distance: 11px; --output-code-bob-distance-x: 9px; --output-code-bob-duration: 7.1s; --output-code-bob-delay: -1.2s; } #output-code-stage .output-code-icon:nth-child(9) { --output-code-bob-distance: 10px; --output-code-bob-distance-x: 4px; --output-code-bob-duration: 8.6s; --output-code-bob-delay: -3.7s; } #output-code-stage .output-code-icon:nth-child(10) { --output-code-bob-distance: 12px; --output-code-bob-distance-x: 6px; --output-code-bob-duration: 6.5s; --output-code-bob-delay: -0.6s; } #output-code-stage .output-code-icon:nth-child(11) { --output-code-bob-distance: 9px; --output-code-bob-distance-x: 7px; --output-code-bob-duration: 8.9s; --output-code-bob-delay: -2.9s; } #output-code-stage .output-code-icon:nth-child(12) { --output-code-bob-distance: 14px; --output-code-bob-distance-x: 5px; --output-code-bob-duration: 7.6s; --output-code-bob-delay: -1.5s; } #output-code-stage .output-code-icon:nth-child(13) { --output-code-bob-distance: 10px; --output-code-bob-distance-x: 8px; --output-code-bob-duration: 9.5s; --output-code-bob-delay: -4.8s; } @media (prefers-reduced-motion: reduce) { .output-code-icon { animation: none; } } /* FAQ section — grid and typography */ #landing-faq-section { border-bottom: 1px solid #e5e7eb; padding-top: 4rem; padding-bottom: 4rem; } #landing-faq-section > div { display: grid; gap: 2.5rem; width: 100%; max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } @media (min-width: 1024px) { #landing-faq-section > div { grid-template-columns: repeat(3, minmax(0, 1fr)); } #landing-faq-section aside { position: sticky; top: 2rem; align-self: start; } } #landing-faq-section aside h2 { margin: 0; max-width: 220px; font-size: 32px; line-height: 1.1; font-weight: 300; letter-spacing: -0.02em; color: #111827; } #faq-col-right { margin-top: -2.5rem; } @media (min-width: 1024px) { #faq-col-right { margin-top: 0; } } #faq-col-left details, #faq-col-right details { border-bottom: 1px solid #e5e7eb; padding-top: 0.75rem; padding-bottom: 0.75rem; } #faq-col-left summary, #faq-col-right summary { cursor: pointer; list-style: none; font-size: 15px; font-weight: 500; color: #111827; } #faq-col-left summary::-webkit-details-marker, #faq-col-right summary::-webkit-details-marker { display: none; } #faq-col-left details p, #faq-col-right details p { margin: 0.5rem 0 0; font-size: 13px; line-height: 1.625; color: #4b5563; } /* Footer */ #static-marketing-page > footer, #static-pricing-page > footer { background: #101216; color: #fff; padding-top: 2.5rem; padding-bottom: 2.5rem; } #static-marketing-page > footer > div, #static-pricing-page > footer > div { display: flex; max-width: 1320px; flex-direction: column; align-items: center; gap: 1.25rem; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; text-align: center; } #static-marketing-page > footer .inline-flex, #static-pricing-page > footer .inline-flex { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem; font-size: 12px; color: #d1d5db; } #static-marketing-page > footer button, #static-pricing-page > footer button { background: none; border: none; color: inherit; font-size: inherit; cursor: pointer; font-family: inherit; padding: 0; } #static-marketing-page > footer .text-\[11px\], #static-pricing-page > footer .text-\[11px\] { margin: 0; font-size: 11px; color: #9ca3af; } #static-marketing-page > footer a, #static-pricing-page > footer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } #static-marketing-page > footer img, #static-pricing-page > footer img { height: 1.25rem; width: 22px; } /* Pricing page */ #pricing-page-main { max-width: 1320px; margin-left: auto; margin-right: auto; padding: 3rem 1.5rem 4rem; } #pricing-page-intro { max-width: 720px; margin: 0 auto 3rem; text-align: center; } #pricing-page-headline { margin: 0; font-size: clamp(2.25rem, 6vw, 3.25rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: #101828; } #pricing-page-subheadline { margin: 1rem auto 0; max-width: 42rem; font-size: 18px; font-weight: 500; line-height: 1.5; color: #4a5565; } #pricing-packages-mount { margin-bottom: 3rem; } .pricing-billing-switcher-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; margin-bottom: 2rem; } .pricing-billing-switcher { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem; border-radius: 9999px; background: #e8eaed; } .pricing-billing-option { display: inline-flex; align-items: center; gap: 0.45rem; border: 0; border-radius: 9999px; background: transparent; padding: 0.55rem 1.1rem; font: inherit; font-size: 15px; font-weight: 500; line-height: 1; color: #667085; cursor: pointer; transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease; } .pricing-billing-option.is-active { background: #fff; color: #101828; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); } .pricing-billing-save-badge { display: inline-flex; align-items: center; border-radius: 9999px; padding: 0.2rem 0.45rem; background: #14b870; font-size: 11px; font-weight: 600; line-height: 1; color: #fff; } .pricing-billing-hint { margin: 0; font-size: 14px; line-height: 1.4; color: #667085; text-align: center; } .pricing-billing-hint-accent { font-weight: 600; color: #1d4ed8; } .pricing-packages-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 900px) { .pricing-packages-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } } .pricing-enterprise-callout { display: flex; flex-direction: column; align-items: center; margin-top: 2.5rem; padding-top: 0.5rem; text-align: center; } .pricing-enterprise-callout-icon { color: #101828; } .pricing-enterprise-callout-title { margin: 0.85rem 0 0; font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: #101828; } .pricing-enterprise-callout-copy { margin: 0.75rem 0 0; max-width: 34rem; font-size: 15px; line-height: 1.55; color: #667085; } .pricing-enterprise-callout-link { margin-top: 1rem; font-size: 15px; font-weight: 500; line-height: 1.4; color: #667085; text-decoration: underline; text-underline-offset: 3px; } .pricing-enterprise-callout-link:hover { color: #101828; } .pricing-compare-section { margin-top: 0.5rem; } .pricing-compare-heading { margin: 0 0 1.25rem; font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: #101828; } .pricing-package-card { display: flex; flex-direction: column; height: 100%; border-radius: 24px; background: #eee; padding: 1.75rem 1.75rem 1.5rem; } .pricing-package-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; } .pricing-package-card-heading { min-width: 0; } .pricing-package-card-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; } .pricing-package-card-name { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: #101828; } .pricing-package-card-tagline { margin: 0.5rem 0 0; max-width: 16rem; font-size: 15px; line-height: 1.45; color: #667085; } .pricing-popular-badge { display: inline-flex; align-items: center; border-radius: 9999px; padding: 0.28rem 0.55rem; background: linear-gradient(to bottom, #1d4ed8, #0b99ff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); font-size: 11px; font-weight: 600; line-height: 1; color: #fff; } .pricing-package-card-price { flex-shrink: 0; text-align: right; } .pricing-package-card-price-value { display: block; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: #101828; white-space: nowrap; } .pricing-package-card-price-value.is-custom { font-size: clamp(1.75rem, 3.5vw, 2.25rem); } .pricing-package-card-price-period { margin-left: 0.15rem; font-size: 1.125rem; font-weight: 500; color: #667085; } .pricing-package-card-price-yearly { display: block; margin-top: 0.35rem; font-size: 12px; font-weight: 500; line-height: 1.35; color: #667085; } .pricing-package-card-divider { height: 1px; margin: 1.5rem 0 1.25rem; background: #e5e7eb; } .pricing-package-card-features-label { margin: 0; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: #131313; } .pricing-package-card-features-intro { margin: 0.65rem 0 0; font-size: 14px; line-height: 1.45; color: #667085; } .pricing-package-card-feature-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin: 1.25rem 0 0; padding: 0; list-style: none; } .pricing-package-card-feature { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 13px; line-height: 1.4; color: #344054; } .pricing-package-card-check { flex-shrink: 0; margin-top: 0.05rem; color: #131313; } .pricing-package-card-cta { margin-top: auto; padding-top: 1.5rem; } .pricing-table-wrap { overflow-x: auto; border-radius: 24px; border: 1px solid #e5e7eb; background: #fff; -webkit-overflow-scrolling: touch; } .pricing-table { width: 100%; min-width: 920px; border-collapse: separate; border-spacing: 0; } .pricing-table th, .pricing-table td { padding: 1rem 1.25rem; border-bottom: 1px solid #eef0f3; vertical-align: top; text-align: center; } .pricing-table thead th { position: sticky; top: 0; z-index: 2; background: #fff; border-bottom: 1px solid #e5e7eb; } .pricing-table-feature-col, .pricing-table-feature-label { text-align: left !important; width: 18rem; min-width: 14rem; padding-left: 1.5rem; padding-right: 1.25rem; font-size: 14px; font-weight: 600; color: #101828; } .pricing-table thead .pricing-table-feature-col { background: #fff; vertical-align: bottom; } .pricing-feature-group-header-row th { padding: 0.85rem 1.5rem; border-bottom: 1px solid #eef0f3; background: #fff; text-align: left !important; } .pricing-feature-group-toggle { display: inline-flex; align-items: center; gap: 0.5rem; border: 0; background: transparent; padding: 0; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.3; color: #101828; cursor: pointer; } .pricing-feature-group-toggle:hover { color: #374151; } .pricing-feature-group-chevron { flex-shrink: 0; transition: transform 150ms ease; } .pricing-feature-group.is-collapsed .pricing-feature-group-chevron { transform: rotate(-90deg); } .pricing-feature-group.is-collapsed .pricing-feature-row { display: none; } .pricing-table tbody tr:last-child td { border-bottom: 1px solid #eef0f3; } .pricing-table tfoot tr:last-child td, .pricing-table tfoot tr:last-child th { border-bottom: 0; } .pricing-tier-name { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: #101828; } .pricing-tier-tagline { margin: 0.35rem 0 0; font-size: 13px; line-height: 1.4; color: #6b7280; } .pricing-tier-price { margin: 1.25rem 0 0; font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: #101828; } .pricing-tier-price.is-custom { font-size: 28px; letter-spacing: -0.02em; } .pricing-price-period { font-size: 16px; font-weight: 500; color: #6b7280; } .pricing-tier-yearly { display: block; margin-top: 0.35rem; font-size: 13px; font-weight: 500; line-height: 1.35; color: #6b7280; } .pricing-table tfoot td { border-bottom: 0; padding-top: 1.5rem; padding-bottom: 1.75rem; vertical-align: middle; } .pricing-table-cta-cell { text-align: center; } .pricing-tier-cta { display: inline-flex; align-items: center; justify-content: center; margin-top: 0; border-radius: 9999px; padding: 15px 24px; border: 1px solid #111827; background: #111827; color: #fff; font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; cursor: pointer; font-family: inherit; transition: background-color 150ms ease, border-color 150ms ease; } .pricing-tier-cta:hover { border-color: #374151; background: #374151; } .pricing-tier-cta.is-secondary { border: 2px solid #111827; background: #fff; color: #111827; } .pricing-tier-cta.is-secondary:hover { background: #f5f5f5; } .pricing-table-feature-value { font-size: 14px; line-height: 1.45; color: #374151; vertical-align: middle; } .pricing-table-value-text { display: inline-block; font-size: 14px; line-height: 1.45; color: #344054; } .pricing-table-indicator { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; } .pricing-table-indicator svg { display: block; } .pricing-table-indicator.is-included { color: #14b870; } .pricing-table-indicator.is-unavailable { color: #e8eaed; } .pricing-table-indicator.is-unavailable svg path { stroke: #b0b7c3; } .pricing-infinity { display: inline-block; font-size: 1.35em; font-weight: 500; line-height: 1; vertical-align: -0.05em; } #pricing-faq-section { border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; background: #fff; padding-top: 4rem; padding-bottom: 4rem; } #pricing-faq-section > div { display: grid; gap: 2.5rem; width: 100%; max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } @media (min-width: 1024px) { #pricing-faq-section > div { grid-template-columns: repeat(3, minmax(0, 1fr)); } #pricing-faq-section aside { position: sticky; top: 6rem; align-self: start; } } #pricing-faq-section aside h2 { margin: 0; max-width: 220px; font-size: 32px; line-height: 1.1; font-weight: 300; letter-spacing: -0.02em; color: #111827; } #pricing-faq-col-left details, #pricing-faq-col-right details { border-bottom: 1px solid #e5e7eb; padding-top: 0.75rem; padding-bottom: 0.75rem; } #pricing-faq-col-left summary, #pricing-faq-col-right summary { cursor: pointer; list-style: none; font-size: 15px; font-weight: 500; color: #111827; } #pricing-faq-col-left summary::-webkit-details-marker, #pricing-faq-col-right summary::-webkit-details-marker { display: none; } #pricing-faq-col-left details p, #pricing-faq-col-right details p { margin: 0.5rem 0 0; font-size: 13px; line-height: 1.625; color: #4b5563; } /* Toolkit documentation page */ #toolkit-layout, #security-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 3rem; max-width: 1320px; margin: 80px auto 0; padding: 0 1.5rem 4rem; } #toolkit-sidebar, #security-sidebar { position: sticky; top: 100px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; padding-top: 8px; padding-right: 0.25rem; } #toolkit-sidebar-nav, #security-sidebar-nav { display: flex; flex-direction: column; gap: 0.15rem; } .toolkit-sidebar-link { display: block; border-radius: 8px; padding: 0.45rem 0.65rem; font-size: 14px; line-height: 1.35; color: #667085; text-decoration: none; transition: background-color 150ms ease, color 150ms ease; } .toolkit-sidebar-link:hover { background: #eee; color: #101828; } .toolkit-sidebar-link.is-active { background: #eee; color: #101828; font-weight: 600; } #toolkit-main-column, #security-main-column { min-width: 0; max-width: 800px; } #toolkit-page-header, #security-page-header { margin-bottom: 2.5rem; } #toolkit-page-header h1, #security-page-header h1 { margin: 0; font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: #101828; } #toolkit-page-subtitle, #security-page-subtitle { margin: 0.85rem 0 0; max-width: 42rem; font-size: 18px; line-height: 1.55; color: #4a5565; } #toolkit-page-meta, #security-page-meta { margin: 0.75rem 0 0; font-size: 14px; color: #667085; } #toolkit-search-wrap { position: sticky; top: 84px; z-index: 5; margin-top: 1.5rem; padding: 0.75rem 0 0.5rem; background: #fafafa; } #toolkit-search { width: 100%; border: 1px solid #e5e7eb; border-radius: 12px; padding: 0.75rem 1rem; font: inherit; font-size: 15px; color: #101828; background: #fff; } #toolkit-search:focus { outline: 2px solid #111827; outline-offset: 1px; } #toolkit-search-results { margin-top: 0.5rem; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08); overflow: hidden; } .toolkit-search-result { display: block; width: 100%; border: 0; border-bottom: 1px solid #f3f4f6; background: #fff; padding: 0.75rem 1rem; text-align: left; font: inherit; cursor: pointer; } .toolkit-search-result:last-child { border-bottom: 0; } .toolkit-search-result:hover { background: #f9fafb; } .toolkit-search-result-label { font-size: 14px; color: #101828; } .toolkit-search-empty { margin: 0; padding: 0.85rem 1rem; font-size: 14px; color: #667085; } .toolkit-section { padding: 2.5rem 0; border-top: 1px solid #e5e7eb; scroll-margin-top: 140px; } .toolkit-section:first-child { border-top: 0; padding-top: 0; } .toolkit-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .toolkit-section-header h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: #101828; } .toolkit-copy-link { display: inline-flex; align-items: center; gap: 0.35rem; border: 0; background: transparent; padding: 0.25rem 0.35rem; font: inherit; font-size: 13px; color: #667085; cursor: pointer; } .toolkit-copy-link:hover { color: #101828; } .toolkit-section-lead { margin: 0 0 1.25rem; font-size: 17px; line-height: 1.65; color: #344054; } .toolkit-section-heading { margin: 1.75rem 0 0.65rem; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #131313; } .toolkit-section p { margin: 0; font-size: 15px; line-height: 1.65; color: #4b5563; } .toolkit-steps, .toolkit-tips { margin: 0.5rem 0 0; padding-left: 1.25rem; font-size: 15px; line-height: 1.65; color: #4b5563; } .toolkit-steps li + li, .toolkit-tips li + li { margin-top: 0.45rem; } .toolkit-subsection { margin-top: 1.5rem; padding: 1rem 1.15rem; border-radius: 12px; background: #eee; } .toolkit-subsection h3 { margin: 0 0 0.45rem; font-size: 15px; font-weight: 600; color: #101828; } .toolkit-subsection p { font-size: 14px; } .toolkit-callout { margin: 1.25rem 0 0; padding: 0.85rem 1rem; border-radius: 12px; font-size: 14px; line-height: 1.55; } .toolkit-callout p { margin: 0; font-size: 14px; } .toolkit-callout--tip { background: #eef6ff; color: #1e3a8a; } .toolkit-callout--warning { background: #fff7ed; color: #9a3412; } .toolkit-callout--note { background: #f3f4f6; color: #374151; } .toolkit-screenshot-placeholder { display: flex; align-items: center; justify-content: center; min-height: 220px; margin-top: 1.75rem; border: 1px dashed #d1d5db; border-radius: 16px; background: #eee; color: #667085; font-size: 14px; } .toolkit-related { margin-top: 1.75rem; } .toolkit-related-label { display: block; margin-bottom: 0.5rem; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #131313; } .toolkit-related-links { display: flex; flex-wrap: wrap; gap: 0.5rem; } .toolkit-related-link { display: inline-flex; border-radius: 9999px; padding: 0.35rem 0.75rem; background: #eee; font-size: 13px; color: #101828; text-decoration: none; } .toolkit-related-link:hover { background: #e5e7eb; } .toolkit-demo-callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding: 1rem 1.15rem; border-radius: 12px; background: #f3f4f6; } .toolkit-demo-callout p { margin: 0; font-size: 14px; color: #374151; } .toolkit-shortcuts-wrap { margin-top: 1.25rem; overflow-x: auto; } .toolkit-shortcuts-table { width: 100%; border-collapse: collapse; font-size: 14px; } .toolkit-shortcuts-table th, .toolkit-shortcuts-table td { padding: 0.65rem 0.85rem; border-bottom: 1px solid #e5e7eb; text-align: left; } .toolkit-shortcuts-table th { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #667085; } .toolkit-shortcuts-table kbd { display: inline-block; border-radius: 6px; padding: 0.15rem 0.45rem; background: #eee; font-family: inherit; font-size: 13px; color: #101828; } .toolkit-faq-controls { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0 0.75rem; font-size: 13px; } .toolkit-faq-controls button { border: 0; background: transparent; padding: 0; font: inherit; color: #1d4ed8; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .toolkit-faq-list details { border-bottom: 1px solid #e5e7eb; padding: 0.75rem 0; } .toolkit-faq-list summary { cursor: pointer; list-style: none; font-size: 15px; font-weight: 500; color: #101828; } .toolkit-faq-list summary::-webkit-details-marker { display: none; } .toolkit-faq-list details p { margin: 0.65rem 0 0; font-size: 14px; line-height: 1.6; color: #4b5563; } #toolkit-mobile-nav-toggle, #security-mobile-nav-toggle { display: none; } #toolkit-sidebar-backdrop, #security-sidebar-backdrop { display: none; } .toolkit-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .toolkit-form-label { display: block; margin: 0.85rem 0 0.35rem; font-size: 13px; font-weight: 500; color: #374151; } .toolkit-form-label:first-of-type { margin-top: 0; } .toolkit-form-optional { font-weight: 400; color: #9ca3af; } .toolkit-form-input { width: 100%; border: 1px solid #d1d5db; border-radius: 12px; padding: 0.65rem 0.75rem; font: inherit; font-size: 14px; color: #111827; } .toolkit-form-textarea { resize: vertical; min-height: 88px; } .toolkit-form-input:focus { outline: 2px solid #111827; outline-offset: 1px; } .toolkit-form-message { margin: 0.75rem 0 0; font-size: 12px; } .toolkit-form-message.is-error { color: #b91c1c; } .toolkit-form-message.is-success { color: #166534; } .toolkit-form-message.hidden { display: none !important; } #demo-request-form .pricing-tier-cta { margin-top: 1rem; } #static-toolkit-page > footer, #static-security-page > footer { margin-top: 2rem; } @media (max-width: 1023px) { #toolkit-layout, #security-layout { grid-template-columns: 1fr; gap: 0; } #toolkit-sidebar, #security-sidebar { position: fixed; top: 0; left: 0; z-index: 160; width: min(320px, 88vw); height: 100vh; max-height: none; padding: 5.5rem 1rem 1.5rem; background: #fafafa; border-right: 1px solid #e5e7eb; transform: translateX(-105%); transition: transform 180ms ease; } #toolkit-sidebar.is-open, #security-sidebar.is-open { transform: translateX(0); } #toolkit-sidebar-backdrop, #security-sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 150; background: rgba(17, 24, 39, 0.35); } #toolkit-sidebar-backdrop[hidden], #security-sidebar-backdrop[hidden] { display: none !important; } #toolkit-mobile-nav-toggle, #security-mobile-nav-toggle { display: inline-flex; position: fixed; right: 1rem; bottom: 1rem; z-index: 140; align-items: center; border: 1px solid #111827; border-radius: 9999px; padding: 0.75rem 1rem; background: #111827; color: #fff; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; box-shadow: 0 8px 24px rgba(17, 24, 39, 0.18); } #toolkit-search-wrap { top: 72px; } .toolkit-section { scroll-margin-top: 110px; } } @media (min-width: 1400px) { #properties-view-image { height: 580px; width: 872px; max-width: none; } } /* ----- Shared landing layout shells ----- */ .landing-section-inner { width: 100%; max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } .landing-section-intro { max-width: 920px; margin-left: auto; margin-right: auto; text-align: center; } .landing-feature-media { overflow: hidden; border-radius: 32px; } .landing-feature-media video { display: block; width: 100%; } /* ----- Invite landing ----- */ #ep-invite-section { min-height: 100vh; } #ep-invite-section .ep-invite-layout { display: flex; min-height: 100vh; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1rem; } #ep-invite-section .ep-invite-brand { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 2rem; } #ep-invite-section .ep-invite-brand img { width: 22px; height: 20px; } #ep-invite-section .ep-invite-brand span { font-size: 15px; font-weight: 600; color: #111827; } #ep-invite-tagline { margin: 0 0 1.5rem; text-align: center; font-size: 13px; color: #6b7280; } #ep-invite-loading { font-size: 13px; color: #9ca3af; } .ep-invite-card, #ep-invite-box, #ep-invite-expired { width: 100%; max-width: 400px; border: 1px solid #111827; border-radius: 18px; background: #fff; padding: 2rem; } .ep-invite-card.is-centered, #ep-invite-expired { text-align: center; } #ep-invite-message { margin: 0; text-align: center; font-size: 15px; font-weight: 500; line-height: 1.375; color: #111827; } #ep-invite-submessage { margin: 0.5rem 0 0; text-align: center; font-size: 13px; line-height: 1.375; color: #6b7280; } .ep-invite-field { margin-top: 1.5rem; } .ep-invite-field label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #6b7280; } #ep-invite-email { display: block; width: 100%; margin-top: 0.25rem; border: 1px solid #d4d4d8; border-radius: 6px; background: #f5f5f5; padding: 0.5rem 0.75rem; font-size: 13px; color: #242424; outline: none; cursor: default; user-select: all; } #ep-invite-accept-btn { width: 100%; margin-top: 1.25rem; border: 0; border-radius: 9999px; background: #111827; padding: 0.625rem 1rem; font-size: 13px; font-weight: 600; color: #fff; cursor: pointer; } #ep-invite-accept-btn:hover:not(:disabled) { background: #374151; } #ep-invite-accept-btn:disabled { opacity: 0.5; } #ep-invite-cta-hint { margin: 0.5rem 0 0; text-align: center; font-size: 11px; line-height: 1.375; color: #9ca3af; } #ep-invite-error { margin: 0.75rem 0 0; text-align: center; font-size: 12px; color: #b91c1c; } #ep-invite-confirmed { margin-top: 1.25rem; border-radius: 10px; background: #f0fdf4; padding: 0.75rem 1rem; text-align: center; font-size: 13px; color: #166534; } .ep-invite-invalid-title { margin: 0; font-size: 15px; font-weight: 500; color: #111827; } .ep-invite-invalid-copy { margin: 0.5rem 0 0; font-size: 13px; color: #6b7280; } .ep-invite-home-link { display: inline-block; margin-top: 1.25rem; font-size: 13px; font-weight: 500; color: #1d4ed8; text-decoration: underline; text-underline-offset: 2px; } /* ----- Site footer ----- */ .marketing-footer { background: #101216; padding: 2.5rem 0; color: #fff; } .marketing-footer-inner { display: flex; width: 100%; max-width: 1320px; flex-direction: column; align-items: center; gap: 1.25rem; margin: 0 auto; padding: 0 1.5rem; text-align: center; } .marketing-footer-nav { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem; font-size: 12px; color: #d1d5db; } .marketing-footer-nav button, .marketing-footer-nav a { border: 0; background: transparent; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: none; } .marketing-footer-nav button:hover, .marketing-footer-nav a:hover { color: #fff; } .marketing-footer-copy { margin: 0; font-size: 11px; color: #9ca3af; } .marketing-footer-copy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .marketing-footer-copy a:hover { color: #fff; } .marketing-footer-mark { width: 22px; height: 20px; } /* ----- Modals (auth, demo, legal) ----- */ .landing-modal.hidden { display: none !important; } .landing-modal:not(.hidden) { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, 0.35); } #legal-modal:not(.hidden) { z-index: 210; background: rgba(0, 0, 0, 0.45); } .landing-modal-dialog { width: 100%; max-width: 28rem; border: 1px solid #e4e4e7; border-radius: 1rem; background: #fff; padding: 1.5rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); } .landing-modal-dialog.is-large { display: flex; max-width: 48rem; height: 80vh; flex-direction: column; overflow: hidden; border-radius: 0.75rem; padding: 0; } .landing-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } .landing-modal-dialog.is-large .landing-modal-header { margin-bottom: 0; border-bottom: 1px solid #e5e7eb; padding: 1rem 1.5rem; } .landing-modal-title { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 600; color: #111827; } .landing-modal-close { border: 0; border-radius: 0.375rem; background: transparent; padding: 0.25rem; font: inherit; font-size: 13px; color: #6b7280; cursor: pointer; } .landing-modal-close:hover { background: #f3f4f6; } .landing-modal-close-icon { padding: 0.25rem; font-size: 1rem; line-height: 1; } #legal-modal-date { margin: 0.25rem 0 0; font-size: 12px; color: #6b7280; } #legal-modal-body { overflow-y: auto; padding: 1.25rem 1.5rem; text-align: left; } .legal-doc-intro { margin: 0 0 1.25rem; font-size: 14px; color: #374151; } .legal-doc-section { margin-bottom: 1.25rem; text-align: left; } .legal-doc-heading { margin: 0; font-size: 14px; font-weight: 600; color: #111827; } .legal-doc-paragraph { margin: 0.5rem 0 0; font-size: 13px; line-height: 1.625; color: #374151; } .legal-doc-list { margin: 0.5rem 0 0; padding-left: 1.25rem; font-size: 13px; line-height: 1.625; color: #374151; list-style: disc; } .legal-doc-list li + li { margin-top: 0.25rem; } #auth-google-error { margin: 0 0 0.5rem; font-size: 12px; color: #b91c1c; } #auth-google-btn { display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: 0.5rem; border: 1px solid #111827; border-radius: 9999px; background: #111827; padding: 0.625rem 1rem; font: inherit; font-size: 13px; font-weight: 500; color: #fff; cursor: pointer; } #auth-google-btn:hover:not(:disabled) { border-color: #374151; background: #374151; } #auth-google-btn:disabled { opacity: 0.6; cursor: not-allowed; } #auth-google-btn svg.auth-google-icon { width: 1rem; height: 1rem; } .landing-modal-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0; } .landing-modal-divider-line { height: 1px; flex: 1; background: #e5e7eb; } .landing-modal-divider-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #9ca3af; } #auth-email-input { width: 100%; border: 1px solid #d1d5db; border-radius: 0.75rem; padding: 0.5rem 0.75rem; font: inherit; font-size: 14px; outline: none; } #auth-email-input:focus { border-color: #111827; } #auth-email-btn { display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.75rem; border: 2px solid #111827; border-radius: 9999px; background: #fff; padding: 0.625rem 1rem; font: inherit; font-size: 13px; font-weight: 500; color: #111827; cursor: pointer; } #auth-email-btn:hover:not(:disabled) { background: #f5f5f5; } #auth-email-btn:disabled { opacity: 0.5; cursor: not-allowed; } #auth-email-error { margin: 0.5rem 0 0; font-size: 12px; color: #b91c1c; } #auth-email-success { margin: 0.5rem 0 0; font-size: 12px; color: #166534; } #auth-google-error.hidden, #auth-email-error.hidden, #auth-email-success.hidden, #ep-invite-submessage.hidden, #ep-invite-error.hidden { display: none !important; }