.btn:hover { filter: brightness(1.05); } .btn-success:hover { background: rgb(22, 24, 60); } /* darker blue tone */ .btn-ghost:hover { background: rgb(235, 236, 245); } /* pale blue-grey */ /* Base */ :root { /* Light theme */ --bg: rgb(242, 243, 250); /* very light blue-grey background */ --surface: rgb(255, 255, 255); /* main surfaces */ --card: rgb(250, 250, 253); /* subtle contrast for cards */ --muted: rgb(90, 92, 125); /* muted text, mid-blue-grey */ --text: rgb(15, 17, 45); /* strong readable dark blue text */ /* Branding: dark blue primary */ --brand: rgb(28, 30, 75); /* core brand color */ --accent: rgb(79, 82, 145); /* lighter accent blue */ --border: rgb(220, 222, 240); /* soft cool border */ --shadow: 0 6px 24px rgba(28, 30, 75, 0.12); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: Inter, system-ui, Arial, sans-serif; color: var(--text); background: var(--bg); } img { display: block; } .container { width: min(1100px, 92%); margin: 0 auto; } /* Variant: ensure everything below hero is white on index-screens.html */ body.screens-variant main { background: var(--surface); overflow: auto; } body.screens-variant .section-gutters { background: var(--surface); } /* In-flow gutters that align with main content width */ .gutter-screens, .section-gutters { display: grid; grid-template-columns: 1fr min(1100px, 92%) 1fr; gap: 16px; align-items: start; margin: 8px 0 24px; } .gutter-screens { pointer-events: none; } .gutter-col { /* Scale up to ~50% bigger when space allows, and never exceed the side space */ width: clamp(320px, calc((100vw - min(1100px, 92vw)) / 2 - 24px), 540px); display: flex; flex-direction: column; gap: 16px; padding: 0 8px; pointer-events: auto; } .left { grid-column: 1; justify-self: end; } .right { grid-column: 3; justify-self: start; } .section-gutters .section-col { grid-column: 2; } .gutter-img { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; text-decoration: none; margin-top: 120px;} .gutter-img img { width: 100%; height: auto; display: block; } .gutter-img:hover { filter: brightness(0.98); } .gutter-img .caption { display: block; padding: 8px 10px; font-size: 12px; color: var(--muted); background: var(--card); border-top: 1px solid var(--border); } /* Ensure standard stacking; no overlay needed now that gutters are in-flow */ /* main, header.nav, footer.footer { position: relative; z-index: 1; } */ /* Stacked screenshots for tablet/mobile */ .screens-stack { background: var(--surface); } .screens-stack .stack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .screens-stack .stack-img { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); text-decoration: none; } .screens-stack .stack-img img { width: 100%; height: auto; display: block; } .screens-stack .stack-img .caption { display: block; padding: 8px 10px; font-size: 12px; color: var(--muted); background: var(--card); border-top: 1px solid var(--border); } /* Show stacked screenshots until there is ample side space for gutters */ @media (max-width: 1799px) { .gutter-screens { display: none; } .section-gutters .gutter-col { display: none; } /* 2x2 grid in stacked mode on mid-size screens */ .screens-stack .stack-grid { grid-template-columns: 1fr 1fr; } } /* Only hide stacked screenshots (i.e., show gutters) on very wide screens */ @media (min-width: 1800px) { .screens-stack { display: none; } } /* Small screens: stacked screenshots collapse to single column */ @media (max-width: 700px) { .screens-stack .stack-grid { grid-template-columns: 1fr; } } /* Lightbox for fullscreen screenshot view */ .lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center; z-index: 12000; } .lightbox.open { display: flex; } .lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); } .lightbox .close { position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,0.9); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 6px 10px; cursor: pointer; } /* Nav */ .nav { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(6px); background: rgba(255,255,255,0.8); border-bottom: 1px solid var(--border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; } .nav a { color: var(--text); text-decoration: none; } .nav a:hover { opacity: 1; } /* Active nav link styling (CSS-only) */ .nav nav a.active { position: relative; } .nav .btn { margin-left: 12px; } .nav-toggle { display: none; background: transparent; border: 1px solid var(--border); color: var(--text); padding: 6px 10px; border-radius: 6px; } .nav-actions { display:flex; align-items:center; gap:10px; } .btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); } .btn-success { background: var(--brand); color: #fff; border: 1px solid rgb(22, 24, 60); /* slightly darker shade of the brand color */ } .link { color: var(--brand); } .links a { color: var(--brand); text-decoration: none; } /* Buttons */ .btn { display: inline-block; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--border); color: var(--text); text-decoration: none; } .btn-primary { background: linear-gradient(90deg, var(--brand), var(--accent)); color: #ffffff !important; border: none; font-weight: 600; } .btn-secondary { background: transparent; font-weight: 600;} /* Hero */ .hero { padding: 56px 0 40px; border-bottom: 1px solid var(--border); background: var(--bg); } .hero-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; } .hero h1 { font-size: 52px; line-height: 1.05; margin: 0 0 12px; font-weight: 800; letter-spacing: -0.02em; } .lead { font-size: 18px; color: var(--muted); margin: 0 0 20px; } .hero-ctas { display: flex; gap: 14px; margin-bottom: 14px; } .pillars { list-style: none; padding: 0; margin: 12px 0 0; display: flex; gap: 16px; color: var(--muted); } .pillars li { background: var(--card); border: 1px solid var(--border); padding: 6px 10px; border-radius: 20px; text-align: center;} .hero-art img { border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); background: var(--surface); } /* Prevent images (logo and hero) from squashing on small screens */ .brand img, .footer .brand-sm img { max-height: 56px; object-fit: contain; } /* Ensure hero never causes horizontal scroll; allow vertical stacking */ .hero { overflow-x: hidden; } .hero-inner { grid-auto-flow: row; } /* Hero carousel: alternate between image and quote */ .hero-carousel { position: relative; width: 100%; min-height: 220px; } .hero-carousel .item { position: absolute; inset: 0; opacity: 0; transition: opacity 800ms ease; display: flex; align-items: center; justify-content: center; padding: 18px; } .hero-carousel .item.active { opacity: 1; position: relative; } .hero-quote { max-width: 420px; background: var(--card); border: 1px solid var(--border); padding: 18px; border-radius: 12px; box-shadow: var(--shadow); color: var(--text); font-size: 15px; line-height: 1.45; } .hero-quote footer { margin-top: 10px; font-weight: 600; color: var(--muted); font-size: 13px; } /* Sections */ section { padding: 50px 0; background: var(--surface); } .chain .sub { color: var(--muted); margin-top: -10px; } .steps { margin-top: 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .step { background: var(--card); border: 1px solid var(--border); padding: 16px; border-radius: 10px; box-shadow: var(--shadow); } .copilot .grid, .diffs .grid, .objections .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .card, .feature { background: var(--card); border: 1px solid var(--border); padding: 16px; border-radius: 10px; box-shadow: var(--shadow); } .profiles .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .sub { color: var(--muted); } .proof .checks { columns: 2; column-gap: 32px; list-style: none; padding: 0; } .proof .checks li { margin: 6px 0; padding-left: 22px; position: relative; color: var(--muted); } .proof .checks li::before { content: "✔"; position: absolute; left: 0; color: var(--brand); } .cta { background: linear-gradient(180deg, rgb(242, 243, 250), rgb(230, 232, 245)); /* light blue gradient */ border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .cta-inner { text-align: center; } /* CTA form styles */ .cta form { max-width: 760px; margin: 18px auto 0; text-align: left; background: var(--card); border: 1px solid var(--border); padding: 18px 20px 28px; border-radius: 12px; } .cta .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .cta label { font-size: 14px; color: var(--text); } .cta input[type="text"], .cta input[type="email"], .cta select, .cta textarea { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: #fff; color: var(--text); font-size: 14px; box-shadow: none; } .cta select { height: 40px; } .cta input[type="text"]:focus, .cta input[type="email"]:focus, .cta select:focus, .cta textarea:focus { outline: 3px solid rgba(28,30,75,0.06); border-color: rgba(28,30,75,0.12); } .cta textarea { min-height: 80px; resize: vertical; } .cta fieldset { border: 1px solid var(--border); padding: 14px; border-radius: 8px; margin-bottom: 12px; background: #fff; } .cta fieldset legend { padding: 0 8px; font-weight: 600; color: var(--text); } .cta fieldset label { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; font-size: 14px; } .cta .form-group .small { font-size: 12px; color: var(--muted); } .cta .btn-primary { display: inline-block; margin: 12px auto 0; padding: 10px 20px; min-width: 140px; border-radius: 10px; } .submit-wrap { display: flex; justify-content: center; align-items: center; height: 36px; margin-top: 6px; margin-bottom: 6px; width: 100%; text-align: center; } .submit-wrap .btn { box-shadow: var(--shadow); margin: 0 auto !important; float: none !important; display: inline-block !important; } /* Strong overrides to counter Mailchimp's embed CSS */ /* Strong overrides to counter Mailchimp's embed CSS */ #mc_embed_shell, #mc_embed_shell #mc_embed_signup { width: 100% !important; max-width: 760px !important; margin: 0 auto !important; box-sizing: border-box !important; } #mc_embed_shell { display: block !important; float: none !important; } #mc_embed_shell #mc_embed_signup { background: transparent !important; padding: 0 !important; border: none !important; } #mc_embed_shell #mc_embed_signup form, #mc_embed_shell #mc_embed_signup .form-group { width: 100% !important; box-sizing: border-box !important; } #mc_embed_signup .submit-wrap, #mc_embed_signup .submit-wrap .btn, #mc_embed_signup button { text-align: center !important; margin: 0 auto !important; float: none !important; } #mc_embed_signup input[type="submit"], #mc_embed_signup .button { margin: 0 auto !important; float: none !important; display: inline-block !important; } /* Ensure Mailchimp's internal .button class matches our btn styles */ #mc_embed_signup .button, #mc_embed_signup .button:hover { background: linear-gradient(90deg, var(--brand), var(--accent)) !important; color: #fff !important; border: none !important; } /* Ensure Mailchimp input elements take full width inside our card */ #mc_embed_signup input[type="text"], #mc_embed_signup input[type="email"], #mc_embed_signup select, #mc_embed_signup textarea { width: 100% !important; box-sizing: border-box !important; } #mc_embed_signup select { height: 40px !important; } /* Extra strong overrides for specific Mailchimp selects to ensure exact vertical alignment with text inputs (fixes Firm Type alignment) */ #mce-MMERGE5, #mce-MMERGE7, #mce-MMERGE8, #mc_embed_signup select { height: 40px !important; padding: 10px 12px !important; box-sizing: border-box !important; line-height: normal !important; font-size: 14px !important; font-family: Inter, system-ui, Arial, sans-serif !important; } /* For some browsers the native select arrow adds extra height; ensure the visual sizing matches by constraining min-height as well. */ #mce-MMERGE5, #mce-MMERGE7, #mce-MMERGE8 { min-height: 40px !important; } #mc_embed_signup .form-group { margin-bottom: 12px !important; } /* Center the inner container content */ .cta .cta-inner { display: flex; flex-direction: column; align-items: center; } @media (max-width: 900px) { .cta form { width: 92%; } .cta .grid { grid-template-columns: 1fr; } } /* Two-column form grid */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; align-items: start; } .form-grid .form-full { grid-column: 1 / -1; } .checkbox-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px; } .form-grid .indicates-required { grid-column: 1 / -1; text-align: right; color: var(--muted); font-size: 13px; } @media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } .checkbox-grid { grid-template-columns: 1fr; } } .footer { padding: 18px 0; color: var(--muted); background: var(--bg); } .footer-inner { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 12px; font-size: small;} .brand-sm { display: flex; align-items: center; gap: 10px; } /* Sitemap (footer navigation) */ .footer .sitemap { padding: 20px 0 10px; } .footer .sitemap .cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .footer .sitemap h4 { margin: 0 0 8px; font-size: 14px; color: var(--text); } .footer .sitemap ul { list-style: none; padding: 0; margin: 0; } .footer .sitemap li { margin: 8px 0; } .footer .sitemap a { color: var(--text); text-decoration: none; } .footer .sitemap a:hover { text-decoration: underline; } @media (max-width: 900px) { .footer .sitemap .cols { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .footer .sitemap .cols { grid-template-columns: 1fr; } } /* Responsive */ @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; } .copilot .grid, .diffs .grid, .objections .grid, .profiles .grid { grid-template-columns: 1fr; } .proof .checks { columns: 1; } .nav nav { display: none; } .nav .btn-primary { display:none; } .nav-toggle { display: inline-block; } } /* Ensure nav links are fully hidden on small screens so only the hamburger is used (only hide links inside the actual