/* ========================================================= Inventory Autopilot — styles.css PHASE 2: full design system applied over the Phase 1 markup. Clean, functional, professional. Dark-blue palette, no gradients, no serif. Mobile-first (base = 320px), breakpoints at 768 / 1200. ========================================================= */ /* Fonts loaded here because HTML must not be modified in this phase. Trade-off: @import is render-blocking; a in would be faster and is the recommended follow-up. */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;600;700&family=Inter:wght@400;500;600&display=swap'); /* === DESIGN TOKENS (:root) === */ :root { /* --- Color --- */ --color-bg: #FFFFFF; --color-surface-alt: #F4F7FB; --color-primary: #1E3A5F; --color-primary-dark: #16293F; /* ~10% darker, CTA hover */ --color-on-primary: #FFFFFF; --color-text: #1A1A1A; --color-text-secondary: #5A5A5A; --color-border: #D0D0D0; /* form inputs */ --color-divider: #E6E9EF; /* hairline dividers */ --color-primary-soft: rgba(30, 58, 95, 0.08); /* pale primary tint */ --color-primary-ring: rgba(30, 58, 95, 0.35); /* focus ring */ /* Stock status */ --status-normal: #27AE60; --status-low: #E67E22; --status-out: #C0392B; /* Feedback */ --color-error: #C0392B; --color-success: #27AE60; /* brand/status green (indicators) */ --color-success-text: #177245; /* AA-safe green for text/icons on light bg */ /* Backdrop */ --color-backdrop: rgba(0, 0, 0, 0.5); /* --- Typography --- */ --font-heading: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --fs-h1: clamp(1.75rem, 4.5vw, 2.75rem); --fs-h2: clamp(1.3rem, 3vw, 2rem); --fs-h3: 1.125rem; --fs-body: 1rem; --fs-small: 0.875rem; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.2; --lh-body: 1.6; /* --- Spacing --- */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; /* --- Layout --- */ --container-max: 720px; --container-pad: 1.25rem; --section-pad: clamp(3rem, 8vw, 5rem); /* --- Radius --- */ --radius-sm: 4px; --radius-md: 8px; --radius-pill: 100px; /* --- Elevation --- */ --shadow-subtle: 0 1px 3px rgba(30, 58, 95, 0.08), 0 1px 2px rgba(30, 58, 95, 0.06); --shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.30); /* --- Motion --- */ --transition: 150ms ease; /* --- Decorative parallax + accent icons --- */ --parallax-tile: 1100px; /* vertical repeat unit of each layer */ --color-icon-email: #E67E22; /* warm, eye-catching (palette low-stock) */ --color-icon-mobile: #27AE60; /* green = payment/success (palette normal) */ /* Parallax icon colors: 4 vivid palette hues pre-blended with white so they LOOK like 0.12 (far) / 0.16 (mid) opacity but stay SOLID — overlapping icons no longer compound their transparency. */ --px-far-orange: #FCF0E4; --px-far-red: #F7E7E6; --px-far-green: #E5F5EC; --px-far-yellow: #FDF8E2; --px-mid-orange: #FBEADC; --px-mid-red: #F5DFDD; --px-mid-green: #DCF2E6; --px-mid-yellow: #FDF6D9; } /* === RESET === */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; background-color: var(--color-bg); } body { min-height: 100vh; background-color: transparent; /* lets the fixed parallax show through white sections */ color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; } img, picture, svg, video { max-width: 100%; height: auto; display: block; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } ul, ol { list-style: none; padding: 0; } table { border-collapse: collapse; width: 100%; } h1, h2, h3, p { overflow-wrap: break-word; } h1, h2, h3 { font-family: var(--font-heading); color: var(--color-primary); line-height: var(--lh-tight); font-weight: var(--fw-bold); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); } /* === LAYOUT PRIMITIVES === */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* === DECORATIVE PARALLAX BACKGROUND === Two fixed depth layers of washed-out inventory icons. Body is transparent, so these show through the white sections and are covered by the dark/alt ones. Icons are recolored with CSS mask (works for both fill- and stroke-based SVGs). */ .parallax { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .parallax__layer { position: absolute; top: 0; left: 0; width: 100%; will-change: transform; } /* No layer opacity — washed-out look comes from the solid pre-blended icon colors below, so overlapping icons don't stack transparency. */ .parallax__tile { position: relative; width: 100%; height: var(--parallax-tile); } .parallax__icon { position: absolute; display: block; background-color: var(--color-primary); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .parallax__icon--box { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M20.3873%207.1575L11.9999%2012L3.60913%207.14978%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M12%2012V21%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M11%202.57735C11.6188%202.22008%2012.3812%202.22008%2013%202.57735L19.6603%206.42265C20.2791%206.77992%2020.6603%207.44017%2020.6603%208.1547V15.8453C20.6603%2016.5598%2020.2791%2017.2201%2019.6603%2017.5774L13%2021.4226C12.3812%2021.7799%2011.6188%2021.7799%2011%2021.4226L4.33975%2017.5774C3.72094%2017.2201%203.33975%2016.5598%203.33975%2015.8453V8.1547C3.33975%207.44017%203.72094%206.77992%204.33975%206.42265L11%202.57735Z%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M8.5%204.5L16%209%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M20.3873%207.1575L11.9999%2012L3.60913%207.14978%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M12%2012V21%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M11%202.57735C11.6188%202.22008%2012.3812%202.22008%2013%202.57735L19.6603%206.42265C20.2791%206.77992%2020.6603%207.44017%2020.6603%208.1547V15.8453C20.6603%2016.5598%2020.2791%2017.2201%2019.6603%2017.5774L13%2021.4226C12.3812%2021.7799%2011.6188%2021.7799%2011%2021.4226L4.33975%2017.5774C3.72094%2017.2201%203.33975%2016.5598%203.33975%2015.8453V8.1547C3.33975%207.44017%203.72094%206.77992%204.33975%206.42265L11%202.57735Z%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M8.5%204.5L16%209%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3C%2Fsvg%3E"); } .parallax__icon--inventory { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2024%2024%22%20id%3D%22meteor-icon-kit__regular-inventory%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%2F%3E%20%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Cg%20clip-path%3D%22url%28%23clip0_525_147%29%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2%201C2%200.447715%201.55228%200%201%200C0.447715%200%200%200.447715%200%201V23C0%2023.5523%200.447715%2024%201%2024C1.55228%2024%202%2023.5523%202%2023V22H22V23C22%2023.5523%2022.4477%2024%2023%2024C23.5523%2024%2024%2023.5523%2024%2023V1C24%200.447715%2023.5523%200%2023%200C22.4477%200%2022%200.447715%2022%201V8H20V3C20%202.44772%2019.5523%202%2019%202H11C10.4477%202%2010%202.44772%2010%203V4H5C4.44772%204%204%204.44772%204%205V8H2V1ZM10%206H6V8H10V6ZM2%2010V20H4V13C4%2012.4477%204.44772%2012%205%2012H13C13.5523%2012%2014%2012.4477%2014%2013V14H19C19.5523%2014%2020%2014.4477%2020%2015V20H22V10H2ZM18%208V4H12V8H18ZM12%2020H6V14H12V20ZM14%2020V16H18V20H14Z%22%20fill%3D%22%23000000%22%2F%3E%20%3C%2Fg%3E%20%3Cdefs%3E%20%3CclipPath%20id%3D%22clip0_525_147%22%3E%20%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22white%22%2F%3E%20%3C%2FclipPath%3E%20%3C%2Fdefs%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2024%2024%22%20id%3D%22meteor-icon-kit__regular-inventory%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%2F%3E%20%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Cg%20clip-path%3D%22url%28%23clip0_525_147%29%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2%201C2%200.447715%201.55228%200%201%200C0.447715%200%200%200.447715%200%201V23C0%2023.5523%200.447715%2024%201%2024C1.55228%2024%202%2023.5523%202%2023V22H22V23C22%2023.5523%2022.4477%2024%2023%2024C23.5523%2024%2024%2023.5523%2024%2023V1C24%200.447715%2023.5523%200%2023%200C22.4477%200%2022%200.447715%2022%201V8H20V3C20%202.44772%2019.5523%202%2019%202H11C10.4477%202%2010%202.44772%2010%203V4H5C4.44772%204%204%204.44772%204%205V8H2V1ZM10%206H6V8H10V6ZM2%2010V20H4V13C4%2012.4477%204.44772%2012%205%2012H13C13.5523%2012%2014%2012.4477%2014%2013V14H19C19.5523%2014%2020%2014.4477%2020%2015V20H22V10H2ZM18%208V4H12V8H18ZM12%2020H6V14H12V20ZM14%2020V16H18V20H14Z%22%20fill%3D%22%23000000%22%2F%3E%20%3C%2Fg%3E%20%3Cdefs%3E%20%3CclipPath%20id%3D%22clip0_525_147%22%3E%20%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22white%22%2F%3E%20%3C%2FclipPath%3E%20%3C%2Fdefs%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); } .parallax__icon--sales { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000000%22%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%201024%201024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20stroke%3D%22%23000000%22%20stroke-width%3D%225.12%22%3E%20%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%2F%3E%20%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Cpath%20d%3D%22M136.948%20908.811c5.657%200%2010.24-4.583%2010.24-10.24V610.755c0-5.657-4.583-10.24-10.24-10.24h-81.92a10.238%2010.238%200%2000-10.24%2010.24v287.816c0%205.657%204.583%2010.24%2010.24%2010.24h81.92zm0%2040.96h-81.92c-28.278%200-51.2-22.922-51.2-51.2V610.755c0-28.278%2022.922-51.2%2051.2-51.2h81.92c28.278%200%2051.2%2022.922%2051.2%2051.2v287.816c0%2028.278-22.922%2051.2-51.2%2051.2zm278.414-40.96c5.657%200%2010.24-4.583%2010.24-10.24V551.322c0-5.657-4.583-10.24-10.24-10.24h-81.92a10.238%2010.238%200%2000-10.24%2010.24v347.249c0%205.657%204.583%2010.24%2010.24%2010.24h81.92zm0%2040.96h-81.92c-28.278%200-51.2-22.922-51.2-51.2V551.322c0-28.278%2022.922-51.2%2051.2-51.2h81.92c28.278%200%2051.2%2022.922%2051.2%2051.2v347.249c0%2028.278-22.922%2051.2-51.2%2051.2zm278.414-40.342c5.657%200%2010.24-4.583%2010.24-10.24V492.497c0-5.651-4.588-10.24-10.24-10.24h-81.92c-5.652%200-10.24%204.589-10.24%2010.24v406.692c0%205.657%204.583%2010.24%2010.24%2010.24h81.92zm0%2040.96h-81.92c-28.278%200-51.2-22.922-51.2-51.2V492.497c0-28.271%2022.924-51.2%2051.2-51.2h81.92c28.276%200%2051.2%2022.929%2051.2%2051.2v406.692c0%2028.278-22.922%2051.2-51.2%2051.2zm278.414-40.958c5.657%200%2010.24-4.583%2010.24-10.24V441.299c0-5.657-4.583-10.24-10.24-10.24h-81.92a10.238%2010.238%200%2000-10.24%2010.24v457.892c0%205.657%204.583%2010.24%2010.24%2010.24h81.92zm0%2040.96h-81.92c-28.278%200-51.2-22.922-51.2-51.2V441.299c0-28.278%2022.922-51.2%2051.2-51.2h81.92c28.278%200%2051.2%2022.922%2051.2%2051.2v457.892c0%2028.278-22.922%2051.2-51.2%2051.2zm-6.205-841.902C677.379%20271.088%20355.268%20367.011%2019.245%20387.336c-11.29.683-19.889%2010.389-19.206%2021.679s10.389%2019.889%2021.679%2019.206c342.256-20.702%20670.39-118.419%20964.372-284.046%209.854-5.552%2013.342-18.041%207.79-27.896s-18.041-13.342-27.896-7.79z%22%2F%3E%20%3Cpath%20d%3D%22M901.21%20112.64l102.39.154c11.311.017%2020.494-9.138%2020.511-20.449s-9.138-20.494-20.449-20.511l-102.39-.154c-11.311-.017-20.494%209.138-20.511%2020.449s9.138%2020.494%2020.449%2020.511z%22%2F%3E%20%3Cpath%20d%3D%22M983.151%2092.251l-.307%20101.827c-.034%2011.311%209.107%2020.508%2020.418%2020.542s20.508-9.107%2020.542-20.418l.307-101.827c.034-11.311-9.107-20.508-20.418-20.542s-20.508%209.107-20.542%2020.418z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000000%22%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%201024%201024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20stroke%3D%22%23000000%22%20stroke-width%3D%225.12%22%3E%20%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%2F%3E%20%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Cpath%20d%3D%22M136.948%20908.811c5.657%200%2010.24-4.583%2010.24-10.24V610.755c0-5.657-4.583-10.24-10.24-10.24h-81.92a10.238%2010.238%200%2000-10.24%2010.24v287.816c0%205.657%204.583%2010.24%2010.24%2010.24h81.92zm0%2040.96h-81.92c-28.278%200-51.2-22.922-51.2-51.2V610.755c0-28.278%2022.922-51.2%2051.2-51.2h81.92c28.278%200%2051.2%2022.922%2051.2%2051.2v287.816c0%2028.278-22.922%2051.2-51.2%2051.2zm278.414-40.96c5.657%200%2010.24-4.583%2010.24-10.24V551.322c0-5.657-4.583-10.24-10.24-10.24h-81.92a10.238%2010.238%200%2000-10.24%2010.24v347.249c0%205.657%204.583%2010.24%2010.24%2010.24h81.92zm0%2040.96h-81.92c-28.278%200-51.2-22.922-51.2-51.2V551.322c0-28.278%2022.922-51.2%2051.2-51.2h81.92c28.278%200%2051.2%2022.922%2051.2%2051.2v347.249c0%2028.278-22.922%2051.2-51.2%2051.2zm278.414-40.342c5.657%200%2010.24-4.583%2010.24-10.24V492.497c0-5.651-4.588-10.24-10.24-10.24h-81.92c-5.652%200-10.24%204.589-10.24%2010.24v406.692c0%205.657%204.583%2010.24%2010.24%2010.24h81.92zm0%2040.96h-81.92c-28.278%200-51.2-22.922-51.2-51.2V492.497c0-28.271%2022.924-51.2%2051.2-51.2h81.92c28.276%200%2051.2%2022.929%2051.2%2051.2v406.692c0%2028.278-22.922%2051.2-51.2%2051.2zm278.414-40.958c5.657%200%2010.24-4.583%2010.24-10.24V441.299c0-5.657-4.583-10.24-10.24-10.24h-81.92a10.238%2010.238%200%2000-10.24%2010.24v457.892c0%205.657%204.583%2010.24%2010.24%2010.24h81.92zm0%2040.96h-81.92c-28.278%200-51.2-22.922-51.2-51.2V441.299c0-28.278%2022.922-51.2%2051.2-51.2h81.92c28.278%200%2051.2%2022.922%2051.2%2051.2v457.892c0%2028.278-22.922%2051.2-51.2%2051.2zm-6.205-841.902C677.379%20271.088%20355.268%20367.011%2019.245%20387.336c-11.29.683-19.889%2010.389-19.206%2021.679s10.389%2019.889%2021.679%2019.206c342.256-20.702%20670.39-118.419%20964.372-284.046%209.854-5.552%2013.342-18.041%207.79-27.896s-18.041-13.342-27.896-7.79z%22%2F%3E%20%3Cpath%20d%3D%22M901.21%20112.64l102.39.154c11.311.017%2020.494-9.138%2020.511-20.449s-9.138-20.494-20.449-20.511l-102.39-.154c-11.311-.017-20.494%209.138-20.511%2020.449s9.138%2020.494%2020.449%2020.511z%22%2F%3E%20%3Cpath%20d%3D%22M983.151%2092.251l-.307%20101.827c-.034%2011.311%209.107%2020.508%2020.418%2020.542s20.508-9.107%2020.542-20.418l.307-101.827c.034-11.311-9.107-20.508-20.418-20.542s-20.508%209.107-20.542%2020.418z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); } .parallax__icon--plane { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000000%22%20height%3D%22800px%22%20width%3D%22800px%22%20version%3D%221.1%22%20id%3D%22Capa_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%20493.422%20493.422%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cg%3E%20%3Cpath%20d%3D%22M489.321%2C205.026c-5.827-6.71-16.944-7.509-23.638-1.698l-39.919%2C34.55l-80.896-13.097%20c-4.043-9.61-9.348-19.218-15.759-28.258l43.961-12.925c3.9-1.145%2C6.649-4.855%2C6.412-9.087c-0.285-4.935-4.516-8.701-9.444-8.424%20l-63.556%2C3.607c-0.553%2C0.04-1.122%2C0.197-1.706%2C0.293c-12.428-10.446-26.64-18.159-41.925-21.491l-7.153-52.481%20c-0.537-3.941-3.648-7.209-7.769-7.77c-0.016%2C0-0.016%2C0-0.032%2C0c-4.974-0.679-9.553%2C2.795-10.232%2C7.77l-7.153%2C52.481%20c-15.302%2C3.339-29.529%2C11.061-41.972%2C21.523c-0.553-0.095-1.074-0.292-1.657-0.325l-63.559-3.607%20c-4.059-0.229-7.896%2C2.345-9.095%2C6.403c-1.389%2C4.744%2C1.326%2C9.711%2C6.063%2C11.108l43.962%2C12.925%20c-6.411%2C9.048-11.732%2C18.665-15.775%2C28.281l-80.802%2C13.138l-39.997-34.613c-6.68-5.811-17.78-5.037-23.655%2C1.714%20c-5.102%2C5.905-5.464%2C14.456-0.443%2C21.341l47.279%2C54.715c3.331%2C3.884%2C7.942%2C6.466%2C12.979%2C7.272l88.096%2C14.267%20c16.739%2C25.131%2C48.999%2C42.777%2C86.66%2C45.02v8.55c-4.722%2C2.811-8.053%2C7.753-8.068%2C13.659l-0.032%2C19.202%20c-0.015%2C8.931%2C7.216%2C16.178%2C16.139%2C16.194c0.016%2C0%2C0.016%2C0%2C0.03%2C0c8.923%2C0%2C16.156-7.225%2C16.17-16.145l0.032-19.202%20c0.016-5.93-3.332-10.905-8.101-13.723v-8.534c37.661-2.243%2C69.921-19.889%2C86.66-45.028l88.082-14.258%20c5.053-0.805%2C9.663-3.388%2C12.963-7.241l47.751-55.299C494.799%2C219.498%2C494.437%2C210.947%2C489.321%2C205.026z%20M66.413%2C272.405%20c-1.279-0.205-2.431-0.852-3.3-1.856l-46.014-54.998l45.309%2C39.128l27.502-4.419l5.669%2C26.868L66.413%2C272.405z%20M112.679%2C279.899%20l-6.773-32.167l36.807-5.811c-1.926%2C7.485-3.063%2C14.773-3.063%2C21.507c0%2C7.414%2C1.342%2C14.567%2C3.616%2C21.42L112.679%2C279.899z%20M246.68%2C323.725c-17.339%2C0-33.397-3.931-46.709-10.596c30.509-7.437%2C62.911-7.437%2C93.419%2C0%20C280.077%2C319.794%2C264.018%2C323.725%2C246.68%2C323.725z%20M310.786%2C301.09c-40.482-12.56-86.349-13.777-128.21%2C0.002%20c-11.49-10.358-18.67-23.348-18.67-37.664c0-34.898%2C38.688-92.628%2C82.774-92.628c44.088%2C0%2C82.776%2C57.73%2C82.776%2C92.628%20C329.456%2C277.743%2C322.275%2C290.733%2C310.786%2C301.09z%20M380.68%2C279.899l-30.587%2C4.95c2.273-6.853%2C3.617-14.006%2C3.617-21.42%20c0-6.68-1.106-13.902-3.017-21.316l36.699%2C5.936L380.68%2C279.899z%20M430.216%2C270.582c-0.838%2C0.972-1.989%2C1.619-3.284%2C1.824%20l-29.15%2C4.722l5.589-26.498l27.326%2C4.364l46.86-39.19L430.216%2C270.582z%22%2F%3E%20%3Cpath%20d%3D%22M210.108%2C236.837h73.112c6.694%2C0%2C12.127-5.433%2C12.127-12.128c0-6.696-5.433-12.127-12.127-12.127h-73.112%20c-6.696%2C0-12.127%2C5.432-12.127%2C12.127C197.981%2C231.404%2C203.413%2C236.837%2C210.108%2C236.837z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000000%22%20height%3D%22800px%22%20width%3D%22800px%22%20version%3D%221.1%22%20id%3D%22Capa_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%20493.422%20493.422%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cg%3E%20%3Cpath%20d%3D%22M489.321%2C205.026c-5.827-6.71-16.944-7.509-23.638-1.698l-39.919%2C34.55l-80.896-13.097%20c-4.043-9.61-9.348-19.218-15.759-28.258l43.961-12.925c3.9-1.145%2C6.649-4.855%2C6.412-9.087c-0.285-4.935-4.516-8.701-9.444-8.424%20l-63.556%2C3.607c-0.553%2C0.04-1.122%2C0.197-1.706%2C0.293c-12.428-10.446-26.64-18.159-41.925-21.491l-7.153-52.481%20c-0.537-3.941-3.648-7.209-7.769-7.77c-0.016%2C0-0.016%2C0-0.032%2C0c-4.974-0.679-9.553%2C2.795-10.232%2C7.77l-7.153%2C52.481%20c-15.302%2C3.339-29.529%2C11.061-41.972%2C21.523c-0.553-0.095-1.074-0.292-1.657-0.325l-63.559-3.607%20c-4.059-0.229-7.896%2C2.345-9.095%2C6.403c-1.389%2C4.744%2C1.326%2C9.711%2C6.063%2C11.108l43.962%2C12.925%20c-6.411%2C9.048-11.732%2C18.665-15.775%2C28.281l-80.802%2C13.138l-39.997-34.613c-6.68-5.811-17.78-5.037-23.655%2C1.714%20c-5.102%2C5.905-5.464%2C14.456-0.443%2C21.341l47.279%2C54.715c3.331%2C3.884%2C7.942%2C6.466%2C12.979%2C7.272l88.096%2C14.267%20c16.739%2C25.131%2C48.999%2C42.777%2C86.66%2C45.02v8.55c-4.722%2C2.811-8.053%2C7.753-8.068%2C13.659l-0.032%2C19.202%20c-0.015%2C8.931%2C7.216%2C16.178%2C16.139%2C16.194c0.016%2C0%2C0.016%2C0%2C0.03%2C0c8.923%2C0%2C16.156-7.225%2C16.17-16.145l0.032-19.202%20c0.016-5.93-3.332-10.905-8.101-13.723v-8.534c37.661-2.243%2C69.921-19.889%2C86.66-45.028l88.082-14.258%20c5.053-0.805%2C9.663-3.388%2C12.963-7.241l47.751-55.299C494.799%2C219.498%2C494.437%2C210.947%2C489.321%2C205.026z%20M66.413%2C272.405%20c-1.279-0.205-2.431-0.852-3.3-1.856l-46.014-54.998l45.309%2C39.128l27.502-4.419l5.669%2C26.868L66.413%2C272.405z%20M112.679%2C279.899%20l-6.773-32.167l36.807-5.811c-1.926%2C7.485-3.063%2C14.773-3.063%2C21.507c0%2C7.414%2C1.342%2C14.567%2C3.616%2C21.42L112.679%2C279.899z%20M246.68%2C323.725c-17.339%2C0-33.397-3.931-46.709-10.596c30.509-7.437%2C62.911-7.437%2C93.419%2C0%20C280.077%2C319.794%2C264.018%2C323.725%2C246.68%2C323.725z%20M310.786%2C301.09c-40.482-12.56-86.349-13.777-128.21%2C0.002%20c-11.49-10.358-18.67-23.348-18.67-37.664c0-34.898%2C38.688-92.628%2C82.774-92.628c44.088%2C0%2C82.776%2C57.73%2C82.776%2C92.628%20C329.456%2C277.743%2C322.275%2C290.733%2C310.786%2C301.09z%20M380.68%2C279.899l-30.587%2C4.95c2.273-6.853%2C3.617-14.006%2C3.617-21.42%20c0-6.68-1.106-13.902-3.017-21.316l36.699%2C5.936L380.68%2C279.899z%20M430.216%2C270.582c-0.838%2C0.972-1.989%2C1.619-3.284%2C1.824%20l-29.15%2C4.722l5.589-26.498l27.326%2C4.364l46.86-39.19L430.216%2C270.582z%22%2F%3E%20%3Cpath%20d%3D%22M210.108%2C236.837h73.112c6.694%2C0%2C12.127-5.433%2C12.127-12.128c0-6.696-5.433-12.127-12.127-12.127h-73.112%20c-6.696%2C0-12.127%2C5.432-12.127%2C12.127C197.981%2C231.404%2C203.413%2C236.837%2C210.108%2C236.837z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); } /* BACK layer — far/small icons (~150px), 6 per tile, random rotation & color */ .parallax__layer--back .parallax__icon { width: clamp(90px, 14vw, 150px); height: clamp(90px, 14vw, 150px); } .parallax__layer--back .parallax__tile .parallax__icon:nth-child(1) { top: 3%; left: 6%; transform: rotate(-32deg); background-color: var(--px-far-orange); } .parallax__layer--back .parallax__tile .parallax__icon:nth-child(2) { top: 19%; left: 74%; transform: rotate( 18deg); background-color: var(--px-far-green); } .parallax__layer--back .parallax__tile .parallax__icon:nth-child(3) { top: 39%; left: 28%; transform: rotate(-11deg); background-color: var(--px-far-red); } .parallax__layer--back .parallax__tile .parallax__icon:nth-child(4) { top: 57%; left: 82%; transform: rotate( 41deg); background-color: var(--px-far-yellow); } .parallax__layer--back .parallax__tile .parallax__icon:nth-child(5) { top: 71%; left: 10%; transform: rotate( 27deg); background-color: var(--px-far-green); } .parallax__layer--back .parallax__tile .parallax__icon:nth-child(6) { top: 87%; left: 50%; transform: rotate(-44deg); background-color: var(--px-far-orange); } /* MID layer — near/medium icons (~250px), 3 per tile, random rotation & color */ .parallax__layer--mid .parallax__icon { width: clamp(150px, 26vw, 250px); height: clamp(150px, 26vw, 250px); } .parallax__layer--mid .parallax__tile .parallax__icon:nth-child(1) { top: 4%; left: 56%; transform: rotate( 23deg); background-color: var(--px-mid-red); } .parallax__layer--mid .parallax__tile .parallax__icon:nth-child(2) { top: 40%; left: 2%; transform: rotate(-38deg); background-color: var(--px-mid-yellow); } .parallax__layer--mid .parallax__tile .parallax__icon:nth-child(3) { top: 68%; left: 60%; transform: rotate( 13deg); background-color: var(--px-mid-green); } /* === SHARED COMPONENT: CTA BUTTON === */ .cta-button { display: inline-block; background-color: var(--color-primary); color: var(--color-on-primary); font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-body); line-height: 1.2; text-align: center; border: 2px solid var(--color-primary); border-radius: var(--radius-sm); padding: 0.875rem 2rem; transition: background-color var(--transition), border-color var(--transition); } .cta-button:hover { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); } .cta-button:focus-visible { outline: 3px solid var(--color-primary-ring); outline-offset: 2px; } .cta-button:disabled { opacity: 0.6; cursor: not-allowed; } /* === SITE HEADER === */ .site-header { text-align: center; padding-block: var(--spacing-md); /* compact: reduces the gap to the hero badge */ } .site-header__logo { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: 1.25rem; color: var(--color-primary); letter-spacing: -0.01em; } /* === HERO (bg: dark navy — conversion emphasis, text-left / mockup-right) === */ .hero { background-color: var(--color-primary); color: #FFFFFF; padding-block: clamp(2rem, 4vw, 3.25rem); /* trimmed top/bottom to keep it above the fold */ overflow: hidden; /* clip the mockup that bleeds off the right edge */ } .hero__grid { width: 100%; max-width: 1120px; /* wider than the 720px body so 2 columns fit */ margin-inline: auto; padding-inline: var(--container-pad); display: flex; flex-direction: column; /* mobile: stacked, image below text */ align-items: center; gap: var(--spacing-xl); text-align: center; } .hero__content { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-lg); } .hero__badge { display: inline-block; background-color: rgba(255, 255, 255, 0.12); color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: var(--radius-pill); padding: 0.35rem 0.9rem; font-size: 0.8rem; font-weight: var(--fw-semibold); letter-spacing: 0.02em; } .hero__headline { color: #FFFFFF; max-width: 20ch; } .hero__body { max-width: 46ch; color: rgba(255, 255, 255, 0.85); font-size: 1.0625rem; } .hero__cta { /* invert so the CTA pops on the dark band */ background-color: #FFFFFF; color: var(--color-primary); border-color: #FFFFFF; } .hero__cta:hover { background-color: #E9EEF5; border-color: #E9EEF5; } .hero__cta:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.65); outline-offset: 2px; } .hero__subtext { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.78); } .hero__media { width: 100%; } .hero__media img { /* transparent PNG of devices — no frame/shadow needed */ width: 100%; height: auto; } /* === SOCIAL PROOF (bg: alt) — floating Reddit cards === */ .social-proof { background-color: var(--color-surface-alt); padding-block: var(--section-pad); } .social-proof .container { display: flex; flex-direction: column; gap: var(--spacing-xl); } .social-proof__headline { text-align: center; } .social-proof__cards { display: grid; gap: var(--spacing-lg); } .reddit-card { display: flex; flex-direction: column; gap: var(--spacing-md); background-color: var(--color-bg); border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: var(--spacing-xl); box-shadow: var(--shadow-subtle); } .reddit-card__head { display: flex; align-items: center; gap: var(--spacing-sm); } .reddit-card__logo { flex: 0 0 auto; } .reddit-card__sub { font-style: normal; font-weight: var(--fw-semibold); font-size: var(--fs-small); color: var(--color-text); } .reddit-card__quote { color: var(--color-text-secondary); font-size: 1.0625rem; line-height: 1.55; } .social-proof__anchor { text-align: center; font-weight: var(--fw-medium); } .social-proof__anchor strong { color: var(--color-primary); } /* === PAIN AGITATION (bg: white) === */ .pain { padding-block: var(--section-pad); } .pain__headline { text-align: center; } .pain__list { display: flex; flex-direction: column; gap: var(--spacing-md); margin-top: var(--spacing-xl); } .pain__item { color: var(--color-text-secondary); padding-left: var(--spacing-lg); position: relative; } .pain__item::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: var(--status-out); } /* === FEATURES → BENEFITS (bg: alt) === */ .features { background-color: var(--color-surface-alt); padding-block: var(--section-pad); } .features__headline { text-align: center; } .features__caption { caption-side: top; text-align: center; color: var(--color-text-secondary); font-size: var(--fs-small); margin-bottom: var(--spacing-lg); } .features__table th, .features__table td { text-align: left; vertical-align: top; padding: var(--spacing-md) var(--spacing-sm); border-bottom: 1px solid var(--color-divider); } .features__table thead th { font-family: var(--font-heading); color: var(--color-primary); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.04em; } .features__table tbody th { color: var(--color-primary); font-weight: var(--fw-bold); width: 34%; } .features__table tbody td { color: var(--color-text-secondary); } /* === KEY DIFFERENTIATOR (bg: white) === */ .differentiator { padding-block: var(--section-pad); } .differentiator__headline { text-align: center; margin-bottom: var(--spacing-xl); } .differentiator .container { display: flex; flex-direction: column; gap: var(--spacing-lg); } .differentiator__item { display: flex; flex-direction: row; align-items: center; /* vertically center the icon against the text block */ gap: var(--spacing-lg); background-color: var(--color-surface-alt); border: 1px solid var(--color-divider); border-top: 3px solid var(--color-primary); border-radius: var(--radius-md); padding: var(--spacing-xl); } .differentiator__icon { flex: 0 0 auto; width: clamp(96px, 16vw, 145px); height: clamp(96px, 16vw, 145px); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; } .differentiator__icon--email { background-color: var(--color-icon-email); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20height%3D%22800px%22%20width%3D%22800px%22%20version%3D%221.1%22%20id%3D%22_x32_%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%20512%20512%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23000000%3B%7D%20%3C%2Fstyle%3E%20%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M66.734%2C401.582c-5.902%2C0-11.421-1.551-16.135-4.277l139.049-121.182l12.979%2C11.294%20c10.863%2C9.44%2C24.46%2C14.22%2C37.93%2C14.22c13.536%2C0%2C27.133-4.78%2C37.996-14.22l12.973-11.294l47.074%2C41.038%20c5.324-8.971%2C11.939-17.054%2C19.613-24.038l-43.093-37.547L446.977%2C140.54v127.084c12.26%2C2.236%2C23.756%2C6.62%2C34.136%2C12.75V124.834%20c0-4.404-0.43-8.762-1.236-12.979c-2.175-10.925-7.016-20.922-13.778-29.181c-1.43-1.8-2.921-3.411-4.54-5.022%20c-11.978-12.046-28.804-19.56-47.182-19.56H66.734c-18.377%2C0-35.136%2C7.514-47.182%2C19.56c-1.612%2C1.611-3.102%2C3.222-4.532%2C5.022%20c-6.768%2C8.259-11.609%2C18.256-13.717%2C29.181C0.43%2C116.072%2C0%2C120.43%2C0%2C124.834v244.162c0%2C9.367%2C1.987%2C18.371%2C5.526%2C26.502%20c3.283%2C7.762%2C8.131%2C14.785%2C14.026%2C20.673c1.491%2C1.491%2C2.981%2C2.86%2C4.593%2C4.224c11.549%2C9.561%2C26.454%2C15.336%2C42.589%2C15.336h280.481%20c-8.118-10.032-14.436-21.567-18.412-34.15H66.734z%20M43.697%2C101.797c5.962-5.956%2C13.973-9.561%2C23.037-9.561h347.645%20c9.065%2C0%2C17.142%2C3.606%2C23.037%2C9.561c1.047%2C1.061%2C2.042%2C2.243%2C2.921%2C3.418L258.128%2C264.017c-5.029%2C4.405-11.24%2C6.581-17.571%2C6.581%20c-6.271%2C0-12.476-2.176-17.572-6.581L40.85%2C105.148C41.656%2C103.973%2C42.65%2C102.858%2C43.697%2C101.797z%20M34.136%2C368.997V140.479%20L166%2C255.51L34.203%2C370.42C34.136%2C369.984%2C34.136%2C369.494%2C34.136%2C368.997z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M428.285%2C286.484c-46.235%2C0-83.702%2C37.48-83.702%2C83.715c0%2C46.228%2C37.467%2C83.708%2C83.702%2C83.708%20c46.242%2C0%2C83.715-37.48%2C83.715-83.708C512%2C323.963%2C474.527%2C286.484%2C428.285%2C286.484z%20M441.23%2C410.236h-20.331v-56.421h-0.242%20l-14.744%2C6.963l-3.076-17.82l20.654-9.441h17.74V410.236z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20height%3D%22800px%22%20width%3D%22800px%22%20version%3D%221.1%22%20id%3D%22_x32_%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%20512%20512%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23000000%3B%7D%20%3C%2Fstyle%3E%20%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M66.734%2C401.582c-5.902%2C0-11.421-1.551-16.135-4.277l139.049-121.182l12.979%2C11.294%20c10.863%2C9.44%2C24.46%2C14.22%2C37.93%2C14.22c13.536%2C0%2C27.133-4.78%2C37.996-14.22l12.973-11.294l47.074%2C41.038%20c5.324-8.971%2C11.939-17.054%2C19.613-24.038l-43.093-37.547L446.977%2C140.54v127.084c12.26%2C2.236%2C23.756%2C6.62%2C34.136%2C12.75V124.834%20c0-4.404-0.43-8.762-1.236-12.979c-2.175-10.925-7.016-20.922-13.778-29.181c-1.43-1.8-2.921-3.411-4.54-5.022%20c-11.978-12.046-28.804-19.56-47.182-19.56H66.734c-18.377%2C0-35.136%2C7.514-47.182%2C19.56c-1.612%2C1.611-3.102%2C3.222-4.532%2C5.022%20c-6.768%2C8.259-11.609%2C18.256-13.717%2C29.181C0.43%2C116.072%2C0%2C120.43%2C0%2C124.834v244.162c0%2C9.367%2C1.987%2C18.371%2C5.526%2C26.502%20c3.283%2C7.762%2C8.131%2C14.785%2C14.026%2C20.673c1.491%2C1.491%2C2.981%2C2.86%2C4.593%2C4.224c11.549%2C9.561%2C26.454%2C15.336%2C42.589%2C15.336h280.481%20c-8.118-10.032-14.436-21.567-18.412-34.15H66.734z%20M43.697%2C101.797c5.962-5.956%2C13.973-9.561%2C23.037-9.561h347.645%20c9.065%2C0%2C17.142%2C3.606%2C23.037%2C9.561c1.047%2C1.061%2C2.042%2C2.243%2C2.921%2C3.418L258.128%2C264.017c-5.029%2C4.405-11.24%2C6.581-17.571%2C6.581%20c-6.271%2C0-12.476-2.176-17.572-6.581L40.85%2C105.148C41.656%2C103.973%2C42.65%2C102.858%2C43.697%2C101.797z%20M34.136%2C368.997V140.479%20L166%2C255.51L34.203%2C370.42C34.136%2C369.984%2C34.136%2C369.494%2C34.136%2C368.997z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M428.285%2C286.484c-46.235%2C0-83.702%2C37.48-83.702%2C83.715c0%2C46.228%2C37.467%2C83.708%2C83.702%2C83.708%20c46.242%2C0%2C83.715-37.48%2C83.715-83.708C512%2C323.963%2C474.527%2C286.484%2C428.285%2C286.484z%20M441.23%2C410.236h-20.331v-56.421h-0.242%20l-14.744%2C6.963l-3.076-17.82l20.654-9.441h17.74V410.236z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); } .differentiator__icon--mobile { background-color: var(--color-icon-mobile); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000000%22%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2024%2024%22%20id%3D%22mobile-payment-done%22%20data-name%3D%22Line%20Color%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22icon%20line-color%22%3E%20%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%2F%3E%20%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Cpath%20id%3D%22secondary%22%20d%3D%22M20%2C17H15V7h5a1%2C1%2C0%2C0%2C1%2C1%2C1v8A1%2C1%2C0%2C0%2C1%2C20%2C17Zm-5-6h6%22%20style%3D%22fill%3A%20none%3B%20stroke%3A%20%23000000%3B%20stroke-linecap%3A%20round%3B%20stroke-linejoin%3A%20round%3B%20stroke-width%3A%202%3B%22%2F%3E%20%3Cpolyline%20id%3D%22secondary-2%22%20data-name%3D%22secondary%22%20points%3D%228%2012%209.09%2013.25%2011%2010.75%22%20style%3D%22fill%3A%20none%3B%20stroke%3A%20%23000000%3B%20stroke-linecap%3A%20round%3B%20stroke-linejoin%3A%20round%3B%20stroke-width%3A%202%3B%22%2F%3E%20%3Cpath%20id%3D%22primary%22%20d%3D%22M15%2C20V4a1%2C1%2C0%2C0%2C0-1-1H4A1%2C1%2C0%2C0%2C0%2C3%2C4V20a1%2C1%2C0%2C0%2C0%2C1%2C1H14A1%2C1%2C0%2C0%2C0%2C15%2C20ZM11%2C3H7l.5%2C2h3Z%22%20style%3D%22fill%3A%20none%3B%20stroke%3A%20%23000000%3B%20stroke-linecap%3A%20round%3B%20stroke-linejoin%3A%20round%3B%20stroke-width%3A%202%3B%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000000%22%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2024%2024%22%20id%3D%22mobile-payment-done%22%20data-name%3D%22Line%20Color%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22icon%20line-color%22%3E%20%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%2F%3E%20%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Cpath%20id%3D%22secondary%22%20d%3D%22M20%2C17H15V7h5a1%2C1%2C0%2C0%2C1%2C1%2C1v8A1%2C1%2C0%2C0%2C1%2C20%2C17Zm-5-6h6%22%20style%3D%22fill%3A%20none%3B%20stroke%3A%20%23000000%3B%20stroke-linecap%3A%20round%3B%20stroke-linejoin%3A%20round%3B%20stroke-width%3A%202%3B%22%2F%3E%20%3Cpolyline%20id%3D%22secondary-2%22%20data-name%3D%22secondary%22%20points%3D%228%2012%209.09%2013.25%2011%2010.75%22%20style%3D%22fill%3A%20none%3B%20stroke%3A%20%23000000%3B%20stroke-linecap%3A%20round%3B%20stroke-linejoin%3A%20round%3B%20stroke-width%3A%202%3B%22%2F%3E%20%3Cpath%20id%3D%22primary%22%20d%3D%22M15%2C20V4a1%2C1%2C0%2C0%2C0-1-1H4A1%2C1%2C0%2C0%2C0%2C3%2C4V20a1%2C1%2C0%2C0%2C0%2C1%2C1H14A1%2C1%2C0%2C0%2C0%2C15%2C20ZM11%2C3H7l.5%2C2h3Z%22%20style%3D%22fill%3A%20none%3B%20stroke%3A%20%23000000%3B%20stroke-linecap%3A%20round%3B%20stroke-linejoin%3A%20round%3B%20stroke-width%3A%202%3B%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); } .differentiator__body { display: flex; flex-direction: column; gap: var(--spacing-sm); } .differentiator__item p { color: var(--color-text-secondary); } /* === WHO IT'S FOR (bg: alt) === */ .audience { background-color: var(--color-surface-alt); padding-block: var(--section-pad); } .audience__headline { text-align: center; } .audience__list { display: flex; flex-direction: column; gap: var(--spacing-md); margin-top: var(--spacing-xl); } .audience__item { color: var(--color-text-secondary); padding-left: var(--spacing-lg); position: relative; } .audience__item::before { content: "\2713"; /* check mark */ position: absolute; left: 0; top: 0; color: var(--color-success-text); font-weight: var(--fw-bold); } /* === HOW IT WORKS (bg: white) === */ .how { padding-block: var(--section-pad); } .how__headline { text-align: center; margin-bottom: var(--spacing-xl); } .how__steps { display: flex; flex-direction: column; gap: var(--spacing-xl); counter-reset: how-step; } .how__step { counter-increment: how-step; padding-top: var(--spacing-md); border-top: 1px solid var(--color-divider); } .how__step-title { display: flex; align-items: baseline; gap: var(--spacing-sm); margin-bottom: var(--spacing-xs); } .how__step-title::before { content: counter(how-step); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.75rem; height: 1.75rem; background-color: var(--color-primary); color: var(--color-on-primary); border-radius: var(--radius-pill); font-size: 0.9rem; font-weight: var(--fw-bold); } .how__step p { color: var(--color-text-secondary); } /* === PRICING + CTA (bg: alt) === */ .pricing { background-color: var(--color-surface-alt); padding-block: var(--section-pad); text-align: center; } .pricing .container { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-lg); } .pricing__comparison { max-width: 52ch; color: var(--color-text-secondary); } .pricing__box { display: flex; flex-direction: column; gap: var(--spacing-sm); width: 100%; max-width: 26rem; background-color: var(--color-bg); border: 2px solid var(--color-primary); border-radius: var(--radius-md); padding: var(--spacing-xl); box-shadow: var(--shadow-subtle); } .pricing__badge { display: inline-block; align-self: center; background-color: var(--color-surface-alt); color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: var(--radius-pill); padding: 0.3rem 0.8rem; font-size: 0.8rem; font-weight: var(--fw-semibold); } .pricing__price { font-family: var(--font-heading); font-size: 1.25rem; color: var(--color-text); } .pricing__price strong { font-size: 2.25rem; color: var(--color-primary); } .pricing__regular { color: var(--color-text-secondary); text-decoration: line-through; font-size: var(--fs-small); } .pricing__guarantee { max-width: 46ch; color: var(--color-text-secondary); font-size: var(--fs-small); } .pricing__subtext { font-size: var(--fs-small); color: var(--color-text-secondary); } /* === FAQ ACCORDION (bg: white) === */ .faq { padding-block: var(--section-pad); } .faq__headline { text-align: center; margin-bottom: var(--spacing-xl); } .faq__list { display: flex; flex-direction: column; } .faq__item { border-bottom: 1px solid var(--color-divider); } .faq__question { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); width: 100%; text-align: left; background: none; border: 0; padding: var(--spacing-md) 0; font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: 1.0625rem; color: var(--color-primary); } .faq__question::after { content: "+"; flex: 0 0 auto; font-size: 1.5rem; line-height: 1; color: var(--color-primary); transition: transform var(--transition); } .faq__question[aria-expanded="true"]::after { content: "\2212"; /* minus */ } .faq__question:hover { color: var(--color-primary-dark); } .faq__question:focus-visible { outline: 3px solid var(--color-primary-ring); outline-offset: 2px; } .faq__answer { padding: 0 0 var(--spacing-md); color: var(--color-text-secondary); } .faq__answer[hidden] { display: none; } /* === FOOTER CTA (bg: alt) === */ .footer-cta { background-color: var(--color-surface-alt); padding-block: var(--section-pad); text-align: center; } .footer-cta .container { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-lg); } .footer-cta__contact { font-size: var(--fs-small); color: var(--color-text-secondary); } /* === SITE FOOTER === */ .site-footer { padding-block: var(--spacing-xl); text-align: center; border-top: 1px solid var(--color-divider); } .site-footer__note { font-size: var(--fs-small); color: var(--color-text-secondary); } /* === LEAD MODAL === */ .lead-modal { width: calc(100% - 2 * var(--container-pad)); max-width: 560px; /* wider so text wraps less and fits without scroll */ max-height: calc(100dvh - 2rem); /* stay inside the viewport */ margin: auto; padding: 0; border: 0; border-radius: var(--radius-md); background-color: var(--color-bg); color: var(--color-text); box-shadow: var(--shadow-modal); } .lead-modal:not([open]) { display: none; } .lead-modal::backdrop { background-color: var(--color-backdrop); } .lead-modal__inner { position: relative; padding: var(--spacing-lg); /* trimmed from 2rem to reduce height */ } .lead-modal__close { position: absolute; top: var(--spacing-sm); right: var(--spacing-sm); width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: var(--radius-sm); font-size: 1.75rem; line-height: 1; color: var(--color-text-secondary); transition: background-color var(--transition), color var(--transition); } .lead-modal__close:hover { background-color: var(--color-surface-alt); color: var(--color-primary); } .lead-modal__close:focus-visible { outline: 3px solid var(--color-primary-ring); outline-offset: 2px; } .lead-modal__content { display: flex; flex-direction: column; gap: var(--spacing-sm); } .lead-modal__title { font-size: 1.25rem; padding-right: var(--spacing-xl); /* clear the close button */ } .lead-modal__lead { font-size: var(--fs-small); } .lead-modal__lead { color: var(--color-text-secondary); } .lead-modal__lead strong { color: var(--color-text); } .lead-modal__success { text-align: center; padding-block: var(--spacing-lg); color: var(--color-success-text); font-weight: var(--fw-semibold); } .lead-modal__success[hidden] { display: none; } /* === LEAD FORM === */ .lead-form { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-top: var(--spacing-xs); } .lead-form__field { display: flex; flex-direction: column; gap: var(--spacing-xs); } .lead-form__label { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--color-text); } .lead-form__input { width: 100%; padding: 0.75rem 1rem; background-color: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); transition: border-color var(--transition), box-shadow var(--transition); } .lead-form__input::placeholder { color: var(--color-text-secondary); } .lead-form__input:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-ring); } .lead-form__input[aria-invalid="true"] { border-color: var(--color-error); } .lead-form__error { color: var(--color-error); font-size: var(--fs-small); font-weight: var(--fw-medium); } .lead-form__error:empty { display: none; } /* === TABLET (768px+) === */ @media (min-width: 768px) { /* Hero: text left, mockup right, side by side (above the fold) */ .hero__grid { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--spacing-2xl); text-align: left; max-width: 1280px; /* wider so the mockup can be ~2x */ } .hero__content { align-items: flex-start; flex: 0 1 42%; max-width: 27rem; } .hero__media { flex: 0 1 58%; min-width: 0; } .hero__media img { width: 150%; /* ~2x bigger; overflows and bleeds off the right edge */ max-width: none; } /* Social proof: two cards side by side */ .social-proof__cards { grid-template-columns: 1fr 1fr; } /* Differentiator stays a single vertical column at every width: heading full-width, each item full-width, stacked (better readability). */ .audience__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg) var(--spacing-xl); } .how__steps { flex-direction: row; } .how__step { flex: 1; } } /* === DESKTOP (1200px+) === Body container is capped at 720px by design (single column); the hero grid opts out at 1120px so the two-column layout has room to breathe. */ @media (min-width: 1200px) { .hero__grid { max-width: 1360px; } .hero__content { flex-basis: 40%; } .hero__media { flex-basis: 60%; } .hero__media img { width: 160%; } /* push toward ~2x on wide screens */ } /* === REDUCED MOTION === */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Kill the decorative parallax entirely for motion-sensitive users */ .parallax { display: none; } }